/* Rohsam Ops — web cockpit.
   Tokens are authoritative, from the design handoff. Nothing here hard-codes a
   hex outside the token blocks; intent tints are derived with color-mix so the
   two themes stay in step. Dark distinguishes elevation with surface steps and
   borders; light has no surface step available (both are white), so it uses a
   shadow instead. */

:root {
    color-scheme: dark;

    --brand: #4A72E8; --positive: #30D158; --warning: #FF9F0A; --critical: #FF453A;
    --info: #0A84FF; --neutral: #8E8E93;
    --bg: #0B0C0E; --surface: #141619; --raised: #1B1E23; --sep: #26292F;
    --text: #F2F3F5; --text2: #9BA1AC; --text3: #6B7280;
    --shadow: none;

    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

    --r-sm: 8px; --r-in: 10px; --r-card: 12px; --r-lg: 14px; --r-modal: 16px;
    --r-pill: 999px;

    --font: 'Gill Sans', 'Gill Sans MT', -apple-system, BlinkMacSystemFont,
            'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, 'JetBrains Mono', monospace;

    --rail: 228px;
    --topbar: 56px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --brand: #2A50C0; --positive: #248A3D; --warning: #B25000; --critical: #D70015;
    --info: #0064D2; --neutral: #6E747C;
    --bg: #F4F6F9; --surface: #FFFFFF; --raised: #FFFFFF; --sep: #E3E6EA;
    --text: #101317; --text2: #5A626E; --text3: #8A929E;
    --shadow: 0 1px 2px rgba(16,19,23,.05), 0 4px 14px rgba(16,19,23,.06);
}

/* Fallback only for a browser with JS off; the head script normally stamps an
   explicit attribute, which must win over the OS preference either way. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --brand: #2A50C0; --positive: #248A3D; --warning: #B25000; --critical: #D70015;
        --info: #0064D2; --neutral: #6E747C;
        --bg: #F4F6F9; --surface: #FFFFFF; --raised: #FFFFFF; --sep: #E3E6EA;
        --text: #101317; --text2: #5A626E; --text3: #8A929E;
        --shadow: 0 1px 2px rgba(16,19,23,.05), 0 4px 14px rgba(16,19,23,.06);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Numbers are read, compared and watched change — they must not jitter. */
.num, .value, .hero-value, .age, .stat { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- shell ---------- */

.topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--topbar);
    display: flex; align-items: center; gap: var(--s4);
    padding: 0 var(--s5);
    background: var(--surface);
    border-bottom: 1px solid var(--sep);
}

.brand { display: flex; align-items: baseline; gap: var(--s2); flex: none; }
.brand .mark { width: 22px; height: 26px; color: var(--brand); }
.brand .word {
    font-size: 15px; font-weight: 650; letter-spacing: .18em; color: var(--text);
}
.brand .sub { font-size: 12.5px; color: var(--text3); letter-spacing: .04em; }

/* product lens — a primary control, never a menu */
.lens {
    display: flex; gap: 2px; padding: 3px;
    background: var(--raised); border: 1px solid var(--sep);
    border-radius: var(--r-pill);
}
.lens a {
    padding: 5px 14px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 600; color: var(--text2);
}
.lens a:hover { color: var(--text); }
.lens a.active { background: var(--brand); color: #fff; }

.topbar .spacer { margin-left: auto; }

.freshness {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--text2);
}
.live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--positive);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--raised); border: 1px solid var(--sep); color: var(--text2);
    cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--text3); }

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    border: none; cursor: pointer;
}

/* User menu: settings lives here, not in the rail. The rail is operational. */
.menu { position: relative; }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 208px; padding: var(--s2);
    background: var(--surface); border: 1px solid var(--sep);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    display: none; z-index: 50;
}
.menu[data-open="true"] .menu-panel { display: block; }
.menu-panel .who { padding: var(--s2) var(--s3) var(--s3); border-bottom: 1px solid var(--sep); }
.menu-panel .who strong { display: block; font-size: 13.5px; }
.menu-panel .who span { font-size: 12px; color: var(--text3); }
.menu-panel a, .menu-panel button {
    display: block; width: 100%; text-align: left;
    padding: 7px var(--s3); border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 500; color: var(--text2);
    background: none; border: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--raised); color: var(--text); }

