/* ==========================================================================
   Libri admin console and "Improve this answer"  —  app-admin.css
   screens/admin.js (adm-*): the console for the Libri team, built on the app's
   own shell, panels, tiles and tables. ui/feedback.js (imp-*): the students'
   "Improve this answer" sheet. Loaded after app-screens.css. Tokens only - no
   new colour or size values. Desktop first; phones (820 px and under) get one
   column, cards instead of wide tables and the bottom tab bar.
   ========================================================================== */

/* ---- Shell: top bar, sidebar foot, phone tab bar ---------------------------------- */
.adm-top__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--brand-ink); color: var(--bg); font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; }
.adm-top__badge svg { width: 14px; height: 14px; flex: none; }
.adm-top__short { display: none; }
.adm-top__who { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--fg-muted); }
a.adm-top__libri { text-decoration: none; }
.adm-foot { display: flex; gap: var(--space-2); align-items: flex-start; }
.adm-foot svg { width: 14px; height: 14px; flex: none; margin-top: 4px; }
.adm-wait { margin-inline: auto; }

/* Signed out / not an admin (in the Libri website's frame). */
.adm-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4);
  padding: var(--space-10) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.adm-gate__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-blue-soft); color: var(--brand-blue); }
.adm-gate__icon svg { width: 26px; height: 26px; }
.adm-gate h1 { font-size: var(--text-xl); }
.adm-gate p { max-width: 44ch; color: var(--fg-muted); font-size: var(--text-sm); }

/* ---- Shared pieces ------------------------------------------------------------------ */
.adm-small { font-size: var(--text-xs); }
.adm-push { margin-left: auto; }
.adm-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.adm-panel .panel__head { flex-wrap: wrap; }
.adm-panel__lead { padding-bottom: 0; }
.adm-skel { display: flex; flex-direction: column; gap: var(--space-4); }
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list > li { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.adm-list > li:first-child { border-top: 0; }

/* Chips: what a suggestion is about, its status, who drafted it. Each carries a word. */
.adm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--surface-2); color: var(--fg-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.5;
  white-space: nowrap; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.adm-chip svg { width: 13px; height: 13px; flex: none; }
.adm-chip--target-soalan { background: var(--info-soft); color: var(--brand-blue); }
.adm-chip--target-k1 { background: var(--status-refresh-soft); color: var(--status-refresh); }
.adm-chip--target-k2 { background: var(--surface-3); color: var(--brand-ink); }
.adm-chip--target-other { border-color: var(--line); }
.adm-chip--status-new { background: var(--info-soft); color: var(--info); }
.adm-chip--status-approved { background: var(--correct-soft); color: var(--correct); }
.adm-chip--status-rejected { background: var(--incorrect-soft); color: var(--incorrect); }
.adm-chip--status-revoked { background: var(--locked-soft); color: var(--locked); }
.adm-chip--agent { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); }
.adm-chip--persona { background: var(--surface-2); border-color: var(--line); color: var(--fg-muted); font-size: var(--text-xs); }
.adm-chip--first { background: var(--correct-soft); color: var(--correct); }

.adm-rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-semi); white-space: nowrap; }
.adm-rating svg { width: 14px; height: 14px; flex: none; }
.adm-rating--up { color: var(--correct); }
.adm-rating--down { color: var(--incorrect); }

/* A real paper's source and a real question id: for the admin's eyes only. */
.adm-src { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-xs); background: var(--warning-soft);
  color: var(--warning); font-size: var(--text-xs); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.adm-id, .adm-md code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-muted); background: var(--surface-2);
  padding: 1px 6px; border-radius: var(--radius-xs); overflow-wrap: anywhere; }

.adm-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.adm-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs);
  font-weight: var(--weight-semi); white-space: nowrap; background: var(--locked-soft); color: var(--locked); }
.adm-flag svg { width: 13px; height: 13px; flex: none; }
.adm-flag--idle { background: var(--warning-soft); color: var(--warning); }
.adm-flag--low { background: var(--incorrect-soft); color: var(--incorrect); }

.adm-clamp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.adm-clamp__text { font-size: var(--text-sm); white-space: pre-line; overflow-wrap: anywhere; }
.adm-clamp__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 4); line-clamp: var(--lines, 4); overflow: hidden; }

