/* drawings.css (v10) — drafting presentation for every calculator diagram, studio stage and 3D view.
   Minimal, classic, informative: drawing-paper ground, fine ink line weights (AS 1100.101: 0.25 / 0.35 / 0.5 / 0.7),
   a viewport frame with corner registration ticks, a view-title strip (number · title · scale) and a monochrome ink
   palette with a single red for loads and blue for water. Dark mode keeps a blueprint feel. */

:root { --dw-paper: #fdfbf6; --dw-grid: rgba(60, 50, 40, .055); --dw-ink: #1d1d1b; --dw-ink2: #55524c; --dw-frame: #2a2724; --dw-load: #a3241c; --dw-water: #1f5d94; --dw-acc: #6b2d5c; }
[data-mode="dark"] { --dw-paper: #0f2240; --dw-grid: rgba(180, 210, 255, .07); --dw-ink: #e7efff; --dw-ink2: #a9bcd8; --dw-frame: #9db6dc; --dw-load: #ff8a7a; --dw-water: #7cc0ff; --dw-acc: #d9a8ff; }

/* ---------- calculator diagram as a drawing viewport ---------- */
.tk-diagram { position: relative; background-color: var(--dw-paper) !important;
  background-image: linear-gradient(var(--dw-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dw-grid) 1px, transparent 1px);
  background-size: 20px 20px; border: 1px solid var(--dw-frame) !important; border-radius: 4px !important;
  box-shadow: inset 0 0 0 4px var(--dw-paper), inset 0 0 0 4.6px color-mix(in srgb, var(--dw-frame) 45%, transparent); padding: 16px 14px 34px !important; }
.tk-diagram::before { content: ""; position: absolute; inset: 7px; pointer-events: none;
  background: linear-gradient(var(--dw-frame), var(--dw-frame)) top left / 12px 1px no-repeat, linear-gradient(var(--dw-frame), var(--dw-frame)) top left / 1px 12px no-repeat,
              linear-gradient(var(--dw-frame), var(--dw-frame)) top right / 12px 1px no-repeat, linear-gradient(var(--dw-frame), var(--dw-frame)) top right / 1px 12px no-repeat,
              linear-gradient(var(--dw-frame), var(--dw-frame)) bottom left / 12px 1px no-repeat, linear-gradient(var(--dw-frame), var(--dw-frame)) bottom left / 1px 12px no-repeat,
              linear-gradient(var(--dw-frame), var(--dw-frame)) bottom right / 12px 1px no-repeat, linear-gradient(var(--dw-frame), var(--dw-frame)) bottom right / 1px 12px no-repeat; opacity: .8; }
.tk-diagram::after { content: "① " attr(data-view) "      SCALE NTS"; position: absolute; left: 12px; right: 12px; bottom: 9px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--dw-frame) 55%, transparent);
  font: 700 10.5px/1.2 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--dw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tk-diagram[data-std]::after { content: "① " attr(data-view) "  ·  " attr(data-std) "  ·  SCALE NTS"; }
.tk-diagram svg + svg { margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--dw-frame) 35%, transparent); }

