/* ==========================================================================
   opencountdown.no — design system (open-base) + the maker
   The countdown's own look (colours, clock) is page.css, shared with the
   live page; this file is the family chrome and the editor around it.
   Ultra-minimal: light neutral background, white borderless surfaces, pills,
   near-monochrome. Geist for content, Geist Mono for numbers and micro labels.
   The accent color is reserved for alarm/critical states only.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  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: optional;
  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: optional;
  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: optional;
  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;
}

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #e9e9e6;
  --text: #171717;
  --text-2: #666666;
  --text-3: #6f6f6f;
  --border: rgba(0, 0, 0, 0.05);
  --border-strong: rgba(0, 0, 0, 0.1);

  --accent: #d92d20;
  --accent-soft: rgba(217, 45, 32, 0.08);

  --ok: #157f3d;

  --inverse-bg: #171717;
  --inverse-text: #fafafa;

  --ring: rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.1);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --surface: #191919;
  --surface-2: #0e0e0e;
  --surface-3: #262626;
  --text: #ededed;
  --text-2: #a3a3a3;
  --text-3: #9a9a9a;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent: #f4645a;
  --accent-soft: rgba(244, 100, 90, 0.12);

  --ok: #6ccb8b;

  --inverse-bg: #fafafa;
  --inverse-text: #171717;

  --ring: rgba(255, 255, 255, 0.16);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* System dark mode applies unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --surface: #191919;
    --surface-2: #0e0e0e;
    --surface-3: #262626;
    --text: #ededed;
    --text-2: #a3a3a3;
    --text-3: #9a9a9a;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);

    --accent: #f4645a;
    --accent-soft: rgba(244, 100, 90, 0.12);

    --ok: #6ccb8b;

    --inverse-bg: #fafafa;
    --inverse-text: #171717;

    --ring: rgba(255, 255, 255, 0.16);
    --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Numbers and data: mono with tabular digits so nothing jumps */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.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;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--surface-3); }

/* UI chrome must not be text-selectable (iOS long-press etc.).
   Real content/data the user may want to copy stays selectable. */
button, .site-header, .site-footer, .menu, .toast {
  -webkit-user-select: none;
  user-select: none;
}

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

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header { background: transparent; }

.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-tld { color: var(--text-3); font-weight: 500; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) { .icon-btn:hover { background: var(--surface-3); } }
.icon-btn:active { transform: scale(0.94); }

.icon-btn.open { background: var(--inverse-bg); color: var(--inverse-text); }

/* Toggle buttons (on/off states) invert when active */
.toggle-btn.on { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .toggle-btn.on:hover { opacity: 0.85; background: var(--inverse-bg); } }

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, opacity 0.15s ease;
}

.pill-btn:active { transform: scale(0.97); }

.pill-btn.primary { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .pill-btn.primary:hover { opacity: 0.85; } }

.pill-btn.ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

@media (hover: hover) { .pill-btn.ghost:hover { background: var(--surface-2); } }
.pill-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Settings menu
   -------------------------------------------------------------------------- */

.settings-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 296px;
  max-height: min(560px, calc(100dvh - 90px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  padding: 20px;
  z-index: 60;
  transform-origin: top right;
  animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.menu-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Options share the row evenly when they fit; locales with long words
   («Pantalla completa», «Бегущая строка») wrap to their own row rather
   than wrapping inside the button. gap applies both ways, so the spacing
   between wrapped rows equals the spacing within a row */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-grid .opt-btn { flex: 1 1 auto; white-space: nowrap; }

.menu-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background-color: var(--surface-2);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  border: none;
  border-radius: 12px;
  padding: 11px 44px 11px 14px;
  cursor: pointer;
}

.opt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  color: var(--text-2);
  transition: background-color 0.13s ease, color 0.13s ease, transform 0.13s ease;
}

.opt-btn .icon { width: 14px; height: 14px; }

@media (hover: hover) { .opt-btn:hover { background: var(--surface-3); color: var(--text); } }
.opt-btn:active { transform: scale(0.97); }

.opt-btn.active {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-weight: 600;
}

.opt-btn.wide { width: 100%; }
.opt-btn.copied { background: var(--ok); color: #fff; }

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 18px -20px;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease;
  margin: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.switch:checked { background: var(--inverse-bg); }
.switch:checked::after { transform: translateX(17px); background: var(--inverse-text); }

.menu-info {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-3);
}

.menu-info a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .menu-info a:hover { text-decoration: underline; } }

.menu-year { margin-top: 6px; }

/* --------------------------------------------------------------------------
   THE TOOL — the maker: the countdown card, edited in place. The countdown
   itself (.cd, colours, clock) lives in page.css, shared with the live page.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  flex: 1;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 32px;
}

/* Editing a saved countdown: where it lives, and the way back */
.editbar {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 12px;
  padding: 0 6px;
}

.editbar-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.editbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.editbar-link .icon { width: 15px; height: 15px; color: var(--text-3); }
@media (hover: hover) { .editbar-link:hover span { text-decoration: underline; text-underline-offset: 3px; } }

