/* Admin dashboard: plain UI on the bloom tokens from base.css (never the game palette or pixel art).
   Mobile-first: the base rules are the 360px single column with 16px gutters; two columns from
   720px; the content column caps at 1100px. The sign-in gate is ported from canopy. Original header:
   Admin stats page: a phone-number sign-in gate ported from canopy's login module
   (card markup, phone-input-group, password toggle, alert, spinner), then a data
   table. Tokens adapted to bloom's palette (base.css); the shape and behaviour,
   including the soft-keyboard inset handling, are canopy's. */

:root { --kb-inset: 0px; }

.agate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Ported from canopy's .modal-overlay: reserve the soft-keyboard height at the
     bottom so the flex-centred card re-centres in the band ABOVE the keyboard on
     mobile web, where only the visual viewport shrinks. --kb-inset is 0 at rest
     and on desktop, so this is a no-op there. js/core/keyboard-inset.js sets it. */
  padding-bottom: calc(20px + var(--kb-inset, 0px));
  transition: padding-bottom 0.25s ease;
}
/* The `hidden` attribute alone loses to this rule's `display: flex` (both are
   author-origin declarations, and the class selector applies regardless of the
   attribute), so the gate would stay visibly open even after JS set `hidden`.
   Restate it explicitly, higher precedence than the bare class. */
.agate[hidden] { display: none; }

.agate__card {
  width: 100%;
  max-width: 380px;
  max-height: calc(90vh - var(--kb-inset, 0px));
  overflow-y: auto;
  transition: max-height 0.25s ease;
}
.agate__title { font-size: 1.4rem; margin-bottom: 6px; }
.agate__lead { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 14px; }
.agate__hint { color: var(--ink-soft); font-size: 0.85rem; margin-top: 4px; }

/* Forms (ported from canopy's .form-group) */
.agate-form-group { margin-bottom: 16px; }
.agate-form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.agate-form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.2s;
}
.agate-form-group input:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px var(--leaf-soft);
}

/* Phone input group (country code + local number), ported from canopy's
   .phone-input-group / .country-code-select. */
.phone-input-group { display: flex; gap: 8px; align-items: stretch; }
.phone-input-group .country-code-select {
  width: 88px; min-width: 88px; max-width: 88px; flex: 0 0 88px;
  padding: 12px 28px 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6f64' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.phone-input-group .country-code-select:focus {
  outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft);
}
.phone-input-group input[type="tel"] {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
}
.phone-input-group input[type="tel"]:focus {
  outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft);
}

/* Password field with show/hide toggle, ported from canopy's .password-field-wrap */
.password-field-wrap { position: relative; display: flex; align-items: stretch; }
.password-field-wrap input { flex: 1; padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 18px; height: 18px; pointer-events: none; }

/* Links + alerts, ported from canopy's .text-link / .alert */
.agate-link {
  color: var(--leaf-deep);
  text-decoration: none;
  font-size: 0.9rem;
  text-align: center;
  display: block;
  margin-top: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.agate-link:hover { text-decoration: underline; }

.agate__error, .agate__note {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
  font-size: 0.9rem;
}
.agate__error { background: var(--berry-soft); color: var(--berry); border: 1px solid var(--berry); }
.agate__note { background: var(--sky-soft); color: var(--ink); border: 1px solid var(--sky); }

.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #fff;
  animation: agate-spin 0.8s linear infinite;
}
@keyframes agate-spin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------------------------------------------
   Signed-in shell. Base = 360px: one column, 16px gutters, sticky top bar whose tabs are a
   horizontal scroll strip (the strip scrolls, the page never does).
   --------------------------------------------------------------------------------------------- */
.adm { padding: 0 0 48px; max-width: none; margin: 0; }
.adm[hidden] { display: none; }
.adm-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px 6px; }
.adm-title { font-size: 1.1rem; margin-right: auto; }
.adm-who { font-size: 0.85rem; }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-actions button { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }
.adm-note { font-size: 0.8rem; padding: 0 16px 6px; }

