/* Roote platform console: prospect demos. */

.checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.input-color { padding: 0.25rem; height: 2.75rem; cursor: pointer; }

/* Wizard: form on the left, a live preview that stays in view on the right. */
.demo-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-4); align-items: start; max-width: 68rem; }
.demo-preview-wrap { position: sticky; top: var(--s-4); display: grid; gap: var(--s-2); }
@media (max-width: 60rem) { .demo-wizard { grid-template-columns: minmax(0, 1fr); } .demo-preview-wrap { position: static; } }

.demo-preview { padding: var(--s-4); display: grid; gap: var(--s-3); justify-items: start; }
.dp-bar { display: flex; align-items: center; gap: var(--s-2); }
.dp-crest { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: var(--p-brand); color: #fff; font-family: var(--font-serif, serif); font-weight: 600; }
.dp-name { font-family: var(--font-serif, serif); font-size: 1.35rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.dp-motto { color: var(--ink-3); font-style: italic; font-size: var(--t-sm); min-height: 1em; }
.dp-btn { display: inline-flex; padding: 0.55rem 1.4rem; border-radius: 999px; background: var(--p-brand); color: #fff; font-weight: 700; font-size: var(--t-sm); }
.dp-chip { display: inline-flex; padding: 0.15rem 0.6rem; border-radius: 999px; border: 2px solid var(--p-accent); font-size: var(--t-xs); font-weight: 700; }

/* Demo page */
.demo-progress { height: 0.5rem; border-radius: 999px; background: var(--ground-2); overflow: hidden; }
.demo-progress > span { display: block; height: 100%; background: var(--school-brand); transition: width .4s; }
.link-once { display: flex; gap: var(--s-2); align-items: center; }
.link-once input { flex: 1; min-width: 0; }
.usage-bar { display: block; height: 0.4rem; border-radius: 999px; background: var(--school-brand); opacity: .75; min-width: 0.25rem; }
.danger-zone { border-color: var(--neg-line, var(--line)); }

/* Console header on phones: name and links on one line, the signed-in name hidden. */
@media (max-width: 40rem) {
  .briefing-bar { flex-wrap: wrap; gap: var(--s-2); }
  .briefing-bar > .muted { display: none; }
  .briefing-bar b { white-space: nowrap; }
  .briefing-nav a { white-space: nowrap; }
}

/* WL-3 console */
.briefing-nav { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.state { display: inline-flex; align-items: center; gap: 4px; }
.state-active { color: var(--pos); } .state-expiring { color: var(--warn); } .state-grace, .state-read_only { color: var(--warn); font-weight: 600; } .state-restricted, .state-suspended { color: var(--neg); font-weight: 600; } .state-none { color: var(--ink-3); }
.console-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s-4); align-items: start; }
.dns { font-family: var(--font-mono); font-size: var(--t-xs); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--s-2) var(--s-3); overflow-x: auto; white-space: nowrap; }
.confirm-code { max-width: 14rem; }

/* ============ Health and readiness (Brief 09, B8) ============ */
.hz-top { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
.hz-overall { position: relative; display: grid; place-items: center; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.hz-overall svg { width: 10rem; height: 10rem; transform: rotate(-90deg); }
.hz-overall circle { fill: none; stroke-width: 10; }
.hz-overall .track { stroke: var(--line); }
.hz-overall .bar { stroke-linecap: round; transition: stroke-dasharray .6s var(--ease-out); }
.hz-overall > div { position: absolute; display: grid; place-items: center; text-align: center; }
.hz-overall b { font-size: 2.6rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.hz-overall b small { font-size: 1rem; }
.hz-overall span { font-size: var(--t-xs); color: var(--ink-3); }
.hz-good .bar { stroke: #2f8f5b; } .hz-fair .bar { stroke: #c9861a; } .hz-poor .bar { stroke: #c2412d; }
.hz-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-3); }
.hz-cat { display: grid; gap: var(--s-1); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.hz-cat > span:first-child { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }
.hz-cat b { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.03em; }
.hz-cat small { font-size: var(--t-xs); color: var(--ink-3); }
.hz-bar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.hz-bar i { display: block; height: 100%; border-radius: 6px; }
.hz-good .hz-bar i { background: #2f8f5b; } .hz-fair .hz-bar i { background: #c9861a; } .hz-poor .hz-bar i { background: #c2412d; } .hz-none .hz-bar i { background: var(--line); }
.hz-good b { color: #2f8f5b; } .hz-fair b { color: #b5770f; } .hz-poor b { color: #c2412d; }
.hz-method { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-4) 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 70rem; }
.hz-filter { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.hz-filter a { padding: 0.35rem 0.8rem; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; }
.hz-filter a[aria-current] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.hz-group { margin-bottom: var(--s-3); }
.hz-group ul { display: grid; }
.hz-check { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); align-items: start; }
.hz-check p { margin: 2px 0 0; font-size: var(--t-sm); }
.hz-check .badge { justify-self: start; }
.hz-sev { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; margin-left: var(--s-1); }
.hz-sev-critical { color: #c2412d; }
.hz-history { display: flex; align-items: flex-end; gap: 3px; height: 5rem; }
.hz-history span { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: #2f8f5b; opacity: .85; }
.hz-history .hz-fair { background: #c9861a; } .hz-history .hz-poor { background: #c2412d; }
.hz-pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-sm); }
.hz-pill.hz-good { background: #e3f3ea; color: #1f6d43; } .hz-pill.hz-fair { background: #fbf0d9; color: #8a5a07; } .hz-pill.hz-poor { background: #fbe4e0; color: #9b2d1d; }
html[data-theme="dark"] .hz-pill.hz-good { background: #163a27; color: #8fd8ae; } html[data-theme="dark"] .hz-pill.hz-fair { background: #3a2c10; color: #f0c56f; } html[data-theme="dark"] .hz-pill.hz-poor { background: #3d1913; color: #f2a093; }
@media (max-width: 48rem) { .hz-top { grid-template-columns: minmax(0, 1fr); } .hz-check { grid-template-columns: minmax(0, 1fr); } }