/* ==========================================================================
   report.css — styles for the generated course report and worksheets.
   Used by the app AND inlined into exported HTML files.
   ========================================================================== */
.rep {
  --ink: #1d2433;
  --ink-2: #5b6170;
  --ink-3: #8d909a;
  --accent: #0f5c8c;
  --accent-soft: #dbe8f0;
  --page: #f6f3ea;
  --paper: #fbf9f3;
  --wash: #efeadd;
  --line: #d9d2bf;
  --grid: rgba(23, 50, 77, .06);
  --s: #2f7d4a;
  --t: #1f63a8;
  --e: #c4561b;
  --m: #7a3fa0;
  --hi: #f2c14e;
  --bad: #b3261e;
  --ok: #2f7d4a;
  --r-sm: 8px;
  --r-md: 12px;
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  background: var(--page);
}
.rep *, .rep *::before, .rep *::after { box-sizing: border-box; }
.nw { white-space: nowrap; }
.rep { overflow-wrap: break-word; }
.rep :is(h1, h2, h3) { text-wrap: balance; }
.rep :is(p, li, td, dd) { text-wrap: pretty; }
.rep h1, .rep h2, .rep h3, .rep h4, .rep h5 {
  font-family: "Chakra Petch", "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
  line-height: 1.3;
  margin: 0 0 .5em;
  font-weight: 600;
  color: var(--ink);
}
.rep :where(p) { margin: 0 0 .75em; }
.rep :where(ul, ol) { margin: 0 0 .75em; padding-left: 1.3em; }
.rep :where(li) { margin: .2em 0; }
.rep a { color: var(--m); text-underline-offset: 3px; }
.rep a:focus-visible, .rep button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rep strong, .rep b { font-weight: 600; }
.rep small { font-size: .8em; }

