*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }

.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; }
.display { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 0.95; }
.label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Chamfered shapes clip outlines, so they draw focus inside their own edge. */
.focus-inset:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--bg); }

/* Buttons: flat plates, hairline, 2px radius. No pills, no gradients. */
.btn {
    display: inline-flex; align-items: center; gap: var(--s2);
    height: 32px; padding: 0 var(--s3);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    cursor: pointer; white-space: nowrap; font-weight: 500;
    transition: border-color var(--t-settle) var(--ease-settle), transform 80ms;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.ink { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { border-color: var(--hairline); }
.btn.you { background: var(--sig-you); color: #151515; border-color: var(--sig-you); }
.btn.alarm { color: var(--sig-alarm-text); border-color: var(--sig-alarm-text); background: transparent; }
.btn.small { height: 24px; padding: 0 var(--s2); font-size: 12px; }
a.btn { text-decoration: none; }
.btn .kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); border: 1px solid var(--hairline); padding: 0 4px; border-radius: var(--radius); }

.field { display: grid; gap: var(--s1); }
.field > span, .field > label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.input, .field input, .field textarea, .field select {
    width: 100%; min-height: 32px; padding: 6px var(--s2);
    background: var(--raised); border: 1px solid var(--field-border); border-radius: var(--radius);
}
.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field textarea { min-height: 72px; resize: vertical; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
/* A mouse click darkens the border only; the keyboard ring above stays. */
.input:focus:not(:focus-visible), .field input:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible), .field select:focus:not(:focus-visible) { outline: none; }
.check { display: flex; gap: var(--s2); align-items: center; }

.hairline { border: 0; border-top: 1px solid var(--hairline); margin: var(--s3) 0; }

/* Ticks: progress is filled segments, never a spinner. */
.ticks { display: inline-flex; gap: 2px; align-items: center; }
.ticks i { width: 6px; height: 10px; background: var(--hairline); display: block; }
.ticks i.on { background: var(--ink); }

/* Segment meter: VU style. */
.meter { display: flex; gap: 2px; height: 12px; }
.meter i { flex: 1; background: var(--grid); border: 1px solid var(--hairline); }
.meter i.on { background: var(--ink); border-color: var(--ink); }
.meter i.on.hot { background: var(--sig-you); border-color: var(--sig-you); }
.meter i.on.over { background: var(--sig-alarm); border-color: var(--sig-alarm); }

/* Breathing light: waiting, never a spinner. */
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.breathe { animation: breathe 2.4s ease-in-out infinite; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.shake { animation: shake 320ms ease-out; }

.light { width: 8px; height: 8px; border-radius: 50%; background: var(--grid); border: 1px solid var(--hairline); display: inline-block; flex: none; }
.light.live { background: var(--sig-live); border-color: var(--sig-live); box-shadow: 0 0 0 1px var(--light-ring), 0 0 6px var(--sig-live); }
.light.you { background: var(--sig-you); border-color: var(--sig-you); box-shadow: 0 0 0 1px var(--light-ring), 0 0 6px var(--sig-you); }
.light.alarm { background: var(--sig-alarm); border-color: var(--sig-alarm); box-shadow: 0 0 0 1px var(--light-ring); }
.light.ok { background: var(--sig-done); border-color: var(--sig-done); box-shadow: 0 0 0 1px var(--light-ring); }
.light.ink { background: var(--ink); border-color: var(--ink); }

.hatch { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--hairline) 4px 5px); }

:root[data-motion="calm"] .breathe { animation: none; opacity: 1; }
:root[data-motion="calm"] *, :root[data-motion="calm"] *::before, :root[data-motion="calm"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
    .breathe { animation: none; opacity: 1; }
    .shake { animation: none; outline: 2px solid var(--sig-alarm); }
}

#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 8px 16px; background: var(--sig-alarm); color: #fff; font-size: 13px; }
#blazor-error-ui a { color: #fff; }
body:has(.shell) { overflow: hidden; }

.diff { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; background: var(--bg); border: 1px solid var(--hairline); padding: var(--s3); max-height: 320px; overflow: auto; }
.diff div { white-space: pre; }
.diff .add { color: var(--sig-done-text); }
.diff .del { color: var(--sig-alarm-text); }
.diff .same { color: var(--ink-2); }