/* Underhill Adventures – teacher resources (curriculum-map, marking-guide, answer-checking, paper-tasks) and Challenge mode.
   Builds on style.css and tools.css. Colours come from the theme variables, so the dark tint and both high-contrast
   themes in css/comfort.css apply. Print rules are at the end: A4, site chrome hidden, one sheet per page. */
.tr-controls { display: grid; gap: 16px; }
.tr-controls .row { align-items: flex-end; }
.tr-controls select { font: 700 1rem var(--font-body); min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 2px solid #8C8573; background: #fff; color: var(--ink); max-width: 100%; }
.tr-controls label.sel { display: grid; gap: 6px; font-weight: 800; color: var(--forest-deep); }
.tr-note { border-left: 6px solid var(--amber-deep); background: #FFF8E6; padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; color: var(--ink); }
.tr-note p { margin: 0 0 6px; } .tr-note p:last-child { margin: 0; }
.tr-grid { display: grid; gap: 20px; }
table.results.tr-table { min-width: 0; }
table.results.tr-table td.num, table.results.tr-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.results.tr-table tfoot th, table.results.tr-table tfoot td { font-weight: 800; border-top: 2px solid #CFC8B3; }
.tr-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; white-space: nowrap; }
.tr-quote { margin: 4px 0 0; padding-left: 12px; border-left: 3px solid #CFC8B3; }
.tr-tag { display: inline-block; border: 1px solid #8C8573; border-radius: 6px; padding: 0 6px; font-size: .8rem; font-weight: 800; color: var(--ink); background: #F6F3EA; }
.tr-tag.made { border-style: dashed; }
.tr-list { margin: 4px 0 0; padding-left: 1.2em; }
.tr-list li { margin: 2px 0; }
.mg-q { border-top: 1px solid #E6E1D3; padding: 16px 0; }
.mg-q:first-of-type { border-top: 0; }
.mg-q h4, .la-q h3 { font-size: 1.05rem; margin: 0 0 6px; }
.mg-meta { color: var(--muted); font-size: .95rem; margin: 0 0 8px; }
.mg-ex dt { font-weight: 800; margin-top: 8px; }
.mg-ex dd { margin: 2px 0 0 0; }
.mg-ex dd q { quotes: "‘" "’"; }
.mg-rule { background: #EEF5EE; border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
/* Paper tasks */
.pt-sheet { background: #fff; color: #000; border: 1px solid #CFC8B3; border-radius: 12px; padding: 24px 28px; margin: 0 0 24px; }
.pt-sheet h2 { font-size: 1.4rem; margin: 0 0 4px; color: #000; }
.pt-sheet .pt-sub { margin: 0 0 12px; color: #333; }
.pt-name { display: flex; gap: 24px; flex-wrap: wrap; margin: 0 0 14px; font-weight: 700; }
.pt-name span { flex: 1 1 200px; border-bottom: 1.5px solid #000; padding-bottom: 2px; min-height: 1.8em; }
.pt-passage { border: 1.5px solid #555; border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: #000; }
.pt-passage h3 { font-size: 1rem; margin: 0 0 4px; color: #000; }
.pt-passage p { margin: 0 0 6px; color: #000; }
.pt-q { margin: 0 0 14px; break-inside: avoid; page-break-inside: avoid; }
.pt-q p { margin: 0 0 4px; font-weight: 700; color: #000; }
.pt-q .pt-tip { font-weight: 400; font-style: italic; color: #333; }
.pt-lines { display: grid; gap: 0; }
.pt-lines span { display: block; height: 2.1em; border-bottom: 1.5px solid #555; }
.pt-hw-row { display: grid; grid-template-columns: minmax(7em, auto) 1fr; gap: 12px; align-items: end; margin: 0 0 10px; break-inside: avoid; page-break-inside: avoid; }
.pt-model { font-size: 1.6rem; line-height: 1; padding: 0 4px 4px; border-bottom: 1.5px solid #000; color: #000; }
.pt-hw-lines { position: relative; height: 3.2em; border-top: 1px dashed #777; border-bottom: 1.5px solid #000; }
.pt-hw-lines::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted #999; }
.pt-key table.results { min-width: 0; font-size: .95rem; }
.pt-key td, .pt-key th { color: #000; }
.pt-page-break { break-before: page; page-break-before: always; }
.pt-src { font-size: .85rem; color: #333; margin: 10px 0 0; }
/* Challenge mode */
.ch-card { display: grid; gap: 14px; }
.ch-passage { background: #FFF8E6; border-left: 6px solid var(--amber-deep); border-radius: 10px; padding: 12px 16px; font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
.ch-passage p { margin: 0 0 6px; } .ch-passage p:last-child { margin: 0; }
.ch-gap { display: inline-block; min-width: 2.2em; border-bottom: 3px solid var(--forest); text-align: center; font-weight: 800; }
.ch-q { font: 700 1.25rem/1.45 var(--font-body); margin: 0; color: var(--ink); }
.ch-opts { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.ch-opts legend { font-weight: 800; margin-bottom: 8px; color: var(--forest-deep); padding: 0; }
.ch-opts label { position: relative; display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 10px 16px; border-radius: 14px; border: 2px solid #8C8573; background: #fff; cursor: pointer; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.ch-opts input { width: 22px; height: 22px; accent-color: var(--forest); flex: none; }
.ch-opts label:has(input:checked) { border-color: var(--forest); background: #EAF1EA; }
.ch-opts label:has(input:focus-visible) { outline: 3px solid var(--forest); outline-offset: 3px; }
.ch-opts label.is-answer { border-color: var(--forest); border-width: 3px; }
.ch-feedback { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 12px 16px; border: 2px solid var(--forest); background: #F2F7F2; color: var(--ink); }
.ch-feedback:empty { display: none; }
.ch-feedback img { flex: none; width: 64px; height: 64px; }
.ch-feedback p { margin: 0 0 6px; color: var(--ink); } .ch-feedback p:last-child { margin: 0; }
.ch-feedback.hint { border-color: var(--amber-deep); background: #FFF8E6; }
.ch-progress { font-weight: 800; color: var(--forest-deep); margin: 0; }
.ch-score { font: 600 2rem var(--font-display); color: var(--forest); margin: 0; }
.ch-summary li { margin: 4px 0; }
.ch-guide { display: flex; gap: 12px; align-items: center; }
.ch-guide img { width: 72px; height: 72px; }
/* Teacher page: progress and resources */
.tp-wrap { display: grid; gap: 18px; }
.tp-bar { display: inline-block; height: .7em; background: var(--forest); border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.res-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.res-list li { border: 2px solid #E6E1D3; border-radius: 14px; padding: 12px 16px; background: #fff; }
.res-list a { font-weight: 800; font-size: 1.1rem; }
.res-list p { margin: 4px 0 0; color: var(--muted); }

/* Dark tint and high-contrast dark */
.ua-dark .tr-note, .ua-dark .tr-tag, .ua-dark .mg-rule, .ua-dark .ch-passage, .ua-dark .ch-opts label, .ua-dark .ch-feedback,
.ua-dark .res-list li, .ua-dark .tr-controls select { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--forest) !important; }
.ua-dark .ch-opts label:has(input:checked) { background: #2E5A43 !important; }
.ua-contrast-high-dark .ch-opts label:has(input:checked) { background: #1F3A2C !important; }
.ua-dark .pt-sheet { background: var(--paper); color: var(--ink); border-color: var(--forest); }
.ua-dark .pt-sheet h2, .ua-dark .pt-sheet .pt-sub, .ua-dark .pt-passage, .ua-dark .pt-passage h3, .ua-dark .pt-passage p, .ua-dark .pt-q p,
.ua-dark .pt-q .pt-tip, .ua-dark .pt-model, .ua-dark .pt-key td, .ua-dark .pt-key th, .ua-dark .pt-src { color: var(--ink); }
.ua-dark .pt-lines span, .ua-dark .pt-name span, .ua-dark .pt-model, .ua-dark .pt-hw-lines, .ua-dark .pt-passage { border-color: var(--ink); }
.ua-contrast-high .tr-note, .ua-contrast-high .ch-opts label, .ua-contrast-high .ch-feedback, .ua-contrast-high .res-list li { border: 3px solid #000 !important; }
.ua-contrast-high .tr-tag, .ua-contrast-high .tr-controls select { border-color: #000; }

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html, body, .tool-body { background: #fff !important; color: #000 !important; }
  .skip-link, .comfort-btn, #sr-polite, .tr-controls, .tr-screen-only { display: none !important; }
  .tool-main { width: 100% !important; padding: 0 !important; }
  .tool-title { font-size: 20pt; margin: 0 0 4pt; color: #000; }
  .tool-lead { font-size: 11pt; margin: 0 0 8pt; color: #000; }
  .panel { box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 10pt !important; background: #fff !important; }
  .panel h2, .panel h3, .panel p, .panel li, .panel td, .panel th, .panel dt, .panel dd, a { color: #000 !important; }
  a { text-decoration: none; }
  table.results { font-size: 9.5pt; }
  table.results th, table.results td { padding: 3pt 5pt; border: 1px solid #777 !important; }
  table.results thead th { background: #fff !important; color: #000 !important; }
  .table-wrap { overflow: visible !important; border: 0 !important; }
  .tr-table, .mg-q, .tr-keep { break-inside: avoid; page-break-inside: avoid; }
  .cm-adv { break-before: page; page-break-before: always; }
  .cm-adv:first-of-type { break-before: auto; page-break-before: auto; }
  .pt-sheet { border: 0 !important; border-radius: 0; padding: 0 !important; margin: 0 !important; break-after: page; page-break-after: always; }
  .pt-sheet:last-of-type { break-after: auto; page-break-after: auto; }
  .pt-passage { font-size: 11pt; padding: 6pt 9pt; }
  .pt-lines span { height: 9mm; border-bottom-color: #000 !important; }
  .pt-hw-lines { height: 13mm; }
  .pt-model { font-size: 20pt; }
  .mg-adv-head { break-after: avoid; page-break-after: avoid; }
  /* Paper is white in every theme: dark and high-contrast dark settings must not print pale text or dark boxes. */
  /* :root:root:root lifts these above the theme rules in comfort.css (such as .ua-dark .panel), which are !important too. */
  :root:root:root main, :root:root:root main *:not(svg):not(use):not(path) { color: #000 !important; }
  :root:root:root main, :root:root:root main *:not(svg):not(use):not(path) { background-color: #fff !important; background-image: none !important; box-shadow: none !important; }
  :root:root:root main :is(.tr-note, .tr-tag, .mg-rule, .pt-passage, .table-wrap) { border-color: #555 !important; }
  :root:root:root main table.results :is(th, td) { border-color: #777 !important; }
  :root:root:root main .panel { border: 0 !important; outline: 0 !important; }
  :root:root:root :is(.pt-name span, .pt-model, .pt-lines span) { border-bottom-color: #000 !important; }
  :root:root:root .pt-hw-lines { border-top-color: #777 !important; border-bottom-color: #000 !important; }
  :root:root:root .pt-hw-lines::after { border-top-color: #999 !important; }
}

/* See the learning in action (learning-in-action.html) */
.la-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.la-col { border: 2px solid var(--parchment); border-radius: var(--radius-sm); padding: 12px 16px; }
.la-col h3 { margin-top: 0; }
.la-rules { margin: 4px 0 0; padding-left: 1.2em; }
.la-example-note { border: 2px dashed var(--bark); border-radius: var(--radius-sm); padding: 8px 12px; }
@media (max-width: 699px) { .la-compare { grid-template-columns: 1fr; } }
@media print { .la-compare { grid-template-columns: 1fr 1fr; } .la-q, .la-col, .la-report { break-inside: avoid; } }
.mg-ww-more > summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.mg-ww-more > summary:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }