:root {
  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 5px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.35);
  --transition: all 0.2s ease;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --accent-channel: 106,166,255;
  --bg-app: #20283a;
  --bg-panel: #1a2234;
  --bg-surface: #273047;
  --bg-input: #313b56;
  --bg-viewport: #141b29;
  --bg-hover: rgba(255,255,255,0.05);
  --bg-active: rgba(255,255,255,0.09);
  --bg-selected: rgba(var(--accent-channel), 0.14);
  --border: #3f4d6b;
  --border-strong: #55688c;
  --text: #e7edf8;
  --text-muted: #93a3bf;
  --text-heading: #c3cee3;
  --accent: #6aa6ff;
  --accent-light: #8bc2ff;
  --accent-sec: #4f86d8;
  --danger: #f87171;
  --success: #34d399;
  --focus: #6aa6ff;

  /* Toolbar icon palette: grouped by tool family with real colour, kept a
     step short of neon so the panel still reads as a professional instrument. */
  --icon-blue: #649fe9;
  --icon-green: #53cd80;
  --icon-orange: #e29821;
  --icon-yellow: #e9ae1c;
  --icon-red: #e37171;
  --icon-purple: #a088e7;
}

body.light {
  --accent-channel: 2,119,189;
  --bg-app: #ffffff;
  --bg-panel: #f5f5f5;
  --bg-surface: #fafafa;
  --bg-input: #ffffff;
  --bg-viewport: #e5e5e5;
  --bg-hover: rgba(0,0,0,0.04);
  --bg-active: rgba(0,0,0,0.08);
  --bg-selected: rgba(var(--accent-channel), 0.08);
  --border: #e0e0e0;
  --border-strong: #d0d0d0;
  --text: #333333;
  --text-muted: #999999;
  --text-heading: #666666;
  --accent: #0277bd;
  --accent-light: #03a9f4;
  --accent-sec: #01579b;
  --danger: #d84315;
  --success: #4ec9b0;
  --focus: #0277bd;
  --icon-blue: #5e95cc;
  --icon-green: #56a877;
  --icon-orange: #d98f3f;
  --icon-yellow: #c7a23c;
  --icon-red: #cf7474;
  --icon-purple: #9483c9;
  --shadow-sm: 0 1px 2px rgba(23,32,44,0.10);
  --shadow-md: 0 6px 24px rgba(23,32,44,0.16);
}

body.light #viewport {
  background: linear-gradient(180deg, #dfe5ee 0%, #c9d2de 100%);
}

/* ---- Black Theme (graphite chrome: near-black with a cool blue tint so
   panels read as separate layers instead of one flat black) ---- */
body.theme-dark {
  --accent-channel: 59,130,246;
  --bg-app: #0e1116;
  --bg-panel: #12161c;
  --bg-surface: #181d24;
  --bg-input: #0b0e13;
  --bg-viewport: #080b0f;
  --bg-hover: rgba(255,255,255,0.06);
  --bg-active: rgba(255,255,255,0.10);
  --bg-selected: rgba(var(--accent-channel), 0.16);
  --border: #262c35;
  --border-strong: #3a434f;
  --text: #e8ebf0;
  --text-muted: #8892a0;
  --text-heading: #f7f8fa;
  --accent: #3b82f6;
  --accent-light: #60a5fa;
  --accent-sec: #2563eb;
  --danger: #ef4444;
  --success: #22c55e;
  --focus: #3b82f6;
}

/* ---- Charcoal: the Black Theme lifted a few steps - dark slate chrome
   instead of near-black, same cool blue accent family, so it stays a dark
   theme while every panel and border reads clearly. ---- */
body.theme-charcoal {
  --accent-channel: 96,165,250;
  --bg-app: #1b2027;
  --bg-panel: #232932;
  --bg-surface: #2b323d;
  --bg-input: #171c23;
  --bg-viewport: #14181f;
  --bg-hover: rgba(255,255,255,0.07);
  --bg-active: rgba(255,255,255,0.11);
  --bg-selected: rgba(var(--accent-channel), 0.18);
  --border: #333b47;
  --border-strong: #4a5563;
  --text: #eef1f6;
  --text-muted: #9aa5b4;
  --text-heading: #ffffff;
  --accent: #60a5fa;
  --accent-light: #93c5fd;
  --accent-sec: #3b82f6;
  --danger: #f87171;
  --success: #4ade80;
  --focus: #60a5fa;
}

/* ---- Blueprint: drafting-table blue. Deep ink-blue chrome with a cyan
   line accent, like a drawing sheet under a cadet-blue wash. ---- */
body.theme-blueprint {
  --accent-channel: 77,184,232;
  --bg-app: #101b2c;
  --bg-panel: #142238;
  --bg-surface: #1b2b44;
  --bg-input: #0e1826;
  --bg-viewport: #0c1523;
  --bg-hover: rgba(215,227,244,0.06);
  --bg-active: rgba(215,227,244,0.10);
  --bg-selected: rgba(var(--accent-channel), 0.16);
  --border: #2a3c58;
  --border-strong: #3d5375;
  --text: #d7e3f4;
  --text-muted: #7f95b3;
  --text-heading: #e8f0fa;
  --accent: #4db8e8;
  --accent-light: #7fd0f2;
  --accent-sec: #2f97c8;
  --danger: #ef6b73;
  --success: #43c78f;
  --focus: #4db8e8;
  --icon-blue: #62b8ea;
  --icon-green: #4fc38a;
  --icon-orange: #e6975c;
  --icon-yellow: #e2b755;
  --icon-red: #e8737b;
  --icon-purple: #a98ce0;
}

/* ---- Dracula: pastel neon accents on the purple-black chrome. ---- */
body.theme-dracula {
  --accent-channel: 189,147,249;
  --bg-app: #21222c;
  --bg-panel: #282a36;
  --bg-surface: #343746;
  --bg-input: #1e1f29;
  --bg-viewport: #1a1b24;
  --bg-hover: rgba(248,248,242,0.06);
  --bg-active: rgba(248,248,242,0.10);
  --bg-selected: rgba(var(--accent-channel), 0.17);
  --border: #3f4252;
  --border-strong: #6272a4;
  --text: #f8f8f2;
  --text-muted: #9299b8;
  --text-heading: #ffffff;
  --accent: #bd93f9;
  --accent-light: #c9b3fc;
  --accent-sec: #6c53b8;
  --danger: #ff5555;
  --success: #50fa7b;
  --focus: #bd93f9;
  --icon-blue: #8be9fd;
  --icon-green: #50fa7b;
  --icon-orange: #ffb86c;
  --icon-yellow: #f1fa8c;
  --icon-red: #ff5555;
  --icon-purple: #bd93f9;
}

/* ---- Nord Theme ---- */
body.theme-nord {
  --accent-channel: 136,192,208;
  --bg-app: #2e3440;
  --bg-panel: #3b4252;
  --bg-surface: #434c5e;
  --bg-input: #2b303b;
  --bg-viewport: #242933;
  --bg-hover: rgba(255,255,255,0.05);
  --bg-active: rgba(255,255,255,0.09);
  --bg-selected: rgba(var(--accent-channel), 0.14);
  --border: #4c566a;
  --border-strong: #5e6a80;
  --text: #d8dee9;
  --text-muted: #76839c;
  --text-heading: #eceff4;
  --accent: #88c0d0;
  --accent-light: #8fbcbb;
  --accent-sec: #81a1c1;
  --danger: #bf616a;
  --success: #a3be8c;
  --focus: #88c0d0;
}

/* ---- Light Theme: crisp drafting-desk light. Cool grey chrome with white
   fields and saturated category icons; accent-light is a deep tone so it
   stays readable as text and border on the light surfaces. ---- */
body.theme-light {
  --accent-channel: 20,103,210;
  --bg-app: #eef1f5;
  --bg-panel: #e5e9ef;
  --bg-surface: #f7f9fb;
  --bg-input: #ffffff;
  --bg-viewport: #dde3eb;
  --bg-hover: rgba(15,23,42,0.05);
  --bg-active: rgba(15,23,42,0.09);
  --bg-selected: rgba(var(--accent-channel), 0.11);
  --border: #cdd4dd;
  --border-strong: #a9b4c1;
  --text: #1f2630;
  --text-muted: #5d6878;
  --text-heading: #12181f;
  --accent: #1467d2;
  --accent-light: #0c56b4;
  --accent-sec: #0f4fa0;
  --danger: #d23a3a;
  --success: #1e8e4e;
  --focus: #1467d2;
  --icon-blue: #2472c8;
  --icon-green: #2f9e4f;
  --icon-orange: #e0782a;
  --icon-yellow: #b18a10;
  --icon-red: #d64545;
  --icon-purple: #7d52c9;
}

/* ---- Nord Light: Snow Storm panels with Frost accents (light sibling of
   the Nord dark theme). ---- */
body.theme-nord-light {
  --accent-channel: 74,125,189;
  /* Snow Storm chrome: crisp cool surfaces, white fields and canvas. */
  --bg-app: #e3e9f1;
  --bg-panel: #eaeef5;
  --bg-surface: #f6f8fb;
  --bg-input: #ffffff;
  --bg-viewport: #ffffff;
  --bg-hover: rgba(46,52,64,0.06);
  --bg-active: rgba(46,52,64,0.10);
  --bg-selected: rgba(var(--accent-channel), 0.13);
  --border: #c3ccd7;
  --border-strong: #9dabb9;
  --text: #2e3440;
  --text-muted: #5e6a7d;
  --text-heading: #252c37;
  --accent: #4a7dbd;
  --accent-light: #3a67a3;
  --accent-sec: #35618f;
  --danger: #c25561;
  --success: #4d8f56;
  --focus: #4a7dbd;
  --icon-blue: #4a7dbd;
  --icon-green: #3f9e63;
  --icon-orange: #cf7040;
  --icon-yellow: #ad8519;
  --icon-red: #c25561;
  --icon-purple: #8f6a9e;
}

/* Title bars read as Snow Storm bars against the lighter dialog body. */
body.theme-nord-light .modal-header { background: #dfe5ee; }

/* ---- Tokyo Midnight Storm: Tokyo Night Storm chrome (deep indigo night)
   with a teal-green #44d1bd accent in place of the original Tokyo green. ---- */
body.theme-tokyo-midnight-storm {
  --accent-channel: 122,162,247;
  --bg-app: #24283b;
  --bg-panel: #1f2335;
  --bg-surface: #292e42;
  --bg-input: #1a1e2e;
  --bg-viewport: #16161e;
  --bg-hover: rgba(192,202,245,0.06);
  --bg-active: rgba(192,202,245,0.10);
  --bg-selected: rgba(var(--accent-channel), 0.16);
  --border: #3b4261;
  --border-strong: #545c7e;
  --text: #c0caf5;
  --text-muted: #565f89;
  --text-heading: #a9b1d6;
  --accent: #7aa2f7;
  --accent-light: #7dcfff;
  --accent-sec: #2ac3de;
  --danger: #f7768e;
  --success: #44d1bd;
  --focus: #7aa2f7;
}

/* ---- Ayu Storm Theme ---- */
body.theme-ayu-storm {
  --accent-channel: 54,163,217;
  --bg-app: #1f2430;
  --bg-panel: #232838;
  --bg-surface: #2a3042;
  --bg-input: #191d28;
  --bg-viewport: #12151d;
  --bg-hover: rgba(203,204,198,0.06);
  --bg-active: rgba(203,204,198,0.10);
  --bg-selected: rgba(var(--accent-channel), 0.16);
  --border: #3a4053;
  --border-strong: #4e556b;
  --text: #cbccc6;
  --text-muted: #626774;
  --text-heading: #e6e1cf;
  --accent: #36a3d9;
  --accent-light: #59c2ff;
  --accent-sec: #2f8fbf;
  --danger: #f07178;
  --success: #b8cc52;
  --focus: #36a3d9;
}

/* Tokyo Night toolbar accents: the green family uses the requested teal-green
   rather than the original Tokyo green. */
body.theme-tokyo-midnight-storm .tbtn.active,
body.theme-tokyo-midnight-storm .tbtn.active:hover { color: #fff; }

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-app);
  transition: background var(--transition), color var(--transition);
}

body {
  /* Prevent pull-to-refresh on touch devices */
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

#content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#content-header {
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

#content-header h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Load-case / combination switcher. On phones it sits in the content header
   (see the mobile section) to save vertical space; everywhere else - desktop
   and tablets - it stays at the top of the results pane, where it started. */
#resultSetSelect {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
}
#results-pane #resultSetSelect {
  width: 100%;
  margin: 0 0 8px;
  flex: 0 0 auto;
}
#results-pane select.results-select {
  width: 100%;
  margin-bottom: 8px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
}

#viewport-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}

#results-pane {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  padding-top: 48px;
  z-index: 26;
  user-select: none;
}

