/* ================================================================
   Daylight — documents: side by side · file viewers · spreadsheets ·
   tables and databases · property pills · charts.
   Scoped to body.surface-daylight (see base.css): switching Daylight off
   leaves every rule here asleep. CSS only — no element is added, renamed or
   hidden that any module reads.
   ================================================================ */

body.surface-daylight {
  /* The grip between two tiles: a quiet mark on the desk, never a line. */
  --dl-handle: color-mix(in srgb, var(--text-heading) 16%, var(--app-bg));
  /* Grid hairlines: the header rule is the full hairline, cell rules a step
     softer, so a table reads as rows before it reads as a cage. */
  --dl-grid: var(--border);
  --dl-grid-soft: color-mix(in srgb, var(--border) 70%, transparent);
  /* A card raised on an INSET surface (a board column, a calendar day).
     Light: white on the inset. Dark: one step lighter than the inset — in
     the dark, up is lighter, so a tile-coloured card would read as a hole. */
  --dl-raised: var(--card-bg);
  /* A page or slide standing on the inset stage (Word, PowerPoint). */
  --dl-page-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(31, 28, 24, 0.08), 0 1px 3px rgba(31, 28, 24, 0.06);

  /* Chart series. The validated palette from style.css with slot 1 moved onto
     Daylight's one blue, so a single-series chart wears the accent. Same hue
     ORDER as every other surface (identity follows the series, not the
     theme), and both sets re-run through the data-viz validator against the
     Daylight tiles: lightness band, chroma floor, protan/deutan separation
     and the normal-vision floor all pass (light: #FFFFFF, dark: #1F1E1C).
     Three light hues sit under 3:1 on white — legal only because every chart
     ships direct labels, a legend and its source table. */
  --chart-1: #4F7FEF; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
  --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
  --chart-grid: color-mix(in srgb, var(--text-heading) 12%, transparent);
}
body.surface-daylight.theme-light {
  --chart-1: #2F63E0; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
  --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948;
}
body.surface-daylight:not(.theme-light) {
  --dl-raised: var(--bg-tertiary);
  --dl-page-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Native controls (audio, date fields, selects) follow the mode, or a dark
   page grows light-grey widgets. */
body.surface-daylight:not(.theme-light) :is(.tn-filedoc-audio, .dbv-datein, .prop-date, .dbv-select) {
  color-scheme: dark;
}

/* ================================================================
   SIDE BY SIDE (split-embeds.js) — two tiles on the desk.
   While a side is open the page stops being one tile: the main area and the
   pane each become their own tile, 12px apart (the frame's desk gap), with a
   grip between them. The tabs and the header row stay where they are and
   simply sit on the desk above both tiles, like every page header. Nothing
   here changes what the divider drags or how the editor swaps sides.
   ================================================================ */
body.surface-daylight #main:has(> #main-body > #split-pane:not(.hidden)) {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.surface-daylight #main:has(> #main-body > #split-pane:not(.hidden)) #main-views,
body.surface-daylight #split-pane {
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: var(--dl-shadow);
  /* clip, not hidden: hidden would make the tile a scroll container and
     re-anchor every sticky thing inside it (the outline, table headers). */
  overflow: clip;
}
/* On the desk, the active tab needs the tree's white chip to be seen. */
body.surface-daylight #main:has(> #main-body > #split-pane:not(.hidden)) .tab.active {
  background: var(--card-bg);
  box-shadow: var(--dl-shadow);
}
body.surface-daylight #main:has(> #main-body > #split-pane:not(.hidden)) #status-bar { border-top: 0; }

/* The gap between the tiles IS the divider — 12px of desk, the whole strip a
   drag target, a small grip centred in it. flex-basis sets the long side in
   either direction, so one rule serves side by side and stacked. */
