/* ============================================================
   Send3r — A3i Accel "h3ive" skin (Playbook design/templates/h3ive)
   cream · ink · red sparingly · Fraunces display · IBM Plex Sans body
   static hairline nav · left options rail · flat hairline cards · pill buttons
   ============================================================ */
:root {
  --bg: #f7f3ea; --bg-2: #efe9db; --paper: #fffdf8; --band: #e4ded3;
  /* the left rail sits a step darker and greyer than the page cream, so the work
     area reads as the lit surface. Its own token: --bg-2 is shared with buttons,
     segmented controls, the AI box and more, which should not move with it. */
  /* muted text has to step down with the surface: the page's --text-3 lands at
     3.0:1 on this rail, under the 4.5:1 floor. --rail-muted clears it at 4.65:1. */
  --rail-bg: #d4d1c8; --rail-line: #c2bead; --rail-muted: #5c584d; --rail-accent: var(--accent);
  --contrast: #14130f; --contrast-text: #efe9db;
  --text: #0a0a0a; --text-2: #3d3a33; --text-3: #7a756a;
  --line: #d9d2c0; --line-2: #e8e2d3;
  --accent: #B5181E; --ok: #2f5d3a; --amber: #8a5a12;
  --tag-bg: #e6e1d4; --tag-fg: #3d3a33;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --content-w: 1160px; --nav-h: 71px; --panel-w: 264px;
  --radius: 14px; --radius-sm: 6px; --radius-pane: 12px; --pill: 999px;
  --shadow-frame: 0 30px 60px -30px rgba(10, 10, 10, .35);
  --transition: 150ms;
  /* aliases kept for older rules */
  --ink: var(--text); --muted: var(--text-3); --red: var(--accent); --red-dk: #8f1318;
  --bg-alt: var(--bg-2); --bg-white: var(--paper); --card: var(--paper);
  --text-md: var(--text-2); --text-muted: var(--text-3); --line-md: var(--line); --hair: var(--line);
  --ink-btn: var(--text); --green: var(--ok); --body: var(--sans); --display: var(--serif);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; background: var(--bg); color: var(--text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; margin: 0; }
a { color: var(--text); }
code { background: var(--tag-bg); color: var(--tag-fg); padding: 1px 6px; border-radius: 4px; font: 12px var(--mono); }
.ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fb { display: none; }
.no-fa .fb { display: inline-block; }
.no-fa .fas { display: none; }
.three { color: var(--accent); }

/* ---- Navbar: static, transparent on the cream, hairline below ---- */
.navbar { height: var(--nav-h); border-bottom: 1px solid var(--line); background: var(--bg); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; gap: 1.6rem; }
.logo { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; text-decoration: none; }
.logo-icon img { height: 30px; width: 30px; display: block; border-radius: 6px; }
.logo-text { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--text); letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: .1rem; margin-left: .6rem; }
.nav-link { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--text-2);
  padding: .4rem .8rem; border-radius: var(--radius-sm); transition: var(--transition); white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.nav-link i { font-size: .65rem; opacity: .7; }
.nav-link:hover { color: var(--text); background: var(--bg-2); }
.nav-link.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-shrink: 0; }
.btn-nav-trust { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: rgba(247, 243, 234, .88); text-decoration: none; white-space: nowrap; transition: var(--transition); }
.btn-nav-trust i { color: var(--ok); font-size: .8rem; }
.btn-nav-trust .ico { width: 13px; height: 13px; color: var(--ok); }
.btn-nav-trust:hover { background: var(--paper); color: var(--text); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-inner { padding: 0 1.1rem; } }

/* ---- Shell: options rail (left) · working panel (right) ---- */
.shell { display: flex; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); overflow: hidden; }
.sidebar { width: var(--panel-w); flex-shrink: 0; height: 100%; overflow-y: auto;
  background: var(--rail-bg); border-right: 1px solid var(--rail-line);
  color: var(--text-2); padding: 22px 16px; display: flex; flex-direction: column; gap: 3px; }
