/* ================================================================
   Daylight — lists: the To-dos page, the Library, Study (home, session,
   statistics, the deck browser) and the Trash list in Settings.
   Scoped to body.surface-daylight, like every file in css/daylight/.

   These pages live inside the main tile (#main is already the white tile),
   so what the mockups draw as tiles on the desk becomes cards inside a tile:
   a hairline edge on white, or the warm inset (--bg-secondary). Page titles
   are 30/700 with their counts in secondary on the same baseline; controls
   use the kit's filter chips, segmented control and buttons; overdue is a
   small red phrase, never a pill.
   ================================================================ */

body.surface-daylight {
  /* Round to-do ring and the tick drawn on an accent fill. */
  --lists-ring: #BDB6AD;
  --lists-check: #FFFFFF;
  /* Quiet chart bars (forecast, "due next 14 days"). */
  --lists-bar: #D9D3CA;
  /* The selected segment of a segmented control sitting on a tile. */
  --lists-seg-on: var(--card-bg);

  /* Icons drawn as masks, so they take currentColor in both modes. */
  --lists-ic-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --lists-ic-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --lists-ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --lists-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lists-ic-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='13' height='12' rx='2'/%3E%3Cpath d='M7.5 4.5h11a2 2 0 0 1 2 2v10'/%3E%3C/svg%3E");
  --lists-ic-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 16v-5M12 16V6M17 16v-8'/%3E%3C/svg%3E");
  /* Decorative icons painted as backgrounds (inputs and selects cannot hold
     a pseudo-element); icon grey reads on both the white and the dark tile. */
  --lists-bg-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C867E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --lists-bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C867E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --lists-bg-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C867E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
}
body.surface-daylight:not(.theme-light) {
  --lists-ring: #6B665F;
  --lists-check: #161514;
  --lists-bar: #45423D;
  --lists-seg-on: color-mix(in srgb, var(--text-heading) 14%, var(--card-bg));
}

/* ================================================================
   To-dos
   ================================================================ */

body.surface-daylight #todos-view .todo-scroll { padding: 28px 40px 96px; }

/* ---- Header: title + quiet counts, then Open/Done/All and search ---- */
body.surface-daylight #todos-view .todo-head { align-items: center; gap: 12px; margin-bottom: 20px; }
body.surface-daylight #todos-view .todo-head > div:first-child {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin-right: auto; min-width: 0;
}
body.surface-daylight #todos-view .todo-title {
  font-family: var(--font-ui); font-size: 30px; line-height: 1.1; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-heading);
}
body.surface-daylight #todos-view .todo-sub { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-muted); }
/* The header count stays quiet; the rows say which ones are late. */
body.surface-daylight #todos-view .todo-sub .todo-late { color: inherit; font-weight: inherit; }

body.surface-daylight #todos-view .todo-seg {
  margin-left: 0; align-self: center;
  padding: 3px; gap: 2px; border-radius: 10px; background: var(--dl-segment);
}
body.surface-daylight #todos-view .todo-seg button {
  height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
}
body.surface-daylight #todos-view .todo-seg button:hover { color: var(--text-heading); }
body.surface-daylight #todos-view .todo-seg button.on {
  background: var(--lists-seg-on); color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.12);
}

body.surface-daylight #todos-view .todo-search {
  align-self: center; height: 36px; min-width: 220px; padding: 0 12px 0 36px;
  border: 0; border-radius: 10px;
  background: var(--card-bg) var(--lists-bg-search) no-repeat 12px center / 16px 16px;
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 14px; color: var(--text-heading);
}
body.surface-daylight #todos-view .todo-search::placeholder { color: var(--text-muted); }
body.surface-daylight #todos-view .todo-search:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---- Filters: the kit's filter chips; the grouping toggle is a button ---- */
body.surface-daylight #todos-view .todo-filters { margin: 0 0 16px; gap: 8px; }
body.surface-daylight #todos-view .todo-pill {
  height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 13px; font-weight: 500;
}
body.surface-daylight #todos-view .todo-pill:hover { background: var(--dl-hover); }
body.surface-daylight #todos-view .todo-pill.on,
body.surface-daylight #todos-view .todo-pill.on:hover {
  background: var(--text-heading); color: var(--card-bg); box-shadow: none;
}
body.surface-daylight #todos-view .todo-pill[data-group],
body.surface-daylight #todos-view .todo-pill[data-group].on {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 10px; border-radius: 10px;
  background: var(--card-bg); color: var(--text-heading);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight #todos-view .todo-pill[data-group]:hover { background: var(--dl-hover); }
body.surface-daylight #todos-view .todo-pill[data-group]::before {
  content: ''; width: 16px; height: 16px; flex: none; background: var(--text-muted);
  -webkit-mask: var(--lists-ic-note) center / contain no-repeat; mask: var(--lists-ic-note) center / contain no-repeat;
}
/* Grouped by date, the button says "By date" — it wears the calendar. */
body.surface-daylight #todos-view .todo-pill[data-group].on::before {
  -webkit-mask-image: var(--lists-ic-calendar); mask-image: var(--lists-ic-calendar);
}

