/* ============================================================
   ui.css — CRT / PIXEL-RETRO THEME
   dark charcoal #1a1a2e canvas, neutral white-gray monochrome
   accents, monospace throughout. No modern gradients.
   ============================================================ */

/* Self-hosted JetBrains Mono (assets/fonts/, SIL OFL — see
   assets/fonts/LICENSE-OFL.txt) — replaces the old Google Fonts CDN
   <link> in index.html so the game has no external network dependency
   at load time (matters for the itch.io web build, whose sandboxed
   iframe shouldn't need to reach fonts.gstatic.com to render correctly,
   and for the Tauri desktop build, which should work fully offline).
   Falls back to the system monospace stack in the body font-family
   below if a woff2 fails to load for any reason. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --bg: #121212;
  --bg-hover: #2a2a2a;
  --panel: rgba(12,12,12,0.8);
  --panel2: #161616;
  --panel3: #333333;
  --input: #080808;
  --ink: #e8e8e8;
  /* neutral monochrome accent */
  --ink-dim: #707070;
  --ink-mid: #aaaaaa;
  --warn: #ff5b3b;
  --gold: #ffd23f;
  --success: #3aca21;
  --line: #161616;

  /* STATISTICS: per-metric identity colors — shared by the statusbar
     sparklines, the panel's big combined chart, and its legend swatches */
  --stat-pop: #e8e8e8;
  --stat-happiness: #ffd23f;
  --stat-funds: #2bd1d4;

  /* TERRAIN: canvas ground colors — read into renderer.js via
     getComputedStyle(document.documentElement), same pattern as --stat-*
     above. These paint the isometric map itself, not DOM chrome. */
  --terr-water: #0b2843;
  --terr-shallows: #1a546f;
  --terr-wetland: #36492f;
  --terr-lowland: #122310;
  --terr-highland: #3b4a24;
  --terr-hill: #5a4a32;
  --terr-road: #2a2a30;
  --terr-park: #15521f;

  /* Typography */
  --font-xs: 10px;
  /* cost labels, hints */
  --font-sm: 12px;
  /* section headings, field labels */
  --font-md: 13px;
  /* inspector, controls, cards */
  --font-base: 14px;
  /* modal body, buttons, toast */
  --font-lg: 16px;
  /* statusbar */

  /* Spacing — shared scale for padding, margin, gap */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 48px;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;

  /* Effect */
  --blur: blur(10px);

  /* Borders */
  --border-panel-selected: 0.75px solid var(--ink);
  --border-panel: 0.5px solid var(--ink-dim);
  /* panel outlines */
  --border: 1px solid var(--line);
  /* subtle / internal */
  --border-dim: 0.5px solid var(--ink-dim);
  /* inputs, modals */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "JetBrains Mono", "Courier New", "Lucida Console", monospace;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  -webkit-user-select: none;   /* Safari/WKWebView (Tauri) needs the prefixed form too */
  user-select: none;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* --- Canvas viewport --- */
#view {
  position: absolute;
  inset: 0;
  display: block;
  cursor: crosshair;
}
/* SPACE PAN: Space-held/panning cursor states, toggled by input.js */
#view.pan-ready { cursor: grab; }
#view.panning   { cursor: grabbing; }

/* Panel icon */
.panel-icon {
  cursor: pointer;
  /* background-color: red; */
  font-size: var(--font-lg);
  line-height: var(--font-md);
  padding: var(--sp-1);
}

/* FULLSCREEN: #btn-fullscreen reuses .panel-icon, just recolors gold while
   #app is actually in fullscreen (see initFullscreen() in ui.js). */
#btn-fullscreen.active {
  color: var(--gold);
}

/* --- Status bar (top) --- */
#statusbar {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  height: var(--sp-9);
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-4);
  font-size: var(--font-base);
  z-index: 50;
  text-shadow: 0 0 4px rgba(232, 232, 232, 0.5);
  -webkit-user-select: none; 
  user-select: none;
}

#statusbar .lbl {
  color: var(--ink-dim);
  padding-left: var(--sp-2);
}

#statusbar b {
  color: var(--ink);
  font-weight: normal;
  
}

#statusbar .grp {
  white-space: nowrap;
  cursor: pointer;
}

/* --- STATISTICS: per-metric statusbar sparkline + click-to-open trigger --- */
#statusbar .lbl[data-stats-trigger] {
  cursor: pointer;
}

#statusbar .grp:has(.lbl[data-stats-trigger]) {
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
}

#statusbar .grp:has(.lbl[data-stats-trigger]):hover {
  background: var(--panel2);
}

/* --- SAVE SYSTEM: date group doubles as a play/pause toggle --- */
#statusbar .grp:has(#s-date) {
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
}

#statusbar .grp:has(#s-date):hover {
  background: var(--panel2);
}

/* CITY IDENTITY: city name opens the rename dialog */
#s-name {
  cursor: pointer;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
}

#s-name:hover {
  background: var(--panel2);
  color: var(--ink);
}

canvas.spark {
  width: 36px;
  height: 16px;
  image-rendering: pixelated;
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

/* --- STATISTICS: dropdown panel — bigger combined chart + toggleable rows --- */
#stats-panel {
  position: fixed;
  top: var(--sp-10);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  width: 448px;
  z-index: 90;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  font-size: var(--font-md);
}

#stats-chart {
  width: 100%;
  height: 200px;
  display: block;
  margin-bottom: var(--sp-2);
  background: var(--panel2);
  border: var(--border);
  border-radius: var(--radius-sm);
}

.stats-head {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  color: var(--ink);
  font-size: var(--font-sm);
  border-bottom: var(--border);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-1);
}

.ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-sm);
  color: var(--ink-dim);
}

.stats-head:hover #stats-close {
  color: var(--warn);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 0;
}

.stat-toggle {
  accent-color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}

.stat-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.stat-ico {
  width: 16px;
  text-align: center;
}

.stat-lbl {
  color: var(--ink-dim);
  flex: 1;
}

.stat-val {
  color: var(--ink);
}

.stat-delta {
  font-size: var(--font-xs);
  min-width: 44px;
  text-align: right;
}

.stats-autopause-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: var(--border-panel);
  font-size: var(--font-sm);
  color: var(--ink-dim);
  cursor: pointer;
}

.stats-autopause-row input {
  accent-color: var(--ink);
}

/* --- Left panel (tools + terrain + demand accordion) --- */
#left-panel {
  position: absolute;
  top: var(--sp-10);
  left: var(--sp-2);
  width: 152px;
  z-index: 50;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  border-radius: var(--radius-md);
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}

.tool {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: solid 1px transparent;
  background: var(--panel2);
  color: var(--ink-mid);
  cursor: pointer;
  padding: 3px var(--sp-1);
  font-size: var(--font-sm);
  font-family: inherit;
  border-radius: var(--radius-sm);
}

.tool canvas {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.tool span {
  line-height: 1.1;
}

.tool .cost {
  display: none;
  color: var(--gold);
  font-size: var(--font-xs);
  padding-left: var(--sp-2);
}

.tool:hover {
  border-color: var(--ink-mid);
  color: var(--ink);
}

.tool.sel {
  border: 1px solid var(--ink);
  background: var(--bg-hover);
  color: var(--ink);
  /* box-shadow: 0 0 6px rgba(232, 232, 232, 0.4) inset; */
}

.tool.sel .cost {
  display: inline;
}

.drow {
  display: flex;
  align-items: center;
  font-size: var(--font-sm);
  width: 100%;
}

.drow .dlab {
  width: var(--sp-2);
}

.dtrack {
  position: relative;
  flex: 1;
  height: 10px;
  background: var(--panel2);
  border: var(--border);
}

/* demand bar fills from center: positive grows right, negative left */
.dfill {
  position: absolute;
  top: 0;
  height: 100%;
}

.dmid {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 50%;
  width: 1px;
  background: var(--ink-dim);
}

/* --- Bottom info / inspector --- */
#inspector {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  width: 260px;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  padding: var(--sp-3);
  z-index: 50;
  font-size: var(--font-md);
  line-height: 1.5;
  border-radius: var(--radius-md);
}

#inspector.pinned {
  border: var(--border-panel-selected);
}

#inspector .insp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-bottom: var(--border);
  padding-bottom: 3px;
  margin-bottom: 5px;
}

#inspector .ttl {
  color: var(--ink);
}

#inspector #insp-close {
  display: none;
}

#inspector.pinned #insp-close {
  display: block;
}

#inspector:hover #insp-close {
  color: var(--warn);
}

#inspector .k {
  color: var(--ink-dim);
}

#inspector .v {
  color: var(--ink);
}

#inspector .pwr-ok {
  color: var(--ink);
}

#inspector .pwr-no {
  color: var(--warn);
}

/* --- Minimap (bottom right) --- */
#minimap-wrap {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  padding: var(--sp-2);
  z-index: 50;
  border-radius: var(--radius-md);
}

#minimap-wrap .ttl {
  font-size: var(--font-sm);
  color: var(--ink-dim);
  margin-bottom: var(--sp-1);
}

#minimap {
  display: block;
  image-rendering: pixelated;
  background: var(--panel);
  backdrop-filter: var(--blur);
}

.ministrip {
  display: flex;
}

/* --- Playback panel (bottom-right, left of minimap) --- */
#playback {
  position: absolute;
  bottom: var(--sp-2);
  right: 144px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 180px;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
}

.pb-row {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}

.pb-row button { flex: 1; }

.pb-row button.hug {
  flex: 0;
}

#s-face {
  color: var(--ink-dim);
  font-size: var(--font-sm);
  text-align: center;
  min-width: 20px;
}

/* --- Admin panel (top-right under status) --- */
#admin-panel {
  position: absolute;
  top: var(--sp-10);
  right: var(--sp-2);
  width: 160px;
  z-index: 50;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  border-radius: var(--radius-md);
}

.ap-section:not(:first-child) .ap-header {
  border-top: var(--border-panel);
}

.ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-sm);
  color: var(--ink-dim);
}

.ap-header:hover { color: var(--ink); }

.ap-arrow { font-size: var(--font-lg); }

.ap-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.ap-body.open { max-height: 800px; }
#left-panel .ap-body.open { max-height: none; }

.ap-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

button {
  font-family: inherit;
  font-size: var(--font-base);
  cursor: pointer;
  background: var(--panel2);
  color: var(--ink-mid);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
}

button.border {
  border: var(--border);
  border-color: var(--ink-dim);
}

button:hover {
  color: var(--ink);
  border-color: var(--ink-mid);
}

button:disabled {
  opacity: 0.4;
  border-color: var(--ink-dim);
  cursor: not-allowed;
}

button:disabled:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
  background: none;
}

.admin {
  color: var(--ink-mid);
  border-color: var(--ink-dim);
}

.admin:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* "Harmful" action style — destructive/irreversible actions (Ignite Fire,
   Delete Save, Decline/Cancel Contract). See .contract-decline for the
   size-constrained variant used inline in the inspector. */
.btn-danger {
  color: var(--warn);
  border-color: #5a2018;
}

.btn-danger:hover {
  background: #3a120c;
  color: #fff;
}

/* --- Notification centre --- */
#notif-center {
  position: absolute;
  top: var(--sp-10);
  left: 164px;
  width: 260px;
  z-index: 60;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-panel);
  border-radius: var(--radius-md);
}

#notif-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-sm);
  color: var(--ink-dim);
}

#notif-header:hover .ttl {
  color: var(--ink);
}

#notif-badge {
  background: var(--warn);
  color: #fff;
  font-size: var(--font-xs);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  min-width: var(--sp-5);
  text-align: center;
  display: none;
}

#notif-arrow {
  margin-left: auto;
  color: var(--ink-dim);
  font-size: var(--font-lg);
}

#notif-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

#notif-body.open {
  max-height: 200px;
  overflow-y: auto;
}

.notif-entry {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--font-sm);
  border-top: var(--border-panel);
}

.notif-warn   { color: var(--warn); }
.notif-action { color: var(--gold); }
.notif-city   { color: var(--ink-mid); }

.hint {
  font-size: var(--font-xs);
  color: var(--ink-dim);
  text-align: left;
  line-height: 1.6;
}

/* --- Size / new-game modal --- */
#size-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  background: rgba(5, 5, 12, 0.82);
  align-items: center;
  justify-content: center;
}

.modal-panel {
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-dim);
  padding: var(--sp-5);
  width: 440px;
  max-width: 94vw;
  color: var(--ink);
  font-size: var(--font-base);
  font-family: inherit;
  border-radius: var(--radius-md);
}

.modal-title {
  margin: var(--sp-2);
  color: var(--ink);
  font-size: var(--font-lg);
}

.modal-field {
  margin: 14px 0 10px;
}

.modal-field>label {
  display: block;
  font-size: var(--font-sm);
  color: var(--ink-dim);
  letter-spacing: 1px;
  margin-bottom: var(--sp-1);
}

.modal-field-row {
  display: flex;
  gap: var(--sp-2);
}

.modal-input {
  flex: 1;
  font-family: inherit;
  font-size: var(--font-base);
  background: var(--input);
  color: var(--ink);
  border: var(--border-dim);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  outline: none;
}

.modal-input.row {
  width: 100%;
}

.modal-input:focus {
  border: var(--border-panel-selected);
}

.card {
  border-radius: var(--radius-sm);
  border: var(--border-dim);
  padding: var(--sp-2) var(--sp-3);
}

/* ── SAVE SYSTEM: saves modal, slot cards, autosave row ──────────
   Name/stats/thumbnail (.slot-load) is one clickable target that loads
   the city — bordered on hover/focus to signal that. Save/Delete remain
   as explicit buttons underneath. ─────────────────────────────────── */
#saves-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: rgba(5, 5, 12, 0.78);
  align-items: center;
  justify-content: center;
}

.saves-modal-panel {
  width: 480px;
}

.saves-modal-head {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-4);
  gap: var(--sp-2);
}

/* FIRST LAUNCH: self-contained welcome screen swapped in for #saves-normal
   (title/grid/autosave/export-import row) when no save exists anywhere yet
   — see renderSlots() in ui.js. display is set to 'flex' from JS, so this
   base rule only needs the column layout, not the show/hide itself. */
.saves-welcome {
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-2);
}

.saves-welcome-actions {
  display: flex;
  gap: var(--sp-3);
}

/* assets/img/Banner.png is a flat white 630x500 logo card, so it's sized
   down and centered rather than stretched to the panel's full width —
   filling the width would force object-fit letterboxing since the panel
   is much wider than the banner is tall. */
.saves-banner {
  display: block;
  max-width: 100%;
  max-height: 140px;
  border-radius: var(--radius-sm);
}

#saves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.save-slot {
  background: var(--panel2);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.empty-slot, 
.empty-slot button {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slot-load {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border: var(--border-panel);
      background: var(--input);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  transition: border-color 0.15s ease;
}

.slot-load:hover, .slot-load:focus-visible {
  border-color: var(--border);
  /* background-color: var(--bg); */
}

.slot-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--input);
}

.slot-name {
  color: var(--ink);
  font-size: var(--font-md);
}

.slot-meta {
  color: var(--ink-dim);
  font-size: var(--font-sm);
}

.slot-actions {
  display: flex;
  gap: var(--sp-1);
}

.slot-actions button {
  flex: 1;
  font-size: var(--font-sm);
}

.autosave-row {
  margin-top: var(--sp-4);
}

.autosave-row .slot-load {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}

/* ── EXPORT/IMPORT: banner shown while a loaded file awaits a slot ── */
.import-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--panel2);
  border: var(--border-panel);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--ink-mid);
  font-size: var(--font-sm);
}

/* ── EXPORT/IMPORT: action row below the autosave section ─────────── */
.saves-io-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.saves-io-row button {
  flex: 1;
}

.import-banner b { color: var(--gold); }
.import-banner button { flex: 0 0 auto; }

.autosave-row .slot-thumb {
  width: 48px;
  aspect-ratio: 1 / 1;
  flex: 0 0 48px;
}

.btn-shuffle {
  font-family: inherit;
  font-size: var(--font-base);
  cursor: pointer;
  background: var(--panel2);
  color: var(--ink-dim);
  border: var(--border-dim);
  padding: var(--sp-2) 10px;
}

#mode-row, #size-row, #water-row, #emoji-row, #rename-emoji-row {
  display: flex;
  background-color: var(--input);
  border-radius: var(--radius-md);
}

/* CITY IDENTITY: emoji picker cards (New Game dialog + rename dialog) */
.emoji-card {
  font-size: 22px;
  padding: var(--sp-2);
}

.size-card {
  flex: 1;
  cursor: pointer;
  background: var(--input);
  color: var(--ink-mid);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--font-md);
  font-family: inherit;
}

.size-card .size-dim {
  color: var(--gold);
}

.size-card-preview {
  border: var(--border-dim);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  /* background-size set inline — dynamic per map size */
}

.size-card.active {
  color: var(--ink);
  border: var(--border-dim);
  background-color: var(--panel3);
}

.modal-actions {
  display: flex;
  gap: var(--sp-2);
}

.btn-confirm {
  flex: 1;
  font-family: inherit;
  font-size: var(--font-base);
  cursor: pointer;
  background: var(--bg-hover);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: var(--sp-2);
}

/* ── SCENARIOS: contract name/decline (used by the inspector tooltip and
   the contracts dialog — the old side panel of cards was removed in favor
   of the bottom-left inspector, which already shows live contract detail
   for a hovered contract tile) ─────────────────────────────────────── */

.contract-name {
  color: var(--ink);
  font-size: var(--font-md);
  letter-spacing: 0.5px;
}

/* Layout-only — pair with .btn-danger for the harmful-action color/hover treatment */
.contract-decline {
  font-size: var(--font-xs);
  padding: 2px var(--sp-2);
  width: 100%;
}

/* ── SCENARIOS: contract + renegotiation modals ───────────────── */

#contract-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  background: rgba(5, 5, 12, 0.85);
  align-items: center;
  justify-content: center;
}

.contract-modal-panel {
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--border-dim);
  padding: var(--sp-5);
  width: 420px;
  max-width: 94vw;
  color: var(--ink);
  font-size: var(--font-sm);
  font-family: inherit;
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.contract-modal-title {
  font-size: var(--font-lg);
  color: var(--ink);
  margin-bottom: var(--sp-1);
  border-bottom: var(--border-panel);
  padding-bottom: var(--sp-2);
}

.contract-modal-subtitle {
  color: var(--ink-mid);
  font-size: var(--font-lg);
  margin: var(--sp-4) var(--sp-0);
}

.contract-modal-section {
  color: var(--ink-dim);
  font-size: var(--font-base);
  margin: var(--sp-3) 0 var(--sp-1);
}

.contract-modal-row {
  padding: 2px 0;
  font-size: var(--font-base);
  color: var(--ink-mid);
}

.contract-modal-row.consequence {
  color: var(--warn);
}

.contract-modal-row.term-old {
  color: var(--ink-dim);
  text-decoration: line-through;
}

.contract-modal-row.term-new {
  color: var(--gold);
}

.contract-modal-quote {
  color: var(--ink-dim);
  font-style: italic;
  margin: var(--sp-3) 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--ink-dim);
}

.contract-modal-warning {
  color: var(--ink-dim);
  font-size: var(--font-xs);
  margin-top: var(--sp-4);
}

.contract-modal-footer {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--border-panel);
}

.contract-modal-footer button {
  flex: 1;
  padding: var(--sp-2);
}

.btn-confirm-action {
  color: var(--ink);
  border-color: var(--ink-dim);
}

.btn-confirm-action:hover {
  border-color: var(--ink);
  background: var(--bg-hover);
}

/* ── SCENARIOS: placement banner ──────────────────────────────── */

#placement-banner {
  display: none;
  position: fixed;
  top: 46px;              /* just below status bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 205;
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: 2px solid #ff8c00;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  color: var(--ink);
  font-size: var(--font-sm);
  font-family: inherit;
  text-align: center;
  min-width: 320px;
  box-shadow: 0 0 20px rgba(255,140,0,0.25);
}

#placement-banner.active { display: block; }

#placement-banner .pb-title {
  color: #ff8c00;
  font-size: var(--font-xs);
  letter-spacing: 1px;
  margin-bottom: var(--sp-2);
}

#placement-banner .pb-count {
  font-size: var(--font-lg);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

#placement-banner .pb-hint {
  color: var(--ink-dim);
  font-size: var(--font-xs);
  margin-bottom: var(--sp-3);
}

#placement-banner .pb-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}

#placement-banner .pb-actions button {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--font-xs);
}

#placement-banner .pb-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── SCENARIOS: offer modal additions ─────────────────────────── */

.contract-modal-meta {
  color: var(--ink-dim);
  font-size: var(--font-sm);
  margin-bottom: 2px;
}

.contract-modal-row.offer-req { color: var(--ink-mid); }
.contract-modal-row.offer-reward { color: var(--gold); }

/* ── SCENARIOS: contracts dialog (status-bar Contracts button) ──── */

#contracts-dialog, #credits-dialog {
  position: fixed;
  inset: 0;
  z-index: 208;
  display: none;
  background: rgba(5, 5, 12, 0.82);
  align-items: center;
  justify-content: center;
}

.contracts-dialog-panel {
  width: 460px;
}

.contracts-dialog-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.contracts-dialog-row {
  border: var(--border-panel);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}

.contracts-dialog-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
  font-size: var(--font-sm);
}

.contracts-dialog-row button {
  width: 100%;
  font-size: var(--font-sm);
  padding: var(--sp-1) var(--sp-2);
}

/* DEMAND SYSTEM: tax slider control */
#taxbox {
  background: var(--panel2);
  border: var(--border);
  padding: var(--sp-1) 5px;
}

#taxbox label {
  display: block;
  font-size: var(--font-sm);
  color: var(--ink-dim);
  margin-bottom: 2px;
}

#taxbox label b {
  color: var(--gold);
}

#taxbox input[type=range] {
  width: 100%;
  accent-color: var(--ink);
  height: 12px;
}