/* Industry on White — the shared component layer (phase 214). Hand-authored.

   The owner, 2026-09-15: "the design has to be industry standard on white for everyone, regardless
   of whether they are white-labeled customers or not … fix all the screens … I don't want anything
   that isn't done."

   WHAT THIS FILE IS. The prototypes in docs/redesign (`Industry Console.dc.html` and the seventeen
   files after it) are drawn in the Industry design system on its White theme. Phases 1–12 rebuilt
   every screen's STRUCTURE against them and left the LOOK on v5: a green ramp, a grey ground, soft
   cards with shadows, sentence-case titles in body type. This sheet is the look.

   WHY A SHEET OF ITS OWN, LOADED LAST, rather than edits to components.css and the page sheets.
   Fifteen of the sheets are generated from the v5 bundle and several have been hand-extended since
   (extract-css.py refuses to overwrite them); rewriting a component in eighteen places is eighteen
   chances to miss one, which is how a green primary button would survive on one screen. Loaded
   after shell.css and every page sheet, a rule here of equal specificity wins on order, so each
   component is restyled ONCE. Colour comes from tokens.css (§6 of design/redesign-tokens.html),
   never from a hex typed here, except where the prototypes name a value the token set has no
   name for.

   THE GRAMMAR, read off the rendered prototypes at 1600×1000:
     · one white sheet; hairlines (#e3e8ee) carry the structure, nothing casts a shadow but what floats
     · square corners on every control, card, tag and figure
     · headings in Barlow Condensed 600 — screen titles 32px UPPERCASE, section titles 20px
     · uppercase micro labels at 11px, tracked .08em, in the muted ink
     · the primary button is the one solid object: #0a6fa6 under white text
     · pickers in a screen head are underlined, not boxed
     · a screen's sections sit in a left-ruled list UNDER the head, not in a full-height pane
     · sections are unboxed: a condensed heading, then the rows, each rule a hairline */

/* ════════════════════════════════════════════════════════════════════════════════════════════
   1 · GROUND AND TYPE
   ════════════════════════════════════════════════════════════════════════════════════════════ */
