/* Marketplace page only (owner-approved proposal, 2026-10-22): the YLO widget in the hero, the search hub with its group
   pills and live count, the "Start here" cards, the one catalogue grid, the status key and the trimmed FAQ. Every
   font-size is a --t-* token (IMPLEMENTATION-RULES.md). No blue anywhere (owner, 2026-10-22: "Wherever you use the
   blue, I want our brand gold color"): the accents are the brand golds (--gold, --gold-deep, --gold-light; --gold-ink
   for gold on white), ink and Midnight; the pills are the site's one pill (site.css), pressed in ink with a tick. The
   only motion is the YLO mic's halo (a slow pulse twice on load, a faster one while listening; none under reduced
   motion); everything else changes colour within 200 ms. */

/* ---------- YLO (the hero's voice widget; owner 2026-10-22 12:55, reference
   assets/figma-final/reference/ylo-voice-widget.png) ----------
   It sits in the hero's actions slot (.ih__actions keeps the shared spacing and entrance): a white pill switch centred
   over a wide white bar with a soft shadow: the mode icon, a thin divider, the field, and the round gold button with its
   halo. Talk mode shows the waveform and the mic; Search mode the magnifier twice (js/marketplace.js sets data-mode). */
.ylo { --ylo-w: 600px; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, var(--ylo-w)); }
.ylo__modes {
  display: inline-flex; gap: 4px; padding: 5px; background: #fff; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11, 15, 20, 0.08), 0 1px 2px rgba(11, 15, 20, 0.06);   /* a soft Midnight shadow, as the reference */
}
.ylo__mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: var(--t-small); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ylo__mode:hover { background: var(--panel); }
.ylo__mode[aria-pressed="true"] { background: var(--dark); color: #fff; }   /* the reference's black pill: Midnight */
.ylo__svg { display: block; flex: none; width: 18px; height: 18px; }
.ylo__bar {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px;
  padding: 12px 12px 12px 24px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 14px 36px rgba(11, 15, 20, 0.08), 0 2px 6px rgba(11, 15, 20, 0.05);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* the field's focus: a 2px gold-ink ring round the whole bar (the input itself has no outline), as on the search
   below; when the round button has focus (a click on the mic, or Tab) the bar keeps its plain edge and the button draws its own ring */
.ylo__bar:focus-within { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-ink), 0 14px 36px rgba(11, 15, 20, 0.08); }
.ylo__bar:has(.ylo__go:focus) { border-color: var(--line); box-shadow: 0 14px 36px rgba(11, 15, 20, 0.08), 0 2px 6px rgba(11, 15, 20, 0.05); }
.ylo__lead { display: flex; align-items: center; flex: none; padding-right: 16px; border-right: 1px solid var(--line-2); color: var(--ink); }
.ylo__lead .ylo__svg { width: 24px; height: 24px; }
.ylo__bar input {
  flex: 1; min-width: 0; min-height: 48px; border: 0; outline: 0; background: transparent; text-overflow: ellipsis;
  font: inherit; font-size: var(--t-body); color: var(--ink);
}
.ylo__bar input::placeholder { color: var(--ink-num); opacity: 1; }   /* --ink-num: 5.4:1 on white */
.ylo__bar input::-webkit-search-cancel-button { cursor: pointer; }
/* the round gold button: the brand's Gold to Gold Deep, a Midnight icon; the halo is a soft gold glow behind it (::before)
   and the disc is ::after, so both sit under the icon and over the bar */
.ylo__go {
  position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  border: 0; border-radius: 50%; background: transparent; color: var(--dark); cursor: pointer;
}
.ylo__go::before, .ylo__go::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
/* the halo, as the reference: round the disc a thin white gap, then a pale gold ripple and a paler, wider one, each with
   a faint edge (radii from the centre; the disc is 28px); translucent brand gold, so the bar and the page show through */
.ylo__go {
  --ylo-ripple-1: color-mix(in srgb, var(--gold) 20%, transparent);
  --ylo-ripple-2: color-mix(in srgb, var(--gold) 9%, transparent);
  --ylo-ripple-edge: color-mix(in srgb, var(--gold) 34%, transparent);
}
.ylo__go::before {
  inset: -36px;
  background: radial-gradient(circle closest-side, transparent 31px, var(--ylo-ripple-1) 32px, var(--ylo-ripple-1) 44px,
    var(--ylo-ripple-edge) 45px, var(--ylo-ripple-2) 46.5px, var(--ylo-ripple-2) 62.5px, var(--ylo-ripple-edge) 63.5px, transparent 64px);
}
.ylo__go::after { inset: 0; background: linear-gradient(150deg, var(--gold) 15%, var(--gold-deep) 90%); box-shadow: 0 6px 16px rgba(232, 168, 56, 0.45); transition: filter 0.2s var(--ease); }   /* the shadow is --gold-deep at 45% */
.ylo__go:hover::after { filter: brightness(0.96); }
.ylo__go .ylo__svg { width: 22px; height: 22px; }
.ylo[data-mode="talk"] .ylo__swap--search, .ylo[data-mode="search"] .ylo__swap--talk { display: none; }
/* listening (js/marketplace.js adds .is-listening): a fuller halo, so the state also shows without motion */
.ylo.is-listening .ylo__go {
  --ylo-ripple-1: color-mix(in srgb, var(--gold) 40%, transparent);
  --ylo-ripple-2: color-mix(in srgb, var(--gold) 20%, transparent);
  --ylo-ripple-edge: color-mix(in srgb, var(--gold-deep) 60%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .ylo__go::before { animation: ylo-halo 2.4s var(--ease) 2; }   /* twice on load, then still (under WCAG 2.2.2's 5 s) */
  .ylo.is-listening .ylo__go::before { animation: ylo-halo 0.9s ease-in-out infinite; }
}
@keyframes ylo-halo { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.12); } }
/* Windows high contrast drops the gold fill: the button keeps an edge */
@media (forced-colors: active) { .ylo__go { border: 1px solid ButtonText; } }


