/* education.css — Drawing Set: Education centre (/learn), the article reader (page.html: /learn/<slug> and
   /w/<group>/p/<slug>), and the operator pages /admin/education + /admin/taxonomy.
   Markup uses rc-* primitives; this file only composes them. Radius 0, hairlines, no gradients except the
   masked drafting grid inside an empty plate, no coloured bars, no glows, no looping motion. */

/* ── header: title block + progress ─────────────────────────────────────────── */
.edu-head { align-items: flex-end; }
.edu-head__id { flex: 1 1 420px; min-width: 0; }
.edu-head .rc-kicker + h1 { margin-top: 10px; }
.edu-head__act { margin-top: 14px; }
.edu-head__side { flex: 0 1 auto; display: grid; justify-items: end; gap: 12px; width: min(100%, 540px); }
.edu-prog { width: 100%; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); }
.edu-prog > .rc-kpi { align-content: start; }
.edu-prog:has(> :only-child) { grid-template-columns: minmax(150px, 260px); width: auto; }
.edu-of { font: 500 14px/1 var(--rc-font-mono); letter-spacing: 0; color: var(--rc-text-mute); }
/* one small square per tutorial: solid = done, dashed = still to do (neutral ink, never violet) */
.edu-squares { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; max-width: 176px; }
.edu-sq { display: block; box-sizing: border-box; width: 10px; height: 10px; border: 1px dashed var(--rc-text-mute); }
.edu-sq.is-done { border-style: solid; background: var(--rc-text-soft); border-color: var(--rc-text-soft); }
.edu-next { display: flex; align-items: flex-start; gap: 8px; color: var(--rc-accent); text-decoration: none; font: 600 16px/1.3 var(--rc-font-display); letter-spacing: -.005em; }
.edu-next__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.edu-next svg { flex: none; margin-top: 3px; transition: transform .3s var(--rc-ease-out); }
.edu-next:hover .edu-next__t { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .edu-next:hover svg { transform: translateX(2px); } }

