/* design/kit/kit.css
   The component kit of Sift. ONE flat file: the :root block of values, then the component
   classes, ordered atoms to molecules to organisms.

   It did not start here. Stage 06 wrote the values by hand from DESIGN-artifacts.md into
   design/_theme.css, and Stage 07 Step 3 moved that file here with `git mv`, :root byte for
   byte, so the line `plate B pixel` to `DESIGN-artifacts.md` to `kit.css` to `tokens.css`
   is never broken by a re-derivation. Nothing below re-derives a value: a class either uses
   a variable that arrived with the file, or a variable declared in the PENDING block and
   named out loud for the decision.

   The kit stays FLAT on purpose. Semantic roles are visible only after components have stood
   on real screens, so the split into primitive and semantic tokens is Stage 08, not this file.

   No em dash anywhere in this file.
*/

:root {
  /* ---- Product brand B "Command center". One value per line, origin beside it.
     Origin vocabulary: `plate B pixel` (read off the approved brand plate at Stage 06),
     `attribute AN` (derived from an attribute in design/concept/docs/concept.md),
     `taste` (the Designer's named taste), `technical decision`.
     The origin travels with the value: it moves into kit.css byte for byte at Stage 07
     Step 3, and into the semantic role comment at Stage 08. ---- */
  --canvas:#0B0E11;      /* plate B pixel. Page background, deepest surface. A1 quiet */
  --surface:#151A1F;     /* plate B pixel. Card, panel, bar; hover of a ranked row. A1, A4 */
  --elevated:#1E252B;    /* plate B pixel. Raised panel, active tab, checkbox field. A1 */
  --line:#262D34;        /* plate B pixel. Every hairline border. A1, depth without shadow */
  --porcelain:#EAEEF2;   /* plate B pixel. Primary text and the mark. A5, type does the work */
  --ash:#868F99;         /* plate B pixel. Secondary text, metadata, quote. A1, secondary recedes */
  --cyan:#33C4CC;        /* plate B pixel. The one accent. A1 one accent, A2 evidence marker, A4 */
  --amber:#D9A441;       /* attribute A3. Low signal only, as information and never as an alarm */
  --red:#E5484D;         /* attribute A3. Blocking failure only, paired with the next move */
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;   /* taste. Vercel / Geist, Linear; A5 */
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;                  /* attribute A2. The count is the trust surface; A4 */
  --r:6px;               /* matched to character. Anything a hand acts on */
  --r-sm:4px;            /* matched to character. Marks and controls that sit inside text */
  --ease:cubic-bezier(0.22,1,0.36,1); /* technical decision. Ease out, restrained (UI tone, motion) */

  /* ---- PENDING YOUR DECISION (Stage 07 Step 3). Eight variables the kit needs and the
     migrated file did not declare. Six of them are already IN the file as literals written
     inside a class at Stage 06, which is the convention violation the kit is here to close;
     two (--red-wash, --red-edge) are new pairs built the same way as the amber pair, because
     --red was declared at Stage 06 and never used by a single rule. No value is invented:
     each is either the literal that was already there, or the declared brand colour at the
     opacity the language already uses for a wash and an edge. Approve, change, or reject. ---- */
  --line-2:#3a444c;                /* was a literal in 4 classes. The second, brighter hairline: control outline, hover border. Also the value --gunmetal fell back to, a variable that is referenced and never declared */
  --cyan-wash:rgba(51,196,204,0.10);   /* was a literal in .cite. Accent as a surface, never as a fill. A2 */
  --cyan-edge:rgba(51,196,204,0.30);   /* was a literal in .cite. Accent as an edge */
  --amber-wash:rgba(217,164,65,0.10);  /* was a literal in .badge-low. Low signal as information, A3 */
  --amber-edge:rgba(217,164,65,0.32);  /* was a literal in .badge-low */
  --red-wash:rgba(229,72,77,0.10);     /* NEW. Blocking failure only, built like the amber pair. A3 */
  --red-edge:rgba(229,72,77,0.32);     /* NEW. Blocking failure only */
  --shadow:0 2px 4px rgba(0,0,0,0.4);  /* was a literal in .appframe. Depth for a surface that floats above the screen */
  --r-lg:12px;                     /* was a literal in .appframe. The frame and anything that reads as a sheet: dialog, auth card */

  /* ---- Portfolio roadmap rail (purple, shared with research.html).
     NOT product language: prototype chrome for the portfolio around the product.
     Does not enter the component kit and is excluded from DESIGN.md on purpose. ---- */
  --pf-bg:#0c0c0e; --pf-bg-3:#17171c; --pf-border-light:#1e1e28;
  --pf-text:#e8e8ec; --pf-text-3:#66667a; --pf-accent:#7c6af7; --pf-accent-glow:rgba(124,106,247,0.12);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-ui); background:var(--canvas); color:var(--porcelain); line-height:1.5; font-size:14px; letter-spacing:-0.011em; -webkit-font-smoothing:antialiased; }
/* Focus. The colour layer had no designed focus state, only the user agent ring, which on a
   dark instrument is barely a ring at all. Cyan is signed for the active state (A1), and focus
   is the keyboard's version of active. :focus-visible, so a mouse click does not draw it. */
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; border-radius:var(--r-sm); }

.sprite { position:absolute; width:0; height:0; }
.ic { display:inline-block; vertical-align:middle; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* The portfolio top bar and the Stage 06 proof bar used to live here. Both were chrome, both
   were declared in the product kit, and after the screens moved onto the stage panel neither
   was rendered by a single page. Removed at the Step 6 critique rather than carried into the
   Stage 08 token audit as product rules that are not product and are not used.
   The --pf-* values stay in :root: design/_panel.css and the two stands draw on them, and the
   block already says out loud that it is not product language. ---- */

/* ---- the app frame ---- */
.appframe { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:var(--canvas); display:flex; flex-direction:column; min-height:560px; }
.appbar { display:flex; align-items:center; gap:14px; height:52px; padding:0 18px; border-bottom:1px solid var(--line); background:var(--surface); }
.brand { display:flex; align-items:center; gap:8px; font-weight:590; letter-spacing:0.06em; text-transform:uppercase; font-size:13px; color:var(--porcelain); }
.brand .mark { color:var(--cyan); }
.navtabs { display:flex; gap:2px; }
.navtabs a { display:inline-flex; align-items:center; min-height:44px; font-size:13.5px; color:var(--ash); text-decoration:none; padding:0 12px; border-radius:var(--r); transition:color .15s,background .15s; }
.navtabs a:hover { color:var(--porcelain); }
.navtabs a.active { color:var(--porcelain); background:var(--elevated); }
.spacer { flex:1; }
/* reads at 28px, hit at 44 through an overlay: the visual and the target may differ */
.avatar { position:relative; width:28px; height:28px; border-radius:50%; background:var(--elevated); border:1px solid var(--line); display:block; }
.avatar::after { content:""; position:absolute; inset:-8px; border-radius:50%; }

.appmain { flex:1; padding:20px 22px; }

.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:12.5px; color:var(--ash); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 12px; cursor:pointer; transition:color .15s,border-color .15s; }
.chip:hover { color:var(--porcelain); border-color:var(--line-2); }
.chip .ic { width:14px; height:14px; }
/* Facet counts, and the active facet marked by TONE rather than by hue. Cyan could be read as
   allowed here ("the active state"), but spending it on a filter would put the one accent in
   two places at once and dilute the primary action. A1 says weight comes from hierarchy, so
   the on-chip steps up a surface and its text goes to Porcelain instead. */