/* [02] Catalog (owner's reference, 2026-10-22 ~14:45, catalog-section-reference.png): the head left (tag, h2), the lead
   with the one search field to its right (under it on phones), the pill row with counts and the live count on the right
   over a hairline, then white cards three across from 1024px (two at 768-1023, one below). */
.mkt-cat__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 426px); column-gap: clamp(24px, 6vw, 120px); align-items: end; }
.mkt-cat__head > .tag, .mkt-cat__head > h2 { grid-column: 1 / -1; }
.mkt-cat__head > h2 { margin-top: 12px; }
.mkt-cat__lead { margin-top: 14px; max-width: 46em; color: var(--ink-2); }
.mkt-find {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px; background: #fff;
  border: 1px solid var(--line-3); border-radius: 999px;   /* --line-3: the field's edge at 3:1 */
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mkt-find:focus-within { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-ink); }
.mkt-find__icon { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.mkt-find input { flex: 1; min-width: 0; min-height: 48px; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--t-body); color: var(--ink); }
.mkt-find input::placeholder { color: var(--ink-num); opacity: 1; }
.mkt-filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line);
}
.mkt-chips { --pill-x: 22px; }
.mkt-chips .pill { min-height: 48px; font-size: var(--t-body); font-weight: 500; }
.mkt-n { color: var(--ink-num); font-variant-numeric: tabular-nums; }
.mkt-chips .pill[aria-pressed="true"] .mkt-n { color: var(--gold); }   /* the reference's gold count on the pressed pill: 11.8:1 on ink */
.mkt-count { color: var(--ink-num); font-variant-numeric: tabular-nums; }
/* the catalogue's one carousel row (owner, 2026-10-24; the mechanics are site.css .carousel and js/carousel.js): three
   cards and a sliver of the fourth on a desktop, two on a tablet, one and a peek on a phone */
.mkt-carousel { --carousel-card: calc((100% - 2 * var(--carousel-gap)) / 3.15); margin-top: clamp(24px, 3vw, 40px); }
/* a card: white, a 1px line, the large radius; the monogram and status on top, group, name, description, a hairline,
   the one link at the foot */
.mkt-grid > .mcard {
  --mkt-green: #28c08a;      /* the brand success colour (--mark-sealed's fill) */
  --mkt-green-ink: #17694b;  /* success as text on its tint */
  display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 30px); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.mkt-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
/* the monogram: a Midnight tile, the initials in gold Space Grotesk 700, a small gold square in its top-right corner
   (the logo's pixel trail) */
