/* Marketing Engine panel — the Smoak Host "boardroom" skin, verbatim (same
   tokens/classes so the two panels are visual siblings). Light canvas with
   dark-mode toggle; navy chrome identical in both modes. */

/* ================= 1. Tokens ================= */
:root {
  color-scheme: light;
  --radius: 8px; --radius-sm: 4.8px; --radius-md: 6.4px; --radius-xl: 11.2px; --radius-2xl: 14.4px;

  --background: #f3f6fc;
  --foreground: #0c1a2e;
  --card: #ffffff;
  --card-foreground: #0c1a2e;
  --primary: #2f6ab0;
  --primary-foreground: #ffffff;
  --secondary: #e9f0fa;
  --secondary-foreground: #24405f;
  --muted: #e9f0fa;
  --muted-foreground: #5b6f8c;
  --accent: #eaf2fb;
  --accent-foreground: #215489;
  --border: #d7e0ee;
  --input: #d7e0ee;
  --ring: #2f6ab0;
  --destructive: #b42318;

  --sidebar: #0d1f39;
  --sidebar-border: #274a7d;
  --nav-2: #15305a;
  --nav-line: #274a7d;
  --nav-text: #c4d3e8;
  --nav-dim: #8ba0c0;
  --nav-bright: #9cc2ef;
  --accent-bright: #8fbdea;

  --status-idle: #a8aeb2;
  --status-queued: #f59e0b;
  --status-running: #2563eb;
  --status-review: #7c3aed;
  --status-done: #22c55e;
  --status-blocked: #dc2626;

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dark {
  color-scheme: dark;
  --background: #0a1526;
  --foreground: #e6edf7;
  --card: #10233f;
  --card-foreground: #e6edf7;
  --primary: #9cc2ef;
  --primary-foreground: #0c1a2e;
  --secondary: #15305a;
  --secondary-foreground: #e6edf7;
  --muted: #14294a;
  --muted-foreground: #8ba0c0;
  --accent: #15305a;
  --accent-foreground: #c4d3e8;
  --border: rgba(143, 189, 234, 0.16);
  --input: rgba(143, 189, 234, 0.22);
  --ring: #5e93cd;
}

/* ================= 2. Base ================= */
* { box-sizing: border-box; }
/* The hidden attribute must always win. Without this, any class that sets
   display (every .btn) silently overrides [hidden] and "hidden" buttons
   render anyway — which is exactly how a Remove button appeared next to
   "Nothing selected". */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  background: var(--background); color: var(--foreground);
  -webkit-font-antialiasing: antialiased; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 640; letter-spacing: -0.02em; text-wrap: balance; }
code { font-family: var(--font-mono); font-size: 12.5px; background: var(--muted); padding: 2px 7px; border-radius: var(--radius-sm); }
.muted { color: var(--muted-foreground); }
.small { font-size: 12px; }

/* ================= 3. Shell ================= */
.hq { display: flex; flex-direction: column; height: 100vh; }

/* --- topbar (52px navy) --- */
.hq-topbar {
  height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 14px;
  background: var(--sidebar); border-bottom: 1px solid var(--nav-line);
  padding: 0 16px; color: var(--nav-text);
}
.hq-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.hq-brand-tile {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  background: linear-gradient(140deg, #2f6ab0, #215489);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px; font-family: var(--font-sans);
}
.hq-wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -0.01em; }
.hq-wordmark b { color: var(--accent-bright); font-weight: 800; }
.hq-env {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--nav-2); border: 1px solid var(--nav-line); border-radius: var(--radius-md);
  padding: 4px 10px; font-size: 12px; color: var(--nav-dim); white-space: nowrap;
}
.hq-env .dot { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,.18); }
.hq-env b { color: var(--nav-bright); font-weight: 600; }
.hq-search {
  flex: 1; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--nav-line); background: var(--nav-2);
  color: var(--nav-dim); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
}
.hq-search .kbd {
  margin-left: auto; font-size: 11px; border: 1px solid var(--nav-line);
  border-radius: 4px; padding: 1px 5px; color: var(--nav-dim);
}
.hq-search:hover { color: var(--nav-text); }
.hq-iconbtn {
  width: 34px; height: 34px; border-radius: 7px; border: 0; background: transparent;
  color: var(--nav-dim); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .13s, color .13s; flex: 0 0 34px;
}
.hq-iconbtn:hover { background: var(--nav-2); color: #fff; }
.hq-iconbtn svg { width: 17px; height: 17px; }
.hq-user { display: flex; align-items: center; gap: 9px; margin-left: 2px; }
.hq-ava {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary, #2f6ab0);
  background: #2f6ab0; color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.hq-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.hq-user-meta strong { font-size: 13px; color: #fff; font-weight: 600; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-user-meta span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-dim); }

/* --- body row: rail + sidebar + main --- */
.hq-body { flex: 1; display: flex; min-height: 0; }

.hq-rail {
  width: 60px; flex: 0 0 60px; background: var(--sidebar); border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 14px;
}
.hq-rail .spacer { flex: 1; }
.hq-rail-item {
  width: 40px; height: 40px; border-radius: var(--radius-xl); position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--nav-dim); transition: background .13s, color .13s; text-decoration: none !important;
}
.hq-rail-item svg { width: 21px; height: 21px; }
.hq-rail-item:hover { background: var(--nav-2); color: #fff; }
.hq-rail-item.active { background: var(--nav-2); color: #fff; }
.hq-rail-item.active::before {
  content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px;
  background: #2f6ab0; border-radius: 0 3px 3px 0;
}

.hq-side {
  width: 244px; flex: 0 0 244px; background: var(--sidebar); border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column; padding: 12px 10px 14px; gap: 4px;
}
/* The sidebar's first slot: the active section's name, big enough to read
   before the menu does. It replaced a second copy of the brand tile — the
   topbar already says whose panel this is. */
.hq-side-title {
  font-family: var(--font-heading); font-weight: 640; font-size: 24px; letter-spacing: -0.02em;
  color: #fff; padding: 8px 12px 12px; line-height: 1.15;
}
.hq-ws { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.hq-ws-tile {
  width: 40px; height: 40px; border-radius: var(--radius-xl); flex: 0 0 40px;
  background: linear-gradient(140deg, #2f6ab0, #15305a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.hq-ws-meta { line-height: 1.3; min-width: 0; }
.hq-ws-meta strong { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.hq-ws-meta span { font-size: 11px; color: var(--nav-dim); }
.hq-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--nav-dim); padding: 8px 12px 6px;
}
.hq-nav-item {
  height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border-radius: 10px; color: var(--nav-text); font-size: 14.5px; font-weight: 500;
  text-decoration: none !important; transition: background .13s, color .13s;
}
.hq-nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; }
.hq-nav-item:hover { background: var(--nav-2); color: #fff; }
.hq-nav-item.active { background: var(--nav-2); color: #fff; }
.hq-nav-item .count { margin-left: auto; font-size: 11px; color: var(--nav-dim); }
.hq-side .spacer { flex: 1; }
.hq-side-widget {
  background: rgba(0,0,0,.22); border: 1px solid var(--nav-line); border-radius: 10px;
  padding: 10px 12px; margin: 0 2px;
}
.hq-side-widget .wl { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-dim); display: flex; justify-content: space-between; }
.hq-side-widget .wl b { color: var(--nav-bright); letter-spacing: 0; }
.hq-side-widget .bar { height: 3px; background: var(--nav-line); border-radius: 2px; margin: 8px 0 6px; overflow: hidden; }
.hq-side-widget .bar i { display: block; height: 100%; background: var(--accent-bright); border-radius: 2px; }
.hq-side-widget .wm { font-size: 11px; color: var(--nav-dim); }
.hq-side-widget a { color: var(--nav-bright); font-size: 11px; }

/* --- breadcrumb + main --- */
.hq-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hq-crumbs {
  padding: 10px 24px; border-bottom: 1px solid var(--border); font-size: 13px;
  color: var(--muted-foreground); display: flex; align-items: center; gap: 8px;
  background: var(--background); flex: 0 0 auto;
}
.hq-crumbs b { color: var(--foreground); font-weight: 600; }
.hq-crumbs .sep { color: var(--border); }
.hq-main { flex: 1; overflow-y: auto; padding: 24px; }
.hq-main-inner { max-width: 1080px; }
/* Pages whose content IS a workspace (the sequence funnel) escape the
   reading-width cap that suits every text page. Lives beside the rule it
   overrides — a previous copy sat at the end of the file and was lost in a
   block replacement, which is how the funnel quietly shrank to 1080px. */
.hq-main-inner.hq-wide { max-width: none; }

/* ================= 4. Content components ================= */
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.app-head h1 { margin: 0; font-size: 29px; }
.app-head .btn { margin-top: 4px; }

.section-title {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-foreground); margin: 30px 0 10px; text-wrap: initial;
}
.section-title:first-of-type { margin-top: 6px; }

.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin: 0 0 16px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card p { line-height: 1.55; }
.card .muted.small { margin-top: 12px; }
.card.empty { text-align: center; color: var(--muted-foreground); padding: 40px 22px; }

/* alerts / notices */
.alert { border: 1px solid var(--border); background: var(--accent); color: var(--accent-foreground); padding: 11px 14px; border-radius: var(--radius); margin: 0 0 14px; font-size: 13px; }
.alert-ok { border-color: color-mix(in srgb, var(--status-done) 40%, transparent); background: color-mix(in srgb, var(--status-done) 12%, var(--card)); color: color-mix(in srgb, var(--status-done) 70%, var(--foreground)); }
.alert-error { border-color: color-mix(in srgb, var(--status-blocked) 40%, transparent); background: color-mix(in srgb, var(--status-blocked) 10%, var(--card)); color: color-mix(in srgb, var(--status-blocked) 72%, var(--foreground)); }
.alert ul { margin: 8px 0 0 18px; padding: 0; }

/* KPI stats */
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 22px 14px; min-width: 128px; }
.stat-num { display: block; font-family: var(--font-heading); font-weight: 640; font-size: 26px; letter-spacing: -0.02em; color: var(--foreground); line-height: 1.15; }
.stat .muted { font-size: 12px; }

/* health strip */
.host-health { display: flex; gap: 34px; row-gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.host-health .hh { display: flex; flex-direction: column; gap: 4px; min-width: 96px; }
.host-health .hh .muted.small, .host-health .hh span.muted { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin: 0; }
.host-health .hh strong { font-size: 14.5px; font-weight: 600; }
.hh-ok { color: var(--status-done); }
.hh-bad { color: var(--status-blocked); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-md);
  font: 500 14px var(--font-sans); cursor: pointer; text-decoration: none !important;
  border: 1px solid transparent; transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, black); }
.dark .btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, white); }
.btn-ghost { background: var(--card); color: var(--foreground); border-color: var(--input); box-shadow: 0 1px 2px rgba(12,26,46,.04); }
.btn-ghost:hover { background: var(--accent); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-link { background: none; border: 0; padding: 0 4px; height: auto; color: var(--primary); font: 500 13px var(--font-sans); cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

/* forms */
.field-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.field-row label {
  display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 220px;
  font-size: 12px; font-weight: 600; color: var(--muted-foreground); letter-spacing: .01em;
}
.field-row input[type=text], .field-row input[type=url], .field-row input[type=email],
.field-row input[type=password], .field-row select, .stack-form input {
  height: 38px; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius-md);
  font: 400 14px var(--font-sans); color: var(--foreground); background: var(--card); width: 100%;
  transition: border-color .13s, box-shadow .13s;
}
.field-row input:focus, .field-row select:focus, .stack-form input:focus {
  border-color: var(--ring); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent);
}
.field-row ::placeholder, .stack-form ::placeholder { color: var(--muted-foreground); font-weight: 400; }
.field-row select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6f8c' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.field-row input[type=file] {
  padding: 7px 10px; border: 1px dashed var(--input); border-radius: var(--radius-md);
  font-size: 13px; color: var(--muted-foreground); background: var(--muted); width: 100%; cursor: pointer;
}
.field-row input[type=file]:hover { border-color: var(--ring); }
.field-row input[type=file]::file-selector-button {
  height: 26px; padding: 0 11px; margin-right: 10px; border: 1px solid var(--input);
  border-radius: var(--radius-sm); background: var(--card); font: 600 12px var(--font-sans);
  color: var(--foreground); cursor: pointer;
}
.field-row .btn { flex: 0 0 auto; }
.field-row + .muted.small { margin-top: 12px; }

