/* Snowline — UI layout & component look. Built to Nadia's visual spec.
   Reads ONLY tokens.css variables (design-spec §10 sync rule). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sl-font-ui);
  font-size: var(--sl-text-base);
  color: var(--sl-ink-on-dark);
  background: var(--sl-night-deep);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

/* The play surface carries the season class (engine sets .season-*). */
#app { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#app.play-surface {
  background-color: var(--sl-ground);
  transition: background-color var(--sl-dur-season) var(--sl-ease-soft);
}

#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Subtle paper-tooth grain over the whole surface (design-spec §8). */
#app::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  opacity: var(--sl-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kicker — the quiet capped furniture voice (design-spec §3.3). */
.kicker {
  font-size: var(--sl-text-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--sl-tracking-wide); color: var(--sl-ink-on-dark-soft);
}

/* ===== TOP BAR (design-spec §5.1) ===== */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--sl-topbar-h);
  display: flex; align-items: center; gap: 24px; padding: 0 22px;
  background: color-mix(in srgb, var(--sl-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sl-border);
  box-shadow: var(--sl-shadow-sm);
  z-index: 30;
}
#topbar .wordmark {
  font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-display);
  font-size: var(--sl-text-lg); color: var(--sl-cream);
  display: flex; align-items: center; gap: 10px;
}
#topbar .wordmark .lamp-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sl-gold);
  box-shadow: var(--sl-glow-lamp); flex: 0 0 auto;
}
.tb-sep { width: 1px; height: 28px; background: var(--sl-border); }

.tb-treasury { display: flex; align-items: baseline; gap: 9px; }
.tb-treasury .amt {
  font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-numeral);
  font-size: var(--sl-text-xl); color: var(--sl-cream); font-feature-settings: "tnum" 1;
}
.tb-treasury .amt .mark { color: var(--sl-hearth); }
.tb-treasury.flash .amt { animation: treasuryFlash 0.7s var(--sl-ease-soft); }
@keyframes treasuryFlash {
  0% { text-shadow: var(--sl-glow-lamp); color: var(--sl-gold); }
  100% { text-shadow: none; color: var(--sl-cream); }
}
.tb-treasury .delta { font-size: var(--sl-text-sm); font-weight: 600; font-feature-settings: "tnum" 1; }
.tb-treasury .delta.up { color: var(--sl-ok); }
.tb-treasury .delta.down { color: var(--sl-warn); }
.tb-treasury.debt .amt { color: var(--sl-alert); }

.tb-season { display: flex; align-items: center; gap: 10px; }
.tb-season .glyph { width: 20px; height: 20px; color: var(--sl-ambient-accent); }
.tb-season .glyph svg { width: 100%; height: 100%; }
.tb-season .label { font-weight: 500; font-size: var(--sl-text-md); color: var(--sl-ink-on-dark); }
.tb-season .label b { color: var(--sl-cream); font-weight: 600; }
.tb-events { display: flex; gap: 6px; margin-left: 4px; }
.tb-event {
  font-size: var(--sl-text-xs); padding: 3px 9px; border-radius: var(--sl-radius-pill);
  background: var(--sl-alert-soft); color: var(--sl-ember);
  border: 1px solid color-mix(in srgb, var(--sl-ember) 40%, transparent);
}

.tb-clock {
  margin-left: auto; display: flex; align-items: center; gap: 2px;
  background: var(--sl-surface-raised); border-radius: var(--sl-radius-pill); padding: 4px;
}
.tb-clock button {
  width: 42px; height: 34px; border-radius: var(--sl-radius-pill);
  border: none; background: transparent; color: var(--sl-ink-on-dark-soft);
  font-size: 15px; cursor: pointer; transition: all var(--sl-dur-quick) var(--sl-ease-gentle);
}
.tb-clock button:hover { color: var(--sl-cream); }
.tb-clock button.active { background: var(--sl-hearth); color: var(--sl-night); box-shadow: var(--sl-shadow-warm); }

