/* ==========================================================================
   Libri app additions  —  app.css
   Styles the live app needs beyond the ported prototype (libri.css): real
   links instead of buttons, exam pictures, stub markers, and the narrow-screen
   fallbacks the spec asks for (Pass 1 is desktop; smaller screens must not
   break). Tokens only - no new colour or size values.
   ========================================================================== */

a.nav-item, a.acct__link, a.sidebar__brand, a.acct__logo { text-decoration: none; }
a.sidebar__brand, a.acct__logo { display: inline-flex; color: inherit; }

/* A question's own picture, cut from the exam paper (never a textbook image). */
.exam-pics { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.exam-pics a { display: block; max-width: 100%; }
.exam-pics img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.exam-stimulus { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: var(--radius-sm); }
.stimulus__text { white-space: pre-line; }

/* A question's source line (never a paper's name: rule 13). */
.qsource { font-size: var(--text-xs); color: var(--fg-subtle); }

/* Marks data that is stubbed or kept only in this browser. */
.stub-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-subtle); }
.stub-note svg { flex: none; width: 14px; height: 14px; }
.stub-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px dashed var(--line-strong); font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-subtle); }

.fb__notes { display: flex; flex-direction: column; gap: var(--space-3); }
.point__quote { display: block; font-family: var(--font-exam); color: var(--fg-muted); }
/* Paper 2: statements the textbook passages could not confirm or contradict (rule 5). */
.point--unchecked svg { color: var(--fg-subtle); }
.point--unchecked > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rcard.is-disabled { opacity: 0.55; cursor: not-allowed; }

.rate { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-muted); }
.related__pics { display: flex; flex-direction: column; gap: var(--space-3); }
/* Search: textbook photos that match (the old Gambar tab). */
.photo-grid { list-style: none; margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-5); }
.photo-grid li { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 0; }
.photo-grid figure { width: 100%; }

/* "Practise again" is longer than the prototype's 128px action column. */
.set-row { grid-template-columns: 40px minmax(0, 1fr) 220px minmax(128px, max-content); }

/* Soalan answers keep their line breaks; textbook figures are shown whole. */
.answer-card__bm { white-space: pre-line; }
.related__photo img { object-fit: contain; background: var(--surface); }

/* ---- Real Exam and Past Papers (screens 28-34) ---------------------------------- */
.lx-k2 .qpart__stem { grid-template-columns: minmax(32px, max-content) minmax(0, 1fr) auto; }
.lx-k2 .qpart__label { white-space: nowrap; }
.lx-k2 .qcard__stem { overflow-wrap: anywhere; }
.lx-k1res { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.lx-k1res__grid { max-width: 520px; justify-self: end; width: 100%; }
.lx-rowacts { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.lx-confirm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lx-confirm li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--brand-blue); border-radius: var(--radius-md); background: var(--brand-blue-soft); font-size: var(--text-sm); }
.lx-confirm li.is-blank { border-color: var(--warning-line); background: var(--warning-soft); }
.lx-confirm li > svg { width: 18px; height: 18px; margin-top: 2px; color: var(--brand-blue); }
.lx-confirm li.is-blank > svg, .lx-confirm li.is-blank .lx-confirm__n { color: var(--warning); }
.lx-confirm__n { font-weight: var(--weight-semi); white-space: nowrap; }
.lx-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); }
.lx-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.lx-unsure { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lx-unsure .content-tag--unsure { font-size: var(--text-xs); }
@media (max-width: 1100px) {
  .lx-k1res { grid-template-columns: auto minmax(0, 1fr); }
  .lx-k1res__grid { grid-column: 1 / -1; justify-self: stretch; max-width: none; }
}
@media (max-width: 820px) {
  .k2list { padding: var(--space-2) var(--space-4) var(--space-4); }
  .k2list li { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-2); }
  .k2list li > .k2list__name, .k2list li > .lx-rowacts { grid-column: 1 / -1; }
  .k2list li > .lx-rowacts { justify-content: flex-start; }
  /* Results by Bab (Real Exam, Past Papers and Test Your Current Level): the name keeps
     the row's width; the bar and the strength tag go under it. */
  .chap-row { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .chap-row > :nth-child(n+3) { grid-column: 2; }
  .chap-row > :nth-child(4):empty { display: none; }
  .pp-table, .pp-table tbody, .pp-table tr, .pp-table th, .pp-table td { display: block; width: 100%; }
  .pp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-table tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .pp-table tr:last-child { border-bottom: 0; }
  .pp-table td { padding: var(--space-2) 0; border: 0; }
  .pp-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
}
@media (max-width: 560px) {
  .lx-k1res { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .lx-k1res .setmap--lg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lx-confirm li, .pick__row { grid-template-columns: 20px minmax(0, 1fr); }
  .lx-confirm li > :nth-child(3), .pick__row > :nth-child(3) { grid-column: 2; }
}

/* ---- Phones and small tablets (820 px and under) -------------------------------
   The desktop design (Pass 1) is 1440 px. Under 820 px Libri switches to a phone
   layout: no sidebar but a bottom tab bar with a More sheet; a compact top bar; the
   account bar's links in a Menu sheet; a one-line exam bar; dialogs as bottom
   sheets; touch-sized controls; inputs at 16 px so iPhones do not zoom on focus.
   Last in the file so these win over the desktop rules above. */

/* The phone-only pieces stay hidden on larger screens. */
.tabbar, .topbar__logo, .topbar__search, .acct__menu { display: none; }

/* Touch screens: controls big enough for a thumb (about 44 px); a mouse keeps the
   design's sizes. */
@media (pointer: coarse) {
  .btn { height: 44px; }
  .btn--sm { height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .seg button { min-height: 40px; }
}

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--brand-ink) 45%, transparent); }
.sheet__panel { width: 100%; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3) var(--space-3); color: var(--brand-ink); }
.sheet__body { display: flex; flex-direction: column; gap: 2px; }
.sheet .nav-item { min-height: 48px; font-size: var(--text-base); }
body.is-sheet-open { overflow: hidden; }

