/* Caveat and Karla are only for the Sketch style. Bundled (and saved for offline use by sw.js),
   so nothing is fetched from elsewhere. Latin letters only, to keep them small. */
@font-face {
  font-family: 'Caveat';
  src: url(fonts/Caveat.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url(fonts/Karla.woff2) format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/* Dark is the fallback; Settings > Theme picks Light, Dark or Auto (follow the phone).
   Dark: near-black with soft gold. Light: cool whites with a light yellow. */
:root {
  --bg: #15181a;
  --surface: #22262a;
  --bar-bg: #22262a;
  --popover-bg: #22262a; /* menu and list editor */
  --text: #f2f1ea;
  --text-muted: #9b9d96;
  --accent: #c9a95e;
  --accent-soft: rgba(201, 169, 94, 0.22); /* selected rows, the slide's trail */
  --accent-text: var(--accent); /* gold used as text, which needs more contrast in light */
  --bullet: var(--accent);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.24);
  --scrim: rgba(0, 0, 0, 0.55);
  --danger: #ff7b6e;
  --toast-bg: #2a2e32;
  --toast-text: #f2f1ea;
  --toast-action: #d6b96c;
  --on-accent: #1c1c1b;
  --tile-bg: #22262a;
  --tile-text: #fff;
  --warn-bg: #3a2321;
  --warn-text: #ffb4aa;
  --shadow-float: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.35);
  /* How far the add bar sits above the bottom edge: close to the home bar, not floating high */
  --bar-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5 + 10px);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #fbfbfa;
  --surface: #f0f0ee;
  --bar-bg: #f0f0ee;
  --popover-bg: #fff;
  --text: #15181a;
  --text-muted: #62666a;
  --accent: #f9dd7a; /* light yellow for fills, with ink on top */
  --accent-soft: rgba(249, 221, 122, 0.4);
  --accent-text: #8a6400; /* deep gold for text, so it reads on white */
  --bullet: #e0ad1f; /* the light yellow is too faint for a small dot */
  --line: rgba(21, 24, 26, 0.1);
  --line-strong: rgba(21, 24, 26, 0.2);
  --scrim: rgba(21, 24, 26, 0.25);
  --danger: #b3261e;
  --toast-bg: #15181a;
  --toast-text: #f2f1ea;
  --toast-action: #f9dd7a;
  --on-accent: #15181a;
  --tile-bg: #f0f0ee; /* list icon, buttons and fields: a shade darker than the page */
  --tile-text: #15181a;
  --warn-bg: #f6e3df;
  --warn-text: #7a1f16;
  --shadow-float: 0 4px 14px rgba(21, 24, 26, 0.12);
  --shadow-popover: 0 8px 24px rgba(21, 24, 26, 0.16);
  color-scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Without this, a rule like .icon-btn { display: grid } overrides the hidden attribute */
[hidden] {
  display: none !important;
}

html, body { overscroll-behavior: none; overflow: hidden; height: 100%; }

/* An app, not a page: a long press never selects words or pops up the copy menu.
   The note editor turns selection back on. */
body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The gold caret, like the mock-ups. Sketch writes in ink. */
input, [contenteditable] { caret-color: var(--accent); }
[data-style='sketch'] :is(input, [contenteditable]) { caret-color: var(--text); }
::selection { background: var(--accent-soft); }

/* The icon sprite at the top of index.html takes no space */
:root {
  accent-color: var(--accent);
}

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

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

.title-input:focus,
.title-input:focus-visible,
.search-input:focus,
.search-input:focus-visible {
  outline: 0;
}

.sprite { position: absolute; }

#item-title, #item-body { scrollbar-width: none; }
#item-title::-webkit-scrollbar, #item-body::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, sans-serif;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* The three rows: header, scrolling content, add bar */
/* Fixed to the screen, so the browser can't pan it when the keyboard opens.
   JavaScript shrinks it to the space above the keyboard (fitViewport). */
#app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 560px;
    margin: 0 auto;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px 16px; /* tucked up under the camera, like the mock-ups */
  min-height: 58px;
}

h1, h2 {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The icon and name of the current list. Neighbouring lists fade through it while you swipe. */
.whos {
  flex: 1;
  min-width: 0;
  display: grid;
}

.who {
  grid-area: 1 / 1;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

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

.header h1 {
  color: var(--text);
}

.header .icon-btn {
  color: var(--text);
}

.tile {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--tile-bg);
  color: var(--tile-text);
  display: grid;
  place-items: center;
  flex: none;
}

.tile .icon {
  width: 22px;
  height: 22px;
}

.tile.small {
  width: 42px;
  height: 42px;
  border-radius: 9px;
}

.tile.small .icon {
  width: 22px;
  height: 22px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  flex: none;
}

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

/* The stage holds the current list and, while swiping, its neighbours */
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.list {
  position: absolute;
  inset: 0;
  touch-action: pan-y; /* the browser keeps vertical scrolling, we handle sideways swipes */
  overflow-y: auto;
  background: var(--bg);
  /* room to scroll the last item clear of the floating button */
  padding-bottom: calc(var(--bar-bottom) + 110px);
}

/* With the dots the strip is taller, so there is more to scroll clear of */
#app.has-dots .list {
  padding-bottom: calc(var(--bar-bottom) + 150px);
}

/* A solid strip under the add bar and the dots, so list text never shows through or around
   them. It fades in above, so rows slide out of sight rather than being cut off. */
.stage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--bar-bottom) + 56px + 14px + 20px);
  background: linear-gradient(to top, var(--bg) calc(100% - 20px), transparent);
  pointer-events: none;
  z-index: 2;
}

#app.has-dots .stage::after {
  height: calc(var(--bar-bottom) + 56px + 14px + 44px + 20px);
}

/* A throwaway copy of a neighbouring list, only there during a swipe */
.pane {
  pointer-events: none;
}

.empty {
  min-height: 100%; /* centred in the space above the add bar */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--text-muted);
}

.empty strong {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.empty > span:not(.empty-icon) {
  max-width: 280px;
  font-size: 15px;
  line-height: 1.45;
}

/* The big icon on an empty list or archive */
.empty-icon {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--surface);
  color: var(--accent-text);
}

:root[data-theme='light'] .empty-icon {
  background: var(--accent);
  color: var(--on-accent);
}

.empty-icon .icon {
  width: 42px;
  height: 42px;
  stroke-width: 1.6;
}

/* Points down at the add bar */
.empty-arrow {
  width: 28px;
  height: 40px;
  margin-top: 10px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

/* One item in the list */
.row {
  position: relative;
  isolation: isolate; /* keeps the selected row's yellow (::before) above the list, below the text */
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 20px 6px 8px;
  border-top: 0.5px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Long-press selects a row. A selected row has a gold circle and a lighter background. */
.row.selected {
  border-top-color: transparent;
  margin: 0 8px;
  padding-left: 0;
  padding-right: 12px;
}

.row.selected + .row {
  border-top-color: transparent;
}

.row.selected::before {
  content: '';
  position: absolute;
  inset: 2px 0;
  border-radius: 12px;
  background: var(--accent-soft);
  z-index: -1;
}

.row.selected .circle {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.row.selected .circle .icon {
  opacity: 1;
}

/* While rows are selected, this slide-to-archive bar replaces the add bar */
#app.selecting #add {
  display: none;
}

.selbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: var(--bar-bottom);
  height: 56px;
  border-radius: 14px;
  background: var(--bar-bg);
  overflow: hidden;
  z-index: 3;
  touch-action: none;
}

.sel-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent-soft);
  border-radius: 10px;
  pointer-events: none;
}

.sel-hint {
  position: absolute;
  left: 132px;
  right: 56px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s;
}

.sel-hint::after {
  content: '\203A\203A\203A';
  letter-spacing: -1px;
  opacity: 0.6;
}

.sel-knob {
  position: absolute;
  left: 6px;
  top: 6px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 11px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  touch-action: none;
  overflow: hidden;
}

.sel-label {
  max-width: 80px;
  opacity: 1;
  transition: max-width 0.15s, opacity 0.15s;
}

/* Being dragged, the knob shrinks to just the icon */
.selbar.dragging .sel-knob {
  gap: 0;
  padding: 0 11px;
}

.selbar.dragging .sel-label {
  max-width: 0;
  opacity: 0;
}

.selbar.dragging .sel-hint,
.selbar.dragging .sel-x {
  opacity: 0;
}

.selbar.settling .sel-knob,
.selbar.settling .sel-fill {
  transition: left 0.2s ease, width 0.2s ease;
}

.selbar.nudge .sel-knob {
  animation: nudge 0.35s ease;
}

@keyframes nudge {
  40% { transform: translateX(14px); }
}

.sel-x {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: opacity 0.15s;
}

.check {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
}

.circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.8px solid var(--text-muted);
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.circle .icon {
  display: none;
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.row.done .circle {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.row.done .circle .icon {
  display: block;
}

.row-text {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
}

.row-title {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}

.row.done .row-title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.row-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The add bar: one tappable bar along the bottom, with the gold plus inside it */
.addbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: var(--bar-bottom);
  height: 56px;
  padding: 0 6px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  background: var(--bar-bg);
  color: var(--text-muted);
  font-size: 17px;
  z-index: 3; /* above the list, below the scrim and drawer */
}

.addbar-plus {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
}

.addbar-plus .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.addbar:active .addbar-plus {
  transform: scale(0.95);
}

/* Drawer: the sheet you drag up or down to add or edit an item.
   Its height and position are set from JavaScript while you drag (setSheet),
   so there are no CSS transitions on it. .open only decides if it is visible. */
.scrim {
  position: absolute;
  inset: 0;
  touch-action: none; /* dragging the dimmed background must not pull the page to refresh */
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  z-index: 4;
}

.scrim.open {
  visibility: visible;
}

/* No grey flash behind a field or button when you press it */
.drawer,
.drawer * {
  -webkit-tap-highlight-color: transparent;
}

.drawer {
  --full: 0; /* 0 = small sheet, 1 = full page. Set from JavaScript. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 250px;
  display: flex;
  flex-direction: column;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 10px);
  padding-top: calc(env(safe-area-inset-top, 0px) * var(--full));
  background: var(--bg);
  border-top: 0.5px solid var(--line-strong);
  border-radius: calc(18px * (1 - var(--full))) calc(18px * (1 - var(--full))) 0 0;
  visibility: hidden;
  touch-action: none; /* only the description scrolls, see #item-body */
  z-index: 5;
}

.drawer.open {
  visibility: visible;
}

/* While it slides away, touches go to the app underneath */
.drawer.closing,
.scrim.closing {
  pointer-events: none;
}

/* With the keyboard up there is no home bar to clear */
.drawer.kb {
  padding-bottom: 10px;
}

.grab {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0;
  flex: none;
  touch-action: none; /* we handle the drag, the browser shouldn't scroll */
  user-select: none;
  -webkit-user-select: none;
}

.grab span {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 14px auto 0;
}

.drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  flex: none;
  touch-action: none; /* part of the drag zone */
}

.drawer-actions {
  display: flex;
  align-items: center;
  margin-right: -8px; /* the glyphs line up with the screen's right margin */
}

#item-title,
#item-body {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  border-radius: 0;
  resize: none;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

#item-title {
  flex: none;
  min-width: 0;
  font-size: 24px; /* the note's title is its H1, above the H2 and H3 headings */
  font-weight: 700;
  line-height: 1.3;
  padding: 2px 0 14px; /* room between the heading and the description */
}

#item-body {
  flex: 1;
  min-height: 48px;
  font-size: 16px;
  line-height: 1.5;
  overflow-y: auto;
  padding-bottom: 12px;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* With the formatting bar showing there has to be room under the last line */
.drawer.show-meta #item-body {
  padding-bottom: 16px;
  scroll-padding-bottom: 16px;
}

/* The blocks the editor builds: paragraph, heading, bullet, tick box */
/* Each line is a block, so the space between lines lives here: a little around every block,
   more above a heading so it starts a new section (but not at the very top of the note). */
#item-body .b {
  position: relative;
  min-height: 24px;
  padding: 3px 0;
}

#item-body .b.h {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  padding: 18px 0 4px;
}

#item-body .b.h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  padding: 12px 0 2px;
}

#item-body .b.h:first-child,
#item-body .b.h3:first-child {
  padding-top: 4px;
}

#item-body .b.li,
#item-body .b.task {
  padding-left: 30px;
}

#item-body .b.li::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 13px; /* 10px into the line, below the block's padding */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bullet);
}

#item-body .b.task::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--text-muted);
  border-radius: 6px;
}

#item-body .b.task[data-done]::before {
  background: var(--accent);
  border-color: var(--accent);
}

#item-body .b.task[data-done]::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 9px;
  width: 4px;
  height: 8px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#item-body .b.task[data-done] {
  color: var(--text-muted);
  text-decoration: line-through;
}

#item-body.is-empty .b:first-child::before {
  content: 'Add a description';
  position: absolute;
  left: 0;
  color: var(--text-muted);
  pointer-events: none;
}

/* The formatting bar: sits under the note, just above the keyboard, once the note is full size.
   It is part of the layout (not floating over the text), so the text you are typing always
   stays above it. */
