/* font-scale:applied v1 */
/*
 * Buzzar system: tokens, the page frame and the header shell. Loaded last.
 * Concept: a well-kept bazaar. One calm frame, every stall in its aisle.
 * Signature: the green aisle rule, a 3px rule meaning "you are here"
 * (active nav item, selected card, the short rule above section kickers).
 *
 * The legacy custom properties from style.css (--canvas, --fg, --accent ...)
 * are mapped onto these tokens below, so there is one palette, not two.
 */

/* ---------- 1. Tokens ---------- */
:root,
html[data-theme='light'] {
  /*
   * feat-20261027-buzzar-ui-handover: semantic tokens from the 27 Oct 2026 UI handover (reference
   * src/styles.css). Daylight is the warm-paper and forest-green baseline. Components read --c-*;
   * the handover names (--bg, --paper, --ink ...) are aliased below. One deliberate deviation for
   * contrast: --c-muted is #55675b (5.2:1 on canvas), darker than the handover #6c7c70 (3.9:1),
   * which stays available as --hv-muted.
   */
  --c-canvas: #f3f4ed; /* handover --bg */
  --c-surface: #fcfdf8; /* handover --paper */
  --c-raised: #e8eddf; /* handover --sage */
  --c-text: #183d30; /* handover --ink */
  --c-muted: #55675b;
  --c-border: #d8e0d4; /* handover --line */
  --c-border-strong: #7d8f80; /* form controls, 3:1 */
  --c-accent: #227149; /* handover --green */
  --c-accent-hover: #1a5a39;
  --c-accent-ink: #ffffff;
  --c-accent-text: #1c6340;
  --c-accent-tint: #dcecd9; /* handover --mint */
  --c-bright: #26a660; /* handover --bright: active dot, pollen */
  --c-deep: #163e31; /* handover --dark: intentionally dark panels */
  --c-deep-ink: #f4f2e9;
  --c-deep-line: #8fb39e;
  --c-success: #1c6b3f;
  --c-warning: #8a5300;
  --c-danger: #b3261e;
  --c-focus: #227149;
  --c-scrim: rgb(22 62 49 / 0.5);
  --shadow-soft: 0 14px 40px #163e310c; /* handover --shadow */
  --hv-muted: #6c7c70;
  color-scheme: light;
}
/*
 * Graphite dark palette. Approved by Amr on 1 Nov 2026 as the Buzzar dark theme (the earlier
 * eucalyptus direction was rejected).
 */
html[data-theme='dark'] {
  --c-canvas: #3b3d39;
  --c-surface: #474b45;
  --c-raised: #4c524b;
  --c-text: #f4f2e9;
  --c-muted: #d0d3c9;
  --c-border: #767d72;
  --c-border-strong: #9ba696; /* handover #8b9587 is 2.9:1 on the surface; lifted to pass 3:1 */
  --c-accent: #a3d7b8;
  --c-accent-hover: #c4e7ce;
  --c-accent-ink: #233d2e;
  --c-accent-text: #a3d7b8;
  --c-accent-tint: #435c4c;
  --c-bright: #82cda6;
  --c-deep: #303b33;
  --c-deep-ink: #f4f2e9;
  --c-deep-line: #8fb39e;
  --c-success: #82cda6;
  --c-warning: #f0b95a;
  --c-danger: #ffd0ba;
  --c-focus: #a3d7b8;
  --c-scrim: rgb(23 27 23 / 0.62);
  --shadow-soft: 0 14px 40px #171b1718;
  --hv-muted: #d0d3c9;
  color-scheme: dark;
}
/*
 * The selector list matters: style.css and studio.css redefine --canvas, --surface, --fg ... on
 * html[data-theme='light'|'dark'] (specificity 0,1,1). A bare :root (0,1,0) loses to them, which left every
 * legacy-token page on the old grey and blue-grey palettes. Matching their specificity, and loading last, wins.
 */
