/* Read at arm's length, outdoors, often in sunlight, sometimes at night. Dark ground, big
   type, and colour never carrying meaning on its own. */

:root {
    --bg: #0d1117;
    --panel: #161b22;
    --panel-edge: #2b3440;
    --ink: #e9eef5;
    --ink-dim: #98a5b4;
    --accent: #4aa3ff;
    --good: #37c46b;
    --warn: #ffb648;
    --bad: #ff5d5d;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
}

.app-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
}

h1 {
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    margin: 0 0 2px;
}

h2 {
    font-size: 1.05rem;
    margin: 0 0 10px;
    color: var(--ink);
}

.subtle {
    color: var(--ink-dim);
    font-size: 0.9rem;
    margin: 0;
}

.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
}

.topbar a {
    color: var(--ink-dim);
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px dotted var(--panel-edge);
}

.card {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}

.card.attention {
    border-color: var(--warn);
}

.card.bad {
    border-color: var(--bad);
}

button {
    font: inherit;
    font-weight: 600;
    color: #06121f;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    padding: 18px 20px;
    width: 100%;
    cursor: pointer;
    touch-action: manipulation;
}

button.secondary {
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid var(--panel-edge);
    padding: 12px 16px;
    font-weight: 500;
}

button.danger {
    background: transparent;
    color: var(--bad);
    border: 1px solid var(--bad);
    padding: 12px 16px;
    font-weight: 500;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

.start-button {
    font-size: 1.3rem;
    padding: 26px 20px;
}

/* Instructions the user follows while holding the phone. */
.steps {
    margin: 0;
    padding-left: 20px;
}

.steps li {
    margin-bottom: 8px;
}

.steps strong {
    color: var(--accent);
}

/* Live numbers. */
.readout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}

.readout .value {
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 600;
    display: block;
}

.readout .label {
    color: var(--ink-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.readout .value.good {
    color: var(--good);
}

.readout .value.warn {
    color: var(--warn);
}

/* Progress bar for the settle and averaging waits. */
.progress {
    height: 10px;
    border-radius: 999px;
    background: #0a0f16;
    border: 1px solid var(--panel-edge);
    overflow: hidden;
    margin-top: 12px;
}

.progress > div {
    height: 100%;
    background: var(--accent);
    transition: width 120ms linear;
}

/* The audio state, shown as well as sounded. */
.tone {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 14px;
    padding: 18px 16px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 2px solid var(--panel-edge);
    background: var(--panel);
}

.tone .glyph {
    font-size: 1.8rem;
    line-height: 1;
}

.tone.keep-going {
    border-color: var(--accent);
    color: var(--accent);
}

.tone.perfect {
    border-color: var(--good);
    color: var(--good);
}

.tone.back-up {
    border-color: var(--warn);
    color: var(--warn);
}

.tone.cant-level {
    border-color: var(--bad);
    color: var(--bad);
}

.tone .why {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-dim);
    letter-spacing: 0;
}

/* Per-wheel instructions under the diagram. */
.placements {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.placements li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--panel-edge);
}

.placements .corner {
    font-weight: 700;
    grid-column: 1 / -1;
}

.placements .detail {
    grid-column: 1 / -1;
    color: var(--ink-dim);
    font-size: 0.92rem;
}

.placements .detail b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.banner {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.banner.warn {
    background: rgba(255, 182, 72, 0.12);
    border: 1px solid var(--warn);
    color: var(--warn);
}

.banner.bad {
    background: rgba(255, 93, 93, 0.12);
    border: 1px solid var(--bad);
    color: var(--bad);
}

.banner.good {
    background: rgba(55, 196, 107, 0.12);
    border: 1px solid var(--good);
    color: var(--good);
}

.big-verdict {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--good);
    padding: 10px 0 4px;
}

.gain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.gain-table th,
.gain-table td {
    text-align: left;
    padding: 7px 6px;
    border-bottom: 1px solid var(--panel-edge);
}

.gain-table th {
    color: var(--ink-dim);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.field {
    display: block;
    margin-bottom: 12px;
}

.field span {
    display: block;
    color: var(--ink-dim);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.field input,
.field select {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #0a0f16;
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    padding: 9px 10px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

/* Boot placeholder, replaced as soon as Blazor starts. */
.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 30vh;
    color: #98a5b4;
    font-family: system-ui, sans-serif;
}

.boot-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #2b3440;
    border-top-color: #4aa3ff;
    border-radius: 50%;
    animation: spin 900ms linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#blazor-error-ui {
    background: var(--bad);
    color: #180000;
    bottom: 0;
    display: none;
    left: 0;
    padding: 12px 14px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Pairing a second phone: a code to show, and a camera to read one with. */
.qr {
    width: min(70vw, 260px);
    margin: 0 auto 12px;
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    line-height: 0;
}

.qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.scanner {
    width: 100%;
    max-height: 46vh;
    background: #000;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
}

.card h3 {
    font-size: 0.95rem;
    color: var(--ink-dim);
    font-weight: 600;
}

.field input[readonly] {
    color: var(--ink-dim);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.8rem;
}

/* The cross level. Sized to be readable from the passenger seat without dominating the page. */
:root {
    --vial: #14301f;
    --vial-edge: #3c5f47;
    --vial-mark: #9fcfae;
}

.bubble-level {
    display: block;
    width: min(78vw, 300px);
    height: auto;
    margin: 0 auto 14px;
}

/* The bubble glides between frames instead of teleporting. Linear, and just slower than the
   gap between frames, so each movement is still running when the next begins and the whole
   thing reads as one continuous drift, the way real oil drags on a real bubble.

   Marked important so it survives the blanket reduced-motion rule further up, and deliberately
   kept when reduced motion is asked for. This is not decoration: the movement is the reading.
   Switching it off does not calm the page, it makes the bubble hop four times a second, which
   is harder to watch and harder to interpret. The travel is a small circle moving a couple of
   centimetres at most. */
.bubble-level .bubble {
    transition: transform var(--bubble-glide, 280ms) linear !important;
}