/* Truss b1: Standard Game UI v1.3 (tokens.css, loaded first) in the Hexapuss Drip style.
   Restyles the UI layer only. Geometry, export and mesh logic live in mesh.js and app.js. */

/* ===== DRIP THEME BLOCK: start =====
   Hexapuss Drip, from the live UI Design Document app (stevehinanpresents.com/experimental/ui-design-document/,
   STYLES "Hexapuss Drip"), with Steve's title tracking of -0.05em (the live UDD still says +0.02em).
   When the shared SGUI v1.4 theme (themes/hexapuss-drip.css) ships, delete this whole block (the @font-face too)
   and link the theme instead. Two gray tokens and the surface are the preset's own values; every other colour
   is a tokens.css value. */
/* Hexapuss Drip Big: the site display font. Big titles only (40px or larger), like /webfonts/hexapuss-drip.js. */
@font-face {
  font-family: 'Hexapuss Drip Big';
  src: url('/webfonts/HexapussDrip-Big.woff2?v=dbffe253') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.sgu-drip {
  --sgu-gray-700: #2a1a3a;
  --sgu-gray-900: #08050c;
  --sgu-font: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sgu-font-title: "Hexapuss Drip Big", "Metal Mania", Impact, sans-serif;
  --sgu-font-body: var(--sgu-font);
  --sgu-title-weight: 400;
  --sgu-title-tracking: -0.05em;
  --sgu-btn-radius: var(--sgu-radius-m);
  --sgu-border-w: 1px;
  --sgu-glow: 1.2;
  --sgu-surface: radial-gradient(ellipse at 50% 0%, #1a0a2a, #050303 70%);
  --glow-a: calc(var(--sgu-glow) * 45%);
  --glow-b: calc(var(--sgu-glow) * 22%);
}
/* ===== DRIP THEME BLOCK: end ===== */

/* Truss aliases (tokens only) */
.sgu-drip {
  --line: var(--sgu-gray-700);
  --field-border: color-mix(in srgb, var(--sgu-gray-500) 15%, var(--sgu-gray-700));
  --panel: color-mix(in srgb, var(--sgu-gray-900) 88%, transparent);
}

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--sgu-surface);
  background-color: var(--sgu-black);
  background-attachment: fixed;
  color: var(--sgu-gray-100);
  font-family: var(--sgu-font);
  font-size: 15px;
  line-height: 1.4;
  overflow-x: hidden;
}
button, select, input { font: inherit; }
button, a, select, label { touch-action: manipulation; }
button { cursor: pointer; color: inherit; border: 0; background: none; margin: 0; }
button:disabled, select:disabled { opacity: .45; cursor: not-allowed; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sgu-focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- title ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 4px 18px; max-width: 1500px; margin: 0 auto; padding: 18px 24px 10px; }
.title {
  margin: 0; font-family: var(--sgu-font-title); font-weight: var(--sgu-title-weight); letter-spacing: var(--sgu-title-tracking);
  text-transform: uppercase; font-size: clamp(48px, 7vw, 72px); line-height: 1.05; padding: .1em 0; color: var(--sgu-white);
  text-shadow: 0 0 calc(var(--sgu-glow) * 14px) color-mix(in srgb, var(--sgu-purple) 60%, transparent);
}
.byline { margin: 0 0 .7em; display: flex; align-items: baseline; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sgu-gray-300); }
.app-version { font-weight: 700; letter-spacing: .06em; color: var(--sgu-green); font-variant-numeric: tabular-nums; }

main { max-width: 1500px; margin: 0 auto; padding: 4px 24px 24px; }

/* ---------- profile picker ---------- */
.profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.profile {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; text-align: left;
  background: var(--panel); border: var(--sgu-border-w) solid var(--line); border-radius: var(--sgu-radius-m); color: var(--sgu-gray-300);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.profile:hover { background: color-mix(in srgb, var(--sgu-gray-700) 45%, var(--sgu-gray-900)); color: var(--sgu-gray-100); }
.profile svg { flex: none; width: 42px; height: 42px; stroke: var(--sgu-gray-300); stroke-width: 2.5; fill: none; }
.profile svg circle { fill: var(--sgu-gray-900); }
.profile strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.profile.selected {
  color: var(--sgu-white); background: color-mix(in srgb, var(--sgu-orange) 14%, var(--sgu-gray-900));
  border-color: color-mix(in srgb, var(--sgu-orange) 75%, var(--sgu-gray-700));
  box-shadow: 0 0 calc(var(--sgu-glow) * 14px) color-mix(in srgb, var(--sgu-orange) var(--glow-b), transparent);
}
.profile.selected svg { stroke: var(--sgu-orange); }

/* ---------- workbench ---------- */
.workbench {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: clamp(560px, calc(100vh - 230px), 900px);
  border: var(--sgu-border-w) solid var(--line); border-radius: var(--sgu-radius-l); overflow: hidden; background: var(--sgu-gray-900);
}
.viewer-wrap {
  position: relative; overflow: hidden; min-height: 0;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--sgu-gray-500) 34%, var(--sgu-black)), color-mix(in srgb, var(--sgu-gray-500) 12%, var(--sgu-black)) 80%);
}
#viewport { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#viewport:active { cursor: grabbing; }
#viewport:focus-visible { outline-offset: -3px; }

.viewer-top {
  position: absolute; z-index: 2; left: 16px; right: 16px; top: 16px; pointer-events: none;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "seg . tools" "budget . ."; gap: 10px; align-items: start;
}
.viewer-top > * { pointer-events: auto; }
.viewer-top .segmented { grid-area: seg; }
.camera-tools { grid-area: tools; display: flex; gap: 6px; }
.scene-budget { grid-area: budget; justify-self: start; pointer-events: none; }

/* segmented buttons (preview layout, finish): the UDD .seg pattern */
.segmented {
  display: inline-flex; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--sgu-gray-900) 85%, transparent);
  border: var(--sgu-border-w) solid var(--line); border-radius: var(--sgu-btn-radius);
}
.segmented button {
  min-height: 36px; padding: 4px 13px; border-radius: calc(var(--sgu-btn-radius) - 3px); background: transparent; color: var(--sgu-gray-300);
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
}
.segmented button:hover { color: var(--sgu-gray-100); background: color-mix(in srgb, var(--sgu-gray-700) 50%, transparent); }
.segmented button.active, .segmented button[aria-pressed="true"] {
  color: var(--sgu-white); background: color-mix(in srgb, var(--sgu-purple) 30%, var(--sgu-gray-900));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sgu-purple) 60%, transparent);
}

.icon-button {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sgu-btn-radius); color: var(--sgu-gray-100);
  background: color-mix(in srgb, var(--sgu-gray-900) 85%, transparent); border: var(--sgu-border-w) solid var(--line);
}
.icon-button:hover { border-color: color-mix(in srgb, var(--sgu-orange) 70%, var(--sgu-gray-700)); color: var(--sgu-white); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.scene-budget { padding: 9px 13px 10px; background: color-mix(in srgb, var(--sgu-gray-900) 85%, transparent); border: var(--sgu-border-w) solid var(--line); border-radius: var(--sgu-radius-m); max-width: 250px; }
.scene-budget small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sgu-gray-300); }
.scene-budget > div { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.scene-budget strong { font-size: 1.9rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--sgu-green); text-shadow: 0 0 calc(var(--sgu-glow) * 10px) color-mix(in srgb, var(--sgu-green) var(--glow-b), transparent); }
.scene-budget span { font-size: .72rem; line-height: 1.3; color: var(--sgu-gray-300); max-width: 96px; }
.scene-budget b { font-weight: 700; color: var(--sgu-gray-100); font-variant-numeric: tabular-nums; }

.viewer-bottom {
  position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 14px;
  pointer-events: none; font-size: .78rem; letter-spacing: .04em; color: var(--sgu-gray-300); text-shadow: 0 1px 2px var(--sgu-black);
}
.viewer-bottom span:last-child { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sgu-gray-500); }
.viewer-bottom b { font-weight: 400; padding: 0 4px; }
#no-webgl { position: absolute; inset: 120px 32px auto; color: var(--sgu-orange); font-size: .95rem; }

/* ---------- controls panel ---------- */
.controls {
  min-height: 0; overflow-y: auto; padding: 18px 18px 20px; border-left: var(--sgu-border-w) solid var(--line);
  background: color-mix(in srgb, var(--sgu-gray-900) 92%, var(--sgu-gray-700));
  scrollbar-width: thin; scrollbar-color: var(--sgu-gray-700) transparent;
}
.section-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sgu-orange);
}
.section-label::before { content: ""; flex: none; width: 14px; height: 10px; border-radius: 2px; background: var(--sgu-orange); box-shadow: 0 0 calc(var(--sgu-glow) * 8px) var(--sgu-orange); }
.section-label span { margin-left: auto; font-size: .72rem; letter-spacing: .08em; color: var(--sgu-gray-300); font-variant-numeric: tabular-nums; }

.controls label:not(.check), .row-label, .count-row, .check {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0 0 6px; font-size: .92rem; color: var(--sgu-gray-100);
}
#venue-controls { padding-bottom: 8px; margin-bottom: 14px; border-bottom: var(--sgu-border-w) solid var(--line); }
#stage-controls { padding-top: 14px; margin-top: 8px; border-top: var(--sgu-border-w) solid var(--line); }

/* dropdowns: the SHPRecorderUI length dropdown look (recorder.css .shp-rec-select), focus ring from --sgu-focus */
select {
  flex: none; width: 176px; max-width: 60%; min-height: 34px; margin: 0; padding: 5px 6px; font-size: .85rem; color: var(--sgu-gray-100);
  background: var(--sgu-gray-900); border: 1px solid var(--field-border); border-radius: var(--sgu-radius-m); cursor: pointer;
}
select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--sgu-gray-500) 55%, var(--sgu-gray-700)); }
select:focus-visible { outline: 2px solid var(--sgu-focus); outline-offset: 2px; }
option { background: var(--sgu-gray-900); color: var(--sgu-gray-100); }
option:disabled { color: var(--sgu-gray-500); }

/* steppers: the UDD .stepper pattern */
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button {
  width: 34px; height: 34px; font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--sgu-gray-100); background: var(--sgu-gray-700);
  border: 1px solid color-mix(in srgb, var(--sgu-gray-500) 40%, var(--sgu-gray-700)); border-radius: var(--sgu-btn-radius);
}
.stepper button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--sgu-orange) 70%, var(--sgu-gray-700)); }
.stepper output { min-width: 1.8em; text-align: center; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* toggles: native checkboxes drawn as the UDD .hold switch (green when on) */
.check { cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 42px; height: 22px; margin: 0; cursor: pointer;
  border-radius: var(--sgu-radius-pill); background: var(--sgu-gray-700); transition: background .15s, box-shadow .15s;
}
.check input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sgu-gray-300); transition: transform .15s, background .15s;
}
.check input:checked {
  background: color-mix(in srgb, var(--sgu-green) 45%, var(--sgu-gray-900));
  box-shadow: 0 0 calc(var(--sgu-glow) * 10px) color-mix(in srgb, var(--sgu-green) var(--glow-a), transparent);
}
.check input:checked::before { transform: translateX(20px); background: var(--sgu-green); }
.check input:focus-visible { outline: 2px solid var(--sgu-focus); outline-offset: 3px; }

/* finish: a two-option segmented control with a swatch */
.finish { flex: none; }
.finish button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; }
.finish i { width: 12px; height: 12px; border-radius: 50%; background: var(--sgu-gray-300); border: 1px solid var(--sgu-gray-500); }
.finish button:last-child i { background: var(--sgu-black); }

.hint { margin: 2px 0 12px; font-size: .82rem; line-height: 1.45; color: var(--sgu-gray-300); }

/* triangle counts */
.specs { margin: 14px 0 6px; padding-top: 6px; border-top: var(--sgu-border-w) solid var(--line); }
.specs div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: .85rem; }
.specs span { color: var(--sgu-gray-300); }
.specs strong { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--sgu-gray-100); }
.specs #total-tris { font-size: 1.15rem; font-weight: 700; color: var(--sgu-green); }
.count-note { margin: 0 0 14px; font-size: .75rem; line-height: 1.5; color: var(--sgu-gray-300); }

/* downloads: the UDD .ubtn pattern; GLB is the orange primary */
.exports { display: flex; flex-direction: column; gap: 8px; }
.exports button {
  --c: var(--sgu-gray-500); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; color: var(--sgu-gray-100);
  background: color-mix(in srgb, var(--c) 14%, var(--sgu-gray-900)); border: var(--sgu-border-w) solid color-mix(in srgb, var(--c) 75%, var(--sgu-gray-700));
  border-radius: var(--sgu-btn-radius);
}
.exports button.primary { --c: var(--sgu-orange); box-shadow: 0 0 calc(var(--sgu-glow) * 14px) color-mix(in srgb, var(--c) var(--glow-b), transparent); }
.exports button:hover { background: color-mix(in srgb, var(--c) 26%, var(--sgu-gray-900)); }
.exports button span { flex: none; font-size: .75rem; letter-spacing: .08em; color: var(--sgu-gray-300); }
.exports button.primary span { color: color-mix(in srgb, var(--sgu-orange) 60%, var(--sgu-white)); }
#status { min-height: 1.4em; margin: 10px 0 0; font-size: .8rem; color: var(--sgu-green); overflow-wrap: anywhere; }

/* ---------- references ---------- */
.references { margin-top: 14px; border-top: var(--sgu-border-w) solid var(--line); font-size: .85rem; color: var(--sgu-gray-300); }
.references summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 8px 0; cursor: pointer; list-style: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sgu-gray-100);
}
.references summary::-webkit-details-marker { display: none; }
.references summary span { font-size: 1.3rem; font-weight: 400; color: var(--sgu-orange); transition: transform .15s; }
.references[open] summary span { transform: rotate(45deg); }
.references > div { max-width: 1000px; padding: 0 0 12px; line-height: 1.55; }
.references li { margin: 8px 0; }
.references a { text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sgu-gray-300) 50%, transparent); }
.references a:hover { color: var(--sgu-orange); }
.site-url { margin: 6px 0 0; font-size: .75rem; letter-spacing: .04em; color: var(--sgu-gray-500); text-align: center; }

/* ---------- touch and phones ---------- */
@media (pointer: coarse) {
  select, .stepper button, .segmented button { min-height: 44px; }
  .stepper button { width: 44px; height: 44px; }
  .icon-button { width: 44px; height: 44px; }
}
@media (max-width: 1000px) {
  .workbench { grid-template-columns: minmax(0, 1fr) 290px; }
  .segmented button { padding: 4px 9px; }
}
@media (max-width: 760px) {
  .top { padding: 12px 14px 4px; }
  main { padding: 2px 12px 20px; }
  .profiles { gap: 6px; margin-bottom: 10px; }
  .profile { gap: 8px; padding: 8px 10px; min-height: 52px; }
  .profile svg { width: 28px; height: 28px; }
  .profile strong { font-size: .85rem; letter-spacing: .04em; }
  .workbench { grid-template-columns: minmax(0, 1fr); height: auto; }
  .viewer-wrap { height: 460px; }
  .viewer-top { left: 10px; right: 10px; top: 10px; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seg seg" "budget tools"; }
  .viewer-top .segmented { display: flex; }
  .viewer-top .segmented button { flex: 1 1 0; min-width: 0; padding: 4px 4px; font-size: .72rem; letter-spacing: .03em; white-space: normal; }
  .camera-tools { align-self: start; }
  .scene-budget { padding: 7px 10px 8px; }
  .scene-budget strong { font-size: 1.5rem; }
  .viewer-bottom { left: 12px; right: 12px; bottom: 10px; }
  .viewer-bottom span:last-child { display: none; }
  .controls { border-left: 0; border-top: var(--sgu-border-w) solid var(--line); overflow: visible; padding: 16px 14px 18px; }
  select { width: 200px; }
}
@media (max-width: 360px) {
  .profile { justify-content: center; padding: 8px 6px; }
  .profile svg { display: none; }
  .camera-tools { gap: 4px; }
  .scene-budget span { display: none; }
  select { width: 168px; }
  .finish button { padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }