/* day-dom base stylesheet: the web backend's native theme. Class names mirror the two
   halves of the toolkit (src/lib.rs sets them; shim.js creates them). Layout is owned by
   day-core: almost everything is absolutely positioned by set_frame, so this file styles
   surfaces and controls, never placement. */

:root {
  --day-bg: #ffffff;
  --day-fg: #1d1d1f;
  --day-fg-dim: #6e6e73;
  --day-accent: #0a66ff;
  --day-accent-fg: #ffffff;
  --day-control-bg: rgba(120, 120, 128, 0.12);
  --day-control-border: rgba(60, 60, 67, 0.24);
  --day-card-bg: rgba(255, 255, 255, 0.72);
  --day-card-border: rgba(0, 0, 0, 0.08);
  --day-sidebar-bg: #f3f2f7;
  --day-bar-bg: rgba(249, 249, 251, 0.88);
  --day-divider: rgba(60, 60, 67, 0.2);
  --day-selected-row: rgba(10, 102, 255, 0.14);
  --day-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
html.dark {
  --day-bg: #1e1e20;
  --day-fg: #f5f5f7;
  --day-fg-dim: #98989d;
  --day-accent: #3f83ff;
  --day-accent-fg: #ffffff;
  --day-control-bg: rgba(120, 120, 128, 0.24);
  --day-control-border: rgba(140, 140, 147, 0.4);
  --day-card-bg: rgba(44, 44, 46, 0.72);
  --day-card-border: rgba(255, 255, 255, 0.1);
  --day-sidebar-bg: #262628;
  --day-bar-bg: rgba(36, 36, 38, 0.88);
  --day-divider: rgba(140, 140, 147, 0.35);
  --day-selected-row: rgba(63, 131, 255, 0.3);
  --day-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--day-bg);
  color: var(--day-fg);
  -webkit-font-smoothing: antialiased;
}

/* Type sizing (docs/web.md). Day's font ramp is the Apple text-style ratios with Body = 1, and
   `--day-text-scale` is the one number that turns a ramp step into a length: `size = step × scale ×
   1rem`. day-dom emits `calc(<step>rem * var(--day-text-scale))`, so this declaration is the only
   place the size is decided; there is no second copy in Rust to drift from.

   The scale is per form factor, because a "point" means different things on a desktop and a phone:
     - Desktop (default): 0.8125 = 13/16, so one Apple point renders as one CSS pixel and Body
       lands on 13px, the size AppKit gives a desktop app, rather than the 17px phone ramp the
       web build used to show. `1rem` stays the browser's font-size preference, so a reader who
       sets a larger default (or zooms) scales the whole UI with it.
     - Touch: `html` is anchored to `-apple-system-body`, whose value is iOS Dynamic Type, so 1rem
       is the 17pt body iOS itself would use, and a scale of 1 puts every step exactly on the iOS
       ramp, growing and shrinking with the user's "Larger Text" setting. Non-Apple mobile browsers
       drop the unknown keyword and keep the fixed base (Android web has no Dynamic Type to track),
       which leaves them a comfortable 16px body. */
:root { --day-text-scale: 0.8125; }
html { font-size: 100%; }
@media (pointer: coarse) {
  html { font: -apple-system-body; }
  :root { --day-text-scale: 1; }
}

/* The control font: buttons, fields, pickers, sidebar rows, and chrome inherit this (labels
   carry their own ramp step). Body-sized, as on every native toolkit, where a button's caption and
   a label are the same system font. day-dom's measure_str() names the same expression. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  font-size: calc(1rem * var(--day-text-scale));
}

#day-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Nothing is user-selectable by default, matching every native toolkit (a label, a button's
     caption, a table cell). The `.selectable()` modifier opts an element back in (.day-selectable),
     and form controls stay selectable below. */
  -webkit-user-select: none;
  user-select: none;
}

