/* Quest Byte destination layout
   Shared presentation only for the bottom-navigation pages. Functional modules,
   permissions, data and the original tab bar remain untouched. */

/* The wide Home grid must leave the document flow when another destination is
   active; its id selector otherwise outranks the shared inactive-screen rule. */
#screen-home.screen:not(.active) { display: none !important; }

.qb-destination {
  --qb-dest-accent: #2f7dcc;
  --qb-dest-deep: #163e4a;
  --qb-dest-soft: #e8f3ff;
  --qb-dest-line: #d9c8a2;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 18px clamp(10px, 2.2vw, 28px) calc(var(--wl-tabbar-h, 78px) + 28px) !important;
  overflow-x: clip;
  background:
    radial-gradient(circle at 7% 4%, rgba(244, 198, 103, .2), transparent 22rem),
    linear-gradient(180deg, #f8f2e6 0, #fffdf8 360px, #f7f4ed 100%);
}

.qb-destination--themes {
  --qb-dest-accent: #2f9f91;
  --qb-dest-deep: #245e70;
  --qb-dest-soft: #e8f8ef;
  --qb-dest-line: #d8b876;
}
.qb-destination--dictionary { --qb-dest-accent: #2f79c8; --qb-dest-deep: #184a78; --qb-dest-soft: #e7f2ff; }
.qb-destination--revision { --qb-dest-accent: #cf5b8b; --qb-dest-deep: #743654; --qb-dest-soft: #fdeaf2; }
.qb-destination--tests { --qb-dest-accent: #d28a26; --qb-dest-deep: #79501d; --qb-dest-soft: #fff1d9; }
.qb-destination--records { --qb-dest-accent: #278c83; --qb-dest-deep: #19574f; --qb-dest-soft: #e3f5f1; }
.qb-destination--writing { --qb-dest-accent: #a7559c; --qb-dest-deep: #66345f; --qb-dest-soft: #f7e8f5; }
.qb-destination--mail { --qb-dest-accent: #4e76c9; --qb-dest-deep: #304f8b; --qb-dest-soft: #e9effc; }
.qb-destination--todo { --qb-dest-accent: #c96e34; --qb-dest-deep: #75401f; --qb-dest-soft: #fff0e4; }
.qb-destination--custom { --qb-dest-accent: #528b57; --qb-dest-deep: #315f38; --qb-dest-soft: #e9f5e8; }
.qb-destination--settings { --qb-dest-accent: #4b718d; --qb-dest-deep: #294757; --qb-dest-soft: #e8f0f4; }
.qb-destination--admin { --qb-dest-accent: #b0782d; --qb-dest-deep: #583e20; --qb-dest-soft: #f8eddb; }
.qb-destination--teacher { --qb-dest-accent: #37856f; --qb-dest-deep: #234f45; --qb-dest-soft: #e5f4ee; }
.qb-destination--classroom { --qb-dest-accent: #477fc4; --qb-dest-deep: #294d7a; --qb-dest-soft: #e7f1fc; }
.qb-destination--hall { --qb-dest-accent: #7654a8; --qb-dest-deep: #493468; --qb-dest-soft: #f0e9fa; }
.qb-destination--notices { --qb-dest-accent: #bd7436; --qb-dest-deep: #70421f; --qb-dest-soft: #faeddf; }
.qb-destination--screentime { --qb-dest-accent: #3f8292; --qb-dest-deep: #28515b; --qb-dest-soft: #e5f3f5; }

.qb-destination-hero {
  width: 100%;
  min-height: 166px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  align-items: stretch;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 2px solid #b88a43;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 12%, rgba(85, 150, 159, .34), transparent 25rem),
    linear-gradient(145deg, var(--qb-dest-deep), #102f38);
  box-shadow: 0 10px 0 rgba(101, 72, 32, .11), 0 20px 42px rgba(18, 45, 55, .18);
}

.qb-destination-copy {
  min-width: 0;
  align-self: center;
  padding: 22px clamp(20px, 4vw, 48px);
}

.qb-destination-copy > span {
  display: block;
  margin-bottom: 4px;
  color: #f5d492;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.qb-destination-copy h1 {
  margin: 0;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.qb-destination-copy p {
  max-width: 650px;
  margin: 10px 0 0;
  color: #dbe8e9;
  font-size: clamp(.92rem, 1.6vw, 1.08rem);
  font-weight: 700;
  line-height: 1.4;
}

/* Teacher Reports carries no hero illustration, so its copy spans the full card. */
.qb-destination--teacher .qb-destination-hero {
  grid-template-columns: minmax(0, 1fr);
}

/* Research Library carries no hero illustration either — text-only lane (RESEARCHLIBRARY.md rule 1). */
.qb-destination--library .qb-destination-hero {
  grid-template-columns: minmax(0, 1fr);
}

.qb-destination-art {
  min-width: 0;
  display: grid;
  place-items: center;
  margin: 12px 12px 12px 0;
  overflow: hidden;
  border: 2px solid rgba(255, 239, 203, .8);
  border-radius: 17px;
  background: #fff7df;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .28);
}

.qb-destination-art img {
  width: 100%;
  height: 140px;
  display: block;
  padding: 5px;
  object-fit: contain;
  box-sizing: border-box;
}

/* Every destination follows the browser width. Individual reading fields and
   text blocks keep their own line-length limits; the page window itself must
   never stop at a fixed desktop width. */
#screen-themes #themes-root,
#screen-dictionary .dict-shell,
#screen-revision #revision-root,
#screen-practice-tests .qb-tests-layout,
#screen-records #records-root,
#screen-writing #writing-root,
#screen-mail #mail-root,
#screen-todo #todo-root,
#screen-custom > :not(.qb-destination-hero),
#screen-teacher #teacher-root,
#screen-classroom #classroom-root,
#screen-hall #hall-root,
#screen-notices #notices-root,
#screen-screentime #screentime-root,
#screen-settings #settings-root,
#screen-admin #admin-root {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Remove duplicated module titles while keeping each module's real controls. */
#screen-themes .themes-head { display: none; }
#screen-writing .ww-head h1,
#screen-mail .wm-head,
#screen-todo .td-head h1,
#screen-teacher .wt-wrap > h1,
#screen-classroom .cls-head > h1,
#screen-hall #hall-root > .hall-head:first-child > h2,
#screen-notices #notices-root > .an-h:first-child,
#screen-screentime .pt-wrap > h1,
#screen-settings #settings-root > .wl-page > h1,
#screen-records #records-root > .wl-page > h1,
#screen-revision #revision-root > .wl-page > h1 { display: none; }
/* The Admin screen is the one exception (owner 2026-08-26): its destination hero is gone
   entirely, so the module's own header IS the visible title — see the compact
   .wl-admin-head rules further down. */

#screen-writing .ww-head {
  min-height: 0;
  justify-content: flex-end;
  margin: 0 0 12px;
}

#screen-todo .td-head {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--qb-dest-line);
  border-radius: 14px;
  color: #58656d;
  background: rgba(255, 252, 243, .88);
}

#screen-todo .td-head p { margin: 0; }

/* Shared card language: warm paper, deep ink, illustrated-software depth. */
#screen-dictionary .dict-search-card,
#screen-revision .wl-page,
#screen-records .wl-page,
#screen-writing .ww-empty,
#screen-writing .ww-card,
#screen-mail .wm-compose,
#screen-mail .wm-empty,
#screen-mail .wm-msg,
#screen-todo .td-book,
#screen-custom .ml-wrap,
#screen-settings .wl-card,
#screen-admin .wl-card,
#screen-admin .wl-subcard,
#screen-themes .theme-unit,
#screen-practice-tests .qb-tests-intro,
#screen-practice-tests #tests-naplan-section {
  border: 1.5px solid var(--qb-dest-line) !important;
  border-radius: 18px !important;
  color: #263b4b;
  background: rgba(255, 253, 247, .96) !important;
  box-shadow: 0 6px 0 rgba(119, 83, 35, .08), 0 15px 30px rgba(32, 54, 63, .08) !important;
}

#screen-revision .wl-page,
#screen-records .wl-page,
#screen-settings .wl-page,
#screen-admin .wl-admin,
#screen-writing .ww-wrap,
#screen-mail .wm-wrap,
#screen-todo .td-wrap,
#screen-custom .ml-wrap,
#screen-teacher .wt-wrap,
#screen-classroom .cls-wrap,
#screen-hall #hall-root,
#screen-notices #notices-root,
#screen-screentime .pt-wrap,
#screen-dictionary .dict-shell,
#screen-themes .themes-wrap {
  max-width: none;
  margin-top: 0;
  padding-top: 0;
}

#screen-revision .wl-page,
#screen-records .wl-page {
  padding: clamp(14px, 2.3vw, 24px);
}

/* Role-only destinations: the same layout is used for safe local previews and
   the real signed-in modules. Local cards never load or mutate cloud data. */
.qb-role-preview {
  width: 100%;
  display: grid;
  gap: 14px;
  padding-bottom: 26px;
  box-sizing: border-box;
}
.qb-role-preview-intro,
.qb-role-preview-card {
  border: 1.5px solid var(--qb-dest-line);
  border-radius: 18px;
  background: rgba(255, 253, 247, .97);
  box-shadow: 0 6px 0 rgba(119, 83, 35, .08), 0 15px 30px rgba(32, 54, 63, .08);
}
.qb-role-preview-intro {
  padding: clamp(17px, 2.5vw, 25px);
  background: linear-gradient(135deg, #fffdf8, var(--qb-dest-soft));
}
.qb-role-preview-intro > span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--qb-dest-deep);
  font-size: .73rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.qb-role-preview-intro h2,
.qb-role-preview-card h3 { color: var(--qb-dest-deep); }
.qb-role-preview-intro h2 { margin: 0 0 6px; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.qb-role-preview-intro p,
.qb-role-preview-card p { margin: 0; color: #58636a; line-height: 1.45; }
.qb-role-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.qb-role-preview-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: clamp(14px, 2vw, 19px);
}
.qb-role-preview-card:is(button) {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.qb-role-preview-card:is(button):hover,
.qb-role-preview-card:is(button):focus-visible {
  transform: translateY(-2px);
  border-color: var(--qb-dest-accent);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--qb-dest-accent) 15%, transparent), 0 18px 32px rgba(32, 54, 63, .11);
  outline: none;
}
.qb-role-preview-card:is(button).is-active {
  border-color: var(--qb-dest-accent);
  background: linear-gradient(135deg, #fffdf8, var(--qb-dest-soft));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--qb-dest-accent) 22%, transparent), 0 15px 30px rgba(32, 54, 63, .09);
}
.qb-role-preview-card > .qb-ico {
  width: 28px;
  height: 28px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--qb-dest-accent) 45%, #d5c9b1);
  border-radius: 14px;
  color: var(--qb-dest-deep);
  background: var(--qb-dest-soft);
  box-sizing: content-box;
}
.qb-role-preview-card h3 { margin: 2px 0 4px; overflow-wrap: anywhere; }
.qb-role-preview-card strong {
  display: block;
  margin: 2px 0 4px;
  color: var(--qb-dest-deep);
  font-size: 1.04rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.qb-role-preview-card small {
  display: block;
  color: #58636a;
  font-size: .88rem;
  line-height: 1.42;
}
.qb-role-preview-panel {
  min-width: 0;
  padding: clamp(17px, 2.5vw, 25px);
  border: 1.5px solid var(--qb-dest-line);
  border-radius: 20px;
  background: rgba(255, 253, 247, .98);
  box-shadow: 0 7px 0 rgba(119, 83, 35, .09), 0 18px 34px rgba(32, 54, 63, .08);
}
.qb-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}
.qb-preview-heading span:first-child {
  color: var(--qb-dest-deep);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.qb-preview-heading h3 { margin: 3px 0 0; color: #263c4f; font-size: clamp(1.22rem, 2.4vw, 1.55rem); }
.qb-preview-count,
.qb-preview-tag {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--qb-dest-deep) !important;
  background: var(--qb-dest-soft);
  font-size: .78rem !important;
  font-weight: 900;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.qb-preview-list { display: grid; gap: 10px; margin-bottom: 15px; }
.qb-preview-row,
.qb-preview-classroom,
.qb-preview-board-note {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--qb-dest-line);
  border-radius: 14px;
  background: #fffef9;
}
.qb-preview-row > .qb-ico,
.qb-preview-classroom > .qb-ico,
.qb-preview-board-note > .qb-ico { width: 24px; height: 24px; color: var(--qb-dest-deep); }
.qb-preview-row strong,
.qb-preview-classroom strong { display: block; color: #293f50; }
.qb-preview-row small,
.qb-preview-classroom small { display: block; margin-top: 2px; color: #657078; line-height: 1.35; }
.qb-preview-row:is(button) {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
}
.qb-preview-row.qb-preview-open { cursor: pointer; }
.qb-preview-row.qb-preview-open:hover,
.qb-preview-row.qb-preview-open:focus-visible {
  border-color: var(--qb-dest-accent);
  background: var(--qb-dest-soft);
  outline: 3px solid color-mix(in srgb, var(--qb-dest-accent) 28%, transparent);
}
.qb-preview-classroom { grid-template-columns: 38px minmax(0, 1fr); margin-bottom: 15px; }
.qb-preview-board-note { grid-template-columns: 30px minmax(0, 1fr); margin-top: 13px; color: #293f50; }
.qb-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.qb-preview-metrics > div { padding: 14px; border-radius: 14px; text-align: center; background: var(--qb-dest-soft); }
.qb-preview-metrics strong { display: block; color: var(--qb-dest-deep); font-size: 1.5rem; }
.qb-preview-metrics small { display: block; color: #58636a; line-height: 1.3; }
.qb-preview-chart { display: grid; gap: 12px; margin: 16px 0 19px; }
.qb-preview-chart > div { display: grid; grid-template-columns: minmax(92px, 1fr) minmax(120px, 3fr) 48px; align-items: center; gap: 10px; }
.qb-preview-chart span { color: #394f5e; font-weight: 850; }
.qb-preview-chart i { height: 14px; overflow: hidden; border-radius: 999px; background: #e6e8df; }
.qb-preview-chart i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--qb-dest-accent), var(--qb-dest-deep)); }
.qb-preview-chart strong { color: var(--qb-dest-deep); text-align: right; }
.qb-preview-report { margin: 12px 0 15px; padding: 15px; border: 1px solid var(--qb-dest-line); border-radius: 14px; background: #fffef9; }
.qb-preview-report h4 { margin: 10px 0 4px; color: var(--qb-dest-deep); }
.qb-preview-report h4:first-child { margin-top: 0; }
.qb-preview-report p { margin: 0 0 10px; color: #53636d; line-height: 1.5; }
.qb-preview-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 5px 0 15px; }
.qb-preview-primary,
.qb-preview-secondary,
.qb-preview-danger,
.qb-preview-chip,
.qb-preview-answer,
.qb-preview-check {
  min-height: 42px;
  border-radius: 12px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.qb-preview-primary {
  padding: 10px 16px;
  border: 0;
  color: #fff;
  background: var(--qb-dest-deep);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--qb-dest-deep) 72%, #000);
}
.qb-preview-primary:hover,
.qb-preview-primary:focus-visible { filter: brightness(1.08); outline: 3px solid color-mix(in srgb, var(--qb-dest-accent) 35%, transparent); }
.qb-preview-secondary,
.qb-preview-danger,
.qb-preview-chip {
  padding: 9px 13px;
  border: 1.5px solid var(--qb-dest-line);
  color: var(--qb-dest-deep);
  background: #fffef9;
}
.qb-preview-danger { color: #973e38; border-color: #daa39d; }
.qb-preview-chip.is-active { color: #fff; border-color: var(--qb-dest-deep); background: var(--qb-dest-deep); }
.qb-preview-status {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  color: #245c46;
  background: #e6f6ed;
  font-weight: 800;
}
.qb-preview-help,
.qb-preview-question { color: #58636a; line-height: 1.5; }
.qb-preview-field { display: grid; gap: 6px; margin-bottom: 13px; color: #394f5e; font-weight: 850; }
.qb-preview-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1.5px solid var(--qb-dest-line);
  border-radius: 12px;
  color: #263c4f;
  background: #fffef9;
  font: inherit;
}
.qb-preview-answers { display: grid; gap: 9px; margin-bottom: 14px; }
.qb-preview-answer {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1.5px solid var(--qb-dest-line);
  color: #304656;
  background: #fffef9;
  text-align: left;
}
.qb-preview-answer strong { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--qb-dest-deep); background: var(--qb-dest-soft); }
.qb-preview-answer.is-active { border-color: var(--qb-dest-accent); background: var(--qb-dest-soft); }
.qb-preview-check {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--qb-dest-line);
  color: #304656;
  background: #fffef9;
  text-align: left;
}
.qb-preview-check > span { width: 22px; height: 22px; border: 2px solid var(--qb-dest-accent); border-radius: 7px; background: #fff; }
.qb-preview-check.is-checked > span { background: var(--qb-dest-deep); box-shadow: inset 0 0 0 5px #fff; }

/* Real role pages keep every control but inherit the warm destination cards. */
#screen-teacher .wt-card,
#screen-teacher .wt-empty,
#screen-classroom .cls-card,
#screen-hall .hall-card,
#screen-notices .an-card,
#screen-screentime .pt-card,
#screen-screentime .pt-empty {
  border-color: var(--qb-dest-line) !important;
  border-radius: 17px !important;
  background: rgba(255, 253, 247, .97) !important;
  box-shadow: 0 5px 0 rgba(119, 83, 35, .08), 0 13px 26px rgba(32, 54, 63, .07) !important;
}
#screen-teacher input,
#screen-teacher textarea,
#screen-teacher select,
#screen-classroom input,
#screen-classroom textarea,
#screen-classroom select,
#screen-hall input,
#screen-hall textarea,
#screen-notices input,
#screen-notices textarea,
#screen-screentime input,
#screen-screentime select {
  border: 1.5px solid #cbbd9f !important;
  border-radius: 12px !important;
  background: #fffef9 !important;
}

#screen-settings .wl-card,
#screen-admin .wl-card { margin: 12px 0; padding: clamp(14px, 2.2vw, 22px); }
#screen-settings .wl-card h3,
#screen-admin .wl-card h2,
#screen-admin .wl-card h3 { color: var(--qb-dest-deep); }

#screen-settings .wl-profile,
#screen-settings .wl-prow,
#screen-admin .wl-subcard {
  border-color: #dfd3b8;
  background: var(--qb-dest-soft) !important;
}

/* Settings + Admin ledger frame (2026-08-25).
   This is presentation only: existing cards, ids, controls and handlers remain
   intact. The left index and right filing area mirror Teacher Reports' calm
   rail/workspace structure without nesting or duplicating any setting. */
#screen-settings .wl-ledger-page,
#screen-admin .wl-ledger-page {
  color: #24363c;
  background: #f3f5f4;
  border: 1px solid #d9e0dc;
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 28px);
  box-shadow: 0 12px 34px rgba(32, 54, 63, .08);
}

#screen-settings .wl-ledger-head {
  padding: 0 2px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid #d9e0dc;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

#screen-settings .wl-ledger-head .wl-ledger-kicker {
  margin: 0 0 5px;
  color: #52666d;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-settings .wl-ledger-head h1,
#screen-settings .wl-set-gh,
#screen-settings .wl-card h3,
#screen-admin .wl-admin-head h1,
#screen-admin .wl-adm-group .t,
#screen-admin .wl-card h2,
#screen-admin .wl-card h3 {
  font-weight: 600;
}

#screen-settings .wl-ledger-head h1 {
  display: block;
  margin: 0 0 6px;
  color: #173f50;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

#screen-settings .wl-ledger-head > p:last-child { margin: 0; color: #61747a; }

#screen-settings .wl-ledger-shell,
#screen-admin .wl-adm-ledger-shell {
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

#screen-settings .wl-ledger-rail,
#screen-admin .wl-adm-ledger-rail {
  border-right: 1px solid #d9e0dc;
  padding-right: clamp(16px, 2vw, 24px);
}

#screen-settings .wl-set-find,
#screen-admin .wl-adm-find {
  position: static;
  padding: 0;
  margin: 0;
  background: transparent;
}

#screen-settings .wl-set-searchwrap,
#screen-admin .wl-adm-searchwrap {
  border: 1px solid #bfcac5;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

#screen-settings .wl-set-search { border: 0; border-radius: 12px; }

#screen-settings .wl-set-jump,
#screen-admin .wl-adm-jump {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 14px;
}

#screen-settings .wl-set-jbtn,
#screen-admin .wl-adm-jbtn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 11px;
  color: #41565e;
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}

#screen-settings .wl-set-jbtn:hover,
#screen-admin .wl-adm-jbtn:hover {
  border-color: #c4d1cc;
  background: #fff;
  color: #173f50;
}

/* The selected tab (chips switch sections one-at-a-time, 2026-08-25). */
#screen-settings .wl-set-jbtn-on,
#screen-settings .wl-set-jbtn-on:hover,
#screen-admin .wl-adm-jbtn-on,
#screen-admin .wl-adm-jbtn-on:hover {
  border-color: #173f50;
  background: #173f50;
  color: #fff;
  font-weight: 800;
}
#screen-admin .wl-adm-jbtn-on .n { color: #173f50; background: #fff; }

#screen-settings .wl-ledger-main,
#screen-admin .wl-adm-ledger-main { min-width: 0; }

#screen-settings .wl-set-group {
  margin: 0 0 clamp(28px, 4vw, 44px);
  scroll-margin-top: 24px;
}

#screen-settings .wl-set-group:last-child { margin-bottom: 0; }

#screen-settings .wl-set-gh {
  margin: 0 0 5px;
  color: #173f50;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: 0;
  text-transform: none;
}

#screen-settings .wl-set-gsub { margin: 0 0 16px; color: #66797f; }

#screen-settings .wl-set-item > .wl-card,
#screen-admin .wl-adm-in > .wl-card {
  border: 1px solid #d7dfdb;
  border-radius: 15px;
  background: #fffefb;
  box-shadow: 0 5px 16px rgba(32, 54, 63, .05);
}

#screen-admin .wl-adm-group {
  margin: 0 0 13px;
  border: 1px solid #ccd6d1;
  border-radius: 14px;
  background: #fffefb;
  box-shadow: 0 4px 14px rgba(32, 54, 63, .045);
}

#screen-admin .wl-adm-group > summary { padding: 17px 18px; }
#screen-admin .wl-adm-group > summary:hover { background: #f8faf8; }
#screen-admin .wl-adm-group .s { display: block; flex-basis: 100%; color: #66797f; }
#screen-admin .wl-adm-group[open] .wl-adm-in { padding: 18px; }

#screen-admin .wl-stale-row {
  padding: 16px 0;
  border-top: 1px solid #dfe5e2;
}

#screen-admin .wl-stale-row:first-child { border-top: 0; }
#screen-admin .wl-stale-row-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
#screen-admin .wl-stale-email { margin: 5px 0 12px; color: #5d7076; overflow-wrap: anywhere; }
#screen-admin .wl-stale-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 0 14px; }
#screen-admin .wl-stale-row dl > div { padding: 10px; border-radius: 10px; background: #f3f6f4; }
#screen-admin .wl-stale-row dt { color: #64767c; }
#screen-admin .wl-stale-row dd { margin: 3px 0 0; color: #20383f; font-weight: 600; }
#screen-admin .wl-stale-status { padding: 4px 9px; border-radius: 999px; background: #e5f2eb; color: #286046; white-space: nowrap; }
#screen-admin .wl-stale-status.quiet { background: #eef1ef; color: #5b6d72; }
#screen-admin .wl-stale-status.danger { background: #fbe7e4; color: #983a30; }
#screen-admin .wl-stale-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
#screen-admin .wl-stale-actions .go-btn,
#screen-admin .wl-stale-actions .subject-btn,
#screen-admin .wl-stale-actions .wl-logout-btn { width: auto; margin: 0; text-decoration: none; }
#screen-admin .wl-stale-empty { padding: 16px; border-radius: 12px; background: #edf6f0; color: #315c45; }

@media (max-width: 820px) {
  #screen-settings .wl-ledger-shell,
  #screen-admin .wl-adm-ledger-shell { grid-template-columns: 1fr; gap: 22px; }
  #screen-settings .wl-ledger-rail,
  #screen-admin .wl-adm-ledger-rail { border-right: 0; border-bottom: 1px solid #d9e0dc; padding: 0 0 18px; }
  #screen-settings .wl-set-jump,
  #screen-admin .wl-adm-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-admin .wl-stale-row dl { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  #screen-settings .wl-ledger-page,
  #screen-admin .wl-ledger-page { padding: 13px; border-radius: 15px; }
  #screen-settings .wl-set-jump,
  #screen-admin .wl-adm-jump { grid-template-columns: 1fr; }
  #screen-admin .wl-stale-row-head { align-items: flex-start; flex-direction: column; }
}

/* Keep the existing actions, but make them feel like one coherent game UI. */
.qb-destination .go-btn,
.qb-destination .subject-btn,
.qb-destination .wl-subj-tab,
.qb-destination .wl-level-tab,
.qb-destination .wm-open,
.qb-destination .td-nav button,
.qb-destination .ml-tab {
  min-width: 0;
  border-radius: 12px !important;
  font-weight: 850 !important;
}

.qb-destination .go-btn:not(.alt):not(.ghost):not(.wl-danger),
.qb-destination .wm-open.go {
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--qb-dest-accent) 82%, #fff), var(--qb-dest-accent)) !important;
  box-shadow: 0 5px 0 var(--qb-dest-deep) !important;
}

.qb-destination .go-btn.alt,
.qb-destination .subject-btn,
.qb-destination .wl-subj-tab,
.qb-destination .wl-level-tab,
.qb-destination .ml-tab {
  border: 1.5px solid color-mix(in srgb, var(--qb-dest-accent) 45%, #c8c2b3) !important;
  color: var(--qb-dest-deep) !important;
  background: #fffdf8 !important;
  box-shadow: 0 3px 0 rgba(65, 57, 43, .12) !important;
}

.qb-destination .wl-subj-tab.on,
.qb-destination .wl-level-tab.on,
.qb-destination .ml-tab.on,
.qb-destination .ml-tab.active {
  color: #fff !important;
  background: var(--qb-dest-accent) !important;
  border-color: var(--qb-dest-deep) !important;
}

.qb-destination button:hover { transform: translateY(-1px); }
.qb-destination button:active { transform: translateY(2px); }

/* Themes: Kindred Village's mint, parchment, teal and gold storybook language,
   while keeping the existing tier and pagination logic untouched. */
#screen-themes.qb-destination {
  background:
    radial-gradient(circle at 8% 5%, rgba(255, 230, 128, .28), transparent 24rem),
    radial-gradient(circle at 92% 11%, rgba(191, 231, 255, .56), transparent 28rem),
    linear-gradient(180deg, #eefaff 0, #e8f8ef 310px, #f4fbef 62%, #fffaf0 100%);
}
#screen-themes .qb-destination-hero {
  border-color: #d8b876;
  border-radius: 18px;
  background:
    radial-gradient(circle at 13% 12%, rgba(191, 231, 255, .28), transparent 25rem),
    linear-gradient(145deg, #245e70, #277b73);
  box-shadow: 0 5px 0 rgba(126, 91, 37, .13), 0 16px 32px rgba(35, 94, 112, .17);
}
#screen-themes .qb-destination-copy > span { color: #ffe680; }
#screen-themes .qb-destination-copy h1 {
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.025em;
}
#screen-themes .qb-destination-copy p { color: #edfffb; }
#screen-themes .qb-destination-art {
  border-color: rgba(255, 230, 128, .92);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff8df, #e8f8ef);
}
#screen-themes .theme-unit {
  margin: 0 0 14px;
  overflow: hidden;
  border-color: #d8b876 !important;
  border-radius: 16px !important;
  background: rgba(255, 253, 247, .96) !important;
  box-shadow: 0 5px 0 rgba(126, 91, 37, .1), 0 15px 30px rgba(36, 94, 112, .1) !important;
}
#screen-themes .theme-unit-head {
  padding: 15px;
  border-bottom: 2px solid #d4e9e4;
  background: linear-gradient(135deg, #d9f5f0, #f4fbef 58%, #fff8df);
}
#screen-themes .theme-lesson {
  border-color: #b9ded5;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffef9, #f4fbef);
  box-shadow: 0 3px 0 rgba(36, 94, 112, .09);
}

