/* =========================================================
   Needs page — 인간 욕구 지도
   Colors: CSS custom properties only (dark mode via tokens).
   Need colors come from [data-need] → var(--n) (style.css).
   ========================================================= */

/* ---------- JS / no-JS helpers ---------- */
.needs-nojs { display: none; }
html:not(.js) .needs-nojs { display: block; }
html:not(.js) .needs-js-only { display: none !important; }

/* ---------- Hero ---------- */
.nh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.nh-hero .display { max-width: 13ch; }
@media (max-width: 960px) {
  .nh-hero { grid-template-columns: 1fr; align-items: start; }
}

.read-rules {
  position: relative;
  padding: 1.35rem 1.35rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.read-rules__spectrum { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 1.1rem; }
.read-rules__spectrum span { height: 4px; border-radius: 2px; background: var(--n); }
.read-rules__kicker { margin: 0 0 .25rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.read-rules__title { margin: 0 0 .9rem; font-size: 1.15rem; }
.read-rules__list { list-style: none; margin: 0; padding: 0; counter-reset: rrule; }
.read-rules__list li {
  position: relative;
  counter-increment: rrule;
  padding: .7rem 0 .7rem 2.3rem;
  border-top: 1px dashed var(--rule);
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.read-rules__list li::before {
  content: counter(rrule, decimal-leading-zero);
  position: absolute; left: 0; top: .78rem;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--accent);
}
.read-rules__list b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }

/* ---------- Notices ---------- */
.notices .callout { font-size: 15px; padding: 1.2rem 1.35rem; }
.notices .callout__title { margin-bottom: .6rem; }
.notices .callout a { color: var(--accent); }

/* ---------- §01 Golden rule: one person, four scenes ---------- */
.moment-fig .figure__body { padding-bottom: clamp(1.1rem, 3vw, 1.5rem); }
.moment-fig figcaption a { color: var(--accent); }
.moment-fig__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.moment {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.moment::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(1.5rem + .5rem + 5.5px);
  border-top: 1px dashed var(--rule-strong);
}
.moment__scene { position: relative; min-width: 0; display: flex; flex-direction: column; }
.moment__time {
  display: block; height: 1.5rem; line-height: 1.5rem;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-3);
}
.moment__dot {
  position: relative; display: block;
  width: 12px; height: 12px; margin: .5rem 0 .9rem;
  border-radius: 50%; background: var(--n);
  box-shadow: 0 0 0 4px var(--surface);
}
.moment__card {
  flex: 1;
  display: flex; flex-direction: column;
  padding: .95rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--n);
  border-radius: var(--radius-lg);
}
.moment__ctx { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .6rem; font-size: 15px; font-weight: 600; color: var(--ink); }
.moment__circle {
  padding: .02rem .45rem;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; color: var(--ink-3);
  white-space: nowrap;
}
.moment__line { margin: 0 0 .6rem; font-family: var(--font-serif); font-size: 15px; line-height: 1.62; color: var(--ink); }
.moment__cue { margin: 0 0 .85rem; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.moment__need {
  display: flex; align-items: center; gap: .5rem;
  margin: auto 0 0; padding-top: .7rem;
  border-top: 1px dashed var(--rule);
  font-size: 13.5px; color: var(--ink-2);
}
.moment__need .glyph { width: 22px; height: 22px; }
.moment__need b { margin-right: .3rem; color: var(--ink); font-weight: 700; }
.moment-fig__same {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.2rem 0 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.moment-fig__rule {
  flex: 1; height: 6px; border-radius: 3px; opacity: .6;
  background: linear-gradient(90deg, var(--n-pity), var(--n-intelligence), var(--n-significance), var(--n-acceptance));
}
@media (max-width: 960px) {
  .moment { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.35rem; }
  .moment::before { display: none; }
}
@media (max-width: 560px) {
  .moment { grid-template-columns: 1fr; gap: 0; }
  .moment::before { display: block; left: 5.5px; right: auto; top: .6rem; bottom: 1.4rem; border-top: 0; border-left: 1px dashed var(--rule-strong); }
  .moment__scene { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: .9rem; padding-bottom: 1.1rem; }
  .moment__time { grid-column: 2; grid-row: 1; }
  .moment__dot { grid-column: 1; grid-row: 1; margin: .4rem 0 0; }
  .moment__card { grid-column: 2; grid-row: 2; margin-top: .35rem; }
  .moment-fig__same { flex-wrap: wrap; }
  .moment-fig__rule { flex-basis: 100%; order: 3; }
}

.rule-cards { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.rule-card h3 { margin: .85rem 0 .45rem; font-size: 1.12rem; }
.rule-card p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------- §02 Needs map ---------- */
.nmap__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.nmap__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.nmap__status { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); }

.nmap__tier + .nmap__tier { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--rule-strong); }
.nmap__tier-label { margin: 0 0 .85rem; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nmap__tier-label .mono { margin-right: .6rem; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.nmap__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.nmap__node {
  position: relative;
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.1rem 1.1rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--n);
  border-radius: var(--radius-lg);
  color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.nmap__node:hover { border-color: var(--n); transform: translateY(-2px); box-shadow: var(--shadow); }
.nmap__node:focus-visible { outline-offset: 3px; }
.nmap__ring {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: .55rem;
  border: 1.5px solid var(--n); border-radius: 50%;
  background: color-mix(in srgb, var(--n) 9%, transparent);
}
.nmap__ring .glyph { width: 28px; height: 28px; }
.nmap__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nmap__name { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.nmap__name small { margin-left: .45rem; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); }
.nmap__gist { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.nmap__fear { margin-top: .45rem; padding-top: .5rem; border-top: 1px dashed var(--rule); font-size: 13px; color: var(--ink-3); }
.nmap__kin {
  align-self: flex-start;
  margin-top: .55rem; padding: .05rem .5rem;
  border: 1px dashed var(--n); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-2);
}
.nmap__cousin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: .5rem 0 0; }
.nmap__cousin span {
  grid-column: 2 / 4;
  position: relative;
  padding-top: .75rem;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-3);
}
.nmap__cousin span::before {
  content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: .5rem;
  border: 1.5px solid var(--rule-strong); border-top: 0; border-radius: 0 0 6px 6px;
}
@media (max-width: 860px) {
  .nmap__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nmap__cousin { display: none; }
}
@media (max-width: 560px) { .nmap__nodes { grid-template-columns: 1fr; } }

/* ---------- §03 Atlas ---------- */
.atlas-caveat { margin: 0 0 .5rem; max-width: 80ch; color: var(--ink-3); }
.atlas-tier {
  display: flex; align-items: center; gap: .8rem;
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.atlas-tier .mono { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.atlas-tier::after { content: ""; flex: 1; border-top: 1px solid var(--rule-strong); }

.need {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.need + .need { border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .need { grid-template-columns: 1fr; } }

.need__plate {
  position: sticky; top: calc(var(--header-h) + 1.25rem);
  align-self: start;
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--n);
  border-radius: var(--radius-lg);
  transition: box-shadow .3s ease;
}
@media (max-width: 900px) { .need__plate { position: static; } }
.need:target .need__plate { box-shadow: 0 0 0 3px color-mix(in srgb, var(--n) 35%, transparent); }
.need__plate-head {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.need__specimen {
  display: grid; place-items: center;
  margin: .8rem 0 1rem;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--n) 7%, transparent);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
}
.need__specimen .glyph { width: 64px; height: 64px; }
/* P2 specimen raster: fills the 16:9 box; the glyph stays as a small badge */
.need__specimen { position: relative; overflow: hidden; }
.need__specimen > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; }
.need__specimen > img + .glyph {
  position: absolute; right: .45rem; bottom: .45rem; z-index: 1;
  width: 36px; height: 36px; padding: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--rule); border-radius: 50%;
}
:root[data-theme="dark"] .need__specimen > img { filter: brightness(.84) contrast(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .need__specimen > img { filter: brightness(.84) contrast(1.05); } }
.need__name { margin: 0 0 .35rem; font-size: clamp(1.45rem, 2.4vw, 1.75rem); }
.need__name small { margin-left: .3rem; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); }
.need__signal {
  margin: 0 0 1rem;
  padding-left: .8rem;
  border-left: 2px solid var(--n);
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; line-height: 1.55; color: var(--ink);
}
.need__kv { margin-bottom: 1rem; font-size: 14px; }
.need__kv dt { font-size: 10.5px; }
.need__back {
  display: block; margin-top: .9rem;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-3); text-decoration: none;
}
.need__back:hover { color: var(--accent); text-decoration: underline; }

