/* i-Faham v0.6 "Nila Mesra". Rules (brand/DESIGN.md):
   - First glance: one big friendly visual and one action per screen. Details only when asked.
   - Word budget: a title of a few words, at most one short line under it.
   - Soft tinted surfaces and generous rounding; no hairline grids, no heavy shadows.
   - Faham (the i with the red-tick hat) reacts at key moments. The red pen still marks answers.
   - Motion explains change and responds to touch; nothing moves for decoration alone. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
html[data-text="small"] { font-size: 15px; }
html[data-text="large"] { font-size: 18.5px; }
body { margin: 0; background: var(--bg-desk); color: var(--ink); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--indigo) 50%, transparent); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }

.app { position: relative; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--bg); }
.screen { display: flex; flex-direction: column; gap: 16px; padding: 4px 18px 40px; }
.screen.with-dock { padding-bottom: 130px; }

/* ---------- Type ---------- */
h1, .h1 { font-weight: 700; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.015em; }
.h2 { font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.lead { font-size: 1.1rem; line-height: 1.45; color: var(--ink-2); }
.kicker { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); }
.code { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dev-note { font-size: 0.8rem; color: var(--ink-3); border-top: 1px dashed var(--line-2); padding-top: 8px; }

/* ---------- Header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 18px 6px; }
.wordmark { display: inline-flex; line-height: 0; text-decoration: none; }
.wordmark .wm { height: 28px; width: auto; }
.wm-ink { fill: var(--indigo-deep); }
:root[data-theme="dark"] .wm-ink { fill: #EEF1F8; }
.wm-tick { fill: var(--mark); }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--gold-wash); color: var(--gold-ink); }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; min-height: 58px; padding: env(safe-area-inset-top) 10px 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.bar-title { flex: 1; min-width: 0; font-weight: 600; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: var(--surface); }
.iconbtn svg { width: 22px; height: 22px; }
.bar .iconbtn, .t-top .iconbtn { background: var(--surface); }
.step-count { font-size: 0.85rem; color: var(--ink-3); padding-right: 10px; font-variant-numeric: tabular-nums; }

/* ---------- Icons ---------- */
.ic { width: 22px; height: 22px; flex: none; }
.note > .nl .ic { width: 18px; height: 18px; }
.ic .a { stroke: var(--mark); }
.ic .af { fill: var(--mark); stroke: none; }
.ic .w { fill: currentColor; opacity: 0.12; stroke: none; }
.btn-primary .ic .a, .btn-white .ic .a { stroke: #FF9D8F; }
.btn-primary .ic .af, .btn-white .ic .af { fill: #FF9D8F; }
.btn-white .ic .a { stroke: var(--mark); } .btn-white .ic .af { fill: var(--mark); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: var(--r-md); font-weight: 600; font-size: 1.05rem; line-height: 1.2; text-align: center; transition: transform 140ms cubic-bezier(.2,.8,.2,1), background-color 140ms ease; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-press); }
.btn-soft { background: var(--indigo-wash); color: var(--indigo-deep); }
:root[data-theme="dark"] .btn-soft { color: var(--indigo-deep); }
.btn-white { background: #fff; color: #233C7A; }
.btn-ghost { background: transparent; color: var(--indigo); min-height: 44px; padding: 0 12px; }
.btn-danger { background: var(--mark); color: #fff; }
.btn-block { width: 100%; }
.btn-lg { min-height: 60px; font-size: 1.1rem; border-radius: 18px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.95rem; border-radius: var(--r-sm); }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }

/* Round quick actions with a colour each */
.qi { width: 56px; height: 56px; border-radius: 20px; display: grid; place-items: center; }
.qi svg { width: 28px; height: 28px; }
.qi.gold { background: var(--gold-wash); color: var(--gold-ink); }
.qi.teal { background: var(--teal-wash); color: var(--teal-ink); }
.qi.coral { background: var(--coral-wash); color: var(--coral-ink); }
.qi.indigo { background: var(--indigo-wash); color: var(--indigo-deep); }
.qi.plum { background: var(--plum-wash); color: var(--plum-ink); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: var(--r-lg); background: var(--surface); font-weight: 600; font-size: 0.95rem; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.quick button:active, .tile:active, .task-card:active, .lang-tile:active, .choice-tile:active { transform: scale(0.96); }

/* ---------- Cards and disclosures ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 18px; }
.card.tint { background: var(--surface-2); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.tile b { font-weight: 600; }
.tile .qi { width: 48px; height: 48px; border-radius: 16px; }
.tile .qi svg { width: 24px; height: 24px; }
.task-card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.task-card small { display: block; font-size: 0.82rem; color: var(--ink-2); }
.task-card b { display: block; font-weight: 600; line-height: 1.3; }
.task-card .go { padding: 9px 16px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 0.95rem; }
.more { background: var(--surface); border-radius: var(--r-lg); }
.more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 18px; cursor: pointer; list-style: none; font-weight: 600; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .chev { width: 20px; height: 20px; color: var(--ink-3); transition: transform 240ms cubic-bezier(.2,.8,.2,1); transform: rotate(90deg); }
.more[open] > summary .chev { transform: rotate(-90deg); }
.more-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.more[open] > .more-body { animation: open 300ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.list { display: flex; flex-direction: column; gap: 6px; }
.list-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: left; font-weight: 500; }
.list-row > svg:first-child { width: 24px; height: 24px; color: var(--indigo); justify-self: center; }
.chev { width: 18px; height: 18px; color: var(--ink-3); }

/* ---------- Choices ---------- */
.lang-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.lang-tile, .choice-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 76px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; font-weight: 600; font-size: 1.15rem; border: 2px solid transparent; transition: transform 140ms cubic-bezier(.2,.8,.2,1), border-color 160ms ease; }
.lang-tile small, .choice-tile small { font-size: 0.8rem; font-weight: 400; color: var(--ink-3); }
.lang-tile[aria-pressed="true"], .choice-tile[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo-wash); }
.lang-tile[aria-pressed="true"]::after, .choice-tile[aria-pressed="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice-grid .choice-tile { min-height: 64px; align-items: center; font-size: 1.05rem; padding: 10px; }
.choice-grid .choice-tile[aria-pressed="true"]::after { display: none; }
.choice-grid.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice-grid.wide .choice-tile { font-size: 0.98rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: var(--r-sm); background: var(--surface); font-weight: 500; font-size: 0.95rem; color: var(--ink-2); border: 2px solid transparent; }
.chip[aria-pressed="true"] { border-color: var(--indigo); color: var(--indigo-deep); background: var(--indigo-wash); }
.seg { display: flex; padding: 4px; gap: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: var(--r-sm); font-weight: 500; color: var(--ink-2); transition: background-color 160ms ease; }
.seg button svg { width: 20px; height: 20px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 500; color: var(--ink-2); background: var(--surface); }
.tabs button[aria-pressed="true"] { background: var(--indigo); color: var(--on-primary); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > .lbl { font-weight: 600; font-size: 0.95rem; }
.field .help { font-size: 0.85rem; color: var(--ink-2); }
.input, .select { width: 100%; min-height: 60px; padding: 0 18px; border-radius: var(--r-md); border: 2px solid transparent; background: var(--surface); font-size: 1.15rem; color: var(--ink); }
.input:focus, .select:focus { outline: none; border-color: var(--indigo); }
.input.big { min-height: 68px; font-size: 1.4rem; font-weight: 600; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.45; padding: 14px; border-radius: var(--r-md); background: var(--surface); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--indigo); flex: none; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
.opt + .opt { margin-top: 6px; }
.opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--indigo); flex: none; }
.opt b { display: block; font-weight: 600; }
.opt small { display: block; color: var(--ink-2); }

/* ---------- Dock ---------- */
.dock { position: fixed; z-index: 6; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); display: flex; flex-direction: column; gap: 8px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 22%); }