/* The toolbar strip shares the body's flow with the root, so the root has to give up the strip's
   height. `height: 100%` alongside it means a full viewport starting 44px down, whose last 44px
   fall past the bottom of the window, and `body { overflow: hidden }` then hides them with no
   way to scroll there. On any page long enough to scroll, the end of the content is rendered,
   reachable by neither the scrollbar nor the wheel, and every page is clipped by exactly the
   strip's height. The root's ResizeObserver reports the corrected height, so day relayouts. */
:root {
  --day-toolbar-h: 44px;
}

body.day-has-toolbar #day-root {
  height: calc(100% - var(--day-toolbar-h));
}

.day-container, .day-page, .day-cell { box-sizing: border-box; }

/* A rounded, clipping surface (`.day-clip`) inside a transformed/animated ancestor (`.day-xform`)
   otherwise hits a WebKit compositing bug where the clip layer paints its sharp bounding box
   black behind the rounded content. Promoting the clip to its own layer makes WebKit apply the
   border-radius clip correctly. Scoped to the transformed subtree, so static rounded surfaces
   (cards, buttons, lists) are never promoted. */
.day-xform .day-clip { -webkit-transform: translateZ(0); transform: translateZ(0); }

.day-label {
  overflow: hidden;
  text-overflow: ellipsis;
  /* No `cursor` here: a label inherits it, so a `.cursor()` set on a decorated ancestor (the
     background container a padded, tinted label sits in) reaches the text itself rather than
     stopping at the edges. #day-root's `default` is what an undecorated label inherits. */
  /* A label's text is Day's, newlines included: a two-paragraph body has to read as two
     paragraphs here as it does on every other backend. HTML collapses a run of whitespace to one
     space, so without this the blank line between them vanished and the two ran together.
     `pre-wrap` keeps the breaks and still wraps long lines. */
  white-space: pre-wrap;
}
.day-label.placeholder { color: var(--day-fg-dim); }

/* A styled-text editor's empty-state prompt (day-piece-texteditor, docs/texteditor.md). A
   contenteditable div has no `placeholder` attribute, and it is never `:empty` (an empty
   document still holds the block the caret sits in), so the piece marks the empty state itself
   and the prompt is drawn on the first block. Not selectable, and invisible to the caret. */
[data-day-placeholder][data-day-empty] > :first-child::before {
  content: attr(data-day-placeholder);
  color: var(--day-fg-dim);
  pointer-events: none;
  position: absolute;
}

/* A styled-text editor's blocks. The browser's default paragraph margins are meant for a
   document page; in an editor they double-space every line, and a code sample worst of all.
   Day's model carries paragraph spacing (ParagraphStyle::space_before/space_after), which the
   serializer writes as explicit margins, so the default has to be nothing. */
[data-day-editor] > p, [data-day-editor] > li {
  margin: 0;
}
[data-day-editor] > li {
  list-style-position: inside;
}

/* The `.selectable()` modifier (day-dom set_selectable): opt an element's text back into
   selection, overriding the #day-root default. `text` re-enables even under an ancestor's `none`.
   Comes after .day-label so it wins on a selectable label; a text cursor signals the affordance. */
.day-selectable, .day-selectable * {
  -webkit-user-select: text;
  user-select: text;
}
.day-selectable { cursor: text; }

/* Controls ---------------------------------------------------------------- */

.day-btn {
  box-sizing: border-box;
  font: inherit;
  color: var(--day-fg);
  background: var(--day-control-bg);
  border: none;
  border-radius: 7px;
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s ease;
}
.day-btn:hover:not(:disabled) { filter: brightness(1.06); }
.day-btn:active:not(:disabled) { filter: brightness(0.92); }
.day-btn:disabled { opacity: 0.4; cursor: default; }
.day-btn.prominent { background: var(--day-accent); color: var(--day-accent-fg); }
/* An app-chosen fill, still a <button>: the :hover/:active/:disabled rules above apply to it
   unchanged, which is why the tint goes through a variable rather than inline. */
