/* The design language of the "Everyday console" artifact, carried across as
   tokens and the primitives the three shipped screens use.

   Two deliberate departures from the artifact. Its .screen is a fixed 1280px
   mockup frame with a drop shadow; here the app is the page, so the frame's
   typography moves to :root and the frame itself is gone. And its inputs,
   buttons and selects are <span>s -- a mockup has nothing to type into -- so
   the same class names are reset onto real form controls below, which is the
   only way a screenshot and a working page can look alike.

   The palette is no longer that artifact's. It comes from the later "Design"
   study -- the one with the dark bar and the bracketed leaf -- and the layout
   below is unchanged by it: this was a recolour, not a redraw. */

/* Every value here is sampled rather than chosen: the flat areas of the
   study's pages were counted and the modal colour of each taken, so a token is
   the colour the design actually paints and not an eye-match to it. The
   palette is warm all the way down -- the neutrals are browns, not greys, and
   one green carries every accent. */
:root {
  color-scheme: light;

  --bg: #fbf7ec;
  --surface: #fefdf8;
  --fill: #f5efdf;
  --fill-2: #e8e0cd;
  --ink: #2b2519;
  --ink-2: #4c4433;
  /* The one value not taken from the artifact. Its secondary text is #8e9078,
     which is 3.2:1 on --surface and 2.9:1 on --fill -- under AA at the 12.5px
     this token is mostly used at, and it is used at it in 48 places. Darkened
     along its own hue until the worst of the three backgrounds clears 4.5:1;
     the artifact's olive survives, its contrast does not. */
  --muted: #6a6c5a;
  --faint: #b4b09a;
  --line: #e5e0d1;
  --line-2: #efeade;
  --accent: #22734a;
  /* The artifact fills with the same green it draws lines and labels in --
     the two tokens stay distinct because the distinction is real, not because
     this palette needs two greens for it. */
  --accent-fill: var(--accent);
  --accent-soft: #e3efe5;
  --accent-tint: #cee3d2;
  --accent-ink: #1b5f3e;
  --on-accent: #f6f2e6;
  --better: #3b467b;
  --better-soft: #eaeaf4;
  --worse: #b5442c;
  --worse-soft: #f6e0d6;
  --worse-tint: #fbf0ea;
  --gate: #946511;
  --gate-soft: #f4e7c9;
  --shadow: rgba(58, 39, 25, .18);
  --edge: rgba(58, 39, 25, .10);
  --brand-mint: #22734a;

  /* The chrome is dark and the page is not, so the bar carries its own small
     palette: the tokens above are all read against cream and none of them
     survives being put on brown. */
  --chrome: #3a2719;
  --chrome-fill: #1e3024;
  --on-chrome: #f4eede;
  --chrome-muted: #ada090;
  --chrome-mint: #77c593;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
}

code, .mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
a { color: inherit; }

/* Anything that navigates or submits is a real button or anchor, so it is
   reachable by keyboard and announced as what it is. .lnk is the look. */
.lnk {
  color: var(--accent-ink); font-weight: 650; background: none; border: 0;
  padding: 0; font-size: inherit; font-family: inherit; cursor: pointer;
  text-decoration: none;
}
.lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.lnk.danger { color: var(--worse); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 650 13.5px/1 var(--ui); padding: 9px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  white-space: nowrap; cursor: pointer;
}
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn.danger { border-color: var(--worse-soft); color: var(--worse); background: var(--worse-tint); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.inp {
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
  font: 12.5px/1.45 var(--ui); background: var(--surface); color: var(--ink);
  width: 100%; min-width: 0;
}
.inp::placeholder { color: var(--faint); }

/* An invite code is six characters typed once, so it is set wide and in the
   mono face: transposing two of them is the whole failure mode, and the
   proportional face makes it easier to. */
.codeinp { font-family: var(--mono); letter-spacing: .28em; text-transform: uppercase; }

.select {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 11px; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); background: var(--surface);
  font: 650 14px/1.45 var(--ui); cursor: pointer;
}
.select.slim { padding: 3px 8px 3px 10px; font-size: 12.5px; }

.fieldset { display: flex; flex-direction: column; gap: 5px; }
.fieldset label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fieldset .inp { font-size: 14px; padding: 8px 11px; }

.caret { width: 9px; height: 9px; flex: none; }
.caret path { stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ------------------------------------------------------------------ brand */

/* The brackets are currentColor and the leaf is --brand-mint, so the mark
   needs no variant per background: putting it somewhere with a different text
   colour recolours the brackets, and the one override below -- the bar, which
   is the only dark surface -- recolours the leaf and the wordmark together. */
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; text-decoration: none; }
.brand svg { width: 1.16em; height: 1.22em; flex: none; }
.brand .bm-bracket { fill: none; stroke: currentColor; stroke-width: 2.4; }
.brand .bm-leaf { fill: var(--brand-mint); }
.brand .mint { color: var(--brand-mint); }
.app-bar .brand { --brand-mint: var(--chrome-mint); }

/* ------------------------------------------------------- shared furniture */

.rel { position: relative; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.card-h {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2); min-height: 50px;
}
.card-h .t { font-weight: 700; font-size: 14.5px; }
.card-h .sub { font-size: 12.5px; color: var(--muted); }

.cols { display: grid; gap: 22px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.fine b { color: var(--ink-2); }


.refuse { padding: 10px 12px; background: var(--worse-soft); color: var(--worse); border-radius: 7px; font-size: 13px; line-height: 1.5; }
.refuse b { font-weight: 700; }
.refuse .ok { color: var(--ink-2); display: block; margin-top: 4px; }

.runbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line-2); }
.runbar .why { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }

.basetag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}

/* ------------------------------------------------------------ sheet A: sign in */

.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-brand { background: var(--accent-soft); padding: 40px 48px; display: flex; flex-direction: column; gap: 28px; }
.auth-brand .brand { font-size: 17px; }
.claim { font-size: 34px; line-height: 1.12; font-weight: 750; letter-spacing: -.02em; max-width: 17ch; margin: 18px 0 0; color: var(--ink); text-wrap: balance; }
.claim-sub { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; margin: 0; }

.figcard {
  margin-top: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; max-width: 420px;
  box-shadow: 0 18px 40px -26px var(--shadow);
}
.figcard .k { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.figcard .big { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.figcard .big b { font-size: 40px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.figcard svg { width: 100%; height: 30px; display: block; margin: 8px 0 4px; }
.figcard .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.figcard .facts b { font-weight: 700; color: var(--ink); }

.vp { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.vp.better { background: var(--better-soft); color: var(--better); }

.auth-form { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 40px; border-left: 1px solid var(--line-2); }
.signin { width: 380px; display: flex; flex-direction: column; gap: 16px; }
.signin h1 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.015em; }
.signin .lead { margin: -8px 0 4px; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* The provider hand-off. Deliberately unbranded: which methods the sign-in
   page offers is configuration at the identity provider, so a mark for any one
   of them would be wrong the moment another is enabled. */
.pbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 13px 16px; border: 1px solid var(--accent-fill); border-radius: 10px;
  background: var(--accent-fill); font: 700 15px/1 var(--ui); color: var(--on-accent);
  box-shadow: 0 1px 2px var(--edge); cursor: pointer; text-decoration: none;
}
.pbtn:hover { opacity: .92; }

.cli { font-family: var(--mono); font-size: 12.5px; background: var(--fill); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; color: var(--ink); }
.cli .muted { font-family: var(--ui); }
.legal { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line-2); }

/* -------------------------------------------- sheets B1/B2: create a workspace */

.reg { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.rail { padding: 22px 20px; background: var(--fill); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.rail .brand { margin-bottom: 22px; }
.rstep { display: grid; grid-template-columns: 24px 1fr; gap: 1px 10px; padding: 9px 0; align-items: center; }
.rstep .sn {
  grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted);
}
/* Reached and current are the same filled green, and only what is still ahead
   is an outline -- which is the artifact's stepper, where every circle up to
   and including the current step is solid. The current step is told apart by
   its label below, not by its circle. */
.rstep.done .sn { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.rstep.now .sn { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.rstep .sk { font-size: 13.5px; font-weight: 700; }
.rstep.now .sk { color: var(--accent-ink); }
.rstep .sv { font-size: 12px; color: var(--muted); }
.rstep.skip .sk { color: var(--muted); font-weight: 500; }
.rail .who { margin-top: auto; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; line-height: 1.45; }

.reg-main { padding: 26px 34px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.reg-main h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.015em; }
.reg-main .lead { margin: -10px 0 0; font-size: 14px; color: var(--muted); }
.planhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.joinalt {
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2);
  padding: 11px 14px; border: 1.5px dashed var(--line); border-radius: 10px;
}
.joinalt code { background: var(--fill-2); padding: 1px 6px; border-radius: 4px; }

/* auto-fit, not the artifact's fixed four columns: the grid is however many
   rows limits.Tiers holds, four today, and a fixed count goes wrong the day
   one is added or removed. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* Each plan is a real radio: the artifact's .rd circle is the radio itself,
   drawn with the same geometry, so clicking the card and tabbing between plans
   both work without a click handler pretending to be one. */
.plan {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 10px;
  margin: 0; cursor: pointer;
}
.plan.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.plan.unavailable { cursor: default; opacity: .62; }
.plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-h { display: flex; align-items: center; gap: 8px; }
.plan-h .rd {
  width: 15px; height: 15px; border-radius: 50%; flex: none; margin: 0;
  appearance: none; box-shadow: inset 0 0 0 1.5px var(--faint); cursor: inherit;
}
.plan-h .rd:checked { box-shadow: inset 0 0 0 4.5px var(--accent); }
.plan-h b { font-size: 16px; font-weight: 750; }
/* A plan that exists and cannot be chosen yet. A pill rather than the card
   tag's bare caps, so it reads as a state of the plan rather than a property. */
.plan-h .soon-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.plan-h .card-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.plan li { display: grid; grid-template-columns: 12px 1fr; gap: 6px; }
.plan li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); margin-top: 6px; }
.plan li.exp::before { background: var(--gate); }
.plan .foot { margin-top: auto; font-size: 12px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line-2); }

.payers-note { font-size: 13px; color: var(--ink-2); line-height: 1.5; padding: 11px 14px; background: var(--fill); border-radius: 10px; }
.reg-foot { display: flex; align-items: center; gap: 14px; }
.reg-foot .fine { margin-right: auto; }

/* ------------------------------------------------ sheet C: manage the workspace */

/* The bar is the one dark surface in the console, which is what makes it read
   as chrome rather than as the first card on the page. Everything inside it
   therefore takes its colour from the --chrome-* tokens: --muted and --line are
   tuned against cream and vanish against brown. */
.app-bar {
  display: flex; align-items: center; gap: 22px; height: 54px; padding: 0 20px;
  background: var(--chrome); color: var(--on-chrome);
}
.ws {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
  border-radius: 999px; background: var(--chrome-fill); font: 13px/1.45 var(--ui);
  color: var(--on-chrome); border: 0; cursor: pointer;
}
/* **The tab row is what gives way when the bar runs out of room**, at every
   width rather than below a breakpoint. A flex item's default `min-width:auto`
   refuses to shrink below its content, so without this the bar makes the whole
   document wider than the screen -- which costs more than a sideways scroll:
   every `position: fixed` scrim in this console centres itself in the layout
   viewport, so a modal opened on a narrow screen lands off to the right.
   A breakpoint could not do this job, because the width the bar needs depends
   on how long the workspace is called. */
.wf {
  display: flex; align-self: stretch;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.wf::-webkit-scrollbar { display: none; }
.wf a { display: flex; align-items: center; padding: 0 13px; color: var(--chrome-muted); font-size: 14px; border-bottom: 2px solid transparent; text-decoration: none; }
.wf a:hover { color: var(--on-chrome); }
.wf a.on { color: var(--on-chrome); font-weight: 700; border-bottom-color: var(--chrome-mint); }
/* Stretched, not because anything in it is full height -- the contents stay
   centred -- but so the account menu nested in it can measure 100% against the
   bar rather than against the avatar. */
.bar-r { margin-left: auto; align-self: stretch; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--chrome-muted); }
/* **The bar must not make the page wider than the screen.** A flex item's
   default `min-width: auto` refuses to shrink below its content, so at phone
   width the five tabs and the right-hand cluster pushed the document to 730px
   -- which cost more than a sideways scroll: every `position: fixed` scrim in
   this console centres itself in the *layout* viewport, so a modal opened on a
   phone landed off-screen to the right. The tabs scroll within the bar
   instead, and what can be spared is dropped.

   The tabs and not something else, because they are the part somebody can
   still reach by swiping; hiding them would remove the navigation this bar
   exists for. */
@media (max-width: 760px) {
  .bar-email { display: none; }
  /* The plan goes too: it is a fact about the workspace, and the Manage screen
     is where somebody reads it. The workspace name stays, because "which
     workspace am I in" is the one thing the bar must never stop answering. */
  .bar-plan { display: none; }
  /* **The tabs take a row of their own.** Squeezed onto one line they were
     left 78px of 375 -- the mark and the workspace name take 210 between them
     -- which is one tab and a sliver, scrollable but not navigable. On their
     own line they get the full width, and `order` is what puts them there:
     the account cluster is pulled ahead of them so it stays on the first row
     rather than being carried down to a third. */
  .app-bar { gap: 10px 12px; padding: 6px 12px; height: auto; flex-wrap: wrap; }
  .bar-r { order: 1; flex: none; }
  .wf { order: 2; flex-basis: 100%; }
  /* Still scrollable, because five tabs at a readable size outrun a narrow
     phone; a thumb swipes them. */
  .wf a { padding: 0 12px; height: 34px; white-space: nowrap; }
  /* The mark is a fixed point; the workspace name truncates rather than
     pushing the account off the row. */
  .app-bar .brand { flex: none; }
  .ws { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
}
/* A real button, because it opens the account menu. The artifact draws it as a
   plain circle, so the reset is what keeps it looking like one. */
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--chrome-fill);
  color: var(--chrome-mint); display: grid; place-items: center;
  font: 700 12px/1 var(--ui); border: 0; padding: 0; cursor: pointer;
}
.avatar:hover { box-shadow: inset 0 0 0 1.5px var(--chrome-mint); }

