/* OnePage styles. Tokens from SPEC.md §6.2. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/* Verano, the default design (§5.24); a Verano preview row gets them too. */
.design-preview[data-design="verano"], :root {
  color-scheme: light dark;
  --bg: #F3F5F9;
  --text: #1B1C1F;
  --sub: #5C6169;
  --line: #D9DDE4;
  --sheet: #FFFFFF;
  --chip: #EEF1F5;
  --chip-on: #E1E5EB;
  --seg-bg: rgba(255, 255, 255, 0.7);
  --primary-bg: #1B1C1F;
  --primary-text: #FFFFFF;
  --ring-high: #D93025;
  --ring-normal: #80868B;
  --ring-low: #8A8E94; /* was #B0B5BC; 3:1 on bg (SPEC.md §5.14) */
  --urgent: #C5221F;
  --danger: #B3261E;
  --danger-tint: #FCE4E2;
  --now-tint: #FFEFBF;
  --now-accent: #755200;
  --done-tint: #D2EFD8;
  --done-accent: #1B6B30;
  --scrim: rgba(18, 20, 26, 0.36);
  --snack-bg: #2A2D33;
  --snack-text: #F1F3F6;
  --snack-action: #A8C7FA;
  --hint: #1557C0;

  /* motion (SPEC.md §6.4) */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 100ms;
  --dur-in: 320ms;
  --dur-out: 240ms;
  --dur-fade: 180ms;

  --blue-tint: #DCE7FB; --blue-accent: #1557C0;
  --teal-tint: #D2EEEA; --teal-accent: #0B6B65;
  --peach-tint: #FBE2D1; --peach-accent: #9C450C;
  --lavender-tint: #E8E1F9; --lavender-accent: #5A3BB5;
  --pink-tint: #F8DCE8; --pink-accent: #9E2A5C;
  --olive-tint: #E4EDCD; --olive-accent: #4C6612;
}

@media (prefers-color-scheme: dark) {
  .design-preview[data-design="verano"], :root {
    --bg: #111318;
    --text: #E6E8EC;
    --sub: #A2A7B0;
    --line: #2D313A;
    --sheet: #1B1E24;
    --chip: #262A32;
    --chip-on: #323741;
    --seg-bg: rgba(0, 0, 0, 0.28);
    --primary-bg: #E6E8EC;
    --primary-text: #111318;
    --ring-high: #F28B82;
    --ring-normal: #8D939C;
    --ring-low: #5C626C; /* was #5B616B; 3:1 on bg */
    --urgent: #F28B82;
    --danger: #F2B8B5;
    --danger-tint: #3B1F1D;
    --now-tint: #352C12;
    --now-accent: #F2D06A;
    --done-tint: #16301D;
    --done-accent: #8AD69E;
    --scrim: rgba(0, 0, 0, 0.55);
    --snack-bg: #E6E8EC;
    --snack-text: #111318;
    --snack-action: #1557C0;
    --hint: #A8C7FA;

    --blue-tint: #1D2B45; --blue-accent: #A8C7FA;
    --teal-tint: #16312E; --teal-accent: #86D5CA;
    --peach-tint: #38251A; --peach-accent: #F4B48A;
    --lavender-tint: #28223D; --lavender-accent: #C7B5F5;
    --pink-tint: #391F2B; --pink-accent: #F0A8C6;
    --olive-tint: #252E17; --olive-accent: #BFD78A;
  }
}

/* A list colour class sets --tint / --accent for everything inside it. */
.c-blue { --tint: var(--blue-tint); --accent: var(--blue-accent); }
.c-teal { --tint: var(--teal-tint); --accent: var(--teal-accent); }
.c-peach { --tint: var(--peach-tint); --accent: var(--peach-accent); }
.c-lavender { --tint: var(--lavender-tint); --accent: var(--lavender-accent); }
.c-pink { --tint: var(--pink-tint); --accent: var(--pink-accent); }
.c-olive { --tint: var(--olive-tint); --accent: var(--olive-accent); }
.c-done { --accent: var(--done-accent); }

/* ---------- base ---------- */

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

html, body {
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled { cursor: default; opacity: 0.4; }

:focus-visible { outline: 2px solid var(--accent, var(--text)); outline-offset: 2px; }

/* An app, not a web page (§5.16): UI text is never selected and shows no callout or magnifier.
   Only editable fields keep normal text selection. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, [contenteditable], [contenteditable] * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img, svg { -webkit-user-drag: none; }

input, textarea {
  font: inherit;
  font-size: 16px; /* ≥ 16 px stops iOS from zooming in */
  color: var(--text);
}

input::placeholder, textarea::placeholder { color: inherit; opacity: 0.5; }

p, h1, h2 { margin: 0; }

.icon { display: inline-flex; flex: none; }

/* ---------- layout ---------- */

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* #top, #main and #dock are styled by class, so the copies kept for an animation look the same. */
.app-top {
  position: relative;
  z-index: 1;
  background: var(--bg);
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 22px 16px 12px 22px;
}

.app-top.list-top { align-items: center; padding: 12px 16px 0 6px; }

.app-main {
  position: relative;
  z-index: 1;
  background: var(--bg);
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 4px 16px 12px;
  scrollbar-width: none;
}

.app-main::-webkit-scrollbar { display: none; }

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

.head-line {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.5px; }

