/* =========================================================
   Revision notes — shared styles
   Used by every notes section under /resources/:
     /resources/ib-dp/physics/    (IB DP Physics)
     /resources/ib-myp/physics/   (IB MYP Physics / Sciences)
   Extends the neo-brutalist language in /style.css: same
   tokens, same hard offset shadows, same type stack.
   These sections are English-only (IB is examined in English),
   so no data-en/data-id pairs are used on their pages.
   Edit here, not per-section -- there is only one copy.
   ========================================================= */

/* ── Shell: sticky topic rail + article ─────────────────── */
.pw-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
/* A grid item's automatic minimum size is its MIN-CONTENT width, so one wide
   child (an 880px diagram, a long inline equation) blows the whole column out
   past the viewport. The page then scrolls sideways while the ink navbar and
   footer -- ordinary blocks, so only ever as wide as the viewport -- stop
   short of the content, which is what "the header does not fill the screen
   when I zoom out" looks like. minmax(0, ...) + min-width: 0 opt out of that
   minimum so the column can never exceed its container. */
.pw-rail, .pw-article { min-width: 0; }

/* ── Topic rail ─────────────────────────────────────────── */
.pw-rail {
  position: sticky; top: 84px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
  scrollbar-width: thin;
}
.pw-rail-title {
  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 2px solid var(--border-soft);
}
.pw-rail-group { margin-bottom: 18px; }
.pw-rail-group:last-child { margin-bottom: 0; }
.pw-rail-group > h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 7px;
}
.pw-rail a {
  display: block; padding: 6px 9px; margin-bottom: 2px;
  font-size: .84rem; line-height: 1.35;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
.pw-rail a:hover { background: var(--surface-2); }
.pw-rail a.current {
  background: var(--gold-soft);
  border-color: var(--ink);
  font-weight: 700;
}
.pw-rail a .hl {
  font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-deep); vertical-align: 1px; margin-left: 4px;
}

/* Planned page, not written yet — same box as a rail link, but inert */
.pw-rail-soon {
  display: block; padding: 6px 9px; margin-bottom: 2px;
  font-size: .84rem; line-height: 1.35; color: var(--text-muted);
  border: 2px solid transparent;
}
.pw-rail-soon em {
  font-style: normal; font-size: .64rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-left: 4px;
}

/* Mobile: the rail becomes a disclosure above the article */
.pw-rail-toggle { display: none; }

/* ── Article ────────────────────────────────────────────── */
.pw-article { max-width: 74ch; }
.pw-crumbs {
  font-size: .78rem; color: var(--text-muted);
  margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px;
}
.pw-crumbs a { border-bottom: 1px solid var(--border-soft); }
.pw-crumbs a:hover { color: var(--text); border-bottom-color: var(--ink); }

/* Topic masthead */
.pw-masthead {
  border-bottom: var(--bw) solid var(--ink);
  padding-bottom: 22px; margin-bottom: 30px;
}
.pw-code {
  display: inline-block; margin-bottom: 12px;
  background: var(--ink); color: #fff;
  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
  font-size: .82rem; letter-spacing: .04em;
  padding: 5px 12px; border-radius: var(--radius-sm);
}
.pw-masthead h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.pw-meta { font-size: .84rem; color: var(--text-muted); font-weight: 500; }
.pw-lede {
  margin-top: 18px; padding: 16px 20px;
  background: var(--surface-2);
  border-left: var(--bw) solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .95rem;
}

/* Section headings inside the article */
.pw-article h2 {
  font-size: 1.28rem; margin: 42px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.pw-article h2 .ic { font-size: 1.3rem; }
.pw-article h3 { font-size: 1.02rem; margin: 26px 0 10px; }
.pw-article p { margin-bottom: 15px; }
.pw-article strong { font-weight: 700; }
/* <em> is used for the phrases the source italicises for emphasis —
   rendered as a highlight, not a slant, to match the brand. */
.pw-article em {
  font-style: normal; font-weight: 700;
  background: var(--gold-soft); padding: 0 3px; border-radius: 3px;
}

/* ── Blocks ─────────────────────────────────────────────── */
.pw-box {
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
  margin: 0 0 20px;
}
.pw-box > h2:first-child, .pw-box > h3:first-child { margin-top: 0; }

.pw-objectives { background: var(--gold-soft); }
.pw-objectives ul { list-style: none; margin-left: 0; }
.pw-objectives li {
  position: relative; padding-left: 30px; margin-bottom: 10px; font-size: .94rem;
}
.pw-objectives li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  font-weight: 700; color: var(--gold-deep); font-size: 1.05rem;
}
.pw-objectives li:last-child { margin-bottom: 0; }
.hl-tag {
  display: inline-block; background: var(--ink); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 2px;
}

