/* design-system: page-library v1 | base.css */
/* Structure for the page library: reset, type, and the four shells.

WHAT THIS FILE OWNS
Structure a page needs before any component: the reset, the reading defaults, focus, the
skip link, the layout grid, and the three page shells (app, marketing, auth). It owns no
colour of its own; every value comes from tokens.css.

WHAT IT DELIBERATELY DOES NOT OWN
Components. A `.card` is not here. If it were, every page would inherit a card whether it
wanted one, and the component tier would have nowhere to live.
*/

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* a theme may lay a wash under the page. Fixed, so the colour stays where the theme put it
     instead of sliding with the content. */
  background-image: var(--page-glow, none);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--fs-h1); line-height: 1.18; }
/* a marker class, not a size: the rendered gate measures the title through this hook, and
   the page head sets its own step, so one page cannot drift from another silently */
h1.m-title { font-size: var(--fs-h1); line-height: 1.18; letter-spacing: var(--tracking-tight); }
.pagehead .t h1.m-title { font-size: var(--fs-h2); }
h2 { font-size: var(--fs-h3); line-height: 1.3; }
h3 { font-size: var(--fs-base); line-height: 1.35; }
p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* WCAG 2.5.8: an inline-flex item is blockified, so the 24px floor applies and the inline-link
   exception does not. Measured on two live article pages before this line existed. */
.m-prose a, .read a, .lede a, .read-bar a, .mfoot a, .cite a,
.micro a, a.micro, a.small, .note a, .hint a, .top .crumb a { display: inline-flex; align-items: center; min-height: 24px; }

/* AND A LINK INSIDE A QUIET PARAGRAPH IS STILL A LINK. `.note` is the system's small print and it carries the
   one action a person is told to take ("Enrol it at the door", "the ways into this account"); both measured
   19px tall on the settings page. Same rule, same floor. */
/* A SMALL LINK IS STILL A LINK. `a.small` is the size a section header gives a control that sits opposite
   a heading, and it measured 161x19 at 390px on the launcher: 19 tall is under the 24px floor, and the
   inline-link exception does not cover a control. Same rule as the micro link above, same reason. */

/* Focus is a single rule for the whole system, and it is the NATIVE outline: a native ring
   survives a component that overrides box-shadow, which a painted ring does not. A component
   that removes it is a defect; one that invents its own is a second focus language. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute; left: -9999px;
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 var(--space-2);
}
.skip:focus {
  left: var(--space-3); top: var(--space-3); z-index: var(--z-4);
  background: var(--raised);
  border: var(--border) solid var(--accent);
  border-radius: var(--radius-sm);
}

.hr { height: var(--border); background: var(--line); border: 0; margin: 0; }
/* a note is a paragraph that qualifies something else: smaller, quieter, capped at a readable
   measure so it never runs the width of a wide screen */
.note { font-size: 12.5px; color: var(--muted); max-width: 46em; }