/* The page's focus ring is the deep green, which is all but invisible on the
   bar's brown. Inside the chrome the mint is the only ring that shows. */
.app-bar :focus-visible { outline-color: var(--chrome-mint); }

/* Both menus hang off the bar, so they are measured from its bottom edge and
   not by a fixed offset from their trigger. The trigger is centred in the bar,
   so an offset from it put the panel's top few pixels on the chrome -- which
   nothing showed while the chrome was cream and the panel is cream, and which
   is a sliver of panel sitting on brown now that it is not. */
.app-bar .rel { align-self: stretch; display: flex; align-items: center; }
.wsmenu {
  position: absolute; z-index: 6; top: calc(100% + 6px); width: 250px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -14px var(--shadow); padding: 6px;
}
.wsi {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 8px 10px;
  border-radius: 7px; font: 13px/1.45 var(--ui); background: none; border: 0;
  width: 100%; text-align: left; cursor: pointer; color: var(--ink);
}
.wsi:hover { background: var(--fill); }
.wsi.on { background: var(--accent-soft); }
.wsi b { font-weight: 700; }
.wsi .role { font-size: 11px; color: var(--muted); }

/* The account menu hangs off the right edge of the bar rather than the left,
   because its trigger is the last thing in it and a left-aligned panel would
   run off the viewport. */
.acctmenu { right: 0; width: 220px; }
.acct-who {
  padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px;
  font-size: 12px; color: var(--muted); line-height: 1.4; word-break: break-all;
}
.acct-who b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.acctmenu form { margin: 0; }
.acct-out { color: var(--worse); }
.acct-out:hover { background: var(--worse-tint); }

.app-main { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 16px; max-width: 1344px; }
.headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.crumbs { font-size: 12.5px; color: var(--muted); }
.crumbs b { color: var(--ink-2); font-weight: 500; }
.title { font-size: 25px; font-weight: 750; letter-spacing: -.015em; margin: 1px 0 0; line-height: 1.2; }

.it { width: 100%; border-collapse: collapse; }
.it th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 9px 8px 7px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.it td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.it td:first-child, .it th:first-child { padding-left: 14px; }
.it td:last-child, .it th:last-child { padding-right: 14px; }
.it .tk { color: var(--ink-2); line-height: 1.35; }
.it .sm { display: block; font-size: 11px; color: var(--muted); }
.it .r { text-align: right; white-space: nowrap; }
.it-foot { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 12.5px; color: var(--muted); }


