/* Panel Shop Generator (shop-generator.html): on top of panel.css. Big plain inputs; the elevation editor (core members
   over it, the opening members beside it), then the sheet, then the set. */
#gen { max-width: 1760px; }
.bar a { color: white; } .bar .standalone { margin-left: auto; opacity: .8; font-size: .9em; }
[hidden] { display: none !important; }
.spacer { flex: 1; }
.dimension-format {display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px;min-width:0;}.dimension-format select {max-width:170px;min-width:0;border:1px solid var(--line);border-radius:5px;padding:4px;background:white;color:var(--ink);font:inherit;}
.small { font-size: 13px; }
/* The title bar: the tool and its actions (no intro card: the elevation comes first). Notices float as a toast. */
.gen-bar { align-items: center; gap: 12px; }
.gen-title { font-size: 16px; }
.gen-tag { opacity: .75; font-size: 13px; }
@media (max-width: 900px) { .gen-tag { display: none; } }
.bar-btn { background: #fff; color: var(--accent); border-color: #fff; padding: 5px 12px; font-weight: 600; }
.bar-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
#gen { padding-top: 10px; gap: 10px; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20; max-width: min(720px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border-radius: 8px;
    background: #1e5a2c; color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.warn { background: #8a1c13; }

.card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.12em; }
.step { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; margin: 8px 0; }
#panel-card .fields { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.field { display: grid; gap: 3px; min-width: 0; }
.field.wide { grid-column: span 2; }
@media (max-width: 420px) { .field.wide { grid-column: auto; } }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select, .mcard select, .mtype { font-size: 16px; padding: 7px 9px; border: 1px solid #b9c0c8; border-radius: 6px; width: 100%; min-width: 0; background: #fff; }
.field input:focus, .field select:focus, .mcard select:focus, .mtype:focus { outline: 2px solid #aac3da; border-color: var(--accent); }
.field .hint { font-size: 12.5px; font-style: normal; color: #1b6aa5; min-height: 1em; }
.field .hint.bad { color: var(--warn); font-weight: 600; }
.field.bare > span { display: none; }
button { font-size: 15px; }
button:disabled { opacity: .45; cursor: default; }
button.link.danger { color: var(--warn); }

/* The panel row: its details, its shape and sizes, in one line where it fits */
.panel-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
.panel-fields, .shape-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
.elev-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.panel-row .field input { font-size: 14.5px; padding: 5px 8px; }
.panel-row .field > span { font-size: 11.5px; }
.panel-row .field .hint { min-height: 0; font-size: 11px; }
.f-mark { width: 110px; } .f-level { width: 90px; } .f-type { width: 230px; } .f-group { width: 120px; } .shape-fields .field { width: 108px; }
/* The elevation: shape to start from, its sizes */
.elev-title { gap: 12px; }
.elev-title h2 { margin: 0; }
.shape-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.shape-pick { flex-wrap: nowrap; gap: 4px; padding-bottom: 2px; }
.shape-pick button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; font-size: 13px; }
@media (max-width: 1300px) { .shape-pick button span { display: none; } }
.shape-pick svg { width: 26px; height: 22px; }
.shape-pick svg path { fill: #fff6d6; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.shape-pick button.on svg path { fill: rgba(255, 255, 255, .25); }


/* Members: cards with the section as a picture, a list to pick from, a box to type in */
.core-strip { border: 1px solid var(--line); border-radius: 8px; background: #f7f9fb; padding: 6px 8px; margin: 8px 0; }
.core-head { gap: 8px; margin-bottom: 4px; font-size: 14px; }
.core-head button { padding: 4px 10px; font-size: 13px; }
.core-head select { font-size: 14px; padding: 5px; max-width: 320px; }
.core-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .core-cards { grid-template-columns: minmax(0, 1fr); } }
.mcard { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.core-cards .mcard { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 5px 7px; }
.core-cards .micon { height: 34px; } .core-cards .micon svg { width: 34px; height: 26px; }
.core-cards .mcard select { font-size: 14px; padding: 4px 6px; }
.core-cards .mbody { gap: 2px; }
.core-cards .mdesc:not(#layout-info) { display: none; } /* the list says it */
.catalogue .cat-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; margin: 4px 0 8px; }
.catalogue .field input { font-size: 14px; padding: 5px 7px; } .catalogue .field > span { font-size: 11.5px; }
.catalogue .field .hint { min-height: 0; }
.catalogue .mcard { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 6px 8px; }
.catalogue .micon { height: 38px; } .catalogue .micon svg { width: 42px; height: 30px; }
.catalogue .mcard + .mcard { margin-top: 6px; }
.catalogue .ask-note { margin: 2px 0 6px; padding: 4px 8px; font-size: 13px; }
.mcard + .mcard { margin-top: 8px; }
.core-cards .mcard + .mcard { margin-top: 0; }
.mcard.ask { border-color: #e0a12b; box-shadow: 0 0 0 2px #f6d58e; animation: ask 1.4s ease-in-out 2; }
@keyframes ask { 50% { box-shadow: 0 0 0 5px #f6d58e; } }
.micon { color: var(--accent); background: #eef3f8; border-radius: 6px; height: 48px; display: grid; place-items: center; }
.micon svg { width: 60px; height: 40px; }
.mbody { display: grid; gap: 4px; min-width: 0; }
.mlabel { font-weight: 700; font-size: 14px; }
.catalogue .mcard select { font-size: 14.5px; padding: 6px; }
.mdesc { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.spacing { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.spacing select { font-size: 13px !important; }
.spacing select, .spacing .mtype { width: auto; font-size: 15px; padding: 5px; }

.elev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .elev-grid { grid-template-columns: minmax(0, 1fr); } }
.elev-main { min-width: 0; }
.catalogue { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fbfcfd; position: sticky; top: 48px; }
.catalogue h3 { margin: 0 0 4px; font-size: 1em; }
.cat-head { gap: 8px; margin-bottom: 6px; }
.cat-head select { font-size: 15px; padding: 5px; }
.cat-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ask-note { margin: 4px 0 8px; padding: 6px 8px; border-radius: 6px; background: #fff4dc; color: #6a4a00; font-weight: 600; font-size: 14px; }

/* Tools over the sketch */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.seg { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--accent); }
.seg button { border: 0; border-radius: 0; padding: 7px 12px; }
.seg button + button { border-left: 1px solid var(--accent); }
.add-label { margin-left: 8px; color: var(--muted); font-weight: 600; }
.add-op { background: #fff; padding: 6px 10px; }
.add-op.door { color: #a01818; border-color: #a01818; } .add-op.window { color: #1b6aa5; border-color: #1b6aa5; }
.add-op.mep { color: #2e7d32; border-color: #2e7d32; } .add-op.steel { color: #5d4037; border-color: #5d4037; }
.tool-hint { margin: 6px 0; }
.peri-actions { margin-top: 6px; }

/* The sketch's corner: the opening optimizer's switch and Preview (the sketch turned over to the framing elevation) */
.sketch-wrap { position: relative; }
.sketch-corner { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; max-width: calc(100% - 16px); }
.corner-btn { background: #fff; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.corner-btn.on { background: var(--accent); color: #fff; }
.opt-toggle { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.opt-toggle input { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: #c9d1da; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.opt-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.opt-toggle input:checked { background: #2e7d32; } .opt-toggle input:checked::after { left: 16px; }
.opt-toggle.on { color: #1e5a2c; border-color: #9fd1a4; }
.opt-toggle small { font-weight: 400; font-size: 12px; color: var(--muted); }
.opt-toggle small:empty { display: none; }
.sketch-flip { position: relative; transition: transform .6s ease; transform-style: preserve-3d; }
.sketch-flip.flipped { transform: rotateY(180deg); }
.sketch-flip .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sketch-flip.flipped .face.front { pointer-events: none; }
.sketch-flip:not(.flipped) .face.back { pointer-events: none; }
.sketch-flip .face.back { position: absolute; inset: 0; transform: rotateY(180deg); background: #fff; border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; cursor: pointer; overflow: hidden; }
.back-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; padding-right: 330px; }
@media (max-width: 900px) { .back-head { padding-right: 12px; padding-top: 44px; } }
.back-svg { flex: 1; min-height: 0; padding: 0 8px 6px; display: grid; place-items: center; overflow: hidden; } .back-svg svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.back-timer { height: 5px; background: #eef1f5; } .back-timer i { display: block; height: 100%; background: var(--accent); animation: drain 5s linear forwards; }
@keyframes drain { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .sketch-flip { transition: none; } .back-timer i { animation-duration: 5s; } }
/* The sketch: lines stay thin at any size (non-scaling strokes); text in panel inches */
.sketch svg { display: block; width: 100%; height: clamp(340px, 60vh, 640px); touch-action: none; background: #fafbfc; border: 1px solid var(--line); border-radius: 6px; user-select: none; font-family: system-ui, Arial, sans-serif; }
.sketch svg[data-tool="perimeter"], .sketch svg[data-tool="opening"] { cursor: crosshair; background: #fff; }
.sketch svg line, .sketch svg polygon, .sketch svg polyline, .sketch svg rect, .sketch svg circle { vector-effect: non-scaling-stroke; }
.sketch text { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.sk-grid { stroke: #e7ebf0; stroke-width: 1px; } .sk-grid.major { stroke: #d3dae2; }
.sk-floor { stroke: #8d949c; stroke-width: 2px; }
.sk-wall { fill: #fff6d6; stroke: var(--accent); stroke-width: 2px; stroke-linejoin: round; }
.sk-wall.ghost { fill: none; stroke: #c0c7cf; stroke-dasharray: 6 4; }
.sk-cl line { stroke: #7f97ad; stroke-width: 1px; stroke-dasharray: 5 3; pointer-events: none; }
.sk-cl line.j { stroke: #3d5a74; stroke-dasharray: none; } .sk-cl line.c { stroke: #9fb3c4; }
.sk-hit { stroke: transparent; stroke-width: 14px; cursor: help; }
.sk-edge-on { stroke: #ff8a3d; stroke-width: 4px; pointer-events: none; }
.sk-ctx, .sk-dim, .sk-ctx-t, .sk-dim-t, .sk-label { pointer-events: none; } /* dimensions and highlights: the pointer goes through to what is under them */
.sk-dim line { stroke: #1b6aa5; stroke-width: 1px; } .sk-dim-t { fill: #1b6aa5; font-weight: 600; }
.sketch .sk-edit-dim,.sketch .sk-line-pin {pointer-events:all;cursor:pointer;fill:#1b6aa5;text-decoration:underline;}
.sketch .sk-edit-dim:focus,.sketch .sk-line-pin:focus {outline:2px solid #1b6aa5;outline-offset:3px;}
#wall-sketch-constraints {border-bottom:1px solid var(--line);margin-bottom:8px;padding-bottom:8px;min-width:0;}
.wall-sketch-pinbar,.wall-slope-options,.wall-slope-fields {display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}
.wall-sketch-pinbar {margin-bottom:7px;}.wall-sketch-pinbar button {padding:3px 7px;}.wall-sketch-pinbar button.on {background:var(--accent);color:white;}
.wall-slope-options {margin-bottom:6px;}.wall-slope-options label {display:flex;align-items:center;gap:5px;font-size:12px;}.wall-slope-options select {max-width:165px;padding:3px;}
.wall-slope-row {display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px;min-width:0;}.wall-slope-row input {width:76px;padding:4px 6px;}.wall-slope-row small {color:var(--muted);white-space:nowrap;font-size:12px;}
.wall-slope-row input,.wall-slope-options select,.sketch-dimension-dialog input,.sketch-dimension-dialog select {border:1px solid var(--line);border-radius:5px;background:white;color:var(--ink);font:inherit;}
#view-sketch .sketch svg {height:clamp(280px,46vh,500px);}
.sketch-dimension-dialog {width:min(360px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--line);border-radius:7px;padding:18px;color:var(--ink);background:white;box-shadow:0 12px 40px #0003;}
.sketch-dimension-dialog::backdrop {background:#203c5655;}.sketch-dimension-dialog h2 {font-size:16px;margin:0 0 14px;}.sketch-dimension-dialog label {display:flex;align-items:center;gap:10px;margin:10px 0;}.sketch-dimension-dialog input,.sketch-dimension-dialog select {min-width:0;flex:1;padding:7px;}.sketch-dimension-dialog footer {display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}#wall-dimension-error {color:#9c2525;font-size:13px;}
.sk-ctx line { stroke: #d2691e; stroke-width: 1.4px; } .sk-ctx-t { fill: #b4530f; font-weight: 700; }
.sk-ctx.live line { stroke: #e65100; stroke-width: 1.8px; } .sk-ctx.live .sk-ctx-t, .sk-ctx.live text { fill: #e65100; }
.sk-ctx.hov line { stroke: #8d6e63; stroke-dasharray: 4 3; } .sk-ctx.hov text { fill: #6d4c41; }
.sk-ctx.far line { stroke-dasharray: 6 4; opacity: .8; }
.sk-ctx.size line { stroke: #546e7a; } .sk-ctx.size text { fill: #37474f; }
.sk-op { cursor: grab; }
.sk-op rect { fill: #ffffff; stroke: #a01818; stroke-width: 1.6px; }
.sk-op.window rect { fill: #eef6ff; stroke: #1b6aa5; }
.sk-op.mep rect { fill: #edf7ee; stroke: #2e7d32; }
.sk-op.steel rect { fill: #f3ece9; stroke: #5d4037; stroke-dasharray: 5 3; }
.sk-op.on rect { stroke: #ff8a3d; stroke-width: 3px; }
.sk-op.locked { cursor: default; } .sk-op.locked rect { stroke-dasharray: none; stroke-width: 2.4px; }
/* A panel from the Revit model: its geometry locked */
.model-badge { align-self: center; padding: 4px 10px; border-radius: 999px; background: #e8eef5; color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.field.locked input { background: #f1f3f5; color: #5f6368; cursor: not-allowed; border-style: dashed; }
.lock-note, .new-note { margin: 2px 0 6px; padding: 4px 8px; border-radius: 6px; font-size: 13px; }
.lock-note { background: #e8eef5; color: var(--accent); } .new-note { background: #edf7ee; color: #1e5a2c; }
.shape-pick button:disabled { opacity: .35; }
.sk-op-text { fill: #222; font-weight: 700; pointer-events: none; }
.sk-op-sub { fill: #444; pointer-events: none; }
.sk-handle { fill: var(--accent); stroke: #fff; stroke-width: 2px; cursor: grab; }
.sk-handle:hover { fill: #ff8a3d; }
.sk-arrow { cursor: grab; } .sk-arrow polygon { fill: var(--accent); stroke: #fff; stroke-width: 1.2px; } .sk-arrow:hover polygon { fill: #ff8a3d; }
.sk-arrow-hit { fill: rgba(255, 255, 255, .55); stroke: none; }
.sk-grip { fill: #fff; stroke: #e65100; stroke-width: 2px; cursor: nwse-resize; } .sk-grip:hover { fill: #ff8a3d; }
.sk-rect { fill: rgba(27, 106, 165, .12); stroke: #1b6aa5; stroke-width: 2px; stroke-dasharray: 6 3; }
.sk-rect.door { fill: rgba(160, 24, 24, .1); stroke: #a01818; } .sk-rect.steel { fill: rgba(93, 64, 55, .12); stroke: #5d4037; }
.sk-peri { fill: none; stroke: var(--accent); stroke-width: 2.4px; stroke-linejoin: round; }
.sk-vertex { fill: #fff; stroke: var(--accent); stroke-width: 2px; } .sk-vertex.first { fill: var(--accent); } .sk-vertex.closing { fill: #ff8a3d; stroke: #ff8a3d; }
.sk-cursor { fill: #ff8a3d; stroke: #fff; stroke-width: 1.5px; pointer-events: none; }
.sk-typed { fill: #e65100; font-weight: 700; }

/* Openings under the sketch */
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.op-chip { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13.5px; }
.op-chip b { color: #a01818; } .op-chip.window b { color: #1b6aa5; } .op-chip.mep b { color: #2e7d32; } .op-chip.steel b { color: #5d4037; }
.op-chip.on { border-color: #ff8a3d; box-shadow: 0 0 0 2px #ffd3b0; }
.op-chip.bad { border-color: var(--warn); background: #fdecea; }
.op-name { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 6px; color: #fff; background: #a01818; padding: 0 6px; }
.op-name.window { background: #1b6aa5; } .op-name.mep { background: #2e7d32; } .op-name.steel { background: #5d4037; }
table.points { margin: 6px 0; } table.points td { vertical-align: middle; } table.points .field { margin: 0; }
#shape-points summary { cursor: pointer; color: var(--accent); font-weight: 600; }

/* The sheet */
.pv-head h2 { margin: 0; }
#pv-check { margin: 0; font-size: 14px; }
#pv-errors .errors { margin: 4px 0 8px; }
.toggle { display: inline-flex; gap: 5px; align-items: center; font-size: 15px; }
.toggle input { width: 18px; height: 18px; }
#pv-check .check-failed, .set-item .check-failed { display: inline-block; }
ul.errors { margin: 6px 0 0; padding-left: 20px; color: var(--warn); }
.sheet.stale { opacity: .35; }
#pv-sheet svg { min-width: 760px; }

/* The set */
.set-tools { margin: 8px 0; }
.set-fields { grid-template-columns: repeat(auto-fill, minmax(200px, 320px)); }
.set-tools select { font-size: 14px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.set-item { position: relative; padding: 0; }
.set-item.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.set-check { position: absolute; top: 6px; left: 8px; z-index: 1; }
.set-check input { width: 20px; height: 20px; }
.set-open { all: unset; box-sizing: border-box; display: grid; gap: 3px; width: 100%; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.set-open:focus-visible { outline: 2px solid var(--accent); }
.set-open .thumb { height: 110px; }

/* Jambs on the stud layout (a switch like the optimizer's), and which opening the members are for. */
.lay-toggle { display: flex; flex-wrap: wrap; box-shadow: none; border-radius: 8px; margin: 2px 0 6px; padding: 6px 10px 6px 6px; }
.lay-toggle small { flex-basis: 100%; padding-left: 40px; }
.op-context { display: flex; gap: 10px; align-items: center; margin: 4px 0 6px; padding: 6px 8px; border-radius: 6px; background: #f4f6f9; border-left: 4px solid #a01818; font-size: 14px; line-height: 1.35; }
.op-context.window { border-left-color: #1b6aa5; } .op-context.mep { border-left-color: #2e7d32; } .op-context.steel { border-left-color: #5d4037; }
.op-glyph { width: 56px; height: 40px; flex: none; }
.op-glyph .g-op { fill: #fff; stroke: #a01818; stroke-width: 1.2; } .op-glyph .g-op.window { fill: #eef6ff; stroke: #1b6aa5; } .op-glyph .g-op.mep { fill: #edf7ee; stroke: #2e7d32; } .op-glyph .g-op.steel { fill: #f3ece9; stroke: #5d4037; }
.op-glyph .g-j { fill: #3d5a74; } .op-glyph .g-h { fill: #1b6aa5; } .op-glyph .g-s { fill: #2e7d32; } .op-glyph .g-floor { stroke: #9aa5b1; stroke-width: 1; }
/* The sketch: an opening framed out to the layout; studs to point at; each stud's C in plan under it. */
.sk-framed { fill: rgba(255,138,61,.08); stroke: #ff8a3d; stroke-width: 1.4px; stroke-dasharray: 4 3; pointer-events: none; }
.sk-mem-hit { stroke: transparent; stroke-width: 9px; cursor: context-menu; }
.sk-mem-on { stroke: #ff8a3d; stroke-width: 2.6px; pointer-events: none; }
.sk-c { fill: none; stroke: #3d5a74; stroke-width: 1.3px; vector-effect: non-scaling-stroke; pointer-events: none; }
/* The sketch's right-click menu. */
.sk-menu { position: fixed; z-index: 60; min-width: 240px; max-width: 330px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: 4px; font-size: 13.5px; color: #222; }
.sk-menu[hidden] { display: none; }
.sk-menu .mi-head { padding: 6px 8px 4px; } .sk-menu .mi-head b { display: block; font-size: 14px; } .sk-menu .mi-head small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.sk-menu .mi { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 6px 8px; border-radius: 5px; font: inherit; cursor: pointer; box-shadow: none; }
.sk-menu .mi:hover, .sk-menu .mi:focus-visible { background: #eef3f8; }
.sk-menu .mi:disabled { color: #9aa5b1; cursor: default; background: none; }
.sk-menu .mi.danger { color: #a01818; }
.sk-menu .mi-pick { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; padding: 3px 8px; }
.sk-menu .mi-pick span { color: var(--muted); font-size: 12.5px; }
.sk-menu .mi-pick select { font-size: 13px; padding: 3px; min-width: 0; width: 100%; }
.sk-menu .mi-check { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; padding: 5px 8px; cursor: pointer; border-radius: 5px; }
.sk-menu .mi-check:hover { background: #eef3f8; }
.sk-menu .mi-check input { width: 16px; height: 16px; margin: 0; }
.sk-menu .mi-check small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; padding-left: 24px; line-height: 1.3; }
.sk-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.sk-menu .mi-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px 6px; }
.sk-menu .mi-row .mi { width: auto; border: 1px solid var(--line); padding: 4px 8px; }
.sk-menu .mi-add.door { color: #a01818; } .sk-menu .mi-add.window { color: #1b6aa5; } .sk-menu .mi-add.mep { color: #2e7d32; } .sk-menu .mi-add.steel { color: #5d4037; }

/* Flip and mirror, over the sketch. */
.flip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #34495e; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill small { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.pill.on { background: #e8f1fb; border-color: #1b6aa5; color: #0f4c7a; }
.pill:focus-within { outline: 2px solid #1b6aa5; outline-offset: 1px; }
.flip-note { margin-left: 4px; }
/* The sketch: rough openings, headers and sills, clips. */
.sk-ro { fill: none; stroke: #a01818; stroke-width: 1px; stroke-dasharray: 3 2; opacity: .8; pointer-events: none; }
.sk-hd { fill: #f4a7a0; fill-opacity: .55; stroke: #c0645b; stroke-width: .8px; pointer-events: none; }
.sk-clip { fill: #546e7a; stroke: #263238; stroke-width: 1px; cursor: pointer; }
.sk-clip.on, .sk-clip:hover { fill: #ff8a3d; stroke: #b34700; }
.sketch svg[data-tool="clip"] { cursor: cell; background: #fff; }
.sketch svg[data-tool="clip"] .sk-clip { cursor: not-allowed; }
.mini { width: 70px; padding: 3px 6px; font-size: 13px; }
.mini.wide { width: 140px; }
.clip-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.fr-row { gap: 8px; margin: 2px 0 6px; align-items: center; }
.ro-text { color: #a01818; }
/* The framing dialog. */
.fr-dialog { border: 0; border-radius: 10px; padding: 0; width: min(1040px, 96vw); max-height: 92vh; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.qb-prof select { max-width: 15em; }
.add-prof { margin-left: 6px; max-width: 17em; }
.fs-wide { grid-column: 1 / -1; }
.prof-table .prof-name { width: 16em; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; margin: 6px 0 8px; }
.legend-grid label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.legend-grid input[type="color"] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--line, #d7dbe0); border-radius: 4px; background: none; }
.fd-vary { margin-left: 8px; }
.fd-sides { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 6px; }
.fd-sides label { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.fd-sides input { width: 5.5em; }
.fr-dialog::backdrop { background: rgba(20, 30, 40, .45); }
.fd { display: flex; flex-direction: column; max-height: 92vh; }
.fd-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.fd-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; padding: 10px 14px; overflow: auto; }
.fd-controls { display: flex; flex-direction: column; gap: 8px; }
.fd-group { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; margin: 0; }
.fd-group legend { font-weight: 700; font-size: 13.5px; padding: 0 4px; }
.fd-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; font-size: 13.5px; }
.fd-line > span:first-child { width: 104px; color: var(--muted); font-size: 12.5px; }
.fd-line em { font-style: normal; color: var(--muted); font-size: 12px; }
.fd-line select { font-size: 13px; padding: 3px; }
.fd-line input[type=text] { font-size: 13px; padding: 3px 6px; }
.fd-line input[type=text]:not(.mini) { flex: 1; min-width: 200px; }
.fd-seg button { padding: 4px 9px; font-size: 12.5px; }
.fd-seg button:disabled { opacity: .45; }
.fd-check { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.fd-preview { display: flex; flex-direction: column; gap: 6px; }
.fd-svg svg { width: 100%; height: min(56vh, 520px); background: #fafbfc; border: 1px solid var(--line); border-radius: 6px; }
.fd-svg svg * { vector-effect: non-scaling-stroke; }
.fd-m { stroke: #333; stroke-width: .8px; }
.fd-c { fill: none; stroke: #3d5a74; stroke-width: 1.2px; }
.fd-ro { fill: none; stroke: #a01818; stroke-width: 1.4px; stroke-dasharray: 5 3; }
.fd-clear { fill: rgba(27,106,165,.06); stroke: #1b6aa5; stroke-width: 1px; }
.fd-floor { stroke: #777; stroke-width: 1px; }
.fd-part { stroke: #6b2e1f; stroke-width: 1px; }
.fd-hidden { stroke: #333; stroke-width: 1px; stroke-dasharray: 4 3; }
.fd-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .fd-body { grid-template-columns: 1fr; } .fd-svg svg { height: 40vh; } }
/* The opening's drawings: Opening (the elevation above), Header, Jambs, Sill (details.mjs: as an engineer details them). */
.fd-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.fd-tabs button { padding: 4px 12px; font-size: 13px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.fd-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-detail { display: flex; flex-direction: column; gap: 8px; max-height: min(62vh, 600px); overflow: auto; }
.dt-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.dt-pair.one { grid-template-columns: minmax(0, 1fr); }
.dt-fig { margin: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 6px 8px; min-width: 0; }
.dt-fig figcaption { font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; text-decoration: underline; text-align: center; margin-bottom: 4px; }
.dt-svg { display: block; width: 100%; height: auto; max-height: 330px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.dt-pair.one .dt-svg { max-height: 300px; }
.dt-notes { margin: 6px 0 0; padding-left: 18px; font-size: 11.5px; line-height: 1.35; color: #333; }
.dt-stud, .dt-jamb-c { fill: none; stroke: #111; stroke-linejoin: miter; }
.dt-track { fill: none; stroke: #9a7400; stroke-linejoin: miter; }
.dt-svg .dt-finish, .dt-svg .dt-beyond, .dt-svg .dt-dim line, .dt-svg .dt-leader, .dt-svg .dt-key, .dt-svg .dt-v, .dt-svg .dt-jamb, .dt-svg .dt-head, .dt-svg .dt-leg,
.dt-svg .dt-hidden, .dt-svg .dt-ro, .dt-svg .dt-cut, .dt-svg .dt-clash, .dt-svg .dt-screw line { vector-effect: non-scaling-stroke; }
.dt-finish { fill: none; stroke: #8b8f94; stroke-width: 1px; stroke-dasharray: 6 4; }
.dt-beyond { stroke: #6b7076; stroke-width: 1px; stroke-dasharray: 8 5; }
.dt-dim line { stroke: #1f5fbf; stroke-width: 1px; }
.dt-dim text { fill: #1f5fbf; }
.dt-leader { stroke: #666; stroke-width: .8px; }
.dt-key { fill: #fff; stroke: #111; stroke-width: 1.1px; }
.dt-keyn { fill: #111; font-weight: 700; }
.dt-screw line { stroke: #b00020; stroke-width: 1.6px; }
.dt-v { fill: #fff; stroke: #333; stroke-width: 1px; }
.dt-jamb { fill: #9fc0de; stroke: #333; stroke-width: 1px; }
.dt-head { fill: #f4a7a0; stroke: #111; stroke-width: 1.4px; }
.dt-leg { stroke: #111; stroke-width: 1px; }
.dt-hidden { stroke: #111; stroke-width: 1px; stroke-dasharray: 5 3; }
.dt-ro { fill: none; stroke: #a01818; stroke-width: 1.2px; stroke-dasharray: 6 4; }
.dt-cut { stroke: #111; stroke-width: 1.2px; stroke-dasharray: 9 4; }
.dt-cutbar { fill: #111; }
.dt-cutn { font-weight: 700; fill: #111; }
.dt-clash { fill: rgba(176, 0, 32, .12); stroke: #b00020; stroke-width: 1.4px; }
.dt-label { fill: #a01818; }
.dt-arr { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dt-arr button { padding: 2px 8px; font-size: 12px; }
.dt-choose > p { margin: 0 0 8px; font-size: 13px; }
.dt-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dt-opt { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1.5px dashed #c25e00; border-radius: 6px;
    background: repeating-linear-gradient(135deg, #fff 0 10px, #fff6ee 10px 20px); }
.dt-opt .dt-svg { max-height: 200px; opacity: .9; }
.dt-opt figcaption { font-size: 12.5px; }
.dt-caveat { margin: 0; font-size: 11.5px; color: var(--muted); }
.dt-bad { margin: 0; color: var(--warn); font-weight: 600; font-size: 12.5px; }
@media (max-width: 820px) { .dt-pair { grid-template-columns: minmax(0, 1fr); } }

/* The resolved plan's notes under the sheet's check; the import choice. */
.plan-notes { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13.5px; }
.plan-notes li { padding: 3px 8px; border-left: 3px solid #c9a227; margin: 2px 0; background: #fffaf0; }
.plan-notes li.needs-resolution { border-left-color: #d2691e; background: #fff4ec; }
.plan-notes li b { margin-right: 6px; }
.import-dialog { border: 0; border-radius: 10px; padding: 14px 16px; max-width: 520px; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.import-dialog::backdrop { background: rgba(20, 30, 40, .45); }
.import-dialog .row { gap: 8px; align-items: center; }
.sk-op.small rect { fill: #ffebee; stroke: #c62828; stroke-width: 2px; stroke-dasharray: 2 2; }

/* Framing details, simple: a profile per member (glyph, list, what it comes to); the detailed editor only for Custom. */
.fd-simple .fd-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.fd-prof { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.fd-prof-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fd-prof-main label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.fd-prof-main label span { width: 58px; }
.fd-prof-main select { flex: 1; min-width: 0; font-size: 13.5px; padding: 4px; font-weight: 400; }
.fd-prof-main small { color: var(--muted); font-size: 12.5px; margin-left: 66px; }
.fd-prof-main .link.small { align-self: flex-start; margin-left: 66px; font-size: 12px; padding: 0; }
.fd-glyph { width: 52px; height: 38px; flex: none; background: #fafbfc; border: 1px solid var(--line); border-radius: 6px; }
.fd-glyph path { fill: none; stroke: #2f4f6f; stroke-width: 1.6; stroke-linejoin: round; }
.fd-glyph .g-op { stroke: #a01818; stroke-width: 1.2; stroke-dasharray: 3 2; }
.fd-glyph text { font-size: 14px; fill: var(--muted); }
.fd-custom { margin: -4px 0 2px 62px; padding: 6px 10px; border-left: 3px solid #9fc0de; background: #f6f9fc; border-radius: 0 6px 6px 0; }
.fd-save { margin-top: 6px; }
.fd-save input { min-width: 180px; }
.fd-ro-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; padding: 2px 2px; }
.fd-ro-line input.mini { width: 70px; font-size: 13px; padding: 3px 6px; }
.fd-more summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.fd-more .fd-check { margin: 6px 0 0 4px; }
.fd-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.fd-legend span::before { content: ''; display: inline-block; width: 12px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 1px solid #333; }
.fd-legend .lg-jamb::before { background: #9fc0de; }
.fd-legend .lg-head::before, .fd-legend .lg-sill::before { background: #f4a7a0; }
.fd-legend .lg-ro::before { border: 1.4px dashed #a01818; background: none; }
.fd-custom .fd-line > span:first-child { width: 64px; }
.fd-custom .fd-save { margin-left: 0; }
/* The selected opening's profiles beside the elevation. */
.op-profiles { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.op-prof { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
.op-prof .fd-glyph { width: 44px; height: 32px; }
.op-prof-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.op-prof-main label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.op-prof-main select { flex: 1; min-width: 0; font-size: 13px; padding: 3px; font-weight: 400; }
.op-prof-main small { color: var(--muted); font-size: 12px; }
.op-profiles > .muted { margin: 2px 0; }
.op-profiles > button { align-self: flex-start; }
/* Engineering styles: the catalog dialog, a panel's wall style and an opening's style, the state on the sheet. */
.eng-dialog { border: 0; border-radius: 10px; padding: 0; width: min(1100px, 96vw); max-height: 92vh; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.eng-dialog::backdrop { background: rgba(20, 30, 40, .45); }
.eng { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; max-height: 92vh; overflow: auto; }
.eng-head { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.eng-sel { gap: 14px; flex-wrap: wrap; align-items: center; }
.eng-sel input, .eng-approve input { padding: 3px 6px; }
.eng-tabs input { flex: 1 1 16em; max-width: 26em; padding: 4px 8px; }
.eng-table { overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.eng-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eng-table th { position: sticky; top: 0; background: #f4f6f8; text-align: left; padding: 4px 6px; font-weight: 600; }
.eng-table td { border-top: 1px solid var(--line); padding: 4px 6px; vertical-align: top; }
.eng-table tr.deleted td { color: #999; }
.eng-approve { gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.eng-badge { display: inline-block; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--muted); background: #fff; }
.eng-badge.ok { border-color: #8bc29a; color: #1e6b33; background: #f1faf3; }
.eng-badge.bound { border-color: #9fc0de; color: #1f3b57; background: #f2f7fc; }
.eng-badge.warn { border-color: #e0a23c; color: #8a4b00; background: #fff8ec; }
.style-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 6px 10px; border: 1px dashed #9fc0de; border-radius: 8px; background: #f8fbfe; font-size: 13.5px; }
.style-strip select { max-width: 100%; font-size: 13px; padding: 3px; }
.style-strip label { display: inline-flex; gap: 4px; align-items: center; }
.style-strip .plan-notes { flex-basis: 100%; margin: 2px 0; }
.op-style { margin: 6px 0; }
.arr-open { color: #c25e00; font-weight: 600; }
/* An opening's members by the engineering rule: the rule card (what it reads, the schedule, what it gives) and one row
   per member (in force, from where, the rule's alternatives, the arrangement, back to the rule). */
.rule-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.rule-card.off { background: #fafbfc; }
.rule-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.rule-say { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rule-say.ok { color: #1e7b34; }
.rule-say.warn { color: #9a4a00; }
.rule-say button { padding: 2px 10px; font-size: 12.5px; }
.rule-table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.rule-table th, .rule-table td { border: 1px solid var(--line); padding: 3px; text-align: center; vertical-align: top; }
.rule-table thead th { background: #f4f6f8; font-weight: 600; }
.rule-table tbody th { background: #f4f6f8; font-weight: 600; white-space: nowrap; }
.rule-table th small, .rule-cell small { display: block; font-weight: 400; color: var(--muted); }
.rule-cell { display: block; width: 100%; padding: 3px 4px; border: 1px solid transparent; border-radius: 5px; background: #fff; color: var(--ink); font-size: 11.5px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.rule-cell.covers { border-color: #1f5fbf; cursor: pointer; }
.rule-cell.covers:hover { background: #eaf2fd; }
.rule-cell.misses { opacity: .55; cursor: not-allowed; }
.rule-cell.match { box-shadow: inset 0 0 0 2px #1f5fbf; }
.rule-cell.on { background: #dff3e4; border-color: #1e7b34; box-shadow: inset 0 0 0 2px #1e7b34; }
.mrow { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; margin-bottom: 6px; }
.mrow .fd-glyph { flex: 0 0 40px; width: 40px; height: 30px; }
.mrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mrow-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.mrow .mval { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.mrow select { width: 100%; }
.alt-row, .arr-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.alt-row .chip { padding: 2px 8px; font-size: 12px; border-radius: 12px; border: 1px solid #1f5fbf; background: #fff; color: #1f5fbf; }
.alt-row .chip.on { background: #1f5fbf; color: #fff; }
.arr-row .seg button { padding: 2px 8px; font-size: 12px; }
.rule-diff { margin: 0; font-size: 12px; color: #9a4a00; }

/* Levels and grids in the sketch (context only), and their inspector section. */
.sk-level, .sk-gridline { pointer-events: none; }
.sk-level line { stroke: #0f6b6b; stroke-width: 1.2px; stroke-dasharray: 10 3 2 3; vector-effect: non-scaling-stroke; }
.sk-level-mark { fill: #0f6b6b; }
.sk-level-t { fill: #0f6b6b; font-weight: 700; }
.sk-level-s { fill: #3f7f7f; }
.sk-gridline line { stroke: #6a4fa3; stroke-width: 1px; stroke-dasharray: 10 3 2 3; vector-effect: non-scaling-stroke; }
.sk-gridline circle { fill: #fff; stroke: #6a4fa3; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.sk-grid-t { fill: #4b3478; font-weight: 700; }
.ctx-level { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 6px 0; }
.ctx-level b { min-width: 84px; font-size: 12.5px; }
.ctx-level input.mini { width: 72px; }
.ctx-level .seg button { padding: 2px 8px; font-size: 12px; }
.ctx-grids { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.ctx-grid { display: inline-flex; gap: 3px; align-items: center; }
.ctx-grid input.mini { width: 58px; }
.ctx-grid input.mini:first-child { width: 34px; }

/* Clips: the align line (bold while a new clip snaps to it) and where the next one goes. */
.sk-align { pointer-events: none; }
.sk-align line { stroke: #0b7a75; stroke-width: 1px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; opacity: .55; }
.sk-align.on line { stroke-width: 2px; opacity: 1; }
.sk-align-t { fill: #0b7a75; font-weight: 700; }
.sk-clip.ghost { fill: rgba(11, 122, 117, .35); stroke: #0b7a75; pointer-events: none; }
.clip-align { gap: 6px; align-items: center; flex-wrap: wrap; }