/* An AI output as stored (text, a Kertas 1 explanation, Kertas 2 feedback...). */
.adm-out { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-out__text { font-size: var(--text-sm); white-space: pre-line; overflow-wrap: anywhere; }
.adm-out__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.adm-out__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-out__opts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-sm); }
.adm-out__key { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-xs); border: 1px solid var(--line);
  background: var(--surface); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted); }
.adm-out__dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.adm-out__dl dt { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
.adm-out__dl dd { margin: 0; overflow-wrap: anywhere; }
/* A Kertas 1 question as students see it: the stem, each option with its reason, the key. */
.adm-out__stem { font-family: var(--font-exam); font-size: var(--text-sm); color: var(--fg); overflow-wrap: anywhere; }
.adm-out__h { margin: var(--space-1) 0 0; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
.adm-out__optbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-out__opt { font-family: var(--font-exam); font-weight: var(--weight-semi); color: var(--fg); overflow-wrap: anywhere; }
.adm-out__why { color: var(--fg-muted); overflow-wrap: anywhere; }
.adm-out__opts li.is-key .adm-out__key { border-color: var(--correct-line); background: var(--correct-soft); color: var(--correct); }
.adm-out__answer { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-xs); }

/* The Kertas 2 marker's feedback, for review (the band is internal: admins only). */
.adm-marker { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.adm-chip--band { background: var(--surface-3); color: var(--brand-ink); white-space: normal; }
.adm-crit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.adm-crit__row { display: grid; grid-template-columns: 76px 100px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.adm-crit__name { font-weight: var(--weight-bold); }
.adm-crit__verdict { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-muted); }
.adm-crit__row.is-memenuhi .adm-crit__verdict { color: var(--correct); }
.adm-crit__row.is-sebahagian .adm-crit__verdict { color: var(--warning); }
.adm-crit__row.is-tidak_memenuhi .adm-crit__verdict { color: var(--incorrect); }
.adm-crit__note { color: var(--fg-muted); overflow-wrap: anywhere; }
.adm-marker__part h5 { margin: 0 0 2px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
.adm-marker__part ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 2px; }
.adm-warnline { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--warning); }
.adm-warnline svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* The monitoring agent's Markdown, as elements. */
.adm-md { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-body); overflow-wrap: anywhere; }
.adm-md h3 { font-size: var(--text-md); margin-top: var(--space-2); }
.adm-md h4 { font-size: var(--text-base); margin-top: var(--space-1); }
.adm-md ul, .adm-md ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }

.adm-flash { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--correct-line); background: var(--correct-soft); font-size: var(--text-sm); }
.adm-flash > svg { width: 18px; height: 18px; color: var(--correct); }
.adm-flash a { font-weight: var(--weight-bold); color: var(--brand-blue); }
.adm-flash--error { border-color: var(--incorrect-line); background: var(--incorrect-soft); }
.adm-flash--error > svg { color: var(--incorrect); }
.adm-flash--warn { border-color: var(--warning-line); background: var(--warning-soft); }
.adm-flash--warn > svg { color: var(--warning); }
.adm-flash__x { width: 32px; height: 32px; background: transparent; border-color: transparent; }

.adm-textarea { width: 100%; min-height: 64px; resize: vertical; padding: var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font: inherit; font-size: var(--text-sm); line-height: var(--leading-snug); }
.adm-textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.adm-details > summary { cursor: pointer; padding: 4px 0; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--brand-blue); }
.adm-details[open] > summary { margin-bottom: var(--space-2); }

/* ---- Tiles and tables ----------------------------------------------------------------- */
.adm-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.adm-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-tiles .stat-tile { min-width: 0; }
.adm-tiles .stat-tile__sub a { color: var(--brand-blue); font-weight: var(--weight-semi); }

