@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Spectral:wght@400;600&display=swap");

:root {
  --bg: #0f1418;
  --panel: #151c22;
  --panel-soft: #1c2430;
  --accent: #ff7a59;
  --accent-2: #4fd1c5;
  --accent-3: #f1c40f;
  --accent-4: #7c9df5;
  --text: #f5f5f5;
  --muted: #8899a6;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.45);
  --table-border: rgba(255, 255, 255, 0.1);
  --table-border-header: rgba(255, 255, 255, 0.15);
  --warning-color: #ffa500;
  --ember-color: #fb923c;
  --scale: 0.9;
  --inv-scale: 1.1111;  /* 1 / 0.9 */
  --full-vh: calc(100vh * var(--inv-scale));
}

* { box-sizing: border-box; }

html {
  background: radial-gradient(circle at 15% 20%, #1d2a32 0%, #0f1418 45%, #0b1014 100%);
  overflow: hidden;
}

body {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  touch-action: manipulation;
}

canvas { touch-action: manipulation; }

.app {
  transform: scale(var(--scale));
  transform-origin: 0 0;
  width: calc(100vw * var(--inv-scale));
  height: calc(100vh * var(--inv-scale));
  display: grid;
  grid-template-columns: 180px 1fr;
}

nav {
  background: linear-gradient(180deg, #0e1317 0%, #121a20 100%);
  padding: 20px 10px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

nav h1 {
  font-size: 19px;
  margin: 0 0 4px 4px;
  font-weight: 700;
}

nav h1 span { color: var(--accent); }

/* Subtle breathing animation for logo bars — pure sine wave via alternate */
@keyframes navBarPulse {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.86); }
}
#nav-logo-bars .nav-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  will-change: transform;
  animation: navBarPulse 3.8s ease-in-out infinite alternate;
}
#nav-logo-bars .nav-bar:nth-child(1) { animation-delay: 0s; }
#nav-logo-bars .nav-bar:nth-child(2) { animation-delay: -1.5s; }
#nav-logo-bars .nav-bar:nth-child(3) { animation-delay: -3.0s; }
#nav-logo-bars .nav-bar:nth-child(4) { animation-delay: -4.5s; }
#nav-logo-bars .nav-bar:nth-child(5) { animation-delay: -6.0s; }

/* Breathing animation for logo bars (gate + mobile drawer) */
.logo-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  will-change: transform;
  animation: navBarPulse 3.8s ease-in-out infinite alternate;
}
.logo-bar:nth-child(1) { animation-delay: 0s; }
.logo-bar:nth-child(2) { animation-delay: -1.5s; }
.logo-bar:nth-child(3) { animation-delay: -3.0s; }
.logo-bar:nth-child(4) { animation-delay: -4.5s; }
.logo-bar:nth-child(5) { animation-delay: -6.0s; }

.nav-subtitle {
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 16px 4px;
  letter-spacing: 0.5px;
}

.nav-icon {
  display: inline-block;
  width: 22px;
  text-align: center;
  margin-right: 6px;
  font-size: 13px;
  opacity: 0.6;
  position: relative;
  top: -1px;
  line-height: 1;
}

/* SVG nav icons */
[data-section="guide"] .nav-svg { width: 12px; height: 12px; position: relative; top: 2.7px; }
[data-section="explorer"] .nav-svg { width: 12px; height: 12px; position: relative; top: 2.2px; }
[data-section="modeling"] .nav-svg { width: 12px; height: 12px; position: relative; top: 2.2px; }

/* Simulations arrow already aligns well */
[data-section="overview"] > .nav-icon {
  top: 0;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 9px 12px;
  margin-bottom: 3px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  opacity: 1;
}

.nav-item.active, .nav-item:hover {
  background: rgba(255, 122, 89, 0.12);
  color: var(--accent);
}

/* Nav icon busy pulse — single animation, synced via inline delay */
@keyframes navIconBusy {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

.nav-item.nav-busy > .nav-icon {
  color: var(--accent);
  animation: navIconBusy 1.8s ease-in-out infinite;
}

/* Nav icon done state — teal signal */
.nav-item.nav-done > .nav-icon {
  color: var(--accent-2);
  opacity: 1;
  transition: color 0.4s ease;
}
.nav-item.nav-done.nav-done-fade > .nav-icon {
  color: inherit;
  transition: color 1s ease;
}

/* --- Nav bottom: locale toggle + auth --- */
.nav-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Locale toggle */
.nav-locale {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 2px;
}
.locale-btn {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.5px;
}
.locale-btn.active {
  background: rgba(255, 122, 89, 0.18);
  color: var(--accent);
}
.locale-btn:hover:not(.active) {
  color: var(--fg);
}

/* Auth buttons */
.nav-auth { margin-top: 4px; }
.nav-auth-buttons {
  display: flex;
  gap: 4px;
}
.auth-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 5px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.auth-btn.auth-register {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.auth-btn.auth-register:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.auth-btn.active {
  background: rgba(255, 122, 89, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Logged-in state */
.nav-auth-user {
  text-align: center;
}
.auth-user-name {
  font-size: 12px;
  color: var(--fg);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-btn.auth-logout {
  width: 100%;
  font-size: 11px;
  border-color: var(--border);
  color: var(--muted);
}
.auth-btn.auth-delete-account {
  width: 100%;
  font-size: 10px;
  border-color: rgba(220, 60, 60, 0.3);
  color: #dc3c3c;
  margin-top: 8px;
  margin-bottom: 4px;
}
.auth-btn.auth-delete-account:hover {
  border-color: #dc3c3c;
  background: rgba(220, 60, 60, 0.1);
}

/* Auth form (animated expand) */
.auth-form-wrapper {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}
.auth-form-wrapper.open {
  max-height: 220px;
  min-height: 190px;
  opacity: 1;
  margin-top: 8px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-form input {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.15s;
}
.auth-form input:focus {
  border-color: var(--accent);
}
.auth-form input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.auth-submit {
  background: var(--accent);
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth-submit:hover { opacity: 0.85; }
.auth-cancel {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.auth-cancel:hover { color: var(--fg); }
.auth-error {
  font-size: 11px;
  color: #ff5959;
  min-height: 0;
  transition: min-height 0.15s;
  text-align: center;
}

main {
  padding: 20px 24px 16px;
  overflow-y: auto;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

#header-glow {
  position: fixed;
  top: 0;
  left: 180px;
  right: 0;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.52;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0) 100%);
  background:
    radial-gradient(ellipse 650px 420px at 20% 15%, rgba(79,209,197,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 550px 370px at 70% 10%, rgba(124,157,245,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 480px 320px at 50% 25%, rgba(255,122,89,0.32) 0%, transparent 70%),
    radial-gradient(ellipse 420px 310px at 35% 5%,  rgba(150,115,230,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 380px 270px at 80% 20%, rgba(241,196,15,0.22) 0%, transparent 70%);
  background-size: 220% 220%;
  animation: glowDrift 20s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes glowDrift {
  0%   { background-position: 30% 20%, 70% 10%, 50% 30%, 20% 15%, 80% 25%; }
  25%  { background-position: 48% 10%, 52% 25%, 35% 15%, 58% 5%,  62% 20%; }
  50%  { background-position: 60% 25%, 38% 15%, 58% 10%, 30% 20%, 48% 10%; }
  75%  { background-position: 35% 15%, 65% 20%, 45% 25%, 50% 10%, 75% 15%; }
  100% { background-position: 25% 22%, 75% 8%,  55% 22%, 40% 15%, 65% 25%; }
}

header .title { font-size: 20px; font-weight: 700; }
header .subtitle { font-family: "Spectral", serif; color: var(--muted); font-size: 13px; margin-top: 3px; }

.section { display: none; }
.section.active { display: block; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

/* ── In-app modal (replaces browser confirm/alert) ───────── */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: appModalFadeIn 0.15s ease;
}
@keyframes appModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.app-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  max-width: 400px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: appModalSlideIn 0.15s ease;
}
@keyframes appModalSlideIn {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.app-modal-msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 18px;
  white-space: pre-line;
}
.app-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.app-modal-actions button {
  min-width: 80px;
}
.app-modal-actions .danger {
  background: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.app-modal-actions .danger:hover {
  background: #c9302c;
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 10px;
  min-width: 0;
  box-shadow: 0 8px 20px var(--shadow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  border-color: rgba(79, 209, 197, 0.25);
  box-shadow:
    0 8px 20px var(--shadow),
    0 0 8px rgba(79, 209, 197, 0.12),
    0 0 30px rgba(79, 209, 197, 0.06);
}

.card.wide { grid-column: span 2; }
.card.tall { min-height: 400px; }

/* EMTR/PTR compute banner — slim, full-width */
.emtr-compute-banner { padding: 12px 18px !important; }
.emtr-compute-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.emtr-compute-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.emtr-progress-bar {
  width: 125px;
  flex-shrink: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.emtr-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
}
.emtr-progress-bar.loading .emtr-progress-fill {
  width: 30%;
  background: var(--accent);
  animation: emtr-progress-slide 1.5s ease-in-out infinite;
}
.emtr-progress-bar.done .emtr-progress-fill {
  width: 100%;
  background: var(--accent-2);
  animation: none;
  transition: width 0.3s ease;
}
@keyframes emtr-progress-slide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
  100% { transform: translateX(400%); }
}

.card h3 {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: 600;
}

.card-note {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 12px 0;
}

.form-group { margin-bottom: 12px; }

.form-row {
  display: flex;
  gap: 14px;
}

.form-row .form-group { flex: 1; min-width: 0; }

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

input, select, textarea {
  width: 100%;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}

/* Fix Safari select height — Safari ignores padding on selects */
select:not([multiple]) {
  height: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238899a6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-2);
}

input::placeholder { color: var(--muted); opacity: 0.5; }

/* Hide number input spinners globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

textarea { min-height: 50px; resize: vertical; }
select[multiple] { min-height: 105px; }

/* Simulation tab layout - Run Config fixed 420px (matches Parameters left column) */
#overview .grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 4.5fr) minmax(0, 5.5fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: calc(var(--full-vh) - 160px);
  max-height: calc(var(--full-vh) - 160px);
}

/* Consistent overflow clipping across all tab sections */
.section { overflow-x: clip; }

#overview .card {
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
}

#overview .card:first-child {
  overflow-y: auto;
  scrollbar-width: thin;
}

#overview .card:first-child > .button-row {
  margin-top: 16px;
}

#overview .card:first-child .run-config-overflow {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}

#overview .card .results-list,
#overview .card .sim-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-height: none;
}
#overview .card .sim-list {
  padding-right: 6px;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
#overview .card .sim-list.scrolled-bottom,
#overview .card .sim-list.no-overflow {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Compact result rows in Simulation Latest Results */
#overview .results-list .list-item {
  padding: 0 12px;
  border-bottom: none;
}

#overview .results-list .list-item .result-section {
  margin-top: 12px;
  padding-top: 8px;
  line-height: 1.6;
  margin-bottom: 1px;
  font-size: 12px;
}

#overview .results-list .list-item:first-child .result-section {
  margin-top: 2px;
  padding-top: 2px;
  border-top: none;
}

#overview .results-list .list-item .result-note {
  display: block;
  margin-bottom: 5px;
}

#overview .results-list .list-item .result-row {
  padding: 3px 0;
  line-height: 1.3;
}

/* Analysis tab layout */
#analysis .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}



#analysis .card.wide {
  grid-column: span 2;
}

#analysis .indicators-poverty-row,
#analysis .poverty-gap-row {
  grid-column: span 2;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

#analysis .card {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

#analysis .card .chart-container {
  flex: 1;
  min-height: 240px;
}

#analysis .results-list {
  max-height: none;
  overflow-y: visible;
}

#analysis .tall-list {
  max-height: none;
}

.analysis-section-header {
  grid-column: span 2;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 20px 0 4px 0;
  border-bottom: 1px solid var(--border);
}

/* Parameters tab layout - side by side columns */
#parameters .grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#parameters .left-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  height: calc(var(--full-vh) - 160px);
}

/* Year + Parameter Timing side by side */
.run-year-timing-row { margin-bottom: 6px; }
.param-year-timing-row { margin-bottom: 8px; }
.param-year-timing-row > .form-group,
.run-year-timing-row > .form-group { margin-bottom: 0; }
.param-year-col, .run-year-col { flex: 1 !important; }
.param-timing-col, .run-timing-col { flex: 3 !important; min-width: 0; }

#parameters .left-column .card:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#parameters .left-column .card:last-child #preset-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

#preset-list.preset-list-collapsed {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
#preset-list.preset-list-collapsed.scrolled-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

#preset-list.preset-list-expanded {
  max-height: none;
}
#parameters .left-column.presets-expanded {
  height: auto;
}
#parameters .left-column.presets-expanded .card:last-child #preset-list {
  overflow-y: visible;
}

#parameters .card.wide {
  grid-column: span 1;
}

button.primary {
  background: var(--accent);
  border: none;
  color: #0b0f12;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

button.secondary {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

button.primary:hover { background: #ff9577; }
button.secondary:hover { background: rgba(79, 209, 197, 0.1); }

.button-row { display: flex; gap: 8px; margin-top: 10px; }

.icon-btn {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background: var(--accent);
  color: #000;
}

.tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(79, 209, 197, 0.12);
  color: var(--accent-2);
  font-weight: 500;
}

/* Config summary (replaces run-id-row) */
.run-config-summary {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--panel-soft);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
}
.config-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px;
  padding: 1px 0;
}
.config-label { color: var(--muted); }
.config-value { font-weight: 600; color: var(--fg); }
.config-placeholder { color: var(--muted); font-style: italic; }

/* Inline year-mismatch warning */
.sim-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(241, 196, 15, 0.08);
  border: 1px solid rgba(241, 196, 15, 0.3);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.sim-warning .sim-warning-title {
  font-weight: 600;
  color: var(--accent-3);
  margin-bottom: 4px;
}
.sim-warning ul {
  margin: 4px 0 8px 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
}
.sim-warning .sim-warning-hint {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.sim-warning .button-row {
  margin-top: 0;
}

/* Simulation list entries */
.sim-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}
.sim-entry {
  position: relative;
  padding: 8px 30px 8px 10px;
  background: var(--panel-soft);
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.sim-delete {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.sim-entry:hover .sim-delete {
  opacity: 1;
}
.sim-delete:hover {
  color: #ff5959;
}
.sim-entry.pending .sim-delete,
.sim-entry.running .sim-delete { font-size: 14px; }
.sim-entry.done:hover { border-color: var(--accent); }
.sim-entry.active {
  border-color: var(--accent);
  background: rgba(255, 122, 89, 0.08);
}
.sim-entry .sim-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* Sim-entry queue states */
.sim-entry.running {
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
}
.sim-entry.pending {
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.6;
  cursor: default;
}
.sim-entry.error {
  border-color: #ff5959;
  background: rgba(255, 89, 89, 0.08);
  cursor: default;
}
.sim-entry-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1.5px;
  overflow: hidden;
  margin-top: 6px;
}
.sim-entry-progress .bar {
  height: 100%;
  border-radius: 1.5px;
}
.sim-entry.done .sim-entry-progress .bar {
  width: 100%;
  background: var(--accent-2);
}
.sim-entry.running .sim-entry-progress .bar {
  width: 30%;
  background: var(--accent);
  animation: progress-slide 1.2s ease-in-out infinite;
}
.sim-entry.pending .sim-entry-progress .bar {
  width: 0;
}
.sim-entry.error .sim-entry-progress .bar {
  width: 100%;
  background: #ff5959;
}
.sim-entry.cloud {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.015);
  opacity: 0.55;
  cursor: pointer;
}
.sim-entry.cloud:hover {
  opacity: 0.75;
  border-color: rgba(255, 255, 255, 0.25);
}
.sim-entry.cloud.selected {
  border-color: var(--accent-2);
  opacity: 0.85;
  background: rgba(79, 209, 197, 0.06);
}
.sim-entry.cloud .sim-entry-progress .bar {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
}
.sim-cloud-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.sim-entry:hover .sim-cloud-actions {
  opacity: 1;
}
.sim-cloud-btn {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  transition: color 0.15s;
}
.sim-cloud-play {
  display: inline-block;
  width: 14px;
  height: 12px;
  vertical-align: middle;
  position: relative;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.sim-cloud-play::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  border: 4px solid transparent;
  border-left: 5px solid currentColor;
  border-right: 0;
}
.sim-cloud-play:hover { color: var(--accent-2); opacity: 1; }
.sim-cloud-del { font-size: 16px; }
.sim-cloud-del:hover { color: #ff5959; }

.cloud-shift-hint {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.55;
  line-height: 1.45;
  text-align: center;
  padding: 4px 8px;
  letter-spacing: 0.2px;
}

/* Export multi-select list */
.export-multi-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.export-multi-item {
  padding: 8px 10px;
  background: var(--panel-soft);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.export-multi-item:hover { border-color: var(--accent); }
.export-multi-item.selected { border-color: var(--accent-2); background: rgba(76, 175, 80, 0.10); }
.export-multi-item .em-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.table th, .table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

.table th { font-weight: 600; color: var(--muted); }
.table input { padding: 5px 7px; font-size: 12px; transition: all 0.15s ease; }
.table input:focus { outline: none; border-color: var(--accent-2); }

/* Parameter table container */
#param-table {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  min-height: 200px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
#param-table.scrolled-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

#parameters > .grid > .card.tall {
  display: flex;
  flex-direction: column;
  height: calc(var(--full-vh) - 160px);  /* explicit height since grid is align-items:start */
  min-height: 0;
  overflow: hidden;
}

#param-table .table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

/* Charts – dedicated wrapper prevents Chart.js resize loop */
.chart-container {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #0b1014;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.chart-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin: -4px 0 6px 0;
  line-height: 1.4;
}

.chart-container.chart-tall {
  height: 340px;
}

#household .chart-container.chart-tall,
#multiyear .chart-container.chart-tall {
  height: 408px;
}