/* ---- The composer: one field — plus, text, due, which note ---- */
body.surface-daylight #todos-view .todo-add {
  height: 52px; padding: 0 8px 0 14px; gap: 10px; margin-bottom: 28px;
  background: var(--card-bg); border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(31, 28, 24, 0.04);
}
body.surface-daylight #todos-view .todo-add:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
body.surface-daylight #todos-view .todo-add-box {
  width: 18px; height: 18px; border: 0; border-radius: 0; opacity: 1; background: var(--text-muted);
  -webkit-mask: var(--lists-ic-plus) center / contain no-repeat; mask: var(--lists-ic-plus) center / contain no-repeat;
}
body.surface-daylight #todos-view .todo-add-text {
  align-self: stretch; min-width: 0;
  font-size: 15px; font-weight: 500; color: var(--text-heading);
}
body.surface-daylight #todos-view .todo-add-text::placeholder { color: var(--text-muted); }
body.surface-daylight #todos-view .todo-add-text:focus-visible { outline: none; }
body.surface-daylight #todos-view .todo-add-due {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-muted);
  font-size: 13px; font-weight: 500;
}
body.surface-daylight #todos-view .todo-add-due::before {
  content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--lists-ic-calendar) center / contain no-repeat; mask: var(--lists-ic-calendar) center / contain no-repeat;
}
body.surface-daylight #todos-view .todo-add-due:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #todos-view .todo-add-due.on { background: var(--dl-select); color: var(--text-heading); }
body.surface-daylight #todos-view .todo-add-due.on::before { background: var(--accent); }
body.surface-daylight #todos-view .todo-add-target {
  -webkit-appearance: none; appearance: none;
  height: 30px; max-width: 220px; padding: 0 30px 0 32px;
  border: 0; border-radius: 999px;
  background-color: var(--bg-secondary);
  background-image: var(--lists-bg-note), var(--lists-bg-chevron);
  background-repeat: no-repeat, no-repeat;
  background-position: 12px center, right 10px center;
  background-size: 14px 14px, 14px 14px;
  color: var(--text-heading); font-size: 13px; font-weight: 500;
  text-overflow: ellipsis; white-space: nowrap;
}
body.surface-daylight #todos-view .todo-add-target:hover { background-color: var(--dl-hover); }

/* ---- Groups: sentence-case headings with a quiet count ---- */
body.surface-daylight #todos-view .todo-group { margin: 0 0 28px; }
body.surface-daylight #todos-view .todo-group-head { align-items: baseline; gap: 6px; margin: 0 0 4px; }
body.surface-daylight #todos-view .todo-group-label { font-size: 15px; font-weight: 600; color: var(--text-heading); }
body.surface-daylight #todos-view .todo-group-label:hover { color: var(--accent); }
body.surface-daylight #todos-view .todo-group-label.plain:hover,
body.surface-daylight #todos-view .todo-group.late .todo-group-label { color: var(--text-heading); }
body.surface-daylight #todos-view .todo-group-count { font-size: 15px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight #todos-view .todo-group-count::before { content: '· '; }

/* ---- Rows: round box · the to-do · its date in words · where it lives ---- */
body.surface-daylight #todos-view .todo-row {
  position: relative; align-items: flex-start; gap: 12px;
  margin: 0 -8px; padding: 11px 8px; border-radius: 10px;
}
body.surface-daylight #todos-view .todo-row:hover { background: var(--dl-hover); }
body.surface-daylight #todos-view .todo-row::after {
  content: ''; position: absolute; left: 42px; right: 8px; bottom: 0; height: 1px;
  background: var(--border); pointer-events: none;
}
body.surface-daylight #todos-view .todo-row:last-child::after,
body.surface-daylight #todos-view .todo-row:hover::after,
body.surface-daylight #todos-view .todo-row:has(+ .todo-row:hover)::after { display: none; }

body.surface-daylight #todos-view .todo-box {
  width: 20px; height: 20px; margin: 1px 0 0; flex: none;
  border: 1.5px solid var(--lists-ring); border-radius: 50%; background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
body.surface-daylight #todos-view .todo-box:hover { border-color: var(--accent); }
body.surface-daylight #todos-view .todo-box.on { background: var(--accent); border-color: var(--accent); }
body.surface-daylight #todos-view .todo-box.on::after {
  left: 5.5px; top: 2.5px; width: 4.5px; height: 8.5px;
  border: solid var(--lists-check); border-width: 0 2px 2px 0;
}

body.surface-daylight #todos-view .todo-text {
  flex: 0 1 auto; min-width: 0;
  font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text-heading);
  overflow-wrap: anywhere;
}
body.surface-daylight #todos-view .todo-text:hover { color: var(--accent); }
body.surface-daylight #todos-view .todo-row.done .todo-text {
  color: var(--text-muted); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

/* The date follows the words, the way you would say it; the note it lives
   in holds a column at the right. */
body.surface-daylight #todos-view .todo-due {
  order: 2; flex: none; margin: 0; height: 22px; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text-muted); font-size: 13px; font-weight: 500; line-height: 22px;
}
body.surface-daylight #todos-view .todo-due:hover { background: var(--dl-hover); color: var(--text-heading); }
/* Overdue: a small red phrase — no fill, no ring. */
body.surface-daylight #todos-view .todo-due.late { color: var(--danger); background: transparent; border: 0; }
body.surface-daylight #todos-view .todo-due.late:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
body.surface-daylight #todos-view .todo-due.now { color: var(--text-heading); font-weight: 500; }
body.surface-daylight #todos-view .todo-due.bad { color: var(--danger); font-weight: 600; }
body.surface-daylight #todos-view .todo-due.none { opacity: 0; }
body.surface-daylight #todos-view .todo-row:hover .todo-due.none,
body.surface-daylight #todos-view .todo-due.none:focus-visible { opacity: 1; }
body.surface-daylight #todos-view .todo-row.done .todo-due { opacity: 1; color: var(--text-muted); }

