/* ============================================================
   skin-daylight.css — the "Daylight" skin.
   ------------------------------------------------------------
   2026-09-29, D-20260928-09: the owner's pick from the UI
   redesign (round 3, P3 Column), with his amendments. The
   design is in ~/usr/code/ai/claude/daimond/ui_redesign_20260928/.

   Everything here is scoped to :root[data-skin="daylight"], so
   Sharp and Warm are not touched by a single rule. The tokens
   (faces, the seven-step type scale, the light fill) are in
   variables.css under the same selector; this file spends them.

   THE CALM IS TAKEN AWAY, NOT ADDED. Rules, outlines and filled
   chips are the exception here: the stage is the one raised
   sheet, the rail and the dock sit on the desk, and size, weight
   and ink do the work borders did. Where something needs to say
   "current" or "under the pointer" it takes one light fill of the
   palette's own ink (--dl-on, --dl-hover), never a line: the
   header's tabs, the selected chat and diamond, a transcript
   tile's extent on hover. The coloured tag chips keep their
   colours and lose their outlines.
   ============================================================ */

/* The three faces, Latin subsets (OFL, beside them in fonts/). Fetched only
   when something renders in them, which is only under this skin. */
@font-face {
	font-family: 'Sofia Sans Condensed';
	font-style: normal;
	font-weight: 1 1000;
	font-display: swap;
	src: url('../fonts/sofia-sans-condensed-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Sofia Sans';
	font-style: normal;
	font-weight: 1 1000;
	font-display: swap;
	src: url('../fonts/sofia-sans-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Sometype Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/sometype-mono-latin.woff2') format('woff2');
}

/* Weights by role. Light type on a dark ground reads a step heavier, so every
   weight eases back on a light-ink palette. */
:root[data-skin="daylight"] {
	--w-text:   400;
	--w-med:    520;
	--w-strong: 680;
	--w-head:   430;
	--w-title:  560;
	--w-you:    430;
	/* The smallest step (10.5px) in plain `--text-muted` fell under 4.5:1 in
	   8 of 13 palettes (sweep item 14). Mixed toward each palette's own ink,
	   so it clears the floor everywhere without a per-palette override. */
	--dl-faint: color-mix(in srgb, var(--text-muted) 72%, var(--text-primary));
}
:root[data-skin="daylight"][data-ink="light"] {
	--w-text:   375;
	--w-med:    495;
	--w-strong: 655;
	--w-head:   405;
	--w-title:  535;
	--w-you:    405;
}

/* ── V11: the scoped control reset (layout_contract.md, D-20260929-03) ─────
   123 distinct controls compute `appearance: auto` (census_*.json, ua): the
   browser draws whatever a class forgot -- line-height, letter-spacing,
   padding, border, background -- which is how an outlined select or a grey
   `.models-draft-sel` survived every per-role rule above. `:where()` carries
   ZERO specificity, so every existing class rule still wins; only a property
   NO rule sets changes here. Scoped to the skin, not the whole app, so
   Warm and Sharp's own controls are untouched. */
:where(:root[data-skin="daylight"] :is(button, input, select, textarea)) {
	font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none;
	margin: 0; padding: 0; border: 1px solid transparent; border-radius: 0; background: none;
	-webkit-appearance: none; appearance: none;
}
:root[data-skin="daylight"] input:is([type=checkbox], [type=radio], [type=range], [type=color], [type=file]) {
	-webkit-appearance: auto; appearance: auto; border: 0;
}
:root[data-skin="daylight"] select {
	background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px;
}
:where(:root[data-skin="daylight"] button) { cursor: pointer; }

/* ── Base ──────────────────────────────────────────────────── */
:root[data-skin="daylight"] body {
	font-family: var(--font);
	font-weight: var(--w-text);
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
}
/* Figures in the mono, level with the words. */
:root[data-skin="daylight"] .tile-model-chip,
:root[data-skin="daylight"] .session-box-time,
:root[data-skin="daylight"] .session-box-ctx,
:root[data-skin="daylight"] .session-box-cost,
:root[data-skin="daylight"] .tile-meter,
:root[data-skin="daylight"] .ctile-time,
:root[data-skin="daylight"] .crollup-count,
:root[data-skin="daylight"] .spend-amt,
:root[data-skin="daylight"] .files-size,
:root[data-skin="daylight"] .cmeter {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* ── Top bar and its tabs ──────────────────────────────────── */
:root[data-skin="daylight"] .topbar { min-height: var(--header-h); padding: 0 12px 0 20px; gap: 8px; }
:root[data-skin="daylight"] .brand-wordmark { height: 20px; }
:root[data-skin="daylight"] .ptag-group { gap: 2px; }
/* The group divider becomes space: three groups read by where they stand. */
:root[data-skin="daylight"] .ptag-div { background: transparent; margin: 0 8px; }
/* A tab is a word; the one on screen is a light chip. No outline, no
   underline, and no weight change, so a tab never moves its neighbours. */
:root[data-skin="daylight"] .ptag {
	font-family: var(--font);
	font-size: var(--dl-sm);
	font-weight: var(--w-text);
	letter-spacing: 0;
	padding: 6px 11px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--text-secondary);
}
:root[data-skin="daylight"] .ptag:hover { background: var(--dl-hover); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .ptag.on { background: var(--dl-on); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .ptag.on:hover { background: var(--dl-on); }
:root[data-skin="daylight"] .ptag-more { letter-spacing: 0; padding: 6px 11px; }
:root[data-skin="daylight"] .ptag:disabled:hover,
:root[data-skin="daylight"] .ptag.full:hover { border-color: transparent; }
:root[data-skin="daylight"] .icon-btn { border-radius: var(--radius); color: var(--text-secondary); }
:root[data-skin="daylight"] .icon-btn:hover { background: var(--dl-hover); }
:root[data-skin="daylight"] .update-chip { border-color: transparent; }

/* The wordmark: on a light palette Daylight letters the word in ink rather
   than in the rose, which on white read as a second accent. */
:root[data-skin="daylight"][data-ink="dark"] .brand-wordmark.wm-on-light { display: none; }
:root[data-skin="daylight"][data-ink="dark"] .brand-wordmark.wm-on-ink { display: block; }

/* ── Panels: one raised sheet, the rest on the desk ────────── */
:root[data-skin="daylight"] .ai,
:root[data-skin="daylight"] .web,
:root[data-skin="daylight"] .doc,
:root[data-skin="daylight"] .msg,
:root[data-skin="daylight"] .compose,
:root[data-skin="daylight"] .tools {
	border-color: transparent;
	border-radius: var(--radius-lg);
	box-shadow: 0 0 0 1px var(--border);
}
:root[data-skin="daylight"] .rail,
:root[data-skin="daylight"] .agents,
:root[data-skin="daylight"] .work,
:root[data-skin="daylight"] .mail,
:root[data-skin="daylight"] .spend,
:root[data-skin="daylight"] .social,
:root[data-skin="daylight"] .tracker {
	border-color: transparent;
	box-shadow: none;
}
/* On the desk they take the desk's own ground. On a phone they are drawers
   and sheets, which mobile.css makes opaque, and that stands. */
@media (min-width: 761px) {
	:root[data-skin="daylight"] .rail,
	:root[data-skin="daylight"] .agents,
	:root[data-skin="daylight"] .work,
	:root[data-skin="daylight"] .mail,
	:root[data-skin="daylight"] .spend,
	:root[data-skin="daylight"] .social,
	:root[data-skin="daylight"] .tracker { background: transparent; }
}

/* ── Heads ─────────────────────────────────────────────────── */
/* One dialog title (D-20260929-03 §8): 14px, --w-strong, --text-primary. A
   dialog's own h2, a pop's .ui-head-title and Admin's .admin-title each drew
   at a size, weight or colour of their own. */
:root[data-skin="daylight"] :is(.ui-head h2, .ui-head-title, .admin-title) { font-size: var(--dl-sm); font-weight: var(--w-strong); color: var(--text-primary); line-height: 19px; }
/* A section head is a word in the condensed face at the section size, in
   sentence case. What was an all-caps label becomes a name. */
:root[data-skin="daylight"] .railhead { padding: 16px 2px 8px 4px; gap: 4px; }
/* R1 follow-on: Model stats, Improve and Social carry the same body inset as
   every other dock panel (`--dock-inset`, variables.css) under a `.railhead`
   built for the rail's own denser 4px -- their own heading sat 6px left of
   their own body's edge. The other six dock panels' bodies already match
   the rail's 4px, so only these three are restated. Measured on 1 Oct (5.2.9): Spending, Agents
   and Trash hold the same body inset (x 1138), so they join. */
:root[data-skin="daylight"] :is(.panel.modeldash, .panel.tracker, .panel.social, .panel.spend, .panel.agents, .panel.trash) > .railhead { padding-left: var(--dock-inset); }
/* The Trash's rows: a row's own 6px padding put its kind label 4px left of the title and the note above it (x 1134 against 1138), so
   the list takes the difference and the empty note the rest of the inset. One left edge. */
:root[data-skin="daylight"] .panel.trash .trash-list { padding-inline: calc(var(--dock-inset) - 6px); }
:root[data-skin="daylight"] .panel.trash .trash-list .rail-note { padding-inline: 6px; }
/* The Workspace's head sat 7px left of the card under it (the reach and toolchain notes, x 1139 at 1440px). */
@media (min-width: 761px) {
	:root[data-skin="daylight"] .panel.work > .railhead { padding-left: 11px; }
}
:root[data-skin="daylight"] .railhead > span:first-child {
	font-family: var(--font-display);
	font-size: var(--dl-xl);
	font-weight: var(--w-head);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
}
/* U4 (D-20260929-03 varlen sweep): the heading keeps its own natural width and
   never gives it up to the button beside it -- at a very long "New …" label
   the heading was squeezed to 0px and vanished, because both it and the
   button were letting flex-shrink decide who lost the row.
   5.2.6 (D-20260929-03 head-row regression): `flex: 0 0 auto` took the
   heading out of the row's free space entirely, so every tool after it sat
   right after the heading's own width instead of the row's right edge --
   flush on 5.2.5, drifting 18-189px on 5.2.5+U4. The heading needs the row's
   free space back (`flex-grow: 1`), so the fix first tried was `flex: 1 0
   auto` (grow restored, shrink and basis left as U4 set them). Measured
   against 5.2.5 (0b5673fc) live on the French dock panel, that reintroduces
   a DIFFERENT overflow: "Statistiques des modèles" (Model stats) is 25
   characters, long enough to need to shrink, and `flex-shrink: 0` means it
   never does -- the row's tools land 29px past the panel's own right edge,
   which 5.2.5's own `flex: 1 1 0%` never did. `flex-shrink: 0` was never
   the load-bearing part of U4's fix; the heading vanished under the old
   `flex-basis: 0` (see 5cc0d093's own message, "flex-basis auto, not 0, was
   the whole bug"), and an AUTO basis alone -- with shrink put back to 1 --
   reproduces every one of U4's own passing cases (measured: the "New …"
   vlong label never squeezes "Diamonds"/"Chats" below a readable width,
   here or in the independent check's own French/German runs) while also
   matching 5.2.5 exactly on the French dock case and on every other panel,
   locale and viewport measured. The buttons beside the heading get their
   own `flex-shrink: 0` below, so of the two competing for space under a
   long label, only the heading (which has its own ellipsis) ever gives. */
:root[data-skin="daylight"] .railhead > [role="heading"] { flex: 1 1 auto; }
:root[data-skin="daylight"] .railhead > :is(.addbtn:not(.railbtn), .rail-fold) { flex-shrink: 0; }
:root[data-skin="daylight"] .rail-count { font-size: var(--dl-2xs); align-self: center; }
/* D-20260929-03 (left bars): the selected mail account/folder takes the same
   fill the selected chat and diamond use, not the base skin's generic
   accent-soft -- one drawing for "selected" across the app. */
:root[data-skin="daylight"] .mail-acct.on { background: var(--dl-on); }
:root[data-skin="daylight"] .addbtn {
	width: 30px;
	height: 30px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
}
:root[data-skin="daylight"] .addbtn:hover { background: var(--dl-hover); color: var(--text-primary); }
:root[data-skin="daylight"] .addbtn:disabled:hover, :root[data-skin="daylight"] .addbtn[aria-disabled="true"]:hover { border-color: transparent; background: transparent; }
:root[data-skin="daylight"] .addbtn[aria-pressed="true"] { background: var(--dl-on); border-color: transparent; color: var(--text-primary); }
/* A head's word button ("New diamond") is a word in the accent, not a box. */
:root[data-skin="daylight"] .railbtn {
	width: auto;
	padding: 0 8px;
	font-size: var(--dl-xs);
	font-weight: var(--w-strong);
	color: var(--accent-text);
	/* U4: with the heading no longer giving up its space, the button is what
	   shrinks at the very long test value -- so it needs its own floor, rather
	   than a cut label with no ellipsis. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Several head rows mixed control heights of their own -- Pending's select
   at 20px beside its ×'s 30px, Social's ⓘ at 22px beside its ×'s 30px, the
   file panel's 26px beside 30px, and more (sweep item 11). One height, one
   baseline, one colour and one icon size, for every control in a head row
   (D-20260929-03 §2): 30x30, radius `--radius`, `--text-secondary`, a 16px
   icon, word labels at `--dl-xs`. */
:root[data-skin="daylight"] :is(.chead-right, .railhead, .railhead-acts, .files-actions, .mail-actions, .spend-actions,
	.trash-actions, .pending-actions, .files-view-head, .top-actions, .pptw-head, .astat-id) > :is(button, select, .chip-btn, .mode-chip),
:root[data-skin="daylight"] .files-view-head > span > button,
:root[data-skin="daylight"] .pptw-head .pptw-act {
	height: 30px; min-height: 30px; box-sizing: border-box; align-self: center;
	border-color: transparent; border-radius: var(--radius); color: var(--text-secondary); font-size: var(--dl-xs);
}
:root[data-skin="daylight"] :is(.chead-right, .railhead, .railhead-acts, .files-actions, .mail-actions, .spend-actions,
	.trash-actions, .pending-actions, .files-view-head, .top-actions, .pptw-head) > button :is(svg, .ic),
:root[data-skin="daylight"] .files-view-head > span > button :is(svg, .ic),
:root[data-skin="daylight"] .pptw-head .pptw-act :is(svg, .ic) { width: 16px; height: 16px; }
/* Every icon-only head tool keeps `.icon-btn`'s own 5px/7px padding; this is
   the WORDED and select members of the row above, which need their own box
   (remaining.md cluster 5, points 2-4). */
/* R5: `#collapse-btn` and `.cfull-btn` are icon-only chip tools too, not
   worded ones -- they carry `.chip-btn`, which the group's selector did not
   reach. */
:root[data-skin="daylight"] :is(.chead-right, .top-actions, .railhead) > .icon-btn { padding: 0; width: 30px; justify-content: center; }
:root[data-skin="daylight"] :is(.panel:not(.ai) .chead-right, .top-actions, .railhead) > :is(#collapse-btn, .cfull-btn) { padding: 0; width: 30px; justify-content: center; }
/* The phone's chat head keeps 5.2.5's own box for both. */
@media (min-width: 761px) {
	:root[data-skin="daylight"] .panel.ai .chead-right > :is(#collapse-btn, .cfull-btn) { padding: 0; width: 30px; justify-content: center; }
}
:root[data-skin="daylight"] .top-actions > #settings-menu-btn { padding: 0 9px; line-height: 12px; width: auto; }
:root[data-skin="daylight"] :is(#hand-mode-chip, .chead-right > #chat-fold-btn) { padding: 0 9px; line-height: 12px; }
:root[data-skin="daylight"] #settings-menu-btn { gap: 4px; }
:root[data-skin="daylight"] #pending-sort { background: transparent; padding: 0 9px; }

/* ── The pause row ─────────────────────────────────────────── */
:root[data-skin="daylight"] .pptw { border-color: transparent; background: transparent; }
:root[data-skin="daylight"] .pptw-act { border-radius: var(--radius-sm); }
:root[data-skin="daylight"] .pptw-head-label { font-size: var(--dl-sm); color: var(--text-primary); }
:root[data-skin="daylight"] .pptw-head-state { font-size: var(--dl-xs); color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* ── Rail tiles: diamonds and chats ────────────────────────── */
:root[data-skin="daylight"] .diamond-list,
:root[data-skin="daylight"] .session-list { gap: 2px; }
:root[data-skin="daylight"] .session-box {
	padding: 7px 10px 8px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	box-shadow: none;
}
:root[data-skin="daylight"] .session-box:hover { background: var(--dl-hover); border-color: transparent; }
/* The selected chat or diamond: the same light fill as the header's chip, and
   nothing else -- no side bar, no outline. */
:root[data-skin="daylight"] .session-box.active,
:root[data-skin="daylight"] .session-box.active:hover {
	background: var(--dl-on);
	border-color: transparent;
	box-shadow: none;
}
:root[data-skin="daylight"] .session-box.active::before { content: none; }
:root[data-skin="daylight"] .session-box-name,
:root[data-skin="daylight"] .tile-label,
:root[data-skin="daylight"] .pend-line {
	font-size: var(--dl-sm);
	font-weight: var(--w-med);
	color: var(--text-primary);
}
:root[data-skin="daylight"] .session-box.active .session-box-name,
:root[data-skin="daylight"] .session-box.active .tile-label { color: var(--text-primary); font-weight: var(--w-strong); }
:root[data-skin="daylight"] .tile-when-sub { font-size: var(--dl-2xs); color: var(--text-muted); font-weight: var(--w-text); }
:root[data-skin="daylight"] .tile-preview { font-size: var(--dl-xs); color: var(--text-secondary); margin-top: 1px; }
/* Max detail is quiet type, not pills: the model is a word in the mono. */
:root[data-skin="daylight"] .tile-model-chip {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-size: var(--dl-2xs);
	color: var(--text-muted);
}
:root[data-skin="daylight"] .session-box-meta { gap: 2px 10px; margin-top: 1px; }
:root[data-skin="daylight"] .session-box-time,
:root[data-skin="daylight"] .session-box-ctx,
:root[data-skin="daylight"] .session-box-cost,
:root[data-skin="daylight"] .tile-meter { font-size: var(--dl-2xs); color: var(--text-muted); }
:root[data-skin="daylight"] .rail-day {
	font-size: var(--dl-xs);
	font-weight: var(--w-strong);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	padding: 8px 10px 4px;
}
:root[data-skin="daylight"] .tile-x { border-radius: var(--radius-sm); color: var(--text-muted); }
:root[data-skin="daylight"] .rail-builtin > summary { text-transform: none; letter-spacing: 0; font-size: var(--dl-xs); padding-left: 4px; }

/* ── Notes and meta (§9) ──────────────────────────────────── */
/* One note: 12px, --w-text, --text-muted, line-height 1.45. Admin's,
   Trash's, the capability blurb, Mail's fine print and Settings' own note
   already draw this way; a pop's own note, six empty-state lines and two
   filled-box notes each drew a size or a colour of their own. */
:root[data-skin="daylight"] :is(.admin-note, .rail-note, .trash-note, .cap-blurb, .mail-fine, .pop-note,
	.chat-msg-empty, .files-empty, .rel-blurb, .agents-empty, .mdash-empty, .hist-note, .mdash-note, .spend-note,
	.mode-row-blurb, .shr-note, .cfg-hint, .search-engine-note, .tag-note, .spend-sec-hint,
	.mdash-sec-hint, .crystal-empty, .graph-empty, .tile-dlg-note, .pro-fine, .ar-hint, .tools-fine, .spend-empty, .pend-detail, .capp-offer-note) {
	font-size: var(--dl-xs); font-weight: var(--w-text); color: var(--text-muted); line-height: 1.45;
}
/* A dialog's note is the same note; its warning variant keeps the warning colour. */
:root[data-skin="daylight"] .tile-dlg-note.warn { color: var(--warn); }
/* One meta reading: the mono at 10.5px, muted. A tile's own timestamp and
   size, a device's age and build already draw this way; a tile's OTHER
   stamp, a phone build's age, a file's size and a history version drew in
   the sans instead, some a step darker or lighter. */
:root[data-skin="daylight"] :is(.ctile-meta, .chead-when, .device-when, .fv-size, .hist-ver, .ctile-time-full) {
	font-family: var(--font-mono); font-size: var(--dl-2xs); font-weight: var(--w-text); color: var(--text-muted);
}
/* A merge conflict's line reference is meta in the sans, at the meta's size. */
:root[data-skin="daylight"] .capp-conflict-meta { font-size: var(--dl-2xs); }

/* ── The account, at the rail's foot ───────────────────────── */
/* The one rule the rail keeps: it says the list has ended. */
:root[data-skin="daylight"] .admin-status { border-top: 1px solid var(--border); padding-top: 10px; gap: 2px; }
/* One app table (D-20260929-03, remaining.md cluster 12): Spend's and Model
   stats' figures shared a head but drew a row a pixel apart, and each table's
   own numeric column and model name drew a size and colour of its own. */
:root[data-skin="daylight"] :is(.spend-table, .mdash-table) :is(th, td) { padding: 5px 8px 5px 0; }
:root[data-skin="daylight"] :is(.spend-table, .mdash-table) :is(th, td):last-child { padding-right: 12px; }
:root[data-skin="daylight"] :is(.spend-table, .mdash-table) :is(th.num, td.num) {
	font-family: var(--font-mono); font-size: var(--dl-2xs);
}
:root[data-skin="daylight"] :is(.mdash-table td.mdash-model, .spend-table td.spend-model) { color: var(--text-secondary); }

/* One status row (D-20260929-03, remaining.md cluster 10, after G14): 12px,
   --w-text, --text-secondary, radius --radius-sm, padding 3px 4px, 21px. */
:root[data-skin="daylight"] :is(.astat-row, #user-row) {
	font-size: var(--dl-xs); font-weight: var(--w-text); color: var(--text-secondary);
	border-radius: var(--radius-sm); padding: 3px 4px; min-height: 21px;
}
/* R2: `#user-row` held above 22px even once every part inside it measured
   under it -- an explicit height, not just the floor every other status-row
   reaches on its own, closes the gap regardless of the reason. */
:root[data-skin="daylight"] #user-row { height: 22px; box-sizing: border-box; }
:root[data-skin="daylight"] .astat-btn:hover { background: var(--dl-hover); }
/* One icon button in a row (D-20260929-03, remaining.md cluster 6): a 20px
   box, radius --radius-sm, a 16px icon, --text-secondary. Copy, a device's
   rename/nominate, a tile's cog and a row's own ×/delete/rename each drew a
   step muted and a step small of their own. */
/* `.session-box-header .pptw-act` is kept OUT of this `:is()`: a compound
   selector inside `:is()` sets the specificity of the WHOLE group to its own
   (two classes), which silently outranked `.files-view-head > span > button`
   (§2/cluster 5) for the one button -- `.files-btn.attach-btn` -- that wears
   both a head-tool's and this row's class. */
/* `.device-remove` is the device row's third icon button and was left out, so it kept app.css's 24px beside its
   20px neighbours (by-role gate, icon-button h, once a second device is listed: gatefix 16 Oct). */
:root[data-skin="daylight"] :is(.device-rename, .device-nominate, .device-remove, .copy-id, .ctile-copy, .attach-btn,
	.crystal-form-x, .tile-cog, .ctile-rate-up, .ctile-rate-down, .ctile-rate-more, .mail-refresh) {
	height: 20px; min-height: 20px; padding: 0; border-radius: var(--radius-sm); color: var(--text-secondary);
}
/* `.tag-x` kept OUT of the fixed-20px group above (D-20260929-03 residual
   pass): it is now a normal flex child of its chip (`align-self: stretch`,
   app.css), sized BY the chip's own height, not to a standalone icon
   button's own -- a fixed 20px there was growing every closer-bearing chip
   three pixels taller than a plain one. */
:root[data-skin="daylight"] .tag-x { padding: 0; border-radius: var(--radius-sm); }
:root[data-skin="daylight"] .session-box-header .pptw-act {
	height: 20px; min-height: 20px; padding: 0; border-radius: var(--radius-sm); color: var(--text-secondary);
}
:root[data-skin="daylight"] :is(.copy-id, .ctile-copy, .device-rename, .device-nominate,
	.ctile-rate-up, .ctile-rate-down, .ctile-rate-more) .ic { width: 16px; height: 16px; }
/* A lit arrow, and a details control holding more than a bare +1 or -1, take the light
   selected fill, as a chosen row does. No colour: a rating is not a success or an error. */
:root[data-skin="daylight"] :is(.ctile-rate-up, .ctile-rate-down)[aria-pressed="true"],
:root[data-skin="daylight"] .ctile-rate-more.on { background: var(--dl-on); color: var(--text-primary); }
:root[data-skin="daylight"] .session-box-header .pptw-act :is(svg, .ic) { width: 16px; height: 16px; }
/* The × keeps its chip's own hue by inheritance, not the row's grey. */
:root[data-skin="daylight"] .tag-x { color: inherit; }
/* One inline link: --accent-text, --w-text, underlined. */
:root[data-skin="daylight"] :is(a.legal-link, .mail-learn-more, .termp-install, .post-link, .rate-jump-link) {
	color: var(--accent-text); font-weight: var(--w-text); text-decoration: underline;
}
:root[data-skin="daylight"] .spend-row { border-top: 0; padding: 6px 0 2px; }
:root[data-skin="daylight"] .spend-cell { align-items: flex-start; }
:root[data-skin="daylight"] .spend-label { font-size: var(--dl-2xs); text-transform: none; letter-spacing: 0; }
:root[data-skin="daylight"] .spend-amt { font-size: var(--dl-sm); color: var(--text-primary); }
/* In Admin, at rail width, the device rename pencil was alone on the row's
   own third line: line 2 was already full, so it wrapped (sweep item 19). */
@media (max-width: 480px) {
	:root[data-skin="daylight"] .device-row > .device-rename { order: 3; }
	/* The rename pencil's overlay reaches 4px into the copy button. */
	:root[data-skin="daylight"] .device-row > .copy-id { margin-right: 4px; }
	/* R12 (D-20260929-03 r526 residual): nominate and rename take the icon-
	   button group's own 20px box now, like copy, the tile cog and the rest --
	   they were the two out of the row at 44px. The TAP target does not follow
	   the box down, though (the lead's ruling, same day): the phone floor's
	   invisible ::after (below) restores it to 44px, for all four. */
	:root[data-skin="daylight"] :is(.device-row > .copy-id, .device-acts .device-remove, .device-ctl .device-nominate, .device-acts .device-rename) {
		width: 20px; height: 20px; min-height: 0;
	}
}

/* ── The stage: the chat's head ────────────────────────────── */
:root[data-skin="daylight"] .chead { border-bottom: 0; padding: 12px 14px 6px 28px; min-height: 64px; gap: 10px; }
:root[data-skin="daylight"] .ctitle {
	font-family: var(--font-display);
	font-size: var(--dl-lg);
	font-weight: var(--w-title);
	letter-spacing: 0;
}
:root[data-skin="daylight"] .chead-right { gap: 2px; }
:root[data-skin="daylight"] .chip-btn {
	border-color: transparent;
	background: transparent;
	color: var(--text-muted);
	border-radius: var(--radius);
}
:root[data-skin="daylight"] .chip-btn:hover { background: var(--dl-hover); color: var(--text-primary); }
:root[data-skin="daylight"] .chip-btn.on,
:root[data-skin="daylight"] .chip-btn.icon-chip[aria-pressed="true"] { background: var(--dl-on); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .chip-btn.accent { border-color: transparent; color: var(--accent-text); }
:root[data-skin="daylight"] .mode-chip { font-size: var(--dl-xs); color: var(--text-secondary); padding-right: 10px; }
:root[data-skin="daylight"] .mode-chip.net-cut { border-color: transparent; background: var(--warn-bg); }
:root[data-skin="daylight"] .cmeter { font-size: var(--dl-2xs); color: var(--text-muted); }
/* Crystal / Chat: two words, the one on screen in the light chip. */
:root[data-skin="daylight"] .dview { border: 0; gap: 2px; }
:root[data-skin="daylight"] .dview-btn + .dview-btn { border-left: 0; }

/* ── The transcript ────────────────────────────────────────── */
/* A reading column on the sheet. Every tile is flush: the speaker shows in the
   type, not in an indent or a box. */
:root[data-skin="daylight"] .chat-output { --ct-indent: 0px; padding: var(--tx-edge) var(--tx-inset); line-height: 1.5; }
:root[data-skin="daylight"] { --tx-inset: 28px; }
/* No reading-column cap (2026-09-29, owner: "a large unnecessary margin on
   the right"). A tile fills the stage's width less this padding, in both
   views, rather than stopping at a fixed measure and leaving the rest bare. */
:root[data-skin="daylight"] .ctile,
:root[data-skin="daylight"] .crollup {
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	transition: background-color 0.12s;
}
/* QUIET TILES (owner, D-20261010-16): your message, the answer and the Thinking-and-Tools
   group each stand on a faint fill in their own hue, always, so the eye finds where one
   entry ends without a line drawn round it. A lone step is its group, so the group wears
   the fill and the step inside stays clear. Every tile the thread draws is on the list, the
   hand-off and the answered Decision with them (r556tx QA F1: "every instance"). */
:root[data-skin="daylight"] .chat-output > :is(.ctile.chat-msg-user, .ctile.chat-msg-assistant, .ctile[data-t="rating"], .ctile[data-t="handoff"], .crollup[data-t="work"], .ask-card.answered) {
	background: color-mix(in srgb, var(--ct-edge) 4.5%, transparent);
}
/* A tile shows its extent under the pointer, as a fill in its own hue: the
   structure is there when asked for, and no line draws it. */
:root[data-skin="daylight"] .ctile:hover,
:root[data-skin="daylight"] .crollup:hover {
	background: color-mix(in srgb, var(--ct-edge) 8%, transparent);
}
:root[data-skin="daylight"] .ctile .ctile:hover { background: color-mix(in srgb, var(--ct-edge) 8%, transparent); }
/* A step inside an open group is a quiet tile one level in: the same faint fill in its own hue,
   laid over the group's, so the step stands off the group as the group stands off the page
   (r556tx QA F3: edge to edge and flat, a step and its group read as one block). app.css gives
   a nested step a ground four selectors deep, so the step is named as deeply here. A lone step
   takes no fill of its own: it is its group, and the group is already showing one. */
:root[data-skin="daylight"] .crollup[data-t] > .crollup-body > .ctile[data-t] { background: color-mix(in srgb, var(--ct-edge) 4.5%, transparent); }
:root[data-skin="daylight"] .crollup.solo[data-t] > .crollup-body > .ctile[data-t] { background: transparent; }
:root[data-skin="daylight"] .crollup[data-t]:not(.solo) > .crollup-body > .ctile[data-t]:hover {
	background: color-mix(in srgb, var(--ct-edge) 8%, transparent);
}
:root[data-skin="daylight"] .ctile-lbl,
:root[data-skin="daylight"] .crollup-lbl {
	gap: 8px;
	font-size: var(--dl-xs);
	font-weight: var(--w-strong);
}
:root[data-skin="daylight"] .ctile-lbl:hover,
:root[data-skin="daylight"] .crollup-lbl:hover { background: transparent; }
:root[data-skin="daylight"] .ctile-dot { width: 8px; height: 8px; }
:root[data-skin="daylight"] .ctile[data-t="user"] .ctile-dot,
:root[data-skin="daylight"] .ctile[data-t="rating"] .ctile-dot { display: none; }
:root[data-skin="daylight"] .ctile[data-t="user"] .ctile-who,
:root[data-skin="daylight"] .ctile[data-t="rating"] .ctile-who { color: var(--text-secondary); }
:root[data-skin="daylight"] .ctile-time { font-size: var(--dl-2xs); }
:root[data-skin="daylight"] .ctile-body { font-size: var(--dl-md); line-height: 1.56; }
/* A stop line in the body's own type (F3), and its Continue's word on the same text edge as
   the line's: the button's inline padding is taken back by its margin, so its hover fill
   still has room (F4). */
:root[data-skin="daylight"] .chat-msg-ended.ended-stop { font-size: var(--dl-md); line-height: 1.56; }
:root[data-skin="daylight"] :is(.chat-msg-ended.has-continue, .turn-interrupted) .ti-continue { margin-inline-start: -10px; }
/* Your turn reads in exactly the daimon's own type -- same face, size, weight
   and line-height, from the plain `.ctile-body` rule above. The label line
   above it (name and stamp, `.ctile-lbl`) is what still tells the speakers
   apart, not a bigger display face here (2026-09-29, owner). */
:root[data-skin="daylight"] .chat-msg-user { text-align: left; }
:root[data-skin="daylight"] .chat-msg-user .chat-msg-content {
	display: block;
	background: transparent;
	color: var(--text-primary);
	border-radius: 0;
	padding: 0;
	max-width: none;
}
:root[data-skin="daylight"] .ctile[data-t="user"] .ctile-body { color: var(--text-primary); }
:root[data-skin="daylight"] .ctile-body strong { font-weight: var(--w-strong); }
:root[data-skin="daylight"] .ctile-body code {
	font-size: var(--dl-sm);
	background: transparent;
	padding: 0;
	color: var(--accent-text);
}
:root[data-skin="daylight"] .chat-msg-content td code,
:root[data-skin="daylight"] .chat-msg-content th code { font-size: var(--dl-xs); }
:root[data-skin="daylight"] .ctile-body pre { border: 0; }
:root[data-skin="daylight"] .ctile-body li::marker { color: var(--text-muted); }
/* Tables: a rule under the head and between rows, nothing round them. */
:root[data-skin="daylight"] .chat-msg-content .tbl-wrap,
:root[data-skin="daylight"] .chat-msg-content .md-table,
:root[data-skin="daylight"] .chat-msg-content table { border: 0; box-shadow: none; background: transparent; }
:root[data-skin="daylight"] .chat-msg-content table { border-collapse: collapse; font-size: var(--dl-sm); }
:root[data-skin="daylight"] .chat-msg-content th,
:root[data-skin="daylight"] .chat-msg-content td {
	border: 0;
	border-bottom: 1px solid var(--border);
	background: transparent;
	padding: 7px 28px 7px 0;
	text-align: left;
}
:root[data-skin="daylight"] .chat-msg-content th {
	font-size: var(--dl-xs);
	font-weight: var(--w-med);
	color: var(--text-muted);
	border-bottom-color: var(--border-2);
}
:root[data-skin="daylight"] .chat-msg-content tbody tr:last-child td { border-bottom: 0; }
:root[data-skin="daylight"] .chat-msg-content tr:nth-child(even) td { background: transparent; }
/* The last column keeps every other cell's 28px right padding, wider than the
   phone's own column, so the table scrolled and drew a bar that read as a
   stray rule (sweep item 12). */
:root[data-skin="daylight"] .chat-msg-content th:last-child,
:root[data-skin="daylight"] .chat-msg-content td:last-child { padding-right: 0; }
/* Fenced code: the fill already shows the block's shape, so no border round
   it, no rule under its head, and Copy is a bare chip (sweep item 2). */
:root[data-skin="daylight"] .code-block { border: 0; border-radius: var(--radius); }
:root[data-skin="daylight"] .code-block-head { border-bottom: 0; background: transparent; }
:root[data-skin="daylight"] .code-copy-btn {
	border-color: transparent;
	background: transparent;
	color: var(--text-muted);
	border-radius: var(--radius-sm);
	font-size: var(--dl-xs);
}
:root[data-skin="daylight"] .code-copy-btn:hover { background: var(--dl-hover); color: var(--text-primary); border-color: transparent; }
/* "Interrupted before it could answer" loses its dashed amber frame; the
   warn fill and the amber words still say what it is (sweep item 5). */
:root[data-skin="daylight"] .turn-interrupted { border-color: transparent; border-radius: var(--radius); padding: 8px 12px; }
/* The expanded System/Tool-schemas band was a stray face; every other figure
   is Sometype Mono (sweep item 16). */
:root[data-skin="daylight"] .wire-band-body { font-family: var(--font-mono); font-size: var(--dl-xs); }
/* The daimon's speaker label and a code keyword sat just under 4.5:1 in a
   few palettes (sweep item 21). */
:root[data-skin="daylight"] .ctile-lbl .ctile-who,
:root[data-skin="daylight"] .spend-add-credits { color: var(--accent-text); font-weight: var(--w-text); }
:root[data-skin="daylight"] .tok-keyword { color: color-mix(in srgb, var(--accent-text) 80%, var(--text-primary)); }

/* ── The composer ──────────────────────────────────────────── */
:root[data-skin="daylight"] .chat-input-bar { border-top: 0; padding: 8px 14px 16px 28px; gap: 6px; }
:root[data-skin="daylight"] #chat-input {
	background: var(--bg-tertiary);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--dl-md);
	line-height: 22px;
	padding: 11px 14px;
	min-height: 46px;
	box-sizing: border-box;
}
:root[data-skin="daylight"] #chat-input:focus,
:root[data-skin="daylight"] #chat-input:focus-visible {
	outline: none;
	border-color: var(--accent);
}
:root[data-skin="daylight"] #chat-send { width: 46px; height: 46px; border-radius: var(--radius); }
:root[data-skin="daylight"] #chat-jump,
:root[data-skin="daylight"] #chat-end {
	height: 46px;
	width: 34px;
	border: 0;
	background: transparent;
	color: var(--text-muted);
}
:root[data-skin="daylight"] #chat-jump:hover,
:root[data-skin="daylight"] #chat-end:hover { background: var(--dl-hover); color: var(--text-primary); }
:root[data-skin="daylight"] .chat-attach-strip { padding: 0 14px 0 28px; margin: 0; }
:root[data-skin="daylight"] .attach-head { border: 0; background: transparent; font-size: var(--dl-xs); color: var(--text-muted); }
/* The band that carries the fold toggle IS the collapsed footer row, so its toggle is drawn as `.arte-strip` is drawn in a diamond's
   footer: the box on the footer's text edge, with no inset of the band's own. */
:root[data-skin="daylight"] .attach-head.attach-fold { padding-left: 0; }
:root[data-skin="daylight"] .arte-list,
:root[data-skin="daylight"] .arte-row { border-color: transparent; }
:root[data-skin="daylight"] .mark-notice { border-color: transparent; }

/* ── The Workspace, in the dock ────────────────────────────── */
/* One text button (D-20260929-03 §4, r526 residual: 25px raised to 27px to
   match the group's own majority, R4): 12px, `--w-text`, `--text-secondary`,
   padding 3px 10px, height 27px, radius `--radius-sm`, no border, a light
   fill on hover. Crystal's Edit/History/Save-a-version, the Graph bar, a
   code block's Copy, the Workspace's Import/Save-a-copy and the Social/
   +Add-provider pills this replaces their own font, weight, padding and
   colour with it. A Pending tile's worded presses (`.pend-verb`: Switch, Add,
   Edit, Dismiss, Keep, Remove; 5.3.2) are the same button. */
:root[data-skin="daylight"] :is(.crystal-act, .graph-btn, .attach-view-btn, .attach-add, .code-copy-btn, .files-mode-btn,
	.imp-keep, .imp-send, .imp-vote, .shr-btn, .models-add, .tag-clear-all, .ti-continue,
	.pro-buy, .credit-buy, .tools-buy, .mail-unlock, .ar-save, .ar-card-btn, .pend-verb) {
	font-size: var(--dl-xs); font-weight: var(--w-text); color: var(--text-secondary); background: transparent;
	border-color: transparent; border-radius: var(--radius-sm); padding: 3px 10px; min-height: 27px; line-height: 19px;
	text-decoration: none;
}
:root[data-skin="daylight"] :is(.crystal-act, .graph-btn, .attach-view-btn, .attach-add, .code-copy-btn, .files-mode-btn,
	.imp-keep, .imp-send, .imp-vote, .shr-btn, .models-add, .tag-clear-all, .ti-continue,
	.pro-buy, .credit-buy, .tools-buy, .mail-unlock, .ar-save, .ar-card-btn, .pend-verb):hover { background: var(--dl-hover); color: var(--text-primary); }
/* The bare + is the same 27px box as the worded chips, but round, its glyph centred. */
:root[data-skin="daylight"] .attach-add.icon { width: 27px; height: 27px; padding: 0; border-radius: 50%; }
/* The primary text button: the role's size, filled in the accent. Subscribe,
   Unlock, Save and Save a card each drew a size of their own (14px, 37px). */
:root[data-skin="daylight"] :is(.pro-buy, .credit-buy, .tools-buy, .mail-unlock, .ar-save, .ar-card-btn.accent),
:root[data-skin="daylight"] :is(.pro-buy, .credit-buy, .tools-buy, .mail-unlock, .ar-save, .ar-card-btn.accent):hover { background: var(--accent); color: var(--on-fill, #fff); }
/* The Pending tile's press row stretched each glyph press across the card (`.pend-act { flex: 1 }`); the worded ones are text buttons and
   keep the button's own width, left to right like Crystal's Edit and History. */
:root[data-skin="daylight"] .pend-verb { flex: none; }
:root[data-skin="daylight"] :is(.pro-buy, .credit-buy, .tools-buy, .mail-unlock, .ar-save, .ar-card-btn.accent):hover:not(:disabled) { background: var(--accent-hover); }
:root[data-skin="daylight"] .files-card,
:root[data-skin="daylight"] .files-mode,
:root[data-skin="daylight"] .files-path,
:root[data-skin="daylight"] .files-rest,
:root[data-skin="daylight"] .sys-sec,
:root[data-skin="daylight"] .files-view-head,
:root[data-skin="daylight"] .files-view-msg,
:root[data-skin="daylight"] .files-view-note,
:root[data-skin="daylight"] .cloud-row {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}
/* The Doc and Preview panels' own head: their title sits over the file's OWN
   content (the button row, the body), not over the transcript, so it takes
   that content's edge rather than the 28px the transcript's `.chead` sets
   for itself above (2026-09-29, owner: "the gap to the left of the file name
   title"). */
:root[data-skin="daylight"] :is(.panel.doc, .panel.tools, .panel.graph, .panel.msg, .panel.termpanel) .chead { padding-left: var(--dock-inset); }
/* Compose's body holds the mail head's own 14px (mail.css `.compose-head`), so its title takes that. */
:root[data-skin="daylight"] .panel.compose .chead { padding-left: 14px; }
/* The file panel's action row -- Edit, Download, Attach, Back -- as one bare
   button: no outline, one height, one baseline, even spacing. Classic left
   the paperclip a size and a padding of its own (files.css), which is
   exactly what stood it taller and off the others' line (owner). */
:root[data-skin="daylight"] .files-btn {
	border-color: transparent;
	background: transparent;
	padding: 0 9px;
	font-size: var(--dl-xs);
	color: var(--text-secondary);
}
:root[data-skin="daylight"] .files-btn:hover { background: var(--dl-hover); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .files-btn.active { background: var(--dl-on); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .files-btn[data-act="attach"] { font-size: var(--dl-xs); padding: 0 9px; }
:root[data-skin="daylight"] .files-btn[data-act="attach"].on {
	border-color: transparent;
	box-shadow: none;
	background: var(--dl-on);
	color: var(--text-primary);
}
:root[data-skin="daylight"] .files-view-head > span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* The Doc panel's edit-view head has no `.files-view-name` span of its own --
   the title lives in `.chead` above -- so its one span, the button row, is
   this rule's target: pulled left 10px to meet the title's edge (2026-09-29
   re-check: "Edit"'s ink sat 10px right of the title's). A view that DOES
   carry `.files-view-name` first (cloud storage, preview) is excluded, so
   its own title is left alone. */
:root[data-skin="daylight"] .files-view-head > span:first-child:not(.files-view-name) { margin-left: -10px; }
:root[data-skin="daylight"] .files-row, :root[data-skin="daylight"] .files-focus .r { font-size: var(--dl-sm); border-color: transparent; border-radius: var(--radius-sm); gap: 4px; }
:root[data-skin="daylight"] .files-size { font-size: var(--dl-2xs); color: var(--text-muted); }
:root[data-skin="daylight"] .cloud-bar { border-color: transparent; }

/* Every one of these was set to plain `--text-muted` above, at the same
   specificity; placed last on purpose so `--dl-faint` (sweep item 14) wins
   by source order without out-specifying anything. The pending card's time and
   steer line, the rail counts, the tools count, a release's date and meta line and
   a history entry's age are the same role (meta) and took `--text-muted`: the role was two-toned, and
   whichever tone a view drew more of became the gate's canon, so a desk (release
   dates) and a phone (pending cards) disagreed. One colour for the role (by-role,
   12 Oct). The mono stamps keep their own reading (`:is(.ctile-meta, ...)` above). */
:root[data-skin="daylight"] .tile-when-sub,
:root[data-skin="daylight"] .tile-model-chip,
:root[data-skin="daylight"] .tile-meter,
:root[data-skin="daylight"] .tile-meter > *,
:root[data-skin="daylight"] .session-box-time,
:root[data-skin="daylight"] .session-box-ctx,
:root[data-skin="daylight"] .session-box-cost,
:root[data-skin="daylight"] .ctile-time,
:root[data-skin="daylight"] .files-size,
:root[data-skin="daylight"] .pend-when,
:root[data-skin="daylight"] .rail-count,
:root[data-skin="daylight"] .tools-count,
:root[data-skin="daylight"] .steer-meta,
:root[data-skin="daylight"] .rel-when,
:root[data-skin="daylight"] .rel-meta,
:root[data-skin="daylight"] .hist-when,
:root[data-skin="daylight"] .cmeter { color: var(--dl-faint); }

/* ── Tag chips: the colours stay, the outlines go ──────────── */
:root[data-skin="daylight"] .tag-chip { border-color: transparent; }
:root[data-skin="daylight"] button.tag-chip:hover { border-color: transparent; }
:root[data-skin="daylight"] .tag-more { border-color: transparent; }
/* A refused tag was a dashed outline round nothing; without the line it takes
   a faint fill of its own hue, and the ¬ says the rest. */
:root[data-skin="daylight"] .tag-no { border-color: transparent; background: hsl(var(--tag-h, 0) 30% 20% / 0.35); }
:root[data-skin="daylight"][data-ink="dark"] .tag-no { background: hsl(var(--tag-h, 0) 60% 95%); }
:root[data-skin="daylight"] .tag-mode { border-color: transparent; background: var(--dl-hover); }
/* On a light palette (data-ink="dark") the border was carrying the pale
   fills' shape; without it hsl(h 70% 94%) read as coloured TEXT rather than
   a chip for a high-lightness hue such as yellow ("tax"), against the desk's
   near-white (QA round 2, minor 5). One step down keeps every hue's own
   colour -- pink, green and blue already read fine at 94% -- and gives
   yellow the shape back too.

   NOT `.tag-inc` and NOT `.tag-no` (QA round 2 re-check, regression): both
   tie this rule's specificity in app.css and lose to it on source order
   alone, so a tag the rail is filtering ON went white-on-pale-yellow, and a
   refused tag took the full fill it is deliberately kept off. Excluded
   rather than out-specified, so their own rules -- `--accent-soft`'s fill
   for `.tag-inc`, the faint one for `.tag-no` -- are simply never reached
   here and read exactly as every other skin's. */
:root[data-skin="daylight"][data-ink="dark"] .tag-chip:not(.tag-inc):not(.tag-no) { background: hsl(var(--tag-h, 0) 70% 90%); }

/* ── Pop-ups and dialogs: lifted, not ruled ────────────────── */
:root[data-skin="daylight"] .pop,
:root[data-skin="daylight"] .dlg-card,
:root[data-skin="daylight"] .modal-card,
:root[data-skin="daylight"] .pal-box {
	border-color: transparent;
	box-shadow: 0 0 0 1px var(--border), 0 18px 48px rgba(20, 12, 16, 0.18);
}
:root[data-skin="daylight"] .pop-head { text-transform: none; letter-spacing: 0; font-size: var(--dl-xs); font-weight: var(--w-strong); }
/* Help's About/Guide rows read a step quieter than the drawer's own menu
   items (D-20260929-03 §7): the same primary ink and radius. */
:root[data-skin="daylight"] [data-menu="rows"] > button { color: var(--text-primary); border-radius: var(--radius-sm); }

/* ── Dialogs ───────────────────────────────────────────────── */
/* New diamond, the chat/diamond cog dialogs and the diamond page's Edit
   form all kept a ruled box for every field and an outlined pill for every
   secondary button (sweep item 4). A fill for the field, the light "current"
   gesture for the pills, one height, one size throughout. */
/* No control keeps an outline anywhere (D-20260929-03): every field and
   select, whatever class it wears, is one rule -- a tertiary fill with no
   visible border, so a hand-rolled `.dlg-input`/`.tile-model`/-form pair and
   a plain, unclassed `<input>` (the Push form's host and token) end up drawn
   identically rather than one classed and one wearing the browser's own
   default. */
:root[data-skin="daylight"] :is(select, input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), textarea) {
	background-color: var(--bg-tertiary);
	border-color: transparent;
	border-radius: var(--radius-sm);
	color: var(--text-primary);
}
:root[data-skin="daylight"] :is(select, input, textarea):focus-visible { outline: none; border-color: var(--accent); }
/* One select, one field (remaining.md cluster 12): 12px, 31px, box-sizing
   border-box. A `<textarea>` sizes to its content (G12), so it is left out --
   `#chat-input` and the composer's field grow with what is typed. */
:root[data-skin="daylight"] :where(select) { padding: 6px 24px 6px 8px; height: 31px; font-size: var(--dl-xs); box-sizing: border-box; }
:root[data-skin="daylight"] :where(input):not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]) {
	height: 31px; box-sizing: border-box; padding: 6px 8px;
}
:root[data-skin="daylight"] .tile-dlg-swatch { border-color: transparent; border-radius: var(--radius-sm); }
/* One dialog action (D-20260929-03 §5, r526 residual: 35px raised to 37px,
   R13 -- `.dlg-ok`/`.dlg-cancel` were never actually 35, this floor sitting
   under their own natural height; #push-save and #beta-open, with no taller
   content to hold them up, were the only two the floor actually set): 14px,
   padding 8px 16px, height 37px, radius `--radius-sm`. The cog dialogs' Keep
   and Turn-into-a-diamond… were a smaller, filled-at-rest pair of their own;
   they take the rule below and go bare like every other secondary action. */
:root[data-skin="daylight"] :is(.dlg-actions, .tile-dlg-actions, .compose-foot) > button,
:root[data-skin="daylight"] :is(#push-save, #beta-open) {
	font-size: var(--dl-sm); padding: 8px 16px; min-height: 37px; height: auto; border-radius: var(--radius-sm);
}
:root[data-skin="daylight"] :is(.tile-keep, .tile-fold) { background: transparent; }
:root[data-skin="daylight"] .tile-fold,
:root[data-skin="daylight"] .tile-keep { border-color: transparent; color: var(--text-secondary); }
:root[data-skin="daylight"] .tile-dlg-level:hover,
:root[data-skin="daylight"] .tile-fold:hover,
:root[data-skin="daylight"] .tile-keep:hover { background: var(--dl-on); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .tile-fold.folded { border-style: solid; border-color: transparent; }

/* ── Secondary controls: the header's chip, not a ruled pill ──
   Three spots kept the pill-on-a-border style every other control in the
   look had already lost: Social's sub-tabs, Spending's Week | Month, and a
   dialog's Cancel (QA round 2, minor 1). Same gesture as the header tabs --
   a light fill of the palette's own ink for "current" or "under the
   pointer", never a line. */
:root[data-skin="daylight"] .imp-chip:hover:not(:disabled) {
	background: var(--dl-hover);
	border-color: transparent;
	color: var(--text-primary);
}
:root[data-skin="daylight"] .imp-chip.on {
	background: var(--dl-on);
	border-color: transparent;
	color: var(--text-primary);
}
/* `.imp-chip:hover:not(:disabled)` above out-specifies `.imp-chip.on` (three
   class-level selectors against two), so hovering the CURRENT chip faded it
   from --dl-on's 8% to --dl-hover's 4.5% (QA round 2 re-check, regression).
   Matched at the same specificity `.ptag.on:hover` already keeps it at.  */
:root[data-skin="daylight"] .imp-chip.on:hover { background: var(--dl-on); }
/* V9, side A (D-20260929-03, remaining.md, lead: side A): the six sub-tabs
   always sit on their own row, under the title and its tools, at every
   width -- the owner's own diamond-tile rule ("the chip list ... should
   start on its own line"), the same shape on the computer and the phone.
   The r524 sweep item 8 squeeze (padding 4px 8px, wrap-when-it-does-not-fit)
   is removed: `.imp-chip` keeps the canonical text-button padding, and
   `#panel-social .imp-chips { flex-basis: 100% }` (improve.css) already
   gives the row its own line unconditionally. */
/* PHONE (QA round 2 re-check, still open): mobile.css's own
   `#msheet #panel-social > .railhead .imp-chip` carries two ids, which the
   desk rule above cannot out-specify at any width. Repeated at that
   selector so it wins under Daylight without touching Sharp or Warm's. */
@media (max-width: 760px) {
	:root[data-skin="daylight"] #msheet #panel-social > .railhead .imp-chip {
		border-color: transparent;
		background: transparent;
		color: var(--text-secondary);
	}
	:root[data-skin="daylight"] #msheet #panel-social > .railhead .imp-chip:hover:not(:disabled) {
		background: var(--dl-hover);
		border-color: transparent;
		color: var(--text-primary);
	}
	:root[data-skin="daylight"] #msheet #panel-social > .railhead .imp-chip.on {
		background: var(--dl-on);
		border-color: transparent;
		color: var(--text-primary);
	}
	:root[data-skin="daylight"] #msheet #panel-social > .railhead .imp-chip.on:hover { background: var(--dl-on); }
}
:root[data-skin="daylight"] .spend-toggle {
	background: transparent;
	border-color: transparent;
	padding: 0;
}
:root[data-skin="daylight"] .spend-toggle-btn:hover { background: var(--dl-hover); color: var(--text-primary); }
:root[data-skin="daylight"] .spend-toggle-btn.on { box-shadow: none; }
/* The "Estimated" badge carried the same grey pill fill as the selected
   "Month", so the row read as three choices with the badge looking chosen
   (sweep item 9). */
:root[data-skin="daylight"] .spend-badge { background: transparent; padding: 0; margin-right: 8px; color: var(--text-muted); font-size: var(--dl-xs); }
/* Model stats' Week | Month kept a `--border-strong` frame while Spending's
   identical control had none (sweep item 10). */
:root[data-skin="daylight"] .mdash-toggle { background: transparent; border-color: transparent; padding: 0; gap: 2px; }
:root[data-skin="daylight"] .mdash-toggle-btn:hover { background: var(--dl-hover); color: var(--text-primary); }
:root[data-skin="daylight"] .mdash-toggle-btn.on { box-shadow: none; }
:root[data-skin="daylight"] .modal-close.dlg-cancel {
	background: transparent;
	border-color: transparent;
	color: var(--text-secondary);
}
:root[data-skin="daylight"] .modal-close.dlg-cancel:hover {
	background: var(--dl-hover);
	border-color: transparent;
	color: var(--text-primary);
}

/* ── A diamond's page ──────────────────────────────────────── */
/* Edit, History and Page are words; the primary one keeps its fill. */
:root[data-skin="daylight"] .crystal-bar { gap: 4px; }
:root[data-skin="daylight"] .crystal-act {
	border-color: transparent;
	background: transparent;
	border-radius: var(--radius-sm);
}
:root[data-skin="daylight"] .crystal-act:hover { background: var(--dl-hover); color: var(--text-primary); }
:root[data-skin="daylight"] .crystal-act.primary { background: var(--accent); color: var(--on-fill); }
/* R10: `.crystal-act.mem-raw-btn` carries both classes, so `.crystal-act`'s
   own padding (app.css) tied the disclosure group's single-class member for
   height -- restated at the compound's own specificity. */
:root[data-skin="daylight"] .crystal-act.mem-raw-btn { height: 27px; min-height: 27px; padding: 4px 8px 4px 4px; }
/* R11: same story -- `.crystal-act.crystal-form-x` carries both classes,
   each with a padding of its own in app.css, tying the 20px icon group's
   single-class member. */
:root[data-skin="daylight"] .crystal-act.crystal-form-x { padding: 0; height: 20px; min-height: 20px; }


/* One section head (D-20260929-03 §8), the design's own form -- .pop-head:
   12px, --w-strong, --text-muted, no letter-spacing. Admin's, a tile
   dialog's, Spending's and Model stats' each drew at their own size,
   weight, colour or spacing.
   `#search-head` kept OUT of this `:is()` (D-20260929-03 residual pass): an
   id anywhere in the group raises the WHOLE group's specificity to an id's,
   which silently outranked the later disclosure-fold rule below for
   `.tile-dlg-adv-sum` -- it also carries `.tile-dlg-head` -- and set its
   weight to `--w-strong` instead of that rule's own `--w-text`. */
:root[data-skin="daylight"] #search-head {
	font-size: var(--dl-xs); font-weight: var(--w-strong); color: var(--text-muted); letter-spacing: 0; line-height: 1.6;
}
/* R6: one line-height for the group (`.mem-title` was 16.2px against the
   rest's 19.2, its own rule never having set one). */
:root[data-skin="daylight"] :is(.pop-head, .admin-sec, .tile-dlg-head, .spend-sec-title, .mdash-sec-title, .cfg-fieldhead,
	.mem-title, .pptw-head-label, .spend-sub) {
	font-size: var(--dl-xs); font-weight: var(--w-strong); color: var(--text-muted); letter-spacing: 0; line-height: 1.6;
}
/* One field label (§8): 12px, --w-text, --text-secondary. Nine fields each
   drew at 10.5 or 14px, some bold, some muted, one lower-cased by
   text-transform. */
:root[data-skin="daylight"] :is(.tag-box-label,
	.imp-with-label, .models-draft-lab, .tile-dlg-label, .spend-stat-lbl, .about-ver-label,
	.cfg-fieldlabel, .crystal-form-hot, .start-label, .mail-globals-label, .capp-conflict-label) {
	font-size: var(--dl-xs); font-weight: var(--w-text); color: var(--text-secondary); text-transform: none;
	line-height: 16.2px; letter-spacing: 0;
}
/* ── Sentence case throughout ─────────────────────────────── */
/* Every label the other skins set in capitals is set as written here, so a
   head reads as a name rather than a shout. Collected from every sheet that
   says `uppercase`; a new one belongs in this list. */
:root[data-skin="daylight"] .admin-sec,
:root[data-skin="daylight"] .admin-body .settings-section h3,
:root[data-skin="daylight"] .rail-builtin > summary,
:root[data-skin="daylight"] .arte-kind,
:root[data-skin="daylight"] .attach-group-title,
:root[data-skin="daylight"] .link-self,
:root[data-skin="daylight"] .link-label,
:root[data-skin="daylight"] .rail-day,
:root[data-skin="daylight"] .fold-menu-head,
:root[data-skin="daylight"] .spend-label,
:root[data-skin="daylight"] .tile-dlg-head,
:root[data-skin="daylight"] .device-nominee,
:root[data-skin="daylight"] .device-ghost,
:root[data-skin="daylight"] .device-oldbuild,
:root[data-skin="daylight"] .models-econ,
:root[data-skin="daylight"] .web-mode,
:root[data-skin="daylight"] .trig-label,
:root[data-skin="daylight"] .ask-count,
:root[data-skin="daylight"] .ask-rec,
:root[data-skin="daylight"] .ctile-io .cap,
:root[data-skin="daylight"] .files-rest-head,
:root[data-skin="daylight"] .sys-head,
:root[data-skin="daylight"] .graph-band,
:root[data-skin="daylight"] .graph-edit-lab,
:root[data-skin="daylight"] .graph-rel-pool-lab,
:root[data-skin="daylight"] .brand-sub,
:root[data-skin="daylight"] .post-tray h3,
:root[data-skin="daylight"] .ref-kind,
:root[data-skin="daylight"] .feed-followers h3,
:root[data-skin="daylight"] .split .col-tag,
:root[data-skin="daylight"] .mail-drafts-head,
:root[data-skin="daylight"] .mail-folders-head,
:root[data-skin="daylight"] .rel-tag,
:root[data-skin="daylight"] .code-block-lang,
:root[data-skin="daylight"] .tools-sec,
:root[data-skin="daylight"] .pop-head,
:root[data-skin="daylight"] .pal-item .kind {
	text-transform: none;
	letter-spacing: 0;
}

/* One disclosure head (D-20260929-03, remaining.md cluster 4), replacing the
   partial §10 rule: every fold trigger -- rail Built-in, the release notes'
   sealed builds, a tag filter toggle, a model provider or memory head, a
   dialog's advanced section, a diamond's links and artefacts, a file tree's
   rest and system rows -- is 12px, --w-text, --text-muted, one line height
   and one hit box. The per-class blocks below keep only what this rule does
   not set: colour on hover, the fold triangle, focus rings. */
:root[data-skin="daylight"] :is(.rail-builtin > summary, .rel-builds > summary, .tagf-toggle, .arte-strip,
	.models-prov-head, .tile-dlg-adv-sum, .dlg-adv-sum, .crystal-memory-sum, .mem-raw-btn, .link-strip,
	.files-rest-head, .sys-head, .cap-more, .capp-conflicts > summary) {
	font-size: var(--dl-xs); font-weight: var(--w-text); color: var(--text-muted); line-height: 19px;
	padding: 4px 8px 4px 4px; min-height: 27px; box-sizing: border-box; background: transparent; border-color: transparent;
}
/* ── Remaining furniture, found on the first shots ─────────── */
/* The rail's split handle is a place to grab, not a rule: it shows on hover. */
:root[data-skin="daylight"] .rhandle::after { background: transparent; }
:root[data-skin="daylight"] .rhandle:hover::after,
:root[data-skin="daylight"] .rhandle.dragging::after { background: var(--accent); }
/* The composer's attach row: a quiet line of words over the field. */
/* A frame that is not drawn takes no room: the transparent 1px border pushed the band's contents 1px off the footer's text edge. */
:root[data-skin="daylight"] .ws-group { border: 0; background: transparent; }
:root[data-skin="daylight"] .attach-view-btn,
:root[data-skin="daylight"] .attach-add,
:root[data-skin="daylight"] .attach-add.grants {
	border-color: transparent;
	background: transparent;
}
/* The radius is set on the two bases only: `.attach-add.grants` outranks `.attach-add.icon`, and would square the round + that grants carry. */
:root[data-skin="daylight"] .attach-view-btn,
:root[data-skin="daylight"] .attach-add { border-radius: var(--radius-sm); }
:root[data-skin="daylight"] .attach-add.grants { color: var(--accent-text); }
:root[data-skin="daylight"] .attach-view-btn:hover,
:root[data-skin="daylight"] .attach-add:hover,
:root[data-skin="daylight"] .attach-add.grants:hover { background: var(--dl-hover); color: var(--text-primary); border-color: transparent; }
/* The attach row's Note/Read toggles were outlined pills (sweep item 6). */
:root[data-skin="daylight"] .attach-state { border-color: transparent; background: var(--dl-hover); color: var(--text-secondary); border-radius: var(--radius-sm); }
:root[data-skin="daylight"] .attach-state:hover { border-color: transparent; background: var(--dl-on); color: var(--text-primary); }
:root[data-skin="daylight"] .attach-state.read { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
/* A diamond's foot: its links and what it keeps, in the text face. */
:root[data-skin="daylight"] .crystal-controls { border-top: 0; padding: 8px 28px 4px; }
:root[data-skin="daylight"] .link-strip,
:root[data-skin="daylight"] .arte-strip { font-family: var(--font); font-size: var(--dl-xs); }
/* The Workspace's word buttons and its field. */
:root[data-skin="daylight"] .files-mode-btn {
	border-color: transparent;
	background: transparent;
}
:root[data-skin="daylight"] .files-mode-btn.accent { background: var(--accent); color: var(--on-fill); font-weight: var(--w-strong); padding-left: 10px; }
/* A search field is a well set into the ground, not a ruled box. Sized as
   every other field is (§10): 14px, 31px high -- Agents' and the Workspace
   filter drew a size smaller and 4-6px shorter than a dialog's own fields. */
:root[data-skin="daylight"] .files-filter-input,
:root[data-skin="daylight"] .diamond-search,
:root[data-skin="daylight"] .gal-search {
	background: var(--bg-tertiary);
	border-color: transparent;
	border-radius: var(--radius);
	font-size: var(--dl-sm);
	padding: 8px 10px;
	min-height: 31px;
	box-sizing: border-box;
}
:root[data-skin="daylight"] .files-filter-input:focus,
:root[data-skin="daylight"] .diamond-search:focus,
:root[data-skin="daylight"] .gal-search:focus { border-color: var(--accent); }
:root[data-skin="daylight"] .files-rest-head,
:root[data-skin="daylight"] .sys-head { font-family: var(--font); font-size: var(--dl-xs); }

/* ── Layout contract: explicit rows, never negotiated by wrap ─────── */
/* V1 (layout_contract.md). The title, the tags, the model and the meter are
   four rows every diamond tile keeps, in that order, whatever it says (owner:
   "the chip list in diamond tiles should start on its own line"). The prior
   fix here only removed the OUTER wrapping flex row; `flex-wrap` was still
   deciding, per rail width and per locale, whether the model and the meter
   shared a line -- a rail at 260px showed four different shapes across five
   tiles (layout_contract.md, census_desk.json). Explicit grid areas fix the
   shape; the gaps are MARGINS on each area, not `row-gap`, so a tile with no
   tags or no `.diamond-from` costs nothing for the row it does not draw.
   V6 (D-20260929-03, r526 residual pass, owner: "you have now inserted the
   model name at the start of the diamond tile status line ... if the model
   name is long, the status line contents get pushed rightward"). V1-V5 put
   the model and the meter on ONE shared grid row so a short reading sat
   beside a short name; against a long one the meter's own left edge moved
   with it, tile to tile -- the same variable-length-before-fixed-content
   fault the owner named at ~14:30 on this same directive, now in the rule
   V1 itself introduced. The model is now its own row, ABOVE the meter,
   never sharing a column with it, so the meter's left edge is the tile's
   own content edge in every tile whatever the model's name. One column,
   one area per row. */
:root[data-skin="daylight"] .diamond-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "from" "tags" "model" "meter";
	row-gap: 0; column-gap: 0;
}
:root[data-skin="daylight"] .diamond-box > .session-box-header { grid-area: head; }
:root[data-skin="daylight"] .diamond-box > .diamond-from       { grid-area: from; margin-top: 2px; }
:root[data-skin="daylight"] .diamond-box > .session-box-tags   { grid-area: tags; margin-top: 4px; }
/* The model is ONE line: the chip's own ellipsis (app.css) is what a long
   name gives way to, not the row's height or the meter's position. */
:root[data-skin="daylight"] .diamond-box > .session-box-meta   { grid-area: model; margin-top: 3px; flex-wrap: nowrap; min-width: 0; gap: 6px; overflow: hidden; }
/* Neither row sets `display`: both are flex in app.css already, and a skin rule
   that said so again outranked the Simple view's `display: none` and drew the
   meter and the meta row on every Simple tile. */
/* The meter is its own line, starting at the tile's left content edge in
   every tile. `overflow: hidden` plus the last-reading ellipsis below is
   the narrowest-width fallback: earlier readings stay whole, only the last
   one gives up characters, and the row never wraps. */
:root[data-skin="daylight"] .diamond-box > .diamond-meter      { grid-area: meter; margin-top: 3px; flex-wrap: nowrap; min-width: 0; white-space: nowrap; overflow: hidden; }
:root[data-skin="daylight"] .diamond-box .tile-model-chip      { min-width: 0; }	/* ellipsis already set, app.css */
:root[data-skin="daylight"] .diamond-box > :not(.diamond-meter) { min-width: 0; }
/* V4/V6. The same shape for a chat tile's model/meter pair (`.tile-active`):
   a long model name used to wrap `.tile-meter` onto its own line under a
   short one (V4); sharing a grid row at all (V1-V5) then moved the meter's
   left edge with the model's own length (V6, as above). Two rows, one
   column, never sharing a line. */
:root[data-skin="daylight"] .chat-box[data-detail="max"] .tile-active {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "model" "meter";
	row-gap: 0; column-gap: 0;
}
:root[data-skin="daylight"] .chat-box[data-detail="max"] .tile-active-top { grid-area: model; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
:root[data-skin="daylight"] .chat-box[data-detail="max"] .tile-meter      { grid-area: meter; flex-wrap: nowrap; white-space: nowrap; min-width: 0; overflow: hidden; }
:root[data-skin="daylight"] .chat-box .tile-model-chip { min-width: 0; }
/* V2. The middle dot goes BETWEEN a meter's own readings, never before the
   first one: `> *::before` put one on every reading including the first, so
   a meter that wrapped read "· vor 1 Min." with an orphan dot, and a model
   chip with no meter after it on the old shared line touched the first tag
   ("gpt-5home"). V1 already keeps the model and the tags on their own rows,
   so only the meter's internal join is left to state. */
/* The join is the "·" and its margins, so the flex gap is nothing and both meters
   take it from one rule: the chat meter used to keep app.css's 8px gap on top of
   the dot's margins, and the Diamond meter none, so a price tag (which drops the
   dot) touched the percentage before it (D-20261010-03). */
:root[data-skin="daylight"] :is(.diamond-meter, .tile-meter) { --meter-join: 6px; gap: 0; }
:root[data-skin="daylight"] :is(.diamond-meter, .tile-meter) > * + .tagb { margin-left: var(--meter-join); }
:root[data-skin="daylight"] :is(.diamond-meter, .tile-meter) > * + *::before {
	content: '\00b7';
	margin: 0 var(--meter-join);
	color: var(--text-muted);
	font-family: var(--font);
}
/* V6: the model and the meter are two separate rows now, not one shared
   line, so there is no longer a join between them to draw -- the dot V2's
   sibling rule (`:first-child::before`, D-20260929-03 §earlier) drew there
   is gone with it. */
/* The meter's LAST reading only gives way when the row is too narrow to
   hold it whole (D-20260929-03, r526 residual pass, "does variable length
   content change the layout in a way that is not desirable?"): earlier
   readings are fixed width and never shrink, so only the final one
   ellipsises, and the row itself never wraps (`overflow: hidden` above). */
:root[data-skin="daylight"] :is(.diamond-meter, .tile-meter) > * { flex: none; }
:root[data-skin="daylight"] :is(.diamond-meter, .tile-meter) > :last-child {
	flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* U3 (D-20260929-03 varlen sweep): a reading's own width no longer moves the
   readings after it. Figures are fixed-width digits, the context percentage
   is given the room its widest value ("100%") needs and right-aligned within
   it -- so a sibling tile's readings land at the same x whatever this one's
   numbers say. */
:root[data-skin="daylight"] :is(.diamond-meter, .tile-meter) > * { font-variant-numeric: tabular-nums; }
:root[data-skin="daylight"] .tile-ctx-pct { min-width: 4ch; text-align: right; }

/* ── Phone ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
	/* The drawer is the one raised surface on a phone: the page's white, a
	   shadow for its edge, and no rule. */
	:root[data-skin="daylight"] .panel.rail {
		background: var(--bg-secondary);
		border-right-color: transparent;
		box-shadow: 0 0 0 1px var(--border), 0 24px 64px rgba(20, 12, 16, 0.22);
	}
	:root[data-skin="daylight"] .railhead > span:first-child { font-size: var(--dl-lg); }
	:root[data-skin="daylight"] .railhead { padding: 12px 0 4px 4px; }
	/* The phone head-tool box (cluster 5) needs the same specificity as the
	   desktop `.pptw-head .pptw-act` rule above to win it back at this width,
	   since mobile.css (which cannot match it) loads before this file. */
	:root[data-skin="daylight"] .pptw-head .pptw-act { height: 36px; min-height: 36px; width: 36px; padding: 0; }
	/* R3/G16: the Doc panel's Save/Cancel/Back/Attach, and the rail's own
	   fold (the new `bar-icon` role), share the phone head-tool's 36px --
	   they were the 30px left over from the desktop size. The touch floor
	   holds at 44px even so (the lead's ruling, same day): the box may
	   follow the spec down to 36, the tap target may not follow it. */
	:root[data-skin="daylight"] :is(.files-view-head > span > .files-btn, .rail-fold) {
		height: 36px; min-height: 36px; position: relative;
	}
	:root[data-skin="daylight"] :is(.files-view-head > span > .files-btn, .rail-fold)::after {
		content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
	}
	/* The first worded button sits flush to the panel's left edge (its ink lines up with the file name), so a
	   centred 44px overlay would run off the screen and the viewport clips it to 43px. It is anchored to the
	   button's left edge instead, as the first arrow of a rating row is (app.css).
	   AND ITS BOX IS THE FLOOR WIDE. Anchored at its left edge, a 44px overlay on a narrower box runs past its
	   right edge into the gap: "Edit" is 40.2px at x=1, so its overlay ran to x=45, 0.23px short of Download at
	   45.23, and WebKit's snapped hit test gave that column to Download (tap 43x45, gatefix 16 Oct). A tool that
	   cannot spend its overhang on the left has no room to spend it on the right either, so the box carries the
	   44px itself: it grows to the right (inline-flex, content at the start), the ink stays on the file name's
	   line, and the overlay is the box. */
	:root[data-skin="daylight"] .files-view-head > span > .files-btn:first-child { min-width: 44px; }
	:root[data-skin="daylight"] .files-view-head > span > .files-btn:first-child::after {
		left: 0; transform: translateY(-50%);
	}
	/* R8: the Terminal panel's own Start/Stop are plain `.addbtn`, outside
	   every named actions row this file already sizes for the phone, so they
	   were left at the base rule's own colour and (via a still-unfound path)
	   40px. Restated at the head-tool group's own 36px/`--text-secondary`. */
	:root[data-skin="daylight"] #panel-term .chead-right > .addbtn {
		height: 36px; min-height: 36px; color: var(--text-secondary);
	}
	/* Tap areas (5.2.6 review, "worse than 5.2.5"): every tool below keeps its
	   36px box, and its 44px target is an invisible overlay that nothing may
	   clip or cover. That takes three things: the overlay (one text for all),
	   a pitch of 44px so neighbours' overlays tile instead of overlapping (8px
	   between 36px boxes), and room in any scroller or clipping parent. */
	:root[data-skin="daylight"] :is(.panel:not(.ai) .chead-right > :is(.icon-btn, .icon-chip, #collapse-btn, .addbtn), #help-btn, #fullscreen-btn) {
		position: relative;
	}
	:root[data-skin="daylight"] :is(.panel:not(.ai) .chead-right > :is(.icon-btn, .icon-chip, #collapse-btn, .addbtn), #help-btn, #fullscreen-btn)::after {
		content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
	}
	:root[data-skin="daylight"] .panel:not(.ai) .chead-right { gap: 8px; }
	/* The top bar: the same 44px pitch for Help and Full screen, and a 44px
	   target for the mark, which stays at the bar's left edge. */
	:root[data-skin="daylight"] .top-actions { gap: 8px; }
	:root[data-skin="daylight"] a.brand { min-width: 44px; min-height: 44px; justify-content: flex-start; }
	:root[data-skin="daylight"] .panel:not(.ai) .chead-right > :is(.icon-btn, .icon-chip, #collapse-btn, .addbtn) { width: 36px; min-width: 36px; }
	/* The chat head is 5.2.5's, whole: its tools at their own 26-30px boxes on
	   a 2px gap in the scrolling strip, the title taking what they leave.
	   Nothing above or in responsive.css reaches `.panel.ai .chead-right`. */
	/* The rail's fold is clipped by the top half's `overflow: hidden`. */
	:root[data-skin="daylight"] #rail-top { margin-right: -4px; padding-right: 4px; }
	/* Every pressable status row is a finger's height, so the drawer's rows agree. */
	:root[data-skin="daylight"] :is(.astat-row.astat-id, .astat-row > #user-row, .astat-row.astat-btn, .astat-row.astat-sync) { min-height: 44px; }
	/* R9: the rail's own closer sits in `.pptw-head`, so the head-tool group
	   rule above (30px, unscoped, two grouped classes) outranks the plain
	   `.ui-close` phone rule (responsive.css) for it alone -- restated here at
	   higher specificity to win its 36px and its hit area back. */
	:root[data-skin="daylight"] #pptw-global-row .ui-close {
		height: 36px; min-height: 36px; width: 36px;
	}
	:root[data-skin="daylight"] .chead { padding: 8px 4px 4px 16px; min-height: 52px; }
	:root[data-skin="daylight"] .ctitle { font-size: var(--dl-md); font-weight: 600; }
	:root[data-skin="daylight"] { --tx-inset: 12px; }
	/* Both of these were off the seven-step scale, and the "your turn" one
	   also put the phone back in the condensed display face batch 1 took the
	   computer out of. Removed: both tiles now take the shared `.ctile-body`
	   rule (17px, the daimon's own face) on the phone too (sweep item 13,
	   completing batch-1 item 2). */
	:root[data-skin="daylight"] .railhead-acts > :is(button, select),
	:root[data-skin="daylight"] .pending-actions > button,
	:root[data-skin="daylight"] .railhead > .addbtn,
	:root[data-skin="daylight"] .railhead > button,
	:root[data-skin="daylight"] .chead-right > :is(button, .chip-btn, .mode-chip),
	:root[data-skin="daylight"] .astat-id > button { height: 36px; min-height: 36px; }
	:root[data-skin="daylight"] .chat-attach-strip { padding: 0 8px 0 16px; }
	:root[data-skin="daylight"] .chat-input-bar { padding: 4px 8px 12px 12px; }
	/* The row above the box (responsive.css): no rule here, as the bar has none, and the bar's insets. */
	:root[data-skin="daylight"] .panel.ai .composer-row { border-top: 0; padding: 4px 8px 0 12px; }
	:root[data-skin="daylight"] .ai,
	:root[data-skin="daylight"] .web,
	:root[data-skin="daylight"] .doc,
	:root[data-skin="daylight"] .msg,
	:root[data-skin="daylight"] .compose,
	:root[data-skin="daylight"] .tools { box-shadow: none; border-radius: 0; }
}

/* The attach row, while it holds nothing: its note and its two controls on
   one line over the field.

   DESK ONLY (QA round 2, M2). It was kept off phones while the jump buttons
   (`#chat-jump`/`#chat-end`) floated over the row's right edge, which put
   the "+" under them; they now sit in the composer row, so that reason is
   gone. Below the phone breakpoint the row still keeps base's two lines:
   folding it there would change what a phone shows, a separate call. */
@media (min-width: 761px) {
	:root[data-skin="daylight"] .ws-group:has(> .ws-body > .ws-empty:only-child) {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
	:root[data-skin="daylight"] .ws-group:has(> .ws-body > .ws-empty:only-child) > .ws-body { flex: 1 1 auto; min-width: 0; }
}
:root[data-skin="daylight"] .ws-empty { font-size: var(--dl-xs); color: var(--text-muted); padding-left: 0; }
:root[data-skin="daylight"] .files-path,
:root[data-skin="daylight"] .path-crumb {
	font-family: var(--font); font-size: var(--dl-sm);
	padding: 5px 10px; height: 29px; box-sizing: border-box; border-radius: var(--radius-sm);
}

/* ── The appearance menu and its kind ──────────────────────── */
/* A segmented control is a row of words; the chosen one takes the light chip,
   the same gesture as the header's tabs. */
:root[data-skin="daylight"] .seg { gap: 2px; }
/* One toggle option (D-20260929-03 §6), the design's own: 12px, `--w-text`,
   `--text-secondary`, padding 6px 8px, height 30px, radius `--radius-sm`, no
   border. The chosen one takes `--dl-on` with `--text-primary`. */
:root[data-skin="daylight"] :is(.seg button, .size-row button, .net-opt, .spend-toggle-btn, .mdash-toggle-btn,
	.files-mode-chip, .imp-chip, .tile-dlg-level, .dview-btn) {
	font-size: var(--dl-xs); font-weight: var(--w-text); letter-spacing: 0; line-height: 18px;
	color: var(--text-secondary); background: transparent; border-color: transparent; border-width: 0;
	border-radius: var(--radius-sm); padding: 6px 8px; height: 30px; min-height: 30px; box-sizing: border-box; gap: 4px;
}
:root[data-skin="daylight"] :is(.seg button, .size-row button, .net-opt, .spend-toggle-btn, .mdash-toggle-btn,
	.files-mode-chip, .imp-chip, .tile-dlg-level, .dview-btn):is([aria-pressed="true"], .on, .active) {
	background: var(--dl-on); color: var(--text-primary);
}
:root[data-skin="daylight"] .seg button:hover,
:root[data-skin="daylight"] .size-row button:hover:not(:disabled) { background: var(--dl-hover); border-color: transparent; color: var(--text-primary); }
/* The two-line side-panel options (Auto, 1, 2×2, 2×3, 3×2) keep their own
   height: the toggle-option rule's fixed 30px squashed their caption away. */
:root[data-skin="daylight"] .seg .grid-opt { height: auto; }
/* `.chead-left > #diamond-view .dview-btn` (app.css) outranks the toggle-option
   rule above on specificity (an id), so its own 30px padding is repeated here.
   The seat switch by the composer is the same control, drawn the same. */
:root[data-skin="daylight"] :is(#diamond-view, #seat-switch, #effort-step) .dview-btn { padding: 6px 8px; }
:root[data-skin="daylight"] .theme-pick:hover,
:root[data-skin="daylight"] .pop select:hover { border-color: transparent; background-color: var(--bg-hover); }
/* A chat tile's name sits on the same edge as a diamond's. A Pending tile's headline is the same label button (5.3.2): its
   padding and radius are the label's (app.css, and responsive.css on a phone), so the rail's names and the Pending headlines are
   measured as one kind. */
:root[data-skin="daylight"] .tile-label { padding-left: 0; }

/* ── Remaining controls ───────────────────────────────────── */
/* The last of the ruled, 1px-bordered controls the sweep found: the Graph
   bar, Email compose's fields and buttons, and
   the phone's Preview-sheet tabs and Web-sheet ask field (sweep item 7). */
:root[data-skin="daylight"] .graph-btn,
:root[data-skin="daylight"] .compose-btn,
:root[data-skin="daylight"] #msheet .msheet-tab {
	border-color: transparent;
	background: transparent;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
}
:root[data-skin="daylight"] .graph-btn:hover,
:root[data-skin="daylight"] .compose-btn:hover,
:root[data-skin="daylight"] #msheet .msheet-tab:hover { background: var(--dl-hover); border-color: transparent; color: var(--text-primary); }
/* A tab (§10): the top bar's own weight and side padding -- the Preview
   sheet's Source/Pages pair was a step heavier with no side padding. */
/* The tab role's own size (cluster 12), on top of §10's weight and padding:
   12px and the tab radius, not the text-button's smaller one above. */
:root[data-skin="daylight"] #msheet .msheet-tab { font-weight: var(--w-text); padding: 0 14px; font-size: var(--dl-xs); border-radius: var(--radius); }
:root[data-skin="daylight"] .graph-btn.on,
:root[data-skin="daylight"] #msheet .msheet-tab.on { background: var(--dl-on); border-color: transparent; color: var(--text-primary); }
:root[data-skin="daylight"] .graph-btn.primary,
:root[data-skin="daylight"] #compose-send { border-color: transparent; }
:root[data-skin="daylight"] .pending-sort,
:root[data-skin="daylight"] .compose-row > input,
:root[data-skin="daylight"] .compose-row > select,
:root[data-skin="daylight"] #msheet-ask-input {
	background: var(--bg-tertiary);
	border-color: transparent;
	border-radius: var(--radius-sm);
}
:root[data-skin="daylight"] .compose-row > input:focus,
:root[data-skin="daylight"] #msheet-ask-input:focus { outline: none; border-color: var(--accent); }

/* ── The phone floor (5.2.9, F9, decision D7): by role, controls only ──────────────────
   Every control has a tap cross of 44px both ways (bar rule 8). A text-bearing control or a
   field takes a 44px BOX, because its words are what the finger aims at. An icon-size control
   keeps its own box and wears the house 44px overlay (as `#drawer-btn` does, mobile.css), set
   at a 44px pitch so neighbours' overlays tile. Read-only rows are not controls and stay as
   they were. The chat head's tools are the head block's (the end of this file). */
@media (max-width: 760px) {
	/* Each role's own list, as its rule above names it. Fields and selects: */
	:root[data-skin="daylight"] :is(select, input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), textarea) { min-height: 44px; }
	/* Dialog actions, create buttons, the primary and plain text buttons: */
	:root[data-skin="daylight"] :is(.dlg-ok, .dlg-cancel, .tile-fold, .tile-keep, .compose-btn, .compose-send, .railhead > .railbtn,
		.crystal-act:not(.crystal-form-x), .graph-btn, .attach-view-btn, .attach-add, .code-copy-btn, .files-mode-btn,
		.imp-keep, .imp-send, .imp-vote, .shr-btn, .models-add, .tag-clear-all, .ti-continue,
		.pro-buy, .credit-buy, .tools-buy, .mail-unlock, .ar-save, .ar-card-btn, .pend-verb) { min-height: 44px; min-width: 44px; }
	/* Toggle options (the head's face switch keeps the head block's 30px box and overlay, so the Diamond head stays 96px): */
	:root[data-skin="daylight"] :is(.seg button, .size-row button, .net-opt, .spend-toggle-btn, .mdash-toggle-btn,
		.files-mode-chip, .imp-chip, .tile-dlg-level) { height: 44px; min-height: 44px; }
	/* ...and 44px wide, except the rating popup's steps, which share one row (their own rule, app.css). */
	:root[data-skin="daylight"] :is(.seg button, .size-row button, .net-opt, .spend-toggle-btn, .mdash-toggle-btn,
		.files-mode-chip, .imp-chip) { min-width: 44px; }
	/* Disclosures: */
	:root[data-skin="daylight"] :is(.rail-builtin > summary, .rel-builds > summary, .tagf-toggle, .arte-strip,
		.models-prov-head, .tile-dlg-adv-sum, .dlg-adv-sum, .crystal-memory-sum, .mem-raw-btn, .link-strip,
		.files-rest-head, .sys-head, .cap-more, .capp-conflicts > summary) { min-height: 44px; }
	:root[data-skin="daylight"] .crystal-act.mem-raw-btn { height: auto; min-height: 44px; }
	/* A Pending tile's headline is a 44px row. */
	:root[data-skin="daylight"] .pend-line { min-height: 44px; }
	/* A check label is a 44px row, its box centred. */
	:root[data-skin="daylight"] .dlg-tick { align-items: center; min-height: 44px; }
	/* A colour swatch is a field of colour: 44px tall. */
	:root[data-skin="daylight"] .tile-dlg-swatch { min-height: 44px; }
	/* The walk-back pair in the composer row: Send's 46px squares (D-20261014-08). */
	:root[data-skin="daylight"] :is(.composer-row #chat-jump, .composer-row #chat-end) {
		width: 46px; min-width: 46px; background: var(--bg-tertiary);
	}
	:root[data-skin="daylight"] :is(.composer-row #chat-jump, .composer-row #chat-end):hover { background: var(--dl-hover); }
	/* Icon-size controls: their own box, the house overlay. */
	/* `z-index: 1`: a neighbour that makes its own stacking context (the active tile's preview is `opacity: .7`) is painted over an
	   overlay at `z-index: auto`, so it took the lower half of a tile's cog and x. (The rating arrows wear U2's own overlay, app.css.) */
	:root[data-skin="daylight"] :is(.copy-id, .ctile-copy, .tile-cog, .tile-x, .attach-add, .attach-btn,
		.device-rename, .device-nominate, .device-remove, .mail-refresh,
		.pptw-act, .railhead .addbtn:not(.railbtn),
		.tagf-pool .tag-chip, .tagf-active .tag-chip, .session-box-tags .tag-chip) { position: relative; z-index: 1; }
	:root[data-skin="daylight"] :is(.copy-id, .ctile-copy, .tile-cog, .tile-x, .attach-add, .attach-btn,
		.device-rename, .device-nominate, .device-remove, .mail-refresh,
		.pptw-act, .railhead .addbtn:not(.railbtn),
		.tagf-pool .tag-chip, .tagf-active .tag-chip, .session-box-tags .tag-chip)::after {
		content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
	}
	/* Small text controls: a crumb, an inline link. The same overlay, as wide as the control or 44px. */
	:root[data-skin="daylight"] :is(.path-crumb, .termp-install, .rate-jump-link, .mail-learn-more, .spend-add-credits) { position: relative; z-index: 1; }
	:root[data-skin="daylight"] :is(.path-crumb, .termp-install, .rate-jump-link, .mail-learn-more, .spend-add-credits)::after {
		content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
	}
	/* The Workspace crumb's overlay hangs 7px below its 29px row, over the Filter field's top rows: 8px of margin below the row puts
	   the field clear of it, so a tap there is the field's. */
	:root[data-skin="daylight"] .files-path { margin-bottom: 8px; }
	/* Tag chips that are buttons. The chip clips its own text (`overflow: hidden`, app.css), which also clipped the overlay to the
	   chip's 19px, so the clip is on the x axis only (`text-overflow` still computes). A 19px chip, 26px between rows and 13px above
	   and below the block make a 44px pitch, and 8px between chips, so the overlays of neighbours tile. A short tag is 44px wide, and
	   `safe` keeps both ends of a long one on screen. */
	:root[data-skin="daylight"] :is(.tagf-pool, .tagf-active) { row-gap: 26px; column-gap: 8px; padding-block: 13px; }
	/* A Diamond's tags are ONE row that pans sideways, however many there are, so the tile is one height whatever its tags: a chip
	   past the strip's right edge is cut by it, which is the cue. An x-scroller clips y too, so the strip's own box is the 44px
	   the overlays need (19px chips, 13px above and below). It stops 32px short of the tile's right content edge, which is where the
	   cog's overlay begins (the cog is 20px at the edge, its overlay reaches 12px to its left), so a chip never lies under it. */
	:root[data-skin="daylight"] .diamond-box > .session-box-tags {
		flex-wrap: nowrap; column-gap: 8px; padding-block: 13px; margin-right: 32px;
		overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
	}
	:root[data-skin="daylight"] .diamond-box > .session-box-tags::-webkit-scrollbar { display: none; }
	:root[data-skin="daylight"] :is(.tagf-pool, .tagf-active, .session-box-tags) button.tag-chip {
		overflow-x: clip; overflow-y: visible; min-width: 44px; justify-content: safe center;
	}
	/* Icon clusters at a 44px pitch, so overlays tile instead of stealing from one another: the gap is 44px less the box (8px
	   between 36px boxes, 24px between 20px boxes), set on each cluster's container, or on the one control that has a label before it. */
	:root[data-skin="daylight"] :is(.railhead, .railhead-acts, .files-actions, .mail-actions, .spend-actions, .trash-actions, .pending-actions, .pptw) { gap: 8px; }
	:root[data-skin="daylight"] .session-box-header > .tile-x { margin-left: 18px; }
	/* The last tool of a sheet's head sits at the panel's edge, which clips an overlay hanging outside it. */
	:root[data-skin="daylight"] :is(.files-actions, .mail-actions) { margin-right: 4px; }
	:root[data-skin="daylight"] :is(.session-list, .diamond-list) { padding-top: 3px; }
	:root[data-skin="daylight"] .device-row > .copy-id { margin-right: 16px; }
	:root[data-skin="daylight"] .device-acts { column-gap: 22px; }
	:root[data-skin="daylight"] .device-ctl { gap: 12px; }
	/* A file row is a 44px row, and its trailing icons are the icon button's 20px box, 24px apart. */
	:root[data-skin="daylight"] .files-row, :root[data-skin="daylight"] .files-focus .r { box-sizing: border-box; min-height: 44px; align-items: center; }
	:root[data-skin="daylight"] .files-row > .files-more { min-width: 20px; margin-left: 20px; text-align: center; }
	/* A message's label bar is the collapse control and holds Copy: a 44px row, and 16px from the tile's edge, which clips an
	   overlay that hangs outside it (`.ctile { overflow: hidden }`). The 44px is the row's 19px line and the tile's one
	   depth token above and below it, so the text in every tile, folded or open, sits at that depth (D-20261010-16). */
	:root[data-skin="daylight"] { --tx-pad-y: 12.5px; }
	:root[data-skin="daylight"] :is(.ctile-lbl, .crollup-lbl) { line-height: 19px; padding: var(--tx-pad-y) 16px var(--tx-pad-y) var(--ct-pad-x, 12px); }
	/* The sort select has no pseudo-element to wear an overlay, so its box is the 44px. One class more than the head-tool rule
	   above (0,4,0), which holds its height at 30px. */
	:root[data-skin="daylight"] .pending-actions > select.pending-sort { height: 44px; min-height: 44px; }
	/* A sheet's head starts where its content does (the panel's edge and its 1px), not 3px in: the Workspace title stood at x 12
	   over disclosure rows at 9. The drawer's own heads stay at the tiles' edge. */
	:root[data-skin="daylight"] .panel:not(.rail) > .railhead { padding-left: 1px; }
	/* "Learn more" sits 19px under the mail card's top edge, which clips an overlay that reaches 22px. */
	:root[data-skin="daylight"] .mail-fine { margin-top: 3px; }
	/* The id rows of Admin are 44px rows, so the copy buttons stand a finger apart. */
	:root[data-skin="daylight"] :is(.account-fp, .astat-copyrow) { min-height: 44px; }
	/* A "+" and a refresh at a card's edge: their box is the 44px, since the card clips an overlay that hangs outside it. */
	:root[data-skin="daylight"] :is(.attach-add.icon, .mail-refresh) { min-width: 44px; }
}

/* ── Cards: a fill, not a line ─────────────────────────────── */
/* The left bars became a uniform coloured border, which only moved the line
   from one side to four (5.2.6 review, F3). A card is a light fill; the state
   it is in is the fill's colour. */
:root[data-skin="daylight"] .acard.done { background: var(--ok-bg); }
:root[data-skin="daylight"] .acard.error { background: color-mix(in srgb, var(--danger) 12%, transparent); }
:root[data-skin="daylight"] .ask-card { background: var(--accent-soft); }
:root[data-skin="daylight"] .lapse-note { background: var(--warn-bg); }

/* ── The phone chat head: the title, the mode and one "more" on a row ────────────────
   The owner's choice of 2026-09-30 ("B: title, mode, one more menu"). The head keeps what must
   always be on screen: the title, the permission mode (a state you read) and one "more".
   Concise, Copy, Steps, Expand and Select are rows of its menu (js/workspace.js `foldAll` moves
   the real buttons in and out); a Diamond's Fold stays on its second row, where full screen sits
   on the crystal face. Nothing scrolls and nothing sits under a fade.

   EVERY TOOL KEEPS THE HEAD-TOOL ROLE'S OWN BOX (36px; the face switch's 30px) AND WEARS THE HOUSE
   44px OVERLAY, as every other panel's head tool does: a tool is one drawing everywhere (bar rule 2),
   and its tap area is the overlay's. Each line is 44px (a box and the margin around it), so
   the overlays of one line tile the line and never reach the next. The first version of this block
   drew 44px boxes, and the gate read seven new head-tool rows and two toggle rows for it.

   The two clusters dissolve into the head (`display: contents`), so each control is one item of one
   wrapping row, and `order` plus two empty full-width breaks set the rows: the title, then a Diamond's
   face switch and Fold or full screen, then select mode's own row. This block loads after mobile.css
   (index.html), which is why it lives here: the numbers were measured with this order. */
@media (max-width: 760px) {
	:root[data-skin="daylight"] .panel.ai .chead {
		flex-wrap: wrap; align-content: flex-start; align-items: center; justify-content: flex-start;
		gap: 0; padding: 4px 4px 4px 16px; min-height: 52px;
	}
	:root[data-skin="daylight"] .panel.ai .chead > :is(.chead-left, .chead-right) { display: contents; }
	/* A break is an item wider than the row (by more than any negative margin beside it), so nothing can share its line. */
	:root[data-skin="daylight"] .panel.ai .chead::before,
	:root[data-skin="daylight"] .panel.ai .chead::after { content: ''; flex: 0 1 calc(100% + 24px); height: 0; }
	:root[data-skin="daylight"] .panel.ai .chead::after  { order: 4; }
	:root[data-skin="daylight"] .panel.ai .chead::before { order: 8; }

	/* The house overlay: 44px tall, as wide as the tool or 44px, centred on its box. Not `::after`, which "more" uses for its dot. */
	:root[data-skin="daylight"] .panel.ai .chead :is(.chead-right > :is(button, .chip-btn, .mode-chip), .csel .chip-btn, .dview .dview-btn) {
		position: relative; flex: 0 0 auto; margin-block: 4px;
	}
	:root[data-skin="daylight"] .panel.ai .chead :is(.chead-right > :is(button, .chip-btn, .mode-chip), .csel .chip-btn, .dview .dview-btn)::before {
		content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
	}

	/* Row 1: the mark, the title, the mode, the menu. */
	:root[data-skin="daylight"] .panel.ai .chead .chead-mark { order: 0; margin-right: 6px; }
	:root[data-skin="daylight"] .panel.ai .chead .ctitle { order: 1; flex: 1 1 0; min-width: 0; align-self: center; }
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #hand-mode-chip { order: 2; flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #hand-mode-chip .mode-chip-txt {
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	/* The icon-only tools are 36px high (the head-tool role's icon form) and 44px wide, so a line of them is 44px apart. */
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > .icon-chip,
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > .cfull-btn,
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #collapse-btn {
		width: 44px; min-width: 44px; padding: 0; justify-content: center;
	}
	/* And the worded ones are the mode chip's: 9px either side, a 12px line. */
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #chat-fold-btn { padding: 0 9px; line-height: 12px; min-width: 44px; }
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #chead-more { order: 3; display: inline-flex; }
	/* A standing setting behind the menu is still said on the head: a dot while Concise or select mode is on. */
	:root[data-skin="daylight"]:has(#chead-more-menu > #concise-chip.on) .panel.ai .chead #chead-more::after,
	:root[data-skin="daylight"] .panel.ai .chead.selecting #chead-more::after {
		content: ''; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
	}
	:root[data-skin="daylight"] .panel.ai .chead #ai-meter:empty,
	:root[data-skin="daylight"] .panel.ai .chead #chead-when:empty { display: none; }

	/* Row 2, a Diamond only: the face switch, its "edited" time, and Fold or full screen at the right. */
	:root[data-skin="daylight"] .panel.ai .chead #diamond-view { order: 5; margin: 7px 0 7px -8px; overflow: visible; }
	:root[data-skin="daylight"] .panel.ai .chead #diamond-view .dview-btn { margin-block: 0; min-width: 44px; }
	/* The seat switch by the composer is the face switch's control, so it keeps the same 30px box, 44px width and 44px overlay. */
	:root[data-skin="daylight"] .panel.ai :is(#seat-switch, #effort-step) { overflow: visible; }
	:root[data-skin="daylight"] .panel.ai :is(#seat-switch, #effort-step) .dview-btn { position: relative; min-width: 44px; }
	:root[data-skin="daylight"] .panel.ai :is(#seat-switch, #effort-step) .dview-btn::before {
		content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
	}
	:root[data-skin="daylight"] .panel.ai .chead #chead-when { order: 6; margin-left: 8px; }
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > :is(#crystal-full-btn, #chat-fold-btn) { order: 7; margin-left: auto; }

	/* Row 3, select mode only: its three words and the way out (Collapse, drawn only while the mode is on). */
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #select-tools {
		order: 9; flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; margin-left: -9px;
	}
	:root[data-skin="daylight"] .panel.ai .chead .csel .chip-btn:not(.accent) { color: var(--text-secondary); }
	:root[data-skin="daylight"] .panel.ai .chead .csel .chip-btn { padding: 0 9px; line-height: 12px; height: 36px; min-height: 36px; min-width: 44px; }
	:root[data-skin="daylight"] .panel.ai .chead .csel .csel-count { padding: 0 8px; }
	:root[data-skin="daylight"] .panel.ai .chead .chead-right > #collapse-btn { order: 10; display: none; }
	:root[data-skin="daylight"] .panel.ai .chead.selecting .chead-right > #collapse-btn { display: inline-flex; align-items: center; }

	/* The menus that fold in on a phone, Help's and the head's: one row, a finger high. An icon, a gap of 4px and a
	   word, on the fill a selected row takes everywhere. The head's rows are real `.chip-btn` buttons, so this
	   restates the box a chip is given (`app.css` draws an icon chip at 26px). */
	:root[data-skin="daylight"] [data-menu="rows"] > button {
		box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start;
		width: 100%; min-width: 0; height: auto; min-height: 44px; margin: 0; padding: 10px 8px; gap: 4px;
		border: none; border-radius: var(--radius-sm); background: transparent;
		color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm); line-height: inherit; text-align: left; white-space: nowrap; opacity: 1;
	}
	:root[data-skin="daylight"] [data-menu="rows"] > button:hover { background: var(--dl-hover); }
	:root[data-skin="daylight"] [data-menu="rows"] > button:is(.on, [aria-pressed="true"]) { background: var(--dl-on); }
	:root[data-skin="daylight"] [data-menu="rows"] > button .ic { width: 16px; height: 16px; flex: none; }
}