/* ===== Clock ===== */

.clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  user-select: none;
}

/* ===== Digital clock =====
   Shares its type treatment with .timer-display on the stopwatch page:
   same size, same font-weight, same letter-spacing. */
.clock-time {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 110px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  line-height: 1;
  white-space: nowrap;
}

/* The display:flex above beats the hidden attribute's display:none, so say it */
.clock-time[hidden] {
  display: none;
}

/* Hundredths and AM/PM: small figures sharing the main baseline, in DOM order
   digits - hundredths - meridiem, so the reading runs from the fastest-moving
   part outward instead of stranding the hundredths after the PM.
   Both take the type size the alarm page gives .alarm-now-ampm - 36px against
   a 110px display - expressed in em so fullscreen scales them with the time
   rather than pinning them at 36px under a 300px clock. */
.clock-ms,
.clock-ampm {
  font-size: 0.33em;
  color: var(--text-secondary);
  line-height: 1;
}

.clock-ms {
  letter-spacing: -0.5px;
  margin-left: 0.1em;
}

/* 0.33em, not 0.11em: margin resolves against this element's own font-size,
   which is already 0.33 of the display. That lands on the 12px the alarm page
   puts in front of its AM/PM, and keeps scaling in fullscreen. */
.clock-ampm {
  letter-spacing: 0.5px;
  margin-left: 0.33em;
}

.clock-ms[hidden],
.clock-ampm[hidden] {
  display: none;
}

/* How wide the display runs, in em, for each combination of extras. Because
   the digits are tabular the width depends only on which spans are showing,
   never on the time itself: 4.23em bare, +0.45em once the hundredths appear,
   +0.66em once the meridiem does. Rounded up here for headroom.
   The rules further down divide the viewport by this instead of pinning a px
   size, which only ever fit the shortest combination - at 80px the 12-hour
   clock with hundredths ran 426px wide and was clipped on a 390px phone. */
.clock-time {
  --clock-fit: 4.3;
}

.clock-time:has(.clock-ms:not([hidden])) {
  --clock-fit: 4.8;
}

.clock-time:has(.clock-ampm:not([hidden])) {
  --clock-fit: 5;
}

.clock-time:has(.clock-ms:not([hidden])):has(.clock-ampm:not([hidden])) {
  --clock-fit: 5.5;
}

/* ===== Analog clock ===== */
.clock-analog svg {
  display: block;
  width: clamp(290px, 68vw, 440px);
  height: auto;
}

/* Soften the rim with stroke-opacity, not opacity: opacity multiplies into
   the fill too, which would drift the face tint away from the hub collar. */
.clk-face {
  fill: rgba(255, 255, 255, 0.05);
  stroke: var(--border-color);
  stroke-width: 1.2;
  stroke-opacity: 0.75;
}

.clk-tick {
  stroke: var(--text-secondary);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.5;
}

.clk-tick-major {
  stroke: var(--text-primary);
  stroke-width: 1.4;
  opacity: 0.85;
}

.clk-num {
  fill: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.5px;
  opacity: 0.9;
}

.clk-hand {
  stroke: var(--text-primary);
  stroke-linecap: round;
  opacity: 0.88;
}

.clk-hour { stroke-width: 4; }
.clk-min  { stroke-width: 3; }

.clk-sec {
  stroke: #e66c00;
  stroke-width: 1.1;
}

/* The collar clips the three hands at their roots. It has to be built from
   the exact two layers the face already uses (page background + 5% white
   wash) to match tone perfectly; a single var(--bg-primary) fill would read
   lighter than the surrounding face and show up as an off-colour disc. */
.clk-pin-collar {
  fill: var(--bg-primary);
}

.clk-pin-collar-tint {
  fill: rgba(255, 255, 255, 0.05);
}

.clk-pin {
  fill: var(--text-primary);
  opacity: 0.88;
}

/* ===== Settings and fullscreen buttons ===== */
.clock-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  transition: opacity 0.4s;
}

.clock-icon-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background-color 0.2s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.clock-icon-btn svg {
  width: 22px;
  height: 22px;
}

.clock-icon-btn:hover,
.clock-icon-btn[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .clock-icon-btn:hover,
[data-theme="light"] .clock-icon-btn[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="red"] .clock-icon-btn,
[data-theme="teal"] .clock-icon-btn,
[data-theme="blue"] .clock-icon-btn,
[data-theme="purple"] .clock-icon-btn,
[data-theme="green"] .clock-icon-btn,
[data-theme="slate"] .clock-icon-btn {
  color: #ffffff;
}

[data-theme="red"] .clock-icon-btn:hover,
[data-theme="teal"] .clock-icon-btn:hover,
[data-theme="blue"] .clock-icon-btn:hover,
[data-theme="purple"] .clock-icon-btn:hover,
[data-theme="green"] .clock-icon-btn:hover,
[data-theme="slate"] .clock-icon-btn:hover,
[data-theme="red"] .clock-icon-btn[aria-expanded="true"],
[data-theme="teal"] .clock-icon-btn[aria-expanded="true"],
[data-theme="blue"] .clock-icon-btn[aria-expanded="true"],
[data-theme="purple"] .clock-icon-btn[aria-expanded="true"],
[data-theme="green"] .clock-icon-btn[aria-expanded="true"],
[data-theme="slate"] .clock-icon-btn[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.18);
}

/* ===== Settings dialog ===== */
.clock-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on open (0s delay) so the dialog can take
     keyboard focus right away, and is only delayed 0.2s on close so the
     fade-out is not cut short. */
  transition: opacity 0.2s, visibility 0s 0.2s;
  padding: 20px;
}

[data-theme="light"] .clock-modal-overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

.clock-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s, visibility 0s 0s;
}

.clock-modal {
  --modal-padding-x: 28px;
  background: var(--bg-secondary);
  border: 1px solid var(--content-border);
  border-radius: 16px;
  padding: 26px var(--modal-padding-x);
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(20px);
  transition: transform 0.2s;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

html:not([data-theme]) .clock-modal {
  border-color: rgba(255, 255, 255, 0.08);
}

.clock-modal-overlay.active .clock-modal {
  transform: translateY(0);
}

[data-theme="red"] .clock-modal,
[data-theme="teal"] .clock-modal,
[data-theme="blue"] .clock-modal,
[data-theme="purple"] .clock-modal,
[data-theme="green"] .clock-modal,
[data-theme="slate"] .clock-modal {
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.2);
}

.clock-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0.65;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: calc(-1 * var(--modal-padding-x));
  margin-right: calc(-1 * var(--modal-padding-x));
  padding: 0 var(--modal-padding-x) 16px;
  border-bottom: 1px solid var(--content-border);
}

html:not([data-theme]) .clock-modal-title {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="red"] .clock-modal-title,
[data-theme="teal"] .clock-modal-title,
[data-theme="blue"] .clock-modal-title,
[data-theme="purple"] .clock-modal-title,
[data-theme="green"] .clock-modal-title,
[data-theme="slate"] .clock-modal-title {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.clock-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  transition: opacity 0.2s;
}

.clock-setting-row.is-off {
  opacity: 0.35;
  pointer-events: none;
}

.clock-setting-label {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

[data-theme="red"] .clock-setting-label,
[data-theme="teal"] .clock-setting-label,
[data-theme="blue"] .clock-setting-label,
[data-theme="purple"] .clock-setting-label,
[data-theme="green"] .clock-setting-label,
[data-theme="slate"] .clock-setting-label {
  color: #ffffff;
}

/* Segmented control: same control-box tokens as Pomodoro's number inputs and
   sound picker (38 tall, 0.5px #555 border, 8px radius). Width is pinned to
   160px, matching .pomo-sound-wrap, so the dialog never resizes on switch. */
.clock-seg {
  display: flex;
  width: 160px;
  height: 38px;
  flex-shrink: 0;
  background-color: #1e1e1e;
  border: 0.5px solid #555;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

[data-theme="light"] .clock-seg {
  background-color: #ebebeb;
  border-color: #ccc;
}

[data-theme="red"] .clock-seg,
[data-theme="teal"] .clock-seg,
[data-theme="blue"] .clock-seg,
[data-theme="purple"] .clock-seg,
[data-theme="green"] .clock-seg,
[data-theme="slate"] .clock-seg {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.clock-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.55;
  transition: background-color 0.15s, opacity 0.15s;
}

[data-theme="red"] .clock-seg-btn,
[data-theme="teal"] .clock-seg-btn,
[data-theme="blue"] .clock-seg-btn,
[data-theme="purple"] .clock-seg-btn,
[data-theme="green"] .clock-seg-btn,
[data-theme="slate"] .clock-seg-btn {
  color: #ffffff;
}

.clock-seg-btn:hover:not(:disabled) {
  opacity: 1;
}

.clock-seg-btn.is-active {
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
}

[data-theme="light"] .clock-seg-btn.is-active {
  background: #ffffff;
}

/* Switch, sharing its shape with the Pomodoro settings switch */
.clock-switch {
  position: relative;
  width: 40px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
}

.clock-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.clock-switch-slider {
  position: absolute;
  inset: 0;
  background-color: #555;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.clock-switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] .clock-switch-slider {
  background-color: #c0c0c0;
}

.clock-switch input:checked + .clock-switch-slider {
  background-color: var(--btn-start-from);
}

.clock-switch input:checked + .clock-switch-slider::after {
  transform: translateX(18px);
}

.clock-setting-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: -2px 0 0;
}

.clock-setting-note[hidden] {
  display: none;
}

.clock-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-left: calc(-1 * var(--modal-padding-x));
  margin-right: calc(-1 * var(--modal-padding-x));
  padding: 16px var(--modal-padding-x) 0;
  border-top: 1px solid var(--content-border);
}