#household .chart-container.chart-decomp {
  height: 530px;
}

.chart-container.chart-xl {
  height: 500px;
  min-height: 500px;
}

#analysis .card .chart-container.chart-xl {
  height: auto;
  min-height: 500px;
}


#analysis .chart-container.chart-ventile {
  height: 480px;
  min-height: 480px;
}

/* Lists */
.list, .results-list {
  overflow-y: auto;
}

.list { max-height: 180px; }
.results-list { max-height: 320px; }
.tall-list { max-height: 400px; }

.list-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

.list-item:last-child { border-bottom: none; }
.list-item.placeholder { color: var(--muted); font-style: italic; }

.preset-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preset-section-header {
  padding: 14px 0 6px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border);
}

#preset-list .list-item { border-bottom: none; }

.preset-remove-label { display: none; }
.preset-remove-btn {
  padding: 4px 6px !important;
  min-width: 0 !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  background: var(--bg) !important;
}
.preset-remove-btn:hover {
  color: var(--danger, #e53e3e) !important;
  border-color: var(--danger, #e53e3e) !important;
  background: rgba(229, 62, 62, 0.1) !important;
}

#preset-list { padding-right: 1px; }

.badge {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  margin-left: 5px;
}

/* Analysis tabs */
.analysis-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
}

.analysis-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.analysis-tab.active {
  background: var(--accent-2);
  color: #000;
  border-color: var(--accent-2);
}

.analysis-tab:hover:not(.active) {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.analysis-panel {
  padding-top: 6px;
  padding-bottom: 2px;
}

/* Analysis mode card visibility — independent gating per mode + EMTR */
.single-run-card, .compare-run-card {
  transition: opacity 0.15s ease;
}

/* Single-run cards: hidden unless has-single-results AND not in compare-mode */
#analysis:not(.has-single-results) .single-run-card {
  display: none !important;
}
#analysis.compare-mode .single-run-card {
  display: none !important;
}

/* Compare-run cards: hidden unless has-compare-results AND in compare-mode */
#analysis:not(.has-compare-results) .compare-run-card {
  display: none !important;
}
#analysis:not(.compare-mode) .compare-run-card {
  display: none !important;
}
#analysis.has-compare-results.compare-mode .compare-run-card:not(.emtr-card) {
  display: block !important;
}
#analysis.has-compare-results.compare-mode.has-emtr-results .compare-run-card.emtr-card {
  display: block !important;
}
#analysis.has-compare-results.compare-mode .compare-run-card.indicators-poverty-row,
#analysis.has-compare-results.compare-mode .compare-run-card.poverty-gap-row {
  display: flex !important;
}

/* EMTR/PTR cards: hidden until computed, regardless of mode */
#analysis:not(.has-emtr-results) .emtr-card {
  display: none !important;
}

/* Full-height panels in compare mode — no scroll truncation */
#analysis.compare-mode .compare-run-card .results-list,
#analysis.compare-mode .compare-run-card .tall-list {
  max-height: none;
  overflow-y: visible;
}

/* Highlighted "All" row in decile summary (both single-run and compare) */
.decile-summary-compare tbody tr:first-child,
#decile-summary-table tbody tr:first-child {
  background: rgba(79, 209, 197, 0.12);
  font-weight: 600;
  color: var(--accent-2);
}
/* No vertical borders in single-run decile summary */
#decile-summary-table .compare-table th,
#decile-summary-table .compare-table td {
  border-left: none;
  border-right: none;
}

/* Center spanning group headers (Disp. Income, Income Share, etc.) */
.decile-summary-compare th[colspan],
.compact-indicators th[colspan],
.compact-poverty th[colspan] {
  text-align: center;
}

/* Guide Section */
.guide-container { max-width: 1400px; }

.guide-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
}

.guide-left,
.guide-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-left .card,
.guide-right .card { padding: 20px; }

.guide-toggle-card {
  cursor: pointer;
}

.guide-left .card:hover summary h3,
.guide-left .card:hover > .guide-section > h3 {
  color: var(--accent-2);
}

.guide-left .card:hover .guide-title,
.guide-right .card:hover .guide-title {
  color: var(--accent-2);
}

.guide-right .card {
  position: sticky;
  top: 10px;
  max-height: calc(var(--full-vh) - 30px);
  overflow-y: auto;
}

.guide-right .guide-title {
  font-size: 16px;
  margin: 0 0 16px 0;
  color: var(--accent);
}

.guide-right .guide-section h3 { font-size: 14px; }
.guide-right .guide-section { margin-bottom: 20px; padding-bottom: 14px; }
.guide-right .module-grid { grid-template-columns: 1fr; }

.guide-title {
  font-size: 22px;
  margin: 0 0 20px 0;
  color: var(--accent);
  transition: color 0.3s ease;
}

.guide-section {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.guide-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Collapsible guide sections */
details.guide-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
details.guide-details summary::-webkit-details-marker { display: none; }

details.guide-details summary::before {
  content: "▶";
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s;
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
}
details.guide-details[open] summary::before {
  transform: rotate(90deg);
}
details.guide-details[open] summary {
  margin-bottom: 12px;
}
details.guide-details summary h3 {
  margin: 0;
  display: inline;
}

.guide-section h3 {
  font-size: 16px;
  margin: 0 0 18px 0;
  color: var(--text);
  transition: color 0.3s ease;
}

.guide-section p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 10px 0;
}

.guide-section p strong { color: var(--text); }

.guide-steps {
  padding-left: 22px;
  margin: 0;
}

.guide-steps li {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.guide-steps li strong { color: var(--text); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.info-item {
  background: var(--panel-soft);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.info-item > strong:first-child {
  display: block;
  font-size: 12px;
  color: var(--accent-2);
  margin-bottom: 4px;
}

.info-item p strong {
  color: var(--text);
  font-weight: 600;
}

.info-item p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.module-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.module-grid .module-box.benefit {
  grid-row: 1 / 3;
  grid-column: 2;
}

.module-box {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.module-box.tax { background: rgba(255, 89, 89, 0.08); }
.module-box.benefit { background: rgba(79, 209, 197, 0.08); }
.module-box.fee { background: rgba(241, 196, 15, 0.08); }

.module-box h4 {
  font-size: 11px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.module-box.tax h4 { color: #ff5959; }
.module-box.benefit h4 { color: var(--accent-2); }
.module-box.fee h4 { color: var(--accent-3); }

.module-box .module-item {
  font-size: 11px;
  padding: 3px 0;
  color: var(--muted);
  border: none;
}

.module-box .module-item strong {
  color: var(--text);
  margin-right: 3px;
}

.guide-tab-link { cursor: pointer; }
.guide-tab-link:hover { opacity: 0.7; }

/* Quick Start box bullets: tight within, spaced between */
.guide-section .qs-boxes li {
  margin-bottom: 7px;
  padding-bottom: 0;
}
.guide-section .qs-boxes li:last-child {
  margin-bottom: 0;
}

/* Quick Start box flex weights */
.qs-baseline { flex: 0.80; }
.qs-reform { flex: 1.45; }
.qs-household { flex: 1.35; }
.qs-boxes { display: flex; gap: 10px; margin-top: 8px; }

/* Guide subheading */
.guide-h4 { margin: 28px 0 8px; font-size: 13px; }

/* Standard bullet list */
.guide-list { margin: 0 0 12px 5px; font-size: 12px; line-height: 1.8; }

/* Nested sub-list */
.guide-list-nested { margin: 4px 0 4px 8px; font-size: 11.5px; line-height: 1.7; color: var(--muted); }

/* Info box variants */
.guide-infobox {
  background: rgba(79, 209, 197, 0.05);
  border-left: 3px solid var(--accent-2);
  border-radius: 4px;
  padding: 12px;
  margin: 12px 0 36px;
  font-size: 12px;
}
.guide-infobox--warning {
  background: rgba(255, 165, 0, 0.05);
  border-left-color: var(--warning-color);
}
.guide-infobox--blue {
  background: rgba(99, 102, 241, 0.05);
  border-left-color: #6366f1;
}
.guide-infobox--ember {
  background: rgba(251, 146, 60, 0.07);
  border-left-color: var(--ember-color);
}
.guide-infobox--accent {
  background: linear-gradient(135deg, rgba(79, 209, 197, 0.08), rgba(79, 209, 197, 0.04));
  border-left: 3px solid var(--accent-2);
  border-radius: 6px;
  padding: 12px;
  margin: 16px 0 36px;
}

/* Guide table */
.guide-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 32px; }
.guide-table th { text-align: left; padding: 8px; border-bottom: 1px solid var(--table-border-header); background: rgba(79, 209, 197, 0.1); }
.guide-table td { padding: 8px; border-bottom: 1px solid var(--table-border); }
.guide-table tr:last-child td { border-bottom: none; }
.table-section-header td { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-2); background: rgba(79, 209, 197, 0.06); }

/* Code box */
.guide-codebox {
  margin: 8px 0 28px 8px;
  font-size: 11.5px;
  line-height: 1.7;
  font-family: var(--font-mono, monospace);
  background: var(--panel-soft, #1a2332);
  padding: 10px 14px;
  border-radius: 6px;
  overflow-x: auto;
}

/* Footnote */
.guide-footnote { font-size: 11px; color: var(--muted); margin-top: 4px; margin-bottom: 28px; }

/* Module sub-bullet list */
.guide-module-details { margin: 4px 0 8px 8px; font-size: 11.5px; line-height: 1.7; color: var(--muted); }

/* Scope tags */
.guide-scope-tag { font-size: 11px; font-weight: 600; }
.scope-individual { color: var(--accent-4); }
.scope-household { color: var(--accent-2); }

/* Income concept checkboxes */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  background: var(--panel-soft);
  border-radius: 4px;
}

.checkbox-label:hover {
  background: rgba(255, 255, 255, 0.08);
}

.checkbox-label input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--accent);
}

.checkbox-label.toggle-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.income-options {
  border-top: none;
  padding-top: 0;
}

/* Comparison tables for Analysis tab */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.compare-table th,
.compare-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}
.compare-table td:first-child {
  font-weight: 500;
}

.compare-table th {
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sub-column headers (Base, Ref, Δ) in multi-row headers: override first-child weight+align */
.compare-table thead tr + tr th:first-child {
  font-weight: 600;
}
.decile-summary-compare thead tr + tr th:first-child {
  text-align: right !important;
}
.compare-table thead tr + tr th {
  font-weight: 600;
}
.compact-poverty thead tr + tr th:first-child,
.compact-indicators thead tr + tr th:first-child {
  text-align: center;
}

.compare-table .positive {
  color: #4fd1c5;
}

.compare-table .negative {
  color: #ff5959;
}

.compare-table .neutral {
  color: var(--muted);
}

.compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* HH-type profiles table */
.hhtype-table th {
  cursor: help;
}
.hhtype-table .hhtype-all-row td {
  background: rgba(79, 209, 197, 0.12);
  color: var(--accent-2);
  border: none;
}

.compare-table tr.section-header-row td {
  background: rgba(79, 209, 197, 0.12);
  font-size: inherit;
  padding: 8px 10px;
  color: var(--accent-2);
}

/* Decile summary compare table */
.decile-summary-compare {
  table-layout: auto;
  font-size: 11px;
}
.decile-summary-compare th,
.decile-summary-compare td {
  white-space: nowrap;
}
.decile-summary-compare th.group-border,
.decile-summary-compare td.group-border {
  border-left: 1px solid var(--border);
}

/* Compact indicators table for compare mode */
.compact-indicators {
  font-size: 11px;
}

/* Compact poverty tables for compare mode */
.compact-poverty {
  font-size: 11px;
}
.compact-poverty th,
.compact-poverty td {
  white-space: nowrap;
}
.compact-poverty th.group-border,
.compact-poverty td.group-border {
  border-left: 1px solid var(--border);
}
/* Center and bold all sub-column headers (Base, Ref, Δ) in compact poverty tables */
.compact-poverty thead th:not(:first-child) {
  text-align: center;
  font-weight: 600;
}

/* Fiscal aggregate tables — consistent column widths + group separators */
.fiscal-module-table {
  table-layout: fixed;
}

/* Fiscal expand/collapse arrow — CSS triangle, no Unicode chars */
.fiscal-expand {
  display: inline-block;
  width: 16px;
  height: 12px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  margin-right: 4px;
  opacity: 0.4;
  transition: opacity 0.15s, transform 0.15s;
  position: relative;
}
.fiscal-expand::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  border: 4px solid transparent;
  border-left: 5px solid currentColor;
  border-right: 0;
}
.fiscal-expand.expanded {
  transform: rotate(90deg);
}
.fiscal-expand:active { opacity: 0.8; }

/* Single-run fiscal table (6 cols: Module | Total | HH Count | IND Count | HH Avg | IND Avg) */
.fiscal-module-table.fiscal-single col:nth-child(1) { width: 34%; }
.fiscal-module-table.fiscal-single col:nth-child(2) { width: 14%; }
.fiscal-module-table.fiscal-single col:nth-child(3) { width: 13%; }
.fiscal-module-table.fiscal-single col:nth-child(4) { width: 13%; }
.fiscal-module-table.fiscal-single col:nth-child(5) { width: 13%; }
.fiscal-module-table.fiscal-single col:nth-child(6) { width: 13%; }

/* Separators: between Total & HH Count (col 3), between IND Count & HH Avg (col 5) */
.fiscal-module-table.fiscal-single th:nth-child(3),
.fiscal-module-table.fiscal-single td:nth-child(3),
.fiscal-module-table.fiscal-single th:nth-child(5),
.fiscal-module-table.fiscal-single td:nth-child(5) {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
}

/* Compare-run fiscal table (7 cols: Module | BL Total | Δ Total | Δ HH Count | Δ IND Count | Δ HH Avg | Δ IND Avg) */
/* Module col matches single-run (34%) so Baseline Total aligns with Total column */
.fiscal-module-table.fiscal-compare col:nth-child(1) { width: 34%; }
.fiscal-module-table.fiscal-compare col:nth-child(2) { width: 11%; }
.fiscal-module-table.fiscal-compare col:nth-child(3) { width: 11%; }
.fiscal-module-table.fiscal-compare col:nth-child(4) { width: 11%; }
.fiscal-module-table.fiscal-compare col:nth-child(5) { width: 11%; }
.fiscal-module-table.fiscal-compare col:nth-child(6) { width: 11%; }
.fiscal-module-table.fiscal-compare col:nth-child(7) { width: 11%; }

/* Separators: between Δ Total & Δ HH Count (col 4), between Δ IND Count & Δ HH Avg (col 6) */
.fiscal-module-table.fiscal-compare th:nth-child(4),
.fiscal-module-table.fiscal-compare td:nth-child(4),
.fiscal-module-table.fiscal-compare th:nth-child(6),
.fiscal-module-table.fiscal-compare td:nth-child(6) {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
}

/* Data section - synthetic data generation */
#data .data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

.data-left-column,
.data-right-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.data-left-column .card,
.data-right-column .card {
  margin: 0;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  height: 24px;
  background: var(--panel-soft);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2) 0%, #38c7b6 100%);
  border-radius: 12px;
  transition: width 0.3s ease;
}