.rec-grid { display: grid; grid-template-columns: 110px 1fr; }
.rec-grid > div { padding: 10px 14px; border-top: 1px solid var(--line-2); }
.rec-grid > div:nth-child(-n+2) { border-top: 0; }
.rf-name { font-weight: 700; font-size: 13px; }
.rf-val { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* ----------------------------------------------------------------- datasets */

/* The two modes of one control, not two pages: uploading a file and typing
   records end in the same sealed version. Buttons rather than the artifact's
   spans, because these are tabs somebody presses. */
.seg { display: inline-flex; background: var(--fill-2); border-radius: 8px; padding: 2px; font-size: 12.5px; }
.seg button {
  padding: 4px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font: 12.5px/1.45 var(--ui); cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 0 0 1px var(--line), 0 1px 2px var(--edge); }

.drop { margin: 14px 14px 12px; border: 1.5px dashed var(--line); border-radius: 10px; padding: 22px 16px; text-align: center; background: var(--fill); }
/* The drag-over state, which is the only feedback that a drop will land. */
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .big { font-size: 15px; font-weight: 700; word-break: break-all; }
.drop .small { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.drop .btn { margin-top: 12px; }

.bsec { padding: 12px 14px; border-top: 1px solid var(--line-2); }
.bsec-h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.bsec-h span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }

/* A section folded away by default. Native <details>, so it costs no script,
   opens with the keyboard and is announced as a disclosure; the summary is a
   .bsec-h that happens to be clickable, with a caret standing in for the
   marker the browsers draw differently. */
.fold { border-top: 1px solid var(--line-2); }
/* `display: block`, and the flex row is a child: a summary set to flex broke
   the toggle in Safari for years, and the layout does not need it to be the
   summary itself. `list-style` and the WebKit marker both go, because the
   caret below is drawn rather than inherited -- browsers disagree about the
   native one. */
.fold > summary { list-style: none; cursor: pointer; padding: 12px 14px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .sum {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.fold > summary:hover .sum { color: var(--ink-2); }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold > summary .sum span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.fold > summary .sum::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.fold[open] > summary .sum::before { transform: rotate(45deg); }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* The artefact the system will keep, shown before it is written: the file a
   version becomes, and the records a sealed one holds. */
.rendered { margin: 0 16px 12px; font-size: 12.5px; }
.rendered pre {
  font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
  background: var(--fill); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 10px; margin: 8px 0 0; color: var(--ink-2);
}
.mout {
  white-space: pre-wrap; word-break: break-word; font-size: 11.5px; line-height: 1.5;
  padding: 12px 14px; color: var(--ink-2); max-height: 320px; overflow: auto;
}

/* A version's state, which is worth a badge rather than a word: an unsealed
   version is bytes still arriving, and it cannot be previewed, picked or run. */
.sev {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.sev.ready { background: var(--accent-soft); color: var(--accent-ink); }
.sev.stale { background: var(--gate-soft); color: var(--gate); }

.it .vnum { font-family: var(--mono); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.it .vnum.you { color: var(--accent-ink); }
.it .vnum .lnk { font-family: var(--mono); display: inline-flex; align-items: center; gap: 8px; }
.it tr.series td { background: var(--fill); font-size: 12px; color: var(--muted); }
.it tr.series td b { color: var(--ink-2); }
.pinflag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 5px;
}
.chev {
  width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; flex: none;
}
.chev.down { transform: rotate(45deg); }

/* A field name, wherever one is shown beside its value. */
.fld { color: var(--accent-ink); background: var(--accent-tint); border-radius: 4px; padding: 1px 3px; font-family: var(--mono); }

/* What each field covers so far, and the gap that costs a record its run. */
.fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line-2); }
.fields .lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fcov { font-family: var(--mono); font-size: 11.5px; background: var(--fill); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; color: var(--ink-2); }
.fcov .ok { color: var(--accent-ink); }
.fcov.warn { background: var(--gate-soft); border-color: var(--gate-soft); color: var(--gate); }
.fieldwarn { flex-basis: 100%; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* The invitation to add another record, which asks for the hard cases: easy
   examples teach nothing, and three typed records exist to find where a prompt
   breaks. */
.ex-add {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--fill);
  padding: 10px 12px; font: 650 12.5px/1.45 var(--ui); color: var(--accent-ink);
}
.ex-add:hover { border-color: var(--accent); }

/* ------------------------------------------------------------------- states */

.page-note { padding: 40px; color: var(--muted); }
.banner { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: var(--worse-soft); color: var(--worse); }
.banner b { font-weight: 700; }

@media (max-width: 900px) {
  .auth, .reg { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .plans { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- the prompts */

/* The bar over the editor: which sealed dataset version the preview renders
   against. */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }

/* What the editor is a draft of, in the head row beside the title. */
.nohist { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.node { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.node i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.node b { font-weight: 700; }
.node small { color: var(--muted); font-size: 12px; }
.node.draft { border-style: dashed; color: var(--muted); }
.node.draft i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

/* A version lineage: the pills, newest first, joined by a short rule. The
   design study's sheet K. `.node` above is the pill it already had for a
   draft; these are the states a published one takes. */
.lineage { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.lk { width: 14px; height: 1.5px; background: var(--line); flex: none; }
/* The pills switch versions, so they are buttons; this is the reset that makes
   one look like the span beside it. */
button.node { font: inherit; font-size: 13px; cursor: pointer; }
button.node:hover { border-color: var(--faint); }
button.node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.node.cur { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.node.cur i { background: var(--accent); }
.node em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* A version that starts a new instrument: scores either side do not pool. */
.node.breaks i { background: transparent; box-shadow: inset 0 0 0 2px var(--gate, var(--faint)); }
.node.breaks em { color: var(--gate, var(--muted)); }

/* The template editor. The text is drawn twice: once in `.ed-ink`, where
   `{{field}}` can be marked and the lines numbered, and once in the textarea
   over it, which is transparent apart from its caret and its selection. The
   two must wrap identically, so every metric that affects wrapping is set on
   both and the box grows to its content rather than scrolling -- two scroll
   positions to keep in step is exactly the bug this shape avoids. */
.editor { position: relative; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; padding: 10px 0; }
.editor .ln { display: grid; grid-template-columns: 36px 1fr; min-height: 22px; }
.editor .ln .no { color: var(--faint); text-align: right; padding-right: 10px; user-select: none; }
.editor .ln .tx { white-space: pre-wrap; overflow-wrap: break-word; padding-right: 12px; }
.editor .fld { color: var(--accent-ink); background: var(--accent-tint); border-radius: 4px; padding: 1px 3px; margin: 0 -3px; }
.editor .ed-box {
  position: absolute; inset: 10px 0; width: 100%; height: 100%;
  margin: 0; padding: 0 12px 0 36px; border: 0; outline: 0; resize: none; overflow: hidden;
  background: transparent; color: transparent; caret-color: var(--ink);
  font: inherit; line-height: inherit; white-space: pre-wrap; overflow-wrap: break-word;
}
.editor .ed-box::selection { background: var(--accent-soft); color: transparent; }
.editor .ed-box:focus-visible { outline: 0; }
.editor:focus-within { background: var(--fill); }

/* The record stepper in the rendered panel's head. */
.recpick { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.recpick b { color: var(--ink); font-variant-numeric: tabular-nums; }
.btn.icon { padding: 4px 9px; font-size: 15px; line-height: 1; }
.btn:disabled { color: var(--faint); border-color: var(--line-2); cursor: default; }

/* The line under a panel that says what it is and is not. */
.firstnote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px 12px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.firstnote b { color: var(--ink-2); }

/* ---------------------------------------------------------------- the runs */

/* Coverage in a table cell: the progress numerator over the total, with the
   judged sample beneath it. Two lines rather than one, because they are two
   different denominators and a single line invites reading them as one. */
.cov { display: inline-flex; flex-direction: column; gap: 1px; }
.cov .num { font-variant-numeric: tabular-nums; }

/* An item's index, which is the record's index: what makes a row on this page
   traceable back to the record that produced it. */
.it .idx { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ------------------------------------------------- the rubric editor, sheet P

   The artifact's own primitives, brought over as the screen needed them. The
   ones already here -- .seg, .bsec, .ex-add, .rec-grid, .rendered -- are used
   as they stand rather than restyled: a second spelling of a primitive is the
   thing that drifts the first time either is touched. */

/* The starter row. A chip is the whole choice, so it is a real button: picking
   one replaces the form, which is a first move rather than a merge. */
.chip {
  font: 12.5px/1.45 var(--ui); padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); cursor: pointer;
}
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }

/* One metric: a name, a kind, and the anchors that say what each point means.
   A card rather than a row, because the anchors are a list under it and an
   ordinal's five points need somewhere to live. */
.mcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.mcard + .mcard { margin-top: 8px; }
.mc-h { display: flex; align-items: center; gap: 8px; }
.anchors-edit { display: grid; grid-template-columns: 26px 1fr; gap: 5px 8px; margin-top: 8px; align-items: center; }
.anchors-edit .pt { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.addm {
  margin-top: 8px; width: 100%; display: block; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 8px; padding: 8px 12px;
  font: 13px/1.45 var(--ui); color: var(--muted); text-align: center; background: var(--fill);
}
.addm:hover { border-color: var(--accent); color: var(--accent-ink); }

/* What a choice costs, said where the choice is made. */
.warnbox {
  margin: 0 14px 14px; padding: 9px 12px; background: var(--gate-soft); color: var(--gate);
  border-radius: 7px; font-size: 13px; line-height: 1.45;
}
.warnbox b { font-weight: 700; }

/* The editor's fallback: an artifact it cannot draw as fields. */
.variant { border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px 14px; background: var(--fill); }
.variant-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px 2px; }

/* The checks table: name, type, value, and the two controls every row carries.
   A grid rather than a <table> because the value cell changes shape with the
   type and a table cell cannot grow a second input without a colspan. */
.checkrow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.checkrow + .checkrow { margin-top: 8px; }
.checkrow .rowctl { display: flex; gap: 4px; }
.checkrow.lang { grid-template-columns: 1fr 1fr 1fr auto; }
.checkrow .conf { grid-column: 3; }
.colhead {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

/* A panel arm: one picker, its remove control, and the family the roster
   placed it in. The family is the reason a panel costs what it costs, so it
   sits on the row rather than in a hint below the list. */
.panelrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.panelrow + .panelrow { margin-top: 8px; }
.famtag { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.famtag code { font-family: var(--mono); font-size: 11.5px; }
/* The judge column on the items table: one metric per line, and wide enough
   for the longest metric name the starters ship with its score beside it
   (`no_false_promises: 1`). Scoped to this cell rather than applied to .fcov,
   which is a horizontal strip of chips everywhere else it is used -- the
   variables coverage row, the rubric's checks, the run's spend. `nowrap`
   because a metric name broken across two lines reads as two metrics, which
   is the one thing this column must not suggest: two metrics are two
   questions and are never one number. */
.it .judge { width: 210px; }
.it td.judge .fcov { display: block; width: fit-content; white-space: nowrap; }
.it td.judge .fcov + .fcov { margin-top: 4px; }

/* ------------------------------------------------- the guided first run */

/* The "first-run wizard" study: the green band as its stepper, and the working
   surface under it at the console's widths. **The bar above it is the console's
   own**, not one of the wizard's -- the study drew a stripped-down bar saying
   where you are rather than where you can go, and the one link out of it was a
   worse answer to "where is the rest of this product" than the nav already
   built. What is left here is everything below that bar. */
.fr { min-height: 100vh; }

.fr-main { max-width: 1280px; margin: 0 auto; padding: 0 32px 40px; display: flex; flex-direction: column; gap: 24px; }
.fr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fr-head h1 { margin: 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.fr-head span { font-size: 13px; color: var(--muted); text-align: right; }
.fr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: -8px; }

.fr-panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fr-panel h2, .fr-h2 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; }
.fr-h2 { font-size: 19px; line-height: 26px; }
.fr-panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fr-editor { overflow: hidden; }
.fr-editor .editor { min-height: 180px; }
.fr-note { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.fr-note code { color: var(--ink); }
.fr-lbl { font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.fr-drop { margin: 0; }
.fr-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fr-file .ic { width: 40px; height: 40px; flex: none; border-radius: 6px; background: var(--fill-2); display: grid; place-items: center; font: 700 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.fr-file .grow { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fr-file b { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.fr-file small { font-size: 13px; color: var(--muted); }

.fr-cols { display: flex; flex-direction: column; gap: 12px; }
.fr-colgrid { display: flex; flex-direction: column; gap: 8px; }
.fr-colrow { display: grid; grid-template-columns: minmax(0, 130px) 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.fr-colrow .mono { overflow: hidden; text-overflow: ellipsis; }
.fr-colrow .track { height: 8px; border-radius: 999px; background: var(--fill-2); overflow: hidden; display: flex; }
.fr-colrow .track i { background: #8e9078; }
.fr-colrow .n { font: 12px var(--mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.fr-colrow.part .n { color: var(--ink); font-weight: 650; }
.fr-colrow.part .track i { background: #c9a14a; }

.fr-typed { display: flex; flex-direction: column; gap: 12px; }
.fr-typedwrap { overflow-x: auto; }
.fr-typed table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13px; }
.fr-typed th { text-align: left; padding: 0 4px; font: 650 12px var(--mono); color: var(--muted); white-space: nowrap; }
.fr-typed td { padding: 0 4px; }
.fr-typed td.n, .fr-typed th.n { width: 24px; font: 12px var(--mono); color: var(--muted); text-align: right; padding-right: 6px; }
.fr-typed td.x { width: 24px; }
.fr-typed td.x button { border: 0; background: none; color: var(--faint); font-size: 16px; cursor: pointer; }
.fr-typed .inp { font-size: 13px; padding: 7px 10px; min-width: 110px; }
.fr-typed .inp.empty { background: var(--gate-soft); border-color: #d8b56a; }
.fr-typedfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.fr-preview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fr-render {
  margin: 0; min-height: 176px; padding: 12px 16px; background: var(--fill); border: 1px solid var(--line-2);
  border-radius: 10px; font: 13px/22px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}
.fr-render .val { background: var(--accent-tint); border-radius: 4px; padding: 1px 3px; }
.fr-render .gap { background: var(--worse-soft); color: var(--worse); border-radius: 4px; padding: 1px 3px; }
.fr-tagline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.fr-tag { font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--fill-2); color: var(--muted); }
.fr-gapnote { margin: 0; font-size: 13px; line-height: 19px; color: var(--worse); }
.fr-side { border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 21px; background: var(--surface); }
.fr-side p { margin: 0; }
.fr-side.soft { background: var(--fill); border-color: var(--line-2); font-size: 13.5px; color: var(--ink-2); }
.fr-side .ok { color: var(--accent); }

.fr-foot { display: flex; align-items: center; gap: 16px; }
.fr-foot > p { margin: 0; flex: 1; font-size: 14px; line-height: 21px; color: var(--muted); }
.fr-foot > p b { color: var(--ink); font-weight: 650; }
.fr-foot .mono { font-size: 13px; color: var(--ink); }
.fr-allow { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); flex: none; }
.fr-allow b { font-size: 12.5px; color: var(--ink); font-weight: 650; }
.fr-esterr { color: var(--worse); }
.fr-budget { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); flex: none; }
.fr-budget .inp-dollar { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-family: var(--mono); }
.fr-budget .inp { width: 84px; font-size: 13px; padding: 7px 9px; }

.fr-models-h { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fr-stale { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--gate-soft); color: var(--gate); font-size: 13.5px; }
.fr-stale .btn { margin-left: auto; }
.fr-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.fr-model { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fr-model.target { border: 2px solid var(--accent); padding: 15px; }
.fr-model .mh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fr-model .tgt { font-size: 13px; font-weight: 650; color: var(--accent-ink); }
.fr-model .select { width: 100%; font-family: var(--mono); font-size: 12.5px; }
.fr-model .fam { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.fr-model .ans { flex: 1; min-height: 150px; max-height: 340px; overflow: auto; background: var(--fill); border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-model .ans.wait { color: var(--muted); font-style: italic; }
.fr-model .ans.err { color: var(--worse); background: var(--worse-tint); font-style: normal; }
.fr-model .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); min-height: 18px; }
.fr-model .tgtnote { min-height: 35px; display: flex; align-items: center; }
.fr-sent > summary { padding: 4px 0; }
.fr-sent .fr-render { margin-top: 8px; min-height: 0; }

/* Step 3: the run being waited on, and the test locked until it is done. */
.fr-runstrip { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.fr-runstrip.ok { background: var(--accent-soft); border-color: var(--accent-tint); }
.fr-runstrip.bad { background: var(--worse-tint); border-color: var(--worse-soft); }
.fr-runstrip .ico { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--on-accent); background: var(--accent); }
.fr-runstrip.bad .ico { background: var(--worse); }
.fr-runstrip.wait .ico { background: transparent; border: 3px solid var(--accent-tint); border-top-color: var(--accent); animation: fr-spin 1s linear infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
.fr-runstrip .what { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.fr-runstrip .what b { color: var(--ink); font-weight: 650; font-size: 15px; }
.fr-runstrip .what .mono { font-size: 13px; }
.fr-runstrip .what .sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.fr-runstrip .prog { display: flex; height: 8px; border-radius: 999px; background: var(--fill-2); overflow: hidden; margin-top: 6px; max-width: 420px; }
.fr-runstrip .prog i { background: var(--accent); transition: width .3s; }
.fr-runstrip .figs { display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.fr-runstrip .figs > span { display: flex; flex-direction: column; gap: 2px; }
.fr-runstrip .figs small { font: 700 11px/1.3 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fr-test { display: flex; flex-direction: column; gap: 16px; }
.fr-locked { padding: 12px 16px; border-radius: 10px; background: var(--gate-soft); color: var(--gate); font-size: 13.5px; }
.fr-locked b { font-weight: 700; }
.fr-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fr-fieldset:disabled { opacity: .55; }

/* The test as a list of decisions: each row a check or a criterion already
   made, written in a sheet and shown here in the order it runs. */
.fr-list { display: flex; flex-direction: column; gap: 8px; }
.fr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fr-rows li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.fr-rows .n { width: 18px; flex: none; font: 12px var(--mono); color: var(--muted); text-align: right; }
.fr-rows .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.fr-rows small { font-family: var(--ui); font-size: 12px; color: var(--muted); }

/* The preview: three answers, each with what the test did to it. */
.fr-pv { display: flex; flex-direction: column; gap: 12px; }
.fr-pvitem { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.fr-pvitem .h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; }
.fr-pvitem .h .ok { color: var(--muted); }
.fr-pvitem .h .gate { color: var(--gate); font-weight: 650; }
.fr-pvitem .ans { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-2); max-height: 150px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-pvitem .why { margin: 0; font-size: 12.5px; color: var(--gate); }
.fr-pvitem .verdicts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fr-pvitem .verdicts > div { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--fill); font-size: 12.5px; }
.fr-pvitem .verdicts dt { font-size: 12px; color: var(--muted); }
.fr-pvitem .verdicts dd { margin: 0; font-weight: 650; }
.fr-pvitem .verdicts dd.pass { color: var(--better); }
.fr-pvitem .verdicts dd.fail { color: var(--worse); }
.fr-pvitem .verdicts dd.scale { font-family: var(--mono); }
/* An answer with nothing tried on it yet: the same row, waiting.
   **The ground does not move.** These are the same rows before and after the
   preview -- the verdicts appear on them in place -- so a card that changed
   colour when it was judged read as a different card arriving, which is the
   one thing showing the answers early was meant to avoid. The border carries
   the state instead, and the answer keeps the surface it will be read on. */
.fr-pvitem.waiting { border-style: dashed; }

/* Scoring the run, and what it measured. */
.fr-score { display: flex; align-items: flex-start; gap: 24px; padding: 18px 20px; border: 1px solid var(--accent-tint); border-radius: 12px; background: var(--accent-soft); }
.fr-score .what { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fr-score p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.fr-score p b { color: var(--ink); font-weight: 700; }
.fr-score .figs { display: flex; gap: 24px; }
.fr-score .figs > span { display: flex; flex-direction: column; gap: 2px; }
.fr-score .figs small { font: 700 11px/1.3 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fr-score .figs .num { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.fr-score .go { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; max-width: 300px; }
.fr-score .go .why { font-size: 12.5px; color: var(--muted); text-align: right; }
.fr-result { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

/* The sheets: one decision at a time, over the screen that opened them. */
.sheet-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(43, 36, 25, .45); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow: auto; }
.sheet { width: 100%; max-width: 600px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 32px var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.sheet:focus { outline: none; }
.sheet-h { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.sheet-h > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sheet-h h2 { margin: 0; font-size: 21px; line-height: 28px; font-weight: 700; }
.sheet-h p { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.sheet-b { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.sheet-f { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--fill); }
.sheet-f p { margin: 0; flex: 1; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.sheet-sees { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; background: var(--fill); }
.sheet-sees p { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-2); }

/* The chooser a sheet picks one of anything with. A radiogroup drawn as
   cards, because the difference between two check types is a sentence rather
   than a word. */
.picklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.pick:hover { border-color: var(--muted); }
.pick.on { border: 2px solid var(--accent); padding: 8px 11px; background: var(--accent-soft); }
.pick.on b { color: var(--accent-ink); }
.pick.off { background: var(--fill); color: var(--muted); cursor: not-allowed; }
.pick b { font: 650 12.5px var(--mono); }
.pick span { font-size: 12.5px; line-height: 17px; color: var(--ink-2); }
.pick small { font-size: 11.5px; line-height: 16px; color: var(--muted); }
.pick.off b, .pick.off span { color: var(--muted); }

@media (max-width: 900px) {
  .picklist { grid-template-columns: 1fr; }
  .fr-score { flex-direction: column; }
  .fr-score .go { align-items: stretch; max-width: none; width: 100%; }
  .fr-score .go .why { text-align: left; }
  .fr-runstrip { flex-direction: column; }
  .fr-main { padding: 0 16px 32px; }
  .fr-head, .fr-foot { flex-direction: column; align-items: stretch; }
  .fr-head span { text-align: left; }
  .fr-two, .fr-preview, .fr-models { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- the guided first run's band

   The "Resume strip mockup" study's green bar, in the two places it appears:
   under the app bar on every screen, and inside the wizard as its stepper. The
   study's #e3efe4 and #227349 are this palette's --accent-soft and --accent
   already -- it was drawn against the same sampled colours, so nothing here
   introduces a value of its own. */
.fr-strip {
  display: flex; align-items: center; gap: 20px;
  padding: 11px 24px; min-height: 64px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-tint);
}
.fr-strip-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fr-strip-txt b { font-size: 14px; line-height: 21px; font-weight: 650; color: var(--ink); }
.fr-strip-txt small { font-size: 13px; line-height: 19px; color: var(--muted); }

/* The text is the control, so it has to read as one. The headline takes the
   link colour and underlines on hover; the detail stays quiet, because
   underlining both would make the strip look like a wall of links. */
a.fr-strip-txt { text-decoration: none; border-radius: 6px; }
a.fr-strip-txt b { color: var(--accent-ink); }
a.fr-strip-txt:hover b { text-decoration: underline; }
a.fr-strip-txt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The finished state's tick. --better rather than the accent: "done" is not
   the same claim as "here is something to do", and the strip says both. */
.fr-tick {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  background: var(--better); color: var(--on-accent);
  display: grid; place-items: center;
}

.fr-count {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: 19px; color: var(--muted); white-space: nowrap;
}
.fr-pips { display: flex; align-items: center; gap: 4px; }
/* The pips differ in lightness as well as hue, so the done ones are not told
   apart by colour alone. */
.fr-pips span { width: 26px; height: 6px; border-radius: 999px; background: var(--accent-tint); }
.fr-pips span.on { background: var(--accent); }

.fr-strip-x {
  flex: none; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.fr-strip-x:hover { background: var(--accent-tint); color: var(--ink); }

/* Inside the wizard the same band is the stepper: a labelled segment per step
   rather than a sentence and a button. */
.fr-band { gap: 24px; }
.fr-band-lbl {
  flex: none; font-size: 11px; line-height: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

/* The label and its info disc travel together as one control: the button
   explains the band it sits in, so it must not be separable from it when the
   band wraps. The negative margin keeps the words where they were before the
   padding that makes the pair a comfortable target. */
.fr-band-head {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; margin: -5px -8px;
  background: none; border: 0; border-radius: 8px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.fr-band-head:hover { background: var(--accent-tint); }
.fr-band-head:hover .fr-band-lbl,
.fr-band-head[aria-expanded="true"] .fr-band-lbl { color: var(--ink); }
.fr-band-head:hover .fr-band-i,
.fr-band-head[aria-expanded="true"] .fr-band-i { background: var(--ink); }
.fr-band-i {
  flex: none; width: 13.5px; height: 13.5px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  /* The label's own colour, not the accent: the accent is what the segments
     to the right use for "you are here", and a green dot beside them reads as
     part of that count rather than as a control for the band. */
  background: var(--muted); color: var(--accent-soft);
  font: 700 9px/1 Georgia, "Times New Roman", serif; font-style: italic;
}
.fr-segs { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; }
.fr-seg {
  flex: 1; min-width: 0; max-width: 160px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 0; background: none; border: 0; text-align: left;
  font: inherit; color: inherit;
}
button.fr-seg { cursor: pointer; }
.fr-seg .bar { height: 6px; border-radius: 999px; background: var(--accent-tint); }
.fr-seg .lbl { font-size: 12px; line-height: 17px; color: var(--muted); }
.fr-seg.done .bar { background: var(--accent-ink); }
.fr-seg.now .bar { background: var(--accent); }
.fr-seg.now .lbl { font-weight: 650; color: var(--accent-ink); }

/* Narrow: the sentence keeps the room and the rest wraps under it rather than
   crushing the band into a column of slivers. */
@media (max-width: 860px) {
  .fr-strip { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .fr-strip-txt { flex-basis: 100%; }
  .fr-band-head { flex-basis: 100%; }
  .fr-seg { max-width: none; }
}

/* A confirm, on the sheets' scrim and panel: one modal look in this console,
   and one set of rules for closing it. Centred and narrow, because a question
   with two answers is not a form. */
.sheet-scrim.mid { align-items: center; }
.sheet-ask { max-width: 440px; }
.sheet-ask .sheet-h { border-bottom: 0; padding-bottom: 4px; }
.sheet-ask .sheet-f { background: none; border-top: 0; padding-top: 8px; }

/* The tutorial's welcome, on the same scrim and panel. The close in its header
   is the sheets' first: every other modal in this console is a question with
   two answers, and this one is something to read. */
.sheet-x {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.sheet-x:hover { background: var(--fill-2); color: var(--ink); }

/* One card per step, numbered: the wizard is a sequence and the band outside
   counts the same steps in the same order. */
.wel-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wel-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--fill);
}
.wel-steps .n {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-ink);
  display: grid; place-items: center; font: 700 11.5px/1 var(--mono);
}
.wel-steps .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wel-steps b { font-size: 13.5px; font-weight: 650; }
.wel-steps small { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.wel-time { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }

/* ---- traces disabled: the trace plane on a deployment without one (phase-1
   decision 191). The badge rides on a tab; the panel is one column of prose and two ways onward. An outline in the text's own
   colour, so it reads as a state on both the dark bar and the light page. */
.disabled-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle; border: 1px solid currentColor; opacity: .7;
}
.traces-disabled { max-width: 640px; margin: 48px auto; padding: 0 24px; line-height: 1.6; }
.traces-disabled p { margin: 14px 0 0; font-size: 15px; }
.traces-disabled .row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }