/* SchoolCAD drawing sheet editor (js/cad/sheet-ui.js): a full-screen page over the Part workspace.
 * The sheet itself stays white paper with black lines in both themes, like the printed drawing. */
.dw {
  --dw-sel: #1f6fe0; --dw-hov: rgba(31, 111, 224, 0.5); --dw-lost: #d97706; --dw-pick: #e08a00;
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg); color: var(--ink);
}
body.dw-open { overflow: hidden; }
.dw-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-block: 7px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px));
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.dw-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dw-title b { font-family: var(--font-display); font-size: 16px; }
.dw-doc { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.dw-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.dw-tab { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 6px 6px 0 0; padding: 4px 11px; font-size: 13px; cursor: pointer; }
.dw-tab[aria-selected="true"] { background: var(--accent-weak); border-color: var(--accent); font-weight: 600; }
.dw-tab.add { border-style: dashed; color: var(--muted); }
.dw-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.dw-actions .btn.icon { min-width: 34px; justify-content: center; font-size: 16px; }

.dw-body { display: grid; grid-template-columns: 70px minmax(0, 1fr) 300px; min-height: 0; }
.dw-tools { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; background: var(--panel); border-right: 1px solid var(--line); overflow: auto; }
.dw-tools .tool { min-width: 0; width: 100%; padding-left: 2px; padding-right: 2px; }
.dw-tools .tool .tl { font-size: 10.5px; }
.dw-fit { font-size: 18px; line-height: 1; }
.dw-stage { position: relative; background: var(--stage); min-height: 0; overflow: hidden; }
.dw-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.dw-svg:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.dw-svg.panning { cursor: grabbing !important; }
.dw-paper { fill: #fff; stroke: #b9bfca; stroke-width: 0.3; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25)); }
.dw-lines path, .dw-lines circle { stroke: #000; }
.dw-lines text { fill: #000; stroke: none; font-family: Helvetica, Arial, sans-serif; }
.dw-lines .fill { fill: #000; stroke: none; }
.dw-lines .sel { stroke: var(--dw-sel); }
.dw-lines text.sel, .dw-lines .fill.sel { fill: var(--dw-sel); }
.dw-lines .lost { stroke: var(--dw-lost); }
.dw-lines text.lost, .dw-lines .fill.lost { fill: var(--dw-lost); }
.dw-over rect, .dw-over circle { fill: none; }
.dw-over .dw-hov { stroke: var(--dw-hov); stroke-dasharray: 2 1.5; fill: none; }
.dw-over .dw-selbox { stroke: var(--dw-sel); stroke-dasharray: 3 1.5; fill: none; }
.dw-over .dw-pick { stroke: var(--dw-pick); fill: rgba(224, 138, 0, 0.25); }
.dw-over .dw-first { stroke: var(--dw-sel); fill: rgba(31, 111, 224, 0.3); }
.dw-over .dw-prev path, .dw-over .dw-prev circle { stroke: var(--dw-sel); }
.dw-over .dw-prev text, .dw-over .dw-prev .fill { fill: var(--dw-sel); stroke: none; font-family: Helvetica, Arial, sans-serif; }
.dw-status {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; pointer-events: none;
  font-size: 12.5px; line-height: 1.35;
}
.dw-status span { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.dw-status .warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

.dw-panel { background: var(--panel); border-left: 1px solid var(--line); overflow: auto; padding: 12px 14px 24px; display: grid; align-content: start; gap: 16px; }
.dw-panel section { min-width: 0; display: grid; gap: 7px; }
.dw-panel h3 { margin: 0; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.dw-panel .help { margin: 0; color: var(--muted); }
.dw-panel .help.small { font-size: 12px; }
.dw-panel .help.bad { color: var(--dw-lost); }
.dw-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; }
.dw-row > span:first-child { color: var(--muted); }
.dw-panel select, .dw-panel input[type="text"], .dw-panel input[type="number"], .dw-panel textarea {
  width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 13px;
}
.dw-panel textarea { resize: vertical; font-family: Helvetica, Arial, sans-serif; text-transform: none; }
.dw-cut { display: grid; grid-template-columns: 76px auto; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dw-seg { width: 100%; }
.dw-seg button { flex: 1; }
.dw-views { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.dw-views > span:first-child { width: 100%; color: var(--muted); }
.dw-panel .chk { font-size: 13px; }
.dw-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-btns .btn { font-size: 12.5px; padding: 4px 9px; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dw-chip { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.dw-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); }
.dw-chip.lost { color: var(--dw-lost); border-color: var(--dw-lost); }
.dw-guide { border-top: 1px solid var(--line); padding-top: 12px; }
.dw-guide .guide-term { font-family: var(--font-display); font-size: 15px; }
.dw-guide .guide-aka { margin: 0; font-size: 12px; color: var(--muted); }
.dw-guide .lesson-steps { margin: 4px 0 0; padding: 0; }

@media (max-width: 900px) {
  .dw-body { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
  .dw-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}