body.surface-daylight #split-divider {
  flex: 0 0 12px;
  width: auto;
  height: auto;
  min-width: 0;
  position: relative;
  background: transparent;
  border: 0;
  transition: none;
}
body.surface-daylight #split-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 32px;
  margin: -16px 0 0 -2px;
  border-radius: 2px;
  background: var(--dl-handle);
  transition: background 0.12s ease, height 0.12s ease, margin 0.12s ease;
}
body.surface-daylight #split-divider:hover { background: transparent; }
body.surface-daylight #split-divider:hover::after { background: var(--accent); height: 48px; margin-top: -24px; }
body.surface-daylight.split-down #split-divider::after { width: 32px; height: 4px; margin: -2px 0 0 -16px; }
body.surface-daylight.split-down #split-divider:hover::after { width: 48px; height: 4px; margin: -2px 0 0 -24px; }
@media (max-width: 760px) {
  body.surface-daylight #split-divider { cursor: row-resize; }
  body.surface-daylight #split-divider::after { width: 32px; height: 4px; margin: -2px 0 0 -16px; }
  body.surface-daylight #split-divider:hover::after { width: 48px; height: 4px; margin: -2px 0 0 -24px; }
}

/* ---- The pane's quiet header: the crumb on the left (it opens the picker),
   swap · stack · close on the right, on the crumb's line. The tools stay put
   while the note scrolls; words pass under a solid chip, not a blur. ---- */
body.surface-daylight #split-tools {
  top: 22px;
  right: 14px;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--card-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.surface-daylight #split-tools .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
}
body.surface-daylight #split-tools .icon-btn:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #split-tools .icon-btn svg { width: 18px; height: 18px; }
body.surface-daylight .split-edit-btn {
  height: 30px;
  padding: 0 12px;
  margin-right: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-heading);
}
body.surface-daylight .split-edit-btn:hover { background: var(--bg-secondary); color: var(--text-heading); box-shadow: inset 0 0 0 1px var(--border); }

/* The note column: the same measure, crumb and title as the note on the
   other side (the editor swaps sides on a click, so the two columns must
   match or the words would jump). */
body.surface-daylight #split-crumb { min-height: 22px; margin: 10px 0 12px; padding-right: 132px; }
body.surface-daylight #split-switch {
  gap: 6px;
  padding: 2px 8px;
  margin-left: -8px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}
body.surface-daylight #split-switch:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #split-switch svg { opacity: 1; width: 12px; height: 12px; }
body.surface-daylight #split-doc #split-title {
  font-family: var(--font-ui);
  font-size: 36px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
@container (max-width: 460px) {
  body.surface-daylight #split-doc #split-title { font-size: 30px; }
}
body.surface-daylight .split-locked { color: var(--text-muted); font-size: 14px; }

/* A document in the pane: the crumb line is the tile's header (56px, file
   name at left, tools at right), the viewer an inset stage below it. */
body.surface-daylight #split-pane.doc-mode #split-tools { top: 12px; right: 12px; }
body.surface-daylight #split-pane.doc-mode #split-doc { padding: 0 8px 8px; }
body.surface-daylight #split-pane.doc-mode #split-crumb {
  flex: none;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0 128px 0 16px;
}
body.surface-daylight #split-pane.doc-mode #split-switch {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-heading);
}
body.surface-daylight #split-pane.doc-mode #split-switch svg { color: var(--text-muted); }
body.surface-daylight #split-pane.doc-mode #split-content { border-radius: 12px; }
body.surface-daylight .split-pdf { border-radius: 12px; background: var(--bg-secondary); }
body.surface-daylight .split-sheets { gap: 2px; margin: 0 0 8px 8px; padding: 3px; border-radius: 10px; background: var(--dl-segment); width: max-content; max-width: calc(100% - 16px); }
body.surface-daylight .split-sheets:empty { display: none; }
body.surface-daylight .split-file { padding: 4px 8px 8px; }

/* ================================================================
   FILE VIEWERS (pdf-view.js) — PDF, Word, PowerPoint, text and code,
   audio, CSV and Excel. The toolbar is the tile's header: a file tile, the
   name, the document's own tools and Download. The document stands on an
   inset stage below it, the way a slide sits on the desk in the mockups.
   ================================================================ */
body.surface-daylight #pdf-toolbar {
  flex: none;
  min-height: 56px;
  padding: 10px 12px 10px 16px;
  gap: 12px;
  border-bottom: 0;
  background: transparent;
  font-size: 13px;
  color: var(--text-muted);
}
body.surface-daylight #pdf-title {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-heading);
}
/* The file tile before the name. Drawn in CSS (an inline SVG mask would need
   a second element), one glyph per mode so it reads on both tiles. */
