/* ============================================================
   OpenDeck — "Zen / Paper" design system
   Ultra-minimal monochrome. Hierarchy from type + space, never
   decoration. Light / Dark / Auto. Bundled fonts (no CDN), so
   the app is fully self-contained and works offline.
   ============================================================ */

/* ---- Bundled fonts (latin variable subsets, vendored in www/fonts) ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-italic-latin.woff2") format("woff2");
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms; --dur: 280ms; --dur-slow: 460ms;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Deck-grid column min-width — set by Settings → Appearance → Card size.
   'medium' is the default and leaves the attribute off (falls back to 180px). */
:root[data-cardsize="small"] { --card-min: 140px; }
:root[data-cardsize="large"] { --card-min: 240px; }

/* ---- Light (paper): default + Auto fallback ---- */
:root,
:root[data-theme="light"] {
  --bg:            #FAFAF8;
  --surface:       #FFFFFF;
  --surface-sunk:  #F2F2EE;
  --separator:     rgba(26, 26, 26, 0.10);
  --hairline:      rgba(26, 26, 26, 0.08);
  --text:          #1A1A1A;
  --text-secondary:#6E6E68;
  --text-faint:    #B4B4AE;
  --accent:        #1A1A1A;       /* monochrome: ink is the "accent" */
  --destructive:   #9B3A33;       /* one restrained, muted red */
  --focus-ring:    rgba(26, 26, 26, 0.40);
  --press:         rgba(26, 26, 26, 0.05);
  --thumb-a:       #ECECE6;
  --thumb-b:       #E2E2DA;
  --thumb-ink:     rgba(26, 26, 26, 0.16);
  --scrim:         rgba(250, 250, 248, 0.72);
  --sheet-scrim:   rgba(0, 0, 0, 0.28);
}

/* ---- Dark ---- */
:root[data-theme="dark"] {
  --bg:            #0A0A0A;
  --surface:       #141414;
  --surface-sunk:  #1C1C1C;
  --separator:     rgba(245, 245, 240, 0.12);
  --hairline:      rgba(245, 245, 240, 0.08);
  --text:          #F4F4EF;
  --text-secondary:#9A9A92;
  --text-faint:    #555550;
  --accent:        #F4F4EF;
  --destructive:   #C76B62;
  --focus-ring:    rgba(244, 244, 239, 0.45);
  --press:         rgba(245, 245, 240, 0.06);
  --thumb-a:       #1E1E1E;
  --thumb-b:       #161616;
  --thumb-ink:     rgba(245, 245, 240, 0.14);
  --scrim:         rgba(10, 10, 10, 0.74);
  --sheet-scrim:   rgba(0, 0, 0, 0.55);
}

/* ---- Auto: follow system when no explicit data-theme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:            #0A0A0A;
    --surface:       #141414;
    --surface-sunk:  #1C1C1C;
    --separator:     rgba(245, 245, 240, 0.12);
    --hairline:      rgba(245, 245, 240, 0.08);
    --text:          #F4F4EF;
    --text-secondary:#9A9A92;
    --text-faint:    #555550;
    --accent:        #F4F4EF;
    --destructive:   #C76B62;
    --focus-ring:    rgba(244, 244, 239, 0.45);
    --press:         rgba(245, 245, 240, 0.06);
    --thumb-a:       #1E1E1E;
    --thumb-b:       #161616;
    --thumb-ink:     rgba(245, 245, 240, 0.14);
    --scrim:         rgba(10, 10, 10, 0.74);
    --sheet-scrim:   rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

button, label.icon-btn, .empty__action {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--separator); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-sunk);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

.icon    { width: 1.25rem; height: 1.25rem; display: block; }
.icon-sm { width: 1.05rem; height: 1.05rem; display: block; }

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

/* ============================================================
   APP SHELL — navbar
   ============================================================ */
.app { min-height: 100dvh; }

.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding:
    calc(var(--sat) + var(--space-4))
    calc(var(--sar) + var(--space-5))
    var(--space-4)
    calc(var(--sal) + var(--space-5));
  background: var(--scrim);
  backdrop-filter: saturate(120%) blur(18px);
  -webkit-backdrop-filter: saturate(120%) blur(18px);
}

.navbar__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  letter-spacing: -0.01em;
  line-height: 1;
}

.navbar__actions { display: flex; align-items: center; gap: var(--space-2); }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--text); }
.icon-btn:active { background: var(--press); transform: scale(0.94); }

/* ============================================================
   LIBRARY GRID
   ============================================================ */
.library {
  max-width: 1100px;
  margin: 0 auto;
  padding:
    var(--space-5)
    calc(var(--sar) + var(--space-5))
    calc(var(--sab) + var(--space-9))
    calc(var(--sal) + var(--space-5));
}

/* Sort toolbar (shown once there are ≥2 decks) */
.library__bar {
  display: flex;
  margin: 0 var(--space-1) var(--space-6);
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 180px), 1fr));
  gap: var(--space-7) var(--space-6);
}

/* Empty note (e.g. Favorites filter with no favorites yet) */
.deck-empty-note {
  margin: 0;
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Date-grouped sections (Recent mode, past a threshold) */
.deck-section + .deck-section { margin-top: var(--space-7); }
.deck-section__label {
  position: sticky;
  top: var(--navbar-h, 0px);
  z-index: 4;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-1) var(--space-2);
  background: var(--bg);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- Deck card (barely-there) ---- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card.is-removing { opacity: 0; transform: scale(0.96); pointer-events: none; }

.card__open {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border-radius: var(--radius-md);
}
.card:active .thumb { transform: scale(0.975); }

.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, var(--thumb-a), var(--thumb-b));
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease);
}
.card:hover .thumb { border-color: var(--separator); }

.thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__glyph {
  font-family: var(--font-serif);
  color: var(--thumb-ink);
  font-size: 2.4rem;
  line-height: 1;
  user-select: none;
}

.card__label { padding: var(--space-3) var(--space-1) 0; }
.card__title {
  margin: 0 0 0.15rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text);
  /* Cap at two lines so a long title can't push the grid row taller. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card__sub {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  /* Version · author on a single line; ellipsis a long author. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single always-visible top-right control: the favorite indicator AND the
   actions menu in one button. Favorited → shows the star; otherwise → •••.
   The icon is purely a state marker — tapping it always opens the actions
   sheet (where you favorite/unfavorite/delete). */
.card__menu {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--separator);
  transition: background var(--dur-fast) var(--ease);
}
.card__menu:hover { background: var(--surface-sunk); }

/* Stack both icons in the same grid cell; show one based on favorite state. */
.card__menu .icon-sm { grid-area: 1 / 1; }
.card__menu .card__icon-star { display: none; width: 0.85rem; height: 0.85rem; }
.card__menu .card__icon-more { display: block; }
.card__menu.is-fav .card__icon-star { display: block; }
.card__menu.is-fav .card__icon-more { display: none; }

/* ---- Empty state ---- */
.empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  min-height: 56dvh;
  padding: var(--space-9) var(--space-5);
  color: var(--text-secondary);
}
.empty.is-shown { display: flex; }
.empty__mark { color: var(--text-faint); margin-bottom: var(--space-2); }
.empty__mark .icon { width: 2.5rem; height: 2.5rem; }
.empty__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--text);
}
.empty__body { max-width: 26rem; margin: 0; font-size: 0.95rem; }
.empty__action {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  border: 1px solid var(--separator);
  color: var(--text);
  font-size: 0.9rem;
  transition: background var(--dur-fast) var(--ease);
}
.empty__action:hover { background: var(--press); }

/* ============================================================
   OVERLAYS (player, settings)
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* ---- Player ---- */
.player { --bar-h: 3rem; }

.player__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: calc(var(--sat) + var(--bar-h));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding:
    var(--sat)
    calc(var(--sar) + var(--space-3))
    0
    calc(var(--sal) + var(--space-3));
  background: var(--scrim);
  backdrop-filter: saturate(120%) blur(18px);
  -webkit-backdrop-filter: saturate(120%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;          /* ≥44pt / 48dp touch target */
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.95rem;
  transition: color var(--dur-fast) var(--ease);
}
.back-btn:hover { color: var(--text); }
.back-btn__label { line-height: 1; }

.player__title {
  flex: 1;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-2);
}