/* tables */
.vis-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vis-table th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-foreground); padding: 12px 12px 9px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.vis-table td { padding: 14px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); vertical-align: middle; }
.vis-table tr:last-child td { border-bottom: 0; }
.vis-table tbody tr { transition: background .12s; }
.vis-table tbody tr:hover { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.table-card { padding: 2px 18px 6px; }
td.small, .admin-table td.muted { white-space: nowrap; font-size: 12px; color: var(--muted-foreground); }
.th-right { text-align: right !important; }

.td-biz strong { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.td-biz strong a { color: var(--foreground); }
.td-biz strong a:hover { color: var(--primary); text-decoration: none; }
.td-biz strong .ext { font-size: 12px; color: var(--muted-foreground); }
.td-biz .host { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 12px; }

/* status chips */
.st {
  --sc: var(--status-idle);
  display: inline-flex; align-items: center; gap: 6px; padding: 2.5px 8px;
  border: 1px solid var(--sc); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sc) 15%, var(--card));
  color: color-mix(in srgb, var(--sc) 82%, black);
  font: 600 10.5px var(--font-sans); white-space: nowrap; text-transform: none;
}
.dark .st {
  background: color-mix(in srgb, var(--sc) 22%, transparent);
  color: color-mix(in srgb, var(--sc) 80%, white);
  border-color: color-mix(in srgb, var(--sc) 48%, transparent);
}
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 18%, transparent); }
.st-live { --sc: var(--status-done); }
.st-pending_dns { --sc: var(--status-queued); }
.st-ssl_failed { --sc: var(--status-blocked); }
.st-offline { --sc: var(--status-idle); }
.st-generated_full { --sc: var(--status-running); }
.admin-table .st { margin: 2px 6px 2px 0; }

.tag-bespoke {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--status-review) 80%, black);
  background: color-mix(in srgb, var(--status-review) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--status-review) 40%, transparent);
  border-radius: var(--radius-sm); padding: 2px 7px; line-height: 1.5;
}
.dark .tag-bespoke { color: color-mix(in srgb, var(--status-review) 65%, white); }

/* dns helpers */
.dns-line, .dns-tip {
  display: inline-block; font-family: var(--font-mono); font-size: 11.5px;
  background: var(--secondary); border: 1px solid var(--border); color: var(--secondary-foreground);
  padding: 5px 10px; border-radius: var(--radius-md); user-select: all; white-space: nowrap; cursor: copy;
  margin-top: 9px; line-height: 1.5;
}
.dns-tip { white-space: normal; max-width: 300px; }
.dns-line:hover, .dns-tip:hover { border-color: var(--ring); }
.card .vis-table td code { font-size: 12.5px; }

/* actions */
.host-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.host-actions form { display: inline-flex; margin: 0; }
.sites-table .host-actions { justify-content: flex-end; }
.sites-table td.host-actions { white-space: nowrap; }

/* delete confirm */
.confirm-inline { position: relative; }
.confirm-inline summary {
  list-style: none; cursor: pointer; font: 600 12.5px var(--font-sans); color: var(--destructive);
  padding: 6px 10px; border-radius: var(--radius-md); border: 1px solid transparent; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.confirm-inline summary::-webkit-details-marker { display: none; }
.confirm-inline summary:hover, .confirm-inline[open] summary {
  background: color-mix(in srgb, var(--destructive) 8%, var(--card));
  border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
}
.confirm-inline form {
  display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 10px;
  background: color-mix(in srgb, var(--destructive) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--destructive) 25%, transparent); border-radius: var(--radius);
}
.confirm-inline input[type=text] {
  width: 170px; height: 32px; padding: 0 10px; font-family: var(--font-mono); font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent); border-radius: var(--radius-sm);
  background: var(--card); color: var(--foreground);
}
.confirm-inline .btn { height: 32px; padding: 0 12px; font-size: 12.5px; background: var(--card); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }
.confirm-inline .btn:hover { background: color-mix(in srgb, var(--destructive) 10%, var(--card)); }

