/* ---------------------------------------------------------- tokens */
:root{
  --bg:#eef1f6; --bg-glow:#dfe7f5;
  --panel:#ffffff; --panel-2:#f5f7fa;
  --ink:#0f1420; --ink-2:#4d5768; --ink-3:#87909f;
  --line:#e4e8ef; --line-2:#ccd3de;
  --brand-blue:#0000ff; --brand-yellow:#ffd42a;
  --logo-blue:var(--brand-blue); --logo-yellow:var(--brand-yellow);
  --accent:#0000ff; --accent-2:#3d6bff; --accent-ink:#ffffff; --accent-soft:#e7eaff;
  --ok:#0f9d58; --warn:#b45309; --warn-bg:#fff7ed; --err:#c0362c; --err-bg:#fef2f2;
  --dim-floor:#1a9455;   /* green: heights above floor */
  --level:#d8382b;       /* red:   level lines         */
  --tv-fill:#e6eaf1; --tv-line:#161c28;
  --mount-fill:#00c8d6; --floor:#1a1f2b;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -14px rgba(16,24,40,.22);
  --ring:0 0 0 3px var(--accent-soft);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#080a10; --bg-glow:#141a2e;
    --panel:#12161f; --panel-2:#1a1f2b;
    --ink:#eef2f8; --ink-2:#98a3b5; --ink-3:#6a7488;
    --line:#222836; --line-2:#333b4c;
    /* pure blue goes muddy on a near-black ground, so the UI accent and the
       logo both lift a step in dark mode while staying unmistakably blue */
    --logo-blue:#5568ff; --logo-yellow:#ffd94a;
    --accent:#5568ff; --accent-2:#3f9bff; --accent-ink:#05070f; --accent-soft:#151d42;
    --ok:#3ecf8e; --warn:#f0b429; --warn-bg:#2b2210; --err:#ff6b5e; --err-bg:#2b1613;
    --dim-floor:#35d07f; --dim-mount:#7ba3ff; --level:#ff6f61;
    --tv-fill:#1e2431; --tv-line:#ccd6e4;
    --mount-fill:#16b8c8; --floor:#78849a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -18px rgba(0,0,0,.85);
    --ring:0 0 0 3px rgba(91,124,255,.28);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.45 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:
    radial-gradient(70rem 34rem at 78% -12%, var(--bg-glow), transparent 62%),
    radial-gradient(50rem 26rem at -8% 4%, var(--bg-glow), transparent 58%);
  background-attachment:fixed;
}

/* ---------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 20px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0}
.brand-logo{height:33px; width:auto; display:block; flex:none}

.topbar h1{
  padding-left:13px; margin-left:2px;
  border-left:1px solid var(--line-2); color:var(--ink-2);
  font-size:14.5px; font-weight:600;
}
.topbar h1{font-size:16px; font-weight:640; letter-spacing:-.01em; margin:0}
.topbar-actions{display:flex; align-items:center; gap:10px}

/* ---------------------------------------------------------- layout */
.layout{
  display:grid; grid-template-columns:minmax(320px,380px) 1fr;
  gap:18px; padding:18px; align-items:start;
  max-width:1560px; margin:0 auto;
}
@media (max-width:960px){ .layout{grid-template-columns:1fr} }

.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
@media (prefers-color-scheme:dark){
  .panel{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 88%, #000))}
}
.form{padding:4px 18px 18px; position:sticky; top:70px}
@media (max-width:960px){ .form{position:static} }
.results{padding:18px}

.block{padding:16px 0; border-bottom:1px solid var(--line)}
.block:last-child{border-bottom:0; padding-bottom:4px}
.block-head{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.block-head h2{font-size:13px; font-weight:660; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); margin:0}
.step{
  display:grid; place-items:center; width:21px; height:21px; border-radius:7px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:var(--accent-ink); font-size:11px; font-weight:700;
}

/* ---------------------------------------------------------- fields */
.field{display:block; margin-bottom:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.lbl{display:block; font-size:12px; font-weight:560; color:var(--ink-2); margin-bottom:5px}
.lbl em{font-style:normal; color:var(--ink-3); font-weight:500}
input[type=text], select{
  width:100%; padding:10px 11px; font:inherit; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:9px; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
input[type=text]:focus, select:focus{border-color:var(--accent); box-shadow:var(--ring)}
input.bad{border-color:var(--err)}
.hint{font-size:11.5px; color:var(--ink-3); margin:-4px 0 12px}

/* ---------------------------------------------------------- scanner */
.scan-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; font-size:12.5px;
}
.scan-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.scan-card{width:min(560px,100%)}
.scan-view{
  position:relative; border-radius:12px; overflow:hidden; background:#000;
  aspect-ratio:4/3; display:grid; place-items:center;
}
.scan-view video, .scan-view canvas{width:100% !important; height:100% !important; object-fit:cover; display:block}
.scan-view img{max-width:60%; opacity:.5}
/* html5-qrcode injects its own chrome; keep only the video */
.scan-view #scanView__dashboard, .scan-view__header_message{display:none !important}
.scan-reticle{
  position:absolute; inset:16% 10%; border:2px solid rgba(255,255,255,.9);
  border-radius:10px; box-shadow:0 0 0 100vmax rgba(0,0,0,.35); pointer-events:none;
}
.scan-status{
  font-size:13px; color:var(--ink-2); margin:12px 2px 0; min-height:2.6em; line-height:1.45;
}
.scan-status b{color:var(--ink)}
.scan-status.err{color:var(--err)}
.scan-status code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}

/* ---------------------------------------------------------- combobox */
.combo{position:relative}
#tvNote{margin:6px 0 0}
.combo input{padding-right:30px}
.combo-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:transparent; color:var(--ink-3);
  font-size:19px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px;
}
.combo-clear:hover{color:var(--ink)}
.combo-list{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:4px; list-style:none; max-height:min(340px,52vh); overflow:auto;
  background:var(--panel); border:1px solid var(--line-2); border-radius:9px;
  box-shadow:0 12px 32px -10px rgba(16,24,40,.35);
}
.combo-list li{
  padding:7px 9px; border-radius:6px; cursor:pointer; font-size:13.5px;
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
}
.combo-list li .meta{color:var(--ink-3); font-size:11.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
.combo-list li mark{background:var(--accent-soft); color:var(--accent); font-weight:660; border-radius:2px}
.combo-list li[aria-selected=true], .combo-list li:hover{background:var(--panel-2)}
.combo-list li.active{background:var(--accent); color:var(--accent-ink)}
.combo-list li.active .meta{color:var(--accent-ink); opacity:.75}
.combo-list li.active mark{background:transparent; color:inherit; text-decoration:underline}
.combo-list .empty{color:var(--ink-3); cursor:default; justify-content:flex-start}
.combo-list .empty:hover{background:transparent}

/* ---------------------------------------------------------- segmented */
.seg{display:inline-flex; background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:11px; padding:3px; gap:2px}
.seg.wide{display:flex; width:100%; margin-bottom:12px}
.seg.wide .seg-btn{flex:1}
.seg-btn{
  appearance:none; border:0; background:transparent; color:var(--ink-2);
  font:inherit; font-size:13px; font-weight:570; padding:7px 12px;
  border-radius:8px; cursor:pointer; white-space:nowrap;
  transition:background .14s, color .14s;
}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-on{
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:var(--accent-ink); box-shadow:0 1px 6px -1px color-mix(in srgb,var(--accent) 55%, transparent);
}
.check{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--ink-2); cursor:pointer}
.check input{accent-color:var(--accent)}

.btn{
  appearance:none; font:inherit; font-size:13px; font-weight:580; cursor:pointer;
  padding:8px 14px; border-radius:9px; border:1px solid transparent;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:var(--accent-ink);
  transition:filter .14s, border-color .14s, color .14s;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel-2); color:var(--ink-2); border-color:var(--line-2)}
.btn.ghost:hover{color:var(--ink); border-color:var(--ink-3)}
.btn.danger:hover{color:var(--err); border-color:var(--err)}
.btn.full{width:100%}

/* ---------------------------------------------------------- answer */
.answer{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:13px;
  background:linear-gradient(145deg,var(--accent-soft),transparent 78%), var(--panel);
  padding:18px 20px; margin-bottom:14px;
}
.answer::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.answer-label{
  font-size:11.5px; font-weight:650; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent);
}
.answer-value{
  font-size:clamp(38px,8vw,54px); font-weight:700; letter-spacing:-.03em; line-height:1.05;
  font-variant-numeric:tabular-nums; margin:4px 0 3px;
  background:linear-gradient(96deg,var(--ink),var(--accent) 165%);
  -webkit-background-clip:text; background-clip:text;
}
.answer-sub{font-size:13px; color:var(--ink-2); max-width:56ch}
.answer.is-bad .answer-value{
  color:var(--ink-3); background:none; -webkit-text-fill-color:currentColor;
  font-size:21px; font-weight:620;
}

#alerts:empty{display:none}
.alert{
  font-size:13px; padding:9px 12px; border-radius:8px; margin-bottom:10px;
  border:1px solid; display:flex; gap:8px; align-items:flex-start;
}
.alert.warn{color:var(--warn); background:var(--warn-bg); border-color:currentColor}
.alert.err{color:var(--err); background:var(--err-bg); border-color:currentColor}
.alert b{font-weight:660}

/* ---------------------------------------------------------- figure */
.figure{
  border:1px solid var(--line); border-radius:13px; background:var(--panel-2);
  padding:10px; overflow:hidden;
}
#drawing svg{display:block; width:100%; height:auto}
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; color:var(--ink-2); margin:10px 2px 0}
.legend .legend-note{color:var(--ink-3); font-style:italic}

/* ---------------------------------------------------------- tables */
.tables{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:16px}
.tblock h3{
  font-size:11.5px; font-weight:660; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.tblock dl{margin:0}
.tblock .row{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; font-size:13.5px; border-bottom:1px solid color-mix(in srgb,var(--line) 55%, transparent);
}
.tblock .row:last-child{border-bottom:0}
.tblock dt{color:var(--ink-2); min-width:0}
.tblock dd{margin:0; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.tblock .row.key dd{color:var(--accent); font-size:15px}
.tblock .row.key dt{color:var(--ink); font-weight:560}
.swatch{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:1px}

/* ---------------------------------------------------------- modal */
.modal{position:fixed; inset:0; z-index:50; background:rgba(10,14,20,.55); display:grid; place-items:center; padding:20px}
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  width:min(1040px,100%); min-width:0; max-height:88vh; display:flex; flex-direction:column;
  padding:16px 18px; box-shadow:0 24px 64px -20px rgba(0,0,0,.5);
}
.modal-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.modal-head h2{margin-right:auto}
.libfilter{max-width:220px}
.modal-head h2{font-size:17px; margin:0}
.modal-body{overflow:auto; flex:1; min-width:0; min-height:0; margin:0 -4px; padding:0 4px}
#libInner{display:flex; flex-direction:column; flex:1; min-height:0; min-width:0}

.lib-lock{padding:6px 2px 4px; max-width:420px}
.lock-row{display:flex; gap:8px; margin-bottom:4px}
.lock-row input{flex:1}
.lib-lock .hint{margin:0}
.lib-lock .hint.err{color:var(--err)}
.modal-foot{display:flex; gap:8px; align-items:center; padding-top:12px; margin-top:12px; border-top:1px solid var(--line); flex-wrap:wrap}
.modal-foot .spacer{flex:1}

table.lib{width:100%; border-collapse:collapse; font-size:13px}
table.lib th{
  text-align:left; font-size:10.5px; font-weight:660; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-3); padding:6px 5px; border-bottom:1px solid var(--line); white-space:nowrap;
  position:sticky; top:0; background:var(--panel);
}
table.lib td{padding:3px 5px; border-bottom:1px solid var(--line)}
table.lib td.derived{
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap;
  text-align:right; padding-right:12px; background:var(--panel-2);
}
table.lib input{padding:6px 7px; font-size:13px; min-width:64px}
table.lib td.name input{min-width:150px}
table.lib td:not(.name) input{max-width:118px}
table.lib .del{
  appearance:none; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink-3);
  border-radius:6px; cursor:pointer; width:26px; height:28px; line-height:1; font-size:15px;
}
table.lib .del:hover{color:var(--err); border-color:var(--err)}
.libnote{font-size:12px; color:var(--ink-3); margin:10px 2px 2px}

/* ---------------------------------------------------------- phones */
@media (max-width:620px){
  .layout{padding:12px; gap:12px}
  .form, .results{padding:4px 14px 14px}
  .results{padding-top:14px}
  .topbar{padding:10px 14px; gap:10px}
  .topbar h1{font-size:15px}

  .answer{margin-bottom:12px; padding:16px 16px}

  /* thumb-sized controls */
  .seg-btn{padding:10px 12px; font-size:13.5px}
  input[type=text], select{padding:12px 12px; font-size:16px}  /* 16px: no iOS zoom */
  .btn{padding:10px 15px}

  .figure{padding:6px}
  .tables{grid-template-columns:1fr; gap:10px}
  .tblock .row{padding:9px 0; font-size:14.5px}
  .answer-sub{font-size:12.5px}

  /* the library table is wide by nature — let it scroll, and keep it usable */
  .modal{padding:8px}
  .modal-card{padding:12px 12px; max-height:94vh; border-radius:13px}
  .modal-head{flex-wrap:wrap}
  .libfilter{max-width:none; order:3; width:100%}
  .modal-foot{gap:6px}
  .modal-foot .btn{flex:1 1 auto}
}

[hidden]{display:none !important}

/* ---------------------------------------------------------- print
   A single page to carry to the wall: the number, the drawing, the table. */
@media print{
  :root{
    --bg:#fff; --panel:#fff; --panel-2:#fff; --ink:#000; --ink-2:#333; --ink-3:#666;
    --line:#ccc; --line-2:#bbb; --accent:#0033cc; --accent-soft:#eef2ff;
    --tv-fill:#f0f0f0; --tv-line:#000; --mount-fill:#00b8c4; --floor:#000;
    --dim-floor:#0a7a3e; --dim-mount:#1b3fa8; --level:#c0261a;
  }
  .topbar-actions, .form, #alerts .alert.warn{display:none !important}
  .topbar{position:static; border-bottom:1px solid #000; padding:0 0 8px}
  .layout{display:block; padding:0; max-width:none}
  .panel{border:0; box-shadow:none; padding:0}
  .results{padding:10px 0 0}
  .figure{border:1px solid #bbb; page-break-inside:avoid}
  .tables{page-break-inside:avoid}
  .answer{background:none; border:1px solid #000}
  @page{margin:14mm}
}