body.surface-daylight #pdf-title::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  vertical-align: top;
  border-radius: 8px;
  background: var(--bg-secondary) no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625D56' 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) #pdf-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3ADA4' 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");
}
/* A spreadsheet gets a grid in its tile. */
body.surface-daylight #pdf-view:has(.sheet-editor, .tn-filedoc-table) #pdf-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625D56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9.5 4.5v15'/%3E%3C/svg%3E");
}
body.surface-daylight:not(.theme-light) #pdf-view:has(.sheet-editor, .tn-filedoc-table) #pdf-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3ADA4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9.5 4.5v15'/%3E%3C/svg%3E");
}
/* Download, and the Download on a file embedded in a note: the kit's small
   secondary button. */
body.surface-daylight .tn-pdf-dl {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-heading);
}
body.surface-daylight .tn-pdf-dl:hover { background: var(--bg-secondary); color: var(--text-heading); text-decoration: none; }

/* Workbook sheets: a segmented control, the selected sheet a white chip. */
body.surface-daylight #file-sheets:not(:empty) {
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--dl-segment);
}
body.surface-daylight .tn-sheet-tab {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
body.surface-daylight .tn-sheet-tab:hover { color: var(--text-heading); }
body.surface-daylight .tn-sheet-tab.active {
  background: var(--card-bg);
  color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.12);
}
body.surface-daylight:not(.theme-light) .tn-sheet-tab.active { background: var(--bg-tertiary); box-shadow: var(--dl-shadow); }

/* The PDF: Chromium's own viewer (its dark chrome is not ours to paint),
   set into the tile as an inset stage with the tile's inner radius. */
body.surface-daylight #pdf-frame {
  width: auto;
  margin: 0 8px 8px;
  border-radius: 12px;
  background: var(--bg-secondary);
}

body.surface-daylight #file-render { padding: 8px 24px 32px; }
body.surface-daylight .tn-filedoc-note { font-size: 13px; color: var(--text-muted); }

/* Word and PowerPoint stand on the inset stage: a white page, or white
   slides, the kit's 10px corner and soft shadow. */
body.surface-daylight #file-render:has(> .tn-filedoc-doc) {
  margin: 0 8px 8px;
  padding: 32px 24px 48px;
  border-radius: 12px;
  background: var(--bg-secondary);
}
body.surface-daylight #file-render > .tn-filedoc-doc:not(.tn-deck) {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 64px 64px;
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--dl-page-shadow);
}
body.surface-daylight .tn-deck { max-width: 760px; margin: 0 auto; }
body.surface-daylight .tn-deck .tn-slide {
  margin: 0 0 20px;
  padding: 26px 32px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--dl-page-shadow);
}
body.surface-daylight .tn-deck .tn-slide-n {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight .tn-deck .tn-slide h3 {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}
body.surface-daylight .tn-deck .tn-slide-block { font-size: 15px; line-height: 1.6; color: var(--text-normal); }
body.surface-daylight .tn-deck > .tn-filedoc-note { padding: 4px 2px 0; }
/* In a note's embed or the pane there is no stage: the slides stay flat. */
body.surface-daylight :is(.embed, .split-file) .tn-deck .tn-slide { box-shadow: 0 0 0 1px var(--border); }

/* Plain text and code: an inset block, like code in a note. */
body.surface-daylight .tn-filedoc-text {
  max-width: 900px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-normal);
  font: 13px/1.65 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* Audio: the native player on the inset colour, full width of the column. */
body.surface-daylight .tn-filedoc-audio {
  display: block;
  width: 100%;
  max-width: 760px;
  height: 52px;
  margin: 16px 0;
  border-radius: 14px;
}
body.surface-daylight .tn-filedoc-audio::-webkit-media-controls-panel { background-color: var(--bg-secondary); }
body.surface-daylight .tn-filedoc-audio::-webkit-media-controls-enclosure { border-radius: 14px; }

/* CSV and Excel read-only (a note's embed, the pane, the web): the same grid
   as the editor below — ink header on the inset colour, soft cell rules. */
body.surface-daylight .tn-filedoc-table table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-normal);
}
body.surface-daylight .tn-filedoc-table :is(th, td) {
  padding: 6px 12px;
  border: 0;
  border-right: 1px solid var(--dl-grid-soft);
  border-bottom: 1px solid var(--dl-grid-soft);
}
body.surface-daylight .tn-filedoc-table tr > :last-child { border-right: 0; }
body.surface-daylight .tn-filedoc-table th {
  background: var(--bg-secondary);
  color: var(--text-heading);
  font-weight: 500;
  border-bottom-color: var(--dl-grid);
}

/* A file embedded in a note: its bar is a quiet header row. */
body.surface-daylight .tn-pdf-bar {
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-heading);
}
body.surface-daylight .tn-pdf-bar svg { width: 16px; height: 16px; color: var(--text-muted); }
body.surface-daylight .tn-pdf-bar .tn-pdf-dl { height: 28px; padding: 0 10px; }
body.surface-daylight .tn-pdf-frame { background: var(--bg-secondary); }
body.surface-daylight .embed .tn-filedoc-body { background: var(--card-bg); }

/* ================================================================
   SPREADSHEETS (sheet-editor.js) — CSV and Excel you can edit.
   Row height stays 28px: the editor virtualises rows at exactly that pitch.
   ================================================================ */
body.surface-daylight #file-render:has(> .sheet-editor) { padding: 0; }
body.surface-daylight .se-toolbar {
  gap: 4px;
  padding: 4px 12px 12px 16px;
  border-bottom: 1px solid var(--border);
}
body.surface-daylight .se-status { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
body.surface-daylight .se-status.dirty { color: var(--text-heading); }
body.surface-daylight .se-status.error { color: var(--danger); }
body.surface-daylight .se-sep { height: 20px; margin: 0 6px; background: var(--border); }
body.surface-daylight .se-note { font-size: 12px; color: var(--text-muted); }
body.surface-daylight .se-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
body.surface-daylight .se-btn:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .se-toolbar .se-quick {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}
body.surface-daylight .se-count { margin-left: 8px; font-size: 13px; color: var(--text-muted); }

body.surface-daylight .se-head {
  background: var(--card-bg);
  border-bottom: 1px solid var(--dl-grid);
  box-shadow: none;
}
body.surface-daylight .se-hcell {
  gap: 8px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-heading);
  border-right: 1px solid var(--dl-grid-soft);
}
body.surface-daylight .se-hlabel { font-size: 11px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight .se-hcell.sel { background: var(--dl-select); }
body.surface-daylight .se-hcell.filtered .se-hlabel { color: var(--accent); }
body.surface-daylight .se-hcell.se-corner { background: var(--card-bg); }
body.surface-daylight .se-gutter {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--card-bg);
  border-right: 1px solid var(--dl-grid);
  border-bottom: 1px solid var(--dl-grid-soft);
}
body.surface-daylight .se-gutter.sel {
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
  color: var(--text-heading);
  font-weight: 600;
}
body.surface-daylight .se-cell {
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-normal);
  border-right: 1px solid var(--dl-grid-soft);
  border-bottom: 1px solid var(--dl-grid-soft);
}
body.surface-daylight .se-cell.sel { background: var(--dl-select); color: var(--text-heading); }
body.surface-daylight .se-cell.anchor { box-shadow: inset 0 0 0 2px var(--accent); }
body.surface-daylight .se-cell.se-formula { color: var(--link); }
body.surface-daylight .se-input {
  padding: 0 8px;
  font-size: 13px;
  background: var(--card-bg);
  color: var(--text-heading);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body.surface-daylight .se-resize:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ================================================================
   TABLES (bases.js) — a saved query as a table of notes. The same flat
   table is reused by dataview blocks in notes (.tn-dv-table).
   ================================================================ */
body.surface-daylight #base-toolbar {
  min-height: 56px;
  padding: 10px 16px;
  gap: 12px;
  border-bottom: 0;
}
body.surface-daylight #base-toolbar #base-query {
  max-width: 380px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
}
body.surface-daylight #base-count { font-size: 13px; color: var(--text-muted); }
/* Property columns you can add: the kit's filter chips. */
body.surface-daylight #base-chips .settings-mini {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-heading);
}
body.surface-daylight #base-chips .settings-mini:hover { filter: none; background: var(--bg-secondary); }
body.surface-daylight #base-table-wrap { padding: 4px 16px 40px; }

