/*
 * Layout for the console. **No colour, size, radius or spacing literal appears
 * in this file** — every value is a token from `design/`, which is the
 * appearance authority (design/README). If something is missing here it is
 * missing there, and the fix belongs there.
 *
 * Three of the design system's rules are load-bearing in this stylesheet:
 *
 *   * cream ground, white is a raised surface — a page of cards reads as a set
 *     of discrete claims rather than as a document;
 *   * the reachable-ceiling hatch is the one proprietary graphic device, and a
 *     completeness bar without it does not ship;
 *   * no hover displacement and no translucency: a row that moves under the
 *     cursor is a row that cannot be trusted, and a panel you can see numbers
 *     through makes them harder to read.
 */

/* ---- shell ------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-9);
  padding: var(--pad-row);
  border-bottom: var(--border-w) solid var(--border);
  background: var(--surface);
}

.wordmark {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--ink-heading);
  border-bottom: none;
}

.topnav {
  display: flex;
  gap: var(--sp-9);
  font-size: var(--text-sm);
}

.fixture-band {
  margin: 0;
  padding: var(--pad-notice);
  background: var(--amber-bg);
  border-bottom: var(--border-w) solid var(--amber-border);
  color: var(--amber-ink);
  font-size: var(--text-sm);
}

.page {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: var(--sp-16) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.footer {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: var(--sp-13) var(--gutter) var(--sp-16);
  color: var(--ink-meta);
  font-size: var(--text-meta);
}

@media (max-width: 640px) {
  .page {
    padding: var(--sp-13) var(--gutter-mobile);
  }
}

/* ---- type -------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--sp-2);
  color: var(--ink-meta);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

.section__heading {
  font-size: var(--text-h2);
}

.caveat {
  color: var(--ink-secondary);
  font-size: var(--text-sm);
}

.anchor {
  font-family: var(--font-mono);
  font-size: var(--mono-anchor);
  letter-spacing: 0;
  color: var(--ink-meta);
}

.empty {
  color: var(--ink-secondary);
}

/* ---- the public page --------------------------------------------------- */

/* Narrower than the console: `--col-narrow` is the token's own note for a
   landing page, and prose that runs the width of the fourteen is unreadable. */
.landing {
  max-width: var(--col-narrow);
}

/* `--text-display` is "one per page, the promise" (design/tokens/typography).
   This is that one. */
.landing__title {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.lede {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--lh-prose);
  color: var(--ink-body);
}

.landing__list {
  margin: 0;
  padding-left: var(--sp-11);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ---- the completeness hero --------------------------------------------- */

.hero {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-5xl);
  padding: var(--pad-card-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.hero__value {
  margin: 0;
  font-size: var(--value-hero);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-value);
  font-variant-numeric: tabular-nums;
  color: var(--ink-heading);
}

.hero__sub,
.hero__ceiling {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

/* The bar. Solid teal is now; the hatch is where the queued actions reach. */
.bar {
  display: flex;
  height: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--cream-300);
  overflow: hidden;
}

.bar__now {
  background: var(--accent);
}

.bar__reach {
  background: var(--hatch-reachable);
}

.denominator {
  font-size: var(--text-sm);
  color: var(--ink-body);
}

.denominator summary {
  cursor: pointer;
  color: var(--ink-link);
}

/* ---- the matrix -------------------------------------------------------- */

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  margin-bottom: var(--sp-13);
}

.pillar__name {
  font-size: var(--text-h4);
}

.pillar__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col-narrow), 1fr));
  gap: var(--sp-9);
}

@media (max-width: 720px) {
  .pillar__slots {
    grid-template-columns: 1fr;
  }
}

