/* =====================================================================
   CircuitBench — tokens
   This is an instrument panel: it stays dark in either colour scheme,
   but every colour is a token and the body background is explicit.
   ===================================================================== */
:root{
  --bg:#0d1117; --panel:#131a23; --panel-2:#0f151d; --panel-3:#161e28;
  --line:#232c38; --line-soft:#1a222c;
  --text:#e8edf3; --text-dim:#93a1b3; --text-faint:#5c6a7d;
  --copper:#ff9d4d; --signal:#37d6a7; --power:#ff5d73; --gnd:#6c7688; --amber:#ffb020;
  --silk:#d9e3ec;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:8px; --radius-sm:4px;
}
:root:not([data-theme="light"]){ color-scheme:dark; }
@media (prefers-color-scheme: light){ :root:not([data-theme="light"]){ color-scheme:dark; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); overflow-x:hidden;
}
kbd{
  font-family:var(--mono); background:var(--panel-2); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:4px; padding:1px 5px; font-size:11px; color:var(--text-dim);
}
button:focus-visible, input:focus-visible, select:focus-visible, .part-chip:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}

/* the editor fills exactly one screen; the info section and footer sit below it */
#app{ height:100vh; height:100dvh; min-height:540px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }

/* ---------------- top bar ---------------- */
#topbar{
  position:relative; flex-wrap:wrap;
  display:flex; align-items:center; justify-content:space-between; gap:8px 14px;
  padding:9px 14px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.brand-mark{ color:var(--signal); font-size:18px; }
.brand-name{ font-weight:600; letter-spacing:.2px; font-size:15px; }
.brand-sub{ color:var(--text-faint); font-size:11.5px; }
.topbar-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

.btn{
  appearance:none; border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  font-family:var(--sans); font-size:12.5px; padding:6px 11px; border-radius:var(--radius-sm);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .12s ease, background .12s ease;
}
.btn:hover{ border-color:var(--text-faint); }
.btn:active{ transform:translateY(1px); }
.btn-ghost{ background:transparent; }
.btn-tiny{ padding:3px 8px; font-size:11px; }
.btn-danger:hover{ border-color:var(--power); color:var(--power); }
.btn-run{ background:var(--signal); border-color:var(--signal); color:#03251c; font-weight:600; }
.btn-run:hover{ background:#48e6b8; border-color:#48e6b8; }
.btn-run.running{ background:var(--power); border-color:var(--power); color:#3a0009; }
.btn-run .ico{ font-size:11px; }

.status-pill{
  display:flex; align-items:center; gap:6px; padding:5px 10px;
  border:1px solid var(--line); border-radius:999px; font-size:11.5px; color:var(--text-dim);
  min-width:104px;
}
.status-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); }
.status-pill.running .dot{ background:var(--signal); box-shadow:0 0 6px var(--signal); }
.status-pill.error .dot{ background:var(--power); box-shadow:0 0 6px var(--power); }
.status-pill.warnflash{ border-color:var(--amber); }
.divider{ width:1px; height:20px; background:var(--line); }
.toolgroup{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); }
.toolgroup input[type=range]{ width:76px; accent-color:var(--signal); }
.toolgroup input[type=checkbox]{ accent-color:var(--signal); }
select.btn{ color-scheme:dark; }
.toolmenu{ position:relative; }
.toolmenu > summary{ list-style:none; user-select:none; }
.toolmenu > summary::-webkit-details-marker{ display:none; }
.toolmenu > summary::marker{ content:""; }
.menu-caret{ color:var(--text-faint); font-size:10px; margin-left:1px; }
.toolmenu[open] > summary{ border-color:var(--text-faint); background:var(--panel-3); }
.toolmenu-pop{ position:absolute; top:calc(100% + 5px); right:0; z-index:180; min-width:230px; padding:5px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 14px 34px rgba(0,0,0,.48); }
.toolmenu-item,.toolmenu-check,.toolmenu-range{ width:100%; border:0; background:transparent; color:var(--text); font:inherit; border-radius:var(--radius-sm); }
.toolmenu-item{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 9px; cursor:pointer; text-align:left; }
.toolmenu-item:hover{ background:var(--panel-3); }
.toolmenu-item span,.toolmenu-check span{ font-size:12px; }
.toolmenu-item small,.toolmenu-check small{ color:var(--text-faint); font-size:10px; line-height:1.35; }
.toolmenu-check,.toolmenu-range{ display:grid; grid-template-columns:auto 1fr; gap:6px 8px; align-items:center; padding:8px 9px; cursor:pointer; text-align:left; }
.toolmenu-check input{ margin:0; accent-color:var(--signal); }
.toolmenu-check small{ grid-column:2; margin-top:-4px; }
.toolmenu-range{ cursor:default; }
.toolmenu-range > span{ grid-column:1 / -1; display:flex; justify-content:space-between; color:var(--text-dim); }
.toolmenu-range input{ width:100%; grid-column:1 / -1; accent-color:var(--signal); }
.toolmenu-view .toolmenu-pop{ min-width:250px; }

