/* Libri additions for the practice and feedback screens (Kertas 1 and Kertas 2 practice, Paper 1/2 feedback, Test Your Current Level, mixed practice).
   Loaded after app.css. Style new classes here; change existing classes only inside
   phone media queries (max-width 820px / 560px), so the desktop design is unchanged.
   Tokens only: no new colour, size or radius values. */

/* ---- Buttons with a shorter phone label (ui/core.js Button `short`) ------------------ */
.btn__short { display: none; }

/* ---- Reference chip: on touch screens the section title is a line inside the chip
   (ui/core.js RefChip); a mouse keeps the tooltip (libri.css). ------------------------ */
.ref-chip__title { display: none; }

/* ---- Paper 1 feedback: references and actions (ui/core.js Paper1Feedback) ------------- */
.fb__refs { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); min-width: 0; }

/* Approved textbook photos under Supporting facts (M8): Libri's label, Tingkatan, Bab
   and page, never a page link (rule 7). */
.fact-pics { display: flex; flex-direction: column; gap: var(--space-2); }
.fact-pics__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.fact-pics__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-4); max-width: 72ch; }
.fact-pics figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fact-pics img { display: block; width: 100%; height: 160px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fact-pics figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--fg-muted); }
.fact-pics__where { font-family: var(--font-mono); color: var(--fg-subtle); }

/* ---- Exam pictures and the picture viewer (ui/core.js ExamPictures, PictureViewer) ---- */
.exam-pics__item { position: relative; }
.exam-pics__frame { display: block; max-width: 100%; }
.exam-pics__hint { display: none; }
@media (hover: hover) and (pointer: fine) { .exam-pics__item { cursor: zoom-in; } }

.zoom { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: color-mix(in srgb, var(--brand-ink) 94%, transparent); }
.zoom__bar { display: flex; align-items: center; gap: var(--space-3); padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) var(--space-2) var(--space-5);
             background: var(--surface); border-bottom: 1px solid var(--line); }
.zoom__bar strong { flex: 1; min-width: 0; color: var(--brand-ink); }
.zoom__body { flex: 1; min-height: 0; display: flex; overflow: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.zoom__body:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
/* Its own size: centred when it fits, scrolled from its top left corner when it does not. */
.zoom__body img { flex: none; margin: auto; width: auto; height: auto; max-width: none; background: var(--surface); border-radius: var(--radius-sm); }
.zoom__body.is-fit img { flex: 0 1 auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- Paper 2 feedback: the marker's criteria (M24) and the daily limit (M27) ---------- */
.crit { display: flex; flex-direction: column; gap: var(--space-2); }
.crit__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.crit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.crit__row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.crit__verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); }
.crit__verdict svg { width: 18px; height: 18px; flex: none; }
.crit__name { font-weight: var(--weight-bold); color: var(--fg); }
.crit__word { font-weight: var(--weight-semi); }
.crit__word::before { content: "·"; margin-right: 6px; color: var(--fg-subtle); }
.crit__row--meets svg, .crit__row--meets .crit__word { color: var(--correct); }
.crit__row--partly svg, .crit__row--partly .crit__word { color: var(--warning); }
.crit__row--notyet svg, .crit__row--notyet .crit__word { color: var(--incorrect); }
.crit__row--na svg, .crit__row--na .crit__word { color: var(--fg-subtle); }
.crit__note { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--fg-muted); }
.p2fb__limit p:first-child { font-weight: var(--weight-semi); color: var(--fg); }

/* Main points (isi-isi penting) under a checked part, collapsed (M26, screen 20). */
.p2pts { border-top: 1px solid var(--line); }
.p2pts__toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-4) var(--space-6); border: 0; background: var(--surface-2);
                 color: var(--brand-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); text-align: left; cursor: pointer; }