.chip-count { font-family:var(--font-mono); font-size:11.5px; color:var(--ash); }
.chip.is-on { color:var(--porcelain); background:var(--elevated); border-color:var(--line-2); }
.chip.is-on .chip-count { color:var(--porcelain); }

.sortnote { font-size:12.5px; color:var(--ash); margin-left:auto; }
.sortnote b { color:var(--porcelain); font-weight:500; }
.toolbar-full { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; }
.toolbar-compact { display:none; }

/* ---- screen head: identity, the ONE action at rest, and the denominator ---- */
/* The head action and the selection bar are mutually exclusive, so the screen never carries
   two primary actions (Design Principle 4). Pure CSS, so the proof is clickable. */
.screenhead { padding:16px 0 14px; border-bottom:1px solid var(--line); }
.screenhead-row { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.head-text { flex:1; min-width:0; }
.head-action { flex:none; }

/* The meta row of a detail head: confidence, recency, rank. Everything the ranked row already
   said, restated where the decision is actually made, so the claim travels with the screen. */
.head-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ash); margin-top:9px; }

/* The synthesis itself. Set at reading size in primary ink, because this paragraph IS the
   product's claim, and every clause of it carries a citation that resolves in the list below
   (A2). Measure is capped so the eye can return to the left edge without hunting. */
.summary { font-size:14.5px; line-height:1.8; color:var(--porcelain); margin-top:16px; max-width:88ch; }

/* Scope line. A2 (evidence on the surface) and A4 (ranked clarity): a ranking with no
   denominator cannot be checked, so the denominator is on the screen and its numbers are set
   in the mono face, because the number is what carries the weight (Voice, Principle 1). */
.scope { font-size:12.5px; color:var(--ash); line-height:1.6; margin-top:10px; max-width:92ch; }
.scope b { font-family:var(--font-mono); font-weight:500; color:var(--porcelain); }
.scope a { color:var(--porcelain); }

.main-head { padding:16px 0 14px; }
.h1 { font-size:22px; font-weight:590; letter-spacing:-0.02em; }
.sub { color:var(--ash); font-size:13.5px; margin-top:4px; max-width:70ch; }

.list { list-style:none; }
.theme { display:grid; grid-template-columns:22px 20px 1fr auto 20px; align-items:start; gap:6px 14px; padding:13px 8px; border-bottom:1px solid var(--line); transition:background .12s var(--ease); }
.theme:hover { background:var(--surface); }
/* the accent marks the SELECTED row, which is an active state (A1). It used to sit on
   :first-child, which only looked right because the first row happened to be the checked one. */
.theme:has(.check:checked) { box-shadow:inset 2px 0 0 var(--cyan); }

/* Rank (A4): the ranking claim is quotable only if the position is written down. Mono, and
   quiet: rank is structure, not an action, so it never takes the accent. */
.rank { font-family:var(--font-mono); font-size:12px; color:var(--ash); text-align:right; padding-top:2px; }

/* The representative quote (A2, A5): evidence reaches the eye before the click, and the
   customer's words are set plainly, recessed, behind a hairline rather than in a card. */
.theme-quote { display:block; font-size:12.5px; color:var(--ash); line-height:1.55; margin-top:7px; padding-left:11px; border-left:1px solid var(--line); max-width:78ch; }
.theme-prov { display:block; font-family:var(--font-mono); font-size:11px; color:var(--ash); margin-top:7px; }
/* 24px, the AA floor, not 44: a 44px checkbox would double the height of every row in a
   ranked list. Same named exception the grey contract carries. */
.check { appearance:none; -webkit-appearance:none; width:24px; height:24px; border:1px solid var(--line-2); border-radius:4px; background:var(--elevated); cursor:pointer; position:relative; }
.check:checked { background:var(--cyan); border-color:var(--cyan); }
.check:checked::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--canvas); border-width:0 2px 2px 0; transform:rotate(45deg); }
.theme-main { text-decoration:none; color:inherit; min-width:0; }
.theme-label { display:block; font-size:14px; font-weight:500; color:var(--porcelain); }
.conf { display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.conf-n { font-family:var(--font-mono); font-size:12.5px; color:var(--porcelain); }
.badge-low { font-family:var(--font-mono); font-size:11px; color:var(--amber); background:var(--amber-wash); border:1px solid var(--amber-edge); border-radius:var(--r-sm); padding:1px 6px; white-space:nowrap; }
.theme-drill { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--ash); font-size:18px; text-decoration:none; line-height:1; transition:color .15s,transform .15s var(--ease); }
.theme:hover .theme-drill { color:var(--porcelain); transform:translateX(2px); }

/* Load more carries the remainder, so the denominator stays true as the list grows (A4).
   Cross-check 1: it is the bare button and nothing else. The rule under it belongs to the
   LIST, so the list carries it and the control declares no border of its own. */
/* display:flex, and not a plain block: the bare button is an inline-flex box, so in a block
   parent it would sit on a line box and the line box's descender space would add a pixel under
   the list that nobody asked for. The pixel comparison at Step 5 found exactly that. */
.list-foot { display:flex; border-bottom:1px solid var(--line); }

/* Selection bar: present only while something is selected, and while it is up the head action
   is gone. One primary action on the screen at any moment. */
.selbar { display:none; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 8px 0; }
/* On the composer the bar is always there: nothing is being selected, the artifact IS the
   selection. Same component, one declared trigger variant, not a second bar. */
.selbar--static { display:flex; padding:14px 22px; border-top:1px solid var(--line); background:var(--surface); }
.selbar-note { font-size:12.5px; color:var(--ash); margin-right:auto; }
.appframe:has(.check:checked) .selbar { display:flex; }
.appframe:has(.check:checked) .head-action { display:none; }

