/* Didaktisk relasjonsmodell — styles. Family language shared with the
   Constructive Alignment playground and the Community of Inquiry page. */

:root {
  /* text-only shades of the accent colours, 4.5:1 or better on every course background (30 Sep 2026) */
  --text-ochre: #855c15; --text-green: #4c6a3a; --text-brown: #8e4f22;
  --paper: #f5f2ea;
  --card: #fcfaf4;
  --inset: #efeadd;
  --ink: #23261f;
  --ink-soft: #474b40;
  --muted: #6b6557;
  --hair: #ddd6c4;
  --hair-strong: #c9c1ab;
  --danger: #a8442c;
  --danger-soft: #f4e6df;
  --ok: #587d4b;
  --ok-soft: #e9eedd;
  --warn: #b7822f;
  --ai: #6c58a8;
  --ai-soft: #ece7f4;
  --ai-deep: #574687;
  --c-outcomes: #34708b;
  --c-activities: #5d7b49;
  --c-assessment: #a25e2e;
  --font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

.app { min-height: 100vh; display: flex; flex-direction: column; }
.app.type-editorial { --font-head: var(--font-display); }
.app.type-grotesk { --font-head: var(--font-ui); }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 26px 44px 0 44px;
  border-bottom: 1px solid var(--hair-strong);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  transition: border-color 0.4s ease;
}
.app.is-ai .masthead { border-bottom-color: color-mix(in oklab, var(--ai) 45%, var(--hair-strong)); }

.masthead-id { padding-bottom: 18px; }

.masthead-eyebrow {
  margin: 0 0 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.masthead-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.masthead-sub {
  margin: 3px 0 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.masthead-controls { display: flex; align-items: stretch; gap: 26px; }

.posture-tabs { display: flex; gap: 4px; }

.posture-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-ui);
  transition: color 0.15s ease;
}
.posture-tab:hover { color: var(--ink-soft); }
.posture-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.posture-tab-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.posture-tab-name { font-size: 15.5px; font-weight: 600; }
.posture-tab-hint { font-size: 11.5px; color: var(--muted); }

/* AI lens switch */
.ai-switch {
  appearance: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0 0 16px 0;
  align-self: flex-end;
  font-family: var(--font-ui);
}
.ai-switch-track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: var(--inset);
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex: none;
}
.ai-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.25s ease, background 0.25s ease;
}
.ai-switch.is-on .ai-switch-track { background: var(--ai-soft); border-color: var(--ai); }
.ai-switch.is-on .ai-switch-knob { transform: translateX(18px); background: var(--ai); }
.ai-switch-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.ai-switch-name { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.ai-switch.is-on .ai-switch-name { color: var(--ai-deep); }
.ai-switch-state { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(420px, 11fr) minmax(420px, 10fr);
  gap: 44px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 44px 64px 44px;
  flex: 1;
  align-items: start;
}

.stage { position: sticky; top: 20px; }

.stage-caption {
  margin: 2px auto 0 auto;
  max-width: 460px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.stage-caption .ai-word { color: var(--ai-deep); }

.stage-legend {
  margin: 12px auto 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  max-width: 520px;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.legend-chip svg { display: block; }

.panel { min-width: 0; }

/* ---------- diagram ---------- */

.drm-svg { width: 100%; height: auto; display: block; }

.ctx-ring {
  fill: none;
  stroke: var(--hair);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  transition: stroke 0.4s ease;
}
.ring-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--muted);
}

.means-ground {
  fill: var(--c-assessment);
  opacity: 0.08;
  transition: fill 0.5s ease, opacity 0.5s ease;
}
.is-ai .means-ground { fill: var(--ai); opacity: 0.09; }
.means-outline {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1.2;
  transition: stroke 0.5s ease;
}
.is-ai .means-outline { stroke: color-mix(in oklab, var(--ai) 40%, var(--hair-strong)); }
.means-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--muted);
}
.is-ai .means-label { fill: var(--ai-deep); }

/* edges */
.drm-edge-hit { stroke: transparent; stroke-width: 26; fill: none; }
.drm-edge { cursor: pointer; }
.drm-edge-line {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1.8;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
}
.drm-edge.is-idle .drm-edge-line { opacity: 0.75; }
.drm-edge.is-spine.is-idle .drm-edge-line {
  stroke: color-mix(in oklab, var(--ink-soft) 45%, var(--hair-strong));
  stroke-width: 2.6;
  opacity: 0.9;
}
.drm-edge.is-dim .drm-edge-line { opacity: 0.22; }

.drm-edge.is-lit .drm-edge-line { stroke-width: 2.6; }
.drm-edge.is-lit.given-pullable .drm-edge-line { stroke: var(--ink-soft); }
.drm-edge.is-lit.given-pull-on-you .drm-edge-line { stroke: var(--warn); stroke-dasharray: 7 5; }
.drm-edge.is-lit.given-mixed .drm-edge-line { stroke: var(--ink-soft); stroke-dasharray: 12 4 3 4; }
.drm-edge.is-hover .drm-edge-line { stroke-width: 3.4; }

/* direction flow */
.drm-edge-flow {
  fill: none;
  stroke: var(--muted);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1.5 13;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.drm-edge.is-lit .drm-edge-flow { opacity: 0.8; }
.drm-edge.is-lit.given-pull-on-you .drm-edge-flow { stroke: var(--warn); }
.motion-on .drm-edge.is-lit .drm-edge-flow { animation: drm-flow 1.7s linear infinite; }
@keyframes drm-flow { to { stroke-dashoffset: -14.5; } }
.drm-edge.dir-rev .drm-edge-flow { animation-direction: reverse; }

.drm-arrow { fill: var(--ink-soft); transition: opacity 0.3s ease; }
.drm-edge.given-pull-on-you .drm-arrow { fill: var(--warn); }
.drm-edge.is-at-risk .drm-arrow { fill: var(--ai); }

/* at-risk (AI lens) */
.drm-edge.is-at-risk .drm-edge-line {
  stroke: var(--ai);
  stroke-dasharray: 4 6;
  opacity: 0.9;
}
.drm-edge.is-at-risk .drm-edge-flow { stroke: var(--ai); }
.drm-edge.is-at-risk.is-flagship .drm-edge-line { stroke-width: 3.2; }
.motion-on .drm-edge.is-at-risk.is-flagship .drm-quake { animation: drm-quake 2.6s ease-in-out infinite; }
@keyframes drm-quake {
  0%, 88%, 100% { transform: translate(0, 0); }
  90% { transform: translate(1.2px, -0.8px); }
  93% { transform: translate(-1.1px, 0.7px); }
  96% { transform: translate(0.7px, 0.5px); }
}

.drm-break line { stroke: var(--ai); stroke-width: 2.6; stroke-linecap: round; }
.drm-break { opacity: 0; transition: opacity 0.35s ease; }
.drm-edge.is-at-risk .drm-break { opacity: 1; }

/* context bands — the surround */
.drm-band { cursor: pointer; }
.drm-band-shape {
  fill: var(--inset);
  stroke: var(--hair-strong);
  stroke-width: 1.25;
  transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.35s ease;
}
.drm-band:hover .drm-band-shape {
  fill: color-mix(in oklab, var(--muted) 12%, var(--inset));
}
.drm-band.is-selected .drm-band-shape {
  fill: color-mix(in oklab, var(--muted) 18%, var(--inset));
  stroke: var(--ink-soft);
  stroke-width: 1.75;
}
.drm-band { transition: opacity 0.35s ease; }
.drm-band.is-dim { opacity: 0.4; }
.drm-band-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  fill: var(--ink);
  letter-spacing: 0.01em;
}
.drm-band-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  fill: var(--muted);
}