/* ===== TOOL RAIL (design-spec §5.2) — 72px icon rail, expands on hover ===== */
#tool-rail {
  position: absolute; left: var(--sl-inset); top: calc(var(--sl-topbar-h) + var(--sl-inset));
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--sl-surface); border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-md); z-index: 20;
  transition: width var(--sl-dur-panel) var(--sl-ease-soft);
}
.tool-btn {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 14px; border-radius: var(--sl-radius-md);
  background: transparent; border: none; color: var(--sl-ink-on-dark-soft);
  cursor: pointer; text-align: left; transition: all var(--sl-dur-quick) var(--sl-ease-gentle);
  white-space: nowrap; overflow: hidden;
}
.tool-btn .ti { width: 24px; height: 24px; flex: 0 0 auto; }
.tool-btn .ti svg { width: 100%; height: 100%; }
.tool-btn .tl { display: flex; flex-direction: column; opacity: 0; transition: opacity var(--sl-dur-quick); }
.tool-btn .tl b { font-weight: 500; font-size: var(--sl-text-base); color: var(--sl-ink-on-dark); }
.tool-btn .tl small { color: var(--sl-ink-on-dark-soft); font-size: var(--sl-text-xs); }
#tool-rail:hover .tool-btn .tl { opacity: 1; }
.tool-btn:hover { background: var(--sl-surface-raised); color: var(--sl-gold); }
.tool-btn.active { background: var(--sl-hearth); box-shadow: var(--sl-shadow-warm); color: var(--sl-night); }
.tool-btn.active .tl b { color: var(--sl-night); }
.tool-btn.active .tl small { color: color-mix(in srgb, var(--sl-night) 70%, transparent); }
.tool-btn.locked { opacity: 0.4; cursor: not-allowed; }

/* ===== CONTEXT PANEL (design-spec §5.3) ===== */
#context-panel {
  position: absolute; right: calc(-1 * var(--sl-panel-w) - 30px); top: calc(var(--sl-topbar-h) + var(--sl-inset));
  width: var(--sl-panel-w); max-height: calc(100vh - var(--sl-topbar-h) - var(--sl-runstrip-h) - 46px);
  overflow-y: auto;
  background: var(--sl-surface); border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-lg); border-left: 2px solid var(--sl-border-warm);
  backdrop-filter: blur(4px);
  transition: right var(--sl-dur-panel) var(--sl-ease-soft); z-index: 25;
}
#context-panel.open { right: var(--sl-inset); }
.cp-head { padding: 16px 18px 8px; }
.cp-head .row { display: flex; align-items: flex-start; justify-content: space-between; }
.cp-head h2 { font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-heading); font-size: var(--sl-text-md); color: var(--sl-cream); }
.cp-head .close { cursor: pointer; color: var(--sl-ink-on-dark-soft); font-size: 18px; background:none; border:none; }
.cp-head .close:hover { color: var(--sl-cream); }
.cp-body { padding: 4px 18px 18px; }
.cp-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--sl-border); }
.cp-row .k { color: var(--sl-ink-on-dark-soft); }
.cp-row .v { color: var(--sl-ink-on-dark); font-weight: 500; font-feature-settings: "tnum" 1; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--sl-radius-pill); font-size:var(--sl-text-xs); background: var(--sl-surface-raised); margin: 2px 4px 2px 0; color: var(--sl-ink-on-dark); }
.chip .dot { width:9px; height:9px; border-radius:50%; }

.meter { height: 8px; border-radius: 5px; background: rgba(0,0,0,0.28); overflow:hidden; margin-top:6px; }
.meter > span { display:block; height:100%; border-radius:5px; transition: width var(--sl-dur-panel) var(--sl-ease-soft); }
.meter.rep > span { background: linear-gradient(90deg, var(--sl-ember), var(--sl-gold)); }
.meter.crowd > span { background: linear-gradient(90deg, var(--sl-warn), var(--sl-alert)); }

/* Buttons (design-spec §5.4) */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding: 11px 15px; border-radius: var(--sl-radius-md); cursor: pointer;
  font-family: var(--sl-font-ui); font-size: var(--sl-text-base); font-weight: 600;
  border: 1px solid var(--sl-border); background: transparent; color: var(--sl-ink-on-dark);
  transition: all var(--sl-dur-quick) var(--sl-ease-gentle); width: 100%; margin-top: 10px;
}
.btn:hover { background: var(--sl-surface-raised); }
.btn.primary { background: var(--sl-hearth); color: var(--sl-night); border-color: var(--sl-hearth); box-shadow: var(--sl-shadow-warm); }
.btn.primary:hover { background: var(--sl-gold); }
.btn.primary:active { background: var(--sl-ember); }
.btn.warn { background: transparent; color: var(--sl-alert); border-color: color-mix(in srgb, var(--sl-alert) 60%, transparent); }
.btn.warn:hover { background: var(--sl-alert-soft); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ===== RUN STRIP (design-spec §5.5) ===== */
#run-strip {
  position: absolute; left: calc(var(--sl-toolrail-w) + var(--sl-inset) + 16px); right: var(--sl-inset);
  bottom: var(--sl-inset); height: var(--sl-runstrip-h);
  display: flex; gap: 12px; align-items: stretch; padding: 12px; overflow-x: auto;
  background: color-mix(in srgb, var(--sl-surface) 88%, transparent); backdrop-filter: blur(10px);
  border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow-md); z-index: 15;
}
#run-strip .empty-hint { color: var(--sl-ink-on-dark-soft); align-self: center; padding-left: 10px; font-size: var(--sl-text-sm); }
.run-card {
  position: relative; flex: 0 0 auto; width: 224px; padding: 10px 12px 10px 18px;
  border-radius: var(--sl-radius-md); background: var(--sl-surface); box-shadow: var(--sl-shadow-sm);
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: all var(--sl-dur-quick) var(--sl-ease-gentle);
}
.run-card::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--spine, var(--sl-hearth)); }
.run-card:hover { background: var(--sl-surface-raised); box-shadow: var(--sl-shadow-md); }
.run-card.bad::before { background: var(--sl-alert); }
.run-card .rc-title { font-weight: 600; color: var(--sl-cream); display:flex; align-items:center; gap:7px; }
.run-card .rc-title .dot { width: 9px; height: 9px; border-radius: 50%; }
.run-card .rc-line { font-size: var(--sl-text-sm); color: var(--sl-ink-on-dark-soft); }
.run-card .rc-status { font-size: var(--sl-text-xs); text-transform: uppercase; letter-spacing: var(--sl-tracking-wide); color: var(--sl-ink-on-dark-soft); margin-top: auto; display:flex; align-items:center; gap:6px; }
.run-card .rc-status .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-ok); }
.run-card .rc-status.warn .sdot { background: var(--sl-warn); }
.run-card .rc-status.bad { color: var(--sl-alert); }
.run-card .rc-status.bad .sdot { background: var(--sl-alert); }

/* ===== MODALS / OVERLAYS ===== */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--sl-night-deep) 62%, transparent); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.overlay.hidden { display: none; }
.modal {
  width: min(740px, 92vw); max-height: 86vh; overflow-y: auto;
  background: var(--sl-surface); border-radius: var(--sl-radius-xl);
  box-shadow: var(--sl-shadow-lg); padding: 26px 28px; border: 1px solid var(--sl-border);
}
.modal h2 { font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-heading); font-size: var(--sl-text-xl); color: var(--sl-cream); margin-bottom: 4px; }
.modal .sub { color: var(--sl-ink-on-dark-soft); margin-bottom: 18px; }
.modal .row { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 14px; }
.modal label { font-size: var(--sl-text-xs); text-transform: uppercase; letter-spacing: var(--sl-tracking-wide); color: var(--sl-ink-on-dark-soft); display:block; margin-bottom: 6px; }
.modal select, .modal input[type=range] { width: 100%; }
.modal select {
  padding: 10px 11px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-raised);
  color: var(--sl-ink-on-dark); border: 1px solid var(--sl-border); font-family: var(--sl-font-ui); font-size: var(--sl-text-base);
}
.modal input[type=range] { accent-color: var(--sl-hearth); }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { width: auto; flex: 1; margin: 0; }

