/* Wiggle BOS compact design system (item 22; docs/plans/2026-09-27-ui-design-system.md).
   Loaded after admin.css and the bos.css skin, only where the Worker sets html[data-ui="v2"] (src/brand.js uiV2:
   UI_V2 on, and the pages it covers so far). Adds rules only: no class or id is renamed, no element is shown or
   hidden that the page did not show or hide. Tokens first, then shared components, then the three screens. */

html[data-ui="v2"] {
  /* Color */
  --c-app: #061A2E; --c-rail: #081F37; --c-surface-1: #0A2540; --c-surface-2: #0F2F50; --c-surface-3: #15395F;
  --c-border: #16385A; --c-border-strong: #275482;
  --c-text: #F2F6FA; --c-text-2: #A9BFD3; --c-text-3: #7F9BB6;
  --c-primary: #00B4FF; --c-primary-hover: #33C3FF; --c-on-primary: #0A2540;
  --c-success: #22E3A7; --c-warning: #FFB547; --c-danger: #FF6B6B; --c-info: #7CC4FF;
  /* Type */
  --t-page: 26px; --t-section: 18px; --t-panel: 15px; --t-body: 14px; --t-small: 13px; --t-meta: 12px; --t-label: 11px; --t-kpi: 24px;
  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  /* Shape */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --e-1: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);   /* panels: a hair of lift, no glow */
  --e-2: 0 4px 16px rgba(0,0,0,.35); --e-3: 0 12px 40px rgba(0,0,0,.5);
  --h-control: 32px; --h-control-sm: 28px;
}
html[data-ui="v2"], html[data-ui="v2"] body { background: var(--c-app); color: var(--c-text); font-size: var(--t-body); line-height: 1.43; }

/* ── Focus: always visible, one style ── */
html[data-ui="v2"] :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--c-primary) !important; outline-offset: 2px; }

/* ── Rail ── */
html[data-ui="v2"] .side-nav { background: var(--c-rail); border-right: 1px solid var(--c-border); }
html[data-ui="v2"] .side-nav-link { min-height: 32px; padding: 6px 10px !important; gap: 10px; border-radius: var(--r-md); font-size: var(--t-body); font-weight: 500; line-height: 20px; color: var(--c-text-2); position: relative; }
html[data-ui="v2"] .side-nav-link svg { width: 16px; height: 16px; }
html[data-ui="v2"] .side-nav-link .side-nav-av { width: 20px; height: 20px; }
html[data-ui="v2"] .side-nav-link:hover { background: var(--c-surface-2); color: var(--c-text); }
html[data-ui="v2"] .side-nav-link.active { background: var(--c-surface-3) !important; color: var(--c-text) !important; font-weight: 600; }
html[data-ui="v2"] .side-nav-link.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--c-primary); }
html[data-ui="v2"] .side-nav-link.active svg { stroke: var(--c-primary) !important; }
html[data-ui="v2"] .side-nav-head { font-size: var(--t-label); letter-spacing: 0.08em; color: var(--c-text-3); padding: 12px 10px 4px; min-height: 0; }
html[data-ui="v2"] .side-nav-head:hover { color: var(--c-text-2); }
html[data-ui="v2"] .side-nav-group { margin-top: 2px; }
html[data-ui="v2"] .side-nav-items, html[data-ui="v2"] .side-nav-pinned { gap: 1px; }
html[data-ui="v2"] .side-nav-sub { padding-left: 16px; border-left: 1px solid var(--c-border); margin-left: 18px; }
html[data-ui="v2"] .side-nav-sub .side-nav-link { font-size: var(--t-small); min-height: 28px; padding: 4px 10px !important; }

/* ── Page header and the helper links (public/ui.js) ── */
html[data-ui="v2"] .ui-tools { gap: var(--s-4); margin: var(--s-1) 0 0; }
html[data-ui="v2"] .ui-tools button { font-size: var(--t-small); color: var(--c-text-3); text-decoration: none; }
html[data-ui="v2"] .ui-tools button:hover { color: var(--c-text); text-decoration: underline; }
html[data-ui="v2"] .ui-crm-bar { margin: 0 0 var(--s-2); }
html[data-ui="v2"] .ui-help { max-width: none; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-1) !important; }
html[data-ui="v2"] .ui-help-what { font-size: var(--t-body); margin: 0 0 var(--s-1); }
html[data-ui="v2"] .ui-help-eg, html[data-ui="v2"] .ui-help-terms dd, html[data-ui="v2"] .ui-help-terms dt { font-size: var(--t-small); }
html[data-ui="v2"] .ui-help-eg { margin: 0 0 var(--s-2); }
html[data-ui="v2"] .ui-help-terms { gap: 2px; margin: 0 0 var(--s-3); }
html[data-ui="v2"] .ui-head .admin-page-title, html[data-ui="v2"] .admin-page-title, html[data-ui="v2"] .page-title { font-size: var(--t-page) !important; line-height: 32px !important; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--s-1); }
html[data-ui="v2"] .admin-page-sub, html[data-ui="v2"] .ui-head .admin-page-sub { font-size: var(--t-small); color: var(--c-text-2); }

/* ── Buttons: primary, secondary, tertiary, destructive ── */
html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn, .btn-sm, .assist-send, .needs .act, .gs-item .gs-side button:not(.gs-skip)) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-control); height: auto; padding: 5px 12px !important;
  border-radius: var(--r-md) !important; font-family: inherit; font-size: var(--t-small) !important; font-weight: 500 !important; line-height: 20px; letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
/* Primary */
html[data-ui="v2"] :is(.btn-a, .btn-action.primary, .ui-btn.primary, .assist-send) { background: var(--c-primary) !important; border: 1px solid var(--c-primary) !important; color: var(--c-on-primary) !important; }
html[data-ui="v2"] :is(.btn-a, .btn-action.primary, .ui-btn.primary, .assist-send):hover { background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important; }
/* Secondary */
html[data-ui="v2"] :is(.btn-b, .btn-action:not(.primary), .ui-btn:not(.primary), .needs .act, .gs-item .gs-side button:not(.gs-skip)) { background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; }
html[data-ui="v2"] :is(.btn-b, .btn-action:not(.primary), .ui-btn:not(.primary), .needs .act, .gs-item .gs-side button:not(.gs-skip)):hover { background: var(--c-surface-3) !important; border-color: var(--c-text-3) !important; }
html[data-ui="v2"] :is(.btn-b.on) { background: var(--c-surface-3) !important; border-color: var(--c-primary) !important; }
/* Tertiary (text) */
html[data-ui="v2"] :is(.ui-link, .assist-clear, .gs-skip, .needs .quiet, .gs-foot button) { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0; font-size: var(--t-small) !important; font-weight: 500; color: var(--c-text-3) !important; text-decoration: none !important; cursor: pointer; }
html[data-ui="v2"] :is(.ui-link, .assist-clear, .gs-skip, .needs .quiet, .gs-foot button):hover { color: var(--c-text) !important; text-decoration: underline !important; }
/* Disabled */
html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .assist-send):disabled { opacity: .45; cursor: not-allowed; }
/* Destructive: buttons the pages mark as such */
html[data-ui="v2"] :is(.btn-b.danger, .btn-action.danger, .btn-b[data-danger], button.danger):not(#ds) { color: var(--c-danger) !important; }
/* Small, in rows and cards */
html[data-ui="v2"] :is(table .btn-b, table .btn-a, .btn-sm, .needs .act, .gs-item .gs-side button:not(.gs-skip), .cn .btn-action) { min-height: var(--h-control-sm); padding: 3px 10px !important; font-size: var(--t-meta) !important; }

/* ── Inputs ── */
html[data-ui="v2"] :is(input[type=text], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=email], input[type=url], input[type=search], input[type=password], input[type=tel], select) {
  min-height: var(--h-control); height: var(--h-control); padding: 5px 10px !important; font-size: var(--t-body) !important; line-height: 20px; border-radius: var(--r-md) !important;
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; box-sizing: border-box; }
html[data-ui="v2"] select { padding-right: 28px !important; }
html[data-ui="v2"] textarea { padding: 8px 10px !important; font-size: var(--t-body) !important; line-height: 20px; border-radius: var(--r-md) !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; }
html[data-ui="v2"] :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--c-text-3) !important; }
html[data-ui="v2"] :is(input, select, textarea):focus { outline: 2px solid var(--c-primary) !important; outline-offset: 0; border-color: var(--c-primary) !important; }
html[data-ui="v2"] :is(input, textarea)::placeholder { color: var(--c-text-3) !important; }
html[data-ui="v2"] input[type=checkbox], html[data-ui="v2"] input[type=radio] { accent-color: var(--c-primary); width: 16px; height: 16px; }
html[data-ui="v2"] .field { margin: 0 0 var(--s-3); }
html[data-ui="v2"] .field > label, html[data-ui="v2"] label.lbl { display: block; font-size: var(--t-meta) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-text-2) !important; margin: 0 0 var(--s-1); }
html[data-ui="v2"] .hint { font-size: var(--t-meta) !important; line-height: 16px; color: var(--c-text-3) !important; margin-top: var(--s-1); }
html[data-ui="v2"] .hint.err { color: var(--c-danger) !important; }
html[data-ui="v2"] .row2, html[data-ui="v2"] .row3 { gap: var(--s-3) !important; }