:root,
html[data-theme='light'],
html[data-theme='dark'] {
  /* handover names, aliased to the semantic tokens */
  --bg: var(--c-canvas);
  --paper: var(--c-surface);
  --ink: var(--c-text);
  --line: var(--c-border);
  --bright: var(--c-bright);
  --mint: var(--c-accent-tint);
  --sage: var(--c-raised);
  --dark: var(--c-deep);
  --shadow: var(--shadow-soft);
  /* spacing: 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  /* type */
  --font: 'Avenir Next', 'Century Gothic', Arial, sans-serif;
  --t-display: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --t-h1: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  --t-h2: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --t-h3: 1.21875rem;
  --t-body: 1.03125rem;
  --t-label: 0.90625rem;
  --t-caption: 0.84375rem;
  /* shape */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --shadow-overlay: 0 12px 32px rgb(20 21 26 / 0.22);
  --aisle: 3px;
  /* layers */
  --z-header: 40;
  --z-drawer: 60;
  --z-toast: 70;
  --z-voice: 80;
  /* frame: 12-column grid inside a centred rail */
  --rail: 1240px;
  --gutter: 24px;
  --frame: max(var(--gutter), calc((100% - var(--rail)) / 2));
  --header-h: 64px;
  /* legacy custom properties, mapped onto the tokens */
  --canvas: var(--c-canvas);
  --surface: var(--c-surface);
  --raised: var(--c-raised);
  --border: var(--c-border);
  --fg: var(--c-text);
  --muted: var(--c-muted);
  --subtle: var(--c-muted);
  --accent: var(--c-accent);
  --accent-text: var(--c-accent-text);
  --accent-ink: var(--c-accent-ink);
  --green: var(--c-accent);
  --red: var(--c-danger);
  --focus: var(--c-focus);
  --market-panel: var(--c-accent-tint);
  --market-ink: var(--c-text);
  --market-muted: var(--c-muted);
  --radius: var(--r-lg);
  --radius-control: var(--r-sm);
  --radius-panel: var(--r-md);
  --space-xs: var(--s-1);
  --space-sm: var(--s-2);
  --space-md: var(--s-4);
  --space-lg: var(--s-5);
  --space-xl: var(--s-6);
}
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
}

/* ---------- 2. Base ---------- */
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  background: var(--c-canvas);
  color: var(--c-text);
}
html.bzr-scroll-lock,
html.bzr-scroll-lock body {
  overflow: hidden;
}
/* The hidden attribute must win over every display rule in the older stylesheets. */
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.skip {
  z-index: calc(var(--z-header) + 1);
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* honour the OS setting everywhere */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Preview strip ---------- */
.preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 32px;
  padding: 0 var(--frame);
  background: var(--c-raised);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: var(--t-caption);
  line-height: 1.3;
}
.preview b {
  margin-right: var(--s-3);
  color: var(--c-text);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
}
.preview > div {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.preview button {
  min-height: 28px;
  color: var(--c-text);
  font-size: var(--t-caption);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .preview {
    padding-block: 4px;
  }
}
html[data-mode='marketplace'] .preview {
  display: none;
}

/* ---------- 4. Header: one sticky row ---------- */
/* brand: the supplied B and bee image plus the "uzzar." wordmark, with the pollination overlay */
@keyframes bee-forage {
  0% {
    offset-distance: 0%;
    opacity: 0;
    scale: 0.3;
  }
  8% {
    opacity: 1;
    scale: 0.7;
  }
  24% {
    offset-distance: 25%;
  }
  40% {
    offset-distance: 46%;
  }
  49%,
  57% {
    offset-distance: 48%;
  }
  67% {
    offset-distance: 64%;
  }
  90% {
    offset-distance: 91%;
    opacity: 1;
    scale: 0.7;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
    scale: 0.25;
  }
}
@keyframes bee-wingbeat {
  from {
    transform: scaleY(0.55) rotate(-12deg);
  }
  to {
    transform: scaleY(1) rotate(15deg);
  }
}
@keyframes pollen-trace {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  70% {
    opacity: 0.28;
  }
}
@keyframes pollen-flower {
  0% {
    opacity: 0;
    scale: 0.2;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  65% {
    opacity: 0.65;
    scale: 1.5;
  }
  100% {
    opacity: 0;
    scale: 1.8;
  }
}
@keyframes pollen-stop {
  0%,
  42%,
  75%,
  100% {
    transform: scale(1);
    color: inherit;
  }
  52%,
  62% {
    transform: scale(1.5);
    color: var(--c-bright);
  }
}
@keyframes hive-buzz {
  0%,
  12%,
  88%,
  100% {
    transform: none;
  }
  3%,
  91% {
    transform: rotate(-7deg) translateY(-1px);
  }
  7%,
  96% {
    transform: rotate(5deg);
  }
}

/* primary navigation */
/* the aisle rule: you are here */

/* Ask Buzzar sits in the primary nav on wide screens; below 1280 the header pill (.bzr-nav-ai) is shown instead */
/* handover header: Ask Buzzar is a quiet pill with a sparkle and a round arrow button */

/* header search */

/* actions */
.bzr-ico {
  width: 18px;
  height: 18px;
  flex: none;
}
.bzr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: 0.78125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* session (sign in / sign out), added by session.js */

/* menu button (narrow screens only) */

/* ---------- 5. Sub-bar ---------- */

/* journey strip */

/* demo-only decision line */

/* ---------- 6. Menu drawer ---------- */

/* ---------- 7. Toast, footer ---------- */
#toast {
  display: none; /* app.js shows it inline for a few seconds */
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-toast);
  max-width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-text);
  color: var(--c-canvas);
  box-shadow: var(--shadow-overlay);
  font-size: var(--t-label);
  line-height: 1.4;
  pointer-events: none; /* a transient notice must never block what sits under it */
}

/* ---------- 8. Page frame ---------- */
#app > main,
#app.internal > main {
  width: 100%;
  max-width: calc(var(--rail) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) var(--s-8);
}

/* ---------- 9. Responsive header ---------- */
/* Compare / Saved / notifications are icon buttons with a corner count badge */
/* quiet header (handover): Compare, Saved and Board are icon buttons with a corner count; Talk to Sami is icon-only */
/* the search field is an icon button that opens the field, so the Ask Buzzar pill is the one wide control */
/* below 1280: the menu drawer replaces the nav and the sub-bar */
@media (max-width: 640px) {
  #toast {
    right: auto;
    left: 50%;
    bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    text-align: center;
  }
}

/* icon + label buttons: icon, wave and text share one 18px line so they never split across lines */

/* the demo has no marketplace search; its decision board stands in for Compare */

/* ---------- 10. Catalogue ---------- */
.live-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-border);
}
.live-controls .filters {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}
.live-controls .bzr-filter-field label {
  margin: 0 0 var(--s-1);
  color: var(--c-muted);
  font-size: var(--t-label);
}
/* facets: three tidy columns, every row a 40px hit area, the note in normal flow */
.live-controls .bzr-facets {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  align-items: start;
}
.bzr-facet {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.bzr-facet legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--s-1);
  padding: 0;
  color: var(--c-muted);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bzr-facet-list {
  display: flex;
  flex-direction: column;
  max-height: 12rem;
  overflow-y: auto;
}
label.bzr-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  margin: 0;
  font-size: var(--t-body);
  cursor: pointer;
}
/* the native input covers the whole row (a full-size touch target); the box is drawn beside it */
label.bzr-check,
label.intent {
  position: relative;
}
.bzr-check input,
.intent input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.bzr-check::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.bzr-check:has(input:checked)::before {
  border-color: var(--c-accent);
  background: var(--c-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}
.bzr-check:has(input:focus-visible),
.intent:has(input:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.intent::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-deep-line);
  border-radius: 50%;
}
.intent.selected::before {
  border: 5px solid var(--c-deep);
  background: #fff;
}
.bzr-facet-note,
.bzr-facet-none {
  display: block;
  margin: var(--s-2) 0 0;
  font-size: var(--t-label);
  line-height: 1.45;
  color: var(--c-muted);
}
.live-catalogue-status {
  margin: var(--s-4) 0 0;
  color: var(--c-muted);
}
@media (max-width: 760px) {
  .live-controls .bzr-facets {
    grid-template-columns: minmax(0, 1fr);
  }
  label.bzr-check {
    min-height: 44px;
  }
}