body.surface-daylight .base-table { font-size: 14px; }
body.surface-daylight .base-table th {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--dl-grid);
  background: transparent;
}
body.surface-daylight .base-table th:hover { color: var(--text-heading); }
body.surface-daylight .base-table th.sorted { color: var(--accent); }
body.surface-daylight .base-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--dl-grid-soft);
  color: var(--text-normal);
}
body.surface-daylight .base-table tr:hover td { background: var(--dl-hover); }
body.surface-daylight .base-table .bt-name { font-weight: 500; color: var(--text-heading); }
body.surface-daylight .base-table tr:hover .bt-name { color: var(--text-heading); }
body.surface-daylight .base-table .bt-dim { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
body.surface-daylight .base-table td.bt-edit:hover { background: var(--dl-select); }
body.surface-daylight .bt-input { border-radius: 8px; padding: 3px 8px; background: var(--card-bg); }
body.surface-daylight :is(.bt-new, .dbv-new) {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  padding: 10px 14px;
  border-radius: 10px;
}
body.surface-daylight :is(.bt-new, .dbv-new):hover { background: var(--dl-hover); color: var(--accent); }
body.surface-daylight .base-locked {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 10px 14px;
}

/* A dataview table inside a note: flat like the base it borrows from, not
   the boxed card a Markdown table in prose gets. */
body.surface-daylight .markdown-body table.tn-dv-table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
body.surface-daylight .markdown-body .tn-dv-table :is(td + td, th + th) { border-left: 0; }
body.surface-daylight .markdown-body .tn-dv-table th { background: transparent; }
body.surface-daylight .markdown-body .tn-dv-table tr:last-child td { border-bottom: 1px solid var(--dl-grid-soft); }
body.surface-daylight .tn-dv-head { font-size: 13px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight .tn-dv-item { font-size: 15px; border-radius: 8px; }
body.surface-daylight .tn-dv-item:hover { background: var(--dl-hover); }

/* ================================================================
   DATABASE NOTES (database-note.js) — a note whose rows are notes.
   The bar says what it is in one quiet line: "Database · 6 notes".
   ================================================================ */
body.surface-daylight .dbv-bar { gap: 8px; padding: 0 0 10px; }
body.surface-daylight .dbv-badge { font-size: 13px; font-weight: 500; color: var(--text-heading); }
body.surface-daylight .dbv-count {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight .dbv-count::before { content: "·"; margin-right: 8px; }
body.surface-daylight .dbv-gear {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
body.surface-daylight .dbv-gear:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .dbv-empty { font-size: 13px; color: var(--text-muted); }

/* The table layout: sentence-case headers, one hairline under them, softer
   rules between rows, no columns drawn. */
body.surface-daylight .dbv-table { font-size: 14px; }
body.surface-daylight .dbv-table thead th {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--dl-grid);
}
body.surface-daylight .dbv-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dl-grid-soft);
}
body.surface-daylight .markdown-body .dbv-table tr:last-child td { border-bottom: 1px solid var(--dl-grid-soft); }
body.surface-daylight .dbv-table th.dbv-col { border-radius: 8px 8px 0 0; }
body.surface-daylight .dbv-table th.dbv-col:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .dbv-table th.dbv-col.is-over { box-shadow: inset 2px 0 0 var(--accent); }
body.surface-daylight .dbv-col-ic {
  width: 16px;
  margin-right: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}
body.surface-daylight .dbv-colinput { font-size: 13px; font-weight: 500; border-radius: 8px; padding: 3px 8px; }
body.surface-daylight .dbv-addcol { font-size: 16px; color: var(--text-muted); border-radius: 8px 8px 0 0; }
body.surface-daylight .dbv-addcol:hover { background: var(--dl-hover); color: var(--accent); }
body.surface-daylight .dbv-name { font-weight: 500; color: var(--text-heading); }
body.surface-daylight .dbv-name:hover { color: var(--accent); text-decoration: none; }
body.surface-daylight .dbv-name.is-missing { color: var(--text-muted); }
body.surface-daylight .dbv-cell { color: var(--text-normal); font-variant-numeric: tabular-nums; }
body.surface-daylight .dbv-cell:hover { background: var(--dl-hover); }
body.surface-daylight .dbv-datein {
  font-size: 14px;
  color: var(--text-normal);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
body.surface-daylight .dbv-box { accent-color: var(--accent); }
body.surface-daylight .dbv-input { font-size: 14px; border-radius: 8px; padding: 4px 8px; background: var(--card-bg); }

/* ---- Property pills — in a database, on a card and in a note's
   properties. A plain value is a round neutral chip; a status wears the
   kit's area-chip recipe: a soft fill, a 6px dot in the strong colour, the
   words always in ink. ---- */
body.surface-daylight .dbv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  margin: 1px 4px 1px 0;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
}
body.surface-daylight .dbv-chip.is-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
body.surface-daylight .dbv-chip.tone-done { background: var(--area-chemistry-fill); color: var(--text-heading); }
body.surface-daylight .dbv-chip.tone-doing { background: var(--area-physics-fill); color: var(--text-heading); }
body.surface-daylight .dbv-chip.tone-hold { background: var(--area-calculus-fill); color: var(--text-heading); }
body.surface-daylight .dbv-chip.tone-todo { background: var(--area-routine-fill); color: var(--text-heading); }
body.surface-daylight .dbv-chip.tone-done::before { background: var(--area-chemistry); }
body.surface-daylight .dbv-chip.tone-doing::before { background: var(--area-physics); }
body.surface-daylight .dbv-chip.tone-hold::before { background: var(--area-calculus); }
body.surface-daylight .dbv-chip.tone-todo::before { background: var(--area-routine); }
body.surface-daylight .prop-chip {
  gap: 4px;
  height: 22px;
  padding: 0 5px 0 9px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
body.surface-daylight .prop-chip.is-status {
  padding: 0 9px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading);
}
body.surface-daylight .prop-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  opacity: 0.6;
}
body.surface-daylight .prop-chip-x:hover { opacity: 1; background: var(--dl-hover); color: var(--danger); }
body.surface-daylight .prop-chip-add { font-size: 12px; font-weight: 500; color: var(--text-muted); border-radius: 999px; padding: 2px 8px; }
body.surface-daylight .prop-chip-add:hover { background: var(--dl-hover); color: var(--accent); }

/* ---- View settings: a floating menu in the palette's family ---- */
body.surface-daylight .dbv-pop {
  min-width: 260px;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--dl-shadow-float);
}
body.surface-daylight:not(.theme-light) .dbv-pop { background: var(--bg-secondary); }
body.surface-daylight .dbv-sec { padding: 10px 10px 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight .dbv-opt {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-normal);
}
body.surface-daylight .dbv-opt:hover { background: var(--dl-hover); }
body.surface-daylight .dbv-opt.is-on { color: var(--accent); font-weight: 500; }
body.surface-daylight .dbv-note { padding: 2px 10px 8px; font-size: 13px; color: var(--text-muted); }
/* Layout: one choice of five, so one segmented control. */
body.surface-daylight .dbv-layouts {
  gap: 2px;
  margin: 2px 6px 6px;
  padding: 3px;
  border-radius: 10px;
  background: var(--dl-segment);
}
body.surface-daylight .dbv-layout {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
body.surface-daylight .dbv-layout:hover { color: var(--text-heading); }
body.surface-daylight .dbv-layout.is-on {
  background: var(--card-bg);
  color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.12);
}
body.surface-daylight:not(.theme-light) .dbv-layout.is-on { background: var(--bg-tertiary); box-shadow: var(--dl-shadow); }
body.surface-daylight .dbv-filter { gap: 6px; padding: 2px 6px 6px; }
body.surface-daylight .dbv-select {
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 13px;
  color: var(--text-heading);
}
body.surface-daylight .dbv-filter .dbv-input { height: 32px; font-size: 13px; }

/* ================================================================
   DATABASE LAYOUTS (db-layouts.js) — board · gallery · calendar · chart.
   One card everywhere, so a row looks like the same thing wherever it is.
   ================================================================ */
body.surface-daylight .dbl-card {
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--dl-shadow);
}
body.surface-daylight .dbl-card-title { font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--text-heading); }
body.surface-daylight .dbl-card-title:hover { color: var(--accent); }
body.surface-daylight .dbl-card-row { gap: 6px; font-size: 13px; }
body.surface-daylight .dbl-card-k { color: var(--text-muted); }
body.surface-daylight .dbl-card-v { color: var(--text-normal); font-variant-numeric: tabular-nums; }
body.surface-daylight .dbl-card .dbv-chip { margin: 0; }