/* ---------- Faham ---------- */
.faham { display: block; overflow: visible; }
.f-body { fill: var(--f-body); }
.f-foot { fill: var(--f-foot); }
.f-arm { fill: none; stroke: var(--f-body); stroke-width: 8; stroke-linecap: round; }
.f-hand { fill: var(--f-body); }
.f-sampin { fill: var(--gold); }
.f-sampin-line { fill: none; stroke: #B07A1E; stroke-width: 1.4; }
.f-cheek { fill: #F08A7C; opacity: 0.45; }
.f-pupil { fill: #16203A; }
.f-line { fill: none; stroke: #16203A; stroke-linecap: round; }
.f-tick { fill: var(--mark); }
.f-dots circle { fill: color-mix(in srgb, var(--indigo-2) 40%, transparent); }
.faham .f-hat { transform-box: fill-box; transform-origin: 50% 100%; animation: hatbob 3.2s ease-in-out infinite; }
.faham .f-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.faham-hi .f-wave { transform-box: fill-box; transform-origin: 0% 100%; animation: wave 1.6s ease-in-out infinite; }
.faham-happy .f-body-g { transform-box: fill-box; transform-origin: 50% 100%; animation: hop 900ms cubic-bezier(.3,.7,.3,1) 1; }
.faham-think .f-dots circle { animation: dot 1.4s ease-in-out infinite; }
.faham-think .f-dots circle:nth-child(2) { animation-delay: 0.2s; }
.faham-think .f-dots circle:nth-child(3) { animation-delay: 0.4s; }
@keyframes hatbob { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes wave { 50% { transform: rotate(-16deg); } }
@keyframes hop { 30% { transform: translateY(-10px); } 60% { transform: translateY(0); } }
@keyframes dot { 50% { opacity: 0.3; } }

/* ---------- Welcome and setup ---------- */
.welcome { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: calc(36px + env(safe-area-inset-top)) 20px 130px; text-align: center; }
.welcome h1 { font-size: 2rem; }
.welcome .wordmark .wm { height: 34px; }
.setup-head { display: flex; align-items: flex-end; gap: 12px; margin-top: 6px; }
.setup-head h1 { flex: 1; }
.stepdots { display: flex; gap: 6px; padding-right: 8px; }
.stepdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.stepdots i.on { width: 22px; border-radius: 4px; background: var(--indigo); }
.consent-points { display: flex; flex-direction: column; gap: 10px; }
.consent-points li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; font-weight: 500; }
.consent-points .qi { width: 48px; height: 48px; border-radius: 16px; }
.consent-points .qi svg { width: 24px; height: 24px; }

/* ---------- Home ---------- */
.hello { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.hello h1 { font-size: 1.85rem; }
.hero { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-xl); background: var(--indigo); color: #fff; }
:root[data-theme="dark"] .hero { background: #24376E; }
.hero .snap-demo { width: 100%; height: auto; display: block; }
.week-dots { display: flex; gap: 5px; }
.week-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.week-dots i.on { background: var(--plum); }

/* The snap demo animation */
.snap-demo .pp { fill: #FBFCFE; }
.snap-demo .pl { fill: #C9D1DE; }
.snap-demo .pl.strong { fill: #7D879B; }
.snap-demo .pshape { fill: #DCE6F7; stroke: #3152A3; stroke-width: 2; stroke-linejoin: round; }
.snap-demo .hl { fill: none; stroke: #F9D65C; stroke-width: 7; stroke-linecap: round; }
.snap-demo .h-ring, .snap-demo .h-tick { fill: none; stroke: #E0452F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.snap-demo .h-ans { fill: #3152A3; font: 700 15px var(--font-sans); }
.snap-demo .h-corners path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.snap-demo .h-scan { fill: #9DB6FF; }
.snap-demo .h-flash { fill: #fff; }
.snap-demo * { animation-duration: 7.2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.3,.7,.3,1); }
.snap-demo .h-corners { transform-box: view-box; transform-origin: 160px 98px; animation-name: hc; }
@keyframes hc { 0%, 9% { transform: scale(1.1); opacity: 0.6; } 17%, 86% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(1.1); opacity: 0.6; } }
.snap-demo .h-flash { opacity: 0; animation-name: hf; }
@keyframes hf { 0%, 16% { opacity: 0; } 18.5% { opacity: 0.5; } 25%, 100% { opacity: 0; } }
.snap-demo .h-scan { opacity: 0; transform-box: view-box; animation-name: hs; }
@keyframes hs { 0%, 23% { transform: translateY(0); opacity: 0; } 25% { opacity: 0.9; } 37% { transform: translateY(156px); opacity: 0.9; } 39%, 100% { transform: translateY(156px); opacity: 0; } }
.snap-demo .hl { stroke-dasharray: 1; animation-name: hh; }
@keyframes hh { 0%, 41% { stroke-dashoffset: 1; opacity: 1; } 49%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.snap-demo .h-ring { stroke-dasharray: 1; animation-name: hr; }
@keyframes hr { 0%, 51% { stroke-dashoffset: 1; opacity: 1; } 59%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.snap-demo .h-ans { opacity: 0; animation-name: ha; }
@keyframes ha { 0%, 62% { opacity: 0; } 67%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
.snap-demo .h-tick { stroke-dasharray: 1; animation-name: ht; }
@keyframes ht { 0%, 68% { stroke-dashoffset: 1; opacity: 1; } 74%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ---------- Camera ---------- */
.cam { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: #0A0F1E; color: #fff; }
.cam-top { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top)) 10px 0; }
.cam-top .iconbtn { background: rgba(255,255,255,0.12); color: #fff; }
.cam-tabs { display: flex; padding: 4px; gap: 4px; border-radius: var(--r-md); background: rgba(255,255,255,0.12); }
.cam-tabs button { min-height: 36px; padding: 0 14px; border-radius: 12px; font-weight: 500; font-size: 0.92rem; color: rgba(255,255,255,0.8); }
.cam-tabs button[aria-pressed="true"] { background: #fff; color: #0A0F1E; }
.cam-title { font-weight: 600; }
.viewfinder { position: relative; flex: 1; margin: 14px 16px; border-radius: 24px; overflow: hidden; background: #131A2E; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.corners { position: absolute; inset: 18px; pointer-events: none; }
.corners i { position: absolute; width: 38px; height: 38px; border: 0 solid #fff; }
.corners i:nth-child(1) { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 12px; }
.corners i:nth-child(2) { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 12px; }
.corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 12px; }
.corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 12px; }
.viewfinder .hint { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font-size: 0.95rem; padding: 0 28px; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); }
.cam-side { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.cam-side svg { width: 26px; height: 26px; }
.shutter { width: 78px; height: 78px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #0A0F1E, 0 0 0 8px rgba(255,255,255,0.85); transition: transform 120ms ease; }
.shutter:active { transform: scale(0.92); }

/* ---------- Ask: voice, typing, writing ---------- */
.voice-pad { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0 10px; text-align: center; }
.mic { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.mic svg { width: 40px; height: 40px; }
.mic.live { animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--primary) 18%, transparent); } }
.transcript { width: 100%; padding: 16px; border-radius: var(--r-md); background: var(--surface); text-align: left; font-size: 1.1rem; }
.composer { border-radius: var(--r-lg); background: var(--surface); overflow: hidden; border: 2px solid transparent; transition: border-color 160ms ease; }
.composer:focus-within { border-color: var(--indigo); }
.composer .rich { display: block; width: 100%; outline: none; font-size: 1.1rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.composer .typed { min-height: 190px; padding: 16px; }
.composer .text-ans { min-height: 100px; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; }
.rich:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }
/* The composer's one tool: put maths in. */
.ctool { display: flex; padding: 8px; background: var(--surface-2); }
.ctool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--surface); color: var(--indigo); font-weight: 600; font-size: 0.95rem; transition: transform 120ms ease; }
.ctool-btn:active { transform: scale(0.96); }
.ctool-btn svg { width: 24px; height: 24px; }
/* Maths inside words: a chip you can tap to change. */
.eq-chip { display: inline-flex; align-items: center; vertical-align: middle; margin: 2px 1px; padding: 3px 9px; border-radius: 10px; background: var(--indigo-wash); color: var(--indigo-deep); font-size: 1.15em; line-height: 1.2; cursor: pointer; user-select: none; -webkit-user-select: none; }
.eq-chip.ro { cursor: default; }
.eq-chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.note.me .eq-chip { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ink-pad { border-radius: var(--r-lg); background: var(--surface); overflow: hidden; --ink-pen: var(--indigo); --ink-rule: var(--line); }
.ink-canvas { display: block; width: 100%; height: 250px; touch-action: none; cursor: crosshair; }
.ink-canvas.tall { height: 46vh; min-height: 280px; }
.ink-tools { display: flex; justify-content: space-between; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; color: var(--indigo); }
.link svg { width: 18px; height: 18px; }
.ink-thumb { max-width: 160px; max-height: 110px; border-radius: var(--r-sm); background: #fff; margin-top: 6px; }

/* ---------- Building a lesson ---------- */
.build-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.preview { position: relative; width: 100%; max-height: 220px; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); }
.preview img { width: 100%; object-fit: cover; max-height: 220px; }
.preview .typed-q { padding: 16px; font-size: 1.05rem; }
.preview .scanline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--indigo-2); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--indigo-2) 50%, transparent); animation: scanmove 1.8s ease-in-out infinite alternate; }
@keyframes scanmove { from { transform: translateY(6px); } to { transform: translateY(210px); } }
.status-line { font-weight: 600; font-size: 1.1rem; animation: open 320ms ease both; }
.bar-line { width: 100%; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar-line i { display: block; height: 100%; border-radius: 4px; background: var(--indigo); }
.bar-line.anim i { animation: barfill 700ms cubic-bezier(.2,.8,.2,1) both, barcreep var(--dur, 0ms) cubic-bezier(.2,.6,.4,1) 700ms forwards; }
@keyframes barfill { from { width: var(--from); } }
@keyframes barcreep { to { width: var(--to); } }
.found { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.found-q { width: 100%; margin-top: 14px; max-height: 200px; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); text-align: left; box-shadow: 0 1px 0 var(--line); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.found-q img { width: 100%; object-fit: cover; max-height: 200px; display: block; }
.found-q .typed-q { padding: 16px; }
.subject-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; background: var(--indigo-wash); color: var(--indigo-deep); }
.sample-sheet { padding: 14px 16px; background: #fff; color: #1a1a1a; }
.sample-sheet .sample-head { display: flex; justify-content: space-between; font-size: 0.78rem; color: #777; margin-bottom: 6px; }
.sample-sheet p { font-family: "Times New Roman", serif; font-size: 1rem; line-height: 1.45; }

/* ---------- Tutor ---------- */
.t-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: env(safe-area-inset-top) 12px 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.tdots { flex: 1; display: flex; gap: 6px; align-items: center; }
.tdots i { flex: 1; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; position: relative; }
.tdots i.d { background: var(--indigo); }
.tdots i.n::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 4px; background: var(--indigo); animation: grow 600ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { width: 0; } }
.sheet { display: flex; flex-direction: column; gap: 16px; padding: 6px 18px 130px; }
.qcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border-radius: var(--r-lg); background: var(--surface); }
.qcard .qtxt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.98rem; color: var(--ink-2); line-height: 1.45; text-align: left; }
.qcard .qmore { align-self: flex-start; font-size: 0.85rem; font-weight: 600; color: var(--indigo); }
.qcard .frame { margin: 0 -4px; }
.done-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.done-steps span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--indigo-wash); color: var(--indigo-deep); font-size: 0.82rem; font-weight: 600; }
.done-steps svg { width: 14px; height: 14px; }
.frame { position: relative; padding: 8px 6px 2px; --fig-max-h: 25vh; }
.frame .fig { margin: 0; }
.frame .fig-art { background: transparent; }
.prompt { font-weight: 600; font-size: 1.24rem; line-height: 1.32; letter-spacing: -0.01em; }
.q-full { font-size: 1.1rem; line-height: 1.55; }
.q-full mark { background: color-mix(in srgb, var(--hl) 80%, transparent); color: inherit; padding: 0 3px; border-radius: 4px; }

/* Answer: a big, friendly box */
.answer { display: flex; flex-direction: column; gap: 10px; }
.ans-box { position: relative; display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 8px 10px 8px 18px; border-radius: 20px; background: var(--surface); border: 2.5px solid var(--line-2); transition: border-color 160ms ease; }
.ans-box:focus-within { border-color: var(--indigo); }
.ans-box.kind-fraction { min-height: 118px; }
.ans-box .ring-wrap { flex: 0 1 auto; max-width: calc(100% - 60px); }
.ans-box .unit { font-size: 1.3rem; font-weight: 600; color: var(--ink-3); }
.ans-box .pen-btn { margin-left: auto; flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-wash); color: var(--gold-ink); }
.ans-box .pen-btn svg { width: 24px; height: 24px; }
.ans-box.bad { border-color: var(--coral); }
.ans-box.good { border-color: var(--indigo); background: var(--indigo-wash); }
.ans-box .written { font-size: 2rem; font-weight: 700; color: var(--indigo-deep); }
.ans-box .written math-span, .done-steps math-span, .pq .ok math-span { color: var(--indigo-deep); }
.ans-box .tick-draw { margin-left: auto; width: 46px; height: 46px; }
.ring-wrap { position: relative; display: inline-flex; min-width: 0; }
.ring-wrap .ring-mark { position: absolute; left: -12px; top: -9px; width: calc(100% + 22px); height: calc(100% + 16px); pointer-events: none; overflow: visible; }
.ring-mark path { stroke-dasharray: 520; animation: drawring 420ms ease both; }
@keyframes drawring { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
.tick-draw { width: 40px; height: 40px; flex: none; }
.tick-draw path { stroke-dasharray: 80; }
.tick-draw.anim path { animation: drawtick 420ms ease both; }
@keyframes drawtick { from { stroke-dashoffset: 80; } }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 2.5px solid transparent; text-align: left; font-size: 1.05rem; font-weight: 500; transition: transform 140ms ease; }
.choice:active { transform: scale(0.98); }
.choice .letter { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); font-weight: 700; color: var(--ink-2); }
.choice .letter .ring-mark { position: absolute; left: -9px; top: -7px; width: 54px; height: 50px; }
.choice.is-wrong { border-color: var(--coral); }
.choice.is-right { border-color: var(--indigo); background: var(--indigo-wash); }
.text-ans { width: 100%; min-height: 110px; padding: 14px 16px; border-radius: 20px; border: 2.5px solid var(--line-2); background: var(--surface); font-size: 1.1rem; resize: vertical; outline: none; }
.text-ans:focus { border-color: var(--indigo); }
.text-ans.bad { border-color: var(--coral); }
.ink-read { font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; padding: 0 4px; }
.ink-read math-span { color: var(--indigo-deep); font-size: 1.2em; }
.shake { animation: shake 280ms ease; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Feedback: Faham reacts, the words stay short */
.fb { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); line-height: 1.45; animation: open 280ms cubic-bezier(.2,.8,.2,1) both; }
.fb .faham { height: 56px !important; }
.fb b { font-weight: 700; }
.fb-wrong { background: var(--coral-wash); color: var(--ink); }
.fb-wrong b { color: var(--coral-ink); }
.fb-right { background: var(--indigo-wash); color: var(--indigo-deep); }
.fb-right .work { display: block; color: var(--ink-2); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 4px; }
.helps { display: flex; flex-wrap: wrap; gap: 8px; }
.helps button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 13px 5px 5px; white-space: nowrap; min-height: 44px; border-radius: 999px; background: var(--surface); font-weight: 500; font-size: 0.88rem; color: var(--ink); transition: transform 140ms ease; }
.helps button:active { transform: scale(0.95); }
.helps .qi { width: 32px; height: 32px; border-radius: 999px; flex: none; }
.helps .qi svg { width: 19px; height: 19px; }
.note { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); line-height: 1.55; animation: open 280ms cubic-bezier(.2,.8,.2,1) both; }
.note.hint { background: var(--gold-wash); color: var(--ink); }
.note > .nl { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--indigo); margin-bottom: 4px; }
.note.hint > .nl { color: var(--gold-ink); }
.note.me { background: var(--indigo-wash); margin-left: 32px; }
.note .terms { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.9rem; color: var(--ink-2); }
.working { color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.working::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--indigo); border-top-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.safety { padding: 18px; border-radius: var(--r-lg); background: var(--indigo); color: #fff; }
.safety strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.safety .hotline { display: block; margin-top: 10px; font-weight: 700; font-size: 2.2rem; line-height: 1; }

/* Lesson done: celebrate first */
.celebrate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 22px; border-radius: var(--r-xl); background: var(--indigo-wash); text-align: center; position: relative; overflow: hidden; }
.celebrate h1 { font-size: 1.9rem; }
.ans-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 1.4rem; color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.ans-chip .tick-draw { width: 30px; height: 30px; }
.sparks { position: absolute; inset: 0; pointer-events: none; }
.sparks i { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0; animation: spark 1100ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(200deg); } }
.learned li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; }
.learned li .tick-draw { width: 24px; height: 24px; }
.pq { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
.pq + .pq { margin-top: 8px; }
.pq .cap { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.pq .ok { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--indigo-deep); }
.pq .ok .tick-draw { width: 30px; height: 30px; }
.pq .ans-box { min-height: 62px; }
.pq .ans-box input { font-size: 1.5rem; }

/* ---------- Check my work ---------- */
.score-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); }
.score-card .big { font-weight: 700; font-size: 2rem; line-height: 1; color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.work-lines { display: flex; flex-direction: column; gap: 6px; }
.wline { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); }
.wline.err { background: var(--coral-wash); }
.wline .wm { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-3); }
.wline .wm svg { width: 32px; height: 32px; }
.wline .wm.arrow svg { width: 18px; height: 18px; }
.wline .hand { font-family: "Patrick Hand", var(--font-sans); font-size: 1.35rem; line-height: 1.3; color: var(--indigo-deep); }
.wline.err .hand { text-decoration: underline wavy var(--mark) 1.5px; text-underline-offset: 6px; }
.wline .why { font-size: 0.95rem; color: var(--ink); margin-top: 6px; }
.wline .carry-note { font-size: 0.9rem; color: var(--ink-2); margin-top: 2px; }

/* ---------- Progress ---------- */
.climb { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 14px; border-radius: var(--r-xl); background: var(--surface); }
.climb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.climb-level { font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--indigo-deep); letter-spacing: -0.02em; }
.climb-move { font-size: 0.95rem; color: var(--ink-2); text-align: right; }
.climb-move b { color: var(--teal-ink); }
.stairs { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.stairs .st { fill: var(--surface-2); transform-box: fill-box; transform-origin: bottom; animation: rise 560ms cubic-bezier(.2,.8,.2,1) both; cursor: pointer; transition: fill 200ms ease; }
.stairs .st.was { fill: var(--indigo); }
.stairs .st.now { fill: var(--teal); }
.stairs .st.sel { stroke: var(--gold); stroke-width: 3; }
.stairs text { font: 600 11px var(--font-sans); fill: var(--ink-3); text-anchor: middle; }
.stairs .marker { animation: climb 1000ms cubic-bezier(.3,.7,.3,1) 560ms both; }
.stairs .marker-tick { fill: var(--mark); }
@keyframes rise { from { transform: scaleY(0.05); } }
@keyframes climb { from { transform: translate(var(--fx), var(--fy)); } to { transform: translate(var(--tx), var(--ty)); } }
.tp-say { min-height: 1.5em; font-size: 0.95rem; color: var(--ink-2); text-align: center; }
.tp-say b { color: var(--ink); }
.legend { display: flex; justify-content: center; gap: 16px; font-size: 0.8rem; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--indigo); }
.legend i.now { background: var(--teal); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px; text-align: center; border-radius: var(--r-xl); background: var(--surface); }
.empty-state .lead { max-width: 24ch; color: var(--ink); font-weight: 500; }
.empty-state .row { width: 100%; }
.weekbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 96px; }
.daycol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-size: 0.75rem; color: var(--ink-3); }
.daycol i { width: 100%; max-width: 30px; border-radius: 8px; background: var(--surface-2); min-height: 8px; transform-origin: bottom; animation: rise 600ms cubic-bezier(.2,.8,.2,1) both; }
.daycol.on i { background: var(--plum); }
.daycol.today { color: var(--ink); font-weight: 700; }
.daycol[aria-pressed="true"] i { background: var(--gold); }
.week-say { font-size: 0.95rem; color: var(--ink-2); margin-top: 10px; min-height: 1.5em; text-align: center; }
.week-say b { color: var(--ink); }
.scrub { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.scrub input[type="range"] { width: 100%; accent-color: var(--indigo); }
.scrub .scrub-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-3); }
.scrub .scrub-row b { color: var(--ink); }
.topic { border-radius: var(--r-md); background: var(--surface-2); }
.topic + .topic { margin-top: 6px; }
.topic > button { display: grid; grid-template-columns: 1fr 108px 38px 16px; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; font-size: 0.95rem; }
.topic .cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.topic .cells i { height: 12px; border-radius: 4px; background: var(--bg); transition: background-color 260ms ease; }
.topic .cells i.was { background: var(--indigo); }
.topic .cells i.now { background: var(--teal); }
.topic .lv { text-align: right; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.topic > button .chev { transition: transform 220ms ease; }
.topic.open > button .chev { transform: rotate(90deg); }
.stds { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; animation: open 280ms cubic-bezier(.2,.8,.2,1) both; }
.std { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 0.9rem; }
.std small { display: block; color: var(--ink-3); }
.std > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg); }
.dots i.on { background: var(--indigo); }
.planrow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px; }
.planday { flex: none; width: 132px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: left; }
.planday b { display: block; font-size: 0.85rem; }
.planday small { display: block; font-size: 0.8rem; color: var(--ink-2); line-height: 1.35; margin-top: 4px; }

/* ---------- Parents ---------- */
.langseg { display: flex; padding: 4px; gap: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.langseg button { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: var(--r-sm); font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
.langseg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.letter-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-xl); background: var(--surface); }
.letterhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; background: bottom left / auto 10px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 9L8 1l7 8z' fill='%23E3A83B'/%3E%3C/svg%3E"); }
.letterhead .wm { height: 28px; }
.letterhead .date { font-size: 0.85rem; color: var(--ink-3); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats > div { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.stats .v { display: block; font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.stats .k { font-size: 0.78rem; color: var(--ink-2); }
.letter h3 { font-weight: 700; font-size: 1rem; margin: 6px 0 4px; }
.letter .to { font-weight: 600; font-size: 1.1rem; }
.letter .quote { padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-wash); font-weight: 500; }
.letter .sig { color: var(--ink-2); }
.numbered { display: flex; flex-direction: column; gap: 8px; counter-reset: n; }
.numbered li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; counter-increment: n; line-height: 1.5; }
.numbered li::before { content: counter(n); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-ink); font-weight: 700; font-size: 0.75rem; margin-top: 1px; }
.gate-q { font-weight: 700; font-size: 2.6rem; text-align: center; }