/* ---------- 11. Surfaces: one card style, no boxes inside boxes ---------- */
.live-controls .filters,
.filters {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.card,
.card.live-offering,
.panel {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: none;
}
.stall-card-canopy {
  display: none; /* replaced by the aisle rule below */
}
.card,
.card.live-offering {
  position: relative;
  transition: border-color 120ms ease;
}
.card:hover,
.card:focus-within,
.card.is-selected {
  border-color: var(--c-border-strong);
  box-shadow: inset 0 var(--aisle) 0 var(--c-accent);
}
/* ---------- 12. Home: intro, the orbit stage, quick entries, then one steady rhythm ---------- */
#bzr-home {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  padding-top: 0;
}
#bzr-home > * {
  grid-column: 1 / -1;
  margin-block: 0;
}
#bzr-home > * + * {
  margin-top: var(--s-7);
}
#bzr-home > .bzr-ask-panel {
  margin-top: var(--s-7);
}
#bzr-home > .bzr-voice-cta {
  margin-top: var(--s-5);
}
#bzr-home h2 {
  margin-bottom: var(--s-4);
  font-size: var(--t-h2);
}
/* ---------- 13. Headings, sections, empty states, forms ---------- */
main h1,
.page-head h1 {
  font-size: var(--t-h1);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.page-head h1 {
  font-size: var(--t-display);
}
main h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.01em;
}
main h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.005em;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
}
.bzr-page > section + section,
.bzr-page > div + section,
.bzr-page > section + div {
  margin-top: var(--s-7);
}
.bzr-page > section > h2 {
  margin-bottom: var(--s-4);
}
.bzr-lead,
.page-head p {
  max-width: 70ch;
}
.empty {
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: left;
}
.empty h1,
.empty h2 {
  margin-bottom: var(--s-2);
  font-size: var(--t-h1);
}
.empty p {
  max-width: 60ch;
  font-size: var(--t-body);
}
/* forms read at a comfortable measure, labels above fields */
#bzr-seller-create,
.bzr-seller-draft,
#bzr-request-form,
#profile-form,
.bzr-bp-edit {
  width: 100%;
  max-width: 720px;
}
#bzr-seller-create label,
.bzr-seller-draft label,
#bzr-request-form label,
#profile-form label {
  display: block;
  margin: var(--s-4) 0 var(--s-1);
  color: var(--c-text);
  font-size: var(--t-label);
  font-weight: 600;
}
.form-grid {
  gap: 0 var(--s-4);
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- 14. Gate fixes: no wrapping hidden text, no clipped facet lists on phones ---------- */
.bzr-page p {
  line-height: 1.7;
}
.bzr-stats + p a {
  display: inline-block;
}
html[data-theme='dark'] .board-invitation .studio-overline {
  color: var(--c-muted); /* the panel takes the dark tint token; keep the kicker readable on it */
}
@media (max-width: 760px) {
  .bzr-facet-list {
    max-height: none;
  }
}
.page-head .eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: var(--aisle);
  margin-bottom: var(--s-3);
  background: var(--c-accent);
}

.bzr-eyebrow {
  display: block;
  margin: 0 0 var(--s-2);
  line-height: 1.4;
}
.bzr-page h1 {
  margin-top: var(--s-2);
}

