/* ============================================================
   Kai dashboards — components
   Buttons, cards, sections, stat strip, tags, attention queue,
   activity, call list, call detail, forms, toast, drawer,
   appointment types, email preview.
   Extracted from design/prototype-cobalt/kai.css. The prototype's
   scenario-switcher chrome is deliberately NOT carried over.
   ============================================================ */
/* ============================================================
   Buttons
   ============================================================ */
.btn{
  border-radius:var(--r-pill); padding:12px 24px; font-weight:600; font-size:15px;
  border:1px solid transparent; transition:background .16s,border-color .16s,color .16s,box-shadow .16s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
/* .btn-primary on the site: linear-gradient(135deg, blue-700, blue-500)
   with a 0 4px 20px rgba(37,99,235,.3) glow. */
.btn-primary{
  background:linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color:#fff; box-shadow:var(--shadow-btn);
}
.btn-primary:hover{ box-shadow:var(--shadow-btn-hover); transform:translateY(-1px) }
.btn-primary:disabled{ opacity:.5; cursor:default; box-shadow:none; transform:none }
/* Secondary carries the ring, matching .s2-chip. */
.btn-secondary{ background:var(--surface); border-color:transparent; box-shadow:var(--ring); color:var(--ink) }
.btn-secondary:hover{ box-shadow:var(--ring-strong); color:var(--cobalt) }
.btn-secondary:disabled{ opacity:.55; cursor:default }
.btn-quiet{ background:none; border:none; color:var(--cobalt); padding:8px 12px; font-weight:600; border-radius:var(--r-pill) }
.btn-quiet:hover{ color:var(--cobalt-hover); background:var(--cobalt-wash) }
.btn-sm{ padding:8px 17px; font-size:14px }

/* ============================================================
   Sections & cards
   Editorial: sections are ruled, not boxed. Cards only where a
   surface is genuinely needed (charts, forms, tables).
   ============================================================ */
.section{ margin-bottom:48px }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:6px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:19px; font-weight:600; letter-spacing:-.01em;
  color:var(--navy); line-height:1.3;
}
.section-head .count{ color:var(--ink-3); font-weight:400 }
.section-head .side{ font-size:14px; color:var(--ink-3) }
@media (max-width:760px){
  .section{ margin-bottom:38px }
  .section-head h2{ font-size:17.5px }
}

/* The site carries panels on an inset blue ring + a whisper of shadow
   (.h4-scene .panel), never a grey 1px border. */
.card{
  background:var(--surface); border:none;
  border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-card);
}
@media (max-width:760px){ .card{ padding:20px 18px } }

/* ============================================================
   Stat strip — hero number + supporting metrics divided by
   hairlines (answers "is the practice performing normally?")
   ============================================================ */
.stat-strip{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.stat{ padding:18px 20px 16px; border-left:1px solid var(--line); min-width:0 }
.stat:first-child{ border-left:none }
.stat .lbl{ font-size:14.5px; font-weight:500; letter-spacing:0; color:var(--ink-3) }
.stat .val{
  font-size:26px; font-weight:640; letter-spacing:-.02em; margin-top:6px;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.stat.hero{ background:var(--surface); position:relative }
.stat.hero .val{ font-size:40px; font-weight:640 }
.stat.hero .spark{ position:absolute; right:20px; bottom:18px }
.stat .delta{ font-size:12px; margin-top:6px; font-weight:600; color:var(--ink-3) }
.stat .delta .up{ color:var(--ok) }
.stat .delta .down{ color:var(--warn) }
.stat .delta .vs{ font-weight:500; color:var(--ink-3) }
.stat .val .unit{ font-size:15px; font-weight:600; color:var(--ink-3); margin-left:2px }
.stat .val.attention{ color:var(--warn) }
.stat .val.quiet-zero{ color:var(--ink-3) }
@media (max-width:1000px){
  .stat-strip{ grid-template-columns:1fr 1fr }
  .stat{ border-top:1px solid var(--line) }
  .stat:nth-child(-n+2){ border-top:none }
  .stat:nth-child(odd){ border-left:none }
  .stat.hero{ grid-column:1/-1; border-left:none }
  .stat.hero + .stat{ border-left:none }
}

/* ============================================================
   Tags — squared, tinted, small caps. Not pills.
   ============================================================ */
.tag{
  display:inline-flex; align-items:center;
  font-size:12.5px; font-weight:600; letter-spacing:0;
  padding:5px 13px; border-radius:var(--r-pill); white-space:nowrap;
}
.tag.booked{ background:var(--ok-wash); color:var(--ok) }
.tag.emergency{ background:var(--urgent-wash); color:var(--urgent) }
.tag.callback{ background:var(--warn-wash); color:var(--warn) }
.tag.rescheduled{ background:var(--info-wash); color:var(--info) }
.tag.cancelled{ background:var(--surface); color:var(--ink-2); box-shadow:var(--ring) }
.tag.no_action{ background:#EDF0F5; color:var(--ink-2) }
.tag.complaint{ background:var(--critical-wash); color:var(--critical) }
.tag.lead{ background:var(--info-wash); color:var(--info) }
.tag.registration{ background:#F0EAFB; color:#6A3FB0 }

/* ============================================================
   Attention queue — flat, newest first (ADR-010 Phase 1, decision D3)
   The prototype grouped rows into Urgent / Waiting / Older. That is NOT
   carried over: it reorders the live queue and would require inferring
   urgency for complaints, leads and registrations, none of which carry
   an authoritative urgency field. Urgent styling is applied ONLY where a
   record states its own urgency.
   ============================================================ */
.q-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:16px; align-items:center;
  padding:15px 12px; border-bottom:1px solid var(--line);
  border-left:3px solid transparent; border-radius:var(--r-md);
  transition:background .15s;
}
/* A real focusable button, NOT display:contents — that removes the box and
   makes the control unreachable by keyboard in Chrome. It lays its own
   contents out on a nested grid instead. */
.q-open{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:16px; align-items:center; width:100%;
  background:none; border:none; padding:0; font:inherit;
  text-align:left; color:inherit; cursor:pointer; border-radius:var(--r-sm);
}
.q-row.clickable:hover{ background:var(--blue-50) }
.q-row.clickable:hover .q-chev{ color:var(--cobalt); transform:translateX(2px) }
.q-row.clickable:hover .who{ color:var(--cobalt) }
/* The visible ring is :focus-visible, so a mouse click doesn't draw one.
   The supporting tint and chevron shift hang off :focus-within, which
   resolves reliably regardless of how focus arrived. */
.q-open:focus-visible{ outline:2px solid var(--cobalt); outline-offset:3px }
.q-row:focus-within{ background:var(--blue-50) }
.q-row:focus-within .q-chev{ color:var(--cobalt); transform:translateX(2px) }

/* The affordance: a quiet chevron saying "this opens". */
.q-chev{
  display:inline-flex; align-items:center; color:var(--ink-3);
  transition:transform .16s ease, color .16s ease; flex:none;
}
@media (prefers-reduced-motion: reduce){ .q-chev{ transition:none } }
.q-row:last-child{ border-bottom:none }
.q-row.urgent{ border-left-color:var(--urgent); background:linear-gradient(90deg, rgba(180,45,29,.045), rgba(180,45,29,0) 72%) }
.q-row .q-main{ min-width:0; display:flex; flex-direction:column }
.q-row .who{ font-weight:600; font-size:15.5px }
/* D4 (revised) — the phone number is NOT on the summary row at all. Six
   masked numbers plus six reveal links made the queue harder to scan without
   making it safer. The full number lives only in the detail panel opened from
   the row. Data access is unchanged either way; this is on-screen exposure. */
.q-row .why{
  font-size:14.5px; color:var(--ink-2); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.q-row .age{ font-size:14px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums }
.q-row .age.overdue{ color:var(--urgent); font-weight:600 }
.q-done{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:none; box-shadow:var(--ring); border-radius:var(--r-pill);
  padding:8px 16px; font-size:14px; font-weight:600; color:var(--ink-2);
  transition:.15s;
}
.q-done:hover{ box-shadow:inset 0 0 0 1px var(--ok); color:var(--ok); background:var(--ok-wash) }
@media (max-width:760px){
  .q-row{ grid-template-columns:1fr; grid-template-rows:auto auto; gap:10px; padding:14px 10px }
  .q-open{
    grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
    gap:8px 10px;
  }
  .q-open .q-tag-cell{ grid-area:1 / 1 }
  .q-open .age{ grid-area:1 / 2; justify-self:end }
  .q-open .q-chev{ grid-area:1 / 3; justify-self:end }
  .q-open .q-main{ grid-area:2 / 1 / 2 / 4 }
  .q-row .q-done{ justify-self:start }
}

/* ---------- queue detail panel (D4: where the number lives) ---------- */
.q-detail{ display:flex; flex-direction:column; gap:20px }
.q-detail .dl{ display:flex; flex-direction:column; gap:14px }
.q-detail .kv{ display:flex; flex-direction:column; gap:3px }
.q-detail .kv .k{ font-size:13.5px; color:var(--ink-3) }
.q-detail .kv .v{ font-size:16.5px; font-weight:600; color:var(--ink) }
.q-detail .kv .v.num{ font-variant-numeric:tabular-nums; letter-spacing:.01em }
.q-detail .why-full{ font-size:16px; color:var(--ink-2); line-height:1.6 }
.q-detail .call{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--cobalt-wash); border:1px solid var(--cobalt-line);
  border-radius:var(--r-md); padding:16px 18px; text-decoration:none; color:var(--ink);
}
.q-detail .call .num{ font-size:19px; font-weight:600; font-variant-numeric:tabular-nums }
.q-detail .call:hover{ border-color:var(--cobalt) }

/* ============================================================
   Recent activity (Latest from Kai)
   ============================================================ */
.act-row{
  display:flex; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line);
  font-size:13.5px; align-items:baseline;
}
.act-row:last-child{ border-bottom:none }
.act-row .t{ color:var(--ink-3); font-size:13.5px; white-space:nowrap; font-variant-numeric:tabular-nums; min-width:44px }
.act-row .what{ color:var(--ink-2) }
.act-row .what strong{ color:var(--ink); font-weight:600 }

/* ============================================================
   Calls list
   ============================================================ */
.filters{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-bottom:24px;
  width:fit-content; max-width:100% }
.filter{
  border:none; background:var(--surface); box-shadow:var(--ring);
  padding:8px 16px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); border-radius:var(--r-pill); transition:.16s;
}
.filter:hover{ color:var(--cobalt); box-shadow:var(--ring-strong) }
.filter.active{ background:var(--cobalt); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.32) }
/* The strip needs a positioned parent for its overflow cue. */
.filters-wrap{ position:relative; max-width:100%; margin-bottom:24px }
.filters-wrap > .filters{ margin-bottom:0 }