.slot {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-left: var(--sp-1) solid var(--border);
  border-radius: var(--r-3xl);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Colour reinforces the glyph; it never carries the meaning alone. */
.slot--computable { border-left-color: var(--state-computable); }
.slot--qualified  { border-left-color: var(--state-qualified); }
.slot--withheld   { border-left-color: var(--state-withheld); }
.slot--neutral    { border-left-color: var(--state-unknown); }

.slot__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.slot__title {
  font-size: var(--text-h4);
  margin-right: auto;
}

.value {
  margin: 0;
  font-size: var(--value-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-value);
  font-variant-numeric: tabular-nums;
  color: var(--ink-heading);
}

/* A number we do not have. Never a zero. */
.value--none {
  color: var(--cream-700);
}

/* Numbers without a headline number: slices, or the steps of a funnel. */
.breakdown {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-11);
}

.breakdown li {
  display: flex;
  flex-direction: column;
}

.breakdown__label {
  font-size: var(--text-micro);
  color: var(--ink-meta);
}

.breakdown__value {
  font-size: var(--value-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-heading);
}

.breakdown__note {
  margin: 0;
  font-size: var(--text-micro);
  color: var(--ink-meta);
}

.value__receipt,
.trend,
.provisional,
.breaks,
.explain,
.shortfall,
.reason,
.action,
.broken {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-body);
}

.trend,
.value__receipt {
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}

.provisional,
.breaks {
  color: var(--ink-secondary);
}

.reason {
  color: var(--ink-secondary);
  font-size: var(--text-xs);
}

.broken {
  color: var(--red-ink);
}

/* ---- chips ------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--pad-chip);
  border-radius: var(--r-sm);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  border: var(--border-w) solid var(--border);
  background: var(--surface-sunken);
  color: var(--ink-body);
}

.chip--computable { background: var(--accent-tint); border-color: var(--teal-200); color: var(--accent-on-tint); }
.chip--qualified  { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-ink); }
.chip--withheld   { background: var(--red-bg); border-color: var(--red-border); color: var(--red-ink); }
.chip--neutral    { background: var(--surface-sunken); border-color: var(--border); color: var(--ink-secondary); }
.chip--default    { background: var(--surface-subtle); border-color: var(--border-strong); color: var(--ink-secondary); }
/* Their own answer, still on the card while the number is being recomputed. It
   reads as chosen rather than as suggested, which is the whole distinction the
   recomputing card exists to keep visible. */
.chip--chosen     { background: var(--accent-tint); border-color: var(--teal-200); color: var(--accent-on-tint); }
.chip--planned    { background: var(--surface-sunken); border-color: var(--cream-700); color: var(--ink-secondary); }
.chip--breadth    { background: var(--accent-tint); border-color: var(--teal-200); color: var(--accent-on-tint); }
.chip--depth      { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-ink); }

.glyph {
  font-size: var(--text-sm);
}

/* ---- confirmation card (CW-7) ------------------------------------------ */

.confirm {
  background: var(--surface-subtle);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--pad-panel);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.confirm__question {
  margin: 0;
  font-weight: var(--weight-medium);
  color: var(--ink-heading);
}

.confirm__options {
  margin: 0;
  padding-left: var(--sp-11);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--text-sm);
}

.confirm__chosen {
  /* Marked with a rule rather than a fill: the option is the same option, it is
     just the one they picked. A background would make it look like a new kind
     of thing. */
  border-left: var(--sp-1) solid var(--teal-200);
  padding-left: var(--sp-4);
  margin-left: calc(-1 * var(--sp-4) - var(--sp-1));
}

.confirm__label {
  font-weight: var(--weight-medium);
  color: var(--ink-heading);
}

.confirm__consequence {
  display: block;
  color: var(--ink-secondary);
}

.confirm__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-meta);
}

/* ---- gaps -------------------------------------------------------------- */

.gaps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

.gap {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-3xl);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.gap__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.gap__title {
  font-size: var(--text-h4);
}

.gap__copy {
  margin: 0;
}

.gap__reach p,
.gap__caveat p,
.gap__action {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-sm);
}

.gap__slots {
  margin: 0;
  padding-left: var(--sp-11);
  font-size: var(--text-sm);
}

.gap__caveat {
  color: var(--ink-secondary);
}

.button {
  display: inline-block;
  padding: var(--pad-btn-sm);
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--surface);
  border-bottom: none;
  font-weight: var(--weight-medium);
  min-height: var(--tap-min);
}

