/* The textbook's blocks (web/js/textbook.js, web/shared/textbook.js): ONE calm look on Learn, in people's own text
   blocks and in Present. Sizes are in em, so a block grows with where it's shown (Present, the youngest's pages).
   Colours follow the topic's hue (--h); light and dark. */
.tb{display:flex;flex-direction:column;gap:12px}
.tbflow{display:flex;flex-direction:column;gap:14px}
.tblab{display:flex;align-items:center;gap:6px;font-size:.75em;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--h,214) 55% 38%)}
:root[data-theme=dark] .tblab{color:hsl(var(--h,214) 65% 74%)}
.tblab svg{flex:none;width:1.4em;height:1.4em}
.tbcap{margin:0;font-weight:700;line-height:1.4}
.tbtable,.tbpairs,.tbseq,.tbtime,.tbcompare,.tbdiag{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}

/* key words: a vocabulary list (one word is a key word box) */
.tbwords{background:hsl(var(--h,214) 80% 96%);border-radius:var(--r1);corner-shape:squircle;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
:root[data-theme=dark] .tbwords{background:hsl(var(--h,214) 28% 16%)}
.tbwords dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15em),1fr));gap:10px 20px}
.tbw{display:flex;flex-direction:column;gap:2px;min-width:0}
.tbw dt{font-weight:800;color:hsl(var(--h,214) 65% 30%);font-size:1.0625em}
:root[data-theme=dark] .tbw dt{color:hsl(var(--h,214) 75% 80%)}
.tbw dd{margin:0;color:var(--muted);line-height:1.45;font-size:.94em}

/* Remember · Watch out · In real life */
.tbnote{--nc:hsl(var(--h,214) 70% 42%);border-radius:var(--r1);corner-shape:squircle;padding:10px 14px;border-inline-start:4px solid var(--nc);background:color-mix(in srgb,var(--nc) 8%,var(--paper));display:flex;flex-direction:column;gap:4px}
.tbnote p{margin:0;line-height:1.5}
.tbnote .tblab{color:var(--nc)}
.tbnote.tb-watch{--nc:#C2410C}
.tbnote.tb-real{--nc:#15803D}
:root[data-theme=dark] .tbnote{--nc:hsl(var(--h,214) 70% 66%)}
:root[data-theme=dark] .tbnote.tb-watch{--nc:#FB923C}
:root[data-theme=dark] .tbnote.tb-real{--nc:#4ADE80}

/* tables: comparison, data and step-by-step */
.tbscroll{overflow-x:auto;border-radius:var(--r1);corner-shape:squircle;border:1.5px solid var(--line);background:var(--paper)}
.tbtable table{border-collapse:collapse;width:100%;font-size:.94em}
.tbtable th,.tbtable td{padding:.5em .8em;text-align:start;vertical-align:top;line-height:1.45;border-top:1px solid var(--line)}
.tbtable tr:first-child>*{border-top:0}
.tbtable thead th{background:hsl(var(--h,214) 80% 95%);font-weight:800;border-bottom:1.5px solid var(--line)}
:root[data-theme=dark] .tbtable thead th{background:hsl(var(--h,214) 28% 18%)}
.tbtable tbody th{font-weight:700;color:hsl(var(--h,214) 60% 32%);min-width:5.5em;max-width:40%}
:root[data-theme=dark] .tbtable tbody th{color:hsl(var(--h,214) 70% 78%)}
.tbtable tbody tr:nth-child(even){background:var(--board)}

/* before → after */
.tbpairs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13em),1fr));gap:6px}
.tbpairs li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:.45em .8em;border-radius:var(--r0);background:var(--board);border:1.5px solid var(--line);line-height:1.4}
.tbpairs .tbp:last-child{font-weight:700}
.tbarrow{color:hsl(var(--h,214) 65% 48%);font-weight:800;display:inline-block}
[dir=rtl] .tbarrow{transform:scaleX(-1)}