/* ---------- board ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
  gap: 12px;
}

.widget {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 12px 8px;
  border-radius: 24px;
  background: var(--tint);
  color: var(--text);
}

.widget.wide { grid-column: span 2; }
.widget.large { grid-column: span 2; grid-row: span 2; }

.widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 6px;
  color: var(--accent);
}

.widget-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-count { flex: none; font-size: 13px; font-weight: 700; opacity: 0.75; }

.widget-empty { padding: 2px 2px 0; font-size: 13px; line-height: 1.4; color: var(--accent); opacity: 0.85; }
.widget-flower { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; }

.widget-rows {
  position: relative; /* rows measure their offsetTop from here */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
}

.widget-rows.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A widget with more tasks than fit scrolls inside (v1.2); at its end, iOS chains to the board. */
.widget-rows.scrolls {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.widget-rows.scrolls::-webkit-scrollbar { display: none; }

.widget-rows.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}

.widget-more { flex: none; text-align: left; }
.widget-more.at-end { visibility: hidden; } /* keeps its space so rows don't jump */

.more {
  height: 24px;
  padding-left: 23px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 24px;
  color: var(--accent, var(--now-accent));
}

.new-list {
  margin-top: 12px;
  width: 100%;
  height: 52px;
  border-radius: 20px;
  border: 1.5px dashed var(--line);
  color: var(--sub);
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---------- task rows ---------- */

.trow, .lrow {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.trow { display: flex; align-items: center; gap: 4px; height: 24px; min-width: 0; }

.ring-btn { flex: none; width: 19px; height: 24px; display: flex; align-items: center; }

.ring {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--ring-normal);
}

[data-priority="high"] .ring { border: 2px solid var(--ring-high); }
[data-priority="low"] .ring { border: 1.6px dashed var(--ring-low); }

.trow-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-priority="low"] .trow-title, [data-priority="low"] .lrow-title { color: var(--sub); }

/* In a widget only the title text opens the task (v1.4): the button is as wide as its text plus
   8 px on each side (text position unchanged, never past the row's end), and the free space
   after it opens the list. */
.widget .trow-title { flex: 0 1 auto; padding: 0 8px; margin-left: -8px; }
.widget .ring-btn { position: relative; z-index: 1; } /* the ring wins where the padding overlaps */
.widget .due { margin-left: auto; padding-left: 8px; }

.due { flex: none; font-size: 11.5px; font-weight: 700; color: var(--sub); }
.due.urgent { color: var(--urgent); }

.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- list view ---------- */

.back {
  height: 44px;
  padding: 0 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--accent, var(--text));
}

.list-view { padding: 0 4px; }

.list-name {
  display: block;
  width: 100%;
  margin: 6px 0 14px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--accent);
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--tint);
}

.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-label { font-size: 13px; font-weight: 700; color: var(--accent); }

.segs { display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--seg-bg); }

.seg {
  height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
}

.seg[aria-pressed="true"] { background: var(--accent); color: var(--sheet); }

.swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; }

.swatch { width: 34px; height: 44px; display: flex; align-items: center; justify-content: center; }

.swatch-dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.swatch[aria-pressed="true"] .swatch-dot { box-shadow: 0 0 0 2px var(--tint), 0 0 0 4px var(--text); }

.count-line { margin: 18px 2px 2px; font-size: 12.5px; font-weight: 600; color: var(--sub); }

.lrow {
  display: flex;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
}

.ring-btn.big { width: 44px; height: 44px; margin-left: -10px; justify-content: center; }
.ring-btn.big .ring { width: 21px; height: 21px; }

.lrow-main {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  padding: 9px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.lrow-title {
  max-width: 100%;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lrow-meta { display: flex; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.lrow-meta .due { font-size: inherit; }
.in-now { color: var(--now-accent); }

.add-row { display: flex; align-items: center; min-height: 58px; color: var(--accent); }
.add-row .icon { width: 44px; margin-left: -10px; justify-content: center; }

.inline-add {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: none;
  background: none;
}

/* ---------- dock ---------- */

.dock-wrap { position: relative; z-index: 3; flex: none; }

.dock {
  position: relative;
  z-index: 1;
  background: var(--bg);
  display: flex;
  gap: 10px;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
}

.now-card {
  flex: 1.6;
  min-width: 0;
  height: 150px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 26px;
  background: var(--now-tint);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 6px;
  color: var(--now-accent);
}

.card-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.card-count { font-size: 13px; font-weight: 700; }
.card-hint { padding: 2px; font-size: 13px; line-height: 1.4; color: var(--now-accent); }

.dock-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.done-card {
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 14px 12px;
  border-radius: 26px;
  background: var(--done-tint);
  color: var(--done-accent);
}

.done-label { font-size: 12.5px; font-weight: 600; }

.add-task {
  height: 48px;
  border-radius: 24px;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---------- drag and drop ---------- */

body.dragging { cursor: grabbing; }
body.dragging * { cursor: inherit; }

.head-line.hint { color: var(--hint); }

.widget { --drop-accent: var(--accent); }
.now-card { --drop-accent: var(--now-accent); }
.done-card { --drop-accent: var(--done-accent); }

[data-drop] { transition: transform 160ms ease; }

/* An outline marks drop targets without changing the layout under the finger. */
.drop-target { outline: 2px dashed var(--drop-accent); outline-offset: -2px; }
.drop-over { outline-style: solid; transform: scale(1.02); }

.drag-source { opacity: 0.35; }

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--sheet);
  color: var(--text);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
  font-size: 14.5px;
  font-weight: 600;
}

.drag-ghost-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Done view ---------- */

.done-view { padding: 0 4px; }

.done-title { margin: 6px 0 14px; color: var(--done-accent); }

.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px 4px;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar { display: none; }

.filter {
  flex: none;
  height: 44px;
  padding: 0 15px;
  border-radius: 22px;
  background: var(--chip);
  font-size: 14px;
  font-weight: 700;
}

.filter[aria-pressed="true"] { background: var(--text); color: var(--bg); }

.drow { display: flex; align-items: center; gap: 12px; min-height: 60px; border-bottom: 1px solid var(--line); }

.done-check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sheet);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drow-title { font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow-meta { font-size: 12.5px; font-weight: 600; color: var(--sub); }

.restore { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--sub); }

.done-empty { padding: 40px 4px; text-align: center; font-size: 15px; color: var(--sub); }

/* ---------- snackbar ---------- */

#snack {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 4px);
  z-index: 15;
  pointer-events: none;
}

.snack {
  pointer-events: auto;
  touch-action: none; /* it can be swiped away (§5.9) */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 4px 16px;
  border-radius: 16px;
  background: var(--snack-bg);
  color: var(--snack-text);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.snack-text { min-width: 0; padding: 8px 0; }

.snack-undo { flex: none; height: 44px; padding: 0 12px; font-weight: 800; color: var(--snack-action); }

/* ---------- sheets ---------- */

#sheet-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#sheet-root:empty { display: none; }

.scrim { position: absolute; inset: 0; background: var(--scrim); cursor: default; }

.sheet {
  position: relative;
  max-height: 88%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 10px max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-radius: 28px 28px 0 0;
  background: var(--sheet);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}

/* Grab handle: 36 × 4 px bar in a 44 px touch area that stays at the top while the sheet scrolls. */
.sheet-handle {
  position: sticky;
  top: -10px; /* cancels the sheet's top padding */
  z-index: 1;
  flex: none;
  height: 44px;
  margin: -10px -20px -24px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  background: linear-gradient(var(--sheet) 60%, transparent);
  touch-action: none;
  cursor: grab;
}

.grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--line); }

.sheet.swiping { transition: none; user-select: none; -webkit-user-select: none; }
.sheet.settling { transition: transform 200ms ease-out; }
.scrim { transition: opacity 200ms ease-out; }

.sheet-heading { font-size: 20px; font-weight: 800; }

.sheet-title-input {
  width: 100%;
  padding: 2px 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 22px;
  font-weight: 700;
}

.add-title {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  outline: none;
  border-radius: 16px;
  background: var(--chip);
  font-size: 16.5px;
}

.field-label { margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--sub); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background: var(--chip);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip[aria-pressed="true"] { background: var(--chip-on); border-color: var(--text); }
.list-chip[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); color: var(--accent); }
.list-chip .dot { width: 9px; height: 9px; }

.prio-segs { display: flex; gap: 8px; }

.prio-seg {
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: var(--chip);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.prio-seg[aria-pressed="true"] { background: var(--chip-on); border-color: var(--text); }
.prio-seg .ring { width: 14px; height: 14px; }

.step { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; }

.box {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  border-radius: 6px;
  border: 1.6px solid var(--ring-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step[aria-pressed="true"] .box { background: var(--done-accent); border-color: var(--done-accent); }
.step[aria-pressed="true"] .box::after { content: '✓'; color: var(--sheet); font-size: 13px; font-weight: 800; }
.step-text { font-size: 15px; }
.step[aria-pressed="true"] .step-text { color: var(--sub); text-decoration: line-through; }

.step-plus { width: 30px; font-size: 20px; color: var(--sub); }

.step-input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: none;
}

.notes {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  outline: none;
  resize: none;
  border-radius: 16px;
  background: var(--chip);
  line-height: 1.45;
}

.sheet-actions { display: flex; gap: 10px; }

.pill {
  flex: 1;
  height: 50px;
  border-radius: 25px;
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pill.primary { background: var(--primary-bg); color: var(--primary-text); }
.pill.wide { flex: none; width: 100%; height: 52px; font-size: 16px; }
.now-pill { background: var(--now-tint); color: var(--now-accent); }

/* ---------- Pick date chip ---------- */

/* The native date input lies invisibly over the whole chip, so a real tap opens the iOS picker. */
.pick-chip { position: relative; overflow: hidden; }
.pick-chip[data-selected="true"] { background: var(--chip-on); border-color: var(--text); }

.pick-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px; /* no iOS zoom on focus */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pick-chip:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- select mode and bulk actions (§5.7) ---------- */

.select-btn {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--chip);
  font-size: 14.5px;
  font-weight: 700;
}

.select-btn.on { background: var(--primary-bg); color: var(--primary-text); }

/* Unselected rings are plain grey while selecting; selected ones are filled with a check. */
body.selecting .ring { border: 1.6px solid var(--ring-normal); }

[data-selected="true"] .ring {
  border: 2px solid var(--accent);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-selected="true"] .ring::after {
  content: '';
  width: 35%;
  height: 60%;
  margin-top: -12%;
  border: solid var(--sheet);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lrow[data-selected="true"] { background: var(--tint); margin: 0 -12px; padding: 0 12px; }

.action-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 26px;
  background: var(--sheet);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

.bar-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; }
.bar-label { font-size: 15px; font-weight: 700; }
.bar-aux { height: 44px; padding: 0 14px; border-radius: 22px; background: var(--chip); font-size: 13.5px; font-weight: 700; }

.bar-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.bar-btn {
  height: 62px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
}

.bar-move { background: var(--primary-bg); color: var(--primary-text); }
.bar-now { background: var(--now-tint); color: var(--now-accent); }
.bar-done { background: var(--done-tint); color: var(--done-accent); }
.bar-delete { background: var(--danger-tint); color: var(--danger); }

.drag-ghost-count {
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.move-targets { display: flex; flex-direction: column; gap: 10px; }

.move-target {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  background: var(--tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
}

.move-target .dot { width: 10px; height: 10px; }
.move-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-count { flex: none; font-size: 13.5px; opacity: 0.75; }

/* ---------- deleting (§5.8) ---------- */

.danger-text {
  min-height: 44px;
  margin-top: 28px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  font-size: 15px;
  font-weight: 700;
}

.danger-text.centered { align-self: center; margin-top: 0; padding: 0 16px; }

.sheet-text { font-size: 15px; line-height: 1.45; color: var(--sub); }

.pill:not(.primary):not(.now-pill):not(.danger):not(.done-pill) { background: var(--chip); }
.pill.danger { background: var(--danger); color: var(--sheet); }

/* ---------- ⋯ menu and backup (§5.11) ---------- */

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

.more-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--chip);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  line-height: 44px;
}

.menu-btn {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  background: var(--chip);
  font-size: 16px;
  font-weight: 700;
}

.file-input { display: none; font-size: 16px; }

/* While a sheet is open, messages appear at the top so the sheet doesn't hide them. */
body.sheet-open #snack {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  bottom: auto;
  z-index: 25;
}

/* ---------- arranging the lists (§5.15) ---------- */

.grid { position: relative; } /* widgets measure their slots from the grid */

/* The wiggle uses `rotate`, so it never fights the `transform` of dragging and sliding. */
@keyframes wiggle {
  from { rotate: -1deg; }
  to { rotate: 1deg; }
}

body.arranging .widget {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  animation: wiggle 0.25s ease-in-out infinite alternate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.arranging .widget:nth-child(2n) { animation-delay: -0.12s; }
body.arranging .widget * { pointer-events: none; } /* rows, rings, "+N more", inner scrolling */
body.arranging .new-list { pointer-events: none; opacity: 0.4; }

body.arranging .dock { display: none; } /* the board gets the full height while arranging */
body.arranging [data-drop] { transition: none; } /* transforms are driven by the drag loop */

/* The lifted widget: no wiggle and no scaling, so it stays exactly under the finger (§5.15 v1.8). */
body.arranging .widget.arrange-drag {
  position: relative;
  z-index: 5;
  animation: none;
  outline-style: solid;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body.arranging .widget { animation: none; }
}

/* ---------- automatic backups and the reminder (§5.19) ---------- */

.menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }
.menu-note { font-size: 13px; font-weight: 600; color: var(--sub); }

.snapshot-rows { display: flex; flex-direction: column; gap: 8px; }

.snapshot-row {
  min-height: 60px;
  padding: 8px 16px;
  border-radius: 18px;
  background: var(--chip);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.snapshot-when { font-size: 16px; font-weight: 700; }
.snapshot-counts { font-size: 13.5px; font-weight: 600; color: var(--sub); }

.reminder {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--now-tint);
  color: var(--now-accent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.reminder-text { font-size: 14.5px; font-weight: 700; }
.reminder-actions { display: flex; gap: 8px; }

.reminder-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--now-accent);
}

.reminder-btn.primary { background: var(--primary-bg); color: var(--primary-text); }

body.arranging .reminder { display: none; } /* arrange mode keeps the widgets, so hide it with CSS */

/* ---------- feedback (§5.18) ---------- */

.version-line { font-size: 12.5px; font-weight: 600; color: var(--sub); }
.link-pill { text-decoration: none; }

.address-field {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--chip);
}

/* ---------- How to use (§5.17) ---------- */

.help {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) max(16px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background: var(--bg);
}

.help-top { display: flex; justify-content: flex-end; padding: 8px 12px 0; }
.help-skip { min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--sub); }

.help-slides {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.help-slides::-webkit-scrollbar { display: none; }

.help-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 28px;
}

.help-picture {
  flex: none;
  height: min(420px, calc(100dvh - 330px)); /* the recordings are 786 × 1040 px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-picture picture { display: contents; }

.help-picture img {
  display: block;
  max-width: min(330px, 100%);
  max-height: 100%;
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, 0.08);
  -webkit-user-drag: none;
}

.help-title { margin-top: 10px; font-size: 22px; font-weight: 800; }
.help-text { font-size: 17px; line-height: 1.45; color: var(--sub); }

.help-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 0; }
.help-dots { display: flex; gap: 7px; }
.help-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.help-dot[aria-current="true"] { background: var(--text); }

.help-nav {
  min-width: 88px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--chip);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.help-nav.primary { background: var(--primary-bg); color: var(--primary-text); }

/* ---------- board title (§5.21) ---------- */

.title-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--text);
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.title { cursor: text; }

/* ---------- Do now card and view (§5.20) ---------- */