.actionbar { display:flex; align-items:center; gap:10px; padding-top:18px; }
.actionbar-note { font-size:12.5px; color:var(--ash); margin-right:auto; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:var(--canvas); background:var(--cyan); border:0; border-radius:var(--r); padding:0 16px; cursor:pointer; text-decoration:none; transition:filter .15s var(--ease); }
.btn:hover { filter:brightness(1.08); }
.btn .ic { width:15px; height:15px; }
.btn--ghost { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-size:13.5px; font-weight:500; color:var(--porcelain); background:transparent; border:1px solid var(--line); border-radius:var(--r); padding:0 16px; cursor:pointer; text-decoration:none; transition:border-color .15s; }
.btn--ghost:hover { border-color:var(--line-2); }

/* ---- phase strip (2.1, 2.2): the three phases of ingestion, named before the user commits.
   The As-Is barrier is that ingestion is a black box, and this is the answer in visual form.
   It never takes the accent: a phase is information about process, not an action, and cyan is
   already spent on the one next move. Same rule as the active filter chip: the current phase
   steps up a surface and its text goes to Porcelain. ---- */
.steps { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:11px 8px; border-bottom:1px solid var(--line); font-size:12px; color:var(--ash); }
.step { display:inline-flex; align-items:center; gap:7px; }
.step-n { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; border:1px solid var(--line); font-family:var(--font-mono); font-size:10px; flex:none; }
.step.is-done .step-n { color:var(--porcelain); border-color:var(--line-2); }
/* a finished phase carries a mark rather than its number: the number is a position in a
   sequence, and once the step is behind you the position stops being the useful fact */
.step-n .ic { width:10px; height:10px; }
.step.is-current { color:var(--porcelain); }
.step.is-current .step-n { color:var(--porcelain); border-color:var(--porcelain); background:var(--elevated); }
.step-sep { color:var(--ash); opacity:0.7; }

/* the theme-card skeleton mirrors the real row, so the wait promises what arrives (A4) */
.skelrow { display:grid; grid-template-columns:22px 20px 1fr; gap:6px 14px; padding:13px 8px; border-bottom:1px solid var(--line); }
.skelrow .skel-box { grid-column:1 / 3; height:16px; border-radius:4px; background:var(--surface); }
.skelrow .skel-body { display:grid; gap:9px; }

/* state (empty / error) */
.state { max-width:440px; margin:40px auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px; }
.state-ic { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ash); }
.state-ic .ic { width:22px; height:22px; }
.state-t { font-size:19px; font-weight:590; letter-spacing:-0.02em; color:var(--porcelain); }
.state-d { font-size:13.5px; color:var(--ash); line-height:1.6; }
.state-actions { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; justify-content:center; }

/* loading skeleton */
.skelcard { display:grid; gap:8px; padding:14px 8px; border-bottom:1px solid var(--line); }
.skel { height:10px; border-radius:4px; background:linear-gradient(90deg,var(--surface) 0%,var(--elevated) 50%,var(--surface) 100%); background-size:200% 100%; animation:shimmer 1.4s var(--ease) infinite; }
.skel.a { width:52%; } .skel.b { width:30%; height:7px; } .skel.c { width:64%; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

.appfoot { padding:14px 22px; border-top:1px solid var(--line); background:var(--surface); font-family:var(--font-mono); font-size:11px; color:var(--ash); }

/* ---- 6.4 Shared brief: the public read-only document (contrast screen, Step 7) ----
   The same language at a completely different density: no app chrome, no actions, one column
   of reading. Cyan appears here on the citation markers and nowhere else. The palette table in
   DESIGN-artifacts.md signs Cyan for A2 as the evidence marker, and on a document with no
   action to spend it on, the citation IS the trust surface. */
.public-bar { display:flex; align-items:center; gap:12px; height:52px; padding:0 22px; border-bottom:1px solid var(--line); background:var(--surface); }
.public-bar .brand { color:var(--porcelain); }
.public-tag { font-family:var(--font-mono); font-size:11px; color:var(--ash); }
.public-main { max-width:720px; margin:0 auto; padding:34px 24px 44px; }
.public-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ash); }
.pub-h1 { font-size:29px; font-weight:590; letter-spacing:-0.022em; line-height:1.2; margin:10px 0 12px; }
.pub-lede { font-size:15.5px; line-height:1.65; color:var(--ash); }
.pub-meta { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:20px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; color:var(--ash); }
.pub-meta b { color:var(--porcelain); font-weight:500; }

/* Key takeaways, for the reader who will not scroll (A4: the order IS the recommendation) */
.pub-key { margin:26px 0 0; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.pub-key h2 { font-size:11px; font-weight:590; letter-spacing:0.07em; text-transform:uppercase; color:var(--ash); margin-bottom:12px; }
.pub-key ol { list-style:none; display:grid; gap:10px; }
.pub-key li { display:flex; align-items:baseline; gap:12px; font-size:15px; color:var(--porcelain); }
.pub-key .rank { text-align:left; min-width:14px; padding-top:0; }
.pub-key .conf { margin-left:auto; }

/* The author's judgement, attributed and visibly separate from the evidence (A5) */
.pub-rationale { margin:22px 0 0; padding-left:14px; border-left:2px solid var(--line); font-size:14px; line-height:1.7; color:var(--ash); }
.pub-rationale b { color:var(--porcelain); font-weight:500; }

.pub-h2 { font-size:11px; font-weight:590; letter-spacing:0.07em; text-transform:uppercase; color:var(--ash); margin:34px 0 14px; padding-top:18px; border-top:1px solid var(--line); }
.pub-theme { margin-bottom:26px; }
.pub-theme h3 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:17px; font-weight:590; letter-spacing:-0.015em; color:var(--porcelain); margin-bottom:9px; }
.pub-theme h3 .conf { margin-left:auto; }
.pub-theme p { font-size:14.5px; line-height:1.75; color:var(--ash); }

/* The customer's words, set as reading matter rather than as a card (A5) */
.pub-quote { margin:12px 0 0 0; padding-left:15px; border-left:1px solid var(--line); font-size:14px; line-height:1.7; color:var(--porcelain); }

/* The citation marker: the one place the accent lands on this page (A2) */
.cite { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:10.5px; color:var(--cyan); background:var(--cyan-wash); border:1px solid var(--cyan-edge); vertical-align:1px; }
.pub-cites { list-style:none; display:grid; gap:11px; }
.pub-cites li { display:flex; gap:11px; font-size:13px; line-height:1.65; color:var(--ash); }
.pub-cites .cite { flex:none; margin-top:2px; }

/* Coverage, not a bibliography: what the brief could and could not have seen (A2) */
.pub-sources { list-style:none; display:grid; gap:0; }
.pub-sources li { display:flex; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ash); }
.pub-sources li:last-child { border-bottom:0; color:var(--porcelain); }
.pub-sources b { margin-left:auto; font-family:var(--font-mono); font-weight:500; color:var(--porcelain); }