/* ---- notices ----------------------------------------------------------- */

.notices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.notice {
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--pad-notice);
  background: var(--surface);
  animation: fadeUp var(--dur-base) var(--ease);
}

.notice--qualified { background: var(--amber-bg); border-color: var(--amber-border); }
.notice--withheld  { background: var(--red-bg); border-color: var(--red-border); }
.notice--computable { background: var(--accent-tint); border-color: var(--teal-200); }

.notice__lead {
  margin: 0;
  font-size: var(--text-sm);
}

.notice__when {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}

/* ---- detail (CW-3) ----------------------------------------------------- */

.detail {
  max-width: var(--col-detail);
  display: flex;
  flex-direction: column;
  gap: var(--sp-13);
}

.detail__title {
  font-size: var(--text-h1);
}

.detail__key,
.detail__version {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--ink-meta);
}

.series {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.series th,
.series td {
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--border-w) solid var(--border);
}

.series th {
  color: var(--ink-meta);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
}

.series__value {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-heading);
}

.series__receipt {
  font-family: var(--font-mono);
  font-size: var(--mono-inline);
  color: var(--ink-meta);
}

.series__row--provisional {
  background: var(--surface-subtle);
}

.anchors,
.escapes,
.evidence {
  margin: 0;
  padding-left: var(--sp-11);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--text-sm);
}

/* ---- the run page (CW-2) ----------------------------------------------- */

.run {
  max-width: var(--col-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-13);
}

.run__conclusion {
  background: var(--surface);
  border: var(--border-w-accent) solid var(--border-accent);
  border-radius: var(--r-3xl);
  padding: var(--pad-card);
}

.run__id {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--ink-meta);
}

/* Evidence is what we observed, so it sits on the dark surface. */
.evidence__item {
  background: var(--surface-evidence);
  border-radius: var(--r-2xl);
  padding: var(--pad-panel);
  color: var(--dark-ink);
  animation: fadeUp var(--dur-base) var(--ease);
}

.evidence__item .anchor {
  color: var(--teal-300);
}

.evidence__reading {
  margin: var(--sp-2) 0 0;
  color: var(--dark-ink);
}

/* ---- the state gallery ------------------------------------------------- */

.catalogue {
  display: flex;
  flex-direction: column;
  gap: var(--sp-13);
}

.legend {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legend th,
.legend td {
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--border-w) solid var(--border);
  vertical-align: top;
}

.legend__glyph {
  font-size: var(--text-h4);
}

.legend__row--computable .legend__glyph { color: var(--state-computable); }
.legend__row--qualified .legend__glyph  { color: var(--state-qualified); }
.legend__row--withheld .legend__glyph   { color: var(--state-withheld); }
.legend__row--neutral .legend__glyph    { color: var(--state-unknown); }

/* ---- sign-in, and who is signed in ------------------------------------- */

.signin {
  max-width: var(--col-narrow);
}

.signin__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-top: var(--sp-9);
}

.signin__label {
  font-size: var(--text-meta);
  color: var(--ink-meta);
}

.signin__input {
  width: 100%;
  padding: var(--pad-field);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-body);
  font-family: inherit;
  font-size: var(--text-base);
  min-height: var(--tap-min);
}

.signin__submit {
  padding: var(--pad-btn);
  border: none;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--surface);
  font-family: inherit;
  font-weight: var(--weight-medium);
  min-height: var(--tap-min);
  margin-top: var(--sp-5);
}

/*
 * The Google link wears the submit button's clothes because it is the primary
 * action, not because it is a button — it is an `<a>` on purpose: a top-level
 * navigation is what the OAuth flow needs, and a `fetch` could not perform one.
 */
.signin__google {
  margin-top: var(--sp-9);
}

.signin__google .signin__submit {
  display: inline-block;
  margin-top: 0;
  text-decoration: none;
  line-height: var(--tap-min);
  padding-block: 0;
}

