/* Pane Maker. Same palette as the hub's status page: dark first, amber accent, system fonts.
   The stage is acrylic in a dim room, so it stays dark in both themes. */
:root {
  color-scheme: dark;
  --surface-0: #0e0f11; --surface-1: #17181b; --surface-2: #212226; --surface-3: #26272c;
  --line: #2c2e33; --line-strong: #6f7179;
  --ink: #f2f1ec; --ink-muted: #a2a39f; --ink-faint: #6b6c69;
  --glow: #f2b545; --on-glow: #1a1206; --glow-text: #f2b545; --glow-soft: #3a2c12; --focus: #f2b545;
  --error: #ff6b5c; --warning: #f2b545; --note: #8fb4ff; --ok: #5fd88a;
  --stage-0: #07080a; --stage-1: #111317;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-color-scheme: light) { :root {
  color-scheme: light;
  --surface-0: #f4f4f2; --surface-1: #ffffff; --surface-2: #ececea; --surface-3: #ffffff;
  --line: #d9d9d5; --line-strong: #7f7f7b;
  --ink: #1a1a19; --ink-muted: #5f5f5c; --ink-faint: #9a9a97;
  --glow-text: #8a5a00; --glow-soft: #fbe9c4; --focus: #8a5a00;
  --error: #b3261e; --warning: #8a5a00; --note: #2a55b0; --ok: #17703a;
} }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--surface-0); color: var(--ink); font: 15px/21px var(--sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, p, dl, ol, ul { margin: 0; }
a { color: var(--glow-text); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font-family: var(--mono); font-size: 13px; }

/* ---- top bar ---- */
.top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-1); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 28px; height: 28px; fill: none; stroke: var(--glow); stroke-width: 1.4; }
.brand h1 { font-size: 17px; line-height: 20px; font-weight: 650; letter-spacing: -.01em; }
.brand .sub { font-size: 12px; line-height: 15px; color: var(--ink-muted); }
.name { flex: 1 1 160px; min-width: 120px; }
.name input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; font-weight: 600; }
.name input:hover { border-color: var(--line); }
.name input:focus { border-color: var(--line-strong); background: var(--surface-0); outline: none; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 7px 12px; font-size: 14px; line-height: 18px; font-weight: 500; min-height: 34px; transition: background .15s var(--ease), border-color .15s; white-space: nowrap; }
.btn:hover { border-color: var(--line-strong); }
.btn.primary { background: var(--glow); border-color: var(--glow); color: var(--on-glow); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.sm { padding: 4px 10px; min-height: 28px; font-size: 13px; }
.btn.icon { width: 34px; padding: 0; font-weight: 700; }
.btn:disabled { opacity: .45; cursor: default; }
.select select { border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 6px 10px; min-height: 34px; }

/* ---- layout ---- */
.layout { flex: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; min-height: 0; }
@media (max-width: 1100px) { .layout { grid-template-columns: 210px minmax(0, 1fr) 280px; } }
@media (max-width: 820px) {
  body { height: auto; }
  .layout { display: flex; flex-direction: column; }
  .panes { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  #pane-list { display: flex !important; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  #pane-list li { flex: 0 0 auto; }
  .pane-btn .thumb { display: none; }
  .panes .hint { display: none; }
  .stage { min-height: 70vh; }
  .side { border-left: 0 !important; border-top: 1px solid var(--line); }
}

/* ---- pane list ---- */
.panes { border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--surface-1); }
#pane-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pane-btn, .stack-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 6px 8px; }
.pane-btn:hover, .stack-btn:hover { background: var(--surface-2); }
.pane-btn[aria-pressed="true"], .stack-btn[aria-pressed="true"] { background: var(--surface-2); border-color: var(--line-strong); }
.pane-btn.dragover { border-color: var(--glow); background: var(--glow-soft); }
/* The pane's number on a plain tile with its colour as a bar beneath: a number on a coloured circle would look like a
   subway route bullet. */
.pane-btn .num { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; padding-bottom: 3px; font: 600 12px/1 var(--mono); flex: 0 0 auto; color: var(--ink); background: var(--surface-3); border: 1px solid var(--line); box-shadow: inset 0 -4px 0 var(--c); }
.pane-btn .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pane-btn .txt b { font-weight: 600; font-size: 14px; line-height: 18px; }
.pane-btn .txt small, .stack-btn small { color: var(--ink-muted); font-size: 12px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pane-btn .thumb { width: 26px; height: 31px; flex: 0 0 auto; background: var(--stage-0); border-radius: 4px; }
.badge { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 6px; flex: 0 0 auto; }
.badge.error { background: var(--error); color: #fff; }
.badge.warning { background: var(--warning); color: var(--on-glow); }
.badge.ok { color: var(--ok); }
.stack-ico { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; background: conic-gradient(#ee352e, #fccc0a, #00933c, #0039a6, #b933ad, #ee352e); opacity: .9; }
.panes .hint { font-size: 12px; line-height: 16px; color: var(--ink-faint); margin-top: auto; padding: 4px; }

/* ---- stage ---- */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--stage-1); }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #23252a; color: #d8d7d2; flex-wrap: wrap; }
.stage-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.stage-title .dot { width: 12px; height: 12px; border-radius: 50%; }
.stage-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stage-tools .btn { background: #1d1f23; border-color: #2c2e33; color: #e6e5e0; }
.check, .range { font-size: 13px; color: #a2a39f; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.canvas-wrap { position: relative; flex: 1; min-height: 360px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #15171b, var(--stage-0) 70%); touch-action: none; }
.canvas-wrap:focus-visible { outline-offset: -2px; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
#canvas.dragging { cursor: grabbing; }
#canvas.empty { cursor: default; }
.stage-hint { font-size: 12px; color: #6b6c69; padding: 6px 12px; border-top: 1px solid #23252a; }
.drop { position: absolute; inset: 12px; border: 2px dashed var(--glow); border-radius: 14px; display: grid; place-items: center; color: var(--glow); font-weight: 600; background: rgba(242,181,69,.08); pointer-events: none; }
.loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #a2a39f; background: var(--stage-0); text-align: center; padding: 24px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #2c2e33; border-top-color: var(--glow); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.stack3d { position: absolute; inset: 0; perspective: 3000px; display: grid; place-items: center; overflow: hidden; --edges: 0; }
.stack3d .edge { opacity: var(--edges); }
.stack3d .bezel { opacity: calc(1 - var(--edges) * .75); }
.stack3d .rig { position: relative; transform-style: preserve-3d; transition: transform .25s var(--ease); }
.stack3d svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- side panel ---- */
.side { border-left: 1px solid var(--line); overflow-y: auto; background: var(--surface-1); }
.card { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.over { font-size: 11px; line-height: 14px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: 8px; align-items: center; }
.cap { font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.file { font-weight: 500; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); align-self: flex-start; }
.seg button { border: 0; background: transparent; border-radius: 8px; padding: 6px 16px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--glow); color: var(--on-glow); }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-muted); }
.field span { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.field input { width: 100%; min-width: 0; background: var(--surface-0); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: 500 14px/20px var(--mono); color: var(--ink); }
.field input:focus { border-color: var(--line-strong); outline: none; }
#width-field span input { width: 90px; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.issues { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.issues li { font-size: 13px; line-height: 18px; padding: 7px 9px 7px 11px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--line-strong); cursor: default; }
.issues li[data-at] { cursor: pointer; }
.issues li[data-at]:hover { background: var(--surface-3); }
.issues li.error { border-left-color: var(--error); }
.issues li.warning { border-left-color: var(--warning); }
.issues li.note { border-left-color: var(--note); }
.issues li b { font-weight: 600; margin-right: 4px; }
.issues li.okay { border-left-color: var(--ok); color: var(--ink-muted); }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.stats dt { color: var(--ink-muted); }
.stats dd { margin: 0; font-family: var(--mono); text-align: right; }
.lit { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.lit label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.lit .dot { width: 10px; height: 10px; border-radius: 50%; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 16px; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35); max-width: min(560px, calc(100vw - 32px)); z-index: 10; }
.toast.error { border-color: var(--error); }

.dlg { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-1); color: var(--ink); max-width: 560px; padding: 20px 22px; }
.dlg::backdrop { background: rgba(0,0,0,.55); }
.dlg h2 { font-size: 19px; margin-bottom: 10px; }
.dlg ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dlg .row { margin-top: 14px; }

/* canvas layers (SVG) */
.c-body { fill: rgba(190, 215, 235, .045); stroke: #3d7bd6; stroke-width: .12; }
.c-frame { fill: rgba(0, 0, 0, .5); }
.c-keep { fill: none; stroke: #f2b545; stroke-width: .1; stroke-dasharray: .4 .5; opacity: .55; }
.c-window { fill: none; stroke: #6b6c69; stroke-width: .12; stroke-dasharray: 1.2 .8; }
.c-foot { fill: rgba(255, 220, 120, .35); }
.c-bbox { fill: none; stroke: #f2b545; stroke-width: .15; stroke-dasharray: 1 .8; opacity: .8; pointer-events: none; }
.c-issue circle { fill: none; stroke-width: .3; }
.c-issue text { font: 600 2.4px var(--sans); text-anchor: middle; dominant-baseline: central; }
.c-issue.error circle { stroke: var(--error); } .c-issue.error text { fill: var(--error); }
.c-issue.warning circle { stroke: #f2b545; } .c-issue.warning text { fill: #f2b545; }
.c-issue.note circle { stroke: #8fb4ff; } .c-issue.note text { fill: #8fb4ff; }
.c-issue.flash circle { animation: flash 1s 2; }
@keyframes flash { 50% { stroke-width: 1.2; } }