.progress-bar.error {
  background: linear-gradient(90deg, #ff5959 0%, #ff7a59 100%);
}

.progress-stage {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* Synthetic result display */
.synth-result {
  margin-top: 16px;
  padding: 12px;
  background: var(--panel-soft);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.result-header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.result-header.success { color: var(--accent-2); }
.result-header.failed { color: #ff5959; }

.result-details {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.synth-result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.result-stat {
  background: var(--panel);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.result-stat.success { color: var(--accent-2); }
.result-stat.warning { color: var(--accent-3); }

.synth-result-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.synth-result-section h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.synth-result-section h5 {
  margin: 8px 0 6px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-2);
}

.result-meta {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0;
}

.comparison-group {
  margin-bottom: 12px;
}

.comparison-table.compact {
  font-size: 11px;
  width: 100%;
}

.comparison-table.compact th,
.comparison-table.compact td {
  padding: 4px 8px;
}

.comparison-table .diff {
  font-family: monospace;
  text-align: right;
}

.comparison-table tr.good { background: rgba(79, 209, 197, 0.08); }
.comparison-table tr.good .diff { color: var(--accent-2); }

.comparison-table tr.ok { background: rgba(241, 196, 15, 0.05); }
.comparison-table tr.ok .diff { color: var(--accent-3); }

.comparison-table tr.bad { background: rgba(255, 89, 89, 0.08); }
.comparison-table tr.bad .diff { color: #ff5959; }

.comparison-table .status {
  text-align: center;
  font-size: 14px;
}

.comparison-table tr.good .status { color: var(--accent-2); }
.comparison-table tr.bad .status { color: #ff5959; }

/* Advanced options toggle */
.advanced-toggle {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  user-select: none;
}

.advanced-toggle:hover {
  color: var(--accent-2);
}

.toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
  margin-right: 6px;
}

.toggle-icon.expanded {
  transform: rotate(90deg);
}

/* Parameter editor collapsible group toggle */
.collapse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.collapse-icon::before {
  content: "▾";
  font-size: 14px;
  opacity: 0.5;
}
.param-group-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.advanced-options {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* Dataset list */
.dataset-list {
  max-height: 400px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.dataset-list.scrolled-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

.dataset-item {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dataset-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.dataset-item:last-child {
  border-bottom: none;
}

.dataset-item.selected {
  background: rgba(79, 209, 197, 0.1);
  border-left: 3px solid var(--accent-2);
}

.dataset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dataset-year {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.btn-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.btn-delete:hover {
  background: rgba(255, 89, 89, 0.15);
  color: #ff5959;
}

.dataset-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.dataset-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.dataset-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.dataset-badge.calibrated {
  background: rgba(79, 209, 197, 0.15);
  color: var(--accent-2);
}

.dataset-badge.validated {
  background: rgba(79, 209, 197, 0.15);
  color: var(--accent-2);
}

.dataset-badge.failed {
  background: rgba(255, 89, 89, 0.15);
  color: #ff5959;
}

.dataset-badge.default {
  background: rgba(156, 136, 255, 0.15);
  color: #9c88ff;
}

.dataset-badge.partial {
  background: rgba(178, 204, 68, 0.15);
  color: #b2cc44;
}

.dataset-badge.uprated {
  background: rgba(255, 177, 66, 0.15);
  color: #ffb142;
}

.protected-icon {
  font-size: 12px;
  padding: 4px;
  cursor: default;
}

/* Validation benchmarks */
.validation-header {
  padding: 12px;
  background: var(--panel-soft);
  border-radius: 6px;
  margin-bottom: 12px;
}

.validation-header.passed {
  border-left: 3px solid var(--accent-2);
}

.validation-header.failed {
  border-left: 3px solid #ff5959;
}

.validation-status {
  font-weight: 600;
  font-size: 14px;
}

.validation-status.passed { color: var(--accent-2); }
.validation-status.failed { color: #ff5959; }

.validation-year {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.benchmark-list {
  max-height: 350px;
  overflow-y: auto;
}

.benchmark-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.benchmark-item:last-child {
  border-bottom: none;
}

.benchmark-name {
  font-size: 12px;
  color: var(--text);
  flex: 1;
}

.benchmark-values {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}

.benchmark-expected,
.benchmark-actual {
  min-width: 80px;
  text-align: right;
}

.benchmark-status {
  width: 20px;
  text-align: center;
  font-weight: 600;
}

.benchmark-status.pass { color: var(--accent-2); }
.benchmark-status.fail { color: #ff5959; }

/* StatsFin status panel */
.statfin-status {
  padding: 10px;
  background: var(--panel-soft);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.statfin-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.statfin-status-icon {
  font-size: 14px;
}

.statfin-status.cached .statfin-status-icon {
  color: var(--accent-2);
}

.statfin-status.missing .statfin-status-icon {
  color: var(--accent-3);
}

/* Statistics tabs and panels */
.stats-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.stats-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s ease;
}

.stats-tab.active {
  background: var(--accent-2);
  color: #000;
  border-color: var(--accent-2);
}

.stats-tab:hover:not(.active) {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.stats-panel {
  padding: 12px 0;
}

#stats-employment {
  margin-bottom: 20px;
}

.stats-section {
  margin-bottom: 20px;
}

.stats-section h4 {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Income tab: sections stack vertically, inner card grids use 2 columns */
#stats-income-grid {
  display: block;
}

#stats-income-grid .stats-grid {
  grid-template-columns: repeat(2, 1fr);
}

.stat-card {
  background: var(--panel-soft);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.stat-card .stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-card .stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.stat-card .stat-subvalue {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Comparison table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.comparison-table th,
.comparison-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
}

.comparison-table th {
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 10px;
  text-transform: uppercase;
}

.comparison-table .deviation-ok {
  color: var(--accent-2);
}

.comparison-table .deviation-warning {
  color: var(--accent-3);
  background: rgba(241, 196, 15, 0.1);
}

.comparison-table .deviation-error {
  color: #ff5959;
  background: rgba(255, 89, 89, 0.1);
}

/* Distribution table */
.distribution-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.distribution-table th,
.distribution-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.distribution-table th:first-child,
.distribution-table td:first-child {
  text-align: left;
}

.distribution-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

/* Improved Results Display Styling */
.result-section {
  display: block;
  font-size: 11px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.result-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.result-note {
  font-size: 9px;
  color: var(--muted);
  text-transform: none;
  font-weight: normal;
  letter-spacing: 0;
}

.result-row {
  display: block;
  padding: 3px 0;
  font-size: 12px;
}

.result-row strong {
  color: var(--text);
}

/* Value change highlighting for Analysis tab toggles */
.value-changed {
  animation: highlightChange 2s ease-out;
  border-radius: 3px;
}

@keyframes highlightChange {
  0% { background-color: rgba(79, 209, 197, 0.3); }
  100% { background-color: transparent; }
}

.value-increased {
  color: var(--accent-2) !important;
}

.value-decreased {
  color: #ff5959 !important;
}


/* ── Household Explorer ── */

/* Layout wrapper for household section */
#household .hh-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Prevent page-level scroll on Household tab until content needs it.
   JS adds .hh-needs-scroll when a card overflows or charts are shown. */
main:has(> #household.active:not(.has-charts):not(.hh-needs-scroll)) {
  overflow-y: hidden;
}

.hh-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hh-section {
  margin-bottom: 12px;
}

.hh-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hh-row-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}

.form-row-compact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.form-group-sm {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 80px;
  flex: 1;
}

.form-group-sm label {
  font-size: 10px;
  color: var(--muted);
  padding-left: 4px;
}

.form-group-sm input,
.form-group-sm select {
  padding: 4px 6px;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
}

.form-group-sm select:not([multiple]) {
  height: 28px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238899a6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 24px;
}

.form-group-sm input:focus,
.form-group-sm select:focus {
  border-color: var(--accent);
  outline: none;
}

.hh-adult-row,
.hh-child-row {
  padding: 8px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 6px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Daycare warning for children age 6+ */
.hh-daycare-warning {
  color: #f1c40f;
  font-size: 11px;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(241, 196, 15, 0.1);
  border-radius: 4px;
}

/* Income Breakdown table styling */
.hh-trajectory-table {
  font-size: 13px;
}

.hh-trajectory-table td {
  padding: 6px 8px;
}

.hh-main-row td {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hh-main-row.hh-benefit-row td:first-child strong {
  color: #4fd1c5;
}

.hh-main-row.hh-tax-row td:first-child strong {
  color: #ff5959;
}

.hh-main-row.hh-fee-row td:first-child strong {
  color: #ff7a59;
}

.hh-main-row.hh-disposable-row td {
  background: rgba(79, 209, 197, 0.08);
}

.hh-main-row.hh-vat-row td:first-child strong {
  color: #ff7a59;
}

.hh-main-row.hh-extended-row td {
  background: rgba(79, 209, 197, 0.12);
}

.hh-sub-row td {
  border-top: none !important;
}

.hh-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* 3-panel grid layout for household explorer */
/* Panels: Household & Members | Settings | Income Breakdown */
.hh-four-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: start;
}

/* Household preset row: select + save side by side */
.hh-preset-row { display: flex; gap: 16px; margin-bottom: 16px; }
.hh-preset-select-col, .hh-preset-save-col { flex: 1; min-width: 0; }
@media (max-width: 768px) {
  .hh-preset-row { flex-direction: column; gap: 8px; }
}
.hh-delete-preset-btn {
  width: 30px; height: 36px; padding: 0; border: 1px solid var(--border);
  background: var(--bg); color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer; border-radius: 4px; flex-shrink: 0;
}
.hh-delete-preset-btn:hover { color: var(--danger, #e53e3e); border-color: var(--danger, #e53e3e); }

/* Narrow fields (Age, Disabled, Church) in single-row adult layout */
.hh-sm-narrow {
  min-width: 52px !important;
  flex: 0.5 !important;
}

/* Age input: narrow in adult main row only (not sub-rows like Months unemp.) */
input.hh-adult-age {
  width: 44px !important;
  max-width: 44px !important;
}
.form-group-sm:has(.hh-adult-age) {
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* Compact fields (Gross €/mo) — tighter to leave room for Extra + tags */
.hh-sm-compact {
  min-width: 56px !important;
  flex: 0.55 !important;
}
/* Sex field: very narrow since labels are just F/M */
.hh-sm-sex {
  min-width: 36px !important;
  flex: 0.3 !important;
}
.form-group-sm:has(.hh-adult-sex) {
  flex: 0.3 !important;
  min-width: 36px !important;
}

/* Gross €/mo: slightly tighter than other compact fields */
.form-group-sm:has(.hh-adult-earnings) {
  flex: 0.46 !important;
  min-width: 50px !important;
}

/* Status field — wider to fit "Employed, Private" etc */
.hh-sm-status {
  min-width: 85px !important;
  flex: 0.80 !important;
}

/* Extra options toggle button */
.hh-extra-toggle {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.hh-extra-toggle:hover {
  background: rgba(255,255,255,0.14);
  color: var(--fg);
}
.hh-extra-toggle.expanded {
  background: rgba(79,209,197,0.15);
  border-color: rgba(79,209,197,0.3);
  color: var(--fg);
}
.hh-extra-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 10px;
}
.hh-extra-toggle.expanded .hh-extra-arrow {
  transform: rotate(90deg);
}
.hh-extra-toggle-group {
  min-width: 100px !important;
  flex: 0.8 !important;
}
.hh-extra-toggle-group > label + * {
  /* Button + tags row */
}
.hh-extra-btn-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  height: 26px;
  overflow: visible;
}
.hh-extra-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 3px;
  align-content: center;
  min-height: 24px;
}
.hh-extra-tag {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(79,209,197,0.18);
  color: #4fd1c5;
  white-space: nowrap;
  line-height: 1.3;
}

/* Desktop: extra-options rows — all fields exactly 25% card width */
@media (min-width: 601px) {
  .hh-extra-options-row {
    margin-top: 10px !important;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }
  .hh-extra-options-row > .form-group-sm,
  .hh-extra-options-row2 > .form-group-sm {
    flex: 0 0 calc(25% - 6px) !important;
    min-width: 0 !important;
  }
  /* Unemployment row: Benefit type = 50%, Months + Prior Wage = 25% each */
  .hh-unemployment-row > .form-group-sm {
    flex: 0 0 calc(25% - 6px) !important;
    min-width: 0 !important;
  }
  .hh-unemployment-row > .form-group-sm:first-child {
    flex: 0 0 calc(50% - 4px) !important;
  }
  /* Self-employed row: Capital split full width */
  .hh-se-row > .form-group-sm {
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
}

/* Responsive: 2x2 on medium screens */
@media (max-width: 1200px) {
  .hh-four-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive: 1 column on small screens */
@media (max-width: 768px) {
  .hh-four-panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#hh-charts-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

#hh-charts-container > .card {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

#hh-charts-container > .card .chart-container {
  flex: 1 0 auto;
}

/* Placeholder for empty chart data */
.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}

/* Progress bar for budget constraint calculation */
.progress-bar-container {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar-indeterminate {
  height: 100%;
  width: 30%;
  background: var(--accent);
  border-radius: 2px;
  animation: progress-slide 1.2s ease-in-out infinite;
}

@keyframes progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Checkbox styling for household forms */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}

.checkbox-group input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Preset editing banner */
.preset-editing-banner {
  background: rgba(255,122,89,0.12);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}

.preset-editing-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.preset-editing-info {
  flex: 1;
}

.preset-editing-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Taller preset action buttons */
button.preset-btn {
  padding: 8px 14px;
  font-size: 12px;
  min-width: auto;
}

/* Card preset buttons: equal width, fill card */
@media (min-width: 601px) {
  #preset-edit-actions.preset-editing-actions {
    gap: 8px;
  }
  #preset-edit-actions .preset-btn {
    flex: 1;
  }
}

/* Taller chart canvases for budget constraint / METR (legacy, use .chart-container.chart-tall) */

/* Small button variant for add/remove */
button.small {
  padding: 4px 10px;
  font-size: 12px;
  min-width: auto;
}

/* Headline cards row for overview KPIs */
.headline-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.headline-card {
  flex: 1;
  min-width: 140px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}

.headline-card .hc-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.headline-card .hc-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin-top: 4px;
}

.headline-card .hc-delta {
  font-size: 13px;
  margin-top: 2px;
}

.headline-card .hc-delta.positive { color: var(--accent); }
.headline-card .hc-delta.negative { color: #ff5959; }

/* Analysis section toggle buttons */
.analysis-section {
  margin-bottom: 16px;
}

.analysis-section summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0;
  color: var(--accent);
  list-style: none;
}

.analysis-section summary::before {
  content: "▸ ";
}

.analysis-section[open] summary::before {
  content: "▾ ";
}


/* Export tab — balanced layout for export, history, and audit */
#exports .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: stretch;
}

/* Multiyear tab — data tables (matches compare-table styling) */
.my-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.my-table th,
.my-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.my-table th {
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.my-table th:first-child,
.my-table td:first-child {
  text-align: left;
}
.my-table .my-table-label {
  font-weight: 500;
  white-space: nowrap;
}
.my-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.my-table .my-row-benefit .my-table-label { color: #4fd1c5; }
.my-table .my-row-tax .my-table-label { color: #ff5959; }
.my-table .my-row-fee .my-table-label { color: #ff7a59; }
.my-table .my-row-disposable { background: rgba(79, 209, 197, 0.08); }
.my-table .my-row-disposable .my-table-label { font-weight: 600; }
.my-table .my-row-change td { font-size: 11px; color: rgba(255,255,255,0.4); padding-top: 2px; padding-bottom: 2px; border-bottom: none; }
.my-table .my-row-change .my-table-label { padding-left: 16px; font-weight: 400; }
.my-table .my-section-header td { background: rgba(79, 209, 197, 0.12); color: var(--accent-2); font-size: inherit; padding: 8px 10px; }

/* Multiyear tab — 3-card settings row */
.my-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1200px) {
  .my-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .my-settings-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  nav {
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 10px;
  }
  nav h1 { grid-column: 1 / -1; margin-bottom: 8px; }
  .nav-subtitle { grid-column: 1 / -1; margin-bottom: 4px; }
  .nav-item { text-align: center; }
  .nav-bottom {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .nav-locale { margin-bottom: 0; flex-shrink: 0; }
  .nav-auth { flex: 1; min-width: 0; }
  .nav-auth-buttons { justify-content: flex-end; }
  .auth-form-wrapper.open { max-height: 160px; }
  .auth-form { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .auth-form input { flex: 1; min-width: 100px; }
  .auth-submit { flex: 0 0 auto; padding: 7px 14px; }
  .auth-cancel { flex: 0 0 auto; }
  main { padding: 14px 10px; }
  #header-glow { left: 0; }
  .grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: span 1; }
  .info-grid, .module-grid { grid-template-columns: 1fr; }
  #data .data-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-right .card { position: static; max-height: none; }
  .guide-right .module-grid { grid-template-columns: 1fr; }
  .hh-form-grid { grid-template-columns: 1fr; }
  .hh-top-grid { grid-template-columns: 1fr; }
  .hh-four-panel-grid { grid-template-columns: 1fr; }
  #hh-charts-container { grid-template-columns: 1fr; }
  .headline-cards { flex-direction: column; }
}

/* ── Parameter group section badges & tooltips ──────────────────────── */
.param-group-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.param-group-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.param-year-badge {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-4);
  background: rgba(124, 157, 245, 0.10);
  border: 1px solid rgba(124, 157, 245, 0.18);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  line-height: 1.4;
}

.param-info-icon {
  position: relative;
  top: -1px;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: rgba(136, 153, 166, 0.35);  /* --muted at 35% opacity via color, not element opacity */
  font-size: 0;
  cursor: help;
  flex-shrink: 0;
  transition: color 0.15s;
}

.param-info-icon::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  mask-size: contain;
}

.param-info-icon:hover {
  color: rgba(79, 209, 197, 0.7);  /* --accent-2 at 70% */
}

.param-info-tooltip {
  position: fixed;
  width: 280px;
  padding: 10px 12px;
  background: #1e2d3d;
  border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4);
  color: #e0e8f0;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease 0s;
  z-index: 10000;
  isolation: isolate;
}

/* Invisible bridge so the cursor can travel from the ? icon to the tooltip without
   leaving the :hover zone.  Covers the 8px gap above the tooltip. */
.param-info-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 12px;            /* slightly larger than the 8px gap */
}

/* Decorative arrow pointing up from the tooltip */
.param-info-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: #1e2d3d;
}

.param-info-tooltip.tooltip-active {
  opacity: 1;
  pointer-events: auto;
}

/* Flip arrow when tooltip opens above the icon */
.param-info-tooltip.tooltip-above::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: #1e2d3d;
}
.param-info-tooltip.tooltip-above::before {
  bottom: auto;
  top: 100%;
}

/* ── Contextual help tooltip variants ──────────────────────────────── */

/* h3 title icons — same size, slight spacing */
h3 .param-info-icon {
  margin-left: 4px;
}

/* Wider tooltip for card-level help (vs 280px default for field labels) */
.param-info-tooltip.tooltip-wide {
  width: 360px;
}

/* Click-to-pin: persistent tooltip visibility */
.param-info-tooltip.tooltip-pinned {
  opacity: 1;
  pointer-events: auto;
}

/* Left-aligned variant: arrow shifts left instead of centered */
.param-info-tooltip.tooltip-left::after {
  left: 7px;
  margin-left: 0;
}

/* Proper inline alignment when ? icon is inside a <label> */
label .param-info-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}

/* Ensure cards with tooltips don't clip them */
.card[data-has-tooltip] {
  overflow: visible;
}

/* Compact variant for Household tab dense layout */
.form-group-sm .param-info-icon {
  width: 11px;
  height: 11px;
  margin-left: 2px;
}
.form-group-sm .param-info-icon::before {
  width: 10px;
  height: 10px;
}

/* ── Legal hover-over links (NOTICE / LICENSE in Guide) ── */
.legal-hover-link {
  position: relative;
  color: var(--accent-2);
  cursor: help;
  border-bottom: 1px dotted rgba(79, 209, 197, 0.4);
}
.legal-hover-content {
  position: fixed;
  width: 420px;
  max-height: none;
  overflow-y: visible;
  padding: 14px 16px;
  background: #1e2d3d;
  border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4);
  color: #e0e8f0;
  font-size: 12.5px;
  font-weight: 400;
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.55;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 10000;
  isolation: isolate;
}
.legal-hover-link:hover .legal-hover-content,
.legal-hover-link:focus .legal-hover-content {
  opacity: 1;
  pointer-events: auto;
}

/* ── Export-to-PNG button ──────────────────────────────── */
.card-export-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.card-export-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.card:hover .card-export-btn { opacity: 0.6; }
.card-export-btn:hover {
  opacity: 1;
  background: rgba(79,209,197,0.10);
  border-color: rgba(79,209,197,0.25);
  color: var(--accent-2);
}
.card:has(canvas) .card-export-btn,
.card:has(table) .card-export-btn { display: flex; }
#guide .card-export-btn, #overview .card-export-btn,
#parameters .card-export-btn, #data .card-export-btn,
#exports .card-export-btn { display: none !important; }
.card-export-btn.card-export-btn-detailed { right: 40px; }
.card-export-btn.exporting {
  opacity: 1; color: var(--accent-2);
  animation: exportPulse 1s ease-in-out infinite;
}
@keyframes exportPulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ========== ACCESS GATE ========== */

#access-gate {
  position: fixed;
  top: 0; left: 180px; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  transition: opacity 0.6s ease;
}
#access-gate.gate-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Gradient fade: top ~18vh shows content peeking through */
.gate-fade {
  flex: 0 0 40vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(15,20,24,0.05) 20%,
    rgba(15,20,24,0.2) 40%,
    rgba(15,20,24,0.5) 60%,
    rgba(15,20,24,0.85) 80%,
    #0f1418 100%
  );
  pointer-events: none;
}

/* Solid dark body */
.gate-body {
  flex: 1;
  background: #0f1418;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Floating particles */
.gate-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.gate-particles span {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  opacity: 0;
  animation: gateFloat linear infinite;
}
.gate-particles span:nth-child(1)  { left:  8%; width: 6px; height: 6px; background: #4fd1c5; animation-duration: 12s; animation-delay: 0s; }
.gate-particles span:nth-child(2)  { left: 18%; width: 4px; height: 4px; background: #7c9df5; animation-duration: 14s; animation-delay: 1s; }
.gate-particles span:nth-child(3)  { left: 30%; width: 5px; height: 5px; background: #ff7a59; animation-duration: 11s; animation-delay: 3s; }
.gate-particles span:nth-child(4)  { left: 42%; width: 7px; height: 7px; background: #f1c40f; animation-duration: 15s; animation-delay: 0.5s; }
.gate-particles span:nth-child(5)  { left: 55%; width: 4px; height: 4px; background: #4fd1c5; animation-duration: 13s; animation-delay: 2s; }
.gate-particles span:nth-child(6)  { left: 65%; width: 6px; height: 6px; background: #7c9df5; animation-duration: 10s; animation-delay: 4s; }
.gate-particles span:nth-child(7)  { left: 75%; width: 5px; height: 5px; background: #8899a6; animation-duration: 16s; animation-delay: 1.5s; }
.gate-particles span:nth-child(8)  { left: 85%; width: 4px; height: 4px; background: #ff7a59; animation-duration: 12s; animation-delay: 3.5s; }
.gate-particles span:nth-child(9)  { left: 12%; width: 3px; height: 3px; background: #f1c40f; animation-duration: 14s; animation-delay: 5s; }
.gate-particles span:nth-child(10) { left: 50%; width: 5px; height: 5px; background: #4fd1c5; animation-duration: 11s; animation-delay: 2.5s; }
.gate-particles span:nth-child(11) { left: 70%; width: 4px; height: 4px; background: #7c9df5; animation-duration: 13s; animation-delay: 6s; }
.gate-particles span:nth-child(12) { left: 92%; width: 6px; height: 6px; background: #8899a6; animation-duration: 15s; animation-delay: 0.8s; }

@keyframes gateFloat {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-240px); opacity: 0; }
}
@keyframes gateFloatMobile {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.45; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-160px); opacity: 0; }
}

/* Logo */
.gate-logo {
  position: relative;
  z-index: 1;
  animation: gateFadeIn 0.6s ease both;
  animation-delay: 0.2s;
  filter: drop-shadow(0 0 18px rgba(79,209,197,0.25)) drop-shadow(0 0 40px rgba(124,157,245,0.15));
}

/* Subtitle */
.gate-subtitle {
  position: relative;
  z-index: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-2, #4fd1c5);
  font-size: 13px;
  font-weight: 600;
  margin-top: 1.2rem;
  animation: gateFadeIn 0.6s ease both;
  animation-delay: 0.4s;
}

/* Descriptive text */
.gate-text {
  position: relative;
  z-index: 1;
  color: var(--muted, #8899a6);
  font-size: 14px;
  max-width: 380px;
  text-align: center;
  line-height: 1.6;
  margin-top: 0.8rem;
  animation: gateFadeIn 0.6s ease both;
  animation-delay: 0.5s;
}

/* Form */
#gate-form {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 1.5rem;
  animation: gateFadeIn 0.6s ease both;
  animation-delay: 0.6s;
}
.gate-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0 4px 0 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.gate-input-wrap:focus-within {
  border-color: rgba(79,209,197,0.4);
  box-shadow: 0 0 12px rgba(79,209,197,0.15);
}
.gate-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text, #e8ecf1);
  font-size: 14px;
  padding: 10px 0;
  width: 220px;
  font-family: inherit;
}
.gate-input::placeholder {
  color: rgba(136,153,166,0.5);
}
.gate-submit {
  background: transparent;
  border: none;
  color: var(--muted, #8899a6);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-submit:hover {
  background: rgba(79,209,197,0.15);
  color: var(--accent-2, #4fd1c5);
}

/* ---- Success unlock effect ---- */

/* Precision shimmer — sharp outer edge, hollow center, breathing scale */
#access-gate.gate-success .gate-input-wrap {
  animation: gateShimmer 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
@keyframes gateShimmer {
  0%   {
    box-shadow: 0 0 0 rgba(79,209,197,0), inset 0 0 0 rgba(79,209,197,0);
    transform: scale(1);
    border-color: rgba(79,209,197,0.4);
  }
  15%  {
    box-shadow:
      0 0 2px rgba(79,209,197,0.9),
      0 0 15px rgba(79,209,197,0.4),
      0 0 60px rgba(79,209,197,0.15),
      inset 0 0 20px rgba(79,209,197,0.06);
    transform: scale(1.02);
    border-color: rgba(140,230,220,1);
  }
  40%  {
    box-shadow:
      0 0 3px rgba(200,240,235,1),
      0 0 12px rgba(79,209,197,0.7),
      0 0 45px rgba(79,209,197,0.3),
      0 0 90px rgba(79,209,197,0.1),
      inset 0 0 30px rgba(79,209,197,0.04);
    transform: scale(1.05);
    border-color: rgba(200,240,235,1);
  }
  65%  {
    box-shadow:
      0 0 2px rgba(220,250,245,0.9),
      0 0 10px rgba(79,209,197,0.5),
      0 0 35px rgba(79,209,197,0.15),
      inset 0 0 25px rgba(79,209,197,0.02);
    transform: scale(1.04);
    border-color: rgba(180,235,228,0.8);
  }
  100% {
    box-shadow:
      0 0 1px rgba(200,240,235,0.6),
      0 0 8px rgba(79,209,197,0.2),
      0 0 25px rgba(79,209,197,0.06);
    transform: scale(1.03);
    border-color: rgba(79,209,197,0.5);
  }
}

/* Allow glow to overflow during unlock (gate-body clips particles with overflow:hidden) */
#access-gate.gate-success .gate-body {
  overflow: visible;
}

/* Logo + subtitle: kerning expansion + luminous cyan shift */
#access-gate.gate-success .gate-logo {
  animation: gateLogoOpen 2.2s ease-out 0.35s both;
}
#access-gate.gate-success .gate-subtitle {
  animation: gateSubtitleOpen 2.2s ease-out 0.45s both;
}
@keyframes gateLogoOpen {
  0%   {
    transform: scale(1);
    filter: drop-shadow(0 0 18px rgba(79,209,197,0.25)) drop-shadow(0 0 40px rgba(124,157,245,0.15));
    opacity: 1;
  }
  50%  {
    transform: scale(1.04);
    filter: drop-shadow(0 0 24px rgba(79,209,197,0.4)) drop-shadow(0 0 50px rgba(124,157,245,0.25));
    opacity: 1;
  }
  100% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 8px rgba(79,209,197,0.1));
    opacity: 0;
  }
}
@keyframes gateSubtitleOpen {
  0%   {
    letter-spacing: 3px;
    transform: scale(1);
    color: #4fd1c5;
    text-shadow: none;
    opacity: 1;
  }
  50%  {
    letter-spacing: 5px;
    transform: scale(1.04);
    color: rgba(180,240,235,0.95);
    text-shadow: 0 0 12px rgba(79,209,197,0.25);
    opacity: 1;
  }
  100% {
    letter-spacing: 8px;
    transform: scale(1.06);
    color: rgba(200,245,240,0.7);
    text-shadow: 0 0 8px rgba(79,209,197,0.15);
    opacity: 0;
  }
}

/* Input text fades gently after the shimmer starts */
#access-gate.gate-success .gate-input-wrap input {
  animation: gateInputTextFade 1.2s ease-out 0.6s forwards;
}
@keyframes gateInputTextFade {
  0%   { opacity: 1; color: inherit; }
  100% { opacity: 0; color: rgba(79,209,197,0.5); }
}

/* Other content fades in sync */
#access-gate.gate-success .gate-text,
#access-gate.gate-success .gate-contact,
#access-gate.gate-success #gate-error {
  animation: gateContentFade 1.4s ease-out 0.5s forwards;
}
#access-gate.gate-success #gate-form {
  animation: gateContentFade 1.4s ease-out 0.8s forwards;
}
@keyframes gateContentFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Frosted glass dissolve — variable-rate backdrop blur */
#access-gate.gate-success {
  animation: gateFrost 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1.45s;
}
@keyframes gateFrost {
  0%   { opacity: 1; filter: blur(0); backdrop-filter: blur(0); }
  30%  { opacity: 0.7; filter: blur(2px); backdrop-filter: blur(4px); }
  60%  { opacity: 0.3; filter: blur(3px); backdrop-filter: blur(8px); }
  100% { opacity: 0; filter: blur(5px); backdrop-filter: blur(12px); }
}

/* Error */
#gate-error {
  position: relative;
  z-index: 1;
  color: #e74c3c;
  font-size: 12px;
  min-height: 18px;
  margin-top: 6px;
  text-align: center;
}

/* Shake animation for wrong password */
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}
.gate-shake {
  animation: gateShake 0.4s ease;
}

/* Contact */
.gate-contact {
  position: relative;
  z-index: 1;
  color: rgba(136,153,166,0.5);
  font-size: 12px;
  margin-top: 1.5rem;
  animation: gateFadeIn 0.6s ease both;
  animation-delay: 0.8s;
}
.gate-contact a {
  color: rgba(136,153,166,0.7);
  text-decoration: none;
}
.gate-contact a:hover {
  color: var(--accent-2, #4fd1c5);
}

/* Staggered entrance */
@keyframes gateFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Auth sidebar notice */
.gate-auth-notice {
  font-size: 10px;
  color: var(--muted, #8899a6);
  border: 1px solid rgba(255,122,89,0.25);
  background: rgba(255,122,89,0.04);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 8px;
  line-height: 1.5;
}
.gate-auth-notice a {
  color: var(--accent, #7c9df5);
  text-decoration: none;
}

/* Mobile: gate covers full width */
@media (max-width: 900px) {
  #access-gate { left: 0; }
}

/* Mobile auth modal — shown over gate on small screens */
#mobile-auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(
    to bottom,
    #111d2b 0%,
    #0f1820 35%,
    #0f1418 100%
  );
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#mobile-auth-modal.open {
  display: flex;
}
.mobile-auth-logo {
  margin-bottom: 28px;
  margin-top: -80px;
  opacity: 0.95;
}
.mobile-auth-card {
  width: 100%;
  max-width: 340px;
  background: rgba(26,32,40,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mobile-auth-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text, #e8ecf1);
  text-align: center;
  margin-bottom: 18px;
}
.mobile-auth-card input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text, #e8ecf1);
  font-family: inherit;
  box-sizing: border-box;
}
.mobile-auth-card input:focus {
  outline: none;
  border-color: rgba(79,209,197,0.4);
  box-shadow: 0 0 8px rgba(79,209,197,0.15);
}
.mobile-auth-card input::placeholder {
  color: rgba(136,153,166,0.5);
}
.mobile-auth-submit {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: var(--accent-2, #4fd1c5);
  color: #0f1418;
  cursor: pointer;
  font-family: inherit;
}
.mobile-auth-submit:active {
  opacity: 0.85;
}
.mobile-auth-cancel {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: var(--muted, #8899a6);
  cursor: pointer;
  font-family: inherit;
}
.mobile-auth-error {
  color: #e74c3c;
  font-size: 12px;
  text-align: center;
  min-height: 16px;
  margin-top: 8px;
}
.mobile-auth-forgot {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent, #7c9df5);
  text-decoration: none;
  cursor: pointer;
}

/* ========== END ACCESS GATE ========== */


/* ================================================================
   MOBILE RESPONSIVE — max-width: 600px
   All rules scoped inside this block. Zero desktop impact.
   ================================================================ */
/* Back-to-top button — visible on desktop and mobile */
.back-to-top {
  text-align: center;
  padding: 14px 0;
  margin: 24px 0 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
  grid-column: 1 / -1;
}
.back-to-top:hover {
  color: var(--accent-2);
}

/* Mobile/desktop label toggle utilities */
.show-mobile { display: none !important; }

@media (max-width: 600px) {

  .show-mobile { display: inline !important; }
  .hide-mobile { display: none !important; }

  /* Hide elements marked mob-hide-inline on mobile */
  .mob-hide-inline { display: none !important; }

  /* --- Foundation --- */

  :root {
    --scale: 1;
    --inv-scale: 1;
    --full-vh: 100dvh;
  }

  html, body {
    overflow-x: hidden;
    height: 100vh; /* fallback for browsers without dvh support */
    height: 100dvh;
    background: #0e1317;
  }

  /* Prevent iOS Safari auto-zoom on focus (triggers at font-size < 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  .app {
    transform: none;
    width: 100vw;
    height: 100vh; /* fallback */
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overscroll-behavior: none;
  }

  #header-glow { display: none; }

  /* Hide entire nav — hamburger replaces it */
  nav {
    display: none !important;
  }

  /* Hamburger button — top-left, minimal professional style */
  #mobile-nav-btn {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 10001;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  #mobile-nav-btn:active {
    opacity: 0.5;
  }

  /* Active tab label next to hamburger */
  #mobile-nav-label {
    position: fixed;
    top: 10px;
    left: 52px;
    z-index: 10001;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    pointer-events: none;
    line-height: 32px;
  }

  /* Nav overlay backdrop */
  #mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0,0,0,0.65);
    visibility: hidden;
    opacity: 0;
    transition: visibility 250ms ease-out, opacity 250ms ease-out;
  }
  #mobile-nav-overlay.open {
    visibility: visible;
    opacity: 1;
  }

  /* Slide-in drawer */
  #mobile-nav-drawer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55%;
    background: #0a0d10;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    padding: 60px 16px 40px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 250ms ease-out;
    touch-action: pan-y;
  }
  #mobile-nav-overlay.open #mobile-nav-drawer {
    transform: translateX(0);
  }
  #mobile-nav-drawer.dragging {
    transition: none !important;
    will-change: transform;
  }
  #mobile-nav-overlay.dragging-overlay {
    transition: none !important;
  }

  .mob-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--text);
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
  }
  .mob-nav-item:active {
    background: rgba(255,255,255,0.05);
  }
  .mob-nav-item.active {
    background: rgba(255,122,89,0.15);
    color: var(--accent);
  }
  .mob-nav-item.nav-busy > .mob-nav-icon {
    color: var(--accent);
    animation: navIconBusy 1.8s ease-in-out infinite;
  }
  .mob-nav-item.nav-done > .mob-nav-icon {
    color: var(--accent-2);
    transition: color 0.4s ease;
  }
  .mob-nav-item.nav-done.nav-done-fade > .mob-nav-icon {
    color: inherit;
    transition: color 1s ease;
  }
  .mob-nav-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    top: -1px;
  }
  .mob-nav-icon .nav-svg { width: 18px; height: 18px; vertical-align: -3px; position: static; top: auto; }

  /* Per-icon vertical tweaks in mobile nav */
  [data-section="overview"] > .mob-nav-icon { top: 0; }
  [data-section="analysis"] > .mob-nav-icon { top: -2px; }
  [data-section="multiyear"] > .mob-nav-icon { top: -2px; }
  [data-section="data"] > .mob-nav-icon { top: 0.5px; }
  [data-section="exports"] > .mob-nav-icon { top: 0.5px; }

  main {
    padding-top: 58px;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Gate must be above buttons while shown (removed from DOM after unlock) */
  #access-gate {
    z-index: 10002;
    background: #0e1317;
  }

  /* Touch targets & iOS zoom prevention */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  button.primary, button.secondary,
  .auth-submit, .auth-cancel, .auth-btn {
    min-height: 44px;
    font-size: 14px;
  }

  .form-group-sm input,
  .form-group-sm select {
    font-size: 16px !important;
    min-height: 36px;
  }

  /* Mobile settings button — minimal professional style */
  #mobile-settings-btn {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 10001;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  #mobile-settings-btn:active {
    opacity: 0.5;
  }

  #mobile-settings-panel {
    position: fixed;
    top: 56px;
    right: 8px;
    z-index: 10001;
    background: linear-gradient(to bottom, #131820, #161c24);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px;
    min-width: 210px;
    max-width: calc(100vw - 24px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: visibility 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
  }
  #mobile-settings-panel .auth-btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
  }

  #mobile-settings-panel.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  #mobile-settings-panel .nav-locale {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
  }

  #mobile-settings-panel .locale-btn {
    flex: 1;
    min-height: 36px;
  }

  /* --- Phase 2: Access gate + general layout --- */

  #access-gate {
    left: 0;
  }

  .gate-logo {
    filter: none;
  }

  /* Decorative gradient — opaque so no cards peek through */
  .gate-fade {
    flex: 0 0 18vh;
    background: linear-gradient(to bottom, #111820 0%, #0e1317 100%);
  }

  /* Floating particles — smaller travel for mobile viewport */
  .gate-particles {
    display: block;
  }
  .gate-particles span {
    animation-name: gateFloatMobile;
  }

  /* Center gate content vertically, shifted up from center */
  .gate-body {
    justify-content: center;
    padding-top: 0;
    background: #0e1317;
  }

  /* Auth modal must be above gate (gate is 10002) */
  #mobile-auth-modal {
    z-index: 10004 !important;
  }

  #gate-form {
    flex-direction: column;
    width: 90%;
    align-items: center;
  }

  .gate-input-wrap {
    width: 100%;
  }

  .gate-input {
    width: 100%;
    font-size: 16px;
  }

  /* Hide gate contact dots/text to keep lock screen clean */
  .gate-contact {
    font-size: 11px;
    max-width: 90%;
    text-align: center;
  }

  /* Empty error container should not take space */
  #gate-error:empty {
    display: none;
  }

  /* Header — hidden on mobile, wastes screen space */
  header {
    display: none;
  }

  /* Cards */
  .card {
    padding: 14px;
    border-radius: 8px;
    background: linear-gradient(to bottom, #131820, #161c24);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  /* --- Accordion cards --- */
  .mob-accordion-header {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  /* Title text takes available space */
  .mob-accordion-header > span[data-i18n],
  .mob-accordion-header > span:first-child {
    flex: 1 1 auto;
  }
  /* Tooltip icon stays inline right after title */
  .mob-accordion-header .param-info-icon {
    flex: 0 0 auto;
  }

  .mob-chevron {
    font-size: 10px;
    opacity: 0.5;
    flex-shrink: 0;
  }

  .mob-accordion-body {
    transition: max-height 0.3s ease, opacity 0.25s ease;
    overflow: visible;
  }

  .mob-collapsed .mob-accordion-body {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }

  .mob-collapsed.card {
    padding: 10px 14px;
  }
  .mob-collapsed .mob-accordion-header::after {
    content: "▾";
    font-size: 10px;
    opacity: 0.35;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Accordion collapse footer */
  .mob-accordion-footer {
    display: flex;
    justify-content: center;
    padding: 8px 0 2px;
    cursor: pointer;
    opacity: 0.4;
    margin-top: 12px;
  }
  .mob-accordion-footer:active {
    opacity: 0.7;
  }
  .mob-collapsed .mob-accordion-footer {
    display: none;
  }

  /* All grids → single column */
  .grid,
  .info-grid,
  .module-grid,
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .card.wide {
    grid-column: span 1;
  }

  /* Full-size form rows: stack vertically */
  .form-row {
    flex-direction: column;
    gap: 10px;
  }
  .form-group {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Year + Timing rows: keep side-by-side on mobile, reduce double margin */
  .run-year-timing-row {
    flex-direction: row !important;
    gap: 8px;
    margin-bottom: 14px;
  }
  .param-year-timing-row {
    flex-direction: row !important;
    gap: 8px;
    margin-bottom: 0;
    margin-top: 0;
  }
  .run-year-timing-row > .form-group,
  .param-year-timing-row > .form-group {
    margin-bottom: 0 !important;
  }
  .run-year-timing-row > .run-year-col,
  .param-year-timing-row > .param-year-col {
    flex: 1 !important;
    width: auto !important;
  }
  .run-year-timing-row > .run-timing-col,
  .param-year-timing-row > .param-timing-col {
    flex: 3 !important;
    width: auto !important;
    min-width: 0;
  }

  /* OSINKO + Simulation Mode side-by-side on mobile */
  .run-osinko-mode-row {
    display: flex;
    flex-direction: row !important;
    gap: 8px;
    margin-bottom: 14px;
  }
  .run-osinko-mode-row > .form-group {
    margin-bottom: 0 !important;
  }
  .run-osinko-mode-row > .run-osinko-col {
    flex: 1 !important;
    width: auto !important;
    min-width: 0;
  }
  .run-osinko-mode-row > .run-mode-col {
    flex: 3 !important;
    width: auto !important;
    min-width: 0;
  }

  /* Dataset + Sample Size side-by-side on mobile */
  .run-dataset-sample-row {
    display: flex;
    flex-direction: row !important;
    gap: 8px;
    margin-bottom: 14px;
  }
  .run-dataset-sample-row > .form-group {
    margin-bottom: 0 !important;
  }
  .run-dataset-sample-row > .run-dataset-col {
    flex: 1 !important;
    width: auto !important;
    min-width: 0;
  }
  .run-dataset-sample-row > .run-sample-col {
    flex: 3 !important;
    width: auto !important;
    min-width: 0;
  }

  /* Compact form rows: keep side-by-side (designed for small screens) */
  .form-row-compact {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .form-group-sm {
    flex: 1 1 0 !important;
    min-width: 70px !important;
  }

  /* Button rows: keep side-by-side for short buttons */
  .button-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .button-row > button {
    flex: 1 1 0;
    min-width: 0;
  }

  .guide-right .card {
    position: static;
    max-height: none;
  }

  /* Regional map stacks below table on mobile */
  .explorer-regional-content {
    flex-direction: column;
  }
  .explorer-regional-map {
    flex: 0 0 auto;
    max-width: 220px;
    margin: 0 auto;
  }

  /* Tables → horizontal scroll with fade hint */
  .table,
  .compare-table,
  .my-table,
  .fiscal-module-table,
  .decile-summary-compare,
  .compact-indicators,
  .compact-poverty,
  .guide-table,
  .hh-trajectory-table,
  .explorer-table,
  .explorer-transition-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, black 92%, transparent 100%);
  }
  /* Parameter table has its own layout — restore table display + remove horizontal mask */
  #param-table .table {
    display: table;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .table.scroll-end,
  .compare-table.scroll-end,
  .my-table.scroll-end,
  .fiscal-module-table.scroll-end,
  .decile-summary-compare.scroll-end,
  .compact-indicators.scroll-end,
  .compact-poverty.scroll-end,
  .guide-table.scroll-end,
  .hh-trajectory-table.scroll-end,
  .explorer-table.scroll-end,
  .explorer-transition-table.scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .table td, .table th,
  .compare-table td, .compare-table th,
  .my-table td, .my-table th {
    font-size: 12px;
    padding: 8px 10px;
  }

  /* Charts → fixed heights on mobile */
  .chart-container {
    height: 240px;
    min-height: 240px;
  }

  .chart-container.chart-tall {
    height: 340px;
    min-height: 340px;
  }
  #multiyear .chart-container.chart-tall {
    height: 380px;
    min-height: 380px;
  }
  #household .chart-container.chart-tall {
    height: 380px;
    min-height: 380px;
  }

  .chart-container.chart-xl,
  #analysis .card .chart-container.chart-xl {
    height: 320px;
    min-height: 320px;
  }

  /* Lorenz curves: near-square on mobile (~360px wide) */
  .chart-container.chart-xl:has(#lorenz-chart),
  .chart-container.chart-xl:has(#compare-lorenz-chart) {
    height: 340px;
    min-height: 340px;
  }

  /* PTR by Predicted Wage Quintile: taller on mobile for readability */
  .chart-container.chart-xl:has(#ptr-decile-group-chart),
  .chart-container.chart-xl:has(#compare-ptr-decile-group-chart) {
    height: 420px;
    min-height: 420px;
  }

  .chart-container.chart-ventile,
  #analysis .chart-container.chart-ventile {
    height: 600px;
    min-height: 600px;
  }

  /* Compare Runs: baseline+reform paired bars need extra height */
  .chart-container:has(#compare-taxes-by-ventile-chart),
  .chart-container:has(#compare-hist-chart) {
    height: 840px !important;
    min-height: 840px !important;
  }

  /* Benefits by Ventile: extra tall (both Single Run and Compare Runs) */
  .chart-container:has(#benefits-by-decile-chart),
  .chart-container:has(#compare-benefits-by-ventile-chart) {
    height: 900px !important;
    min-height: 900px !important;
  }

  /* Single Run: horizontal histogram needs extra height */
  .chart-container:has(#hist-chart) {
    height: 680px !important;
    min-height: 680px !important;
  }

  /* Age Distribution: shorter on mobile */
  .chart-container:has(#age-dist-chart) {
    height: 280px !important;
    min-height: 280px !important;
  }

  /* Chart legends: switch from fixed-column grid to flex-wrap on mobile */
  [id$="-legend"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    font-size: 10px !important;
  }
  [id$="-legend"] > div {
    line-height: 1.1 !important;
    gap: 3px !important;
  }

  /* Tax & Benefit Decomposition: taller for many legend items */
  #household .chart-container.chart-decomp {
    height: 460px;
    min-height: 460px;
  }

  #hh-charts-container {
    grid-template-columns: 1fr;
  }

  /* --- Phase 3: Tab-specific layouts --- */

  /* Simulation tab */
  #overview .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    max-height: none;
  }

  #overview .card {
    min-height: auto;
    contain: none !important;
    overflow: visible !important;
  }

  #overview .card:first-child {
    contain: none !important;
    overflow: visible !important;
  }

  .results-list, .list, .tall-list {
    max-height: none;
  }
  #overview .card .sim-list {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #latest-summary {
    padding-bottom: 16px;
  }

  /* Parameters tab */
  #parameters .grid {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }

  #param-table {
    overflow-x: auto;
  }

  /* Analysis tab */
  #analysis .grid {
    grid-template-columns: 1fr;
  }

  .analysis-section-header {
    grid-column: span 1;
  }

  /* Force analysis mode card to not be sticky */
  #analysis-mode-card {
    position: static !important;
    z-index: auto !important;
  }

  /* Force analysis panel inner flex to column */
  #analysis-single > div,
  #analysis-compare > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Income options: stack vertically */
  .income-options {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-left: 0 !important;
    flex: 1 1 100% !important;
  }

  /* Analysis tabs: full width */
  .analysis-tabs {
    flex: 1 1 100% !important;
    width: 100% !important;
    flex-wrap: wrap;
  }

  .analysis-tabs .analysis-tab {
    flex: 1;
  }

  /* Household tab — extra options: 2 per row */
  .hh-extra-options-row,
  .hh-extra-options-row2 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  .hh-extra-options-row > .form-group-sm,
  .hh-extra-options-row > .hh-sm-narrow,
  .hh-extra-options-row > .form-group-sm:has(.hh-adult-spouse),
  .hh-extra-options-row > .hh-widow-pension-group,
  .hh-extra-options-row2 > .form-group-sm {
    width: auto !important;
    flex: 1 1 42% !important;
    min-width: 100px !important;
  }

  #hh-household-preset {
    width: 100%;
  }

  /* Multiyear tab */
  .my-settings-grid {
    grid-template-columns: 1fr;
  }

  /* Data tab */
  .stats-tabs {
    flex-wrap: wrap;
  }

  /* Export tab */
  #exports .grid {
    grid-template-columns: 1fr;
  }

  /* --- Phase 4: Touch interactions + polish --- */

  .param-info-icon {
    width: 22px;
    height: 22px;
    padding: 3px;
    font-size: 0;
  }
  .param-info-icon::before {
    width: 16px;
    height: 16px;
  }
  .form-group-sm .param-info-icon {
    width: 14px;
    height: 14px;
    padding: 1px;
    font-size: 0;
  }
  .form-group-sm .param-info-icon::before {
    width: 12px;
    height: 12px;
  }

  .cloud-icon { font-size: 13px !important; }

  /* Hover state cleanup — always visible on touch */
  .sim-entry .sim-cloud-actions {
    opacity: 0.7;
    gap: 10px;
  }
  .sim-cloud-play { opacity: 1; }
  .sim-cloud-play::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }

  .hh-member-btn {
    flex: 1;
  }

  .card-export-btn {
    width: 32px;
    height: 32px;
    opacity: 0.5;
  }
  .card-export-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Cloud icon in preset list */
  span[title="Saved to cloud"] {
    font-size: 16px !important;
    line-height: 0 !important;
    vertical-align: -0.1em !important;
  }

  /* Misc stacking */
  .preset-editing-content {
    flex-direction: column;
  }

  .headline-card {
    min-width: 0;
  }

  .stat-card .stat-value {
    font-size: 16px;
  }

  .config-row {
    grid-template-columns: 100px 1fr;
  }

  /* Auth form on mobile — stack vertically */
  .auth-form {
    flex-direction: column;
  }

  .auth-form input {
    min-width: 0;
  }

  .auth-form-wrapper.open {
    max-height: 280px;
  }

  /* --- Phase 6: Progressive disclosure --- */

  /* Hide card notes when collapsed */
  .mob-collapsed .card-note {
    display: none;
  }

  /* Stack analysis income option checkboxes */
  .analysis-income-options {
    flex-direction: column;
    gap: 6px;
  }

  /* Guide info boxes: compact on mobile */
  .guide-infobox,
  .guide-infobox--accent {
    padding: 8px 10px;
    margin: 8px 0 20px;
    font-size: 11px;
  }

  /* Status pill — right-justified, left of settings icon, vertically aligned with hamburger */
  #status-pill {
    position: fixed;
    top: 12px;
    right: 48px;
    left: auto;
    transform: none;
    z-index: 10001;
    font-size: 10px;
    padding: 0 10px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #131820, #161c24);
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-width: min(40vw, calc(100vw - 200px));
    text-align: right;
    line-height: 28px;
    height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Stats grid single column on Data tab */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* --- Phase 7: Safe area + polish --- */

  /* (tooltip rules consolidated above) */

  /* Guide grid → flex column on mobile (sticky needs flex, not grid rows) */
  .guide-grid {
    display: flex;
    flex-direction: column;
  }

  /* Disable hover effects on touch devices */
  @media (hover: none) {
    .nav-item:hover,
    .sim-entry:hover,
    .sim-entry.cloud:hover {
      background: inherit;
      box-shadow: none;
    }
    .card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
  }

  /* Smooth transitions for accordion */
  .card {
    transition: padding 0.25s ease;
  }

  /* --- Header backdrop: fade scrolled content behind top bar --- */
  .app::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, #0e1317 55%, rgba(14,19,23,0.6) 80%, transparent 100%);
    z-index: 10000;
    pointer-events: none;
  }

  /* --- Lock screen: settings above gate (gate z-index: 10002) --- */
  #mobile-settings-btn {
    z-index: 10003 !important;
  }
  #mobile-settings-panel {
    z-index: 10003 !important;
  }

  /* --- Quick Start sub-boxes → stack vertically --- */
  .qs-boxes {
    flex-direction: column !important;
  }

  /* --- Parameter Import from: selects side-by-side, button full width --- */
  .param-import-row {
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    width: 100%;
  }
  .param-import-row > span {
    width: 100%;
  }
  .param-import-row > select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .param-import-row > #import-params {
    width: 100%;
  }

  /* --- Guide tab: h2 titles as accordion headers --- */
  .guide-title.mob-accordion-header {
    font-size: 15px;
  }

  /* Guide titles: force teal on mobile (avoid orange flash) */
  .guide-title { color: var(--accent-2) !important; }

  /* Guide tables: enable hyphenation for long words in cells */
  .guide-table th,
  .guide-table td {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Reference card: hide "About This Tool" h3 when collapsed */
  .guide-right .mob-collapsed .guide-section > h3 {
    display: none;
  }

  /* Reference card: no sticky, just normal card; restore breathing room */
  .guide-right > .card {
    position: static;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Guide details cards: summary removed by JS, details always open */
  details.guide-details {
    display: block !important;
  }
  details.guide-details summary {
    display: none !important;
  }
  details.guide-details summary h3 {
    font-size: 14px;
    line-height: 1.4;
    flex: 1;
  }

  /* Guide cards: tighter padding */
  #guide .card {
    padding: 10px 14px;
  }
  #guide .guide-section {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* --- Bottom breathing room for every tab --- */
  .section.active {
    padding-bottom: 24px;
  }

  /* --- Cards must not exceed screen width --- */
  .card,
  .section,
  .grid {
    max-width: 100%;
    box-sizing: border-box;
  }
  .card {
    overflow-x: hidden;
    word-break: break-word;
  }
  main {
    overflow-x: hidden;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    max-width: 100vw;
  }
  .mob-accordion-body {
    max-width: 100%;
    overflow-x: auto;
  }
  .grid {
    width: 100%;
    overflow-x: hidden;
  }

  /* --- Tables: smaller, wrapping text, fit screen --- */
  .guide-table td, .guide-table th {
    font-size: 11px;
    padding: 5px 6px;
    white-space: normal;
    word-break: break-word;
  }
  .table td, .table th,
  .compare-table td, .compare-table th,
  .my-table td, .my-table th,
  .fiscal-module-table td, .fiscal-module-table th {
    font-size: 11px;
    padding: 6px 6px;
  }

  /* --- Guide mobile order: Quick Start first (natural), Reference last --- */
  .guide-right {
    order: 99;
    margin-bottom: 16px;
  }
  /* Hide duplicate "Quick Start" subtitle (h2 already shows it as accordion title) */
  h3[data-i18n="guide.quickstart.title"] {
    display: none;
  }

  /* --- Tooltips: always hidden on mobile (banner shows text instead) --- */
  .param-info-tooltip,
  .param-info-icon:hover .param-info-tooltip,
  .param-info-tooltip.tooltip-pinned,
  .param-info-tooltip.tooltip-active {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /* Legal hover popups: always hidden on mobile (banner shows text instead) */
  .legal-hover-content,
  .legal-hover-link:hover .legal-hover-content,
  .legal-hover-link:focus .legal-hover-content {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Mobile tooltip banner */
  #mobile-tooltip-banner {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 16px;
    background: #1a2938;
    border-bottom: 1px solid rgba(79, 209, 197, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    color: #e0e8f0;
    font-size: 13px;
    font-family: "Space Grotesk", sans-serif;
    line-height: 1.55;
    z-index: 10003;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    -webkit-user-select: text;
    user-select: text;
  }
  #mobile-tooltip-banner.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  #mobile-tooltip-banner a {
    color: var(--accent-2);
  }

  /* --- Tooltip alignment: right next to title --- */
  .param-info-icon {
    vertical-align: middle;
  }

  /* --- Inline flex groups → stack vertically --- */
  .button-row > div[style*="display:flex"],
  .button-row > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .button-row > div[style*="display:flex"] > select,
  .button-row > div[style*="display: flex"] > select {
    width: 100% !important;
  }

  /* --- Buttons fit screen width --- */
  button {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Smaller controls globally (not Guide) --- */
  #overview input, #overview select, #overview textarea,
  #parameters input, #parameters select, #parameters textarea,
  #analysis input, #analysis select, #analysis textarea,
  #household input, #household select, #household textarea,
  #multiyear input, #multiyear select, #multiyear textarea,
  #data input, #data select, #data textarea,
  #exports input, #exports select, #exports textarea,
  #explorer input, #explorer select, #explorer textarea {
    min-height: 34px;
    font-size: 13px !important;
  }
  #overview button, #parameters button, #analysis button,
  #household button, #multiyear button, #data button, #exports button,
  #explorer button {
    min-height: 34px;
    font-size: 12px;
    padding: 4px 10px;
  }
  .mob-tab-grid-item {
    font-size: 14px !important;
    min-height: 0 !important;
    padding: 10px 10px !important;
  }
  .mob-tab-grid-icon .nav-svg { width: 14px; height: 14px; vertical-align: -2px; position: static; top: auto; }
  .mob-tab-grid-item[data-section="analysis"] .mob-tab-grid-icon { position: relative; top: -1.5px; }
  .mob-tab-grid-item[data-section="multiyear"] .mob-tab-grid-icon { position: relative; top: -1.5px; }
  .mob-tab-grid-item[data-section="data"] .mob-tab-grid-icon { position: relative; top: 0.5px; }
  .mob-tab-grid-item[data-section="exports"] .mob-tab-grid-icon { position: relative; top: 0.5px; }

  /* Toggles/checkboxes: compact */
  .checkbox-label {
    font-size: 12px;
    gap: 4px;
  }
  .checkbox-label input[type="checkbox"] {
    min-height: 16px !important;
    width: 16px;
    height: 16px;
  }

  /* Parameter Editor: fixed header, table layout, hide module description */
  .module-description {
    display: none !important;
  }
  #param-table {
    max-height: 32vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  }
  #param-table .table {
    table-layout: fixed;
    width: 100%;
  }
  #param-table .table:not(.kuntavero-table) thead {
    display: none;
  }
  /* Parameter name column: wrapping, takes remaining space */
  #param-table .table th:first-child,
  #param-table .table td:first-child:not([colspan]) {
    width: 65%;
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
  }
  /* Category header rows (colspan=2): full width */
  #param-table .table td[colspan] {
    width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
  }
  /* Value column: fixed width so inputs always usable */
  #param-table .table th:nth-child(2),
  #param-table .table td:nth-child(2):not([colspan]) {
    width: 35%;
    min-width: 70px;
  }
  #param-table .table input {
    width: 100% !important;
    min-width: 0 !important;
  }
  #param-table .table td,
  #param-table .table th {
    padding: 2px 4px;
  }
  #param-table .table input {
    padding: 2px 4px;
    font-size: 11px;
    height: 24px;
  }

  /* Import-from row: visible on mobile, compact layout handled by JS injected styles */

  /* --- Simulation tab: single combined card on mobile --- */
  #overview .grid {
    display: flex !important;
    flex-direction: column !important;
  }

  /* --- Global: compact toggles/checkboxes --- */
  .checkbox-label {
    font-size: 11px !important;
    gap: 4px !important;
    white-space: nowrap;
  }
  .checkbox-label input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
  }
  /* Try toggles side by side where they fit */
  .income-options {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-left: 0 !important;
  }
  .income-options > label:first-child {
    width: 100%;
  }

  /* --- Analysis: fit horizontally, compact --- */
  #analysis .grid {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Analysis mode card inner layout: tabs first, then Run ID selectors */
  #analysis-single,
  #analysis-compare {
    display: flex;
    flex-direction: column;
  }
  #analysis-single > div:first-child,
  #analysis-compare > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* Tabs row first, full width */
  .analysis-tabs {
    order: -1 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .analysis-tabs .analysis-tab {
    flex: 1;
  }
  /* Run ID form row right after tabs */
  #analysis-single > .form-row,
  #analysis-compare > .form-row {
    order: 0;
  }
  /* Load/clear buttons compact */
  #analysis-load, #dist-load {
    min-width: 0 !important;
    width: 100%;
  }
  #clear-results, #clear-all-runs, #clear-results-cmp, #clear-all-runs-cmp {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* Fiscal tables: tighter column widths and smaller font */
  .fiscal-module-table {
    font-size: 11px !important;
  }
  .fiscal-module-table th,
  .fiscal-module-table td {
    padding: 4px 5px !important;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fiscal-module-table th:first-child,
  .fiscal-module-table td:first-child {
    max-width: 120px;
  }
  #analysis .indicators-poverty-row,
  #analysis .poverty-gap-row {
    flex-direction: column !important;
    grid-column: span 1 !important;
  }
  #analysis .indicators-poverty-row > .card,
  #analysis .poverty-gap-row > .card {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* All inline flex containers in analysis → column */
  #analysis .card > div[style*="display: flex"],
  #analysis .card > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #analysis .card.wide {
    grid-column: span 1 !important;
  }
  #analysis .compare-run-card.indicators-poverty-row,
  #analysis .compare-run-card.poverty-gap-row {
    flex-direction: column !important;
  }

  /* EMTR button/progress/text: stacked */
  .emtr-compute-row,
  .emtr-compute-row > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px;
  }

  /* Analysis fiscal tables: scoping bug fix — only hide cols in single-run tables (done via .fiscal-single in app.js) */
  /* Hide detail rows (module names, translations) in fiscal tables */
  .fiscal-module-table .fiscal-detail-row {
    display: none;
  }

  /* Analysis toggle details icons — match accordion style */
  #analysis details > summary {
    list-style: none;
  }
  #analysis details > summary::-webkit-details-marker {
    display: none;
  }
  #analysis details > summary::after {
    content: "▾";
    font-size: 10px;
    opacity: 0.5;
    margin-left: auto;
    transition: transform 0.2s;
  }
  #analysis details:not([open]) > summary::after {
    transform: rotate(-90deg);
  }

  /* --- Multiyear: fit, hide index numbers, stack results --- */
  .my-settings-grid {
    grid-template-columns: 1fr !important;
  }
  /* Hide Idx columns (even: 2nd, 4th, 6th, 8th) from editable index table.
     Cols: Year(1), WageIdx(2), Wage%(3), RentIdx(4), Rent%(5), PensIdx(6), Pens%(7), CPIIdx(8), CPI%(9), Mort%(10) */
  #my-index-edit-panel table th:nth-child(2),
  #my-index-edit-panel table td:nth-child(2),
  #my-index-edit-panel table th:nth-child(4),
  #my-index-edit-panel table td:nth-child(4),
  #my-index-edit-panel table th:nth-child(6),
  #my-index-edit-panel table td:nth-child(6),
  #my-index-edit-panel table th:nth-child(8),
  #my-index-edit-panel table td:nth-child(8) {
    display: none;
  }
  #my-index-edit-panel table input {
    width: 42px !important;
    font-size: 10px !important;
  }
  /* Multiyear result cards: always stack */
  #multiyear .grid {
    grid-template-columns: 1fr !important;
  }
  /* Multiyear buttons: side by side */
  #multiyear .button-row {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  /* --- Data tab: fit --- */
  #data .grid {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .data-left-column {
    display: contents;
  }
  #data .table td, #data .table th {
    font-size: 11px;
    padding: 5px 6px;
    white-space: normal;
    word-break: break-word;
  }

  /* --- Household: side-by-side items --- */
  /* Min/Max/Steps row: keep horizontal */
  #household .form-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  #household .form-row > .form-group {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 60px !important;
  }

  /* --- Card accordion: collapsed state --- */
  .mob-collapsed .mob-accordion-header {
    margin-bottom: 0;
  }
  /* Override tall card min-height when collapsed */
  .mob-collapsed.card,
  .mob-collapsed.card.tall {
    min-height: 0 !important;
    padding: 8px 14px;
  }

  /* --- Top bar: tab label clickable area, info right-justified --- */
  #mobile-nav-label {
    cursor: pointer;
    pointer-events: auto !important;
  }

  /* ── Guide tab: per-table mobile formatting ── */

  /* Remove scroll fade mask for guide tables that fit after column adjustments */
  #guide-table-analysis-cards,
  #guide-table-income-concepts,
  #guide-table-indexation,
  #guide-table-tax-metrics,
  #guide-table-datasources-v2,
  #guide-table-method-v2,
  #guide-table-validation-v2,
  #guide-table-datasources-v3,
  #guide-table-method-v3,
  #guide-table-validation-v3,
  #guide-table-reforms,
  #guide-table-sas-bugs,
  #guide-table-vat {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 1. Analysis Cards: col1 short labels, cols 2-3 long descriptions */
  #guide-table-analysis-cards { table-layout: fixed; }
  #guide-table-analysis-cards th:nth-child(1),
  #guide-table-analysis-cards td:nth-child(1) { width: 22%; }
  #guide-table-analysis-cards th:nth-child(2),
  #guide-table-analysis-cards td:nth-child(2) { width: 39%; }
  #guide-table-analysis-cards th:nth-child(3),
  #guide-table-analysis-cards td:nth-child(3) { width: 39%; }

  /* 2. Income Concepts: col1 medium labels, col3 formulas */
  #guide-table-income-concepts { table-layout: fixed; }
  #guide-table-income-concepts th:nth-child(1),
  #guide-table-income-concepts td:nth-child(1) { width: 28%; }

  /* 3. Indexation: col1 short labels, col2 index names, col3 descriptions */
  #guide-table-indexation { table-layout: fixed; }
  #guide-table-indexation th:nth-child(1),
  #guide-table-indexation td:nth-child(1) { width: 25%; }

  /* 4. Tax Rate Metrics: 4 cols — Metric 18%, Formula 24%, Location 28%, Notes 30% */
  #guide-table-tax-metrics { table-layout: fixed; }
  #guide-table-tax-metrics th:nth-child(1),
  #guide-table-tax-metrics td:nth-child(1) { width: 18%; }
  #guide-table-tax-metrics th:nth-child(2),
  #guide-table-tax-metrics td:nth-child(2) { width: 24%; }
  #guide-table-tax-metrics th:nth-child(3),
  #guide-table-tax-metrics td:nth-child(3) { width: 28%; }

  /* 5. Data Sources v2: col1 very short domain labels */
  #guide-table-datasources-v2 { table-layout: fixed; }
  #guide-table-datasources-v2 th:nth-child(1),
  #guide-table-datasources-v2 td:nth-child(1) { width: 20%; }

  /* 6. Method v2: col1 short phase labels, col2 long descriptions */
  #guide-table-method-v2 { table-layout: fixed; }
  #guide-table-method-v2 th:nth-child(1),
  #guide-table-method-v2 td:nth-child(1) { width: 20%; }

  /* 7. Validation Results v2: HIDE columns 2 (Persons), 3 (Households), 7 (Overall) */
  #guide-table-validation-v2 th:nth-child(2),
  #guide-table-validation-v2 td:nth-child(2),
  #guide-table-validation-v2 th:nth-child(3),
  #guide-table-validation-v2 td:nth-child(3),
  #guide-table-validation-v2 th:nth-child(7),
  #guide-table-validation-v2 td:nth-child(7) { display: none; }

  /* 8. Data Sources v3: col1 very short ("Tax Admin"), col2 short codes */
  #guide-table-datasources-v3 { table-layout: fixed; }
  #guide-table-datasources-v3 th:nth-child(1),
  #guide-table-datasources-v3 td:nth-child(1) { width: 18%; }
  #guide-table-datasources-v3 th:nth-child(2),
  #guide-table-datasources-v3 td:nth-child(2) { width: 22%; }

  /* 9. Method v3: col1 short phase labels, col2 long descriptions */
  #guide-table-method-v3 { table-layout: fixed; }
  #guide-table-method-v3 th:nth-child(1),
  #guide-table-method-v3 td:nth-child(1) { width: 20%; }

  /* 10. Validation Results v3: HIDE column 2 (Persons) */
  #guide-table-validation-v3 th:nth-child(2),
  #guide-table-validation-v3 td:nth-child(2) { display: none; }

  /* 11. Module boxes: stack Benefits/Taxes/Fees vertically */
  .module-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }
  .module-box {
    width: 100%;
  }

  /* 12. 2026 Reforms: col1 module names, col2 long descriptions */
  #guide-table-reforms { table-layout: fixed; }
  #guide-table-reforms th:nth-child(1),
  #guide-table-reforms td:nth-child(1) { width: 25%; }

  /* 13. SAS Bug Corrections: col1 short var names, cols 2-3 long */
  #guide-table-sas-bugs { table-layout: fixed; }
  #guide-table-sas-bugs th:nth-child(1),
  #guide-table-sas-bugs td:nth-child(1) { width: 22%; }

  /* 14. VAT rate table: HIDE year cols (3-6); keep Code(1), Name(2), Coverage(7) */
  #guide-table-vat { table-layout: fixed; }
  #guide-table-vat th:nth-child(3),
  #guide-table-vat td:nth-child(3),
  #guide-table-vat th:nth-child(4),
  #guide-table-vat td:nth-child(4),
  #guide-table-vat th:nth-child(5),
  #guide-table-vat td:nth-child(5),
  #guide-table-vat th:nth-child(6),
  #guide-table-vat td:nth-child(6) { display: none; }
  #guide-table-vat th:nth-child(1),
  #guide-table-vat td:nth-child(1) { width: 12%; }
  #guide-table-vat th:nth-child(2),
  #guide-table-vat td:nth-child(2) { width: 20%; }
  #guide-table-vat th:nth-child(7),
  #guide-table-vat td:nth-child(7) { width: 68%; }

  /* Back-to-top mobile override */
  .back-to-top {
    display: block;
    text-align: center;
    padding: 14px 0;
    margin: 16px 0 12px;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .back-to-top:active {
    color: var(--text);
  }

  .cloud-shift-hint { display: none !important; }

  /* --- Explorer tab: mobile layout --- */

  /* Explorer mode card: stack vertically like Analysis */
  #explorer-single > div:first-child,
  #explorer-compare > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* Explorer quarter-row: stack on mobile */
  #explorer .explorer-quarter-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #explorer .explorer-quarter-row > .form-group {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stat buttons: wrap, compact */
  #explorer .explorer-stat-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  #explorer .explorer-uniform-btns .analysis-tab {
    min-width: 0 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* Equivalize checkbox styling */
  #explorer .explorer-stat-row input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
  }

  /* Crosstab: hide chart on mobile (tables only) */
  .explorer-crosstab-content {
    flex-direction: column !important;
  }
  #explorer-crosstab-chart-wrap {
    display: none !important;
  }

  /* Explorer mode buttons: match Analysis tab sizing */
  #explorer-mode-card .analysis-tabs .analysis-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Income concept checkboxes: side by side (match Analysis tab) */
  #explorer .income-options {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-left: 0 !important;
  }
  #explorer .income-options > label:first-child {
    flex: 1 1 100%;
    font-size: 10px !important;
  }

  /* Cross-tab builder & Regional: full-width controls on mobile */
  div:has(> #explorer-analyze-btn) {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  /* 60/40 column split on mobile */
  div:has(> #explorer-measure),
  div:has(> #explorer-group-by),
  div:has(> #explorer-regional-load),
  div:has(> #explorer-regional-measure) {
    flex: 1 1 calc(60% - 7px) !important;
    min-width: 0 !important;
    max-width: calc(60% - 7px) !important;
  }
  div:has(> #explorer-second-dim),
  div:has(> #explorer-regional-breakdown) {
    flex: 1 1 calc(40% - 7px) !important;
    min-width: 0 !important;
    max-width: calc(40% - 7px) !important;
  }
  #explorer-crosstab-card .explorer-equiv-wrap,
  .explorer-equiv-wrap:has(#explorer-regional-equivalize) {
    flex: 1 1 calc(40% - 7px) !important;
    max-width: calc(40% - 7px) !important;
    min-width: 0 !important;
  }

  /* Equivalized checkbox: compact on mobile */
  .explorer-equiv-wrap input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  #explorer .explorer-stat-row input[type="checkbox"] {
    width: 12px !important;
    height: 12px !important;
  }

  /* Hide count column on mobile */
  .explorer-col-count {
    display: none !important;
  }

  /* Stat buttons: all inline (including Indicators) */
  #explorer .explorer-stat-btn,
  #explorer .explorer-regional-stat-btn {
    flex: 1 1 auto !important;
  }

  /* Hide vertical separators in stat row on mobile */
  #explorer .explorer-stat-row > span[style*="border-left"] {
    display: none !important;
  }

  /* Hide "Statistic:" and "Level:" labels on mobile */
  #explorer .explorer-row-label {
    display: none !important;
  }

  /* Explorer tables: full card width on mobile */
  #explorer-crosstab-results,
  .explorer-regional-main {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .explorer-regional-content {
    flex-direction: column !important;
  }
  .explorer-table {
    display: table !important;
    table-layout: auto !important;
    width: auto !important;
    min-width: 100%;
  }

  /* Hide (OECD) suffix on mobile */
  .equiv-oecd-tag {
    display: none !important;
  }

  /* Regional maps: full width, stacked */
  .explorer-regional-maps {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .explorer-regional-map {
    max-width: 100% !important;
    padding-top: 0 !important;
    margin: 0 auto;
  }
  .explorer-map-svg {
    width: 100% !important;
    height: auto !important;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }

  /* Explorer select boxes: compact on mobile */
  #explorer select {
    padding: 4px 6px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  /* Hide Share column in compare Regional on mobile */
  .explorer-table-compare .explorer-col-share { display: none !important; }

  /* Explorer tables: smaller on mobile, allow header wrapping but not mid-word */
  .explorer-table th, .explorer-table td {
    font-size: 11px !important;
    padding: 6px 6px !important;
    min-width: 48px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .explorer-table td.num {
    white-space: nowrap !important;
  }
  .explorer-table th:first-child, .explorer-table td:first-child {
    min-width: 70px !important;
  }
  .explorer-table thead th {
    line-height: 1.3 !important;
  }

  /* Compact preset list items on mobile */
  #preset-list .list-item .preset-remove-btn { padding: 2px 2px !important; font-size: 11px; line-height: 1; min-height: 24px !important; width: 24px; }
  #preset-list .list-item .preset-remove-btn:hover { color: var(--muted) !important; border-color: var(--border) !important; background: var(--bg) !important; }
  #preset-list .list-item button.small { padding: 4px 7px; }
  #preset-list .list-item .preset-btns-col { flex-shrink: 0; flex-wrap: nowrap !important; flex-direction: row !important; }
  #preset-list .list-item > div { gap: 6px !important; }
  #preset-list .list-item .preset-name-col { flex: 1; min-width: 0; overflow: hidden; }
  #preset-list .list-item .preset-name-col strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; vertical-align: middle; }

  /* HH-type profiles: narrow first column on mobile */
  .hhtype-table th:first-child,
  .hhtype-table td:first-child {
    max-width: 90px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .hhtype-table th, .hhtype-table td {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  /* Mobile compare HH-type: hide Households(2), RF Disp(4), RF Tax%(7) */
  .hhtype-table-compare th:nth-child(2), .hhtype-table-compare td:nth-child(2),
  .hhtype-table-compare th:nth-child(4), .hhtype-table-compare td:nth-child(4),
  .hhtype-table-compare th:nth-child(7), .hhtype-table-compare td:nth-child(7) {
    display: none !important;
  }

  /* Cross-tab: reorder equiv checkbox next to Measure on mobile */
  div:has(> #explorer-analyze-btn) { order: 1; }
  div:has(> #explorer-measure) { order: 2; }
  #explorer-crosstab-card .explorer-equiv-wrap { order: 3; }
  div:has(> #explorer-group-by) { order: 4; }
  div:has(> #explorer-second-dim) { order: 5; }

  /* Regional: reorder equiv checkbox next to Load on mobile */
  div:has(> #explorer-regional-load) { order: 1; }
  .explorer-equiv-wrap:has(#explorer-regional-equivalize) { order: 2; }
  div:has(> #explorer-regional-measure) { order: 3; }
  div:has(> #explorer-regional-breakdown) { order: 4; }

} /* end @media (max-width: 600px) */

/* Landscape phone / tablet: hide mobile overlay elements, restore accordion bodies */
@media (min-width: 601px) {
  #mobile-nav-btn,
  #mobile-nav-label,
  #mobile-nav-overlay,
  #mobile-nav-drawer,
  #mobile-settings-btn,
  #mobile-settings-panel,
  #status-popup {
    display: none !important;
  }
  .mob-tab-grid,
  .mob-tab-footer {
    display: none !important;
  }
  .mob-accordion-body {
    display: block !important;
  }
  .mob-accordion-footer,
  .mob-accordion-header::after {
    display: none !important;
  }
  .mob-collapsed .mob-accordion-body {
    display: block !important;
  }
  #status-pill {
    position: fixed !important;
    top: 12px;
    right: 20px;
    z-index: 100;
  }
}

/* ========== LANDSCAPE BLOCK (phones only) ========== */
/* min-width: 600px prevents false trigger in portrait when browser chrome shrinks viewport height */
@media (min-width: 600px) and (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #landscape-overlay {
    display: flex !important;
  }
  /* Suppress when keyboard is open on the access gate (shrinks viewport, faking landscape) */
  body.gate-keyboard #landscape-overlay {
    display: none !important;
  }
}

#landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0f1923;
  color: #e0e8f0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
  padding: 24px;
}
#landscape-overlay svg {
  width: 48px;
  height: 48px;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rotatePhone 2s ease-in-out infinite;
}
#landscape-overlay p {
  font-size: 15px;
  color: var(--muted);
  max-width: 280px;
  line-height: 1.5;
}
@keyframes rotatePhone {
  0%, 100% { transform: rotate(90deg); }
  40%, 60% { transform: rotate(0deg); }
}

/* ── Custom select dropdowns (desktop only) ── */
.sisu-select-wrap {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sisu-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  gap: 6px;
}
.sisu-select-trigger:hover { border-color: rgba(255,255,255,0.18); }
.sisu-select-trigger:focus { outline: none; border-color: var(--accent-2); }
.sisu-select-open > .sisu-select-trigger { border-color: var(--accent-2); }

.sisu-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.sisu-select-arrow {
  flex-shrink: 0;
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238899a6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 0.15s ease;
}
.sisu-select-open > .sisu-select-trigger .sisu-select-arrow {
  transform: rotate(180deg);
}

.sisu-select-dropdown {
  display: none;
  position: absolute;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow);
  z-index: 10000;
  overflow: hidden;
}
/* When portaled to .app, shown via class (not parent > child selector) */
.sisu-select-dropdown-open { display: block; }

.sisu-select-search-wrap {
  padding: 6px 6px 4px;
  border-bottom: 1px solid var(--border);
}
.sisu-select-search {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}
.sisu-select-search:focus { outline: none; border-color: var(--accent-2); }
.sisu-select-search::placeholder { color: var(--muted); opacity: 0.5; }

.sisu-select-options {
  max-height: 640px;
  overflow-y: auto;
  padding: 4px 0;
}

.sisu-select-option {
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sisu-select-option:hover,
.sisu-select-option.sisu-select-option-focused {
  background: rgba(79, 209, 197, 0.12);
}
.sisu-select-option-selected {
  color: var(--accent-2);
  font-weight: 600;
}
.sisu-select-option-disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}

.sisu-select-optgroup-label {
  padding: 8px 10px 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  cursor: default;
}

.sisu-select-no-results {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.sisu-select-disabled > .sisu-select-trigger {
  opacity: 0.5;
  cursor: default;
}

/* Compact selects in param editor toolbar */
.param-import-row .sisu-select-trigger {
  height: 30px;
  padding: 4px 8px;
  font-size: 11px;
}

/* Small variant (inside .form-group-sm) */
.sisu-select-sm > .sisu-select-trigger {
  height: 28px;
  padding: 4px 6px;
  background: var(--bg);
  border-radius: 4px;
}
.sisu-select-sm .sisu-select-option { padding: 5px 8px; font-size: 12px; }
.sisu-select-sm .sisu-select-optgroup-label { padding: 6px 8px 2px; }

/* Hide external municipality search on desktop (custom dropdown has built-in search) */
@media (min-width: 601px) {
  .form-group-sm:has(#hh-municipality-search) { display: none !important; }
}

/* Mobile: restore native selects, hide custom UI */
@media (max-width: 600px) {
  .sisu-select-wrap > select {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .sisu-select-trigger,
  .sisu-select-dropdown { display: none !important; }
}

/* ── Explorer tab ── */

/* -- Section layout: single-column stack (matches Analysis wide-card pattern) -- */
#explorer .grid {
  grid-template-columns: 1fr;
  gap: 18px;
}
#explorer .card.wide {
  grid-column: span 1;
}

/* -- Quarter-width row for button + select pairs -- */
#explorer .explorer-quarter-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
}
#explorer .explorer-quarter-row > .form-group {
  flex: 0 0 calc(25% - 11px) !important;
  width: calc(25% - 11px) !important;
  min-width: 0 !important;
  max-width: calc(25% - 11px) !important;
}

/* -- Stat row: tabs + checkbox + unit toggle + analyze button -- */
#explorer .explorer-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* -- Regional / HH-type toolbar -- */
#explorer .explorer-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#explorer .explorer-toolbar .form-group {
  flex: 0 1 240px;
  min-width: 160px;
  margin-bottom: 0;
}

/* -- Regional content: table left, map flush right -- */
.explorer-regional-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.explorer-regional-main {
  flex: 0 1 auto;
  min-width: 0;
}
.explorer-regional-map {
  flex: 0 0 auto;
  align-self: flex-start;
  /* Offset top so map title aligns roughly with table header row */
  padding-top: 0;
}
.explorer-map-svg {
  width: 305px;
  height: 735px;
  display: block;
}
.explorer-map-svg path {
  fill: var(--panel-soft);
  stroke: var(--border);
  stroke-width: 0.5;
  transition: fill 0.2s, opacity 0.2s;
  cursor: pointer;
}
.explorer-map-svg path:hover {
  stroke: var(--accent-2);
  stroke-width: 1.2;
  filter: brightness(1.2);
}
.explorer-municipality-map-svg {
  transform: scale(1.15);
  transform-origin: 50% 47%;
}
.explorer-municipality-map-svg path {
  stroke-width: 0.3;
}
.explorer-municipality-map-svg path:hover {
  stroke-width: 0.8;
}
.explorer-muni-search-row td { padding: 4px 12px; border-bottom: 1px solid var(--border); }
.explorer-muni-search-row input:focus { outline: none; border-color: var(--accent-2); }
.explorer-muni-search-result td { font-weight: 500; }


.explorer-separator-row td {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 4px;
  padding: 2px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  background: transparent;
}
.explorer-map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 9999;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}
.explorer-map-tooltip.visible { opacity: 1; }

/* -- Crosstab content: table + chart side by side for 1D -- */
.explorer-crosstab-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.explorer-crosstab-content > #explorer-crosstab-results {
  flex: 0 1 auto;
  min-width: 0;
}
.explorer-crosstab-content > #explorer-crosstab-chart-wrap {
  flex: 0 0 340px;
  max-width: 340px;
}