.p2pts__toggle > span { flex: 1; min-width: 0; }
.p2pts__toggle svg { width: 18px; height: 18px; flex: none; color: var(--brand-blue); }
.p2pts__toggle:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
@media (hover: hover) { .p2pts__toggle:hover { background: var(--surface-3); } }
.p2pts__chev { transition: transform var(--dur-fast) var(--ease); }
.p2pts.is-open .p2pts__chev { transform: rotate(90deg); }
.p2pts__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-5); }
.p2pts__body[hidden] { display: none; }
.p2pts__body .pts__list { align-self: stretch; max-width: 72ch; }
.p2pts__body .pts__list span { min-width: 0; overflow-wrap: anywhere; }   /* stored points can run words together */
.p2pts__lead { font-size: var(--text-sm); color: var(--fg-muted); }
.p2pts__note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-sm); }
.p2pts__note svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* ---- Mixed practice (screens/practice.js Mixed*) ------------------------------------- */
.mx-babs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mx-bab { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--brand-blue-soft); color: var(--brand-blue);
          font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semi); white-space: nowrap; }
.mx-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-2); }
.mx-where { font-size: var(--text-xs); }
.mx-bybab { list-style: none; margin: 0; padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; }
.mx-bybab li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-2); }
.mx-bybab li + li { border-top: 1px solid var(--line); }
.mx-bybab__bab { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--brand-blue); white-space: nowrap; }
.mx-bybab__name { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.mx-bybab__score { font-size: var(--text-sm); color: var(--fg-muted); white-space: nowrap; }

/* ---- Touch screens (no hover) ---------------------------------------------------------- */
@media (hover: none) {
  /* P21: the section title as a line inside the chip, not a tooltip that a tap leaves
     open and the screen edge cuts off. */
  .ref-chip { flex-wrap: wrap; row-gap: 2px; white-space: normal; max-width: 100%; }
  .ref-chip[data-title]::after { display: none; }
  .ref-chip__title { display: block; flex: 1 1 100%; padding-left: calc(14px + var(--space-2)); font-family: var(--font-ui); line-height: var(--leading-snug); color: var(--fg-muted); }
  /* P11: say, under the picture, that it opens larger (not over it: its printed
     labels are part of the question). */
  .exam-pics__hint { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-subtle); }
  .exam-pics__hint svg { width: 14px; height: 14px; }
}

/* ---- Phones (560 px and under) ----------------------------------------------------------
   The shared phone rules in app.css already make the Kertas 1 feedback footer a sticky
   Previous / Next bar above the tab bar (P13: .fb__foot > .ds-row, which is
   .fb__actions here), give the explanation-language switch its own row and wrap test
   footers (P12, P1: .fb__label, .qcard__foot .nav-row) and put the score ring above the
   heading (P29: .score-hero). Only what they leave out is here. */
@media (max-width: 560px) {
  /* P1: a button's short label, where it has one ("Flag" for "Flag for review"). */
  .btn__long { display: none; }
  .btn__short { display: inline; }
  /* P12: the globe stays and the word "Explanation" goes (it is still the group's
     accessible name), so the four languages fit on one row. */
  .seg--lang .seg__label { padding: 0 4px; }
  .seg--lang .seg__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* P11: a picture much wider than the column shows at half its own size in a frame
     that scrolls sideways (its printed words stay readable); a tap opens the viewer. */
  .exam-pics__item--wide { width: 100%; }
  .exam-pics__item--wide .exam-pics__frame { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-sm); }
  .exam-pics__item--wide img { width: calc(var(--pic-w) / 2); max-width: none; }
  /* P15: the time chart's table first (ui/tests.js), in place of the chart. */
  .timebars--table .timebars__plot { display: none; }
  .timebars__table { max-height: 60vh; }
  /* P29: a smaller score ring (its inline size is the desktop one, hence !important). */
  .score-hero > .ring { width: 80px !important; height: 80px !important; }
  .score-hero > .ring > svg { width: 80px; height: 80px; }
  .score-hero > .ring > .ring__label { font-size: var(--text-md) !important; }
  /* New pieces at phone width. */
  .fact-pics__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .fact-pics img { height: 120px; }
  .p2pts__toggle { padding: var(--space-3) var(--space-5); }
  .p2pts__body { padding: var(--space-3) var(--space-5) var(--space-4); }
  .mx-bybab { padding: var(--space-1) var(--space-2); }
  .mx-bybab li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .mx-bybab__name { grid-column: 1 / -1; grid-row: 2; }
  .mx-bybab li > .btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}