:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1c2128; --muted: #6b7280;
  --line: #e2e5ea; --accent: #7a5cff; --accent-ink: #fff;
  --good: #1f9d55; --warn: #b45309;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eceef2; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  background: #17181c; color: #fff; }
.brand { font-weight: 800; letter-spacing: 1px; color: #fff; font-size: 18px; }
.tagline { color: #9aa0aa; font-size: 12px; }
.jobnav { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.jobnav a { color: #cdd2da; }
.jobnav .jobname { color: #fff; font-weight: 600; }

.wrap { max-width: none; margin: 24px auto; padding: 0 20px; }   /* the window, not a column: owner instruction 2026-09-11 */
h1 { margin: 0 0 4px; } h2 { margin-top: 0; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; }
.req { color: #d33; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin: 16px 0; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.grid label, form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; color: var(--ink); background: #fff; }
.grid button { grid-column: 1 / -1; justify-self: start; }

button, .btn { display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: none; padding: 9px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.btn:hover { text-decoration: none; opacity: .92; }
.btn.ghost, .btn.ghost:hover { background: transparent; color: var(--muted); border: 1px solid var(--line); }

.joblist { list-style: none; padding: 0; margin: 0; }
.joblist li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; }
.joblist a { font-weight: 600; }

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; min-width: 120px; display: flex; flex-direction: column; }
.stat .num { font-size: 26px; font-weight: 700; }
.stat .lbl { color: var(--muted); font-size: 13px; }
a.stat:hover { text-decoration: none; border-color: var(--accent); }

.workflow { margin: 0; padding-left: 20px; }
.workflow li { margin: 8px 0; }
.badge { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.badge.on { color: var(--good); border-color: var(--good); }

.tbl { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl th { background: #fafbfc; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tbl.compact th, .tbl.compact td { padding: 6px 10px; font-size: 13px; }
/* Low-DPI PDF crops embedded in outputs: big enough to read, not zoomable. */
img.clip { max-width: 220px; max-height: 150px; width: auto; height: auto;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; display: block; }
img.clip.sm { max-width: 150px; max-height: 100px; }
/* Visual output tables (designs / rooms with clips) */
.matrix-wrap { overflow-x: auto; }
.tbl.clips td { vertical-align: top; }
.tbl.clips td.clip-td { white-space: nowrap; }
.tbl.clips td.clip-td img.clip { display: inline-block; vertical-align: top; margin: 0 4px 4px 0; }
.clipfig { display: inline-block; vertical-align: top; margin: 0 6px 4px 0; text-align: center; }
.clipfig figcaption { font-size: 11px; color: var(--muted); margin-top: 2px; }
tr.superseded { color: var(--muted); text-decoration: line-through; text-decoration-color: #cbd0d8; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: #eef2ff;
  border: 1px solid #d9dffb; }
.flash-warn { background: #fff5e6; border-color: #f0d5a8; color: #92600c; }
.flash-ok { background: #eafaf0; border-color: #b6e6c9; color: #1f7a45; }
.badge.warn { color: var(--warn); border-color: #e0b877; }
tr.subtotal td { background: #f4f2fb; font-weight: 600; }
tr.comp-not_started td, tr.comp-in_progress td { background: #fffaf0; }
.narrative p { margin: 10px 0; max-width: 70ch; }
.narrative h3 { margin: 20px 0 6px; }
@media print {
  .topbar, .ws-head .room-actions { display: none; }
  .card { border: none; padding: 0; }
}

/* intake categorize */
.intake-page { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin: 16px 0; }
.preview { background: #333; border-radius: 8px; overflow: auto; max-height: 78vh; }
.preview img { width: 100%; display: block; }
.fields { display: flex; flex-direction: column; gap: 12px; }
.pagehdr { display: flex; justify-content: space-between; align-items: center; }
.skip { flex-direction: row; align-items: center; gap: 6px; color: var(--warn); }
.revbox { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.revbox legend { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.actions { display: flex; gap: 10px; margin: 20px 0; align-items: center; }

.lineage-hd { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.thumb { width: 90px; height: 90px; object-fit: cover; border: 1px solid var(--line);
  border-radius: 6px; background: #333; }

/* design hub */
.sheetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.sheetcard { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.sheetcard:hover { border-color: var(--accent); text-decoration: none; }
.sheetcard img { width: 100%; height: 130px; object-fit: cover; object-position: top; background: #333; display: block; }
.sheetcard .cap { padding: 8px 10px; font-size: 13px; }
details.card summary { cursor: pointer; }

/* design-pass workspace */
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ws-head h1 { margin: 0; }
.zoom { display: flex; gap: 6px; align-items: center; }
.zoom button { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 5px 10px; }
.zoom button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.ws { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-top: 14px; align-items: start; }
.ws-canvaswrap { border: 1px solid var(--line); border-radius: 10px; background: #2b2b2b;
  overflow: auto; max-height: 82vh; }
.ws-canvas { position: relative; width: 100%; }
.ws-img { display: block; width: 100%; height: auto; }
.ws-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.region-rect { cursor: pointer; }

/* Overlay/page space mismatch — drawing is locked, so this must be unmissable. */
.page-space-warning { background: #fdecea; border: 1px solid #e6194b; border-radius: 8px;
  color: #7a1020; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }

.ws-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px;
  max-height: 82vh; overflow: auto; }
.side-sec { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.side-sec h3 { margin: 0 0 8px; font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack textarea, .stack input { width: 100%; }
textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; }

.design-card { border: 1px solid var(--line); border-left: 4px solid #ccc; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.design-card.active { box-shadow: 0 0 0 2px var(--accent) inset; }
.dc-head { display: flex; align-items: center; gap: 6px; }
.dc-num { flex: 1; font-weight: 600; }
.swatch { width: 13px; height: 13px; border-radius: 3px; display: inline-block; flex: none; }
.dc-attrs { display: flex; align-items: center; gap: 16px; }
.dc-gold, .dc-colors { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dc-colors input { width: 64px; }
.dc-foot { font-size: 12px; }
.link { background: none; border: none; color: var(--accent); padding: 0; cursor: pointer; font-size: 12px; }
.link.del { color: #c0392b; margin-left: auto; }

.region-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.region-row.sel { font-weight: 600; }
.warn-flash { color: var(--warn) !important; font-weight: 600; }

/* room pass */
.complete-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; }
.card.slim { padding: 12px 16px; }
.card.slim summary { cursor: pointer; }
.btn.danger, .btn.ghost.danger { color: #c0392b; border-color: #e6b0aa; }

.ref-bar { padding: 10px; border-bottom: 1px solid #444; background: #222; }
.ref-bar-top { display: flex; gap: 8px; align-items: center; }
.ref-bar-top select { flex: 1; min-width: 0; }
.ref-bar .zoom { display: flex; gap: 4px; }
.ref-bar .zoom button { background: #333; color: #ddd; border: 1px solid #555; padding: 4px 9px; font-size: 13px; }
.ref-bar .zoom button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ref-bar .drawmode { display: flex; gap: 4px; }
.ref-bar .drawmode button { background: #333; color: #ddd; border: 1px solid #555; padding: 4px 9px; font-size: 13px; }
.ref-bar .drawmode button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ref-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ref-thumb { position: relative; width: 84px; }
.ref-thumb img { width: 84px; height: 60px; object-fit: cover; object-position: top;
  border: 1px solid #555; border-radius: 4px; background: #333; cursor: pointer; display: block; }
.ref-thumb .ref-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: #c0392b; color: #fff; font-size: 11px;
  line-height: 1; cursor: pointer; padding: 0; }
.ref-cap { display: block; font-size: 10px; color: #bbb; text-align: center; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-view { overflow: auto; max-height: 74vh; cursor: grab; position: relative; background: #2b2b2b; }
.ref-view.grabbing { cursor: grabbing; }
.ref-view .ws-canvas { position: relative; width: 100%; }
.ref-view .ws-img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }

/* Room clip list (drawn RCP/elevation boxes) */
.clip-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.clip-thumb { width: 76px; height: 52px; object-fit: cover; object-position: top; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; flex: none; }
.clip-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.clip-meta .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.role-rcp { background: #4363d8; color: #fff; }
.badge.role-elevation { background: #e6194b; color: #fff; }
.badge.role-rcp, .badge.role-elevation { display: inline-block; width: max-content; padding: 1px 7px;
  border-radius: 10px; font-size: 11px; font-weight: 600; }

.rd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 6px; }
.rd-row.on { background: #f3f0ff; }
.rd-check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.rd-name { font-weight: 600; }
.rd-class { font-size: 12px; }
.rd-lf { display: flex; align-items: center; gap: 5px; }
.rd-lf input { width: 78px; }
.rd-total { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }

/* room builder */
.rb-controls { display: flex; align-items: center; gap: 6px; }
.rb-controls button { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 5px 12px; }
.rb-controls button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.rb { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-top: 14px; align-items: start; }
.rb-viewer { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rb.two .rb-viewer { grid-template-columns: 1fr 1fr; }

.pane { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #2b2b2b; display: flex; flex-direction: column; }
.pane-bar { display: flex; gap: 8px; align-items: center; padding: 8px; background: #222; border-bottom: 1px solid #444; }
.pane-bar .pane-sheet { flex: 1; min-width: 0; }
.pane-bar .zoom { display: flex; gap: 4px; }
.pane-bar .zoom button { background: #333; color: #ddd; border: 1px solid #555; padding: 4px 9px; font-size: 13px; }
.pane-bar .zoom button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.pane-scroll { height: 78vh; overflow: auto; cursor: grab; position: relative; }
.pane-scroll.grabbing { cursor: grabbing; }
.pane-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.pane-empty { color: #bbb; padding: 24px; text-align: center; }

.rb-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; max-height: 84vh; overflow: auto; }

.rbr { display: grid; grid-template-columns: 64px 1fr 58px 20px; gap: 5px; align-items: center; margin-bottom: 5px; }
.rbr input { padding: 5px 7px; font-size: 13px; min-width: 0; }
.rbr .del { color: #c0392b; padding: 0; }

.room-actions { display: flex; gap: 6px; }
.takeoff-link { margin-top: 12px; }
.rd-lfnote { font-size: 12px; white-space: nowrap; }

/* takeoff workspace */
.tk { display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-top: 14px; align-items: start; }
.tk-viewer { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #2b2b2b; }
.tk-bar { background: #222; border-bottom: 1px solid #444; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tk-bar-top { display: flex; gap: 8px; align-items: center; }
.tk-bar-top select { flex: 1; min-width: 0; }
.tk-bar .zoom { display: flex; gap: 4px; }
.tk-bar .zoom button { background: #333; color: #ddd; border: 1px solid #555; padding: 4px 9px; font-size: 13px; }
.tk-bar .zoom button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.tk-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-tools button { background: #333; color: #eee; border: 1px solid #555; padding: 5px 10px; font-size: 13px; }
.tk-tools #btn-scale.on { background: #e6194b; border-color: #e6194b; color: #fff; }
.tk-tools .ghostbtn { background: transparent; color: #bbb; }
.tk-tools #draw-controls { display: flex; gap: 6px; }
.pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid #555; color: #ddd; }
.pill.ok { color: #7ee2a8; border-color: #2f7d52; }
.pill.warn { color: #ffcf87; border-color: #7a5a1f; }
#mode-hint.flash-warn { color: #ffcf87; font-weight: 600; }

.tk-scroll { height: 78vh; overflow: auto; cursor: crosshair; position: relative; }
.tk-scroll.grabbing { cursor: grabbing; }
.tk-canvas { position: relative; width: 100%; }
.tk-canvas .tk-img, #tk-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
#tk-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.tk-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; max-height: 84vh; overflow: auto; }
.tk-side .small { font-size: 12px; }
.tkd { border: 1px solid var(--line); border-left: 4px solid #ccc; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.tkd.active { box-shadow: 0 0 0 2px var(--accent) inset; }
.tkd-head { display: flex; align-items: center; gap: 6px; }
.tkd-head strong { flex: 1; }
.tkm-list { margin: 4px 0; }
.tkm { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.tkm-lbl { flex: 1; }
.tkd-manual { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tkd-manual input { width: 80px; padding: 4px 6px; }
#save-panel { border: 2px solid var(--accent); }

/* revision review */
.rev { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-top: 14px; align-items: start; }
.rev-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rev-col { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #2b2b2b; }
.rev-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; background: #222; border-bottom: 1px solid #444; color: #ddd; }
.rev-hd .zoom { display: flex; gap: 4px; }
.rev-hd .zoom button { background: #333; color: #ddd; border: 1px solid #555; padding: 3px 8px; font-size: 12px; }
.rev-hd .zoom button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.rev-scroll { height: 68vh; overflow: auto; cursor: grab; position: relative; }
.rev-scroll.grabbing { cursor: grabbing; }
.rev-canvas { position: relative; width: 100%; }
.rev-canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.rev-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rev-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }
.rev-side textarea { width: 100%; }

tr.diff-changed td, tr.diff-added td, tr.diff-removed td { background: #fffaf0; }
tr.diff-same td { color: var(--muted); }

/* --- auth ---------------------------------------------------------------- */
.signout { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.jobnav ~ .signout { margin-left: 16px; }
.signout .whoami { color: #cdd2da; font-size: 13px; }
.signout button { background: transparent; color: #cdd2da; border: 1px solid #3a3d44;
  padding: 5px 12px; font-size: 13px; }
.signout button:hover { color: #fff; border-color: #55585f; }

.login-card { max-width: 340px; margin: 8vh auto 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.login-card h1 { margin-bottom: 16px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card input { width: 100%; }
.login-card button { justify-self: start; }

.flash-error { background: #fdecec; border-color: #f3c0c0; color: #a12020; }

/* --- intake upload ------------------------------------------------------- */
.upload { display: flex; flex-direction: column; gap: 12px; }
.upload label { font-size: 13px; color: var(--muted); }
.upload input[type=file] { margin-top: 4px; color: var(--ink); }
.upload button { justify-self: start; align-self: flex-start; }
.upload .hint { margin: 0; }