/* ── Badges ── */
html[data-ui="v2"] :is(.st-pill, .badge, .pill) { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--t-meta) !important; font-weight: 500; letter-spacing: 0; text-transform: none; background: rgba(169,191,211,.12) !important; color: var(--c-text-2) !important; border: 0 !important; }
html[data-ui="v2"] .st-pill.on { background: rgba(34,227,167,.12) !important; color: var(--c-success) !important; }
html[data-ui="v2"] .st-pill.warn { background: rgba(255,181,71,.12) !important; color: var(--c-warning) !important; }

/* ── Panels ── */
html[data-ui="v2"] :is(.panel, .card, .box) { background: var(--c-surface-1) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; padding: var(--s-4); box-shadow: none; }

/* ── Priority tiers (pass 2): one system for any list of things to do. data-tier="1" urgent or overdue,
   "2" action required, "3" for your information. Cues are quiet: a left edge, title weight, a short reason line. ── */
html[data-ui="v2"] [data-tier] { border-left: 3px solid transparent; }
html[data-ui="v2"] [data-tier="1"] { border-left-color: var(--c-danger) !important; }
html[data-ui="v2"] [data-tier="2"] { border-left-color: rgba(0,180,255,.45) !important; }
html[data-ui="v2"] [data-tier="3"] { border-left-color: transparent !important; }
html[data-ui="v2"] [data-tier] .why { font-size: var(--t-meta); font-weight: 600; letter-spacing: 0; }
html[data-ui="v2"] [data-tier="1"] .why { color: var(--c-danger); }
html[data-ui="v2"] [data-tier="2"] .why { color: var(--c-text-2); }
html[data-ui="v2"] [data-tier="3"] .why { color: var(--c-text-3); font-weight: 500; }
/* The dot belongs to the label, so a wrapped detail never starts its line with it (phone width). */
html[data-ui="v2"] [data-tier] .why:has(+ .for)::after { content: '\00b7'; margin: 0 6px; color: var(--c-text-3); }
html[data-ui="v2"] [data-tier] .for { color: var(--c-text-3); }
html[data-ui="v2"] [data-tier="3"] .t { font-weight: 500 !important; color: var(--c-text-2) !important; }

/* ── Interaction states (pass 2, phase 5): one set for every shared component. Each state also answers to an .is-*
   class, used only by the reference sheet (/brand/ds-states.html) so it shows what the pointer and keyboard do. ── */
/* Buttons: hover lifts one surface step; pressed goes back down; focus is the ring; busy shows a spinner and waits */
html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn, .assist-send):active:not(:disabled), html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn, .assist-send).is-active { transform: translateY(1px); filter: brightness(.94); }
html[data-ui="v2"] :is(.btn-a, .btn-action.primary, .ui-btn.primary, .assist-send).is-hover { background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important; }
html[data-ui="v2"] :is(.btn-b, .btn-action:not(.primary), .ui-btn:not(.primary)).is-hover { background: var(--c-surface-3) !important; border-color: var(--c-text-3) !important; }
html[data-ui="v2"] .is-focus { outline: 2px solid var(--c-primary) !important; outline-offset: 2px; }
html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn, .assist-send)[aria-busy="true"]:not(#ds) { position: relative; color: transparent !important; pointer-events: none; }
html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn, .assist-send)[aria-busy="true"]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--c-text-2) var(--c-text-2) var(--c-text-2) transparent; animation: ds-spin .7s linear infinite; }
html[data-ui="v2"] :is(.btn-a, .btn-action.primary, .ui-btn.primary, .assist-send)[aria-busy="true"]::after { border-color: var(--c-on-primary) var(--c-on-primary) var(--c-on-primary) transparent; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"] [aria-busy="true"]::after { animation-duration: 2s; } html[data-ui="v2"] * { transition: none !important; } }
html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn):disabled, html[data-ui="v2"] :is(.btn-a, .btn-b, .btn-action, .ui-btn).is-disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
/* Icon buttons (the bell, the rail collapse, close buttons): a square, the same hover and focus */
html[data-ui="v2"] :is(.side-nav-bell, .side-nav-collapse, .ui-romey-close, .ds-icon-btn) { border-radius: var(--r-md) !important; transition: background-color .12s ease; }
html[data-ui="v2"] :is(.side-nav-bell, .side-nav-collapse, .ui-romey-close, .ds-icon-btn):is(:hover, .is-hover) { background: var(--c-surface-3) !important; }
html[data-ui="v2"] .ds-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; cursor: pointer; }
/* Links in running text */
html[data-ui="v2"] :is(p, .hint, .lead, .sub) a:not([class]) { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-text-3); text-underline-offset: 3px; }
html[data-ui="v2"] :is(p, .hint, .lead, .sub) a:not([class]):is(:hover, .is-hover) { text-decoration-color: var(--c-primary); }
/* Inputs: hover, focus, error, success, disabled */
html[data-ui="v2"] :is(input, select, textarea).is-hover { border-color: var(--c-text-3) !important; }
html[data-ui="v2"] :is(input, select, textarea).is-focus { border-color: var(--c-primary) !important; outline-offset: 0; }
html[data-ui="v2"] :is(input, select, textarea):is([aria-invalid="true"], .is-error) { border-color: var(--c-danger) !important; }
html[data-ui="v2"] :is(input, select, textarea):is([aria-invalid="true"], .is-error):focus { outline-color: var(--c-danger) !important; }
html[data-ui="v2"] :is(input, select, textarea).is-success { border-color: var(--c-success) !important; }
html[data-ui="v2"] :is(input, select, textarea):disabled, html[data-ui="v2"] :is(input, select, textarea).is-disabled { opacity: .55; cursor: not-allowed; }
html[data-ui="v2"] .hint.ok, html[data-ui="v2"] .ds-ok { color: var(--c-success) !important; }
/* Table rows: hover, keyboard focus inside, selected */
html[data-ui="v2"] table.lv tr:is(.is-hover) td { background: var(--c-surface-2) !important; }
html[data-ui="v2"] table.lv tr:focus-within td { background: var(--c-surface-2) !important; }
html[data-ui="v2"] table.lv tr.is-selected td { background: var(--c-surface-3) !important; }
html[data-ui="v2"] table.lv tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--c-primary); }
/* Rail, tabs and segmented controls: the same hover step; selected is the surface plus the cyan mark */
html[data-ui="v2"] .side-nav-link.is-hover { background: var(--c-surface-2); color: var(--c-text); }
html[data-ui="v2"] .crm-nav .mod.is-hover, html[data-ui="v2"] .st-tab.is-hover { color: var(--c-text) !important; }
html[data-ui="v2"] :is(.crm-nav .mod, .st-tab, .crm-seg button, .side-nav-link):focus-visible { outline-offset: -2px !important; }
/* Clickable cards (a whole panel that opens something) */
html[data-ui="v2"] :is(.hub-card, .ds-card-link, table.mob-cards tr:has(> td.ds-card-acts)) { transition: background-color .12s ease, border-color .12s ease; }
html[data-ui="v2"] :is(.hub-card, .ds-card-link, table.mob-cards tr:has(> td.ds-card-acts)):is(:hover, .is-hover) { border-color: var(--c-border-strong) !important; background: var(--c-surface-2) !important; }
/* Menus and popovers: one surface, one shadow */
html[data-ui="v2"] :is(.side-nav-place-menu, .st-menu, .ui-gl-tip, [role="menu"], [role="listbox"]) { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; border-radius: var(--r-lg) !important; box-shadow: var(--e-2) !important; color: var(--c-text) !important; }
html[data-ui="v2"] :is([role="menuitem"], [role="option"]):is(:hover, :focus-visible, .is-hover) { background: var(--c-surface-2) !important; }
/* Messages: the toast, success and error */
html[data-ui="v2"] .toast { border-radius: var(--r-lg) !important; padding: 10px 14px !important; font-size: var(--t-small) !important; background: var(--c-surface-3) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important; border-left: 3px solid var(--c-success) !important; box-shadow: var(--e-2) !important; }
html[data-ui="v2"] .toast.err { border-left-color: var(--c-danger) !important; }

/* ═══════════════════════════ HOME (index.html, .today) ═══════════════════════════ */
html[data-ui="v2"] #hub-body.today { max-width: 1240px; padding: 0 var(--s-5) var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head head" "help help" "numbers numbers" "gs gs" "needs side1" "needs side2" "needs side3" "needs ." ; column-gap: var(--s-5); align-items: start; }
html[data-ui="v2"] .today > * { min-width: 0; }
html[data-ui="v2"] .today-head { grid-area: head; padding: var(--s-5) 0 var(--s-4); }
html[data-ui="v2"] .today-head h1 { font-size: var(--t-page) !important; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; }
html[data-ui="v2"] .today-head p { font-size: var(--t-small); color: var(--c-text-2) !important; }
html[data-ui="v2"] #numbers-sec { grid-area: numbers; }
html[data-ui="v2"] #hub-body > .ui-help { grid-area: help; }
html[data-ui="v2"] #getting-started { grid-area: gs; }
html[data-ui="v2"] #needs-sec { grid-area: needs; }
html[data-ui="v2"] #assist { grid-area: side1; }
html[data-ui="v2"] #lately-sec { grid-area: side2; }
html[data-ui="v2"] #toolkit-sec { grid-area: side3; }
html[data-ui="v2"] .today-sec { margin: 0 0 var(--s-4); }
/* Section headers: panel titles, not spaced caps with a rule */
html[data-ui="v2"] .today-sec > h2, html[data-ui="v2"] .gs-head h2 { font-size: var(--t-panel) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-text) !important; border: 0 !important; padding: 0 !important; margin: 0 0 var(--s-2) !important; display: flex; align-items: baseline; justify-content: space-between; }
html[data-ui="v2"] .today-sec > h2 a { font-size: var(--t-small); font-weight: 500; color: var(--c-text-3) !important; }
html[data-ui="v2"] .today-sec > h2 a:hover { color: var(--c-text) !important; }
html[data-ui="v2"] .today-sec > .sec-head { border: 0 !important; padding: 0 !important; margin: 0 0 var(--s-2) !important; }
html[data-ui="v2"] .today-sec > .sec-head > h2 { font-size: var(--t-panel) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-text) !important; margin: 0 !important; }
html[data-ui="v2"] .today-sec > .sec-head > a { font-size: var(--t-small); font-weight: 500; color: var(--c-text-3) !important; }
html[data-ui="v2"] .today-sec > .sec-head > a:hover { color: var(--c-text) !important; }
/* KPI tiles */
html[data-ui="v2"] #numbers-sec > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html[data-ui="v2"] .tiles { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); border: 0 !important; }
html[data-ui="v2"] .tile { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); min-width: 0; }
html[data-ui="v2"] .tile .k { font-size: var(--t-meta) !important; font-weight: 500; color: var(--c-text-2) !important; text-transform: none; letter-spacing: 0; margin: 0 0 2px; }
html[data-ui="v2"] .tile .v { font-size: var(--t-kpi) !important; line-height: 28px; font-weight: 600; color: var(--c-text) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
html[data-ui="v2"] .tile .v small, html[data-ui="v2"] .tile .sub, html[data-ui="v2"] .tile .trend { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .tile .trend.up { color: var(--c-success) !important; }
/* Work queue: Today's Priorities */
html[data-ui="v2"] #needs-sec { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4) var(--s-2); }
html[data-ui="v2"] .needs li { gap: var(--s-3); padding: var(--s-2) 0 var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-border) !important; border-left: 3px solid transparent; margin-left: calc(-1 * var(--s-3) - 3px); min-height: 44px; }
html[data-ui="v2"] .needs li:last-child { border-bottom: 0 !important; }
html[data-ui="v2"] .needs li.urgent { border-left-color: var(--c-danger) !important; }
html[data-ui="v2"] .needs li:hover { background: rgba(21,57,95,.45); }
html[data-ui="v2"] .needs .t { font-size: var(--t-body) !important; font-weight: 600; line-height: 20px; }
html[data-ui="v2"] .needs .sub { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; line-height: 16px; }
html[data-ui="v2"] .needs .acts { gap: var(--s-3); }
html[data-ui="v2"] .needs li[data-tier] .acts a.act.act-primary { background: var(--c-primary) !important; border-color: var(--c-primary) !important; color: var(--c-on-primary) !important; }
html[data-ui="v2"] .needs li[data-tier] .acts a.act.act-primary:hover { background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important; }
html[data-ui="v2"] .needs li[data-tier] .acts a.act.act-quiet { background: transparent !important; border-color: var(--c-border) !important; color: var(--c-text-2) !important; }
html[data-ui="v2"] .needs li[data-tier] .acts a.act.act-quiet:hover { color: var(--c-text) !important; border-color: var(--c-border-strong) !important; }
html[data-ui="v2"] .needs .sub { display: flex; flex-wrap: wrap; align-items: baseline; }
/* Getting started: a compact checklist panel */
html[data-ui="v2"] #getting-started { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); }
html[data-ui="v2"] .gs-head { margin: 0 0 var(--s-2); gap: var(--s-3); }
html[data-ui="v2"] .gs-count { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .gs-bar { height: 4px !important; border-radius: 2px; background: var(--c-surface-3) !important; margin: 0 0 var(--s-2) !important; }
html[data-ui="v2"] .gs-bar i { background: var(--c-success) !important; border-radius: 2px; }
html[data-ui="v2"] .gs-item { padding: 6px 0 !important; border-color: var(--c-border) !important; gap: var(--s-3) !important; }
html[data-ui="v2"] .gs-item .t { font-size: var(--t-body) !important; font-weight: 500 !important; }
html[data-ui="v2"] .gs-item .why { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .gs-item .tick { width: 16px !important; height: 16px !important; }
html[data-ui="v2"] .gs-foot { margin-top: var(--s-2) !important; gap: var(--s-4); }
@media (min-width: 1024px) {
  /* :not([hidden]): the grid never overrides hidden (2026-09-28: an empty bar stayed on Home). */
  html[data-ui="v2"] #getting-started:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  html[data-ui="v2"] #getting-started > .gs-head, html[data-ui="v2"] #getting-started > .gs-bar, html[data-ui="v2"] #getting-started > .gs-foot { grid-column: 1 / -1; }
  html[data-ui="v2"] #getting-started > .gs-item { min-width: 0; }
}
/* Pass 2, phase 4: the one-line setup bar for people under way */
html[data-ui="v2"] #getting-started:has(> .gs-mini) { padding: var(--s-2) var(--s-4) !important; }
html[data-ui="v2"] .gs-mini { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); min-height: 36px; }
html[data-ui="v2"] .gs-mini h2 { font-size: var(--t-body) !important; font-weight: 600 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; white-space: nowrap; }
html[data-ui="v2"] .gs-mini .gs-count { white-space: nowrap; }
html[data-ui="v2"] .gs-mini .gs-bar { flex: 0 1 180px; min-width: 80px; margin: 0 !important; }
html[data-ui="v2"] .gs-mini .gs-next { flex: 1 1 auto; min-width: 0; font-size: var(--t-small); color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .gs-mini #gs-open { margin-left: auto; }
@media (max-width: 600px) {
  html[data-ui="v2"] .gs-mini { flex-wrap: wrap; row-gap: var(--s-2); }
  html[data-ui="v2"] .gs-mini .gs-next { flex-basis: 100%; order: 5; }
  html[data-ui="v2"] .gs-mini .gs-bar { flex: 1 1 100px; }
}
/* "I don't need this": quiet until the row is hovered or focused, on devices that hover; always reachable by keyboard */
@media (hover: hover) {
  html[data-ui="v2"] .gs-item .gs-side .gs-skip { opacity: 0; transition: opacity .12s ease; }
  html[data-ui="v2"] .gs-item:hover .gs-side .gs-skip, html[data-ui="v2"] .gs-item:focus-within .gs-side .gs-skip { opacity: 1; }
}
html[data-ui="v2"] .gs-side a.act { display: inline-flex !important; align-items: center; min-height: var(--h-control-sm); padding: 3px 10px !important; border-radius: var(--r-md) !important; border: 1px solid var(--c-border-strong) !important; background: var(--c-surface-2) !important; color: var(--c-text) !important; font-size: var(--t-meta) !important; font-weight: 500 !important; }
html[data-ui="v2"] .gs-side a.act:hover { background: var(--c-surface-3) !important; }
html[data-ui="v2"] .gs-side { gap: var(--s-3); }
/* Ask Romey: a composer panel in the side column */
html[data-ui="v2"] #assist { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); }
html[data-ui="v2"] .assist-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-2) !important; padding: 0 !important; border: 0 !important; }
html[data-ui="v2"] .assist-head h2 { font-size: var(--t-panel) !important; font-weight: 600 !important; margin: 0 !important; }
html[data-ui="v2"] .assist-head #assist-av img, html[data-ui="v2"] .assist-head #assist-av svg { width: 24px !important; height: 24px !important; }
html[data-ui="v2"] .assist-hint { flex-basis: 100%; font-size: var(--t-meta) !important; line-height: 16px; color: var(--c-text-3) !important; }
html[data-ui="v2"] .assist-form textarea { min-height: 64px; }
html[data-ui="v2"] .assist-row { margin-top: var(--s-2) !important; gap: var(--s-3) !important; }
html[data-ui="v2"] .assist-log .turn { padding: var(--s-2) 0 !important; font-size: var(--t-small); }
/* Lately: a dense feed */
html[data-ui="v2"] #lately-sec { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4) var(--s-2); }
html[data-ui="v2"] .lately li { padding: 6px 0 !important; border-color: var(--c-border) !important; gap: var(--s-2); }
html[data-ui="v2"] .lately li:last-child { border-bottom: 0 !important; }
html[data-ui="v2"] .lately a, html[data-ui="v2"] .lately .t { font-size: var(--t-small) !important; font-weight: 500; }
html[data-ui="v2"] .lately .sub, html[data-ui="v2"] .lately .when { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; }
/* Its button is a secondary one: cyan stays for primary and urgent actions (Derek, 2026-09-27) */
html[data-ui="v2"] #toolkit-sec .ti-on:not(#ds) { display: inline-flex; align-items: center; min-height: var(--h-control); padding: 5px 12px !important; border-radius: var(--r-md) !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; font-size: var(--t-small) !important; font-weight: 500 !important; box-shadow: none !important; cursor: pointer; }
html[data-ui="v2"] #toolkit-sec .ti-on:not(#ds):hover { background: var(--c-surface-3) !important; border-color: var(--c-text-3) !important; }
/* The planning toolkit invitation: the section itself is the card (it takes .toolkit-invite), in the side column */
html[data-ui="v2"] #toolkit-sec.toolkit-invite { max-width: none; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-1); }
html[data-ui="v2"] #toolkit-sec h2, html[data-ui="v2"] #toolkit-sec h3 { font-size: var(--t-panel) !important; font-weight: 600; margin: 0 0 var(--s-1) !important; letter-spacing: 0 !important; text-transform: none !important; }
html[data-ui="v2"] #toolkit-sec p { font-size: var(--t-small) !important; line-height: 18px; margin: 0 0 var(--s-3) !important; color: var(--c-text-2) !important; }
html[data-ui="v2"] #toolkit-sec * { max-width: none; }

/* ═══════════════════════ CONTACTS & COMPANIES (pipeline.html) ═══════════════════════ */
html[data-ui="v2"] .crm { border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; background: var(--c-surface-1) !important; min-height: 0; }
html[data-ui="v2"] .crm-nav { padding: 0 var(--s-3); background: var(--c-surface-1) !important; border-bottom: 1px solid var(--c-border) !important; gap: 0; }
html[data-ui="v2"] .crm-nav .site { padding: 0 var(--s-3) 0 var(--s-1); margin-right: var(--s-2); border-right: 1px solid var(--c-border) !important; }
html[data-ui="v2"] .crm-nav .site .one { font-size: var(--t-small) !important; color: var(--c-text-2) !important; font-weight: 500; }
html[data-ui="v2"] .crm-nav .mod { height: 40px; padding: 0 var(--s-3) !important; font-size: var(--t-body) !important; font-weight: 500 !important; color: var(--c-text-2) !important; background: transparent !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; }
html[data-ui="v2"] .crm-nav .mod:hover { color: var(--c-text) !important; }
html[data-ui="v2"] .crm-nav .mod.on { color: var(--c-text) !important; font-weight: 600 !important; border-bottom-color: var(--c-primary) !important; background: transparent !important; }
html[data-ui="v2"] .crm-nav .mod .n { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .crm-nav .mod .n.hot { background: rgba(255,181,71,.16) !important; color: var(--c-warning) !important; padding: 0 6px; border-radius: 999px; }
html[data-ui="v2"] .crm-head { padding: var(--s-3) var(--s-4) !important; gap: var(--s-2) !important; background: var(--c-surface-1) !important; border-bottom: 1px solid var(--c-border) !important; }
html[data-ui="v2"] .crm-head h1 { font-size: var(--t-section) !important; font-weight: 600 !important; letter-spacing: 0; margin-right: var(--s-1) !important; }
html[data-ui="v2"] .crm-head .count { font-size: var(--t-small) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .crm-head input[type=search] { width: 240px; max-width: 100%; }
html[data-ui="v2"] .crm-head select { width: auto; }
/* Segmented control instead of cyan pills */
html[data-ui="v2"] .crm-seg { display: inline-flex; gap: 0 !important; padding: 2px; margin: var(--s-3) 0 var(--s-3) !important; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
html[data-ui="v2"] .crm-seg button { height: 26px; padding: 0 var(--s-3) !important; border: 0 !important; border-radius: var(--r-sm) !important; background: transparent !important; color: var(--c-text-2) !important; font-size: var(--t-small) !important; font-weight: 500 !important; }
html[data-ui="v2"] .crm-seg button:hover { color: var(--c-text) !important; }
html[data-ui="v2"] .crm-seg button[aria-pressed="true"] { background: var(--c-surface-3) !important; color: var(--c-text) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
html[data-ui="v2"] .chips { gap: var(--s-2) !important; }
html[data-ui="v2"] .chip { height: 24px; padding: 0 var(--s-2) !important; font-size: var(--t-meta) !important; border-radius: var(--r-md) !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; color: var(--c-text-2) !important; }
html[data-ui="v2"] .chip.on { border-color: var(--c-primary) !important; color: var(--c-text) !important; }
/* The list table */
html[data-ui="v2"] .lv-main { padding: 0 var(--s-4) var(--s-3) !important; }
/* The table rules are for the table layout; below 901px the list shows as cards (admin.css PHONES) and keeps its own look. */
@media (min-width: 901px) {
  html[data-ui="v2"] table.lv { border-collapse: separate; border-spacing: 0; font-size: var(--t-body); }
  html[data-ui="v2"] table.lv th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 var(--s-3) !important; background: var(--c-surface-2) !important; color: var(--c-text-2) !important; font-size: var(--t-meta) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left; border-bottom: 1px solid var(--c-border-strong) !important; white-space: nowrap; }
  html[data-ui="v2"] table.lv th:first-child { border-top-left-radius: var(--r-md); }
  html[data-ui="v2"] table.lv th:last-child { border-top-right-radius: var(--r-md); }
  html[data-ui="v2"] table.lv th[data-sort], html[data-ui="v2"] table.lv th.sortable { cursor: pointer; }
  html[data-ui="v2"] table.lv th.sorted { color: var(--c-text) !important; }
  html[data-ui="v2"] table.lv td { height: 40px; padding: 0 var(--s-3) !important; border-bottom: 1px solid var(--c-border) !important; color: var(--c-text-2); vertical-align: middle; }
  html[data-ui="v2"] table.lv tr:hover td { background: var(--c-surface-2) !important; }
  html[data-ui="v2"] table.lv tr:has(input[type=checkbox]:checked) td { background: var(--c-surface-3) !important; }
  html[data-ui="v2"] table.lv tr:has(input[type=checkbox]:checked) td:first-child { box-shadow: inset 2px 0 0 var(--c-primary); }
  html[data-ui="v2"] table.lv td.name { color: var(--c-text) !important; font-weight: 600; }
  html[data-ui="v2"] table.lv td a { color: var(--c-text-2) !important; text-decoration: none !important; }
  html[data-ui="v2"] table.lv td a:hover { color: var(--c-text) !important; text-decoration: underline !important; }
  html[data-ui="v2"] table.lv td.num, html[data-ui="v2"] table.lv th.num { text-align: right; font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] table.lv td.sel, html[data-ui="v2"] table.lv th.sel { width: 36px; padding: 0 var(--s-2) 0 var(--s-3) !important; }
  html[data-ui="v2"] table.lv td.dim { color: var(--c-text-3) !important; }
  html[data-ui="v2"] table.lv .badge { display: inline-flex !important; width: auto !important; max-width: max-content; height: 20px; padding: 0 8px !important; border-radius: 999px !important; font-size: var(--t-meta) !important; font-weight: 500 !important; background: rgba(169,191,211,.12) !important; color: var(--c-text-2) !important; }
  html[data-ui="v2"] table.lv .badge.today { background: rgba(34,227,167,.14) !important; color: var(--c-success) !important; }
  html[data-ui="v2"] table.lv .badge.hot { background: rgba(255,181,71,.16) !important; color: var(--c-warning) !important; }
  html[data-ui="v2"] table.lv td { white-space: nowrap; }
  html[data-ui="v2"] table.lv td:not(.name):not(.sel) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
}
/* Status badges in cells ("Today", overdue, done): tinted, never wider than their text */
html[data-ui="v2"] .lv-foot, html[data-ui="v2"] .lv-pager { font-size: var(--t-small); color: var(--c-text-3); padding-top: var(--s-2) !important; }

/* ═══════════════════════════ SETTINGS (settings.html) ═══════════════════════════ */
html[data-ui="v2"] .container.editorial.set-one { max-width: 1240px; padding-left: var(--s-5); padding-right: var(--s-5); }
html[data-ui="v2"] .st-layout { grid-template-columns: 200px minmax(0, 1fr) !important; gap: var(--s-6) !important; align-items: start; }
html[data-ui="v2"] .st-nav { position: sticky; top: var(--s-4); gap: 1px !important; border: 0 !important; padding: 0 !important; }
html[data-ui="v2"] .st-tab { min-height: 32px; padding: 6px 10px !important; border-radius: var(--r-md) !important; font-size: var(--t-body) !important; font-weight: 500 !important; color: var(--c-text-2) !important; background: transparent !important; border: 0 !important; text-align: left; position: relative; }
html[data-ui="v2"] .st-tab:hover { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
html[data-ui="v2"] .st-tab[aria-selected="true"] { background: var(--c-surface-3) !important; color: var(--c-text) !important; font-weight: 600 !important; }
html[data-ui="v2"] .st-tab[aria-selected="true"]::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--c-primary); }
html[data-ui="v2"] .st-h { font-size: var(--t-section) !important; font-weight: 600 !important; margin: 0 0 var(--s-1) !important; letter-spacing: 0; }
html[data-ui="v2"] .st-why { font-size: var(--t-small) !important; color: var(--c-text-2) !important; margin: 0 0 var(--s-4) !important; max-width: 72ch; }
html[data-ui="v2"] .st-grp { font-size: var(--t-label) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3) !important; margin: var(--s-5) 0 var(--s-2) !important; }
/* Pass 2, phase 3: the menu in two groups with this section's parts under it, sticky; a picker on phones */
html[data-ui="v2"] .st-side { position: sticky; top: var(--s-4); align-self: start; display: flex; flex-direction: column; gap: var(--s-4); max-height: calc(100vh - 32px); overflow-y: auto; }
html[data-ui="v2"] .st-side .st-nav { position: static; }
html[data-ui="v2"] .st-nav-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); padding: var(--s-3) 10px var(--s-1); }
html[data-ui="v2"] .st-nav .st-nav-label:first-child { padding-top: 0; }
html[data-ui="v2"] .st-onpage { border-top: 1px solid var(--c-border); padding-top: var(--s-2); }
html[data-ui="v2"] .st-onpage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-ui="v2"] .st-onpage ul:empty { border: 0; }
html[data-ui="v2"] .st-onpage a { display: block; padding: 4px 10px 4px 12px; border-left: 2px solid var(--c-border); font-size: var(--t-small); color: var(--c-text-3); text-decoration: none; line-height: 18px; }
html[data-ui="v2"] .st-onpage a:hover { color: var(--c-text); border-left-color: var(--c-border-strong); }
html[data-ui="v2"] .st-onpage a[aria-current="true"] { color: var(--c-text); border-left-color: var(--c-primary); font-weight: 500; }
html[data-ui="v2"] .st-pick { position: sticky; top: 0; z-index: 5; margin: 0 0 var(--s-3); padding: var(--s-2) 0; background: var(--c-app); }
html[data-ui="v2"] .st-pick select { width: 100%; }
@media (min-width: 901px) { html[data-ui="v2"] .st-pick { display: none; } }
@media (max-width: 900px) { html[data-ui="v2"] .st-side { display: none; } }

/* Sections: a plain block on a hairline, not a big outlined card */
html[data-ui="v2"] .set-sec, html[data-ui="v2"] .set-sec.st-card { background: transparent !important; border: 0 !important; border-top: 1px solid var(--c-border) !important; border-radius: 0 !important; padding: var(--s-4) 0 var(--s-5) !important; margin: 0 !important; box-shadow: none !important; }
html[data-ui="v2"] .set-sec:first-of-type, html[data-ui="v2"] .st-grp + .set-sec { border-top: 0 !important; padding-top: 0 !important; }
html[data-ui="v2"] .set-sec h2, html[data-ui="v2"] .st-card-head h2 { font-size: var(--t-panel) !important; font-weight: 600 !important; letter-spacing: 0 !important; margin: 0 !important; }
html[data-ui="v2"] .st-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-1) !important; }
html[data-ui="v2"] .set-sec .lead { font-size: var(--t-small) !important; line-height: 18px; color: var(--c-text-2) !important; margin: 0 0 var(--s-3) !important; max-width: 80ch; }
html[data-ui="v2"] .set-sec .lead.ds-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-ui="v2"] .ds-more { background: none; border: 0; padding: 0; margin: -8px 0 var(--s-3); font: inherit; font-size: var(--t-meta); color: var(--c-text-3); cursor: pointer; }
html[data-ui="v2"] .ds-more:hover { color: var(--c-text); text-decoration: underline; }
/* Fields two to a row on wide screens, CSS only (no wrapper, no DOM change): the section is a two-column grid where
   everything spans the row except single-line fields, which pair up in the order they come. */