.sidebar h2 { font-size: 24px; margin: 0 6px 10px; color: var(--text); }
/* each section opens on a hairline, the same one that sits above the user box:
   full rail width, text indented to match */
.side-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--rail-muted); margin: 12px 0 5px; padding: 12px 8px 0;
  border-top: 1px solid var(--rail-line); }
.nt-navlink { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: var(--transition); }
.nt-navlink .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-navlink i { width: 18px; text-align: center; font-size: 13px; opacity: .9; }
.nt-navlink .ico { width: 16px; height: 16px; opacity: .9; margin: 0 1px; }
.nt-navlink:hover { background: rgba(10, 10, 10, .06); color: var(--text); }
.nt-navlink.active { background: var(--text); color: var(--bg); }
.nt-navlink.soon { color: var(--text-3); cursor: default; }
.nt-navlink.soon em { font-style: normal; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-left: auto; opacity: .7; }
.nt-navlink.soon:hover { background: transparent; color: var(--text-3); }
.nav-spacer { flex: 1; min-height: 14px; }
.user-box { font-size: 12.5px; padding: 12px 8px 4px; border-top: 1px solid var(--rail-line); margin-top: 8px; }
.user-box .email { color: var(--text); word-break: break-all; font-weight: 600; margin-bottom: 9px; }
.user-box .sources { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 9px; }
.side-cta, .logout { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 12.5px; }
.side-cta:hover, .logout:hover { color: var(--red-dk); }

.main { flex: 1; height: 100%; overflow-y: auto; padding: 0 36px 64px; min-width: 0; }
.main > * { max-width: var(--content-w); }
/* The page title and its one-liner stay put while the body scrolls, and condense
   once you are past the top so they cost less room. The negative top margin plus
   matching padding keeps the resting position identical to before, while giving
   the bar a background that covers the gap when it is stuck. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  margin: 0 0 18px; padding: 28px 0 12px;
  border-bottom: 1px solid transparent;
  transition: padding var(--transition), border-color var(--transition); }
.page-head h1 { font-size: 40px; line-height: 1.1; color: var(--text); transition: font-size var(--transition); }
.page-head .sub { color: var(--text-2); font-size: 15px; margin-top: 6px; transition: font-size var(--transition); }
/* sentinel for the stuck state: occupies the scroll distance the rule uses, then
   is pulled back out of the flow so it changes no spacing */
.page-head-mark { height: 24px; margin-bottom: -24px; pointer-events: none; }
.page-head.shrunk { padding: 12px 0 10px; border-bottom-color: var(--line); }
.page-head.shrunk h1 { font-size: 26px; }
.page-head.shrunk .sub { font-size: 13px; margin-top: 3px; }
.page-head.shrunk .crumbs { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .page-head, .page-head h1, .page-head .sub { transition: none; } }
.crumbs { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
#campName { cursor: text; }
#campName:hover { text-decoration: underline dotted var(--line); }

/* ---- Chips / pills / banners ---- */
.chip, .pill, .badge { display: inline-block; background: var(--tag-bg); color: var(--tag-fg); border-radius: var(--pill); font-weight: 500; white-space: nowrap; }
.chip { padding: 3px 10px; font-size: 11px; border: 1px solid var(--line); }
.chip.warn { background: #f4e3e2; color: var(--red-dk); border-color: #e8c9c7; }
.pill { padding: 2px 9px; font-size: 11px; margin-left: 6px; vertical-align: middle; }
.badge { padding: 4px 11px; font-size: 11px; border: 1px solid var(--line); }
.banner { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; color: var(--text-2); font-size: 14px; }
.banner.warn { border-left: 3px solid var(--accent); }
.banner a { color: var(--text); font-weight: 600; }

/* ---- Cards: paper, hairline, 14px, flat ---- */
.card, .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; }
.card { padding: 22px 24px; }
.panel { overflow: hidden; }
.card > h2, .toolbar h2, .section-head, h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); margin: 0 0 14px; }
.toolbar h2 { margin: 0 6px 0 0; }
.card .field { margin-bottom: 12px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; align-items: baseline; color: var(--text-2); font-size: 14px; }
.stats strong { color: var(--text); font-weight: 600; font-family: var(--serif); font-size: 17px; }
.stats .hot, .stats .hot strong { color: var(--accent); }
.actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.actions .spacer { flex: 1; }

/* ---- Inputs ---- */
.row { display: flex; gap: 8px; margin-top: 6px; }
.row input { flex: 1; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px;
  background: var(--paper); color: var(--text); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text); }
textarea { width: 100%; resize: vertical; font: 13px/1.6 var(--mono); }
textarea.prose { font: inherit; font-size: 14px; line-height: 1.55; }
input:disabled { background: var(--bg); color: var(--text-3); }
input[type=checkbox] { accent-color: var(--text); width: 15px; height: 15px; }
input[type=file] { padding: 7px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper); font-size: 13px; flex: 1; }
select { cursor: pointer; }

/* ---- Buttons: pills, no shadows ---- */
button { font-family: inherit; font-weight: 600; font-size: 13.5px; border: 1.5px solid var(--text); border-radius: var(--pill); padding: 9px 18px;
  cursor: pointer; transition: var(--transition); white-space: nowrap; background: transparent; color: var(--text); }
button:hover { background: var(--bg-2); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.small { padding: 5px 12px; font-size: 12px; }
.primary { background: var(--text); color: var(--bg); }
.primary:hover { background: #000; color: #fff; }
.secondary { background: transparent; color: var(--text); }
.danger { color: var(--accent); border-color: var(--accent); }
.danger:hover { background: var(--accent); color: #fff; }
.btn-link { color: var(--text); font-weight: 600; text-decoration: none; margin-right: 8px; border-bottom: 1px solid var(--line); }
.btn-link:hover { border-bottom-color: var(--text); }
.backlink { color: var(--text-3); text-decoration: none; font-weight: 600; font-size: 13px; }
.backlink:hover { color: var(--text); }

/* ---- Toolbar, filters, tables ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.toolbar .spacer { flex: 1; }
.toolbar #search { width: 230px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text-2); }
label.inline select { font-weight: 500; }
.progress { flex-basis: 100%; display: flex; align-items: center; gap: 10px; }
.progress .bar { height: 8px; border-radius: var(--pill); background: var(--text); transition: width .4s; min-width: 2px; }
.progress .label { color: var(--text-3); font-size: 12px; }

.table-wrap { overflow: auto; }
.table-wrap table { min-width: 900px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { position: sticky; top: 0; background: var(--paper); color: var(--text-3); text-align: left; padding: 10px 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid var(--line); z-index: 1; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:hover td { background: var(--bg); }
tr:last-child td { border-bottom: 0; }
td a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
td a:hover { border-bottom-color: var(--text); }
tr.dim td { opacity: .5; }
.chk { width: 34px; text-align: center; }
.actions-cell, td.actions { text-align: right; white-space: nowrap; }
.muted { color: var(--text-3); font-size: 12.5px; }

/* ---- Contact states: replied (green) · no reply yet (amber) · ready for reminder (red) ---- */
.st-replied { color: var(--ok); font-weight: 600; }
.st-waiting { color: var(--amber); font-weight: 600; }
.st-due { color: var(--accent); font-weight: 600; }
.st-new, .st-done { color: var(--text-2); font-weight: 600; }
.st-dnc { color: var(--text-3); font-weight: 600; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: middle; flex: none; }
.dot.st-new, .dot.st-done { background: var(--line); }
.dot.st-dnc { background: var(--line-2); }
.nt-navlink .dot { width: 10px; height: 10px; margin: 0 4px; }
.nt-navlink.active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.nt-navlink .cnt { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--rail-muted); background: rgba(10,10,10,.08); border-radius: var(--pill); padding: 1px 7px; }
.nt-navlink .cnt:empty { display: none; }
.nt-navlink.active .cnt { background: rgba(255,255,255,.18); color: var(--bg); }
.pill.st-replied-bg, .pill.lb-good { background: #e3ede6; color: var(--ok); }
.pill.lb-mid { background: var(--tag-bg); color: var(--tag-fg); }
.pill.lb-bad { background: #f4e3e2; color: var(--red-dk); }

/* ---- Steps (email templates) ---- */
.steps { padding: 10px 20px 20px; display: grid; gap: 12px; }
.step { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--paper); }
.step-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.step-head strong { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.step-actions { display: flex; gap: 6px; }
.step-subject { margin-top: 6px; font-weight: 600; }
.step-body { color: var(--text-3); margin-top: 4px; font-size: 13.5px; }

/* ---- Conversation panel ---- */
.conv-head { display: flex; gap: 24px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.conv-name { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.conv-head .fields { margin: 0; flex: 1; }
.conv-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.conv { padding: 16px 20px; display: grid; gap: 12px; }
.conv .msg { margin: 0; border-left: 3px solid var(--line); }
.conv .msg.out { border-left-color: var(--text); }
.conv .msg.in { border-left-color: var(--ok); background: #f3f6f2; }
.conv .msg-subject { font-weight: 600; margin-top: 4px; }
.conv .msg pre { max-height: 360px; overflow: auto; }

/* ---- Modals ---- */
.modal { position: fixed; inset: 0; background: rgba(20, 19, 15, .55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 300; }
.modal-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-frame);
  max-width: 760px; width: 100%; max-height: 88vh; overflow: auto; padding: 24px 28px; position: relative; }
.modal-box.wide { max-width: 900px; }
.modal-box h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; text-transform: none; letter-spacing: -.01em; color: var(--text); margin: 0 0 16px; }
.modal-box .close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; color: var(--text-3); padding: 2px 8px; }
.modal-box .close:hover { color: var(--text); background: none; }
.preview-meta div { margin-bottom: 3px; }
.preview-meta .muted { display: inline-block; width: 90px; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; margin-top: 12px; }
.seg button { border: 0; background: transparent; padding: 5px 14px; font-size: 12.5px; color: var(--text-3); }
.seg button.active { background: var(--text); color: var(--bg); }
.preview-html { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 10px; background: #fff; }
.preview-text, .msg pre { white-space: pre-wrap; font: 13px/1.6 var(--mono); margin: 10px 0 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 12px 0; }
.fields .muted { display: inline-block; min-width: 90px; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; background: var(--paper); }
.msg-head { display: flex; align-items: center; gap: 8px; }

/* ---- Editors ---- */
.three-col { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 16px; }
/* HTML source view: the same box as the editor, in a typeface that makes markup legible */
.editor.src { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px;
  line-height: 1.55; white-space: pre-wrap; resize: vertical; }
.editor-bar button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.editor-bar select { padding: 4px 8px; font-size: 12px; }
.editor-bar input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.editor { min-height: 220px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--paper); outline: none; line-height: 1.55; font-size: 14px; }
.editor:focus { border-color: var(--text); }
.editor p { margin: 0 0 10px; }
.sig-editor { min-height: 140px; }
.sig-editor img { max-width: 240px; height: auto; }
.ai-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.ai-box label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 4px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--contrast); color: var(--contrast-text); padding: 11px 18px; border-radius: var(--radius-pane); font-size: 13px;
  opacity: 0; pointer-events: none; transition: all .2s ease; max-width: 80vw; z-index: 400; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: #f4e3e2; color: var(--red-dk); border: 1px solid #e8c9c7; }

/* ---- Settings form ---- */
.setup-card { max-width: 780px; }
.section-head { margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.section-head:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.section-head .help { text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 400; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--text); }
.field .help { font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field select, .field textarea { width: 100%; }
.field textarea { min-height: 118px; }
.field.check { display: flex; align-items: flex-start; gap: 9px; }
.field.check input { margin-top: 3px; }
.field.check label { margin: 0; font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
[hidden] { display: none !important; }

/* ---- Narrow screens: rail becomes a top strip ---- */
@media (max-width: 760px) {
  .shell { flex-direction: column; height: auto; overflow: visible; }
  .sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; gap: 6px; border-right: 0; border-bottom: 1px solid var(--rail-line); align-items: center; }
  .sidebar h2, .side-sec { width: 100%; margin: 0; }
  .rail-tag, .rail-tag-sub { display: none; }   /* the rail is a one-line strip here */
  .nav-spacer, .user-box { display: none; }
  .main { height: auto; padding: 20px 16px; }
  .page-head h1 { font-size: 30px; }
  .two-col, .three-col { grid-template-columns: 1fr; }
}

/* ---- Patterns & Forecast panels ---- */
.pat, .fc { padding: 16px 20px 22px; }
.pat .findings { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.pat .findings h3, .fc h3, .pat h3 { margin: 0 0 8px; }
.pat .findings li { margin: 5px 0; color: var(--text); font-size: 14px; }
.pat .findings ul { margin: 0; padding-left: 18px; }
.pat .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pat .box, .fc .box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pat table, .fc table { font-size: 13px; }
.pat th, .fc th { position: static; }
.pat .num, .fc .num { text-align: right; white-space: nowrap; }
.meter { display: inline-block; height: 8px; border-radius: 999px; background: var(--tag-bg); width: 90px; vertical-align: middle; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--text); border-radius: 999px; }
.meter.acc i { background: var(--accent); }
.conf { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-left: 6px; }
.heat { display: grid; grid-template-columns: 44px repeat(24, 1fr); gap: 2px; font-size: 10px; color: var(--text-3); }
.heat .lab { padding-right: 4px; text-align: right; line-height: 14px; }
.heat .c { height: 14px; border-radius: 2px; background: var(--tag-bg); }
.heat .h { text-align: center; }
.learn { padding: 30px 20px; text-align: center; color: var(--text-2); }
.learn b { font-family: var(--serif); font-size: 22px; font-weight: 500; display: block; margin-bottom: 6px; color: var(--text); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kpis div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--paper); }
.kpis b { font-family: var(--serif); font-size: 26px; font-weight: 500; display: block; color: var(--text); }
.kpis span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.band-high { color: var(--ok); font-weight: 600; } .band-medium { color: var(--amber); font-weight: 600; } .band-low, .band-none { color: var(--text-3); font-weight: 600; }
.why { color: var(--text-3); font-size: 12px; }
.pat .empty-note, .fc .empty-note { color: var(--text-3); font-size: 13px; }
@media (max-width: 900px) { .pat .grid2, .kpis { grid-template-columns: 1fr; } }

/* ---- engagement, verification, scheduled jobs, A/B (competitor-gap slice) ---- */
.pill.eng { background: var(--tag-bg); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pill.eng i { font-size: 10px; margin-right: 4px; }
.st-bounced { color: var(--red-dk); font-weight: 600; }
.dot.st-bounced { background: var(--red-dk); }
.jobs { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.job { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.job i { color: var(--accent); width: 14px; text-align: center; }
.job strong { color: var(--text); }
.ab-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 14px 4px; margin-bottom: 14px; background: var(--bg-2); }
.ab-box .editor { min-height: 120px; background: var(--paper); }

/* ---- home: one donut per category (dataviz method: thin ring, 2px gaps, legend = direct labels, text in text tokens) ---- */
.donuts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.donut { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; min-width: 0; }
.donut .eyebrow { margin-bottom: 8px; }
.donut .eyebrow i { margin-right: 5px; color: var(--text-3); }
.donut-row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.donut svg { flex: none; }
.donut .hero { font-family: var(--serif); font-size: 30px; font-weight: 500; fill: var(--text); }
.donut .hero-sub { font-family: var(--sans); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; fill: var(--text-3); }
.donut .slice { transition: opacity var(--transition); cursor: pointer; }
.donut svg:hover .slice:not(.on) { opacity: .35; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-2); min-width: 0; width: 100%; }
.legend li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; cursor: default; }
.legend li.on { background: var(--bg-2); }
.legend li i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend li a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.legend li a:hover { text-decoration: underline; }
.legend li b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }
.donut-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--line-2); padding-top: 8px; }
.donut-foot b { color: var(--text); font-weight: 600; }
.donut-foot .hot, .donut-foot .hot b { color: var(--accent); }
.viz-tip { position: fixed; z-index: 400; background: var(--contrast); color: var(--contrast-text); border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.4; pointer-events: none; max-width: 250px; }
.viz-tip b { display: block; font-weight: 600; margin-bottom: 2px; }
.viz-tip span { display: block; opacity: .85; }
.attention { display: flex; flex-direction: column; }
.att { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); font-size: 13.5px; }
.att:last-child { border-bottom: 0; }
.att:hover { background: var(--bg-2); }
.att i { color: var(--text-3); width: 16px; text-align: center; }
.att-name { font-weight: 600; flex: 1; }
.att-bits { color: var(--text-2); }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.toolbar #q { width: 200px; }
@media (max-width: 1200px) { .donuts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .donuts { grid-template-columns: 1fr 1fr; } }