/* -- Tables -- */
.explorer-table {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 0.5rem;
}
.explorer-table th,
.explorer-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  min-width: 85px;
}
.explorer-table th:first-child,
.explorer-table td:first-child {
  min-width: 150px;
}
.explorer-table thead th {
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border);
  background: var(--panel-soft);
}
.explorer-table th.num,
.explorer-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.explorer-table tbody tr:hover {
  background: rgba(79, 209, 197, 0.06);
}
/* Compare mode: taller rows to align with 2-bar chart */
.explorer-table-compare tbody td,
.explorer-table-compare tbody th {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* -- Delta coloring (positive = teal, negative = orange) -- */
.explorer-delta-pos { color: var(--accent-2); }
.explorer-delta-neg { color: var(--accent); }

/* -- Heatmap cells -- */
.explorer-heatmap-cell {
  transition: background-color 0.15s;
  border-radius: 3px;
}

/* -- Sortable column headers -- */
.explorer-sortable {
  cursor: pointer;
  user-select: none;
}
.explorer-sortable:hover {
  color: var(--accent-2);
}

/* -- Chart containers -- */
#explorer [id$="-chart-wrap"] {
  position: relative;
  margin-top: 0;
}
/* Crosstab chart: height set dynamically by JS, sits beside table */
#explorer-crosstab-chart-wrap {
  height: 300px; /* default, overridden by JS */
}