@media (min-width: 1024px) {
  html[data-ui="v2"] .st-main .set-sec:not(.cn) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
  html[data-ui="v2"] .st-main .set-sec:not(.cn) > * { grid-column: 1 / -1; min-width: 0; }
  /* Buttons and links keep their own width; everything else fills its cell */
  html[data-ui="v2"] .st-main .set-sec:not(.cn) > :is(button, a, .btn-a, .btn-b, .btn-action) { justify-self: start; }
  html[data-ui="v2"] .st-main .set-sec:not(.cn) > .field:not(:has(textarea, .row2, .row3, table, .toggle + .toggle)) { grid-column: auto; }
}
html[data-ui="v2"] .set-sec .field, html[data-ui="v2"] .set-sec .row2, html[data-ui="v2"] .set-sec .row3 { max-width: 880px; }
html[data-ui="v2"] .set-sec textarea { max-width: 880px; }
/* Textareas size to what they hold (3 lines at least, about 10 at most, then scroll); still resizable */
html[data-ui="v2"] .st-main textarea { field-sizing: content; min-height: 68px !important; max-height: 220px; height: auto; resize: vertical; }
html[data-ui="v2"] .st-main .set-sec > :is(button, .btn-a, .btn-b, .btn-action) + :is(button, .btn-a, .btn-b, .btn-action) { margin-left: var(--s-2); }
/* Connections: the grid of cards stays, lighter */
html[data-ui="v2"] #st-connections .cn { background: var(--c-surface-1) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; padding: var(--s-3) !important; }
html[data-ui="v2"] #st-connections .cn .cn-top b { font-size: var(--t-body) !important; }
html[data-ui="v2"] .toggle { font-size: var(--t-small) !important; gap: var(--s-2); }
html[data-ui="v2"] details.cn-steps summary { font-size: var(--t-small); color: var(--c-text-2); }

/* Pagination: visible arrows (the buttons were painted navy with dark default text) */
html[data-ui="v2"] .lv-foot .pg button { min-width: 28px; height: 28px; padding: 0 8px !important; border-radius: var(--r-md) !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; font-size: 16px; line-height: 1; }
html[data-ui="v2"] .lv-foot .pg button:hover:not(:disabled) { background: var(--c-surface-3) !important; }
html[data-ui="v2"] .lv-foot .pg button:disabled { opacity: .4; }
/* The phone card's actions cell exists only for the card: not a desktop column */
@media (min-width: 901px) { html[data-ui="v2"] table.lv td.ds-card-acts { display: none; } }

/* ── Compact contact cards on phones (pass 2, phase 2): a list whose rows carry a card actions cell becomes summary
   cards: name and activity on the first line, then company and title, then the email, then Call, Email and More.
   The whole card opens the record (the name's own click, stretched over the card). Owner and Created stay off. ── */