.c-now { --accent: var(--now-accent); }
.now-card { cursor: pointer; }
.now-card .widget-rows { --accent: var(--now-accent); }
.now-card .widget-more { color: var(--now-accent); }
.now-card.current { outline: 2px solid var(--now-accent); outline-offset: -2px; }
.done-card.current { outline: 2px solid var(--done-accent); outline-offset: -2px; }
.card-right { display: flex; align-items: center; gap: 6px; }
.card-chevron { font-size: 18px; font-weight: 700; line-height: 1; }

.now-icon { flex: none; display: inline-flex; color: var(--now-accent); }
.now-icon svg { fill: currentColor; }
.in-now { display: inline-flex; align-items: center; gap: 3px; }

.now-view { padding: 0 4px; }
.now-title { margin: 6px 0 14px; color: var(--now-accent); }
.list-ref { display: inline-flex; align-items: center; gap: 6px; }
.list-ref .dot { width: 8px; height: 8px; }

/* ---------- tile + and details buttons (§5.22, §5.23) ---------- */

.widget-top { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; }
.widget-top .widget-head { flex: 1; min-width: 0; }

/* A 28 px dot with a 44 × 44 px target; negative margins keep the header as low as before. */
.tile-add {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-add-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--tint));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.selecting .tile-add, body.arranging .tile-add { display: none; }

.done-pill { gap: 6px; background: var(--done-tint); color: var(--done-accent); }

/* ---------- feedback form (§5.18) ---------- */

.feedback-text {
  display: block;
  width: 100%;
  min-height: calc(4 * 1.45em + 24px);
  padding: 12px 14px;
  border: 0;
  outline: none;
  resize: none;
  border-radius: 16px;
  background: var(--chip);
  line-height: 1.45;
}

.feedback-email {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  outline: none;
  border-radius: 14px;
  background: var(--chip);
}

.feedback-error { font-size: 15px; font-weight: 600; color: var(--danger); }

/* ---------- motion (§6.4) ---------- */
/* Views, sheets, the snackbar, drops and select mode are animated from src/ui/motion.js. While an
   old view, sheet or dock animates out, a copy of it sits in a .motion-ghost layer that never takes
   taps and is hidden from screen readers. */

.motion-ghost { pointer-events: none; }

.view-ghost {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.view-ghost.under { z-index: 0; }
.view-ghost.over { z-index: 2; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); }

.sheet-ghost {
  position: fixed;
  inset: 0;
  z-index: 19; /* under a sheet that opens while this one still slides away */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dock-ghost { position: absolute; left: 0; right: 0; bottom: 0; }
.dock-ghost.under { z-index: 0; }
.dock-ghost.over { z-index: 2; }

/* Press feedback: scale down while pressed, spring back on release. Not while dragging or arranging. */
@media (prefers-reduced-motion: no-preference) {
  body:not(.arranging) :is(.widget, .now-card, .done-card, .add-task, .tile-add, .chip, .prio-seg, .seg, .swatch,
    .filter, .menu-btn, .lrow, .pill, .select-btn, .more-btn, .new-list, .bar-btn, .bar-aux, .reminder-btn) {
    transition: transform 220ms var(--ease-spring);
  }

  body:not(.dragging):not(.arranging) :is(.widget, .now-card):active:not(:has(.trow:active, .widget-rows:active)),
  body:not(.dragging):not(.arranging) :is(.done-card, .add-task, .tile-add, .chip, .prio-seg, .seg, .swatch, .filter,
    .menu-btn, .pill, .select-btn, .more-btn, .new-list, .bar-btn, .bar-aux, .reminder-btn):active:not(:disabled) {
    transform: scale(0.97);
    transition: transform var(--dur-press) ease-out;
  }

  body:not(.dragging):not(.arranging):not(.selecting) .lrow:active {
    transform: scale(0.985);
    transition: transform var(--dur-press) ease-out;
  }
}

/* ---------- designs (§5.24) ---------- */
/* Each design is a token set under [data-design="…"] (on <html>, or on a preview in the Design
   sheet) plus a few rules under html[data-design="…"]. Only the look changes, never the layout.
   Decorations are pseudo-elements: never focusable, never taking taps. */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cinzel-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2');
}

/* The Design sheet */
.design-rows { display: flex; flex-direction: column; gap: 10px; }

.design-row {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: var(--chip);
  text-align: left;
}

.design-row[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); }
.design-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.design-name { font-size: 16px; font-weight: 800; }
.design-note { font-size: 13px; font-weight: 500; color: var(--sub); }
.design-check { flex: none; display: flex; color: var(--text); }

/* A mini board drawn with the design's own tokens */
.design-preview {
  flex: none;
  width: 56px;
  height: 40px;
  padding: 5px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
}

.mini-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 5px;
  border-radius: 7px;
  background: var(--blue-tint);
}

.mini-name { width: 60%; height: 4px; border-radius: 2px; background: var(--blue-accent); }
.mini-row { width: 85%; height: 3px; border-radius: 2px; background: var(--text); opacity: 0.45; }