.adm-tabs {
  display: flex; gap: 4px; padding: 0 16px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.adm-tabs::-webkit-scrollbar { display: none; }
/* More tabs hidden past an edge: fade that edge (set by js/admin/tabs.js; nothing when all tabs fit, so desktop is unchanged) */
.adm-tabs[data-more-end] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.adm-tabs[data-more-start] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.adm-tabs[data-more-start][data-more-end] { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.adm-tab {
  flex: 0 0 auto; min-height: 44px; padding: 10px 16px;
  background: transparent; box-shadow: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink-soft); font-size: 0.95rem; font-weight: 700;
  border-bottom: 3px solid transparent;
}
.adm-tab:hover { background: var(--leaf-soft); }
.adm-tab:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.adm-tab[aria-selected="true"] { color: var(--leaf-deep); border-bottom-color: var(--leaf); }

.adm-main { padding: 16px; margin: 0 auto; }
.adm-panel[hidden] { display: none; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.adm-grid > * { min-width: 0; }
.adm-card { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 16px; }
.adm-card h2 { font-size: 1.05rem; margin-bottom: 10px; }
.adm-card h3 { font-size: 0.95rem; margin: 12px 0 6px; }
.adm-lead { font-size: 0.9rem; margin-bottom: 12px; }
.adm-empty { font-size: 0.9rem; padding: 8px 0; }

.adm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 0.9rem; }
.adm-field > span { color: var(--ink-soft); }
.adm-select, .adm-input {
  font-family: inherit; font-size: 1rem; width: 100%; min-height: 44px;
  padding: 8px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
}
.adm-select:focus, .adm-input:focus { outline: none; border-color: var(--leaf); }
.adm-inline { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.adm-inline .adm-select { width: auto; }
.adm-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.adm-row > .adm-field { flex: 1 1 140px; margin-bottom: 0; }
.adm-form { display: flex; flex-direction: column; gap: 10px; }
.skip-row { display: flex; }
.skip-row[hidden] { display: none; }
.adm-range { width: 100%; min-height: 44px; accent-color: var(--leaf); }

/* Tables scroll inside their own wrapper, never the page. */
.adm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card); }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.admin-table th { background: var(--leaf-soft); color: var(--leaf-deep); font-weight: 700; white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: none; }

/* Progress: world rows of town cards, building dots, per-skill timelines */
.adm-world { margin-bottom: 14px; }
.adm-world > h3 { margin: 0 0 6px; }
.adm-towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.adm-town {
  border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
  background: var(--card); text-align: left; min-height: 0; box-shadow: none; font-size: 0.85rem;
}
.adm-town[data-state="mastered"] { border-color: var(--leaf); background: var(--leaf-soft); }
.adm-town[data-state="progress"] { border-color: var(--sun); background: var(--sun-soft); }
.adm-town[data-state="locked"] { border-color: var(--line); }
.adm-town[aria-pressed="true"] { outline: 2px solid var(--sky); }
.adm-town__name { font-weight: 700; display: block; }
.adm-town__badge { font-size: 0.75rem; color: var(--ink-soft); display: block; margin-top: 2px; }
.adm-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.adm-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); display: inline-block; }
.adm-dot[data-state="done"] { background: var(--leaf); }
.adm-dot[data-state="progress"] { background: var(--sun); }
.adm-date { font-weight: 700; margin-bottom: 4px; }
.adm-tl { margin-bottom: 14px; }
.adm-tl__name { font-size: 0.85rem; font-weight: 700; }
.adm-tl svg { display: block; width: 100%; height: auto; max-height: 90px; background: var(--bg); border-radius: var(--radius-sm); }
.adm-tl .tl-line { fill: none; stroke: var(--leaf); stroke-width: 2; vector-effect: non-scaling-stroke; }
.adm-tl .tl-hit { fill: var(--leaf-deep); cursor: pointer; }
.adm-tl .tl-hit:focus { outline: 2px solid var(--sky); }
.adm-tip { font-size: 0.8rem; min-height: 1.2em; color: var(--ink-soft); }

