.timer-shell {
  --timer-surface-glass: rgba(7, 18, 31, .18);
  --timer-dial-glass: rgba(8, 22, 38, .20);
  --timer-control-glass: rgba(255, 255, 255, .84);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: auto;
}

.timer-suite {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.timer-suite a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem .8rem;
  border-radius: .75rem;
  text-decoration: none;
  font-weight: 750;
  white-space: nowrap;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(23, 74, 165, .12);
}

:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite a {
  color: #f4efe7 !important;
  background: #18243a;
  border-color: #40506c;
}

.timer-stage {
  --scene-image: none;
  --dial-scene-image: none;
  --timer-scene-position: center;
  --timer-canvas-scrim-alpha: .28;
  --timer-dial-scrim-alpha: .32;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 1.4rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: #10243a;
  box-shadow: 0 24px 60px rgba(5, 16, 27, .16);
}

.timer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(5, 16, 27, var(--timer-canvas-scrim-alpha)), rgba(5, 16, 27, calc(var(--timer-canvas-scrim-alpha) + .14))), var(--scene-image);
  background-size: cover;
  background-position: var(--timer-scene-position);
  transition: opacity .18s ease;
}

.timer-stage > * {
  position: relative;
  z-index: 1;
}

.timer-stage[data-scene="none"] {
  --scene-image: radial-gradient(circle at 50% 8%, #33556c 0, #152d45 42%, #0b1b2d 100%);
  --dial-scene-image: none;
  --timer-canvas-scrim-alpha: .14;
  --timer-dial-scrim-alpha: .36;
}

.timer-surface {
  max-width: 46rem;
  margin: auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 1.3rem;
  background: var(--timer-surface-glass);
  color: #f8fafc;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(5, 16, 27, .26);
}

.timer-surface .timer-tool.tool {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f8fafc;
}

.timer-dial {
  --timer-progress: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(21rem, 78vw);
  aspect-ratio: 1;
  margin: 0 auto .25rem;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  background: rgba(8, 22, 38, var(--timer-dial-scrim-alpha));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 48px rgba(5, 16, 27, .22), inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.timer-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: linear-gradient(rgba(5, 16, 27, var(--timer-dial-scrim-alpha)), rgba(5, 16, 27, calc(var(--timer-dial-scrim-alpha) + .16))), var(--dial-scene-image);
  background-size: cover;
  background-position: var(--timer-scene-position);
  opacity: .92;
}

.timer-progress-svg {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  overflow: visible;
  z-index: 1;
}

.timer-progress-track,
.timer-progress-value {
  fill: none;
  stroke-width: 3;
}

.timer-progress-track { stroke: rgba(255, 255, 255, .30); }

.timer-progress-value {
  stroke: #78a7ff;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--timer-progress));
  transition: stroke-dashoffset .18s linear, stroke .18s ease;
  filter: drop-shadow(0 0 5px rgba(79, 140, 255, .48));
}

.timer-dial .result,
.timer-dial .result-source {
  position: relative;
  z-index: 2;
}

body .timer-dial .result {
  display: block;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 750 clamp(3rem, 10vw, 7rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .58);
}

.timer-dial .result-source {
  margin: .7rem 0 0;
  color: rgba(255, 255, 255, .92);
  font-weight: 750;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .58);
}


.timer-brand { display: inline-flex; width: min(15rem, 70vw); margin-bottom: .65rem; }
.timer-brand img { width: 100%; height: auto; display: block; }
.timer-state-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: start;
  margin-bottom: 1rem;
}
.timer-state-marker {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .8rem;
  border: 1px solid rgba(37, 99, 235, .25);
  color: #2459b8;
  background: rgba(37, 99, 235, .08);
  font-weight: 900;
}
.timer-state-eyebrow, .timer-view-kicker {
  margin: 0 0 .25rem;
  color: #2459b8;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.timer-state-heading { margin: 0; color: #101827; font-size: clamp(1.65rem, 4vw, 2.6rem); line-height: 1.02; }
.timer-state-subtitle { margin: .45rem 0 0; color: #53606f; max-width: 42rem; }
.timer-state-chip {
  align-self: start;
  border: 1px solid rgba(37, 99, 235, .24);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: #eef4ff;
  color: #174aa5;
  font-weight: 850;
  white-space: nowrap;
}
.timer-view { transition: opacity .16s ease, transform .16s ease; }
.timer-view[hidden] { display: none !important; }
.timer-view[data-timer-view="prepare"] {
  border: 1px solid #dbe5f1;
  border-radius: 1.1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: #fffdf8;
  color: #101827;
  box-shadow: 0 18px 42px rgba(32, 45, 65, .08);
}
.timer-view[data-timer-view="prepare"] h3,
.timer-view[data-timer-view="complete"] h3 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 3vw, 2rem); color: #101827; }
.timer-view[data-timer-view="prepare"] p,
.timer-view[data-timer-view="complete"] p { color: #53606f; }
.timer-view[data-timer-view="active"] {
  border: 1px solid rgba(118, 167, 255, .28);
  border-radius: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: #071827;
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 22px 54px rgba(5,16,27,.30);
}
.timer-view[data-timer-view="complete"] {
  border: 1px solid #cfe8dc;
  border-radius: 1.1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: #f4fbf7;
  color: #101827;
  box-shadow: 0 18px 42px rgba(17, 88, 57, .09);
}
.timer-complete-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: 1rem 0 0;
}
.timer-complete-summary div { border: 1px solid #dce9e3; border-radius: .85rem; padding: .75rem; background: rgba(255,255,255,.72); }
.timer-complete-summary dt { color: #617063; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.timer-complete-summary dd { margin: .3rem 0 0; color: #12221a; font-weight: 900; }
.timer-reflection-shell { margin-top: 1rem; padding: .85rem; border: 1px solid #cdebd8; border-radius: 1rem; background: linear-gradient(135deg,#f7fff9,#eaf8f0); }
.timer-reflection-title { margin: 0 0 .65rem !important; color: #17402a !important; font-weight: 850; }
.timer-reflection-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.timer-reflection-options button { min-height: 44px; padding: .55rem .85rem; border: 1px solid #b9dec8; border-radius: 999px; background: #fff; color: #17402a; font-weight: 800; }
.timer-reflection-options button[aria-pressed="true"] { border-color: #16a34a; background: #dcfce7; color: #14532d; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.timer-stage[data-active-timer-view="complete"] .timer-control-primary { background: linear-gradient(135deg,#16a34a,#2563eb); box-shadow: 0 12px 24px rgba(22, 101, 52, .22); }
.timer-stage[data-active-timer-view="complete"] .timer-control-secondary { background: #fff; color: #174aa5; border-color: #c9d7ed; }
.timer-stage[data-active-timer-view="complete"] .timer-history { background: #fff; color: #101827; border-color: #dbe5f1; }
.timer-stage[data-active-timer-view="complete"] .timer-history h2 { color: #101827; }
.timer-stage[data-active-timer-view="complete"] .timer-history p,
.timer-stage[data-active-timer-view="complete"] .timer-history-toggle { color: #53606f; }
.timer-stage[data-active-timer-view="prepare"] .timer-surface,
.timer-stage[data-active-timer-view="complete"] .timer-surface { background: rgba(255, 253, 248, .96); color: #101827; border-color: rgba(26, 38, 55, .10); }
.timer-stage[data-active-timer-view="prepare"] .timer-prepare-panel .timer-view-kicker,
.timer-stage[data-active-timer-view="prepare"] .timer-prepare-panel h3 { display: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-prepare-panel p { margin: 0; text-align: center; }
.timer-stage[data-active-timer-view="prepare"] .timer-view-prepare { padding: .85rem 1rem; box-shadow: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-mode-controls { gap: .75rem; margin-top: .75rem; }
.timer-stage[data-active-timer-view="prepare"] .timer-history { padding: .7rem .85rem; }
.timer-stage[data-active-timer-view="complete"] .timer-surface { max-width: 52rem; }
.timer-stage[data-active-timer-view="active"] .timer-surface { background: var(--timer-surface-glass); color: #f8fafc; }
.timer-stage[data-active-timer-view="active"] .timer-state-heading,
.timer-stage[data-active-timer-view="active"] .timer-state-subtitle { color: #f8fafc; }
.timer-stage[data-active-timer-view="complete"] .timer-state-marker,
.timer-stage[data-active-timer-view="complete"] .timer-state-chip { border-color: rgba(22, 163, 74, .25); background: #e9f9ef; color: #137446; }
.timer-stage[data-active-timer-view="active"] .timer-state-marker,
.timer-stage[data-active-timer-view="active"] .timer-state-chip { border-color: rgba(118,167,255,.35); background: rgba(7,24,39,.68); color: #fff; }
.timer-mode-controls { display: grid; gap: 1rem; margin-top: 1rem; }
.timer-stage[data-active-timer-view="active"] .timer-customize,
.timer-stage[data-active-timer-view="active"] .timer-history,
.timer-stage[data-active-timer-view="active"] .timer-laps,
.timer-stage[data-active-timer-view="active"] .timer-presets,
.timer-stage[data-active-timer-view="complete"] .timer-customize,
.timer-stage[data-active-timer-view="complete"] .timer-presets,
.timer-stage[data-active-timer-view="complete"] #timer-skip { display: none; }
.timer-mode-controls[data-countdown-lifecycle="running"] .timer-presets,
.timer-mode-controls[data-countdown-lifecycle="paused"] .timer-presets,
.timer-mode-controls[data-countdown-lifecycle="complete"] .timer-presets,
.timer-mode-controls[data-countdown-lifecycle="running"] .timer-customize,
.timer-mode-controls[data-countdown-lifecycle="paused"] .timer-customize,
.timer-mode-controls[data-countdown-lifecycle="complete"] .timer-customize { display: none; }
.timer-actions-primary:has(#timer-done:not([hidden])) {
  justify-content: center;
  padding: .7rem;
  border: 1px solid rgba(22, 163, 74, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(22, 163, 74, .10), rgba(37, 99, 235, .08));
  box-shadow: 0 14px 32px rgba(17, 88, 57, .10);
}

.timer-stage[data-active-timer-view="prepare"] .result-llm-row,
.timer-stage[data-active-timer-view="prepare"] .result-social-row { display: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-dial { display: block; }
.timer-stage[data-active-timer-view="complete"] .timer-dial { display: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-mode-controls,
.timer-stage[data-active-timer-view="complete"] .timer-mode-controls { color: #101827; }
.timer-stage[data-active-timer-view="prepare"] .timer-customize,
.timer-stage[data-active-timer-view="prepare"] .timer-history,
.timer-stage[data-active-timer-view="prepare"] .timer-laps { background: #fff; color: #101827; border-color: #dbe5f1; }
.timer-stage[data-active-timer-view="prepare"] .timer-settings label,
.timer-stage[data-active-timer-view="prepare"] .timer-customize summary,
.timer-stage[data-active-timer-view="prepare"] .timer-history h2,
.timer-stage[data-active-timer-view="prepare"] .timer-laps h2 { color: #101827; }
.timer-stage[data-active-timer-view="prepare"] .timer-history p,
.timer-stage[data-active-timer-view="prepare"] .timer-history-toggle { color: #53606f; }
.timer-stage[data-active-timer-view="prepare"] .timer-control-secondary,
.timer-stage[data-active-timer-view="prepare"] .timer-control-tertiary,
.timer-stage[data-active-timer-view="prepare"] .timer-presets button { background: #fff; color: #174aa5; border-color: #c9d7ed; }
.timer-stage[data-timer-lifecycle="paused"] .timer-state-chip { color: #8a5200; border-color: rgba(251,191,36,.35); background: #fff7df; }
.timer-stage[data-timer-state="complete"] .timer-progress-value,
.timer-stage[data-timer-lifecycle="complete"] .timer-progress-value { stroke: #5ee0a0; }
.timer-stage[data-timer-lifecycle="prepare"] #timer-finish,
.timer-stage[data-timer-lifecycle="complete"] #timer-finish,
.timer-stage[data-timer-lifecycle="prepare"] #timer-lap,
.timer-stage[data-timer-lifecycle="complete"] #timer-lap,
.timer-stage[data-timer-lifecycle="running"] #timer-done,
.timer-stage[data-timer-lifecycle="paused"] #timer-done { display: none; }

.timer-phase-pill {
  width: fit-content;
  margin: 0 auto;
  padding: .4rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(8, 22, 38, .38);
  color: #fff;
  font-size: .9rem;
  font-weight: 750;
  text-align: center;
}

.timer-actions,
.timer-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
}

.timer-surface .timer-actions button,
.timer-surface .timer-presets button,
.timer-scene-picker button {
  min-width: 44px;
  min-height: 44px;
}

.timer-surface .timer-control-primary {
  min-height: 52px;
  padding: .75rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: linear-gradient(135deg, #2d6cdf, #174aa5);
  box-shadow: 0 10px 24px rgba(12, 54, 132, .32);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.timer-surface .timer-control-primary:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(12, 54, 132, .38); }
.timer-surface .timer-control-primary:active { transform: translateY(0); }

.timer-surface .timer-control-secondary,
.timer-surface .timer-control-tertiary,
.timer-surface .timer-presets button {
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  background: rgba(8, 22, 38, .42);
  color: #fff;
  font-weight: 700;
}

.timer-surface .timer-presets button { min-height: 40px; padding: .45rem .8rem; }

.timer-customize {
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: .9rem;
  background: rgba(8, 22, 38, .30);
}

.timer-customize summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .55rem .8rem;
  cursor: pointer;
  color: #fff;
  font-weight: 750;
}

.timer-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .75rem;
  padding: .25rem .8rem .9rem;
}

.timer-settings .field,
.timer-settings input { min-width: 0; width: 100%; max-width: 100%; }
.timer-settings label { color: rgba(255, 255, 255, .88); font-size: .82rem; font-weight: 700; }
.timer-settings input { background: var(--timer-control-glass); color: #102038; }
/* Sound / wake-lock toggles — secondary controls, smaller + muted to match the
   settings panel language instead of body text (James 2026-08-28). */
.timer-sound-toggle,
.timer-wake-lock-toggle {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .82rem; font-weight: 650; color: rgba(255,255,255,.82);
  cursor: pointer; line-height: 1.35;
}
.timer-sound-toggle input,
.timer-wake-lock-toggle input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
.timer-wake-lock-note { margin: 4px 0 0 24px; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.55); line-height: 1.45; }
.timer-wake-lock-status { margin: 4px 0 0 24px; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.7); min-height: 1em; }

.timer-error {
  min-height: 1.2em;
  margin: 0;
  color: #ffd1d9;
  text-align: center;
}

.timer-history,
.timer-laps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem 1rem;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .9rem;
  background: rgba(8, 22, 38, .28);
  color: #fff;
}

.timer-history h2,
.timer-laps h2 { margin: 0 0 .15rem; color: #fff; font-size: 1rem; }
.timer-history p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .9rem; }
.timer-history-toggle { grid-column: 1 / -1; color: rgba(255, 255, 255, .88); }
.timer-history-toggle input { width: auto; }
.timer-laps { grid-template-columns: 1fr; }
.timer-laps ol { margin: 0; }

.timer-scene-picker {
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .78);
  color: #0f172a;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.timer-scene-picker summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: .65rem .85rem;
  cursor: pointer;
  font-weight: 800;
}
.timer-scene-picker summary strong { color: #2459b8; font-size: .88rem; }
.timer-scene-picker[open] summary { border-bottom: 1px solid rgba(15, 23, 42, .14); margin-bottom: .7rem; }
.timer-scene-picker > .scene-options,
.timer-scene-picker > p,
.timer-scene-picker > #timer-scene-status { margin-left: .8rem; margin-right: .8rem; }

.timer-stage-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .65rem;
}
.timer-stage-toolbar button {
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(8, 22, 38, .48);
  color: #fff;
  font-weight: 750;
}

.timer-stage[data-timer-state="paused"] .timer-progress-value { stroke: #fbbf24; }
.timer-stage[data-timer-state="complete"] .timer-progress-value { stroke: #5ee0a0; }
.timer-stage[data-timer-phase="break"] .timer-progress-value { stroke: #5ee0a0; }
.timer-stage[data-timer-state="paused"] .timer-dial { filter: saturate(.72); }

body.timer-focus-active {
  overflow: hidden;
  box-sizing: border-box;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
}
body.timer-focus-active .timer-shell {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  max-width: none;
  margin: 0;
}
body.timer-focus-active .timer-suite { display: none; }
body.timer-focus-active .timer-stage {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
  padding: 0;
}
body.timer-focus-active .timer-stage-toolbar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
}
body.timer-focus-active .timer-scene-picker,
body.timer-focus-active .timer-customize,
body.timer-focus-active .timer-history,
body.timer-focus-active .timer-laps,
body.timer-focus-active .timer-presets { display: none; }
body.timer-focus-active .result-llm-row,
body.timer-focus-active .result-social-row,
body.timer-focus-active .timer-customize,
body.timer-focus-active .timer-history,
body.timer-focus-active .preset-clear-row,
body.timer-focus-active .preset-clear-actions,
body.timer-focus-active .timer-alert-toggle,
body.timer-focus-active .timer-sound-toggle,
body.timer-focus-active .timer-wake-lock-toggle,
body.timer-focus-active .timer-wake-lock-note,
body.timer-focus-active .timer-error { display: none; }
body.timer-focus-active .timer-surface {
  grid-area: 1 / 1;
  box-sizing: border-box;
  margin: auto;
  width: min(46rem, 94vw);
  max-width: 94vw;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}
body.timer-focus-active .theme-toggle { display: none !important; }
.timer-stage:fullscreen {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
}
.timer-stage:fullscreen .timer-surface { grid-area: 1 / 1; margin: auto; }
.timer-stage:fullscreen::backdrop { background: #071827; }

.scene-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.scene-options button { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .35rem; border-radius: .7rem; }
.scene-options img { width: 100%; height: auto; border-radius: .45rem; }
.scene-options button[aria-pressed="true"] { outline: 3px solid #2563eb; outline-offset: 2px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

.theme-toggle {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  bottom: auto !important;
}

@media (max-width: 820px) {
  body .site-search-form { display: none !important; }
}

@media (max-width: 720px) {
  .timer-shell { grid-template-columns: 1fr; }
  .timer-suite { min-width: 0; max-width: 100%; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .timer-suite a { white-space: nowrap; flex: 1 1 calc(50% - .5rem); justify-content: center; }
  .timer-stage { padding: .85rem; border-radius: 1.1rem; }
  .timer-surface { padding: 1rem; }
  .timer-dial { width: min(19rem, 82vw); }
  .timer-state-header { grid-template-columns: 1fr; }
  .timer-state-chip { width: fit-content; }
  .timer-complete-summary { grid-template-columns: 1fr; }
  .scene-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timer-history { grid-template-columns: 1fr; }
  .timer-history-toggle { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .timer-stage::before,
  .timer-view,
  .timer-progress-value,
  .timer-surface .timer-control-primary { transition: none; }
  .timer-stage::before,
  .timer-view,
  .timer-progress-value,
  .timer-surface .timer-control-primary { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .timer-stage[data-active-timer-view="active"] .timer-surface { background: #0f2238; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .timer-stage[data-active-timer-view="prepare"] .timer-surface,
  .timer-stage[data-active-timer-view="complete"] .timer-surface { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .timer-dial { background: #152b45; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .timer-scene-picker { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Approved calm-scene visual recovery: preserves the existing adaptive shell. */
.timer-shell { max-width:1440px; padding:24px; grid-template-columns:212px minmax(0,1fr); gap:20px; color:#092b61; }
.timer-suite { position:sticky; top:24px; align-self:start; min-height:620px; flex-direction:column; justify-content:flex-start; padding:14px; border:1px solid #e6edf5; border-radius:18px; background:rgba(255,255,255,.84); box-shadow:0 16px 42px rgba(42,78,118,.12); }
.timer-suite::before { content:"TIME & FOCUS"; padding:8px 10px 12px; color:#64748b; font-size:.66rem; font-weight:850; letter-spacing:.12em; }
.timer-suite a { width:100%; min-height:46px; justify-content:flex-start; padding:0 12px; border:1px solid transparent; border-radius:12px; color:#64748b; background:transparent; }
.timer-suite a:hover,.timer-suite a:focus-visible,.timer-suite a[href="/pomodoro-timer/"] { border-color:#b8d8ff; background:#eaf4ff; color:#0d58bc; }
.timer-suite a:last-child { margin-top:auto; border-top-color:#e6edf5; border-radius:0; color:#092b61; }
.timer-stage { min-height:660px; padding:24px; border-radius:20px; background:#dcecff; box-shadow:0 16px 42px rgba(42,78,118,.12); }
.timer-stage::before { background-image:linear-gradient(105deg,rgba(234,244,255,calc(var(--timer-canvas-scrim-alpha) + .15)),rgba(234,244,255,var(--timer-canvas-scrim-alpha))),var(--scene-image); }
.timer-stage[data-scene="none"] { --scene-image:radial-gradient(circle at 45% 0,#dceeff 0,#eef6fd 44%,#f4f8fc 100%); --timer-canvas-scrim-alpha:.08; }
.timer-surface { max-width:56rem; padding:24px; border-color:rgba(255,255,255,.62); border-radius:18px; background:rgba(255,255,255,.70); box-shadow:0 12px 30px rgba(36,80,120,.10); }
.timer-surface .timer-tool.tool { color:#092b61; }.timer-state-marker { background:#dceeff; border-color:#b8d8ff; color:#1674e8; }.timer-state-heading { color:#092b61; }.timer-state-subtitle { color:#64748b; }.timer-state-chip { background:#eaf4ff; border-color:#b8d8ff; color:#0d58bc; }
.timer-stage[data-active-timer-view="active"] .timer-state-heading { color:#092b61; }.timer-stage[data-active-timer-view="active"] .timer-state-subtitle { color:#64748b; }.timer-view[data-timer-view="active"] { border:0; padding:8px 0 0; background:transparent; box-shadow:none; }
.timer-dial { width:min(320px,62vw); border-color:rgba(255,255,255,.78); background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.50),rgba(255,255,255,.18) 63%,rgba(255,255,255,.30)); box-shadow:inset 0 0 0 10px rgba(255,255,255,.13),0 16px 40px rgba(39,87,125,.18); }.timer-dial::after { content:""; position:absolute; inset:17px; border:1px solid rgba(255,255,255,.70); border-radius:50%; }.timer-progress-track { stroke:rgba(255,255,255,.75); }.timer-progress-value { stroke:#1674e8; filter:drop-shadow(0 0 4px rgba(22,116,232,.35)); }
body .timer-dial .result { color:#092b61 !important; font:850 clamp(3.25rem,7vw,4.5rem)/.95 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.065em; text-shadow:none; }
.timer-dial .result-source { color:#334155; font-size:.76rem; text-shadow:none; font-weight:700; }
.timer-surface .timer-control-primary { min-height:56px; border-radius:999px; background:linear-gradient(135deg,#1674e8,#115dbd); box-shadow:0 10px 24px rgba(22,116,232,.28); }.timer-surface .timer-control-secondary,.timer-surface .timer-control-tertiary { border-color:#e6edf5; border-radius:11px; background:rgba(255,255,255,.76); color:#092b61; }
.timer-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,470px); margin:0 auto; }.timer-surface .timer-presets button { min-height:62px; display:flex; align-items:center; gap:10px; padding:9px 12px; border-color:rgba(255,255,255,.78); border-radius:14px; background:rgba(255,255,255,.72); color:#092b61; box-shadow:0 5px 16px rgba(34,76,111,.09); text-align:left; }.timer-surface .timer-presets button:first-child { border-color:#1674e8; box-shadow:0 7px 20px rgba(22,116,232,.14),inset 0 0 0 1px rgba(22,116,232,.14); }.timer-presets button>span:last-child { display:grid; gap:2px; }.timer-presets small { color:#64748b; font-size:.72rem; font-weight:650; }.preset-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; }.preset-blue { background:#dceeff; color:#1674e8; }.preset-purple { background:#eee4fa; color:#8b62c7; }
.timer-phase-wrap { display:flex; align-items:center; justify-content:center; gap:9px; order:-1; }.timer-phase-pill { width:fit-content; margin:0; border-color:rgba(255,255,255,.76); background:rgba(255,255,255,.78); color:#123a73; box-shadow:0 5px 16px rgba(34,76,111,.09); }.phase-dots { display:inline-flex; gap:5px; align-items:center; }.phase-dots i { width:7px; height:7px; border-radius:50%; background:#c8d8e9; }.phase-dots i.active { background:#1674e8; box-shadow:0 0 0 3px #dceeff; }
.timer-history { padding:16px; border-color:rgba(255,255,255,.78); border-radius:16px; background:rgba(255,255,255,.76); color:#092b61; box-shadow:0 8px 22px rgba(39,74,110,.08); }.timer-history h2,.timer-laps h2 { color:#092b61; }.timer-history h2::before { content:"LOCAL PROGRESS\A"; display:block; white-space:pre; color:#64748b; font-size:.62rem; letter-spacing:.1em; }.timer-history p,.timer-history-toggle { color:#64748b; }
.timer-customize { border-color:#e6edf5; background:rgba(255,255,255,.72); }.timer-customize summary { color:#092b61; }.timer-settings label { color:#64748b; }.timer-settings input { border-color:#e6edf5; background:#fff; color:#092b61; }.timer-scene-picker { max-width:56rem; border-color:#e6edf5; border-radius:16px; background:rgba(255,255,255,.84); color:#092b61; box-shadow:0 8px 22px rgba(39,74,110,.08); }.timer-scene-picker summary strong { color:#1674e8; }.scene-options button,#timer-scene-reset { border-color:#e6edf5; background:#eaf4ff; color:#092b61; }.timer-stage-toolbar button { background:rgba(255,255,255,.82); color:#123a73; }.timer-sound-toggle,.timer-wake-lock-toggle{color:#334155}.timer-wake-lock-note{color:#64748b}.timer-wake-lock-status{color:#334155}
:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite { border-color:#40506c; background:#18243a; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite a { color:#c5d3e5; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite a:hover,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite a[href="/pomodoro-timer/"] { background:#1e4270; border-color:#3b6594; color:#fff; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite a:last-child { color:#f4efe7; border-top-color:#40506c; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-stage { background:#13243b; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-stage::before { background-image:linear-gradient(105deg,rgba(5,16,31,calc(var(--timer-canvas-scrim-alpha) + .20)),rgba(5,16,31,var(--timer-canvas-scrim-alpha))),var(--scene-image); }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-surface { background:rgba(19,38,63,.78); color:#f8fafc; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-surface .timer-tool.tool,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-state-heading,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-history h2 { color:#f8fafc; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-state-subtitle,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-history p,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-history-toggle { color:#b5c4d8; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-dial { background:radial-gradient(circle,rgba(15,34,58,.48),rgba(15,34,58,.20)); }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) body .timer-dial .result { color:#fff !important; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-dial .result-source { color:#d8e6f5; }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-phase-pill,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-surface .timer-presets button,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-surface .timer-control-secondary,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-history,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-customize { background:rgba(15,31,53,.86); color:#f4f8ff; border-color:rgba(255,255,255,.24); }:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-scene-picker { background:#162842; color:#f4f8ff; }
@media(max-width:900px){.timer-shell{grid-template-columns:1fr;padding:14px}.timer-suite{position:static;min-height:0;flex-direction:row;align-items:center;overflow-x:auto;padding:8px;border-radius:14px}.timer-suite::before{display:none}.timer-suite a{width:auto;flex:0 0 auto;min-height:44px}.timer-suite a:last-child{margin-top:0;border-top-color:transparent}.timer-stage{min-height:0;padding:16px}.timer-dial{width:min(310px,72vw)}}@media(max-width:520px){.timer-shell{padding:10px}.timer-stage{padding:12px;border-radius:16px}.timer-surface{padding:14px}.timer-state-header{grid-template-columns:auto minmax(0,1fr)}.timer-state-chip{display:none}.timer-dial{width:min(286px,76vw);margin-top:30px}.timer-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.timer-complete-summary{grid-template-columns:1fr}body.timer-focus-active .timer-dial{width:min(520px,92vw)}}

/* Ambient sound + screen-off alert controls */
.timer-ambient-toggle,.timer-alert-toggle { display:flex; align-items:center; gap:.5rem; margin:.6rem 0 0; font-size:.82rem; color:#0f2a45; }
.timer-ambient-toggle { flex-wrap:wrap; }
.timer-ambient-label { font-weight:800; }
.timer-ambient-toggle select { min-height:2.25rem; border:1px solid rgba(15,42,69,.32); border-radius:.6rem; background:#fff; color:#0f2a45; padding:0 .5rem; font-weight:700; }
.timer-ambient-note,.timer-alert-note { flex-basis:100%; font-size:.72rem; color:#64748b; }
.timer-alert-toggle input { width:auto; accent-color:#1674e8; }
:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-ambient-toggle,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-alert-toggle { color:#f4f8ff; }
:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-ambient-toggle select { background:#1a2a44; color:#eaf4ff; border-color:rgba(255,255,255,.28); }
:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-ambient-note,:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-alert-note { color:#b5c4d8; }

/* Mobile timer header compaction (vision-audited 2026-08-27) */
@media(max-width:520px){
  html[data-timer-lifecycle] .tool-context{display:none}
  html[data-timer-lifecycle] header h1{font-size:1.3rem;line-height:1.15;margin:0 0 2px}
  html[data-timer-lifecycle] header .lead{font-size:.82rem;line-height:1.3;margin:0 0 6px;max-width:92%}
  html[data-timer-lifecycle] .timer-suite{flex-wrap:nowrap;padding:6px 8px;margin-bottom:6px;min-height:44px}
  html[data-timer-lifecycle] .timer-suite a{min-height:40px;padding:8px 10px;white-space:nowrap}
  html[data-timer-lifecycle] .timer-stage{padding-top:6px}
  html[data-timer-lifecycle] .timer-dial{width:min(250px,72vw);margin-top:8px}
}

/* Timer above-the-fold controls (vision-audited 2026-08-27) */
@media(min-width:761px){
  .timer-view-active{margin-bottom:0}
  .timer-mode-controls{margin-top:0}
  .timer-dial{width:min(280px,46vh)}
  .timer-surface{padding-top:2px !important}
  .timer-stage-toolbar{margin-bottom:4px}
}
@media(max-width:520px){
  html[data-timer-lifecycle] #btk-fav-star{display:none !important}
}
@media(min-width:761px){
  .timer-surface{padding-top:6px !important;margin-top:0}
  .timer-stage{padding-top:10px}
}

/* ============================================================
   BTK DESIGN TOKENS (Apple doctrine 2026-08-27)
   Semantic colors by purpose — components consume tokens only.
   ============================================================ */
:root{
  --surface-base:#f6f3ee; --surface-elevated:#ffffff; --surface-high:#ffffff;
  --ink-1:#101827; --ink-2:#334155; --ink-3:#64748b;
  --accent:#175CD3; --accent-ink:#ffffff; --accent-hover:#1452b8;
  --border-soft:#e2e8f0;
  --dial-face:#ffffff; --dial-ink:#0f2a45; --dial-src:#334155; --dial-ring:#dbe4f0;
  --scrim:rgba(11,20,34,.30);
}
:root[data-theme="navy"]{
  --surface-base:#0e1a2e; --surface-elevated:#13243b; --surface-high:#1a2f4a;
  --ink-1:#f8fafc; --ink-2:#c5d3e5; --ink-3:#8fa3bd;
  --accent:#3b82f6; --accent-ink:#ffffff; --accent-hover:#2f6fe0;
  --border-soft:#33475f;
  --dial-face:#162842; --dial-ink:#f8fafc; --dial-src:#c5d3e5; --dial-ring:#33475f;
  --scrim:rgba(5,12,24,.38);
}
:root[data-theme="black"]{
  --surface-base:#000000; --surface-elevated:#0b0f16; --surface-high:#141a24;
  --ink-1:#ffffff; --ink-2:#c2ccd9; --ink-3:#8a95a6;
  --accent:#2563eb; --accent-ink:#ffffff; --accent-hover:#1d55d0;
  --border-soft:#232a36;
  --dial-face:#0b0f16; --dial-ink:#ffffff; --dial-src:#aab6c8; --dial-ring:#232a36;
  --scrim:rgba(0,0,0,.45);
}

/* === Token migration overrides (end of cascade) === */
.timer-stage{background:var(--surface-base)}
.timer-surface{background:var(--surface-elevated);color:var(--ink-1);border-color:var(--border-soft)}
.timer-dial{background:radial-gradient(circle at 50% 46%,var(--dial-face),var(--dial-ring))}
body .timer-dial .result{color:var(--dial-ink)!important}
.timer-dial .result-source{color:var(--dial-src)!important}
.timer-state-heading{color:var(--ink-1)!important}
.timer-state-subtitle{color:var(--ink-2)!important}
.timer-control-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--accent-ink)}
.timer-control-secondary{color:var(--ink-2);border-color:var(--border-soft);background:var(--surface-high)}
.timer-phase-pill{color:var(--ink-1);border-color:var(--border-soft);background:var(--surface-high)}
.timer-surface .timer-presets button{color:var(--ink-1);border-color:var(--border-soft);background:var(--surface-high)}
.timer-customize,.timer-history,.timer-scene-picker{color:var(--ink-1);border-color:var(--border-soft)}
.timer-suite{color:var(--ink-1)}
.timer-suite a{color:var(--ink-2)}
.timer-suite a:hover{color:var(--ink-1)}

/* === Dial as material: dim layer when scenery is behind (Apple 35% rule) === */
.timer-stage[data-scene]:not([data-scene="none"]) .timer-dial{position:relative}
.timer-stage[data-scene]:not([data-scene="none"]) .timer-dial::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--scrim);z-index:1;pointer-events:none}
.timer-stage[data-scene]:not([data-scene="none"]) .timer-dial .result{position:relative;z-index:2}
.timer-stage[data-scene]:not([data-scene="none"]) .timer-dial .result-source{position:relative;z-index:2}

/* === Suite nav active state (aria-current) === */
.timer-suite a[aria-current="page"]{border-color:#b8d8ff;background:#eaf4ff;color:#0d58bc;font-weight:700}
:root:is([data-theme="dark"],[data-theme="black"],[data-theme="navy"]) .timer-suite a[aria-current="page"]{background:#1e4270;border-color:#3b6594;color:#fff}

/* Vision-audited nits 2026-08-27: toolbar breathing room + mobile bottom padding */
.timer-stage-toolbar{padding:2px 2px 8px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media(max-width:520px){
  html[data-timer-lifecycle] .timer-stage-toolbar{justify-content:flex-start;padding:4px 0 8px}
  html[data-timer-lifecycle] .timer-mode-controls{padding-bottom:10px;margin-bottom:2px}
}

/* Tool identity (review 2026-08-27): stopwatch + countdown are not focus tools */
html[data-timer-tool="stopwatch"] #timer-focus-mode,
html[data-timer-tool="stopwatch"] .timer-scene-picker,
html[data-timer-tool="stopwatch"] .timer-reflection-shell,
html[data-timer-tool="countdown"] #timer-focus-mode,
html[data-timer-tool="countdown"] .timer-scene-picker,
html[data-timer-tool="countdown"] .timer-reflection-shell { display:none !important; }

/* --- Motion pass (2026-08-28, from kinetics/motion.dev principles) ---
   The progress ring and the seconds digits are the most-watched pixels on
   the site; give them spring weight instead of flat linear. Reduced-motion
   is already handled by the global kill-switch. */
.timer-progress-value{transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1),stroke .3s ease}
.timer-dial .result{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.timer-dial .result.bump{transform:scale(1.03)}
.timer-control-primary{position:relative;overflow:hidden;isolation:isolate;transition:transform 160ms ease,box-shadow .2s ease}
.timer-control-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--accent-hover),var(--accent));transform:translateX(-101%);transition:transform .3s cubic-bezier(.65,0,.35,1)}
.timer-control-primary:hover::before{transform:translateX(0)}
.timer-control-primary:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 30%,transparent)}
@media(prefers-reduced-motion:reduce){.timer-progress-value,.timer-dial .result,.timer-control-primary,.timer-control-primary::before{transition:none!important}}

/* ============================================================
   FULL-PAGE RE-SKIN v2 (2026-08-28, James-approved)
   StudySpark ambient-glass + cooking-timer tick-mark/FAB cues
   layered over the existing timer engine (features untouched).
   ============================================================ */

/* Canvas: ambient scene fills the stage, glass floats above it */
.timer-stage{background:linear-gradient(165deg,var(--scene-c1,#2a3f5f) 0%,var(--scene-c2,#152b45) 55%,var(--scene-c3,#0f2238) 100%) !important;position:relative}
.timer-stage::before{background-image:linear-gradient(105deg,rgba(255,255,255,calc(var(--timer-canvas-scrim-alpha,0.28) + .08)),rgba(255,255,255,var(--timer-canvas-scrim-alpha,0.28))),var(--scene-image) !important;opacity:.5}
.timer-stage[data-scene="none"]{--scene-c1:#2a3f5f;--scene-c2:#152b45;--scene-c3:#0f2238}

/* Glass surface: translucent frosted panel over the scene */
.timer-surface{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.18) !important;-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 18px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.14);border-radius:22px !important}

/* Digits: typography-first, no heavy card */
body .timer-dial .result{color:#fff !important;font-weight:800;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.timer-dial{background:transparent !important;border-color:rgba(255,255,255,.22) !important;box-shadow:none !important}

/* Progress ring: brighter stroke, glow */
.timer-progress-track{stroke:rgba(255,255,255,.22) !important}
.timer-progress-value{stroke:#78a7ff;filter:drop-shadow(0 0 6px rgba(120,167,255,.55))}

/* Primary control: frosted pill with fill-sweep + glow (StudySpark white pill) */
.timer-surface .timer-control-primary{background:linear-gradient(135deg,#ffffff,#f0f4ff) !important;color:#0d1b3a !important;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.2);font-weight:850}
.timer-surface .timer-control-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.3)}
.timer-surface .timer-control-secondary{background:rgba(255,255,255,.12) !important;color:#fff !important;border-color:rgba(255,255,255,.28) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Mode tabs: frosted segmented pill */
.timer-mode-controls .timer-presets button,.timer-scene-picker,.timer-customize,.timer-history,.timer-settings{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.timer-presets button{background:rgba(255,255,255,.12) !important;color:#fff !important;border-color:rgba(255,255,255,.22) !important}

/* State header: light text on scene */
.timer-state-heading{color:#fff !important}
.timer-state-subtitle{color:rgba(255,255,255,.78) !important}
.timer-state-chip{background:rgba(255,255,255,.14) !important;color:#fff !important;border-color:rgba(255,255,255,.25) !important}

/* Phase pill */
.timer-phase-pill{background:rgba(255,255,255,.14) !important;color:#fff !important;border-color:rgba(255,255,255,.25) !important}

/* Scene picker + settings labels */
.timer-settings label{color:rgba(255,255,255,.85) !important}
.timer-settings input{background:rgba(255,255,255,.92);color:#0d1b3a}

/* Suite rail: glass on the side */
.timer-suite{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.14) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.timer-suite a{color:rgba(255,255,255,.72) !important}
.timer-suite a:hover,.timer-suite a[href="/pomodoro-timer/"]{background:rgba(255,255,255,.12) !important;color:#fff !important;border-color:rgba(255,255,255,.3) !important}
.timer-suite::before{color:rgba(255,255,255,.5) !important}

/* Laps list */
.timer-laps{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important}
.timer-laps h2{color:#fff !important}

/* Complete state: keep white card for readability, glass border */
.timer-stage[data-active-timer-view="complete"] .timer-surface{background:rgba(255,253,248,.92) !important;color:#101827 !important}
.timer-stage[data-active-timer-view="complete"] .timer-state-heading{color:#101827 !important}
.timer-stage[data-active-timer-view="complete"] .timer-state-subtitle{color:#53606f !important}

/* Focus mode: deeper ambient, dim chrome */
body.timer-focus-active .timer-stage{background:linear-gradient(165deg,var(--scene-c1,#0e1e33),var(--scene-c3,#071827)) !important}
body.timer-focus-active .timer-surface{background:rgba(255,255,255,.06) !important}

/* Reduced motion: kill backdrop + transitions */
@media(prefers-reduced-motion:reduce){.timer-surface,.timer-suite,.timer-control-secondary{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Contrast fixes (2026-08-28 vision pass): sidebar + secondary controls must
   stay readable over the glass. */
.timer-suite a{color:rgba(255,255,255,.9) !important;font-weight:650}
.timer-suite a:hover,.timer-suite a[href="/pomodoro-timer/"]{background:rgba(255,255,255,.18) !important;color:#fff !important}
.timer-suite::before{color:rgba(255,255,255,.72) !important}
.timer-surface .timer-control-secondary{background:rgba(15,27,48,.42) !important;color:#fff !important;border-color:rgba(255,255,255,.32) !important;font-weight:700}
.timer-surface .timer-control-secondary:hover{background:rgba(15,27,48,.55) !important}
.timer-stage-toolbar button{color:rgba(255,255,255,.9) !important}
.timer-phase-pill{font-weight:800}
.timer-state-subtitle{font-weight:600}

/* 2026-08-31 contrast fixes (vision review): light-theme tabs/toolbar had
   near-white text on near-white backgrounds; timer dial text hard to read. */
.timer-surface .timer-suite a { color: #092b61 !important; font-weight: 750; }
.timer-surface .timer-suite a[href="/pomodoro-timer/"] { color: #fff !important; }
.timer-surface .timer-control-secondary { color: #092b61 !important; }
.timer-surface .timer-state-eyebrow,
.timer-surface .timer-view-kicker { color: #174aa5 !important; }
.timer-surface .timer-dial .result { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.timer-surface .timer-dial .result-source { color: rgba(255,255,255,.96) !important; font-weight: 750; }
.timer-surface .timer-suite a,
.timer-surface .timer-suite a:visited { color: #0d3a75 !important; font-weight: 800; }
.timer-surface .timer-suite a[href="/pomodoro-timer/"],
.timer-surface .timer-suite a:hover,
.timer-surface .timer-suite a:focus-visible { color: #ffffff !important; background: #1e4270; border-color: #3b6594; }
/* 2026-08-31 vision fix: on mobile the white scrim washed out the suite rail;
   deepen the scrim + solidify suite chips for readability (design intent kept) */
@media(max-width:900px){
  .timer-stage::before{background-image:linear-gradient(105deg,rgba(5,16,31,.5),rgba(5,16,31,.35)),var(--scene-image) !important}
  .timer-suite a{color:rgba(255,255,255,.96) !important;font-weight:750;text-shadow:0 1px 6px rgba(0,0,0,.4)}
  .timer-suite a[href="/pomodoro-timer/"]{color:#fff !important;background:rgba(22,116,232,.75) !important;border-color:rgba(120,167,255,.6) !important}
  .timer-stage-toolbar .timer-control-secondary{background:rgba(9,27,58,.55) !important;color:#fff !important;border-color:rgba(255,255,255,.4) !important}
}
/* 2026-08-31 follow-up: inactive tabs + Reset still failed contrast on mobile.
   Give every suite chip a dark glass bg so white text always has a dark base. */
@media(max-width:900px){
  .timer-suite a{background:rgba(9,27,58,.62) !important;border-color:rgba(255,255,255,.22) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .timer-suite a[href="/pomodoro-timer/"]{background:rgba(22,116,232,.88) !important}
  .timer-stage-toolbar .timer-control-secondary,
  .timer-surface .timer-control-secondary{background:rgba(9,27,58,.62) !important;color:#fff !important;border-color:rgba(255,255,255,.35) !important}
}
/* 2026-08-31 James feedback: dial sat bottom-heavy in card on mobile — extra band above dial.
   Balance vertical rhythm: tighter stage top padding, equal gap around dial. */
@media(max-width:900px){
  .timer-stage{padding-top:1rem}
  .timer-dial{margin-top:.5rem}
}

/* 2026-08-31 desktop rail contrast: the glass suite text was white-on-light at desktop widths.
   Give the rail its own dark navy base so the re-skin's white text works everywhere. */
.timer-suite{background:rgba(9,27,58,.88) !important;border-color:rgba(255,255,255,.2) !important}
.timer-suite a{color:rgba(255,255,255,.92) !important}
.timer-suite a:hover{background:rgba(255,255,255,.14) !important}
.timer-suite a[href="/pomodoro-timer/"]{background:rgba(22,116,232,.88) !important;color:#fff !important}
.timer-suite::before{color:rgba(255,255,255,.75) !important}