/* ---------- 15. Full-page review fixes ---------- */
/* form controls take the tokens, so they read the same in both themes */
input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']),
select,
textarea {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
}
.bzr-page textarea,
.bzr-page select,
.bzr-ask-form textarea {
  background: var(
    --c-surface
  ); /* wow2/buyer.css fill these with the canvas, which reads as disabled */
}
input::placeholder,
textarea::placeholder {
  color: var(--c-muted);
  opacity: 1;
}
/* hero: the headline wraps on phrases; the search is one row, stacked on phones */
/* Ask Buzzar panel: empty status rows must not add their own gaps */
.bzr-ask-panel {
  gap: var(--s-3);
}
#bzr-home > .bzr-ask-panel h2 {
  margin-bottom: 0;
}
.bzr-ask-form {
  gap: var(--s-2) var(--s-3);
}
.bzr-ask-form .bzr-status:empty {
  margin: 0;
  min-height: 0;
}
/* offering cards: actions pinned to the foot so a row of cards lines up */
.card.live-offering {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.card.live-offering p {
  margin: 0;
  line-height: 1.5;
}
.card.live-offering .bzr-toolbar {
  margin-top: auto;
  padding-top: var(--s-2);
}
.card.live-offering .bzr-more {
  align-self: flex-start;
}
/* catalogue: heading, tabs and filters sit on one steady rhythm; the active tab takes the aisle rule */
.live-catalogue > h2 {
  margin: var(--s-7) 0 var(--s-4);
}
.live-controls {
  margin-top: 0;
  padding-top: var(--s-4);
}
.tabs {
  margin: 0 0 var(--s-4);
  gap: var(--s-5);
}
.tabs a,
.tabs button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tabs .active {
  border-bottom: var(--aisle) solid var(--c-accent);
}
.filters,
html[data-theme='dark'] .filters {
  margin: 0;
  padding: 0 0 var(--s-4);
  border: 0;
  background: none;
}
/* the industries page is a page, not a panel: its journeys sit straight on the canvas */
.bzr-page.bzr-industries {
  padding: 0;
  border: 0;
  background: none;
}
/* empty states are solid cards, not dashed outlines */
.empty,
.bzr-journey-empty {
  border-style: solid;
  border-color: var(--c-border);
  background: var(--c-surface);
}
/* partner landing and other bzr-page lists: panels and headings keep the section rhythm */
.bzr-page > .bzr-actions {
  margin-bottom: var(--s-3);
}
.bzr-page > .bzr-panel,
.bzr-page > .bzr-split {
  margin-top: var(--s-5);
}
.bzr-page > h2 {
  margin: var(--s-7) 0 var(--s-4);
}
.bzr-page > .bzr-muted {
  margin-top: var(--s-4);
}
/* compare table: a narrow label column, the Remove button under each solution's name */
.bzr-compare-table thead th:first-child {
  width: 160px;
}
.bzr-compare-table thead th button {
  display: block;
  margin-top: var(--s-2);
}
@media (max-width: 640px) {
  .bzr-compare-table thead th:first-child,
  .bzr-compare-table tbody th {
    width: 104px;
  }
}
/* "Prefer to talk?" row and its button read as an enabled secondary control */
.bzr-advisor-talk {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.bzr-advisor-talk button {
  min-height: 40px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
}
/* ---------- 16. Handover home: "Where Expertise Meets Opportunity" ---------- */
#bzr-home > .bzr-orbit-host,
#bzr-home > .bzr-find {
  margin-top: var(--s-5);
}
#bzr-home > .bzr-find {
  display: grid;
  gap: var(--s-3);
}
.bzr-orbit-stage {
  display: grid;
  grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  gap: var(--s-6);
  align-items: center;
  min-height: min(620px, max(440px, calc(100dvh - 320px)));
}
@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orbit-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}
/* quick entries: Ask Buzzar, Sami, guided discovery, My journey, Industries */
@media (max-width: 900px) {
  .bzr-orbit-stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
}

/* ---------- 17. Guided discovery (#discover) ---------- */
.bzr-discover-hero {
  max-width: 62ch;
}

