/* The 3D viewer's styles, shared by the scout runner's snapshots and the portal UI.
   model3d.js reads the --m3-* colours from :root; everything else stays scoped to .m3. */
.m3 {
  --bg: #faf9f7; --panel: #ffffff; --ink: #1d1c1a; --muted: #6b675f; --line: #e6e2da;
  --accent: #2f5d50; --accent-ink: #ffffff; --warn: #a4372a;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  font: 14px/1.45 var(--font);
}
.m3, .m3 * { box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
  .m3 {
    --bg: #161614; --panel: #1f1e1b; --ink: #ecebe7; --muted: #a29e95; --line: #34322d;
    --accent: #7fbfa9; --accent-ink: #10201b; --warn: #f09a8c;
  }
}
.m3 .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 6px 12px; font: inherit;
  font-weight: 600; cursor: pointer; display: inline-block; }
.m3 .btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.m3 .btn:disabled { opacity: .4; cursor: default; }
.m3 .sub { color: var(--muted); font-size: 12px; }
.m3 button.x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.m3 button.x:hover { color: var(--warn); }
/* 3D model (static/model3d.js reads the --m3-* colours) */
:root {
  --m3-bg: #f3f1ec; --m3-ground: #e4e0d6; --m3-grid: #cfc9bc; --m3-edge: #3b3a36; --m3-ghost: #6b675f;
  --m3-ext: #d8d2c6; --m3-int: #ece8e0; --m3-iso: #8f6f9e; --m3-partial: #c9c2b4; --m3-post: #9a8f7c;
  --m3-glass: #8ec3df; --m3-sky: #fff3b8; --m3-slab: #cfc6b5; --m3-marker: #c38a0a;
  --m3-f-open: #dbe9e2; --m3-f-studio: #f1dfcd; --m3-f-office: #dde1f0; --m3-f-wet: #d4e8f2; --m3-f-store: #ebe3d1;
  --m3-f-out: #cfe5c8; --m3-f-base: #e9e5dc; --m3-f-mezz: #e3d6ec;
  --m3-f-cafe: #f2c98f; --m3-f-rehearsal: #c9b3dc; --m3-f-cowork: #a9d3c3; --m3-f-circ: #e6e1d6; --m3-f-support: #d8d0c0;
  --m3-b-stage: #7c5a3a; --m3-b-bar: #5d4a3a; --m3-b-furn: #a89f90; --m3-b-inst: #3d3a36; --m3-b-plant: #5f8f58;
  --m3-b-stairs: #a89f90;
}
@media (prefers-color-scheme: dark) { :root {
  --m3-bg: #1b1a18; --m3-ground: #24231f; --m3-grid: #34322d; --m3-edge: #0d0d0c; --m3-ghost: #b9b4a9;
  --m3-ext: #6a655c; --m3-int: #57534b; --m3-iso: #7a5d88; --m3-partial: #4c4842; --m3-post: #7b715f;
  --m3-glass: #5d9ab8; --m3-sky: #c9b860; --m3-slab: #5b554b; --m3-marker: #e6b957;
  --m3-f-open: #2c3b35; --m3-f-studio: #45372b; --m3-f-office: #2f3445; --m3-f-wet: #29404b; --m3-f-store: #3e3a2f;
  --m3-f-out: #2c4528; --m3-f-base: #33312b; --m3-f-mezz: #3f3548;
  --m3-f-cafe: #7a5a2e; --m3-f-rehearsal: #5a4870; --m3-f-cowork: #2f5d50; --m3-f-circ: #3a3832; --m3-f-support: #4a453b;
  --m3-b-stage: #9c7a58; --m3-b-bar: #8a7360; --m3-b-furn: #8d8578; --m3-b-inst: #c9c4b9; --m3-b-plant: #6f9f68;
  --m3-b-stairs: #8d8578;
} }
.m3card h2 { display: flex; align-items: baseline; gap: 6px; }
.m3-open { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.m3-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 8px; }
.m3-bar label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.m3-bar .btn { padding: 4px 10px; }
.m3-bar select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font: inherit; max-width: 260px; }
.m3-spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 4px 11px; font: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.m3-stage { position: relative; height: min(62vh, 560px); min-height: 320px; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--m3-bg); outline: none; touch-action: none; }
.m3-stage:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.m3full .m3-stage { height: calc(100vh - 230px); }
.m3:fullscreen { background: var(--panel); padding: 10px; display: flex; flex-direction: column; }
.m3:fullscreen .m3-stage { flex: 1; height: auto; }
.m3-stage canvas { display: block; }
.m3-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.m3-labels { position: absolute; inset: 0; pointer-events: none; }
.m3-label { font: 11px/1.2 var(--font); color: var(--ink); text-align: center; background: color-mix(in srgb, var(--panel) 78%, transparent);
  padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.m3-label b { display: block; font-weight: 600; }
.m3-label span { color: var(--muted); font-size: 10px; }
.m3-label.has-photo { pointer-events: auto; cursor: zoom-in; }
.m3-info { position: absolute; top: 10px; right: 10px; max-width: min(320px, 70%); max-height: calc(100% - 60px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 28px 10px 12px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.m3-info p { margin: 6px 0 0; }
.m3-info .x { position: absolute; top: 4px; right: 4px; }
.m3-legend { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 6px 8px; border-radius: 6px; pointer-events: none; }
.m3-legend:empty { display: none; }
.m3-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.m3-legend i.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--m3-ghost); }
.m3-hint { position: absolute; left: 10px; bottom: 8px; max-width: calc(100% - 20px); pointer-events: none; padding: 3px 8px;
  border-radius: 6px; background: color-mix(in srgb, var(--panel) 85%, transparent); }