/* Hallmark · shape: app screen · genre: modern-minimal · theme: custom (unslop direction: a dispatcher's desk, steady and plainspoken) · redesign: full
 * nav: sidebar on warm grey paper, content in a white bordered panel · signature: the approval stamp, a double-ruled mono mark in stamp ink on approved and sent drafts
 * states: loading, empty, error, full · axes: light/humanist-sans + serif titles/warm graphite · surface: absolute · posture: dense · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the app is dense; serif page titles and tabular figures carry hierarchy so weights can stay at 400 to 500 */
/* Hallmark · app adaptation · Flow's layout; Instrument Sans body, Instrument Serif page titles, Geist Mono for counts and meta; one stamp-ink accent for the chart, rates, stamp, links and focus */
/* Hallmark · answered F4 · search, save, campaign and draft actions share one primary recipe; the running-campaign control is a distinct warm outline */
/* Hallmark · reworded "Overview" to "Dashboard" and "People" to "Search" · user asked for Flow's navigation vocabulary */
/* Hallmark · finish review: user is the judge for every screen, side by side with the live Flow app */
/* Hallmark · waive 39b · .overview-card and .stat are buttons with a label and a figure · each tile opens or filters its queue, so the figure needs the height */
/* Hallmark · waive 7b · white content panel and cards on a #f5f5f5 frame · the user's Dub reference puts every working surface on plain white held by hairline borders */
/* Hallmark · dismissed F7 · cards, tables and inputs share one hairline recipe on purpose; Dub's border-first system is uniform and the user asked for it */
/* Hallmark · dismissed F6 · .stat-label holds status labels, not numerals; the figures in .stat-value are tabular */
@import url("./tokens.css");
@import url("./base.css");

html, body { overflow-x: clip; }
body { min-height: 100dvh; background: var(--color-frame); color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; font-synthesis: none; }
/* the serif is for page titles only; every other heading is the interface face */
h2, h3 { font-family: var(--font-body); font-weight: 500; }
h2 { font-size: var(--text-heading); line-height: 1.2; max-width: none; letter-spacing: 0; }
h3 { font-size: var(--text-lg); line-height: 1.3; max-width: none; letter-spacing: normal; font-weight: 500; }
p { max-width: 75ch; }
strong, b { font-weight: 600; }
button, input, textarea, select, label, legend, th, nav, .pill, .stamp { font-family: var(--font-body); letter-spacing: normal; text-transform: none; }
.muted, .hint, .lede { color: var(--color-muted); }
.small, .hint, .label-sm { font-size: var(--text-sm); }
.hint { margin-top: var(--space-xs); min-height: 1lh; }
.mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
code { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.urn { overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: var(--space-sm); left: var(--space-md); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); }
.skip:not(:focus-visible) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus-visible { padding: var(--space-xs) var(--space-md); }
.icon { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; }
.icon svg { width: 100%; height: 100%; }

