/* Stadtwerk economy & content UI (M5 / M7 / M8 UI step): budget, investments, advisors, ordinances, population,
   goals, milestones, transit, service inspector, event cards, ladder screens, tier-up, newspaper, quarterly report.
   Same rules as style.css: 1x UI pixels, pixel font, palette variables of style.css :root, no inline styles. */

/* ---- shared pieces ---- */
.portrait {
  display: block;
  flex: none;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--steel-lo);
}
.ec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 4px;
}
.ec-tab {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 6px;
  border: 0;
  color: var(--dim);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  background: rgba(7, 8, 10, 0.55);
  box-shadow: inset 0 0 0 1px #23262d;
  cursor: pointer;
}
.ec-tab:hover {
  color: var(--text);
}
.ec-tab.on {
  color: var(--brass-hi);
  background: var(--face2);
  box-shadow: inset 0 -2px 0 var(--brass), inset 0 0 0 1px var(--steel-lo);
}
.ec-badge {
  min-width: 11px;
  padding: 0 2px;
  color: var(--ink);
  background: var(--amber);
  text-align: center;
  line-height: calc(11px * var(--fz));
}
.ec-badge[hidden] {
  display: none;
}
.st-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 2px 0 4px;
}
.st-tile {
  min-width: 0;
  padding: 3px 4px;
  background: rgba(7, 8, 10, 0.45);
  box-shadow: inset 0 0 0 1px #23262d;
}
.st-l {
  overflow: hidden;
  color: var(--dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-v {
  overflow: hidden;
  color: var(--brass-hi);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-s {
  overflow: hidden;
  color: var(--mute);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-tile.good .st-v {
  color: var(--good);
}
.st-tile.bad .st-v {
  color: var(--bad);
}
.st-tile.warn .st-v {
  color: var(--warn);
}
.band-0 .st-v,
.dw-row.band-0 .dw-wb {
  color: #9be070;
}
.band-1 .st-v,
.dw-row.band-1 .dw-wb {
  color: var(--good);
}
.band-2 .st-v,
.dw-row.band-2 .dw-wb {
  color: var(--amber);
}
.band-3 .st-v,
.band-4 .st-v,
.dw-row.band-3 .dw-wb,
.dw-row.band-4 .dw-wb {
  color: var(--bad);
}
.kv.kv-total {
  border-top: 1px solid var(--steel-lo);
  margin-top: 2px;
  font-weight: 700;
}
.kv.kv-warn .kv-v {
  color: var(--warn);
}
.kv.kv-good .kv-v {
  color: var(--good);
}
.kv.band-3 .kv-v,
.kv.band-4 .kv-v {
  color: var(--bad);
}
.kv.band-0 .kv-v,
.kv.band-1 .kv-v {
  color: var(--good);
}
.ec-sel,
.ec-num {
  height: 20px;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  color: var(--text);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
}
.ec-num {
  width: 84px;
}
.ec-sel option {
  color: var(--text);
  background: var(--face);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0;
}
.btn.on {
  color: var(--brass-hi);
}
.btn.dim {
  opacity: 0.6;
}
.chip-bad {
  color: #ffd2c8;
  background: #4a1a14;
  box-shadow: inset 0 0 0 1px #8a3020;
}

/* slider rows with a preview line */
.ecs {
  margin: 2px 0 3px;
}
.ecs-top {
  display: grid;
  grid-template-columns: 96px 1fr 58px;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.ecs-l {
  overflow: hidden;
  color: var(--dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-v {
  color: var(--brass-hi);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ecs-pv {
  display: flex;
  gap: 4px;
  min-height: 0;
  padding-left: 102px;
  color: var(--cyan-hi);
  font-size: calc(12px * var(--fz));
}
.ecs-pv:empty {
  display: none;
}
.ecs-pv.neg {
  color: #ffb8a8;
}
.ecs-pv.pos {
  color: #c8f0b0;
}
.ecs-pv.lock {
  color: var(--mute);
}
.ecs.off .sl-input {
  opacity: 0.4;
}

/* money bars */
.mb-row {
  display: grid;
  grid-template-columns: 104px 1fr 64px;
  align-items: center;
  gap: 6px;
  min-height: 16px;
}
.mb-l {
  overflow: hidden;
  color: var(--dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-bar {
  position: relative;
  height: 6px;
  background: var(--ink);
  box-shadow: 0 0 0 1px #2a2f3a;
}
.mb-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--brass);
}
.mb-fill.good {
  background: var(--teal);
}
.mb-fill.bad {
  background: var(--rust);
}
.mb-v {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bud-trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 2px 0;
}
.bud-dsel,
.hol-new,
.inv-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
}
.hol-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 2px 0;
}

/* investments */
.inv-debt,
.inv-lb,
.deal-card,
.nb-card {
  margin: 3px 0;
  padding: 4px 5px;
  background: rgba(7, 8, 10, 0.4);
  box-shadow: inset 0 0 0 1px #23262d;
}
.id-top,
.dc-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.id-name,
.dc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.id-rem {
  color: var(--brass-hi);
}
.id-sub,
.dc-exp,
.inv-desc {
  color: var(--mute);
}
.inv-pv {
  color: var(--cyan-hi);
  margin: 1px 0 3px;
}
.dc-text {
  margin: 2px 0;
  color: var(--dim);
}
.dc-kv {
  display: flex;
  gap: 6px;
}
.dc-k {
  flex: none;
  width: 34px;
  color: var(--brass);
}
.dc-kv.risk .dc-k {
  color: var(--amber);
}
.dc-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 3px 0;
}
.cstrip {
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: 30px;
  padding: 0 1px;
  background: var(--ink);
}
.cs-cell {
  position: relative;
  width: 6px;
  height: 30px;
}
.cs-bar {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--teal);
}
.cs-cell.up .cs-bar {
  bottom: 15px;
}
.cs-cell.down .cs-bar {
  top: 15px;
  background: var(--rust);
}
.cs-bar.zero {
  background: var(--steel);
}
.pb2 {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 6px;
  background: var(--ink);
  box-shadow: 0 0 0 1px #2a2f3a;
}
.pb2-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--brass);
}
.pb2-fill.done {
  background: var(--good);
}
.led-row {
  display: grid;
  grid-template-columns: 1fr 80px 52px;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  cursor: pointer;
}
.led-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.led-n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.led-v {
  text-align: right;
}
.led-row.done .led-v {
  color: var(--good);
  font-weight: 700;
}
.rt-big {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.rt-letter {
  min-width: 64px;
  padding: 2px 8px;
  color: var(--ink);
  font: 700 24px/26px var(--font);
  text-align: center;
  background: var(--good);
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ink);
}
.rt-letter.rt-3,
.rt-letter.rt-4 {
  background: var(--amber);
}
.rt-letter.rt-5,
.rt-letter.rt-6 {
  background: var(--red);
}
.rt-out {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dim);
}
.rt-out.up {
  color: var(--good);
}
.rt-out.down {
  color: var(--bad);
}
.cv-chart {
  min-height: 40px;
}

/* advisors, objectives */
.obj,
.gl-ch,
.adv-row,
.lm-row,
.wish-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}
.obj.main {
  padding: 4px;
  background: rgba(217, 150, 58, 0.08);
  box-shadow: inset 2px 0 0 var(--brass);
}
.obj-body,
.adv-body {
  flex: 1;
  min-width: 0;
}
.obj-t,
.adv-name {
  color: var(--text);
}
.obj.main .obj-t {
  font-weight: 700;
}
.obj-p {
  display: flex;
  align-items: center;
  gap: 4px;
}
.obj-p .mbar,
.obj-p .pb2 {
  flex: 1;
}
.adv-role {
  color: var(--mute);
}
.adv-row.away {
  opacity: 0.55;
}
.trust {
  display: inline-flex;
  gap: 2px;
}
.tp {
  width: 6px;
  height: 6px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--steel-lo);
}
.tp.on {
  background: var(--brass);
}
.helper-list {
  margin: 3px 0 6px;
}
.ec-quote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0;
  padding: 4px;
  background: rgba(7, 8, 10, 0.4);
  box-shadow: inset 0 0 0 1px #23262d;
}
.ecq-body {
  flex: 1;
  min-width: 0;
}
.ecq-who {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}
.ecq-name {
  color: var(--brass-hi);
  font-weight: 700;
}
.ecq-role {
  color: var(--mute);
}
.ecq-text {
  color: var(--text);
}
.ecq-rec {
  color: var(--cyan-hi);
}
.ecq-body .btn {
  margin-top: 3px;
}
.reg-row {
  display: flex;
  gap: 6px;
  margin: 3px 0;
}
.reg-row.bad .g {
  color: var(--amber);
}
.reg-row.ok .g {
  color: var(--good);
}
.info-link {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}

