/* style.css
   Amber-on-black terminal ("TUI") theme foundation: colors, typography,
   tab bar, and the segment-display component. Later steps extend this
   file with timer/alarm list rows, forms, and view-specific layout. */

:root {
  /* Palette */
  --bg: #000000;
  --bg-raised: #0a0a0a;
  --fg: #ffb000;               /* amber */
  --fg-dim: rgba(255, 176, 0, 0.15); /* "off" segment color */
  --fg-muted: rgba(255, 176, 0, 0.55);
  --border: rgba(255, 176, 0, 0.35);
  --glow: rgba(255, 176, 0, 0.65);

  /* Typography */
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code",
    "Courier New", Courier, monospace;

  /* Segment display sizing (scales the whole component). --root-cell-size
     is the single value app.js's updateCellSize() writes on resize; --cell-
     size itself (used directly by list-row-sized displays that don't
     override it) and the clock/timer-row overrides elsewhere in this file
     all derive from it via calc(), so one JS write rescales every segment
     display on the page proportionally. */
  --root-cell-size: 10px;
  --cell-size: var(--root-cell-size);
  --segment-gap: calc(var(--cell-size) * 0.35);
  --digit-gap: calc(var(--cell-size) * 0.6);

  /* Segment transition timing */
  --segment-transition: 150ms ease-out;
}

* {
  box-sizing: border-box;
}

/* Guarantees the `hidden` attribute always actually hides an element, even
   on nodes that also carry a class setting their own `display` (e.g. the
   timers-view__form/list elements toggling .hidden via JS) — without this,
   a more specific class selector's `display: flex` would otherwise beat
   the UA stylesheet's `[hidden] { display: none }`. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Never show scrollbars: every design must fit fully on screen (the
     focused display is auto-scaled to fit by app.js). */
  overflow: hidden;
}

html {
  background: var(--bg);
}

body {
  position: relative;
  z-index: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------
   App header (mode indicator + settings gear)
   Replaces the old clickable tab bar now that navigation is hotkey-driven
   (C/D/T) rather than click-driven — this is a slim informational strip,
   not a nav control.
   ------------------------------------------------------------------ */

.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 0 0.5rem;
}

.app-header__mode-indicator {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--glow);
}

.app-header__hint {
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: none;
}

/* Clickable mode switcher (Clock / Countdown / Timer) in the header. */
.app-header__modes {
  display: flex;
  gap: 0.5rem;
}

