/* ============================================================
   MagpieToolbox - Editorial system (theme.css)
   Art direction: "Swiss precision / technical magazine."
   Strict grid, hairline rules, grotesk headlines, mono labels,
   flat surfaces, one iridescent sheen used sparingly.

   Built ENTIRELY on the design-system tokens (colors / type /
   spacing / motion). This file only adds a thin semantic bridge
   + the editorial component layer. No raw hex / font values.
   ============================================================ */

/* ---------- Semantic bridge (the reskin surface) ----------
   Reskin a sibling product by repointing the DS accent engine
   (--accent-1/2/3 + --on-accent) and the --sheen stops below.
   Components reference only these semantic tokens. */
:root{
  --text:            var(--text-strong);      /* ink fill (primary button bg) */
  --accent:          var(--accent-1);          /* brand accent (swappable)     */
  --accent-contrast: var(--on-accent);

  /* the single memorable accent: magpie iridescence */
  --sheen: linear-gradient(96deg,
            var(--blue-500) 0%,
            var(--teal-400) 34%,
            var(--violet-500) 68%,
            var(--green-500) 100%);
  --sheen-soft: linear-gradient(120deg,
            color-mix(in srgb, var(--blue-500) 13%, transparent) 0%,
            color-mix(in srgb, var(--teal-400) 11%, transparent) 50%,
            color-mix(in srgb, var(--violet-500) 13%, transparent) 100%);

  /* status */
  --status-soon:       var(--text-subtle);
  --status-soon-soft:  var(--surface-sunken);
  --status-live:       var(--success);
  --status-live-soft:  var(--success-soft);

  /* editorial geometry: minimal rounding, hairline rules */
  --r-frame: 3px;     /* cards, panels      */
  --r-ctrl:  6px;     /* buttons, chips     */
  --r-icon:  7px;     /* icon tiles         */
  --hair:    1px solid var(--border-default);
  --hair-strong: 1px solid var(--border-strong);

  /* Utility category (sharing / handoff tools) - DS green, distinct from the 4 core accents */
  --cat-utility:      var(--green-500, #15a06b);
  --cat-utility-soft: color-mix(in srgb, var(--green-500, #15a06b) 13%, var(--surface));

  --maxw: 1180px;
}

/* ---------- Reset / page ---------- */
html{ scroll-behavior:smooth; }
body{ background:var(--canvas); color:var(--text-body); }
img{ display:block; max-width:100%; }
:where(a){ color:inherit; }
::selection{ background:color-mix(in srgb, var(--teal-400) 26%, transparent); color:var(--text-strong); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* skip link (a11y) */
.skip{
  position:absolute; left:var(--space-4); top:var(--space-2); z-index:200;
  transform:translateY(-160%);
  background:var(--text); color:var(--surface);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.06em; padding:10px 16px; border-radius:var(--r-ctrl);
  transition:transform var(--dur-base) var(--ease-out);
}
.skip:focus{ transform:translateY(0); color:var(--surface); }

/* ---------- Section label (mono eyebrow + hairline rule) ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-subtle);
}
.sec-label{ display:flex; align-items:center; gap:var(--space-4); }
.sec-label .eyebrow{ flex:0 0 auto; white-space:nowrap; }
.sec-label::after{ content:""; flex:1 1 auto; height:1px; background:var(--border-default); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:46px; padding:0 var(--space-5);
  font-family:var(--font-body); font-size:var(--text-md); font-weight:600;
  letter-spacing:-0.005em; line-height:1; text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-ctrl); background:none; color:var(--text-strong);
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; flex:0 0 auto; transition:transform var(--dur-fast) var(--ease-out); }
.btn:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.btn--primary{ background:var(--text); color:var(--surface); border-color:var(--text); }
.btn--primary:hover{ background:color-mix(in srgb, var(--text) 86%, var(--canvas)); border-color:color-mix(in srgb, var(--text) 86%, var(--canvas)); }
.btn--primary:hover svg{ transform:translateX(4px); }            /* gap-nudge */
.btn--primary:active{ transform:scale(.985); }

.btn--secondary{ background:transparent; color:var(--text-strong); border-color:var(--border-strong); }
.btn--secondary:hover{ border-color:var(--text-strong); background:var(--surface-soft); }
.btn--secondary:hover svg{ transform:translateX(3px); }
.btn--secondary:active{ transform:scale(.985); }

.btn--ghost{ background:transparent; color:var(--text-muted); padding-inline:var(--space-3); }
.btn--ghost:hover{ color:var(--text-strong); background:var(--surface-sunken); }

.btn--sm{ min-height:38px; padding:0 var(--space-4); font-size:var(--text-sm); }

/* buttons on the permanently-dark surfaces */
.btn--light{ background:var(--ink-50); color:var(--ink-900); border-color:var(--ink-50); }
.btn--light:hover{ background:var(--ink-100); border-color:var(--ink-100); }
.btn--light:hover svg{ transform:translateX(4px); }
.btn--ondark{ background:transparent; color:var(--text-on-dark); border-color:var(--border-inverse); }
.btn--ondark:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--hair);
}
.site-header__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); height:68px; }
.brand{ display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none; }
.brand img{ width:26px; height:26px; }
.brand__wm{ font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); letter-spacing:-0.02em; color:var(--text-strong); }
.brand__wm b{ font-weight:500; }
.brand:hover .brand__wm{ color:var(--text-strong); }

