/* ==========================================================================
   css/style.css
   Forksheet CMOS SCM Generator - dark engineering / TCAD interface

   LAYOUT SYSTEM (one system, no duplicates)
   --------------------------------------------------------------------------
   The window is a fixed-height flex column:

     #titlebar                       compact, never wraps (ellipsis instead)
     #page            flex row       the work area
       #controls      .sidebar       left  - parameters, own scroll, resizable
       #resizer-left  .resizer       drag handle
       #main-col                     centre - preview (grows) + SCM (bounded)
       #resizer-right .resizer       drag handle
       #inspector     .sidebar       right - region info, own scroll, resizable
     #foot

   Desktop widths live in --sidebar-l / --sidebar-r, written by generator.js.
   Below 1000px the two sidebars become off-canvas drawers over a scrim and
   the centre column takes the whole width; the same CSS variables are simply
   ignored, so there is only ever one layout implementation in play.
   ========================================================================== */

:root {
  --bg-0:     #0f1319;
  --bg-1:     #161b22;
  --bg-2:     #1d232c;
  --bg-3:     #262e38;
  --line:     #2a323d;
  --line-2:   #38424f;
  --fg:       #dbe2ea;
  --fg-dim:   #8b95a3;
  --accent:   #4c8dff;
  --accent-2: #2b6ad4;
  --ok:       #35c46a;
  --warn:     #e8a33d;
  --err:      #ef4d4d;
  --radius:   6px;
  --mono: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;

  /* layout metrics - the drag handles write the two sidebar widths */
  --sidebar-l: 380px;
  --sidebar-r: 260px;
  --header-h:  46px;          /* measured at runtime by generator.js */
  --gap:       12px;
  --pad:       12px;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  height: 100dvh;             /* dvh tracks the Android URL bar correctly */
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  overflow: hidden;           /* panels scroll, the page itself does not */
  -webkit-text-size-adjust: 100%;
}

/* fallback for browsers without dvh */
@supports not (height: 100dvh) {
  body { height: 100vh; }
}

h2 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; }
.dim { color: var(--fg-dim); }

/* ==========================================================================
   Header
   Single row, never wraps. Long text is clipped with an ellipsis rather than
   pushed onto a second line, which is what used to make the bar grow on a
   1366px laptop.
   ========================================================================== */
#titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 7px 14px;
  min-height: 46px;
  background: linear-gradient(180deg, #1d242c, #151a21);
  border-bottom: 1px solid var(--line);
  z-index: 70;
}

.brand {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand .dot {
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
}

.subtitle {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--line-2);
  padding-left: 12px;
}

.header-right {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy {
  font-size: 11px;
  color: var(--ok);
  border: 1px solid rgba(53,196,106,.35);
  background: rgba(53,196,106,.08);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* panel toggle buttons, left and right */
.icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  min-height: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-3); border-color: var(--accent); }
.icon-btn[aria-expanded="false"] { color: var(--fg-dim); }
.icon-btn .ico {
  position: relative;
  display: block;
  width: 15px; height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .9;
}
.icon-btn .ico::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: currentColor;
}
#btn-toggle-controls  .ico::before { left: 0; }
#btn-toggle-inspector .ico::before { right: 0; }

/* ==========================================================================
   Work area
   ========================================================================== */
#page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: var(--pad);
  gap: 0;
  overflow: hidden;           /* no page-level horizontal overflow, ever */
}

/* ------------------------------------------------------------- sidebars */
.sidebar {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;           /* the WHOLE sidebar scrolls, as one area */
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#controls  { width: var(--sidebar-l); }
#inspector {
  width: var(--sidebar-r);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* padding lives on the inner wrapper so it does not fight the scrollbar */
.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 100%;
}
#controls .sidebar-inner  { padding-right: 8px; }
#inspector .sidebar-inner { gap: 0; }

/* desktop: the header buttons collapse a whole column away */
body.hide-left  #controls,  body.hide-left  #resizer-left  { display: none; }
body.hide-right #inspector, body.hide-right #resizer-right { display: none; }

/* the drawer header only exists in drawer (mobile) mode */
.drawer-head { display: none; }

/* ------------------------------------------------------------- resizers */
.resizer {
  flex: 0 0 12px;
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  background: transparent;
  border-radius: 3px;
  transition: background .12s;
  touch-action: none;
}
.resizer::after {                 /* the visible grip */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 54px;
  border-radius: 3px;
  background: var(--line-2);
  transition: background .12s, height .12s;
}
.resizer::before {                /* widened hit area, invisible */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -3px; right: -3px;
}
.resizer:hover,
.resizer:focus-visible { background: rgba(76,141,255,.10); outline: none; }
.resizer:hover::after,
.resizer:focus-visible::after { background: var(--accent); height: 96px; }
.resizer.dragging { background: rgba(76,141,255,.16); }
.resizer.dragging::after { background: var(--accent); height: 100%; }

/* while dragging, stop the canvas swallowing pointer events */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing canvas,
body.resizing iframe { pointer-events: none; }

/* ==========================================================================
   Centre column: preview grows, generated SCM is bounded underneath
   ========================================================================== */
#main-col {
  flex: 1 1 auto;
  min-width: 0;               /* critical: lets the column actually shrink */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow-y: auto;           /* safety net: scroll rather than clip */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------- cards */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.section-head h2 {
  text-transform: uppercase;
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 1px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-head:hover h2 { color: var(--fg); }
.chev {
  margin-left: auto;
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--fg-dim);
  transition: transform .15s;
}
/* a header that only labels its card; nothing to click, nothing to fold */
.section-head.static { cursor: default; }
.section-head.static:hover h2 { color: var(--fg-dim); }
.section-head.static .chev { display: none; }

/* the Generate card carries the primary actions, so it gets a little more
   presence than the panels around it */
.actions-card { border-color: var(--line-2); }
.actions-card .section-head { background: var(--bg-3); }
.actions-card .section-head h2 { color: var(--fg); }

.card.collapsed .chev { transform: rotate(-90deg); }
.card.collapsed .section-body { display: none; }

.section-body { padding: 12px; }
.note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* ------------------------------------------------------------- fields */
.field { margin-bottom: 13px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--fg);
}
.field small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* input + unit sit on one flex row, so the unit can never push the input
   out of the card and no calc() guess about its width is needed */
.ctl {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ctl > input,
.ctl > select { flex: 1 1 auto; min-width: 0; }
.ctl > .unit {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--fg-dim);
  font-family: var(--mono);
}

/* a checkbox that acts as the field's own control, not a sub-option */
.chk-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0;
}
/* one sweep variable: a tick to include it, then its value list */
.sweep-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}
.sweep-row .chk-field { font-family: var(--mono); font-size: 11.5px; }
.sweep-row input[type="text"] { min-width: 0; }
.sweep-row:has(input[type="checkbox"]:not(:checked)) input[type="text"] { opacity: .45; }

.chk-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
}

.field.compact { margin-bottom: 10px; }
.field.compact label { font-size: 11px; }

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

input[type="number"], input[type="text"], select, textarea {
  width: 100%;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(76,141,255,.18);
}
input:disabled { opacity: .45; cursor: not-allowed; }
select { font-family: var(--sans); }

input[type="range"] { width: 96px; min-width: 70px; accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }

/* ------------------------------------------------------------- buttons */
.btn {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:hover:not(:disabled)  { background: var(--bg-3); border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary {
  background: var(--accent-2);
  border-color: var(--accent);
  font-weight: 600;
  color: #fff;
}
.btn.primary:hover:not(:disabled) { background: var(--accent); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; min-height: 30px; }
.btn.tiny  { padding: 4px 9px; font-size: 11.5px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { flex: 1 1 auto; }

/* ------------------------------------------------------------- status */
.status {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--bg-1);
  font-size: 12px;
  flex: 0 0 auto;
}
.status-title { font-weight: 600; font-size: 12.5px; }
.status-list {
  margin: 7px 0 0;
  padding-left: 17px;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  /* No max-height and no scrollbar of its own: the sidebar is already one
     scrolling area, so a long sweep report simply makes it taller instead
     of hiding rows behind a second, easily-missed scroll region. */
  overflow-wrap: anywhere;
}
.status.ok    { border-left-color: var(--ok); }
.status.ok    .status-title { color: var(--ok); }
.status.warn  { border-left-color: var(--warn); }
.status.warn  .status-title { color: var(--warn); }
.status.error { border-left-color: var(--err); }
.status.error .status-title { color: var(--err); }

/* ------------------------------------------------------------- kv table */
.table-scroll { overflow-x: auto; }
.kv { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.kv th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-dim);
  padding: 5px 8px 5px 0;
  width: 44%;
  border-bottom: 1px solid #1f252d;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.kv td {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 0;
  border-bottom: 1px solid #1f252d;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kv tr:last-child th, .kv tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Preview
   The preview takes every pixel the centre column can spare; the SCM panel
   below it is capped so it can never squeeze the canvas away.
   ========================================================================== */
#preview-section {
  flex: 1 1 auto;
  min-height: 240px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-head {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.preview-title {
  text-transform: uppercase;
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.preview-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.tool-group {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.tool-group:last-child { border-right: none; padding-right: 0; }
.tool-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-dim);
  white-space: nowrap;
}
.chk { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.preview-tools select { width: auto; padding: 4px 7px; font-size: 11.5px; }

.preview-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

#viewport {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--bg-0);
  touch-action: none;         /* the orbit controller owns touch gestures */
}
#viewport canvas { display: block; }

.hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--fg-dim);
  pointer-events: none;
  font-size: 13px;
  line-height: 2;
  width: 100%;
  padding: 0 12px;
}
.hint .dim { display: block; font-size: 11.5px; }
.hint.err { color: var(--err); pointer-events: auto; }

/* -------------------------------------------- viewer overlays */
/* Both sit over the canvas, so they need an explicit [hidden] rule: an id
   selector with a display of its own outranks the user agent's. */
.vbadge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line-2);
  background: rgba(15,19,25,.88);
  pointer-events: none;
}
#validation-badge[hidden], #measure-readout[hidden] { display: none; }
.vbadge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.vbadge.ok    { color: var(--ok);   border-color: rgba(53,196,106,.45); }
.vbadge.warn  { color: var(--warn); border-color: rgba(232,163,61,.45); }
.vbadge.error { color: var(--err);  border-color: rgba(239,77,77,.5); }

.measure-readout {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 3;
  max-width: min(340px, calc(100% - 20px));
  padding: 8px 11px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  border-left: 3px solid #ffe14d;
  background: rgba(15,19,25,.92);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg);
  pointer-events: none;
  overflow-wrap: anywhere;
}
.measure-readout strong { color: #ffe14d; font-weight: 600; }

#btn-measure[aria-pressed="true"] {
  border-color: #ffe14d;
  color: #ffe14d;
  background: var(--bg-3);
}
#viewport.measuring { cursor: crosshair; }

.preview-tools input[type="range"]#section-at { width: 84px; min-width: 60px; }
.preview-tools input:disabled { opacity: .4; }

/* a finding you can click to see where it is */
.an-issue.clickable { cursor: pointer; }
.an-issue.clickable:hover { background: var(--bg-3); }
.an-issue.active { outline: 1px solid var(--accent); }

/* ------------------------------------------------------------- inspector */
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  position: sticky;           /* section headers stay readable while scrolling */
  top: 0;
  z-index: 2;
}
.sidebar-inner > .panel-title:first-child { border-top: none; }
.panel-body { padding: 9px 11px; }

.legend { list-style: none; margin: 0; padding: 0; }
.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  min-width: 0;
}
.swatch {
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.25);
  flex: 0 0 auto;
}
.lname  { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
/* the doping legend carries a concentration range under each label */
.legend-doping .lname { display: flex; flex-direction: column; gap: 1px; }
.legend-doping .lname small {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: .2px;
}
.legend-doping .swatch { width: 15px; height: 15px; }
.lcount { flex: 0 0 auto; color: var(--fg-dim); font-size: 11px; }

/* close button, drawer mode only */
.drawer-close {
  margin-left: auto;
  display: none;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  width: 34px; height: 34px;
  cursor: pointer;
}
.drawer-close:hover { border-color: var(--accent); }

/* ------------------------------------------------------- import panel */
textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 2;
}

.import-status {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--bg-2);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  overflow-wrap: anywhere;
}
.import-status.ok    { border-left-color: var(--ok);   color: var(--fg); }
.import-status.warn  { border-left-color: var(--warn); color: var(--fg); }
.import-status.error { border-left-color: var(--err);  color: var(--fg); }
.import-status strong { color: var(--fg); font-weight: 600; }

/* a banner on the preview while imported geometry, not the parametric
   model, is what is on screen */
#import-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(232,163,61,.10);
  border-bottom: 1px solid rgba(232,163,61,.35);
  font-size: 11.5px;
  color: var(--warn);
}
#import-banner strong { color: var(--fg); }
#import-banner .spacer { margin-left: auto; }
/* an id selector outranks the user agent's [hidden] rule, so the banner has
   to be told to stay hidden explicitly or it shows on a fresh page */
#import-banner[hidden] { display: none; }

/* --------------------------------------------------- structure analysis */
.an-group { margin-bottom: 12px; }
.an-group:last-child { margin-bottom: 0; }
.an-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
}
.an-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 4px 10px;
  padding: 3px 0;
  font-size: 11.5px;
  align-items: baseline;
}
.an-row + .an-row { border-top: 1px solid #1b212a; }
.an-label { color: var(--fg-dim); overflow-wrap: anywhere; }
.an-value { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.an-note {
  grid-column: 1 / -1;
  font-size: 10.5px;
  color: #6f7b8a;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.an-evidence {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 10.5px;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* consistency report */
.an-issues { margin-top: 10px; }
.an-issue {
  display: flex;
  gap: 7px;
  padding: 5px 7px;
  margin-bottom: 4px;
  border-radius: 3px;
  border-left: 3px solid var(--line-2);
  background: var(--bg-2);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.an-issue.error { border-left-color: var(--err); }
.an-issue.warn  { border-left-color: var(--warn); }
.an-issue .kind {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fg-dim);
}
.an-clean {
  padding: 7px 9px;
  border-radius: 3px;
  border-left: 3px solid var(--ok);
  background: rgba(53,196,106,.07);
  color: var(--ok);
  font-size: 11.5px;
}

/* ------------------------------------------------------- script toolbar */
.script-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/* the toolbar sits inside the collapse header, so its buttons must not
   also toggle the card */
.script-tools .btn { pointer-events: auto; }
.section-head .script-tools + .chev { margin-left: 8px; }
#btn-script-expand[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--bg-3);
}

/* the script itself, numbered line by line.
   The number comes from a CSS counter rather than the DOM, so selecting
   the script with the mouse copies the commands and not the gutter. */
.code-line {
  counter-increment: scriptline;
  display: block;
  padding-left: 52px;
  text-indent: -52px;
}
.code-line::before {
  content: counter(scriptline);
  display: inline-block;
  width: 40px;
  margin-right: 12px;
  text-align: right;
  color: #4c5764;
  text-indent: 0;
  user-select: none;
  -webkit-user-select: none;
}
.code-line.blank::before { color: #3a434e; }

/* ==========================================================================
   Generated SCM
   ========================================================================== */
#scm-section {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(38%, 340px);
  display: flex;
  flex-direction: column;
}
#scm-section .section-head { flex: 0 0 auto; }
#scm-section .section-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
#scm-section.collapsed { max-height: none; }

/* Expand: the script takes the centre column so a long file can be read
   without scrolling a 340px box. The preview is hidden rather than resized,
   so no WebGL work happens while it cannot be seen. */
body.script-expanded #preview-section { display: none; }
body.script-expanded #scm-section { max-height: none; flex: 1 1 auto; }

#scm-preview {
  counter-reset: scriptline;
  flex: 1 1 auto;
  margin: 0;
  min-height: 84px;
  min-width: 0;
  padding: 12px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: #b9c4d0;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
  overscroll-behavior: contain;
}
#scm-preview:empty::before {
  content: "press Generate to produce the SCM text";
  color: var(--fg-dim);
  font-style: italic;
}
#scm-lines, #analysis-sub {
  font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px;
}

/* ------------------------------------------------------------- footer */
#foot {
  flex: 0 0 auto;
  padding: 7px 18px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 11px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- scrim */
#drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 13, .62);
  z-index: 55;
  border: 0;
  animation: scrim-in .16s ease;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------- scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: #2e3742; border-radius: 5px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: #3a4552; }
.sidebar, #main-col, #scm-preview { scrollbar-width: thin; scrollbar-color: #2e3742 var(--bg-1); }

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
     <= 1500px   drop the header subtitle before it can squeeze the buttons
     <= 1240px   tighter gutters, narrower default sidebars
     <= 1000px   DRAWER MODE: both sidebars become off-canvas panels, the
                 centre column takes the whole width
     <=  760px   phone: taller touch targets, single-row scrolling toolbar
     <=  480px   very narrow phone
   ========================================================================== */

@media (max-width: 1500px) {
  .subtitle { display: none; }
}

@media (max-width: 1240px) {
  :root { --pad: 9px; --gap: 9px; }
  .privacy { display: none; }
  .resizer { flex-basis: 10px; }
}

/* ---------------------------------------------------------- drawer mode */
@media (max-width: 1000px) {
  #page { padding: 8px; }

  .resizer { display: none; }

  /* Both sidebars slide in over the workspace, below the header.
     These live on the ID selectors, not on .sidebar, so they outrank the
     desktop `#controls { width: var(--sidebar-l) }` rule instead of losing
     to it on specificity. */
  #controls, #inspector {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    z-index: 60;
    width: min(88vw, 400px);
    max-width: 100vw;
    height: auto;
    background: var(--bg-0);
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
    transition: transform .22s ease;
    will-change: transform;
  }
  #controls  { left: 0;  right: auto; transform: translateX(-101%); border-right: 1px solid var(--line); }
  #inspector { right: 0; left: auto;  transform: translateX(101%);  border-left: 1px solid var(--line); }
  #controls.open, #inspector.open { transform: translateX(0); }

  /* the desktop collapse classes must not hide a drawer */
  body.hide-left #controls, body.hide-right #inspector { display: block; }
  body.hide-left #resizer-left, body.hide-right #resizer-right { display: none; }

  .sidebar-inner { padding: 8px; min-height: 0; }
  #controls .sidebar-inner  { padding-right: 8px; }
  #inspector .sidebar-inner { padding: 0; gap: 0; }

  .drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: -8px -8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--fg-dim);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 3;
  }
  #inspector .drawer-head { margin: 0; }
  .drawer-close { display: inline-flex; align-items: center; justify-content: center; }

  @media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
  }
}

/* ------------------------------------------------------- phones / portrait */
@media (max-width: 760px) {
  .icon-btn-text { display: none; }        /* icon-only panel toggles */
  .icon-btn { padding: 8px 10px; min-height: 40px; }
  .brand-name { font-size: 13px; }
  #titlebar { gap: 8px; padding: 6px 10px; }
  .header-right { gap: 6px; }

  .grid2 { grid-template-columns: 1fr; }

  /* the toolbar scrolls sideways instead of stacking and eating the canvas */
  .preview-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .tool-group { flex: 0 0 auto; }
  .preview-title { margin-bottom: 6px; }

  /* touch targets at the 44px accessibility minimum */
  .btn { min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
  .btn.small { min-height: 40px; padding: 9px 12px; font-size: 12.5px; }
  .btn.tiny  { min-height: 36px; padding: 8px 11px; font-size: 12px; }

  input[type="number"], input[type="text"], select {
    min-height: 44px;
    font-size: 16px;          /* stops mobile browsers zooming on focus */
    padding: 9px 10px;
  }
  input[type="range"] { width: 130px; min-height: 36px; }
  .chk { min-height: 40px; }
  .section-head { padding: 12px; }         /* easier to tap to collapse */

  .actions { gap: 9px; }
  .actions .btn { flex: 1 1 46%; }

  #scm-section { max-height: min(46%, 300px); }
  #foot { font-size: 10.5px; padding: 6px 10px; }
}

@media (max-width: 480px) {
  #btn-download-top { display: none; }     /* keep Generate, drop the rest */
  #page { padding: 6px; }
  .actions .btn { flex: 1 1 100%; }
  #controls, #inspector { width: 92vw; }
}

/* --------------------------------------------------------- landscape phone */
/* Very little vertical room, so every fixed chrome element is trimmed and
   the canvas gets what is left. The toolbar becomes one sideways-scrolling
   row rather than two stacked ones, which alone is worth ~30px of canvas. */
@media (max-height: 560px) and (orientation: landscape) {
  #titlebar { min-height: 40px; padding: 4px 10px; }
  .icon-btn { min-height: 32px; }
  #foot { display: none; }                 /* reclaim the vertical space */

  .preview-head { padding: 5px 10px; }
  .preview-title { display: none; }
  .preview-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 3px;
  }
  .tool-group { flex: 0 0 auto; }

  #preview-section { min-height: 170px; }
  #scm-section { max-height: 118px; }
  #scm-preview { min-height: 40px; }

  .btn { min-height: 34px; padding: 6px 11px; }
  .btn.tiny { min-height: 30px; padding: 5px 9px; }
  input[type="number"], input[type="text"], select { min-height: 36px; }
  .chk { min-height: 30px; }
}

/* ------------------------------------------------- coarse pointers (touch) */
@media (pointer: coarse) {
  .resizer { display: none; }              /* no hover, no drag affordance */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .sidebar { scroll-behavior: auto; }
}