/* ---------- buttons inside the report ---------- */
.rep .btn {
  display: inline-flex; align-items: center; gap: .4em;
  font: 600 .95rem/1.2 "Chakra Petch", "IBM Plex Sans Thai", sans-serif;
  padding: .75em 1.15em; border-radius: 10px;
  border: 1px solid var(--accent); color: var(--accent); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.rep .btn:hover { background: var(--wash); }
.rep .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rep .btn-primary:hover { background: #0a4266; }
.rep .btn-small { padding: .45em .85em; font-size: .88rem; }
.rep .btn-ghost {
  font: 600 .85rem/1.2 "Chakra Petch", sans-serif; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .45em .8em; cursor: pointer;
}
.rep .btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- hero ---------- */
.rep-hero {
  display: grid; background: var(--page) !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 5vw, 3.75rem) clamp(1rem, 4vw, 3rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hero-grade { font: 500 .92rem/1 "Chakra Petch", sans-serif; color: var(--accent); margin-bottom: 1.1rem; }
.rep-hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 700; letter-spacing: -.01em; max-width: 22ch; text-wrap: balance; }
.hero-sub { font-size: 1.15rem; color: var(--ink-2); max-width: 46ch; }
.hero-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.5rem 0; }
.hero-stats div { border-left: 1px solid var(--line); padding-left: .8rem; }
.hero-stats dt { font-size: .85rem; color: var(--ink-3); }
.hero-stats dd { margin: 0; font: 500 1.02rem/1.4 "Chakra Petch", sans-serif; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; }

.flow { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.25rem; }
.flow-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.flow-step {
  position: relative; display: grid; gap: .1rem;
  padding: .7rem .9rem .7rem 2.6rem; margin: 0;
  border-left: 1px solid var(--line);
  margin-left: 1rem;
}
.flow-n {
  position: absolute; left: -1.05rem; top: .65rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 .85rem/1 "Chakra Petch", sans-serif; color: var(--accent);
  background: var(--paper); border: 1px solid var(--accent);
}
.flow-step:last-child { border-left-color: transparent; }
.flow-label { font: 600 1rem/1.35 "Chakra Petch", sans-serif; }
.flow-detail { font-size: .92rem; color: var(--ink-2); }
.flow figcaption { font-size: .88rem; color: var(--ink-3); margin-top: .75rem; }

/* ---------- overview ---------- */
.rep-overview { padding: 2rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.ov-title { font-size: 1.2rem; font-weight: 600; }
.ov-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.ov-list a {
  background: var(--paper); display: flex; gap: .7rem; align-items: baseline; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  font-weight: 500;
}
.ov-list a:hover { border-color: #b9c3cc; background: var(--wash); }
.ov-no { font: 700 .85rem/1 "Chakra Petch", sans-serif; color: var(--ink-3); }

/* ---------- sections ---------- */
.rep-sec { padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); scroll-margin-top: 4.5rem; }
.sec-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
.sec-no {
  font: 700 1.05rem/1 "Chakra Petch", sans-serif; color: #fff; background: var(--accent);
  border-radius: 8px; padding: .5rem .55rem; min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums;
}
.sec-kicker { font: 500 .92rem/1.2 "Chakra Petch", sans-serif; color: var(--accent); margin: 0 0 .35rem; }
.sec-titles h2 { font-size: clamp(1.45rem, 2.7vw, 2rem); font-weight: 700; margin: 0; max-width: 40ch; text-wrap: balance; }
.sec-tools { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.sec-intro { color: var(--ink-2); max-width: 70ch; }
.block { margin-bottom: 1.5rem; }
.block h3 { font-size: 1.12rem; }
.block h4, .period h4 { font-size: 1rem; color: var(--ink-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.lead { font-size: 1.18rem; font-weight: 500; border-left: 2px solid var(--accent); padding-left: 1rem; }
.note { font-size: .9rem; color: var(--ink-3); }
.callout { background: var(--wash); padding: .9rem 1.1rem; border-radius: var(--r-sm); }
.callout.warn { background: #fdf6e3; color: #7a5a00; }
.chip { display: inline-block; font: 500 .85rem/1 "Chakra Petch", sans-serif; background: var(--accent-soft); color: #0a5f55; padding: .4rem .7rem; border-radius: 999px; }
.skills { list-style: none; padding: 0; }
.skills li { display: grid; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.skills li > span { color: var(--ink-2); font-size: .95rem; }
.eq li { margin-bottom: .45rem; }
.std { list-style: none; padding: 0; }
.std li { padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.code { font-family: "Chakra Petch", sans-serif; color: var(--m); margin-right: .25rem; }

/* tags */
.tag { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 5px; font: 600 .75rem/1 "Chakra Petch", sans-serif; color: #fff; margin-right: .2rem; }
.tag-s { background: var(--s); } .tag-t { background: var(--t); } .tag-e { background: var(--e); } .tag-m { background: var(--m); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.rep table { border-collapse: collapse; width: 100%; font-size: .97rem; }
.rep caption { text-align: left; font: 600 1rem/1.4 "Chakra Petch", sans-serif; padding: .75rem 1rem; caption-side: top; }
.rep th, .rep td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.rep thead th { background: var(--wash); font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: .92rem; border-top: 0; }
.rep tbody th { font-weight: 600; }
.kpa tbody th { width: 17%; }
.acts .min { white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.mats .num { white-space: nowrap; }
.rep tfoot th, .rep tfoot td { font-weight: 600; background: var(--wash); }

/* EDP */
.edp { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.edp-step { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem; position: relative; background: var(--paper); }
.edp-step:not(:nth-child(3n))::after {
  content: ""; position: absolute; right: -0.85rem; top: 1.6rem; width: .7rem; height: .7rem;
  border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); transform: rotate(45deg);
}
.edp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.edp-no { font: 700 1.7rem/1 "Chakra Petch", sans-serif; color: var(--accent); }
.edp-step h3 { font-size: 1.08rem; margin-bottom: .1rem; }
.edp-en { font-size: .85rem; color: var(--ink-3); }
.edp-focus { font-size: .9rem; color: var(--accent); font-weight: 500; margin: 0; }
.stem4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stem-card { border: 1px solid var(--line); border-top: 4px solid; border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 1.1rem; background: var(--paper); }
.stem-s { background: #e1efe4; } .stem-t { background: #dfe9f5; } .stem-e { background: #f7e3d6; } .stem-m { background: #ece1f3; }
.stem-card ul { font-size: .95rem; }
.stem-s { border-top-color: var(--s); } .stem-t { border-top-color: var(--t); } .stem-e { border-top-color: var(--e); } .stem-m { border-top-color: var(--m); }
.stem-letter { font: 600 2rem/1 "Chakra Petch", sans-serif; margin: 0 0 .25rem; }
.stem-s .stem-letter { color: var(--s); } .stem-t .stem-letter { color: var(--t); } .stem-e .stem-letter { color: var(--e); } .stem-m .stem-letter { color: var(--m); }
.stem-role { font-weight: 600; color: var(--ink-2); }

/* scenario */
.story h3 { font-size: 1.4rem; margin-top: .75rem; }
.rep blockquote { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--paper); border-left: 3px solid var(--accent); border-radius: var(--r-md); font-size: 1.1rem; }
.rep blockquote p { margin: 0 0 .4rem; }
.rep cite { font-style: normal; font-size: .9rem; color: var(--ink-3); }
.crit-title { font-size: 1.12rem; }
.criteria { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.criteria li { border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1rem; display: grid; gap: .15rem; margin: 0; background: var(--paper); }
.crit-val { font: 600 1.5rem/1.15 "Chakra Petch", sans-serif; color: var(--ink); }
.crit-val small { font-size: .55em; font-weight: 600; margin-left: .3rem; color: var(--ink-2); }
.crit-label { font-weight: 600; }
.crit-detail { font-size: .88rem; color: var(--ink-2); }
.safety { border: 1px solid #f0c9c4; background: #fdf6f5; border-radius: var(--r-md); padding: 1rem 1.1rem; margin-top: 1rem; }
.safety h3, .safety h4 { color: var(--bad); }

/* lesson plan */
.period-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.25rem; scrollbar-width: thin; }
.ptab { flex: 0 0 auto; max-width: 15rem; text-align: left; display: grid; gap: .1rem; padding: .6rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem; }
.ptab b { font-family: "Chakra Petch", sans-serif; }
.ptab span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptab.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ptab.is-on span { color: #d6e4ee; }
.period { display: none; }
.period.is-on { display: block; }
.period-head h3 { font-size: 1.35rem; margin-bottom: .1rem; }
.period-meta { color: var(--accent); font-weight: 500; }

/* lab */
.sim-frame-wrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.sim-frame { display: block; width: 100%; height: 760px; border: 0; }
.sim-model { margin: 1rem 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem 1rem; }
.sim-model summary { cursor: pointer; font-weight: 600; }
.sim-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1.5rem; margin: .75rem 0; }
.sim-vars dt { font-weight: 600; } .sim-vars dd { margin: 0; color: var(--ink-2); font-size: .93rem; }

/* worksheet cards */
.ws-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ws-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem; margin: 0; display: flex; flex-direction: column; }
.ws-no { font: 500 .88rem/1 "Chakra Petch", sans-serif; color: var(--accent); margin-bottom: .4rem; }
.ws-card h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.ws-step { font-size: .88rem; color: var(--ink-3); }
.ws-parts { font-size: .92rem; color: var(--ink-2); }
.ws-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .75rem; }
.ws-all { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

/* assessment */
.rubric th.lv { min-width: 9rem; }
.rubric thead .lv-4 { box-shadow: inset 0 -4px 0 var(--ok); }
.rubric thead .lv-3 { box-shadow: inset 0 -4px 0 var(--s); }
.rubric thead .lv-2 { box-shadow: inset 0 -4px 0 var(--hi); }
.rubric thead .lv-1 { box-shadow: inset 0 -4px 0 var(--bad); }
.rubric tbody th small { display: block; font-weight: 400; color: var(--ink-3); }
.scoring { background: var(--wash); padding: .8rem 1rem; border-radius: var(--r-sm); }

/* guide */
.miscon { margin: 0; display: grid; gap: .75rem; }
.miscon div { border-left: 4px solid var(--e); padding: .2rem 0 .2rem 1rem; }
.miscon dt { font-weight: 600; } .miscon dd { margin: .2rem 0 0; color: var(--ink-2); }
.refs li { margin-bottom: .4rem; }

/* sources / fact-check */
.fc-head { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.conf { justify-self: start; font: 600 .9rem/1 "Chakra Petch", sans-serif; padding: .5rem .8rem; border-radius: 999px; color: #fff; }
.conf-high { background: var(--ok); } .conf-mid { background: var(--e); } .conf-low { background: var(--bad); }
.facts li { margin-bottom: .5rem; }
.sref { font-size: .82rem; font-weight: 600; text-decoration: none; margin-left: .15rem; }
.issues { list-style: none; padding: 0; }
.issues li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem 1rem; margin-bottom: .6rem; }
.issues b { display: block; color: var(--e); }
.fix { display: block; color: var(--ok); font-size: .95rem; margin-top: .25rem; }
.sources { font-size: .95rem; word-break: break-word; }
.research { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem 1rem; }
.research summary { cursor: pointer; font-weight: 600; }
.md h4 { margin-top: 1.25rem; font-size: 1.08rem; }
.md h5 { font-size: 1rem; }
.rep-foot { padding: 2rem clamp(1rem, 4vw, 3rem); font-size: .88rem; color: var(--ink-3); }

/* pending / errors */
.pending { background: var(--paper); display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--ink-2); }
.pending p { margin: 0; }
.pending.is-error { border-color: var(--bad); color: var(--bad); justify-content: space-between; flex-wrap: wrap; }
.spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--s); animation: rep-spin .9s linear infinite; flex: none; }
@keyframes rep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ==========================================================================
   Worksheet sheet (A4)
   ========================================================================== */
.ws-sheet { background: #fff; color: #111d2b; font-family: "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif; font-size: 15.5px; line-height: 1.6; padding: 14mm 15mm; max-width: 210mm; margin: 0 auto; }
.ws-sheet h2 { font-family: "Chakra Petch", "IBM Plex Sans Thai", sans-serif; font-size: 21px; margin: 0 0 2px; }
.ws-sheet h3 { font-family: "Chakra Petch", "IBM Plex Sans Thai", sans-serif; font-size: 16.5px; margin: 0 0 6px; }
.wh { display: flex; justify-content: space-between; gap: 12mm; border-bottom: 2px solid #111d2b; padding-bottom: 4mm; margin-bottom: 5mm; }
.wh-unit { font-size: 12.5px; color: #4a5d70; margin: 0 0 2px; }
.wh-meta { font-size: 13px; color: #4a5d70; margin: 0; }
.wh-id { display: grid; gap: 3px; min-width: 62mm; font-size: 13px; align-content: end; }
.wi { background: #f2f6f4; padding: 3mm 4mm; border-radius: 4px; }
.wpart { margin: 0 0 6mm; break-inside: avoid; page-break-inside: avoid; }
.wp { margin: 0 0 3mm; }
.wq { padding-left: 6mm; margin: 0; }
.wq li { margin-bottom: 3mm; }
.wl { display: block; border-bottom: 1px solid #9aa9b6; height: 8.5mm; }
.wt { width: 100%; border-collapse: collapse; font-size: 14px; }
.ws-sheet .wt th, .ws-sheet .wt td { border: 1px solid #7d8d9b; padding: 2mm 2.5mm; height: 10mm; text-align: left; vertical-align: top; }
.ws-sheet .wt th { background: #eef2f4; }
.wd { border: 1.5px dashed #7d8d9b; border-radius: 4px; height: 85mm; }
.wc { list-style: none; padding: 0; margin: 0; }
.wc li { display: flex; gap: 3mm; align-items: flex-start; margin-bottom: 2mm; }
.box { flex: none; width: 4.5mm; height: 4.5mm; border: 1.5px solid #111d2b; border-radius: 1px; margin-top: 1.2mm; }
.wf { font-family: "Chakra Petch", sans-serif; font-weight: 600; background: #fdf6e3; border-left: 3px solid #f2c14e; padding: 2mm 3mm; display: inline-block; }
.ws-sheet.key { background: #fbfcfd; }
.ws-export .ws-sheet-wrap { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 1.25rem 0; overflow-x: auto; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .rep-hero, .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .edp { grid-template-columns: 1fr 1fr; }
  .edp-step::after { display: none; }
  .stem4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rep { font-size: 1rem; }
  .grid-3, .edp, .stem4, .ws-grid { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: auto 1fr; }
  .sec-tools { grid-column: 1 / -1; justify-content: flex-start; }
  .sim-frame { height: 900px; }
  .ws-sheet { padding: 6mm; font-size: 14.5px; }
  .wh { flex-direction: column; gap: 3mm; }
}

/* ==========================================================================
   Card layout (matches the reference kit: each part sits in its own panel)
   ========================================================================== */
.sec-head { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.75rem; }
.sec-kicker { font: 600 .9rem/1.2 "Chakra Petch", sans-serif; color: var(--accent); margin: 0 0 .45rem; letter-spacing: .01em; }
.sec-titles h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; max-width: 26ch; }
.sec-titles .sec-intro { margin: .75rem 0 0; font-size: 1.02rem; }

.panel, .rep .block {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.25rem 1.4rem; margin-bottom: 1.25rem;
}
.rep .block > :last-child, .panel > :last-child { margin-bottom: 0; }
.panel-lg { padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.75rem; }
.panel-title, .rep .block > h3, .rep .block > h4 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .85rem; color: var(--ink); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: .9rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--ink); }
.panel-head .panel-title { margin: 0; font-size: 1.2rem; }
.grid-2 > .panel, .grid-2 > .block, .grid-3 > .block { margin-bottom: 0; }
.grid-2, .grid-3 { margin-bottom: 1.25rem; gap: 1.25rem; }
.table-wrap.flat { border: 0; border-radius: 0; margin: 0; background: none; }
.table-wrap.flat thead th { background: none; border-bottom: 1px solid var(--line); color: var(--ink-2); }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; font-size: .88rem; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: .4rem; margin: 0; }
.legend li::before { content: ""; width: .75rem; height: .75rem; border-radius: 3px; }
.lg-s::before { background: var(--s); } .lg-t::before { background: var(--t); } .lg-e::before { background: var(--e); } .lg-m::before { background: var(--m); }

/* big idea callout */
.big-idea { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 12px; padding: 1.1rem 1.5rem 1.25rem; margin-bottom: 1.25rem; }
.bi-label { font: 600 1rem/1.3 "Chakra Petch", sans-serif; color: var(--accent); margin: 0 0 .35rem; }
.bi-text { font: 600 clamp(1.1rem, 2vw, 1.35rem)/1.55 "IBM Plex Sans Thai", sans-serif; color: var(--ink); margin: 0; }
.skills li { padding: .5rem 0; }
.skills li:last-child { border-bottom: 0; }
.kpa tbody th { width: 22%; white-space: normal; }
.kpa tbody th .tag { margin-right: .35rem; }

/* EDP cards */
.edp { gap: 1rem; margin-bottom: 1.25rem; }
.edp-step { display: flex; flex-direction: column; background: #f6f3ea; border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem 1.2rem; }
.edp-step::after { display: none; }
.edp-no { font: 700 2.6rem/1 "Chakra Petch", sans-serif; color: var(--accent); margin-bottom: .6rem; }
.edp-step h4 { font-size: 1.08rem; margin: 0 0 .1rem; color: var(--ink); }
.edp-en { font-size: .82rem; color: var(--ink-3); margin-bottom: .7rem; }
.edp-desc { color: var(--ink-2); font-size: .97rem; }
.edp-foot { margin-top: auto; padding-top: .5rem; }
.edp-tags { display: flex; gap: .3rem; margin-bottom: .55rem; }
.edp-foot .edp-focus { border-top: 1px dashed var(--line-strong, #b9b09a); padding-top: .55rem; font-size: .86rem; color: var(--ink-2); font-weight: 400; }
.stem4 { gap: 1rem; }

/* scenario, plan, guide as panels */
.scen .story { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.5rem; }
.periods { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem clamp(1rem, 3vw, 1.75rem); }
.periods .block { background: #f6f3ea; }
.period-tabs { margin-bottom: 1rem; }
.miscon div { background: #f6f3ea; border-radius: 0 8px 8px 0; padding: .6rem .9rem; }

/* hero with illustration */
.rep-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero-grade { font: 600 .9rem/1.4 "Chakra Petch", sans-serif; }
.rep-hero h1 { max-width: 18ch; }
.hero-sub { font-size: 1.08rem; max-width: 52ch; }
.hero-chips { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-chips li { margin: 0; font-size: .9rem; background: var(--paper); border: 1px solid #b9b09a; border-radius: 999px; padding: .3rem .8rem; }
.hero-art { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.25rem 1rem; box-shadow: 0 12px 30px -18px rgba(29, 36, 51, .35); }
.hero-svg > svg, .hero-svg > img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: 8px; }
.hero-art figcaption { border-top: 1px dashed #b9b09a; margin-top: 1rem; padding-top: .8rem; font-size: .9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-start; justify-content: space-between; }
.hero-art figcaption .regen { flex: none; }
.hero-art .cap-text { flex: 1 1 16rem; min-width: 0; }
.hero-art, .hero-text { min-width: 0; }

/* compact cover: fits one screen */
.rep-hero { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); gap: clamp(1.5rem, 3.5vw, 3rem); }
.rep-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); max-width: 22ch; line-height: 1.22; margin-bottom: .6rem; }
.rep-hero h1.h1-l { font-size: clamp(1.6rem, 2.7vw, 2.2rem); max-width: 26ch; }
.rep-hero h1.h1-xl { font-size: clamp(1.45rem, 2.2vw, 1.85rem); max-width: 30ch; }
.hero-grade { margin-bottom: .6rem; font-size: .85rem; }
.hero-sub { font-size: 1rem; margin-bottom: 0; }
.hero-chips { margin: 1rem 0 1.15rem; gap: .35rem; }
.hero-chips li { font-size: .84rem; padding: .22rem .7rem; }
.rep-hero .btn { padding: .65em 1.05em; font-size: .9rem; }
.hero-art { padding: 1rem 1rem .85rem; }
.hero-svg > svg, .hero-svg > img { max-height: min(400px, 52vh); }
.hero-art figcaption { margin-top: .75rem; padding-top: .65rem; font-size: .84rem; }

@media (max-width: 900px) {
  .rep-hero { grid-template-columns: minmax(0, 1fr); }
  .sec-titles h2 { max-width: none; }
}
@media (max-width: 600px) {
  .sec-head { grid-template-columns: 1fr; }
  .panel, .rep .block { padding: 1rem; }
  .edp-no { font-size: 2.1rem; }
}

/* table of contents: the on-screen nav bar covers this, so print only */
.print-only { display: none; }

/* ---------- print ---------- */
@media print {
  .print-only { display: block; }
  @page { size: A4; margin: 12mm; }
  .rep { font-size: 11.5pt; }
  .rep-hero { background: none; }
  .btn, .btn-ghost, .regen, .sec-tools, .ws-actions, .ws-all, .period-tabs { display: none !important; }
  .period { display: block !important; break-inside: avoid-page; margin-bottom: 8mm; }
  .rep-sec { break-before: page; border: 0; }
  .sim-frame-wrap { display: none; }
  .panel, .rep .block, .edp-step, .hero-art { break-inside: avoid; box-shadow: none; }
  details { display: block; } details > * { display: block; }
  .ws-export .ws-sheet-wrap { border: 0; break-before: page; }
  .ws-sheet { padding: 0; max-width: none; }
  a { color: inherit; }
}