/* -- Transition matrix -- */
.explorer-transition-table td {
  min-width: 50px;
  height: 36px;
  text-align: center;
  font-size: 13px;
  padding: 0.4rem 0.5rem;
  font-variant-numeric: tabular-nums;
}
.explorer-transition-table th {
  font-size: 13px;
  padding: 0.4rem 0.5rem;
}
.explorer-transition-diag {
  font-weight: 600;
}
.explorer-transition-corner {
  font-size: 11px;
  text-align: left;
}
.explorer-transition-summary {
  font-size: 0.9rem;
  margin-top: 8px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* -- Stat / unit toggle buttons (extend .analysis-tab) -- */
#explorer .analysis-tabs {
  flex-wrap: wrap;
}

/* -- Uniform button widths for stat + unit toggles -- */
#explorer .explorer-uniform-btns .analysis-tab {
  min-width: 63px;
  text-align: center;
  justify-content: center;
}

/* -- Row label for Statistic: / Level: -- */
#explorer .explorer-row-label {
  font-size: 11px;
  color: var(--muted);
  min-width: 70px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* -- Equivalize checkbox alignment -- */
#explorer .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
}

/* ── Large desktop scaling (4-step cascade, width + height aware) ──
   The app's fixed panels need ~1600px of logical vertical space
   (logical height = viewport height / scale).
   Screens 1600–1919px wide (e.g. MBP 16") get 0.95 — works at 1120px tall.
   Screens ≥1920px wide reset to 0.9 unless viewport is also tall enough:
     scale 0.95 needs height ≥ 1500px  (logical ≥ 1579px)
     scale 1.0  needs height ≥ 1600px  (logical = viewport) */

