/* ==========================================================
   LULA Women's Helpline - interface styles
   White dominant. Pink and aqua accents. Navy structure.
   Yellow only where attention is genuinely needed.
   ========================================================== */

:root {
  --white: #ffffff;
  --navy: #1b2a4a;
  --navy-soft: #33456b;
  --aqua: #2ba8a4;
  --aqua-deep: #1f807d;
  --aqua-wash: #eaf7f6;
  --pink: #e85d8a;
  --pink-deep: #c9436e;
  --pink-wash: #fdeef3;
  --yellow: #f7c948;
  --yellow-wash: #fff8e2;
  --ink: #16181d;
  --ink-soft: #4a5160;
  --line: #dfe3ea;
  --line-soft: #eef1f6;
  --surface: #f7f9fc;
  --danger: #b3261e;
  --danger-wash: #fdecea;
  --ok: #1f7a4d;

  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* One type scale. Nothing below 14px anywhere: 16px is the body size that
     accessibility guidance asks for, and a helpline is read by people who are
     tired, upset, or using a phone in poor light. */
  --text-sm: .875rem;    /* 14px - the smallest allowed */
  --text-base: .9375rem; /* 15px - secondary text */
  --text-md: 1rem;       /* 16px - body */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(27, 42, 74, .08);
  --panel-gap: 16px;
}

* { box-sizing: border-box; }

html, /* One family everywhere. Form controls and buttons default to the browser's
   own font unless told otherwise, which is what makes an interface look like
   three interfaces stitched together. */
input, select, textarea, button, optgroup, option {
  font-family: var(--font-body);
  font-size: 1rem;
}

body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
h4 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-soft); }

p { margin: 0 0 1em; }
a { color: var(--aqua-deep); }
a:hover { color: var(--pink-deep); }

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--white); padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------- application shell ---------------- */

.app-header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: var(--white);
  border-bottom: 2px solid var(--navy);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { color: var(--navy); font-weight: 600; font-size: 1rem; }
.brand-sub { color: var(--ink-soft); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }

.app-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.app-nav a, .app-nav button.linkish {
  color: var(--navy); text-decoration: none; font-size: 1rem;
  padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: none; cursor: pointer; font-family: inherit;
}
.app-nav a:hover, .app-nav button.linkish:hover { background: var(--aqua-wash); border-color: var(--line); }
.app-nav a[aria-current="page"] { background: var(--navy); color: var(--white); }

.identity { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-soft); }
.identity strong { color: var(--navy); }

main { display: block; }
.page { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; }
.page-narrow { max-width: 720px; }

/* ---------------- buttons ---------------- */

.btn {
  font: inherit; font-size: 1rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: 9px 16px; cursor: pointer;
  background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
/* The hidden attribute must win. A class that sets display beats it, which
   silently kept every "hidden" button on screen. */
[hidden] { display: none !important; }
.btn:hover { background: var(--navy-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--pink); }
.btn-primary:hover { background: var(--pink-deep); }
.btn-accent { background: var(--aqua-deep); }
.btn-accent:hover { background: var(--aqua); }
.btn-quiet { background: var(--white); color: var(--navy); border-color: var(--line); }
.btn-quiet:hover { background: var(--surface); }
.btn-danger { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); }
.btn-small { padding: 5px 10px; font-size: .9375rem; }
.btn-block { width: 100%; }

/* ---------------- forms ---------------- */

.field { margin-bottom: 14px; }
.field label, .field-label {
  display: block; font-size: .9375rem; font-weight: 600; color: var(--navy);
  margin-bottom: 5px;
}
.field .hint { font-size: .9375rem; color: var(--ink-soft); margin-top: 4px; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
textarea { resize: vertical; min-height: 76px; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface); color: var(--ink-soft); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
legend { font-size: .9375rem; font-weight: 600; color: var(--navy); padding: 0 6px; }

.checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 1rem; }
.check input { width: auto; }

/* ---------------- panels, cards, tables ---------------- */

.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: var(--panel-gap);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.panel-head h2, .panel-head h3 { margin: 0; }

.grid { display: grid; gap: var(--panel-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--white); }
.kpi .kpi-label { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.kpi .kpi-value { font-size: 1.75rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.kpi .kpi-note { font-size: .9375rem; color: var(--ink-soft); }
.kpi-accent { border-top: 3px solid var(--aqua); }
.kpi-pink { border-top: 3px solid var(--pink); }
.kpi-yellow { border-top: 3px solid var(--yellow); }
.kpi-navy { border-top: 3px solid var(--navy); }

table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--navy); font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: var(--surface); }
.table-scroll { overflow-x: auto; }