/* One honest line on how it was made (A3) */
.pub-method { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.7; color:var(--ash); }

.pubfoot { padding:16px 24px; border-top:1px solid var(--line); background:var(--surface); font-family:var(--font-mono); font-size:11px; color:var(--ash); text-align:center; }

/* bottom tabs (mobile) */
.bottomtabs { display:none; }
.btab { display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:var(--ash); font-size:10px; flex:1; padding:8px 0; }
.btab .ico { width:20px; height:20px; color:var(--ash); }
.btab .ico svg { width:20px; height:20px; display:block; }
.btab.active { color:var(--cyan); }
.btab.active .ico { color:var(--cyan); }

/* =====================================================================
   STAGE 07 STEP 3. The rest of the product enters the kit.

   Everything above this line was written at Stage 06 on two screens and arrived here with
   the file. Everything below is a component the inventory found on the other 35 screens and
   that had never been in colour. Structure comes from its own wireframe (wireframes/_wf.css
   plus the four screen-local blocks), appearance comes from the language, and no value is
   invented: colour is a variable, and every geometry literal here is the one the grey
   contract already carries or the one its painted neighbour already uses.

   Order is atoms, then molecules, then organisms. That order is not cosmetic: Stage 08 reads
   it as the split order and the @import order, and an atom extracted after the molecule that
   holds it puts the atom's rules in the molecule's file.
   ===================================================================== */

/* ---------- LEVEL 1, ATOMS ---------- */

/* Inline text link. The family the 88 unclassed <a> elements of the product never had, which
   is why the colour layer had no rule for any of them. Underlined on hover only: in a dense
   list, a permanent underline on every link is noise, and A1 says weight comes from
   hierarchy. --action gives a text control the 44px target without making it a button. */
.link { color:var(--porcelain); text-decoration:none; }
.link:hover { text-decoration:underline; }
.link--muted { color:var(--ash); }
.link--muted:hover { color:var(--porcelain); }
.link--action { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--ash); background:none; border:0; cursor:pointer; font-family:inherit; text-decoration:underline; }
.link--action:hover { color:var(--porcelain); }

/* Button, the closed set: three emphases (fill, outline, bare) by two sizes. Six declared
   forms, against two declarations plus four contextual overrides before the census. Width is
   NOT on the size axis, so full width is the layout utility .u-full and never a button. */
.btn--bare { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:44px; font-family:var(--font-ui); font-size:12.5px; color:var(--ash); background:none; border:0; padding:13px 8px; cursor:pointer; text-decoration:none; transition:color .15s,background .12s var(--ease); }
.btn--bare:hover { color:var(--porcelain); background:var(--surface); }
.btn--lg { min-height:50px; font-size:15px; padding:0 22px; }
/* Icon only. The label goes to .vh, so the control keeps its name for a screen reader. */
.btn--icon { display:inline-flex; align-items:center; justify-content:center; gap:0; min-width:44px; min-height:44px; padding:0; font-size:15px; color:var(--ash); background:none; border:0; cursor:pointer; font-family:inherit; line-height:1; transition:color .15s; }
.btn--icon:hover { color:var(--porcelain); }
.btn--icon .ic { width:16px; height:16px; }
.btn[disabled], .btn--ghost[disabled], .btn--bare[disabled] { opacity:0.45; cursor:not-allowed; }

/* Layout utilities. Two, and they exist so that a width or an alignment never has to be
   written as a contextual override of a component. */
.u-full { width:100%; }
.u-apart { margin-right:auto; }

/* Text input, textarea, select. One form each, all at the 44px floor. The field sits on the
   raised surface rather than on the canvas, so an empty field is visible before it is
   focused; focus is the cyan ring the whole product uses, and nothing else moves. */
.input { width:100%; min-height:44px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:11px 12px; color:var(--porcelain); font-size:13.5px; font-family:inherit; transition:border-color .15s; }
.input::placeholder { color:var(--ash); }
.input:hover { border-color:var(--line-2); }
textarea.input { resize:vertical; line-height:1.55; min-height:88px; }
select.input { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:32px; }
/* Two declared variants, both found by the Step 6 critique as contextual overrides and turned
   into variants here. --mono is a CONTENT decision: a URL is a value to be read character by
   character, and the mono face is the one the product already uses for every value. --dense is
   a SIZE, and it keeps the 44px floor: only the type and the padding come down, because a
   mapping grid puts five of these in a column and the row rhythm has to survive it. */
.input--mono { font-family:var(--font-mono); font-size:12.5px; }
.input--dense { font-size:12.5px; padding:9px 10px; }
/* A select with its native chrome removed and nothing put back is a text field that happens to
   open a menu, and nobody can tell which one it is. The chevron is drawn from the same ink as
   the placeholder rather than shipped as an image, so it costs no colour literal and no
   request, and it is on a WRAPPER because a select cannot carry a pseudo-element. */
.select { position:relative; display:block; }
.select::after { content:""; position:absolute; right:13px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1.5px solid var(--ash); border-bottom:1.5px solid var(--ash); transform:rotate(45deg); pointer-events:none; }
/* The brief title is typed where it will be read, so the control is the heading and the
   dashed rule is the only thing saying it can be edited. */
.input--title { min-width:180px; background:none; border:0; border-bottom:1px dashed var(--line-2); border-radius:0; padding:2px 0 6px; font-size:22px; font-weight:590; letter-spacing:-0.02em; }
.input--title:focus-visible { outline-offset:4px; }

/* Field label, and its two content forms: label alone, and label with a trailing link.
   Named .field-label and not .label, which is what it was called first: the pixel comparison
   of the seed screens at Step 5 caught the plain name colliding with the .label of the
   colour-proof bar, adding 6px to every one of the five screens. A flat kit shares one
   stylesheet with the chrome around it, so a component name has to be specific enough to
   survive that, and the name that pairs with .field and .field-err is the right one anyway. */
.field-label { display:block; font-size:12px; color:var(--ash); margin-bottom:6px; }
.field-label-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Status tag. One anatomy carrying one word of state, merged from the three classes the grey
   layer had for it (source status, brief status, draft marker). Normal is neutral, because a
   healthy source is not news. --alert is amber and dashed: a failed source must not read as a
   healthy one, and shape carries it as well as hue, so it survives without colour vision. */
.tag { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ash); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px 6px; white-space:nowrap; flex:none; }
.tag--alert { color:var(--amber); border-color:var(--amber-edge); border-style:dashed; background:var(--amber-wash); }

/* Citation marker, two behaviours. The static index is .cite above, on the public document.
   This is the linked chip that resolves into the evidence list on 4.0: same anatomy, and it
   takes the accent because a citation IS the trust surface (A2). */
