/* Palette taken from the AgeniQA portal (AgeniQA-portal.html) so the
   server-rendered pages and the portal read as one product. */
:root {
  --navy: #132a5e;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  /* Borders that carry meaning rather than decoration - the edge of a text
     input, a select, a checkbox - have to reach 3:1 against what is behind
     them (WCAG 2.2 AA, 1.4.11 Non-text Contrast). --border is #e2e8f0,
     which is 1.23:1 on white: visible to most people, invisible to some,
     and the thing that tells you where a form field is. --border-strong is
     for those; --border stays for decorative separators, where nothing is
     lost if it is missed. */
  --border-strong: #748396;
  --text: #0f172a;
  /* Was #64748b, which is 4.34:1 on --bg - under the 4.5:1 that 1.4.3
     requires for normal text, and used as a text colour in ninety-odd
     places, mostly for hints and help text. Help text is exactly what a
     reader who is struggling most needs to be able to read. */
  --muted: #475569;
  /* The second-tier muted, for figures under a metric and meta lines on a
     schedule chip. It briefly held #64748b - the value --muted had just
     been moved off for failing at 4.34:1 - which fixed one token by moving
     the fault into its sibling, where nine text rules use it and the
     contrast test did not look. #5e6e84 is the lightest value that still
     clears 4.5:1 on all three grounds, so it stays visibly lighter than
     --muted without being unreadable on any of them. */
  --muted-2: #5e6e84;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, .1);

  /* Two variants of each status colour, because one cannot do both jobs.
     The bright value is a fill: a chip background, a dot, a left border,
     where it sits behind or beside text rather than being the text. The
     -text value is for type, where 4.5:1 applies - #10b981 on white is
     2.54:1, which is not a legible green, it is a decorative one. */
  --success: #10b981;
  --success-text: #047857;
  --warning: #f59e0b;
  --warning-text: #92400e;
  --danger: #ef4444;
  --danger-text: #b91c1c;
  --danger-soft: rgba(239, 68, 68, .12);
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; word-break: break-word; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* header */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 650; font-size: 1.1rem; color: var(--text); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 38px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.who { color: var(--muted); font-size: .9rem; }
.role {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .78rem;
  margin-left: 4px;
}

main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 36px 24px 56px; }

footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 28px;
  color: var(--muted);
  font-size: .85rem;
  display: flex;
  justify-content: space-between;
}