/* Stage: always sits below the always-visible bar. It never resizes, so deck
   layouts never reflow or clip. */
.player-stage {
  position: absolute;
  top: calc(var(--sat) + var(--bar-h));
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
}
.player-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* ============================================================
   SETTINGS — grouped inset list
   ============================================================ */
.settings__scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.settings__bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding:
    calc(var(--sat) + var(--space-2))
    calc(var(--sar) + var(--space-3))
    var(--space-2)
    calc(var(--sal) + var(--space-3));
  background: var(--scrim);
  backdrop-filter: saturate(120%) blur(18px);
  -webkit-backdrop-filter: saturate(120%) blur(18px);
}

.settings__inner {
  max-width: 640px;
  margin: 0 auto;
  padding:
    var(--space-3)
    calc(var(--sar) + var(--space-5))
    calc(var(--sab) + var(--space-9))
    calc(var(--sal) + var(--space-5));
}
.settings__h1 {
  margin: var(--space-4) 0 var(--space-7);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem);
  letter-spacing: -0.01em;
}

.group { margin-bottom: var(--space-7); }
.group__label {
  margin: 0 0 var(--space-3) var(--space-1);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.list {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-5);
}
.row + .row { border-top: 1px solid var(--hairline); }
.row__label { font-size: 0.95rem; color: var(--text); }
.row__value { font-size: 0.95rem; color: var(--text-secondary); }
.row__note {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Segmented control */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-sunk);
  border-radius: 999px;
}
.segmented button {
  min-height: 2rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.segmented button[aria-checked="true"] {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-weight: 500;
}

/* ============================================================
   SHEET (in-app confirm) + TOAST — never browser confirm()/alert()
   ============================================================ */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--sheet-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 61;
  max-width: 480px;
  margin: 0 auto;
  padding:
    var(--space-5)
    calc(var(--sar) + var(--space-5))
    calc(var(--sab) + var(--space-5))
    calc(var(--sal) + var(--space-5));
  background: var(--surface);
  border-top: 1px solid var(--separator);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out);
}
.sheet.is-open { transform: translateY(0); visibility: visible; }
.sheet__grip {
  width: 2.25rem; height: 4px;
  margin: 0 auto var(--space-5);
  border-radius: 2px;
  background: var(--separator);
}
.sheet__title {
  margin: 0 0 var(--space-2);
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
}
.sheet__body {
  max-width: 30ch;
  margin: 0 auto var(--space-6);
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.sheet__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.btn {
  min-height: 2.75rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn--destructive { color: #fff; background: var(--destructive); }
.btn--destructive:hover { opacity: 0.9; }
.btn--quiet { color: var(--text); background: var(--surface-sunk); }
.btn--quiet:hover { background: var(--separator); }
.btn--danger-text { color: var(--destructive); background: var(--surface-sunk); }
.btn--danger-text:hover { background: var(--separator); }

/* Action-sheet rows: icon + label, left-aligned */
.btn--leading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  text-align: left;
}
.btn__icon { display: inline-grid; place-items: center; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab) + var(--space-7));
  transform: translate(-50%, 1.5rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast__icon { display: inline-grid; place-items: center; }

/* ============================================================
   ACCESSIBILITY — honor system settings (2026 HIG emphasis)
   ============================================================ */

/* Reduce Transparency: swap translucent glass bars for solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  .navbar, .player__bar, .settings__bar {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Increase Contrast: thicken hairlines, darken/lighten secondary text */
@media (prefers-contrast: more) {
  :root, :root[data-theme="light"] {
    --separator: rgba(26, 26, 26, 0.28);
    --hairline: rgba(26, 26, 26, 0.20);
    --text-secondary: #4A4A44;
    --focus-ring: #1A1A1A;
  }
  :root[data-theme="dark"] {
    --separator: rgba(245, 245, 240, 0.30);
    --hairline: rgba(245, 245, 240, 0.20);
    --text-secondary: #C4C4BC;
    --focus-ring: #F4F4EF;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --separator: rgba(245, 245, 240, 0.30);
      --hairline: rgba(245, 245, 240, 0.20);
      --text-secondary: #C4C4BC;
      --focus-ring: #F4F4EF;
    }
  }
}

/* Reduce Motion: collapse transitions/animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}