:root {
  --primary: #3E5C50;
  --primary-dark: #2C4339;
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --user-bubble: #E2EAE5;
  --bot-bubble: #FFFFFF;
  --text: #2C3A33;
  --muted: #8C9A92;
  --accent: #C49A6C;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#app { height: 100%; display: flex; flex-direction: column; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.screen.center { align-items: center; justify-content: center; text-align: center; gap: 18px; }

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

/* --- login --- */
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand-mark {
  font-size: 56px; line-height: 1; color: var(--primary);
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); box-shadow: 0 6px 24px rgba(0,0,0,.08); margin-bottom: 8px;
}
.brand h1 { margin: 8px 0 0; font-size: 26px; font-weight: 650; }
.tagline { margin: 0; color: var(--muted); }

/* --- buttons --- */
.btn-primary {
  border: none; background: var(--primary); color: #fff;
  font-size: 16px; font-weight: 600; padding: 14px 32px; border-radius: 999px;
  cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: .6; cursor: default; }
/* secondary landing CTA (e.g. "Request access" on faculty portals) */
.btn-outline {
  border: 2px solid var(--primary); background: transparent; color: var(--primary);
  font-size: 16px; font-weight: 600; padding: 12px 32px; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s; margin-top: 10px;
}
.btn-outline:hover { background: var(--primary); color: #fff; }

/* --- native in-app login form (EU backend) ------------------------------- */
.auth-brand { margin-bottom: 4px; }
.auth-form {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 320px;
}
.auth-form input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; font-size: 16px;
  border: 1px solid #d8d2c8; border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.auth-form input:focus { outline: none; border-color: var(--primary); }
.auth-form .btn-primary { width: 100%; margin-top: 2px; }
.auth-note { margin: 0 0 2px; color: var(--muted); font-size: 14px; text-align: left; }
.auth-error { margin: 2px 0 0; color: #c0392b; font-size: 14px; }
.auth-link {
  border: none; background: transparent; color: var(--primary);
  font-size: 14px; cursor: pointer; padding: 4px;
}
.auth-link:hover { text-decoration: underline; }
.auth-cancel { color: var(--muted); margin-top: 4px; }
.btn-ghost {
  border: none; background: transparent; color: var(--primary);
  font-size: 15px; padding: 6px 10px; cursor: pointer; border-radius: 8px;
}
.btn-ghost:hover { background: rgba(0,0,0,.04); }

/* --- top bar --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--surface);
  border-bottom: 1px solid rgba(0,0,0,.06); flex: 0 0 auto;
}
.topbar-title { font-weight: 650; font-size: 17px; }
.topbar-actions { display: flex; align-items: center; gap: 4px; }

/* --- modal (account / change password) --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: 14px; padding: 22px;
  width: 100%; max-width: 360px; box-shadow: 0 14px 44px rgba(0,0,0,.28);
  /* The account modal grew taller than a laptop viewport (name + email +
     phone + data export + password): cap it and scroll inside, so the top
     and bottom are always reachable. */
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal h2 { margin: 0 0 16px; font-size: 18px; color: var(--text); }
.modal label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; color: var(--muted); margin-bottom: 12px;
}
.modal input, .modal select, .modal textarea {
  padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px;
  font-size: 15px; color: var(--text); background: var(--bg);
  /* Selects and textareas were browser-default inside a modal of rounded
     inputs; and a select carrying 400 timezone ids must be allowed to shrink
     to its column rather than set the column's width. */
  font-family: inherit; max-width: 100%; min-width: 0;
}
.modal textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none; border-color: var(--primary);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-msg { min-height: 18px; font-size: 13px; margin: 2px 0 8px; }
.modal-msg.error { color: #C0392B; }
.modal-msg.ok { color: #2E7D32; }
.manual-details { margin-bottom: 16px; font-size: 14px; }
.manual-details summary { cursor: pointer; font-weight: 600; color: var(--text); }
.manual-details p, .manual-details ul { margin: 8px 0; color: var(--muted); }
.manual-details li { margin-left: 18px; }

/* --- persona picker --- */
.picker-hint { color: var(--muted); margin: 8px 0 18px; }
.persona-grid { display: flex; flex-direction: column; gap: 14px; max-width: 480px; width: 100%; margin: 0 auto; }
.persona-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid rgba(0,0,0,.08); border-left: 5px solid var(--card-accent, var(--primary));
  background: var(--surface); border-radius: 16px; padding: 18px 20px;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.persona-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.persona-name { font-size: 18px; font-weight: 650; }
.persona-tagline { color: var(--muted); font-size: 14px; }
.signed-as { color: var(--muted); font-size: 13px; text-align: center; margin-top: 24px; }

/* --- chat --- */
.messages {
  flex: 1; overflow-y: auto; padding: 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 18px;
  font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.bubble.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 5px; }
.bubble.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 5px; }

/* Image bubble (e.g. the first-contact welcome infographic) — let the picture
   fill the bubble edge-to-edge rather than sit in text padding. */
.bubble.has-image { padding: 4px; max-width: 85%; }
.bubble-image { display: block; width: 100%; height: auto; border-radius: 14px; }

.bubble.typing { display: flex; gap: 4px; align-items: center; }
.bubble.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: blink 1.2s infinite both;
}
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.system-line { align-self: center; color: var(--muted); font-size: 13px; text-align: center; max-width: 90%; padding: 4px 0; }
.system-line.error { color: #C0392B; }
.error-msg { color: #C0392B; max-width: 420px; }

/* --- composer --- */
.composer {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid rgba(0,0,0,.06);
}
.composer textarea {
  flex: 1; resize: none; border: 1px solid rgba(0,0,0,.12); border-radius: 20px;
  padding: 10px 14px; font-size: 15px; font-family: inherit; line-height: 1.35;
  max-height: 140px; outline: none; background: var(--bg); color: var(--text);
}
.composer textarea:focus { border-color: var(--primary); }
.btn-send {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 18px; cursor: pointer;
}
.btn-send:disabled { opacity: .5; cursor: default; }
.btn-attach {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--bg); color: var(--muted); font-size: 17px; cursor: pointer;
  line-height: 1;
}
.btn-attach:hover { color: var(--primary); }

/* --- pending image attachment (sits above the composer) --- */
.attach-strip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface); color: var(--muted);
  border-top: 1px solid rgba(0,0,0,.06); font-size: 13px;
}
.attach-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
  flex: 0 0 auto;
}
.attach-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.attach-remove {
  flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: 50%;
  background: var(--bg); color: var(--muted); font-size: 16px; cursor: pointer;
  line-height: 1;
}
.attach-remove:hover { color: var(--text); }

