/* ==========================================================================
   RDPT — RoboDoc's PomodoroTimer — single stylesheet (airgapped, no external deps)
   Design tokens adopted from rdltms. Dark is the default; light via
   [data-theme="light"]. Accent is user-customisable via --accent.
   ========================================================================== */

/* ------------------------------ Tokens ---------------------------------- */
:root {
  --bg: #0a1014;
  --surface: #121922;
  --surface2: #1a2230;
  --surface3: #222d3a;
  --text: #e6edf3;
  --text-secondary: #b8c5d3;
  --muted: #7a8896;
  --border: rgba(148, 163, 184, .15);
  --border-hi: rgba(148, 163, 184, .35);
  --shadow: rgba(0, 0, 0, .30);
  --shadow-heavy: rgba(0, 0, 0, .55);

  --bad: #f87171;
  --good: #4ade80;
  --warn: #fbbf24;
  --info: #60a5fa;

  --accent: #60a5fa;
  --accent-2: #93c5fd;
  --accent-glow: rgba(96, 165, 250, .12);
  --accent-shadow: rgba(96, 165, 250, .30);
  --on-accent: #06121f;

  /* Timer phase accents (traffic-light mapping) */
  --work: #f87171;
  --short: #4ade80;
  --long: #22d3ee;

  --sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Consolas', Menlo, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --gap: clamp(.6rem, 1.4vw, 1rem);
  --topbar-h: 56px;
  --foot-h: 40px;
  --trans: .28s cubic-bezier(.4, 0, .2, 1);
  --trans-fast: .14s ease;
}

[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface2: #eef2f7;
  --surface3: #e2e8f0;
  --text: #1a202c;
  --text-secondary: #3c4a5a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, .12);
  --border-hi: rgba(15, 23, 42, .28);
  --shadow: rgba(15, 23, 42, .10);
  --shadow-heavy: rgba(15, 23, 42, .22);
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, .10);
  --on-accent: #ffffff;
  --bad: #dc2626;
  --good: #16a34a;
  --warn: #d97706;
  --info: #2563eb;
}

/* ------------------------------ Base ------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }   /* bg on <html> too → no gap when zoomed < 100% */
body {
  margin: 0;
  min-height: calc(100vh / var(--zoom, 1));   /* --zoom: the app's own +/− zoom (rdpt.js Zoom) */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
/* NO underlined links — anywhere, in any state. Affordance is colour, not underline. */
a, a:link, a:visited, a:hover, a:focus, a:active { text-decoration: none; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* The hidden attribute always wins: an author `display` (grid, flex) would
   otherwise override the browser's own [hidden] rule and keep the element shown. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--accent);
  color: var(--on-accent); padding: 8px 14px; border-radius: 8px; transition: top var(--trans-fast);
}
.skip-link:focus { top: 8px; }

/* ------------------------------ Top bar --------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding: 0 clamp(.7rem, 2vw, 1.4rem);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-group { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1rem); min-width: 0; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 750; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; color: var(--accent); }
.brand-name { font-size: 1.15rem; letter-spacing: .02em; }
.topnav { display: flex; gap: .2rem; }
.topnav-link {
  color: var(--text-secondary); padding: .35rem .6rem; border-radius: 8px; font-size: .92rem;
}
.topnav-link:hover { color: var(--text); background: var(--surface2); text-decoration: none; }
.topnav-link.is-active { color: var(--accent); background: var(--accent-glow); }

.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--text-secondary); transition: var(--trans-fast);
}
.icon-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }
.icon-btn.is-off { opacity: .5; }
.icon-btn-corner { color: var(--muted); }
.icon-btn-corner:hover { color: var(--text); }
.topbar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 .1rem; }

.user-chip {
  display: flex; align-items: center; gap: .5rem; max-width: 180px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
  padding: .28rem .7rem .28rem .32rem; color: var(--text); transition: var(--trans-fast);
}
.user-chip:hover { border-color: var(--border-hi); }
.user-avatar {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .8rem;
}
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }

/* Degraded (DB-down) mode: yellow "Offline mode" tag + hide DB-only UI. */
.degraded-tag {
  font-size: .82rem; font-weight: 600; color: var(--warn); white-space: nowrap;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  padding: .3rem .7rem; border-radius: 999px;
}
body.rdpt-degraded .card-templates,
body.rdpt-degraded #btn-templates-toggle { display: none; }

/* Consistent control heights in the top bar — no button taller than its
   neighbours, and text buttons sized to their content (never clipped). */
.topbar .btn, .topbar .icon-btn, .topbar .user-chip { height: 38px; box-sizing: border-box; }
.topbar .btn { padding-top: 0; padding-bottom: 0; white-space: nowrap; width: auto; }
.topbar-sep { width: 1px; height: 22px; align-self: center; background: var(--border); margin: 0 .1rem; }

/* theme icon: show the active mode's glyph only */
.theme-icon { display: none; }
[data-theme-mode="dark"]   .theme-icon-dark,
[data-theme-mode="light"]  .theme-icon-light,
[data-theme-mode="auto"]   .theme-icon-auto,
[data-theme-mode="hacker"] .theme-icon-hacker { display: inline-grid; place-items: center; }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  padding: .55rem 1rem; border-radius: 10px; font-weight: 600; font-size: .92rem;
  transition: var(--trans-fast); white-space: nowrap;
}
.btn:hover { border-color: var(--border-hi); background: var(--surface3); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.btn-lg { padding: .8rem 2.2rem; font-size: 1.05rem; border-radius: 12px; }
.btn-sm { padding: .35rem .7rem; font-size: .84rem; }
.btn-block { width: 100%; }
.linklike { background: none; border: 0; color: var(--accent); padding: 0; font-size: inherit; }
.linklike:hover { color: var(--accent-2); }

/* ------------------------------ Inputs ---------------------------------- */
.input, select.input, textarea.input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; padding: .55rem .7rem;
  font: inherit; transition: var(--trans-fast);
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.input-num { width: 5rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .86rem; color: var(--text-secondary); margin-bottom: .8rem; }
.field .opt { color: var(--muted); font-weight: 400; }
.field-hint, .field-hint small { color: var(--muted); font-size: .78rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text-secondary); margin-bottom: .8rem; }
.form-error { color: var(--bad); font-size: .85rem; margin: .2rem 0 .7rem; }
/* Per-field validation: red-highlight the offending input + an inline reason. */
.field.has-error .input { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.field.has-error .field-hint, .field.has-error .pw-match { display: none; }
.field-error { color: var(--bad); font-size: .78rem; font-weight: 600; margin: 0; }

/* ------------------------------ Layout ---------------------------------- */
.page { flex: 1 1 auto; width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--gap); }
.app-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
  grid-template-areas: "timer" "slots" "templates";
  align-items: start;
}
@media (min-width: 640px) {
  .app-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "timer timer" "slots templates"; }
}
@media (min-width: 1000px) {
  .app-grid {
    grid-template-columns: 1fr 1fr 1fr;          /* three equal-width columns */
    grid-template-areas: "timer slots templates";
    align-items: start;                          /* each box sizes to its OWN content — no forced equal height */
  }
}
/* Box on/off toggles (templates + slots), with graceful reflow of the others. */
.app-grid.templates-hidden .card-templates { display: none; }
.app-grid.slots-hidden .card-slots { display: none; }
@media (min-width: 1000px) {
  .app-grid.templates-hidden { grid-template-columns: 1fr 1fr; grid-template-areas: "timer slots"; }
  .app-grid.slots-hidden { grid-template-columns: 1fr 1fr; grid-template-areas: "timer templates"; }
  .app-grid.slots-hidden.templates-hidden { grid-template-columns: 1fr; grid-template-areas: "timer"; max-width: 560px; margin: 0 auto; }
}

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--shadow); padding: clamp(.8rem, 1.6vw, 1.25rem);
  display: flex; flex-direction: column; min-width: 0; overflow: visible;   /* content-fit; never clip borders/rings */
}
.card-timer { grid-area: timer; align-items: center; }
.card-slots { grid-area: slots; overflow: visible; }   /* size to content; never clip first/last slot */
.card-templates { grid-area: templates; overflow: visible; }   /* never clip card frames/hover-lift */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.card-head h2 { font-size: 1rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.card-head-actions { display: flex; align-items: center; gap: .4rem; }

/* ------------------------------ Timer ----------------------------------- */
.mode-tabs { display: flex; gap: .3rem; background: var(--surface2); padding: .3rem; border-radius: 12px; margin-bottom: 1rem; width: 100%; }
.mode-tab { flex: 1; border: 0; background: transparent; color: var(--text-secondary); padding: .5rem .4rem; border-radius: 9px; font-weight: 600; font-size: .86rem; white-space: nowrap; transition: var(--trans-fast); }
.mode-tab:hover { color: var(--text); }
.mode-tab.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px var(--shadow); }
.timer-body { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: 100%; }   /* no flex:1 — timer box is only as tall as its content */
.timer-display {
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 13vw, 6.6rem); line-height: 1; letter-spacing: -.02em; color: var(--text);
}
.timer-sub { color: var(--muted); font-size: .95rem; min-height: 1.2em; text-align: center; }
.progress { width: 100%; max-width: 420px; height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 1s linear; }
.dots { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; min-height: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface3); }
.dot.is-done { background: var(--accent); }

