/* MYP lesson, teacher and unit pages (Years 7 to 11).
 *
 * Linked AFTER /topic-5/lesson.css, never instead of it: the palette, type,
 * cards, figures, questions and dark mode all come from the shared sheets.
 * This file adds only what the MYP pages have and the Diploma pages do not:
 * strand colours, the calculator label, the connected-learning panels, the
 * warm-up, levelled question tags, "show me the steps", the Listen slot and
 * the unit page cards. Generated pages only: scripts/build-myp-lessons.mjs.
 */

/* Strand colours carry white text (5:1 or better for all five), so a badge
   reads the same in light and dark mode. Never used for body text. */
:root { --neg:#97561c; --lv2:#8a5322; --on-neg:#ffffff; --sera:#2456a6; --serb:#7a3e9d; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --neg:#e8b07f; --lv2:#e0a876; --on-neg:#2a1606; --sera:#9cc0f5; --serb:#d3a9ef; }
}
.s-na { --s:#1F5FBF; }
.s-fn { --s:#7A3E9D; }
.s-gt { --s:#1F7A4D; }
.s-sp { --s:#B5520F; }
.s-ca { --s:#B42A3C; }

header.top.strand { border-bottom:6px solid var(--s); }

/* Skip link: hidden until it has keyboard focus. */
a.skip { position:absolute; left:12px; top:-60px; z-index:10; background:#f4efe4; color:#10302a;
         font-weight:700; padding:10px 16px; border-radius:8px; }
a.skip:focus { top:12px; outline:3px solid var(--warm); }

/* Links in the lesson column keep the palette in both schemes (the shared sheets leave them to the
   browser, which in dark mode is blue on dark green). */
main .wrap a:not(.lcard):not(.btn) { color:var(--mint); text-underline-offset:2px; }

/* Touch targets: 44px for every control a student presses. */
.wrap .ctl input[type=range] { min-height:44px; }
.wrap button.check, .wrap .seg button { min-height:44px; }
header.top .tabs a { min-height:44px; display:inline-flex; align-items:center; }
.wrap input.ans { min-height:44px; border-color:var(--soft); }
.wrap .choices label { border-color:var(--soft); min-height:44px; }
details summary { padding:10px 0; min-height:44px; box-sizing:border-box; }
.scroller:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
/* The shared 340px table minimum is wider than a 390px phone's scroller (335px) and put a 5px scrollbar on every
   teacher table; the scroller stays as the safety net for tables whose content really is wider. */
.scroller table.ref { min-width:0; }
.fbwrap { min-height:0; }
.tagrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 0; }
header.top .tagrow { margin-top:16px; }
.badge { display:inline-block; font-size:13.5px; font-weight:700; letter-spacing:.02em; color:#fff;
         background:var(--s); border-radius:999px; padding:3px 11px; }
/* The calculator label sits on the dark header in both colour schemes, so
   its colours are literals, like the header's own. */
.calc-tag { display:inline-block; font-size:13.5px; font-weight:700; letter-spacing:.02em;
            color:#f4efe4; border:1px solid rgba(244,239,228,.55); border-radius:999px; padding:2px 11px; }
.calc-tag.light { color:var(--ink); border-color:var(--soft); }

/* Connected learning: where this lesson comes from and where it leads. */
.links { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:0 0 18px; }
.links h2 { font-size:18.5px; margin:0 0 4px; }
.links h2::before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
                    background:var(--s); margin-right:9px; vertical-align:2px; }
.links h3 { font-size:15px; margin:12px 0 4px; color:var(--soft); }
.links p.why { font-size:15px; color:var(--soft); margin:0 0 8px; }
.links ul { margin:0; padding-left:20px; font-size:15.5px; }
.links li { margin-bottom:6px; }
.links li:last-child { margin-bottom:0; }
.links .where { color:var(--soft); font-size:14px; }
.links.next { margin-top:30px; }
.links li a, nav.more a { display:inline-block; padding:3px 0; }
.links.refresh { margin-top:0; }

/* Warm-up: retrieval before anything new. Answers open on request. */
ol.warmup { margin:0 0 6px; padding-left:22px; }
ol.warmup > li { margin-bottom:10px; }
ol.warmup details { margin-top:4px; font-size:15.5px; }
ol.warmup summary { cursor:pointer; color:var(--mint); font-weight:600; font-size:14.5px; }
ol.warmup summary:focus-visible, details.steps summary:focus-visible, details.more summary:focus-visible {
  outline:2px solid var(--mint); outline-offset:2px; border-radius:4px; }

/* "Show me the steps": the figure in words, one state per line. It is the
   text alternative, and the still version for anyone who prefers no motion. */
details.steps { border:1px dashed var(--edge); border-radius:10px; padding:10px 14px; margin:10px 0 18px;
                background:var(--paper); }
details.steps summary { cursor:pointer; font-weight:600; font-size:15px; color:var(--mint); }
details.steps ol { margin:10px 0 2px; padding-left:22px; font-size:15.5px; }
details.steps li { margin-bottom:6px; }
details.more { margin:8px 0 14px; }
details.words { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px 16px; }
details.words dl { margin:4px 0 10px; font-size:15.5px; }
details.words dt { font-weight:700; margin-top:8px; }
details.words dd { margin:0; }
.card.think { border-style:dashed; }
h3.think-h { font-size:17px; margin:28px 0 10px; }
p.tight { margin-bottom:0; }
.seg button[aria-disabled="true"] { opacity:.5; cursor:default; }
svg.fig text.halo { paint-order:stroke; stroke:var(--card); stroke-width:5px; stroke-linejoin:round; }
details.more summary { cursor:pointer; font-weight:600; font-size:15px; color:var(--mint); }

/* Levelled questions: a heading per level, named in words and marked with a dot. */
h3.lvh { font-size:17px; margin:28px 0 10px; }
h3.lvh::before { content:""; display:inline-block; width:11px; height:11px; border-radius:50%;
                 background:currentColor; margin-right:9px; vertical-align:1px; }
h3.lvh.l1 { color:var(--mint); }
h3.lvh.l2 { color:var(--lv2); }
h3.lvh.l3 { color:var(--bad); }
h3.lvh.exit { color:var(--ink); }
.card.exit { border:2px solid var(--ink); }
input.ans.txt { max-width:180px; }

/* A calculator note, only on lessons where a scientific calculator helps. */
.calcnote { border:1px solid var(--line); border-left:4px solid var(--warm); border-radius:0 12px 12px 0;
            background:var(--card); padding:14px 18px; margin:18px 0; }
.calcnote h3 { margin:0 0 6px; }
.calcnote p:last-child { margin-bottom:0; }

/* Listen: shown only once an audio file exists for the lesson. */
.listen { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 0; }
.listen audio { max-width:100%; }
.listen details { flex:1 1 100%; font-size:15px; }

/* Figures: controls in a row, parts of the SVG named once. */
.ctl label { font-weight:600; font-size:15px; }
.wrap .ctl output { font-family:"Archivo",system-ui,sans-serif; font-size:17px; font-weight:700;
  min-width:3.2em; font-variant-numeric:tabular-nums; }
.seg button:focus-visible, button.check:focus-visible { outline:3px solid var(--warm); outline-offset:2px; }
svg.fig .pos   { fill:var(--mint); }
svg.fig .neg   { fill:var(--neg); }
svg.fig .posl  { stroke:var(--mint); fill:none; stroke-linecap:round; }
svg.fig .negl  { stroke:var(--neg); fill:none; stroke-linecap:round; }
svg.fig .zero  { stroke:var(--ink); fill:none; }
svg.fig .grid  { stroke:var(--line); fill:none; }
svg.fig .dot   { fill:var(--ink); }
svg.fig .ring  { fill:var(--card); stroke:var(--ink); }
svg.fig .shade { fill:var(--mint); opacity:.12; }
svg.fig .ser-a  { fill:var(--sera); }
svg.fig .ser-b  { fill:var(--serb); }
svg.fig .ser-al { stroke:var(--sera); fill:none; stroke-linecap:round; }
svg.fig .ser-bl { stroke:var(--serb); fill:none; stroke-linecap:round; }
svg.fig text.ser-a-t { font-size:15px; font-weight:700; fill:var(--sera); }
svg.fig text.ser-b-t { font-size:15px; font-weight:700; fill:var(--serb); }
svg.fig text.pos-t { font-size:15px; font-weight:700; fill:var(--good); font-variant-numeric:tabular-nums; }
svg.fig text.neg-t { font-size:15px; font-weight:700; fill:var(--neg); font-variant-numeric:tabular-nums; }
svg.fig text.on-pos { font-size:17px; font-weight:700; fill:var(--on-mint); }
svg.fig text.on-neg { font-size:17px; font-weight:700; fill:var(--on-neg); }
svg.fig text.mid   { text-anchor:middle; }
svg.fig text.end   { text-anchor:end; }

/* Phones. The figures are drawn on a 560-wide canvas that shrinks to about 350, so their text is
   set larger here. The selector carries .wrap so it outranks the base sizes in topic-5/lesson.css,
   which otherwise win over the shared phone rule in topic-4/lesson.css. */
@media (max-width:520px) {
  .wrap svg.fig text { font-size:20px; }
  .wrap svg.fig text.tick, .wrap svg.fig text.lbl, .wrap svg.fig text.note { font-size:21px; }
  .wrap svg.fig text.num, .wrap svg.fig text.pos-t, .wrap svg.fig text.neg-t,
  .wrap svg.fig text.ser-a-t, .wrap svg.fig text.ser-b-t { font-size:21px; }
}

/* Unit page: one card per lesson. */
a.lcard { display:block; text-decoration:none; color:inherit; background:var(--card);
          border:1px solid var(--line); border-left:6px solid var(--s); border-radius:0 12px 12px 0;
          padding:16px 20px; margin-bottom:13px; }
a.lcard:hover { border-color:var(--edge); border-left-color:var(--s); }
a.lcard:focus-visible { outline:3px solid var(--warm); outline-offset:2px; }
a.lcard strong { display:block; font-size:18px; line-height:1.3; margin-bottom:4px; }
a.lcard span { display:block; color:var(--soft); font-size:15.5px; }
ol.lessons { list-style:none; margin:0; padding:0; }
a.lcard .fig-line { color:var(--ink); font-size:14.5px; margin-top:6px; }
a.lcard .calc-tag { display:inline-block; margin-top:8px; }

/* Teacher pages: objectives and vocabulary. */
.objs { display:grid; gap:12px; }
@media (min-width:640px) { .objs { grid-template-columns:1fr 1fr 1fr; } }
.objs > div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.objs h3 { margin:0 0 6px; font-size:16px; color:var(--soft); }
.objs ul { margin:0; padding-left:18px; font-size:15.5px; }
.crit { font-weight:700; color:var(--mint); }
/* The shared tier-2 answer colour (--warm) is 3.4:1 on the card; the MYP pages use the darker amber. */
.wrap .tier.t2 .ans { color:var(--lv2); }

@media print {
  .links { break-inside:avoid; }
}