/* Reviko Outreach Manager: design system (13 October 2026 redesign).
   Navy sidebar shell, calm light workspace, one accent (Reviko teal), soft depth, generous spacing. */
:root {
  --navy: #0B1A26; --navy-2: #12273A; --navy-3: #1B3349;
  --teal: #2F9A9D; --teal-600: #237F82; --teal-50: #EAF6F6; --teal-100: #D3EEEE;
  --ink: #0F1E2B; --ink-2: #33475A; --muted: #6B7C8A; --faint: #94A3AF;
  --line: #E4EAEE; --line-2: #EEF2F5; --bg: #F5F7F9; --surface: #FFFFFF;
  --ok: #1F7A4D; --ok-bg: #E6F4EC; --warn: #9A6A12; --warn-bg: #FBF1DC; --bad: #B42318; --bad-bg: #FDECEA; --info-bg: #EEF3FF; --info: #3651B8;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --sh-1: 0 1px 2px rgba(15,30,43,.06), 0 1px 1px rgba(15,30,43,.03);
  --sh-2: 0 4px 16px rgba(15,30,43,.07), 0 1px 3px rgba(15,30,43,.05);
  --sh-3: 0 18px 48px rgba(15,30,43,.16);
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --side: 248px;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.5; letter-spacing: -0.005em; }
a { color: var(--teal-600); text-underline-offset: 2px; }
::selection { background: var(--teal-100); }

/* ------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; border-right: 1px solid rgba(255,255,255,.04); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { display: block; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 11px; color: #8FA6B6; text-transform: uppercase; letter-spacing: .14em; margin-top: -2px; }
.env { white-space: nowrap; align-self: flex-start; margin: -6px 8px 0; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #F3C98B; background: rgba(243,201,139,.12); border: 1px solid rgba(243,201,139,.28); padding: 3px 8px; border-radius: 999px; }
.env + em, .brand + em + em { margin-top: -10px; }
nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: #B6C6D2; text-decoration: none;
  font-weight: 550; font-size: 14px; transition: background .15s, color .15s; }
nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
nav a.on { background: rgba(47,154,157,.18); color: #fff; box-shadow: inset 3px 0 0 var(--teal); }
nav a.on svg { color: #6FD1D3; }
.who { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
#who { display: flex; align-items: center; gap: 10px; min-width: 0; }
#who:empty { display: none; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, var(--teal), #5BB8A6); color: #fff; }
.who-text { min-width: 0; } .who-text b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-text small { display: block; font-size: 11px; color: #8FA6B6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .btn { width: 100%; justify-content: center; }

main { padding: 32px 40px 64px; max-width: 1440px; width: 100%; min-width: 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 10px; }
  nav { flex-direction: row; flex-wrap: wrap; margin: 0; order: 3; width: 100%; } nav a { padding: 7px 10px; font-size: 13px; }
  .who { margin: 0 0 0 auto; flex-direction: row; align-items: center; padding: 6px 8px; } .who .btn { width: auto; }
  main { padding: 20px 16px 48px; }
}

/* ------------------------------------------------------------ type */
h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 8px; }
main > p.muted, main > .muted { margin: 0 0 20px; max-width: 760px; }
.muted { color: var(--muted); }
p { margin: 0 0 10px; }

/* ------------------------------------------------------------ page header / toolbar */
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.bar > h1, .bar > h2 { margin-right: auto !important; }
main > .bar:first-child { margin-bottom: 8px; }
main > .bar:first-child h1 { margin: 0; }