/* ordinances */
.ord-slots {
  display: flex;
  gap: 3px;
  margin: 2px 0;
}
.os {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 12px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--steel-lo);
}
.os.used {
  background: var(--brass);
}
.os.frozen {
  background: #3a2020;
  color: var(--bad);
}
.ord-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  padding: 3px 4px;
  background: rgba(7, 8, 10, 0.35);
  box-shadow: inset 0 0 0 1px #23262d;
}
.ord-row.on {
  box-shadow: inset 2px 0 0 var(--good), inset 0 0 0 1px #23262d;
}
.ord-row.locked {
  opacity: 0.55;
}
.ord-body {
  flex: 1;
  min-width: 0;
}
.ord-name {
  color: var(--text);
}
.ord-tip {
  overflow: hidden;
  color: var(--mute);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-cost {
  flex: none;
  color: var(--brass-hi);
}
.ord-lock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--mute);
}

/* wellbeing factor bars */
.fbars {
  margin: 2px 0;
}
.fb-row {
  display: grid;
  grid-template-columns: 112px 1fr 34px;
  align-items: center;
  gap: 6px;
  min-height: 14px;
}
.fb-l {
  overflow: hidden;
  color: var(--dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-bar {
  position: relative;
  height: 6px;
  background: var(--ink);
}
.fb-mid {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--steel-hi);
}
.fb-fill {
  position: absolute;
  top: 0;
  bottom: 0;
}
.fb-fill.pos {
  background: var(--teal);
}
.fb-fill.neg {
  background: var(--rust);
}
.fb-v {
  text-align: right;
}
.fb-v.pos {
  color: var(--good);
}
.fb-v.neg {
  color: var(--bad);
}
.dw-row {
  display: grid;
  grid-template-columns: 10px 1fr 52px 26px;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 16px;
  padding: 0 2px;
  border: 0;
  color: var(--text);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.dw-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.dw-n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-hh,
.dw-wb {
  text-align: right;
}

/* goals */
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 3px 0;
}
.rib,
.ach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--mute);
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--steel-lo);
}
.rib.got {
  color: #3a1f00;
  background: var(--brass);
  box-shadow: inset 0 -2px var(--brass-dk), 0 0 0 1px var(--ink);
}
.ach.got {
  color: #102a10;
  background: var(--good);
}
.rib.ahead {
  opacity: 0.45;
}
.stars {
  display: flex;
  gap: 3px;
  margin: 3px 0;
}
.star {
  color: var(--steel);
}
.star.on {
  color: var(--brass-hi);
}
.wish-row {
  padding: 2px 4px;
  background: rgba(7, 8, 10, 0.35);
}
.wish-row.on {
  box-shadow: inset 2px 0 0 var(--cyan);
}
.wish-row.dim {
  opacity: 0.5;
}
.wish-t {
  flex: 1;
}
.lm-row.built .g {
  color: var(--good);
}
.lm-row.locked {
  opacity: 0.55;
}

/* milestones */
.ms-now {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0;
}
.ms-tier {
  color: var(--brass-hi);
  font: 700 18px/20px var(--font);
}
.ms-step {
  display: grid;
  grid-template-columns: 12px 1fr 56px 56px;
  align-items: center;
  gap: 4px;
  min-height: 15px;
  color: var(--mute);
}
.ms-step.done {
  color: var(--dim);
}
.ms-step.done .g {
  color: var(--good);
}
.ms-step.cur {
  color: var(--brass-hi);
  font-weight: 700;
}
.ms-step.half .mss-n {
  padding-left: 8px;
}
.mss-p,
.mss-g {
  text-align: right;
}
.ms-wave {
  margin: 4px 0;
}
.msw-h {
  color: var(--dim);
}

/* unlock cards (tier card, milestones) */
.tc-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 4px 0;
}
.tc-new.small {
  grid-template-columns: repeat(2, 1fr);
}
.tc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 5px 3px;
  border: 0;
  color: var(--text);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  background: rgba(7, 8, 10, 0.5);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
  cursor: pointer;
}
.tc-item:hover {
  box-shadow: inset 0 0 0 1px var(--brass);
}
.tc-item.small {
  flex-direction: row;
  justify-content: flex-start;
  padding: 3px 4px;
}
.tc-item.ahead {
  opacity: 0.55;
  cursor: default;
}
.tc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--brass-hi);
  background: var(--face2);
  box-shadow: 0 0 0 1px var(--ink);
}
.tc-n {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-show {
  color: var(--cyan);
}
.modal.tier-modal {
  width: 460px;
}
.tier-card {
  position: relative;
  min-width: 380px;
}
.tc-rays {
  height: 6px;
  margin: -4px -4px 8px;
  background: repeating-linear-gradient(90deg, var(--brass) 0 8px, var(--brass-dk) 8px 16px);
}
.tc-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tc-sub {
  color: var(--dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tc-name {
  color: var(--brass-hi);
  font: 700 28px/30px var(--font);
  text-shadow: 0 2px 0 var(--brass-dk);
}
.tc-pop {
  color: var(--dim);
  text-align: center;
}
.tc-grant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0;
  color: var(--good);
  font-weight: 700;
}

/* map layer: decision cards, ladder card, countdown banner */
.ec-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 30;
}
.ev-card,
.lad-card {
  position: fixed;
  left: 50%;
  top: 74px;
  width: 470px;
  max-height: calc(100% - 140px);
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  transform: translateX(-50%);
  pointer-events: auto;
}
.ev-card.min .ev-scroll,
.ev-card.min .ev-opts {
  display: none;
}
.ev-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
}
.ev-head .g {
  color: var(--brass);
}
.ev-grp {
  color: var(--brass);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ev-auto {
  flex: 1;
  color: var(--mute);
  text-align: right;
}
.ev-title {
  margin: 4px 0;
  color: var(--brass-hi);
  font: 700 calc(16px * var(--fz)) / calc(18px * var(--fz)) var(--font);
}
.ev-scroll {
  min-height: 0;
  overflow-y: auto;
}
.ev-text {
  margin: 0 0 4px;
  color: var(--text);
}
.ev-reg {
  display: flex;
  gap: 4px;
  color: var(--amber);
}
.ev-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.ev-quotes .ec-quote {
  flex-direction: column;
  align-items: flex-start;
}
.ev-opts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.ev-opt {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 2px 6px;
  padding: 4px 6px;
  border: 0;
  color: var(--text);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  text-align: left;
  background: var(--face2);
  box-shadow: inset 0 0 0 1px var(--steel), 0 1px 0 var(--ink);
  cursor: pointer;
}
.ev-opt:hover {
  box-shadow: inset 0 0 0 1px var(--brass);
}
.ev-opt.rec {
  box-shadow: inset 2px 0 0 var(--cyan), inset 0 0 0 1px var(--steel);
}
.evo-k {
  color: var(--brass);
  font-weight: 700;
}
.evo-e {
  text-align: right;
  font-weight: 700;
}
.evo-e.neg {
  color: #ffb8a8;
}
.evo-e.pos {
  color: #c8f0b0;
}
.evo-fx {
  grid-column: 2 / 4;
  color: var(--mute);
}
.evo-rec {
  grid-column: 2 / 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--cyan);
}
.lad-card {
  width: 420px;
  border-image-source: var(--img-frame-gloam, var(--img-frame));
}
.lad-fix {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}
.lf-n {
  color: var(--amber);
  font-weight: 700;
}
.lad-proj {
  margin: 4px 0;
  color: var(--amber);
}
.lad-banner {
  position: fixed;
  left: 50%;
  top: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  transform: translateX(-50%);
  color: #ffe0d8;
  background: repeating-linear-gradient(135deg, #5a1810 0 10px, #44120c 10px 20px);
  box-shadow: 0 0 0 1px #8a3020, 0 2px 0 var(--ink);
  pointer-events: auto;
}
.lb-t {
  font-weight: 700;
}
.lb-s {
  color: #ffb8a8;
}

/* consolidation, breach, bankruptcy */
.modal.cons-modal,
.modal.bk-modal {
  width: 520px;
}
.cons-terms .kv-v {
  color: var(--brass-hi);
}
.cons-conds {
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
}
.cons-conds li {
  display: flex;
  gap: 6px;
  margin: 2px 0;
}
.cons-conds .g {
  color: var(--amber);
}
.modal-text.warn {
  color: var(--amber);
}
.bk {
  position: relative;
}
.bk-stamp {
  position: absolute;
  right: 4px;
  top: -18px;
  padding: 2px 8px;
  color: var(--bad);
  font: 700 calc(16px * var(--fz)) / calc(18px * var(--fz)) var(--font);
  letter-spacing: 2px;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 2px var(--bad);
}
.bk-report {
  display: flex;
  gap: 10px;
  margin: 6px 0;
}
.bk-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bk-letter {
  width: 56px;
  color: var(--ink);
  font: 700 36px/44px var(--font);
  text-align: center;
  background: var(--amber);
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ink);
}
.bk-letter.g-A,
.bk-letter.g-B {
  background: var(--good);
}
.bk-letter.g-E,
.bk-letter.g-F {
  background: var(--red);
}
.bk-score {
  color: var(--dim);
}
.bk-lines {
  flex: 1;
}
.rw-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.rw-item {
  display: grid;
  grid-template-columns: 14px 80px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 0;
  color: var(--text);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  text-align: left;
  background: var(--face2);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
  cursor: pointer;
}
.rw-item:hover {
  box-shadow: inset 0 0 0 1px var(--brass);
}
.rw-k {
  color: var(--mute);
}
.rw-p {
  color: var(--dim);
}
.found {
  display: flex;
  gap: 10px;
}
.found-modal .text-input {
  width: 100%;
}
.info-card {
  display: flex;
  gap: 10px;
  max-width: 420px;
}
.cc-bk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* newspaper + quarterly report */
.modal.np-modal,
.modal.rep-modal {
  width: 560px;
}
.np-page {
  padding: 8px 10px;
  color: #2a2418;
  background: #ece2c6;
  box-shadow: inset 0 0 0 1px #b8a77a, 0 2px 0 var(--ink);
}
.np-mast {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 3px double #4a3e28;
}
.np-name {
  font: 700 26px/28px var(--font);
  letter-spacing: 2px;
}
.np-sub {
  color: #5a4e38;
}
.np-rule {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  border-bottom: 1px solid #4a3e28;
  color: #5a4e38;
}
.np-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.np-vig {
  flex: none;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px #4a3e28;
}
.np-head {
  margin: 0;
  font: 700 18px/20px var(--font);
}
.np-subs {
  border-top: 1px solid #b8a77a;
  padding-top: 3px;
}
.np-subl {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 2px 0;
}
.np-page .np-subl .g {
  color: #7a4e1c;
}
.np-archh {
  margin: 8px 0 2px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.np-arch {
  display: flex;
  flex-direction: column;
  max-height: 150px;
  overflow-y: auto;
}
.np-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px;
  padding: 1px 4px;
  border: 0;
  color: var(--dim);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.np-item:hover,
.np-item.on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.np-item.front .np-im {
  color: var(--brass);
}
.np-empty {
  padding: 16px;
  color: var(--mute);
  text-align: center;
}
.rep-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rep-q {
  color: var(--brass-hi);
  font: 700 calc(16px * var(--fz)) / calc(18px * var(--fz)) var(--font);
}
.rep-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rep-nav {
  justify-content: space-between;
}

/* top bar items */
.hv-sub {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--dim);
  font-weight: 400;
}
.hv-sub:empty {
  display: none;
}
.hi-money .hv-sub .g {
  color: var(--dim);
}
.hi-money.net-pos .hv-net,
.hi-money.net-pos .hv-sub .g {
  color: var(--good);
}
.hi-money.net-neg .hv-net,
.hi-money.net-neg .hv-sub .g {
  color: var(--bad);
}
.rep-arrow {
  display: inline-flex;
}
.hi-ladder {
  color: #ffe0d8;
  background: #4a1a14;
  box-shadow: inset 0 0 0 1px #8a3020;
}
.hi-ladder[hidden] {
  display: none;
}
.hi-ladder .g {
  color: var(--amber);
}
.hi-ladder.stage-1 {
  color: var(--amber);
  background: rgba(240, 168, 60, 0.12);
  box-shadow: inset 0 0 0 1px var(--amber-dk);
}
.hi-ladder.stage-4,
.hi-ladder.stage-5 {
  animation: ec-pulse 1.2s steps(2) infinite;
}
@keyframes ec-pulse {
  50% {
    box-shadow: inset 0 0 0 1px var(--bad);
  }
}
.hv-ap {
  padding-left: 5px;
  border-left: 1px solid var(--steel-lo);
  color: var(--dim);
}
.hi-approval[data-band='0'] .hv-ap,
.hi-approval[data-band='1'] .hv-ap {
  color: var(--good);
}
.hi-approval[data-band='2'] .hv-ap {
  color: var(--amber);
}
.hi-approval[data-band='3'] .hv-ap,
.hi-approval[data-band='4'] .hv-ap {
  color: var(--bad);
}
.hi-news.fresh {
  color: var(--brass-hi);
  box-shadow: inset 0 0 0 1px var(--brass-dk);
}
.hi-helper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 0 6px;
  color: var(--cyan-hi);
}
@media (max-width: 1500px) {
  .hi-helper .hh-t {
    display: none;
  }
}

/* transit */
.msplit {
  display: flex;
  height: 10px;
  margin: 2px 0;
  background: var(--ink);
  box-shadow: 0 0 0 1px #2a2f3a;
}
.ms-seg {
  height: 100%;
}
.ms-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: var(--dim);
}
.tr-line {
  display: grid;
  grid-template-columns: 10px 1fr auto 68px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 18px;
  padding: 0 3px;
  border: 0;
  color: var(--text);
  font: 400 calc(12px * var(--fz)) / calc(14px * var(--fz)) var(--font);
  text-align: left;
  background: rgba(7, 8, 10, 0.35);
  cursor: pointer;
  margin: 2px 0;
}
.tr-line:hover {
  box-shadow: inset 0 0 0 1px var(--brass-dk);
}
.trl-r {
  color: var(--dim);
}
.trl-pl {
  text-align: right;
}
.trl-pl.neg {
  color: var(--bad);
}
.trl-pl.pos {
  color: var(--good);
}
.tr-colors {
  display: inline-flex;
  gap: 2px;
}
.tr-col {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  box-shadow: 0 0 0 1px var(--ink);
  cursor: pointer;
}
.tr-col.on {
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--text);
}
.tr-plnote {
  margin: 2px 0;
}
.to-val {
  color: var(--brass-hi);
}
.to-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.to-sep {
  width: 1px;
  height: 16px;
  background: var(--steel-lo);
}
.trf-res {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  max-width: 560px;
}
.trf-k {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text);
}
.spin .g {
  animation: ec-spin 0.8s steps(4) infinite;
}
@keyframes ec-spin {
  to {
    transform: rotate(360deg);
  }
}
.wing-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.wing-n {
  flex: 1;
}
.wing-row.on .g {
  color: var(--good);
}

@media (prefers-reduced-motion: reduce) {
  .hi-ladder.stage-4,
  .hi-ladder.stage-5,
  .spin .g {
    animation: none;
  }
}

/* the top bar holds more items since M5 (treasury + net, population + approval, ladder, newspaper, helper): the
   left part takes only its content so the right part gets the room (1280 UI px wide at every UI scale) */
.topbar {
  grid-template-columns: minmax(120px, max-content) auto minmax(0, 1fr);
}
.tb-left {
  max-width: 260px;
}