/* ================================================================
   Daylight — base: tokens, type, quiet labels, shared controls.
   The redesign's "Final look" (light + dark). EVERY rule in css/daylight/
   is scoped to body.surface-daylight, so every other surface and theme is
   untouched and switching Daylight off restores the app exactly.

   Colours come from the theme (themes.js: daylight / daylight-dark), read
   through the app's own variables (--app-bg, --card-bg, --text-*, --accent…),
   so Daylight works in light and dark — and under any other theme too.
   ================================================================ */

/* Shown only on Daylight (daylight-dom.js). Author display rules on .icon-btn
   would otherwise beat the UA's [hidden]. */
body.surface-daylight #hdr-more[hidden] { display: none !important; }

body.surface-daylight {
  /* Shape — the kit: tiles 20 · cards 14 · controls 10 · chips round. These
     are the variables style.css already builds everything from. */
  --radius-panel: 20px;
  --radius-card: 14px;
  --radius-active: 10px;
  --panel-blur: 0px;

  --dl-shadow: 0 1px 2px rgba(31, 28, 24, 0.06), 0 0 0 1px rgba(31, 28, 24, 0.03);
  --dl-shadow-raised: 0 2px 10px rgba(31, 28, 24, 0.08), 0 0 0 1px rgba(31, 28, 24, 0.04);
  --dl-shadow-float: 0 24px 60px rgba(31, 28, 24, 0.18), 0 2px 8px rgba(31, 28, 24, 0.08);
  --dl-hover: color-mix(in srgb, var(--text-heading) 6%, transparent);
  --dl-select: color-mix(in srgb, var(--accent) 12%, transparent);
  --dl-segment: color-mix(in srgb, var(--text-heading) 8%, var(--app-bg));
  --dl-now: var(--danger);

  /* Areas — colour says WHERE something belongs and nothing else. Fill =
     a soft surface (text on it stays ink); strong = icons, dots, rings, bars. */
  --area-physics-fill: #E1EEFB;   --area-physics: #2F6FB5;
  --area-chemistry-fill: #DDF3E7; --area-chemistry: #1E7F53;
  --area-calculus-fill: #FFF1CC;  --area-calculus: #A77A00;
  --area-projects-fill: #FFE1D8;  --area-projects: #C4502F;
  --area-personal-fill: #ECE6FB;  --area-personal: #6A4FC0;
  --area-routine-fill: #EFEDE9;   --area-routine: #6F6A63;

  font-family: var(--font-ui);
  background: var(--app-bg);
}
body.surface-daylight:not(.theme-light) {
  --dl-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --dl-shadow-raised: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --dl-shadow-float: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --dl-hover: color-mix(in srgb, var(--text-heading) 8%, transparent);
  --dl-select: color-mix(in srgb, var(--accent) 18%, transparent);
  --area-physics-fill: #1E2B3D;   --area-physics: #8DB8F0;
  --area-chemistry-fill: #1B3327; --area-chemistry: #7FD1A6;
  --area-calculus-fill: #3A3019;  --area-calculus: #E6C25C;
  --area-projects-fill: #3D241C;  --area-projects: #F09A7E;
  --area-personal-fill: #2C2640;  --area-personal: #B7A2F2;
  --area-routine-fill: #2C2B28;   --area-routine: #B3ADA4;
}

body.surface-daylight ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- No uppercase micro-labels. Every rule in style.css that shouted in caps
   now speaks in sentence case; hierarchy comes from size and weight. ---- */
body.surface-daylight :is(
  .vault-name, .properties .prop-key, .gs-section > summary, .panel-section-title,
  .settings-nav-group, .soon-chip, .settings-page-badge, .tc-group, .settings-section,
  .sd-l, .st-scope label, .st-card .st-l, #split-switch, .base-table th,
  .embed[data-embed] .embed-head, .tn-tasks-head, .tn-dv-head, .settings-sub,
  .cv-group .cv-group-label, .cal-agenda-head, .cv-tray-head, .vn-icons-group,
  .cv-dayhead-w, .cv-month-head, .todo-group-label, .lib-group-label, .tree-group-label, .tn-deck .tn-slide-n,
  #crumb-path, .wg-title, .wg-stat-l, .ls-unit-l, .wg-pom-phase, .prop-toggle, .dbv-badge,
  .dbv-sec, .dbv-table thead th, .dbv-colinput, .dbl-col-name, .dbl-cal-dow, .prop-pop-head,
  .ask-src-label, .cards-badge, #chat-dock .chat-tray-head, #chat-full .chat-tray-head,
  #chat-dock .cp-kind, #chat-full .cp-kind, .capture-toast b, .check-group,
  #improve-menu .improve-group, #improve-modal .improve-pane-label, .nb-group, .tn-cp-label
) {
  text-transform: none;
  letter-spacing: 0;
}
body.surface-daylight :is(#editor, .editor2) [data-card-id]:not(.tn-folded)::after { text-transform: none; letter-spacing: 0; }

/* ---- Numbers are words, not code: counts, times and badges drop the
   monospace and keep even-width figures. Code stays monospace. ---- */
body.surface-daylight :is(
  .tree-count, .tree-item .tree-kind, .tag-row .tag-count, .tb-hint, #find-count, #graph-info,
  #status-bar, .palette-item .pi-hint, #set-fontsize-val, #set-stats, .sd-n, .st-deck-count,
  .st-deck-nums, .deck-badge, .deck-deadline, #study-progress, .study-done-sub,
  #study-grades button span, #study-source, #import-status, #base-count, .saved-search,
  .graph-legend-chip .lc-label, #slides-nav, .cv-tray-head, .cv-dayhead-w, .cv-gutter-head,
  .cv-hour-label, .cv-block-t, .cv-month-head, .todo-sub, .todo-group-count, .todo-due,
  .todo-add-due, .se-count, .se-hlabel, .se-gutter, .wg-row-v, .wg-big-n, .wg-stat-n, .wg-clock,
  .wg-timer, .ls-unit-v, .wg-chip span, .prop-count, .dbv-opt, .dbl-col-count, .dbl-cal-day,
  #record-pill .rp-clock, .nb-row-when, .tn-task-due, .nh-fab-n, .home-study-n
) {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
body.surface-daylight :is(.tn-due, :is(#editor, .editor2) [data-card-id]:not(.tn-folded))::after {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* ---- Keycaps: the kit's quiet key, not a coloured chip. ---- */
body.surface-daylight kbd {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  background: var(--bg-secondary);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 6px;
  padding: 3px 6px;
}

/* ---- Inputs and focus ---- */
body.surface-daylight :is(input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], input:not([type]), textarea, select) {
  font-family: var(--font-ui);
}
body.surface-daylight :is(input[type="text"], input[type="password"]) {
  background: var(--card-bg);
  border-color: var(--border);
  border-radius: 10px;
  font-size: 14px;
}
body.surface-daylight :is(input, textarea, select, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Checkboxes: the settings/filter kind stays a soft square; the ink
   check sits on the accent so it reads in both modes. ---- */
body.surface-daylight input[type="checkbox"] { border-color: #BDB6AD; border-radius: 5px; }
body.surface-daylight:not(.theme-light) input[type="checkbox"] { border-color: #6B665F; }
body.surface-daylight input[type="checkbox"]:checked::after { border-color: #FFFFFF; }
body.surface-daylight:not(.theme-light) input[type="checkbox"]:checked::after { border-color: #161514; }

/* ---- Scrollbars: thinner, warmer ---- */
body.surface-daylight ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 32%, transparent);
  background-clip: content-box;
}