/* 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 { display: inline-flex; align-items: center; min-height: 24px; }

/* 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; }
.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);
  min-height: 56px; padding: 0 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); }
.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;
}