/* Classroom Timer. Sizes in container units: the stage is a size container. */

.tm {
  --tm-color: var(--cat);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2cqmin; padding: 4cqmin 4cqmin calc(10cqmin + 44px);
}
.tm[data-tone="warn"] { --tm-color: #e39a05; }
.tm[data-tone="danger"], .tm[data-tone="done"] { --tm-color: #e03131; }

.tm-title {
  font: 600 clamp(16px, 6.5cqmin, 90px)/1.1 var(--font-display);
  text-align: center; max-width: 92%; overflow-wrap: anywhere;
}

.tm-face { position: relative; width: min(68cqw, 56cqh); aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.tm-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tm-ring-bg { fill: none; stroke: color-mix(in srgb, var(--stage-ink) 9%, transparent); stroke-width: 10; }
.tm-ring-fg {
  fill: none; stroke: var(--tm-color); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 1000; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  transition: stroke .4s;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--tm-color) 40%, transparent));
}
.tm-pie-bg { fill: color-mix(in srgb, var(--stage-ink) 5%, var(--stage-bg)); stroke: color-mix(in srgb, var(--stage-ink) 15%, transparent); stroke-width: 1.5; }
.tm-pie { fill: var(--tm-color); transition: fill .4s; }
.tm-pie-hub { fill: var(--stage-bg); stroke: color-mix(in srgb, var(--stage-ink) 30%, transparent); stroke-width: 2; }
.tm-ticks line { stroke: color-mix(in srgb, var(--stage-ink) 35%, transparent); stroke-width: 1; }
.tm-ticks line.major { stroke-width: 2.4; stroke: color-mix(in srgb, var(--stage-ink) 60%, transparent); }

.tm .tm-pie, .tm .tm-pie-bg, .tm .tm-pie-hub, .tm .tm-ticks { display: none; }
.tm[data-style="pie"] .tm-pie, .tm[data-style="pie"] .tm-pie-bg, .tm[data-style="pie"] .tm-pie-hub, .tm[data-style="pie"] .tm-ticks { display: inline; }
.tm[data-style="pie"] .tm-ring-bg, .tm[data-style="pie"] .tm-ring-fg { display: none; }

.tm-readout { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .6cqmin; }
.tm-digits {
  border: 0; background: none; color: inherit; padding: 0 .1em; border-radius: 14px; cursor: pointer;
  font: 600 clamp(28px, 15cqmin, 360px)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.tm-digits.is-long { font-size: clamp(24px, 11cqmin, 280px); }
.tm-digits:hover { background: color-mix(in srgb, var(--stage-ink) 6%, transparent); }
.tm.is-running .tm-digits { cursor: default; }
.tm.is-running .tm-digits:hover { background: none; }
.tm[data-tone="warn"] .tm-digits, .tm[data-tone="danger"] .tm-digits { color: var(--tm-color); }
.tm-sub { min-height: 1.2em; font: 600 clamp(12px, 3.6cqmin, 44px)/1.2 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 55%, transparent); text-transform: uppercase; letter-spacing: .06em; }

/* Pie: the readout sits on a pill under the dial, like a desk timer's label. */
.tm[data-style="pie"] .tm-readout { position: absolute; left: 50%; bottom: -7%; transform: translateX(-50%); padding: .3cqmin 2.4cqmin; border-radius: 999px; background: var(--stage-bg); box-shadow: var(--shadow); }
.tm[data-style="pie"] .tm-digits { font-size: clamp(18px, 7cqmin, 140px); }
.tm[data-style="pie"] .tm-sub { display: none; }

/* Bar and digits: no dial; the numbers are the show. */
.tm[data-style="bar"] .tm-ring, .tm[data-style="digits"] .tm-ring { display: none; }
.tm[data-style="bar"] .tm-face, .tm[data-style="digits"] .tm-face { aspect-ratio: auto; width: auto; }
.tm[data-style="bar"] .tm-digits { font-size: clamp(32px, 24cqmin, 520px); }
.tm[data-style="digits"] .tm-digits { font-size: clamp(36px, 30cqmin, 640px); }
.tm-bar { display: none; width: 78cqw; height: clamp(8px, 3.4cqmin, 40px); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--stage-ink) 9%, transparent); }
.tm[data-style="bar"] .tm-bar { display: block; }
.tm-bar-fill { height: 100%; width: 100%; background: var(--tm-color); transform-origin: left center; border-radius: inherit; transition: background .4s; }

.tm-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqmin; max-width: 94%; }
.tm-preset { cursor: pointer; transition: background .15s; }
.tm-preset:hover { background: color-mix(in srgb, var(--cat) 24%, var(--stage-bg)); }
.tm-preset.is-on { background: var(--cat); color: #fff; border-color: transparent; }
.tm.is-running .tm-presets { visibility: hidden; }
@container (max-height: 420px) { .tm-presets { display: none; } }
@container (max-height: 300px) { .tm-title { display: none; } .tm { padding-top: 2cqmin; } }

.tm.is-flash .tm-digits { animation: t-flash 1s ease-in-out infinite; }
.tm.is-flash::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 45%, rgba(224, 49, 49, .2), transparent 65%);
  animation: tm-pulse 1.2s ease-in-out infinite;
}
@keyframes tm-pulse { 50% { opacity: .2; } }

.tm-edit { display: flex; align-items: center; gap: 1.2cqmin; }
.tm-edit label { display: flex; align-items: baseline; gap: .15em; font: 600 clamp(14px, 4cqmin, 48px)/1 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 60%, transparent); }
.tm-edit-in {
  width: 2.3em; padding: .08em .05em; text-align: center; border-radius: 14px;
  font: 600 clamp(24px, 10cqmin, 180px)/1 var(--font-display); font-variant-numeric: tabular-nums;
  border: 2px solid var(--line); background: var(--field); color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.tm-edit-in::-webkit-outer-spin-button, .tm-edit-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tm-edit-in:focus { outline: none; border-color: var(--cat); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 25%, transparent); }
.tm-edit-ok { min-width: 0 !important; }