/* ---------- 18. Handover Ask canvas and the shared transition vocabulary ---------- */
main h1 em,
.bzr-page h1 em {
  font-style: normal;
  color: var(--c-accent-text);
}
.bzr-eyebrow,
.page-head .eyebrow,
.studio-overline {
  color: var(--c-muted);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* ordinary route entry: 280 ms opacity and an 8 px rise (handover/03) */
@keyframes route-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* shell.js sets .is-entering on #main for 400 ms after a route change, so later re-renders do not flash */
#main.is-entering > * {
  animation: route-enter 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* buttons: one vocabulary on every page (hover lifts 2 px over 200 ms, handover/03) */
.primary,
.secondary {
  border-radius: var(--r-md);
  font-weight: 600;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}
.primary:hover {
  background: var(--c-accent-hover);
  color: var(--c-accent-ink);
  transform: translateY(-2px);
}
.secondary {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.secondary:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
  transform: translateY(-2px);
}
.primary:disabled,
.secondary:disabled {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .primary:hover,
  .secondary:hover {
    transform: none;
  }
}
/* Ask: a question on a composer panel, then a context column beside the recommendations */
.bzr-advisor-hero {
  max-width: none;
  margin-bottom: var(--s-4);
}
.bzr-advisor-hero h1 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 500;
}
.bzr-advisor-form {
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-color: var(--c-border-strong);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.bzr-advisor-form label {
  color: var(--c-muted);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bzr-advisor-form textarea:focus-visible {
  border-color: var(--c-accent);
}
.bzr-advisor-examples h2 {
  color: var(--c-muted);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bzr-chip {
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border-color: var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
}
.bzr-chip:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}
@media (min-width: 1000px) {
  .bzr-advisor-results {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    align-items: start;
    column-gap: var(--s-6);
  }
  .bzr-advisor-results > * {
    grid-column: 1;
  }
  .bzr-advisor-results > .bzr-advisor-picks {
    grid-column: 2;
    grid-row: 1 / span 8;
  }
}
@keyframes ask-reveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.bzr-advisor-results > * {
  animation: ask-reveal 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bzr-advisor-pick {
  border-color: var(--c-border);
  background: var(--c-surface);
}
.bzr-advisor-pick[data-fit='strong'] {
  border-left-color: var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
  #main.is-entering > *,
  .bzr-advisor-results > * {
    animation: none;
  }
}

/* forms: the submit button never touches the last field */
#bzr-seller-create button.primary,
#bzr-request-form button.primary,
#profile-form button.primary,
.bzr-advisor-form button.primary {
  margin-top: var(--s-5);
}

/* ---------- 19. Fix round 1: handover visual parity ---------- */
/* Anchors styled as buttons: buyer.css colours every .bzr-page link with the accent, which hid the label of a filled
   accent link (accent on accent). These selectors are one step more specific than that rule. */

/* header: logo left, one quiet bar, the secondary row reads as secondary */
/* phone header: menu, logo, search, profile and sign in fit 360px. Ask Buzzar, Talk to Sami and the theme switch
   stay one tap away in the menu drawer (Browse and Tools). */

/* home: the one-screen canvas */
html[data-live-route='home'] #app > main {
  padding-top: var(--s-3);
}
#bzr-home > .bzr-orbit-host {
  margin-top: 0;
}
.bzr-orbit-stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 0;
}
/* the three stops sit on the ring: top, lower right, lower left (angles 0, 120, 240 of orbit-core.js) */
#bzr-home > .bzr-find {
  margin-top: var(--s-2);
}
@media (max-width: 900px) {
  .bzr-orbit-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ask canvas look, shared by Ask Buzzar and guided discovery: a calm heading, a bordered composer with an accent
   field, pill starting points, underlined step tabs */
.bzr-advisor-form {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.bzr-advisor-form textarea {
  border: 2px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-canvas);
  color: var(--c-text);
  font-size: 1.15625rem;
}
.bzr-advisor-form button.primary {
  min-height: 44px;
  border-radius: 22px;
}
.bzr-chip {
  border-radius: 22px;
}
.bzr-discover-hero h1 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 500;
}
@media (max-width: 600px) {
  .bzr-advisor-form {
    padding: var(--s-4);
  }
}