/* Classroom Clock. A wall clock in SVG; its colors come from the variables
   below so it reads as a real clock in light and dark themes. */

.ck {
  --ck-rim: #1f3a5f;
  --ck-face-hi: #ffffff;
  --ck-face-mid: #fbfbf8;
  --ck-face-lo: #e9ecef;
  --ck-ink: #1b2430;
  --ck-tick: #3a4452;
  --ck-hand: #1b2430;
  --ck-sec: #e03131;
  --ck-hour-c: #e03131;
  --ck-min-c: #1c6ed4;
  --ck-band: rgba(28, 110, 212, .07);
  --ck-glare: rgba(255, 255, 255, .55);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.4cqmin;
  padding: 3cqmin 3cqmin calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
:root[data-theme="dark"] .ck {
  --ck-face-hi: #27313e; --ck-face-mid: #212a36; --ck-face-lo: #171e28;
  --ck-ink: #eef2f7; --ck-tick: #c3ccd8; --ck-hand: #eef2f7; --ck-sec: #ff5c5c;
  --ck-hour-c: #ff6b6b; --ck-min-c: #5ea8ff; --ck-band: rgba(94, 168, 255, .09); --ck-glare: rgba(255, 255, 255, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ck {
    --ck-face-hi: #27313e; --ck-face-mid: #212a36; --ck-face-lo: #171e28;
    --ck-ink: #eef2f7; --ck-tick: #c3ccd8; --ck-hand: #eef2f7; --ck-sec: #ff5c5c;
    --ck-hour-c: #ff6b6b; --ck-min-c: #5ea8ff; --ck-band: rgba(94, 168, 255, .09); --ck-glare: rgba(255, 255, 255, .12);
  }
}

.ck-face-wrap { position: relative; flex: 1 1 0; min-height: 0; width: 100%; }
.ck-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; user-select: none; -webkit-user-select: none; touch-action: none; }

/* gradients */
.ck-rim-hi { stop-color: color-mix(in srgb, var(--ck-rim) 55%, white); }
.ck-rim-mid { stop-color: var(--ck-rim); }
.ck-rim-lo { stop-color: color-mix(in srgb, var(--ck-rim) 60%, black); }
.ck-face-hi { stop-color: var(--ck-face-hi); }
.ck-face-mid { stop-color: var(--ck-face-mid); }
.ck-face-lo { stop-color: var(--ck-face-lo); }
.ck-in-0 { stop-color: #000; stop-opacity: 0; }
.ck-in-1 { stop-color: #000; stop-opacity: .16; }
.ck-glare-0 { stop-color: var(--ck-glare); }
.ck-glare-1 { stop-color: var(--ck-glare); stop-opacity: 0; }
.ck-cap-hi { stop-color: color-mix(in srgb, var(--ck-hand) 55%, white); }
.ck-cap-lo { stop-color: var(--ck-hand); }
.ck-noevents { pointer-events: none; }

.ck-tick { stroke: color-mix(in srgb, var(--ck-tick) 55%, transparent); stroke-width: 2; stroke-linecap: round; }
.ck-tick.major { stroke: var(--ck-tick); stroke-width: 5.5; }
.ck-num { font: 600 44px var(--font-display); fill: var(--ck-ink); text-anchor: middle; letter-spacing: -.02em; }
.ck-mlabel { font: 650 19px var(--font-display); fill: var(--ck-ink); opacity: .78; text-anchor: middle; }

/* With minute numbers, they get a tinted band round the edge of the face. */
.ck-band { fill: none; stroke: none; }
.ck.has-labels .ck-band { stroke: var(--ck-band); stroke-width: 32; }
.ck.is-colored.has-labels .ck-band { stroke: color-mix(in srgb, var(--ck-min-c) 10%, transparent); }
.ck-dial .ck-num { transition: fill .2s; }

.ck.is-colored .ck-num { fill: var(--ck-hour-c); }
.ck.is-colored .ck-mlabel { fill: var(--ck-min-c); opacity: 1; }

/* hands */
.ck-hand { transform-box: view-box; transform-origin: 0 0; transition: transform .22s cubic-bezier(.35, 1.9, .55, 1); }
.ck[data-sec="sweep"] .ck-hand { transition: none; }
.ck.is-moving .ck-hand { transition: transform .85s cubic-bezier(.3, .9, .25, 1); }
.ck.is-dragging .ck-hand { transition: none; }
.ck-hand-shape { fill: var(--ck-hand); stroke: var(--ck-hand); stroke-width: 1.5; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.ck.is-colored .ck-hour .ck-hand-shape { fill: var(--ck-hour-c); stroke: var(--ck-hour-c); }
.ck.is-colored .ck-min .ck-hand-shape { fill: var(--ck-min-c); stroke: var(--ck-min-c); }
.ck-sec path, .ck-sec circle { fill: var(--ck-sec); }
.ck-sec .ck-sec-hole { fill: var(--ck-face-hi); }
.ck.is-colored .ck-sec path, .ck.is-colored .ck-sec circle:not(.ck-sec-hole) { fill: #f0a020; }
.ck.no-seconds .ck-sec { display: none; }
.ck-cap-dot { fill: var(--ck-face-hi); opacity: .8; }
.ck-hit { stroke: transparent; stroke-width: 30; stroke-linecap: round; pointer-events: stroke; }
.ck-hour, .ck-min { cursor: grab; }
.ck.is-dragging, .ck.is-dragging .ck-hand { cursor: grabbing; }
.ck[data-mode="set"] .ck-face, .ck[data-mode="set"] .ck-dial { cursor: pointer; }
.ck-hand.is-grabbed .ck-hand-shape { filter: brightness(1.12); }

/* readout */
.ck-read { flex: none; display: flex; flex-direction: column; align-items: center; gap: .3cqmin; max-width: 100%; text-align: center; }
.ck-read[hidden] { display: none; }
.ck-digital {
  font: 600 clamp(18px, 8.5cqmin, 150px)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: .18em;
}
.ck-digital small { font-size: .42em; font-weight: 650; letter-spacing: .04em; color: color-mix(in srgb, var(--stage-ink) 60%, transparent); }
.ck-words {
  font: 500 clamp(13px, 4.6cqmin, 70px)/1.15 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 78%, transparent);
  max-width: 96cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-words::first-letter { text-transform: uppercase; }
.ck.no-digital .ck-digital, .ck.no-words .ck-words { display: none; }
.ck.no-digital .ck-words { font-size: clamp(15px, 6cqmin, 90px); font-weight: 600; color: var(--stage-ink); }
.ck.is-hidden .ck-digital { color: color-mix(in srgb, var(--stage-ink) 35%, transparent); }
.ck-q {
  display: inline-grid; place-items: center; min-width: 2.6em; padding: 0 .3em; border-radius: .25em;
  background: color-mix(in srgb, var(--cat) 14%, var(--stage-bg)); color: var(--cat);
  border: 2px dashed color-mix(in srgb, var(--cat) 45%, transparent);
}
.ck.is-hidden .ck-words { color: var(--cat); font-weight: 600; }
.ck.is-hidden .ck-read { cursor: pointer; }

.ck-hint {
  position: absolute; top: clamp(8px, 2.4cqmin, 24px); left: clamp(8px, 2.4cqmin, 24px); z-index: 3; max-width: 40cqw;
  display: none; padding: .35em .9em; border-radius: 1em; pointer-events: none; line-height: 1.25;
  font-size: clamp(11px, 2.5cqmin, 22px); font-weight: 600;
  background: color-mix(in srgb, var(--cat) 14%, var(--stage-bg)); color: var(--stage-ink);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
}
.ck[data-mode="set"] .ck-hint { display: block; }

/* Small widgets: the clock first. */
@container (max-height: 420px) {
  .ck-words { font-size: clamp(12px, 4cqmin, 40px); }
  .ck-hint { display: none !important; }
}
@container (max-height: 300px) {
  .ck .t-controls { display: none; }
  .ck { padding-bottom: 3cqmin; }
  .ck.no-digital .ck-words, .ck-words { display: none; }
}
@container (max-width: 300px) {
  .ck .t-controls .t-btn span { display: none; }
}