/* ============================================================
   JuaraPKSK — /apa-itu-pksk guide page
   Loaded ONLY on the guide page, after styles.css. Reuses the brand
   tokens from styles.css (:root) — this file adds nothing global.

   Chart palette note: the raw brand colours fail categorical-accessibility
   checks as data colours (navy L=0.283 is below the 0.43–0.77 lightness band;
   navy & teal sit under the 0.10 OKLCH chroma floor and read grey). The three
   --c-* steps below are the brand HUES snapped to passing steps — validated
   for lightness band, chroma floor, protan/deutan/tritan separation,
   normal-vision separation and 3:1 contrast. Do not hand-edit them; re-run the
   dataviz validator if they must change.
   ============================================================ */

:root {
  --c-a:  #009794;   /* Bahagian A — brand teal hue (191.8°) */
  --c-b:  #AE8A0D;   /* Bahagian B — brand gold hue (89.7°)  */
  --c-c:  #4582CC;   /* Bahagian C — brand navy hue (254.4°) */
  --grid: #e6e9ed;   /* hairline, one shade off the surface  */
}

/* ---------- guide hero ---------- */
.ghero {
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 480px at 82% -10%, rgba(20,125,122,.5), transparent 60%),
    radial-gradient(820px 440px at 6% 110%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.ghero__in { padding: 62px 0 56px; }
.ghero__crumb { font-size: .86rem; color: #9fb3c8; margin-bottom: 20px; }
.ghero__crumb a { color: var(--teal-lt); font-weight: 600; }
.ghero__crumb span { margin: 0 8px; opacity: .5; }
.ghero h1 { font-size: clamp(1.95rem, 4.6vw, 3.1rem); color: #fff; max-width: 15ch; }
.ghero h1 .g { color: var(--gold-lt); }
.ghero__sub { font-size: 1.14rem; color: #cfdae6; max-width: 62ch; margin-bottom: 26px; }
.ghero__meta { display: flex; gap: 10px 26px; flex-wrap: wrap; font-size: .88rem; color: #a9bacd; }
.ghero__meta b { color: #fff; }

/* countdown strip */
.cd {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(255,255,255,.07); border: 1px solid rgba(240,193,75,.36);
  border-radius: var(--radius); padding: 16px 22px; margin: 0 0 28px;
}
.cd__n { font-size: 2.5rem; font-weight: 900; color: var(--gold-lt); line-height: 1; }
.cd__t { font-size: .95rem; color: #cfdae6; }
.cd__t b { color: #fff; }
.cd--closed { border-color: rgba(255,255,255,.2); }
.cd--closed .cd__n { font-size: 1.6rem; }

/* ---------- TL;DR key-facts card ---------- */
.tldr {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow);
  max-width: 900px; margin: -40px auto 0; position: relative; z-index: 2;
}
.tldr h2 { font-size: 1.2rem; color: var(--navy); margin-bottom: 16px; }
.tldr dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.tldr dt { font-weight: 800; color: var(--teal); font-size: .9rem; }
.tldr dd { margin: 0; color: var(--ink); font-size: .96rem; }

/* ---------- layout: sticky TOC + article ----------
   `min-width: 0` on the grid items is load-bearing, not defensive: grid items
   default to `min-width: auto`, so the article would refuse to shrink below the
   min-content width of its widest child (a table with min-width: 560px). On a
   420px phone that pushed the document to 727px wide — clipped by the body's
   overflow-x: hidden, so content was silently cut off. With min-width: 0 the
   article shrinks and .tblwrap's own overflow-x: auto scrolls the table. */
.glayout { display: grid; grid-template-columns: 244px 1fr; gap: 52px; align-items: start; }
.glayout > * { min-width: 0; }
.toc { position: sticky; top: 88px; font-size: .9rem; }
.toc h2 {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 2px; }
.toc a {
  display: block; padding: 7px 10px 7px 30px; border-radius: 8px; color: var(--ink-soft);
  font-weight: 600; position: relative; line-height: 1.35; transition: .14s;
}
.toc a::before {
  content: counter(toc); position: absolute; left: 9px; top: 7px;
  font-size: .72rem; font-weight: 800; color: var(--teal); opacity: .7;
}
.toc a:hover { background: var(--mist); color: var(--navy); }
.toc a.is-here { background: var(--navy); color: #fff; }
.toc a.is-here::before { color: var(--gold-lt); opacity: 1; }

/* ---------- article typography ---------- */
.garticle { max-width: 74ch; }
.garticle > section { padding-top: 14px; margin-bottom: 58px; scroll-margin-top: 88px; }
.garticle h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem); color: var(--navy);
  padding-bottom: 12px; border-bottom: 2px solid var(--line); margin-bottom: 22px;
}
.garticle h3 { font-size: 1.18rem; color: var(--navy); margin: 30px 0 10px; }
.garticle h4 { font-size: 1rem; color: var(--teal); margin: 22px 0 8px; }
.garticle p { color: #2b3a4d; font-size: 1.03rem; }
.garticle ul, .garticle ol { color: #2b3a4d; padding-left: 22px; margin: 0 0 1em; }
.garticle li { margin-bottom: 8px; }
.garticle strong { color: var(--navy); }
.garticle a:not(.btn) {
  color: var(--teal); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.garticle a:not(.btn):hover { color: var(--navy); }
.lede { font-size: 1.13rem; color: var(--ink-soft); }

/* evidence badges — carry the research grading onto the page */
.ev {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  vertical-align: middle; margin-left: 8px; white-space: nowrap;
}
.ev--official { background: #e7f5ec; color: #1a6b41; border: 1px solid #bfe3cd; }
.ev--corrob   { background: #eaf6f5; color: #0f625f; border: 1px solid #c6e6e3; }
.ev--assumed  { background: #fdf3e0; color: #8a6d10; border: 1px solid #f0dfb8; }

.evkey { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0 0 26px; font-size: .84rem; color: var(--ink-soft); }
.evkey span { display: inline-flex; align-items: center; }

/* ---------- tables ----------
   Wide tables scroll inside their own container so the page body never scrolls
   horizontally. Two details matter:
   - The caption is sticky-left, otherwise scrolling the container (or the
     browser auto-aligning an anchor) slides it out of view and clips its text.
   - On wide screens tables may exceed the 74ch text measure, since a 6-column
     table in a text column is unreadably cramped. */
.tblwrap { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
table.g {
  width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
table.g caption {
  caption-side: top; text-align: left; font-size: .86rem; color: var(--ink-soft);
  padding: 0 0 10px; font-weight: 600;
  position: sticky; left: 0; width: max-content; max-width: 100%;
}

/* On wide screens, tables and figures break out of the 74ch text measure into
   the slack to its right (~246px at 1536px). The widest table needs 705px and
   the measure is 638px, so without this it overflows and scrolls — and an
   anchor jump then scrolls it fully right, clipping the caption and first
   column. Extending removes the overflow instead of papering over it.
   The negative margin is what makes the extra width real rather than an
   overflow; without it the element just spills past its parent. */
@media (min-width: 1240px) {
  .tblwrap, figure.dia { width: calc(100% + 130px); margin-right: -130px; }
}
table.g th, table.g td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.g thead th { background: var(--navy); color: #fff; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
table.g tbody tr:last-child td { border-bottom: 0; }
table.g tbody tr:nth-child(even) { background: #fafbfc; }
table.g td b { color: var(--navy); }
table.g .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- figures ---------- */
figure.dia {
  margin: 0 0 26px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 20px; box-shadow: var(--shadow-sm);
}
figure.dia svg { width: 100%; height: auto; overflow: visible; }
figure.dia figcaption {
  font-size: .87rem; color: var(--ink-soft); margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
figure.dia figcaption b { color: var(--navy); }

/* ---------- D1 / D7: flow diagrams ---------- */
.flow { display: grid; gap: 12px; }
.flow__row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.flow__box {
  background: var(--mist); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 15px 16px; text-align: center;
}
.flow__box.is-a { background: #eaf6f5; border-color: #bfdedb; }
.flow__box.is-b { background: #fdf6e3; border-color: #ecd9a3; }
.flow__box.is-end { background: var(--navy); border-color: var(--navy); color: #fff; }
.flow__box .k { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 5px; }
.flow__box.is-b .k { color: #8a6d10; }
.flow__box.is-end .k { color: var(--gold-lt); }
.flow__box .n { display: block; font-weight: 800; color: var(--navy); font-size: 1rem; line-height: 1.25; }
.flow__box.is-end .n { color: #fff; }
.flow__box .m { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: 5px; }
.flow__box.is-end .m { color: #b9c6d6; }
.flow__arrow { display: grid; place-items: center; color: var(--teal); font-size: 1.3rem; font-weight: 900; }

.fork { display: grid; gap: 14px; }
.fork__root { background: var(--navy); color: #fff; border-radius: 12px; padding: 14px 18px; text-align: center; font-weight: 800; }
.fork__legs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fork__leg { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.fork__leg h4 { margin: 0; padding: 12px 16px; font-size: .95rem; color: #fff; background: var(--teal); }
.fork__leg:nth-child(2) h4 { background: var(--teal-dk); }
.fork__leg dl { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: .89rem; }
.fork__leg dt { color: var(--ink-soft); font-weight: 700; }
.fork__leg dd { margin: 0; color: var(--navy); font-weight: 600; }

/* ---------- D4: competency map ---------- */
.cmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cmap__col { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.cmap__col h4 { margin: 0; padding: 12px 15px; background: #eaf6f5; color: var(--teal-dk); font-size: .92rem; border-bottom: 1px solid #cfe7e5; }
.cmap__col h4 span { display: block; font-size: .74rem; font-weight: 600; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.cmap__chips { padding: 13px 15px; display: flex; flex-wrap: wrap; gap: 6px; }
.cmap__chips span { font-size: .8rem; background: var(--mist); color: var(--navy); border-radius: 999px; padding: 4px 11px; font-weight: 600; }

/* ---------- D5: timeline ---------- */
.tl { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.tl::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl li { position: relative; margin-bottom: 22px; }
.tl li::before {
  content: ""; position: absolute; left: -30px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--line);
}
.tl li.is-past::before { background: var(--teal); border-color: var(--teal); }
.tl li.is-next::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(201,162,39,.2); }
.tl__d { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); }
.tl__h { display: block; font-weight: 800; color: var(--navy); font-size: 1.02rem; margin: 2px 0 3px; }
.tl__p { display: block; font-size: .9rem; color: var(--ink-soft); }
.tl li.is-t4 .tl__d { color: var(--teal-dk); }
.tl__now {
  background: var(--navy); color: #fff; border-radius: 999px; padding: 5px 14px;
  font-size: .78rem; font-weight: 800; display: inline-block; letter-spacing: .06em; text-transform: uppercase;
}
.tl li.now::before { background: var(--navy); border-color: var(--navy); }

/* ---------- D6: essay structure ---------- */
.essay { display: grid; gap: 8px; }
.essay__b { display: grid; grid-template-columns: 128px 1fr auto; gap: 14px; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 15px; background: #fff; }
.essay__b .lbl { font-weight: 800; color: var(--navy); font-size: .92rem; }
.essay__b .txt { font-size: .88rem; color: var(--ink-soft); }
.essay__b .w { font-size: .8rem; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.essay__b.is-body { background: #fafbfc; border-left: 4px solid var(--teal); }
.essay__b.is-cap { border-left: 4px solid var(--gold); }

/* ---------- D8: stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; background: #fff; text-align: center; }
.tile b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900; color: var(--navy); line-height: 1.05; }
.tile.is-hero { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); border-color: var(--navy); }
.tile.is-hero b { color: var(--gold-lt); }
.tile.is-hero span { color: #b9c6d6; }
.tile span { font-size: .85rem; color: var(--ink-soft); font-weight: 600; display: block; margin-top: 6px; }

/* ---------- callouts ---------- */
.note {
  display: flex; gap: 14px; align-items: flex-start; border-radius: var(--radius-sm);
  padding: 16px 20px; margin: 0 0 22px; font-size: .96rem;
}
.note .ico { font-size: 1.25rem; line-height: 1.3; flex: 0 0 auto; }
.note p { margin: 0; }
.note--tip  { background: #eaf6f5; border: 1px solid #c6e6e3; color: #12454a; }
.note--warn { background: var(--cream); border: 1px solid #efe6cf; color: #6b5a1e; }
.note--fact { background: #f3f7fc; border: 1px solid #d6e3f2; color: #1d3a5c; }

/* honesty table: official vs assumed */
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.honest__c { border-radius: var(--radius-sm); padding: 18px 20px; }
.honest__c h4 { margin: 0 0 10px; font-size: .95rem; }
.honest__c ul { margin: 0; padding-left: 20px; font-size: .9rem; }
.honest__c li { margin-bottom: 7px; }
.honest__c.ok { background: #e7f5ec; border: 1px solid #bfe3cd; }
.honest__c.ok h4 { color: #1a6b41; }
.honest__c.as { background: #fdf3e0; border: 1px solid #f0dfb8; }
.honest__c.as h4 { color: #8a6d10; }

/* sample question card */
.qcard { border: 1.5px solid var(--line); border-left: 4px solid var(--teal); border-radius: 10px; padding: 18px 20px; margin: 0 0 18px; background: #fff; }
.qcard__tag { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.qcard__q { font-weight: 700; color: var(--navy); margin: 6px 0 12px; }
.qcard ol { margin: 0 0 12px; padding-left: 24px; font-size: .95rem; }
.qcard ol li { margin-bottom: 5px; }
.qcard__why { font-size: .9rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 11px; margin: 0; }
.qcard__why b { color: var(--teal-dk); }

/* mid-page + end CTA */
.gcta { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); color: #fff; border-radius: var(--radius); padding: 32px; margin: 0 0 26px; }
.gcta h3 { color: #fff; font-size: 1.35rem; }
.gcta p { color: #cfdae6; font-size: .98rem; }
.gcta__act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* sources */
.srcs { font-size: .9rem; }
.srcs li { margin-bottom: 10px; color: var(--ink-soft); }
.srcs b { color: var(--navy); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .glayout { grid-template-columns: 1fr; gap: 30px; }
  .toc {
    position: static; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; background: #fff;
  }
  .toc ol { columns: 2; column-gap: 24px; }
  .garticle { max-width: none; }
}
@media (max-width: 780px) {
  .flow__row { grid-template-columns: 1fr; }
  .flow__arrow { transform: rotate(90deg); padding: 2px 0; }
  .cmap, .honest, .fork__legs { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tldr { margin-top: 0; }
  .tldr dl { grid-template-columns: 1fr; gap: 4px 0; }
  .tldr dt { margin-top: 10px; }
  .essay__b { grid-template-columns: 1fr auto; }
  .essay__b .txt { grid-column: 1 / -1; }
  .toc ol { columns: 1; }
}