/* ==========================================================================
   pages/clock.css — the full clock page

   The .clock block itself lives in content.css; this only adds the stage it
   sits on and the settings controls.
   ========================================================================== */

.clock-stage {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 8vw, 5rem) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(35rem 18rem at 50% 0%, var(--accent-wash), transparent 70%),
    var(--surface-1);
  text-align: center;
}

.clock--big .clock__time {
  /* Scales all the way down to a 320px phone without ever overflowing. */
  font-size: clamp(2.75rem, 13vw, 7rem);
  letter-spacing: -0.045em;
}

.clock--big .clock__date {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.clock-controls {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.clock-controls__heading {
  margin-bottom: var(--space-5);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.clock-controls__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-5);
}

.control {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.control__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Segmented control ------------------------------------------------------ */

.segmented {
  display: flex;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}

.segmented__btn {
  flex: 1;
  /* Comfortable touch target. */
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--r-md) - 0.25rem);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.segmented__btn:hover {
  color: var(--text);
}

/* The selected option. aria-pressed carries the state for assistive tech,
   and this rule is driven by the same attribute, so the two can never
   disagree. */
.segmented__btn[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-contrast);
}

.clock-controls__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-6);
  color: var(--text-mute);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.clock-controls__note svg {
  flex: none;
  margin-top: 0.15rem;
}

.clock-controls__note > span {
  min-width: 0;
}