#results-pane.hidden {
  display: none;
}

#results-pane-resizer {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 6;
  background: transparent;
}

#results-pane-resizer::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 42px;
  border-radius: 1px;
  background: var(--border);
  transition: background var(--transition), height 0.12s;
}

#results-pane-resizer:hover::after,
#results-pane.resizing #results-pane-resizer::after {
  background: var(--accent);
  height: 72px;
}

#results-pane .results-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#results-pane #results-pane-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

#results-pane #results-pane-close:hover {
  color: var(--text);
}

#results-pane .results-pane-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  overflow-y: auto;
}

/* Results palette: bordered console keys on the panel surface so each plot
   mode reads as its own control instead of blending into the panel. */
#results-pane .tbtn {
  width: 38px;
  height: 24px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 1px rgba(0, 0, 0, 0.18);
}

#results-pane .tbtn:hover {
  background: var(--bg-input);
  border-color: var(--border-strong);
  color: var(--text);
}

#results-pane .tbtn.active {
  background: color-mix(in srgb, var(--accent) 24%, var(--bg-surface));
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: inset 0 -2px 0 var(--accent), 0 1px 1px rgba(0, 0, 0, 0.18);
}

/* Quantity families keep a faint tint so the palette scans by result type.
   The active state always overrides it with the accent. */
#results-pane .tbtn[data-result-mode="displacement"],
#results-pane .tbtn[data-result-mode="bearing"],
#results-pane .tbtn[data-result-mode="reactions"],
#results-pane .tbtn[data-result-mode="as_bot_x"],
#results-pane .tbtn[data-result-mode="as_bot_y"],
#results-pane .tbtn[data-result-mode="as_top_x"],
#results-pane .tbtn[data-result-mode="as_top_y"],
#results-pane .tbtn[data-wall-stress="nx"],
#results-pane .tbtn[data-wall-stress="ny"],
#results-pane .tbtn[data-wall-stress="mx"],
#results-pane .tbtn[data-wall-stress="my"] {
  color: color-mix(in srgb, var(--icon-green) 80%, var(--text));
}
#results-pane .tbtn[data-result-mode="mx"],
#results-pane .tbtn[data-result-mode="my"],
#results-pane .tbtn[data-result-mode="mxy"],
#results-pane .tbtn[data-result-mode="wx"],
#results-pane .tbtn[data-result-mode="wy"],
#results-pane .tbtn[data-band-diagram="moment"],
#results-pane .tbtn[data-band-diagram="shear"],
#results-pane .tbtn[data-col-diagram="shear_x"],
#results-pane .tbtn[data-col-diagram="shear_z"] {
  color: color-mix(in srgb, var(--icon-orange) 80%, var(--text));
}
#results-pane .tbtn[data-result-mode="stress"],
#results-pane .tbtn[data-result-mode="s1"],
#results-pane .tbtn[data-result-mode="s2"],
#results-pane .tbtn[data-result-mode="txy"],
#results-pane .tbtn[data-result-mode="strain"],
#results-pane .tbtn[data-result-mode="ex"],
#results-pane .tbtn[data-result-mode="ey"],
#results-pane .tbtn[data-result-mode="exy"],
#results-pane .tbtn[data-band-diagram="axial"],
#results-pane .tbtn[data-col-diagram="axial"] {
  color: color-mix(in srgb, var(--icon-purple) 80%, var(--text));
}
#results-pane .tbtn[data-call="openPileResults()"],
#results-pane .tbtn[data-col-diagram="moment_x"],
#results-pane .tbtn[data-col-diagram="moment_z"],
#results-pane .tbtn[data-band-diagram="torsion"],
#results-pane .tbtn[data-result-mode="strips-ss"],
#results-pane .tbtn[data-wall-stress="sy"],
#results-pane .tbtn[data-wall-stress="sx"],
#results-pane .tbtn[data-wall-stress="txy"],
#results-pane .tbtn[data-wall-stress="vm"],
#results-pane .tbtn[data-wall-stress="s1"],
#results-pane .tbtn[data-wall-stress="s2"],
#results-pane .tbtn[data-wall-stress="axial"] {
  color: color-mix(in srgb, var(--icon-blue) 80%, var(--text));
}
#results-pane .tbtn[data-result-mode="punching"],
#results-pane .tbtn[data-result-mode="wallReactions"],
#results-pane .tbtn[data-result-mode="strips-crack"] {
  color: color-mix(in srgb, var(--icon-red) 80%, var(--text));
}
#results-pane .tbtn[data-result-mode="strips"] {
  color: color-mix(in srgb, var(--icon-yellow) 80%, var(--text));
}

#results-pane .results-pane-section {
  width: 100%;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-heading);
  padding: 10px 0 3px;
  border-bottom: 1px solid var(--border-strong);
}

#results-pane .results-pane-section:first-child {
  padding-top: 0;
}

#results-pane .results-pane-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-bottom: 1px;
}

#results-pane .results-pane-slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 4px;
}

#results-pane .results-slider-label {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

#results-pane .results-pane-slider input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent, #2563eb);
  height: 14px;
  margin: 0;
}

#results-pane .results-pane-info {
  border-top: 1px solid var(--border);
  padding: 6px;
  font-size: 10px;
  color: var(--text-muted);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2px;
  row-gap: 2px;
  padding: 3px 8px;
  user-select: none;
}

.toolbar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

/* Account controls pinned to the right end of the content title bar. The
   two-class selector outweighs auth.css's base `.auth-controls` margin. */
.auth-controls.content-header-auth {
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Theme + settings sit in the title bar, just left of the profile avatar. */
.content-header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  flex-shrink: 0;
}

.toolbar-section-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.85;
  line-height: 1;
  height: 10px;
}

.toolbar-section-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toolbar-divider {
  width: 1px;
  height: 30px;
  background: var(--border);
  margin: 0 4px;
  align-self: center;
}

#toolbar .brand {
  font-weight: 700;
  color: var(--accent-light);
  margin-right: 4px;
  letter-spacing: 0.02em;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Engineering-console buttons: flat, square, one neutral icon tone with a
   pressed accent state. No gradients, glows or colour-shifting hovers. */
.tbtn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 28px;
  height: 26px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.tbtn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border);
}

.tbtn:active {
  background: var(--bg-active);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.tbtn.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-light);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tbtn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.tbtn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Text-label variant (All, filter) - same console button, sized to the label. */
.tbtn.tbtn-text {
  width: auto;
  min-width: 28px;
  padding: 0 8px;
  letter-spacing: 0.04em;
}

/* Toolbar select (load case): same console density as the buttons. */
.toolbar-select {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  max-width: 140px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* Category hues survive only as a faint tint on the neutral icon tone so the
   toolbar groups stay scannable without reading as a colour palette. */
.tbtn.tb-blue { color: color-mix(in srgb, var(--icon-blue) 40%, var(--text-muted)); }
.tbtn.tb-green { color: color-mix(in srgb, var(--icon-green) 40%, var(--text-muted)); }
.tbtn.tb-red { color: color-mix(in srgb, var(--icon-red) 40%, var(--text-muted)); }
.tbtn.tb-orange { color: color-mix(in srgb, var(--icon-orange) 40%, var(--text-muted)); }
.tbtn.tb-purple { color: color-mix(in srgb, var(--icon-purple) 40%, var(--text-muted)); }
.tbtn.tb-yellow { color: color-mix(in srgb, var(--icon-yellow) 40%, var(--text-muted)); }
.tbtn.tb-blue:hover, .tbtn.tb-green:hover, .tbtn.tb-red:hover,
.tbtn.tb-orange:hover, .tbtn.tb-purple:hover, .tbtn.tb-yellow:hover {
  color: var(--text);
}
.tbtn.active.tb-blue, .tbtn.active.tb-green, .tbtn.active.tb-red,
.tbtn.active.tb-orange, .tbtn.active.tb-purple, .tbtn.active.tb-yellow {
  color: var(--accent-light);
}

/* Light chrome: the muted-grey mixing that softens the dark themes washes
   the category hues out on white. On light themes the hue is mixed into the
   dark text (keeps contrast, restores colour) and hover jumps to the full
   saturated icon tone. */
body.light .tbtn.tb-blue { color: color-mix(in srgb, var(--icon-blue) 66%, var(--text)); }
body.light .tbtn.tb-green { color: color-mix(in srgb, var(--icon-green) 66%, var(--text)); }
body.light .tbtn.tb-red { color: color-mix(in srgb, var(--icon-red) 66%, var(--text)); }
body.light .tbtn.tb-orange { color: color-mix(in srgb, var(--icon-orange) 66%, var(--text)); }
body.light .tbtn.tb-purple { color: color-mix(in srgb, var(--icon-purple) 66%, var(--text)); }
body.light .tbtn.tb-yellow { color: color-mix(in srgb, var(--icon-yellow) 60%, var(--text)); }
body.light .tbtn.tb-blue:hover, body.light .tbtn.tb-green:hover,
body.light .tbtn.tb-red:hover, body.light .tbtn.tb-orange:hover,
body.light .tbtn.tb-purple:hover, body.light .tbtn.tb-yellow:hover {
  color: var(--icon-blue);
}
body.light .tbtn.tb-green:hover { color: var(--icon-green); }
body.light .tbtn.tb-red:hover { color: var(--icon-red); }
body.light .tbtn.tb-orange:hover { color: var(--icon-orange); }
body.light .tbtn.tb-purple:hover { color: var(--icon-purple); }
body.light .tbtn.tb-yellow:hover { color: color-mix(in srgb, var(--icon-yellow) 85%, var(--text)); }
body.light .tbtn.active.tb-blue, body.light .tbtn.active.tb-green,
body.light .tbtn.active.tb-red, body.light .tbtn.active.tb-orange,
body.light .tbtn.active.tb-purple, body.light .tbtn.active.tb-yellow {
  color: var(--accent-light);
}

/* Calculation-report launcher: sits in a result-mode row next to its plot
   toggle (punching ◉). Muted slate by default so it reads as a document
   action, not another plot mode; accent fill while its view is active. */
.tbtn.report-btn {
  width: auto;
  height: 26px;
  padding: 0 10px;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  white-space: nowrap;
}
.tbtn.report-btn svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.tbtn.report-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.tbtn.report-btn.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.filter-dropdown { position: relative; }
/* Match the load-case select: input background and body text colour. */
.tbtn.filter-dropdown-toggle {
  gap: 4px;
  width: 88px;
  justify-content: space-between;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 7px;
  font-size: 10px;
}
.tbtn.filter-dropdown-toggle:hover {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--border-strong);
}
#filterDropdownLabel {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.filter-dd-chevron {
  transition: transform var(--transition);
  flex-shrink: 0;
}
.filter-dropdown.open .filter-dd-chevron { transform: rotate(180deg); }
.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  width: 130px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.filter-dropdown-menu.hidden { display: none; }
.filter-dd-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text);
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-dd-item:hover { background: var(--bg-hover); }
.filter-dd-item input { margin: 0; accent-color: var(--accent); }
.filter-dd-sep { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 6px; }

/* Strip results pane */
.strip-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}
.strip-cat:hover { background: var(--bg-hover); border-color: var(--border-strong); }
/* Highlighted strip-result items: black text so it stays readable on the
   light accent fill in every theme (accent-on-accent was invisible). */
.strip-cat.active { background: var(--bg-selected); border-color: var(--accent); color: var(--accent-light); }
.strip-sub {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 0 4px 12px;
}
.strip-sub.hidden { display: none; }
.strip-comp {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.strip-comp:hover { background: var(--bg-hover); color: var(--text); }
.strip-comp.active { background: var(--bg-selected); border-color: var(--accent); color: var(--accent-light); }

/* Strip results modal - design section */
.strip-select-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strip-select-field select {
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}
.strip-modal-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 2px 0;
}
.strip-modal-divider {
  border-top: 1px solid var(--border);
  margin: 6px 0 2px;
}
.strip-design-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 6px;
}
.strip-design-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 0;
}
.strip-design-field select,
.strip-design-field input,
.strip-design-field .strip-design-input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}
.strip-design-input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; color: var(--text); }
.strip-design-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.strip-design-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--bg-surface);
}
.strip-design-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.strip-design-name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 4px;
}
.strip-design-name:hover, .strip-design-name:focus {
  border-color: var(--border);
  background: var(--bg-input);
  outline: none;
}
.strip-design-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
}
.strip-design-mini input {
  width: 56px;
  padding: 2px 4px;
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.strip-design-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
}
.strip-design-row .strip-design-field select {
  font-size: 10px;
  padding: 3px 4px;
}
.strip-del {
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 7px;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}
.strip-del:hover { color: var(--danger); border-color: var(--danger); background-color: var(--bg-active); }
.strip-del:active { transform: translateY(1px); }
.strip-del:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.strip-design-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.strip-btn {
  flex: 1;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--bg-surface);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}
