/* ==========================================================================
   opencountdown.no — the countdown's look, shared by the live page
   (/<address>, which loads nothing else) and the preview card in the
   editor, so what the owner designs is exactly what visitors see.
   The live page carries its own fonts, box-sizing and tokens because it
   loads no other stylesheet.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  /* swap, not the family's «optional»: a live page is a display that stays
     open for hours — the digits must end up in Geist even on a slow start */
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Colours. «auto» follows the viewer's light/dark theme; the presets are
   fixed. Mirrored in countdown.js (COLORS) — tests keep them in step.
   -------------------------------------------------------------------------- */

:root {
  --cd-auto-bg: #f4f4f2;
  --cd-auto-ink: #171717;
  --cd-sheet: #ffffff;
  --cd-sheet-ink: #171717;
  --cd-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cd-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --cd-auto-bg: #0e0e0e;
  --cd-auto-ink: #ededed;
  --cd-sheet: #191919;
  --cd-sheet-ink: #ededed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cd-auto-bg: #0e0e0e;
    --cd-auto-ink: #ededed;
    --cd-sheet: #191919;
    --cd-sheet-ink: #ededed;
  }
}

/* --cd-soft: how far small text (labels, the date line) steps back. On the
   colours it stays at 0.85 — the lowest that keeps red, blue and purple at
   WCAG AA (4.5:1) for small text; the monochrome ones can go further. */
[data-color="auto"] { --cd-bg: var(--cd-auto-bg); --cd-ink: var(--cd-auto-ink); --cd-soft: 0.7; }
[data-color="red"] { --cd-bg: #ed6a5e; --cd-ink: #171717; --cd-soft: 0.85; color-scheme: light; }
[data-color="orange"] { --cd-bg: #f2a24b; --cd-ink: #171717; --cd-soft: 0.85; color-scheme: light; }
[data-color="yellow"] { --cd-bg: #f6d54f; --cd-ink: #171717; --cd-soft: 0.85; color-scheme: light; }
[data-color="green"] { --cd-bg: #6fd46b; --cd-ink: #171717; --cd-soft: 0.85; color-scheme: light; }
[data-color="blue"] { --cd-bg: #4c9ef8; --cd-ink: #171717; --cd-soft: 0.85; color-scheme: light; }
[data-color="purple"] { --cd-bg: #c77be2; --cd-ink: #171717; --cd-soft: 0.85; color-scheme: light; }
[data-color="black"] { --cd-bg: #171717; --cd-ink: #fafafa; --cd-soft: 0.7; color-scheme: dark; }

/* --------------------------------------------------------------------------
   The countdown: title, clock, the moment itself, the date line.
   The clock's size is set by the context (--cd-num); everything inside is
   in em off it, so the preview card is the same design at a smaller size.
   -------------------------------------------------------------------------- */

.cd {
  /* A digit's advance in Geist with tabular figures, and the gap between
     units — both in em of the digits. page.css sizes the clock from the
     digits and units on show (--n, --u, set by OC.display) */
  --dw: 0.62;
  --gap: 0.34;
  background: var(--cd-bg);
  color: var(--cd-ink);
  text-align: center;
  font-family: var(--cd-font);
  -webkit-font-smoothing: antialiased;
}

.cd-title {
  margin: 0 auto;
  max-width: 22em;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* The countdown's icon: one emoji above the title, in the system's emoji
   font (never Geist) */
.cd-emoji {
  display: block;
  margin: 0 auto 0.2em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.9em;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.cd-clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--gap) * 1em);
  font-size: var(--cd-num);
  line-height: 1;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.cd-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  /* The digits sit tight; the label keeps its distance */
  line-height: 0.92;
}

.cd-label {
  margin-top: 0.55em;
  font-family: var(--cd-mono);
  font-size: max(10px, 0.12em);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--cd-soft, 0.85);
}

/* Days only: one number, a little heavier */
.cd[data-format="days"] .cd-unit[data-unit="days"] .cd-num { letter-spacing: -0.04em; }

/* The moment is here — or it has passed */
.cd-big {
  margin: 0;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cd[data-state="now"] .cd-big { animation: cd-pop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }

@keyframes cd-pop {
  from { opacity: 0.01; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}

.cd[data-state="past"] .cd-big { opacity: 0.85; }

.cd-when {
  margin: 0;
  font-family: var(--cd-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: var(--cd-soft, 0.85);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   The live page: the countdown IS the page
   -------------------------------------------------------------------------- */

.cd-page *, .cd-page *::before, .cd-page *::after { box-sizing: border-box; }

html:has(> .cd-page) { -webkit-text-size-adjust: 100%; background: var(--cd-bg); }

.cd-page {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cd-bg);
  color: var(--cd-ink);
  font-family: var(--cd-font);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.cd-live {
  --pad: max(20px, 5vw);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4.5vmin, 48px);
  padding: calc(72px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
           24px calc(var(--pad) + env(safe-area-inset-left));
  /* The digits take the width they can get, but never more than a third
     of the height — a wide TV and a tall phone both get a balanced clock */
  --cd-num: min(calc((100vw - 2 * var(--pad)) / (var(--n) * var(--dw) + (var(--u) - 1) * var(--gap))), 30vh);
}

.cd-live[data-format="days"] { --cd-num: min(calc((100vw - 2 * var(--pad)) / (var(--n) * var(--dw) + 0.1)), 42vh); }

.cd-live .cd-title { font-size: clamp(22px, 2.2vw + 2.4vh, 64px); }
.cd-live .cd-big { font-size: clamp(34px, 5vw + 5vh, 132px); max-width: 12em; }
.cd-live .cd-when { font-size: clamp(11px, 0.55vw + 0.8vh, 16px); }

/* Controls: share, full screen, edit (owner). They retreat when nothing
   moves — only the countdown stays */
.cd-controls {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  gap: 8px;
  transition: opacity 0.4s ease;
}

.cd-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  color: var(--cd-ink);
  background: color-mix(in srgb, var(--cd-ink) 9%, transparent);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) { .cd-btn:hover { background: color-mix(in srgb, var(--cd-ink) 16%, transparent); } }
.cd-btn:active { transform: scale(0.94); }

.cd-btn:focus-visible,
.cd-foot a:focus-visible,
.cd-cta:focus-visible,
.cd-sheet button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.cd-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cd-foot {
  padding: 0 20px calc(18px + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--cd-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.cd-foot a {
  color: inherit;
  text-decoration: none;
  opacity: var(--cd-soft, 0.85);
  border-radius: 6px;
}

@media (hover: hover) { .cd-foot a:hover { opacity: 1; } }

.cd-mark { font-weight: 600; }

body.idle .cd-controls,
body.idle .cd-foot { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }

/* In real full screen the page is a display: no footer at all */
.cd-page.fs .cd-foot { display: none; }

/* A missing address / storage down: a plain note in the same look */
.cd-note { gap: 18px; }
.cd-note .cd-title { font-size: clamp(22px, 4vw, 40px); }
.cd-text { margin: 0; max-width: 28em; font-size: 17px; line-height: 1.5; opacity: 0.8; }

.cd-cta {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--cd-ink);
  color: var(--cd-bg);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   «Your countdown is ready» — shown once to the owner after creating it
   -------------------------------------------------------------------------- */

.cd-sheet {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 20px 20px 18px;
  border-radius: 22px;
  background: var(--cd-sheet);
  color: var(--cd-sheet-ink);
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 60px rgba(0, 0, 0, 0.22);
  animation: cd-sheet-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

@keyframes cd-sheet-in {
  from { opacity: 0.01; transform: translate(-50%, 14px); }
}

.cd-sheet-title { margin: 0 36px 4px 0; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.cd-sheet-text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; opacity: 0.75; }

.cd-sheet-link {
  display: block;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cd-sheet-ink) 6%, transparent);
  font-family: var(--cd-mono);
  font-size: 13.5px;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.cd-sheet-btn {
  width: 100%;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--cd-sheet-ink);
  color: var(--cd-sheet);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.cd-sheet-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}

@media (hover: hover) { .cd-sheet-x:hover { opacity: 1; background: color-mix(in srgb, var(--cd-sheet-ink) 7%, transparent); } }
.cd-sheet-x .cd-icon { width: 18px; height: 18px; }

/* «Legg i kalender»: two ways in, under the controls */
.cd-menu {
  position: fixed;
  top: calc(66px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index: 30;
  min-width: 232px;
  padding: 6px;
  border-radius: 16px;
  background: var(--cd-sheet);
  color: var(--cd-sheet-ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 60px rgba(0, 0, 0, 0.22);
  animation: cd-menu-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

@keyframes cd-menu-in {
  from { opacity: 0.01; transform: translateY(-6px); }
}

.cd-menu-item {
  display: block;
  padding: 12px 14px;
  border-radius: 11px;
  font-family: var(--cd-font);
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) { .cd-menu-item:hover { background: color-mix(in srgb, var(--cd-sheet-ink) 7%, transparent); } }
.cd-menu-item:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Toast and confetti
   -------------------------------------------------------------------------- */

.cd-toast {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 16px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--cd-sheet-ink);
  color: var(--cd-sheet);
  font-family: var(--cd-font);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 60px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cd-toast.show { opacity: 1; transform: translate(-50%, 0); }

.cd-confetti {
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  pointer-events: none;
}

.cd-confetti span {
  position: absolute;
  top: -24px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cd *, .cd-sheet { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 600px) {
  .cd-live { padding-top: calc(76px + env(safe-area-inset-top)); }
}