/* checked-against: static/praxis-d3/praxis-atlas.js + sites-source/vake.works-hugo/assets/css/extended/vw-earthed-theme.css -- reason: op 2026-08-26 D3 Phase 2 styling; earthed palette, responsive table|atlas split. */
/* one unified box: table (left) + atlas (right), co-visible, no wrap on desktop */
#praxis-atlas .pa-wrap { display: flex; gap: 0; align-items: stretch; margin: 14px 0; border: 1px solid var(--border, #cdc7ba); border-radius: 8px; overflow: hidden; background: #0e1b2a; flex-wrap: nowrap; }
#praxis-atlas .pa-table { flex: 0 0 320px; max-width: 340px; overflow-y: auto; max-height: 560px; padding: 12px 12px 14px; background: var(--theme, #fbfaf7); border-right: 1px solid var(--border, #cdc7ba); }
#praxis-atlas .pa-atlas { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 10px; }
#praxis-atlas .pa-h { margin: 0 0 4px; font-size: 1rem; }
#praxis-atlas .pa-hint { font-size: .8rem; color: var(--secondary, #667); margin: 4px 0 10px; line-height: 1.4; }
#praxis-atlas .pa-cap { font-size: .72rem; color: #8ea2b8; margin: 6px 2px 0; line-height: 1.35; }
/* focus mode: when an area is picked, collapse the other rows so the pathway is the story */
#praxis-atlas .pa-table.pa-focus .pa-row:not(.pa-sel) { display: none; }
#praxis-atlas .pa-reset { display: none; margin: 2px 0 8px; font-size: .8rem; cursor: pointer; color: #6f5a2c; font-weight: 600; }
#praxis-atlas .pa-table.pa-focus .pa-reset { display: inline-block; }
#praxis-atlas .pa-reset:hover { text-decoration: underline; }
@media (max-width: 620px) {
  #praxis-atlas .pa-wrap { flex-direction: column; }
  #praxis-atlas .pa-table { flex: 0 0 auto; max-width: none; max-height: 210px; border-right: none; border-bottom: 1px solid var(--border, #cdc7ba); }
  #praxis-atlas .pa-table.pa-focus { max-height: none; }   /* collapsed to 1 row -> short, atlas shows */
}
#praxis-atlas .pa-t { border-collapse: collapse; width: 100%; font-size: .84rem; }
#praxis-atlas .pa-t th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border, #cdc7ba); color: var(--secondary, #667); font-weight: 600; }
#praxis-atlas .pa-t td { padding: 6px 8px; border-bottom: 1px solid var(--border, #e6e1d6); vertical-align: middle; }
#praxis-atlas .pa-row { cursor: pointer; transition: background .12s; }
#praxis-atlas .pa-row:hover { background: rgba(200,162,75,.12); }
#praxis-atlas .pa-row.pa-sel { background: rgba(200,162,75,.22); outline: 2px solid #c8a24b; }
#praxis-atlas .pa-none { opacity: .55; }
#praxis-atlas .pa-area { font-weight: 600; }
#praxis-atlas .pa-n { text-align: right; color: var(--secondary, #667); white-space: nowrap; }
#praxis-atlas .pa-badge { color: #fff; padding: 1px 7px; border-radius: 3px; font-size: .68rem; white-space: nowrap; }
/* theme-flipping atlas palette: LIGHT by default; DARK under PaperMod data-theme=dark or system-dark */
#praxis-atlas { --pa-bg: var(--theme, #fbfaf7); --pa-node: #efe8d8; --pa-nst: #cabfa6; --pa-ink: #34322b; --pa-edge: #d2c9b4; --pa-brd: var(--border, #d8d2c4); --pa-hlf: #fbeaca; --pa-seedf: #e8c766; }
:root[data-theme="dark"] #praxis-atlas { --pa-bg: #0e1b2a; --pa-node: #1c2e42; --pa-nst: #3a5068; --pa-ink: #cdd6e0; --pa-edge: #3a5470; --pa-brd: #2c3e54; --pa-hlf: #24405c; --pa-seedf: #6f5a2c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #praxis-atlas { --pa-bg: #0e1b2a; --pa-node: #1c2e42; --pa-nst: #3a5068; --pa-ink: #cdd6e0; --pa-edge: #3a5470; --pa-brd: #2c3e54; --pa-hlf: #24405c; --pa-seedf: #6f5a2c; } }
#praxis-atlas .pa-svg { width: 100%; height: auto; background: var(--pa-bg); border: 1px solid var(--pa-brd); border-radius: 6px; }
#praxis-atlas .pa-edge { stroke: var(--pa-edge); stroke-width: 1; }
#praxis-atlas .pa-edge.pa-soft { stroke-dasharray: 3 3; }
#praxis-atlas .pa-node rect { fill: var(--pa-node); stroke: var(--pa-nst); stroke-width: 1; }
#praxis-atlas .pa-node text { fill: var(--pa-ink); font: 7.5px -apple-system, "Segoe UI", sans-serif; text-anchor: middle; pointer-events: none; }
#praxis-atlas .pa-node.pa-clickable { cursor: pointer; }
#praxis-atlas .pa-node.pa-clickable:hover rect { stroke: #c8a24b; stroke-width: 2; }
/* highlighted pathway */
#praxis-atlas .pa-dim .pa-node { opacity: .18; }
#praxis-atlas .pa-dim .pa-edge { opacity: .07; }
#praxis-atlas .pa-node.pa-hl { opacity: 1 !important; }
#praxis-atlas .pa-node.pa-hl rect { fill: var(--pa-hlf); stroke: #c8a24b; }
#praxis-atlas .pa-node.pa-seed rect { fill: var(--pa-seedf); stroke: #b8860b; stroke-width: 2; }
#praxis-atlas .pa-edge.pa-hl { opacity: 1 !important; stroke: #c8a24b; stroke-width: 1.5; }
@media (max-width: 640px) { #praxis-atlas .pa-node text { font-size: 9px; } }

/* ---- v2 (op 2026-08-26): centered header + legend on top, squares, tooltip, centered atlas ---- */
#praxis-atlas { position: relative; }
#praxis-atlas .pa-head { text-align: center; max-width: 760px; margin: 8px auto 12px; }
#praxis-atlas .pa-head .pa-h { font-size: 1.1rem; }
#praxis-atlas .pa-head .pa-hint { font-size: .82rem; }
#praxis-atlas .pa-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: .74rem; color: var(--secondary, #667); margin-top: 6px; }
#praxis-atlas .pa-legt { font-weight: 600; }
#praxis-atlas .pa-legi { display: inline-flex; align-items: center; gap: 4px; }
#praxis-atlas .pa-sq { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; vertical-align: middle; }
#praxis-atlas .pa-reset { margin-left: 12px; }
/* table now compact: squares + count, no text badges */
#praxis-atlas .pa-book { white-space: nowrap; }
#praxis-atlas .pa-book .pa-n { margin-left: 6px; font-size: .8rem; color: var(--secondary, #667); }
#praxis-atlas .pa-t td { padding: 5px 8px; }
#praxis-atlas .pa-t td.pa-area { font-size: .82rem; line-height: 1.2; }
/* atlas centered vertically in its half + more prominent */
#praxis-atlas .pa-atlas { justify-content: center; }
#praxis-atlas .pa-svg { flex: 0 0 auto; max-height: 540px; }
/* hover tooltip */
#praxis-atlas .pa-tip { position: absolute; z-index: 20; max-width: 300px; pointer-events: none; background: #10233a; color: #e7edf4; border: 1px solid #c8a24b; border-radius: 6px; padding: 8px 10px; font-size: .78rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
#praxis-atlas .pa-tip .pa-tipsum { color: #bcae8e; }
#praxis-atlas .pa-tip .pa-tiphint { color: #8ea2b8; font-size: .7rem; }

/* ---- v3 (op 2026-08-26): dropdown control + full-width atlas ---- */
#praxis-atlas .pa-atlas { padding: 0; display: block; }             /* full width, the star */
#praxis-atlas .pa-svg { width: 100%; max-height: 66vh; }
#praxis-atlas .pa-control { position: relative; text-align: center; margin: 6px 0 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; }
#praxis-atlas .pa-menubtn { font: inherit; font-size: .9rem; font-weight: 600; padding: 7px 14px; border: 1px solid #c8a24b; border-radius: 6px; background: #fbf6ea; color: #6f5a2c; cursor: pointer; }
#praxis-atlas .pa-menubtn:hover { background: #f4ead0; }
#praxis-atlas .pa-caret { display: inline-block; font-size: .7rem; transition: transform .15s; }
#praxis-atlas .pa-control.pa-open .pa-caret { transform: rotate(180deg); }
#praxis-atlas .pa-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; z-index: 30; width: min(420px, 92vw); max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid #cdc7ba; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); text-align: left; }
#praxis-atlas .pa-control.pa-open .pa-menu { display: block; }
#praxis-atlas .pa-mi { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: .84rem; border-bottom: 1px solid #eee; color: #1a1a1a; }
#praxis-atlas .pa-mi:hover { background: rgba(200,162,75,.14); }
#praxis-atlas .pa-mi-sel { background: rgba(200,162,75,.24); font-weight: 600; }
#praxis-atlas .pa-mi-all { font-style: italic; color: #444; }
#praxis-atlas .pa-mi-none { opacity: .8; }
#praxis-atlas .pa-mi-t { flex: 1 1 auto; color: #1a1a1a; }
#praxis-atlas .pa-mi-n { color: #555; font-size: .78rem; white-space: nowrap; }
#praxis-atlas .pa-detail { font-size: .82rem; color: var(--secondary, #556); display: inline-flex; align-items: center; gap: 6px; }