/* Clue Senit — tokens. The only source is DESIGN-SYSTEM.md; nothing here is invented. */
:root {
  /* Colour (DESIGN-SYSTEM.md §2) */
  --accent: #E66D37;      /* the one primary action per screen */
  --link: #C43C00;        /* genuine navigation only */
  /* One neutral ramp, hue 220, saturation climbing 9%->20% as it lightens. The six greys used
     to come from four hue families (197deg-240deg, saturation 0.8%-28%): --muted was a blue-grey
     sitting beside near-neutrals, --border a green-grey. Nobody can name that, everybody sees
     it. Contrast measured on both --white and --ground, all AA: ink 18.58/17.33, body
     10.90/10.17, muted 5.86/5.46, faint 5.05/4.71 (up from 4.51, which had no headroom). */
  --ink: #111318;         /* headings, emphasis, active and checked states */
  --body: #383d47;        /* body text */
  --muted: #5e6573;       /* labels, captions */
  --faint: #686f7d;       /* placeholders, disabled, axis labels */
  --hairline: #dfe2e7;    /* every divider, rule and border at rest */
  --border: #b5bac5;      /* secondary button and input borders */
  --ground: #f6f7f9;      /* page background */
  --white: #FFFFFF;       /* raised surfaces */
  --good: #12B76A;
  --warn: #F79009;
  --bad: #D92D20;
  /* Aliases kept so existing rules land on the tokens above rather than on old values. */
  --orange: var(--accent); --orange-text: var(--link); --orange-hover: #F2723A;  /* brighter, not darker: the primary label is ink, so hover must raise contrast (6.20:1) */
  --menu-grey: var(--faint); --slate: var(--muted); --gainsboro: var(--hairline);
  --rule: var(--hairline); --rule-strong: var(--ink);
  --green: var(--good); --amber: var(--warn); --red: var(--bad);
  --hover: #FAFAFA; --sel: #F2F3F5;
  --gray-200: var(--hairline); --midnight: var(--ink); --dark-slate: var(--ink);
  --blue-wash: var(--ground); --blue-border: var(--hairline);
  --green-text: #027A48; --amber-text: #B54708; --red-text: #B42318;
  --green-wash: #ECFDF3; --amber-wash: #FFFAEB; --red-wash: #FEF3F2; --orange-wash: #FEF6F3;
  --green-border: #ABEFC6; --amber-border: #FEDF89; --red-border: #FECDCA; --orange-border: #FAD3C3;
  /* Elevation ramp, ported from Untitled UI's published scale (verified against their source,
     not recalled). --shadow and --shadow-lg used to be the same value, so nothing could read as
     nearer than anything else. Layered shadows -- a tight contact shadow plus a wide soft one --
     are what separate a raised surface from a rectangle with a grey blur under it.
     Still at most one lifted element per screen: the ramp gives depth, not permission. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow: var(--shadow-md);
  --shadow-lg: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03), 0 2px 2px -1px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 24px -4px rgba(0,0,0,.08), 0 8px 8px -4px rgba(0,0,0,.03), 0 3px 3px -1.5px rgba(0,0,0,.04);
  /* Focus: a 4px brand-tinted halo outside a solid edge, Untitled UI's pattern, in Clue orange. */
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px rgba(230,109,55,.45);
  /* Space (§4). 4, 8, 12, 16, 24, 32, 48, 64 and nothing else. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* Type (§3). 11, 11.5, 12, 12.5, 13, 13.5, 15, 22, 24 and nothing else. */
  --t-eyebrow: 11px;    /* 600, .06em, uppercase */
  --t-pill: 11.5px;     /* status pill */
  --t-hint: 12px;       /* the rare surviving helper text */
  --t-mono: 12px;       /* dates, counts, rates, keys */
  --t-label: 12.5px;    /* form labels, sm button */
  --t-cell: 13px;       /* table cell, filter chip */
  --t-body: 13.5px;     /* default, default button */
  --t-section: 15px;    /* card and section headings, lg button */
  --t-title: 22px;      /* the one page title */
  --t-metric: 24px;     /* KPI figure */
  /* Older alias names, remapped onto the scale above. */
  --t-xs: var(--t-eyebrow); --t-sm: var(--t-hint); --t-btn-sm: var(--t-label); --t-base: var(--t-cell);
  --t-btn: var(--t-cell); --t-md: var(--t-body); --t-lg: var(--t-section);
  --t-xl: var(--t-section); --t-2xl: var(--t-title); --t-3xl: var(--t-title); --t-display: var(--t-title);
  --fast: .1s;
  --control-h: 26px;
  --r-card: 15px; --r-btn: 50px; --r-pill: 100px; --r-sm: 10px;
  --rail-w: 232px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: var(--t-body)/1.55 var(--font); color: var(--body); background: var(--ground); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 600; }
h1 { font-size: var(--t-title); line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: var(--t-section); line-height: 1.15; letter-spacing: -.01em; }
h3 { font-size: var(--t-section); line-height: 1.15; letter-spacing: -.01em; }
h4 { font-size: var(--t-body); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--s2); }
/* Section eyebrow: the label above a group, never a heading in disguise. */
.eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
/* Figures read as instrument data: mono, and digits line up in columns. */
.num, .mono, .kpi .value, .tbl td.num, .meta { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.meta { font-size: var(--t-mono); color: var(--muted); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: var(--t-sm); }
pre { margin: 0; }
.muted { color: var(--menu-grey); }
.slate { color: var(--body); }
.kv .k { color: var(--menu-grey); }
.ink { color: var(--ink); }
.small { font-size: var(--t-base); }
.strong { font-weight: 600; color: var(--ink); }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s5); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt8 { margin-top: var(--s2); } .mt16 { margin-top: var(--s4); } .mt24 { margin-top: var(--s5); } .mb16 { margin-bottom: var(--s4); } .mb24 { margin-bottom: var(--s5); }
.right { text-align: right; }
.center { text-align: center; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.rail { width: var(--rail-w); flex: 0 0 var(--rail-w); background: var(--ink); color: #d7dadc; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.rail-logo, .rail-logo:hover, .rail-logo * { text-decoration: none !important; }
.rail-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 24px 16px 16px; color: var(--white); }
.rail-logo .wordmark { font-weight: 600; font-size: var(--t-xl); line-height: 1; letter-spacing: -.03em; color: var(--orange); }
/* Now the only wordmark, so it carries the identity rather than sitting under one. */
.rail-logo .product { font-weight: 600; font-size: var(--t-xl); line-height: 1; color: var(--white); letter-spacing: -.02em; }
.rail-section { padding: 8px 12px 4px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--menu-grey); font-weight: 600; }
.rail a.nav { display: flex; align-items: center; gap: 12px; margin: 2px 8px; padding: 8px 12px; border-radius: 10px; color: var(--gray-200); font-weight: 500; position: relative; }
.rail a.nav:hover { background: rgba(255,255,255,.06); color: var(--white); text-decoration: none; }
.rail a.nav.active { background: rgba(255,255,255,.08); color: var(--white); }
.rail a.nav.active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--orange); }
.rail a.nav.sub { padding-left: 48px; font-size: var(--t-base); }
.rail a.nav svg { width: 20px; height: 20px; flex: 0 0 20px; }
.rail-foot { margin-top: auto; padding: 16px 16px; font-size: var(--t-sm); color: var(--menu-grey); border-top: 1px solid rgba(255,255,255,.06); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  background-image: repeating-linear-gradient(0deg, rgba(21,23,24,.022) 0 1px, transparent 1px 4px); }
.topbar { height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 32px; background: var(--white); border-bottom: 1px solid var(--gainsboro); position: sticky; top: 0; z-index: 20; }
.view { padding: var(--s7) var(--s6) 96px; max-width: 1440px; width: 100%; }
.view:focus, .view:focus-visible { outline: none; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.page-head .sub { color: var(--slate); margin-top: var(--s2); max-width: 62ch; }
.breadcrumb { font-size: var(--t-base); color: var(--slate); margin-bottom: var(--s2); }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--orange-text); }

@media (max-width: 1100px) {
  :root { --rail-w: 64px; }
  .rail-logo .wordmark, .rail-logo .wordmark-img, .rail-logo .product, .rail a.nav span, .rail-section, .rail-foot { display: none; }
  .rail-logo { justify-content: center; padding: 24px 0 16px; }
  .rail a.nav { justify-content: center; padding: 8px; }
  .rail a.nav.sub { padding-left: 8px; }
  .view { padding: 16px; }
}

/* Search */
.search { position: relative; width: 420px; max-width: 40vw; }
.search input { width: 100%; height: var(--control-h); font-size: var(--t-btn); border: 1px solid var(--gainsboro); border-radius: 60px; padding: 0 12px 0 30px; background: var(--ground); }
.search input:focus { background: var(--white); border-color: var(--border); outline: none; }
.search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--slate); }
.search-results { position: absolute; top: 46px; left: 0; right: 0; background: var(--white); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); border: 1px solid var(--gainsboro); padding: 8px; z-index: 30; max-height: 420px; overflow: auto; }
.search-results .group { padding: 8px 8px 4px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); font-weight: 600; }
.search-results a.item { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 8px; color: var(--ink); }
.search-results a.item:hover { background: var(--ground); text-decoration: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: var(--control-h); padding: 0 12px; border-radius: var(--r-btn); border: 1px solid transparent; font-weight: 500; font-size: var(--t-btn); line-height: 1; transition: all var(--fast); white-space: nowrap; text-decoration: none; flex: 0 0 auto; width: fit-content; max-width: 100%; }
.btn:hover { text-decoration: none; }
.btn:not(:has(> svg, > .arrow, > img)) { padding: 0 12px; justify-content: center; }
.btn.primary { background: var(--orange); color: var(--ink); }
.btn.primary:hover { background: var(--orange-hover); }
.btn.primary { padding: 0 4px 0 12px; justify-content: space-between; }
.btn.primary .arrow { width: 19px; height: 19px; flex: 0 0 19px; }
.btn.light { background: var(--white); color: var(--ink); border-color: var(--border); }
.btn.light:hover { border-color: var(--ink); }
.btn.dark { background: var(--ink); color: var(--white); }
.btn.dark:hover { background: #000; }
.btn.danger { background: var(--white); color: var(--ink); border-color: var(--border); }
.btn.danger:hover { color: var(--bad); border-color: var(--bad); background: var(--white); }
.btn.ghost { background: transparent; color: var(--body); }
.btn.ghost:hover { background: var(--ground); color: var(--ink); }
.btn.sm { height: 22px; font-size: var(--t-btn-sm); padding: 0 8px; gap: 4px; }
.btn.sm.primary { padding: 0 2px 0 8px; }
.btn.sm .arrow { width: 16px; height: 16px; flex-basis: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg.ic { width: 15px; height: 15px; }
.icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 0; background: transparent; color: var(--slate); position: relative; flex: 0 0 28px; }
.icon-btn::after { content: ""; position: absolute; inset: -2px; }
.icon-btn:hover { background: var(--ground); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.icon-btn.danger:hover { color: var(--red-text); background: var(--red-wash); }

/* Cards */
/* A panel is the default container: white, ruled, flat. Radius and palette are unchanged. */
.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s6); }
/* The one element per screen that earns lift. */
.card.lift { box-shadow: var(--shadow); border-color: transparent; }
/* No chrome at all: content held apart by space and a rule. */
.card.flat { background: transparent; border: 0; border-radius: 0; padding: 0 0 var(--s5); border-bottom: 1px solid var(--rule); }
.card.flat:last-child { border-bottom: 0; padding-bottom: 0; }
/* Ink panel: the one place a section may dominate, in place of more accent colour. */
.card.ink { background: var(--ink); border-color: var(--ink); color: var(--gray-200); }
/* --muted and --faint are tuned for a light ground; on --ink they read 3.67:1. A dark
   surface needs its own secondary ink, so scope one rather than lightening the tokens. */