/* Daily/weekly goal + streak strip under the timer */
.goal-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .8rem; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.goal-strip[hidden] { display: none; }
.goal-seg { white-space: nowrap; }
.goal-seg.met { color: var(--short); font-weight: 600; }

.timer-controls { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }

/* phase theming */
.card-timer[data-phase="work"]  { --accent: var(--work); }
.card-timer[data-phase="short_break"] { --accent: var(--short); }
.card-timer[data-phase="long_break"]  { --accent: var(--long); }

.template-run { width: 100%; margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.template-run-head { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-secondary); margin-bottom: .4rem; }
.template-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; max-height: 90px; overflow: auto; }
.template-steps li { font-size: .72rem; padding: .15rem .45rem; border-radius: 6px; background: var(--surface2); color: var(--muted); }
.template-steps li.is-current { background: var(--accent-glow); color: var(--accent); }
.template-steps li.is-done { opacity: .5; text-decoration: line-through; }

/* ------------------------------ Slots ----------------------------------- */
/* Grows with the number of slots — no inner scrollbar. Small padding gives the
   first/last row's highlight ring room so it is never clipped. */
.slot-list { list-style: none; margin: 0; padding: 3px 2px; overflow: visible; display: flex; flex-direction: column; gap: .4rem; }
.slot-item { display: flex; align-items: center; gap: .55rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .6rem; transition: var(--trans-fast); }
.slot-item:hover { border-color: var(--border-hi); }
.slot-item.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }
.slot-item.is-done { opacity: .55; }
.slot-item.is-done .slot-title { text-decoration: line-through; }
.slot-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-hi); background: transparent; display: grid; place-items: center; color: transparent; }
.slot-check.is-checked { background: var(--good); border-color: var(--good); color: #06210f; }
.slot-main { flex: 1; min-width: 0; }
.slot-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-meta { font-size: .74rem; color: var(--muted); }
.slot-count { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.slot-del { color: var(--muted); }
.slot-del:hover { color: var(--bad); }
.slot-counter { font-size: .78rem; color: var(--muted); }
.slot-form { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; padding: .7rem; background: var(--surface2); border-radius: 10px; }
.slot-form-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.slot-est { font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
.slot-form-btns { display: flex; gap: .4rem; }
.empty { color: var(--muted); font-size: .88rem; text-align: center; padding: 1rem .5rem; }

/* ------------------------------ Templates ------------------------------- */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; overflow: visible; align-content: start; padding: 3px 2px; }
.tpl-card { text-align: left; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .65rem; transition: var(--trans-fast); display: flex; flex-direction: column; gap: .2rem; }
.tpl-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tpl-code { font-family: var(--mono); font-size: .7rem; color: var(--accent); letter-spacing: .04em; }
.tpl-name { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-meta { font-size: .72rem; color: var(--muted); }
.tpl-fam { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.template-hint { font-size: .76rem; color: var(--muted); margin: .5rem 0 0; }

/* ------------------------------ Modals ---------------------------------- */
.modal-root { position: fixed; inset: 0; z-index: 60; }
.modal-root[hidden] { display: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: 100%; max-width: 440px; max-height: calc(90vh / var(--zoom, 1)); overflow: auto;
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--radius);
  box-shadow: 0 18px 60px var(--shadow-heavy); padding: 1.5rem;
  animation: modal-in var(--trans);
}
.modal-wide .modal-card { max-width: 720px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
/* Modal header — a flex row holding the title (or the auth tabs) and the ✕
   close button side by side. The ✕ is a flex item, never absolutely positioned,
   so it can never overlap the top row. */
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.modal-title { margin: 0; font-size: 1.2rem; }
.modal-header .tabs { flex: 1 1 auto; margin-bottom: 0; }
.modal-close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; border-radius: 8px; cursor: pointer; }
.modal-close:hover { background: var(--surface2); color: var(--text); }
.tabs { display: flex; gap: .3rem; background: var(--surface2); padding: .3rem; border-radius: 10px; margin-bottom: 1.1rem; }
.tab { flex: 1; border: 0; background: transparent; color: var(--text-secondary); padding: .5rem; border-radius: 8px; font-weight: 600; }
.tab.is-active { background: var(--surface); color: var(--text); }

/* settings */
.settings-layout { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; }
@media (max-width: 560px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { flex-direction: row; overflow-x: auto; } }
.settings-nav { display: flex; flex-direction: column; gap: .2rem; }
.settings-tab { text-align: left; background: transparent; border: 0; color: var(--text-secondary); padding: .5rem .7rem; border-radius: 8px; white-space: nowrap; }
.settings-tab:hover { background: var(--surface2); color: var(--text); }
.settings-tab.is-active { background: var(--accent-glow); color: var(--accent); }
.settings-pane { display: none; }
.settings-pane.is-active { display: block; }

/* Shared pane heading rhythm — uniform, consistent gap between a heading and the
   content/box below it (no more 1–2px cramming). */
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.pane-title { margin: 0 0 .9rem; font-size: 1rem; }
.pane-head .pane-title { margin: 0; }
.pane-intro { margin: 0 0 1rem; }
.pane-empty { margin: .4rem 0 0; }

/* Groups — Manage list + inline edit + soft-delete confirm */
.gr-danger { padding: .75rem .8rem; background: color-mix(in srgb, var(--bad) 10%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: 10px; }
.gr-danger-txt { margin: 0 0 .6rem; font-size: .85rem; color: var(--text); }
.gr-danger-bar { display: flex; gap: .5rem; justify-content: flex-end; }
.group-edit { display: flex; flex-direction: column; }
.form-bar { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .6rem; }

/* OTP-style 8-box join-code input (type one char, auto-advance) */
.otp { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: .2rem 0 1rem; }
.otp-box {
  width: 3rem; height: 3.4rem; text-align: center; font-size: 1.5rem; font-weight: 700;
  font-family: var(--mono); text-transform: uppercase; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; caret-color: var(--accent);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.otp-box:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
@media (max-width: 460px) { .otp { gap: .35rem; } .otp-box { width: 2.3rem; height: 2.8rem; font-size: 1.2rem; } }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: 0; }
.set-row > label { color: var(--text-secondary); font-size: .9rem; }
.set-subhead { margin: .8rem 0 .1rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); opacity: .85; }
/* Live new-password / confirmation match indicator: green = match, red = mismatch. */
.pw-match { margin: .3rem 0 0; font-size: .82rem; font-weight: 600; }
.pw-match.ok  { color: var(--good); }
.pw-match.bad { color: var(--bad); }
.seg { display: inline-flex; background: var(--surface2); border-radius: 8px; padding: .2rem; gap: .15rem; }
.seg button { border: 0; background: transparent; color: var(--text-secondary); padding: .3rem .6rem; border-radius: 6px; font-size: .82rem; }
.seg button.is-active { background: var(--surface); color: var(--text); }
.swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch.is-active { border-color: var(--text); }
.contrast-note { font-size: .78rem; margin-top: .4rem; }
.contrast-note.ok { color: var(--good); }
.contrast-note.warn { color: var(--warn); }
.contrast-note.bad { color: var(--bad); }

/* switch */
.switch { position: relative; width: 40px; height: 22px; flex: 0 0 auto; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--surface3); border-radius: 999px; transition: var(--trans-fast); cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: var(--trans-fast); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::before { transform: translateX(18px); background: var(--on-accent); }

/* lists (groups / templates manager) */
.list-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: .5rem; }
.list-row .lr-main { min-width: 0; }
.list-row .lr-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .lr-sub { font-size: .76rem; color: var(--muted); }
.code-pill { font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 6px; letter-spacing: .12em; }
.pin-row { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; }
.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; margin: 0; }
.shortcuts dt { text-align: right; }
.shortcuts .sc-secret { opacity: .8; }
kbd { font-family: var(--mono); background: var(--surface2); border: 1px solid var(--border-hi); border-bottom-width: 2px; border-radius: 6px; padding: .1rem .4rem; font-size: .8rem; }

/* ------------------------------ Toasts ---------------------------------- */
.toast-wrap { position: fixed; bottom: calc(var(--foot-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast { background: var(--surface3); color: var(--text); border: 1px solid var(--border-hi); border-radius: 10px; padding: .6rem 1rem; box-shadow: 0 6px 20px var(--shadow-heavy); font-size: .88rem; animation: toast-in var(--trans); max-width: 90vw; }
.toast.ok { border-left: 3px solid var(--good); }
.toast.err { border-left: 3px solid var(--bad); }
.toast.info { border-left: 3px solid var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------ Footer ---------------------------------- */
.sitefoot {
  /* Default: NOT sticky — the footer sits at the end of content and scrolls with
     the page (never overlays it). Opt-in stickiness via body.foot-sticky below.
     The top bar, by contrast, is always sticky (see .topbar). */
  height: var(--foot-h); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(.7rem, 2vw, 1.4rem); font-size: .78rem; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--border);
}
/* Site setting footer_sticky = ON → pin the footer to the viewport bottom. */
body.foot-sticky .sitefoot { position: sticky; bottom: 0; z-index: 30; }
.foot-dim { color: var(--muted); }
.foot-r { display: flex; gap: 1rem; align-items: center; }
.foot-r a, .foot-r button { color: var(--muted); }
.foot-r a:hover, .foot-r button:hover { color: var(--text); }

/* ------------------------------ Stats page ------------------------------ */
.stats-scopes { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); width: 100%; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.stat-num { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-card.goal-met { border-color: var(--short); }
.goal-bar { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; margin: .5rem 0 .3rem; }
.goal-bar-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s ease; }
.goal-bar-fill.met { background: var(--short); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.chart-card h3 { font-size: .95rem; color: var(--text-secondary); margin-bottom: .7rem; }
.chart-holder { position: relative; height: 240px; }
.lb-table, .hist-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.lb-table th, .lb-table td, .hist-table th, .hist-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.lb-table td.num, .hist-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table th.num, .hist-table th.num { text-align: right; }
.lb-table .c { text-align: center; }
/* Groups / Country: picker + ranked overview (click a row to open it) + inline notices. */
.scope-picker { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 var(--gap); }
.scope-picker label { color: var(--text-secondary); font-size: .88rem; font-weight: 600; }
.scope-picker select.input { width: auto; max-width: 100%; min-width: 12rem; }
.stats-msg { margin: 0 0 var(--gap); padding: .7rem 1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--info); color: var(--text-secondary); font-size: .9rem; }
.ov-table tbody tr { cursor: pointer; }
.ov-table tbody tr:hover td { background: var(--surface2); }
.ov-table tbody tr.is-active td { background: var(--accent-glow); }
.ov-table tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ov-name { display: inline-flex; align-items: center; gap: .5rem; }
/* Timestamp cells: ISO date + 24h time as separate spans (house style — never blended). */
.dt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-t { color: var(--muted); margin-left: .5rem; }
.badge { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: var(--surface3); color: var(--text-secondary); }
.badge.work { background: color-mix(in srgb, var(--work) 22%, transparent); color: var(--work); }
.badge.short_break { background: color-mix(in srgb, var(--short) 22%, transparent); color: var(--short); }
.badge.long_break { background: color-mix(in srgb, var(--long) 22%, transparent); color: var(--long); }
.muted { color: var(--muted); }

/* ------------------------------ Admin ----------------------------------- */
.admin-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Data tables: fixed, relative column widths (a <colgroup> per table) keep every
   column aligned under its header and scale with the window. Text starts left;
   .c centres short values (codes, levels, switches, counts, dates, buttons). */
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; table-layout: fixed; }
.admin-table th, .admin-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.admin-table th { color: var(--text-secondary); font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; overflow-wrap: normal; }
.admin-table .c { text-align: center; }
.admin-table td.num { font-variant-numeric: tabular-nums; }
.admin-table tr:hover td { background: var(--surface2); }
.admin-table select.input { width: auto; max-width: 100%; padding: .35rem .5rem; }
.admin-table .code-pill { letter-spacing: .06em; white-space: nowrap; }
.admin-table .switch { vertical-align: middle; }
/* Timestamps: date and time each stay whole, but may sit on two lines in a narrow column. */
.admin-table .dt { white-space: normal; }
.admin-table .dt-d, .admin-table .dt-t { display: inline-block; white-space: nowrap; margin: 0 .2rem; }
/* Sortable header: the whole label is the button; ▲/▼ marks the active column. */
.th-sort { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort:hover { color: var(--text); }
/* Both arrows always show; the lit one follows the values down the list:
   ascending lights ▼ (A on top, Z below), descending lights ▲. */
.sort-ind { display: inline-flex; flex-direction: column; justify-content: center; font-size: .56rem; line-height: .78; }
.sort-ind > span { opacity: .3; }
th[aria-sort="ascending"] .sa-down, th[aria-sort="descending"] .sa-up { opacity: 1; color: var(--accent); }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--text); }
/* Action buttons sit in a wrapping, centred flex row INSIDE the cell — the cell
   itself stays a table cell, so its column stays aligned. */
.act { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.pager { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; font-size: .85rem; }
/* The current admin section, import type and grid filter stand out. */
.admin-nav .btn.is-active, .bulk-kinds .btn.is-active, .bulk-chips .btn.is-active, .gc-actions .btn.is-active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }

/* ── Admin › Bulk actions ─────────────────────────────────────────────────── */
.bulk-kinds { display: flex; gap: .3rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.bulk-help { margin: 0 0 .8rem; font-size: .86rem; }
.bulk-help summary { cursor: pointer; color: var(--text-secondary); }
.bulk-help ul { margin: .4rem 0 .4rem 1.1rem; padding: 0; }
.bulk-help li { margin: .15rem 0; }
.bulk-help code { font-family: var(--mono); font-size: .8rem; }
.bulk-text { width: 100%; min-height: 8rem; font-family: var(--mono); font-size: .82rem; resize: vertical; }
.bulk-bar, .bulk-gen, .bulk-format, .bulk-chips, .bulk-actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.bulk-gen .input { width: auto; max-width: 14rem; }
.bulk-gen .input-num { width: 5.5rem; }
.bulk-opt { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--text-secondary); }
.bulk-opt select.input { width: auto; padding: .3rem .45rem; }
.bulk-note { margin: .3rem 0; font-size: .84rem; color: var(--warn); }
.bulk-msgbox { margin: .6rem 0; padding: .6rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); border-left-width: 3px; background: var(--surface); font-size: .88rem; }
.bulk-msgbox.ok { border-left-color: var(--good); }
.bulk-msgbox.err { border-left-color: var(--bad); }
.bulk-msgbox.warn { border-left-color: var(--warn); }
.bulk-msgbox.info { border-left-color: var(--accent); }
.bulk-msgbox ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.bulk-msgbox .bulk-actions { margin-bottom: 0; }
.bulk-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); max-width: 100%; }
.bulk-grid { border-collapse: collapse; font-size: .82rem; min-width: 100%; }
.bulk-grid th, .bulk-grid td { padding: .3rem .4rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.bulk-grid th { background: var(--surface2); font-size: .72rem; color: var(--text-secondary); white-space: nowrap; }
.bulk-grid th select.input { font-size: .78rem; padding: .25rem .35rem; width: auto; min-width: 7.5rem; }
.bulk-grid .c { text-align: center; }
.bulk-grid td.num { font-variant-numeric: tabular-nums; color: var(--muted); }
.bulk-grid td .input { min-width: 8.5rem; padding: .25rem .4rem; font-size: .82rem; }
.bulk-grid td.bad .input { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 25%, transparent); }
.bulk-grid td.warn .input { border-color: var(--warn); }
.bulk-grid .input.ignored { opacity: .5; }
.bulk-grid tr.off td:not(:first-child) { opacity: .55; }
.bulk-colname { font-family: var(--mono); font-size: .72rem; margin-bottom: .2rem; }
.bulk-st { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 650; white-space: nowrap; background: var(--surface3); color: var(--text-secondary); }
.bulk-st.new { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.bulk-st.update { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }
.bulk-st.error { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.bulk-msg td { padding-top: .1rem; font-size: .78rem; }
.bulk-msg span { display: inline-block; margin-right: .9rem; }
.m-bad { color: var(--bad); }
.m-warn { color: var(--warn); }
.m-info { color: var(--text-secondary); }
.bulk-confirm { border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: .6rem 0; background: color-mix(in srgb, var(--warn) 8%, transparent); }
.bulk-confirm h4 { margin: 0 0 .3rem; color: var(--warn); }
.bulk-confirm ul { margin: .4rem 0 .6rem 1.1rem; padding: 0; font-size: .84rem; max-height: 14rem; overflow-y: auto; }
.bulk-confirm label { display: flex; gap: .5rem; align-items: center; font-weight: 600; margin: .4rem 0; }
.bulk-hist { margin-top: 1.2rem; }
/* Phones: each row becomes a card of "LABEL  value" lines; the sortable headers
   remain as a wrapping row of sort buttons above the cards. */
@media (max-width: 760px) {
  .admin-table.stack, .admin-table.stack thead, .admin-table.stack tbody, .admin-table.stack tr { display: block; width: 100%; }
  .admin-table.stack colgroup { display: none; }
  .admin-table.stack thead tr { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: 0 .2rem .6rem; }
  .admin-table.stack thead th { display: block; border: 0; padding: 0; }
  .admin-table.stack thead th:not([data-sort]) { display: none; }
  .admin-table.stack thead:not(:has([data-sort])) { display: none; }   /* nothing to sort → no empty bar */
  .admin-table.stack tbody tr { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: .55rem; padding: .25rem .75rem; }
  .admin-table.stack td { display: flex; align-items: center; justify-content: space-between; gap: .8rem; text-align: right; padding: .4rem 0; }
  .admin-table.stack td:last-child { border-bottom: 0; }
  .admin-table.stack td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
  .admin-table.stack td[data-label=""] { justify-content: flex-end; }
  .admin-table.stack td[data-label=""]::before { content: none; }
  .admin-table.stack .act { justify-content: flex-end; }
  .admin-table.stack tr:hover td { background: none; }
}

/* Countries: ISO code, emoji flag or bundled SVG flag — the full name is the
   hover text (and alt / aria-label) in every mode. */
abbr.cc { font-family: var(--mono); font-size: .84em; letter-spacing: .04em; text-decoration: none; cursor: help; }
.flag-emoji { font-size: 1.2em; line-height: 1; cursor: help; }
.flag-svg { display: inline-block; width: 20px; height: 15px; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); cursor: help; }
.cc-none { color: var(--muted); }

/* ------------------------------ Mini mode ------------------------------- */
body.mini-mode .topbar, body.mini-mode .sitefoot, body.mini-mode .card-slots,
body.mini-mode .card-templates, body.mini-mode .skip-link { display: none; }
/* Pop-out: content fills the (snug) window — no excess room, no scroll. */
body.mini-mode .page { padding: .5rem; display: flex; flex-direction: column; justify-content: flex-start; height: auto; min-height: 0; max-width: none; margin: 0; }
body.mini-mode .goal-strip { display: none; }   /* pop-out stays minimal; goals live on the main window */
body.mini-mode .app-grid { display: block; height: auto; max-width: none; margin: 0; }
body.mini-mode .card-timer { border: 0; box-shadow: none; background: transparent; padding: .3rem; width: 100%; max-width: 100%; align-items: stretch; }
body.mini-mode .timer-body { gap: .5rem; }
.mini-return {
  margin-top: .6rem; font-size: .72rem; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* fixes the old overflow bug */
}

/* --------------------- Service status bubble (footer centre) ------------
   Traffic-light pattern from improbus.com/trafficlights.html: one accent
   (--c) drives a color-mix tint pill + pulsing dot. Colours are the site
   TLP values (green #33ff00 / amber #ffc000 / red #ff0033 / blue #2b8fff).
   Red is the fail-safe baseline (no-JS / broken-JS / denied fetch). */
.sitefoot { display: grid; grid-template-columns: 1fr auto 1fr; }
.foot-l { justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-c { justify-self: center; }
.foot-r { justify-self: end; }

.statuslight {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: .74rem; line-height: 1; padding: .28rem .62rem; border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.statuslight .sl-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto;
  animation: rdpt-sl-pulse 2.4s infinite;
}
.statuslight.sl-ok       { --c: #33ff00; }
.statuslight.sl-degraded { --c: #ffc000; }
.statuslight.sl-down     { --c: #ff0033; }
.statuslight.sl-setup    { --c: #2b8fff; }
@keyframes rdpt-sl-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 600px) {
  .sitefoot { grid-template-columns: auto 1fr; }
  .foot-l { display: none; }
  .foot-c { justify-self: start; }
  .sl-text { display: none; }          /* dot-only on very small screens */
  .statuslight { padding: .3rem; }
}

/* ------------------------------ Motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .progress-bar { transition: none; }
  .statuslight .sl-dot { animation: none; }
}

/* ===================== v1.0.0 revamp additions ========================= */
/* Timer phase chip (WORK / SHORT / LONG state) */
.phase-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .85rem; border-radius:999px; background:var(--surface2); color:var(--text-secondary); font-weight:650; font-size:.85rem; letter-spacing:.02em; }
.phase-emoji { font-size:1rem; line-height:1; }
.card-timer[data-phase="work"] .phase-chip { color:var(--work); }
.card-timer[data-phase="short_break"] .phase-chip { color:var(--short); }
.card-timer[data-phase="long_break"] .phase-chip { color:var(--long); }

/* Dotted "add slot" line (restored classic look) */
.slot-add { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; padding:.35rem .5rem; border:2px dashed var(--border-hi); border-radius:10px; background:transparent; }
.slot-add:focus-within { border-color:var(--accent); }
.slot-add .slot-add-input { border:0; background:transparent; box-shadow:none; padding:.3rem; flex:1; }
.slot-add .slot-add-input:focus { box-shadow:none; }
.slot-add-type { border:0; background:var(--surface2); border-radius:8px; width:34px; height:34px; font-size:1rem; flex:0 0 auto; display:grid; place-items:center; }
.slot-add .input-num { width:4.2rem; }

/* Slot-type colours on run-queue rows */
.slot-item.slot-work { border-left:3px solid var(--work); }
.slot-item.slot-short_break { border-left:3px solid var(--short); }
.slot-item.slot-long_break { border-left:3px solid var(--long); }
.slot-item.dragging { opacity:.4; }
.slot-item.drop-target { border-top:2px solid var(--accent); }
.slot-item.is-current { box-shadow:0 0 0 1px var(--accent); background:var(--surface3); }
.slot-item[draggable="true"] { cursor:grab; }

/* Current dot pulse */
.dot.is-current { background:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }

/* Apple-style switch rows */
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.6rem 0; color:var(--text-secondary); font-size:.9rem; }

/* Semantic buttons */
.btn-good { background:transparent; color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent); }
.btn-good:hover { background:color-mix(in srgb, var(--good) 14%, transparent); }
.btn-warn { background:transparent; color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent); }
.btn-warn:hover { background:color-mix(in srgb, var(--warn) 14%, transparent); }

/* Template slot editor (drag-drop reorder) */
.slot-editor { display:flex; flex-direction:column; gap:.4rem; margin:.5rem 0; max-height:calc(42vh / var(--zoom, 1)); overflow:auto; }
.slot-row { display:flex; gap:.4rem; align-items:center; padding:.35rem; border-radius:8px; background:var(--surface2); border-left:3px solid var(--border); cursor:grab; }
.slot-row.slot-work { border-left-color:var(--work); }
.slot-row.slot-short_break { border-left-color:var(--short); }
.slot-row.slot-long_break { border-left-color:var(--long); }
.slot-row .input { padding:.35rem .5rem; }
.slot-row select.input { flex:0 0 auto; width:auto; }
.slot-row .input-num { width:4.5rem; }

/* Consistent spacing between action buttons */
.list-row > .btn { margin-left:.4rem; }

/* Pop-out (mini): fit content, no scrolling */
body.mini-mode { overflow:hidden; min-height:0; display:block; }   /* content-sized so the pop-out can hug it (no flex-fill) */
body.mini-mode .card-timer { padding:.5rem; }
body.mini-mode .timer-display { font-size:clamp(2.6rem,17vw,4rem); }
body.mini-mode .timer-controls { margin-top:.6rem; gap:.35rem; flex-wrap:wrap; justify-content:center; }
body.mini-mode #btn-start { padding:.45rem 1.1rem; font-size:.95rem; }
body.mini-mode .phase-chip { font-size:.78rem; }

/* Footer brand → opens About. Reset the button chrome; tint on hover/focus. */
.foot-brand { background:none; border:0; padding:0; font:inherit; color:var(--muted); cursor:pointer; border-radius:6px; transition:color var(--trans-fast); }
.foot-brand:hover, .foot-brand:focus-visible { color:var(--text); }
.foot-brand strong { color:var(--text); }
select.input option { background:var(--surface); color:var(--text); }

.admin-nav { align-items:center; }
/* Page content is already centred by .page (max-width + margin:auto); avoid
   margin:auto on inner grids — it collapses grids that are flex items. */

/* Burger drag-handle for run-queue rows (☰) */
.slot-drag { flex:0 0 auto; width:24px; height:30px; display:grid; place-items:center; background:transparent; border:0; color:var(--muted); cursor:grab; padding:0; touch-action:none; }
.slot-drag:hover { color:var(--text); }
.slot-drag:active { cursor:grabbing; }
.slot-item { cursor:pointer; }   /* row body selects; only the ☰ handle drags */

/* Theme designer */
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem; }
@media (max-width:560px){ .theme-grid { grid-template-columns:1fr; } }
.theme-col { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:.7rem; }
.theme-col h4 { margin:0 0 .5rem; font-size:.9rem; color:var(--text-secondary); }
.theme-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.2rem 0; font-size:.8rem; color:var(--text-secondary); }
.theme-tok { font-family:var(--mono); font-size:.72rem; }
.theme-row input[type="color"] { width:40px; height:26px; border:1px solid var(--border); border-radius:6px; background:var(--bg); padding:2px; cursor:pointer; }