.fmtbar {
  display: none;
  flex: none;
  height: 52px;
  margin-top: 6px;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
  border-radius: 14px;
  background: var(--tile-bg);
  box-shadow: var(--shadow-popover);
}

.drawer.show-meta .fmtbar {
  display: flex;
}

.fmtbar button {
  flex: 1;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border-radius: 10px;
  font-size: 18px;
}

.fmtbar button[aria-pressed='true'] {
  color: var(--accent-text);
}

.fmtbar .icon {
  width: 22px;
  height: 22px;
}

/* Highlighted text in a note, saved as ==text== */
#item-body mark {
  padding: 0 1px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--on-accent);
}

:root[data-theme='light'] #item-body mark {
  background: rgba(249, 221, 122, 0.75);
  color: inherit;
}

.fmt-h { font-weight: 600; }
.fmt-h sub { font-size: 11px; vertical-align: baseline; position: relative; top: 3px; }
.fmt-b { font-weight: 700; }
.fmt-i { font-style: italic; font-family: Georgia, serif; font-size: 20px; }

#item-title::placeholder {
  color: var(--text-muted);
}

#hint {
  flex: 1;
  min-width: 0;
  margin: 0 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hint-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 5px;
  stroke-width: 2;
}

.drawer-top.error #hint {
  color: var(--danger);
}

/* The confirm glyph: a gold plus when adding, a white tick when saved, a gold tick while
   changes are still waiting to be saved. */
#done {
  color: var(--text);
}

#done[data-state='plus'],
#done[data-state='pending'] {
  color: var(--accent-text);
}

#done .icon {
  stroke-width: 2.2;
}

#bookmark[aria-pressed='true'] {
  color: var(--text-muted);
}

#bookmark[aria-pressed='true'] .icon {
  fill: currentColor;
}

/* Story header: the created date and an optional label, only at full height */
.meta {
  display: none;
  flex: none;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
  margin: -8px 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.drawer.show-meta .meta {
  display: flex;
}

/* Toast: a short message with an optional Undo */
.toast {
  z-index: 9; /* above the full-screen pages, so Undo is never hidden */
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(var(--bar-bottom) + 68px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 0.5px solid var(--line-strong);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0s 0.2s;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s;
}

.toast button {
  font-weight: 500;
  color: var(--toast-action);
  padding: 8px 0 8px 16px;
}

/* Tapping the list name opens this: rename or pick an icon */
.listedit {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 90px);
  left: 16px;
  right: 16px;
  padding: 18px 16px 16px;
  background: var(--surface);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-popover);
  z-index: 9;
}

/* With the keyboard up, the card moves to the top so its buttons stay in sight */
#app.kb .listedit { top: calc(env(safe-area-inset-top, 0px) + 12px); }
#edit-scrim { z-index: 8; }

.listedit-title {
  font-size: 19px;
  font-weight: 700;
}

.title-input {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  outline: 0;
}

.listedit-label {
  padding: 16px 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.icon-grid button {
  aspect-ratio: 1;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--bg);
}

.icon-grid button[aria-checked='true'] {
  background: var(--accent);
  color: var(--on-accent);
}

.icon-grid .icon {
  width: 20px;
  height: 20px;
}

.listedit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.listedit-actions .setting-btn {
  min-height: 40px;
  padding: 0 18px;
  background: var(--bg);
  font-size: 15px;
  font-weight: 600;
}

.listedit-actions .setting-btn.go {
  background: var(--accent);
  color: var(--on-accent);
}

/* Three-dots menu */
.menu-scrim {
  position: absolute;
  inset: 0;
  z-index: 7; /* transparent, only there to catch outside taps */
}

.menu {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 44px);
  right: 12px;
  width: 214px;
  padding: 6px 0;
  background: var(--popover-bg);
  border: 0.5px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-popover);
  z-index: 8;
}

.menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  font-size: 16px;
}

.menu button .icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.menu {
  padding: 6px;
}

.menu button {
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 600;
}

.menu button:not(:disabled):is(:active, :focus-visible) {
  outline: 0;
  background: var(--accent-soft);
}

.menu button:not(:disabled):is(:active, :focus-visible) .icon {
  color: var(--accent-text);
}

.menu hr {
  margin: 5px 8px;
}

.menu hr {
  margin: 6px 0;
  border: 0;
  border-top: 0.5px solid var(--line-strong);
}

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

/* All lists: a full screen laid over the app */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 7;
}

.screen-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); /* room for the add bar */
}