/* ── find: search, show, group by, topic facets ─────────────────────────────── */
.edu-controls { border: 1px solid var(--rc-line-strong); border-top: var(--sec-w, 1px) solid var(--sec, var(--rc-line-strong)); background: var(--rc-raised); }   /* the find bar wears the Education place hue (cyan) */
.edu-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 16px; }
.edu-search-wrap { position: relative; flex: 1 1 240px; max-width: 300px; min-width: 0; }
.edu-search-wrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rc-text-mute); pointer-events: none; }
.edu-search-wrap .edu-search { padding-left: 36px; }
.edu-ctl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.edu-ctl > .rc-label { flex: none; }
.edu-seg > button svg { width: 14px; height: 14px; }
.edu-toolbar__end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.edu-toolbar__end:not(:has(> :not([hidden]))) { display: none; }
.edu-more { border-top: 1px solid var(--rc-line); }
.edu-more > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; cursor: pointer; list-style: none; user-select: none; }
.edu-more > summary::-webkit-details-marker { display: none; }
.edu-more > summary:hover { background: var(--rc-hover); }
.edu-more__chev { width: 14px; height: 14px; color: var(--rc-text-faint); transition: transform var(--rc-dur-base) var(--rc-ease-out); }
.edu-more:not([open]) > summary .edu-more__chev { transform: rotate(-90deg); }
.edu-more [data-edu-facets] { display: grid; gap: 10px; padding: 4px 16px 16px; }
.edu-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px 16px; }
.edu-chiprow { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.edu-facet:disabled { color: var(--rc-text-faint); border-style: dashed; border-color: var(--rc-line-strong); background: transparent; cursor: not-allowed; }
.edu-count-line { margin: 14px 0 0; font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .02em; color: var(--rc-text-mute); }

/* ── results: one dimension-line heading per topic, then its tutorials ──────── */
.edu-sec { margin-top: 28px; min-width: 0; scroll-margin-top: calc(var(--topbar-h) + var(--rc-bar-h) + 16px); }
.edu-sec > .rc-gline + * { margin-top: 20px; }
.edu-sec:target .rc-gname { color: var(--rc-accent); }
.edu-grid { --rc-sheet-min: 300px; }
.edu-fallback { margin-top: 24px; }
.edu-noresults { max-width: 560px; margin-top: 24px; padding: 28px; border: 1px dashed var(--rc-line-bright); color: var(--rc-text-soft); font: 400 14px/1.5 var(--rc-font-sans); }
.edu-noresults__t { margin: 0 0 8px; }
.edu-noresults__act { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: 500 14px/1.4 var(--rc-font-sans); cursor: pointer; }
[data-edu-results]:focus { outline: none; }

/* ── tutorial tile (a.rc-tile): bar = group identity square + attribute stamps; plate; title; summary; tags ── */
.edu-tile .rc-tile__head { align-items: flex-start; }
.edu-tile .rc-tile__body { gap: 8px; padding: 12px 14px 14px; }
.edu-tile .rc-tile__desc { -webkit-line-clamp: 3; line-clamp: 3; }
.edu-tile .rec-note { margin: 0; font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-soft); }
.edu-tile .rc-meta { --rc-meta-gap: 2.5ch; }
/* no capture yet: a theme-aware ground (never a near-black block in the light theme) with the grid and a kind glyph */
.edu-plate--ph { --plate-tick: var(--rc-text-faint); background: var(--rc-band); }
.edu-plate--ph .rc-plate__view { background: var(--rc-raised); }
.edu-plate--ph .rc-plate__view::after { box-shadow: inset 0 0 0 1px var(--rc-line-strong); }
.edu-ph { background-color: var(--rc-raised); color: var(--rc-text-mute); }
.edu-ph::before {
  background-image: linear-gradient(90deg, var(--rc-line) 1px, transparent 1px), linear-gradient(var(--rc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rc-line) 1px, transparent 1px), linear-gradient(var(--rc-line) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
}
.edu-ph .rc-plate__label { color: var(--rc-text-mute); text-align: center; padding: 0 12px; }
.edu-ph__ico { width: 22px; height: 22px; }
/* empty Education centre: drafting grid is allowed behind an empty state */
.edu-emptysheet { padding: 48px 0; }

/* phones: tiles become rows (bar on top, 96px thumbnail beside the text) so the first tutorial shows on the first screen */
@media (max-width: 740px) {
  .edu-head { padding-bottom: 16px; margin-bottom: 16px; }
  .edu-head__side { justify-items: stretch; width: 100%; }
  .edu-prog { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .edu-prog:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .edu-squares { max-width: 100%; }
  .edu-next { min-height: 44px; align-items: center; }
  .edu-toolbar { gap: 12px; padding: 12px 16px; }
  .edu-search-wrap { flex-basis: 100%; max-width: none; }
  .edu-ctl { gap: 12px; width: 100%; }
  .edu-ctl > .rc-label { flex-basis: 72px; }
  .edu-seg { display: flex; flex: 1 1 0; min-width: 0; }
  .edu-seg > button { flex: 1 1 0; min-height: 44px; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding: 0 6px; }
  .edu-seg > button svg { display: none; }
  .edu-seg[data-edu-show] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-seg[data-edu-show] > button { border-right: 1px solid var(--rc-line-strong); border-bottom: 1px solid var(--rc-line-strong); }
  .edu-seg[data-edu-show] > button:nth-child(2n) { border-right: 0; }
  .edu-seg[data-edu-show] > button:nth-last-child(-n+2) { border-bottom: 0; }
  .edu-seg[data-edu-show] > button:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; }
  .edu-toolbar__end { margin-left: 0; width: 100%; }
  .edu-toolbar__end .btn { width: 100%; }
  .edu-more > summary { min-height: 44px; }
  .edu-more .edu-ctl { flex-direction: column; align-items: stretch; gap: 6px; }
  .edu-more .edu-ctl > .rc-label { flex: none; }
  .edu-more .edu-ctl > .edu-seg { flex: none; width: 100%; }
  .edu-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .edu-chiprow .rc-toggle { min-height: 44px; }
  .edu-noresults { padding: 20px 16px; }
  .edu-noresults__act { min-height: 44px; }
  .edu-sec { margin-top: 24px; }
  .edu-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .edu-tile { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "bar bar" "plate body"; }
  .edu-tile > .rc-tile__bar { grid-area: bar; }
  .edu-tile > .rc-plate { grid-area: plate; align-self: start; padding: 6px; border-width: 0 1px 1px 0; border-style: solid; border-color: var(--rc-line); }
  .edu-tile > .rc-plate::after { display: none; }
  .edu-tile .rc-plate__view { aspect-ratio: 1 / 1; }
  .edu-tile > .rc-tile__body { grid-area: body; gap: 6px; padding: 10px 12px 12px; }
  .edu-tile .rc-tile__desc { -webkit-line-clamp: 2; line-clamp: 2; }
  .edu-tile .rec-note { font-size: 12px; }
  .edu-ph { gap: 6px; }
  .edu-ph .rc-plate__label { font-size: 12px; padding: 0 4px; letter-spacing: .02em; }
  .edu-emptysheet { padding: 24px 0; }
}

/* ── article reader (page.html) ─────────────────────────────────────────────── */
.edu-read { max-width: 72ch; margin-inline: auto; font-size: 15px; }
.edu-arthead { flex-direction: column; align-items: flex-start; gap: 16px; }
.edu-arthead h1 { margin: 0 0 8px; }
.edu-arthead .rc-lead { max-width: 60ch; }
.edu-arthead__act { align-items: center; }
.edu-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.edu-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--rc-text-mute); text-decoration: none; min-height: 24px; }
.edu-crumb a:hover { color: var(--rc-text); text-decoration: underline; text-underline-offset: 3px; }
.edu-crumb a svg { width: 14px; height: 14px; }
.edu-crumb [aria-current="page"] { color: var(--rc-text); }
.edu-read .rec-banner { margin: 0 0 20px; }
.edu-read .rec-banner strong { font-weight: 600; }
.edu-read .rec-banner__note { display: block; margin-top: 2px; color: var(--rc-text-soft); }
.edu-read > .content { margin: 8px 0 0; }
.edu-read .content table.content-table { font-size: 13px; }
.edu-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding: 16px; border: 1px solid var(--rc-line-strong); border-top: var(--sec-w, 1px) solid var(--sec, var(--rc-line-strong)); background: var(--rc-raised); }
.edu-done__txt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 1 280px; min-width: 0; }
.edu-done__txt p { margin: 0; max-width: 52ch; color: var(--rc-text-soft); font: 400 14px/1.5 var(--rc-font-sans); }
.edu-done__txt p strong { color: var(--rc-text); font-weight: 600; }
/* ── interactive workspace page (page_interactive.html) ─────────────────────── */
/* The sandboxed frame owns the screen below the sticky chrome + layer bar: the page frame drops its cap and side padding (only while it holds
   .edu-ia), and head + iframe fill exactly the rest of the viewport, so the framed document scrolls inside its own viewport (its scroll-reveal
   animations depend on it). The head keeps the layer bar's content edge; any markdown body and the footer follow on page scroll. */