/* Step 1: mid-large monitors (MBP 16" ~1792×1120) */
@media (min-width: 1600px) {
  :root {
    --scale: 0.95;
    --inv-scale: 1.0526;  /* 1 / 0.95 */
  }
}

/* Step 2: very wide but possibly short — drop back to 0.9
   (iMac 27" 2560×1440, 1080p 1920×1080, 1440p externals) */
@media (min-width: 1920px) {
  :root {
    --scale: 0.9;
    --inv-scale: 1.1111;  /* 1 / 0.9 */
  }
}

/* Step 3: wide AND tall enough for 0.95 (4K at 1.25× ~3072×1728) */
@media (min-width: 1920px) and (min-height: 1500px) {
  :root {
    --scale: 0.95;
    --inv-scale: 1.0526;
  }
}

/* Step 4: wide AND very tall — native scale (4K at 1× 3840×2160) */
@media (min-width: 1920px) and (min-height: 1600px) {
  :root {
    --scale: 1.0;
    --inv-scale: 1.0;
  }
}

/* ── Variant badge (Parameters tab integration) ────────────── */
.variant-badge {
  display: inline-block;
  background: var(--accent-4);
  color: var(--bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

/* ── Modeling Tab: 3-panel grid ─────────────────────────────── */
.modeling-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
  height: calc(var(--full-vh) - 160px);
  transition: grid-template-columns 0.3s ease, gap 0.3s ease;
}

.modeling-grid.sas-expanded {
  grid-template-columns: 0px 1fr 0px;
  gap: 0;
}

.modeling-grid.sas-expanded > .modeling-browser-panel,
.modeling-grid.sas-expanded > .modeling-meta-panel {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border-width: 0;
}

.modeling-browser-panel {
  height: calc(var(--full-vh) - 160px);
  max-height: calc(var(--full-vh) - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.15s ease, padding 0.3s ease, border-width 0.3s ease;
}

.modeling-browser-panel > h3 {
  flex-shrink: 0;
}

.modeling-browser-panel > #modeling-tree-search {
  flex-shrink: 0;
}

.modeling-browser-panel > .modeling-tree {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 8px;
}

.modeling-browser-panel > #modeling-new-module {
  flex-shrink: 0;
}

