/* v2 draft: styles for the modules. On promotion these merge into site/assets/site.css.
   Shippable markup uses no inline style attributes: the production CSP is style-src 'self'. */

/* The three worlds of triadic game design. One colour each, reused wherever a world appears.
   Dark Play is a coral red (was #ef7a4e) so it stays apart from Meaning's gold for red-green colour blindness. */
:root { --w-reality:#2c5d8f; --w-meaning:#8a5e05; --w-play:#b03a1a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --w-reality:#8db4e2; --w-meaning:#e8b04b; --w-play:#f0727f; }
}
:root[data-theme="dark"],
:root.dark-only:not([data-theme="light"]) { --w-reality:#8db4e2; --w-meaning:#e8b04b; --w-play:#f0727f; }
.w-reality { --w:var(--w-reality); }
.w-meaning { --w:var(--w-meaning); }
.w-play    { --w:var(--w-play); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.btn-sm { padding:9px 14px; font-size:15px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.chip { font-size:12px; line-height:1; padding:6px 9px; border:1px solid var(--line); border-radius:99px; color:var(--body); background:var(--paper); white-space:nowrap; }
.chips-label { font-size:12px; color:var(--muted); align-self:center; margin-right:2px; }

/* ---------- Collapsible page sections: native <details>, open by default, no JS ---------- */
details.fold > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:14px; margin:0 0 16px; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary h3 { margin:0; }
details.fold > summary::after { content:"\2013"; margin-left:auto; color:var(--accent); font-size:30px; line-height:1; font-weight:700; }
details.fold:not([open]) > summary { margin:0; padding-bottom:14px; border-bottom:1px solid var(--line); }
details.fold:not([open]) > summary::after { content:"+"; }
details.fold > summary:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.fold-hint { font-size:14px; font-weight:600; color:var(--muted); }

/* ---------- Method ---------- */
.method-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:center; }
@media (max-width:820px) { .method-grid { grid-template-columns:1fr; } }
.src-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin:6px 0 14px; font-size:15px; font-weight:700; }

/* Triad figure: triangle with one circle per world. */
.triad { margin:0; }
.triad svg { display:block; width:100%; max-width:380px; height:auto; margin:0 auto; }
.triad figcaption { font-size:13px; color:var(--muted); text-align:center; margin:8px 0 0; }
.triad text { font-family:var(--display); text-anchor:middle; }
.triad .t-start { text-anchor:start; }
.triad .world-shape { fill:var(--w); fill-opacity:.1; stroke:var(--w); stroke-width:2; }
.triad .world-bg { fill:var(--paper); }
.triad .t-kanji { font-size:22px; font-weight:700; fill:var(--w); }
.triad .t-name { font-size:15px; font-weight:800; fill:var(--w); }
.triad .t-mid { font-size:11px; font-weight:800; letter-spacing:.16em; fill:var(--muted); }
.triad .t-edge { fill:none; stroke:var(--line); stroke-width:2; }

/* World cards: big faint kanji in the background */
.worlds { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:720px) { .worlds { grid-template-columns:1fr; } }
.world { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-top:4px solid var(--w); padding:18px 20px; }
.world-kanji { font-size:15px; font-weight:700; color:var(--w); letter-spacing:.08em; }
.world-name { display:block; font-size:21px; font-weight:800; letter-spacing:-.015em; margin:2px 0 6px; color:var(--ink); }
.worlds-big .world { padding-top:26px; }
.worlds-big .world-kanji { position:absolute; right:8px; top:-10px; font-size:68px; letter-spacing:0; opacity:.13; pointer-events:none; }
.wq { margin:12px 0 0; padding:0 0 0 12px; border-left:3px solid var(--w); }
.wq p { margin:0; font-size:14px; line-height:1.5; color:var(--body); font-style:italic; }
.wq cite { display:block; margin:4px 0 0; font-size:12px; font-style:normal; color:var(--muted); }

/* Inline key: one line per world, for pages that only need to decode the world names */
.wkey { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px; font-size:15px; line-height:1.4; color:var(--body); }
.wkey li { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.wkey .k { color:var(--w); font-weight:800; }
.wkey .k::before { content:""; display:inline-block; width:.62em; height:.62em; border-radius:50%; background:var(--w); margin-right:.4em; }
.wkey .wkey-src cite { font-size:12px; font-style:normal; color:var(--muted); }

/* ---------- Sessions ---------- */
.session-title { font-size:21px; font-weight:800; letter-spacing:-.015em; margin:0 0 14px; line-height:1.2; }
.session-title .t { color:var(--muted); font-weight:700; }
.session .when { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 4px; }
.agenda .activity[class*="w-"] .act-tag { color:var(--muted); }
.agenda .act-w { color:var(--w); font-weight:800; text-decoration:none; }
.agenda a.act-w:hover { text-decoration:underline; }
.agenda .act-w::before { content:""; display:inline-block; width:.62em; height:.62em; border-radius:50%; background:var(--w); margin-right:.4em; vertical-align:.02em; }
.agenda .act-k { font-size:14px; color:var(--w); opacity:.8; }
.agenda .ag-t { flex:1 1 0; min-width:0; }  /* long items wrap beside their number, not under it */
.agenda .ag-sub { flex-basis:100%; padding-left:calc(1.2em + 10px); }
.agenda .ag-sub .ph { margin:6px 0 0; }

/* ---------- Location ---------- */
.place { display:flex; flex-wrap:wrap; gap:18px 28px; justify-content:space-between; align-items:flex-start; background:var(--card); border:1px solid var(--line); padding:22px 26px; margin:24px 0 0; }
.place-main { flex:1 1 320px; }
.place-kicker { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.place-name { font-size:21px; font-weight:800; letter-spacing:-.015em; margin:6px 0 2px; }
.place-alt { font-size:16px; font-weight:600; color:var(--muted); }
.place address { font-style:normal; font-size:17px; line-height:1.5; color:var(--body); }
.place-links { display:flex; flex-wrap:wrap; gap:10px; }
.place-line { font-size:16px; line-height:1.6; color:var(--body); margin:18px 0 0; }
.place-line a { font-weight:700; white-space:nowrap; }

/* Static map: a self-hosted image, so no third party loads on the page. */
.map-static { margin:16px 0 0; }
.map-static > a { display:block; border:1px solid var(--line); }
.map-static img { display:block; width:100%; height:auto; max-width:100%; }
.map-static figcaption { font-size:13px; color:var(--muted); margin:6px 0 0; }

/* Click-to-load map (stashed for later): nothing is requested from the map provider until the visitor asks. */
.mapframe { position:relative; aspect-ratio:16/9; max-width:100%; border:1px solid var(--line); background:var(--card); margin:16px 0 0; }
.mapframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.mapframe-gate { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center;
  background:repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--line) 55%, transparent) 14px 15px); }
@media (max-width:560px) { .mapframe { aspect-ratio:4/5; } }

/* ---------- Take part: two cards + an updates strip ---------- */
.door .when { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.door h4 { font-size:23px; line-height:1.12; letter-spacing:-.015em; margin:0; font-weight:800; }
.door-sub { margin:-6px 0 0; font-size:15px; color:var(--muted); }
.door .go { display:flex; flex-wrap:wrap; gap:10px; }
.takepart { display:flex; flex-direction:column; gap:24px; margin:20px 0 0; }
.takepart > .doors { margin:0; }
.strip { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-left:6px solid var(--gold); padding:18px 22px; }
.strip-txt { flex:1 1 380px; min-width:0; }
.strip-k { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.strip-txt .ph { margin:6px 0 0; }
.strip-mail { font-size:15px; color:var(--body); margin:6px 0 0; }
/* Review variant "strip above": everyone first, then Radical friends, then the workshop. */
.strip-above .takepart > .strip { order:-1; }
.strip-above .takepart .rf-door { order:-1; }

/* Timeline extras: place, who is involved, and where to join */
.tl-place { font-size:13px; color:var(--body); margin:2px 0 0; }
.tl-who { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0; }
.tl-join { display:inline-block; margin:10px 0 0; font-weight:700; font-size:15px; }
.tl-item .ph { margin:8px 0 0; }

/* ---------- Dropdowns (one-page variant) ---------- */
details.more { border-top:1px solid var(--line); }
details.more:last-of-type { border-bottom:1px solid var(--line); }
details.more > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 0; font-size:21px; font-weight:800; letter-spacing:-.015em; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { content:"+"; color:var(--accent); font-size:26px; line-height:1; font-weight:700; }
details.more[open] > summary::after { content:"\2013"; }
details.more > summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.more-hint { font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:auto; }
.more-body { padding:0 0 26px; }
@media (max-width:560px) { .more-hint { display:none; } }
/* One-page variant: modules pulled in from the split pages */
.onepage .more-body section { margin:0; }
.onepage .more-body section > h3 { display:none; }
.onepage #workshop .facts { margin-top:8px; }
.onepage .ws-door { display:none; }
.onepage #workshop details.more:first-of-type { margin-top:32px; }

/* ---------- Legal pages (privacy notice) ---------- */
.legal { max-width:760px; }
.legal section { margin:40px 0 0; }
.legal h3 { font-size:22px; letter-spacing:-.01em; margin:0 0 10px; }

/* ---------- Workshop page: facts at a glance ---------- */
.facts { display:flex; flex-wrap:wrap; gap:0 36px; margin:28px 0 0; border-top:3px solid var(--ink); border-bottom:1px solid var(--line); }
.facts > div { padding:14px 0 16px; min-width:0; }
.facts dt { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.facts dd { margin:6px 0 0; font-size:17px; font-weight:700; line-height:1.35; }
.facts dd.contact { font-size:15px; font-weight:600; }
.facts dd.contact a { font-weight:700; overflow-wrap:anywhere; }
.facts-note { font-size:13px; color:var(--muted); margin:8px 0 0; }

/* ---------- Sign-up form: sections ---------- */
.jump { display:flex; flex-wrap:wrap; gap:8px 10px; margin:22px 0 0; align-items:center; }
.jump-k { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-right:4px; }
.jump a { font-size:15px; font-weight:700; padding:7px 12px; border:1.5px solid var(--line); border-radius:99px; text-decoration:none; color:var(--ink); }
.jump a:hover { border-color:var(--ink); }
.qsec-h { font-size:24px; line-height:1.15; letter-spacing:-.015em; margin:0 0 4px; font-weight:800; }
.qsec-intro { margin:0 0 4px; }
.only-bar { background:var(--card); border:1px solid var(--line); border-left:6px solid var(--gold); padding:14px 18px; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; }
.only-bar[hidden] { display:none; }
.only-bar p { margin:0; font-size:16px; color:var(--body); }
.only-updates #about, .only-updates #workshop, .only-updates #programme { display:none; }

/* Form parts embedded in a page (stashed variant) */
.quick { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:12px 0 0; }
.quick .q-email { flex:1 1 240px; min-width:0; }
.quick .q-email label { display:block; font-size:13px; color:var(--muted); margin:0 0 4px; }
.quick .choices { flex-basis:100%; }
.quick .choice { font-size:15px; }
.quick .form-status { flex-basis:100%; margin:0; }