/* Clock faces share a restrained page palette and scale with the fitted row. */
/* The page palette comes from site.css; only clock rendering colors live here. */
.clock-page {
  --clock-ink: #f2f4f8;
  --led-background: #12161c;
  --led-on: #eff3f9;
  --led-off: #2a313b;
  --led-edge: #303743;
  --led-halo: #eff3f91a;
  --flip-paper: #f4f5f7;
  --flip-lower: #eceef2;
  --flip-ink: #252a35;
  --flip-edge: #d7dce5;
  --flip-seam: #cfd4df;
  --flip-binding: #919ba9;
  --flip-under: #c5ccd7;
  --soft-surface: #303640;
  --soft-ink: #eef1f7;
  --dial-face: #272d36;
  --dial-case: #252a33;
  --dial-rim: #535c6b;
  --dial-ink: #e7ebf3;
  --dial-muted: #7f8998;
  --dial-second: #a5b8eb;
  --quartz-second: #e48683;
}

:root[data-theme=light] .clock-page {
  --clock-ink: #171b24;
  --led-background: #20252d;
  --led-on: #edf2f8;
  --led-off: #363e49;
  --led-edge: #303741;
  --led-halo: #edf2f812;
  --flip-paper: #ffffff;
  --flip-lower: #f7f8fa;
  --flip-ink: #252a35;
  --flip-edge: #dce1e9;
  --flip-seam: #e0e4eb;
  --flip-binding: #a1a9b5;
  --flip-under: #d4dae3;
  --soft-surface: #e9edf3;
  --soft-ink: #2b3340;
  --dial-face: #ffffff;
  --dial-case: #edf0f5;
  --dial-rim: #cdd3dd;
  --dial-ink: #252c38;
  --dial-muted: #8792a2;
  --dial-second: #607bc3;
  --quartz-second: #bd5353;
}

/* White/amber keep their face rendering colours; the page follows the shared theme. */
:root[data-clock-color=white] .clock-page,
:root[data-clock-color=amber] .clock-page {
  --clock-ink: #f0f2f6;
  --led-background: #191d24;
  --led-on: #f0f2f6;
  --led-off: #333c48;
  --led-edge: #3b4452;
  --led-halo: #f0f2f616;
  --flip-paper: #f1f3f7;
  --flip-lower: #e5e9f0;
  --flip-ink: #242c38;
  --flip-edge: #d3dbe6;
  --flip-seam: #cbd3df;
  --flip-binding: #8794a5;
  --flip-under: #aebacb;
  --soft-surface: #e1e6ef;
  --soft-ink: #283342;
  --dial-face: #252b34;
  --dial-case: #20252c;
  --dial-rim: #586373;
  --dial-ink: #f0f2f6;
  --dial-muted: #8794a5;
  --dial-second: #b3c7ff;
  --quartz-second: #e48683;
}

:root[data-clock-color=amber] .clock-page {
  --clock-ink: #edc88d;
  --led-on: #f3cf96;
  --led-off: #453d32;
  --led-halo: #f3cf9614;
  --flip-paper: #f7efdf;
  --flip-lower: #f0e4cc;
  --flip-ink: #604c2c;
  --flip-edge: #dacbae;
  --flip-seam: #d9c7a5;
  --flip-binding: #ad9875;
  --flip-under: #bca984;
  --soft-surface: #eadeca;
  --soft-ink: #5d4828;
  --dial-face: #2d2923;
  --dial-case: #24221f;
  --dial-rim: #73634b;
  --dial-ink: #f1d4a5;
  --dial-muted: #a28d6d;
  --dial-second: #edc88d;
}