/* Cream-paper modals — the season card & annual report (design-spec §5.7/5.8) */
.modal.cream, #season-card.cream {
  background: var(--sl-surface-cream); color: var(--sl-ink); border: none;
}
.modal.cream h2, #season-card.cream .sc-season { color: var(--sl-ink); }
.modal.cream .sub { color: var(--sl-ink-soft); }
.modal.cream .cp-row { border-color: var(--sl-border-cream); }
.modal.cream .cp-row .k { color: var(--sl-ink-soft); }
.modal.cream .cp-row .v { color: var(--sl-ink); font-weight: 600; }

/* Engine shop cards */
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.engine-card {
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); padding: 14px;
  background: var(--sl-surface-raised); cursor: pointer; transition: all var(--sl-dur-quick) var(--sl-ease-gentle);
}
.engine-card:hover { border-color: var(--sl-border-warm); box-shadow: var(--sl-shadow-warm); }
.engine-card.locked { opacity: 0.45; cursor: not-allowed; }
.engine-card .en-portrait { width: 100%; height: 96px; object-fit: cover; border-radius: var(--sl-radius-sm); margin-bottom: 10px; background: var(--sl-night); }
.engine-card .en-name { font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-heading); font-size: var(--sl-text-md); color: var(--sl-cream); }
.engine-card .en-price { color: var(--sl-hearth); font-weight: 600; float: right; font-feature-settings:"tnum" 1; }
.engine-card .en-stats { font-size: var(--sl-text-sm); color: var(--sl-ink-on-dark-soft); margin-top: 6px; line-height: 1.55; }
.engine-card .en-blurb { font-size: var(--sl-text-xs); color: var(--sl-ink-on-dark-soft); margin-top: 8px; font-style: italic; }

/* Validator feedback (design-spec §5.6) */
.validate-box { border-radius: var(--sl-radius-md); padding: 13px 15px; margin-top: 14px; }
.validate-box.ok { background: color-mix(in srgb, var(--sl-ok) 14%, transparent); border: 1px solid var(--sl-ok); color: var(--sl-ok); }
.validate-box.warn { background: color-mix(in srgb, var(--sl-warn) 14%, transparent); border: 1px solid var(--sl-warn); color: var(--sl-warn); }
.validate-box.bad { background: var(--sl-alert-soft); border: 1px solid var(--sl-alert); color: var(--sl-alert); }
.validate-box b { display: block; margin-bottom: 6px; }
.validate-box .fixes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.validate-box .fix {
  padding: 8px 12px; border-radius: var(--sl-radius-sm); cursor: pointer;
  background: var(--sl-surface-raised); border: 1px solid var(--sl-border); color: var(--sl-ink-on-dark);
  font-size: var(--sl-text-sm); font-weight: 600;
}
.validate-box .fix:hover { border-color: var(--sl-border-warm); }

#offset-preview { display: block; margin: 10px auto 4px; }