/* --- spinner --- */
.spinner {
  width: 38px; height: 38px; border: 3px solid rgba(0,0,0,.1);
  border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- persona-site landing (branded single-persona front door) --- */
.landing {
  flex: 1; display: flex; flex-direction: column;
  align-items: center;
  padding: 32px 24px; overflow-y: auto; position: relative; width: 100%;
}
.landing-inner {
  max-width: 380px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  /* Vertical centering via auto margins, NOT justify-content:center on the
     parent — flex centering in a scroll container makes overflowing content
     unreachable above the scroll origin (the top of the page gets cut off).
     Auto margins center when there is room and collapse to 0 when there is
     not, so tall content starts at the top and scrolls normally. */
  margin-top: auto; margin-bottom: auto;
}
.landing-copy, .landing-bullets { width: 100%; overflow-wrap: break-word; }
.landing .brand h1 { font-size: 34px; }
.landing-copy { color: var(--text); line-height: 1.55; }
.landing-copy p { margin: 0 0 12px; }
.landing-bullets {
  list-style: none; padding: 0; margin: 0; text-align: left;
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px;
}
.landing-bullets li { position: relative; padding-left: 22px; color: var(--text); }
.landing-bullets li::before {
  content: "◐"; position: absolute; left: 0; top: 0; color: var(--primary);
}
.flash {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: 90%; padding: 12px 18px; border-radius: 10px; z-index: 1000;
  font-size: 14px; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); cursor: pointer;
}
.flash-ok { background: #2e7d5b; }
.flash-warn { background: #b5562e; }
.landing-infographic-link { width: 100%; display: block; }
.landing-infographic {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.landing-footer { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.lang-toggle {
  position: absolute; top: 16px; right: 16px; display: flex; gap: 2px;
  background: var(--surface); border-radius: 999px; padding: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.lang-opt {
  border: none; background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.lang-opt.active { background: var(--primary); color: #fff; }
.landing-org {
  margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 18px; border-top: 1px solid rgba(0,0,0,.08); width: 100%;
}
.landing-logo { height: 52px; width: auto; opacity: .92; }
.landing-org-caption { margin: 0; font-size: 12px; color: var(--muted); }

/* --- course content -------------------------------------------------------
   Was a logged-in hub between sign-in and the chat; since 2026-08-11 the same
   pieces render on the public landing (intro videos + curriculum) and inside
   the chat's first-run welcome card. The blocks below are shared by both. */
.course-video {
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 8px 28px rgba(0,0,0,.12); margin: 0 0 16px;
}
.course-video.portrait { max-width: 360px; margin-left: auto; margin-right: auto; }
.course-video video { display: block; width: 100%; height: auto; background: #000; }
.course-video-label {
  margin: 0; padding: 10px 14px; font-size: 13px; color: var(--muted);
  background: var(--surface);
}
.course-modules-h { font-size: 16px; font-weight: 650; color: var(--text); margin: 28px 0 12px; }
.course-modules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.course-module {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid rgba(0,0,0,.07); border-radius: 12px;
  padding: 12px 14px;
}
.cm-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); color: var(--primary); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cm-title { flex: 1; font-size: 14px; color: var(--text); line-height: 1.35; }
.cm-soon { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-style: italic; }

/* Course content ON the public landing. The landing column is sized for a
   sign-in screen (380px); a course front page carries videos and ten module
   titles, so it widens — while the copy above it stays a comfortable measure. */
.landing-inner.wide { max-width: 640px; }
.landing-inner.wide .landing-copy,
.landing-inner.wide .landing-bullets { max-width: 460px; }
.landing-videos, .landing-course { width: 100%; text-align: left; }
.landing-videos .course-video:last-child { margin-bottom: 0; }
.landing-course .course-modules-h { margin-top: 8px; }
/* The repeat CTA under the curriculum: matched to the primary button above it,
   not competing with it. */
.landing-cta2 { width: 100%; max-width: 320px; }

/* The welcome video inside a chat card. The label keeps its own light background
   — it sits inside the clip's black frame, so a transparent one would put muted
   grey text on black.
   Height, not width, is the constraint that matters here: a portrait clip capped
   only at 360px wide still runs ~640px tall and swallows the whole chat. Cap the
   height against the viewport and let the width follow the aspect ratio, with
   the frame shrinking to the video so there are no black bars beside it. */
.course-welcome .course-video {
  margin-bottom: 0; box-shadow: none;
  width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;
}
.course-welcome .course-video video { max-height: 48vh; width: auto; max-width: 100%; }

/* --- access flow (register / pending / approved) + admin panel ----------- */
.screen.access { align-items: center; }
.access-card {
  width: 100%; max-width: 440px; background: var(--surface);
  border-radius: 14px; padding: 24px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.access-card h2 { margin: 0 0 12px; font-size: 20px; color: var(--text); }
.access-intro { color: var(--text); line-height: 1.55; margin: 0 0 18px; font-size: 14px; }
.access-card form { display: flex; flex-direction: column; gap: 14px; }
.access-card label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.access-card input, .access-card textarea {
  padding: 10px 12px; border: 1px solid #d9d2c7; border-radius: 9px;
  font: inherit; color: var(--text); background: var(--bg); resize: vertical;
}
.access-card input:focus, .access-card textarea:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
}
.access-card .btn-primary { margin-top: 4px; }

/* structured access form (channels.web.access_form — faculty portals) */
.access-card select {
  padding: 10px 12px; border: 1px solid #d9d2c7; border-radius: 9px;
  font: inherit; color: var(--text); background: var(--bg);
}
.access-card select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.af-note { font-size: 12px; color: var(--muted); font-style: italic; }
.af-other.af-hidden { display: none; }
.af-group { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.af-group-label { margin-bottom: 2px; }
.af-radio, .af-check {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.af-radio input, .af-check input { margin-top: 3px; flex: none; width: auto; }

/* structured answers in the admin requests queue */
.admin-answers {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg); border-radius: 9px; padding: 10px 12px; font-size: 13px;
}
.admin-answer { display: flex; gap: 8px; line-height: 1.4; }
.admin-answer span:first-child { color: var(--muted); flex: 0 0 44%; }

/* trial expiry badge on member rows */
.member-expiry {
  font-size: 12px; color: var(--muted); background: var(--bg);
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.member-expired { color: #b3402a; font-weight: 600; }

/* Subscription state (ADR-0016) — same chip shape as expiry/role badges. */
.member-sub {
  font-size: 12px; border-radius: 6px; padding: 1px 6px; white-space: nowrap;
  background: var(--bg); color: var(--muted);
}
.member-sub.sub-active { background: #E2EAE5; color: var(--primary-dark); }
.member-sub.sub-trialing { background: #E6DFF3; color: #5B4B8A; }
.member-sub.sub-past_due { background: #F6E3DC; color: #b3402a; }
.member-sub.sub-lapsed { color: #b3402a; }
.member-sub.sub-comped { background: var(--accent); color: #fff; }

.admin-scroll { overflow-y: auto; padding: 16px; }
.admin-list { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.admin-item {
  background: var(--surface); border-radius: 12px; padding: 16px 16px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 8px;
}
.admin-who { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.admin-name { font-weight: 600; color: var(--text); }
.admin-persona { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.admin-meta { font-size: 13px; color: var(--muted); }
.admin-why { font-size: 13px; color: var(--text); line-height: 1.5; background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.admin-phone-l { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.admin-phone { padding: 8px 10px; border: 1px solid #d9d2c7; border-radius: 8px; font: inherit; color: var(--text); background: var(--bg); }
.admin-phone:focus { outline: none; border-color: var(--primary); }
.admin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; align-items: center; }
.admin-done { color: #2E7D32; font-size: 14px; text-align: center; padding: 6px 0; }

/* --- admin hub: tabs + persona switcher --- */
.admin-tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.admin-tab {
  border: none; background: transparent; color: var(--muted); font: inherit; font-size: 14px;
  padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.admin-persona-sel {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
  border: none; background: transparent; max-width: 60vw;
}
.center-p { text-align: center; padding: 24px 0; }

/* --- members --- */
/* Member rows: stacked cards on mobile; single-line grid + wider container on
   desktop (the admin hub is a management view, not the phone-width chat). */
.member-item {
  width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface);
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.member-item.removed { opacity: .55; }
.member-name { font-weight: 600; color: var(--text); }
.member-email { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.member-email-none { color: var(--muted); font-style: italic; }
.member-phone { font-size: 13px; color: var(--muted); }
.member-last { font-size: 13px; color: var(--muted); }
.member-msgs { font-size: 13px; color: var(--muted); }
.member-section {
  max-width: 560px; margin: 20px auto 8px; font-size: 14px; font-weight: 650; color: var(--text);
}
.member-count { color: var(--muted); font-weight: 400; }
.member-hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.member-tier { display: flex; align-items: center; gap: 4px; }
.member-controls { display: flex; align-items: center; gap: 8px; }
.member-msg { min-height: 0; }
.role-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; background: var(--bg); color: var(--muted);
}
.role-badge.role-admin { background: #E2EAE5; color: var(--primary-dark); }
.role-badge.role-superadmin { background: var(--accent); color: #fff; }
.role-badge.role-circle_host { background: #E6DFF3; color: #5B4B8A; }
.member-reset-ok { color: var(--text); }
.member-temp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--bg); border: 1px solid rgba(0,0,0,.12); border-radius: 6px;
  padding: 1px 6px; user-select: all;
}
.member-temp-copy { font-size: 12px; padding: 2px 8px; }
.member-fixed { font-size: 10px; color: var(--muted); font-style: italic; }
.member-role { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #d9d2c7;
  border-radius: 8px; background: var(--bg); color: var(--text); }

/* Add-member panel (Members tab). Sticky so it stays reachable above a long
   member list (admin-body is the scroll container) — without this it scrolls
   out of view for personas with many members. */
.add-member {
  position: sticky; top: -16px; z-index: 2;
  flex: none;  /* admin-body is a flex column with bounded height; without this
                  the closed <details> gets shrunk to ~0 when the member list
                  overflows (it has the least intrinsic content). */
  max-width: 560px; margin: 0 auto 18px; border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px; background: var(--card, #fff); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.add-member-summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-size: 14px; font-weight: 650; color: var(--primary-dark);
}
.add-member-summary::-webkit-details-marker { display: none; }
.add-member[open] .add-member-summary { border-bottom: 1px solid rgba(0,0,0,.08); }
.add-member-form { padding: 14px 16px 16px; }
.add-member-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; color: var(--muted); margin-bottom: 12px;
}
.add-member-form input {
  padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px;
  font-size: 15px; color: var(--text); background: var(--bg);
}
.add-member-form input:focus { outline: none; border-color: var(--primary); }
/* "optional" rides on the label line, lighter than the field name itself, so
   the eye reads the requirement without the label growing into a sentence. */
.am-optional { font-weight: 400; opacity: .75; }
/* The hint sits under the email field it explains, tucked up against it
   rather than floating between two fields. */
.am-email-hint { margin: -6px 0 14px; line-height: 1.45; }
.add-member-actions { display: flex; justify-content: flex-end; }
.add-member-result { margin-top: 8px; }
.am-ok {
  border: 1px solid #cfe3d6; background: #f0f7f2; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; color: var(--text);
}
.am-ok p { margin: 0 0 6px; }
.am-wa { font-size: 13px; }
.am-copy { margin-top: 6px; }
/* Circle host: seat counter + the backend-rendered share message block. */
.circle-seats {
  max-width: 560px; margin: 16px auto 4px; font-size: 14px; color: var(--text);
}
.circle-seats-n { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
.add-member-full { margin: 0 0 12px; color: var(--accent); }
.am-share {
  margin: 8px 0; padding: 10px 12px; background: var(--bg);
  border: 1px solid rgba(0,0,0,.10); border-radius: 9px;
}
.am-share-label { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.am-share-text { font-size: 13px; color: var(--text); white-space: pre-wrap; margin: 0; }
/* Forget me / delete account (#648): the danger list in the account modal. */
.danger-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; font-size: 14px; color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.danger-btn { color: #C0392B; }
.danger-btn:disabled { color: var(--muted); }

/* Roster upload (#646): parsed-CSV preview + per-row results. */
.roster-table-wrap { overflow-x: auto; margin: 4px 0 12px; }
.roster-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.roster-table th, .roster-table td {
  padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;
}
.roster-table th { font-size: 12px; color: var(--muted); font-weight: 650; }
tr.roster-bad td { color: #a33; background: #fbf1f1; }
.roster-results { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
.roster-results li { margin: 2px 0; }
.roster-results li.roster-bad { color: #a33; }

@media (min-width: 768px) {
  .add-member { max-width: 1080px; }
}

@media (min-width: 768px) {
  /* Widen the whole admin hub on a real screen. */
  .admin-list, .member-section { max-width: 1080px; }
  .member-item {
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(170px, 1.6fr) minmax(120px, 1fr) max-content max-content max-content;
    align-items: center; column-gap: 18px; row-gap: 2px;
    padding: 10px 18px;
  }
  .member-email, .member-phone, .member-last, .member-msgs { font-size: 14px; }
  .member-controls { justify-self: end; }
  /* status line drops to its own row under the cells, only when populated */
  .member-msg { grid-column: 1 / -1; }
  .member-msg:empty { display: none; }
}

/* --- usage dashboard --- */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 560px; margin: 0 auto 8px; }
.tile { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; text-align: center; }
.tile-val { font-size: 24px; font-weight: 700; color: var(--primary); }
.tile-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.usage-h { max-width: 560px; margin: 18px auto 6px; font-size: 14px; color: var(--text); }
.barchart { width: 100%; max-width: 560px; display: block; margin: 0 auto; height: 90px; }
.barchart .bar { fill: var(--primary); }
.channel-mix { max-width: 560px; margin: 0 auto; }
.splitbar { height: 14px; border-radius: 7px; overflow: hidden; background: var(--accent); }
.splitbar .seg-web { display: block; height: 100%; background: var(--primary); }
.channel-legend { font-size: 13px; color: var(--muted); margin-top: 8px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.dot-web { background: var(--primary); }
.dot-wa { background: var(--accent); }
.usage-note { max-width: 560px; margin: 16px auto 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* --- create-a-class wizard ------------------------------------------------- */
.cc-scroll { overflow-y: auto; padding: 16px; }
.cc-steps {
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px;
  margin: 0 auto 18px; justify-content: center;
}
.cc-dot {
  font-size: 11px; padding: 4px 9px; border-radius: 999px;
  background: rgba(0,0,0,.05); color: var(--muted); white-space: nowrap;
}
.cc-dot.active { background: var(--primary); color: #fff; }
.cc-dot.done { background: rgba(0,0,0,.10); color: var(--text); }
.cc-body { max-width: 560px; margin: 0 auto; }
.cc-body label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.cc-body input[type="text"], .cc-body input[type="email"], .cc-body input[type="tel"],
.cc-body textarea {
  padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px;
  font-size: 15px; color: var(--text); background: var(--bg);
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.cc-body input:focus, .cc-body textarea:focus { outline: none; border-color: var(--primary); }
.cc-hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.cc-host { font-size: 13px; min-height: 18px; margin: -8px 0 12px; }
.cc-host.ok { color: #2E7D32; }
.cc-host.err { color: #C0392B; }
.cc-color-row { display: flex; align-items: center; gap: 10px; }
.cc-color-row input[type="color"] {
  width: 44px; height: 32px; padding: 0; border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px; background: none; cursor: pointer;
}
.cc-color-hex { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.cc-filebtn { cursor: pointer; }
.cc-filebtn .btn-ghost { display: inline-block; }
.cc-files { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; }
.cc-files li { padding: 4px 0; color: var(--text); }
.cc-rev {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px;
}
.cc-rev span { color: var(--muted); }
.cc-rev strong { color: var(--text); text-align: right; word-break: break-word; }
.cc-progress { margin-top: 16px; font-size: 13px; color: var(--text); }
.cc-progress div { padding: 3px 0; }
.cc-progress .cc-open, .cc-progress .cc-done { margin-top: 12px; margin-right: 8px; }
.cc-nav {
  display: flex; justify-content: space-between; gap: 12px;
  max-width: 560px; margin: 18px auto 0;
}

@media (min-width: 768px) {
  .cc-steps, .cc-body, .cc-nav { max-width: 680px; }
}

/* Documents (corpus admin) tab */
.docs-head, .docs-upload { max-width: 560px; margin: 0 auto; }
.docs-summary { font-size: 13px; color: var(--text); margin: 8px 0; }
.docs-state { margin-left: 6px; font-size: 12px; color: var(--muted); }
.docs-state.docs-failed { color: #b00; }
.docs-state.docs-running, .docs-state.docs-queued { color: var(--primary); }
.docs-list { list-style: none; margin: 8px auto 16px; padding: 0; max-width: 560px; }
.docs-item {
  padding: 6px 10px; border: 1px solid rgba(0,0,0,.08); border-radius: 6px;
  margin-bottom: 4px; font-size: 13px; word-break: break-all;
}
.docs-upload { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 12px; }
.docs-input { display: none; }
.docs-pick { display: inline-block; cursor: pointer; }
.docs-chosen { font-size: 12px; word-break: break-all; }
.docs-hint { font-size: 12px; margin: 2px 0; }
#docs-progress { white-space: pre-line; align-self: stretch; }
.cc-prompt-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.cc-reset { font-size: 12px; padding: 4px 8px; flex: none; }

/* Prompt editor (admin hub) */
.prompt-editor { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.prompt-editor .prompt-text { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.4; padding: 10px; }
.prompt-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.prompt-section-l { margin: 10px 0 2px; }
.prompt-actions { margin-top: 4px; }
.prompt-history { margin-top: 8px; }
.prompt-vers { list-style: none; padding: 0; margin: 6px 0 0; }
.prompt-ver { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.prompt-ver-meta { font-size: 12px; color: var(--muted); }

/* ---- booking ------------------------------------------------------------ */
.booking-card { max-width: 440px; position: relative; }
.bk-close {
  position: absolute; top: 12px; right: 14px; border: none; background: none;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.bk-person { margin-bottom: 18px; }
.bk-person h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.bk-muted { color: var(--muted); font-weight: 400; font-size: 13px; }
.bk-service {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px; background: var(--bg); cursor: pointer;
}
.bk-service:hover:not(:disabled) { border-color: var(--primary); }
.bk-service:disabled { opacity: .5; cursor: default; }
.bk-svc-title { font-size: 15px; color: var(--text); font-weight: 600; }
.bk-svc-meta { font-size: 13px; color: var(--muted); }
.bk-svc-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.bk-crumb { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.bk-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-slot {
  padding: 8px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px;
  background: var(--bg); font-size: 14px; color: var(--text); cursor: pointer;
}
.bk-slot:hover { border-color: var(--primary); background: var(--user-bubble); }
.bk-tz { font-size: 12px; color: var(--muted); margin-top: 10px; }
.bk-when { font-size: 15px; color: var(--text); font-weight: 600; margin: 4px 0 12px; }
.bk-pay-note { font-size: 13px; color: var(--text); background: var(--user-bubble);
  padding: 8px 10px; border-radius: 8px; }
.bk-done { text-align: center; padding: 8px 0 4px; }
.bk-done-head { font-size: 17px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.bk-mine-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08);
}
.bk-mine-link { margin-top: 14px; text-align: center; }

/* ---- bookable console --------------------------------------------------- */
/* Paired fields. A flex row could not shrink number inputs below their
   intrinsic width (~20 characters), so the third field in a row hung off the
   edge of the modal on a narrow window — the whole "Slot step" control was
   unreachable. Grid columns with a 0 floor can shrink, and auto-fit drops to
   one per row when even that will not fit. */
.cn-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; align-items: end;
}
.cn-row label { min-width: 0; }
.cn-row input, .cn-row select { width: 100%; min-width: 0; }
.cn-check { flex-direction: row !important; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.cn-check input { width: auto; }
#cn-hours { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
#cn-preview-out { margin-top: 12px; }

/* --- Talks catalog tab --------------------------------------------------- */
.cat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cat-tools { display: flex; align-items: center; gap: 6px; }
.cat-search { padding: 6px 10px; border: 1px solid rgba(0,0,0,.14); border-radius: 8px; font-size: 13px; min-width: 180px; }
.cat-wrap { overflow-x: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-table th, .cat-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,.05); vertical-align: top; }
.cat-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-weight: 600; white-space: nowrap; z-index: 1; }
.cat-th[data-sort] { cursor: pointer; user-select: none; }
.cat-th[data-sort]:hover { color: var(--primary); }
.cat-table tbody tr:hover { background: rgba(0,0,0,.02); }
.cat-title { max-width: 380px; color: var(--text); }
.cat-c { white-space: nowrap; text-align: center; }
.cat-c a { text-decoration: none; color: var(--primary); font-size: 15px; }
.cat-foot { margin-top: 8px; font-size: 12px; }

/* --- Events (public schedule) -------------------------------------------- */
.landing-events { margin: 18px 0 6px; text-align: left; }
.ev-h { font-size: 15px; color: var(--primary); margin: 0 0 10px; }
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-card { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px 14px; }
.ev-title { font-weight: 600; color: var(--text); font-size: 14px; }
.ev-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ev-link { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--primary); text-decoration: none; }
.ev-link:hover { text-decoration: underline; }
.ev-synced { margin-top: 10px; font-size: 12px; text-align: center; }

/* --- Bookable console: upcoming sessions --------------------------------- */
#cn-sessions { margin: 10px 0 16px; }
.cn-sess-h { font-size: 14px; color: var(--primary); margin: 0 0 8px; }
.cn-sess-list { display: flex; flex-direction: column; gap: 8px; }
.cn-sess { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 10px 12px; }
.cn-sess-prov { opacity: .65; border-style: dashed; }
.cn-sess-when { font-weight: 600; font-size: 13.5px; color: var(--text); }
.cn-sess-who { font-size: 13px; color: var(--text); margin-top: 2px; }
.cn-sess-svc { color: var(--muted); }
.cn-sess-badge { margin-left: 6px; font-size: 11px; background: rgba(0,0,0,.07); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.cn-sess-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-style: italic; }
.cn-sess-none, .cn-sess-tz { font-size: 12px; }

/* --- Mailing-list signup + subscribers ------------------------------------ */
.ml-box { margin-top: 14px; text-align: left; }
.ml-lead { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.ml-form { display: flex; gap: 8px; }
.ml-form input[type="email"] { flex: 1; padding: 8px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 8px; font-size: 14px; }
.ml-msg { font-size: 13px; color: var(--primary); margin: 6px 0 0; }
.ml-unsub { opacity: .5; }

/* --- first-run getting-started card (app.js _addGettingStarted) -------------
   Sits in the message stream as a card rather than a bubble: it is the platform
   speaking, not the companion, and it must not read as something the persona
   said. Collapses to a single summary line once seen, so it stays reachable
   without ever being in the way again. */
.gs-card {
  align-self: stretch;
  max-width: 100%;
  margin: 6px 0 2px;
  background: var(--surface);
  border: 1px solid var(--user-bubble);
  border-radius: 14px;
  overflow: hidden;
  /* .messages is a column flex container, so its children shrink by default.
     A card taller than the remaining space was being squeezed, and `overflow:
     hidden` turned that into silently truncated text — the closing footers just
     stopped mid-sentence. Never shrink; let the thread scroll instead. */
  flex-shrink: 0;
}
.gs-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gs-summary::-webkit-details-marker { display: none; }
.gs-summary::before {
  content: "›";
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease;
}
.gs-card[open] .gs-summary::before { transform: rotate(90deg); }
.gs-body { padding: 0 16px 14px; }
.gs-intro { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.gs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gs-step { display: flex; gap: 12px; align-items: flex-start; }
.gs-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.gs-step-title { margin: 0 0 2px; font-weight: 600; color: var(--text); font-size: 14px; }
.gs-step-body  { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.gs-footer { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gs-footer + .gs-footer { margin-top: 8px; }

/* Worked example inside the getting-started card. Labelled quotes, not bubbles:
   a bubble here would read as something the companion had just said, and the
   first screen is the worst place to make someone work out which messages are
   real. */
.gs-ex {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--primary);
  background: var(--bg);
  border-radius: 0 8px 8px 0;
}
.gs-ex-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
}
.gs-ex-turn { margin: 0 0 7px; font-size: 14px; line-height: 1.5; color: var(--text); }
.gs-ex-turn:last-of-type { margin-bottom: 0; }
.gs-ex-turn.it { color: var(--muted); }
.gs-ex-who {
  display: inline-block;
  min-width: 74px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  text-transform: none;
}
.gs-ex-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); font-style: italic; }

/* --- toolkits ------------------------------------------------------------
   Dr Vos's three surfaces, in his vocabulary: the toolkits, and the meaning
   dashboard. Deliberately a full page rather than a modal — the self-reflection
   battery is twenty-one items, and a modal that scrolls inside a scrolling page
   is the worst place to answer them. */
.tk-owner { font-size: 13px; color: var(--muted); }
.tk-tabs {
  display: flex; gap: 4px; padding: 8px 16px 0;
  background: var(--surface); border-bottom: 1px solid rgba(0,0,0,.08);
}
.tk-tab {
  border: 0; background: none; padding: 8px 12px 10px; cursor: pointer;
  font-size: 14px; color: var(--muted); font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tk-tab.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tk-screen { padding: 18px 16px 40px; gap: 0; max-width: 720px; width: 100%; margin: 0 auto; }

.tk-sec { margin-bottom: 26px; }
.tk-sec h3 { font-size: 15px; color: var(--primary); margin: 0 0 4px; }
.tk-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.tk-start { background: var(--user-bubble); border-radius: 14px; padding: 16px; }
.tk-grid { display: flex; flex-direction: column; gap: 8px; }

.tk-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid rgba(0,0,0,.10); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; font-family: inherit;
}
.tk-card:hover { border-color: var(--primary); }
.tk-card.rec { border-left: 3px solid var(--accent); }
.tk-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tk-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.tk-card-intent { font-size: 13px; color: var(--text); opacity: .82; }
.tk-card-meta { font-size: 12px; color: var(--muted); }
.tk-state { font-size: 11px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.tk-state-completed { background: #E2EFE4; color: #2E7D32; }
.tk-state-in_progress { background: #F1E7D8; color: #8A6A34; }

.tk-why { margin-bottom: 10px; }
.tk-why-reason { font-size: 14px; color: var(--text); margin: 0 0 4px; }
.tk-grounds summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.tk-grounds p { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.tk-gap {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  border-top: 1px solid rgba(0,0,0,.08); padding-top: 12px; margin-top: 4px;
}

/* --- one toolkit, as a form --- */
.tk-crumb { align-self: flex-start; padding-left: 0; margin-bottom: 6px; }
.tk-title { font-size: 19px; color: var(--text); margin: 0 0 4px; }
.tk-meta { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.tk-intent { font-size: 14px; color: var(--text); margin: 0 0 14px; line-height: 1.55; }
.tk-note {
  font-size: 13px; color: var(--text); background: var(--user-bubble);
  border-radius: 10px; padding: 10px 12px; margin: 0 0 18px; line-height: 1.5;
}
.tk-part { margin-bottom: 24px; }
.tk-part h3 { font-size: 15px; color: var(--primary); margin: 0 0 10px; }
/* Authored line breaks are structure, not stray whitespace: step bodies carry
   multi-paragraph instructions, and s1b of the Serenity Prayer exercise IS
   Niebuhr's prayer set as verse. Collapsing those into one run-on line
   would flatten the author's work, which is the whole thing the protocol
   format exists to preserve. */
.tk-instruction { font-size: 14px; color: var(--text); line-height: 1.6;
  margin: 0 0 14px; white-space: pre-wrap; }
.tk-legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted);
  margin-bottom: 14px;
}
.tk-item { margin-bottom: 18px; }
.tk-q { font-size: 14px; color: var(--text); margin: 0 0 8px; line-height: 1.5;
  white-space: pre-wrap; }
.tk-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-radio { cursor: pointer; }
.tk-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tk-radio span {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14); background: var(--surface);
  font-size: 14px; color: var(--muted);
}
.tk-radio input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.tk-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.tk-choices { display: flex; flex-direction: column; gap: 6px; }
.tk-choice { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.tk-text {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px;
  font-family: inherit; font-size: 15px; color: var(--text); background: var(--bg); resize: vertical;
}
.tk-text:focus { outline: none; border-color: var(--primary); }
.tk-actions { position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); }
.tk-actions .btn-primary { width: 100%; }
.tk-err { color: #C0392B; font-size: 14px; }

/* --- scores + dashboard --- */
.tk-scores { width: 100%; border-collapse: collapse; font-size: 14px; }
.tk-scores td { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: baseline; }
.tk-num { font-weight: 600; text-align: right; width: 60px; padding-right: 10px !important; }
.tk-muted { color: var(--muted); font-size: 12px; font-weight: 400; }
.tk-tiles { display: flex; gap: 10px; margin-bottom: 20px; }
.tk-tile {
  flex: 1; background: var(--surface); border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; padding: 14px 10px; text-align: center;
}
.tk-tile-n { display: block; font-size: 20px; font-weight: 650; color: var(--primary); }
.tk-tile-l { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tk-prog {
  background: var(--surface); border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
}
.tk-prog summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  cursor: pointer; list-style: none;
}
.tk-prog summary::-webkit-details-marker { display: none; }
.tk-prog-body { padding-top: 10px; }
.tk-ans { margin-bottom: 12px; }
.tk-a { font-size: 14px; color: var(--text); margin: 0; padding-left: 10px;
  border-left: 2px solid var(--user-bubble); white-space: pre-wrap; }

/* The author's own words back, on the result screen. Set apart from the
   platform's own text: this is Dr Vos talking to the person, not the app. */
.tk-said { background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 14px 16px; }
.tk-said-line { font-size: 15px; color: var(--text); line-height: 1.6;
  margin: 0 0 8px; white-space: pre-wrap; }
.tk-said-line:last-child { margin-bottom: 0; }