/* Dictionary search stays the main object, with clear contained controls. */
#screen-dictionary .dict-search-card { padding: clamp(15px, 2.4vw, 24px); }
#screen-dictionary .dict-input {
  border: 2px solid var(--qb-dest-accent);
  border-radius: 13px;
  background: #fffef9;
}
#screen-dictionary #dict-result > *,
#screen-dictionary #dict-mywords > * { border-radius: 18px; }

/* Revision and Records retain every real filter while reducing visual noise. */
#screen-revision .wl-areabar,
#screen-revision .wl-levels,
#screen-records .wl-areabar,
#screen-records .wl-levels {
  gap: 7px;
  padding: 8px;
  border: 1px solid #e1d5bc;
  border-radius: 15px;
  background: var(--qb-dest-soft);
}
#screen-revision .wl-empty,
#screen-records .wl-empty {
  border: 1.5px dashed color-mix(in srgb, var(--qb-dest-accent) 55%, #c8c2b3);
  border-radius: 16px;
  color: #52636d;
  background: #fffdf8;
}

/* Test choices become real illustrated selection cards. */
#screen-practice-tests .qb-tests-layout { display: grid; gap: 14px; }
#screen-practice-tests .qb-tests-intro { padding: 14px 18px !important; }
#screen-practice-tests .qb-tests-intro > .xp-label,
#screen-practice-tests .qb-tests-intro > h1 { display: none; }
#screen-practice-tests .qb-tests-layout > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#screen-practice-tests .qb-tests-layout > div > button {
  min-width: 0;
  min-height: 132px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 5px 14px;
  padding: 14px !important;
  overflow: hidden;
  border: 1.5px solid var(--qb-dest-line) !important;
  border-radius: 17px !important;
  color: #263b4b;
  background: #fffdf8 !important;
  box-shadow: 0 5px 0 rgba(115, 79, 33, .12), 0 12px 24px rgba(37, 52, 60, .08) !important;
  text-align: left;
}
#screen-practice-tests .qb-tests-layout > div > button::before {
  content: '';
  grid-row: 1 / 3;
  width: 96px;
  height: 92px;
  align-self: center;
  border: 1px solid #e3d5b5;
  border-radius: 13px;
  background: #fff6dc center / contain no-repeat;
}
#screen-practice-tests .qb-tests-layout > div > button:nth-child(1)::before { background-image: url('../subject-hub-prototype/assets/learning-areas/english-2.webp'); }
#screen-practice-tests .qb-tests-layout > div > button:nth-child(2)::before { background-image: url('../subject-hub-prototype/assets/learning-areas/english-4.webp'); }
#screen-practice-tests .qb-tests-layout > div > button:nth-child(3)::before { background-image: url('../subject-hub-prototype/assets/learning-areas/english-8.webp'); }
#screen-practice-tests .qb-tests-layout > div > button:nth-child(4)::before { background-image: url('../subject-hub-prototype/assets/learning-areas/technologies-2.webp'); }
#screen-practice-tests .qb-tests-layout > div > button strong,
#screen-practice-tests .qb-tests-layout > div > button span { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }

/* Let's Write: one illustrated storybook workspace, with drawn interface icons only. */
#screen-writing .ww-wrap { padding-bottom: 24px; }
#screen-writing .ww-sub {
  max-width: 820px;
  color: #5d5260;
  font-weight: 700;
  line-height: 1.48;
}
#screen-writing .ww-head .go-btn { padding: 12px 18px !important; }
#screen-writing .ww-head .subject-btn {
  min-height: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 10px 14px !important;
  font-size: .95rem !important;
}
#screen-writing .ww-empty,
#screen-mail .wm-empty { padding: clamp(22px, 4vw, 44px); }
#screen-writing .ww-empty {
  min-height: 180px;
  border-style: solid !important;
  background: linear-gradient(145deg, #fffdf8, var(--qb-dest-soft)) !important;
}
#screen-writing .ww-empty strong { color: var(--qb-dest-deep); font-size: 1.2rem; }
#screen-writing .ww-empty-icon {
  width: 66px;
  height: 66px;
  margin-bottom: 4px;
  border: 1px solid #dab9d5;
  border-radius: 18px;
  color: var(--qb-dest-deep);
  background: #fff;
  box-shadow: 0 5px 0 rgba(102, 52, 95, .12);
}
#screen-writing .ww-empty-icon .qb-ico { width: 32px; height: 32px; }
#screen-writing .ww-list { gap: 11px; }
#screen-writing .ww-card {
  min-width: 0;
  min-height: 84px;
  padding: 12px 15px !important;
  border-color: #d7bfd3 !important;
  background: linear-gradient(135deg, #fffdf9, #fbf1f9) !important;
}
#screen-writing .ww-card-icon,
#screen-writing .ww-genre-icon {
  width: 56px;
  height: 56px;
  border: 1px solid #d8b8d3;
  border-radius: 15px;
  color: var(--qb-dest-deep);
  background: #fff;
  box-shadow: 0 4px 0 rgba(102, 52, 95, .1);
}
#screen-writing .ww-card-icon .qb-ico,
#screen-writing .ww-genre-icon .qb-ico { width: 29px; height: 29px; }
#screen-writing .ww-card-main { gap: 2px; overflow: hidden; }
#screen-writing .ww-card-main strong {
  overflow: hidden;
  color: #283d4d;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screen-writing .ww-genres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#screen-writing .ww-genre {
  min-width: 0;
  min-height: 102px;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 13px !important;
  overflow: hidden;
  border-color: #d7bfd3 !important;
  background: linear-gradient(145deg, #fffdf9, #fbf1f9) !important;
  box-shadow: 0 5px 0 rgba(102, 52, 95, .1) !important;
}
#screen-writing .ww-genre:hover { border-color: var(--qb-dest-accent) !important; }
#screen-writing .ww-genre-copy { overflow: hidden; }
#screen-writing .ww-genre-copy strong {
  color: var(--qb-dest-deep);
  font-size: 1rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