/* ── text roles ──────────────────────────────────────────────────────────── */
.prose, .m-prose { max-width: var(--measure); color: var(--ink2); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.tiny  { font-size: 11.5px; }
/* a small link is still a target: 24px of height even when the type is 11px */
a.tiny, .tiny a, .small a { display: inline-flex; align-items: center; min-height: 24px; }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* A micro label is the one type role that says METADATA rather than prose: uppercase, mono, tracked.
   It is not decoration. On a dense page it is what separates "43 apps" and "the keys" from the
   sentences beside them, and a sentence-case version of it reads as body copy that lost its size. */
.micro {
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.num   { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: calc(-1 * var(--border));
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.grid  { display: grid; gap: var(--gap-card); }
.g2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); }
/* A grid child defaults to min-width:auto, so one wide table widens its column past 1fr and
   the page scrolls sideways. Measured on six pages before this line existed. */
.grid > *, .split > *, .g2 > *, .g3 > *, .g4 > * { min-width: 0; }

.tblwrap { overflow-x: auto; max-width: 100%; }

/* ── layout utilities ────────────────────────────────────────────────────── */
/* Tokens, not values: .mt-3 is a step on the ladder, and a page that needs 14px has to argue
   with the ladder instead of writing 14px. */
.row    { display: flex; align-items: center; gap: var(--space-2); }
.row.wide { gap: var(--space-4); }
.row.top  { align-items: flex-start; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.grow   { flex: 1; min-width: 0; }
.clip   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.ml-1 { margin-left: var(--space-1); }
.hairline { flex: 1; height: var(--border); background: var(--line); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }

@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}

/* ── the app shell ───────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side {
  background: var(--sunken); border-right: var(--border) solid var(--line);
  padding: var(--space-3) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.side .sect {
  font: 600 var(--fs-micro)/1 var(--font-sans); color: var(--muted);
  padding: var(--space-3) var(--space-2) var(--space-1);
  letter-spacing: .02em;
}
.side a {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 32px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink2); font-size: 13.5px;
  text-decoration: none;
}
.side a:hover { background: var(--gray-50); text-decoration: none; }
.side a[aria-current="page"] {
  background: var(--raised); color: var(--ink); font-weight: 500;
  box-shadow: var(--shadow); border: var(--border) solid var(--line);
}
.side .ico { width: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.side .foot {
  margin-top: auto; padding: var(--space-3) 0 0 var(--space-2);
  border-top: var(--border) solid var(--line);
  display: flex; gap: var(--space-2); align-items: center;
}

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; gap: var(--space-3);
  /* WRAP, because the header now carries the estate row: brand, five links and a status group do not fit 390px,
     and a header that overflows is how a page starts scrolling sideways. Measured before the change: /answers/
     had no route to a sibling at all, so the row is new and the header had to learn to wrap. */
  flex-wrap: wrap; row-gap: var(--space-2); padding-block: var(--space-2);
  min-height: 56px; padding-inline: var(--space-5);
  border-bottom: var(--border) solid var(--line); background: var(--bg);
}
.top .crumb { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.top .right { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.search {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 240px; height: 32px; padding: 0 var(--space-2);
  border: var(--border) solid var(--line2); border-radius: var(--radius-sm);
  color: var(--muted); background: var(--bg); font-size: var(--fs-sm);
}

.body {
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5);
  min-width: 0;
}
.body > * { min-width: 0; }

.pagehead { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.pagehead .t h1 { font-size: var(--fs-h2); }
.pagehead .t p { margin-top: var(--space-1); color: var(--muted); font-size: 13.5px; max-width: 40em; }
.pagehead .act { margin-left: auto; display: flex; gap: var(--space-2); }

/* two panels that stack: settings (nav + form) and the inbox (list + message) */
@media (max-width: 760px) {
  .setgrid { grid-template-columns: 1fr !important; }
  .setgrid > nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .inboxgrid { grid-template-columns: 1fr !important; }
  .inboxgrid > div:first-child { border-right: 0; border-bottom: var(--border) solid var(--line); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .body { padding: var(--space-4); }
}
@media (max-width: 700px) {
  .top { padding: 0 var(--space-3); gap: var(--space-2); }
  .top .search { display: none; }
  .top .right { gap: var(--space-1); }
  .pagehead .act { width: 100%; margin-left: 0; }
}

/* ── the reading shell ───────────────────────────────────────────────────── */
/* For a long-form page with a rail: an answer, a reference, a post. Distinct from the marketing
   shell, which is a landing page: this one is a reading column first and everything else second.
   The cap is not a new number. It is the fleet's measured rule (marketing.css:58-66, 97% of 1280,
   87% of 1600, 73% of 1920) carried over, with the rail expressed in em so it scales with the type
   instead of with the viewport.

   The prose column resolves --measure from the PROSE size by construction: a block whose own font
   is 13px mono would resolve the same token narrower and sit ragged beside its neighbour. */
.read {
  /* A reading surface is set in the prose size, not the interface size: 14px is a table's size, and
     16px is what the fleet's own article pages were already using before this port. */
  font-size: var(--fs-prose);
  /* the rail and the gutter are part of the cap, so the PROSE TRACK is exactly --measure and every
     paragraph on the page resolves to one width. Cap without the gutter was 44px narrow, which the
     rendered gate reported as a ragged body on the first run. */
  max-inline-size: calc(var(--measure) + 18em + var(--space-6));
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
}
.read p { max-inline-size: var(--measure); }
.read h1 { font-size: var(--fs-h2); line-height: 1.2; }
.read-bar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border) solid var(--line);
  max-inline-size: calc(var(--measure) + 18em + var(--space-6));
  margin-inline: auto;
}
/* One column at EVERY width. A rail beside the prose gives its paragraphs a narrower track, and the
   rendered gate then reports the body as ragged because prose blocks no longer share a width. The
   aside lands last instead, which is where an ask belongs and where the fleet already put it on a
   phone. A reading page that needs a true sidebar is a different shell, not this one. */
.read-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.read-body > aside { order: 2; }
/* At desk the rail sits beside the article, and every prose block stays in the LEFT cell, so they
   all resolve to one track. Two prose widths on one page is what the rendered gate calls ragged. */
@media (min-width: 900px) {
  .read-body { grid-template-columns: minmax(0, 1fr) 18em; align-items: start; }
  .read-body > aside { order: 0; }
}
/* a directory: entries use the width instead of running down one narrow column */
.read-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  gap: var(--space-5) var(--space-6);
  list-style: none; margin: 0; padding: 0;
}

