/* ============================================================
   A WHOLE CITY — subpage styles (loads after ../styles.css)
   ============================================================ */

/* page rhythm */
.city-hero{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,8vh,110px) 28px clamp(30px,5vh,60px);}
.city-hero .display{font-size:clamp(2.4rem,5.6vw,4rem); margin-bottom:20px;}
.city-hero .lead{max-width:62ch;}

/* honesty banner — real vs frontier */
.honesty-split{
  display:grid; grid-template-columns:auto 1fr; gap:12px 16px; align-items:baseline;
  max-width:var(--prose); margin-top:26px; padding:18px 20px; border-radius:14px;
  background:var(--bg-surface); border:1px solid var(--border-hairline);
}
.honesty-split .hs-chip{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; white-space:nowrap; justify-self:start;
}
.honesty-split .hs-chip.real{color:var(--accent-blue); border:1px solid color-mix(in oklab,var(--accent-blue) 40%,transparent); background:color-mix(in oklab,var(--accent-blue) 9%,transparent);}
.honesty-split .hs-chip.vision{color:var(--accent-orange); border:1px solid color-mix(in oklab,var(--accent-orange) 40%,transparent); background:color-mix(in oklab,var(--accent-orange) 9%,transparent);}
.honesty-split p{margin:0; font-size:.92rem; color:var(--text-secondary);}

/* hero zoom rail — the three altitudes (shared: city.html + realms.html) */
.alt-rail{
  display:flex; flex-wrap:wrap; gap:0; margin-top:26px; align-items:stretch;
  border:1px solid var(--border-hairline); border-radius:14px; overflow:hidden;
  background:var(--bg-surface); max-width:var(--prose);
}
.alt-rail a, .alt-rail span.here{
  flex:1 1 0; min-width:150px; display:flex; flex-direction:column; gap:3px;
  padding:14px 18px; text-decoration:none; position:relative;
}
.alt-rail a + a, .alt-rail span.here + a, .alt-rail a + span.here{border-left:1px dashed var(--border-hairline);}
.alt-rail .r-k{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);}
.alt-rail .r-v{font-family:var(--font-display); font-size:1.05rem; color:var(--text-secondary); line-height:1.2;}
.alt-rail a:hover .r-v{color:var(--accent-blue);}
.alt-rail span.here{background:color-mix(in oklab,var(--accent-blue) 7%,transparent);}
.alt-rail span.here .r-k{color:var(--accent-blue);}
.alt-rail span.here .r-v{color:var(--text-primary);}

/* grounds-on chip row under each interactive's title */
.grounds{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted);
}
.grounds .g{
  border:1px dashed var(--border-strong); border-radius:999px; padding:4px 11px;
}
.grounds .g b{color:var(--accent-blue); font-weight:500;}

/* ============================================================
   CONSOLE FRAME — shared shell for the interactives
   ============================================================ */
.console{
  margin-top:34px; border:1px solid var(--border-strong); border-radius:16px;
  background:var(--bg-surface); box-shadow:var(--card-shadow); overflow:hidden;
}
.console .con-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--border-hairline);
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-muted);
}
.console .con-head .t{display:flex; align-items:center; gap:9px;}
.console .con-head .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-orange); box-shadow:var(--glow-orange);}
.console .con-body{padding:18px;}
.console svg{width:100%; height:auto; display:block; overflow:visible;}

/* controls strip */
.con-controls{
  display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center;
  padding:14px 18px; border-top:1px solid var(--border-hairline); background:var(--bg-inset);
}
.ctl{display:flex; align-items:center; gap:10px;}
.ctl-label{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap;}
.ctl input[type="range"]{accent-color:var(--accent-blue); width:150px;}
.ctl .ctl-val{font-family:var(--font-mono); font-size:.74rem; color:var(--accent-blue); min-width:64px;}

.con-btn{
  cursor:pointer; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em;
  color:var(--text-primary); background:var(--bg-elevated);
  border:1px solid var(--border-strong); border-radius:999px; padding:8px 16px;
  transition:border-color 180ms var(--ease), color 180ms, transform 180ms var(--ease), background 180ms;
  white-space:nowrap;
}
.con-btn:hover{border-color:var(--accent-blue); color:var(--accent-blue); transform:translateY(-1px);}
.con-btn.warn:hover{border-color:var(--accent-orange); color:var(--accent-orange);}
.con-btn:focus-visible{outline:2px solid var(--border-focus); outline-offset:2px;}
.con-btn[disabled]{opacity:.45; cursor:default; transform:none;}

/* trace log */
.con-log{
  margin:0; padding:12px 18px 16px; list-style:none; max-height:172px; overflow-y:auto;
  font-family:var(--font-mono); font-size:.74rem; line-height:1.8; color:var(--text-muted);
  border-top:1px solid var(--border-hairline);
}
.con-log li{display:flex; gap:12px;}
.con-log .wk{color:var(--text-faint); min-width:52px;}
.con-log .riot{color:var(--accent-orange);}
.con-log .note{color:var(--text-secondary);}
.con-log .ok{color:var(--accent-blue);}