.citechip { display:inline-flex; align-items:center; gap:4px; min-height:24px; padding:0 6px; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:10.5px; color:var(--cyan); background:var(--cyan-wash); border:1px solid var(--cyan-edge); text-decoration:none; white-space:nowrap; vertical-align:baseline; }
.citechip:hover { background:var(--cyan-edge); color:var(--canvas); }
/* A chip is an atomic inline, so a line could break between it and the sentence's full stop
   and open the next line with a period. Chip and punctuation travel together. */
.cited { white-space:nowrap; }

/* Icon slot. One shape at four sizes, all reading as a recessed square on the surface.
   The 44px state slot is .state-ic above, and it is the same object at the largest size. */
.iconslot { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); color:var(--ash); flex:none; }
.iconslot--row { width:34px; height:34px; border-radius:var(--r); }
.iconslot--row .ic { width:17px; height:17px; }
.iconslot--card { width:28px; height:28px; border-radius:var(--r-sm); }
.iconslot--card .ic { width:15px; height:15px; }

/* List group heading. Names a group inside a flush list (Connected, Available to connect,
   by source on the evidence list). Added at Step 5 when the first sample screen needed it:
   the Step 2 census counted it inside its screens and never gave it a row of its own, and it
   stands on 3.0, 3.4, 3.5 and 4.0. Mono and quiet: it labels, it does not announce. */
.group-t { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--ash); padding:16px 8px 6px; }
/* The same heading over a block instead of over a list, so it aligns with the block rather
   than with the rows. Two forms of one atom, not two atoms: identical anatomy, different
   neighbour. It is what the grey layer called .wf-evi-title, on 3.2 and 4.0. */
.group-t--section { padding:0; margin:24px 0 10px; }
/* The same heading inside a toolbar, where the toolbar owns the rhythm and the heading must
   add none of its own. Third declared form of one atom, and the last: list, block, toolbar. */
.group-t--inline { padding:0; margin:0; }

/* Drag handle, and the row-level remove. Both are grips, not decisions, so both stay ash. */
.drag { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:44px; color:var(--ash); font-size:13px; cursor:grab; flex:none; line-height:1; }
/* Every icon slot in this file sizes its own .ic, and this one was the gap: an svg with no
   width is 300x150 by specification, so the handle took 300px of a 316px row and pushed the
   whole composer off a 360 screen. Found in the browser at 360, not in the file. */
.drag .ic { width:15px; height:15px; }
.drag:active { cursor:grabbing; }

/* List row link: the whole row is the link. Used on 7.0 today, and the rollout needs it. */
.cardrow { display:block; padding:15px 8px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .12s var(--ease); }
.cardrow:hover { background:var(--surface); }

/* ---------- LEVEL 2, MOLECULES ---------- */

/* The title row of an artifact: the name is typed where it will be read, and the marker beside
   it says the artifact has not been shared yet. */
.titlerow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* A block inside a main that otherwise holds rows: it gets a rule above it rather than a card
   around it, because a card would claim it is a different kind of thing, and it is not. */
.block { padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }

/* Form field: label, control, and an optional error line under it. */
.field { display:block; margin-bottom:14px; }
.field-err { display:block; font-size:12px; color:var(--red); margin-top:6px; }

/* Notice band. Three tones, and the tone is the claim: information is neutral, warning is
   amber, error is red and reserved for a failure that blocks or destroys. A recoverable run
   failure is a warning, not an error, and that is why the sync error screen is amber. */
.notice { font-size:12.5px; line-height:1.6; color:var(--ash); background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--line-2); border-radius:var(--r); padding:12px 14px; margin:14px 0; }
.notice b { color:var(--porcelain); font-weight:500; }
.notice--warn { border-left-color:var(--amber); background:var(--amber-wash); }
.notice--error { border-left-color:var(--red); background:var(--red-wash); }
/* A notice in the screen frame rather than inside a padded main brings the gutter with it. */
.appframe > .notice { margin:14px 22px; }

/* Breadcrumb: the way back, one line, never the way forward. */
/* The bar carries no vertical padding of its own: the link inside it is the target and it is
   44px, so the bar is exactly as tall as the thing you aim at. Found by measuring, where the
   link read 15px against a floor of 44. */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ash); padding:0 22px; border-bottom:1px solid var(--line); }
.breadcrumb a { display:inline-flex; align-items:center; min-height:44px; color:var(--ash); text-decoration:none; }
.breadcrumb a:hover { color:var(--porcelain); }
.breadcrumb span { color:var(--ash); opacity:0.7; }

/* Evidence snippet, canonical, owner 4.0. The customer's words at reading size and in primary
   ink; everything about the words is secondary and set in mono. A5, and Voice principle 2. */
.snippet { display:block; padding:15px 8px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .12s var(--ease); }
.snippet:hover { background:var(--surface); }
.snippet-quote { font-size:13.5px; color:var(--porcelain); line-height:1.65; max-width:92ch; }
.snippet-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-family:var(--font-mono); font-size:11px; color:var(--ash); margin-top:8px; }
/* Redacted: PII is scrubbed by default and the product says so where it happened, rather
   than silently showing a gap. */
.redacted { font-family:var(--font-mono); font-size:11px; color:var(--ash); background:var(--elevated); border-radius:var(--r-sm); padding:0 5px; }

/* Source row, and the failed edition of it. The alert line under the row explains the state
   in words and offers the retry, because a tag alone says something is wrong and nothing
   about what to do (Voice: every state names the next move). */
.src-row { display:flex; align-items:center; gap:16px; padding:14px 8px; border-bottom:1px solid var(--line); flex-wrap:wrap; transition:background .12s var(--ease); }
.src-row:hover { background:var(--surface); }
.src-main { flex:1 1 150px; min-width:0; }
.src-name { display:block; font-size:14px; font-weight:500; color:var(--porcelain); }
.src-sub { display:block; font-family:var(--font-mono); font-size:11px; color:var(--ash); margin-top:4px; }
.src-stats { display:flex; gap:22px; flex-wrap:wrap; }
.src-stat { display:flex; flex-direction:column; gap:3px; }
.src-stat-l { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ash); }
.src-stat-v { font-family:var(--font-mono); font-size:12.5px; color:var(--porcelain); }
.src-rowactions { display:flex; gap:8px; flex:none; align-items:center; }
.rowalert { display:block; font-size:12px; color:var(--ash); margin-top:8px; padding-left:10px; border-left:2px solid var(--amber); }

/* Source card: what is available but not connected yet. An unavailable one says so on its
   face rather than being hidden, because a missing integration the PM cannot see is a
   question to support. */