/* ---------- Sheets, toast, splash ---------- */
.scrim { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 16, 34, 0.45); animation: fade 180ms ease both; }
.modal { width: min(100%, 480px); max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--bg); color: var(--ink); animation: rise2 300ms cubic-bezier(.2,.8,.2,1) both; }
.modal h2 { font-weight: 700; font-size: 1.3rem; }
.modal .grab { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); }
.scrim.out { animation: fadeout 180ms ease forwards; }
.scrim.out .modal { animation: sink 200ms cubic-bezier(.4,0,.6,1) forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes rise2 { from { transform: translateY(60px); opacity: 0.4; } }
@keyframes sink { to { transform: translateY(50px); opacity: 0; } }
.menu-head { display: flex; align-items: center; gap: 12px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: 88vw; padding: 12px 18px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-weight: 500; animation: rise2 220ms ease both; }
.offline { padding: 8px 16px; text-align: center; font-size: 0.875rem; background: var(--gold-wash); color: var(--gold-ink); }
.skeleton { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); }
.skeleton i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2), var(--bg), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton i:nth-child(2) { width: 80%; } .skeleton i:nth-child(3) { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.engine-status { font-size: 0.85rem; color: var(--ink-3); }
.fig-photo { width: 100%; border-radius: var(--r-md); }

/* Small pictures (bar models etc.) inside notes */
.viz { display: block; width: 100%; height: auto; max-width: 360px; margin-top: 8px; overflow: visible; }
.viz-title { font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.viz-table { overflow-x: auto; margin-top: 8px; }
.viz-table table { border-collapse: collapse; width: 100%; font-size: 0.95rem; line-height: 1.4; }
.viz-table th, .viz-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.viz-table th { font-weight: 600; }

/* ---------- Screen transitions (View Transitions API) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html[data-dir="forward"]::view-transition-old(root) { animation-name: vt-out-left; }
html[data-dir="forward"]::view-transition-new(root) { animation-name: vt-in-right; }
html[data-dir="back"]::view-transition-old(root) { animation-name: vt-out-right; }
html[data-dir="back"]::view-transition-new(root) { animation-name: vt-in-left; }
html[data-dir="next"]::view-transition-old(root) { animation-name: vt-fade-out; animation-duration: 160ms; }
html[data-dir="next"]::view-transition-new(root) { animation-name: vt-rise; }
@keyframes vt-in-right { from { transform: translateX(36px); opacity: 0; } }
@keyframes vt-out-left { to { transform: translateX(-24px); opacity: 0; } }
@keyframes vt-in-left { from { transform: translateX(-36px); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(24px); opacity: 0; } }
@keyframes vt-rise { from { transform: translateY(20px); opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
.dock { view-transition-name: dock; }
.t-top { view-transition-name: ttop; }
.qcard .frame { view-transition-name: figure; }

.sheet > *, .screen > * { scroll-margin-top: 80px; scroll-margin-bottom: 160px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .bar-line.anim i { animation: none !important; } /* the bar still moves on, a step at each redraw */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .snap-demo .hl, .snap-demo .h-ring, .snap-demo .h-tick { stroke-dashoffset: 0; } .snap-demo .h-ans { opacity: 1; }
}


/* ---------- The maths field (MathLive) ---------- */
math-field.mf { display: inline-block; width: fit-content; min-width: 1.6em; max-width: 100%; padding: 4px 2px; border: 0; outline: none; background: transparent; font-size: 2rem; color: var(--indigo-deep);
  --caret-color: var(--indigo); --selection-background-color: var(--indigo-wash); --selection-color: var(--indigo-deep); --contains-highlight-background-color: transparent;
  --placeholder-color: var(--ink-3); --placeholder-opacity: 1; --smart-fence-color: var(--ink-3); --smart-fence-opacity: 0.6; --primary-color: var(--indigo); --text-font-family: var(--font-sans); }
math-field.mf::part(virtual-keyboard-toggle), math-field.mf::part(menu-toggle) { display: none; }
math-field.mf::part(container) { min-height: 1.3em; }
math-field:not(:defined) { display: inline-block; min-width: 2.4em; min-height: 1.4em; color: transparent; }
.pq math-field.mf { font-size: 1.5rem; }
math-span { color: inherit; }
math-span:not(:defined) { visibility: hidden; }

/* ---------- The maths keypad ---------- */
:root { --kb-bg: #DCE3EE; --key: #FFFFFF; --key-op: #F4F7FC; --key-act: #C9D3E3; --key-edge: #B9C4D6; --key-down: #E9EEF6; --key-h: 46px; }
:root[data-theme="dark"] { --kb-bg: #090D1A; --key: #1F2946; --key-op: #18213A; --key-act: #121931; --key-edge: #05080F; --key-down: #2A3658; }
#mkb { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--kb-bg); border-radius: 22px 22px 0 0; transform: translateY(102%); transition: transform 240ms cubic-bezier(.2,.8,.2,1); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#mkb.up { transform: none; }
#mkb[hidden] { display: block; visibility: hidden; }
.mk-in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; position: relative; }
.mk-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: var(--key-act); }
.mk-tabs button { flex: 1; min-width: 0; display: grid; place-items: center; height: 34px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mk-tabs button[aria-selected="true"] { background: var(--key); color: var(--indigo); }
.mk-main { display: flex; gap: 10px; }
.mk-ctx, .mk-pad { flex: var(--cols) 1 0; min-width: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.mk-pad { grid-auto-rows: var(--key-h); }
.mk-ctx { grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.mk { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--key); color: var(--ink); border-bottom: 2px solid var(--key-edge); font-size: 1.3rem; font-weight: 500; line-height: 1; transition: transform 80ms ease, background-color 80ms ease; }
.mk.down { transform: translateY(1px); background: var(--key-down); border-bottom-width: 1px; }
.mk-num { font-size: 1.5rem; font-variant-numeric: tabular-nums lining-nums; }
.mk-op { background: var(--key-op); color: var(--indigo); font-size: 1.55rem; }
.mk-txt.sm { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
.mk-tex { display: inline-block; font-size: 21px; color: var(--ink); pointer-events: none; white-space: nowrap; transform-origin: center; }
.mk-tex .slot { color: var(--ink-3); }
.mk-tex .ML__latex { cursor: inherit; }
.mk.has-more::after { content: ""; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); opacity: 0.7; }
.mk-act { background: var(--key-act); color: var(--ink); border-bottom-color: var(--key-edge); }
.mk-act svg { width: 24px; height: 24px; }
.mk-act.on { background: var(--key); color: var(--indigo); }
.mk-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 3.2fr); gap: 6px; height: 50px; }
.mk-go { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: var(--on-primary); border-bottom-color: var(--indigo-deep); font-size: 1.05rem; font-weight: 600; }
.mk-go svg { width: 22px; height: 22px; flex: none; }
.mk-go.down { background: var(--primary-press); }
/* Tahun 1–6: fewer keys, so bigger ones. */
.tier-p1 { --key-h: 52px; }
.tier-p1 .mk-num, .tier-p2 .mk-num { font-size: 1.65rem; }
.kind-number, .kind-fraction { --key-h: 52px; }
.kind-number .mk-num, .kind-fraction .mk-num { font-size: 1.7rem; }
.kind-fraction .mk-tex { font-size: 26px; }
.mk-letters { display: flex; flex-direction: column; gap: 6px; }
.mk-letters .mk-row { display: flex; gap: 5px; justify-content: center; }
.mk-letters .mk { flex: 0 1 calc((100% - 45px) / 10); height: var(--key-h); }
.mk-letters .mk-act, .mk-letters .mk-alpha { flex: 1.4 1 0; font-size: 0.95rem; font-weight: 600; }
.mk-letters .mk-tex { font-size: 22px; }
.mk-more { position: absolute; z-index: 2; display: flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--surface); box-shadow: 0 6px 22px rgba(10, 16, 34, 0.22); animation: mkpop 140ms ease both; }
@keyframes mkpop { from { transform: translateY(6px) scale(0.96); opacity: 0; } }
.mk-more .mk { width: 54px; height: 50px; background: var(--key-op); }
.mk-more .mk::after { display: none; }
/* While the keypad is up it carries the screen's main action, so the dock steps aside. */
.kb-open .dock { visibility: hidden; }
.kb-open body { padding-bottom: calc(var(--kb-h, 300px) + 16px); }

/* ---------- The equation editor (for questions written in words) ---------- */
.eqx { position: fixed; inset: 0; z-index: 44; }
.eqx-scrim { position: absolute; inset: 0; background: rgba(10, 16, 34, 0.45); opacity: 0; transition: opacity 180ms ease; }
.eqx-panel { position: absolute; left: 0; right: 0; bottom: var(--kb-h, 300px); max-width: 572px; margin: 0 auto; padding: 14px 16px 16px; border-radius: 26px 26px 0 0; background: var(--surface); transform: translateY(16px); opacity: 0; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; }
.eqx.open .eqx-scrim, .eqx.open .eqx-panel { opacity: 1; }
.eqx.open .eqx-panel { transform: none; }
.eqx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.eqx-head h2 { font-size: 1.15rem; }
.eqx-field { display: flex; align-items: center; min-height: 88px; padding: 8px 14px; border-radius: 20px; border: 2.5px solid var(--indigo); background: var(--bg); }
.eqx-field math-field.mf { width: 100%; font-size: 1.9rem; }
.eqx ~ #mkb, body:has(.eqx) #mkb { border-radius: 0; }
@media (min-width: 600px) { #mkb { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { #mkb, .eqx-panel, .eqx-scrim { transition: none; } .mk-more { animation: none; } }

/* Progress for a year without a syllabus map: the week is the hook, then the questions asked. */
.week-hook .weekbars { height: 140px; }
.week-hook .week-say { font-size: 1.05rem; }
.qlist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.qrow { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 8px 0; }
.qrow .qi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.qrow .qi svg { width: 20px; height: 20px; }
.qrow b { display: block; font-weight: 600; }
.qrow small { display: block; color: var(--ink-3); font-size: 0.82rem; margin-top: 2px; }
.center { text-align: center; }

/* ---------- Home: hook, ways to ask, one next thing, samples, the week ---------- */
.home { gap: 14px; }
.home-sec { display: flex; flex-direction: column; gap: 10px; }
.sec-h { font-size: 1.02rem; font-weight: 600; color: var(--ink); padding: 4px 2px 0; }
.next-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.next-card:active, .sample-card:active, .week-card:active, .row-card:active { transform: scale(0.97); }
.next-card .qi { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.next-card .qi svg { width: 26px; height: 26px; }
.next-card small { display: block; font-size: 0.82rem; color: var(--ink-2); }
.next-card b { display: block; font-weight: 600; line-height: 1.3; margin-top: 1px; }
.next-card .go { padding: 9px 16px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 0.95rem; }
.steps-bar { display: flex; gap: 4px; margin-top: 8px; }
.steps-bar i { flex: 1; max-width: 34px; height: 5px; border-radius: 3px; background: var(--surface-2); }
.steps-bar i.d { background: var(--indigo); }
.steps-bar i.n { background: var(--gold); }
.samples { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 2px; }
.samples::-webkit-scrollbar { display: none; }
.sample-card { scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 14px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.sample-card .thumb { display: block; width: 100%; aspect-ratio: 120 / 84; margin-bottom: 6px; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.sample-card .thumb svg { width: 100%; height: 100%; display: block; }
.sample-card b { font-weight: 600; font-size: 0.95rem; line-height: 1.3; padding: 0 4px; }
.sample-card small { font-size: 0.8rem; color: var(--ink-3); padding: 0 4px; }
.week-card { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 14px 16px 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.wk-head { display: flex; align-items: center; gap: 8px; }
.wk-head b { font-weight: 600; }
.wk-head .chev { margin-left: auto; color: var(--ink-3); }
.streak { padding: 3px 10px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 0.8rem; font-weight: 600; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wk-day i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: #fff; }
.wk-day i svg { width: 18px; height: 18px; }
.wk-day.on i { background: var(--plum); }
.wk-day.today i { box-shadow: inset 0 0 0 2.5px var(--plum); }
.wk-day.today.on i { box-shadow: none; }
.wk-day small { font-size: 0.75rem; color: var(--ink-3); }
.wk-day.today small { color: var(--ink); font-weight: 700; }
.wk-say { font-size: 0.92rem; color: var(--ink-2); }
.wk-say b { color: var(--ink); }
.row-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.row-card .qi { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; }
.row-card .qi svg { width: 24px; height: 24px; }
.row-card b { display: block; font-weight: 600; }
.row-card small { display: block; font-size: 0.85rem; color: var(--ink-2); margin-top: 2px; }
.row-card .chev, .week-card .chev { width: 20px; height: 20px; color: var(--ink-3); }

/* Progress before the first answer: an invitation, then this year's topics. */
.start-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px 18px; border-radius: var(--r-xl); background: var(--surface); text-align: center; }
.start-card h2 { font-size: 1.45rem; }
.start-card p { color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.year-topics { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.year-topics li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-weight: 500; }
.year-topics li:first-child { border-top: 0; }
.year-topics .num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--plum-wash); color: var(--plum-ink); font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* Parent PIN: big keys anyone can use, no maths needed. */
.pin-screen { align-items: center; text-align: center; }
.pin-dots { display: flex; gap: 18px; justify-content: center; margin: 6px 0 10px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-2); }
.pin-dots i.on { background: var(--indigo); border-color: var(--indigo); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; justify-content: center; }
.pin-key { width: 76px; height: 76px; border-radius: 50%; background: var(--surface); font-size: 1.7rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; transition: transform 90ms ease, background-color 90ms ease; }
.pin-key:active { transform: scale(0.94); background: var(--surface-2); }
.pin-key.act { background: transparent; color: var(--ink-2); }
.pin-key.act svg { width: 26px; height: 26px; }
.pin-key:disabled { opacity: 0.4; }

/* ---------- Tonton: the animated walkthrough ---------- */
.watch { gap: 14px; }
.w-segs { flex: 1; display: flex; gap: 5px; }
.w-segs button { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); padding: 0; }
.w-segs button.d { background: var(--indigo); }
.w-segs button.n { background: linear-gradient(90deg, var(--indigo) 0 30%, var(--gold) 30% 100%); }
.iconbtn.off { color: var(--ink-3); }
.w-stage { animation: open 360ms cubic-bezier(.2,.8,.2,1) both; }
.w-q p { font-size: 1.1rem; line-height: 1.55; padding: 6px; }
.w-caption { display: flex; flex-direction: column; gap: 8px; animation: open 300ms ease both; }
.w-work { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--indigo-wash); animation: open 420ms cubic-bezier(.2,.8,.2,1) both; }
.w-work p { line-height: 1.5; }
.w-answer { display: flex; align-items: center; gap: 12px; font-size: 1.8rem; color: var(--indigo-deep); }
.w-answer .tick-draw { width: 40px; height: 40px; }
.w-reply { display: flex; flex-direction: column; gap: 8px; animation: open 300ms ease both; }
.w-q-me { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--coral-wash); }
.w-a { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 18px; background: var(--surface); }
.w-a p { line-height: 1.5; }
.w-ask { display: flex; flex-direction: column; gap: 10px; }
.w-controls { flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.w-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); }
.w-btn svg { width: 24px; height: 24px; }
.w-btn:disabled { opacity: 0.35; }
.w-play { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); transition: transform 120ms ease; }
.w-play:active { transform: scale(0.94); }
.w-play svg { width: 30px; height: 30px; }
.w-ask-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--surface); font-weight: 600; }
.w-ask-btn .qi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }

/* ---------- Buku nota ---------- */
.nb-group { display: flex; flex-direction: column; gap: 8px; }
.nb-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform 140ms ease; }
.nb-row:active { transform: scale(0.98); }
.nb-subj { font-size: 0.78rem; font-weight: 600; color: var(--plum-ink); background: var(--plum-wash); padding: 2px 9px; border-radius: 999px; }
.nb-row b { font-weight: 600; margin-top: 4px; }
.nb-row small { color: var(--ink-2); font-size: 0.88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 0.8rem; color: var(--ink-3); }
.nb-done { display: inline-flex; align-items: center; gap: 4px; color: var(--indigo); font-weight: 600; }
.nb-done .tick-draw { width: 16px; height: 16px; }
.nb-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.nb-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.nb-step > .num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-wash); color: var(--indigo); font-weight: 700; }
.nb-step > div { display: flex; flex-direction: column; gap: 6px; }
.nb-prompt { font-weight: 600; line-height: 1.4; }
.nb-given { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--indigo-deep); }
.nb-given .tick-draw { width: 26px; height: 26px; }
.nb-given small { font-size: 0.78rem; color: var(--ink-3); }
.year-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); background: var(--gold-wash); }
.year-card b { display: block; font-weight: 600; margin-bottom: 8px; }
.year-card .row { gap: 8px; }
.pin-screen .setup-head { flex-direction: column; align-items: center; text-align: center; gap: 6px; width: 100%; }
.pin-screen .setup-head h1 { font-size: 1.6rem; }
/* Siblings on one phone */
.kids { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kid { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); flex: none; }
.kid .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-wash); color: var(--gold-ink); font-weight: 700; }
.kid small { display: block; font-size: 0.75rem; color: var(--ink-3); }

/* V7: accounts, credits */
.mydid { background: var(--surface); border-radius: var(--r-lg, 20px); padding: 18px; display: grid; gap: 14px; margin-bottom: 18px; }
.mydid-head { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.mydid-head svg { width: 22px; height: 22px; color: var(--indigo); }
.mydid .sim { margin-left: auto; font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.mydid .input { background: var(--bg); }
.verify-title { margin: 8px 0 6px; }
.verify-sub { margin: 0 0 18px; }
.form-err { color: var(--red-pen, #D9412F); font-weight: 600; margin: 12px 0 4px; }
.credits-line { margin: -4px 4px 8px; font-size: 0.9rem; color: var(--ink-2); }
.family-card { background: var(--surface); border-radius: var(--r-lg, 20px); padding: 18px; margin: 16px 0; }
.family-card h2 { margin: 0 0 4px; }
table.family { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 0.9rem; }
table.family th { text-align: left; font-weight: 600; font-size: 0.78rem; color: var(--ink-2); padding: 0 8px 8px 0; vertical-align: bottom; }
table.family td { padding: 10px 8px 10px 0; border-top: 1px solid var(--surface-2); vertical-align: top; font-variant-numeric: tabular-nums; }
table.family td small { display: block; color: var(--ink-2); font-size: 0.78rem; }
.logout { margin: 24px 0 8px; }
.app-version { margin: 14px 0 0; text-align: center; font-size: 0.75rem; color: var(--ink-2); }

/* Faham at work (see POSES in art.js): props in hand, movement on the prop */
.faham .f-arm-edge { fill: none; stroke: color-mix(in srgb, var(--f-body) 55%, #000); stroke-width: 10.4; stroke-linecap: round; }
.faham .f-edge { fill: color-mix(in srgb, var(--f-body) 55%, #000); }
.faham .p-sheet { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.4; }
.faham .p-lines { fill: none; stroke: var(--indigo-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faham .p-page { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 1.2; transform-box: fill-box; transform-origin: 0% 50%; }
.faham .p-spine { stroke: var(--ink-2); stroke-width: 1.2; }
.faham .p-step { fill: color-mix(in srgb, var(--indigo) 22%, var(--surface)); stroke: var(--indigo); stroke-width: 1.4; }
.faham .p-step.s3 { fill: color-mix(in srgb, var(--gold) 45%, var(--surface)); stroke: #B07A1E; }
.faham .p-steptick, .faham .p-redtick { fill: none; stroke: #D9412F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.faham .p-pen { stroke: #D9412F; stroke-width: 3.4; stroke-linecap: round; }
.faham .p-pentip { stroke: #16203A; stroke-width: 2.2; stroke-linecap: round; }
.faham .p-handle { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.faham .p-lens { fill: color-mix(in srgb, var(--teal) 16%, #fff); }
.faham .p-rim { fill: none; stroke: var(--ink-2); stroke-width: 2.4; }
.faham .p-photo { fill: color-mix(in srgb, var(--teal) 55%, var(--surface)); }
.faham .p-sun { fill: var(--gold); }
.faham .f-look, .faham .p-bigeye, .faham .p-card { transform-box: fill-box; transform-origin: center; }

.faham-read .f-look.scan { animation: fa-scan 2.4s ease-in-out infinite; }
.faham-read .p-hold, .faham-find .p-hold { transform-box: view-box; transform-origin: 60px 104px; animation: fa-hold 3s ease-in-out infinite; }
.faham-find .p-page { animation: fa-flip 2.2s cubic-bezier(.5,0,.3,1) infinite; }
.faham-draw .p-step { transform-box: fill-box; transform-origin: 50% 100%; animation: fa-drop 3.6s cubic-bezier(.3,1.3,.5,1) infinite both; }
.faham-draw .p-step.s2 { animation-name: fa-drop2; }
.faham-draw .p-step.s3 { animation-name: fa-drop3; }
.faham-draw .p-steptick { stroke-dasharray: 16; animation: fa-tickon 3.6s ease-out infinite; }
.faham-check .p-redtick { stroke-dasharray: 11; stroke-dashoffset: 11; }
.faham-check .p-redtick.t1 { animation: fa-t1 3.6s linear infinite; }
.faham-check .p-redtick.t2 { animation: fa-t2 3.6s linear infinite; }
.faham-check .p-redtick.t3 { animation: fa-t3 3.6s linear infinite; }
.faham-check .p-penarm { transform-box: view-box; transform-origin: 80px 94px; animation: fa-swing 3.6s ease-in-out infinite; }
.faham-look .p-glass { transform-box: view-box; transform-origin: 80px 94px; animation: fa-peer 3.2s ease-in-out infinite; }
.faham-look .p-bigeye { animation: fa-roll 3.2s ease-in-out infinite; }
.faham-compare .f-look.between { animation: fa-between 2.8s steps(1) infinite; }
.faham-compare .p-card.a { animation: fa-cardA 2.8s steps(1) infinite; }
.faham-compare .p-card.b { animation: fa-cardB 2.8s steps(1) infinite; }

@keyframes fa-scan { 0%, 100% { transform: translate(-2.5px, 0); } 45% { transform: translate(2.5px, 0); } 50% { transform: translate(-2.5px, 3px); } 95% { transform: translate(2.5px, 3px); } }
@keyframes fa-hold { 50% { transform: translateY(-1.5px); } }
@keyframes fa-flip { 0%, 20% { transform: scaleX(1); opacity: 1; } 70% { transform: scaleX(-1); opacity: 1; } 85%, 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes fa-drop { 0% { transform: translateY(-14px); opacity: 0; } 10%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-drop2 { 0%, 14% { transform: translateY(-14px); opacity: 0; } 24%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-drop3 { 0%, 28% { transform: translateY(-14px); opacity: 0; } 38%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-tickon { 0%, 44% { stroke-dashoffset: 16; opacity: 1; } 56%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* The pen tip visits each line in turn (a swing from the shoulder); each tick draws as the tip passes it. */
@keyframes fa-swing { 0%, 6% { transform: rotate(17.9deg); } 22%, 30% { transform: rotate(0deg); } 46%, 54% { transform: rotate(-16.8deg); } 75%, 100% { transform: rotate(17.9deg); } }
@keyframes fa-t1 { 0%, 6% { stroke-dashoffset: 11; opacity: 1; } 16%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-t2 { 0%, 30% { stroke-dashoffset: 11; opacity: 1; } 40%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-t3 { 0%, 54% { stroke-dashoffset: 11; opacity: 1; } 64%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-peer { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes fa-roll { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-2px, 1px); } 65% { transform: translate(2px, -1px); } }
@keyframes fa-between { 0% { transform: translate(-4px, 0); } 50% { transform: translate(4px, 0); } }
@keyframes fa-cardA { 0% { transform: translateY(-2px); } 50% { transform: none; } }
@keyframes fa-cardB { 0% { transform: none; } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .faham [class*="p-"], .faham .f-look { animation: none !important; }
  .faham .p-redtick, .faham .p-steptick { stroke-dashoffset: 0; }
}

/* Earlier steps can be opened again */
.done-steps .done-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; min-height: 32px; border: 0; border-radius: 999px; background: var(--indigo-wash); color: var(--indigo-deep); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.done-steps .done-chip:active { transform: scale(0.97); }
.review-ans { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.q-photo { display: block; width: 100%; border-radius: var(--r-md); margin: 4px 0 6px; }
.q-photo-cap { margin: 0 0 14px; }

/* Parts of a question, and what to fix in a photo */
.parts-pick { display: grid; justify-items: center; gap: 10px; text-align: center; }
.parts-pick .list { width: 100%; text-align: left; }
.list-row.part-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.part-row > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.part-row small { color: var(--ink-2); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.capture-note { width: 100%; text-align: left; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border-radius: var(--r-md); padding: 14px 16px; margin: 12px 0; }
.capture-note ul { margin: 8px 0 10px; padding-left: 18px; display: grid; gap: 8px; }
.capture-note li small { display: block; color: var(--ink-2); margin-top: 2px; }
.next-part { margin-bottom: 10px; }
.link-btn { background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 600; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.verify .field + .small { margin-top: 6px; }
.tdots .tdot { flex: 1; display: flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.tdots .tdot i { flex: 1; }
.done-steps .done-chip::after { content: "›"; margin-left: 2px; opacity: .6; font-weight: 700; }
.char-keys { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.char-keys .ck { min-width: 36px; min-height: 38px; padding: 0 6px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer; }
.char-keys .ck:active { transform: scale(0.95); background: var(--indigo-wash); }
.helps.helps-2 { grid-template-columns: 1fr 1fr; }
.conv:empty { display: none; }
.top .top-r { display: flex; align-items: center; gap: 8px; }
.top .stage-tag { padding: 3px 8px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; }
.top .ver { font-size: 0.72rem; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.top .ver-up { border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px; background: var(--indigo); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.conv .note.flash { animation: note-flash 1.2s ease-out 1; }
@keyframes note-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); } 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .conv .note.flash { animation: none; outline: 3px solid var(--gold); } }

/* ---------------- V8: messages, history pages, personal notes, the big writing pad ---------------- */

/* Text can be selected and copied everywhere it is read (buttons and keys stay tap-only). */
.msg-b, .prompt, .q-full, .qtxt, .letter, .transcript, .nb-prompt, .nb-given, .w-caption, .mine-text, .work-lines .hand, .fb p { user-select: text; -webkit-user-select: text; }

/* A conversation: bubbles with even spacing, newest last. */
.conv { display: flex; flex-direction: column; gap: 12px; }
.conv-more { align-self: center; border: 0; border-radius: 999px; padding: 8px 16px; min-height: 40px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.msg { padding: 12px 16px 14px; border-radius: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; max-width: 88%; margin-left: 0; background: var(--indigo-wash); border-bottom-right-radius: 6px; }
.msg.tutor { border-bottom-left-radius: 6px; }
.msg.mine { background: var(--plum-wash); border: 1px dashed color-mix(in srgb, var(--plum) 45%, transparent); }
.msg-h { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: -2px -6px 6px 0; }
.msg-h .nl { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--indigo); }
.msg.hint .msg-h .nl { color: var(--gold-ink); }
.msg.mine .msg-h .nl { color: var(--plum-ink); }
.msg.me .msg-h .nl { color: var(--indigo-deep); }
.msg-h .nl .ic, .msg-h .nl svg { width: 17px; height: 17px; }
.msg-h time { margin-left: auto; font-size: 0.74rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-copy, .msg-del { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.msg-copy svg, .msg-del svg { width: 17px; height: 17px; }
.msg-copy:active, .msg-del:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.msg-b > * { margin: 0; }
.msg-b > * + * { margin-top: 10px; }
.msg-b .muted { color: var(--ink-2); }
.msg-b .terms { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.9rem; color: var(--ink-2); }
.msg-b .fig, .msg-b .card { margin-top: 10px; }
.mine-text { white-space: pre-wrap; }
.mine-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mine-pics img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff; }
.mine-pics.edit figure { position: relative; margin: 0; }
.mine-pics.edit .msg-del { position: absolute; top: 4px; right: 4px; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.mine-audio { display: flex; align-items: center; gap: 10px; }
.mine-audio audio { flex: 1; min-width: 0; height: 40px; }
.mine-audio span { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lesson-notes { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.link-btn.note-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.link-btn.note-link svg { width: 18px; height: 18px; }
.btn > svg.ic { width: 20px; height: 20px; }

/* Full-screen sheets: the writing pad and the personal-note editor. */
.scrim.full { align-items: stretch; }
.modal.full { width: 100%; max-width: 760px; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px; }
.full-h { display: flex; align-items: center; gap: 10px; }
.full-h h2 { flex: 1; font-size: 1.15rem; }
.full-h .btn { min-height: 44px; padding: 0 18px; }
.ink-pad.big { flex: 1; display: flex; min-height: 0; }
.ink-canvas.big { width: 100%; height: auto; min-height: 340px; flex: 1; }
.screen .ink-canvas.big { height: calc(100dvh - 330px); min-height: 360px; }
.pad-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.pad-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.pad-btn svg { width: 18px; height: 18px; }
.pad-btn:disabled { opacity: 0.4; cursor: default; }
.pad-pages { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pad-pages .pad-btn { padding: 0; width: 44px; }
.pad-pages .pad-btn svg { width: 22px; height: 22px; }
.mine-input { width: 100%; min-height: 34dvh; flex: 1; resize: vertical; padding: 16px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 1.05rem; line-height: 1.6; }
.mine-input:focus { outline: none; border-color: var(--plum); }
.mine-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mine-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 8px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 600; text-align: center; cursor: pointer; }
.mine-tool svg { width: 24px; height: 24px; }
.mine-tool.rec { background: var(--coral-wash); color: var(--coral-ink); animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--coral) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mine-tool.rec { animation: none; } }

/* Buku nota: times on rows, pages of the list. */
.nb-subj { display: flex; align-items: center; gap: 8px; width: 100%; }
.nb-subj time { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nb-meta span svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.nb-more { margin-top: 6px; }
.nb-end { text-align: center; margin: 8px 0 0; }
.nb-when { margin: 0; }
.w-controls .w-btn svg.ic { width: 24px; height: 24px; }

/* A plain number box inside an answer box (fixing a line in a work check, practice): no inner frame. */
.ans-box > input { flex: 1; min-width: 0; height: 56px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 2rem; font-weight: 700; color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.ans-box > input::placeholder { color: var(--ink-3); font-weight: 500; }

/* Every tap answers at once: no double-tap-zoom wait, and a small press on everything tappable. */
button, a, label.mine-tool, [data-act] { touch-action: manipulation; }
.list-row, .chip, .iconbtn, .mine-tool, .pad-btn, .cam-side, .seg button, .cam-tabs button, .w-btn, .conv-more, .nb-more, .opt, .msg-copy, .msg-del, .part-row, .subject-chip, .lang-tiles .choice-tile {
  transition: transform 110ms cubic-bezier(.2,.8,.2,1), background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.list-row:active, .chip:active, .mine-tool:active, .pad-btn:active:not(:disabled), .cam-side:active, .seg button:active, .cam-tabs button:active, .conv-more:active, .nb-more:active, .opt:active, .part-row:active { transform: scale(0.97); }
.iconbtn:active, .w-btn:active { transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) { .list-row:active, .chip:active, .mine-tool:active, .pad-btn:active, .cam-side:active, .seg button:active, .cam-tabs button:active, .conv-more:active, .nb-more:active, .opt:active, .part-row:active, .iconbtn:active, .w-btn:active { transform: none; } }

/* Finish screen: one clear next move, then the quieter ones. */
.done-actions { margin-top: 4px; }
.done-actions .row { display: flex; gap: 8px; }
.done-actions .row .btn { flex: 1; }
.done-actions .btn svg { width: 20px; height: 20px; }

/* While a lesson is written: what was recognised, as soon as it is known. */
.build-stage .placed { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.build-stage .placed.fresh { animation: placedIn 420ms cubic-bezier(.2,.8,.2,1) both; }
.build-stage .placed-topic { font-size: 0.95rem; color: var(--ink-2); text-align: center; max-width: 30ch; }
@keyframes placedIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .build-stage .placed.fresh { animation: none; } }

/* Work check: the line being fixed is outlined, and the fix shows that line's own working. */
.wline.fixing { outline: 2.5px solid var(--indigo); outline-offset: -2.5px; }
.fix-q { font-family: "Patrick Hand", var(--font-sans); font-size: 1.5rem; line-height: 1.3; margin: 2px 0 10px; color: var(--indigo-deep); }
.done-actions .row .btn { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
/* A handwritten page is shown whole (it is mostly white paper), a photo fills its tile. */
.mine-pics .page img { object-fit: contain; aspect-ratio: 3 / 4; border: 1px solid var(--line); }

/* The pupil's own photo stays one tap away on every step (a passage, a table, the whole page). */
.qcard .qhead { display: flex; gap: 12px; align-items: flex-start; }
.qcard .qhead .qtxt { flex: 1; min-width: 0; }
.qthumb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: var(--indigo); transition: transform 110ms cubic-bezier(.2,.8,.2,1); }
.qthumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.qthumb:active { transform: scale(0.94); }

/* A photo that could not be used: what is wrong, how to fix it, and the photo itself. */
.build-oops { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 8px; }
.build-oops h1 { font-size: 1.4rem; line-height: 1.3; max-width: 22ch; }
.oops-tips { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; border-radius: var(--r-lg); background: var(--gold-wash); }
.oops-tips li { display: flex; flex-direction: column; gap: 2px; }
.oops-tips li span { font-weight: 600; color: var(--ink); }
.oops-tips li small { color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.oops-photo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oops-photo img { max-width: 160px; max-height: 160px; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }
.oops-photo figcaption { font-size: 0.8rem; color: var(--ink-3); }

/* The handle looks like it can be pulled, because it can. */
.modal:not(.full) { overscroll-behavior: contain; }
.modal .grab { width: 48px; height: 5px; margin-bottom: 2px; }
/* Two buttons side by side never wrap their words; the main one gets the extra room. */
.dock .row .btn { white-space: nowrap; }
.dock .row .btn-primary { flex: 1.35; }

/* A saved work check: the pupil's own correction under the line. */
.fixed-as { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--indigo-deep); font-size: 0.95rem; }
.fixed-as svg { width: 18px; height: 18px; }

/* The writing pad's bar: tools on the left, pages on the right; on a narrow phone the pages move under
   the tools as one group, never one button on its own. */
.pad-tools, .pad-pagebox { display: flex; align-items: center; gap: 6px; }
.pad-pagebox { margin-left: auto; }
.pad-bar { row-gap: 8px; }
/* "Tahun 6" and "Tingkatan 2" stay on one line under the child's name. */
table.family td small { white-space: nowrap; }
table.family td:first-child { min-width: 6.5em; }

/* ---------- 0.15: small questions, the moment of a right answer, chat, voice ---------- */

/* Small questions lead up to the pupil's own question, which is marked with a star. */
.step-tag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: -8px; min-height: 36px; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.st-pill.goal { background: var(--gold-wash); color: var(--gold-ink); }
.st-pill svg { width: 16px; height: 16px; }
.st-skip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-left: auto; padding: 0 2px 0 10px; font-size: 0.86rem; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.st-skip svg { width: 15px; height: 15px; flex: none; }
.st-skip:active { opacity: 0.6; }
.buildup-intro { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 10px 14px 10px 8px; border-radius: var(--r-lg); background: var(--gold-wash); color: var(--ink); font-size: 0.92rem; line-height: 1.45; animation: open 280ms cubic-bezier(.2,.8,.2,1) both; }
.buildup-intro .faham { height: 48px !important; }
.qcard.full .qtxt { display: block; -webkit-line-clamp: unset; overflow: visible; color: var(--ink); }
.tdots i.goal { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: var(--ink-3); overflow: visible; }
.tdots i.goal svg { width: 16px; height: 16px; }
.tdots i.goal.n { background: var(--gold-wash); color: var(--gold-ink); box-shadow: 0 0 0 2px var(--gold); }
.tdots i.goal.n::after { display: none; }
.tdots i.goal.d { background: var(--gold); color: #fff; }
.tdots i.goal.d .ic .w { opacity: 0.9; }
.tdots .tdot:has(i.goal) { flex: none; }
.tdots i.sk { background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px); }
.done-steps .done-chip.skipped { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); }
.nb-skipped { display: flex; align-items: center; gap: 6px; }
.nb-skipped svg { width: 16px; height: 16px; }

/* A right answer: the box bounces, confetti flies from the tick, the words pop, the dock says what is next. */
.burst { position: absolute; right: 32px; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.burst i { position: absolute; left: -4px; top: -5px; width: 8px; height: 10px; border-radius: 2px; opacity: 0; animation: confetti 950ms cubic-bezier(.15,.7,.3,1) both; }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.5); } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 30px)) rotate(var(--r)) scale(1); } }
.win-pop { animation: winpop 560ms cubic-bezier(.3,1.6,.5,1) both, winglow 900ms ease-out both; }
@keyframes winpop { 0% { transform: scale(.97); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes winglow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--indigo) 38%, transparent); } 100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--indigo) 0%, transparent); } }
.fb-right .praise { display: block; font-size: 1.04rem; letter-spacing: -0.01em; }
.fb-right .praise.big { font-size: 1.22rem; }
.fb-right.win .praise { animation: praisein 460ms cubic-bezier(.3,1.7,.5,1) 100ms both; transform-origin: left center; }
@keyframes praisein { from { transform: scale(.55); opacity: 0; } }
.win-line { display: flex; align-items: center; gap: 10px; padding: 0 2px 2px; font-weight: 600; color: var(--indigo-deep); }
.win-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); flex: none; }
.win-badge svg { width: 18px; height: 18px; }
.win-txt { flex: 1; font-size: 0.95rem; line-height: 1.3; }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.streak svg { width: 18px; height: 18px; }
.streak .ic .a { stroke: var(--coral); }
.dock.fresh { animation: dockup 380ms cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes dockup { from { transform: translate(-50%, 26px); opacity: 0; } }
.dock.fresh .win-badge { animation: badgepop 520ms cubic-bezier(.3,1.7,.5,1) 90ms both; }
.dock.fresh .streak { animation: badgepop 520ms cubic-bezier(.3,1.7,.5,1) 260ms both; }
@keyframes badgepop { from { transform: scale(0) rotate(-35deg); } }
.btn .ic { flex: none; }
.pq .ok { position: relative; }
.praise-sm { margin-left: 8px; color: var(--indigo); font-size: 0.95rem; }

/* Talking to the tutor looks like a chat: a message bar with its own row. */
.chatbar { display: flex; gap: 8px; align-items: center; }
.chatbar .cb-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); text-align: left; color: var(--ink-3); font-size: 0.95rem; transition: transform 140ms ease, box-shadow 140ms ease; }
.chatbar .cb-main:active { transform: scale(0.985); box-shadow: inset 0 0 0 2px var(--coral); }
.chatbar .cb-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-wash); color: var(--coral-ink); flex: none; }
.chatbar .cb-ic svg { width: 23px; height: 23px; }
.chatbar .cb-ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatbar .cb-mic { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); transition: transform 140ms ease; }
.chatbar .cb-mic:active { transform: scale(0.92); }
.chatbar .cb-mic svg { width: 24px; height: 24px; }
.ask-sub { margin-top: -6px; }
.mic-btn { flex: 0 0 64px !important; padding: 0 !important; }

/* Voice: a meter that follows the voice, a timer, and a word on whether i-Faham can hear. */
.vu { display: inline-flex; align-items: center; gap: 4px; height: 26px; }
.vu i { display: block; width: 5px; height: 100%; border-radius: 3px; background: var(--coral); transform: scaleY(.16); transition: transform 70ms linear; }
.vu-lg { height: 46px; gap: 6px; }
.vu-lg i { width: 7px; border-radius: 4px; }
.vu-sm { height: 22px; gap: 3px; }
.vu-sm i { width: 4px; background: currentColor; }
html[data-voice="quiet"] .vu i { background: var(--ink-3); }
.vu-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.vu-time { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.vu-hint { min-height: 1.5em; text-align: center; color: var(--ink-2); }
.vu-hint span { display: none; }
html:not([data-voice]) .vu-hint .vh-on, html[data-voice="on"] .vu-hint .vh-on, html[data-voice="heard"] .vu-hint .vh-heard, html[data-voice="quiet"] .vu-hint .vh-quiet { display: inline; }
.vu-hint .vh-quiet { color: var(--coral-ink); font-weight: 600; }
.mic.live { background: var(--coral); animation: none; box-shadow: 0 0 0 calc(4px + var(--lvl, 0) * 18px) color-mix(in srgb, var(--coral) 22%, transparent); transition: box-shadow 90ms linear; }
.voice-pad.on { gap: 22px; }
.voice-pad.on .mic { margin: 6px 0 4px; }
.mic:disabled { opacity: 0.55; }
.voice-pad .working { justify-content: center; }
.rec-panel { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--coral-wash); }
.rec-panel .working { justify-content: center; }
.mine-tool.rec { animation: none; }
.mine-tool.rec > span { display: inline-flex; align-items: center; gap: 4px; }
.mine-tool.rec > span svg { width: 14px; height: 14px; }
.mine-tool.rec .vu-time { color: inherit; min-width: 0; }

/* A speaker that is reading aloud shows its sound waves moving; tapping it again stops it. */
:is(html[data-speaking="speakStep"] [data-act="speakStep"], html[data-speaking="speakQuestion"] [data-act="speakQuestion"], html[data-speaking="pSpeak"] [data-act="pSpeak"], html[data-speaking="wVoice"] [data-act="wVoice"]) { background: var(--indigo-wash); color: var(--indigo); }
:is(html[data-speaking="speakStep"] [data-act="speakStep"], html[data-speaking="speakQuestion"] [data-act="speakQuestion"], html[data-speaking="pSpeak"] [data-act="pSpeak"], html[data-speaking="wVoice"] [data-act="wVoice"]) .sw1 { animation: soundwave 900ms ease-in-out infinite; }
:is(html[data-speaking="speakStep"] [data-act="speakStep"], html[data-speaking="speakQuestion"] [data-act="speakQuestion"], html[data-speaking="pSpeak"] [data-act="pSpeak"], html[data-speaking="wVoice"] [data-act="wVoice"]) .sw2 { animation: soundwave 900ms ease-in-out 180ms infinite; }
@keyframes soundwave { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .burst, .win-pop, .fb-right.win .praise, .dock.fresh, .dock.fresh .win-badge, .dock.fresh .streak { animation: none !important; }
  .burst { display: none; }
  .vu i { transition: none; }
}

/* Shading a region by tapping the diagram */
.frame.pick { padding: 10px 8px 6px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 2px var(--indigo-wash); --fig-max-h: 40vh; cursor: pointer; }
.frame.pick:active { box-shadow: inset 0 0 0 2px var(--indigo); }
.frame.pick-done { padding: 10px 8px 6px; border-radius: var(--r-lg); background: var(--surface); --fig-max-h: 34vh; }
.pick-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -8px; font-size: 0.9rem; color: var(--ink-2); text-align: center; }
.pick-hint svg { width: 16px; height: 16px; color: var(--indigo); flex: none; }
.choice.is-picked { border-color: var(--indigo); background: var(--indigo-wash); }
.choice.is-picked .letter { background: var(--indigo); color: #fff; }

/* Confetti never widens the page. */
.sheet, .screen { overflow-x: clip; }
.ans-box .written.long { font-size: 1.3rem; line-height: 1.3; }

/* ---------- Latih tubi ---------- */
.t-top .t-title { flex: 1; text-align: center; font-weight: 700; font-size: 1.02rem; }
.c-offer-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border-radius: var(--r-lg); background: var(--surface); text-align: left; box-shadow: inset 0 0 0 1.5px var(--gold-wash); transition: transform 140ms ease; }
.c-offer-card:active { transform: scale(0.98); }
.c-offer-card .qi { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; }
.c-offer-card .qi svg { width: 24px; height: 24px; }
.c-offer-card b { display: block; font-size: 1rem; }
.c-offer-card small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.86rem; line-height: 1.4; }
.c-offer-card.warm { box-shadow: inset 0 0 0 2px var(--gold); background: color-mix(in srgb, var(--gold-wash) 55%, var(--surface)); }
.course { gap: 18px; }
.c-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: var(--r-xl); background: var(--surface); }
.c-hero.all-done { background: var(--indigo-wash); }
.c-hero-top { display: flex; align-items: center; gap: 12px; }
.c-hero-top .faham { height: 64px !important; flex: none; }
.c-hero small { color: var(--ink-2); font-weight: 600; font-size: 0.84rem; }
.c-hero h1 { font-size: 1.6rem; line-height: 1.15; }
.c-goal { color: var(--ink); line-height: 1.5; }
.c-from { font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
.c-from span { color: var(--ink); }
.c-done-line { font-weight: 600; color: var(--indigo-deep); }
.skel-line { display: block; height: 1em; width: 80%; border-radius: 6px; background: linear-gradient(90deg, var(--line-2), var(--surface-2), var(--line-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.c-strength { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-2); }
.c-strength b { color: var(--ink); }
.c-meter { display: inline-flex; gap: 3px; align-items: center; }
.c-meter i { width: 14px; height: 7px; border-radius: 4px; background: var(--line-2); transition: background 300ms ease; }
.c-meter i.on { background: var(--teal); }
.c-meter.big i { width: 22px; height: 10px; border-radius: 5px; }
.c-str { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-2); margin-top: 6px; }
.c-sec { display: flex; flex-direction: column; gap: 10px; }
.c-sub { margin-top: -6px; }
.c-offer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); }
.c-offer.advised { box-shadow: inset 0 0 0 1.5px var(--gold); }
.c-offer.strong { opacity: 0.75; }
.c-offer-t { flex: 1; min-width: 0; }
.c-offer-t small { color: var(--ink-2); font-size: 0.8rem; font-weight: 600; }
.c-offer-t b { display: block; margin-top: 1px; }
.c-offer-t p { margin-top: 3px; font-size: 0.86rem; color: var(--ink-2); line-height: 1.4; }
.c-advised { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 0.74rem; }
.c-offer .btn { flex: none; }
.c-path { display: flex; flex-direction: column; gap: 0; position: relative; }
.c-unit button { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 12px 6px; border-radius: var(--r-lg); text-align: left; transition: background 140ms ease, transform 140ms ease; }
.c-unit button:active { transform: scale(0.98); background: var(--surface); }
.c-unit + .c-unit { position: relative; }
.c-unit + .c-unit::before { content: ""; position: absolute; left: 25px; top: -10px; height: 20px; border-left: 2px dashed var(--line-2); }
.c-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); font-weight: 700; color: var(--ink-2); }
.c-dot svg { width: 20px; height: 20px; }
.c-unit.started .c-dot { box-shadow: inset 0 0 0 2.5px var(--indigo); color: var(--indigo); }
.c-unit.done .c-dot { background: var(--indigo); box-shadow: none; color: #fff; }
.c-u-txt small { display: block; color: var(--ink-2); font-size: 0.78rem; font-weight: 600; }
.c-u-txt b { display: block; line-height: 1.3; }
.c-unit .go { font-weight: 700; font-size: 0.9rem; color: var(--indigo); }
.c-making { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 10px; text-align: center; }
.c-kick { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.c-kick .link-btn { font-size: 0.85rem; font-weight: 600; color: var(--indigo); min-height: 36px; }
.c-level { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.c-level i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.c-level i.on { background: var(--gold); }
.c-top-meter { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.c-top-meter small { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.tdots i.c-drill-seg { flex: 1.6; }
.c-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: var(--r-xl); background: var(--surface); }
.c-card[data-fresh] { animation: rise2 360ms cubic-bezier(.2,.9,.3,1.05) both; }
.c-kind { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 12px 4px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--indigo-wash); color: var(--indigo-deep); }
.c-kind svg { width: 18px; height: 18px; }
.c-card.kind-example .c-kind { background: var(--teal-wash); color: var(--teal-ink); }
.c-card.kind-mistake .c-kind { background: var(--coral-wash); color: var(--coral-ink); }
.c-card.kind-tip .c-kind { background: var(--gold-wash); color: var(--gold-ink); }
.c-body { font-size: 1.08rem; line-height: 1.6; }
.c-steps { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); counter-reset: st; font-variant-numeric: tabular-nums; }
.c-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; line-height: 1.5; }
.c-steps li::before { counter-increment: st; content: counter(st); font-weight: 700; color: var(--ink-3); font-size: 0.85rem; padding-top: 1px; }
.c-visual { margin: 0 -4px; }
.c-check { display: flex; flex-direction: column; gap: 10px; }
.c-check-q { font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.c-badge { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 2px 10px 2px 6px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 0.78rem; font-weight: 700; vertical-align: 2px; }
.c-badge svg { width: 15px; height: 15px; }
.c-change { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.c-change > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c-change small { font-size: 0.82rem; color: var(--ink-2); }
.c-change .arrow svg { width: 22px; height: 22px; color: var(--ink-3); }
.topic-acts { margin-top: 10px; flex-wrap: wrap; }
.ans-chip.sm { font-size: 1.02rem; padding: 8px 16px; text-align: center; }
.c-meter.big i { width: 18px; }

/* Spelling: hear the word, build it from letter tiles (or type it). Letters in the right place stay, in green. */
.spell-box { background: var(--surface); border: 2.5px solid var(--line-2); border-radius: 20px; padding: 12px; display: grid; gap: 14px; transition: border-color 160ms ease; }
.spell-box.bad { border-color: var(--coral); }
.spell-box.full { border-color: var(--indigo); }
.sp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-tools button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; background: var(--surface-2); color: var(--ink-2); }
.sp-tools button svg { width: 20px; height: 20px; }
.sp-tools .sp-say { background: var(--indigo); color: var(--on-primary); padding: 0 18px; font-size: 1.02rem; }
.sp-tools .sp-say svg { width: 22px; height: 22px; }
.sp-tools .sp-mode { margin-left: auto; background: transparent; color: var(--ink-3); padding: 0 6px; }
html[data-speaking^="spell:"] .sp-say .sw1 { animation: soundwave 900ms ease-in-out infinite; }
html[data-speaking^="spell:"] .sp-say .sw2 { animation: soundwave 900ms ease-in-out 180ms infinite; }
.sp-work { display: grid; gap: 14px; }
.sp-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sp-slot { width: 44px; height: 54px; border-radius: 12px; border: 2px dashed var(--line-2); background: var(--sheet); font-size: 1.6rem; font-weight: 700; color: var(--ink); display: grid; place-items: center; transition: transform 120ms ease, background 160ms ease; }
.sp-slot.on { border-style: solid; border-color: var(--indigo); background: var(--indigo-wash); color: var(--indigo-deep); }
.sp-slot.ok { border-style: solid; border-color: var(--teal); background: var(--teal-wash); color: var(--teal-ink); }
.sp-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 12px; border-top: 1.5px solid var(--line); }
.sp-tile { width: 48px; height: 52px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--line-2); font-size: 1.5rem; font-weight: 700; color: var(--ink); transition: transform 120ms ease, opacity 160ms ease; }
.sp-tile:active { transform: translateY(2px); box-shadow: none; }
.sp-tile:disabled { opacity: 0; pointer-events: none; }
.sp-back { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--ink-3); }
.sp-back svg { width: 26px; height: 26px; }
.sp-type { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; }
.sp-peek { display: grid; place-items: center; min-height: 128px; border-radius: 14px; background: var(--gold-wash); animation: peek 2200ms ease both; }
.sp-peek span { font-size: 2.4rem; font-weight: 700; color: var(--gold-ink); letter-spacing: 0.06em; }
@keyframes peek { 0% { opacity: 0; } 10%, 82% { opacity: 1; } 100% { opacity: 0; } }
.spell-mask { display: inline-grid; place-items: center; vertical-align: -0.15em; width: 1.5em; height: 1.2em; border-radius: 8px; background: var(--indigo-wash); color: var(--indigo); }
.spell-mask svg { width: 0.95em; height: 0.95em; }
@media (prefers-reduced-motion: reduce) { .sp-peek { animation: none; } }

/* Sign-in: why the MyKad number is asked, and what is kept. */
.kad-why { margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); color: var(--ink-2); line-height: 1.5; }
.sp-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sp-row .sp-slots { flex: 0 1 auto; }
.sp-slot, .sp-tile { display: inline-grid; place-items: center; text-align: center; padding: 0; line-height: 1; }
.sp-row .sp-back { flex: none; width: 44px; height: 54px; }
.sp-tools .sp-look.main { background: var(--gold); color: var(--ink); padding: 0 18px; font-size: 1.02rem; }
.sp-novoice { margin: -4px 2px 0; font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }
/* Letters in a typeface made for children learning to read: l, I and 1 differ, and a is the one they write. */
.sp-slot, .sp-tile, .sp-peek span, .sp-type { font-family: "Andika", var(--font-sans); }
.sp-tile { width: clamp(38px, 11.5vw, 48px); }
.sp-slot { width: clamp(36px, 11vw, 44px); }
.sp-bank { gap: 6px; }
.spell-box > .sp-mode { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--ink-3); font-weight: 600; font-size: 0.92rem; margin-top: -6px; }
.spell-box > .sp-mode svg { width: 20px; height: 20px; }

/* Cuba dulu: the pupil's own answer, written while the lesson is built (0.18) */
.try-first { width: 100%; margin-top: 18px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; display: grid; gap: 8px; }
.try-first .try-h { font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.try-first .try-sub { font-size: 0.88rem; color: var(--ink-2); line-height: 1.4; }
.try-first .try-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.try-first .try-row .input { min-height: 52px; font-size: 1.2rem; font-weight: 600; color: var(--indigo); }
.try-first .try-row .btn { min-height: 52px; padding: 0 18px; }
.try-first.sent { grid-template-columns: 1fr auto; align-items: center; background: var(--indigo-wash); animation: open 280ms cubic-bezier(.2,.8,.2,1) both; }
.try-first.sent .try-h { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
.try-first.sent .try-val { font-size: 1.5rem; font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.first-try { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--coral-wash); color: var(--ink); font-size: 0.95rem; line-height: 1.45; animation: open 280ms cubic-bezier(.2,.8,.2,1) both; }
.first-try .ft-you { color: var(--ink-2); font-size: 0.9rem; }
.first-try .ft-val { position: relative; display: inline-block; margin-left: 6px; padding: 0 4px; font-size: 1.3rem; font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; }
.first-try .ft-val .ring-mark { position: absolute; left: -8px; top: -6px; width: calc(100% + 16px); height: calc(100% + 12px); pointer-events: none; overflow: visible; }
.first-try b { color: var(--coral-ink); }
.ft-remind { font-size: 0.88rem; color: var(--ink-2); margin: 0 0 4px; }
.part-row.done b, .part-row.done small { color: var(--ink-3); }
.part-row .part-done { display: inline-flex; width: 30px; height: 30px; flex: none; }
.part-row .part-done svg { width: 30px; height: 30px; }

/* Form 4 to STPM: a plainer look (0.18). Faham stays on welcome, empty and finishing screens only. */
html[data-older] :is(.fb, .buildup-intro, .year-card, .score-card, .menu-head, .c-hero-top, .c-making, .build-stage, .found, .parts-pick, .build-oops, .setup-head) > .faham,
html[data-older] :is(.fb, .buildup-intro, .year-card, .score-card, .menu-head, .c-hero-top, .c-making, .build-stage, .found, .parts-pick, .build-oops, .setup-head) > svg.faham { display: none; }
html[data-older] :is(.fb, .buildup-intro, .year-card) { grid-template-columns: 1fr; }
html[data-older] .buildup-intro { padding: 10px 14px; }
html[data-older] .fb .praise.big { font-size: 1.15rem; }
/* One sample on its own (Prasekolah, Form 4 and up): a full-width row, so home never looks half filled. */
.samples:has(> .sample-card:only-child) { grid-auto-columns: 100%; }
.sample-card:only-child { display: grid; grid-template-columns: 128px 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 14px; row-gap: 2px; padding: 10px; }
.sample-card:only-child .thumb { grid-row: 1 / -1; margin: 0; }
.sample-card:only-child b { grid-column: 2; grid-row: 2; font-size: 1rem; }
.sample-card:only-child small { grid-column: 2; grid-row: 3; }
/* The Sedia screen's dock holds two buttons; the answer box under the question must scroll clear of it. */
.screen.with-dock:has(.found ~ .try-first) { padding-bottom: 176px; }
.celebrate .page-done { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: var(--plum-wash); color: var(--plum-ink); font-weight: 600; font-size: 0.95rem; animation: open 360ms 200ms cubic-bezier(.2,.8,.2,1) both; }
.celebrate .page-done svg { width: 18px; height: 18px; }

/* Pages of one paper (0.22): a stack, the first page on top and the next ones fanned behind it, with a count. */
.page-stack { position: relative; height: 220px; display: grid; place-items: center; padding: 10px 0; }
.page-stack img { grid-area: 1 / 1; height: 196px; width: auto; max-width: 70%; object-fit: cover; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 6px 18px color-mix(in srgb, var(--ink) 14%, transparent); transform: translateX(calc(var(--k) * 22px)) rotate(calc(var(--k) * 3deg)); z-index: calc(10 - var(--k)); }
.page-stack .page-count { position: absolute; right: 10px; bottom: 10px; z-index: 11; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.78rem; font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.page-stack.small { height: 150px; }
.page-stack.small img { height: 130px; }
.found-q .page-stack, .preview .page-stack { background: var(--surface-2); }
.add-page { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 16px; min-height: 44px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--indigo); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.add-page svg { width: 20px; height: 20px; }
.parts-pick .add-page { align-self: center; }
.part-page { margin: 12px 4px 4px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.part-page:first-child { margin-top: 0; }
.cam-pages { position: absolute; left: 14px; top: 14px; display: flex; }
.cam-pages img { width: 44px; height: 58px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; margin-left: calc(var(--k) * -18px + 0px); transform: rotate(calc(var(--k) * 4deg - 4deg)); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.cam-pages img:first-child { margin-left: 0; }
.qthumb { position: relative; }
.qthumb-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--indigo); color: #fff; font-style: normal; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.q-page { margin: 10px 0 4px; }
@media (prefers-reduced-motion: reduce) { .page-stack img { transform: translateX(calc(var(--k) * 22px)); } }