/* Beam Portal — hand-written, dense, framework-free (spec §7).
 *
 * Visual system: the instrument reads the way its data does. The palette is
 * anchored to the cividis colormap every quicklook and volume render uses —
 * page background at the colormap's indigo floor, "emission" yellow (the
 * cividis peak) reserved for live status, the primary action, and the hot
 * end of the scale bar. Links take an aim-beam blue so yellow stays scarce.
 * Section headings are etched-bezel mono labels; every number is tabular
 * mono. The signature element is the .scalebar: the cividis legend as a
 * hairline under the topbar, doubling as capture progress on live runs.
 */
:root {
  --bg: #0c1426;        /* cividis floor, desaturated */
  --panel: #131e33;     /* module housing */
  --panel-2: #1a2740;   /* raised housing */
  --line: rgba(158, 173, 204, 0.16);
  --ink: #e7ecf6;
  --dim: #8b99b4;
  --emit: #f2dc4e;      /* cividis peak — live, primary, scale-bar hot end */
  --sky: #7fb2e5;       /* interactive: links, focus */
  --ok: #63c08b; --warn: #d9a13f; --bad: #e46770;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cividis: linear-gradient(90deg, #00224e 0%, #123570 14%, #3b496c 28%, #575d6d 42%,
    #707173 56%, #8a8779 68%, #a69d75 78%, #c4b56c 87%, #e4cf5b 94%, #fee838 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 2px; }
code { font-family: var(--mono); font-size: .9em; background: var(--panel-2); padding: .05em .35em; border-radius: 4px; }
h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; margin: 0 0 .3rem; }
/* Section headings as etched instrument labels — quiet, mono, uppercase. */
h2 { font: 600 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim); margin: 1.3rem 0 .55rem; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--dim); }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .92em; }
.lead { color: var(--dim); max-width: 60ch; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 22px; padding: 0 24px; height: 52px;
  background: var(--panel); }
.topbar .brand { font: 700 .8rem var(--mono); text-transform: uppercase; letter-spacing: .22em;
  color: var(--ink); }
.topnav { display: flex; gap: 18px; font-size: .9rem; }
.topbar .who { margin-left: auto; color: var(--dim); font-size: .85em; font-family: var(--mono); }

/* Signature: the cividis scale bar — the colormap legend as chrome. With
 * --progress set (live runs), the filled portion tracks planes stored. */
.scalebar { height: 3px; background: var(--cividis); }
.scalebar.gauge { background:
  linear-gradient(90deg, transparent calc(var(--progress, 100) * 1%), var(--bg) calc(var(--progress, 100) * 1%)),
  var(--cividis); }

.wrap { max-width: 1120px; margin: 22px auto 80px; padding: 0 24px; }

/* flash messages */
.messages { list-style: none; margin: 12px auto; padding: 0 24px; max-width: 1120px; }
.msg { padding: .55rem .9rem; border-radius: 6px; margin: .3rem 0; border-left: 3px solid var(--dim); background: var(--panel); }
.msg-success { border-color: var(--ok); }
.msg-error { border-color: var(--bad); }

/* tables */
table.grid { border-collapse: collapse; width: 100%; margin: .6rem 0; font-size: .88rem; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: middle; }
table.grid th { font: 600 .68rem var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); border-bottom-color: rgba(158, 173, 204, 0.32); }
table.grid th.num, table.grid td.num { text-align: right; }
table.grid tbody tr:hover { background: rgba(127, 178, 229, 0.05); }
table.grid tr.capture-mode { background: rgba(242, 220, 78, 0.07); }
@media (max-width: 720px) { table.grid { display: block; overflow-x: auto; } }

/* status badges */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font: 600 .72rem var(--mono);
  text-transform: uppercase; letter-spacing: .08em; border: 1px solid transparent; }
.badge-live { color: var(--emit); border-color: var(--emit); background: rgba(242, 220, 78, 0.1);
  animation: emit 2s ease-in-out infinite; }
.badge-complete { color: var(--ok); border-color: rgba(99, 192, 139, 0.55); background: rgba(99, 192, 139, 0.1); }
.badge-error { color: var(--bad); border-color: rgba(228, 103, 112, 0.55); background: rgba(228, 103, 112, 0.1); }
@keyframes emit { 50% { box-shadow: 0 0 12px rgba(242, 220, 78, 0.35); } }
@media (prefers-reduced-motion: reduce) { .badge-live { animation: none; } }

