/* Light paint for the Start screen (src/pages/start/). Geometry lives in the page sheets and is both
   themes'; everything here is prefixed html[data-theme="light"] so dark cannot match it by
   construction. LIGHT-MODE-HANDOFF.md §5 is the rulebook.

   ── What changes, and why ──
   Dark raises the board and the keys with a lighter glass tint, because a shadow has no contrast on
   near-black. Light raises them the way it raises everything: white, an elevation, and the edge drawn
   as lighting rather than a border. The board stays the one object that reads first — it is the
   largest white surface on the page, and the bars on it carry the only saturated colour besides the
   one filled key. The pulse rail stops being an object at all: a zone carved into the page by two
   hairlines, because a third card in a row of cards is how a page turns into a sticker sheet. */

/* ── Surfaces: objects that sit on the page ── */
html[data-theme="light"] .st-board,
html[data-theme="light"] .st-key {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--elevation-2), 0 0 0 0 transparent;
    transition: box-shadow 0.08s ease-in;
}
/* Hover never changes colour and nothing moves: a shadow layer arrives. */
html[data-theme="light"] .st-board:hover,
html[data-theme="light"] .st-key:hover {
    border-color: transparent;
    box-shadow: var(--elevation-2), 0 6px 16px rgba(var(--edge-rgb), 0.10);
}

/* ── The pulse: a zone, not an object ── */
html[data-theme="light"] .st-pulse {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 1px 0 var(--keyline), inset 0 -1px 0 var(--keyline);
}
html[data-theme="light"] .st-cell + .st-cell { border-left-color: var(--keyline); }
html[data-theme="light"] .st-next-item:hover { background: var(--surface-hover); }

/* ── Labels: 11px/500 sentence case, the idiom light uses everywhere (handoff §5.7) ── */
html[data-theme="light"] .st-label,
html[data-theme="light"] .st-cell-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--fw-500);
}

/* ── The board's marks ──
   --accent-subtle is a tint in light, never a line under text and never a fill, so the now line,
   the meter and the dots take the accent itself. */
html[data-theme="light"] .st-now {
    background: var(--accent);
    box-shadow: none;
}
html[data-theme="light"] .st-meter { background: var(--surface-inset); }
html[data-theme="light"] .st-meter-fill { background: var(--accent); }
html[data-theme="light"] .st-meter.is-full .st-meter-fill { background: var(--meter-warn); }
html[data-theme="light"] .st-meter.is-over .st-meter-fill { background: var(--meter-bad); }
html[data-theme="light"] .st-dot { background: var(--accent); }
html[data-theme="light"] .st-key.is-late .st-dot { background: var(--st-expected); }

/* A bar is the light calendar's block: the wash as the fill, the status edge as an inset bar. In dark
   the wash is a gradient over glass; on white the same alpha is a ghost. */
html[data-theme="light"] .st-bar {
    border-color: transparent;
    background: rgb(var(--wev-wash));
    box-shadow: inset 3px 0 0 rgb(var(--wev-edge));
}
html[data-theme="light"] .st-bar-text { color: var(--text-strong); }
html[data-theme="light"] .st-bar.is-past { opacity: 0.55; filter: none; }

/* The flash composes over the glass shadow in dark; light has no glass shadow, and `none, <shadow>` is
   not a value, so light gets its own keyframes over its own elevation. */
html[data-theme="light"] .st-key.is-flash { animation-name: st-flash-light; }
@keyframes st-flash-light {
    0% { box-shadow: var(--elevation-2), 0 0 0 0 rgba(var(--accent-rgb), 0); }
    25% { box-shadow: var(--elevation-2), 0 0 0 3px rgba(var(--accent-rgb), 0.35); }
    100% { box-shadow: var(--elevation-2), 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

html[data-theme="light"] .st-empty-card { box-shadow: var(--elevation-1); border-color: transparent; }
html[data-theme="light"] .st-wait { background: var(--surface-inset); }
html[data-theme="light"] .st-mark { color: var(--accent); }

/* ── Tablet (.stt-*) and phone (.stp-*) views ──
   The same paint decisions as above, on the touch views' own class names. Touch has no hover, so the
   press state recedes instead — in light, states go darker. */
html[data-theme="light"] .stt-board,
html[data-theme="light"] .stt-key,
html[data-theme="light"] .stp-today,
html[data-theme="light"] .stp-key {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--elevation-2);
}
html[data-theme="light"] .stt-board:active,
html[data-theme="light"] .stt-key:active,
html[data-theme="light"] .stp-today:active,
html[data-theme="light"] .stp-key:active {
    border-color: transparent;
    background: var(--surface-hover);
}
html[data-theme="light"] .stt-pulse {
    background: transparent; border: 0; border-radius: 0;
    box-shadow: inset 0 1px 0 var(--keyline), inset 0 -1px 0 var(--keyline);
}
html[data-theme="light"] .stt-next-item:active { background: var(--surface-hover); }
html[data-theme="light"] .stt-label,
html[data-theme="light"] .stt-cell-label,
html[data-theme="light"] .stp-label {
    text-transform: none; letter-spacing: 0; font-weight: var(--fw-500);
}
html[data-theme="light"] .stt-now { background: var(--accent); box-shadow: none; }
html[data-theme="light"] .stt-meter,
html[data-theme="light"] .stp-meter { background: var(--surface-inset); }
html[data-theme="light"] .stt-meter-fill,
html[data-theme="light"] .stp-meter-fill { background: var(--accent); }
html[data-theme="light"] .stt-meter.is-full .stt-meter-fill,
html[data-theme="light"] .stp-meter.is-full .stp-meter-fill { background: var(--meter-warn); }
html[data-theme="light"] .stt-meter.is-over .stt-meter-fill,
html[data-theme="light"] .stp-meter.is-over .stp-meter-fill { background: var(--meter-bad); }
html[data-theme="light"] .stt-dot,
html[data-theme="light"] .stp-dot { background: var(--accent); }
html[data-theme="light"] .stt-key.is-late .stt-dot,
html[data-theme="light"] .stp-key.is-late .stp-dot { background: var(--st-expected); }
html[data-theme="light"] .stt-bar {
    border-color: transparent;
    background: rgb(var(--wev-wash));
    box-shadow: inset 3px 0 0 rgb(var(--wev-edge));
}
html[data-theme="light"] .stt-bar-text { color: var(--text-strong); }
html[data-theme="light"] .stt-bar.is-past { opacity: 0.55; filter: none; }
html[data-theme="light"] .stt-empty-card { box-shadow: var(--elevation-1); border-color: transparent; }
html[data-theme="light"] .stt-wait,
html[data-theme="light"] .stp-wait { background: var(--surface-inset); }

/* ── The master board's own marks ──
   The brief's rule, the current day in the week strip and the curve's now line are accent LINES; in
   light --accent-subtle is a tint only, so each takes the accent itself. */
html[data-theme="light"] .st-lede,
html[data-theme="light"] .stt-lede,
html[data-theme="light"] .stp-lede { border-left-color: var(--accent); }
html[data-theme="light"] .st-wday.is-current { background: var(--surface-inset); box-shadow: inset 3px 0 0 var(--accent); }
html[data-theme="light"] .st-wmeter { background: var(--surface-inset); }
html[data-theme="light"] .st-wmeter-fill { background: var(--accent); }
html[data-theme="light"] .st-wmeter.is-full .st-wmeter-fill { background: var(--meter-warn); }
html[data-theme="light"] .st-wmeter.is-over .st-wmeter-fill { background: var(--meter-bad); }
html[data-theme="light"] .st-curve-now { background: var(--accent); }
html[data-theme="light"] .st-step { background: rgba(var(--accent-rgb), 0.18); box-shadow: inset 0 1.5px 0 rgba(var(--accent-rgb), 0.8); }
html[data-theme="light"] .st-step.is-full { background: rgba(var(--accent-rgb), 0.34); }
html[data-theme="light"] .st-cap { border-top-color: var(--ink-muted); }
html[data-theme="light"] .st-free:not(.is-none),
html[data-theme="light"] .stt-free:not(.is-none) { background: var(--surface-inset); border-color: transparent; }