/* a sequence: numbered steps joined by a line */
.tbseq ol{list-style:none;margin:0;padding:0;counter-reset:tbs;display:flex;flex-direction:column}
.tbseq li{counter-increment:tbs;position:relative;padding-inline-start:2.6em;padding-bottom:.9em;line-height:1.5;min-height:2em}
.tbseq li:last-child{padding-bottom:0}
.tbseq li::before{content:counter(tbs);position:absolute;inset-inline-start:0;top:-.1em;width:1.85em;height:1.85em;border-radius:50%;background:hsl(var(--h,214) 70% 44%);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9em}
.tbseq li:not(:last-child)::after{content:'';position:absolute;inset-inline-start:.8em;top:1.75em;bottom:.1em;width:2px;border-radius:2px;background:hsl(var(--h,214) 50% 80%)}
:root[data-theme=dark] .tbseq li:not(:last-child)::after{background:hsl(var(--h,214) 30% 32%)}

/* a timeline */
.tbtime ol{list-style:none;margin:0;margin-inline-start:.5em;padding:0;border-inline-start:3px solid hsl(var(--h,214) 50% 82%);display:flex;flex-direction:column;gap:.8em}
:root[data-theme=dark] .tbtime ol{border-inline-start-color:hsl(var(--h,214) 30% 32%)}
.tbtime li{position:relative;padding-inline-start:1.2em;display:flex;flex-direction:column;line-height:1.45}
.tbtime li::before{content:'';position:absolute;inset-inline-start:-.6em;top:.3em;width:.8em;height:.8em;border-radius:50%;background:var(--paper);border:3px solid hsl(var(--h,214) 70% 44%)}
.tbwhen{font-size:.85em;color:hsl(var(--h,214) 60% 36%)}
:root[data-theme=dark] .tbwhen{color:hsl(var(--h,214) 70% 76%)}

/* side by side */
.tbcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12em),1fr));gap:10px}
.tbcol{background:var(--board);border:1.5px solid var(--line);border-radius:var(--r1);corner-shape:squircle;padding:.7em .9em;display:flex;flex-direction:column;gap:6px;line-height:1.45;min-width:0}
.tbcol p{margin:0}
.tbcol p::first-letter{text-transform:uppercase}
.tbcol ul{margin:0;padding-inline-start:1.1em;display:flex;flex-direction:column;gap:4px}
.tbct{color:hsl(var(--h,214) 60% 34%)}
:root[data-theme=dark] .tbct{color:hsl(var(--h,214) 70% 78%)}

/* facts and their bold lead-ins */
.tbfacts{gap:8px}
.tbl{font-weight:700}