/* nodes */
.drm-node { cursor: pointer; }
.drm-node-dot {
  transition: transform 0.25s ease, fill 0.3s ease, stroke 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.node-outcomes .drm-node-dot { fill: var(--c-outcomes); }
.node-activities .drm-node-dot { fill: var(--c-activities); }
.node-assessment .drm-node-dot { fill: var(--c-assessment); }
.node-context .drm-node-dot { fill: var(--card); stroke: var(--muted); stroke-width: 2; }

.drm-node-halo {
  fill: none;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.node-outcomes .drm-node-halo { stroke: var(--c-outcomes); fill: var(--c-outcomes); fill-opacity: 0.1; }
.node-activities .drm-node-halo { stroke: var(--c-activities); fill: var(--c-activities); fill-opacity: 0.1; }
.node-assessment .drm-node-halo { stroke: var(--c-assessment); fill: var(--c-assessment); fill-opacity: 0.1; }
.node-context .drm-node-halo { stroke: var(--muted); fill: var(--muted); fill-opacity: 0.08; }
.drm-node:hover .drm-node-halo { opacity: 0.55; }
.drm-node.is-selected .drm-node-halo { opacity: 1; }
.drm-node.is-selected .drm-node-dot { transform: scale(1.22); }
.drm-node.is-dim { opacity: 0.4; }
.drm-node, .drm-core { transition: opacity 0.35s ease; }

.drm-node-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 7px;
  stroke-linejoin: round;
}
.drm-node-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--muted);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
}

/* core */
.drm-core { cursor: pointer; }
.drm-core-circle {
  fill: var(--ink);
  transition: fill 0.4s ease;
}
.drm-core.is-selected .drm-core-circle { fill: #161811; }
.drm-core-halo {
  fill: none;
  stroke: var(--ink);
  opacity: 0;
  stroke-width: 1.5;
  transition: opacity 0.25s ease;
}
.drm-core:hover .drm-core-halo { opacity: 0.4; }
.drm-core.is-selected .drm-core-halo { opacity: 0.9; }
.drm-core-word {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 500;
  fill: var(--paper);
}
.drm-core-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--hair-strong);
}
.drm-core.is-dim { opacity: 0.45; }

/* AI weight ticks on nodes (lens on) */
.drm-ai-mark { opacity: 0; transition: opacity 0.4s ease; }
.is-ai .drm-ai-mark { opacity: 1; }
.drm-ai-mark circle { fill: var(--ai); }
.drm-ai-mark text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: #fff;
}

/* flags */
.drm-flag path { transition: fill 0.3s ease; }
.drm-flag.flag-flagged path { fill: var(--danger); }
.drm-flag.flag-reworked path { fill: var(--ok); }
.drm-flag line { stroke: var(--ink-soft); stroke-width: 1.6; }

/* ---------- panel cards ---------- */

.panel-stack { display: flex; flex-direction: column; gap: 18px; }
.panel-anim { animation: panel-in 0.4s ease; }
@keyframes panel-in { from { transform: translateY(10px); opacity: 0.4; } }
.motion-off .panel-anim { animation: none; }

.detail-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 24px 26px;
}

.detail-kicker {
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kicker-dot.tier-context { background: var(--card); border: 2px solid var(--muted); }
.kicker-dot.tier-core { background: var(--ink); border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px; }

.posture-chip {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--ink-soft);
}
.posture-chip.is-gen { border-color: color-mix(in oklab, var(--ok) 50%, var(--hair-strong)); color: var(--text-green); }
.posture-chip.is-learn { border-color: color-mix(in oklab, var(--c-outcomes) 50%, var(--hair-strong)); color: var(--c-outcomes); }

.learn-body {
  margin: 0 0 10px 0;
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
.learn-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  border-top: 1px solid var(--hair);
  padding: 13px 0;
}
.learn-row:last-child { padding-bottom: 4px; }
.learn-row-glyph {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 2px;
  text-align: center;
}
.learn-row-name { margin: 0 0 4px 0; font-family: var(--font-head); font-size: 16.5px; font-weight: 500; }
.learn-row-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.word-note {
  margin-top: 16px;
  background: var(--inset);
  border-radius: 6px;
  padding: 13px 16px;
  box-shadow: inset 3px 0 0 var(--hair-strong);
}
.word-note-kicker {
  margin: 0 0 5px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.word-note-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.word-note-body em { font-family: var(--font-head); }

.detail-title {
  margin: 0 0 2px 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.detail-no {
  margin: 0 0 14px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.posture-q {
  margin: 0 0 6px 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 18.5px;
  line-height: 1.5;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--hair-strong);
  text-wrap: pretty;
}
.type-grotesk .posture-q { font-style: normal; font-size: 16.5px; font-weight: 500; }
.posture-q-note {
  margin: 10px 0 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* relations */
.rel-head {
  margin: 22px 0 8px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rel-list { display: flex; flex-direction: column; }
.rel-row {
  appearance: none;
  background: none;
  border: none;
  border-top: 1px solid var(--hair);
  text-align: left;
  font-family: var(--font-ui);
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 6px 12px 2px;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--ink);
}
.rel-row:last-child { border-bottom: 1px solid var(--hair); }
.rel-row:hover { background: var(--inset); }
.rel-dir {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-soft);
  padding-top: 1px;
  text-align: center;
}
.rel-row.given-pull-on-you .rel-dir { color: var(--text-ochre); }
.rel-row.is-at-risk .rel-dir { color: var(--ai); }
.rel-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 4px; }
.rel-name { font-size: 15px; font-weight: 600; }
.rel-given {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 1.5px 8px;
  white-space: nowrap;
  flex: none;
}
.rel-row.given-pull-on-you .rel-given { color: var(--text-ochre); border-color: color-mix(in oklab, var(--warn) 45%, var(--hair)); }
.rel-risk {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep);
  background: var(--ai-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex: none;
}
.rel-reading { grid-column: 2; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.rel-go { grid-column: 2; font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0; transition: opacity 0.15s ease; }
.rel-row:hover .rel-go { opacity: 1; }

/* AI overlay card */
.ai-card {
  background: var(--ai-soft);
  border: 1px solid color-mix(in oklab, var(--ai) 35%, var(--hair));
  border-radius: 8px;
  padding: 18px 20px;
}
.ai-card-kicker {
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai-deep);
}
.ai-weight {
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--ai);
  color: #fff;
  border-radius: 3px;
  padding: 2px 7px;
}
.ai-card-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.ai-card-text strong { color: var(--ai-deep); }