@media (max-width: 900px) {
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) { position: relative; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "sel name act" ". co co" ". ti ti" ". em em" "ac ac ac"; column-gap: var(--s-2); row-gap: 2px; padding: var(--s-3) !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td { display: block !important; padding: 0 !important; min-height: 0; border: 0 !important; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td::before { content: none !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td.sel { grid-area: sel; align-self: center; position: relative; z-index: 2; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td[data-label="Activity"] { grid-area: act; align-self: center; position: relative; z-index: 1; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td.name { grid-area: name; align-self: center; font-size: var(--t-body) !important; font-weight: 600; color: var(--c-text) !important; cursor: pointer; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td.name::after { content: ''; position: absolute; inset: 0; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td[data-label="Company"] { grid-area: co; font-size: var(--t-small); color: var(--c-text-2) !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td[data-label="Title"] { grid-area: ti; font-size: var(--t-meta); color: var(--c-text-3) !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td[data-label="Email"] { grid-area: em; font-size: var(--t-meta); color: var(--c-text-3) !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td :is(a, button, input) { position: relative; z-index: 1; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td[data-label="Company"] a, html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td[data-label="Email"] a { color: inherit !important; text-decoration: none !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td:is(.ds-card-off, [data-label="Phone"]) { display: none !important; }
  html[data-ui="v2"] table.mob-cards tr:has(> td.ds-card-acts) > td.ds-card-acts { grid-area: ac; display: flex !important; gap: var(--s-2); margin-top: var(--s-2) !important; padding-top: var(--s-2) !important; border-top: 1px solid var(--c-border) !important; position: relative; z-index: 1; }
  html[data-ui="v2"] table.mob-cards td.ds-card-acts :is(a, button) { flex: 1 1 0; min-height: 44px !important; font-size: var(--t-small) !important; }
  html[data-ui="v2"] table.mob-cards .badge { display: inline-flex !important; height: 20px; padding: 0 8px !important; border-radius: 999px !important; font-size: var(--t-meta) !important; font-weight: 500 !important; background: rgba(169,191,211,.12) !important; color: var(--c-text-2) !important; }
  html[data-ui="v2"] table.mob-cards .badge.today { background: rgba(34,227,167,.14) !important; color: var(--c-success) !important; }
  html[data-ui="v2"] table.mob-cards .badge.hot { background: rgba(255,181,71,.16) !important; color: var(--c-warning) !important; }
}

/* ── Depth (pass 2, phase 6): restrained. Panels sit one step above the ground with a hair of lift; controls get a
   little weight; groups get a divider under their title. No glows, gradients or glass. ── */
html[data-ui="v2"] :is(.tile, #needs-sec, #assist, #lately-sec, #toolkit-sec.toolkit-invite, #getting-started, .crm, .panel, .card, #st-connections .cn, .ui-help) { box-shadow: var(--e-1) !important; }
html[data-ui="v2"] :is(.btn-a, .btn-action.primary, .ui-btn.primary, .assist-send):not(:disabled) { box-shadow: 0 1px 2px rgba(0,0,0,.3); }
html[data-ui="v2"] :is(input[type=text], input[type=number], input[type=date], input[type=email], input[type=url], input[type=search], input[type=password], input[type=tel], select, textarea) { box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
html[data-ui="v2"] :is(#needs-sec, #lately-sec) > h2 { padding-bottom: var(--s-2) !important; margin-bottom: var(--s-1) !important; border-bottom: 1px solid var(--c-border) !important; }
html[data-ui="v2"] .st-main > .st-sec > .st-why { padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border); }
html[data-ui="v2"] .st-main > .st-sec > .st-why + .set-sec { border-top: 0 !important; }
html[data-ui="v2"] .tile { border-color: var(--c-border) !important; }
html[data-ui="v2"] .side-nav { box-shadow: 1px 0 0 rgba(0,0,0,.25); }

/* ═══════════════════════════ PHONES ═══════════════════════════ */
@media (max-width: 1023px) {
  html[data-ui="v2"] #hub-body.today { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "help" "numbers" "gs" "needs" "side1" "side2" "side3"; padding: 0 var(--s-4) var(--s-5); }
}
@media (max-width: 899px) {
  html[data-ui="v2"] { --t-page: 22px; }
  html[data-ui="v2"] .today-head { padding: var(--s-4) 0 var(--s-3); }
  html[data-ui="v2"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  html[data-ui="v2"] .tile { padding: var(--s-2) var(--s-3); }
  html[data-ui="v2"] .tile .v { font-size: 20px !important; line-height: 24px; }
  html[data-ui="v2"] .needs li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  html[data-ui="v2"] .needs .acts { justify-content: flex-start; }
  html[data-ui="v2"] .gs-item { grid-template-columns: 20px minmax(0, 1fr) !important; row-gap: 6px !important; }
  html[data-ui="v2"] .gs-item > .gs-side, html[data-ui="v2"] .gs-item > .gs-skip { grid-column: 2; justify-self: start; }
  html[data-ui="v2"] .st-layout { grid-template-columns: minmax(0, 1fr) !important; gap: var(--s-3) !important; }
  html[data-ui="v2"] .st-nav { position: static; flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap !important; border-bottom: 1px solid var(--c-border) !important; }
  html[data-ui="v2"] .st-tab { white-space: nowrap; }
  html[data-ui="v2"] .st-tab[aria-selected="true"]::before { left: 8px; right: 8px; top: auto; bottom: -1px; width: auto; height: 2px; }
  html[data-ui="v2"] .crm-head input[type=search] { width: 100%; }
  html[data-ui="v2"] table.mob-cards tr { padding: 4px var(--s-3) var(--s-2) !important; margin: 0 0 var(--s-2) !important; border-radius: var(--r-lg) !important; background: var(--c-surface-1) !important; border-color: var(--c-border) !important; }
  html[data-ui="v2"] table.mob-cards td { padding: 4px 0 !important; font-size: var(--t-small); }
  html[data-ui="v2"] table.mob-cards td::before { font-size: var(--t-label) !important; color: var(--c-text-3) !important; }
  html[data-ui="v2"] table.mob-cards td a { text-decoration: none !important; color: var(--c-text-2) !important; }
  html[data-ui="v2"] .container.editorial.set-one { padding-left: var(--s-4); padding-right: var(--s-4); }
}

/* ── Design group 1 (2026-09-27; dev until Derek approves) ──────────────────────────────────────────────────────────
   Proposals, Forms and Lists by page (html[data-ui-page], on only where UI_V2_PAGES lists them); Deals, Tasks and
   Inbox are /pipeline modules, already live, so their changes wait behind html[data-ui-next] (UI_V2_NEXT, dev only). */

/* The editorial header on these pages: title left, actions right at their own size (admin.css makes them full width) */
html[data-ui="v2"]:is([data-ui-page="proposals"], [data-ui-page="forms"], [data-ui-page="lists"]) .editorial > :is(.page-head, .admin-page-header) {
  display: flex !important; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  position: static; padding: 0 0 var(--s-4) !important; margin: 0 0 var(--s-4) !important; border-bottom: 1px solid var(--c-border) !important; }
html[data-ui="v2"]:is([data-ui-page="proposals"], [data-ui-page="forms"], [data-ui-page="lists"]) .editorial > :is(.page-head, .admin-page-header) > div:last-child:not(:first-child) {
  margin: 0 !important; max-width: none !important; display: flex; gap: var(--s-2); align-items: center; }
html[data-ui="v2"]:is([data-ui-page="proposals"], [data-ui-page="forms"], [data-ui-page="lists"]) .editorial > :is(.page-head, .admin-page-header) > div:last-child:not(:first-child) :is(.btn-a, .btn-b, select) {
  width: auto !important; display: inline-flex !important; margin: 0 !important; }
html[data-ui="v2"]:is([data-ui-page="proposals"], [data-ui-page="forms"], [data-ui-page="lists"]) .admin-page-title .gl { border-bottom: 0 !important; text-decoration: underline dotted var(--c-text-3) 1px; text-underline-offset: 6px; }

/* Proposals: the client site as one quiet line, the filters as a segmented control, rows as one list with a More menu */
html[data-ui="v2"][data-ui-page="proposals"] .site-bar { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 var(--s-3) !important; align-items: center; gap: var(--s-3); }
html[data-ui="v2"][data-ui-page="proposals"] .site-bar .field { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
html[data-ui="v2"][data-ui-page="proposals"] .site-bar label { margin: 0 !important; font-size: var(--t-small); color: var(--c-text-2); white-space: nowrap; }
html[data-ui="v2"][data-ui-page="proposals"] .site-bar select { width: auto !important; }
html[data-ui="v2"][data-ui-page="proposals"] .site-note { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .tabs { display: inline-flex; gap: 0 !important; padding: 2px; margin: 0 0 var(--s-3) !important; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
html[data-ui="v2"][data-ui-page="proposals"] .tabs .tab { height: 26px; padding: 0 var(--s-3) !important; border: 0 !important; border-radius: var(--r-sm) !important; background: transparent !important; color: var(--c-text-2) !important;
  font-family: inherit !important; font-size: var(--t-small) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
html[data-ui="v2"][data-ui-page="proposals"] .tabs .tab:hover { color: var(--c-text) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .tabs .tab.on { background: var(--c-surface-3) !important; color: var(--c-text) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
html[data-ui="v2"][data-ui-page="proposals"] .tabs .tab span { color: var(--c-text-3); opacity: 1; }
html[data-ui="v2"][data-ui-page="proposals"] .p-row { background: var(--c-surface-1) !important; border: 1px solid var(--c-border) !important; border-radius: 0; margin: 0 0 -1px !important; padding: var(--s-3) var(--s-4) !important; gap: var(--s-3); }
html[data-ui="v2"][data-ui-page="proposals"] .p-row:first-of-type { border-radius: var(--r-lg) var(--r-lg) 0 0; }
html[data-ui="v2"][data-ui-page="proposals"] .p-row:last-of-type { border-radius: 0 0 var(--r-lg) var(--r-lg); }
html[data-ui="v2"][data-ui-page="proposals"] .p-row:only-of-type { border-radius: var(--r-lg); }
html[data-ui="v2"][data-ui-page="proposals"] .p-row:hover { background: var(--c-surface-2) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .p-row h3 { font-size: var(--t-body) !important; font-weight: 600 !important; color: var(--c-text) !important; margin: 0 0 2px !important; }
html[data-ui="v2"][data-ui-page="proposals"] .p-row h3 span { color: var(--c-text-2) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .p-row .sub { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; letter-spacing: 0 !important; }
html[data-ui="v2"][data-ui-page="proposals"] .p-row .sub code { color: var(--c-text-2) !important; font-size: var(--t-meta) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .pill { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; }
html[data-ui="v2"][data-ui-page="proposals"] .pill.published { background: rgba(34,227,167,.14) !important; color: var(--c-success) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .pill.draft { background: var(--c-surface-3) !important; color: var(--c-text-2) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .pill.archived { background: rgba(255,181,71,.16) !important; color: var(--c-warning) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .pill:is(.locked, .template) { background: var(--c-surface-2) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"][data-ui-page="proposals"] .row-actions { gap: var(--s-2) !important; flex-wrap: nowrap !important; }
/* The More menu (proposals.html renders it only under data-ui="v2"): the same buttons, in a menu */
html[data-ui="v2"] details.ds-menu { position: relative; }
html[data-ui="v2"] details.ds-menu > summary { list-style: none; }
html[data-ui="v2"] details.ds-menu > summary::-webkit-details-marker { display: none; }
html[data-ui="v2"] details.ds-menu > [role="menu"] { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 160px; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
html[data-ui="v2"] details.ds-menu > [role="menu"] > button:not(#ds) { box-shadow: none !important; justify-content: flex-start !important; width: 100%; background: transparent !important; border: 0 !important; color: var(--c-text) !important; }
html[data-ui="v2"] details.ds-menu > [role="menu"] > button:not(#ds):is(:hover, :focus-visible) { background: var(--c-surface-2) !important; }
html[data-ui="v2"] details.ds-menu > [role="menu"] > button.btn-danger:not(#ds) { color: var(--c-danger) !important; }

/* Forms: the templates as cards */
html[data-ui="v2"][data-ui-page="forms"] .fm-sec { border-top-color: var(--c-border) !important; }
html[data-ui="v2"][data-ui-page="forms"] .fm-h { font-size: var(--t-section) !important; }
html[data-ui="v2"][data-ui-page="forms"] .fm-lede { font-size: var(--t-small) !important; color: var(--c-text-2) !important; }
html[data-ui="v2"][data-ui-page="forms"] section[aria-labelledby="h-tpl"] .fm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); max-width: none; }
html[data-ui="v2"][data-ui-page="forms"] section[aria-labelledby="h-tpl"] .fm-list > li { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg); background: var(--c-surface-1); font-size: var(--t-small) !important; }
html[data-ui="v2"][data-ui-page="forms"] section[aria-labelledby="h-tpl"] .fm-list > li > b { font-size: var(--t-panel); color: var(--c-text); }
html[data-ui="v2"][data-ui-page="forms"] section[aria-labelledby="h-tpl"] .fm-list > li .m { color: var(--c-text-2); }
html[data-ui="v2"][data-ui-page="forms"] section[aria-labelledby="h-tpl"] .fm-list > li > div.m { color: var(--c-text-3); font-size: var(--t-meta); }
html[data-ui="v2"][data-ui-page="forms"] section[aria-labelledby="h-tpl"] .fm-acts { margin-top: auto; padding-top: var(--s-2); }

/* Deals and Tasks (html[data-ui-next]): the stage as a compact inline select, so every column fits; Mark done is round */
html[data-ui="v2"][data-ui-next] table.lv select[data-stage] { height: 26px; min-height: 0; width: 140px !important; padding: 0 20px 0 var(--s-2) !important; text-overflow: ellipsis; border: 1px solid transparent !important;
  background-color: transparent !important; font-size: var(--t-small) !important; color: var(--c-text) !important; border-radius: var(--r-md) !important; }
html[data-ui="v2"][data-ui-next] table.lv select[data-stage]:is(:hover, :focus-visible) { border-color: var(--c-border-strong) !important; background-color: var(--c-surface-2) !important; }
/* Long deal and task names wrap (they pushed Owner off the table), and the row's Open is a quiet action: the name opens it too */
html[data-ui="v2"][data-ui-next] table.lv td.name { white-space: normal !important; min-width: 180px; max-width: 280px; }
html[data-ui="v2"][data-ui-next] table.lv td.acts .btn-action { min-height: 26px; padding: 0 var(--s-2) !important; background: transparent !important; border-color: transparent !important; color: var(--c-text-2) !important; }
html[data-ui="v2"][data-ui-next] table.lv td.acts .btn-action:is(:hover, :focus-visible) { background: var(--c-surface-2) !important; border-color: var(--c-border-strong) !important; color: var(--c-text) !important; }
@media (max-width: 900px) { html[data-ui="v2"][data-ui-next] table.mob-cards td.name { max-width: none; min-width: 0; } }
html[data-ui="v2"][data-ui-next] table.lv input[data-done] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--c-text-3); border-radius: 50%; background: transparent; cursor: pointer; display: inline-grid; place-content: center; }
html[data-ui="v2"][data-ui-next] table.lv input[data-done]:hover { border-color: var(--c-success); }
html[data-ui="v2"][data-ui-next] table.lv input[data-done]:checked { background: var(--c-success); border-color: var(--c-success); }
html[data-ui="v2"][data-ui-next] table.lv input[data-done]:checked::after { content: ''; width: 4px; height: 8px; border: solid var(--c-on-primary); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

@media (max-width: 900px) {
  html[data-ui="v2"][data-ui-page="proposals"] .p-row { grid-template-columns: 1fr !important; }
  html[data-ui="v2"][data-ui-page="proposals"] .row-actions { justify-content: flex-start !important; flex-wrap: wrap !important; }
  html[data-ui="v2"][data-ui-page="proposals"] .tabs { display: flex; max-width: 100%; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  html[data-ui="v2"][data-ui-page="proposals"] .tabs .tab { flex: 0 0 auto; }
  html[data-ui="v2"] details.ds-menu > [role="menu"] { right: auto; left: 0; }
  html[data-ui="v2"]:is([data-ui-page="proposals"], [data-ui-page="forms"], [data-ui-page="lists"]) .editorial > :is(.page-head, .admin-page-header) { padding-top: var(--s-3) !important; }
  html[data-ui="v2"]:is([data-ui-page="proposals"], [data-ui-page="forms"], [data-ui-page="lists"]) .editorial > :is(.page-head, .admin-page-header) { align-items: flex-start; }
}

/* ── Design group 2, the planning pages (2026-09-27; dev until Derek approves) ───────────────────────────────────────
   Business plan, Goals, Weekly numbers, Roles, Weekly meeting, Checklists, Money: each page's own heading, kicker,
   label and value classes onto the tokens (one font, the type scale), and the planning toolkit card as a panel. */
html[data-ui="v2"]:is([data-ui-page="plan"], [data-ui-page="goals"], [data-ui-page="scorecard"], [data-ui-page="people"], [data-ui-page="pulse"], [data-ui-page="playbooks"], [data-ui-page="finance"]) .admin-page-title .gl { border-bottom: 0 !important; text-decoration: underline dotted var(--c-text-3) 1px; text-underline-offset: 6px; }
/* Section headings */
html[data-ui="v2"] :is(.cp-h, .pe-h, .pl-h, .pb-h, .fh-h, .stop-dlg h2):not(#ds) { font-family: inherit !important; font-size: var(--t-section) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 24px; color: var(--c-text) !important; margin: 0 0 var(--s-2) !important; }
/* Kickers: the small labels over a group */
html[data-ui="v2"] :is(.cp-k, .pe-k, .pl-k, .fh-k, .gl-kicker, .sc-group h2, .sc-sub, .gl-sub, .gl-q, .pl-row .src):not(#ds) { font-family: inherit !important; font-size: var(--t-label) !important; font-weight: 600 !important; letter-spacing: 0.06em !important; color: var(--c-text-3) !important; }
/* Form labels, as everywhere else */
html[data-ui="v2"] :is(.cp-form, .sc-form, .sc-entry, .pe-form, .pl-form, .pb-form, .gl-form, .gl-line) label:not(#ds) { font-family: inherit !important; font-size: var(--t-meta) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-text-2) !important; }
/* Names and figures */
html[data-ui="v2"] :is(.sc-name b, .pl-row b, .gl-row b):not(#ds) { font-family: inherit !important; font-size: var(--t-panel) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html[data-ui="v2"] :is(.sc-val, .gl-pct, .ag-clocks b):not(#ds) { font-family: inherit !important; font-weight: 600 !important; letter-spacing: -0.01em !important; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .sc-val:not(#ds) { font-size: 20px !important; line-height: 26px !important; }
html[data-ui="v2"] .sc-val.none:not(#ds) { font-size: var(--t-body) !important; font-weight: 500 !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .sc-val.stale:not(#ds) { color: var(--c-text-2) !important; }
html[data-ui="v2"] .sc-status:not(#ds) { font-size: var(--t-meta) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; margin-top: 2px !important; }
html[data-ui="v2"] .sc-status:not(.on_track):not(.off_track):not(#ds) { color: var(--c-text-3) !important; }
html[data-ui="v2"] .sc-period:not(#ds) { font-size: var(--t-meta) !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .pe-tab:not(#ds) { font-family: inherit !important; font-size: var(--t-body) !important; font-weight: 500 !important; }
/* Section dividers and leads */
html[data-ui="v2"] :is(.cp-sec, .fm-sec):not(#ds) { border-top-color: var(--c-border) !important; margin-top: var(--s-5) !important; padding-top: var(--s-4) !important; }
html[data-ui="v2"] .cp-lede:not(#ds) { font-size: var(--t-small) !important; color: var(--c-text-2) !important; }
/* The planning toolkit invitation above these pages (public/gate.js WiggleToolkit): a panel, its button primary */
html[data-ui="v2"] #toolkit-invite.toolkit-invite { max-width: 720px; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; background: var(--c-surface-1) !important; box-shadow: var(--e-1) !important; }
html[data-ui="v2"] #toolkit-invite :is(h2, h3) { font-family: inherit !important; font-size: var(--t-panel) !important; font-weight: 600; margin: 0 0 var(--s-1) !important; letter-spacing: 0 !important; }
html[data-ui="v2"] #toolkit-invite p { font-size: var(--t-small) !important; line-height: 18px; margin: 0 0 var(--s-3) !important; color: var(--c-text-2) !important; }
html[data-ui="v2"] #toolkit-invite .ti-on:not(#ds) { display: inline-flex; align-items: center; min-height: var(--h-control); padding: 5px 12px !important; border-radius: var(--r-md) !important; font-size: var(--t-small) !important; font-weight: 500 !important; background: var(--c-primary) !important; border: 1px solid var(--c-primary) !important; color: var(--c-on-primary) !important; }
html[data-ui="v2"] #toolkit-invite .ti-on:not(#ds):hover { background: var(--c-primary-hover) !important; }
html[data-ui="v2"] #toolkit-invite .ti-what:not(#ds) { font-size: var(--t-small) !important; color: var(--c-text-3) !important; text-decoration: none !important; }
html[data-ui="v2"] #toolkit-invite .ti-what:not(#ds):hover { color: var(--c-text) !important; text-decoration: underline !important; }
/* The pages' own strong rules (drawn in the ink colour) become the strong border token */
html[data-ui="v2"] :is(.cp-state, .gl-annual, .sc-group h2, .pe-tabs, .pl-state, .ag-bar, .pb-state, .fh-state):not(#ds) { border-color: var(--c-border-strong) !important; }
html[data-ui="v2"] .side-nav-tag { margin-left: auto; padding: 0 6px; border-radius: 999px; font-size: var(--t-label); font-weight: 600; line-height: 18px; color: var(--c-text-3); background: var(--c-surface-2); border: 1px solid var(--c-border); }

/* ── Design group 3, Marketing (2026-09-27; dev until Derek approves) ───────────────────────────────────────────────
   Social posts, Blog, Email campaigns, Reviews, Website & search, Website. The builders' previews are iframes, so
   nothing here reaches a customer's email or site. */
/* An input with no type is a text box too (Reviews' Google Place ID); waits behind data-ui-next on live pages */
html[data-ui="v2"][data-ui-next] input:not([type]) { min-height: var(--h-control); height: var(--h-control); padding: 5px 10px !important; font-size: var(--t-body) !important; line-height: 20px; border-radius: var(--r-md) !important;
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; box-sizing: border-box; }
/* Blog and Email campaigns: one column, the header on top (title left, actions right), as on every other page */
html[data-ui="v2"]:is([data-ui-page="blog"], [data-ui-page="email-builder"]) .container.editorial { display: block !important; max-width: 1240px; }
html[data-ui="v2"][data-ui-page="blog"] .editorial > .blog-head { display: flex !important; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  position: static; padding: 0 0 var(--s-4) !important; margin: 0 0 var(--s-4) !important; border-bottom: 1px solid var(--c-border) !important; }
html[data-ui="v2"][data-ui-page="blog"] .editorial > .blog-head > div:last-child:not(:first-child) { margin: 0 !important; max-width: none !important; display: flex; gap: var(--s-2); align-items: center; }
html[data-ui="v2"][data-ui-page="blog"] .editorial > .blog-head > div:last-child:not(:first-child) :is(.btn-a, .btn-b, select) { width: auto !important; display: inline-flex !important; margin: 0 !important; }
html[data-ui="v2"] .blog-title { font-size: var(--t-page) !important; line-height: 32px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; margin: 0 0 var(--s-1) !important; }
html[data-ui="v2"][data-ui-page="email-builder"] .eb-list-wrap { display: block !important; max-width: 1240px; padding: var(--s-6) var(--s-5) !important; }
html[data-ui="v2"][data-ui-page="email-builder"] .eb-list-top { display: flex !important; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  position: static !important; padding: 0 0 var(--s-4); margin: 0 0 var(--s-4) !important; border-bottom: 1px solid var(--c-border); }
html[data-ui="v2"][data-ui-page="email-builder"] .eb-list-top .admin-page-title { font-size: var(--t-page) !important; line-height: 32px !important; margin: 0 0 var(--s-1) !important; }
html[data-ui="v2"][data-ui-page="email-builder"] .eb-list-top :is(.btn, .btn-a) { width: auto !important; margin: 0 !important; border-radius: var(--r-md) !important; min-height: var(--h-control); padding: 5px 12px !important; font-size: var(--t-small) !important; }
/* The page-title glossary underline, lighter, as on the other groups */
html[data-ui="v2"]:is([data-ui-page="social"], [data-ui-page="blog"], [data-ui-page="email-builder"], [data-ui-page="reviews"], [data-ui-page="seo"], [data-ui-page="website"]) .admin-page-title .gl { border-bottom: 0 !important; text-decoration: underline dotted var(--c-text-3) 1px; text-underline-offset: 6px; }
@media (max-width: 900px) {
  html[data-ui="v2"][data-ui-page="email-builder"] .eb-list-wrap { padding: var(--s-4) !important; }
}
/* The strong rules the pages draw in the ink colour, on the border token (Blog's site bar, the campaigns table) */
html[data-ui="v2"]:is([data-ui-page="blog"], [data-ui-page="email-builder"]) :is(.site-bar, .eb-table-wrap):not(#ds) { border-top-color: var(--c-border) !important; }
html[data-ui="v2"][data-ui-page="blog"] .blog-head .site-bar:not(#ds) { border-top: 0 !important; padding-top: 0 !important; }

/* ── Design group 4, everything else in the app (2026-09-27; dev until Derek approves) ───────────────────────────────
   Tasks, Weekly briefing, Getting paid, Team, Business checkup, Notifications and the staff pages. */
/* The older .btn buttons (Team's Invite, a few staff pages) take the shared button look; behind data-ui-next on live pages */
html[data-ui="v2"][data-ui-next] :is(.btn, .btn-primary, .btn-secondary):not(#ds) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-control); height: auto; padding: 5px 12px !important;
  border-radius: var(--r-md) !important; font-family: inherit; font-size: var(--t-small) !important; font-weight: 500 !important; line-height: 20px; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; width: auto; }
html[data-ui="v2"][data-ui-next] .btn-primary:not(#ds) { background: var(--c-primary) !important; border: 1px solid var(--c-primary) !important; color: var(--c-on-primary) !important; }
html[data-ui="v2"][data-ui-next] .btn-primary:not(#ds):hover { background: var(--c-primary-hover) !important; }
html[data-ui="v2"][data-ui-next] .btn:not(.btn-primary):not(#ds) { background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; }
/* Tasks: Mine and Everyone, List and Board as segmented controls; the status as a compact inline select */
html[data-ui="v2"][data-ui-page="tasks"] .tk-seg { gap: 0; padding: 2px; background: var(--c-surface-2); border: 1px solid var(--c-border) !important; border-radius: var(--r-md) !important; }
html[data-ui="v2"][data-ui-page="tasks"] .tk-seg button { height: 26px; padding: 0 var(--s-3) !important; border-radius: var(--r-sm) !important; background: transparent !important; color: var(--c-text-2) !important; font-size: var(--t-small) !important; font-weight: 500; }
html[data-ui="v2"][data-ui-page="tasks"] .tk-seg button:hover { color: var(--c-text) !important; }
html[data-ui="v2"][data-ui-page="tasks"] .tk-seg button[aria-pressed="true"] { background: var(--c-surface-3) !important; color: var(--c-text) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
html[data-ui="v2"][data-ui-page="tasks"] select.tk-st { height: 26px; min-height: 0; width: auto; padding: 0 22px 0 var(--s-2) !important; border: 1px solid transparent !important; background-color: transparent !important; font-size: var(--t-small) !important; }
html[data-ui="v2"][data-ui-page="tasks"] select.tk-st:is(:hover, :focus-visible) { border-color: var(--c-border-strong) !important; background-color: var(--c-surface-2) !important; }
/* The page-title glossary underline, lighter, as on the other groups */
html[data-ui="v2"]:is([data-ui-page="tasks"], [data-ui-page="briefing"], [data-ui-page="billing"], [data-ui-page="users"], [data-ui-page="checkupworkspace"], [data-ui-page="notifications"]) .admin-page-title .gl { border-bottom: 0 !important; text-decoration: underline dotted var(--c-text-3) 1px; text-underline-offset: 6px; }
/* Notifications: the settings table's header row as a quiet label row */
html[data-ui="v2"][data-ui-page="notifications"] table th { background: transparent !important; color: var(--c-text-3) !important; font-size: var(--t-label) !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--c-border) !important; }
html[data-ui="v2"][data-ui-page="notifications"] table td { padding-top: 5px !important; padding-bottom: 5px !important; border-bottom: 1px solid var(--c-border); }

/* ── Design group 5, sign in and the first steps (2026-09-27; dev until Derek approves) ──────────────────────────────
   Sign in, sign up, /activate, /join, /mfa and the welcome steps keep their own layout (no rail). The type, inputs,
   buttons and card follow the tokens. The Google, Microsoft, Facebook and LinkedIn buttons (public/social.js, inline
   styles, data-provider) follow each provider's own rules and are never styled here; Turnstile and consent lines stay. */
html[data-ui="v2"] :is(.pm-card, .activate-card, .join-card, .mf-card):not(#ds) { background: var(--c-surface-1) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--e-2) !important; }
html[data-ui="v2"] :is(.pm-heading, .su-title, .activate-title, .join-title, .wz-main h1, .mf-card h1, .mf-wrap h1):not(#ds) { font-family: inherit !important; font-size: var(--t-page) !important; line-height: 32px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--c-text) !important; }
html[data-ui="v2"] :is(.pm-eyebrow, .su-kicker):not(#ds) { font-family: inherit !important; font-size: var(--t-meta) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] :is(.su-lead, .activate-sub, .join-sub, .wz-main .lead, .pm-access-note):not(#ds) { font-size: var(--t-body) !important; line-height: 20px; color: var(--c-text-2) !important; }
/* Labels as in Settings */
html[data-ui="v2"] :is(.pm-field label, .su-field legend, .activate-field label, .mf-card label, .wz .field label):not(#ds) { font-family: inherit !important; font-size: var(--t-meta) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-text-2) !important; }
/* Inputs: the shared control, a little taller here for thumbs */
html[data-ui="v2"] :is(.pm-field input, .su-field input:not([type=radio]):not([type=checkbox]), .activate-field input, .mf-input):not(#ds) { height: 40px !important; min-height: 40px; padding: 8px 12px !important; font-size: var(--t-body) !important; border-radius: var(--r-md) !important;
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
/* Buttons: the shared primary and secondary, not pills */
html[data-ui="v2"] :is(.pm-btn, .mf-btn, .activate-card .btn-gold, .join-card .btn-gold, .wz .btn:not(.ghost)):not(#ds) { height: 40px !important; min-height: 40px; padding: 0 16px !important; border-radius: var(--r-md) !important; font-family: inherit !important; font-size: var(--t-body) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; background: var(--c-primary) !important; border: 1px solid var(--c-primary) !important; color: var(--c-on-primary) !important; box-shadow: none !important; }
html[data-ui="v2"] :is(.pm-btn, .mf-btn, .activate-card .btn-gold, .join-card .btn-gold, .wz .btn:not(.ghost)):not(#ds):hover { background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important; }
html[data-ui="v2"] :is(.join-card .btn:not(.btn-gold), .wz .btn.ghost):not(#ds) { height: 40px !important; padding: 0 16px !important; border-radius: var(--r-md) !important; font-size: var(--t-body) !important; font-weight: 500 !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; }
/* The welcome steps: the step list and the page as elsewhere */
html[data-ui="v2"] .wz-brand:not(#ds) { font-family: inherit !important; font-size: var(--t-small) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }
html[data-ui="v2"] .wz-steps li:not(#ds) { font-size: var(--t-small) !important; border-color: var(--c-border) !important; }
html[data-ui="v2"] .wz-steps li.cur:not(#ds) { color: var(--c-text) !important; font-weight: 600 !important; }
html[data-ui="v2"] .pm-heading:not(#ds) { max-width: none !important; }
html[data-ui="v2"] .wz-main .lead:not(#ds) { margin: 0 0 var(--s-4) !important; max-width: 72ch; }
/* Sign in: the note under the form reads as meta text, aligned with the form */
html[data-ui="v2"] .pm-access-note:not(#ds) { text-align: left !important; font-size: var(--t-meta) !important; line-height: 18px; letter-spacing: 0 !important; color: var(--c-text-3) !important; }
html[data-ui="v2"] .pm-access-note .pm-tagline:not(#ds) { margin-top: var(--s-2) !important; font-weight: 500; color: var(--c-text-2) !important; }
html[data-ui="v2"] .pm-back:not(#ds) { font-size: var(--t-small) !important; }