.strip-btn:hover { background-color: var(--bg-active); border-color: var(--border-strong); }
.strip-btn:active { transform: translateY(1px); }
.strip-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.strip-btn-run {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.strip-btn-run:hover { background-color: var(--accent-light); border-color: var(--accent-light); color: #fff; }
.strip-btn-add {
  background: transparent;
  background-image: none;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}
.strip-btn-add:hover { background-color: var(--bg-hover); border-color: var(--accent); color: var(--accent-light); }
.strip-design-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.strip-design-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px;
}
.strip-design-meta {
  font-size: 10px;
  color: var(--text-muted);
}
.strip-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
}
.strip-status.ok { color: #4ade80; background: rgba(74,222,128,0.14); }
.strip-status.fail { color: #dc2626; background: rgba(239,68,68,0.14); }
.strip-status.na { color: var(--text-muted); background: var(--bg-input); }

/* ---- Strip design check (results modal verdict list) ---- */
.strip-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.strip-check-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 2px 2px 4px;
}
.strip-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.strip-check-row:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.strip-check-row.ok { border-left-color: #4ade80; }
.strip-check-row.fail { border-left-color: #dc2626; }
.strip-check-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.strip-check-bars {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-check-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
}
.strip-check-util {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.strip-check-row.ok .strip-check-util { color: #4ade80; }
.strip-check-row.fail .strip-check-util { color: #dc2626; }
.strip-check-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.strip-check-row.ok .strip-check-pill { color: #4ade80; background: rgba(74,222,128,0.14); }
.strip-check-row.fail .strip-check-pill { color: #fff; background: #dc2626; }


.strip-design-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 1px 0;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.strip-layer-name {
  font-weight: 700;
  min-width: 42px;
  color: var(--text);
}
.strip-layer-m { color: var(--text-muted); min-width: 78px; }
.strip-layer-as { color: var(--text-muted); min-width: 66px; }
.strip-layer-prov { flex: 1; color: var(--text-muted); white-space: nowrap; }
.strip-layer-util { font-size: 10px; }
.strip-layer-util.ok { color: #4ade80; }
.strip-layer-util.fail { color: #f87171; }
.strip-layer-crack {
  width: 100%;
  font-size: 9px;
  color: var(--text-muted);
  padding-left: 48px;
}
.strip-design-steel {
  font-size: 10px;
  color: var(--text-muted);
  padding-top: 3px;
}
.strip-design-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.strip-calc-btn {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 3px 8px;
  color: var(--accent-light);
  border-color: var(--accent);
  background: transparent;
}
.strip-calc-btn:hover { background: var(--bg-selected); }

/* Member design calculation report */
.calc-report {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 11px;
}
.calc-report-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.calc-report-head b:first-child { font-size: 14px; color: var(--text-heading); }
.calc-report-head span:nth-child(2) { color: var(--text-muted); font-size: 10px; flex: 1; }
.calc-status {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 8px;
}
.calc-status.ok { color: #4ade80; background: rgba(74,222,128,0.14); }
.calc-status.fail { color: #dc2626; background: rgba(239,68,68,0.14); }
.calc-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 14px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.calc-input {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
}
.calc-input i { font-style: normal; color: var(--text-muted); }
.calc-input b { font-weight: 600; color: var(--text); }
.calc-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-surface);
}
.calc-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.calc-section-head b:first-child { color: var(--accent-light); }
.calc-section-desc { color: var(--text-muted); font-size: 9px; flex: 1; }
.calc-rows {
  display: flex;
  flex-direction: column;
  padding: 3px 10px;
}
.calc-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.7fr 0.9fr;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 10px;
}
.calc-row:last-child { border-bottom: none; }
.calc-label { color: var(--text); }
.calc-formula { color: var(--text-muted); font-size: 9px; word-break: break-word; }
.calc-value { text-align: right; font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.calc-clause { text-align: right; color: var(--accent-light); font-size: 9px; opacity: 0.85; }
.calc-verdict {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}
.calc-verdict.ok { background: rgba(74,222,128,0.12); color: #4ade80; }
.calc-verdict.fail { background: rgba(239,68,68,0.12); color: #dc2626; }
.strip-design-note {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 2px;
}

/* Detailed calculation review */
.strip-review-layer {
  border-top: 1px dashed var(--border);
  padding-top: 4px;
  margin-top: 4px;
}
.strip-review-layer:first-child { border-top: none; padding-top: 2px; margin-top: 0; }
.strip-review-layer-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 3px;
}
.strip-review-layer-head b:first-child { color: var(--accent-light); }
.strip-review-desc {
  font-size: 9px;
  color: var(--text-muted);
  flex: 1;
}
.strip-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  font-size: 10px;
}
.strip-review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--border);
}
.strip-review-row i {
  font-style: normal;
  color: var(--text-muted);
  font-size: 9px;
  flex-shrink: 0;
}
.strip-review-row b {
  font-weight: 600;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}
.strip-review-crack-head {
  margin-top: 5px;
  border-top: 1px dashed var(--border);
  padding-top: 4px;
}
.strip-review-crack-head b:first-child { color: var(--accent-light); }
.strip-review-note {
  grid-column: 1 / -1;
}
.strip-review-note b {
  font-weight: 400;
  font-size: 9px;
  color: var(--text-muted);
  text-align: left;
  word-break: normal;
}

.tbtn.active:hover { background: var(--bg-selected); }

/* Light chrome: pressed tools carry a stronger accent fill and border so the
   active state is unmistakable against the pale panels. */
body.light .tbtn.active {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-panel));
  border-color: var(--accent);
}
body.light .tbtn.active:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg-panel));
  border-color: var(--accent);
}

#slabOptionsBar {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
  min-height: 26px;
}

#slabOptionsBar:empty { display: none; }

.sopt-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sopt-panel.hidden { display: none; }

.sopt-label {
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
}

.sopt-hint { font-size: 11px; color: var(--text-muted); font-style: italic; }

.sopt-panel label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sopt-panel input,
.sopt-panel select {
  width: 64px;
  padding: 2px 5px;
  font-size: 11px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.sopt-panel select { width: auto; }

.fbtn {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  opacity: 0.45;
}

.fbtn:hover { opacity: 0.7; background: var(--bg-hover); }

.fbtn.on {
  opacity: 1;
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-active);
}

.tool-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
  white-space: nowrap;
}

.tool-btn:hover {
  background-color: var(--bg-active);
  border-color: var(--border-strong);
  color: var(--text-heading);
}

.tool-btn:active {
  transform: translateY(1px);
}

.tool-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tool-btn.active {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 65%);
  color: #fff;
  border-color: var(--accent-light);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.tool-btn.active:hover {
  background-color: var(--accent-light);
}

/* Filled accent action - every modal's primary (Apply, Save, Create, Run). */
.tool-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tool-btn-primary:hover {
  background-color: var(--accent-light);
  border-color: var(--accent-light);
  color: #fff;
}

/* Destructive action: quiet outline, red only on hover. */
.tool-btn-danger {
  color: var(--danger);
  border-color: var(--border);
}

.tool-btn-danger:hover {
  background-color: var(--bg-active);
  border-color: var(--danger);
  color: var(--danger);
}

/* Destructive action that fills (permanent deletes). */
.tool-btn-danger-solid {
  background-color: var(--danger);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 65%);
  border-color: var(--danger);
  color: #fff;
}

.tool-btn-danger-solid:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
  filter: brightness(1.08);
}

/* Compact button for modal toolbars and inline row actions. */
.tool-btn-sm {
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 5px;
}

/* Quiet link-like action (e.g. Save as Default). */
.tool-btn-ghost {
  background: transparent;
  background-image: none;
  border-color: transparent;
  color: var(--text-muted);
}

.tool-btn-ghost:hover {
  background-color: var(--bg-hover);
  border-color: transparent;
  color: var(--text);
}

/* "Add ..." affordance: dashed outline that lights up in the accent. */
.tool-btn-add {
  background: transparent;
  background-image: none;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

.tool-btn-add:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent-light);
}

/* === Form controls (Elements2D-3d-proto style) === */
input[type="text"],
input[type="number"],
select,
textarea {
  font-family: var(--font-sans);
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-channel, 106,166,255), 0.12);
}
textarea { height: auto; }
input[type="range"] { height: auto; padding: 0; }
/* Selects must not inherit the text-input vertical padding: on a 28px
   control it clips the option text. */
select.form-input,
select.form-select {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 26px;
}
/* Number spinners overlay the text edge in narrow inputs: always clear
   space for them so the value never slides underneath the arrows. */
input[type="number"] {
  padding-right: 24px;
  font-variant-numeric: tabular-nums;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.5;
  height: 18px;
}

.btn-modal-primary {
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-modal-primary:hover { background: var(--accent-sec); }
.btn-modal-danger {
  padding: 9px 16px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-modal-danger:hover { background: color-mix(in srgb, var(--danger) 82%, #000); }
.btn-modal-secondary {
  padding: 9px 16px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-modal-secondary:hover {
  background: var(--bg-surface);
  border-color: var(--text-muted);
}

#viewport {
  flex: 1;
  background: linear-gradient(180deg, #273047 0%, #1a2234 100%);
  position: relative;
  overflow: hidden;
  transition: background var(--transition);
}

#axis-legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  pointer-events: none;
  z-index: 10;
  opacity: 0.9;
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius);
  padding: 4px;
  backdrop-filter: blur(4px);
}

/* Colour map legend. Desktop keeps the classic vertical ramp at the
   bottom-right of the viewport; small screens flip it to a horizontal strip
   under the toolbar (see the mobile section at the end of this file).
   --legend-dir flips the ramp with the layout: JS writes the gradients as
   linear-gradient(var(--legend-dir, to top), ...). */
#colorLegend {
  position: absolute;
  bottom: 30px;
  right: 10px;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
}
#colorLegend #legendTitle { font-weight: 700; margin-bottom: 3px; text-align: center; }
#colorLegend #legendMax { text-align: center; font-weight: 600; }
#colorLegend #legendBar { width: 12px; height: 100px; border-radius: 2px; margin: 1px auto; }
#colorLegend #legendMin { text-align: center; }
#colorLegend #legendNote {
  max-width: 150px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  text-align: center;
  line-height: 1.3;
}

/* === Split view: second plot pane (own camera + plot mode) === */
#viewport-container.split #viewport { flex: 1 1 50%; min-width: 0; }
#viewport-secondary {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-viewport);
  border-left: 1px solid var(--border);
}
#viewport-secondary.hidden { display: none; }
#viewport-secondary canvas { display: block; }
/* Active plot-pick target in split view. */
#viewport.pane-active,
#viewport-secondary.pane-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Mirrored colour legend inside the compare pane. */
#compareLegend {
  position: absolute;
  bottom: 30px;
  right: 10px;
  z-index: 10;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
}
#compareLegend .cl-title { font-weight: 700; margin-bottom: 3px; text-align: center; }
#compareLegend .cl-max { text-align: center; font-weight: 600; }
#compareLegend .cl-bar { width: 12px; height: 100px; border-radius: 2px; margin: 1px auto; }
#compareLegend .cl-min { text-align: center; }

#axis-legend svg {
  display: block;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

body.light #axis-legend {
  background: rgba(255,255,255,0.45);
  box-shadow: var(--shadow-sm);
}

#statusbar .status-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}
.status-sep {
  width: 1px;
  align-self: stretch;
  margin: 5px 2px;
  background: var(--border);
  flex-shrink: 0;
}
.status-right {
  display: flex;
  align-items: stretch;
  height: 100%;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
/* AutoCAD-style status toggles: icon + label, pressed state shown with an
   accent underline. JS writes state text into .sb-label; .is-on/.is-off
   are managed by setStatusBtn in main.js. */
.status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 10px;
  height: 100%;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  user-select: none;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.status-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.status-btn:hover {
  color: var(--text);
  background: rgba(127,127,127,0.08);
}
body.light .status-btn:hover {
  background: rgba(0,0,0,0.06);
}
.status-btn .sb-label {
  font-variant-numeric: tabular-nums;
}
.status-btn.is-on {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.status-btn.is-on svg {
  color: var(--accent);
}
.status-btn.is-off {
  color: var(--text-muted);
  opacity: 0.75;
}
.status-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.status-code .sb-label {
  font-weight: 700;
}
.status-units {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0 12px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border-right: 1px solid var(--border);
  height: 100%;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.status-units svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.status-units:hover {
  color: var(--text);
  background: rgba(127,127,127,0.08);
}
.status-opacity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 10px;
  border-right: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.status-opacity svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.status-opacity input[type="range"] {
  width: 72px;
  height: 3px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  background: transparent;
}
.status-opacity #plateOpacityVal,
.status-opacity #plotTextVal {
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#sidebar {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  height: 100vh;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  /* Visible so the resize handle and the account card can overhang when the
     panel is dragged narrow; the tree scrolls inside .sidebar-content. */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

#sidebar-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 6;
  background: transparent;
}

#sidebar-resizer::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 42px;
  border-radius: 1px;
  background: var(--border);
  transition: background var(--transition), height 0.12s;
}

#sidebar-resizer:hover::after,
#sidebar.resizing #sidebar-resizer::after {
  background: var(--accent);
  height: 72px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 40px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent-light);
}

