/* Reader role cues do not replace the formal map's status encodings. */
:root { --role-value:#956315; --role-connection:#176d73; --role-agency:#365f9d; --role-support:#79558a; --role-judgment:#35413f; }
.guided-opening { max-width:76ch; margin:0 0 22px; }
.guided-opening p { font-size:17px; line-height:1.65; }
.guided-opening h3 { margin:0 0 14px; font:500 clamp(25px,3vw,34px)/1.2 Georgia,serif; }
.guided-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:22px 0; }
.guided-path > section { position:relative; border-top:3px solid var(--role-support); padding:14px 0; min-width:0; }
.guided-path > section:first-child { border-color:#68746d; }
.guided-path > section:last-child { border-color:var(--role-judgment); }
.guided-path h4 { font:600 18px/1.3 system-ui,sans-serif; margin:0 0 8px; }
.guided-path p { font-size:16px; line-height:1.55; }
.guided-path button { min-height:44px; white-space:normal; text-align:left; margin-top:12px; }
#foundationExplorer {background:#fbfaf7}
#foundationExplorer .foundation-explorer-head {display:block;max-width:none;margin-bottom:20px}
#foundationExplorer .foundation-explorer-head > div {max-width:76ch;margin-inline:0}
#foundationExplorer #foundationExplorerTitle {font:500 clamp(30px,4vw,42px)/1.15 Georgia,serif}
#foundationExplorer .reader-episode {margin-top:0}
#foundationExplorer .reader-choice-strip {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#foundationExplorer .reader-choice-strip button {white-space:normal;text-align:left;font-size:16px}
#comparisonSpotlight .surface-inner {max-width:1160px}
#comparisonSpotlight .surface-hero {display:block;max-width:76ch;margin-bottom:22px}
#comparisonSpotlight .surface-hero h2 {font:500 clamp(30px,4vw,42px)/1.15 Georgia,serif}
#comparisonSpotlight .reader-episode {margin-top:0}
#comparisonSpotlight .reader-choice-strip button {white-space:normal;text-align:left;max-width:100%}
#comparisonMethod p {max-width:80ch;line-height:1.6}
#mapReaderModule .map-reader-head {max-width:78ch}
#mapReaderModule .reader-inspection {margin-block:22px}
#mapReaderModule .reader-episode > button {min-height:46px}
.reader-inspection summary {cursor:pointer;min-height:44px;padding-block:10px}
/* The relationship diagram shares the tour's role colors. Labels and dashed
   absent-condition borders retain distinctions independently of color. */
#atlasSvg .atlas-node[data-scene-id="valence"] > rect:first-child,
#atlasSvg .atlas-node[data-node-id="inherent-valence"] > rect:first-child,
#atlasSvg .atlas-node[data-node-id="valence-edge"] > rect:first-child {stroke:var(--role-value)}
#atlasSvg .atlas-node[data-scene-id="positioning"] > rect:first-child,
#atlasSvg .atlas-node[data-scene-id="identity"]:not([data-node-id="valence-edge"]):not([data-node-id="bender-edge"]) > rect:first-child,
#atlasSvg .atlas-node[data-node-id="relational-positioning"] > rect:first-child {stroke:var(--role-connection)}
#atlasSvg .atlas-node[data-tone="agency"] > rect:first-child {stroke:var(--role-agency)}
#atlasSvg .atlas-node[data-tone="bender"] > rect:first-child,
#atlasSvg .atlas-node[data-tone="provenance"] > rect:first-child {stroke:var(--role-support)}
#atlasSvg .atlas-node[data-tone="output"] > rect:first-child {stroke:var(--role-judgment)}
.atlas-role-key {display:flex;flex-wrap:wrap;gap:12px 20px;margin:12px 0;line-height:1.6;font-size:14px}
.atlas-role-key span {border-bottom:3px solid var(--role-judgment)}
.atlas-role-key .value {border-color:var(--role-value)}
.atlas-role-key .connection {border-color:var(--role-connection)}
.atlas-role-key .agency {border-color:var(--role-agency)}
.atlas-role-key .support {border-color:var(--role-support)}
@media(max-width:760px){
  .guided-path {grid-template-columns:1fr;gap:4px}
  .guided-path > section {padding-block:14px}
  #foundationExplorer .reader-choice-strip {grid-template-columns:1fr}
  .guided-opening p {font-size:16px}
}