.src-avail { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; padding:6px 8px 16px; }
.src-card { display:flex; flex-direction:column; gap:9px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:15px; }
.src-card-name { font-size:13.5px; font-weight:500; color:var(--porcelain); }
.src-card-d { flex:1; font-size:12.5px; color:var(--ash); line-height:1.55; }
.src-card-note { font-family:var(--font-mono); font-size:11px; color:var(--ash); }

/* Saved brief row (6.0). A managed object: it has a status and one way in. Deliberately not
   a variant of the composer row, which has a handle and a remove and no status. */
.brief-row { display:flex; align-items:center; gap:12px; padding:14px 8px; border-bottom:1px solid var(--line); transition:background .12s var(--ease); }
.brief-row:hover { background:var(--surface); }
.brief-main { position:relative; flex:1; min-width:0; }
.brief-title { display:block; font-size:14px; font-weight:500; color:var(--porcelain); text-decoration:none; }
.brief-title:hover { text-decoration:underline; }
/* the title reads at its own size and is hit across the row's title zone. The overlay is
   -12px and not the grey layer's -11px: at this type size -11 lands the target on 43px, one
   pixel under the floor, which is exactly the kind of miss a kit exists to stop inheriting. */
.brief-title::after { content:""; position:absolute; inset:-12px 0; }
.brief-meta { font-size:12px; color:var(--ash); margin-top:4px; line-height:1.5; }
.brief-actions { display:flex; gap:8px; flex:none; }

/* Composer brief row (6.1). The ORDER of these rows is the recommendation, so the handle is
   the point of the component and it comes first. */
.briefrow { display:flex; align-items:center; gap:12px; padding:12px 8px; border-bottom:1px solid var(--line); }
.briefrow-main { flex:1; min-width:0; }
.briefrow-label { display:block; font-size:13.5px; font-weight:500; color:var(--porcelain); }
.briefrow-meta { display:block; font-family:var(--font-mono); font-size:11px; color:var(--ash); margin-top:3px; }

/* Account row, and its checkbox form, where the whole row is the label. */
.acct-row { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.acct-row-main { flex:1; min-width:0; }
.acct-row-t { display:block; font-size:13.5px; font-weight:500; color:var(--porcelain); }
.acct-row-d { display:block; font-size:12.5px; color:var(--ash); margin-top:4px; line-height:1.55; }
label.acct-row { cursor:pointer; }

/* Auth card, and its two other content forms: the value card beside the form, and the
   confirmation after a reset was sent. */
.auth-wrap { max-width:400px; margin:34px auto; }
.auth-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.auth-card + .auth-card { margin-top:16px; }
.auth-h2 { font-size:17px; font-weight:590; letter-spacing:-0.015em; color:var(--porcelain); margin-bottom:5px; }
.auth-step { display:block; font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ash); margin-bottom:8px; }
.auth-value { font-size:12.5px; color:var(--ash); line-height:1.6; margin:4px 0 18px; }
.auth-or { display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--ash); margin:16px 0; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-switch { font-size:12.5px; color:var(--ash); text-align:center; margin-top:20px; }
.auth-sent { font-size:12.5px; color:var(--ash); line-height:1.6; background:var(--canvas); border:1px solid var(--line); border-radius:var(--r); padding:14px; }

/* Legal table of contents: a wrapping link list in a box, so a long document is navigable
   from its head without a rail. */
.legal-toc { margin:18px 0 10px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.legal-toc-t { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--ash); margin-bottom:6px; }
.legal-toc ul { list-style:none; display:flex; flex-wrap:wrap; column-gap:20px; }
.legal-toc a { display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; color:var(--ash); text-decoration:none; }
.legal-toc a:hover { color:var(--porcelain); }

/* Marketing step card, on 0.0: the numbered circle, the promise, and a real confidence
   indicator as the proof. The product's own component is the evidence for the claim. */
.mk-step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.mk-step-n { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); font-family:var(--font-mono); font-size:12px; color:var(--ash); }
.mk-step-t { font-size:15px; font-weight:590; letter-spacing:-0.015em; color:var(--porcelain); margin:14px 0 6px; }
.mk-step-d { font-size:13px; color:var(--ash); line-height:1.6; }

/* Marketing tier card, one per plan. The price is the number, so it is set in mono. */
.tier { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.tier-name { font-size:14px; font-weight:590; color:var(--porcelain); }
.tier-price { font-family:var(--font-mono); font-size:22px; font-weight:500; color:var(--porcelain); margin:10px 0 2px; }
.tier-unit { font-family:var(--font-mono); font-size:11px; color:var(--ash); }
.tier-feat { list-style:none; display:grid; gap:8px; margin-top:14px; }
.tier-feat li { position:relative; padding-left:15px; font-size:12.5px; color:var(--ash); line-height:1.5; }
.tier-feat li::before { content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:1px; background:var(--line-2); }

/* ---------- LEVEL 3, ORGANISMS ---------- */

/* The screen shell. A product screen fills its canvas: header, main, footer, bottom tabs,
   nothing around it. .appframe above is the same organism with a border, a radius and a
   shadow, and it is for a STAND (the kit, the concept) where a screen is an exhibit. A screen
   that is the page uses .app, so it is a screen and not a picture of one. */
.app { display:flex; flex-direction:column; min-height:100vh; background:var(--canvas); color:var(--porcelain); }
.app > .appmain { flex:1; }
.app > .notice { margin:14px 22px; }
.app:has(.check:checked) .selbar { display:flex; }
.app:has(.check:checked) .head-action { display:none; }
/* A state block that IS the screen is centred in the canvas. :only-child is load-bearing:
   an empty state that became a group inside a populated screen would otherwise lay the whole
   main out as a flex row. Same clause the grey contract carries, for the same reason. */
.appmain:has(> .state:only-child) { display:flex; align-items:center; justify-content:center; }

/* Form. Four purposes (auth, connect, settings, composer), one appearance. It declares
   nothing but rhythm: the fields, the labels and the buttons are already components. */
.form { display:block; }
.form .field:last-of-type { margin-bottom:18px; }

/* Dialog. It floats, so it is the one surface besides the frame that carries the shadow, and
   it takes the frame's radius so the two read as the same material. A destructive action is
   held apart by .u-apart and never sits beside the primary one. */
.dialog { width:100%; max-width:460px; background:var(--elevated); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:24px; }
.dialog h1 { font-size:17px; font-weight:590; letter-spacing:-0.015em; color:var(--porcelain); margin-bottom:7px; }
.dialog p { font-size:12.5px; color:var(--ash); line-height:1.6; margin-bottom:16px; }
.dialog-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.appmain:has(> .dialog:only-child) { display:flex; align-items:center; justify-content:center; }

/* Legal document. A reading column at document scale, not app scale: 15px body, 1.75 line,
   and headings that open with a rule so a scanned page still has structure. */
.legal-crumb { font-size:12px; color:var(--ash); margin-bottom:18px; }
.legal-crumb a { color:var(--ash); text-decoration:none; }
.legal-crumb a:hover { color:var(--porcelain); }
.legal-meta { font-family:var(--font-mono); font-size:11px; color:var(--ash); margin-top:8px; }
.legal-prose { font-size:14.5px; line-height:1.75; color:var(--ash); }
.legal-prose h2 { font-size:17px; font-weight:590; letter-spacing:-0.015em; color:var(--porcelain); margin:30px 0 10px; padding-top:20px; border-top:1px solid var(--line); scroll-margin-top:64px; }
.legal-prose p { margin:0 0 12px; }
.legal-prose ul { margin:6px 0 14px; padding-left:20px; }
.legal-prose li { margin-bottom:7px; }
.legal-prose a { color:var(--porcelain); }
.legal-related { margin-top:30px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ash); }
.legal-related a { display:inline-flex; align-items:center; min-height:44px; margin-right:18px; color:var(--porcelain); text-decoration:none; }
.legal-related a:hover { text-decoration:underline; }

