:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #ffffff;
  --canvas: #eef1f5;
  --navy: #0b1220;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --violet: #7c3aed;
  --amber: #d97706;
  --red: #dc2626;
  --green: #059669;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #f5f7fa; color: var(--ink); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
.hidden { display: none !important; }

.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100vh; }
.sidebar { background: var(--navy); color: #e5edf8; padding: 26px 18px 20px; display: flex; flex-direction: column; }
.brand { display:flex; align-items:center; height:48px; margin:0 0 22px; padding:10px 12px; overflow:hidden; border:1px solid #dbe5f0; border-radius:11px; background:#f8fafc; box-shadow:0 8px 24px #02061724; }
.brand-logo { display:block; width:100%; max-width:156px; height:auto; }
.primary-nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; color: #9eabc0; text-align: left; padding: 11px 12px; border-radius: 9px; display: flex; align-items: center; gap: 10px; font-size: 13px; transition: .2s; }
.nav-item:hover { color: white; background: #ffffff0d; }.nav-item.active { color: white; background: #ffffff12; box-shadow: inset 2px 0 #60a5fa; }
.nav-icon { width: 19px; text-align: center; font-size: 17px; color: #77aafc; }
.portfolio-card { margin-top: auto; padding: 17px; border: 1px solid #ffffff12; border-radius: 13px; background: linear-gradient(145deg, #172235, #101a2a); }
.eyebrow { margin: 0 0 6px; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: #718198; }
.portfolio-card .eyebrow { color: #6f829e; }.portfolio-card > strong { font-size: 28px; display: block; }.portfolio-card > span { font-size: 11px; color: #8393aa; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ffffff10; margin-top: 15px; padding-top: 13px; }
.portfolio-grid div + div { border-left: 1px solid #ffffff10; padding-left: 14px; }.portfolio-grid b, .portfolio-grid small { display: block; }.portfolio-grid b { font-size: 16px; }.portfolio-grid small, .estimate-note { font-size: 10px; color: #7c8da5; margin: 2px 0 0; }
.sidebar-foot { padding: 19px 8px 0; display: flex; align-items: center; gap: 9px; color: #a9b6c9; }.sidebar-foot b,.sidebar-foot small { display:block; font-size: 10px; }.sidebar-foot small { color:#64748b; margin-top:2px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px #34d39918; }

.workspace { min-width: 0; height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 76px; flex: 0 0 76px; background: #fff; border-bottom: 1px solid var(--line); padding: 11px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.document-control { min-width: 330px; }.document-control label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.select-shell { position: relative; }.select-shell select { appearance: none; width: min(470px, 45vw); background: transparent; border: 0; color: var(--ink); font-weight: 700; font-size: 14px; padding: 3px 27px 3px 0; outline: none; text-overflow: ellipsis; }.select-shell span { position: absolute; right: 5px; top: 1px; pointer-events: none; color: #64748b; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }.discipline-badge,.trust-badge { font-size: 11px; font-weight: 650; border-radius: 999px; padding: 7px 10px; white-space: nowrap; }.discipline-badge { color: #3730a3; background: #eef2ff; }.trust-badge { color: #047857; background: #ecfdf5; }.trust-badge i { display:inline-block; width:6px; height:6px; background:#10b981; border-radius:50%; margin-right:6px; }
.button,.tool-button,.icon-button { border: 1px solid var(--line); background: #fff; color: #334155; border-radius: 8px; transition: .16s ease; }.button:hover,.tool-button:hover,.icon-button:hover { border-color:#b7c3d2; color:#0f172a; background:#f8fafc; }.button { padding: 8px 13px; font-size: 11px; font-weight: 700; }.button.primary { background: #2563eb; color:white; border-color:#2563eb; }.button.primary:hover { background:#1d4ed8; }.icon-button { width: 31px; height: 31px; display:grid; place-items:center; font-size:17px; }.tool-button { height:31px; padding:0 10px; font-size:10px; font-weight:700; }.tool-button.active { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }.tool-button span { margin-left:5px; background:#e2e8f0; padding:1px 5px; border-radius:99px; }

.dashboard { padding: 18px 22px 22px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.briefing-row { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(510px, 1.45fr); gap: 28px; margin-bottom: 15px; flex: 0 0 auto; }
.document-heading { display:flex; align-items:flex-end; gap:24px; min-width:0; }.document-heading h1 { margin:0; font-size:20px; line-height:1.15; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; }.document-heading > p { color: var(--muted); font-size:11px; line-height:1.55; margin:0; max-width:480px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.metric-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:11px; padding:11px 13px 10px 16px; overflow:hidden; min-width:0; }.metric-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }.metric-card span,.metric-card strong,.metric-card small { display:block; }.metric-card span { color:#64748b; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }.metric-card strong { font-size:23px; margin:2px 0 0; letter-spacing:-.04em; }.metric-card small { color:#94a3b8; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.accent-blue{--accent:#3b82f6}.accent-violet{--accent:#8b5cf6}.accent-amber{--accent:#f59e0b}.accent-red{--accent:#ef4444}
.review-grid { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 322px; gap:14px; }.panel { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 18px #0f172a08; min-height:0; overflow:hidden; }
.drawing-panel { display:flex; flex-direction:column; }.viewer-toolbar { height:50px; flex:0 0 50px; padding:9px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }.page-nav,.viewer-tools { display:flex; align-items:center; gap:6px; }.page-nav select { border:0; background:#f8fafc; color:#334155; font-size:11px; font-weight:650; border-radius:7px; padding:8px 24px 8px 9px; max-width:260px; }.viewer-tools #zoomLabel { font-size:10px; color:#64748b; min-width:38px; text-align:center; }.toolbar-divider { height:20px; width:1px; background:var(--line); margin:0 3px; }
.filter-bar { min-height:39px; flex:0 0 auto; padding:6px 13px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); background:#fbfcfe; }.filter-bar > span { font-size:9px; color:#94a3b8; text-transform:uppercase; font-weight:750; letter-spacing:.06em; }.filter-chips { display:flex; gap:5px; flex:1; overflow-x:auto; scrollbar-width:none; }.filter-chip { white-space:nowrap; border:1px solid #dce3ec; background:#fff; border-radius:99px; color:#475569; padding:5px 9px; font-size:9px; font-weight:700; }.filter-chip i { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; background:var(--chip-color); }.filter-chip.active { border-color:var(--chip-color); box-shadow:inset 0 0 0 1px var(--chip-color); color:#172033; }.note-toggle { white-space:nowrap; color:#64748b; font-size:9px; display:flex; align-items:center; gap:5px; }.note-toggle input { accent-color:#2563eb; }
.viewer-scroller { flex:1; min-height:0; background-color:#e8ecf1; background-image:radial-gradient(#cdd4dd 0.6px, transparent 0.6px); background-size:13px 13px; overflow:auto; position:relative; display:flex; padding:28px; }.canvas-stage { position:relative; margin:auto; flex:0 0 auto; background:white; box-shadow:0 12px 35px #1e293b26; line-height:0; }.canvas-stage canvas,.preview-image { display:block; max-width:none; }.drawing-overlay { position:absolute; inset:0; pointer-events:none; }.overlay-box { position:absolute; border:1.5px solid var(--box-color,#2563eb); background:color-mix(in srgb, var(--box-color,#2563eb) 15%, transparent); border-radius:3px; pointer-events:auto; cursor:pointer; min-width:5px; min-height:5px; transition:.15s; box-shadow:0 0 0 1px #fff8; }.overlay-box:hover { background:color-mix(in srgb, var(--box-color,#2563eb) 28%, transparent); transform:scale(1.04); z-index:4; }.overlay-box.note-region { border-style:dashed; --box-color:#2563eb; background:#2563eb0a; }.overlay-box.annotation { border-radius:50%; --box-color:#f59e0b; box-shadow:0 0 0 4px #f59e0b24; }.canvas-stage.annotation-mode { cursor:crosshair; }.canvas-stage.annotation-mode::after { content:"Click the drawing to place an annotation"; position:absolute; top:12px; left:50%; transform:translateX(-50%); background:#0f172ddd; color:white; font-size:10px; line-height:1; padding:8px 12px; border-radius:99px; pointer-events:none; }
.viewer-message { position:absolute; inset:0; display:grid; place-items:center; color:#64748b; font-size:12px; z-index:10; }.viewer-status { height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; color:#64748b; font-size:9px; border-top:1px solid var(--line); }.viewer-status > span:last-child { display:flex; align-items:center; gap:7px; }
.canvas-stage.highlighting canvas,.canvas-stage.highlighting .preview-image { opacity:.58; filter:grayscale(.85); }

.intelligence-panel { display:flex; flex-direction:column; }.tab-list { height:50px; flex:0 0 50px; display:flex; align-items:flex-end; padding:0 13px; gap:13px; border-bottom:1px solid var(--line); }.tab { height:39px; border:0; border-bottom:2px solid transparent; color:#94a3b8; background:transparent; padding:0 2px; font-size:10px; font-weight:750; }.tab span { background:#f1f5f9; color:#64748b; padding:1px 5px; border-radius:99px; margin-left:3px; }.tab.active { color:#1d4ed8; border-bottom-color:#2563eb; }.panel-search { margin:11px 12px 3px; position:relative; }.panel-search span { position:absolute; left:10px; top:7px; color:#94a3b8; }.panel-search input { width:100%; height:31px; border:1px solid var(--line); background:#f8fafc; border-radius:8px; padding:0 10px 0 28px; color:#334155; font-size:10px; outline:none; }.panel-search input:focus { border-color:#93c5fd; background:#fff; }
.panel-content { flex:1; min-height:0; overflow:auto; padding:8px 12px 18px; }.section-label { margin:12px 1px 7px; display:flex; justify-content:space-between; color:#718096; font-size:9px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }.insight-card,.note-card,.asset-card { border:1px solid var(--line); border-radius:9px; padding:10px; margin-bottom:7px; background:#fff; transition:.15s; }.insight-card:hover,.note-card:hover,.asset-card:hover { border-color:#cbd5e1; box-shadow:0 3px 12px #0f172a09; }.insight-card { border-left:3px solid var(--priority-color,#94a3b8); }.card-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }.card-top strong { font-size:11px; line-height:1.35; }.card-top small { white-space:nowrap; color:#94a3b8; font-size:8px; }.card-copy { color:#64748b; font-size:9px; line-height:1.5; margin:5px 0 0; }.card-meta { display:flex; gap:6px; align-items:center; margin-top:7px; }.pill { padding:2px 6px; border-radius:99px; background:#f1f5f9; color:#64748b; font-size:8px; font-weight:700; }.pill.high { color:#b91c1c;background:#fef2f2; }.pill.medium { color:#b45309;background:#fffbeb; }.confidence { margin-left:auto; font-size:8px; color:#94a3b8; }.source-link { border:0; padding:0; background:transparent; color:#2563eb; font-size:8px; font-weight:700; }.note-card { cursor:pointer; }.note-card.verified { background:#f8fffc; }.verified-mark { color:#059669; }.note-actions { margin-left:auto; display:flex; gap:6px; }.tiny-button { border:0; background:transparent; color:#64748b; padding:2px; font-size:9px; }.tiny-button:hover { color:#2563eb; }.asset-total { display:flex; justify-content:space-between; align-items:center; }.asset-total strong { font-size:11px; }.asset-total b { font-size:20px; }.asset-bar { height:4px; border-radius:3px; background:#eef2f7; margin:8px 0 5px; overflow:hidden; }.asset-bar i { display:block; height:100%; border-radius:3px; background:var(--asset-color,#3b82f6); }.empty-panel { text-align:center; color:#94a3b8; padding:42px 15px; font-size:10px; line-height:1.6; }.empty-panel b { color:#475569; display:block; font-size:12px; margin-bottom:4px; }

.drawer { position:fixed; right:0; top:0; bottom:0; width:370px; background:white; z-index:40; box-shadow:-20px 0 50px #0f172a24; padding:22px; transform:translateX(105%); transition:.24s ease; overflow:auto; }.drawer.open { transform:none; }.drawer-scrim { position:fixed; inset:0; background:#0f172a55; z-index:35; opacity:0; pointer-events:none; transition:.2s; }.drawer-scrim.open { opacity:1; pointer-events:auto; }.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; }.drawer-head h2 { margin:0; font-size:18px; }.drawer-copy { color:#64748b; font-size:11px; line-height:1.55; }.drawer-actions { display:flex; gap:7px; margin:15px 0; }.layer-list { display:grid; gap:5px; }.layer-row { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:8px; padding:8px 9px; font-size:10px; color:#475569; }.layer-row input { accent-color:#2563eb; }.layer-row span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.layer-group-title { color:#94a3b8; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; margin:14px 2px 5px; }
.dialog { width:min(530px,calc(100vw - 32px)); border:0; border-radius:13px; padding:0; box-shadow:0 24px 70px #0f172a44; }.dialog::backdrop { background:#0f172a77; backdrop-filter:blur(2px); }.dialog form { padding:20px; }.dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.dialog h2 { margin:0; font-size:16px; }.dialog label { display:block; color:#475569; font-size:10px; font-weight:700; margin-top:11px; }.dialog input:not([type=checkbox]),.dialog textarea { display:block; width:100%; border:1px solid var(--line); border-radius:8px; margin-top:5px; padding:9px 10px; color:#334155; font-size:11px; line-height:1.5; resize:vertical; }.checkbox-row { display:flex!important; align-items:center; gap:7px; }.checkbox-row input { accent-color:#2563eb; }.dialog-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:18px; }.small-dialog { width:min(430px,calc(100vw - 32px)); }
.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); background:#0f172a; color:white; padding:9px 14px; border-radius:9px; font-size:10px; box-shadow:0 10px 25px #0f172a33; opacity:0; pointer-events:none; transition:.2s; z-index:80; }.toast.show { opacity:1; transform:translate(-50%,0); }
.empty-state { flex:1; display:grid; place-content:center; text-align:center; }.empty-graphic { width:70px; height:70px; border-radius:20px; background:#eaf2ff; color:#2563eb; display:grid; place-items:center; font-size:34px; margin:0 auto 18px; }.empty-state h1 { margin:0; font-size:22px; }.empty-state p { color:#64748b; font-size:12px; }.empty-state code { background:#0f172a; color:#dbeafe; border-radius:8px; padding:10px 14px; font-size:11px; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns:76px minmax(0,1fr); }.sidebar { padding:24px 10px; }.brand { width:48px; padding:10px; }.brand-logo { width:156px; max-width:none; flex:none; }.nav-item:not(.active){ font-size:0; }.nav-item { justify-content:center; }.nav-item.active { font-size:0; }.nav-icon { font-size:18px; }.portfolio-card,.sidebar-foot div { display:none; }.briefing-row { grid-template-columns:1fr; }.document-heading { display:none; }.dashboard { padding-top:12px; }.review-grid { grid-template-columns:minmax(0,1fr) 290px; }
}
@media (max-width: 820px) {
  body { overflow:auto; }.app-shell { display:block; height:auto; }.sidebar { display:none; }.workspace { height:auto; min-height:100vh; }.topbar { position:sticky; top:0; z-index:20; padding:10px 13px; }.topbar-actions .trust-badge,.topbar-actions .discipline-badge { display:none; }.select-shell select { width:58vw; }.dashboard { overflow:visible; }.metric-grid { grid-template-columns:1fr 1fr; }.review-grid { display:block; }.drawing-panel { height:68vh; margin-bottom:12px; }.intelligence-panel { height:65vh; }.viewer-tools #annotationButton { display:none; }.drawer { width:min(90vw,370px); }
}
@media print {
  .sidebar,.viewer-toolbar,.filter-bar,.topbar-actions,.panel-search { display:none!important; }.app-shell { display:block; }.workspace { height:auto; }.topbar { border:0; }.dashboard { overflow:visible; }.review-grid { grid-template-columns:2fr 1fr; }.drawing-panel,.intelligence-panel { height:720px; box-shadow:none; }
}

/* Interaction and review clarity overrides. */
.filter-chip i { width:7px; height:7px; }
.filter-chip.active { border-color:var(--chip-color); background:color-mix(in srgb,var(--chip-color) 18%,white); box-shadow:inset 0 0 0 1px var(--chip-color),0 2px 8px color-mix(in srgb,var(--chip-color) 24%,transparent); color:#0f172a; }
.filter-chip.zero { opacity:.62; }
.viewer-scroller { display:block; padding:24px; cursor:grab; overscroll-behavior:contain; }
.viewer-scroller.dragging { cursor:grabbing; user-select:none; }
.canvas-stage { margin:0 auto; flex:none; }
.overlay-box { border-width:2px; background:color-mix(in srgb,var(--box-color,#2563eb) 25%,transparent); min-width:9px; min-height:9px; box-shadow:0 0 0 2px #fff,0 0 0 4px color-mix(in srgb,var(--box-color,#2563eb) 80%,transparent),0 2px 8px #0f172a55; }
.overlay-box:hover { background:color-mix(in srgb,var(--box-color,#2563eb) 48%,transparent); transform:none; }
.overlay-box.asset-region { animation:highlight-pulse 1.8s ease-in-out infinite; }
.overlay-box.note-region { background:#2563eb16; box-shadow:0 0 0 1px #fff,0 0 0 2px #2563ebcc; }
.overlay-box.page-region { pointer-events:none; box-shadow:none; border-width:2px; background:color-mix(in srgb,var(--box-color) 6%,transparent); min-width:0;min-height:0; }
.overlay-box.page-region::after { content:attr(data-label); position:absolute; left:0; top:0; transform:translateY(-100%); color:#fff; background:var(--box-color); font-size:8px; font-weight:800; line-height:1; padding:4px 6px; border-radius:4px 4px 0 0; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.overlay-box.annotation { box-shadow:0 0 0 4px #f59e0b34,0 2px 8px #0f172a44; }
@keyframes highlight-pulse { 0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 4px color-mix(in srgb,var(--box-color) 85%,transparent),0 2px 8px #0f172a55} 50%{box-shadow:0 0 0 2px #fff,0 0 0 7px color-mix(in srgb,var(--box-color) 45%,transparent),0 3px 11px #0f172a66} }
.drawer-actions { margin-bottom:8px; flex-wrap:wrap; }
.layer-selection-summary { font-size:10px; font-weight:700; color:#475569; background:#f1f5f9; border-radius:7px; padding:7px 9px; margin-bottom:10px; }
.layer-row { color:#64748b; background:#f8fafc; padding:9px 10px; transition:.15s; }
.layer-row.active { border-color:#93c5fd; background:#eff6ff; color:#1e3a8a; box-shadow:inset 3px 0 #3b82f6; }
.layer-row input { width:14px; height:14px; }
.filter-bar { align-items:flex-start; }
.filter-bar > span { padding-top:6px; }
.filter-chips { flex-wrap:wrap; overflow:visible; row-gap:5px; }
.filter-bar .note-toggle { padding-top:5px; }
