/* approach.css: the Approach and Learning approach pages (EDITORIAL-BRIEF, Oct 16, 2026).
   Built on css/ds.css components; every size, gap and colour comes from the tokens in css/pro.css.
   Markup: tools/approach_page.py. Wheel: tools/approach_wheel.py. Tabs: css/elegance.css + elegance.js. */

.ap2 h3 { margin: 0; font: 600 var(--text-md)/1.35 'Geist', system-ui, sans-serif; color: var(--pro-ink); }
.ap2 p { text-wrap: pretty; }

/* ---------- On this page ---------- */
.ap-toc { border-bottom: var(--hairline); background: var(--pro-bg); }
.ap-toc ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: var(--space-4) 0; }
.ap-toc a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-ctl);
  font-size: var(--text-sm); color: var(--pro-soft); text-decoration: none; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.ap-toc a b { font: 500 var(--text-xs)/1 'Geist', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--pro-ink-2); }
.ap-toc a:hover { background: var(--pro-alt); color: var(--pro-ink); }

/* ---------- Approach: the three skills (photo cards) ---------- */
.ap-skill { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ap-skill figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pro-sunk); }
.ap-skill figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-skill figure span { position: absolute; left: var(--space-4); top: var(--space-3); font: 500 var(--text-base)/1 'Newsreader', Georgia, serif; color: var(--pro-bg); text-shadow: var(--shadow-text); }
.ap-skill-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); flex: 1; }
.ap-skill-top { display: flex; align-items: center; gap: var(--space-3); }
.ap-skill-top h3 { font: 500 var(--pro-h3)/1.1 'Newsreader', Georgia, serif; }
.ap-skill-def { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--pro-text); }
.ap-skill-dl { margin: 0; display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--hairline); }
.ap-skill-dl dt { font: 600 var(--text-xs)/1.3 'Geist', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pro-ink-2); }
.ap-skill-dl dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--pro-soft); }
.ap-skill details { margin-top: auto; border-top: var(--hairline); padding-top: var(--space-2); }
.ap-skill summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-size: var(--text-sm); font-weight: 500; color: var(--pro-ink-2); list-style: none; }
.ap-skill summary::-webkit-details-marker { display: none; }
.ap-skill summary::after { content: "+"; margin-left: auto; font-size: var(--text-lg); }
.ap-skill details[open] summary::after { content: "−"; }
.ap-skill details ol { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ap-skill details li { display: grid; gap: var(--space-1); font-size: var(--text-sm); line-height: 1.5; color: var(--pro-soft); }
.ap-skill details li b { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--pro-ink-2); font-weight: 600; }
:lang(zh) .ap-skill details li b, :lang(zh) .ap-skill-dl dt { letter-spacing: .04em; }

/* ---------- Approach: pointer to the learning approach ---------- */
.ap-ptr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: center;
  padding: var(--space-8); border-radius: var(--radius-card); background: var(--pro-ink); color: var(--pro-bg); }
.ap-ptr .ds-eyebrow { color: var(--pro-tint); }
.ap-ptr .ds-h2, .ap-ptr .ds-h2 em { color: var(--pro-bg); margin-top: var(--space-3); }
.ap-ptr-p { margin: var(--space-4) 0 0; max-width: var(--measure-narrow); font-size: var(--text-md); line-height: var(--lh-body); color: rgba(255, 255, 255, .82); }
.ap-ptr-side ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.ap-ptr-side li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); color: var(--pro-bg); }
.ap-ptr-side .ds-ic { color: var(--pro-tint); }
.ap-ptr .btn-primary { background: var(--pro-bg) !important; color: var(--pro-ink) !important; }

/* ---------- 1. Philosophy (icon-led) ---------- */
.ap-ph { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--pro-ink); }
.ap-ph-n { font: 500 var(--text-sm)/1 'Newsreader', Georgia, serif; color: var(--pro-ink-2); }
.ap-ph h3 { font: 500 var(--pro-h3)/1.1 'Newsreader', Georgia, serif; }
.ap-ph p { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--pro-text); }
.ap-ph p.ap-ph-w { font-size: var(--text-sm); color: var(--pro-soft); }
.ap-ph-w b { color: var(--pro-ink); font-weight: 600; }

/* ---------- 2. Framework wheel ---------- */
.ap-fw { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; }
.ap-wheel { position: relative; max-width: calc(var(--space-10) * 4.7); width: 100%; margin: 0 auto; }
.apw { display: block; width: 100%; height: auto; overflow: visible; }
.apw .apw-out { fill: var(--pro-bg); stroke: var(--pro-line); stroke-width: 1; }
.apw .apw-out-t { fill: var(--pro-ink); font-family: 'Geist', system-ui, sans-serif; font-weight: 500; letter-spacing: .01em; }
.apw .apw-mid-t { fill: var(--pro-bg); font-family: 'Geist', system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; white-space: pre; }
.apw .apw-arrow { fill: var(--pro-tint); }
.apw .apw-core { fill: var(--pro-ink); }
.apw .apw-core-t { fill: var(--pro-bg); font-family: 'Newsreader', Georgia, serif; font-weight: 500; }
.apw .apw-core-t.is-em { font-style: italic; fill: var(--pro-tint); }
:lang(zh) .apw .apw-core-t.is-em { font-style: normal; }
.apw .apw-orbit circle { fill: none; stroke: var(--pro-tint); stroke-width: 1.5; stroke-dasharray: 3 7; }
.apw .apw-g { transform-box: view-box; transform-origin: 300px 300px; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
html.js .ap-wheel.reveal:not(.in) .apw-g { opacity: 0; transform: scale(.94); }
html.js .ap-wheel.reveal .apw-g-mid { transition-delay: .18s; }
html.js .ap-wheel.reveal .apw-g-out { transition-delay: .36s; }
.apw .apw-orbit { transform-box: view-box; transform-origin: 300px 300px; animation: apw-turn 90s linear infinite; }
@keyframes apw-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .apw .apw-orbit { animation-duration: 180s; }
  html.js .ap-wheel.reveal:not(.in) .apw-g { transform: none; }
}
.ap-fw-text { display: grid; gap: var(--space-7); }
.ap-fw-lists { display: grid; gap: var(--space-6); }
.ap-fw-lists ol { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ap-fw-lists li { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-base); color: var(--pro-text); }
.ap-fw-q { margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--pro-ink); }
.ap-fw-q p { margin: var(--space-2) 0 0; font: 500 var(--pro-h3)/1.15 'Newsreader', Georgia, serif; color: var(--pro-ink); }
.ap-fw-note { margin: 0; max-width: var(--measure-narrow); font-size: var(--text-sm); line-height: var(--lh-body); color: var(--pro-soft); }
.ap-fw-note em { color: var(--pro-ink); }

/* ---------- 3. Strands ---------- */

/* ---------- 4. One week (the matrix lives in ds.css) ---------- */
.ap-ex-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); margin: var(--space-6) 0 0; font-size: var(--text-base); color: var(--pro-soft); }
.ap-ex-foot b { color: var(--pro-ink); font-weight: 600; }

/* ---------- 5. Outcomes ---------- */
.ap-outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.ap-outcomes > div { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--pro-ink); }
.ap-outcomes ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.ap-outcomes li { position: relative; padding-left: var(--space-5); font-size: var(--text-base); line-height: 1.55; color: var(--pro-text); }
.ap-outcomes li::before { content: ""; position: absolute; left: 0; top: .5em; width: .6em; height: .35em; border-left: 1.5px solid var(--pro-ink-2); border-bottom: 1.5px solid var(--pro-ink-2); transform: rotate(-45deg); }

/* ---------- 6. Assessment ---------- */
.ap-assess { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ap-crit { padding: 0; overflow: hidden; }
.ap-crit-head { padding: var(--space-5) var(--space-6); border-bottom: var(--hairline); }
.ap-crit-head h3 { margin-top: var(--space-2); font: 500 var(--text-lg)/1.25 'Newsreader', Georgia, serif; }
.ap-crit ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-crit li { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; font-size: var(--text-sm); line-height: 1.55; color: var(--pro-soft); }
.ap-crit li + li { border-left: var(--hairline); }
.ap-crit li b { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--pro-ink); }
.ap-crit li i { display: block; height: var(--space-1); background: linear-gradient(90deg, var(--pro-ink-2) calc(var(--l) * 25%), var(--pro-sunk) 0); }
.ap-crit-foot { margin: 0; padding: var(--space-4) var(--space-6); border-top: var(--hairline); font-size: var(--text-sm); color: var(--pro-soft); background: var(--pro-alt); }
.ap-side { display: grid; gap: var(--space-5); }
.ap-side .ds-card { display: grid; gap: var(--space-4); }
.ap-ev { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ap-ev li { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2); border-radius: var(--radius-ctl); background: var(--pro-alt); font-size: var(--text-sm); font-weight: 500; color: var(--pro-ink); text-align: center; }
.ap-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ap-qs li { display: grid; gap: var(--space-1); }
.ap-qs li b { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--pro-ink-2); font-weight: 600; }
.ap-qs li q { font: 500 var(--text-lg)/1.3 'Newsreader', Georgia, serif; color: var(--pro-ink); }

/* ---------- 7. Principles ---------- */
.ap-teach-i { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--pro-ink); }
.ap-teach-i p { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--pro-soft); }
.ap-block { margin-top: var(--space-9); }
.ap-block > .ds-eyebrow { margin-bottom: var(--space-5); }
.ap-block > .ds-lede { margin: 0 0 var(--space-6); }
.ap-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.ap-split > div { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-card); background: var(--pro-alt); }
.ap-split > div.is-learner { background: var(--pro-ink); }
.ap-split > div.is-learner .ds-ic { color: var(--pro-tint); }
.ap-split-k { font: 600 var(--text-xs)/1.3 'Geist', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pro-ink-2); }
.ap-split .is-learner .ap-split-k { color: var(--pro-tint); }
.ap-split ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ap-split li { font-size: var(--text-md); color: var(--pro-text); }
.ap-split .is-learner li { color: var(--pro-bg); }
.ap-eg { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--pro-ink); }
.ap-eg ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.ap-eg li { display: grid; grid-template-columns: var(--space-7) 1fr; gap: var(--space-2); }
.ap-eg li b { font: 500 var(--text-lg)/1.2 'Newsreader', Georgia, serif; color: var(--pro-ink-2); }
.ap-eg li span { font-size: var(--text-sm); line-height: 1.55; color: var(--pro-soft); }
.ap-eg li strong { display: block; margin-bottom: var(--space-1); font-size: var(--text-base); color: var(--pro-ink); font-weight: 600; }
/* the day as a flow: seven steps joined by a hairline, an icon on each */
.ap-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); position: relative; }
.ap-flow::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: calc(var(--space-3) + var(--ic) / 2); height: 1px; background: var(--pro-ink-2); }
.ap-flow li { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; }
.ap-flow li .ds-ic { box-sizing: content-box; padding: var(--space-3); border-radius: 50%; background: var(--pro-bg); border: var(--hairline); }
.ap-fl-t { margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--pro-soft); }
.ap-flow b { font: 500 var(--text-lg)/1.2 'Newsreader', Georgia, serif; color: var(--pro-ink); }
.ap-fl-d { font-size: var(--text-sm); line-height: 1.45; color: var(--pro-soft); max-width: 18ch; }

/* ---------- 8. By audience ---------- */
.ap2 .el-tabs { margin-bottom: var(--space-6); }
.ap2 .el-tabpanel { padding-top: 0 !important; }
.ap-aud-intro { margin: 0 0 var(--space-6); max-width: var(--measure); font-size: var(--text-md); line-height: var(--lh-body); color: var(--pro-soft); }
.ap-prog { display: flex; flex-direction: column; gap: var(--space-3); }
.ap-prog ul { margin: var(--space-1) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ap-prog li { position: relative; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.55; color: var(--pro-text); }
.ap-prog li::before { content: ""; position: absolute; left: 0; top: .6em; width: var(--space-1); height: var(--space-1); background: var(--pro-ink-2); }
.ap-prog .tlink { margin-top: auto; padding-top: var(--space-3); align-self: flex-start; }

/* ---------- Tablet and phones ---------- */
@media (max-width: 1100px) {
  .ap-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-assess { grid-template-columns: 1fr; }
  .ap-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-6); }
  .ap-flow::before { display: none; }
}
@media (max-width: 900px) {
  .ap-fw, .ap-ptr { grid-template-columns: 1fr; gap: var(--space-7); }
  .ap-ptr { padding: var(--space-6); }
}
@media (max-width: 760px) {
  .ap-toc ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--space-2) 0; }
  .ap-toc a { white-space: nowrap; }
  .ap-outcomes, .ap-split { grid-template-columns: 1fr; }
  .ap-crit ol { grid-template-columns: 1fr 1fr; }
  .ap-ev { grid-template-columns: 1fr; }
  .ap-ev li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; padding: var(--space-3) var(--space-4); }
  .ap-crit li:nth-child(3) { border-left: 0; }
  .ap-crit li:nth-child(n+3) { border-top: var(--hairline); }
  .ap-block { margin-top: var(--space-8); }
  /* the day becomes a vertical flow */
  .ap-flow { grid-template-columns: 1fr; gap: 0; }
  .ap-flow li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--space-4); row-gap: var(--space-1); padding-bottom: var(--space-5); }
  .ap-flow li::before { content: ""; position: absolute; left: calc(var(--space-3) + var(--ic) / 2); top: calc(var(--ic) + var(--space-5)); bottom: 0; width: 1px; background: var(--pro-line); }
  .ap-flow li:last-child::before { display: none; }
  .ap-flow li .ds-ic { grid-row: 1 / 4; }
  .ap-fl-t { margin: 0; }
  .ap-fl-d { max-width: none; }
  /* the wheel text scales with its width: larger SVG user units (not CSS px) keep labels readable */
  .apw .apw-out-t { font-size: 19px; } .apw .apw-mid-t { font-size: 15px; }
  :lang(zh) .apw .apw-out-t { font-size: 21px; } :lang(zh) .apw .apw-mid-t { font-size: 19px; }
}