body.surface-daylight #todos-view .todo-from {
  order: 3; flex: none; display: block; margin-left: auto;
  width: 184px; max-width: 34%; height: 22px; padding: 0 6px 0 26px;
  border-radius: 6px; background: var(--lists-bg-note) no-repeat 6px center / 14px 14px;
  color: var(--text-muted); font-size: 13px; font-weight: 500; line-height: 22px; text-align: left;
}
body.surface-daylight #todos-view .todo-from:hover { background-color: var(--dl-hover); color: var(--text-heading); }

/* ---- Empty states ---- */
body.surface-daylight #todos-view .todo-empty { max-width: 460px; margin: 56px auto; padding: 0; text-align: center; }
body.surface-daylight #todos-view .todo-empty-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading); margin-bottom: 8px; }
body.surface-daylight #todos-view .todo-empty-body { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
body.surface-daylight #todos-view .todo-empty .link-btn { font-size: 14px; font-weight: 500; color: var(--accent); }

/* ================================================================
   Library
   ================================================================ */

body.surface-daylight #library-view .lib-scroll { padding: 28px 40px 96px; }

/* ---- Header: title + count, then the kind chips and sort ---- */
body.surface-daylight #library-view .lib-head { align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
body.surface-daylight #library-view .lib-title {
  align-self: baseline; font-family: var(--font-ui);
  font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--text-heading);
}
body.surface-daylight #library-view .lib-sub {
  align-self: baseline; font-size: 15px; font-weight: 500; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight #library-view .lib-kinds { margin-left: auto; gap: 6px; flex-wrap: wrap; }
body.surface-daylight #library-view .lib-kind {
  height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
body.surface-daylight #library-view .lib-kind:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #library-view .lib-kind.active,
body.surface-daylight #library-view .lib-kind.active:hover {
  background: var(--text-heading); color: var(--card-bg); box-shadow: none; font-weight: 500;
}
body.surface-daylight #library-view .lib-sort {
  margin-left: 4px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 13px; font-weight: 500;
}
body.surface-daylight #library-view .lib-sort:hover { background: var(--dl-hover); color: var(--text-heading); }

/* ---- Groups and the grid ---- */
body.surface-daylight #library-view .lib-group { margin-bottom: 36px; }
body.surface-daylight #library-view .lib-group-label {
  margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading);
}
body.surface-daylight #library-view .lib-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px;
}

/* ---- Cards: tiles with a hairline edge, title, snippet, chips ---- */
body.surface-daylight #library-view .lib-card {
  min-height: 156px; padding: 18px; gap: 8px; min-width: 0;
  border: 0; border-radius: 16px; background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.surface-daylight #library-view .lib-card:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--border), var(--dl-shadow-raised);
}
body.surface-daylight #library-view .lib-card-title {
  width: 100%; align-items: flex-start; gap: 8px;
  font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading);
  overflow-wrap: anywhere;
}
body.surface-daylight #library-view .lib-card[data-id] .lib-card-title::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--text-faint);
  -webkit-mask: var(--lists-ic-note) center / contain no-repeat; mask: var(--lists-ic-note) center / contain no-repeat;
}
body.surface-daylight #library-view .lib-card-body {
  font-size: 13px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.surface-daylight #library-view .lib-card-body:empty { display: none; }
body.surface-daylight #library-view .lib-card-chips { margin-top: auto; gap: 6px; flex-wrap: wrap; }
body.surface-daylight #library-view .lib-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
body.surface-daylight #library-view .lib-chip-due { background: var(--dl-select); color: var(--text-heading); }
/* "TODAY" on today's daily note, said in sentence case. */
body.surface-daylight #library-view .lib-when {
  display: inline-block; flex: none; margin-left: auto;
  height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--dl-select); color: var(--text-heading);
  font-size: 12px; font-weight: 500; line-height: 22px; letter-spacing: 0; text-transform: lowercase;
}
body.surface-daylight #library-view .lib-when::first-letter { text-transform: uppercase; }

/* "+ N more" and "+ New note": quiet slots, not cards. */
body.surface-daylight #library-view .lib-card.lib-new,
body.surface-daylight #library-view .lib-card.lib-more {
  align-items: center; justify-content: center;
  background: transparent; box-shadow: none; border: 1.5px dashed var(--border);
  color: var(--text-muted); font-size: 14px; font-weight: 500; transform: none;
}
body.surface-daylight #library-view .lib-card.lib-new:hover,
body.surface-daylight #library-view .lib-card.lib-more:hover {
  background: transparent; box-shadow: none; transform: none;
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* ================================================================
   Study — the home is one page: title and actions, the numbers, the
   fortnight ahead, then the decks. The session gets the whole tile.
   ================================================================ */

/* The full-width behaviour — no session, the dashboard gets the page; session
   running, the session does — is in the BASE stylesheet now, where it belongs:
   this surface worked it out first and every surface had the same problem.
   What is left here is the look. */