#screen-writing .ww-genre-copy small { line-height: 1.3; overflow-wrap: anywhere; }
#screen-writing .ww-piece-genre,
#screen-writing .ww-swbtn,
#screen-writing .ww-actions button,
#screen-writing .ww-comment h3,
#screen-writing summary { align-items: center; }
#screen-writing .ww-piece-icon,
#screen-writing .ww-action-icon,
#screen-writing .ww-heading-icon,
#screen-writing .ww-kid-icon { margin-right: 1px; color: currentColor; }
#screen-writing .ww-piece-icon .qb-ico { width: 21px; height: 21px; }
#screen-writing .ww-action-icon .qb-ico,
#screen-writing .ww-heading-icon .qb-ico,
#screen-writing .ww-kid-icon .qb-ico { width: 18px; height: 18px; }
#screen-writing .ww-switch {
  max-width: 620px;
  padding: 6px;
  border: 1px solid #dcc8d8;
  border-radius: 15px;
  background: #f8eef6;
}
#screen-writing .ww-swbtn { border: 0 !important; border-radius: 10px !important; }
#screen-writing .ww-swbtn.on {
  color: #fff !important;
  background: var(--qb-dest-accent) !important;
  box-shadow: 0 3px 0 var(--qb-dest-deep);
}
#screen-writing .ww-advice,
#screen-writing .ww-plan-cell,
#screen-writing .ww-edit,
#screen-writing .ww-comment,
#screen-writing .ww-ro-body {
  border-color: #dcc8d8 !important;
  border-radius: 16px !important;
}
#screen-writing .ww-advice { color: #4e3b4b; background: #fbf1f9; }
#screen-writing .ww-plan-cell { background: #fffdf9; }
#screen-writing .ww-plan-cell label { color: var(--qb-dest-deep); }
#screen-writing .ww-title:focus,
#screen-writing .ww-plan-cell textarea:focus,
#screen-writing .ww-rich:focus { outline: 3px solid rgba(167, 85, 156, .16); border-color: var(--qb-dest-accent) !important; }
#screen-writing .ww-tb { border-color: #d8c4d4; background: #f8f0f7; }
#screen-writing .ww-highlight-mark {
  padding: 0 3px;
  border-radius: 3px;
  background: #ffe9a8;
  box-shadow: inset 0 -3px 0 #e4b94e;
}
#screen-writing .ww-comment { background: #fff8ea; }
#screen-writing .ww-review { border-radius: 13px; }

/* Mail and Diary retain their actions and read like organised workspaces. */
#screen-mail .wm-compose { padding: clamp(14px, 2.2vw, 20px); }
#screen-mail textarea,
#screen-mail input,
#screen-todo input,
#screen-custom input,
#screen-custom textarea,
#screen-settings input,
#screen-admin input,
#screen-admin select {
  border: 1.5px solid #cbbd9f !important;
  border-radius: 12px !important;
  background: #fffef9 !important;
}
#screen-todo .td-book { overflow: hidden; }
#screen-todo .td-pagehead { background: linear-gradient(135deg, var(--qb-dest-soft), #fffdf8); }

/* Custom: keep all three original panels and editor choices, but align them to the shell. */
#screen-custom #custom-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #d9cba9;
  border-radius: 16px;
  background: rgba(255, 253, 247, .94);
}
#screen-custom .ml-card,
#screen-custom .ml-template,
#screen-custom .sl-card,
#screen-custom .mr-card {
  border-color: #d9c8a2 !important;
  border-radius: 15px !important;
  background: #fffdf8 !important;
  box-shadow: 0 4px 0 rgba(81, 62, 34, .09) !important;
}

/* Creator-only Admin remains role-gated; this only organises its dense tools. */
#screen-admin .wl-admin { padding-bottom: 28px; }
/* 2026-08-26 (owner: "so much space… i dont want the admin tab on the top"): the Admin
   screen drops its 172px destination hero, and the module's own head becomes a
   Teacher-Reports-style one-line header — title left, Refresh/Log out right. The 🔄
   Refresh button loses its subject-TILE sizing here (it is a header action on this
   screen, not a home-grid tile). */
#screen-admin .qb-destination-hero { display: none; }
#screen-admin .wl-admin { margin-top: 6px; }
#screen-admin .wl-admin-head { justify-content: space-between; margin: 0 0 10px; }
#screen-admin .wl-admin-head h1 { font-size: 19px; margin: 0; line-height: 1.3; }
#screen-admin .wl-admin-head .subject-btn {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* accounts.css stacks .wl-admin-head into a column at ≤820px — with the compact
   header the title and small actions fit one wrapping row on a phone too. */
@media (max-width: 820px) {
  #screen-admin .wl-admin-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
#screen-admin .wl-kid,
#screen-admin .wl-admin-tools,
#screen-admin .wl-report { border-radius: 14px; }
#screen-admin table { width: 100%; }

/* Safe local-only Admin design preview. Real Creator data is never painted here. */
#screen-admin .qb-admin-preview { display: grid; gap: 14px; }
#screen-admin .qb-admin-preview-note {
  margin: 0;
  background: linear-gradient(135deg, #fffdf8, var(--qb-dest-soft)) !important;
}
#screen-admin .qb-admin-preview-label {
  display: inline-block;
  margin-bottom: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--qb-dest-deep);
  font-size: .73rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#screen-admin .qb-admin-preview-note h2 { margin: 0 0 5px; }
#screen-admin .qb-admin-preview-note p,
#screen-admin .qb-admin-preview-card p { margin: 0; color: #5b6266; line-height: 1.42; }
#screen-admin .qb-admin-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
#screen-admin .qb-admin-preview-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
}
#screen-admin .qb-admin-preview-card > .qb-ico {
  width: 28px;
  height: 28px;
  padding: 11px;
  border: 1px solid #d7bd91;
  border-radius: 14px;
  color: var(--qb-dest-deep);
  background: var(--qb-dest-soft);
  box-sizing: content-box;
}
#screen-admin .qb-admin-preview-card h3 { margin: 2px 0 4px; overflow-wrap: anywhere; }

/* Study tools: Worksheets, Word Lists and Word Games use the same illustrated
   destination shell without changing their existing data or actions. */