.day-btn.tinted { background: var(--day-tint); color: var(--day-tint-fg); border-color: transparent; }
.day-btn.bordered {
  background: transparent;
  border: 1px solid var(--day-control-border);
}
.day-btn.destructive { background: #e63946; color: #fff; }
/* A glyph-sized button (a stepper's − and +): no minimum width, tight insets. */
.day-btn.compact { min-width: 0; padding: 0 8px; }

.day-toggle {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 26px;
  cursor: pointer;
}
.day-toggle input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.day-toggle .day-toggle-knob {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: var(--day-control-bg);
  transition: background-color 0.18s ease;
  pointer-events: none;
}
.day-toggle .day-toggle-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.day-toggle input:checked + .day-toggle-knob { background: #34c759; }
.day-toggle input:checked + .day-toggle-knob::after { transform: translateX(18px); }
.day-toggle input:disabled + .day-toggle-knob { opacity: 0.4; }

.day-slider { accent-color: var(--day-accent); margin: 0; }

.day-field, .day-area, .day-select {
  box-sizing: border-box;
  font: inherit;
  color: var(--day-fg);
  background: var(--day-bg);
  border: 1px solid var(--day-control-border);
  border-radius: 6px;
  padding: 0 8px;
  /* Editable/interactive controls stay selectable despite the #day-root default. */
  -webkit-user-select: text;
  user-select: text;
}
.day-area { padding: 6px 8px; resize: none; }
.day-field:focus, .day-area:focus, .day-select:focus {
  outline: 2px solid var(--day-accent);
  outline-offset: -1px;
}

.day-progress {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  height: 6px;
  border-radius: 3px;
  background: var(--day-control-bg);
  accent-color: var(--day-accent);
}
.day-progress::-webkit-progress-bar { background: var(--day-control-bg); border-radius: 3px; }
.day-progress::-webkit-progress-value { background: var(--day-accent); border-radius: 3px; }

.day-spinner {
  border: 3px solid var(--day-control-bg);
  border-top-color: var(--day-accent);
  border-radius: 50%;
  animation: day-spin 0.8s linear infinite;
  box-sizing: border-box;
}
@keyframes day-spin { to { transform: rotate(360deg); } }

.day-img { object-fit: contain; }
.day-canvas { display: block; }
/* A canvas carries a tab stop so the keys can reach what it draws (docs/menus.md), but it draws
   no focus ring: it is the surface the app is for, usually focused from the moment it mounts,
   and a permanent box around the whole work area says nothing a user needs. The desktops show
   nothing there either. What has focus stays visible in the drawing itself, as a selection. */
.day-canvas:focus, .day-canvas:focus-visible { outline: none; }

.day-divider { background: var(--day-divider); }

.day-card {
  background: var(--day-card-bg);
  border: 1px solid var(--day-card-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Scrolling --------------------------------------------------------------- */

.day-scroll { overflow-x: hidden; overflow-y: auto; }
.day-scroll.horizontal { overflow-x: auto; overflow-y: hidden; }
.day-scroll-content { position: relative; }

/* Navigation -------------------------------------------------------------- */

.day-nav { overflow: hidden; }
.day-nav.split { display: flex; }
.day-nav.split .day-nav-sidebar {
  position: relative;
  width: 240px;
  flex: none;
  background: var(--day-sidebar-bg);
  border-right: 1px solid var(--day-divider);
  overflow: hidden;
}
.day-nav .day-nav-detail { position: relative; flex: 1; overflow: hidden; }
.day-nav.stack { position: relative; }
.day-nav.stack .day-nav-detail { position: absolute; inset: 0; }
.day-nav.stack .day-nav-detail.under-bar { top: 48px; }
.day-nav-backbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  box-sizing: border-box;
  background: var(--day-bar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--day-divider);
  z-index: 10;
}
.day-nav-back {
  font: calc(1.625rem * var(--day-text-scale))/1 -apple-system, sans-serif;
  color: var(--day-accent);
  background: none;
  border: none;
  padding: 0 10px 4px;
  cursor: pointer;
}
.day-nav-title { font-weight: 600; font-size: calc(1rem * var(--day-text-scale)); }

/* Tabs and rail: the rows become the chrome (docs/navigation.md). Both hold the same
   `.day-navmenu` the sidebar does, re-parented rather than rebuilt, so these rules only have to
   re-flow it; the row markup, its icons, badges and listeners are untouched. */
.day-nav.tabs { display: flex; flex-direction: column; }
.day-nav.tabs .day-nav-detail { flex: 1; min-height: 0; }
.day-nav.tabs .day-nav-tabbar {
  flex: none;
  background: var(--day-bar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--day-divider);
  /* Clear of the home indicator on a phone browser. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* The rows arrive wrapped in a NAV_PAGE whose subtree day-core has laid out absolutely, sized
   for the pane it would fill in a split. A chrome slot is the backend's furniture (the tab
   bar is sized by its rows, not the other way round), so the whole subtree returns to normal
   flow and CSS lays it out. `!important` because `set_frame` writes inline styles, which a plain
   rule cannot outrank; this is the one place where the backend overrules the engine's frames,
   and it does so because the engine has no way to know how tall a tab bar is. */
.day-nav.tabs .day-nav-tabbar > .day-page,
.day-nav.tabs .day-nav-tabbar .day-container,
.day-nav.tabs .day-nav-tabbar .day-navmenu,
.day-nav.rail .day-nav-rail > .day-page,
.day-nav.rail .day-nav-rail .day-container,
.day-nav.rail .day-nav-rail .day-navmenu {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible;
}
.day-nav.rail .day-nav-rail .day-navmenu { height: 100% !important; }
.day-nav.tabs .day-navmenu {
  display: flex;
  overflow: visible;
  padding: 4px;
}
.day-nav.tabs .day-navmenu-row {
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 4px 2px;
  font-size: calc(0.75rem * var(--day-text-scale));
  /* A tab is a touch target before it is a label. Without this an icon-free tab set collapses
     to the height of its caption, around 28px, well under the ~44px minimum every mobile
     platform's guidelines set. Scales with the text size so it stays right at large type. */
  min-height: calc(2.75rem * var(--day-text-scale));
}
/* A tab reads as selected by its tint, not by a filled pill: a full-bleed accent block across a
   fifth of the screen is a button, not a tab. */
.day-nav.tabs .day-navmenu-row.selected {
  background: none;
  color: var(--day-accent);
}

.day-nav.rail { display: flex; }
.day-nav.rail .day-nav-rail {
  flex: none;
  width: 80px;
  background: var(--day-sidebar-bg);
  border-right: 1px solid var(--day-divider);
  overflow: hidden;
}
.day-nav.rail .day-navmenu { padding: 8px 4px; }
.day-nav.rail .day-navmenu-row {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 8px 2px;
  font-size: calc(0.6875rem * var(--day-text-scale));
  min-height: calc(2.75rem * var(--day-text-scale));
}
/* Same reasoning as the tab bar: the sidebar's selected row is a full accent fill, which reads
   as a button rather than a selection once it spans a whole 80px column. */
.day-nav.rail .day-navmenu-row.selected {
  background: var(--day-control-bg);
  color: var(--day-accent);
}

/* Pages fill whichever pane they land in; day-core frames their contents. */
.day-page { position: absolute; inset: 0; overflow: hidden; }

.day-navmenu { overflow-y: auto; padding: 8px; box-sizing: border-box; }
/* Row height is set by the icon and the padding, not the caption, so both are in `em` and follow
   the control font. A desktop row lands near the 24px AppKit gives a sidebar; a touch browser,
   whose font is Dynamic Type's larger body, gets the roomier row a finger needs, with no second
   set of numbers to keep in step. */
.day-navmenu-row {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.4em 0.75em;
  border-radius: 7px;
  cursor: default;
  user-select: none;
}
.day-navmenu-row img { width: 1.25em; height: 1.25em; object-fit: contain; }
/* Sidebar icons are template images (shim.js sets the PNG as this element's mask): painted
   with currentColor, they track the row: dark on light, light on dark, white when selected. */
.day-navmenu-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
/* The trailing status glyph: the same mask treatment as the leading icon, pushed to the row's
   end. `margin-left: auto` rather than a spacer so a row without one is unchanged. */
.day-navmenu-badge {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  margin-left: auto;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.day-navmenu-row:hover { background: var(--day-control-bg); }
.day-navmenu-row.selected { background: var(--day-accent); color: var(--day-accent-fg); }
/* A section heading (docs/navigation.md): small, bold and dimmed, the group title AppKit's source
   list and GTK's list box draw. shim.js puts it between the rows, never inside one, and nothing
   that addresses rows by index counts it, so it is inert to hover, selection and the pointer.
   Inset like the row text, so the heading and the icons below it share a left edge. */
.day-navmenu-heading {
  padding: 1em 0.75em 0.3em;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--day-fg-dim);
  cursor: default;
  user-select: none;
}
.day-navmenu-heading:first-child { padding-top: 0.25em; }
/* Tabs and rails have no grouped rows, so the headings stay out of the chrome and the rows read as
   one flat set there, the grouping contract every backend follows. */
.day-nav.tabs .day-navmenu-heading,
.day-nav.rail .day-navmenu-heading { display: none; }

/* Tabs -------------------------------------------------------------------- */


/* Segmented + radio groups ------------------------------------------------ */

.day-segmented {
  display: flex;
  background: var(--day-control-bg);
  border-radius: 8px;
  padding: 2px;
  box-sizing: border-box;
}
.day-seg {
  flex: 1;
  font: inherit;
  color: var(--day-fg);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.day-seg.selected {
  background: var(--day-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-weight: 600;
}

.day-radios { display: flex; flex-direction: column; gap: 6px; }
.day-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: var(--day-fg);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
}
.day-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--day-control-border);
  box-sizing: border-box;
  flex: none;
}
.day-radio.selected .day-radio-dot {
  border: 5px solid var(--day-accent);
}

/* Lists (emulated, docs/list.md) ------------------------------------------ */

.day-scroll.day-list .day-cell { cursor: default; user-select: none; }
.day-scroll.day-list .day-cell.selected { background: var(--day-selected-row); }
.day-scroll.day-list .day-cell:not(.selected):hover { background: var(--day-control-bg); }
/* A list and a sidebar are tab stops that answer the arrow keys, so they say where the keyboard
   is: `focus-visible`, so a click that lands the focus draws nothing and only keying in does.
   Inset, because both clip their content at the edge an outline would otherwise straddle. */
.day-scroll.day-list:focus-visible, .day-navmenu:focus-visible {
  outline: 2px solid var(--day-accent);
  outline-offset: -2px;
}
/* Drag-to-reorder (docs/list.md): the shim lifts the pressed cell and slides a gap under it;
   the other cells animate their shift, the dragged one tracks the pointer directly. */
.day-list.day-reorder .day-cell { transition: transform 0.16s ease; touch-action: pan-y; }
.day-list.day-reorder .day-cell.day-drag {
  transition: none;
  position: relative;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  opacity: 0.95;
  cursor: grabbing;
}
.day-list.day-reorder.day-no-drop, .day-list.day-reorder.day-no-drop .day-cell { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .day-list.day-reorder .day-cell { transition: none; }
}

/* Dialogs (docs/dialogs.md) ----------------------------------------------- */

.day-dialog {
  min-width: 280px;
  max-width: 420px;
  border: none;
  border-radius: 12px;
  padding: 20px;
  background: var(--day-bg);
  color: var(--day-fg);
  box-shadow: var(--day-shadow);
}
.day-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.day-dialog.sheet {
  margin-bottom: 0;
  border-radius: 12px 12px 0 0;
  width: min(420px, 100vw);
}
.day-dialog-title { font-size: calc(1rem * var(--day-text-scale)); font-weight: 600; margin-bottom: 6px; }
.day-dialog-msg { color: var(--day-fg-dim); margin-bottom: 14px; }
.day-dialog .day-field { width: 100%; height: 28px; margin-bottom: 14px; }
.day-dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.day-dialog-buttons .day-btn { height: 28px; }

.day-boot-error {
  margin: 24px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.01ms !important; }
}

/* Emulated fullscreen cover (docs/cover.md): hidden until presented; occludes the page with
   the theme background unless the app sets its own color. */
.day-cover { display: none; position: fixed; inset: 0; z-index: 100; background: var(--day-bg); }
.day-cover.open { display: block; }

/* Window toolbar (docs/toolbars.md) ---------------------------------------- */
/* The web has no window chrome, so the bar is a strip docked above the app root. Day sizes the
   root from the viewport, so the strip's height comes off it (see `day-has-toolbar`). */
.day-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--day-toolbar-h);
  padding: 0 8px;
  box-sizing: border-box;
  background: var(--day-bar-bg);
  border-bottom: 1px solid var(--day-divider);
  font: inherit;
  user-select: none;
}
.day-toolbar-flex { flex: 1; }
/* One track per column of a split window (docs/toolbars.md): the sidebar's and the list's take
   their pane's width, the detail's takes the rest, and inside each the first `trailing` item
   pushes itself and everything after it to that column's own right edge. */