/* design: ulm */
/* Ulm: paper and metal. Quiet panels, hairlines, one signal orange. */
[data-design="ulm"] {
  --bg: #EEEBE4;
  --text: #1C1C1A;
  --sub: #5C5953;
  --line: #D5D0C6;
  --sheet: #F7F5F0;
  --chip: #E5E1D8;
  --chip-on: #D9D4C9;
  --seg-bg: rgba(255, 255, 255, 0.65);
  --primary-bg: #1C1C1A;
  --primary-text: #F7F5F0;
  --ring-high: #C2410C;
  --ring-normal: #7A766F;
  --ring-low: #84807A;
  --urgent: #A8361A;
  --danger: #A12A1C;
  --danger-tint: #F2DFD9;
  --now-tint: #EFE6D2;
  --now-accent: #6A4A08;
  --done-tint: #E0E6DB;
  --done-accent: #2F5636;
  --scrim: rgba(28, 28, 26, 0.32);
  --snack-bg: #2A2926;
  --snack-text: #F2F0EB;
  --snack-action: #F2A57E;
  --hint: #A8400F;
  --signal: #C2410C;
  --signal-text: #FFFFFF;
  --panel: #F5F2EC;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --panel-texture: none;
  --panel-edge: 0 1px 0 rgba(255, 255, 255, 0.7) inset;

  --blue-tint: #DDE2E8; --blue-accent: #2E4A6B;
  --teal-tint: #D9E3E0; --teal-accent: #2A5650;
  --peach-tint: #EBDDD0; --peach-accent: #7A3E16;
  --lavender-tint: #E1DDE8; --lavender-accent: #4A3D73;
  --pink-tint: #EBDAE0; --pink-accent: #7A2E4C;
  --olive-tint: #E0E4D4; --olive-accent: #46561E;
}

@media (prefers-color-scheme: dark) {
  /* brushed titanium */
  [data-design="ulm"] {
    --bg: #1A1B1D;
    --text: #E8E6E1;
    --sub: #A3A09A;
    --line: #34363A;
    --sheet: #232528;
    --chip: #2C2E32;
    --chip-on: #383A3F;
    --seg-bg: rgba(0, 0, 0, 0.3);
    --primary-bg: #E8E6E1;
    --primary-text: #1A1B1D;
    --ring-high: #F08A5D;
    --ring-normal: #8C8F96;
    --ring-low: #6A6D74;
    --urgent: #F3976E;
    --danger: #F2B8B5;
    --danger-tint: #3A2220;
    --now-tint: #2F2A1E;
    --now-accent: #E8C77A;
    --done-tint: #1E2A21;
    --done-accent: #9BCBA4;
    --scrim: rgba(0, 0, 0, 0.55);
    --snack-bg: #E8E6E1;
    --snack-text: #1A1B1D;
    --snack-action: #B23A0A;
    --hint: #F2A57E;
    --signal: #E0581E;
    --signal-text: #111111;
    --panel: #26282B;
    --grain: none;
    --panel-texture: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
    --panel-edge: 0 1px 0 rgba(255, 255, 255, 0.09) inset;

    --blue-tint: #22292F; --blue-accent: #A9BCD3;
    --teal-tint: #202A28; --teal-accent: #9CC4BB;
    --peach-tint: #2E241D; --peach-accent: #DDB08F;
    --lavender-tint: #26232E; --lavender-accent: #BDB2DA;
    --pink-tint: #2D2126; --pink-accent: #D9A9BC;
    --olive-tint: #252A1D; --olive-accent: #B9C79A;
  }
}

html[data-design="ulm"] body,
html[data-design="ulm"] .app-top,
html[data-design="ulm"] .app-main,
html[data-design="ulm"] .dock { background: var(--bg) var(--grain); }

html[data-design="ulm"] .title { font-weight: 600; letter-spacing: -0.9px; }
html[data-design="ulm"] .grid { gap: 12px; }

/* matte panels instead of tinted tiles; the list colour is only a dot */
html[data-design="ulm"] .widget,
html[data-design="ulm"] .now-card,
html[data-design="ulm"] .done-card {
  border-radius: 14px;
  background: var(--panel-texture), var(--panel);
  box-shadow: var(--panel-edge), 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.035);
}

html[data-design="ulm"] .widget-name { color: var(--text); font-weight: 600; letter-spacing: -0.1px; }
html[data-design="ulm"] .widget-name::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 7px 1px 1px;
  border-radius: 50%;
  background: var(--accent);
}
html[data-design="ulm"] .widget-count { color: var(--sub); }
html[data-design="ulm"] .widget-empty { color: var(--sub); }
html[data-design="ulm"] .now-card .card-head { color: var(--text); }
html[data-design="ulm"] .now-card .card-head .icon { color: var(--signal); }
html[data-design="ulm"] .done-card { color: var(--done-accent); }

/* the one coloured switch: + Task, the selection, the current filter */
html[data-design="ulm"] .add-task {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.22), transparent 60%), var(--signal);
  color: var(--signal-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px rgba(0, 0, 0, 0.18);
}
html[data-design="ulm"] .select-btn.on,
html[data-design="ulm"] .filter[aria-pressed="true"] { background: var(--signal); color: var(--signal-text); }
html[data-design="ulm"] .trow[data-selected] .ring,
html[data-design="ulm"] .lrow[data-selected] .ring { border-color: var(--signal); background: var(--signal); }
html[data-design="ulm"] .sheet { border-radius: 18px 18px 0 0; }
/* end design: ulm */