.shell { display: flex; align-items: flex-start; }

.rail {
    position: sticky; top: var(--topbar);
    width: var(--rail); flex: 0 0 var(--rail);
    height: calc(100vh - var(--topbar));
    overflow-y: auto;
    padding: var(--s4) var(--s3);
    background: var(--surface);
    border-right: 1px solid var(--sep);
}

.rail-group {
    margin: var(--s4) 0 6px; padding: 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text3);
}
.rail-group:first-child { margin-top: 0; }

.rail a {
    display: flex; align-items: center; gap: var(--s2);
    padding: 7px 10px; border-radius: 9px;
    font-size: 13.5px; font-weight: 500; color: var(--text2);
}
.rail a:hover { background: var(--raised); color: var(--text); }
.rail a.active {
    background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--text);
}
.rail a .tail { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.count {
    min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; text-align: center;
}
.count.critical { background: color-mix(in oklab, var(--critical) 16%, transparent); color: var(--critical); }
.count.warning  { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.positive { background: var(--positive); }
.dot.warning  { background: var(--warning); }
.dot.critical { background: var(--critical); }
.dot.neutral  { background: var(--neutral); }
.dot.info     { background: var(--info); }

.content { flex: 1; min-width: 0; padding: var(--s6) 28px; }

@media (max-width: 900px) {
    .shell { flex-direction: column; }
    .rail {
        position: static; width: auto; flex: none; height: auto;
        display: flex; gap: var(--s1); overflow-x: auto;
        border-right: none; border-bottom: 1px solid var(--sep);
    }
    .rail-group { display: none; }
    .rail a { white-space: nowrap; }
    .content { padding: var(--s4); }
    .topbar { padding: 0 var(--s3); gap: var(--s3); }
    .brand .sub, .freshness { display: none; }
}

/* ---------- page furniture ---------- */

.page-head {
    display: flex; align-items: center; gap: var(--s3);
    flex-wrap: wrap; margin-bottom: var(--s5);
}
.page-head h1 { font-size: 21px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.page-head .stat { margin-left: auto; font-size: 12.5px; color: var(--text2); }

/* Freshness badge: live / snapshot / stale. Reused everywhere, because "how
   old is this?" is a question the operator asks of every number. */
.fresh {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--sep); color: var(--text3);
}
.fresh.live {
    color: var(--positive);
    border-color: color-mix(in oklab, var(--positive) 30%, transparent);
    background: color-mix(in oklab, var(--positive) 8%, transparent);
}
.fresh.stale {
    color: var(--warning);
    border-color: color-mix(in oklab, var(--warning) 35%, transparent);
    background: color-mix(in oklab, var(--warning) 8%, transparent);
}

.label {
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text3);
}

/* ---------- health banner: the two-second answer ---------- */

.health {
    display: flex; align-items: flex-start; gap: var(--s4);
    padding: var(--s5); margin-bottom: var(--s5);
    border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--sep);
    box-shadow: var(--shadow);
}
.health .glyph {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
.health .claim { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.health .why { font-size: 13px; color: var(--text2); margin-top: 2px; }
.health .tail { margin-left: auto; flex: none; }

.health.positive {
    background: color-mix(in oklab, var(--positive) 7%, var(--surface));
    border-color: color-mix(in oklab, var(--positive) 26%, var(--sep));
}
.health.positive .glyph { background: var(--positive); color: #06240F; }
.health.warning {
    background: color-mix(in oklab, var(--warning) 7%, var(--surface));
    border-color: color-mix(in oklab, var(--warning) 30%, var(--sep));
}
.health.warning .glyph { background: var(--warning); color: #241300; }
.health.critical {
    background: color-mix(in oklab, var(--critical) 7%, var(--surface));
    border-color: color-mix(in oklab, var(--critical) 30%, var(--sep));
}
.health.critical .glyph { background: var(--critical); color: #2B0605; }

/* ---------- what needs me ---------- */

.needs { margin-bottom: var(--s6); }
.needs-rows {
    background: var(--surface); border: 1px solid var(--sep);
    border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.need {
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--sep);
    position: relative;
}
.need:first-child { border-top: none; }
.need::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 4px; border-radius: 0 3px 3px 0; background: var(--neutral);
}
.need.critical::before { background: var(--critical); }
.need.warning::before  { background: var(--warning); }
.need .sev {
    width: 62px; flex: none; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; margin-left: var(--s3);
}
.need.critical .sev { color: var(--critical); }
.need.warning .sev  { color: var(--warning); }
.need .body { min-width: 0; flex: 1; }
.need .title { font-size: 14px; font-weight: 600; }
.need .meta { font-size: 12.5px; color: var(--text2); }
.need .age { font-size: 13px; font-weight: 650; flex: none; }
.need.critical .age { color: var(--critical); }
.need.warning .age  { color: var(--warning); }
.need .acts { display: flex; gap: var(--s2); flex: none; flex-wrap: wrap; }

/* ---------- plane roll-ups ---------- */

.planes {
    display: grid; gap: var(--s3); margin-bottom: var(--s6);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.plane {
    padding: var(--s4); border-radius: var(--r-card);
    background: var(--surface); border: 1px solid var(--sep);
    box-shadow: var(--shadow);
}
.plane:hover { border-color: var(--text3); }
.plane .head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.plane .head .fresh { margin-left: auto; }
.plane .line { font-size: 13.5px; color: var(--text2); }

/* ---------- cards ---------- */

.grid {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}

.card {
    background: var(--surface); border: 1px solid var(--sep);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    padding: 15px var(--s4) 18px;
    display: flex; flex-direction: column; gap: 3px; min-height: 96px;
}
.card:hover { border-color: var(--text3); }
.card .value { font-size: 27px; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; }
.card .foot { font-size: 12px; color: var(--text2); margin-top: auto; }
.card.critical .value { color: var(--critical); }
.card.warning .value  { color: var(--warning); }
.card.positive .value { color: var(--positive); }

.hero {
    grid-column: span 2;
    padding: 18px var(--s5) 20px;
}
.hero .hero-value { font-size: 46px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.hero .decomp { font-size: 12px; color: var(--text2); }
@media (max-width: 700px) { .hero { grid-column: span 1; } .hero .hero-value { font-size: 36px; } }

.delta {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700;
    background: color-mix(in oklab, var(--neutral) 16%, transparent); color: var(--text2);
}
.delta.positive { background: color-mix(in oklab, var(--positive) 16%, transparent); color: var(--positive); }
.delta.critical { background: color-mix(in oklab, var(--critical) 16%, transparent); color: var(--critical); }
.delta.warning  { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }

.spark { display: block; width: 100%; height: 34px; margin-top: var(--s2); }

/* ---------- rows (watchdog, on-call, activity, inbox) ---------- */

.rows { display: flex; flex-direction: column; gap: var(--s2); }

.group-label {
    margin: var(--s5) 0 var(--s2);
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.group-label.critical { color: var(--critical); }
.group-label.positive { color: var(--positive); }
.group-label.neutral  { color: var(--text3); }

.row {
    display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
    padding: var(--s3) var(--s4);
    background: var(--surface); border: 1px solid var(--sep);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    position: relative;
}
.row.critical { border-left: 4px solid var(--critical); }
.row.warning  { border-left: 4px solid var(--warning); }
.row.positive { border-left: 4px solid var(--positive); }
.row .title { font-size: 14px; font-weight: 600; }
.row .meta  { font-size: 12.5px; color: var(--text2); }
.row .col { display: flex; flex-direction: column; gap: 2px; }
.row .spacer { margin-left: auto; }
.row .acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* The silent group is the highest-value thing on the site; it gets a container
   that cannot be mistaken for the healthy ones. */
.silent-group {
    border: 1px solid color-mix(in oklab, var(--critical) 40%, var(--sep));
    border-radius: var(--r-lg); padding: var(--s3);
    background: color-mix(in oklab, var(--critical) 4%, transparent);
}
.silent-group .row { background: color-mix(in oklab, var(--critical) 6%, var(--surface)); }

.punctuality { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.punctuality i { width: 5px; border-radius: 1px; background: var(--positive); height: 9px; }
.punctuality i.late { background: var(--warning); height: 12px; }
.punctuality i.miss { background: var(--critical); height: 14px; }

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    background: color-mix(in oklab, var(--neutral) 16%, transparent); color: var(--text2);
}
.pill.critical { background: color-mix(in oklab, var(--critical) 16%, transparent); color: var(--critical); }
.pill.warning  { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }
.pill.positive { background: color-mix(in oklab, var(--positive) 16%, transparent); color: var(--positive); }
.pill.brand    { background: color-mix(in oklab, var(--brand) 16%, transparent); color: var(--brand); }

/* ---------- buttons ---------- */

.btn {
    padding: 6px 12px; border-radius: var(--r-sm);
    background: var(--raised); border: 1px solid var(--sep); color: var(--text);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--text3); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Re-auth actions look different *before* they are pressed — the key icon is
   the promise that this will demand a touch. Routine actions never carry it. */
.btn.reauth {
    border-color: color-mix(in oklab, var(--critical) 45%, var(--sep));
    color: var(--critical); background: color-mix(in oklab, var(--critical) 6%, transparent);
}
.btn.reauth .hint { color: var(--text3); font-weight: 500; margin-left: 4px; }

/* ---------- empty / loading ---------- */

.empty {
    padding: var(--s10) var(--s4); text-align: center;
    border: 1px dashed var(--sep); border-radius: var(--r-lg); color: var(--text2);
}
.empty .big { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }

.skeleton {
    min-height: 96px; border-radius: var(--r-card);
    background: linear-gradient(90deg, var(--surface) 25%, var(--raised) 37%, var(--surface) 63%);
    background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

@media (prefers-reduced-motion: reduce) {
    .skeleton, .live-dot { animation: none; }
}

/* ---------- auth screens ---------- */

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
.auth-card {
    width: 100%; max-width: 400px; text-align: center;
    padding: var(--s8); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--sep); box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 21px; font-weight: 650; margin: 0 0 var(--s2); }
.auth-card p { color: var(--text2); font-size: 13.5px; margin: 0 0 var(--s6); }
.auth-card .btn { width: 100%; padding: 10px; font-size: 14px; }
.auth-card .brand { justify-content: center; margin-bottom: var(--s5); }
.error { margin-top: var(--s4); font-size: 13px; color: var(--critical); min-height: 1em; }

/* ---------- docs: a reading surface ---------- */

.doc-layout { display: flex; gap: var(--s8); align-items: flex-start; }
.doc-main { flex: 1; min-width: 0; max-width: 74ch; }
.doc-outline {
    position: sticky; top: calc(var(--topbar) + var(--s6));
    width: 220px; flex: none; padding-left: var(--s5);
    border-left: 1px solid var(--sep);
}
.doc-outline a { display: block; padding: 4px 0; font-size: 12.5px; color: var(--text2); }
.doc-outline a:hover { color: var(--text); }
@media (max-width: 1100px) { .doc-outline { display: none; } }

.prose { font-size: 15.5px; line-height: 1.75; color: var(--text2); }
.prose > :first-child { margin-top: 0; }
.prose h1 { font-size: 30px; font-weight: 650; color: var(--text); margin: 0 0 var(--s4); letter-spacing: -.015em; }
.prose h2 { font-size: 20px; font-weight: 650; color: var(--text); margin: 34px 0 var(--s3); }
.prose h3 { font-size: 16px; font-weight: 650; color: var(--text); margin: var(--s6) 0 var(--s2); }
.prose p { margin: 0 0 var(--s4); }
.prose strong { color: var(--text); font-weight: 650; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--text3); }
.prose code {
    font-family: var(--mono); font-size: 13px;
    background: var(--raised); border: 1px solid var(--sep);
    padding: 1px 5px; border-radius: 5px; color: var(--text);
}
/* Near-black in both themes: code is a different kind of content and reads
   better set apart than tinted to match the page. */
.prose pre {
    background: #0C0E11; border: 1px solid var(--sep);
    border-radius: var(--r-card); padding: var(--s4); margin: 0 0 var(--s4);
    overflow-x: auto; font-size: 12.5px; line-height: 1.7;
}
.prose pre code { background: none; border: none; padding: 0; color: #E6E8EB; white-space: pre; }
.prose blockquote {
    margin: 0 0 var(--s4); padding: var(--s2) var(--s4);
    border-left: 3px solid var(--brand); background: var(--surface);
    border-radius: 0 var(--r-card) var(--r-card) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: none; border-top: 1px solid var(--sep); margin: var(--s8) 0; }
.prose img { max-width: 100%; border-radius: var(--r-card); }

.table-scroll { overflow-x: auto; margin: 0 0 var(--s4); }
.prose table {
    border-collapse: collapse; width: 100%; font-size: 13.5px;
    border: 1px solid var(--sep); border-radius: var(--r-card); overflow: hidden;
}
.prose thead { background: var(--raised); }
.prose th {
    text-align: left; padding: var(--s2) var(--s3); color: var(--text);
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--sep);
}
.prose td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--sep); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: none; }

.doc-index-row {
    display: flex; align-items: center; gap: var(--s3);
    padding: 10px var(--s3); border-radius: var(--r-sm);
}
.doc-index-row:hover { background: var(--raised); }
.doc-index-row .id { font-family: var(--mono); font-size: 12.5px; color: var(--text3); width: 88px; flex: none; }
.doc-index-row .t { font-size: 14px; font-weight: 600; color: var(--text); }
.doc-index-row .when { margin-left: auto; font-size: 12px; color: var(--text3); }

.search {
    width: 100%; max-width: 420px; padding: 8px var(--s3);
    background: var(--raised); border: 1px solid var(--sep);
    border-radius: var(--r-in); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.search::placeholder { color: var(--text3); }

/* ---------- settings ---------- */

.tabs { display: flex; gap: var(--s1); margin-bottom: var(--s6); flex-wrap: wrap; }
.tabs a {
    padding: 6px 12px; border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 600; color: var(--text2);
}
.tabs a:hover { background: var(--raised); color: var(--text); }
.tabs a.active { background: color-mix(in oklab, var(--brand) 14%, transparent); color: var(--text); }

.panel {
    padding: var(--s5); border-radius: var(--r-lg); max-width: 720px;
    background: var(--surface); border: 1px solid var(--sep); box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.field input, .field select {
    padding: 8px var(--s3); background: var(--raised);
    border: 1px solid var(--sep); border-radius: var(--r-in);
    color: var(--text); font-size: 13.5px; font-family: inherit;
}
.note { font-size: 12.5px; color: var(--text3); margin-top: var(--s3); }

/* The R mark: an outlined glyph, so there is no runtime font dependency and
   it renders identically on every machine. Height-driven; the viewBox keeps
   the aspect ratio. */
.brand-mark {
    height: 20px; width: auto; display: block;
    color: var(--brand); flex: none;
}

/* FocusOnNavigate moves focus to the h1 for screen readers on every
   navigation. That is correct behaviour, but it also draws a focus ring round
   the heading for sighted users who never pressed anything — so suppress it
   there only, and nowhere else. */
h1:focus, h1:focus-visible { outline: none; }

/* ---------- public landing ---------- */

/* Deliberately spare. It carries no company information — no counts, no
   product names, no status — because anyone on the internet can load it. */
.landing { text-align: center; max-width: 420px; }
.landing-mark { height: 56px; margin: 0 auto var(--s5); }
.landing-word {
    font-size: 26px; font-weight: 650; letter-spacing: .22em; color: var(--text);
}
.landing-sub {
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text3); margin-top: 2px;
}
.landing-line {
    margin: var(--s6) 0 var(--s8);
    font-size: 14.5px; line-height: 1.65; color: var(--text2);
}
.landing-cta { display: inline-block; padding: 10px var(--s8); font-size: 14px; }