/* Board: columns are inset wells on the tile, cards stand in them. */
body.surface-daylight .dbl-board { gap: 12px; padding: 2px 0 12px; }
body.surface-daylight .dbl-col {
  flex: 0 0 248px;
  min-width: 248px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: var(--bg-secondary);
}
body.surface-daylight .dbl-col.is-over { background: var(--dl-select); box-shadow: inset 0 0 0 1.5px var(--accent); }
body.surface-daylight .dbl-col-head { gap: 8px; padding: 2px 6px 10px; }
body.surface-daylight .dbl-col-name { font-size: 14px; font-weight: 600; color: var(--text-heading); }
body.surface-daylight .dbl-col-count { font-size: 13px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight .dbl-col-body { gap: 8px; min-height: 40px; }
body.surface-daylight .dbl-col .dbl-card { border-radius: 12px; background: var(--dl-raised); }

/* Gallery: cards straight on the tile. */
body.surface-daylight .dbl-gallery {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 2px 0 12px;
}
body.surface-daylight .dbl-gallery .dbl-card { min-height: 104px; padding: 16px; }

/* Calendar: days are inset squares; a row is a raised chip on its day; today
   carries the accent disc the Calendar page uses. */
body.surface-daylight .dbl-cal { padding: 2px 0 8px; }
body.surface-daylight .dbl-cal-head { gap: 4px; padding-bottom: 12px; }
body.surface-daylight .dbl-cal-title {
  min-width: 150px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-heading);
}
body.surface-daylight .dbl-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
}
body.surface-daylight .dbl-cal-nav:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .dbl-cal-grid { gap: 6px; }
body.surface-daylight .dbl-cal-dow { padding-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight .dbl-cal-cell {
  min-height: 88px;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-secondary);
}
body.surface-daylight .dbl-cal-cell.is-blank { background: transparent; }
body.surface-daylight .dbl-cal-cell.is-today { box-shadow: none; }
body.surface-daylight .dbl-cal-day {
  align-self: flex-start;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
body.surface-daylight .dbl-cal-cell.is-today .dbl-cal-day { background: var(--accent); color: var(--bg-primary); }
body.surface-daylight .dbl-cal-add { top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 8px; color: var(--text-muted); }
body.surface-daylight .dbl-cal-add:hover { background: var(--dl-hover); color: var(--accent); }
body.surface-daylight .dbl-cal-item {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--dl-raised);
  box-shadow: var(--dl-shadow);
  color: var(--text-heading);
  font-size: 12px;
  font-weight: 500;
}
body.surface-daylight .dbl-cal-item:hover { filter: none; color: var(--accent); }
body.surface-daylight .dbl-cal-foot { padding-top: 10px; font-size: 13px; color: var(--text-muted); }

body.surface-daylight .dbl-chart { padding: 4px 0; }

/* ================================================================
   CHARTS (chart-block.js, charts.js) — the toolbar over a ```chart block
   and the marks' text. Chart types are the kit's filter chips (the chosen
   one in ink); the source pickers are quieter inset buttons.
   ================================================================ */
body.surface-daylight .ch-bar-ui { gap: 6px; margin-bottom: 12px; }
body.surface-daylight :is(.ch-type, .ch-pick) {
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
body.surface-daylight .ch-type {
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading);
}
body.surface-daylight .ch-type:hover { background: var(--bg-secondary); color: var(--text-heading); }
body.surface-daylight .ch-type.is-on {
  background: var(--text-heading);
  box-shadow: none;
  color: var(--card-bg);
}
body.surface-daylight .ch-pick {
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-muted);
}
body.surface-daylight .ch-pick:hover { background: var(--bg-tertiary); color: var(--text-heading); }
body.surface-daylight .ch-title { font-size: 14px; font-weight: 600; }
body.surface-daylight .ch-axis { font-size: 12px; fill: var(--text-muted); }
body.surface-daylight .ch-legend { font-size: 12px; fill: var(--text-muted); }
body.surface-daylight .ch-value { font-size: 11px; fill: var(--text-heading); }
body.surface-daylight .ch-hero { font-weight: 700; letter-spacing: -0.03em; }
body.surface-daylight .ch-note { font-size: 13px; color: var(--text-muted); }
body.surface-daylight .ch-tip {
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--dl-shadow-float);
  font-size: 13px;
}
body.surface-daylight:not(.theme-light) .ch-tip { background: var(--bg-secondary); }
body.surface-daylight .ch-tip-l { font-weight: 600; }