.sidebar-brand-icon {
  width: 22px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* Expand tab: floats at the left edge only while the nav pane is collapsed,
   so there is always a visible way to bring the panel back. */
#sidebar-expand {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 27;
  width: 22px;
  height: 54px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}
#sidebar-expand:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Collapse arrow in the navigation header (the toolbar toggle re-opens). */
.sidebar-collapse-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.sidebar-collapse-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.proj-panel-header {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.proj-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px 8px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* The panel is drag-resizable: let the buttons wrap instead of spilling
     over the viewport once the panel is dragged narrow. */
  flex-wrap: wrap;
}

.proj-toolbar-btn {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.proj-toolbar-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border);
}

.proj-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.proj-toolbar-btn svg {
  width: 16px;
  height: 16px;
}

.proj-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 5px;
}

#statusbar {
  flex-shrink: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0 0 0 10px;
  font-size: 11px;
  color: var(--text-muted);
  gap: 0;
  user-select: none;
  height: 30px;
  min-height: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#statusbar::-webkit-scrollbar {
  display: none;
}

#statusMsg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed-width pointer readout so the footer layout (and the snap buttons
   next to it) never shift as the values change. */
#footerCoords {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 148px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
#footerCoords svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--accent);
}
#footerCoords .sb-coords {
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow viewports: keep every control reachable - icons only, bar scrolls. */
@media (max-width: 1100px) {
  .status-btn .sb-label,
  .status-units .sb-label,
  .status-opacity .sb-cap {
    display: none;
  }
  .status-btn {
    padding: 0 8px;
  }
  #footerCoords {
    min-width: 128px;
  }
  .status-opacity input[type="range"] {
    width: 52px;
  }
}

#statusbar .status-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
}

.panel {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tree-section { margin-bottom: 2px; }
.tree-header {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-heading);
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.tree-header:hover { background: var(--bg-hover); color: var(--text); }
.tree-header .proj-tree-chevron { width: 14px; height: 14px; transform: rotate(90deg); }
.tree-header.collapsed .proj-tree-chevron { transform: none; }
.tree-header .proj-tree-icon { color: var(--text-muted); }
.tree-header .proj-tree-icon svg { width: 13px; height: 13px; }
.tree-children {
  padding-left: 10px;
  border-left: 1px solid var(--border);
  margin-left: 12px;
  padding-bottom: 2px;
}
.tree-item {
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
  min-height: 24px;
}
.tree-item:hover { background: var(--bg-hover); color: var(--text); }
.tree-item .proj-tree-icon { width: 14px; height: 14px; }
.tree-item .proj-tree-icon svg { width: 12px; height: 12px; }
.tree-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
}
.tree-item-btn:hover { color: #ef4444; }
.tree-item:hover .tree-item-btn { opacity: 1; }
.tree-item .tree-item-btn { opacity: 0; }
.tree-item:hover .tree-item-btn { opacity: 1; }
.empty-msg { color: var(--text-muted); font-size: 11px; padding: 6px; font-style: italic; opacity: 0.7; }
.tree-meta { display: block; font-size: 10px; color: var(--text-muted); opacity: 0.7; }

/* ---- Project file tree (proto-style) ---- */
#project-tree { padding: 4px 0; user-select: none; min-height: 100%; }
.pj-empty {
  color: var(--text-muted);
  font-size: 11px;
  padding: 14px 8px;
  text-align: center;
  line-height: 1.6;
  opacity: 0.75;
}
.proj-tree-node {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 0; cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s;
  position: relative;
  white-space: nowrap;
  min-height: 26px;
  border-radius: var(--radius);
  margin: 0 4px;
}
.proj-tree-node:hover { background: var(--bg-hover); color: var(--text); }
.proj-tree-node.selected {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}
.proj-tree-node.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.proj-tree-node.selected.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.proj-tree-node.dragging { opacity: 0.5; }
body.tree-dragging { cursor: grabbing; }
body.tree-dragging .proj-tree-node { cursor: grabbing; }
.proj-tree-node.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.proj-tree-node.drop-target { z-index: 1; }
.proj-tree-node.drop-inside {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  outline: 1px dashed var(--accent);
}
.proj-tree-node.drop-before::after,
.proj-tree-node.drop-after::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}
.proj-tree-node.drop-before::after { top: -1px; }
.proj-tree-node.drop-after::after { bottom: -1px; }
.proj-tree-node.editing .proj-node-label { display: none; }
.proj-tree-chevron {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 10px;
  transition: transform 0.15s;
}
.proj-tree-chevron.expanded { transform: rotate(90deg); }
.proj-tree-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.proj-tree-icon svg { width: 14px; height: 14px; }
.proj-tree-icon.is-folder { color: var(--accent-sec, var(--accent)); }
.proj-node-active-dot {
  width: 7px; height: 7px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}
.proj-node-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; line-height: 1.3;
}
.proj-node-badge {
  font-size: 10px; color: var(--text-muted);
  margin-left: auto; padding: 0 6px; flex-shrink: 0;
}
.proj-tree-children {
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.proj-tree-children.collapsed { max-height: 0 !important; }
#project-tree.drag-root {
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)) padding-box,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 8px, transparent 8px 16px) border-box;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 8px;
}
.proj-rename-input {
  flex: 1; font-size: 12px; font-family: inherit;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 3px; padding: 1px 4px; color: var(--text);
  outline: none; min-width: 0;
}

/* Context menu (project tree) */
.proj-ctx-menu {
  position: fixed; z-index: 9999;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius)); box-shadow: var(--shadow-md);
  padding: 4px 0; min-width: 160px;
}
.proj-ctx-menu.hidden { display: none; }
.proj-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 12px;
  color: var(--text-muted); transition: background 0.1s;
}
.proj-ctx-item:hover { background: var(--bg-hover); color: var(--text); }
.proj-ctx-item.danger { color: #ef4444; }
.proj-ctx-item.danger:hover { background: rgba(239,68,68,0.1); }
.proj-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
.inspector-item {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.inspector-item:last-child { border-bottom: none; }
.inspector-label {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inspector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.inspector-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.inspector-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 14px;
}
.inspector-input {
  width: 72px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.inspector-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.inspector-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: 11px;
  transition: border-color var(--transition);
}
.inspector-select:focus {
  outline: none;
  border-color: var(--focus);
}
.inspector-meta {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.inspector-node-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.node-link {
  cursor: pointer;
  color: var(--accent-sec);
  font-weight: 600;
  font-size: 11px;
  padding: 1px 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.node-link:hover { background: var(--bg-hover); color: var(--accent-light); }

.elem-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-plate  { background: rgba(74,122,204,0.18); color: var(--accent-sec); }
.badge-beam   { background: rgba(74,204,128,0.18); color: var(--success); }
.badge-mass   { background: rgba(214,90,90,0.18); color: var(--danger); }
.badge-spring { background: rgba(204,160,64,0.18); color: #cca040; }
.add-btn {
  display: block;
  width: 100%;
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  padding: 5px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  margin-top: 6px;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.add-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--accent-light);
}
.prop-summary {
  color: var(--text-muted);
  font-size: 10px;
  margin-left: auto;
}
.tree-item.selected {
  color: var(--text);
  background: var(--bg-selected);
  border-left: 2px solid var(--accent-light);
  padding-left: 4px;
}
.tree-selbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tree-selbar span { flex: 1; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 420px;
  max-width: 720px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.modal-header {
  padding: 14px 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.modal-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-surface);
}

/* ---- Slab design modal ---- */
.slab-design-modal { min-width: 560px; max-width: 920px; }
.slab-design-body { display: flex; flex-direction: column; gap: 10px; }
.slab-design-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
/* Capped tracks, left-aligned: inputs stay compact instead of stretching. */
.slab-design-grid {
  display: grid;
  gap: 10px 14px;
  align-items: end;
  justify-content: start;
}
.slab-design-grid.cols-2 { grid-template-columns: repeat(2, minmax(180px, 260px)); }
.slab-design-grid.cols-3 { grid-template-columns: repeat(3, minmax(150px, 200px)); }
.slab-design-grid.cols-4 { grid-template-columns: repeat(4, minmax(130px, 170px)); }
@media (max-width: 720px) {
  .slab-design-grid.cols-2,
  .slab-design-grid.cols-3,
  .slab-design-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.slab-design-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.slab-design-field > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slab-design-field .u-sym { font-weight: 400; opacity: 0.8; }
.slab-design-field .form-input { width: 100%; height: 30px; }
/* Right-aligned numbers with clearance so the value never runs under the
   native spinner arrows. */
.slab-design-field input[type="number"].form-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 26px;
}
.slab-design-hint {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 8px 0 0;
}
.slab-design-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.slab-design-code {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-light);
  cursor: help;
}
/* Provided-reinforcement table: layer, bar, spacing, bars/m, live As/d. */
.slab-prov-head,
.slab-prov-row {
  display: grid;
  grid-template-columns: 108px minmax(96px, 130px) minmax(78px, 96px) minmax(66px, 82px) minmax(84px, 100px) minmax(52px, 64px);
  gap: 10px;
  align-items: end;
  justify-content: start;
}
.slab-prov-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.slab-prov-head span:nth-child(5),
.slab-prov-head span:nth-child(6) { text-align: right; }
.slab-prov-row { margin-top: 8px; }
.slab-prov-row .form-input { width: 100%; height: 30px; }
.slab-prov-row input[type="number"].form-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 22px;
}
.slab-prov-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 7px;
  white-space: nowrap;
}
.slab-prov-as,
.slab-prov-d {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-bottom: 7px;
  white-space: nowrap;
}
.slab-prov-d { color: var(--text-muted); }
/* Section sketch */
.slab-sketch svg { display: block; width: 100%; height: auto; }
.slab-sketch-concrete { fill: var(--bg-input); stroke: var(--border); stroke-width: 1; }
.slab-sketch-bar-top { fill: var(--accent); }
.slab-sketch-bar-bot { fill: #34d399; }
.slab-sketch-dim { stroke: var(--text-muted); stroke-width: 1; opacity: 0.6; }
.slab-sketch-label { fill: var(--text-muted); font-size: 11px; font-weight: 600; }
.slab-sketch-label-top { fill: var(--accent-light); }
.slab-sketch-label-bot { fill: #34d399; }
.slab-design-results { display: flex; flex-direction: column; gap: 8px; }
.slab-design-verdict {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.slab-design-verdict.pass { color: #22c55e; background: rgba(34, 197, 94, 0.08); border-left-color: #22c55e; }
.slab-design-verdict.fail { color: #f87171; background: rgba(248, 113, 113, 0.08); border-left-color: #f87171; }
.slab-design-verdict-note { font-weight: 400; font-size: 11px; color: var(--text-muted); }
.slab-design-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.slab-design-table th {
  text-align: right;
  color: var(--text-muted);
  font-weight: 600;
  padding: 5px 8px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.slab-design-table th:first-child { text-align: left; border-top-left-radius: 4px; }
.slab-design-table th:last-child { border-top-right-radius: 4px; }
.slab-design-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.slab-design-table td:first-child { text-align: left; font-weight: 600; color: var(--text-muted); }
.slab-design-table tbody tr:hover td { background: var(--bg-hover); }
.slab-design-table tr.slab-design-bad td { color: #f87171; background: rgba(248, 113, 113, 0.06); }
.slab-design-min {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: 1px;
}
.slab-design-shear {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.slab-design-shear.slab-design-bad {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.06);
}
.slab-design-note-line { font-size: 10px; color: var(--text-muted); line-height: 1.5; }
.slab-design-error { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.project-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.project-table th {
  text-align: left;
  color: var(--text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.project-row {
  cursor: pointer;
  transition: background var(--transition);
}
.project-row:hover td {
  background: var(--bg-hover);
}
.project-row td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.del-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  border-radius: 4px;
  transition: background var(--transition), transform var(--transition);
}
.del-btn:hover { background: rgba(214,90,90,0.12); transform: scale(1.1); }

.form-row {
  margin-bottom: 12px;
}
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.form-select {
  appearance: auto;
}
.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* === Modal density matches the properties pane ===
   Modal forms use the same compact scale as the inspector: 11px muted
   labels, 12px inputs, tight rows - and modal footers use the compact
   button scale, so dialogs read as one family with the properties pane. */
.modal-body {
  font-size: 12px;
}
.modal-body .form-row {
  margin-bottom: 8px;
}
.modal-body .form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.modal-body .form-input,
.modal-body .form-select,
.modal-body select.form-input {
  font-size: 12px;
  padding: 4px 8px;
}
.modal-body .form-input[type="number"] {
  padding-right: 24px;
}
/* Selects inside modals keep the compact 12px text without clipped glyphs:
   the shared form-input padding must not apply to the select box itself. */
.modal-body select.form-input,
.modal-body .form-select {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 24px;
}

/* === Export modal: one compact row per file format === */
.export-choice-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal .tool-btn.export-choice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 5px 9px;
}
.export-choice-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-heading);
}
.export-choice-ext {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
}

/* === Modal buttons match the properties pane ===
   Dialog buttons use the same flat, compact styling as the properties
   Apply/Delete/Deselect buttons: no gradients, 11px, flat accent fill for
   the primary action and flat danger fill for deletes. */
.modal .tool-btn {
  background-image: none;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 5px;
}
.modal .tool-btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.modal .tool-btn-primary:hover {
  background-color: var(--accent-light);
  border-color: var(--accent-light);
  color: #fff;
}
.modal .tool-btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.modal .tool-btn-danger:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
  filter: brightness(1.08);
}
.modal .tool-btn.active {
  background-image: none;
}

/* === Compact mesh modals === */#meshModal .modal,
#slabMeshModal .modal {
  width: 400px;
  min-width: 0;
  max-width: calc(100vw - 32px);
}
#meshModal .modal-body,
#slabMeshModal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#meshModal .form-row,
#slabMeshModal .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
#meshModal .form-row .form-input,
#slabMeshModal .form-row .form-input {
  width: 130px;
  flex-shrink: 0;
}
.mesh-modal-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* === Tool options modal (small, draggable, stays open while placing) === */
#toolOptionsModal .modal {
  top: 118px;
  left: 328px;
  width: 312px;
  min-width: 0;
  max-width: calc(100vw - 32px);
}
#toolOptionsModal .sopt-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 10px;
}
#toolOptionsModal .sopt-panel.hidden {
  display: none;
}
.toolopt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
  white-space: normal;
}
#toolOptionsModal .toolopt-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.toolopt-field-wide {
  grid-column: 1 / -1;
}
/* Slab shape editor modal hints. */
.slab-edit-hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}
.slab-edit-hint b { color: var(--text); }
.slab-edit-plus {
  display: inline-block;
  color: #c084fc;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  vertical-align: -1px;
}
.slab-edit-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
/* Checkbox rows in the tool options panels (e.g. wall base support scope). */
.toolopt-check-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.toolopt-check-line input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}
.toolopt-field .form-input {
  width: 100%;
}
.toolopt-field .u-sym {
  color: var(--text-muted);
  font-size: 10px;
}
#toolOptionsModal .sopt-hint {
  grid-column: 1 / -1;
}
.toolopt-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* === Analysis modal (redesigned) === */
#analysisModal {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  /* The draggable-panel system positions the modal body via fixed left/top;
     do NOT flex-center it or the drag offsets fight the transform. */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}
