/* ===================== signal/00-tokens.css ===================== */
/* ============================================================================
SIGNAL 00 — tokens, type, density, focus, a11y media (foundation)
signal/00-tokens.css, concatenated first into out/app-signal.css, which is
linked AFTER app.css. Every rule lives under html[data-ui="signal"]; with
the flag off this file changes nothing. Dark = html[data-ui="signal"][data-theme="dark"].
AMBER ALLOW-LIST — binding for every file of this pass
#FFB020 / var(--ci-amber) may appear ONLY as:
1. the unread dot (8px), with a 1.5px navy ring on light surfaces (--unread-ring)
2. the 3px current-item bar: folder row, message row, rail button, command tab, Cmd-K row
3. the count Badge fill under navy ink (--ci-ink-on-amber):
.folder-count .rail-badge .mnav-badge .rp-tab-badge .ci-badge
4. the focus ring (the outline; a navy shadow sits under it)
5. the header 2px bottom edge (.app-header)
6. the login card top edge (.login-card)
7. the "you" avatar: navy initial on amber (signed-in user, own mailboxes)
8. the phone bottom-nav active tab — amber ON navy only (.mnav-btn.on)
Nothing else. Amber text on a light surface: never (1.8:1 on white).
Attention pills are dark ink #5C3D00 on the light tint #FFF1D6, not amber.
In dark (surfaces <= #163E66) amber reads 9-10:1 and may also carry a label:
bottom-nav active tab, header unread counter, the Recent panel "NEW" tag.
Lint gate (build_signal.py): a "color:" declaration carrying #FFB020 or
--ci-amber outside items 4/7/8 and outside dark blocks → 0 hits.
============================================================================ */
/* ----------------------------------------------------------------------------
1. LIGHT TOKENS (also the explicit data-theme="light"; the app leaves
data-theme="" on light, which this block covers as well)
---------------------------------------------------------------------------- */
html[data-ui="signal"] {
color-scheme: light;
/* brand (brand guidelines v1.2; the single source from here on) */
--ci-navy: #06254A;
--ci-deep: #0D4A8F;
--ci-blue: #1A6FD4;
--ci-sky: #3B93E8;
--ci-ice: #EAF3FD;
--ci-amber: #FFB020;
--ci-amber-dark: #E09410; /* non-text accents only (alert edge) */
--ci-ink-on-amber: #06254A;
/* surfaces */
--bg: #F4F7FB; /* cool paper (was #FAF9F8) */
--bg-card: #FFFFFF;
--bg-sunken: #EAF0F7; /* list pane, settings nav column, rail */
--divider: #E3EAF2;
--border: #C9D6E5; /* decorative edges */
--border-strong: #7F97B3; /* inputs and controls, 3.01:1 on white */
--hover: #EDF3FA;
--selected: #EAF3FD;
--selected-hover: #D6E7FA;
--bg-elevated: var(--hover); /* used by live css 2096 (.conv-strip) and 2329 (.ext-add-row:hover), never defined */
--scrim: rgba(6,37,74,.45);
--paper: #FFFFFF; /* read body / compose editor surface */
--paper-dim: #DDE5EE; /* .ci-dim */
--paper-ink: #0B1F38;
--header-bg: linear-gradient(100deg, var(--ci-navy) 0%, var(--ci-deep) 100%);
/* ink */
--ink: #0B1F38; /* 16.6:1 on white */
--ink-2: #3D5572; /* 7.7:1 */
--ink-3: #566F8E; /* 5.2:1 white, 4.8:1 --bg, 4.6:1 ice */
--ink-placeholder: #7A8CA3; /* 3.4:1, placeholders only */
--ink-inverse: #EAF3FD; /* 13.7:1 on navy */
/* action — the accent picker and tenant branding write --primary (and
--primary-dark) inline on ; inline beats this block, so a saved
accent still wins and hover derives from it instead of being flattened */
--accent-user: var(--ci-blue);
--primary: var(--accent-user);
--btn-primary-bg: var(--primary);
--btn-primary-hover: color-mix(in srgb, var(--primary) 85%, #06254A);
--btn-primary-active:#0D4A8F;
--link: var(--primary); /* 4.9:1; underline on hover only */
--danger: #A4262C; /* destructive text/icons, 7.3:1 on white */
--danger-fill: #A4262C; /* destructive button fill, white text */
--success: #0B6B2E; /* 6.7:1 */
/* semantic pills (security-grade) */
--pill-ok-fg: #0B6B2E; --pill-ok-bg: #E6F4EA; --pill-ok-bd: #BFE3CB;
--pill-info-fg: #0D4A8F; --pill-info-bg: #EAF3FD; --pill-info-bd: #A9CDF4;
--pill-attn-fg: #5C3D00; --pill-attn-bg: #FFF1D6; --pill-attn-bd: #F5D58A;
--pill-danger-fg: #A4262C; --pill-danger-bg: #FDE7E9; --pill-danger-bd: #F3B9BE;
--pill-muted-fg: #3D5572; --pill-muted-bg: #EDF3FA; --pill-muted-bd: #E3EAF2;
/* avatar palette (replaces the rainbow in avatarFor; all >= 4.9:1 with white) */
--av-1: #0D4A8F; --av-2: #1A6FD4; --av-3: #0E7C7B;
--av-4: #5B3FA6; --av-5: #9A3D5A; --av-6: #2F6B3A;
/* amber grammar helpers */
--unread-ring: 0 0 0 1.5px var(--ci-navy); /* the ring that gives the dot its 3:1 */
--shadow-amber: 0 0 0 1.5px #06254A, 0 0 10px -2px rgba(255,176,32,.6);
/* spacing (4px base) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px;
/* radii */
--r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
/* shadows (navy-tinted) */
--shadow-sm: 0 1px 2px rgba(6,37,74,.08), 0 1px 1px rgba(6,37,74,.04);
--shadow-md: 0 4px 12px rgba(6,37,74,.12), 0 1px 3px rgba(6,37,74,.08);
--shadow-lg: 0 16px 40px -8px rgba(6,37,74,.28), 0 4px 12px rgba(6,37,74,.10);
/* focus (see section 7) */
--focus-outline: 2px solid var(--ci-amber);
--focus-ring: 0 0 0 4px var(--ci-navy);
--focus-ring-inset: inset 0 0 0 4px var(--ci-navy);
--focus-input-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
/* motion */
--dur-1: 120ms; /* hover, press */
--dur-2: 180ms; /* menus, popovers */
--dur-3: 240ms; /* sheets, drawer */
--ease-out: ease-out;
--ease-pop: cubic-bezier(.2,.8,.2,1);
/* sizes (wide desktop >= 1280; the tiers below override) */
--header-h: 52px;
--cmdbar-h: 44px;
--rail-w: 60px;
--folder-w: 264px;
--list-w: 392px;
--rp-w: 360px;
--icon-btn: 36px; /* 44 on pointer:coarse */
--touch: 44px;
--fab: 56px;
--menu-item-h: 36px; /* 48 in phone sheets */
/* --mnav-h / --mnav-gap / --mnav-clear are phone-only, like the live file (section 5) */
}
html[data-ui="signal"][data-theme="light"] { color-scheme: light; }
/* ----------------------------------------------------------------------------
2. LEGACY REMAP (light) — every custom-property name the live app.css reads
(44 distinct var() names, scan 2026-10-17) keeps resolving.
--primary→--accent-user/--ci-blue --primary-dark→--ci-deep --primary-darker→--ci-navy
--primary-tertiary→--ci-sky --primary-light #A9CDF4 --primary-lighter #CFE2F9
--primary-lighter-alt→--ci-ice --neutral-dark→--ink --neutral-primary #1E3350
--neutral-secondary→--ink-2 --neutral-tertiary→--ink-3 --neutral-quaternary→--ink-placeholder
--neutral-light→--border --neutral-lighter→--divider --neutral-lightest→--bg-sunken
--text-primary/-secondary/-tertiary→--ink/--ink-2/--ink-3 --font→--font-ui
--warn→--ci-amber-dark (unused by live, non-text) --accent→--primary (css 2330/2337, undefined)
--primary-soft→--selected (js 787 inline, undefined) --bg-elevated→--hover (css 2096/2329, undefined)
--bg --bg-card --divider --border --hover --selected --selected-hover --danger --success
--shadow-* --header-h --rail-w --folder-w --list-w --rp-w --ci-* keep their names (new values above).
--rp-top and --rp-c are runtime values the JS writes inline (js 10016, 10386): not declared here on purpose.
---------------------------------------------------------------------------- */
html[data-ui="signal"] {
--primary-dark: var(--ci-deep);
--primary-darker: var(--ci-navy);
--primary-tertiary: var(--ci-sky);
--primary-light: #A9CDF4;
--primary-lighter: #CFE2F9;
--primary-lighter-alt: var(--ci-ice);
--primary-soft: var(--selected);
--accent: var(--primary);
--neutral-dark: var(--ink);
--neutral-primary: #1E3350;
--neutral-secondary: var(--ink-2);
--neutral-tertiary: var(--ink-3);
--neutral-quaternary: var(--ink-placeholder);
--neutral-light: var(--border);
--neutral-lighter: var(--divider);
--neutral-lightest: var(--bg-sunken);
--text-primary: var(--ink);
--text-secondary: var(--ink-2);
--text-tertiary: var(--ink-3);
--warn: var(--ci-amber-dark);
}
/* ----------------------------------------------------------------------------
3. DARK TOKENS + legacy remap (dark). applyTheme() resolves "auto" and
writes data-theme="dark"; no prefers-color-scheme branch here on purpose.
---------------------------------------------------------------------------- */
html[data-ui="signal"][data-theme="dark"] {
color-scheme: dark;
--bg: #071422;
--bg-card: #0E1F33;
--bg-sunken: #050F1A;
--divider: #1A3350;
--border: #28496D;
--border-strong: #4A6E96; /* 3.1:1 on card */
--hover: #14304A;
--selected: #163E66;
--selected-hover: #1C4C7C;
--bg-elevated: var(--hover);
--scrim: rgba(0,0,0,.6);
--paper: #F7F9FC; /* the read body stays paper; .ci-dim → --paper-dim */
--paper-dim: #DDE5EE;
--paper-ink: #0B1F38;
--header-bg: linear-gradient(100deg, #041A34 0%, #06254A 100%);
--ink: #E8F0F9; /* 14.5:1 on card */
--ink-2: #A9BCD3; /* 8.6:1 */
--ink-3: #7D94B0; /* 5.3:1 */
--ink-placeholder: #6B83A0;
--ink-inverse: #EAF3FD;
/* sky for icons/links at >= 14px 500 (5.2:1); buttons keep Insight Blue with
white text (4.9:1) because white on sky is only 3.2:1 */
--accent-user: var(--ci-sky);
--btn-primary-bg: var(--ci-blue);
--btn-primary-hover: color-mix(in srgb, var(--ci-blue) 85%, #06254A);
--btn-primary-active:#0D4A8F;
--link: #7DB9F2; /* inline body links, 8.0:1 */
--danger: #F39DA3; /* 8.0:1 on card */
--danger-fill: #A4262C;
--success: #7FE0A0;
--pill-ok-fg: #7FE0A0; --pill-ok-bg: #0F2E1A; --pill-ok-bd: #1F5A33;
--pill-info-fg: #9CC8F5; --pill-info-bg: #163E66; --pill-info-bd: #28496D;
--pill-attn-fg: #F5CF6B; --pill-attn-bg: #3A2A08; --pill-attn-bd: #5C4A14;
--pill-danger-fg: #F39DA3; --pill-danger-bg: #3B1215; --pill-danger-bd: #6B2328;
--pill-muted-fg: #A9BCD3; --pill-muted-bg: #14304A; --pill-muted-bd: #28496D;
/* amber is 9-10:1 on these surfaces: the dot drops its ring */
--unread-ring: 0 0 0 0 transparent;
--shadow-amber: 0 0 10px -2px rgba(255,176,32,.6);
--shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.30);
--shadow-md: 0 4px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.40);
--shadow-lg: 0 16px 40px -8px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.40);
/* focus: the shadow swaps to the page colour, the amber stays on the outline
(the part that survives clipping and forced colours) */
--focus-ring: 0 0 0 4px #071422;
--focus-ring-inset: inset 0 0 0 4px #071422;
--focus-input-ring: 0 0 0 3px color-mix(in srgb, var(--ci-sky) 35%, transparent);
/* legacy names, dark values (DARK v2 lineage, css 2671-2696) */
--primary-dark: var(--ci-blue);
--primary-darker: var(--ci-deep);
--primary-tertiary: #7DB9F2;
--primary-light: #163E66;
--primary-lighter: #0F2F52;
--primary-lighter-alt: #0C2743;
--primary-soft: var(--selected);
--neutral-primary: #CAD7E6;
--neutral-quaternary: #506983;
--neutral-light: var(--border);
--neutral-lighter: var(--divider);
--neutral-lightest: var(--hover); /* "lightest" neutral is a raised surface in dark, not a sunken one */
}
/* dark surfaces that live rules paint from the remapped names */
html[data-ui="signal"][data-theme="dark"] * { scrollbar-color: #27476A transparent; }
/* ----------------------------------------------------------------------------
4. TYPE — families, scale, element defaults, display slots
Google Fonts ; inert
Beaten by specificity alone (no !important needed): 1863-1867, 1873-1882
(--header-h/--rail-w, .message-row padding, body font-size).
The re-declarations are @media screen so the live print rules (2033-2043) are not out-ranked.
Excluded from the folder-row override: li.ext-acc-row / li.ext-acc-folders / li.ext-folder-row,
whose own !important paddings (2585, 2599, 2606, 2908) define the connected-accounts tree.
---------------------------------------------------------------------------- */
html[data-ui="signal"] { /* cozy = defaults */
--row-h: 68px;
--folder-row-h: 36px;
--folder-li-pad: 8px 12px 8px 16px;
--folder-li-fs: 14px;
--read-pad-x: 32px;
--read-pad-y: 28px;
--read-subject-fs: var(--fs-display-md);
--read-subject-lh: var(--lh-display-md);
}
html[data-ui="signal"][data-density="compact"] {
--header-h: 44px;
--fs-body: 13px;
--lh-body: 18px;
--row-h: 56px;
--folder-row-h: 32px;
--folder-li-pad: 7px 12px 7px 14px;
--folder-li-fs: 13px;
--read-pad-x: 24px;
--read-pad-y: 20px;
--read-subject-fs: 20px;
--read-subject-lh: 26px;
}
html[data-ui="signal"][data-density="comfortable"] {
--header-h: 60px;
--fs-body: 15px;
--lh-body: 22px;
--lh-read: 26px;
--row-h: 84px;
--folder-row-h: 40px;
--folder-li-pad: 9px 14px 9px 18px;
--folder-li-fs: 15px;
--read-pad-x: 36px;
--read-pad-y: 32px;
--read-subject-fs: 24px;
--read-subject-lh: 30px;
}
@media screen {
html[data-ui="signal"][data-density="compact"] .folder-list li:not(.ext-acc-row):not(.ext-acc-folders):not(.ext-folder-row),
html[data-ui="signal"][data-density="comfortable"] .folder-list li:not(.ext-acc-row):not(.ext-acc-folders):not(.ext-folder-row) {
padding: var(--folder-li-pad) !important; /* beats live 1869 / 1883 */
font-size: var(--folder-li-fs);
}
html[data-ui="signal"][data-density="compact"] .read-head,
html[data-ui="signal"][data-density="comfortable"] .read-head {
padding: var(--read-pad-y) var(--read-pad-x) calc(var(--read-pad-y) * .6) !important; /* beats live 1870 / 1885 */
}
html[data-ui="signal"][data-density="compact"] .read-body,
html[data-ui="signal"][data-density="comfortable"] .read-body {
padding: var(--read-pad-y) var(--read-pad-x) !important; /* beats live 1871 / 1886 */
line-height: var(--lh-read);
}
html[data-ui="signal"][data-density="compact"] .read-subject,
html[data-ui="signal"][data-density="comfortable"] .read-subject {
font-size: var(--read-subject-fs) !important; /* beats live 1872 / 1884 */
line-height: var(--read-subject-lh);
}
}
/* ----------------------------------------------------------------------------
7. FOCUS — :focus-visible only, so mouse clicks stay quiet.
Light: amber outline, navy 4px shadow under it. Dark: outline stays
amber, the shadow becomes the page colour (tokens in blocks 1 and 3).
Inputs: single Insight-blue border + 3px soft ring instead of the two-tone ring.
Rows inside scroll panes use the inset variant so the ring is not clipped.
---------------------------------------------------------------------------- */
html[data-ui="signal"] :focus-visible {
outline: var(--focus-outline);
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
html[data-ui="signal"] :is(.message-row, .folder-list li, .cmdk-item, .msheet-item, .rp-item, .rp-ghead, .sni, .acct-tile):focus-visible {
outline-offset: -3px;
box-shadow: var(--focus-ring-inset);
}
html[data-ui="signal"] :is(input, select, textarea, [contenteditable="true"]):focus-visible {
outline: 1px solid var(--primary);
outline-offset: -1px;
border-color: var(--primary);
box-shadow: var(--focus-input-ring);
}
html[data-ui="signal"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
outline: var(--focus-outline);
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
/* ----------------------------------------------------------------------------
8. FORCED COLOURS (Windows High Contrast) — fills and shadows are dropped
by the UA, so every amber marker, selection fill and badge gets a border
or an outline in system colours.
---------------------------------------------------------------------------- */
@media (forced-colors: active) {
html[data-ui="signal"] :focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
html[data-ui="signal"] :is(.message-row, .folder-list li, .cmdk-item, .msheet-item, .rp-item, .rp-ghead, .sni, .acct-tile):focus-visible {
outline-offset: -3px;
}
/* current item / selection (the 3px amber bar and the ice fill vanish) */
html[data-ui="signal"] :is(.folder-list li.active, .message-row.selected, .message-row.bulk-selected,
.message-row[aria-current], .rail-btn-active, .cmd-tab.on, .cmdk-item.active,
.mnav-btn.on, .chip-active, .sni.active, .ci-chip[aria-pressed="true"]) {
outline: 2px solid Highlight;
outline-offset: -2px;
}
/* unread marker: the live ::after dot (css 692/2451) or the module's .unread-dot element */
html[data-ui="signal"] .message-row.unread::after,
html[data-ui="signal"] .unread-dot {
forced-color-adjust: none;
background: Highlight;
border: 1px solid CanvasText;
}
/* badges, pills, chips, alerts: keep an edge when the fill goes */
html[data-ui="signal"] :is(.folder-count, .rail-badge, .mnav-badge, .rp-tab-badge, .ci-badge,
.ci-pill, .ci-chip, .ci-alert, .dlv-pill, .tm-chip, .ai-cat-badge, .cat-badge) {
border: 1px solid CanvasText;
}
html[data-ui="signal"] .ci-splitter { border-inline-start: 1px solid CanvasText; }
html[data-ui="signal"] .ci-skeleton { border: 1px solid GrayText; }
}
/* ----------------------------------------------------------------------------
9. REDUCED MOTION — motion tokens go to zero and every animation/transition
ends immediately (the end state still applies; transitionend still fires).
!important here is required: a universal rule at (0,1,1) could not beat the
component-level animation/transition declarations it has to silence.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html[data-ui="signal"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
html[data-ui="signal"] *,
html[data-ui="signal"] *::before,
html[data-ui="signal"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===================== signal/01-shell.css ===================== */
/* ============================================================================
SIGNAL 01 — shell: header · one-row command bar · places rail · folder pane
(Source List) · list pane (header, toggle group, chips, rows, states) ·
splitters · badges · pills · tablet folder drawer.
signal/01-shell.css, concatenated after 00-tokens.css into out/app-signal.css,
which is linked AFTER app.css. Every rule is scoped under html[data-ui="signal"]
(+(0,1,1) over the live rule of the same shape). Dark values sit in the same
block as their light values, as html[data-ui="signal"][data-theme="dark"] rules;
most components flip through the tokens alone.
AMBER in this file (allow-list items, header of 00-tokens.css):
1 the unread dot: .message-row.unread::after / .unread-dot (ring = --unread-ring)
2 the 3px current-item bar: .folder-list li.active::before, .message-row.selected::before,
.rail-btn-active::before; the 2px underline of the current tab (.cmd-tab.on, box-shadow)
3 badge fills under navy ink: .folder-count, .rail-badge, .ci-badge
5 .app-header border-bottom
7 the "you" avatar: .header-user (navy initial on amber)
No "color:" declaration in this file carries amber.
LEGACY !important RULES — none beaten here, and this file declares none. The live
!important rules that touch these selectors are either phone state rules that must
stay (css 1059 .app-body display:block, 2846 #cmdBar hidden, 2848 .left-rail hidden,
2885 .list-pane left — all <= 768, restated by module 99), the density rules the
foundation already re-declares (1869/1883 .folder-list li — read here through
--folder-li-pad / --folder-li-fs), the connected-accounts tree paddings left alone on
purpose (2585, 2599, 2606, 2908), or 1998 li.drop-target background (same token, nothing
to beat). Live 3863 ".compose-row-actions-mini.ci-empty { display:none !important }"
already uses the .ci-empty name, so the list empty state is styled as
".message-list .ci-empty" only.
WIDTH TIERS (tokens: 00-tokens.css section 5; the splitters write --folder-w/--list-w
inline on and win over all of them)
>= 1280 rail 60 · folder 264 · list 392 · read minmax(380px, 1fr)
1100-1279 56 · 232 · 352 (Recent panel docked: 208 · 320, read minmax(0, 1fr))
1024-1099 56 · 216 · 320 → read >= 432px at 1024
769-1023 56 · drawer 300 · list 320 · read minmax(0, 1fr) → >= 393px at 769
<= 768 module 03 (phone). This file only hides .ci-splitter there.
COMMAND BAR DOM (renderCommandBar, js 3319):
#cmdBar.cmdbar[role=toolbar]
> .cmd-tabs > .cmd-tab[data-tab] ×3, .cmd-tabs-fill, .cmd-tab.cmd-tab-search[data-cmd=palette]
> .cmd-row > .cmd[data-cmd] (.cmd-ic, .cmd-lb, .cmd-caret), .cmd-sep
One 44px row = tabs | .cmd-row | fill | ⌘K through flex order. Two DOM shapes work:
(a) unchanged — the ⌘K button is still inside .cmd-tabs, detected with :has(), and
.cmd-tabs is flattened (display: contents) so its children join the row;
(b) the JS wrapper has moved .cmd-tabs-fill and .cmd-tab-search up to .cmdbar and put
role=tablist on .cmd-tabs — then .cmd-tabs stays a real flex child (order 0).
The .one-row marker on .cmdbar is accepted; the layout does not depend on it.
============================================================================ */
/* ----------------------------------------------------------------------------
0. SPRITE ICON — the that ic() returns (CONTRACT.md §12).
Size comes from the width/height attributes ic() writes; colour is currentColor.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .ic {
display: inline-block;
vertical-align: -0.2em;
flex: none;
pointer-events: none;
}
/* ----------------------------------------------------------------------------
1. FRAME — grid columns per tier, docked Recent panel, pane bounds (>= 769)
---------------------------------------------------------------------------- */
@media (min-width: 769px) {
html[data-ui="signal"] .app-body {
position: relative; /* splitters and the tablet scrim anchor here */
grid-template-columns: var(--rail-w) var(--folder-w) var(--list-w) minmax(380px, 1fr);
grid-template-rows: minmax(0, 1fr);
}
/* Recent panel docked (>= 1100, live css 3366 keeps margin-right: --rp-w):
the read pane gives way instead of the grid overflowing */
html[data-ui="signal"] body.rp-docked #app .app-body {
grid-template-columns: var(--rail-w) var(--folder-w) var(--list-w) minmax(0, 1fr);
}
/* the live bound (css 618) ignores the command bar; the grid row is the real size,
this is only the safety net (the header is border-box, its 2px edge is inside --header-h) */
html[data-ui="signal"] .list-pane {
max-height: calc(100dvh - var(--header-h) - var(--cmdbar-h) - env(safe-area-inset-top, 0px));
}
html[data-ui="signal"] .folder-pane,
html[data-ui="signal"] .list-pane { position: relative; }
}
/* ----------------------------------------------------------------------------
2. HEADER — 52px navy gradient (--header-bg), 2px amber edge, 56px on phones
(--header-h token). Hamburger · brand · search pill · actions · "you" avatar.
Surface colours apply at every width; the LAYOUT (launcher width, search pill,
button sizes) is >= 769 only, because the live phone rules for the same
selectors (css 1039-1053, 2850-2878: search as a fixed overlay under
body.mobile-search-open, 48px launcher, round 40px buttons) have lower
specificity and would otherwise be beaten. Module 03 owns the phone header.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .app-header {
height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
background: var(--header-bg);
border-bottom: 2px solid var(--ci-amber); /* allow-list 5 */
box-shadow: none; /* live dark adds an amber glow (css 2704) */
color: var(--ink-inverse);
}
html[data-ui="signal"] .header-launcher,
html[data-ui="signal"] .header-back { color: var(--ink-inverse); border-radius: 0; transition: background var(--dur-1) var(--ease-out); }
html[data-ui="signal"] .header-launcher:hover,
html[data-ui="signal"] .header-back:hover { background: rgba(255,255,255,.10); }
html[data-ui="signal"] .header-logo rect { fill: #fff; opacity: 1; }
html[data-ui="signal"] .header-logo polygon { fill: var(--ci-deep); } /* was #0F6CBD */
html[data-ui="signal"] .header-title { font-weight: 600; letter-spacing: -0.01em; color: var(--ink-inverse); white-space: nowrap; }
html[data-ui="signal"] .header-btn { color: var(--ink-inverse); transition: background var(--dur-1) var(--ease-out); }
html[data-ui="signal"] .header-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
/* the signed-in user: navy initial on amber (allow-list 7) */
html[data-ui="signal"] .header-user {
background: var(--ci-amber);
color: var(--ci-ink-on-amber);
font-weight: 700;
font-size: var(--fs-small);
}
html[data-ui="signal"] .header-user:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
@media (min-width: 769px) {
html[data-ui="signal"] .header-launcher,
html[data-ui="signal"] .header-back {
width: var(--rail-w);
height: 100%; /* the header is border-box: 52px incl. the 2px edge */
}
html[data-ui="signal"] .header-brand {
min-width: 0;
padding-right: 0;
padding-inline-end: var(--s-6);
gap: var(--s-2);
}
html[data-ui="signal"] .header-logo { width: 26px; height: 26px; }
html[data-ui="signal"] .header-title { font-size: var(--fs-lead); line-height: var(--lh-lead); }
/* search: a 36px pill; the input fills it so the foundation's input focus ring
(1px --primary + 3px soft ring) draws on the pill edge */
html[data-ui="signal"] .header-search {
position: relative;
flex: 1 1 auto;
max-width: 640px;
margin: 0 auto;
height: min(36px, calc(var(--header-h) - 8px));
padding: 0;
box-sizing: border-box;
border-radius: var(--r-pill);
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.10);
color: var(--ink-inverse);
transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .header-search:hover { background: rgba(255,255,255,.18); }
html[data-ui="signal"] .header-search:focus-within {
background: #fff;
border-color: #fff;
box-shadow: none;
color: var(--ink);
}
html[data-ui="signal"][data-theme="dark"] .header-search:focus-within {
background: var(--bg-card);
border-color: var(--border-strong);
color: var(--ink);
}
html[data-ui="signal"] .header-search .search-icon {
position: absolute;
inset-inline-start: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
margin: 0;
color: currentColor;
opacity: .85;
pointer-events: none;
}
html[data-ui="signal"] .header-search input {
width: 100%;
height: 100%;
min-width: 0;
padding: 0;
padding-inline: 36px 34px;
border-radius: var(--r-pill);
background: transparent;
color: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
html[data-ui="signal"] .header-search input::placeholder { color: #B9CBE0; opacity: 1; } /* 5.3:1 on --ci-deep */
html[data-ui="signal"] .header-search:focus-within input::placeholder { color: var(--ink-placeholder); }
html[data-ui="signal"] .search-clear {
position: absolute;
inset-inline-end: 6px;
top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 12px;
line-height: 1;
}
html[data-ui="signal"] .search-clear:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
html[data-ui="signal"] .header-actions {
gap: var(--s-1);
padding: 0 var(--s-3) 0 var(--s-2);
}
html[data-ui="signal"] .header-btn {
width: var(--icon-btn);
height: var(--icon-btn);
border-radius: var(--r-sm);
}
html[data-ui="signal"] .header-btn svg { width: 18px; height: 18px; }
html[data-ui="signal"] .header-btn-install {
width: auto;
padding: 0 var(--s-3);
gap: 6px;
background: rgba(255,255,255,.12);
}
html[data-ui="signal"] .header-btn-install:hover { background: rgba(255,255,255,.22); }
html[data-ui="signal"] .header-btn-label { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; }
html[data-ui="signal"] .header-user {
width: 32px; height: 32px;
margin-left: 0;
margin-inline-start: var(--s-1);
}
}
/* ----------------------------------------------------------------------------
3. COMMAND BAR — one 44px row: tabs | actions | fill | ⌘K (see the DOM note above)
---------------------------------------------------------------------------- */
html[data-ui="signal"] .cmdbar,
html[data-ui="signal"] .cmdbar.one-row {
display: flex;
align-items: center;
height: var(--cmdbar-h);
box-sizing: border-box;
padding: 0 var(--s-3);
gap: var(--s-1);
background: var(--bg-card);
border-bottom: 1px solid var(--divider);
}
/* (b) re-parented DOM: .cmd-tabs holds only the three tabs (role=tablist) */
html[data-ui="signal"] .cmdbar > .cmd-tabs {
display: flex;
align-items: stretch;
gap: 2px;
padding: 0;
order: 0;
flex: 0 0 auto;
height: 100%;
}
/* (a) unchanged DOM: the ⌘K button is still inside .cmd-tabs → flatten it so the
tabs, the fill and ⌘K become flex items of the bar and take their own order */
html[data-ui="signal"] .cmdbar > .cmd-tabs:has(> .cmd-tab-search) { display: contents; }
html[data-ui="signal"] .cmdbar .cmd-tab {
order: 0;
height: 100%;
padding: 0 var(--s-3);
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
color: var(--ink-2);
background: transparent;
border-radius: 0;
box-shadow: none;
transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .cmdbar .cmd-tab:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .cmdbar .cmd-tab.on {
color: var(--ink);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--ci-amber); /* allow-list 2: the current tab */
}
html[data-ui="signal"] .cmdbar .cmd-tab.cmd-tab-search {
order: 3;
height: 28px;
align-self: center;
padding: 0 var(--s-2);
margin-left: 0;
margin-inline-start: var(--s-2);
font-family: var(--font-mono);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--ink-3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
box-shadow: none;
}
html[data-ui="signal"] .cmdbar .cmd-tab.cmd-tab-search:hover { background: var(--hover); color: var(--ink); border-color: var(--border-strong); }
html[data-ui="signal"] .cmdbar .cmd-tabs-fill { order: 2; flex: 1 1 0; min-width: var(--s-2); }
html[data-ui="signal"] .cmdbar .cmd-row {
order: 1;
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 2px;
padding: 0;
padding-inline-start: var(--s-3);
margin-inline-start: var(--s-2);
border-inline-start: 1px solid var(--divider);
overflow-x: auto;
scrollbar-width: none;
}
html[data-ui="signal"] .cmdbar .cmd-row::-webkit-scrollbar { height: 0; }
html[data-ui="signal"] .cmd {
height: calc(var(--cmdbar-h) - 8px);
gap: 6px;
padding: 0 9px;
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
color: var(--ink);
border-radius: var(--r-sm);
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .cmd:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .cmd:active:not(:disabled) { background: var(--selected); }
html[data-ui="signal"] .cmd:disabled { opacity: .45; }
html[data-ui="signal"] .cmd .cmd-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
font-size: 14px; /* emoji fallback */
line-height: 1;
color: var(--ink-2);
}
html[data-ui="signal"] .cmd .cmd-ic .ic,
html[data-ui="signal"] .cmd .cmd-ic > svg { width: 18px; height: 18px; }
html[data-ui="signal"] .cmd .cmd-caret {
font-size: 10px;
color: var(--ink-3);
margin-left: 0;
margin-inline-start: -2px;
}
html[data-ui="signal"] .cmd-new {
background: var(--btn-primary-bg);
color: #fff;
font-weight: 600;
padding: 0 var(--s-3);
}
html[data-ui="signal"] .cmd-new .cmd-ic { color: #fff; }
html[data-ui="signal"] .cmd-new:hover:not(:disabled) { background: var(--btn-primary-hover); color: #fff; }
html[data-ui="signal"] .cmd-new:active:not(:disabled) { background: var(--btn-primary-active); }
html[data-ui="signal"] .cmd-new .cmd-caret {
color: rgba(255,255,255,.85);
border-left: 0;
padding-left: 0;
margin-left: 0;
border-inline-start: 1px solid rgba(255,255,255,.35);
padding-inline-start: var(--s-2);
margin-inline-start: var(--s-1);
}
html[data-ui="signal"] .cmd-ai {
color: var(--primary);
font-weight: 600;
box-shadow: inset 0 0 0 1px var(--border);
}
html[data-ui="signal"] .cmd-ai .cmd-ic { color: var(--primary); }
html[data-ui="signal"] .cmd-ai:hover:not(:disabled) { background: var(--selected); color: var(--primary); }
html[data-ui="signal"] .cmd.cmd-on { background: var(--selected); color: var(--ink); font-weight: 600; }
html[data-ui="signal"] .cmd-sep { width: 1px; height: 20px; background: var(--divider); margin: 0 var(--s-1); }
/* with nothing open only New mail shows (.cmdbar-idle, js 3329) — no extra padding (live css 2831) */
html[data-ui="signal"] .cmdbar-idle .cmd-row { padding-bottom: 0; }
/* Labels. The fully labelled Home row measures 1128px (headless Chrome, Plex 13px), so
it only fits beside the tabs and ⌘K from 1440 up. 1280-1439: the five state commands
(Read / Unread, Flag / Unflag, Snooze, AI, More) go icon-only (row ≈ 805px);
below 1280 every message command is icon-only and New mail keeps its label.
Every .cmd already carries title="" (js 3290), so the label stays as a tooltip. */
@media (min-width: 1280px) and (max-width: 1439px) {
html[data-ui="signal"] .cmd:is([data-cmd="read"], [data-cmd="flag"], [data-cmd="snooze"], [data-cmd="ai"], [data-cmd="more"]) .cmd-lb { display: none; }
html[data-ui="signal"] .cmd:is([data-cmd="read"], [data-cmd="flag"], [data-cmd="snooze"], [data-cmd="ai"], [data-cmd="more"]) { padding: 0 var(--s-2); }
}
@media (max-width: 1279px) {
html[data-ui="signal"] .cmd .cmd-lb { display: none; }
html[data-ui="signal"] .cmd-new .cmd-lb { display: inline; }
html[data-ui="signal"] .cmd { padding: 0 var(--s-2); }
html[data-ui="signal"] .cmd-new { padding: 0 var(--s-3); }
}
/* ----------------------------------------------------------------------------
4. PLACES RAIL — sunken column, 44px buttons, 11px labels, 3px amber bar when active
---------------------------------------------------------------------------- */
html[data-ui="signal"] .left-rail {
background: var(--bg-sunken);
border-right: 0;
border-inline-end: 1px solid var(--border);
padding: var(--s-2) 0;
gap: 2px;
align-items: stretch;
}
html[data-ui="signal"] .rail-btn {
width: 100%;
height: var(--touch);
min-height: var(--touch);
gap: 2px;
padding: 0;
color: var(--ink-2);
border-radius: 0;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .rail-btn > svg { width: 22px; height: 22px; flex: none; }
html[data-ui="signal"] .rail-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .rail-btn-active { background: var(--bg-card); color: var(--ci-navy); }
html[data-ui="signal"][data-theme="dark"] .rail-btn-active { background: var(--selected); color: var(--ink); }
html[data-ui="signal"] .rail-btn-active::before {
left: auto;
inset-inline-start: 0;
top: 8px; bottom: 8px;
width: 3px;
background: var(--ci-amber); /* allow-list 2 */
border-radius: 0 2px 2px 0;
}
html[data-ui="signal"][dir="rtl"] .rail-btn-active::before { border-radius: 2px 0 0 2px; }
html[data-ui="signal"] .rail-label {
font-size: var(--fs-micro);
line-height: var(--lh-micro);
font-weight: 500;
letter-spacing: .01em;
}
/* chat / team counters: navy on amber, ringed in the rail colour (allow-list 3) */
html[data-ui="signal"] .rail-badge {
top: 3px;
right: auto;
inset-inline-end: 8px;
min-width: 18px; height: 18px;
padding: 0 5px;
box-sizing: border-box;
font-size: var(--fs-micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
border-radius: var(--r-pill);
background: var(--ci-amber);
color: var(--ci-ink-on-amber);
box-shadow: 0 0 0 2px var(--bg-sunken);
}
html[data-ui="signal"] .rail-btn-active .rail-badge { box-shadow: 0 0 0 2px var(--bg-card); }
html[data-ui="signal"][data-theme="dark"] .rail-btn-active .rail-badge { box-shadow: 0 0 0 2px var(--selected); }
/* ----------------------------------------------------------------------------
5. FOLDER PANE (Source List) — white column, New mail 40px, ⌘K look-alike,
uppercase 11px section labels, 36px rows (cozy: 8+20+8 through
--folder-li-pad), amber bar + Ice fill when active, navy-on-amber Badge,
Outline View for the connected-accounts tree. Favorites hidden while empty.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .folder-pane {
background: var(--bg-card);
border-right: 0;
border-inline-end: 1px solid var(--border);
}
/* padding only off-phone: the live phone drawer clears the bottom nav with its own padding (css 2905) */
@media (min-width: 769px) {
html[data-ui="signal"] .folder-pane { padding: var(--s-3) 0 var(--s-4); }
}
html[data-ui="signal"] .compose-btn {
margin: 0 var(--s-3) var(--s-2);
height: 40px;
padding: 0 var(--s-4);
justify-content: center;
background: var(--btn-primary-bg);
color: #fff;
border-radius: var(--r-sm);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 600;
box-shadow: var(--shadow-sm);
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .compose-btn:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"] .compose-btn:active { background: var(--btn-primary-active); }
html[data-ui="signal"] .compose-btn svg { width: 16px; height: 16px; }
html[data-ui="signal"] .drawer-cmdk-btn {
margin: 0 var(--s-3) var(--s-4);
width: calc(100% - 2 * var(--s-3));
height: 36px;
padding: 0 var(--s-2) 0 var(--s-3);
gap: var(--s-2);
background: var(--bg);
color: var(--ink-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .drawer-cmdk-btn:hover { background: var(--hover); color: var(--ink); border-color: var(--border-strong); }
html[data-ui="signal"] .drawer-cmdk-btn svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
html[data-ui="signal"] .drawer-cmdk-hint {
font-family: var(--font-mono);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
color: var(--ink-3);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xs);
padding: 1px 5px;
}
html[data-ui="signal"] .folder-section { margin-bottom: var(--s-3); }
html[data-ui="signal"] .folder-section-title {
font-size: var(--fs-label);
line-height: var(--lh-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--ink-3);
padding: var(--s-2) var(--s-4) var(--s-1);
}
/* Favorites: shown only once the renderFolders wrapper has put li rows in #favorites */
html[data-ui="signal"] .folder-section:has(> #favorites):not(:has(> #favorites li)) { display: none; }
html[data-ui="signal"] .folder-list li {
gap: var(--s-2);
margin: 1px var(--s-2);
padding: var(--folder-li-pad);
border-radius: var(--r-sm);
font-size: var(--folder-li-fs);
line-height: var(--lh-body);
font-weight: 500;
color: var(--ink);
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .folder-list li:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .folder-list li.active { background: var(--selected); color: var(--ci-navy); font-weight: 600; }
html[data-ui="signal"] .folder-list li.active:hover { background: var(--selected-hover); }
html[data-ui="signal"][data-theme="dark"] .folder-list li.active { color: var(--ink); }
html[data-ui="signal"] .folder-list li.active::before {
left: auto;
inset-inline-start: 0;
top: 6px; bottom: 6px;
width: 3px;
background: var(--ci-amber); /* allow-list 2 */
box-shadow: none;
border-radius: 0 2px 2px 0;
}
html[data-ui="signal"][dir="rtl"] .folder-list li.active::before { border-radius: 2px 0 0 2px; }
html[data-ui="signal"] .folder-icon {
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-2);
font-size: 14px; /* saved-search emoji */
line-height: 1;
}
html[data-ui="signal"] .folder-icon svg { width: 18px; height: 18px; }
html[data-ui="signal"] .folder-list li.active .folder-icon { color: var(--ci-navy); }
html[data-ui="signal"][data-theme="dark"] .folder-list li.active .folder-icon { color: var(--ink); }
html[data-ui="signal"] .folder-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* names stay 500: the amber Badge carries the attention, not a bold label */
html[data-ui="signal"] .folder-list li.unread .folder-name { font-weight: 500; }
html[data-ui="signal"] .folder-list li.active .folder-name { font-weight: 600; }
/* unread count Badge — navy on amber (allow-list 3) */
html[data-ui="signal"] .folder-count,
html[data-ui="signal"] .folder-list li.unread .folder-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 6px;
box-sizing: border-box;
font-size: var(--fs-micro);
line-height: 1;
font-weight: 700;
font-variant-numeric: tabular-nums;
border-radius: var(--r-pill);
background: var(--ci-amber);
color: var(--ci-ink-on-amber);
}
html[data-ui="signal"] .folder-loading { color: var(--ink-3); font-style: normal; font-size: var(--fs-small); }
/* drop target while dragging messages (setupDragDrop, js 1489) */
html[data-ui="signal"] .folder-list li.drop-target,
html[data-ui="signal"] .folder-section li.drop-target {
background: var(--selected);
color: var(--ink);
outline: 1.5px dashed var(--primary);
outline-offset: -1.5px;
}
/* Pin-to-Favorites toggle (05 appends it to every primary folder row): invisible until the row is
hovered or focused; a pinned folder keeps its star in the folder list. In #favorites every row is
pinned, so there it only shows on hover. Touch screens pin from the folder context menu instead. */
html[data-ui="signal"] .fav-toggle {
flex: none;
width: 24px; height: 24px;
margin-inline-start: 2px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0;
border-radius: var(--r-xs);
background: transparent;
color: var(--ink-3);
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .fav-toggle svg { width: 14px; height: 14px; }
html[data-ui="signal"] .folder-list li:hover > .fav-toggle,
html[data-ui="signal"] .folder-list li:focus-within > .fav-toggle,
html[data-ui="signal"] .fav-toggle:focus-visible,
html[data-ui="signal"] .fav-toggle[aria-pressed="true"] { opacity: 1; }
html[data-ui="signal"] .fav-toggle:hover { background: var(--selected-hover); color: var(--ink); }
html[data-ui="signal"] .fav-toggle[aria-pressed="true"] { color: var(--ci-deep); }
html[data-ui="signal"][data-theme="dark"] .fav-toggle[aria-pressed="true"] { color: var(--ci-sky); }
html[data-ui="signal"] #favorites > li > .fav-toggle[aria-pressed="true"] { opacity: 0; }
html[data-ui="signal"] #favorites > li:hover > .fav-toggle,
html[data-ui="signal"] #favorites > li:focus-within > .fav-toggle { opacity: 1; }
@media (hover: none) {
html[data-ui="signal"] .fav-toggle:not([aria-pressed="true"]),
html[data-ui="signal"] #favorites > li > .fav-toggle { display: none; }
}
/* connected accounts: domain groups → account rows → folder tree (Outline View) */
html[data-ui="signal"] .ext-domain-group {
margin: var(--s-1) var(--s-2) var(--s-2);
padding: 2px 0;
border-radius: var(--r-md);
background: var(--bg);
border: 1px solid var(--divider);
}
html[data-ui="signal"] .ext-domain-header {
padding: 6px var(--s-2) 6px var(--s-3);
gap: 6px;
border-radius: var(--r-md) var(--r-md) 0 0;
font-size: var(--fs-caption);
color: var(--ink-3);
}
html[data-ui="signal"] .ext-domain-header:hover { background: var(--hover); }
html[data-ui="signal"] .ext-domain-chevron,
html[data-ui="signal"] button.ext-acc-caret {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
flex: none;
font-size: 11px;
line-height: 1;
color: var(--ink-3);
opacity: 1;
border-radius: var(--r-xs);
}
html[data-ui="signal"] button.ext-acc-caret {
width: 24px; height: 24px;
margin-left: 0;
margin-right: 0;
margin-inline-start: auto;
}
html[data-ui="signal"] button.ext-acc-caret:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .ext-domain-name {
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--ink-3);
}
html[data-ui="signal"] .ext-domain-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 6px;
box-sizing: border-box;
font-size: var(--fs-micro);
font-weight: 600;
font-variant-numeric: tabular-nums;
opacity: 1;
color: var(--ink-3);
background: var(--hover);
border-radius: var(--r-pill);
}
html[data-ui="signal"] .folder-list li.ext-acc-row .ext-acc-avatar { background: var(--primary); opacity: .85; }
html[data-ui="signal"] .folder-list li.ext-acc-open { color: var(--primary); }
html[data-ui="signal"] .ext-acc-email { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); }
html[data-ui="signal"] .ext-folder-list {
margin: 0;
margin-inline-start: var(--s-4);
padding: 2px 0;
padding-inline-start: 6px;
border: 0;
border-inline-start: 2px solid var(--divider);
}
html[data-ui="signal"] .ext-domain-list .ext-folder-list li.ext-folder-row {
font-size: var(--folder-li-fs);
border-radius: var(--r-sm);
}
html[data-ui="signal"] .ext-folder-list li.ext-folder-row.active { background: var(--selected); color: var(--ci-navy); font-weight: 600; }
html[data-ui="signal"][data-theme="dark"] .ext-folder-list li.ext-folder-row.active { color: var(--ink); }
html[data-ui="signal"] .ext-add-row {
margin: var(--s-1) var(--s-2) 2px;
padding: 7px var(--s-2);
border: 1px dashed var(--border-strong);
border-radius: var(--r-sm);
font-size: var(--fs-small);
color: var(--ink-2);
}
html[data-ui="signal"] .ext-add-row:hover,
html[data-ui="signal"] .ext-add-row:focus-visible { background: var(--hover); border-color: var(--primary); color: var(--ink); }
html[data-ui="signal"] .ext-add-plus { background: var(--primary); color: #fff; }
html[data-ui="signal"] .ext-empty-hint {
margin: 2px var(--s-3) 6px;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--ink-3);
}
/* ----------------------------------------------------------------------------
6. LIST PANE — sunken column, sticky header (#selectAll · title · count ·
#listOptionsBtn #filterBtn), the All/Unread/Flagged/Attachments Toggle Group
as one 32px track, #listChips, white rows (68 / 56 / 84 via --row-h),
unread dot, selected bar, hover checkbox + .row-acts, bulk bar, skeleton,
empty and error states, drag states.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .list-pane {
background: var(--bg-sunken);
border-right: 0;
border-inline-end: 1px solid var(--border);
}
html[data-ui="signal"] .list-header {
position: sticky;
top: 0;
z-index: 3;
min-height: 48px;
padding: 0 var(--s-2) 0 var(--s-4);
gap: var(--s-2);
background: var(--bg-sunken);
border-bottom: 1px solid var(--divider);
}
html[data-ui="signal"] .list-header-title { align-items: center; gap: var(--s-2); min-width: 0; }
html[data-ui="signal"] #selectAll {
width: 18px; height: 18px;
margin: 0;
flex: none;
accent-color: var(--primary);
cursor: pointer;
}
html[data-ui="signal"] .list-header-title h2 {
font-family: var(--font-ui); /* Plex here, not the display face */
font-size: var(--fs-lead);
line-height: var(--lh-lead);
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html[data-ui="signal"] .list-count {
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
html[data-ui="signal"] .list-header-actions { display: flex; align-items: center; gap: 2px; flex: none; }
html[data-ui="signal"] .list-header-actions .icon-btn,
html[data-ui="signal"] #listOptionsBtn,
html[data-ui="signal"] #filterBtn {
width: var(--icon-btn);
height: var(--icon-btn);
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0;
border-radius: var(--r-sm);
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .list-header-actions .icon-btn:hover,
html[data-ui="signal"] #listOptionsBtn:hover,
html[data-ui="signal"] #filterBtn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .list-header-actions .icon-btn[aria-expanded="true"],
html[data-ui="signal"] #listOptionsBtn[aria-expanded="true"],
html[data-ui="signal"] #filterBtn[aria-expanded="true"] { background: var(--selected); color: var(--ink); }
html[data-ui="signal"] .list-header-actions .icon-btn svg { width: 18px; height: 18px; }
/* Toggle Group: one 32px track, joined segments; checked = card fill + shadow (not amber) */
html[data-ui="signal"] .list-filters {
display: flex;
align-items: center;
gap: 2px;
margin: var(--s-2) var(--s-4);
padding: 2px;
height: 32px;
box-sizing: border-box;
background: var(--divider);
border-bottom: 0;
border-radius: var(--r-pill);
overflow-x: auto;
scrollbar-width: none;
}
html[data-ui="signal"][data-theme="dark"] .list-filters { background: var(--hover); }
html[data-ui="signal"] .list-filters::-webkit-scrollbar { height: 0; }
html[data-ui="signal"] .list-filters .chip {
flex: 1 1 auto;
height: 100%;
padding: 0 var(--s-3);
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
border-radius: var(--r-pill);
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
color: var(--ink-2);
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .list-filters .chip:hover { background: color-mix(in srgb, var(--bg-card) 55%, transparent); color: var(--ink); }
html[data-ui="signal"] .list-filters .chip-active,
html[data-ui="signal"] .list-filters .chip[aria-checked="true"] {
background: var(--bg-card);
color: var(--ink);
font-weight: 600;
box-shadow: var(--shadow-sm);
}
html[data-ui="signal"][data-theme="dark"] .list-filters .chip-active,
html[data-ui="signal"][data-theme="dark"] .list-filters .chip[aria-checked="true"] { background: var(--selected); }
/* applied search operators as removable Chips under the header (#listChips) */
html[data-ui="signal"] .ci-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 var(--s-4) var(--s-2);
}
html[data-ui="signal"] .ci-chips:not(:has(.ci-chip)) { display: none; }
html[data-ui="signal"] .ci-chip {
display: inline-flex; align-items: center; gap: 4px;
height: 24px;
max-width: 100%;
padding: 0;
padding-inline: var(--s-2) 4px;
box-sizing: border-box;
background: var(--bg-card);
color: var(--ink-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
font-weight: 500;
white-space: nowrap;
}
html[data-ui="signal"] .ci-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="signal"] .ci-chip .ic { width: 12px; height: 12px; color: var(--ink-3); }
html[data-ui="signal"] .ci-chip > button {
width: 18px; height: 18px;
padding: 0;
border: 0;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font-size: 12px;
line-height: 1;
}
html[data-ui="signal"] .ci-chip > button:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .ci-chip > button .ic { width: 12px; height: 12px; color: inherit; }
html[data-ui="signal"] .ci-chip[aria-pressed="true"] { background: var(--selected); border-color: var(--primary); color: var(--ink); }
/* rows */
html[data-ui="signal"] .message-list { background: transparent; }
/* row height = padding 4 + line 1 (--lh-body) + subject (--lh-body − 2) + 1 + pill line 20 + 4 + 1px
border → 68 cozy / 84 comfortable (min-height); compact: 1 + 18 + 16 + 1 + 18 + 1 + 1 = 56 */
html[data-ui="signal"] .message-row {
gap: var(--s-3);
padding: 4px var(--s-4);
min-height: var(--row-h);
box-sizing: border-box;
align-items: center;
background: var(--bg-card);
border-bottom: 1px solid var(--divider);
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"][data-density="compact"] .message-row { padding-top: 1px; padding-bottom: 1px; }
/* the unread dot sits in the 16px gutter: no extra indent (live css 699 pushed the row by 20px) */
html[data-ui="signal"] .message-row.unread { padding-left: var(--s-4); padding-inline-start: var(--s-4); }
html[data-ui="signal"] .message-row:hover { background: var(--hover); }
html[data-ui="signal"] .message-row.selected,
html[data-ui="signal"] .message-row[aria-current="true"],
html[data-ui="signal"] .message-row.bulk-selected { background: var(--selected); }
html[data-ui="signal"] .message-row.selected:hover,
html[data-ui="signal"] .message-row[aria-current="true"]:hover,
html[data-ui="signal"] .message-row.bulk-selected:hover { background: var(--selected-hover); }
html[data-ui="signal"] .message-row.selected::before,
html[data-ui="signal"] .message-row[aria-current="true"]::before {
content: "";
position: absolute;
left: auto;
inset-inline-start: 0;
top: 0; bottom: 0;
width: 3px;
background: var(--ci-amber); /* allow-list 2 */
box-shadow: none;
}
/* unread: 8px amber dot + 1.5px navy ring (ring is 0 in dark) at the leading edge;
sender in 600 — never blue text */
html[data-ui="signal"] .message-row.unread::after {
content: "";
left: auto;
inset-inline-start: 5px;
top: 50%;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ci-amber); /* allow-list 1 */
box-shadow: var(--unread-ring);
transform: translateY(-50%);
}
html[data-ui="signal"] .unread-dot {
position: absolute;
inset-inline-start: 5px;
top: 50%;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ci-amber); /* allow-list 1 */
box-shadow: var(--unread-ring);
transform: translateY(-50%);
pointer-events: none;
}
html[data-ui="signal"] .message-row:has(> .unread-dot)::after { display: none; }
html[data-ui="signal"] .msg-avatar {
width: 32px; height: 32px;
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .02em;
color: #fff;
transition: opacity var(--dur-1) var(--ease-out);
}
/* the checkbox lives over the avatar; hover, a selection or keyboard focus reveal it */
html[data-ui="signal"] .row-check {
position: absolute;
left: auto;
inset-inline-start: 22px;
top: 50%;
transform: translateY(-50%);
width: 20px; height: 20px;
margin: 0;
accent-color: var(--primary);
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .message-row:hover .row-check,
html[data-ui="signal"] .message-row.bulk-selected .row-check,
html[data-ui="signal"] .row-check:checked,
html[data-ui="signal"] .row-check:focus-visible,
html[data-ui="signal"] .message-list:has(.row-check:checked) .row-check { opacity: 1; }
html[data-ui="signal"] .message-row:hover .msg-avatar,
html[data-ui="signal"] .message-row.bulk-selected .msg-avatar,
html[data-ui="signal"] .message-row:has(> .row-check:focus-visible) .msg-avatar,
html[data-ui="signal"] .message-list:has(.row-check:checked) .msg-avatar { opacity: 0; }
/* touch (tablet): no hover, so the checkbox stands in flow beside the avatar */
@media (hover: none) and (min-width: 769px) {
html[data-ui="signal"] .row-check { position: static; transform: none; opacity: 1; }
html[data-ui="signal"] .message-row.bulk-selected .msg-avatar,
html[data-ui="signal"] .message-list:has(.row-check:checked) .msg-avatar { opacity: 1; }
}
html[data-ui="signal"] .msg-body { min-width: 0; }
html[data-ui="signal"] .msg-row1 { gap: var(--s-2); align-items: center; } /* baseline alignment added ~2px per row */
html[data-ui="signal"] .msg-from {
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 500;
color: var(--ink);
}
html[data-ui="signal"] .message-row.unread .msg-from { font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .msg-date {
font-size: var(--fs-micro);
line-height: var(--lh-body);
font-weight: 500;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
html[data-ui="signal"] .message-row.unread .msg-date { color: var(--ink-2); font-weight: 600; }
/* dark: --ink-3 on the selected fill (#163E66) is 3.5:1 — meta text on the selected row uses --ink-2 (5.7:1, 4.6:1 hovered) */
html[data-ui="signal"][data-theme="dark"] :is(.message-row.selected, .message-row[aria-current="true"]) :is(.msg-date, .msg-preview) { color: var(--ink-2); }
html[data-ui="signal"] .msg-subject {
margin-top: 0;
font-size: var(--fs-body);
line-height: calc(var(--lh-body) - 2px);
font-weight: 400;
color: var(--ink-2);
}
html[data-ui="signal"] .message-row.unread .msg-subject { font-weight: 500; color: var(--ink); }
/* preview: one clamped line, only rendered when the message carries a snippet; compact hides it */
html[data-ui="signal"] .msg-preview {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
white-space: normal;
margin-top: 1px;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--ink-3);
}
html[data-ui="signal"] .msg-preview:empty { display: none; }
html[data-ui="signal"][data-density="comfortable"] .msg-preview { -webkit-line-clamp: 2; line-clamp: 2; }
html[data-ui="signal"] .msg-ai-reason {
margin-top: 1px;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
font-style: normal;
color: var(--ink-3);
}
html[data-ui="signal"][data-density="compact"] .msg-preview,
html[data-ui="signal"][data-density="compact"] .msg-ai-reason { display: none; }
/* line 3: pills and flag / attachment / replied marks */
html[data-ui="signal"] .msg-icons {
display: flex;
align-items: center;
gap: 6px;
margin-top: 1px;
min-height: 0;
overflow: hidden;
color: var(--ink-3);
font-size: var(--fs-caption);
line-height: 20px;
}
html[data-ui="signal"] .msg-icons:not(:has(*)) { display: none; }
html[data-ui="signal"] .msg-icons .ic { width: 14px; height: 14px; }
html[data-ui="signal"] .msg-icons .dlv-pill,
html[data-ui="signal"] .msg-icons .tm-chip { margin: 0; }
html[data-ui="signal"][data-density="compact"] .msg-icons { line-height: 18px; }
html[data-ui="signal"][data-density="compact"] .msg-icons :is(.ci-pill, .dlv-pill, .tm-chip, .ai-cat-badge, .cat-badge) { height: 18px; }
/* neutral counters inside line 1 */
html[data-ui="signal"] .thread-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
box-sizing: border-box;
margin-left: 0;
margin-inline-start: 4px;
vertical-align: middle;
border-radius: var(--r-pill);
background: var(--hover);
color: var(--ink-3);
font-size: var(--fs-micro);
line-height: 1;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
html[data-ui="signal"] .urgency-dot { color: var(--danger); font-size: 12px; margin-right: 0; margin-inline-end: 4px; }
/* badges inline in the sender line (js 1447) must not grow its line box: 18px, top-aligned */
html[data-ui="signal"] .msg-from :is(.thread-count, .ai-cat-badge, .cat-badge) {
height: 18px;
vertical-align: top;
margin-top: calc((var(--lh-body) - 18px) / 2);
}
/* hover actions (module 05 renders .row-acts > .row-act, kebab last; delegated on #messageList) */
html[data-ui="signal"] .row-acts {
position: absolute;
inset-inline-end: var(--s-2);
top: 4px;
z-index: 2;
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
background: var(--bg-card);
border: 1px solid var(--divider);
border-radius: var(--r-sm);
box-shadow: var(--shadow-sm);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .message-row:hover .row-acts,
html[data-ui="signal"] .message-row:focus-within .row-acts { opacity: 1; pointer-events: auto; }
html[data-ui="signal"] .row-act {
width: 28px; height: 28px;
padding: 0;
border: 0;
border-radius: var(--r-xs);
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
color: var(--ink-2);
cursor: pointer;
font-size: 13px;
line-height: 1;
}
html[data-ui="signal"] .row-act:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .row-act[data-act="delete"]:hover { color: var(--danger); }
html[data-ui="signal"] .row-act .ic { width: 16px; height: 16px; }
/* no hover pointer: the trailing action (the kebab) stays visible; the rest live in its menu */
@media (hover: none) {
html[data-ui="signal"] .row-acts {
opacity: 1;
pointer-events: auto;
background: transparent;
border-color: transparent;
box-shadow: none;
}
html[data-ui="signal"] .row-acts > .row-act:not(:last-child) { display: none; }
html[data-ui="signal"] .message-row .msg-row1 { padding-inline-end: 30px; }
}
/* bulk bar (renderMessageList, js 1365) */
html[data-ui="signal"] .bulk-bar {
flex-wrap: wrap;
min-height: 40px;
padding: 6px var(--s-4);
gap: var(--s-2);
background: var(--selected);
border-bottom: 1px solid var(--selected-hover);
}
html[data-ui="signal"] .bulk-count {
margin-inline-end: auto;
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
html[data-ui="signal"] .bulk-btn {
height: 28px;
padding: 0 var(--s-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg-card);
color: var(--ink);
font-size: var(--fs-caption);
font-weight: 500;
transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .bulk-btn:hover { background: var(--hover); border-color: var(--border-strong); color: var(--ink); }
html[data-ui="signal"] .bulk-btn[data-bulk="delete"]:hover { color: var(--danger); border-color: var(--danger); }
/* drag */
html[data-ui="signal"] .message-row.dragging { opacity: .6; }
/* skeleton: rows in the final geometry, shown after 200ms (backwards fill keeps them
invisible until then), pulsing instead of the live moving gradient */
html[data-ui="signal"] .list-skeleton,
html[data-ui="signal"] .ci-skeleton {
padding: 0;
animation: sig-skel-in var(--dur-1) var(--ease-out) 200ms both;
}
html[data-ui="signal"] .list-skeleton .skeleton-row,
html[data-ui="signal"] .ci-skeleton .skeleton-row,
html[data-ui="signal"] .ci-skeleton > div {
position: relative;
height: var(--row-h);
margin: 0;
border-radius: 0;
background: var(--bg-card);
border-bottom: 1px solid var(--divider);
animation: sig-skel-pulse 1.4s var(--ease-out) infinite;
}
html[data-ui="signal"] .list-skeleton .skeleton-row::before,
html[data-ui="signal"] .ci-skeleton .skeleton-row::before,
html[data-ui="signal"] .ci-skeleton > div::before {
content: "";
position: absolute;
inset-inline-start: var(--s-4);
top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: var(--divider);
}
html[data-ui="signal"] .list-skeleton .skeleton-row::after,
html[data-ui="signal"] .ci-skeleton .skeleton-row::after,
html[data-ui="signal"] .ci-skeleton > div::after {
content: "";
position: absolute;
inset-inline-start: 60px;
inset-inline-end: var(--s-4);
top: 50%;
height: 30px;
transform: translateY(-50%);
background:
linear-gradient(var(--divider), var(--divider)) 0 0 / 45% 10px no-repeat,
linear-gradient(var(--divider), var(--divider)) 0 100% / 80% 10px no-repeat;
}
@keyframes sig-skel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sig-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* empty state (module 05 renders .ci-empty > [.ic] .ci-empty-title p [button]); scoped to the
list because live css 3863 already uses .ci-empty on compose rows */
html[data-ui="signal"] .message-list .ci-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--s-2);
padding: var(--s-10) var(--s-6);
color: var(--ink-2);
}
html[data-ui="signal"] .message-list .ci-empty > .ic,
html[data-ui="signal"] .message-list .ci-empty > svg {
width: 48px; height: 48px;
margin-bottom: var(--s-1);
color: var(--ink-3);
opacity: .6;
}
html[data-ui="signal"] .message-list .ci-empty-title {
margin: 0;
font-size: var(--fs-display-md);
line-height: var(--lh-display-md);
}
html[data-ui="signal"] .message-list .ci-empty p {
margin: 0;
max-width: 34ch;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-2);
}
html[data-ui="signal"] .message-list .ci-empty button { margin-top: var(--s-2); }
/* error state (loadMessages, .list-error + #listRetryBtn) */
html[data-ui="signal"] .list-error { padding: var(--s-10) var(--s-6); color: var(--ink-2); }
html[data-ui="signal"] .list-error-msg { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }
html[data-ui="signal"] .list-error-detail { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); margin-bottom: var(--s-4); }
/* ----------------------------------------------------------------------------
7. SPLITTERS (setupSplitters, module 04/05) — 8px grab zones between
folder|list and list|read, transparent, tinted on hover/focus/drag.
Placement: as children of .app-body with inline left/right (recommended),
or as the last child of .folder-pane / .list-pane (then at the pane's end edge).
---------------------------------------------------------------------------- */
html[data-ui="signal"] .ci-splitter {
position: absolute;
top: 0; bottom: 0;
width: 8px;
margin: 0;
margin-inline-start: -4px;
z-index: 6;
background: transparent;
cursor: col-resize;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
html[data-ui="signal"] .ci-splitter::before {
content: "";
position: absolute;
top: 0; bottom: 0;
inset-inline-start: 3px;
width: 2px;
background: transparent;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .ci-splitter:hover,
html[data-ui="signal"] .ci-splitter:active,
html[data-ui="signal"] .ci-splitter:focus-visible { background: color-mix(in srgb, var(--primary) 14%, transparent); }
html[data-ui="signal"] .ci-splitter:hover::before,
html[data-ui="signal"] .ci-splitter:active::before,
html[data-ui="signal"] .ci-splitter:focus-visible::before { background: var(--primary); }
html[data-ui="signal"] .folder-pane > .ci-splitter,
html[data-ui="signal"] .list-pane > .ci-splitter { inset-inline-end: 0; margin-inline-start: 0; }
/* ----------------------------------------------------------------------------
8. BADGE + PILL FAMILY
.ci-badge — count that waits for you: navy on amber (allow-list 3)
.ci-pill — 20px status pill, 11px/600, 1px border, 12px leading SVG; the
live delivery / team / triage / category classes are mapped onto it
---------------------------------------------------------------------------- */
html[data-ui="signal"] .ci-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 6px;
box-sizing: border-box;
font-size: var(--fs-micro);
line-height: 1;
font-weight: 700;
font-variant-numeric: tabular-nums;
border-radius: var(--r-pill);
background: var(--ci-amber);
color: var(--ci-ink-on-amber);
white-space: nowrap;
}
html[data-ui="signal"] .ci-pill,
html[data-ui="signal"] .dlv-pill,
html[data-ui="signal"] .tm-chip,
html[data-ui="signal"] .ai-cat-badge,
html[data-ui="signal"] .cat-badge {
display: inline-flex; align-items: center; gap: 4px;
height: 20px;
max-width: 100%;
padding: 0 8px;
box-sizing: border-box;
margin: 0;
vertical-align: middle;
border: 1px solid var(--pill-muted-bd);
border-radius: var(--r-pill);
background: var(--pill-muted-bg);
color: var(--pill-muted-fg);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
html[data-ui="signal"] .ci-pill .ic,
html[data-ui="signal"] .dlv-pill .ic,
html[data-ui="signal"] .tm-chip .ic,
html[data-ui="signal"] .ai-cat-badge .ic,
html[data-ui="signal"] .cat-badge .ic { width: 12px; height: 12px; margin-inline-start: -2px; }
html[data-ui="signal"] .ci-pill--ok, html[data-ui="signal"] .dlv-pill.dlv-ok, html[data-ui="signal"] .tm-chip.tm-done,
html[data-ui="signal"] .ai-cat-badge.ai-cat-personal, html[data-ui="signal"] .ai-cat-badge.ai-cat-travel
{ background: var(--pill-ok-bg); color: var(--pill-ok-fg); border-color: var(--pill-ok-bd); }
html[data-ui="signal"] .ci-pill--info, html[data-ui="signal"] .dlv-pill.dlv-sent, html[data-ui="signal"] .tm-chip.tm-open,
html[data-ui="signal"] .ai-cat-badge.ai-cat-work
{ background: var(--pill-info-bg); color: var(--pill-info-fg); border-color: var(--pill-info-bd); }
html[data-ui="signal"] .ci-pill--attn, html[data-ui="signal"] .dlv-pill.dlv-wait, html[data-ui="signal"] .tm-chip.tm-wait,
html[data-ui="signal"] .ai-cat-badge.ai-cat-invoice, html[data-ui="signal"] .ai-cat-badge.ai-cat-receipt
{ background: var(--pill-attn-bg); color: var(--pill-attn-fg); border-color: var(--pill-attn-bd); }
html[data-ui="signal"] .ci-pill--danger, html[data-ui="signal"] .dlv-pill.dlv-bad,
html[data-ui="signal"] .ai-cat-badge.ai-cat-security
{ background: var(--pill-danger-bg); color: var(--pill-danger-fg); border-color: var(--pill-danger-bd); }
html[data-ui="signal"] .ci-pill--muted, html[data-ui="signal"] .dlv-pill.dlv-mute,
html[data-ui="signal"] .ai-cat-badge.ai-cat-newsletter, html[data-ui="signal"] .ai-cat-badge.ai-cat-promotion,
html[data-ui="signal"] .ai-cat-badge.ai-cat-notification, html[data-ui="signal"] .ai-cat-badge.ai-cat-social
{ background: var(--pill-muted-bg); color: var(--pill-muted-fg); border-color: var(--pill-muted-bd); }
/* team chip keeps room for its assignee avatar at the start; .cat-badge colours stay inline (js 1435) */
html[data-ui="signal"] .tm-chip { padding-inline-start: 3px; }
html[data-ui="signal"] .ai-cat-badge { margin-inline-start: 4px; }
/* ----------------------------------------------------------------------------
9. TABLET 769-1023 — two-pane Split View; the folder pane leaves the grid and
becomes a drawer (300px, body.tb-folders-open, scrim on .app-body::after).
The JS side (hamburger aria, Esc, scrim tap, dragstart auto-open) is module 06;
the phone drawer (.app-body.mobile-on-folders, <= 768) is untouched.
---------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1023px) {
html[data-ui="signal"] .app-body {
grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr);
}
html[data-ui="signal"] .folder-pane {
position: absolute;
top: 0; bottom: 0;
left: auto;
inset-inline-start: var(--rail-w);
width: var(--folder-w);
z-index: 30;
box-shadow: var(--shadow-lg);
transform: translateX(calc(-100% - var(--rail-w)));
visibility: hidden;
transition: transform var(--dur-3) var(--ease-pop), visibility 0s linear var(--dur-3);
}
html[data-ui="signal"][dir="rtl"] .folder-pane { transform: translateX(calc(100% + var(--rail-w))); }
html[data-ui="signal"] body.tb-folders-open .folder-pane {
transform: none;
visibility: visible;
transition: transform var(--dur-3) var(--ease-pop), visibility 0s;
}
html[data-ui="signal"] body.tb-folders-open .app-body::after {
content: "";
position: absolute;
inset: 0;
z-index: 29;
background: var(--scrim);
animation: sig-fade-in var(--dur-3) var(--ease-out);
}
html[data-ui="signal"] .rail-label { display: none; }
html[data-ui="signal"] .header-title { display: none; }
html[data-ui="signal"] .header-brand { padding-inline-end: var(--s-3); }
}
@keyframes sig-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ----------------------------------------------------------------------------
10. PHONE <= 768 — module 03 owns the shell here; splitters are off.
Rules of this file that still apply on phones (all component skins, none
of the layout): .app-header surface, .header-user "you" avatar, .list-pane
sunken surface, .list-header, the Toggle Group, .ci-chips, rows (72px via
--row-h; the checkbox is opacity 0 with no hover), pills, badges, skeleton,
empty and error states. Module 03 re-declares what the phone needs
differently (row avatar size, folder-row height, hidden checkbox, kebab).
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
html[data-ui="signal"] .ci-splitter { display: none; }
}
/* ===================== signal/02-read-compose.css ===================== */
/* ============================================================================
SIGNAL 02 — reading pane + compose
signal/02-read-compose.css, concatenated after 00-tokens.css and 01-shell.css
into out/app-signal.css (linked AFTER app.css). Every rule is scoped under
html[data-ui="signal"]; dark = html[data-ui="signal"][data-theme="dark"].
Skin only: no display/position mechanics of the live read pane, the
COMPOSE_INLINE chain (.compose-dialog.compose-inline, .compose-minimized,
.read-pane.ci-has-tab, .ci-draft-tab) or the phone full-screen compose change.
LEGACY !important RULES BEATEN HERE (live/static-app.css = app.css v85):
1913 .md-active { background: gradient !important; color: #fff !important; border: none !important; }
1914 .voice-active { background: gradient !important; color: #fff !important; border: none !important; }
1915 .sd-active { background: gradient !important; color: #fff !important; border: none !important; }
1952 .pgp-active { background: gradient !important; color: #fff !important; border: none !important; }
2772 [data-theme="dark"] .pgp-hint-banner { background: rgba(255,176,32,.12) !important;
border-left-color: var(--ci-amber) !important; }
INLINE style= ATTRIBUTES BEATEN (not !important in the live file, but equally
un-overridable without one; the properties forced are exactly the ones the
inline string sets — a JS wrapper that strips banner.style makes these moot):
js 1910 .pgp-hint-banner background, border-left, border-radius, padding, margin-bottom
js 2047 .translate-banner background, border-left, border-radius, padding, margin-bottom
Left alone on purpose (inline styles whose values already come from remapped
tokens): js 1773 .tracker-banner (flex only), js 1931 #crmSidebar, js 8424 #archaeologyBox.
Live !important rules this module relies on and does NOT fight: the phone read
pane scroller (css 1191-1213), compose/settings full-screen on phones (3039-3043),
.compose-minimized (3922), .compose-row-actions-mini.ci-empty (3863), the print
block (2030-2044), phone 16px inputs (3673-3675); the density re-declarations
for .read-head/.read-body/.read-subject live in 00-tokens.css (section 6).
AMBER: none as text. --ci-amber-dark appears only as the attention edge
(border shorthand) and the in-progress timeline dot (background).
============================================================================ */
/* ----------------------------------------------------------------------------
1. READ PANE SHELL + EMPTY STATE
---------------------------------------------------------------------------- */
html[data-ui="signal"] .read-pane { background: var(--bg); }
html[data-ui="signal"][data-theme="dark"] .read-pane,
html[data-ui="signal"][data-theme="dark"] .read-message { background: var(--bg); }
html[data-ui="signal"] .read-empty { color: var(--ink-2); padding: var(--s-6); text-align: center; }
html[data-ui="signal"] .read-empty-art { margin-bottom: var(--s-4); color: var(--ci-navy); opacity: .45; } /* x the svg's own .4 = ~18% */
html[data-ui="signal"] .read-empty-title {
font-size: var(--fs-display-xl);
line-height: var(--lh-display-xl);
color: var(--ink);
}
html[data-ui="signal"] .read-empty-subtitle { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin-top: var(--s-2); }
html[data-ui="signal"] .read-empty kbd { margin: 0 2px; }
html[data-ui="signal"][data-theme="dark"] .read-empty { background: var(--bg); color: var(--ink-2); }
html[data-ui="signal"][data-theme="dark"] .read-empty-art { color: var(--ink-3); opacity: .6; }
html[data-ui="signal"][data-theme="dark"] .read-empty-title { color: var(--ink); }
/* ----------------------------------------------------------------------------
2. READ ACTIONS — 36px row on the pane surface, Reply filled
---------------------------------------------------------------------------- */
html[data-ui="signal"] .read-actions {
display: flex; align-items: center; gap: var(--s-1);
padding: 12px 16px 8px;
background: transparent;
border-bottom: 0;
flex-shrink: 0;
overflow-x: auto; scrollbar-width: thin;
}
html[data-ui="signal"] .action-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--icon-btn); min-width: var(--icon-btn);
padding: 0 12px;
border: 1px solid transparent; border-radius: var(--r-sm);
background: transparent; color: var(--ink);
font-size: var(--fs-small); font-weight: 500; line-height: 1;
white-space: nowrap; cursor: pointer;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .action-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .action-btn:active { background: var(--selected); }
html[data-ui="signal"] .action-btn svg { width: 16px; height: 16px; flex: none; }
html[data-ui="signal"] .action-btn .ic { flex: none; }
html[data-ui="signal"] .action-btn[data-act="more"] { width: var(--icon-btn); padding: 0; font-size: 18px; line-height: 1; }
html[data-ui="signal"] .action-primary,
html[data-ui="signal"] .action-btn.action-primary { background: var(--btn-primary-bg); color: #fff; border-color: transparent; }
html[data-ui="signal"] .action-primary:hover,
html[data-ui="signal"] .action-btn.action-primary:hover { background: var(--btn-primary-hover); color: #fff; }
html[data-ui="signal"] .action-primary:active,
html[data-ui="signal"] .action-btn.action-primary:active { background: var(--btn-primary-active); }
html[data-ui="signal"] .action-sep { width: 1px; height: 20px; background: var(--divider); margin: 0 var(--s-1); flex: none; }
html[data-ui="signal"] .read-actions-spacer { flex: 1; }
html[data-ui="signal"] .read-call-btn {
width: var(--icon-btn); height: var(--icon-btn); padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2);
font-size: 16px; cursor: pointer; flex: none;
}
html[data-ui="signal"] .read-call-btn:hover { background: var(--hover); color: var(--ink); }
/* dark: live 2760-2762 gives every action button a border and paints Reply sky-on-white (3.2:1) */
html[data-ui="signal"][data-theme="dark"] .read-actions { background: transparent; border-bottom: 0; }
html[data-ui="signal"][data-theme="dark"] .action-btn { background: transparent; color: var(--ink); border-color: transparent; }
html[data-ui="signal"][data-theme="dark"] .action-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .action-btn.action-primary { background: var(--btn-primary-bg); color: #fff; border-color: transparent; }
html[data-ui="signal"][data-theme="dark"] .action-btn.action-primary:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"][data-theme="dark"] .read-call-btn { color: var(--ink-2); }
/* 769-1099: the row would scroll in a 393-432px pane; Reply keeps its label, the two
secondary verbs go icon-only (labels stay in the accessibility tree) */
@media (min-width: 769px) and (max-width: 1099px) {
html[data-ui="signal"] .action-btn[data-act="reply-all"],
html[data-ui="signal"] .action-btn[data-act="forward"] { font-size: 0; gap: 0; width: var(--icon-btn); padding: 0; }
}
/* ----------------------------------------------------------------------------
3. READ CARD, HEAD, SENDER LINE
Cozy values go through the 00 tokens so compact / comfortable follow
(00 re-declares the three live density !important rules).
---------------------------------------------------------------------------- */
html[data-ui="signal"] .read-card {
margin: 0 16px 16px;
background: var(--bg-card);
border: 0;
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
}
html[data-ui="signal"] .read-head {
padding: var(--read-pad-y) var(--read-pad-x) calc(var(--read-pad-y) * .6);
border-bottom: 1px solid var(--divider);
}
html[data-ui="signal"] .read-subject {
margin: 0 0 var(--s-4);
font-size: var(--read-subject-fs);
line-height: var(--read-subject-lh);
color: var(--ink);
overflow-wrap: anywhere;
}
/* wrap: when the pane is narrow (769-1099, or a docked Recent panel at any width) the date drops under the
sender instead of squeezing the name into a one-letter column */
html[data-ui="signal"] .read-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: flex-start; }
html[data-ui="signal"] .read-avatar {
width: 40px; height: 40px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--ci-deep); /* avatarFor writes its colour inline; this is the fallback */
color: #fff; font-size: var(--fs-body); font-weight: 600;
}
html[data-ui="signal"] .read-meta-info { flex: 1 1 12rem; min-width: min(12rem, calc(100% - 52px)); }
html[data-ui="signal"] .read-from {
display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2);
font-size: var(--fs-lead); line-height: var(--lh-lead);
min-height: 22px;
}
html[data-ui="signal"] .read-from strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
html[data-ui="signal"] .read-from-email { margin-inline-start: 0; font-size: var(--fs-small); color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ui="signal"] .read-from-email:empty { display: none; }
html[data-ui="signal"] .read-to { margin-top: 2px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); overflow-wrap: anywhere; }
html[data-ui="signal"] .read-to-label { color: var(--ink-3); }
html[data-ui="signal"] .read-date {
font-size: var(--fs-small); line-height: var(--lh-small);
color: var(--ink-3); white-space: nowrap;
font-variant-numeric: tabular-nums;
padding-top: 2px;
margin-inline-start: auto; /* stays at the end of the line, also when it wraps under the sender */
}
/* Pill slot on the sender line (Verified / External / team status), filled by JS when it has something true to say */
html[data-ui="signal"] .read-meta .ci-pill {
display: inline-flex; align-items: center; gap: 4px;
height: 20px; padding: 0 8px;
border-radius: var(--r-pill); border: 1px solid var(--pill-muted-bd);
background: var(--pill-muted-bg); color: var(--pill-muted-fg);
font-size: var(--fs-micro); font-weight: 600; line-height: 1; white-space: nowrap;
vertical-align: middle;
}
html[data-ui="signal"] .read-meta .ci-pill .ic { width: 12px; height: 12px; }
html[data-ui="signal"] .read-meta .ci-pill--ok { background: var(--pill-ok-bg); color: var(--pill-ok-fg); border-color: var(--pill-ok-bd); }
html[data-ui="signal"] .read-meta .ci-pill--info { background: var(--pill-info-bg); color: var(--pill-info-fg); border-color: var(--pill-info-bd); }
html[data-ui="signal"] .read-meta .ci-pill--attn { background: var(--pill-attn-bg); color: var(--pill-attn-fg); border-color: var(--pill-attn-bd); }
html[data-ui="signal"] .read-meta .ci-pill--danger { background: var(--pill-danger-bg); color: var(--pill-danger-fg); border-color: var(--pill-danger-bd); }
html[data-ui="signal"] .read-meta .ci-pill--muted { background: var(--pill-muted-bg); color: var(--pill-muted-fg); border-color: var(--pill-muted-bd); }
/* dark */
html[data-ui="signal"][data-theme="dark"] .read-card { background: var(--bg-card); border: 1px solid var(--divider); box-shadow: var(--shadow-sm); }
html[data-ui="signal"][data-theme="dark"] .read-head { border-bottom-color: var(--divider); }
html[data-ui="signal"][data-theme="dark"] .read-subject { color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .read-from strong { color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .read-from-email,
html[data-ui="signal"][data-theme="dark"] .read-date,
html[data-ui="signal"][data-theme="dark"] .read-to-label { color: var(--ink-3); }
html[data-ui="signal"][data-theme="dark"] .read-to { color: var(--ink-2); }
/* ----------------------------------------------------------------------------
4. READ BODY — paper in both themes; dark keeps the paper and re-pins the
tokens for everything the JS prepends INTO #readBody (conversation strip,
banners, delivery card, team strip, quick replies all sit on the paper).
.ci-dim (on the body or any ancestor) = --paper-dim.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .read-body {
padding: var(--read-pad-y) var(--read-pad-x);
font-size: var(--fs-read);
line-height: var(--lh-read);
color: var(--ink);
max-width: 980px;
}
html[data-ui="signal"] .read-body a { color: var(--link); }
html[data-ui="signal"] .read-body a:hover { text-decoration: underline; }
html[data-ui="signal"][data-theme="dark"] .read-body,
html[data-ui="signal"][data-theme="dark"] .compose-editor-wrap {
/* paper island: light values for everything rendered on the paper surface */
color-scheme: light;
--ink: #0B1F38; --ink-2: #3D5572; --ink-3: #566F8E; --ink-placeholder: #7A8CA3;
--bg: #F4F7FB; --bg-card: #FFFFFF; --bg-sunken: #EAF0F7; --divider: #E3EAF2;
--border: #C9D6E5; --border-strong: #7F97B3; --hover: #EDF3FA; --selected: #EAF3FD; --selected-hover: #D6E7FA;
--bg-elevated: var(--hover);
--primary: var(--ci-blue); --link: var(--ci-deep); --danger: #A4262C; --success: #0B6B2E;
--primary-dark: var(--ci-deep); --primary-light: #A9CDF4; --primary-lighter: #CFE2F9; --primary-lighter-alt: var(--ci-ice); --primary-soft: var(--selected);
--neutral-dark: var(--ink); --neutral-primary: #1E3350; --neutral-secondary: var(--ink-2); --neutral-tertiary: var(--ink-3);
--neutral-quaternary: var(--ink-placeholder); --neutral-light: var(--border); --neutral-lighter: var(--divider); --neutral-lightest: var(--bg-sunken);
--text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3);
--pill-ok-fg: #0B6B2E; --pill-ok-bg: #E6F4EA; --pill-ok-bd: #BFE3CB;
--pill-info-fg: #0D4A8F; --pill-info-bg: #EAF3FD; --pill-info-bd: #A9CDF4;
--pill-attn-fg: #5C3D00; --pill-attn-bg: #FFF1D6; --pill-attn-bd: #F5D58A;
--pill-danger-fg: #A4262C; --pill-danger-bg: #FDE7E9; --pill-danger-bd: #F3B9BE;
--pill-muted-fg: #3D5572; --pill-muted-bg: #EDF3FA; --pill-muted-bd: #E3EAF2;
--shadow-sm: 0 1px 2px rgba(6,37,74,.08), 0 1px 1px rgba(6,37,74,.04);
--focus-input-ring: 0 0 0 3px color-mix(in srgb, var(--ci-blue) 28%, transparent);
}
html[data-ui="signal"][data-theme="dark"] .read-body {
background: var(--paper);
color: var(--paper-ink);
border: 1px solid #1A3350;
border-radius: var(--r-md);
margin: 4px 16px 16px;
box-shadow: none;
}
html[data-ui="signal"][data-theme="dark"] .read-body a { color: var(--ci-deep); }
html[data-ui="signal"][data-theme="dark"] .read-body.ci-dim,
html[data-ui="signal"][data-theme="dark"] .ci-dim .read-body { background: var(--paper-dim); }
html[data-ui="signal"][data-theme="dark"] .read-body.ci-dim,
html[data-ui="signal"][data-theme="dark"] .ci-dim .read-body { --bg-card: #F4F7FB; --hover: #D0DAE6; --pill-muted-bg: #D0DAE6; }
/* ----------------------------------------------------------------------------
5. INLINE ALERT FAMILY — one calm look mapped onto the existing banner classes
(names unchanged): 3px inline-start accent, 10px radius, 12px 14px, 13px
text, icon slot, trailing action, 8px stack gap above the body.
Variants: info (blue) · ok (green) · attn (amber-dark edge, dark ink text)
· danger (red) · muted (grey). .ci-alert / .ci-alert--* are the same
rules for JS-built alerts.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .ci-alert,
html[data-ui="signal"] .tracker-banner,
html[data-ui="signal"] .unsub-banner,
html[data-ui="signal"] .pgp-banner,
html[data-ui="signal"] .pgp-hint-banner,
html[data-ui="signal"] .translate-banner,
html[data-ui="signal"] .oof-banner,
html[data-ui="signal"] .tm-strip,
html[data-ui="signal"] .dlv-card {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 var(--s-2);
padding: 12px 14px;
border: 0;
border-inline-start: 3px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--pill-muted-bg);
color: var(--ink);
font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400;
box-shadow: none;
}
html[data-ui="signal"] .ci-alert > .ic,
html[data-ui="signal"] .tracker-banner > .ic,
html[data-ui="signal"] .unsub-banner > .ic,
html[data-ui="signal"] .pgp-banner > .ic,
html[data-ui="signal"] .pgp-hint-banner > .ic,
html[data-ui="signal"] .translate-banner > .ic,
html[data-ui="signal"] .oof-banner > .ic,
html[data-ui="signal"] .tm-strip > .ic,
html[data-ui="signal"] .dlv-head > .ic { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
html[data-ui="signal"] .ci-alert > span:first-child,
html[data-ui="signal"] .tracker-banner > span:first-child,
html[data-ui="signal"] .unsub-banner > span:first-child,
html[data-ui="signal"] .pgp-banner > span:first-child,
html[data-ui="signal"] .pgp-hint-banner > span:first-child,
html[data-ui="signal"] .translate-banner > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* compact action buttons inside an alert; the last one sits at the inline end */
html[data-ui="signal"] .ci-alert .btn-secondary,
html[data-ui="signal"] .tracker-banner .btn-secondary,
html[data-ui="signal"] .unsub-banner .btn-secondary,
html[data-ui="signal"] .pgp-banner .btn-secondary,
html[data-ui="signal"] .pgp-hint-banner .btn-secondary,
html[data-ui="signal"] .translate-banner .btn-secondary,
html[data-ui="signal"] .unsub-banner button,
html[data-ui="signal"] .oof-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; min-height: 0; padding: 0 10px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink);
font-size: var(--fs-caption); font-weight: 600; line-height: 1;
cursor: pointer; white-space: nowrap; flex: none;
}
html[data-ui="signal"] .ci-alert .btn-secondary:hover,
html[data-ui="signal"] .tracker-banner .btn-secondary:hover,
html[data-ui="signal"] .unsub-banner .btn-secondary:hover,
html[data-ui="signal"] .pgp-banner .btn-secondary:hover,
html[data-ui="signal"] .pgp-hint-banner .btn-secondary:hover,
html[data-ui="signal"] .translate-banner .btn-secondary:hover,
html[data-ui="signal"] .oof-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .ci-alert > .btn-secondary:last-child,
html[data-ui="signal"] .unsub-banner > .btn-secondary:last-child,
html[data-ui="signal"] .pgp-banner > .btn-secondary:last-child,
html[data-ui="signal"] .pgp-hint-banner > .btn-secondary:last-child { margin-inline-start: auto; }
/* variants */
html[data-ui="signal"] .ci-alert--info,
html[data-ui="signal"] .tracker-banner,
html[data-ui="signal"] .pgp-banner,
html[data-ui="signal"] .translate-banner { background: var(--pill-info-bg); border-inline-start: 3px solid var(--ci-blue); }
html[data-ui="signal"] .ci-alert--info > .ic,
html[data-ui="signal"] .tracker-banner > .ic,
html[data-ui="signal"] .pgp-banner > .ic,
html[data-ui="signal"] .translate-banner > .ic { color: var(--pill-info-fg); }
html[data-ui="signal"] .ci-alert--ok,
html[data-ui="signal"] .pgp-banner.pgp-success { background: var(--pill-ok-bg); border-inline-start: 3px solid var(--success); }
html[data-ui="signal"] .ci-alert--ok > .ic,
html[data-ui="signal"] .pgp-banner.pgp-success > .ic { color: var(--pill-ok-fg); }
html[data-ui="signal"] .ci-alert--attn,
html[data-ui="signal"] .oof-banner { background: var(--pill-attn-bg); border-inline-start: 3px solid var(--ci-amber-dark); }
html[data-ui="signal"] .ci-alert--attn > .ic,
html[data-ui="signal"] .oof-banner > .ic,
html[data-ui="signal"] .oof-icon { color: var(--pill-attn-fg); }
html[data-ui="signal"] .ci-alert--danger { background: var(--pill-danger-bg); border-inline-start: 3px solid var(--danger); }
html[data-ui="signal"] .ci-alert--danger > .ic { color: var(--pill-danger-fg); }
html[data-ui="signal"] .ci-alert--muted,
html[data-ui="signal"] .unsub-banner,
html[data-ui="signal"] .tm-strip,
html[data-ui="signal"] .dlv-card { background: var(--pill-muted-bg); border-inline-start: 3px solid var(--border-strong); }
/* live writes these two banners' look into style= (js 1910 / 2047): the same four
properties are forced here; everything else is ordinary cascade */
html[data-ui="signal"] .pgp-hint-banner {
background: var(--pill-info-bg) !important; /* beats inline bg #fff4ce and live 2772 dark !important */
border-left-color: var(--ci-blue) !important; /* beats inline #c19c00 and live 2772; physical, like the inline */
border-radius: var(--r-md) !important; /* beats inline 4px */
padding: 12px 14px !important; /* beats inline 10px 14px */
margin-bottom: var(--s-2) !important; /* beats inline 12px */
justify-content: flex-start;
}
html[data-ui="signal"] .translate-banner {
background: var(--pill-info-bg) !important; /* beats inline #deecf9 */
border-left-color: var(--ci-blue) !important; /* beats inline #0F6CBD (pre-brand blue) */
border-radius: var(--r-md) !important; /* beats inline 4px */
padding: 12px 14px !important; /* beats inline 10px 14px */
margin-bottom: var(--s-2) !important; /* beats inline 12px */
display: block; /* the translation text is a block, not a row */
}
html[data-ui="signal"] .translate-banner > div { white-space: pre-wrap; }
/* PGP banner text was 600 in live; the family is 400 with a 500 lead */
html[data-ui="signal"] .pgp-banner { font-weight: 500; }
/* out-of-office strip (top of the list pane): same family, inset from the pane edges */
html[data-ui="signal"] .oof-banner { margin: 8px 12px 0; }
html[data-ui="signal"] .oof-text { flex: 1 1 auto; min-width: 0; font-weight: 400; }
html[data-ui="signal"] .oof-icon { font-size: 16px; }
html[data-ui="signal"] .oof-close {
width: 28px; height: 28px; padding: 0; margin-inline-start: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; flex: none;
}
html[data-ui="signal"] .oof-close:hover { background: var(--hover); color: var(--ink); }
/* dark surfaces outside the paper island (the OOF strip sits in the list pane) */
html[data-ui="signal"][data-theme="dark"] .oof-banner { background: var(--pill-attn-bg); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .oof-btn { background: var(--bg-card); color: var(--ink); border-color: var(--border-strong); }
html[data-ui="signal"][data-theme="dark"] .oof-close { color: var(--ink-2); }
/* generic .ci-alert on a dark surface (list pane, settings) follows the dark pill tokens by itself */
html[data-ui="signal"][data-theme="dark"] .ci-alert { color: var(--ink); }
/* ----------------------------------------------------------------------------
6. TEAM STRIP (#teamStrip.tm-strip) — status toggle group, assign, notes
---------------------------------------------------------------------------- */
html[data-ui="signal"] .tm-strip { font-size: var(--fs-caption); }
html[data-ui="signal"] .tm-label {
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--ink-3);
}
html[data-ui="signal"] .tm-segs {
display: inline-flex; gap: 2px; padding: 2px;
border: 0; border-radius: var(--r-pill);
background: var(--hover); overflow: hidden;
}
html[data-ui="signal"] .tm-seg {
height: 24px; padding: 0 10px;
border: 0; border-radius: var(--r-pill);
background: transparent; color: var(--ink-2);
font-size: var(--fs-caption); font-weight: 500; line-height: 1; cursor: pointer;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .tm-seg + .tm-seg { border-inline-start: 0; }
html[data-ui="signal"] .tm-seg:hover { color: var(--ink); }
html[data-ui="signal"] .tm-seg.on { background: var(--bg-card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
html[data-ui="signal"] .tm-assign,
html[data-ui="signal"] .tm-notes-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 10px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink);
font-size: var(--fs-caption); font-weight: 500; line-height: 1; cursor: pointer;
}
html[data-ui="signal"] .tm-assign:hover,
html[data-ui="signal"] .tm-notes-btn:hover { background: var(--hover); }
html[data-ui="signal"] .tm-assign .tm-av { width: 16px; height: 16px; font-size: 10px; background: var(--ci-deep); color: #fff; }
html[data-ui="signal"] .tm-replied { color: var(--ink-3); font-size: var(--fs-caption); }
html[data-ui="signal"] .tm-replied b { color: var(--ink-2); font-weight: 600; }
/* dark: the strip is inside the paper island (light tokens); nothing to add */
/* ----------------------------------------------------------------------------
7. DELIVERY CARD (#dlvCard.dlv-card) — Timeline, kept, 112px time column
---------------------------------------------------------------------------- */
html[data-ui="signal"] .dlv-card { display: block; }
html[data-ui="signal"] .dlv-head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
html[data-ui="signal"] .dlv-title { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .dlv-toggle {
margin-inline-start: auto; height: 28px; padding: 0 8px;
border: 0; border-radius: var(--r-sm); background: transparent;
color: var(--link); font-size: var(--fs-caption); font-weight: 500; cursor: pointer;
}
html[data-ui="signal"] .dlv-toggle:hover { background: var(--hover); text-decoration: underline; }
/* card edge follows the summary pill */
html[data-ui="signal"] .dlv-card:has(.dlv-head .dlv-pill.dlv-ok) { border-inline-start-color: var(--success); }
html[data-ui="signal"] .dlv-card:has(.dlv-head .dlv-pill.dlv-sent) { border-inline-start-color: var(--ci-blue); }
html[data-ui="signal"] .dlv-card:has(.dlv-head .dlv-pill.dlv-wait) { border-inline-start: 3px solid var(--ci-amber-dark); }
html[data-ui="signal"] .dlv-card:has(.dlv-head .dlv-pill.dlv-bad) { border-inline-start-color: var(--danger); }
/* the summary pill in the card head (row pills are module 01's) */
html[data-ui="signal"] .dlv-head .dlv-pill {
display: inline-flex; align-items: center; gap: 4px;
height: 20px; padding: 0 8px;
border-radius: var(--r-pill); border: 1px solid var(--pill-muted-bd);
background: var(--pill-muted-bg); color: var(--pill-muted-fg);
font-size: var(--fs-micro); font-weight: 600; line-height: 1; white-space: nowrap;
}
html[data-ui="signal"] .dlv-head .dlv-pill .ic { width: 12px; height: 12px; }
html[data-ui="signal"] .dlv-head .dlv-pill.dlv-ok { background: var(--pill-ok-bg); color: var(--pill-ok-fg); border-color: var(--pill-ok-bd); }
html[data-ui="signal"] .dlv-head .dlv-pill.dlv-sent { background: var(--pill-info-bg); color: var(--pill-info-fg); border-color: var(--pill-info-bd); }
html[data-ui="signal"] .dlv-head .dlv-pill.dlv-wait { background: var(--pill-attn-bg); color: var(--pill-attn-fg); border-color: var(--pill-attn-bd); }
html[data-ui="signal"] .dlv-head .dlv-pill.dlv-bad { background: var(--pill-danger-bg); color: var(--pill-danger-fg); border-color: var(--pill-danger-bd); }
html[data-ui="signal"] .dlv-head .dlv-pill.dlv-mute { background: var(--pill-muted-bg); color: var(--pill-muted-fg); border-color: var(--pill-muted-bd); }
/* timeline */
html[data-ui="signal"] .dlv-tl { list-style: none; margin: 10px 0 0; padding: 0; }
html[data-ui="signal"] .dlv-tl-item {
position: relative;
display: grid; grid-template-columns: 18px minmax(0, 1fr) 112px; gap: 0 10px;
padding: 0 0 12px;
}
html[data-ui="signal"] .dlv-tl-item:last-child { padding-bottom: 0; }
html[data-ui="signal"] .dlv-tl-item::before {
content: ""; position: absolute; inset-inline-start: 8px; top: 14px; bottom: -2px; width: 2px;
background: var(--border);
}
html[data-ui="signal"] .dlv-tl-item:last-child::before { display: none; }
html[data-ui="signal"] .dlv-dot {
width: 10px; height: 10px; border-radius: 50%; margin: 4px 0 0 4px;
background: var(--border-strong);
box-shadow: 0 0 0 2px var(--pill-muted-bg); /* covers the connector; matches the card surface */
position: relative; z-index: 1;
}
html[data-ui="signal"] .dlv-tl-item.ok .dlv-dot { background: var(--success); }
html[data-ui="signal"] .dlv-tl-item.sent .dlv-dot { background: var(--ci-blue); }
html[data-ui="signal"] .dlv-tl-item.wait .dlv-dot { background: var(--ci-amber-dark); }
html[data-ui="signal"] .dlv-tl-item.bad .dlv-dot { background: var(--danger); }
html[data-ui="signal"] .dlv-tl-item.mute .dlv-dot { background: var(--border-strong); }
html[data-ui="signal"] .dlv-tl-main { min-width: 0; }
html[data-ui="signal"] .dlv-tl-title { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); overflow-wrap: anywhere; }
html[data-ui="signal"] .dlv-tl-title b { font-weight: 600; }
html[data-ui="signal"] .dlv-tl-why { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
html[data-ui="signal"] .dlv-tl-time {
font-family: var(--font-mono);
font-size: var(--fs-micro); line-height: var(--lh-micro);
font-variant-numeric: tabular-nums;
color: var(--ink-3);
white-space: normal; text-align: end;
padding-top: 2px;
}
html[data-ui="signal"] .dlv-link { color: var(--link); cursor: pointer; text-decoration: underline; }
/* in-progress dot: slow pulse, motion-safe (00's reduced-motion kill switch also covers it) */
@media (prefers-reduced-motion: no-preference) {
html[data-ui="signal"] .dlv-tl-item.wait .dlv-dot { animation: sig-dlv-pulse 1.2s ease-in-out infinite; }
}
@keyframes sig-dlv-pulse {
0%, 100% { box-shadow: 0 0 0 2px var(--pill-muted-bg), 0 0 0 2px transparent; }
50% { box-shadow: 0 0 0 2px var(--pill-muted-bg), 0 0 0 6px color-mix(in srgb, var(--ci-amber-dark) 30%, transparent); }
}
/* phones: time drops under the title (live 4052 is (0,1,0) and would lose to the rules above) */
@media (max-width: 768px) {
html[data-ui="signal"] .dlv-tl-item { grid-template-columns: 18px minmax(0, 1fr); }
html[data-ui="signal"] .dlv-tl-time { grid-column: 2; text-align: start; padding-top: 0; }
}
/* ----------------------------------------------------------------------------
8. CONVERSATION STRIP (#convStrip.conv-strip)
---------------------------------------------------------------------------- */
html[data-ui="signal"] .conv-strip {
margin: 0 0 var(--s-2);
border: 1px solid var(--divider); border-radius: var(--r-md);
background: var(--hover); overflow: hidden;
}
html[data-ui="signal"] .conv-bar {
display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
padding: 8px 12px;
font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2);
}
html[data-ui="signal"] .conv-title { font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .conv-pos { color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ui="signal"] .conv-unread { color: var(--ink-2); font-weight: 600; }
html[data-ui="signal"] .conv-spacer { flex: 1; }
html[data-ui="signal"] .conv-nav,
html[data-ui="signal"] .conv-toggle {
height: 28px; padding: 0 8px;
border: 1px solid transparent; border-radius: var(--r-sm);
background: transparent; color: var(--link);
font: inherit; font-size: var(--fs-caption); font-weight: 500; cursor: pointer; white-space: nowrap;
}
html[data-ui="signal"] .conv-nav:hover:not(:disabled),
html[data-ui="signal"] .conv-toggle:hover { background: var(--bg-card); border-color: var(--border); }
html[data-ui="signal"] .conv-nav:disabled { color: var(--ink-placeholder); cursor: default; }
html[data-ui="signal"] .conv-list { max-height: 240px; overflow-y: auto; border-top: 1px solid var(--divider); background: var(--bg-card); }
html[data-ui="signal"] .conv-item {
display: flex; align-items: center; gap: 10px;
width: 100%; min-height: 36px; padding: 6px 12px 6px 9px;
border: 0; border-inline-start: 3px solid transparent; border-bottom: 1px solid var(--divider);
background: transparent; color: var(--ink);
font-size: var(--fs-small); text-align: start; cursor: pointer;
}
html[data-ui="signal"] .conv-item:last-child { border-bottom: 0; }
html[data-ui="signal"] .conv-item:hover { background: var(--hover); }
html[data-ui="signal"] .conv-item.current { background: var(--selected); border-inline-start-color: var(--ci-blue); }
html[data-ui="signal"] .conv-item .conv-date { flex: none; width: 64px; font-size: var(--fs-caption); color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ui="signal"] .conv-item .conv-from { flex: 0 1 180px; min-width: 0; font-weight: 500; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="signal"] .conv-item.unread .conv-from { font-weight: 600; }
html[data-ui="signal"] .conv-item .conv-snip { flex: 1 1 auto; min-width: 0; font-size: var(--fs-caption); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="signal"] .conv-item .conv-cur-tag {
flex: none; height: 18px; padding: 0 7px; display: inline-flex; align-items: center;
font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--pill-info-fg); background: var(--pill-info-bg); border: 1px solid var(--pill-info-bd); border-radius: var(--r-pill);
}
/* dark: inside the paper island; the strip reads its light tokens */
/* ----------------------------------------------------------------------------
9. QUICK REPLIES (.inline-suggestions, appended after the body text)
---------------------------------------------------------------------------- */
html[data-ui="signal"] .inline-suggestions {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
margin-top: var(--s-5); padding-top: var(--s-3);
border-top: 1px solid var(--divider);
}
html[data-ui="signal"] .is-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); margin-inline-end: 2px; }
html[data-ui="signal"] .is-btn {
height: 32px; padding: 0 12px; max-width: 100%;
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
background: var(--bg-card); color: var(--ink);
font: inherit; font-size: var(--fs-small); line-height: 1; cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-ui="signal"] .is-btn:hover { background: var(--hover); border-color: var(--ink-3); }
/* ----------------------------------------------------------------------------
10. ATTACHMENTS — 40px chips (read), 36px (compose); name truncates, size stays
---------------------------------------------------------------------------- */
html[data-ui="signal"] .read-attachments {
padding: calc(var(--read-pad-y) * .6) var(--read-pad-x) var(--read-pad-y);
border-top: 1px solid var(--divider);
}
html[data-ui="signal"] .read-attachments > div:first-child { font-size: var(--fs-caption); color: var(--ink-3); margin-bottom: var(--s-2); }
html[data-ui="signal"] .read-attachments > span { max-width: 100%; vertical-align: top; }
html[data-ui="signal"] .attachment-item {
display: inline-flex; align-items: center; gap: var(--s-2);
height: 40px; max-width: min(100%, 320px); padding: 0 12px;
margin: 0 var(--s-2) var(--s-2) 0;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink);
font-size: var(--fs-small); font-weight: 500; text-decoration: none; cursor: pointer;
vertical-align: top;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .attachment-item:hover { background: var(--hover); border-color: var(--border-strong); }
html[data-ui="signal"] .attachment-item > span:first-child { flex: none; font-size: 15px; line-height: 1; }
html[data-ui="signal"] .attachment-item > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="signal"] .attachment-item > span:last-child { flex: none; font-size: var(--fs-caption); color: var(--ink-3); }
html[data-ui="signal"] .attachment-item .ic { flex: none; color: var(--ink-2); }
html[data-ui="signal"] .read-attachments .att-preview-btn {
display: inline-flex; align-items: center; gap: 4px;
height: 40px; margin: 0 var(--s-2) var(--s-2) 0; vertical-align: top;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink-2);
font-size: var(--fs-caption); font-weight: 600; cursor: pointer;
}
html[data-ui="signal"] .read-attachments .att-preview-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .compose-attachments { gap: 6px; padding: 6px 0 0; }
html[data-ui="signal"] .compose-attachments .attachment-item { height: 36px; margin: 0; cursor: default; }
html[data-ui="signal"] .compose-attachments .attachment-item button {
width: 24px; height: 24px; padding: 0; margin-inline-start: 2px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-3); cursor: pointer;
}
html[data-ui="signal"] .compose-attachments .attachment-item button:hover { background: var(--hover); color: var(--danger); }
/* dark: chips sit on the card (read) and on the dialog (compose), both dark surfaces */
html[data-ui="signal"][data-theme="dark"] .attachment-item { background: var(--bg-card); border-color: var(--border); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .attachment-item:hover { background: var(--hover); }
html[data-ui="signal"][data-theme="dark"] .read-attachments { border-top-color: var(--divider); }
html[data-ui="signal"][data-theme="dark"] .read-attachments .att-preview-btn { background: var(--bg-card); border-color: var(--border); color: var(--ink-2); }
/* attachment preview overlay */
html[data-ui="signal"] .att-preview-overlay { background: var(--scrim); }
html[data-ui="signal"] .att-preview-modal { background: var(--bg-card); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-4); }
html[data-ui="signal"] .att-preview-head { border-bottom-color: var(--divider); font-weight: 600; }
/* ----------------------------------------------------------------------------
11. TEAM NOTES (#teamNotes.tm-notes) and SENDER CARD (#crmSidebar) —
skinned in place (brief item 19); positions untouched
---------------------------------------------------------------------------- */
html[data-ui="signal"] .tm-notes {
background: var(--bg-card); color: var(--ink);
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-md);
padding: var(--s-3);
font-size: var(--fs-small); line-height: var(--lh-small);
}
html[data-ui="signal"] .tm-notes-head { margin-bottom: var(--s-2); }
html[data-ui="signal"] .tm-notes-head b { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .tm-x {
width: 28px; height: 28px; padding: 0; opacity: 1;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer;
}
html[data-ui="signal"] .tm-x:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .tm-note { border-top-color: var(--divider); }
html[data-ui="signal"] .tm-note-head { color: var(--ink-3); font-size: var(--fs-micro); }
html[data-ui="signal"] .tm-note-head b { color: var(--ink-2); }
html[data-ui="signal"] .tm-note-head time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
html[data-ui="signal"] .tm-note-body { color: var(--ink); }
html[data-ui="signal"] .tm-empty,
html[data-ui="signal"] .tm-events { color: var(--ink-3); }
html[data-ui="signal"] .tm-events summary { cursor: pointer; color: var(--ink-2); }
html[data-ui="signal"] .tm-notes-add .vp-textarea {
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink); font: inherit; font-size: var(--fs-small); padding: 8px 10px;
}
html[data-ui="signal"] .tm-notes-add .btn-primary {
height: 32px; padding: 0 14px; border-radius: var(--r-sm);
background: var(--btn-primary-bg); color: #fff; font-size: var(--fs-small); font-weight: 600;
}
html[data-ui="signal"] .tm-notes-add .btn-primary:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"] .tm-notes-add .btn-primary:disabled { background: var(--border); color: var(--ink-3); }
html[data-ui="signal"][data-theme="dark"] .tm-notes { background: var(--bg-card); border-color: var(--border); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .tm-notes-add .vp-textarea { background: var(--bg); border-color: var(--border-strong); color: var(--ink); }
/* sender card: geometry and surface come from its inline style (tokens remapped); only unset props here */
html[data-ui="signal"] #crmSidebar { color: var(--ink); line-height: var(--lh-caption); }
html[data-ui="signal"] #crmSidebar #crmClose { color: var(--ink-2); border-radius: var(--r-xs); }
html[data-ui="signal"] #crmSidebar #crmClose:hover { color: var(--ink); background: var(--hover); }
html[data-ui="signal"] #crmSidebar textarea { color: var(--ink); background: var(--bg-card); font-family: inherit; }
html[data-ui="signal"] #crmSidebar .btn-secondary {
height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink); font-size: var(--fs-caption); font-weight: 600;
}
html[data-ui="signal"][data-theme="dark"] #crmSidebar textarea { background: var(--bg); border-color: var(--border-strong); }
/* ----------------------------------------------------------------------------
12. COMPOSE — shared skin (both modes): header row, fields, format bar,
editor (paper), footer tools, status
---------------------------------------------------------------------------- */
html[data-ui="signal"] .compose-dialog { color: var(--ink); }
html[data-ui="signal"] .compose-dialog .compose-header {
display: flex; align-items: center;
gap: var(--s-3); min-height: 48px; padding: 6px 12px 6px 16px;
background: var(--bg-card); color: var(--ink);
border-bottom: 1px solid var(--divider); border-radius: 0;
}
html[data-ui="signal"] .compose-dialog .compose-title {
min-width: 0; flex: 1 1 auto;
font-size: var(--fs-body); font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="signal"] .compose-dialog .compose-header-actions { display: flex; gap: 2px; margin-inline-start: auto; flex: none; }
html[data-ui="signal"] .compose-dialog .compose-header-actions .icon-btn {
width: var(--icon-btn); height: var(--icon-btn);
border-radius: var(--r-sm); background: transparent;
color: var(--ink-2); font-size: 15px;
}
html[data-ui="signal"] .compose-dialog .compose-header-actions .icon-btn:hover { background: var(--hover); color: var(--ink); }
/* Send (+ Send later ▾) in the header lead (inline mode) */
html[data-ui="signal"] .ci-head-lead { gap: 0; flex: none; }
html[data-ui="signal"] .ci-head-lead #composeSend {
height: var(--icon-btn); padding: 0 16px;
border-radius: var(--r-sm) 0 0 var(--r-sm);
background: var(--btn-primary-bg); color: #fff;
font-size: var(--fs-body); font-weight: 600; letter-spacing: 0;
}
html[data-ui="signal"] .ci-head-lead #composeSend:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"] .ci-head-lead #composeSend:active { background: var(--btn-primary-active); }
html[data-ui="signal"] .ci-send-more {
height: var(--icon-btn); min-width: 28px; padding: 0 6px;
border: 0; border-inline-start: 1px solid rgba(255,255,255,.35);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
background: var(--btn-primary-bg); color: #fff; font-size: 12px;
}
html[data-ui="signal"] .ci-send-more:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"] .ci-head-lead .sg-btn { height: var(--icon-btn); margin-inline-start: 10px; }
/* fields */
html[data-ui="signal"] .compose-row { gap: 10px; align-items: center; padding: 0; border-bottom: 0; }
html[data-ui="signal"] .compose-row label {
width: 68px; flex: none;
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--ink-3);
}
html[data-ui="signal"] .compose-row .compose-input,
html[data-ui="signal"] .compose-row .from-picker .compose-input {
min-height: var(--icon-btn); padding: 7px 10px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink);
font-size: var(--fs-body); line-height: var(--lh-body);
transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .compose-row .compose-input:focus { border-color: var(--primary); box-shadow: var(--focus-input-ring); }
html[data-ui="signal"] .from-picker .compose-input { padding-inline-end: 32px; }
html[data-ui="signal"] .from-picker-toggle { width: 28px; height: 28px; border-radius: var(--r-xs); color: var(--ink-3); font-size: 12px; }
html[data-ui="signal"] .from-picker-toggle:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .ci-cc-links .link-btn,
html[data-ui="signal"] .compose-row-actions-mini .link-btn {
height: 28px; padding: 0 8px; border-radius: var(--r-xs);
color: var(--link); font-size: var(--fs-caption); font-weight: 500;
}
html[data-ui="signal"] .ci-cc-links .link-btn:hover,
html[data-ui="signal"] .compose-row-actions-mini .link-btn:hover { background: var(--hover); text-decoration: none; }
/* format bar: a 36px icon toolbar with no rules of its own; the editor box below carries the edge */
html[data-ui="signal"] .ci-fmt {
display: flex; align-items: center; gap: 2px; min-height: 36px;
padding: 0; margin: 2px 0 6px;
border: 0;
}
html[data-ui="signal"] .ci-fmt-btn {
min-width: 32px; height: 32px; padding: 0 6px;
border: 0; border-radius: var(--r-sm);
background: transparent; color: var(--ink-2);
font-size: var(--fs-body); cursor: pointer;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .ci-fmt-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .ci-fmt-btn.on { background: var(--selected); color: var(--ci-deep); }
html[data-ui="signal"] .ci-fmt-btn svg { width: 16px; height: 16px; }
html[data-ui="signal"] .ci-fmt-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--divider); }
html[data-ui="signal"] .ci-fmt-size {
height: 32px; padding: 0 6px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink); font-size: var(--fs-small);
}
html[data-ui="signal"] .ci-fmt-color { min-width: 32px; height: 32px; border-radius: var(--r-sm); }
html[data-ui="signal"] .ci-fmt-color:hover { background: var(--hover); }
html[data-ui="signal"] .ci-fmt-color .ci-fmt-a { color: var(--ink); font-size: var(--fs-body); }
/* editor: paper in both themes (dark re-pins the tokens in section 4) */
html[data-ui="signal"] .compose-editor-wrap {
margin-top: 0; padding: 0;
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--paper);
transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .compose-editor-wrap:focus-within { border-color: var(--primary); box-shadow: var(--focus-input-ring); }
html[data-ui="signal"] .compose-editor {
padding: 12px 14px;
font-size: var(--fs-body); line-height: var(--lh-body);
color: var(--paper-ink);
}
html[data-ui="signal"] #composeEditor [data-sig-own] { border-top: 1px dashed var(--divider); }
html[data-ui="signal"][data-theme="dark"] .compose-editor-wrap { background: var(--paper); border-color: var(--border-strong); }
html[data-ui="signal"][data-theme="dark"] .compose-editor-wrap:focus-within { border-color: var(--ci-sky); }
html[data-ui="signal"][data-theme="dark"] .compose-editor { color: var(--paper-ink); }
html[data-ui="signal"][data-theme="dark"] .compose-editor-wrap.ci-dim,
html[data-ui="signal"][data-theme="dark"] .ci-dim .compose-editor-wrap { background: var(--paper-dim); }
/* footer: tools as 36px icon(+label) buttons, Send filled, status at the inline end */
html[data-ui="signal"] .compose-dialog .compose-footer {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
padding: 10px 0 0;
border-top: 1px solid var(--divider);
}
html[data-ui="signal"] .compose-footer .btn-primary,
html[data-ui="signal"] .compose-footer #composeSend {
height: var(--icon-btn); padding: 0 16px;
border: 0; border-radius: var(--r-sm);
background: var(--btn-primary-bg); color: #fff;
font-size: var(--fs-body); font-weight: 600; letter-spacing: 0;
}
html[data-ui="signal"] .compose-footer .btn-primary:hover,
html[data-ui="signal"] .compose-footer #composeSend:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"] .compose-footer .btn-primary:active { background: var(--btn-primary-active); }
html[data-ui="signal"] .compose-footer .btn-primary:disabled { background: var(--border); color: var(--ink-3); cursor: not-allowed; }
html[data-ui="signal"] .compose-dialog .compose-footer .btn-secondary,
html[data-ui="signal"] .compose-footer .compose-btn, /* #composeFreeTimes borrows the folder-pane class */
html[data-ui="signal"] .compose-footer .sg-btn {
display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
height: var(--icon-btn); min-width: var(--icon-btn); min-height: 0; padding: 0 10px; margin: 0;
border: 1px solid transparent; border-radius: var(--r-sm);
background: transparent; color: var(--ink-2);
box-shadow: none; /* .compose-btn (01) carries the New-mail button's shadow */
font-size: var(--fs-small); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .compose-dialog .compose-footer .btn-secondary:hover,
html[data-ui="signal"] .compose-footer .compose-btn:hover,
html[data-ui="signal"] .compose-footer .sg-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .compose-footer .btn-secondary .ic,
html[data-ui="signal"] .compose-footer .sg-btn .ic { flex: none; }
html[data-ui="signal"] .sg-btn.on { border-color: var(--primary); color: var(--primary); }
/* on-states of the five footer toggles — beats live 1913 / 1914 / 1915 / 1952 (gradient + white !important) */
html[data-ui="signal"] .pgp-active,
html[data-ui="signal"] .md-active,
html[data-ui="signal"] .sd-active {
background: var(--selected) !important;
color: var(--ci-deep) !important;
border: 1px solid var(--primary) !important;
}
html[data-ui="signal"] .voice-active {
background: var(--danger-fill) !important; /* recording: the one filled tool */
color: #fff !important;
border: 1px solid transparent !important;
}
html[data-ui="signal"] .compose-status { margin-inline-start: auto; font-size: var(--fs-caption); color: var(--ink-3); }
html[data-ui="signal"] .compose-status.saved::after { color: var(--success); }
html[data-ui="signal"] .compose-status.error { color: var(--danger); }
/* dark: live 2786-2791 paints the header #0A2C52 and the fields #0A1A2C */
html[data-ui="signal"][data-theme="dark"] .compose-dialog { color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog .compose-header { background: var(--bg-card); color: var(--ink); border-bottom-color: var(--divider); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog .compose-header-actions .icon-btn { color: var(--ink-2); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog .compose-header-actions .icon-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .compose-row label { color: var(--ink-3); }
html[data-ui="signal"][data-theme="dark"] .compose-row .compose-input,
html[data-ui="signal"][data-theme="dark"] .compose-row .from-picker .compose-input { background: var(--bg); border-color: var(--border-strong); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .compose-row .compose-input:focus { border-color: var(--ci-sky); }
html[data-ui="signal"][data-theme="dark"] .ci-fmt-btn { color: var(--ink-2); }
html[data-ui="signal"][data-theme="dark"] .ci-fmt-btn.on { background: var(--selected); color: var(--ci-sky); }
html[data-ui="signal"][data-theme="dark"] .ci-fmt-size { background: var(--bg); color: var(--ink); border-color: var(--border-strong); }
html[data-ui="signal"][data-theme="dark"] .ci-fmt-color .ci-fmt-a { color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog .compose-footer { background: transparent; border-top-color: var(--divider); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog .compose-footer .btn-secondary,
html[data-ui="signal"][data-theme="dark"] .compose-footer .compose-btn,
html[data-ui="signal"][data-theme="dark"] .compose-footer .sg-btn { color: var(--ink-2); }
html[data-ui="signal"][data-theme="dark"] .pgp-active,
html[data-ui="signal"][data-theme="dark"] .md-active,
html[data-ui="signal"][data-theme="dark"] .sd-active { background: var(--selected) !important; color: var(--ci-sky) !important; border-color: var(--ci-sky) !important; }
html[data-ui="signal"][data-theme="dark"] .sg-btn.on { border-color: var(--ci-sky); color: var(--ci-sky); }
/* ----------------------------------------------------------------------------
13. COMPOSE — FLOATING WINDOW (desktop, not .compose-inline): 640x560,
radius 14, --shadow-lg, navy 3px top edge. Sizes are scoped with
:not(.compose-inline) so the inline rules' width/height:auto stay intact;
on phones the live full-screen !important rules (3039-3043) win.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .compose-dialog:not(.compose-inline) {
width: 640px; max-width: calc(100vw - 48px);
height: 560px; max-height: calc(100vh - 48px);
background: var(--bg-card);
border: 0; border-top: 3px solid var(--ci-navy);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
}
html[data-ui="signal"] .compose-dialog:not(.compose-inline) .compose-header { border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0; }
html[data-ui="signal"] .compose-dialog:not(.compose-inline) .compose-form { padding: 12px 16px 14px; gap: 8px; }
html[data-ui="signal"][data-theme="dark"] .compose-dialog:not(.compose-inline) {
background: var(--bg-card);
border: 1px solid var(--border); border-top: 3px solid var(--ci-blue);
box-shadow: var(--shadow-lg);
}
/* 769-1023 (tablet): the window is centred at 92vw x 80vh (per specC layout.tablet) */
@media (min-width: 769px) and (max-width: 1023px) {
html[data-ui="signal"] .compose-dialog:not(.compose-inline) {
width: 92vw; max-width: 92vw;
height: 80vh; max-height: 80vh;
right: 4vw; bottom: 10vh;
}
html[data-ui="signal"][dir="rtl"] .compose-dialog:not(.compose-inline) { left: 4vw; right: auto; }
}
/* ----------------------------------------------------------------------------
14. COMPOSE — INLINE / DOCKED (>= 769, dialog re-parented into .read-pane,
.compose-inline; pane has .ci-composing). Mechanics (absolute, inset 0,
z 5, minimized display:none) come from live 3913-3937 and stay. The skin
pads the dialog 16px so the header + form read as one white card with a
navy top edge on the pane surface, like the read card beside it.
---------------------------------------------------------------------------- */
@media (min-width: 769px) {
html[data-ui="signal"] .compose-dialog.compose-inline {
background: var(--bg);
padding: 16px;
border: 0; border-radius: 0; box-shadow: none;
}
html[data-ui="signal"] .compose-dialog.compose-inline .compose-header {
gap: 12px; min-height: 52px; padding: 8px 12px 8px 16px;
background: var(--bg-card); color: var(--ink);
border: 1px solid var(--divider); border-top: 3px solid var(--ci-navy); border-bottom: 1px solid var(--divider);
border-radius: var(--r-md) var(--r-md) 0 0;
justify-content: flex-start;
}
html[data-ui="signal"] .compose-dialog.compose-inline .compose-title { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .compose-dialog.compose-inline .compose-header-actions .icon-btn { width: var(--icon-btn); height: var(--icon-btn); color: var(--ink-2); font-size: 15px; }
html[data-ui="signal"] .compose-dialog.compose-inline .compose-header-actions .icon-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .compose-dialog.compose-inline .compose-form {
padding: 10px 20px 14px; gap: 6px;
background: var(--bg-card);
border: 1px solid var(--divider); border-top: 0;
border-radius: 0 0 var(--r-md) var(--r-md);
box-shadow: var(--shadow-sm);
}
html[data-ui="signal"] .compose-dialog.compose-inline .compose-footer { padding-top: 8px; }
html[data-ui="signal"][data-theme="dark"] .compose-dialog.compose-inline { background: var(--bg); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog.compose-inline .compose-header { background: var(--bg-card); border-color: var(--divider); border-top-color: var(--ci-blue); }
html[data-ui="signal"][data-theme="dark"] .compose-dialog.compose-inline .compose-form { background: var(--bg-card); border-color: var(--divider); }
/* desktop footer tools: one line, 36px (live 3940-3944 sets 32px) */
html[data-ui="signal"] .compose-dialog .compose-footer { flex-wrap: wrap; gap: 6px; padding-top: 10px; }
html[data-ui="signal"] .compose-dialog .compose-footer .btn-secondary { height: var(--icon-btn); min-height: 0; padding: 0 10px; font-size: var(--fs-small); }
}
/* parked-draft tab at the bottom of the reading pane (38px: .read-pane.ci-has-tab pads for it) */
html[data-ui="signal"] .ci-draft-tab {
background: var(--bg-card);
border-top: 1px solid var(--divider);
padding: 0 16px; gap: 6px;
}
html[data-ui="signal"] .ci-draft-open {
height: 28px; max-width: 360px; padding: 0 10px; gap: 8px;
border: 1px solid var(--border); border-bottom: 2px solid var(--primary); border-radius: var(--r-sm);
background: var(--bg-card); color: var(--ink); font-size: var(--fs-small); font-weight: 500;
}
html[data-ui="signal"] .ci-draft-open:hover { background: var(--hover); }
html[data-ui="signal"] .ci-draft-ic { color: var(--primary); }
html[data-ui="signal"] .ci-draft-x { width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--ink-2); }
html[data-ui="signal"] .ci-draft-x:hover { background: var(--hover); color: var(--danger); }
html[data-ui="signal"][data-theme="dark"] .ci-draft-tab { background: var(--bg-card); border-top-color: var(--divider); }
html[data-ui="signal"][data-theme="dark"] .ci-draft-open { background: var(--bg-card); border-color: var(--border); border-bottom-color: var(--ci-sky); color: var(--ink); }
html[data-ui="signal"][data-theme="dark"] .ci-draft-ic { color: var(--ci-sky); }
/* ----------------------------------------------------------------------------
15. SIGNATURE MENU (#sgMenu.sg-menu) and FROM PICKER (#composeFromMenu) —
popover skin; positions untouched
---------------------------------------------------------------------------- */
html[data-ui="signal"] .sg-menu {
background: var(--bg-card); color: var(--ink);
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-md);
padding: 6px;
}
html[data-ui="signal"] .sg-mh {
padding: 8px 10px 4px;
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--ink-3);
}
html[data-ui="signal"] .sg-mi {
min-height: var(--menu-item-h); padding: 0 10px; gap: 8px;
border-radius: var(--r-sm);
font-size: var(--fs-small); color: var(--ink);
}
html[data-ui="signal"] .sg-mi:hover,
html[data-ui="signal"] .sg-mi:focus { background: var(--hover); }
html[data-ui="signal"] .sg-mi small { color: var(--ink-3); font-size: var(--fs-caption); }
html[data-ui="signal"] .sg-mi.on { font-weight: 600; }
html[data-ui="signal"] .sg-mi .ic { flex: none; color: var(--ink-2); }
html[data-ui="signal"] .sg-check { width: 14px; color: var(--primary); }
html[data-ui="signal"] .sg-sep { height: 1px; margin: 6px 4px; background: var(--divider); }
html[data-ui="signal"][data-theme="dark"] .sg-menu { background: var(--bg-card); border-color: var(--border); color: var(--ink); }
html[data-ui="signal"] .from-picker-menu {
background: var(--bg-card); color: var(--ink);
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-md);
padding: 6px;
}
html[data-ui="signal"] .from-picker-item { min-height: var(--menu-item-h); padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--ink); }
html[data-ui="signal"] .from-picker-item:hover,
html[data-ui="signal"] .from-picker-item.is-cursor { background: var(--hover); }
html[data-ui="signal"] .from-picker-item.is-selected { background: var(--selected); }
html[data-ui="signal"] .from-picker-avatar { width: 26px; height: 26px; font-size: var(--fs-caption); font-weight: 600; background: var(--ci-deep); color: #fff; }
html[data-ui="signal"] .from-picker-name { font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .from-picker-email { font-size: var(--fs-caption); color: var(--ink-3); }
html[data-ui="signal"] .from-picker-item mark { color: var(--primary); }
html[data-ui="signal"] .from-picker-check { color: var(--primary); }
html[data-ui="signal"] .from-picker-empty { color: var(--ink-3); font-size: var(--fs-small); }
html[data-ui="signal"][data-theme="dark"] .from-picker-menu { background: var(--bg-card); border-color: var(--border); color: var(--ink); }
/* ----------------------------------------------------------------------------
16. PHONE (<= 768) — read card bleeds to the edges with 16px padding (tokens),
sticky actions on the card surface, full-screen compose with a scrolling
44px format strip and 44px targets. The live scroller / full-screen
!important rules (1191-1213, 3039-3043) are left in force.
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
html[data-ui="signal"] .read-actions {
position: sticky; top: 0; z-index: 5;
padding: 6px 8px; gap: 2px;
background: var(--bg-card);
border-bottom: 1px solid var(--divider);
box-shadow: none;
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html[data-ui="signal"] .read-actions::-webkit-scrollbar { display: none; }
html[data-ui="signal"][data-theme="dark"] .read-actions { background: var(--bg-card); border-bottom: 1px solid var(--divider); } /* the desktop dark rule zeroes the edge */
html[data-ui="signal"] .action-btn { flex: 0 0 auto; min-height: 40px; height: 40px; padding: 0 10px; font-size: var(--fs-small); gap: 4px; }
html[data-ui="signal"] .action-btn:is([data-act="archive"], [data-act="flag"], [data-act="ai"]) { font-size: 0; gap: 0; padding: 0 8px; } /* live 1228-1233 */
html[data-ui="signal"] .action-btn:is([data-act="archive"], [data-act="flag"], [data-act="ai"]) svg { width: 16px; height: 16px; }
html[data-ui="signal"] .read-call-btn { width: 40px; height: 40px; }
html[data-ui="signal"] .read-card { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; max-width: 100%; }
html[data-ui="signal"] .read-head { padding: var(--read-pad-y) var(--read-pad-x) 12px; }
html[data-ui="signal"] .read-subject { margin-bottom: 12px; }
html[data-ui="signal"] .read-meta { gap: 10px; flex-wrap: wrap; }
html[data-ui="signal"] .read-from { min-height: 0; }
html[data-ui="signal"] .read-from strong,
html[data-ui="signal"] .read-from-email { display: block; width: 100%; margin-inline-start: 0; overflow-wrap: anywhere; }
html[data-ui="signal"] .read-date { flex: 0 0 100%; padding-inline-start: 50px; padding-top: 0; margin-top: -2px; white-space: normal; }
html[data-ui="signal"] .read-body { padding: var(--read-pad-y) var(--read-pad-x); font-size: var(--fs-read); line-height: var(--lh-read); max-width: 100%; }
html[data-ui="signal"][data-theme="dark"] .read-body { margin: 4px 12px 12px; }
html[data-ui="signal"] .read-attachments { padding: 12px var(--read-pad-x) var(--read-pad-y); }
html[data-ui="signal"] .attachment-item { max-width: 100%; }
html[data-ui="signal"] .conv-item .conv-snip { display: none; }
html[data-ui="signal"] .conv-item .conv-from { flex: 1 1 auto; }
html[data-ui="signal"] .tm-strip { font-size: var(--fs-small); }
html[data-ui="signal"] .tm-seg { height: 32px; }
html[data-ui="signal"] .tm-assign,
html[data-ui="signal"] .tm-notes-btn,
html[data-ui="signal"] .dlv-toggle,
html[data-ui="signal"] .conv-nav,
html[data-ui="signal"] .conv-toggle,
html[data-ui="signal"] .is-btn,
html[data-ui="signal"] .oof-btn,
html[data-ui="signal"] .tracker-banner .btn-secondary,
html[data-ui="signal"] .unsub-banner .btn-secondary,
html[data-ui="signal"] .pgp-banner .btn-secondary,
html[data-ui="signal"] .pgp-hint-banner .btn-secondary { min-height: 36px; }
html[data-ui="signal"] .oof-close { width: 36px; height: 36px; }
/* compose: full screen (live), card edge and radius dropped, 44px targets */
html[data-ui="signal"] .compose-dialog,
html[data-ui="signal"] .compose-dialog:not(.compose-inline),
html[data-ui="signal"][data-theme="dark"] .compose-dialog:not(.compose-inline) { border-width: 0; box-shadow: none; } /* full screen: no card edge, no shadow (live keeps width/height/radius !important) */
html[data-ui="signal"] .compose-dialog .compose-header,
html[data-ui="signal"] .compose-dialog:not(.compose-inline) .compose-header { min-height: 56px; padding: 6px 8px 6px 16px; border-radius: 0; }
html[data-ui="signal"] .compose-dialog .compose-header-actions .icon-btn { width: 44px; height: 44px; }
html[data-ui="signal"] .compose-dialog:not(.compose-inline) .compose-form { padding: 10px 16px 12px; gap: 8px; }
html[data-ui="signal"] .compose-row .compose-input,
html[data-ui="signal"] .compose-row .from-picker .compose-input { min-height: 44px; padding: 10px 12px; }
html[data-ui="signal"] .compose-row label { width: 60px; }
html[data-ui="signal"] .compose-dialog .ci-fmt {
height: 44px; min-height: 44px; margin: 2px 0 6px; padding: 2px 0; gap: 2px;
flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html[data-ui="signal"] .compose-dialog .ci-fmt::-webkit-scrollbar { display: none; }
html[data-ui="signal"] .compose-dialog .ci-fmt > * { flex: 0 0 auto; }
html[data-ui="signal"] .ci-fmt-btn,
html[data-ui="signal"] .ci-fmt-color { min-width: 40px; height: 40px; }
html[data-ui="signal"] .ci-fmt-size { height: 40px; }
html[data-ui="signal"] .compose-editor { padding: 12px 14px; }
html[data-ui="signal"] .compose-dialog .compose-footer { flex-wrap: wrap; gap: 6px; padding: 10px 0 0; }
html[data-ui="signal"] .compose-footer .btn-primary,
html[data-ui="signal"] .compose-footer #composeSend { height: 44px; padding: 0 18px; }
html[data-ui="signal"] .compose-dialog .compose-footer .btn-secondary,
html[data-ui="signal"] .compose-footer .compose-btn,
html[data-ui="signal"] .compose-footer .sg-btn { height: 44px; min-width: 44px; padding: 0 12px; font-size: var(--fs-body); }
html[data-ui="signal"] .compose-status { flex: 0 0 100%; margin-inline-start: 0; }
html[data-ui="signal"] .sg-mi { min-height: var(--menu-item-h); }
html[data-ui="signal"] .from-picker-item { min-height: 44px; }
}
/* ----------------------------------------------------------------------------
17. FORCED COLOURS and PRINT (component fallbacks; the generic ones are in 00)
---------------------------------------------------------------------------- */
@media (forced-colors: active) {
html[data-ui="signal"] :is(.tracker-banner, .unsub-banner, .pgp-banner, .pgp-hint-banner, .translate-banner,
.oof-banner, .tm-strip, .dlv-card, .conv-strip, .attachment-item, .is-btn,
.tm-notes, .sg-menu, .from-picker-menu, .compose-editor-wrap) { border: 1px solid CanvasText; }
html[data-ui="signal"] .dlv-dot { forced-color-adjust: none; background: CanvasText; box-shadow: 0 0 0 2px Canvas; }
html[data-ui="signal"] .dlv-tl-item::before { background: GrayText; }
html[data-ui="signal"] :is(.action-primary, .compose-footer #composeSend, .ci-head-lead #composeSend, .ci-send-more) { border: 1px solid ButtonText; }
html[data-ui="signal"] :is(.tm-seg.on, .ci-fmt-btn.on, .conv-item.current) { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
/* chrome around the message; the delivery card and the translation stay printable */
html[data-ui="signal"] :is(.conv-strip, .tm-strip, .tm-notes, .inline-suggestions, .tracker-banner, #crmSidebar) { display: none !important; } /* joins live 2033 */
}
/* ===================== signal/03-settings-menus-phone.css ===================== */
/* ============================================================================
SIGNAL 03 — settings modal, menus, overlays, login, phone shell
signal/03-settings-menus-phone.css — concatenated after 00/01/02 into
out/app-signal.css, which is linked AFTER app.css. Every rule lives under
html[data-ui="signal"]; dark = html[data-ui="signal"][data-theme="dark"],
declared in the same block as its light values. Tokens, type scale, focus
rings, forced colours and reduced motion come from 00-tokens.css; the
display/visibility ladder is restated in 99-state-rules.css — nothing here
sets display on a pane, screen or dialog that the ladder owns.
LEGACY !important / INLINE STYLES BEATEN HERE
(live/static-app.css = app.css v85, live/static-app.js = app.js v96)
1. css 3736 .more-menu, .snooze-menu { position:fixed !important; top:auto !important;
left:8px !important } (≤768)
→ .ci-sheet and the menu roots inside it: position/top/left/right/bottom/
width/min-width/max-width !important. The same declarations beat the
inline top/left the positioners write (js 1542 showContextMenu, 1578
openMovePicker, 2237 showAiMenu, 2344 showMoreMenu, 2661 compose AI menu,
3280 cmdMenu, 5345 team picker, 7678 openSnoozeMenu, 11410 sg menu).
2. css 3022 .msheet-backdrop.is-closing .msheet { transform: translateY(100%) !important }
→ mirrored for .ci-sheet (the inline transform enableSheetSwipe writes
during a drag, js 9259, must not pin a closing sheet open).
3. js 555-556 setupSwipeGestures writes transform + background inline on the row
being swiped → the Ice / danger swipe tints need background !important.
4. css 3190 .header-title { display:none !important } (≤768; 1029 at ≤1024)
→ .header-title[data-back] { display:block !important } — the phone back
label ("‹ Inbox") that module 06 writes into the existing title slot.
Kept as they are (same value, nothing to beat): css 3039-3043 phone full-screen
.settings-modal, 2009 .move-picker button { display:flex !important }, 3321
.acct-add-av { background:transparent !important }, 1275 [hidden].
Amber here: only item 8 of the allow-list (.mnav-btn.on — amber on navy) and
item 6 (login card top edge).
============================================================================ */
/* ----------------------------------------------------------------------------
1. SHARED PRIMITIVES — the two button classes and icon buttons.
.ic itself is declared by module 01 (no size: ic(name, size) writes the
width/height attributes); this file only sizes the icon SLOTS it owns
(menu rows, settings nav, Cmd-K rows, sheets, bottom nav, read bar).
---------------------------------------------------------------------------- */
html[data-ui="signal"] .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
padding: 0 16px;
background: var(--btn-primary-bg);
color: #fff;
border: 0;
border-radius: var(--r-sm);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 600;
letter-spacing: 0;
cursor: pointer;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .btn-primary:hover { background: var(--btn-primary-hover); }
html[data-ui="signal"] .btn-primary:active { background: var(--btn-primary-active); }
html[data-ui="signal"] .btn-primary:disabled {
background: var(--border);
color: var(--ink-3);
cursor: not-allowed;
}
html[data-ui="signal"] .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
padding: 0 14px;
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 500;
cursor: pointer;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .btn-secondary:hover { background: var(--hover); }
html[data-ui="signal"] .btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
/* generic icon button (view panels, calendar dialog); the compose header keeps
its own live sizes (css 3930 out-specifies this) */
html[data-ui="signal"] .icon-btn {
width: var(--icon-btn);
height: var(--icon-btn);
border-radius: var(--r-sm);
color: var(--ink-2);
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .icon-btn:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .icon-btn .ic { width: 18px; height: 18px; }
/* ----------------------------------------------------------------------------
2. SETTINGS MODAL — #settingsModal.settings-modal-overlay > .settings-modal
(js 8090-8113). Nav column 220px on --bg-sunken, 40px items with a 3px
amber current bar, 40px pill search field, content max 760px.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .settings-modal-overlay {
background: var(--scrim);
padding: 24px;
}
html[data-ui="signal"] .settings-modal {
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--divider);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
max-width: 1040px;
height: 84vh;
max-height: 760px;
}
html[data-ui="signal"][data-theme="dark"] .settings-modal { border-color: var(--border); }
html[data-ui="signal"] .settings-modal-head {
min-height: 56px;
padding: 0 16px 0 24px;
gap: 8px;
border-bottom: 1px solid var(--divider);
background: var(--bg-card); /* beats live 2793 (#0A1A2C) in dark through the token */
}
html[data-ui="signal"] .settings-modal-title {
font-size: var(--fs-display-sm);
line-height: var(--lh-display-sm);
font-weight: var(--display-weight); /* family comes from the display slot in 00 */
}
html[data-ui="signal"] .settings-modal-close {
width: var(--icon-btn);
height: var(--icon-btn);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: var(--fs-read);
}
html[data-ui="signal"] .settings-modal-close:hover { background: var(--hover); color: var(--ink); }
html[data-ui="signal"] .settings-nav {
width: 220px;
background: var(--bg-sunken);
border-right: 0;
border-inline-end: 1px solid var(--divider);
}
/* search field: 40px pill with a leading glyph (the input has no icon element) */
html[data-ui="signal"] .settings-search-wrap { padding: 12px 12px 6px; }
html[data-ui="signal"] .settings-search {
height: 40px;
padding: 0 14px 0 38px;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink);
background: var(--bg-card)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566F8E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
12px 50% / 18px 18px no-repeat;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
}
html[data-ui="signal"][data-theme="dark"] .settings-search {
background-color: var(--bg-card);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D94B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
html[data-ui="signal"][dir="rtl"] .settings-search {
padding: 0 38px 0 14px;
background-position: calc(100% - 12px) 50%;
}
html[data-ui="signal"] .settings-nav-list { padding: 2px 8px 12px; }
html[data-ui="signal"] .settings-nav-group {
font-size: var(--fs-label);
line-height: var(--lh-micro);
letter-spacing: var(--ls-label);
font-weight: 600;
text-transform: uppercase;
color: var(--ink-3);
padding: 14px 12px 4px;
}
html[data-ui="signal"] .settings-nav-item {
min-height: 40px;
padding: 0 10px 0 12px;
margin: 1px 0;
gap: 10px;
color: var(--ink);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 500;
border: 0;
border-inline-start: 3px solid transparent;
border-radius: var(--r-sm);
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .settings-nav-item:hover { background: var(--hover); }
html[data-ui="signal"] .settings-nav-item.active {
background: var(--selected);
border-inline-start-color: var(--ci-amber); /* allow-list item 2: the 3px current bar */
color: var(--ink);
font-weight: 600;
}
html[data-ui="signal"] .settings-nav-item.ss-active { outline: 2px solid var(--primary); outline-offset: -2px; }
html[data-ui="signal"] .settings-nav-item .sni-icon {
width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 16px; /* emoji fallback size */
}
html[data-ui="signal"] .settings-nav-item.active .sni-icon { color: var(--ink); }
html[data-ui="signal"] .sni-icon .ic { width: 18px; height: 18px; }
html[data-ui="signal"] .sni-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="signal"] .ss-hint { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); }
html[data-ui="signal"] .ss-empty { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); padding: 10px 14px; }
html[data-ui="signal"] .settings-content {
padding: 24px 28px 40px;
background: var(--bg);
}
html[data-ui="signal"] .settings-content .vp-card { max-width: 760px; }
html[data-ui="signal"] .settings-content .vp-header h1 {
font-size: var(--fs-display-md);
line-height: var(--lh-display-md);
}
/* tablet 769-1023: 92vw, the nav column stays */
@media (min-width: 769px) and (max-width: 1023px) {
html[data-ui="signal"] .settings-modal-overlay { padding: 16px; }
html[data-ui="signal"] .settings-modal { max-width: 92vw; height: 90vh; max-height: none; }
html[data-ui="signal"] .settings-content { padding: 20px 20px 32px; }
}
/* phone ≤768: full-screen two-screen flow (list → page). The display ladder
(.settings-content none / .show-detail block) is restated in 99. */
@media (max-width: 768px) {
html[data-ui="signal"] .settings-modal-overlay { padding: 0; }
html[data-ui="signal"] .settings-modal { border: 0; }
html[data-ui="signal"] .settings-modal-head {
min-height: 56px;
padding: 4px 8px 4px 16px;
gap: 4px;
}
html[data-ui="signal"] .settings-modal-back {
width: var(--touch);
height: var(--touch);
margin-left: -8px;
border-radius: 50%;
color: var(--ink);
}
html[data-ui="signal"] .settings-modal-back:active { background: var(--hover); }
html[data-ui="signal"] .settings-modal-close { width: var(--touch); height: var(--touch); }
html[data-ui="signal"] .settings-nav { width: 100%; background: var(--bg-card); border-inline-end: 0; }
html[data-ui="signal"] .settings-search-wrap { padding: 8px 12px; }
html[data-ui="signal"] .settings-search { height: var(--touch); font-size: var(--fs-read); }
html[data-ui="signal"] .settings-nav-list { padding: 0 8px calc(20px + env(safe-area-inset-bottom, 0px)); }
html[data-ui="signal"] .settings-nav-group { padding: 18px 12px 6px; font-size: var(--fs-caption); }
html[data-ui="signal"] .settings-nav-item {
min-height: var(--menu-item-h);
padding: 0 12px;
font-size: var(--fs-read);
line-height: var(--lh-read);
border-inline-start: 0;
border-radius: var(--r-md);
}
/* the list screen has no "current" page: no bar, no fill (live 3834) */
html[data-ui="signal"] .settings-nav-item.active { background: transparent; font-weight: 500; }
html[data-ui="signal"] .settings-nav-item::after { border-color: var(--ink-3); }
html[data-ui="signal"] .settings-content { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
html[data-ui="signal"] .settings-content .vp-header h1 { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); }
}
/* ----------------------------------------------------------------------------
3. FORM PRIMITIVES — .vp-header .vp-help .vp-card .vp-input .vp-textarea
.vp-actions .vp-toggle (Switch) + the small list items settings pages use.
Card h2 text is never touched (settingsSection slices cards by h2 text).
---------------------------------------------------------------------------- */
html[data-ui="signal"] .vp-header { margin-bottom: 16px; gap: 12px; }
html[data-ui="signal"] .vp-header h1 {
font-size: var(--fs-display-lg);
line-height: var(--lh-display-lg);
font-weight: var(--display-weight);
}
html[data-ui="signal"] .vp-help {
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink-2);
margin-bottom: 16px;
}
html[data-ui="signal"] .vp-card {
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--divider);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
padding: 20px;
margin-bottom: 16px;
}
html[data-ui="signal"][data-theme="dark"] .vp-card { border-color: var(--border); box-shadow: none; }
html[data-ui="signal"] .vp-card h2 {
font-family: var(--font-ui);
font-size: var(--fs-display-xs);
line-height: var(--lh-display-xs);
font-weight: 600;
color: var(--ink);
margin: 0 0 12px;
}
html[data-ui="signal"] .vp-card label {
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
color: var(--ink);
margin: 12px 0 6px;
}
html[data-ui="signal"] .vp-input {
min-height: 40px;
padding: 9px 12px;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
margin-bottom: 4px;
}
html[data-ui="signal"] .vp-input::placeholder { color: var(--ink-placeholder); }
html[data-ui="signal"] .vp-input:disabled { background: var(--bg-sunken); color: var(--ink-3); }
html[data-ui="signal"] .vp-input-small { width: auto; min-width: 120px; }
html[data-ui="signal"] .vp-textarea { min-height: 120px; line-height: var(--lh-body); }
/* native select keeps its behaviour, gets the field look and a chevron */
html[data-ui="signal"] select.vp-input:not([multiple]) {
appearance: none;
-webkit-appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D5572' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 10px) 50%;
background-size: 18px 18px;
}
html[data-ui="signal"][data-theme="dark"] select.vp-input:not([multiple]) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BCD3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-ui="signal"][dir="rtl"] select.vp-input:not([multiple]) {
padding-right: 12px;
padding-left: 34px;
background-position: 10px 50%;
}
html[data-ui="signal"] .vp-actions {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Switch: the existing skin only (no prompt()/confirm()
conversions this wave). 420px, radius 14, --shadow-lg, scrim backdrop;
title Plex 18/600 (decisions are UI, not display type); phone = sheet.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .ci-dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(420px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
padding: 24px;
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--divider);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
overflow: auto;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
html[data-ui="signal"][data-theme="dark"] .ci-dialog { border-color: var(--border); }
/* ::backdrop cannot read the token in every engine: literal fallback first */
html[data-ui="signal"] .ci-dialog::backdrop { background: rgba(6,37,74,.45); background: var(--scrim); }
html[data-ui="signal"][data-theme="dark"] .ci-dialog::backdrop { background: rgba(0,0,0,.6); background: var(--scrim); }
html[data-ui="signal"] .ci-dialog h2,
html[data-ui="signal"] .ci-dialog h3 {
font-family: var(--font-ui);
font-size: var(--fs-display-xs);
line-height: var(--lh-display-xs);
font-weight: 600;
color: var(--ink);
margin: 0 0 8px;
}
html[data-ui="signal"] .ci-dialog p { margin: 0 0 16px; color: var(--ink-2); }
html[data-ui="signal"] .ci-dialog label {
display: block;
margin: 12px 0 6px;
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
color: var(--ink);
}
html[data-ui="signal"] .ci-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-ui="signal"] .ci-dialog select,
html[data-ui="signal"] .ci-dialog textarea {
width: 100%;
min-height: 40px;
padding: 9px 12px;
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
html[data-ui="signal"] .ci-dialog textarea { min-height: 96px; resize: vertical; }
/* passcodes and keys read better in the mono face */
html[data-ui="signal"] .ci-dialog input[type="password"],
html[data-ui="signal"] .ci-dialog input[inputmode="numeric"] { font-family: var(--font-mono); letter-spacing: .06em; }
html[data-ui="signal"] .ci-dialog .vp-actions,
html[data-ui="signal"] .ci-dialog menu {
display: flex;
justify-content: flex-end;
gap: 8px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
html[data-ui="signal"] .ci-dialog .vp-actions .btn-primary,
html[data-ui="signal"] .ci-dialog .vp-actions .btn-secondary { min-height: 36px; }
@media (max-width: 768px) {
html[data-ui="signal"] .ci-dialog {
inset: auto 0 0 0;
margin: 0;
width: 100%;
max-width: none;
max-height: 85vh;
max-height: 85dvh;
padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
border: 0;
border-radius: var(--r-lg) var(--r-lg) 0 0;
animation: sigSheetUp var(--dur-3) var(--ease-pop);
}
html[data-ui="signal"] .ci-dialog::before {
content: "";
display: block;
width: 36px;
height: 4px;
border-radius: var(--r-pill);
background: var(--border);
margin: 0 auto 14px;
}
html[data-ui="signal"] .ci-dialog .vp-actions,
html[data-ui="signal"] .ci-dialog menu { flex-wrap: wrap; }
html[data-ui="signal"] .ci-dialog .vp-actions > *,
html[data-ui="signal"] .ci-dialog menu > * { flex: 1 1 40%; min-height: 48px; }
html[data-ui="signal"] .ci-dialog .vp-actions .btn-primary,
html[data-ui="signal"] .ci-dialog .vp-actions .btn-secondary { min-height: 48px; }
}
/* ----------------------------------------------------------------------------
9. TOASTS — #toasts.toasts > .toast (toast(), js 11373-11377; offer 428-430).
One corner (bottom-right desktop, above the bottom nav on phones), navy
surface, Undo in light sky (no amber on the toast), .toast-progress = the
4px bar the undo-send wrapper drives (width 100% → 0; hover pause is JS).
---------------------------------------------------------------------------- */
html[data-ui="signal"] .toasts {
left: auto;
right: 24px;
bottom: 24px;
transform: none;
align-items: flex-end;
gap: 8px;
max-width: min(440px, calc(100vw - 32px));
}
html[data-ui="signal"][dir="rtl"] .toasts { right: auto; left: 24px; align-items: flex-start; }
html[data-ui="signal"] .toast {
position: relative;
overflow: hidden;
min-width: 280px;
max-width: 100%;
padding: 12px 14px 12px 16px;
gap: 12px;
background: var(--ci-navy);
color: var(--ink-inverse);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
font-size: var(--fs-body);
line-height: var(--lh-body);
animation: toastIn var(--dur-2) var(--ease-pop);
}
html[data-ui="signal"][data-theme="dark"] .toast { background: #1C3A5C; color: var(--ink); border-color: var(--border); }
html[data-ui="signal"] .toast .ic { width: 18px; height: 18px; color: var(--ink-inverse); opacity: .9; }
/* variants: an edge, not a full colour field */
html[data-ui="signal"] .toast-success { background: var(--ci-navy); border-inline-start: 3px solid #7FE0A0; }
html[data-ui="signal"] .toast-error { background: var(--ci-navy); border-inline-start: 3px solid #F39DA3; }
html[data-ui="signal"][data-theme="dark"] .toast-success,
html[data-ui="signal"][data-theme="dark"] .toast-error { background: #1C3A5C; }
html[data-ui="signal"] .toast .toast-action {
margin-inline-start: auto;
min-height: 32px;
padding: 0 10px;
border-radius: var(--r-sm);
color: #7DB9F2; /* 8:1 on navy; amber stays off the toast */
font-weight: 600;
font-size: var(--fs-body);
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .toast .toast-action:hover { background: rgba(255,255,255,.1); }
html[data-ui="signal"] .toast-dismiss { color: var(--ink-inverse); opacity: .85; min-height: 32px; }
html[data-ui="signal"][data-theme="dark"] .toast-dismiss { color: var(--ink); }
html[data-ui="signal"] .toast-offer-btns { gap: 4px; }
html[data-ui="signal"] .toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 100%;
background: #7DB9F2;
border-radius: 0 2px 2px 0;
}
html[data-ui="signal"][dir="rtl"] .toast-progress { left: auto; right: 0; border-radius: 2px 0 0 2px; }
html[data-ui="signal"] .toast:has(> .toast-progress) { padding-bottom: 16px; }
@media (max-width: 768px) {
html[data-ui="signal"] .toasts,
html[data-ui="signal"][dir="rtl"] .toasts {
left: 12px;
right: 12px;
bottom: calc(var(--mnav-clear) + 8px);
align-items: stretch;
max-width: none;
}
html[data-ui="signal"] .toast { min-width: 0; border-radius: var(--r-md); }
}
/* ----------------------------------------------------------------------------
10. LOGIN — section#login.login-screen > .login-card (index.html 21-70; the
chooser, bio button, 2FA input and recovery views are JS-inserted, ids
untouched, no copy changes). Card radius 14, 2px amber top edge
(allow-list item 6), inputs 15px/44px, tiles 56px, Face ID pill.
---------------------------------------------------------------------------- */
html[data-ui="signal"] .login-screen {
padding: 24px;
background:
radial-gradient(1100px 620px at 78% 12%, rgba(26,111,212,.30), transparent 60%),
radial-gradient(760px 520px at 12% 88%, rgba(255,176,32,.10), transparent 60%),
linear-gradient(150deg, #041A34 0%, var(--ci-navy) 55%, #08305C 100%);
}
html[data-ui="signal"][data-theme="dark"] .login-screen {
background: radial-gradient(1200px 600px at 20% -10%, #0F3560 0%, #071422 60%);
}
html[data-ui="signal"] .login-screen::before { display: none; } /* the pre-brand light-blue radials */
html[data-ui="signal"] .login-card {
max-width: 420px;
padding: 40px 40px 28px;
background: var(--bg-card);
color: var(--ink);
border: 1px solid transparent;
border-top: 2px solid var(--ci-amber);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
}
html[data-ui="signal"][data-theme="dark"] .login-card { background: var(--bg-card); border-color: var(--border); border-top-color: var(--ci-amber); }
html[data-ui="signal"] .login-brand { margin-bottom: 24px; }
html[data-ui="signal"] .login-logo { width: 56px; height: 56px; margin: 0 auto 14px; }
html[data-ui="signal"] .login-title {
font-size: var(--fs-display-md);
line-height: var(--lh-display-md);
font-weight: var(--display-weight);
color: var(--ink);
}
html[data-ui="signal"] .login-subtitle { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin-top: 4px; }
html[data-ui="signal"] .login-form { gap: 2px; }
html[data-ui="signal"] .login-form label {
font-size: var(--fs-small);
line-height: var(--lh-small);
font-weight: 500;
color: var(--ink);
margin: 14px 0 6px;
}
html[data-ui="signal"] .login-form input {
height: 44px;
padding: 0 12px;
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font-size: var(--fs-lead);
line-height: var(--lh-lead);
transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-ui="signal"][data-theme="dark"] .login-form input { background: var(--bg); border-color: var(--border-strong); color: var(--ink); }
/* 2FA code (js inserts #loginTotp on need_2fa): mono, spaced digits */
html[data-ui="signal"] #loginTotp {
font-family: var(--font-mono);
font-size: var(--fs-display-xs);
letter-spacing: .14em;
text-align: center;
}
html[data-ui="signal"] .login-error {
margin-top: 14px;
padding: 10px 12px;
background: var(--pill-danger-bg);
color: var(--pill-danger-fg);
border: 1px solid var(--pill-danger-bd);
border-inline-start: 3px solid var(--danger);
border-radius: var(--r-sm);
font-size: var(--fs-small);
line-height: var(--lh-small);
}
html[data-ui="signal"] .login-submit {
width: 100%;
min-height: 44px;
margin-top: 20px;
padding: 0 16px;
font-size: var(--fs-lead);
}
html[data-ui="signal"] .submit-spinner { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
html[data-ui="signal"] .bio-login {
min-height: 44px;
margin-top: 10px;
padding: 0 14px;
border: 1px solid var(--primary);
border-radius: var(--r-sm);
color: var(--primary);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 600;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .bio-login:hover:not(:disabled) { background: var(--selected); }
html[data-ui="signal"] .bio-login .ic { width: 20px; height: 20px; }
html[data-ui="signal"] .login-card a { color: var(--link); text-decoration: none; }
html[data-ui="signal"] .login-card a:hover { text-decoration: underline; }
html[data-ui="signal"] .login-footer {
margin-top: 24px;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
letter-spacing: 0;
color: var(--ink-3);
}
/* multi-account chooser tiles (js 342-395) */
html[data-ui="signal"] .login-chooser { gap: 8px; margin: 8px 0 4px; }
html[data-ui="signal"] .acct-tile {
min-height: 56px;
padding: 8px 12px;
gap: 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .acct-tile:hover { background: var(--hover); border-color: var(--border-strong); }
html[data-ui="signal"] .acct-tile-av { width: 40px; height: 40px; font-size: 15px; font-weight: 600; }
html[data-ui="signal"] .acct-add-av { border: 1px dashed var(--border-strong); color: var(--primary); font-size: 22px; }
html[data-ui="signal"] .acct-tile-name { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--ink); }
html[data-ui="signal"] .acct-tile-email { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-3); }
html[data-ui="signal"] .acct-tile-bio {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 0 8px;
background: var(--pill-info-bg);
color: var(--pill-info-fg);
border: 1px solid var(--pill-info-bd);
border-radius: var(--r-pill);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
font-weight: 600;
}
html[data-ui="signal"] .acct-tile-x {
width: 28px;
height: 28px;
color: var(--ink-3);
opacity: .7;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .acct-tile-x:hover { background: var(--hover); color: var(--danger); opacity: 1; }
html[data-ui="signal"] .acct-tile.loading::after { border-color: var(--border); border-top-color: var(--primary); }
@media (max-width: 768px) {
html[data-ui="signal"] .login-screen { padding: 16px; }
html[data-ui="signal"] .login-card { width: 100%; max-width: 100%; box-sizing: border-box; padding: 32px 20px 24px; }
html[data-ui="signal"] .login-title { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); }
html[data-ui="signal"] .login-form input { height: 48px; }
html[data-ui="signal"] .login-submit, html[data-ui="signal"] .bio-login { min-height: 48px; font-size: var(--fs-read); }
html[data-ui="signal"] .acct-tile { padding: 10px 12px; }
html[data-ui="signal"] .acct-tile-av { width: 44px; height: 44px; }
}
/* ----------------------------------------------------------------------------
11. PHONE SHELL ≤768 — header 56px, hide rules keyed on ids, solid navy
bottom nav 64px + safe area with the amber active tab, FAB 56px, list rows
72px with 16px gutters and Ice / danger swipe tints, read bar 56px with
44px targets, folder drawer. The pane state machine itself is in 99.
Inputs stay 16px: live css 3673-3674 (!important) is left in force.
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* header */
html[data-ui="signal"] .app-header { height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
html[data-ui="signal"] .header-actions .header-btn,
html[data-ui="signal"] .header-user { width: var(--icon-btn); height: var(--icon-btn); border-radius: 50%; }
/* desktop-only buttons leave by id, never by title (header item 4 of the brief) */
html[data-ui="signal"] #installBtn,
html[data-ui="signal"] #refreshBtn,
html[data-ui="signal"] #settingsBtn { display: none; }
/* the back label module 06 writes into the title slot while a message is open
(beats live 3190 / 1029 — header item 4); the JS removes data-back, never hides it */
html[data-ui="signal"] .header-title[data-back] {
display: block !important;
flex: 0 1 auto;
min-width: 0;
max-width: 44vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-lead);
line-height: var(--lh-lead);
font-weight: 600;
letter-spacing: 0;
color: var(--ink-inverse);
}
html[data-ui="signal"] .acct-chip {
min-height: 36px;
background: rgba(255,255,255,.12);
color: var(--ink-inverse);
border-radius: var(--r-pill);
}
html[data-ui="signal"] .acct-chip:active { background: rgba(255,255,255,.22); }
html[data-ui="signal"] .acct-chip-name { font-size: var(--fs-body); font-weight: 600; }
html[data-ui="signal"] .acct-chip-mail { font-size: var(--fs-micro); opacity: .8; }
html[data-ui="signal"] body.mobile-search-open .header-search {
height: var(--touch);
top: calc(env(safe-area-inset-top, 0px) + 6px);
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.28);
border-radius: var(--r-pill);
}
/* the body sits above the bar; an open message above its read bar */
html[data-ui="signal"] .app-body { padding-bottom: var(--mnav-clear); }
html[data-ui="signal"] .app-body.mobile-on-read { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
html[data-ui="signal"] .app-body.mobile-on-read .read-pane { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px); }
/* list rows: 72px (--row-h at ≤768) with 16px gutters; the row anatomy and its
vertical padding are module 01's */
html[data-ui="signal"] .list-header { padding: 12px 16px 8px; }
html[data-ui="signal"] .message-row { min-height: var(--row-h); padding-left: 16px; padding-right: 16px; }
/* swipe tints: right = Ice (archive side), left = danger tint; the inline
background setupSwipeGestures writes needs !important (header item 3) */
html[data-ui="signal"] .message-row[style*="translateX("]:not([style*="translateX(-"]) { background: var(--selected) !important; }
html[data-ui="signal"] .message-row[style*="translateX(-"] { background: var(--pill-danger-bg) !important; }
/* folder drawer: 86% / max 320, card surface, scrim token */
html[data-ui="signal"] .app-body.mobile-on-folders .folder-pane {
width: min(86vw, 320px);
background: var(--bg-card);
box-shadow: var(--shadow-lg);
}
html[data-ui="signal"] .app-body.mobile-on-folders::before { background: var(--scrim); }
/* bottom navigation: solid navy, no blur, amber active tab (allow-list item 8) */
html[data-ui="signal"] .mnav {
left: 0;
right: 0;
bottom: 0;
max-width: none;
margin: 0;
height: calc(var(--mnav-h) + env(safe-area-inset-bottom, 0px));
padding: 0 4px env(safe-area-inset-bottom, 0px);
border: 0;
border-top: 1px solid rgba(255,255,255,.08);
border-radius: 0;
background: var(--ci-navy);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-ui="signal"][data-theme="dark"] .mnav { background: #041A34; border-top-color: var(--border); box-shadow: none; }
html[data-ui="signal"] .mnav-btn {
gap: 3px;
min-width: var(--touch);
color: #C7D6E8;
font-size: var(--fs-micro);
line-height: var(--lh-micro);
font-weight: 600;
}
/* ::before was the soft capsule; it is now the 3px top bar of the active tab */
html[data-ui="signal"] .mnav-btn::before {
inset: 0 auto auto 50%;
width: 40px;
height: 3px;
transform: translateX(-50%);
border-radius: 0 0 2px 2px;
background: transparent;
transition: background var(--dur-1) var(--ease-out);
}
html[data-ui="signal"] .mnav-btn:active::before { background: transparent; }
html[data-ui="signal"] .mnav-btn:active { background: rgba(255,255,255,.06); }
html[data-ui="signal"] .mnav-btn.on { color: var(--ci-amber); } /* amber ON navy only; same in dark */
html[data-ui="signal"] .mnav-btn.on::before,
html[data-ui="signal"] .mnav-btn.on:active::before { background: var(--ci-amber); }
html[data-ui="signal"] .mnav-btn svg { width: 24px; height: 24px; }
html[data-ui="signal"] .mnav-btn .ic { width: 24px; height: 24px; }
html[data-ui="signal"] .mnav-badge {
top: -4px;
left: 14px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--ci-amber);
color: var(--ci-ink-on-amber);
border: 2px solid var(--ci-navy);
font-size: var(--fs-micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
html[data-ui="signal"][data-theme="dark"] .mnav-badge { border-color: #041A34; }
/* compose FAB: 56px Insight blue, lifted above the bar */
html[data-ui="signal"] .compose-fab {
right: 16px;
bottom: calc(var(--mnav-clear) + 16px);
width: var(--fab);
height: var(--fab);
border-radius: 16px;
background: var(--ci-blue);
color: #fff;
box-shadow: 0 8px 24px rgba(26,111,212,.35), var(--shadow-md);
transition: transform var(--dur-1) var(--ease-out);
}
html[data-ui="signal"][dir="rtl"] .compose-fab { right: auto; left: 16px; }
html[data-ui="signal"][data-theme="dark"] .compose-fab { background: var(--ci-blue); box-shadow: var(--shadow-lg); }
html[data-ui="signal"] .compose-fab svg, html[data-ui="signal"] .compose-fab .ic { width: 26px; height: 26px; }
/* reading action bar: 56px + safe area, five 44px targets */
html[data-ui="signal"] .mread-bar {
height: calc(56px + env(safe-area-inset-bottom, 0px));
padding: 0 4px env(safe-area-inset-bottom, 0px);
background: var(--bg-card);
border-top: 1px solid var(--divider);
box-shadow: none;
}
html[data-ui="signal"][data-theme="dark"] .mread-bar { background: var(--bg-card); border-top-color: var(--border); }
html[data-ui="signal"] .mread-btn {
min-width: var(--touch);
min-height: var(--touch);
gap: 2px;
margin: 6px 0;
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
font-weight: 500;
}
html[data-ui="signal"] .mread-btn svg, html[data-ui="signal"] .mread-btn .ic { width: 22px; height: 22px; }
html[data-ui="signal"] .mread-btn:active { background: var(--hover); }
html[data-ui="signal"] .mread-btn[data-mact="reply"] { color: var(--primary); }
html[data-ui="signal"] .mread-btn[data-mact="delete"] { color: var(--danger); }
/* editable text at 16px so iOS never zooms (the live !important rule stays in force) */
html[data-ui="signal"] .compose-editor,
html[data-ui="signal"] .chat-input,
html[data-ui="signal"] [contenteditable="true"] { font-size: var(--fs-read); }
/* the live phone rule for desktop menus (3735-3742) is superseded by the sheet;
a menu that is NOT wrapped (desktop fallback) still gets the rounded, thumb-sized rows */
html[data-ui="signal"] .more-menu button:not(.ci-sheet *),
html[data-ui="signal"] .snooze-menu button:not(.ci-sheet *) { min-height: var(--menu-item-h); font-size: var(--fs-lead); border-radius: var(--r-md); }
/* a popover that was not wrapped into a sheet docks to the bottom edge on its own */
html[data-ui="signal"] .ci-popover,
html[data-ui="signal"] #filterPop {
position: fixed !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
max-width: none !important;
max-height: 70vh;
max-height: 70dvh;
border: 0;
border-radius: var(--r-lg) var(--r-lg) 0 0;
padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px));
box-shadow: var(--shadow-lg);
animation: sigSheetUp var(--dur-3) var(--ease-pop);
}
}
/* ===================== signal/99-state-rules.css ===================== */
/* ============================================================================
SIGNAL 99 — STATE RULES (last section of out/app-signal.css)
The display / visibility ladder of the live app, copied VERBATIM from
live/static-app.css (app.css v85; line numbers cited on every rule) so that
no module of this pass can regress it through cascade order.
Re-scoping: every selector is prefixed with html[data-ui="signal"], which
adds (0,1,1) to the live specificity. That is needed in every case here
because modules 00-03 carry the same prefix: a module rule such as
html[data-ui="signal"] .folder-pane { display:flex } would otherwise tie or
beat the bare live selector. With the prefix, every ladder rule has
specificity ≥ the original and ≥ any module rule on the same element, and
this file is concatenated last, so it wins the remaining ties by order.
Declarations are copied as written. Where a live rule mixes the ladder
with skin (background, padding, border, animation) only the layout/state
declarations are kept and the rule is marked "(display/layout declarations
only)"; the skin lives in modules 01-03 and must not be undone here.
Forced colours and reduced motion are in 00-tokens.css (CONTRACT.md §8).
Nothing else belongs in this file.
============================================================================ */
/* ---- screens: #login / #app (live 92-99, 337-345, 2074-2075, 1275) ---- */
/* live 92-99: `.screen { display:block }` (later, equal specificity) was overriding the flex
centering above and pinning the card top-left. Higher-specificity selector wins,
while :not([hidden]) keeps the login hidden once signed in. */
html[data-ui="signal"] #login.login-screen:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
}
/* live 333-345: `.screen { display:block }` (defined later with equal specificity) was overriding
the flex column above, collapsing the whole app's height chain so no pane could
scroll. These higher-specificity rules restore the fixed flex shell, while the
:not([hidden]) guard keeps the app hidden until after login. */
html[data-ui="signal"] #app.app-screen {
position: fixed;
inset: 0;
height: 100vh;
height: 100dvh;
flex-direction: column;
overflow: hidden;
}
html[data-ui="signal"] #app.app-screen:not([hidden]) { display: flex; }
/* live 2073-2075: Hidden screens */
html[data-ui="signal"] .screen { display: block; }
html[data-ui="signal"] .screen[hidden] { display: none; }
/* live 1275 */
html[data-ui="signal"] [hidden] { display: none !important; }
/* ---- dialogs and small [hidden] toggles (live 890, 3294, 3365, 3524, 3900) ---- */
/* live 890 */
html[data-ui="signal"] .compose-dialog[open] { display: flex; flex-direction: column; }
/* live 3294 */
html[data-ui="signal"] .bio-login[hidden] { display: none !important; }
/* live 3365 */
html[data-ui="signal"] .rp-panel[hidden] { display: none !important; }
/* live 3524 */
html[data-ui="signal"] .rp-tab[hidden] { display: none !important; }
/* live 3900 */
html[data-ui="signal"] .ci-draft-tab[hidden] { display: none; }
/* ---- Recent mail panel docked (live 3366) ---- */
html[data-ui="signal"] body.rp-docked #app .app-body { margin-right: var(--rp-w); }
/* ---- compose: inline / docked / minimized (live 3863-3866, 3913-3922) ---- */
/* live 3863 */
html[data-ui="signal"] .compose-row-actions-mini.ci-empty { display: none !important; }
/* live 3864-3866 */
html[data-ui="signal"] #ciDock { display: none; }
html[data-ui="signal"] .compose-dialog:not(.compose-inline) #ciDock { display: inline-flex; }
html[data-ui="signal"] .compose-dialog:not(.compose-inline) #ciPopOut { display: none; }
@media (min-width: 769px) {
/* live 3914-3915 */
html[data-ui="signal"] .read-pane { position: relative; }
html[data-ui="signal"] .read-pane.ci-has-tab { padding-bottom: 38px; }
/* live 3916-3921 (display/layout declarations only; background/border/box-shadow are module 02's) */
html[data-ui="signal"] .compose-dialog.compose-inline {
position: absolute; inset: 0; z-index: 5;
width: auto; height: auto; max-width: none; max-height: none;
margin: 0;
}
/* live 3922 */
html[data-ui="signal"] .compose-dialog.compose-inline.compose-minimized { display: none !important; }
}
/* ---- settings modal: desktop back button hidden (live 3697) ---- */
html[data-ui="signal"] .settings-modal-back { display: none; } /* phones only: back from a settings page to the list */
/* ---- phone ≤768: the one-pane-at-a-time state machine ---- */
@media (max-width: 768px) {
/* live 1043-1045 */
html[data-ui="signal"] .header-back[hidden] { display: none !important; }
html[data-ui="signal"] .header-launcher[hidden] { display: none !important; }
html[data-ui="signal"] .header-back { display: inline-flex; }
/* live 1055-1064: Body becomes single-column; one screen visible at a time.
Explicit height (not flex:1) so iOS Safari computes child heights correctly
and inner scroll panes (.message-list, .read-pane) get scrollable. */
html[data-ui="signal"] .app-body {
display: block !important;
position: relative;
height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
overflow: hidden;
}
/* live 1065 */
html[data-ui="signal"] .left-rail { display: none; }
/* live 1098-1105 (display/layout declarations only; background is module 01's) */
html[data-ui="signal"] .folder-pane, html[data-ui="signal"] .list-pane, html[data-ui="signal"] .read-pane {
position: absolute;
top: 0; right: 0; bottom: 0;
left: 56px;
}
html[data-ui="signal"] .app-body.mobile-on-read .read-pane,
html[data-ui="signal"] .app-body.mobile-on-read .list-pane { left: 0; }
/* live 1106 */
html[data-ui="signal"] .list-pane { display: flex; flex-direction: column; }
/* live 1114-1117: Default state: show LIST (inbox), folders & read hidden */
html[data-ui="signal"] .folder-pane { display: none; }
html[data-ui="signal"] .list-pane { display: flex; }
html[data-ui="signal"] .read-pane { display: none; }
/* live 1119-1130: mobile-on-folders: show folder drawer (slides from left, overlay behind)
(display/layout declarations only; background/box-shadow/animation are module 03's) */
html[data-ui="signal"] .app-body.mobile-on-folders .folder-pane {
display: flex; z-index: 30;
position: fixed;
top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
left: 0; bottom: 0;
width: 86%; max-width: 320px;
transform: translateX(0);
}
/* live 1131-1138 (display/layout declarations only; background/animation are module 03's) */
html[data-ui="signal"] .app-body.mobile-on-folders::before {
content: "";
position: fixed; inset: 0;
top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
z-index: 20;
}
/* live 1139-1140 */
html[data-ui="signal"] .app-body.mobile-on-folders .list-pane { display: flex; }
html[data-ui="signal"] .app-body.mobile-on-folders .read-pane { display: none; }
/* live 1156-1159: mobile-on-list: show message list */
html[data-ui="signal"] .app-body.mobile-on-list .folder-pane { display: none; }
html[data-ui="signal"] .app-body.mobile-on-list .list-pane { display: flex; z-index: 2; }
html[data-ui="signal"] .app-body.mobile-on-list .read-pane { display: none; }
/* live 1161-1168: mobile-on-read: show reading pane (when a message is open) — full-screen */
html[data-ui="signal"] .app-body.mobile-on-read .folder-pane,
html[data-ui="signal"] .app-body.mobile-on-read .list-pane { display: none; }
html[data-ui="signal"] .app-body.mobile-on-read #mobileFolderRail { display: none; }
html[data-ui="signal"] .app-body.mobile-on-read .read-pane {
display: flex; z-index: 4;
left: 0; right: 0; top: 0; bottom: 0;
}
/* live 1190-1198: Reading pane: full screen + safe-area + larger action buttons + scrollable
(display/overflow declarations only; padding is module 03's) */
html[data-ui="signal"] .read-pane {
overflow-y: auto !important;
overflow-x: hidden;
display: block !important;
}
/* live 2845-2848: desktop chrome has no place on a phone */
html[data-ui="signal"] #cmdBar, html[data-ui="signal"] .cmdbar { display: none !important; }
html[data-ui="signal"] .mobile-folder-rail, html[data-ui="signal"] #mobileFolderRail { display: none !important; }
html[data-ui="signal"] .left-rail { display: none !important; }
/* live 2852 (the phone header shows the brand block again; 1039 hid it) */
html[data-ui="signal"] .header-brand { display: flex !important; }
/* live 2863-2865: search expands over the header when the icon is tapped
(display/position declarations only; geometry and colours are module 01/03's) */
html[data-ui="signal"] .header-search { display: none !important; }
html[data-ui="signal"] body.mobile-search-open .header-search {
display: flex !important;
position: fixed;
z-index: 60;
}
/* live 2876-2878 */
html[data-ui="signal"] body.mobile-search-open .header-brand,
html[data-ui="signal"] body.mobile-search-open .header-actions .header-btn:not(#mobileSearchBtn),
html[data-ui="signal"] body.mobile-search-open .header-user { visibility: hidden; }
/* live 2885 */
html[data-ui="signal"] .list-pane { left: 0 !important; }
/* live 2906 */
html[data-ui="signal"] .compose-btn { display: none; } /* the FAB is the compose button on mobile */
/* live 2911 */
html[data-ui="signal"] .app-body.mobile-on-read .read-pane { left: 0 !important; }
/* live 2968: a message being read is full-screen and brings its own action bar */
html[data-ui="signal"] .app-body.mobile-on-read ~ .mnav { display: none; }
/* live 2982 */
html[data-ui="signal"] .compose-fab[hidden] { display: none !important; }
/* live 3039-3043: dialogs go full-screen on a phone */
html[data-ui="signal"] .compose-dialog, html[data-ui="signal"] .settings-modal {
width: 100% !important; max-width: 100% !important;
height: 100% !important; max-height: 100% !important;
border-radius: 0 !important; top: 0 !important; left: 0 !important; margin: 0 !important;
}
/* live 3166-3169: chat list / thread on a phone */
html[data-ui="signal"] .chat-thread-pane { display: none; }
html[data-ui="signal"] .chat-wrap.on-thread .chat-list-pane { display: none; }
html[data-ui="signal"] .chat-wrap.on-thread .chat-thread-pane { display: flex; }
html[data-ui="signal"] .chat-back { display: inline-flex; }
/* live 3170-3171: a conversation takes the whole phone, like WhatsApp: no tab bar, no FAB */
html[data-ui="signal"] body.chat-thread-open #mobileNav, html[data-ui="signal"] body.chat-thread-open #composeFab { display: none !important; }
/* live 3175 */
html[data-ui="signal"] body.chat-thread-open .app-body { padding-bottom: 0; }
/* live 3190 */
html[data-ui="signal"] .header-title { display: none !important; } /* the account name is more useful than the app name */
/* live 3204 */
html[data-ui="signal"] body.mobile-search-open .acct-chip { visibility: hidden; }
/* live 3272-3273 */
html[data-ui="signal"] body.mobile-search-open .header-launcher,
html[data-ui="signal"] body.mobile-search-open .header-back { visibility: hidden !important; }
/* live 3593 */
html[data-ui="signal"] body.chat-thread-open .rp-tab { display: none !important; }
/* live 3691-3694: Back on the list, the message you had open must really be gone. It stayed displayed
underneath (".read-pane { display: block !important }" beat the rule that hides it), so
its sticky Reply bar sat on top of the "Inbox" title and swallowed the taps there. */
html[data-ui="signal"] .app-body.mobile-on-list .read-pane, html[data-ui="signal"] .app-body.mobile-on-folders .read-pane { display: none !important; }
/* live 3813-3837: settings: the list of settings, then the page — two screens, like a phone's own Settings.
(display/layout declarations only; sizes, paddings and colours are module 03's) */
/* live 3819-3823 */
html[data-ui="signal"] .settings-modal-back { display: inline-flex; }
/* live 3825 */
html[data-ui="signal"] .settings-modal-body { display: flex; flex-direction: column; }
/* live 3826 */
html[data-ui="signal"] .settings-nav { flex: 1; min-height: 0; width: 100%; height: auto; max-height: none; }
/* live 3827 */
html[data-ui="signal"] .settings-nav-list { display: block; }
/* live 3835 */
html[data-ui="signal"] .settings-content { display: none; flex: 1; min-height: 0; }
/* live 3836-3837 */
html[data-ui="signal"] .show-detail .settings-nav { display: none; }
html[data-ui="signal"] .show-detail .settings-content { display: block; }
}