:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1d2733;
  --muted: #68758a;
  --line: #e3e7ee;
  --brand: #b3401e;
  --brand-dark: #8f3115;
  --flow: #f0a06c;
  --blue: #2563eb;
  --amber: #b45309;
  --red: #b91c1c;
  --green: #15803d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 16px 0 6px; }

.topbar { background: #22160f; color: #fff; position: sticky; top: 0; z-index: 100; }
.topbar-inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 24px;
}
.brand { font-weight: 700; font-size: 18px; color: #fff; }
.brand span { color: #f0a06c; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a { color: #d8cdc6; font-weight: 500; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.logout-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.whoami { color: #d8cdc6; font-size: 13px; }

.container { max-width: 1100px; margin: 24px auto 40px; padding: 0 20px; }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px;
}
.card.narrow { max-width: 460px; }
.card-attention { border-left: 4px solid var(--amber); }
.card-danger { border-left: 4px solid var(--red); }
.card-ready { border-left: 4px solid var(--green); }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.stat-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 18px; min-width: 110px; color: var(--ink);
}
.stat:hover { text-decoration: none; border-color: var(--muted); }
.stat.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.stat-n { display: block; font-size: 22px; font-weight: 700; }
.stat-l { display: block; font-size: 12px; color: var(--muted); }
.stat-blue .stat-n { color: var(--blue); }
.stat-amber .stat-n { color: var(--amber); }
.stat-red .stat-n { color: var(--red); }
.stat-green .stat-n { color: var(--green); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; background: #eef1f5; color: var(--muted);
  white-space: nowrap;
}
.badge-running { background: #dbeafe; color: var(--blue); }
.badge-awaiting_decision { background: #fef3c7; color: var(--amber); }
.badge-failed { background: #fee2e2; color: var(--red); }
.badge-completed { background: #dcfce7; color: var(--green); }
.badge-info { background: #e0e7ff; color: #4338ca; }
.badge-ev-success { background: #dcfce7; color: var(--green); }
.badge-ev-failed { background: #fee2e2; color: var(--red); }
.badge-ev-halted { background: #fef3c7; color: var(--amber); }
.badge-ev-skipped { background: #eef1f5; color: var(--muted); }
.badge-ev-info { background: #e0e7ff; color: #4338ca; }
/* Booking journey (docs/BOOKING-JOURNEY.md): warmer as the lead gets closer to paid. */
.badge-journey { background: #eef1f5; color: var(--muted); }
.badge-journey-quoted { background: #e0e7ff; color: #4338ca; }
.badge-journey-wants_to_book, .badge-journey-time_approved, .badge-journey-link_sent { background: #fef3c7; color: var(--amber); }
.badge-journey-checkout_started { background: #ffedd5; color: #c2410c; }
.badge-journey-paid { background: #f3e8ff; color: #7e22ce; }
.badge-journey-verified { background: #dcfce7; color: var(--green); }
.stat-purple .stat-n { color: #7e22ce; }
.tl-diff { margin: 4px 0 0 0; padding: 0; list-style: none; font-size: 13px; }
.tl-diff li { padding: 1px 0; }
.tl-diff .tl-old { text-decoration: line-through; color: var(--muted); }
.tl-diff .tl-new { font-weight: 600; }
.transcript { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }
.transcript li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.transcript li:last-child { border-bottom: none; }
.transcript .who { font-weight: 700; margin-right: 6px; }
.transcript .who-assistant { color: #7e22ce; }
.transcript .who-user { color: var(--blue); }
.transcript .who-tool { color: var(--muted); }
.transcript .tool-call { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }

.muted { color: var(--muted); }
.halt-reason { font-size: 12px; color: var(--amber); max-width: 320px; }

.btn {
  display: inline-block; border: 1px solid #c6ccd6; background: var(--card);
  color: var(--ink); border-radius: 8px; padding: 7px 14px; font-size: 14px;
  font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-warn { background: #fff7ed; border-color: #fdba74; color: var(--amber); }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-success:hover { background: #116a32; border-color: #116a32; }
.btn-danger { background: #fef2f2; border-color: #fca5a5; color: var(--red); }
/* "Flow" orange from the header wordmark */
.btn-flow { background: var(--flow); border-color: var(--flow); color: #fff; }
.btn-flow:hover { background: #e08a4e; border-color: #e08a4e; }
.btn-flow-outline { background: transparent; border-color: #f8d3b6; color: var(--flow); }
.btn-flow-outline:hover { background: #fff7f0; border-color: var(--flow); }
.btn-ghost { background: transparent; border-color: #55443a; color: #d8cdc6; }
.btn-small { padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.btn-row form { margin: 0; }
.sticky-save { position: sticky; bottom: 12px; }

label { display: block; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
input[type="text"], input[type="password"], select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: #fbfcfe; color: var(--ink);
}
textarea { font-family: ui-monospace, Consolas, monospace; }
input:focus, select:focus, textarea:focus { outline: 2px solid #f0a06c; border-color: var(--brand); }

label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; margin-bottom: 6px; }
label.check input { width: auto; margin: 0; }

.inline-form { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.inline-form input { margin-top: 0; }

.push-right { margin-left: auto; }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-right: 4px; }
.quick-actions { margin: 0 0 18px; }
.filter-row { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filter-row .inline-form { margin-bottom: 0; }
.filter-label { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--muted); }
.filter-label select { width: auto; margin-top: 0; padding: 5px 8px; font-size: 13px; }

.setting { margin-bottom: 16px; }
.setting-label { display: block; }
.setting-help { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Appointment Filters (SS Admin parity)
   Must beat global input[type="text"] { width:100%; display:block } */
.af-defaults { display: flex; flex-direction: column; gap: 14px; }
.af-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.af-row:last-child { border-bottom: none; padding-bottom: 0; }
.af-switch { display: flex; align-items: center; margin: 4px 0 0; flex-shrink: 0; }
.af-switch input { width: auto; margin: 0; transform: scale(1.15); }
.af-label { flex: 1 1 auto; min-width: 12rem; }
.af-label strong { font-weight: 600; font-size: 14px; }
.af-row input.af-value[type="text"],
.af-row input.af-value[type="time"] {
  display: inline-block;
  width: 11rem;
  flex: 0 0 11rem;
  max-width: 11rem;
  margin-top: 0;
  text-align: right;
}
.af-row input.af-value:disabled { opacity: 0.55; background: #f3f4f6; }
.af-overrides { display: flex; flex-direction: column; gap: 14px; }
.af-override-card {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; background: #fafbfc;
}
.af-override-head {
  display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px;
}
.af-match { flex: 1; margin: 0; }
.af-match .setting-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.af-match input { margin-top: 0; }
.af-override-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.af-ov-field { display: flex; flex-direction: column; gap: 4px; }
.af-ov-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.af-ov-controls { display: flex; gap: 8px; align-items: center; }
.af-ov-controls select.af-mode {
  display: inline-block;
  width: 7.5rem;
  flex: 0 0 7.5rem;
  max-width: 7.5rem;
  margin-top: 0;
}
.af-ov-controls input.af-ov-value[type="text"],
.af-ov-controls input.af-ov-value[type="time"] {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin-top: 0;
}
@media (max-width: 700px) {
  .af-row { flex-wrap: wrap; }
  .af-label { min-width: 0; }
  .af-row input.af-value[type="text"],
  .af-row input.af-value[type="time"] {
    width: 100%;
    flex: 1 1 100%;
    max-width: none;
    text-align: left;
  }
  .af-override-grid { grid-template-columns: 1fr; }
}

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; word-break: break-word; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-left: 3px solid var(--line); padding: 6px 0 10px 14px; margin-left: 6px; }
.timeline li.tl-failed { border-left-color: var(--red); }
.timeline li.tl-halted { border-left-color: var(--amber); }
.timeline li.tl-success { border-left-color: var(--green); }
.timeline li.tl-info-stripe { border-left-color: #4338ca; }
.tl-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tl-stage { font-weight: 600; }
.tl-when { font-size: 12px; }
.tl-msg { font-size: 14px; color: #37424f; }

.flash { border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-weight: 500; }
.flash-success { background: #dcfce7; color: var(--green); }
.flash-error { background: #fee2e2; color: var(--red); }

.auth-card {
  max-width: 360px; margin: 60px auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 28px;
}
.auth-card h1 { margin-bottom: 18px; }

/* ---- Schedule Options card ---- */
.slot-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rule { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---- Schedule Options candidates ---- */
input[type="date"] {
  display: inline-block; width: auto; margin-top: 0; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: #fbfcfe; color: var(--ink);
}
.cand-controls { margin-bottom: 12px; }
.cand-controls .inline-form { margin-bottom: 0; }
.cand-table th.cand-center, .cand-table td.cand-center { text-align: center; vertical-align: middle; }
.cand-table th.cand-mid { vertical-align: middle; }
.cand-table thead th { border-bottom: 1px solid var(--line); }
/* Full-height color stripe from the optimizer's calendar color — reads as a
   grouping band for the two-row candidate, not as another radio button. */
.cand-table td.cand-stripe {
  width: 10px; min-width: 10px; max-width: 10px; padding: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.cand-when strong { white-space: nowrap; }
.cand-when .btn, .cand-when a { margin-left: 6px; }
tbody.cand tr:first-child td { border-bottom: none; }
tbody.cand tr:first-child td[rowspan] { border-bottom: 1px solid var(--line); }
tbody.cand tr:last-child td { border-bottom: 1px solid var(--line); }
.cand-details { font-size: 13px; color: var(--muted); padding-top: 0; line-height: 1.6; }
.cand-lbl { font-weight: 600; color: #4b5563; }
.cand-score { font-weight: 600; }
.cand-minutes { color: var(--muted); }
.book-rebook-warn {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px;
  padding: 10px 14px; margin: 10px 0; font-size: 14px;
}
.book-rebook-warn label { font-weight: 600; }
.table tr.cand-toggle td {
  cursor: pointer; background: #f8f9fb; font-weight: 600;
  border-bottom: 1px solid var(--line);
}

/* ---- Book This Client modal ---- */
.book-modal {
  border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  max-width: 520px; width: calc(100vw - 40px);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.22);
}
.book-modal::backdrop { background: rgba(15, 18, 24, 0.45); }
.book-modal h2 { margin-top: 0; }
.book-modal details { margin-bottom: 12px; }
.book-modal summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.book-checks { max-height: 200px; overflow-y: auto; padding: 6px 2px; }
.book-checks .check { margin-bottom: 4px; font-weight: 400; }

/* ---- Guided Call Form panel ---- */
.gcform summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; color: #4b5563; }
.gcform-node {
  margin: 18px 0 8px; padding-bottom: 4px; font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.gcform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 800px) { .gcform-grid { grid-template-columns: 1fr; } }
.gcform-field { min-width: 0; }
.gcform-lbl { display: block; font-weight: 600; font-size: 13px; color: #4b5563; margin-bottom: 3px; }
.gcform-field input[type="text"], .gcform-field textarea, .gcform-field select { width: 100%; }
.gcform-field input:disabled, .gcform-field textarea:disabled, .gcform-field select:disabled { background: #f3f4f6; color: var(--muted); }
.gcform-opts { max-height: 180px; overflow-y: auto; padding: 2px; }
.gcform-opts .check { margin-bottom: 4px; font-weight: 400; }
#gcform-status:not(:empty) {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px;
  padding: 8px 12px; margin: 10px 0; font-size: 13px; color: #7c2d12;
}

/* ---- Address check ---- */
.addr-match-ok { color: var(--green); font-weight: 600; }

/* ---- Dashboard lead list ---- */
/* One shared grid template keeps the header and every row aligned like a
   table, while each lead stays a self-contained card that can expand. */
.lead-list {
  --lead-cols: 26px 40px minmax(120px, 1.4fr) minmax(140px, 1.8fr) 120px 110px minmax(90px, 1fr) 44px;
}
.lead-head {
  display: grid; grid-template-columns: var(--lead-cols);
  gap: 0 10px; align-items: start; padding: 6px 4px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.lead-item { border-bottom: 1px solid var(--line); }
.lead-item:last-child { border-bottom: none; }
.lead-item.expanded { background: #fbfcfe; }
.lead-main {
  display: grid; grid-template-columns: var(--lead-cols);
  gap: 0 10px; align-items: start; padding: 8px 4px; cursor: pointer;
}
.lead-main:hover { background: #f8f9fb; }
.lead-expander {
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 14px; color: var(--muted); line-height: 1;
  transition: transform 0.15s; justify-self: start;
}
.lead-item.expanded .lead-expander,
.lead-expander.expand-all.is-open,
.lead-expander.expand-all[aria-expanded="true"] {
  transform: rotate(90deg); color: var(--brand);
}
.lead-id { color: var(--muted); font-size: 13px; padding-top: 2px; }
.lead-id-inline { display: none; }
.lead-name {
  font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
/* On desktop the meta/badges wrappers dissolve so their children line up as
   grid columns under the header row. */
.lead-meta, .lead-badges { display: contents; }
.lead-address {
  font-size: 14px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
.lead-received { font-size: 14px; padding-top: 2px; }
.lead-status, .lead-crm { padding-top: 2px; }
.lead-actions { justify-self: end; padding-top: 0; }
.lead-detail { padding: 2px 4px 12px 40px; }
.lead-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 24px;
  font-size: 14px;
}
.lead-detail-notes { grid-column: 1 / -1; white-space: pre-wrap; }
.lead-detail-lbl {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
.row-actions { white-space: nowrap; }
/* ⋮ is the only actions control on every viewport (no inline buttons). */
.action-menu { display: inline-block; position: relative; }
.action-menu summary {
  list-style: none; cursor: pointer; display: inline-block;
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px; font-weight: 700; line-height: 1; background: #fff;
}
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu[open] summary { border-color: var(--muted); }
.action-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; min-width: 150px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16); padding: 6px;
}
.action-menu-list a {
  padding: 8px 10px; border-radius: 6px; color: var(--ink); font-weight: 600;
  font-size: 14px; text-decoration: none;
}
.action-menu-list a:hover { background: #f3f4f6; text-decoration: none; }

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; }
  .topbar nav {
    order: 3; flex: 1 1 100%; gap: 4px;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  .topbar nav a { padding: 4px 8px; margin-left: -8px; }
  .logout-form { margin-left: auto; }
  .whoami { display: none; }

  .container { padding: 0 12px; margin-top: 16px; }
  h1 { font-size: 20px; }
  .card { padding: 14px; }
  .page-head { flex-wrap: wrap; }

  .stat-row { gap: 8px; }
  .stat { min-width: 0; flex: 1 1 30%; padding: 8px 10px; }
  .stat-n { font-size: 18px; }
  .stat-l { font-size: 11px; }

  .table th, .table td { padding: 7px 8px; font-size: 14px; }

  /* Lead list becomes stacked cards: name on top, address/received under it,
     status badges last, with the ⋮ menu on the right. */
  .lead-head { display: none; }
  .lead-main {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 2px 8px; padding: 10px 2px;
  }
  .lead-expander { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 4px; }
  .lead-id { display: none; }
  .lead-id-inline { display: inline; color: var(--muted); font-weight: 400; font-size: 13px; }
  .lead-name { grid-column: 2; grid-row: 1; }
  .lead-meta {
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
    grid-column: 2; grid-row: 2;
  }
  .lead-badges { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 2; grid-row: 3; }
  .lead-actions { grid-column: 3; grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
  .lead-detail { padding-left: 32px; }
  .lead-detail-grid { grid-template-columns: 1fr; gap: 8px; }
  .kv { grid-template-columns: 92px 1fr; }
  .halt-reason { max-width: none; }
  .inline-form { flex-wrap: wrap; }
  .auth-card { margin: 24px auto; }
}

/* Calls dashboard + reports */
.nowrap { white-space: nowrap; }
.calls-table td { font-size: 14px; }
.calls-table .call-summary { color: #374151; max-width: 520px; }
.call-row { cursor: pointer; }
.call-row:hover td { background: #f8fafc; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.report-grid .card { margin-bottom: 0; }
.bars { width: 100%; border-collapse: collapse; font-size: 13px; }
.bars th { text-align: left; font-weight: 500; color: #374151; padding: 3px 8px 3px 0; white-space: nowrap; width: 38%; }
.bars td { padding: 3px 0; }
.bars td.n { width: 84px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { height: 14px; min-width: 2px; border-radius: 3px; background: var(--brand); opacity: .85; }
.bar-blue { background: var(--blue); }
.bar-green { background: var(--green); }
.bar-amber { background: var(--amber); }
.bar-purple { background: #7e22ce; }
@media (max-width: 700px) {
  .bars th { width: 45%; white-space: normal; }
}
.collapsible { max-height: 330px; overflow: hidden; position: relative; }
.collapsible.has-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.card.expanded .collapsible { max-height: none; }
.card.expanded .collapsible::after { display: none; }
.card-toggle { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 7px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.card-toggle:hover { text-decoration: underline; }
.card-toggle .chev { display: inline-block; transition: transform .15s; }
.card.expanded .card-toggle .chev { transform: rotate(180deg); }
.head-toggle { float: right; border: 0; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 4px; margin-left: 8px; }
.head-toggle .chev { display: inline-block; transition: transform .15s; }
.card.expanded .head-toggle .chev { transform: rotate(180deg); }
.head-toggle:hover { color: var(--brand); }