@media (max-width:760px){
  /* A deliberate horizontal strip: momentum scrolling, snap points, no
     scrollbar furniture, and a fade at the right edge so it reads as
     scrollable. The strip scrolls; the page never does. */
  .filters-wrap{ overflow:hidden }
  .filters{
    width:100%; max-width:100%; flex-wrap:nowrap;
    overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scroll-padding-left:2px;
    scrollbar-width:none; -ms-overflow-style:none;
    padding:2px 20px 2px 2px;   /* right pad keeps the last chip clear of the fade */
  }
  .filters::-webkit-scrollbar{ display:none }
  .filter{ white-space:nowrap; flex:0 0 auto; scroll-snap-align:start }
  /* the cue */
  .filters-wrap::after{
    content:''; position:absolute; top:0; bottom:0; right:0; width:34px;
    pointer-events:none; opacity:0; transition:opacity .18s;
    background:linear-gradient(to right, rgba(240,246,255,0), var(--paper) 78%);
  }
  .filters-wrap.can-scroll-right::after{ opacity:1 }
}

.day-head{
  font-size:15px; font-weight:600; letter-spacing:0;
  color:var(--ink); padding:26px 2px 10px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
}
.day-head .n{ font-weight:400; font-size:14px; color:var(--ink-3); white-space:nowrap }
.call-row{
  display:grid; grid-template-columns:56px auto minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:15px 10px; border-bottom:1px solid var(--line); cursor:pointer;
  border-radius:var(--r-md);
}
.call-row:hover{ background:var(--surface) }
/* A grid track will not shrink below its content unless the item is
   allowed to: without min-width:0 the ellipsis never engages and the row
   pushes the page wider than the viewport. */
