/* ===========================================================================
 * styles.css — the Gate-1 look, shared by the two student pages.
 * ---------------------------------------------------------------------------
 * Tokens and every rule below come from the approved mockups (MOCK-01,
 * MOCK-02, MOCK-04), which Vinodh ruled on before any component was built
 * (Amendment 3, Gate 1). Nothing here re-designs them.
 *
 * ONE DEVIATION FROM THE FLEET, STATED: KarkaTeacher-SB and KarkaLogin-SB
 * inline their CSS because each is a single page. This app has two — the
 * check-in and the week — and they are the same screen furniture. One file
 * keeps them from drifting apart; it is still a static file with no build step.
 *
 * 390 px is the design width: a check-in is a page a student opens for thirty
 * seconds on a phone. Everything is a single column and every tap target is
 * at least 2.75 rem.
 * =========================================================================== */

:root{
  --ink:#1a232b; --ink-muted:#5b6670; --paper:#f7f6f1; --board:#fff; --line:#dad8cf;
  --teal:#147d7b; --teal-deep:#0f6564; --teal-tint:#e3efef; --olive:#b7a06a;
  --danger:#a12020; --danger-bg:#fdecec;
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius-card:1rem; --radius-field:.5rem; --radius-pill:9999px;
  --hit:2.75rem; --hit-lg:3rem;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
body{margin:0;padding:0 20px 44px;max-width:390px;margin-inline:auto}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

/* ---- page furniture ------------------------------------------------------ */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 0 0}
.eyebrow{font-size:.75rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);margin:0}
.pill{flex:none;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;
  border-radius:var(--radius-pill);background:var(--teal-tint);color:var(--teal-deep);font-weight:600}
h1{font-family:var(--font-display);font-size:1.75rem;line-height:1.08;letter-spacing:-.015em;
  margin:10px 0 4px;font-weight:600}
.sub{margin:0 0 18px;color:var(--ink-muted);font-size:.8125rem}
.sub b{color:var(--ink);font-weight:600}
.nav{display:flex;gap:14px;margin:0 0 6px;font-size:.8125rem}
.nav a{color:var(--teal-deep)}
.nav a[aria-current]{font-weight:600;text-decoration:none}
/* Whose check-in this is, above the first write (Amendment 13). Quiet, but not
 * hidden: a child glancing at it is the only signal that a handoff link signed
 * them in as someone else. */
.who{margin:0 0 14px;font-size:.75rem;color:var(--ink-muted);
  display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.who b{color:var(--ink);font-weight:600}
/* An identity we could not establish is stated, not hidden. */
.who--unconfirmed{color:var(--danger)}
/* ⚠️ A REAL TAP TARGET. This was `padding:0;min-height:0`, copied from `.chip.sm`
 * — which is `cursor:default` and not interactive at all — giving a ~15px tall
 * control on a phone. This is the one control a child uses to escape someone
 * else's session, so a mis-tap means carrying on typing into that person's day.
 * It matches the hit size every other interactive control in this file uses. */
.linkbtn{background:none;border:0;color:var(--teal-deep);font:inherit;font-size:.75rem;
  text-decoration:underline;cursor:pointer;padding:0 6px;min-height:var(--hit);
  display:inline-flex;align-items:center}

/* ---- the day as a timed bar (lesson_minutes, the lesson once) ------------- */
.daybar{display:flex;gap:4px;margin:0 0 6px}
.seg{height:8px;border-radius:var(--radius-pill);background:#e7e5dd}
.seg.done{background:var(--teal)}
.daylabels{display:flex;gap:4px;margin:0 0 22px;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted)}
.daylabels span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- cards --------------------------------------------------------------- */
.card{background:var(--board);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:18px 16px 16px;margin:0 0 14px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal)}
.card.pending{opacity:.62}
.card.pending::before{background:var(--line)}
.card.answered::before{background:var(--teal)}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 3px}
.class{font-family:var(--font-display);font-size:1.125rem;font-weight:600;margin:0}
.teacher{font-size:.75rem;color:var(--ink-muted)}
.tick{color:var(--teal);font-size:.875rem}
/* The shape of the day, stated plainly. Not an apology. */
.shape{display:inline-block;margin:10px 0 0;font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-deep);background:var(--teal-tint);
  border-radius:var(--radius-pill);padding:4px 10px;font-weight:600}
.shape-note{margin:8px 0 0;font-size:.8125rem;color:var(--ink-muted)}