/* login */
.auth-wrap { min-height: calc(100vh - 52px); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 34px 36px; width: 100%; max-width: 400px; }
.auth-card h1 { margin: 0 0 4px; font-size: 26px; }
.stack-form { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.stack-form label { font-size: 12px; font-weight: 600; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.stack-form .btn { margin-top: 18px; }

/* certs */
.cert-soon { color: var(--status-queued) !important; font-weight: 600; }
.cert-expired { color: var(--status-blocked) !important; font-weight: 700; }

/* ================= 5. Mobile ================= */
@media (max-width: 900px) {
  .hq-side { display: none; }
  .hq-search { display: none; }
  .hq-env { display: none; }
  .hq-main { padding: 16px; }
  .hq-crumbs { padding: 10px 16px; }
  .field-row label { min-width: 100%; }
  .field-row .btn { width: 100%; }
  .table-card { overflow-x: auto; }
  .vis-table { min-width: 640px; }
  .hq-user-meta { display: none; }
}

/* ---- channel sub-navigation ------------------------------------------- */
/* Children appear only under the active parent, so the sidebar stays short
   and the current section is obvious without an accordion to click. */
.hq-subnav{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 30px;padding-left:10px;
  border-left:1px solid rgba(255,255,255,.14)}
.hq-sub-item{display:block;padding:5px 8px;border-radius:6px;font:500 12.5px/1.35 var(--font-sans,inherit);
  color:rgba(255,255,255,.62);text-decoration:none}
.hq-sub-item:hover{color:#fff;background:rgba(255,255,255,.07)}
.hq-sub-item.active{color:#fff;background:rgba(255,255,255,.11)}

/* ---- module readiness dot --------------------------------------------- */
/* An unbuilt module must never look finished. Amber = partly wired,
   hollow = nothing behind it yet. */
.nav-state{width:6px;height:6px;border-radius:50%;margin-left:auto;flex:none}
.nav-partial{background:#e0a03a}
.nav-planned{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}

/* ---- module scaffold notice ------------------------------------------- */
.module-note{border:1px dashed var(--input,#d8dee9);border-radius:10px;padding:14px 16px;margin:0 0 18px;
  background:rgba(224,160,58,.06)}
.module-note b{display:block;margin-bottom:4px}

/* sidebar is scoped to the active section; the rail switches sections */
.nav-bullet{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.38);
  margin:0 10px 0 6px;flex:none}
.hq-nav-item.active .nav-bullet{background:#fff}

/* ---------------------------------------------------- prospect list screen */
/* Segment picker + search on one line. The chip row this replaced cost two
   lines of vertical space before you reached a single studio, and grew every
   time a segment was added. */
.list-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 4px}
/* Match the panel's own input rules exactly. These controls sit outside
   .field-row, so without this they fall back to the browser default and the
   search box reads as a foreign element on an otherwise consistent page. */
.list-controls input[type=text],.seg-select{
  height:38px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius-md);
  font:400 14px var(--font-sans);color:var(--foreground);background:var(--card);
  transition:border-color .13s, box-shadow .13s}
.list-controls input[type=text]{flex:1 1 300px;min-width:240px}
.list-controls input[type=text]:focus,.seg-select:focus{
  border-color:var(--ring);outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent)}
.list-controls ::placeholder{color:var(--muted-foreground);font-weight:400}
.seg-select{flex:0 0 auto;min-width:230px;padding:0 32px 0 12px;font-weight:600;
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.seg-select:hover,.list-controls input[type=text]:hover{border-color:var(--ring)}
.chip-on .chip-n{opacity:.8}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 4px}
.stat-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.stat{flex:1 1 120px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.stat-num{display:block;font:700 20px/1.2 var(--font-sans);font-variant-numeric:tabular-nums}
/* Verification verdicts reuse the status-pill vocabulary. Dead addresses read
   as a warning rather than a failure: the row is still a real studio. */
.st-valid{background:rgba(34,160,90,.12);color:#1c7f47}
.st-risky{background:rgba(214,150,20,.14);color:#8a6100}
.st-invalid{background:rgba(200,60,60,.12);color:#a13232}

/* -------------------------------------------------- buying-intent signals */
/* Three kinds, three readings. Intent is a reason to write (warm), reach is a
   reason to believe it lands (cool), block is a reason not to send at all and
   has to survive being glanced past. */
.sig{display:inline-block;padding:2px 7px;margin:0 4px 3px 0;border-radius:5px;
  font:600 11px/1.5 var(--font-sans);white-space:nowrap}
.sig-intent{background:rgba(214,120,20,.14);color:#8a4f00}
.sig-reach{background:rgba(40,110,200,.12);color:#1d4f8f}
.sig-block{background:rgba(200,60,60,.14);color:#a13232}
.sig-score{display:inline-block;min-width:26px;padding:2px 6px;border-radius:5px;
  background:var(--foreground);color:var(--background);
  font:700 11px/1.5 var(--font-sans);font-variant-numeric:tabular-nums;text-align:center}
html.dark .sig-intent{background:rgba(240,160,60,.18);color:#f0b060}
html.dark .sig-reach{background:rgba(90,160,240,.18);color:#8ab8f0}
html.dark .sig-block{background:rgba(230,90,90,.18);color:#e88}

/* ------------------------------------------------- signal dots + funnel key */
/* Dots instead of worded badges: a studio can carry six signals, and six word
   badges per row turns a scannable list into a wall. Colour is never the only
   encoding — every dot has a title and an aria-label, and the key sits directly
   above the table. */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 3px 0 0;
  vertical-align:middle;cursor:help;box-shadow:0 0 0 1px rgba(0,0,0,.10) inset}
td.dots{white-space:nowrap;line-height:1.9}
/* An extra-small button that belongs to the panel's own scale rather than
   fighting it. The previous version set a 10px font and 2px padding inside a
   box .btn-sm still sized at 32px tall, so the text floated in a box built for
   something else and SITE and EMAIL rendered at visibly different weights.
   Geometry is identical for both; only the fill differs, because they are the
   same kind of action on the same row. */
.btn-xs{height:26px;padding:0 10px;min-width:64px;
  font:600 11px/1 var(--font-sans);letter-spacing:.05em;border-radius:6px}

.key-card{display:flex;flex-wrap:wrap;gap:18px;padding:12px 14px}
.key-block{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.key-title{font:700 11px/1.6 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-foreground);margin-right:2px}
.key-item{display:inline-flex;align-items:center;gap:4px;font:500 11px/1.6 var(--font-sans);
  color:var(--muted-foreground);cursor:help;white-space:nowrap}

/* Funnel stage. Temperature, not stage name, drives the colour, so the column
   is readable at a glance: blue nothing yet, orange they did something, red a
   person is engaging, green it turned into money, grey off the funnel. */
.fs{display:inline-block;padding:2px 8px;border-radius:5px;white-space:nowrap;
  font:600 11px/1.6 var(--font-sans);cursor:help}
.fs-cold{background:rgba(37,99,235,.13);color:#1d4ed8}
.fs-warm{background:rgba(217,119,6,.16);color:#a45803}
.fs-hot{background:rgba(214,69,69,.16);color:#b02020}
.fs-closed{background:rgba(22,143,86,.16);color:#12724a}
.fs-out{background:rgba(100,116,139,.14);color:#5b6676}
html.dark .fs-cold{background:rgba(90,150,250,.20);color:#8ab6ff}
html.dark .fs-warm{background:rgba(240,160,60,.20);color:#f0ab5a}
html.dark .fs-hot{background:rgba(240,90,90,.20);color:#f08a8a}
html.dark .fs-closed{background:rgba(60,200,130,.20);color:#68d4a0}
html.dark .fs-out{background:rgba(140,155,175,.18);color:#a8b3c4}
html.dark .dot{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}

/* The studio list is dense by design, so column widths are declared rather
   than left to the browser: without them the name column collapses to four
   wrapped lines while the status counts push past the edge of the card. */
/* Fixed layout so the declared widths are authoritative. Left to auto the
   browser hands most of the row to whichever column holds the longest
   unbroken string — an email address — and squeezes the studio name into four
   wrapped lines, which is the column you actually read. */
.studio-table{table-layout:fixed;width:100%}
.vis-table td.dots{white-space:nowrap;overflow:visible}
.vis-table td.dots .sig-score{margin-left:4px;vertical-align:middle}
.vis-table .touches{display:inline-block;white-space:normal;line-height:1.5;margin-top:2px}
.vis-table td,.vis-table th{overflow-wrap:anywhere}
.vis-table td:first-child{overflow-wrap:normal;word-break:normal}
/* td.small is nowrap across the whole panel, which is right for a date or a
   count and wrong for an address. Fixed column widths plus nowrap put the tail
   of dance@rockymountainballroom.com on top of the city beside it, so the
   address column alone is allowed to wrap. Wrapping rather than truncating:
   half an email address is not a usable thing to look at. */
.studio-table td:nth-child(2){white-space:normal;overflow-wrap:anywhere;line-height:1.45}

/* Compose form: the message box is the point of the screen, so it gets room. */
.compose-label{display:flex;flex-direction:column;gap:7px;margin-top:16px;
  font-size:12px;font-weight:600;color:var(--muted-foreground)}
.compose-label textarea{width:100%;padding:12px;border:1px solid var(--input);
  border-radius:var(--radius-md);background:var(--card);color:var(--foreground);
  font:400 14px/1.65 var(--font-sans);resize:vertical;min-height:280px;
  transition:border-color .13s, box-shadow .13s}
.compose-label textarea:focus{border-color:var(--ring);outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent)}
.field-row input:disabled{background:var(--muted,rgba(0,0,0,.04));color:var(--muted-foreground);cursor:not-allowed}


/* ---------------------------------------------------------- prospecting hq */
/* The job launcher: one row — vertical, job, run. Labels sit above their
   selects so the row scans like a sentence: for THIS market, do THIS. */
.job-launcher{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.jl-field{display:flex;flex-direction:column;gap:6px;min-width:220px}
.jl-label{font:700 10px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.job-launcher .btn{height:38px}

/* The pipeline, drawn as what it is: five steps, the live ones numbered in
   green. Grid, not flex, so five steps stay five columns until they can't. */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pipe-step{display:flex;flex-direction:column;gap:4px;padding:2px 4px}
.pipe-no{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--font-sans);background:var(--muted);color:var(--muted-foreground);margin-bottom:2px}
.pipe-no.st-live{background:rgba(22,143,86,.16);color:#12724a}
html.dark .pipe-no.st-live{background:rgba(60,200,130,.2);color:#68d4a0}
@media (max-width:1100px){.pipe{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------ dashboard hq */
/* Best targets front and centre: a two-column band, the list on the left,
   what-needs-you on the right. Below 1100px it stacks, targets first —
   the ordering IS the point of the redesign. */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
@media (max-width:1100px){.dash-grid{grid-template-columns:1fr}}
.target-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent)}
.target-row:first-of-type{border-top:0}
.target-who{flex:1 1 auto;min-width:0}
.target-who strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.target-why{flex:0 0 auto;white-space:nowrap}
.target-act{flex:0 0 auto;display:flex;gap:6px}
.attn-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;
  border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent)}
.attn-row:first-of-type{border-top:0}
.attn-row .stat-num{font-size:20px}

/* The dashboard's right-hand column: two stacked cards rather than one card
   with two jobs inside it. */
.dash-col{display:grid;gap:16px;align-items:start}

/* Queue rows — the drafts waiting on Don, and the ones already on their way.
   NOTE ON COLOUR: --muted and --accent are BACKGROUND tokens (near-white in
   light mode). Text uses --muted-foreground / --accent-foreground. Getting
   that wrong renders the row invisible on a white card, which is exactly what
   it did the first time. */
.appr-row{display:flex;align-items:center;gap:10px;padding:8px 0;text-decoration:none;
  color:var(--card-foreground);
  border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent)}
.appr-row:first-of-type{border-top:0}
.appr-row:hover{color:var(--accent-foreground)}
.appr-who{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13px;font-weight:600}
.appr-phase{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted-foreground);background:var(--muted);
  padding:2px 7px;border-radius:999px;white-space:nowrap}
/* When the send lands. Reads as a date, not as another label. */
.appr-when{flex:0 0 auto;font-size:11px;font-weight:600;white-space:nowrap;
  color:var(--accent-foreground);font-variant-numeric:tabular-nums}
.appr-go{flex:0 0 auto;color:var(--muted-foreground);font-size:15px;line-height:1}
.appr-row:hover .appr-go{color:var(--accent-foreground)}
.appr-empty{margin:8px 0 0;color:var(--muted-foreground);font-size:12.5px}

/* Sales leads: a call sheet, so the name and the number carry the weight. */
.sales-tbl{width:100%;border-collapse:collapse}
.sales-tbl td,.sales-tbl th{padding:9px 10px;text-align:left;vertical-align:middle;font-size:13px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent)}
/* --muted is a BACKGROUND token; header text needs the foreground pair or it
   washes out to near-white on a white card. */
.sales-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted-foreground);font-weight:700;white-space:nowrap}
.sales-tbl td.num,.sales-tbl th.num{text-align:right}
.sales-tbl tbody tr:hover{background:color-mix(in srgb, var(--accent) 45%, transparent)}
/* The thing you dial should look dialable. */
.sales-tbl a[href^="tel:"]{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
/* The action pair rides on ONE line. .host-actions wraps by default, which is
   right in a card and wrong in a table row — it doubles every row's height.
   No width games here: fixing a column at 1% made the buttons overrun the
   score and stage beside them. nowrap alone is enough; the table sizes
   itself around it. */
.sales-tbl .host-actions{display:inline-flex;gap:6px;flex-wrap:nowrap}
/* Names may wrap (a call sheet wants the whole name); the short columns hold
   their line so a row stays one line tall wherever it can. */
.sales-tbl td:nth-child(2),.sales-tbl td:nth-child(4){white-space:nowrap}
/* The studio name is the way into its own screen, so it has to look like it. */
.sales-name{font-weight:700;color:var(--card-foreground);text-decoration:none}
.sales-name:hover{color:var(--accent-foreground);text-decoration:underline}
/* Calls placed. Absent reads as a dash, not a zero — "never tried" and
   "tried once" are different facts and should not look alike. */
.call-pip{display:inline-block;min-width:20px;padding:1px 6px;border-radius:999px;
  background:var(--muted);color:var(--muted-foreground);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- the studio screen */
.call-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.call-num{font-size:22px;font-weight:700;letter-spacing:.01em;text-decoration:none;
  color:var(--accent-foreground);font-variant-numeric:tabular-nums}
.call-num.muted{color:var(--muted-foreground);font-size:16px;font-weight:600}
.call-counter{display:inline-flex;align-items:center;gap:8px}
.call-count{min-width:34px;text-align:center;font-size:22px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--card-foreground)}
.call-counter .btn{min-width:34px;font-size:16px;line-height:1;padding:5px 10px}
.call-counter .btn[disabled]{opacity:.35;cursor:not-allowed}

/* A note is a paragraph with a receipt attached. */
.note-row{padding:9px 0;border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent)}
.note-row:first-of-type{border-top:0}
.note-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.note-kind{font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:4px}
.note-call{background:#dcfce7;color:#166534}
.note-note{background:var(--muted);color:var(--muted-foreground)}
.dark .note-call{background:#14532d;color:#bbf7d0}
.note-body{margin:0;font-size:13px;line-height:1.5;color:var(--card-foreground)}
/* Why-them lines on the studio screen: a dot, a label, and the reason. */
.sig-line{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:12.5px}
.sig-line .dot{margin-top:5px;flex:0 0 auto}

/* ----------------------------------------------------------------- flow hq */
/* The sequence flow as a loop board: stage cards on a computed ellipse,
   curved handoff arcs, the campaign named in the centre. Nothing drags —
   geometry is derived, so the board is always tidy and the data always
   matches the engine. */
/* A funnel, drawn as one: full content width, stages centred with room to
   breathe, connectors labelled with the waits. Positions are flexbox, not
   coordinates — nothing exists to drag out of place. */
.fun-card{padding:10px 12px 4px;position:relative}
.fun-tools{position:absolute;top:12px;right:14px;z-index:3;display:flex;gap:6px;align-items:center}
.fun-tools .btn{min-width:34px;padding:0 9px}
.fun-scroll{overflow:auto}
/* Tall on purpose: the sequence runs along the vertical centre so the
   if/then arms the agent builds have room to branch up and down without
   the board reflowing. Zoom (CSS zoom, reflowing) trades whole-picture for
   granular view; nothing is draggable at any level. */
.fun-board{display:flex;align-items:center;justify-content:center;gap:0;
  min-width:max-content;min-height:520px;margin:0 auto;padding:36px 12px}

/* Stage cards: icon tile, title, live detail, kicker, and the count of
   leads standing there — the loop-board anatomy carrying funnel data. */
.fn-node{display:flex;align-items:flex-start;gap:10px;flex:0 0 auto;
  width:234px;border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px 13px;
  box-shadow:0 1px 3px rgba(15,23,42,.08);text-decoration:none!important;color:var(--foreground);
  transition:border-color .12s, box-shadow .12s}
a.fn-node:hover{border-color:#2f6ab0;box-shadow:0 3px 10px rgba(15,23,42,.12)}
.fn-node.selected{border-color:#2f6ab0;box-shadow:0 0 0 2px color-mix(in srgb, #2f6ab0 35%, transparent)}
.fn-entry{background:color-mix(in srgb, var(--muted) 55%, var(--card))}
.fn-exits{cursor:default}

/* The if/then split: a diamond on the line, arms branching up and down,
   merging back before the next stage. All geometry is fixed and computed —
   the fork SVGs are 300 units tall to match the arms column exactly. */
.fn-split{display:flex;align-items:center;flex:0 0 auto}
.fn-diamond{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;
  text-decoration:none!important;color:var(--foreground);padding:8px 6px;border-radius:12px;
  border:1px solid transparent;transition:border-color .12s, box-shadow .12s}
.fn-diamond:hover{border-color:#d97706;box-shadow:0 2px 8px rgba(15,23,42,.10)}
.fn-diamond.selected{border-color:#d97706;box-shadow:0 0 0 2px color-mix(in srgb, #d97706 40%, transparent)}
.fnd-shape{width:44px;height:44px;transform:rotate(45deg);border-radius:9px;
  background:color-mix(in srgb, #f59e0b 18%, var(--card));border:1.6px solid #d97706;
  box-shadow:0 1px 3px rgba(15,23,42,.10);margin:6px 0}
.fnd-label{position:absolute;margin-top:10px;text-align:center;
  font:600 8.5px/1.25 var(--font-sans);letter-spacing:.06em;color:#a45803;pointer-events:none}
.fnd-label b{font-size:10px;letter-spacing:0}
html.dark .fnd-label{color:#f0ab5a}
.fnd-meta{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:4px;text-align:center}
.fnd-meta .rn-count{margin-left:0}
.fn-fork,.fn-merge{width:46px;height:300px;flex:0 0 auto}
.fn-fork path,.fn-merge path{fill:none;stroke-width:1.7}
.ff-yes{stroke:#168f56}
.ff-no{stroke:#c25a5a}
.ff-lbl{font:700 9px var(--font-sans);letter-spacing:.06em}
.ff-lbl-yes{fill:#12724a}
.ff-lbl-no{fill:#b02020}
.fn-split-arms{display:flex;flex-direction:column;justify-content:space-between;height:300px;flex:0 0 auto}
.fn-armcard{display:flex;flex-direction:column;gap:4px;width:224px;height:118px;overflow:hidden;
  border:1px solid var(--border);border-radius:11px;background:var(--card);padding:10px 12px;
  box-shadow:0 1px 3px rgba(15,23,42,.08);cursor:pointer;
  transition:border-color .12s, box-shadow .12s}
.fn-armcard b{font:600 12px/1.35 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-armcard .cv-armtag{align-self:flex-start}
.fn-armcard:hover{border-color:#2f6ab0;box-shadow:0 3px 10px rgba(15,23,42,.12)}
.fn-armcard.selected{border-color:#2f6ab0;box-shadow:0 0 0 2px color-mix(in srgb, #2f6ab0 35%, transparent)}
.fn-armcard-yes{border-left:3px solid #168f56}
.fn-armcard-no{border-left:3px solid #c25a5a}

/* The opened sequence: origin node → fork → the emails, with their stats. */
.mail-board{display:flex;align-items:center;gap:0;justify-content:flex-start;padding:6px 2px}
.mb-origin{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;
  text-align:center;min-width:130px;padding:8px}
.mb-origin b{font:600 13px/1.3 var(--font-sans)}
.mb-fork{width:54px;flex:0 0 auto;align-self:stretch;min-height:280px}
.mb-fork path{fill:none;stroke-width:1.7}
.mb-mails{display:flex;flex-direction:column;gap:26px;flex:1 1 auto;min-width:0;padding:4px 0}
.mb-mails .mailcard{max-width:760px}

/* Connector between stages: a labelled line with an arrowhead. */
.fn-link{display:flex;align-items:center;flex:0 0 auto;color:var(--muted-foreground);padding:0 3px}
.fn-link i{display:block;width:13px;height:1.6px;background:color-mix(in srgb, var(--muted-foreground) 45%, transparent)}
.fn-link b{font:600 10px/1 var(--font-sans);letter-spacing:.05em;padding:4px 8px;white-space:nowrap;
  border:1px solid var(--border);border-radius:99px;background:var(--card)}
.fn-link .fn-arr{position:relative}
.fn-link .fn-arr::after{content:"";position:absolute;right:-1px;top:-3.2px;border-left:6px solid
  color-mix(in srgb, var(--muted-foreground) 55%, transparent);border-top:4px solid transparent;border-bottom:4px solid transparent}
.rn-ico{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, #2f6ab0 13%, var(--card));color:#2f6ab0}
.rn-ico svg{width:17px;height:17px}
.rn-ico-entry{background:color-mix(in srgb, var(--muted-foreground) 14%, var(--card));color:var(--muted-foreground)}
.rn-ico-exit{background:rgba(22,143,86,.14);color:#12724a}
.rn-ico-branch{background:color-mix(in srgb, #f59e0b 18%, var(--card))}
.rn-diamond{width:12px;height:12px;transform:rotate(45deg);border-radius:2.5px;
  background:color-mix(in srgb, #f59e0b 32%, var(--card));border:1.5px solid #d97706}
.rn-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rn-main b{font:600 12.5px/1.35 var(--font-sans)}
.rn-sub{font:400 11px/1.45 var(--font-sans);color:var(--muted-foreground);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:4px;align-items:center}
.rn-sub .fs{font-size:10px;padding:1px 6px}
.rn-kicker{font:700 9px/1.5 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground);margin-top:1px}
.rn-stats{font:600 10.5px/1.5 var(--font-sans);color:var(--foreground);opacity:.85}
.rn-count{font:640 22px/1 var(--font-heading);letter-spacing:-.02em;margin-left:auto;flex:0 0 auto;padding-top:2px}

/* Branch arms inside the stage card: the A/B split with what actually sent. */
.rn-arms{display:flex;flex-direction:column;gap:3px;margin:2px 0 1px}
.rn-arm{display:flex;align-items:center;gap:6px;font:500 10.5px/1.4 var(--font-sans);color:var(--muted-foreground);
  border:1px solid var(--border);border-radius:6px;padding:2px 7px;cursor:pointer;white-space:nowrap}
.rn-arm b{font-size:8.5px;letter-spacing:.08em}
.rn-arm-yes{border-left:3px solid #168f56}
.rn-arm-yes b{color:#12724a}
.rn-arm-no{border-left:3px solid #c25a5a}
.rn-arm-no b{color:#b02020}
.rn-arm:hover,.rn-arm.selected{border-color:#2f6ab0}
.ring-caption{margin:6px 4px 8px;text-align:center}

/* The emails inside a touch: one card per variant, stats underneath. */
.mailgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1000px){.mailgrid{grid-template-columns:1fr}}
.mailgrid:has(> :only-child){grid-template-columns:minmax(0,720px)}
.mailcard{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--card)}
.mailcard-yes{border-left:3px solid #168f56}
.mailcard-no{border-left:3px solid #c25a5a}
.mailcard-head{display:flex;align-items:center;gap:8px}
.mail-preview{margin:8px 0 0;white-space:pre-wrap;font:400 12.5px/1.6 var(--font-mono);
  color:var(--muted-foreground);background:none;padding:0;max-height:120px;overflow:hidden}
.mail-stats{display:flex;gap:16px;margin:10px 0 0;font:400 12px var(--font-sans);color:var(--muted-foreground);
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent);padding-top:8px}
.mail-stats b{font-size:14px;color:var(--foreground)}

/* Drill-down copy block */
.fl-copy{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1000px){.fl-copy{grid-template-columns:1fr}}
.fl-copy-line{margin:2px 0 0}
.fl-table{table-layout:fixed;width:100%}
.fl-table td:nth-child(2){white-space:normal;overflow-wrap:anywhere}

/* Leads table: declared widths, wrapping address column, and a one-line log
   form whose selects stay small enough to share a row. */
.leads-table{table-layout:fixed;width:100%}
.leads-table td:nth-child(2){white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.lead-log{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lead-log select{height:28px;padding:0 6px;border:1px solid var(--input);border-radius:var(--radius-sm);
  background:var(--card);color:var(--foreground);font:400 12px var(--font-sans);max-width:110px}

/* A stat that is really a doorway: the agent's drafts waiting on a click. */
a.stat-attn{text-decoration:none!important;border:1px solid color-mix(in srgb, #d97706 45%, var(--border));
  background:color-mix(in srgb, #f59e0b 7%, var(--card))}
a.stat-attn:hover{border-color:#d97706;box-shadow:0 2px 8px rgba(15,23,42,.10)}
.draft-card{border-left:3px solid #d97706;margin-bottom:12px}

/* ------------------------------------------------ archive + audit additions */
/* REMOVE is quiet until you hover: destructive intent should be deliberate,
   not decorated. Text colours use the -foreground tokens (the base tokens
   are backgrounds — that trap has bitten twice). */
.btn-danger { color: #b91c1c; border-color: color-mix(in srgb, #b91c1c 35%, transparent); }
.btn-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
:root.dark .btn-danger, .dark .btn-danger { color: #f87171; border-color: color-mix(in srgb, #f87171 35%, transparent); }
:root.dark .btn-danger:hover, .dark .btn-danger:hover { background: #b91c1c; color: #fff; }

/* Audit score chip: the number a salesperson quotes on the phone. */
.aud-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px;
  font-weight: 700; font-size: 13px; color: #fff;
}
.aud-good { background: #15803d; }
.aud-mid  { background: #b45309; }
.aud-poor { background: #b91c1c; }

/* ---- flow drill-down: every stat number is a door ---------------------- */
/* Spans, not anchors: they render inside the node's own <a>, and the page's
   [data-href] handler navigates them with propagation stopped. */
.rn-statlink { cursor: pointer; border-radius: 4px; padding: 0 2px; }
.rn-statlink:hover, .rn-statlink:focus-visible {
  text-decoration: underline; color: var(--accent-foreground); outline: none;
}
.rn-statlink-on { font-weight: 700; color: var(--accent-foreground); text-decoration: underline; }
.rn-statdot { opacity: .5; }
.mail-stats a { color: inherit; text-decoration: none; }
.mail-stats a:hover { text-decoration: underline; color: var(--accent-foreground); }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover .muted { text-decoration: underline; }

/* ---------------------------------------------- every draft, and where it stands
   Fixed layout, deliberately. With auto layout a long subject line widened the
   table past its card and pushed the last column off the right edge — and the
   last column is WHEN, which is the whole question the table answers. Fixed
   layout makes the declared widths authoritative and truncates the prose
   instead of the timing. */
.lifecycle-table { table-layout: fixed; }
.lifecycle-table th,
.lifecycle-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lifecycle-table td.lc-when { white-space: normal; overflow: visible; }
.lifecycle-table td.lc-when .muted { display: block; line-height: 1.35; }
.lifecycle-table .fs { white-space: nowrap; }
/* The count line sits inside .section-title, which uppercases and letterspaces
   its contents. Left alone the summary read as more heading. */
.section-title .lc-tally { text-transform: none; letter-spacing: 0; margin-left: 10px; font-weight: 500; }

/* ------------------------------------------------ they claimed their listing
   The only row on a studio page the studio itself caused. Rose rather than the
   obvious green: green already means "closed, paying" one column over, and two
   greens meaning different things is how a screen stops being scannable. */
.verified-row { border-left: 3px solid #be185d; padding-left: 9px; margin-left: -12px; }
.verified-row strong { color: #be185d; }
html.dark .verified-row { border-left-color: #f472b6; }
html.dark .verified-row strong { color: #f472b6; }

/* Discovery-queue row controls. Layout only — every colour here comes from the
   existing .btn vocabulary, so the row follows the theme without new tokens. */
.mq-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mq-acts form{display:inline}
.mq-acts .btn-xs{min-width:0}

/* Budget meter. Its own class rather than the shared .bar, which is scoped to
   .hq-side-widget and therefore paints nothing out here in the main column. */
.mq-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:0 0 5px;max-width:190px}
.mq-bar i{display:block;height:100%;background:var(--primary);border-radius:3px}

/* The add-a-metro fields. Scoped rather than relying on class="input", which
   six templates use and the stylesheet has never defined — those inputs fall
   back to the browser default and read as foreign on a themed page. Worth
   fixing globally, but not silently, so this rule stays local to the panel. */
.mq-add input[type=text]{
  height:38px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius-md);
  font:400 14px var(--font-sans);color:var(--foreground);background:var(--card);
  transition:border-color .13s, box-shadow .13s}
.mq-add input[type=text]:hover{border-color:var(--ring)}
.mq-add input[type=text]:focus{border-color:var(--ring);outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent)}
.mq-add input::placeholder{color:var(--muted-foreground);font-weight:400}
.mq-add .mq-state{min-width:88px;flex:0 0 88px}

/* The paused-discovery card. A warning tone without the destructive red —
   nothing has gone wrong here, something is waiting on a decision. */
.jl-paused{margin-top:14px;padding:12px 14px;border-radius:var(--radius-md);
  border:1px solid var(--input);background:var(--muted)}
.jl-paused p{color:var(--muted-foreground)}
.jl-paused code{font-family:var(--font-mono);font-size:12px}

/* ------------------------------------------------------------------ forms
   One rule for every text control in the panel. `.input` had no definition
   at all — thirty controls across six templates were falling back to the
   browser default and reading as cramped, foreign elements next to the
   list-controls row, which is the house style. This is that style, applied
   to `.input` and to any bare control inside a card. Checkboxes, radios,
   files and buttons are left alone. */
.input,
.card select:not([class]), .card textarea:not([class]),
.card input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([class]){
  box-sizing:border-box;height:38px;padding:0 12px;max-width:100%;
  border:1px solid var(--input);border-radius:var(--radius-md);
  font:400 14px var(--font-sans);color:var(--foreground);background:var(--card);
  transition:border-color .13s, box-shadow .13s}
textarea.input,.card textarea:not([class]){
  height:auto;min-height:84px;padding:10px 12px;line-height:1.45;resize:vertical;font-family:var(--font-sans)}
select.input,.card select:not([class]){
  padding-right:32px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.input:hover,.card select:not([class]):hover,.card textarea:not([class]):hover{border-color:var(--ring)}
.input:focus,.card select:not([class]):focus,.card textarea:not([class]):focus,
.card input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([class]):focus{
  border-color:var(--ring);outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent)}
.input::placeholder{color:var(--muted-foreground);font-weight:400}
.input:disabled,.card select:disabled{opacity:.55;cursor:not-allowed}
/* A label directly over a control: small, muted, breathing room below. */
.card label.small,.card label.muted{display:block;margin-bottom:3px}
.card label.small:has(input[type=checkbox]),.card label.muted:has(input[type=checkbox]){display:inline-flex;margin-bottom:0}
/* Controls that sit in a horizontal action row keep their own width. */
.host-actions .input{width:auto}
.host-actions select.input{min-width:200px}
/* Compact controls in dense table rows keep the old size on purpose. */
.card td .input,.card td select:not([class]),.card td input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([class]),
.lead-log .input,.lead-log select:not([class]){height:28px;padding:0 6px;font-size:12px;border-radius:var(--radius-sm)}
.card td select:not([class]),.lead-log select:not([class]),td select.input{padding-right:20px;background-position:right 4px center}
.pull-box summary::-webkit-details-marker{color:#c2410c}

/* ------------------------------------------------------------ the valve
   The scraping shut-off on Prospecting. A real button, not a checkbox with
   javascript behind it: one click is one POST, so it works on a phone with
   a flaky connection, which is exactly where someone is standing when they
   want the scraper to stop. */
.valve-form{display:inline-flex;margin:0}
.valve{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  height:32px;padding:0 12px 0 8px;border:1px solid var(--border);border-radius:999px;
  background:var(--card);font:600 12.5px var(--font-sans);color:var(--muted-foreground);
  transition:border-color .13s, color .13s, background .13s}
.valve:hover{border-color:var(--ring)}
.valve:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent)}
.valve-track{position:relative;width:34px;height:18px;border-radius:999px;
  background:#cbd5e1;transition:background .15s}
.valve-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.valve-on{color:#166534;border-color:color-mix(in srgb, #16a34a 45%, var(--border))}
.valve-on .valve-track{background:#16a34a}
.valve-on .valve-knob{transform:translateX(16px)}
.valve-off{color:#991b1b;border-color:color-mix(in srgb, #dc2626 45%, var(--border))}
.valve-off .valve-track{background:#dc2626}
/* Off is the loud state: a scraper that is switched off while someone waits
   for leads should be impossible to miss. */
.alert-valve{border:1px solid color-mix(in srgb, #dc2626 40%, var(--border));
  background:color-mix(in srgb, #dc2626 7%, var(--card));color:#991b1b;
  padding:10px 12px;border-radius:var(--radius-md);margin:12px 0;font-size:13px}