/* buttons */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 550;
  cursor: pointer;
}
.btn:hover { background: var(--accent-dark); text-decoration: none; }
.btn.small { padding: 7px 14px; font-size: .88rem; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.link {
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; font-size: .92rem;
}
.link.danger { color: var(--danger-text); }
.inline { display: inline; }

/* hero */
.hero { text-align: center; padding: 40px 0 20px; }
.hero h1 { font-size: 2.3rem; margin: 0 0 14px; letter-spacing: -.02em; }
.lede { color: var(--muted); max-width: 620px; margin: 0 auto 18px; }
.cta { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 44px 0;
}
.features article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.features h3 { margin: 0 0 8px; font-size: 1rem; }
.features p { margin: 0; color: var(--muted); font-size: .92rem; }

.demo-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.demo-note h2 { margin-top: 0; font-size: 1.15rem; }
.hint { color: var(--muted); font-size: .9rem; }

/* forms */
.form-page { max-width: 460px; margin: 0 auto; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.card.row { flex-direction: row; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.grow { flex: 1 1 200px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; font-weight: 550; }
input {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .95rem;
  font-family: inherit;
}
select {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .95rem;
  font-family: inherit;
  background: var(--surface);
}
textarea {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .95rem;
  font-family: inherit;
  resize: vertical;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}
small { color: var(--muted); font-weight: 400; font-size: .82rem; }
.alt { text-align: center; color: var(--muted); margin-top: 16px; font-size: .92rem; }

.alert {
  background: var(--danger-soft);
  border: 1px solid #fca5a5;
  color: #b91c1c;
  padding: 11px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: .92rem;
}
.maintenance-banner {
  background: var(--danger-soft);
  border-bottom: 1px solid #fca5a5;
  color: #b91c1c;
  padding: 9px 20px;
  font-size: .88rem;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.maintenance-banner a { color: #b91c1c; text-decoration: underline; white-space: nowrap; }
.impersonation-banner {
  background: rgba(245, 158, 11, .14);
  border-bottom: 1px solid #fcd34d;
  color: #92400e;
  padding: 9px 20px;
  font-size: .88rem;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.impersonation-banner .link { color: #92400e; text-decoration: underline; font-weight: 600; }
.notice {
  background: var(--accent-soft);
  border: 1px solid #bfdbfe;
  color: #1e40af;
  padding: 12px 15px;
  border-radius: 8px;
  margin: 18px 0;
  font-size: .9rem;
}

/* pages */
/* Page headings carry a title plus one or more actions. Without wrapping,
   two actions push past the viewport on a phone. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.page-head h1 { margin: 0 0 4px; font-size: 1.6rem; }
.pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: .85rem;
  color: var(--muted);
  white-space: nowrap;
}
.pill.status-on {
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .3);
  color: #047857;
  font-weight: 600;
}
.pill.status-off {
  background: var(--danger-soft);
  border-color: #fca5a5;
  color: #b91c1c;
  font-weight: 600;
}

/* A KPI against its target. Four states rather than two, because "nobody
   set a target" and "nothing was measured" are not failures and must not
   be coloured as one - the rollup shows both, and painting either red
   would report a verdict the workspace never asked for. */
.pill.status-achieved {
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .3);
  color: #047857;
  font-weight: 600;
}
.pill.status-at_risk {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
  color: #92400e;
  font-weight: 600;
}
.pill.status-below {
  background: var(--danger-soft);
  border-color: #fca5a5;
  color: #b91c1c;
  font-weight: 600;
}
.pill.status-unset,
.pill.status-unknown {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
  font-weight: 500;
}

.stats { display: flex; gap: 14px; margin: 26px 0; flex-wrap: wrap; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  min-width: 120px;
}
.stat .n { font-size: 1.9rem; font-weight: 650; }
.stat .l { color: var(--muted); font-size: .85rem; }

ul.plain { margin: 0; padding-left: 1.1rem; }
ul.plain li { margin: 6px 0; }

table.data, table.creds {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 14px 0;
  font-size: .92rem;
}
table.data th, table.data td, table.creds th, table.creds td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
table.data th, table.creds th { background: var(--surface-2); font-size: .82rem; color: var(--muted); }
table.data tr:last-child td, table.creds tr:last-child td { border-bottom: none; }
.right { text-align: right; }

/* A row that carries controls for the row above it rather than data of its
   own. Set back and tinted so the eye reads it as attached to its parent;
   without a rule it was indistinguishable from an ordinary data row, which
   is how a checkbox scope panel came to look like a broken table. */
tr.subrow > td {
  background: var(--surface-2);
  border-top: 0;
  padding-top: 4px;
}

.empty { color: var(--muted); padding: 22px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: .8rem;
  color: var(--muted);
}
.tag {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .74rem;
}

/* Visitor + signed-in strips wrap badly before 640px. Collapse earlier. */
@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; gap: 12px; }
  .nav-toggle { display: block; }
  .topbar nav {
    margin-left: 0;
    flex-basis: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    font-size: .95rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
  }
  .topbar nav.open { max-height: 70vh; overflow-y: auto; margin-top: 4px; }
  .topbar nav a, .topbar nav .who, .topbar nav .inline, .topbar nav .btn {
    width: 100%;
    box-sizing: border-box;
  }
  .topbar nav a { padding: 10px 4px; border-top: 1px solid var(--border); }
  .topbar nav a:first-child { border-top: none; }
  .topbar nav .who { padding: 10px 4px 2px; border-top: 1px solid var(--border); }
  .topbar nav .inline { border-top: 1px solid var(--border); }
  .topbar nav .inline .link { width: 100%; text-align: left; padding: 10px 4px; }
  .topbar nav .btn.small { margin-top: 6px; text-align: center; }
}

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  main { padding: 24px 16px 40px; }
  .hero h1 { font-size: 1.8rem; }
  /* The last resort for a table nobody has wrapped. display:block makes a
     table stop sizing its own columns, so it is not applied to one that
     already scrolls inside a .table-scroll. */
  :not(.table-scroll) > table.data,
  :not(.table-scroll) > table.creds { display: block; overflow-x: auto; }
}

/* platform console */
.console-bar {
  background: #0b1220;
  color: #94a3b8;
  font-size: .82rem;
  letter-spacing: .01em;
  padding: 7px 28px;
  text-align: center;
}
.brand-tag {
  background: #0b1220;
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: .68rem;
  margin-left: 7px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.danger-btn { background: var(--danger); }
.danger-btn:hover { background: #dc2626; }
.danger-tag {
  background: var(--danger-soft);
  color: #b91c1c;
}
.inline-form { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
input.tiny { padding: 5px 8px; font-size: .82rem; max-width: 150px; }

@media (max-width: 640px) {
  .console-bar { padding: 7px 16px; font-size: .76rem; }
  .inline-form { flex-wrap: wrap; }
}

/* plans */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.plan h3 { margin: 0; font-size: 1.15rem; }
.plan .best-for { margin: 0; color: var(--muted); font-size: .88rem; }
.plan .price { margin: 8px 0 0; }
.plan .amount { font-size: 1.9rem; font-weight: 680; letter-spacing: -.02em; }
.plan .amount.quote { font-size: 1.2rem; font-weight: 600; }
.plan .per { color: var(--muted); font-size: .9rem; }
.plan .allowance { margin: 0 0 6px; font-size: .93rem; }
.plan .btn, .plan .current { margin-top: auto; text-align: center; }
.plan .current { cursor: default; color: var(--muted); }
.ribbon {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
table.compare td:first-child, table.compare th:first-child {
  color: var(--muted);
  font-weight: 550;
}

/* ---------------------------------------------------------------- shop */

/* Billing-period switch. Plain links rather than a script, so the price
   list works with JavaScript disabled and each state has its own URL. */
.cycle-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 4px;
  gap: 4px;
  margin: 6px auto 0;
}
.cycle-toggle a {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: .9rem;
  font-weight: 550;
  color: var(--muted);
}
.cycle-toggle a:hover { text-decoration: none; color: var(--text); }
.cycle-toggle a.on { background: var(--accent); color: #fff; }
.cycle-toggle .save {
  background: rgba(16, 185, 129, .16);
  color: #047857;
  border-radius: 12px;
  padding: 1px 7px;
  font-size: .72rem;
  margin-left: 5px;
}
.cycle-toggle a.on .save { background: rgba(255, 255, 255, .22); color: #fff; }

.plan .billed { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.plan .saving {
  margin: 0;
  color: #047857;
  font-size: .84rem;
  font-weight: 550;
}
.plan-features {
  margin: 4px 0 10px;
  padding-left: 18px;
  color: var(--muted);
  font-size: .86rem;
}
.plan-features li { margin-bottom: 3px; }
.plan form { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.plan form .btn { width: 100%; }

.centered { text-align: center; }
.page.narrow { max-width: 620px; margin: 0 auto; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 34px 0 6px;
}
.section-head h2 { margin: 0; font-size: 1.2rem; }

/* order summary */
.order {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 22px 0;
}
.order-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.order-line small { display: block; }
.order-line:last-child { border-bottom: none; }
.order-line.muted-line { color: var(--muted); font-size: .9rem; background: var(--surface-2); }
.order-line.total-line { background: var(--surface-2); font-size: 1.05rem; }
.order-amount { font-size: 1.35rem; font-weight: 650; white-space: nowrap; text-align: right; }
.order-amount small { color: var(--muted); font-size: .78rem; font-weight: 400; }

.checkout-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.signup-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-actions .btn { flex: 1 1 150px; }

/* checkout outcome */
.result-mark {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 26px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 700;
}
.result-mark.ok { background: rgba(16, 185, 129, .14); color: #047857; }
.result-mark.pending { background: var(--accent-soft); color: var(--accent-dark); font-size: 1.1rem; }
.result-mark.neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.sandbox-banner {
  background: rgba(245, 158, 11, .14);
  border: 1px solid #fcd34d;
  color: #92400e;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: .85rem;
  margin-bottom: 18px;
  text-align: center;
}

/* billing portal */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.panel h2 { margin: 0 0 12px; font-size: 1.05rem; }

/* The portal is what a customer signs in for, so it leads the dashboard. */
.portal-card { margin: 22px 0 26px; border-left: 4px solid var(--accent, #2563eb); }
.portal-card .hint { margin: 10px 0 0; }

dl.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .92rem; }
dl.facts dt { color: var(--muted); font-weight: 550; }
dl.facts dd { margin: 0; }
dl.facts.two-up { margin-bottom: 18px; }

.card-line { font-size: 1.05rem; margin: 0 0 12px; }
.card-brand {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: .8rem;
  margin-right: 6px;
}
.stat .n.small-n { font-size: 1.5rem; }

/* status words carry meaning, so they carry colour too */
[class^="status-"] { font-weight: 600; font-size: .88rem; }
.status-active, .status-paid { color: #047857; }
.status-trial { color: var(--accent-dark); }
.status-past_due, .status-open { color: #b45309; }
.status-canceled, .status-void, .status-uncollectible { color: #b91c1c; }
.status-incomplete, .status-draft { color: var(--muted); }

/* receipt */
.receipt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.receipt-head small { display: block; }
.receipt table.data tfoot th {
  background: var(--surface-2);
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 960px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; }
  .cycle-toggle { width: 100%; justify-content: center; }
  .cycle-toggle a {
    flex: 1 1 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
  .signup-actions { flex-direction: column; }
  .signup-actions .btn { width: 100%; }
  .order-line { flex-direction: column; align-items: flex-start; gap: 6px; }
  .order-amount { text-align: left; }
}

/* ------------------------------------------------------- brand identity */

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-weight: 650;
  font-size: 1.12rem;
  color: var(--text);
  letter-spacing: -.01em;
}

/* The strapline under the wordmark, with the rules either side of it drawn
   as borders rather than pixels - so they stay hairline-crisp at any size
   and any zoom, which is exactly what the baked-in version could not do. */
.brand-strapline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  flex: 0 0 auto;
  /* Named rather than inherited: the header font is set on body, and a
     strapline this small drifts visibly in width if a browser falls back
     to a different face, which would leave the rules either side of it
     sitting at different lengths from one browser to the next. */
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: .60rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #2f5aa8;
  white-space: nowrap;
  line-height: 1;
}
.brand-strapline::before,
.brand-strapline::after {
  content: "";
  height: 1px;
  width: 1.5em;
  /* flex-shrink defaults to 1, so in a narrow header Gecko collapses these
     rules to nothing while Blink keeps them. Pinning the basis keeps both
     ends the same length in both. */
  flex: 0 0 1.5em;
  background: currentColor;
  opacity: .55;
}
.brand:hover { text-decoration: none; }
.brand-mark { display: block; flex: none; }
.brand-name {
  white-space: nowrap;
  color: #132a5e;
  font-weight: 800;
  letter-spacing: -.02em;
}
.brand-logo {
  display: block;
  height: 53px;
  width: auto;
  /* An <img> with width:auto inside a flex container is the one place
     Firefox and Chromium reliably disagree: Gecko resolves the width from
     the intrinsic size rather than the aspect ratio, and will shrink or
     stretch the image depending on the container. Stating the ratio makes
     the computed width identical in both, and flex:0 0 auto stops it being
     shrunk to fit the column. */
  aspect-ratio: 720 / 210;
  flex: 0 0 auto;
}
/* 53px, not 66: the image is now the wordmark alone, where before it
   also carried the strapline in that same height. 53 + the text below
   it comes to the ~66px brand block that was asked for, and keeps the
   wordmark itself the size it already was. */

/* Header and footer */
.topbar { gap: 28px; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: var(--muted); font-size: .93rem; font-weight: 500; }
.main-nav a:hover { color: var(--text); text-decoration: none; }
.main-nav a.btn { color: #fff; }
.main-nav a.btn:hover { color: #fff; }
.owner-link { color: var(--accent-dark) !important; font-weight: 600 !important; }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .88rem;
  display: block;
  padding: 0;
}
.footer-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
}
.footer-brand p { margin: 12px 0 0; max-width: 30ch; line-height: 1.5; }
.footer-col h4 {
  margin: 6px 0 12px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-2);
}
.footer-col a { display: block; margin-bottom: 8px; color: var(--muted); }
.footer-col a:hover { color: var(--accent); }
.footer-base {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted-2);
}

/* ---------------------------------------------------------- marketing */

.home-hero { padding: 52px 0 30px; }
.hero-mark { display: block; margin: 0 auto 20px; }
.hero.compact { padding: 34px 0 10px; text-align: center; }
.hero.compact h1 { font-size: 1.9rem; }
.centered-head { display: block; text-align: center; }
.centered-head h2 { margin-bottom: 8px; }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  max-width: 960px;
  margin: 10px auto 0;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
}
.proof-strip strong { display: block; font-size: 1.7rem; font-weight: 680; letter-spacing: -.02em; }
.proof-strip span { color: var(--muted); font-size: .85rem; }

.band { background: var(--surface); border-block: 1px solid var(--border); margin: 46px 0; }
.band > .page { padding-block: 42px; }

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px;
}
.steps li { position: relative; padding-top: 6px; }
.steps .step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 10px;
}
.steps h3 { margin: 0 0 6px; font-size: 1rem; }
.steps p { margin: 0; color: var(--muted); font-size: .9rem; }

.feature-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin: 30px 0;
}
.feature-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.feature-block h2 { margin: 0 0 10px; font-size: 1.1rem; }
.feature-block p { color: var(--muted); font-size: .93rem; margin: 0 0 12px; }
.feature-block ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.feature-block li { margin-bottom: 6px; }
.feature-block.muted-block { background: var(--surface-2); border-style: dashed; }

.demo-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.demo-cta h2 { margin-top: 0; }
.demo-cta p { color: var(--muted); margin: 0; max-width: 60ch; }

.final-cta { text-align: center; padding: 44px 0 12px; }
.final-cta h2 { margin-bottom: 10px; }
.final-cta .cta { margin-top: 18px; }

.prose h2 { margin-top: 30px; font-size: 1.15rem; }
.prose p, .prose li { color: var(--muted); }
.principles { padding-left: 18px; }
.principles li { margin-bottom: 12px; }
.principles strong { color: var(--text); }

.faq { margin: 26px 0; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq summary { cursor: pointer; font-weight: 600; font-size: .96rem; }
.faq summary::marker { color: var(--accent); }
.faq details[open] summary { margin-bottom: 10px; }
.faq p { margin: 0; color: var(--muted); font-size: .93rem; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.contact-grid h2 { margin: 0 0 8px; font-size: 1rem; }
.contact-grid p { margin: 0; color: var(--muted); font-size: .9rem; }

/* --------------------------------------------------------- demo shell */

/* The portal is framed rather than modified: it replaces its own document
   when it boots, so the way back has to live in this outer page. */
html:has(body.demo-shell) {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
body.demo-shell {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.demo-chip {
  position: fixed;
  top: 12px;
  /* Centred rather than pinned left, where it sat on top of the portal's
     own logo. translateX is what actually centres it: the chip is
     inline-flex so its width follows its text, and left:50% alone would
     align its left edge to the middle rather than the chip itself. */
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}
.demo-chip:hover { text-decoration: none; color: var(--accent-dark); }
.demo-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}
body.demo-shell > .demo-fallback { display: none; }
noscript .demo-fallback {
  display: block;
  flex: none;
  margin: 0;
  padding: 8px 20px;
  font-size: .82rem;
  color: var(--muted);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ------------------------------------------------ per-company sign in */

.workspace-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.workspace-badge h1,
.workspace-badge h2 { margin: 0; font-size: 1.5rem; }
.workspace-address {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .88rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ------------------------------------------------------- owner portal */

.owner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.metric .n { display: block; font-size: 1.7rem; font-weight: 680; letter-spacing: -.02em; }
.metric .l { color: var(--muted); font-size: .84rem; }
.metric .sub { color: var(--muted-2); font-size: .78rem; margin-top: 4px; display: block; }

.plan-editor { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .9rem; }
.plan-editor th, .plan-editor td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.plan-editor th { background: var(--surface-2); font-size: .78rem; color: var(--muted); }
.plan-editor input[type="text"], .plan-editor input[type="number"] {
  width: 100%; min-width: 70px; padding: 6px 8px; font-size: .88rem;
}
.plan-editor .narrow { max-width: 108px; }
.plan-editor tr:last-child td { border-bottom: none; }

.inbox-row.handled { opacity: .55; }
.source-tag {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: .74rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .demo-cta { flex-direction: column; align-items: flex-start; }
  .plan-editor { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .main-nav { gap: 12px; font-size: .9rem; }
}

/* --------------------------------------------------- test-drive panel */

.td-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 12px 0 22px;
}
.td-links .btn { white-space: nowrap; }
.td-links a:not(.btn) {
  color: var(--accent);
  font-size: .93rem;
  padding: 5px 0;
}
.code-block {
  background: #0b1220;
  color: #cbd5e1;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .84rem;
  overflow-x: auto;
  margin: 10px 0 18px;
}

/* ----------------------------------------------------------- workforce */

.page.wide { max-width: 1180px; }
.crumb { margin: 0 0 6px; font-size: .9rem; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 18px 0;
}
.filter-bar input,
.filter-bar select { padding: 7px 10px; font-size: .88rem; }
.filter-bar input[name="q"] { flex: 1 1 240px; }

table.data.compact th,
table.data.compact td { padding: 7px 10px; font-size: .88rem; }
.lang-editor input,
.lang-editor select { padding: 6px 8px; font-size: .86rem; }

.chip-on { background: var(--accent-soft); color: var(--accent-dark); border-color: #bfdbfe; }

/* Availability reads at a glance, so it gets a colour as well as a word. */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--muted-2);
}
.dot-available { background: var(--success); }
.dot-busy { background: var(--warning); }
.dot-on-break { background: #a78bfa; }
.dot-offline { background: var(--muted-2); }

.training-completed { color: #047857; font-weight: 600; }
.training-in-progress { color: var(--accent-dark); font-weight: 600; }
.training-refresher-due { color: #b45309; font-weight: 600; }
.training-not-started { color: var(--muted); }

.flag-incomplete {
  background: rgba(245, 158, 11, .16);
  color: #92400e;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .72rem;
  font-weight: 600;
}

label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
label.checkbox input { width: auto; }

.portal-link { color: var(--accent-dark) !important; font-weight: 600 !important; }

/* ------------------------------------------------------ account security */

.qr-frame {
  display: flex;
  justify-content: center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qr-frame svg { width: 220px; height: 220px; display: block; }

.backup-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.backup-codes li {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .95rem;
  letter-spacing: .04em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  text-align: center;
}

/* ============================================================ scheduling */

.sched-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sched-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
}
.sched-views { display: flex; gap: 6px; }
.sched-views a {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .87rem;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
}
.sched-views a.on { background: var(--accent-soft); color: var(--accent-dark); border-color: #bfdbfe; font-weight: 600; }
.sched-views a:hover, .sched-move a:hover { text-decoration: none; }
.sched-move { display: flex; gap: 6px; }

.sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.sched-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sched-day { display: flex; flex-direction: column; min-width: 0; }
.sched-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: .8rem;
  color: var(--muted);
}
.sched-day-body {
  flex: 1;
  min-height: 90px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sched-chip {
  display: block;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: .78rem;
  color: var(--text);
  min-width: 0;
}
.sched-chip:hover { text-decoration: none; background: var(--accent-soft); }
.sched-chip.status-draft { border-left-color: var(--muted-2); opacity: .8; }
.sched-chip.status-cancelled { border-left-color: var(--danger); opacity: .55; text-decoration: line-through; }
.sched-time { display: block; font-weight: 650; }
.sched-title { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-meta { display: block; color: var(--muted-2); font-size: .72rem; }
.sched-none { color: var(--muted-2); font-size: .8rem; text-align: center; padding: 8px 0; }

.sched-new { margin-top: 20px; }
.sched-new summary { cursor: pointer; }
.sched-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.sched-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.sched-form-checks { display: flex; gap: 20px; flex-wrap: wrap; }
.sched-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; }

.assign-list { max-height: 340px; overflow-y: auto; margin: 10px 0; }
.assign-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-weight: 400;
}
.assign-row:hover { background: var(--surface-2); }
.assign-row.has-conflict { background: rgba(245, 158, 11, .07); }
.assign-row input { width: auto; margin-top: 3px; }
.assign-row strong { display: block; font-size: .92rem; }
.assign-row .conflict { color: #b45309; font-size: .8rem; }
.assign-row .free { color: #047857; font-size: .8rem; }

.state {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
}
.state-published, .state-accepted, .state-approved { background: rgba(16,185,129,.12); color: #047857; }
.state-offered, .state-pending { background: rgba(245,158,11,.16); color: #92400e; }
.state-declined, .state-cancelled, .state-rejected { background: var(--danger-soft); color: #b91c1c; }
.state-dropped, .state-draft { background: var(--surface-2); color: var(--muted); }
.state-completed { background: var(--accent-soft); color: var(--accent-dark); }
.state-in { background: rgba(16,185,129,.12); color: #047857; }
.state-out { background: var(--surface-2); color: var(--muted); }
.state-training { background: rgba(29,78,216,.12); color: #1d4ed8; }
.state-refreshing { background: rgba(15,118,110,.12); color: #0f766e; }
.state-one_on_one { background: rgba(124,58,237,.12); color: #6d28d9; }
.sched-chip.kind-training { border-left-color: #1d4ed8; }
.sched-chip.kind-refreshing { border-left-color: #0f766e; }
.sched-chip.kind-one_on_one { border-left-color: #7c3aed; }

.punch-log { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.punch-log li { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.punch-note { color: var(--muted); font-size: .8rem; }
.punch-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.shift-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: .9rem;
}
.shift-note .muted { margin-left: 8px; font-size: .8rem; }
.sched-sub { margin: 1.6rem 0 .8rem; font-size: 1.05rem; }


/* ========================================================= agent portal */

.agent-body {
  background: var(--bg);
  padding-bottom: 74px;
}

.agent-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.agent-hello { display: block; font-weight: 650; font-size: 1.02rem; }
.agent-sub { display: block; color: var(--muted); font-size: .82rem; }
.agent-bell { position: relative; font-size: 1.2rem; text-decoration: none; }
.agent-badge {
  position: absolute;
  top: -4px; right: -8px;
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}

.agent-problem {
  margin: 12px 16px 0;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: .88rem;
}

.agent-done {
  margin: 12px 16px 0;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--success-soft, #ecfdf5);
  border: 1px solid #6ee7b7;
  color: #047857;
  font-size: .88rem;
}

.agent-main { padding: 14px 16px 24px; max-width: 720px; margin: 0 auto; }

.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.agent-card.urgent { border-color: var(--warning); background: rgba(245,158,11,.06); }
.agent-card h2 { margin: 0 0 12px; font-size: 1rem; }
.agent-card h3 { margin: 14px 0 6px; font-size: .9rem; }
.agent-empty { color: var(--muted-2); font-size: .9rem; margin: 0; }
.agent-note { color: var(--muted); font-size: .84rem; margin: 10px 0 0; line-height: 1.5; }

.shift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.shift-row:last-of-type { border-bottom: none; }
.shift-row.unread { background: var(--accent-soft); margin: 0 -16px; padding-inline: 16px; }
a.link-row:hover { text-decoration: none; background: var(--surface-2); margin: 0 -16px; padding-inline: 16px; }
.shift-row strong { display: block; font-size: .94rem; }
.shift-when { display: block; color: var(--muted); font-size: .83rem; }
.chev { color: var(--muted-2); font-size: 1.3rem; line-height: 1; }

.agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.agent-stats .n { display: block; font-size: 1.35rem; font-weight: 680; letter-spacing: -.02em; }
.agent-stats .l { display: block; color: var(--muted); font-size: .75rem; line-height: 1.3; }

.agent-more {
  display: block;
  margin-top: 12px;
  font-size: .88rem;
  font-weight: 550;
}

.agent-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.agent-tabs a {
  flex: none;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}
.agent-tabs a.on { background: var(--accent-soft); color: var(--accent-dark); border-color: #bfdbfe; font-weight: 600; }
.agent-tabs a:hover { text-decoration: none; }

.shift-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .9rem; }
.shift-facts dt { color: var(--muted); font-size: .82rem; }
.shift-facts dd { margin: 0; }

.shift-instructions {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.shift-instructions h3 { margin: 0 0 6px; font-size: .85rem; }
.shift-instructions p { margin: 0; font-size: .9rem; color: var(--muted); }

.agent-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.agent-form:last-child { margin-bottom: 0; }
.agent-form input, .agent-form select, .agent-form textarea {
  padding: 12px;
  font-size: 16px;
  border-radius: var(--radius);
}
.btn.wide { display: block; width: 100%; text-align: center; padding: 13px; }

.qa-score {
  font-weight: 700;
  font-size: .95rem;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.qa-score.good, .qa-big.good { background: rgba(16,185,129,.12); color: #047857; }
.qa-score.fair, .qa-big.fair { background: rgba(245,158,11,.16); color: #92400e; }
.qa-score.poor, .qa-big.poor { background: var(--danger-soft); color: #b91c1c; }

.qa-headline { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.qa-big { font-size: 2rem; font-weight: 700; padding: 6px 16px; border-radius: var(--radius); }

.qa-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.qa-item:last-child { border-bottom: none; }
.qa-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.qa-item-head strong { font-size: .92rem; }
.qa-item-score { font-weight: 650; font-size: .88rem; white-space: nowrap; }
.qa-bar { height: 6px; border-radius: 3px; background: var(--border); margin: 8px 0; overflow: hidden; }
.qa-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.qa-feedback { margin: 6px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

.agent-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.agent-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  color: var(--muted-2);
  font-size: .68rem;
  text-decoration: none;
}
.agent-nav a.on { color: var(--accent-dark); font-weight: 600; }
.agent-nav .ico { font-size: 1.15rem; line-height: 1.1; }

@media (min-width: 760px) {
  .agent-nav {
    position: sticky;
    top: 0;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 8px;
    border-top: none;
    border-bottom: 1px solid var(--border);
    order: -1;
  }
  .agent-nav a { flex-direction: row; padding: 12px 18px; font-size: .88rem; }
  .agent-body { padding-bottom: 0; display: flex; flex-direction: column; }
  .agent-main { width: 100%; }
}

@media (max-width: 620px) {
  .sched-grid, .sched-week { grid-template-columns: 1fr; }
  .sched-form-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- visitor website 2026 */

html:has(body.site-marketing) {
  scroll-padding-top: 5.75rem;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 80;
  padding: 10px 14px;
  background: var(--navy);
  color: #fff;
  border-radius: 8px;
  font-weight: 650;
}
.skip-link:focus { top: 12px; text-decoration: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
}
.topbar .btn.small {
  border-radius: 999px;
  font-weight: 650;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

body.site-marketing {
  background: #f8fafc;
}
body.site-marketing main {
  max-width: none;
  padding: 0;
}
body.site-marketing .page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 28px;
}
body.site-marketing .page.narrow { max-width: 640px; }
body.site-marketing .hero h1,
body.site-marketing .hero-stage h1,
body.site-marketing .mk-hero h1 {
  color: var(--navy);
  letter-spacing: -.035em;
  font-weight: 750;
  line-height: 1.12;
}
body.site-marketing .hero.compact { padding: 48px 0 8px; }
body.site-marketing .hero.compact h1 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); }
body.site-marketing .form-page {
  max-width: 440px;
  margin: 48px auto 64px;
  padding: 0 20px;
}
body.site-marketing .form-page h1 { color: var(--navy); }
body.site-marketing .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
}
body.site-marketing .cta {
  flex-wrap: wrap;
  gap: 12px;
}
body.site-marketing .mk-cta { justify-content: flex-start; }
body.site-marketing .final-cta .mk-cta,
body.site-marketing .hero .cta { justify-content: center; }

.mk-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 28px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}
.mk-hero-copy h1 {
  font-size: clamp(2.05rem, 4.4vw, 3.15rem);
  margin: 0 0 16px;
  max-width: 16ch;
}
.mk-hero-copy .lede {
  margin: 0;
  max-width: 42ch;
  font-size: 1.08rem;
  line-height: 1.55;
  text-align: left;
}
.mk-hero-copy .cta { margin-top: 24px; }
.mk-hero-copy .hint { margin-top: 14px; max-width: 44ch; }
.mk-hero-visual { margin: 0; }
.mk-hero .ui-kpis { grid-template-columns: 1fr 1fr; }
.mk-caption {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ui-chrome {
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(19, 42, 94, .35);
  overflow: hidden;
  text-align: left;
}
.ui-chrome.ui-wide { grid-template-columns: 1fr; }
.ui-side {
  background: #0f1c3d;
  color: #cbd5e1;
  padding: 16px 12px;
  font-size: .76rem;
}
.ui-brand {
  color: #fff;
  font-weight: 750;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}
.ui-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
  margin: 12px 0 5px;
}
.ui-label.dim { opacity: .65; }
.ui-item {
  padding: 6px 8px;
  border-radius: 7px;
  color: #94a3b8;
}
.ui-item.on { background: #1e3a8a; color: #fff; font-weight: 650; }
.ui-main { padding: 14px 16px 16px; background: #f1f5f9; }
.ui-main.full { padding: 16px 18px 18px; }
.ui-bar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  font-weight: 650;
  color: var(--navy);
  margin-bottom: 12px;
}
.ui-muted { font-weight: 500; color: var(--muted); font-size: .75rem; }
.ui-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ui-kpis.four { grid-template-columns: repeat(4, 1fr); }
.ui-kpis div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.ui-kpis strong { display: block; font-size: .88rem; color: var(--navy); }
.ui-kpis span { font-size: .68rem; color: var(--muted); }
.ui-list { display: grid; gap: 7px; }
.ui-row {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: .78rem;
}
.ui-row.warn { border-left-color: var(--warning); }
.ui-row.danger { border-left-color: var(--danger); }
.ui-row b { display: block; }
.ui-row span { color: var(--muted); }
.ui-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
/* .ui-card-title is the same label as .ui-card h4 was, demoted from a
   heading because it is text inside a drawn mock of the product, not a
   section of the page. Both selectors are kept: the mock appears in
   more than one template. */
.ui-card h4,
.ui-card .ui-card-title { margin: 0 0 4px; font-size: .85rem; color: var(--navy); font-weight: 600; }
.ui-card p { margin: 0; font-size: .75rem; color: var(--muted); }

.mk-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: calc(100% - 36px);
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.mk-facts strong { display: block; font-size: 1.05rem; color: var(--navy); }
.mk-facts span { color: var(--muted); font-size: .82rem; }

.mk-problem,
.mk-outcomes,
.mk-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.mk-problem article,
.mk-outcomes article,
.mk-trust article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.mk-problem h3,
.mk-outcomes h3,
.mk-trust h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--navy);
}
.mk-problem p,
.mk-outcomes p,
.mk-trust p { margin: 0; color: var(--muted); font-size: .93rem; }

.mk-left-lede { margin: 0 0 8px; text-align: left; }
.mk-feature-grid { margin-top: 8px; }

.mk-showcase { position: relative; margin-top: 28px; }
.mk-showcase > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.mk-show-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.mk-show-tabs label {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.mk-show-panel { display: none; }
#show-today:checked ~ .mk-show-tabs label[for="show-today"],
#show-sched:checked ~ .mk-show-tabs label[for="show-sched"],
#show-agent:checked ~ .mk-show-tabs label[for="show-agent"],
#show-qa:checked ~ .mk-show-tabs label[for="show-qa"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: #bfdbfe;
}
#show-today:checked ~ [data-for="today"],
#show-sched:checked ~ [data-for="sched"],
#show-agent:checked ~ [data-for="agent"],
#show-qa:checked ~ [data-for="qa"] { display: block; }

.mk-frame { margin: 0; }
.mk-frame figcaption { margin-top: 16px; max-width: 62ch; }
.mk-frame figcaption h3 { margin: 0 0 6px; color: var(--navy); font-size: 1.1rem; }
.mk-frame figcaption p { margin: 0; color: var(--muted); }

.ui-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(19, 42, 94, .28);
  padding: 14px;
}
.ui-week-col {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 8px;
  min-width: 0;
}
.ui-week-col.dim { opacity: .55; }
.ui-week-col span {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.ui-week-col i,
.ui-week-col em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 6px 7px;
  margin-bottom: 6px;
  color: var(--navy);
}
.ui-week-col i.kind-train { border-left-color: #1d4ed8; }
.ui-week-col i.kind-one { border-left-color: #7c3aed; }

.ui-phone {
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 60px -28px rgba(19, 42, 94, .28);
  overflow: hidden;
}
.ui-phone-bar {
  padding: 14px 16px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
}
.ui-phone-card {
  margin: 12px 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: .85rem;
}
.ui-phone-card.urgent {
  background: rgba(245, 158, 11, .08);
  border-color: #fcd34d;
  font-weight: 650;
}
.ui-phone-card b { display: block; }
.ui-phone-card span { color: var(--muted); font-size: .78rem; }
.ui-phone-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px 16px 16px;
}
.ui-phone-nav i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: var(--border);
}

.ui-qa {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(19, 42, 94, .28);
  padding: 16px 18px;
}
.ui-qa-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.ui-qa-item span { color: var(--muted); font-size: .78rem; }
.ui-qa-note { margin: 12px 0 0; color: var(--muted); font-size: .82rem; }

.compare-wrap { overflow-x: auto; margin: 28px 0 8px; }

body.site-home .proof-strip,
body.site-home .mk-facts {
  max-width: 1120px;
}
body.site-marketing .band {
  margin: 0;
  background: #fff;
}
body.site-marketing .band > .page { padding-block: 56px; }
body.site-marketing .footer-grid,
body.site-marketing + .site-footer .footer-grid,
.site-footer .footer-grid,
.site-footer .footer-base {
  max-width: 1080px;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0 8px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
}
.pillar-kicker {
  margin: 0 0 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pillar h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  color: var(--navy);
}
.pillar p { margin: 0; color: var(--muted); font-size: .93rem; }

body.site-marketing .section-head.centered-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: var(--navy);
  letter-spacing: -.02em;
}
body.site-marketing .final-cta h2 { color: var(--navy); }
body.site-marketing .plan.featured { border-width: 2px; }
body.site-marketing #quote { scroll-margin-top: 5.75rem; }

/* The plans need more clearance than the header alone.
 *
 * 5.75rem is the sticky topbar, and that is all #quote needs because its
 * heading starts at its own top edge. The recommended plan's ribbon does
 * not: it is absolutely positioned at top: -11px, so it overhangs the card
 * and lands behind the topbar at an offset that looks correct for every
 * other anchor on the site. Arriving from /pricing#plans then showed the
 * cards with their top edge and the "Recommended" badge sliced off.
 *
 * 7.5rem is the topbar, the 11px overhang and a little air above it, so the
 * whole card - badge included - clears the header.
 *
 * Stated on the element rather than relying on the scroll-padding-top
 * above: that rule is scoped by html:has(), and scroll-margin-top on the
 * target itself needs no :has() support and beats it where both apply. */
body.site-marketing #plans { scroll-margin-top: 7.5rem; }

@media (max-width: 960px) {
  .mk-hero { grid-template-columns: 1fr; padding-top: 36px; }
  .mk-hero-copy h1 { max-width: none; }
  .mk-facts { grid-template-columns: 1fr 1fr; }
  .ui-side { display: none; }
  .ui-chrome { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .mk-problem,
  .mk-outcomes,
  .mk-trust { grid-template-columns: 1fr; }
  .ui-week { grid-template-columns: 1fr 1fr; }
  .ui-kpis, .ui-kpis.four, .ui-split { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mk-facts { grid-template-columns: 1fr; }
  .ui-week { grid-template-columns: 1fr; }
  .ui-kpis, .ui-kpis.four { grid-template-columns: 1fr; }
  body.site-marketing .page { padding: 40px 18px; }
  body.site-marketing .mk-hero { padding: 32px 18px 8px; }
  body.site-marketing .cta .btn { width: 100%; }
  .mk-hero-copy .cta { justify-content: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar nav { transition: none; }
  .ui-chrome, .ui-week, .ui-phone, .ui-qa { box-shadow: var(--shadow); }
}

/* ---------------------------------------------- marketing conversion 2026 */

.mk-hero-wrap {
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(37, 99, 235, .38), transparent 58%),
    linear-gradient(180deg, #0b1224 0%, #132a5e 58%, #f8fafc 100%);
  padding-bottom: 40px;
}
body.site-home .mk-hero-wrap .mk-hero {
  padding-top: 64px;
  padding-bottom: 12px;
}
body.site-home .mk-facts {
  position: relative;
  z-index: 2;
  margin-top: -28px;
}
body.site-home .mk-hero-wrap .eyebrow { color: #93c5fd; }
body.site-home .mk-hero-wrap .mk-hero-copy h1,
body.site-home .mk-hero-wrap .mk-hero-copy .lede {
  color: #fff;
}
body.site-home .mk-hero-wrap .mk-hero-copy h1 {
  max-width: 18ch;
  font-size: clamp(2.05rem, 4.6vw, 3.35rem);
}
body.site-home .mk-hero-wrap .mk-hero-copy .lede {
  color: #dbe4f0;
  max-width: 46ch;
}
body.site-home .mk-hero-wrap .hint { color: #cbd5e1; }
body.site-home .mk-hero-wrap .mk-caption { color: #94a3b8; }
body.site-home .mk-hero-wrap .btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
}
body.site-home .mk-hero-wrap .btn.ghost:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.mk-browser {
  background: #0b1224;
  border-radius: 18px;
  padding: 8px 8px 8px;
  box-shadow: 0 32px 80px -28px rgba(8, 15, 40, .75);
}
.mk-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 10px;
}
.mk-dots {
  flex: 0 0 42px;
  height: 10px;
  background:
    radial-gradient(circle at 5px 5px, #f87171 4px, transparent 5px),
    radial-gradient(circle at 18px 5px, #fbbf24 4px, transparent 5px),
    radial-gradient(circle at 31px 5px, #34d399 4px, transparent 5px);
}
.mk-url {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .08);
  color: #94a3b8;
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-browser .ui-chrome {
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.mk-live .ui-kpis strong {
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

@keyframes mk-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.mk-live .ui-kpis div,
.mk-live .ui-row,
.mk-live .ui-week-col i,
.mk-live .ui-week-col em,
.mk-live .ui-phone-card,
.mk-live .ui-qa-item,
.mk-live .ui-card {
  animation: mk-rise .55s ease both;
}
.mk-live .ui-kpis div:nth-child(1), .mk-in-1, .mk-live .ui-week-col:nth-child(1) i,
.mk-live .ui-phone-card:nth-child(2), .mk-live .ui-qa-item:nth-child(2) { animation-delay: .08s; }
.mk-live .ui-kpis div:nth-child(2), .mk-in-2, .mk-live .ui-week-col:nth-child(2) i,
.mk-live .ui-phone-card:nth-child(3), .mk-live .ui-qa-item:nth-child(3) { animation-delay: .16s; }
.mk-live .ui-kpis div:nth-child(3), .mk-in-3, .mk-live .ui-week-col:nth-child(3) i,
.mk-live .ui-phone-card:nth-child(4), .mk-live .ui-qa-item:nth-child(4) { animation-delay: .24s; }
.mk-live .ui-kpis div:nth-child(4), .mk-live .ui-week-col:nth-child(4) i { animation-delay: .32s; }
.mk-live .ui-week-col:nth-child(5) i { animation-delay: .4s; }

.mk-frame-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr);
  gap: 32px;
  align-items: center;
}
.mk-frame-split figcaption { margin-top: 0; }
.mk-inline {
  display: inline-block;
  margin-top: 12px;
  font-size: .9rem;
  font-weight: 650;
}
.mk-inline:hover { text-decoration: none; }

.mk-split-list { display: grid; gap: 28px; margin-top: 36px; }
.mk-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 32px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.mk-split-flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
.mk-split-flip .mk-split-copy { order: 2; }
.mk-split-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--navy);
  letter-spacing: -.02em;
}
.mk-split-copy p { margin: 0; color: var(--muted); }
.mk-split-copy ul {
  margin: 14px 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: .93rem;
}
.mk-split-copy li { margin-bottom: 6px; }
body.site-marketing .hero.compact .mk-cta {
  justify-content: center;
  margin-top: 20px;
}
.mk-iso {
  display: grid;
  gap: 10px;
}
.mk-iso div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.mk-iso strong { display: block; color: var(--navy); }
.mk-iso span { color: var(--muted); font-size: .85rem; }

.mk-choose {
  max-width: 62ch;
  margin: 16px auto 28px;
  text-align: center;
  color: var(--muted);
}
.mk-how-cta { margin-top: 28px; }
.mk-final {
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(37, 99, 235, .28), transparent 70%),
    #0b1224;
  color: #fff;
}
.mk-final .final-cta { padding: 64px 0; }
.mk-final h2,
.mk-final .lede { color: #fff; }
.mk-final .lede { color: #dbe4f0; }
.mk-final .btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
}
.mk-final .btn.ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

body.site-marketing .hero.compact {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
body.site-home #pricing .plans { margin-top: 8px; }
body.site-marketing .plan {
  transition: transform .18s ease, box-shadow .18s ease;
}
body.site-marketing .plan.featured {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -24px rgba(37, 99, 235, .55);
}
@media (hover: hover) {
  body.site-marketing .plan:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

body.site-marketing .main-nav > a:not(.btn) { font-weight: 550; }

@media (max-width: 960px) {
  .mk-frame-split,
  .mk-split,
  .mk-split-flip { grid-template-columns: 1fr; }
  .mk-split-flip .mk-split-copy { order: 0; }
  body.site-home .mk-hero-wrap .mk-hero-copy h1 { max-width: none; }
  body.site-home .mk-hero-wrap .mk-hero { padding-top: 36px; }
}
@media (max-width: 640px) {
  .mk-split { padding: 20px; }
  .mk-final .final-cta { padding: 48px 0; }
  .mk-browser-bar { padding-bottom: 8px; }
}

.mk-live .ui-list .ui-row {
  animation: mk-rise .55s ease both, mk-focus 4.8s ease-in-out 1.2s infinite;
}
@keyframes mk-focus {
  0%, 22%, 100% { filter: none; transform: none; }
  8% { filter: brightness(1.04); transform: translateX(2px); }
}

.mk-signup {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 36px;
  align-items: start;
  margin-top: 12px;
}
.mk-signup-copy .lede { text-align: left; max-width: 42ch; }
.mk-signup-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.mk-signup-points li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: .95rem;
}
.mk-signup-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--accent);
}
.mk-signup-form .card { box-shadow: var(--shadow-md); }
@media (max-width: 800px) {
  .mk-signup { grid-template-columns: 1fr; }
}

body.site-marketing .form-page.signup-wide {
  max-width: 980px;
  margin: 40px auto 72px;
}
.plan-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.plan-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
}
.plan-option input { margin-bottom: 6px; }
/* A checkbox or radio beside its text.

   flex-direction is named explicitly because label{} above sets
   `flex-direction: column` for the ordinary "caption above the field"
   case, and a class selector that only sets `display: flex` does not
   override it - so these rendered with the box stacked above its own
   label, which reads as an unlabelled checkbox followed by loose text.
   font-weight likewise: label{} sets 550, which is right for a field
   caption and wrong for a sentence next to a tickbox. */
.inline-choice {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
  font-weight: 400;
}
.disclosure {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
  white-space: pre-wrap;
}
.legal-body h1, .legal-body h2, .legal-body h3 { color: var(--navy); }
.legal-body p { margin: 0 0 12px; }
.signup-form h2 { margin-top: 1.5rem; }
.tiny { width: 7rem; display: inline-block; }

.mk-split-visual .ui-phone { margin: 0 auto; }
.ui-week-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) {
  body.site-home .mk-facts { margin-top: 12px; }
  .ui-week-compact { grid-template-columns: 1fr 1fr; }
}

.mk-inner-wrap {
  background:
    radial-gradient(800px 320px at 82% -12%, rgba(37, 99, 235, .34), transparent 56%),
    linear-gradient(180deg, #0b1224 0%, #16356e 100%);
  padding: 52px 0 44px;
}
.mk-inner-wrap .hero,
.mk-inner-wrap .hero.compact {
  max-width: 48rem;
  margin: 0 auto;
  padding: 8px 28px 0;
  text-align: center;
}
.mk-inner-wrap .eyebrow { color: #93c5fd; }
.mk-inner-wrap h1 { color: #fff !important; }
.mk-inner-wrap .lede {
  color: #dbe4f0;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.mk-inner-wrap .hint,
.mk-inner-wrap .mk-choose { color: #cbd5e1; }
.mk-inner-wrap a { color: #bfdbfe; }
.mk-inner-wrap a:hover { color: #fff; }
.mk-inner-wrap .cta { justify-content: center; }
.mk-inner-wrap .btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
}
.mk-inner-wrap .btn.ghost:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.mk-inner-wrap .cycle-toggle {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  margin-top: 22px;
}
.mk-inner-wrap .cycle-toggle a { color: #dbe4f0; }
.mk-inner-wrap .cycle-toggle a:hover { color: #fff; }
.mk-inner-wrap .cycle-toggle a.on { background: #2563eb; color: #fff; }
.mk-inner-wrap .hero-mark {
  filter: drop-shadow(0 8px 18px rgba(8, 15, 40, .35));
}

body.site-marketing .faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
body.site-marketing .faq details[open] {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
  .mk-live .ui-kpis div,
  .mk-live .ui-row,
  .mk-live .ui-week-col i,
  .mk-live .ui-week-col em,
  .mk-live .ui-phone-card,
  .mk-live .ui-qa-item,
  .mk-live .ui-card,
  .mk-live .ui-list .ui-row,
  body.site-marketing .plan {
    animation: none !important;
    transform: none;
    filter: none;
  }
}

/* owner console — scoped so marketing pages are unchanged */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.console {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: #f8fafc;
}

body.console .console-sidebar {
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;

  /* The menu is taller than the screen - twenty-four links across six
     groups needs about 1370px and gets 900 - so a third of the console
     sits below the fold. It has always scrolled; what it never did was
     say so, and a menu that looks complete gives nobody a reason to try.

     This is the scroll-shadow trick: the two solid "cover" layers are
     attached `local` so they travel with the content and sit over the
     shadows at rest, while the two radial shadows are attached `scroll`
     and stay pinned to the box. Scroll down and the top cover moves away,
     uncovering a shadow that says there is more above; reach the bottom
     and the lower shadow is covered again. No script, and it is correct
     at every height rather than at the one somebody measured. */
  background:
    linear-gradient(#0b1220 40%, rgba(11, 18, 32, 0)) local top / 100% 28px no-repeat,
    linear-gradient(rgba(11, 18, 32, 0), #0b1220 60%) local bottom / 100% 28px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0))
      scroll top / 100% 14px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0))
      scroll bottom / 100% 14px no-repeat,
    #0b1220;
}

body.console .console-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  color: #fff;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}
body.console .console-brand:hover { text-decoration: none; color: #fff; }
body.console .console-brand strong { display: block; font-size: .95rem; }
body.console .console-brand small {
  display: block;
  color: #94a3b8;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.console .console-menu {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 28px;
  gap: 2px;
}
body.console .console-group {
  margin: 14px 8px 4px;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}
body.console .console-menu a {
  color: #cbd5e1;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .9rem;
}
body.console .console-menu a:hover {
  background: rgba(148, 163, 184, .12);
  text-decoration: none;
  color: #fff;
}
body.console .console-menu a.on {
  background: #2563eb;
  color: #fff;
}

body.console .console-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.console .console-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
body.console .console-search {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}
body.console .console-search input {
  flex: 1;
  margin: 0;
}
body.console .console-top .who { margin-left: auto; font-size: .88rem; color: var(--muted); }
body.console .console-top .nav-toggle { margin-left: 0; display: none; }

body.console .console-bar {
  text-align: left;
  padding: 8px 20px;
  background: #eff6ff;
  color: #1e3a8a;
}

body.console main {
  max-width: none;
  width: 100%;
  padding: 20px 24px 48px;
}
body.console .console-crumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 16px;
}
body.console .console-crumbs a { color: var(--muted); }
body.console .page { max-width: 1180px; }

body.console .console-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}
body.console .console-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
body.console .console-panel h2 {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
body.console .badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
}
body.console .badge.ok { background: #dcfce7; color: #166534; }
body.console .badge.warn { background: #fef3c7; color: #92400e; }
body.console .badge.danger { background: #fee2e2; color: #991b1b; }
body.console .badge.info { background: var(--accent-soft); color: var(--accent-dark); }

body.console .plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 16px 0 28px;
}
body.console .plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.console .plan-card.featured { border-color: var(--accent); }
body.console .plan-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: .88rem;
}
body.console .plan-card .price { font-size: 1.35rem; font-weight: 680; }
body.console .plan-card form { display: grid; gap: 8px; margin-top: 8px; }
body.console .plan-card label { font-size: .8rem; color: var(--muted); }
body.console .plan-card input[type="text"],
body.console .plan-card input[type="number"] { width: 100%; }

body.console .empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  color: var(--muted);
}

@media (max-width: 960px) {
  body.console {
    grid-template-columns: 1fr;
  }
  body.console .console-sidebar {
    position: fixed;
    z-index: 40;
    transform: translateX(-110%);
    transition: transform .2s ease;
    width: min(280px, 88vw);
    box-shadow: var(--shadow-md);
  }
  body.console .console-sidebar.open { transform: none; }
  body.console .console-top .nav-toggle { display: block; }
}


/* ------------------------------------------------------- cookie consent */
/* Built from the same tokens as the rest of the site: surface, border,
   accent and radius, so the notice reads as part of the product rather
   than as a bolted-on third-party widget. */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px 44px 18px 20px;
  max-width: 960px;
  margin: 0 auto;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.cookie-banner-copy { flex: 1 1 380px; min-width: 0; }
.cookie-banner-copy h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--navy);
}
.cookie-banner-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 68ch;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Every choice is one button of the same size: nothing here is nudged. */
.cookie-banner-actions .btn { white-space: nowrap; }

.cookie-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.cookie-close:hover { color: var(--text); background: var(--surface-2); }

/* The site gives inputs an accent outline on focus; these controls have no
   border of their own, so they say the same thing explicitly. */
.cookie-banner button:focus-visible,
.cookie-dialog button:focus-visible,
.footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cookie-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
.cookie-dialog::backdrop { background: rgba(15, 23, 42, .45); }
/* Browsers with <dialog> hide a closed one themselves. Stated explicitly
   so the panel is also hidden where <dialog> is an unknown element and
   would otherwise render as a plain block. */
.cookie-dialog:not([open]) { display: none; }
/* Browsers without <dialog>: cookies.js sets the open attribute and this
   class, and the panel is centred by hand instead of by the top layer. */
.cookie-dialog.is-fallback {
  position: fixed;
  z-index: 70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cookie-dialog-head {
  position: relative;
  padding: 20px 52px 14px 22px;
  border-bottom: 1px solid var(--border);
}
.cookie-dialog-head h2 { margin: 0; font-size: 1.1rem; color: var(--navy); }
.cookie-dialog-head .cookie-close { top: 16px; right: 16px; }

.cookie-dialog-body {
  padding: 18px 22px;
  overflow-y: auto;
  max-height: min(52vh, 460px);
}
.cookie-dialog-lede {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .92rem;
}

.cookie-cats { list-style: none; margin: 0 0 18px; padding: 0; }
.cookie-cat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cookie-cat + .cookie-cat { margin-top: 10px; }
.cookie-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cookie-cat-head h3 { margin: 0; font-size: .95rem; }
.cookie-cat p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}
.cookie-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap;
}
.cookie-state label { flex-direction: row; font-size: .8rem; font-weight: 550; }
.cookie-state input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.cookie-cat-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cookie-cat-names code { background: var(--surface); border: 1px solid var(--border); }

.cookie-not-used h3 {
  margin: 0 0 8px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-2);
}
.cookie-not-used ul.plain { color: var(--muted); font-size: .88rem; }
.cookie-not-used ul.plain strong { color: var(--text); font-weight: 550; }
.cookie-not-used .hint { margin: 12px 0 0; }

.cookie-dialog-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Reopening the panel from the footer. */
.footer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.footer-link:hover { color: var(--accent); text-decoration: underline; }
.footer-col .footer-link { display: block; margin-bottom: 8px; color: var(--muted); }

@media (max-width: 640px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 16px 40px 16px 16px;
  }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 auto; text-align: center; }
  .cookie-dialog-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ------------------------------------------------- signup live feedback */

/* Advisory messages under a field. The server still decides; these only
   save somebody filling in a long form before being told the address was
   never going to work. */
.field-note { display: block; margin-top: 4px; font-size: .8rem; min-height: 1em; }
.field-note.good { color: #1a7f4b; }
.field-note.bad  { color: #b42318; }

/* The submit button is dimmed, never disabled, when a check has failed: a
   lookup that errored or a slow network must not leave a visitor unable to
   submit a form the server would have accepted. */
.is-warned { opacity: .65; }

/* The "?" beside a label. Focusable so the explanation is reachable
   without a mouse, which a title attribute alone is not. */
.hint-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px;
  border-radius: 50%; border: 1px solid var(--border);
  font-size: .68rem; font-weight: 700; color: var(--muted);
  cursor: help; vertical-align: middle;
}
.hint-dot:hover, .hint-dot:focus { color: var(--text); border-color: var(--muted); }

/* ------------------------------------------------------- signup layout */

/* Two columns so the whole form, submit buttons included, fits above the
   fold on a laptop. Six stacked fields did not, and a form whose action
   you cannot see is a form people abandon.

   Rows collapse to one column below 720px, where two columns would make
   each field too narrow to read. */
.signup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  align-items: start;
}
.signup-grid > label { margin: 0; }
.signup-grid .span-2 { grid-column: 1 / -1; }

/* The consent row. A checkbox beside its label rather than under it, and
   the box kept at its natural size and aligned to the first line of text -
   a stretched checkbox next to two lines of wrapped text reads as a
   decoration rather than a control. */
.consent-choice {
  display: flex;
  /* Every other label on the page is a stacked caption-over-field pair, so
     the base rule sets flex-direction: column. This one is a control beside
     its own sentence, and inherits that column unless it says otherwise -
     which put the box on a line of its own above the text. */
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.45;
}
.consent-choice input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 3px 0 0;
}
.consent-choice a { text-decoration: underline; }

/* The form-page wrapper is sized for a single narrow column; a two-column
   grid needs the room.

   The selector has to carry body.site-marketing to win. `:has()` takes the
   specificity of its argument, so `.form-page:has(.signup-grid)` scores two
   classes - one less than `body.site-marketing .form-page` above, which then
   held the card at 440px and squeezed the two columns into a width meant for
   one. The rule was here and simply never applied. */
body.site-marketing .form-page:has(.signup-grid) { max-width: 792px; }

/* The organisation field keeps its own full-width row - the hint and the
   live availability line under it need the room - but the box itself is
   sized for what may be typed into it. A 16-character limit behind an input
   stretched across the whole card invites a name that will not fit and then
   refuses it. 20ch leaves a little slack past the limit so the text never
   sits flush against the edge. */
.organisation-field input { max-width: 20ch; }

.signup-grid .signup-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}
.signup-grid .signup-actions .btn { flex: 0 1 auto; }

@media (max-width: 720px) {
  .signup-grid { grid-template-columns: minmax(0, 1fr); }
  .signup-grid .signup-actions { flex-wrap: wrap; }
}

/* ------------------------------------------------------- status and legal

   Status chips had no rules at all: templates have been writing
   `class="chip good"` and `class="chip bad"` for a long time and getting a
   plain grey chip. That accidentally satisfied "never rely on colour
   alone", because the word was doing all the work - but it also meant a
   failed backup and a verified one looked identical at a glance.

   These add the colour while keeping the word. The rule is that colour is
   never the only carrier: every chip below contains text saying the same
   thing, so removing the colour loses emphasis and nothing else. */
.chip.good,
.chip.bad,
.chip.warn { font-weight: 600; }

.chip.good {
  background: rgba(4, 120, 87, .1);
  border-color: rgba(4, 120, 87, .35);
  color: var(--success-text);
}
.chip.bad {
  background: var(--danger-soft);
  border-color: rgba(185, 28, 28, .35);
  color: var(--danger-text);
}
.chip.warn {
  background: rgba(146, 64, 14, .1);
  border-color: rgba(146, 64, 14, .35);
  color: var(--warning-text);
}

/* Used on their own for inline status text, mostly inside tables. */
.good { color: var(--success-text); }
.bad  { color: var(--danger-text); }
.warn { color: var(--warning-text); }

/* A fact the operator has not published. Deliberately quiet rather than
   alarming: on a page a customer reads, this is an absence, not an error
   they can do anything about. */
.unpublished {
  color: var(--muted);
  font-style: italic;
}

/* A registered address keeps its line breaks without the template having
   to emit <br> and mark the result safe. */
.preserve-lines { white-space: pre-line; }

.footer-vat { color: var(--muted); }

/* Legal documents: the operator writes Markdown in the console and it is
   rendered by services.commerce.legal_html. */
.legal-facts { margin: 0 0 28px; }
.legal-facts dt {
  font-weight: 600;
  color: var(--muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 16px;
}
.legal-facts dd { margin: 4px 0 0; }

.legal-callout {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--warning);
  background: rgba(245, 158, 11, .08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-callout p:first-child { margin-top: 0; }
.legal-callout p:last-child { margin-bottom: 0; }

/* A retention table is wider than a phone. It scrolls inside its own box
   so the page body never scrolls sideways. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
}
.legal-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: .92rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background: var(--surface-2);
  font-weight: 600;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 16px;
  /* A fieldset defaults to min-width: min-content and will not shrink past
     it - the one element that ignores the usual width rules. On a 390px
     screen the mail settings fieldset held the whole document 75px wide
     and dragged its own fields off the edge with it, which reads as a
     broken page rather than a browser default asserting itself.

     Global rather than on .mail-fieldset: this is a workaround for how
     fieldsets behave, not a style for one page, and the bare fieldset on
     the account privacy page would meet the same wall the moment its
     content grew. */
  min-width: 0;
}
fieldset legend {
  font-weight: 600;
  font-size: .9rem;
  padding: 0 6px;
}

/* Keyboard focus, everywhere, not only on the handful of controls that
   named it. A visible focus indicator is 2.4.7, and the browser default
   disappears the moment anything sets outline:none. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ----------------------------------------------------- mail role cards

   The email settings page shows one card per address the platform knows
   about, whether or not it is set up. It replaced a table of what existed
   plus a separate line naming what did not, which put "what is this for"
   and "is it working" in different places and made six roles look like
   equals when only one of them is load-bearing. */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}

.role-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The required address, missing. The one card on the page that should
   pull the eye, so it gets the only coloured edge. */
.role-card-attention {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger-soft), var(--shadow);
}

.role-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.role-card-head h3 { margin: 0; font-size: 1rem; }

.role-name {
  font-size: .78rem;
  color: var(--muted);
}

.role-purposes {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--muted);
}
.role-purposes li { margin: 3px 0; }

.role-address {
  margin: 0;
  word-break: break-all;
}

.role-state {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}

/* Pushed to the bottom so cards of differing height still line their
   controls up along one edge. */
.role-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.muted { color: var(--muted); }

/* ============================================================ primitives

   .stack, .row, .field and .table: the four things this application
   builds forms and lists out of.

   They have been narrowed twice and widened twice. First they were scoped
   to .mail-page, on the reasoning that styling them more broadly would
   restyle thirty other pages in a change meant to be about one; the cost
   was that thirty console pages rendered the same class names as bare
   browser defaults. Then they were scoped to body.console, which fixed
   those thirty and left seven customer-facing pages - signup, the account
   pages, the team page, support - writing the same class names and
   getting nothing.

   The lesson is the same both times, so they are unscoped now. A layout
   primitive that only works in one half of the product is a trap for
   whoever writes the next page in the other half. */

.stack {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* A form field that runs the full 1180px of the console is not a form
   field, it is a horizon. The cap is on the label rather than the form so
   that a .stack holding a table or a row of cards is not narrowed too. */
.stack > label,
.stack > .inline-choice { max-width: 34rem; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* A card row is a line of labelled controls with a button at the end, and
   those line up along their bottom edge - the button next to the input,
   not next to the label above it. Restated at a specificity that beats the
   rule above rather than relying on source order. */
.card.row,
.row.row-fields {
  align-items: flex-end;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .9rem;
  font-weight: 550;
  max-width: 34rem;
}
.field > input,
.field > select { width: 100%; }
/* A checkbox reads left to right; the column layout above puts the box on
   its own line above the words, which reads as two controls. */
.field.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-weight: 400;
}
.field.checkbox > input { width: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.table th,
.table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.table thead th {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ============================================================ email page

   The owner console's email settings. What is left here is the parts only
   that page has. */

/* Wide content scrolls inside its own box. The delivery log has eight
   columns and the page must not scroll sideways because of it. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 14px 0;
}
/* A wrapped table hands its frame to the wrapper. table.data draws its own
   border, radius and margin, and nesting the two produced a double rule
   with a sliver of background between them - and, worse, the table's
   overflow:hidden clipped the very scrolling the wrapper exists to give. */
.table-scroll > table.data {
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin: 0;
}

.pre-wrap { white-space: pre-wrap; margin: .5rem 0 0; }

/* Help text belongs under the thing it explains, not centred in the
   column. .lede is a landing-page rule - 620px wide with auto margins,
   which is right under a centred hero and wrong under a left-aligned
   console heading, where it reads as a paragraph that has drifted. Every
   console page borrows the class, so every console page gets the fix. */
body.console .lede { margin-left: 0; margin-right: 0; max-width: 62ch; }

/* ---------------------------------------------------------- the verdict

   Can the platform send mail, and if not, which of the three things it
   needs is missing. First thing on the page because it is the only
   question most visits are here to answer. */

.mail-verdict {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin: 0 0 22px;
}
.mail-verdict.is-blocked { border-left-color: var(--danger); }

.mail-verdict-head { display: flex; align-items: flex-start; gap: 12px; }
.mail-verdict-head h2 { margin: 0 0 3px; font-size: 1.15rem; }
.mail-verdict-head p { margin: 0; color: var(--muted); font-size: .92rem; }

/* A shape as well as a colour, so the state does not rely on hue alone
   (WCAG 1.4.1). A filled disc when mail works, a ring when it does not. */
.mail-verdict-mark {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--success);
}
.mail-verdict.is-blocked .mail-verdict-mark {
  background: transparent;
  border: 3px solid var(--danger);
}

.mail-checks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 10px;
}
.mail-check {
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.mail-check-state {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mail-check.is-ok  .mail-check-state { color: var(--success-text); }
.mail-check.is-bad .mail-check-state { color: var(--danger-text); }
.mail-check.is-bad { border-color: #fca5a5; }
.mail-check-name { display: block; font-weight: 600; font-size: .93rem; margin: 2px 0 1px; }
.mail-check-note { display: block; font-size: .82rem; color: var(--muted); }

.mail-blockers {
  margin: 16px 0 0;
  padding-left: 1.3rem;
  font-size: .9rem;
  color: var(--muted);
}
.mail-blockers li { margin: 6px 0; }

/* ----------------------------------------------------------- the layout

   A rail of section links beside the content. The page is long - five
   sections, one of them an unbounded log - and without it the only way
   from the delivery log back to the connection settings is the scrollbar. */

.mail-layout {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.mail-nav {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .88rem;
}
.mail-nav a {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  border-left: 2px solid transparent;
  text-decoration: none;
}
.mail-nav a:hover { background: var(--surface-2); color: var(--text); }
.mail-nav a.is-current {
  color: var(--accent-dark);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.mail-body { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.mail-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  scroll-margin-top: 18px;
}
.mail-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.mail-section-head h2 { margin: 0 0 5px; font-size: 1.2rem; }
.mail-section-head .lede { margin-bottom: 0; }
.mail-section h3 { font-size: 1rem; margin: 22px 0 8px; }

.mail-fieldset { background: var(--surface-2); }
.mail-fieldset .lede { font-size: .86rem; }

/* The connection test sits below the save button but is a separate form -
   it must not read as part of it. */
.mail-inline-test {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------- secret input

   A password box with a Show button beside it. Nothing stored is ever sent
   to this page, so the only thing revealable is what was just typed - which
   is the point: a mailbox password typed blind is how the wrong one gets
   saved, and the failure then reads as an unreachable host. */
.secret-field {
  display: flex;
  align-items: stretch;
  gap: 7px;
}
.secret-field > input { flex: 1 1 auto; min-width: 0; }
.secret-field .reveal { flex: 0 0 auto; }

/* ------------------------------------------------------------ addresses */

/* Display name, kind and reply-to used to be write-only: settable in the
   form at the foot of the page and readable nowhere. */
.addr-meta {
  margin: 0;
  display: grid;
  gap: 5px;
  font-size: .82rem;
  border-top: 1px solid var(--border);
  padding-top: 9px;
}
.addr-meta > div { display: flex; gap: 8px; }
.addr-meta dt { color: var(--muted); flex: 0 0 7.5rem; }
.addr-meta dd { margin: 0; word-break: break-word; }

.role-advanced summary,
.mail-adder-more summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--accent-dark);
  font-weight: 550;
}
.role-advanced[open] summary,
.mail-adder-more[open] summary { margin-bottom: 9px; }
.role-advanced .lede { font-size: .82rem; margin-bottom: 9px; }
.mail-adder-more { margin: 4px 0; }
.mail-adder-more[open] {
  border-left: 2px solid var(--border);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* The heading is inside the summary so the whole row is the toggle; the
   marker is the only thing that should not look like heading text. */
.mail-adder { margin-top: 24px; scroll-margin-top: 18px; }
.mail-adder > summary { cursor: pointer; }
.mail-adder > summary h3 { display: inline; margin: 0; font-size: 1rem; }
.mail-adder[open] > summary { margin-bottom: 6px; }

.routing-table td:first-child { max-width: 22rem; }

/* ------------------------------------------------------------- delivery */

.metric-bad .n { color: var(--danger-text); }

.log-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
}
.log-filter .field { max-width: none; }
.log-filter .field:first-child { flex: 1 1 18rem; }
.log-filter #log-count { white-space: nowrap; }

@media (max-width: 900px) {
  .mail-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Horizontal above the content rather than a rail beside it, and no
     longer sticky - a sticky bar on a phone costs more height than it
     saves scrolling. */
  .mail-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 4px;
  }
  .mail-nav a {
    border-left: 0;
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .mail-nav a.is-current { border-color: var(--accent); }
  .mail-section { padding: 18px 16px; border-radius: var(--radius); }
  .addr-meta > div { flex-direction: column; gap: 1px; }
  .addr-meta dt { flex: none; }
}

/* ------------------------------------------------- email page, second pass

   Save/cancel, input states, progressive disclosure and the confirmation
   message. Still scoped to .mail-page, except the flash bar which has to
   sit above everything. */

/* The confirmation follows the reader. Every form here redirects to the
   top of the page, so a save made at the foot of the address book used to
   put its own confirmation a screen away. */
.mail-flash {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding-top: 8px;
  background: linear-gradient(#f8fafc 78%, rgba(248, 250, 252, 0));
}
.mail-flash > .alert,
.mail-flash > .notice { flex: 1 1 auto; margin: 0; }
.mail-flash-close {
  flex: 0 0 auto;
  align-self: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.mail-flash-close:hover { color: var(--text); }

/* An input the page believes is wrong. Border and note together - colour
   alone would not carry it (WCAG 1.4.1). */
.mail-page [aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger-soft);
}

.mail-page .form-actions { gap: 10px; }
.dirty-note {
  color: var(--warning-text);
  font-weight: 600;
}
.dirty-note::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--warning);
  vertical-align: middle;
}

/* Server details, hidden until they are wanted. Choosing a service fills
   all three in, so for almost every installation they are output. */
.smtp-advanced {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 14px;
  margin: 4px 0 0;
}
.smtp-advanced > summary {
  cursor: pointer;
  padding: 11px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.smtp-advanced-title { font-weight: 600; font-size: .9rem; }
.smtp-advanced[open] {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.smtp-advanced[open] > summary { margin-bottom: -4px; }

.role-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }

/* ------------------------------------------------------------ responsive

   Three sizes, not one. The rail is the first thing to run out of room,
   well before the cards do. */

@media (max-width: 1200px) {
  .mail-layout { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 20px; }
  .mail-nav a { padding: 6px 8px; font-size: .84rem; }
}

@media (max-width: 560px) {
  /* One card per row regardless of the auto-fill minimum, which at 17rem
     would otherwise force a sideways scroll on a narrow phone. */
  .role-grid { grid-template-columns: minmax(0, 1fr); }
  .mail-checks { grid-template-columns: minmax(0, 1fr); }
  .mail-section { padding: 15px 13px; }
  .mail-section-head { gap: 9px; }
  /* Let the chips drop onto their own line. .role-chips has said
     flex-wrap since it was written, but the header holding it had not, so
     the group was squeezed against the right edge and carried the page
     23px past a 390px viewport.

     Here rather than on the base rule: wrapping at every width made the
     cards ragged, chips beside the title on a short heading and below it
     on a long one. This block already moved these chips to flex-start,
     so the narrow case was anticipated and only half-answered. */
  .role-card-head { flex-wrap: wrap; }
  .role-chips { justify-content: flex-start; }
  .log-filter { flex-direction: column; align-items: stretch; }
  .log-filter #log-count { text-align: right; }
  .field { max-width: none; }
  /* Stacked, so a full-width Save is not sitting beside a full-width
     Cancel at 40 pixels each. */
  .stack > label,
  .stack > .inline-choice { max-width: none; }
  .mail-page .form-actions { flex-direction: column; align-items: stretch; }
  .mail-page .form-actions .btn { width: 100%; }
  .dirty-note { text-align: center; }
  .secret-field { flex-wrap: wrap; }
  .secret-field > input { flex: 1 1 100%; }
}

/* ======================================================= mail activity

   The owner console's correspondence log: /console/mail.

   It borrows the email page's primitives by carrying .mail-page as well
   as .traffic-page, so the tables, fields and ledes match the page next
   door rather than being a second, slightly different console style. What
   is here is only the parts that page has no equivalent of - the grouping
   cards, which are links rather than panels, and the direction column. */

.traffic-page .traffic-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.traffic-page .traffic-toolbar .field { max-width: 12rem; flex: 1 1 9rem; }
.traffic-page .traffic-toolbar .field > span { font-size: .8rem; color: var(--muted); }
.traffic-page .traffic-toolbar .link { margin-bottom: 8px; }

.traffic-page h2 {
  font-size: 1.15rem;
  margin: 30px 0 6px;
  scroll-margin-top: 18px;
}

/* A card is a link to a filtered list, so it has to look pressable and
   behave like a link - which means a focus ring and a hover state, not
   just a border. Card-shaped things that only respond to a mouse are the
   usual way a keyboard user loses a page like this. */
.traffic-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
.traffic-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.traffic-card.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow);
}
/* The only coloured edge on the grid, kept for the one state somebody has
   to act on. The count chip inside says so in words as well. */
.traffic-card-attention { border-color: var(--danger); }

.traffic-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.traffic-card-head h3 {
  margin: 0;
  font-size: .97rem;
  word-break: break-word;
}
.traffic-total {
  font-size: 1.25rem;
  font-weight: 680;
  letter-spacing: -.02em;
}

.traffic-purpose,
.traffic-empty {
  font-size: .84rem;
  color: var(--muted);
}

.traffic-counts {
  display: flex;
  gap: 14px;
  margin: 4px 0 0;
  font-size: .86rem;
  color: var(--muted);
}
.traffic-counts strong { color: var(--text); }

.traffic-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
}
.traffic-when { font-size: .78rem; color: var(--muted-2); }

.traffic-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--muted);
  margin: 0 0 14px;
}

.traffic-page .traffic-time { white-space: nowrap; }

/* Direction is stated in words in the cell; the arrow is decoration and
   the colour is a third cue, never the only one (WCAG 1.4.1). */
.dir { white-space: nowrap; font-weight: 550; }
.dir-out { color: var(--accent-dark); }
.dir-in  { color: var(--success-text); }

/* Eight columns share the width, and the subject is the one somebody
   reads rather than scans. Without a floor it collapsed to four words a
   line while two columns of email addresses sat comfortable beside it. */
.traffic-page .table .traffic-subject { min-width: 10rem; }
/* An email address has no break opportunity in it, so two columns of them
   held the table wider than the page and it scrolled sideways even on a
   large screen. Letting them wrap is what lets the table fit; the box
   still scrolls when it genuinely cannot. */
.traffic-page .table code {
  font-size: .82rem;
  overflow-wrap: anywhere;
}
/* Our own address is always short and always on our own domain, and it
   repeats down the column - so it is the one that should hold its line.
   Breaking "support@ageni / qa.eu" on every row to buy width for a
   correspondent address that may genuinely be long is the wrong trade. */
.traffic-page .table .traffic-ours code { overflow-wrap: normal; white-space: nowrap; }

.traffic-workspace,
.traffic-detail {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}
.traffic-detail { margin-top: 3px; max-width: 44ch; }

@media (max-width: 560px) {
  .traffic-page .traffic-toolbar { flex-direction: column; align-items: stretch; }
  .traffic-page .traffic-toolbar .field { max-width: none; }
  .traffic-page .traffic-toolbar .btn { width: 100%; }
}

/* ==================================================== console page parts

   Named classes for the handful of things console pages had been doing
   with a style attribute. An inline style cannot respond to a media
   query, cannot be themed, and cannot be found by anybody looking for why
   two pages that should match do not - which is how the console ended up
   with four different ways of writing "a paragraph beside a status pill".

   .flush, .row-spaced and .row-fields are the only utilities here on
   purpose; the rest name what the thing is. */

.flush { margin: 0; }

/* A status chip is one word to a reader even when it is three to a
   typesetter. "Waiting to send" broken across two lines in a narrow table
   column reads as two chips, and .pill - the same idea under another name
   - has said nowrap all along. */
body.console .chip { white-space: nowrap; }
.row.row-spaced { margin-top: 12px; }

/* A quiet aside: content that explains rather than asks. Used where a
   settings page states what the product does and does not offer as a
   choice, which must not read as another form. */
body.console .subtle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 28px 0 0;
}
body.console .subtle h2 { margin-top: 0; font-size: 1rem; }
body.console .subtle dt { font-weight: 600; margin-top: 12px; }
body.console .subtle dd { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
body.console .subtle dl { margin: 0; }

/* One entry in a conversation - a support ticket message, or a note on a
   customer. The internal variant is marked with an edge as well as the
   word "Internal note" it already carries, because that distinction is
   the one somebody must not misread. */
.message { margin-bottom: 12px; gap: 6px; }
.message-internal { border-left: 3px solid var(--warning); }
/* The other side of a support conversation. An edge and the word above the
   timestamp, not colour alone. */
.message-support { border-left: 3px solid var(--accent); }
.message-body { margin: 0; white-space: pre-wrap; }
.note-card { margin-top: 10px; }

/* A raw export, shown for reading rather than editing. Bounded, because
   the whole point of the page is that it may be enormous. */
body.console .data-dump {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
  max-height: 600px;
  font-size: .82rem;
}

/* "Nothing here" said the same way twice.

   Console pages used .empty on some pages and .empty-state on others -
   muted text on one, a dashed panel on the next - for the identical
   sentence. They are one look now. A td keeps the plain treatment: a
   dashed panel inside a table cell reads as a broken row. */
body.console p.empty,
body.console .empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  color: var(--muted);
  margin: 14px 0;
}
body.console td.empty { padding: 22px 0; border: 0; background: none; }

/* ================================================= email templates page

   A list of the twelve messages beside the one being edited, rather than
   a list above a form with nothing saying which it belongs to. */

.templates-layout {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.templates-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.template-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.template-item:hover { background: var(--surface-2); text-decoration: none; }
.template-item.is-current {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.template-name { font-weight: 600; font-size: .9rem; }
/* The subject is what a customer sees in their inbox, so it is what
   identifies the message in the list. Clamped rather than truncated with
   an ellipsis, so a long subject still shows its beginning and its shape. */
.template-subject {
  font-size: .8rem;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.templates-editor {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.templates-editor h2 { margin: 0 0 6px; font-size: 1.2rem; }
.templates-editor h3 { margin: 26px 0 8px; font-size: 1rem; }
/* The body is the field somebody actually works in, so it is the one that
   is allowed to use the full width of the editor. */
.templates-page .field.template-body { max-width: none; }
.templates-page .field.template-body > textarea { width: 100%; }

.template-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.template-preview-subject {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.template-preview pre { margin: 0; font-size: .86rem; }

@media (max-width: 900px) {
  .templates-layout { grid-template-columns: minmax(0, 1fr); }
  /* Sticky is a desktop affordance. Stacked, it would pin the list over
     the editor somebody is typing in. */
  .templates-list { position: static; max-height: 22rem; }
}

/* The legal-document switcher in that page's header. Dot-separated links
   in a header read as body text; these are navigation between four
   documents, and the current one has to be visible at a glance. */
body.console .legal-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: .88rem;
}
body.console .legal-switch a {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
}
body.console .legal-switch a:hover { background: var(--surface-2); color: var(--text); }
body.console .legal-switch a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

/* ================================================= console figure tiles

   A .stat inside a .console-panel is a box inside a box: both carry a
   white background, a border and a shadow, so the dashboard read as
   twenty small cards floating on eight larger ones, and four figures in a
   220px panel wrapped into a ragged two-by-two with 26px of padding each.

   Inside a panel the figures are not cards - they are a table of numbers,
   and they lay out as one. The standalone .stat, used on pages that have
   no panel around it, keeps the card treatment it had. */

body.console .console-panel .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 4px 14px;
  margin: 0;
}
body.console .console-panel .stat {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 0;
  min-width: 0;
}
body.console .console-panel .stat .n {
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.15;
}
body.console .console-panel .stat .l { font-size: .8rem; }
body.console .console-panel .hint { margin-top: 14px; font-size: .82rem; }
body.console .console-panel > h2 + .stats { margin-top: 2px; }

/* ============================================================== inbox

   /console/inbox: the platform's own mailboxes, read live.

   A rail of addresses and folders beside the list, which is the shape
   every mail client has settled on for the same reason - the two things a
   reader switches between are which mailbox and which folder, and both
   have to be one click away from wherever they are. */

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.inbox-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  position: sticky;
  top: 18px;
}
.inbox-rail-head {
  margin: 10px 8px 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.inbox-rail-head:first-child { margin-top: 2px; }

.inbox-box,
.inbox-folder {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  border-left: 2px solid transparent;
  font-size: .9rem;
}
.inbox-box:hover,
.inbox-folder:hover { background: var(--surface-2); text-decoration: none; }
.inbox-box.is-current,
.inbox-folder.is-current {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}
.inbox-box-name { display: block; word-break: break-all; }
.inbox-box-role { display: block; font-size: .76rem; color: var(--muted); }
.inbox-box.is-current .inbox-box-role { color: var(--accent-dark); }

.inbox-main { min-width: 0; }

.inbox-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.inbox-search .field:first-of-type { flex: 1 1 20rem; max-width: none; }

.inbox-count { margin: 0 0 8px; font-size: .85rem; color: var(--muted); }

.inbox-table .inbox-when,
.inbox-table .inbox-state { white-space: nowrap; }
.inbox-who { display: block; }
.inbox-addr,
.inbox-clip { display: block; color: var(--muted); font-size: .78rem; }
.inbox-subject { min-width: 14rem; }
/* Unread is stated in the State column in words; the weight is the second
   cue, not the only one. */
.inbox-table tr.is-unread .inbox-who,
.inbox-table tr.is-unread .inbox-subject a { font-weight: 680; }

/* ------------------------------------------------------- one message */

.inbox-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.inbox-cc { font-size: .84rem; color: var(--muted); }

.inbox-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.inbox-plain-note {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
/* The body keeps the sender's line breaks and wraps at the reader's width.
   A <pre> that scrolled sideways would make long paragraphs unreadable,
   which is most mail. */
.inbox-text {
  margin: 0;
  font-family: inherit;
  font-size: .93rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Images that arrived in a message, shown rather than listed. Capped
   rather than full-bleed: a phone photo is 4000px wide and would push the
   reply form off the screen. */
.inbox-pictures {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 8px;
}
.inbox-picture { margin: 0; max-width: 22rem; }
.inbox-picture img {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  width: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.inbox-picture figcaption {
  margin-top: 5px;
  font-size: .78rem;
  color: var(--muted);
  word-break: break-all;
}

.inbox-files {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.inbox-files li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .88rem;
}

/* A reply is one form, so its fields are one width. To and Subject took
   the console's 34rem field cap while the body ran the full column, which
   read as three unrelated controls stacked up rather than a message. */
.inbox-reply { max-width: none; }
.inbox-page .inbox-reply .field { max-width: none; }
.inbox-page .inbox-reply .field > textarea { width: 100%; }

@media (max-width: 900px) {
  .inbox-layout { grid-template-columns: minmax(0, 1fr); }
  /* Sticky is a desktop affordance. Stacked, the rail would pin itself
     over the message somebody is reading. */
  .inbox-rail { position: static; }
}


/* ---------------------------------------------------------- KPI cards */
/* The overview. Auto-fit rather than a fixed column count: the number of
   cards is the number of metrics the workspace actually sends, which is
   nought on the day it signs up and a dozen once a feed is connected. */
.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 18px 0 24px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.kpi-label {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-value {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 650;
  color: var(--navy);
  line-height: 1.1;
}
.kpi-foot { margin: 0; }

/* Direction, not judgement of the reader. Which way counts as better is
   decided by the metric's own target (AHT falling is good, CSAT falling is
   not), so the colour is chosen by the caller and never by the sign. */
.trend { font-weight: 650; white-space: nowrap; }
.trend-up { color: #047857; }
.trend-down { color: #b91c1c; }

/* Text for a screen reader only. The trend arrow's meaning is carried by
   colour, which is not available to everybody. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-color-scheme: dark) {
  .kpi-card { background: var(--surface-2, #1a1f2e); }
}

/* ------------------------------------------------------------ timeline */
/* One agent's events on a single thread. A list rather than a chart: the
   useful question is what happened and in what order, and forty rows of
   that read faster than a plot with forty labels on it. */
.timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 4px 12px;
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--border);
  font-size: .84rem;
}
.timeline-when { color: var(--muted); white-space: nowrap; }
.timeline-what { font-weight: 600; }
.timeline-detail { grid-column: 2; font-size: .78rem; font-weight: 400; }
.timeline-qa { border-left-color: var(--accent); }
.timeline-coaching { border-left-color: #7c3aed; }
.timeline-training { border-left-color: #0891b2; }
.timeline-pip { border-left-color: var(--danger); }
.timeline-alert { border-left-color: var(--warning); }
.timeline-one_to_one { border-left-color: #059669; }
@media (max-width: 560px) {
  .timeline-item { grid-template-columns: 1fr; }
  .timeline-detail { grid-column: 1; }
}

/* The bulk bar above the directory. Sticky so the action stays reachable
   while the reader scrolls a long list ticking rows - the alternative is
   scrolling back to the top having forgotten which action they wanted. */
.bulk-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* A short label/value list — the state of one connection. A definition
   list rather than a table: these are facts about one thing, not rows. */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 10px 0;
  font-size: .84rem;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* Removal, which deletes a stored credential. Coloured so it does not sit
   in a row of identical buttons next to "Sync now". */
.btn-danger {
  border-color: #fca5a5;
  color: #b91c1c;
  background: var(--danger-soft);
}

/* The per-row tick in the directory's bulk bar. A little breathing room so
   the checkbox is not flush against the name beside it, and a hit area
   worth aiming at on a touch screen. */
.bulk-tick {
  width: 16px;
  height: 16px;
  margin: 0 4px;
  cursor: pointer;
}

/* The report builder: saved list beside the form. Collapses to one column
   before the sidebar would squeeze the form's selects unreadable. */
.report-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}
.report-layout .is-current > a { font-weight: 650; color: var(--navy); }
@media (max-width: 760px) {
  .report-layout { grid-template-columns: 1fr; }
}

/* The demo banner. Same shape as the support-session banner above it and
   for the same reason: a visitor must never be able to mistake the sample
   workspace for a real one, on any page, including ones added later. */
.demo-banner {
  background: rgba(37, 99, 235, .10);
  border-bottom: 1px solid rgba(37, 99, 235, .35);
  color: #1e3a8a;
  padding: 9px 20px;
  font-size: .88rem;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.demo-banner a { color: #1e3a8a; text-decoration: underline; font-weight: 600; }

/* ------------------------------------------------------- the app shell */
/* The customer portal's layout: a slim top bar, a sidebar of grouped
   pages down the left, the page on the right. The groups and their order
   come from web/navigation.py; this only draws them. The marketing site
   never gets this - it keeps the horizontal header above. */
.app-shell { background: var(--surface-2); }
.app-topbar { position: sticky; top: 0; z-index: 20; }
.app-topbar .brand { margin-right: auto; }
.app-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
}
.app-layout > main { min-width: 0; }

.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 14px 10px 24px;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}
.side-group { margin: 6px 0 10px; }
.side-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 8px 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-icon { width: 1.1em; display: inline-block; text-align: center; opacity: .8; }
.side-link {
  display: block;
  padding: 7px 10px 7px 30px;
  border-radius: 8px;
  color: var(--navy);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.3;
}
.side-link.side-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  font-weight: 650;
  margin-bottom: 2px;
}
.side-link:hover { background: var(--surface-2); }
.side-link.is-current {
  background: rgba(37, 99, 235, .10);
  color: #1e3a8a;
  font-weight: 650;
}

.account-menu { margin-left: 16px; }
.account-details summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.account-details summary::-webkit-details-marker { display: none; }
.account-details[open] summary { background: var(--surface-2); }
.account-panel {
  position: absolute;
  right: 20px;
  top: 56px;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: grid;
  z-index: 30;
}
.account-panel a, .account-panel .link {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--navy);
  text-decoration: none;
  font-size: .9rem;
  text-align: left;
  width: 100%;
}
.account-panel a:hover, .account-panel .link:hover { background: var(--surface-2); }
.account-panel a[aria-current="page"] { font-weight: 650; }

.app-shell .page { padding-top: 22px; }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: none;
    z-index: 25;
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow); }
  .app-topbar .nav-toggle { display: block; }
  .account-details summary .who .role { display: none; }
}

/* ---------------------------------------------------------- Charts */
/* Inline SVG drawn by templates/_charts.html. Bars borrow the status
   colours of the pills, so a bar and the figure beside it in the table
   agree; a chart that has nothing to draw renders one sentence instead. */
.chart { margin: 14px 0 8px; }
.chart figcaption {
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.chart svg { width: 100%; height: auto; display: block; font-family: inherit; }
.chart-label, .chart-value { font-size: 12px; fill: var(--navy); }
.chart-note, .chart-axis { font-size: 11px; fill: var(--muted); }
.chart-track { fill: var(--surface-2); }
.chart-bar { fill: var(--accent); }
.chart-bar.status-achieved { fill: var(--success); }
.chart-bar.status-at_risk { fill: var(--warning); }
.chart-bar.status-below { fill: var(--danger); }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-target { stroke: var(--muted-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.chart-legend { margin: 4px 0 0; }
.chart-empty { margin: 10px 0; }
.chart-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 24px;
}
@media (prefers-color-scheme: dark) {
  .chart-dot { fill: var(--surface-2, #1a1f2e); }
}
.section-title {
  font-size: 1rem;
  margin: 26px 0 0;
  color: var(--navy);
}
.kpi-value.text-danger { color: var(--danger-text); }
.kpi-value.text-warning { color: var(--warning-text); }

/* ---------------------------------------------------------- Agent Hub */
.agent-cell { display: flex; align-items: center; gap: 10px; }
.avatar-sm, .avatar-lg {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover; background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 650; flex: 0 0 auto;
}
.avatar-sm { width: 32px; height: 32px; font-size: .85rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 10px 0 14px; flex-wrap: wrap; }
.tabs .tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px;
  color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.tabs .tab[aria-selected="true"] { color: var(--accent-dark); border-bottom-color: var(--accent); }
.tabpane[hidden] { display: none; }
.tone-urgent { border-left: 4px solid var(--danger); }
.tone-soon { border-left: 4px solid var(--warning); }
.tone-watch { border-left: 4px solid var(--accent); }
.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attention-list li { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.attention-list .n { font-weight: 700; margin-right: 6px; }
.progress { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; min-width: 80px; }
.progress > span { display: block; height: 100%; background: var(--accent); }
.progress.ok > span { background: var(--success); }
.progress.low > span { background: var(--danger); }
.assign-rows .row { align-items: end; }
.note-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: #fff; }
.note-card .meta { color: var(--muted); font-size: .85rem; }
.sev-high { color: var(--danger-text); font-weight: 650; }
.sev-medium { color: var(--warning-text); font-weight: 650; }
.sev-low { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .attention-list li, .note-card { background: var(--surface-2, #1a1f2e); }
}
.pill.health-healthy, .kpi-value.health-healthy { color: var(--success-text); }
.pill.health-healthy { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); }
.pill.health-watch, .kpi-value.health-watch { color: var(--warning-text); }
.pill.health-watch { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); }
.pill.health-at_risk, .kpi-value.health-at_risk { color: var(--danger-text); }
.pill.health-at_risk { background: var(--danger-soft); border-color: #fca5a5; }
.pill.health-critical, .kpi-value.health-critical { color: #fff; }
.pill.health-critical { background: var(--danger); border-color: var(--danger); font-weight: 650; }
.pill.health-unrated, .kpi-value.health-unrated { color: var(--muted); }
a.kpi-card { color: inherit; text-decoration: none; }
a.kpi-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.component-bars { display: grid; gap: 6px; }
.component-bars .row { display: grid; grid-template-columns: 180px 1fr 60px; align-items: center; gap: 8px; font-size: .9rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.avatar-initials { text-transform: uppercase; }
.edit-row > td { background: var(--surface-2); padding-top: 4px; padding-bottom: 4px; }
.break-all { word-break: break-all; }