/* Smart Permit Checker — demo UI. Professional, calm, "dress to impress". */
:root {
    --spc-ink: #10241d;
    --spc-green: #0b3d2e;
    --spc-green-2: #12664c;
    --spc-accent: #1f9d74;
    --spc-bg: #f4f7f5;
    --spc-card: #ffffff;
    --spc-line: #dbe5e0;
    --spc-muted: #61726b;
    --cat-meets: #1f9d74;
    --cat-fail: #d64545;
    --cat-info: #b0872a;
    --cat-uncertain: #2b6cb0;
    --shadow: 0 6px 24px rgba(16, 36, 29, .08);
    --radius: 14px;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--spc-bg);
    color: var(--spc-ink);
    line-height: 1.5;
}

/* ---- boot splash ---- */
.spc-boot { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 1rem; }
.spc-boot-logo { font-weight: 800; letter-spacing: .08em; font-size: 2.5rem; color: var(--spc-green); }
.spc-boot-text { color: var(--spc-muted); }

/* ---- buttons ---- */
.spc-btn { border: 1px solid var(--spc-line); background: #fff; color: var(--spc-ink); border-radius: 10px; padding: .6rem 1.1rem; font-weight: 600; cursor: pointer; transition: .15s; }
.spc-btn:hover:not(:disabled) { border-color: var(--spc-accent); }
.spc-btn:disabled { opacity: .45; cursor: not-allowed; }
.spc-btn-primary { background: var(--spc-green); color: #fff; border-color: var(--spc-green); }
.spc-btn-primary:hover:not(:disabled) { background: var(--spc-green-2); border-color: var(--spc-green-2); }
.spc-btn-block { width: 100%; margin-top: .5rem; }
.spc-btn-sm { padding: .3rem .7rem; font-size: .85rem; }

/* ---- login ---- */
.spc-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background: radial-gradient(1200px 500px at 50% -10%, #e8f3ee, var(--spc-bg)); }
.spc-login-card { background: var(--spc-card); border: 1px solid var(--spc-line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 2.2rem; width: min(430px, 100%); text-align: center; }
.spc-login-logo { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 18px;
    background: var(--spc-green); color: #fff; font-weight: 800; letter-spacing: .06em; font-size: 1.5rem; margin-bottom: .8rem; }
.spc-login-card h1 { font-size: 1.4rem; margin: .2rem 0 .1rem; }
.spc-login-by { color: var(--spc-muted); font-weight: 500; font-size: .95rem; }
.spc-login-sub { color: var(--spc-muted); font-size: .95rem; margin: .6rem 0 1.2rem; }
.spc-input { width: 100%; padding: .7rem .9rem; border: 1px solid var(--spc-line); border-radius: 10px; font-size: 1rem; }
.spc-input:focus { outline: 2px solid var(--spc-accent); border-color: var(--spc-accent); }
.spc-login-error { color: var(--cat-fail); font-size: .9rem; margin-top: .6rem; }
.spc-login-help { margin-top: 1.4rem; color: var(--spc-muted); font-size: .82rem; }
.spc-login-help a { color: var(--spc-accent); }

/* ---- shell ---- */
.spc-shell { min-height: 100vh; }
.spc-topbar { display: flex; align-items: baseline; gap: .6rem; padding: .9rem 1.4rem; background: var(--spc-green); color: #fff; }
.spc-brand { font-weight: 700; letter-spacing: .02em; }
.spc-brand-by { color: #b8d8cc; font-size: .85rem; }
.spc-tenant { margin-left: auto; font-size: .85rem; color: #cfe6dc; }
.spc-main { max-width: 1080px; margin: 1.6rem auto; padding: 0 1.2rem; display: flex; flex-direction: column; gap: 1rem; }

/* ---- accordion panels ---- */
.spc-panel { background: var(--spc-card); border: 1px solid var(--spc-line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.spc-panel.locked { opacity: .5; }
.spc-panel-head { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: none; border: 0; padding: 1rem 1.2rem; cursor: pointer; }
.spc-panel-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--spc-bg); color: var(--spc-green); font-weight: 700; border: 1px solid var(--spc-line); }
.spc-panel.open .spc-panel-num { background: var(--spc-green); color: #fff; border-color: var(--spc-green); }
.spc-panel-title { font-weight: 700; }
.spc-panel-summary { margin-left: auto; color: var(--spc-muted); font-size: .9rem; }
.spc-panel-body { padding: 0 1.2rem 1.3rem; }
.spc-hint { color: var(--spc-muted); }
.spc-actions { margin-top: 1rem; display: flex; gap: .6rem; justify-content: flex-end; }

/* ---- sample picker ---- */
.spc-sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.spc-sample { display: flex; flex-direction: column; gap: .35rem; padding: .9rem; border: 1px solid var(--spc-line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: .15s; }
.spc-sample:hover { border-color: var(--spc-accent); }
.spc-sample.sel { border-color: var(--spc-green); box-shadow: 0 0 0 2px rgba(31,157,116,.2); }
.spc-sample-kind { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: #fff; background: var(--spc-green-2); padding: .1rem .45rem; border-radius: 6px; }
.spc-sample-name { font-weight: 600; word-break: break-word; }
.spc-sample-upload { border-style: dashed; }
.spc-sample-tag { align-self: flex-start; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--spc-accent); }

/* ---- upload control ---- */
.spc-upload { margin-top: .9rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.spc-upload-btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px dashed var(--spc-accent); border-radius: 10px; color: var(--spc-accent); font-weight: 600; cursor: pointer; background: #fff; }
.spc-upload-btn:hover { background: rgba(31,157,116,.06); }
.spc-upload-btn input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.spc-upload-err { color: #c0392b; font-size: .85rem; }

/* ---- workspace (panel 2) ---- */
.spc-workspace { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
.spc-workspace .spc-actions { grid-column: 1 / -1; }
/* Reserve a top strip for the (absolutely-positioned) controls toolbar so it never overlaps or
   crops the rendered page. The toolbar can wrap to 2 rows, so the strip is generous. */
.spc-canvas { position: relative; min-height: 320px; border: 1px dashed var(--spc-line); border-radius: 12px; background: repeating-linear-gradient(45deg, #fafcfb, #fafcfb 12px, #f2f6f4 12px, #f2f6f4 24px); display: grid; place-items: center; padding-top: 90px; }
.spc-canvas-placeholder { color: var(--spc-muted); font-weight: 600; text-align: center; padding: 1rem; }
.spc-canvas-placeholder a { color: var(--spc-accent); }

/* PDF embed fills the canvas */
.spc-doc-pdf { width: 100%; height: 100%; min-height: 460px; border: 0; border-radius: 12px; background: #fff; }

/* Rendered page + detection-box overlay */
.spc-overlay-wrap { position: relative; width: 100%; align-self: start; justify-self: stretch; line-height: 0; background: #fff; border-radius: 12px; overflow: hidden; }
.spc-page-img { display: block; width: 100%; height: auto; }
.spc-obox { position: absolute; border: 2px solid var(--spc-accent); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset; pointer-events: auto; cursor: pointer; transition: box-shadow .15s ease, opacity .15s ease; }
.spc-obox-tag { position: absolute; top: -1.15rem; left: -2px; font: 600 10px/1.4 system-ui, sans-serif; color: #fff; background: var(--spc-accent); padding: 0 5px; border-radius: 3px 3px 0 0; white-space: nowrap; }
/* Selection: highlight the chosen box, dim the rest so it stands out. */
.spc-obox.sel { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px currentColor, 0 0 14px rgba(0,0,0,.35); z-index: 4; }
.spc-obox.dim { opacity: .35; }
.spc-obox:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset, 0 0 8px rgba(0,0,0,.25); }
.spc-obox.box-door { border-color: #1f9d74; } .spc-obox.box-door .spc-obox-tag { background: #1f9d74; }
.spc-obox.box-window { border-color: #c98a1e; } .spc-obox.box-window .spc-obox-tag { background: #c98a1e; }
.spc-obox.box-corridor { border-color: #2f6f8f; } .spc-obox.box-corridor .spc-obox-tag { background: #2f6f8f; }
.spc-obox.box-exit { border-color: #8a5cf6; } .spc-obox.box-exit .spc-obox-tag { background: #8a5cf6; }
.spc-obox.box-room { border-color: #6b7280; } .spc-obox.box-room .spc-obox-tag { background: #6b7280; }
.spc-obox.box-stair { border-color: #b45309; } .spc-obox.box-stair .spc-obox-tag { background: #b45309; }

/* Findings overlay — compliance verdicts placed on the drawing, colour-coded by category.
   Dashed border distinguishes a "verdict" box from a solid "element" box. */
.spc-fbox { position: absolute; border: 2.5px dashed var(--cat-uncertain); border-radius: 3px;
  background: color-mix(in srgb, var(--cat-uncertain) 12%, transparent);
  pointer-events: auto; cursor: pointer; transition: box-shadow .15s ease, opacity .15s ease; z-index: 2; }
.spc-fbox-tag { position: absolute; top: -1.15rem; left: -2px; font: 700 10px/1.4 system-ui, sans-serif;
  color: #fff; background: var(--cat-uncertain); padding: 0 5px; border-radius: 3px 3px 0 0; white-space: nowrap; }
.spc-fbox.sel { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px currentColor, 0 0 14px rgba(0,0,0,.4); z-index: 5; }
.spc-fbox.dim { opacity: .3; }
.spc-fbox:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 0 8px rgba(0,0,0,.3); }
.spc-fbox.cat-Meets { border-color: var(--cat-meets); background: color-mix(in srgb, var(--cat-meets) 14%, transparent); }
.spc-fbox.cat-Meets .spc-fbox-tag { background: var(--cat-meets); }
.spc-fbox.cat-DoesNotMeet { border-color: var(--cat-fail); background: color-mix(in srgb, var(--cat-fail) 14%, transparent); }
.spc-fbox.cat-DoesNotMeet .spc-fbox-tag { background: var(--cat-fail); }
.spc-fbox.cat-InformationNotAvailable { border-color: var(--cat-info); background: color-mix(in srgb, var(--cat-info) 14%, transparent); }
.spc-fbox.cat-InformationNotAvailable .spc-fbox-tag { background: var(--cat-info); }
.spc-fbox.cat-Uncertain { border-color: var(--cat-uncertain); background: color-mix(in srgb, var(--cat-uncertain) 14%, transparent); }
.spc-fbox.cat-Uncertain .spc-fbox-tag { background: var(--cat-uncertain); }

.spc-canvas-toolbar { position: absolute; top: 0px; right: 0px; display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.92); border: 1px solid var(--spc-line); border-radius: 8px; padding: .3rem .55rem; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.08); flex-wrap: wrap; max-width: 60%; }
.spc-toggle { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--spc-ink); cursor: pointer; }
.spc-toggle.disabled { color: var(--spc-muted); cursor: default; opacity: .7; }
.spc-toggle-findings span { color: var(--cat-fail); }
.spc-toggle-findings.disabled span { color: var(--spc-muted); }
.spc-page-nav { display: flex; gap: .25rem; }
.spc-page-btn { font-size: .72rem; font-weight: 600; border: 1px solid var(--spc-line); background: #fff; border-radius: 5px; padding: .1rem .4rem; cursor: pointer; }
.spc-page-btn.sel { background: var(--spc-green); color: #fff; border-color: var(--spc-green); }

/* IFC / BIM structured preview */
.spc-doc-bim { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; }
.spc-doc-bim-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--spc-line); background: var(--spc-bg); }
.spc-doc-bim-head > span:nth-child(2) { font-weight: 600; }
.spc-doc-dl { margin-left: auto; font-size: .82rem; color: var(--spc-accent); text-decoration: none; }
.spc-doc-dl:hover { text-decoration: underline; }
.spc-doc-bim-body { padding: .8rem .9rem; overflow: auto; }
.spc-bim-elements { list-style: none; margin: .4rem 0 0; padding: 0; }
.spc-bim-elements li { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--spc-line); border-radius: 10px; margin-bottom: .4rem; }
.spc-bim-type { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--spc-green-2); padding: .12rem .5rem; border-radius: 6px; }
.spc-bim-label { font-weight: 600; }
.spc-bim-dim { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--spc-muted); }
/* Start below the reserved 90px top strip so the spinner/narration never sits behind the (higher
   z-index) controls toolbar during processing. Covers the drawing area, clears the toolbar. */
.spc-overlay { position: absolute; top: 90px; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.78); display: grid; place-items: center; gap: .5rem; grid-auto-flow: row; color: var(--spc-green); font-weight: 600; z-index: 2; text-align: center; padding: 1rem; }
.spc-overlay-sub { font-size: .82rem; font-weight: 500; color: var(--spc-muted); max-width: 320px; }
.spc-overlay-title { font-size: .95rem; font-weight: 600; }
.spc-progressbar { width: 280px; max-width: 70vw; height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.spc-progressbar-fill { height: 100%; background: linear-gradient(90deg, var(--spc-green), #2fb98a); border-radius: 999px; transition: width .4s ease; }
.spc-progress-meta { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; font-size: .8rem; font-weight: 500; color: var(--spc-muted); }
.spc-spinner { width: 42px; height: 42px; border: 4px solid var(--spc-line); border-top-color: var(--spc-accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.spc-side { display: flex; flex-direction: column; gap: 1rem; }
.spc-stagelist { border: 1px solid var(--spc-line); border-radius: 12px; padding: .6rem; }
.spc-stagerow { display: flex; align-items: center; gap: .55rem; padding: .35rem .3rem; font-size: .9rem; }
.spc-stage-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--spc-line); }
.spc-stagerow.running .spc-stage-dot { background: var(--cat-uncertain); animation: pulse 1s infinite; }
.spc-stagerow.done .spc-stage-dot { background: var(--cat-meets); }
.spc-stagerow.error .spc-stage-dot { background: #c0392b; }
.spc-stagerow.error .spc-stage-status { color: #c0392b; font-weight: 600; }
.spc-stage-status { margin-left: auto; color: var(--spc-muted); font-size: .82rem; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---- run error ---- */
.spc-run-error { display: flex; align-items: center; gap: .7rem; border: 1px solid #e0a0a0; border-left: 4px solid #c0392b; background: #fdf0f0; border-radius: 10px; padding: .6rem .7rem; font-size: .86rem; color: #7a2222; }
.spc-run-error button { margin-left: auto; white-space: nowrap; }

/* ---- low-confidence extraction warning ---- */
.spc-extract-warn { border: 1px solid #e6b800; border-left: 4px solid #e6b800; background: #fff9e6; border-radius: 10px; padding: .6rem .7rem; font-size: .85rem; line-height: 1.4; color: #6b5600; }
.spc-extract-warn strong { color: #7a4b00; }
.spc-extract-vlm { border-color: #6d5cf6; border-left-color: #6d5cf6; background: #f2f0ff; color: #3f3a6b; }
.spc-extract-vlm strong { color: #4a3fb0; }
.spc-extract-smart { border-color: #0e9f6e; border-left-color: #0e9f6e; background: #ecfdf5; color: #1c5f4a; }
.spc-extract-smart strong { color: #0b6e4f; }
.spc-smart-pages { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.spc-smart-label { font-size: .78rem; font-weight: 600; opacity: .8; margin-right: .15rem; }
.spc-smart-chip { font-size: .72rem; font-weight: 600; background: #d1fae5; color: #065f46; border-radius: 999px; padding: .08rem .5rem; text-transform: capitalize; }
.spc-smart-coherence { margin-top: .5rem; }
.spc-smart-coherence summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: #0b6e4f; }
.spc-smart-coherence ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .78rem; color: #3a5a50; }
.spc-smart-coherence li { margin: .15rem 0; }

/* ---- Element source badge (CAD layers vs extraction) ---- */
.spc-source-badge { display: block; font-size: .78rem; line-height: 1.35; border-radius: 8px;
  padding: .45rem .6rem; margin-bottom: .5rem; border: 1px solid transparent; }
.spc-source-badge code { background: rgba(0,0,0,.06); border-radius: 4px; padding: 0 .2rem; font-size: .74rem; }
.spc-source-tag { display: inline-block; font-weight: 800; font-size: .66rem; letter-spacing: .03em;
  text-transform: uppercase; border-radius: 999px; padding: .1rem .5rem; margin-right: .4rem; }
.src-layers { background: #d1fae5; color: #064e3b; border-color: #6ee7b7; }
.src-layers .spc-source-tag { background: #059669; color: #fff; }
.src-mixed { background: #e0f2fe; color: #0c4a6e; border-color: #7dd3fc; }
.src-mixed .spc-source-tag { background: #0284c7; color: #fff; }
.src-extraction { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.src-extraction .spc-source-tag { background: #d97706; color: #fff; }

/* ---- Top-down per-page requirements review ---- */
.spc-review { border: 1px solid var(--spc-line); border-radius: 12px; padding: .6rem .7rem; margin-top: .3rem; }
.spc-review h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .95rem; margin: .1rem 0 .3rem; }
.spc-review-legend { margin-left: auto; display: flex; gap: .3rem; }
.spc-rv { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .08rem .45rem; }
.spc-rv.ok { background: #d1fae5; color: #065f46; }
.spc-rv.miss { background: #fee2e2; color: #991b1b; }
.spc-rv.hitl { background: #fef3c7; color: #92400e; }
.spc-review-page { border-top: 1px solid var(--spc-line); padding: .35rem 0; }
.spc-review-page:first-of-type { border-top: none; }
.spc-review-page summary { cursor: pointer; display: flex; align-items: center; gap: .4rem; font-size: .82rem; }
.spc-review-pageno { font-weight: 700; color: var(--spc-green-2); }
.spc-review-pagetype { font-size: .72rem; text-transform: capitalize; background: #eef2f7; border-radius: 6px; padding: .05rem .4rem; color: #445; }
.spc-review-guide { font-size: .72rem; color: #6b7280; }
.spc-review-summary { margin-left: auto; font-size: .74rem; font-weight: 700; color: #374151; }
.spc-review-list { list-style: none; margin: .35rem 0 0; padding: 0; }
.spc-review-item { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .3rem .5rem; padding: .2rem 0; font-size: .78rem; border-top: 1px dashed #eef0f3; }
.spc-review-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.status-satisfied .spc-review-dot { background: #0e9f6e; }
.status-not-shown .spc-review-dot { background: #ef4444; }
.status-needs-review .spc-review-dot { background: #f59e0b; }
.spc-review-cat { font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: #6b7280; text-transform: uppercase; }
.spc-review-desc { color: #1f2937; }
.spc-review-ev { grid-column: 3; font-size: .72rem; color: #6b7280; font-style: italic; }
.spc-review-clause { grid-column: 3; font-size: .7rem; color: #4a3fb0; }

/* ---- Stage 2 reconstruction ---- */
.spc-recon { border: 1px solid var(--spc-line); border-radius: 12px; padding: .6rem .7rem; }
.spc-recon h3 { display: flex; align-items: center; gap: .5rem; font-size: .95rem; margin: .1rem 0 .35rem; }
.spc-recon-fid { margin-left: auto; font-size: .78rem; font-weight: 700; color: #fff; background: var(--spc-green-2); padding: .1rem .5rem; border-radius: 6px; }
.spc-recon-img { width: 100%; border: 1px solid var(--spc-line); border-radius: 8px; background: #fff; }

/* ---- accordion (collapsible Elements panel) ---- */
.spc-accordion { border: 1px solid var(--spc-line); border-radius: 10px; margin-bottom: .5rem; overflow: hidden; }
.spc-accordion-head { display: flex; align-items: center; gap: .4rem; width: 100%; background: #f7f9fb;
  border: none; padding: .5rem .6rem; cursor: pointer; font-size: .95rem; font-weight: 600; color: var(--spc-ink); text-align: left; }
.spc-accordion-head:hover { background: #eef2f6; }
.spc-accordion.open .spc-accordion-head { border-bottom: 1px solid var(--spc-line); }
.spc-accordion-caret { font-size: .8rem; color: var(--spc-muted); width: 1rem; }
.spc-accordion-title { flex: 1; }
.spc-accordion-body { padding: .5rem .6rem .6rem; }

/* ---- interactive elements list ---- */
.spc-elements h3 { font-size: .95rem; margin: .2rem 0 .35rem; display: flex; align-items: center; gap: .4rem; }
.spc-elements-count { font-size: .72rem; font-weight: 700; color: #fff; background: var(--spc-accent); border-radius: 999px; padding: .05rem .45rem; }
.spc-element-list { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; max-height: 220px; overflow-y: auto; }
.spc-element-row { display: flex; align-items: center; gap: .45rem; padding: .3rem .45rem; border: 1px solid var(--spc-line); border-radius: 8px; cursor: pointer; font-size: .82rem; transition: background .12s ease, border-color .12s ease; }
.spc-element-row:hover { background: #f3f6f9; }
.spc-element-row.sel { background: #eef7f3; border-color: var(--spc-green); box-shadow: 0 0 0 1px var(--spc-green) inset; }
.spc-element-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--spc-accent); flex: none; }
.spc-element-row.box-door .spc-element-dot { background: #1f9d74; }
.spc-element-row.box-window .spc-element-dot { background: #c98a1e; }
.spc-element-row.box-corridor .spc-element-dot { background: #2f6f8f; }
.spc-element-row.box-exit .spc-element-dot { background: #8a5cf6; }
.spc-element-row.box-room .spc-element-dot { background: #6b7280; }
.spc-element-row.box-stair .spc-element-dot { background: #b45309; }
.spc-element-type { font-weight: 600; }
.spc-element-label { color: var(--spc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.spc-element-page { font-size: .7rem; font-weight: 600; color: var(--spc-muted); }

/* ---- findings ---- */
.spc-findings h3, .spc-audit h3 { font-size: .95rem; margin: .2rem 0 .5rem; }
.spc-reg-note { font-size: .78rem; color: var(--spc-muted); background: #f6f8fa; border: 1px solid var(--spc-line); border-radius: 8px; padding: .45rem .55rem; margin-bottom: .55rem; line-height: 1.45; }
.spc-reg-note a { color: var(--spc-accent); font-weight: 600; }
.spc-finding-cite a { color: inherit; text-decoration: underline dotted; }
.spc-finding { border: 1px solid var(--spc-line); border-left-width: 4px; border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem; transition: background .12s ease, box-shadow .12s ease; }
.spc-finding.locatable { cursor: pointer; }
.spc-finding.locatable:hover { background: #f7f9fb; }
.spc-finding.sel { box-shadow: 0 0 0 2px var(--cat-uncertain) inset; background: #f4f8fc; }
.spc-finding.cat-DoesNotMeet.sel { box-shadow: 0 0 0 2px var(--cat-fail) inset; }
.spc-finding.cat-Meets.sel { box-shadow: 0 0 0 2px var(--cat-meets) inset; }
.spc-finding-locate { margin-left: auto; color: var(--spc-muted); font-size: 1rem; line-height: 1; }
.spc-finding.locatable:hover .spc-finding-locate { color: var(--spc-ink); }
.spc-finding.cat-Meets { border-left-color: var(--cat-meets); }
.spc-finding.cat-DoesNotMeet { border-left-color: var(--cat-fail); }
.spc-finding.cat-InformationNotAvailable { border-left-color: var(--cat-info); }
.spc-finding.cat-Uncertain { border-left-color: var(--cat-uncertain); }
.spc-finding-head { display: flex; align-items: center; gap: .5rem; }
.spc-finding-title { font-weight: 600; font-size: .9rem; }
.spc-finding-cite { color: var(--spc-muted); font-size: .78rem; }
.spc-finding-expl { font-size: .85rem; margin-top: .25rem; }
.spc-adjudicate { display: flex; gap: .4rem; margin-top: .5rem; }
.spc-badge { font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; color: #fff; white-space: nowrap; }
.spc-badge.cat-Meets { background: var(--cat-meets); }
.spc-badge.cat-DoesNotMeet { background: var(--cat-fail); }
.spc-badge.cat-InformationNotAvailable { background: var(--cat-info); }
.spc-badge.cat-Uncertain { background: var(--cat-uncertain); }

/* ---- audit ---- */
.spc-audit ul { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; font-size: .8rem; }
.spc-audit li { padding: .3rem 0; border-bottom: 1px solid var(--spc-line); }
.spc-audit time { color: var(--spc-muted); margin-right: .4rem; }

/* ---- certificate (panel 3) ---- */
.spc-certificate { text-align: center; border: 2px solid var(--spc-green); border-radius: 16px; padding: 2rem; background: linear-gradient(180deg, #fff, #f6faf8); }
.spc-cert-seal { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--spc-green); color: #fff; font-weight: 800; margin-bottom: .6rem; }
.spc-cert-project { color: var(--spc-muted); }
.spc-cert-tally { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; font-weight: 700; }
.spc-cert-tally .cat-Meets { color: var(--cat-meets); }
.spc-cert-tally .cat-DoesNotMeet { color: var(--cat-fail); }
.spc-cert-tally .cat-InformationNotAvailable { color: var(--cat-info); }
.spc-cert-tally .cat-Uncertain { color: var(--cat-uncertain); }
.spc-cert-note { color: var(--spc-muted); font-size: .82rem; }

/* ---- blazor error ---- */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #ffe9e9; color: #7a1f1f; padding: .7rem 1rem; box-shadow: 0 -2px 10px rgba(0,0,0,.1); }
#blazor-error-ui .dismiss, #blazor-error-ui .reload { cursor: pointer; margin-left: 1rem; }

@media (max-width: 760px) { .spc-workspace { grid-template-columns: 1fr; } }