.stop-rules { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.stop-rule { display: flex; align-items: center; gap: 8px; font-size: var(--sl-text-sm); }
.stop-rule .stop-name { flex: 0 0 130px; color: var(--sl-cream); font-weight: 500; }
.stop-rule .lbl { color: var(--sl-ink-on-dark-soft); }
.stop-rule select { flex: 1; padding: 6px 8px; font-size: var(--sl-text-sm); }

/* ===== SEASON CARD (design-spec §5.7) — cream paper, slides down ===== */
#season-card {
  position: absolute; top: calc(var(--sl-topbar-h) + 14px); left: 50%;
  transform: translate(-50%, -180%);
  width: min(480px, 88vw); padding: 20px 24px;
  background: var(--sl-surface-cream); color: var(--sl-ink);
  border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow-lg);
  transition: transform var(--sl-dur-panel) var(--sl-ease-soft); z-index: 40;
}
#season-card.show { transform: translate(-50%, 0); }
#season-card .sc-kicker { color: var(--sl-ink-soft); }
#season-card .sc-season { font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-heading); font-size: var(--sl-text-lg); color: var(--sl-ink); font-weight: 600; margin-top: 2px; }
#season-card .sc-forecast { color: var(--sl-ink); font-weight: 500; margin: 10px 0; line-height: var(--sl-lh-body); }
#season-card .sc-forecast.winter { color: var(--sl-ember); }
#season-card .sc-summary { color: var(--sl-ink-soft); font-size: var(--sl-text-sm); }
#season-card .sc-dismiss { margin-top: 14px; background: var(--sl-hearth); color: var(--sl-night); border: none; }

/* ===== COACH MARKS (design-spec §5.9) — cream speech card ===== */
#coach {
  position: absolute; z-index: 45; max-width: 300px; padding: 15px 17px;
  background: var(--sl-surface-cream); color: var(--sl-ink);
  border-radius: var(--sl-radius-md); box-shadow: var(--sl-shadow-lg);
  line-height: var(--sl-lh-snug); font-weight: 500;
}
#coach.hidden { display: none; }
#coach .coach-dismiss { margin-top: 10px; font-size: var(--sl-text-sm); color: var(--sl-ink-soft); text-decoration: underline; cursor: pointer; }

/* ===== FLOATING § FEEDBACK (design-spec §7) ===== */
.float-earn {
  position: absolute; z-index: 44; pointer-events: none;
  font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-numeral);
  color: var(--sl-hearth); text-shadow: 0 2px 10px rgba(0,0,0,0.55); font-feature-settings:"tnum" 1;
  animation: floatUp var(--sl-dur-float) var(--sl-ease-soft) forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-38px) scale(1); }
}

#toast {
  position: absolute; bottom: calc(var(--sl-runstrip-h) + 30px); left: 50%;
  transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--sl-surface-raised); color: var(--sl-ink-on-dark); padding: 12px 20px;
  border-radius: var(--sl-radius-md); box-shadow: var(--sl-shadow-md); z-index: 48;
  transition: all var(--sl-dur-quick) var(--sl-ease-soft); pointer-events: none; max-width: 60vw; text-align: center;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.bad { color: var(--sl-alert); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--sl-border-warm); }
::-webkit-scrollbar-track { background: transparent; }

/* ===== START SCREEN ===== */
#start-screen {
  position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(1200px 760px at 50% 32%, var(--sl-night), var(--sl-night-deep));
}
#start-screen.hidden { display: none; }
#start-screen .brand { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
#start-screen .brand img { width: 92px; height: 92px; border-radius: 20px; box-shadow: var(--sl-shadow-lg); }
#start-screen .title { font-family: var(--sl-font-display); font-variation-settings: var(--sl-fraunces-display); font-size: 76px; color: var(--sl-gold); text-shadow: 0 0 46px rgba(242,200,121,0.28); }
#start-screen .tagline { color: var(--sl-ink-on-dark-soft); font-size: 17px; margin-bottom: 28px; font-style: italic; }
#start-screen .btn { width: 280px; margin-top: 12px; padding: 14px; font-size: 15px; }
#start-screen .credit { position: absolute; bottom: 22px; color: var(--sl-ink-on-dark-soft); font-size: var(--sl-text-sm); }