/* Try it */
.tbtry{display:flex;flex-direction:column;gap:8px}
.tbtry ol{margin:0;padding-inline-start:1.4em;display:flex;flex-direction:column;gap:14px}
.tbq{line-height:1.5}
.tbqq{margin:0}
.tbqf{display:flex;gap:6px;margin-top:6px;max-width:22em}
.tbqf .input{flex:1;min-width:0;margin:0}
.tbshow{margin-top:4px}
.tbfb{margin:6px 0 0;display:none}
.tbfb.on{display:block}
.tbq.right .tbfb{color:#15803D;font-weight:700}
:root[data-theme=dark] .tbq.right .tbfb{color:#4ADE80}
.tbq.right .input{border-color:#22C55E}

/* the summary as a mind-map: a list on a phone, the key words round the topic on a wider screen */
.tbmap{display:flex;flex-direction:column;gap:8px;container-type:inline-size}
.tbmapin{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tbmapin ul{list-style:none;margin:0;padding:0;padding-inline-start:14px;border-inline-start:2px solid hsl(var(--h,214) 50% 80%);display:flex;flex-wrap:wrap;gap:6px}
.tbcentre,.tbmapin li{border-radius:999px;padding:.35em .9em;line-height:1.3;text-align:center}
.tbcentre{background:hsl(var(--h,214) 70% 44%);color:#fff;font-size:1.05em}
.tbmapin li{background:hsl(var(--h,214) 80% 95%);border:1.5px solid hsl(var(--h,214) 60% 82%);font-weight:700}
:root[data-theme=dark] .tbmapin li{background:hsl(var(--h,214) 28% 18%);border-color:hsl(var(--h,214) 30% 34%)}
.tblines{display:none}
@container (min-width:520px){
  .tbmapin{display:block;height:clamp(230px,44cqw,380px)}
  .tbmapin ul{display:contents}
  .tblines{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .tblines line{stroke:hsl(var(--h,214) 50% 78%);stroke-width:2;vector-effect:non-scaling-stroke}
  :root[data-theme=dark] .tblines line{stroke:hsl(var(--h,214) 30% 36%)}
  .tbcentre,.tbmapin li{position:absolute;transform:translate(-50%,-50%);max-width:30%}
  .tbcentre{inset-inline-start:50%;top:50%}
  .tbmapin li{inset-inline-start:var(--x);top:var(--y)}
  [dir=rtl] .tbcentre,[dir=rtl] .tbmapin li{transform:translate(50%,-50%)}
  [dir=rtl] .tblines{transform:scaleX(-1)}
}

/* a picture with numbered labels */
.tbdpic{position:relative;border-radius:var(--r1);overflow:hidden;background:var(--canvas,var(--board))}
.tbdpic img{display:block;width:100%;height:auto}
.tbpin{position:absolute;inset-inline-start:var(--x);top:var(--y);translate:-50% -50%;width:1.7em;height:1.7em;border-radius:50%;background:hsl(var(--h,214) 70% 44%);color:#fff;font-weight:800;font-size:.85em;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
[dir=rtl] .tbpin{inset-inline-start:auto;left:var(--x)}
.tbpin.static{position:static;translate:none;flex:none}
.tbdedit{touch-action:none;cursor:crosshair}
.tbdedit .tbpin{cursor:grab}
.tbkey{margin:0;padding-inline-start:1.6em;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12em),1fr));gap:4px 16px;line-height:1.45}

/* the youngest (primary years, not on cards): bigger and simpler */
.tbbig .thead2 .lead,.tbbig .tbflow,.tbbig .tb{font-size:1.1rem}
.tbbig .tbwords dl{grid-template-columns:1fr}

/* ---------- Present: one idea a slide, big type, the same places for the title, the content and the steps ---------- */
.teach .tprog{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:-6px}
.teach .tprog i{display:block;height:100%;background:hsl(var(--h,214) 70% 50%);border-radius:4px;transition:width .25s}
.teach .tmorebox{position:relative}
.teach .tmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:5;min-width:220px;background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 12px 30px var(--shadow,rgba(0,0,0,.2))}
.teach .tmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;color:var(--ink);font:inherit;border-radius:10px;cursor:pointer;text-align:start}
.teach .tmenu button:hover{background:var(--soft)}
.teach .tmenu .tsw{margin-inline-start:auto;width:36px;height:22px;border-radius:11px;background:var(--line);position:relative;flex:none}
.teach .tmenu .tsw::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.teach .tmenu [aria-checked=true] .tsw{background:hsl(var(--h,214) 70% 48%)}
.teach .tmenu [aria-checked=true] .tsw::after{inset-inline-start:17px}
.teach .tstage{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:12px;max-width:1240px;width:100%;margin-inline:auto}
.teach .tstage>.tslide{max-width:none;min-height:0;height:100%}
.teach .tstage.hascat{grid-template-rows:minmax(0,1fr) auto}
.teach .tcat{justify-self:end;align-self:end;width:clamp(84px,24vw,120px);pointer-events:none}
.teach .tcat svg{display:block;width:100%;height:auto}
.teach .tcat svg{transform:scaleX(-1)}   /* the shared cat points to its right: turned to face the slide (RTL: as drawn) */
[dir=rtl] .teach .tcat svg{transform:none}
@media (min-aspect-ratio:5/4) and (min-width:700px){
  .teach .tstage.hascat{grid-template-columns:minmax(0,1fr) clamp(130px,19vw,250px);grid-template-rows:minmax(0,1fr);gap:clamp(16px,3vw,48px)}
  .teach .tcat{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .teach .tcat svg{animation:tcatin .45s cubic-bezier(.3,1.4,.5,1) both}
  @keyframes tcatin{from{opacity:0;transform:scaleX(-1) translateY(14px) scale(.94)}to{transform:scaleX(-1)}}
  [dir=rtl] .teach .tcat svg{animation-name:tcatinr}
  @keyframes tcatinr{from{opacity:0;transform:translateY(14px) scale(.94)}}
}
.teach .tbslide{font-size:clamp(18px,2.3vw,30px);display:flex;flex-direction:column;gap:.8em;width:100%;line-height:1.4}
.teach .tbslide.young{font-size:clamp(21px,2.8vw,36px)}
.teach .tbslide .tslh{font-size:2.1em}
.teach .tbslide .tsll{font-size:1.05em}
.teach .tbslide .tslf{font-size:1.45em}
.teach .tbslide.young .tslf{font-size:1.35em}
.teach .tbslide .tbwords{padding:.8em 1em;gap:.6em}
.teach .tbslide .tbwords dl{gap:.7em 1.4em}
.teach .tbslide .tbw dt{font-size:1.25em}
.teach .tbslide .tbw dd{font-size:.95em;color:var(--ink)}
.teach .tbslide .tbnote{padding:.8em 1em;gap:.4em}
.teach .tbslide .tbnote p{font-size:1.25em;font-weight:600;line-height:1.4}
.teach .tbslide .tbtable table,.teach .tbslide .tbpairs,.teach .tbslide .tbseq,.teach .tbslide .tbtime,.teach .tbslide .tbcol{font-size:1em}
.teach .tbslide .tbcap{font-size:1.1em}
.teach .tbslide .tbcol{padding:.8em 1em;font-size:1.05em}
.teach .tbslide .tbtry ol{list-style:none;padding:0}
.teach .tbslide .tbqq{font-size:1.35em;font-weight:600}
.teach .tbslide .tbqf{max-width:16em}
.teach .tbslide .tbfb{font-size:1.1em}
.teach .tbslide .tblab{font-size:.6em}
.teach .tbslide.tbend{align-items:flex-start}
.teach .tbslide.tbend .tbmap{width:100%}
/* the lesson's key words: bold in its colour; bigger and bolder for the youngest */
.kw{font-weight:800;color:hsl(var(--h,214) 65% 34%)}
:root[data-theme=dark] .kw{color:hsl(var(--h,214) 75% 76%)}
.kw.big{font-size:1.18em;font-weight:900;letter-spacing:-.01em}
/* landscape: a timeline goes across, side-by-side columns stay side by side */
@media (min-aspect-ratio:5/4) and (min-width:700px){
  .teach .tbslide .tbtime ol{flex-direction:row;border-inline-start:0;border-top:3px solid hsl(var(--h,214) 50% 82%);margin:0;padding-top:1em;gap:1.2em}
  .teach .tbslide .tbtime li{flex:1;padding:0;padding-top:.4em}
  .teach .tbslide .tbtime li::before{top:-1.55em;inset-inline-start:0}
  .teach .tbslide .tbcols{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
}
.teach .tbslide .tbtry .tblab{display:none}
.teach .tbslide .btn{font-size:.7em}
.teach .tbslide .tbqf .input{font-size:.8em}
/* the youngest's cards in Present: the words big enough to read from the back of the room */
.teach .tslide>.ycard .yt,.teach .tslide>.ycard .yq{font-size:clamp(1.4rem,4.6vw,2.1rem);line-height:1.3}
.teach .tslide>.ycard .yaskq{font-size:clamp(1.1rem,3.4vw,1.5rem)}