/* notes */
.note-block { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.note-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.note-saved { font-size: 10px; letter-spacing: 0.08em; color: var(--text-green); }
.note-input {
  width: 100%;
  resize: vertical;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  min-height: 88px;
}
.note-input:focus { outline: none; border-color: var(--hair-strong); }
.note-input::placeholder { color: var(--muted); opacity: 0.75; }

.carry-context {
  background: var(--inset);
  border-radius: 6px;
  padding: 13px 16px;
  box-shadow: inset 3px 0 0 var(--danger);
}
.carry-context-kicker {
  margin: 0 0 5px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--danger);
}
.carry-context-text {
  margin: 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.type-grotesk .carry-context-text { font-style: normal; font-size: 14px; }
.carry-context-edge {
  margin: 7px 0 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* flag controls */
.flag-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.flag-btn {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.flag-btn:hover { border-color: var(--ink); }
.flag-btn.is-flagged { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.flag-btn.is-reworked { background: var(--ok-soft); border-color: var(--ok); color: var(--text-green); }
.flag-glyph { font-size: 14px; }
.flag-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* go deeper */
.deepen { border-top: 1px solid var(--hair); margin-top: 24px; padding-top: 4px; }
.deepen-toggle {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.deepen-toggle:hover { color: var(--ink); }
.deepen-caret { font-size: 16px; color: var(--muted); }
.deepen-body { padding: 4px 2px 8px 2px; }
.deepen-origin {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.door-list { display: flex; flex-direction: column; gap: 10px; }
.door-card {
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 15px 17px;
  background: var(--card);
}
.door-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 8px;
}
.door-badge.b-deeper { color: var(--ai-deep); border-color: color-mix(in oklab, var(--ai) 40%, var(--hair)); }
.door-badge.b-choice { color: var(--text-green); border-color: color-mix(in oklab, var(--ok) 40%, var(--hair)); }
.door-name {
  margin: 0 0 6px 0;
  font-family: var(--font-head);
  font-size: 17.5px;
  font-weight: 500;
}
.door-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.door-link {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 1px;
}
.door-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.door-refs { margin: 14px 0 0 0; padding: 0; list-style: none; }
.door-refs li {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

.back-link {
  appearance: none;
  background: none;
  border: none;
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding: 0 0 1px 0;
}
.back-link:hover { color: var(--ink); border-bottom-color: var(--hair-strong); }

/* ---------- overview ---------- */

.ov-intro { margin: 0 0 4px 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.ov-posture-line {
  margin: 14px 0 0 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  padding-left: 16px;
  border-left: 3px solid var(--hair-strong);
}
.type-grotesk .ov-posture-line { font-style: normal; font-size: 15px; font-weight: 500; }

.entry-btn {
  appearance: none;
  width: 100%;
  text-align: left;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color 0.15s ease;
}
.entry-btn:hover { border-color: var(--hair-strong); }
.entry-btn-arrow { font-family: var(--font-mono); font-size: 16px; color: var(--muted); }
.entry-btn-text { display: flex; flex-direction: column; gap: 1px; }
.entry-btn-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.entry-btn-name { font-size: 15px; font-weight: 600; color: var(--ink); }

/* flagged queue */
.queue-card {
  border: 1px solid color-mix(in oklab, var(--danger) 35%, var(--hair));
  background: var(--card);
  border-radius: 8px;
  padding: 18px 20px;
}
.queue-kicker {
  margin: 0 0 4px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--danger);
}
.queue-lead { margin: 0 0 12px 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.queue-list { display: flex; flex-direction: column; gap: 7px; }
.queue-item {
  appearance: none;
  text-align: left;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.queue-item:hover { border-color: var(--hair-strong); background: var(--inset); }
.queue-item-flag { font-size: 13px; }
.queue-item.q-flagged .queue-item-flag { color: var(--danger); }
.queue-item.q-reworked .queue-item-flag { color: var(--text-green); }
.queue-item-name { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.queue-item-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* legend list of elements */
.tier-group { margin-top: 4px; }
.tier-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 4px 0;
}
.tier-label-sub { text-transform: none; letter-spacing: 0.02em; font-size: 11px; color: var(--hair-strong); color: var(--muted); opacity: 0.8; }
.el-row {
  appearance: none;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--hair);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 6px 11px 2px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s ease;
  color: var(--ink);
}
.el-row:hover { background: var(--inset); }
.el-row-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.el-row-dot.d-core { border-radius: 2px; transform: rotate(45deg); width: 11px; height: 11px; }
.el-row-text { flex: 1; display: flex; flex-direction: column; gap: 0; }
.el-row-name { font-size: 15px; font-weight: 600; }
.el-row-lead { font-size: 14px; color: var(--muted); line-height: 1.45; }
.el-row-marks { display: flex; align-items: center; gap: 7px; }
.el-mark-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.el-mark-flag { font-size: 12px; }
.el-mark-flag.f-flagged { color: var(--danger); }
.el-mark-flag.f-reworked { color: var(--text-green); }
.el-row-arrow { color: var(--muted); font-family: var(--font-mono); font-size: 13px; transition: transform 0.15s ease; }
.el-row:hover .el-row-arrow { transform: translateX(3px); color: var(--ink); }

/* download */
.download-block {
  border: 1px solid var(--hair);
  background: var(--inset);
  border-radius: 8px;
  padding: 17px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.download-copy { flex: 1 1 240px; }
.download-title { margin: 0 0 3px 0; font-family: var(--font-head); font-size: 16.5px; font-weight: 500; }
.download-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.download-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-btn {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dl-btn:hover { border-color: var(--ink); }
.dl-btn:disabled { opacity: 0.4; cursor: default; }
.dl-btn:disabled:hover { border-color: var(--hair-strong); }

.exp-step { animation: panel-in 0.3s ease; }
.motion-off .exp-step { animation: none; }
.exp-count {
  margin: 14px 0 10px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.exp-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.exp-controls .back-link { margin-left: auto; }
.dl-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dl-btn-primary:hover { background: var(--ink-soft); }

/* ai framing card (overview, lens on) */
.ai-framing { border-color: color-mix(in oklab, var(--ai) 35%, var(--hair)); }

/* ---------- history / appendix ---------- */

.hist-steps { display: flex; flex-direction: column; }
.hist-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  border-top: 1px solid var(--hair);
  padding: 13px 0;
}
.hist-year { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-top: 3px; }
.hist-name { margin: 0 0 4px 0; font-family: var(--font-head); font-size: 16.5px; font-weight: 500; }
.hist-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.hist-img { width: 100%; max-width: 320px; border: 1px solid var(--hair); border-radius: 6px; display: block; }
.hist-img-wrap { margin: 6px 0 16px 0; }
.hist-img-cap { margin: 7px 0 0 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.changes-list { margin: 10px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.changes-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.changes-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--hair-strong);
}

/* ---------- colophon ---------- */

.colophon {
  border-top: 1px solid var(--hair-strong);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 44px 26px 44px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.colophon p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.colophon a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--hair-strong); }
.colophon a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 1060px) {
  .layout { grid-template-columns: 1fr; gap: 22px; padding: 22px 24px 48px 24px; }
  .stage { position: static; max-width: 560px; margin: 0 auto; width: 100%; }
  .masthead { padding: 20px 24px 0 24px; }
  .masthead-controls { width: 100%; justify-content: space-between; }
  .colophon { padding: 16px 24px 22px 24px; }
}

@media (max-width: 560px) {
  .masthead-title { font-size: 23px; white-space: normal; }
  .posture-tab { padding: 10px 10px 12px 10px; }
  .posture-tab-name { font-size: 13.5px; }
  .posture-tab-hint { display: none; }
  .download-block { flex-direction: column; align-items: stretch; }
  .hist-step { grid-template-columns: 1fr; gap: 3px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .drm-edge-flow, .drm-quake { animation: none !important; }
  .panel-anim { animation: none !important; }
}

/* ---------- 29 Sep 2026: one way in, the walk and the first sketch ---------- */
.el-nav-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.el-nav-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.el-nav-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; }
.el-step { appearance: none; background: var(--card); border: 1px solid var(--hair-strong); border-radius: 6px; padding: 9px 12px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; justify-self: start; text-align: left; }
.el-step:hover { border-color: var(--ink); }
.el-step-next { justify-self: end; text-align: right; }
.el-dots { display: flex; gap: 7px; }
.el-dot { appearance: none; width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid var(--dot, var(--muted)); background: var(--card); cursor: pointer; }
.el-dot.is-current { background: var(--dot, var(--ink)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--dot, var(--ink)) 25%, transparent); }
.think { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--hair); }
.think-label { margin: 12px 0 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.think .posture-q { margin-top: 0; }
.sk-item { border-top: 1px solid var(--hair); border-left: 3px solid var(--dot, var(--hair-strong)); padding: 12px 0 12px 12px; margin-top: 12px; }
.sk-name { margin: 0 0 2px; font-family: var(--font-head); font-size: 17px; font-weight: 500; }
.sk-q { display: block; margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.sk-whole { margin-top: 20px; font-weight: 600; color: var(--ink); }
.sk-input { width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 15px; padding: 8px 10px; border: 1px solid var(--hair-strong); border-radius: 6px; background: #fff; color: var(--ink); }
.sk-input:focus { outline: 2px solid var(--dot, var(--ink)); outline-offset: 1px; }
.sk-ratings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sk-rate-label { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.sk-rate { appearance: none; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--card); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.sk-rate.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); }
@media (max-width: 560px) {
  .el-nav-bottom { grid-template-columns: 1fr 1fr; }
  .el-dots { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
}

/* one session, seven elements */
.ses-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ses-pick { appearance: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-soft); background: var(--card); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.ses-pick:hover { border-color: var(--ink); }
.ses-pick.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.ses-pick.is-ai.is-on { background: var(--ai); border-color: var(--ai); }
.ses-intro { margin: 4px 0 12px; font-size: 14.5px; line-height: 1.55; font-weight: 600; color: var(--ink); }
.ses-rows { display: flex; flex-direction: column; gap: 8px; }
.ses-row { border-left: 3px solid var(--dot, var(--hair-strong)); padding: 6px 0 6px 12px; transition: opacity 0.2s ease; }
.ses-row.is-still { opacity: 0.55; }
.ses-row.is-moved { background: color-mix(in oklab, var(--dot, var(--ink)) 7%, transparent); border-radius: 0 6px 6px 0; }
.ses-name { margin: 0 0 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--font-head); font-size: 16px; font-weight: 500; }
.ses-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ses-badge.is-moved { color: var(--ink); }
.ses-badge.is-start { color: var(--card); background: var(--ink); padding: 1px 6px; border-radius: 3px; }
.ses-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.ses-row.is-moved .ses-text { color: var(--ink); }

/* 29 Sep 2026: say that the figure can be clicked, and give a clear way back to the overview */
.stage-hint {
  margin: 0 0 10px 0; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
}
.stage-hint::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: var(--ink-soft); box-shadow: 0 0 0 4px var(--hair);
}
.stage-back {
  appearance: none; display: block; margin: 0 auto 10px auto; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 6px 16px;
}
.stage-back:hover, .stage-back:focus-visible { border-color: var(--ink); }
.el-home { margin: 14px 0 0 0; text-align: center; }
.hist-note { margin: 10px 0 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.hist-words { margin: 8px 0 0 0; border-top: 1px solid var(--hair); }
.hist-words > div { display: grid; grid-template-columns: minmax(7em, 30%) 1fr; gap: 3px 14px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.hist-words dt { font-family: var(--font-head); font-size: 15px; line-height: 1.3; }
.hist-words dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.hist-words-cl { display: block; margin-bottom: 2px; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .hist-words > div { grid-template-columns: 1fr; } }

/* ---------- the figure (1 Oct 2026): two triangles round the purpose, after Hiim & Hippe's circle ----------
   Replaces the dots, bands and edges above (.drm-node, .drm-band, .drm-edge, .means-ground: no longer drawn). */
.drm-fig .drm-rel { pointer-events: none; transition: opacity 0.35s ease; }
.drm-rel-line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; transition: stroke-width 0.3s ease; }
.drm-rel-hd { fill: currentColor; }
.drm-rel.kind-ring { color: #b3aa94; }
.drm-rel.kind-ring .drm-rel-line { stroke-width: 1.2; }
.drm-rel.kind-cond { color: #938a78; }
.drm-rel.kind-spoke { color: var(--ink-soft); }
.drm-rel.kind-spine { color: #2f332b; }
.drm-rel.kind-spine .drm-rel-line { stroke-width: 2.5; }
.drm-rel.is-dim { opacity: 0.14; }
.drm-rel.is-near { opacity: 0.85; }
.drm-rel.is-lit { color: var(--sel-c); }
.drm-rel.is-lit .drm-rel-line { stroke-width: 2.8; }
.drm-rel.is-lit.kind-spine .drm-rel-line { stroke-width: 3.4; }
.drm-rel.is-lit.given-pull-on-you { color: var(--warn); }
.drm-rel.is-lit.given-pull-on-you .drm-rel-line { stroke-dasharray: 7 5; }
.drm-rel.is-lit.given-mixed .drm-rel-line { stroke-dasharray: 12 4 3 4; }
.drm-rel.is-hover .drm-rel-line { stroke-width: 3.8; }
.drm-rel.is-at-risk { color: var(--ai); opacity: 0.95; }
.drm-rel.is-at-risk .drm-rel-line { stroke-dasharray: 4 6; }
.drm-rel.is-at-risk.is-flagship .drm-rel-line { stroke-width: 3.4; }
.drm-rel.is-at-risk .drm-break { opacity: 1; }
.motion-on .drm-rel.is-at-risk.is-flagship .drm-quake { animation: drm-quake 2.6s ease-in-out infinite; }

.drm-pt { cursor: pointer; transition: opacity 0.35s ease; }
.drm-pt path { transition: fill 0.5s ease; }
.drm-ai-ring { fill: none; stroke: var(--ai); opacity: 0.9; }
.drm-pt.is-dim { opacity: 0.4; }
.drm-pt.is-near { opacity: 0.75; }

.drm-el { cursor: pointer; transition: opacity 0.35s ease; }
.drm-el:focus { outline: none; }
.drm-el-hit { fill: transparent; }
.drm-el-label { font-family: var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; fill: var(--muted); }
.el-outcomes .drm-el-label { fill: var(--c-outcomes); }
.el-activities .drm-el-label { fill: var(--text-green); }
.el-assessment .drm-el-label { fill: var(--text-brown); }
.drm-el:hover .drm-el-label, .drm-el:focus-visible .drm-el-label, .drm-el.is-selected .drm-el-label { text-decoration: underline; text-underline-offset: 3px; }
.drm-el.is-dim { opacity: 0.35; }
.drm-core:focus { outline: none; }
.drm-core:focus-visible .drm-core-halo { opacity: 0.9; }
.drm-fig .drm-core-word { font-size: 23px; }

.means-label.drm-ca { font-size: 11px; letter-spacing: 0.14em; paint-order: stroke; stroke: #ebe6da; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.has-sel .drm-ca { opacity: 0.45; }

@media (max-width: 520px) {
  .drm-el-label { font-size: 21px; }
  .means-label.drm-ca { font-size: 13px; }
}

/* the original figures in the appendix (originals.js, 1 Oct 2026): Bjørndal & Lieberg in ink, Hiim & Hippe in greys */
.orig { margin: 6px 0 18px 0; }
.orig-switch { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 3px; background: var(--paper); margin-bottom: 10px; }
.orig-switch button { font: 500 12.5px var(--font-ui); color: var(--ink-soft); background: none; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.orig-switch button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.orig-switch button:focus-visible { outline: 2px solid var(--c-outcomes); outline-offset: 2px; }
.orig-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; touch-action: manipulation; }
.orig-svg text { font-family: var(--font-ui); font-weight: 500; font-size: 17px; letter-spacing: 0.01em; fill: var(--ink); }
.orig-pentagon text { font-weight: 600; }
.orig-svg .rel { color: #3a3d35; transition: opacity 0.25s ease; }
.orig-svg .rel.ring { color: #8f8778; }
.orig-pentagon .rel, .orig-pentagon .rel.ring { color: var(--ink); }
.orig-svg .rel .ln { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; transition: stroke-width 0.2s ease; }
.orig-pentagon .rel .ln { stroke-width: 1.6; }
.orig-svg .rel .hd { fill: currentColor; }
.orig-svg .rel .hit { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.orig-svg .rel.on { color: var(--ink); }
.orig-svg .rel.on .ln { stroke-width: 2.8; }
.orig-svg .lab { cursor: pointer; transition: opacity 0.25s ease; }
.orig-svg .lhit { fill: transparent; }
.orig-svg.focus .rel { opacity: 0.12; }
.orig-svg.focus .rel.on { opacity: 1; }
.orig-svg.focus .lab { opacity: 0.3; }
.orig-svg.focus .lab.on, .orig-svg.focus .lab.near { opacity: 1; }
.orig-readout { min-height: 96px; margin-top: 8px; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.orig-readout p { margin: 4px 0 0 0; }
.orig-readout b { color: var(--ink); }
.orig-gl, .orig-hint { color: var(--muted); }
.orig-now { font-weight: 600; }
@media (max-width: 520px) { .orig-svg text { font-size: 21px; } }