.card.ink .muted, .card.ink .small, .card.ink .hint { color: #A8AEB8; }
.card.ink h1, .card.ink h2, .card.ink h3, .card.ink .strong, .card.ink .value { color: var(--white); }
.card.ink .muted, .card.ink .slate, .card.ink .label { color: var(--menu-grey); }
.card.compact { padding: var(--s3) var(--s4); }
.card.tight { padding: 0; overflow: hidden; }
/* A tight card holds a table edge to edge, but its own header still needs room. */
.card.tight > .card-head { padding: var(--s6) var(--s6) var(--s4); margin-bottom: 0; }
.card.tight > .table-wrap { box-shadow: none; border: 0; border-radius: 0; }
.card.tight > .table-wrap.scrollable { box-shadow: inset -26px 0 18px -18px rgba(15,23,41,.22); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.card-head h2 { font-size: var(--t-section); }
.grid { display: grid; gap: var(--s4); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.c5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid.c6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1280px) { .grid.c5, .grid.c6 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* KPI */
.kpi { background: transparent; border-radius: 0; padding: 0 var(--s5) var(--s1) 0; border-right: 1px solid var(--rule); }
.kpi:last-child { border-right: 0; }
.kpi .label { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.kpi .value { font-size: var(--t-metric); font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin-top: var(--s2); line-height: 1; }
.kpi .sub { color: var(--muted); font-size: var(--t-hint); line-height: 1.5; margin-top: var(--s2); }
/* Hierarchy comes from weight and space, never from a bigger figure. */
.kpi.hero .value { font-size: var(--t-metric); }
@media (max-width: 1280px) { .kpi { border-right: 0; padding-right: var(--s4); } }
.kpi .delta.up { color: var(--green); } .kpi .delta.down { color: var(--red); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--t-pill); font-weight: 500; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.pill.gray { background: var(--ground); color: var(--slate); border-color: var(--gray-200); }
.pill.orange { background: var(--orange-wash); color: var(--orange-text); border-color: var(--orange-border); }
.pill.green { background: var(--green-wash); color: var(--green-text); border-color: var(--green-border); }
.pill.blue { background: var(--blue-wash); color: var(--dark-slate); border-color: var(--blue-border); }
.pill.amber { background: var(--amber-wash); color: var(--amber-text); border-color: var(--amber-border); }
.pill.red { background: var(--red-wash); color: var(--red-text); border-color: var(--red-border); }
.pill.dark { background: var(--ink); color: var(--white); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-hint); background: var(--ground); color: var(--ink); border: 1px solid var(--hairline); }
.tag-chip .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--menu-grey); }
.tag-chip button { border: 0; background: transparent; padding: 0; color: var(--slate); line-height: 1; font-size: var(--t-md); }
/* Segment starting points. These were pills stretched to hold two lines of text, which reads
   as a disabled input rather than something you can click. A card with a visible affordance --
   icon, hover lift, arrow on hover -- says "pick me" without a label explaining it. */
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .preset-grid { grid-template-columns: 1fr; } }
.preset { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--white); cursor: pointer; transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast); }
.preset:hover { border-color: var(--border); box-shadow: var(--shadow); }
.preset:active { transform: translateY(1px); }
.preset > .preset-icon { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ground); color: var(--muted); }
.preset > .preset-icon svg { width: 15px; height: 15px; }
.preset:hover > .preset-icon { background: var(--orange-wash); color: var(--accent); }
.preset-body { min-width: 0; flex: 1 1 auto; }
.preset-name { display: block; font-size: var(--t-cell); font-weight: 600; color: var(--ink); }
.preset-rule { display: block; font-size: var(--t-hint); color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.preset-go { flex: 0 0 auto; margin-left: auto; align-self: center; color: var(--faint); opacity: 0; transition: opacity var(--fast); }
.preset:hover > .preset-go, .preset:focus-visible > .preset-go { opacity: 1; }
.preset-go svg { width: 14px; height: 14px; }

.chip { display: inline-flex; align-items: center; gap: 4px; height: var(--control-h); padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--white); color: var(--body); font-size: var(--t-cell); font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--border); }
.chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Tables */
.table-wrap { overflow: auto; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); }
/* Wide tables scroll inside their card. The fade tells the reader there is more to the right. */
.table-wrap.scrollable { box-shadow: inset -26px 0 18px -18px rgba(15,23,41,.18); }
.tbl td.tags { max-width: 190px; overflow: hidden; }
.tbl td.ellip { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tbl td.primary { max-width: 260px; }
.tbl td.wide { max-width: 420px; }  /* the inner spans truncate; clipping the cell itself cuts avatars */
.tbl td.primary .strong, .tbl td.primary .muted, .tbl td.primary .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { position: sticky; top: 0; background: var(--white); z-index: 2; text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--menu-grey); font-weight: 600; padding: var(--s4); border-bottom: 1px solid var(--rule); white-space: nowrap; overflow: visible; text-overflow: clip; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--ink); }
.tbl th .sort-ind { display: inline-block; margin-left: 4px; opacity: .6; }
.tbl td { padding: 0 var(--s4); height: 52px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--body); white-space: nowrap; }
.tbl td.wrap { white-space: normal; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.selected td { background: var(--sel); }
.tbl .chk { width: 40px; padding-right: 0; }
.tbl .actions { width: 1%; white-space: nowrap; text-align: right; }
.tbl th.actions { font-size: var(--t-xs); letter-spacing: .06em; }
.tbl .actions .icon-btn { opacity: .55; transition: opacity var(--fast); }
.tbl tr:hover .actions .icon-btn, .tbl .actions .icon-btn:focus-visible { opacity: 1; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); font-size: var(--t-base); color: var(--slate); }
.pager { display: flex; gap: 4px; align-items: center; }
.pager button { height: 30px; min-width: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--body); }
.pager button.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pager button:disabled { opacity: .4; cursor: default; }
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--ink); color: var(--white); border-radius: var(--r-sm); margin-bottom: 12px; flex-wrap: wrap; }
.bulk-bar .btn { height: 32px; font-size: var(--t-base); padding: 0 12px; }
.bulk-bar .btn.ghost { color: var(--white); border-color: rgba(255,255,255,.2); }
.bulk-bar .btn.ghost:hover { background: rgba(255,255,255,.1); color: var(--white); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; vertical-align: middle; }
input[type=radio] { accent-color: var(--ink); }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); min-width: 0; }

/* A control should be about as wide as what it holds. Left to itself a field fills its
   container, so a name or a category select stretched the full width of a dialog and read as a
   mistake. The cap applies to single-line controls only: a textarea, the block editor and
   anything explicitly marked full-width still get the whole width, and inside a .form-row the
   grid column is already narrower than the cap so nothing changes there. */
.field > .input:not(textarea),
.field > .input-group,
.field .taginput { max-width: 480px; }
.taginput { max-width: 480px; }
.field.full .taginput, .taginput.full { max-width: none; }
.field.full > .input:not(textarea),
.field.full > .input-group,
.field.full .taginput { max-width: none; }
.field > .row { max-width: 480px; }
.field.full > .row { max-width: none; }
.field > .row > .input.grow { max-width: none; }   /* inside a capped row, fill what is left */
.field > label { font-size: var(--t-label); font-weight: 500; color: var(--ink); }
.field .hint { font-size: var(--t-hint); line-height: 1.5; color: var(--faint); max-width: 65ch; }
.field .err { font-size: var(--t-hint); color: var(--bad); }
.input, input.input, select.input, textarea.input { height: var(--control-h); font-size: var(--t-body); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: var(--white); width: 100%; transition: border-color var(--fast); }
.input:focus, .input:focus-within { border-color: var(--ink); outline: none; }
textarea.input { height: auto; min-height: 90px; padding: 8px 12px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6C84' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.input.sm { height: 28px; font-size: var(--t-hint); border-radius: 6px; }
.input::placeholder { color: var(--faint); }
.input.pillish { border-radius: 60px; height: 44px; padding: 0 16px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--s5); }
.form-row.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.modal .form-row.c3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: center; gap: 8px; }
.check input { margin: 0; flex: 0 0 auto; accent-color: var(--ink); cursor: pointer; }
.switch { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--hairline); border: 0; transition: background var(--fast); flex: 0 0 34px; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: left var(--fast); box-shadow: 0 1px 2px rgba(21,23,24,.25); }
.switch.on { background: var(--ink); }
.switch.on::after { left: 16px; }
.range { width: 100%; accent-color: var(--ink); }
.counter { font-size: var(--t-hint); color: var(--faint); }
.counter.warn { color: var(--amber); }
.taginput { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; box-sizing: border-box; min-height: var(--control-h); padding: 2px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); position: relative; }
.taginput input { border: 0; outline: 0; flex: 1 1 60px; min-width: 60px; height: calc(var(--control-h) - 6px); font-size: var(--t-body); background: transparent; }
.taginput:focus-within { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid transparent; outline-offset: 1px; box-shadow: var(--focus-ring); }
.taginput .sugg { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--white); border: 1px solid var(--gainsboro); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 15; max-height: 220px; overflow: auto; padding: 4px; }
.taginput .sugg div { padding: 8px 8px; border-radius: 6px; cursor: pointer; }
.taginput .sugg div:hover, .taginput .sugg div.hl { background: var(--ground); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: var(--s6); }
.tabs button { height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--slate); font-weight: 500; position: relative; white-space: nowrap; display: inline-flex; align-items: center; border-radius: 6px 6px 0 0; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); }
.tabs button.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.tabs .count { margin-left: 8px; font-size: var(--t-eyebrow); background: var(--ground); color: var(--muted); padding: 0 8px; line-height: 18px; border-radius: 10px; }

/* Modals & drawers */
.overlay { position: fixed; inset: 0; background: rgba(6,25,56,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade var(--fast) linear; }
.overlay.drawer-wrap { justify-content: flex-end; padding: 0; align-items: stretch; }
.modal { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-lg); width: 560px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; animation: pop var(--fast) linear; }
.modal.lg { width: 860px; } .modal.xl { width: 1160px; } .modal.full { width: calc(100vw - 48px); height: calc(100vh - 48px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--gainsboro); }
.modal-head h2 { font-size: var(--t-xl); }
.modal-body { padding: 16px 24px; overflow: auto; flex: 1; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--gainsboro); }
.drawer { background: var(--white); width: 520px; max-width: 100%; height: 100vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slide var(--fast) linear; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide { from { transform: translateX(12px) } to { transform: none } }

/* Toasts */
.toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--ink); color: var(--white); padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: var(--t-md); display: flex; gap: 8px; align-items: center; max-width: 420px; animation: pop var(--fast) linear; }
.toast svg { width: 18px; height: 18px; flex: 0 0 18px; }
.toast.error { background: var(--red); } .toast.success { background: var(--green-deep); }

/* Menus */
.menu { position: absolute; background: var(--white); border: 1px solid var(--gainsboro); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 50; min-width: 180px; }
.menu > button, .menu > a { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 8px; border: 0; background: transparent; border-radius: 6px; color: var(--ink); font-size: var(--t-md); }
.menu button:hover, .menu a:hover { background: var(--ground); text-decoration: none; }
.menu button.danger { color: var(--red); }
.menu svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--slate); }
svg:not([class]) { max-width: 24px; max-height: 24px; }
.menu hr { border: 0; border-top: 1px solid var(--gainsboro); margin: 4px 0; }
.menu-anchor { position: relative; }

/* Empty / skeleton */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--slate); }
.empty h3 { margin-bottom: 8px; }
.empty p { max-width: 380px; margin: 0 auto 16px; }
.skel { background: linear-gradient(90deg, var(--hairline) 25%, var(--ground) 50%, var(--hairline) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 6px; height: 14px; }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.skel-rows > div { height: 44px; margin: 8px 0; border-radius: 8px; }
.err-box { background: var(--red-wash); border: 1px solid var(--red-border); color: var(--red-text); padding: 12px 16px; border-radius: 10px; }
.note { background: var(--ground); border: 1px solid var(--rule); color: var(--body); padding: 8px 16px; border-radius: 10px; font-size: var(--t-base); }
.note.info { background: var(--ground); border-color: var(--gainsboro); }

/* Stepper */
.stepper { display: flex; gap: var(--s2); margin-bottom: var(--s5); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s2); }
.stepper button { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; background: transparent; border-radius: 10px; color: var(--slate); font-weight: 500; text-align: left; }
.stepper button .n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sm); font-weight: 600; background: var(--ground); color: var(--slate); }
.stepper button.active { background: var(--sel); color: var(--ink); }
/* A step number reports position, it does not act. Ink, never accent, so the screen's
   one orange element stays the action that advances the job. */
.stepper button.active .n { background: var(--ink); color: var(--white); }
.stepper button.done .n { background: var(--green); color: var(--white); }
.savestate { font-size: var(--t-sm); color: var(--menu-grey); }
.savestate.saving { color: var(--amber); }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist .item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--ground); }
.checklist .item svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.checklist .item.ok svg { color: var(--green); } .checklist .item.warn svg { color: var(--amber); } .checklist .item.error svg { color: var(--red); }
.checklist .item.error { background: var(--red-wash); }

/* Preview frame */
.preview-frame { background: var(--ground); border-radius: var(--r-card); border: 1px solid var(--gainsboro); padding: 16px; display: flex; justify-content: center; min-height: 500px; }
.preview-frame iframe { border: 1px solid var(--rule); background: var(--white); width: 100%; height: 720px; border-radius: 8px; transition: width var(--fast); }
.preview-frame.mobile iframe { width: 375px; }
.thumb { position: relative; aspect-ratio: 3/4; background: var(--ground); border-radius: 10px; overflow: hidden; border: 1px solid var(--gainsboro); }
.thumb iframe { position: absolute; top: 0; left: 0; width: 600px; height: 800px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.tpl-grid .tpl-card { padding: 8px; }
.tpl-grid .thumb { aspect-ratio: auto !important; height: 124px; }
.tpl-grid .thumb iframe { transform: scale(.24) !important; }
.tpl-grid .tpl-card .name { font-size: var(--t-md); margin-top: 8px; }
.tpl-grid .tpl-card .sub { font-size: var(--t-sm); }
.tpl-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s3); transition: border-color var(--fast); }
.tpl-card:hover { border-color: var(--ink); }
.tpl-card .name { font-weight: 600; color: var(--ink); margin-top: 8px; }
.tpl-card.pick { cursor: pointer; }
.tpl-card.pick.selected { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Timeline */
.timeline .day { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); font-weight: 600; margin: 16px 0 8px; }
.timeline .ev { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.timeline .ev .ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ground); color: var(--slate); flex: 0 0 30px; }
.timeline .ev .ic svg { width: 16px; height: 16px; }
.timeline .ev.open .ic { background: #EEF2F8; color: var(--dark-slate); }
.timeline .ev.click .ic, .timeline .ev.sent .ic { background: var(--sel); color: var(--slate); }
.timeline .ev.bounce .ic, .timeline .ev.complaint .ic, .timeline .ev.unsubscribe .ic { background: #FEF3F2; color: var(--red); }
.timeline .ev.subscribe .ic, .timeline .ev.delivered .ic { background: var(--green-wash); color: var(--green-text); }
.timeline .ev .t { font-size: var(--t-sm); color: var(--menu-grey); white-space: nowrap; }
.avatar { width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--sel); color: var(--slate); font-weight: 600; font-size: var(--t-xl); display: inline-flex; align-items: center; justify-content: center; }
.avatar.sm { width: 28px; height: 28px; font-size: var(--t-xs); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: center; font-size: var(--t-md); }
.kv .k { color: var(--slate); }
.inline-edit { padding: 4px 8px; margin: -4px -8px; border-radius: 6px; cursor: text; min-height: 24px; }
.inline-edit:hover { background: var(--ground); }
.inline-edit:empty::before { content: "Add"; color: var(--menu-grey); }

/* Segment builder */
.seg-group { border: 1px dashed var(--border); border-radius: 12px; padding: 12px; background: var(--white); }
.seg-group.nested { background: var(--ground); margin-top: 8px; }
/* One segmented-control pattern, shared with .segmented: the track carries the border and a
   2px inset, and the selected item is a rounded pill sitting inside it. The old version used
   overflow:hidden with a full-bleed square-cornered fill, so the black block collided with the
   track's rounded corners. align-self keeps it at its content width -- these sit in column
   flex containers, which otherwise stretch them across the whole card. */
.seg-op { display: inline-flex; align-self: flex-start; border: 1px solid var(--gainsboro); border-radius: 8px; padding: 2px; gap: 2px; background: var(--white); }
.seg-op button { border: 0; background: transparent; padding: 4px 12px; border-radius: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--slate); transition: background var(--fast), color var(--fast); }
.seg-op button:hover { color: var(--ink); }
.seg-op button.active { background: var(--ink); color: var(--white); }
.seg-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.count-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--white); padding: 4px 12px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--t-base); }

/* Editor */
.editor { display: grid; grid-template-columns: 220px 1fr 320px; gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; height: calc(100vh - 260px); min-height: 640px; }
.editor .pal { border-right: 1px solid var(--gainsboro); padding: 16px; overflow: auto; }
.editor .pal h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin: 8px 0 8px; }
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pal-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--gainsboro); border-radius: 10px; background: var(--white); font-size: var(--t-sm); color: var(--body); cursor: grab; text-align: center; }
.pal-item:hover { border-color: var(--ink); color: var(--ink); }
.pal-item svg { width: 20px; height: 20px; color: var(--slate); }
.editor .canvas-wrap { background: var(--ground); overflow: auto; padding: 32px 16px; }
.editor .canvas-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.email-frame { margin: 0 auto; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 0; min-height: 300px; }
.frame-scale { margin: 0 auto; position: relative; }
.frame-scale.scaled { overflow: visible; }
.frame-scale.scaled .email-frame { margin: 0; }
.frame-scale.scaled .blk-tools { transform: scale(calc(1 / var(--canvas-scale, 1))); transform-origin: top right; }
.blk { position: relative; border: 1px solid transparent; border-radius: 6px; transition: border-color var(--fast); }
.blk:hover { border-color: var(--orange-border); }
.blk.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,78,0,.12); }
.blk.drag-over-top { box-shadow: inset 0 3px 0 var(--orange); }
.blk.drag-over-bottom { box-shadow: inset 0 -3px 0 var(--orange); }
.blk .blk-tools { position: absolute; right: 6px; top: -14px; display: none; gap: 2px; background: var(--ink); border-radius: 8px; padding: 2px; z-index: 5; }
.blk.selected .blk-tools, .blk:hover .blk-tools { display: flex; }
.blk .blk-tools button { border: 0; background: transparent; color: var(--white); width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.blk .blk-tools button:hover { background: rgba(255,255,255,.15); }
.blk .blk-tools svg { width: 14px; height: 14px; }
.blk .blk-label { position: absolute; left: 6px; top: -10px; font-size: var(--t-xs); background: var(--orange); color: var(--ink); padding: 1px 8px; border-radius: 4px; display: none; text-transform: uppercase; letter-spacing: .05em; }
.blk.selected .blk-label { display: block; }
.drop-zone { height: 40px; border: 1px dashed var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--slate); font-size: var(--t-sm); margin: 8px; }
.drop-zone.over { border-color: var(--orange); background: var(--orange-wash); }
.editor .insp { border-left: 1px solid var(--gainsboro); overflow: auto; padding: 16px 16px; }
.insp .field { margin-bottom: 12px; }
.insp .field > label { font-size: var(--t-sm); }
.rte-tools { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 8px; }
.rte-tools button { height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--gainsboro); background: var(--white); border-radius: 6px; font-size: var(--t-sm); color: var(--body); }
.rte-tools button:hover { border-color: var(--ink); }
.rte { min-height: 120px; border: 1px solid var(--gainsboro); border-radius: 10px; padding: 8px 12px; outline: 0; }
.rte:focus { border-color: var(--ink); }
.rte p { margin: 0 0 8px; }
.editor-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.seg-toggle { display: inline-flex; align-self: flex-start; border: 1px solid var(--gainsboro); border-radius: 8px; padding: 2px; gap: 2px; background: var(--white); }
.seg-toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; padding: 4px 12px; border-radius: 6px; font-size: var(--t-base); font-weight: 500; color: var(--slate); white-space: nowrap; transition: background var(--fast), color var(--fast); }
/* The glyph sat flush against its label ("Desktop" with no gap). Size it and let the gap do the work. */
.seg-toggle button svg { width: 14px; height: 14px; flex: 0 0 14px; }
.seg-toggle button:hover { color: var(--ink); }
.seg-toggle button.active { background: var(--ink); color: var(--white); }
.code-area { font-family: var(--mono); font-size: var(--t-base); line-height: 1.5; min-height: 400px; height: 100%; }

/* Automation builder */
.auto-builder { display: grid; grid-template-columns: 200px 1fr 340px; gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; height: calc(100vh - 220px); min-height: 640px; }
.auto-builder .pal { border-right: 1px solid var(--gainsboro); padding: 16px; overflow: auto; }
.auto-builder .pal .pal-item { flex-direction: row; justify-content: flex-start; padding: 8px 8px; margin-bottom: 8px; cursor: default; }
.flow { background: var(--ground); overflow: auto; padding: 32px 16px; }
.flow-col { display: flex; flex-direction: column; align-items: center; min-width: 260px; }
.node { width: 260px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: var(--s3) var(--s4); cursor: pointer; position: relative; }
.node:hover { border-color: var(--border); }
.node.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,78,0,.12); }
.node .nt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.node .nt svg { width: 14px; height: 14px; }
.node .nb { margin-top: 4px; color: var(--ink); font-weight: 500; font-size: var(--t-md); }
.node.trigger { background: var(--ink); color: var(--white); border-color: var(--ink); }
.node.trigger .nt { color: var(--gray-200); } .node.trigger .nb { color: var(--white); }
.node.end { background: var(--ground); text-align: center; color: var(--slate); font-size: var(--t-sm); font-weight: 600; width: 120px; padding: 8px; }
.node .del { position: absolute; top: 6px; right: 6px; opacity: 0; }
.node:hover .del { opacity: 1; }
.connector { width: 2px; height: 22px; background: var(--border); }
.plus { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--slate); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-lg); line-height: 1; cursor: pointer; }
.plus:hover { border-color: var(--orange); color: var(--orange); }
.branches { display: flex; gap: 32px; align-items: flex-start; position: relative; padding-top: 24px; }
.branches::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 22px; background: var(--border); transform: translateX(-50%); }
.branch-label { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 10px; margin-bottom: 8px; }
.branch-label.yes { background: var(--green-wash); color: var(--green-text); } .branch-label.no { background: var(--red-wash); color: var(--red-text); }
.auto-builder .insp { border-left: 1px solid var(--gainsboro); overflow: auto; padding: 16px; }

/* Builder: palette groups, branch lanes, validation, dry run, categories */
.pal-head { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin: 4px 0 8px; font-weight: 600; }
.pal-group { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--menu-grey); font-weight: 600; margin: 16px 0 8px; }
.pal-group:first-of-type { margin-top: 8px; }
.auto-builder .pal .pal-item.armed { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 3px rgba(255,78,0,.12); }
.auto-builder .pal .pal-item span { text-align: left; }
.plus.armed { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 4px rgba(255,78,0,.15); }
.node.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(217,45,32,.12); }
.node.warned { border-color: var(--amber); }
.node.loopback { width: auto; padding: 8px 12px; font-size: var(--t-sm); color: var(--slate); display: flex; align-items: center; gap: 8px; cursor: default; }
.node.loopback svg { width: 14px; height: 14px; }
.node.end.ghost { opacity: .6; cursor: default; }
.branches { flex-wrap: wrap; row-gap: 16px; }
.branch-label { background: var(--ground); color: var(--slate); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.validation-panel { border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; font-size: var(--t-base); background: var(--amber-wash); border: 1px solid var(--amber-border); }
.validation-panel.error { background: var(--red-wash); border-color: var(--red-border); }
.validation-panel .vrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.validation-panel .vrow svg { width: 16px; height: 16px; flex: 0 0 16px; }
.validation-panel .vrow.error svg { color: var(--red); } .validation-panel .vrow.warn svg { color: var(--amber); }
ol.dryrun { margin: 0; padding-left: 16px; }
ol.dryrun li { padding: 4px 0; font-size: var(--t-md); }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-chips .chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cat-chips .chip .chip-count { font-size: var(--t-xs); color: inherit; opacity: .6; }
.cat-chips .chip.ghost { color: var(--slate); border-style: dashed; }
.cat-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gainsboro); }
.cat-row:last-child { border-bottom: 0; }
.cat-row .input { flex: 1; }
.note.warn { background: var(--amber-wash); border-color: var(--amber-border); }
.note.error { background: var(--red-wash); border-color: var(--red-border); }
@media (max-width: 1200px) { .auto-builder { grid-template-columns: 170px 1fr 300px; } }

/* Charts */
.chart { width: 100%; max-width: 720px; height: auto; display: block; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--slate); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.bar-h { display: grid; grid-template-columns: 140px 1fr 60px; gap: 8px; align-items: center; font-size: var(--t-base); margin: 8px 0; }
.bar-h .bar { height: 10px; background: var(--ground); border-radius: 5px; overflow: hidden; }
.bar-h .bar i { display: block; height: 100%; background: var(--orange); border-radius: 5px; }
.bar-h .bar i.alt { background: var(--dark-slate); }

/* Misc */
.hl-code { background: var(--ink); color: var(--gray-200); padding: 16px 16px; border-radius: 10px; font-family: var(--mono); font-size: var(--t-sm); white-space: pre-wrap; word-break: break-all; position: relative; }
.copy-btn { position: absolute; top: 8px; right: 8px; }
.split { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 16px; align-items: start; }
.split.wide-left { grid-template-columns: minmax(0,1fr) 380px; }
@media (max-width: 1280px) { .split, .split.wide-left { grid-template-columns: 1fr; } }
.dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.provider-badge { display: inline-flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 12px; border-radius: var(--r-pill); background: var(--ground); border: 1px solid var(--gray-200); font-size: var(--t-base); font-weight: 500; color: var(--body); }
.sparkline { width: 100%; height: 48px; display: block; }
.kbd { font-family: var(--mono); font-size: var(--t-xs); background: var(--ground); border: 1px solid var(--gray-200); border-radius: 4px; padding: 1px 8px; color: var(--slate); }
.win { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 6px; }
.ab-variants .card { padding: 16px; }
.filter-bar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.filter-bar .clear-filters[hidden] { display: none; }
.filter-bar .input, .filter-bar select.input, .filter-bar .picker { width: auto; min-width: 150px; max-width: 200px; height: var(--control-h); }
.filter-bar .search-sm { position: relative; }
.filter-bar .search-sm input { padding-left: 32px; width: 300px; max-width: 100%; }
/* Centre the icon instead of pinning it 10px from the top: --control-h is 26px, so an 18px
   icon at a fixed offset hangs 2px below the field. Match the sizing of the global search. */
.filter-bar .search-sm svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--slate); }
.step-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
.two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1280px) { .two { grid-template-columns: 1fr; } }
.badge-ct { position: absolute; background: var(--orange); color: var(--ink); font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: 10px; box-shadow: 0 1px 2px rgba(21,23,24,.25); pointer-events: none; }
.inbox-list .item { padding: 12px 16px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.inbox-list .item:hover, .inbox-list .item.active { background: var(--ground); }
.inbox-list .item .s { font-weight: 600; color: var(--ink); }
.donut-wrap { display: flex; gap: 24px; align-items: center; }
.donut-wrap svg { width: 160px; height: 160px; font-size: var(--t-xs); }
.progress { height: 8px; background: var(--ground); border-radius: 4px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--orange); transition: width var(--fast); }
.mapping-row { display: grid; grid-template-columns: 1fr 24px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }

/* ===================== Phase 2: auth ===================== */
.auth-body { background: var(--ground); }
.app.auth-mode .rail, .app.auth-mode .topbar { display: none; }
.app.auth-mode .view { max-width: none; padding: 0; }
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 48px 16px;
  background: radial-gradient(ellipse 70% 50% at 100% 50%, rgba(255,78,0,.10) 0%, rgba(255,78,0,0) 100%), var(--ground); }
.auth-brand { display: flex; align-items: baseline; gap: 8px; }
.auth-brand .wm { font-weight: 600; font-size: var(--t-3xl); letter-spacing: -.04em; color: var(--orange); }
.auth-brand { align-items: center; gap: 10px; }
.auth-brand .prod { font-weight: 600; font-size: var(--t-xl); letter-spacing: -.02em; color: var(--ink); }
.auth-card { width: 100%; max-width: 440px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--s6); }
.auth-card h1 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: 8px; }
.auth-sub { color: var(--body); font-size: var(--t-lg); margin-bottom: 16px; line-height: 1.5; }
.auth-form .field { margin-bottom: 16px; }
.auth-input, input.auth-input { height: 36px !important; border-radius: 8px !important; padding: 0 12px !important; font-size: var(--t-body); line-height: 140%; }
.auth-input.invalid { border-color: var(--red) !important; }
.auth-input:focus-visible { outline: none; border-color: var(--accent) !important; box-shadow: var(--focus-ring); }
.auth-btn { width: fit-content; height: 32px; font-size: var(--t-body); margin-top: 8px; }
/* At phone width it may stretch, where a short button beside empty space looks stranded. */
@media (max-width: 420px) { .auth-btn { width: 100%; } }
.auth-btn.busy { opacity: .7; pointer-events: none; }
.auth-form { display: flex; flex-direction: column; }
.auth-links { margin-top: 16px; font-size: var(--t-md); color: var(--slate); text-align: center; }
.auth-links a { color: var(--orange-text); }
.auth-foot { font-size: var(--t-sm); color: var(--slate); }
.pw-meter { display: flex; gap: 4px; margin: 8px 0 4px; }
.pw-meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--gainsboro); }
.pw-meter[data-level="weak"] i.on { background: var(--red); } .pw-meter[data-level="ok"] i.on { background: var(--amber); } .pw-meter[data-level="strong"] i.on { background: var(--green); }
.verify-banner { display: flex; align-items: center; gap: 8px; padding: 8px 32px; background: var(--amber-wash); border-bottom: 1px solid var(--amber-border); color: var(--amber-text); font-size: var(--t-base); position: sticky; top: 56px; z-index: 19; }
.verify-banner svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* An inline-block wrapper adds descender space below its child, which made the avatar
   button 34px around a 28px avatar and broke the row. Flex removes the line box. */
.avatar-btn { border: 0; background: transparent; padding: 0; margin-left: 4px; border-radius: 50%; display: inline-flex; }
.avatar-btn .avatar { width: var(--control-h); height: var(--control-h); font-size: var(--t-sm); cursor: pointer; }
.avatar-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.divider { border-top: 1px solid var(--gainsboro); margin: 12px 0; }
.mb8 { margin-bottom: 8px; }

/* ===================== Domains ===================== */
.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--gainsboro); border-radius: 10px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--sel); }
.radio-card.disabled { opacity: .55; cursor: not-allowed; }
.radio-card input { margin-top: 4px; accent-color: var(--ink); }
.wrapcode { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; font-size: var(--t-sm); background: var(--ground); padding: 2px 8px; border-radius: 6px; max-width: 420px; display: inline-block; vertical-align: middle; }
.copy-inline { border: 0; background: transparent; padding: 2px; margin-left: 4px; color: var(--slate); vertical-align: middle; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; }

.copy-inline:hover { color: var(--ink); background: var(--ground); }
.copy-inline svg { width: 14px; height: 14px; }

/* ===================== Integrations ===================== */
/* Equal-height summary cards. Setup and actions live in the Manage modal. */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: stretch; }
.int-card { display: flex; flex-direction: column; gap: 8px; min-height: 168px; }
.int-head { display: flex; align-items: center; gap: 12px; }
.int-head h2 { font-size: var(--t-lg); line-height: 1.3; }
.int-head .pill { flex: 0 0 auto; }
.int-blurb { font-size: var(--t-base); line-height: 1.45; color: var(--slate); margin: -4px 0 0; }
.int-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-base); color: var(--slate); min-height: 20px; }
.int-facts b { color: var(--ink); font-weight: 600; }
.int-err { font-size: var(--t-base); color: var(--red-text); margin: 0; min-height: 20px; }
.int-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-start; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.int-foot .btn { flex: 0 0 auto; }

