/* narad.css — devkrity.com/narad/. Tokens only (tokens-narad.css).
   Monochrome spec sheet: hairline grids, sans for prose, mono only for
   protocol data. One signal accent (orange). No gradient anywhere.
   Load: base.css → tokens-narad.css → narad.css → navigation.css */

.narad .brand { --brand-mark-size:30px; gap:.5rem; font-size:1.1875rem; }

/* hairline section rules instead of alternating fills */
.narad main > section { border-top:var(--border-hair) solid var(--color-line); }
.narad main > section:first-child { border-top:0; }
.n-section-label { font:500 .8125rem/1.3 var(--font-mono); color:var(--color-muted); }
.n-section-label::before { content:""; display:inline-block; width:8px; height:8px; margin-right:.5rem; background:var(--color-signal); vertical-align:.05em; }

/* ---------- Hero ---------- */
.n-hero { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--gap); align-items:start; padding-block:clamp(3rem, 1.5rem + 6vw, 7rem) var(--section); }
.n-hero h1 { font-size:clamp(2.75rem, 1.6rem + 4.5vw, 5rem); line-height:1.02; letter-spacing:-.03em; }
.n-hero h1 em { font-style:normal; }
.n-name-note { margin-top:var(--space-2xs); font-size:var(--step--1); color:var(--color-muted); max-width:34rem; }
.n-deck { margin-top:var(--space-m); font-size:var(--step-1); color:var(--color-muted); max-width:34rem; }
.n-install { margin-top:var(--space-l); }
.n-install-meta { margin-top:var(--space-2xs); font-size:var(--step--1); color:var(--color-muted); }
.n-install-meta a { font-weight:600; }
.n-actions { margin-top:var(--space-l); }
@media (max-width:960px) { .n-hero { grid-template-columns:1fr; } }

/* hero trace: a hairline table of host facts (illustrative) */
.session-visual { margin:0; border:var(--border-hair) solid var(--color-line-ui); background:var(--color-card); }
.session-top, .session-status { display:flex; justify-content:space-between; gap:var(--space-s); padding:.625rem .875rem; font:500 .75rem/1.3 var(--font-mono); color:var(--color-muted); }
.session-top { border-bottom:var(--border-hair) solid var(--color-line); }
.session-status { border-top:var(--border-hair) solid var(--color-line); }
.session-status b { font-weight:500; } /* mono has no 600 */
.session-live i { display:inline-block; width:7px; height:7px; margin-right:.4rem; background:var(--color-signal); border-radius:50%; }
.session-events { display:grid; }
.session-events .event { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.125rem var(--space-s); padding:.625rem .875rem; border-bottom:var(--border-hair) solid var(--color-line); }
.session-events .event b { font:500 .875rem/1.3 var(--font-mono); color:var(--color-heading); }
.session-events .event code { grid-column:1; padding:0; background:none; font:400 .75rem/1.4 var(--font-mono); color:var(--color-muted); }
.session-events .event time { grid-column:2; grid-row:1 / span 2; align-self:center; font:400 .75rem/1 var(--font-mono); color:var(--color-muted); font-variant-numeric:tabular-nums; }
.session-events .event-kind { display:none; } /* the "AUTHORITY EVENT" label moves to the column head */
.session-events .disconnect, .session-events .replay-event { display:flex; gap:var(--space-s); align-items:center; justify-content:space-between; padding:.75rem .875rem; border-bottom:var(--border-hair) solid var(--color-line); background:var(--color-surface); }
.session-events .disconnect { box-shadow:inset 3px 0 0 var(--color-signal); }
.session-events .disconnect b, .session-events .replay-event b { display:block; font:500 .75rem/1.3 var(--font-mono); color:var(--color-heading); }
.session-events .disconnect small, .session-events .replay-event small { display:block; font-size:.8125rem; color:var(--color-muted); }
.session-events .event-current b { color:var(--color-accent); }
.visual-caption { display:flex; justify-content:space-between; gap:var(--space-s); margin-top:var(--space-2xs); font:400 .75rem/1.4 var(--font-mono); color:var(--color-muted); }

/* ---------- Why ---------- */
.n-why { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--gap); padding-block:var(--section); }
.n-why h2 { font-size:var(--step-4); }
.n-why p { font-size:var(--step-1); max-width:var(--measure); }
@media (max-width:860px) { .n-why { grid-template-columns:1fr; } }

/* ---------- Capabilities: spec rows (index · name+prose · field) ---------- */
.n-capabilities { padding-block:var(--section); }
.n-cap-heading { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--gap); }
.n-cap-heading h2 { font-size:var(--step-4); }
.n-cap-heading p { color:var(--color-muted); font-size:var(--step-1); max-width:var(--measure); }
.n-feature-list { margin-top:var(--space-xl); border-top:var(--border-hair) solid var(--color-heading); }
.n-feature-list article { display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 14rem) var(--tap); gap:var(--space-m); align-items:start; padding-block:var(--space-m); border-bottom:var(--border-hair) solid var(--color-line); }
.n-feature-list h3 { font-size:var(--step-2); }
.n-feature-list p { margin-top:var(--space-2xs); color:var(--color-muted); max-width:var(--measure); }
.n-feature-list .feature-snippet { justify-self:start; padding:.25rem .5rem; border:var(--border-hair) solid var(--color-line); background:var(--color-code-bg); font-size:.8125rem; }
.n-feature-list article > a { display:grid; place-items:center; width:var(--tap); height:var(--tap); border:var(--border-hair) solid var(--color-line-ui); text-decoration:none; }
.profile-strip { display:flex; flex-wrap:wrap; gap:var(--space-2xs); align-items:center; padding-block:var(--space-m); font-size:var(--step--1); color:var(--color-muted); }
.profile-strip strong { margin-right:var(--space-2xs); color:var(--color-heading); font-weight:600; }
.profile-strip span { padding:.125rem .5rem; border:var(--border-hair) solid var(--color-line); font:400 .8125rem/1.5 var(--font-mono); color:var(--color-text); }
@media (max-width:860px) {
  .n-cap-heading { grid-template-columns:1fr; }
  .n-feature-list article { grid-template-columns:minmax(0,1fr) var(--tap); }
  .n-feature-list .feature-snippet { grid-column:1; }
  .n-feature-list article > a { grid-column:2; grid-row:1; }
}