.pw-worked   { background: var(--surface); }
.pw-see      { background: var(--accent-soft); }
.pw-practise { background: var(--surface-2); }

/* Worked-example question stem */
.pw-question {
  background: var(--surface-2);
  border-left: var(--bw) solid var(--accent);
  padding: 14px 18px; margin-bottom: 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .94rem;
}

/* The named mistake that ends most worked examples */
.pw-trap {
  background: #FFF1F1;
  border: 2px solid #B91C1C;
  border-radius: var(--radius-sm);
  padding: 14px 18px; margin-top: 18px;
  font-size: .92rem;
}
.pw-trap > strong:first-child { color: #B91C1C; }

/* Sanity-check / "what to notice" closer */
.pw-check {
  background: #F0FAF3;
  border: 2px solid #15803D;
  border-radius: var(--radius-sm);
  padding: 14px 18px; margin-top: 18px;
  font-size: .92rem;
}
.pw-check > strong:first-child { color: #15803D; }

/* Equations ------------------------------------------------ */
.pw-eq {
  background: var(--surface-2);
  border: 2px solid var(--border-soft);
  border-left: var(--bw) solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 20px; margin: 18px 0;
  overflow-x: auto;          /* long expressions scroll, the page never does */
  text-align: center;
}
.pw-eq .eqname {
  display: block; font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
/* MathJax containers must not force the page wide */
mjx-container { max-width: 100%; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* An INLINE expression cannot wrap (MathJax v3 never line-breaks inline maths),
   so a long substitution line inside a paragraph can still be wider than a
   phone screen. notes.js measures them after typesetting and tags only the
   ones that do not fit, which then scroll by themselves. It is deliberately
   not applied to every inline container: `overflow` other than `visible`
   makes an inline-block take its baseline from its bottom margin edge, which
   would lift every small formula off the text baseline. */
mjx-container.pw-mj-fit {
  display: inline-block; max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  vertical-align: bottom;
}

/* Formula list (several related equations side by side) */
.pw-eqrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px; margin: 18px 0;
}
.pw-eqrow > div {
  background: var(--surface-2); border: 2px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 10px; text-align: center;
  overflow-x: auto;
}

/* Formula reference (the two formula-booklet pages) ---------
   A booklet entry is three things: the syllabus code it sits under, what the
   formula is called, and the formula itself -- and one code usually covers
   several formulas, which is what the merged cells in the official booklet
   mean. Built from a grid (code | entries) whose rows are flex, not from a
   <table>: notes.css styles no tables and no other notes page uses one, and a
   table cannot collapse to a single column on a phone. Every formula scrolls
   inside its own cell, so none of them widens the document
   (tools/check-mobile-width.mjs). */
.pw-fb {
  margin: 16px 0 28px;
  background: var(--surface);
  border: 2px solid var(--border-soft); border-radius: var(--radius-sm);
  overflow: hidden;
}
.pw-fb-group { display: grid; grid-template-columns: 82px minmax(0, 1fr); }
.pw-fb-group + .pw-fb-group { border-top: 2px solid var(--border-soft); }
.pw-fb-code {
  padding: 12px 8px 12px 12px;
  background: var(--gold-soft); border-right: 2px solid var(--border-soft);
  font-size: .74rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .04em; color: var(--gold-deep);
}
/* Name beside formula -- but a formula wider than the space left for it wraps
   onto its own full-width line instead of scrolling in a narrow column. That
   is what flex-wrap with an `auto` basis buys: the formula's own width decides,
   not a fixed ratio, so short entries stay in two tidy columns and the vector
   products and Bayes' theorem get the whole row. */
.pw-fb-item { display: flex; flex-wrap: wrap; align-items: center; }
.pw-fb-item + .pw-fb-item { border-top: 1px dashed var(--border-soft); }
/* The name never grows, so on any row that did not wrap the formula column
   starts at the same place all the way down the list. */
.pw-fb-name { flex: 0 1 42%; min-width: 190px; padding: 11px 14px; font-size: .88rem; font-weight: 600; }
/* A continuation row (the booklet's merged name cell) keeps the 42% spacer so
   the formula stays in its column, but collapses to nothing if it wraps. */
.pw-fb-name-empty { padding: 0; }
.pw-fb-eq {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  padding: 11px 14px; overflow-x: auto;
  background: var(--surface-2);
}
/* Booklet formulas are set as DISPLAY maths: fractions, integrals and column
   vectors then come out full size, and MathJax gives each container its own
   horizontal scroll instead of stretching the row. Its default block margin
   would be far too airy in a dense list, hence the reset. */
.pw-fb-eq mjx-container[display="true"] { margin: 0 !important; text-align: left; }
/* Our own note on an entry -- never part of the booklet, so it is visually
   subordinate to the formula and spans the full width of the row. */
.pw-fb-note {
  flex: 1 1 100%; padding: 8px 14px 11px;
  font-size: .82rem; line-height: 1.5; color: var(--text-muted);
}
.pw-fb-note strong { color: var(--text); }
/* The booklet's own "where ..." gloss, under the formula it belongs to. */
.pw-fb-where {
  display: block; margin-top: 5px;
  font-size: .8rem; line-height: 1.45; color: var(--text-muted); text-align: left;
}
/* "SL and HL" / "HL only" qualifier on a section heading. */
.pw-fb-level { font-family: 'Space Grotesk', sans-serif; font-size: .8rem; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
/* A sub-heading row inside a group (the booklet's own "Sample statistics"). */
.pw-fb-sub {
  flex: 1 1 100%; padding: 9px 14px 0;
  font-size: .78rem; font-weight: 700; font-style: italic; color: var(--text-muted);
}

/* Diagrams --------------------------------------------------
   SVG diagrams carry their own internal colour coding (e.g. distance vs.
   displacement in blue/red) and are NOT restyled to brand tokens.
   Deliberately borderless/unshadowed -- unlike .pw-box, a diagram should
   sit flush with the surrounding prose, not read as a separate card. */
.pw-fig { margin: 22px 0; }
.pw-fig img, .pw-fig svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.pw-fig figcaption {
  margin-top: 10px; font-size: .84rem; color: var(--text-muted); text-align: center;
}

/* Interactive unit circle (resources/unit-circle.js) -------- */
/* A .pw-fig like any diagram, so it sits flush with the prose; the JS
   builds .pw-uc-stage (SVG + read-out) inside it. Two columns when there
   is room, stacked on narrow screens. */
.pw-uc-stage {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 18px 24px; align-items: center;
}
.pw-uc .pw-uc-svg {
  background: var(--surface); border: 1.5px solid var(--border-soft);
  touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none;
}
.pw-uc .pw-uc-handle { cursor: grab; }
.pw-uc-vals {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px;
  margin: 0 0 10px; font-variant-numeric: tabular-nums;
}
.pw-uc-vals dt { font-weight: 700; white-space: nowrap; }
.pw-uc-vals dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.pw-uc-note { font-size: .84rem; color: var(--text-muted); margin: 0 0 6px; }
.pw-uc-ctl { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.pw-uc-btn {
  flex: 0 0 auto; font: 700 .85rem 'Space Grotesk', sans-serif; color: var(--ink);
  background: var(--gold); border: 2px solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--ink); padding: 7px 14px; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.pw-uc-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.pw-uc-btn:focus-visible, .pw-uc-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-uc-range { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
@media (max-width: 760px) {
  .pw-uc-stage { grid-template-columns: minmax(0, 1fr); }
}

/* Lists ---------------------------------------------------- */
.pw-article ul, .pw-article ol { margin: 0 0 16px 20px; }
.pw-article li { margin-bottom: 8px; }
.pw-list-plain { list-style: none; margin-left: 0 !important; }
.pw-list-plain > li {
  border-left: 2px solid var(--border-soft);
  padding-left: 14px; margin-bottom: 12px;
}

/* Practice questions with revealable answers */
.pw-q { margin-bottom: 12px; font-size: .94rem; }
.pw-q > summary {
  cursor: pointer; font-weight: 600; list-style: none;
  padding: 11px 14px; background: var(--surface);
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
}
.pw-q > summary::-webkit-details-marker { display: none; }
.pw-q > summary::before { content: "\25B8  "; color: var(--accent); font-weight: 700; }
.pw-q[open] > summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.pw-q[open] > summary::before { content: "\25BE  "; }
.pw-q .ans {
  border: 2px solid var(--ink); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 14px; background: var(--bg); font-size: .9rem;
}
.pw-q .ans p:last-child { margin-bottom: 0; }

/* Placeholder for material that is not live yet */

/* Other people's resources — deliberately visually separated */
.pw-external {
  border: 2px dashed var(--ink); box-shadow: none;
  background: transparent;
}
/* Kurikulum Nasional (resources/sma/*): links from a materi page to the TKA
   practice questions that test it, and the "Capaian Pembelajaran" summary. */
.pw-tka { background: var(--accent-soft, #E8EEFF); }
.pw-tka-list { list-style: none; margin-left: 0; }
.pw-tka-list li { padding-left: 22px; position: relative; font-size: .92rem; margin-bottom: 8px; overflow-wrap: anywhere; }
.pw-tka-list li::before { content: "\270E"; position: absolute; left: 0; color: var(--accent-dark); }
.pw-tka-type { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; padding: 0 5px; margin-right: 2px; }
.pw-cp { background: var(--surface-2); border-style: dashed; }
.pw-cp p:last-child { margin-bottom: 0; }
/* CJK runs in the Indonesian language notes (Jepang, Mandarin): a touch larger
   and roomier, with a CJK-capable font stack ahead of the body font. */
.cjk { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK", sans-serif;
       font-size: 1.12em; line-height: 1.85; }
.pw-voc { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.pw-voc th, .pw-voc td { border: 1.5px solid var(--bw, var(--ink)); padding: 6px 10px; text-align: left; vertical-align: top; }
.pw-voc th { background: var(--surface-2); }
.pw-voc .cjk { white-space: nowrap; }
.pw-external .disclaimer { font-size: .84rem; color: var(--text-muted); margin-bottom: 14px; }
.pw-external ul { list-style: none; margin-left: 0; }
.pw-external li { padding-left: 22px; position: relative; font-size: .92rem; }
.pw-external li::before { content: "\2197"; position: absolute; left: 0; color: var(--text-muted); }

/* ── Prev / next ────────────────────────────────────────── */
.pw-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 46px; padding-top: 28px;
  border-top: var(--bw) solid var(--ink);
}
.pw-pager a {
  border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--surface);
  padding: 16px 18px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pw-pager a:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.pw-pager .dir {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px;
}
.pw-pager .ttl { font-weight: 700; font-size: .94rem; }
.pw-pager a.next { text-align: right; }
.pw-pager .spacer { border: none; box-shadow: none; background: none; }

/* ── Hub (index) ────────────────────────────────────────── */
.pw-theme {
  border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--surface);
  padding: 26px 28px; margin-bottom: 26px;
}
.pw-theme-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pw-theme-letter {
  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
  font-size: 1.4rem; background: var(--gold); color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: var(--radius-sm);
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
}
.pw-theme-head h3 { font-size: 1.15rem; margin: 0; }
.pw-theme > p { font-size: .9rem; color: var(--text-muted); margin: 0 0 18px 56px; }
.pw-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.pw-topic {
  display: block; background: var(--bg);
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.pw-topic:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); background: var(--gold-soft); }
.pw-topic .num {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; color: var(--gold-deep); margin-bottom: 3px;
}
.pw-topic .name { font-size: .93rem; font-weight: 600; line-height: 1.3; }
.pw-topic .hl { font-size: .64rem; font-weight: 700; color: var(--accent-dark); letter-spacing: .04em; }
/* A planned page that is not written yet: listed so the map is complete,
   but not a link (every committed href must resolve). */
.pw-topic.pw-topic-soon { border-style: dashed; color: var(--text-muted); }
.pw-topic.pw-topic-soon:hover { transform: none; box-shadow: none; background: var(--bg); }
.pw-topic.pw-topic-soon .num { color: var(--text-muted); }

.pw-intro-card {
  background: var(--ink); color: #fff;
  border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--gold);
  padding: 30px 32px; margin-bottom: 34px;
}
.pw-intro-card h2 { color: #fff; font-size: 1.35rem; margin-bottom: 12px; }
.pw-intro-card p { color: #C8CEDE; font-size: .95rem; margin-bottom: 12px; }
.pw-intro-card p:last-child { margin-bottom: 0; }
.pw-intro-card a { color: var(--gold); border-bottom: 1px solid var(--gold); }

.pw-badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pw-badge {
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: 999px; padding: 5px 14px; font-size: .78rem; font-weight: 600;
  /* MUST set an explicit colour: these pills sit inside .pw-intro-card, which
     sets `color: #fff` for its dark ground. Without this the white text lands
     on the white pill and the labels vanish. */
  color: var(--ink);
}

/* ── Header links (visible on mobile — .nav-links is hidden ≤640px) ── */
.pw-nav-link { font-size: .85rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.pw-nav-link:hover { color: var(--text); }

/* ── Footer link row (sits inside the shared .footer-bottom strip) ── */
.pw-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.pw-foot-links a { font-size: .82rem; color: #AEB6CB; transition: color .15s; }
.pw-foot-links a:hover { color: #FFFFFF; }

/* ── Worksheets (IB MYP Sciences) ───────────────────────── */
/* A worksheet is a notes page whose article is a printable question sheet:
   ruled answer lines, graph grids and a mark scheme that stays folded on
   screen and is printed only by the "Print with mark scheme" button (notes.js
   adds body.ws-print-answers for the duration of that print). */
.pw-ws-jump { margin-top: 12px; font-size: .9rem; font-weight: 700; }
.pw-ws-jump a { border-bottom: 2px solid var(--gold); }
.pw-ws-box { background: var(--gold-soft); }
.pw-ws-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; font-size: .8rem; color: var(--text-muted); font-weight: 600;
}
.pw-ws-row a {
  border: 2px solid var(--ink); border-radius: 999px; padding: 3px 11px;
  background: var(--surface); color: var(--ink); font-weight: 700;
  transition: background .12s;
}
.pw-ws-row a:hover { background: var(--gold-soft); }

.ws-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.ws-actions .btn { font-size: .88rem; padding: 10px 16px; }
.pw-ws-box .btn, .ws-actions .btn { white-space: normal; text-align: center; }
.ws-namebar {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px;
  margin-bottom: 22px; font-size: .82rem; font-weight: 700; color: var(--text-muted);
}
.ws-namebar span { border-bottom: 2px solid var(--ink); padding-bottom: 20px; }
.ws-part { margin-top: 34px; }
.ws-part h2 { margin-top: 0 !important; }
.ws-crit {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border: var(--bw) solid var(--ink); border-radius: var(--radius-sm);
  background: var(--gold); font-family: 'Archivo Black', 'Space Grotesk', sans-serif; font-size: 1rem;
}
.ws-part-note { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin: -8px 0 16px; }
.ws-q { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; margin-bottom: 18px; font-size: .95rem; break-inside: avoid; }
.ws-sub { margin-left: 34px; grid-template-columns: 34px minmax(0, 1fr); }
.ws-num { font-weight: 800; }
.ws-num-sub { font-weight: 700; color: var(--text-muted); }
.ws-body p { margin-bottom: 8px; }
.ws-body ul, .ws-body ol { margin-bottom: 8px; }
.ws-marks { display: block; text-align: right; font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.ws-lines { margin: 4px 0 6px; }
.ws-lines i { display: block; height: 32px; border-bottom: 1px solid #CFC6B4; }
.ws-grid { display: block; width: 100%; height: auto; max-width: 640px; margin: 8px 0; }
.ws-stim {
  background: var(--surface); border: 2px solid var(--border-soft); border-left: var(--bw) solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; margin: 0 0 18px; font-size: .93rem;
}
.ws-stim p:last-child { margin-bottom: 0; }
.ws-stim .pw-fig { margin: 12px 0 4px; }

/* Data tables (worksheets and notes). The wrapper scrolls, the page never does. */
.ws-table-wrap { overflow-x: auto; margin: 10px 0 14px; }
.ws-table { border-collapse: collapse; font-size: .88rem; min-width: 60%; background: var(--surface); }
.ws-table th, .ws-table td { border: 1.5px solid #9C927E; padding: 6px 10px; text-align: center; }
.ws-table th { background: var(--surface-2); font-weight: 700; }
.ws-table td.l, .ws-table th.l { text-align: left; }

.ws-ms {
  margin-top: 40px; border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--surface);
}
.ws-ms > summary {
  cursor: pointer; padding: 16px 20px; font-weight: 800; font-size: 1.05rem; list-style: none;
}
.ws-ms > summary::-webkit-details-marker { display: none; }
.ws-ms > summary::before { content: "\25B8  "; color: var(--accent); }
.ws-ms[open] > summary::before { content: "\25BE  "; }
.ws-ms-body { padding: 0 20px 18px; font-size: .9rem; }
.ws-ms-item { border-top: 1px dashed var(--border-soft); padding: 10px 0 4px; break-inside: avoid; }
.ws-ms-head { margin-bottom: 4px !important; }
.ws-ms-head span { color: var(--text-muted); font-size: .8rem; }
.ws-ms-item ul { margin-bottom: 6px; }
.ws-ms-note { font-size: .82rem; color: var(--text-muted); margin-top: 12px; }

@media print {
  .navbar, .pw-rail, footer, .scroll-top, .pw-pager, .pw-crumbs, .ws-actions,
  .page-hero, .pw-ws-jump { display: none !important; }
  .pw-uc-ctl { display: none !important; }
  body { background: #fff; }
  /* Keep the fills of the criterion badges and table headers in print
     (answer lines are borders and the grid is SVG, so they always print). */
  .ws-crit, .ws-table th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .section-sm { padding: 0 !important; }
  .pw-shell { display: block; }
  .pw-article { max-width: none; }
  .pw-masthead { margin-bottom: 14px; padding-bottom: 10px; }
  .pw-lede { background: none; border-left-width: 2px; }
  .ws-part { break-before: auto; }
  .ws-part h2, .ws-part-note, .ws-stim { break-after: avoid; }
  .ws-ms { display: none; box-shadow: none; }
  body.ws-print-answers .ws-ms { display: block; break-before: page; border: none; }
  body.ws-print-answers .ws-ms > summary::before { content: ""; }
  a { color: inherit; border: none !important; }
}

/* ── Printing / Save-as-PDF is a paid-member perk (2026-10-09) ──
   notes.js adds html.ame-paid when the Worker's readable ame_paid=1 hint is
   present; without it the printout is replaced by a short note. A soft gate:
   the pages themselves stay free to read. */
.ws-print-gate { font-size: .9rem; font-weight: 600; margin: -10px 0 22px; }
.ws-print-gate a { color: var(--accent-dark); text-decoration: underline; }
@media print {
  html:not(.ame-paid) body > * { display: none !important; }
  html:not(.ame-paid) body::before {
    display: block; padding: 48px 24px; font: 600 16px/1.6 'Space Grotesk', sans-serif; color: #000;
    content: "Printing and Save-as-PDF are for paid AccelerateMyEdu members. Join or sign in at acceleratemyedu.com/account";
  }
  html:not(.ame-paid):lang(id) body::before {
    content: "Cetak dan simpan-PDF khusus untuk anggota berbayar AccelerateMyEdu. Daftar atau masuk di acceleratemyedu.com/account";
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .pw-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pw-rail {
    position: static; max-height: none; overflow: visible;
    margin-bottom: 30px; padding: 0;
    border: none; box-shadow: none; background: none;
  }
  .pw-rail-title { display: none; }
  .pw-rail-toggle {
    display: block; width: 100%; text-align: left;
    background: var(--surface); border: var(--bw) solid var(--ink);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 14px 18px; font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: .92rem; cursor: pointer; color: var(--text);
  }
  .pw-rail-toggle::after { content: " \25BE"; color: var(--accent); }
  .pw-rail-toggle[aria-expanded="true"]::after { content: " \25B4"; }
  .pw-rail-body {
    display: none; margin-top: 12px; padding: 18px;
    background: var(--surface); border: var(--bw) solid var(--ink);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
  }
  .pw-rail-body.open { display: block; }
  .pw-article { max-width: none; }
}

@media (max-width: 640px) {
  .pw-nav-link .pnl-text { display: none; }
  .pw-nav-link { font-size: 1rem; }
  .pw-box { padding: 20px 18px; }
  .pw-article h2 { font-size: 1.15rem; margin: 34px 0 14px; }
  .pw-pager { grid-template-columns: 1fr; }
  .pw-pager a.next { text-align: left; }
  .pw-theme { padding: 20px 18px; }
  .pw-theme > p { margin-left: 0; }
  .pw-topic-grid { grid-template-columns: 1fr; }
  .pw-intro-card { padding: 22px 20px; }
  .pw-eq { padding: 12px 14px; }
  /* The formula reference collapses to one column: code, then name, then
     formula, stacked. */
  .pw-fb-group { grid-template-columns: minmax(0, 1fr); }
  .pw-fb-code {
    padding: 7px 14px;
    border-right: none; border-bottom: 2px solid var(--border-soft);
  }
  .pw-fb-name { flex: 1 1 100%; min-width: 0; padding-bottom: 4px; }
  .pw-fb-eq { flex: 1 1 100%; }
}