/* Admin grouped settings + drag handles */
.slot-drag { cursor:grab; color:var(--muted); padding:0 .3rem; user-select:none; }
.slot-drag:active { cursor:grabbing; }
.list-row.dragging { opacity:.4; }

/* Admin site-template editor — two-level (template → time-slots), text left-aligned */
.tpl-list { display:flex; flex-direction:column; gap:.7rem; }
.tpl-card { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:.55rem .65rem; text-align:left; }
.tpl-card.dragging, .slot-line.dragging { opacity:.4; }
.tpl-head { display:flex; align-items:center; gap:.5rem; }
.tpl-main { flex:1 1 auto; min-width:0; }
.tpl-name { width:100%; background:transparent; border:1px solid transparent; border-radius:6px; color:var(--text); font-weight:700; font-size:1rem; padding:.25rem .35rem; }
.tpl-name:hover { border-color:var(--border); }
.tpl-name:focus { border-color:var(--accent); background:var(--surface); outline:none; }
.tpl-meta { font-size:.75rem; color:var(--muted); padding:.05rem .35rem 0; }
.tpl-actions { flex:0 0 auto; display:flex; align-items:center; gap:.2rem; }
.tpl-slots { display:flex; flex-direction:column; gap:.35rem; margin:.5rem 0 0 .35rem; padding:.5rem 0 0 .8rem; border-top:1px solid var(--border); border-left:2px solid var(--border); }
.slot-line { display:flex; align-items:center; gap:.4rem; padding:.3rem .4rem; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:8px; text-align:left; }
.slot-line.slot-work { border-left-color:var(--work); }
.slot-line.slot-short_break { border-left-color:var(--short); }
.slot-line.slot-long_break { border-left-color:var(--long); }
.slot-line select.input { flex:0 0 auto; width:auto; padding:.3rem .4rem; }
.slot-line .slot-min { flex:0 0 auto; display:inline-flex; align-items:center; gap:.25rem; }
.slot-line .slot-min .input-num { width:4rem; padding:.3rem .4rem; }
.slot-line .slot-min .unit { font-size:.75rem; color:var(--muted); }
.slot-line .slot-label { flex:1 1 auto; min-width:4rem; padding:.3rem .4rem; }
.slot-actions { flex:0 0 auto; display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.add-slot { align-self:flex-start; }
.icon-btn.icon-sm { width:30px; height:30px; }
.icon-btn.icon-sm svg { display:block; }
.icon-btn.icon-danger { color:var(--bad); }
.icon-btn.icon-danger:hover { background:color-mix(in srgb, var(--bad) 14%, transparent); border-color:color-mix(in srgb, var(--bad) 40%, transparent); color:var(--bad); }

/* Staged settings Save/Cancel bar (sticky in the modal) */
.settings-bar { display:flex; align-items:center; gap:.6rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border); position:sticky; bottom:-1.5rem; background:var(--surface); padding-bottom:.2rem; }
.settings-bar #settings-dirty { color:var(--warn); font-size:.82rem; }
.ue-bar { display:flex; gap:.6rem; align-items:center; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border); }

