/* Designed by Kapil Pidhwani: Minimal, self-contained stylesheet for /widgets/<slug>/embed/ pages.
 * No frameworks. One container query scale drives every size, so a widget fits a 300×120 Notion column and a
 * full-width banner alike. Tiles size to their content (em units), so "1176" days fits as well as "09".
 */

:root {
  --bg: #FFFFFF;
  --surface: #F7F7F5;
  --surface-edge: #E8E8E6;
  --fg: #17191C;
  --muted: #62666B;
  --accent: #F4511E;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --scale: 1;
}

[data-theme="dark"] {
  --bg: #0D0D0D;
  --surface: #181818;
  --surface-edge: #292B2E;
  --fg: #F5F5F2;
  --muted: #A5A7AA;
  --accent: #FF6A2A;
}

[data-bg="transparent"] { --bg: transparent; }

[data-size="sm"] { --scale: 0.82; }
[data-size="md"] { --scale: 1; }
[data-size="lg"] { --scale: 1.18; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ── Stage: the only container; everything below sizes from --unit ── */
.w-stage {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 3cqmin, 20px);
  container-type: size;
  text-align: center;
}

[data-align="left"] .w-stage { justify-content: flex-start; text-align: left; }

.w-card-wrap {
  /* Digit size: scales with the smaller of width/height so neither axis overflows */
  --unit: calc(clamp(1.25rem, min(9cqw, 34cqh), 4.2rem) * var(--scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 0.22);
  max-width: 100%;
}

[data-align="left"] .w-card-wrap { align-items: flex-start; }

.w-title {
  font-size: calc(var(--unit) * 0.3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-sub {
  font-size: calc(var(--unit) * 0.28);
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* ── Units row ── */
.w-units {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--unit) * 0.18);
  max-width: 100%;
}

.w-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 0.14);
  min-width: 0;
}

.w-flip-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--unit);
  min-width: 1.7em;        /* two digits; wider values grow the tile */
  height: 1.55em;
  padding: 0 0.28em;
  background: var(--surface);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* split-flap crease */
.w-flip-tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--surface-edge);
  pointer-events: none;
}