/* ink palette and line weights inside calculator drawings (classes from toolkit.js and friends) */
.tk-diagram { --c1: #1f3f66; --c2: #9a4a14; --c3: #2d6a4f; --c4: var(--dw-load); --c5: #4f3a72; --c6: #8a6b14; --plot-bg: var(--dw-paper); --hatch: #5d5446; --purple-ink: #4f3a72; }
[data-mode="dark"] .tk-diagram { --c1: #8fc1ff; --c2: #ffb27a; --c3: #8fe0b5; --c5: #c9b2ff; --c6: #f2d36b; --hatch: #9fb6d8; --purple-ink: #d9c6ff; }
.tk-diagram .dg-t, .tk-diagram text { font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; }
.tk-diagram .dg-l { stroke: var(--dw-ink); stroke-width: 1; }
.tk-diagram .dg-ld { stroke-width: 1.1; }
.tk-diagram .dg-conc { stroke-width: 1.35; fill: color-mix(in srgb, var(--c1) 7%, transparent); }
.tk-diagram .dg-mem, .tk-diagram .dg-mem2 { stroke-width: 1.4; }
.tk-diagram .dg-na { stroke: var(--dw-ink2); stroke-dasharray: 8 3 2 3; stroke-width: .8; }
.tk-diagram .dg-sup { fill: none; stroke: var(--dw-ink); stroke-width: 1.1; }
.tk-diagram .dg-curve { stroke-width: 1.9; }
.tk-diagram .dg-bmd { stroke-width: 1.1; }

/* ---------- 3D toolbar additions ---------- */
.tk-3dbar [data-sheet] { border-color: var(--dw-frame); font-weight: 600; }
.tk-3dbar [data-sheet]:hover { background: color-mix(in srgb, var(--dw-frame) 10%, var(--surface)); }
.tk-3dviews { display: none; gap: 4px; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--line); }
.tk-3dbar.is3d .tk-3dviews { display: inline-flex; }
.tk-3dviews button { padding: 4px 10px !important; font-size: .78rem !important; }
.tk-3dview { background: radial-gradient(130% 100% at 30% 0%, var(--dw-paper), color-mix(in srgb, var(--dw-paper) 70%, var(--bg))) !important; border: 1px solid var(--dw-frame) !important; border-radius: 4px !important; }
.tk-3dview::after { content: "PARAMETRIC 3D MODEL · GRID AT DATUM ±0.000"; position: absolute; left: 10px; bottom: 8px; font: 700 10px "Arial Narrow", Arial, sans-serif; letter-spacing: .08em; color: var(--dw-ink2); pointer-events: none; }
.btn-dwg { border-color: var(--dw-frame) !important; }

/* ---------- studio stages ---------- */
.st-stage, .sk-stage { border: 1px solid var(--dw-frame) !important; border-radius: 4px !important; }
.st-dwgbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
.st-dwgbar .btn { font-weight: 600; }
.st-dwgbar .st-dwghint { color: var(--muted); font-size: .82rem; }
.sd-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--dw-frame); background: var(--surface); color: var(--ink); font: 600 14px Inter, system-ui, sans-serif; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); cursor: pointer; }
.sd-fab:hover { background: color-mix(in srgb, var(--dw-frame) 8%, var(--surface)); }
.sd-fab b { font-weight: 700; }
.sd-menu { position: fixed; right: 18px; bottom: 70px; z-index: 61; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--dw-frame); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); padding: 12px; font: 14px Inter, system-ui, sans-serif; }
.sd-menu h4 { margin: 0 0 6px; font: 700 12px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sd-menu label { display: block; margin: 6px 0; font-size: 13px; }
.sd-menu input[type=text] { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.sd-menu .sd-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sd-menu .sd-row button { flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font: 600 13px Inter, sans-serif; }
.sd-menu .sd-row button.pri { background: var(--purple, #6b2d5c); border-color: var(--purple, #6b2d5c); color: #fff; }
.sd-3d { position: fixed; inset: 0; z-index: 8990; background: rgba(18, 16, 14, .78); display: flex; flex-direction: column; }
.sd-3d .sd-3dbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: #1d1b19; color: #f3efe7; font: 600 14px Inter, sans-serif; flex-wrap: wrap; }
.sd-3d .sd-3dbar b { margin-right: auto; }
.sd-3d .sd-3dbar button { font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 8px; border: 1px solid #4b4640; background: #2b2825; color: #f3efe7; cursor: pointer; }
.sd-3d .sd-3dbar button[aria-pressed=true] { background: #f3efe7; color: #1d1b19; }
.sd-3d .sd-3dview { flex: 1; position: relative; background: radial-gradient(120% 100% at 30% 0%, #fdfbf6, #e9e2d3); }
.sd-3d canvas { display: block; width: 100%; height: 100%; }
.sd-3d .sd-3dnote { position: absolute; left: 14px; bottom: 12px; font: 700 11px "Arial Narrow", Arial, sans-serif; letter-spacing: .08em; color: #55524c; }

/* ---------- static calculator pages: worked-example figure ---------- */
.calc-fig { background-color: var(--dw-paper); background-image: linear-gradient(var(--dw-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dw-grid) 1px, transparent 1px); background-size: 20px 20px; border: 1px solid var(--dw-frame); border-radius: 4px; padding: 14px; box-shadow: inset 0 0 0 4px var(--dw-paper), inset 0 0 0 4.6px color-mix(in srgb, var(--dw-frame) 45%, transparent); }
.calc-fig figcaption { margin-top: 8px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--dw-frame) 50%, transparent); font: 700 11px "Arial Narrow", Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--dw-ink); }
.calc-fig figcaption::before { content: "① "; }
.calc-fig figcaption::after { content: "  ·  SCALE NTS"; color: var(--dw-ink2); }

@media print { .sd-fab, .sd-menu, .st-dwgbar { display: none !important; } .tk-diagram { break-inside: avoid; } }