.modeling-browser-panel > .modeling-variants-section {
  flex-shrink: 0;
  max-height: 30%;
  overflow-y: auto;
  padding-right: 8px;
}

#modeling-tree-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
#modeling-tree-search:focus {
  border-color: var(--accent-4);
}

.modeling-tree {
  font-size: 12px;
  line-height: 1.8;
}

.modeling-tree .tree-module {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modeling-tree .tree-module:hover {
  background: rgba(79, 209, 197, 0.08);
}

.modeling-tree .tree-fn {
  cursor: pointer;
  padding: 2px 6px 2px 20px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

.modeling-tree .tree-fn:hover {
  background: rgba(124, 157, 245, 0.08);
  color: var(--text);
}

.modeling-tree .tree-fn.active {
  background: rgba(124, 157, 245, 0.12);
  color: var(--accent-4);
}

/* Tree arrow (▶/▼ toggle indicator) */
.modeling-tree .tree-arrow {
  display: inline-block;
  width: 12px;
  font-size: 10px;
  text-align: center;
  transition: transform 0.15s;
  color: var(--muted);
}

/* Module description text (muted, smaller) */
.modeling-tree .tree-module-desc {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--muted);
  margin-left: 2px;
}

.modeling-variants-section .variant-item {
  padding: 4px 8px;
  font-size: 11.5px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.modeling-variants-section .variant-item:hover {
  background: rgba(255, 122, 89, 0.08);
  color: var(--text);
}

.modeling-variants-section .variant-item.active {
  background: rgba(255, 122, 89, 0.12);
  color: var(--accent);
}

.modeling-confirm-banner {
  background: rgba(255, 80, 60, 0.08);
  border: 1px solid rgba(255, 80, 60, 0.25);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}
.modeling-confirm-msg {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.4;
}
.modeling-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.modeling-confirm-actions .primary {
  background: #d9534f;
  border-color: #d9534f;
}
.modeling-confirm-actions .primary:hover {
  background: #c9302c;
}

.modeling-editor-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: calc(var(--full-vh) - 160px);
  max-height: calc(var(--full-vh) - 160px);
  overflow: hidden;
}

#modeling-editor-container {
  flex: 1;
  min-height: 200px;
}