.nav{ display:flex; align-items:center; gap:var(--space-1); }
.nav a{
  font-size:var(--text-sm); font-weight:600; color:var(--text-muted);
  padding:8px 12px; border-radius:var(--r-ctrl); text-decoration:none;
  transition:var(--transition-colors);
}
.nav a:hover{ color:var(--text-strong); background:var(--surface-sunken); }
.nav a[aria-current="page"]{ color:var(--text-strong); }
.nav__sep{ width:1px; height:20px; background:var(--border-default); margin-inline:var(--space-2); }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-left:var(--space-1);
  border:var(--hair); border-radius:var(--r-ctrl);
  background:var(--surface); color:var(--text-muted); cursor:pointer;
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover{ color:var(--text-strong); border-color:var(--border-strong); }
.theme-toggle:active{ transform:translateY(1px); }
.theme-toggle:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ic-sun{ display:none; }
[data-theme="dark"] .theme-toggle .ic-sun{ display:block; }
[data-theme="dark"] .theme-toggle .ic-moon{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(2.75rem,6vw,4.75rem) clamp(2rem,4vw,3rem); overflow:hidden; }
.hero__sheen{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.9;
  background:var(--sheen-soft); -webkit-mask-image:radial-gradient(60% 70% at 78% 8%, #000, transparent 70%); mask-image:radial-gradient(60% 70% at 78% 8%, #000, transparent 70%); }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,0.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.hero__lead .eyebrow{ display:block; margin-bottom:var(--space-5); }
.hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem); line-height:1.02;
  letter-spacing:-0.035em; color:var(--text-strong);
  margin:0 0 var(--space-5); max-width:14ch; text-wrap:balance;
}
.sheen-word{ background:var(--sheen); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em; }
.hero__sub{ font-size:var(--text-lg); line-height:1.55; color:var(--text-muted); max-width:46ch; margin:0 0 var(--space-8); }

/* ---------- Hero search (prominent; 3 switchable styles) ---------- */
.hero__search{ max-width:600px; }
.hero__search-label{ display:block; margin-bottom:var(--space-3); }
.hero__search-hint{ margin:var(--space-3) 0 0; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.03em; color:var(--text-subtle); }

@property --bar-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes barComet{ to{ --bar-ang:360deg; } }
@keyframes barFlow{ to{ background-position:-240% 0; } }
.search{ position:relative; display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border:1.5px solid transparent; border-radius:var(--r-ctrl); box-shadow:var(--shadow-xs);
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--sheen) border-box;
  transition:box-shadow var(--dur-base) var(--ease-out); }
.search > *{ position:relative; z-index:1; }
/* static iridescent gradient border (signature colors); soft signature glow on focus, no inner outline */
.search:focus-within{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--brand) 50%, transparent); }
.search :focus-visible{ outline:none !important; box-shadow:none !important; }
.search__ic{ color:var(--text-subtle); display:inline-flex; flex:0 0 auto; }
.search__ic svg{ width:20px; height:20px; }
.search input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:var(--text-base); color:var(--text-strong); padding:8px 0; }
.search input::placeholder{ color:var(--text-subtle); }
.search input:focus-visible{ outline:none; box-shadow:none; border-radius:0; }
.search:focus-within .search__ic{ color:var(--text-strong); }
.search__btn{ flex:0 0 auto; min-height:40px; }

/* style: underline (minimal) */
[data-search-style="underline"] .hero__search-label,
[data-search-style="underline"] .hero__search-hint,
[data-search-style="underline"] .search__btn{ display:none; }
[data-search-style="underline"] .search{ background:transparent; border:none; border-bottom:1.5px solid var(--border-strong);
  border-radius:0; box-shadow:none; padding:0 0 var(--space-3); max-width:460px; }
[data-search-style="underline"] .search::after{ left:0; right:auto; width:0; transform:none; transition:width var(--dur-slow) var(--ease-out); }
[data-search-style="underline"] .search:focus-within{ box-shadow:none; border-color:var(--border-strong); }
[data-search-style="underline"] .search:focus-within::after{ width:100%; }

/* style: spotlight (big, iridescent border) */
[data-search-style="spotlight"] .hero__search{ max-width:680px; }
[data-search-style="spotlight"] .search{ padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--sheen) border-box; border:1.6px solid transparent; box-shadow:var(--shadow-sm); }
[data-search-style="spotlight"] .search::after{ display:none; }
[data-search-style="spotlight"] .search input{ font-size:var(--text-lg); padding:10px 0; }
[data-search-style="spotlight"] .search__ic svg{ width:22px; height:22px; }
[data-search-style="spotlight"] .search:focus-within{ box-shadow:0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); }
/* the comet ring only belongs to the default boxed style */
[data-search-style="underline"] .search::before, [data-search-style="spotlight"] .search::before{ display:none; }

/* ====================================================================
   Search-bar morph (Tweak: data-bar-morph). While the search has a query
   (data-searching), the boxed bar transforms into a clean, full-width
   underline field: the box border / shadow / radius fall away to a single
   bottom line, the magnifier fades and the text slides left into its old
   spot, and the "Search" button collapses to an arrow. shell.js animates
   the bar WIDTH (reliable px tween); everything else animates here.
   Flavors: underline (calm) | sweep (kinetic) | expand (springy).
   ==================================================================== */
.search__ic{ transition:opacity var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); overflow:hidden; }
.search__btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out), min-height var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out); }
.search__btn-label{ display:inline-block; max-width:12ch; overflow:hidden; white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease-out), max-width var(--dur-base) var(--ease-out); }
.search__btn-arrow{ display:inline-flex; align-items:center; justify-content:center; width:0; opacity:0; overflow:hidden;
  transition:opacity var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.search__btn-arrow svg{ width:20px; height:20px; flex:0 0 auto; }
/* custom clear button - native search X hidden, restyled to match the DS */
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.search__clear{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:0; height:34px; padding:0; overflow:hidden; opacity:0; border:none; border-radius:var(--radius-pill);
  background:transparent; color:var(--text-subtle); cursor:pointer;
  transition:opacity var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.search__clear svg{ width:17px; height:17px; }
.search__clear:hover{ background:var(--surface-sunken); color:var(--text-strong); }
[data-searching] .search__clear{ opacity:1; width:34px; }
/* the JS width tween */
.search.is-morphing{ transition:width .46s cubic-bezier(.4,0,.2,1) .06s, border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), border-radius .3s var(--ease-out), background-color .3s var(--ease-out), gap .32s var(--ease-out); }
[data-bar-morph="expand"] .search.is-morphing{ transition-timing-function:var(--ease-spring); }

/* --- shared morphed state (any bar-morph value): comet -> flow underline --- */
[data-searching][data-bar-morph] .search{
  background-color:transparent; border-color:transparent;
  border-radius:0; box-shadow:none; }
[data-searching][data-bar-morph] .search:focus-within{ box-shadow:none; border-color:transparent; }
[data-searching][data-bar-morph] .search::before{ opacity:0; }
[data-searching][data-bar-morph] .search::after{ transform:none; opacity:1; background-size:240% 100%; animation:barFlow 3.4s linear infinite; }
[data-searching][data-bar-morph] .search__ic{ opacity:0; width:0; margin-right:calc(-1 * var(--space-3)); }
[data-searching][data-bar-morph] .search__btn-label{ opacity:0; max-width:0; }
[data-searching][data-bar-morph] .search__btn-arrow{ opacity:1; width:20px; }
/* the "Search" button collapses to a clean filled circle (DS primary) -
   no heavy rounded box, no stray outlined oval */
[data-searching][data-bar-morph] .search__btn{ padding:0; width:44px; min-width:44px; min-height:44px; border-radius:var(--radius-pill); }

/* ====================================================================
   Integrated search (bar stays put): submit is always a clean arrow
   circle, and the hero rail shows a live top match while searching.
   ==================================================================== */
.search__btn-label{ display:none; }
.search__btn-arrow{ opacity:1; width:20px; }
.search__btn{ padding:0; width:44px; min-width:44px; min-height:44px; border-radius:var(--radius-pill); }

.hero__rail{ position:relative; }
.tcarousel, .colophon{ transition:opacity var(--dur-base) var(--ease-out); }
[data-searching] .tcarousel, [data-searching] .colophon{ opacity:0; pointer-events:none; }
.hero__peek{ position:absolute; inset:0; opacity:0; pointer-events:none; }
[data-searching] .hero__peek{ opacity:1; pointer-events:auto; }
.hero__peek__eyebrow{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:var(--space-4); }
.hero__peek__eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--sheen); flex:0 0 auto; }
.hero__peek--empty .hero__peek__eyebrow::before{ background:var(--text-subtle); }
.hero__peek a, .hero__peek__static{ display:block; text-decoration:none; color:inherit; }
.hero__peek__name{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; letter-spacing:-0.025em; color:var(--text-strong); margin:0 0 var(--space-3); text-wrap:balance; }
.hero__peek__desc{ font-size:var(--text-md); line-height:1.55; color:var(--text-muted); margin:0 0 var(--space-4); max-width:36ch; }
.hero__peek__cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; color:var(--text-brand, var(--brand)); }
.hero__peek__cta svg{ width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-out); }
.hero__peek a:hover .hero__peek__cta svg{ transform:translateX(4px); }
.hero__peek a:hover .hero__peek__name{ color:var(--brand); }
.hero__peek.animate .hero__peek__eyebrow{ animation:peekIn .42s var(--ease-out) both; }
.hero__peek.animate .hero__peek__cta{ animation:peekIn .42s var(--ease-out) .3s both; }
@keyframes peekIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* per-word reveal of the match name + description (motion-primitives TextEffect style).
   shell.js wraps each word in .hpw with a --i index; preset chosen via data-peek-fx. */
.hero__peek .hpw{ display:inline-block; }
.hero__peek.animate .hero__peek__name .hpw,
.hero__peek.animate .hero__peek__desc .hpw{ animation-duration:.5s; animation-timing-function:var(--ease-out); animation-fill-mode:both; animation-name:hpBlur; }
.hero__peek.animate .hero__peek__name .hpw{ animation-delay:calc(.04s + var(--i) * .05s); }
.hero__peek.animate .hero__peek__desc .hpw{ animation-delay:calc(.18s + var(--i) * .022s); }
[data-peek-fx="slide"] .hero__peek.animate .hpw{ animation-name:hpSlide; }
[data-peek-fx="fade"] .hero__peek.animate .hpw{ animation-name:hpFade; }
@keyframes hpBlur{ from{ opacity:0; transform:translateY(.5em); filter:blur(5px); } to{ opacity:1; transform:none; filter:blur(0); } }
@keyframes hpSlide{ from{ opacity:0; transform:translateY(.7em); } to{ opacity:1; transform:none; } }
@keyframes hpFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__peek.animate *{ animation-duration:1ms !important; } }

/* --- variation: sweep (icon slides out left, arrow slides in from right) --- */
[data-bar-morph="sweep"] .search__btn-arrow{ transform:translateX(9px); }
[data-bar-morph="sweep"][data-searching] .search__btn-arrow{ transform:translateX(0); }
[data-bar-morph="sweep"][data-searching] .search__ic{ transform:translateX(-12px); }

/* --- variation: expand (icon + arrow scale, spring width) --- */
[data-bar-morph="expand"] .search__btn-arrow{ transform:scale(0.55); }
[data-bar-morph="expand"][data-searching] .search__btn-arrow{ transform:scale(1); }
[data-bar-morph="expand"][data-searching] .search__ic{ transform:scale(0.55); }

@media (prefers-reduced-motion: reduce){
  .search, .search.is-morphing, .search__ic, .search__btn, .search__btn-label, .search__btn-arrow{ transition-duration:1ms !important; }
  .search::before, [data-searching][data-bar-morph] .search::after{ animation:none !important; }
}