.call-row .c-main{ min-width:0 }
.call-row .time{ font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums }
.call-row .who{ font-weight:600; font-size:15.5px }
.call-row .sum{
  font-size:14.5px; color:var(--ink-2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.call-row .dur{ font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap }
@media (max-width:760px){
  /* two rows: time + tag + duration above, caller and summary below */
  .call-row{
    grid-template-columns:auto auto 1fr; grid-template-rows:auto auto;
    gap:8px 12px; padding:14px 10px;
  }
  .call-row .time{ grid-area:1 / 1 }
  .call-row .c-tag-cell{ grid-area:1 / 2 }
  .call-row .dur{ grid-area:1 / 3; justify-self:end }
  .call-row .c-main{ grid-area:2 / 1 / 2 / 4 }
}

/* ============================================================
   Call detail — transcript as a script, not chat bubbles
   ============================================================ */
.cd-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px;
  font-size:13.5px; color:var(--ink-2) }
.cd-meta .sep{ color:var(--line-strong) }
.cd-lede{
  font-size:16px; line-height:1.6; color:var(--ink); max-width:64ch;
  padding:18px 0 20px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
.turn{ display:grid; grid-template-columns:74px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--line) }
.turn:last-child{ border-bottom:none }
.turn .spk{
  font-size:14px; font-weight:600; letter-spacing:0;
  color:var(--ink-3); padding-top:2px;
}
.turn.kai .spk{ color:var(--cobalt) }
.turn p{ font-size:14.5px; line-height:1.6; color:var(--ink); max-width:66ch }
.turn.kai p{ color:var(--ink-2) }
@media (max-width:760px){ .turn{ grid-template-columns:58px 1fr; gap:12px } }

/* ============================================================
   Forms & settings
   ============================================================ */
.field{ margin-bottom:16px }
/* Sentence case, not a tiny uppercase label. 16px inputs also stop iOS
   zooming the page when a field takes focus. */
.field label{
  display:block; font-size:14.5px; font-weight:600; letter-spacing:0;
  color:var(--ink); margin-bottom:8px; line-height:1.4;
}
.field input,.field select{
  width:100%; background:var(--surface-soft); border:none; box-shadow:var(--ring);
  border-radius:var(--r-input); padding:13px 16px; font-size:16px; color:var(--ink);
  transition:box-shadow .16s,background .16s; outline:none;
}
.field input:focus,.field select:focus{
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px var(--cobalt-wash);
}
.field input:disabled{ background:var(--surface-soft); color:var(--ink-2); opacity:.75 }
.field .hint{ font-size:13.5px; color:var(--ink-3); margin-top:7px; line-height:1.5 }
.field{ margin-bottom:20px }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px }
@media (max-width:760px){ .form-grid{ grid-template-columns:1fr } }
.form-error{ color:var(--urgent); font-size:13px; margin-top:12px; min-height:18px }
.form-ok{ color:var(--ok); font-size:13px; margin-top:12px; min-height:18px }

.settings-section{ margin-bottom:64px }
/* Forms stay within a comfortable measure; the branding editor keeps the
   full width because its preview needs the room. */
.settings-section > .card{ max-width:860px }
.settings-section .branding-layout > .card{ max-width:none }
.settings-section > h2{
  font-size:19px; font-weight:600; letter-spacing:-.01em;
  color:var(--navy); line-height:1.3;
}
.settings-section > .s-sub{ font-size:16.5px; color:var(--ink-2); margin:10px 0 22px; max-width:64ch; line-height:1.55 }
@media (max-width:760px){
  .settings-section{ margin-bottom:48px }
  .settings-section > h2{ font-size:17.5px }
  .settings-section > .s-sub{ font-size:15.5px }
}
.settings-note{
  font-size:14.5px; color:var(--ink-2); background:var(--surface-soft);
  border:1px solid var(--line); border-left:3px solid var(--cobalt);
  border-radius:var(--r-md); padding:14px 18px; margin-bottom:20px;
}
.readonly-banner{
  background:var(--warn-wash); border:1px solid #E8D9AE; border-radius:var(--r-md);
  padding:16px 20px; font-size:15px; line-height:1.55; color:var(--warn); margin-bottom:32px;
}
.readonly-banner strong{ color:var(--warn) }

