/* Meseret app shell + lesson player. Tokens first; everything derives from them. */
:root {
  --bg: #F6F9F3; --surface: #FFFFFF; --surface-2: #EAF1E5; --line: #D6E2CF;
  --fg: #142019; --muted: #56655B;
  --accent: #129B60; --accent-deep: #0B6E44; --accent-ink: #FFFFFF; --accent-soft: #DAF4E6; --accent-line: #A9DFC3;
  --sun: #F5A400; --sun-deep: #B87900; --sun-soft: #FFF2D1; --sun-line: #F3D48A; --sun-ink: #7A4A00; --on-sun: #2A1B00;
  --sky: #2A77E0; --sky-soft: #E0ECFD; --sky-line: #A9C8F3;
  --bad: #DA4A1F; --bad-soft: #FDE5DC; --bad-ink: #A13212;
  --coral: #E8603C; --coral-soft: #FDE6DE; --violet: #7A5AF0; --violet-soft: #ECE6FE;
  --tile-a: #9BDDB9; --tile-b: #FFD677; --hi: rgba(18,155,96,.35);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Nunito Sans', 'Noto Sans Ethiopic', 'Segoe UI', system-ui, sans-serif;
  --ethiopic: 'Noto Sans Ethiopic', 'Nunito Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121712; --surface: #1B221C; --surface-2: #253027; --line: #334036; --fg: #EEF4EC; --muted: #A3B2A7;
  --accent: #39C987; --accent-deep: #1F8A5A; --accent-ink: #062014; --accent-soft: #173A29; --accent-line: #2A5E44;
  --sun: #FFBA2E; --sun-deep: #B98316; --sun-soft: #3A2E12; --sun-line: #5E4A1C; --sun-ink: #FFD27A; --on-sun: #241700;
  --sky: #6EA6F5; --sky-soft: #172B47; --sky-line: #2C4C78; --bad: #F07A52; --bad-soft: #3D211A; --bad-ink: #F7A68A;
  --coral: #F38A66; --coral-soft: #3B2219; --violet: #A58BFF; --violet-soft: #2A2245; --tile-a: #2F7A55; --tile-b: #8C6A1C; --hi: rgba(57,201,135,.35); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #121712; --surface: #1B221C; --surface-2: #253027; --line: #334036; --fg: #EEF4EC; --muted: #A3B2A7;
  --accent: #39C987; --accent-deep: #1F8A5A; --accent-ink: #062014; --accent-soft: #173A29; --accent-line: #2A5E44;
  --sun: #FFBA2E; --sun-deep: #B98316; --sun-soft: #3A2E12; --sun-line: #5E4A1C; --sun-ink: #FFD27A; --on-sun: #241700;
  --sky: #6EA6F5; --sky-soft: #172B47; --sky-line: #2C4C78; --bad: #F07A52; --bad-soft: #3D211A; --bad-ink: #F7A68A;
  --coral: #F38A66; --coral-soft: #3B2219; --violet: #A58BFF; --violet-soft: #2A2245; --tile-a: #2F7A55; --tile-b: #8C6A1C; --hi: rgba(57,201,135,.35); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; }
html[lang="am"] body, html[lang="om"] body { font-size: 18px; line-height: 1.65; }
html[lang="am"] .display { font-family: var(--ethiopic); font-weight: 800; }
/* lesson language (set on #app by setLessonLang): Ethiopic text needs ~10% larger type and more line height */
#app[lang="am"], #app[lang="om"] { font-size: 18.7px; line-height: 1.7; }
#app[lang="am"] .display, #app[lang="am"] h1, #app[lang="am"] h2, #app[lang="am"] h3 { font-family: var(--ethiopic); }
#app[lang="am"] .opt, #app[lang="am"] .qb, #app[lang="am"] .chip, #app[lang="am"] .btn, #app[lang="am"] .qq, #app[lang="am"] .ask, #app[lang="am"] .tx { font-family: var(--ethiopic); line-height: 1.55; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
p { margin: 0; }
[hidden] { display: none !important; }
.display { font-family: var(--display); font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1.display { font-size: 28px; margin: 0; }
h2.display { font-size: 20px; margin: 0; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow.sky { color: var(--sky); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: 18px; }
.ask { font-weight: 800; }

.view { max-width: 560px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px 110px; display: grid; gap: 16px; }
.view > * { min-width: 0; }
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row > * { min-width: 0; }
.grow { flex: 1; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.card.soft { background: var(--sun-soft); border-color: var(--sun-line); }
.card.sky { background: var(--sky-soft); border-color: var(--sky-line); }
.card.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); text-decoration: none; }
.card.accent .eyebrow { color: var(--accent-ink); opacity: .9; }
.list { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; }
.list > * { border-top: 1px solid var(--surface-2); }
.list > *:first-child { border-top: 0; }
.item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--fg); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.item .t { font-weight: 800; font-size: 15px; }
.item .s { font-size: 13px; color: var(--muted); }
.item.current { background: var(--sky-soft); }
.item.head { padding: 10px 16px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); cursor: default; }
.item.head.book { color: var(--sun-ink); background: var(--sun-soft); }
.dot { width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); flex: none; display: grid; place-items: center; }
.dot.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.dot.now { border: 3px solid var(--sky); }
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; flex: none; }
.pill { display: inline-flex; align-items: center; min-height: 28px; border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.pill.green { background: var(--accent-soft); color: var(--accent-deep); }
.pill.sun { background: var(--sun-soft); color: var(--sun-ink); }
.pill.sky { background: var(--sky); color: #fff; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; width: 100%; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 4px 0 var(--accent-deep); text-decoration: none; padding: 0 16px; }
.btn.sun { background: var(--sun); color: var(--on-sun); box-shadow: 0 4px 0 var(--sun-deep); }
.btn.ghost { background: var(--surface); color: var(--fg); border: 2px solid var(--line); border-bottom-width: 4px; box-shadow: none; }
.btn.link { background: transparent; color: var(--accent-deep); box-shadow: none; min-height: 44px; }
.btn:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: default; }
.opts { display: grid; gap: 10px; }
.opts.row2 { grid-template-columns: 1fr 1fr; }
.opts.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { text-align: left; min-height: 56px; padding: 12px 16px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--surface); font-weight: 700; cursor: pointer; }
.opt.center { text-align: center; }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); }
.opt.ok { border-color: var(--accent); background: var(--accent-soft); }
.opt.no { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); text-decoration: line-through; }
.opt:disabled { cursor: default; }

/* top bar + progress */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); }
.top .in { max-width: 560px; margin: 0 auto; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-block: 10px; display: flex; align-items: center; gap: 10px; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: var(--muted); flex: none; }
.mode.mode { display: inline-block; padding: 4px 10px; } .mode { flex: none; align-self: center; white-space: nowrap; line-height: 1.3; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); border: 1.5px solid var(--accent-line); border-radius: 99px; padding: 4px 10px; }
.mode.review { color: var(--sky); background: var(--sky-soft); border-color: var(--sky-line); }
.mode.book { color: var(--sun-ink); background: var(--sun-soft); border-color: var(--sun-line); }
.bar { flex: 1; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .35s ease; }
.count { flex: none; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* figures */
.fig { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 12px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig svg text { font-family: var(--body); }
.sizes, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size, .chip { min-height: 46px; min-width: 46px; padding: 0 12px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; background: var(--surface); font-weight: 800; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; cursor: pointer; }
.size.fit, .chip.on, .chip.ok { border-color: var(--accent); background: var(--accent-soft); }
.size.gap, .chip.no { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); }
.size[aria-pressed="true"] { outline: 3px solid var(--fg); outline-offset: 1px; }
.chip[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); }
.result { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 16px; min-height: 3.1em; }
.result strong { display: block; }
.defn { background: var(--sun-soft); border: 2px solid var(--sun-line); border-radius: 16px; padding: 12px 16px; display: grid; gap: 4px; }
.defn b { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--sun-ink); }
.frow { display: grid; gap: 6px; }
.frow > span { font-weight: 800; font-size: 15px; }
.inner { justify-self: start; min-height: 48px; padding: 0 18px; border: 2px solid var(--sky); border-bottom-width: 4px; border-radius: 12px; background: var(--sky-soft); font-weight: 800; cursor: pointer; }
.inner:disabled { opacity: .5; cursor: default; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.steps li::marker { font-weight: 800; color: var(--sky); }
.blank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; }
.blank input { font-weight: 800; font-size: 20px; width: 6em; min-height: 52px; text-align: center; color: var(--fg); background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; }
.blank input.no { border-color: var(--bad); background: var(--bad-soft); }
.blank input.ok { border-color: var(--accent); background: var(--accent-soft); }
.explain { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.play { width: 44px; height: 44px; border-radius: 99px; border: 0; background: var(--accent); display: grid; place-items: center; flex: none; cursor: pointer; }
.kw { display: inline; border-bottom: 2px dotted var(--sky); cursor: pointer; background: transparent; border-top: 0; border-left: 0; border-right: 0; padding: 0; font: inherit; color: inherit; }
.gloss { background: var(--sky-soft); border: 2px solid var(--sky-line); border-radius: 12px; padding: 10px 12px; font-size: 15px; }

/* tray */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--line); transition: background-color .2s ease; }
.tray .in { max-width: 560px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.tray.ok { background: var(--accent-soft); border-color: var(--accent-line); }
.tray.no { background: var(--sun-soft); border-color: var(--sun-line); }
.tray.info { background: var(--sky-soft); border-color: var(--sky-line); }
.msg { display: grid; gap: 2px; font-size: 16px; }
.msg:empty { display: none; }
.msg strong { font-family: var(--display); font-size: 21px; }
.tray.ok .msg strong { color: var(--accent-deep); }
.tray.no .msg strong { color: var(--sun-ink); }
.tray.no .btn { background: var(--sun); color: var(--on-sun); box-shadow: 0 4px 0 var(--sun-deep); }

/* bottom nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--line); }
.nav .in { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 8px calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; color: var(--muted); text-decoration: none; min-height: 48px; justify-content: center; }
.nav a.on { color: var(--accent-deep); }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 9; background: rgba(20,32,25,.55); display: flex; align-items: flex-end; }
.sheet .in { width: 100%; max-width: 560px; margin: 0 auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 12px max(20px, env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.sheet textarea { width: 100%; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); resize: none; }
.score { display: flex; align-items: baseline; gap: 10px; }
.score .big { font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week div { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--muted); }
.week i { width: 30px; height: 30px; border-radius: 99px; background: var(--surface-2); border: 2px solid var(--line); }
.week i.on { background: var(--accent); border-color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 700; font-size: 14px; z-index: 20; max-width: 90vw; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* work-it-out panel: half height, question stays visible above */
.panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; height: 56vh; max-height: 92vh; background: var(--bg); border-top: 2px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; transition: height .2s ease; }
.panel.tall { height: 92vh; }
.panel .phead { display: flex; align-items: center; gap: 8px; padding: 8px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.panel .pq { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .pbody { flex: 1; overflow: auto; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); display: grid; gap: 10px; align-content: start; }
.panel .ptabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.panel .ptabs .opt { min-height: 40px; padding: 6px 8px; font-size: 14px; border-bottom-width: 3px; }
body.panel-open main { padding-bottom: 60vh; }

/* scratch pad: squared paper that grows; one finger writes, two fingers scroll */
.panel .pbody { display: flex; flex-direction: column; overflow: hidden; }
#wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#wbody > .stack { overflow: auto; }
.scratch { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.padbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.padbar .opt { min-height: 44px; padding: 0; font-size: 18px; border-bottom-width: 3px; }
.padbar .opt.no { font-size: 12px; text-decoration: none; }
.padhint { font-size: 13px; font-weight: 700; color: var(--sky); background: var(--sky-soft); border-radius: 10px; padding: 6px 10px; }
.padwrap { flex: 1; min-height: 160px; overflow-y: auto; overflow-x: hidden; border: 2px solid var(--line); border-radius: 14px; background-color: var(--surface);
  background-image: linear-gradient(var(--surface-2) 1px, transparent 1px), linear-gradient(90deg, var(--surface-2) 1px, transparent 1px); background-size: 24px 24px; background-attachment: local; overscroll-behavior: contain; }
.padwrap canvas { display: block; touch-action: none; cursor: crosshair; }
.padmore { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px dashed var(--line); background: transparent; color: var(--muted); font-weight: 800; font-size: 14px; cursor: pointer; }
.panel .ptabs .opt { min-height: 38px; padding: 4px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .phead { padding-block: 4px 4px; }
.panel .pbody { gap: 8px; padding-top: 8px; }
.padbar .opt { min-height: 40px; }

/* book reader: one scrolling page per section */
.reader { display: grid; gap: 16px; padding-bottom: 40px; }
.reader > header h1 { font-size: 26px; }
.ideahead { font-size: 21px; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--line); }
.blk { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 12px; scroll-margin-top: 72px; }
.blk.plain { background: transparent; border: 0; padding: 4px 2px; }
.blk.hook { border-color: var(--sky-line); background: var(--sky-soft); }
.blk.done, .blk.seen { border-color: var(--accent-line); }
.blk h1.display { font-size: 20px; }
.blk .fb { border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.blk .fb.ok { background: var(--accent-soft); } .blk .fb.ok strong { color: var(--accent-deep); }
.blk .fb.no { background: var(--sun-soft); } .blk .fb.no strong { color: var(--sun-ink); }
.blk .fb.info { background: var(--sky-soft); } .blk .fb.info strong { color: var(--sky); }
.blk .offer { display: grid; gap: 8px; }
.blkfoot { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.blkfoot .btn { width: auto; min-height: 44px; padding-inline: 0; }
.endblk .kw { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kwam { color: var(--muted); font-weight: 600; }
.tbl { overflow-x: auto; } .tbl table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tbl th, .tbl td { border: 1.5px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; } .tbl th { background: var(--surface-2); }
.note { font-size: 14px; color: var(--muted); border-left: 4px solid var(--sun-line); padding-left: 10px; }
.mini { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 6px; } .mini i { display: block; height: 100%; background: var(--accent); }
.reader, .blk, .blk .stack { grid-template-columns: minmax(0, 1fr); }
.reader > *, .blk > *, .blk .stack > * { min-width: 0; }
.blk { overflow-wrap: anywhere; }
.eyebrow:empty { display: none; }

/* ---------- book view (one colourful scrolling chapter) ---------- */
.h-g { --h: var(--accent); --hs: var(--accent-soft); } .h-s { --h: var(--sky); --hs: var(--sky-soft); } .h-y { --h: var(--sun); --hs: var(--sun-soft); }
.h-c { --h: var(--coral); --hs: var(--coral-soft); } .h-v { --h: var(--violet); --hs: var(--violet-soft); }
.pts { flex: none; font-weight: 900; font-size: 16px; background: var(--sun-soft); color: var(--sun-ink); border: 2px solid var(--sun-line); border-radius: 99px; padding: 4px 12px; }
.pts.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.35) rotate(-6deg); } 60% { transform: scale(.95); } }
.book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 60px; }
.book > * { min-width: 0; }
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 22px 20px; color: #fff; background: linear-gradient(135deg, #129B60 0%, #2A77E0 60%, #7A5AF0 100%); display: grid; gap: 6px; }
.hero .eyebrow { color: #fff; opacity: .9; } .hero h1 { font-size: 28px; line-height: 1.15; margin: 0; } .hero p { opacity: .95; font-size: 15px; max-width: 80%; }
.heroart { position: absolute; right: -14px; bottom: -14px; width: 120px; height: 120px; color: #fff; opacity: .22; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.secnav { position: sticky; top: 62px; z-index: 4; background: var(--bg); display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none; flex-wrap: nowrap; }
.secnav::-webkit-scrollbar { display: none; }
.secnav .chip { flex: none; text-decoration: none; font-weight: 800; color: var(--h); background: var(--hs); border: 2px solid transparent; border-radius: 99px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; }
.secnav .chip.on { background: var(--h); color: #fff; }
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; scroll-margin-top: 120px; padding-top: 8px; }
.sec > * { min-width: 0; }
.sechead { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 23px; line-height: 1.2; margin: 6px 0 0; }
.sechead .num { flex: none; font-family: var(--body); font-size: 14px; font-weight: 900; color: #fff; background: var(--h); border-radius: 12px; padding: 6px 10px; box-shadow: 0 3px 0 color-mix(in srgb, var(--h) 70%, #000); }
.sec.complete .sechead .num::after { content: ' ✓'; }
.rd { display: grid; gap: 10px; } .rd h3 { margin: 4px 0 0; font-size: 18px; color: var(--h); }
.kwt { all: unset; cursor: pointer; font-weight: 800; color: var(--fg); background: linear-gradient(transparent 55%, var(--hs) 55%); border-bottom: 2px dotted var(--h); }
.kwt:focus-visible { outline: 3px solid var(--sky); }
.tip { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--sun-ink); background: var(--sun-soft); border-radius: 12px; padding: 8px 12px; min-height: 28px; }
.tip .tx { display: block; }
.keys { display: grid; gap: 10px; }
.kcard { border-radius: 18px; padding: 14px 16px; background: var(--hs, var(--sun-soft)); border-left: 6px solid var(--h, var(--sun)); display: grid; gap: 4px; }
.kcard .kt { font-weight: 900; font-size: 18px; color: var(--h, var(--sun-ink)); } .kcard .kd { font-size: 16px; } .kam { font-weight: 700; color: var(--muted); font-size: 15px; }
.kcard.big .kt { font-size: 24px; }
.quiz, .explore { border-radius: 20px; padding: 14px; background: var(--surface); border: 2px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.quiz > *, .explore > * { min-width: 0; }
.quiz.think { background: var(--hs); border-color: transparent; }
.quiz.done { border-color: var(--accent-line); }
.ql { font-size: 13px; font-weight: 900; letter-spacing: .04em; color: var(--h); }
.qq { font-weight: 800; font-size: 17px; } .qctx { color: var(--muted); }
.qo { display: grid; gap: 8px; } .qo.two { grid-template-columns: 1fr 1fr; }
.qb { min-height: 48px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-weight: 700; text-align: left; padding: 10px 14px; cursor: pointer; transition: transform .1s ease; }
.qo.two .qb { text-align: center; }
.qb:active { transform: translateY(2px); }
.qb.pick { border-color: var(--h); background: var(--hs); }
.qb.ok { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.qb.no { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); opacity: .85; }
.qb:disabled { cursor: default; }
.pop { animation: pop .45s ease; } @keyframes pop { 40% { transform: scale(1.06); } }
.shake { animation: shake .4s ease; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.qf { border-radius: 12px; padding: 8px 12px; font-size: 15px; } .qf.ok { background: var(--accent-soft); color: var(--accent-deep); } .qf.no { background: var(--sun-soft); color: var(--sun-ink); }
.quiz:not(.think) .qf:not(.ok):not(.no) { background: var(--hs); }
.quiz .btn.small, .explore .btn.small { min-height: 48px; font-size: 16px; }
.secend { display: grid; gap: 10px; }
.secdone { text-align: center; font-weight: 900; font-size: 18px; padding: 14px; border-radius: 18px; background: var(--sun-soft); color: var(--sun-ink); animation: pop .6s ease; }
.pcard { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 12px 16px; border-radius: 18px; border: 0; background: var(--h); color: #fff; font-weight: 800; box-shadow: 0 4px 0 color-mix(in srgb, var(--h) 70%, #000); cursor: pointer; }
.pcard small { display: block; font-weight: 600; opacity: .9; font-size: 13px; } .pcard .pi { font-size: 24px; } .pcard.soft { background: var(--hs); color: var(--fg); box-shadow: none; border: 2px solid var(--line); }
.bookend { display: grid; gap: 10px; text-align: center; padding-top: 12px; } .bookend .display { font-size: 20px; }
.conf { position: fixed; z-index: 50; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; animation: conf .85s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes conf { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.ptsfloat { position: fixed; z-index: 50; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: var(--sun-deep); pointer-events: none; animation: ptsup 1.1s ease forwards; }
@keyframes ptsup { to { transform: translate(-50%, -60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pts.bump, .pop, .shake, .heroart, .secdone { animation: none; } }
.quiz .stack > .eyebrow:empty + *:not(p) { margin-top: 0; } .quiz .stack { gap: 10px; }

/* ---------- book view v2: progress %, focus timer, pictures, people, skip, translate ---------- */
.top .prog { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top .prog .bar { height: 10px; } #ppct { font-weight: 900; font-size: 14px; color: var(--accent-deep); font-variant-numeric: tabular-nums; min-width: 36px; }
.focus { flex: none; min-height: 40px; min-width: 44px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: 14px; padding: 0 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.focus.on { background: var(--violet-soft); border-color: var(--violet); color: var(--violet); } .focus.brk { background: var(--sky-soft); border-color: var(--sky); color: var(--sky); }
.focussheet { display: grid; gap: 12px; text-align: center; } .focussheet .big { font-size: 48px; font-weight: 900; font-variant-numeric: tabular-nums; } .focussheet .pts { justify-self: center; font-size: 20px; }
.hero { background: linear-gradient(135deg, var(--h) 0%, color-mix(in srgb, var(--h) 55%, var(--violet)) 100%); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--h) 70%, transparent); }
.hero .heroart { animation: float 5s ease-in-out infinite; width: 130px; height: 130px; right: -8px; bottom: -10px; opacity: .9; color: inherit; background: rgba(255,255,255,.18); border-radius: 50%; padding: 14px; }
.hero .heroart svg { width: 100%; height: 100%; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-4deg); } }
.secnav .chip { position: relative; overflow: hidden; isolation: isolate; }
.secnav .chip i { position: absolute; inset: 0; width: var(--p, 0%); background: color-mix(in srgb, var(--h) 35%, transparent); z-index: -1; transition: width .4s ease; }
.secnav .chip.full::after { content: '✓'; margin-left: 4px; }
.secnav .chip.on i { display: none; }
.sechead { font-size: 24px; }
.picblk { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--hs); border-radius: 22px; padding: 16px; }
.pic { display: block; width: 140px; height: 140px; } .pic svg { width: 100%; height: 100%; display: block; }
.picblk .cap { font-weight: 800; color: var(--h); }
.gal { display: grid; gap: 10px; } .gal h3 { margin: 0; font-size: 18px; color: var(--h); }
.galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.gi { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 18px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); cursor: pointer; font-weight: 800; font-size: 13px; line-height: 1.2; text-align: center; transition: transform .12s ease; }
.gi .pic { width: 64px; height: 64px; } .gi:active { transform: scale(.96); }
.gi[aria-expanded="true"] { border-color: var(--h); background: var(--hs); transform: translateY(-2px); }
.ginfo { background: var(--hs); border-left: 6px solid var(--h); border-radius: 14px; padding: 10px 14px; animation: pop .35s ease; } .ginfo b { color: var(--h); }
.ppl { display: grid; gap: 10px; } .ppl h3 { margin: 0; font-size: 18px; color: var(--h); }
.pplgrid { display: grid; gap: 10px; }
.person { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 12px; }
.face { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--hs); border: 3px solid var(--h); display: grid; place-items: center; font-weight: 900; font-size: 24px; color: var(--h); }
.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.pinfo { display: grid; gap: 2px; min-width: 0; } .pinfo b { font-size: 17px; } .pinfo small { color: var(--muted); font-weight: 700; } .pinfo p { font-size: 15px; }
.kcard .kt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.quiz { box-shadow: 0 6px 18px -14px rgba(0,0,0,.35); }
.quiz.worked { background: var(--surface); border-style: dashed; }
.skip { all: unset; cursor: pointer; justify-self: end; font-size: 14px; font-weight: 800; color: var(--muted); padding: 10px 4px; min-height: 24px; }
.quiz.skipped { opacity: .75; } .quiz.skipped .qo, .quiz.skipped .stack, .quiz.skipped > .btn { display: none; }
.skipnote { font-size: 14px; font-weight: 700; color: var(--muted); }
.conf.round { border-radius: 50%; }
.trpill { position: fixed; z-index: 40; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0; background: var(--fg); color: var(--bg); font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer; animation: pop .25s ease; }
.trsheet { display: grid; gap: 12px; } .trq { color: var(--muted); font-size: 15px; border-left: 4px solid var(--line); padding-left: 10px; }
.tra { font-family: var(--ethiopic); font-size: 20px; line-height: 1.7; font-weight: 700; min-height: 36px; }
.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero .heroart, .ginfo, .trpill { animation: none; } }

/* tap-to-pair match, activities */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcol { display: grid; gap: 8px; align-content: start; }
.pl, .pr { min-height: 48px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-weight: 700; font-size: 15px; line-height: 1.25; padding: 8px 10px; text-align: left; cursor: pointer; transition: transform .1s ease; }
.pl.sel { border-color: var(--fg); transform: translateX(3px); }
.pl.on, .pr.on { border-color: var(--h); background: var(--hs); color: var(--fg); }
.quiz.act { background: var(--violet-soft); border-color: transparent; } .quiz.act .ql { color: var(--violet); }
.quiz.act .rv { justify-self: start; width: auto; padding: 0 18px; }

/* interactive figures: tree, venn, tap buttons */
.quiz.fig { background: var(--surface); }
.treebox { display: grid; gap: 14px; position: relative; padding: 4px 0; }
.trow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; }
.trow + .trow::before { content: ''; position: absolute; top: -12px; left: 15%; right: 15%; border-top: 2px dashed var(--line); }
.tnode { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--hs); font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .12s ease; }
.tnode .pic { width: 28px; height: 28px; }
.tnode.on { background: var(--h); color: #fff; border-color: var(--h); transform: scale(1.06); }
.tnode.path { border-color: var(--h); }
.vsvg { width: 100%; max-width: 320px; justify-self: center; display: block; }
.vchips, .tbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip, .tb { min-height: 44px; padding: 6px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: 14px; cursor: pointer; }
.vchip.ov { border-style: dashed; }
.vchip.on, .tb.on { background: var(--h); color: #fff; border-color: var(--h); }
.tb.seen:not(.on), .gi.seen:not([aria-expanded="true"]) { border-color: var(--accent-line); }
.tbtns.withpic { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tbtns.withpic .tb { border-radius: 18px; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; }
.tbtns.withpic .tb .pic { width: 56px; height: 56px; }

/* fractions drawn stacked like the book (textContent keeps "3/5") */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; font-size: .82em; margin: 0 .08em; text-align: center; }
.frac .fn { border-bottom: .09em solid currentColor; padding: 0 .12em; }
.frac .fd { padding: 0 .12em; }
.frac .fs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frac { position: relative; }
/* number line */
.nl .nlsvg { touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nl .nlp:empty { display: none; }
.nl .vchips { display: flex; flex-wrap: wrap; gap: 8px; }
/* engine B: sign buttons, sliders, figures */
.sgn { display: inline-flex; gap: 6px; }
.sgn button { min-width: 44px; min-height: 52px; font-size: 24px; font-weight: 800; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.sgn button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: #fff; }
.sld .sl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-weight: 700; }
.sld .sl input { grid-column: 1 / -1; width: 100%; min-height: 36px; accent-color: var(--accent); }
.sld .sout { font-size: 22px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; text-align: center; }
.fbar .fbp:empty, .grd .gp:empty { display: none; }
.fbar svg, .grd svg, .nest svg { touch-action: manipulation; }
/* order game: placed items can be taken back */
.oseq .oit { all: unset; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 2px 12px; border-radius: 10px; background: var(--sky-soft); font-weight: 800; }
.oseq .oit .x { color: var(--muted); font-size: 13px; }
.oseq .oit:disabled { cursor: default; } .oseq .oit:disabled .x { display: none; }
.undo { justify-self: start; width: auto; }
.fig #pool .chip:disabled { opacity: .3; box-shadow: none; }
/* mixed numbers: whole part and fraction as one unit, like the book */
.mixed, .fwrap { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: middle; position: relative; }
.mixed .mw { margin-right: .06em; }
.mixed .frac { margin-left: 0; }
.mixed > .fs, .fwrap > .fs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* answer pop-up: right / try again / here is the answer */
.verdict { position: fixed; left: 50%; top: 34%; transform: translate(-50%, 0) scale(.9); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 18px; font-size: 20px; font-weight: 800; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: vpop .25s ease forwards; pointer-events: none; white-space: nowrap; }
.verdict b { font-size: 26px; }
.verdict.ok { background: var(--accent); color: #fff; }
.verdict.retry { background: var(--sun); color: var(--on-sun); }
.verdict.answer { background: var(--sky); color: #fff; }
.verdict.out { opacity: 0; transition: opacity .35s ease; }
@keyframes vpop { to { transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .verdict { animation: none; transform: translate(-50%, 0); } }
/* book reference label (Example 1.31, Exercise 1.6 Q2) kept apart from the question */
.ref { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--muted); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 99px; padding: 2px 10px; vertical-align: middle; }
.eyebrow + .ref { margin-left: 6px; }
/* install card and help sheet */
.card.install { border-color: var(--accent-line); background: var(--accent-soft); display: grid; gap: 10px; }
.instic { font-size: 22px; background: var(--surface); border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
.isteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.istep { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.inum { flex: none; width: 28px; height: 28px; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; }
.ishare { width: 20px; height: 20px; vertical-align: -4px; color: var(--sky); }

/* drawn figures (shapes and everyday objects) */
.mf { width: 100%; max-width: 140px; height: auto; display: block; margin: 0 auto; }
.figrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.figbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; flex: 1 1 96px; max-width: 160px; min-height: 44px; padding: 8px 6px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.figbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.figbtn .cap { font-weight: 800; font-size: 15px; text-align: center; }
.figbtn .pill { font-weight: 800; font-size: 14px; padding: 2px 10px; border-radius: 99px; background: var(--sun-soft, var(--surface-2)); border: 1.5px solid var(--sun, var(--line)); }
.opt .mf, .chip .mf, .pl .mf, .pr .mf { max-width: 96px; }
#it .mf { max-width: 150px; }
.lad svg g[data-i] { cursor: pointer; }
/* difficulty badge and challenge card */
.lvl { display: inline-block; margin-left: 8px; font-size: 12px; letter-spacing: 1px; padding: 1px 8px; border-radius: 99px; vertical-align: middle; font-weight: 800; }
.lvl.l1 { color: var(--accent-deep); background: var(--accent-soft); }
.lvl.l2 { color: var(--sky); background: var(--sky-soft); }
.lvl.l3 { color: var(--sun-ink); background: var(--sun-soft); border: 1.5px solid var(--sun-line); }
.quiz.chal { border: 2.5px solid var(--sun); background: linear-gradient(180deg, var(--sun-soft), var(--surface) 60%); }
.quiz.chal .ql { color: var(--sun-ink); }
.stack > .lvl, .stack > .ref { justify-self: start; width: fit-content; margin-left: 0; }
/* feedback */
.fbcard { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; cursor: pointer; color: var(--fg); font: inherit; }
.fbcard small { display: block; }
.fbsheet textarea:focus, .fbsheet input:focus { outline: 2px solid var(--sky); }
.fbpic { width: auto; cursor: pointer; }
.secend .fbsec { justify-self: start; }
/* floating report button on lesson screens */
.fbfab { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 7; width: 52px; height: 52px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 24px; display: grid; place-items: center; cursor: pointer; }
.fbfab:disabled { opacity: .6; }
body:has(#tray:not([hidden])) .fbfab { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.fbshot { display: flex; gap: 12px; align-items: center; }
.fbshot img { width: 92px; border-radius: 10px; border: 2px solid var(--line); }
/* bottom sheets never grow taller than the screen: they scroll */
.sheet .in { max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
/* a reported item opened from a link */
.flash { outline: 4px solid var(--coral); outline-offset: 4px; border-radius: 18px; transition: outline-color .4s ease; }
/* timed test */
.clock:empty { display: none; } .clock { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 99px; background: var(--sky-soft); color: var(--sky); font-size: 14px; }
.clock.low { background: var(--sun-soft); color: var(--sun-ink); animation: pop .6s ease infinite alternate; }
.secres { display: grid; gap: 6px; margin-top: 8px; }
.sr { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.sr.ok { background: var(--accent-soft); } .sr.weak { background: var(--sun-soft); }
.sr .srn { font-weight: 800; min-width: 44px; }

.cmpbox { display: inline-block; min-width: 1.6em; height: 1.4em; line-height: 1.3em; vertical-align: -0.25em; margin: 0 .15em; border: 2px dashed var(--accent-line); border-radius: 8px; background: var(--surface, #fff); text-align: center; font-weight: 800; color: var(--accent-deep); }
.cmpbox.on { border-style: solid; border-color: var(--accent); }
.nw { white-space: nowrap; }

/* explanations: one step per line */
.qf, #msg span, .gp, .ginfo { white-space: pre-line; }
.qb.meh { outline: 2px dashed var(--sun); }
/* table of squares (sqtable) */
.sqt .sqscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--line); max-height: 360px; overflow-y: auto; }
.sqtab { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 14px; }
.sqtab th { position: sticky; top: 0; background: var(--surface-2); padding: 6px; font-weight: 800; z-index: 1; min-width: 46px; }
.sqtab th.sqx { left: 0; z-index: 2; background: var(--surface-2); }
.sqtab tbody th.sqx { position: sticky; left: 0; z-index: 1; }
.sqtab td { padding: 0; border-top: 1px solid var(--line); }
.sqtab .sqc { min-width: 54px; min-height: 44px; border: 0; background: transparent; font: inherit; color: var(--fg); padding: 0 6px; cursor: pointer; transition: background .25s; }
.sqtab td.hrow .sqc, .sqtab td.hcol .sqc { background: var(--sky-soft, var(--hs)); }
.sqtab td.hit .sqc { background: var(--sun); color: var(--sun-ink, var(--fg)); font-weight: 800; border-radius: 8px; }
.sqtab th.hhead { background: var(--sky); color: #fff; }
.sout.multi { display: grid; gap: 6px; font-size: 18px; }
.sout.multi div { display: flex; justify-content: space-between; gap: 10px; }
.sout.multi span { font-weight: 700; color: var(--fg); }
.slpic { max-height: 170px; }
.sqlink { margin: 4px 0 6px; }
/* factor tree and odd-number patterns */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: center; font-weight: 800; }
.fchips:empty { display: none; }
.fchip { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 17px; background: var(--sun-soft); padding: 0 8px; font-weight: 800; color: var(--fg); }
.fchips i, .oddrow i { font-style: normal; opacity: .6; }
.oddrows { display: grid; gap: 8px; }
.oddrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.oddrow .oddk { font-size: 12px; font-weight: 800; color: var(--muted); width: 18px; }
.oddrow b { margin-left: 4px; }
.fgrp { display: inline-flex; align-items: center; gap: 3px; border: 2px dashed; border-radius: 22px; padding: 3px; }

/* ---------- Home / subject / exams (UX rework 2026-10-24) ---------- */
.h-g { --h: var(--accent); --hs: var(--accent-soft); --hd: var(--accent-deep); }
.h-s { --h: var(--sky); --hs: var(--sky-soft); --hd: #1B57A8; }
.h-y { --h: var(--sun); --hs: var(--sun-soft); --hd: var(--sun-ink); }
.h-c { --h: var(--coral); --hs: var(--coral-soft); --hd: #A8411F; }
.h-v { --h: var(--violet); --hs: var(--violet-soft); --hd: #5236C4; }
.hhead { display: flex; align-items: center; gap: 10px; }
.hhead h1 { font-size: 28px; margin: 0; }
.gtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.gtabs button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; }
.gtabs button[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stats > * { display: inline-flex; gap: 5px; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--surface); border: 2px solid var(--line); font-size: 14px; color: var(--fg); text-decoration: none; }
.hero { display: grid; gap: 6px; padding: 18px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--accent) 0%, #0E7F8C 100%); box-shadow: 0 5px 0 var(--accent-deep); }
.hero .eyebrow { color: #fff; opacity: .95; }
.hero .ht { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.hero .hs { font-size: 15px; opacity: .92; }
.btn.light { justify-self: start; margin-top: 6px; background: #fff; color: var(--accent-deep); box-shadow: 0 3px 0 rgba(0,0,0,.18); min-height: 46px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 14px; font-weight: 800; }
.examcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sun-soft); border: 2px solid var(--sun-line); color: var(--fg); text-decoration: none; }
.examcard .eico { font-size: 26px; }
.examcard small { display: block; color: var(--muted); font-size: 13px; }
h2.sec { font-size: 21px; margin: 6px 0 -2px; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stile { display: grid; gap: 4px; align-content: start; padding: 14px; min-height: 132px; border-radius: 20px; text-decoration: none; color: var(--fg); background: var(--hs); border: 2px solid transparent; box-shadow: 0 3px 0 color-mix(in srgb, var(--h) 35%, transparent); }
.stile:active { transform: translateY(2px); box-shadow: none; }
.sico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--h); color: #fff; font-weight: 800; font-size: 20px; }
.sico.big { width: 58px; height: 58px; font-size: 26px; border-radius: 18px; }
.sname { font-weight: 800; font-size: 16px; line-height: 1.2; margin-top: 6px; }
.smeta { font-size: 12px; color: var(--muted); font-weight: 700; }
.pbar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; margin-top: 4px; }
.pbar i { display: block; height: 100%; border-radius: 99px; background: var(--h, var(--accent)); }
.sband { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 22px; background: var(--hs); }
.sband .small { color: var(--muted); font-weight: 700; }
.upath { display: grid; gap: 12px; position: relative; }
.ucard { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); color: var(--fg); text-decoration: none; }
.ucard.now { border-color: var(--h); box-shadow: 0 3px 0 var(--h); }
.ucard.done .unum { background: var(--h); color: #fff; }
.unum { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--hs); color: var(--hd); font-family: var(--display); font-weight: 700; font-size: 24px; }
.ulabel { display: block; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.utitle { display: block; font-weight: 800; font-size: 16px; line-height: 1.25; }
.umeta { display: block; font-size: 13px; color: var(--muted); }
.uarrow { font-size: 22px; color: var(--muted); }
.icon.soft { background: var(--hs); color: var(--hd); }
.homefoot { display: grid; gap: 12px; margin-top: 8px; }
.lead { white-space: pre-line; }
/* tray never hides the question: the page leaves room for it, long explanations scroll inside it; the feedback bubble moves aside */
body:has(#tray:not([hidden])) #app { padding-bottom: calc(var(--trayh, 140px) + 24px); }
.tray .msg { max-height: 48vh; max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; }
body:has(#tray:not([hidden])) .fbfab { display: none; }
/* ---------- real-exam mode ---------- */
.xtt { min-width: 0; } .xtn { font-weight: 800; font-size: 15px; }
.xpaper { display: grid; gap: 14px; padding-bottom: 96px; }
.xhead { display: flex; align-items: center; gap: 10px; }
.xnum { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--display); font-weight: 800; font-size: 18px; }
.xnum.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.xflag { min-height: 44px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.xflag[aria-pressed="true"] { background: var(--sun-soft); border-color: var(--sun-line); color: var(--sun-ink); }
.xfig { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--sky-soft); border: 2px dashed var(--sky-line); font-size: 15px; }
.xq { font-size: 19px; line-height: 1.55; margin: 0; white-space: pre-line; } .xq.sm { font-size: 16px; }
.xopts { display: grid; gap: 10px; }
.xopt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; text-align: left; border-radius: 16px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); color: var(--fg); font: inherit; font-size: 17px; cursor: pointer; }
.xopt .xl { flex: none; width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; border: 2px solid var(--line); font-weight: 800; color: var(--muted); }
.xopt[aria-checked="true"] { border-color: var(--sky); background: var(--sky-soft); }
.xopt[aria-checked="true"] .xl { background: var(--sky); border-color: var(--sky); color: #fff; }
.xclear { justify-self: start; width: auto; }
.xbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--line); }
.xbar .in { max-width: 560px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; }
.xbar .btn { min-height: 50px; } .xbar #xprev { font-size: 26px; padding: 0; } .xbar #xnext { width: auto; min-width: 104px; }
.xcount { position: relative; overflow: hidden; min-height: 50px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; }
.xcount i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--sky); }
body:has(.xbar) .fbfab { display: none; }
.xmaphd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.xlegend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); } .xlegend span { display: flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--line); background: var(--surface); } .lg.a { background: var(--sky); border-color: var(--sky); } .lg.f { border-color: var(--sun); background: var(--sun-soft); }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.xgrid button { min-height: 46px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-weight: 800; color: var(--fg); cursor: pointer; position: relative; }
.xgrid button.a { background: var(--sky); border-color: var(--sky); color: #fff; }
.xgrid button.f { box-shadow: inset 0 0 0 3px var(--sun); } .xgrid button.f::after { content: '🚩'; position: absolute; top: -8px; right: -6px; font-size: 12px; }
.xgrid button.c { outline: 3px solid var(--fg); outline-offset: 1px; }
.xwarn { padding: 10px 12px; border-radius: 12px; background: var(--sun-soft); color: var(--sun-ink); font-weight: 700; margin: 0; }
.xres { display: flex; align-items: center; gap: 16px; } .xring { width: 120px; flex: none; }
.xrp { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--fg); } .xrs { font-size: 13px; fill: var(--muted); font-weight: 700; }
.xtopics { display: grid; gap: 8px; margin-top: 8px; } .xtp { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; align-items: center; font-size: 15px; }
.xtb { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .xtb i { display: block; height: 100%; border-radius: 99px; }
.xrevs { display: grid; gap: 12px; }
.xrev { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); border-left-width: 6px; }
.xrev.ok { border-left-color: var(--accent); } .xrev.no { border-left-color: var(--sun); } .xrev.skip { border-left-color: var(--muted); }
.xrh { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.xmine { color: var(--sun-ink); } .xright { color: var(--accent-deep); }
.xwhy { justify-self: start; width: auto; padding: 0; min-height: 44px; }
.xwhyt { white-space: pre-line; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 15px; line-height: 1.6; }
/* ---------- welcome tour ---------- */
.tourcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sky-soft); border: 2px solid var(--sky-line); color: var(--fg); text-decoration: none; }
.tourcard .eico { font-size: 26px; } .tourcard small { display: block; color: var(--muted); font-size: 13px; }
.tour { display: grid; gap: 18px; min-height: calc(100dvh - 140px); grid-template-rows: auto 1fr auto auto; }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tdots { display: flex; gap: 6px; } .tdots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .2s; } .tdots i.past { background: var(--accent-line); } .tdots i.on { width: 22px; background: var(--accent); }
.tart { display: grid; place-items: center; min-height: 230px; border-radius: 28px; background: var(--hs); border: 2px solid color-mix(in srgb, var(--h) 30%, transparent); overflow: hidden; animation: tin .35s ease; }
.tcopy { display: grid; gap: 8px; animation: tin .35s ease; } .tcopy h1 { font-size: 28px; margin: 0; } .tcopy p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--fg); }
.tnav { display: flex; gap: 10px; }
@keyframes tin { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tart, .tcopy { animation: none !important; } }
/* tour examples: real lesson content in small cards */
.tart > div { width: min(300px, 100%); }
.tart { padding: 16px; }
.tx-card, .tx-page { display: grid; gap: 8px; background: var(--surface); border-radius: 18px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.08); font-size: 15px; text-align: left; }
.tx-eb { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tx-h { display: flex; gap: 8px; align-items: center; font-family: var(--display); font-weight: 800; font-size: 18px; } .tx-sec { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--h); color: #fff; font-family: var(--body); font-size: 13px; }
.tx-p, .tx-q { margin: 0; line-height: 1.45; } .tx-q { font-weight: 700; } .tx-q.sm { font-weight: 800; color: var(--muted); font-size: 13px; }
.tx-def { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--hs); border-left: 4px solid var(--h); } .tx-def b { font-size: 18px; }
.tx-tags { display: flex; gap: 6px; flex-wrap: wrap; } .tx-tags span, .tx-pill { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 800; }
.tx-chip { justify-self: start; padding: 3px 10px; border-radius: 99px; background: var(--hs); color: var(--fg); font-size: 13px; font-weight: 800; }
.tx-opts { display: flex; gap: 8px; } .tx-opts button { flex: 1; min-height: 46px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font: inherit; font-weight: 800; font-size: 18px; color: var(--fg); cursor: pointer; }
.tx-opts button[aria-pressed="true"] { border-color: var(--h); background: var(--hs); }
.tx-out { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 14px; } .tx-out.ok { background: var(--accent-soft); color: var(--accent-deep); } .tx-out.no { background: var(--sun-soft); color: var(--sun-ink); } .tx-out.big { font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tx-grid { display: grid; gap: 3px; width: 150px; height: 150px; justify-self: center; } .tx-grid i { border-radius: 4px; background: var(--h); opacity: .85; }
.tart input[type=range] { width: 100%; min-height: 44px; accent-color: var(--h); }
.tx-step { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; } .tx-step.no { background: var(--sun-soft); color: var(--sun-ink); font-weight: 700; } .tx-step.clue { background: var(--sky-soft); } .tx-step.ok { background: var(--accent-soft); } .tx-step.sm { font-size: 13px; color: var(--muted); }
.tx-lv > div:not(.tx-out) { display: grid; grid-template-columns: 52px 1fr; gap: 0 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); } .tx-lv b { grid-column: 2; font-size: 15px; } .tx-lv span:not(.tx-st) { font-size: 12px; color: var(--muted); font-weight: 800; } .tx-st { grid-row: span 2; color: var(--sun-deep); font-weight: 800; }
.tx-link { justify-self: start; min-height: 44px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--sky-line); background: var(--sky-soft); color: var(--sky); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; } .tx-link:disabled { opacity: .7; }
.tx-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tx-clock { padding: 3px 10px; border-radius: 99px; background: var(--sky-soft); color: var(--sky); font-weight: 800; font-size: 13px; white-space: nowrap; }
.tx-res { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; } .tx-res i { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--w), var(--surface-2) var(--w)); } .tx-res i.lo { background: linear-gradient(90deg, var(--sun) var(--w), var(--surface-2) var(--w)); }
.tx-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .tx-map button { height: 32px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; border: 2px solid var(--line); } .tx-map button.a { background: var(--sky); border-color: var(--sky); color: #fff; } .tx-map button.f { box-shadow: inset 0 0 0 3px var(--sun); } .tx-map button.c { outline: 3px solid var(--fg); }
.tx-bubble { max-width: 85%; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--accent-soft); font-size: 14px; } .tx-bubble.me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--surface-2); }
.xtp .small { white-space: nowrap; } .xtp[hidden] { display: none; }
.updbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 20; white-space: nowrap; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--fg); color: var(--bg); font: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; max-width: calc(100% - 32px); }
.tx-map button { background: var(--surface); color: var(--fg); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; height: auto; min-height: 36px; }
.tx-opts button.ok { border-color: var(--accent); background: var(--accent-soft); } .tx-opts button.no { border-color: var(--sun); background: var(--sun-soft); opacity: .7; }
.tx-res i { transition: background .5s ease; } #txstr { display: grid; gap: 6px; } #txstr[hidden] { display: none; }
/* ---------- puzzles and labs ---------- */
.pz { display: grid; gap: 10px; }
.pzgoal { padding: 8px 12px; border-radius: 12px; background: var(--sun-soft); border: 2px dashed var(--sun-line); font-weight: 800; }
.pzgoal .pzok { color: var(--accent-deep); margin-left: 6px; } .pz.won .pzgoal { background: var(--accent-soft); border-color: var(--accent-line); }
.pzbody { display: grid; gap: 10px; }
.pzmsg { min-height: 20px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 15px; white-space: pre-line; } .pzmsg:empty { display: none; }
.pzmsg.no { background: var(--sun-soft); color: var(--sun-ink); } .pzmsg.ok { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.pzrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pzrow .btn { width: auto; min-height: 44px; } .btn.small { font-size: 15px; padding: 0 14px; }
.pzchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pzchips button { min-width: 46px; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font: inherit; font-size: 19px; font-weight: 800; color: var(--fg); cursor: pointer; }
.pzchips button:disabled { opacity: .35; } .pznums button { background: var(--sky-soft); border-color: var(--sky-line); } .pzops button.uni { background: var(--accent-soft); border-color: var(--accent-line); }
.pztgt { display: flex; align-items: baseline; gap: 10px; } .pztgt b { font-family: var(--display); font-size: 34px; }
.pzexpr { min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .pzeq { color: var(--accent-deep); }
.pzbag { font-size: 15px; } .pzbag .pzcount { font-family: var(--display); font-size: 26px; } .pzcount.neg { color: var(--sun-deep); }
.pzgrid { display: grid; gap: 3px; width: 100%; max-width: 220px; aspect-ratio: 1; } .pzgrid i { border-radius: 3px; background: var(--sun); opacity: .9; } .pzgrid.big { justify-self: center; }
.pzgridwrap.over .pzgrid i { background: var(--sun-line); } .pzlayers { display: flex; gap: 6px; flex-wrap: wrap; } .pzlayers .pzgrid { width: 64px; }
.pzside { font-size: 18px; flex: 1; text-align: center; } .pzside b { color: var(--accent-deep); }
.pzin { min-height: 46px; width: 110px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-size: 18px; }
.pzst2 { display: grid; gap: 8px; } .pzst2[hidden] { display: none; }
.pzsvg { width: 100%; max-width: 240px; justify-self: center; } .pzsvg.wide { max-width: 320px; }
.pzatom { display: grid; gap: 6px; } .pzread { display: grid; gap: 2px; text-align: center; font-size: 14px; } .pzread b { font-size: 17px; }
.pzctl { display: grid; gap: 6px; } .pzc { display: grid; grid-template-columns: 1fr 44px 40px 44px; align-items: center; gap: 6px; font-weight: 700; }
.pzc button { min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; } .pzc b { text-align: center; font-size: 20px; }
.pzc.p span { color: #C9403E; } .pzc.n span { color: #6B766F; } .pzc.e span { color: var(--sky); }
.pzmol { display: grid; gap: 6px; } .pzformula { text-align: center; font-family: var(--display); font-size: 28px; font-weight: 800; min-height: 36px; }
.pzatoms button { display: inline-flex; align-items: center; gap: 6px; } .pzatoms i { width: 16px; height: 16px; border-radius: 99px; border: 1px solid #0003; }
.pzq.done .pz { opacity: 1; } .pzq.skipped .pz { opacity: .6; }
/* ---------- search ---------- */
.srbtn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; width: 100%; }
.srch { display: grid; gap: 10px; min-height: 60vh; }
.srchbox { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 6px 0 12px; border-radius: 14px; border: 2px solid var(--sky); background: var(--surface); }
.srchbox input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--fg); outline: none; }
.srres { display: grid; gap: 6px; }
.srr { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); color: var(--fg); text-decoration: none; }
.srr b { display: block; font-size: 15px; } .srr small { display: block; color: var(--muted); font-size: 12px; } .srk { font-size: 20px; } .srta { font-weight: 600; color: var(--muted); }
.srch, .srch > *, .srr, .srr .grow { min-width: 0; } .srr .grow { overflow: hidden; } .srr b, .srr small { overflow-wrap: anywhere; }
.sheet .in > .srch { width: 100%; }