/* hero colophon rail (honest masthead) */
.colophon{ border:var(--hair); border-radius:var(--r-frame); padding:var(--space-5) var(--space-6); background:color-mix(in srgb, var(--surface) 55%, transparent); }
.colophon__mark{ display:flex; align-items:center; gap:var(--space-3); padding-bottom:var(--space-4); border-bottom:var(--hair); margin-bottom:var(--space-2); }
.colophon__mark img{ width:30px; height:30px; }
.colophon__mark span{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--text-subtle); }
.colo-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:var(--hair); }
.colo-row:last-of-type{ border-bottom:none; }
.colo-row dt{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.04em; color:var(--text-muted); white-space:nowrap; }
.colo-row dd{ margin:0; font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500; color:var(--text-strong); font-variant-numeric:tabular-nums; white-space:nowrap; }
.colo-row dd .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--status-live); margin-right:7px; box-shadow:0 0 0 3px var(--status-live-soft); vertical-align:middle; }
.colophon__note{ margin-top:var(--space-3); padding-top:var(--space-3); border-top:var(--hair); font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.04em; color:var(--text-subtle); }

/* ---------- Section scaffolding ---------- */
.section{ padding-block:clamp(2.25rem,4vw,3.25rem); }
.section--tools{ border-top:var(--hair); }
.tools__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; margin-bottom:var(--space-6); }
.tools__head h2{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; letter-spacing:-0.025em; color:var(--text-strong); margin:var(--space-3) 0 0; }
.tools__head p{ font-size:var(--text-md); color:var(--text-muted); margin:0; max-width:36ch; }

/* ---------- Category chips (single-select, NOT pills) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); }
.chip{
  display:inline-flex; align-items:center; gap:var(--space-2); min-height:40px; padding:0 var(--space-4);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; color:var(--text-muted);
  background:transparent; border:var(--hair-strong); border-radius:var(--r-ctrl); cursor:pointer;
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}
.chip:hover{ color:var(--text-strong); border-color:var(--text-strong); background:var(--surface-soft); }
.chip:active{ transform:scale(.98); }
.chip:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.chip[aria-pressed="true"]{ background:var(--text); color:var(--surface); border-color:var(--text); }
.chip__n{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); }
.chip[aria-pressed="true"] .chip__n{ color:color-mix(in srgb, var(--surface) 70%, transparent); }

/* ---------- Tool grid (strict ruled grid) ---------- */
.tool-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--hair); border-left:var(--hair); }
.tool-card{
  position:relative; display:flex; flex-direction:column; min-height:228px;
  padding:var(--space-6); background:transparent; color:inherit; text-decoration:none;
  border-right:var(--hair); border-bottom:var(--hair);
  transition:background var(--dur-base) var(--ease-out);
}
.tool-card::before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
  background:var(--sheen); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out); }
.tool-card:focus-visible{ outline:none; box-shadow:var(--ring-focus); z-index:2; }

.tc-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.tc-no{ font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.06em; color:var(--text-subtle); }
.tc-icon{ width:46px; height:46px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--space-4);
  border:var(--hair); border-radius:var(--r-icon); background:var(--surface-soft); color:var(--text-subtle); }
.tc-icon--money{ color:var(--cat-money); border-color:color-mix(in srgb, var(--cat-money) 26%, var(--border-default)); background:var(--cat-money-soft); }
.tc-icon--time{ color:var(--cat-time); border-color:color-mix(in srgb, var(--cat-time) 26%, var(--border-default)); background:var(--cat-time-soft); }
.tc-icon--estimates{ color:var(--cat-estimates); border-color:color-mix(in srgb, var(--cat-estimates) 26%, var(--border-default)); background:var(--cat-estimates-soft); }
.tc-icon--email{ color:var(--cat-email); border-color:color-mix(in srgb, var(--cat-email) 26%, var(--border-default)); background:var(--cat-email-soft); }
.tc-icon--utility{ color:var(--cat-utility); border-color:color-mix(in srgb, var(--cat-utility) 26%, var(--border-default)); background:var(--cat-utility-soft); }
.tc-icon svg{ width:22px; height:22px; }
.tc-icon .magpie-mono{ width:24px; height:24px; }
.tc-name{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.015em; color:var(--text-strong); margin:0 0 var(--space-2); }
.tc-hint{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); margin:0; }
.tc-foot{ margin-top:auto; padding-top:var(--space-5); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.tc-cat{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); }
.tc-cta{ display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:700; color:var(--text-brand); }
.tc-cta svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-out); }

/* placeholder (coming-soon) state */
.tool-card.is-soon{ cursor:default; }
.tool-card.is-soon .tc-name{ color:var(--text-muted); }
.tool-card.is-soon:hover{ background:color-mix(in srgb, var(--surface) 50%, transparent); }

/* live (real tool) state */
.tool-card.is-live:hover{ background:var(--surface); }
.tool-card.is-live:hover::before{ transform:scaleX(1); }
.tool-card.is-live:hover .tc-cta svg{ transform:translateX(4px); }

/* ---------- Status tags ---------- */
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:var(--text-2xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--border-default); border-radius:var(--r-frame); color:var(--status-soon); }
.tag--soon{ color:var(--status-soon); background:var(--status-soon-soft); border-color:var(--border-default); }
.tag--live{ color:var(--success-text); background:var(--status-live-soft); border-color:color-mix(in srgb, var(--status-live) 30%, var(--surface)); }
.tag--live .dot{ width:7px; height:7px; border-radius:50%; background:var(--status-live); box-shadow:0 0 0 3px color-mix(in srgb, var(--status-live) 22%, transparent); }

/* ---------- Empty / no-results ---------- */
.tool-empty{ display:none; border:var(--hair); border-top:none; padding:clamp(2.5rem,6vw,4rem) var(--space-6); text-align:center; }
.tool-empty.is-on{ display:block; }
.tool-empty b{ display:block; font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--text-strong); margin-bottom:var(--space-2); }
.tool-empty span{ font-size:var(--text-md); color:var(--text-muted); }

/* ---------- Early-state band ---------- */
.earlystate{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;
  margin-top:var(--space-8); padding:var(--space-5) var(--space-6);
  border:var(--hair); border-radius:var(--r-frame); background:color-mix(in srgb, var(--surface) 50%, transparent); }
.earlystate img{ width:34px; height:34px; flex:0 0 auto; }
.earlystate p{ margin:0; flex:1 1 280px; font-size:var(--text-md); color:var(--text-body); }
.earlystate a{ font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; color:var(--text-brand);
  text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:1px; white-space:nowrap; }
.earlystate a:hover{ color:var(--text-link-hover); }

/* ---------- Ad slot (reserved, no layout shift) ---------- */
.adslot{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding-block:var(--space-2); }
.adslot__label{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--text-subtle); }
.adslot__box{ width:100%; max-width:728px; min-height:90px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--border-strong); border-radius:var(--r-frame); color:var(--text-subtle);
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.06em; }

/* ---------- Hire card (the single dark moment) ---------- */
.hire{ position:relative; overflow:hidden; border-radius:var(--r-frame); padding:clamp(2rem,4vw,3.25rem);
  background:var(--gradient-ink); border:1px solid var(--border-inverse); color:var(--text-on-dark); }
.hire::before{ content:""; position:absolute; inset:0; background:var(--sheen-soft); opacity:.5; pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 120% at 100% 0%, #000, transparent 65%); mask-image:radial-gradient(70% 120% at 100% 0%, #000, transparent 65%); }
.hire::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--sheen); opacity:.85; }
.hire__in{ position:relative; z-index:1; max-width:60ch; }
.hire .eyebrow{ color:var(--teal-300); display:block; margin-bottom:var(--space-4); }
.hire h2{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; letter-spacing:-0.02em; color:#fff; margin:0 0 var(--space-3); }
.hire p{ font-size:var(--text-lg); line-height:1.55; color:var(--text-on-dark-muted); margin:0 0 var(--space-7); max-width:48ch; }
.hire__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ---------- Footer (light colophon) ---------- */
.site-footer{ border-top:var(--hair-strong); margin-top:clamp(2.5rem,5vw,4rem); }
.site-footer__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:var(--space-10); padding-block:clamp(2.5rem,4vw,3.5rem) var(--space-8); }
.site-footer__brand .brand{ margin-bottom:var(--space-4); }
.site-footer__tag{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); max-width:34ch; margin:0; }
.fcol h4{ font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); margin:0 0 var(--space-4); }
.fcol a{ display:block; font-size:var(--text-sm); color:var(--text-muted); text-decoration:none; padding:5px 0; transition:var(--transition-colors); }
.fcol a:hover{ color:var(--text-strong); }
.site-footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  padding-block:var(--space-5); border-top:var(--hair); font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.04em; color:var(--text-subtle); }
.site-footer__bottom a{ color:var(--text-link); text-decoration:none; }
.site-footer__bottom a:hover{ color:var(--text-link-hover); }

/* ---------- Tools marquee (band under the hero) ---------- */
.marquee{ position:relative; border-top:var(--hair); overflow:hidden; background:color-mix(in srgb, var(--surface) 45%, transparent); }
[data-marquee="off"] .marquee{ display:none; }
.marquee::before, .marquee::after{ content:""; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg, var(--canvas), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--canvas), transparent); }
.marquee__viewport{ overflow:hidden; }
.marquee__track{ display:flex; align-items:center; gap:var(--space-6); width:max-content; padding:var(--space-3) var(--gutter); will-change:transform; }
/* InfiniteSlider behavior: shell.js drives the transform and smoothly eases the
   scroll speed to a crawl (or pause) on hover - see assets/shell.js. */
/* clean text-only marquee: a quiet ticker of brand phrases, diamond-separated */
.mq-phrase{ flex:0 0 auto; white-space:nowrap; color:var(--text-muted);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.mq-sep{ flex:0 0 auto; width:5px; height:5px; border-radius:1px; transform:rotate(45deg);
  background:var(--brand); opacity:.5; }

/* style: soft - confident display type, sentence case (Tweak: marqueeStyle) */
[data-marquee-style="soft"] .marquee__track{ gap:var(--space-7); }
[data-marquee-style="soft"] .mq-phrase{ font-family:var(--font-display); text-transform:none;
  font-size:var(--text-lg); font-weight:600; letter-spacing:-0.01em; color:var(--text-strong); }
[data-marquee-style="soft"] .mq-sep{ width:7px; height:7px; opacity:.65; }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .marquee__viewport{ overflow-x:auto; scrollbar-width:none; }
  .marquee__viewport::-webkit-scrollbar{ display:none; }
}

/* ---------- Hero rail: roadmap carousel (alt to the status card) ---------- */
.tcarousel{ display:flex; flex-direction:column; border:var(--hair); border-radius:var(--r-frame);
  background:color-mix(in srgb, var(--surface) 55%, transparent); padding:var(--space-5) var(--space-6); }
.hero__rail .colophon{ display:none; }
[data-rail="card"] .tcarousel{ display:none; }
[data-rail="card"] .hero__rail .colophon{ display:block; }
.tcarousel__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding-bottom:var(--space-4); border-bottom:var(--hair); margin-bottom:var(--space-4); }
.tcarousel__count{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-subtle); font-variant-numeric:tabular-nums; }
.tcarousel__count [data-cur]{ color:var(--text-strong); }
.tcarousel__viewport{ position:relative; overflow:hidden; }
.tcarousel__track{ list-style:none; margin:0; padding:0; display:grid; }
.tslide{ grid-area:1 / 1; display:flex; flex-direction:column; min-height:196px; opacity:0; visibility:hidden;
  transform:translateX(10px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.tslide.is-active{ opacity:1; visibility:visible; transform:none; }
.tslide__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.tslide__cat{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); }
.tslide .tc-icon{ margin-bottom:var(--space-4); }
.tslide__name{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.015em; color:var(--text-strong); margin:0 0 var(--space-2); }
.tslide__desc{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); margin:0; }
.tslide__foot{ margin-top:auto; padding-top:var(--space-4); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.tslide__meta{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.06em; color:var(--text-subtle); }
.tcarousel__nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding-top:var(--space-4); margin-top:var(--space-4); border-top:var(--hair); }
.tcarousel__dots{ display:flex; gap:var(--space-2); }
.tdot{ width:22px; height:4px; padding:0; border:none; border-radius:2px; background:var(--border-strong); cursor:pointer; transition:background var(--dur-base) var(--ease-out); }
.tdot.is-active{ background:var(--sheen); }
.tdot:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.tcarousel__arrows{ display:flex; gap:var(--space-2); }
.tcarousel__arrows button{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:var(--hair); border-radius:var(--r-ctrl); background:var(--surface); color:var(--text-muted); cursor:pointer;
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out); }
.tcarousel__arrows button:hover{ color:var(--text-strong); border-color:var(--border-strong); }
.tcarousel__arrows button:active{ transform:translateY(1px); }
.tcarousel__arrows button:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.tcarousel__arrows svg{ width:16px; height:16px; }
.tslide__cta{ display:inline-flex; align-items:center; gap:6px; padding:0; border:none; background:none; cursor:pointer; white-space:nowrap; flex:0 0 auto;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; color:var(--text-brand); }
.tslide__cta svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-out); }
.tslide__cta:hover svg{ transform:translateX(3px); }
.tslide__cta:focus-visible{ outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .colophon{ max-width:420px; }
  .tool-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .tool-grid{ grid-template-columns:1fr; }
  .site-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .brand__wm{ display:none; }
  .nav a{ padding-inline:var(--space-2); }
}
@media (max-width:460px){
  .site-footer__top{ grid-template-columns:1fr; gap:var(--space-7); }
}

