*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --a:      #2563EB;
  --b:      #059669;
  --c:      #D97706;
  --ink:    #1E1B4B;
  --muted:  #6B7280;
  --bg:     #F5F3FF;
  --surf:   #FFFFFF;
  --bdr:    #E5E7EB;
  --ind:    #4F46E5;
  --r: 14px;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

/* ── Sim shell ────────────────────────────────────────────────────── */
.sim-body {
  flex: 1;
  min-height: 0;
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sim-inner {
  flex: 1;
  min-height: 0;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Scenario picker ─────────────────────────────────────────────── */
.scenario-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; flex-shrink: 0; }
.scn-btn {
  border:2px solid var(--bdr); background:#FAFAF8; border-radius:10px;
  padding:6px 3px 5px; cursor:pointer; text-align:center;
  transition:border-color .15s,background .15s,transform .1s;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.scn-btn:hover:not(.active) { border-color:#A5B4FC; background:#EEF2FF; transform:translateY(-1px); }
.scn-btn.active { border-color:var(--ind); background:#EEF2FF; }
.scn-emoji { font-size:1.15rem; line-height:1; }
.scn-label { font-size:.58rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); }
.scn-btn.active .scn-label { color:var(--ind); }

/* ── Diagram ──────────────────────────────────────────────────────── */
.diagram-area {
  flex: 1;
  min-height: 120px;
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.15);
  overflow: hidden;
  transition: background .35s;
}
#btn-grid, #btn-square {
  position:absolute; top:7px; z-index:10;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:99px; cursor:pointer;
  border:1.5px solid rgba(99,102,241,.35);
  background:rgba(255,255,255,.82); color:var(--muted);
  backdrop-filter:blur(4px);
  transition:background .15s,color .15s,border-color .15s;
  pointer-events:all;
}
#btn-grid   { right:7px; }
#btn-square { right:68px; }
#btn-grid.active, #btn-square.active { background:rgba(238,242,255,.92); color:var(--ind); border-color:#A5B4FC; }
.diagram-area.scn-ladder { background:#F8F7FF; }
.diagram-area.scn-kite   { background:linear-gradient(180deg,#EFF6FF 60%,#DBEAFE 100%); }
.diagram-area.scn-slide  { background:linear-gradient(180deg,#F0FDF4 50%,#DCFCE7 100%); }
.diagram-area.scn-roof   { background:#FFFBEB; }
.diagram-area.scn-ramp   { background:linear-gradient(180deg,#F0FDF4 60%,#ECFDF5 100%); }
#main-svg { display:block; width:100%; height:100%; overflow:visible; }

/* ── Settings row ────────────────────────────────────────────────── */
.settings-row {
  flex-shrink: 0;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  background:#F8F7FF; border:1px solid var(--bdr);
  border-radius:10px; padding:10px 12px;
}
.setting-group { display:flex; flex-direction:column; gap:4px; }
.setting-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.setting-val { font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; }
.setting-val.sv-a { color:var(--a); }

.mini-slider { -webkit-appearance:none; width:100%; height:4px; border-radius:99px; outline:none; cursor:pointer; }
.mini-slider { background:linear-gradient(to right,var(--a) 0%,var(--a) var(--pct,71%),#BFDBFE var(--pct,71%)); }
.mini-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--a); border:2px solid #fff; box-shadow:0 1px 5px rgba(37,99,235,.35); cursor:grab; }
.mini-slider::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.15); }
.mini-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--a); border:2px solid #fff; cursor:grab; }

.setting-select {
  border:1.5px solid var(--bdr); border-radius:6px; padding:4px 6px;
  font-size:.8rem; font-weight:600; color:var(--ink); background:white;
  cursor:pointer; outline:none; -webkit-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='%236B7280'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; padding-right:22px;
}
.setting-select:focus { border-color:var(--ind); }

/* ── Replace checkbox ─────────────────────────────────────────────── */
.replace-row {
  flex-shrink: 0;
  display:flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:600; color:#4B5563;
}
.replace-row input[type=checkbox] { accent-color:var(--ind); width:14px; height:14px; cursor:pointer; flex-shrink:0; }
.replace-row label { cursor:pointer; user-select:none; }

/* ── Auto-run progress ────────────────────────────────────────────── */
.autorun-progress { flex-shrink: 0; height:3px; background:#D1FAE5; border-radius:99px; overflow:hidden; }
.autorun-progress-fill { height:100%; background:var(--b); border-radius:99px; width:0%; transition:width .1s; }

/* ── Squares mode ─────────────────────────────────────────────────── */
body.squares-mode .diagram-area {
  background: #FAFAFA !important;
}

/* ── Info dialog ──────────────────────────────────────────────────── */
#info-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  max-height: calc(100vh - 56px);
  padding: 0;
  border: none;
  border-radius: 16px;
  background: #ffffff;
  color: #1a2a2a;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  margin: auto;
}

#info-dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #004445;
  color: #ffffff;
}

.dialog-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}

#info-close-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #004445;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#info-close-btn:hover {
  background: rgba(0, 68, 69, 0.80);
}

.dialog-tabs {
  display: flex;
  border-bottom: 2px solid #e5eae9;
  background: #f8fbfb;
}

.tab-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: #7eaaa6;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.tab-btn.active {
  color: #004445;
  border-bottom-color: #004445;
}

.tab-btn:hover {
  color: #004445;
}

[role="tabpanel"] {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #1a2a2a;
}

[role="tabpanel"] p {
  margin: 0 0 8px;
}

[role="tabpanel"] ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

[role="tabpanel"] li {
  font-size: 14px;
  line-height: 1.6;
  color: #1a2a2a;
  margin-bottom: 3px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  background: #f8fbfb;
  border-top: 1px solid #e5eae9;
}

.dialog-close-footer {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: #004445;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.dialog-close-footer:hover {
  background: #006667;
}

/* ── Accessibility ────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}