.screen > .header .tile { margin-right: 4px; }
.screen > .header h2 { line-height: 38px; }

/* "5 lists", "3 results": the small label above a full-screen list */
.list-label {
  padding: 6px 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#all-lists .screen-body,
#search-body {
  padding-left: 16px;
  padding-right: 16px;
}

.all-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.all-row:last-child { border-bottom: 0; }

.all-row .tile.small {
  width: 36px;
  height: 36px;
}

.all-row .tile.small .icon {
  width: 22px;
  height: 22px;
}

.all-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}

.all-count {
  flex: none;
  font-size: 14px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The list you're on: a gold tile. With icons hidden, the name turns gold instead. */
.all-row.current .tile {
  background: var(--accent);
  color: var(--on-accent);
}

.no-icons .all-row.current .all-name {
  color: var(--accent-text);
}

/* Dots: which list you are on, just above the add bar. Every list has a dot on a long track;
   the window of five slides along it, and the dots grow, shrink and fade as you move. */
.dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bar-bottom) + 60px);
  height: 28px;
  overflow: hidden;
  z-index: 3;
}

.dots-track {
  display: flex;
  height: 28px;
  transition: transform 220ms ease-out;
}

.dot {
  flex: none;
  width: 13px; /* DOT_W in app.js */
  height: 28px;
  display: grid;
  place-items: center;
  transition: width 220ms ease-out;
}

.dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
  transition: width 220ms ease-out, height 220ms ease-out, background-color 220ms ease-out;
}

/* The current list: a gold pill, its slot wider by DOT_EXTRA in app.js */
.dot[aria-current='true'] {
  width: 25px;
}

.dot[aria-current='true']::before {
  width: 18px;
  background: var(--accent);
}

.dot.edge::before {
  width: 4px;
  height: 4px;
}

/* The first time they are drawn they just appear */
.dots.still .dots-track,
.dots.still .dot::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}
/* Banner: a message that stays until the problem is fixed */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 14px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  background: var(--warn-bg);
  color: var(--warn-text);
}

.banner button {
  flex: none;
  padding: 8px 4px;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
}


/* Archive screen */
.screen > .header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arch-heading {
  padding: 18px 20px 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.arch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 8px 0 20px;
  /* Clear edges, so picked rows next to each other show a gap without anything moving */
  border-block: 2px solid transparent;
  background-clip: padding-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.arch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.arch-name,
.arch-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.arch-name { font-size: 17px; }

.arch-row [data-act='restore'] {
  width: 38px;
  height: 38px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-text);
}

.arch-row [data-act='restore'] .icon {
  width: 19px;
  height: 19px;
}
.arch-sub { font-size: 13px; color: var(--text-muted); }

/* Picking rows in the archive: a circle takes the icon's place on every row (so the text
   stays put), picked rows turn yellow, and red when they are about to be deleted. */
.arch-row .circle {
  display: none;
  flex: none;
  margin: 0 10px;
}

#archive:not([data-mode='idle']) .arch-row .circle {
  display: grid;
}

#archive:not([data-mode='idle']) .arch-row .tile {
  display: none;
}

#archive:not([data-mode='idle']) .arch-row.picked [data-act='restore'],
#archive:is([data-mode='pick'], [data-mode='delete']) .arch-row [data-act='restore'] {
  visibility: hidden;
}

/* With icons off there is no icon to swap, so the circle never takes up room in idle either */
.no-icons #archive:not([data-mode='idle']) .arch-row .circle {
  margin: 0;
}

.arch-row.picked {
  margin: 0 8px;
  padding-left: 12px;
  border-radius: 14px; /* 12px, plus the clear edge */
  background-color: var(--accent-soft);
}

.arch-row.picked .circle {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.arch-row.picked .circle .icon {
  display: block;
}

#archive[data-mode='delete'] .arch-row.picked {
  background-color: color-mix(in srgb, var(--danger) 16%, transparent);
}

#archive[data-mode='delete'] .arch-row.picked .circle {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--bg);
}

#archive-body {
  padding-bottom: 12px;
}

/* The archive's bottom bar: a hint, then Restore N and Delete N, then a slide */
.archbar {
  flex: none;
  min-height: 56px;
  margin: 8px 16px var(--bar-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
}

.archbar .selbar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 1;
  display: none;
}

.archbar[data-mode='restore'] #restorebar,
.archbar[data-mode='delete'] #deletebar {
  display: block;
}

.arch-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.archbar:not([data-mode='idle']) .arch-hint {
  display: none;
}