#analysisModal .modal {
  position: fixed;
  top: 80px;
  left: 280px;
  margin: 0;
}
.analysis-modal {
  width: 720px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  color-scheme: dark;
}
body.light .analysis-modal {
  color-scheme: light;
}
.analysis-modal-head {
  align-items: flex-start;
}
.results-pane-section.results-stale {
  color: #fbbf24;
}
.results-stale-label {
  float: right;
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
/* Method tab strip - connected tabs (Elastic / Cracked / Long-term) where
   the active tab merges into the card body below instead of floating as a
   separate pill button. */
.analysis-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
}
.analysis-tab {
  padding: 7px 16px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.analysis-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.analysis-tab.active {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text);
}
.analysis-tab.is-locked {
  opacity: 0.55;
}
.analysis-tab.is-locked::after {
  content: " 🔒";
  font-size: 10px;
}
.strip-tab.is-locked {
  opacity: 0.55;
}
.strip-tab.is-locked::after {
  content: " 🔒";
  font-size: 10px;
}
.analysis-plan-notice {
  margin: 0 2px 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--icon-orange);
  background: color-mix(in srgb, var(--icon-orange) 14%, transparent);
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
}
.analysis-tab-desc {
  margin: 2px 0 10px;
}
.analysis-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.analysis-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.analysis-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 14px;
  overflow-y: auto;
  align-items: start;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.analysis-body::-webkit-scrollbar {
  width: 8px;
}
.analysis-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.analysis-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.analysis-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: sticky;
  top: 0;
}
.analysis-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-surface);
}
.analysis-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.analysis-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.analysis-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.analysis-method {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  cursor: pointer;
  background: var(--bg-panel);
  transition: border-color 0.15s, background 0.15s;
}
.analysis-method:hover {
  border-color: var(--accent);
}
.analysis-method:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
}
.analysis-method input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.analysis-method-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.analysis-method-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.analysis-method-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.analysis-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.analysis-check:hover {
  border-color: var(--border);
  background: var(--bg-panel);
}
.analysis-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.analysis-check > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.analysis-check strong {
  color: var(--text);
  font-weight: 600;
}
.analysis-check-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.analysis-subpanel {
  border: 1px solid var(--border);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--bg-panel);
}
.analysis-subpanel-text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.analysis-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 8px;
}
.analysis-field-row:last-child {
  margin-bottom: 0;
}
.analysis-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.analysis-field .form-input {
  width: 110px;
}
.analysis-field-row > .ltopts-field {
  flex: 1 1 140px;
  min-width: 0;
}
.analysis-summary-card {
  background: var(--bg-panel);
}
.analysis-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 12px;
}
.analysis-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.analysis-facts > div:last-child {
  border-bottom: none;
}
.analysis-facts dt {
  color: var(--text-muted);
  flex-shrink: 0;
}
.analysis-facts dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analysis-banner {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--bg-surface);
}
.analysis-banner[data-state="running"] { border-left-color: #2563eb; }
.analysis-banner[data-state="success"] { border-left-color: #16a34a; }
.analysis-banner[data-state="error"] { border-left-color: #dc3545; }
.analysis-banner-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.analysis-banner[data-state="running"] .analysis-banner-title { color: #2563eb; }
.analysis-banner[data-state="success"] .analysis-banner-title { color: #16a34a; }
.analysis-banner[data-state="error"] .analysis-banner-title { color: #dc3545; }
.analysis-banner-detail {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.analysis-banner-detail:empty {
  display: none;
}
.analysis-spinner {
  text-align: center;
  padding: 10px 0;
}
.analysis-spinner-ring {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border);
  border-top-color: #2563eb;
  border-radius: 50%;
  margin: 0 auto;
  animation: analysis-spin 0.8s linear infinite;
}
@keyframes analysis-spin {
  to { transform: rotate(360deg); }
}
.analysis-results-title {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 8px;
}
.analysis-error {
  padding: 10px 12px;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 6px;
  color: #dc3545;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.analysis-run-btn {
  background-color: #16a34a;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 65%);
  color: #fff;
  border-color: #16a34a;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 6px;
}
.analysis-run-btn:hover:not(:disabled) {
  background-color: #15803d;
  border-color: #15803d;
  color: #fff;
}
.analysis-run-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.analysis-load-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .analysis-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .analysis-side {
    position: static;
  }
  .analysis-methods {
    grid-template-columns: 1fr;
  }
}
.analysis-load-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.analysis-load-toolbar .form-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.analysis-load-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
}
.analysis-load-group + .analysis-load-group {
  border-top: 1px solid var(--border);
}
.analysis-load-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 7px 10px 5px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.analysis-load-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.analysis-load-row:last-child {
  border-bottom: none;
}
.analysis-load-row:hover {
  background: var(--bg-hover);
}
.analysis-load-row.is-checked {
  background: var(--bg-selected);
}
.analysis-load-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 3px 0 0;
  flex-shrink: 0;
}
.analysis-load-body {
  flex: 1;
  min-width: 0;
}
.analysis-load-pick {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.analysis-load-defl {
  flex-shrink: 0;
  align-self: center;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 10px;
}
.analysis-load-defl:hover,
.analysis-load-defl:focus {
  color: var(--text);
}
.analysis-load-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.analysis-load-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.analysis-load-row.is-combo .analysis-load-kind {
  color: #ffffff;
  background: #1e3a8a;
}
.analysis-load-row.is-case .analysis-load-kind {
  color: var(--text-heading);
  background: var(--bg-input);
  border: 1px solid var(--border);
}
.analysis-load-name {
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-load-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.analysis-load-sw {
  font-size: 9px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  flex-shrink: 0;
}
.analysis-load-count {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.analysis-load-empty {
  color: var(--text-muted);
  font-size: 11px;
  padding: 10px;
}
.analysis-staged-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}
.stage-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg-surface);
}
.stage-card-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.stage-card-head .form-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
}
.stage-age-label {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.stage-card-head input[type="number"] {
  /* Wide enough for 5-digit day counts with the spinner clearance: the
     global 28px right padding plus arrows used to strangle this 64px box. */
  width: 92px;
  flex: none;
}
.stage-load-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 6px 0 4px;
}
.stage-load-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
}
.stage-load-row input {
  width: 12px;
  height: 12px;
  margin: 2px 0 0;
  flex-shrink: 0;
}
.stage-sw-hint {
  margin-top: 4px;
  font-size: 10px;
  color: #f59e0b;
}
.ltopts-override-row {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr);
  gap: 6px 10px;
  align-items: center;
  margin-top: 10px;
}
.ltopts-override-row .form-input {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  max-width: 96px;
}
.ltopts-override-row .form-input:disabled {
  opacity: 0.55;
}

/* === Analysis modal - long-term options === */
.ltopts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--bg-panel);
}
.ltopts-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--bg-surface);
}
.ltopts-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ltopts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.ltopts-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ltopts-label {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}
.ltopts-unit {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.75;
  margin-left: auto;
}
.ltopts-field .form-input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: var(--radius);
}
.ltopts-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ltopts-result {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 10px;
}
.ltopts-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}
.ltopts-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.ltopts-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
}

/* === Results charts modal === */
.results-charts-modal {
  width: 640px;
  min-width: 520px;
  max-width: 780px;
}
.chart-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.chart-tab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.chart-tab:disabled {
  opacity: 0.4;
  cursor: default;
}
.chart-panel {
  width: 100%;
}
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.chart-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}
.chart-leg i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.chart-svg-host {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.chart-svg-host svg {
  display: block;
  width: 100%;
  height: auto;
}
.chart-grid {
  stroke: var(--border);
  stroke-opacity: 0.55;
  stroke-width: 1;
}
.chart-axis {
  stroke: var(--border-strong);
  stroke-width: 1.2;
}
.chart-tick {
  fill: var(--text-muted);
  font-size: 10px;
}
.chart-axis-label {
  fill: var(--text-muted);
  font-size: 10px;
}
.chart-marker {
  stroke: #a78bfa;
  stroke-dasharray: 4 3;
  stroke-width: 1;
  opacity: 0.7;
}
.chart-marker-label {
  fill: #c4b5fd;
  font-size: 9px;
}
body.light .chart-marker-label { fill: #6d28d9; }
.chart-ref {
  stroke: #f87171;
  stroke-dasharray: 5 4;
  stroke-width: 1.1;
}
.chart-ref-label {
  fill: #f87171;
  font-size: 9px;
}
.chart-hair {
  stroke: var(--text);
  stroke-opacity: 0.35;
  stroke-width: 1;
  pointer-events: none;
}
.chart-hover-dot { pointer-events: none; }
.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 140px;
  max-width: 220px;
  padding: 7px 9px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  line-height: 1.45;
}
.chart-tooltip .tip-t {
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--text-heading);
}
.chart-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 10px;
}
.chart-stats th,
.chart-stats td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.chart-stats th {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chart-stats td { color: var(--text); }
.chart-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.chart-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
.chart-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 40px 12px;
}

/* === Modal resize grip (bottom-right) === */
.modal-resizer {
  width: 14px;
  height: 14px;
  margin-left: auto;
  align-self: center;
  cursor: nwse-resize;
  opacity: 0.55;
  background:
    linear-gradient(135deg, transparent 0 42%, var(--text-muted) 42% 50%, transparent 50% 68%, var(--text-muted) 68% 76%, transparent 76%);
  transition: opacity var(--transition);
}
.modal-resizer:hover { opacity: 1; }
/* Panels without a footer (properties pane): pin the grip to the corner. */
.modal > .modal-resizer {
  position: absolute;
  right: 6px;
  bottom: 6px;
  margin: 0;
  z-index: 5;
}

.shortcut-kbd {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-muted);
  box-shadow: 0 1px 0 var(--border);
}

