/* Tutor: a dark camera-app surface, one highlighter accent, and a paper slip for the
   things worth showing. Type is the iPad's rounded system face. */
:root {
  color-scheme: dark;
  --ink: #15161a;          /* page */
  --ink-2: #1e2026;        /* rail, footer, dialog */
  --ink-3: #2a2d35;        /* elevated: source card, inputs */
  --line: #353943;
  --chalk: #f3f1ea;        /* primary text */
  --chalk-dim: #a9a79f;    /* transcript, meta */
  --chalk-faint: #6f6e69;
  --mark: #ffd84d;         /* highlighter */
  --mark-ink: #1b1600;
  --rec: #ff5a4e;
  --listen: #7ec8ff;
  --paper: #fbf9f3;
  --paper-rule: #c9d6ea;
  --paper-ink: #1d2433;
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px;
  --font: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--chalk); font-family: var(--font); overscroll-behavior: none; }
body { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.hidden { display: none !important; }
.screen { min-height: 100dvh; display: flex; flex-direction: column; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

/* ── setup ──────────────────────────────────────────────────────────────── */
#setup { align-items: center; justify-content: center; padding: 32px 24px; padding-top: calc(32px + env(safe-area-inset-top)); }
.card { width: min(440px, 100%); text-align: left; }
.card h1 { margin: 0 0 6px; font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.card h1::after { content: ""; display: block; width: 72px; height: 10px; background: var(--mark); border-radius: 5px; margin-top: 14px; }
.card p { margin: 26px 0 18px; font-size: 20px; color: var(--chalk-dim); line-height: 1.4; }
#pin { width: 100%; font-size: 26px; padding: 16px 18px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--ink-3); color: var(--chalk); margin-bottom: 14px; font-family: inherit; }
#pin::placeholder { color: var(--chalk-faint); }
#pin:focus { outline: none; border-color: var(--mark); }
.primary { font-size: 21px; font-weight: 700; padding: 16px 24px; border: 0; border-radius: var(--r-md); background: var(--mark); color: var(--mark-ink); }
.card .primary { width: 100%; }
.primary:active { filter: brightness(.92); }
.primary:disabled { opacity: .6; }
.hint { color: var(--chalk-dim); font-size: 15px; line-height: 1.45; }
.card .hint { margin-top: 22px; }
.error { color: var(--rec); }

/* ── main ───────────────────────────────────────────────────────────────── */
#grid { flex: 1; display: grid; gap: 0; min-height: 0; }
.side-right #grid { grid-template-columns: minmax(0, 1fr) 176px; }
.side-left #grid { grid-template-columns: 176px minmax(0, 1fr); }
.side-left #side { order: -1; }
#stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--ink-2); padding-top: env(safe-area-inset-top); }

/* camera hero: full bleed, rounded bottom corners */
#preview-wrap { position: relative; background: #000; aspect-ratio: 4 / 3; max-height: 38dvh; overflow: hidden;
  border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.side-left #preview-wrap { border-bottom-left-radius: 0; }
.side-right #preview-wrap { border-bottom-right-radius: 0; }
#preview, #still { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
#still { transform: none; }
.status { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 14px; font-size: 16px; font-weight: 600;
  color: var(--chalk); background: rgba(21,22,26,.72); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.status:empty { display: none; }
.status.busy::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--mark); animation: pulse 1s infinite; vertical-align: 1px; }
@keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.zone-box { position: absolute; border: 2px dashed var(--mark); border-radius: 6px; pointer-events: none; }
#preview-wrap.picking { cursor: crosshair; box-shadow: inset 0 0 0 4px var(--mark); }

/* conversation */
#convo { flex: 1; padding: 22px 24px 8px; overflow-y: auto; }
.heard { color: var(--chalk-faint); font-size: 16px; margin: 0 0 8px; }
.transcript { color: var(--chalk-dim); font-size: 19px; font-weight: 400; margin: 0 0 12px; min-height: 24px; line-height: 1.35; max-width: 34ch; }
.reply { font-size: 34px; line-height: 1.22; margin: 0; font-weight: 800; letter-spacing: -0.015em; max-width: 24ch; }
.reply:not(:empty) { animation: settle .35s ease-out; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the paper slip */
.show { margin: 20px 0 0; padding: 18px 22px 16px; max-width: 520px; color: var(--paper-ink);
  background: var(--paper) repeating-linear-gradient(to bottom, transparent 0 39px, var(--paper-rule) 39px 40px);
  background-position: 0 14px; border-radius: 6px 6px 14px 14px; box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 12px 28px rgba(0,0,0,.35);
  font-size: 28px; line-height: 40px; font-family: "SF Mono", Menlo, "Courier New", monospace; white-space: pre-wrap; transform: rotate(-0.4deg); }
.show::before { content: ""; position: absolute; }
.source { display: flex; gap: 14px; margin-top: 16px; max-width: 520px; padding: 14px; background: var(--ink-3); border-radius: var(--r-md); color: inherit; text-decoration: none; }
.source img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.source-title { font-weight: 700; font-size: 18px; }
.source-extract { font-size: 15px; color: var(--chalk-dim); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.source-from { font-size: 13px; color: var(--chalk-faint); margin-top: 6px; }

/* the talk ring */
.talk { position: relative; width: 136px; height: 136px; border-radius: 50%; border: 5px solid var(--chalk-faint); background: transparent; color: var(--chalk);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px;
  font-size: 13px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; transition: border-color .2s, background .2s, transform .15s; }
.talk svg { width: 40px; height: 40px; }
.talk span { text-align: center; line-height: 1.15; color: var(--chalk-dim); }
.talk.recording { border-color: var(--rec); background: var(--rec); color: #fff; transform: scale(1.08); }
.talk.recording span { color: #fff; }
.talk.busy { border-color: var(--line); color: var(--chalk-faint); }
.talk.speaking { border-color: var(--mark); color: var(--mark); }
.talk.listening { border-color: var(--listen); animation: breathe 2.6s ease-in-out infinite; }
.talk.hot { border-color: var(--listen); background: rgba(126,200,255,.14); }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(126,200,255,.0); } 50% { box-shadow: 0 0 0 14px rgba(126,200,255,.14); } }
#meter { width: 96px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
#meter-bar { height: 100%; width: 0; background: var(--rec); transition: width .08s linear; }
.badge { font-size: 13px; color: var(--listen); font-weight: 600; }

footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 16px 12px; color: var(--chalk-dim); font-size: 15px; background: var(--ink-2); }
.ghost { background: none; border: 0; color: var(--chalk-dim); font-size: 20px; text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm); }
.ghost:active { background: var(--ink-3); }
.counter { font-variant-numeric: tabular-nums; color: var(--chalk-faint); }

/* settings sheet */
dialog { border: 0; border-radius: var(--r-lg); padding: 26px 26px 22px; width: min(540px, 92vw); background: var(--ink-2); color: var(--chalk); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h2 { margin: 0 0 10px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.row input[type=text] { font-size: 18px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r-sm); width: 200px; background: var(--ink-3); color: var(--chalk); font-family: inherit; }
.row input[type=text]:focus { outline: none; border-color: var(--mark); }
.row input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--mark); }
.row input[type=radio] { accent-color: var(--mark); }
.seg label { margin-left: 14px; font-size: 17px; }
.seg .ghost { font-size: 17px; border: 1px solid var(--line); margin-left: 8px; }
dialog .hint { margin: 10px 0 0; }
.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.actions .ghost { font-size: 17px; }

/* log page */
.log-page { padding: 16px 20px; padding-top: calc(16px + env(safe-area-inset-top)); }
.log-head { display: flex; align-items: center; gap: 12px; }
.log-head h1 { font-size: 26px; margin: 0; font-weight: 800; }
.turns { list-style: none; padding: 0; margin: 18px 0; max-width: 680px; }
.turns li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.turns time { color: var(--chalk-faint); font-size: 13px; }
.turns .q { margin: 6px 0 4px; color: var(--chalk-dim); }
.turns .a { margin: 4px 0; font-weight: 600; font-size: 18px; }
.turns .s { margin: 6px 0 0; font-family: Menlo, monospace; white-space: pre-wrap; color: var(--chalk-dim); }
.turns .s:empty { display: none; }

@media (prefers-reduced-motion: reduce) { .talk.listening, .status.busy::before, .reply:not(:empty) { animation: none; } }
@media (max-width: 600px) { .side-right #grid, .side-left #grid { grid-template-columns: minmax(0, 1fr) 128px; } .talk { width: 104px; height: 104px; } .reply { font-size: 28px; } }

.ghost.icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
.ghost.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ghost.icon svg .spk { fill: currentColor; stroke: none; }
.ghost.icon svg .cross { display: none; }
.ghost.icon.muted svg .wave { display: none; }
.ghost.icon.muted svg .cross { display: inline; }
footer a.ghost { font-size: 16px; font-weight: 600; }