.day-toolbar-track {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.day-toolbar-detail { flex: 1; }
.day-toolbar-track > .trailing:first-of-type { margin-left: auto; }
.day-toolbar-track > .principal { margin: 0 auto; }
.day-toolbar-gap { width: 12px; flex: none; }
.day-toolbar-sep {
  width: 1px;
  height: 20px;
  flex: none;
  margin: 0 6px;
  background: var(--day-divider);
}
.day-toolbar-label { padding: 0 8px; opacity: 0.75; }
/* A toolbar pull-down's popup (docs/toolbars.md): anchored under its button, themed like a
   card, dismissed by an outside press or Escape. */
.day-toolbar-menu {
  position: fixed;
  min-width: 160px;
  padding: 5px 0;
  border: 1px solid var(--day-card-border);
  border-radius: 8px;
  background: var(--day-card-bg);
  /* The card background is translucent; the blur is what keeps it readable
     over whatever the popup happens to hang across (the same treatment the sheets use). */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--day-shadow);
  z-index: 1000;
}
.day-toolbar-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  cursor: default;
  white-space: nowrap;
}
.day-toolbar-menu-item:not(.header):not(.disabled):hover {
  background: var(--day-selected-row);
}
.day-toolbar-menu-item.header,
.day-toolbar-menu-item.disabled { color: var(--day-fg-dim); }
.day-toolbar-menu-item .day-toolbar-icon { width: 16px; height: 16px; }
/* The check column of a checkable row. Fixed width so a run of choices aligns on its titles
   whether or not any of them is the one in force. */
.day-toolbar-menu-check {
  width: 12px;
  flex: none;
  text-align: center;
}
.day-toolbar-menu-sep {
  height: 1px;
  margin: 4px 10px;
  background: var(--day-divider);
}
.day-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.day-toolbar-btn:hover:not(:disabled) { background: var(--day-control-bg); }
.day-toolbar-btn:disabled { opacity: 0.4; cursor: default; }
/* A pressed toggle reads as selected, the way a checked AppBarToggleButton does. */
.day-toolbar-btn[aria-pressed="true"] {
  background: var(--day-accent);
  color: var(--day-accent-fg);
}
/* Template rendering, as the nav rows do: the icon is a mask painted with currentColor, so it
   follows the button's text color in both schemes and while pressed. */
.day-toolbar-icon {
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.day-toolbar-search {
  height: 28px;
  min-width: 180px;
  padding: 0 10px;
  border: 1px solid var(--day-divider);
  border-radius: 6px;
  background: var(--day-bg);
  color: inherit;
  font: inherit;
}
/* The sidebar toggle hides the split's sidebar pane rather than dispatching an app action. */
.day-nav.split.day-sidebar-hidden .day-nav-sidebar { display: none; }