/* sim svg text + lines piggyback on .sketch classes from main css */
.cs-legend{display:flex; flex-wrap:wrap; gap:8px 22px; padding:12px 18px 2px; font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted);}
.cs-legend span{display:inline-flex; align-items:center; gap:8px;}
.cs-legend i{display:inline-block; width:20px; height:0; border-top:2px solid var(--ink);}
.cs-legend .l-unrest i{border-color:var(--accent-blue);}
.cs-legend .l-fear i{border-color:var(--accent-blue); opacity:.45;}
.cs-legend .l-food i{border-top-style:dotted; border-color:var(--ink);}
.cs-legend .l-coh i{border-top-style:dashed; border-color:var(--ink);}
.cs-legend .l-leg i{border-color:var(--ink); opacity:.5;}
.cs-legend .l-thr i{border-top-style:dashed; border-color:var(--accent-orange);}

/* ============================================================
   RUMOUR CHAIN
   ============================================================ */
.rumour-chain{
  display:grid; gap:0; padding:6px 0 2px;
}
.hop{
  display:grid; grid-template-columns:30px minmax(110px,150px) 1fr auto; gap:6px 14px; align-items:start;
  padding:13px 6px; border-bottom:1px dashed var(--border-hairline);
  opacity:.32; transition:opacity 420ms var(--ease);
}
.hop:last-child{border-bottom:0;}
.hop.lit{opacity:1;}
.hop .h-node{display:flex; flex-direction:column; gap:2px;}
.hop .h-name{font-family:var(--font-display); font-size:1.06rem; color:var(--text-primary); line-height:1.15;}
.hop .h-role{font-family:var(--font-mono); font-size:.64rem; color:var(--text-faint); letter-spacing:.06em;}
.hop .h-text{font-size:.94rem; color:var(--text-secondary); font-style:italic; margin:0;}
.hop .h-text .mut{color:var(--accent-orange); font-style:italic;}
.hop .h-meta{display:flex; flex-direction:column; gap:5px; align-items:flex-end; min-width:120px;}
.hop .h-strength{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.64rem; color:var(--text-muted); white-space:nowrap;}
.hop .h-bar{width:64px; height:4px; border-radius:2px; background:var(--bg-inset); overflow:hidden;}
.hop .h-bar i{display:block; height:100%; background:var(--accent-blue); border-radius:2px;}
.hop .h-filter{font-family:var(--font-mono); font-size:.62rem; color:var(--text-faint); text-align:right; max-width:200px;}
.hop .h-glyph{padding-top:3px; color:var(--ink); opacity:.8;}
.hop .h-glyph svg{width:20px; height:20px; display:block;}
.rumour-compare{
  display:grid; gap:10px; padding:16px 18px; border-top:1px solid var(--border-hairline);
  font-size:.93rem; color:var(--text-secondary); background:var(--bg-inset);
  opacity:0; transition:opacity 400ms var(--ease);
}
.rumour-compare.show{opacity:1;}
.rumour-compare .rc-row{display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:baseline;}
.rumour-compare .rc-k{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);}
.rumour-compare .rc-v{font-style:italic;}
.rumour-compare .rc-v.changed{color:var(--accent-orange);}

/* ============================================================
   ALTITUDES — same physics, three clocks
   ============================================================ */
.alt-rows{display:grid; gap:4px; padding:6px 0;}
.alt-row{
  display:grid; grid-template-columns:minmax(120px,180px) 1fr minmax(90px,130px); gap:16px; align-items:center;
  padding:14px 6px; border-bottom:1px dashed var(--border-hairline);
}
.alt-row:last-child{border-bottom:0;}
.alt-id .a-name{font-family:var(--font-display); font-size:1.18rem; color:var(--text-primary);}
.alt-id .a-clock{font-family:var(--font-mono); font-size:.64rem; color:var(--text-faint); letter-spacing:.06em; margin-top:3px;}
.alt-row svg{width:100%; height:auto; display:block;}
.alt-tau{font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); text-align:right;}
.alt-tau b{color:var(--accent-blue); font-weight:500;}
.alt-eq{
  margin:10px 18px 16px; padding:13px 16px; border-radius:10px; background:var(--bg-inset);
  border:1px solid var(--border-hairline);
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-secondary); overflow-x:auto; white-space:nowrap;
}
.alt-eq b{color:var(--accent-blue); font-weight:600;}
.alt-eq .o{color:var(--accent-orange);}

/* ============================================================
   AFFORDABILITY CARDS
   ============================================================ */
.afford{display:grid; gap:16px; margin-top:34px;}
@media(min-width:760px){.afford{grid-template-columns:1fr 1fr 1fr;}}
.aff{
  padding:20px 20px 18px; border-radius:14px; background:var(--bg-surface);
  border:1px solid var(--border-hairline); box-shadow:var(--card-shadow);
}
.aff .a-glyph{width:40px; height:40px; color:var(--ink); margin-bottom:12px;}
.aff .a-glyph svg{width:100%; height:100%;}
.aff h3{font-family:var(--font-display); font-size:1.22rem; margin-bottom:7px;}
.aff p{margin:0; font-size:.9rem; color:var(--text-muted);}
.aff p b{color:var(--text-secondary); font-weight:500;}

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

/* compact header back-link */
.backlink{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted);
  padding:6px 10px; border-radius:8px; transition:color 160ms;
}
.backlink:hover{color:var(--text-primary);}

@media (max-width:680px){
  .hop{grid-template-columns:24px 1fr; grid-auto-rows:auto;}
  .hop .h-text{grid-column:1 / -1;}
  .hop .h-meta{grid-column:1 / -1; align-items:flex-start;}
  .hop .h-filter{text-align:left;}
  .alt-row{grid-template-columns:1fr; gap:8px;}
  .alt-tau{text-align:left;}
  .ctl input[type="range"]{width:120px;}
}