@media (max-width: 1100px) {
  .split, .ov-grid, .forms, .settings, .auth, .land-hero { grid-template-columns: minmax(0, 1fr) !important; }
  .rail { position: static; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: var(--bg); }
  .sidebar { display: none; }
  /* Top bar: logo, then search, notifications and the profile picture. */
  .topbar { height: 56px; padding: 0 var(--space-4); gap: var(--space-2); }
  .topbar__logo { display: inline-flex; align-items: center; text-decoration: none; }
  .search-field { display: none; }
  .topbar__search { display: grid; }
  .topbar__right, .acct__right { min-width: 0; gap: var(--space-2); }
  .profile-btn { min-width: 0; padding: 3px; }
  .profile-btn__handle { display: none; }
  /* Bottom tab bar, clear of the iPhone home indicator. */
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
            padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: var(--radius-md);
                  background: none; color: var(--fg-muted); font: inherit; font-size: 0.75rem; font-weight: var(--weight-semi); line-height: 1.2; text-decoration: none; cursor: pointer; }
  .tabbar__item svg { width: 22px; height: 22px; flex: none; }
  .tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item.is-active { color: var(--brand-blue); }
  .tabbar__item.is-active svg { stroke-width: 2.2; }
  .shell .page { padding: var(--space-4) var(--space-4) calc(var(--space-12) + 60px + env(safe-area-inset-bottom)); }
  .focus__body { padding: var(--space-4) var(--space-4) calc(var(--space-12) + env(safe-area-inset-bottom)); }
  .acct__body { padding: var(--space-6) var(--space-4) var(--space-12); }
  /* Account bar: the links move into the Menu sheet. */
  .acct__bar { height: 60px; padding: 0 var(--space-4); gap: var(--space-3); }
  .acct__nav, .acct__right .acct__link { display: none; }
  .acct__menu { display: grid; }
  /* Exam and test bar: one line; the title shortens, Exit shows only its icon. */
  .focus__bar { height: auto; min-height: 56px; padding: var(--space-2) var(--space-4); gap: var(--space-3); flex-wrap: nowrap; }
  .focus__bar > .logo, .focus__divider { display: none; }
  .focus__title { flex: 1; }
  .focus__title strong, .focus__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .focus__right { flex: none; gap: var(--space-2); }
  .focus__exit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .timer { padding: 6px 10px; gap: var(--space-2); }
  .timer__label { display: none; }
  .timer__time { font-size: var(--text-md); }
  /* Dialogs rise from the bottom and fit the screen. */
  .overlay { place-items: end stretch; }
  .overlay__panel { width: 100%; max-height: 90vh; overflow-y: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); }
  /* iPhones zoom into any field under 16 px when it gets focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em) !important; }
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .hero, .bab-hero, .plans, .land-steps { grid-template-columns: minmax(0, 1fr); }
  .land-feats, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { overflow-x: auto; }
  .tab { flex: none; white-space: nowrap; }
  /* Practice set rows: number and title on top, progress and button below. */
  .set-row { grid-template-columns: 40px minmax(0, 1fr); }
  .set-row__progress, .set-row .btn { grid-column: 2; }
  .set-row .btn { justify-self: start; }
  /* Bab list rows (Tingkatan page): name, then sets, then status, under one another. */
  .bablist-row { grid-template-columns: 52px minmax(0, 1fr) 16px; row-gap: var(--space-2); }
  .bablist-row__num { grid-row: 1 / span 3; align-self: start; }
  .bablist-row__main, .bablist-row__sets, .bablist-row > .status { grid-column: 2; }
  .bablist-row > .bab-row__chev { grid-column: 3; grid-row: 1 / span 3; }
  .subject { grid-template-columns: minmax(0, 1fr); }
  .subject__cta { padding-top: 0; }
  .form-grid, .rcards--2, .rcards--4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .panel__head, .qcard__foot { flex-wrap: wrap; }
  /* Session header: the explanation-language switch and Exit go under the breadcrumb. */
  .session-head__row, .session-head__right { flex-wrap: wrap; }
  .session-head__right { min-width: 0; max-width: 100%; }
  .seg { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 560px) {
  .land-feats { grid-template-columns: minmax(0, 1fr); }
  .land-hero h1 { font-size: var(--text-3xl); }
  .sgrid__cells { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .plan, .onb-card { padding: var(--space-5); }
  /* Icon, text and action in one row: the action moves under the text. */
  .welcome, .continue, .callout, .catalogue__soon, .world { grid-template-columns: auto minmax(0, 1fr); }
  .welcome > :nth-child(3), .continue > :nth-child(3), .callout__action, .catalogue__soon > :nth-child(3), .world > :nth-child(3) { grid-column: 2; justify-self: start; }
  .form-panel__head > :nth-child(3) { grid-column: 2; justify-self: start; }
  /* Bab rows (Sejarah Home): the status moves under the name. */
  .bab-row { grid-template-columns: 36px minmax(0, 1fr) 16px; }
  .bab-row > :first-child { grid-row: 1 / span 2; }
  .bab-row > .status { grid-column: 2; grid-row: 2; justify-self: start; }
  .bab-row > .bab-row__chev { grid-column: 3; grid-row: 1 / span 2; }
  .rcard { grid-template-columns: auto auto minmax(0, 1fr); }
  .rcard__right { grid-column: 3; }
  .lb-head, .lb-row { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 0 var(--space-3); }
  /* Bahagian B choice list and Paper 2 part headings: the button and the marks move
     under the question text instead of squeezing it. */
  .bchoice li { grid-template-columns: 32px minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  .bchoice li > .btn { grid-column: 2; justify-self: start; }
  .qpart__stem, .lx-k2 .qpart__stem { grid-template-columns: minmax(32px, max-content) minmax(0, 1fr); }
  .qpart__stem > :nth-child(3) { grid-column: 2; }
  /* Search: each result's Open Bab button goes under it; photos two to a row. */
  .sresult { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .sresult > :last-child { justify-self: start; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-4); }
  /* Stepper: only the current step shows its name; the others keep it for screen readers. */
  .stepper__item:not(.is-now) .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- Phone usability fixes ------------------------------------------------------
   From the phone review: each rule applies only under 1100 / 820 / 560 px, or on a
   touch screen, so the 1440 px design is unchanged. */

/* Touch screens have no hover (libri.css keeps hover styles to mice), so a row or a
   button answers the finger while it is pressed instead. */
@media (hover: none) {
  .nav-item:active, .bab-row:active, .bablist-row:active, .check-row:active, .next-item:active,
  .abars__row:active, .crumbs button:active, .ds__index a:active, .input-eye:active, .nb-card__x:active { background: var(--surface-2); }
  .opt:active:not(.is-locked):not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
  .rcard:active { border-color: var(--line-strong); }
  .btn--primary:active:not([disabled]) { background: var(--brand-blue-strong); }
  .btn--secondary:active:not([disabled]) { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
  .btn--ghost:active:not([disabled]) { background: var(--surface-2); color: var(--fg); }
  .seg button:active:not([aria-pressed="true"]):not([disabled]), .tab:active:not([disabled]), .acct__link:active { color: var(--fg); }
  .rail-q:active, .nb-up button:active strong, .crumbs button:active { color: var(--brand-blue); }
  .link-btn:active { text-decoration: underline; }
}

/* Touch screens: the main ways back and the small controls get a 44 px target (a mouse
   keeps the design's sizes). */
@media (pointer: coarse) {
  .crumbs button { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-2); }
  .crumbs li:first-child > button { margin-inline-start: calc(-1 * var(--space-1)); }
  .collapse__btn { min-height: 44px; padding-block: 10px; }
  .rail-card p > a { padding-block: 12px; }
  .switch, .abars__row { min-height: 44px; }
  button.status { min-height: 44px; padding-inline: 14px; }
  .nb-card__x { top: 7px; right: 7px; width: 44px; height: 44px; }
  .input-eye { right: 0; width: 44px; height: 44px; }
}

@media (max-width: 1100px) {
  /* Settings: the section links become a row of chips above the form, instead of a
     sticky column drawn over the fields as the page scrolls. */
  .settings__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .settings__nav a { border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
  .settings__nav a.is-active { border-color: var(--brand-blue); }
}
/* Tablets: the question navigator in the full-width rail, ten to a row at a thumb's
   size, not five squares of 130 px. */
@media (min-width: 561px) and (max-width: 1100px) {
  .rail .setmap { grid-template-columns: repeat(10, minmax(0, 56px)); }
}

@media (max-width: 820px) {
  /* Kertas 1 feedback (ui/core.js Paper1Feedback): the footer's two parts become rows of
     the panel. The textbook references (.fb__refs) come first; the Previous / Next bar
     (.fb__actions) stays in view at the bottom of the screen, above the tab bar in the
     app, while the long explanation scrolls. overflow: clip keeps the rounded corners
     without making the card a scroll box, which would stop the bar from sticking. The
     two buttons share the bar by the length of their labels; a label that still does
     not fit wraps inside its button. */
  .fb { overflow: clip; }
  .fb__foot { display: contents; }
  .fb__foot > :not(.ds-row) { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-2); }
  .fb__foot > .ds-row { position: sticky; bottom: 0; z-index: 20; flex-wrap: nowrap; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
                        background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .shell .fb__foot > .ds-row { bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom: var(--space-3); }
  .fb__foot > .ds-row > .btn { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
  /* Stop-and-review card: "Read this" goes under the key idea. */
  .review-card { grid-template-columns: minmax(0, 1fr); }
  .review-card__side { border-left: 0; border-top: 1px solid var(--line); }
  /* Onboarding and plan set-up: Back and Continue stay in view at the bottom of the
     screen (above the tab bar in the app) while a long list scrolls. */
  .onb-foot { position: sticky; bottom: 0; z-index: 2; margin-inline: calc(-1 * var(--space-8));
              padding: var(--space-3) var(--space-8) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface); }
  .shell .onb-foot { bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom: var(--space-3); }
  /* Bab page: a shorter photo, and only the tab that is open (the others are not ready). */
  .bab-hero__photo { min-height: 140px; height: 140px; }
  .tabs .tab[disabled] { display: none; }
  /* Text stays at 14 px or more (tags, labels and photo captions were 10 to 13 px). */
  .lb-you, .lb-how li em, .lb-hidden, .fb__ref-label, .stat__label, .paper-card__stats dt, .score-badge__tag, .seg__soon,
  .continue__badge small, .bablist-row__num small,
  .related__photo figcaption, .hero__photo figcaption small, .bab-hero__photo figcaption, .land-visual__photo figcaption { font-size: var(--text-xs); }
  .lb-avatar { width: 36px; height: 36px; font-size: var(--text-xs); }
  /* A reference chip's section title wraps inside the screen. */
  .ref-chip[data-title]::after { width: max-content; max-width: min(320px, calc(100vw - 64px)); white-space: normal; }
  /* Design-system page (internal): one column. */
  .ds { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); }
  .ds__index { position: static; flex-direction: row; gap: var(--space-1); overflow-x: auto; }
  .ds__index a { flex: none; white-space: nowrap; }
  .ds-board { padding: var(--space-4); }
  .ds-grid--2, .ds-grid--3, .ds-grid--4, .type-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* A button never runs past its box: a label too long for the screen (often in Bahasa
     Melayu) wraps onto a second line, and the button grows. One-line buttons keep the
     design's heights (min-height). */
  .btn { max-width: 100%; height: auto; min-height: 40px; padding-block: 6px; line-height: 1.25; white-space: normal; text-align: center; }
  .btn--sm { min-height: 32px; padding-block: 4px; }
  .btn--lg { min-height: 48px; }
  /* The sticky step footer spans the card's narrower phone padding. */
  .onb-foot { margin-inline: calc(-1 * var(--space-5)); padding-inline: var(--space-5); }
  /* Reference chips wrap rather than run past the card. */
  .ref-chip { flex-wrap: wrap; row-gap: 2px; max-width: 100%; white-space: normal; }
  /* Question footers in tests and exams: the buttons wrap instead of running off the
     card, and they fill their row, so the main action (Next, Submit) takes a full row
     when it does not fit beside the others. */
  .qcard__foot > :empty { display: none; }
  .qcard__foot .nav-row, .qcard__foot.nav-row { flex-wrap: wrap; min-width: 0; row-gap: var(--space-2); }
  .qcard__foot .nav-row > .spacer { display: none; }
  .qcard__foot .btn { flex: 1 1 auto; }
  /* Kertas 2 feedback: content, then structure, one under the other. */
  .p2fb__grid { grid-template-columns: minmax(0, 1fr); }
  .p2fb__area { padding: var(--space-4) var(--space-5); }
  .p2fb__area + .p2fb__area { border-left: 0; border-top: 1px solid var(--line); }
  /* Main points of a question not answered: the two buttons go under the question. */
  .pts__head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .pts__head > .ds-row { flex-wrap: wrap; }
  .pts__head > .ds-row .btn { flex: 1 1 auto; }
  /* Soalan: the related photo goes under the list of sections. */
  .related { grid-template-columns: minmax(0, 1fr); }
  /* The explanation-language switch gets its own row under the label. */
  .fb__label { flex-wrap: wrap; row-gap: var(--space-2); }
  .fb__label > .seg { flex: 1 1 100%; }
  .session-head__right > .seg { flex: 1 1 auto; }
  .fb__label > .seg button, .session-head__right > .seg button { flex: 1 1 auto; padding-inline: var(--space-2); }
  .seg button { white-space: nowrap; }
  /* Segmented controls with long labels: two to a row across the width (four would fit
     "20 min" but not "20 minit"). An odd last option takes the whole row. */
  .plan-field .seg, .field > .seg, .pp-filters .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pp-filters .seg > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .field > .seg .seg__soon { display: block; width: max-content; margin: 2px auto 0; }
  /* Overview: the four evidence tiles two to a row, compact. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .tiles .stat-tile { padding: var(--space-4); }
  .tiles .stat-tile__icon { margin-bottom: 0; }
  .tiles .stat-tile__value { font-size: var(--text-xl); }
  /* Results: the score ring above the heading, which keeps the full width. */
  .score-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-4); padding: var(--space-5); }
  /* Settings rows (profile, subscription, log out): the button goes under the text when
     the two do not fit side by side. */
  .row-between { flex-wrap: wrap; row-gap: var(--space-3); }
  /* Leaderboard: the three periods share the width, so "Sepanjang Masa" is not cut off. */
  .lb-controls .tabs { width: 100%; }
  .lb-controls .tab { flex: 1 1 auto; justify-content: center; padding-inline: var(--space-2); }
}
/* Phones with touch: the wrapping buttons above keep the 44 px touch heights. */
@media (max-width: 560px) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
}

/* ---- Follow-up phone fixes ------------------------------------------------------- */
.level-start { display: flex; flex-direction: column; gap: var(--space-2); }
.level-start__sum { display: none; }
@media (max-width: 820px) {
  /* Test Your Current Level: the count and Start stay in reach above the tab bar while
     the student ticks Bab further up the page. */
  .level-start { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 20;
                 padding: var(--space-3) var(--space-4); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .level-start__sum { display: block; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
  .shell .page:has(.level-start) { padding-bottom: calc(var(--space-12) + 60px + 130px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  /* Bab page: the practice sets come before anything decorative. */
  .bab-hero__photo { display: none; }
  /* Checklists: a long status pill goes under the title instead of squeezing it. */
  .check-row { grid-template-columns: 22px minmax(0, 1fr); }
  .check-row > .status { grid-column: 2; justify-self: start; }
}