:root {
  --navy: #01275c;
  --navy-2: #0b3a7a;
  --red: #e6092c;
  --ink: #1d2939;
  --muted: #667085;
  --line: #e2e7ed;
  --bg: #f7f8fa;
  --card: #ffffff;
  --good: #067647;
  --good-bg: #ecfdf3;
  --warn: #b54708;
  --warn-bg: #fffaeb;
  --bad: #b42318;
  --bad-bg: #fef3f2;
  --radius: 12px;
  font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
/* The hidden attribute must win over any display rule below (.chips is flex, for one). */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); }
html { scroll-padding-top: var(--header-h, 96px); }
body { font-size: 15px; line-height: 1.5; }
a { color: var(--navy-2); }
h1 { font-size: 26px; margin: 8px 0 6px; color: var(--navy); }
h2 { font-size: 17px; margin: 0 0 10px; color: var(--navy); }
h3 { font-size: 14px; margin: 16px 0 6px; color: var(--navy); text-transform: uppercase; letter-spacing: .4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---- header ---- */
/* Pinned: the menu, the data date and any corporate-password banner stay in view while scrolling.
   Fixed rather than sticky, which some browsers drop; js/format.js sets --header-h from the header's
   real height (it grows when the menu wraps or the banner shows) and the page is pushed down by it. */
.topbar { background: var(--navy); color: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 50; box-shadow: 0 1px 4px rgba(1, 39, 92, .18); }
body { padding-top: var(--header-h, 96px); }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.brand-mark { background: var(--red); width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 16px; }
.brand-sub { font-weight: 500; opacity: .75; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: #dbe4f3; text-decoration: none; padding: 6px 12px; border-radius: 8px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.who-num { opacity: .7; }
.who form { margin: 0; }
.link-btn { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.asof { background: var(--navy-2); color: #dbe4f3; font-size: 12.5px; padding: 5px 16px; text-align: center; }
.asof-note { opacity: .75; margin-left: 8px; }
.master-banner { background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; padding: 6px 16px; text-align: center; border-bottom: 1px solid #fedf89; }

.page { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; }
/* ---- buttons & forms ---- */
.btn { display: inline-block; border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 10px; padding: 9px 16px;
       font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--navy); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: #c40726; }
.btn.danger { color: var(--bad); border-color: #fda29b; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; }
select { max-width: 100%; } /* a select is as wide as its longest option; never wider than its box (2026-11-04, phone overflow) */
textarea { resize: vertical; }
label { display: block; font-weight: 600; font-size: 13.5px; color: var(--navy); margin: 0 0 12px; }
label input, label textarea, label select { margin-top: 4px; font-weight: 400; }
.inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.inline-form label { margin: 0; display: flex; align-items: center; gap: 6px; }
.inline-form input, .inline-form select { width: auto; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; align-items: end; }
.switch { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); }
.switch input { width: auto; margin-top: 4px; }

.alert { background: var(--bad-bg); color: var(--bad); border: 1px solid #fecdca; border-radius: 10px; padding: 10px 14px; }
.notice { background: var(--good-bg); color: var(--good); border: 1px solid #abefc6; border-radius: 10px; padding: 10px 14px; }
.empty { color: var(--muted); padding: 24px; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---- login ---- */
.login { max-width: 420px; margin: 48px auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.login form { margin-top: 16px; }
.login .btn.primary { width: 100%; }

/* ---- chat ---- */
/* The chat is fixed between the header and the bottom of the window, so the page itself never scrolls:
   only the conversation does, and the ask box and Send button stay pinned at the bottom. */
.chat { background: #fff; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column;
        position: fixed; top: calc(var(--header-h, 96px) + 16px); bottom: 16px; left: 16px; right: 16px;
        max-width: 1168px; margin: 0 auto; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.chips, .chat-form, .chat-status { flex-shrink: 0; }
.msg { max-width: 860px; border-radius: 14px; padding: 10px 14px; overflow-wrap: anywhere; }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 4px 0 8px; padding-left: 22px; }
.msg h4 { margin: 8px 0 4px; color: var(--navy); }
.msg-user { align-self: flex-end; background: var(--navy); color: #fff; white-space: pre-wrap; }
.msg-assistant { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
.msg-card { align-self: stretch; padding: 0; max-width: none; }
.msg-notice { align-self: center; color: var(--muted); font-size: 13px; }
.msg-error { align-self: flex-start; background: var(--bad-bg); color: var(--bad); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 12px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; color: var(--navy); cursor: pointer; }
.chip:hover { border-color: var(--navy-2); background: #f2f6fb; }
.chip-more { border-style: dashed; color: var(--muted); }
/* The Prompts panel: the whole catalog by category, ordered for the consultant, above the ask box. */
.chat.prompts-open #chips { display: none; }
.chat.prompts-open .prompt-panel { max-height: 70%; }
.prompt-panel .chip { text-align: left; }
.prompt-panel { flex-shrink: 0; max-height: 50%; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg); }
.pp-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px 6px; }
.pp-head .muted { flex: 1; }
.pp-body { overflow-y: auto; padding: 0 18px 12px; }
.pp-cat { margin-top: 8px; }
.pp-cat h3 { font-size: 14px; margin: 0; color: var(--navy); }
.pp-cat p { margin: 0 0 6px; }
.pp-prompts { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-badge { font-size: 11px; background: #eff8ff; color: #175cd3; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.pp-item { display: inline-flex; align-items: center; gap: 2px; }
.pp-remove { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.pp-remove:hover { color: var(--bad); background: var(--bad-bg); }
.chat-form { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea { min-height: 44px; }
.chat-form .btn { white-space: nowrap; }
.chat-status { margin: 0; padding: 0 18px 10px; font-size: 13px; color: var(--muted); min-height: 1.5em; }
/* An email version written in the chat: read-only, with the button that turns it into an Outbox draft. */
.email-preview { align-self: flex-start; max-width: 860px; width: 100%; background: #fff; border: 1px solid var(--line);
                 border-left: 4px solid var(--navy-2); border-radius: var(--radius); padding: 14px 16px; }
.email-preview .ep-label { text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.email-preview .ep-subject { margin: 2px 0 8px; color: var(--navy); }
.email-preview .ep-body { background: var(--bg); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.email-preview .ep-body p { margin: 0 0 8px; }
.email-preview .ep-body p:last-child { margin-bottom: 0; }
.email-preview .ph { background: #eff8ff; color: #175cd3; border-radius: 6px; padding: 0 5px; font-size: .92em; }
.email-preview > p { margin: 0 0 10px; }
.ep-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-link { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #f2f6fb; text-decoration: none; }
/* The lists behind an answer's figures: one row each, with View, Email and Save. */
.list-card { align-self: flex-start; max-width: 860px; width: 100%; background: #fff; border: 1px solid var(--line);
             border-left: 4px solid var(--navy-2); border-radius: var(--radius); padding: 10px 16px; }
.list-card .lc-label { text-transform: uppercase; letter-spacing: .4px; font-weight: 600; margin-bottom: 2px; }
.lc-row { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--line); }
.lc-label + .lc-row { border-top: 0; }
.lc-name { flex: 1 1 260px; min-width: 0; }
.lc-name a { color: var(--navy); text-decoration: none; }
.lc-name a:hover { text-decoration: underline; }
.lc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lc-msg:empty { display: none; }
.lc-msg { flex-basis: 100%; }
/* The assistant's offers of what to do next: buttons; with several, they're toggled and then run with Do. */
.options-card { align-self: flex-start; max-width: 860px; display: flex; flex-direction: column; gap: 6px; }
.oc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-chip { border: 1px solid var(--navy-2); background: #fff; color: var(--navy); border-radius: 999px; padding: 7px 14px;
           font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.oc-chip:hover { background: #f2f6fb; }
.oc-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.oc-chip[aria-pressed="true"]::before { content: "✓ "; }
.oc-go { align-self: flex-start; }
.options-card.used .oc-chip { border-color: var(--line); color: var(--muted); cursor: default; background: #fff; }
.options-card.used .oc-label { display: none; }
/* My Lists */
.saved-lists .rename { margin-top: 2px; }
.saved-lists .rename summary { cursor: pointer; display: inline; color: var(--muted); font-size: 12.5px; list-style: none; }
.saved-lists .rename summary::-webkit-details-marker { display: none; }
.rename-form { display: flex; gap: 6px; margin-top: 6px; }
.rename-form input { width: auto; flex: 1; min-width: 160px; padding: 5px 8px; }
.list-actions { white-space: nowrap; }
.list-actions form { display: inline; margin: 0; }
.list-msg { margin: -4px 0 10px; }
.pager { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.limited-banner { background: var(--warn-bg); color: var(--warn); font-size: 13px; padding: 6px 16px; text-align: center; border-top: 1px solid #fedf89; }

/* ---- tables ---- */
/* A long, wide table scrolls inside a box no taller than the screen, so its sideways scrollbar is always in view (not
   below the last row) and the header row stays put. The scrollbar is drawn, so it shows on Macs and phones too. */
.table-wrap { overflow: auto; max-height: calc(100vh - 140px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  scrollbar-width: auto; scrollbar-color: #9aa8bb #eef1f5; }
.table-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.table-wrap::-webkit-scrollbar-track { background: #eef1f5; }
.table-wrap::-webkit-scrollbar-thumb { background: #9aa8bb; border-radius: 6px; border: 2px solid #eef1f5; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #6f7f96; }
.table-wrap table.data thead th { position: sticky; top: 0; z-index: 1; }
/* The floating horizontal scrollbar for wide tables (js/tablescroll.js, 2026-11-06): pinned to the bottom of the window while
   the table is on screen; over the table's own bar when its bottom is in view. */
.hscroll-host { position: relative; }
.hscroll { position: sticky; bottom: 0; z-index: 4; height: 14px; margin-top: -14px; overflow-x: auto; overflow-y: hidden;
  background: #eef1f5; border-radius: 0 0 var(--radius) var(--radius); }
.hscroll[hidden] { display: none; }
.hscroll > div { height: 1px; }
.hscroll::-webkit-scrollbar { height: 12px; }
.hscroll::-webkit-scrollbar-track { background: #eef1f5; }
.hscroll::-webkit-scrollbar-thumb { background: #9aa8bb; border-radius: 6px; border: 2px solid #eef1f5; }
.hscroll::-webkit-scrollbar-thumb:hover { background: #6f7f96; }
body.has-sel-bar .hscroll { bottom: 88px; }
@media (max-width: 640px) {
  .hscroll { bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-sel-bar .hscroll { bottom: calc(140px + env(safe-area-inset-bottom)); }
}
table.data { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.data th { text-align: left; background: #f2f4f7; color: var(--navy); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data.compact td, table.data.compact th { padding: 5px 8px; }
.msg .table-wrap { margin: 6px 0; }

/* ---- reports ---- */
.report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.report-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.report-card strong { color: var(--navy); }
.report-card span { color: var(--muted); font-size: 13.5px; }
.report-card:hover { border-color: var(--navy-2); }
.report-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.report-bar .btn { margin-left: auto; }
/* The filter bar above a report: one GET form, wraps on narrow screens. */
.report-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; background: #fff; border: 1px solid var(--line);
                  border-radius: var(--radius); padding: 10px 14px; margin: 12px 0 4px; }
.report-filters label { margin: 0; font-size: 12.5px; }
.report-filters label input, .report-filters label select { margin-top: 2px; width: auto; font-size: 14px; padding: 6px 8px; }
.report-filters label.grow { flex: 1; min-width: 180px; }
.report-filters label.grow input { width: 100%; }
.report-filters .aud-range input { width: 64px; }
.report-filters .switch { align-items: center; font-size: 13.5px; padding-bottom: 6px; }
.report-filters .switch input { margin-top: 0; }
.table-find { width: auto; min-width: 200px; padding: 6px 10px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; }
/* Tiles that filter the list below (Milestones, ?ms=): selected one outlined, the rest dimmed a little (2026-11-06). */
a.metric-filter { color: inherit; text-decoration: none; cursor: pointer; }
a.metric-filter:hover { border-color: var(--navy); }
a.metric-filter.selected { border: 2px solid var(--navy); padding: 9px 13px; background: #eef4fb; }
.metrics:has(.metric-filter.selected) a.metric-filter:not(.selected) { opacity: .65; }
.metric-filter-note { margin: 6px 0 10px; }
.metric-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.metric-value { font-size: 22px; color: var(--navy); line-height: 1.3; }
.metric-note { font-size: 12.5px; color: var(--muted); }
/* Sortable column headers: the whole header is the button. */
table.data th:has(.th-sort) { padding: 0; }
.th-sort { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.th-sort:hover { background: #e7ecf3; }
.th-sort:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.sort-mark::after { content: "↕"; opacity: .3; font-size: 11px; }
th[aria-sort="ascending"] .sort-mark::after { content: "▲"; opacity: .8; }
th[aria-sort="descending"] .sort-mark::after { content: "▼"; opacity: .8; }
.sorting table.sortable { opacity: .5; }
.crumbs { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- person ---- */
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; }
.tag { background: #f2f4f7; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.tag-good { background: var(--good-bg); color: var(--good); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-bad { background: var(--bad-bg); color: var(--bad); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.card.narrow { max-width: 720px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
dt { color: var(--muted); }
dd { margin: 0; }
.chain { margin: 0; padding-left: 20px; font-size: 14px; }
ul.plain { margin: 0; padding-left: 18px; }

/* ---- drafts ---- */
.draft-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.draft-card.loading { color: var(--muted); }
.draft-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.draft-aud { margin: 8px 0 2px; }
.draft-excl summary { cursor: pointer; color: var(--muted); font-size: 13.5px; }
.draft-excl ul { margin: 4px 0; font-size: 13.5px; }
.draft-preview { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; background: var(--bg); }
.draft-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.draft-edit { margin: 8px 0; }
.audience { margin: 8px 0 4px; }
.aud-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; align-items: end;
            background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.aud-form .draft-buttons, .aud-form .switch, .aud-form .aud-list { grid-column: 1 / -1; }
.aud-list .muted { display: block; font-weight: 400; margin-top: 4px; }
.aud-form .aud-consent { grid-column: 1 / -1; }
.pick { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.pick-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pick-bar input[type=search] { flex: 1; min-width: 180px; width: auto; }
.pick-list { max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.pick-row { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--line);
            font-weight: 400; color: var(--ink); cursor: pointer; }
.pick-row:last-child { border-bottom: 0; }
.pick-row input { width: auto; margin-top: 4px; }
.pick-row:hover { background: #f2f6fb; }
.policy-agree { background: var(--warn-bg); border: 1px solid #fedf89; border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.policy-agree p { margin: 0 0 6px; }
.policy-text h4 { font-size: 16px; }
.aud-range { display: flex; gap: 6px; }
.aud-range input { min-width: 0; }
.draft-msg { margin: 8px 0 0; color: var(--navy); }
.issues { background: var(--warn-bg); border-radius: 10px; padding: 8px 12px 8px 28px; font-size: 13.5px; margin: 8px 0; }
.status { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #f2f4f7; color: var(--navy); white-space: nowrap; }
.status-draft { background: var(--good-bg); color: var(--good); }
.status-flagged, .status-review { background: var(--warn-bg); color: var(--warn); }
.status-blocked, .status-rejected { background: var(--bad-bg); color: var(--bad); }
.status-sent, .status-sending, .status-approved { background: #eff8ff; color: #175cd3; }
.outbox { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
/* Each Outbox row is a link to the draft's own page (/Outbox/{id}). */
.outbox-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px;
               display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: inherit; text-decoration: none; }
.outbox-item:hover { border-color: var(--navy-2); background: #f8fafd; }
.outbox-item:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.outbox-item strong { color: var(--navy); }
.outbox-open { margin-left: auto; font-size: 22px; line-height: 1; color: var(--muted); }
.draft-page { max-width: 960px; margin-top: 12px; }
.review { border-top: 1px solid var(--line); padding: 12px 0; }
.review summary { cursor: pointer; }
.admin-quote { margin: 6px 0; padding: 8px 12px; background: var(--bg); border-left: 3px solid var(--line); white-space: pre-wrap; }

/* ---- loading feedback ---- */
/* A thin bar under the top of the window while a page loads (js/format.js shows it on navigation). */
.nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--red);
                box-shadow: 0 0 6px rgba(230, 9, 44, .6); opacity: 0; transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity .2s; }
.nav-progress.on { opacity: 1; width: 85%; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--navy);
           border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- person side panel, opened from links in the chat ---- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(1, 39, 92, .25); z-index: 60; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%); background: var(--bg); z-index: 61;
          display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(1, 39, 92, .18); animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.drawer-head .grow { flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.drawer-body h1 { font-size: 22px; }
.drawer-body .cols { grid-template-columns: 1fr; }
.drawer-loading { color: var(--muted); padding: 24px 4px; }

/* ---- report timeline (timeline.js), after the Audit Portal's analytics ---- */
.tl-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.tl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tl-ranges { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-range { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--navy); text-decoration: none; background: #fff; }
.tl-range:hover { border-color: var(--navy); }
.tl-range.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tl-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.tl-custom input[type="date"] { width: auto; padding: 4px 8px; font-size: 13px; }
.tl-caption { margin: 8px 0 10px; }
.tl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tl-tile { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--ink); }
.tl-tile:hover { border-color: #9ec5f4; }
.tl-tile.is-selected { border-color: #2a78d6; box-shadow: inset 0 0 0 1px #2a78d6; }
.tl-tile-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tl-tile-value { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.tl-tile-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tl-delta { font-size: 13px; font-weight: 600; }
.tl-delta.is-good { color: var(--good); }
.tl-delta.is-bad { color: var(--bad); }
.tl-delta.is-neutral { color: var(--ink); }
.tl-delta.is-none { color: var(--muted); font-weight: 400; }
.tl-delta-note { color: var(--muted); font-weight: 400; }
.tl-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); margin: 6px 0; }
.tl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tl-key { display: inline-block; width: 18px; border-top: 2px solid; }
.tl-key.dashed { border-top-style: dashed; }
.tl-chart-box { position: relative; height: 280px; }
.tl-chart-box[hidden], .tl-legend[hidden] { display: none; }
.tl-table { max-height: 320px; overflow-y: auto; }
.tl-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tl-note { margin: 8px 0 0; }

/* ---- team inbox ---- */
/* Fixed between the header and the bottom of the window like the chat: the list and the open conversation
   scroll on their own, and the reply box stays at the bottom. On a phone only one of the two shows. */
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--red);
             color: #fff; font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center; }
.nav-count[hidden] { display: none; }
.inbox { position: fixed; top: calc(var(--header-h, 96px) + 8px); bottom: 8px; left: 16px; right: 16px; max-width: 1400px; margin: 0 auto;
         display: grid; grid-template-columns: 290px 1fr; grid-template-rows: auto minmax(0, 1fr);
         background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
/* The header both Messages tabs share: Conversations | Sent email and the one Reach out button. */
.msgs-head { grid-column: 1 / -1; padding: 8px 16px 0; border-bottom: 1px solid var(--line); }
.msgs-head .acct-tabs { margin: 0; border-bottom: 0; }
.msgs-one { grid-template-columns: 1fr; }
.outbox-scroll { overflow-y: auto; min-height: 0; padding: 14px 18px; }
.outbox-intro { margin-top: 0; }
.inbox-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.inbox-tools { display: flex; gap: 8px; padding: 12px; }
.inbox-tools .btn { flex: 1; text-align: center; }
.inbox-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; gap: 4px; }
.ib-tab { border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); padding: 8px 10px; cursor: pointer; border-bottom: 2px solid transparent; }
.ib-tab.active { color: var(--navy); border-bottom-color: var(--red); }
.inbox-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; min-height: 0; }
.ib-empty { padding: 16px; }
.ib-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line);
           background: #fff; padding: 10px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.ib-item:hover { background: #f8fafc; }
.ib-item.active { background: #f2f6fb; }
.ib-item.unread .ib-item-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: 1px; }
.ib-item.unread .ib-item-snippet { color: var(--ink); }
.ib-item-top { display: flex; gap: 8px; align-items: baseline; }
.ib-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); }
.ib-item-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-item .tag { align-self: flex-start; font-size: 11.5px; }
.inbox-note { padding: 10px 14px; margin: 0; border-top: 1px solid var(--line); }
.inbox-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ib-placeholder { margin: auto; padding: 24px; text-align: center; }
.ib-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
.ib-head-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-head-title strong { color: var(--navy); }
.ib-back { display: none; }
.ib-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.ib-msg { max-width: 82%; align-self: flex-start; overflow-wrap: anywhere; }
.ib-msg.mine { align-self: flex-end; }
.ib-msg-name { color: var(--navy); font-weight: 600; margin-bottom: 2px; }
.ib-msg-body { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.ib-msg.mine .ib-msg-body { background: var(--navy); border-color: var(--navy); color: #fff; }
.ib-msg.mine .ib-msg-body a { color: #fff; }
/* A library flyer or video on its own line: its picture, linked, with the words centered under it (inbox.js render). */
.ib-preview { display: block; margin: 6px 0; text-align: center; }
.ib-preview img { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ib-preview-link { display: block; font-weight: 600; }
.ib-msg-meta { margin-top: 2px; }
.ib-msg.mine .ib-msg-meta { text-align: right; }
.ib-foot { border-top: 1px solid var(--line); padding: 6px 14px; }
.ib-foot > p { margin: 0 0 8px; }
/* The writer is folded into one bar until it is opened (inbox.js drawConversation). */
.ib-open-writer { display: block; width: 100%; text-align: left; padding: 7px 14px; font: inherit; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 22px; cursor: pointer; }
.ib-open-writer:hover { border-color: var(--navy); color: var(--navy); }
.ib-open-writer[hidden], .ib-writer[hidden] { display: none; }
.ib-writer-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.ib-compose { display: flex; gap: 10px; align-items: flex-end; }
.ib-compose textarea { min-height: 44px; }
.ib-result:empty { display: none; }
.ib-result { margin-bottom: 8px; }
.ib-panel { padding: 16px 20px; overflow-y: auto; }
.ib-panel h2 { margin-top: 0; }
.ib-chosen { margin: 0 0 12px; }
.ib-people { list-style: none; margin: -6px 0 12px; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.ib-people:empty { display: none; }
.ib-people li + li { border-top: 1px solid var(--line); }
.ib-person { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 8px 12px; font: inherit; cursor: pointer; }
.ib-person:hover { background: #f2f6fb; }
.ib-levels { display: flex; gap: 12px; }
.ib-levels label { flex: 1; }

@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; top: calc(var(--header-h, 96px) + 8px); bottom: 8px; left: 8px; right: 8px; border-radius: 12px; }
  .inbox.show-main .inbox-side { display: none; }
  .inbox:not(.show-main) .inbox-main { display: none; }
  .inbox-side { border-right: 0; }
  .ib-back { display: inline-block; }
  .ib-msg { max-width: 88%; }
}

@media (max-width: 640px) {
  /* Phones: a compact header - logo and Sign out on one row, the nav as one row that scrolls sideways, a one-line date bar. */
  .topbar-inner { padding: 8px 12px 6px; gap: 6px 12px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 24px; height: 24px; font-size: 14px; }
  .brand-sub, .who-name { display: none; }
  .who { margin-left: auto; font-size: 13px; gap: 8px; }
  .nav { order: 3; flex-basis: calc(100% + 24px); flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex-shrink: 0; white-space: nowrap; padding: 5px 10px; font-size: 14px; }
  .asof { padding: 3px 12px; font-size: 12px; }
  .asof-note { display: none; }
  .chat-log { padding: 12px; }
  .chat { top: calc(var(--header-h, 96px) + 8px); bottom: 8px; left: 8px; right: 8px; border-radius: 12px; }
  .chat-form { padding: 10px 12px; }
  .msg { max-width: 100%; }
  .report-bar .btn { margin-left: 0; }
}

/* ---- My Account (2026-10-23) ---- */
.acct-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 6px 0 18px; }
.acct-tabs a { padding: 8px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.acct-tabs a:hover { color: var(--navy); }
.acct-tabs a.active { color: var(--navy); border-bottom-color: var(--red); font-weight: 600; }
/* The second row inside an Account group (Pay | Direct deposit…), 2026-11-05. */
.acct-tabs:has(+ .acct-subtabs) { margin-bottom: 10px; }
.acct-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.acct-subtabs a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; background: #fff; }
.acct-subtabs a:hover { color: var(--navy); }
.acct-subtabs a.active { color: #fff; background: var(--navy); border-color: var(--navy); font-weight: 600; }
.acct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.acct-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; text-decoration: none; color: inherit; }
.acct-card:hover { border-color: var(--navy-2); }
.acct-label { text-transform: uppercase; letter-spacing: .4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.acct-big { font-size: 22px; color: var(--navy); overflow-wrap: anywhere; }
.acct-big.neg, td.neg { color: var(--bad); }
.acct-go { margin-top: auto; padding-top: 6px; color: var(--navy); font-weight: 600; font-size: 13.5px; }
.acct-status > span:not(.pill) { display: none; }
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acct-head h2 { margin-bottom: 2px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: #f2f4f7; color: #344054; margin-right: 6px; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.info { background: #eff8ff; color: #175cd3; }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.warn-text { color: var(--warn); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot th { background: #f9fafb; border-top: 1px solid var(--line); border-bottom: 0; }
.older-row td { color: var(--muted); font-style: italic; }
.payments { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.payment + .payment { border-top: 1px solid var(--line); }
.payment summary { display: grid; grid-template-columns: 14px 120px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.payment summary::-webkit-details-marker { display: none; }
.payment summary::before { content: "▸"; color: var(--muted); }
.payment[open] summary::before { content: "▾"; }
.payment summary:hover { background: #f9fafb; }
.payment .pay-amt { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 90px; }
.payment.voided .pay-amt { text-decoration: line-through; color: var(--muted); }
.payment.voided .pay-kind { color: var(--bad); }
.pay-body { padding: 0 14px 12px; }
/* Pay at a glance (R2, 2026-11-06): Business, My Account, Pay. */
.pay-glance { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; background: var(--card); }
.pay-glance p { margin: 0; }
.pay-glance p + p { margin-top: 6px; }
.pay-glance.on-hold { border-color: var(--bad); }
.pg-hold { color: var(--bad); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-owed strong { font-size: 1.15em; font-variant-numeric: tabular-nums; }
.pg-owed strong.neg { color: var(--bad); }
.site-links { padding-left: 0; }
.site-links li { display: grid; grid-template-columns: 230px 1fr; gap: 2px 10px; padding: 4px 0; }

.site-links a { overflow-wrap: anywhere; }
.site-form label { margin-bottom: 14px; }
.prefix-field { display: flex; align-items: center; gap: 6px; margin: 4px 0 4px; font-weight: 400; }
.prefix-field input { flex: 1; min-width: 0; }
.hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.field-err { display: block; font-weight: 500; font-size: 13px; color: var(--bad); margin-top: 4px; }
.site-form input[aria-invalid="true"] { border-color: var(--bad); }
.site-form > .hint, .site-form > .field-err { margin: 0 0 14px; }
.form-note { margin: 4px 0 10px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }
.dd-table th { width: 140px; background: #f9fafb; }
.dd-status span:not(.pill) { display: block; margin-top: 4px; }
.dd-change { margin-top: 14px; }
.dd-change .btn { margin-bottom: 8px; }
@media (max-width: 640px) {
  .payment summary { grid-template-columns: 14px 1fr auto auto; }
  .payment .pay-ref { display: none; }
  .site-links li { grid-template-columns: 1fr; }
}
.dd-steps { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 13.5px; }
.dd-steps li { margin: 3px 0; }
.dd-steps li.current { color: var(--navy); font-weight: 600; }
.dd-steps li.done { text-decoration: line-through; }
.dd-type { border: 0; padding: 0; margin: 0 0 14px; }
.dd-type legend { font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 6px; }
.dd-type .switch { display: inline-flex; margin: 0 18px 0 0; }
.login .notice { margin: 10px 0; }
.rules-intro { max-width: 860px; margin: -6px 0 16px; }
.rules-status { list-style: none; margin: 0; padding: 0; }
.rules-status li { padding: 8px 12px; border-left: 3px solid var(--line); margin-bottom: 6px; background: #f9fafb; border-radius: 0 8px 8px 0; }
.rules-status li.good { border-left-color: var(--good); }
.rules-status li.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.rules-status li.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.rules-table td:first-child { min-width: 220px; }
.rules-list { margin: 12px 0 0; }
.rules-list > li { padding: 5px 0; line-height: 1.5; }
.rules-list ul { margin: 4px 0 0; padding-left: 22px; }

/* ---- list reach: Email and Team message counts (2026-10-24) ---- */
.ch-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ch-n { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #eef2f7;
  color: var(--navy); font-size: 12px; font-weight: 600; text-align: center; }
.btn.disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: auto; }
.btn.disabled .ch-n { background: #f2f4f7; color: var(--muted); }
.lc-row .ch-note { flex-basis: 100%; }
.report-bar + .ch-note, #reach-note { margin: -4px 0 10px; }
/* A figure that is a group of people filters the report when chosen (timeline.js applySelect). */
.tl-tile-filters:not(.is-selected) .tl-tile-sub::after { content: " · show these people"; color: var(--navy-2); }
.tl-tile-filters.is-selected .tl-tile-sub::after { content: " · shown below"; color: var(--navy-2); }
/* While a chosen figure reloads the report: the tile shows a spinner and the list area dims under a notice. */
.tl-tile.is-loading { cursor: progress; }
.tl-tile-spinner { width: 12px; height: 12px; float: right; margin: 2px 0 0 6px; }
.report-updating .report-bar, .report-updating .table-wrap, .report-updating .pager, .report-updating #reach-note {
  opacity: .35; pointer-events: none; transition: opacity .15s; }
.report-updating-note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: flex; gap: 10px;
  align-items: center; background: var(--navy); color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, .25); }
.report-updating-note .spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* ---- busy feedback on every page (busy.js, 2026-10-24) ---- */
.busy-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--red); opacity: 0;
  box-shadow: 0 0 8px rgba(227, 6, 19, .5); pointer-events: none; transition: opacity .25s; }
.busy-bar.on { opacity: 1; animation: busy-grow 12s cubic-bezier(.08, .8, .25, 1) forwards; }
@keyframes busy-grow { 0% { width: 0; } 8% { width: 30%; } 30% { width: 60%; } 100% { width: 94%; } }
.btn.is-busy, button.is-busy, a.is-busy { cursor: progress; }
.btn.is-busy::before, button.is-busy:not(.tl-tile)::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.nav a.is-busy { background: rgba(255,255,255,.16); color: #fff; }
.nav a.is-busy::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid rgba(255,255,255,.9); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.acct-tabs a.is-busy, .acct-card.is-busy, .report-card.is-busy { color: var(--navy); border-color: var(--navy-2); }
.acct-card.is-busy, .report-card.is-busy { opacity: .7; }
.busy-note { bottom: 24px; }
@media (prefers-reduced-motion: reduce) { .busy-bar.on { animation: none; width: 60%; } }
/* The assistant's status line while it works: a spinner before "Thinking…", "Looking through your organization…". */
.chat-status.is-working { color: var(--navy); }
.chat-status .spinner { width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; }
/* Team Messaging: one click to the consultant's sponsor (or nearest active upline). */
.ib-sponsor { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; margin: 0 12px 6px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #f7f9fc; color: inherit; text-decoration: none; }
.ib-sponsor:hover { border-color: var(--navy-2); background: #eef3fa; }
.ib-sponsor-label { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.ib-sponsor strong { color: var(--navy); }
.ib-sponsor .muted { grid-column: 1; }
.ib-sponsor-go { grid-column: 2; grid-row: 2 / span 2; align-self: center; color: var(--navy); font-weight: 600; font-size: 13px; }
.ib-sponsor-note { margin: 0 12px 6px; }

/* ---- Today panel beside the assistant (2026-10-25) ---- */
.home { position: fixed; top: calc(var(--header-h, 96px) + 16px); bottom: 16px; left: 16px; right: 16px; max-width: 1168px; margin: 0 auto;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; }
.home .chat { position: static; max-width: none; margin: 0; min-height: 0; }
.today { background: #fff; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; min-height: 0; }
.today-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 6px; }
.today-head h2 { margin: 0; font-size: 16px; }
.today-body { overflow-y: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.today-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fbfcfe; }
.today-item p { margin: 4px 0 8px; }
.ti-head { display: flex; gap: 8px; align-items: baseline; }
.ti-head strong { color: var(--navy); font-size: 14px; }
.ti-count { flex-shrink: 0; min-width: 28px; text-align: center; border-radius: 999px; padding: 1px 8px; background: var(--red); color: #fff;
  font-weight: 700; font-size: 13px; }
.ti-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.today-clear { color: var(--good); background: var(--good-bg); border-radius: 10px; padding: 10px 12px; margin: 4px 0; font-size: 14px; }
.today-toggle { display: none; }
/* Stacked (tablets and phones): Today is a one-line bar above the chat. Opened (today.js), it covers the chat at full
   height instead of sharing the screen with it; the bar closes it again. The chat always has the whole screen to itself. */
@media (max-width: 900px) {
  .home { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); left: 8px; right: 8px; bottom: 8px; gap: 8px; }
  .today { border-radius: 12px; }
  .today.open { position: absolute; inset: 0; z-index: 5; box-shadow: 0 8px 28px rgba(1, 39, 92, .18); }
  .today-head { padding: 0; }
  .today-head h2, #today-refresh { display: none; }
  .today-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit; cursor: pointer;
    padding: 10px 14px; color: var(--navy); text-align: left; }
  .today-toggle strong { font-size: 15px; }
  .today-toggle .tt-sum { flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .today-toggle .tt-chev { transition: transform .15s; color: var(--muted); }
  .today-toggle .tt-close { display: none; color: var(--navy-2); font-size: 13.5px; font-weight: 600; }
  .today.open .tt-chev { display: none; }
  .today.open .tt-close { display: inline; }
  .today:not(.open) .today-body { display: none; }
  .today.open .today-head { border-bottom: 1px solid var(--line); }
  .today.open .today-body { padding-top: 8px; }
}
@media (max-width: 640px) {
  .home { top: calc(var(--header-h, 96px) + 8px); }
  .home .chat { border-radius: 12px; }
  /* The suggested questions: one row that scrolls sideways, not a stack that pushes the ask box off the screen. */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip { flex-shrink: 0; white-space: nowrap; }
  /* The ask box takes the full width; its buttons sit underneath, Send on the right. */
  .chat-form { flex-wrap: wrap; gap: 8px; }
  .chat-form textarea { flex: 1 1 100%; }
  .chat-form .btn { padding: 7px 12px; font-size: 14px; }
  #chat-send { margin-left: auto; padding: 7px 20px; }
  .chat-status { padding: 0 12px 6px; min-height: 0; }
  .chat-status:empty { display: none; }
}

/* ---- Follow-ups: private contacts, notes and reminders (followup.js, 2026-10-25) ---- */
.fu-chip { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; vertical-align: middle; border: 0; background: none;
  padding: 0; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.fu-chip > span { border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); background: #fff; color: var(--navy-2); }
.fu-chip:hover > span { border-color: var(--navy-2); }
.fu-chip:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; border-radius: 999px; }
.fu-chip .fu-add { color: var(--muted); border-style: dashed; opacity: .75; }
.fu-chip:hover .fu-add { opacity: 1; }
.fu-chip .fu-last { background: var(--good-bg); color: var(--good); border-color: #abefc6; }
.fu-chip .fu-due { background: var(--warn-bg); color: var(--warn); border-color: #fedf89; font-weight: 600; }
.fu-chip .fu-over { background: var(--bad-bg); color: var(--bad); border-color: #fecdca; font-weight: 600; }
.fu-chip .fu-later { color: var(--navy-2); }
.fu-dialog { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  box-shadow: 0 12px 40px rgba(1, 39, 92, .22); }
.fu-dialog::backdrop { background: rgba(1, 39, 92, .28); }
.fu-title { margin: 0 0 4px; }
.fu-form p { margin: 0 0 10px; }
.fu-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fu-kind { border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.fu-kind:hover { border-color: var(--navy-2); }
.fu-kind[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.fu-field { margin: 0 0 10px; }
.fu-field > span { display: block; margin-bottom: 4px; }
.fu-remind-row { display: flex; flex-wrap: wrap; gap: 0 10px; }
.fu-remind-row .fu-field { flex: 1 1 140px; }
.fu-current { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; }
.fu-clear-wrap { display: inline-flex; gap: 4px; align-items: center; margin: 0 0 0 8px; font-weight: 400; color: var(--navy); }
.fu-clear-wrap input { width: auto; }
.fu-msg { margin: 0 0 8px; color: var(--good); }
.fu-msg.alert-text { color: var(--bad); }
.fu-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fu-history h3 { margin: 14px 0 6px; }
.fu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fu-list li { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; }
.fu-k { font-weight: 600; color: var(--navy); font-size: 13.5px; }
.fu-text { white-space: pre-wrap; font-size: 13.5px; margin-top: 2px; }
.fu-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px; }
.fu-del:hover { color: var(--bad); }
.fu-panel { margin: 0 0 16px; max-width: 720px; }
.fu-panel .fu-actions { justify-content: flex-start; }
/* Who did what on a Today item (milestones). */
.ti-details { list-style: none; margin: -2px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ti-details li { line-height: 1.35; }
.ti-details a { color: var(--navy); font-weight: 600; text-decoration: none; }
.ti-details a:hover { text-decoration: underline; }
.ti-more { display: block; margin: -4px 0 8px; color: var(--navy-2); }
/* "Milestones you track" on the Milestones report (milestones.js). */
.ms-manage { margin-top: 18px; }
.ms-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ms-list li { padding: 6px 10px; border-left: 3px solid var(--line); background: #f9fafb; border-radius: 0 8px 8px 0; }
.ms-list .tag { font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.ms-add { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.ms-add label { margin: 0; font-size: 12.5px; display: flex; flex-direction: column; }
.ms-add label select, .ms-add label input { margin-top: 2px; width: auto; font-size: 14px; padding: 6px 8px; }
.ms-add label input[type="number"] { width: 90px; }
.ms-add label.grow { flex: 1; min-width: 180px; }
.ms-add label.grow input { width: 100%; }
.ms-msg { color: var(--good); margin: 6px 0 0; }
.ms-msg.alert-text { color: var(--bad); }

/* ---- Select rows and act on them (select.js, 2026-10-25) ---- */
.sel-box { width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--navy); cursor: pointer; flex: none; }
th .sel-box { vertical-align: middle; }
table.data tr.is-selected td { background: #eef3fb; }
.sel-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 40; width: min(980px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(1, 39, 92, .2); }
.sel-count { font-weight: 600; color: var(--navy); }
.sel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sel-note { flex-basis: 100%; margin: 0; }
body.has-sel-bar main.page { padding-bottom: 120px; }
@media (max-width: 640px) {
  .sel-bar { bottom: 8px; padding: 8px 10px; }
  .sel-actions { margin-left: 0; }
}
/* The select-all box sits beside the first column's sort button, not above it. */
table.data th:has(> .sel-all) { display: table-cell; white-space: nowrap; }
table.data th:has(> .sel-all.sel-box) .th-sort { display: inline-flex; width: auto; padding-left: 0; }
table.data th > .sel-all { margin-left: 10px; }

/* ---- Call and text coach on the person page (coach.js, 2026-10-25) ---- */
.coach { margin: 0 0 16px; max-width: 720px; }
.coach-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.coach-bar label { margin: 0; font-size: 12.5px; display: flex; flex-direction: column; }
.coach-bar select { margin-top: 2px; width: auto; font-size: 14px; padding: 6px 8px; }
.coach-out:not(:empty) { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.coach-about { margin: 0 0 8px; }
.coach-script h3 { margin: 12px 0 4px; }
.coach-script ul { margin: 0; padding-left: 20px; }
.coach-script li { margin: 3px 0; }
.coach-say { background: #f6f9fd; border-left: 3px solid var(--navy-2); border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 4px 0 8px;
  white-space: pre-wrap; }
.coach-goal { margin: 0 0 4px; }
.coach-replies { display: block; margin: 0; }
.coach-replies dt { font-weight: 600; color: var(--navy); margin-top: 6px; }
.coach-replies dd { margin: 2px 0 0 14px; padding: 0; border: 0; }
.coach-replies dt { padding: 0; border: 0; }
.coach-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.coach-text hr { border: 0; border-top: 1px dashed var(--line); margin: 12px 0; }
.alert-text { color: var(--bad); }
/* "Your plan for today" at the top of the Today panel (today.js, GamePlanService). */
.today-plan { border: 1px solid #c9d8ee; background: linear-gradient(180deg, #f3f7fd, #fff); border-radius: 12px; padding: 10px 12px; }
.tp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tp-head strong { color: var(--navy); font-size: 14px; }
.tp-intro { margin: 4px 0 6px; color: var(--navy); }
.tp-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.tp-steps li { font-size: 13.5px; line-height: 1.35; }
.tp-steps .tp-title { display: block; font-weight: 600; }
.tp-steps .tp-title a, .tp-steps .tp-title .link-btn { color: var(--navy); text-align: left; font-weight: 600; }
.tp-cheer { margin: 8px 0 0; color: var(--good); }
/* One Today list (today.js, 2026-11-05): a plan step about a group carries its count and buttons; empty plan box hidden. */
.today-plan:empty { display: none; }
.tp-head .tp-intro { margin: 0 0 6px; }
.tp-step .ti-count { display: inline-block; min-width: 0; margin-right: 4px; font-size: 12px; vertical-align: 1px; }
.tp-step .ti-actions { margin: 6px 0 2px; }
.tp-step .ch-note { margin: 2px 0 0; }
.tp-loading { margin: 0; }
.sh-rest { margin-top: 8px; }
.sh-rest summary { cursor: pointer; color: var(--navy); }

/* ---- Header search, sections and hubs (2026-10-26) ---- */
.hsearch { position: relative; flex: 0 1 180px; margin-left: auto; }
@media (max-width: 1320px) and (min-width: 641px) { .brand-sub { display: none; } }
.hsearch input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; padding: 7px 12px; border-radius: 999px; font-size: 14px; }
.hsearch input::placeholder { color: #c8d4e8; }
.hsearch input:focus { background: #fff; color: var(--navy); outline: none; border-color: #fff; }
.hsearch-results { position: absolute; top: calc(100% + 6px); left: 0; width: min(420px, 92vw); z-index: 60; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(1, 39, 92, .2); max-height: 60vh; overflow-y: auto; padding: 4px; }
.hs-item { display: block; padding: 8px 10px; border-radius: 8px; color: var(--navy); text-decoration: none; }
.hs-item:hover, .hs-item.is-active { background: #eef3fb; }
.hs-item strong { font-weight: 600; }
.hs-empty, .hs-more { margin: 0; padding: 8px 10px; }
/* Pages in the search results (search.js PAGES): a "Go to" group above the people. */
.hs-group { margin: 0; padding: 8px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hs-page { display: flex; align-items: center; gap: 8px; }
.hs-go { color: var(--muted); font-weight: 700; }
.hs-item.is-active .hs-go, .hs-page:hover .hs-go { color: var(--red); }
.topbar-inner > .who { margin-left: 0; }
.section-h { margin: 22px 0 10px; font-size: 16px; }
.section-h .muted { font-weight: 400; margin-left: 6px; }
a.metric-link { text-decoration: none; color: inherit; }
a.metric-link:hover { border-color: var(--navy-2); }
.metric-value.metric-text { font-size: 18px; }
@media (max-width: 640px) {
  .hsearch { order: 4; flex: 1 1 100%; margin-left: 0; }
  .topbar-inner > .who { margin-left: auto; }
  .hsearch input { padding: 6px 12px; }
}
/* Person page: the action bar and the timeline (2026-10-26). */
.person-actions { margin: 0 0 16px; max-width: 920px; }
.pa-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-about { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 400; color: var(--muted); }
.pa-about select { width: auto; font-size: 13.5px; padding: 4px 8px; }
.pa-tel { display: none; }
@media (max-width: 640px) { .pa-tel { display: inline-block; } .pa-bar .btn { padding: 8px 12px; font-size: 14px; } }
.person-timeline { margin: 0 0 16px; max-width: 920px; }
.tle-list { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tle { position: relative; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }
.tle::before { content: ""; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); border: 2px solid #fff; }
.tle-date { flex: 0 0 110px; color: var(--muted); font-size: 13px; }
.tle-text { flex: 1 1 260px; }
.tle-contact::before { background: var(--good); }
.tle-note::before { background: var(--navy-2); }
.tle-reminder::before { background: var(--warn); }
.tle-billing-bad::before, .tle-cancelled::before { background: var(--bad); }
.tle-milestone::before, .tle-rank::before { background: #e3a008; }
.tle-joined::before { background: var(--navy); }
.tle-more { margin-top: 8px; }
/* ---- Prospects (2026-10-26) ---- */
.prospect-add { margin: 0 0 12px; max-width: 760px; }
.prospect-add > summary { cursor: pointer; }
.pa-form { margin-top: 12px; }
.pf-row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.pf-row > label { flex: 1 1 200px; }
.pf-row > label.pf-short { flex: 0 0 90px; }
.prospect-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pipe-col { background: #eef2f7; border-radius: 12px; padding: 8px; min-height: 80px; }
.pipe-head { font-size: 14px; margin: 2px 4px 8px; display: flex; justify-content: space-between; }
.pipe-count { background: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--muted); }
.pipe-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.pipe-name { font-weight: 600; color: var(--navy); text-decoration: none; }
.pipe-name:hover { text-decoration: underline; }
.pipe-chip { align-self: flex-start; font-size: 12px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); color: var(--navy-2); }
.pipe-chip.due { background: var(--warn-bg); color: var(--warn); border-color: #fedf89; }
.pipe-chip.over { background: var(--bad-bg); color: var(--bad); border-color: #fecdca; }
.pipe-chip.last { background: var(--good-bg); color: var(--good); border-color: #abefc6; }
.pipe-stage select { font-size: 12.5px; padding: 3px 6px; width: auto; }
.pipe-empty { margin: 4px; }
.pipe-enrolled .pipe-head { color: var(--good); }
@media (max-width: 900px) { .pipeline { grid-template-columns: minmax(0, 1fr); } }
.prospect-stage, .prospect-edit { margin: 0 0 16px; max-width: 920px; }
.prospect-edit > summary { cursor: pointer; }
.stage-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.enroll-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.enroll-form label { margin: 0; display: flex; flex-direction: column; }
.enroll-form input { width: 160px; }

/* ---- The bell (alerts.js) and the phone tab bar (2026-10-26) ---- */
.alerts { position: relative; }
.alerts-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; }
.alerts-btn:hover, .alerts-btn[aria-expanded="true"] { background: rgba(255,255,255,.22); }
.alerts-count { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--navy); box-sizing: content-box; }
.alerts-count[hidden] { display: none; }
.alerts-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, 92vw); z-index: 60; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(1, 39, 92, .2); padding: 6px; }
.al-head { margin: 4px 8px 6px; font-weight: 700; color: var(--navy); font-size: 14px; }
.al-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--navy); text-decoration: none; font-size: 14px; }
.al-item:hover { background: #eef3fb; }
.al-n { min-width: 26px; text-align: center; border-radius: 999px; padding: 1px 6px; background: #eef2f7; font-weight: 700; font-size: 12.5px; }
.al-item.urgent .al-n { background: var(--red); color: #fff; }
.al-all { display: block; margin: 4px 8px 6px; font-size: 13px; }
.al-empty { margin: 8px; color: var(--good); font-size: 14px; }
.tabbar { display: none; }
@media (max-width: 640px) {
  .nav { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--line);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(1, 39, 92, .06); }
  .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--navy); }
  .tabbar a.active svg { color: var(--red); }
  .tab-count { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--red);
    color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
  .tab-count[hidden] { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Full-height screens stop above the tab bar. */
  .home, .inbox, .chat { bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .sel-bar { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .topbar-inner { gap: 6px 10px; }
  .alerts-btn { width: 32px; height: 32px; }
}
@media (max-width: 640px) {
  .alerts { margin-left: auto; }
  .topbar-inner > .who { margin-left: 0; }
}
@media (max-width: 640px) {
  /* The bell's list spans the screen under the header on a phone. */
  .alerts { position: static; }
  .alerts-panel { position: fixed; left: 8px; right: 8px; width: auto; top: calc(var(--header-h, 96px) - 6px); }
}

/* ---- welcome tour (js/tour.js) ---- */
/* The spotlight's shadow dims everything around what the step is about; the dim layer under it catches clicks. */
.tour-dim { position: fixed; inset: 0; z-index: 200; background: transparent; }
.tour-dim.dark { background: rgba(1, 20, 46, .55); }
.tour-spot { position: fixed; z-index: 201; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(1, 20, 46, .55);
  outline: 3px solid #fff; transition: left .2s, top .2s, width .2s, height .2s; }
.tour-card { position: fixed; z-index: 202; width: min(380px, calc(100vw - 32px)); background: #fff; border-radius: var(--radius);
  padding: 16px 18px 14px; box-shadow: 0 12px 32px rgba(1, 20, 46, .3); }
.tour-card h2 { margin: 0 0 6px; }
.tour-card p { margin: 0 0 10px; }
.tour-count { margin: 0 0 2px !important; }
.tour-asks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 12px; }
.tour-asks .chip { text-align: left; }
.tour-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-dots { display: inline-flex; gap: 4px; margin-right: auto; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-dot.on { background: var(--navy); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* ---- helpful empty screens: what the feature is for and the next step ---- */
.empty-help { border: 1px dashed var(--line); background: #fff; border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; }
.empty-help strong { color: var(--navy); }
.empty-help p { margin: 4px 0; }
.empty-help .btn { margin-top: 6px; }

/* ---- share tools (Pages/Share.cshtml, js/share.js) ---- */
.share .card { margin-bottom: 16px; }
.share-links { list-style: none; margin: 0; padding: 0; }
.share-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.share-link:first-child { border-top: 0; }
.sl-text { display: flex; flex-direction: column; min-width: 0; }
.sl-url { overflow-wrap: anywhere; }
.sl-actions { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.sl-qr { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sl-qr img { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.post-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.post-topics .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.post-write { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 4px; }
.post-write label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); flex: 1 1 220px; }
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.post-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fff; display: flex; flex-direction: column; }
.pc-text { white-space: pre-wrap; margin: 0 0 8px; flex: 1; }
.pc-check { color: var(--good); margin: 0 0 8px; }
.pc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-hint { margin: 6px 0 0; }
.pc-new { position: absolute; top: -9px; right: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.bizcard { display: flex; gap: 16px; align-items: center; justify-content: space-between; max-width: 520px; padding: 18px 20px; margin: 8px 0 12px;
  border-radius: 14px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--navy); box-shadow: 0 4px 14px rgba(1, 39, 92, .08); }
.bz-main { display: flex; flex-direction: column; min-width: 0; }
.flyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 10px 0 12px; }
.flyer-item { display: flex; flex-direction: column; gap: 4px; }
.flyer-item strong { color: var(--navy); margin-top: 4px; }
.flyer-item .form-actions { margin-top: 6px; }
.flyer-preview { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bz-brand { font-weight: 700; color: var(--red); font-size: 13px; letter-spacing: .3px; }
.bz-name { font-size: 22px; color: var(--navy); }
.bz-title { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.bz-line { font-size: 14px; overflow-wrap: anywhere; }
.bz-qr { flex: none; }
@media (max-width: 640px) {
  .share-link { grid-template-columns: minmax(0, 1fr); }
  .sl-actions { justify-content: flex-start; }
  .bz-qr { width: 88px; height: 88px; }
}

/* ---- Phones and touch tablets: 16px in every box (2026-10-28) ----
   iPhone and iPad Safari zoom the whole page into any field under 16px when it's tapped, and don't zoom back out.
   !important because several toolbars above set 12-14px on their own inputs. */
@media (max-width: 760px), (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---- Small additions (2026-10-28) ---- */
.login .remember { margin: 4px 0 12px; }
.login .remember .muted { display: block; }
.msg-error .msg-retry { display: block; margin-top: 8px; }
.ib-empty .ib-say-hi { margin-top: 10px; }
/* Share in the header on every page: a round icon beside the bell, like it. */
.top-share { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; flex-shrink: 0; }
.top-share:hover, .top-share.active { background: rgba(255,255,255,.22); }
.top-share-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-share + .alerts { margin-left: -12px; }
@media (max-width: 640px) {
  .top-share { width: 32px; height: 32px; margin-left: auto; }
  .top-share + .alerts { margin-left: -4px; }
}
/* The header row is full (five tabs, search, Share, bell): the name shows on hover over the number instead of taking room. */
.who-name { display: none; }

/* ---- Start here: a new consultant's first steps, at the top of Today (today.js, StartHereService; 2026-10-28) ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.start-here { border: 1px solid #c7d7f0; border-radius: 12px; padding: 12px; background: #f5f8fd; }
.sh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sh-head h3 { margin: 0; font-size: 15px; color: var(--navy); }
.sh-bar { height: 6px; border-radius: 999px; background: #dde6f3; overflow: hidden; margin: 6px 0; }
.sh-bar span { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.sh-fs { margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; }
.sh-fs p { margin: 2px 0 0; }
.sh-fs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--navy); }
.sh-fs .sh-bar span { background: var(--red); }
.sh-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-items: start; }
.sh-step > .btn { grid-column: 2; justify-self: start; margin-top: 2px; }
.sh-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8c6dc; display: grid; place-items: center; font-size: 12px;
  font-weight: 700; color: #fff; margin-top: 1px; box-sizing: border-box; }
.sh-step.done .sh-check { background: var(--good); border-color: var(--good); }
.sh-text { display: flex; flex-direction: column; font-size: 14px; }
.sh-text strong { color: var(--navy); font-weight: 600; }
.sh-step.done .sh-text strong { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.today-later { margin: 4px 2px; }

/* "Send them a link or flyer" on a prospect's page (Pages/Prospects/Detail, js/prospect-send.js). */
.send-panel { max-width: 720px; }
.send-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; margin-bottom: 10px; }
.send-row label { margin: 0; display: flex; flex-direction: column; font-size: 12.5px; min-width: 240px; }
.send-row select { margin-top: 2px; font-size: 14px; padding: 6px 8px; }
.send-detail { margin: 0 0 4px; word-break: break-all; }
.send-panel textarea { width: 100%; font: inherit; font-size: 14px; }
.send-actions { flex-wrap: wrap; }
.send-note:empty { display: none; }
.pipe-send { display: inline-block; margin: 2px 0 6px; color: var(--navy-2); }

/* ---- My progress (Pages/Progress, js/progress.js; 2026-10-29) ---- */
.top-share + .top-share { margin-left: -12px; }
@media (max-width: 640px) { .top-share + .top-share { margin-left: -4px; } }
/* Desktop: each header icon has its name in small type under it (owner, 2026-11-05: easier to use). The header is at
   most 1200px wide, so names beside the icons would wrap it; phones keep icons only, with title and aria-label. */
@media (min-width: 900px) {
  .top-share, .alerts-btn { width: auto; min-width: 46px; height: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 6px 4px; border-radius: 10px; background: transparent; color: #fff; text-decoration: none; }
  .top-share:hover, .top-share.active, .alerts-btn:hover, .alerts-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); }
  .top-share-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 11px; font-weight: 600; line-height: 1;
    white-space: nowrap; color: #dbe4f3; }
  .top-share + .top-share, .top-share + .alerts { margin-left: -14px; }
}
.progress-page { max-width: 900px; }
.gl-group { font-size: 15px; color: var(--navy); margin: 18px 0 8px; }
.goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.goal { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.goal.done { background: var(--good-bg); border-color: #abefc6; }
.gl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gl-head h3 { margin: 0; font-size: 15px; color: var(--navy); }
.gl-check { color: var(--good); margin-right: 6px; }
.gl-time { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--red); white-space: nowrap; }
.gl-bar { height: 8px; border-radius: 999px; background: #e3e9f3; overflow: hidden; margin-top: 4px; }
.gl-bar span { display: block; height: 100%; border-radius: 999px; background: var(--red); }
.goal.done .gl-bar span { background: var(--good); }
.gl-nums { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.gl-nums strong { color: var(--navy); }
.gl-line { margin: 4px 0 0; font-size: 14px; }
.goal p.muted { margin: 2px 0 0; }
.gl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gl-asof { margin-top: 14px; }
/* The daily card on Home. */
.gl-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(1, 39, 92, .45); display: grid; place-items: center; padding: 16px; }
.gl-card { background: var(--bg, #f6f8fb); border-radius: 16px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 16px; box-shadow: 0 20px 50px rgba(1, 39, 92, .3); }
.gl-card .goals { grid-template-columns: 1fr; }
.gl-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.gl-card-head h2 { margin: 0; font-size: 18px; color: var(--navy); }
.gl-close { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.gl-close:hover { background: #e3e9f3; }
.gl-card-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.goal h3, .gl-card h2, .gl-group { text-transform: none; letter-spacing: normal; }
/* Narrow phones: three header icons leave no room for the number on the first row; Sign out stays (the number is on Account). */
@media (max-width: 420px) { .who-num { display: none; } }
/* The countdown ticks every second: fixed-width digits so it doesn't jiggle. */
.gl-time { font-variant-numeric: tabular-nums; }
/* Compact goal tiles (owner, 2026-10-29). */
.goals { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.goal { padding: 8px 10px; gap: 2px; border-radius: 10px; }
.gl-head h3 { font-size: 14px; line-height: 1.3; }
.gl-time { font-size: 12px; }
.gl-bar { height: 6px; margin-top: 3px; }
.gl-nums { font-size: 12.5px; margin: 1px 0 0; }
.gl-line { font-size: 13px; line-height: 1.4; margin: 2px 0 0; color: var(--ink); }
.gl-actions { gap: 10px; margin-top: 2px; }
.gl-card { padding: 12px; }
.gl-card-head { margin-bottom: 8px; }
.goal .gl-line { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.gl-actions .link-btn { display: inline; width: auto; padding: 0; margin: 0; }
.gl-actions .link-btn { font-size: 12.5px; color: var(--navy); }
/* What a goal unlocks (plan figures, or the pool's share value). */
.gl-unlock { margin: 3px 0 0; padding: 4px 8px; border-radius: 8px; background: #fff7e6; color: #7a4b00; font-size: 12.5px; line-height: 1.35; }
.gl-unlock-label { font-weight: 700; }
.goal.done .gl-unlock { background: #fff; color: var(--good); }
/* Tighter tiles (owner, 2026-10-29): bar and "x of y" on one row, one line of AI advice. */
.gl-progress { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: 3px; }
.gl-progress .gl-bar { flex: 1 1 70px; margin: 0; }
.gl-progress .gl-nums { flex: 0 1 auto; margin: 0; font-size: 12px; color: var(--muted); }
.goal .gl-line { -webkit-line-clamp: 1; line-clamp: 1; font-size: 12.5px; }
.goal { gap: 3px; }

/* ---- Goal tiles in ameriplanusa.com's card style (owner, 2026-10-29): the website's own tokens - 14px radius,
   navy-tinted shadows, the #eef3f8 accent surface, #c9d8e8 hairlines, red eyebrows, navy headings. ---- */
.goals { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.goal { background: #fff; border: 1px solid #e2e7ed; border-radius: 14px; padding: 14px 16px; gap: 6px;
  box-shadow: 0 1px 2px rgb(1 39 92 / .06), 0 1px 3px rgb(1 39 92 / .1);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.goal:hover { box-shadow: 0 4px 6px -1px rgb(1 39 92 / .08), 0 2px 4px -2px rgb(1 39 92 / .06); transform: translateY(-2px); border-color: #c8d4e2; }
.goal.done { background: #fff; border-color: #abefc6; }
.gl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }
.gl-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--red); }
.goal h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--navy); text-transform: none; letter-spacing: normal; }
.gl-time { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: #eef3f8;
  color: var(--navy); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-time svg { width: 13px; height: 13px; }
.gl-time.urgent { background: #fdecef; color: var(--red); }
.gl-done { padding: 3px 9px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-size: 12px; font-weight: 700; }
.gl-progress { margin-top: 4px; }
.gl-bar { height: 8px; background: #eef3f8; border-radius: 999px; }
.gl-bar span { background: linear-gradient(90deg, var(--navy), var(--navy-2)); }
.goal.done .gl-bar span { background: var(--good); }
.gl-progress .gl-nums { font-size: 12.5px; color: #4a6a95; }
.gl-progress .gl-nums strong { color: var(--navy); font-size: 13.5px; }
.gl-unlock { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 8px 10px; border-radius: 10px;
  background: #eef3f8; border: 1px solid #c9d8e8; color: var(--navy); font-size: 12.5px; line-height: 1.4; }
.gl-unlock svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--red); }
.gl-unlock-label { font-weight: 800; text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; margin-right: 4px; color: var(--red); }
.goal.done .gl-unlock { background: var(--good-bg); border-color: #abefc6; color: var(--good); }
.goal.done .gl-unlock svg, .goal.done .gl-unlock-label { color: var(--good); }
.goal .gl-line { color: #4a6a95; font-size: 12.5px; }
.gl-actions { margin-top: 4px; padding-top: 8px; border-top: 1px solid #eef3f8; gap: 4px 16px; }
.gl-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; cursor: pointer; }
.gl-link:hover { color: var(--red); text-decoration: underline; }
.gl-card .goal:hover { transform: none; }
/* Tiles with more than one bar (the Elite Bonus: Personal, Team, Leader) - a small label leads each bar. */
.gl-step-label { flex: 0 0 58px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.gl-step-note { flex: 1 0 100%; font-size: 12px; line-height: 1.35; color: #4a6a95; }
.gl-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--navy); }

/* ---- Team Messaging AI help: "Write it with AI" under Who, "Polish it" under the message (js/inbox.js; 2026-10-29) ---- */
.ib-ai, .ib-polish { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; padding: 8px 10px;
  background: #eef3f8; border: 1px solid #c9d8e8; border-radius: 10px; }
.ib-ai-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-right: 4px; }
.ib-ai .chip, .ib-polish .chip { background: #fff; font-size: 12.5px; padding: 4px 10px; }
.ib-ai-own { display: inline-flex; gap: 6px; align-items: center; flex: 1 1 240px; }
.ib-ai-own input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; }
.ib-ai-msg { flex-basis: 100%; }
.ib-ai-msg:empty { display: none; }
.ib-foot .ib-polish { margin: 6px 0 0; }

/* New email (/Outbox/New, js/compose.js) */
.outbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.outbox-head p { margin: 0; flex: 1 1 320px; }
.compose { max-width: 820px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.compose h2 { font-size: 17px; margin: 4px 0 10px; color: var(--navy); }
.compose h2 + .cp-tabs { margin-top: 0; }
.compose h2:not(:first-child) { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.cp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px;
          color: var(--navy); cursor: pointer; }
.cp-tab:hover { background: #f2f6fb; }
.cp-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.cp-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
/* One picker: AI list as a button in it, with its own way back (2026-11-05). */
.cp-ai-go { margin: 0 0 10px; }
.cp-ai-back { display: inline-block; margin: 0 0 8px; }
.cp-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-search input { flex: 1 1 200px; width: auto; }
.cp-search select { flex: 0 1 180px; width: auto; min-width: 0; max-width: 100%; } /* long option names must not widen the page on a phone */
.cp-chosen { margin: 0 0 8px; }
.cp-people { max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.cp-people > p { margin: 0; padding: 10px; }
.cp-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line);
             font-weight: 400; color: var(--ink); cursor: pointer; }
.cp-person:last-child { border-bottom: 0; }
.cp-person:hover { background: #f2f6fb; }
.cp-person input { width: auto; margin: 0; align-self: center; }
.cp-person .cp-name { font-weight: 600; color: var(--navy); }
.cp-person.off { cursor: default; opacity: .6; }
.cp-person.off:hover { background: none; }
.cp-more { margin-top: 6px; }
.cp-ai-row { display: flex; gap: 8px; margin-top: 4px; }
.cp-ai-row input { flex: 1; min-width: 0; margin-top: 0; }
.cp-examples { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; }
.cp-examples .chip { font-size: 12.5px; padding: 4px 10px; }
.cp-ai-result:empty, .cp-result:empty { display: none; }
.cp-ai-result { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cp-panel label { margin-bottom: 8px; }
.cp-result { margin: 8px 0; }
.compose code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
.ed-polish .ib-polish { margin-top: 0; }
.cp-reach { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.cp-reach:empty { display: none; }
.cp-reach.ok { background: var(--good-bg); border-color: #abefc6; color: var(--ink); }
.cp-reach.ok strong { color: var(--good); }
.cp-reach.none { background: var(--warn-bg); border-color: #fedf89; color: var(--ink); }
.cp-reach.none strong { color: var(--warn); }
/* "Add a link or flyer" in the email editor (js/email-ai.js) */
.ea-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; padding: 8px 10px;
  background: #fff; border: 1px dashed #c9d8e8; border-radius: 10px; }
.ea-attach-label { color: var(--navy); }
.ea-chips { display: contents; }
.ea-chips.muted { display: inline; }
.ea-attach .chip { background: #fff; font-size: 12.5px; padding: 4px 10px; }
.ea-attach .chip.ea-flyer { background: #fdf2f4; border-color: #f6c6cf; }
.ea-attach .chip.ea-video { background: #eef3fb; border-color: #c9d8e8; }
.ea-attach .ib-ai-msg { flex-basis: 100%; }
/* The outreach check as a coach: the rules line while writing, and failures that lead with the fix. */
.rules-hint { margin: 0 0 8px; }
.coach { background: #f0f9f4; border: 1px solid #bbe3c8; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
.coach p { margin: 0 0 8px; color: var(--ink); }
.issues-fold { margin: 0 0 10px; }
.issues-fold summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.issues-fold .issues { margin-top: 6px; }

/* Attached links and flyers as chips under a message box (js/linkchips.js): the box holds only the words. */
.att-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.att-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.att-chips { display: contents; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; font-size: 13px; font-weight: 600;
  color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 16px; max-width: 100%; }
.att-chip.att-flyer { background: #fdf2f4; border-color: #f6c6cf; }
.att-chip.att-video { background: #eef3fb; border-color: #c9d8e8; }
.att-x { border: 0; background: none; font: inherit; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer;
  padding: 2px 6px; border-radius: 50%; }
.att-x:hover { color: var(--red); background: #fdf2f4; }

/* "How it will look" under a message being written (Fmt.livePreview): links clickable, website links filled in. */
.msg-preview { margin: 6px 0 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: 8px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-preview-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.msg-preview a { font-weight: 600; }
.msg-preview-note { margin: 6px 0 0; }
.msg-preview-note:empty { display: none; }
/* Grouped by the categories staff set on Links & flyers (039): one row per group. */
.ea-group { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ea-group-name { font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted); min-width: 92px; }
.ea-attach .ib-ai-msg:empty { display: none; }

/* AmeriPlan employees (Services/Auth/StaffAccounts.cs): the whole company */
.staff-badge { opacity: 1; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; }
.staff-banner { background: #eef3f8; color: var(--navy); font-size: 13px; font-weight: 600; padding: 6px 16px; text-align: center; border-bottom: 1px solid #c9d8e8; }
.home.staff-home { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .home.staff-home { grid-template-rows: minmax(0, 1fr); } }
/* Team Messaging announcement "Who": the same three ways as a new email (js/inbox.js) */
.ib-who { margin: 0 0 4px; }
.ib-who-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 6px; }
.ib-who .cp-panel select { width: 100%; }
.ib-who .ib-levels { margin-top: 8px; }
/* Links & flyers library (Pages/Library, AmeriPlan staff) */
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #fff; }
.lib-item.off { background: var(--bg); }
.lib-item summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; }
.lib-kind { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.lib-move { margin-left: auto; display: inline-flex; gap: 2px; }
.lib-move form { margin: 0; }
.lib-form { margin-top: 12px; }
.lib-flyer-settings { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 4px; margin: 4px 0 12px; display: grid; gap: 10px; }
.lib-flyer-settings legend { font-weight: 700; color: var(--navy); padding: 0 6px; }
.lib-flyer-settings textarea { font-size: 13px; }
.cp-people .cp-group-label { margin: 0; padding: 6px 10px; background: var(--bg); border-bottom: 1px solid var(--line); font-weight: 700; color: var(--navy); }
.lib-preview { margin: 0 0 10px; }
.lib-preview img, .lib-current { display: block; max-width: 320px; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0 6px; }
.lib-preview-note { margin: 0; }
.lib-nopic { color: var(--warn); background: var(--warn-bg); border: 1px solid #fedf89; border-radius: 8px; padding: 6px 10px; }
/* 039: drag handle, usage line, category/dates fields, history. */
.lib-drag { cursor: grab; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; user-select: none; }
.lib-item.dragging { opacity: .5; border-style: dashed; }
.lib-use { flex-basis: 100%; order: 1; }
.lib-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 10px; }
.lib-meta input { width: 100%; min-width: 0; }
.lib-history { margin-top: 10px; }
.lib-history ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.lib-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; background: var(--bg); border-radius: 8px; }
.lib-history form { margin: 0 0 0 auto; }

/* ---- Report cards (report-cards.js): below 640px each report row is a card instead of a table row ---------------- */
.cd-tools { display: none; }
table.data td.cd-x { display: none; }
table.data td.cd-title a.cd-name { color: inherit; text-decoration: none; } /* on desktop the name looks as before */

@media (max-width: 640px) {
  .cd-wrap { overflow: visible; max-height: none; border: 0; border-radius: 0; background: none; }
  table.cardable, table.cardable tbody { display: block; }
  table.cardable thead { display: none; }
  table.cardable tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 10px 12px; margin: 0 0 8px; }
  table.cardable tbody tr[hidden] { display: none; }
  table.cardable tr.is-selected { background: #eef3fb; border-color: #b9cdeb; }
  table.cardable td { display: none; border: 0; padding: 0; background: none; }
  table.cardable td.cd-id { display: flex; align-items: center; gap: 8px; order: 0; }
  table.cardable td.cd-id .sel-box { width: 20px; height: 20px; }
  table.cardable td.cd-id a { color: var(--muted); font-size: 13px; text-decoration: none; }
  table.cardable td.cd-id a::before { content: "#"; }
  /* The empty "+ Follow up" chip would crowd the card's top line; chips with a reminder or contact stay. */
  table.cardable td.cd-id .fu-chip.fu-empty { display: none; }
  table.cardable td.cd-title { display: block; order: 1; flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
  table.cardable td.cd-title a.cd-name { color: var(--navy); }
  table.cardable td.cd-fact, table.cardable tr.cd-open td.cd-more { display: flex; order: 2; width: 100%;
    justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; overflow-wrap: anywhere; }
  table.cardable tbody tr > td.cd-fact:empty, table.cardable tbody tr > td.cd-more:empty { display: none; }
  table.cardable td.cd-fact::before, table.cardable tr.cd-open td.cd-more::before {
    content: attr(data-label); color: var(--muted); flex: none; max-width: 45%; text-align: left; }
  /* A table with no Name column (months, levels): every row is labeled facts; the first one carries the card. */
  table.cardable tbody tr > td.cd-fact:first-child { font-weight: 600; }
  table.cardable td.cd-x { display: block; order: 9; width: 100%; }
  .cd-toggle { background: none; border: 0; color: var(--navy-2); font-size: 13px; padding: 4px 0; cursor: pointer; }
  .cd-toggle::after { content: "All details ▾"; }
  tr.cd-open .cd-toggle::after { content: "Fewer details ▴"; }
  .cd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; font-size: 14px; }
  .cd-tools .cd-selall { display: flex; align-items: center; gap: 8px; }
  .cd-tools .cd-selall input { width: 20px; height: 20px; accent-color: var(--navy); }
  .cd-tools .cd-sort { display: flex; align-items: center; gap: 6px; color: var(--muted); }
  .cd-tools .cd-sort select { max-width: 55vw; }
}

/* ---- One "Reach out" flow: the channel ticks on the Reach out page, and the draft card's team line ----------------- */
.cp-channels { margin: 10px 0 2px; padding: 10px 12px; background: #f4f7fb; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; gap: 8px; }
.cp-channels .cp-ch-label { margin: 0; }
.cp-channels .switch { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.cp-channels input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--navy); }
.cp-channels input:disabled + span { color: var(--muted); }
.draft-team { padding: 6px 10px; background: #f4f7fb; border-radius: 8px; }

/* ---- Reach out as three numbered steps (owner, 2026-11-03: make messaging easier to understand) ------------------- */
.how { margin: 4px 0 14px; padding: 10px 14px; background: #f4f7fb; border: 1px solid var(--line); border-radius: var(--radius); }
.how summary { cursor: pointer; color: var(--navy-2); font-weight: 600; }
.how ul { margin: 10px 0 2px; padding-left: 20px; display: grid; gap: 6px; }
.cp-step { display: flex; align-items: center; gap: 10px; margin: 26px 0 2px; }
.cp-step:first-of-type { margin-top: 8px; }
.stepnum { background: var(--navy); color: #fff; border-radius: 50%; width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.cp-stepsub { margin: 0 0 10px 36px; }
.cp-next-note { margin-top: 10px; }

/* ---- Messages: one Reach out button in the tab bar (Conversations | Sent email) ----------------------------------- */
.msg-tabs .msg-cta { margin-left: auto; align-self: center; margin-bottom: 6px; border-bottom: 0; color: #fff; font-weight: 600; padding: 7px 14px; }
.msg-tabs .msg-cta:hover { color: #fff; }

/* ---- Reach out: one message, or a personal message for each consultant (PersonalizedWriter) ----------------------- */
.cp-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.cp-mode-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; margin: 0; }
.cp-mode-opt:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #f4f7fb; }
.cp-mode-opt input { width: auto; margin-top: 3px; padding: 0; accent-color: var(--navy); flex: none; }
.cp-mode-opt > span strong { color: var(--navy); }
.cp-mode-opt > span .muted { font-weight: 400; }
.cp-mode-opt > span { display: flex; flex-direction: column; gap: 2px; }
.cp-pz-label { margin: 10px 0 6px; }
.cp-pz-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cp-pz-topic { cursor: pointer; }
.cp-pz-topic { margin: 0; font-weight: 500; }
.cp-pz-topic input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.cp-pz-topic:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.cp-pz-topic:has(input:focus-visible) { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.cp-pz-list { display: grid; gap: 10px; margin-top: 10px; }
.pz-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 10px 12px; }
.pz-card.pz-fix { border-color: #e7b75f; background: #fffaf0; }
.pz-card.pz-err { border-color: #e2a3a3; }
.pz-card.pz-off { opacity: .5; }
.pz-card.pz-off .pz-body { pointer-events: none; }
.pz-card.pz-sent { border-color: #9fd2b0; background: #f3fbf6; }
.pz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pz-head strong { color: var(--navy); }
.pz-state { flex: 1; }
.pz-ok { color: #1b7a3d; font-weight: 600; }
.pz-warn { color: #9a5b00; font-weight: 600; }
.pz-facts { margin: 2px 0 8px; }
.pz-body { width: 100%; }
.pz-note:empty { display: none; }
.pz-note { margin-top: 8px; }
.fs-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 12px 14px;
  background: #f4f7fb; border: 1px solid var(--line); border-radius: var(--radius); }
.fs-reach .muted { flex: 1 1 260px; }
.pz-card.pz-sent .pz-redo, .pz-card.pz-sent .pz-skip { display: none; }

/* Reach out: who it reaches, per channel (compose.js recount) */
.cp-reach .rch-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cp-reach .rch-line + .rch-line { margin-top: 4px; }
.cp-reach .rch-ch { min-width: 140px; font-weight: 600; color: var(--navy); }

/* Reach out > Pick people: browsing a group or list under Show, and selecting everyone in it */
.cp-allbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.cp-allbar .cp-all-on { color: #1b7a3d; font-weight: 600; }

/* Write it with AI: the topic that fits the chosen list (EmailAi.TopicsFor) */
.ea-topics { display: contents; }
.chip.ea-rec { border-color: var(--navy); color: var(--navy); font-weight: 600; background: #eef3fb; }

/* Reach out: the channel ticks under who it goes to */
.cp-reach:empty { display: none; }
.cp-channels .switch input:disabled + span { color: var(--muted); }
.cp-ch-each { margin: 0; }

/* Personal messages: how each card goes with the step 1 ticks */
.pz-how { color: var(--navy-2); }
.pz-card.pz-unreach { opacity: .55; }

/* A personal email's messages on its review card (drafts.js) */
.draft-personal { margin: 8px 0; padding: 8px 12px; background: #f4f7fb; border: 1px solid var(--line); border-radius: var(--radius); }
.draft-personal summary { cursor: pointer; }
.dp-list { display: grid; gap: 10px; margin-top: 10px; max-height: 480px; overflow-y: auto; }
.dp-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.dp-body { margin-top: 4px; font-size: 14px; }

/* The AI fixed it to pass the outreach check (CheckAndFixAsync) */
.coach.coach-fixed { border-color: #b9cdeb; background: #f4f7fb; }
.pz-orig { margin: 8px 0 0; padding: 8px 10px; background: #f8fafc; border-radius: 8px; }

/* "Message them": the quick sheet (quick.js) */
.qk-dialog { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: var(--ink); }
.qk-dialog::backdrop { background: rgba(1, 39, 92, .35); }
.qk-x { position: absolute; right: 12px; top: 6px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.qk-title { margin: 0 28px 10px 0; font-size: 18px; color: var(--navy); }
.qk-reach { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; background: #f4f7fb; border: 1px solid var(--line); border-radius: var(--radius); }
.qk-reach:empty { display: none; }
.qk-reach .switch { margin: 0; }
.qk-reach input { width: 18px; height: 18px; accent-color: var(--navy); }
.qk-topics { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.qk-topic.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.qk-status:empty, .qk-result:empty { display: none; }
.qk-check { margin: -4px 0 8px; }
/* "Send it?" before the quick sheet sends (quick.js askSend, 2026-11-05). */
.qk-confirm { margin: 8px 0; padding: 10px 14px; background: #eef4fb; border: 1px solid #b9cde4; border-radius: var(--radius); }
.qk-confirm p { margin: 0 0 6px; }
.qk-confirm .draft-buttons { margin-top: 8px; }
.qk-hint .link-btn { font-size: inherit; }
@media (max-width: 640px) { .qk-dialog { padding: 14px 14px; } .qk-dialog .draft-buttons .btn { flex: 1 1 auto; } }
.qk-hint { margin: -6px 0 8px; }
/* The sheet's buttons stay in reach while the message scrolls (phones especially). */
.qk-dialog > .draft-buttons { position: sticky; bottom: -18px; margin: 8px -20px -18px; padding: 10px 20px 14px; background: #fff; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .qk-dialog > .draft-buttons { bottom: -14px; margin: 8px -14px -14px; padding: 10px 14px 12px; } }

/* A chat answer's link to its list card (assistant.js linkLists): the card row flashes when jumped to. */
.lc-row.lc-flash { outline: 2px solid var(--navy-2); outline-offset: 2px; border-radius: 8px; transition: outline-color .3s; }

/* Company dashboard: the time-frame picker (reuses the report period buttons) */
.dash-period { margin: 4px 0 14px; }

/* ---- Phone and feedback polish (owner, 2026-11-05: easier to use) ----------------------------------------- */
/* The app's own pop-ups (js/ui.js): a sheet with two buttons, a text box, and a short toast. */
.ui-sheet { border: 0; border-radius: 14px; padding: 18px 18px 14px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(1, 39, 92, .25); }
.ui-sheet::backdrop { background: rgba(1, 27, 64, .45); }
.ui-sheet .ui-text { display: block; margin: 0 0 14px; font-size: 16px; color: var(--navy); line-height: 1.4; font-weight: 500; }
.ui-sheet .ui-input { margin-top: 10px; }
.ui-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 70; max-width: calc(100vw - 32px);
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(1, 39, 92, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ui-toast.error { background: var(--red); }
body.has-sel-bar .ui-toast, body.has-sel-bar .report-updating-note { bottom: 100px; }
/* Phones: the toast and the "updating" note sit above the tab bar (the note used to hide behind it). */
@media (max-width: 640px) {
  .ui-toast, .report-updating-note { bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; }
  body.has-sel-bar .ui-toast, body.has-sel-bar .report-updating-note { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
/* Touch screens: buttons and chips big enough for a finger (about 40px), text links with a bigger hit area. */
@media (max-width: 640px), (pointer: coarse) {
  .btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  button.chip, a.chip { min-height: 40px; font-size: 14px; }
  button.link-btn { padding: 8px 4px; margin: -8px -4px; }
  .tag, .status { font-size: 13px; }
}
/* table.stack-sm: on a phone each row is a card with its column names, not a table that scrolls sideways. */
@media (max-width: 640px) {
  .table-wrap:has(> table.stack-sm) { overflow: visible; max-height: none; border: 0; background: none; }
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  table.stack-sm td { border: 0; padding: 4px 0; text-align: left !important; }
  table.stack-sm td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
  table.stack-sm td:empty { display: none; }
}
/* Reasons that were only in a tooltip, written out on touch screens (tooltips never show there). */
.why-sm { display: none; }
@media (max-width: 640px), (pointer: coarse) { .why-sm { display: block; } }

/* R1 self-updating call list (2026-11-06): "How did it go?" after a Call tap, outcome tags in the history, done plan steps. */
.fu-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border: 1px solid #b9cde4;
  border-radius: var(--radius); background: #eef4fb; }
.fu-outcome[hidden] { display: none; }
.fu-outcome-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #e7f6ec; color: #116135; }
.tp-step.done .tp-title, .tp-step.done .tp-title a { color: var(--muted); text-decoration: line-through; }
.tp-step.done .tp-check { color: var(--good); font-weight: 700; margin-right: 4px; }
.fu-overdue { color: var(--red); font-weight: 600; }

/* Share "Your results" (R3, 2026-11-06): two tiles a row on a phone so Your links stays near the top. */
.share-results .metrics { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 600px) { .share-results .metrics { grid-template-columns: 1fr 1fr; } .share-results .metric-value { font-size: 20px; } }
/* Prospect card: "Looks like they joined as ..." with Mark enrolled. */
.pipe-match { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: #eef6ee; }
/* Announcement readers (R4, 2026-11-06): under the sender's message. */
.ib-readers { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.85); color: var(--text, #1d2939); text-align: left; }
.ib-readers p { margin: 0 0 6px; }
/* Report card counts (R4, 2026-11-06). */
.report-card .rc-n, .rc-n { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; text-align: center; vertical-align: middle; }
.report-card .rc-n.zero, .rc-n.zero { background: var(--line); color: var(--muted); }
/* Message sheet: "Have AI write each a personal message" above the Subject (2026-11-06). */
.qk-form .qk-each { align-self: flex-start; margin-bottom: 8px; }
.qk-form .qk-each[hidden] { display: none; }

/* ---- Texts (057, 2026-11-10): staff text messages through Twilio ---- */
.tx-off { margin: 0 12px 8px; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--ink); }
.tx-note { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--ink); }
.tx-problem { color: var(--bad); font-weight: 600; }
.ib-msg.mine .tx-problem { color: var(--bad); }
.tx-count { margin: 4px 0 0; }
.tx-then { background: #eef3f8; border: 1px solid #c9d8e8; border-radius: 10px; padding: 8px 12px; }
.tx-batch { max-width: 760px; }
.tx-batch .cp-step:first-child { margin-top: 0; }
.tx-reach { margin: 0 0 10px; }
.tx-phone-preview { max-width: 340px; padding: 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.tx-example { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; }
.tx-seg { margin-top: 6px; }
.tx-edit-fold { margin: 0 0 12px; }
.tx-edit-fold summary { cursor: pointer; color: var(--navy); font-weight: 600; margin-bottom: 8px; }
.tx-pass { color: var(--good); font-weight: 600; }
.tx-stats { margin: 0 0 8px; padding-left: 20px; }
.tx-mk-row { margin-top: 4px; }
.cp-sms-wrap { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.cp-sms-wrap[hidden], .cp-text-row[hidden] { display: none; }
.cp-sms-wrap label { margin-bottom: 4px; }
.cp-sms-count { margin: 0 0 4px; }
/* AI and link help under a text box (js/smsai.js, 2026-11-10). */
.sa-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.sa-panel { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.sa-panel .chip { margin: 2px 4px 2px 0; }
.sa-status { margin: 2px 0 6px; }
.tx-ai { padding: 0 2px; }
.qk-dialog .qk-off { display: none !important; }