.bar-row { display: grid; grid-template-columns: 190px 1fr 60px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: .9375rem; }
.bar-track { background: var(--line-soft); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { background: var(--aqua); height: 100%; border-radius: 999px; }
.bar-fill.pink { background: var(--pink); }
.bar-fill.navy { background: var(--navy); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* ---------------- badges ---------------- */

.badge {
  display: inline-block; font-size: .875rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--navy); white-space: nowrap;
}
.badge-waiting { background: var(--yellow-wash); border-color: var(--yellow); color: #7a5b00; }
.badge-active { background: var(--aqua-wash); border-color: var(--aqua); color: var(--aqua-deep); }
.badge-ended { background: var(--surface); color: var(--ink-soft); }
.badge-urgent { background: var(--pink-wash); border-color: var(--pink); color: var(--pink-deep); }
.badge-tag { font-family: var(--font-mono); font-size: .875rem; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--line); }
.status-AVAILABLE { background: var(--ok); }
.status-BUSY { background: var(--yellow); }
.status-OFFLINE { background: #b9c0cc; }

/* ---------------- notices ---------------- */

.notice {
  border-left: 4px solid var(--aqua); background: var(--aqua-wash);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1rem; margin-bottom: 14px;
}
.notice-warn { border-left-color: var(--yellow); background: var(--yellow-wash); }
.notice-alert { border-left-color: var(--pink); background: var(--pink-wash); }
.notice-error { border-left-color: var(--danger); background: var(--danger-wash); color: #7a1c17; }
.notice strong { display: block; margin-bottom: 2px; color: var(--navy); }

.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast {
  background: var(--navy); color: var(--white); padding: 10px 14px;
  border-radius: var(--radius-sm); font-size: 1rem; box-shadow: 0 6px 18px rgba(27,42,74,.22);
}
.toast-error { background: var(--danger); }
.toast-ok { background: var(--aqua-deep); }

/* ---------------- three panel responder dashboard ---------------- */

.row-actions { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.link-button {
  font: inherit; font-size: inherit; background: none; border: none; padding: 0;
  color: var(--pink); cursor: pointer; text-decoration: underline;
}
.link-button:hover { color: var(--navy); }

.queue-item-static { cursor: default; }
.queue-actions { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }

/* ---------- spacing, applied once rather than per component ----------
   Text touching an edge was happening in several places at once, so these are
   the shared rules rather than a patch on each panel. */

/* A long word, a web address or a code with no spaces in it must wrap rather
   than push its container wide. */
/* break-word, not anywhere. "anywhere" lets a word split mid-letter even when
   the column could simply be wider, which turned "Administrator" into a
   vertical column of single characters. break-word only splits a word that
   genuinely cannot fit. */
.bubble-body, .queue-meta, .board-reason, .note-item, .resource-meta,
.dash-card-note, .shift-card-note, .hint, .notify-text, .sup-msg,
.howto-item p, .tool-item p, .policy-body p, td, th {
  overflow-wrap: break-word;
}

/* A web address has no spaces, so it is the one case that does need to break
   wherever it must. */
.resource-card a, .policy-body a { overflow-wrap: anywhere; }

/* Who is here: a name, a role and a state. The chart row it borrowed had a
   190px first column, which left the role almost no width at all. */
.presence-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.presence-row:last-child { border-bottom: none; }
.presence-name { flex: 1 1 auto; min-width: 0; }
.presence-role { flex: 0 0 auto; font-size: var(--text-sm); color: var(--ink-soft);
  white-space: nowrap; }

/* The side columns had text against the frame on both sides. */
.console-col { padding: 16px 16px 24px; }
.console-left { padding-right: 14px; }

/* Panels and cards keep an even inset, including the last line. */
.panel { padding: 18px 20px; }
.panel > :last-child { margin-bottom: 0; }
.note-item, .board-card, .resource-card, .queue-item { padding: 12px 14px; }

/* Tables scroll inside their panel instead of stretching the page. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { min-width: 100%; }
th, td { padding: 10px 12px; }

/* Headings and paragraphs sit clear of the frame on narrow screens. */
@media (max-width: 760px) {
  .page { padding: 16px 16px 56px; }
  .console-col { padding: 14px 14px 22px; }
  .panel { padding: 16px 16px; }
}

/* ---------- the staff list ---------- */
/* A hundred people is a list to search and scroll, not one to read. */
.colleague-list { max-height: 320px; overflow-y: auto; margin-top: 4px; }
.colleague-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  padding: 9px 4px;
}
.colleague-row:hover { background: var(--wash); }
.colleague-row:last-child { border-bottom: none; }

/* ---------- status and announcements ---------- */
.status-band {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  border-radius: var(--radius); padding: 11px 16px; margin-bottom: 12px;
  font-size: var(--text-base); border-left: 4px solid;
}
.status-band strong { font-size: var(--text-md); }
.status-info    { background: var(--wash);   border-color: var(--navy);  color: var(--ink); }
.status-good    { background: #eaf6f6;       border-color: var(--aqua);  color: var(--ink); }
.status-warning { background: var(--yellow-wash); border-color: var(--yellow); color: var(--ink); }
.status-down    { background: #fdeaf1;       border-color: #c0392b;      color: #7d1d12; }

/* An announcement should feel like a note pinned up for the team: Lula pink
   on white, with room to breathe. Warm, not decorated. */
.announcement {
  background: #fff; border: 1px solid var(--pink);
  border-left: 5px solid var(--pink); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(232, 93, 138, .12);
}
.announcement h3 {
  margin: 0 0 6px; font-size: var(--text-lg); color: var(--pink); letter-spacing: .01em;
}
.announcement p { margin: 0 0 4px; color: var(--ink); line-height: 1.6; }
/* An announcement banner across the top of the dashboard. Lula pink on white,
   warm rather than alarming - it is good news as often as not. */
.training-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink);
}
.training-item:last-of-type { border-bottom: none; }
.training-item:hover strong { color: var(--pink); }
.training-item span { font-size: var(--text-sm); color: var(--ink-soft); }

.announce-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--pink); border-left: 5px solid var(--pink);
  border-radius: var(--radius); padding: 13px 18px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(232, 93, 138, .14);
}
.announce-banner-important {
  background: linear-gradient(0deg, #fff 0%, #fff6f9 100%);
  border-left-width: 6px;
}
.announce-banner-text { flex: 1 1 240px; min-width: 0; }
.announce-banner-text strong {
  display: block; color: var(--pink); font-size: var(--text-md); margin-bottom: 2px;
}
.announce-banner-text span { color: var(--ink); font-size: var(--text-base); line-height: 1.5; }
.announce-banner-dismiss {
  flex: 0 0 auto; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  background: var(--pink); color: #fff; border: none; border-radius: 999px; padding: 7px 18px;
}
.announce-banner-dismiss:hover { background: #d94b79; }

.announcement-important { border-color: var(--pink); border-left-width: 6px;
  box-shadow: 0 2px 8px rgba(232, 93, 138, .18); }
.announcement-read { border-color: var(--line); border-left-color: var(--line);
  box-shadow: none; }
.announcement-read h3 { color: var(--navy); }
.announcement-tag {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  background: var(--pink); color: #fff; font-size: var(--text-sm); font-weight: 700;
  vertical-align: middle;
}
.announcement-when {
  margin: 8px 0 0; font-size: var(--text-sm); color: var(--ink-soft);
}

/* ---------- staff messages ---------- */
.unread-badge {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
  border-radius: 999px; background: var(--pink); color: #fff;
  font-size: var(--text-sm); font-weight: 700; text-align: center;
}
.unread-badge[hidden] { display: none; }
.recent-message {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; background: none; border: none;
  border-bottom: 1px solid var(--line-soft); padding: 9px 2px;
}
.recent-message:hover { background: var(--wash); }
.recent-top { display: flex; align-items: baseline; gap: 8px; }
.recent-top strong { flex: 1 1 auto; min-width: 0; }
.recent-time { font-size: var(--text-sm); color: var(--ink-soft); flex: none; }
.recent-line {
  font-size: var(--text-sm); color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- notification bar ---------- */
.notify-bar {
  position: sticky; top: 0; z-index: 450;
  display: flex; flex-direction: column; gap: 1px; background: var(--line);
}
.notify-bar[hidden] { display: none; }
.notify-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; font-size: var(--text-base); font-weight: 600; color: #fff;
}
.notify-waiting  { background: var(--navy); }
.notify-message  { background: var(--aqua); }
.notify-transfer { background: var(--pink); }
.notify-risk { background: #c0392b; }
@media (prefers-reduced-motion: no-preference) {
  .notify-risk { animation: help-pulse 1.2s ease-in-out infinite; }
}
.notify-text { flex: 1; min-width: 0; }
.notify-action {
  font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  background: #fff; border: none; border-radius: 999px; padding: 6px 16px;
  color: var(--navy);
}
.notify-action:hover { background: #f0f3f7; }
.notify-dismiss {
  font: inherit; font-size: var(--text-md); line-height: 1; cursor: pointer;
  background: none; border: none; color: #fff; padding: 2px 6px; border-radius: 4px;
}
.notify-dismiss:hover { background: rgba(255, 255, 255, .2); }

/* The conversation screen is sized to the window, so the bar has to come out
   of that height rather than pushing the message box off the bottom. */
body.has-notify-bar .console { height: calc(100vh - 57px - 42px); }

@media (max-width: 620px) {
  .notify-item { flex-wrap: wrap; gap: 8px; }
}

/* ---------- accessibility ---------- */
html.text-large  { font-size: 18px; }
html.text-larger { font-size: 21px; }

html.high-contrast {
  --ink: #000; --ink-soft: #26303d; --line: #6b7480; --wash: #fff;
}
html.high-contrast body { background: #fff; }
html.high-contrast .btn-quiet { border-color: #26303d; color: #000; }
html.high-contrast .hint, html.high-contrast .queue-meta,
html.high-contrast .bubble-meta { color: #26303d; }
html.high-contrast .bubble-caller, html.high-contrast .sup-theirs { border-color: #000; }
html.high-contrast a { text-decoration: underline; }

.a11y { position: fixed; left: 14px; bottom: 14px; z-index: 380; }
.a11y-toggle {
  font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  background: var(--navy); color: #fff; border: none; border-radius: 999px;
  padding: 9px 16px; box-shadow: 0 3px 10px rgba(16, 24, 40, .2);
}
.a11y-toggle:hover { background: #24375f; }
.a11y-options {
  position: absolute; bottom: 46px; left: 0; width: 250px;
  background: #fff; border: 1px solid var(--navy); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 10px 26px rgba(16, 24, 40, .2);
}
.a11y-options[hidden] { display: none; }
.a11y-label { margin: 8px 0 5px; font-size: var(--text-sm); font-weight: 700; color: var(--navy); }
.a11y-label:first-child { margin-top: 0; }
.a11y-row { display: flex; gap: 5px; flex-wrap: wrap; }
.a11y-btn {
  font: inherit; font-size: var(--text-sm); cursor: pointer; padding: 5px 11px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px; color: var(--ink);
}
.a11y-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.a11y-note { margin: 6px 0 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.45; }

@media print { .a11y { display: none; } }

/* ---------- supervisor board ---------- */
.request-board {
  border: 2px solid #c0392b; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px; background: #fff;
}
.request-board[hidden] { display: none; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.board-card {
  border: 1px solid var(--line); border-left: 4px solid var(--pink);
  border-radius: var(--radius); padding: 12px 14px; background: var(--surface);
  display: flex; flex-direction: column; gap: 5px;
}
.board-card.board-risk { border-left-color: #c0392b; background: #fdf2f0; }
.board-card.board-urgent { border-left-color: #c0392b; }
.board-card h4 { margin: 0; font-size: var(--text-md); color: var(--navy); }
.board-meta { font-size: var(--text-sm); color: var(--ink-soft); }
.board-reason { font-size: var(--text-base); }
.board-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.btn-risk { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn-risk:hover { background: #a93226; }
.btn-risk.is-flagged { background: #fff; color: #c0392b; }
.risk-banner {
  background: #fdeaf1; border: 2px solid #c0392b; border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 8px; font-size: var(--text-base);
}
.risk-banner strong { color: #c0392b; }
.risk-banner[hidden] { display: none; }

/* ---------- unanswered help requests ---------- */
/* Sits above the conversation, not across the top of the page: covering the
   header trapped supervisors who could then not reach staff chat. */
.help-alert {
  position: fixed; right: 20px; bottom: 20px; z-index: 460;
  display: flex; align-items: center; gap: 10px; max-width: 330px;
  font: inherit; font-size: var(--text-base); font-weight: 700; cursor: pointer;
  border: none; border-radius: 10px; padding: 12px 16px; color: #fff; background: #c0392b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  animation: help-pulse 1.1s ease-in-out infinite;
}
.help-alert[hidden] { display: none; }
.help-alert-count {
  background: #fff; color: #c0392b; border-radius: 999px;
  min-width: 30px; padding: 2px 10px; font-size: var(--text-md);
}
.help-alert-action {
  border: 2px solid #fff; border-radius: 999px; padding: 3px 14px;
  font-size: var(--text-sm); white-space: nowrap;
}
.help-alert-text { flex: 1; font-weight: 600; font-size: var(--text-sm); }
.help-alert-action, .help-alert-dismiss {
  font: inherit; cursor: pointer; background: none; color: #fff; border: 2px solid #fff;
}
.help-alert-dismiss {
  border: none; font-size: var(--text-md); line-height: 1; padding: 2px 6px; opacity: .85;
}
.help-alert-dismiss:hover { opacity: 1; }
/* When the supervisor chat is open it takes the corner, so the alert steps up. */
.sup-chat:not([hidden]) ~ .help-alert { bottom: 96px; }

/* ============ 4. my activity, and 5. resources ============ */
#myStats .bar-row { grid-template-columns: 1fr auto; gap: 10px; padding: 6px 2px; }
#myStats .bar-value { text-align: right; padding-right: 2px; }
.console-right { padding-right: 14px; }

.resource-add { display: block; width: 100%; margin-top: 10px; }
.resource-card a.resource-meta { display: block; margin-top: 4px; word-break: break-word; }
@keyframes help-pulse {
  0%, 100% { background: #c0392b; }
  50%      { background: #e5533f; }
}
/* Somebody who has asked for less motion still needs to see it, so the colour
   stays and only the movement stops. */
@media (prefers-reduced-motion: reduce) {
  .help-alert { animation: none; border-bottom: 4px solid #7d1d12; }
}

/* ---------- supervisor side-chat ---------- */
.sup-chat {
  position: fixed; right: 18px; bottom: 18px; width: 330px; z-index: 400;
  background: #fff; border: 1px solid var(--navy); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .22); display: flex; flex-direction: column;
  overflow: hidden;
}
.sup-chat[hidden] { display: none; }
.sup-head {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--navy); color: #fff; cursor: pointer;
}
.sup-title { flex: 1; font-weight: 700; font-size: .9375rem; }
.sup-icon {
  background: none; border: none; color: #fff; font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.sup-icon:hover { background: rgba(255, 255, 255, .18); }
.sup-body { display: flex; flex-direction: column; max-height: 60vh; }
.sup-chat.sup-min .sup-body { display: none; }
.sup-note { margin: 0; padding: 8px 10px; font-size: .875rem; color: var(--ink-soft);
  background: var(--wash); border-bottom: 1px solid var(--line); }
.sup-thread { flex: 1; overflow-y: auto; padding: 10px; min-height: 140px; }
.sup-msg { margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; font-size: .9375rem;
  line-height: 1.45; max-width: 90%; }
.sup-mine { background: var(--navy); color: #fff; margin-left: auto; }
.sup-theirs { background: var(--wash); border: 1px solid var(--line); }
.sup-meta { font-size: .875rem; opacity: .75; margin-top: 3px; }
.sup-composer { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.sup-composer textarea {
  flex: 1; resize: none; height: 44px; font: inherit; font-size: .9375rem;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
}
.composer-row-actions { align-items: center; gap: 10px; margin-top: 6px; }

@media (max-width: 620px) {
  .sup-chat { right: 8px; left: 8px; width: auto; }
}

/* ---------- shift cards, shown when no conversation is open ---------- */
.shift-cards { padding: 4px 2px 20px; overflow-y: auto; }
.shift-cards[hidden] { display: none; }
.shift-intro { color: var(--ink-soft); font-size: 1rem; margin: 0 0 14px; }
.shift-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 11px; }
.shift-card {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  font: inherit; cursor: pointer; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius); padding: 13px 15px;
}
.shift-card:hover { border-color: var(--aqua); border-left-color: var(--aqua); }
.shift-card-static { cursor: default; }
.shift-card-static:hover { border-color: var(--line); }
.shift-card-navy { border-left-color: var(--navy); }
.shift-card-aqua { border-left-color: var(--aqua); }
.shift-card-yellow { border-left-color: var(--yellow); }
.shift-card-pink { border-left-color: var(--pink); }
.shift-card-kicker {
  font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.shift-card-title { font-weight: 700; font-size: 1rem; color: var(--navy); }
.shift-card-note { font-size: .9375rem; color: var(--ink-soft); line-height: 1.5; }
.uplift-line { font-size: 1rem; line-height: 1.5; color: var(--ink); min-height: 3.1em; }

.shift-panel { margin-top: 14px; }
.reset-step { border-left: 3px solid var(--aqua); padding: 2px 0 2px 13px; margin-bottom: 13px; }
.reset-step h4 { margin: 0 0 3px; font-size: 1rem; }
.reset-step p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.howto-item { padding: 9px 0; border-bottom: 1px solid var(--line); }
.howto-item:last-child { border-bottom: none; }
.howto-item h4 { margin: 0 0 2px; font-size: 1rem; }
.howto-item p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

/* ---------- call script ---------- */
.script-page { max-width: 860px; }
.principle-panel { border-left: 4px solid var(--pink); }
.principle { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin: 6px 0; }
.framework-line { font-weight: 700; letter-spacing: .04em; color: var(--aqua); }
.script-search { position: sticky; top: 0; background: var(--bg, #fff); padding: 10px 0; z-index: 5; }
.script-topic { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 14px; background: var(--surface); }
.script-topic[hidden] { display: none; }
.script-topic h2 { margin: 0 0 10px; font-size: 1.125rem; color: var(--navy); }
.script-stage { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin-bottom: 14px; }
.script-listen { border-left-color: var(--aqua); }
.script-uplift { border-left-color: var(--pink); }
.script-bridge { border-left-color: #9b6dc4; }
.script-link   { border-left-color: var(--yellow); }
.script-assist { border-left-color: var(--navy); }
.script-safety { border-left-color: #c0392b; }
.script-stage h3 { margin: 0 0 4px; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; }
.stage-note { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink-soft); font-size: .9375rem; }
.script-stage ul, .script-stage ol { margin: 4px 0 0; padding-left: 20px;
  font-size: 1rem; color: var(--ink-soft); }
.script-stage li { margin-bottom: 4px; }
.element-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.element-card h3 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.element-card p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }

/* ---------- staff dashboard ---------- */
.dashboard { max-width: 1080px; }
.welcome-panel {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px;
  border-left: 4px solid var(--aqua);
}
.welcome-panel h1 { margin: 0 0 4px; font-size: 1.375rem; }
.welcome-meta { margin: 0; display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 1rem; color: var(--ink-soft); }
.welcome-action { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.dash-heading {
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin: 26px 0 10px; font-weight: 700;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.dash-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; color: var(--ink); text-decoration: none;
}
.dash-card:hover { border-color: var(--aqua); }
.dash-card-title { font-weight: 700; font-size: 1rem; color: var(--navy); }
.dash-card-note { font-size: .9375rem; color: var(--ink-soft); line-height: 1.5; }
.dash-card-primary { border-left: 4px solid var(--pink); }
.dash-card-wellness { border-left: 4px solid var(--aqua); cursor: default; }
.dash-card-uplift { border-left: 4px solid var(--yellow); cursor: default; }
.uplift-line { font-size: 1rem; line-height: 1.55; color: var(--ink); min-height: 3em; }

.dash-panel { margin-top: 22px; }
.reset-step { border-left: 3px solid var(--aqua); padding: 2px 0 2px 14px; margin-bottom: 16px; }
.reset-step h3 { margin: 0 0 4px; font-size: 1rem; }
.reset-step p { margin: 0; color: var(--ink-soft); }
.howto-item, .tool-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.howto-item:last-child, .tool-item:last-child { border-bottom: none; }
.howto-item h3, .tool-item h3 { margin: 0 0 3px; font-size: 1rem; }
.howto-item p, .tool-item p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.role-link, .recent-item {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.role-link:last-child, .recent-item:last-child { border-bottom: none; }
.role-link:hover strong, .recent-item:hover strong { color: var(--aqua); }
.role-link span, .recent-item span { font-size: .9375rem; color: var(--ink-soft); }

@media (max-width: 760px) {
  .welcome-panel { flex-direction: column; align-items: flex-start; }
}

.console {
  display: grid;
  /* minmax(0, ...) on every column: without it a long word or a wide table
     stretches a column and the whole page scrolls sideways. */
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 330px);
  overflow-x: hidden;
  gap: 1px;
  background: var(--line);
  height: calc(100vh - 57px);
}
.console-col { background: var(--white); overflow-y: auto; padding: 14px; }
.console-centre { background: var(--white); display: flex; flex-direction: column; overflow: hidden; padding: 0; }

.queue-item {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: 10px; margin-bottom: 8px;
}
.queue-item:hover { border-color: var(--aqua); background: var(--aqua-wash); }
.queue-item[aria-current="true"] { border-color: var(--pink); background: var(--pink-wash); }
.queue-item .queue-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.queue-item .queue-code { font-family: var(--font-mono); font-size: .9375rem; color: var(--navy); }
.queue-item .queue-meta { font-size: .875rem; color: var(--ink-soft); }

.conversation-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.conversation-head .spacer { margin-left: auto; }
.conversation-timer { font-family: var(--font-mono); font-size: .9375rem; color: var(--ink-soft); }

.quick-tag-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; cursor: pointer; background: none; border: none; padding: 2px 0 6px;
  text-align: left; color: var(--navy);
}
.quick-tag-toggle-label {
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}
.quick-tag-summary {
  flex: 1; font-size: var(--text-sm); font-weight: 400; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quick-tag-chevron { transition: transform .15s ease; }
.quick-tag.is-collapsed .quick-tag-chevron { transform: rotate(-90deg); }
.quick-tag.is-collapsed #quickTagBody { display: none; }
.quick-tag.is-collapsed { padding-bottom: 4px; }

.quick-tag {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 12px; margin-bottom: 8px; background: var(--surface);
}
.quick-tag-row { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.quick-tag-label {
  font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); min-width: 118px;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.chip {
  font: inherit; font-size: .9375rem; cursor: pointer; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.chip:hover { border-color: var(--aqua); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip[aria-pressed="true"].chip-element { background: var(--aqua); border-color: var(--aqua); }
.chip-main { box-shadow: inset 0 0 0 2px var(--yellow); }
.chip-add {
  border-style: dashed; border-color: var(--aqua); color: var(--aqua); font-weight: 600;
}
.chip-add:hover { background: var(--aqua-wash); }
.alias-row { display: flex; gap: 6px; align-items: center; }
.alias-row input { flex: 1; min-width: 0; }

.topic-entry { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
/* A class that sets display beats the hidden attribute, so say it explicitly. */
.topic-entry[hidden], .quick-tag[hidden], .typing-indicator[hidden] { display: none; }
.topic-input {
  min-width: 190px; font-size: .9375rem; padding: 4px 10px;
  border: 1px solid var(--aqua); border-radius: 999px;
}
.topic-input:focus { outline: 2px solid var(--aqua-wash); }

.quick-tag-note { font-size: .875rem; color: var(--ink-soft); margin: 2px 0 0; }

/* The conversation is the point of this screen, so it takes the space rather
   than sharing it evenly with the tools around it. */
.console-centre { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* The chat takes whatever height is left after the header, the tag strip and
   the message box. min-height:0 is what allows a flex child to shrink below
   its content - without it the box is pushed off the bottom of the screen. */
.console-centre .thread { flex: 1 1 auto; min-height: 0; }

/* The header and the message box keep their size and never get squeezed out. */
.console-centre .conversation-head,
.console-centre .quick-tag,
.console-centre .watching-note,
.console-centre .composer { flex: 0 0 auto; }

.thread { flex: 1; overflow-y: auto; padding: 16px; background: var(--surface); }
.thread-empty { color: var(--ink-soft); text-align: center; padding: 40px 20px; font-size: 1rem; }

.bubble { max-width: 78%; margin-bottom: 12px; }
.bubble .bubble-body {
  padding: 10px 13px; border-radius: 14px; font-size: 1rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble .bubble-meta { font-size: .875rem; color: var(--ink-soft); margin-top: 3px; }
.bubble-caller .bubble-body { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble-mine { margin-left: auto; }
.bubble-mine .bubble-body { background: var(--aqua-wash); border: 1px solid var(--aqua); border-bottom-right-radius: 4px; }
.bubble-mine .bubble-meta { text-align: right; }
.bubble-system { max-width: 100%; text-align: center; }
.bubble-system .bubble-body {
  background: transparent; color: var(--ink-soft); font-size: .9375rem; padding: 4px;
}

.composer {
  border-top: 1px solid var(--line); padding: 12px 16px; background: var(--white);
  max-height: 38vh; overflow-y: auto;
}
.composer textarea { max-height: 120px; }
.composer-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.composer-tools select { max-width: 260px; font-size: .9375rem; padding: 5px 8px; }
.typing-indicator {
  font-size: .9375rem; color: var(--aqua); font-style: italic; margin: 0;
}
.watching-note {
  margin: 0; padding: 12px 16px; background: var(--yellow-wash);
  border-top: 1px solid var(--yellow); font-size: var(--text-base); color: var(--ink);
}

.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { min-height: 54px; max-height: 180px; }
.composer .composer-note { font-size: .875rem; color: var(--ink-soft); margin-top: 6px; }

/* framework rail */
.framework-step { border-left: 3px solid var(--line); padding: 4px 0 10px 12px; margin-bottom: 4px; }
.framework-step.listen { border-left-color: var(--aqua); }
.framework-step.uplift { border-left-color: var(--pink); }
.framework-step.bridge { border-left-color: #9b6dc4; }
.framework-step.link { border-left-color: var(--yellow); }
.step-note { font-size: .875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); margin-left: 6px; }
.framework-step.assist { border-left-color: var(--navy); }
.framework-step h4 { margin-bottom: 2px; }
.framework-step ul, .framework-step ol { margin: 4px 0 0; padding-left: 18px; font-size: .9375rem; color: var(--ink-soft); }
.framework-step ol { font-weight: 600; color: var(--ink); }
.framework-step li { margin-bottom: 3px; }
.framework-script {
  margin: 6px 0 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--yellow-wash, #fdf6e0); font-size: .9375rem; line-height: 1.5;
  color: var(--ink); font-style: normal;
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 8px 10px; color: var(--ink-soft);
}
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--pink); }
.tab-panel[hidden] { display: none; }

.resource-add { margin-top: 8px; }

.resource-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; }
.resource-card h4 { margin-bottom: 2px; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--navy); }
.resource-card .resource-meta { font-size: .875rem; color: var(--ink-soft); }
.resource-card .resource-phone { font-family: var(--font-mono); font-size: .9375rem; color: var(--pink-deep); font-weight: 600; }
.resource-card.emergency { border-left: 4px solid var(--pink); }

.note-item { border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: var(--radius-sm); padding: 9px 10px; margin-bottom: 8px; font-size: 1rem; }
.note-item .note-meta { font-size: .875rem; color: var(--ink-soft); margin-top: 4px; }

/* ---------------- caller interface (mobile first) ---------------- */

.caller-shell { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; }
.caller-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); max-width: 640px; margin: 0 auto;
}
.caller-header .spacer { margin-left: auto; }
.caller-hero { padding: 20px 0 8px; }
.caller-hero h1 { font-size: 1.375rem; }
.caller-hero p.lead { font-size: 1rem; color: var(--ink-soft); }

.ended-band {
  background: var(--wash); border: 2px solid var(--navy);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; text-align: center;
}
.ended-band strong { display: block; font-size: 1.125rem; margin-bottom: 6px; color: var(--navy); }
.ended-band p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.ended-band[hidden] { display: none; }
.caller-composer[hidden] { display: none; }

.closed-band {
  background: var(--yellow-wash); border: 1px solid var(--yellow);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.closed-band strong { display: block; font-size: 1rem; margin-bottom: 4px; color: var(--navy); }
.closed-band p { margin: 4px 0 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.55; }

.consent-box {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  margin-bottom: 14px; background: var(--wash, #f6f7f9);
}
.consent-box[hidden] { display: none; }
.consent-box h3 { margin: 0 0 8px; font-size: 1rem; color: var(--navy); }
.consent-text {
  max-height: 210px; overflow-y: auto; font-size: 1rem; line-height: 1.55;
  color: var(--ink-soft); margin-bottom: 10px;
}
.consent-text p { margin: 0 0 8px; }

.survey-box {
  border: 1px solid var(--aqua); border-radius: 10px; padding: 14px 16px;
  margin-top: 14px; background: var(--aqua-wash, #eaf6f6);
}
.survey-box[hidden] { display: none; }
.survey-box p { margin: 0 0 10px; font-size: 1rem; }

.availability { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--ink-soft); margin-bottom: 14px; }

.queue-standing {
  background: var(--aqua-wash, #eaf6f6); border: 1px solid var(--aqua);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; text-align: center;
}
.queue-place { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.queue-explain { font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }

.caller-thread {
  border: 1px solid var(--line); border-radius: var(--radius);
  height: 58vh; min-height: 300px; overflow-y: auto; padding: 14px; background: var(--surface);
}
.caller-composer { margin-top: 10px; }
.caller-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.exit-btn { background: var(--white); color: var(--navy); border: 1px solid var(--line); }

.emergency-band {
  background: var(--pink-wash); border: 1px solid var(--pink);
  border-radius: var(--radius); padding: 12px 14px; font-size: 1rem; margin-bottom: 16px;
}
.emergency-band strong { color: var(--pink-deep); }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.choice {
  font: inherit; text-align: left; cursor: pointer; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.choice:hover { border-color: var(--aqua); background: var(--aqua-wash); }
.choice[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-wash); }
.choice .choice-title { font-weight: 600; color: var(--navy); display: block; }
.choice .choice-note { font-size: .9375rem; color: var(--ink-soft); }

/* ---------------- policy pages ---------------- */

.policy-body { font-size: 1rem; }
.policy-body h1 { font-size: 1.375rem; margin-top: 1.2em; }
.policy-body h2 { font-size: 1rem; margin-top: 1.4em; }
.policy-body ul { padding-left: 20px; }
.policy-meta { font-size: .9375rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 20px; }

.site-footer {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 20px;
  font-size: .9375rem; color: var(--ink-soft);
}
.site-footer .footer-links { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

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

@media (max-width: 1080px) {
  .console { grid-template-columns: 250px minmax(0, 1fr); height: auto; }
  .console-right { grid-column: 1 / -1; }
  .console-col { max-height: none; min-width: 0; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .console { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 120px 1fr 48px; }
  .app-header { flex-wrap: wrap; }
  .page { padding: 16px 14px 48px; }
  .caller-thread { height: 52vh; }
}

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .18s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

@media print {
  .app-nav, .composer, .toast-stack, .btn { display: none !important; }
  body { font-size: .875rem; }
}

/* ---------------- caller star rating ----------------
   Sits inside the "This conversation has ended" box, in the normal flow of
   the page. Nothing here is fixed or layered on top of anything, so it can
   never cover "Leave this page" or any help information.
   Lula pink for the stars and the Send button, navy for the text. */

.rating-card {
  background: var(--white); border: 1px solid var(--pink);
  border-radius: var(--radius); padding: 12px 6px; margin: 0 0 12px;
}
.rating-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.rating-question {
  display: block; width: 100%; padding: 0; margin: 0 0 8px;
  text-align: center; font-size: 1rem; font-weight: 600; color: var(--navy);
}
.rating-options { display: flex; justify-content: center; }
.rating-option {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; justify-content: center;
}
.rating-option label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; padding: 4px 2px; border-radius: var(--radius-sm);
  color: var(--navy); font-size: .875rem; line-height: 1.2; text-align: center;
  /* On a narrow phone or with large text, a word wraps inside its own column
     ("Very / good", "Excel- / lent") rather than running into the next one. */
  max-width: 100%; overflow-wrap: anywhere;
}
.rating-star { display: block; width: 36px; height: 36px; }
.rating-star polygon {
  fill: var(--white); stroke: var(--pink); stroke-width: 1.6; stroke-linejoin: round;
}
.rating-option.is-on .rating-star polygon { fill: var(--pink); }
.rating-option label:hover .rating-star polygon { stroke: var(--pink-deep); }
.rating-option input:focus-visible + label { outline: 3px solid var(--aqua); outline-offset: 2px; }
.rating-option input:checked + label .rating-word { font-weight: 700; }

.rating-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-top: 10px;
}
.rating-later {
  font: inherit; font-size: 1rem; background: none; border: none; padding: 4px 2px;
  color: var(--navy); text-decoration: underline; cursor: pointer;
}
.rating-later:hover { color: var(--pink-deep); }
.ended-band .rating-error { margin: 10px 0 0; color: var(--danger); font-size: .9375rem; }
.ended-band .rating-thanks { margin: 0 0 12px; color: var(--navy); font-weight: 600; }

@media (max-width: 380px) {
  /* Small phones: let the card use some of the box's side padding so the five
     labels have room. */
  .rating-card { margin-left: -10px; margin-right: -10px; padding-left: 2px; padding-right: 2px; }
}

/* ---------------- ratings list in the funding report ---------------- */

.rating-list { max-height: 420px; overflow-y: auto; }