/* Class heatmap: cell fill runs --leaf-soft to --leaf-deep by the fraction set as --p (0..100) */
.adm-heat td.cell {
  min-width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--leaf-deep) calc(var(--p, 0) * 1%), var(--leaf-soft));
  border: 2px solid var(--card);
}
.adm-heat td.cell:focus-visible { outline: 2px solid var(--sky); }
.adm-heat th.rowh { position: sticky; left: 0; background: var(--leaf-soft); }

/* Activity: weekly bars */
.adm-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 6px; }
.adm-bars__col { flex: 1 1 0; min-width: 0; background: var(--leaf); border-radius: 4px 4px 0 0; min-height: 2px; }
.adm-bars__col[data-zero="true"] { background: var(--line); }
.adm-bars__axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 14px; }
.adm-list { list-style: none; }
.adm-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.adm-list li:last-child { border-bottom: none; }

/* Question bank (Questions tab, internal id content): one aligned table, level > town > skill.
   Every row shares the columns name | total | one count per type | review; on phones the type
   counts collapse into a stacked type-mix bar under the name (legend above the table). */
.adm-low { color: var(--berry); }
.qb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 12px; }
.qb-head h2 { margin-bottom: 2px; }
.qb-summary { font-size: 0.9rem; }
.qb-filters { display: flex; gap: 12px; }
.qb-filters .adm-field { margin-bottom: 0; flex-direction: row; align-items: center; gap: 8px; }
.qb-select { width: auto; min-width: 9.5rem; font-size: 0.9rem; }
.qb { --qb-indent: 20px; font-size: 0.9rem; }
.qb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 6.5rem;
  align-items: center; column-gap: 8px; min-height: 44px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line);
}
.qb-colhead { min-height: 0; padding-top: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.qb-colhead [data-col="name"] { padding-left: var(--qb-indent); }
summary.qb-row { cursor: pointer; list-style: none; }
summary.qb-row::-webkit-details-marker { display: none; }
summary.qb-row:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
@media (hover: hover) { summary.qb-row:hover { background: var(--bg); } }
.qb-level[open] > summary { background: var(--leaf-soft); }
.qb-linked > summary { box-shadow: inset 3px 0 0 var(--sky); } /* the skill review.html's Back returned to */
.qb-name { position: relative; display: flex; flex-direction: column; min-width: 0; padding-left: calc(var(--d, 0) * var(--qb-indent) + var(--qb-indent)); }
.qb-name::before {
  content: ""; position: absolute; top: 0.42em; left: calc(var(--d, 0) * var(--qb-indent) + 5px);
  border: 5px solid transparent; border-left-color: var(--ink-soft); transform-origin: 2px 50%; transition: transform 150ms ease;
}
details[open] > summary .qb-name::before { transform: rotate(90deg); }
.qb-level > summary .qb-title { font-size: 1rem; font-weight: 700; }
.qb-town > summary .qb-title { font-weight: 700; }
.qb-meta { font-size: 0.75rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.qb [data-col="total"] { text-align: right; font-variant-numeric: tabular-nums; }
.qb-row > [data-col="total"] { font-weight: 700; }
.qb-zero { color: var(--ink-soft); opacity: 0.55; }
.qb [data-col="review"] { padding-left: 16px; }
.qb-review { display: flex; flex-wrap: wrap; gap: 4px; }
.qb-ok { color: var(--leaf-deep); font-weight: 700; }
.qb-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; line-height: 1.5; padding: 0 8px; border-radius: 999px; white-space: nowrap; color: var(--ink); }
.qb-chip--draft { background: var(--sun-soft); border: 1px solid var(--sun); }
.qb-chip--rejected { background: var(--berry-soft); border: 1px solid var(--berry); }
/* An opened skill: its questions as a table under the skill's name column */
.qb-items { margin: 4px 0 12px calc(3 * var(--qb-indent)); font-size: 0.85rem; }
.qb-irow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 9rem) 5.5rem 5.5rem 5rem 4rem 5.5rem 4rem 4rem 3.5rem;
  column-gap: 8px; align-items: baseline; padding: 8px 8px 8px 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere;
}
.qb-ihead { padding-top: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border-bottom-style: solid; }
.qb-irow .qb-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Column headers with an (i) explainer (js/admin/question-terms.js is the one map of the words) */
.qb-ihead, .qb-colhead { align-items: start; }
.qb-ihead [role=columnheader], .qb-colhead > [data-term] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3px; }
.qb-ihead .qb-num[role=columnheader] { justify-content: flex-end; }
.qb-colhead > [data-col="total"] { justify-content: flex-end; }
.qb-info { all: unset; box-sizing: border-box; cursor: pointer; width: 1.1rem; height: 1.1rem; flex: none; border: 1px solid var(--ink-soft); border-radius: 50%; color: var(--ink-soft); font: italic 700 0.68rem/1 Georgia, serif; text-transform: none; letter-spacing: 0; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.qb-info:hover, .qb-info[aria-expanded="true"] { background: var(--ink-soft); color: #fff; }
.qb-info:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }
.qb-tipbox { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: var(--sun-soft); border: 1px solid var(--sun); color: var(--ink); font-size: 0.85rem; line-height: 1.4; }
.qb-tipbox[hidden] { display: none; }
.qb-irow .qb-link { text-align: right; }
.qb-prompt .qb-chip { margin-left: 6px; }
.qb-ptext { display: block; }
.qb-rid { display: block; font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--ink-soft); }
.qb-ans { color: var(--ink-soft); }
@media (max-width: 719px) {
  .qb { --qb-indent: 14px; }
  .qb-head { align-items: stretch; }
  .qb-head > *, .qb-filters { width: 100%; }
  .qb-filters .adm-field { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  .qb-select { width: 100%; min-width: 0; }
  .qb-colhead { display: none; }
  .qb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name total" "review review"; row-gap: 6px; }
  .qb-row > [data-col="name"] { grid-area: name; }
  .qb-row > [data-col="total"] { grid-area: total; }
  .qb-row > [data-col="review"] { grid-area: review; padding-left: calc(var(--d, 0) * var(--qb-indent) + var(--qb-indent)); }
  .qb-items { margin-left: var(--qb-indent); }
  .qb-irow { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .qb-irow.qb-ihead, .qb-irow .qb-nil { display: none; }
  .qb-irow .qb-prompt { flex-basis: 100%; font-weight: 700; }
  .qb-irow [data-label]:not(.qb-prompt):not(.qb-link)::before { content: attr(data-label) " "; color: var(--ink-soft); font-size: 0.75rem; }
  .qb-irow .qb-num, .qb-irow .qb-band { text-align: left; }
  .qb-irow .qb-link { margin-left: auto; }
  .qb-ans { color: var(--ink); }
}

@media (min-width: 720px) {
  .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-span { grid-column: 1 / -1; }
  .adm-bar, .adm-tabs { padding-left: 24px; padding-right: 24px; }
  .adm-main { padding: 24px; }
  .adm-towns { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 1100px) {
  .adm-main { max-width: 1100px; padding-left: 0; padding-right: 0; }
  .adm-bar, .adm-tabs { max-width: 1100px; margin: 0 auto; padding-left: 0; padding-right: 0; }
}

/* Reset PIN password dialog (student PIN hardening B, 07/11/26) */
.adm-dialog { border: 1px solid var(--line, #d8d8d8); border-radius: 12px; padding: 20px; max-width: 360px; width: calc(100% - 32px); }
.adm-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.adm-dialog input[type="password"] { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 12px; }

/* Minigames tab (owner 08/11/26, js/admin/minigames-view.js): a picker, then the child console framed below the
   admin header and tabs. The console inside the frame is styled only by css/console.css on admin-minigames.html. */
.adm-mg-pick { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.adm-mg-pick > p { flex: 1 0 100%; margin: 0; }
.adm-mg-list { flex: 1 0 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.adm-mg-game { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.adm-mg-game:hover, .adm-mg-game:focus-visible { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); outline: none; }
.adm-mg-game span { font-size: 0.85rem; }
.adm-mg-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.adm-mg-result { flex: 1; min-width: 12rem; color: var(--ink-soft); }
.adm-mg-btns { display: flex; gap: 8px; }
.adm-mg-iframe { display: block; width: 100%; height: clamp(360px, calc(100vh - 300px), 640px);   /* 300 = the old 240 + the Content sub-strip (U9) */ border: 0; border-radius: var(--radius-sm); background: #0e1a14; }
.adm-mg-narrow { display: none; }
@media (max-width: 700px) {
  .adm-mg-narrow { display: block; }
}
.adm-mg-pick[hidden], .adm-mg-play[hidden] { display: none; }
/* Board viewer (js/admin/minigame-boards-view.js): segmented pills for board, game, mode and song, then the top 10. */
.adm-mgb-host { flex: 1 0 100%; }
.adm-mgb { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-mgb-h, .adm-mgb-note, .adm-mgb-title { margin: 0; }
.adm-mgb-title { font-weight: 700; }
.adm-mgb-ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-mgb-ctl[hidden] { display: none; }
.adm-mgb-pill { min-height: 0; height: auto; padding: 4px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.8125rem; cursor: pointer; box-shadow: none; }
.adm-mgb-pill:hover, .adm-mgb-pill:focus-visible { border-color: var(--leaf); outline: none; box-shadow: 0 0 0 3px var(--leaf-soft); }
.adm-mgb-pill[aria-pressed="true"] { background: var(--leaf-soft); border-color: var(--leaf); font-weight: 700; }
.adm-mgb-table { width: 100%; max-width: 34rem; border-collapse: collapse; }
.adm-mgb-table th, .adm-mgb-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.adm-mgb-table th { font-size: 0.75rem; color: var(--ink-soft); font-weight: 700; }
.adm-mgb-table .adm-mgb-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-mgb-table td:nth-child(4) { white-space: nowrap; }

/* Staff playtest of the question banks (js/admin/playtest.js, owner 08/11/26). The console frame reuses the Minigames frame look. */
.qb-play { align-self: flex-start; margin: 4px 0 0; padding: 4px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.qb-play:hover, .qb-play:focus-visible { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); outline: none; }
.pt-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.pt-head h2, .pt-head p { margin: 0; }
.pt-offer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pt-strip { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.pt-where { display: flex; flex-direction: column; min-width: 0; }
.pt-what { font-size: 0.8125rem; overflow-wrap: anywhere; }
.pt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-note { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.pt-note[hidden] { display: none; }
.pt-note label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; font-size: 0.8125rem; }
.pt-note input { padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.pt-flagged { padding-left: 18px; }
.pt .adm-mg-narrow { margin: 0 0 8px; }
/* A compact control: beats the global button size, and the playtest frame leaves room for the staff strip under it. */
button.qb-play { min-height: 0; height: auto; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; box-shadow: none; }
.pt-frame .adm-mg-iframe { height: clamp(340px, calc(100vh - 400px), 600px); }

/* Feedback tab (js/admin/feedback-view.js, owner 08/11/26): two sections of flag cards. Laptop widths only. */
.fb-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.fb-head h2, .fb-head p { margin: 0; }
.fb-head > div { flex: 1 1 0; min-width: 0; }
.fb-head p { font-size: 0.9rem; }
.fb-section { margin-top: 18px; }
.fb-section h3 { font-size: 1rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.fb-count { font-size: 0.8125rem; font-weight: 700; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--line); text-align: center; }
.fb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 12px; }
.fb-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--card); }
.fb-top { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-id { font-size: 0.8125rem; overflow-wrap: anywhere; }
.fb-label { font-size: 0.95rem; overflow-wrap: anywhere; }
.fb-item p { margin: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.fb-item p.fb-note { font-size: 0.95rem; }
.fb-play { padding: 8px 14px; min-height: 0; font-size: 0.875rem; }
.fb-meta { font-size: 0.8125rem; }
.fb-item p.fb-waiting, .fb-item p.fb-changed { font-size: 0.875rem; }
.fb-waiting { padding: 6px 10px; border-radius: var(--radius-sm); background: #fff4d6; color: #5c4300; }
.fb-changed { font-size: 0.875rem; padding: 6px 10px; border-radius: var(--radius-sm); background: #e4f5e4; color: #174d1f; }
.fb-version { font-weight: 700; white-space: nowrap; }
.fb-actions { margin-top: 4px; }
.fb-empty { margin: 0; grid-column: 1 / -1; }


/* child accounts (js/admin/child-accounts.js): username chips and the confirm rows wrap on a phone */
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ca-chip { min-height: 2.2rem; }
.ca-rows { display: flex; flex-direction: column; gap: 10px; }
/* A grid, not wrapping flex: every row has the same columns, so the inputs line up whatever a row's message says (a flex row let one row's inputs grow wider than the rest) */
.ca-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #e3e8e0); }
.ca-row__name { grid-column: 1 / -1; }
.ca-row .adm-input { min-width: 0; width: 100%; box-sizing: border-box; }
.ca-row__msg { grid-column: 1 / -1; margin: 0; }
.ca-row__msg:empty { display: none; }
@media (min-width: 720px) { .ca-row { grid-template-columns: 10rem minmax(0, 28rem) auto; } .ca-row__name { grid-column: auto; } }
.ca-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ca-toolbar .muted { margin: 0; }
.ca-dialog { max-width: min(92vw, 440px); }
.ca-dialog h2 { margin: 0 0 12px; }
.ca-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Accounts tab (08/11/26): the subtab strip, the per-child state cell and the row actions */
.adm-subtabs { padding: 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ca-state { white-space: nowrap; }
.ca-state--warn { color: var(--danger, #b3261e); font-weight: 700; }
.btn-danger { background: var(--danger, #b3261e); color: #fff; font-weight: 700; }
.btn-danger:hover { background: #8f1d17; }
.ca-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-form .btn-primary { align-self: flex-start; }
dialog.adm-dialog { margin: auto; max-width: min(92vw, 440px); }
/* A narrow screen stacks each row of an .adm-stack table as a card: label on the left, value on the right, actions wrapping. */
@media (max-width: 719px) {
  .adm-stack, .adm-stack tbody, .adm-stack tr, .adm-stack td { display: block; width: 100%; }
  .adm-stack thead { display: none; }
  .adm-stack tr { padding: 10px 0; border-bottom: 1px solid var(--line, #e3e8e0); }
  .adm-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .adm-stack td::before { content: attr(data-label); color: var(--ink-soft); font-weight: 700; text-align: left; }
  .adm-stack td:last-child::before, .adm-stack td:empty { display: none; }
  .adm-stack td.ca-actions { justify-content: flex-start; }
}

/* Bar legend and per-row reason (owner 10/11/26): the reason wraps under the question, never one unbroken pill. */
.qb-bar { font-size: 0.8rem; line-height: 1.45; margin: 6px 0 8px; }
.qb-prompt .qb-chip[data-testid="row-why"] { display: block; width: fit-content; max-width: 100%; margin: 4px 0 0; white-space: normal; border-radius: 10px; padding: 1px 8px; }

/* Children roster (admin restructure U1, 10/11/26) */
.ca-search { flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
.ca-sub { display: block; font-size: 0.8em; }
.ca-name-link { background: none; border: 0; padding: 0; min-height: 0; border-radius: 0; box-shadow: none; font: inherit; font-weight: 700; color: var(--leaf-deep); cursor: pointer; text-align: left; }
.ca-name-link:hover { text-decoration: underline; }
.ca-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.ca-confirm .adm-input { width: 9rem; min-width: 0; }
.ca-confirm .ca-row__msg { flex-basis: 100%; margin: 0; }

/* One cell = one flex item: a value plus its muted hint (Child + school, Level + expected grade) stays a single right-aligned block when a row stacks as a card (390 fix, admin U2) */
.ca-cell { min-width: 0; }
@media (max-width: 719px) { .adm-stack .ca-cell { text-align: right; } .adm-stack .ca-name-link { text-align: right; } }

/* Child page (admin restructure U2, 10/11/26) */
.cp-back { margin-bottom: 4px; }
.cp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 10px 18px; margin: 8px 0 14px; }
.cp-fact { min-width: 0; }
.cp-fact dt { color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; margin: 0; }
.cp-fact dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cp > .adm-span { min-width: 0; }

/* Accounts > Staff and the invite card (admin restructure U7, 10/11/26) */
.adm-field[hidden], .adm-select[hidden], .ca-form [hidden], .st-pw-error[hidden] { display: none; }
.ca-toolbar .adm-select { width: auto; max-width: 100%; min-width: 0; }
.ca-form .phone-input-group { align-items: stretch; }
.ca-form .phone-input-group .adm-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.ca-form .ca-dialog__actions { margin-top: 8px; }
.st-card-dialog { max-width: min(92vw, 420px); }
.st-card-canvas { display: block; width: 100%; height: min(58vh, 520px); object-fit: contain; margin: 0 auto 10px; background: var(--bg); border-radius: var(--radius-sm); }
.st-card-dialog .muted { margin: 0 0 10px; }
.adm-dialog p { overflow-wrap: anywhere; }
.st-pw-text { margin: 0 0 12px; }

/* Content tab (U9, 10/11/26): the sub-strip (Questions, Minigames, Feedback) beside a Content review link; wraps, never scrolls sideways */
.adm-content-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.adm-content-bar .adm-subtabs { margin-bottom: 0; border-bottom: 0; max-width: 100%; }
.adm-content-review { padding: 10px 4px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.fb-withdraw { margin-left: 8px; padding: 8px 14px; min-height: 0; font-size: 0.875rem; }
.adm-content-bar .adm-subtabs { margin: 0; }
/* U9: four top tabs (Children, Class, Content, Accounts) fit a 390 wide screen without the scrolling strip */
@media (max-width: 480px) { .adm-tab { padding-left: 12px; padding-right: 12px; } }
/* the Content sub-strip now has four tabs (Syllabus added 11/11/26): tighter padding keeps it inside 390 */
@media (max-width: 480px) { .adm-content-bar .adm-tab { padding-left: 6px; padding-right: 6px; } }

/* Syllabus sub-tab (Content > Syllabus, 11/11/26): read-only MOE outcomes by strand > sub-strand > topic, a number, the outcome text and a count chip per row */
.syl-pdf { display: inline-block; text-decoration: none; text-align: center; padding: 10px 16px; border-radius: var(--radius-sm); }
.syl-summary { margin: 2px 0 0; max-width: 62ch; }
.syl-strand h3 { margin: 22px 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--line); font-size: 1.05rem; }
.syl-sub h4 { margin: 16px 0 4px; font-size: 1rem; color: var(--leaf-deep); }
.syl-topic h5 { margin: 10px 0 4px; font-size: 0.9rem; color: var(--ink-soft); }
.syl-list { list-style: none; margin: 0; padding: 0; }
.syl-outcome { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.syl-no { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.syl-text { overflow-wrap: anywhere; }
.syl-counts { background: var(--leaf-soft); border: 1px solid var(--leaf); }
.syl-counts.qb-chip--rejected { background: var(--berry-soft); border-color: var(--berry); }
@media (max-width: 480px) {
  .syl-outcome { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .syl-counts { grid-column: 2; justify-self: start; }
}
.adm-dialog--move h2 { margin: 0 0 10px; }