/* On the shared light page the classic digits need a dark ink. */
:root[data-theme=light][data-clock-color=white] .clock-page { --clock-ink: #23272f; }
:root[data-theme=light][data-clock-color=amber] .clock-page { --clock-ink: #7a5a26; }

/* New colors tint the clock itself, leaving navigation and controls quiet. */
:root[data-clock-color=ocean] .clock-page {
  --clock-ink: #bad7e9;
  --led-on: #b9dcec;
  --led-off: #2e424e;
  --led-halo: #b9dcec14;
  --flip-paper: #eaf2f7;
  --flip-lower: #dfebf2;
  --flip-ink: #284b64;
  --flip-edge: #c4d6e1;
  --flip-seam: #c8d8e3;
  --flip-binding: #91a7b7;
  --flip-under: #aebfcd;
  --soft-surface: #dceaf3;
  --soft-ink: #294e69;
  --dial-face: #243541;
  --dial-case: #202d36;
  --dial-rim: #5b7485;
  --dial-ink: #d8eaf5;
  --dial-muted: #819bab;
  --dial-second: #abd5ed;
}
:root[data-theme=light][data-clock-color=ocean] .clock-page {
  --clock-ink: #335c78;
  --dial-face: #f3f8fc;
  --dial-case: #e2edf5;
  --dial-rim: #b4c9d9;
  --dial-ink: #33566f;
  --dial-muted: #7a90a2;
  --dial-second: #507b9b;
}

:root[data-clock-color=violet] .clock-page {
  --clock-ink: #d5c8e6;
  --led-on: #d8c7eb;
  --led-off: #42394d;
  --led-halo: #d8c7eb14;
  --flip-paper: #f1edf7;
  --flip-lower: #e8e0f1;
  --flip-ink: #59436f;
  --flip-edge: #d2c7df;
  --flip-seam: #d5c9e1;
  --flip-binding: #a294b3;
  --flip-under: #beb0ce;
  --soft-surface: #ebe3f3;
  --soft-ink: #5b4472;
  --dial-face: #332d3d;
  --dial-case: #29252f;
  --dial-rim: #7c6e8f;
  --dial-ink: #e7dcf3;
  --dial-muted: #a494b5;
  --dial-second: #cab4e0;
}
:root[data-theme=light][data-clock-color=violet] .clock-page {
  --clock-ink: #66517f;
  --dial-face: #f7f4fb;
  --dial-case: #ece6f2;
  --dial-rim: #c7bbd6;
  --dial-ink: #604d76;
  --dial-muted: #9580a8;
  --dial-second: #8c6eaa;
}

:root[data-clock-color=mint] .clock-page {
  --clock-ink: #c1ddce;
  --led-background: #dcece2;
  --led-on: #2d5943;
  --led-off: #bfd2c6;
  --led-edge: #cadcd1;
  --led-halo: transparent;
  --flip-paper: #eff7f2;
  --flip-lower: #e2eee7;
  --flip-ink: #345c47;
  --flip-edge: #c8dbcf;
  --flip-seam: #cadfd2;
  --flip-binding: #96af9f;
  --flip-under: #adc5b7;
  --soft-surface: #e1eee6;
  --soft-ink: #315b45;
  --dial-face: #293b31;
  --dial-case: #25322b;
  --dial-rim: #698875;
  --dial-ink: #e0efe6;
  --dial-muted: #9ab4a6;
  --dial-second: #b8d5c5;
}
:root[data-theme=light][data-clock-color=mint] .clock-page {
  --clock-ink: #3d6750;
  --dial-face: #f5faf7;
  --dial-case: #e4eee8;
  --dial-rim: #bbd0c3;
  --dial-ink: #3d604b;
  --dial-muted: #75917e;
  --dial-second: #628b72;
}

.clock-page #clock-art,
.clock-page .style-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
.clock-page #clock-art { font-size: 1em; }
.clock-page :is(#clock-art, .style-sample) .clock-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: .04em;
  line-height: 1;
}
.clock-page :is(#clock-art, .style-sample) .clock-group.is-small {
  font-size: .64em;
  align-self: center;
}
.clock-page :is(#clock-art, .style-sample) .group-colon {
  display: inline-block;
  flex: 0 0 auto;
  width: .27em;
  text-align: center;
  font: 400 .6em/1 Manrope, 'Segoe UI', sans-serif;
  letter-spacing: 0;
  color: var(--clock-ink);
}
.clock-page :is(#clock-art, .style-sample) .group-colon:has(+ .clock-group.is-small) { font-size: .4em; }
.clock-page :is(#clock-art, .style-sample) .group-value {
  display: block;
  min-width: 1.1em;
  text-align: center;
  font: 500 .84em/1 Manrope, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}

/* A single electronic housing, with no borders around individual number pairs. */
:is(html[data-clock-style=led] .clock-page #clock-art, .clock-page .style-sample[data-style=led]) {
  gap: .035em;
  padding: .15em .18em;
  border: .009em solid var(--led-edge);
  border-radius: .1em;
  background: var(--led-background);
  box-shadow: inset 0 .01em .025em #0000000f;
}
:is(html[data-clock-style=led] .clock-page #clock-art, .clock-page .style-sample[data-style=led]) .group-colon { color: var(--led-on); }
.clock-page :is(#clock-art, .style-sample) .led-digit {
  display: block;
  width: .52em;
  height: .87em;
  overflow: visible;
  flex: 0 0 auto;
}
.clock-page :is(#clock-art, .style-sample) .segment { fill: var(--led-off); }
.clock-page :is(#clock-art, .style-sample) .segment.is-on {
  fill: var(--led-on);
  filter: drop-shadow(0 0 .006em var(--led-halo));
}

/* Static desk-calendar pages: binding rings and a fine fold are structural. */
:is(html[data-clock-style=flip] .clock-page #clock-art, .clock-page .style-sample[data-style=flip]) {
  gap: .07em;
  padding: .07em .025em .04em;
}
:is(html[data-clock-style=flip] .clock-page #clock-art, .clock-page .style-sample[data-style=flip]) .clock-group {
  width: 1.36em;
  height: 1.08em;
  border: .008em solid var(--flip-edge);
  border-radius: .055em;
  color: var(--flip-ink);
  background: linear-gradient(to bottom, var(--flip-paper) 0 50%, var(--flip-lower) 50% 100%);
  box-shadow: 0 .022em 0 var(--flip-under), 0 .05em .07em #0000000d;
}
:is(html[data-clock-style=flip] .clock-page #clock-art, .clock-page .style-sample[data-style=flip]) .clock-group::before {
  content: '';
  position: absolute;
  top: -.055em;
  left: .24em;
  width: .04em;
  height: .13em;
  border-radius: .025em;
  background: var(--flip-binding);
  box-shadow: .8em 0 0 var(--flip-binding);
}
:is(html[data-clock-style=flip] .clock-page #clock-art, .clock-page .style-sample[data-style=flip]) .clock-group::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: .006em solid var(--flip-seam);
  pointer-events: none;
}
:is(html[data-clock-style=flip] .clock-page #clock-art, .clock-page .style-sample[data-style=flip]) .group-colon { font-size: .42em; }

:is(html[data-clock-style=soft] .clock-page #clock-art, .clock-page .style-sample[data-style=soft]) { gap: .06em; }
:is(html[data-clock-style=soft] .clock-page #clock-art, .clock-page .style-sample[data-style=soft]) .clock-group {
  width: 1.3em;
  height: 1.06em;
  border-radius: .16em;
  color: var(--soft-ink);
  background: var(--soft-surface);
}
:is(html[data-clock-style=soft] .clock-page #clock-art, .clock-page .style-sample[data-style=soft]) .group-value { font-weight: 500; }

/* Both circular faces use the same real device-time snapshot as the digits. */
.clock-page :is(#clock-art, .style-sample) .clock-dial {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .16em;
  flex: 0 0 auto;
  line-height: 1;
}
.clock-page :is(#clock-art, .style-sample) .dial-face {
  display: block;
  width: 3.4em;
  height: 3.4em;
  overflow: visible;
  flex: 0 0 auto;
}
.clock-page .clock-dial .dial-case { fill: var(--dial-case); stroke: var(--dial-rim); stroke-width: .8; }
.clock-page .clock-dial .dial-surface { fill: var(--dial-face); }
.clock-page .clock-dial .dial-inner-ring { fill: none; stroke: var(--dial-muted); stroke-width: .45; }
.clock-page .clock-dial .dial-index { stroke: var(--dial-ink); stroke-width: 1.5; }
.clock-page .clock-dial .dial-minute-index { stroke: var(--dial-muted); stroke-width: .7; }
.clock-page .clock-dial .dial-hour-index { stroke: var(--dial-ink); stroke-width: 1.2; }
.clock-page .clock-dial .dial-numeral {
  fill: var(--dial-ink);
  font: 500 13px/1 Manrope, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
}
.clock-page .clock-dial :is(.dial-hand-hour, .dial-hand-minute, .dial-hand-second) { stroke-linecap: round; }
.clock-page .clock-dial .dial-hand-hour { stroke: var(--dial-ink); stroke-width: 5; }
.clock-page .clock-dial .dial-hand-minute { stroke: var(--dial-ink); stroke-width: 3.2; }
.clock-page .clock-dial .dial-hand-second { stroke: var(--dial-second); stroke-width: 1.2; }
.clock-page .clock-dial .dial-pin { fill: var(--dial-ink); }
.clock-page .clock-dial-modern .dial-case { stroke-width: .7; }
.clock-page .clock-dial-modern .dial-hand-hour { stroke-width: 3.6; }
.clock-page .clock-dial-modern .dial-hand-minute { stroke-width: 2.2; }
.clock-page .clock-dial-quartz .dial-hand-second { stroke: var(--quartz-second); }
.clock-page .clock-dial-quartz .dial-pin { fill: var(--quartz-second); }
.clock-page :is(#clock-art, .style-sample) .dial-digital {
  font: 500 .24em/1.2 Manrope, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  color: var(--clock-ink);
}
.clock-page .dial-digital .dial-small-seconds { font-size: .64em; }
.clock-page .dial-digital .dial-period { margin-left: .55em; font-size: .75em; color: var(--muted); }
:root[data-clock-style=analog] .clock-page .time-row,
:root[data-clock-style=quartz] .clock-page .time-row,
:root[data-clock-style=led] .clock-page .time-row,
:root[data-clock-style=flip] .clock-page .time-row,
:root[data-clock-style=soft] .clock-page .time-row { align-items: center; }

/* Native radios keep keyboard selection and selected text independent of color. */
.clock-page fieldset.style-picker { display: block; }
.clock-page .style-picker > .settings-note { margin: 0 0 16px; }
.clock-page .style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.clock-page .style-choice {
  position: relative;
  display: grid;
  grid-template-rows: 68px auto 28px;
  align-items: center;
  justify-items: center;
  align-content: start;
  min-width: 0;
  min-height: 142px;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  touch-action: manipulation;
}
.clock-page .style-choice input {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}
.clock-page .style-choice:hover { border-color: var(--muted); }
.clock-page .style-choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.clock-page .style-choice:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.clock-page .style-sample {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 64px;
  margin: 0;
  font: 500 18px/1 Manrope, 'Segoe UI', sans-serif;
  pointer-events: none;
}
.clock-page .style-sample:is([data-style=led], [data-style=flip], [data-style=soft]) {
  width: auto;
  max-width: 100%;
  font-size: 18px;
  height: auto;
  min-height: 0;
  margin: 0;
}
.clock-page .style-sample:is([data-style=analog], [data-style=quartz]) { font-size: 16px; }
.clock-page .style-sample .dial-digital { display: none; }
.clock-page .style-name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 17px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}
.clock-page .style-description {
  min-height: 28px;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}
.clock-page .style-selected {
  display: none;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
}
.clock-page .style-choice:has(input:checked) .style-selected { display: inline-block; }

@media (max-width: 650px) {
  .clock-page fieldset.style-picker { padding: 12px; }
  .clock-page .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .clock-page .style-choice { padding-inline: 6px; }
  .clock-page .style-sample { font-size: 17px; }
  .clock-page .style-sample:is([data-style=led], [data-style=flip], [data-style=soft]) { font-size: 17px; }
}
@media (max-width: 380px) {
  .clock-page .style-sample { font-size: 16px; }
  .clock-page .style-sample:is([data-style=led], [data-style=flip], [data-style=soft]) { font-size: 16px; }
}

/* Static artwork has no blinking, autonomous animation, or delayed time playback. */