/*
 * Daily Pixels — Midnight Archive
 *
 * Tokens are lifted verbatim from the UI kit (§24). Two rules from the manual
 * are worth restating because they are easy to break by accident: the dark
 * surfaces are blue and indigo, never black or brown; and empty space in the
 * album has to read as calm rather than as an unfinished form.
 */

/* --------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* -------------------------------------------------------------- tokens */

:root {
  --color-bg-primary: #101a33;
  --color-bg-secondary: #162442;
  --color-surface: #203252;
  --color-surface-raised: #2d3f66;
  --color-surface-soft: #7185a8;

  --color-paper: #f0ecdf;
  --color-paper-stock: #dfe3e9;

  --color-text-primary: #f7f8fb;
  --color-text-secondary: #c7d0df;
  --color-text-muted: #91a0b7;
  --color-text-on-paper: #263247;
  --color-text-disabled: #69758b;

  --color-border: rgba(175, 197, 224, 0.22);
  --color-border-active: #718fc0;
  --color-focus: #77a3d9;

  --color-accent-primary: #4478b8;
  --color-accent-primary-pressed: #365f96;
  --color-accent-active: #7868c9;
  --color-accent-violet: #9a76d4;
  --color-accent-cyan: #48b7d4;
  --color-accent-coral: #e77e79;
  --color-accent-apricot: #f0a06f;
  --color-accent-rose: #dfa4b8;
  --color-accent-botanical: #526f72;

  --color-success: #6fa58e;
  --color-warning: #d6a55b;
  --color-error: #c95e68;
  --color-information: #5c91c9;
  --color-disabled: #536078;

  --radius-small: 8px;
  --radius-medium: 14px;
  --radius-large: 18px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --radius-canvas: 6px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-small: 0 2px 6px rgba(4, 10, 28, 0.18);
  --shadow-medium: 0 8px 24px rgba(4, 10, 28, 0.24);

  --motion-fast: 180ms;
  --motion-standard: 280ms;
  --motion-slow: 500ms;
  --ease: cubic-bezier(0.32, 0.72, 0.29, 1);

  --page-gutter: 20px;
  --appbar-height: 60px;
  --nav-height: 66px;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------------------------------------------------------------- reset */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

a { color: var(--color-accent-cyan); }

svg { fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- typography */

.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
}
.display { font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; }
.h1 { font-size: 32px; line-height: 1.2; }
.h2 { font-size: 26px; line-height: 1.2; }
.h3 { font-size: 22px; line-height: 1.25; }

.body { font-size: 17px; line-height: 1.5; margin: 0; color: var(--color-text-secondary); }
.compact { font-size: 15px; line-height: 1.45; margin: 0; color: var(--color-text-secondary); }
.help { font-size: 14px; line-height: 1.45; margin: 0; color: var(--color-text-muted); }

.label, .meta {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.label { font-size: 13px; font-weight: 500; }
.meta { font-size: 12px; }

/* --------------------------------------------------------------- login */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.login__sky {
  /* Its own band above the text rather than a full-bleed backdrop. Behind the
     panel, the panel's own gradient covered the horizon; and stretched over a
     tall phone viewport, "slice" scaled the whole scene out of frame. */
  flex: 1 1 auto;
  min-height: 220px;
  position: relative;
}
.login__sky svg { width: 100%; height: 100%; stroke: none; }
.login__panel {
  position: relative;
  flex: none;
  padding: var(--space-5) var(--page-gutter) var(--space-7);
  background: var(--color-bg-primary);
}
.login__panel::before {
  /* Soft handover from the illustration into the text block. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 96px;
  background: linear-gradient(to top, var(--color-bg-primary), rgba(16, 26, 51, 0));
  pointer-events: none;
}
.login__panel .display { margin: var(--space-3) 0 var(--space-4); }
.login__lede { max-width: 34ch; }
.login__gsi { margin-top: var(--space-6); min-height: 44px; }
.login__status { margin-top: var(--space-4); min-height: 1.4em; }
.login__status[data-tone='error'] { color: var(--color-error); }

/* ----------------------------------------------------------- app shell */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /* minmax(0, 1fr), not the implicit auto column: a grid item's automatic
     minimum size is its content, so one horizontally scrolling strip of fixed
     tracks inside would otherwise widen the entire shell and push the last nav
     item off screen. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--appbar-height);
  padding: 0 var(--space-3) 0 var(--page-gutter);
  padding-top: env(safe-area-inset-top);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}
.appbar--transparent { border-bottom-color: transparent; }
.appbar__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appbar__actions { display: flex; align-items: center; gap: var(--space-1); }
.appbar:has(#appbar-back:not([hidden])) { padding-left: var(--space-2); }

.view {
  padding: var(--space-5) var(--page-gutter) var(--space-7);
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  min-width: 0;
}
.view:focus { outline: none; }
.view--flush { padding: 0; min-height: 0; }

.nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--nav-height);
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.02em;
  position: relative;
  transition: color var(--motion-fast) var(--ease);
}
.nav__item svg { width: 23px; height: 23px; }
.nav__item[aria-current='page'] { color: var(--color-text-primary); }
.nav__item[aria-current='page']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  background: var(--color-accent-active);
  border-radius: 0 0 2px 2px;
}

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  min-width: 48px;
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-medium);
  background: var(--color-accent-primary);
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}
.btn:active { background: var(--color-accent-primary-pressed); }
.btn svg { width: 20px; height: 20px; }
.btn--block { width: 100%; }

.btn--secondary {
  background: transparent;
  border: 1px solid var(--color-surface-soft);
  color: var(--color-text-primary);
}
.btn--secondary:active { background: rgba(113, 133, 168, 0.16); }

.btn--tertiary {
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0 var(--space-3);
  min-height: 48px;
}
.btn--tertiary:active { background: rgba(113, 133, 168, 0.12); }

.btn--destructive {
  background: transparent;
  border: 1px solid var(--color-accent-coral);
  color: var(--color-accent-coral);
}
.btn--destructive:active { background: rgba(231, 126, 121, 0.14); }

.btn[disabled] {
  background: var(--color-disabled);
  color: var(--color-text-disabled);
  cursor: default;
}
.btn--secondary[disabled], .btn--tertiary[disabled] {
  background: transparent;
  border-color: var(--color-disabled);
}

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-medium);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn:active { background: rgba(113, 133, 168, 0.16); }
.iconbtn[aria-pressed='true'] {
  background: rgba(68, 120, 184, 0.28);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-border-active);
}
.iconbtn[disabled] { color: var(--color-text-disabled); cursor: default; }
.iconbtn[disabled]:active { background: transparent; }

/* --------------------------------------------------------------- cards */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  padding: var(--space-4);
}

.stack { display: grid; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }
.section + .section { margin-top: var(--space-6); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------- today view */

.today__word {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow: hidden;
}
.today__word::after {
  /* A soft botanical horizon closing off the panel, per §4.5. */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 46px;
  background:
    radial-gradient(120% 100% at 20% 100%, rgba(82, 111, 114, 0.4), transparent 70%),
    radial-gradient(90% 100% at 78% 100%, rgba(120, 104, 201, 0.26), transparent 72%);
  pointer-events: none;
}
.today__date { margin-bottom: var(--space-3); }
.today__value {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 var(--space-4);
  overflow-wrap: break-word;
}
.today__note { position: relative; z-index: 1; margin-bottom: var(--space-5); }
.today__actions { position: relative; z-index: 1; display: grid; gap: var(--space-3); }

.strip {
  display: grid;
  grid-auto-flow: column;
  /* Wide enough that a full date label fits on one line. */
  grid-auto-columns: 104px;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
}
.strip { min-width: 0; }
.strip::-webkit-scrollbar { height: 0; }
.strip > * { scroll-snap-align: start; }

/* ------------------------------------------------------- artwork tiles */

.tile {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-medium);
}
.tile__art {
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  width: 100%;
  /* height:auto is load-bearing: the img element's height attribute is a
     presentational hint, and aspect-ratio is ignored while both dimensions are
     given, which squashed every thumbnail to 24px tall. */
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-canvas);
  image-rendering: pixelated;
  background: var(--color-paper-stock);
  border: 1px solid var(--color-border);
}
.tile__word {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile__meta { display: flex; align-items: center; gap: var(--space-1); }
.tile__meta .meta { white-space: nowrap; }
.tile__fav { color: var(--color-accent-apricot); }
.tile__fav svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-4);
}

/* ---------------------------------------------------------- album list */

.albumcard {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.albumcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.albumcard__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.albumcard__swatch {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border);
}
.albumcard__peek {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: var(--space-2);
  border-radius: var(--radius-small);
}
.albumcard__peek img,
.albumcard__peek span {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  image-rendering: pixelated;
}
.albumcard__peek span { border: 1px dashed rgba(240, 236, 223, 0.22); }

/* --------------------------------------------------------- spread page */

.spread {
  --page-bg: #17263f;
  --page-frame: rgba(240, 236, 223, 0.4);
  background: var(--page-bg);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}
.spread::before {
  /* The gutter of a bound album: cold blue-grey, never a brown shadow. */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 22px;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(16, 26, 51, 0) 0%, rgba(16, 26, 51, 0.14) 42%,
    rgba(113, 133, 168, 0.16) 50%,
    rgba(16, 26, 51, 0.14) 58%, rgba(16, 26, 51, 0) 100%);
  pointer-events: none;
}
.spread__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (min-width: 560px) {
  .spread__grid { grid-template-columns: repeat(6, 1fr); }
}

.slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-canvas);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.slot--empty {
  /* §13.3: a faint corner mark, not an unfilled form field. 15–25% opacity. */
  border: 1px dashed color-mix(in srgb, var(--page-frame) 55%, transparent);
  opacity: 0.35;
  cursor: default;
}
.slot--empty::after {
  content: '';
  position: absolute;
  inset: 34%;
  border-radius: 1px;
  background: var(--page-frame);
  opacity: 0.35;
}
.slot--target {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  opacity: 1;
}
.slot img {
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-canvas);
  image-rendering: pixelated;
  border: 1px solid var(--page-frame);
}
.slot--lifted { opacity: 0.35; }
.slot__badge {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 16px;
  height: 16px;
  color: var(--color-accent-apricot);
}
.slot__badge svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }

.spread__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.pager { display: flex; align-items: center; gap: var(--space-1); }

.dragghost {
  position: fixed;
  -webkit-user-drag: none;
  user-select: none;
  z-index: 80;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: var(--radius-canvas);
  image-rendering: pixelated;
  box-shadow: var(--shadow-medium);
  pointer-events: none;
  border: 1px solid rgba(240, 236, 223, 0.5);
}

/* ---------------------------------------------------------- draw view */

.draw {
  display: grid;
  grid-template-rows: 1fr auto auto;
  /* Fill the row the shell grid gives us, rather than computing
     100dvh minus a guessed app bar height. The bar is --appbar-height *plus*
     env(safe-area-inset-top), so on any phone with a status-bar inset the
     subtraction came out short and pushed the swatch bar off the bottom of the
     screen — a layout overflow, which no amount of zooming out can recover. */
  height: 100%;
  min-height: 0;
  background: var(--color-bg-primary);
  /* The canvas owns pinch and pan here. Without this, a two-finger gesture that
     starts on the toolbar or in the margin around the canvas zooms the *page*
     instead, and the app is then stuck at a scale the canvas swallows every
     attempt to undo. Only this view; the rest of the app zooms normally. */
  touch-action: none;
}
/* …except where a horizontal scroll is the point. */
.toolbar, .swatchbar__recent { touch-action: pan-x; }
.draw__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--space-3);
  background:
    radial-gradient(120% 80% at 50% 0%, #182746 0%, var(--color-bg-primary) 70%);
  touch-action: none;
  overflow: hidden;
}
.draw__canvas {
  display: block;
  border-radius: var(--radius-canvas);
  box-shadow: var(--shadow-medium);
  touch-action: none;
}
.draw__zoom {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: grid;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-medium);
  background: rgba(22, 36, 66, 0.82);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(2px);
}
.draw__zoom .iconbtn { width: 44px; height: 44px; }

.draw__hint {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-2);
  max-width: calc(100% - 80px);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(22, 36, 66, 0.85);
  border: 1px solid var(--color-border);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease);
}
.draw__hint[data-show='1'] { opacity: 1; }

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  overflow-x: auto;
}
.toolbar__spacer { flex: 1; }
.toolbar .iconbtn { flex: none; }

.swatchbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}
.swatchbar__recent {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  flex: 1;
}
.swatch {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-small);
  /* Stronger than --color-border: the darkest swatches sit on a dark sheet and
     would otherwise have no visible edge at all. */
  border: 1px solid rgba(175, 197, 224, 0.4);
  padding: 0;
  cursor: pointer;
  position: relative;
}
.swatch--large { width: 44px; height: 44px; }
.swatch[aria-pressed='true'] {
  border: 2px solid var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-bg-secondary), 0 0 0 4px var(--color-accent-active);
}
.swatch[aria-pressed='true']::after {
  /* Colour is never the only indicator (§22.5) — a check rides along. */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 7px;
  margin: -6px 0 0 -6px;
  border-left: 2.5px solid var(--color-bg-primary);
  border-bottom: 2.5px solid var(--color-bg-primary);
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 1px rgba(247, 248, 251, 0.9));
}
.swatch--eraser {
  background:
    linear-gradient(135deg, transparent 45%, var(--color-accent-coral) 45%,
                    var(--color-accent-coral) 55%, transparent 55%),
    var(--color-surface-raised);
}

.palette__group { margin-bottom: var(--space-3); }
.palette__group .label { margin-bottom: 6px; }
.palette__row { display: flex; gap: var(--space-2); }
.palette__row .swatch { flex: 1; max-width: 56px; }

/* --------------------------------------------------------- form fields */

.field { display: grid; gap: var(--space-2); }
.field__label { font-size: 14px; color: var(--color-text-secondary); }
.input {
  height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-medium);
  border: 1px solid rgba(168, 190, 220, 0.28);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font: inherit;
  width: 100%;
}
.input::placeholder { color: var(--color-surface-soft); }
.input:focus { border-color: var(--color-accent-primary); outline: none; }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-2) 0;
}
.row + .row { border-top: 1px solid var(--color-border); }
.row__text { display: grid; gap: 2px; min-width: 0; }

.switch {
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface-soft);
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.switch[aria-checked='true'] { background: var(--color-accent-primary); }
.switch[aria-checked='true']::after {
  transform: translateX(20px);
  background: var(--color-text-primary);
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.segmented button {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 15px;
}
.segmented button[aria-pressed='true'] {
  background: var(--color-accent-active);
  color: var(--color-text-primary);
}

.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}
.tabs button {
  border: none;
  background: none;
  padding: var(--space-3) 0;
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  min-height: 48px;
}
.tabs button[aria-selected='true'] { color: var(--color-text-primary); }
.tabs button[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent-active);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------- empty state */

.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-4);
}
.empty svg {
  width: 108px;
  height: 108px;
  color: var(--color-surface-soft);
  opacity: 0.75;
  stroke-width: 1.4;
}
.empty__text { max-width: 28ch; }

/* --------------------------------------------------- sheets and toasts */

.sheet-host {
  position: fixed;
  inset: 0;
  /* inset:0 on a fixed element is the *layout* viewport, which is taller than
     what you can see whenever the browser's URL bar is showing. The sheet then
     sits partly below the fold and its last rows are unreachable. */
  height: 100dvh;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 28, 0.6);
  animation: fade var(--motion-fast) var(--ease);
}
.sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(82dvh, calc(100dvh - 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding: var(--space-3) var(--space-5) var(--space-6);
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  box-shadow: var(--shadow-medium);
  animation: rise var(--motion-standard) var(--ease);
}
.sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-surface-soft);
  opacity: 0.5;
  margin: 0 auto var(--space-4);
}
.sheet__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
.sheet__body { display: grid; gap: var(--space-3); }
.sheet__list { display: grid; gap: var(--space-1); }
.sheet__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-medium);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  font-size: 16px;
}
.sheet__item:active { background: rgba(113, 133, 168, 0.16); }
.sheet__item svg { width: 20px; height: 20px; flex: none; color: var(--color-text-muted); }
.sheet__item--danger { color: var(--color-accent-coral); }
.sheet__item--danger svg { color: var(--color-accent-coral); }
.sheet__sep { height: 1px; background: var(--color-border); margin: var(--space-2) 0; }

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--space-4));
  transform: translateX(-50%);
  z-index: 70;
  display: grid;
  gap: var(--space-2);
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-medium);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-medium);
  font-size: 15px;
  animation: rise var(--motion-fast) var(--ease);
}
.toast--error { border-color: var(--color-error); }

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-surface-soft);
  animation: spin 1.4s linear infinite;
  margin: var(--space-7) auto;
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Page turns are weighted and physical (§13.4), never bouncy. */
.turn-next { animation: turnNext var(--motion-slow) var(--ease); }
.turn-prev { animation: turnPrev var(--motion-slow) var(--ease); }
@keyframes turnNext {
  from { opacity: 0.4; transform: translateX(26px) rotateY(-7deg) scale(0.985); }
}
@keyframes turnPrev {
  from { opacity: 0.4; transform: translateX(-26px) rotateY(7deg) scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    transition-duration: 150ms !important;
  }
  .turn-next, .turn-prev { animation: fade 150ms var(--ease); }
}