.int-panel { border-top: 1px solid var(--gainsboro); margin-top: 16px; padding-top: 16px; }
.int-panel h4 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-bottom: 8px; }
.int-panel h4.mt16 { margin-top: 16px; }
.mono-badge { width: 40px; height: 40px; border-radius: 10px; color: #fff; background: var(--midnight) !important; font-weight: 600; font-size: var(--t-base); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; letter-spacing: .02em; }
.avail-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px; border-radius: var(--r-pill); border: 1px solid var(--gainsboro); font-size: var(--t-base); background: var(--white); }
.avail-chip svg { width: 16px; height: 16px; }
.avail-chip.yes { border-color: #ABEFC6; } .avail-chip.yes svg { color: var(--green); }
.avail-chip.no { opacity: .7; } .avail-chip.no svg { color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.progress { height: 8px; background: var(--ground); border-radius: 4px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--orange); transition: width var(--fast); }

/* ===================== AI copilot ===================== */
.ai-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-btn); border: 0; background: var(--ink); color: var(--white); font-weight: 500; font-size: var(--t-btn); box-shadow: var(--shadow); cursor: pointer; transition: background var(--fast); }
.ai-launcher:hover { background: #000; }
.ai-launcher svg { width: 18px; height: 18px; }
/* The launcher floats, so the page keeps a corner clear for it rather than being covered. */
.main > .view { padding-bottom: var(--s8); }
.ai-launcher { gap: var(--s2); padding: 0 var(--s3); }
.ai-launcher.open { display: none; }
body.ai-open .toasts { right: 444px; }
.ai-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--white); border-left: 1px solid var(--gainsboro); box-shadow: var(--shadow-lg); z-index: 95; display: flex; flex-direction: column; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 16px; border-bottom: 1px solid var(--gainsboro); }
.ai-head svg { width: 18px; height: 18px; color: var(--orange); }
.ai-ctx { font-size: var(--t-xs); background: var(--ground); color: var(--slate); padding: 2px 8px; border-radius: var(--r-pill); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-status { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--amber-wash); color: var(--amber-text); font-size: var(--t-base); border-bottom: 1px solid var(--amber-border); }
.ai-status svg { width: 16px; height: 16px; flex: 0 0 16px; }
.ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ai-empty { text-align: center; padding: 32px 8px; color: var(--slate); }
.ai-empty h3 { color: var(--ink); font-size: var(--t-lg); margin: 12px 0 8px; }
.ai-empty p { font-size: var(--t-md); margin-bottom: 16px; }
.ai-orb { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto; background: var(--sel); display: flex; align-items: center; justify-content: center; }
.ai-orb svg { width: 22px; height: 22px; color: var(--orange); }
.ai-suggest { display: flex; flex-direction: column; gap: 8px; }
.ai-suggest button { text-align: left; background: var(--white); border: 1px solid var(--gainsboro); border-radius: 12px; padding: 8px 12px; font-size: var(--t-base); color: var(--body); cursor: pointer; }
.ai-suggest button:hover { border-color: var(--ink); color: var(--ink); }
.ai-msg { display: flex; gap: 8px; align-items: flex-start; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.user .bubble { background: var(--ink); color: var(--white); border-radius: 14px 14px 4px 14px; max-width: 85%; white-space: pre-wrap; }
.ai-msg .bubble { padding: 8px 16px; font-size: var(--t-md); line-height: 1.5; }
.ai-msg.assistant .bubble { background: var(--ground); color: var(--body); border-radius: 4px 14px 14px 14px; }
.ai-msg.assistant .bubble:empty { display: none; }
.ai-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sel); flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.ai-avatar svg { width: 15px; height: 15px; color: var(--orange); }
.md p { margin: 0 0 8px; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 4px 0 8px 16px; } .md li { margin-bottom: 4px; }
.md h3, .md h4 { font-size: var(--t-md); margin: 8px 0 4px; color: var(--ink); }
.md code { font-family: var(--mono); font-size: var(--t-sm); background: var(--white); padding: 1px 4px; border-radius: 4px; border: 1px solid var(--gainsboro); }
.md a { color: var(--orange-text); }
.ai-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ai-tools:empty { display: none; }
.ai-tool { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--slate); background: var(--white); border: 1px solid var(--gainsboro); border-radius: var(--r-pill); padding: 4px 8px 4px 8px; }
.ai-tool svg { width: 12px; height: 12px; color: var(--green); }
.ai-tool .spin { width: 10px; height: 10px; border: 2px solid var(--gainsboro); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--menu-grey); animation: blink 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .2s; } .ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.ai-extras { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ai-extras:empty { display: none; }
.ai-proposal { border: 1px solid var(--gainsboro); border-left: 3px solid var(--green); border-radius: 12px; padding: 12px 16px; background: var(--white); font-size: var(--t-md); }
.ai-proposal.medium { border-left-color: var(--amber); } .ai-proposal.high { border-left-color: var(--red); }
.ai-proposal p { color: var(--body); margin: 8px 0; }
.ai-proposal svg { width: 16px; height: 16px; color: var(--slate); }
.ai-proposal pre { font-family: var(--mono); font-size: var(--t-sm); background: var(--ground); padding: 8px; border-radius: 8px; overflow: auto; max-height: 180px; margin: 8px 0; }
.ai-proposal details summary { cursor: pointer; color: var(--slate); }
.ai-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--gainsboro); }
.ai-input textarea { flex: 1; resize: none; border: 1px solid var(--gainsboro); border-radius: 14px; padding: 8px 16px; font: inherit; font-size: var(--t-md); max-height: 140px; line-height: 1.4; }
.ai-input textarea:focus { outline: none; border-color: var(--ink); }
.ai-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--orange); color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 38px; }
.ai-send svg { width: 18px; height: 18px; }
.ai-send.stop { background: var(--ink); }
.ai-off { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--slate); background: var(--ground); border-radius: 10px; padding: 8px 8px; }
.ai-off svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--menu-grey); }
.ai-off.compact { white-space: nowrap; }
.ai-off a { color: var(--orange-text); }
.ai-assist { margin: 4px 0 12px; }
.ai-btn { border-color: #FAD3C3 !important; color: var(--orange-text) !important; }
.ai-btn svg { color: var(--orange); }
.ai-btn.busy { opacity: .6; }
.ai-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ai-chip { text-align: left; background: var(--white); border: 1px solid var(--gainsboro); border-radius: 10px; padding: 8px 12px; font-size: var(--t-md); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ai-chip small { color: var(--slate); font-size: var(--t-sm); }
.ai-chip:hover { border-color: var(--ink); background: var(--sel); }
.ai-card { border: 1px solid var(--rule); background: var(--ground); border-radius: 12px; padding: 12px 16px; margin-top: 8px; }
.ai-card p { margin: 8px 0 0; }
.ai-suggestion { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--gainsboro); border-radius: 10px; }
.insight { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.insight:last-of-type { border-bottom: 0; }
.ins-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--ground); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; color: var(--slate); }
.ins-ic svg { width: 16px; height: 16px; }
.ins-ic.deliverability { background: var(--red-wash); color: var(--red); } .ins-ic.send_time { background: var(--blue-wash); color: var(--dark-slate); } .ins-ic.subject, .ins-ic.audience { background: var(--sel); color: var(--slate); } .ins-ic.list_health, .ins-ic.warmup { background: #FFFAEB; color: #B54708; } .ins-ic.ab, .ins-ic.automation { background: var(--green-wash); color: var(--green-text); }
@media (max-width: 1024px) { .ai-drawer { width: 100vw; } body.ai-open .toasts { right: 24px; } }
.verify-banner.dev { background: #EEF2F8; border-color: #D6DEEA; color: var(--dark-slate); }

/* Verify gate (unverified account) */
.verify-gate { max-width: 520px; margin: 64px auto; text-align: center; }
.verify-gate h2 { font-size: var(--t-2xl); font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.verify-gate p { color: var(--body); margin: 0 0 16px; }
.verify-gate .gate-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--amber-wash); color: var(--amber-text); display: inline-flex; align-items: center; justify-content: center; }
.verify-gate .gate-icon svg { width: 24px; height: 24px; }

/* Tables inside narrow cards: let long text truncate instead of widening the table */
.grid .card .table-wrap .tbl, .two .card .table-wrap .tbl { table-layout: fixed; width: 100%; }
.grid .card .tbl td, .two .card .tbl td { overflow: hidden; text-overflow: ellipsis; }
.grid .card .tbl th, .two .card .tbl th { overflow: visible; text-overflow: clip; width: max-content; }
.grid .card .tbl th.num, .two .card .tbl th.num { width: 100px; }
.grid .card .tbl td.actions, .two .card .tbl td.actions, .grid .card .tbl th.actions, .two .card .tbl th.actions, .grid .card .tbl td.chk, .two .card .tbl td.chk { overflow: visible; text-overflow: clip; }
.grid .card .tbl th.actions, .two .card .tbl th.actions { width: 112px; }
.grid .card .tbl th.chk, .two .card .tbl th.chk { width: 40px; }
.grid .card .tbl td > :is(span, a, div, code):not(.pill):not(.row):not(.btn):not(.icon-btn):not(.avatar):not(.bar-h):not(.check):not(.switch), .two .card .tbl td > :is(span, a, div, code):not(.pill):not(.row):not(.btn):not(.icon-btn):not(.avatar):not(.bar-h):not(.check):not(.switch) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head .row .input { height: 32px; }
pre, pre.card { font-family: var(--mono); font-size: var(--t-base); line-height: 1.6; }
/* A file input contains a real button rendered by the browser, so it cannot be squeezed into
   the shared --control-h the way a text input can: the button plus its padding overflowed the
   26px box and was clipped through the middle. It gets its own height, set from the button. */
input[type=file].input {
  height: auto;
  min-height: calc(var(--control-h) + 16px);
  padding: 8px;
  line-height: var(--control-h);
  display: flex;
  align-items: center;
}
input[type=file]::file-selector-button { font: inherit; font-size: var(--t-base); font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-btn); padding: 0 12px; height: 26px; margin-right: 8px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--ground); }

.rail-mark { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; }
.auth-mark { width: 34px; height: 34px; border-radius: 8px; vertical-align: -8px; margin-right: 8px; }
.rail.collapsed .rail-mark { margin: 0 auto; }

.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar.xl { width: 72px; height: 72px; flex: 0 0 72px; font-size: var(--t-2xl); border-radius: 16px; overflow: hidden; }
.avatar-picker { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }

/* The tile is a frame around the logo, so the logo needs room inside it. At width:100% the
   artwork ran edge to edge and touched the border, which reads as a cropped image rather than
   a framed one. box-sizing keeps the tile 40px while the padding insets the artwork. */
.int-logo { box-sizing: border-box; width: 40px; height: 40px; flex: 0 0 40px; padding: 8px; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--gainsboro); }
.int-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

.wordmark-img { display: block; height: 18px; width: auto; }
.wm-img { display: inline-block; height: 26px; width: auto; vertical-align: -3px; }

/* ---------- Shared layout primitives ---------- */
.min0 { min-width: 0; }
.stack-form > .field:last-child { margin-bottom: 0; }
/* A label with a control on the right: used for every on/off setting. */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 12px 0; }
/* Status notes: one sentence, optional Details disclosure. */
.note.ok { background: var(--green-wash, #ECFDF3); border-color: #ABEFC6; }
.note.bad { background: var(--red-wash); border-color: var(--red-border); color: var(--red-text); }
.note.ok, .note.bad { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.note.ok > svg, .note.bad > svg, .note .row > svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.note.ok > a, .note.bad > a { margin-left: auto; }
.note-details { width: 100%; margin-top: 8px; }
.note-details summary { cursor: pointer; font-size: var(--t-sm); color: var(--slate); }
.note-details pre { margin: 8px 0 0; padding: 8px 8px; background: rgba(6,25,56,.05); border-radius: 8px; font-size: var(--t-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }
/* Keyboard focus must always be visible, including on inputs. */
.input:focus-visible, .search input:focus-visible, .rte:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.switch:focus-visible, .icon-btn:focus-visible, .btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }

.title-input { font-size: var(--t-xl); font-weight: 600; color: var(--ink); border-color: transparent; padding-left: 8px; height: 44px; flex: 1 1 380px; min-width: 260px; max-width: 560px; }
.title-input:hover { border-color: var(--gainsboro); }

/* Daily sending chart: hover card and the rate small-multiples under it. */
.chart-hoverable { position: relative; }
.sends-chart { width: 100%; height: auto; display: block; }
.sends-chart .hit:hover { fill: rgba(21, 23, 24, .04); }
.chart-tip {
  position: absolute; top: 4px; transform: translateX(-50%);
  min-width: 196px; padding: 12px 16px; z-index: 3; pointer-events: none;
  background: var(--white); border: 1px solid var(--gainsboro); border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: var(--t-base); display: flex; flex-direction: column; gap: 4px;
}
.chart-tip .tip-head { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.chart-tip .num { font-variant-numeric: tabular-nums; }
.gap12 { gap: 12px; }
.trend-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.mini-trend { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-trend .mt-label { font-size: var(--t-sm); color: var(--slate); }
.mini-trend .mt-value { font-size: var(--t-lg); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-trend .sparkline { width: 100%; }

/* ===================== Discipline primitives ===================== */
/* Segmented control: the one way to choose between three or fewer known values. */
.segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-btn); padding: 2px; background: var(--white); gap: 2px; }
.segmented button { border: 0; background: transparent; height: 28px; padding: 0 16px; border-radius: var(--r-btn); font-size: var(--t-md); font-weight: 500; color: var(--slate); white-space: nowrap; transition: background var(--fast), color var(--fast); }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-checked="true"] { background: var(--ink); color: var(--white); }
.segmented.sm button { height: 26px; padding: 0 12px; font-size: var(--t-base); }

/* Toggle row: a boolean setting. Label left, Switch right, rule underneath. */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .tr-text { min-width: 0; }
.toggle-row .tr-label { font-size: var(--t-md); color: var(--ink); }
.toggle-row .tr-hint { font-size: var(--t-sm); color: var(--slate); margin-top: 2px; }

/* Section: a titled group held by a rule rather than a box. */
.section { padding-bottom: var(--s7); margin-bottom: var(--s7); border-bottom: 1px solid var(--rule); }
.section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.section-head .eyebrow { flex: 0 0 auto; }
/* A heavier rule opens a major section. */
.rule-strong { border: 0; border-top: 2px solid var(--rule-strong); margin: var(--s6) 0 var(--s5); }

/* KPI strip: figures sit on the ground, divided by rules, not in five floating boxes. */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media (max-width: 1100px) {
  h1 { font-size: var(--t-2xl); }
  .kpi.hero .value { font-size: var(--t-3xl); }
  .view { padding: var(--s5) var(--s4) var(--s8); }
}

/* A steady-state fact, not an alert. Tint is reserved for something needing action. */
.note.quiet { background: transparent; border: 0; border-left: 2px solid var(--rule); border-radius: 0; padding: 4px 0 4px 12px; color: var(--slate); }
/* Records-passed as a bar, not a fraction in prose. */
.progress.mini { height: 4px; width: 72px; background: var(--gray-200); }
.progress.mini i { background: var(--green); }
.progress.mini.none i { background: var(--red); }
/* Test-send field and its button read as one unit. */
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; height: auto; align-self: stretch; }

/* Prose never runs the full width of a 1400px page. */
.card > p, .section > p, .note, .empty p, .tr-hint, .card-head + p { max-width: 62ch; }

.reference { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.reference > summary { cursor: pointer; font-size: var(--t-base); color: var(--slate); list-style: none; display: inline-flex; align-items: center; gap: var(--s2); }
.reference > summary::-webkit-details-marker { display: none; }
.reference > summary::before { content: "›"; display: inline-block; transition: transform var(--fast); }
.reference[open] > summary::before { transform: rotate(90deg); }
.reference > *:not(summary) { margin-top: var(--s4); }

/* Vendor marks and breakdown bars. */
.vendor-mark { border-radius: 4px; object-fit: contain; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.vendor-mark.glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--menu-grey); }
.vendor-mark.glyph svg { width: 16px; height: 16px; }
.sbar { display: flex; gap: 2px; height: 6px; width: 100%; min-width: 120px; border-radius: 3px; overflow: hidden; background: transparent; }
.sbar .seg { display: block; height: 100%; border-radius: 2px; }
.sbar .seg.new { background: var(--ink); }
.sbar .seg.updated { background: var(--slate); }
.sbar .seg.skipped { background: var(--gray-200); }
.sbar .seg.failed { background: var(--red); }
.sbar .seg.empty { background: var(--gray-200); }
/* A disabled action is inert, not a faded accent. */
.btn.primary:disabled, .btn.dark:disabled { background: var(--gray-200); color: var(--slate); opacity: 1; }
.btn.primary:disabled .arrow, .btn.dark:disabled .arrow { opacity: .4; }
/* Card titles carry their glyph so a section is found without reading it. */
.card-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.card-head h2 > svg, .card-head h2 > .vendor-mark { width: 18px; height: 18px; flex: 0 0 18px; color: var(--menu-grey); }
/* Import sources are equal siblings; nothing stretches to fill space it does not use. */
.imp-grid { align-items: start; }
.imp-card { display: flex; flex-direction: column; }
@media (max-width: 1280px) { .grid.c3.imp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) { .grid.c3.imp-grid { grid-template-columns: 1fr; } }
/* State glyphs take the semantic colour; everything else stays quiet. */
.stat svg { width: 16px; height: 16px; color: var(--menu-grey); }
.stat-done svg { color: var(--green); }
.stat-failed svg { color: var(--red); }
.stat-running svg { color: var(--slate); }
/* A small marker labelling a stacked block aligns to the first line, never to the block's centre. */
.id-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.id-row > :first-child { flex: 0 0 auto; margin-top: 1px; }
.id-row .id-main { min-width: 0; }
.id-row .id-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.id-row .id-title > .strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A qualifier rides beside the fact it qualifies; it never takes a line of its own. */
.qualifier { font-size: var(--t-xs); color: var(--slate); background: var(--sel); border-radius: 4px; padding: 1px 8px; white-space: nowrap; flex: 0 0 auto; }

/* Marketing-scale CTA, used on auth and on a wizard's final send. */
.btn.lg { height: 40px; font-size: var(--t-lg); padding: 0 20px; gap: 8px; }
.btn.lg.primary { padding: 0 6px 0 20px; }
.btn.lg .arrow { width: 26px; height: 26px; flex: 0 0 26px; }
/* Buttons stretch only where full width is the right answer. */
/* .auth-btn was here and forced the sign-in CTA to 376px, which reads as a banner.
   A button is its label plus its padding; only the modal and drawer cases stretch. */
.modal-foot .btn.full, .drawer .btn.full { width: 100%; align-self: stretch; justify-content: center; }
/* Columns of controls keep their buttons at content width. */
.stack, .field, .card > .stack, .int-foot, .step-body { align-items: flex-start; }
.stack > *, .field > * { align-self: stretch; }
/* Controls that must stay at their content width. A segmented control stretched across the
   card reads as a split text field, not a two-way choice. */
.stack > .btn, .field > .btn, .card > .btn,
.stack > .seg-toggle, .field > .seg-toggle, .stack > .seg-op, .field > .seg-op,
.stack > .segmented, .field > .segmented { align-self: flex-start; }
/* Short-value selects do not need the full width of a card. */
select.input.short, .input.short { max-width: 220px; }

/* A ring must contrast with what it rings. */
/* A ring must contrast with what it rings: white on every ink fill. */
.rail a.nav:focus-visible, .card.ink .btn:focus-visible, .ai-launcher:focus-visible, .btn.dark:focus-visible, .bulk-bar .btn:focus-visible,
.chip.active:focus-visible, .chip.on:focus-visible, .pager button.active:focus-visible, .switch.on:focus-visible, .segmented button[aria-checked=true]:focus-visible,
.seg-op button.active:focus-visible, .seg-toggle button.active:focus-visible, .cat-chips .chip.on:focus-visible,
.tabs button.active:focus-visible, .vc-view.on:focus-visible, .pk-opt.on:focus-visible, .btn.primary:focus-visible { outline-color: var(--white); outline-offset: -4px; }
/* Modal padding is the same on all three bands; the header is sized by its title. */
.modal-head { padding: 16px 24px; min-height: 0; }
.modal-body { padding: 24px; }
.modal-foot { padding: 16px 24px; }
/* The destructive action sits last, set apart by a rule rather than by colour at rest. */
.tbl .actions .icon-btn.sep { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--rule); border-radius: 0 6px 6px 0; width: 36px; }

/* ===================== View control ===================== */
.view-control { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-chips .chip svg { width: 13px; height: 13px; }
.menu.menu-panel { padding: 0; width: 260px; min-width: 260px; max-width: 260px; }
/* The popover host clamps and scrolls; the panel must not add a second scroller. */
.vc-panel { display: flex; flex-direction: column; }
.vc-sec { display: flex; align-items: center; padding: var(--s3) var(--s3) var(--s1); }
.vc-sec-split { justify-content: space-between; gap: 8px; }
.vc-sec .eyebrow { font-size: var(--t-xs); letter-spacing: .06em; }
.vc-views { padding: 0 6px 4px; flex: 0 0 auto; }
.vc-view { display: flex; align-items: center; gap: 6px; height: 32px; flex: 0 0 32px; box-sizing: border-box; padding: 0 6px; border-radius: 6px; width: 100%; background: none; border: 0; font: inherit; font-size: var(--t-base); color: var(--ink); text-align: left; cursor: pointer; }
.vc-view:hover { background: var(--sel); }
.vc-view.on { font-weight: 500; }
.vc-view > svg, .vc-view-pick > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--menu-grey); }
.vc-view.on > svg, .vc-view.on .vc-view-pick > svg { color: var(--ink); }
.vc-view-pick { display: flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; color: inherit; padding: 0; cursor: pointer; text-align: left; }
.vc-cols { flex: 0 0 auto; padding: 0 6px 4px; }
.vc-col { display: flex; align-items: center; gap: 8px; height: 32px; flex: 0 0 32px; box-sizing: border-box; padding: 0 8px; border-radius: 6px; cursor: grab; font-size: var(--t-base); }
.vc-col:hover { background: var(--sel); }
.vc-col input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--ink); }
.vc-col.locked { cursor: default; color: var(--slate); }
.vc-col.dragging { opacity: .4; }
.vc-col.over { box-shadow: inset 0 2px 0 var(--ink); }
.vc-grip { color: var(--menu-grey); display: inline-flex; flex: 0 0 12px; opacity: 0; transition: opacity var(--fast); }
.vc-col:hover .vc-grip, .vc-col:focus-within .vc-grip { opacity: 1; }
.vc-grip svg { width: 12px; height: 12px; }
.vc-lock { color: var(--menu-grey); display: inline-flex; }
.vc-lock svg { width: 12px; height: 12px; }
.vc-foot { display: flex; align-items: center; gap: 8px; padding: var(--s3); border-top: 1px solid var(--rule); flex: 0 0 auto; }
.vc-foot .btn:last-child { margin-left: auto; }
.vc-dirty { font-size: var(--t-xs); color: var(--slate); }
/* Compact density: a tighter row for people who want more of them. */
.table-wrap.compact .tbl td { height: 40px; padding: 0 12px; }
.table-wrap.compact .tbl th { padding: 8px 12px; }
.view-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.view-slot { display: inline-flex; }
/* A secondary link inside a card reads quietly. */
.quiet-link { color: var(--slate); font-size: var(--t-base); display: inline-flex; align-items: center; gap: 4px; }
.quiet-link:hover { color: var(--ink); text-decoration: none; }
.quiet-link svg { width: 14px; height: 14px; }
/* Select-all-matching: the escalation line sits above the actions. */
.bulk-escalate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--gray-200); font-size: var(--t-base); }
.bulk-escalate .btn.ghost { color: var(--white); text-decoration: underline; }
.bulk-note { display: inline-flex; align-items: center; gap: 6px; color: var(--menu-grey); }
.bulk-note svg { width: 14px; height: 14px; }

/* ---------- Picker: the app's own combobox, replacing every native select ---------- */
.picker { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  height: var(--control-h); padding: 0 8px 0 10px; min-width: 140px; max-width: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: var(--t-base); color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color var(--fast); }
.picker:hover { border-color: var(--rule-strong); }
.picker:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.picker[disabled] { background: var(--smoke); color: var(--slate); cursor: not-allowed; }
.picker > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--menu-grey); }
.pk-label { flex: 1 1 auto; min-width: 0; }
.pk-panel { display: flex; flex-direction: column; max-height: 320px; width: 100%; }
.pk-search-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); }
.pk-search-row > svg { width: 14px; height: 14px; color: var(--menu-grey); flex: 0 0 14px; }
.pk-search-row .input { height: 26px; border: 0; padding: 0; background: none; font-size: var(--t-base); }
.pk-search-row .input:focus, .pk-search-row .input:focus-visible { box-shadow: none; border: 0; }
.pk-list { overflow: auto; padding: 4px 6px; }
.pk-opt { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px;
  border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--t-base); color: var(--ink);
  text-align: left; cursor: pointer; }
.pk-opt:hover { background: var(--sel); }
.pk-opt.on { font-weight: 500; }
.pk-opt > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--menu-grey); }
.pk-opt .sw { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.pk-opt.pk-create { color: var(--ink); font-weight: 500; }
.pk-none { padding: 10px; font-size: var(--t-sm); color: var(--slate); }

/* A focus state never changes an element's box: colour and inset ring only. */
select.input:focus, select.input:focus-visible { outline: none; border-width: 1px; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Sibling cards in a grid share one vertical rhythm. */
.card-head { min-height: 28px; }
.card-head h2 { display: flex; align-items: center; gap: var(--s2); line-height: 28px; }
.card-head h2 > svg, .card-head h2 > .vendor-mark { width: 20px; height: 20px; flex: 0 0 20px; align-self: center; }
.grid > .card { align-content: start; }
.pk-group { padding: 8px 8px 4px; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--menu-grey); font-weight: 600; }

/* A control inside a form column sizes to its column, never to a minimum of its own. */
.field .picker, .form-row .picker, .field .input, .field .taginput { min-width: 0; width: 100%; }
.field .picker { max-width: 100%; }
.form-row > .field, .form-row .field { min-width: 0; }
.insp .field .row > .input, .insp .field .row > input[type=color] { height: 28px; font-size: var(--t-hint); border-radius: 6px; }
/* Hints wrap inside the readable measure. */
.hint { max-width: 65ch; }

/* The one answer the reader came for, stated plainly. */
.headline { padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.headline-line { font-size: var(--t-metric); font-weight: 400; color: var(--body); letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.headline-line b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.headline-sub { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); font-size: var(--t-hint); color: var(--muted); }
.legend.legend-col { flex-direction: column; gap: var(--s2); }
.donut-wrap > svg { flex: 0 0 auto; }
/* A disclosure holds the answers nobody asked for on arrival. */
.reference.disclose > summary { font-size: var(--t-body); font-weight: 500; }
.reference.disclose > .section { margin-top: var(--s6); }

/* The object tabs: one shell, five objects, the same three questions. */
.obj-tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s6); }
.obj-tab { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3);
  color: var(--muted); font-size: var(--t-body); font-weight: 500; text-decoration: none; position: relative; }
.obj-tab:hover { color: var(--ink); text-decoration: none; }
.obj-tab.active { color: var(--ink); }
.obj-tab.active::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 2px; background: var(--ink); }
.obj-tab .count { font-size: var(--t-eyebrow); font-family: var(--mono); background: var(--ground); color: var(--muted); padding: 0 var(--s2); line-height: 18px; border-radius: 10px; }

/* Analyze: a rate, the count it came from, and the change against a named baseline. */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s6) var(--s5); }
.figure-label { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.figure-value { font-size: var(--t-metric); font-weight: 600; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--s2); line-height: 1.15; }
.figure-count { font-size: var(--t-hint); color: var(--muted); margin-top: var(--s1); }
.figure-chg { margin-top: var(--s2); }
.chg { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-hint); font-family: var(--mono); }
.chg i { font-style: normal; font-size: var(--t-eyebrow); line-height: 1; transform: scale(.8); }
.chg-good { color: var(--good); } .chg-bad { color: var(--bad); }
.chg-flat, .chg-new { color: var(--muted); }
.chip.static { cursor: default; }
.chip.static > svg { width: 13px; height: 13px; }
/* Two measures of one scale, one grouped chart. */
.gbars { display: flex; gap: var(--s6); align-items: flex-end; max-width: 680px; }
.gbar { flex: 1 1 0; min-width: 0; }
.gbar-cols { display: flex; gap: var(--s2); align-items: flex-end; height: 120px; }
.gbar-cols i { flex: 0 1 40px; max-width: 40px; border-radius: 2px 2px 0 0; min-height: 2px; }
.gbar-cols .g1 { background: var(--ink); } .gbar-cols .g2 { background: var(--faint); }
.gbar-label { font-size: var(--t-cell); color: var(--ink); margin-top: var(--s2); }
.gbar-nums { font-size: var(--t-hint); font-family: var(--mono); }

/* Health: the score is the largest thing on the page. */
.score-block { padding-bottom: var(--s5); border-bottom: 1px solid var(--hairline); }
.score { font-size: var(--t-metric); font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.score-of { font-size: var(--t-section); color: var(--faint); font-weight: 500; margin-left: var(--s1); }
.score-word { font-size: var(--t-section); font-weight: 600; color: var(--ink); margin-top: var(--s1); }
.score-window { font-size: var(--t-hint); margin-top: var(--s2); }
.score-thin { font-size: var(--t-body); color: var(--body); margin: 0; max-width: 65ch; }
.metric-rows { display: flex; flex-direction: column; }
.metric-row-plain { grid-template-columns: 1fr auto !important; }
.metric-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--s4); align-items: center; height: 40px; border-bottom: 1px solid var(--hairline); font-size: var(--t-cell); }
.metric-row:last-child { border-bottom: 0; }
.metric-name { color: var(--ink); }
.metric-val { color: var(--ink); font-weight: 500; }
.metric-bench { font-size: var(--t-hint); }
/* Only the cell that failed carries colour. */
.tbl td.cell-amber { box-shadow: inset 0 0 0 1px var(--warn); }
.tbl td.cell-red { box-shadow: inset 0 0 0 1px var(--bad); }
/* The grip is a real control: it takes focus and reorders by keyboard. */
.vc-grip { border: 0; background: none; padding: 0; cursor: grab; }
.vc-grip:focus-visible { opacity: 1; outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: 3px; }

/* Why this branch: the summary first, the conditions behind a disclosure. */
.why-branch { margin-top: var(--s2); }
.why-branch > summary { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-hint); color: var(--muted); cursor: pointer; list-style: none; }
.why-branch > summary::-webkit-details-marker { display: none; }
.why-branch > summary:hover { color: var(--ink); }
.why-branch > summary > svg { width: 13px; height: 13px; }
.why-summary { font-size: var(--t-hint); color: var(--body); margin: var(--s2) 0 0; max-width: 65ch; }
.why-group { margin-top: var(--s2); }
.why-row { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-hint); padding: var(--s1) 0; }
.why-row > svg { width: 13px; height: 13px; flex: 0 0 13px; }
.why-row.ok > svg { color: var(--good); }
.why-row.no > svg { color: var(--faint); }

/* The audience gap, named. Never a bare recipient count. */
.aud-block { padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.aud-headline { font-size: var(--t-section); color: var(--body); margin: 0 0 var(--s1); }
.aud-headline b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.aud-reasons { margin-top: var(--s2); }
.aud-reason { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-hint); padding: var(--s1) 0; border-bottom: 1px solid var(--hairline); }
.aud-reason:last-child { border-bottom: 0; }
/* The live message size, visible before the check runs. */
.size-badge { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-hint); font-family: var(--mono); color: var(--muted); }
.size-badge.warn { color: var(--warn); }
.size-badge.bad { color: var(--bad); }

/* Row actions: labelled, revealed on hover, the destructive one inside the menu. */
.tbl td.actions { text-align: right; white-space: nowrap; }
.row-act { display: inline-flex; align-items: center; vertical-align: middle; gap: var(--s1); height: 26px; padding: 0 var(--s2);
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted);
  font: inherit; font-size: var(--t-label); font-weight: 500; opacity: .55; transition: opacity var(--fast), color var(--fast); }
.row-act > svg { width: 14px; height: 14px; }
.tbl tr:hover .row-act, .row-act:focus-visible { opacity: 1; }
.row-act:hover { color: var(--ink); background: var(--sel); border-color: var(--hairline); }
.row-act-more { margin-left: var(--s1); }

/* Table(): inline cell editing, row expand, per-page choice, column header menu.
   All four are opt-in per column/table option — a caller that never passes them sees no
   change at all. */

/* Inline cell editing. The static value stays in the DOM (only hidden) so it keeps sizing the
   column; the edit control is absolutely positioned over that same box, so entering or leaving
   edit mode can never change the cell's size. Border stays 1px throughout; only its colour and
   an inset shadow announce focus, per §5. */
.tbl td.editable-cell { position: relative; cursor: pointer; }
.tbl td.editable-cell.editing { cursor: default; }
.cell-edit-input, .cell-edit-picker.picker { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; }
.cell-edit-input { border: 1px solid transparent; background: var(--white); font: inherit; color: inherit; padding: 0 var(--s4); margin: 0; border-radius: 0; }
.cell-edit-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.cell-edit-picker.picker { min-width: 0; border-radius: 0; border-color: transparent; padding: 0 var(--s4); }
.cell-edit-picker.picker:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Row expand: a narrow leading chevron column, and the panel row it opens beneath the row. */
.tbl th.chevron-col, .tbl td.chevron-col { width: 44px; padding: 0 var(--s2); }
.tbl tbody tr.tbl-expand-row td { padding: var(--s4); background: var(--ground); white-space: normal; height: auto; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.tbl tbody tr.tbl-expand-row:hover td { background: var(--ground); }

/* Column header menu and add-column: a kebab and a trailing + button, both reusing .icon-btn. */
.tbl th.has-menu { position: relative; padding-right: 40px; }
.th-menu-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.tbl th.add-col { width: 1%; text-align: center; }

/* Per-page choice, beside the pager. */
.tbl-foot-right { display: flex; align-items: center; gap: var(--s4); }

/* §10: search, one Filter button, then a chip per filter actually applied. */
.filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 4px; margin-left: 2px; border-radius: 8px; background: var(--ink); color: var(--white);
  font-size: var(--t-eyebrow); font-family: var(--mono); line-height: 16px; }
.applied-filters { gap: var(--s2); }
.applied-chip { display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s1) 0 var(--s3);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--white);
  font-size: var(--t-cell); color: var(--ink); max-width: 240px; }
.applied-chip .af-k { color: var(--muted); }
.applied-chip button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: none; color: var(--faint); flex: 0 0 20px; }
.applied-chip button:hover { color: var(--ink); background: var(--sel); }
.applied-chip button svg { width: 12px; height: 12px; }
.flt-panel { width: 260px; padding: var(--s3); }
.flt-panel .field { margin-bottom: var(--s4); }
.flt-panel .field:last-of-type { margin-bottom: 0; }
.flt-foot { display: flex; justify-content: flex-end; padding-top: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--hairline); }

/* ---- View tabs -------------------------------------------------------------
   Views as tabs across the top of a list, each carrying its own count so the
   size of a view is visible before opening it. The active tab is ink, never
   accent: it reports position, it is not an action. */
.view-tabs { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.vt-tab { display: inline-flex; align-items: center; gap: var(--s2); height: var(--control-h); padding: 0 var(--s3); border-radius: 8px; color: var(--muted); cursor: pointer; border: 1px solid transparent; background: transparent; }
.vt-tab svg { width: 16px; height: 16px; flex: 0 0 16px; }
.vt-tab:hover { background: var(--sel); color: var(--ink); }
.vt-tab.active { color: var(--ink); background: var(--sel); border-color: var(--hairline); font-weight: 500; }
.vt-name { max-width: 160px; }
.vt-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; border: 0; background: transparent; color: var(--faint); opacity: .55; padding: 0; }
.vt-close svg { width: 12px; height: 12px; }
.vt-tab:hover .vt-close, .vt-close:focus-visible { opacity: 1; }
.vt-close:hover { background: var(--ground); color: var(--bad); }

/* ---- View settings panel --------------------------------------------------- */
.vc-row { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s3); }
.vc-row .input { flex: 1 1 auto; min-width: 0; }
/* Three ghost actions plus the hint and Save no longer fit one 260px row. */
.vc-foot { flex-wrap: wrap; row-gap: var(--s2); }
.menu.menu-panel:has(.vc-panel-wide) { width: 300px; min-width: 300px; max-width: 300px; }

/* ---- List action bar -------------------------------------------------------
   The true total stays put instead of scrolling away with the table, and Export
   stops being buried in a bulk menu. Height matches the view's existing 64px
   bottom padding, so the bar never covers the last row. */
.list-bar { position: fixed; left: var(--rail-w); right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 0 var(--s6); background: var(--white); border-top: 1px solid var(--hairline); z-index: 15; }
.lb-total-wrap { display: flex; align-items: center; }
.lb-actions { display: flex; align-items: center; gap: var(--s3); }
.icon-btn.spinning svg { animation: lb-spin .6s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-btn.spinning svg { animation: none; } }
/* The bar is 64px and the view's bottom padding is also 64px, so the last row ended
   flush against it. Only screens that actually carry a bar get the extra clearance;
   padding every screen for a bar most of them do not have is dead space. */
.main > .view:has(.list-bar) { padding-bottom: 96px; }
/* The launcher floats bottom-right, which is exactly where the list bar's actions sit.
   It is appended to body, not inside .app, so the lift has to be scoped from body. */
body:has(.list-bar) .ai-launcher { bottom: 88px; }

/* ---- Command palette --------------------------------------------------------
   Scope chips, a keyboard cursor, and a footer stating the keyboard contract, so
   the shortcuts are learnable rather than folklore. */
.sr-scopes { display: flex; gap: var(--s1); flex-wrap: wrap; padding: 0 0 var(--s2); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s2); }
.search-results .item.active { background: var(--sel); }
.sr-foot { display: flex; gap: var(--s4); align-items: center; padding: var(--s2) var(--s2) 0; margin-top: var(--s2); border-top: 1px solid var(--hairline); color: var(--faint); font-size: var(--t-hint); }
.sr-foot kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 4px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--white); color: var(--muted); font: 500 11px/1 var(--font-mono, ui-monospace, monospace); }

/* ---- Rail collapse ----------------------------------------------------------
   The rail already collapses below 1100px. This is the same look on demand at any
   width, so someone working in a wide table can reclaim the space deliberately.
   The rules mirror the media query above rather than inventing a second look. */
body.rail-collapsed { --rail-w: 64px; }
body.rail-collapsed .rail-logo .wordmark,
body.rail-collapsed .rail-logo .wordmark-img,
body.rail-collapsed .rail-logo .product,
body.rail-collapsed .rail a.nav span,
body.rail-collapsed .rail-section { display: none; }
body.rail-collapsed .rail-logo { justify-content: center; padding: 24px 0 16px; }
body.rail-collapsed .rail a.nav { justify-content: center; padding: 8px; }
body.rail-collapsed .rail a.nav.sub { padding-left: 8px; }
.rail-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 auto var(--s3); border: 0; border-radius: 8px; background: transparent; color: var(--menu-grey); cursor: pointer; }
.rail-toggle:hover { background: rgba(255,255,255,.08); color: var(--white); }
.rail-toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
body.rail-collapsed .rail-toggle svg { transform: scaleX(-1); }

/* ---- Why this branch --------------------------------------------------------
   The tree shows every condition; the marker says which one actually settled it,
   so the reader is not left comparing ten rows to find the one that mattered. */
.why-row.decided { background: var(--sel); border-radius: 6px; padding: 2px 8px; margin: 0 -8px; }
.why-row.decided .eyebrow { color: var(--ink); }
.why-value { color: var(--body); }

/* Three horizons in a row. Three numbers side by side answer "is this getting worse"
   faster than any chart, which is why they are numbers and not a sparkline. */
.metric { font-size: var(--t-metric); font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.row.gap32 { gap: var(--s6); }
/* Answers "how do I get an account" without pretending a signup flow exists. */
.auth-note { margin-top: 12px; font-size: var(--t-hint); color: var(--faint); }

/* ---- Composer attachments ---------------------------------------------------
   Staged files are shown as chips above the input, so nothing is ever attached
   invisibly and each one can be removed before it is sent. */
.ai-input-wrap { display: flex; flex-direction: column; }
.ai-attachments { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s3) 0; }
.ai-chip { display: inline-flex; align-items: center; gap: var(--s1); max-width: 200px; height: 24px; padding: 0 var(--s2); border-radius: 6px; background: var(--sel); color: var(--body); font-size: var(--t-hint); }
.ai-chip svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--faint); }
.ai-chip button { border: 0; background: transparent; padding: 0; display: inline-flex; color: var(--faint); cursor: pointer; }
.ai-chip button:hover { color: var(--bad); }
.ai-attach { border: 0; background: transparent; padding: 0; width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--faint); cursor: pointer; }
.ai-attach:hover { background: var(--sel); color: var(--ink); }
.ai-attach svg { width: 16px; height: 16px; }
/* The wordmark and the collapse control share the top row. */
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-right: var(--s3); }
.rail-top .rail-logo { flex: 1 1 auto; min-width: 0; }
.rail-top .rail-toggle { margin: 0; flex: 0 0 26px; }
/* Collapsed, the wordmark is gone but the toggle must not be: hiding it is how someone
   gets stuck in a collapsed rail with no way back. It stacks under the mark instead. */
body.rail-collapsed .rail-top { flex-direction: column; align-items: center; gap: var(--s2); padding-right: 0; }
body.rail-collapsed .rail-top .rail-logo { flex: 0 0 auto; }

/* Pending-action count on the AI drawer header. Sits on the icon so it reads as a state of
   that button, not as another control. */
.ai-drawer .icon-btn { position: relative; }
.ai-pending-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--accent); color: #fff;
  font: 700 9px/14px Inter, system-ui, sans-serif; text-align: center;
}


/* DNS records: one block each, not table rows. The value is the reason -- a DKIM public key is
   ~400 unbroken characters, which no fixed set of columns can hold without either collapsing
   the column (wrapping one character per line) or forcing the table wider than its dialog. */
.dnsrecs { display: flex; flex-direction: column; gap: var(--s3); }
.dnsrec { border: 1px solid var(--hairline); border-radius: 10px; padding: var(--s3); background: var(--white); }
.dnsrec-head { display: flex; align-items: center; gap: var(--s2); }
.dnsrec-host { font-size: var(--t-sm); background: var(--ground); padding: 2px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.dnsrec-value {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-top: var(--s2); padding: var(--s2); border-radius: 8px; background: var(--ground);
}
.dnsrec-value code {
  flex: 1 1 auto; min-width: 0;          /* min-width:0 lets a flex child actually wrap */
  font-size: var(--t-sm); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.dnsrec-value .copy-inline { flex: 0 0 auto; }
.dnsrec-why { margin-top: var(--s2); }

/* Campaign review is two columns of very different length: the checks run to ~2,000px while
   the preview is a few hundred. In normal flow the preview scrolls out of view immediately and
   leaves the right half of the screen empty for the rest of the page. Sticking it keeps the
   email beside the checks that are talking about it. */
.review-two { align-items: start; }
.review-preview {
  position: sticky; top: var(--s4);
  max-height: calc(100vh - var(--s4) * 2);
  display: flex; flex-direction: column;
}
.review-preview > .card { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.review-preview > .card > *:not(.card-head) { min-height: 0; overflow: auto; }
@media (max-width: 1100px) {
  /* Stacked to one column, sticky would pin the preview over the content it sits above. */
  .review-preview { position: static; }
}