.container:has(> .edu-ia) { max-width: none; padding: 0 0 48px; }
.edu-ia { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar-h) - var(--rc-bar-h)); min-height: 560px; }
.edu-ia__head { flex: none; align-items: center; gap: 12px 24px; margin: 0; padding: 14px max(var(--rc-gutter), calc((100% - 1392px) / 2 + var(--rc-gutter))); border-bottom: 0; }
.edu-ia__id { min-width: 0; }
.edu-ia__head .edu-crumb { margin-bottom: 6px; }
.edu-ia__head h1 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.edu-ia__head h1 .rc-stamp { vertical-align: middle; }
.edu-ia__head .rc-lead { margin-top: 4px; max-width: 74ch; }
.edu-ia__act { align-items: center; }
.edu-ia__frame { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-top: 1px solid var(--rc-line-strong); background: var(--rc-bg); }
.edu-ia__body { max-width: 1392px; margin: 24px auto 0; padding: 0 var(--rc-gutter); }
@media (max-width: 767px) {
  /* Phone: the signed-in chrome wraps to two 44px rows (10 + 44 + 10 + 44 + 9 + 1 = 118px) and the layer bar is not sticky, so once it
     scrolls away head + frame fill the screen under the chrome (tests/ui/interactive-page.test.cjs measures it). */
  .container:has(> .edu-ia) { padding-bottom: 40px; }
  .edu-ia { height: calc(100dvh - 118px); min-height: 480px; }
  .edu-ia__head { padding: 12px 16px; }
  .edu-ia__body { padding: 0 16px; }
}

/* Wide media leave the 72ch reading column on desktop: centred on it, capped at 1100px (embedded reports, stretched figures, wide tables).
   Text keeps its measure. The aspect ratio replaces the padding-top trick, which is relative to the narrow column. */
@media (min-width: 900px) {
  .edu-read .embed, .edu-read .content figure.image.stretched { width: min(1100px, calc(100vw - 48px)); max-width: none; margin-inline: calc(50% - min(550px, 50vw - 24px)); }
  .edu-read .embed { padding-top: 0; aspect-ratio: 16 / 9; }
  .edu-read .content .table-wrap:has(> table.content-table) { position: relative; left: 50%; transform: translateX(-50%); width: max-content; min-width: 100%; max-width: min(1100px, calc(100vw - 48px)); }
}
.edu-read .embed { margin-block: 12px 20px; }
.edu-read .backlink { margin-top: 20px; }
.edu-read .backlink a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
@media (max-width: 740px) {
  .edu-crumb a, .edu-read .backlink a { min-height: 44px; min-width: 44px; }
  .edu-crumb { margin-bottom: 0; }
  .edu-done { padding: 14px; }
  .edu-done .actions, .edu-done .edu-doneform { width: 100%; }
  .edu-done .btn { width: 100%; }
}

/* ── page editor tag picker (admin/page_edit.html, owned by the editor surface; kept here as before) ── */
.edu-fieldgroup { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.edu-fieldgroup > .edu-dim-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.edu-checkrow { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── operator: /admin/education + /admin/taxonomy ───────────────────────────── */
.edu-panel .rc-panel__bar { gap: 10px; }
.edu-admin-wrap { border-top: 0; }
.edu-admin th.num, .edu-admin td.num { text-align: right; font: 500 12px/1 var(--rc-font-mono); }
.edu-admin td { vertical-align: middle; }
.edu-admin__ttl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.edu-admin__name { color: var(--rc-text); font-weight: 500; }
.edu-admin__acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.edu-admin__acts form { margin: 0; }
.edu-admin code { font: 500 12px/1.3 var(--rc-font-mono); }
.edu-mono { font: 500 12px/1.3 var(--rc-font-mono); color: var(--rc-text-soft); }
.edu-faint { color: var(--rc-text-faint); }
@media (max-width: 740px) {
  .edu-admin thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .edu-admin, .edu-admin tbody { display: block; }
  .edu-admin tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .6fr); gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--rc-line); }
  .edu-admin td { display: block; min-width: 0; padding: 0; border: 0; }
  .edu-admin td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
  .edu-admin td.edu-admin__title { grid-column: 1 / -1; }
  .edu-admin td.edu-admin__title::before { display: none; }
  .edu-admin td.num { text-align: left; font: 400 13px/1.4 var(--rc-font-sans); }
  .edu-admin td[data-label="Slug"] { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .edu-admin td[data-label="Slug"]::before { display: none; }
  .edu-admin td.edu-admin__act { grid-column: 1 / -1; }
  .edu-admin__acts { justify-content: flex-start; flex-wrap: wrap; }
  .edu-admin td.empty { grid-column: 1 / -1; padding: 18px 0; }
}

.edu-dim { margin: 0; }
.edu-dim + .edu-dim { margin-top: 16px; }
.edu-dim .rc-panel__bar { flex-wrap: wrap; gap: 8px 10px; padding-block: 6px; }
.edu-key { font: 500 12px/1.3 var(--rc-font-mono); }
.edu-dim__del { margin: 0 0 0 auto; }
.edu-vals { margin: 0 0 14px; gap: 8px; }
.edu-val { display: inline-flex; align-items: stretch; border: 1px solid var(--rc-line-strong); }
.edu-val .chip { border: 0; min-height: 32px; padding: 4px 10px; }
.edu-val form { display: flex; margin: 0; }
.edu-val__x { min-height: 0; width: 32px; padding: 0; border-width: 0 0 0 1px; border-color: var(--rc-line-strong); background: transparent; color: var(--rc-red-ink); }
.edu-val__x:hover { background: var(--rc-red-wash); border-color: var(--rc-line-strong); }
.edu-addform { align-items: end; }
.edu-addform .field { margin: 6px 0; }
.row .field.edu-grow { flex: 1 1 200px; }
.row .field.edu-narrow { flex: 0 0 96px; min-width: 96px; }
.row .field.edu-submit { flex: 0 0 auto; min-width: 0; }
.edu-dim .rc-hint { margin-top: 8px; }
.edu-newdim { max-width: 720px; }
.edu-newdim .row { align-items: end; }
.edu-formfoot { display: flex; justify-content: flex-end; margin-top: 12px; }   /* the form primary sits at the panel foot's right, like Save group */
@media (max-width: 767px), (pointer: coarse) {
  .edu-val__x { width: 44px; min-height: 44px; }
  .edu-val .chip { min-height: 44px; }
}
@media (max-width: 740px) {
  .edu-addform { flex-direction: column; align-items: stretch; }
  .row .field.edu-grow, .row .field.edu-narrow { flex: 0 0 auto; min-width: 0; }
  .edu-newdim .row { flex-direction: column; align-items: stretch; }
  .edu-submit .btn, .edu-formfoot .btn { width: 100%; }
  .edu-dim__del { margin-left: 0; }
}