/* ============================================================
   RELATIONS BETWEEN CITIES — realms.html styles
   (loads after ../styles.css and city.css — reuses console shell;
    .alt-rail lives in city.css, shared with city.html)
   ============================================================ */

/* ============================================================
   THE LIVING MAP
   ============================================================ */
.map-shell{display:grid; gap:0; grid-template-columns:1fr;}
@media(min-width:980px){ .map-shell{grid-template-columns:1fr 330px;} }

.realm-map{
  position:relative; aspect-ratio:1000/640; min-height:340px;
  background:var(--bg-inset); overflow:hidden;
}
.realm-map svg.map-edges{position:absolute; inset:0; width:100%; height:100% !important; display:block;}

/* edges */
.redge{fill:none; stroke-linecap:round; transition:stroke 400ms var(--ease), opacity 400ms var(--ease);}
.redge.war{stroke-dasharray:7 6;}
.redge.embargo{stroke-dasharray:2 7; opacity:.65;}
@media (prefers-reduced-motion:no-preference){
  .redge.war{animation:edgemarch 700ms linear infinite;}
  @keyframes edgemarch{to{stroke-dashoffset:-13;}}
}
.redge-hit{fill:none; stroke:transparent; stroke-width:16;}
.edge-tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--accent-orange);}
.edge-tag.cold{fill:var(--text-faint);}

/* rumour pulse dot */
.rumour-dot{fill:var(--accent-orange);}
:root[data-theme="dark"] .rumour-dot{filter:drop-shadow(0 0 6px rgba(255,138,77,.8));}

/* city nodes — real buttons over the svg */
.rnode{
  position:absolute; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; cursor:pointer;
  background:var(--bg-surface); border:1.6px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:0; transition:border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.rnode .ring{ /* unrest ring, set via conic-gradient inline style */
  position:absolute; inset:3px; border-radius:50%;
  mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.rnode .core{
  width:12px; height:12px; border-radius:50%;
  background:var(--accent-blue); transition:background 300ms, transform 300ms;
}
:root[data-theme="dark"] .rnode{box-shadow:0 0 18px rgba(90,162,255,.10);}
.rnode:hover{border-color:var(--accent-blue);}
.rnode[aria-pressed="true"]{border-color:var(--accent-blue); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent-blue) 30%,transparent);}
.rnode.hot .core{background:var(--accent-orange);}
:root[data-theme="dark"] .rnode.hot{box-shadow:0 0 22px rgba(255,138,77,.25);}
.rnode .nlbl{
  position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-secondary); white-space:nowrap; pointer-events:none;
}
.rnode .nrole{
  position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.56rem; color:var(--text-faint); white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 200ms;
}
.rnode:hover .nrole, .rnode[aria-pressed="true"] .nrole{opacity:1;}

/* week readout on map */
.map-clock{
  position:absolute; top:12px; right:14px; font-family:var(--font-mono); font-size:.68rem;
  color:var(--text-muted); background:color-mix(in oklab,var(--bg-base) 72%,transparent);
  border:1px solid var(--border-hairline); border-radius:999px; padding:4px 12px; backdrop-filter:blur(5px);
}
.map-legend{
  position:absolute; bottom:10px; left:14px; display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.62rem; color:var(--text-faint);
}
.map-legend span{display:inline-flex; align-items:center; gap:6px;}
.map-legend i{display:inline-block; width:18px; border-top:2px solid var(--accent-blue);}
.map-legend .lg-res i{border-color:var(--accent-orange);}
.map-legend .lg-war i{border-top-style:dashed; border-color:var(--accent-orange);}
.map-legend .lg-emb i{border-top-style:dotted; border-color:var(--text-faint);}

/* trace / inspector panel */
.map-panel{
  border-top:1px solid var(--border-hairline); background:var(--bg-surface);
  padding:16px 18px; display:flex; flex-direction:column; gap:14px; min-height:340px;
}
@media(min-width:980px){ .map-panel{border-top:0; border-left:1px solid var(--border-hairline);} }
.map-panel .mp-hint{font-size:.86rem; color:var(--text-muted); margin:0;}
.mp-name{font-family:var(--font-display); font-size:1.5rem; color:var(--text-primary); line-height:1.1;}
.mp-role{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-top:2px;}
.mp-gauges{display:grid; gap:8px;}
.mp-g{display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center;}
.mp-g .k{font-family:var(--font-mono); font-size:.66rem; color:var(--text-muted);}
.mp-g .bar{height:5px; border-radius:3px; background:var(--bg-inset); overflow:hidden;}
.mp-g .bar i{display:block; height:100%; border-radius:3px; background:var(--accent-blue); transition:width 300ms var(--ease);}
.mp-g.heat .bar i{background:var(--accent-orange);}
.mp-g .w{font-family:var(--font-mono); font-size:.62rem; color:var(--text-faint); min-width:58px; text-align:right;}
.mp-rels{border-top:1px dashed var(--border-hairline); padding-top:12px; display:grid; gap:9px;}
.mp-rels .rh{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);}
.mp-rel{display:grid; grid-template-columns:minmax(72px,100px) 1fr auto; gap:10px; align-items:center;}
.mp-rel .who{font-family:var(--font-mono); font-size:.68rem; color:var(--text-secondary);}
.mp-rel .duo{display:flex; flex-direction:column; gap:3px;}
.mp-rel .duo .bar{height:4px; border-radius:2px; background:var(--bg-inset); overflow:hidden;}
.mp-rel .duo .bar i{display:block; height:100%; transition:width 300ms var(--ease);}
.mp-rel .duo .bar.t i{background:var(--accent-blue);}
.mp-rel .duo .bar.r i{background:var(--accent-orange);}
.mp-rel .word{font-family:var(--font-mono); font-size:.6rem; color:var(--text-faint); text-align:right; min-width:64px;}
.mp-why{border-top:1px dashed var(--border-hairline); padding-top:10px; margin:0; list-style:none; padding-left:0;
  font-family:var(--font-mono); font-size:.68rem; line-height:1.75; color:var(--text-muted); max-height:130px; overflow-y:auto;}