@media (max-width: 800px) {
  #sidebar {
    display: none;
  }
  #toolbar {
    overflow-x: auto;
    gap: 4px;
  }
  .toolbar-divider, .toolbar-section-label { display: none; }
  .toolbar-section { justify-content: center; }
  .tool-btn { font-size: 11px; padding: 6px 8px; }
}

/* === SVG icons in toolbar === */
.tbtn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* === Sidebar tabs === */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.sidebar-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.sidebar-tab:hover {
  color: var(--text);
}
.sidebar-tab.active {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
}
.sidebar-content {
  flex: 1;
  overflow-y: auto;
}
.sidebar-content.hidden {
  display: none;
}

/* === Selection marquee === */
.selection-marquee {
  position: absolute;
  border: 1.5px solid var(--accent-light);
  background: rgba(37,99,235,0.06);
  pointer-events: none;
  z-index: 20;
}
.selection-marquee.hidden {
  display: none;
}

/* === Coord tooltip === */
.coord-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.72);
  color: #ccc;
  font-size: 10px;
  font-family: monospace;
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 25;
  white-space: nowrap;
  transform: translate(12px, 12px);
}
.coord-tooltip.hidden {
  display: none;
}
.coord-tooltip.diagram-tooltip {
  background: rgba(0,0,0,0.85);
  color: #0ff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0,255,255,0.3);
}
body.light .coord-tooltip.diagram-tooltip {
  background: rgba(255,255,255,0.9);
  color: #111;
  border: 1px solid rgba(0,0,0,0.2);
}

/* === Inspector panel === */
.inspector-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.inspector-field-label {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 60px;
}
.inspector-field-value {
  font-size: 12px;
  color: var(--text);
  flex: 1;
}
.inspector-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 3px;
  width: 100%;
}
.inspector-select {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 3px;
}
.inspector-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.inspector-close:hover {
  color: var(--text);
}

/* === Bulk (multi-selection) properties editor === */
.bulk-sel-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.bulk-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
  appearance: none;
  transition: background var(--transition), border-color var(--transition);
}
.bulk-sel-chip:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.bulk-sel-chip:active { transform: translateY(1px); }
.bulk-sel-chip b {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bulk-sel-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.bulk-sel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.inspector-action-btn {
  font-size: 11px;
  padding: 5px 10px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}
.inspector-action-btn:hover { background-color: var(--bg-active); border-color: var(--border-strong); }
.inspector-action-btn:active { transform: translateY(1px); }
.inspector-action-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.inspector-icon-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  line-height: 1;
  transition: all var(--transition);
  flex-shrink: 0;
}
.inspector-icon-btn:hover { background: var(--bg-hover); border-color: var(--focus); }

/* === Fixity buttons === */
.fixity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.fixity-label {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 55px;
  font-weight: 600;
}
.fixity-btns {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
}
.fixity-btn {
  font-size: 9px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition);
  min-width: 32px;
  text-align: center;
}
.fixity-btn.fixed {
  background: var(--bg-input);
  color: var(--text);
}
.fixity-btn.fixed:hover {
  border-color: var(--focus);
}
.fixity-btn.released {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border-color: rgba(239,68,68,0.4);
}
.fixity-btn.released:hover {
  background: rgba(239,68,68,0.25);
}

/* === Settings tabs === */
.settings-modal {
  width: 800px;
  max-width: min(800px, calc(100vw - 32px));
}
.settings-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 0;
  background: var(--bg-surface);
}
.settings-tab {
  flex: 1;
  text-align: center;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--text-muted);
  padding: 7px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.settings-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.settings-tab.active {
  color: var(--accent-light);
  background: var(--bg-panel);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg-panel);
}
.settings-tab-content.hidden {
  display: none;
}

/* === Settings body layout === */
.settings-body {
  padding: 14px 18px 16px;
}
.settings-tab-content {
  max-width: none;
  margin: 0;
  padding-top: 0;
}
.settings-group {
  margin-bottom: 12px;
}
.settings-group:last-child {
  margin-bottom: 2px;
}
.settings-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  column-gap: 28px;
}
/* A lone row spans the full grid so its control lines up with the right edge. */
.settings-grid > .settings-row:only-child {
  grid-column: 1 / -1;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  min-height: 28px;
  min-width: 0;
}
.settings-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-row .form-input,
.settings-row select.form-input {
  width: 172px;
  min-width: 0;
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  flex: 0 0 auto;
}
.settings-row input[type="number"].form-input {
  width: 110px;
  min-width: 0;
  text-align: right;
}
.settings-color {
  width: 46px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  cursor: pointer;
}
.settings-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 172px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}
.settings-range-wrap .form-range {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.settings-val {
  min-width: 30px;
  text-align: right;
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.settings-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 2px;
  line-height: 1.5;
}
/* Compact colour swatch grid: label + picker per cell, two-three per row. */
.settings-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 2px 24px;
}
.settings-swatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
/* Footer hierarchy: destructive left, primary right, quiet in between. */
.settings-footer {
  justify-content: flex-end;
  gap: 8px;
}
.settings-footer-spacer { flex: 1; }

/* === Toggle switch === */
.switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-strong);
  border-radius: 20px;
  transition: background var(--transition);
}
.switch-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
}
.switch input:checked + .switch-slider {
  background: var(--accent);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(16px);
}

/* === Range slider === */
.form-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  margin: 0;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}
.form-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}
.range-value {
  display: inline-block;
  min-width: 28px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}

/* === Modal close button === */
.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.modal-close-btn:hover {
  color: var(--text);
}

/* === BSM (Beam Section) Modal === */
.bsm-cols {
  display: flex;
  flex: 1;
  height: 520px;
  overflow: hidden;
}
.bsm-col {
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow-y: auto;
}
.bsm-col-library {
  flex: 1;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.bsm-col-project {
  flex: 0 0 320px;
  min-width: 280px;
}
.bsm-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.bsm-col-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bsm-filter-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.bsm-filter-row { display: flex; flex-direction: column; gap: 2px; }
.bsm-filter-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.bsm-filter-select, .bsm-filter-input {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.bsm-filter-input:focus, .bsm-filter-select:focus { outline: none; border-color: var(--focus); }

.bsm-library-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  margin-bottom: 8px;
  min-height: 0;
}
.bsm-project-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 8px;
  min-height: 0;
}
.bsm-project-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}
.bsm-lib-item {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.bsm-lib-item:hover { background: var(--bg-hover); }
.bsm-lib-item--selected { background: rgba(37,99,235,0.12) !important; }
.bsm-lib-name { font-size: 12px; font-weight: 600; color: var(--text); }
.bsm-lib-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

.bsm-proj-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  gap: 6px;
  transition: border-color var(--transition);
}
.bsm-proj-item--active { border-color: var(--focus); }
.bsm-proj-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.bsm-proj-radio { margin: 0; accent-color: var(--accent); }
.bsm-proj-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.bsm-proj-num { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.bsm-proj-info { flex: 1; min-width: 0; }
.bsm-proj-name { font-size: 12px; font-weight: 600; color: var(--text); display: block; }
.bsm-proj-type { font-size: 10px; color: var(--text-muted); display: block; }
.bsm-orient-row { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.bsm-orient-label { font-size: 10px; color: var(--text-muted); }
.bsm-orient-select { font-size: 10px; padding: 1px 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 3px; color: var(--text); }
.bsm-proj-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.bsm-btn-edit, .bsm-btn-delete {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text);
}
.bsm-btn-delete { color: var(--danger); }

.bsm-computed-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.bsm-computed-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.bsm-computed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.bsm-computed-row { display: flex; justify-content: space-between; }
.bsm-computed-label { font-size: 10px; color: var(--text-muted); }
.bsm-computed-val { font-size: 11px; color: var(--text); font-weight: 600; }
.bsm-proj-footer { display: flex; gap: 6px; }
.btn-add-to-project--disabled { opacity: 0.5; cursor: not-allowed; }

/* === Custom Section Sub-Modal === */
.csm-form-grid .form-row { margin-bottom: 10px; }

/* === Materials Modal === */
.mat-modal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}
/* Design-code picker in the material-library header: compact, flat, and
   vertically centred (the shared form-input padding clipped its text). */
#smatCodeSelect {
  width: 180px;
  height: 26px;
  flex: 0 0 auto;
  padding: 0 8px;
  line-height: 24px;
  font-size: 12px;
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-input);
}
.mat-library-sidebar {
  width: 200px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 12px;
  overflow-y: auto;
}
.mat-library-section { }
.mat-library-header { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.mat-library-list { display: flex; flex-direction: column; gap: 2px; }
.mat-library-item {
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--transition);
}
.mat-library-item:hover { background: var(--bg-hover); }
.mat-library-item.active { background: rgba(37,99,235,0.12); font-weight: 600; }
.mat-item-name { flex: 1; }
/* Scope badge on custom library entries: project file vs global library. */
.mat-item-scope {
  flex: none;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
}
.mat-item-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.mat-library-item:hover .mat-item-delete { opacity: 1; }
.mat-editor-panel { flex: 1; padding-left: 0; }
.mat-type-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
/* Strip properties editor tabs (Geometry / Reinforcement / Limits / Section). */
.strip-tabs {
  display: flex;
  gap: 2px;
  margin: 2px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.strip-tab {
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 2px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -7px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-tab:hover { color: var(--text); }
.strip-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.strip-tab-panel { padding-top: 2px; }
/* Current reinforcement assignment at the top of the Strip Results modal. */
.strip-reinf-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 11px;
}
.strip-reinf-summary b { color: var(--text); font-weight: 700; }
.strip-reinf-summary-name { color: var(--text-heading); font-weight: 600; }
.strip-reinf-summary-empty { color: var(--text-muted); font-style: italic; }
.mat-tab {
  font-size: 11px;
  padding: 4px 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.mat-tab:hover { color: var(--text); background: var(--bg-hover); }
.mat-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-channel), 0.08); }
.mat-props-table-container { margin-bottom: 12px; }
.mat-props-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mat-props-table th { text-align: left; padding: 6px 8px; color: var(--text-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.mat-props-table td { padding: 5px 8px; color: var(--text); }
.prop-label { color: var(--text-muted); }
.prop-unit { color: var(--text-muted); font-size: 11px; }
.prop-input {
  width: 100%;
  padding: 4px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
}
.prop-input:focus { outline: none; border-color: var(--focus); }
.mat-derived-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.mat-section-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.mat-derived-grid { display: flex; gap: 24px; }
.mat-derived-item { display: flex; flex-direction: column; gap: 2px; }
.derived-label { font-size: 10px; color: var(--text-muted); }
.derived-value { font-size: 13px; color: var(--text); font-weight: 600; }
.mat-save-section { }
.mat-save-row { display: flex; gap: 8px; align-items: center; }
.mat-save-input { font-size: 12px !important; }

/* === Floating Draggable Panels === */
.floating-panel {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.22);
  z-index: 9999;
  font-size: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.floating-panel.hidden { display: none !important; }
.floating-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  cursor: move;
  user-select: none;
  border-radius: 10px 10px 0 0;
}
.floating-panel-header:active { cursor: grabbing; }
.floating-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.01em;
}
.floating-panel-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.floating-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.floating-panel-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}
.floating-panel-footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  background: var(--bg-surface);
}
.strip-design-panel {
  top: 40px;
  left: 520px;
  width: 680px;
  max-width: min(680px, calc(100vw - 24px));
}
.strip-design-panel .floating-panel-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.strip-design-panel .strip-design-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strip-props-card {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
}
.strip-props-card-title {
  color: var(--text-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.strip-props-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.strip-props-summary-grid b { color: var(--text-heading); font-weight: 600; }
.strip-props-status { font-style: normal; font-weight: 700; }
.strip-props-status.ok { color: #4ade80; }
.strip-props-status.fail { color: var(--danger); }
.strip-reinf-open {
  width: 100%;
  margin-top: 9px;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.strip-copy-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.strip-copy-row .inspector-select { min-width: 0; flex: 1; }
.strip-copy-row .inspector-action-btn { flex: 0 0 auto; }
.strip-props-hint {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}
.strip-plan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.strip-plan-actions .strip-btn {
  width: 100%;
  font-size: 10px;
}
.strip-reinf-modal {
  width: 680px;
  min-width: 520px;
  max-width: min(760px, calc(100vw - 24px));
}
.strip-reinf-modal .modal-body {
  max-height: min(72vh, 680px);
}
.strip-reinf-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
}
.strip-reinf-toolbar-label {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.strip-reinf-toolbar select {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 11px;
}
.strip-reinf-section {
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-surface);
}
.strip-reinf-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-heading);
  font-size: 12px;
  font-weight: 700;
}
.strip-reinf-section-note {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
}
.strip-reinf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
}
.strip-reinf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
}
.strip-reinf-field input,
.strip-reinf-field select {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
}
.strip-reinf-field input:focus,
.strip-reinf-field select:focus,
.strip-reinf-toolbar select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.strip-reinf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.strip-reinf-table th,
.strip-reinf-table td {
  padding: 6px 5px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.strip-reinf-table th {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.strip-reinf-table select,
.strip-reinf-table input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 5px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 11px;
}
.strip-reinf-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  display: block;
  margin: auto;
}
.strip-reinf-check {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}
.strip-reinf-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-size: 11px;
}
.strip-reinf-result {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}
.strip-reinf-result b { color: var(--text); }
.strip-reinf-result.ok b { color: #4ade80; }
.strip-reinf-result.fail b { color: var(--danger); }
.strip-reinf-footnote {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .strip-reinf-modal { min-width: 0; width: calc(100vw - 24px); }
  .strip-reinf-grid,
  .strip-reinf-results { grid-template-columns: 1fr; }
  .strip-reinf-table { font-size: 10px; }
  .strip-reinf-table th,
  .strip-reinf-table td { padding: 5px 3px; }
}
.strip-design-panel .strip-design-item {
  margin: 0;
  padding: 8px;
  background: var(--bg-surface);
}
.strip-rebar-section {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
}
.strip-rebar-title {
  color: var(--text-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
/* Compact editor grid: inline label + fixed-width control so values do not
   stretch across the panel. */
.strip-rebar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 3px 16px;
}
.strip-rebar-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 10px;
}
.strip-rebar-field input,
.strip-rebar-field select {
  width: 104px;
  flex: 0 0 auto;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 11px;
}
.strip-rebar-help {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 3px;
}
.strip-anchor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.strip-anchor-table th,
.strip-anchor-table td {
  padding: 4px 3px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.strip-anchor-table th { color: var(--text-muted); font-weight: 600; }
.strip-anchor-table input,
.strip-anchor-table select {
  max-width: 76px;
  height: 24px;
  padding: 0 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 10px;
}
.strip-anchor-status {
  font-weight: 700;
  white-space: nowrap;
}
.strip-anchor-status.ok { color: #4ade80; }
.strip-anchor-status.fail { color: var(--danger); }
.strip-continuity-note {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
  margin-top: 5px;
}

/* Collapsible strip cards: compact header row + expandable editor with the
   serviceability limits and the size-to-limits recommendation table. */
.strip-design-item-head { flex-wrap: wrap; }
.strip-design-item.is-open { border-color: var(--accent); }
.strip-design-item.is-open .strip-design-item-head { margin-bottom: 8px; }
.strip-disclose {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.strip-disclose:hover { color: var(--text); border-color: var(--text-muted); }
.strip-provided {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 10px;
}
.strip-reinf-chips { display: flex; flex: 0 0 auto; gap: 4px; }
.strip-chip {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.strip-reinf-actions { display: flex; gap: 6px; margin-top: 8px; }
.strip-reinf-actions .strip-btn { flex: 1 1 auto; }
.strip-rec { overflow-x: auto; }
.strip-rec .strip-rebar-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.strip-rec-note {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.strip-rec-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.strip-rec-table th,
.strip-rec-table td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.strip-rec-table th {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.strip-rec-current { color: var(--text-muted); }
.strip-rec-rec { color: var(--text-heading); font-weight: 700; white-space: nowrap; }
.strip-rec-util { display: block; color: var(--text-muted); font-size: 9px; font-weight: 400; }
.strip-rec-detail { white-space: nowrap; }
.strip-rec-detail small { color: var(--text-muted); }
.strip-rec-none { color: var(--text-muted); }
.strip-apply-btn { flex: 0 0 auto; padding: 3px 9px; font-size: 10px; }
.strip-advanced { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); }
.strip-advanced > summary {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.strip-advanced[open] > summary { color: var(--text-heading); }
.strip-advanced .strip-rebar-grid { margin-top: 7px; }
.fp-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--bg-surface);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}
.fp-btn:hover { background-color: var(--bg-active); border-color: var(--border-strong); }
.fp-btn:active { transform: translateY(1px); }
.fp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.fp-btn-apply {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fp-btn-apply:hover { background-color: var(--accent-light); border-color: var(--accent-light); color: #fff; }

/* === Right-hand side nav panel (strip results) === */
/* === Properties modal (contextual editor for the current selection) === */
#propertiesModalPanel {
  left: auto;
  right: 24px;
  top: 72px;
  width: 340px;
  min-width: 300px;
  max-width: min(440px, 94vw);
  max-height: min(78vh, 760px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
#propertiesModalPanel .modal-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#propertiesPane:not(.hidden) #propertiesModalPanel {
  animation: properties-pop 0.14s ease-out;
}
@keyframes properties-pop {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
#propertiesBody {
  padding: 14px 16px;
  font-size: 12px;
}
/* The renderer's panels already carry their own padding; flatten them inside
   the modal so the body reads as one continuous form. */
#propertiesBody .panel {
  padding: 0;
  border-bottom: none;
}
#propertiesBody .panel-title {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}
/* Aligned label / control rows instead of the old ragged flex layout. */
#propertiesBody .inspector-field-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
#propertiesBody .inspector-field-label {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
}
#propertiesBody .inspector-field-value {
  font-variant-numeric: tabular-nums;
}
#propertiesBody .inspector-input,
#propertiesBody .inspector-select {
  width: 100%;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
}
#propertiesBody .inspector-input:focus,
#propertiesBody .inspector-select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(var(--accent-channel), 0.18);
}
#propertiesBody .inspector-action-btn {
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 11px;
}
#propertiesBody .inspector-action-btn:hover { border-color: var(--border-strong); }
#propertiesBody .bulk-sel-chip { font-size: 10px; }
#propertiesBody .bulk-sel-hint { margin-bottom: 10px; }

/* Action footer: separated from the fields and pinned to the modal bottom. */
#propertiesBody .properties-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#propertiesBody .pf-btn-apply {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
#propertiesBody .pf-btn-delete {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
#propertiesBody .pf-btn-deselect { flex: 1; }
.fp-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.fp-btn-danger:hover { background: rgba(214,90,90,0.12); }
.fp-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fp-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fp-field select,
.fp-field input[type="number"] {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
}
.fp-field select:focus,
.fp-field input[type="number"]:focus { border-color: var(--focus); }
.fp-field input:disabled,
.fp-field select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* === Constraints Panel === */
.constraints-panel { resize: none; }
.constraints-body { gap: 8px; display: flex; flex-direction: column; }
.constraint-mode-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 8px;
}
.constraint-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.constraint-summary {
  padding: 7px 10px;
  border: 1px solid rgba(37,99,235,0.28);
  border-radius: var(--radius);
  background: rgba(37,99,235,0.06);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.constraint-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 10px;
}
.constraint-section.hidden { display: none; }
.constraint-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.constraint-section-head small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Make existing modals draggable by converting overlay to non-blocking */
.modal-overlay {
  background: transparent !important;
  pointer-events: none;
  backdrop-filter: none !important;
  padding: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.modal-overlay .modal {
  pointer-events: auto;
  position: fixed;
  top: 80px;
  left: 280px;
  margin: 0;
}
.modal-overlay .modal-header {
  cursor: move;
  user-select: none;
}
.modal-overlay .modal-header:active { cursor: grabbing; }

.load-cases-table th,
.load-cases-table td,
.load-combinations-table th,
.load-combinations-table td {
  border-bottom: 1px solid var(--border);
}

.hidden {
  display: none !important;
}

/* === Settings modal - Fluent / Windows 11 restyle ========================= */
#settings-modal {
  background: rgba(0, 0, 0, 0.45);
}
#settingsModalPanel {
  width: 880px;
  max-width: min(880px, calc(100vw - 32px));
  height: min(800px, 90vh);
  max-height: min(800px, 90vh);
  border-radius: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
#settingsModalPanel .modal-header {
  padding: 16px 22px 10px;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  border-bottom: none;
}
#settingsModalPanel .settings-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px 12px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
#settingsModalPanel .settings-tabs::-webkit-scrollbar { display: none; }
#settingsModalPanel .settings-tab {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  margin: 0;
}
#settingsModalPanel .settings-tab:hover { background: var(--bg-hover); color: var(--text); }
#settingsModalPanel .settings-tab.active {
  background: var(--bg-active);
  border-color: var(--border);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
#settingsModalPanel .settings-body {
  padding: 16px 20px 20px;
  background: transparent;
}
/* Win11 settings cards: grouped rows in a rounded card with hairline rows. */
#settingsModalPanel .settings-group {
  margin: 0 0 14px;
  padding: 0 16px 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
#settingsModalPanel .settings-group-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  padding: 12px 0 6px;
  margin: 0;
  border-bottom: none;
}
#settingsModalPanel .settings-grid {
  display: block;
  column-gap: 0;
}
#settingsModalPanel .settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
#settingsModalPanel .settings-grid > .settings-row:first-child { border-top: none; }
#settingsModalPanel .settings-label {
  font-size: 12.5px;
  font-weight: 400;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Fluent TextBox / ComboBox: subtle fill, rounded, accent underline on focus. */
#settingsModalPanel .form-input,
#settingsModalPanel .form-select {
  width: 190px;
  height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  background: var(--bg-input);
  font-size: 12.5px;
  color: var(--text);
  transition: border-color 0.12s ease, background 0.12s ease;
}
#settingsModalPanel input[type="number"].form-input {
  width: 120px;
  text-align: right;
  padding-right: 30px;   /* keep digits clear of the spinner arrows */
}
/* The bar dropdown is an input-sized control: same width as the number
   boxes around it, so the Design tab reads as one tidy column. */
#settingsModalPanel #setting-design-bar {
  width: 120px;
  text-align: right;
}
#settingsModalPanel .form-input:hover,
#settingsModalPanel .form-select:hover { background: var(--bg-hover); }
#settingsModalPanel .form-input:focus,
#settingsModalPanel .form-select:focus {
  border-color: var(--border-strong);
  border-bottom-color: var(--accent-light, var(--accent));
  box-shadow: none;
  background: var(--bg-input);
}
#settingsModalPanel .settings-range-wrap { width: 190px; }
#settingsModalPanel .settings-color {
  width: 48px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
}
/* One entity colour per row: the swatch label sits left of its own picker,
   so no colour is ever shown without its name. */
#settingsModalPanel .settings-swatches { display: block; gap: 0; }
#settingsModalPanel .settings-swatch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
#settingsModalPanel .settings-swatch:first-child { border-top: none; }
#settingsModalPanel .settings-hint {
  margin: 8px 0 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
/* Fluent toggle: pill track, round knob. */
#settingsModalPanel .switch { width: 40px; height: 20px; }
#settingsModalPanel .switch-slider { background: var(--border-strong); border: 1px solid var(--border-strong); }
#settingsModalPanel .switch-slider::before { width: 12px; height: 12px; left: 3px; bottom: 3px; }
#settingsModalPanel .switch input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); }
#settingsModalPanel .switch input:checked + .switch-slider::before { transform: translateX(22px); }
#settingsModalPanel .settings-body::-webkit-scrollbar { width: 8px; }
#settingsModalPanel .settings-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* === Account settings modal: shared tab chrome + device manager ========== */
#userSettingsModal .settings-tab-content { display: flex; flex-direction: column; gap: 8px; }
#userSettingsModal .settings-tabs { overflow-x: auto; scrollbar-width: none; }
#userSettingsModal .settings-tabs::-webkit-scrollbar { display: none; }
#userSettingsModal .settings-tab { flex: 1 1 auto; min-width: max-content; white-space: nowrap; }
#userSettingsModal .settings-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.acct-device-list { display: flex; flex-direction: column; }
.acct-device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.acct-device-row:first-child { border-top: none; }
.acct-device-info { flex: 1; min-width: 0; }
.acct-device-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.acct-device-meta { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.acct-device-badge {
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-light);
}
.acct-device-badge.muted { color: var(--text-muted); }
.acct-device-row.revoked .acct-device-name { color: var(--text-muted); }
.acct-device-row .tool-btn { flex: 0 0 auto; }
.acct-device-row .tool-btn:disabled { opacity: 0.5; cursor: default; }

/* Result-mode glyph buttons are monochrome text labels; the plot legend and
   the model carry the colour. */
#results-pane .results-pane-section { color: var(--text-muted); }

/* === Mobile and tablet responsiveness ==================================== */

/* Backdrop behind the off-canvas navigation drawer; shown only on small
   screens while the drawer is open (adjacent-sibling selector, no JS). */
#sidebar-backdrop { display: none; }

/* Floating edge tab that re-opens the results pane on touch layouts. */
#results-expand { display: none; }

@media (max-width: 900px) {
  /* Dynamic viewport height: mobile browser chrome must not clip the app. */
  #app { height: 100vh; height: 100dvh; }

  /* --- Projects / model tree: off-canvas drawer from the left ------------ */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 320px) !important;
    z-index: 80;
    display: flex;
    transform: translateX(0);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
  }
  #sidebar.hidden {
    display: flex !important;
    transform: translateX(-102%);
    pointer-events: none;
    box-shadow: none;
  }
  #sidebar-resizer { display: none; }

  #sidebar:not(.hidden) + #sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(0, 0, 0, 0.45);
  }

  #sidebar-expand {
    top: 50%;
    bottom: auto;
    width: 32px;
    height: 64px;
    font-size: 17px;
    z-index: 40;
  }

  /* --- Results pane: docked strip below the canvas ---------------------- */
  /* The model stays visible while the result controls scroll sideways
     through each results section, like an extra toolbar. */
  #viewport-container { flex-direction: column; }
  #viewport { min-height: 0; }

  #results-pane {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    height: auto;
    width: 100% !important;
    max-height: 44vh;
    max-height: 44dvh;
    flex: 0 0 auto;
    z-index: 26;
    padding-top: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    box-shadow: none;
  }
  #results-pane-resizer { display: none; }

  #results-pane .results-pane-header {
    padding: 2px 8px;
    font-size: 8px;
  }
  #results-pane #results-pane-close {
    font-size: 16px;
    padding: 2px 8px;
  }

  #results-pane .results-pane-buttons {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  #results-pane .results-pane-buttons::-webkit-scrollbar { display: none; }

  #results-pane .results-pane-section {
    width: auto;
    flex: 0 0 auto;
    border-bottom: 0;
    border-left: 1px solid var(--border);
    padding: 0 8px;
    text-align: left;
  }
  #results-pane .results-pane-section:first-child {
    border-left: 0;
    padding-left: 2px;
  }
  #results-pane .results-pane-row {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  #results-pane .results-pane-slider {
    flex: 0 0 auto;
    width: 170px;
    padding: 0;
  }
  #results-pane .results-slider-label { min-width: 0; text-align: left; }
  #results-pane .results-pane-info { display: none; }

  #deflectionModeSelect,
  #results-pane #resultSetSelect {
    width: auto !important;
    max-width: 170px;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
  }

  /* --- Contextual panels dock above the footer -------------------------- */
  /* The properties pane and the strip panels live inside the viewport
     container. On mobile their overlays become absolute (not fixed) and the
     panels dock above the status bar, so the canvas stays visible and native
     <select> controls keep working on iOS/WebKit. */
  #propertiesPane,
  #stripResultsPanel,
  #stripCalcModal {
    position: absolute !important;
    inset: 0 !important;
  }
  #propertiesPane .modal,
  #stripResultsPanel .modal,
  #stripCalcModal .modal {
    position: absolute !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: 52vh !important;
    max-height: 52dvh !important;
    margin: 0 !important;
    overflow-y: auto;
  }
  #propertiesPane .modal-body,
  #stripResultsPanel .modal-body,
  #stripCalcModal .modal-body {
    max-height: none !important;
    overflow-y: auto;
  }
  /* Body-level chart modal: fixed, but a low sheet above the status bar. */
  #resultsChartModal .modal {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 44px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: 52vh !important;
    max-height: 52dvh !important;
    margin: 0 !important;
    overflow-y: auto;
  }
  #resultsChartModal .modal-body {
    max-height: none !important;
    overflow-y: auto;
  }
  #stripDesignPanel {
    bottom: 44px !important;
    max-height: 52vh;
    max-height: 52dvh;
  }

  /* Strip results: a compact horizontal strip that scrolls sideways through
     the strip picker, checks and each diagram category, like the results
     dock - not a tall modal covering the canvas. */
  #stripResultsPanel .modal {
    max-height: 34vh !important;
    max-height: 34dvh !important;
  }
  #stripResultsPanel .modal-body {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  #stripResultsPanel .modal-body::-webkit-scrollbar { display: none; }
  #stripResultsPanel .modal-body > * { flex: 0 0 auto; }
  #stripResultsPanel .strip-select-field {
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
  }
  #stripResultsPanel .strip-select-field select { width: auto; max-width: 150px; }
  #stripResultsPanel .strip-reinf-summary {
    max-width: 200px;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 4px 8px;
    font-size: 10px;
  }
  #stripResultsPanel .strip-check-list {
    flex-direction: row !important;
    gap: 4px;
  }
  #stripResultsPanel .strip-check-row { width: auto; padding: 4px 8px; }
  #stripResultsPanel .strip-check-empty { white-space: nowrap; }
  #stripResultsPanel .strip-modal-section {
    padding: 0 6px;
    border-left: 1px solid var(--border);
    align-self: center;
  }
  #stripResultsPanel .strip-modal-divider { display: none; }
  #stripResultsPanel .strip-cat {
    padding: 5px 8px;
    font-size: 10px;
    white-space: nowrap;
  }
  #stripResultsPanel .strip-sub { padding: 0; flex-wrap: nowrap; }
  #stripResultsPanel .strip-btn { padding: 6px 10px; white-space: nowrap; }

  /* --- Colour legend: condensed horizontal ramp under the toolbar ------- */
  #colorLegend {
    --legend-dir: to right;
    top: 50px;
    bottom: auto;
    left: 6px;
    right: 6px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
  }
  #colorLegend #legendTitle {
    order: 0;
    margin: 0;
    font-size: 9px;
    white-space: nowrap;
  }
  #colorLegend #legendMin {
    order: 1;
    min-width: 38px;
    font-size: 9px;
    text-align: left;
  }
  #colorLegend #legendBar {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    height: 10px;
    margin: 0;
  }
  #colorLegend #legendMax {
    order: 3;
    min-width: 38px;
    font-size: 9px;
    text-align: right;
  }
  #colorLegend #legendNote { display: none; }

  #results-expand {
    display: flex;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 27;
    width: 32px;
    height: 64px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.12);
  }

  /* --- Toolbar: single swipeable row, finger-sized targets -------------- */
  #toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 5px 8px;
  }
  #toolbar::-webkit-scrollbar { display: none; }
  .toolbar-divider,
  .toolbar-section-label { display: none; }
  .toolbar-section {
    flex-direction: row;
    justify-content: center;
    flex: 0 0 auto;
  }
  .toolbar-section-buttons { flex-wrap: nowrap; }
  .tbtn {
    width: 38px;
    height: 36px;
    flex: 0 0 auto;
  }
  .tbtn svg { width: 19px; height: 19px; }

  /* These carry inline desktop sizes; match the other toolbar buttons. */
  #btnSlabRun,
  #btnManageLoadCases,
  #btnManageLoadCombos {
    width: 38px !important;
    height: 36px !important;
  }

  /* The toolbar scrolls horizontally, which clips absolutely positioned
     children. Lift the filter menu out of the scroll container as a fixed
     panel below the toolbar so it is visible and tappable on touch. */
  .filter-dropdown-menu {
    position: fixed;
    top: 91px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: min(60dvh, 320px);
    overflow-y: auto;
  }
  .filter-dd-item {
    padding: 9px 10px;
    font-size: 13px;
  }

  #slabOptionsBar {
    top: 47px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  #slabOptionsBar::-webkit-scrollbar { display: none; }
  .sopt-panel { flex-wrap: nowrap; }

  /* --- Split view stacks vertically ------------------------------------- */
  #viewport-container.split { flex-direction: column; }
  #viewport-container.split #viewport,
  #viewport-secondary { flex: 1 1 50%; min-height: 0; }
  #viewport-secondary { border-left: 0; border-top: 1px solid var(--border); }

  /* --- Sheets pane docks below the canvas --------------------------------- */
  #sheets-pane {
    width: 100% !important;
    border-left: 0;
    border-top: 1px solid var(--border);
    flex: 0 0 42vh;
    flex: 0 0 42dvh;
    min-height: 220px;
  }
  #sheets-pane-resizer { display: none; }

  /* --- Floating panels become bottom sheets ----------------------------- */
  .floating-panel {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 72vh;
    max-height: 72dvh;
  }

  /* --- Status bar: keep every control reachable ------------------------- */
  #statusbar { height: 36px; min-height: 36px; }
  #footerCoords { min-width: 118px; }

  /* Larger touch targets in the drawer's project toolbar. */
  .proj-toolbar-btn { width: 36px; height: 36px; }
  .proj-toolbar-btn svg { width: 18px; height: 18px; }

  /* Hover-only tree actions must be reachable on touch devices. */
  .tree-item .tree-item-btn { opacity: 1; }
}

/* Phones: modals take the whole screen so their desktop min-widths and
   pinned top/left positions cannot overflow off-screen. */
@media (max-width: 700px) {
  /* Header: make room for the load-case selector - drop the sign-in
     nag text (the button stays) and keep the select compact. */
  #content-header { padding: 0 8px; }
  #content-header h2 { font-size: 12px; }
  #content-header #resultSetSelect {
    flex: 0 1 auto;
    width: auto;
    max-width: 46vw;
    min-width: 0;
    margin: 0 6px;
  }
  #authStatus { display: none; }

  .modal-overlay .modal,
  #analysisModal .modal,
  #settingsModalPanel {
    position: fixed !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-y: auto;
  }

  /* Tool options is a non-blocking floating editor on desktop; on phones it
     docks as a low bottom sheet so the canvas above stays usable for drawing. */
  #toolOptionsModal .modal {
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 46px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: 34vh !important;
    max-height: 34dvh !important;
    overflow-y: auto;
  }
}

/* === Number spinner clearance (global, wins over component paddings) ===
   Component rules like `.strip-reinf-table input[type="number"] { padding:
   0 5px }` reset the right padding, letting the value slide under the
   native spinner arrows. Force clearance everywhere and keep the arrows
   faint until hover/focus so the value always reads cleanly. */
input[type="number"],
input[type="number"].form-input,
.modal-body input[type="number"].form-input,
.slab-design-field input[type="number"].form-input,
.slab-prov-row input[type="number"].form-input,
.strip-reinf-field input[type="number"],
.strip-reinf-table input[type="number"],
.strip-rebar-field input[type="number"],
.settings-row input[type="number"],
#settingsModalPanel input[type="number"],
.stage-card-head input[type="number"],
.fp-field input[type="number"] {
  padding-right: 28px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.4;
  height: 16px;
  /* Chrome lays the spinner inside the field against the value, ignoring
     padding-right - a left margin is what actually separates the two. */
  margin-left: 10px;
  transition: opacity 0.12s ease;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button {
  opacity: 0.9;
}

/* ---- Google Sheets modal ---- */
.google-sheets-modal { min-width: 520px; max-width: 720px; }
.google-sheets-body { display: flex; flex-direction: column; gap: 10px; }
.google-sheets-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.google-sheets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
}
.google-sheets-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.google-sheets-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.google-sheets-row .strip-btn { flex: 0 0 auto; padding: 4px 10px; }
.google-sheets-remove { color: var(--text-muted); }
.google-sheets-remove:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.google-sheets-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 7px;
}
.google-sheets-add {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.google-sheets-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.google-sheets-field .form-input { min-width: 150px; }
.google-sheets-field-url { flex: 1; }
.google-sheets-field-url .form-input { width: 100%; min-width: 240px; }
.google-sheets-add .strip-btn { flex: 0 0 auto; }
.google-sheets-status { min-height: 16px; font-size: 12px; color: var(--text-muted); }
.google-sheets-row.is-viewing { border-color: var(--accent); }
.gs-provider {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.gs-provider-excel { color: #4ec38a; border-color: #4ec38a; }
.google-sheets-view { background: var(--accent); border-color: var(--accent); color: #fff; }
.google-sheets-view:hover { background-color: var(--accent-light); border-color: var(--accent-light); color: #fff; }

/* ---- Sheets split-screen pane (docked beside the model canvas) ---- */
#sheets-pane {
  position: relative;
  width: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 26;
}
#sheets-pane.hidden { display: none; }
#sheets-pane-resizer {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 6;
  background: transparent;
}
#sheets-pane-resizer::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 42px;
  border-radius: 1px;
  background: var(--border);
  transition: background var(--transition), height 0.12s;
}
#sheets-pane-resizer:hover::after,
#sheets-pane.resizing #sheets-pane-resizer::after {
  background: var(--accent);
  height: 72px;
}
.sheets-pane-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.sheets-pane-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
#sheetsPaneSelect {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  padding: 3px 6px;
}
.sheets-pane-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.sheets-pane-mode {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sheets-pane-mode .sheets-mode-btn {
  width: auto;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
}
.sheets-pane-subbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.sheets-pane-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
}
#sheetsPaneBody {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg-viewport);
}
#sheetsPaneFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
#sheetsPaneEmpty,
#sheetsPaneBlocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
#sheetsPaneEmpty.hidden,
#sheetsPaneBlocked.hidden { display: none; }
.sheets-pane-blocked-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.sheets-pane-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 320px;
}