/* ---------- Model: SVG diagram replaces the → div diagram ---------- */
.n-problem { padding-block:var(--section); }
.n-problem h2 { font-size:var(--step-4); max-width:20ch; }
.problem-copy { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); margin-top:var(--space-l); }
.problem-copy p { color:var(--color-muted); }
.problem-copy strong { color:var(--color-heading); }
.n-diagram { margin:var(--space-xl) 0 0; padding:var(--space-m); border:var(--border-hair) solid var(--color-line-ui); background:var(--color-card); }
.n-diagram svg { width:100%; height:auto; }
.n-diagram figcaption { margin-top:var(--space-s); font-size:var(--step--1); color:var(--color-muted); }
.technical-link { margin-top:var(--space-m); }
@media (max-width:860px) { .problem-copy { grid-template-columns:1fr; } }

/* ---------- Ordering ---------- */
.n-ordering { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--gap); padding-block:var(--section); }
.n-ordering h2 { font-size:var(--step-4); }
.ordering-heading p { margin-top:var(--space-s); color:var(--color-muted); }
.sequence-table { width:100%; border-top:var(--border-hair) solid var(--color-heading); font-size:var(--step--1); }
.sequence-table th, .sequence-table td { padding:.75rem .5rem .75rem 0; text-align:left; border-bottom:var(--border-hair) solid var(--color-line); }
.sequence-table th { font-weight:600; color:var(--color-muted); }
.ordering-notes { display:grid; gap:var(--space-s); margin-top:var(--space-l); color:var(--color-muted); }
@media (max-width:860px) { .n-ordering { grid-template-columns:1fr; } }

/* ---------- Lifecycle: the one numbered style, as a sequence ---------- */
.n-lifecycle { padding-block:var(--section); }
.lifecycle-heading { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--gap); }
.lifecycle-heading h2 { font-size:var(--step-4); }
.lifecycle-heading p { color:var(--color-muted); max-width:var(--measure); }
.lifecycle-heading .lifecycle-boundary { margin-top:var(--space-s); padding-left:var(--space-s); border-left:3px solid var(--color-signal); color:var(--color-text); }
.lifecycle-steps { grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:var(--space-xl); }
.lifecycle-steps h3 { font-size:var(--step-1); }
@media (max-width:960px) { .lifecycle-heading { grid-template-columns:1fr; } .lifecycle-steps { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .lifecycle-steps { grid-template-columns:1fr; } }

/* ---------- Packages ---------- */
.n-spec { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--gap); padding-block:var(--section); }
.narad-journal { margin:0; align-self:start; border:var(--border-hair) solid var(--color-line-ui); background:var(--color-code-bg); }
.narad-journal pre {
  margin:0; padding:var(--space-m); font:13px/1.6 var(--font-mono); color:var(--color-code-text);
  overflow-x:auto;
}
.narad-journal figcaption { padding:.625rem var(--space-m); border-top:var(--border-hair) solid var(--color-line); font-size:var(--step--1); color:var(--color-muted); }
.spec-copy h2 { font-size:var(--step-4); }
.package-list { margin-top:var(--space-l); border-top:var(--border-hair) solid var(--color-heading); }
.package-list p { display:grid; gap:var(--space-3xs); padding-block:var(--space-s); border-bottom:var(--border-hair) solid var(--color-line); }
.package-list code { justify-self:start; padding:0; background:none; font-weight:500; font-size:.9375rem; }
.package-list span { color:var(--color-muted); font-size:var(--step--1); }
.spec-copy .actions { margin-top:var(--space-l); }
.spec-status { margin-top:var(--space-s); font-size:var(--step--1); color:var(--color-muted); }
@media (max-width:960px) { .n-spec { grid-template-columns:minmax(0,1fr); } }

/* ---------- Extracted + start (host responsibilities) ---------- */
.n-extracted { padding-block:var(--space-xl); }
.n-extracted h2 { font-size:var(--step-2); }
.n-extracted p { margin-top:var(--space-2xs); color:var(--color-muted); }
.n-start { padding-block:var(--section); }
.n-start h2 { font-size:var(--step-5); max-width:18ch; }
.n-start p { margin-top:var(--space-m); max-width:var(--measure); font-size:var(--step-1); color:var(--color-muted); }
.n-start .actions { margin-top:var(--space-l); }

/* Page container for top-level sections. The section class attributes stay exactly as tested
   (e.g. <section class="n-hero">), so the container lives here instead of a .wrap class. */
.narad main > section { width:100%; max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }