/* 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; }
#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);
}

.qb-role-preview {
  width: 100%;
  display: grid;
  gap: 14px;
  padding-bottom: 26px;
  box-sizing: border-box;
  container-type: inline-size;
}
.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;
}

#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; }
#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; }
.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; }
.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; }
}

@container (max-width: 620px) {
  .qb-role-preview-grid { grid-template-columns: 1fr; }
}

@container (min-width: 621px) and (max-width: 980px) {
  .qb-role-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.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; }

#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; }
}

/* Report family — 2026-09-09. Presentation only, scoped to these destinations.
   Uses Teacher Reports' native type and quiet surfaces; no font download. */
:is(#screen-records, #screen-todo, #screen-khan) {
  --qb-report-ink: #1d1d1f;
  --qb-report-muted: #6e6e73;
  --qb-report-line: #dedee3;
  --qb-report-accent: #247550;
  --qb-report-soft: #eaf2ec;
  color: var(--qb-report-ink);
  background: #f5f5f7 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 16px !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 16px clamp(12px, 2vw, 28px) calc(var(--wl-tabbar-h, 78px) + 28px) !important;
}
:is(#screen-records, #screen-todo, #screen-khan) :is(button, input, select, textarea) { font-family: inherit; }
:is(#screen-records, #screen-todo, #screen-khan) :is(h1, h2, h3, h4) { font-family: inherit; color: var(--qb-report-ink); font-weight: 600 !important; line-height: 1.3; }
:is(#screen-records, #screen-todo, #screen-khan) :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 3px solid #247550; outline-offset: 3px;
}
:is(#screen-records, #screen-todo, #screen-khan) .qb-destination-hero {
  display: block; min-height: 0; margin: 0 auto 16px; border: 0;
  border-radius: 0; background: none; box-shadow: none; color: var(--qb-report-ink);
}
:is(#screen-records, #screen-todo, #screen-khan) .qb-destination-art { display: none; }
:is(#screen-records, #screen-todo, #screen-khan) .qb-destination-copy { padding: 0; }
:is(#screen-records, #screen-todo, #screen-khan) .qb-destination-copy > span { color: var(--qb-report-muted); font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em; }
:is(#screen-records, #screen-todo, #screen-khan) .qb-destination-copy h1 { font-size: clamp(24px, 2.2vw, 30px) !important; letter-spacing: -.025em; }
:is(#screen-records, #screen-todo, #screen-khan) .qb-destination-copy p { color: var(--qb-report-muted); font-size: 14px !important; font-weight: 400 !important; margin-top: 4px; max-width: 75ch; }
:is(#screen-records, #screen-todo, #screen-khan) :is(#records-root, #todo-root, #khan-root) { font: inherit; min-width: 0; }

/* Subjects and report views form a narrow rail; evidence gets the remaining width. */
#screen-records #records-root > .wl-page {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px;
  align-items: start; padding: 0; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
#screen-records [data-wl-records-chrome] { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#screen-records [data-wl-records-body] {
  grid-column: 2; grid-row: 1 / span 2; min-width: 0; padding: 18px;
  border: 1px solid var(--qb-report-line); border-radius: 12px; background: #fff;
}
#screen-records :is(.wl-areabar, .wl-subpanel, .wl-levels) { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0; padding: 0; }
#screen-records .wl-areabar { display: grid; grid-template-columns: 1fr; gap: 2px; order: 0; }
#screen-records .wl-subpanel { order: 1; border-top: 1px solid var(--qb-report-line); padding-top: 12px; }
#screen-records :is(.wl-subjects, .wl-views) { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
#screen-records .wl-subpanel-label { color: var(--qb-report-muted); font-size: 12px !important; font-weight: 500 !important; padding: 0 10px; }
#screen-records :is(.wl-subj-tab, .wl-level-tab, .wl-mode-tab, .wl-sortbtn, .subject-btn) {
  min-height: 40px; max-width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid var(--qb-report-line); border-radius: 8px;
  background: #fff; color: var(--qb-report-ink); box-shadow: none;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.35; white-space: normal;
}
#screen-records :is(.wl-areabar, .wl-subpanel) .wl-subj-tab { text-align: left; border-color: transparent; background: transparent; }
#screen-records :is(.wl-subj-tab, .wl-level-tab, .wl-mode-tab, .wl-sortbtn).on {
  color: #185c3d; background: #d8e9df; border-color: transparent; box-shadow: none;
}
#screen-records :is(.wl-subj-tab, .wl-level-tab, .wl-mode-tab, .wl-sortbtn, .subject-btn):hover { background: #eaf2ec; transform: none; }
#screen-records .wl-levels { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
#screen-records .wl-level-tab { font-size: 12px !important; padding: 6px 9px; }
#screen-records [data-wl-records-chrome] > div:has(button[onclick*="downloadEverything"]),
#screen-records [data-wl-records-chrome] > div:has(button[onclick*="WordLabSyncCheck"]) {
  order: 4; max-width: none !important; margin: 0 !important; padding: 12px !important;
  border: 1px solid var(--qb-report-line) !important; background: #fff !important;
  border-radius: 10px !important; box-shadow: none !important; font-size: 13px !important;
}
#screen-records [data-wl-records-chrome] > div:has(button[onclick*="downloadEverything"]) p { background: #f5f5f7 !important; border: 0 !important; color: #515157 !important; font-size: 12px !important; line-height: 1.5; }
#screen-records .wl-fbbanner { order: 3; max-width: none !important; margin: 0 !important; padding: 10px !important; background: #eaf2ec !important; border: 1px solid #d8e9df !important; border-radius: 10px !important; font-size: 13px !important; }
#screen-records .wl-fbbanner :is(strong, small) { color: #247550 !important; }
#screen-records .wsw-card-inline {
  grid-column: 1; grid-row: 2; width: 100%; max-width: none; max-height: none; box-sizing: border-box;
  margin: 0; padding: 12px; text-align: left; border: 1px solid var(--qb-report-line);
  border-radius: 10px; background: #fff; box-shadow: none; font-size: 13px !important;
}
#screen-records .wsw-card-h { color: var(--qb-report-ink); font-weight: 600 !important; }
#screen-records .wsw-card-p { color: var(--qb-report-muted); font-size: 13px !important; }
#screen-records :is(.xp-label, .wl-rep-desc) { color: var(--qb-report-muted); font-size: 14px !important; line-height: 1.5; font-weight: 400 !important; text-align: left !important; }
#screen-records :is(.wl-recstats, .wl-recsort, .wl-report-actions) { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 12px 0; }
#screen-records .wl-pill { border: 0; border-radius: 6px; background: #f5f5f7; padding: 5px 8px; font-size: 13px !important; font-weight: 500 !important; }
#screen-records .wl-pill.good { color: #166534; background: #eaf2ec; }
#screen-records .wl-pill.bad { color: #a32b58; background: #f9e6ed; }
#screen-records .wl-rectable-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--qb-report-line); border-radius: 8px; }
#screen-records .wl-rectable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px !important; line-height: 1.5; }
#screen-records .wl-rectable :is(th, td) { padding: 10px 12px; vertical-align: top; border: 0; border-bottom: 1px solid var(--qb-report-line); overflow-wrap: anywhere; white-space: normal; }
#screen-records .wl-rectable th { background: #f5f5f7; color: #515157; font-size: 12px !important; font-weight: 600 !important; text-align: left; }
#screen-records .wl-rectable th:nth-child(1) { width: 30%; }
#screen-records .wl-rectable th:nth-child(2) { width: 26%; }
#screen-records .wl-rectable th:nth-child(3) { width: 20%; }
#screen-records .wl-rectable th:nth-child(4) { width: 10%; }
#screen-records .wl-rectable th:nth-child(5) { width: 14%; }
#screen-records .wl-rectable .wl-c-incorrect { color: #a32b58; background: #fff9fb; }
#screen-records .wl-rectable .wl-c-correct { color: #166534; background: #f6faf7; }
#screen-records .wl-rectable :is(.wl-c-strand, .wl-c-date) { color: var(--qb-report-muted); font-size: 12px !important; }
#screen-records :is(.wl-report-doc, .wl-reclist, .wl-rec, .wl-rep-fold, .wl-rep-lesson) { max-width: 100%; box-sizing: border-box; box-shadow: none; overflow-wrap: anywhere; }
#screen-records .wl-report-doc { padding: 0; border: 0; background: #fff; font: inherit; }
#screen-records .wl-rep-title { font-size: 24px !important; letter-spacing: -.02em; }
#screen-records .wl-rep-meta { padding: 12px; border-radius: 8px; background: #f5f5f7; color: #515157; font-size: 14px !important; line-height: 1.7; }
#screen-records .wl-rep-input { min-height: 36px; max-width: 100%; box-sizing: border-box; border: 1px solid var(--qb-report-line); background: #fff; border-radius: 6px; font: inherit; }
#screen-records :is(.wl-rep-fold, .wl-rep-lesson) { border: 1px solid var(--qb-report-line); border-radius: 8px; margin: 10px 0; background: #fff; }
#screen-records :is(.wl-rep-fold, .wl-rep-lesson) > summary { min-height: 44px; box-sizing: border-box; padding: 10px 12px; color: #247550; background: #f5f5f7; font-size: 15px !important; font-weight: 500 !important; cursor: pointer; }
#screen-records :is(.wl-rep-body, .wl-rep-li) { font: inherit; font-size: 16px !important; line-height: 1.6; color: var(--qb-report-ink); }
#screen-records .wl-rep-fold-body { padding: 12px; }
#screen-records .wl-rep-h { font-size: 19px !important; }
#screen-records .wl-empty { padding: 24px 16px; border: 1px dashed var(--qb-report-line); background: #f5f5f7; color: var(--qb-report-muted); font-size: 15px !important; }

/* Diary: date-led task list with feedback alongside it on larger screens. */
#screen-todo #todo-root .td-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; max-width: none; margin: 0; padding: 0; }
#screen-todo .td-head { grid-column: 1 / -1; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; text-align: left; }
#screen-todo .td-head p { font-size: 14px !important; color: var(--qb-report-muted); }
#screen-todo #todo-root .td-book { grid-column: 1; padding: 16px; border: 1px solid var(--qb-report-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; min-width: 0; }
#screen-todo .td-wrap:not(:has(> .td-notes)) .td-book { grid-column: 1 / -1; }
#screen-todo .td-pagehead { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--qb-report-line); background: none; }
#screen-todo .td-date { font-size: 16px !important; font-weight: 600 !important; color: var(--qb-report-ink); }
#screen-todo .td-today-pill { background: #eaf2ec; color: #247550; font-size: 12px !important; font-weight: 500 !important; }
#screen-todo :is(.td-nav button, .td-btn) { min-width: 44px; min-height: 44px; box-sizing: border-box; border: 1px solid var(--qb-report-line); background: #fff; color: #247550; font-weight: 500 !important; border-radius: 8px; box-shadow: none; }
#screen-todo .td-list { gap: 8px; }
#screen-todo .td-row { padding: 12px; gap: 12px; border: 1px solid var(--qb-report-line); border-radius: 8px; box-shadow: none; }
#screen-todo .td-row.done { background: #f0f5ff; border-color: #b6caf6; box-shadow: 0 0 8px #326ccc1a; }
#screen-todo .td-row.confirmed { background: #eaf2ec; border-color: #bdd8c7; box-shadow: none; }
#screen-todo .td-box { width: 44px; height: 44px; box-sizing: border-box; border-width: 1px; border-radius: 8px; }
#screen-todo .td-boxwrap span { font-size: 11px !important; color: #6e6e73; font-weight: 500 !important; }
#screen-todo .td-task { min-width: 0; overflow-wrap: anywhere; color: var(--qb-report-ink); font-size: 16px !important; font-weight: 400 !important; line-height: 1.5; }
#screen-todo .td-task-status { font-size: 12px !important; font-weight: 500 !important; }
#screen-todo .td-done-fold { border-color: var(--qb-report-line); background: #f5f5f7; border-radius: 8px; }
#screen-todo .td-done-fold > summary { min-height: 44px; box-sizing: border-box; padding: 10px 12px; color: #515157; font-weight: 500 !important; }
#screen-todo #todo-root .td-notes { grid-column: 2; min-width: 0; max-width: none; margin: 0; padding: 16px; border: 1px solid var(--qb-report-line); border-radius: 12px; box-shadow: none; background: #fff; }
#screen-todo :is(.td-note, .td-note.sent) { border: 1px solid var(--qb-report-line); background: #f5f5f7; box-shadow: none; border-radius: 8px; padding: 12px; }
#screen-todo .td-note-text { font-size: 15px !important; font-weight: 400 !important; line-height: 1.6; color: var(--qb-report-ink); overflow-wrap: anywhere; }
#screen-todo :is(.td-note-date, .td-hint, .td-empty) { color: var(--qb-report-muted); font-size: 13px !important; }
#screen-todo :is(input, textarea, select) { max-width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid var(--qb-report-line); border-radius: 8px; font-size: 15px !important; }

/* Khan: common actions first, optional forms disclosed, compact evidence list. */
#screen-khan .qb-khan-page { max-width: none; padding: 0; }
#screen-khan .qb-khan { margin: 0; border: 1px solid var(--qb-report-line); border-radius: 12px; background: #fff; }
#screen-khan .qb-khan > summary { padding: 16px 18px 4px; min-height: 44px; box-sizing: border-box; font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.025em; color: var(--qb-report-ink); }
#screen-khan .qb-khan-body { padding: 0 18px 18px; }
#screen-khan .qb-khan-help { color: var(--qb-report-muted); font-size: 14px !important; line-height: 1.5; }
#screen-khan .qb-khan-child { display: flex; align-items: center; gap: 16px; padding: 12px; margin: 14px 0; border: 1px solid var(--qb-report-line); border-radius: 8px; background: #f5f5f7; }
#screen-khan .qb-khan-child label { flex: 0 1 300px; font-size: 13px !important; }
#screen-khan .qb-khan-child small { flex: 1; font-size: 13px !important; }
#screen-khan .qb-khan-flow { gap: 12px; margin: 12px 0 16px; }
#screen-khan .qb-khan-step { border: 1px solid var(--qb-report-line); border-radius: 8px; padding: 14px; }
#screen-khan .qb-khan-step b { color: var(--qb-report-ink); font-size: 16px !important; font-weight: 600 !important; }
#screen-khan .qb-khan-step p { color: var(--qb-report-muted); font-size: 14px !important; line-height: 1.5; }
#screen-khan :is(.qb-khan-btn, .qb-khan-link, .qb-khan-filter) { min-height: 44px; font-size: 14px !important; font-weight: 500 !important; border-radius: 8px; box-shadow: none; line-height: 1.4; }
#screen-khan .qb-khan-btn { background: #247550; border-color: #247550; }
#screen-khan :is(.qb-khan-btn.secondary, .qb-khan-link, .qb-khan-filter) { background: #fff; color: #247550; border-color: #bdd0c5; }
#screen-khan .qb-khan-filter.on { color: #185c3d; background: #d8e9df; border-color: #d8e9df; }
#screen-khan :is(.qb-khan-disclosure, .qb-khan-mastery details) { border: 1px solid var(--qb-report-line); border-radius: 8px; margin: 8px 0; padding: 0 12px; background: #fafafa; }
#screen-khan .qb-khan-disclosure > summary { min-height: 44px; box-sizing: border-box; padding: 10px 0; cursor: pointer; font-size: 14px !important; font-weight: 500 !important; color: #247550; }
#screen-khan :is(.qb-khan-class, .qb-khan-shortcuts, .qb-khan-record, .qb-khan-send) { border: 0; background: transparent; padding: 0; margin: 10px 0 14px; }
#screen-khan :is(.qb-khan-class, .qb-khan-shortcuts, .qb-khan-record, .qb-khan-send, .qb-khan-mastery) label { font-size: 13px !important; font-weight: 500 !important; color: var(--qb-report-ink); }
#screen-khan :is(input, select, textarea) { min-width: 0; border-color: #c9c9cf; font-size: 15px !important; border-radius: 6px; }
#screen-khan .qb-khan-shortcut-row { border-color: var(--qb-report-line); }
#screen-khan .qb-khan-local { color: var(--qb-report-muted); font-size: 12px !important; line-height: 1.5; }
#screen-khan .qb-khan-review-head { padding-top: 16px; margin-top: 16px; border-color: var(--qb-report-line); }
#screen-khan .qb-khan-review-head > b { font-size: 18px !important; font-weight: 600 !important; }
#screen-khan .qb-khan-summary { font-size: 13px !important; font-weight: 400 !important; color: var(--qb-report-muted); }
#screen-khan .qb-khan-row { padding: 14px 0; border-color: var(--qb-report-line); }
#screen-khan .qb-khan-rowtop b { font-weight: 600 !important; }
#screen-khan .qb-khan-row p { font-size: 15px !important; line-height: 1.5; }
#screen-khan :is(.qb-khan-synced, .qb-khan-pending) { font-weight: 500 !important; }
#screen-khan .qb-khan-wrong summary { min-height: 44px; font-weight: 500 !important; }
#screen-khan .qb-khan-q { background: #fff9fb; border-color: #b03060; font-size: 16px !important; line-height: 1.5; }

@media (max-width: 1000px) {
  #screen-records #records-root > .wl-page { grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
  #screen-todo #todo-root .td-wrap { grid-template-columns: minmax(0, 1fr); }
  #screen-todo #todo-root .td-notes { grid-column: 1; }
}
@media (max-width: 900px) {
  #screen-records #records-root > .wl-page { display: flex; flex-direction: column; gap: 12px; }
  #screen-records [data-wl-records-chrome] { display: contents; }
  #screen-records :is(.wl-areabar, .wl-subpanel) { width: 100%; min-width: 0; box-sizing: border-box; }
  #screen-records .wl-areabar { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  #screen-records .wl-areabar button { flex: 0 0 auto; }
  #screen-records :is(.wl-subjects, .wl-views) { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  #screen-records .wl-subpanel { padding-top: 8px; }
  #screen-records .wl-subpanel-label { padding: 0; }
  #screen-records [data-wl-records-body] { order: 2; width: 100%; box-sizing: border-box; padding: 12px; }
  #screen-records .wsw-card-inline { order: 5; }
  #screen-records [data-wl-records-chrome] > div:has(button[onclick*="downloadEverything"]) { width: 100%; box-sizing: border-box; }
  #screen-records :is(.wl-subj-tab, .wl-level-tab, .wl-mode-tab, .wl-sortbtn, .subject-btn) { min-height: 44px; }
  /* Preserve the semantic table and complete answers inside its own scroll area. */
  #screen-records .wl-rectable { min-width: 700px; }
  #screen-khan .qb-khan-body { padding: 0 12px 12px; }
  #screen-khan .qb-khan-child { display: block; }
  #screen-khan .qb-khan-flow { grid-template-columns: minmax(0, 1fr); }
  #screen-khan .qb-khan-step { padding: 12px; }
  #screen-khan .qb-khan-record-grid label[style] { grid-column: auto !important; }
  #screen-todo #todo-root :is(.td-book, .td-notes) { padding: 12px; }
  #screen-todo .td-row { padding: 10px; gap: 8px; }
  #screen-todo .td-date { font-size: 14px !important; }
  #screen-todo .td-task { font-size: 15px !important; }
}

/* Override the older destination-wide raised-button treatment in this family. */
#screen-records :is(.wl-subj-tab, .wl-level-tab, .wl-mode-tab, .wl-sortbtn, .subject-btn),
#screen-todo :is(.subject-btn, .td-nav button) {
  min-height: 44px; padding: 7px 10px; border: 1px solid #dedee3 !important;
  border-radius: 8px !important; background: #fff !important; color: #1d1d1f !important;
  box-shadow: none !important; font-size: 14px !important; font-weight: 500 !important;
  line-height: 1.4; transform: none;
}
#screen-todo .subject-btn { min-width: 0; width: auto; }
#screen-todo .td-note :is(button, .td-del) { min-width: 44px; min-height: 44px; }
#screen-records :is(.wl-areabar, .wl-subpanel) .wl-subj-tab { border-color: transparent !important; background: transparent !important; }
#screen-records :is(.wl-subj-tab, .wl-level-tab, .wl-mode-tab, .wl-sortbtn).on { background: #d8e9df !important; color: #185c3d !important; border-color: transparent !important; }
#screen-records .wl-pill { box-shadow: none; }
#screen-records .wl-c-q { font-weight: 500; color: #1d1d1f; }
#screen-khan .qb-khan-mastery summary { display: list-item; font-size: 14px !important; font-weight: 500 !important; padding: 10px 0; min-height: 44px; box-sizing: border-box; color: #247550; }
@media (min-width: 901px) {
  #screen-records [data-wl-records-chrome] { display: contents; }
  #screen-records .wl-areabar { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px; }
  #screen-records .wl-subpanel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; border: 0; padding: 0; }
  #screen-records .wl-views { order: 0; margin: 0 0 14px; }
  #screen-records .wl-subpanel-label { order: 1; }
  #screen-records .wl-subjects { order: 2; }
  #screen-records [data-wl-records-body] { grid-row: 2 / span 5; }
  #screen-records .wl-fbbanner { grid-column: 1; grid-row: 3; }
  #screen-records [data-wl-records-chrome] > div:has(button[onclick*="downloadEverything"]) { grid-column: 1; grid-row: 4; }
  #screen-records .wsw-card-inline { grid-column: 1; grid-row: 5; }
  #screen-records [data-wl-records-chrome] > div:has(button[onclick*="WordLabSyncCheck"]) { grid-column: 1; grid-row: 6; }
}
@media (max-width: 900px) {
  #screen-records .wl-subjects { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  #screen-records .wl-subjects .wl-subj-tab { flex: 0 0 auto; white-space: nowrap; }
}
#screen-records .wl-rectable td { font-size: 15px !important; }
#screen-records .wl-rectable :is(.wl-c-date, .wl-c-strand) { font-size: 12px !important; }
#screen-khan .qb-khan > summary { font-size: 18px !important; letter-spacing: 0; }
#screen-khan .qb-khan-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#screen-khan .qb-khan-tools > details { margin: 0; min-width: 0; }
#screen-khan .qb-khan-tools > details[open] { grid-column: 1 / -1; }
@media (max-width: 900px) { #screen-khan .qb-khan-tools { grid-template-columns: minmax(0, 1fr); } }
/* The all-subject curriculum overview is part of Student Records too. */
#screen-records .wl-nsw { margin: 0 0 16px; padding: 14px; border: 1px solid #dedee3; border-radius: 10px; background: #fafafa; }
#screen-records .wl-nsw h3 { color: #1d1d1f; font-size: 18px !important; }
#screen-records .wl-nsw-sub { color: #6e6e73; font-size: 14px !important; }
#screen-records :is(.wl-nsw-lev, .wl-nsw-btn) { min-height: 44px; border: 1px solid #dedee3; border-radius: 8px; background: #fff; color: #247550; font: inherit; font-size: 14px !important; font-weight: 500; }
#screen-records .wl-nsw-lev.on { background: #d8e9df; color: #185c3d; border-color: #d8e9df; }
#screen-records .wl-nsw-grid :is(th, td) { font-size: 13px !important; border-color: #dedee3; }
#screen-records .wl-nsw-grid th { color: #515157; background: #f5f5f7; }
#screen-records .wl-nsw-klagrp { border-color: #dedee3; border-radius: 8px; }
#screen-records .wl-nsw-klah { min-height: 44px; box-sizing: border-box; color: #247550; font-size: 15px !important; }
#screen-records .wl-nsw-row { flex-wrap: wrap; font-size: 15px; }
#screen-records .wl-nsw-disch { background: #f5f5f7; }
/* Start scrolling strips at their first item; centred overflow can hide it. */
#screen-records :is(.wl-areabar, .wl-subjects, .wl-views, .wl-levels) { justify-content: flex-start; }

/* Shared Diary: content first, personal colour without decorative panels. */
#screen-todo .qb-destination-hero { display: none; }
#screen-todo #todo-root .td-wrap { --td-accent: #315f46; --td-soft: #e5efdf; --td-paper: #fffefb; gap: 12px; }
#screen-todo #todo-root .td-wrap[data-theme="sky"] { --td-accent: #245976; --td-soft: #e2f0f8; }
#screen-todo #todo-root .td-wrap[data-theme="lavender"] { --td-accent: #63467d; --td-soft: #eee7f6; }
#screen-todo #todo-root .td-wrap[data-theme="paper"] { --td-accent: #4e514b; --td-soft: #ecece6; }
#screen-todo .td-head { display: none; }
#screen-todo .td-shared-heading { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
#screen-todo .td-shared-heading h2 { margin: 0; font: 24px/1.25 Georgia, serif !important; color: var(--td-accent); }
#screen-todo .td-appearance { font-size: 13px !important; margin: 0; }
#screen-todo .td-appearance summary { cursor: pointer; padding: 8px; min-height: 36px; box-sizing: border-box; }
#screen-todo .td-appearance > div { display: flex; flex-wrap: wrap; gap: 8px; }
#screen-todo .td-appearance label { display: flex; align-items: center; gap: 6px; }
#screen-todo #todo-root :is(.td-book, .td-notes) { border-radius: 6px; padding: 12px; background: var(--td-paper); }
#screen-todo .td-pagehead { background: var(--td-soft); padding: 8px; margin-bottom: 12px; border-radius: 6px; }
#screen-todo .td-student-add { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 12px; }
#screen-todo .td-student-add label { display: flex; flex-direction: column; gap: 4px; font-size: 13px !important; min-width: 0; }
#screen-todo .td-compose-text { flex: 1 1 260px; }
#screen-todo .td-student-add textarea { width: 100%; resize: vertical; }
#screen-todo .td-student-add button { background: var(--td-accent); color: white; border: 0; border-radius: 6px; padding: 10px 12px; min-height: 44px; font: 500 14px/1.4 system-ui; }
#screen-todo .td-student-add button:disabled { opacity: .65; }
#screen-todo .td-compose-help { flex-basis: 100%; color: #617065; font-size: 12px !important; }
#screen-todo .td-task { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; font-size: 17px !important; line-height: 1.6; }
#screen-todo .td-task-author { display: block; color: #617065; font: 12px/1.5 system-ui !important; margin-top: 3px; }
#screen-todo .td-box { display: flex; align-items: center; justify-content: center; padding: 0; min-width: 44px; min-height: 44px; font: 20px/1 system-ui; }
#screen-todo .td-box.parent.on { background: var(--td-accent); border-color: var(--td-accent); color: white; }
#screen-todo .td-wrap[data-text-size="large"] :is(.td-task, .td-note-text) { font-size: 20px !important; line-height: 1.65; }
#screen-todo :is(button, summary, select, textarea, input):focus-visible { outline: 3px solid var(--td-accent, #315f46); outline-offset: 3px; }
@media (max-width: 600px) {
  #screen-todo .td-shared-heading h2 { font-size: 21px !important; }
  #screen-todo .td-compose-text { flex-basis: 100%; }
  #screen-todo .td-row { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr); align-items: start; }
  #screen-todo .td-row .td-task { grid-column: 1 / -1; grid-row: 2; }
  #screen-todo .td-row .td-task-status { grid-column: 3; grid-row: 1; align-self: center; }
  #screen-todo .td-row .td-x { justify-self: end; }
  #screen-todo .td-boxwrap { min-width: 0; }
}
#screen-todo #todo-root .td-wrap:not(:has(> .td-notes)) > .td-book { grid-column: 1 / -1; }
#screen-todo .td-row { align-items: flex-start; }
#screen-todo .td-student-compose { margin: 0 0 10px; }
#screen-todo .td-student-compose > summary { cursor: pointer; padding: 8px 0; color: var(--td-accent); min-height: 44px; box-sizing: border-box; font: 500 14px/1.6 system-ui; }
/* Completion is conveyed by ticks and status, keeping the written work legible. */
#screen-todo .td-row.done .td-task { text-decoration: none; opacity: 1; }

/* Parent appearance: opt-in, screen-only. Existing print/export styles remain authoritative. */
@media screen {
  :is(#screen-teacher,#screen-recordkeeping).qb-parent-appearance {
    background:var(--qba-ground)!important;color:var(--qba-ink);
  }
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app,
  #screen-recordkeeping.qb-parent-appearance .wrk-wrap {
    --tr-paper:var(--qba-paper);--tr-surface:var(--qba-paper);--tr-ink:var(--qba-ink);--tr-muted:var(--qba-muted);
    --tr-ok:var(--qba-ok);--tr-need:var(--qba-need);--tr-grow-ink:var(--qba-grow);
    --tr-ok-soft:var(--qba-paper);--tr-need-soft:var(--qba-paper);--tr-grow-soft:var(--qba-paper);
    --tr-ok-line:var(--qba-line);--tr-need-line:var(--qba-line);--tr-grow-line:var(--qba-line);
    --tr-line:var(--qba-line);--tr-accent:var(--qba-accent);--tr-accent-soft:var(--qba-soft);--tr-fh:var(--qba-font);
    --wrk-paper:var(--qba-paper);--wrk-panel:var(--qba-ground);--wrk-ink:var(--qba-ink);--wrk-muted:var(--qba-muted);
    --wrk-line:var(--qba-line);--wrk-green:var(--qba-accent);--wrk-green-soft:var(--qba-soft);--wrk-serif:var(--qba-font);
    font-family:var(--qba-font)!important;color:var(--qba-ink);background:var(--qba-paper);
  }
  /* All reading surfaces share the selected paper; status marks keep their meanings. */
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.tr-main,.tr-index,.tr-rail,.wt-wrap,.wt-card,.wt-qrow,.wt-sub,.wt-workfold,.wt-qd,.wt-report-ed,.wt-journey,.wt-guide,.wt-learning,.wt-learning-attempt,.wt-learning-evidence,.qb-role-preview-panel,.qb-preview-answer-doc,.qb-preview-answer-pages),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-card,.wrk-plan-shell,.wrk-plan-mid,.wrk-plan-side,.wrk-journal-header,.wrk-row-more>div,.wrk-pane-more,.wrk-read-sample,.wrk-photocard,.wrk-capture-panel,.wrk-about,.wrk-periodbar,.wrk-periodfold>summary,.wrk-periodblock,.wrk-history-find,.wrk-summary>div) {
    background:var(--qba-paper)!important;color:var(--qba-ink)!important;border-color:var(--qba-line);box-shadow:none;
  }
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.tr-rail,.tr-index),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root .wrk-rail-nav {background:var(--qba-ground)!important;color:var(--qba-ground-ink)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.tr-rail,.tr-index) :is(.tr-lbl,.wt-kid-copy,.tr-index-t,.tr-index-meta,.tr-ix-group){color:inherit!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.tr-index-row,.wt-viewtab,.wt-kid),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root .wrk-rail-nav>button {color:var(--qba-ground-ink);}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.tr-index-row.on,.wt-viewtab.on,.wt-kid.on),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-chip.on,.wrk-pane.on,.wrk-kids button.on,.wrk-rail-nav>button.on){background:var(--qba-soft)!important;color:var(--qba-ink)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(button,input,select),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(button,input,select) {background:var(--qba-paper)!important;color:var(--qba-ink)!important;border-color:var(--qba-line)!important;}
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(h1,h2,h3,h4,p,label,summary,time,.wrk-month) {color:var(--qba-ink)!important;}
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-muted,.wrk-empty,.wrk-kicker,.wrk-card-head span,.wrk-rail-lab) {color:var(--qba-muted)!important;}
  /* Font family follows reading preferences without stripping bold, italic, lists or maths. */
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(p,li,td,th,label,summary,h1,h2,h3,h4,button,input,select,textarea,.wt-q-h,.wt-q-ans,.wt-q-corr,.wt-q-model,.wt-sub,.wt-prompt,.wt-learning-answer),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(p,li,td,th,label,summary,h1,h2,h3,h4,button,input,select,textarea,.wrk-row-main,.wrk-row-mainplain,.wrk-read-body){font-family:var(--qba-font)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .wt-wrap {font-size:var(--qba-size)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .wt-wrap :is(p,li,td,th) {font-size:var(--qba-size)!important;line-height:1.6!important;overflow-wrap:anywhere;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-h,.wt-rep-body,.wt-port-body,.wt-port-q,.wt-port-a,.wt-learning-answer,.wt-jline) :is(span,strong,b,em,i) {font-size:inherit!important;line-height:inherit!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .wt-q-h :is(.wt-q-n,.wt-q-i,.wt-q-rev) {font-size:var(--qba-label-size)!important;}
  /* Match the full range on every report path, including late-loaded attempts and prose. */
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-h,.wt-q-ans,.wt-q-corr,.wt-q-model,.wt-sub,.wt-prompt,.wt-hq-q,.wt-hq-a,.wt-learning-answer,.wt-rep-body,.wt-port-body,.wt-port-q,.wt-port-a,.wt-jline,.wt-jpaste,.wt-task,.wt-obs-text),
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-rep-body,.wt-port-body,.wt-port-q,.wt-port-a,.wt-journey,.wt-learning,.qb-preview-answer-doc) :is(p,li,td,th) {
    font-size:var(--qba-size)!important;line-height:1.6!important;color:var(--qba-ink)!important;
    min-width:0;max-width:100%;height:auto;max-height:none;overflow-wrap:anywhere;word-break:normal;
  }
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-ans,.wt-q-corr,.wt-q-model,.wt-sub,.wt-hq-a,.wt-learning-answer) {
    display:block!important;white-space:pre-wrap!important;overflow:visible;-webkit-line-clamp:unset;
    background:var(--qba-soft)!important;padding:8px 12px!important;
  }
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .wt-q-h {flex-wrap:wrap!important;align-items:baseline!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-ans,.wt-q-corr,.wt-q-model,.wt-sub,.wt-learning-answer) :is(p,li,span,strong,b,em,i){font-size:inherit!important;line-height:inherit!important;color:inherit;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-ans,.wt-q-corr,.wt-q-model)>b,
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-ans,.wt-q-corr,.wt-q-model)>small {font-size:var(--qba-label-size)!important;}
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-row-main,.wrk-row-mainplain,.wrk-row-txt,.wrk-read-body,.wrk-journal-entry,.wrk-day-item-body,.wrk-photocard-excerpt),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-row-main,.wrk-row-mainplain,.wrk-row-txt,.wrk-read-body,.wrk-journal-entry,.wrk-day-item-body) :is(p,small,li,span) {
    font-size:var(--qba-record-size)!important;line-height:1.6!important;color:var(--qba-ink)!important;
    white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;max-height:none;-webkit-line-clamp:unset;
  }
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root .wrk-row small {display:block!important;overflow:visible!important;}
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-row-main,.wrk-row-mainplain,.wrk-row-txt) strong {font-size:var(--qba-size)!important;line-height:1.35!important;color:var(--qba-ink)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(textarea,.wt-fb,.wt-dm-note),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root textarea {
    font-size:max(16px,var(--qba-size))!important;line-height:1.6!important;resize:vertical;min-height:90px;max-height:none;
    background:var(--qba-paper)!important;color:var(--qba-ink)!important;border:1px solid var(--qba-line)!important;
  }
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-card,.wt-qrow,.wt-workfold,.wt-learning-attempt),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root :is(.wrk-row,.wrk-card) {margin-top:var(--qba-gap)!important;margin-bottom:var(--qba-gap)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-qrow,.wt-task),
  #screen-recordkeeping.qb-parent-appearance #recordkeeping-root .wrk-row {padding-top:var(--qba-gap)!important;padding-bottom:var(--qba-gap)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.tr-item-hd,.tr-markbar,.wt-marks,.wt-tools,.wt-actions) {height:auto;min-width:0;flex-wrap:wrap;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-qrow,.wt-task,.wt-qd,.wt-workfold,.tr-item-one,.wt-learning-attempt) {min-width:0;max-width:100%;height:auto;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-ans,.wt-sub,.wt-learning-answer) img {max-width:100%;height:auto;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-q-ans,.wt-sub,.wt-learning-answer) pre {white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .wt-obs-text {white-space:pre-wrap;flex-basis:240px;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.wt-rep-in,.wt-rep-sel) {box-sizing:border-box;min-width:0;max-width:100%;font-size:16px!important;background:var(--qba-paper)!important;color:var(--qba-ink)!important;}
  @media(max-width:600px) {#screen-teacher.qb-parent-appearance #teacher-root #tr-app .wt-obs-text {flex:1 1 100%;}}
  /* Reading size never expands the report's introductory chrome. */
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .qb-role-preview-intro {background:var(--qba-soft)!important;color:var(--qba-ink)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app :is(.qb-role-preview-intro>p,.qb-preview-answer-doc>header>p) {font-size:12px!important;line-height:1.4!important;margin:0!important;color:var(--qba-muted)!important;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .qb-preview-answer-doc>header {display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:3px 8px;align-items:center;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .qb-preview-answer-doc>header>:not(.qba-trigger) {grid-column:1;}
  #screen-teacher.qb-parent-appearance #teacher-root #tr-app .qb-preview-answer-doc>header>.qba-trigger {grid-column:2;grid-row:1 / 4;margin:0;}
  /* A compact control joins an existing header; no permanent extra control panel. */
  :is(#screen-teacher,#screen-recordkeeping).qb-parent-appearance button.qba-trigger {
    flex:0 0 auto;align-self:center;margin:0 0 0 6px;width:40px;min-width:40px;min-height:40px;
    padding:4px!important;border:1px solid var(--qba-line)!important;border-radius:6px!important;
    background:var(--qba-paper)!important;color:var(--qba-ink)!important;font:500 14px/1.2 system-ui!important;
  }
  .qba-dialog {box-sizing:border-box;width:min(350px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;
    margin:12px 12px 12px auto;padding:16px;border:1px solid var(--qba-line,#dce4d9);border-radius:10px;
    background:var(--qba-paper,#fffefb);color:var(--qba-ink,#243c30);font:400 16px/1.5 system-ui;}
  .qba-dialog::backdrop {background:rgba(0,0,0,.12);}
  .qba-dialog * {box-sizing:border-box;}
  .qba-dialog header,.qba-dialog footer {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
  .qba-dialog h2 {font:500 22px/1.2 Georgia,serif;margin:0;}
  .qba-dialog label {display:block;font-size:14px;margin:12px 0;}
  .qba-dialog :is(select,input) {display:block;width:100%;min-width:0;margin-top:4px;min-height:40px;font:inherit;font-size:16px;color:inherit;background:var(--qba-paper,#fffefb);border:1px solid var(--qba-line,#dce4d9);border-radius:6px;}
  .qba-dialog input[type=range] {padding:0;accent-color:var(--qba-ink,#243c30);}
  .qba-dialog .qba-colours {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .qba-dialog .qba-colours label {margin:0;}
  .qba-dialog button {min-height:40px;padding:6px 10px;font:inherit;font-size:13px;color:inherit;background:var(--qba-paper,#fffefb);border:1px solid var(--qba-line,#dce4d9);border-radius:6px;cursor:pointer;}
  .qba-dialog output {float:right;}
  .qba-dialog [data-qba-status] {font-size:12px;margin:8px 0;}
  @media(pointer:coarse) { .qba-dialog :is(button,select,input),:is(#screen-teacher,#screen-recordkeeping).qb-parent-appearance button.qba-trigger {min-height:44px;} }
}
@media print { .qba-trigger,.qba-dialog {display:none!important;} }