/* ==========================================================================
   HACKER MODE  ( hhh cycles: phosphor → amber → matrix → teal )
   A family of CRT/terminal looks. The whole UI turns monospace; a faint static
   scanline overlay + timer glow sell the CRT. The matrix rain is the only
   motion and is killed by prefers-reduced-motion (global rule above).
   ========================================================================== */
:root[data-theme="hacker"] {
  /* default look = Green phosphor */
  --bg: #010401; --surface: #04140a; --surface2: #06210f; --surface3: #0a3018;
  --text: #35ff6a; --text-secondary: #27c451; --muted: #1f8a3c;
  --border: rgba(53,255,106,.20); --border-hi: rgba(53,255,106,.45);
  --shadow: rgba(0,0,0,.6); --shadow-heavy: rgba(0,0,0,.85);
  --accent: #35ff6a; --accent-2: #7dffa4; --accent-glow: rgba(53,255,106,.14);
  --accent-shadow: rgba(53,255,106,.35); --on-accent: #01120a;
  --work: #35ff6a; --short: #7dffa4; --long: #00e0c0;
  --bad: #ff5f5f; --good: #35ff6a; --warn: #ffd23f; --info: #00e0c0;
  --sans: var(--mono);           /* the entire UI goes monospace */
  color-scheme: dark;
}
:root[data-theme="hacker"][data-hacker="amber"] {
  --bg: #0a0600; --surface: #160d02; --surface2: #1f1305; --surface3: #2b1c08;
  --text: #ffb000; --text-secondary: #e59a1e; --muted: #9a7322;
  --border: rgba(255,176,0,.20); --border-hi: rgba(255,176,0,.46);
  --accent: #ffd24a; --accent-2: #ffe390; --accent-glow: rgba(255,176,0,.14);
  --accent-shadow: rgba(255,176,0,.38); --on-accent: #160d02;
  --work: #ffb000; --short: #ffd24a; --long: #ff8c1a;
  --bad: #ff5a30; --good: #ffd24a; --warn: #ffd23f; --info: #ffd24a;
}
:root[data-theme="hacker"][data-hacker="matrix"] {
  --bg: #000000; --surface: #020a02; --surface2: #04140a; --surface3: #063018;
  --text: #00ff41; --text-secondary: #00cc36; --muted: #128a2f;
  --border: rgba(0,255,65,.22); --border-hi: rgba(0,255,65,.50);
  --accent: #00ff41; --accent-2: #7dff8f; --accent-glow: rgba(0,255,65,.16);
  --accent-shadow: rgba(0,255,65,.40); --on-accent: #001a06;
  --work: #00ff41; --short: #7dff8f; --long: #39ffe0;
  --bad: #ff5f5f; --good: #00ff41; --warn: #eaff3f; --info: #39ffe0;
}
:root[data-theme="hacker"][data-hacker="teal"] {
  --bg: #080808; --surface: #101316; --surface2: #151b20; --surface3: #1c2530;
  --text: #d6f2ff; --text-secondary: #9fd8ea; --muted: #5f8a9e;
  --border: rgba(0,204,255,.18); --border-hi: rgba(0,204,255,.44);
  --accent: #00ccff; --accent-2: #7de3ff; --accent-glow: rgba(0,204,255,.14);
  --accent-shadow: rgba(0,204,255,.36); --on-accent: #041219;
  --work: #00ccff; --short: #33e0a0; --long: #b86bff;
  --bad: #ff5a52; --good: #33e0a0; --warn: #ffc24d; --info: #00ccff;
}
/* Terminal glow on the big readouts + a hairline phosphor bloom on the cards. */
:root[data-theme="hacker"] .timer-display { text-shadow: 0 0 16px var(--accent-shadow), 0 0 3px var(--accent-shadow); }
:root[data-theme="hacker"] .brand-name,
:root[data-theme="hacker"] .phase-chip { text-shadow: 0 0 10px var(--accent-shadow); }
:root[data-theme="hacker"] .card { box-shadow: 0 0 0 1px var(--border), 0 0 24px color-mix(in srgb, var(--accent) 9%, transparent); }
:root[data-theme="hacker"] .btn-primary { box-shadow: 0 0 18px var(--accent-shadow); }
/* Static scanlines — a faint, non-interactive overlay above everything. */
:root[data-theme="hacker"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,0) 4px);
}
/* Matrix rain — faint drifting columns; motion only for the matrix look. */
:root[data-theme="hacker"][data-hacker="matrix"] body::before {
  content: ""; position: fixed; inset: -20% 0; z-index: 9998; pointer-events: none; opacity: .07;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 20px, color-mix(in srgb, var(--accent) 60%, transparent) 21px, transparent 23px);
  animation: rdpt-rain 7s linear infinite;
}
@keyframes rdpt-rain { from { transform: translateY(-16%); } to { transform: translateY(16%); } }