/* toggle switch — fully rounded track and thumb */
.sw{ position:relative; display:inline-block; width:50px; height:30px; flex-shrink:0 }
.sw input{ opacity:0; width:0; height:0 }
.sw span{ position:absolute; inset:0; background:var(--slate-300); border-radius:var(--r-pill); transition:.18s; cursor:pointer }
.sw span::before{
  content:''; position:absolute; height:24px; width:24px; left:3px; top:3px;
  background:#fff; border-radius:var(--r-pill); transition:.18s;
  box-shadow:0 1px 3px rgba(15,30,53,.28);
}
.sw input:checked + span{ background:linear-gradient(135deg, var(--blue-700), var(--blue-500)) }
.sw input:checked + span::before{ transform:translateX(20px) }
.sw input:focus-visible + span{ outline:2px solid var(--cobalt); outline-offset:3px }
.sw input:disabled + span{ opacity:.5; cursor:default }

/* opening hours */
/* Day name at one edge, its controls at the other, so the row uses the whole
   card instead of huddling in the left half. Below 760px it stacks. */
.hours-grid{ display:flex; flex-direction:column }
.hours-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.hours-row:last-child{ border-bottom:none }
.hours-controls{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end }
.hours-grid .dy{ font-weight:600; font-size:15.5px }
.hours-grid .closed-lbl{ font-size:15px; color:var(--ink-3); justify-self:start }
.hours-times{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-2); min-width:0 }
.hours-times .sep{ flex:none }
.hours-times input[type=time]{
  padding:11px 14px; border:none; box-shadow:var(--ring); border-radius:var(--r-input);
  background:var(--surface-soft); font-size:16px; color:var(--ink); outline:none;
  transition:box-shadow .16s,background .16s;
}
.hours-times input[type=time]:focus{
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px var(--cobalt-wash);
}
.hours-times input[type=time]:disabled{ opacity:.55 }
.sw-label{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); cursor:pointer }
@media (max-width:760px){
  /* stack: day name and toggle share a line, both times sit beneath */
  .hours-row{ display:grid; grid-template-columns:1fr auto; gap:12px 14px; padding:18px 0 }
  .hours-row .dy{ grid-area:1 / 1 }
  .hours-row .hours-controls{ display:contents }
  .hours-row .sw-label{ grid-area:1 / 2; justify-self:end }
  .hours-row .hours-times{ grid-area:2 / 1 / 2 / 3 }
  .hours-row .closed-lbl{ grid-area:2 / 1 / 2 / 3 }
  .hours-times input[type=time]{ flex:1 1 0; min-width:0; width:100% }
}

/* appointment types table */
.types-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg) }
.types{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:820px }
.types th{
  text-align:left; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); padding:12px 14px; border-bottom:1px solid var(--line);
  background:var(--surface-soft); white-space:nowrap;
}
.types td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle }
.types tr:last-child td{ border-bottom:none }
.types .t-name{ font-weight:600 }
.types .t-meta{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.types .price{ font-variant-numeric:tabular-nums; white-space:nowrap }
.types input[type=text]{
  width:200px; padding:7px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); font-size:13px;
}
.types input[type=text]:focus{ border-color:var(--cobalt); outline:none }
.types select{
  padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); font-size:13px;
}

/* ============================================================
   Toast
   ============================================================ */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#FFFFFF; padding:11px 20px; border-radius:var(--r-md);
  font-size:13.5px; font-weight:500; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s; z-index:70; max-width:90vw;
  box-shadow:var(--shadow-pop);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
#toast.err{ background:var(--critical) }

/* ============================================================
   Settings revision — form controls brought into the system
   ============================================================ */