#screen-worksheets,
#screen-wordgym {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 18px clamp(10px, 2.2vw, 28px) calc(var(--wl-tabbar-h, 78px) + 28px) !important;
  overflow-x: clip;
  background:
    radial-gradient(circle at 7% 4%, rgba(244, 198, 103, .2), transparent 22rem),
    linear-gradient(180deg, #f8f2e6 0, #fffdf8 360px, #f7f4ed 100%);
}
.qb-tool-page {
  --qb-dest-accent: #2f7dcc;
  --qb-dest-deep: #163e4a;
  --qb-dest-soft: #e8f3ff;
  --qb-dest-line: #d9c8a2;
  width: 100%;
  margin: 0;
  color: #263b4b;
  box-sizing: border-box;
}
.qb-tool-page--worksheets { --qb-dest-accent: #b96a32; --qb-dest-deep: #173f48; --qb-dest-soft: #fff0df; }
.qb-tool-page--wordgym { --qb-dest-accent: #2d8179; --qb-dest-deep: #17484c; --qb-dest-soft: #e3f4ef; }
.qb-tool-page .qb-destination-hero { width: 100%; }
.qb-tool-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 239, 203, .72);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}
.qb-tool-back:hover { background: rgba(255, 255, 255, .22); }
.qb-tool-stat {
  width: fit-content;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 13px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 239, 203, .55);
  border-radius: 999px;
  color: #e9f2f1;
  background: rgba(7, 28, 35, .28);
  font-size: .8rem;
  font-weight: 800;
}
.qb-tool-stat strong { color: #f5d492; font-size: 1.05rem; }
.qb-tool-content { display: grid; gap: 18px; padding-bottom: 28px; }
.qb-tool-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1.5px solid var(--qb-dest-line);
  border-radius: 15px;
  color: #53616a;
  background: linear-gradient(135deg, #fffdf8, var(--qb-dest-soft));
}
.qb-tool-notice strong { color: var(--qb-dest-deep); }

/* Worksheets: generous landscape artwork slots show every preview uncropped. */
.wksh-section {
  padding: clamp(14px, 2vw, 20px);
  border: 1.5px solid var(--qb-dest-line);
  border-radius: 20px;
  background: rgba(255, 253, 247, .97);
  box-shadow: 0 6px 0 rgba(119, 83, 35, .08), 0 15px 30px rgba(32, 54, 63, .07);
}
.wksh-section-head,
.wg-section-head,
.wg-scope-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}
.wksh-section-head { justify-content: flex-start; }
.wksh-section-icon {
  width: 48px;
  height: 48px;
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid #dfbf91;
  border-radius: 14px;
  color: var(--qb-dest-deep);
  background: var(--qb-dest-soft);
}
.wksh-section-icon .qb-ico { width: 25px; height: 25px; }
.wksh-section-head h2,
.wg-section-head h2,
.wg-scope-heading h2 { margin: 0; color: var(--qb-dest-deep); font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.wksh-section-head p,
.wg-section-head p,
.wg-scope-heading p { margin: 3px 0 0; color: #64717b; font-size: .84rem; font-weight: 750; }
.wksh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 242px), 1fr));
  gap: 14px;
}
.wksh-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1.5px solid #d8c5a3;
  border-radius: 17px;
  background: #fffefa;
  box-shadow: 0 5px 0 rgba(104, 73, 30, .09);
}
.wksh-visual {
  min-height: 176px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-bottom: 1px solid #eadfc9;
  background: linear-gradient(145deg, #f4ead7, #fffaf0);
}
.wksh-thumb {
  width: 100%;
  height: 176px;
  display: block;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
}
.wksh-thumb-pdf {
  width: min(142px, 72%);
  height: 176px;
  display: grid;
  place-items: center;
  border: 1px solid #d8c5a3;
  border-radius: 10px;
  color: var(--qb-dest-deep);
  background: linear-gradient(135deg, #fff, #f5ead7);
  box-shadow: 7px 7px 0 rgba(95, 55, 31, .09);
}
.wksh-thumb-pdf .qb-ico { width: 48px; height: 48px; }
.wksh-copy { min-width: 0; padding: 13px 13px 11px; }
.wksh-title {
  margin: 0;
  color: #273e50;
  font-size: 1rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.wksh-blurb { margin: 6px 0 0; color: #66727d; font-size: .8rem; line-height: 1.35; }
.wksh-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 12px 13px; }
.wksh-btn {
  min-width: 82px;
  min-height: 40px;
  display: inline-flex;
  flex: 1 1 82px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: #2f78bd;
  box-shadow: 0 3px 0 #20588c;
  font: inherit;
  font-size: .83rem;
  font-weight: 900;
  cursor: pointer;
}
.wksh-btn.save { background: #318377; box-shadow: 0 3px 0 #205e56; }
.wksh-btn.hide-toggle { flex: 1 1 100%; background: #647680; box-shadow: 0 3px 0 #46545c; }
.wksh-btn.hide-toggle.is-hidden { background: #b96a32; box-shadow: 0 3px 0 #81471f; }
.wksh-btn .qb-ico { width: 17px; height: 17px; }
.wksh-card.hidden { opacity: .58; filter: grayscale(.18); }

/* Word Lists and Word Games: compact scope controls and readable image-button
   alternatives replace the old square emoji tiles. */
.wg-scope {
  margin: 0;
  padding: clamp(14px, 2.2vw, 22px);
  border: 1.5px solid var(--qb-dest-line);
  border-radius: 20px;
  background: rgba(255, 253, 247, .97);
  box-shadow: 0 6px 0 rgba(119, 83, 35, .08), 0 15px 30px rgba(32, 54, 63, .07);
}
.wg-scope-heading { align-items: end; padding-bottom: 12px; border-bottom: 1px solid #e5dac4; }
.wg-scope-heading > div > span,
.wg-section-head > div > span {
  color: var(--qb-dest-accent);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.wg-scope .game-scope-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 10px 0;
}
.wg-scope .game-scope-lbl { padding-top: 9px; color: var(--qb-dest-deep); font-size: .82rem; font-weight: 950; }
.wg-scope #wg-level-tabs,
.wg-scope #wg-tier-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.wg-scope .game-scope-tab {
  min-height: 38px;
  padding: 7px 12px;
  border: 1.5px solid #cec3ae;
  border-radius: 999px;
  color: #4d5b64;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
}
.wg-scope .game-scope-tab.on {
  border-color: var(--qb-dest-accent);
  color: #fff;
  background: var(--qb-dest-accent);
  box-shadow: 0 3px 0 var(--qb-dest-deep);
}
.wg-scope .game-scope-hint {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 11px;
  color: #455b5c;
  background: var(--qb-dest-soft);
  font-size: .82rem;
  font-weight: 750;
}
.wg-guide-grid {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 2fr);
  align-items: stretch;
  gap: 13px;
}
.wg-level-choice,
.wg-challenge-choice {
  min-width: 0;
  padding: 14px;
  border: 1.5px solid #d8c8a9;
  border-radius: 15px;
  background: linear-gradient(145deg, #fffdf7, #f6efe2);
}
.wg-level-choice {
  display: grid;
  align-content: start;
  gap: 7px;
}
.wg-level-choice > span,
.wg-challenge-choice > span {
  display: block;
  margin-bottom: 5px;
  color: var(--qb-dest-deep);
  font-size: 1rem;
  font-weight: 950;
}
.wg-level-choice select {
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  border: 2px solid #63aaa1;
  border-radius: 11px;
  color: #24464b;
  background: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.wg-level-choice select:focus {
  outline: 3px solid rgba(245, 179, 1, .35);
  outline-offset: 2px;
}
.wg-level-choice small { color: #607077; font-size: .82rem; line-height: 1.4; }
.wg-challenge-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wg-challenge {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid #b9d8d1;
  border-radius: 12px;
  color: #314b54;
  background: #f4fbef;
  box-shadow: 0 3px 0 rgba(36, 94, 112, .08);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.wg-challenge-emoji { font-size: 1.7rem; text-align: center; }
.wg-challenge strong,
.wg-challenge small { display: block; }
.wg-challenge strong { color: #40345f; font-size: 1rem; line-height: 1.2; }
.wg-challenge small { margin-top: 3px; color: #607077; font-size: .72rem; line-height: 1.3; }
.wg-challenge.on {
  border-color: #d6ad55;
  color: #5c4520;
  background: #f3e4c8;
  box-shadow: 0 3px 0 rgba(185, 134, 51, .2);
}
.wg-challenge.on strong { color: #5c4520; }
.wg-challenge.on small { color: #6e5528; }
.wg-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 7px;
  border: 1px solid #d7c7aa;
  border-radius: 16px;
  background: rgba(255, 253, 247, .94);
}
.wg-tab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #54636b;
  background: transparent;
  font: inherit;
  font-size: .96rem;
  font-weight: 900;
  cursor: pointer;
}
.wg-tab .qb-ico { width: 20px; height: 20px; }
.wg-tab.on { border-color: var(--qb-dest-deep); color: #fff; background: var(--qb-dest-deep); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.wg-continue {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 2px solid #62b8aa;
  border-radius: 17px;
  background: linear-gradient(135deg, #d9f5f0, #fffdf7 58%, #fff2c9);
  box-shadow: 0 5px 0 rgba(36, 94, 112, .1), 0 14px 28px rgba(36, 94, 112, .08);
}
.wg-continue-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 2px solid #d8b876;
  border-radius: 16px;
  background: #fffaf0;
  font-size: 2rem;
  box-shadow: 0 3px 0 rgba(126, 91, 37, .1);
}
.wg-continue > div > span {
  color: #2d8179;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wg-continue h2 { margin: 2px 0 3px; color: #40345f; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.wg-continue p { margin: 0; color: #4d656c; font-size: .88rem; line-height: 1.4; }
.wg-continue > button {
  min-width: 128px;
  min-height: 50px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #2d8179;
  box-shadow: 0 4px 0 #17484c;
  font: inherit;
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
}
.wg-section-head { margin: 1px 0 0; padding: 0 3px 10px; border-bottom: 1px solid #e0d5c0; }
.wg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}
.wg-card {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1.5px solid #d5c3a1;
  border-radius: 16px;
  color: #263b4b;
  background: linear-gradient(145deg, #fffefa, #f7f1e7);
  box-shadow: 0 5px 0 rgba(79, 60, 32, .1);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.wg-card:hover { border-color: var(--qb-dest-accent); transform: translateY(-1px); }
.wg-card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid #b9d8d1;
  border-radius: 15px;
  color: var(--qb-dest-deep);
  background: var(--qb-dest-soft);
}
.wg-card-icon .qb-ico { width: 28px; height: 28px; }
.wg-card-copy { min-width: 0; display: grid; gap: 5px; }
.wg-card-copy strong { color: #263b4b; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.wg-card-copy small { color: #65727b; font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
.wg-card-status {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: #39726f;
  background: #e3f4ef;
  font-size: 1rem;
  font-weight: 900;
}
.wg-list-card.done { border-color: #7fc591; background: linear-gradient(145deg, #fffefa, #effbf1); }
.wg-list-card.done .wg-card-status { color: #286540; background: #dcf4e2; }
.wg-list-card.current { border-color: #d6ad55; background: linear-gradient(145deg, #fffefa, #fff3cf); }
.wg-list-card.current .wg-card-status { color: #6e5528; background: #f3e4c8; }
.wg-card-arrow { color: var(--qb-dest-accent); font-size: 1.35rem; font-weight: 900; }
.wg-page-controls {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
}
.wg-page-controls button {
  min-height: 48px;
  padding: 9px 13px;
  border: 2px solid #63aaa1;
  border-radius: 11px;
  color: #17484c;
  background: #f4fbef;
  box-shadow: 0 3px 0 rgba(36, 94, 112, .1);
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  cursor: pointer;
}
.wg-page-controls button:disabled {
  border-color: #d7ceb9;
  color: #817967;
  background: #f4efe3;
  box-shadow: none;
  cursor: default;
}
.wg-page-controls > span { color: #4d656c; font-size: 1rem; font-weight: 900; text-align: center; }
.wg-hint,
.qb-tool-empty {
  margin: 0;
  padding: 24px;
  border: 1.5px dashed #c9b897;
  border-radius: 18px;
  color: #65727b;
  background: #fffdf8;
  text-align: center;
}
.qb-tool-empty .qb-ico { width: 38px; height: 38px; color: var(--qb-dest-deep); }
.qb-tool-empty h2 { margin: 8px 0 4px; color: var(--qb-dest-deep); }
.qb-tool-empty p { margin: 0; }

/* Reading Settings: illustrated, space-efficient modal. Every original option
   and persistence callback remains in game-core.js. */
.modal-card.qb-reading-settings-modal {
  width: min(940px, calc(100vw - 28px));
  max-width: 940px;
  max-height: min(92vh, 880px);
  padding: 0 0 20px;
  overflow: auto;
  border: 2px solid #b88a43;
  border-radius: 22px;
  color: #263b4b;
  background: #fffaf0;
  box-shadow: 0 14px 0 rgba(52, 36, 19, .13), 0 25px 70px rgba(12, 27, 34, .32);
  text-align: left;
}
.qb-reading-settings-modal .modal-x {
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 239, 203, .72);
  color: #fff;
  background: rgba(8, 31, 38, .45);
}
.qb-reading-settings { --qb-access: #48738c; --qb-access-deep: #173e4a; --qb-access-soft: #e8f2f6; }
/* ★ Reading Settings must survive its OWN text-size control (2026-08-17).
   UI.applyAccess() sets the ROOT font-size from 16px up to 40px, so every rem/em grows ~2.5x
   while any fixed px box stays pinned at its 16px-era dimensions. Owner-reported: at large
   sizes the title ran UNDER the hero image and the size buttons shredded their own labels.
   So every floor here is rem (it scales on the same axis as the text it has to hold), and the
   hero is flex-WRAP rather than a fixed 2-column grid: once the title genuinely needs the
   whole row, the picture steps down to the next line instead of being painted over the words.
   The rem floors are capped (min()/vw) so a growing box can never crowd the text out either —
   an uncapped floor on a WIDTH track makes this defect worse, not better.
   ⛔ rem, NOT em: `body { font-size: 19px }` (game.css) pins this whole subtree, so an `em`
   floor here is frozen at ~18px and never scales — MEASURED, the 2.45em preview glyph stays
   44.1px at all 7 sizes while the .61rem label goes 9.76px -> 24.4px. Only rem follows the
   root size that UI.applyAccess() actually changes. */
.qb-reading-settings-hero {
  min-height: 10.875rem; /* was 174px */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px clamp(20px, 4vw, 42px);
  color: #fff;
  background: radial-gradient(circle at 8% 15%, rgba(100, 167, 173, .34), transparent 23rem), linear-gradient(145deg, #174550, #102f38);
}
.qb-reading-settings-hero > div { flex: 1 1 10rem; min-width: 0; }
.qb-reading-settings-hero > div > span {
  color: #f5d492;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.qb-reading-settings-hero h2 { margin: 4px 0 7px; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; overflow-wrap: break-word; }
.qb-reading-settings-hero p { max-width: 580px; margin: 0; color: #dbe8e9; font-size: .92rem; font-weight: 700; line-height: 1.4; }
.qb-reading-settings-hero img { flex: 0 1 auto; width: 31%; min-width: min(10.625rem, 31%); max-width: 100%; height: min(8.375rem, 19vw); display: block; padding: 5px; object-fit: contain; border: 2px solid rgba(255, 239, 203, .82); border-radius: 16px; background: #fff7df; box-sizing: border-box; }
.qb-reading-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px clamp(12px, 2.5vw, 22px) 0; }
.qb-access-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 15px;
  border: 1.5px solid #d7c7aa;
  border-radius: 17px;
  background: #fffefa;
  box-shadow: 0 4px 0 rgba(79, 60, 32, .08);
}
.qb-access-card--wide,
.qb-access-card--voice { grid-column: 1 / -1; }
.qb-access-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #c6d8de; border-radius: 13px; color: var(--qb-access-deep); background: var(--qb-access-soft); }
.qb-access-icon .qb-ico { width: 24px; height: 24px; }
.qb-access-card h3 { margin: 1px 0 4px; color: var(--qb-access-deep); font-size: 1rem; }
.qb-access-card p { margin: 0 0 10px; color: #64717b; font-size: .8rem; line-height: 1.35; }
/* auto-fit, not a fixed 7: the track floor is em, so as the label text grows the tracks grow
   with it and the row count drops on its own. A fixed count with an em floor would need
   7 x 4.25rem = 29.75rem of width at every size and would overflow sideways at Jumbo. */
.qb-access-size-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); gap: 7px; }
.qb-access-size {
  min-width: 0;
  min-height: 4.25rem; /* was 68px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1.5px solid #c9c1b1;
  border-radius: 11px;
  color: #40525e;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.qb-access-size small { max-width: 100%; color: inherit; font-size: .61rem; line-height: 1.1; overflow-wrap: anywhere; }
.qb-access-size.on { border-color: var(--qb-access); color: #fff; background: var(--qb-access); box-shadow: 0 3px 0 var(--qb-access-deep); }
.qb-access-toggle {
  min-height: 40px;
  padding: 8px 13px;
  border: 1.5px solid #c8bda9;
  border-radius: 999px;
  color: #4f5e67;
  background: #fff;
  font: inherit;
  font-size: .79rem;
  font-weight: 900;
  cursor: pointer;
}
.qb-access-toggle.on { border-color: #318377; color: #fff; background: #318377; box-shadow: 0 3px 0 #205e56; }
.qb-access-card--voice .tts-speed { width: min(100%, 520px); min-height: 44px; margin: 0; border: 1.5px solid #c8bda9; border-radius: 11px; background: #fff; }
.qb-access-card--voice details { margin-top: 8px; padding: 10px 12px; border-radius: 11px; background: var(--qb-access-soft); }
.qb-access-card--voice summary { color: var(--qb-access-deep); font-size: .82rem; font-weight: 900; cursor: pointer; }
.qb-access-card--voice details small { display: block; margin-top: 6px; color: #53636c; line-height: 1.5; }

@media (max-width: 700px) {
  .qb-destination { padding: 8px 7px calc(var(--wl-tabbar-h, 112px) + 14px) !important; }
  .qb-destination-hero {
    min-height: 128px;
    grid-template-columns: minmax(0, 1fr) 118px;
    margin-bottom: 9px;
    border-radius: 17px;
  }
  .qb-destination-copy { padding: 14px 10px 14px 14px; }
  .qb-destination-copy > span { font-size: .57rem; letter-spacing: .09em; }
  .qb-destination-copy h1 { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .qb-destination-copy p { margin-top: 6px; font-size: .73rem; line-height: 1.28; }
  .qb-destination-art { margin: 8px 8px 8px 0; border-radius: 12px; }
  .qb-destination-art img { height: 108px; padding: 3px; }
  #screen-practice-tests .qb-tests-layout > div { grid-template-columns: 1fr !important; }
  #screen-practice-tests .qb-tests-layout > div > button { min-height: 104px; grid-template-columns: 76px minmax(0, 1fr); padding: 9px !important; }
  #screen-practice-tests .qb-tests-layout > div > button::before { width: 76px; height: 72px; }
  #screen-practice-tests .qb-tests-intro { padding: 11px 12px !important; }
  #screen-revision .wl-page,
  #screen-records .wl-page { padding: 9px; }
  #screen-settings .wl-card,
  #screen-admin .wl-card { padding: 12px; }
  #screen-writing .ww-genres { grid-template-columns: 1fr; }
  #screen-writing .ww-genre { min-height: 88px; }
  #screen-admin .qb-admin-preview-grid,
  .qb-role-preview-grid { grid-template-columns: 1fr; }
  .qb-preview-heading { flex-direction: column; }
  .qb-preview-metrics { grid-template-columns: 1fr; }
  .qb-preview-row { grid-template-columns: 34px minmax(0, 1fr); }
  .qb-preview-row .qb-preview-tag { grid-column: 2; justify-self: start; }
  #screen-worksheets,
  #screen-wordgym { padding: 8px 7px calc(var(--wl-tabbar-h, 112px) + 14px) !important; }
  .qb-tool-page .qb-destination-hero { grid-template-columns: minmax(0, 1fr) 118px; }
  .qb-tool-page .qb-destination-copy { padding: 13px 8px 13px 13px; }
  .qb-tool-back { margin-bottom: 8px; padding: 5px 9px; font-size: .7rem; }
  .qb-tool-stat { display: none; }
  .qb-tool-content { gap: 12px; }
  .qb-tool-notice { align-items: flex-start; flex-direction: column; gap: 3px; }
  .wksh-section { padding: 12px 10px; }
  .wksh-grid { grid-template-columns: 1fr; }
  .wksh-card { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .wksh-visual { min-height: 138px; grid-row: 1 / 3; padding: 7px; border-right: 1px solid #eadfc9; border-bottom: 0; }
  .wksh-thumb { height: 138px; }
  .wksh-thumb-pdf { width: 88px; height: 122px; }
  .wksh-copy { padding: 11px 9px 6px; }
  .wksh-title { font-size: .9rem; }
  .wksh-blurb { font-size: .7rem; }
  .wksh-actions { padding: 0 8px 10px; gap: 5px; }
  .wksh-btn { min-width: 60px; min-height: 36px; padding: 6px 7px; font-size: .72rem; }
  .wg-scope .game-scope-row { grid-template-columns: 1fr; gap: 3px; }
  .wg-scope .game-scope-lbl { padding-top: 0; }
  .wg-scope-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .wg-guide-grid { grid-template-columns: 1fr; }
  .wg-challenge-buttons { grid-template-columns: 1fr; }
  .wg-challenge { min-height: 68px; }
  .wg-continue { grid-template-columns: 52px minmax(0, 1fr); padding: 13px; }
  .wg-continue-icon { width: 50px; height: 50px; border-radius: 13px; font-size: 1.65rem; }
  .wg-continue > button { grid-column: 1 / -1; width: 100%; }
  .wg-grid { grid-template-columns: 1fr; }
  .wg-card { min-height: 82px; grid-template-columns: 50px minmax(0, 1fr) 20px; gap: 9px; padding: 10px; }
  .wg-card-icon { width: 48px; height: 48px; }
  .wg-card-copy strong { font-size: .9rem; }
  .wg-card-copy small { font-size: .7rem; }
  .wg-page-controls { grid-template-columns: 1fr 1fr; }
  .wg-page-controls > span { grid-column: 1 / -1; grid-row: 1; }
  .wg-page-controls button { grid-row: 2; }
  .modal-card.qb-reading-settings-modal { width: calc(100vw - 12px); max-height: 96vh; border-radius: 16px; }
  .qb-reading-settings-hero { min-height: 8.5rem; gap: 8px; padding: 15px 10px 15px 14px; }
  .qb-reading-settings-hero > div { flex: 1 1 9rem; }
  .qb-reading-settings-hero h2 { font-size: clamp(1.55rem, 8vw, 2.05rem); }
  .qb-reading-settings-hero p { padding-right: 3px; font-size: .7rem; }
  .qb-reading-settings-hero img { width: 31%; min-width: min(6.375rem, 31%); height: min(6.375rem, 27vw); }
  .qb-reading-settings-grid { grid-template-columns: 1fr; margin: 10px 8px 0; }
  .qb-access-card--wide,
  .qb-access-card--voice { grid-column: auto; }
  .qb-access-size-options { grid-template-columns: repeat(auto-fit, minmax(3.2rem, 1fr)); }
}

@media (min-width: 701px) and (max-width: 980px) {
  #screen-writing .ww-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-admin .qb-admin-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-role-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 521px) and (max-width: 700px) {
  .qb-role-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-role-preview-card { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 11px 9px; }
  .qb-role-preview-card > .qb-ico { width: 22px; height: 22px; padding: 7px; border-radius: 10px; }
  .qb-role-preview-card strong { font-size: .88rem; }
  .qb-role-preview-card small { font-size: .73rem; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .qb-destination button { transition: none !important; }
}

/* Readable type is a shared destination-page contract. Many older modules
   supplied 11–14px helper copy; these floors keep all real text and controls
   legible without changing headings, icons, data, permissions or actions. */
.qb-destination { font-size: 18px; }
.qb-destination :is(p, li, td, th, label, summary) {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.qb-destination small {
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.qb-destination strong { font-size: 17px !important; line-height: 1.35; }
.qb-destination button { font-size: 17px !important; line-height: 1.35; }
.qb-destination :is(input, select, textarea) { font-size: 18px !important; }
.qb-destination-copy > span { font-size: 16px !important; }
.qb-destination-copy p { font-size: 18px !important; }
.qb-tool-page :is(p, li, td, th, label, summary) { font-size: 18px !important; line-height: 1.5 !important; }
.qb-tool-page small { font-size: 16px !important; line-height: 1.4 !important; }
.qb-tool-page button,
.qb-tool-page :is(input, select, textarea) { font-size: 17px !important; }

/* Student work areas use the available window instead of the old 760px
   reading-column width. The slide lesson editor keeps three useful lanes on
   desktop, then returns to its existing single-column mobile layout. */
#screen-custom #student-lessons-root,
#screen-custom #sp-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

#wlsl-overlay .wlsl-body {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: clamp(120px, 11vw, 176px) minmax(0, 1fr) clamp(250px, 24vw, 360px) !important;
  gap: clamp(10px, 1.25vw, 18px) !important;
  padding: clamp(10px, 1.5vw, 22px) !important;
}

@media (max-width: 720px) {
  #wlsl-overlay .wlsl-body { grid-template-columns: minmax(0, 1fr) !important; }
}