/* Classroom Portal: styles the portal pages add on top of library/cfz/assets/cfz.css.
   Colours come from cfz.css tokens; the only new tokens are the years cfz.css does not define (5, 6, 10, 11). */
:root{ --y5:#3F7D20; --y6:#B23A6B; --y10:#1F5FAF; --y11:#8A5A00; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --y5:#8BCF6A; --y6:#EE84B0; --y10:#79A8F0; --y11:#E2B04A; } }
:root[data-theme="dark"]{ --y5:#8BCF6A; --y6:#EE84B0; --y10:#79A8F0; --y11:#E2B04A; }

body{ background:var(--paper); color:var(--ink); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pt-skip{ position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 12px; border-radius:10px; border:2px solid var(--accent); z-index:9; }
.pt-skip:focus{ left:16px; }

/* top bar */
.pt-top{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; padding:12px 0 4px; }
.pt-top a{ color:inherit; }
.pt-id{ display:flex; gap:10px; align-items:center; margin-right:auto; }
.pt-brand{ font-weight:700; font-size:1.1rem; text-decoration:none; }
.pt-role{ font-family:var(--f-mono); font-size:0.8rem; font-weight:700; padding:2px 10px; border-radius:99px; border:2px solid var(--teach); color:var(--teach); }
.pt-years{ display:flex; flex-wrap:wrap; gap:6px; }
.pt-years a{ text-decoration:none; font-weight:600; font-size:0.9rem; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:2px solid var(--yc); }
.pt-years a[aria-current="page"]{ background:var(--yc); color:var(--on-colour); }
.pt-search{ display:flex; gap:6px; }
.pt-search input{ min-height:40px; width:min(220px,46vw); padding:6px 12px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:inherit; }
.pt-search input:focus-visible{ outline:3px solid var(--accent); outline-offset:1px; }
.pt-tools{ display:flex; gap:6px; }
#settings{ margin:8px 0 0; }

/* page parts */
#main{ display:flex; flex-direction:column; gap:28px; padding-top:12px; }
.pt-yh{ color:var(--yc); }
.pt-crumbs{ font-size:0.92rem; color:var(--muted); }
.pt-crumbs a{ color:inherit; }
.pt-soon{ color:var(--muted); font-style:italic; }
.pt-badge{ align-self:flex-start; font-size:0.75rem; font-weight:700; padding:1px 8px; border-radius:99px; background:var(--teach-bg); color:var(--teach); }
.pt-sec{ display:flex; flex-direction:column; gap:12px; }
.pt-sec > header{ display:flex; flex-direction:column; gap:4px; }
.pt-sec > header p{ color:var(--muted); }
.pt-kind{ align-self:flex-start; font-size:0.85rem; font-weight:600; padding:2px 10px; border-radius:99px; border:2px solid var(--yc); }
.pt-cont{ display:flex; flex-direction:column; gap:2px; padding:14px 18px; border-radius:16px; border:2px solid var(--accent); background:var(--card); text-decoration:none; color:inherit; max-width:620px; }
.pt-cont b{ font-size:1.08rem; }
.yearcard .pt-soon{ font-size:0.9rem; }

/* units and lessons */
.pt-units{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); }
.pt-unit{ display:flex; flex-direction:column; gap:10px; padding:16px 18px; border-radius:18px; background:var(--card); border:2px solid var(--line); border-top:6px solid var(--yc); scroll-margin-top:16px; }
.pt-unit > header{ display:flex; flex-direction:column; gap:2px; }
.pt-unit > p{ color:var(--muted); }
.pt-term{ font-family:var(--f-mono); font-size:0.8rem; font-weight:700; color:var(--yc); text-transform:uppercase; letter-spacing:.04em; }
.pt-unit summary{ cursor:pointer; font-weight:600; min-height:32px; }
.pt-know{ margin:6px 0 0 1.1em; display:flex; flex-direction:column; gap:4px; }
.pt-lessons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.pt-lessons a{ display:grid; grid-template-columns:24px 1fr; gap:2px 8px; align-items:start; padding:8px 10px; border-radius:12px; border:2px solid var(--line); text-decoration:none; color:inherit; }
.pt-lessons a:hover, .pt-lessons a:focus-visible{ border-color:var(--yc); }
.pt-lessons small{ grid-column:2; }
.pt-tick{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); margin-top:2px; }
.pt-isdone .pt-tick{ background:var(--ok); border-color:var(--ok); }
.pt-isdone .pt-tick::after{ content:"✓"; display:block; color:var(--on-colour); font-size:0.75rem; font-weight:700; text-align:center; line-height:16px; }
a.ttile.pt-isdone::after{ content:"✓ understood"; position:absolute; top:10px; right:12px; font-size:0.75rem; font-weight:700; color:var(--ok); }
.pt-extra{ font-size:0.95rem; }
.pt-links{ display:flex; flex-wrap:wrap; gap:6px; }
.pt-tracks{ align-self:flex-start; }
.pt-steps{ margin-left:1.2em; display:flex; flex-direction:column; gap:6px; }
.pt-done{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pt-done .btn[aria-pressed="true"]{ background:var(--ok); border-color:var(--ok); color:var(--on-colour); }
.pt-lesson .toy{ margin:0; }

/* syllabus box, objectives, key words, the explanation */
.pt-syl{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:18px; background:var(--card); border:2px solid var(--yc); border-left-width:8px; max-width:860px; }
.pt-syl h3{ font-size:1rem; margin-top:6px; }
.pt-sylcode{ font-size:1.1rem; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.pt-code{ font-family:var(--f-mono); font-weight:700; font-size:0.85rem; padding:1px 8px; border-radius:8px; background:color-mix(in srgb,var(--yc) 14%,var(--card)); color:var(--ink); border:2px solid var(--yc); white-space:nowrap; }
.pt-obj{ margin-left:1.2em; display:flex; flex-direction:column; gap:4px; }
.pt-obj li::marker{ content:"✓  "; color:var(--yc); font-weight:700; }
.pt-sc{ margin-left:1.2em; display:flex; flex-direction:column; gap:4px; }
.pt-sc li::marker{ content:"☐  "; color:var(--yc); }
.pt-strands{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.pt-review{ font-size:0.92rem; padding:8px 12px; border-radius:12px; background:var(--teach-bg); }
.pt-words{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); max-width:1100px; }
.pt-words > div{ padding:10px 14px; border-radius:14px; background:var(--card); border:2px solid var(--line); border-top:4px solid var(--yc); }
.pt-words dt{ font-weight:700; font-size:1.05rem; }
.pt-words dd{ margin:2px 0 0; color:var(--ink); }
.pt-kwref{ border-bottom:3px solid color-mix(in srgb,var(--yc) 55%,transparent); }
.pt-explainer{ display:flex; flex-direction:column; gap:14px; max-width:860px; }
.pt-step{ display:flex; flex-direction:column; gap:10px; padding:16px 18px; border-radius:18px; background:var(--card); border:2px solid var(--line); min-width:0; }
.pt-step h3{ font-size:1.15rem; }
.pt-step, .pt-syl, .pt-words, .pt-usyl{ overflow-wrap:anywhere; }   /* long code or URLs in a sentence wrap instead of widening the page */
.pt-step ul, .pt-step ol{ margin-left:1.2em; display:flex; flex-direction:column; gap:4px; }
.pt-step .scrollx, .pt-step pre{ max-width:100%; overflow-x:auto; }
.pt-eg{ white-space:pre-wrap; font-family:var(--f-mono); font-size:0.95rem; margin:0; }
.pt-usyl > summary{ cursor:pointer; font-weight:600; min-height:32px; }
.pt-secfold{ border-radius:16px; border:2px solid var(--line); background:var(--paper); min-width:0; }
.pt-secfold > summary{ cursor:pointer; padding:10px 14px; font-weight:600; min-height:44px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pt-secfold > .pt-in{ display:flex; flex-direction:column; gap:12px; padding:0 12px 12px; }
.pt-sylist{ margin:6px 0 10px 1.1em; display:flex; flex-direction:column; gap:8px; }
.pt-sylist ul{ margin:4px 0 0 1.1em; display:flex; flex-direction:column; gap:3px; }
.pt-usyl .pt-words{ grid-template-columns:1fr; }

/* quiz */
.pt-quiz, .pt-cards{ display:flex; flex-direction:column; gap:12px; padding:16px 18px; border-radius:18px; background:var(--card); border:2px solid var(--line); max-width:760px; }
.pt-qhead{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; }
.pt-qq{ font-size:1.15rem; font-weight:600; }
.pt-opts{ display:flex; flex-direction:column; gap:8px; }
.pt-opt{ justify-content:flex-start; text-align:left; font-weight:500; }
.pt-opt[disabled]{ opacity:1; cursor:default; }
.pt-opt.pt-ok{ border-color:var(--ok); background:var(--ok-bg); }
.pt-opt.pt-bad{ border-color:var(--bad); background:var(--bad-bg); }
.pt-why{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.pt-qend{ display:flex; flex-direction:column; gap:8px; }
.pt-qend .big{ font-size:2rem; font-weight:700; }
.pt-pick{ display:inline-flex; gap:8px; align-items:center; font-size:0.92rem; }
.pt-pick select{ min-height:38px; max-width:min(320px,70vw); border-radius:10px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:inherit; padding:2px 8px; }
.row{ display:flex; flex-wrap:wrap; gap:8px; }

/* flashcards */
.pt-card{ display:flex; flex-direction:column; gap:10px; justify-content:center; min-height:180px; padding:18px; border-radius:16px; border:2px dashed var(--line); background:var(--paper); }
.pt-card.pt-flip{ border-style:solid; border-color:var(--accent); }
.pt-term{ font-size:1.5rem; font-weight:700; }
.pt-def{ font-size:1.08rem; }

/* search */
.pt-hits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:820px; }
.pt-hits a{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:10px 14px; border-radius:12px; border:2px solid var(--line); background:var(--card); text-decoration:none; color:inherit; }
.pt-hits a:hover, .pt-hits a:focus-visible{ border-color:var(--accent); }
.pt-hits small{ grid-column:2; }
.pt-hk{ grid-row:span 2; align-self:start; font-family:var(--f-mono); font-size:0.75rem; font-weight:700; padding:2px 8px; border-radius:99px; border:2px solid var(--line); }

@media (max-width:560px){
  .pt-search{ order:3; width:100%; }
  .pt-search input{ flex:1; width:auto; }
}
@media print{
  .pt-top, #settings, .pt-done, .pn, .pf{ display:none !important; }
}