/* ---------- shell ---------- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); max-width: var(--container); margin-inline: auto; min-height: 100dvh; }
.workspace-nav { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; padding: var(--space-md) var(--space-sm); background: var(--color-sidebar); }
.brand-row { display: flex; align-items: center; justify-content: space-between; min-height: 2.5rem; margin-bottom: var(--space-md); padding-inline: var(--space-xs); }
.brand { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; letter-spacing: 0; color: var(--color-ink-strong); }
.brand-mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--color-action); color: var(--color-action-ink); font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; }
.navigation-disclosure { display: flex; flex-direction: column; flex: 1; }
.navigation-disclosure > summary { display: none; }
.navigation-disclosure[open] { display: flex; }
.navigation-disclosure::details-content { display: contents; }
.rail { display: grid; gap: var(--space-3xs); }
.rail-group { margin: var(--space-md) 0 var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
#saved-list-shortcuts { display: grid; gap: var(--space-3xs); }
.saved-shortcut { min-width: 0; overflow: hidden; justify-content: flex-start; gap: var(--space-xs); width: 100%; min-height: 2.125rem; padding: 0 var(--space-xs); border-color: var(--color-clear); background: var(--color-clear); color: var(--color-ink-2); font-size: var(--text-md); font-weight: 400; }
.saved-shortcut:hover:not(:disabled) { background: var(--color-paper-3); border-color: var(--color-clear); }
.saved-shortcut[aria-pressed="true"] { color: var(--color-ink-strong); font-weight: 500; }
.saved-shortcut .list-name { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.list-mark { display: inline-grid; place-items: center; flex: none; width: 1rem; height: 1rem; }
.saved-shortcut .list-dot { margin: 0; }
.saved-shortcut .list-dot.on { background: var(--color-success); }
.saved-shortcut .muted { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rail button { justify-content: flex-start; gap: var(--space-xs); width: 100%; min-height: 2.125rem; padding: 0 var(--space-xs); border-color: var(--color-clear); background: var(--color-clear); box-shadow: none; color: var(--color-ink-2); font-size: var(--text-md); font-weight: 500; }
.rail button .icon { width: 1rem; height: 1rem; color: var(--color-muted); }
.rail-label { flex: 1; text-align: left; }
.rail button:hover:not(:disabled) { background: var(--color-paper-3); color: var(--color-ink); }
.rail button[aria-current="page"] { background: var(--color-accent-soft); box-shadow: none; color: var(--color-ink-strong); }
.rail button[aria-current="page"] .icon { color: var(--color-ink); }
.count { min-width: 1.25rem; padding: 0 .375rem; border-radius: 4px; background: var(--color-clear); color: var(--color-muted); font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 400; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; }

.count:empty { display: none; }
.count-stop { background: var(--color-error-bg); color: var(--color-error); }
.workspace-card { margin-top: auto; padding: var(--space-sm) var(--space-sm) var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); font-size: var(--text-sm); }
.workspace-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.workspace-card h2 { font-size: var(--text-sm); font-weight: 500; letter-spacing: normal; }
#workspace-mode { color: var(--color-muted); font-size: var(--text-xs); }
.workspace-line { display: flex; align-items: center; gap: var(--space-xs); min-height: 2rem; color: var(--color-ink-2); }
.workspace-line .icon, .connection-details summary .icon { color: var(--color-muted); }
.connection-details { margin: 0; }
.connection-details > summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 2rem; cursor: pointer; color: var(--color-ink-2); list-style: none; }
.connection-details > summary::-webkit-details-marker { display: none; }
#connection-state { margin-left: auto; color: var(--color-muted); }
.lamps { display: grid; gap: var(--space-xs); padding: var(--space-xs) 0; }
.lamp { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; min-width: 0; }
.lamp-label { color: var(--color-muted); }
.lamp .urn { font-size: var(--text-xs); width: 100%; color: var(--color-muted); }
.lamp-go strong { color: var(--color-success); }
.lamp-warn strong, .lamp-stop strong { color: var(--color-warn); }
#connection-help p { overflow-wrap: anywhere; }
.workspace-body { min-width: 0; margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); overflow: clip; }
.banners { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-xl) 0; }
.banners:empty { padding: 0; }
.banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); width: fit-content; max-width: 100%; min-height: 1.75rem; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-mist); color: var(--color-muted); font-size: var(--text-sm); }
.banner strong { color: var(--color-ink); }
.banner-hot, .banner-warn { background: var(--color-warn-bg); border-color: var(--color-warn-bg); color: var(--color-warn); }
.banner-hot strong, .banner-warn strong { color: var(--color-warn); }
.banner-stop { background: var(--color-error-bg); border-color: var(--color-error-bg); color: var(--color-error); }
.banner-stop strong { color: var(--color-error); }
.banner button { margin-left: var(--space-xs); }
.content-frame { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100dvh - var(--space-md) - 2px); }
.content-frame.with-person { grid-template-columns: minmax(0, 1fr) var(--person-width); }
.shell { min-width: 0; padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.screen-head .lede { display: none; }
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin: 0 calc(-1 * var(--space-xl)) var(--space-lg); padding: 0 var(--space-xl) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.screen-head > div { min-width: 0; }
.screen-head h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; line-height: 1.14; letter-spacing: -.022em; }
.screen-head .lede { font-size: var(--text-md); margin-top: var(--space-3xs); max-width: 70ch; color: var(--color-faint); }
.screen-head > button { flex-shrink: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }

/* ---------- controls ---------- */
button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-height); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-md); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; }
button .icon { width: 1rem; height: 1rem; }
button::before { content: ""; position: absolute; inset: calc(-1 * var(--hit-expand)); }
button:hover:not(:disabled) { background: var(--color-mist); border-color: var(--color-rule-2); }
button:active:not(:disabled) { background: var(--color-paper-3); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; } /* headings take focus on navigation for screen readers; not an interactive target */
button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button.primary, button.go { background: var(--color-action); color: var(--color-action-ink); border-color: var(--color-action); box-shadow: var(--shadow-card); }
button.primary:hover:not(:disabled), button.go:hover:not(:disabled) { background: var(--color-action-hover); border-color: var(--color-action-hover); }
button.primary:active:not(:disabled), button.go:active:not(:disabled) { background: var(--color-ink-2); }
button.small { min-height: var(--control-height-sm); padding-inline: var(--space-sm); font-size: var(--text-sm); --hit-expand: 4px; }
button.quiet, button.ghost { border-color: var(--color-clear); background: var(--color-clear); box-shadow: none; color: var(--color-muted); }
button.ghost:hover:not(:disabled), button.quiet:hover:not(:disabled) { color: var(--color-ink); }
button.danger { color: var(--color-error); }
button.text-action { min-height: 0; padding: 0; gap: var(--space-2xs); border: 0; background: none; box-shadow: none; color: var(--color-accent-deep); font-size: var(--text-sm); }
button.text-action:hover:not(:disabled) { background: none; color: var(--color-accent-deep); }
button.text-action .icon { width: 1rem; height: 1rem; }
button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--color-accent-deep); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover:not(:disabled) { background: none; color: var(--color-accent-deep); }
button.campaign-toggle.running .icon { color: var(--color-muted); }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: var(--color-clear); border-radius: var(--radius-pill); animation: progress-turn 900ms linear infinite; }
@keyframes progress-turn { to { transform: rotate(360deg); } }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="number"], input[type="time"], select, textarea { width: 100%; min-width: 0; height: var(--control-height); padding: 0 var(--space-sm); border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; }
select { appearance: none; padding-right: var(--space-xl); background-image: linear-gradient(45deg, var(--color-clear) 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, var(--color-clear) 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--color-faint); opacity: 1; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--color-rule-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: -1px; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color-error); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; flex: none; }
textarea { height: auto; min-height: 120px; resize: vertical; padding: var(--space-sm); }
label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-xs); }
form > label:not(:first-child) { margin-top: var(--space-lg); }
label.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 2.5rem; margin: 0; font-weight: 400; font-size: var(--text-md); }
fieldset { padding: 0; margin: var(--space-md) 0 0; min-width: 0; border: 0; }
legend { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-xs); padding: 0; }
fieldset.inline { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
fieldset.inline legend { width: 100%; }
.problem { color: var(--color-error); font-size: var(--text-sm); margin-block: var(--space-xs); min-height: 1lh; }
.problem:empty { display: none; }
.row { display: flex; align-items: center; gap: var(--space-xs); }
.row input { flex: 1; min-width: 0; }
.row button { flex-shrink: 0; }
.search-field { position: relative; display: block; margin: 0; font-weight: 400; }
.search-field > .icon { position: absolute; left: var(--space-sm); top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; color: var(--color-faint); pointer-events: none; }
.search-field input { padding-left: var(--space-xl); }

/* ---------- search ---------- */
.query-strip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.query-go { padding-top: calc(var(--text-sm) * 1.5 + var(--space-xs)); }
.query-note { margin: 0 0 0 auto; min-height: 0; }
.query-where #geo-status:empty { display: none; }
#geo-choices .choices { margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); box-shadow: var(--shadow-pop); }
#geo-choices legend { padding-top: var(--space-xs); color: var(--color-muted); font-weight: 400; }
.query-strip form { min-width: 0; }
.location-summary { display: flex; gap: var(--space-xs); align-items: baseline; flex-wrap: wrap; padding: var(--space-md) 0; font-size: var(--text-sm); }
.label-sm { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); min-width: 0; }
.chip { min-height: 2rem; padding-inline: var(--space-sm); --hit-expand: 6px; max-width: 100%; border-radius: var(--radius-input); background: var(--color-paper-2); border-color: var(--color-rule); color: var(--color-ink); box-shadow: none; font-size: var(--text-sm); }
.choices { padding: var(--space-sm) 0; }
.results { border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.results-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.results-head h3 { font-size: var(--text-md); }
.results-head p { font-size: var(--text-sm); }
.results .pager, .results .savebar { margin: 0; padding: var(--space-sm) var(--space-lg); }

/* ---------- tables ---------- */
.table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
thead { background: var(--color-surface); color: var(--color-faint); }
thead th { height: 2.5rem; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--color-rule); }
th, td { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
tbody tr { height: var(--row-height); }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 500; min-width: 140px; }
tbody tr:hover { background: var(--color-mist); }
tr.selected-record, tr.selected-record:hover { background: var(--color-paper-2); }
.people-table tbody th { width: 28%; }
.c-check { width: 44px; min-width: 44px; padding-inline: 0; text-align: center; }
.c-check input { margin: 0; }
.row-pick { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 40px; min-width: 40px; margin: 0; cursor: pointer; }
.mobile-pick-label { display: none; }
.who { display: block; font-size: var(--text-md); color: var(--color-ink); }
.person-open { min-height: 1.9rem; padding: 0; --hit-expand: 6px; border: 0; background: var(--color-clear); box-shadow: none; text-align: left; font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.person-open:hover:not(:disabled) { background: var(--color-clear); color: var(--color-accent); }
.profile { display: inline-block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); text-decoration-color: var(--color-rule-2); }
.profile:hover { color: var(--color-accent); }
.empty-row, .empty-row:hover { height: auto; background: none; }
.empty-row td { padding: var(--space-2xl) var(--space-md); color: var(--color-muted); text-align: center; }
.savebar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); }
.savebar strong { font-size: var(--text-sm); margin-right: auto; }
.savebar input { width: min(100%, 240px); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); }
.pager:not(:has(button:not([hidden]))) { display: none; }
.empty-state { padding: var(--space-2xl) var(--space-lg); max-width: 54ch; }
.empty-state h3 { font-size: var(--text-lg); }
.empty-state p { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-muted); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 500; }
.avatar.tint-0 { background: var(--color-paper-2); border-color: var(--color-rule); color: var(--color-ink-2); }
.avatar.tint-1 { background: var(--color-success-bg); border-color: var(--color-success-bg); color: var(--color-success); }
.avatar.tint-2 { background: var(--color-info-bg); border-color: var(--color-info-bg); color: var(--color-info); }
.avatar.tint-3 { background: var(--color-warn-bg); border-color: var(--color-warn-bg); color: var(--color-warn); }
.who-cell { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.row-role { display: block; color: var(--color-ink-2); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-actions { width: 1%; text-align: right; white-space: nowrap; }
.c-updated { white-space: nowrap; }
.people-status td[data-label="Location"] { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-card { border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; min-height: 3.6rem; padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--color-rule); }
.pages { display: flex; gap: var(--space-2xs); }
.pages .page-num { min-width: var(--control-height-sm); padding: 0; }
.pages .page-num[aria-current="page"] { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-ink); }

/* ---------- person panel ---------- */
.person-panel { min-width: 0; padding: var(--space-lg); border-left: 1px solid var(--color-rule); background: var(--color-surface); align-self: start; position: sticky; top: var(--space-xs); max-height: calc(100dvh - var(--space-xs)); overflow-y: auto; }
.person-panel > h2 { margin-top: var(--space-md); font-size: var(--text-xl); font-weight: 500; }
.person-headline { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.record-facts { display: grid; gap: var(--space-2xs); padding: 0; margin: var(--space-lg) 0; font-size: var(--text-sm); }
.record-facts dt { color: var(--color-muted); }
.record-facts dd { margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
.person-panel > .primary { margin-top: var(--space-lg); width: 100%; }
.person-next { margin-top: var(--space-lg); }
.person-next button { width: 100%; margin-top: var(--space-sm); }
.person-history { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.person-history h3 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.person-history ul { list-style: none; padding: 0; margin: 0; }
.action-record { display: grid; justify-content: start; width: 100%; padding: var(--space-sm) 0; white-space: normal; border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; background: var(--color-clear); box-shadow: none; text-align: left; }
.action-record strong, .action-record span, .action-record time { display: block; font-size: var(--text-sm); }
.technical-detail { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.technical-detail summary { min-height: 32px; cursor: pointer; }
.technical-detail code, .technical-detail p { display: block; margin-top: var(--space-xs); }

/* ---------- outreach ---------- */
.grid-side { display: grid; grid-template-columns: var(--list-pane) minmax(0, 1fr); gap: var(--space-xl); }
.list-index { min-width: 0; padding-right: var(--space-lg); border-right: 1px solid var(--color-rule); }
.pane-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.pane-label h3 { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); letter-spacing: normal; }
.list-index .search-field { margin-bottom: var(--space-sm); }
.picklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
.picklist li { min-width: 0; }
.picklist button { justify-content: flex-start; width: 100%; min-width: 0; min-height: 2.75rem; gap: var(--space-xs); padding-inline: var(--space-sm); border-color: var(--color-clear); background: var(--color-clear); box-shadow: none; text-align: left; font-size: var(--text-md); }
.list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count-pill { flex: none; min-width: 2.2rem; padding: 0 var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-align: center; line-height: 1.6; font-variant-numeric: tabular-nums; }
.list-state { width: 1rem; height: 1rem; }
.list-state-active { color: var(--color-success); }
.list-state-paused, .list-state-draft { color: var(--color-muted); }
.list-dot { flex: none; width: .5rem; height: .5rem; margin-inline: .25rem; border-radius: var(--radius-pill); background: var(--color-faint); }
.picklist button[aria-pressed="true"] { background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink-strong); }
.picklist button[aria-pressed="true"]:hover:not(:disabled) { background: var(--color-paper-2); }

.picklist button[aria-pressed="true"] .count-pill { border-color: var(--color-rule); background: var(--color-surface); color: var(--color-ink); }
.list-detail { min-width: 0; }
.pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.pane-title { min-width: 0; }
.pane-head h3 { font-size: var(--text-xl); font-weight: 500; }
.pane-controls { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.campaign-pick { margin: 0; }
.campaign-pick select { width: auto; max-width: 240px; }
.campaign-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); max-width: none; }
.state-chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.5rem; padding: 0 .625rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; }
.state-active { background: var(--color-success-bg); color: var(--color-success); }
.state-paused { background: var(--color-warn-bg); color: var(--color-warn); }
.state-draft, .state-none { background: var(--color-paper-2); color: var(--color-muted); }
.stats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: var(--space-md) 0 0; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.stat-total strong { color: var(--color-ink); font-weight: 600; }
.stats > .stat { gap: var(--space-2xs); min-height: 1.9rem; padding: 0 var(--space-2xs); border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.stats > .stat:hover:not(:disabled) { background: var(--color-paper-2); color: var(--color-ink); }
.stats > .stat[aria-pressed="true"] { background: var(--color-paper-2); color: var(--color-ink-strong); }
.stat-value { color: var(--color-ink); font-weight: 600; }
.stats .zero .stat-value { color: var(--color-muted); font-weight: 500; }
.stat-progress { margin-left: auto; }
.toolbar { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; }
.toolbar .grow { flex: 1; min-width: 0; }
.toolbar select { width: 13rem; }
.people-status tbody th { width: 24%; }
.person-status { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 1.5rem; padding: 0; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; background: var(--color-clear); color: var(--color-ink-2); }
.person-status::before { content: ""; width: .5rem; height: .5rem; flex: none; border-radius: var(--radius-pill); background: var(--color-silver); }
.status-kind { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.person-status-none, .person-status-cancelled { color: var(--color-muted); }
.person-status-draft::before { background: var(--color-warn-solid); }
.person-status-approved::before, .person-status-sending::before { background: var(--color-info); }
.person-status-sent::before { background: var(--color-success); }
.person-status-unknown { color: var(--color-error); }
.person-status-unknown::before { background: var(--color-error); }

/* ---------- campaigns ---------- */
.campaign-table > h3 { margin-bottom: var(--space-md); font-size: var(--text-md); }
.campaign-table .table-wrap { border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
#campaign-rows > p { padding: var(--space-xl) var(--space-lg); }
.campaign-compose { margin-bottom: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.campaign-create { max-width: 720px; margin-top: var(--space-md); }
.form-grid, .composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.form-grid > div, .composer-grid > div { min-width: 0; }
.campaign-create .primary { margin-top: var(--space-md); }
.campaign-progress span { display: block; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-xs); border-radius: 4px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; background: var(--color-paper-2); }
.stamp { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-muted); }
.stamp .icon { width: .875rem; height: .875rem; }
.pill-active { color: var(--color-success); background: var(--color-success-bg); }
.pill-paused { color: var(--color-warn); background: var(--color-warn-bg); }
.stamp-unknown { color: var(--color-warn); }
.pill-draft { color: var(--color-muted); }
/* Approved and sent carry the stamp: a check and stamp ink, no box, so it never reads as a button */
.stamp-approved, .stamp-sending, .stamp-sent { color: var(--color-stamp); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
td.actions { display: table-cell; margin: 0; white-space: nowrap; }
td.actions button + button { margin-left: var(--space-xs); }
td.actions button { vertical-align: middle; }
.panel { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.panel > p { margin-top: var(--space-xs); font-size: var(--text-sm); }
.composer-grid { margin-top: var(--space-lg); }
.members { max-height: 320px; overflow-y: auto; }

/* ---------- review and inbox ---------- */
.review-assurance { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.filters { display: flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-md); padding: var(--space-2xs); width: fit-content; max-width: 100%; border-radius: var(--radius-input); background: var(--color-paper-2); overflow-x: auto; }
.filters button { min-height: var(--control-height-sm); border-color: var(--color-clear); background: var(--color-clear); box-shadow: none; color: var(--color-muted); font-size: var(--text-sm); }
.filters button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); }
.filters span { font-variant-numeric: tabular-nums; }
.review-workbench { display: grid; grid-template-columns: var(--queue-width) minmax(0, 1fr); min-height: 460px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.review-queue { min-width: 0; border-right: 1px solid var(--color-rule); max-height: calc(100dvh - 220px); overflow-y: auto; }
.queue-item { position: relative; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.queue-item:hover { background: var(--color-paper-2); }
.queue-item:has([aria-pressed="true"]) { background: var(--color-paper-2); }
.queue-select { position: static; display: block; width: 100%; min-height: 0; padding: 0; border: 0; background: var(--color-clear); box-shadow: none; text-align: left; font-size: var(--text-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.queue-select::before { inset: 0; }
.queue-select:hover:not(:disabled) { background: var(--color-clear); color: var(--color-accent); }
.queue-context, .queue-preview { display: block; font-size: var(--text-sm); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-preview { display: -webkit-box; margin-top: var(--space-2xs); white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.queue-meta { display: flex; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.queue-empty { padding: var(--space-lg); }
.queue-group { margin: 0; padding: var(--space-md) var(--space-md) var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); border-top: 1px solid var(--color-rule); }
.queue-hold { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-2xs) var(--space-md) var(--space-xs); font-size: var(--text-sm); border-bottom: 1px solid var(--color-rule); }
.queue-item.unread .queue-select { font-weight: 600; color: var(--color-ink-strong); }
.queue-item:not(.unread) .queue-select { font-weight: 500; }
.queue-item.unread .queue-preview { color: var(--color-ink-2); }
#inbox-meta { margin-block: 0 var(--space-sm); }
#inbox-meta:empty { display: none; }
.conversation { padding: var(--space-lg); min-width: 0; }
.conversation .quote { font-size: var(--text-lg); line-height: 1.6; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); }
.button-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-height); padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); color: var(--color-ink); font-size: var(--text-md); font-weight: 500; text-decoration: none; }
.button-link:hover { background: var(--color-paper-2); }
.button-link:active { background: var(--color-paper-3); }
.button-link.primary-link { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-ink); }
.button-link.primary-link:hover { background: var(--color-action-hover); }
.slips { min-width: 0; }
.slips > .empty-state { padding: var(--space-xl); }
.slip { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: var(--space-lg); padding: var(--space-lg); min-width: 0; width: 100%; }
.slip-head { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.slip-head h3 { font-size: var(--text-xl); }
.draft-context { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.draft-context span + span { border-left: 1px solid var(--color-rule-2); padding-left: var(--space-sm); }
.stamps { display: grid; gap: var(--space-xs); justify-items: end; }
.letter { font: 400 var(--text-md)/1.65 var(--font-body); }
.slip > label { grid-column: 1; }
.slip textarea { grid-column: 1; min-height: 260px; padding: var(--space-md); }
.slip-meta { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: stretch; gap: var(--space-lg); padding-left: var(--space-lg); border-left: 1px solid var(--color-rule); }
.inline-label { display: grid; gap: var(--space-xs); margin: 0; }
.inline-label input { width: 100%; font-size: var(--text-sm); }
.blockers, .slip-note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }
.blockers.ready { color: var(--color-success); }
.slip .actions, .slip > .technical-detail, .slip > .problem { grid-column: 1 / -1; }
.slip .actions .danger { margin-left: auto; }
.quote { grid-column: 1 / -1; margin: var(--space-md) 0; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.warnbox { grid-column: 1 / -1; padding: var(--space-md); background: var(--color-warn-bg); color: var(--color-warn); border-radius: var(--radius-input); }

/* ---------- dashboard ---------- */
.overview { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-md); }
.metric-card, .tasks-card { min-width: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.metric-head, .tasks-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.metric-label, .card-title { font-size: var(--text-md); font-weight: 500; color: var(--color-ink); letter-spacing: normal; }
.metric-pick { margin: 0; }
.metric-pick select { field-sizing: content; width: auto; height: 2rem; padding-left: 0; padding-right: 1.25rem; background-position: calc(100% - 9px) 52%, calc(100% - 4px) 52%; border-color: var(--color-clear); background-color: var(--color-clear); font-size: var(--text-md); font-weight: 500; color: var(--color-muted); }
.metric-pick select:hover:not(:disabled) { border-color: var(--color-clear); color: var(--color-ink); }
.metric-range { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2rem; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); font-size: var(--text-md); color: var(--color-ink-2); }
.metric-range .icon { width: 1rem; height: 1rem; color: var(--color-muted); }
.metric-value { margin-top: var(--space-xs); font: 500 var(--text-4xl)/1.1 var(--font-body); letter-spacing: -.02em; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.metric-unit { font-size: var(--text-lg); color: var(--color-faint); letter-spacing: normal; }
.chart-wrap { margin-top: var(--space-md); }
.metric-card { display: flex; flex-direction: column; }
.chart-wrap { display: flex; flex: 1; flex-direction: column; min-height: 13rem; }
.chart-plot { display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); min-height: 0; }
.chart-ticks { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: .1rem 0 1.1rem; line-height: 13px; font-size: var(--text-sm); color: var(--color-faint); text-align: right; font-variant-numeric: tabular-nums; }
.chart-area-box { position: relative; min-height: 13rem; }
.chart { display: block; width: 100%; height: 100%; min-height: 13rem; overflow: visible; }
.chart-end { position: absolute; width: .625rem; height: .625rem; margin: -.3125rem 0 0 -.3125rem; border: 2px solid var(--color-surface); border-radius: var(--radius-pill); background: var(--color-chart); }
.chart-grid { stroke: var(--color-rule); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--color-chart); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; justify-content: space-between; margin: var(--space-xs) 0 0 var(--space-xl); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-faint); }
.tasks-lead { display: grid; gap: var(--space-sm); justify-items: start; margin: var(--space-md) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.tasks-lead p { font-size: var(--text-lg); font-weight: 500; color: var(--color-ink-strong); }
.side-stack { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-md); min-width: 0; }
.tasks-card { padding: var(--space-md) var(--space-lg); }
.tasks-card .card-title { margin-bottom: var(--space-xs); }
.tasks-card .metric-head { margin-bottom: var(--space-xs); }
.task-text { display: grid; flex: 1; min-width: 0; }
.task-text .task-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-sub { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-count.zero { color: var(--color-faint); }
.tasks { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.task { justify-content: flex-start; gap: var(--space-sm); width: 100%; min-height: 2.5rem; padding: 0 var(--space-xs); border-color: var(--color-clear); background: var(--color-clear); text-align: left; }
.task:hover:not(:disabled) { background: var(--color-mist); border-color: var(--color-clear); }
.task-hot { background: var(--color-mist); }
.task-icon { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-ink-2); }
.task-icon .icon { width: 1rem; height: 1rem; }
.task-label { flex: 1; font-weight: 500; color: var(--color-ink); }
.task-count { min-width: 1.75rem; padding: 0 var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-clear); color: var(--color-ink-2); font-size: .8125rem; font-weight: 500; line-height: 1.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.overview-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); font-variant-numeric: tabular-nums; }
.overview-card { display: grid; justify-content: stretch; justify-items: stretch; align-content: start; gap: var(--space-3xs); min-height: 0; padding: var(--space-md) var(--space-lg); border: 0; border-radius: 0; background: var(--color-surface); box-shadow: -1px -1px 0 var(--color-rule); text-align: left; white-space: normal; }
.overview-label { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; }
.overview-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); min-width: 0; }
.overview-note { font-size: var(--text-sm); font-weight: 400; color: var(--color-faint); }
.overview-value { font: 500 var(--text-2xl)/1.25 var(--font-body); color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.overview-card:hover:not(:disabled) { background: var(--color-mist); }
.log-heading { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) 0; font-size: var(--text-md); font-weight: 500; color: var(--color-ink); }
.activity-card { border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.log { padding: var(--space-xs) var(--space-lg) var(--space-sm); margin: 0; list-style: none; }
.log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); align-items: center; }
.log-icon { width: 1.75rem; height: 1.75rem; }
.log li:last-child { border-bottom: 0; }
.log time { grid-column: 3; grid-row: 1; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.log .activity-text { font-size: var(--text-md); font-weight: 500; color: var(--color-ink); }

/* ---------- overlays ---------- */
.toasts { position: fixed; z-index: var(--z-toast); top: var(--space-lg); right: var(--space-lg); width: min(440px, calc(100% - var(--space-xl))); display: grid; gap: var(--space-xs); pointer-events: none; }
.toast { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-md); box-shadow: var(--shadow-pop); }
.toast-stop { border-color: var(--color-error); color: var(--color-error); }
dialog { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100% - var(--space-lg))); max-height: calc(100dvh - var(--space-xl)); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-ink); z-index: var(--z-modal); overflow-y: auto; box-shadow: var(--shadow-pop); }
dialog::backdrop { background: var(--color-overlay); }
dialog h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
dialog p { font-size: var(--text-sm); color: var(--color-muted); }
.facts { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); font-size: var(--text-sm); padding: var(--space-lg) 0; margin: var(--space-lg) 0; border-block: 1px solid var(--color-rule); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
dialog .check { padding-top: var(--space-md); font-size: var(--text-sm); }
#ap-go { max-width: 100%; overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 100rem) {
  .c-updated, .people-status thead th.c-updated-h { display: none; }
}
@media (max-width: 80rem) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root { --person-width: 19rem; --queue-width: 15rem; --list-pane: 14rem; }
  .with-person .query-strip { grid-template-columns: minmax(0, 1fr); }
  .with-person .query-go { padding-top: 0; }
  .slip { display: block; }
  .slip-meta { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 0; padding: var(--space-md) 0; }
}
@media (max-width: 60rem) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .workspace-nav { z-index: var(--z-sticky-nav); height: auto; max-height: 100dvh; padding: var(--space-xs) var(--space-md); border-right: 0; border-bottom: 1px solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .brand-row { margin: 0; min-height: 2.75rem; }
  .navigation-disclosure { display: contents; }
  .navigation-disclosure > summary { display: inline-grid; place-items: center; grid-column: 2; grid-row: 1; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-input); cursor: pointer; list-style: none; }
  .navigation-disclosure > summary::-webkit-details-marker { display: none; }
  .navigation-disclosure > summary .icon { width: 1.2rem; height: 1.2rem; }
  .rail, .workspace-card { grid-column: 1 / -1; }
  .navigation-disclosure:not([open]) .rail, .navigation-disclosure:not([open]) .workspace-card, .navigation-disclosure:not([open]) .saved-navigation { display: none; }
  .saved-navigation { grid-column: 1 / -1; }
  .workspace-body { margin: 0; border-inline: 0; border-radius: 0; }
  .rail { padding: var(--space-xs) 0; }
  .workspace-card { margin: 0 0 var(--space-sm); }
  .shell { padding: var(--space-lg) var(--space-md); }
  .screen-head { margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); }
  .banners { padding: var(--space-sm) var(--space-md) 0; }
  .content-frame { min-height: 0; }
  .content-frame.with-person { grid-template-columns: minmax(0, 1fr); }
  .content-frame.with-person .shell { display: none; }
  .person-panel { position: static; width: 100%; max-height: none; border: 0; }
  .query-strip { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .query-go { padding-top: 0; }
  .query-go button { width: 100%; }
  .query-note { flex-basis: 100%; margin: 0; }
  .grid-side { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .list-index { border-right: 0; padding: 0; }
  .picklist { max-height: 13rem; overflow-y: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-2xs); }
}
@media (max-width: 40rem) {
  :root { --control-height: 3.2rem; --control-height-sm: 3rem; --hit-expand: 0px; }
  .screen-head { flex-wrap: wrap; gap: var(--space-md); }
  .screen-head h2 { font-size: var(--text-2xl); }
  .row { flex-wrap: wrap; }
  .row input { flex-basis: 100%; }
  .row button { width: 100%; }
  .chip, .person-open { min-height: 3rem; }
  .savebar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .savebar input { width: 100%; }
  .form-grid, .composer-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-progress { margin-left: 0; }
  .overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-card { padding: var(--space-md); min-height: 6.5rem; }
  .next-step { flex-direction: column; align-items: stretch; padding: var(--space-md); }
  .pane-controls { width: 100%; }
  .pane-controls > button { flex: 1 1 auto; }
  .toolbar { flex-wrap: wrap; }
  .toolbar select { width: 100%; }
  .filters button { min-height: 3rem; }
  .review-workbench { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .review-queue { border-right: 0; border-bottom: 1px solid var(--color-rule); max-height: 22rem; }
  .people-status thead, .people-table thead th:not(.c-check) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .people-table thead tr { display: flex; height: auto; padding: var(--space-xs) var(--space-md); }
  .mobile-pick-label { display: inline; font-weight: 500; }
  .people-table thead .row-pick { justify-content: flex-start; }
  .people-table tr, .people-status tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); height: auto; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .people-table td, .people-table th, .people-status td, .people-status th { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
  .people-status tbody th, .people-table tbody th { grid-column: 1 / -1; width: auto; }
  .people-status .c-role { grid-column: 1 / -1; }
  .people-status td[data-label="Location"] { grid-column: 1; }
  .people-status td[data-label="Status"] { grid-column: 2; grid-row: 3 / span 2; text-align: right; }
  .people-status .c-actions { grid-column: 1; text-align: left; }
  .row-role { white-space: normal; }
  .people-table .c-check { grid-column: 2; grid-row: 1; width: auto; }
  .people-table td[data-label] { grid-column: 1 / -1; color: var(--color-muted); }
  .empty-row { display: block !important; }
  .table-foot { justify-content: center; }
  .log li { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); }
  .log time { grid-column: 2; grid-row: 2; }
  .slip { padding: var(--space-md); }
  .conversation { padding: var(--space-md); }
}

/* ---------- inbox ---------- */
.inbox-shell { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); height: calc(100dvh - 4.75rem); min-height: 34rem; /* fills the frame below its top padding */ border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.inbox-queue { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--color-rule); background: var(--color-surface); }
.inbox-tools { display: grid; gap: var(--space-sm); padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
/* inbox filters: one row of underline tabs that scrolls sideways when the pane is narrow, never wraps */
.inbox-tools .filters { display: flex; flex-wrap: nowrap; gap: var(--space-sm); width: 100%; margin: 0; padding: 0; overflow-x: auto; border-radius: 0; border-bottom: 1px solid var(--color-rule); background: none; scrollbar-width: none; }
.inbox-tools .filters::-webkit-scrollbar { display: none; }
.inbox-tools .filters button { flex: none; gap: var(--space-2xs); min-height: 2.25rem; padding: 0 0 2px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -2px 0 var(--color-clear); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.inbox-tools .filters button:hover:not(:disabled) { background: none; color: var(--color-ink); }
.inbox-tools .filters button[aria-pressed="true"] { background: none; box-shadow: inset 0 -2px 0 var(--color-action); color: var(--color-ink-strong); }
.inbox-tools .filters .count { min-width: 0; padding: 0; background: none; color: var(--color-faint); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; }
.inbox-tools .filters button[aria-pressed="true"] .count { color: var(--color-ink-2); }
.inbox-list { flex: 1; overflow-y: auto; }
.inbox-list .queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.queue-body { display: grid; gap: var(--space-3xs); min-width: 0; }
.queue-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); min-width: 0; }
.queue-top .queue-select { flex: 1; min-width: 0; font-size: var(--text-md); white-space: nowrap; }
.queue-time { flex: none; font-size: var(--text-sm); color: var(--color-faint); }
.inbox-list .queue-preview { -webkit-line-clamp: 1; margin: 0; }
.queue-tags, .thread-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); min-width: 0; }
.queue-tags:empty { display: none; }
.tag-chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 1.5rem; padding: 0 var(--space-xs); border-radius: 4px; background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-blue { gap: var(--space-2xs); background: var(--color-info-bg); color: var(--color-info); }
.tag-blue .icon { width: .75rem; height: .75rem; }
.queue-tags { flex-wrap: nowrap; overflow: hidden; }
.tag-amber { background: var(--color-warn-bg); color: var(--color-warn); }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .625rem; }
.avatar-lg { width: 2.75rem; height: 2.75rem; font-size: var(--text-md); }
.inbox-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--color-mist); }
.thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.thread-head { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); background: var(--color-surface); }
.thread-who { flex: 1; display: grid; gap: var(--space-2xs); min-width: 0; }
.thread-who h3 { font-size: var(--text-xl); display: flex; align-items: center; gap: var(--space-2xs); }
.thread-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.thread-actions .button-link { min-height: var(--control-height); font-size: var(--text-md); padding-inline: var(--space-sm); }
.thread-actions .button-link .icon { width: 1rem; height: 1rem; }
.thread-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.thread-day { align-self: center; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.75rem; }
.bubble-row { display: flex; align-items: flex-end; gap: var(--space-xs); max-width: 78%; }
.bubble-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.bubble { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--radius-sm); background: var(--color-surface); }
.bubble p { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); max-width: none; overflow-wrap: anywhere; }
.bubble time { font-size: var(--text-sm); color: var(--color-faint); }
.bubble-deleted p { font-style: italic; color: var(--color-muted); }
/* Replies waiting to go out: same side as yours, dashed and quiet, with their own small actions. */
.mine .bubble.bubble-queued { border: 1.5px dashed var(--color-rule-2, #c9c6c0); background: transparent; color: var(--color-ink); }
.mine .bubble.bubble-queued p { color: var(--color-ink); }
.bubble-queued .queued-when { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-muted); }
.bubble-queued .queued-when .icon { width: .8rem; height: .8rem; }
.queued-actions { display: flex; align-self: center; gap: 2px; padding: 2px; border: 1px solid var(--color-rule); border-radius: 999px; background: var(--color-surface); }
.queued-actions button { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--color-muted); }
.queued-actions button:hover { background: var(--color-surface-sunk, #0000000d); color: var(--color-ink); }
.queued-actions .icon { width: .9rem; height: .9rem; }
.bubble-target { outline: 2px solid var(--color-action); outline-offset: 2px; }
.composer-editing { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.composer-editing .icon { width: .9rem; height: .9rem; }
.composer-editing button { margin-left: auto; }
/* A small floating chip on the bubble's top edge, shown on hover, like LinkedIn's message actions. */
.bubble-row { position: relative; }
.msg-actions { position: absolute; top: -10px; right: calc(100% - 14px); z-index: 2; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--color-rule); border-radius: 999px; background: var(--color-surface); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; }
.bubble-row:hover .msg-actions, .msg-actions:hover, .msg-actions:focus-within { opacity: 1; visibility: visible; transition-delay: 0s; }
/* An invisible bridge to the bubble, and a short delay before hiding, so the chip stays while the pointer travels to it. */
.msg-actions::after { content: ""; position: absolute; inset: -6px -16px -6px -6px; z-index: -1; }
.bubble-row:not(:hover) .msg-actions:not(:hover) { transition-delay: .25s; }
.msg-actions button { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--color-muted); }
.msg-actions button:hover { background: var(--color-surface-sunk, #0000000d); color: var(--color-ink); }
.msg-actions button:last-child:hover { color: var(--color-error); }
.msg-actions .icon { width: .9rem; height: .9rem; }
@media (hover: none) { .msg-actions { opacity: 1; visibility: visible; } }
.mine .bubble { border-color: var(--color-action); border-radius: var(--radius-card) var(--radius-card) var(--radius-sm) var(--radius-card); background: var(--color-action); }
.mine .bubble p { color: var(--color-action-ink); }
.mine .bubble time { color: var(--color-silver); }
.thread-note { align-self: center; font-size: var(--text-sm); color: var(--color-muted); }
.thread-empty { margin: auto; display: grid; justify-items: center; text-align: center; }
.composer { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); background: var(--color-surface); }
.composer textarea { min-height: 5.5rem; padding: var(--space-sm); font-size: var(--text-lg); }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.composer-foot .hint { display: inline-flex; align-items: center; gap: var(--space-2xs); margin: 0; min-height: 0; }
.composer-foot .hint .icon { width: 1rem; height: 1rem; }
.composer-waiting { grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--color-paper-2); }
.composer-label { font-weight: 500; color: var(--color-ink); }
.composer-quote { margin-top: var(--space-3xs); color: var(--color-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
@media (max-width: 60rem) {
  .inbox-shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .inbox-queue { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .inbox-list { max-height: 20rem; }
  .bubble-row { max-width: 92%; }
  .thread-head { flex-wrap: wrap; }
  .thread-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- API and MCP settings ---------- */
.settings-card { display: grid; gap: var(--space-md); min-width: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.settings-card > * { min-width: 0; }
.settings-head h3 { font-size: var(--text-lg); }
.settings-head p { margin-top: var(--space-2xs); font-size: var(--text-md); }
.key-form { display: flex; gap: var(--space-xs); }
.key-form input { flex: 1; }
.key-reveal { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-warn-bg); color: var(--color-warn); }
.key-reveal strong { color: var(--color-warn); }
.key-reveal > * { min-width: 0; }
.code-row { display: flex; align-items: flex-start; gap: var(--space-xs); min-width: 0; }
.code-row pre { flex: 1; min-width: 0; margin: 0; padding: var(--space-sm); overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-mist); color: var(--color-ink); font: 400 var(--text-sm)/1.6 var(--font-outlier); white-space: pre; }
.setting-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
#mcp-setup { display: grid; gap: var(--space-xs); }
#mcp-setup .code-row + .setting-label { margin-top: var(--space-sm); }
.keys-table tr.revoked th, .keys-table tr.revoked td { color: var(--color-faint); }
.keys-table tbody tr { height: 3rem; }
@media (max-width: 60rem) { .dev-grid { grid-template-columns: minmax(0, 1fr); } .key-form { flex-wrap: wrap; } .keys-table th:nth-child(3), .keys-table td:nth-child(3), .keys-table th:nth-child(4), .keys-table td:nth-child(4) { display: none; } .keys-table th, .keys-table td { min-width: 0; } }

/* ---------- follow-ups and workflows ---------- */
#seq-dialog { width: min(720px, calc(100% - var(--space-lg))); }
.seq-list { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; padding: 0; list-style: none; }
.seq-step { display: grid; gap: var(--space-xs); padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.seq-first { background: var(--color-mist); }
.seq-wait { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-md); }
.seq-wait label { margin: 0; font-size: var(--text-md); font-weight: 500; }
.seq-wait .quiet { margin-left: auto; }
.days-input { width: 4.5rem !important; }
.templates { margin-bottom: var(--space-lg); }
.templates .card-title { margin-bottom: var(--space-sm); }
.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.template { display: grid; justify-items: start; align-content: start; gap: var(--space-xs); min-height: 8.5rem; padding: var(--space-md); white-space: normal; text-align: left; }
.template-name { font-weight: 600; color: var(--color-ink); }
.template-blurb { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); line-height: 1.5; }
.workflow-form { margin-bottom: var(--space-lg); }
.wf-pair { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: var(--space-sm); }
.wf-days { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-md); margin: 0; }
.wf-days legend { width: 100%; }
.day-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.day-pick { display: inline-flex; align-items: center; gap: var(--space-2xs); margin: 0; min-height: var(--control-height); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); font-weight: 500; cursor: pointer; }
.day-pick:has(input:checked) { border-color: var(--color-ink); background: var(--color-surface); color: var(--color-ink-strong); }
.wf-time { display: flex; align-items: center; gap: var(--space-xs); }
.wf-time label { margin: 0; }
.wf-time input { width: auto; }
.workflow-list { display: grid; gap: var(--space-sm); }
.workflow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.workflow.off { background: var(--color-mist); }
.workflow.off h3, .workflow.off .workflow-what { color: var(--color-muted); }
.workflow-main { display: grid; gap: var(--space-2xs); min-width: 0; }
.workflow-main h3 { font-size: var(--text-lg); }
.workflow-what { color: var(--color-ink-2); }
.workflow-when { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.workflow-when .icon { width: 1rem; height: 1rem; color: var(--color-muted); }
.workflow-actions { display: flex; align-items: center; gap: var(--space-xs); flex: none; }
.switch { position: relative; display: inline-block; width: 2.5rem; height: 1.5rem; margin: 0; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-rule-2); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-card); transition: transform var(--dur-micro) var(--ease-out); }
.switch input:checked + span { background: var(--color-accent); }
.switch input:checked + span::after { transform: translateX(1rem); }
.switch input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 80rem) { .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .template-grid { grid-template-columns: minmax(0, 1fr); } .workflow { flex-direction: column; align-items: stretch; } .workflow-actions { justify-content: flex-start; } }

/* ---------- invitations, posts, contact ---------- */
.network-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.network-bar .filters { margin: 0; }
.net-bulk { display: flex; gap: var(--space-xs); }
.net-bulk select { width: auto; }
.net-note { max-width: 28rem; }
.net-age { white-space: nowrap; }
.pair-buttons { display: inline-flex; gap: var(--space-xs); }
.chip-button { min-height: 0; border: 0; cursor: pointer; }
.action-desc { grid-column: 1 / -1; padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-mist); font-size: var(--text-lg); color: var(--color-ink); }
.person-extras { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); justify-items: start; }
.person-extras h3 { font-size: var(--text-md); margin-top: var(--space-xs); }
.person-extras .record-facts { margin: 0; width: 100%; }
.post-list { display: grid; gap: var(--space-sm); width: 100%; margin: 0; padding: 0; list-style: none; }
.post { display: grid; gap: var(--space-xs); padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.post-text { font-size: var(--text-md); color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.post-actions { display: flex; gap: var(--space-xs); align-items: center; }
.post-comment { display: grid; gap: var(--space-xs); }
.post-comment textarea { min-height: 3.5rem; }

/* The side panel narrows list tables, so they drop Location. A drawer floats over the page and narrows nothing. */
.with-person:not(.person-over) .people-status thead th:nth-child(3), .with-person:not(.person-over) .people-status td[data-label="Location"] { display: none; }

/* ---------- sending limits ---------- */
.usage-bar { display: block; height: .375rem; border-radius: var(--radius-pill); background: var(--color-paper-2); overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--color-accent); }
.limits-form { display: grid; gap: var(--space-md); }

/* ---------- connector and setup ---------- */
.tag-green { background: var(--color-success-bg); color: var(--color-success); }
.steps-list { display: grid; gap: var(--space-sm); margin: 0; padding-left: var(--space-lg); }
.steps-list li { padding-left: var(--space-2xs); }
.steps-list .code-row { margin-top: var(--space-xs); }
.pair-code { display: grid; gap: var(--space-2xs); justify-items: start; padding: var(--space-md); border: 1px solid var(--color-accent-soft); border-radius: var(--radius-input); background: var(--color-accent-wash); }
.pair-code strong { font: 600 var(--text-4xl)/1 var(--font-mono); letter-spacing: .18em; color: var(--color-accent-deep); }
.setup-card { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.setup-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.task.done { opacity: 1; background: var(--color-mist); }
.task.done .task-label { color: var(--color-muted); text-decoration: line-through; }
.task.done .task-icon { color: var(--color-success); }

/* ---------- accounts ---------- */
.account-name { margin-left: auto; font-weight: 600; color: var(--color-ink); }
.account-menu summary { min-height: 2rem; display: flex; align-items: center; cursor: pointer; color: var(--color-accent-deep); list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu ul { margin: 0 0 var(--space-xs); padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }

/* ---------- direct send and schedule ---------- */
.composer-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
/* Send + caret, one button; the caret opens "Send later" above it. */
.send-split { position: relative; display: inline-flex; }
.send-split .send-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.send-split .send-caret { padding-inline: var(--space-xs); border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgb(255 255 255 / .22); }
.send-menu, .send-menu * { box-sizing: border-box; }
.send-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; gap: 2px; width: 380px; max-width: calc(100vw - 2rem); grid-template-columns: minmax(0, 1fr); padding: var(--space-xs); overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-panel, 12px); background: var(--color-surface); box-shadow: var(--shadow-pop); }
.send-menu:focus { outline: none; }
.send-menu-title { padding: var(--space-xs) var(--space-sm) 2px; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.send-menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); min-width: 0; min-height: 0; margin: 0; padding: var(--space-xs) var(--space-sm); box-shadow: none; outline: none; border: 0; border-radius: var(--radius-sm, 8px); background: none; color: var(--color-ink); font-weight: 500; text-align: left; }
.send-menu-item:hover, .send-menu-item:focus-visible { background: var(--color-surface-sunk, #0000000d); }
.send-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--color-action); }
.send-menu-item { width: 100%; font-size: var(--text-sm); }
.send-menu-item > span { min-width: 0; white-space: nowrap; }
.send-menu-item > span:last-child { overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
.send-menu-custom { display: grid; gap: var(--space-2xs, 4px); margin-top: var(--space-2xs, 4px); padding: var(--space-sm) var(--space-sm) var(--space-xs); border-top: 1px solid var(--color-rule); }
.send-menu-row { display: flex; gap: var(--space-xs); }
.send-menu-row input { flex: 1; min-width: 0; min-height: 2.1rem; }
.send-menu-row button { flex: none; }
.composer-schedule { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.composer-schedule label { font-weight: 500; color: var(--color-ink); }
.composer-schedule input { min-height: 2.25rem; }

/* ---------- won / lost ---------- */
.outcome-toggle { display: inline-flex; border: 1px solid var(--color-rule); border-radius: var(--radius-input); overflow: hidden; }
.outcome-toggle button { border: 0; border-radius: 0; min-height: 2.25rem; padding: 0 var(--space-sm); background: var(--color-surface); }
.outcome-toggle button + button { border-left: 1px solid var(--color-rule); }
.outcome-toggle button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-surface); }

/* ---------- pipeline rates ---------- */
.rate-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xs); }
.rate-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; width: 100%; gap: var(--space-2xs); text-align: left; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); font: inherit; cursor: pointer; transition: border-color 120ms ease; }
.rate-card:hover { border-color: var(--color-input-edge); }
.rate-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rate-value { font-family: var(--font-body); font-size: var(--text-3xl); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .rate-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inbox list and follow-up filters ---------- */
.inbox-subtools { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.inbox-subtools .select-field { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.inbox-subtools select { min-height: 2rem; max-width: 14rem; }

/* ---------- autopilot ---------- */
button.autopilot-on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-action-ink); }
button.autopilot-on .icon { color: var(--color-action-ink); }

/* ---------- unslop: one accent count ---------- */
.rail button[data-view="review"] .count { background: var(--color-accent-soft); color: var(--color-accent-deep); }

/* ---------- sunlit workspace: flat ink actions, pearl buttons, frosted chrome ---------- */
/* Primary is flat ink. Every other button is a pearl fill with no border; quiet, ghost, link and icon rules clear it where they need to. */
button { border-radius: var(--radius-button); border-color: var(--color-clear); background: var(--color-paper-3); font-weight: 400; }
button:hover:not(:disabled) { background: #e2e1df; border-color: var(--color-clear); }
button:active:not(:disabled) { background: #d9d8d6; }
button.primary, button.go { border-color: var(--color-clear); background: var(--color-action); font-weight: 400; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
button.primary:hover:not(:disabled), button.go:hover:not(:disabled) { background: var(--color-action-hover); border-color: var(--color-clear); }
button.primary:active:not(:disabled), button.go:active:not(:disabled) { background: var(--color-action-hover); transform: scale(.98); }
button.danger:not(.quiet, .ghost) { background: var(--color-error-bg); color: var(--color-error); }
.rail button { border-radius: var(--radius-button); }
.rail button:hover:not(:disabled) { background: var(--color-paper-3); }
.rail button[aria-current="page"] { background: var(--color-surface); box-shadow: var(--shadow-lift); }

/* Frosted chrome: the page head stays readable over scrolling content */
.screen-head { position: sticky; top: 0; z-index: var(--z-sticky); padding-top: var(--space-md); background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
dialog { border-color: var(--color-rule); border-radius: var(--radius-dialog); background: var(--color-surface); box-shadow: var(--shadow-pop); }
dialog::backdrop { background: var(--color-overlay); }
.toast { border-color: var(--color-clear); border-radius: var(--radius-card); background: var(--color-graphite); color: #fff; box-shadow: var(--shadow-pop); }
.toast-stop { background: var(--color-error-bg); color: var(--color-error); }

/* Dashboard moment: the brand wash with the next task on a white card */
.glass { border: 0; background: var(--color-surface); box-shadow: var(--shadow-lift); }

/* ---------- settings: three tabs ---------- */
.settings-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: var(--space-3xs); margin-bottom: var(--space-lg); padding: 4px; border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-paper-2); }
.settings-tabs button { min-height: 2.25rem; gap: var(--space-xs); padding: 0 var(--space-md); border: 0; border-radius: 8px; background: var(--color-clear); box-shadow: none; color: var(--color-muted); font-weight: 500; }
.settings-tabs button .icon { width: 1rem; height: 1rem; }
.settings-tabs button:hover:not(:disabled) { background: rgb(255 255 255 / .6); color: var(--color-ink); }
.settings-tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-ink-strong); box-shadow: 0 0 0 1px var(--color-rule), 0 1px 2px rgb(41 40 39 / .06); }
.tab-state { padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-deep); font-size: var(--text-xs); line-height: 1.25rem; }
.tab-state:empty { display: none; }
.settings-panel { display: grid; gap: var(--space-lg); max-width: 60rem; }
.settings-panel[hidden] { display: none; }
#panel-developers { max-width: none; }
.panel-intro h3 { font-size: var(--text-2xl); font-weight: 400; letter-spacing: -.014em; }
.panel-intro p { margin-top: var(--space-2xs); font-size: var(--text-md); }
.settings-head h3 { font-size: var(--text-lg); }
.settings-head p { margin-top: var(--space-2xs); font-size: var(--text-md); }

/* connection: mode note and a numbered checklist */
#connector { display: grid; gap: var(--space-lg); }
.csteps { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.cstep { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); }
.cstep + .cstep { border-top: 1px solid var(--color-rule); }
.cstep-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); font-size: var(--text-md); font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cstep-mark .icon { width: 1.25rem; height: 1.25rem; }
.cstep.is-done .cstep-mark { border-color: var(--color-clear); background: var(--color-success-bg); color: var(--color-success); }
.cstep.is-current .cstep-mark { border-color: var(--color-action); background: var(--color-action); color: var(--color-action-ink); }
.cstep.is-later { opacity: .6; }
.cstep-body { display: grid; gap: var(--space-xs); min-width: 0; padding-top: 4px; }
.cstep-body h4 { margin: 0; font-size: var(--text-lg); font-weight: 500; color: var(--color-ink-strong); }
.cstep-body .steps-list { margin-top: var(--space-xs); }
.cstep-body .actions { margin-top: var(--space-sm); }
.unpair-row { display: flex; justify-content: flex-end; }

/* sending: today's figures, then labelled groups */
.usage-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.usage { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); box-shadow: -1px -1px 0 var(--color-rule); }
.usage-value { font: 500 var(--text-2xl)/1.25 var(--font-body); color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.usage-of { font-size: var(--text-md); font-weight: 400; color: var(--color-faint); }
.limits-form { display: grid; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.limit-group { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-xl); margin: 0; padding: var(--space-lg); border: 0; }
.limit-group + .limit-group { border-top: 1px solid var(--color-rule); }
.limit-title { font-weight: 500; color: var(--color-ink-strong); }
.limit-label .small { margin-top: var(--space-3xs); }
.limit-controls { display: grid; align-content: start; gap: var(--space-sm); min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-sm); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.input-unit { display: flex; align-items: center; min-width: 0; border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); background: var(--color-surface); }
.input-unit:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.input-unit input { flex: 1; min-width: 0; border: 0; background: var(--color-clear); outline: none; font-variant-numeric: tabular-nums; }
.input-unit input:focus-visible { outline: none; }
.input-unit span { padding-right: var(--space-sm); font-size: var(--text-sm); color: var(--color-faint); white-space: nowrap; }
.switch-row { display: inline-flex; align-items: center; gap: var(--space-sm); margin: 0; font-weight: 500; color: var(--color-ink); cursor: pointer; }
.limits-form.limits-off .limit-group:not(:first-child) { opacity: .5; }
.limit-group .wf-days { padding: 0; border: 0; }
.day-pick { border-radius: var(--radius-pill); }
.day-pick input { position: absolute; opacity: 0; pointer-events: none; }
.day-pick:has(input:checked) { border-color: var(--color-clear); background: var(--color-accent-soft); color: var(--color-ink-strong); }
.day-pick:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.limits-form .problem:empty { display: none; }
.limits-form .problem { margin: 0 var(--space-lg) var(--space-md); }
.save-bar { position: sticky; bottom: var(--space-md); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-sm); margin: 0 var(--space-md) var(--space-md); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border-radius: 14px; box-shadow: 0 12px 32px -12px rgb(41 40 39 / .3); }
.save-bar[hidden] { display: none; }
.save-bar p { flex: 1; font-size: var(--text-md); font-weight: 500; color: var(--color-ink); }

/* developers: keys and assistant side by side, then the tool table */
.dev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
@media (max-width: 60rem) { .dev-grid { grid-template-columns: minmax(0, 1fr); } } /* after the rule above, so narrow screens get one column */
.code-more { margin-top: var(--space-sm); }
.code-more summary { cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.code-more[open] summary { margin-bottom: var(--space-xs); }
.tools-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.tool-search { display: flex; align-items: center; gap: var(--space-xs); width: min(18rem, 100%); margin: 0; padding-left: var(--space-sm); border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); background: var(--color-surface); }
.tool-search:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tool-search .icon { width: 1rem; height: 1rem; color: var(--color-faint); flex: none; }
.tool-search input { flex: 1; min-width: 0; border: 0; outline: none; background: var(--color-clear); }
.tool-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.tool-rows li { display: grid; grid-template-columns: 14rem 4rem minmax(0, 1fr); align-items: baseline; gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.tool-rows li + li { border-top: 1px solid var(--color-rule); }
.tool-rows li[hidden] { display: none; }
.tool-rows code { font-size: var(--text-sm); color: var(--color-ink); overflow-wrap: anywhere; }
.tool-rows .tag-chip { justify-self: start; }
@media (max-width: 760px) {
  .settings-tabs { display: flex; width: 100%; }
  .settings-tabs button { flex: 1; padding-inline: var(--space-xs); }
  .usage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .limit-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .tool-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .tool-rows li p { grid-column: 1 / -1; }
}

/* connection: sign in to LinkedIn in outlo's own browser */
.signin-form { display: grid; gap: var(--space-sm); max-width: 36rem; margin-top: var(--space-xs); }
.signin-form .actions { margin-top: var(--space-2xs); }
.signin-form #signin-code { max-width: 12rem; font-size: var(--text-xl); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.signin-note { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink); font-size: var(--text-md); }
.signin-wait { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); font-size: var(--text-md); color: var(--color-ink-2); }
.spinner { width: 14px; height: 14px; flex: none; border: 2px solid var(--color-accent); border-right-color: var(--color-clear); border-radius: var(--radius-pill); animation: progress-turn 900ms linear infinite; }
.cstep-body .problem:empty { display: none; }
.proxy-card .key-form input { font-family: var(--font-mono); font-size: var(--text-sm); }
.proxy-card .problem:empty { display: none; }
.live-screen { position: relative; margin-top: var(--space-sm); overflow: hidden; border: 1px solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); aspect-ratio: 1280 / 860; cursor: pointer; }
.live-screen:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.live-screen img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.live-screen img:not([src]) { visibility: hidden; }
.live-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin: 0; font-size: var(--text-md); color: var(--color-muted); }
.live-wait[hidden] { display: none; }

/* a notice: one line, its action as a link, a close button at the end */
.notice { display: flex; align-items: center; gap: var(--space-sm); width: fit-content; max-width: 100%; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: 10px; font-size: var(--text-sm); }
.notice p { margin: 0; }
.notice-stop { background: var(--color-error-bg); color: var(--color-error); }
.notice-stop strong { color: var(--color-error); font-weight: 600; }
.notice .link { flex: none; color: var(--color-error); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.notice .link:hover:not(:disabled) { color: var(--color-ink); }
.notice-close { flex: none; width: 1.75rem; min-height: 1.75rem; padding: 0; border: 0; border-radius: 6px; background: none; box-shadow: none; color: currentColor; }
.notice-close:hover:not(:disabled) { background: rgb(168 50 31 / .1); border: 0; }
.notice-close .icon { width: .875rem; height: .875rem; }
.account-add { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.account-add input { flex: 1; min-width: 0; }

/* ---------- hosted: sign-in, sign-up, invite ---------- */
.auth-page { display: grid; place-items: center; padding: var(--space-lg); }
.auth-card { width: min(26rem, 100%); display: grid; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.auth-card .brand { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.auth-title { font-family: var(--font-display, var(--font-body)); font-size: var(--text-heading); font-weight: 500; line-height: 1.2; margin: 0; }
.auth-form { display: grid; gap: var(--space-sm); }
.auth-form button.primary { width: 100%; margin-top: var(--space-xs); }
.auth-field label { margin-bottom: var(--space-2xs); }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; }
.team-list li { display: flex; align-items: center; gap: var(--space-sm); min-height: 2.75rem; border-top: 1px solid var(--color-rule); }
.team-list li > :first-child { font-weight: 500; }
.team-list li button { margin-left: auto; }
#team { display: grid; gap: var(--space-md); }
#auth { display: grid; gap: var(--space-sm); }

/* ---------- hosted: workspace switcher (top of the sidebar) ---------- */
.brand-row { flex-wrap: wrap; flex-shrink: 0; }
#ws-switch:empty { display: none; }
#ws-switch { width: 100%; }
.ws-menu { position: relative; }
.ws-menu > summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 2.5rem; padding: 0 var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); cursor: pointer; list-style: none; font-weight: 500; }
.ws-menu > summary::-webkit-details-marker { display: none; }
.ws-menu > summary:hover { border-color: var(--color-rule-2); }
.ws-menu > summary .icon { margin-left: auto; color: var(--color-muted); }
.ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-initial { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); background: var(--color-accent-deep, var(--color-action)); color: var(--color-action-ink); font-size: var(--text-xs); font-weight: 600; }
.ws-initial.ws-new { background: var(--color-mist); color: var(--color-ink-2); }
.ws-pop { position: absolute; z-index: 30; bottom: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 2px; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ws-pop-head { margin: var(--space-2xs) var(--space-xs) var(--space-xs); }
.ws-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); border-radius: var(--radius-input); color: var(--color-ink); text-decoration: none; }
.ws-item > span:nth-child(2) { display: grid; min-width: 0; overflow-wrap: anywhere; }
.ws-item:hover { background: var(--color-mist); }
.ws-item .icon { margin-left: auto; color: var(--color-accent-deep); }
.ws-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- LinkedIn accounts (Settings) and a campaign's accounts ---------- */
#senders:empty { display: none; }
#senders { margin-bottom: var(--space-md); }
.sender-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sender-list li { display: flex; align-items: center; gap: var(--space-sm); min-height: 3rem; border-top: 1px solid var(--color-rule); flex-wrap: wrap; }
.sender-list li.is-selected { background: var(--color-mist); margin-inline: calc(-1 * var(--space-sm)); padding-inline: var(--space-sm); border-radius: var(--radius-input); }
.sender-pick { display: flex; align-items: center; gap: var(--space-sm); border: 0; background: none; padding: 0; min-height: 2.5rem; }
.sender-pick:hover:not(:disabled) { background: none; }
.sender-name { font-weight: 500; }
.sender-today { margin-left: auto; }
.sender-summary { display: grid; justify-items: start; gap: 0; min-height: 0; padding: var(--space-2xs) var(--space-xs); margin-left: calc(-1 * var(--space-xs)); border: 1px solid transparent; background: none; text-align: left; white-space: normal; font-size: var(--text-sm); }
.sender-summary:hover:not(:disabled) { border-color: var(--color-rule); background: var(--color-surface); }
.sender-summary .small { font-size: var(--text-xs); }
.sender-dialog { width: min(28rem, calc(100% - 2rem)); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.sender-dialog::backdrop { background: rgb(0 0 0 / .25); }
.sender-dialog form { display: grid; gap: var(--space-sm); }
.sender-dialog h3 { margin: 0; }
.sender-checks { display: grid; }
.sender-checks label.check span { display: inline; }
.sender-dialog .actions { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.limits-for { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); max-width: 20rem; }
.limits-for span { white-space: nowrap; font-weight: 500; }
.ws-pop button.ws-item { width: 100%; min-height: 0; border: 0; background: none; justify-content: flex-start; font-weight: 400; text-align: left; }
.ws-pop button.ws-item:hover:not(:disabled) { background: var(--color-mist); }
.ws-rule { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-2xs) 0; }
.ws-create { display: flex; gap: var(--space-2xs); padding: 0 var(--space-xs) var(--space-xs); flex-wrap: wrap; }
.ws-create input { flex: 1; min-width: 0; }
.ws-create .problem { flex-basis: 100%; }

/* The bottom card in the workspace app: one status line. */
.workspace-card.compact { padding: 0; border: 0; background: none; box-shadow: none; }
.workspace-card.compact > :not(#ws-switch) { display: none; }
.ws-status { width: 100%; justify-content: flex-start; gap: var(--space-xs); border: 0; background: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.ws-status .icon { margin-left: auto; color: var(--color-muted); }
.lamp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-muted); }
.lamp-dot.go { background: var(--color-success); }
.lamp-dot.warn { background: var(--color-warning, #c58a1a); }
.sender-head { display: flex; gap: var(--space-md); align-items: flex-start; justify-content: space-between; }
.sender-seats { display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.sender-add { display: flex; gap: var(--space-xs); padding: var(--space-sm); margin-bottom: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-mist); }
.sender-add input { flex: 1; min-width: 0; max-width: 20rem; }
.risk-notice { display: grid; gap: var(--space-xs); padding: var(--space-md); margin-bottom: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-mist); }
.risk-notice h4, .risk-notice p { margin: 0; }
.sender-rename { display: flex; gap: var(--space-xs); flex: 1; min-width: 0; }
.sender-rename input { flex: 1; min-width: 0; max-width: 16rem; }
.sender-name .quiet { margin-left: var(--space-2xs); }
.team-list select { margin-left: auto; }
.team-list select + button { margin-left: 0; }
.mcp-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.mcp-example { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); }
.ws-status > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-card > .metric-head { padding: var(--space-md) var(--space-lg) 0; align-items: center; }
.activity-card > .metric-head .log-heading { padding: 0; }

/* ---------- activity page ---------- */
.history-tools { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.history-tools button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }
.log .log-day { display: block; padding: var(--space-md) 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); border: 0; }
.keys-pop { border: 1px solid var(--color-rule); border-radius: 12px; padding: var(--space-md) var(--space-lg); max-width: 22rem; background: var(--color-surface); color: var(--color-ink); }
.keys-pop h3 { margin: 0 0 var(--space-sm); font-size: var(--text-md); }
.keys-pop dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-md); margin: 0 0 var(--space-sm); }
.keys-pop dt, .keys-pop dd { margin: 0; }
.keys-pop kbd { display: inline-block; min-width: 1.5em; padding: 0 var(--space-2xs); border: 1px solid var(--color-rule); border-radius: 4px; text-align: center; font-family: inherit; }
.history-system { display: inline-flex; align-items: center; gap: var(--space-xs); margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.history-foot { margin-top: var(--space-md); text-align: center; }

/* ---------- campaign type: recommended or custom ---------- */
.campaign-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-sm); border: 0; padding: 0; margin: 0 0 var(--space-md); }
.campaign-type legend { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-xs); }
.type-option { display: flex; gap: var(--space-sm); align-items: flex-start; margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); cursor: pointer; font-weight: 400; }
.type-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-mist); }
.type-option input { margin-top: 3px; }
.type-option > span { display: grid; gap: 2px; }
.recommended-fields { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
.recommended-fields[hidden] { display: none; }
.sequence-steps { list-style: none; margin: 0 0 var(--space-xs); padding: 0; display: grid; border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.sequence-steps li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); border-top: 1px solid var(--color-rule); }
.sequence-steps li:first-child { border-top: 0; }
.sequence-steps strong { font-weight: 500; }
.type-tag { margin-left: var(--space-xs); font-size: var(--text-xs); vertical-align: middle; }

/* ---------- Run a campaign (Outreach) ---------- */
.run-menu { position: relative; }
.run-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-height); padding: 0 var(--space-sm) 0 var(--space-md); border-radius: var(--radius-input); background: var(--color-action); color: var(--color-action-ink); font-weight: 500; cursor: pointer; box-shadow: var(--shadow-card); white-space: nowrap; }
.run-menu > summary::-webkit-details-marker { display: none; }
.run-menu > summary:hover { background: var(--color-action-hover); }
.run-menu .run-caret { display: inline-flex; transition: transform var(--dur-micro, .15s) ease; }
.run-menu[open] .run-caret { transform: rotate(180deg); }
.run-pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(46rem, calc(100vw - 2rem)); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-pop, var(--shadow-card)); }
.run-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.run-card h3 { margin: var(--space-xs) 0 0; font-size: var(--text-lg); font-weight: 600; }
.run-card > p { margin: 0; flex: 1; }
.run-card-top { display: flex; align-items: center; justify-content: space-between; }
.run-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-input); background: var(--color-mist); }
.run-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); flex: 1; }
.run-ticks li { display: flex; gap: var(--space-xs); align-items: center; }
.run-ticks .icon { color: var(--color-accent); flex: none; }
.run-how { margin: 0; padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-2xs); font-size: var(--text-sm); background: var(--color-mist); border-radius: var(--radius-input); list-style: none; }
.run-how[hidden] { display: none; }
.run-how strong { font-weight: 600; }
.run-actions { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.run-actions > button { flex: 1; }
@media (max-width: 48rem) { .run-pop { grid-template-columns: 1fr; } }
.run-options { display: grid; gap: 0; }
.run-options label.check { min-height: 2rem; font-size: var(--text-sm); }

/* ---------- connections ---------- */
.conn-stages { margin-bottom: var(--space-sm); }
.conn-tools { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.conn-tools .search-field { flex: 1; min-width: 14rem; }
.conn-person { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.conn-person > span:last-child { display: grid; min-width: 0; }
.conn-name { font-weight: 500; }
.conn-headline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28rem; font-weight: 400; }
.button-link { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--color-ink-2); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.button-link:hover { background: var(--color-mist); }

/* ---------- person panel: full profile ---------- */
.profile-badges, .profile-skills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; }
.profile-text { font-size: var(--text-sm); white-space: pre-line; margin: 0; }
.profile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.profile-list li { display: grid; gap: 2px; padding-left: var(--space-sm); border-left: 2px solid var(--color-rule); }
.profile-list p { margin: 0; }
.profile-role { font-weight: 500; }

/* ---------- LinkedIn photos, logos and the "in" link ---------- */
.avatar { position: relative; overflow: hidden; flex: none; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-xl { width: 3.5rem; height: 3.5rem; font-size: var(--text-md); }
.li-link { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: var(--radius-sm); color: #0a66c2; vertical-align: middle; }
.li-link .icon { width: .95rem; height: .95rem; }
.li-link:hover { background: #0a66c214; }
.li-link.li-premium { color: #b88a1e; }
.li-link.li-premium:hover { background: #b88a1e1a; }
.person-title { display: flex; align-items: center; gap: var(--space-sm); }
.person-title h2 { margin: 0; flex: 1; min-width: 0; }
.who-cell .li-link { margin-left: auto; }
.profile-list li.with-logo { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-sm); padding-left: 0; border-left: 0; }
.profile-list li.with-logo > div { display: grid; gap: 2px; }
.org-logo { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); object-fit: contain; background: var(--color-surface); border: 1px solid var(--color-rule); }
.org-blank { display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); background: var(--color-mist); }
.profile-entry { display: grid; gap: 2px; min-width: 0; }
.profile-sublist { list-style: none; margin: var(--space-xs) 0 0; padding: 0 0 0 var(--space-sm); display: grid; gap: var(--space-sm); border-left: 2px solid var(--color-rule); }
.profile-sublist li { border-left: 0; padding-left: 0; }
.dm-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--color-ink-2); cursor: pointer; }
.dm-link:hover:not(:disabled) { background: var(--color-mist); }
.dm-link::before { display: none; }

/* ---------- pages without headers: the sidebar shows where you are; actions sit in each page's toolbar ---------- */
.tool-row { display: flex; gap: var(--space-xs); align-items: center; }
.tool-row .search-field { flex: 1; min-width: 0; }
.icon-button { width: var(--control-height); padding: 0; flex: none; }
.network-bar #network-refresh { margin-left: auto; }
.campaign-table > .section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.campaign-table > .section-heading h3 { margin: 0; }
.row-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.row-heading h3 { margin: 0; }
.row-heading .card-title { margin: 0; }

/* ---------- person panel: centered header, contact facts; inbox opens it ---------- */
.person-title { flex-direction: column; text-align: center; gap: var(--space-xs); padding-top: var(--space-sm); }
.person-title h2 { flex: none; }
.person-title + .person-headline { text-align: center; }
.person-name-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); max-width: 100%; }
.person-name-row h2 { flex: 0 1 auto; min-width: 0; }
.avatar-xl { width: 5rem; height: 5rem; font-size: var(--text-lg); }
.contact-facts dd { display: grid; gap: 2px; overflow-wrap: anywhere; }
.fact-line { display: block; }
.thread-person { padding: 0; border: 0; background: none; min-height: 0; border-radius: 50%; }
.thread-person::before { display: none; }
.thread-person:hover:not(:disabled) { background: none; opacity: .85; }
.thread-name { font: inherit; color: inherit; padding: 0; min-height: 0; border: 0; background: none; text-align: left; }
.thread-name:hover:not(:disabled) { background: none; text-decoration: underline; }
/* Inbox: the person panel is a drawer over the conversation, not a column that squeezes it. */
.content-frame.with-person.person-over { grid-template-columns: minmax(0, 1fr); }
.content-frame.person-over .person-panel { position: fixed; z-index: 30; align-self: stretch; /* start would size it to its content, so it never scrolls */ top: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); width: min(26rem, calc(100vw - 2rem)); max-height: none; border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-pop, var(--shadow-card)); }
.person-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md); margin: var(--space-xs) 0 var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.person-meta > span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.person-meta .icon { width: .9rem; height: .9rem; }

/* ---------- message attachments: voice notes, shared posts, photos, files ---------- */
.attachment { display: flex; flex-direction: column; gap: var(--space-xs); color: inherit; text-decoration: none; }
.attachment-label { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; }
a.attachment:hover .attachment-label { text-decoration: underline; }
.attachment img { max-width: 260px; max-height: 260px; border-radius: var(--radius-sm, 8px); object-fit: cover; }
.bubble .attachment + p { margin-top: var(--space-xs); }
.voice-player { flex-direction: row; align-items: center; gap: var(--space-sm); width: 280px; max-width: 100%; padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs); border-radius: 999px; background: var(--color-surface-sunk, #0000000a); }
.voice-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--color-action); color: var(--color-action-ink); cursor: pointer; }
.voice-btn .icon { width: 1rem; height: 1rem; }
.voice-btn.busy { opacity: .6; }
.voice-seek { --p: 0%; flex: 1; min-width: 0; height: 4px; margin: 0; appearance: none; border-radius: 999px; background: linear-gradient(to right, var(--color-action) var(--p), var(--color-rule) var(--p)); cursor: pointer; }
.voice-seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-action); }
.voice-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--color-action); }
.voice-time { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); min-width: 2.5rem; text-align: right; }
.attachment-image { padding: 0; border: 0; background: none; cursor: zoom-in; }
.file-card { flex-direction: row; align-items: center; gap: var(--space-sm); width: 280px; max-width: 100%; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm, 8px); background: var(--color-surface); }
.file-card:hover { border-color: var(--color-ink); }
.file-ext { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-sm, 8px); background: var(--color-surface-sunk, #0000000a); font-size: var(--text-xs); font-weight: 600; }
.file-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.composer-files { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.composer-files li { display: flex; align-items: center; gap: var(--space-xs); max-width: 240px; padding: var(--space-2xs, 4px) var(--space-2xs, 4px) var(--space-2xs, 4px) var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-sm, 8px); background: var(--color-surface); }
.composer-files img, .composer-files .file-ext { width: 2rem; height: 2rem; flex: none; border-radius: 6px; object-fit: cover; }
.attach-btn { display: inline-grid; place-items: center; min-width: 2.25rem; padding-inline: var(--space-xs); }
.attach-gif { font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
.attach-gif.on { background: var(--color-action); color: var(--color-action-ink); }
.attachment-gif { max-width: 260px; max-height: 260px; border-radius: var(--radius-sm, 8px); }
.gif-picker { display: flex; flex-direction: column; gap: var(--space-xs); width: min(340px, 100%); max-height: 400px; margin: 0 0 var(--space-sm) auto; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-panel, 12px); background: var(--color-surface); box-shadow: var(--shadow-pop); }
.gif-head { display: flex; align-items: center; gap: var(--space-xs); }
.gif-search { display: flex; flex: 1; align-items: center; gap: var(--space-xs); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm, 8px); }
.gif-search:focus-within { border-color: var(--color-action); }
.gif-search input { flex: 1; min-width: 0; border: 0; padding: var(--space-xs) 0; background: none; outline: none; }
.gif-status:empty { display: none; }
.gif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); overflow-y: auto; }
.gif-col { display: flex; flex-direction: column; gap: var(--space-xs); }
.gif-item { display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--color-surface-sunk, #0000000a); cursor: pointer; }
.gif-item img { display: block; width: 100%; height: auto; }
.gif-item:hover, .gif-item:focus-visible { outline: 2px solid var(--color-action); outline-offset: 1px; }
.gif-item.busy { opacity: .5; }
.gif-sk { display: block; height: 110px; border-radius: 6px; background: var(--color-surface-sunk, #0000000f); }
.gif-col:first-child .gif-sk:nth-child(2), .gif-col:last-child .gif-sk:nth-child(3) { height: 80px; }
.gif-col:first-child .gif-sk:nth-child(3), .gif-col:last-child .gif-sk:nth-child(2) { height: 140px; }
.composer.drop-target { outline: 2px dashed var(--color-action); outline-offset: 4px; }
.composer-quote-file { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.composer-quote-file .icon { width: .85rem; height: .85rem; }
.attachment-quote { padding-left: var(--space-sm); border-left: 3px solid var(--color-rule); }
dialog.image-viewer { width: auto; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
dialog.image-viewer:not([open]) { display: none; }
.image-viewer img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; border-radius: var(--radius-sm, 8px); }
.image-viewer-bar { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.image-viewer-bar a, .image-viewer-bar button { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: inherit; }
.who-line { display: flex; align-items: center; gap: var(--space-xs); }
.who-line .person-open { width: auto; }
.who-cell .who-line .li-link { margin-left: 0; }
.intake-fields { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); align-items: center; margin: var(--space-sm) 0; }

/* ---------- campaigns table: one line of facts under the name, settings behind a menu ---------- */
.campaign-list .campaign-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-weight: 400; min-width: 14rem; }
.campaign-list .campaign-name { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; }
.campaign-list .campaign-cell .sender-summary { padding: 0; min-height: 0; }
.campaign-list .facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 2px 0 0; padding: 0; border: 0; grid-template-columns: none; font-size: inherit; }
.campaign-list .fact { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs, .75rem); color: var(--color-ink-2); }
.campaign-list .fact .icon { width: .8rem; height: .8rem; }
.campaign-list .fact.on { color: var(--color-accent); }
.campaign-list td.actions { white-space: nowrap; text-align: right; }
.campaign-list td.actions > * { vertical-align: middle; }
.campaign-list .campaign-progress { white-space: nowrap; }
.row-menu { position: relative; display: inline-block; margin-left: var(--space-xs); }
.row-menu > summary { list-style: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { background: var(--color-mist); }
.row-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 14rem; padding: 4px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-pop, var(--shadow-card)); text-align: left; }
.row-pop .menu-item { display: flex; width: 100%; align-items: center; gap: var(--space-xs); padding: 6px var(--space-sm); border: 0; background: none; box-shadow: none; min-height: 0; font-weight: 400; border-radius: var(--radius-sm, 6px); justify-content: flex-start; }
.row-pop .menu-item:hover { background: var(--color-mist); }
.row-pop .menu-item::before { display: none; }
.campaign-list .campaign-cell .sender-summary { flex-direction: row; align-items: baseline; gap: 6px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--text-sm, .85rem); font-weight: 400; color: var(--color-ink-2); }
.campaign-list .campaign-cell .sender-summary .muted { color: var(--color-accent); }
.campaign-list .campaign-cell .sender-summary::before { display: none; }


