/* Classroom timers (/timers/). Two looks a classroom already has on the wall:
   a whiteboard (default) and a chalkboard. Big Atkinson Hyperlegible digits read from the back row. */

:root {
    --tm-bg: #fbfaf6;            /* whiteboard */
    --tm-panel: #ffffff;
    --tm-ink: #1c2742;           /* navy marker */
    --tm-soft: #5b6478;
    --tm-line: #e6e3da;
    --tm-last: #c2620a;          /* last minute */
    --tm-done: #b42318;          /* time's up */
    --tm-good: #15803d;
    --m-blue: #2563eb; --m-green: #16a34a; --m-purple: #7c3aed; --m-orange: #ea7a0c; --m-red: #dc2626;
}
:root[data-tm-theme="chalk"] {
    --tm-bg: #24332c;            /* board green */
    --tm-panel: #2c3d35;
    --tm-ink: #f3f0e6;           /* chalk */
    --tm-soft: #b9c2b8;
    --tm-line: #3b4e45;
    --tm-last: #f4c95d;
    --tm-done: #ff8a7a;
    --tm-good: #8fe3a8;
    --m-blue: #8fb8ff; --m-green: #8fe3a8; --m-purple: #c9a7ff; --m-orange: #ffb878; --m-red: #ff8a7a;
}

body.tm { background: var(--tm-bg); color: var(--tm-ink); font-family: 'Atkinson Hyperlegible Next', -apple-system, 'Segoe UI', sans-serif; }
body.tm .lp-nav { background: color-mix(in srgb, var(--tm-bg) 92%, transparent); border-color: var(--tm-line); }
body.tm .lp-brand { color: var(--tm-ink) !important; }
body.tm .lp-nav-links a:not(.lp-login-btn):not(.lp-ghost-btn) { color: var(--tm-soft); }
.tm-crumb { color: var(--tm-soft); font-weight: 400; margin-left: 0.25rem; }
.tm-crumb::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }

body { --accent: var(--m-blue); }
body[data-colour="green"]  { --accent: var(--m-green); }
body[data-colour="purple"] { --accent: var(--m-purple); }
body[data-colour="orange"] { --accent: var(--m-orange); }
body[data-colour="red"]    { --accent: var(--m-red); }

/* ---------- the stage ---------- */
.tm-stage { position: relative; background: var(--tm-bg); padding: 2.5rem 1rem 2rem; text-align: center; scroll-margin-top: 64px; overflow: hidden; }
.tm-stage > * { position: relative; }
.tm-label { font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; }
.tm-label::after {   /* a short marker underline in the preset's colour */
    content: ""; display: block; width: 3.2em; height: 0.28em; margin: 0.25em auto 0;
    background: var(--accent); border-radius: 0.3em 0.15em 0.35em 0.1em; transform: rotate(-1.2deg); opacity: 0.85;
}
.tm-time {
    /* Lexend: plain open zeros (every Atkinson cut slashes them), made for easy reading */
    font-family: 'Lexend', 'Atkinson Hyperlegible Next', -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
    font-size: clamp(5.5rem, 24vw, 17rem); line-height: 1; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums; margin: 0.15em 0 0.05em; transition: color 0.4s;
}
.tm-time--long { font-size: clamp(4rem, 17vw, 13rem); }
.tm-sub { font-size: clamp(1.05rem, 2vw, 1.5rem); color: var(--tm-soft); min-height: 1.6em; }

/* progress: a thick marker stroke that fills as time is used */
.tm-bar { position: relative; width: min(760px, 88%); height: 16px; margin: 1.4rem auto 0; border-radius: 9px 5px 8px 6px; background: var(--tm-line); overflow: hidden; transform: rotate(-0.4deg); }
.tm-bar > span { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform 0.3s linear; border-radius: inherit;
    background-image: repeating-linear-gradient(100deg, rgba(255,255,255,0.10) 0 6px, rgba(255,255,255,0) 6px 14px); }