.need__body { min-width: 0; }
.need__body h4 {
  margin: 0 0 .6rem;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.need__lead { margin: 0 0 1.5rem; max-width: 68ch; font-size: 1.06rem; line-height: 1.85; color: var(--ink); }
.need__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .need__cols { grid-template-columns: 1fr; } }

.cues { list-style: none; margin: 0; padding: 0; }
.cues li { position: relative; margin: .3rem 0; padding-left: 1.5rem; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cues li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 11px;
  border: 1.5px solid var(--n); border-radius: 2px;
}
.cues li::after {
  content: ""; position: absolute; left: 3px; top: calc(.42em + 3px);
  width: 5px; height: 5px; border-radius: 1px; background: var(--n);
}
.need__fear { margin: 0 0 1.5rem; max-width: 70ch; font-size: 15.5px; color: var(--ink-2); }

.heard {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.need__body .heard__label { font-size: 10.5px; }
.heard__list { list-style: none; margin: 0; padding: 0; counter-reset: heard; }
.heard__list li {
  counter-increment: heard;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline;
  padding: .45rem 0;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-serif); font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.heard__list li:first-child { border-top: 0; }
.heard__list li::before {
  content: counter(heard, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--n);
}

.need__pair { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; }
@media (max-width: 760px) { .need__pair { grid-template-columns: 1fr; } }
.power, .respond { padding: 1rem 1.1rem; border-radius: var(--radius-lg); font-size: 14.5px; color: var(--ink-2); }
.power { border: 1px dashed var(--rule-strong); }
.power p { margin: 0; }
.power strong { color: var(--ink); }
.respond {
  background: color-mix(in srgb, var(--n) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--n) 30%, var(--rule));
}
.need__body .power__label, .need__body .respond__label { margin: 0 0 .5rem; font-size: 10.5px; }
.need__body .respond__label { color: var(--ink); }
.respond ul { margin: 0 0 .75rem; padding-left: 1.1em; }
.respond li { margin: .3em 0; }
.respond li::marker { color: var(--n); }
.respond__avoid {
  margin: 0; padding-top: .7rem;
  border-top: 1px dashed color-mix(in srgb, var(--n) 35%, var(--rule));
  font-size: 13.5px;
}
.respond__avoid b { margin-right: .4rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--signal); }
.need__caution {
  margin: 1.1rem 0 0;
  padding: .8rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.need__caution b { margin-right: .5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink); }