.select-wrap{ position:relative; display:block }
.select-wrap select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--surface-soft); border:none; box-shadow:var(--ring);
  border-radius:var(--r-input); padding:13px 40px 13px 16px; font-size:16px;
  font-family:var(--font-ui); color:var(--ink); line-height:1.4;
  transition:border-color .16s,box-shadow .16s,background .16s; outline:none; cursor:pointer;
}
.select-wrap::after{
  content:''; position:absolute; right:13px; top:50%; width:10px; height:10px;
  transform:translateY(-62%) rotate(45deg); pointer-events:none;
  border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3);
}
.select-wrap select:hover{ box-shadow:var(--ring-strong) }
.select-wrap select:focus{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px var(--cobalt-wash) }
.select-wrap select:disabled{ background:var(--surface-soft); color:var(--ink-2); cursor:default }
.select-wrap.sm select{ padding:9px 34px 9px 13px; font-size:14.5px; border-radius:var(--r-input) }

/* ---------- appointment types: two-zone list ---------- */
.sync-note{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface-soft); border:1px solid var(--line);
  border-left:2px solid var(--line-strong);
  border-radius:var(--r-md); padding:12px 16px; margin-bottom:16px;
  font-size:13px; color:var(--ink-2); line-height:1.55;
}
.sync-note .sync-when{ color:var(--ink-3); font-size:14px; margin-top:5px; font-variant-numeric:tabular-nums }
.sync-note strong{ color:var(--ink) }

.types-zones{
  display:grid; grid-template-columns:290px 1fr; gap:0 22px;
  padding:0 18px 6px; margin-top:14px;
}
.types-zones .zone{
  font-size:14px; font-weight:600; letter-spacing:0;
  color:var(--ink-3); padding-bottom:10px; border-bottom:1px solid var(--line);
}
.type-row{
  display:grid; grid-template-columns:290px 1fr; gap:0 22px;
  padding:15px 18px; border-bottom:1px solid var(--line);
  background:var(--surface); align-items:start;
}
.types-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.type-row:last-child{ border-bottom:none }
.type-c4d .t-name{ font-weight:600; font-size:14.5px }
.type-c4d .t-meta{ font-size:12.5px; color:var(--ink-2); margin-top:3px; font-variant-numeric:tabular-nums }
.type-c4d .t-flag{ font-size:11.5px; color:var(--ink-3); margin-top:3px }
.type-kai{ display:flex; gap:14px; align-items:flex-start; min-width:0 }
.type-kai .kw-summary{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:5px; align-items:center }
.type-kai .kfacts{ font-size:12px; color:var(--ink-3); white-space:nowrap; text-align:right; line-height:1.7 }
.type-kai .kfacts .off{ color:var(--warn); font-weight:600 }
.kw-chip{
  font-size:12px; font-weight:500; color:var(--ink-2);
  background:var(--surface-soft); border:1px solid var(--line);
  border-radius:5px; padding:2px 8px; white-space:nowrap;
}
.kw-chip.more{ background:none; border-style:dashed; color:var(--ink-3) }
.kw-chip{ border-radius:var(--r-pill) }
.kw-none{ font-size:12.5px; color:var(--warn); font-weight:500 }
@media (max-width:900px){
  .types-zones{ display:none }
  .type-row{ grid-template-columns:1fr; gap:10px; padding:14px 16px }
  .type-c4d{ padding-bottom:10px; border-bottom:1px dashed var(--line) }
  .type-kai .kfacts{ text-align:left }
  .type-kai{ flex-direction:column; gap:8px }
}

/* ---------- edit drawer ---------- */
.drawer-scrim{
  position:fixed; inset:0; background:rgba(15,30,53,.32); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.drawer-scrim.open{ opacity:1; pointer-events:auto }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:520px; max-width:100vw; z-index:91;
  background:var(--surface); border-left:1px solid var(--line-strong);
  box-shadow:-12px 0 40px rgba(15,30,53,.12);
  transform:translateX(102%); transition:transform .22s ease;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none }