/* design: eldermere */
/* Eldermere: ink on parchment, little keeps, a dragon and a cat. One fixed look. */
[data-design="eldermere"] {
  color-scheme: light;
  --bg: #EFE3C8;
  --text: #2A2118;
  --sub: #5E4E3A;
  --line: #CDBB98;
  --sheet: #F6EDD8;
  --chip: #E6D6B4;
  --chip-on: #DCC9A2;
  --seg-bg: rgba(255, 250, 235, 0.6);
  --primary-bg: #3B2A1A;
  --primary-text: #F6EDD8;
  --ring-high: #9B2226;
  --ring-normal: #6B5A44;
  --ring-low: #8A7658;
  --urgent: #8E1B1F;
  --danger: #8E1B1F;
  --danger-tint: #F0D6CC;
  --now-tint: #EFD9A6;
  --now-accent: #5C3D00;
  --done-tint: #D9E0C0;
  --done-accent: #2F4A1F;
  --scrim: rgba(42, 33, 24, 0.4);
  --snack-bg: #2A2118;
  --snack-text: #F6EDD8;
  --snack-action: #E8C47A;
  --hint: #7A2E14;

  /* heraldic colours: royal blue, forest green, ochre, plum, crimson, slate */
  --blue-tint: #DCDDE3; --blue-accent: #1F3A73;
  --teal-tint: #D8E0CB; --teal-accent: #24502A;
  --peach-tint: #EBDCB4; --peach-accent: #664608;
  --lavender-tint: #E4D5DC; --lavender-accent: #5A2350;
  --pink-tint: #EDD4CC; --pink-accent: #7E1A22;
  --olive-tint: #DADCD6; --olive-accent: #3A4A50;
}

html[data-design="eldermere"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(255, 248, 225, 0.75), transparent 55%),
    radial-gradient(ellipse at 90% 85%, rgba(160, 120, 60, 0.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* the board shows the parchment through */
html[data-design="eldermere"] .app-top,
html[data-design="eldermere"] .app-main,
html[data-design="eldermere"] .dock { background: transparent; }
html[data-design="eldermere"] .view-ghost.under { visibility: hidden; }

html[data-design="eldermere"] .title,
html[data-design="eldermere"] .sheet-heading { font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: 0.5px; }
html[data-design="eldermere"] .title { font-size: 29px; }

/* hills, a castle and a tall tree behind the header; a vine under it */
html[data-design="eldermere"] .app-top::before {
  content: '';
  position: absolute;
  right: 146px;
  bottom: 8px;
  width: 112px;
  height: 46px;
  background: url(assets/designs/eldermere/header.svg) center bottom / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
}
html[data-design="eldermere"] .app-top.list-top::before { display: none; }
html[data-design="eldermere"] .app-top::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -2px;
  height: 10px;
  background: url(assets/designs/eldermere/vine.svg) left center / 48px 10px repeat-x;
  opacity: 0.85;
  pointer-events: none;
}
html[data-design="eldermere"] .head-text,
html[data-design="eldermere"] .head-actions { position: relative; z-index: 1; }

/* tiles are little keeps: battlements on top, a pennant by the name */
html[data-design="eldermere"] .widget {
  border-radius: 4px 4px 12px 12px;
  box-shadow: inset 0 0 0 1.2px rgba(42, 33, 24, 0.55), 0 2px 0 rgba(42, 33, 24, 0.12);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 7px / 100% calc(100% - 7px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='7'%3E%3Crect x='3' width='12' height='7'/%3E%3C/svg%3E") 0 0 / 18px 7px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 7px / 100% calc(100% - 7px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='7'%3E%3Crect x='3' width='12' height='7'/%3E%3C/svg%3E") 0 0 / 18px 7px repeat-x;
}
html[data-design="eldermere"] .widget-name::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 13px;
  margin: 0 5px -1px 0;
  background: var(--accent);
  -webkit-mask: url(assets/designs/eldermere/pennant.svg) center / contain no-repeat;
  mask: url(assets/designs/eldermere/pennant.svg) center / contain no-repeat;
}

html[data-design="eldermere"] .now-card,
html[data-design="eldermere"] .done-card,
html[data-design="eldermere"] .add-task { box-shadow: inset 0 0 0 1.2px rgba(42, 33, 24, 0.5); }
html[data-design="eldermere"] .now-card,
html[data-design="eldermere"] .done-card { position: relative; border-radius: 14px; }
html[data-design="eldermere"] .now-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 40px;
  width: 18px;
  height: 24px;
  background: url(assets/designs/eldermere/banner.svg) center top / contain no-repeat;
  pointer-events: none;
}
html[data-design="eldermere"] .done-card::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 9px;
  width: 38px;
  height: 26px;
  background: url(assets/designs/eldermere/dragon.svg) center / contain no-repeat;
  pointer-events: none;
}
html[data-design="eldermere"] .dock::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 60%;
  width: 24px;
  height: 18px;
  background: url(assets/designs/eldermere/cat.svg) center bottom / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
html[data-design="eldermere"] .sheet { background-image: linear-gradient(rgba(255, 252, 240, 0.5), transparent 40%); }
/* end design: eldermere */