/* ---- subscription & team ---- */
.eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); font-weight: 600; margin-bottom: 6px; }
.plan-now { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.plan-facts { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.plan-facts li { margin: 3px 0; }
.plan-usage { min-width: 280px; max-width: 360px; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.plan-usage b { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--text); line-height: 1; }
.meter.big { width: 100%; height: 10px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; padding: 16px 20px; }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
.plan-card.current { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.plan-card .price { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.plan-card ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); flex: 1; }
.plan-card li { margin: 4px 0; }
.plan-card .badge, .plan-card button { align-self: flex-start; }
.plan-card li.need { color: var(--text); }
.plan-facts li.muted { color: var(--text-3); }

/* ---- EXPERIMENT: black left rail with light type ----------------------------
   Scoped to .sidebar so the rest of the skin is untouched. Everything that sits
   on the rail has to flip: the active pill inverts (cream fill, dark text), and
   the brand red, green and amber are lifted — at 2.4–3.1:1 on black the originals
   are unreadable. Delete this block to go back to the grey rail. */
.sidebar {
  --rail-bg: #14130f;
  --rail-line: rgba(255, 255, 255, .10);
  --rail-muted: #9a978f;
  --rail-accent: #e8676d;   /* the brand red is 2.8:1 here; this is the same lift the logout link takes */
  background: var(--rail-bg); border-right-color: var(--rail-line);
}
.sidebar h2 { color: #fff; }
.sidebar .three { color: var(--rail-accent); }   /* so the 3 and the three R's are one red */
.sidebar .nt-navlink { color: rgba(255, 255, 255, .85); }
.sidebar .nt-navlink:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .nt-navlink.active { background: var(--bg); color: var(--text); }   /* inverted pill */
.sidebar .nt-navlink .cnt { background: rgba(255, 255, 255, .13); color: #cfccc4; }
.sidebar .nt-navlink.active .cnt { background: rgba(10, 10, 10, .10); color: var(--text-2); }
.sidebar .nt-navlink.active .dot { box-shadow: 0 0 0 2px rgba(10, 10, 10, .25); }
.sidebar .user-box { border-top-color: var(--rail-line); }
.sidebar .user-box .email { color: #fff; }
.sidebar .chip { background: transparent; border-color: rgba(255, 255, 255, .20); color: #cfccc4; }
.sidebar .chip.warn { background: transparent; border-color: rgba(232, 103, 109, .45); color: #e8676d; }
.sidebar .logout, .sidebar .side-cta { color: #e8676d; }
.sidebar .logout:hover, .sidebar .side-cta:hover { color: #f28d92; }
/* status colours lifted for the dark surface (contrast 5.8–8.6:1) */
.sidebar .st-replied { color: #7bbf97; }
.sidebar .st-waiting { color: #d9a441; }
.sidebar .st-due { color: #e8676d; }
.sidebar .st-new, .sidebar .st-done { color: #a5a29a; }
.sidebar .dot.st-new, .sidebar .dot.st-done { background: rgba(255, 255, 255, .28); }
.sidebar .dot.st-dnc { background: rgba(255, 255, 255, .18); }

/* ---- rail that gets out of the way (icon strip + hover overlay) ------------
   The strip keeps its 60px of layout while the expanded rail floats above the
   work area, so opening it never reflows the middle. Expansion rides a JS class
   rather than :hover — that gives it hover-intent (brushing past doesn't open
   it) and keeps the cascade unambiguous. */
.shell { position: relative; }
.rail-top { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.rail-mark { flex: 1; min-width: 0; }
.rail-top h2 { margin: 0 6px 0; }
/* the three R's and the promise, under the wordmark */
.rail-tag { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--rail-accent); margin: 3px 6px 0; }
.rail-tag-sub { font-size: 11.5px; color: var(--rail-muted); margin: 2px 6px 0; }
.wm-min { display: none; }
.rail-pin { margin-top: 3px; background: none; border: 0; padding: 4px 6px; border-radius: var(--radius-sm);
  color: var(--rail-muted); font-size: 12px; line-height: 1; transition: var(--transition); }
.rail-pin:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.rail-pin.on { color: var(--accent); transform: rotate(-30deg); }

.shell.rail-min { padding-left: 60px; }
/* the two states are mutually exclusive selectors, not a specificity contest */
.shell.rail-min > .sidebar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 40;
  transition: width var(--transition);
}
.shell.rail-min > .sidebar:not(.wide) { width: 60px; padding: 22px 8px; }
.shell.rail-min > .sidebar.wide { width: 264px; padding: 22px 16px; box-shadow: var(--shadow-frame); }

/* narrow: icons only. Labels are bare text nodes, so zero the link's own
   font-size and hand it back to the icon. */
.shell.rail-min > .sidebar:not(.wide) .nt-navlink { font-size: 0; gap: 0; justify-content: center; padding: 9px 0; }
.shell.rail-min > .sidebar:not(.wide) .nt-navlink i { font-size: 15px; width: auto; }
.shell.rail-min > .sidebar:not(.wide) .nt-navlink .dot { margin: 0; width: 10px; height: 10px; }
.shell.rail-min > .sidebar:not(.wide) .nt-navlink .cnt,
.shell.rail-min > .sidebar:not(.wide) .user-box,
.shell.rail-min > .sidebar:not(.wide) .rail-pin,
.shell.rail-min > .sidebar:not(.wide) .rail-tag,
.shell.rail-min > .sidebar:not(.wide) .rail-tag-sub,
.shell.rail-min > .sidebar:not(.wide) .wm-full { display: none; }
.shell.rail-min > .sidebar:not(.wide) .wm-min { display: inline; }
.shell.rail-min > .sidebar:not(.wide) .side-sec { font-size: 0; padding: 0; margin: 10px 0; }
.shell.rail-min > .sidebar:not(.wide) .rail-top { justify-content: center; margin-bottom: 14px; }
.shell.rail-min > .sidebar:not(.wide) .rail-top h2 { flex: none; margin: 0; font-size: 20px; }
.att-more { color: var(--text-2); font-weight: 600; justify-content: flex-start; }
.att-more:hover { color: var(--text); }