html, body, .shell { background: #ffffff; }
body { color: var(--ink-body); font-size: 14px; line-height: 1.5; }
a { color: var(--accent-text); text-underline-offset: 3px; }
.mono, .input-mono, .code-inline { font-feature-settings: "tnum"; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   2 · THE SIDEBAR — 212px open, 64px collapsed, the brand on top
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.rail {
  background: #ffffff; border-right: 1px solid var(--hairline);
  padding: 18px 0 18px; gap: 1px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.rail-brand {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; margin-bottom: 14px;
}
.rail-logo { display: grid; place-items: center; line-height: 0; text-decoration: none; color: var(--ink); }
.rail-logo-full { display: none; height: 22px; width: auto; }
.rail-logo-mark { display: block; width: 24px; height: 24px; }
.rail-brand-name {
  font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1;
  letter-spacing: .01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* collapsed: the mark, a hairline, then the expand arrow beneath — all on the centre axis */
.rail-brand::after { content: ""; display: block; order: 1; width: 24px; height: 1px; background: var(--hairline); }
.rail-toggle {
  order: 2; appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: 28px; height: 24px; display: grid; place-items: center; color: var(--ink-quiet);
}
.rail-toggle:hover { color: var(--accent-text); }
.rail-toggle .rail-icon { width: 14px; height: 14px; }

:root[data-rail="open"] .rail, .shell.is-rail-open .rail {
  width: var(--w-rail-open); align-items: stretch; padding: 18px 12px 18px 28px;
}
:root[data-rail="open"] .rail-brand, .shell.is-rail-open .rail-brand {
  flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
:root[data-rail="open"] .rail-brand::after, .shell.is-rail-open .rail-brand::after { display: none; }
:root[data-rail="open"] .rail-logo-full, .shell.is-rail-open .rail-logo-full { display: block; }
:root[data-rail="open"] .rail-logo-mark, .shell.is-rail-open .rail-logo-mark { display: none; }
:root[data-rail="open"] .rail-toggle .rail-icon, .shell.is-rail-open .rail-toggle .rail-icon { transform: rotate(180deg); }
/* a white-label brand without a logo reads its name, in the heading face */
:root .rail .rail-brand.has-name .rail-logo-full { display: none; }
:root[data-rail="open"] .rail-brand.has-name .rail-brand-name { display: block; }
.rail-brand.has-name .rail-brand-name[hidden] { display: none; }

.rail-group + .rail-group { margin-top: 14px; }
.rail-group-head {
  font-size: 10px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-quiet);
}
:root[data-rail="open"] .rail .rail-group-head, .shell.is-rail-open .rail .rail-group-head {
  padding: 0; margin: 0 0 8px;
}

.rail-item { color: var(--ink); border-radius: 0; }
.rail-item:hover { background: transparent; color: var(--accent-text); }
.rail-item[aria-current="page"] { background: transparent; color: var(--accent-text); }
button.rail-item:hover { background: transparent; color: var(--accent-text); }
:root[data-rail="open"] .rail-item, .shell.is-rail-open .rail-item {
  height: 31px; padding: 0; gap: 12px;
}
.rail-label { font-size: 14px; font-weight: 400; }
.rail-item[aria-current="page"] .rail-label { font-weight: 600; }
.rail-icon { width: 17px; height: 17px; }

.rail-utility { border-top: 0; padding-top: 18px; gap: 6px; }
:root .rail .rail-utility > p.rail-group-head { display: none; }
.rail-avatar { display: none; }
:root:not([data-rail="open"]) .rail-account { display: none; }
:root[data-rail="open"] .rail-account { padding: 10px 0 0; margin-top: 8px; height: auto; }
.rail-account-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.rail-account-sub { font-size: 11px; color: var(--ink-quiet); }
:root[data-rail="open"] .rail-account .badge { margin-left: 0; }
/* Sign out, open: the prototypes' accent text link with no glyph beside it */
:root[data-rail="open"] .rail form button.rail-item { color: var(--accent-text); height: 26px; }
:root[data-rail="open"] .rail form button.rail-item .rail-icon { display: none; }
:root[data-rail="open"] .rail form button.rail-item .rail-label { font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   3 · THE CONTENT AND ITS FROZEN HEAD
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.content { background: #ffffff; }
.content-inner { --pad-content: 24px; --pad-content-top: 24px; gap: 24px; }

.content-inner > .screen-head {
  background: #ffffff;
  border-bottom: 1px solid var(--hairline);
  align-items: flex-end; column-gap: 24px; row-gap: 10px;
}
.screen-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1.1;
  letter-spacing: var(--font-heading-tracking); text-transform: uppercase; color: var(--ink);
}
.screen-sub { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-quiet); }
.screen-head-main { gap: 0; }
.screen-note { font-size: 13px; color: var(--ink-quiet); }

/* pickers in a head are UNDERLINED — the prototypes' `select.gm-select` */
.screen-head .select, .headtools .select, .screen-head-bar .select {
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background-color: transparent;
  padding: 6px 18px 6px 0; min-height: 32px; font-size: 13px; color: var(--ink);
  background-position: right 2px center; background-size: 9px 6px;
}
.screen-head .select:hover, .headtools .select:hover, .screen-head-bar .select:hover { border-bottom-color: var(--accent-hairline); }
.screen-head .input, .headtools .input, .screen-head-bar .input {
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent;
  padding: 6px 0; min-height: 32px; font-size: 13px;
}
/* the labels above head pickers are not drawn — the prototypes separate pickers with a dot — but
   they stay in the document for assistive technology */
.headtools .field-label, .screen-head .headtools .field > .field-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   4 · A SCREEN'S SECTIONS OR FILTERS — under the head, left-ruled
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.with-pane { display: flex; align-items: flex-start; gap: 32px; min-width: 0; }
.with-pane-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.with-pane > .pane {
  width: 188px; flex: none; background: transparent; border: 0;
  position: sticky; top: calc(var(--head-h, 96px) + 16px);
  max-height: calc(100dvh - var(--head-h, 96px) - 40px); overflow-y: auto;
  overscroll-behavior: contain;
}
.with-pane > .pane .pane-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.with-pane > .pane .pane-list { padding: 0; gap: 0; border-left: 1px solid var(--hairline); }
.with-pane > .pane .pane-link {
  border-radius: 0; background: transparent; margin-left: -1px; border-left: 2px solid transparent;
  padding: 9px 14px; font-size: 14px; font-weight: 400; color: var(--ink-quiet);
}
.with-pane > .pane .pane-link:hover { background: transparent; color: var(--ink); }
.with-pane > .pane .pane-link[aria-current="page"] {
  background: transparent; color: var(--ink); font-weight: 600; border-left-color: var(--accent-text);
}
.with-pane > .pane .pane-count { font-family: var(--font-body); font-size: 11px; color: var(--ink-quiet); }
.with-pane > .pane .pane-link[aria-current="page"] .pane-count { color: var(--ink-quiet); }
.with-pane > .pane .pane-note { border-top: 0; padding: 16px 0 0 15px; font-size: 12px; margin-top: 12px; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   5 · CONTROLS
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2;
  letter-spacing: 0; border-radius: 0; padding: 8px 12px;
}
.btn-sm { font-size: 13px; padding: 6px 10px; border-radius: 0; }
.btn-lg { font-size: 15px; padding: 10px 16px; }
.btn-primary { background: var(--accent-action); border-color: var(--accent-action); color: #ffffff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-action-hover); border-color: var(--accent-action-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-action-active); border-color: var(--accent-action-active); }
.btn-secondary { background: #ffffff; color: var(--ink); border-color: var(--hairline-strong); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, #ffffff); border-color: var(--hairline-strong); }
.btn-secondary:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 10%, #ffffff); }
.btn-tinted { background: var(--accent-tint); color: var(--accent-text-on-tint); border-color: var(--accent-tint); }
.btn-tinted:hover:not(:disabled) { background: var(--accent-border); border-color: var(--accent-border); }
.btn-subtle { color: var(--accent-text); background: transparent; }
.btn-subtle:hover:not(:disabled) { background: var(--accent-wash); color: var(--accent-text); }
.btn-danger { border-radius: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; }
.btn-icon { border-radius: 0; }
.linkbtn { font-family: var(--font-body); font-weight: 500; color: var(--accent-text); }

.field-label { font-size: 12px; font-weight: 400; color: var(--neutral-ink); line-height: 1.2; }
.field-hint { font-size: 12px; color: var(--ink-quiet); }
.input, .select, .textarea {
  border-radius: 0; border-color: var(--hairline); background-color: #ffffff;
  color: var(--ink);
}
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: var(--hairline-strong); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent-text); }
.check input { border-radius: 0; }
.check input:checked, .check input:indeterminate { background: var(--accent-action); border-color: var(--accent-action); }
.switch input:checked + .switch-track { background: var(--accent-action); }
.switch-row { border-radius: 0; }
.pinbox { border-radius: 0; font-family: var(--font-heading); }

.tabs { padding: 0; gap: 22px; border-bottom-color: var(--hairline); }
.tab {
  font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--neutral-ink);
  padding: 12px 0 11px;
}
.tab:hover:not(:disabled) { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent-text); }

.seg { border-radius: 0; border-color: var(--hairline-strong); background: #ffffff; }
.seg button {
  font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--ink);
  padding: 8px 12px; border-right-color: var(--hairline-strong); background: #ffffff;
}
.seg button[aria-pressed="true"] { background: var(--accent-action); color: #ffffff; font-weight: 400; }

.badge { border-radius: 0; font-size: 10px; letter-spacing: .08em; font-weight: 500; padding: 4px 7px; }
.badge-accent { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.badge-outline { border-radius: 0; }
.chip-live { border-radius: 0; }
.code-inline { border-radius: 0; background: var(--surface-sunken); }
.code-block { border-radius: 0; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   6 · SECTIONS — unboxed: a condensed heading, then rows ruled with hairlines
   ⚠ `--pad-card` IS ZEROED ON THE CARD, NOT OVERRIDDEN RULE BY RULE. Forty-odd v5 rules inset a
   card's children by `var(--pad-card)` so nothing touched a border; with no border there is no
   edge to keep away from, and the prototypes put a section's content flush with its heading and
   with the screen title above it. One custom property reaches every one of those rules.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.card { background: transparent; border: 0; border-radius: 0; box-shadow: none; --pad-card: 0px; }
.card-head { padding: 0 0 12px; border-bottom: 0; gap: 16px; }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--ink); }
.card-body { padding: 0; }
.card-foot {
  background: transparent; border-radius: 0; border-top: 1px solid var(--hairline);
  padding: 12px 0 0; font-size: 12px; color: var(--ink-quiet);
}
.card-meta { font-size: 12px; color: var(--ink-quiet); }
.table-wrap { background: transparent; border: 0; border-radius: 0; }

table.data th {
  background: transparent; font-size: 11px; font-weight: 500; letter-spacing: .08em;
  color: var(--neutral-ink); padding: 10px 12px; border-bottom: 1px solid var(--hairline);
}
table.data td { padding: 11px 12px; font-size: 13.5px; border-bottom: 1px solid var(--hairline); color: var(--ink-body); }
table.data th:first-child, table.data td:first-child { padding-left: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data tbody tr:last-child td { border-bottom: 1px solid var(--hairline); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--ink) 3%, #ffffff); }
table.data .num { font-family: var(--font-body); font-weight: 500; color: var(--ink); }

.panel-icon { border-radius: 0; }
.panel-title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; }

.banner { border: 0; border-left: 2px solid; border-radius: 0; padding: 12px 16px; }
.banner-info    { border-left-color: var(--accent-text); background: var(--accent-tint); color: var(--ink-body); }
.banner-warning { border-left-color: var(--warning-solid); }
.banner-danger  { border-left-color: var(--danger-solid); }
.banner-success { border-left-color: var(--success-solid); }
.banner-neutral { border-left-color: var(--hairline-strong); }
.banner-title { font-weight: 600; }

.meter-track { border-radius: 0; height: 4px; background: var(--hairline); }
.meter-fill { border-radius: 0; background: var(--accent-fill); }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   7 · WHAT FLOATS — dialogs, panels, menus, toasts
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.modal { border-radius: 0; border-color: var(--hairline); box-shadow: var(--shadow-modal); }
.modal-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 0; }
.modal-foot { background: #ffffff; }
.drawer { box-shadow: var(--shadow-modal); }
.drawer-foot { background: #ffffff; }
.toast { border-radius: 0; }
.tip-bubble { border-radius: 0; }
.scrim { border-radius: 0; }
.pager button { border-radius: 0; }
.skel { border-radius: 0; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   8 · THE FOOTER — kept (31.3, the owner's own request) and drawn quietly
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.app-foot { background: #ffffff; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ink-quiet); }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   9 · FIGURES — the prototypes set a figure in the heading face or the body face with tabular
   numerals, never in a monospace. Mono is kept for what is literally code: keys, snippets, ids.
   (The list is the skin audit's own finding across every screen, not a guess.)
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.rank-n, .rank-pct, .monthquota-v, .funnel-n, .pane-meter-val, .edstep-n, .steprow-ord,
.tokens, .cost, .field-count, .meter-value, .plancard-price, .plancard-price *, .kpi-val,
table.data .num, .num {
  font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.kpi-v, .monthquota-v, .plancard-price {
  font-family: var(--font-heading); font-weight: 600; letter-spacing: -.01em;
}
.devtile, .pp-icon, .pp-initial { border-radius: 0; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   10 · THE SCREEN HEAD'S LAYOUT — the prototypes' three-part head
   Row 1 is the title alone. Row 2 is the pickers, then the sub-line, then the actions pushed
   right. Every screen in `docs/redesign` draws exactly that (Industry Console.dc.html:127).
   ⚠ DONE WITH `display: contents`, NOT BY MOVING MARKUP. The title block and `.headtools` stop
   generating boxes, so their children become the head's own flex items and `order` can put
   them in the prototypes' sequence. Every page script keeps finding its controls where they
   are, and no gate that reads `.headtools .select` loses its element.
   ⚠ THE SPACER IS `::after`. A pseudo-element of a flex container is a flex item, and `order`
   must be an integer, so the gap between "what you are looking at" and "what you can do"
   is a real item at order 3 rather than a `margin-left: auto` on whichever button is first —
   which differs per page (a field leads the row on /report).
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.content-inner > .screen-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start;
  column-gap: 16px; row-gap: 0;
  /* shell.css borrows the container's top padding back with a negative margin so the frozen head
     reaches the scrollport's edge; this keeps that bargain and only changes what is paid back */
  padding: 22px var(--pad-content) 12px; margin-top: calc(var(--pad-content-top) * -1);
}
.content-inner > .screen-head::after { content: ""; order: 3; flex: 1 1 0; min-width: 16px; }
.content-inner > .screen-head > div:has(> .screen-title),
.content-inner > .screen-head > .screen-head-main,
.content-inner > .screen-head .headtools,
.content-inner > .screen-head > .row-actions:has(> .field) { display: contents; }
.content-inner > .screen-head .screen-title { order: 0; flex: 0 0 100%; margin: 0; font-size: 34px; line-height: 1; }
.content-inner > .screen-head :is(form, .field, .dr, .pp-wrap, nav.rangenav) { order: 1; margin-top: 10px; }
.content-inner > .screen-head form { display: flex; align-items: flex-end; gap: 16px; }
.content-inner > .screen-head .screen-sub { order: 2; margin: 10px 0 0; align-self: center; max-width: 80ch; }
.content-inner > .screen-head :is(.row-actions, .btn, .screen-note),
.content-inner > .screen-head > :not(div:has(> .screen-title), .screen-head-main, .headtools, .screen-title, .screen-sub) { order: 4; margin-top: 10px; }
.content-inner > .screen-head > :not(div:has(> .screen-title), .headtools):has(> .btn) { display: flex; align-items: center; gap: 6px; }
.content-inner > .screen-head .row-actions { display: flex; align-items: center; gap: 6px; }
/* a head with no picker keeps its sub-line directly under the title */
.content-inner > .screen-head .field { gap: 0; }

/* the website picker and the date range, drawn as the prototypes' underlined triggers */
.screen-head :is(.pp-button, .dr-button) {
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent;
  padding: 5px 0; min-height: 30px; gap: 7px; font-size: 13px; color: var(--ink);
}
.screen-head .pp-button { font-weight: 600; }
.screen-head .pp-wrap { min-width: 0; }
.screen-head .pp-button:hover, .screen-head .dr-button:hover { border-bottom-color: var(--accent-hairline); background: transparent; }
.screen-head .dr-button > svg { display: none; }
.screen-head .pp-icon { width: 16px; height: 16px; font-size: 10px; background: var(--accent-tint); color: var(--accent-text-on-tint); }
.pp-caret, .dr-caret { width: 9px; height: 6px; background-size: 9px 6px; }
.dr-pop, .pp-list, .pp-pop { border-radius: 0; background: #ffffff; }

/* tabs mark the current one as the prototypes do: ink, 600, a 2px accent-700 rule */
.tab[aria-current="page"], .tab[aria-selected="true"] {
  color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent-text);
}
.tab { border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab .badge {
  font-size: 11px; letter-spacing: 0; padding: 1px 6px; margin-left: 8px; font-weight: 400;
  background: var(--neutral-bg); color: var(--neutral-ink); box-shadow: none;
}
.tab[aria-current="page"] .badge, .tab[aria-selected="true"] .badge { background: var(--accent-tint); color: var(--accent-text-on-tint); }

/* the rail's utility block at the foot, as shell.css intends — `.rail-group + .rail-group` above
   is (0,2,0) and would otherwise out-rank shell.css's `margin-top: auto` */
.rail-group + .rail-utility { margin-top: auto; }

/* the switch, squared: Industry has no pill anywhere */
.switch .switch-track, .switch .switch-track::after { border-radius: 0; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   11 · THE DASHBOARD — Industry Console.dc.html, Dashboard
   KPI figures are flat columns over a 2px rule (the selected one in the logo blue), the chart
   sits in a hairline frame, and a ranked row draws its share as a 2px bar UNDER its text.
   ⚠ TWO THINGS THE PROTOTYPE DOES NOT DRAW STAY, BECAUSE THE OWNER ASKED FOR THEM BY NAME:
   the sparkline in each figure ("i want the daily activity list to be converted into the
   graphs", 2026-08-22) and the activity-type glyph on each ranked row (review point 11). They
   are drawn in this system's terms — no tile, no fill — rather than removed.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.kpis[role="tablist"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
button.kpi, .kpis .kpi {
  background: transparent; border: 0; border-bottom: 2px solid var(--hairline); border-radius: 0;
  box-shadow: none; padding: 0 0 8px; gap: 0;
}
button.kpi:hover { border-color: var(--hairline); border-bottom-color: var(--accent-hairline); }
button.kpi[aria-selected="true"] { border-color: transparent; border-bottom-color: var(--accent-fill); }
.kpis .kpi-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--neutral-ink); }
.kpis .kpi-v { font-size: 26px; line-height: 1.05; margin-top: 4px; color: var(--ink); white-space: nowrap; }
.kpis .kpi > .kpi-sub { font-size: 12px; margin-top: 6px; color: var(--ink-quiet); }
.kpis .kpi-spark { margin-top: auto; height: 26px; }
.kpis .kpi > .kpi-sub { margin-bottom: 6px; }
.kpis .kpi-spark .chart { height: 26px; }

.kpi-open { border: 1px solid var(--hairline); padding: 16px 18px 12px; margin-top: 2px; }
.kpi-open-head { justify-content: flex-start; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.kpi-open-title { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.2; }
.kpi-open-sub { font-size: 13px; }
.kpi-open-head [data-kpi-report] { margin-left: auto; font-family: var(--font-body); font-weight: 400; font-size: 13px; padding: 0; text-decoration: underline; }

.ranklist { padding: 0; }
.rank, .ranklist.has-share .rank {
  grid-template-columns: 22px minmax(0, 1fr) 12px 74px;
  grid-template-areas: "icon main pin n" ". bar . .";
  column-gap: 12px; row-gap: 5px; align-items: center; padding: 6px 0; border-bottom: 0;
}
.ranklist.has-share .rank { grid-template-columns: 22px minmax(0, 1fr) 12px 74px 48px; grid-template-areas: "icon main pin n pct" ". bar . . ."; }
.ranklist .rank .rank-icon { grid-area: icon; background: transparent; width: 22px; height: 22px; }
.rank-main { grid-area: main; }
.rank-pin { grid-area: pin; color: var(--accent-text); }
.rank-bar { grid-area: bar; width: auto; height: 2px; border-radius: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.rank-fill { border-radius: 0; background: var(--accent-fill); }
.rank .rank-n { grid-area: n; font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--ink); }
.rank .rank-pct { grid-area: pct; font-size: 12px; color: var(--ink-quiet); }
.rank-label { font-size: 14px; color: var(--ink); }
.rank-sub { font-size: 12px; }

.devicerow { gap: 24px; }
.devicecol-head { font-size: 11px; letter-spacing: .08em; font-weight: 400; margin: 6px 0 4px; }
.devbar, .devbar:not(:has(.devtile)) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "tile name n pct" "bar bar bar bar";
  column-gap: 7px; row-gap: 5px; padding: 5px 0; font-size: 13px;
}
.devbar:not(:has(.devtile)) { grid-template-areas: "name name n pct" "bar bar bar bar"; }
.devbar .devtile { grid-area: tile; }
.devbar-name { grid-area: name; }
.devbar-n { grid-area: n; color: var(--ink-quiet); font-size: 12px; }
.devbar-pct { grid-area: pct; color: var(--ink); font-weight: 600; min-width: 3.4em; }
.devbar-track { grid-area: bar; height: 2px; border-radius: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.devbar-fill { border-radius: 0; background: var(--accent-fill); }
.devtile { background: transparent; border: 1px solid var(--hairline); color: var(--ink-quiet); }

[data-state-region="bumps"] td .badge { background: none; box-shadow: none; padding: 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-quiet); font-weight: 400; }
.monthquota-track, .monthquota-fill { border-radius: 0; }
.monthquota-track { height: 3px; }
.monthquota-fill { background: var(--accent-fill); }

/* the chevron is 9×6; every select rule sizes its background 12×6, which would stretch it */
.select, .pp-caret, .dr-caret { background-size: 9px 6px; }
.content-inner > .screen-head .screen-sub { align-self: flex-end; padding-bottom: 7px; }
.content-inner > .screen-head .select { min-height: 30px; padding: 5px 18px 5px 0; background-position: right 1px center; }
.card-head .btn-subtle, .card-head a.btn-sm.btn-subtle { font-family: var(--font-body); font-weight: 400; font-size: 13px; padding: 0; background: none; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   12 · VISITORS — the filter rail and the dateline (Industry Console.dc.html, Visitors)
   A 236px rail ruled on its right; closed groups are sunken bands in muted capitals, an open
   group is tinted accent-100 with an accent-300 edge; every field is an underlined picker with
   an 11px label; the = / ≠ toggle is a 22px underlined square beside it.
   ⚠ `.with-pane > .pane.filterpane` OUT-RANKS §4's section-list pane, which is (0,2,0) and would
   otherwise squeeze the filters into a 188px navigation column.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.content-inner > .screen-head .headbar-search { flex-direction: row; align-items: center; }
.content-inner > .screen-head .headbar-search .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.content-inner > .screen-head .headbar-search .input {
  width: 210px; padding: 5px 0 5px 20px; min-height: 30px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") no-repeat left 0 center;
}
.content-inner > .screen-head .headbar-host .opgroup { gap: 0; }
.screen-head .combo-btn, .filterpane .combo-btn {
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background-color: transparent;
  padding: 6px 16px 6px 0; min-height: 30px; font-size: 13px; color: var(--ink);
}
.filterpane .select, .filterpane .input:not([type="checkbox"]) {
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background-color: transparent;
  padding: 6px 16px 6px 0; min-height: 30px; font-size: 13px; color: var(--ink); background-position: right 1px center;
}
.filterpane .select:hover, .filterpane .input:hover, .filterpane .combo-btn:hover { border-bottom-color: var(--accent-hairline); }

.with-pane > .pane.filterpane {
  width: 236px; flex: none; margin-left: calc(var(--pad-content) * -1); padding: 0;
  border-right: 1px solid var(--hairline); overflow: hidden;
  top: calc(var(--head-h, 96px) + 16px); max-height: calc(100dvh - var(--head-h, 96px) - 40px);
}
.with-pane:has(> .pane.filterpane) { gap: 24px; }
.filterpane .filterpane-scroll { padding: 0 20px 12px 24px; }
.filterpane .livefilter { padding: 0 20px 10px 24px; border: 0; background: transparent; }
.filterpane .livetoggle-label { font-size: 14px; font-weight: 400; }
.filterpane .livetoggle input { border-radius: 0; }
.filterpane .livetoggle input::after { border-radius: 0; }
.filterpane .filtergroup { margin-top: 6px; }
.filterpane .filtergroup-head {
  width: calc(100% + 44px); margin: 0 -20px 0 -24px; padding: 9px 12px 9px 22px;
  background: var(--surface-sunken); color: var(--ink-quiet);
  border: 0; border-left: 2px solid transparent;
  font-size: 11px; font-weight: 400; letter-spacing: .08em;
}
.filterpane .filtergroup-head:hover { background: var(--accent-wash); }
.filterpane .filtergroup-head[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent-text-on-tint); border-left-color: var(--accent-hairline); }
.filterpane .filtergroup-head .badge { background: var(--accent-fill); color: #ffffff; box-shadow: none; font-size: 10px; letter-spacing: 0; padding: 1px 6px; }
.filterpane .filtergroup-chev { width: 11px; height: 11px; color: var(--ink-quiet); }
.filterpane .filtergroup-body { padding: 12px 0 16px; gap: 12px; }
.filterpane .field-label { font-size: 11px; color: var(--ink-quiet); font-weight: 400; margin: 0; }
.filterpane .optoggle {
  width: 22px; height: 28px; flex: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  background: none; font-family: var(--font-body); font-size: 12px; color: var(--ink); padding: 0;
}
.filterpane .optoggle[aria-pressed="true"] { background: none; color: var(--danger-ink); border-bottom-color: var(--danger-ink); }
.filterpane .filteractions { padding: 10px 20px 10px 24px; background: #ffffff; border-top: 1px solid var(--hairline); }
.gridframeless > .card-head { padding: 0 0 8px; align-items: baseline; }
.gridframeless > .card-head .card-title { font-size: 16px; }
.filterpane .rp-btn { border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; padding: 6px 0; min-height: 30px; font-size: 13px; }
.filterpane .rp-btn:hover { border-bottom-color: var(--accent-hairline); }
/* 214.33 — the chevron's BOX is 9×6 too, not only its background: a 12px box around a 9px image
   painted it 3px left of where every native select paints it (dropdown-glyph, same size + same edge). */
.rp-caret, .combo-btn::after { width: 9px; height: 6px; background-size: 9px 6px; }
.filterpane .livetoggle-label { white-space: nowrap; }
.filterpane .filteractions-row .btn-subtle { padding-inline: 2px; font-size: 13px; }
.filterpane .filteractions-row { gap: 6px; }
.with-pane-main > .gridframeless { margin-left: 0; }

/* ── the visitor drawer and the visitor page's facts (Industry Console.dc.html, Visitors panel) ──
   Facts are an unboxed column ruled on its right, labels in 10.5px capitals; tabs are compact and
   left-set. The head keeps the owner's static "Visitor Details" (42.9) in the heading face. */
.drawer-dialog { border-radius: 0; }
.drawer-dialog .drawer-head { padding: 11px 26px; border-bottom: 1px solid var(--hairline); }
.drawer-dialog .drawer-head .card-title { font-size: 26px; }
.drawer-dialog .drawer-body { padding: 0 26px; }
.drawer-dialog .tabs { gap: 6px; margin-bottom: 16px; }
.drawer-dialog .tab { padding: 12px 12px 11px; } /* 42.12, the owner's: a padded tab whose rule is wider than its words — kept over the prototype's text-width rule */
.vd-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.vd-side { border-right: 1px solid var(--hairline); padding: 16px 16px 16px 0; align-self: stretch; }
.vd-facts { border: 0; border-radius: 0; background: transparent; padding: 0; }
.vd-fact { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.vd-fact-k { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--ink-quiet); }
.vd-fact-v, .vd-fact-body > strong { font-size: 13px; }
.vd-tags { border: 0; border-radius: 0; background: transparent; padding: 14px 0 0; }
.vd-main { padding-top: 8px; }
.vd-grid { grid-template-columns: 220px minmax(0, 1fr); }
.vd-fact-row { flex-wrap: wrap; gap: 4px 12px; }
.vd-fact-row .btn-subtle { padding: 0; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; min-height: 0; }
.vd-fact-row .vd-fact-body { flex-basis: 100%; }
.drawer-dialog .rank-icon, .vd-panel .rank-icon, .vp-main .rank-icon { background: transparent; }

/* ── the way back: the prototypes draw `← Campaigns`, never a breadcrumb trail ───────────────────
   The trail stays in the document (screen readers still hear where they are, and gates still find
   `nav.crumbs`); its separator and current step are taken out of the picture, not out of the page. */
.crumbs { gap: 0; font-size: 13px; font-weight: 400; }
.crumbs > a { color: var(--accent-text); text-decoration: none; }
.crumbs > a::before { content: "← "; }
.crumbs > a:hover { text-decoration: underline; }
.crumbs > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.content-inner > .crumbs + .screen-head { margin-top: 0; padding-top: 6px; }
.content-inner > .crumbs, .with-pane-main > .crumbs { margin-bottom: -8px; }
/* a trail inside a pane's main column (/visitor) keeps the same step as one above a head; a closed
   <dialog> sits between them, so the section is named by what it is, never by adjacency */
.with-pane-main > .crumbs ~ section:first-of-type { margin-top: 0; }

/* the visitor page's identity card leads with the person, in the heading face (Visitor.dc.html) */
.with-pane-main > .crumbs ~ section:first-of-type .card:first-child > .card-head .card-title { font-size: 30px; line-height: 1.1; }

/* ── 214.9 · Campaigns area (Campaigns.dc.html) ───────────────────────────────────────────────── */
/* segmented filters that are LINKS (each one its own URL) take the same pressed fill as the buttons */
.seg a.segbtn { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--ink); padding: 8px 12px; border-right-color: var(--hairline-strong); }
.seg a.segbtn[aria-current="true"] { background: var(--accent-action); color: #ffffff; }
.seg a.segbtn .badge { background: transparent; color: inherit; box-shadow: none; padding: 0; font-size: 13px; letter-spacing: 0; font-weight: 400; }
.segrow { gap: 8px; }

/* the quota band is a dateline, not a panel */
.quotaband { border: 0; background: transparent; padding: 0; gap: 6px; }

/* the message gallery: three hairline tiles, a pale stage for the live preview, plain-words stats */
.grid:has(> .ccard) { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.ccard { border-radius: 0; box-shadow: none; border-color: var(--hairline); }
.ccard .thumb { height: 150px; background: var(--surface-sunken); border-bottom-color: var(--hairline); }
.ccard .thumb-scrim { background: #e9eef4; }
.ccard-body { padding: 12px 14px 4px; gap: 6px; }
.ccard-name { font-size: 14px; }
.ccard-stat, .ccard-stat-quiet { font-family: var(--font-body); font-size: 12px; color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
.ccard-foot { border-top: 0; background: transparent; padding: 4px 6px 10px; gap: 2px; margin-top: auto; }
.ccard-foot .row-action { font-size: 12px; padding: 4px 8px; }
/* an iframe is a replaced element: `inset: 0` alone left it at the UA's 300×150 with a 2px inset
   border, a dark box parked in the corner of every tile */
.ccard iframe.thumb-frame { width: 100%; height: 100%; border: 0; }
/* a numeric HEADER is a header first: §9's tabular-figures rule reset its tracking and weight, so
   "SHOWN · LAST 30 DAYS" read heavier and tighter than the labels beside it */
table.data th.num { letter-spacing: .08em; font-weight: 500; color: var(--neutral-ink); font-family: var(--font-body); }
.ccard-name a { color: var(--ink); text-decoration: none; }
.ccard-name a:hover { color: var(--accent-text); }

/* tags, not shouted labels: the Industry DS `.tag` is sentence case, 11px, a hair of tracking */
.badge { text-transform: none; letter-spacing: .02em; font-size: 11px; font-weight: 400; padding: 3px 8px; line-height: 1.3; }
/* ⚠ A TABLE CELL THAT IS ALSO `.row-actions` stopped being a table cell: the shared rule makes
   `.row-actions` a flex row, a flex `td` sizes to its content, and its bottom rule ran 8px above
   every other cell's in the same row (Events tab, 214.9). The cell stays a cell; its links space. */
td.row-actions { display: table-cell; text-align: right; white-space: nowrap; }
td.row-actions > * + * { margin-left: 12px; }

/* a filter row above a list: an underlined search of a readable width, not a box across the page */
.evfilters { align-items: center; gap: 16px; margin-bottom: 4px; }
.evfilters > .field:has(> .input) { flex: 0 0 260px; }
.evfilters .input { border: 0; border-bottom: 1px solid var(--hairline-strong); background: transparent; padding-left: 0; }
.evfilters .input:focus { border-bottom-color: var(--accent-text); box-shadow: none; outline: none; }
.evfilters-note { margin-left: auto; text-align: right; }
/* the actions header sits over its actions */
table.data:has(td.row-actions:last-child) th:last-child { text-align: right; }
/* the row's own name is the row, in ink; secondary links keep the accent */
table.data td:first-child > a:not(.btn):not(.row-action) { color: var(--ink); text-decoration: none; }
table.data td:first-child > a:not(.btn):not(.row-action):hover { color: var(--accent-text); }

/* mono is for values a person copies, at the body's size, and chips are square */
table.data td .mono { font-size: 12.5px; color: var(--ink); }
.chip { border-radius: 0; }
code.chip { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-body); font-size: 12px; padding: 3px 8px; }
/* a cell of buttons and row actions (no class to say so) is still the actions column */
table.data td:last-child:has(> .row-action) { text-align: right; white-space: nowrap; }
table.data td:last-child:has(> .row-action) > * + * { margin-left: 10px; }
table.data:has(td:last-child > .row-action) th:last-child { text-align: right; }
/* a figure with its unit word, in a right-aligned column, ends at the column's edge like the header */
td.num > .funnel { justify-content: flex-end; }
td.num > .funnel .funnel-n { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; }
table.data:has(td:last-child > .row-actions) th:last-child { text-align: right; }
table.data td:last-child > .row-actions { justify-content: flex-end; gap: 12px; }
.galleryband { border-radius: 0; }

/* ── selects and searches, console-wide (surveyed across every prototype, 214.9) ─────────────────
   Settings and list screens draw every `select.gm-select` UNDERLINED; only the three editors
   (Campaign, Message, Journey) draw it boxed, beside boxed inputs. A search box is underlined
   everywhere; a text field in a form stays a box (the DS `.input`). Dialogs are forms: boxed. */
:root:not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"]))
  .content-inner select.select:not([multiple]):not(dialog select) {
  border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; background-color: transparent;
  padding: 6px 18px 6px 0; min-height: 32px; font-size: 13px; color: var(--ink); background-position: right 2px center;
}
:root:not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"]))
  .content-inner select.select:not([multiple]):not(dialog select):focus { border-bottom-color: var(--accent-text); box-shadow: none; }
.content-inner input.input[type="search"]:not(dialog input) {
  border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; background-color: transparent; padding-left: 0;
}
/* a text box standing in a row of underlined pickers takes their line, or one row draws two shapes */
:root:not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"]))
  .content-inner :has(> .field > select.select):not(dialog *):not(.stack, form.stack) > .field > input.input {
  border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; background-color: transparent;
  padding: 6px 0; min-height: 32px; font-size: 13px;
}
/* a card title's gap is the card head's to give: a bare h3 brought 24px of document margin with it */
.card-head .card-title { margin-top: 0; margin-bottom: 0; }
.quotaband { margin-top: 0; }
/* House rules: section heads in the heading face; the priority order is hairline rows, not boxes */
.hr-h { font-family: var(--font-heading); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.hr-ord { border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; margin: 0; }
.hr-ordlist { border-top: 1px solid var(--hairline); }
.hr-ord-name { font-weight: 400; }
.hr-ord-move .btn-icon { border-radius: 0; }

/* ── 214.10 · the campaign editor (Campaign Editor.dc.html) ───────────────────────────────────── */
/* numbered squares on a thread: the order is drawn, not only numbered */
.edstep { position: relative; border-top: 0; padding: 18px 0 22px 46px; }
.edstep::before { content: ""; position: absolute; left: 13px; top: 50px; bottom: -14px; width: 1px; background: var(--hairline); }
.ced-steps > .edstep:last-child::before { display: none; }
.edstep-head { position: relative; align-items: center; }
.edstep-n {
  position: absolute; left: -46px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 0; background: #ffffff; color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-text); font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.edstep-h { font-family: var(--font-heading); font-size: 19px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.edstep-lead { margin: 2px 0 16px; font-size: 13px; color: var(--ink-quiet); }
.ced-steps .field > :is(.select, .input:not([type="checkbox"]):not([type="radio"])) { max-width: 520px; }
.ced-steps .ced-name, .ced-steps { min-width: 0; }

/* the trigger is a two-way choice drawn as one segmented control; the radios stay the controls */
.ced-steps fieldset:has(> label.radio > [data-trig]) { display: grid; grid-template-columns: max-content max-content 1fr; row-gap: 14px; column-gap: 0; }
.ced-steps fieldset:has(> label.radio > [data-trig]) > label.radio {
  grid-row: 1; position: relative; margin: 0; padding: 8px 14px; font-size: 13px; color: var(--ink);
  border: 1px solid var(--hairline-strong); background: #ffffff; cursor: pointer;
}
.ced-steps fieldset > label.radio:has(> [data-trig="event"]) { grid-column: 1; }
.ced-steps fieldset > label.radio:has(> [data-trig="journey"]) { grid-column: 2; margin-left: -1px; }
.ced-steps fieldset > label.radio > [data-trig] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ced-steps fieldset:has(> label.radio > [data-trig]) > label.radio:has(> [data-trig]:checked) { background: var(--accent-action); border-color: var(--accent-action); color: #ffffff; }
.ced-steps fieldset:has(> label.radio > [data-trig]) > [data-trig-panel] { grid-column: 1 / -1; grid-row: 2; }
.ced-steps fieldset:has(> label.radio > [data-trig]) > [data-trig-panel] ~ [data-trig-panel] { grid-row: 2; }

/* channel tiles; the select they write to is kept for forms, keyboards and gates, out of the picture */
.chtiles-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chtiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.chtile {
  flex: 1 1 0; min-width: 104px; max-width: 150px; min-height: 70px; padding: 10px 11px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 12px; background: #ffffff; border: 1px solid var(--hairline); border-radius: 0;
  font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer;
}
.chtile:hover:not(:disabled) { border-color: var(--hairline-strong); }
.chtile[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-fill-soft, #eaf4fa); font-weight: 600; }
.chtile:disabled { color: var(--disabled-ink); cursor: not-allowed; }
.chtile-mark { width: 13px; height: 9px; border: 1px solid var(--ink-quiet); }
.chtile[aria-pressed="true"] .chtile-mark { border-color: var(--accent-text); }

/* the campaign's name is the page's title, typed in place */
.screen-head .ced-nameinput { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--ink); border: 0; border-bottom: 1px solid transparent; padding: 2px 0; min-height: 0; background: transparent; }
.screen-head .ced-nameinput:hover { border-bottom-color: var(--hairline); }
.screen-head .ced-nameinput:focus { border-bottom-color: var(--accent-text); box-shadow: none; outline: none; }

/* ── 214.11 · the message editor ─────────────────────────────────────────────────────────────── */
.screen-head .ce-nameinput { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--ink); border: 0; border-bottom: 1px solid transparent; padding: 2px 0; min-height: 0; height: auto; background: transparent; }
.screen-head .ce-nameinput:hover { border-bottom-color: var(--hairline); }
.screen-head .ce-nameinput:focus { border-bottom-color: var(--accent-text); box-shadow: none; outline: none; }
/* seven tabs on one line: the side takes the prototype's 420px and the tabs their own spacing */
body.has-canvas .editor-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
/* ⚠ WRAPS, NEVER SCROLLS SIDEWAYS — page-content-edit.css says why: seven tabs do not fit the column, and a clipped
   tab is a tab nobody can find or click (editor-layout reds on Placement when this is overflow-x: auto). */
.edtabs { flex-wrap: wrap; gap: 16px; row-gap: 0; overflow-x: visible; }
.edtabs .tab { padding-left: 0; padding-right: 0; font-size: 13px; white-space: nowrap; }
/* the owner's banded section heads (45.2) stay, in the console's label type, square */
.edit-panel { border-radius: 0; box-shadow: none; }
.edit-panel > div:first-child > .pane-title:first-child { border-radius: 0; }
.edit-panel .pane-title, .editor-fields .card-head .card-title {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.editor-fields .card-head { background: var(--surface-sunken); padding: 7px 12px; border-bottom: 1px solid var(--hairline-soft); margin-bottom: 10px; }
.canvas-col > .card { border: 1px solid var(--hairline); }
/* one panel, one inset: the side column's sections share its 14px, their bands run edge to edge */
.editor-fields > .edtabs { padding: 0 14px; }
/* the inset lives ON each section, not on the stack around it, so a band's -14px bleed stays inside its own box
   (card-padding reds a card-head outside its .card) */
.editor-fields > .stack { padding: 0 0 16px; }
.editor-fields > .stack > .card, .editor-fields > .stack > .edit-panel { padding-left: 14px; padding-right: 14px; }
.editor-fields > .stack > :not(.card):not(.edit-panel) { margin-left: 14px; margin-right: 14px; }
.editor-fields > .stack .card-head { margin: 0 -14px 10px; padding: 7px 14px; }
.editor-fields .edit-panel { border: 0; padding-top: 0; padding-bottom: 0; background: transparent; }
.editor-fields .edit-panel .pane-title { margin: 16px -14px 10px; padding: 7px 14px; }
.editor-fields .edit-panel > div:first-child > .pane-title:first-child { margin-top: 0; }
.editor-fields > .edtabs { gap: 12px; }
.editor-fields > .stack .card-head .card-title { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 18px; }

/* ── 214.12 · the journey editor: the steps down the left, reach and settings beside them ────── */
.jform { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; row-gap: 0; align-items: start; }
.jform > .card, .jform > [data-err] { grid-column: 1; }
.jform > .card + .card { margin-top: 28px; }
.jform > .jside { grid-column: 2; grid-row: 1 / span 5; padding-left: 24px; border-left: 1px solid var(--hairline); }
.jform > .jside > .card + .card { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
@media (max-width: 1180px) { .jform { grid-template-columns: minmax(0, 1fr); } .jform > .jside { grid-column: 1; grid-row: auto; padding-left: 0; border-left: 0; margin-top: 28px; } }
.jform .card-body > p.field-hint { max-width: 78ch; }
.jform [data-finish-open] { align-self: flex-start; }
.screen-head .ced-name .ced-nameinput::placeholder { color: var(--ink-quiet); }
.jform { margin-top: 20px; }
.jform .card-body.stack { gap: 12px; }
.jform .card-body.stack > * { margin-top: 0; }

/* ── 214.15 · Deliveries: an outcome is a coloured word with a dot, not a tinted chip ─────────── */
[data-state-region="sends"] td > .badge { background: transparent; box-shadow: none; padding: 0; font-size: 13px; letter-spacing: 0; gap: 7px; }
[data-state-region="sends"] td > .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
[data-state-region="sends"] td > .badge-neutral { color: var(--ink-quiet); }
[data-state-region="sends"] td > .badge-neutral::before { background: #c1c9d2; }
[data-state-region="sends"] td > .badge-accent, [data-state-region="sends"] td > .badge-info { color: var(--accent-text); }
[data-state-region="sends"] td a.cell-link { color: var(--ink); }
[data-state-region="sends"] td a.cell-link:hover { color: var(--accent-text); }
/* prose reads at a measure, not across a 1340px column */
.card-body > p.field-hint, .card > p.field-hint, .card-head + p.field-hint { max-width: 96ch; }

/* ── 214.16 · Channels: the working surfaces as tiles under a heavy rule ──────────────────────── */
.chwork { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); border-top: 1px solid var(--ink); }
.chwork-tile { padding: 16px 18px 14px 0; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; }
.chwork-tile + .chwork-tile { padding-left: 18px; border-left: 1px solid var(--hairline); }
.chwork-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.chwork-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-body); flex: 1; }
.chwork-foot { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-quiet); }
.chwork-foot .badge { background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 12px; letter-spacing: 0; }
.chwork-foot .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* a website picker above the page's sections is a picker, not a full-width rule */
[data-state="ready"] > .field:has(> [data-pixel-select]) { max-width: 280px; }
.chwork { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chwork-tile { padding: 16px 18px 14px; border-left: 1px solid var(--hairline); }
.chwork-tile:nth-child(5n+1) { padding-left: 0; border-left: 0; }
@media (max-width: 1100px) {
  .chwork { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chwork-tile:nth-child(5n+1) { padding-left: 18px; border-left: 1px solid var(--hairline); }
  .chwork-tile:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}

/* a STATE in a table is a coloured word with a dot (Deliveries, Segments, Integrations, Channels);
   a tag that names a kind — Pinned, Auto captured, Popup — stays a tag */
table.data td .badge:is(.badge-success, .badge-warning, .badge-danger) {
  background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 12.5px; letter-spacing: 0;
}
table.data td .badge:is(.badge-success, .badge-warning, .badge-danger)::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
/* a state that already carries its own dot is a word, not a box */
table.data td .badge:has(> .badge-dot) { background: transparent; box-shadow: none; padding: 0; font-size: 12.5px; letter-spacing: 0; }
table.data td .badge-neutral:has(> .badge-dot) { color: var(--ink-quiet); }
/* a title that IS data (a hostname, a person) keeps the case it was typed in */
.screen-title[data-pixel-h1] { text-transform: none; }

/* ── 214.19 · Team ─────────────────────────────────────────────────────────────────────────────── */
.avatar { border-radius: 0; }
/* a rule the product enforces is information, not an error the reader made */
td .field-error.mt-2 { color: var(--ink-quiet); }

/* an account-wide notice sits under the page's own heading, not above its title */
.content-inner > .crumbs { order: -2; }
.content-inner > .screen-head { order: -1; }

/* ── 214.20 · AI settings, and every card that stacks several forms ───────────────────────────── */
.card > div > :is(form, p.card-body) + form { border-top: 1px solid var(--hairline); margin-top: 20px; padding-top: 20px; }
/* a group's own heading inside a settings card is an h2 in the heading face (AI.dc.html: "Whose model, whose bill", 18px/600) */
.fieldset > legend.field-label { font-family: var(--font-heading); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); padding: 0; margin: 0 0 6px; }
/* "Never allowed" is the prototype's amber guard note, not a bulleted list under a bold line */
.card-body > .stack-sm:has(> p.field-label + ul) { background: #fff8e6; border-left: 2px solid #d98600; padding: 11px 14px; color: #8a6100; max-width: 72ch; }
.card-body > .stack-sm > p.field-label { font-size: 12.5px; font-weight: 600; color: #8a6100; letter-spacing: 0; text-transform: none; margin: 0 0 6px; }
.card-body > .stack-sm:has(> p.field-label + ul) li { color: #6b4a00; }
.card > div > p.card-body { font-size: 13.5px; color: var(--ink-body); }
/* a picker in the same form row as a boxed text field is boxed too, so one row draws one shape */
:root:not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"]))
  .content-inner form.form-grid:has(> .field .input:not([type="search"])) > .field > select.select:not([multiple]) {
  border: 1px solid var(--hairline); border-radius: 0; background-color: #ffffff; padding: 8px 28px 8px 12px; min-height: 37px; background-position: right 12px center;
}
.card-body ul.stack-sm { font-size: 13px; }
.btn-tinted { background: #ffffff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn-tinted:hover:not(:disabled) { background: var(--surface-sunken); }
.form-actions { row-gap: 8px; }

/* ── 214.22 · Admin ────────────────────────────────────────────────────────────────────────────── */
/* an underlined search that carries a magnifier keeps room for it */
.content-inner input.input.input-search[type="search"] { padding-left: 22px; background-position: 0 50%; }
/* a filter row above a table is a row, not a boxed panel */
form.toolbar { border: 0; background: transparent; padding: 0 0 4px; border-radius: 0; box-shadow: none; }

/* ── 214.23 · Library ──────────────────────────────────────────────────────────────────────────── */
.content-inner .lib-search > svg { left: 0; }
.content-inner .screen-head .lib-search .lib-search-input, .content-inner .lib-search .lib-search-input { padding-left: 22px; }
.lib-grid .btn { border-radius: 0; }

/* ── 214.17 · website settings: the first section sits directly under the head (owner, 51.7 — settings-layout ≤ 16px) ── */
:root:has(link[href$="/page-pixel.css"]) .content-inner > .screen-head ~ .with-pane { margin-top: -8px; }

/* ── 214.2 · a white-labelled brand with no logo: its name open, its initial collapsed ── */
:root:not([data-rail="open"]) .rail-brand.has-name .rail-brand-name:not([hidden]) {
  display: grid; place-items: center; width: 28px; height: 28px; font-size: 0; border: 1px solid var(--ink);
}
:root:not([data-rail="open"]) .rail-brand.has-name .rail-brand-name::before { content: attr(data-initial); font-size: 17px; line-height: 1; }

/* ── 214.6 · the dashboard's bands keep ONE rhythm (dashboard-shell: every painted gap equal, ≤ 1.5× the margin) ──
   Unboxed cards end where their ink ends, so an empty state paints its own ground (the sunken surface) rather than
   leaving 36px of invisible padding under the words, and the bands sit 32px apart. */
.card > .panel { background: var(--surface-sunken); }
:root:has(link[href$="/page-dashboard.css"]) .content-inner > .screen-head ~ * { margin-top: 8px; }
.devicecol .devbar:last-child { padding-bottom: 0; }

/* ── 214.4 · below the pane-collapse width (1180px) ─────────────────────────────────────────────
   shell.css's container query was written for v5: an icon pane dropping to rail width with its labels hidden, and an
   open rail forced to icons. Phase 214's section pane is WORDS — hiding them left a 188px column of nothing (Team at
   1024) — so it keeps them, a little narrower; the rail starts collapsed there (the <head> script), and a rail somebody
   opens anyway shows its labels rather than 212px of blank icons; the message editor stacks its two columns. */
@container (max-width: 1180px) {
  .with-pane > .pane { width: 164px; overflow-y: auto; }
  .with-pane > .pane .pane-link { justify-content: flex-start; padding: 9px 12px; }
  .with-pane > .pane .pane-link .pane-label, .with-pane > .pane .pane-count { display: inline; }
  .with-pane { gap: 24px; }
  :root[data-rail="open"] .rail, .shell.is-rail-open .rail { width: var(--w-rail-open); align-items: stretch; padding: 18px 12px 18px 28px; }
  :root[data-rail="open"] .rail-item, .shell.is-rail-open .rail-item { width: auto; display: flex; align-items: center; height: 31px; padding: 0; gap: 12px; }
  :root[data-rail="open"] .rail-label, .shell.is-rail-open .rail-label { display: inline; }
  body.has-canvas .editor-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 214.8 · the visitor page: the header closes on a rule; notes are a hairline feed with room either side ── */
[data-state-region="visitor"] > [data-state="ready"] > section.card:first-child,
[data-state-region="visitor"] section.card:has(> .card-body > .facts) { border-bottom: 1px solid var(--hairline); padding-bottom: 24px; }
[data-state-region="visitor"] section.card:has(> .card-body > .facts) > .card-body { padding-top: 4px; }
#notes .savebar { background: transparent; border-top: 0; border-radius: 0; padding: 10px 0 0; }
#notes > [data-state="ready"] { padding: 16px 0 12px; }
#notes .note-row { border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding: 12px 0; }
#notes .note-row:first-child { border-top: 0; padding-top: 0; }
/* the sections start under the visitor header at the dashboard's own distance from its head (visitor-page 42.15) */
.with-pane-main > .vp-split { margin-top: 8px; }
.vp-split > * > section:first-child { margin-top: 0; }
.vp-split > * > section[hidden]:first-child + section { margin-top: 0; }
.editor-fields .edit-panel .pane-title { line-height: 18px; }

/* ── 214.23 · the library's one head: search under the title, the count at the right ── */
.content-inner > .screen-head .lib-search { order: 1; margin-top: 10px; position: relative; flex: 0 1 360px; }
.content-inner > .screen-head .lib-search .lib-search-input { width: 100%; }
.content-inner > .screen-head .lib-count { order: 4; margin: 10px 0 0; align-self: flex-end; padding-bottom: 7px; font-size: 12px; color: var(--ink-quiet); }
/* with nothing ticked the chips bar is not there at all — as a flex child it still cost the main column's 24px gap */
.with-pane-main > .lib-bar:has(> .lib-chips:empty):has(> .lib-clear[hidden]) { display: none; }

/* ══ 214.28 · the visual pass — what four side-by-side reviews against the prototypes found ══════════════════════ */

/* An empty state is a sentence at the section's own left edge, on the page — not a tinted box with centred words.
   The tone survives as the glyph's colour, so empty, error and warning stay tellable apart (state-tones). */
.panel, .card > .panel { background: transparent; border: 0; align-items: flex-start; text-align: left; padding: 16px 0 8px; gap: 6px; }
.panel-icon, .panel-icon:is(.is-accent, .is-danger, .is-warning) { background: transparent; width: auto; height: auto; margin: 0 0 2px; place-items: start; }
.panel-actions { justify-content: flex-start; }
.panel-hint { max-width: 72ch; }
.panel > p { margin: 0; }
/* an EMPTY state needs no glyph — its sentence says it; an error or a warning keeps its tone mark so the two stay apart */
.panel-icon.is-accent, .panel-icon:not([class*="is-"]) { display: none; }
.panel-title, .panel > p > strong { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--ink); }

/* A disabled button is a hairline outline with quiet ink, never a grey slab. */
.btn:disabled, .btn[aria-disabled="true"],
.btn-primary:disabled, .btn-danger:disabled, .btn-secondary:disabled, .btn-subtle:disabled, .btn-tinted:disabled {
  background: #ffffff; border-color: var(--hairline); color: var(--disabled-ink); box-shadow: none; opacity: 1;
}

/* Tags. A kind is an outlined sentence-case tag; a not-yet-built note is the prototype's amber outlined capital tag;
   success is a state, so it is a dot and a word wherever it appears. */
/* (a kind stays the prototype's filled tag: Auto captured grey, Pinned a blue tint, Named outlined in blue) */
.badge-neutral { background: var(--surface-sunken); color: var(--ink-body); box-shadow: none; }
.badge-accent { background: var(--accent-tint); color: var(--accent-text-on-tint); box-shadow: none; }
.badge-outline { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.badge-warning { background: transparent; color: var(--warning-ink); box-shadow: inset 0 0 0 1px currentColor; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.badge-danger { background: transparent; color: var(--danger-ink); box-shadow: inset 0 0 0 1px currentColor; }
.badge-success { background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 12.5px; letter-spacing: 0; }
.badge-success::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* a STATE (Working, Not built, Passing, Watch it, Broken) is a dot and a word wherever it is drawn; kinds stay tags */
.badge.badge-state { background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.badge.badge-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.badge-state.badge-neutral { color: var(--ink-quiet); }
.badge.badge-state.badge-neutral::before { background: #c1c9d2; }
/* the visitors grid's Messages column: Bumped / Not sent are states, read as a dot and a word */
.col-msgs-cell .badge { background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 13px; letter-spacing: 0; }
.col-msgs-cell .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.col-msgs-cell .badge-neutral { color: var(--ink-quiet); }
.col-msgs-cell .badge-neutral::before { background: #c1c9d2; }
/* the tab counts stay small grey figures */
.tab .badge, .tab .badge-neutral { box-shadow: none; }

/* A switch is the prototype's square checkbox: a 16px box, filled blue with a white tick when on. */
.switch { width: 16px; height: 16px; }
.switch .switch-track { background: #ffffff; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.switch .switch-track::after { top: 3px; left: 5px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; background: transparent; box-shadow: none; transform: rotate(45deg); opacity: 0; }
.switch input:checked + .switch-track { background: var(--accent-action); box-shadow: none; }
.switch input:checked + .switch-track::after { transform: rotate(45deg); opacity: 1; }
.switch input:disabled + .switch-track { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--hairline); }
.switch input:disabled:checked + .switch-track { background: var(--disabled-border); }
.switch-sm { width: 16px; height: 16px; }
/* a setting with a switch is a row on the page, ruled underneath, not a bordered card */
.switch-row { border: 0; border-bottom: 1px solid var(--hairline); padding: 12px 0; align-items: center; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-action); }
input[type="file"] { font: inherit; font-size: 13px; color: var(--ink-quiet); }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: #ffffff; border: 1px solid var(--hairline-strong);
  border-radius: 0; padding: 6px 12px; margin-right: 12px; cursor: pointer;
}

/* A section title that repeats the tab directly above it says the same word twice; it stays for assistive tech. */
.content-inner > .tabs ~ section.card > .card-head > #h-list,
.content-inner > .tabs ~ section.card > .card-head > #h-report {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.content-inner > .tabs ~ section.card > .card-head:not(:has(> :not(#h-list, #h-report, [hidden]))) { display: none; }
/* the tabs belong to the head: they sit just under its hairline */
.content-inner > .screen-head ~ .tabs { margin-top: -25px; }
/* a picker written straight into the head (Reports' range) joins the pickers row, before the sub-line */
.content-inner > .screen-head > .field[data-range-wrap] { order: 1; }

/* the visitors grid runs to the content edge, not the window's */
.with-pane-main > .gridframeless { margin-right: 0; }

/* a table's last row already draws the rule its foot would draw again */
.card-foot { border-top: 0; }

/* the gallery link under Campaigns is the prototype's one tinted band: square, the column's full width, its own inset */
.galleryband { margin: 16px 0 0; padding: 16px 18px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.galleryband:hover { border-color: var(--accent-hairline); }
.galleryband-title { font-size: 14px; }
/* a column heading is one line; the column takes the width its heading needs */
table.data th { white-space: nowrap; }

/* values a reader scans are figures, in the body face with tabular numerals; mono is kept for keys and code */
table.data td .mono, table.data td .cell-wrap.mono { font-family: inherit; font-size: inherit; font-variant-numeric: tabular-nums; }
.fr-v { font-family: var(--font-heading); font-size: 28px; line-height: 1.1; font-weight: 600; }
.nr-fig-value, .fn-n { font-family: inherit; font-variant-numeric: tabular-nums; }

/* Friction's signals are KPIs, unboxed like every other figure */
.fr-signal { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

/* activity marks are outline glyphs in their tone, never filled squares */
span.rank-icon[class] { background: transparent; box-shadow: none; }
/* a report view's first block sits under its lede at the page's own spacing, not the 44px a second section takes */
[data-state-region="report"] > div > :is(.rt-grid, .fn-wrap, .ch-wrap, .bm-bar, .sq-wrap, .hm-wrap) { margin-top: 8px; }

/* ── 214.28 · Dashboard, against Dashboard_tall ─────────────────────────────────────────────────────────────── */
.georow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
.georow > * { margin-top: 0; min-width: 0; }
@media (max-width: 1200px) { .georow { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } }
.listrow { column-gap: 40px; }
.perfrow { column-gap: 32px; }
/* a card head is its title, then everything else packed to the right edge */
.card-head { justify-content: flex-start; }
.card-head > .card-title { margin-right: auto; }
/* the KPI strip's rule and the chart box are two things, with air between them */
.kpi-open { margin-top: 14px; }
.monthcol { padding-left: 0; padding-right: 0; }
.georow .devicerow { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }

/* ── 214.28 · Visitors, against Visitors_grid ───────────────────────────────────────────────────────────────── */
/* the grid needs no title of its own: the h1 names the screen and the count stands at the right of the rule */
#h-grid { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Engagement's two lines read down one edge */
.gridframeless td .cell-stack > .cell-main.num { text-align: left; }
/* Live now is the prototype's square checkbox and a count in words, its freshness on the quiet line under it */
.filterpane .livefilter-row { flex-wrap: wrap; row-gap: 0; column-gap: 8px; }
.filterpane .livetoggle input { width: 16px; height: 16px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.filterpane .livetoggle input::after {
  top: 3px; left: 5px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; border-radius: 0;
  background: transparent; transform: rotate(45deg); opacity: 0;
}
.filterpane .livetoggle input:checked { background: var(--accent-action); box-shadow: none; }
.filterpane .livetoggle input:checked::after { transform: rotate(45deg); opacity: 1; }
.filterpane [data-live-count] { background: transparent; box-shadow: none; padding: 0; color: var(--ink-quiet); font-size: 13px; letter-spacing: 0; }
.filterpane .livefilter-status { flex: 1 0 100%; padding-left: 24px; }
.filterpane .livefilter-status .field-hint { font-size: 12px; white-space: nowrap; }

/* ── 214.28 · the visitor page and drawer ───────────────────────────────────────────────────────────────────── */
/* an event's detail (its selector, its value) is the quiet line under it, never body-size text */
.vd-ev-detail { font-size: 12px; line-height: 1.4; color: var(--ink-quiet); }
/* "N events captured" is a square outlined toggle, not a pill */
button.vd-exp { border-radius: 0; background: #ffffff; box-shadow: inset 0 0 0 1px var(--hairline-strong); border: 0; }
button.vd-exp:hover { box-shadow: inset 0 0 0 1px var(--accent-hairline); }
/* the drawer's Tags label is one of its fact labels, set the same way */
.vd-tags > .field-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-quiet); font-weight: 500; }

/* ── 214.28 · the Campaigns area, against Campaigns / Campaigns_Events ─────────────────────────────────────────── */
/* the first column names the row in ink (the prototype's rows open on the name; blue is kept for links inside the row) */
table.data td:first-child > .linkbtn { color: var(--ink); font-size: 13.5px; font-weight: 500; text-align: left; }
table.data td:first-child > .linkbtn:hover { color: var(--accent-text); }
/* the list sizes its columns to what they hold, so a name is not cut short while ACTIONS keeps a sixth of the width */
[data-state-region="list"] table.data { table-layout: auto; }
[data-state-region="list"] table.data td .cell-truncate { max-width: 34ch; }
/* House rules, against Campaigns_House_rules: the controls sit at the section's own edge, and what the rule does on
   this account is the prototype's tinted note with a blue rule — its label kept as the note's eyebrow */
.hr-pair { display: block; }
.hr-pair > .hr-k:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hr-pair > .hr-k ~ .hr-k, .hr-pair > .hr-k ~ .hr-k + div { background: var(--accent-wash); border-left: 2px solid var(--accent-fill); max-width: 760px; box-sizing: border-box; }
.hr-pair > .hr-k ~ .hr-k { margin-top: 16px; padding: 12px 16px 6px; color: var(--accent-text); }
.hr-pair > .hr-k ~ .hr-k + div { padding: 0 16px 12px; }
.hr-pair > .hr-k ~ .hr-k + div .hr-li { border-bottom-color: var(--accent-hairline); }
.hr-ord-move .btn-icon, .hr-ord-move .btn { background: transparent; border-color: transparent; }
.content-inner > .screen-head .screen-sub { max-width: 120ch; }
.hr-ordlist { max-width: 900px; }

/* ── 214.28 · the editors, against Message_Editor / Campaign_Editor / Journey_Editor ─────────────────────────── */
/* the preview is a flat white page on the sunken ground: no rounded frame, no shadow */
.canvas-wrap { background: var(--surface-sunken); }
body.has-canvas iframe.canvasframe { border-radius: 0; box-shadow: 0 0 0 1px var(--hairline); outline: 0; } /* the canvas is the page stand-in: edged by a hairline, as Message Editor.dc.html edges its page mock (214.34) */
/* the name is typed in the head; its slot here exists for its error, and a section holding nothing else is not drawn */
[data-name-slot]:has(> .field-error[hidden]) { display: none; }
.editor-fields .card:has([data-name-slot] > .field-error[hidden]):not(:has(.form-grid > :not([data-name-slot]):not([hidden]))) { display: none; }
/* the journey editor's side column titles are the prototype's small tracked labels */
.jside > .card > .card-head > .card-title { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
.btn-nudge, .btn-nudge:disabled { background: transparent; border-color: transparent; font-family: var(--font-body); color: var(--ink-quiet); }
.btn-nudge:hover:not(:disabled) { color: var(--accent-text); }
.btn-nudge:disabled { color: var(--disabled-ink); }
input.input-mono::placeholder { font-family: var(--font-body); }

/* each channel tile carries its own glyph, drawn in the tile's ink (the prototype's monitor, bar, block, envelope, link) */
.chtile-mark { width: 16px; height: 16px; border: 0; background: currentColor; -webkit-mask: var(--chmark) center / contain no-repeat; mask: var(--chmark) center / contain no-repeat; color: var(--ink-quiet); }
.chtile[aria-pressed="true"] .chtile-mark { color: var(--accent-text); }
.chtile[data-chtile="popup"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2214%22/%3E%3Cpath%20d%3D%22M8%2021h8%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="banner"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%224%22/%3E%3Cpath%20d%3D%22M3%2013h18M3%2017h12%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="inline"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18M3%2019h18%22/%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%2218%22%20height%3D%226%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="feed"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%200%200-12%200c0%207-3%209-3%209h18s-3-2-3-9%22/%3E%3Cpath%20d%3D%22M13.7%2021a2%202%200%200%201-3.4%200%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="push"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2220%22/%3E%3Cpath%20d%3D%22M11%2018h2%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="sms"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="email"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22/%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22/%3E%3C/svg%3E"); }
.chtile[data-chtile="webhook"] { --chmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.7%201.7%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207l1.7-1.7%22/%3E%3C/svg%3E"); }
/* + Add condition is a small boxed button under the rows; the message actions beside the list are underlined links */
[data-add-cond] { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--ink); border: 1px solid var(--hairline-strong); padding: 6px 12px; background: #ffffff; text-decoration: none; }
[data-add-cond]:hover { border-color: var(--accent-hairline); color: var(--accent-text); }
.ced-msgacts .btn { background: transparent; border-color: transparent; padding: 0; min-height: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ced-msgacts { gap: 14px; }
.ced-steps .field > input.input[name="maxPerSession"] { max-width: 260px; }

/* ── 214.28 · section rhythm on the settings screens (Channels, Integrations, Websites) ─────────────────────────
   A stack spaces its children with its gap; a paragraph's own margins on top of it doubled every step, which put a
   section's sub-line 36px under its title. The prototype: title, the sub-line right under it, 40px between sections. */
.card-body.stack > :is(p, .card-meta, .field-hint) { margin-top: 0; margin-bottom: 0; }
.card-head:has(+ .card-body > :is(.card-meta, .lede, p):first-child) { padding-bottom: 4px; }
.stack > section.card { margin-top: 0; }
.stack > section.card ~ section.card, .stack > * + section.card { margin-top: 28px; }
.content-inner > .screen-note { max-width: 80ch; margin-bottom: 0; }
.content-inner > .stack > section:first-child { margin-top: 0; }
/* a picker in a settings body takes the width of what it holds, not the column's */
:is(.stack, .card-body) > .field > .select { max-width: 360px; }
.card-body.stack > section { margin-top: 20px; }
.card-body.stack > :is(section, div) > h3.card-title:first-child { margin-top: 0; }
.card-body.stack > section > .card-title + .card-meta, .card-body.stack > div > .card-title + .card-meta { margin-top: -8px; }

/* ── 214.28 · Websites, against Websites ────────────────────────────────────────────────────────────────────── */
#pixel-list table.data { table-layout: auto; }
#pixel-list td.num:has(.visits-spark) { white-space: nowrap; }
#pixel-list .visits-n { display: inline-block; vertical-align: middle; width: auto; margin-right: 10px; font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--ink); }
#pixel-list .visits-spark { display: inline-block; vertical-align: middle; width: 96px; }
#pixel-list .visits-spark svg :is(path, polygon)[fill]:not([fill="none"]) { fill-opacity: 0; }
#pixel-list td .cell-2line { white-space: nowrap; }
#pixel-list .row-actions { justify-content: flex-start; }
/* a vertical settings form (a stack of fields) is a form: its text boxes stay boxed, at a readable width */
:is(.stack, form.stack) > .field > input.input:not([type="search"]) { max-width: 520px; }

/* ── 214.28 · Segments, against Segments ────────────────────────────────────────────────────────────────────── */
/* a row's name, then its explanation as the quiet sub-line under it */
table.data td > strong + .cell-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--ink-quiet); max-width: 52ch; }
[data-state-region="suppression"] table.data { table-layout: auto; }
[data-state-region="suppression"] table.data :is(th, td):nth-child(3) { text-align: right; padding-right: 32px; }
[data-state-region="suppression"] table.data :is(th, td):nth-child(4) { text-align: center; }
[data-state-region="suppression"] table.data :is(th, td):last-child { text-align: right; }

/* ── 214.28 · Deliveries ────────────────────────────────────────────────────────────────────────────────────── */
/* the filter pane's fields start at the title's own edge, and its top lines up with the list's */
.with-pane > .pane .sendfilter-site { padding: 0 16px 12px 0; }
.with-pane > .pane .sendfilters { padding: 14px 16px 14px 0; }
/* an outcome in a table is a word in sentence case, whatever tone it carries */
table.data td .badge:is(.badge-success, .badge-warning, .badge-danger, .badge-neutral, .badge-accent, .badge-info) { text-transform: none; letter-spacing: 0; }

/* ── 214.28 · Team, AI, Billing, Admin ──────────────────────────────────────────────────────────────────────── */
/* with no pickers beside it, the sub-line sits under the title, centred on the actions — not dropped to a button's foot */
.content-inner > .screen-head:not(:has(form, .field, .dr, .pp-wrap, .lib-search, .headbar-search, .combo)) .screen-sub { align-self: center; padding-bottom: 0; }
/* a pane screen's first section starts level with the section list beside it */
:is(.with-pane-main, .with-pane-main > div) > section.card:first-child { margin-top: 0; }
.with-pane > .pane .pane-link[data-here] { color: var(--ink); font-weight: 600; border-left-color: var(--accent-text); }
/* Billing, against Billing: one readable column, the meters clear of the plan's own actions, body copy at the page's size */
:root:has(link[href$="/page-billing.css"]) .with-pane-main { max-width: 860px; }
:root:has(link[href$="/page-billing.css"]) .meters { margin-top: 20px; }
:root:has(link[href$="/page-billing.css"]) .card-body.stack-sm > p { font-size: 13.5px; }
/* Admin, against Admin: the staff-only mark is the prototype's amber staff strip in small, not a red warning */
.screen-title > .badge.badge-danger { background: #fff8e6; color: #8a6100; box-shadow: inset 2px 0 0 #b8860b; font-family: var(--font-body, inherit); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; vertical-align: middle; padding: 4px 10px; border-radius: 0; }
/* Admin toolbars: the control and its button share a baseline, and the printed mappings take their own line */
form.toolbar:has(> div > .field-label) { align-items: flex-end; flex-wrap: wrap; row-gap: 8px; }
form.toolbar:has(> div > .field-label) > .btn { height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; }
form.toolbar:has(> div > .field-label) > .toolbar-end { flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
/* a plan group's heading reads from the left, where the rows it heads begin */
table.data tr > th[scope="rowgroup"][colspan]:first-child:last-child { text-align: left; }
/* a switch among head or toolbar buttons is one control in a row, not a ruled settings row */
:is(.row-actions, .toolbar, .headtools) > .switch-row { border-bottom: 0; padding: 0; align-self: center; }
/* AI, a labelled group's rhythm: label, one line of explanation, then the choices, with the next group clear of it */
.fieldset:has(> legend.field-label) > p.field-hint { margin: 0; }
.card-body.stack > .stack-sm:has(> p.field-label:first-child) { margin-top: 14px; }
.card-body > .stack-sm > p.field-label + ul { margin: 0; }
/* a row's actions stay on one line; a wrapped pair reads as two rows of controls */
table.data td:last-child > .row-actions { flex-wrap: nowrap; white-space: nowrap; }
/* Team, profile and security: a fieldset's own heading reads as the tab's other section heads do, and a secret box keeps the form's measure */
.fieldset > legend:not([class]) { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--ink); padding: 0; margin: 0 0 6px; }
.fieldset:has(> legend:not([class])) > p.field-hint { margin-top: 0; }
:is(.stack, form.stack) > .field > .pw { max-width: 520px; }
/* the trouble pages' red eyebrow (Trouble.dc.html: "ERROR 500"), shared so the 404 can carry it too */
.trouble-eyebrow{margin:18px 0 -4px;font-family:var(--font-heading);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--danger-ink)}
/* 404, against Trouble's 404 state: the same left-set column as the crash page, not a centred card */
[data-state-region="notfound"] > .card-centred { text-align: left; align-items: flex-start; max-width: 520px; margin: 40px auto 0; padding: 0; }
[data-state-region="notfound"] > .card-centred > .card-title { font-size: 28px; margin: 0 0 10px; }
[data-state-region="notfound"] > .card-centred > .card-body { padding: 0; margin: 0 0 10px; font-size: 14.5px; color: var(--ink-quiet); }
[data-state-region="notfound"] > .card-centred > .panel-actions { justify-content: flex-start; margin-top: 12px; }
[data-state-region="notfound"] > .card-centred > .trouble-eyebrow { margin: 0 0 8px; color: var(--ink-quiet); }
[data-state-region="notfound"] > .card-centred > .panel-actions { margin-top: 20px; }
/* auth and trouble headlines never leave one word alone on the second line (pretty, not balance: balance shortens the first line) */
.auth-title, .card-title, .screen-title { text-wrap: pretty; }
/* Reports: a view's own section heads are the heading face, as every card title is */
.nr-h, .fr-conv-h { font-family: var(--font-heading); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
/* Paths: one page's routes follow the next at the list's own gap — the global 44px between sections made each a screen apart */
.pt-list > .pt-page { margin-top: 0; }
/* a disclosure is a quiet link with a turning chevron, never the browser's raw triangle */
.content-inner details > summary:not(.cell-wrap) { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); font-size: 12.5px; }
.content-inner details > summary:not(.cell-wrap)::-webkit-details-marker { display: none; }
.content-inner details > summary:not(.cell-wrap)::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.content-inner details[open] > summary:not(.cell-wrap)::before { transform: rotate(45deg); }
/* a switch is drawn as the prototype's checkbox, so it leads its label as a checkbox does, rather than sitting a screen-width away */
.switch-row { justify-content: flex-start; align-items: flex-start; gap: 12px; }
.switch-row > .switch { order: -1; margin-top: 2px; flex: none; }
.switch-row > .switch-row-text { flex: 1 1 auto; max-width: 96ch; }
/* explanatory copy under a card title keeps a reading measure */
.card-body > p.card-meta { max-width: 110ch; }
/* a number a person types (seconds, counts) is a figure, not code: body face with tabular numerals (§9) */
input.input.input-mono[type="number"] { font-family: var(--font-body); font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* a scrolling table contains its own visually-hidden labels: an absolute span in a nowrap action cell otherwise escapes the scroll box and scrolls the page */
.table-wrap-scroll { position: relative; }

/* ── 214.29 · round-2 review ─────────────────────────────────────────────────────────────────────── */
/* the head keeps one height with or without an action: the button bottom-aligns with the sub-line and rises beside the title (Team.dc.html head) */
.content-inner > .screen-head > :not(div:has(> .screen-title), .headtools):has(> .btn) { margin-top: -5px; }
.content-inner > .screen-head > :not(div:has(> .screen-title), .headtools):has(> .btn) > .btn { margin-top: 0; }
.content-inner > .screen-head .row-actions:has(> .btn) > .btn { margin-top: 0; }
/* a pane screen's first visible section starts level with the first pane item; later ones keep the page's section gap */
:is(.with-pane-main, .with-pane-main > div, .with-pane-main > section > div) > section.card { margin-top: 0; }
:is(.with-pane-main, .with-pane-main > div, .with-pane-main > section > div) > section.card:not([hidden]) ~ section.card { margin-top: 44px; }
/* Billing: How we charge reads as two paragraphs of one note, and each section is ruled off as Billing.dc.html does */
.card-body.stack-sm > p { margin: 0; }
:root:has(link[href$="/page-billing.css"]) .with-pane-main section.card:not([hidden]) ~ section.card { border-top: 1px solid var(--hairline); padding-top: 32px; margin-top: 36px; }
/* a field's character count sits at the end of the field it counts, not at the far edge of the column */
:is(.stack, form.stack) > .field:has(> input.input:not([type="search"])) > .field-row,
:is(.stack, form.stack) > .field:has(> input.input:not([type="search"])) { max-width: 520px; }
/* Visitors, against Visitors_grid: the filter pane is flat with only its right hairline; every picker ends on one edge,
   whether or not it carries the "=" operator; the foot's two links are quiet body-face links either side of Apply */
.filterpane .filterbar { border: 0; border-radius: 0; background: transparent; }
.filterpane .filterrow .rp-host .rp-btn { width: calc(100% - 28px); }
.filterpane .filteractions-row { gap: 10px; }
.filterpane .filteractions-row .btn-subtle { font-weight: 500; font-size: 13px; color: var(--accent-text); background: transparent; box-shadow: none; }
/* the pinned column's separating hairline is only needed once the grid scrolls sideways; wide enough, it is a stray rule */
@media (min-width: 1480px) {
  :root:has(link[href$="/page-visitors.css"]) .data tbody td:first-child::after,
  :root:has(link[href$="/page-visitors.css"]) .data thead th:first-child::after { background: transparent; }
}
/* Visitor page, against Visitor: the head's actions sit at the right edge; the side column starts level with Activity;
   an event line is regular weight, as a visit's own title is the line that leads */
.card-head > div:has(> h1.card-title) { margin-right: auto; }
.stack > :is([hidden], dialog, template):first-child + section.card { margin-top: 0; }
.vd-ev-name > strong { font-weight: 500; font-size: 13.5px; color: var(--ink); }
/* a message's outcome in a list is a state: dot and word */
.msg-meta > .msg-state { display: inline-flex; align-items: center; gap: 5px; }
.msg-meta > .msg-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.with-pane-main > section { margin-top: 0; }
/* Billing, against Billing: the plan's name large with its tag beside it, the price in the heading face, and this cycle's
   meters as full-width ruled rows with a real bar, one under the other */
:root:has(link[href$="/page-billing.css"]) .card-head > div:has(> .card-title + .badge) { display: flex; align-items: baseline; gap: 12px; }
:root:has(link[href$="/page-billing.css"]) .card-head > div > .card-title:has(+ .badge) { font-size: 30px; line-height: 1.1; }
:root:has(link[href$="/page-billing.css"]) .plan-limits strong { font-weight: 500; color: var(--ink); }
:root:has(link[href$="/page-billing.css"]) .plan-price > span:first-child { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--ink); }
:root:has(link[href$="/page-billing.css"]) .meters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
:root:has(link[href$="/page-billing.css"]) .meter { padding: 14px 0 12px; border-bottom: 1px solid var(--hairline); }
:root:has(link[href$="/page-billing.css"]) .meter-label { font-size: 13.5px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
:root:has(link[href$="/page-billing.css"]) .meter-track { height: 6px; margin: 10px 0 8px; }
:root:has(link[href$="/page-billing.css"]) .meter-fill { height: 6px; }
/* AI settings keep the prototype's 720px reading column */
:root:has(link[href$="/page-ai.css"]) .with-pane-main > section.card:first-child { max-width: 760px; }
/* every checkbox and radio draws the component's flat square or ring, not the browser's own, wherever its markup put it */
.content-inner input[type="checkbox"]:not(.check input, .switch input, .livetoggle input) {
  appearance: none; width: 15px; height: 15px; margin: 0; border: 1px solid var(--hairline-strong); border-radius: 0; background: var(--surface); cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; vertical-align: -2px;
}
.content-inner input[type="checkbox"]:not(.check input, .switch input, .livetoggle input):checked { background: var(--accent-fill); border-color: var(--accent-fill); }
.content-inner input[type="checkbox"]:not(.check input, .switch input, .livetoggle input):checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--accent-on-fill); border-bottom: 2px solid var(--accent-on-fill); transform: rotate(-45deg) translate(1px, -1px); }
.content-inner input[type="checkbox"]:not(.check input, .switch input, .livetoggle input):disabled { background: var(--disabled-fill); border-color: var(--disabled-border); cursor: not-allowed; }
.content-inner input[type="checkbox"]:not(.check input, .switch input, .livetoggle input):disabled:checked { background: var(--disabled-ink); border-color: var(--disabled-ink); }
.content-inner input[type="radio"] {
  appearance: none; width: 15px; height: 15px; margin: 0; border: 1px solid var(--hairline-strong); border-radius: 50%; background: var(--surface); cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; vertical-align: -2px;
}
.content-inner input[type="radio"]:checked { border-color: var(--accent-fill); }
.content-inner input[type="radio"]:checked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); }
.content-inner input[type="radio"]:disabled { background: var(--disabled-fill); cursor: not-allowed; }
/* a radio or checkbox group's legend sits flush with its options, with room to breathe */
fieldset.field > legend.field-label { padding: 0; margin-bottom: 8px; }
fieldset.field.stack-sm:has(> label.radio) { gap: 8px; }
/* a plain status paragraph in a settings card reads at body size, not larger than the copy around it */
.card-body.stack > p:not([class]) { font-size: 13.5px; }
/* a list that cannot be switched off says so beside its fixed box (Segments.dc.html: it says why rather than greying out) */
table.data td:has(> input[type="checkbox"]:disabled:checked) { white-space: nowrap; }
table.data td:has(> input[type="checkbox"]:disabled:checked)::after { content: "Always on"; margin-left: 8px; font-size: 12.5px; color: var(--ink-quiet); }
/* Deliveries: only the message name is bold; who saw it and why are ordinary cells (Deliveries.dc.html) */
[data-state-region="sends"] td a.cell-link, [data-state-region="sends"] td .cause > .cell-main { font-weight: 400; }
/* Websites: each row's first action takes one width, so Settings lines up down the column whatever the first one says */
#pixel-list td > .row-actions > :first-child { min-width: 62px; }
#pixel-list td > .row-actions { justify-content: flex-start; }
/* Reports: a note that decides how the view reads leads it as a callout — amber when capture is off, blue while a baseline builds */
[data-report-note][data-first] { border-top: 0; margin: 4px 0 16px; padding: 11px 14px; max-width: 76ch; font-size: 12.5px; line-height: 1.55; }
[data-report-note][data-first="off"] { background: #fff8e6; border-left: 2px solid #d98600; color: #8a6100; }
[data-report-note][data-first="thin"] { background: #f2f9fe; border-left: 2px solid #0b8fd3; color: #0b4f76; }
/* Paths and Friction keep the prototype's 820px measure, so a route's share and count sit beside its bar, on a real track */
.pt-list, .fr-signals { max-width: 820px; }
.pt-route .meter-track { height: 16px; background: #f6f9fc; }
.pt-route .meter-fill { height: 16px; }
/* Heatmaps: a sub-heading with nothing under it yet is the report's own section head, not a stray bold line */
.hm-h { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--ink); }
/* ── the three editors, against their prototypes: ONE head bar — the way back and the name on one line, the actions at
   its right, a hairline under it (Message Editor.dc.html, Campaign Editor.dc.html, Journey Editor.dc.html) ── */
:root:has(link[href$="/page-content-edit.css"], link[href$="/page-automation.css"], link[href$="/page-journey.css"])
  .content-inner:has(> .crumbs + section > .screen-head) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; column-gap: 0; }
:root:has(link[href$="/page-content-edit.css"], link[href$="/page-automation.css"], link[href$="/page-journey.css"])
  .content-inner:has(> .crumbs + section > .screen-head) > :not(.crumbs, section) { grid-column: 1 / -1; }
:root:has(link[href$="/page-content-edit.css"], link[href$="/page-automation.css"], link[href$="/page-journey.css"])
  .content-inner:has(> .crumbs + section > .screen-head) > .crumbs { grid-column: 1; grid-row: 1; margin: 0; padding: 0 16px 12px 0; display: flex; align-items: center; border-bottom: 1px solid var(--hairline); }
:root:has(link[href$="/page-content-edit.css"], link[href$="/page-automation.css"], link[href$="/page-journey.css"])
  .content-inner:has(> .crumbs + section > .screen-head) > section { display: contents; }
:root:has(link[href$="/page-content-edit.css"], link[href$="/page-automation.css"], link[href$="/page-journey.css"])
  .content-inner:has(> .crumbs + section > .screen-head) > section > .screen-head { grid-column: 2; grid-row: 1; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--hairline); align-items: center; }
:root:has(link[href$="/page-content-edit.css"], link[href$="/page-automation.css"], link[href$="/page-journey.css"])
  .content-inner:has(> .crumbs + section > .screen-head) > section > :not(.screen-head) { grid-column: 1 / -1; margin-top: 16px; }
/* Message editor: two flat panes split by one vertical hairline — no box round the canvas, none round the settings */
:root:has(link[href$="/page-content-edit.css"]) .editor-grid { gap: 0; }
:root:has(link[href$="/page-content-edit.css"]) .canvas-col > .card { border: 0; }
:root:has(link[href$="/page-content-edit.css"]) [data-settings-col] { border: 0; border-left: 1px solid var(--hairline); }
:root:has(link[href$="/page-content-edit.css"]) .canvas-col .canvas-wrap { border: 0; }
:root:has(link[href$="/page-content-edit.css"]) .canvas-col > .card > .card-head { border-bottom: 1px solid var(--hairline); }
.seg:has(> button:only-child) { border: 0; box-shadow: none; }
/* a one-option toggle is a label for the mode, not a second selected fill beside Desktop/Mobile */
.seg:has(> button:only-child) > button { background: transparent; color: var(--ink); box-shadow: none; border-color: transparent; font-weight: 600; }
/* Campaign editor: the conditions summary has no rule of its own under Add condition; fields read at the prototype's 13.5px;
   a one-digit count takes a narrow box */
form.ced .edstep div.preview { border-top: 0; padding-top: 4px; }
form.ced .ced-steps .field > :is(.select, .input:not([type="checkbox"]):not([type="radio"])) { font-size: 13.5px; }
form.ced .ced-steps .field > input.input[name="maxPerSession"] { max-width: 260px; }
:root:has(link[href$="/page-content-edit.css"]) .content-inner:has(> .crumbs + section > .screen-head) > section > :not(.screen-head) { margin-top: 0; }
/* Journey editor: section heads at the prototype's 17px, and the card body starts under the head bar at the page rhythm */
:root:has(link[href$="/page-journey.css"]) .jform .card-title, :root:has(link[href$="/page-journey.css"]) .card > .card-head > h2.card-title { font-size: 17px; }
:root:has(link[href$="/page-journey.css"]) .card-body.stack > a.linkbtn { align-self: flex-start; }
/* Messages gallery: a card's tag and its figures share one line, as Campaigns_Messages draws them */
.ccard-body { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 8px; row-gap: 8px; text-align: left; }
.ccard-body > .ccard-name { flex: 0 0 100%; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ccard-body > .cell-sub { flex: 0 0 100%; }
.ccard-body > .cell-badges { width: auto; flex: none; }
.ccard-body > .ccard-stat { width: auto; flex: 1 1 auto; }
/* count pills on tabs are legible: 11px on the prototype's grey, blue-grey on the active tab */
.tabs .badge { font-size: 11px; padding: 1px 6px; }
/* Events: the underlined search is answered by a quiet text action, not a boxed button beside it; the placeholder reads at field size */
form.evfilters > .btn-secondary { background: transparent; box-shadow: none; border-color: transparent; color: var(--accent-text); padding-inline: 4px; }
form.evfilters input.input::placeholder, .content-inner input.input[type="search"]::placeholder { font-size: 13px; }
form.evfilters > .evfilters-note { font-size: 12px; margin-left: auto; text-align: right; max-width: 48ch; }

/* 214.30 — House rules on the prototype's measure (Campaigns.dc.html): one 880px column, the
   controls, the order list and both callouts sharing a 660px right edge, 16px block heads. */
[data-house] { max-width: 880px; }
[data-house] .hr-title { font-family: var(--font-heading); letter-spacing: 0; }
[data-house] .hr-intro { font-size: 13.5px; color: var(--ink-quiet); max-width: 70ch; margin: 0 0 24px; }
[data-house] .hr-block { padding: 18px 0 20px; }
[data-house] .hr-h { font-size: 16px; }
[data-house] .hr-copy { font-size: 13px; color: var(--ink-quiet); max-width: 66ch; margin-top: 4px; }
[data-house] .hr-pair { margin-top: 14px; }
[data-house] .hr-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; max-width: 660px; }
[data-house] .hr-field { width: auto; }
[data-house] .hr-pair > .hr-k ~ .hr-k, [data-house] .hr-pair > .hr-k ~ .hr-k + div { max-width: 660px; }
[data-house] .hr-ordlist { max-width: 660px; }
[data-house] .hr-pair > div > .hr-v { font-size: 12.5px; color: var(--ink-quiet); max-width: 66ch; }

/* 214.30 — Library. The facet groups are named again (seven served headings; hidden they left 31
   unlabelled boxes in one run), and a card's actions are one weight: the looks-at-it actions as
   text, the one that takes a copy as the only filled button. */
.with-pane > .pane [data-lib-filters] .pane-title {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  margin: 20px 0 6px; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-quiet); background: transparent; border: 0;
}
.lib-actions { align-items: center; gap: 4px; }
.lib-actions .btn { flex: none; }
/* 214.30 — the look-at-it actions are the ladder's own subtle rung (design-consistency: a restyled secondary that
   renders as a subtle is two variants drawn identically) */
.lib-actions .btn-subtle { padding-inline: 0; margin-right: 12px; }
.lib-actions .btn-primary { margin-left: auto; min-width: 64px; }

/* 214.30 — a pane screen's sections are ruled apart, as AI.dc.html draws them (border-top, 28px):
   44px of white alone did not say where Identity ended and Tracking behaviour began. */
:is(.with-pane-main, .with-pane-main > div, .with-pane-main > section > div, .with-pane-main > form.settings-grid) > section.card:not([hidden]) ~ section.card:not([hidden]),
.with-pane-main > section:not([hidden]) ~ section.card:not([hidden]),
form.settings-grid > section.card:not([hidden]) ~ section.card:not([hidden]) {
  border-top: 1px solid var(--hairline); padding-top: 28px; margin-top: 40px;
}
:root:has(link[href$="/page-billing.css"]) .with-pane-main section.card:not([hidden]) ~ section.card { border-top: 1px solid var(--hairline); padding-top: 32px; margin-top: 36px; }
/* counters beside a field are a hint, not a figure */
.field-row > .field-count:not(.is-warning) { font-size: 12px; color: var(--ink-quiet); }
.field-row > .field-count.is-warning { font-size: 12px; }
:root:has(link[href$="/page-billing.css"]) body .with-pane-main :is(section, section.card:not([hidden])) ~ section.card:not([hidden]) { padding-top: 32px; margin-top: 36px; }

/* 214.30 — Integrations: the per-website half of a tab starts with its Website picker, which
   read as an orphan field under the table above. It is that half's head now — a strong rule
   (the prototype's list top) with the picker inline beside its label. */
[data-tab-pane] [data-state="ready"] > .field:first-child:has(> select.select[id$="-pixel"]) {
  display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; max-width: none;
  border-top: 1px solid var(--ink); padding-top: 16px; margin-top: 12px;
}
[data-tab-pane] [data-state="ready"] > .field:first-child:has(> select.select[id$="-pixel"]) > .field-label {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-quiet);
}
[data-tab-pane] [data-state="ready"] > .field:first-child:has(> select.select[id$="-pixel"]) > .select { width: 280px; max-width: 100%; }
/* One rhythm for the Integrations tabs: nested stacks each added a 12px margin on top of their
   gap, so a heading, a hint and a code sample sat 0, 12, 24 and 35px from what came before. The
   gap decides now; each section below the first is ruled, as the other pane screens are. */
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .stack > * { margin-top: 0; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] :is(p, .form-actions):empty { display: none; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] :is([data-state="ready"] > section.card ~ section.card, .card-body.stack > p.screen-note + * ~ :is(section, div)):not([hidden]) {
  border-top: 1px solid var(--hairline); padding-top: 28px; margin-top: 20px;
}
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .stack > h3.card-title + p.card-meta { margin-top: -4px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] div:not(.stack) > h3.card-title + p.card-meta { margin-top: 8px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .card > .card-head { min-height: 0; padding-bottom: 12px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .field:has(> select.select):not(:has(> select[id$="-pixel"])) { max-width: 520px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .field:has(> select.select):not(:has(> select[id$="-pixel"])) > select.select { width: 100%; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .switch-row { border-bottom: 0; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .stack:has(> p.field-label + pre) { gap: 6px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .card-body :is(p:not([class]), ul:not([class]) > li) { font-size: 13.5px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] > section.card:first-child + section[data-state-region] { margin-top: 28px; }
/* ...but beside boxed text fields in the same form it takes their 520px edge, so one form has one right edge (B14) */
:is(.stack, .card-body):has(> .field > :is(input.input:not([type="search"]), .pw)) > .field > .select { max-width: 520px; width: 100%; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .stack > h3.card-title:not(:first-child) { border-top: 1px solid var(--hairline); padding-top: 28px; margin-top: 12px; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] [data-state="ready"] > .field:first-child:has(> select.select[id$="-pixel"]) { margin-bottom: 12px; }

/* 214.30 — Reports › Breakdown. The prototype names the dimension picker ("Break down by", 12px
   uppercase, beside it); the select keeps its aria-label and gains the visible caption. Its three
   help sentences were three sizes, colours and measures; they are one note style (12.5px, quiet, 78ch). */
[data-state-region="report"] > .card-head > [data-by-wrap]:not([hidden]) { display: flex; flex-direction: row; align-items: center; gap: 10px; }
[data-state-region="report"] > .card-head > [data-by-wrap]:not([hidden])::before {
  content: "Break down by"; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-quiet); white-space: nowrap;
}
[data-state-region="report"] > .cmp-bar > .cmp-why,
[data-state-region="report"] > p.lede { font-size: 12.5px; line-height: 1.55; color: var(--ink-quiet); max-width: 78ch; }
[data-state-region="report"] > .cmp-bar > .cmp-lead { font-size: 12.5px; }

/* 214.30 — Retention as the prototype's heat grid: centred, bold, tinted by share in five steps,
   cells parted by white. A week that has not happened stays a quiet dash on white. */
.rt-grid table.data :is(th, td):nth-child(n+3) { text-align: center; }
.rt-grid table.data td[data-heat] { font-weight: 600; border: 1px solid var(--surface, #fff); color: #0a2540; }
.rt-grid table.data td[data-heat="1"] { background: #eaf3f8; }
.rt-grid table.data td[data-heat="2"] { background: #cfe3ef; }
.rt-grid table.data td[data-heat="3"] { background: #9cc9e0; }
.rt-grid table.data td[data-heat="4"] { background: #5aa9d6; }
.rt-grid table.data td[data-heat="5"] { background: #0b4f76; color: #fff; }
.rt-grid table.data td.rt-none { color: var(--ink-quiet); } /* the prototype's #c9d2dc dash is 1.5:1 — contrast holds text to 4.5 */
.rt-grid table.data thead th { border-bottom: 1px solid var(--ink); }
[data-state-region="report"] > .cmp-bar > .cmp-why { max-width: none; padding-right: max(0px, calc(100% - 78ch)); box-sizing: border-box; }
.rt-grid table.data { width: auto; min-width: 640px; }
.rt-grid table.data :is(th, td):nth-child(n+3) { min-width: 72px; padding-inline: 8px; }
/* Funnel's controls on the prototype's tinted toolbar band (Reports.dc.html tabFunnel) */
.fn-wrap > form.fn-ctl { align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.fn-wrap > form.fn-ctl > .fn-field { flex-direction: row; align-items: center; gap: 10px; margin-right: 8px; }
.fn-wrap > form.fn-ctl > .fn-field > .field-label { margin: 0; font-size: 13px; color: var(--ink-body); white-space: nowrap; }
.fn-wrap > .fn-list { max-width: 640px; }

/* 214.30 — visitor panel: the visit's event count is quiet text with its caret (the prototype's
   "2 events ⌄"), not a boxed chip; the facts column ends on a rule like every fact above it. */
button.vd-exp { box-shadow: none; background: transparent; padding: 2px 0; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-quiet); }
button.vd-exp:hover:not(:disabled) { box-shadow: none; color: var(--accent-text); }
.vd-facts > .vd-fact:last-child { border-bottom: 1px solid var(--hairline); }
/* A1 — a head select is the height of the head's picker buttons (30px), so every dateline control shares one baseline, not just one underline */
:root:not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"])) .content-inner > .screen-head select.select:not([multiple]) { min-height: 30px; height: 30px; padding-block: 5px; }

/* 214.30 — Channels: each working surface is named with its icon on a tinted tile, as Channels.dc.html draws it. */
.chwork-name { display: flex; align-items: center; gap: 10px; }
.chwork-tile[data-working-row] .chwork-name::before { content: ""; flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 1px solid var(--accent-hairline); background: var(--accent-wash) no-repeat center / 13px 13px; }
.chwork-tile[data-working-row="popup"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2213%22 rx=%221%22/%3E%3Cpath d=%22M8 21h8M12 17v4%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="banner"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%221%22/%3E%3Cpath d=%22M3 9h18%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="inline"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%221%22/%3E%3Cpath d=%22M8 9h8M8 13h8M8 17h5%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="email"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%221%22/%3E%3Cpath d=%22m3 7 9 6 9-6%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="webhook"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="feed"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9%22/%3E%3Cpath d=%22M13.7 21a2 2 0 0 1-3.4 0%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="push"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%222%22 width=%2210%22 height=%2220%22 rx=%222%22/%3E%3Cpath d=%22M11 18h2%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="alerts"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="sms"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3Cpath d=%22M9 10.5h.01M12 10.5h.01M15 10.5h.01%22/%3E%3C/svg%3E"); }
.chwork-tile[data-working-row="callbacks"] .chwork-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230a6fa6%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z%22/%3E%3C/svg%3E"); }
/* C4 — a file field is its button and the file's name, not a box around a box; the button is a secondary button like its neighbours */
input.input[type="file"] { border: 0; box-shadow: none; padding: 0; min-height: 0; height: auto; background: transparent; }
input[type="file"]::file-selector-button { font-family: var(--font-heading); font-weight: 600; font-size: 13px; padding: 8px 12px; color: var(--ink); }
/* Channels: an empty status line is not a paragraph of space, and each section below the tiles is ruled apart like every pane screen */
:root:has(section[data-state-region="channels"]) .content-inner section.card :is(p, .form-actions):empty { display: none; }
:root:has(section[data-state-region="channels"]) .content-inner :is([data-state="ready"] > section.card, .content-inner > section.card):not(:has(.chwork)):not([hidden]) { border-top: 1px solid var(--hairline); padding-top: 28px; margin-top: 12px; }
:root:has(section[data-state-region="channels"]) .content-inner [data-state="ready"] > section.card:has(.chwork) + section.card { border-top: 0; padding-top: 8px; }
:root:has(section[data-state-region="channels"]) .content-inner section.card .field:has(> :is(input.input:not([type="search"]), .pw, .field-row + input.input)) { max-width: 520px; }
/* A field-row that holds fields (not a label and its counter) lays them left to right, not pushed to the two edges */
.content-inner div.field-row:has(> .field) { justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; }
.content-inner div.field-row:has(> .field) > .field { min-width: 200px; }
/* 214.13 — Friction's signals as the prototype's ruled list (Reports.dc.html tabFriction): name · count · worst */
[data-state-region="report"] .fr-signals { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink); max-width: 820px; }
[data-state-region="report"] .fr-signals > .fr-signal { display: grid; grid-template-columns: 150px 96px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
[data-state-region="report"] .fr-signal > .fr-k { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
[data-state-region="report"] .fr-signal > .fr-v { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.2; }
[data-state-region="report"] .fr-signal > .fr-worst { font-size: 12.5px; color: var(--ink-body); }

/* ── 214.32 — third visual review ─────────────────────────────────────────────────────────────── */
/* a badge that already draws its own dot element never adds the painted one too (Websites: "● ● Active") */
.badge:has(> .badge-dot)::before { content: none !important; }
/* Journey editor: the side pane's heads are the prototype's 11px eyebrow, not the main column's 17px section head */
:root:has(link[href$="/page-journey.css"]) .jside .card > .card-head > h2.card-title { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
/* ...the steps start at the page rhythm under the head bar, and what depends on the journey stays in the main column, ruled off from the section above it */
:root:has(link[href$="/page-journey.css"]) section[data-state-region="editor"] > div > form.jform { margin-top: 0; }
:root:has(link[href$="/page-journey.css"]) section[data-state-region="editor"] > div > form.jform ~ .card { max-width: 980px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); }
/* Team (Team.dc.html): the sections sit in an 840px column; Your profile is one ruled stack — the photo tile and its
   actions, name and phone across a 620px row, then Password and the other sections each under a hairline at 15px */
:root:has(link[href$="/page-team.css"]) .with-pane-main { max-width: 840px; }
.photo-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.photo-tile { width: 76px; height: 76px; flex: none; display: grid; place-items: center; margin-right: 16px; background: #e1effa; color: #0b4f76; font-family: var(--font-heading); font-size: 26px; font-weight: 600; object-fit: cover; }
.photo-tile[hidden] { display: none; }
:root:has(link[href$="/page-team.css"]) form[data-form="profile"].form-grid { grid-template-columns: minmax(0, 301px) minmax(0, 301px) minmax(0, 1fr); column-gap: 18px; }
:root:has(link[href$="/page-team.css"]) form[data-form="profile"] > :is(.field:has(> .photo-row), .fieldset, .form-actions, .field-error) { grid-column: 1 / -1; }
:root:has(link[href$="/page-team.css"]) form[data-form="profile"] > .fieldset { border-top: 1px solid var(--hairline); padding-top: 24px; margin-top: 8px; }
:root:has(link[href$="/page-team.css"]) form[data-form="profile"] > .fieldset > .field { max-width: 340px; }
:root:has(link[href$="/page-team.css"]) form[data-form="profile"] > .fieldset > legend { float: left; width: 100%; font-family: var(--font-body); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
:root:has(link[href$="/page-team.css"]) form[data-form="profile"] > .fieldset > legend + * { clear: both; }
:root:has(link[href$="/page-team.css"]) [data-panel="profile"] section.card:not([data-state-region]) > .card-head .card-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; }
:root:has(link[href$="/page-team.css"]) [data-panel="profile"] form[data-form="email"].form-grid { grid-template-columns: minmax(0, 301px) minmax(0, 301px) minmax(0, 1fr); column-gap: 18px; }
:root:has(link[href$="/page-team.css"]) [data-panel="profile"] form[data-form="email"].form-grid > :is(.form-actions, .field-error) { grid-column: 1 / -1; }
/* Team roster: a role nobody can change here reads as a tag, not a dead underlined select; the seat count is a dot and words */
:root:has(link[href$="/page-team.css"]):not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"])) .content-inner [data-state-region="team"] table td select.select:disabled:not([multiple]) {
  appearance: none; -webkit-appearance: none; background: var(--surface-sunken); background-image: none; border: 0; min-height: 0; height: auto;
  width: auto; padding: 3px 8px; font-size: 12px; color: var(--ink-soft, #3c4257); opacity: 1; cursor: default; }
:root:has(link[href$="/page-team.css"]) [data-state-region="team"] > .card-head .badge-neutral { background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 12.5px; letter-spacing: 0; color: var(--accent-text); }
:root:has(link[href$="/page-team.css"]) [data-state-region="team"] > .card-head .badge-neutral::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* the preference centre's broken-link page names no website (the page is the visitor's, never the product's), so its
   heading takes the line the other signed-out pages give their heading under the brand */
.authcard[data-preferences-invalid] { padding-top: 60px; }
/* Campaigns: the message a row shows is an accent link, regular weight; the gallery band leads with its icon tile */
[data-block-automation] td a.cell-link { color: var(--accent-text); font-weight: 400; text-decoration: none; }
[data-block-automation] td a.cell-link:hover { text-decoration: underline; }
.galleryband { display: flex; align-items: center; gap: 14px; }
.galleryband::before { content: ""; width: 32px; height: 32px; flex: none; border: 1px solid var(--hairline); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230a6fa6' stroke-width='1.2'%3E%3Crect x='2' y='3' width='12' height='10'/%3E%3Cpath d='M2 6h12M5 9h4'/%3E%3C/svg%3E") center / 16px no-repeat; }
.galleryband-go { margin-left: auto; }
/* Webhooks: the tab's standing sentence above the list; the secret's hint is quiet monospace words, not a filled chip */
[data-state-region="list"] > p.screen-note[data-list-intro] { max-width: 74ch; margin: 4px 0 16px; font-size: 13px; line-height: 1.5; }
code.chip.secret-hint { background: transparent; border: 0; box-shadow: none; padding: 0; font-size: 12.5px; color: var(--ink-quiet); }
/* Events: who uses an event is quiet words (Campaigns_Events), the kind a small quiet letter before each name */
[data-event-row] td .badge:has(> .kind-mark) { background: transparent; box-shadow: none; border: 0; padding: 0; margin-right: 10px; font-size: 12.5px; letter-spacing: 0; color: var(--ink-quiet); gap: 4px; }
[data-event-row] td .badge > .kind-mark { background: transparent; border: 1px solid var(--hairline); color: var(--ink-quiet); font-size: 9px; width: 14px; height: 14px; }
/* Campaign editor: the intro sits at the page rhythm under the head bar, not a band below it */
:root:has(link[href$="/page-automation.css"]) .content-inner section[data-state-region="editor"] > div:has(> p.lede):not(#no-id) { margin-top: 0 !important; }
/* prose keeps a reading measure (~80ch) however wide its card: foot notes keep their full-width rule and wrap inside it,
   hints and notes simply stop at the measure (Reports, Campaigns, Segments, Website settings) */
.content-inner :is(div, p).card-foot:not([data-report-note]):not(:has(button, a, nav, select, input)) { padding-right: max(0px, calc(100% - 80ch)); }
.content-inner :is(p.field-hint, p.screen-note) { max-width: 80ch; }
/* Friction: the signal list closes on its own rule, so the section after it is spaced, not ruled again */
section.fr-conv { border-top: 0; margin-top: 32px; padding-top: 0; }
/* Visitors filter pane: every picker's chevron sits on the one right edge, whether or not an "=" follows it */
/* 214.33 — every combobox ends its chevron where a select's `right 1px center` ends it */
.screen-head .combo-btn, .filterpane .combo-btn, .filterpane .filterrow .combo-btn { padding-right: 1px; }
.filterpane .rp-value { color: var(--ink); }
/* Visitor page: the head's actions sit on the name's line, top right (Visitor.dc.html), not halfway down the facts */
[data-state-region="visitor"] section.card > .card-head:has(> .row > .btn-primary) { align-items: flex-start; }
[data-state-region="visitor"] section.card > .card-head:has(> .row > .btn-primary) > .row { margin-top: 2px; }
/* Visitor page, Identities: kind and value are one boxed row, and Add is a text action on the column's left edge */
form[data-person-add] .row { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
:root:not(:has(link[href$="/page-automation.css"], link[href$="/page-content-edit.css"], link[href$="/page-journey.css"])) .content-inner form[data-person-add] select.select:not([multiple]) {
  flex: 0 0 116px; width: 116px; height: 36px; min-height: 36px; padding: 0 26px 0 10px; border: 1px solid var(--hairline-strong, #cfd7df); background-color: #fff; }
form[data-person-add] .row > input.input { flex: 1 1 140px; min-width: 0; height: 36px; }
form[data-person-add] .row > .btn-subtle { flex-basis: 100%; justify-content: flex-start; padding-inline: 0; }
/* Suppression: every list's switch says its state in words on one left edge — Always on, On or Off (Segments.dc.html) */
[data-suppression-table] tr > :is(th, td):nth-child(4) { text-align: left !important; white-space: nowrap; }
[data-suppression-table] td:has(> input[data-toggle-list])::after { vertical-align: middle; }
[data-suppression-table] td:has(> input[data-toggle-list]:not(:disabled))::after { margin-left: 8px; font-size: 12.5px; color: var(--ink-quiet); }
[data-suppression-table] td:has(> input[data-toggle-list]:not(:disabled):checked)::after { content: "On"; }
[data-suppression-table] td:has(> input[data-toggle-list]:not(:disabled):not(:checked))::after { content: "Off"; }
[data-suppression-table] td > input[data-toggle-list] { vertical-align: middle; }
/* Channels: a card's state sentence reads at body size, not as a lead paragraph */
section[data-state-region="channels"] .card-body.stack > p:not([class]) { font-size: 13.5px; color: var(--ink-body); }
/* date fields: the browser's calendar glyph is quiet, as a select's chevron is */
input.input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
/* Website settings (Websites.dc.html): the sections sit in a 760px column, and each on/off setting is a ruled row with
   its square switch on the right — track and knob, not the list screens' checkbox */
:root:has(link[href$="/page-pixel.css"]) .with-pane-main { max-width: 760px; }
:root:has(link[href$="/page-pixel.css"]) .switch-row { justify-content: space-between; gap: 24px; }
:root:has(link[href$="/page-pixel.css"]) .switch-row > .switch { order: 2; width: 38px; height: 22px; margin-top: 0; position: relative; }
:root:has(link[href$="/page-pixel.css"]) .switch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
:root:has(link[href$="/page-pixel.css"]) .switch .switch-track { position: absolute; inset: 0; width: auto; height: auto; background: #fff; box-shadow: inset 0 0 0 1px #c9d2dc; }
:root:has(link[href$="/page-pixel.css"]) .switch .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border: 0; background: #c9d2dc; transform: none; opacity: 1; transition: left .15s ease; }
:root:has(link[href$="/page-pixel.css"]) .switch input:checked + .switch-track { background: var(--accent-action); box-shadow: none; }
:root:has(link[href$="/page-pixel.css"]) .switch input:checked + .switch-track::after { left: 19px; background: #fff; transform: none; }
@media (prefers-reduced-motion: reduce) { :root:has(link[href$="/page-pixel.css"]) .switch .switch-track::after { transition: none; } }
/* signed-out headlines: a phrase that must not be split across lines, so no word is left alone on the last one */
.keep-together { white-space: nowrap; }
/* the trouble page's explanation follows its headline as the other signed-out pages' sub-lines do */
body .authcard.w-trouble > .authhead + p.auth-sub { margin-top: -12px; }
/* "Forgot password?" is a quiet link beside its label, regular weight */
.field-row > a.row-action[href="/forgot"] { font-weight: 400; }
/* prose in a card keeps a reading measure */
.content-inner .card-body > p:not([class]) { max-width: 80ch; }
/* AI settings: the first question under the card's title is a 15px subsection head, not a second title stacked on it;
   the stored-key sentence reads at body size */
:root:has(link[href$="/page-ai.css"]) section[data-state-region="settings"] form.card-body > .fieldset:first-child > legend.field-label { font-family: var(--font-body); font-size: 15px; font-weight: 600; margin-top: 6px; }
:root:has(link[href$="/page-ai.css"]) section[data-state-region="settings"] p.card-body { font-size: 13.5px; color: var(--ink-body); }
/* Bug reports: the list's own name is a quiet label over it, so the screen does not stack three headings */
section.card[data-state-region="bugs"] > .card-head > h2.card-title { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
/* Integrations: tables and lists keep the prototype's 980px measure rather than the full content width */
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] { max-width: 980px; }
/* Integrations: a tab's intro is followed at the section rhythm, and a section whose body opens on a switch row starts it
   as close under the heading as one that opens on words */
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] > p.screen-note + section { margin-top: 20px !important; }
:root:has(nav[aria-label="Integration sections"]) [data-tab-pane] .card-body.stack > .switch-row:first-child { padding-top: 0; }
/* a live-polling note in a card head is a dot and words, not a filled chip (Admin → Jobs) */
[data-list-meta] > .badge-neutral:has(> .badge-dot) { background: transparent; box-shadow: none; padding: 0; gap: 6px; font-size: 12.5px; letter-spacing: 0; color: var(--ink-quiet); }
[data-list-meta] > .badge-neutral > .badge-dot { background: var(--accent-action); }
/* Library: the favourite star is a flat square on the artwork, its border doing the separating a shadow did */
:root:has(link[href$="/page-library.css"]) .lib-star { border-radius: 0; box-shadow: none; border-color: var(--hairline-strong, #cfd7df); }

/* ── 214.33 · fourth pass: what the full verify found ─────────────────────────────────────────────
   The visitor timeline's event marks are the prototype's 24px ROUNDED SQUARES (Industry Console,
   `gm-ev`: radius 6px, neutral-100 ground, neutral-200 edge), each kind keeping its own ink, with
   the connector passing BEHIND them. The flat-glyph rule above is for ranked lists, not this. */
/* The mark's own corner is the prototype's 6px wherever it is boxed; on the flat ranked lists it has
   no ground and no edge, so the corner draws nothing there. (--r-sm is 0 under Industry.) */
.rank-icon { border-radius: 6px; }
.vd-evs .vd-ev > span.rank-icon[class] {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--neutral-bg); border: 1px solid var(--hairline);
  box-shadow: 0 0 0 3px var(--surface);
}
.vd-evs .vd-ev::before { left: 11px; width: 1px; }
.vd-evs .vd-ev:first-child::before { top: 12px; }
.vd-evs .vd-ev:last-child::before { height: 12px; }
/* The filter rail is the viewport's height, not its content's: sized by content, opening a group
   pushed Save / Apply / Reset down the screen (26.5 — the action row does not move at all). */
.with-pane > .pane.filterpane { height: calc(100dvh - var(--head-h, 96px) - 60px); } /* ends 8px above the page foot, which is fixed over the scroller */
/* Visitors (TESTS 3.11): a row's highlight bleeds to both content edges — the filter rail's rule on the
   left and the content column's edge on the right — as the prototype's `margin-inline:-24px -32px` with
   matching padding does. The scroller takes the negative margin and the first and last cells take the
   same padding back, so no cell's content moves. */
.gridframeless .table-wrap-scroll:has(> table.data > tbody[data-rows]) { margin-inline: -24px; }
.gridframeless table.data:has(> tbody[data-rows]) col.col-check { width: 58px; }
.gridframeless table.data:has(> tbody[data-rows]) col.col-msgs { width: 124px; }
.gridframeless table.data:has(> tbody[data-rows]) :is(th, td):first-child { padding-left: 24px; }
.gridframeless table.data:has(> tbody[data-rows]) :is(th, td):last-child { padding-right: 24px; }
.gridframeless table.data:has(> tbody[data-rows]) .col-msgs-cell > .rowact { right: 24px; }
/* The range control moved to the LEFT of the head (the dateline), so its panel opens rightwards from the
   button; right-aligned, as v5 had it at the head's right end, it slid under an expanded rail. */
.content-inner > .screen-head .dr-pop { left: 0; right: auto; }
/* The dateline's note gives way before the head's buttons do: sized to its full sentence it pushed
   Refresh / Live now / View visitors onto a second line at 1200px with the rail open, or as soon as a
   custom range lengthened it. It takes the room that is left and wraps its own words inside it. */
.content-inner > .screen-head .screen-sub { flex: 999 1 0; min-width: 180px; }
/* Websites: the list's header row sits 8px under the head rule, as the prototype draws it (51.6) */
:root:has(link[href$="/page-pixels.css"]) .content-inner > .screen-head ~ section:first-of-type { margin-top: -16px; }
/* the drawer's Top events rows carry the same boxed mark, at the prototype's 26px (`gm-tev`); each kind keeps its ink */
.vd-panel .vd-act > span.rank-icon[class] { width: 26px; height: 26px; border-radius: 6px; background: var(--neutral-bg); border: 1px solid var(--hairline); }

/* ── 214.34 · the final regression review ──────────────────────────────────────────────────────────
   Prose never leaves one word alone on its last line — notes, hints, cells and callouts, as the headlines already do. */
.content-inner :is(p, li, dd, td, label, .field-hint, .screen-note, .card-foot), .authcard :is(p, .field-hint) { text-wrap: pretty; }
/* The head's rule stops at the content gutters, as every prototype draws it (the frozen head's white still spans the
   scroller, so rows scrolling under it stay hidden). Painted in the border's own pixel, so no geometry moves. */
.content-inner > .screen-head {
  border-bottom-color: transparent;
  background: linear-gradient(var(--hairline), var(--hairline)) no-repeat, #ffffff;
  background-origin: border-box;
  background-size: calc(100% - 2 * var(--pad-content)) 1px, auto;
  background-position: var(--pad-content) 100%, 0 0;
}
/* Reports hides its crumb trail (214.28); a hidden trail must not leave the "under a crumb" head spacing behind */
.content-inner > .crumbs[hidden] + .screen-head { margin-top: calc(var(--pad-content-top) * -1); padding-top: 22px; }
/* The crash page: the eyebrow sits under the logo at the prototype's step, and the support note closes the page under a rule */
body .authcard.w-trouble .authhead > .trouble-eyebrow { margin-top: 1px; }
body .authcard.w-trouble > [data-trouble-note] { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 13px; line-height: 1.6; color: var(--ink-quiet); }
/* Sign in: the captcha note sits under the button, above the rule; the way to an account is under it (Auth.dc.html) */
body .authcard form > p[data-captcha-note] { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-quiet); }