.mkt-mono {
  position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
  background: var(--dark); color: var(--gold); font-family: "Space Grotesk", "Inter", system-ui, sans-serif; font-weight: 700;
  font-size: var(--t-h5); letter-spacing: 0.01em;
}
.mkt-mono::after { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--gold); }
/* a product with the owner's emblem (2026-10-24): the emblem fills the tile, no corner square */
.mkt-mono--logo img { width: 78%; height: 78%; object-fit: contain; }
.mkt-mono--logo::after { content: none; }
/* the status pill: a soft tint, no edge, sentence case (the reference); Sealed green with the shared tick, Start here gold */
.mkt-grid > .mcard .chip { border: 0; padding: 6px 12px; font-size: var(--t-small); font-weight: 500; letter-spacing: 0; text-transform: none; background: var(--panel); color: var(--ink); }
.mkt-grid > .mcard .chip--sealed, .mkt-grid > .mcard .chip--complete, .mkt-grid > .mcard .chip--proof { background: color-mix(in srgb, var(--mkt-green) 14%, #fff); color: var(--mkt-green-ink); }
.mkt-grid > .mcard .chip--sealed::before, .mkt-grid > .mcard .chip--complete::before, .mkt-grid > .mcard .chip--proof::before {
  width: 12px; height: 12px; margin: 0; background: currentColor;
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
.mkt-grid > .mcard .chip--start { background: color-mix(in srgb, var(--gold) 24%, #fff); color: var(--gold-ink); }
.mkt-grid > .mcard .chip--start::before { content: none; }
.mkt-card__group { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-num); }
.mkt-card__name { margin-top: 8px; font-size: var(--t-h4); line-height: 1.2; }
/* the owner's category line under the name (2026-10-23): gold that reads on white (--gold-ink, 5.3:1); it ends the
   card's text when no description follows */
.mkt-card__cat { margin: 6px 0 22px; font-size: var(--t-small); font-weight: 600; line-height: 1.4; color: var(--gold-ink); }
.mkt-card__cat:has(+ .mkt-card__desc) { margin-bottom: 0; }
.mkt-card__desc { margin: 10px 0 22px; color: var(--ink-2); }
.mkt-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.mkt-card__foot .link, .mkt-faq__head .link { min-height: 44px; }
.mkt-empty { text-align: center; padding-block: 32px; }

/* [04] Straight answers (layout reference: title left, key and accordion right). */
.mkt-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.mkt-faq__head { grid-column: 1 / 6; }
.mkt-faq__head > * + * { margin-top: 20px; }
.mkt-faq__head .link { color: var(--on-dark); }
.mkt-faq__cats { grid-column: 7 / 13; }
/* the status key: chip left, its definition right; the accordion's own top rule closes it */
.mkt-key { margin-bottom: clamp(28px, 3vw, 40px); }
.mkt-key > .tag { margin-bottom: 18px; }
.mkt-key__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.mkt-key__row { display: contents; }
.mkt-key__list dt { padding-top: 2px; }
.mkt-key__list dd { margin: 0; color: var(--on-dark-2); line-height: 1.5; max-width: 65ch; }

/* a narrower desktop: the widget ends before the picture's feather (the lead narrows to 24em here too) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ylo { --ylo-w: 480px; }
}
@media (max-width: 1023px) {
  .mkt-faq__head, .mkt-faq__cats { grid-column: 1 / -1; }
  .mkt-carousel { --carousel-card: calc((100% - var(--carousel-gap)) / 2.1); }
}
@media (max-width: 767px) {
  .mkt-carousel { --carousel-card: 84%; }
  /* phones: the switch and the bar go full width, the two segments share it */
  .ylo { width: 100%; align-items: stretch; }
  .ylo__mode { flex: 1 1 0; padding: 0 12px; }
  .ylo__bar { min-height: 68px; gap: 10px; padding: 9px 9px 9px 18px; }
  .ylo__lead { padding-right: 12px; }
  .ylo__lead .ylo__svg { width: 20px; height: 20px; }
  .ylo__go { width: 48px; height: 48px; }
  .ylo__go::before {   /* the same two ripples, smaller, so the halo stays inside the phone's gutter (the disc is 24px) */
    inset: -22px;
    background: radial-gradient(circle closest-side, transparent 26.5px, var(--ylo-ripple-1) 27.5px, var(--ylo-ripple-1) 35px,
      var(--ylo-ripple-edge) 36px, var(--ylo-ripple-2) 37.5px, var(--ylo-ripple-2) 45px, var(--ylo-ripple-edge) 45.5px, transparent 46px);
  }
  /* phones: the search field goes under the lead; the live count under the pills */
  .mkt-cat__head { grid-template-columns: 1fr; }
  .mkt-find { margin-top: 20px; }
  /* the key stacks: chip above its definition */
  .mkt-key__list { grid-template-columns: 1fr; gap: 8px; }
  .mkt-key__row + .mkt-key__row > dt { margin-top: 14px; }
}
/* the smallest phones: the YLO switch's two segments share 288px */
  .ylo__mode { gap: 6px; padding: 0 8px; }
}