/* Account shell. Four screens share it. The nav sits above the panel below 600px, which is
   why it is a column first and a row only when there is room. */
.acct-layout { display:flex; flex-direction:column; gap:18px; }
.acct-nav { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:6px; }
.acct-nav-home { display:flex; align-items:center; min-height:44px; padding:4px 10px; font-size:12px; font-weight:590; letter-spacing:0.04em; text-transform:uppercase; color:var(--porcelain); text-decoration:none; }
.acct-nav-link { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px; border-radius:var(--r-sm); border-left:2px solid transparent; font-size:13.5px; color:var(--ash); text-decoration:none; transition:color .15s,background .12s var(--ease); }
.acct-nav-link:hover { color:var(--porcelain); background:var(--canvas); }
.acct-nav-link.is-current { color:var(--porcelain); background:var(--canvas); border-left-color:var(--cyan); }
.acct-panel { flex:1; min-width:0; }
.acct-id { display:flex; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.acct-id-avatar { width:40px; height:40px; border-radius:50%; background:var(--elevated); border:1px solid var(--line); flex:none; }
.acct-id-name { font-size:14.5px; font-weight:590; color:var(--porcelain); }
.acct-id-meta { font-size:12.5px; color:var(--ash); margin-top:3px; }
.acct-section-t { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--ash); margin:22px 0 6px; }
.acct-section-t:first-child { margin-top:0; }
/* the card title and its one line, inside a whole-row link on the account hub */
.acct-card-t { display:block; font-size:13.5px; font-weight:500; color:var(--porcelain); }
.acct-card-d { display:block; font-size:12.5px; color:var(--ash); margin-top:4px; line-height:1.55; }
/* one closing line pointing out of the settings and into the document that explains them */
.acct-seclink { font-size:12.5px; color:var(--ash); margin-top:18px; }

/* Marketing page shell (0.0). The only place in the product that is read by somebody who has
   not signed in, so it is the one screen with a wider measure and a larger first line. */
.mk-hero { padding:30px 0 32px; border-bottom:1px solid var(--line); }
.mk-h1 { font-size:36px; line-height:1.15; font-weight:590; letter-spacing:-0.025em; color:var(--porcelain); max-width:20ch; }
.mk-lead { font-size:16px; line-height:1.65; color:var(--ash); margin-top:16px; max-width:58ch; }
.mk-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.mk-note { font-family:var(--font-mono); font-size:11px; color:var(--ash); margin-top:14px; }
.mk-section { padding:32px 0; border-bottom:1px solid var(--line); }
.mk-h2 { font-size:22px; font-weight:590; letter-spacing:-0.02em; color:var(--porcelain); }
.mk-section-sub { font-size:13.5px; color:var(--ash); margin-top:7px; max-width:60ch; line-height:1.6; }
.mk-grid { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:20px; }
/* The public document at marketing measure. The reading column of a shared brief is 720px
   because it is prose; a landing page carries rows of cards and needs more room. */
.public-main--wide { max-width:1040px; }

/* An empty group inside a screen that is otherwise populated: it sits in the flow of the
   list, left aligned, because the next action is further down the screen and not in here. */
.state--inline { max-width:none; margin:0; text-align:left; align-items:flex-start; padding:22px 8px 24px; border-bottom:1px solid var(--line); }
.state--inline .state-d { max-width:60ch; }
.state--inline .state-actions { justify-content:flex-start; }

/* =====================================================================
   ONE-OFF BLOCKS. Declared here because the kit is the only stylesheet a screen may use, and
   classified as one-off in design/kit/docs/inventory.md so that Stage 08 does not promote them into
   components. One occurrence, no form-control exception, no canonical status. A second
   occurrence turns any of them into a component, and that is a decision made out loud.
   ===================================================================== */

/* 0.0 Home: the trust list. One screen, and it is a list of claims rather than a grid of
   cards, because each item is a sentence the visitor either believes or does not. A rule above
   each one instead of a box around it: the claim is the object, not the container. */
.mk-trust { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 24px; margin-top:20px; }
.mk-trust-item { padding-top:14px; border-top:2px solid var(--line-2); }
.mk-trust-t { font-size:14px; font-weight:590; letter-spacing:-0.01em; color:var(--porcelain); margin-bottom:7px; }
.mk-trust-t a { display:inline-flex; align-items:center; min-height:44px; color:var(--porcelain); text-decoration:none; }
.mk-trust-t a:hover { text-decoration:underline; }
.mk-trust-d { font-size:13px; color:var(--ash); line-height:1.65; }

/* 0.0 Home: the marketing footer. The app footer is the component; this is the one screen that
   needs a link block under it, and it composes with .appfoot rather than replacing it. */
.mk-footer { display:flex; flex-wrap:wrap; gap:24px 48px; align-items:flex-start; padding:28px 22px 32px; font-family:var(--font-ui); font-size:13px; }
.mk-foot-brand { display:flex; flex-direction:column; gap:10px; min-width:200px; flex:1; }
.mk-foot-tag { font-size:12.5px; color:var(--ash); max-width:30ch; line-height:1.55; }
.mk-foot-cols { display:flex; gap:48px; flex-wrap:wrap; }
.mk-foot-col { display:flex; flex-direction:column; }
.mk-foot-h { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ash); }
.mk-foot-col a { display:flex; align-items:center; min-height:44px; font-size:12.5px; color:var(--ash); text-decoration:none; }
.mk-foot-col a:hover { color:var(--porcelain); }
.mk-foot-legal { flex-basis:100%; font-family:var(--font-mono); font-size:11px; color:var(--ash); border-top:1px solid var(--line); padding-top:18px; }