.modeling-sas-split {
  display: flex;
  gap: 2px;
  height: 100%;
}
.modeling-sas-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.modeling-sas-label {
  font-size: 11px;
  font-weight: 600;
  color: #aab;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  min-height: 18px;
  flex-shrink: 0;
}
.modeling-sas-editor {
  flex: 1;
  min-height: 0;
}
.modeling-sas-pane-sas {
  background: rgba(255, 248, 230, 0.03);
}
.modeling-sas-pane-sas .modeling-sas-label {
  color: #d4b87a;
}

#modeling-validation-output {
  flex-shrink: 0;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255, 89, 89, 0.08);
  border: 1px solid rgba(255, 89, 89, 0.2);
  border-radius: 6px;
  font-size: 11px;
  font-family: monospace;
  color: #ff5959;
  max-height: 120px;
  overflow-y: auto;
}
#modeling-validation-output.modeling-validation-success {
  background: rgba(129, 199, 132, 0.08);
  border-color: rgba(129, 199, 132, 0.2);
  color: #81c784;
}

.modeling-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.modeling-toolbar-actions {
  display: flex;
  gap: 6px;
}

.modeling-toolbar-btn {
  font-size: 12px !important;
  padding: 5px 14px !important;
}
.modeling-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.modeling-meta-panel {
  height: calc(var(--full-vh) - 160px);
  max-height: calc(var(--full-vh) - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.15s ease, padding 0.3s ease, border-width 0.3s ease;
}

.modeling-meta-panel > h3 {
  flex-shrink: 0;
}

.modeling-meta-content {
  font-size: 12px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 8px;
}

/* ── Modeling Tab: metadata panel styling ──────────────────── */
.meta-section {
  margin-bottom: 14px;
}

.meta-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.meta-table {
  width: 100%;
  font-size: 11.5px;
  border-collapse: collapse;
}

.meta-table td {
  padding: 2px 0;
  vertical-align: top;
}

.meta-key {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--accent-2);
  white-space: nowrap;
  padding-right: 8px !important;
}

.meta-val {
  color: var(--text);
  text-align: right;
}

.meta-comment {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  padding-bottom: 4px !important;
}

/* Step 27: Year-aware parameter controls */
.meta-param-controls {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.meta-param-select {
  font-size: 11px;
  padding: 1px 4px;
  line-height: 1.2;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
}
#meta-param-year {
  flex: 0.7 1 0;
}
#meta-param-month {
  flex: 0.5 1 0;
}

.meta-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.meta-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.meta-tag-input {
  background: rgba(124, 157, 245, 0.12);
  color: var(--accent-4);
}

.meta-tag-output {
  background: rgba(79, 209, 197, 0.12);
  color: var(--accent-2);
}

.meta-tag-sas {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* Step 26: clickable metadata items */
.meta-clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

tr.meta-clickable:hover td {
  text-decoration: underline;
  text-decoration-style: dotted;
}

span.meta-clickable:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  filter: brightness(1.2);
}

.meta-click-flash {
  background: rgba(124, 157, 245, 0.2);
  animation: meta-flash-fade 0.8s ease-out forwards;
}

@keyframes meta-flash-fade {
  0% { background: rgba(124, 157, 245, 0.35); }
  100% { background: transparent; }
}

.meta-year-guard {
  font-size: 11px;
  padding: 2px 0;
  color: var(--text);
}

.meta-info-row {
  font-size: 11px;
  padding: 2px 0;
  color: var(--muted);
}

.meta-label {
  font-weight: 600;
  margin-right: 6px;
}

/* ── Modeling Tab: parameter builder + variant list (Step 9b) */

.modeling-param-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-top: 6px;
}

.modeling-param-item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modeling-param-item:last-child {
  border-bottom: none;
}

.modeling-param-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modeling-param-item-header .meta-key {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modeling-param-item-header .meta-val {
  font-size: 11px;
  min-width: 40px;
  text-align: right;
}

.modeling-param-actions,
.modeling-variant-actions {
  display: flex;
  gap: 2px;
}

.modeling-param-edit-btn,
.modeling-param-delete-btn,
.modeling-variant-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  line-height: 1;
}

.modeling-param-edit-btn:hover,
.modeling-variant-delete-btn:hover {
  color: var(--text);
}

.modeling-param-delete-btn:hover {
  color: #ff5959;
}

.modeling-param-item-labels {
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--muted);
}

.meta-add-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0 6px;
  border-radius: 3px;
  margin-left: 6px;
  line-height: 16px;
}

.meta-add-btn:hover {
  background: rgba(124, 157, 245, 0.1);
}

.modeling-dep-checkboxes {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 2px 4px;
  font-size: 11px;
  max-height: 140px;
  overflow-y: auto;
  align-items: center;
}

.modeling-import-export {
  display: flex;
  gap: 6px;
}

.modeling-import-export button {
  flex: 1;
}

.modeling-variant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.modeling-variant-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.modeling-variant-item.active {
  background: rgba(124, 157, 245, 0.12);
  color: var(--accent);
}

.modeling-variant-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modeling-override-info {
  background: rgba(255, 183, 77, 0.08);
  border: 1px solid rgba(255, 183, 77, 0.2);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  margin-bottom: 8px;
  color: var(--text);
}

.modeling-param-form select {
  height: auto;
  padding: 3px 5px;
  font-size: 11px;
  box-sizing: border-box;
  line-height: 1.2;
}

.modeling-param-form-error {
  color: #ff5959;
  font-size: 10px;
  margin-top: 4px;
}

/* ── Modeling Tab: Monaco decorations ──────────────────────── */

/* Parameter references: orange background */
.deco-param {
  background-color: rgba(255, 165, 0, 0.18);
  border-radius: 2px;
}

/* Input columns: blue text */
.deco-input-col {
  color: #4fc1ff !important;
  font-weight: 600;
}

/* Output aliases: green text */
.deco-output-alias {
  color: #4ec9b0 !important;
  font-weight: 600;
}

/* Year guard glyph: yellow circle in margin */
.deco-year-glyph {
  background-color: #ffd700;
  border-radius: 50%;
  width: 8px !important;
  height: 8px !important;
  margin-left: 4px;
  margin-top: 6px;
}

/* Diff toggle active state */
.modeling-toolbar-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── Modeling Tab: responsive ───────────────────────────────── */
@media (max-width: 1200px) {
  .modeling-grid {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .modeling-grid.sas-expanded {
    grid-template-columns: 0px 1fr;
  }
  .modeling-meta-panel {
    grid-column: 1 / -1;
    height: auto;
    max-height: 40vh;
  }
}

@media (max-width: 768px) {
  .modeling-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .modeling-browser-panel,
  .modeling-editor-panel,
  .modeling-meta-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .modeling-editor-panel {
    min-height: 50vh;
  }
  /* Collapsible panels on tablet (≤768px) */
  .modeling-browser-panel.mobile-collapsed #modeling-tree-search,
  .modeling-browser-panel.mobile-collapsed .modeling-tree,
  .modeling-browser-panel.mobile-collapsed .modeling-variants-section,
  .modeling-browser-panel.mobile-collapsed #modeling-new-module,
  .modeling-browser-panel.mobile-collapsed .modeling-import-export {
    display: none;
  }
  .modeling-meta-panel.mobile-collapsed .modeling-meta-content,
  .modeling-meta-panel.mobile-collapsed #modeling-param-list {
    display: none;
  }
  /* Toggle chevron on collapsible panel headers */
  .modeling-browser-panel > h3,
  .modeling-meta-panel > h3 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
  }
  .modeling-browser-panel > h3::after,
  .modeling-meta-panel > h3::after {
    content: "\25B2";
    font-size: 9px;
    margin-left: auto;
    opacity: 0.5;
    transition: transform 0.15s;
  }
  .modeling-browser-panel.mobile-collapsed > h3::after,
  .modeling-meta-panel.mobile-collapsed > h3::after {
    transform: rotate(180deg);
  }

  /* Collapsed panels: match mob-accordion style */
  .modeling-browser-panel.mobile-collapsed,
  .modeling-meta-panel.mobile-collapsed {
    padding: 10px 14px;
    min-height: 0;
  }
  .modeling-browser-panel.mobile-collapsed > h3,
  .modeling-meta-panel.mobile-collapsed > h3 {
    margin: 0;
    min-height: 24px;
    display: flex;
    align-items: center;
  }

  /* SAS/Diff expanded on tablet: override desktop 0px grid + opacity:0 */
  .modeling-grid.sas-expanded {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .modeling-grid.sas-expanded > .modeling-browser-panel,
  .modeling-grid.sas-expanded > .modeling-meta-panel {
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    min-width: 0;
    border-width: 1px;
    padding: 10px 14px;
  }
  .modeling-grid.sas-expanded > .modeling-browser-panel > h3,
  .modeling-grid.sas-expanded > .modeling-meta-panel > h3 {
    margin: 0;
    min-height: 24px;
    display: flex;
    align-items: center;
  }
  .modeling-grid.sas-expanded > .modeling-browser-panel #modeling-tree-search,
  .modeling-grid.sas-expanded > .modeling-browser-panel .modeling-tree,
  .modeling-grid.sas-expanded > .modeling-browser-panel .modeling-variants-section,
  .modeling-grid.sas-expanded > .modeling-browser-panel #modeling-new-module,
  .modeling-grid.sas-expanded > .modeling-browser-panel .modeling-import-export,
  .modeling-grid.sas-expanded > .modeling-meta-panel #modeling-param-list,
  .modeling-grid.sas-expanded > .modeling-meta-panel .modeling-meta-content {
    display: none;
  }

  /* SAS split: stack vertically on tablet too */
  .modeling-sas-split {
    flex-direction: column;
    gap: 1px;
  }
  .modeling-sas-pane {
    min-height: 35vh;
  }
}

/* ── Modeling Tab: phone (≤600px) ──────────────────────────── */
@media (max-width: 600px) {
  #modeling .modeling-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    height: auto;
    min-height: auto;
  }

  #modeling .modeling-browser-panel,
  #modeling .modeling-editor-panel,
  #modeling .modeling-meta-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #modeling .modeling-editor-panel {
    min-height: 55vh;
  }

  /* Editor toolbar: title on its own row, buttons below */
  #modeling .modeling-editor-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  #modeling .modeling-editor-toolbar h3 {
    font-size: 13px;
    margin: 0;
  }

  #modeling .modeling-toolbar-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  #modeling .modeling-toolbar-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  #modeling #modeling-editor-container {
    min-height: 300px;
    flex: 1;
  }

  #modeling .modeling-dep-checkboxes {
    grid-template-columns: auto 1fr;
  }

  /* Collapsed panels: match mob-accordion style (padding: 10px 14px) */
  #modeling .modeling-browser-panel.mobile-collapsed,
  #modeling .modeling-meta-panel.mobile-collapsed {
    padding: 10px 14px;
    min-height: 0;
  }
  #modeling .modeling-browser-panel.mobile-collapsed > h3,
  #modeling .modeling-meta-panel.mobile-collapsed > h3 {
    margin: 0;
    min-height: 24px;
    display: flex;
    align-items: center;
  }

  /* SAS split: stack vertically */
  #modeling .modeling-sas-split {
    flex-direction: column;
    gap: 1px;
  }
  #modeling .modeling-sas-pane {
    min-height: 35vh;
  }
  #modeling .modeling-sas-label {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* SAS/Diff expanded on mobile: override desktop hiding rules.
     Keep panels visible but auto-collapse their contents. */
  #modeling .modeling-grid.sas-expanded {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel,
  #modeling .modeling-grid.sas-expanded > .modeling-meta-panel {
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    min-width: 0;
    border-width: 1px;
    padding: 10px 14px;
  }
  /* Hide panel contents in SAS/Diff mode */
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel #modeling-tree-search,
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel .modeling-tree,
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel .modeling-variants-section,
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel #modeling-new-module,
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel .modeling-import-export {
    display: none;
  }
  #modeling .modeling-grid.sas-expanded > .modeling-meta-panel #modeling-param-list,
  #modeling .modeling-grid.sas-expanded > .modeling-meta-panel .modeling-meta-content {
    display: none;
  }
  #modeling .modeling-grid.sas-expanded > .modeling-browser-panel > h3,
  #modeling .modeling-grid.sas-expanded > .modeling-meta-panel > h3 {
    margin: 0;
    min-height: 24px;
    display: flex;
    align-items: center;
  }
}