/* Screen-specific layout. No new colours; layout and spacing only. */

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); background: var(--bg); }
.login-box { width: 360px; max-width: 100%; }
.login-box .brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.login-box h1 { font: var(--t-h1); margin-bottom: var(--sp-1); }
.login-box .descriptor { font: var(--t-caption); color: var(--ink-3); margin-bottom: var(--sp-6); }
.login-box .field { margin-bottom: var(--sp-3); }
.login-box .err { color: var(--danger-text); font: var(--t-sm); margin-top: var(--sp-2); min-height: 18px; }
.login-box .note { font: var(--t-caption); color: var(--ink-3); margin-top: var(--sp-4); }

/* ---- home ---- */
.home-lower { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
@container (max-width: 1000px) { .home-lower { grid-template-columns: 1fr; } }
.home-lower { align-items: start; }
.next-item { font: var(--t-body); }
.next-item + .helper { margin: var(--sp-1) 0 var(--sp-3); }
.recent-list li { padding: var(--sp-2) 0; border-top: 1px solid var(--line); font: var(--t-sm); }
.recent-list li:first-child { border-top: none; }

/* ---- lineage ---- */
.lineage-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }
.segmented button { background: var(--surface); border: none; padding: 0 var(--sp-3); height: var(--control-h); font: var(--t-label); color: var(--ink-2); }
.segmented button[aria-pressed="true"] { background: var(--sel-bg); color: var(--ink); }
.lineage-body { display: grid; grid-template-columns: 1fr var(--list-w); gap: var(--sp-4); align-items: start; }
@media (max-width: 1024px) { .lineage-body { grid-template-columns: minmax(0, 1fr); } }
.graph-canvas { min-height: var(--graph-min); height: 60vh; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-3); }
.legend { display: flex; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; font: var(--t-caption); color: var(--ink-3); margin-top: var(--sp-2); }
.legend .swatch { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; }

/* ---- run ---- */
.run-steps { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.run-score { margin: 0 0 var(--sp-4); }
.run-step .caption { margin-top: var(--sp-1); padding-left: 30px; }
.run-step { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-3); background: var(--surface); }
.run-step .head { display: flex; align-items: center; gap: var(--sp-2); }
.run-step .num { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; font: var(--t-label); }
.run-step .dur { margin-left: auto; font: var(--t-caption); color: var(--ink-3); }
.run-step.done .num { background: var(--trusted-bg); color: var(--trusted-ink); }
.run-step.skipped { opacity: 0.7; }

/* ---- help ---- */
.help-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); align-items: start; }
@container (max-width: 940px) { .help-layout { grid-template-columns: 1fr; } }
.help-nav a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); color: var(--ink-2); font: var(--t-sm); }
.help-nav a[aria-current="page"] { background: var(--sel-bg); color: var(--ink); }
.help-content { max-width: 70ch; }
.help-layout h1 { font: var(--t-h1); margin: 0 0 var(--sp-3); }
.help-content > :first-child { margin-top: 0; }
.help-content h2 { font: var(--t-h2); }
.lede { font: var(--t-body); max-width: 70ch; margin-bottom: var(--sp-4); }
.start-cards .card { display: flex; flex-direction: column; }
.start-cards .card a { margin-top: auto; padding-top: var(--sp-3); }
.start-cards + .caption { margin-top: var(--sp-4); }
.help-nav { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.help-content h1, .help-content h2, .help-content h3 { margin: var(--sp-4) 0 var(--sp-2); }
.help-content p { margin: var(--sp-2) 0; }
.start-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@container (max-width: 900px) { .start-cards { grid-template-columns: 1fr; } }

/* ---- filters ---- */
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.search-input { height: var(--control-h); padding: 0 var(--sp-3); border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: var(--t-sm); min-width: 180px; }
select.control { height: var(--control-h); padding: 0 var(--sp-2); border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: var(--t-sm); }
.filter-chip { height: var(--control-h-sm); padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: var(--t-label); }
.filter-chip[aria-pressed="true"] { background: var(--sel-bg); color: var(--ink); border-color: var(--accent); }