/* ═══════════════════════════════════════════════════════════════════════════
   components.css — the parts that are genuinely shared.

   FOUR COMPONENTS, not forty. This file exists because the marketing site and
   the product both use a button, a chip, a lede and a focus ring — and for no
   other reason. A component earns a place here by being used in both; anything
   used once stays where it is used.

   CLASS SELECTORS ONLY. The bug this whole extraction exists to prevent was an
   element selector in a shared sheet: `nav{position:fixed}` and
   `section{padding:11vw 0}` are correct for the marketing page and catastrophic
   for the app, and the app could not see them coming. A test fails the build if
   a bare element selector appears in this file or in tokens.css.

   The one exception is :focus-visible, and it is deliberate. A focus ring must
   apply to everything focusable or it is not a focus ring — and a page that
   forgets to opt in is a page a keyboard cannot be used on.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE BASE ───────────────────────────────────────────────────────────────
   The reset and the page's own ground. This lived in autumn.css, which meant
   any page not loading the MARKETING stylesheet had no box-sizing, no reset,
   no background and no text colour — inherited by accident, and lost the
   moment the app stopped loading a sheet it should never have loaded.

   It belongs here: a base is shared by definition, and it is the one thing a
   page cannot opt out of and still work. */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
/* Links take the ink around them. This lived in autumn.css, so when the app
   stopped loading the marketing sheet every unstyled link in the product fell
   back to the browser's default blue — including the Autumn wordmark in the
   app's own header, which rendered #0000EE against a cream bar. A reset is the
   one thing a page cannot opt out of and still look like itself, so it belongs
   in the base. A link that should look like a link says so with a class. */
a{ color:inherit }
body{
  font-family:var(--sans);
  background:var(--tint);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── TYPE ROLES ─────────────────────────────────────────────────────────── */
.lede{ font-size:var(--t-lead); color:var(--slate); line-height:1.62 }

/* Machine voice: anything counted, measured or timestamped. */
.tech{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
       text-transform:uppercase; color:var(--faint) }

/* ── BUTTON ─────────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:11px;
      padding:17px 32px; border:0; border-radius:var(--r);
      background:var(--ink); color:var(--tint);
      font:600 .97rem/1 var(--sans); cursor:pointer; text-decoration:none;
      transition:transform var(--m-micro) var(--ease-out) }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; transform:none }

/* The primary action, at 78% accent toward ink. The raw accents are picked to
   sing as a 4rem italic against their own ground; as a 14px label reversed out
   in white they do not clear AA — Find's red measured 3.72:1 and Money's green
   3.54:1. A shade deeper is still unmistakably the product's colour and is
   actually readable, which a call to action has to be before it is anything. */
.btn--go{ background:color-mix(in srgb, var(--accent) 78%, var(--ink)); color:#fff }
.btn--ghost{ background:transparent; color:inherit; border:1px solid currentColor }

.btn .arw{ transition:transform var(--m-fast) var(--ease-out) }
.btn:hover .arw{ transform:translateX(5px) }

/* WORKING. Something happens the moment a click lands, before any answer
   arrives — otherwise the only feedback for a slow action is nothing at all,
   and the customer clicks again. */
.btn.working{ position:relative; pointer-events:none; opacity:.85 }
.btn.working::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: btn-sweep 1.05s linear infinite }
@keyframes btn-sweep{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* SPECIFICITY, and it was live: `body.dark .btn` is (0,2,1) and beat both
   modifiers at (0,1,0), so on the Platform the primary and the ghost rendered
   as the same cream block — the page had no visible primary action at all.
   Caught by rendering it, not by reading it. The variants have to match the
   dark rule's weight to survive it. Gold takes ink rather than white (8.96:1). */
body.dark .btn{ background:#F6F7EB; color:#191716 }
body.dark .btn--go{ background:var(--accent); color:#191716 }
body.dark .btn--ghost{ background:transparent; color:#F1F1EC; border:1px solid currentColor }

/* ── CHIP ───────────────────────────────────────────────────────────────── */
.chip{ font-family:var(--mono); font-size:.6rem; letter-spacing:var(--track-caps);
       text-transform:uppercase; padding:5px 9px; border-radius:var(--r);
       white-space:nowrap; font-weight:500 }
.chip--go{   background:color-mix(in srgb,var(--action) 12%,transparent);
             color:color-mix(in srgb,var(--action) 74%,var(--ink)) }
.chip--wait{ background:color-mix(in srgb,var(--intel) 18%,transparent);
             color:color-mix(in srgb,var(--intel) 46%,var(--ink)) }
.chip--no{   background:color-mix(in srgb,var(--verified) 14%,transparent);
             color:color-mix(in srgb,var(--verified) 58%,var(--ink)) }
.chip--read{ background:color-mix(in srgb,var(--info) 12%,transparent);
             color:color-mix(in srgb,var(--info) 82%,var(--ink)) }
body.dark .chip--go, body.dark .chip--wait,
body.dark .chip--no, body.dark .chip--read{
  color:#F1F1EC; background:rgba(255,255,255,.10) }

/* ── WAITING ────────────────────────────────────────────────────────────────
   Work happening, said as work. Never the word "Loading", and never a
   percentage — a bar that cannot know how far along it is has to invent the
   number, and this product does not invent numbers. */
.working-marks{ display:inline-flex; gap:5px }
.working-marks i{ width:5px; height:5px; border-radius:50%;
                  background:currentColor; opacity:.3;
                  animation: mark-breathe 1.25s ease-in-out infinite }
.working-marks i:nth-child(2){ animation-delay:.16s }
.working-marks i:nth-child(3){ animation-delay:.32s }
@keyframes mark-breathe{
  0%,100%{ opacity:.22; transform:translateY(0) }
  45%    { opacity:1;   transform:translateY(-3px) }
}
@media (prefers-reduced-motion: reduce){
  .working-marks i{ animation:none; opacity:.6 }
  .btn.working::after{ animation:none; opacity:.5 }
}

/* ── FOCUS ──────────────────────────────────────────────────────────────────
   The one element-ish selector allowed in a shared sheet, because a focus ring
   that pages must opt into is a focus ring that some page will forget, and
   that page cannot be used with a keyboard. */
:focus-visible{ outline:2.5px solid var(--info); outline-offset:3px }