/* ------------------------------------------------------------ controls */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 8px 14px; border-radius: 9px; font: 600 13px/1.2 var(--font); cursor: pointer; box-shadow: var(--sh-1);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.btn:hover { border-color: #CBD6DD; background: #FAFCFD; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(35,127,130,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.btn.primary:hover { background: var(--teal-600); border-color: var(--teal-600); }
.btn.danger { color: var(--bad); } .btn.danger:hover { background: var(--bad-bg); border-color: #F4C7C2; }
.btn.ghost { background: transparent; color: #DCE6EC; border-color: rgba(255,255,255,.18); box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(47,154,157,.28); border-color: var(--teal); }

input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font: 14px/1.4 var(--font); color: var(--ink); background: var(--surface);
  box-shadow: var(--sh-1); transition: border-color .15s, box-shadow .15s; width: 100%; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[readonly] { background: var(--line-2); color: var(--muted); }
select { appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7C8A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; }
select[multiple] { background-image: none; padding: 6px; }
.bar input, .bar select { width: auto; }
.bar input[type=search] { min-width: 280px; flex: 0 1 320px; padding-left: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394A3AF' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--teal); vertical-align: -3px; cursor: pointer; }
textarea { resize: vertical; min-height: 64px; }

.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 13px; font: 600 12.5px/1 var(--font);
  color: var(--ink-2); cursor: pointer; transition: all .15s; }
.chip:hover { border-color: #CBD6DD; }
.chip.on { border-color: var(--teal); background: var(--teal-50); color: var(--teal-600); box-shadow: inset 0 0 0 1px var(--teal); }

/* ------------------------------------------------------------ surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; min-width: 0; box-shadow: var(--sh-1); }
.card > h2:first-child, .card > .bar:first-child { margin-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.split > #detail { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow: auto; }   /* stays beside the list while it scrolls */
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .split > #detail { position: static; max-height: none; } }
.split > .card:has(#list) { padding: 6px 6px 10px; }
#list > .bar { padding: 12px 14px 4px; margin: 0; }
#list td { padding: 12px 10px; } #list th { padding: 10px; }
#list td:nth-last-child(3) { color: var(--ink-2); font-size: 13px; }
#list td:nth-last-child(3) { min-width: 160px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.cards .card { display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.cards .card:hover { box-shadow: var(--sh-2); }
.cards .card .row2, .cards .card > p:last-of-type { margin-top: auto; padding-top: 14px; }
.cards .card .row2 .btn { padding: 7px 12px; }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-size: 15px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .2s; margin-right: 2px; }
details.card[open] > summary { margin-bottom: 14px; } details.card[open] > summary::before { transform: rotate(45deg); }
#mform .card, #pform .card { border-color: var(--teal-100); box-shadow: var(--sh-2); }

/* ------------------------------------------------------------ tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; z-index: 1; }
td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
td b { font-weight: 600; }
td:first-child { white-space: nowrap; }
#list td:first-child { white-space: normal; }
tbody tr:last-child td { border-bottom: 0; }
tr.row { cursor: pointer; transition: background .12s; }
tr.row:hover td { background: #F8FBFB; }
tr.sel td { background: var(--teal-50); } tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.num { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ------------------------------------------------------------ status pills */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px 3px 8px; border-radius: 999px;
  white-space: nowrap; background: var(--line-2); color: var(--ink-2); text-transform: capitalize; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.st.AWAITING_APPROVAL { background: var(--warn-bg); color: var(--warn); }
.st.SENT, .st.CRM_LOGGED, .st.OUTCOME_RECORDED { background: var(--ok-bg); color: var(--ok); }
.st.POLICY_BLOCKED, .st.SEND_BLOCKED, .st.INELIGIBLE, .st.SUPPRESSED, .st.REJECTED, .st.CRM_CONFLICT, .st.DISQUALIFIED { background: var(--bad-bg); color: var(--bad); }

/* ------------------------------------------------------------ detail */
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--muted); font-weight: 500; } .kv dd { margin: 0; word-break: break-word; color: var(--ink); }
form.kv { grid-template-columns: 200px minmax(0, 1fr); gap: 14px 24px; align-items: start !important; }
form.kv > label { color: var(--ink-2); font-weight: 600; font-size: 13px; padding-top: 9px; }
@media (max-width: 760px) { .kv, form.kv { grid-template-columns: 1fr; } }
.sig { position: relative; background: linear-gradient(0deg, #F7FBFB, #F7FBFB); border: 1px solid var(--teal-100); border-left: 3px solid var(--teal);
  padding: 10px 14px; margin: 8px 0; border-radius: 0 10px 10px 0; font-size: 13.5px; color: var(--ink-2); }
.sig a { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.checks { list-style: none; padding: 12px 14px; margin: 0; columns: 2; column-gap: 20px; font-size: 12.5px; background: var(--bg); border-radius: 10px; }
.checks li { padding: 2px 0; break-inside: avoid; color: var(--ink-2); }
.checks li::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat; }
.checks li.fail { color: var(--bad); font-weight: 600; }
.checks li.fail::before { background: var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/9px no-repeat; }
iframe.preview, img.preview { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: var(--r); background: #EEF2F5; box-shadow: inset 0 1px 3px rgba(0,0,0,.04); }
.decide { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.decide .row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.decide label { font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.report { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ------------------------------------------------------------ results tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-1); overflow: hidden; }
.tile::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--teal); opacity: .8; }
.tile span { font-size: 12.5px; font-weight: 550; }
.tile b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ chips for role families and filters */
fieldset.fam { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; background: #FBFCFD; }
fieldset.fam legend { padding: 0 6px; font-size: 13px; }
label.chk { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; padding: 5px 11px 5px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; transition: all .12s; color: var(--ink-2); }
label.chk:hover { border-color: #C6D3DB; }
label.chk:has(input:checked) { background: var(--teal-50); border-color: var(--teal); color: var(--teal-600); font-weight: 600; }
label.chk input { margin: 0; width: 14px; height: 14px; }
label.chk .muted { font-size: 11px; }

/* ------------------------------------------------------------ welcome, empty, toast */
.welcome { max-width: 560px; margin: 10vh auto; background: var(--surface); padding: 40px; border-radius: 20px; border: 1px solid var(--line);
  box-shadow: var(--sh-2); text-align: center; }
.welcome-logo { width: 56px; height: 56px; padding: 10px; border-radius: 16px; background: var(--navy); margin-bottom: 18px; }
.welcome h1 { font-size: 24px; } .welcome p { color: var(--ink-2); }
.empty { color: var(--muted); padding: 40px 24px; text-align: center; }
#toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; background: var(--navy); color: #fff; padding: 12px 16px 12px 14px; border-radius: 12px;
  max-width: 440px; box-shadow: var(--sh-3); font-size: 13.5px; border-left: 3px solid var(--teal); animation: toast-in .22s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
#list .st { white-space: normal; line-height: 1.25; }

/* ------------------------------------------------------------ template gallery and design studio (14 October 2026) */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.gal-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); transition: box-shadow .2s, border-color .2s, transform .2s; }
.gal-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.gal-card.on { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,154,157,.25), var(--sh-2); }
.gal-img { height: 300px; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); }
.gal-img img { width: 100%; display: block; }
.gal-meta { padding: 14px 16px 16px; } .gal-meta p { margin: 6px 0 0; font-size: 13px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; box-shadow: var(--sh-1); }
.swatch:hover { border-color: #C6D3DB; } .swatch.on { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(47,154,157,.25); }
.swatch[disabled] { cursor: default; opacity: .7; }
.sw { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); } .sw i { width: 16px; height: 28px; display: block; }
.swatches.compact .swatch { padding: 6px 10px 6px 6px; font-size: 12px; } .swatches.compact .sw i { width: 12px; height: 22px; }
.studio { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 20px; align-items: start; }
.studio-edit { display: grid; gap: 14px; }
.studio-edit .card { padding: 16px 18px; }
.studio-edit details > summary { cursor: pointer; font-weight: 650; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
.studio-edit details > summary::-webkit-details-marker { display: none; }
.studio-edit details > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.studio-edit details[open] > summary { margin-bottom: 12px; } .studio-edit details[open] > summary::after { transform: rotate(-135deg); }
.field { display: grid; gap: 6px; margin-bottom: 12px; } .field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.benefit { padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 6px; }
.studio-preview { position: sticky; top: 20px; }
.device { background: #E9EEF2; border-radius: var(--r); padding: 16px; display: flex; justify-content: center; transition: background .2s; }
.device iframe.preview { width: 100%; max-width: 640px; height: 72vh; border-radius: 10px; background: #fff; box-shadow: var(--sh-2); transition: max-width .25s; }
.device.mobile iframe.preview { max-width: 390px; border-radius: 22px; border: 8px solid #0B1A26; }
.device.dark { background: #111; } .device.dark iframe.preview { filter: invert(1) hue-rotate(180deg); }
.check-sum { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.check-sum.ok { background: var(--ok-bg); color: var(--ok); } .check-sum.bad { background: var(--bad-bg); color: var(--bad); }
.studio-actions { position: sticky; bottom: 12px; box-shadow: var(--sh-2); }
@media (max-width: 1100px) { .studio { grid-template-columns: 1fr; } .studio-preview { position: static; } }
.studio-edit details.card > summary::before { display: none; }
.gal-meta .st { text-transform: none; }
.claims-box { margin-top: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--warn-bg); border: 1px solid #F0DDB4; color: var(--ink-2); font-size: 13px; }
.claims-box ul { margin: 0; padding-left: 18px; } .claims-box li { margin: 4px 0; }

/* ------------------------------------------------------------ home dashboard (14 October 2026) */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 8px 0 20px; }
.kpi { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--sh-1); position: relative; overflow: hidden; transition: box-shadow .2s; }
a.kpi:hover { box-shadow: var(--sh-2); }
.kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--teal); }
.kpi span { font-size: 12.5px; font-weight: 600; color: var(--muted); } .kpi b { display: block; font-size: 30px; letter-spacing: -0.02em; margin: 2px 0; }
.kpi small { color: var(--muted); font-size: 12px; }
.meter { height: 6px; border-radius: 99px; background: var(--line-2); margin: 6px 0 4px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr; } }
.attention ul { list-style: none; margin: 0; padding: 0; } .attention li { padding: 9px 0 9px 22px; border-top: 1px solid var(--line-2); position: relative; font-size: 13.5px; }
.attention li:first-child { border-top: 0; } .attention li a { color: var(--ink); text-decoration: none; } .attention li a:hover { color: var(--teal-600); }
.attention li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.attention li.bad::before { background: var(--bad); } .attention li.warn::before { background: #D99A1E; } .attention li.info::before { background: var(--teal); }
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 18px; }
.funnel { display: grid; gap: 6px; margin: 12px 0 14px; } .funnel > div { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: 10px; font-size: 12.5px; }
.funnel span { color: var(--muted); font-weight: 600; } .funnel b { text-align: right; font-variant-numeric: tabular-nums; }
.fbar { height: 10px; border-radius: 99px; background: var(--line-2); overflow: hidden; } .fbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), #5BB8A6); }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini > div { background: var(--bg); border-radius: 10px; padding: 10px 12px; } .mini span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mini b { display: block; font-size: 18px; margin: 2px 0; font-variant-numeric: tabular-nums; } .mini small { color: var(--faint); font-size: 11px; }
.spark-wrap { margin-top: 12px; } .spark { width: 100%; height: 56px; display: block; }
.legend { font-size: 11.5px; margin: 4px 0 0; } .legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; }
@media (max-width: 520px) { .camp-grid { grid-template-columns: 1fr; } .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.btn { text-decoration: none; }
.replies ul { list-style: none; margin: 0; padding: 0; } .replies li { padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; } .replies li:first-child { border-top: 0; padding-top: 0; }
.rc { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.rc.interested, .rc.meeting_requested { background: var(--ok-bg); color: var(--ok); } .rc.question, .rc.wrong_person { background: var(--info-bg); color: var(--info); }
.rc.not_now { background: var(--warn-bg); color: var(--warn); } .rc.not_interested, .rc.unsubscribe, .rc.bounce { background: var(--bad-bg); color: var(--bad); }
.testsend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r);
  background: var(--teal-50); border: 1px solid var(--teal-100); }
