/* Timer: one dial, one readout, two controls. Colours come from the Kokua tokens. */
.timer {
    --dial-size: min(88vw, 58vh, 600px);
    --wedge-hi: #4DBEFF;
    --wedge-mid: var(--kokua-brand-blue);
    --wedge-lo: #0090E6;
    --wedge-edge: var(--kokua-deep-blue);
    --sheen-hi: rgb(255 255 255 / 70%);
    --done-fill: var(--kokua-mist);
    --done-mark: var(--kokua-deep-blue);
    --tick: var(--kokua-muted);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    display: grid;
    grid-template-rows: auto auto;
    place-content: center;
    justify-items: center;
    gap: clamp(20px, 4dvh, 40px);
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        max(64px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
}

@supports (height: 1dvh) {
    .timer {
        --dial-size: min(88vw, 58dvh, 600px);
    }
}

@supports (color: color-mix(in oklab, red, blue)) {
    .timer {
        --wedge-hi: color-mix(in oklab, var(--kokua-brand-blue) 72%, white);
        --wedge-lo: color-mix(in oklab, var(--kokua-brand-blue) 70%, var(--kokua-deep-blue));
    }
}

@supports (color: color(display-p3 0 0 0)) and (color: color-mix(in oklab, red, blue)) {
    .timer {
        --wedge-mid: var(--kokua-brand-blue-p3);
        --wedge-hi: color-mix(in oklab, var(--kokua-brand-blue-p3) 72%, white);
        --wedge-lo: color-mix(in oklab, var(--kokua-brand-blue-p3) 70%, var(--kokua-deep-blue));
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timer {
        --wedge-edge: rgb(255 255 255 / 85%);
        --sheen-hi: rgb(255 255 255 / 7%);
        --done-fill: rgb(0 162 255 / 20%);
        --done-mark: var(--kokua-brand-blue);
        --hub-stroke: rgb(255 255 255 / 18%);
    }
}

/* Wide, short screens (phones on their side, laptops): dial beside the controls. */
@media (min-aspect-ratio: 5 / 4) and (max-height: 720px) {
    .timer {
        --dial-size: min(82vh, 54vw, 640px);
        grid-template-rows: none;
        grid-template-columns: auto auto;
        align-items: center;
        gap: clamp(24px, 6vw, 72px);
        padding-top: max(24px, env(safe-area-inset-top));
    }
}

@supports (height: 1dvh) {
    @media (min-aspect-ratio: 5 / 4) and (max-height: 720px) {
        .timer {
            --dial-size: min(82dvh, 54vw, 640px);
        }
    }
}

/* ---- Dial ----------------------------------------------------------------------------------- */

.dial {
    position: relative;
    width: var(--dial-size);
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: var(--kokua-shadow), 0 1px 2px rgb(32 43 51 / 6%);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.is-dragging .dial {
    cursor: grabbing;
}

.dial-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.face {
    fill: var(--kokua-surface);
}

.sheen-hi {
    stop-color: var(--sheen-hi);
}

.sheen-lo {
    stop-color: var(--sheen-hi);
    stop-opacity: 0;
}

.tick {
    stroke: var(--tick);
    stroke-width: 0.8;
    stroke-linecap: round;
    opacity: 0.45;
}

.tick.major {
    stroke-width: 1.5;
    opacity: 0.9;
}

.numerals text {
    fill: var(--kokua-muted);
    font: 600 9px var(--kokua-heading);
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
    dominant-baseline: central;
}

.satin-hi {
    stop-color: var(--wedge-hi);
}

.satin-mid {
    stop-color: var(--wedge-mid);
}

.satin-lo {
    stop-color: var(--wedge-lo);
}

.wedge-edge {
    stroke: var(--wedge-edge);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.handle {
    fill: var(--kokua-surface);
    stroke: var(--wedge-edge);
    stroke-width: 1.6;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 1px 1.5px rgb(32 43 51 / 25%));
    transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}

.timer[data-state="running"] .handle {
    transform: scale(0.6);
}

.is-dragging .handle {
    transform: scale(1.25);
}

.hub-cap {
    fill: var(--kokua-surface);
    stroke: var(--hub-stroke, rgb(32 43 51 / 10%));
    stroke-width: 0.6;
    filter: drop-shadow(0 1.5px 2px rgb(32 43 51 / 22%));
}

.is-empty .wedge-edge,
.is-empty .handle {
    opacity: 0;
}

.timer[data-state="idle"].is-empty .handle {
    opacity: 1;
}

/* Done: the wedge has closed; the centre settles to a soft fill with a check. No flashing. */
.done-fill {
    fill: var(--done-fill);
    opacity: 0;
    transform: scale(0.94);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity 1200ms var(--ease), transform 1200ms var(--ease);
}

.done-mark path {
    fill: none;
    stroke: var(--done-mark);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    transition: stroke-dashoffset 700ms var(--ease) 500ms;
}

.hub {
    transition: opacity 400ms var(--ease);
}

.timer[data-state="done"] .done-fill {
    opacity: 1;
    transform: scale(1);
}

.timer[data-state="done"] .done-mark path {
    stroke-dashoffset: 0;
}

.timer[data-state="done"] .hub,
.timer[data-state="done"] .handle {
    opacity: 0;
}

.timer:not([data-state="done"]) .done-mark {
    opacity: 0;
}

/* ---- Readout and controls ------------------------------------------------------------------- */

.panel {
    display: grid;
    justify-items: center;
    gap: 20px;
    min-width: min(100%, 300px);
}

.readout {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 0;
}

.clock {
    font: 600 clamp(2.75rem, 9vmin, 4.5rem) / 1 var(--kokua-heading);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.caption {
    min-height: 1.5em;
    color: var(--kokua-muted);
    font-size: 1.0625rem;
}

.controls {
    display: flex;
    gap: 12px;
}

.control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    min-height: 52px;
    padding: 12px 22px;
    border: 1px solid rgb(86 99 109 / 35%);
    border: 1px solid color-mix(in srgb, var(--kokua-muted) 35%, transparent);
    border-radius: var(--kokua-control-radius);
    background: transparent;
    font-weight: 500;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: transform 150ms ease-out, background-color 200ms ease-out, opacity 200ms ease-out;
}

.control.primary {
    min-width: 152px;
    border-color: transparent;
    background: var(--kokua-brand-blue);
    color: var(--kokua-ink);
    box-shadow: 0 4px 14px rgb(0 109 168 / 22%);
}

.control:active:not(:disabled) {
    transform: scale(0.985);
}

.control:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

.control svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.timer[data-state="running"] .icon-play,
.timer:not([data-state="running"]) .icon-pause {
    display: none;
}

.presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    transition: opacity 300ms var(--ease);
}

.presets button {
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--kokua-control-radius);
    background: transparent;
    color: var(--kokua-muted);
    font-size: 0.9375rem;
    cursor: pointer;
}

.presets button:hover {
    color: var(--kokua-text);
}

/* Keep the layout still while running; the quick times simply step back. */
.timer[data-state="running"] .presets {
    opacity: 0;
    visibility: hidden;
}

@media (hover: hover) {
    .control:not(.primary):not(:disabled):hover {
        background: color-mix(in srgb, var(--kokua-muted) 10%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .handle,
    .done-fill,
    .done-mark path,
    .hub,
    .control,
    .presets {
        transition: none;
    }
}