.adm-tablewrap { overflow-x: auto; }
.adm-table th, .adm-table td { padding: var(--space-3); }
.adm-table th:first-child, .adm-table td:first-child { padding-left: var(--space-5); }
.adm-table th:last-child, .adm-table td:last-child { padding-right: var(--space-5); }
/* Denser than the student tables: headings in sentence case, and they may wrap. */
.adm-table th { vertical-align: bottom; text-transform: none; letter-spacing: 0; line-height: var(--leading-tight); }
.adm-block { display: block; }
.adm-k1 .adm-cell--when, .adm-k1 .adm-cell--ans { white-space: nowrap; }
.adm-ucbtable { table-layout: fixed; }
.adm-ucbtable th:nth-child(1) { width: 76px; }
.adm-ucbtable th:nth-child(3), .adm-ucbtable th:nth-child(4) { width: 150px; }
.adm-ucbtable th:nth-child(5) { width: 230px; }
.adm-table .adm-num { text-align: right; }
.adm-table td.adm-num { white-space: nowrap; }
.adm-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; }
.adm-sort.is-on { color: var(--brand-blue); }
.adm-sort__icon { width: 12px; height: 12px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.adm-sort__icon.is-none { opacity: 0.35; transform: rotate(90deg); }
.adm-sort__icon.is-asc { transform: rotate(-90deg); }
.adm-sort__icon.is-desc { transform: rotate(90deg); }
.adm-table tr.is-link { cursor: pointer; }
@media (hover: hover) { .adm-table tr.is-link:hover td { background: var(--surface-2); } }
.adm-testers .adm-cell--tester { min-width: 180px; }
.adm-testers .adm-cell--last { white-space: nowrap; }
.adm-who { display: inline-flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.adm-who__handle { font-weight: var(--weight-bold); color: var(--brand-blue); }
.adm-who__name { font-size: var(--text-xs); color: var(--fg-muted); }
.adm-who__no { display: none; margin-right: 6px; color: var(--fg-subtle); font-weight: var(--weight-semi); }
@media (hover: hover) { .adm-who:hover .adm-who__handle { text-decoration: underline; } }
.adm-pct { font-size: var(--text-xs); color: var(--fg-subtle); }
.adm-pct.is-low { color: var(--incorrect); font-weight: var(--weight-semi); }
.adm-sortbar { display: none; }
.adm-sortbar__dir { transition: transform var(--dur-fast) var(--ease); }
.adm-sortbar__dir.is-asc { transform: rotate(-90deg); }
.adm-sortbar__dir.is-desc { transform: rotate(90deg); }

/* ---- One tester ------------------------------------------------------------------------ */
.adm-head { align-items: center; }
.adm-head__id { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.adm-head__avatar { width: 52px; height: 52px; flex: none; font-size: var(--text-base); }
.adm-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); overflow-wrap: anywhere; }
.adm-head__right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }

.adm-dl { margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); }
.adm-dl > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.adm-dl > div:first-child { border-top: 0; }
.adm-dl dt { color: var(--fg-subtle); font-weight: var(--weight-semi); }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; }

.adm-stuck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.adm-stuck li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-sm); }
.adm-stuck svg { width: 16px; height: 16px; margin-top: 3px; color: var(--incorrect); }