/* The second door is a fallback, and the divider is what says so. */
.signin__or {
  margin-top: var(--sp-9);
  font-size: var(--text-meta);
  color: var(--ink-meta);
  text-transform: lowercase;
}

/* Empty until the endpoint answers, so it must not reserve a gap of its own. */
.signin__message:empty {
  display: none;
}

.signin__message {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--red-ink);
}

/*
 * The account block sits in the topnav because 「我在读谁的生意」 is a question
 * every page has to answer while one password opens every account
 * (apps/api/src/session.ts).
 */
.topnav__account {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.topnav__email {
  font-family: var(--font-mono);
  font-size: var(--mono-inline);
  color: var(--ink-meta);
}

.topnav__out {
  display: inline;
}

.topnav__out button {
  padding: var(--pad-btn-sm);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  min-height: var(--tap-min);
}

/* ---- the empty state (a project with nothing in it yet) ---------------- */

.empty {
  max-width: var(--col-narrow);
}

/*
 * No `.hero__value` here on purpose: this screen exists because a percentage
 * over a denominator that does not exist is a claim nobody computed. If a
 * number ever wants this much weight on this page, the page is wrong.
 */
.empty h1 {
  font-size: var(--text-h1);
}

/* ---- 怎么算的 (lineage) ------------------------------------------------ */

.calibers,
.eras {
  margin: 0;
  padding-left: var(--sp-11);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--text-sm);
}

.caliber__means {
  display: block;
  color: var(--ink-meta);
  font-size: var(--text-meta);
}

.era__span,
.detail__schemas,
.detail__question {
  font-size: var(--text-meta);
  color: var(--ink-meta);
}

/* ---- 屏 3, the connect screen ------------------------------------------ */

/*
 * Narrow like the landing page and the sign-in: this screen is one instruction
 * and the prose that justifies it, and prose across the width of the fourteen
 * is unreadable (`--col-narrow`'s own note in design/tokens/spacing.css).
 */
.connect {
  max-width: var(--col-narrow);
}

.connect h1 {
  font-size: var(--text-h1);
}

/*
 * The prompt, as a thing to read before it is a thing to copy. Sunken rather
 * than raised: it is the customer's own material being handed back, not one of
 * the claims the white cards carry.
 *
 * `pre-wrap` because the prompt is prose with two long commands in it — a
 * horizontal scrollbar would hide the end of the very line the key is on.
 */
.prompt {
  margin: 0;
  padding: var(--pad-panel);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: var(--mono-code);
  line-height: var(--lh-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt--alt {
  font-size: var(--mono-inline);
}

.prompt__actions {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-9);
  flex-wrap: wrap;
}

.prompt__copy {
  padding: var(--pad-btn);
  border: none;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--surface);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  min-height: var(--tap-min);
}

/* Empty until the button has been pressed, so it reserves no gap of its own. */
.prompt__said:empty {
  display: none;
}

.prompt__said {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

.connect__form {
  margin: 0;
}

/*
 * The four install steps.
 *
 * `decimal` numbers come from the <ol>, never from text in the markup — the
 * order is load-bearing (installPrompt.ts argues why reload precedes setup) and
 * a number typed into a string is a number that survives a reorder.
 */
.steps {
  margin: 0;
  padding-left: var(--sp-13);
  display: flex;
  flex-direction: column;
  gap: var(--sp-13);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

/*
 * Where the step is typed. Two of the four go to a shell and two to a running
 * Claude Code session, and they look alike — so this is the one distinction on
 * the screen a customer cannot afford to skim past.
 *
 * ⭐ **It carries `.eyebrow` in the markup**, which is where uppercasing and
 * tracking come from — design/tokens/i18n.css branches that on locale, because
 * CJK cannot be uppercased. Re-declaring them here would look identical in
 * English and be wrong in Chinese.
 */
.step__where {
  margin: 0;
}

.step__note {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
}

/* Unused since the four steps replaced the prompt's alternative path. */
.alt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
  border-top: var(--border-w) solid var(--border);
  padding-top: var(--sp-13);
}

.alt summary {
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  min-height: var(--tap-min);
}