/* design: perihelion */
/* Perihelion: deep space, the limb of Earth, instrument panels. One fixed look. */
[data-design="perihelion"] {
  color-scheme: dark;
  --bg: #070B16;
  --text: #E6ECF5;
  --sub: #9AA6BA;
  --line: #22304A;
  --sheet: #0E1626;
  --chip: #16213A;
  --chip-on: #1F2D4C;
  --seg-bg: rgba(0, 0, 0, 0.3);
  --primary-bg: #CFE3FF;
  --primary-text: #07101F;
  --ring-high: #FF8A80;
  --ring-normal: #8A97AE;
  --ring-low: #56627A;
  --urgent: #FF9A8F;
  --danger: #FFB4AB;
  --danger-tint: #3A1515;
  --now-tint: #2A1D08;
  --now-accent: #FFC266;
  --done-tint: #0F2A1E;
  --done-accent: #7FE0A8;
  --scrim: rgba(0, 0, 0, 0.6);
  --snack-bg: #CFE3FF;
  --snack-text: #07101F;
  --snack-action: #1B4FB0;
  --hint: #8FD3FF;

  /* ice blue, cyan, amber, violet, coral, sage */
  --blue-tint: #102036; --blue-accent: #A9D4FF;
  --teal-tint: #0C2A2E; --teal-accent: #7FE6F0;
  --peach-tint: #2C2008; --peach-accent: #FFC877;
  --lavender-tint: #1E1838; --lavender-accent: #C6B6FF;
  --pink-tint: #33161A; --pink-accent: #FFA79A;
  --olive-tint: #17261C; --olive-accent: #B5D8B8;
}

html[data-design="perihelion"] body {
  background-color: var(--bg);
  background-image:
    url(assets/designs/perihelion/stars.svg),
    radial-gradient(ellipse 34% 16% at 72% 46%, rgba(200, 180, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 30% at 70% 46%, rgba(110, 80, 200, 0.16), transparent 70%),
    conic-gradient(from 200deg at 72% 46%, rgba(120, 150, 255, 0.07), transparent 25%, rgba(170, 120, 255, 0.07) 50%, transparent 75%, rgba(120, 150, 255, 0.07)),
    radial-gradient(ellipse at 20% 100%, rgba(30, 80, 160, 0.25), transparent 60%);
  background-size: 390px 844px, auto, auto, auto, auto;
  background-position: center top;
}

html[data-design="perihelion"] .app-top,
html[data-design="perihelion"] .app-main,
html[data-design="perihelion"] .dock { background: transparent; }
html[data-design="perihelion"] .view-ghost.under { visibility: hidden; }

html[data-design="perihelion"] .title,
html[data-design="perihelion"] .sheet-heading { font-family: 'Space Grotesk', 'Figtree', sans-serif; font-weight: 600; letter-spacing: -0.3px; }
html[data-design="perihelion"] .head-line { letter-spacing: 0.8px; text-transform: uppercase; font-size: 11.5px; }

/* the limb of Earth and a small station along the bottom of the header */
html[data-design="perihelion"] .app-top { padding-bottom: 12px; }
html[data-design="perihelion"] .app-top::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: url(assets/designs/perihelion/header.svg) center bottom / 100% 60px no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}
html[data-design="perihelion"] .app-top { isolation: isolate; }
html[data-design="perihelion"] .app-top.list-top::before { opacity: 0.45; }

/* instrument panels with corner brackets */
html[data-design="perihelion"] .widget,
html[data-design="perihelion"] .now-card,
html[data-design="perihelion"] .done-card {
  border-radius: 6px;
  background:
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 0 0 / 10px 1.5px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 0 0 / 1.5px 10px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 100% 0 / 10px 1.5px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 100% 0 / 1.5px 10px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 0 100% / 10px 1.5px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 0 100% / 1.5px 10px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 100% 100% / 10px 1.5px no-repeat,
    linear-gradient(var(--accent, #A9D4FF), var(--accent, #A9D4FF)) 100% 100% / 1.5px 10px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    color-mix(in srgb, var(--tint, #102036) 78%, transparent);
  box-shadow: inset 0 0 0 1px rgba(160, 190, 255, 0.16);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html[data-design="perihelion"] .now-card { --accent: var(--now-accent); --tint: var(--now-tint); }
html[data-design="perihelion"] .done-card { --accent: var(--done-accent); --tint: var(--done-tint); }
html[data-design="perihelion"] .widget-name::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px -1px 0;
  background: var(--accent);
  -webkit-mask: url(assets/designs/perihelion/orbit.svg) center / contain no-repeat;
  mask: url(assets/designs/perihelion/orbit.svg) center / contain no-repeat;
}
html[data-design="perihelion"] .widget-name { letter-spacing: 0.2px; }
html[data-design="perihelion"] .add-task { box-shadow: 0 0 0 1px rgba(207, 227, 255, 0.4), 0 0 18px rgba(127, 200, 255, 0.25); }
html[data-design="perihelion"] .sheet { box-shadow: 0 -1px 0 rgba(160, 190, 255, 0.22), 0 -10px 40px rgba(0, 0, 0, 0.5); }
/* end design: perihelion */

/* previews in the Design sheet */
.design-preview[data-design="ulm"] .mini-tile { border-radius: 4px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.design-preview[data-design="ulm"] .mini-name { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.design-preview[data-design="eldermere"] .mini-tile { border-radius: 1px 1px 5px 5px; box-shadow: inset 0 0 0 1px var(--text); }
.design-preview[data-design="perihelion"] { background: radial-gradient(circle at 70% 30%, #2A2A6A, var(--bg) 70%); }
.design-preview[data-design="perihelion"] .mini-tile { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--blue-accent); }