.arch-pick {
  flex: 1;
  display: none;
  gap: 8px;
}

.archbar[data-mode='pick'] .arch-pick {
  display: flex;
}

.arch-btn {
  flex: 1;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  background: var(--bar-bg);
  font-size: 15px;
  font-weight: 600;
}

.arch-btn .icon {
  width: 19px;
  height: 19px;
  color: var(--accent-text);
}

.arch-btn.danger,
.arch-btn.danger .icon {
  color: var(--danger);
}

/* Settings: rows in rounded groups, each group under a small label */
.settings-body {
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 90px);
}

.group-label {
  padding: 18px 4px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.group {
  padding: 0 14px;
  border-radius: 12px;
  background: var(--surface);
}

.group .setting {
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
}

.group .setting:last-child {
  border-bottom: 0;
}

/* Inside a group, controls sit a shade lighter than the group */
.group :is(.seg, .setting-btn, .switch, .days) {
  background: var(--bg);
}

.group .setting-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  flex: none;
}

.settings-body .setting-note {
  padding: 8px 4px 0;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px;
}

.setting-value {
  color: var(--text-muted);
  font-size: 15px;
}

.made-by {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.setting-note {
  padding: 0 20px 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}

.setting-note:empty {
  display: none;
}

.setting-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 9px;
  background: var(--tile-bg);
  font-size: 16px;
}

.setting-btn.sure {
  background: var(--accent);
  color: var(--on-accent);
}

.setting-btn.danger {
  color: var(--danger);
}

/* A red slide, for deleting for good. Most ask twice; the second time the bar gets a red edge. */
.selbar.danger .sel-knob {
  background: var(--danger);
  color: #fff;
}

:root:not([data-theme='light']) .selbar.danger .sel-knob {
  color: var(--bg);
}

.selbar.danger .sel-fill {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

.selbar.danger.final {
  box-shadow: inset 0 0 0 2px var(--danger);
}

/* The number of days for auto clean-up, typed straight into the sentence */
.days {
  width: 72px;
  height: 36px;
  flex: none;
  padding: 0 8px;
  font-size: 16px; /* 16px or more, or phones zoom in when you tap it */
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.days::-webkit-inner-spin-button,
.days::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* A label with a short explanation under it */
.setting-label small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

/* On/off switch */
.switch {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background 0.2s;
}

.switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s, background 0.2s;
}

.switch[aria-checked='true'] {
  background: var(--accent);
  box-shadow: none;
}

.switch[aria-checked='true']::after {
  transform: translateX(20px);
  background: var(--on-accent);
}

/* Show icons off: no icon next to list names */
.no-icons .who .tile,
.no-icons .all-row .tile,
.no-icons .arch-row .tile,
.no-icons .menu button .icon {
  display: none;
}

.seg {
  display: flex;
  border-radius: 10px;
  background: var(--tile-bg);
  padding: 3px;
}

.seg button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 15px;
}

.seg button[aria-checked='true'] {
  background: var(--accent);
  color: var(--on-accent);
}

/* Search */
.search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--tile-bg);
  cursor: text;
}

.search-field .icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex: none;
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-row {
  display: block;
  width: 100%;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.search-row:last-child { border-bottom: 0; }

.search-title,
.search-snippet,
.search-where {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-title { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.search-where { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.search-snippet { font-size: 13.5px; line-height: 1.4; color: var(--text-muted); margin-top: 4px; }

.search-row mark {
  background: none;
  color: var(--accent-text);
  font-weight: 800;
}

/* In light, gold text is hard to read, so matches get a yellow wash behind ink instead */
:root[data-theme='light'] .search-row mark {
  background: rgba(249, 221, 122, 0.75);
  color: inherit;
  font-weight: inherit;
  border-radius: 3px;
}

.search-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/* "Archive this list": the list dims, and fades further as you slide */
#list.archiving {
  opacity: 0.5;
  transition: opacity 0.2s;
  pointer-events: none;
}
#list.archiving[style*="opacity"] {
  transition: none;
}


/* ---------- Sketch: a hand-drawn look. Light only, white paper, inked outlines ----------
   Caveat for anything you'd write by hand (titles, buttons, labels), Karla for reading. */
:root[data-style='sketch'] {
  --bg: #f8f8ff;
  --surface: #ffffff;
  --bar-bg: #ffffff;
  --popover-bg: #ffffff;
  --text: #2b2a26;
  --text-muted: #55585f;
  --accent: #f9dd7a;
  --accent-soft: rgba(249, 221, 122, 0.6);
  --accent-text: #2b2a26;
  --on-accent: #2b2a26;
  --bullet: #2b2a26;
  --line: #c5c8d0;
  --line-strong: #2b2a26;
  --tile-bg: #ffffff;
  --tile-text: #2b2a26;
  --toast-bg: #2b2a26;
  --ink: #2b2a26;
  --ink-line: 2px solid var(--ink);
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --wobble: 16px 12px 17px 13px / 13px 17px 12px 16px;
  --wobble-sm: 10px 8px 11px 7px / 7px 11px 8px 10px;
  --wobble-round: 52% 48% 50% 50% / 50% 52% 48% 50%;
}

[data-style='sketch'] body {
  font-family: 'Karla', system-ui, sans-serif;
}

[data-style='sketch'] :is(h1, h2, .row-title, .addbar > span:first-child, .sel-label, .sel-hint, .arch-btn, .arch-hint,
  .menu button, .all-name, .arch-name, .search-title, .setting > span:first-child, .setting-label, .setting-btn,
  .seg button, .empty strong, #item-title, .title-input, #item-body .b.h, #item-body .b.h3, .arch-heading) {
  font-family: var(--hand);
}

/* Caveat is small for its size, so the hand-written bits go up a few sizes */
[data-style='sketch'] :is(h1, h2) { font-size: 32px; font-weight: 700; color: var(--text); }
[data-style='sketch'] .row-title { font-size: 24px; font-weight: 600; line-height: 1.1; }
[data-style='sketch'] .addbar { font-size: 24px; }
[data-style='sketch'] :is(.menu button, .setting > span:first-child, .setting-label) { font-size: 22px; font-weight: 600; }
[data-style='sketch'] .setting-label small { font-family: 'Karla', system-ui, sans-serif; font-weight: 400; }
[data-style='sketch'] :is(.all-name, .arch-name, .search-title) { font-size: 23px; font-weight: 600; }
[data-style='sketch'] :is(.setting-btn, .arch-btn, .seg button, .sel-label) { font-size: 21px; font-weight: 600; }
[data-style='sketch'] :is(.sel-hint, .arch-hint) { font-size: 19px; }
[data-style='sketch'] .arch-heading { font-size: 21px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
[data-style='sketch'] .empty strong { font-size: 34px; line-height: 0.95; }
[data-style='sketch'] #item-title { font-size: 36px; line-height: 1; }
[data-style='sketch'] .title-input { font-size: 28px; }
[data-style='sketch'] #item-body .b.h { font-size: 28px; line-height: 1.1; }
[data-style='sketch'] #item-body .b.h3 { font-size: 23px; }

/* Inked outlines and wobbly corners */
[data-style='sketch'] :is(.tile, .addbar, .selbar, .menu, .listedit, .fmtbar, .setting-btn, .seg, .search-field,
  .arch-btn, .empty-icon, .toast) {
  border: var(--ink-line);
  border-radius: var(--wobble);
}

[data-style='sketch'] :is(.tile, .tile.small, .icon-grid button, .sel-knob, .sel-fill, .fmtbar button, .seg button) {
  border-radius: var(--wobble-sm);
}

[data-style='sketch'] .tile { background: var(--accent); }
[data-style='sketch'] :is(.all-row, .arch-row) .tile { background: var(--surface); }
[data-style='sketch'] .all-row.current .tile { background: var(--accent); color: var(--text); }
[data-style='sketch'] :is(.all-row, .search-row) { border-bottom: 2px dashed var(--line); }
[data-style='sketch'] :is(.all-row, .search-row):last-child { border-bottom: 0; }
[data-style='sketch'] .search-field { background: var(--popover-bg); }
[data-style='sketch'] .list-label { font-family: var(--hand); font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
[data-style='sketch'] .made-by { font-family: var(--hand); font-size: 20px; }
[data-style='sketch'] .sel-knob { border: var(--ink-line); }
[data-style='sketch'] .selbar { overflow: visible; }
[data-style='sketch'] .selbar.danger .sel-knob { color: #fff; }
[data-style='sketch'] .icon-grid button { border: 2px solid var(--line); }
[data-style='sketch'] .icon-grid button[aria-checked='true'] { border: var(--ink-line); }
[data-style='sketch'] .seg button[aria-checked='true'] { box-shadow: inset 0 0 0 2px var(--ink); }
[data-style='sketch'] .fmtbar button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--ink); }

/* Round things are drawn round, a little lopsided */
[data-style='sketch'] :is(.addbar-plus, .circle, #done) {
  border: var(--ink-line);
  border-radius: var(--wobble-round);
}

[data-style='sketch'] .row.done .circle { border-color: var(--ink); }
[data-style='sketch'] :is(.row.selected, .arch-row.picked) .circle { border-color: var(--ink); }

/* Popovers sit on a hard shadow, like paper cut-outs */
[data-style='sketch'] .menu { box-shadow: 5px 5px 0 var(--ink); }
[data-style='sketch'] .listedit { box-shadow: 6px 6px 0 var(--ink); }
[data-style='sketch'] .menu hr { border-top: 2px dashed var(--line); }

/* Dashed rules between rows */
[data-style='sketch'] .row { border-top: 2px dashed var(--line); }
[data-style='sketch'] :is(.row.selected, .row.selected + .row) { border-top-color: transparent; }
[data-style='sketch'] .row.selected::before,
[data-style='sketch'] .arch-row.picked { border-radius: 14px 11px 15px 10px / 10px 15px 11px 14px; }

/* A ticked item is crossed out with a pen line, not a font strike */
[data-style='sketch'] .row.done .row-title {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  background: linear-gradient(transparent 54%, var(--ink) 54%, var(--ink) calc(54% + 2px), transparent calc(54% + 2px));
}

/* The note sheet */
[data-style='sketch'] .drawer {
  border: var(--ink-line);
  border-width: calc(2px * (1 - var(--full))) calc(2px * (1 - var(--full))) 0; /* no frame once it fills the screen */
  border-radius: calc(20px * (1 - var(--full))) calc(16px * (1 - var(--full))) 0 0 / calc(16px * (1 - var(--full))) calc(20px * (1 - var(--full))) 0 0;
}

[data-style='sketch'] .grab span { background: var(--line); }
[data-style='sketch'] .meta { border-bottom: 2px dashed var(--line); }
[data-style='sketch'] #item-body .b.task::before { border: 2px solid var(--ink); border-radius: 5px 4px 6px 3px; }

/* A highlighter stroke across the lower half of the words */
/* :root, so it outranks the light theme's highlight */
:root[data-style='sketch'] #item-body mark {
  border-radius: 0;
  background: linear-gradient(transparent 50%, var(--accent-soft) 50%, var(--accent-soft) 94%, transparent 94%);
}

[data-style='sketch'] .search-row mark {
  background: var(--accent-soft);
  color: inherit;
}

/* Page dots are drawn in outline */
[data-style='sketch'] .dot::before { background: none; border: 1.5px solid var(--ink); opacity: 0.7; }
[data-style='sketch'] .dot[aria-current='true']::before { background: var(--ink); opacity: 1; }

[data-style='sketch'] .switch { box-shadow: inset 0 0 0 2px var(--ink); }
[data-style='sketch'] .switch::after { background: var(--ink); }
[data-style='sketch'] .days { border: 1.5px solid var(--ink); border-radius: 5px 4px 6px 3px; }
[data-style='sketch'] .seg button:disabled { opacity: 0.4; }

[data-style='sketch'] .group {
  border: var(--ink-line);
  border-radius: var(--wobble);
  background: var(--surface);
}

[data-style='sketch'] .group .setting { border-bottom: 2px dashed var(--line); }
[data-style='sketch'] .group .setting:last-child { border-bottom: 0; }
[data-style='sketch'] .group-label { font-family: var(--hand); font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
[data-style='sketch'] .group .days { border-radius: var(--wobble-sm); }

[data-style='sketch'] .listedit-title { font-family: var(--hand); font-size: 30px; line-height: 1; }
[data-style='sketch'] .title-input { border: var(--ink-line); border-radius: var(--wobble-sm); font-family: var(--hand); font-size: 25px; }
[data-style='sketch'] .listedit-label { font-family: var(--hand); font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
[data-style='sketch'] .icon-grid button { background: var(--surface); }
[data-style='sketch'] .icon-grid button[aria-checked='true'] { background: var(--accent); }
[data-style='sketch'] .listedit-actions .setting-btn { background: var(--surface); }
[data-style='sketch'] .listedit-actions .setting-btn.go { background: var(--accent); }
[data-style='sketch'] .arch-row [data-act='restore'] { border: var(--ink-line); border-radius: var(--wobble-round); background: var(--surface); color: var(--ink); }
[data-style='sketch'] .dot[aria-current='true']::before { border-radius: 4px; background: var(--accent); border-color: var(--ink); }