.mp-why .wk{color:var(--text-faint); margin-right:8px;}
.mp-why .hot{color:var(--accent-orange);}

/* map levers strip */
.map-levers{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; padding:14px 18px;
  border-top:1px solid var(--border-hairline); background:var(--bg-inset);}
.map-levers .lv-label{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-right:4px;}

/* determinism strip under map */
.det-strip{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  padding:12px 18px; border-top:1px solid var(--border-hairline);
  font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted);
}
.det-strip .ok{color:var(--accent-blue);}

/* ============================================================
   ROSETTA — one machinery, two altitudes
   ============================================================ */
.rosetta-fig .rf-labels{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:4px 18px 0;}
.rosetta-toggle{display:inline-flex; gap:2px; padding:3px; background:var(--bg-inset); border:1px solid var(--border-hairline); border-radius:999px;}
.rosetta-toggle button{
  cursor:pointer; border:0; background:transparent; color:var(--text-muted);
  font-family:var(--font-mono); font-size:.7rem; padding:6px 14px; border-radius:999px; letter-spacing:.04em;
  transition:color 180ms, background 180ms;
}
.rosetta-toggle button[aria-pressed="true"]{color:var(--text-primary); background:var(--bg-elevated); box-shadow:0 1px 4px rgba(0,0,0,.18);}
.rosetta-table{margin-top:30px; display:grid; gap:0; border:1px solid var(--border-hairline); border-radius:14px; overflow:hidden;}
.rt-head{display:grid; grid-template-columns:1fr 1fr; background:var(--bg-inset); border-bottom:1px solid var(--border-hairline);}
.rt-head > div{padding:12px 18px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;}
.rt-head .l{color:var(--accent-blue);} .rt-head .r{color:var(--accent-orange); border-left:1px dashed var(--border-hairline);}
.rt-row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px dashed var(--border-hairline); background:var(--bg-surface);}
.rt-row:last-child{border-bottom:0;}
.rt-row > div{padding:13px 18px; font-size:.9rem; color:var(--text-secondary);}
.rt-row .r{border-left:1px dashed var(--border-hairline);}
.rt-row .mono, .rt-row code{font-family:var(--font-mono); font-size:.8em; color:var(--text-primary);}
.rt-row .r em{color:var(--accent-orange-soft); font-style:italic;}

/* ============================================================
   ESCALATION SPIRAL
   ============================================================ */
.spiral-duo{display:grid; grid-template-columns:1fr; gap:14px; padding:16px 18px 4px;}
@media(min-width:760px){.spiral-duo{grid-template-columns:200px 1fr;}}
.sp-cities{display:flex; flex-direction:row; gap:14px; align-items:stretch;}
@media(min-width:760px){.sp-cities{flex-direction:column;}}
.sp-city{flex:1; border:1px solid var(--border-hairline); border-radius:12px; padding:12px 14px; background:var(--bg-inset);}
.sp-city .n{font-family:var(--font-display); font-size:1.12rem; color:var(--text-primary);}
.sp-city .s{font-family:var(--font-mono); font-size:.62rem; color:var(--text-faint); margin-top:2px;}
.sp-pole{font-family:var(--font-mono); font-size:.72rem; padding:10px 18px; color:var(--text-muted);}
.sp-pole b{color:var(--accent-blue); font-weight:500;}
.sp-pole.runaway b{color:var(--accent-orange);}
.backedge-note{font-family:var(--font-mono); font-size:.66rem; color:var(--text-faint); max-width:46ch;}

/* frontier cards reuse .afford/.aff; add tag positioning */
.aff .tag-chip{margin-bottom:10px; display:inline-block;}

/* close */
.realm-close{text-align:center; padding-bottom:clamp(60px,9vh,110px);}
.realm-close .onesentence{font-size:clamp(1.25rem,2.4vw,1.7rem); max-width:38ch;}

@media (max-width:680px){
  .rnode{width:50px; height:50px;}
  .rnode .nlbl{font-size:.54rem;}
  .rt-head, .rt-row{grid-template-columns:1fr;}
  .rt-head .r, .rt-row .r{border-left:0; border-top:1px dashed var(--border-hairline);}
  .rt-head .r{display:none;}
  .rt-row .r::before{content:"→ one altitude up · vision"; display:block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-orange); margin-bottom:6px;}
  .map-panel{min-height:0;}
}