html { scrollbar-gutter: stable; }
html, body { font-family: Segoe UI, Arial, sans-serif; margin: 0; background: #eef1f5; color: #202733; }
.topbar { background: #1e3557; color: white; padding: 1rem 2rem; display: flex; gap: 1.5rem; align-items: baseline; }
.topbar span, .muted { color: #687487; font-size: .9rem; }
.topbar span { color: #cbd6e5; }
.content { max-width: none; margin: 0 auto; padding: 1.5rem; }
.toolbar, .drawing-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
h1, h2 { margin-top: 0; } h1 { margin-bottom: .25rem; } h2 { font-size: 1rem; color: #1e3557; }
.workspace { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.workspace.expanded { grid-template-columns: 260px minmax(680px, 1fr) 280px; }
.workspace.dynamic { width: 100%; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 0; }
.workspace.dynamic > .panel { min-width: 0; }
.workspace.dynamic .drawing-panel { min-width: 0; }
.workspace.dynamic .controls { box-sizing: border-box; }
.workspace.dynamic .summary-panel { box-sizing: border-box; min-width: 0; }
.resize-handle { align-self: stretch; cursor: col-resize; position: relative; min-height: 120px; }
.resize-handle::before { content: ""; position: absolute; inset: 0 3px; border-radius: 999px; background: #c9d6e4; opacity: .55; transition: background .15s, opacity .15s; }
.resize-handle:hover::before, .workspace.resizing .resize-handle::before { background: #1e6fb8; opacity: 1; }
.workspace.resizing { cursor: col-resize; user-select: none; }
.workspace.resizing iframe, .workspace.resizing svg { pointer-events: none; }
.panel { background: white; border: 1px solid #d7dce4; border-radius: 5px; padding: 1rem; box-shadow: 0 2px 5px #13223812; }
.controls details { border: 1px solid #e1e5eb; border-radius: 4px; margin-bottom: .75rem; padding: .65rem; background: #fbfcfe; }
.controls summary { color: #1e3557; cursor: pointer; font-weight: 600; }
.controls details[open] summary { margin-bottom: .75rem; }
.summary-panel h2:not(:first-child) { border-top: 1px solid #e1e5eb; margin-top: 1rem; padding-top: 1rem; }
.controls label { display: block; font-size: .85rem; margin-bottom: .75rem; }
.controls input, .controls select, .controls textarea { box-sizing: border-box; display: block; margin-top: .25rem; padding: .42rem; width: 100%; border: 1px solid #bfc7d3; border-radius: 3px; background: #fff; }
.controls textarea { min-height: 70px; resize: vertical; }
.calculated-geometry { background: #edf3f8; border: 1px solid #c9d6e4; border-radius: 4px; display: grid; font-size: .8rem; gap: .35rem .65rem; grid-template-columns: 1fr 1fr; margin: .25rem 0 .75rem; padding: .55rem .65rem; }
.calculated-geometry span { color: #43556b; }
.calculated-geometry strong { color: #1e3557; float: right; }
.lean-to-controls { margin-top: .8rem; }
.lean-to-side + .lean-to-side { border-top: 1px solid #d7dee8; margin-top: .7rem; padding-top: .7rem; }
.controls .lean-to-toggle { align-items: center; display: flex; font-weight: 600; gap: .5rem; }
.controls .lean-to-toggle input { display: inline-block; margin: 0; width: auto; }
.lean-to-geometry { grid-template-columns: 1fr; }
.section-subheading { border-top: 1px solid #d7dee8; color: #1e3557; font-size: .9rem; margin: 1rem 0 .65rem; padding-top: .75rem; }
.button { border: 0; border-radius: 3px; padding: .55rem 1rem; background: #1e6fb8; color: white; cursor: pointer; }
.button.secondary { background: #687487; }
.button.analysis-button { background: #255d38; }
.advanced-toolbar { align-items: center; background: #f7fbff; border: 1px solid #c9d6e4; border-radius: 4px; display: flex; gap: .65rem; margin: 0 0 .75rem; min-height: 32px; padding: .4rem .65rem; }
.advanced-toolbar strong { color: #1e3557; font-size: .82rem; margin-right: .15rem; }
.button.small { padding: .4rem .6rem; font-size: .8rem; }
.button.danger { background: #b84a35; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-row { display: flex; gap: .5rem; margin: .65rem 0 .85rem; }
.button-row.vertical { display: grid; }
.toggle-pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #c9d6e4; border-radius: 999px; padding: .4rem .65rem; background: white; color: #1e3557; font-size: .82rem; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #13223866; padding: clamp(.4rem, 2vh, 1rem); }
.frame-uls-html-backdrop { background: #f3f6fa; padding: clamp(.15rem, .8vw, .75rem); }
.modal-dialog { width: min(420px, 100%); background: white; border: 1px solid #d7dce4; border-radius: 6px; box-shadow: 0 18px 45px #13223840; padding: 1.25rem; }
.modal-dialog.site-options-dialog { --site-dialog-gap: .75rem; --site-map-max-height: clamp(150px, 34dvh, 280px); --site-results-max-height: clamp(110px, 21dvh, 180px); max-height: calc(100dvh - clamp(.8rem, 4vh, 2rem)); overflow-y: auto; padding: clamp(.75rem, 2.4vh, 1.25rem); width: min(520px, 100%); }
.modal-dialog h2 { margin-bottom: .5rem; }
.modal-dialog p { margin: 0 0 1rem; color: #43556b; }
.modal-actions { display: flex; justify-content: flex-end; }
.site-options-form { display: grid; gap: var(--site-dialog-gap); }
.site-options-dialog label { align-items: center; color: #1e3557; display: grid; font-size: .9rem; font-weight: 600; gap: .65rem; grid-template-columns: 95px minmax(0, 1fr); margin: 0; }
.site-options-dialog input, .site-options-dialog select { box-sizing: border-box; display: block; min-height: 38px; padding: .48rem .55rem; width: 100%; border: 1px solid #b8c5d4; border-radius: 5px; background: #fff; color: #202733; }
.site-options-dialog input:focus, .site-options-dialog select:focus { border-color: #1e6fb8; box-shadow: 0 0 0 3px #1e6fb829; outline: none; }
.site-options-spacer { min-height: clamp(.25rem, 1.4vh, .75rem); }
.site-options-actions { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; margin-top: .25rem; }
.site-options-actions .button { border-radius: 5px; min-width: 110px; }
.site-options-actions .button:first-child { grid-column: 2; }
.site-options-actions .button:last-child { grid-column: 3; justify-self: end; }
.site-options-loading { align-items: center; background: #f7fbff; border: 1px solid #c9d6e4; border-radius: 6px; color: #1e3557; display: grid; gap: .2rem .65rem; grid-template-columns: auto 1fr; margin: 0 0 var(--site-dialog-gap); padding: .65rem .75rem; }
.site-options-loading .spinner { animation: spin .8s linear infinite; border: 3px solid #c9d6e4; border-top-color: #1e6fb8; border-radius: 999px; grid-row: span 2; height: 1.35rem; width: 1.35rem; }
.site-options-loading small { color: #687487; }
@keyframes spin { to { transform: rotate(360deg); } }
.site-lookup-message { background: #edf3f8; border: 1px solid #c9d6e4; border-radius: 6px; color: #1e3557; margin: var(--site-dialog-gap) 0; padding: .65rem .75rem; }
.site-wind-card { background: #f7fbff; border: 1px solid #c9d6e4; border-radius: 6px; display: grid; gap: clamp(.35rem, 1.5vh, .65rem); margin: var(--site-dialog-gap) 0; padding: clamp(.5rem, 1.8vh, .75rem); }
.site-wind-card strong { color: #1e3557; display: block; }
.site-wind-card span { color: #687487; font-size: .82rem; }
.site-wind-card img, .summary-map { border: 1px solid #d7dce4; border-radius: 4px; display: block; height: auto; max-width: 100%; }
.site-wind-card img { max-height: var(--site-map-max-height); object-fit: contain; width: 100%; }
.summary-map { background: #fff; cursor: zoom-in; height: 88px; max-height: 88px; object-fit: contain; position: relative; transform-origin: right center; transition: box-shadow .5s ease, transform .5s ease; width: min(100%, 180px); z-index: 1; }
.summary-map:hover:not(.expanded) { box-shadow: 0 18px 45px #13223840; transform: scale(6); z-index: 3000; }
.summary-map.expanded { box-shadow: 0 18px 45px #13223840; box-sizing: border-box; cursor: zoom-out; height: auto; left: 50%; max-height: 86vh; max-width: calc(100vw - 1rem); object-fit: contain; position: fixed; top: 50%; transform: translate(-50%, -50%); transform-origin: center center; width: min(94vw, 960px); z-index: 3100; }
.summary-map.expanded:hover { transform: translate(-50%, -50%); }
.map-preview-dismiss { background: #13223866; border: 0; cursor: zoom-out; display: block; inset: 0; padding: 0; position: fixed; z-index: 3000; }
.site-result-heading { color: #1e3557; font-size: .9rem; margin: .75rem 0 .55rem; }
.site-result-list { display: grid; gap: .55rem; max-height: var(--site-results-max-height); overflow: auto; }
.open-job-row { align-items: stretch; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto; }
.open-job-load { width: 100%; }
.open-job-delete { align-self: center; }
.site-result { border: 1px solid #d7dce4; border-radius: 6px; background: #fff; cursor: pointer; display: grid; gap: .25rem; padding: .75rem .85rem; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.site-result:hover { border-color: #1e6fb8; box-shadow: 0 5px 16px #13223816; transform: translateY(-1px); }
.site-result span { color: #687487; font-size: .82rem; }
.status-pill { display: inline-block; border-radius: 999px; background: #edf3f8; border: 1px solid #c9d6e4; color: #1e3557; padding: .25rem .6rem; font-size: .8rem; }
.control-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: 1rem; }
.control-tab { border: 1px solid #c9d6e4; border-radius: 4px; background: #f7fbff; color: #1e3557; cursor: pointer; padding: .5rem .35rem; }
.control-tab.active { background: #1e6fb8; border-color: #1e6fb8; color: #fff; }
.tab-panel h2 { margin-bottom: .4rem; }
.file-message { background: #f7fbff; border-left: 4px solid #1e6fb8; margin: .5rem 0; padding: .5rem .65rem; font-size: .82rem; }
.autosave-status { color: #687487; font-size: .8rem; margin: .25rem 0 .75rem; }
.wall-filter { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filter-button { border: 1px solid #c9d6e4; border-radius: 999px; background: #fff; color: #1e3557; cursor: pointer; font-size: .78rem; padding: .3rem .55rem; }
.filter-button.active { background: #1e6fb8; border-color: #1e6fb8; color: #fff; }
.swatch-field { margin-bottom: .85rem; }
.swatch-field > span { display: block; font-size: .85rem; margin-bottom: .3rem; }
.swatch-field small { color: #687487; }
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.swatch { border: 2px solid #d7dce4; border-radius: 999px; cursor: pointer; height: 28px; min-width: 28px; }
.swatch.selected { border-color: #1e6fb8; box-shadow: 0 0 0 2px #c9d6e4; }
.opening-list { display: grid; gap: .4rem; max-height: 170px; overflow: auto; }
.opening-list-item { border: 1px solid #d7dce4; border-radius: 4px; background: #fff; cursor: pointer; display: grid; gap: .15rem; padding: .5rem; text-align: left; }
.opening-list-item span { font-weight: 600; color: #202733; }
.opening-list-item small { color: #687487; }
.opening-list-item.selected { border-color: #1e6fb8; background: #edf3f8; }
.legend { border-top: 1px solid #e1e5eb; padding-top: .8rem; display: grid; gap: .5rem; font-size: .75rem; }
.line { display: inline-block; width: 25px; margin-right: .3rem; border-top: 2px solid #26384c; vertical-align: middle; }
.line.roof { border-color: #c43d2f; } .line.bay { border-color: #5e82a7; border-top-style: dashed; } .line.opening-key { border-color: #c58a20; border-top-width: 4px; }
.drawing-panel { overflow: auto; user-select: none; -webkit-user-select: none; } .drawing { width: 100%; min-width: 0; height: auto; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.drawing * { user-select: none; -webkit-user-select: none; }
.drawing text { pointer-events: none; }
.sheet { fill: #fff; stroke: #aeb8c5; } .title { font-size: 18px; font-weight: 600; fill: #202733; } .subtitle, .annotation { font-size: 10px; fill: #687487; }
.view-title { font-size: 12px; font-weight: 600; fill: #1e3557; } .structure { stroke: #26384c; stroke-width: 2; } .structure-line, .ground-line { stroke: #26384c; stroke-width: 2; } .roof-line { fill: none; stroke: #c43d2f; stroke-width: 2; } .bay-line { stroke: #5e82a7; stroke-dasharray: 5 4; } .frame-line { stroke: #26384c; stroke-width: 1.25; opacity: .65; } .gable-infill { stroke: #26384c; stroke-width: 1.5; opacity: .45; } .ridge-point { fill: #c43d2f; } .dimension { font-size: 10px; fill: #43556b; } .apex-label { font-weight: 600; fill: #1e3557; } .rotated { writing-mode: tb; }
.lean-to-plan, .lean-to-envelope { stroke: #2f5f66; stroke-width: 1.5; }
.lean-to-plan { fill-opacity: .34; }
.lean-to-envelope { fill-opacity: .2; }
.lean-to-bay-line { stroke: #4f7479; stroke-dasharray: 4 3; stroke-width: 1; }
.lean-to-label { fill: #244f55; font-size: 9px; font-weight: 600; }
.opening-plan-marker { fill: #fff4d6; stroke: #c58a20; stroke-width: 1; cursor: pointer; } .opening-plan-marker.selected { fill: #ffd36b; stroke: #d85b18; stroke-width: 2; } .opening-group { cursor: grab; } .opening-group.active { cursor: grabbing; } .opening { fill: #fff4d6; stroke: #c58a20; stroke-width: 2; } .opening-group.selected .opening { stroke: #1e6fb8; stroke-width: 3; } .opening-group.overlap .opening { fill: #ffd7d7; stroke: #c53030; stroke-width: 3; } .opening-group.active .opening { fill: #ffd36b; stroke: #d85b18; stroke-width: 3; } .opening-dimension-label { fill: #202733; font-size: 9px; pointer-events: none; }
.opening-padoor { fill: #e6f4ff; } .opening-window { fill: #d9f1ff; stroke: #2876a3; } .opening-custom { fill: #f7e1ff; stroke: #8751a3; }
.ok { border-left: 4px solid #2d8a4d; padding-left: .75rem; color: #255d38; }
.validation-list { margin: 0; padding-left: 1.2rem; color: #9a3a16; }
.summary-section { border-top: 1px solid #e1e5eb; padding-top: .85rem; margin-top: .85rem; }
.summary-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.summary-section > summary { align-items: center; background: #edf3f8; border: 1px solid #c9d6e4; border-radius: 4px; color: #1e3557; cursor: pointer; display: flex; font-weight: 700; justify-content: space-between; list-style: none; margin-bottom: .65rem; padding: .55rem .65rem; transition: background .15s, border-color .15s, box-shadow .15s; }
.summary-section > summary::-webkit-details-marker { display: none; }
.summary-section > summary::after { background: #fff; border: 1px solid #c9d6e4; border-radius: 999px; content: "▾"; display: inline-grid; flex: 0 0 auto; font-size: .75rem; height: 1.25rem; margin-left: .65rem; place-items: center; transition: transform .15s, background .15s, border-color .15s; width: 1.25rem; }
.summary-section > summary:hover { background: #e4eef8; border-color: #9fb8d2; box-shadow: 0 1px 3px #13223814; }
.summary-section[open] > summary { background: #1e3557; border-color: #1e3557; color: #fff; }
.summary-section[open] > summary::after { background: #f7fbff; border-color: #f7fbff; color: #1e3557; transform: rotate(180deg); }
.summary-section:not([open]) > summary { margin-bottom: 0; }
.spec-list { display: grid; grid-template-columns: minmax(170px, max-content) minmax(0, 1fr); gap: .45rem .75rem; font-size: .9rem; overflow: visible; }
.spec-list dt { color: #687487; min-width: 0; overflow-wrap: anywhere; }
.spec-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; position: relative; }
.catalog-field { display: grid; gap: .25rem; font-size: .85rem; margin-bottom: .75rem; }
.catalog-field select { border: 1px solid #bfc7d3; border-radius: 3px; padding: .42rem; width: 100%; }
.engineering-section-list { display: grid; gap: .45rem; margin: .75rem 0; }
.engineering-section-card { background: #f7fbff; border: 1px solid #d7dce4; border-left: 4px solid #1e6fb8; border-radius: 4px; display: grid; gap: .15rem; padding: .5rem .65rem; }
.engineering-section-card strong { color: #1e3557; font-size: .85rem; }
.engineering-section-card span { color: #202733; font-size: .82rem; }
.engineering-section-card small { color: #687487; font-size: .76rem; line-height: 1.35; }
.bom-note { background: #f7fbff; border-left: 4px solid #1e6fb8; margin: .25rem 0 .75rem; padding: .5rem .65rem; font-size: .82rem; }
.bom-table-wrap { max-height: 330px; overflow: auto; border: 1px solid #d7dce4; border-radius: 4px; }
.bom-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8rem; }
.bom-table th { position: sticky; top: 0; background: #edf3f8; color: #1e3557; text-align: left; z-index: 1; }
.bom-table th, .bom-table td { border-bottom: 1px solid #e1e5eb; padding: .45rem .5rem; vertical-align: top; overflow-wrap: anywhere; }
.bom-table tbody tr:hover { background: #fff8df; }
.bom-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.analysis-card { border: 1px solid #c9d6e4; border-radius: 4px; padding: .75rem; background: #f7fbff; }
.analysis-card span { display: inline-block; margin-left: .4rem; color: #1e6fb8; font-size: .8rem; }
.analysis-card p { margin-bottom: 0; }
.api-result-card { margin: .5rem 0; }
.api-result-card summary { align-items: center; background: #f7fbff; border: 1px solid #d7dce4; border-radius: 4px; color: #1e3557; cursor: pointer; display: flex; font-weight: 700; justify-content: space-between; list-style: none; margin-bottom: .65rem; padding: .5rem .65rem; transition: background .15s, border-color .15s, box-shadow .15s; }
.api-result-card summary::-webkit-details-marker { display: none; }
.api-result-card summary::after { background: #fff; border: 1px solid #c9d6e4; border-radius: 999px; content: "▾"; display: inline-grid; flex: 0 0 auto; font-size: .7rem; height: 1.15rem; margin-left: .65rem; place-items: center; transition: transform .15s, background .15s, border-color .15s; width: 1.15rem; }
.api-result-card summary:hover { background: #eaf2fa; border-color: #9fb8d2; box-shadow: 0 1px 3px #13223814; }
.api-result-card[open] summary { background: #2f5f8f; border-color: #2f5f8f; color: #fff; }
.api-result-card[open] summary::after { background: #f7fbff; border-color: #f7fbff; color: #2f5f8f; transform: rotate(180deg); }
.api-result-card:not([open]) summary { margin-bottom: 0; }
.api-result-json { background: #132238; border-radius: 4px; color: #f7fbff; font-size: .75rem; max-height: 220px; overflow: auto; padding: .65rem; white-space: pre-wrap; }
.api-not-required { background: #eef8f1; border: 1px solid #b8dec3; border-radius: 6px; color: #255d38; font-size: 1.35rem; margin: .35rem 0 .85rem; padding: .75rem; text-align: center; }
.api-response-list { display: grid; gap: .5rem; margin-top: .5rem; }
.api-response-card { border: 1px solid #d7dce4; border-radius: 4px; padding: .5rem .65rem; }
.analysis-results-table { margin-top: .75rem; max-height: 220px; }
.view-switch { cursor: pointer; }
.view-switch rect { fill: #edf3f8; stroke: #8ca3bd; stroke-width: 1; }
.view-switch text { fill: #1e3557; font-size: 16px; font-weight: 700; pointer-events: none; }
.view-switch:hover rect { fill: #dceaf6; stroke: #1e6fb8; }
.portal-member { fill: #dbe4ed; stroke: #1e3557; stroke-linejoin: round; stroke-width: 1.25; }
.end-wall-mullion { stroke: #687487; stroke-dasharray: 3 2; stroke-width: 1; }
.modal-dialog.frame-analysis-dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; width: min(780px, 100%); }
.frame-uls-html-dialog { background: white; border: 1px solid #d7dce4; border-radius: 6px; box-shadow: 0 18px 45px #13223840; box-sizing: border-box; display: grid; gap: .75rem; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - clamp(.3rem, 1.6vw, 1.5rem)); max-height: none; max-width: none; overflow: hidden; padding: clamp(.75rem, 1.5vw, 1.25rem); width: calc(100vw - clamp(.3rem, 1.6vw, 1.5rem)); }
.frame-uls-html-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.frame-uls-html-header h2 { margin: 0; }
.frame-uls-html-preview { background: radial-gradient(circle at top left, #e8f2ff 0, #f6f9fc 28%, #eef3f8 100%); border: 1px solid #d7dce4; border-radius: 12px; min-height: 0; overflow: auto; padding: clamp(1rem, 2vw, 2rem); scroll-behavior: smooth; }
.frame-uls-report { color: #1f2937; display: grid; font-size: .94rem; gap: 1.15rem; line-height: 1.5; margin: 0 auto; max-width: 1500px; }
.frame-uls-report-hero { align-items: center; background: linear-gradient(135deg, #102f52 0%, #1f67a6 58%, #30a6c9 100%); border-radius: 18px; box-shadow: 0 20px 48px #1322382e; color: white; display: flex; gap: 1.25rem; justify-content: space-between; overflow: hidden; padding: clamp(1.2rem, 3vw, 2.25rem); position: relative; }
.frame-uls-report-hero::after { background: radial-gradient(circle, #ffffff2e 0, transparent 62%); content: ""; height: 220px; position: absolute; right: -55px; top: -80px; width: 220px; }
.frame-uls-eyebrow { color: #c8def3; font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .25rem; text-transform: uppercase; }
.frame-uls-report h1 { color: inherit; font-size: clamp(1.9rem, 3.3vw, 3rem); letter-spacing: -.04em; line-height: 1.02; margin: 0; position: relative; z-index: 1; }
.frame-uls-report-nav { align-items: center; backdrop-filter: blur(14px); background: #ffffffe6; border: 1px solid #dce5ef; border-radius: 999px; box-shadow: 0 12px 30px #13223818; display: flex; flex-wrap: wrap; gap: .4rem; padding: .45rem; position: sticky; top: 0; z-index: 2; }
.frame-uls-report-nav a { border-radius: 999px; color: #245f95; font-size: .82rem; font-weight: 800; padding: .5rem .75rem; text-decoration: none; transition: background .15s ease, color .15s ease, transform .15s ease; }
.frame-uls-report-nav a:hover, .frame-uls-report-nav a:focus { background: #1f67a6; color: white; transform: translateY(-1px); }
.frame-uls-status-pills { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: flex-end; position: relative; z-index: 1; }
.frame-uls-status-pill { background: #ffffff24; border: 1px solid #ffffff4d; border-radius: 16px; box-shadow: inset 0 1px 0 #ffffff29; min-width: 132px; padding: .85rem 1rem; }
.frame-uls-status-pill span { color: #c8def3; display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.frame-uls-status-pill strong { display: block; font-size: 1.1rem; margin-top: .1rem; }
.frame-uls-status-pill em { color: #e8f2fb; display: block; font-style: normal; }
.frame-uls-status-pill.pass { background: #0f9f6e33; border-color: #6ee7b7; }
.frame-uls-status-pill.fail { background: #dc262633; border-color: #fca5a5; }
.frame-uls-card { background: #ffffff; border: 1px solid #dce5ef; border-radius: 16px; box-shadow: 0 14px 36px #13223814; padding: clamp(1rem, 1.8vw, 1.6rem); scroll-margin-top: 4.5rem; }
.frame-uls-report h2 { align-items: center; border-bottom: 1px solid #e4ebf3; color: #163659; display: flex; font-size: 1.1rem; gap: .55rem; margin: 0 0 1rem; padding-bottom: .65rem; }
.frame-uls-report h2::before { background: linear-gradient(135deg, #1f67a6, #30a6c9); border-radius: 999px; content: ""; height: .7rem; width: .7rem; }
.frame-uls-report h3 { color: #334155; font-size: .95rem; margin: 1rem 0 .45rem; }
.frame-uls-report dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: .5rem 1rem; margin: 0; }
.frame-uls-report dt { color: #64748b; font-weight: 700; }
.frame-uls-report dd { margin: 0; }
.frame-uls-image-wrap { background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid #e2e8f0; border-radius: 14px; overflow: auto; padding: 1rem; }
.frame-uls-report img { display: block; margin: 0 auto; max-width: 100%; }
.frame-uls-report table { border-collapse: separate; border-spacing: 0; font-size: .85rem; overflow: hidden; width: 100%; }
.frame-uls-report th, .frame-uls-report td { border-bottom: 1px solid #e6edf5; padding: .6rem .7rem; text-align: left; vertical-align: top; }
.frame-uls-report th { background: #f1f6fb; color: #183b63; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.frame-uls-report tr:hover td { background: #f8fbff; }
.frame-uls-report pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; color: #dbeafe; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: .78rem; max-height: 360px; overflow: auto; padding: 1rem; white-space: pre-wrap; }
.frame-analysis-intro { margin-bottom: .75rem !important; }
.frame-analysis-key { align-items: center; color: #687487; display: flex; flex-wrap: wrap; font-size: .78rem; gap: .5rem 1rem; margin: -.25rem 0 .75rem; }
.frame-analysis-key span { align-items: center; display: inline-flex; gap: .35rem; }
.frame-analysis-key i { border: 1px solid #b8c5d4; border-radius: 3px; display: inline-block; height: .8rem; width: 1.15rem; }
.known-value-swatch, .frame-analysis-form input.known-value, .frame-analysis-form select.known-value { background: #e9ecef; }
.suggested-value-swatch, .frame-analysis-form input.suggested-value, .frame-analysis-form select.suggested-value { background: #fff; }
.frame-analysis-form { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frame-analysis-form fieldset { border: 1px solid #d7dce4; border-radius: 6px; display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: .75rem; }
.frame-analysis-form legend { color: #1e3557; font-size: .9rem; font-weight: 700; padding: 0 .3rem; }
.frame-analysis-form label { color: #43556b; display: block; font-size: .78rem; font-weight: 600; }
.frame-analysis-form input, .frame-analysis-form select { background: #fff; border: 1px solid #b8c5d4; border-radius: 4px; box-sizing: border-box; display: block; margin-top: .22rem; min-height: 34px; padding: .38rem .45rem; width: 100%; }
.frame-analysis-form input:focus, .frame-analysis-form select:focus { border-color: #1e6fb8; box-shadow: 0 0 0 3px #1e6fb829; outline: none; }
.frame-analysis-actions { gap: .5rem; margin-top: 1rem; }
.max-spacing-tabs { display: grid; gap: .4rem; grid-template-columns: repeat(3, 1fr); margin-bottom: .75rem; }
.max-spacing-tabs button { background: #edf3f8; border: 1px solid #c9d6e4; border-radius: 4px; color: #1e3557; cursor: pointer; font-weight: 600; padding: .5rem .65rem; }
.max-spacing-tabs button.active { background: #1e6fb8; border-color: #1e6fb8; color: #fff; }
.max-spacing-form fieldset { align-content: start; }
@media (max-width: 1200px) { .workspace.expanded { grid-template-columns: 260px 1fr; } .summary-panel { grid-column: auto; } }
@media (max-height: 800px) { .modal-dialog.site-options-dialog { --site-dialog-gap: .55rem; --site-map-max-height: clamp(130px, 29dvh, 220px); --site-results-max-height: clamp(90px, 18dvh, 140px); } .site-options-dialog input, .site-options-dialog select { min-height: 34px; padding: .38rem .5rem; } .site-options-actions .button { padding: .45rem .8rem; } .site-result { padding: .55rem .7rem; } }
@media (max-width: 1199px) { .workspace, .workspace.expanded, .workspace.dynamic { display: block; } .controls, .workspace.dynamic .controls, .summary-panel { width: auto; max-width: none; margin-bottom: 1rem; } .resize-handle { display: none; } .toolbar, .drawing-heading { align-items: flex-start; flex-direction: column; } .summary-map:hover:not(.expanded) { box-shadow: none; transform: none; } }
@media (max-width: 640px) { .modal-dialog.site-options-dialog { --site-map-max-height: clamp(120px, 27dvh, 200px); --site-results-max-height: clamp(90px, 20dvh, 150px); } .site-options-dialog label { grid-template-columns: 1fr; gap: .25rem; } .site-options-actions { grid-template-columns: 1fr 1fr; } .site-options-actions .button:first-child, .site-options-actions .button:last-child { grid-column: auto; justify-self: stretch; } }
@media (max-width: 640px) { .frame-analysis-form { grid-template-columns: 1fr; } .frame-analysis-form fieldset { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .frame-uls-report-hero { align-items: stretch; flex-direction: column; } .frame-uls-status-pills { justify-content: stretch; } .frame-uls-status-pill { flex: 1 1 120px; } .frame-uls-report dl { grid-template-columns: 1fr; } .frame-uls-report dt { margin-top: .25rem; } }
@media (max-height: 620px) { .modal-dialog.site-options-dialog { --site-dialog-gap: .4rem; --site-map-max-height: clamp(95px, 24dvh, 150px); --site-results-max-height: clamp(76px, 17dvh, 110px); } .modal-dialog.site-options-dialog { border-radius: 4px; } .modal-dialog h2 { margin-bottom: .25rem; } .site-result-heading { margin: .45rem 0 .35rem; } }
@media print { .topbar, .toolbar, .controls, .resize-handle { display: none !important; } html, body { background: #fff; } .content { padding: 0; } .workspace.dynamic { display: block; } .panel { box-shadow: none; border: 0; break-inside: avoid; } .drawing-panel, .summary-panel { page-break-inside: avoid; margin-bottom: 1rem; } .drawing { min-width: 0; } .bom-table-wrap { max-height: none; overflow: visible; } }