/* 6.3 Share-link: the row that holds the value and the one control that copies it. One screen,
   and the only place in the product where a value is copied rather than read. */
.linkrow { display:flex; gap:8px; margin-bottom:14px; }


/* 4.0 Theme detail: why these items are one theme. One screen, and it exists because
   clustering that is asserted rather than explained is exactly what the product promises not to
   do. It also names what was LEFT OUT, which is the half that makes the explanation checkable. */
.reason { font-size:13px; line-height:1.7; color:var(--ash); border-left:2px solid var(--line-2); padding-left:14px; margin-top:18px; max-width:88ch; }
.reason b { color:var(--porcelain); font-weight:500; }

/* 4.1: the line that closes a list with no "load more". An unterminated list reads as
   truncated, and on a thin theme "all of it is here" is the whole point. */
.listnote { font-size:12.5px; color:var(--ash); line-height:1.6; padding:13px 8px; border-bottom:1px solid var(--line); }

/* 3.2 CSV upload: the drop zone. Dashed, because dashed is what the whole product uses for
   "nothing here yet, and something goes here". */
.src-drop { border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface); padding:26px 20px; text-align:center; margin:6px 0 12px; }
.src-drop .iconslot { margin:0 auto 14px; }
.src-drop-t { font-size:14px; font-weight:500; color:var(--porcelain); }
.src-drop-d { font-size:12.5px; color:var(--ash); margin:5px 0 16px; }
.src-file { font-family:var(--font-mono); font-size:12px; color:var(--ash); margin-bottom:16px; }
.src-file b { color:var(--porcelain); font-weight:500; }

/* 3.2 CSV column mapping. Four columns, and the SAMPLE is the point: a mapping screen without
   the customer's own data on it is a form that has to be trusted rather than checked. */
.src-map-head, .src-map-row { display:grid; grid-template-columns:1fr 1.3fr 1fr 66px; gap:14px; align-items:center; }
.src-map-head { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ash); padding-bottom:8px; border-bottom:1px solid var(--line); }
.src-map-row { padding:11px 0; border-bottom:1px solid var(--line); }
.src-map-col { font-family:var(--font-mono); font-size:12.5px; color:var(--porcelain); }
.src-sample { font-family:var(--font-mono); font-size:11.5px; color:var(--ash); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.src-inc { display:flex; justify-content:center; }


/* 3.2 CSV review summary. The count, and the two facts about privacy that the default makes
   true, said before the import rather than in a settings screen afterwards. */
.src-review { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:16px 18px; margin-top:20px; }
.src-review h2 { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--ash); margin-bottom:10px; }
.src-review ul { list-style:none; display:grid; gap:2px; }
.src-review li { display:flex; align-items:baseline; gap:14px; padding:7px 0; font-size:13px; color:var(--ash); border-bottom:1px solid var(--line); }
.src-review li:last-child { border-bottom:0; }
.src-review b { margin-left:auto; font-family:var(--font-mono); font-weight:500; color:var(--porcelain); white-space:nowrap; }

@media (max-width:820px) {
  .page { padding:16px 14px 60px; }
  .nav-links { display:none; }
  .toolbar-full { display:none; }
  .toolbar-compact { display:flex; align-items:center; gap:8px; margin-left:0; }
  .navtabs { display:none; }
  .bottomtabs { display:flex; position:sticky; bottom:0; border-top:1px solid var(--line); background:var(--surface); }
  /* At 360 the confidence pill would squeeze the theme label to three lines, so it takes its
     own row under the body, exactly as the grey contract does. */
  .public-main { padding:22px 16px 34px; }
  .pub-h1 { font-size:24px; }
  .pub-theme h3 .conf, .pub-key .conf { margin-left:0; }
  .theme { grid-template-columns:20px 18px minmax(0,1fr) 18px; grid-template-areas:"check rank main drill" ". . conf conf"; gap:8px 10px; }
  .theme .check { grid-area:check; }
  .theme .rank { grid-area:rank; }
  .theme-main { grid-area:main; }
  .theme .conf { grid-area:conf; justify-content:flex-start; }
  .theme-drill { grid-area:drill; }
  .theme-quote { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .head-action { width:100%; justify-content:center; }
}

/* new components at 360: the same rule the whole file follows, which is that a row becomes a
   stack only where the row would otherwise cut a value in half */
@media (max-width:820px) {
  .src-row { gap:12px; }
  .src-stats { gap:16px; width:100%; }
  .src-rowactions { width:100%; }
  .src-rowactions .btn--ghost, .src-rowactions .btn { flex:1; }
  .brief-row { flex-wrap:wrap; }
  .brief-actions { width:100%; }
  .brief-actions .btn--ghost, .brief-actions .btn { flex:1; }
  .mk-h1 { font-size:27px; }
  .mk-footer { padding:24px 16px 28px; gap:20px 24px; }
  .mk-foot-cols { gap:28px; }
  .mk-lead { font-size:14.5px; }
  .appframe > .notice, .app > .notice { margin:14px 16px; }
  .group-t { padding:14px 16px 6px; }
  /* At 360 the action bar's note and its two buttons squeeze into three narrow columns and
     every one of them wraps. The note takes its own line and the buttons share the next.
     This is LAYOUT on the bar's own children, not an undeclared variant of the button: no
     size, colour or weight is touched, and .u-full stays the utility for a single button. */
  .selbar--static { padding:14px 16px; }
  .selbar--static > a { flex:1; }
  .actionbar { flex-wrap:wrap; }
  .actionbar-note { width:100%; margin-right:0; margin-bottom:2px; }
  .actionbar > a, .actionbar > button { flex:1; }
  .group-t--section, .group-t--inline { padding:0; }
  .listnote { padding:13px 16px; }
  .head-meta { gap:10px; }
  /* At 360 four columns would cut every value in half, so the row becomes two: the column and
     its field on one line, the customer's own sample on its own. Reading order is unchanged. */
  .src-map-head { display:none; }
  .src-map-row { grid-template-columns:1fr auto; gap:8px 12px; padding:13px 0; }
  .src-sample { grid-column:1 / -1; white-space:normal; }
  .src-map-row .input { grid-column:1; }
  .breadcrumb { padding:0 16px; }
  .legal-prose { font-size:14px; }
}

/* The account shell is a column first and a row only when there is room. The grey layer
   states this as a container query on the canvas; the colour layer has no container declared
   anywhere, so the whole file states its widths as media queries and this one follows suit.
   A @container rule here would silently never fire. */
@media (min-width:821px) {
  .acct-layout { flex-direction:row; align-items:flex-start; }
  .acct-nav { width:208px; flex:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto; animation:none !important; }
  .skel { background-position:0 0; }
}