body.tm--last .tm-time { color: var(--tm-last); }
body.tm--last .tm-bar > span { background-color: var(--tm-last); }
body.tm--done .tm-time { color: var(--tm-done); }
body.tm--done .tm-sub { color: var(--tm-done); font-weight: 700; }
body.tm--done .tm-stage { animation: tm-flash 1.1s ease-in-out 4; }
body.tm--record .tm-sub { color: var(--tm-good); font-weight: 700; }
@keyframes tm-flash { 50% { background: color-mix(in srgb, var(--tm-done) 14%, var(--tm-bg)); } }
@media (prefers-reduced-motion: reduce) {
    body.tm--done .tm-stage { animation: none; }
    .tm-bar > span, .tm-time { transition: none; }
}

/* ---------- controls ---------- */
.tm-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 1.6rem; }
.tm-btn { font: inherit; font-weight: 700; font-size: 1rem; color: var(--tm-ink); background: var(--tm-panel); border: 2px solid var(--tm-line); border-radius: 12px; padding: 0.6rem 1rem; cursor: pointer; min-width: 3.2rem; }
.tm-btn:hover:not(:disabled) { border-color: var(--accent); }
.tm-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tm-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tm-go { font-size: 1.25rem; padding: 0.8rem 2.4rem; min-width: 10rem; color: #fff; background: var(--accent); border-color: var(--accent); }
:root[data-tm-theme="chalk"] .tm-go { color: #1d2a24; }
.tm-go:hover { filter: brightness(1.06); }
.tm-small { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.tm-small .tm-btn { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; border-width: 1px; }

/* ---------- the shelf of presets ---------- */
.tm-shelf { max-width: 1080px; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
.tm-shelf h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tm-soft); margin: 1.8rem 0 0.8rem; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.7rem; }
.tm-preset { --c: var(--m-blue); font: inherit; text-align: left; color: var(--tm-ink); background: var(--tm-panel); border: 1px solid var(--tm-line); border-left: 6px solid var(--c); border-radius: 10px; padding: 0.75rem 0.9rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.15rem; width: 100%; }
.tm-preset[data-colour="green"]  { --c: var(--m-green); }
.tm-preset[data-colour="purple"] { --c: var(--m-purple); }
.tm-preset[data-colour="orange"] { --c: var(--m-orange); }
.tm-preset[data-colour="red"]    { --c: var(--m-red); }
.tm-preset:hover { border-color: var(--c); }
.tm-preset[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 10%, var(--tm-panel)); border-color: var(--c); }
.tm-preset:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.tm-preset-name { font-weight: 700; font-size: 1.02rem; }
.tm-preset-time { font-family: 'Lexend', sans-serif; font-variant-numeric: tabular-nums; color: var(--tm-soft); font-size: 0.9rem; }
.tm-preset-wrap { position: relative; }
.tm-preset-x { position: absolute; top: 0.3rem; right: 0.4rem; border: 0; background: none; color: var(--tm-soft); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0.2rem 0.35rem; }
.tm-empty { color: var(--tm-soft); font-size: 0.95rem; }

.tm-new { background: var(--tm-panel); border: 1px dashed var(--tm-line); border-radius: 12px; padding: 1rem; margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.tm-new label { font-size: 0.85rem; font-weight: 600; color: var(--tm-soft); display: flex; flex-direction: column; gap: 0.25rem; }
.tm-new input[type="text"], .tm-new input[type="number"] { font: inherit; color: var(--tm-ink); background: var(--tm-bg); border: 1px solid var(--tm-line); border-radius: 8px; padding: 0.45rem 0.6rem; width: auto; }
.tm-new input[type="number"] { width: 5rem; }
.tm-new .tm-inline { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 400; color: var(--tm-ink); }
.tm-new fieldset { border: 0; display: flex; gap: 0.8rem; padding: 0; }
.tm-new legend { font-size: 0.85rem; font-weight: 600; color: var(--tm-soft); margin-bottom: 0.25rem; }
.tm-keys { color: var(--tm-soft); font-size: 0.85rem; margin-top: 2rem; }
.tm-keys kbd { font-family: 'Atkinson Hyperlegible Mono', monospace; border: 1px solid var(--tm-line); border-bottom-width: 2px; border-radius: 5px; padding: 0 0.35rem; background: var(--tm-panel); }

body.tm .lp-footer { border-color: var(--tm-line); color: var(--tm-soft); }
body.tm .lp-footer a { color: var(--tm-soft); }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .tm-stage { padding-top: 1.5rem; }
    .tm-shelf { padding: 0.5rem 1rem 2rem; }
    .tm-grid { grid-template-columns: repeat(2, 1fr); }
    .tm-go { min-width: 0; padding: 0.75rem 1.8rem; }
    .tm-crumb { display: none; }
}

/* Full screen and Fill window: the timer owns the screen. Sizes use whichever of width or
   height runs out first, so a wide projector (16:9) and a portrait tablet both fit. */
body.tm-fill { overflow: hidden; }
body.tm-fill .tm-stage { position: fixed; inset: 0; z-index: 100; }
.tm-stage:fullscreen, body.tm-fill .tm-stage { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3vh 3vw; }
.tm-stage:fullscreen .tm-time, body.tm-fill .tm-time { font-size: min(30vw, 46vh); margin: 0.04em 0 0; }
.tm-stage:fullscreen .tm-time--long, body.tm-fill .tm-time--long { font-size: min(20vw, 40vh); }
.tm-stage:fullscreen .tm-label, body.tm-fill .tm-label { font-size: min(4.5vw, 6.5vh); }
.tm-stage:fullscreen .tm-sub, body.tm-fill .tm-sub { font-size: min(2.6vw, 3.8vh); }
.tm-stage:fullscreen .tm-bar, body.tm-fill .tm-bar { height: 1.8vh; width: min(80vw, 1400px); margin-top: 2vh; }
.tm-stage:fullscreen .tm-controls, body.tm-fill .tm-controls { margin-top: 2.5vh; }
.tm-stage:fullscreen .tm-small, body.tm-fill .tm-small { margin-top: 1vh; }
/* while it runs, the buttons fade so the time dominates the projector; hover or focus brings them back */
.tm-stage:fullscreen .tm-controls, .tm-stage:fullscreen .tm-small,
body.tm-fill .tm-controls, body.tm-fill .tm-small { transition: opacity 0.3s; }
body.tm--running .tm-stage:fullscreen .tm-controls, body.tm--running .tm-stage:fullscreen .tm-small,
body.tm--running.tm-fill .tm-controls, body.tm--running.tm-fill .tm-small { opacity: 0.12; }
body.tm--running .tm-stage:fullscreen .tm-controls:is(:hover, :focus-within), body.tm--running .tm-stage:fullscreen .tm-small:is(:hover, :focus-within),
body.tm--running.tm-fill .tm-controls:is(:hover, :focus-within), body.tm--running.tm-fill .tm-small:is(:hover, :focus-within) { opacity: 1; }

/* style chooser */
.tm-styles { display: inline-flex; border: 1px solid var(--tm-line); border-radius: 12px; overflow: hidden; }
.tm-styles .tm-btn { border: 0; border-radius: 0; border-right: 1px solid var(--tm-line); }
.tm-styles .tm-btn:last-child { border-right: 0; }
.tm-styles .tm-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
:root[data-tm-theme="chalk"] .tm-styles .tm-btn[aria-pressed="true"] { color: #1d2a24; }

/* ---------- Fun style: yellow board, a torn purple paint blob, every digit its own colour ---------- */
.tm-fun-bg { display: none; position: absolute !important; inset: 0; pointer-events: none; }
.tm-fun-bg svg { width: 100%; height: 100%; display: block; }
.tm-blob { fill: #8a3ffc; }
:root[data-tm-theme="fun"] .tm-fun-bg { display: block; }
:root[data-tm-theme="fun"] .tm-stage { background: #ffdc1e; color: #2a1a5e; }
:root[data-tm-theme="fun"] .tm-label { font-family: 'Fredoka', 'Atkinson Hyperlegible Next', sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(60, 20, 120, 0.35); }
:root[data-tm-theme="fun"] .tm-label::after { background: #ff3d7f; }
:root[data-tm-theme="fun"] .tm-time { font-family: 'Fredoka', 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; letter-spacing: 0.01em; display: flex; justify-content: center; align-items: center; gap: 0.04em; }
:root[data-tm-theme="fun"] .tm-d { display: inline-block; text-shadow: 0.03em 0.05em 0 rgba(50, 10, 110, 0.38); }
:root[data-tm-theme="fun"] .tm-d0 { color: #ff8a00; transform: rotate(-4deg); }
:root[data-tm-theme="fun"] .tm-d1 { color: #1fb2f2; transform: rotate(5deg) translateY(-0.03em); }
:root[data-tm-theme="fun"] .tm-d2 { color: #5cc93a; transform: rotate(-3deg) translateY(0.02em); }
:root[data-tm-theme="fun"] .tm-d3 { color: #ffd21a; transform: rotate(6deg); }
.tm-colon { display: inline-flex; flex-direction: column; justify-content: center; gap: 0.16em; margin: 0 0.06em; }
.tm-colon i { display: block; width: 0.17em; height: 0.17em; border-radius: 50%; background: #ff3d7f; box-shadow: 0.02em 0.03em 0 rgba(50, 10, 110, 0.3); }
:root[data-tm-theme="fun"] .tm-sub { color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 600; text-shadow: 0 2px 0 rgba(60, 20, 120, 0.35); }
:root[data-tm-theme="fun"] .tm-bar { background: rgba(255, 255, 255, 0.45); }
:root[data-tm-theme="fun"] .tm-btn { background: #fff; border-color: #fff; color: #2a1a5e; }
:root[data-tm-theme="fun"] .tm-go { background: #ff3d7f; border-color: #ff3d7f; color: #fff; }
:root[data-tm-theme="fun"] .tm-styles { border-color: #fff; }
:root[data-tm-theme="fun"] .tm-styles .tm-btn[aria-pressed="true"] { background: #8a3ffc; color: #fff; }
:root[data-tm-theme="fun"] body.tm--last .tm-time,
:root[data-tm-theme="fun"] body.tm--done .tm-time { color: inherit; }
:root[data-tm-theme="fun"] body.tm--last .tm-d { animation: tm-wiggle 1s ease-in-out infinite; }
@keyframes tm-wiggle { 50% { transform: rotate(0deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { :root[data-tm-theme="fun"] body.tm--last .tm-d { animation: none; } }

/* every digit sits in a fixed-width box, so the time doesn't shuffle sideways as it ticks */
.tm-time { display: flex; justify-content: center; align-items: baseline; }
.tm-d { display: inline-block; width: 0.62em; text-align: center; }
.tm-colon { width: auto; }
:root:not([data-tm-theme="fun"]) .tm-colon { display: inline-block; width: 0.32em; position: relative; height: 0.72em; align-self: center; margin: 0 0.02em; }
:root:not([data-tm-theme="fun"]) .tm-colon i { position: absolute; left: 50%; width: 0.13em; height: 0.13em; margin-left: -0.065em; border-radius: 50%; background: currentColor; box-shadow: none; }
:root:not([data-tm-theme="fun"]) .tm-colon i:first-child { top: 0.12em; }
:root:not([data-tm-theme="fun"]) .tm-colon i:last-child { bottom: 0.12em; }
:root[data-tm-theme="fun"] .tm-d { width: auto; }

/* sound picker, styled as one of the small buttons */
.tm-sound-pick { display: inline-flex; align-items: center; gap: 0.4rem; cursor: default; }
.tm-sound-pick select { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 0; padding: 0 0.1rem; cursor: pointer; }
.tm-sound-pick select option { color: #1c2742; }

/* style & sound: a small card that floats above the ⚙ button, so opening it moves nothing */
.tm-small { position: relative; }
.tm-prefs { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem);
    background: var(--tm-panel); border: 1px solid var(--tm-line); border-radius: 14px; padding: 0.6rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); }
.tm-prefs[hidden] { display: none; }
.tm-prefs::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--tm-panel); }
:root[data-tm-theme="fun"] .tm-prefs { background: #fff; border-color: #fff; }
.tm-small .tm-prefs .tm-btn, .tm-small .tm-prefs .tm-styles .tm-btn { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; }
.tm-small .tm-btn[hidden] { display: none; }
#tm-prefs-btn[aria-expanded="true"] { border-color: var(--accent); }
body.tm--running .tm-stage:fullscreen .tm-prefs, body.tm--running.tm-fill .tm-prefs { opacity: 1; }

/* phones: the main row fills the width; the small row stays one line */
@media (max-width: 480px) {
    .tm-controls { gap: 0.45rem; flex-wrap: nowrap; }
    .tm-controls .tm-btn { padding: 0.65rem 0.7rem; font-size: 0.95rem; min-width: 0; }
    .tm-controls .tm-go { flex: 1; max-width: 11rem; font-size: 1.15rem; }
    .tm-small { gap: 0.35rem; flex-wrap: nowrap; }
    .tm-small .tm-btn { padding: 0.4rem 0.55rem; font-size: 0.8rem; }
    .tm-prefs .tm-styles .tm-btn { padding: 0.4rem 0.55rem; }
}

/* the brand and the "Classroom Timers" crumb are separate links */
.tm-brand { display: flex; align-items: center; min-width: 0; }
.tm-crumb { color: var(--tm-soft) !important; text-decoration: none; white-space: nowrap; }
.tm-crumb:hover { color: var(--tm-ink) !important; }
/* button labels never wrap; on phones the panel button drops its "& sound" */
.tm-btn { white-space: nowrap; }
@media (max-width: 480px) { .tm-lg { display: none; } }

/* the card is anchored to the ⚙ button (its wrapper); on wider screens it lines up with the
   button's right edge and points at it. On phones the wrapper steps aside, so the card centres
   on the whole row and can't run off the screen. */
.tm-prefs-wrap { position: relative; display: inline-flex; }
@media (min-width: 481px) {
    .tm-prefs { left: auto; right: 0; transform: none; }
    .tm-prefs::after { left: auto; right: 3.6rem; margin-left: 0; }
}
@media (max-width: 480px) { .tm-prefs-wrap { position: static; } }

.tm-notify { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.tm-notify[hidden] { display: none; }

/* Short screens (a laptop once the browser's toolbars are taken off, a landscape phone): the
   clock also sizes to the height that's left, so Start/Stop is on screen without scrolling.
   --tm-reserve is roughly everything else from the top of the page to the bottom of the
   small buttons row; the clock gets what remains (0.82 = its line height plus margins).
   Fill window / Full screen have their own, more specific sizes and aren't affected. */
:root { --tm-reserve: 420px; }
.tm-time { font-size: clamp(3.5rem, min(24vw, (100vh - var(--tm-reserve)) * 0.82), 17rem);
    font-size: clamp(3.5rem, min(24vw, (100svh - var(--tm-reserve)) * 0.82), 17rem); }
.tm-time--long { font-size: clamp(3rem, min(17vw, (100vh - var(--tm-reserve)) * 0.82), 13rem);
    font-size: clamp(3rem, min(17vw, (100svh - var(--tm-reserve)) * 0.82), 13rem); }
@media (max-width: 820px) { :root { --tm-reserve: 480px; } }   /* the free-tools strip under the header */
@media (max-height: 760px) {
    :root { --tm-reserve: 340px; }
    .tm-stage { padding: 1.1rem 1rem 1.1rem; }
    .tm-label { font-size: clamp(1.2rem, 4.5vh, 2rem); }
    .tm-sub { min-height: 1.4em; }
    .tm-bar { margin-top: 0.8rem; height: 14px; }
    .tm-controls { margin-top: 0.9rem; }
    .tm-small { margin-top: 0.6rem; }
}
@media (max-height: 760px) and (max-width: 820px) { :root { --tm-reserve: 400px; } }
/* landscape phones: drop the strip (the header still links everywhere) and tighten further */
@media (max-height: 500px) {
    :root { --tm-reserve: 270px; }
    body.tm .lp-strip { display: none; }
    .tm-stage { padding: 0.6rem 1rem 0.8rem; }
    .tm-label { font-size: 1.15rem; }
    .tm-label::after { margin-top: 0.15em; }
    .tm-sub { font-size: 0.95rem; }
    .tm-bar { margin-top: 0.5rem; height: 10px; }
    .tm-controls { margin-top: 0.6rem; }
    .tm-small { margin-top: 0.45rem; }
}