.adm-bab { list-style: none; margin: 0; padding: 0; }
.adm-bab li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 140px 44px 84px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.adm-bab li:first-child { border-top: 0; }
.adm-bab__id { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted); white-space: nowrap; }
.adm-bab__main { display: flex; flex-direction: column; min-width: 0; }
.adm-bab__name { font-size: var(--text-sm); font-weight: var(--weight-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bab__n { font-size: var(--text-xs); color: var(--fg-subtle); }
.adm-bab__val { font-size: var(--text-xs); font-weight: var(--weight-bold); text-align: right; }
.adm-bab li.is-stuck .abars__fill { background: var(--incorrect); }
.adm-bab .adm-flag { justify-self: start; }

.adm-qcell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 200px; }
.adm-qcell__src { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-stem { font-family: var(--font-exam); font-size: var(--text-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.adm-result { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-semi); white-space: nowrap; }
.adm-result svg { width: 16px; height: 16px; flex: none; }
.adm-result--ok { color: var(--correct); }
.adm-result--miss { color: var(--incorrect); }

.adm-k2 { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-k2__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-k2__q { font-family: var(--font-exam); font-size: var(--text-sm); }
.adm-q { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); }
.adm-q > svg { width: 18px; height: 18px; margin-top: 3px; color: var(--fg-subtle); }
.adm-q p { font-size: var(--text-sm); font-weight: var(--weight-semi); overflow-wrap: anywhere; }
.adm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 4px; font-size: var(--text-xs); color: var(--fg-subtle); }
.adm-mini { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.adm-mini__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); width: 100%; }
.adm-mini > a { color: var(--brand-blue); font-weight: var(--weight-semi); }

.adm-tl { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.adm-tl__day { padding: var(--space-2) var(--space-5); background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
.adm-tl__day:first-child { border-top: 0; }
.adm-tl__item { display: grid; grid-template-columns: 48px 20px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.adm-tl__time { color: var(--fg-subtle); font-size: var(--text-xs); padding-top: 2px; }
.adm-tl__icon svg { width: 16px; height: 16px; margin-top: 3px; color: var(--brand-blue); }
.adm-tl__text { overflow-wrap: anywhere; }
.adm-score { padding: 3px 8px; font-size: var(--text-sm); }
.adm-plan { gap: var(--space-2); }

/* ---- Feedback inbox ------------------------------------------------------------------- */
.adm-fbbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.adm-fbbar .tabs { flex: 1 1 320px; }
.adm-fblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.adm-fb { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.adm-fb--agent { border-left: 4px solid var(--warning-fill); }
.adm-fb__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-fb__who { margin-left: auto; font-size: var(--text-sm); }
.adm-fb__who a { color: var(--brand-blue); font-weight: var(--weight-semi); }
.adm-fb__ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); overflow-wrap: anywhere; }
.adm-fb__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.adm-fb__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.adm-fb__col--sugg { background: var(--brand-blue-soft); }
.adm-fb--agent .adm-fb__col--sugg { background: var(--warning-soft); border-color: var(--warning-line); }
.adm-fb__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.adm-fb__final { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--correct-line); border-radius: var(--radius-md); background: var(--correct-soft); }
.adm-fb__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-fb__form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.adm-fb__form .adm-fb__acts { margin-top: var(--space-1); }
.adm-alert { align-items: flex-start; }
.adm-alert ul { margin: 4px 0 0; padding-left: 1.2em; font-weight: var(--weight-regular); }
.adm-alert--warn { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning); }
/* Approving a Kertas 1 explanation: each option's reason in its own box. */
.adm-perop { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.adm-perop__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-2); align-items: start; margin-top: var(--space-2); }
.adm-perop__row .adm-out__key { margin-top: 2px; }
.adm-perop__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-report__drafts { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-report__drafts h3 { font-size: var(--text-md); }
.adm-report__drafts .adm-list > li { padding-inline: 0; }

/* ---- Learning ------------------------------------------------------------------------- */
.adm-imp { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-imp__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.adm-imp.is-revoked { opacity: 0.8; }
.adm-imp__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.adm-confirm { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--incorrect-line); border-radius: var(--radius-md); background: var(--incorrect-soft); }
.adm-confirm p { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.adm-revoked { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.adm-revoked .adm-list > li { padding-inline: 0; }
.adm-sentence { max-width: 82ch; font-size: var(--text-sm); color: var(--fg-muted); }
.adm-ucb { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-ucb__ctx { font-size: var(--text-base); }
.adm-ucb .adm-tablewrap { border: 1px solid var(--line); border-radius: var(--radius-md); }
.adm-ucbtable tr.is-first { background: var(--correct-soft); }

/* ---- Monitor -------------------------------------------------------------------------- */
.adm-mon { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.adm-mon__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.adm-mon__rail { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); min-width: 0; }
.adm-replist { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.adm-replist__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; }
.adm-replist__item.is-on { background: var(--brand-blue-soft); }
@media (hover: hover) { .adm-replist__item:hover:not(.is-on) { background: var(--surface-2); } }
.adm-replist__when { font-size: var(--text-xs); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.adm-replist__title { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.adm-replist__item.is-on .adm-replist__title { color: var(--brand-blue); }
.adm-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--brand-blue-soft); }
.adm-report__summary { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--brand-ink); }
.adm-report__findings { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-report__findings h3 { font-size: var(--text-md); }
.adm-report__findings ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.adm-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.adm-thread > li { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-thread__q { align-self: flex-end; max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--brand-blue-soft); font-size: var(--text-sm); overflow-wrap: anywhere; }
.adm-thread__a { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.adm-thread__who { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
.adm-thread__who svg { width: 13px; height: 13px; color: var(--warning); }
.adm-thread .field__error { flex-wrap: wrap; }
.adm-askbox { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-askbox__row { display: flex; align-items: flex-end; gap: var(--space-3); }
.adm-askbox__row .adm-textarea { flex: 1; font-size: var(--text-base); }

/* ---- Narrower screens ----------------------------------------------------------------- */

/* Laptops (1280 to 1420 px): the testers table keeps all its columns; the persona
   number moves into the tester's cell and the number columns get narrower. The
   Kertas 1 table in the tester page's left column lets its dates wrap. */
@media (min-width: 1280px) and (max-width: 1420px) {
  .adm-table.adm-testers th:first-child, .adm-table.adm-testers td.adm-cell--persona { display: none; }
  .adm-table.adm-testers td.adm-cell--tester, .adm-table.adm-testers th:nth-child(2) { padding-left: var(--space-5); }
  .adm-table.adm-testers td.adm-cell--tester { min-width: 150px; }
  .adm-testers .adm-who__no { display: inline; }
  .adm-testers th.adm-num, .adm-testers td.adm-num { padding-inline: var(--space-2); }
  .adm-testers th.adm-num:last-child, .adm-testers td.adm-num:last-child { padding-right: var(--space-5); }
  .adm-k1 .adm-cell--when { white-space: normal; }
  .adm-qcell { min-width: 150px; }
}

@media (max-width: 1100px) {
  .adm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-mon { grid-template-columns: minmax(0, 1fr); }
  .adm-mon__rail { position: static; }
  .adm-replist { max-height: none; }
}

@media (max-width: 1279px) {
  /* Tables become one card per row: each cell names its column, and sorting the
     testers is a choice above the list (the headings are hidden). */
  .adm-tablewrap { overflow-x: visible; }
  .adm-table, .adm-table tbody { display: block; width: 100%; }
  .adm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adm-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
  .adm-table tbody tr:last-child { border-bottom: 0; }
  .adm-table td, .adm-table th:first-child, .adm-table td:first-child, .adm-table td:last-child { display: block; min-width: 0; padding: 0; border: 0; }
  .adm-table .adm-num, .adm-table td.adm-num { text-align: left; white-space: normal; }
  .adm-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-subtle); }
  .adm-table.adm-testers td.adm-cell--persona { display: none; }
  .adm-testers .adm-cell--tester { grid-column: 1 / -1; min-width: 0; }
  .adm-table.adm-testers td.adm-cell--tester::before { display: none; }
  .adm-testers .adm-cell--pathway, .adm-testers .adm-cell--last { grid-column: span 2; }
  .adm-who__no { display: inline; }
  .adm-sortbar { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
  .adm-sortbar__row { display: flex; gap: var(--space-2); max-width: 420px; }
  .adm-sortbar__row .input { flex: 1; min-width: 0; }
  .adm-k1 tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-k1 .adm-cell--q { grid-column: 1 / -1; order: -1; }
  .adm-k1 .adm-cell--when { white-space: normal; }
  .adm-qcell { min-width: 0; }
  .adm-ucbtable tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-table.adm-ucbtable td.adm-cell--rank { display: none; }
  .adm-ucbtable .adm-cell--arm { grid-column: 1 / -1; }
  .adm-table.adm-ucbtable td.adm-cell--arm::before { display: none; }
}

@media (max-width: 820px) {
  /* The console's four sections in the bottom tab bar; the top bar keeps the logo,
     the Admin badge and Log out. */
  .adm-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-top__long, .adm-top__who, .adm-top__libri { display: none; }
  .adm-top__short { display: inline; }
  .adm-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-head__right { justify-content: flex-start; }
  .adm-fb__cols { grid-template-columns: minmax(0, 1fr); }
  .adm-fb__who { margin-left: 0; flex-basis: 100%; }
  .adm-fb { padding: var(--space-4); }
  .adm-table tr { padding: var(--space-4); }
  .adm-sortbar { padding-inline: var(--space-4); }
}

@media (max-width: 560px) {
  .adm-table tr, .adm-testers tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-testers .adm-cell--last { grid-column: span 1; }
  .adm-k1 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-tiles, .adm-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .adm-tiles .stat-tile { padding: var(--space-4); }
  .adm-tiles .stat-tile__icon { margin-bottom: 0; }
  .adm-tiles .stat-tile__value { font-size: var(--text-xl); }
  .adm-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .adm-bab li { grid-template-columns: 64px minmax(0, 1fr) auto; row-gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .adm-bab__bar { grid-column: 2; grid-row: 2; }
  .adm-bab li > :last-child { grid-column: 3; grid-row: 2; }
  .adm-bab__name { white-space: normal; }
  .adm-list > li { padding: var(--space-4); }
  .adm-tl__item { padding-inline: var(--space-4); }
  .adm-askbox__row { flex-direction: column; align-items: stretch; }
  .adm-fb__acts > .btn { flex: 1 1 auto; }
  .adm-crit__row { grid-template-columns: auto minmax(0, 1fr); }
  .adm-crit__note { grid-column: 1 / -1; }
  .adm-gate { padding: var(--space-8) var(--space-5); }
}

/* ==== "Improve this answer" (ui/feedback.js) ===================================== */
.imp-wrap { display: inline-flex; max-width: 100%; }
.imp { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-1) var(--space-2) var(--space-2); }
.imp__lead { font-size: var(--text-sm); color: var(--fg-muted); }
.imp__rate { display: flex; flex-direction: column; gap: var(--space-2); }
.imp__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.imp__choice { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg-muted);
  font-size: var(--text-sm); font-weight: var(--weight-semi); cursor: pointer; }
.imp__choice svg { width: 18px; height: 18px; flex: none; }
.imp__choice[aria-pressed="true"] { border-color: var(--brand-blue); background: var(--brand-blue-soft); color: var(--brand-blue); }
@media (hover: hover) { .imp__choice:hover:not([aria-pressed="true"]) { border-color: var(--brand-blue); color: var(--fg); } }
@media (hover: none) { .imp__choice:active:not([aria-pressed="true"]) { background: var(--surface-2); } }
.imp__text { width: 100%; min-height: 112px; resize: vertical; padding: var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font: inherit; font-size: var(--text-base); line-height: var(--leading-snug); }
.imp__text:focus { outline: none; border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.imp__text[aria-invalid="true"] { border-color: var(--incorrect); }
.imp__count { align-self: flex-end; }
.imp__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.imp--done, .imp--login { align-items: center; text-align: center; padding: var(--space-4) var(--space-2) var(--space-2); }
.imp--done:focus, .imp--login:focus { outline: none; box-shadow: none; }
.imp--done .imp__acts, .imp--login .imp__acts { justify-content: center; }
.imp__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--correct-soft); color: var(--correct); }
.imp__icon svg { width: 26px; height: 26px; }
.imp__icon--warn { background: var(--warning-soft); color: var(--warning); }
.imp__title { font-size: var(--text-lg); }
.imp a.btn { text-decoration: none; }
/* Wider screens: the sheet is a centred dialog rather than a full-width strip. */
@media (min-width: 821px) {
  .sheet:has(.imp) { align-items: center; justify-content: center; padding: var(--space-6); }
  .sheet:has(.imp) .sheet__panel { width: min(560px, 100%); border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4) var(--space-5); }
}
@media (max-width: 560px) {
  .imp__acts > .btn { flex: 1 1 auto; }
}

/* Busy buttons in the console and the sheet are aria-disabled rather than disabled, so
   keyboard focus stays on them (screens/admin.js, ui/feedback.js): they look disabled. */
.adm .btn[aria-disabled="true"], .imp .btn[aria-disabled="true"] { background: var(--locked-soft); color: var(--locked); border-color: var(--line); cursor: not-allowed; }

/* Where ImproveAnswer is placed (integration): a slim row at the end of a Kertas 1
   explanation (ui/core.js Paper1Feedback) and of Kertas 2 feedback (Paper2Feedback). */
.imp-row { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-6); border-top: 1px solid var(--line); }
.p2fb .imp-row { padding-inline: var(--space-6); }
.fb .imp-row + .fb__section { border-top: 1px solid var(--line); }
@media (max-width: 560px) { .imp-row { justify-content: flex-start; padding-inline: var(--space-4); } }