/* ---------- flow editor: a full-screen canvas ---------- */
.flow-summary { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.flow-summary > div { display: grid; flex: 1; }
dialog.flow-editor { width: calc(100vw - 2rem); height: calc(100dvh - 2rem); max-width: none; max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
dialog.flow-editor:not([open]) { display: none; }
.fe-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.fe-title h2 { margin: 0; font-size: var(--text-md, 1rem); font-weight: 600; }
.fe-title p { margin: 0; }
.fe-problems { flex: 1; margin: 0; font-size: var(--text-sm, .85rem); color: var(--color-danger, #b42318); text-align: right; }
.fe-problems.ok { color: var(--color-ink-2); }
.fe-tools { display: flex; align-items: center; gap: var(--space-xs); }
.fe-zoom { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-ink-2); font-size: var(--text-sm, .85rem); }
.flow-editor > .problem { margin: 0; padding: 0 var(--space-md); }
.fe-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 13rem minmax(0, 1fr) 19rem; }
.fe-body.readonly { grid-template-columns: minmax(0, 1fr) 19rem; }
.fe-palette { overflow-y: auto; padding: var(--space-sm); border-right: 1px solid var(--color-rule); background: var(--color-surface); }
.fe-palette h4 { margin: var(--space-sm) 0 4px; font-size: var(--text-xs, .75rem); font-weight: 500; color: var(--color-ink-2); }
.fe-add { display: flex; width: 100%; align-items: center; gap: var(--space-xs); justify-content: flex-start; margin-bottom: 4px; padding: 6px var(--space-sm); min-height: 0; font-weight: 400; cursor: grab; }
.fe-canvas { position: relative; overflow: hidden; background-color: var(--color-mist, #f4f3f0); background-image: radial-gradient(circle, rgba(0,0,0,.09) 1px, transparent 1px); background-size: 20px 20px; cursor: grab; touch-action: none; outline: none; }
.fe-canvas.panning { cursor: grabbing; }
.fe-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fe-links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.fe-link { fill: none; stroke: #9a948a; stroke-width: 2; pointer-events: none; }
.fe-link.fe-yes { stroke: #2f7d4f; }
.fe-link.fe-no { stroke: #b0533c; }
.fe-link.selected { stroke: var(--color-accent); stroke-width: 3; }
.fe-link.fe-temp { stroke-dasharray: 5 4; stroke: var(--color-accent); }
.fe-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.fe-node { position: absolute; }
.fe-card { display: flex; align-items: flex-start; gap: var(--space-xs); width: 100%; min-height: 74px; padding: 10px; text-align: left; border: 1px solid var(--color-rule); border-radius: 10px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 400; cursor: pointer; }
.fe-card::before { display: none; }
.fe-node.selected .fe-card { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.fe-node.fe-bad .fe-card { border-color: #d9a441; border-style: dashed; }
.fe-start .fe-card { background: var(--color-action, #3a1d24); color: var(--color-action-ink, #fff); border-color: transparent; }
.fe-start .fe-sub { color: inherit; opacity: .8; }
.fe-accepted .fe-card, .fe-split .fe-card { border-radius: 18px; background: #fbf6ec; }
.fe-icon { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: none; border-radius: 8px; background: var(--color-mist, #f1efe9); }
.fe-start .fe-icon { background: rgba(255,255,255,.15); }
.fe-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fe-text strong { font-weight: 500; font-size: var(--text-sm, .88rem); }
.fe-sub { font-size: var(--text-xs, .75rem); color: var(--color-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-in, .fe-out { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 2px solid #9a948a; transform: translate(-50%, -50%); }
.fe-in { left: 50%; top: 0; }
.fe-out { top: 74px; cursor: crosshair; }
.fe-out:hover { background: var(--color-accent); border-color: var(--color-accent); }
.fe-out-next { left: 50%; }
.fe-out-yes { left: 25%; border-color: #2f7d4f; }
.fe-out-no { left: 75%; border-color: #b0533c; }
.fe-port-label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.readonly .fe-out { cursor: default; }
.fe-quick { position: absolute; z-index: 5; display: grid; gap: 4px; width: 180px; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-pop, var(--shadow-card)); }
.fe-quick p { margin: 0 0 2px; }
.fe-quick button { justify-content: flex-start; gap: var(--space-xs); }
.fe-inspector { overflow-y: auto; padding: var(--space-md); border-left: 1px solid var(--color-rule); background: var(--color-surface); display: grid; align-content: start; gap: var(--space-sm); }
.fe-inspector h3 { display: flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: var(--text-md, 1rem); }
.fe-field { display: grid; gap: 4px; }
.fe-field > span:first-child { font-size: var(--text-sm, .85rem); font-weight: 500; }
.fe-field.check { display: flex; align-items: flex-start; gap: var(--space-xs); }
.fe-help { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.fe-delete { justify-self: start; margin-top: var(--space-sm); }
@media (max-width: 60rem) { .fe-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .fe-palette { display: flex; overflow-x: auto; } .fe-inspector { max-height: 40dvh; } }
.fe-out-yes .fe-port-label { left: auto; right: 12px; top: -1px; transform: none; color: #2f7d4f; }
.fe-out-no .fe-port-label { left: 12px; top: -1px; transform: none; color: #b0533c; }
.fe-quick { overflow-y: auto; cursor: default; }
/* Step cards keep their own colours on hover (the page-wide button hover is light grey, which hid Start's white text). */
.fe-card:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-rule-2); }
.fe-start .fe-card:hover:not(:disabled) { background: var(--color-action, #3a1d24); color: var(--color-action-ink, #fff); border-color: transparent; filter: brightness(1.12); }
.fe-accepted .fe-card:hover:not(:disabled), .fe-split .fe-card:hover:not(:disabled), .fe-replied .fe-card:hover:not(:disabled), .fe-has_post .fe-card:hover:not(:disabled), .fe-seen .fe-card:hover:not(:disabled), .fe-viewed .fe-card:hover:not(:disabled) { background: #f8f0de; }
.fe-replied .fe-card, .fe-has_post .fe-card, .fe-seen .fe-card, .fe-viewed .fe-card { border-radius: 18px; background: #fbf6ec; }
.net-account-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--text-sm, .85rem); }
.avatar.avatar-xs { width: 1.4rem; height: 1.4rem; font-size: .6rem; }
.draft-from { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- search filters ---------- */
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-sm); }
.filter-bar #filters-toggle { display: inline-flex; align-items: center; gap: 6px; }
.filter-bar .count:not(:empty) { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 4px; border-radius: 99px; background: var(--color-accent); color: #fff; font-size: 11px; }
.filters-panel { margin-bottom: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.filters-head h3 { margin: 0; font-size: var(--text-md, 1rem); }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-md); }
.filter-group { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-xs); }
.filter-group legend, .filter-field > label, .filter-field > span:first-child { font-size: var(--text-sm, .85rem); font-weight: 500; padding: 0; margin-bottom: 4px; }
.filter-field { display: grid; gap: 4px; align-content: start; }
.filter-field .hint { margin: 0; }
.pick-choices { display: grid; gap: 2px; max-height: 12rem; overflow-y: auto; }
.pick-choices .check { font-size: var(--text-sm, .85rem); }
.toggle-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.toggle-row.wrap { max-height: 10rem; overflow-y: auto; gap: 4px var(--space-sm); }
.word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.filters-grid > .filter-group:last-child { grid-column: 1 / -1; }
.filters-grid > .filter-group:last-child .word-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.filters-foot { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); }
.filters-grid { align-items: start; }
.pick-box { position: relative; }
.pick-choices:empty { display: none; }
.pick-choices { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); padding: 6px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-pop, var(--shadow-card)); max-height: 16rem; }
.pick-choices .check { padding: 4px 6px; border-radius: 6px; align-items: flex-start; }
.pick-choices .check:hover { background: var(--color-mist); }

/* ---------- search page: one search bar, a filter rail on the left, results on the right ---------- */
.search-bar { display: flex; align-items: center; gap: var(--space-xs); padding: 6px 6px 6px var(--space-md); margin-bottom: var(--space-md); border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.search-bar > .icon { color: var(--color-ink-2); flex: none; }
.search-bar #keywords { flex: 1; min-width: 0; border: 0; box-shadow: none; background: none; font-size: var(--text-md, 1rem); padding: 10px 4px; }
.search-bar #keywords:focus { outline: none; }
.search-bar:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.search-bar .filters-toggle { display: none; align-items: center; gap: 6px; }
.search-bar .count:not(:empty), .sec-count:not(:empty) { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 5px; border-radius: 99px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 600; }
.search-layout { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.filter-rail { position: sticky; top: var(--space-sm); max-height: calc(100dvh - 2rem); overflow-y: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.rail-head h3 { margin: 0; font-size: var(--text-md, 1rem); }
.filter-sec { border-bottom: 1px solid var(--color-rule); }
.filter-sec:last-child { border-bottom: 0; }
.filter-sec > summary { display: flex; align-items: center; gap: var(--space-xs); padding: 10px var(--space-md); cursor: pointer; list-style: none; font-size: var(--text-sm, .88rem); font-weight: 500; }
.filter-sec > summary::-webkit-details-marker { display: none; }
.filter-sec > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--color-ink-2); border-bottom: 1.5px solid var(--color-ink-2); transform: rotate(45deg); transition: transform .15s; }
.filter-sec[open] > summary::after { transform: rotate(-135deg); }
.filter-sec > summary:hover { background: var(--color-mist); }
.filter-sec > :not(summary) { margin: 0 var(--space-md) var(--space-sm); }
.filter-sec .filter-field { gap: 6px; margin-bottom: var(--space-xs); }
.filter-sec .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-sec .chips:empty { display: none; }
.filter-sec .hint:empty { display: none; }
.filter-sec .toggle-row { gap: var(--space-md); }
.lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-sm); max-height: 12rem; overflow-y: auto; }
.lang-list .check, .filter-sec .check { font-size: var(--text-sm, .88rem); }
#geo-form { display: grid; gap: 6px; }
#geo-choices fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.results-head h3 { margin: 0; }
.results-head p { margin: 2px 0 0; }
.stale-note { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 4px 4px 4px var(--space-sm); border-radius: 99px; background: #fdf3dc; color: #6b4a00; font-size: var(--text-sm, .85rem); }
.stale-note[hidden] { display: none; }
.active-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--space-md) var(--space-sm); }
.active-chips:empty { display: none; }
#results-body .empty-row td { padding: var(--space-xl, 3rem) var(--space-md); text-align: center; }
#results-body .empty-row td strong { display: block; font-size: var(--text-md, 1rem); font-weight: 500; margin-bottom: 4px; }
#results-body .empty-row td span { color: var(--color-ink-2); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.savebar { position: sticky; bottom: var(--space-sm); z-index: 5; box-shadow: var(--shadow-pop, var(--shadow-card)); }
@media (max-width: 60rem) {
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  .search-bar .filters-toggle { display: inline-flex; }
  .filter-rail { display: none; position: static; max-height: none; }
  .filter-rail.open { display: block; }
}
/* On a phone there's no room for a drawer: the person's details replace the page, as before (Escape or Close brings it back). */
@media (max-width: 60rem) {
  .content-frame.person-over .person-panel { position: static; inset: auto; width: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .content-frame.with-person.person-over .shell { display: none; }
}
@media (max-width: 60rem) {
  .search-bar { flex-wrap: wrap; padding: 6px; }
  .search-bar > .icon { margin-left: 8px; }
  .search-bar #keywords { flex-basis: calc(100% - 3rem); }
  .search-bar .filters-toggle, .search-bar #search-submit { flex: 1; justify-content: center; }
}

/* ---------- sunlit workspace: shared pieces ---------- */
/* Badges are pills. Pastels are flat fills with ink text: they code a person, a category or a state. */
.pill, .tag-chip, .count { border-radius: var(--radius-pill); }
.pill, .tag-chip { padding-inline: var(--space-sm); }
.chip { border-radius: var(--radius-pill); border-color: var(--color-clear); background: var(--color-paper-3); }
.avatar { border: 0; color: var(--color-ink); font-weight: 500; }
.avatar.tint-0 { background: var(--color-pink); color: var(--color-ink); }
.avatar.tint-1 { background: var(--color-mint); color: var(--color-ink); }
.avatar.tint-2 { background: var(--color-violet); color: var(--color-ink); }
.avatar.tint-3 { background: var(--color-canary); color: var(--color-ink); }
.rail button[data-view="review"] .count { background: var(--color-canary); color: var(--color-ink); }
.brand { font-weight: 500; letter-spacing: -.02em; }
.brand-mark { border-radius: var(--radius-button); }

/* ---------- sunlit workspace: search ---------- */
.search-bar { min-height: 3rem; border-radius: var(--radius-input); }
.search-bar:focus-within { border-color: var(--color-ink); box-shadow: none; }
.search-bar #keywords { font-size: var(--text-lg); }
.filter-sec > summary { font-weight: 400; color: var(--color-ink); }
.rail-head h3, .results-head h3 { font-size: var(--text-xl); font-weight: 400; letter-spacing: -.011em; }
.stale-note { background: var(--color-canary); color: var(--color-ink); }
#results-body .empty-row td strong { font-size: var(--text-2xl); font-weight: 400; letter-spacing: -.02em; margin-bottom: var(--space-xs); }
#results-body .empty-row td span { color: var(--color-muted); }

/* ---------- sunlit workspace: pastel tiles and marks ---------- */
/* The three rates are category tiles: flat colour, no border, no shadow. */
.rate-card { border: 0; background: var(--color-mint); color: var(--color-ink); }
.rate-card:nth-child(2) { background: var(--color-violet); }
.rate-card:nth-child(3) { background: var(--color-canary); }
.rate-card:hover:not(:disabled) { background: var(--color-mint); filter: brightness(.97); }
.rate-card:nth-child(2):hover:not(:disabled) { background: var(--color-violet); }
.rate-card:nth-child(3):hover:not(:disabled) { background: var(--color-canary); }
.rate-card .muted, .rate-card span { color: var(--color-ink-2); }
.rate-card .rate-value { color: var(--color-ink); font-weight: 400; letter-spacing: -.03em; }
/* The signature: approved and sent wear a mint pill. */
.stamp-approved, .stamp-sending, .stamp-sent { min-height: 1.5rem; padding: 0 var(--space-xs) 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-mint); color: var(--color-ink); font-weight: 400; }

/* ---------- sunlit workspace: flow editor ---------- */
/* Steps are white cards; the icon chip carries the colour of the step's kind. Conditions are canary tiles. */
.fe-card { border-radius: var(--radius-card); box-shadow: none; }
.fe-node.selected .fe-card { border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink); }
.fe-icon { border-radius: var(--radius-button); background: var(--color-paper-3); }
.fe-visit .fe-icon, .fe-like .fe-icon { background: var(--color-mint); }
.fe-invite .fe-icon, .fe-withdraw .fe-icon { background: var(--color-violet); }
.fe-message .fe-icon, .fe-comment .fe-icon { background: var(--color-pink); }
.fe-wait .fe-icon { background: var(--color-aqua); }
.fe-accepted .fe-card, .fe-split .fe-card, .fe-replied .fe-card, .fe-has_post .fe-card, .fe-seen .fe-card, .fe-viewed .fe-card { border-color: var(--color-clear); border-radius: var(--radius-card); background: var(--color-canary); }
.fe-accepted .fe-card:hover:not(:disabled), .fe-split .fe-card:hover:not(:disabled), .fe-replied .fe-card:hover:not(:disabled), .fe-has_post .fe-card:hover:not(:disabled), .fe-seen .fe-card:hover:not(:disabled), .fe-viewed .fe-card:hover:not(:disabled) { background: var(--color-canary); border-color: var(--color-rule-2); }
.fe-accepted .fe-icon, .fe-split .fe-icon, .fe-replied .fe-icon, .fe-has_post .fe-icon, .fe-seen .fe-icon, .fe-viewed .fe-icon { background: rgb(255 255 255 / .6); }
.fe-start .fe-card:hover:not(:disabled) { filter: none; background: var(--color-action-hover); }
.fe-link { stroke: var(--color-silver); }
.fe-link.fe-yes, .fe-out-yes { stroke: var(--color-success); border-color: var(--color-success); }
.fe-link.fe-no, .fe-out-no { stroke: var(--color-error); border-color: var(--color-error); }
.fe-in, .fe-out { border-color: var(--color-silver); }
.fe-out-yes .fe-port-label { color: var(--color-success); }
.fe-out-no .fe-port-label { color: var(--color-error); }
.fe-node.fe-bad .fe-card { border-color: var(--color-warn-solid); }
.fe-add { background: var(--color-clear); }
.fe-add:hover:not(:disabled) { background: var(--color-paper-2); }
#results-body .empty-row td strong { color: var(--color-ink); }

/* ---------- sunlit workspace: sign-in ---------- */
/* The one page that is all brand: a white card on the wash. */
.auth-page { min-height: 100dvh; background: var(--wash-hero) fixed; }
.auth-card { gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-lg); border: 0; box-shadow: var(--shadow-pop); }
.auth-card .brand { font-weight: 500; }
.auth-title { font-size: 1.75rem; font-weight: 400; line-height: 1.1; letter-spacing: -.017em; }
.auth-form { gap: var(--space-md); }
.auth-form input, .auth-form button.primary { height: 2.75rem; font-size: var(--text-lg); }

/* ---------- loading ---------- */
/* The first child is the screen-reader line (a span), so items are counted with nth-of-type.
   While data loads, a screen shows grey bars in the shape of what is coming, with one calm pulse. No "Loading…" text. */
@keyframes sk-pulse { 50% { opacity: .5; } }
.sk { display: grid; animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-item { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--row-height); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.sk-item:last-of-type { border-bottom: 0; }
.sk-dot { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-paper-3); }
.sk-lines { flex: 1; display: grid; gap: var(--space-xs); }
.sk-lines i { height: .625rem; border-radius: 4px; background: var(--color-paper-3); }
.sk-lines i:first-child { width: 36%; }
.sk-lines i:last-child { width: 72%; background: var(--color-paper-2); }
.sk-item:nth-of-type(odd) .sk-lines i:first-child { width: 28%; }
.sk-item:nth-of-type(3n) .sk-lines i:last-child { width: 56%; }
.sk-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.sk-card .sk-item { min-height: 9rem; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); }
/* the dashboard's shape: the chart, the side column, then a full row */
.sk-card .sk-item:nth-of-type(1) { grid-column: span 2; min-height: 18rem; }
.sk-card .sk-item:nth-of-type(2) { min-height: 18rem; }
.sk-card .sk-item:nth-of-type(3) { grid-column: 1 / -1; }
.sk-thread { align-content: start; gap: var(--space-md); padding: var(--space-lg); }
.sk-thread .sk-item { width: 56%; min-height: 4.5rem; border: 0; border-radius: var(--radius-card); background: var(--color-paper-3); }
.sk-thread .sk-item:nth-of-type(even) { justify-self: end; width: 44%; }
.sk-tr td, .log .sk-li { padding: 0; }
.log .sk-li { display: block; }
.log .sk-item { padding-inline: 0; }
/* A refresh button turns its own icon while it works. */
.turning .icon { animation: progress-turn 900ms linear infinite; }
@media (max-width: 760px) { .sk-card { grid-template-columns: minmax(0, 1fr); } .sk-card .sk-item:nth-of-type(1) { grid-column: auto; } }

/* ---------- contact search ---------- */
.c-contact { min-width: 9rem; max-width: 14rem; }
/* Room for the Contact column: the role gives up some width. */
#list-rows .row-role { max-width: 22ch; }
/* How sure: green confirmed, amber likely, grey guess. The words say it too, so colour is never the only sign. */
.tier-confirmed { --tier: #17602a; --tier-bg: #dcf5d9; } .tier-likely { --tier: #6b4a00; --tier-bg: #fdf0c8; } .tier-guess { --tier: #5c5b5a; --tier-bg: #ecebea; }
.c-icons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.c-ic { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: var(--tier-bg); color: var(--tier); }
.c-ic .icon { width: .9rem; height: .9rem; }
.c-chip, .c-chip-text { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 6px; border-radius: 6px; background: var(--tier-bg); color: var(--tier); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-decoration: none; }
.c-chip:hover, .c-ic:hover:not(:disabled) { filter: brightness(.95); background: var(--tier-bg); }
.c-dots { display: inline-flex; gap: 4px; } .c-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-silver); animation: sk-pulse 1.2s ease-in-out infinite; } .c-dots i:nth-child(2) { animation-delay: .2s; } .c-dots i:nth-child(3) { animation-delay: .4s; }
.found-list { display: grid; gap: var(--space-xs); width: 100%; margin: 0; padding: 0; list-style: none; }
.found-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.found-card .c-ic { pointer-events: none; }
.found-card .c-ic .c-chip-text { background: none; padding: 0; min-width: 0; }
.found-body { display: grid; min-width: 0; }
.found-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found-meta { font-size: var(--text-sm); color: var(--color-muted); }
.tier-word { color: var(--tier); font-weight: 500; }
.icon-only { width: 2rem; padding: 0; justify-content: center; }
.domain-row { display: grid; gap: 4px; width: 100%; margin-top: var(--space-xs); }
.domain-row label { font-size: var(--text-sm); color: var(--color-muted); }
.domain-edit { display: flex; gap: var(--space-xs); } .domain-edit input { flex: 1; min-width: 0; font-family: var(--font-mono); }
.enrich-progress { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); }
.enrich-progress .icon { width: .9rem; height: .9rem; vertical-align: -2px; }
/* With the person panel open, the list toolbar wraps instead of crushing the search box. */
#list-detail .toolbar { flex-wrap: wrap; }
#list-detail .toolbar .search-field { min-width: 14rem; }
.enrich-summary { display: inline-flex; align-items: center; gap: var(--space-xs); }
.enrich-counts { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--space-sm); height: 2.25rem; border: 1px solid var(--color-rule); border-radius: var(--radius-button); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-2); }
.enrich-counts .icon { width: .9rem; height: .9rem; color: var(--color-muted); margin-left: 4px; } .enrich-counts .icon:first-child { margin-left: 0; }
.searching-line { display: flex; align-items: center; gap: var(--space-xs); }
.found-foot .ghost { margin-left: 4px; }
.c-chip .brand, .c-ic .brand { width: .85rem; height: .85rem; }
.domain-line .text-link { padding: 0; border: 0; background: none; min-height: 0; font: inherit; }
.tier-word { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }

/* The campaign line under a list's name. */
.campaign-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--text-sm); }
.campaign-line .link-button { margin-left: var(--space-xs); }
.inline-pick { width: auto; max-width: 16rem; padding: 2px 24px 2px 6px; min-height: 0; font-weight: 600; font-size: var(--text-sm); }
.run-card-wide { grid-column: 1 / -1; }
.run-card-wide .run-actions select { flex: 1; min-width: 12rem; }
.pane-head { position: relative; }
.pane-head .run-menu { position: static; }
.pane-head .run-pop { left: 0; right: auto; width: min(46rem, 100%); }
.run-card-wide .run-actions button { flex: 0 0 auto; padding-inline: var(--space-lg); }
.pane-head { flex-wrap: nowrap; }
.pane-title { flex: 1; }
.pane-controls { flex-wrap: nowrap; }
.pane-head .run-pop { left: auto; right: 0; }
.campaign-line button.link-button { padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; color: var(--color-ink); font-weight: 400; font-size: inherit; }
@media (max-width: 60rem) { .pane-head, .pane-controls { flex-wrap: wrap; } }
.campaign-line { margin: 2px 0 var(--space-sm); }
.auth-notice { margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface-sunk); font-size: var(--text-sm); }
.auth-notice p { margin: 0 0 var(--space-xs); }
.auth-check { display: flex; align-items: center; gap: var(--space-xs); font-weight: 500; }
.auth-check input { width: auto; }
/* Phones: the list header is two tidy rows. Contact counts and Search again on top, then Start and the campaign menu side by side. */
@media (max-width: 40rem) {
  .pane-controls .enrich-summary { flex: 1 0 100%; justify-content: space-between; }
  .pane-controls > .campaign-toggle { flex: 0 0 auto; }
  .pane-controls > .run-menu { flex: 1 1 0; min-width: 0; }
  .pane-controls > .run-menu > summary { width: 100%; justify-content: center; padding-inline: var(--space-sm); }
  .pane-head + .campaign-line { margin-top: var(--space-xs); }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-xs); padding: var(--space-xs); }
  .stats > .stat { justify-content: flex-start; }
  .stats > .stat-total, .stats > .stat-progress { grid-column: span 3; padding: 0 var(--space-2xs); }
}
@media (max-width: 40rem) {
  .network-bar .net-bulk { flex: 1 1 100%; min-width: 0; order: 1; }
  .net-bulk > button { padding-inline: var(--space-sm); white-space: normal; }
  .net-bulk > select, .net-bulk > button { flex: 1 1 0; min-width: 0; }
}
.queue-held { background: var(--color-surface-sunk); }
.queue-held .queue-hold .link-button { text-align: left; }
.queue-held .queue-hold button.link-button { flex: 1; min-width: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: var(--text-sm); color: var(--color-ink); text-align: left; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-held .queue-hold > button:not(.link-button) { flex: none; }
.queue-held .queue-hold button.link-button { display: block; justify-content: flex-start; }
.queue-group button.queue-fold { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.queue-group button.queue-fold { justify-content: flex-start; }
.queue-held-hint { margin: 0; padding: 0 var(--space-md) var(--space-xs); font-size: var(--text-sm); }
/* The in-app yes/no question and the in-app tooltip (the app never uses the browser's own popups). */
.ask-dialog { width: min(440px, calc(100% - var(--space-lg))); padding: var(--space-lg); }
.ask-dialog h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); font-weight: 600; }
.ask-dialog p { margin: 0 0 var(--space-md); }
.ask-dialog .actions { display: flex; gap: var(--space-xs); }
.tip { position: fixed; z-index: calc(var(--z-modal) + 1); max-width: 280px; padding: 6px 10px; border-radius: 8px; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); line-height: 1.4; pointer-events: none; box-shadow: var(--shadow-pop); }
/* Phones: each campaign becomes a card (no sideways scrolling), and the Tasks tabs wrap into a 2 × 2 grid. */
@media (max-width: 40rem) {
  .campaign-list, .campaign-list tbody, .campaign-list tr, .campaign-list th, .campaign-list td { display: block; width: auto; }
  .campaign-list thead { display: none; }
  .campaign-list tr { height: auto; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .campaign-list tr:last-child { border-bottom: 0; }
  .campaign-list th, .campaign-list td { padding: 2px 0; border: 0; }
  .campaign-list td[data-label="Status"] { margin: var(--space-2xs) 0; }
  .campaign-list td.actions { display: flex; align-items: center; gap: var(--space-xs); justify-content: flex-start; padding-top: var(--space-xs); }
  #view-review .filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; overflow: visible; }
  #view-review .filters button { justify-content: space-between; }
}
.brand img.logo { display: block; height: 26px; width: auto; }
/* The top of the dashboard: today's story in a serif headline, with the week's numbers beside it. */
.today { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.today-kick { font-size: var(--text-sm); color: var(--color-muted); }
.today-head { margin-top: var(--space-2xs); font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.03; letter-spacing: -.01em; color: var(--color-ink-strong); text-wrap: balance; }
.today-head em { color: var(--color-brand); font-style: italic; font-synthesis: style; }
.today-line { margin-top: var(--space-sm); max-width: 48rem; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); }
.today-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); }
.today-who { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.today-faces { display: flex; } .today-faces > * { margin-left: -10px; border: 2px solid var(--color-surface); } .today-faces > :first-child { margin-left: 0; }
.today-side { display: grid; gap: var(--space-sm); padding-left: var(--space-lg); border-left: 1px solid var(--color-rule); }
.today-stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.today-stat b { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.today-stat.hot b { color: var(--color-brand); }
@media (max-width: 900px) { .today { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-lg); } .today-side { padding: var(--space-md) 0 0; border-left: 0; border-top: 1px solid var(--color-rule); } }
/* Home: pipeline on one line, then what needs you beside campaigns at work, then a smaller trend. */
#overview { display: grid; gap: var(--space-md); }
.pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.pipe-title { margin-right: auto; font-size: var(--text-sm); color: var(--color-muted); }
.pipe-step { display: inline-flex; align-items: baseline; gap: 6px; min-height: 0; padding: 4px 8px; border: 0; background: none; box-shadow: none; border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--text-sm); }
.pipe-step b { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.pipe-step:hover { background: var(--color-mist); }
.pipe-rate { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs, .75rem); color: var(--color-muted); }
.pipe-line { width: 28px; height: 1px; background: var(--color-silver); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-md); }
.home-card { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.card-count { margin-left: var(--space-xs); padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-brand); color: #fff; font-size: var(--text-xs, .75rem); font-weight: 600; }
.home-empty { padding: var(--space-md) 0; font-size: var(--text-sm); }
.needs, .camps { display: grid; gap: 2px; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.need { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); width: 100%; min-height: 0; padding: var(--space-sm); border: 0; border-radius: var(--radius-input); background: none; box-shadow: none; text-align: left; justify-content: stretch; }
.need:hover { background: var(--color-mist); }
.need-text { display: grid; min-width: 0; }
.need-who { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-who b { font-weight: 600; color: var(--color-ink-strong); }
.need-quote { font-size: var(--text-sm); color: var(--color-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-time { font-size: var(--text-xs, .75rem); color: var(--color-muted); }
.camp { display: grid; gap: 6px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.camp:last-child { border-bottom: 0; }
.camp-top { display: flex; align-items: center; gap: var(--space-xs); }
.camp-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-state { font-size: var(--text-xs, .75rem); color: var(--color-muted); }
.camp-state.camp-active { color: var(--color-green); }
.camp-bar { height: 6px; border-radius: 3px; background: var(--color-paper-3); overflow: hidden; }
.camp-fill { display: block; height: 100%; background: var(--color-ink); border-radius: 3px; }
.camp-note { font-size: var(--text-xs, .75rem); }
.trend-card .chart-wrap, .trend-card .chart-area-box, .trend-card .chart { min-height: 0; } .trend-card .chart-wrap { flex: none; } .trend-card .chart-area-box { height: 9.5rem; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } .pipe-title { width: 100%; } }
.camp-fill.w0 { width: 0%; }
.camp-fill.w5 { width: 5%; }
.camp-fill.w10 { width: 10%; }
.camp-fill.w15 { width: 15%; }
.camp-fill.w20 { width: 20%; }
.camp-fill.w25 { width: 25%; }
.camp-fill.w30 { width: 30%; }
.camp-fill.w35 { width: 35%; }
.camp-fill.w40 { width: 40%; }
.camp-fill.w45 { width: 45%; }
.camp-fill.w50 { width: 50%; }
.camp-fill.w55 { width: 55%; }
.camp-fill.w60 { width: 60%; }
.camp-fill.w65 { width: 65%; }
.camp-fill.w70 { width: 70%; }
.camp-fill.w75 { width: 75%; }
.camp-fill.w80 { width: 80%; }
.camp-fill.w85 { width: 85%; }
.camp-fill.w90 { width: 90%; }
.camp-fill.w95 { width: 95%; }
.camp-fill.w100 { width: 100%; }
/* Loading shapes for the home: the headline, the story line, the faces and the button. */
.today-sk { gap: var(--space-sm); margin-top: var(--space-xs); }
.today-sk i { display: block; border-radius: 8px; background: var(--color-paper-3); }
.today-sk .sk-head { height: 3rem; } .today-sk .sk-text { height: 1rem; margin-top: var(--space-xs); }
.today-sk .w70 { width: 70%; } .today-sk .w45 { width: 45%; } .today-sk .w55 { width: 55%; }
.today-sk .sk-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-sm); }
.today-sk .sk-faces { width: 9rem; height: 2rem; border-radius: 999px; } .today-sk .sk-btn { width: 9rem; height: 2.5rem; border-radius: var(--radius-input); }
.pipe-empty { font-size: var(--text-sm); }
.pipe-title .muted { font-size: var(--text-xs, .75rem); }
/* Trend: a range picker inside the calendar chip, and one day read out under the pointer. */
.metric-range select { field-sizing: content; width: auto; height: auto; min-height: 0; padding: 0 1.1rem 0 0; border: 0; background-color: transparent; background-position: calc(100% - 7px) 52%, calc(100% - 2px) 52%; box-shadow: none; font-size: var(--text-md); color: var(--color-ink-2); }
.metric-range:focus-within { border-color: var(--color-ink-2); }
.chart-area-box { cursor: crosshair; touch-action: pan-y; outline: none; }
.chart-area-box:focus-visible { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-ink-2); border-radius: 4px; }
.chart-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-silver); pointer-events: none; }
.chart-mark { pointer-events: none; }
.chart-tip { position: absolute; top: 0; display: grid; gap: 2px; padding: 6px 10px; transform: translateX(10px); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); box-shadow: 0 4px 16px rgb(0 0 0 / .08); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; pointer-events: none; }
.chart-tip.flip { transform: translateX(calc(-100% - 10px)); }
.chart-tip b { font-weight: 600; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.chart-guide[hidden], .chart-mark[hidden], .chart-tip[hidden], .chart-end[hidden] { display: none; }