/* Match the terminal look of the timer Stop/Delete buttons. */
.app-header__mode-btn {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.app-header__mode-btn:hover {
  color: var(--fg);
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.app-header__mode-btn.is-active {
  color: var(--fg);
  border-color: var(--fg);
  box-shadow: 0 0 8px var(--glow);
}

.app-header__mode-btn .app-header__hint {
  color: var(--fg-muted);
}

/* Manual size (+/-) controls, pinned to the left of the header. */
.app-header__zoom {
  position: absolute;
  left: 0.5rem;
  display: flex;
  gap: 0.35rem;
}

.app-header__zoom-btn {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.app-header__zoom-btn:hover {
  border-color: var(--fg);
  box-shadow: 0 0 6px var(--glow);
}

/* Clock format toggles (weekday / seconds / numeric month) in the control row. */
.clock-view__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.clock-view__toggle input[type='checkbox'] {
  accent-color: var(--fg);
  cursor: pointer;
}

/* Help button + overlay. */
.help-btn {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1rem;
  cursor: pointer;
  z-index: 900;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.help-btn:hover {
  border-color: var(--fg);
  box-shadow: 0 0 8px var(--glow);
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
}

.help-overlay.is-open {
  display: flex;
}

.help-overlay__panel {
  position: relative;
  min-width: 18rem;
  max-width: calc(100vw - 2rem);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 0 calc(var(--cell-size) * 1.5) var(--glow);
  padding: 1.5rem 2rem;
  font-family: var(--font-mono);
  color: var(--fg);
}

.help-overlay__heading {
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center;
}

.help-overlay__row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.2rem 0;
}

.help-overlay__key {
  flex: 0 0 1.6rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.2rem;
  color: var(--fg);
  text-shadow: 0 0 6px var(--glow);
}

.help-overlay__desc {
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}

.help-overlay__close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  appearance: none;
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.help-overlay__close:hover {
  color: var(--fg);
}

/* ---------------------------------------------------------------------
   Mode containers
   ------------------------------------------------------------------ */

main {
  padding: 1.5rem;
}

/* ---------------------------------------------------------------------
   Segment display component
   ------------------------------------------------------------------ */

.segment-display {
  display: inline-flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: var(--digit-gap);
  width: max-content;
  max-width: none;
  padding: calc(var(--cell-size) * 0.25);
}

.sd-digit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, var(--cell-size));
  /* Horizontal bars (a, g, d) are one cell tall; the vertical strokes
     (f, b above the middle, e, c below it) are two cells tall each, so
     the digit reads with realistic 7-segment proportions rather than
     looking squashed. */
  grid-template-rows:
    var(--cell-size)
    calc(var(--cell-size) * 2)
    var(--cell-size)
    calc(var(--cell-size) * 2)
    var(--cell-size);
  gap: var(--segment-gap);
  width: calc(var(--cell-size) * 2 + var(--segment-gap));
}

.sd-cell {
  background: var(--fg-dim);
  transition: background-color var(--segment-transition), box-shadow var(--segment-transition);
}

.sd-cell.on {
  background: var(--fg);
  box-shadow: 0 0 calc(var(--cell-size) * 0.6) var(--glow);
}

/* Segment placement within the 2-column x 5-row digit grid:
   row 1: top (a)            - 1 cell tall
   row 2: top-left (f) / top-right (b)  - 2 cells tall
   row 3: middle (g)         - 1 cell tall
   row 4: bottom-left (e) / bottom-right (c) - 2 cells tall
   row 5: bottom (d)         - 1 cell tall */

.sd-seg-a {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.sd-seg-f {
  grid-column: 1;
  grid-row: 2;
}

.sd-seg-b {
  grid-column: 2;
  grid-row: 2;
}

.sd-seg-g {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.sd-seg-e {
  grid-column: 1;
  grid-row: 4;
}

.sd-seg-c {
  grid-column: 2;
  grid-row: 4;
}

.sd-seg-d {
  grid-column: 1 / span 2;
  grid-row: 5;
}

/* Punctuation "digit" (colon / period): narrower, just two stacked dots,
   aligned with the vertical-stroke rows of a full digit (rows 2 and 4)
   so colons line up visually with the digits beside them. */

.sd-digit-punct {
  display: grid;
  grid-template-rows:
    var(--cell-size)
    calc(var(--cell-size) * 2)
    var(--cell-size)
    calc(var(--cell-size) * 2)
    var(--cell-size);
  gap: var(--segment-gap);
  width: var(--cell-size);
}

.sd-dot {
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 2px;
  align-self: end;
}

.sd-dot-upper {
  grid-row: 2;
}

.sd-dot-lower {
  grid-row: 4;
}

/* ---------------------------------------------------------------------
   Notification flash (notify.js)
   Blinks an element between its normal amber look and a bright/inverted
   amber look, used to draw attention to a finished timer row or firing
   alarm. Toggled via the .flashing class (added/removed by Notify.flash
   / Notify.stopFlash); the animation itself is pure CSS.
   ------------------------------------------------------------------ */

.flashing {
  animation: notify-flash 600ms steps(1, end) infinite;
}

@keyframes notify-flash {
  0%,
  49% {
    background: var(--bg);
    color: var(--fg);
    box-shadow: none;
  }
  50%,
  100% {
    background: var(--fg);
    color: var(--bg);
    box-shadow: 0 0 calc(var(--cell-size) * 1.2) var(--glow);
  }
}

/* ---------------------------------------------------------------------
   Clock view (clock-view.js)
   ------------------------------------------------------------------ */

.clock-view__display {
  /* Scales with the root --cell-size (updated by app.js on resize) instead
     of a fixed px value, so the resize handler's recalculation actually
     reaches the clock's big display. 1.4x keeps the clock noticeably
     larger than the 10px root default, matching the original 14px look. */
  --cell-size: calc(var(--root-cell-size, 10px) * 1.4);
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  margin-bottom: 1rem;
}

/* Free-text title above the digits: small, uppercase, letter-spaced, themed
   accent, with a short divider line beneath it (the ::after rule). */
.clock-view__title {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--glow);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.clock-view__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 1px;
  background: var(--fg-muted);
}

/* Free-text subtitle below the digits: larger, bold, themed. */
.clock-view__subtitle {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px var(--glow);
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.clock-view__field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clock-view__text-input {
  appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  width: 11rem;
}

.clock-view__text-input:focus {
  outline: none;
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

/* Scale labels down in the minor (small) clock widget so they don't
   overpower the shrunken digits. */
.pane--minor .clock-view__title {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  padding-bottom: 0.25rem;
  margin-bottom: 0.3rem;
}

.pane--minor .clock-view__subtitle {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.clock-view__controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.clock-view__format-btn {
  appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.clock-view__format-btn:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.clock-view__timezone-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clock-view__timezone-select {
  appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.clock-view__timezone-select:hover {
  border-color: var(--fg-muted);
}

/* ---------------------------------------------------------------------
   Timers view (timers-view.js)
   ------------------------------------------------------------------ */

.timers-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timers-view__focused {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Title/digits/labels group: stacked in the focused (big) layout. */
.timers-view__focused-main,
.timer-stopwatch-view__focused-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* In the minor (small) widget, the timer and its controls sit on one row.
   Left widget: timer then buttons; right widget: buttons then timer. This keeps
   the buttons up in the top widget row instead of hanging down over the
   focused clock's frame corners. */
.pane--minor--left .timers-view__focused,
.pane--minor--left .timer-stopwatch-view__focused,
.pane--minor--right .timers-view__focused,
.pane--minor--right .timer-stopwatch-view__focused {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.pane--minor--right .timers-view__focused,
.pane--minor--right .timer-stopwatch-view__focused {
  flex-direction: row-reverse;
}

.pane--minor .timers-view__focused-controls,
.pane--minor .timer-stopwatch-view__focused-controls {
  margin: 0;
}

.timers-view__focused-title {
  color: var(--fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timers-view__focused-subtitle {
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.timers-view__focused-label {
  color: var(--fg-muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timers-view__focused-display {
  /* A modest 18px on roomy screens, but shrinks with the responsive
     --root-cell-size (set by app.js's fit) so the big digits never overflow
     the pane and collide with the corner widgets on small windows. */
  --cell-size: min(18px, calc(var(--root-cell-size, 13px) * 1.4));
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}

.timers-view__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-raised);
}

.timers-view__form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timers-view__form-input {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.timers-view__form-input:focus {
  outline: none;
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.timers-view__form-error {
  flex: 1 0 100%;
  color: var(--fg);
  background: rgba(255, 80, 0, 0.15);
  border: 1px solid rgba(255, 80, 0, 0.5);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}

.timers-view__form-actions {
  display: flex;
  gap: 0.5rem;
}

.timers-view__form-submit {
  appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.timers-view__form-submit:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.timers-view__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timers-view__empty {
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.timers-view__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.timers-view__row:hover {
  border-color: var(--fg-muted);
}

.timers-view__row.is-focused {
  border-color: var(--fg-muted);
  box-shadow: 0 0 8px var(--glow);
}

.timers-view__row-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 8rem;
}

.timers-view__row-name {
  color: var(--fg);
  font-size: 0.95rem;
}

.timers-view__row-status {
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timers-view__row-display {
  --cell-size: 8px;
}

.timers-view__row-controls {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.timers-view__row-btn {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.timers-view__row-btn:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.timers-view__row-btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* Control row under the big focused countdown / stopwatch. */
.timers-view__focused-controls,
.timer-stopwatch-view__focused-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  /* Breathing room above (the digits/status) and below (the new-timer form /
     corner widgets) so the buttons never sit flush against them. */
  margin: 1.5rem 0;
}

/* The Stop button (dismiss the completion flash) reads as the primary action
   when a countdown is ringing. */
.timers-view__row-stop,
.timers-view__focused-stop {
  border-color: var(--fg);
  color: var(--fg);
  box-shadow: 0 0 6px var(--glow);
}

/* ---------------------------------------------------------------------
   Timer/stopwatch view (timer-stopwatch-view.js)
   Mirrors the rule shapes of the timers-view__* block above, kept under
   its own prefix so the two panes can be restyled independently later.
   ------------------------------------------------------------------ */

.timer-stopwatch-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timer-stopwatch-view__focused {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timer-stopwatch-view__focused-title {
  color: var(--fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timer-stopwatch-view__focused-subtitle {
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.timer-stopwatch-view__focused-label {
  color: var(--fg-muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timer-stopwatch-view__focused-display {
  --cell-size: min(18px, calc(var(--root-cell-size, 13px) * 1.4));
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}

.timer-stopwatch-view__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-raised);
}

.timer-stopwatch-view__form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timer-stopwatch-view__form-input {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.timer-stopwatch-view__form-input:focus {
  outline: none;
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.timer-stopwatch-view__form-error {
  flex: 1 0 100%;
  color: var(--fg);
  background: rgba(255, 80, 0, 0.15);
  border: 1px solid rgba(255, 80, 0, 0.5);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}

.timer-stopwatch-view__form-actions {
  display: flex;
  gap: 0.5rem;
}

.timer-stopwatch-view__form-submit {
  appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.timer-stopwatch-view__form-submit:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.timer-stopwatch-view__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timer-stopwatch-view__empty {
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.timer-stopwatch-view__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.timer-stopwatch-view__row:hover {
  border-color: var(--fg-muted);
}

.timer-stopwatch-view__row-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 8rem;
}

.timer-stopwatch-view__row-name {
  color: var(--fg);
  font-size: 0.95rem;
}

.timer-stopwatch-view__row-status {
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timer-stopwatch-view__row-display {
  --cell-size: 8px;
}

.timer-stopwatch-view__row-controls {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.timer-stopwatch-view__row-btn {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.timer-stopwatch-view__row-btn:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

/* ---------------------------------------------------------------------
   Alarms view (alarms-view.js)
   ------------------------------------------------------------------ */

.alarms-view__new {
  margin-bottom: 1rem;
}

.alarms-view__new-toggle {
  appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarms-view__new-toggle:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarms-view__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  max-width: 28rem;
}

.alarms-view__form-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.alarms-view__form-label--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.alarms-view__time-input {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.alarms-view__day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.alarms-view__day-chip {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out;
}

.alarms-view__day-chip.is-active {
  color: var(--fg);
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarms-view__day-chip:hover {
  border-color: var(--fg-muted);
}

.alarms-view__form-error {
  color: var(--fg);
  background: rgba(255, 80, 0, 0.12);
  border: 1px solid rgba(255, 80, 0, 0.45);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}

.alarms-view__form-actions {
  display: flex;
  gap: 0.6rem;
}

.alarms-view__form-submit,
.alarms-view__form-cancel {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarms-view__form-submit:hover,
.alarms-view__form-cancel:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarms-view__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 calc(var(--cell-size) * 1.2) var(--glow);
}

.alarms-view__banner-text {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.alarms-view__banner-dismiss {
  appearance: none;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.alarms-view__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alarms-view__empty {
  color: var(--fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.alarms-view__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  transition: border-color 150ms ease-out;
}

.alarms-view__row.is-disabled {
  opacity: 0.5;
}

.alarms-view__row-time {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  min-width: 5.5rem;
}

.alarms-view__row-days {
  flex: 1;
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.alarms-view__row-toggle {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  min-width: 3rem;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out;
}

.alarms-view__row-toggle.is-on {
  color: var(--fg);
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarms-view__row-toggle:hover {
  border-color: var(--fg-muted);
}

.alarms-view__row-delete {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarms-view__row-delete:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

/* ===== Theming: color schemes + visual styles ===== */

/* -----------------------------------------------------------------------
   Color schemes (data-color on <html>)
   "amber" matches the original :root palette exactly (default/fallback).
   "green" and "cyan" mirror the same relative opacity ratios used for
   amber's --fg-dim/--fg-muted/--border/--glow, just with a different hue.
   -------------------------------------------------------------------- */

:root,
[data-color='amber'] {
  --fg: #ffb000;
  --fg-dim: rgba(255, 176, 0, 0.15);
  --fg-muted: rgba(255, 176, 0, 0.55);
  --border: rgba(255, 176, 0, 0.35);
  --glow: rgba(255, 176, 0, 0.65);
}

[data-color='green'] {
  --fg: #33ff66;
  --fg-dim: rgba(51, 255, 102, 0.15);
  --fg-muted: rgba(51, 255, 102, 0.55);
  --border: rgba(51, 255, 102, 0.35);
  --glow: rgba(51, 255, 102, 0.65);
}

[data-color='cyan'] {
  --fg: #66f6ff;
  --fg-dim: rgba(102, 246, 255, 0.15);
  --fg-muted: rgba(102, 246, 255, 0.55);
  --border: rgba(102, 246, 255, 0.35);
  --glow: rgba(102, 246, 255, 0.65);
}

/* -----------------------------------------------------------------------
   Visual styles (data-style on <html>)
   "flat" is the default/original rendering — no rules needed for it since
   the unscoped base styles above already produce that look.
   -------------------------------------------------------------------- */

/* "3d" extrusion + "glitch" rules live in the dedicated block at the end of
   this file (search "Style: 3D extrusion (revised) + Glitch"). */

/* "crt": keep the flat-glow base look, but overlay scanlines + a subtle
   vignette on every segment-display instance (clock + timer rows/focused
   display all share the .segment-display class). Pseudo-element is purely
   decorative (pointer-events: none) and sits above the digits via z-index
   without altering layout (absolute + inset 0 within the relatively
   positioned, already-padded .segment-display box). */
[data-style='crt'] .segment-display {
  position: relative;
  overflow: hidden;
}

[data-style='crt'] .segment-display::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  box-shadow: inset 0 0 calc(var(--cell-size) * 2.4) rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* -----------------------------------------------------------------------
   Settings panel (settings-panel.js) — gear button + dropdown
   -------------------------------------------------------------------- */

.settings-panel {
  position: absolute;
  top: 0;
  right: 0.5rem;
  bottom: 0;
  display: flex;
  align-items: center;
}

.settings-panel__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  margin-top: 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.settings-panel__toggle:hover,
.settings-panel__toggle.is-active {
  color: var(--fg);
  border-color: var(--border);
}

.settings-panel__dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 12rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.85rem;
  box-shadow: 0 0 calc(var(--cell-size) * 1.2) var(--glow);
  /* Cap height to the viewport and scroll only if it still overflows; sits
     above the bottom-right alarm corner. */
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  z-index: 1000;
}

/* Only the fonts menu needs to be wide (its long list flows in 3 columns);
   the Color/Monospace/Effects/Clock menus stay narrow. */
.settings-panel__dropdown--fonts {
  min-width: 34rem;
}

/* The long font list flows in three columns to stay wide and short. The
   doubled class keeps this ahead of the later `.settings-panel__group`
   (display:flex) rule. */
.settings-panel__group.settings-panel__group--columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
}

/* Clock format controls relocated into the settings dropdown: stack them
   vertically and let inputs/selects fill the width. */
.settings-panel__clock-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.settings-panel__clock-controls .clock-view__field-label,
.settings-panel__clock-controls .clock-view__timezone-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-panel__clock-controls select,
.settings-panel__clock-controls input[type='text'] {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-panel__dropdown.is-open {
  display: flex;
}

.settings-panel__group-label {
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.settings-panel__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-panel__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 150ms ease-out;
}

.settings-panel__option:hover {
  color: var(--fg);
}

.settings-panel__option input[type='radio'],
.settings-panel__option input[type='checkbox'] {
  accent-color: var(--fg);
  cursor: pointer;
}

/* ===== Layout: centering + viewfinder frame ===== */

/* App header height is needed so `main` can size itself to exactly fill the
   remaining viewport (calc(100vh - var(--app-header-height))) rather than
   via a hardcoded guess. Kept as a custom property so it stays in one place
   if the header's own padding/font-size ever change. Same value as the old
   --tab-bar-height — no tab bar anymore, but the header strip occupies the
   same slim footprint. */
:root {
  --app-header-height: 3rem;
}

.app-header {
  min-height: var(--app-header-height);
}

/* `main` fills the rest of the viewport below the header and becomes the
   layout context for the three panes. Using calc(100vh - ...) instead of a
   fixed pixel height keeps this correct automatically on every resize, with
   no JS involved for the centering itself (only --cell-size needs JS, since
   it changes the *content* size, not its position).

   `main` is a row-wrapping flex container rather than a column one: the two
   small `.pane--minor` panes are auto-width row items that land next to
   each other on the first line, and the single `.pane--focused` pane below
   them forces a wrap onto its own line via flex-basis: 100% and then grows
   to fill all remaining height. This keeps all three panes plain flex
   siblings of `main` — no wrapper element, no JS reparenting — while still
   getting a "small row near the top, big pane below" layout. */
main {
  box-sizing: border-box;
  min-height: calc(100vh - var(--app-header-height));
  position: relative;
}

/* Pane layout: all three panes (#view-clock / #view-timers /
   #view-timer-mode) stay mounted as direct children of `main` at all
   times — app.js only ever toggles .pane--focused / .pane--minor on them,
   never moves them in the DOM or hides them. */
.pane {
  box-sizing: border-box;
}

/* Minor panes: small, auto-sized row items pinned to the top row. Two of
   them are always present at once and sit side by side via `main`'s row-
   wrap; `order: 1` keeps them ahead of the focused pane in source order
   regardless of which view it actually is. */
/* Minor panes are pinned out of flow along the top edge (left / center /
   right by identity, so no two of them ever overlap) and never affect where
   the focused pane centers. */
.pane--minor {
  position: absolute;
  top: 0.5rem;
  z-index: 1;
}

.pane--minor--left {
  left: 0.5rem;
}

.pane--minor--right {
  right: 0.5rem;
}

/* Focused pane: the one large, centered view. flex-basis: 100% forces it
   onto its own line below the minor row (since the two minor panes' auto
   width never fills a full row), and flex-grow: 1 lets it fill all
   remaining vertical space in `main` — the same centered-both-axes look
   `.mode.is-active` used to produce. */
/* Focused pane fills the whole main area and centers its content (title +
   frame + subtitle) on both axes, so the clock sits dead-center of the window
   regardless of the minor widgets pinned at the top. */
.pane--focused {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Minor-pane compact sizing: scales every segment-display inside a minor
   pane down to a small-but-legible size and tightens up the surrounding
   padding, regardless of which view it is. 6px sits just under the
   smallest existing scoped override (.timers-view__row-display's 8px) so
   the minor row reads clearly as "smaller than a list row". */
.pane--minor .segment-display {
  --cell-size: 6px;
  padding: calc(var(--cell-size) * 0.2);
}

.pane--minor .viewfinder-frame {
  padding: 0.25rem;
}

.pane--minor .viewfinder-frame__corner {
  width: 12px;
  height: 12px;
}

.pane--minor .clock-view__controls {
  display: none;
}

/* ---------------------------------------------------------------------
   Alarm corner widget mount point (built out in a later step) — sane
   default placement so it isn't unstyled/unpositioned before that step
   fills it in. Kept minimal/generic on purpose.
   ------------------------------------------------------------------ */

#alarm-corner {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 20;
}

/* ---------------------------------------------------------------------
   Viewfinder corner-bracket frame (clock-view.js)
   Wraps the Clock view's big segment-display mount only. Four L-shaped
   corner marks built from border-top/border-left (mirrored per corner),
   themed via --border so it automatically matches the active color
   scheme and stays present across every visual style (flat/3d/crt) since
   it lives outside the data-style-scoped rules above.
   ------------------------------------------------------------------ */

.viewfinder-frame {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  /* Uniform gap between the (ink-trimmed) text and the corner marks, the same
     for every font. */
  padding: 0.7rem;
}

/* Focused (big) clock frame: a fixed-size region marked by four L-shaped
   corner brackets (no full border) that enclose the title, the digits and the
   subtitle as one unit. It is sized from the viewport — not from the digits —
   so it never shifts as the numbers tick. ~2cm in from the left/right screen
   edges, ~3cm below the top widget row, ~2cm up from the bottom. */
.pane--focused .viewfinder-frame {
  position: fixed;
  left: 2cm;
  right: 2cm;
  /* Horizontal insets stay at 2cm; vertical insets are roughly doubled so the
     corner brackets sit further from the top widgets and the bottom edge. */
  top: calc(var(--app-header-height) + 6cm);
  bottom: 4cm;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  overflow: hidden;
}

/* Big corner brackets, drawn with thick double lines. */
.pane--focused .viewfinder-frame__corner {
  width: 52px;
  height: 52px;
}

.pane--focused .viewfinder-frame__corner--tl {
  border-top: 9px double var(--border);
  border-left: 9px double var(--border);
}

.pane--focused .viewfinder-frame__corner--tr {
  border-top: 9px double var(--border);
  border-right: 9px double var(--border);
}

.pane--focused .viewfinder-frame__corner--bl {
  border-bottom: 9px double var(--border);
  border-left: 9px double var(--border);
}

.pane--focused .viewfinder-frame__corner--br {
  border-bottom: 9px double var(--border);
  border-right: 9px double var(--border);
}

.viewfinder-frame__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.viewfinder-frame__corner--tl {
  top: 0;
  left: 0;
  border-top: 2px solid var(--border);
  border-left: 2px solid var(--border);
}

.viewfinder-frame__corner--tr {
  top: 0;
  right: 0;
  border-top: 2px solid var(--border);
  border-right: 2px solid var(--border);
}

.viewfinder-frame__corner--bl {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid var(--border);
  border-left: 2px solid var(--border);
}

.viewfinder-frame__corner--br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--border);
  border-right: 2px solid var(--border);
}

/* ===== Alarm corner widget ===== */

.alarm-corner {
  /* #alarm-corner is already position: fixed bottom-right (see mount-point
     rule above); this just establishes it as the popover anchor + flex box. */
  display: flex;
  align-items: flex-end;
}

.alarm-corner__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarm-corner__button:hover,
.alarm-corner__button.is-active {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarm-corner__bell {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--glow));
}

.alarm-corner__next {
  color: var(--fg);
  letter-spacing: 0.06em;
}

.alarm-corner__next.is-empty {
  color: var(--fg-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

/* Popover: anchored to the widget's bottom-right, opening upward + leftward
   so it always stays on-screen from the bottom-right corner. */
.alarm-corner__popover {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 0 18px var(--glow);
}

.alarm-corner__popover.is-open {
  display: flex;
}

.alarm-corner__heading {
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.alarm-corner__new-toggle {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarm-corner__new-toggle:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarm-corner__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.alarm-corner__form-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.alarm-corner__form-label--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.alarm-corner__time-input,
.alarm-corner__text-input {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.alarm-corner__time-input:focus,
.alarm-corner__text-input:focus {
  outline: none;
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarm-corner__day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.alarm-corner__day-chip {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out;
}

.alarm-corner__day-chip.is-active {
  color: var(--fg);
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarm-corner__day-chip:hover {
  border-color: var(--fg-muted);
}

.alarm-corner__form-error {
  color: var(--fg);
  background: rgba(255, 80, 0, 0.12);
  border: 1px solid rgba(255, 80, 0, 0.45);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
}

.alarm-corner__form-actions {
  display: flex;
  gap: 0.5rem;
}

.alarm-corner__form-submit,
.alarm-corner__form-cancel {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarm-corner__form-submit:hover,
.alarm-corner__form-cancel:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarm-corner__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.alarm-corner__empty {
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.alarm-corner__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
}

.alarm-corner__row.is-disabled {
  opacity: 0.5;
}

.alarm-corner__row-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.alarm-corner__row-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.alarm-corner__row-time {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.alarm-corner__row-days {
  color: var(--fg-muted);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.alarm-corner__row-title {
  color: var(--fg);
  font-size: 0.8rem;
}

.alarm-corner__row-subtitle {
  color: var(--fg-muted);
  font-size: 0.72rem;
}

.alarm-corner__row-toggle {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  min-width: 2.6rem;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out;
}

.alarm-corner__row-toggle.is-on {
  color: var(--fg);
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

.alarm-corner__row-toggle:hover {
  border-color: var(--fg-muted);
}

.alarm-corner__row-delete {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.alarm-corner__row-delete:hover {
  border-color: var(--fg-muted);
  box-shadow: 0 0 6px var(--glow);
}

/* ===== Style: 3D extrusion (revised) + Glitch ===== */

/* "3d": a genuinely extruded/embossed segment. Stacked layered box-shadows
   in --fg of decreasing brightness fake an extruded SIDE wall pushing the
   face up off the board; a dark cast shadow offset down-right grounds it;
   a bright inner top-left highlight + brighter face sell the raised look.
   All offsets/blurs scale with --cell-size so it holds at every size, and
   every color is driven by --fg/--glow so it themes correctly. */
[data-style='3d'] .sd-cell.on {
  background: var(--fg);
  border-radius: 1px;
  box-shadow:
    /* extruded side wall: layered --fg copies fading down-right */
    calc(var(--cell-size) * 0.05) calc(var(--cell-size) * 0.05) 0 0 var(--fg),
    calc(var(--cell-size) * 0.10) calc(var(--cell-size) * 0.10) 0 0 var(--fg-muted),
    calc(var(--cell-size) * 0.16) calc(var(--cell-size) * 0.16) 0 0 var(--fg-dim),
    /* dark cast shadow grounding the block */
    calc(var(--cell-size) * 0.30) calc(var(--cell-size) * 0.34) calc(var(--cell-size) * 0.30) rgba(0, 0, 0, 0.7),
    /* top-left highlight + soft glow on the lit face */
    inset calc(var(--cell-size) * 0.14) calc(var(--cell-size) * 0.14) calc(var(--cell-size) * 0.12) rgba(255, 255, 255, 0.45),
    inset calc(var(--cell-size) * -0.10) calc(var(--cell-size) * -0.10) calc(var(--cell-size) * 0.14) rgba(0, 0, 0, 0.4),
    0 0 calc(var(--cell-size) * 0.5) var(--glow);
}

/* Dim/off segments stay flat + recessed so the lit ones pop forward. */
[data-style='3d'] .sd-cell {
  border-radius: 1px;
  box-shadow: inset calc(var(--cell-size) * 0.06) calc(var(--cell-size) * 0.06) calc(var(--cell-size) * 0.1) rgba(0, 0, 0, 0.55);
}

/* "glitch" (labelled "Block 3D" in settings): bold chunky SOLID blocks with a
   stacked offset wireframe outline trailing down-and-right, giving an extruded
   stacked-block 3D look rather than a thin 7-segment skeleton.

   Two parts:
   1. THICK segments — the digit grid is overridden ONLY here so horizontal
      bars are tall and vertical strokes are wide (segments ~40% of the
      digit's short dimension), so adjacent lit blocks nearly merge into a
      solid digit.
   2. OFFSET WIREFRAME SHADOW — each lit cell's ::before and ::after are
      same-size hollow boxes (transparent fill, 1.5px --fg border) stepped
      +0.18/+0.36 of a cell down-right, sitting BEHIND the solid white face. */

/* Part 1: chunky grid. Horizontal bars (a,g,d) get a tall middle row; the
   vertical strokes (f,b,e,c) get wide columns. We widen the columns and
   compress the tall rows relative to the default skeleton grid. */
[data-style='glitch'] .sd-digit {
  grid-template-columns: calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5);
  grid-template-rows:
    calc(var(--cell-size) * 1.5)
    calc(var(--cell-size) * 1.6)
    calc(var(--cell-size) * 1.5)
    calc(var(--cell-size) * 1.6)
    calc(var(--cell-size) * 1.5);
  gap: calc(var(--cell-size) * 0.12);
  width: calc(var(--cell-size) * 3 + var(--cell-size) * 0.12);
}

/* Colon/period punct digit: match the chunky digit's row heights so the
   dots line up with the fat blocks beside them. */
[data-style='glitch'] .sd-digit-punct {
  grid-template-rows:
    calc(var(--cell-size) * 1.5)
    calc(var(--cell-size) * 1.6)
    calc(var(--cell-size) * 1.5)
    calc(var(--cell-size) * 1.6)
    calc(var(--cell-size) * 1.5);
  gap: calc(var(--cell-size) * 0.12);
  width: calc(var(--cell-size) * 1.5);
}

[data-style='glitch'] .sd-dot {
  width: calc(var(--cell-size) * 1.5);
  height: calc(var(--cell-size) * 1.5);
  border-radius: 0;
}

[data-style='glitch'] .sd-cell {
  position: relative;
  border-radius: 0;
}

/* Solid white-bright face on top. */
[data-style='glitch'] .sd-cell.on {
  background: var(--fg);
  border-radius: 0;
  z-index: 2;
  box-shadow: 0 0 calc(var(--cell-size) * 0.3) var(--glow);
}

/* Stacked offset wireframe outlines behind the solid face. */
[data-style='glitch'] .sd-cell.on::before,
[data-style='glitch'] .sd-cell.on::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: 1.5px solid var(--fg);
  z-index: -1;
  pointer-events: none;
}

[data-style='glitch'] .sd-cell.on::before {
  transform: translate(calc(var(--cell-size) * 0.2), calc(var(--cell-size) * 0.2));
  opacity: 0.85;
}

[data-style='glitch'] .sd-cell.on::after {
  transform: translate(calc(var(--cell-size) * 0.4), calc(var(--cell-size) * 0.4));
  opacity: 0.55;
}

/* ===== Block Stack font ===== */

.segment-display {
  --bs-cell: calc(var(--cell-size) * 0.56);
  --bs-shadow-step: calc(var(--bs-cell) * 0.18);
  --bs-shadow-depth: calc(var(--bs-shadow-step) * 3);
  --bs-outline-width: 1.5px;
}

.bs-glyph {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: calc((var(--bs-cell) * var(--bs-cols)) + var(--bs-shadow-depth));
  height: calc((var(--bs-cell) * 7) + var(--bs-shadow-depth));
  border-radius: 0;
}

.bs-layer {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(var(--bs-cols), var(--bs-cell));
  grid-template-rows: repeat(7, var(--bs-cell));
  gap: 0;
  width: calc(var(--bs-cell) * var(--bs-cols));
  height: calc(var(--bs-cell) * 7);
  pointer-events: none;
}

.bs-cell {
  width: var(--bs-cell);
  height: var(--bs-cell);
  background: transparent;
  border: 0 solid transparent;
  border-radius: 0;
  box-shadow: none;
}

.bs-solid {
  z-index: 4;
}

.bs-on {
  background: var(--fg);
  box-shadow: 0 0 calc(var(--bs-cell) * 0.06) var(--glow);
}

.bs-shadow {
  background: transparent;
}

.bs-shadow-1 {
  z-index: 3;
  opacity: 0.82;
  transform: translate(var(--bs-shadow-step), var(--bs-shadow-step));
}

.bs-shadow-2 {
  z-index: 2;
  opacity: 0.62;
  transform: translate(calc(var(--bs-shadow-step) * 2), calc(var(--bs-shadow-step) * 2));
}

.bs-shadow-3 {
  z-index: 1;
  opacity: 0.42;
  transform: translate(calc(var(--bs-shadow-step) * 3), calc(var(--bs-shadow-step) * 3));
}

.bs-outline {
  background: transparent;
}

.bs-edge-top {
  border-top-color: var(--fg);
  border-top-width: var(--bs-outline-width);
}

.bs-edge-right {
  border-right-color: var(--fg);
  border-right-width: var(--bs-outline-width);
}

.bs-edge-bottom {
  border-bottom-color: var(--fg);
  border-bottom-width: var(--bs-outline-width);
}

.bs-edge-left {
  border-left-color: var(--fg);
  border-left-width: var(--bs-outline-width);
}

/* ===== Dash + Dot-Matrix fonts ===== */

.segment-display {
  --dash-font-size: calc(var(--cell-size) * 1.16);
  --dm-cell: calc(var(--cell-size) * 0.74);
  --dm-gap: calc(var(--dm-cell) * 0.18);
  --dm-dot-size: calc(var(--dm-cell) * 0.58);
}

.dash-glyph {
  flex: 0 0 auto;
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--dash-font-size);
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  text-shadow: 0 0 calc(var(--cell-size) * 0.5) var(--glow);
}

.dash-glyph--narrow {
  margin-left: calc(var(--digit-gap) * -0.25);
  margin-right: calc(var(--digit-gap) * -0.25);
}

.dm-glyph {
  display: grid;
  grid-template-columns: repeat(5, var(--dm-cell));
  grid-template-rows: repeat(7, var(--dm-cell));
  gap: var(--dm-gap);
  flex: 0 0 auto;
  width: calc((var(--dm-cell) * 5) + (var(--dm-gap) * 4));
  height: calc((var(--dm-cell) * 7) + (var(--dm-gap) * 6));
}

.dm-cell {
  position: relative;
  width: var(--dm-cell);
  height: var(--dm-cell);
}

.dm-on::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dm-dot-size);
  height: var(--dm-dot-size);
  background: var(--fg);
  border-radius: calc(var(--dm-dot-size) * 0.08);
  box-shadow: 0 0 calc(var(--dm-cell) * 0.22) var(--glow);
  transform: translate(-50%, -50%);
}

/* ===== ASCII figlet fonts ===== */

.segment-display {
  --af-font-size: calc(var(--cell-size) * 0.92);
}

.af-row {
  display: inline-flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: var(--digit-gap);
  width: max-content;
  max-width: none;
}

.af-glyph {
  flex: 0 0 auto;
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--af-font-size);
  font-variant-ligatures: none;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  text-shadow: 0 0 calc(var(--cell-size) * 0.5) var(--glow);
}