.need__ethics { margin-bottom: 1.5rem; }
.need__ethics p { font-size: 14.5px; }

/* ---------- §04 Circles ---------- */
.circles {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 900px) { .circles { grid-template-columns: 1fr; } }
.circles__plot { min-width: 0; }
.circles__ticks {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0 0 .5rem;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.circles-fig figcaption a { color: var(--accent); }
.csvg { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.cring { cursor: pointer; }
.cring circle { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1.25; transition: fill .2s ease, stroke .2s ease; }
.cring:hover circle { fill: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cring.is-active circle { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); stroke: var(--accent); stroke-width: 2; }
.cdots, .clabels, .ccenter { pointer-events: none; }
.cdots circle { fill: var(--ink-3); opacity: .5; transition: fill .2s, opacity .2s; }
.clabels text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; fill: var(--ink-3); }
.csvg[data-active="1"] .cdots [data-circle="1"],
.csvg[data-active="2"] .cdots [data-circle="2"],
.csvg[data-active="3"] .cdots [data-circle="3"],
.csvg[data-active="4"] .cdots [data-circle="4"] { fill: var(--accent); opacity: .9; }
.csvg[data-active="1"] .clabels [data-circle="1"],
.csvg[data-active="2"] .clabels [data-circle="2"],
.csvg[data-active="3"] .clabels [data-circle="3"],
.csvg[data-active="4"] .clabels [data-circle="4"] { fill: var(--ink); font-weight: 600; }
.ccenter circle { fill: var(--ink); }
.ccenter text { font-family: var(--font-serif); font-size: 15px; font-weight: 700; fill: var(--paper); }

.circles__info { min-width: 0; }
.ctabs { margin-bottom: 1.1rem; }
.ctab__n {
  display: inline-grid; place-items: center;
  width: 1.35rem; height: 1.35rem; margin-right: .45rem;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  font-size: 11px;
}
.tab[aria-selected="true"] .ctab__n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cpanel { border-radius: var(--radius); }
.cpanel:focus-visible { outline-offset: 6px; }
.cpanel__kicker { margin: 0 0 .25rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cpanel__title { margin: 0 0 .5rem; font-size: 1.4rem; }
.cpanel__desc { font-size: 15.5px; color: var(--ink-2); }
.cpanel__kv { padding-top: .9rem; border-top: 1px solid var(--rule); font-size: 14.5px; }
html:not(.js) .ctabs { display: none; }
html:not(.js) .cpanel[hidden] { display: block !important; }
html:not(.js) .cpanel + .cpanel { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--rule); }

/* Self map (assignment 06) */
.self {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.self__kicker, .nlog__kicker, .loop__kicker { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.self__title { margin: .3rem 0 .45rem; font-size: 1.3rem; }
.self__desc { max-width: 70ch; margin-bottom: 1.25rem; font-size: 15px; color: var(--ink-2); }
.self__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
}
@media (max-width: 820px) { .self__grid { grid-template-columns: 1fr; } }
.self__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
@media (max-width: 520px) { .self__fields { grid-template-columns: 1fr; } }
.self__note { grid-column: 1 / -1; }
.self__note .textarea { min-height: 72px; }
.self__who { margin-left: .35rem; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.self__summary {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
@media (max-width: 420px) { .self__summary { flex-direction: column; align-items: stretch; } .self__rings { align-self: center; } }
.self__rings { display: block; width: 140px; height: 140px; flex-shrink: 0; }
.sring { fill: none; stroke: var(--rule); stroke-width: 11; transition: stroke .25s ease; }
.sring[data-need] { stroke: var(--n); }
.sring.is-unsure { stroke: var(--ink-3); stroke-width: 5; stroke-dasharray: 3 4; }
.sring__core { fill: var(--ink); }
.self__legend { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.self__legend li {
  display: grid; grid-template-columns: 10px auto minmax(0, 1fr); align-items: center; gap: .5rem;
  padding: .38rem 0;
  border-bottom: 1px dashed var(--rule-strong);
}
.self__legend li:last-child { border-bottom: 0; }
.self__ring-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }
.self__ring-val { text-align: right; font-weight: 600; color: var(--ink); }
.self__legend li.is-empty .self__ring-val { font-weight: 400; color: var(--ink-3); }
.self__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.self__reflect { flex: 1 1 360px; margin: 0; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.self__actions { display: flex; align-items: center; gap: .75rem; }
.self__status { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }

.privacy-note { margin: 1rem 0 0; color: var(--ink-3); }
.privacy-note .mono { margin-right: .5rem; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.privacy-note code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-2); padding: .05em .35em; border-radius: 3px; }

/* Operating loop */
.loop {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 960px) { .loop { grid-template-columns: 1fr; } }
.loop__title { margin: .3rem 0 .5rem; font-size: 1.25rem; }
.loop__intro p:last-child { margin: 0; font-size: 15px; color: var(--ink-2); }
.loop__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 1100px) { .loop__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .loop__steps { grid-template-columns: 1fr; } }
.loop__steps li { padding: 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.loop__n { display: block; margin-bottom: .35rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.loop__steps b { display: block; margin-bottom: .3rem; font-size: 15.5px; color: var(--ink); }
.loop__steps p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- §05 Quiz ---------- */
.quiz {
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.quiz__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  margin-bottom: .75rem;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--ink-3);
}
.quiz__label { letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.quiz__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-variant-numeric: tabular-nums; }
.quiz__stage { padding-top: 1.25rem; }
.quiz__intro { max-width: 64ch; }
.quiz__intro > .card-img { max-width: 560px; margin-bottom: 1.1rem; }
.quiz__title { margin: 0 0 .6rem; font-size: 1.35rem; }
.quiz__intro p { font-size: 15.5px; color: var(--ink-2); }
.quiz__intro p.small { font-size: 13.5px; color: var(--ink-3); }

.qcard__scene { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 .75rem; }
.qcard__scene:focus { outline: none; }
.qcard__n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-3); }
.qcard__ctx { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.qcard__cue {
  margin: 0 0 1rem;
  padding: .6rem .85rem;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  font-size: 14.5px; color: var(--ink-2);
}
.qcard__cue b { margin-right: .55rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qcard__line {
  margin: 0 0 1.25rem;
  padding: .25rem 0 .25rem 1.1rem;
  border-left: 2px solid var(--ink);
  font-family: var(--font-serif); font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.6; color: var(--ink);
}
.qcard__ask { margin: 0 0 .6rem; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.qopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 640px) { .qopts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qopt {
  display: flex; align-items: center; gap: .6rem;
  min-width: 0;
  padding: .7rem .8rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--n);
  border-radius: var(--radius);
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.qopt .glyph { width: 22px; height: 22px; color: var(--n); }
.qopt small { display: block; margin-top: .1rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--ink-3); }
.qopt:hover { background: color-mix(in srgb, var(--n) 8%, var(--surface)); border-color: var(--n); }
.qopt[aria-disabled="true"] { cursor: default; }
.qopt[aria-disabled="true"]:hover { background: var(--surface); border-color: var(--rule-strong); border-left-color: var(--n); }
.qopt[aria-disabled="true"]:not(.is-correct):not(.is-wrong) { opacity: .45; }
.qopt.is-correct, .qopt.is-correct:hover {
  background: color-mix(in srgb, var(--ev-strong) 12%, var(--surface));
  border-color: var(--ev-strong);
  box-shadow: inset 0 0 0 1px var(--ev-strong);
}
.qopt.is-wrong, .qopt.is-wrong:hover {
  background: color-mix(in srgb, var(--signal) 9%, var(--surface));
  border-color: var(--signal);
}
.qopt__mark { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.qopt.is-correct .qopt__mark { color: var(--ev-strong); }
.qopt.is-wrong .qopt__mark { color: var(--signal); }
@media (max-width: 380px) { .qopt { padding: .6rem .6rem; gap: .45rem; font-size: 14px; } .qopt .glyph { width: 18px; height: 18px; } }

.qfb { margin-top: 1rem; }
.qfb__box {
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-left: 3px solid var(--ev-strong);
  border-radius: var(--radius-lg);
}
.qfb__box.is-wrong { border-left-color: var(--signal); }
.qfb__verdict { margin: 0 0 .4rem; font-weight: 700; color: var(--ink); }
.qfb__verdict .mono { margin-right: .55rem; font-size: 11px; letter-spacing: .1em; color: var(--ev-strong); }
.qfb__box.is-wrong .qfb__verdict .mono { color: var(--signal); }
.qfb__why { margin: 0 0 .5rem; font-size: 15px; color: var(--ink-2); }
.qfb__alt { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.qfb__alt b { margin-right: .5rem; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); }
.qnav { display: flex; justify-content: flex-end; margin-top: 1rem; }

.qres__title { margin: 0 0 .6rem; font-size: 1.35rem; }
.qres__title:focus { outline: none; }
.qres__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: .75rem; }
.qres__score { margin: 0; font-family: var(--font-serif); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.qres__score small { margin-left: .2em; font-family: var(--font-mono); font-size: .4em; font-weight: 500; color: var(--ink-3); }
.qres__best { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--ink-3); }
.qres__best.is-new { color: var(--ev-strong); }
.qres__msg { max-width: 64ch; font-size: 15.5px; color: var(--ink-2); }
.qres__sub { margin: 1.25rem 0 .6rem; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qbars { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.75rem; }
@media (max-width: 560px) { .qbars { grid-template-columns: 1fr; } }
.qbars li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .7rem; font-size: 14px; }
.qbars__name { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); }
.qbars__track { height: 8px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.qbars__fill { display: block; height: 100%; background: var(--n); border-radius: 999px; }
.qbars__val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-3); }
.qres__confuse { margin: 0 0 1rem; padding: .75rem .95rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); font-size: 14px; color: var(--ink-2); }
.qres__confuse b { color: var(--ink); }
.qres__note { font-size: 13px; color: var(--ink-3); }
.qres__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- §05 Observation note ---------- */
.nlog {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule-strong);
}
.nlog__title { margin: .3rem 0 .45rem; font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.nlog__desc { max-width: 70ch; margin-bottom: 1.25rem; font-size: 15px; color: var(--ink-2); }
.nlog__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (max-width: 900px) { .nlog__grid { grid-template-columns: 1fr; } }
.nlog__form {
  display: flex; flex-direction: column; gap: .95rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.nlog__form .textarea { min-height: 88px; }
.nlog__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .9rem; }
@media (max-width: 480px) { .nlog__row { grid-template-columns: 1fr; } }
.nlog__opt, .nlog__req { margin-left: .35rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
.nlog__req { color: var(--signal); }
.nlog__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.nlog__chips .chip { padding: .36rem .72rem; font-size: 13px; }
.nlog__chips .chip[aria-pressed="true"] .need-dot { box-shadow: 0 0 0 2px var(--paper); }
.nlog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding-top: .3rem; }
.nlog__status { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.textarea[aria-invalid="true"] { border-color: var(--signal); }

.nlog__side { min-width: 0; }
.nlog__listhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.nlog__count { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nlog__count:focus { outline: none; }
.nlog__bars {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.25rem;
  margin: 0 0 1rem; padding: .75rem .9rem;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.nlog__bars:empty { display: none; }
@media (max-width: 420px) { .nlog__bars { grid-template-columns: 1fr; } }
.nlog__bars li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 1.8rem; align-items: center; gap: .5rem; font-size: 12.5px; color: var(--ink-2); }
.nlog__bar { height: 6px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.nlog__bar span { display: block; height: 100%; background: var(--n); border-radius: 999px; }
.nlog__bars .mono { font-size: 11px; text-align: right; color: var(--ink-3); }
.nlog__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; max-height: 760px; overflow-y: auto; }
.nlog__list:empty { display: none; }
.nlog__item { padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.nlog__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
  margin: 0 0 .55rem;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3);
}
.nlog__del { margin-left: auto; }
.nlog__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .55rem; }
.nlog__tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .08rem .55rem;
  border: 1px solid var(--n); border-radius: 999px;
  font-size: 12.5px; color: var(--ink);
}
.nlog__rows { margin: 0; }
.nlog__rows > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .7rem; padding: .32rem 0; border-top: 1px dashed var(--rule); }
.nlog__rows dt { padding-top: .15rem; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--ink-3); }
.nlog__rows dd { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 420px) { .nlog__rows > div { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- §06 Origins & superpowers ---------- */
.origin-card { border-top: 3px solid var(--n); overflow: hidden; }
/* P2 card image bleeds to the card edges, under the 3px need-colored top border */
.origin-card > .card-img {
  --card-ar: 3 / 2;
  --bleed: clamp(1.2rem, 2.5vw, 1.6rem); /* = .card padding */
  width: calc(100% + 2 * var(--bleed)); max-width: none;
  margin: calc(-1 * var(--bleed)) calc(-1 * var(--bleed)) 1rem;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.origin-card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.origin-card .glyph { width: 28px; height: 28px; }
.origin-card h3 { margin: .7rem 0 .4rem; font-size: 1.1rem; }
.origin-card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.origin-caveat { margin-top: clamp(1.5rem, 3vw, 2rem); }
.powers-title { margin: clamp(2rem, 4vw, 2.75rem) 0 1rem; font-size: 1.3rem; }
.powers { min-width: 680px; }
.mapping { min-width: 760px; }
.powers tbody th, .mapping tbody th { white-space: nowrap; }
.powers tbody th .need-dot, .mapping tbody th .need-dot { margin-right: .45rem; }
.powers td em { font-style: normal; color: var(--ink-3); }
.mapping td:nth-child(2) { white-space: nowrap; }
.mapping .evidence { font-size: 10.5px; }

/* ---------- §07 Research ---------- */
.research-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0 0 1rem; font-size: 1.2rem; }
.research-sub .mono { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.research-card { display: flex; flex-direction: column; }
.research-card > p { font-size: 14.5px; color: var(--ink-2); }
.research-card > .research-card__kicker { margin: .9rem 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.research-card h4 { margin: .35rem 0 .55rem; font-size: 1.1rem; }
.research-card > .research-card__link { margin: auto 0 0; padding-top: .8rem; border-top: 1px dashed var(--rule); font-size: 13.5px; color: var(--ink-3); }

.layers {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
@media (max-width: 760px) { .layers { grid-template-columns: 1fr; } }
.layers__title { margin: .8rem 0 .5rem; font-size: 1.15rem; }
.layers__text p { font-size: 14.5px; color: var(--ink-2); }
.layers__text p:last-child { margin-bottom: 0; }
.layers__fig { display: block; width: 100%; max-width: 280px; height: auto; margin-inline: auto; }
.layers__ring { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.layers__ring--core { fill: var(--accent); stroke: var(--accent); }
.layers__arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.layers__lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }

.limits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
@media (max-width: 760px) { .limits { grid-template-columns: 1fr; } }
.limits__col { padding: 1.2rem 1.35rem; }
.limits__col--no { border-left: 1px solid var(--rule); }
@media (max-width: 760px) { .limits__col--no { border-left: 0; border-top: 1px solid var(--rule); } }
.limits__title { margin: 0 0 .7rem; font-size: 1.05rem; }
.limits__title .mono { display: block; margin-bottom: .2rem; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-strong); }
.limits__col--no .limits__title .mono { color: var(--signal); }
.limits ul { margin: 0; padding-left: 1.1em; font-size: 14.5px; color: var(--ink-2); }
.limits li { margin: .35em 0; }
.research-more { margin: 1.4rem 0 0; font-size: 15px; color: var(--ink-2); }
.research-more a { color: var(--accent); font-weight: 600; }

/* ---------- §08 Weekly checklist ---------- */
.wk {
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.wk__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.wk__progress { display: flex; align-items: center; gap: .8rem; flex: 1 1 260px; max-width: 420px; }
.wk__progress .progress { flex: 1; }
.wk__text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.wk__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.wk__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .9rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
}
.wk__item input { width: 18px; height: 18px; margin: .3rem 0 0; cursor: pointer; }
.wk__item label { cursor: pointer; }
.wk__n { margin-right: .6rem; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--accent); }
.wk__item b { font-size: 15.5px; color: var(--ink); }
.wk__desc { display: block; margin-top: .2rem; font-size: 14.5px; color: var(--ink-2); }
.wk__item.is-done b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.wk__go { padding-top: .25rem; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.wk__go::after { content: " →"; }
.wk__go:hover { text-decoration: underline; }

/* ---------- References & related ---------- */
.refs-title { margin-bottom: .5rem; font-size: 1.35rem; }
.refs li { scroll-margin-top: calc(var(--header-h) + 24px); }
.refs li:target { background: var(--accent-soft); }
.refs-note { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--rule-strong); color: var(--ink-3); }
.related-card { display: flex; flex-direction: column; }
.related-card .card__title { display: block; font-family: var(--font-serif); font-weight: 700; line-height: 1.35; }
.related-card .card__body { display: block; font-size: 14px; }

/* ---------- Print ---------- */
@media print {
  .nmap__bar, .ctabs, .self__actions, .quiz, .nlog__form, .nlog__del, #nlog-clear, .wk__status { display: none !important; }
  .cpanel[hidden] { display: block !important; }
  .need__plate { position: static; }
  .need, .moment__card, .nmap__node { break-inside: avoid; }
  .nlog__list { max-height: none; overflow: visible; }
}