/* Stopwatch.ca — countdown to a date, time since a date, and the holiday countdowns.
   Built on the shared .tool panel (app.css); everything here is scoped to .ct. */

.ct { text-align: center; }
.ct-face { container-type: inline-size; }

/* title, state flag */
.ct-title { margin: 0 0 14px; font: 800 clamp(20px, 3.4vw, 30px)/1.15 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.4px; color: var(--digit); overflow-wrap: anywhere; }
.ct-title:empty { display: none; }
.ct-flag { display: inline-block; margin: 0 0 14px; padding: 5px 13px; border-radius: 999px; background: rgba(255, 91, 31, .16); color: var(--accent2); font: 700 12px/1.3 system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }

/* the cards: days, hours, minutes, seconds — plus years and months when counting up */
.ct-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 14px); max-width: 920px; margin: 0 auto; perspective: 700px; }
.ct-face[data-view="since"] .ct-blocks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ct-face[data-view="to"] .ct-b[data-u="years"], .ct-face[data-view="to"] .ct-b[data-u="months"] { display: none; }
.ct-face[data-view="empty"] .ct-blocks, .ct-face[data-view="today"] .ct-blocks,
.ct-face[data-view="empty"] .ct-totals, .ct-face[data-view="today"] .ct-totals { display: none; }

.ct-b {
  position: relative; overflow: hidden; min-width: 0;
  padding: clamp(12px, 2.4vw, 24px) 2px clamp(9px, 1.7vw, 16px);
  border: 1px solid var(--pline); border-radius: clamp(10px, 1.6vw, 16px);
  background: linear-gradient(180deg, #252d39 0, #1d242e 49.6%, #12171e 50.4%, #0f1319 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 26px -16px rgba(0, 0, 0, .8);
}
/* the seam across the middle of a flip card */
.ct-b::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); pointer-events: none; z-index: 1; }
.ct-n {
  display: block; position: relative; transform-origin: 50% 0;
  font-weight: 700; font-size: clamp(26px, 8vw, 78px); font-size: clamp(26px, 8.4cqw, 78px);
  line-height: 1; letter-spacing: -.03em; color: var(--digit);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.ct-face[data-view="since"] .ct-n { font-size: clamp(22px, 5vw, 64px); font-size: clamp(22px, 5.8cqw, 64px); }
.ct-b[data-u="seconds"] .ct-n { color: var(--accent2); }
/* a long count of days (four or five digits) steps down so it stays inside its card */
.ct-n[data-len="4"] { font-size: clamp(22px, 6.4vw, 62px); font-size: clamp(22px, 6.7cqw, 62px); }
.ct-n[data-len="5"] { font-size: clamp(20px, 5.2vw, 50px); font-size: clamp(20px, 5.4cqw, 50px); }
.ct-n[data-len="6"] { font-size: clamp(18px, 4.4vw, 42px); font-size: clamp(18px, 4.5cqw, 42px); }
.ct-l { display: block; margin-top: clamp(6px, 1vw, 11px); font: 700 clamp(9px, 1.5vw, 12px)/1 system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pmuted); }
.ct-n.flip { animation: ct-flip .3s ease-out; }
@keyframes ct-flip { from { transform: rotateX(-82deg); opacity: .15; } to { transform: none; opacity: 1; } }

/* today, for a holiday */
.ct-today { display: none; margin: 8px 0 2px; font: 800 clamp(34px, 11vw, 84px)/1.05 system-ui, sans-serif; font-size: clamp(34px, 11cqw, 84px); letter-spacing: -.035em; color: var(--accent2); }
.ct-face[data-view="today"] .ct-today { display: block; }

/* the sentence and the target written out */
.ct-line { margin: 18px auto 0; max-width: 62ch; font: 500 clamp(15px, 2.2vw, 19px)/1.5 system-ui, sans-serif; color: var(--digit); overflow-wrap: anywhere; }
.ct-target { margin: 6px 0 0; font-size: 14px; color: var(--pmuted); }
.ct-target:empty { display: none; }

/* the same wait in one unit */
.ct-totals { max-width: 920px; margin: 20px auto 0; padding-top: 14px; border-top: 1px solid var(--pline); }
.ct-totals-h { margin: 0; font: 700 10.5px/1.3 system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pmuted); }
.ct-totals dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; margin: 10px 0 0; background: var(--pline); border: 1px solid var(--pline); border-radius: 12px; overflow: hidden; }
.ct-totals dl > div { display: flex; flex-direction: column-reverse; justify-content: center; background: var(--panel2); padding: 10px 12px; min-width: 0; }
.ct-totals dd { margin: 0; font: 700 clamp(13px, 3.4vw, 19px)/1.2 system-ui, sans-serif; font-size: clamp(13px, 2.3cqw, 19px); font-variant-numeric: tabular-nums; color: var(--digit); white-space: nowrap; }
.ct-totals dt { margin-top: 4px; font: 700 10px/1.3 system-ui, sans-serif; letter-spacing: 1.1px; text-transform: uppercase; color: var(--pmuted); }

/* the setup form — date and time inputs are not covered by the shared .opt rules */
.ct-setup { margin: 18px 0 0; text-align: left; }
.ct .opts { margin-top: 0; }
.ct .opt input[type="date"], .ct .opt input[type="time"] { width: 100%; min-height: 42px; background: var(--panel2); border: 1px solid var(--pline); border-radius: 10px; padding: 9px 10px; color: var(--digit); font: inherit; color-scheme: dark; }
.ct .opt input[readonly] { text-overflow: ellipsis; color: var(--pmuted); }
.ct-share { margin-top: 12px; }
.ct-bar { justify-content: center; }
.ct-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* full screen */
.ct:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; padding: 4vh 4vw; overflow: auto; }
.ct:fullscreen .ct-setup, .ct:fullscreen .ct-bar { display: none; }
.ct:fullscreen .ct-blocks, .ct:fullscreen .ct-totals { max-width: 1500px; }
.ct:fullscreen .ct-line { font-size: clamp(18px, 2.4vw, 32px); max-width: 80ch; }

/* the holiday and generic pages' side column is a long list, so it scrolls with the page */
.side.ct-side { position: static; }

@media (max-width: 560px) {
  .ct-totals dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-totals dl > div:last-child { grid-column: 1 / -1; align-items: center; text-align: center; }
  .ct-face[data-view="since"] .ct-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-face[data-view="since"] .ct-n { font-size: clamp(28px, 11vw, 56px); font-size: clamp(28px, 13cqw, 56px); }
  .ct-n { font-size: clamp(24px, 8.2vw, 48px); font-size: clamp(24px, 9cqw, 48px); }
  .ct-n[data-len="4"] { font-size: clamp(22px, 7vw, 40px); font-size: clamp(22px, 7.4cqw, 40px); }
  .ct-n[data-len="5"] { font-size: clamp(20px, 5.6vw, 34px); font-size: clamp(20px, 6cqw, 34px); }
  .ct-n[data-len="6"] { font-size: clamp(18px, 4.6vw, 28px); font-size: clamp(18px, 5cqw, 28px); }
  .ct-l { letter-spacing: 1px; }
  .ct-title { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ct-n.flip { animation: none; } }