/* Talk Coach — built on Baseline's layout and visual language (side rail on
   desktop, drawer on phones, schedule bars and milestone diamonds), with its
   own blue accent so the two apps are easy to tell apart. */
:root {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eaeef6; --ink: #141a2b; --muted: #5a6378; --line: #d8deea;
  --accent: #2d55c4; --accent-ink: #ffffff; --accent-soft: #e0e8fb;
  --milestone: #d98a1c; --critical: #c3432c; --ok: #237a4f; --me: #e6eefc;
  --shadow: 0 1px 2px rgba(20,26,43,.06), 0 4px 16px rgba(20,26,43,.06);
  --font: "Coach Sans", "IBM Plex Sans", "Coach Arabic", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-ar: "Coach Arabic", "IBM Plex Sans Arabic", "Coach Sans", "IBM Plex Sans", system-ui, Tahoma, sans-serif;
  --mono: "Coach Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e121c; --surface: #161c2a; --surface-2: #1f2637; --ink: #e6eaf3; --muted: #9aa3b8; --line: #2b3348;
  --accent: #7f9ef5; --accent-ink: #0b1430; --accent-soft: #1e2a52; --me: #1c2747;
  --milestone: #f0ae4a; --critical: #ef7b62; --ok: #5cc98d;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0e121c; --surface: #161c2a; --surface-2: #1f2637; --ink: #e6eaf3; --muted: #9aa3b8; --line: #2b3348;
  --accent: #7f9ef5; --accent-ink: #0b1430; --accent-soft: #1e2a52; --me: #1c2747;
  --milestone: #f0ae4a; --critical: #ef7b62; --ok: #5cc98d;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
[lang="ar"] { font-family: var(--font-ar); }
[lang="en"] { font-family: var(--font); }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 700; } h2 { font-size: 1.2rem; font-weight: 650; } h3 { font-size: 1rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
h3 svg { width: 18px; height: 18px; color: var(--accent); }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { align-items: center; text-align: center; }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100%; }
.main-col { min-width: 0; }
.rail { background: var(--surface); border-inline-end: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: var(--ink); text-decoration: none; }
.brand svg { width: 36px; height: 36px; flex: none; }
.brand b { font-size: 1.1rem; }
.brand small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.3; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav a[aria-current="page"] svg { opacity: 1; }
.nav .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.nav-badge { margin-inline-start: auto; min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--milestone); color: #fff; font: 600 .72rem/20px var(--mono); text-align: center; }
.live-chip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-weight: 600; font-size: .85rem; }
.live-chip small { display: block; font-weight: 500; color: var(--muted); }
.ver-chip { margin-top: auto; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: .8rem; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--critical); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical) 50%, transparent); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.topbar { display: none; }
.scrim { display: none; }
main { min-width: 0; padding-block: 28px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.page-head p { color: var(--muted); max-width: 62ch; margin-top: 4px; }
.page-head .en-sub { margin-top: 2px; }
.back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; font-size: .9rem; width: fit-content; }
.back svg { width: 18px; height: 18px; }
[dir="rtl"] .back svg { transform: scaleX(-1); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; inset-block: 0; inset-inline-start: 0; width: 280px; z-index: 30; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--shadow); padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  [dir="rtl"] .rail { transform: translateX(105%); }
  .shell.open .rail { transform: none; }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .shell.open .scrim { display: block; }
  .topbar { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .topbar .brand b { font-size: 1rem; } .topbar .brand svg { width: 28px; height: 28px; } .topbar .brand small { display: none; }
  main { padding-top: 18px; }
  h1 { font-size: 1.35rem; }
}

/* ---------- Building blocks ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 860px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .g2 { grid-template-columns: 1fr; } }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between, .between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 550; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.big { min-height: 48px; padding: 10px 22px; font-size: 1.02rem; }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: .85rem; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--critical); }
.btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.icon-only { padding: 8px; width: 42px; min-height: 42px; }
.icon-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent); cursor: pointer; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn.on, .icon-btn[disabled] { color: var(--ok); border-color: transparent; background: transparent; cursor: default; }
.icon-btn.danger { color: var(--muted); } .icon-btn.danger:hover { color: var(--critical); border-color: var(--critical); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
select, input[type="text"], input:not([type]), textarea { width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: fit-content; max-width: 100%; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 7px 14px; cursor: pointer; min-height: 38px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg button[aria-pressed="true"] .muted { color: inherit; opacity: .8; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.acc { background: var(--accent-soft); color: var(--accent); }
.pill.ok, .pill.st-mastered { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.pill.warn { background: color-mix(in srgb, var(--milestone) 16%, var(--surface)); color: var(--milestone); }
.pill.st-learning { color: var(--accent); }
.diamond { width: 10px; height: 10px; background: var(--milestone); transform: rotate(45deg); display: inline-block; flex: none; }
.banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.banner.warn { background: color-mix(in srgb, var(--milestone) 14%, var(--surface)); border-color: color-mix(in srgb, var(--milestone) 40%, transparent); }
.note { font-size: .84rem; color: var(--muted); padding: 10px 12px; border-radius: 8px; background: var(--surface-2); display: flex; gap: 8px; align-items: center; }
.note.warn { color: var(--ink); background: color-mix(in srgb, var(--milestone) 14%, var(--surface)); }
.note svg { width: 18px; height: 18px; flex: none; }
.toast { position: fixed; inset-inline: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 90; font-weight: 550; box-shadow: var(--shadow); }
.feedback { border-inline-start: 4px solid var(--ok); padding: 12px 14px; background: var(--surface-2); border-radius: 0 8px 8px 0; }
[dir="rtl"] .feedback { border-radius: 8px 0 0 8px; }
.feedback.bad { border-color: var(--critical); }
.bul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: spin .8s linear infinite; flex: none; }
.spin.lg { width: 32px; height: 32px; border-width: 3px; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.en-sub { color: var(--muted); font-size: .8rem; font-weight: 500; display: block; }

/* ---------- Welcome ---------- */
.welcome { min-height: 100%; display: grid; place-items: center; padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.welcome .card { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 20px; padding: 26px; }
.welcome .row { flex-wrap: nowrap; align-items: flex-start; }
.logo-xl { width: 60px; height: 60px; flex: none; }
.lvls { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 560px) { .lvls { grid-template-columns: 1fr; } }
.lvl { text-align: start; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.lvl span { font-size: .82rem; color: var(--muted); }
.lvl.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.lvl.on b { color: var(--accent); }

/* ---------- Home ---------- */
.stat b { display: block; font: 600 1.8rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.stat b small { font-size: .9rem; color: var(--muted); }
.stat span { color: var(--muted); font-size: .82rem; }
.plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.plan li:last-child { border-bottom: 0; padding-bottom: 0; }
.plan li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plan .tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.plan .tick svg { width: 16px; height: 16px; }
.plan li.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.plan li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.plan .muted { display: flex; align-items: center; gap: 10px; }
.goalbar { flex: 1; max-width: 260px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: block; }
.goalbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.resume { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border-color: var(--accent); }
.resume > div { display: flex; flex-direction: column; }
.resume .go { margin-inline-start: auto; color: var(--accent); font-weight: 600; }
.gantt { display: flex; flex-direction: column; gap: 14px; }
.g-row { display: grid; grid-template-columns: 110px minmax(0,1fr) 64px; gap: 12px; align-items: center; }
.g-track { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; }
.g-track i { position: absolute; inset-block: 3px; inset-inline-start: 3px; border-radius: 3px; background: var(--accent); }
.g-track .diamond { position: absolute; top: 4px; }
.g-row .num { text-align: end; }
.num small.up { color: var(--ok); margin-inline-start: 4px; } .num small.down { color: var(--critical); margin-inline-start: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i.bar { width: 16px; height: 8px; border-radius: 2px; background: var(--accent); display: inline-block; }
.list { display: flex; flex-direction: column; }
.srow { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.srow:last-child { border-bottom: 0; }
.srow > div { display: flex; flex-direction: column; min-width: 0; }
.srow:hover b { color: var(--accent); }
.panel.list { padding-block: 6px; }
.sic { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.sic svg { width: 22px; height: 22px; }
.sic.lg { width: 52px; height: 52px; } .sic.lg svg { width: 28px; height: 28px; }

/* ---------- Talk ---------- */
.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 640px) { .sc-grid { grid-template-columns: 1fr; } }
.sc-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sc-card:hover { border-color: var(--accent); }
.sc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.goal { border-inline-start: 4px solid var(--milestone); }
.phr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.phr-list.panel { padding-block: 4px; }
.phr { display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.phr:last-child { border-bottom: 0; }
.phr > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.phr b[dir="ltr"] { text-align: start; }
[dir="rtl"] .phr b[dir="ltr"] { text-align: right; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.add-form { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 640px) { .add-form { grid-template-columns: 1fr; } }

/* ---------- Conversation ---------- */
.chat { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 92px); }
.chat-shell main { padding-bottom: 0; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-head .row { flex-wrap: nowrap; min-width: 0; }
.chat-head .row > div { display: flex; flex-direction: column; min-width: 0; }
.goal-mini { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--milestone); border-radius: var(--r); padding: 8px 14px; }
.goal-mini summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: .88rem; font-weight: 550; list-style: none; }
.goal-mini summary::-webkit-details-marker { display: none; }
.goal-mini summary svg { width: 16px; height: 16px; color: var(--milestone); flex: none; }
.goal-mini summary span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goal-mini[open] summary span { display: block; }
.goal-mini .phr-list { margin-top: 6px; }
.msgs { display: flex; flex-direction: column; gap: 14px; flex: 1; padding-bottom: 8px; }
.msg { display: flex; flex-direction: column; gap: 6px; max-width: min(640px, 92%); }
.msg.coach { align-self: flex-start; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 1.04rem; line-height: 1.55; }
.msg.coach .bubble { border-start-start-radius: 4px; }
.msg.me .bubble { background: var(--me); border-color: transparent; border-start-end-radius: 4px; }
.bubble p[dir="ltr"] { text-align: left; }
.msg.speaking .bubble { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bubble .tr { font-size: .95rem; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink); }
.bubble .ex { font-size: .9rem; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
.chip svg { width: 15px; height: 15px; }
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.chip[disabled] { cursor: default; }
.clarity { align-self: flex-start; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--surface); }
.clarity.hi { color: var(--ok); } .clarity.mid { color: var(--milestone); } .clarity.lo { color: var(--critical); }
.corr { width: 100%; max-width: 560px; background: color-mix(in srgb, var(--ok) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; text-align: start; }
.corr-h { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 650; color: var(--ok); }
.corr-h svg { width: 14px; height: 14px; }
.corr .better, p.better { font-weight: 600; text-align: left; }
.typing .bubble { flex-direction: row; align-items: center; gap: 10px; }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.err-box, .end-box, .hint-box { padding: 14px; border-radius: var(--r); display: flex; flex-direction: column; gap: 10px; }
.err-box { background: color-mix(in srgb, var(--critical) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent); }
.end-box { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); align-items: flex-start; }
.hint-box { background: var(--surface); border: 1px dashed var(--accent); }
.hint-box .corr-h { color: var(--accent); }
.hint { display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.hint:hover { border-color: var(--accent); }
.hint b[dir="ltr"] { text-align: left; }
.composer { position: sticky; bottom: 0; z-index: 10; background: var(--bg); padding-block: 10px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); margin-inline: -4px; padding-inline: 4px; }
.comp-row { display: flex; gap: 8px; align-items: flex-end; }
.comp-row textarea { flex: 1; resize: none; min-height: 48px; max-height: 140px; padding: 12px 14px; border-radius: 24px; font: 1rem/1.4 var(--font); }
.comp-row .btn.icon-only { width: 48px; min-height: 48px; border-radius: 50%; flex: none; }
.mic { width: 60px; height: 60px; margin-top: -6px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.mic svg { width: 28px; height: 28px; }
.mic.on { background: var(--critical); color: #fff; animation: micpulse 1.4s infinite; }
.mic[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical) 55%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
#mic-state { color: var(--critical); font-weight: 600; }
@media (max-width: 520px) { .msg { max-width: 96%; } .bubble { font-size: 1rem; padding: 10px 14px; } .comp-row .btn.icon-only { width: 42px; min-height: 42px; } }

/* ---------- Summary ---------- */
.hero-sum { border-inline-start: 4px solid var(--accent); }
.hero-sum .lead { font-size: 1.08rem; line-height: 1.75; }
.hero-sum .good { display: flex; gap: 8px; align-items: flex-start; color: var(--ok); font-weight: 550; }
.hero-sum .good svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.dots5 { display: inline-flex; gap: 5px; direction: ltr; }
.dots5 i { width: 12px; height: 12px; transform: rotate(45deg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; }
.dots5 i.on { background: var(--milestone); border-color: var(--milestone); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.facts div { padding: 10px; border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; }
.facts b { font: 600 1.3rem var(--mono); }
.mist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mist li { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mist li:last-child { border-bottom: 0; padding-bottom: 0; }
.wr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wr s { color: var(--critical); text-decoration-thickness: 1px; }
.wr b { color: var(--ok); }
.wr .arrow { color: var(--muted); }
.transcript summary { cursor: pointer; font-weight: 650; }
.transcript .stack { margin-top: 12px; }
.tline { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 4px 10px; align-items: start; }
.tline .pill { justify-content: center; }
.tline.me .pill { background: var(--accent-soft); color: var(--accent); }
.tline p { text-align: left; }
.tline .better { grid-column: 2; color: var(--ok); display: flex; gap: 6px; align-items: center; }
.tline .better svg { width: 14px; height: 14px; flex: none; }

/* ---------- Cards (from Baseline) ---------- */
.fc-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fc { width: 100%; max-width: 560px; aspect-ratio: 8 / 5; max-height: 340px; perspective: 1200px; cursor: pointer; }
@media (max-width: 520px) { .fc { aspect-ratio: auto; height: 290px; } }
.fc-inner { position: relative; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.fc.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; padding: 26px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: auto; }
.fc-face::before { content: ""; position: absolute; inset-inline: 22px; top: 0; height: 4px; background: var(--accent); border-radius: 0 0 4px 4px; }
.fc-back { transform: rotateY(180deg); background: var(--surface-2); }
.fc-face .q { font-size: 1.35rem; font-weight: 600; text-align: center; }
.fc-face .q.sm { font-size: 1rem; color: var(--muted); }
.fc-face .a { font-size: 1.2rem; font-weight: 550; }
.fc-meta { position: absolute; top: 14px; inset-inline: 22px; display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); }
.ex-line { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--muted); }
.say-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.said { font-weight: 600; font-size: .9rem; } .said.hi { color: var(--ok); } .said.mid { color: var(--milestone); } .said.lo { color: var(--critical); }
.rate { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; width: 100%; max-width: 560px; }
.rate button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; }
.rate small { font: 500 .72rem var(--mono); color: var(--muted); }
.rate .r-again { color: var(--critical); } .rate .r-easy { color: var(--ok); }

/* ---------- Key / settings ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding-bottom: 16px; position: relative; }
.steps li::before { content: ""; position: absolute; inset-inline-start: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.steps li:last-child::before { display: none; }
.steps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 600 .85rem var(--mono); position: relative; z-index: 1; }
.key-grid { align-items: start; }
.copyline { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); flex-wrap: wrap; }
.copyline code { font: 600 .9rem var(--mono); direction: ltr; unicode-bidi: isolate; word-break: break-all; }
.switch { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; cursor: pointer; padding: 4px 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 44px; height: 26px; border-radius: 99px; background: var(--line); position: relative; transition: background .15s; }
.switch .track i { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track i { inset-inline-start: 21px; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch > span:last-child { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .fc-inner, .rail, .mic.on, .pulse, .dots i, .spin { transition: none; animation: none; } }

/* ---------- v1.1: shadowing, focus points ---------- */
.sh-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 640px; width: 100%; margin: 0 auto; }
.sh-top { width: 100%; }
.sh-card { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 20px; border-top: 4px solid var(--accent); }
.sh-text { font-size: 1.35rem; font-weight: 600; line-height: 1.6; text-align: center; }
.sh-text .ok { color: var(--ok); } .sh-text .miss { color: var(--critical); text-decoration: underline wavy color-mix(in srgb, var(--critical) 60%, transparent); text-underline-offset: 5px; }
.sh-hidden { color: var(--muted); font-style: italic; padding: 10px 0; }
.center-chips { justify-content: center; }
.big-mic { width: 76px; height: 76px; margin: 0; }
.big-mic svg { width: 34px; height: 34px; }
.big-score { font: 700 2rem/1 var(--mono); }
.big-score.hi { color: var(--ok); } .big-score.mid { color: var(--milestone); } .big-score.lo { color: var(--critical); }
.panel.center .big-score { font-size: 3rem; }
.sh-res { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.center-row { justify-content: center; }
.switch.mini { grid-template-columns: 38px auto; gap: 8px; }
.switch.mini .track { width: 38px; height: 22px; } .switch.mini .track i { width: 16px; height: 16px; }
.switch.mini input:checked + .track i { inset-inline-start: 19px; }
.mist.focus .wr { gap: 6px 10px; }
.mist.focus .wr .btn { margin-inline-start: auto; }

/* =====================================================================
   v2.0 — call stage, mission, 30-day track, progress
   ===================================================================== */
:root { --stage: #0e1a33; --stage-2: #16254a; --stage-ink: #eef2fb; --stage-muted: #a9b5d3; --listen: #e5484d; --talk: #5b8cff; }

/* Character portrait: initials on the character's own hue */
.avatar { --h: 222; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 650 1rem/1 var(--font); letter-spacing: .02em;
  color: #fff; background: hsl(var(--h) 52% 46%); box-shadow: inset 0 0 0 2px hsl(var(--h) 60% 62% / .55); }
.avatar svg { width: 55%; height: 55%; }
.avatar.sm { width: 36px; height: 36px; font-size: .82rem; }
.avatar.md { width: 46px; height: 46px; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.35rem; }
.avatar.xl { width: 132px; height: 132px; font-size: 2.6rem; font-weight: 600; box-shadow: inset 0 0 0 3px hsl(var(--h) 70% 72% / .5), 0 18px 50px hsl(var(--h) 60% 20% / .55); position: relative; z-index: 2; }

/* ---------- Call screen ---------- */
body.in-call { overflow: hidden; }
.call { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0,1fr) auto; color: var(--stage-ink);
  background: radial-gradient(120% 70% at 50% 0%, hsl(var(--h) 45% 24%) 0%, var(--stage) 62%); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.call-bar { display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.cb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cb-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-title span { font-size: .8rem; color: var(--stage-muted); }
.cb-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; flex: none; }
.cb-btn svg { width: 20px; height: 20px; }
.end-call { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 99px; border: 0; background: var(--listen); color: #fff; font-weight: 650; cursor: pointer; }
.end-call svg { width: 18px; height: 18px; transform: rotate(135deg); }
.call-main { display: grid; grid-template-columns: minmax(0,1fr) 380px; min-height: 0; }
.stage { overflow-y: auto; padding: 8px 16px 20px; }
.stage-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.persona { position: relative; width: 220px; height: 220px; display: grid; place-items: center; margin-top: 8px; }
.persona .ring { position: absolute; inset: 44px; border-radius: 50%; border: 2px solid transparent; opacity: 0; }
.persona.st-speaking .ring { border-color: var(--talk); animation: ring 1.8s ease-out infinite; }
.persona.st-speaking .r2 { animation-delay: .6s; } .persona.st-speaking .r3 { animation-delay: 1.2s; }
.persona.st-listening .ring { border-color: var(--listen); animation: ring 1.4s ease-out infinite; }
.persona.st-listening .r2 { animation-delay: .45s; } .persona.st-listening .r3 { animation-delay: .9s; }
.persona.st-thinking .avatar { animation: think 1.6s ease-in-out infinite; }
.persona.st-idle .r1 { opacity: .35; border-color: rgba(255,255,255,.25); inset: 36px; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes think { 50% { transform: scale(.96); filter: brightness(.85); } }
.who { display: flex; flex-direction: column; gap: 2px; margin-top: -18px; }
.who b { font-size: 1.25rem; }
.who span { color: var(--stage-muted); font-size: .88rem; }
.stage-status { font-size: .9rem; color: var(--stage-muted); min-height: 1.4em; }
.persona.st-listening ~ .stage-status { color: #ff9a9c; }
.caption { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cap-text { font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.5; font-weight: 550; text-wrap: balance; }
.cap-tr { font-size: 1.05rem; color: #cfe0ff; }
.cap-ex { width: 100%; text-align: start; font-size: .92rem; line-height: 1.75; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); }
.call .chips { justify-content: center; }
.call .chip { background: rgba(255,255,255,.08); border-color: transparent; color: var(--stage-ink); }
.call .chip:hover, .call .chip.on { background: rgba(91,140,255,.28); color: #fff; }
.live-you { font-size: 1.1rem; color: #ffd0d1; font-style: italic; }
.you-line { width: 100%; text-align: start; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); }
.you-line > p { font-size: 1.02rem; text-align: left; }
.you-tag { font-size: .75rem; font-weight: 650; color: var(--stage-muted); }
.call .corr { max-width: none; background: rgba(46, 179, 120, .14); border-color: rgba(46,179,120,.35); color: var(--stage-ink); }
.call .corr-h { color: #7ee2b0; }
.call .err-box, .call .end-box, .call .hint-box { width: 100%; text-align: start; color: var(--stage-ink); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.call .hint { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--stage-ink); }
.call .hint-box .corr-h { color: #a9c2ff; }
.challenge { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-size: .88rem; }
.ch-h { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--milestone); }
.ch-h svg, .ch-item svg { width: 15px; height: 15px; }
.ch-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; border: 1px dashed rgba(240,174,74,.6); }
.ch-item.ok { border-style: solid; border-color: #5cc98d; color: #9ff0c4; }
.challenge.light { justify-content: flex-start; }
.challenge.light .ch-item { border-color: color-mix(in srgb, var(--milestone) 60%, transparent); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.goal-line { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--stage-muted); text-align: start; }
.goal-line svg { width: 16px; height: 16px; color: var(--milestone); flex: none; margin-top: 3px; }
.log { background: var(--surface); color: var(--ink); border-inline-start: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; min-height: 0; }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.log-head .cb-btn { background: var(--surface-2); display: none; }
.log .msgs { overflow-y: auto; padding: 14px; flex: 1; }
.log .msg { max-width: 100%; }
.log .bubble { font-size: .95rem; }
.call-controls { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.call-controls .note { width: 100%; max-width: 640px; }
.call-controls .comp-row { width: 100%; max-width: 640px; }
.call-controls textarea { background: rgba(255,255,255,.95); color: #141a2b; border: 0; }
.cc-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 26px); }
.cc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--stage-ink); cursor: pointer; min-width: 56px; padding: 0; }
.cc > svg, .cc > .spin { width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: rgba(255,255,255,.1); box-sizing: border-box; }
.cc > .spin { border-width: 3px; }
.cc small { font-size: .72rem; color: var(--stage-muted); white-space: nowrap; }
.cc.on > svg { background: rgba(91,140,255,.35); }
.cc[disabled] { opacity: .4; cursor: not-allowed; }
.cc.send > svg { background: var(--talk); }
.cc .badge { position: absolute; top: -4px; inset-inline-end: 0; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--talk); color: #fff; font: 600 .68rem/18px var(--mono); font-style: normal; }
.call-mic { width: 84px; height: 84px; margin: 0; background: #fff; color: var(--stage); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.call-mic svg { width: 34px; height: 34px; }
.call-mic.on { background: var(--listen); color: #fff; }
.cc-tip { font-size: .8rem; color: var(--stage-muted); min-height: 1.2em; }
#mic-state.cc-tip { color: var(--stage-muted); font-weight: 500; }
@media (max-width: 960px) {
  .call-main { grid-template-columns: 1fr; }
  .log { display: none; position: absolute; inset: 0; z-index: 3; border: 0; }
  .call.log-open .log { display: flex; }
  .log-head .cb-btn { display: grid; }
  .persona { width: 180px; height: 180px; } .avatar.xl { width: 108px; height: 108px; font-size: 2.1rem; }
  .persona .ring { inset: 36px; } .persona.st-idle .r1 { inset: 30px; }
}
@media (min-width: 961px) { .log-btn { display: none; } }
@media (max-height: 700px) { .persona { width: 150px; height: 150px; } .avatar.xl { width: 92px; height: 92px; font-size: 1.8rem; } .persona .ring { inset: 29px; } }
@media (prefers-reduced-motion: reduce) { .persona .ring, .persona.st-thinking .avatar { animation: none !important; } .persona.st-speaking .r1, .persona.st-listening .r1 { opacity: 1; } }

/* ---------- Home ---------- */
.home-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.home-head h1 { font-size: 1.75rem; }
.today-ring { position: relative; width: 84px; height: 84px; flex: none; }
.today-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.today-ring circle { fill: none; stroke-width: 4.5; }
.today-ring .bg { stroke: var(--surface-2); } .today-ring .fg { stroke: var(--ok); stroke-linecap: round; }
.today-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.today-ring b { font: 650 1.35rem var(--mono); } .today-ring small { font-size: .68rem; color: var(--muted); }
.resume .avatar { margin-inline-end: 2px; }
.mission { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.mission::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--accent), var(--milestone)); }
.m-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.m-week { font-size: .82rem; color: var(--muted); font-weight: 550; }
.mission h2 { font-size: 1.3rem; margin-top: 2px; }
.mission.big h2 { font-size: 1.5rem; }
.m-tip { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); font-size: .95rem; }
.mission .plan .tick svg { width: 15px; height: 15px; color: var(--muted); }
.mission .plan li.done .tick svg { color: #fff; }
.home-grid { align-items: stretch; }
.streak-n { display: inline-flex; align-items: center; gap: 6px; color: var(--milestone); }
.streak-n svg { width: 22px; height: 22px; } .streak-n b { font: 650 1.5rem var(--mono); color: var(--ink); }
.real-cta { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); border-color: color-mix(in srgb, var(--milestone) 50%, var(--line)); background: color-mix(in srgb, var(--milestone) 7%, var(--surface)); }
.real-cta > svg { width: 28px; height: 28px; color: var(--milestone); flex: none; }
.real-cta > div { display: flex; flex-direction: column; flex: 1; }
.real-cta .go svg { width: 22px; height: 22px; color: var(--milestone); }
.sec-h { font-size: 1.05rem; margin-top: 6px; }

/* ---------- 30-day track: four lanes of milestone diamonds ---------- */
.track { display: flex; flex-direction: column; gap: 10px; }
.lane { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; align-items: center; }
.track.compact .lane { grid-template-columns: 74px minmax(0,1fr); }
.lane-h { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.3; }
.lane-h span { color: var(--muted); font-size: .78rem; }
.lane-days { position: relative; display: flex; justify-content: space-between; gap: 4px; }
.lane-days::before { content: ""; position: absolute; inset-inline: 10px; top: 13px; height: 2px; background: var(--line); }
.dmd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--muted); width: 28px; }
.dmd i { width: 17px; height: 17px; margin: 5px 0; transform: rotate(45deg); border-radius: 3px; background: var(--surface); border: 2px solid var(--line); }
.dmd span { font: 600 .7rem var(--mono); }
.dmd.done i { background: var(--ok); border-color: var(--ok); }
.dmd.open i { border-color: var(--accent); }
.dmd.cur i { background: var(--milestone); border-color: var(--milestone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--milestone) 25%, transparent); }
.dmd.cur span { color: var(--ink); }
.dmd.real i { border-style: dashed; }
.dmd.done.real i, .dmd.cur.real i { border-style: solid; }
.dmd.locked { opacity: .55; }
@media (max-width: 560px) { .lane, .track.compact .lane { grid-template-columns: 1fr; gap: 4px; } .lane-h { flex-direction: row; gap: 8px; } .dmd { width: 22px; } .dmd i { width: 14px; height: 14px; } .lane-days::before { top: 11px; } }
.weeks { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 860px) { .weeks { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- Week chart ---------- */
.wchart { display: flex; flex-direction: column; gap: 8px; }
.wchart svg { width: 100%; max-height: 190px; }
.wchart rect { fill: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); }
.wchart rect.met { fill: var(--ok); }
.wchart .goal { stroke: var(--milestone); stroke-dasharray: 4 4; stroke-width: 1.5; }
.wchart .lbl { font: 500 10px var(--font); fill: var(--muted); }
.wchart .val { font: 600 10px var(--mono); fill: var(--ink); }

/* ---------- Badges ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-c { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); }
.badge-c .b-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.badge-c .b-ic svg { width: 18px; height: 18px; }
.badge-c.on { border-style: solid; border-color: color-mix(in srgb, var(--milestone) 45%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--milestone) 6%, var(--surface)); }
.badge-c.on .b-ic { background: var(--milestone); color: #fff; }
.badge-c small { font-size: .75rem; color: var(--muted); }
.facts.f4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 640px) { .facts.f4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ch-res { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--critical); }
.ch-res svg { width: 18px; height: 18px; }
.ch-res.ok { color: var(--ok); }
.ch-res span[dir] { color: var(--ink); font-weight: 600; }
.real-form textarea { font-family: var(--font-ar); font-size: 1rem; }
.srow > a { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); }
/* transcript panel sits on a light surface inside the dark call: restore light styles */
.call .log .chip { background: var(--surface); border-color: var(--line); color: var(--muted); }
.call .log .chip:hover, .call .log .chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.call .log .corr { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ink); }
.call .log .corr-h { color: var(--ok); }
.call .log .chips { justify-content: flex-start; }