body.surface-daylight[data-view="studyhome"] #study-home.visible {
  display: flex; flex-direction: column; padding: 0; gap: 0;
}
body.surface-daylight[data-view="studyhome"] #study-home-left {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 28px 40px 96px; gap: 36px;
}
body.surface-daylight[data-view="study"] #study-home.visible { display: flex; padding: 0; gap: 0; }
body.surface-daylight[data-view="study"] #study-home-left { display: none; }
body.surface-daylight[data-view="study"] #study-home-main { flex: 1; }

/* ---- The dashboard grid ---- */
body.surface-daylight #study-home #study-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title stats go"
    "nums  nums  nums"
    "fore  fore  fore"
    "held  held  held";
  align-items: center;
  gap: 16px 8px;
  padding: 0; border: 0;
}
body.surface-daylight #study-home #study-dash::before {
  content: 'Study'; grid-area: title;
  font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--text-heading);
}
body.surface-daylight #study-home .sd-numbers {
  grid-area: nums; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin: 8px 0 0;
}
body.surface-daylight #study-home .sd-stat {
  align-items: flex-start; gap: 6px; padding: 20px 20px 18px;
  background: var(--bg-secondary); border: 0; border-radius: 16px; box-shadow: none;
}
body.surface-daylight #study-home .sd-n {
  font-family: var(--font-ui); font-size: 44px; line-height: 1; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text-heading); font-variant-numeric: tabular-nums;
}
body.surface-daylight #study-home .sd-l {
  display: block; font-size: 14px; font-weight: 500; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
body.surface-daylight #study-home .sd-l::first-letter { text-transform: uppercase; }

/* The next fourteen days. The bars' heights are written inline (34px at
   most), so the chart scales them up from the baseline instead. */
body.surface-daylight #study-home .sd-forecast {
  grid-area: fore; position: relative; box-sizing: border-box;
  height: 176px; margin: 0; padding: 52px 24px 40px;
  align-items: flex-end; gap: 10px;
  background: var(--bg-secondary); border: 0; border-radius: 16px; box-shadow: none;
}
body.surface-daylight #study-home .sd-forecast::before {
  content: 'Next 14 days'; position: absolute; left: 24px; top: 18px;
  font-size: 15px; font-weight: 600; color: var(--text-heading);
}
body.surface-daylight #study-home .sd-forecast::after {
  content: 'Today'; position: absolute; left: 24px; bottom: 14px;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
}
body.surface-daylight #study-home .sd-bar {
  min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--lists-bar);
  transform: scaleY(2.4); transform-origin: bottom;
}
body.surface-daylight #study-home .sd-bar.today { background: var(--accent); }

/* ---- Actions: Statistics (secondary) and Study now (primary) ---- */
body.surface-daylight #study-home #study-all-due {
  grid-area: go; width: auto; height: 36px; padding: 0 16px;
  border-radius: 10px; background: var(--text-heading); color: var(--card-bg);
  font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: none;
}
body.surface-daylight #study-home #study-all-due:hover { background: var(--text-heading); opacity: 0.9; }
/* Nothing to do is good news, not a dead button. */
body.surface-daylight #study-home #study-all-due:disabled {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px;
  background: transparent; color: var(--text-muted); opacity: 1; cursor: default;
}
body.surface-daylight #study-home #study-all-due:disabled::before {
  content: ''; width: 16px; height: 16px; background: var(--area-chemistry);
  -webkit-mask: var(--lists-ic-check) center / contain no-repeat; mask: var(--lists-ic-check) center / contain no-repeat;
}
body.surface-daylight #study-home #study-stats {
  grid-area: stats; display: inline-flex; align-items: center; gap: 8px;
  width: auto; height: 36px; margin: 0; padding: 0 14px 0 12px;
  border: 0; border-radius: 10px; background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 14px; font-weight: 500; white-space: nowrap;
}
body.surface-daylight #study-home #study-stats::before {
  content: ''; width: 16px; height: 16px; background: var(--text-muted);
  -webkit-mask: var(--lists-ic-chart) center / contain no-repeat; mask: var(--lists-ic-chart) center / contain no-repeat;
}
body.surface-daylight #study-home #study-stats:hover { background: var(--dl-hover); }
body.surface-daylight #study-home #study-dash .sd-heldback {
  grid-area: held; margin: 0; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-secondary); color: var(--text-muted);
  font-size: 14px; line-height: 1.55; text-align: left;
}

/* ---- The side column: flagged cards, suspended cards, recent sittings ----

   These arrived as three run-on sections separated by hairline rules, which is
   what they were when they lived at the bottom of a narrow rail. Beside the
   deck list on this surface they have to be what everything else on the page
   already is — a soft tile with room inside it — or the page reads as two
   designs that met in the middle. Same --bg-secondary, same 16px radius and
   borderless fill as .sd-stat and .sd-forecast above them. */
body.surface-daylight #study-home .sh-cols { gap: 32px; }
body.surface-daylight #study-home .sh-col-side { gap: 20px; }
body.surface-daylight #study-home .sh-col-side > * {
  padding: 20px 22px; border-radius: 16px; background: var(--bg-secondary);
}
body.surface-daylight #study-home .sh-col-side .panel-section-title {
  padding: 0 0 10px; font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text-heading); text-transform: none;
}
body.surface-daylight #study-home .sh-col-side .link-btn { font-size: 13px; font-weight: 500; }
body.surface-daylight #study-home :is(.flagged-row, .suspended-row, .session-row) {
  min-height: 30px; font-size: 13.5px;
}
body.surface-daylight #study-home :is(.flagged-open, .suspended-open) { font-size: 13.5px; }
body.surface-daylight #study-home :is(.flagged-row, .suspended-row, .session-row):hover {
  background: var(--dl-hover); border-radius: 8px;
}

/* ---- Decks (the page list and the browse-all modal share the rows) ---- */
body.surface-daylight #study-home #study-decks {
  background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible;
}
/* The 14px lines "Decks" up with the side column's first tile heading, which
   sits 20px inside its own padding — measured, not guessed. Two headings at
   the top of two columns reading at different heights is the detail that
   makes a deliberate layout look like an accident. */
body.surface-daylight #study-decks .deck-tree-head {
  padding: 14px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading);
}
body.surface-daylight #study-decks .deck-tree-head .icon-btn { width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); }
body.surface-daylight #study-decks .deck-tree-head .icon-btn:hover { background: var(--dl-hover); color: var(--text-heading); }

body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-row {
  min-height: 48px; padding-top: 8px; padding-bottom: 8px; padding-right: 12px; gap: 10px;
  border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--text-heading);
}
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-row:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-folder-row { font-weight: 600; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-row:not(.deck-folder-row)::before {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--text-faint);
  -webkit-mask: var(--lists-ic-cards) center / contain no-repeat; mask: var(--lists-ic-cards) center / contain no-repeat;
}
/* DAYLIGHT RE-DECLARES THE WIDTH, so enlarging the hit box in style.css alone
   did nothing on the surface everyone actually uses — the height grew and the
   width stayed at 16px. Same numbers as the base rule: 25 wide with a -5
   margin each side nets the 15px the row has always given it. */
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-caret {
  width: 25px; height: 26px; margin: -6px -5px; font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-caret:hover { color: var(--text-heading); background: var(--bg-hover); }
/* Counts are words: "12 due", "+3 new". */
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-badge {
  padding: 0; border-radius: 0; background: transparent;
  font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums;
}
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-badge.due { color: var(--text-heading); font-weight: 500; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-badge.due::after { content: ' due'; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-badge.fresh { color: var(--text-muted); font-weight: 500; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-badge.fresh::after { content: ' new'; }
/* Know-by date: a chip that says whether you are on track. */
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-deadline {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--text-heading);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-deadline::before {
  content: ''; width: 12px; height: 12px; background: currentColor; opacity: 0.8;
  -webkit-mask: var(--lists-ic-calendar) center / contain no-repeat; mask: var(--lists-ic-calendar) center / contain no-repeat;
}
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-deadline:not(.past)::after { content: ' left'; white-space: pre; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-deadline.ok { background: var(--area-chemistry-fill); }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-deadline.risk { background: var(--area-calculus-fill); color: var(--text-heading); }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-deadline.past { background: transparent; padding: 0; color: var(--danger); }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-actions { gap: 2px; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-row:focus-within .deck-actions { display: flex; }
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-actions .icon-btn {
  width: 30px; height: 30px; border-radius: 8px; color: var(--text-muted);
}
body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-actions .icon-btn:hover { background: var(--card-bg); color: var(--text-heading); }

/* Suspended cards: a quiet section under the decks. */
body.surface-daylight #study-decks .suspended-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
body.surface-daylight #study-decks .suspended-head { padding: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text-heading); }
body.surface-daylight #study-decks .suspended-open { font-size: 14px; padding: 6px 8px; border-radius: 8px; color: var(--text-normal); }
body.surface-daylight #study-decks .suspended-open:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #study-decks .link-btn { font-size: 13px; font-weight: 500; color: var(--accent); }

/* ---- No decks yet: a friendly empty state instead of zeros and a dead
   button. The page draws only what exists: the zeros, the empty chart and
   "All caught up" step aside, and the hint becomes the page. ---- */
body.surface-daylight #study-home:has(#study-decks > .panel-empty) :is(.sd-numbers, .sd-forecast, #study-all-due) { display: none; }
body.surface-daylight #study-home #study-decks > .panel-empty {
  position: relative; max-width: 560px; margin: 24px auto 0; padding: 156px 44px 44px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 76px, var(--dl-select) 0 32px, transparent 33px),
    var(--bg-secondary);
  font-size: 15px; line-height: 1.65; color: var(--text-muted); text-align: center; text-wrap: pretty;
}
body.surface-daylight #study-home #study-decks > .panel-empty::before {
  content: ''; position: absolute; left: 50%; top: 61px; width: 30px; height: 30px; margin-left: -15px;
  background: var(--accent);
  -webkit-mask: var(--lists-ic-cards) center / contain no-repeat; mask: var(--lists-ic-cards) center / contain no-repeat;
}
body.surface-daylight #study-home #study-decks > .panel-empty::after {
  content: 'Study straight from your notes'; position: absolute; left: 24px; right: 24px; top: 120px;
  font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading);
}
body.surface-daylight #study-home #study-decks > .panel-empty code {
  display: inline-block; margin: 0 1px; padding: 0 6px; border-radius: 6px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 13px; line-height: 22px;
}

/* ---- The review session: one centred column ---- */
body.surface-daylight #study-view :is(#study-head, #study-warnings, #study-foot) {
  width: min(720px, calc(100% - 80px)); margin-left: auto; margin-right: auto;
}
body.surface-daylight #study-head { padding: 24px 0 8px; gap: 8px; }
body.surface-daylight #study-deck-title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading);
}
body.surface-daylight #study-progress {
  margin-right: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted);
}
body.surface-daylight #study-view .study-pull {
  height: 30px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 13px; font-weight: 500;
}
body.surface-daylight #study-view .study-pull:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #study-exit { width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); }
body.surface-daylight #study-exit:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #study-warnings { padding: 0; }
body.surface-daylight #study-view .study-warning {
  margin: 4px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--highlight-bg); color: var(--text-heading); font-size: 13px; line-height: 1.5;
}

/* The card sits in the middle of the page with its answer controls
   right under it; the header stays up top and the key hints at the foot. */
body.surface-daylight #study-card {
  flex: 0 1 auto; min-height: 240px; margin: auto auto 0;
  width: min(720px, calc(100% - 80px)); padding: 40px 44px;
  background: var(--card-bg); border: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--border), 0 12px 32px rgba(31, 28, 24, 0.06);
  font-size: 18px;
}
body.surface-daylight:not(.theme-light) #study-card { box-shadow: inset 0 0 0 1px var(--border), 0 12px 32px rgba(0, 0, 0, 0.3); }
body.surface-daylight #study-front { font-family: var(--font-ui); font-size: 21px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; color: var(--text-heading); }
body.surface-daylight #study-back { font-family: var(--font-ui); font-size: 17px; line-height: 1.7; color: var(--text-normal); }
body.surface-daylight #study-front p,
body.surface-daylight #study-back p { margin: 0 0 8px; }
body.surface-daylight #study-back-wrap hr { margin: 22px 0; border: 0; border-top: 1.5px dashed var(--border); }
body.surface-daylight #study-card .cloze-blank { color: var(--accent); font-weight: 600; }
body.surface-daylight #study-card .cloze-reveal { background: var(--dl-select); color: var(--text-heading); border-radius: 6px; }
body.surface-daylight #study-card .study-extra { border-top: 1px solid var(--border); color: var(--text-muted); font-size: 15px; }
/* Hidden means hidden: these two had no rule of their own. */
body.surface-daylight #study-typed.hidden,
body.surface-daylight #study-verdict.hidden { display: none; }
body.surface-daylight #study-answer {
  height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 15px;
}
body.surface-daylight #study-answer::placeholder { color: var(--text-muted); }
body.surface-daylight #study-answer:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
body.surface-daylight #study-verdict { border: 0; border-radius: 10px; font-size: 14px; color: var(--text-heading); }
body.surface-daylight #study-verdict.checking,
body.surface-daylight #study-verdict.unmarked { background: var(--bg-secondary); color: var(--text-muted); }
body.surface-daylight #study-verdict.v-good { background: var(--area-chemistry-fill); color: var(--text-heading); }
body.surface-daylight #study-verdict.v-hard { background: var(--area-calculus-fill); color: var(--text-heading); }
body.surface-daylight #study-verdict.v-again { background: var(--area-projects-fill); color: var(--text-heading); }
body.surface-daylight #study-hint-text {
  border-radius: 0 10px 10px 0; background: var(--bg-secondary);
  color: var(--text-muted); font-size: 14px;
}
body.surface-daylight #study-explain,
body.surface-daylight #study-recard {
  border: 0; border-radius: 12px; background: var(--bg-secondary);
  color: var(--text-normal); font-size: 14px;
}
body.surface-daylight #study-recard .recard-lead,
body.surface-daylight #study-recard .recard-note { color: var(--text-muted); }

body.surface-daylight #study-actions { margin-bottom: auto; padding: 20px 40px 8px; gap: 8px; }
body.surface-daylight #study-reveal {
  height: 44px; padding: 0 28px; border-radius: 12px;
  background: var(--text-heading); color: var(--card-bg);
  font-size: 15px; font-weight: 500; box-shadow: none;
}
body.surface-daylight #study-reveal:hover { background: var(--text-heading); opacity: 0.9; }
body.surface-daylight #study-hintbtn {
  height: 44px; margin-left: 0; padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 15px; font-weight: 500;
}
body.surface-daylight #study-hintbtn:hover { background: var(--dl-hover); }

/* Four grades, their next intervals underneath. Good is the default
   (Space), so it is the one filled button. */
body.surface-daylight #study-grades:not(.hidden) {
  display: grid; grid-template-columns: repeat(4, minmax(92px, 132px)); gap: 10px; justify-content: center;
}
body.surface-daylight #study-grades button,
body.surface-daylight #study-cram-actions button {
  min-width: 0; height: 60px; padding: 0 12px; gap: 2px; justify-content: center;
  border: 0; border-radius: 12px; background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 15px; font-weight: 500;
  transform: none; filter: none;
}
body.surface-daylight #study-cram-actions button { height: 44px; min-width: 112px; }
body.surface-daylight #study-grades button:hover,
body.surface-daylight #study-cram-actions button:hover { background: var(--dl-hover); transform: none; filter: none; }
body.surface-daylight #study-grades button span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight #study-grades .g-again { color: var(--danger); }
body.surface-daylight #study-grades .g-again span { color: var(--text-muted); }
body.surface-daylight #study-grades .g-easy { background: var(--card-bg); color: var(--text-heading); }
body.surface-daylight #study-grades .g-easy span { color: var(--text-muted); }
body.surface-daylight #study-grades .g-good,
body.surface-daylight #study-cram-actions .accent {
  background: var(--text-heading); color: var(--card-bg); box-shadow: none;
}
body.surface-daylight #study-grades .g-good:hover,
body.surface-daylight #study-cram-actions .accent:hover { background: var(--text-heading); opacity: 0.9; }
body.surface-daylight #study-grades .g-good span { color: color-mix(in srgb, var(--card-bg) 72%, var(--text-heading)); }
body.surface-daylight #study-grades button.suggested {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}

body.surface-daylight #study-foot { padding: 8px 0 20px; }
body.surface-daylight #study-source { font-size: 13px; color: var(--text-muted); }
body.surface-daylight #study-source:hover { color: var(--accent); }
body.surface-daylight #study-hint { font-size: 12px; color: var(--text-muted); }

/* Session over (or nothing to study): a calm message with its way forward. */
body.surface-daylight #study-done { gap: 10px; padding: 0 40px; text-align: center; }
body.surface-daylight #study-done .study-done-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-heading); }
body.surface-daylight #study-done .study-done-sub { max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
body.surface-daylight #study-done .study-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
body.surface-daylight #study-done :is(.settings-mini, #study-debrief-btn) {
  height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 14px; font-weight: 500; filter: none;
}
body.surface-daylight #study-done #study-debrief-btn { margin-top: 12px; }
body.surface-daylight #study-done :is(.settings-mini, #study-debrief-btn):hover { background: var(--dl-hover); }
body.surface-daylight #study-done .settings-mini.accent { background: var(--text-heading); color: var(--card-bg); box-shadow: none; }
body.surface-daylight #study-done .settings-mini.accent:hover { background: var(--text-heading); opacity: 0.9; }
body.surface-daylight #study-done #study-debrief { font-size: 15px; line-height: 1.65; color: var(--text-normal); }

/* ---- Statistics and the deck browser: floating tiles ---- */
body.surface-daylight :is(#stats-modal-overlay, #deck-modal-overlay) { background: rgba(31, 28, 24, 0.28); }
body.surface-daylight:not(.theme-light) :is(#stats-modal-overlay, #deck-modal-overlay) { background: rgba(0, 0, 0, 0.5); }
body.surface-daylight :is(#stats-modal-box, #deck-modal-box) {
  border: 0; border-radius: 20px; background: var(--card-bg);
  box-shadow: var(--dl-shadow-float); padding: 28px 32px;
}
body.surface-daylight #stats-modal-box { width: min(880px, 94vw); }
body.surface-daylight #deck-modal-box { width: min(720px, 92vw); }
body.surface-daylight :is(#stats-modal-close, #deck-modal-close) {
  top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted);
}
body.surface-daylight :is(#stats-modal-close, #deck-modal-close):hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight :is(#stats-modal-title, #deck-modal-title) {
  margin: 0 0 16px; padding-right: 40px;
  font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--text-heading);
}
body.surface-daylight #deck-modal-title { margin-bottom: 6px; }
body.surface-daylight #deck-modal-box .settings-hint { font-size: 14px; line-height: 1.5; color: var(--text-muted); }

body.surface-daylight #stats-body .st-scope { gap: 12px; margin-bottom: 16px; }
body.surface-daylight #stats-body .st-scope label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight #stats-body #st-scope-sel {
  -webkit-appearance: none; appearance: none;
  height: 36px; max-width: 380px; padding: 0 34px 0 12px;
  border: 0; border-radius: 10px;
  background: var(--card-bg) var(--lists-bg-chevron) no-repeat right 12px center / 14px 14px;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 14px; font-weight: 500;
}
body.surface-daylight #stats-body .link-btn { font-size: 13px; font-weight: 500; color: var(--accent); }
body.surface-daylight #stats-body .st-crumbs { margin-bottom: 20px; }
body.surface-daylight #stats-body .st-crumb { padding: 2px 6px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--accent); }
body.surface-daylight #stats-body .st-crumb.cur { color: var(--text-heading); }
body.surface-daylight #stats-body .st-crumb:hover { background: var(--dl-hover); }
body.surface-daylight #stats-body .st-crumb-sep { color: var(--text-muted); }

body.surface-daylight #stats-body .st-cards { gap: 12px; margin-bottom: 28px; }
body.surface-daylight #stats-body .st-card {
  gap: 6px; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--bg-secondary);
}
body.surface-daylight #stats-body .st-card .st-n {
  font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text-heading); font-variant-numeric: tabular-nums;
}
body.surface-daylight #stats-body .st-card .st-l { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight #stats-body .st-card .st-l::first-letter { text-transform: uppercase; }
body.surface-daylight #stats-body .st-section { margin-bottom: 28px; }
body.surface-daylight #stats-body .st-h { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--text-heading); }
body.surface-daylight #stats-body .st-h .st-sub { font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* Maturity: area strongs as bar colours (bars and dots only). */
body.surface-daylight #stats-body .st-stack { height: 10px; border-radius: 5px; gap: 2px; }
body.surface-daylight #stats-body .st-mature { background: var(--area-chemistry); }
body.surface-daylight #stats-body .st-young { background: color-mix(in srgb, var(--area-chemistry) 50%, var(--card-bg)); }
body.surface-daylight #stats-body .st-learning { background: var(--area-calculus); }
body.surface-daylight #stats-body .st-new { background: var(--accent); }
body.surface-daylight #stats-body .st-susp { background: var(--area-routine); }
body.surface-daylight #stats-body .st-empty { background: var(--bg-tertiary); }
body.surface-daylight #stats-body .st-legend { gap: 16px; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
body.surface-daylight #stats-body .st-key b { color: var(--text-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
body.surface-daylight #stats-body .st-dot { width: 8px; height: 8px; border-radius: 50%; }

/* The activity heatmap: small squares in the accent, not a wall of tiles. */
body.surface-daylight #stats-body :is(.st-hm, .st-hm-months, .st-hm-key) { max-width: 468px; gap: 4px; }
body.surface-daylight #stats-body .st-hm-col { gap: 4px; }
body.surface-daylight #stats-body .st-hm-month { font-size: 11px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: visible; }
body.surface-daylight #stats-body .st-hm-cell { border-radius: 4px; background: var(--bg-tertiary); }
body.surface-daylight #stats-body .st-hm-cell.empty { background: transparent; }
body.surface-daylight #stats-body .st-hm-cell.l0 { background: var(--bg-tertiary); }
body.surface-daylight #stats-body .st-hm-cell.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--bg-tertiary)); }
body.surface-daylight #stats-body .st-hm-cell.l2 { background: color-mix(in srgb, var(--accent) 50%, var(--bg-tertiary)); }
body.surface-daylight #stats-body .st-hm-cell.l3 { background: color-mix(in srgb, var(--accent) 75%, var(--bg-tertiary)); }
body.surface-daylight #stats-body .st-hm-cell.l4 { background: var(--accent); }
body.surface-daylight #stats-body .st-hm-key { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
body.surface-daylight #stats-body .st-hm-key .st-hm-cell { width: 12px; height: 12px; border-radius: 3px; }

body.surface-daylight #stats-body .st-two { gap: 28px; }
body.surface-daylight #stats-body .st-bars { height: 56px; gap: 3px; }
body.surface-daylight #stats-body .st-bar { border-radius: 3px 3px 1px 1px; opacity: 1; }
body.surface-daylight #stats-body .st-b-rev { background: var(--accent); }
body.surface-daylight #stats-body .st-b-due { background: var(--lists-bar); }
body.surface-daylight #stats-body .st-b-today { background: var(--accent); }
body.surface-daylight #stats-body .st-ret-row { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }
body.surface-daylight #stats-body .st-ret-row b { color: var(--text-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
body.surface-daylight #stats-body .st-ret-hint { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

body.surface-daylight #stats-body .st-decks { gap: 2px; }
body.surface-daylight #stats-body .st-deck { gap: 16px; padding: 8px 10px; border-radius: 10px; }
body.surface-daylight #stats-body .st-deck:hover { background: var(--dl-hover); }
body.surface-daylight #stats-body .st-deck-name { font-size: 14px; font-weight: 500; color: var(--text-heading); }
body.surface-daylight #stats-body .st-deck-folder .st-deck-name { font-weight: 600; }
body.surface-daylight #stats-body .st-deck-count { font-size: 12px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight #stats-body .st-deck-bar { height: 6px; border-radius: 3px; background: var(--bg-tertiary); }
body.surface-daylight #stats-body .st-deck-bar i { border-radius: 3px; background: var(--area-chemistry); }
body.surface-daylight #stats-body .st-deck-nums { font-size: 13px; color: var(--text-muted); }
body.surface-daylight #stats-body .st-deck-nums b { color: var(--text-heading); font-weight: 600; }

/* ================================================================
   Trash (Settings → Trash): one row per item — name over its details,
   Restore and Delete at the right.
   ================================================================ */
body.surface-daylight #trash-list { margin: 4px 0 12px; }
body.surface-daylight #trash-list .sync-device-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  margin: 0; padding: 10px 8px 10px 12px; border: 0; border-radius: 12px; background: transparent;
  position: relative;
}
body.surface-daylight #trash-list .sync-device-row:hover { background: var(--dl-hover); }
body.surface-daylight #trash-list .sync-device-row + .sync-device-row::before {
  content: ''; position: absolute; left: 12px; right: 8px; top: 0; height: 1px; background: var(--border);
}
body.surface-daylight #trash-list .sync-device-row:hover::before,
body.surface-daylight #trash-list .sync-device-row:hover + .sync-device-row::before { display: none; }
body.surface-daylight #trash-list .sync-device-row > span:first-child {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: 14px; font-weight: 500; color: var(--text-heading); overflow-wrap: anywhere;
}
body.surface-daylight #trash-list .sync-device-row > span:first-child .settings-hint {
  /* the sub-line's margin is written inline by trash-view.js */
  margin: 0 !important; padding: 0;
  font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-muted);
}
body.surface-daylight #trash-list .settings-mini {
  height: 30px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading); font-size: 13px; font-weight: 500; filter: none;
}
body.surface-daylight #trash-list .settings-mini:hover { background: var(--dl-hover); }
body.surface-daylight #trash-list .settings-mini.danger { background: transparent; box-shadow: none; color: var(--danger); }
body.surface-daylight #trash-list .settings-mini.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
body.surface-daylight #trash-list .settings-mini:disabled { opacity: 0.6; cursor: default; }
body.surface-daylight #trash-list > .settings-hint {
  padding: 20px 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: center;
}


/* ---- What the words were read as, in Daylight's own chips ---- */
body.surface-daylight .todo-add-chip {
  background: var(--dl-select); color: var(--text-heading); height: 24px; border-radius: 999px;
}
body.surface-daylight .todo-add-chip-off { color: var(--text-muted); }
body.surface-daylight .todo-add-chip-off:hover { background: var(--dl-hover); color: var(--text-heading); }