.testsend select { width: auto; min-width: 220px; } .testsend .muted { flex-basis: 100%; font-size: 12px; }
.vtoggle { all: unset; cursor: pointer; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--teal-600); padding: 2px 8px; border-radius: 999px; background: var(--teal-50); }
.vtoggle:hover { background: var(--teal-100); }
tr.older td { background: #FAFBFC; } tr.older td:first-child { padding-left: 34px; }
.jtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .chip.bad { border-color: var(--bad); color: var(--bad); }
.jsteps { display: grid; gap: 10px; margin: 6px 0 12px; }
.jstep { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: #FBFCFD; }
.jstep > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; }
.jstep.first > b { background: var(--navy); }
.jfields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; } .jfields label { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.jfields select { width: auto; min-width: 200px; }

/* projects (15 October 2026) */
.projsw { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.projsw label, .navlabel { font-size: 11px; color: #8FA6B6; text-transform: uppercase; letter-spacing: .12em; }
.projsw select { width: 100%; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 6px 8px; font: inherit; }
.projsw select option { color: #111; }
.projsw a { font-size: 12px; color: #B6C6D2; }
.navlabel { display: block; margin: 14px 12px 4px; }
.projgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.projcard { display: flex; flex-direction: column; gap: 10px; }
.projcard h2 { margin: 0; font-size: 18px; }
.projcard .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.projcard .nums b { display: block; font-size: 20px; }
.projcard .nums span { font-size: 12px; color: var(--muted, #667); }
.projcard .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* journeys, launch and setup checklists (15 October 2026) */
.jgroup { text-transform: capitalize; margin: 22px 0 10px; }
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
@media (max-width: 600px) { .jgrid { grid-template-columns: 1fr; } }
.jcard { display: flex; flex-direction: column; gap: 10px; }
.jcard .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.jlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.jlist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line, #e3e7ec); border-radius: 10px; }
.checklist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.checklist li > div { margin-right: auto; }
.checklist .tick { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1.5px solid #c8d0d8; font-size: 13px; font-weight: 700; }
.checklist li.ok .tick { background: #1f8a5b; border-color: #1f8a5b; color: #fff; }
.checklist li.no .tick { background: #c0392b; border-color: #c0392b; color: #fff; }
.checklist li.warn .tick { background: #d68910; border-color: #d68910; color: #fff; }
.checklist li.next { background: rgba(31, 138, 91, .07); }
.checklist li.ok b { color: var(--muted, #667); font-weight: 500; }

/* journey progress board (15 October 2026) */
.ptrack { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.pcol { flex: 0 0 210px; border: 1px solid var(--line, #e3e7ec); border-radius: 12px; padding: 10px; background: rgba(0,0,0,.015); }
.phead { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; font-size: 13px; }
.pnum { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #0E7C86; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.warnt { color: #B54708; font-weight: 600; }
.pchips { display: flex; flex-direction: column; gap: 6px; }
.pchip { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.pchip b { font-size: 14px; }
.pchip.ok { background: #E7F6EE; color: #146C43; } .pchip.now { background: #E6F4F5; color: #0B5F66; }
.pchip.wait { background: #FEF3E2; color: #93370D; } .pchip.bad { background: #FDECEC; color: #B42318; } .pchip.off { background: #F2F4F7; color: #475467; }
.pchip:hover { border-color: currentColor; }
.pdots { display: flex; gap: 3px; }
.pdots i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 700; background: #E4E7EC; color: #fff; }
.pdots i.ok { background: #1f8a5b; } .pdots i.now { background: #0E7C86; } .pdots i.wait { background: #d68910; } .pdots i.bad { background: #c0392b; }
.attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attn li { padding: 6px 10px; border-radius: 8px; border-left: 4px solid #d68910; background: #FEF8EE; }
.attn li.bad { border-left-color: #c0392b; background: #FDF1F0; }

/* journey studio (15 October 2026) */
.studio-new textarea, .splan textarea, .sask textarea, .sdoc textarea { width: 100%; font: inherit; }
.srow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.splan { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.splan li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line, #e3e7ec); border-radius: 10px; padding: 10px; }
.sai { border-radius: 10px; padding: 10px 14px; background: #EEF6F7; margin: 12px 0; }
.sai.challenge { background: #FEF8EE; }
.sai ul { margin: 6px 0; padding-left: 18px; }
.jstudio .sbar { margin-bottom: 14px; gap: 12px; }
.sgrid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1700px) { .sgrid { grid-template-columns: 220px minmax(0, 1fr); } .sai-panel { grid-column: 1 / -1; position: static; max-height: none; } .sai-panel .smsgs { max-height: 360px; } }
@media (max-width: 800px) { .sgrid { grid-template-columns: 1fr; } }
.stl h3, .sai-panel h3 { margin: 0 0 10px; }
.stimeline { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.stimeline li { display: flex; gap: 8px; align-items: flex-start; padding: 9px; border: 1px solid var(--line, #e3e7ec); border-radius: 10px; cursor: pointer; position: relative; }
.stimeline li.on { border-color: #0E7C86; box-shadow: 0 0 0 2px rgba(14,124,134,.15); background: #F3FAFA; }
.stimeline li.dragover { border-style: dashed; border-color: #0E7C86; }
.stx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sline { font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sdelay { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.sdelay input { width: 52px !important; min-width: 0; padding: 2px 4px; display: inline-block; }
.smove { display: flex; flex-direction: column; gap: 2px; }
.smove button { border: 0; background: none; cursor: pointer; color: #667085; font-size: 11px; padding: 2px 4px; border-radius: 4px; }
.smove button:hover:not(:disabled) { background: #EEF2F6; color: #101828; }
.smove button:disabled { opacity: .3; cursor: default; }
.sdoc { display: flex; flex-direction: column; gap: 12px; }
.sgroup { display: flex; flex-direction: column; gap: 8px; }
.sgroup h4 { margin: 4px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.sfield { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.sfield > span { font-weight: 600; }
.sfield input, .sfield textarea { font: inherit; font-size: 14.5px; line-height: 1.55; padding: 8px 10px; border: 1px solid var(--line, #d5dbe1); border-radius: 8px; resize: vertical; }
.sfield input:focus, .sfield textarea:focus { outline: 2px solid rgba(14,124,134,.35); border-color: #0E7C86; }
.sben { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.device.mobile iframe { max-width: 390px; margin: 0 auto; display: block; }
.sai-panel { display: flex; flex-direction: column; max-height: calc(100vh - 140px); position: sticky; top: 16px; }
.smsgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; min-height: 160px; }
.smsg { padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.smsg.you { align-self: flex-end; background: #0E7C86; color: #fff; max-width: 85%; }
.smsg.ai { background: #F2F4F7; }
.smsg.err { background: #FDECEC; color: #B42318; }
.smsg.thinking { color: #667085; font-style: italic; }
.sq { margin: 6px 0 0; padding-left: 18px; }
.ssugs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ssug { background: #fff; border: 1px solid var(--line, #e3e7ec); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ssug.done { opacity: .75; } .ssug.rejected .sdiff ins { text-decoration: line-through; }
.sdiff { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.sdiff del { background: #FDECEC; color: #912018; padding: 3px 6px; border-radius: 6px; }
.sdiff ins { background: #E7F6EE; color: #0B5132; padding: 3px 6px; border-radius: 6px; text-decoration: none; }
.ok-t { color: #146C43; font-weight: 600; }
.squick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.squick .chip { font-size: 12px; }
.sask { display: flex; gap: 8px; align-items: flex-end; }
.sspend { font-size: 11.5px; margin: 6px 0 0; }

/* find contacts and goal progress (15 October 2026) */
.findc h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.fdesc { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 4px; }
.fdesc textarea { flex: 1; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, #d5dbe1); resize: vertical; }
.fund { background: #EEF6F7; border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 12px; }
.fgrid section { border: 1px solid var(--line, #e3e7ec); border-radius: 12px; padding: 12px 14px; }
.frow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchips .chip .muted { font-size: 11px; margin-left: 2px; }
.ftitles { margin-top: 8px; } .ftg { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 13px; }
.festimate { margin-top: 16px; border-radius: 12px; padding: 14px 16px; background: #F3FAFA; border: 1px solid #CBE7E9; }
.fbig { font-size: 16.5px; line-height: 1.5; }
.fwarn { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.fwarn.info { background: #F2F4F7; } .fwarn.warn, .fwarn.action { background: #FEF3E2; color: #93370D; } .fwarn.block { background: #FDECEC; color: #B42318; }
.fadv { margin-top: 10px; }
.goalgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-bottom: 16px; }
.goalcard.live { border-color: #0E7C86; box-shadow: 0 0 0 2px rgba(14,124,134,.12); }
.gbar { height: 10px; border-radius: 6px; background: #E4E7EC; overflow: hidden; }
.gbar i { display: block; height: 100%; background: linear-gradient(90deg, #0E7C86, #3BB3B9); border-radius: 6px; transition: width .6s; }

/* review fixes (15 October 2026) */
.qbanner { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; margin: 0 0 10px; font-size: 13.5px; }
.qbanner.warn { background: #FEF3E2; color: #7A2E0E; } .qbanner.info { background: #EEF6F7; color: #134E52; }
.breview .bsticky { position: sticky; top: 0; background: var(--card, #fff); z-index: 2; padding: 8px 0; gap: 8px; }
.bitem { border: 1px solid var(--line, #e3e7ec); border-radius: 12px; padding: 10px 12px; margin: 12px 0; }
.bitem.off { opacity: .45; }
.bprev { height: 520px; }

/* layout content editor (16 October 2026) */
h4.cpart { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.cgroup { border: 1px solid var(--line, #e3e7ec); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.cgroup > b { display: inline-block; margin-bottom: 4px; color: #0E7C86; }

/* campaign analytics (20 October 2026) */
.atiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.atile { position: relative; background: linear-gradient(160deg, #FFFFFF 0%, #F3FAF9 100%); border: 1px solid #E3ECEF; border-radius: 16px;
  padding: 16px 16px 12px; box-shadow: 0 1px 2px rgba(11,34,54,.04), 0 8px 24px -16px rgba(11,34,54,.25); overflow: hidden; }
.atile span { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #5B6B7C; font-weight: 600; }
.atile b { display: block; font-size: 30px; line-height: 1.15; color: #0B2236; margin: 6px 0 2px; font-weight: 700; letter-spacing: -.01em; }
.atile small { display: block; font-size: 12.5px; color: #5B6B7C; }
.atile .spark { width: 100%; height: 30px; margin-top: 8px; }
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acard { border-radius: 16px; box-shadow: 0 1px 2px rgba(11,34,54,.04), 0 10px 30px -20px rgba(11,34,54,.3); }
.acard.wide { grid-column: 1 / -1; }
.acard h2 { margin: 0 0 12px; font-size: 16px; } .acard h2 .muted { font-size: 12px; font-weight: 500; margin-left: 6px; }
@media (max-width: 900px) { .agrid { grid-template-columns: 1fr; } }
.chart { width: 100%; height: auto; } .ax { font-size: 10.5px; fill: #8A98A6; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #5B6B7C; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.frow2 { display: grid; grid-template-columns: 150px 1fr 40px 96px; white-space: nowrap; gap: 10px; align-items: center; font-size: 13px; }
.fbar { height: 14px; background: #EEF3F6; border-radius: 8px; overflow: hidden; }
.fbar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #0B2236, #0E9384); }
.frow2 b { text-align: right; color: #0B2236; } .fp { font-size: 11.5px; }
.donutwrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .donut { width: 170px; height: 170px; }
.dn { font-size: 28px; font-weight: 700; fill: #0B2236; }
.dlegend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; min-width: 160px; }
.dlegend li { display: flex; align-items: center; gap: 8px; } .dlegend li b { margin-left: auto; }
.dlegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hb { display: grid; grid-template-columns: 150px 1fr 36px auto; gap: 10px; align-items: center; font-size: 13px; }
.hb div { height: 12px; background: #EEF3F6; border-radius: 6px; overflow: hidden; } .hb i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #0E9384, #5FD3C2); }
.hb b { text-align: right; } .hb em { font-style: normal; font-size: 11.5px; color: #8A98A6; }
.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stepc { border: 1px solid #E3ECEF; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.sbar2 { height: 8px; background: #EEF3F6; border-radius: 6px; overflow: hidden; } .sbar2 i { display: block; height: 100%; background: #0B2236; border-radius: 6px; }
.sbar2.c i { background: #0E9384; }
.tbar { display: inline-block; width: 70px; height: 8px; background: #EEF3F6; border-radius: 6px; overflow: hidden; margin-right: 8px; vertical-align: middle; }
.tbar i { display: block; height: 100%; background: #7CB7E8; }
.frow2 .fl { overflow: hidden; text-overflow: ellipsis; }
.fp { white-space: nowrap; }
.hanalytics { margin: 4px 0 22px; }
.hanalytics > .bar { margin-bottom: 12px; }

/* Paragraph controls in the email editor (21 October 2026) */
.spara { display: grid; gap: 4px; }
.spara .plink { justify-self: end; }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.btn.plink { background: transparent; border-color: transparent; color: var(--bad, #b3261e); box-shadow: none; }
.btn.plink:hover { text-decoration: underline; }
.linkpick { margin-top: 8px; }
.linkpick select { max-width: 100%; }

/* ------------------------------------------------------------ email editor (21 October 2026): one editor everywhere */
.eed { container-type: inline-size; display: grid; gap: 12px; }
.ehead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--sh-1); }
.etitle { display: grid; margin-right: auto; min-width: 0; }
.etitle b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etitle .muted { font-size: 12.5px; }
#edirty { color: var(--warn); }
.btn.ghosty { border-color: transparent; background: transparent; font-size: 16px; padding: 4px 8px; }
.ebadge { border: 0; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ebadge.bad { background: var(--warn-bg); color: var(--warn); } .ebadge.ok { background: var(--ok-bg); color: var(--ok); }
.eacts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.emore { position: relative; } .emore > summary { list-style: none; cursor: pointer; } .emore > summary::-webkit-details-marker { display: none; }
.emore-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-2); display: grid; min-width: 230px; padding: 4px; z-index: 10; }
.emore-menu button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font: inherit; cursor: pointer; color: var(--ink); }
.emore-menu button:hover { background: var(--bg); }
.epanel-in { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; }
.epanel-in .srow { display: flex; gap: 8px; flex-wrap: wrap; }
.enote { margin: 0; color: var(--muted); font-size: 13px; }
.egrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
@container (max-width: 760px) { .egrid { grid-template-columns: minmax(0, 1fr); } .eprev { order: -1; position: static !important; } }
.eform { display: grid; gap: 8px; }
.esec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.esec[open] { border-color: var(--teal-100); box-shadow: var(--sh-1); }
.esec > summary { cursor: pointer; padding: 11px 14px; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.esec > summary::-webkit-details-marker { display: none; }
.esec > summary::after { content: "▾"; margin-left: auto; color: var(--faint); }
.esec[open] > summary::after { content: "▴"; }
.esec > summary .muted { font-size: 12.5px; }
.esec-body { padding: 2px 14px 14px; display: grid; gap: 12px; }
.efield { display: grid; gap: 5px; }
.efield > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.efield > span .muted { font-weight: 400; }
.efield input, .efield textarea, .efield select, .ebenefit input, .ebenefit textarea, .esec-body > textarea { width: 100%; box-sizing: border-box; }
.esub { margin: 6px 0 0; font-size: 13px; }
.esubj { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .esubj input { flex: 1; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--teal-600); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; justify-self: start; }
.epara { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: start; margin-bottom: 8px; }
.epara.dragging { opacity: .5; }
.egrip { cursor: grab; color: var(--faint); padding-top: 9px; user-select: none; letter-spacing: -2px; }
.eta { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; min-height: 52px; line-height: 1.55; white-space: pre-wrap; background: #fff; outline: none; }
.eta:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-50); }
.elink { color: var(--teal-600); text-decoration: underline; text-underline-offset: 2px; background: var(--teal-50); border-radius: 4px; padding: 0 2px; overflow-wrap: anywhere; }
.elx { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 0 0 3px; }
.emenu { position: relative; } .emenu > summary { list-style: none; cursor: pointer; padding: 6px 6px; color: var(--muted); border-radius: 6px; }
.emenu > summary::-webkit-details-marker { display: none; } .emenu > summary:hover { background: var(--bg); }
.emenu > div { position: absolute; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-2); display: grid; min-width: 170px; padding: 4px; z-index: 6; }
.emenu button { text-align: left; background: none; border: 0; padding: 7px 9px; border-radius: 6px; font: inherit; cursor: pointer; }
.emenu button:hover { background: var(--bg); } .danger-t { color: var(--bad); }
.eparabar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .eparabar select { max-width: 240px; } .eparabar .muted { font-size: 12px; }
.ebenefit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; } .ebenefit textarea { grid-column: 1 / -1; }
.echips { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.elinkurl { font-size: 12px; word-break: break-all; }
.eflash { animation: eflash 1.4s ease-out; border-radius: var(--r-sm); }
@keyframes eflash { 0% { box-shadow: 0 0 0 3px var(--teal); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .eflash { animation: none; outline: 2px solid var(--teal); } }
.eprev { position: sticky; top: 72px; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.eprevbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .eprevbar > .muted { margin-right: auto; font-size: 12.5px; }
.eseg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.eseg button { border: 0; background: none; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.eseg button.on { background: var(--teal-50); color: var(--teal-600); font-weight: 600; }
.ehint { margin: 0; font-size: 12px; text-align: center; }
.echecks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.echecks li { display: flex; gap: 8px; } .echecks li div { display: grid; gap: 2px; }
.echk-no { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.eok { margin: 0; color: var(--ok); font-weight: 600; }
.eall { margin-top: 4px; }
.tlist .tl-meta { font-size: 12px; } .tlist .tl-act { width: 1%; white-space: nowrap; text-align: right; } .tlist .emenu > div { text-align: left; }
.eform, .esec, .esec-body, .efield, .epara, .eta, .ebenefit { min-width: 0; }
.eform input, .eform textarea, .eform select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.eprev { min-width: 0; }
.esec-body, .efield, .eform { grid-template-columns: minmax(0, 1fr); }
.sdelay input { width: 56px; text-align: center; }
.split:has(> #detail:empty) { grid-template-columns: minmax(0, 1fr); }   /* full-width list until an email is opened */

/* ------------------------------------------------------------ approvals (23 October 2026) */
.pill { display: inline-flex; align-items: center; font: 600 11.5px/1 var(--font); padding: 4px 9px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.bad { background: var(--bad-bg); color: var(--bad); }
.late { color: var(--bad); font-weight: 600; } .faint { color: var(--faint); font-size: 12px; }
kbd { font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; opacity: .7; margin-left: 4px; }
#apsum { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.ap-proj { margin: 0 0 26px; } .ap-proj h2 { font-size: 16px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.ap-proj h2 small { font-weight: 500; font-size: 12px; color: var(--muted); }
.ap-camp { padding: 16px 18px; margin-bottom: 12px; }
.ap-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; } .ap-head b { font-size: 14.5px; }
.ap-steps { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ap-arrow { align-self: center; color: var(--faint); }
.ap-step { flex: 1 1 180px; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ap-step:hover { border-color: var(--teal); box-shadow: var(--sh-2); transform: translateY(-1px); }
.ap-step.has { border-color: var(--teal-100); background: linear-gradient(180deg, var(--teal-50), var(--surface) 60%); }
.ap-k { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; } .ap-t { font-size: 13.5px; font-weight: 600; }
.ap-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.ap-crumb a { font-weight: 600; text-decoration: none; } .ap-crumb { gap: 4px; font-size: 13px; }
.ap-work { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.ap-list { padding: 6px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.ap-lh { font-size: 11.5px; color: var(--muted); padding: 8px 10px 4px; font-weight: 600; }
.ap-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; color: inherit; cursor: pointer; border-left: 3px solid transparent; }
.ap-row:hover { background: var(--bg); } .ap-row.sel { background: var(--teal-50); border-left-color: var(--teal); }
.ap-row.s-approved .ap-org { color: var(--ok); } .ap-row.s-held { opacity: .7; }
.ap-org { font-weight: 600; font-size: 13.5px; } .ap-sub { font-size: 12px; color: var(--muted); } .tick { margin-right: 6px; }
.ap-prev { padding: 18px 20px; position: sticky; top: 20px; }
.ap-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; }
.ap-subj { font-weight: 700; font-size: 15px; margin: 4px 0 10px; }
.ap-frame { width: 100%; height: min(62vh, 640px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.ap-earlier { font-size: 12px; color: var(--muted); margin-top: 8px; }
.ap-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.ap-sheet-wrap { position: fixed; inset: 0; background: rgba(11,26,38,.42); display: grid; place-items: center; z-index: 50; padding: 16px; }
.ap-sheet { max-width: 480px; width: 100%; box-shadow: var(--sh-3); } .ap-sheet h2 { margin: 0 0 6px; font-size: 17px; }
.ap-checks { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; font-size: 13px; }
@media (max-width: 1000px) { .ap-work { grid-template-columns: 1fr; } .ap-list, .ap-prev { position: static; max-height: none; } }

/* Assessment content editor (25 October 2026) */
.ac-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ac-row { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.ac-row input { flex: 1; min-width: 0; }
.ac-mini { padding: 4px 9px; min-width: 0; }
.ac-id { font-size: 11px; width: 96px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-problems { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #FFF6E5; border: 1px solid #F3D9A4; font-size: 13px; }
.ac-problems ul { margin: 6px 0 0; padding-left: 18px; }
#main textarea { width: 100%; font: inherit; }
@media (max-width: 640px) { .ac-id { display: none; } }
tr.clickable { cursor: pointer; }
tr.clickable:hover, tr.clickable:focus-visible { background: var(--hover, #F2F7F9); outline: none; }
/* Review workspace (Phase 4) */
.kv.rv textarea { width: 100%; }
.rv-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #E6ECF1); }
.rv-actions form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rv-actions textarea { width: 100%; }
@media (max-width: 760px) { .rv-3, .rv-actions { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ activity feedback (3 November 2026) */
body.loading::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, transparent, var(--teal), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: loadbar 1.1s linear infinite; }
@keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
body.loading .btn:disabled { cursor: progress; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--teal-100); border-top-color: var(--teal); border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
#fwhy { font-size: 12.5px; color: var(--bad); }