.w-digit {
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

@keyframes wFlip {
  from { transform: perspective(360px) rotateX(-18deg); opacity: 0.7; }
  to   { transform: none; opacity: 1; }
}
.w-flip-tile.is-tick .w-digit { animation: wFlip 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .w-flip-tile.is-tick .w-digit { animation: none; } }

.w-sep {
  font-size: var(--unit);
  line-height: 1.55;      /* matches tile height so the colon sits on the digit midline */
  font-weight: 700;
  color: var(--accent);
  opacity: 0.85;
  user-select: none;
}

.w-unit-label {
  font-size: calc(var(--unit) * 0.22);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* AM/PM: a small unit after the time, never on top of it */
.w-meridiem {
  align-self: flex-start;
  font-size: calc(var(--unit) * 0.3);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  line-height: 1;
  padding-top: calc(var(--unit) * 0.18);
}

/* ── Minimal: same layout, no surfaces ── */
[data-variant="minimal"] .w-flip-tile {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  height: 1.15em;
  min-width: 1.3em;
  padding: 0 0.1em;
}
[data-variant="minimal"] .w-flip-tile::after { display: none; }
[data-variant="minimal"] .w-sep { line-height: 1.15; }
[data-variant="minimal"] .w-meridiem { padding-top: 0; }

/* ── Compact: one quiet row  "1176 d · 19 h · 09 m · 30 s" ── */
[data-variant="compact"] .w-units { align-items: baseline; gap: calc(var(--unit) * 0.3); }
[data-variant="compact"] .w-unit { flex-direction: row; align-items: baseline; gap: 0.15em; }
[data-variant="compact"] .w-flip-tile {
  font-size: calc(var(--unit) * 0.7);
  background: transparent;
  border: none;
  box-shadow: none;
  height: auto;
  min-width: 0;
  padding: 0;
}
[data-variant="compact"] .w-flip-tile::after { display: none; }
[data-variant="compact"] .w-unit-label { font-size: calc(var(--unit) * 0.26); text-transform: lowercase; letter-spacing: 0; }
[data-variant="compact"] .w-sep { display: none; }
[data-variant="compact"] .w-meridiem { align-self: baseline; padding-top: 0; }

.w-done-msg {
  font-size: calc(var(--unit) * 0.6);
  font-weight: 700;
  color: var(--accent);
}

/* ── Credit: plain in-flow text, never overlaps the widget ── */
.w-credit {
  font-size: calc(clamp(0.6rem, var(--unit) * 0.22, 0.75rem));
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.w-credit:hover, .w-credit:focus-visible { opacity: 1; color: var(--accent); outline: none; }

/* ── Sunrise & Sunset: arc + two stats + quiet lines ── */
.w-sun { --unit: calc(clamp(1rem, min(8cqw, 19cqh), 3.4rem) * var(--scale)); }
[data-variant="compact"] .w-sun { --unit: calc(clamp(1.1rem, min(9cqw, 30cqh), 3.6rem) * var(--scale)); }
.w-sun-arc { width: calc(var(--unit) * 4.8); max-width: 100%; height: auto; overflow: visible; }
.w-sun-horizon { stroke: var(--surface-edge); stroke-width: 1.5; }
.w-sun-track { fill: none; stroke: var(--surface-edge); stroke-width: 2; stroke-dasharray: 2 3; }
.w-sun-fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.w-sun-dot { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.w-sun-dot.is-night { fill: var(--muted); filter: none; opacity: 0.55; }
.w-sun-row { display: flex; gap: calc(var(--unit) * 0.9); justify-content: center; max-width: 100%; }
[data-align="left"] .w-sun-row, [data-align="left"] .w-sun-line { justify-content: flex-start; }
.w-stat { display: flex; flex-direction: column; align-items: center; gap: calc(var(--unit) * 0.06); min-width: 0; }
[data-align="left"] .w-stat { align-items: flex-start; }
.w-stat-label { font-size: calc(var(--unit) * 0.24); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.w-stat-val { font-size: calc(var(--unit) * 0.62); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-sun-line { display: flex; align-items: baseline; gap: calc(var(--unit) * 0.35); justify-content: center; flex-wrap: wrap; }
.w-sun-line .w-stat { flex-direction: row; align-items: baseline; gap: 0.25em; }
.w-sun-line .w-stat-label { font-size: calc(var(--unit) * 0.4); color: var(--accent); letter-spacing: 0; }
.w-sun-line .w-stat-val { font-size: calc(var(--unit) * 0.5); }
.w-sun-lines { display: flex; flex-direction: column; gap: calc(var(--unit) * 0.04); max-width: 100%; }

/* ── Timer: tiles + in-widget controls (real buttons, 44px on touch) ── */
.w-timer.has-controls { --unit: calc(clamp(1.1rem, min(9cqw, 24cqh), 4rem) * var(--scale)); }
.w-controls { display: flex; gap: calc(var(--unit) * 0.18); flex-wrap: wrap; justify-content: center; }
[data-align="left"] .w-controls { justify-content: flex-start; }
.w-btn {
  font: inherit;
  font-size: max(12px, calc(var(--unit) * 0.28));
  font-weight: 600;
  min-height: 30px;
  padding: 0.3em 0.95em;
  border-radius: calc(var(--radius) * 0.75);
  border: 1px solid var(--surface-edge);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.w-btn:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.w-btn:hover:not(:disabled) { border-color: var(--accent); }
.w-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.w-btn:disabled { opacity: 0.45; cursor: default; }
@media (pointer: coarse) { .w-btn { min-height: 44px; } }
.w-laps { display: flex; gap: 0.8em; flex-wrap: wrap; justify-content: center; font-size: calc(var(--unit) * 0.24); color: var(--muted); font-variant-numeric: tabular-nums; }
.w-laps:empty { display: none; }
.w-cs { font-variant-numeric: tabular-nums; }
.w-timer[data-phase="break"] .w-sub, .w-timer[data-phase="long"] .w-sub { color: var(--accent); font-weight: 600; }