.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }

.tag { display: inline-block; font: 600 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--emit); border: 1px solid rgba(242, 220, 78, 0.5); border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }

/* run detail */
.run-head { display: flex; align-items: center; gap: 12px; }
.run-head .light-name, .viewer-head .light-name { color: var(--dim); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: var(--panel); }
.card h2:first-child { margin-top: 0; }
.card.planes { margin-top: 18px; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: .4rem 0; }
dl.kv dt { color: var(--dim); }
dl.kv dd { margin: 0; }

/* warning box (fail-closed calibration + build errors) */
.warn-box { border-left: 3px solid var(--bad); background: rgba(228, 103, 112, 0.08); color: #f0b6bb;
  padding: .6rem .9rem; border-radius: 0 6px 6px 0; margin: .6rem 0; }

/* forms */
.field { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.field label { min-width: 8.5rem; color: var(--dim); }
.field input { flex: 1; }
.field input, .publish-form select, .publish-form input {
  padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; font: inherit;
  background: var(--bg); color: var(--ink); }
.field input:focus, .publish-form select:focus { border-color: var(--sky); outline: none; }
.field ul.errorlist { color: var(--bad); list-style: none; margin: 0; padding: 0; font-size: .85em; }
.cal-form, .publish-form { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }

.btn { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; }
.btn:hover { text-decoration: none; border-color: var(--dim); }
.btn.primary { background: var(--emit); border-color: var(--emit); color: #201d05; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.confirm-actions { display: flex; gap: 10px; margin-top: 18px; }

/* plane grid — cividis quicklooks sit flush on the dark housing */
.plane-grid .ql { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: #000;
  display: block; border: 1px solid var(--line); }
.plane-grid .ql-empty { display: inline-block; width: 56px; height: 56px; border-radius: 4px;
  border: 1px dashed var(--line); background: transparent; }
.plane-grid td.stats { color: var(--dim); font-size: .85rem; }
.pstate { font: 600 .72rem var(--mono); padding: .05rem .45rem; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .06em; }
.pstate-ok { color: var(--ok); background: rgba(99, 192, 139, 0.12); }
.pstate-pending { color: var(--warn); background: rgba(217, 161, 63, 0.12); }
.pstate-failed { color: var(--bad); background: rgba(228, 103, 112, 0.12); }

/* login — the branded front door (portal/login.html) */
.login-main { display: grid; place-items: center; min-height: calc(100vh - 55px); padding: 24px; }
.login-card { width: min(360px, 100%); border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); padding: 26px 28px 24px; }
.login-card .brand { font: 700 .8rem var(--mono); text-transform: uppercase; letter-spacing: .22em; }
.login-card .scalebar { margin: 12px -28px 18px; }
.login-card .field { flex-direction: column; align-items: stretch; gap: .25rem; margin: .8rem 0; }
.login-card .field label { min-width: 0; font: 600 .68rem var(--mono); text-transform: uppercase;
  letter-spacing: .1em; }
.login-card .btn { width: 100%; margin-top: .6rem; text-align: center; }

/* viewer */
.viewer-main { max-width: none; margin: 0; padding: 0; }
.viewer-head { display: flex; align-items: center; gap: 14px; padding: 10px 24px; background: var(--panel); color: var(--ink); }
.viewer-stage { position: relative; width: 100%; height: calc(100vh - 52px - 3px - 44px);
  background: radial-gradient(1000px 600px at 50% 0%, #0c1a2d 0%, #04080f 70%); overflow: hidden; }
.viewer-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.viewer-stage canvas:active { cursor: grabbing; }
.gb-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8fa5bb; font-size: 14px; pointer-events: none; }
.gb-label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  text-align: center; font-size: 13px; font-weight: 600; color: #fff; }
.gb-scale { position: absolute; transform: translate(-100%, -50%); white-space: nowrap; pointer-events: none;
  font-size: 11px; color: #8fa5bb; font-variant-numeric: tabular-nums; }
.gb-hint { position: absolute; right: 14px; bottom: 12px; font-size: 11px; color: #5c7186;
  letter-spacing: .05em; pointer-events: none; }

/* quiet button variant (topbar sign-out) */
.topbar form.logout { margin: 0; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--dim); font-size: .85em; padding: .25rem .5rem; }
.btn-quiet:hover { color: var(--ink); border-color: var(--line); }