/* ---------------- workspace ---------------- */
#workspace{ display:grid; grid-template-columns:212px minmax(0,1fr) 380px; min-height:0; transition:grid-template-columns .16s ease; }
#workspace.parts-collapsed{ grid-template-columns:46px minmax(0,1fr) 380px; }
#workspace.code-collapsed{ grid-template-columns:212px minmax(0,1fr) 46px; }
#workspace.parts-collapsed.code-collapsed{ grid-template-columns:46px minmax(0,1fr) 46px; }
#workspace.code-maximized{ grid-template-columns:1fr; }
#workspace.code-maximized #parts-panel,
#workspace.code-maximized #stage{ display:none; }

#parts-panel{
  background:var(--panel); border-right:1px solid var(--line);
  padding:10px 10px 20px; overflow-y:auto; min-width:0;
}
#workspace.parts-collapsed #parts-panel{ padding:8px 6px; overflow:hidden; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:8px; }
#workspace.parts-collapsed .panel-head{ flex-direction:column; gap:5px; margin-bottom:0; }
#workspace.parts-collapsed .panel-head .panel-title{ writing-mode:vertical-rl; transform:rotate(180deg); margin:0; }
.panel-title{ font-size:11px; color:var(--text-faint); font-weight:600; margin:2px 0 8px; }
.panel-content{ min-height:0; }
#workspace.parts-collapsed .panel-content{ display:none; }
.panel-actions{ display:flex; align-items:center; gap:4px; margin-left:6px; }
#btn-parts-toggle{ flex:0 0 auto; }
#part-search{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:6px 8px; font-size:12px; margin-bottom:10px; font-family:var(--sans);
}
.palette-group{
  font-size:10px; color:var(--text-faint); letter-spacing:.4px; margin:12px 0 5px;
  padding-bottom:3px; border-bottom:1px solid var(--line-soft);
}
.palette-group:first-child{ margin-top:0; }
.parts-list{ display:flex; flex-direction:column; gap:5px; }
.part-chip{
  display:flex; align-items:center; gap:9px; padding:6px 8px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  cursor:grab; font-size:12px; user-select:none;
}
.part-chip:hover{ border-color:var(--copper); }
.part-chip:active{ cursor:grabbing; }
.part-chip .swatch{ width:24px; height:24px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.part-chip .swatch svg{ width:100%; height:100%; overflow:visible; }
.help-list{ margin:8px 0 0; padding-left:15px; font-size:11.5px; color:var(--text-dim); line-height:1.65; }

/* ---------------- stage ---------------- */
#stage{ position:relative; min-width:0; }
#canvas-scroll{
  position:absolute; inset:0; overflow:auto;
  background:radial-gradient(circle at 1px 1px,#1c2531 1px,transparent 0) 0 0/22px 22px, var(--bg);
}
#canvas-scroll.panning{ cursor:grabbing; }
#canvas{ position:relative; width:2600px; height:1700px; transform-origin:0 0; }
#wires-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
#wires-svg .wire-hit{ pointer-events:stroke; cursor:pointer; fill:none; }
#wires-svg .wire-line{ pointer-events:stroke; }
#parts-layer{ position:absolute; inset:0; z-index:3; pointer-events:none; }
#selection-box{ position:absolute; z-index:45; pointer-events:none; border:1px solid var(--amber); background:rgba(255,176,32,.10); box-shadow:inset 0 0 0 1px rgba(255,176,32,.10); }
#selection-box.hidden{ display:none; }

/* isolation keeps a part's pins inside the part's own stacking context,
   so a component body can never slide behind the breadboard while its
   pins stay floating on top of it */
.part{ position:absolute; cursor:grab; isolation:isolate; z-index:3; pointer-events:auto; user-select:none; -webkit-user-select:none; }
.part.dragging{ cursor:grabbing; z-index:60; }
.part.part-bb{ z-index:1; }
.part-visual{ position:absolute; inset:0; transform-origin:50% 50%; }
.part.selected .part-body{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }
.part.selected-multi .part-body{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }
.part svg{ display:block; overflow:visible; }
.part-label{
  position:absolute; top:-15px; left:0; font-size:10px; color:var(--text-faint);
  font-family:var(--mono); white-space:nowrap; pointer-events:none;
}

.pin{
  position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:#4a5568; border:1.5px solid #8894a3; cursor:crosshair; z-index:10;
}
.pin:hover{ background:var(--amber); border-color:var(--amber); transform:scale(1.35); }
.pin.hot{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px rgba(255,176,32,.25); }
.pin-gnd{ border-color:#7e8899; background:#39404b; }
.pin-vcc5,.pin-vcc3,.pin-power{ border-color:#c0505f; background:#5a2b33; }
.show-volts .pin::after{
  content:attr(data-v); position:absolute; left:12px; top:-7px;
  font:9px/1 var(--mono); color:var(--text-faint); white-space:nowrap; pointer-events:none;
}
.show-volts .pin.v-hot::after{ color:var(--power); }

/* the socket itself is drawn in the board's SVG; this is just the hit
   target sitting exactly on top of it */
.hole{
  position:absolute; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:3px;
  background:transparent; border:1px solid transparent; cursor:crosshair; z-index:10;
}
.hole:hover{ border-color:var(--amber); background:rgba(255,176,32,.22); }
.hole.hot{ border-color:var(--amber); background:rgba(255,176,32,.35); box-shadow:0 0 0 3px rgba(255,176,32,.22); }

.wire-line{ fill:none; stroke-width:3; stroke-linecap:round; cursor:pointer; }
.wire-line:hover{ stroke-width:4.2; }
.wire-line.selected{ stroke-width:4; filter:drop-shadow(0 0 3px #ffb020) drop-shadow(0 0 7px rgba(255,176,32,.8)); }
.wire-line.wire-auto{ stroke-width:2.2; stroke-dasharray:1 5; }
.wire-preview{ fill:none; stroke:var(--text-faint); stroke-width:2.5; stroke-dasharray:5 4; stroke-linecap:round; }

/* zoom controls */
.stage-tools{
  position:absolute; top:10px; right:12px; z-index:20; display:flex; gap:5px; align-items:center;
  background:rgba(15,21,29,.86); border:1px solid var(--line); border-radius:var(--radius);
  padding:4px 6px; backdrop-filter:blur(4px);
}
.stage-tools span{ font:11px var(--mono); color:var(--text-dim); min-width:38px; text-align:center; }

/* inspector */
#inspector{
  position:absolute; left:12px; bottom:12px; z-index:22; width:252px;
  background:rgba(17,23,31,.95); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 11px; font-size:12px; backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
#inspector.hidden{ display:none; }
.insp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12.5px; }
.insp-head .x, .modal-head .x{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:13px; }
.insp-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:6px 0; color:var(--text-dim); }
.insp-row.col{ flex-direction:column; align-items:stretch; gap:4px; }
.insp-row input[type=number], .insp-row select{
  width:104px; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:3px 6px; font-size:12px; font-family:var(--mono);
}
.insp-row input[type=range]{ width:100%; accent-color:var(--signal); }
.insp-row b{ color:var(--text); font-family:var(--mono); }
.swatches{ display:flex; gap:4px; }
.swatch-btn{ width:16px; height:16px; border-radius:3px; border:1px solid #0006; cursor:pointer; }
.swatch-btn.active{ outline:2px solid var(--amber); outline-offset:2px; }
.wire-note{ margin-top:7px; color:var(--text-faint); font-size:10.5px; line-height:1.45; }
.insp-live{
  display:grid; grid-template-columns:1fr auto; gap:2px 10px; margin:8px 0 4px;
  padding-top:8px; border-top:1px solid var(--line-soft); font:11px var(--mono); color:var(--text-faint);
}
.insp-live b{ color:var(--signal); font-weight:500; }
.insp-actions{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }

/* scope */
#scope{
  position:absolute; right:12px; bottom:12px; z-index:21; width:330px;
  background:rgba(17,23,31,.95); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 10px 10px; backdrop-filter:blur(6px);
}
#scope.hidden{ display:none; }
#scope header{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-faint); margin-bottom:6px; }
#scope-canvas{ width:100%; height:104px; display:block; background:#080b10; border-radius:var(--radius-sm); }
#probe-list{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; font:10.5px var(--mono); }
#probe-list .dim{ color:var(--text-faint); }
.probe{
  display:inline-flex; align-items:center; gap:5px; padding:2px 6px; border-radius:999px;
  border:1px solid var(--c); color:var(--c);
}
.probe button{ background:none; border:none; color:inherit; cursor:pointer; padding:0; font-size:10px; }

/* ---------------- code panel ---------------- */
#code-panel{ background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; min-width:0; }
#workspace.code-collapsed #code-panel{ overflow:hidden; }
#workspace.code-collapsed .code-tabs{ height:100%; flex-direction:column; justify-content:flex-start; padding-top:7px; }
#workspace.code-collapsed .code-tab,
#workspace.code-collapsed .code-hint,
#workspace.code-collapsed #code-editor,
#workspace.code-collapsed .serial-panel{ display:none; }
#workspace.code-collapsed .panel-actions{ margin:0; flex-direction:column; }
#workspace.code-maximized #code-panel{ border-left:none; }
.code-tabs{ display:flex; border-bottom:1px solid var(--line); background:var(--panel-2); align-items:center; min-height:35px; }
.code-tab{ padding:8px 15px; font-size:12px; font-family:var(--mono); color:var(--text-dim); border-right:1px solid var(--line); }
.code-tab.active{ color:var(--text); background:var(--panel); border-bottom:2px solid var(--signal); }
.code-hint{ margin-left:auto; padding-right:10px; font-size:10.5px; color:var(--text-faint); }
#code-editor{
  flex:1 1 52%; min-height:120px; resize:none; border:none; outline:none;
  background:var(--panel); color:var(--silk); font-family:var(--mono); font-size:12.5px;
  line-height:1.55; padding:11px 13px; tab-size:2; white-space:pre; overflow:auto;
}
.serial-panel{ flex:1 1 48%; display:flex; flex-direction:column; border-top:1px solid var(--line); min-height:140px; }
.serial-panel.collapsed{ flex:0 0 35px; min-height:35px; }
.serial-panel.collapsed #serial-output,
.serial-panel.collapsed #serial-input{ display:none; }

.serial-header{
  display:flex; align-items:center; justify-content:space-between; padding:6px 11px;
  font-size:11px; color:var(--text-faint); font-weight:600; background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
#serial-output{
  flex:1; overflow-y:auto; padding:7px 11px; font-family:var(--mono); font-size:11.5px;
  color:var(--signal); white-space:pre-wrap; word-break:break-word; background:#080b10;
}
#serial-output .err{ color:var(--power); }
#serial-output .sys{ color:var(--text-faint); font-style:italic; }
#serial-input{
  border:none; border-top:1px solid var(--line); background:var(--panel-2); color:var(--text);
  font-family:var(--mono); font-size:11.5px; padding:7px 11px; outline:none;
}

/* ---------------- status bar ---------------- */
#statusbar{
  display:flex; justify-content:space-between; gap:12px; padding:5px 13px; font-size:11px;
  color:var(--text-faint); background:var(--panel-2); border-top:1px solid var(--line);
  font-family:var(--mono);
}

/* ---------------- modal ---------------- */
#modal{ position:fixed; inset:0; z-index:200; background:rgba(4,7,11,.68); display:flex; align-items:center; justify-content:center; padding:20px; }
#modal.hidden{ display:none; }
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  width:min(640px,100%); max-height:86vh; display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 15px; border-bottom:1px solid var(--line); }
.modal-body{ padding:14px 16px; overflow:auto; font-size:13px; color:var(--text-dim); line-height:1.6; }
.modal-body h4{ color:var(--text); margin:14px 0 6px; font-size:12.5px; }
.modal-body h4:first-child{ margin-top:0; }
.modal-body ul{ margin:0 0 8px; padding-left:18px; }
.modal-body p{ margin:0 0 8px; }
.modal-body textarea{
  width:100%; height:190px; background:#080b10; color:var(--silk); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-family:var(--mono); font-size:11px; padding:8px; resize:vertical;
}
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:11px 15px; border-top:1px solid var(--line); }

/* scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#26303d; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#324055; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---------------- narrow screens ---------------- */
@media (max-width:1100px){ #workspace{ grid-template-columns:186px 1fr 320px; } }
@media (max-width:900px){
  #code-panel{ border-left:none; border-top:1px solid var(--line); }
  #parts-panel{ border-right:none; }
  #scope{ width:min(330px,calc(100% - 24px)); }
  #inspector{ width:min(252px,calc(100% - 24px)); }
  .topbar-actions{ gap:5px; }
}

/* ---------------- multi-select ---------------- */
.multi-summary{ color:var(--text-dim); font:11px/1.6 var(--mono); padding:4px 0 3px; }

@media (max-width:900px){
  #workspace.code-maximized #code-panel{ max-height:none; }
}

/* ---------------- about ---------------- */
.about-content{ display:flex; flex-direction:column; gap:16px; }
.about-section h4{ margin:0 0 6px; color:var(--text); font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; }
.about-section p{ margin:0; color:var(--text-dim); font-size:12.5px; line-height:1.6; }
.about-list{ margin:0; padding-left:18px; color:var(--text-dim); font-size:12.5px; line-height:1.7; }
.about-list li{ margin:0; }
.about-placeholder{ color:var(--text-faint); font-style:italic; }


/* ---------------- learn menu / status bar links ---------------- */
a.toolmenu-item{ text-decoration:none; }
.toolmenu-sep{ height:1px; background:var(--line); margin:4px 2px; }
#statusbar a{ color:var(--text-dim); text-decoration:none; white-space:nowrap; }
#statusbar a:hover{ color:var(--copper); }
#statusbar-left{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#statusbar-right{ display:flex; gap:14px; align-items:center; white-space:nowrap; }
@media (max-width:1280px){ .brand-sub{ display:none; } }

/* ---------------- landing page header ---------------- */
.landing-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.landing-header .brand{ text-decoration:none; color:var(--text); margin-right:auto; }
.landing-nav{ display:flex; flex-wrap:wrap; gap:2px 4px; }
.landing-nav a{ padding:5px 10px; border-radius:var(--radius-sm); font-size:13px; color:var(--text-dim); text-decoration:none; }
.landing-nav a:hover{ color:var(--text); background:var(--panel-2); }
@media (max-width:760px){
  .landing-nav{ order:3; flex:1 0 100%; overflow-x:auto; }
}

/* ---------------- public homepage content (below the editor) ---------------- */
#site-info{ background:var(--bg); border-top:1px solid var(--line); color:var(--text); }
.site-info-inner{ width:min(1040px,calc(100% - 40px)); margin:0 auto; padding:52px 0 56px; }
.site-info-inner .eyebrow{ margin:0 0 9px; color:var(--signal); font:600 11px/1.4 var(--mono); letter-spacing:.1em; }
.site-info-inner h1{ margin:0 0 13px; font-size:clamp(28px,4vw,42px); line-height:1.12; font-weight:700; }
.site-info-inner .site-lead{ max-width:790px; margin:0; color:var(--text-dim); font-size:17px; line-height:1.7; }
.site-info-actions{ display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 32px; }
.site-info-actions a{ display:inline-flex; align-items:center; min-height:38px; padding:7px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); text-decoration:none; font-size:14px; transition:border-color .15s,color .15s,background .15s; }
.site-info-actions a:hover{ border-color:var(--copper); color:var(--copper); background:var(--panel-2); }
.site-info-actions a.primary{ background:var(--copper); border-color:var(--copper); color:#1a1006; font-weight:600; }
.site-info-actions a.primary:hover{ background:#ffb173; color:#1a1006; }
.site-info-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.site-info-grid article{ min-width:0; padding:19px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.site-info-grid h2{ margin:0 0 8px; font-size:17px; line-height:1.35; font-weight:650; }
.site-info-grid p{ margin:0; color:var(--text-dim); font-size:14px; line-height:1.65; }
.site-info-grid a{ color:var(--signal); }
.site-info-note{ margin-top:13px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); color:var(--text-dim); font-size:13px; line-height:1.65; }
.site-info-note b{ color:var(--text); }

.page-footer{ background:var(--panel-2); border-top:1px solid var(--line); color:var(--text-faint); font-size:13px; }
.page-footer-inner{ width:min(1040px,calc(100% - 40px)); margin:0 auto; padding:20px 0 26px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center; }
.page-footer nav{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.page-footer a{ color:var(--text-dim); text-decoration:none; }
.page-footer a:hover{ color:var(--copper); }

/* ---------------- phones / small tablets: stack, and let the page scroll ---------------- */
@media (max-width:900px){
  #app{ height:auto; min-height:0; display:block; }
  #workspace, #workspace.parts-collapsed, #workspace.code-collapsed, #workspace.parts-collapsed.code-collapsed, #workspace.code-maximized{
    display:flex; flex-direction:column;
  }
  #stage{ order:1; flex:none; height:64vh; height:64dvh; min-height:340px; }
  #parts-panel{ order:2; max-height:190px; border-top:1px solid var(--line); border-bottom:none; }
  #code-panel{ order:3; max-height:none; height:min(60vh,420px); }
  #workspace.code-maximized #stage, #workspace.code-maximized #parts-panel{ display:none; }
  #workspace.code-maximized #code-panel{ height:80vh; }
  #topbar{ padding:8px 10px; }
  .toolmenu{ position:static; }
  .toolmenu-pop, .toolmenu-view .toolmenu-pop{ left:8px; right:8px; top:100%; min-width:0; margin-top:4px; }
  .status-pill{ min-width:0; }
  #statusbar{ flex-wrap:wrap; }
  #statusbar-right .stat-solver{ display:none; }
}
@media (max-width:560px){
  .brand-name{ font-size:14px; }
  .btn{ padding:7px 10px; }
  .site-info-actions a{ flex:1 1 auto; justify-content:center; }
  .site-info-grid{ grid-template-columns:1fr; }
  .site-info-inner{ padding:38px 0 44px; }
}