/* static/css/stopwatch/stopwatch.css
   Stopwatch — premium minimalist "audiophile instrument" faceplate.
   Tap / beep / flash behaviour is wired in stopwatch.js; this file is the
   visual shell and its running / paused / flash states. */

:root {
    --sw-bg:        var(--dark-bg);
    --sw-line:      rgba(255, 255, 255, 0.09);
    --sw-line-soft: rgba(255, 255, 255, 0.05);
    --sw-amber-hi:  var(--gold-bright);
    --sw-glow:      rgba(240, 168, 48, 0.55);
}

/* ---- stage ---- */
.sw-stage {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px;
    background:
        radial-gradient(120% 90% at 50% 18%, #131318 0%, var(--sw-bg) 62%);
}

/* ---- faceplate ---- */
.sw-panel {
    position: relative;
    width: 100%;
    max-width: 544px;
    padding: 30px 30px 22px;
    border: 1px solid var(--sw-line);
    border-radius: 20px;
    background: var(--dark-bg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 38px 90px -34px rgba(0, 0, 0, 0.85);
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    animation: sw-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* brushed hairline along the top edge */
.sw-panel::before {
    content: "";
    position: absolute;
    inset: 0 18% auto;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* ---- header ---- */
.sw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: sw-rise 0.6s 0.05s both;
}

.sw-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--dark-ink);
}

.sw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a4a52;
    box-shadow: 0 0 0 0 rgba(240, 168, 48, 0);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.sw-status {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dark-ink);
    transition: color 0.25s ease;
}

/* ---- readout ---- */
.sw-readout {
    margin: 24px 0 26px;
    text-align: center;
    line-height: 1;
    color: var(--surface-2);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    transition: text-shadow 0.3s ease, color 0.3s ease;
    animation: sw-rise 0.6s 0.1s both;
}

.sw-main {
    font-size: clamp(4.8rem, 22.5vw, 7.65rem);
    font-weight: 300;
    letter-spacing: -0.02em;
}

.sw-cs {
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gold-bright);
    margin-left: 0.06em;
}

/* Pro reads to the second, so it has no hundredths column, and the minutes
   and seconds take the room it left: bigger, and bold. An hour column
   narrows them again so 00:00:00 still fits a phone. */
.sw-panel[data-mode="pro"] .sw-main {
    font-size: clamp(6rem, 30vw, 10rem);
    font-weight: 700;
}

.sw-panel[data-mode="pro"] .sw-main.has-hours {
    font-size: clamp(4rem, 19vw, 6.4rem);
}

/* ---- beep control ---- */
.sw-beep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border: 1px solid var(--sw-line-soft);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
    animation: sw-rise 0.6s 0.15s both;
}

.sw-beep-label {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dark-ink);
}

.sw-beep-set {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.sw-beep-val {
    min-width: 4ch;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--surface-2);
    font-variant-numeric: tabular-nums;
}

.sw-step {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--sw-line);
    border-radius: 9px;
    background: linear-gradient(165deg, #1d1d21, #141417);
    color: var(--dark-ink);
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}

.sw-step:hover {
    color: var(--sw-amber-hi);
    border-color: rgba(240, 168, 48, 0.4);
}

.sw-step:active {
    transform: scale(0.92);
}

/* ---- footer ----
   The row used to be only as tall as the small word inside it, 45px once the
   page-footer padding below is discounted. It now holds a height of its own,
   twice that, so the sign has room to stand in it. */
.sw-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
    margin-top: 18px;
    /* base.css styles every <footer> on the site as the page footer: a slate
       bar, a teal rule and its own padding. That was landing on this row and
       reading as a stray band across the panel. */
    padding: 0 22px;
    border-top: none;
    text-align: left;
    /* The bar IS the control — the whole panel starts and stops the clock, and
       nothing said so while this row was black on black. Amber says it, and
       says it from across the room. Muted at rest, full bright while running,
       so the footer carries the state on its own. */
    border-radius: 14px;
    background: #6a4a13;
    transition: background 0.25s ease;
    animation: sw-rise 0.6s 0.2s both;
}

/* The whole panel is the control — tap it anywhere to start, pause, resume.
   Nothing said so: the only clue was one small word in the corner. This is
   that clue, at a size you can read across a room. The spoken word stays in
   the markup for screen readers, it just no longer carries the message alone. */
.sw-cue {
    display: inline-flex;
    align-items: center;
}

/* A triangle when the clock is ready or paused, two bars while it runs. Drawn
   here rather than typed, because a play character arrives as a coloured emoji
   on half the phones in the world and would fight the amber. */
.sw-glyph {
    width: 40px;
    height: 46px;
    background: currentColor;
    color: #1a1308;          /* dark on amber — light on amber cannot be read */
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: color 0.25s ease;
}

.sw-foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Reset shares the amber bar, so it wears the bar's dark ink rather than the
   panel's light one. */
.sw-reset {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--gold-dark);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.sw-reset:hover {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.35);
}

/* ---- running / paused states (toggled by JS) ---- */
.sw-panel.is-running .sw-dot {
    background: var(--gold-bright);
    box-shadow: 0 0 12px 1px var(--sw-glow);
    animation: sw-breathe 1.6s ease-in-out infinite;
}

.sw-panel.is-running .sw-status {
    color: var(--gold-bright);
}

/* running: the whole bar lights up, and the triangle becomes two bars */
.sw-panel.is-running .sw-foot {
    background: var(--gold-bright);
    box-shadow: 0 0 26px -6px var(--sw-glow);
}

.sw-panel.is-running .sw-glyph {
    clip-path: none;
    background: linear-gradient(90deg,
        currentColor 0 36%, transparent 36% 64%, currentColor 64% 100%);
}

.sw-panel.is-running .sw-readout {
    text-shadow: 0 0 38px var(--sw-glow);
}

/* Paused is its own colour, not a weaker running. The dot was amber at 60%
   opacity, which reads as a running clock seen through fog. --warning is the
   token for caution and pending, and it is the one thing paused is. Not
   --gold-dark: that is the warm near-black laid *under* gold, darker than
   this panel, so the dot would have gone missing rather than changed colour. */
.sw-panel.is-paused .sw-dot {
    background: var(--warning);
}

.sw-panel.is-paused .sw-status {
    color: var(--sw-amber-hi);
}

/* ---- full-viewport alert flash (toggled 3x by JS) ---- */
.sw-flash {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 42%, var(--sw-amber-hi), var(--gold-bright) 65%);
    transition: opacity 0.16s ease-out;
}

.sw-flash.on {
    opacity: 0.92;
    transition: opacity 0.04s ease-in;
}

/* ---- motion ---- */
@keyframes sw-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes sw-breathe {
    0%, 100% { box-shadow: 0 0 9px 0 var(--sw-glow); }
    50%      { box-shadow: 0 0 16px 3px var(--sw-glow); }
}

/* ---- 480px: minimum padding ----
   There were two of these blocks, and the second set the panel back to 4px
   after the first had asked for 2. One block, 2px. */
@media (max-width: 480px) {
    .sw-stage {
        padding: 0;
        min-height: calc(100vh - 120px);
    }
    .sw-panel {
        max-width: 100%;
        border-radius: 0;
        padding: 20px 2px 14px;
    }
    .sw-foot {
        padding: 0 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sw-panel,
    .sw-head,
    .sw-readout,
    .sw-beep,
    .sw-foot {
        animation: none;
    }
    .sw-panel.is-running .sw-dot {
        animation: none;
    }
}