html:not([data-theme]) .clock-modal-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* The base .btn only sets type and cursor; each context supplies its size */
.clock-modal-actions .btn {
  width: 140px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ===== Fullscreen ===== */
.clock-fullscreen .header,
.clock-fullscreen .content-section,
.clock-fullscreen .footer,
.clock-fullscreen .scroll-to-top {
  display: none;
}

.clock-fullscreen .hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0;
  justify-content: center;
}

/* min(), so the viewport only ever takes size away: wherever the clamp already
   fits it is left alone. It did not always fit - at 1280px the clamp gave
   243px, which the 12-hour-plus-hundredths face rendered 1329px wide. */
.clock-fullscreen .clock-time {
  font-size: min(clamp(64px, 19vw, 300px), calc((100vw - 24px) / var(--clock-fit)));
}

.clock-fullscreen .clock-analog svg {
  width: min(74vh, 74vw);
}

/* Hide everything but the clock after 2 seconds of no interaction */
.clock-chrome-hidden .clock-tools {
  opacity: 0;
  pointer-events: none;
}

.clock-chrome-hidden {
  cursor: none;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .clock-wrap {
    gap: 20px;
  }

  .clock-modal-actions .btn {
    width: 120px;
    height: 36px;
  }

  /* 80px still, but only for the combinations that fit it - 24-hour with no
     hundredths clears 390px with room to spare, the other three do not. */
  .clock-time {
    font-size: min(80px, calc((100vw - 24px) / var(--clock-fit)));
  }

  .clk-num {
    font-size: 15px;
  }
}

/* ===== Colour themes: the switch drops the green accent ===== */
[data-theme="red"] .clock-switch-slider,
[data-theme="teal"] .clock-switch-slider,
[data-theme="blue"] .clock-switch-slider,
[data-theme="purple"] .clock-switch-slider,
[data-theme="green"] .clock-switch-slider,
[data-theme="slate"] .clock-switch-slider {
  background-color: rgba(255, 255, 255, 0.25);
}

[data-theme="red"] .clock-switch input:checked + .clock-switch-slider,
[data-theme="teal"] .clock-switch input:checked + .clock-switch-slider,
[data-theme="blue"] .clock-switch input:checked + .clock-switch-slider,
[data-theme="purple"] .clock-switch input:checked + .clock-switch-slider,
[data-theme="green"] .clock-switch input:checked + .clock-switch-slider,
[data-theme="slate"] .clock-switch input:checked + .clock-switch-slider {
  background-color: #ffffff;
}

[data-theme="red"] .clock-switch input:checked + .clock-switch-slider::after,
[data-theme="teal"] .clock-switch input:checked + .clock-switch-slider::after,
[data-theme="blue"] .clock-switch input:checked + .clock-switch-slider::after,
[data-theme="purple"] .clock-switch input:checked + .clock-switch-slider::after,
[data-theme="green"] .clock-switch input:checked + .clock-switch-slider::after,
[data-theme="slate"] .clock-switch input:checked + .clock-switch-slider::after {
  background-color: var(--accent);
}