.drawer-head{
  padding:20px 24px 14px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.drawer-head h2{ font-size:18px; font-weight:600; letter-spacing:-.005em; color:var(--navy) }
.drawer-head .sub{ font-size:12.5px; color:var(--ink-3); margin-top:3px }
.drawer-close{
  background:none; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  width:30px; height:30px; font-size:15px; color:var(--ink-2); line-height:1;
}
.drawer-close:hover{ border-color:var(--ink-3); color:var(--ink) }
.drawer-body{ flex:1; overflow-y:auto; padding:18px 24px 24px }
.drawer-foot{
  padding:14px 24px; border-top:1px solid var(--line);
  display:flex; gap:10px; justify-content:flex-end; background:var(--surface-soft);
}
.c4d-facts{
  background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; margin-bottom:22px;
}
.c4d-facts .facts-label{
  font-size:14px; font-weight:600; letter-spacing:0;
  color:var(--ink-3); margin-bottom:12px;
}
.c4d-facts dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 18px; font-size:13.5px }
.c4d-facts dt{ color:var(--ink-3) }
.c4d-facts dd{ font-weight:600; font-variant-numeric:tabular-nums }
.c4d-facts .facts-note{ font-size:13.5px; color:var(--ink-3); margin-top:10px; line-height:1.5 }
.drawer-section-title{
  font-size:16px; font-weight:600; letter-spacing:-.005em;
  color:var(--navy); padding-bottom:10px; border-bottom:1px solid var(--line);
  margin-bottom:14px;
}

/* chip alias editor */
.chip-editor{
  border:none; box-shadow:var(--ring); border-radius:var(--r-input); background:var(--surface-soft);
  padding:10px; display:flex; flex-wrap:wrap; gap:8px; cursor:text;
}
.chip-editor:focus-within{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px var(--cobalt-wash) }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue-50); box-shadow:var(--ring); border-radius:var(--r-pill);
  padding:6px 8px 6px 14px; font-size:14px; font-weight:500; color:var(--navy);
}
.chip button{
  background:none; border:none; padding:0 4px; font-size:16px; line-height:1;
  color:var(--info); border-radius:var(--r-pill);
}
.chip button:hover{ color:var(--urgent); background:rgba(255,255,255,.7) }
.chip.warn{ background:var(--warn-wash); border-color:#E4CD96 }
.chip-editor input{
  flex:1; min-width:150px; border:none; outline:none; font-size:16px;
  font-family:var(--font-ui); padding:4px 6px; background:none; color:var(--ink);
}
.chip-help{ font-size:13.5px; color:var(--ink-3); margin-top:9px; line-height:1.55 }
.chip-count{ float:right; font-variant-numeric:tabular-nums }
.chip-msgs{ margin-top:8px; display:flex; flex-direction:column; gap:6px }
.chip-msg{
  font-size:12.5px; line-height:1.5; border-radius:var(--r-sm); padding:8px 12px;
  border-left:2px solid transparent;
}
.chip-msg.warn{ background:var(--warn-wash); color:var(--warn); border-left-color:var(--warn) }
.chip-msg.err{ background:var(--urgent-wash); color:var(--urgent); border-left-color:var(--urgent) }

/* phrase tester */
.tester{
  background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; margin-top:18px;
}
.tester .t-label{ font-size:14.5px; font-weight:600; letter-spacing:0; color:var(--ink); margin-bottom:10px }
.tester .t-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:15px }
.tester input{
  flex:1; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:8px 11px; font-size:13.5px; font-family:var(--font-ui); background:var(--surface);
}
.tester input:focus{ border-color:var(--cobalt); outline:none }
.tester .t-result{ margin-top:10px; font-size:13px; line-height:1.55 }
.tester .t-result .match{ font-weight:650; color:var(--ok) }
.tester .t-result .fallback{ font-weight:600; color:var(--warn) }
.tester .t-result .miss{ color:var(--ink-2) }
.tester .t-note{ font-size:11.5px; color:var(--ink-3); margin-top:8px }

/* toggle rows in drawer */
.opt-row{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line) }
.opt-row:last-child{ border-bottom:none }
.opt-row .grow{ flex:1 }
.opt-row .o-title{ font-weight:600; font-size:14px }
.opt-row .o-sub{ font-size:12.5px; color:var(--ink-2); margin-top:2px; line-height:1.5 }
.flag-badge{
  display:inline-block; font-size:10.5px; font-weight:650; letter-spacing:.05em;
  text-transform:uppercase; color:var(--warn); background:var(--warn-wash);
  border-radius:var(--r-pill); padding:3px 10px; margin-left:8px; vertical-align:1px;
}

/* ---------- email branding: editor + live preview ---------- */
.branding-layout{ display:grid; grid-template-columns:minmax(340px,440px) 1fr; gap:26px; align-items:start }
@media (max-width:1100px){ .branding-layout{ grid-template-columns:1fr } }
.color-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px }
.color-field{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2) }
.color-field input[type=color]{
  width:36px; height:32px; padding:2px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--surface); cursor:pointer;
}
.preview-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.preview-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--line); background:var(--surface-soft);
}
.preview-bar .pv-title{ font-size:14px; font-weight:600; letter-spacing:0; color:var(--ink-2) }
.pv-toggle{ display:inline-flex; gap:6px }
.pv-toggle button{ border:none; background:var(--surface); box-shadow:var(--ring); font-size:13px; font-weight:600; color:var(--ink-2); padding:6px 14px; border-radius:var(--r-pill) }
.pv-toggle button.active{ background:var(--cobalt); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.32) }
.pv-from{
  padding:10px 16px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2);
  display:flex; flex-direction:column; gap:2px;
}
.pv-from .addr{ font-variant-numeric:tabular-nums }
.pv-from .note{ font-size:11.5px; color:var(--ink-3) }
.pv-stage{ padding:22px; display:flex; justify-content:center; overflow-x:auto }
.pv-email{ width:600px; max-width:100%; border-radius:6px; overflow:hidden; box-shadow:0 1px 4px rgba(15,30,53,.14); transition:width .2s }
.pv-email.mobile{ width:360px }
.pv-banner{ padding:26px 24px; text-align:center }
.pv-banner img.logo{ height:44px; max-height:44px; margin:0 auto 10px; display:block; object-fit:contain }
.pv-banner .b-name{ font-size:21px; font-weight:700; letter-spacing:.01em }
.pv-banner .b-tag{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; opacity:.85 }
.pv-banner-img{ display:block; width:100%; height:auto }
.pv-divider{ height:3px }
.pv-body{ padding:24px 26px; font-size:14px; line-height:1.65 }
.pv-body .appt{
  border-radius:6px; padding:13px 16px; margin:16px 0; font-size:13.5px; line-height:1.6;
  border:1px solid rgba(15,30,53,.10);
}
.pv-body .btn-email{
  display:inline-block; color:#fff; border-radius:6px; padding:10px 22px;
  font-size:13.5px; font-weight:600; margin-top:4px;
}
.pv-footer{ text-align:center; font-size:11.5px; padding:16px 10px 26px; opacity:.75 }

/* ============================================================
   Preview banner — non-production builds only

   Emitted by build.mjs for preview builds and stripped from a
   production build, so fictional records can never be mistaken
   for a real practice's data.
   ============================================================ */
.preview-banner{
  position:sticky; top:0; z-index:40;
  background:var(--warn-wash); color:var(--warn);
  border-bottom:1px solid rgba(138,90,18,.25);
  padding:9px 20px; font-size:13px; line-height:1.4; text-align:center;
}
.preview-banner strong{ font-weight:650 }
@media (max-width:760px){ .preview-banner{ padding:8px 14px; font-size:12.5px } }

/* ============================================================
   Home activity grid — chart beside "Latest from Kai"

   The prototype set this grid inline on the element, so it could not be
   overridden by a media query and never collapsed: below ~760px the second
   column was simply cut off. Defined here instead so it stacks on mobile.
   ============================================================ */
.activity-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px }
@media (max-width:900px){ .activity-grid{ grid-template-columns:1fr; gap:16px } }

/* A capability the bound provider cannot serve: stated plainly, not faked. */
.tester.unavailable{ opacity:.85 }
.tester.unavailable .t-label{ color:var(--ink-3) }

/* Preview-only state switcher for the sign-in design page. */
.proto-switch{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; gap:6px; background:var(--surface); border-radius:var(--r-pill);
  padding:5px; box-shadow:var(--shadow-pop);
}
.proto-switch button{
  border:none; background:none; border-radius:var(--r-pill);
  padding:7px 15px; font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.proto-switch button:hover{ background:var(--blue-50); color:var(--cobalt) }