/* ── the marketing shell ─────────────────────────────────────────────────── */
.mk { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }
/* A reading column caps at 1080 on purpose. A console does not: four cards and a table inside 1080px of a
   1920px window wastes a third of the screen, which reads as a stripe and was measured on three emitted
   dashboards in a row. `.mk.wide` is the console width; the reading width is untouched. */
.mk.wide { max-width: 1440px; }
.mnav {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--space-8);
  border-bottom: var(--border) solid var(--line);
}
.mnav .links { display: flex; gap: var(--space-5); margin-left: var(--space-4); font-size: 13.5px; color: var(--ink2); }
.mnav .links a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink2); }
.mnav .links a:hover { color: var(--ink); }
.mnav .right { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

.hero {
  padding: var(--space-8) 0 var(--space-7);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-6); align-items: center;
}
.hero h1 { font-size: var(--fs-display); line-height: 1.06; letter-spacing: var(--tracking-hero); }
.hero p { margin-top: var(--space-4); font-size: var(--fs-prose); line-height: 1.55; color: var(--ink2); max-width: 31em; }
.hero .cta { display: flex; gap: var(--space-2); margin-top: var(--space-5); align-items: center; }

.eyebrow {
  font: 500 12.5px/1 var(--font-sans); color: var(--accent);
  margin-bottom: var(--space-3); display: flex; gap: var(--space-2); align-items: center;
}
.section { padding: var(--space-6) 0; border-top: var(--border) solid var(--line); }
.section h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
.lede { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-prose); max-width: 36em; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.feat .ico {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-prose); margin-bottom: var(--space-3);
}
.feat h3 { margin-bottom: var(--space-1); }
.feat p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.mfoot {
  border-top: var(--border) solid var(--line);
  padding: var(--space-5) 0; margin-top: var(--space-6);
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: var(--space-6) 0; }
  .hero h1 { font-size: var(--fs-h1); }
  .feat { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mnav { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) 0; }
  .mnav .links { order: 3; width: 100%; margin: 0; gap: var(--space-4); font-size: var(--fs-sm); }
  .mnav .right { margin-left: auto; }
}

/* ── the auth shell ──────────────────────────────────────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth .side2 {
  background: var(--sunken); border-right: var(--border) solid var(--line);
  padding: var(--space-6);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth .form { display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.auth .box { width: 100%; max-width: 352px; }
.auth h1 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
.auth .sub { margin-top: var(--space-1); color: var(--muted); font-size: 13.5px; }
.auth form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth .side2 { display: none; }
}

/* ── full-page states ────────────────────────────────────────────────────── */
.err {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: var(--space-6) var(--space-5);
}
.err .code { font: 600 76px/1 var(--font-sans); letter-spacing: -.04em; color: var(--ink); }
.err p { margin-top: var(--space-3); color: var(--muted); max-width: 30em; }

.overlay {
  background: var(--scrim);
  padding: var(--space-8) var(--space-5);
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 100vh;
}

/* One word, one line: for a label that must not split inside a wrapping row. */
.nowrap { white-space: nowrap; }