/* ==========================================================================
   TIMER-ONLY VIEW  (mobile triple-tap → distraction-free full-screen timer)
   ========================================================================== */
body.timer-only .topbar, body.timer-only .sitefoot, body.timer-only .card-slots,
body.timer-only .card-templates, body.timer-only .skip-link, body.timer-only .goal-strip { display: none; }
body.timer-only .page { max-width: none; margin: 0; padding: 0; display: flex; min-height: calc(100vh / var(--zoom, 1)); min-height: calc(100dvh / var(--zoom, 1)); }
body.timer-only .app-grid { display: flex; width: 100%; max-width: none; margin: 0; }
body.timer-only .card-timer { flex: 1 1 auto; border: 0; box-shadow: none; background: transparent; justify-content: center; }
body.timer-only .timer-display { font-size: clamp(4.5rem, 26vw, 12rem); }
body.timer-only .timer-controls { transform: scale(1.15); }

/* ==========================================================================
   ABOUT / legend modal  ( ... )
   ========================================================================== */
.about-brand { text-align: center; margin-bottom: 1rem; }
.about-wordmark { font-size: 1.7rem; font-weight: 800; letter-spacing: .01em; }
.about-wordmark .rd-accent { color: var(--accent); }
.about-tag { color: var(--muted); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .35rem; }
.about-legend { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; align-items: center; margin: 1.1rem 0; }
.about-legend dt { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.about-legend .lg-swatch { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }
.about-legend dd { margin: 0; color: var(--text-secondary); font-size: .9rem; }
.about-sep { height: 1px; background: var(--border); margin: 1.1rem 0; border: 0; }
.about-foot { text-align: center; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.about-foot a { color: var(--accent); }

/* ── Admin: CSV downloads shown as buttons, header actions, bulk invite editing ── */
a.btn, a.icon-btn { text-decoration: none; }
a.btn:hover, a.icon-btn:hover { color: var(--text); }
.card-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.inv-bulk { display: grid; gap: .5rem; margin: 0 0 .8rem; padding: .7rem .8rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
.inv-bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.inv-bulk .input { width: auto; }
.inv-bulk-n { margin-left: auto; }

/* ── Admin › Settings: cards that wrap and pack like the dashboard; every control
   only as wide as its content (no full-width dropdowns). ── */
.cfg-grid { columns: 19rem; column-gap: var(--gap); }
.cfg-card { break-inside: avoid; margin: 0 0 var(--gap); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem .4rem; }
.cfg-title { margin: 0 0 .25rem; font-size: .8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--border); }
.cfg-title + .cfg-row { border-top: 0; }
.cfg-label { font-size: .9rem; color: var(--text); }
.cfg-label[title] { cursor: help; }
.input.cfg-ctl { width: auto; max-width: 62%; }
select.input.cfg-ctl { min-width: 7.5rem; }
.input.cfg-text { width: 12.5rem; }
.cfg-num { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.cfg-num .input-num { width: 5.6rem; max-width: none; }
.cfg-note { margin: .2rem 0 0; font-size: .82rem; }
.cfg-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: .7rem 0 .3rem; background: linear-gradient(transparent, var(--surface) 40%); }

/* Main page: notice when the start template is gone; compact selects in Settings rows. */
.tpl-notice { margin: 0 0 .6rem; padding: .5rem .7rem; border-left: 3px solid var(--bad); background: var(--surface2); border-radius: 8px; font-size: .88rem; }
.set-row .input.set-select { width: auto; max-width: 60%; }

/* Profile & settings › Group membership + Join group (v4.0): wider dialog, the groups as
   cards across the width (one column on a phone), member lists, the join code boxes. */
#modal-profile .modal-card { max-width: min(980px, 96vw); }
.pane-head-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.group-card { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .7rem .8rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.gc-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.gc-title { font-weight: 650; overflow-wrap: anywhere; }
.gc-role { flex: 0 0 auto; padding: .05rem .45rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gc-role-owner { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.gc-role-admin { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.gc-sub, .gc-meta, .gc-code { font-size: .78rem; color: var(--muted); }
.gc-desc { font-size: .85rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.gc-code code { font-family: var(--mono); color: var(--text); letter-spacing: .08em; }
.gc-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .35rem; }
.gc-members { padding-top: .4rem; border-top: 1px solid var(--border); font-size: .82rem; }
.gc-member-list { display: flex; flex-direction: column; gap: .2rem; max-height: 14rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.gc-member-list li { display: flex; justify-content: space-between; gap: .6rem; }
.gc-m-name { min-width: 0; overflow-wrap: anywhere; }
.group-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.join-btn { display: block; min-width: 12rem; margin: 0 auto; }
.join-ok { margin: 0 0 .6rem; color: var(--good); font-weight: 600; text-align: center; }
.join-mine { margin-top: 1.4rem; }
.group-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.group-chip { padding: .2rem .65rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
.group-chip:hover, .group-chip:focus-visible { border-color: var(--accent); }

/* Login window › Forgot password: the answer stays on screen. */
.forgot-intro { margin: 0 0 .6rem; font-size: .88rem; }
.forgot-result { margin: .2rem 0 .8rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 8px; font-size: .88rem; }
.forgot-result.ok { background: color-mix(in srgb, var(--good) 8%, transparent); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.forgot-result.warn { background: color-mix(in srgb, var(--warn) 9%, transparent); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.forgot-result a { color: var(--accent); }

/* Admin › Settings: a setting the server refused, and Send test email. */
.cfg-row.has-error { flex-wrap: wrap; }
.cfg-row.has-error .input { border-color: var(--bad); }
.cfg-err { flex-basis: 100%; text-align: right; }
.cfg-mailtest { display: flex; flex-direction: column; gap: .45rem; min-width: 0; margin-top: .3rem; padding: .55rem 0 .4rem; border-top: 1px dashed var(--border); }
.cfg-mailtest > .input, .cfg-mailtest > .btn { box-sizing: border-box; width: 100%; max-width: 100%; }
.cfg-mailtest-out { min-width: 0; margin: 0 0 .2rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; font-size: .82rem; overflow-wrap: anywhere; }
.cfg-mailtest-out.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.cfg-mailtest-out.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.cfg-mailtest-out p { margin: 0 0 .3rem; }
.cfg-mailtest-out pre { max-height: 16rem; margin: .3rem 0 0; overflow: auto; font-size: .75rem; white-space: pre-wrap; word-break: break-all; }

/* Admin › Users › a user › Security: a timed password-reset link. */
.reset-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.reset-min { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; }
.reset-min .input-num { width: 6.5rem; }
.reset-out { margin-top: .6rem; }
.reset-out p { margin: 0 0 .4rem; }
.reset-link { display: flex; gap: .4rem; }
.reset-link .input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: .8rem; }
.ok-note { color: var(--good); font-weight: 600; }

/* Profile › Password: the fields appear on "Change Password…" (v4.2). */
.pw-form { margin-top: .1rem; }
.pw-form .linklike { margin-top: .55rem; }

/* Profile & Settings › Features (v4.2): wrapping rows, the time-zone picker, a note. */
.set-row { flex-wrap: wrap; }
.seg { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.tz-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; max-width: 70%; }
.tz-pick .input.set-select { max-width: 100%; }
.set-note { margin: .4rem 0; font-size: .88rem; }
/* SLOTS: the line between unfinished and finished slots (Finished Slots: Move to Bottom),
   or the count of hidden ones (Disappear). */
.slot-divider { display: flex; align-items: center; gap: .6rem; margin: .25rem .2rem 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.slot-divider::before, .slot-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
/* The user's own line under the timer (Profile & Settings › Features). */
.motto { margin: .2rem auto 0; max-width: 34rem; padding: 0 1rem .4rem; color: var(--text-secondary); font-size: .92rem; font-style: italic; text-align: center; overflow-wrap: anywhere; }
.motto::before { content: '“'; }
.motto::after { content: '”'; }
/* Help: shown when the keyboard shortcuts are off. */
.sc-off { margin: 0 0 .8rem; padding: .5rem .7rem; border-left: 3px solid var(--warn); background: var(--surface2); border-radius: 8px; font-size: .88rem; }