/* ---- chips --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chip{font-size:.8125rem;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--board);color:var(--ink);min-height:var(--hit);display:inline-flex;align-items:center;
  gap:6px;font-family:inherit;cursor:pointer;text-align:left}
/* A chip is a switch: the tap is what commits, so its state is announced. */
.chip[aria-checked="true"],.chip[data-on]{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.chip[aria-checked="true"]::before,.chip[data-on]::before{content:"✓";font-size:.75rem}
.chip.ghost{border-style:dashed;color:var(--ink-muted)}
.chip.ghost[aria-checked="true"]{color:#fff}
.chip.sm{min-height:0;padding:5px 10px;font-size:.75rem;cursor:default}
.step{margin:12px 0 0;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}

/* ---- questions ----------------------------------------------------------- */
.qs{list-style:none;margin:14px 0 0;padding:0}
.q{border-top:1px solid var(--line);padding:14px 0 4px}
.q-head{display:flex;align-items:baseline;gap:10px}
.num{font-family:var(--font-display);font-size:.875rem;color:var(--teal);font-weight:600;min-width:1.4em}
.q-title{font-size:1rem;font-weight:600;margin:0;flex:1}
.indent{margin-left:calc(1.4em + 10px)}

/* ---- the field: textarea with its own mic inside it ---------------------- */
.field{position:relative;margin:12px 0 0}
textarea{width:100%;min-height:72px;padding:11px 52px 11px 12px;border:1px solid var(--line);
  border-radius:var(--radius-field);font:inherit;font-size:.875rem;background:var(--board);
  color:var(--ink);resize:none}
textarea::placeholder{color:#9aa39a}
.mic{position:absolute;right:8px;bottom:8px;width:var(--hit);height:var(--hit);
  border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--board);
  display:grid;place-items:center;cursor:pointer;padding:0}
.mic svg{width:18px;height:18px;fill:var(--ink-muted)}
.mic[data-state="listening"]{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 6px var(--teal-tint)}
.mic[data-state="listening"] svg{fill:#fff}
/* An unsupported browser renders NO mic — never a disabled one. The controller
 * sets [hidden]; this makes sure nothing in the cascade re-shows it. */
.mic[hidden]{display:none}
.hint{margin:8px 0 0;font-size:.75rem;color:var(--ink-muted)}
.count{text-align:right}

/* ---- actions and messages ------------------------------------------------ */
.confirm{margin:18px 0 0;width:100%;min-height:var(--hit-lg);border:0;border-radius:var(--radius-field);
  background:var(--teal);color:#fff;font:600 .9375rem/1 var(--font-sans);cursor:pointer}
.confirm[disabled]{opacity:.6;cursor:default}
.addclass{width:100%;min-height:var(--hit);margin:0 0 14px;background:none;border:1px dashed var(--line);
  border-radius:var(--radius-field);color:var(--teal-deep);font:600 .875rem/1 var(--font-sans);cursor:pointer}
/* A refusal is never a modal: it sits under the thing that was refused, so a
 * blocked microphone or a late check-in cannot stand between a student and an
 * answer they can still type. */
.msg{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-field);
  background:var(--danger-bg);color:var(--danger);font-size:.8125rem}
.msg.info{background:var(--teal-tint);color:var(--teal-deep)}
.msg[hidden]{display:none}
.footnote{margin:14px 0 0;font-size:.75rem;color:var(--ink-muted);text-align:center}
.refused{border:1px solid var(--danger);border-radius:var(--radius-card);padding:22px;
  color:var(--danger);background:var(--danger-bg)}
.refused h2{margin:0 0 6px;font-size:1rem}
.refused p{margin:0;color:#7a2020;font-size:.875rem}

/* ---- the door ------------------------------------------------------------ */
label{display:block;font-size:.8125rem;font-weight:600;margin:14px 0 6px}
input{width:100%;min-height:var(--hit);padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius-field);font:inherit;background:var(--board)}

/* ---- the week ------------------------------------------------------------ */
.assess{display:grid;gap:8px;margin:0 0 20px}
.a-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:var(--radius-field);padding:10px 12px;background:var(--board)}
.a-name{font-size:.875rem;font-weight:600;margin:0}
.a-sub{font-size:.75rem;color:var(--ink-muted);margin:2px 0 0}
/* Facts, not urgency — nothing on this screen is red. */
.a-days{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--teal-deep);white-space:nowrap}
.a-row.far .a-days{color:var(--ink-muted)}

.week{display:flex;gap:5px;margin:0 0 6px}
/* The bare .d is MISSED: a day a check-in was asked for and not given. */
.d{flex:1;height:10px;border-radius:var(--radius-pill);background:#d8d4c6}
.d.on{background:var(--teal)}
.d.late{background:repeating-linear-gradient(135deg,var(--teal) 0 3px,var(--teal-tint) 3px 6px)}
/* ⚠️ no_karka IS A REAL STATE AND MUST NOT READ AS A MISSED DAY. These two were
 * #e7e5dd and #eceae3 — five RGB values apart, indistinguishable on a phone in
 * evening light. A day with no Karka class was therefore rendered as a day the
 * student failed to answer, which is the one confusion this screen exists to
 * avoid. It is now an outline with no fill: nothing was asked, so nothing is
 * filled in. */
.d.none{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.wlabels{display:flex;gap:5px;margin:0 0 8px;font-size:.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted)}
.wlabels span{flex:1;text-align:center}
.legend{margin:0 0 20px;font-size:.75rem;color:var(--ink-muted)}

.stampwrap{display:flex;align-items:center;gap:14px}
.stamp{flex:none;transform:rotate(-7deg);border:2px solid var(--teal-deep);color:var(--teal-deep);
  border-radius:6px;padding:8px 10px;font-family:var(--font-display);font-size:.8125rem;line-height:1.15;
  font-weight:600;text-align:center;background:var(--board)}
.badges{margin:0;padding:0;list-style:none;font-size:.8125rem;display:grid;gap:6px}
.badges li{display:flex;align-items:center;gap:7px}
.badges .b{color:var(--teal);font-weight:700}

.plan{list-style:none;margin:18px 0 0;padding:0}
.row{border-top:1px solid var(--line);padding:13px 0;display:flex;align-items:flex-start;gap:10px}
.row-main{flex:1}
.row-title{margin:0;font-size:.9375rem;font-weight:600}
.row-why{margin:3px 0 0;font-size:.75rem;color:var(--ink-muted)}
.state{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);
  background:var(--teal-tint);border-radius:var(--radius-pill);padding:4px 9px;white-space:nowrap;
  border:0;font-family:inherit;min-height:var(--hit);cursor:pointer}
.state.plain{background:#efeee8;color:var(--ink-muted)}
span.state{cursor:default;display:inline-flex;align-items:center}