/* ====================================================================
   Search-active transition  (Tweak: data-search-motion on <html>)
   shell.js sets data-searching="on" while the hero search has a query.
   The marquee, the tools-intro heading, and the search hint collapse
   away (grid-template-rows 1fr -> 0fr is a real, animatable height) so
   the tool grid slides up. Reverses smoothly when the query clears.
   Three flavors: collapse (calm) | lift (springy) | focus (search mode).
   ==================================================================== */

/* Heights are animated in JS (shell.js setSearchMode/animateH) between two
   pixel values, which tweens reliably in every engine - fr-unit
   grid-template-rows transitions do not. CSS here owns opacity, transform,
   easing, and the per-variation differences. The .is-collapsing class is
   added by JS for the duration of each height tween. */
.t-collapse__in{ /* structural wrapper; no longer needs grid */ }
.is-collapsing{ overflow:hidden !important;
  transition:height .46s cubic-bezier(.4,0,.2,1) .07s, margin .46s cubic-bezier(.4,0,.2,1) .07s, padding .46s cubic-bezier(.4,0,.2,1) .07s, opacity .2s var(--ease-out), transform .26s var(--ease-out) !important; }

/* the fade/lift of each collapsing block - keyed on data-searching so the
   reverse animates too. height is driven by JS in parallel. */
.marquee, .tools__intro, .hero__search-hint, .hero__copy, .hero__rail{
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.section--tools{ transition:padding-top var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out); }

/* ---- shared collapsed state (every variation) ---- */
[data-searching] .marquee{ opacity:0; border-top-color:transparent; }
[data-searching] .marquee__track{ animation-play-state:paused; }
[data-searching] .tools__intro{ opacity:0; }
[data-searching] .hero__search-hint{ opacity:0; }
[data-searching] .section--tools{ border-top-color:transparent; padding-top:clamp(1rem,2.2vw,1.6rem); }

/* ---- variation: collapse (calm) - opacity only, no extra transform ---- */

/* ---- variation: lift (collapsing blocks fly up as they fade) ---- */
[data-search-motion="lift"][data-searching] .marquee,
[data-search-motion="lift"][data-searching] .tools__intro,
[data-search-motion="lift"][data-searching] .hero__search-hint,
[data-search-motion="lift"][data-searching] .hero__copy{ transform:translateY(-14px); }
[data-search-motion="lift"][data-searching] .tool-grid{ animation:searchSettle var(--dur-slow) var(--ease-spring) both; }

/* ---- variation: focus (full search mode; headline + rail fold away too) ---- */
[data-search-motion="focus"][data-searching] .hero__copy,
[data-search-motion="focus"][data-searching] .hero__rail{ opacity:0; }
[data-search-motion="focus"][data-searching] .hero__rail{ pointer-events:none; }
/* focus: the grid rises via the layout collapse only - no extra bounce (calmer) */

@keyframes searchSettle{ from{ transform:translateY(8px); opacity:.7; } to{ transform:translateY(0); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .is-collapsing{ transition-duration:1ms !important; }
  .marquee, .tools__intro, .hero__search-hint, .hero__copy, .hero__rail, .section--tools{ transition-duration:1ms; }
  [data-searching] .tool-grid{ animation-duration:1ms; }
}


/* Readability ("Clearer"): lift the faint subtext app-wide. Scoped to body so
   it references the theme-correct inherited values (non-circular) and adapts to
   light/dark automatically. Dark surfaces use --text-on-dark* and are unaffected. */
body{
  --text-subtle: var(--text-body);
  --text-muted:  var(--text-body);
}


/* Readability: Comfortable type scale (+~8% on every size, rem-based).
   Scoped to body so it overrides the DS :root tokens app-wide without
   touching spacing/layout. */
body{
  --text-2xs: 0.75rem;
  --text-xs:  0.82rem;
  --text-sm:  0.9rem;
  --text-md:  0.95rem;
  --text-base:1.06rem;
  --text-lg:  1.2rem;
  --text-xl:  1.45rem;
  --text-2xl: 1.85rem;
}
/* switchable via the header Text size control (data-textscale on <html>) */
html[data-textscale="default"] body{
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.8125rem; --text-md:0.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem;
}
html[data-textscale="large"] body{
  --text-2xs:0.82rem; --text-xs:0.9rem; --text-sm:1rem; --text-md:1.06rem; --text-base:1.18rem; --text-lg:1.35rem; --text-xl:1.6rem; --text-2xl:2.05rem;
}