.editbar-new { margin-left: auto; font-size: 14px; }

.maker {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The card: the countdown in its own colours, a live preview. With the
   default colour it is the family's white surface on the neutral page
   (the live page itself takes the page colour) */
.card {
  --cd-auto-bg: var(--surface);
  --cd-auto-ink: var(--text);
  width: 100%;
  max-width: 720px;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3.4vw, 24px);
  padding: clamp(28px, 6vw, 52px) clamp(18px, 5vw, 44px) clamp(24px, 5vw, 38px);
  border-radius: 28px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.card .cd-clock {
  --cd-num: min(calc(100cqi / (var(--n) * var(--dw) + (var(--u) - 1) * var(--gap))), 104px);
}

.card[data-format="days"] .cd-clock { --cd-num: min(calc(100cqi / (var(--n) * var(--dw) + 0.1)), 132px); }
.card .cd-big { font-size: clamp(28px, 8cqi, 56px); }

/* The title is typed straight into the card, like openmessage's message */
.card-title {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: clamp(24px, 5.4cqi, 40px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
  color: inherit;
  caret-color: currentColor;
  background: none;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
}

.card-title::placeholder {
  color: inherit;
  /* 0.45 stays above WCAG 3:1 for large text on every card colour */
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

/* The centred caret must not sit inside the placeholder: it yields on focus */
.card-title:focus::placeholder { opacity: 0; }

/* The icon sits close above the title; the card's gap stays for the rest */
.card-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.card-emoji {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.card-emoji.has-emoji { width: 72px; height: 72px; }
@media (hover: hover) { .card-emoji:hover { background: color-mix(in srgb, var(--cd-ink) 8%, transparent); } }
.card-emoji:active { transform: scale(0.94); }
.card-emoji:focus-visible { outline: 2px solid var(--cd-ink); outline-offset: 2px; }

.card-emoji-glyph {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 46px;
  line-height: 1;
}

.card-emoji-glyph:empty { display: none; }
.card-emoji-add { width: 24px; height: 24px; opacity: 0.45; }
.card-emoji.has-emoji .card-emoji-add { display: none; }

.when {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.when-input {
  height: 44px;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cd-ink) 8%, transparent);
  color: var(--cd-ink);
  font-family: var(--font-mono);
  font-size: 16px; /* ≥ 16px: iOS never zooms into the field */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease;
}

@media (hover: hover) { .when-input:hover { background: color-mix(in srgb, var(--cd-ink) 13%, transparent); } }
.when-input:focus-visible { outline: 2px solid var(--cd-ink); outline-offset: 2px; }
.when-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; }

/* «Hvert år»: a toggle pill beside the date and the time */
.when-toggle {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cd-ink) 8%, transparent);
  color: var(--cd-ink);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.when-toggle .icon { width: 17px; height: 17px; }
@media (hover: hover) { .when-toggle:hover { background: color-mix(in srgb, var(--cd-ink) 13%, transparent); } }
.when-toggle:active { transform: scale(0.97); }
.when-toggle:focus-visible { outline: 2px solid var(--cd-ink); outline-offset: 2px; }
.when-toggle[aria-pressed="true"] { background: var(--cd-ink); color: var(--cd-bg); }

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

/* The address */
.field {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 18px 0 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--ring);
}

.field-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px; /* ≥ 16px: iOS never zooms into the field */
}

.field-input:focus-visible { outline: none; }
.field-input::placeholder { color: var(--text-3); opacity: 0.8; }

.slug-field { width: 100%; max-width: 480px; margin-top: 22px; }

.slug-prefix {
  font-size: 16px;
  color: var(--text-3);
  white-space: nowrap;
}

.slug-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  flex-shrink: 0;
}

.slug-state .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.slug-state.ok { color: var(--ok); }
.slug-state.bad { color: var(--accent); }

.field-hint {
  margin: 8px 14px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
}

.field-hint:empty { display: none; }
.field-hint.ok { color: var(--ok); }
.field-hint.error { color: var(--accent); }
.field-hint .link-btn { font-weight: 600; color: inherit; text-decoration-color: currentColor; }

.submit-btn { min-width: 220px; height: 52px; margin-top: 16px; font-size: 16px; }
.pill-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.pill-btn[aria-disabled="true"] { opacity: 0.4; }

.login-line {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text-2);
  text-align: center;
}

.link-btn {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

@media (hover: hover) { .link-btn:hover { text-decoration-color: currentColor; } }

.remove-btn { margin-top: 12px; }

.pill-btn.danger { background: var(--accent); color: #fff; }
@media (hover: hover) { .pill-btn.danger:hover { opacity: 0.88; } }

.pill-btn.danger-ghost {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--accent);
  background: transparent;
}

.pill-btn.danger-ghost.armed { background: var(--accent-soft); }
@media (hover: hover) { .pill-btn.danger-ghost:hover { background: var(--accent-soft); } }

/* --------------------------------------------------------------------------
   Your countdowns and the examples
   -------------------------------------------------------------------------- */

.list-section { width: 100%; max-width: 720px; margin-top: 48px; }

.section-label {
  margin: 0 0 12px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section-hint {
  margin: -4px 0 14px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.mine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mine-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  border-radius: 18px;
  background: var(--surface);
}

.mine-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px 12px 18px;
  border-radius: 18px;
  text-decoration: none;
}

.mine-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cd-bg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.mine-dot[data-color="auto"] { --cd-auto-bg: var(--bg); }

.mine-dot.has-emoji {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -6px -4px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 18px;
  line-height: 1;
}

.mine-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.mine-title {
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mine-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mine-left { color: var(--text-2); }

@media (hover: hover) { .mine-link:hover .mine-title { text-decoration: underline; text-underline-offset: 3px; } }

.mine-edit { flex-shrink: 0; background: transparent; }
@media (hover: hover) { .mine-edit:hover { background: var(--surface-2); } }
.mine-edit .icon { width: 18px; height: 18px; }

.ex-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ex-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 10;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--cd-bg);
  color: var(--cd-ink);
  text-decoration: none;
  transition: transform 0.15s ease;
}

@media (hover: hover) { .ex-tile:hover { transform: translateY(-2px); } }
.ex-tile:active { transform: scale(0.98); }
.ex-tile[data-color="black"] { box-shadow: inset 0 0 0 1px var(--border-strong); }

.ex-title { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }

.ex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.ex-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 22px;
  line-height: 1;
}

.ex-left { display: flex; align-items: baseline; gap: 7px; min-height: 30px; }

.ex-num {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ex-unit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: var(--cd-soft, 0.85);
}

.ex-left.is-now .ex-unit { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   Settings menu: the countdown's look and the account
   -------------------------------------------------------------------------- */

.swatches {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 1px;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sw-bg);
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}

@media (hover: hover) { .swatch:hover { transform: scale(1.15); } }
.swatch:active { transform: scale(0.95); }

.swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }

/* Default: an empty circle, like «no label» in Finder — follows the theme */
.swatch-auto { background: transparent; border: 1.5px solid var(--text-3); }

/* Black must not vanish into the dark menu */
.swatch-black { box-shadow: inset 0 0 0 1px var(--border-strong); }
.swatch-black.active { box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }

.menu-text {
  margin: -2px 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}

.menu-account {
  margin: -2px 0 12px;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.menu-danger { margin-top: 8px; color: var(--accent); }
@media (hover: hover) { .menu-danger:hover { background: var(--accent-soft); color: var(--accent); } }

/* --------------------------------------------------------------------------
   Sheets: account forms (from openlink)
   -------------------------------------------------------------------------- */

dialog.sheet {
  width: min(420px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  overflow: auto;
}

dialog.sheet[open] { animation: sheet-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }
dialog.sheet::backdrop { background: rgba(10, 10, 10, 0.42); }

@keyframes sheet-in {
  from { opacity: 0.01; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.sheet-text {
  margin: -6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.sheet-field { display: flex; flex-direction: column; }

.text-input {
  height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.text-input:focus-visible {
  outline: none;
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--ring);
}

.sheet-form .field-hint { margin: -8px 2px 0; text-align: left; }

.sheet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.sheet-spacer { flex: 1; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: -4px -6px 0;
}

.emoji-opt {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  line-height: 1;
  transition: background-color 0.13s ease, transform 0.13s ease;
}

@media (hover: hover) { .emoji-opt:hover { background: var(--surface-2); transform: scale(1.12); } }
.emoji-opt:active { transform: scale(0.94); }
.emoji-opt.active { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--text); }

.emoji-input {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-sans);
  font-size: 22px;
  text-align: center;
}

.recovery-link {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.menu-recovery { margin-top: 8px; }

.sheet-switch {
  margin: -2px 0 0;
  font-size: 14px;
  color: var(--text-2);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  inset: auto; /* resets popover UA styling (inset: 0) */
  margin: 0;
  border: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; } }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .menu { width: min(296px, calc(100vw - 32px)); }
  .card { border-radius: 22px; }
  .slug-prefix { font-size: 15px; }
  .list-section { margin-top: 40px; }
  .ex-grid { grid-template-columns: repeat(2, 1fr); }
  /* Top-anchored on phones: the on-screen keyboard covers the bottom half,
     and iOS does not scroll a top-layer dialog out from under it */
  dialog.sheet { margin: calc(12px + env(safe-area-inset-top)) auto auto; }
}

/* Small phones (320–380 px): the date and time stay on one row, and the
   address keeps room to be read */
@media (max-width: 380px) {
  .when-input { padding: 0 12px; }
  .when-toggle { padding: 0 13px 0 11px; }
  .slug-field { padding: 0 14px 0 16px; }
  .slug-prefix { font-size: 14px; letter-spacing: -0.01em; }
}