/* frame.css — drawings and layout of the frame studio (structure, loads, N/V/M diagrams, influence lines) */
:root { --fs-ink: #2b1f19; --fs-mem: #2b1f19; --fs-grid: rgba(90, 60, 30, .09); --fs-M: #6b2d5c; --fs-V: #2f5d62; --fs-Nt: #2f5d8a; --fs-Nc: #a33224; --fs-def: #b5651d; --fs-g: #5a4636; --fs-q: #2f5d8a; --fs-w: #3d7a4f; --fs-s: #8a5a9c; --fs-react: #a8743a; --fs-paper: #fbf5e6; }
[data-mode="dark"] { --fs-ink: #eaf2ff; --fs-mem: #f4f8ff; --fs-grid: rgba(200, 225, 255, .10); --fs-M: #f2cf8b; --fs-V: #8fd0c4; --fs-Nt: #7fb6ea; --fs-Nc: #ff9d8a; --fs-def: #ffb366; --fs-g: #e0d2bd; --fs-q: #9cc8ff; --fs-w: #9fe0a8; --fs-s: #e0b3ff; --fs-react: #f2cf8b; --fs-paper: #102a4e; }
.fs-svg { display: block; width: 100%; height: auto; }
.fs-bg { fill: var(--fs-paper); }
.fs-grid { stroke: var(--fs-grid); stroke-width: 1; }
.fs-txt, .fs-sub, .fs-mlab, .fs-nlab, .fs-dval, .fs-rlab, .fs-ld-t, .fs-title, .fs-veh-t { fill: var(--fs-ink); font-size: 11px; }
.fs-title { font: 700 16px "Playfair Display", Georgia, serif; }
.fs-sub { fill: color-mix(in srgb, var(--fs-ink) 65%, transparent); font-size: 11px; }
.fs-mlab { font-size: 10px; fill: color-mix(in srgb, var(--fs-ink) 70%, transparent); paint-order: stroke; stroke: var(--fs-paper); stroke-width: 3px; }
.fs-nlab { font: 700 10px "Courier Prime", monospace; fill: var(--fs-M); }
.fs-dval { font: 700 11px Inter, Arial, sans-serif; paint-order: stroke; stroke: var(--fs-paper); stroke-width: 3px; stroke-linejoin: round; }
.fs-rlab { font: 700 11px "Courier Prime", monospace; fill: var(--fs-react); paint-order: stroke; stroke: var(--fs-paper); stroke-width: 3px; }
.fs-mem { stroke: var(--fs-mem); stroke-width: 4; stroke-linecap: round; }
.fs-truss { stroke-width: 2.6; }
.fs-mem-ghost { stroke-opacity: .25; stroke-dasharray: 6 4; }
.fs-hit { stroke: transparent; stroke-width: 18; cursor: crosshair; }
.fs-hinge { fill: var(--fs-paper); stroke: var(--fs-mem); stroke-width: 1.6; }
.fs-node { fill: var(--fs-mem); }
.fs-sup-t { fill: color-mix(in srgb, var(--fs-react) 25%, var(--fs-paper)); stroke: var(--fs-ink); stroke-width: 1.4; }
.fs-sup-c { fill: var(--fs-paper); stroke: var(--fs-ink); stroke-width: 1.3; }
.fs-sup-l { stroke: var(--fs-ink); stroke-width: 1.6; fill: none; }
.fs-hatch { stroke: var(--fs-ink); stroke-width: 1; opacity: .7; }
.fs-ld-g { stroke: var(--fs-g); stroke-width: 1.4; fill: none; } .fs-ld-g-h { fill: var(--fs-g); } .fs-ld-g-t { fill: var(--fs-g); }
.fs-ld-q { stroke: var(--fs-q); stroke-width: 1.4; fill: none; } .fs-ld-q-h { fill: var(--fs-q); } .fs-ld-q-t { fill: var(--fs-q); }
.fs-ld-w { stroke: var(--fs-w); stroke-width: 1.4; fill: none; } .fs-ld-w-h { fill: var(--fs-w); } .fs-ld-w-t { fill: var(--fs-w); }
.fs-ld-s { stroke: var(--fs-s); stroke-width: 1.4; fill: none; } .fs-ld-s-h { fill: var(--fs-s); } .fs-ld-s-t { fill: var(--fs-s); }
.fs-ld-t { font: 600 10.5px Inter, Arial, sans-serif; paint-order: stroke; stroke: var(--fs-paper); stroke-width: 3px; }
.fs-pt { stroke-width: 2.4; }
.fs-drag { cursor: grab; } .fs-drag:active { cursor: grabbing; }
.fs-grab { fill: transparent; stroke: transparent; }
.fs-drag:hover .fs-grab { stroke: var(--fs-q); stroke-dasharray: 2 2; }
.fs-dM { fill: color-mix(in srgb, var(--fs-M) 22%, transparent); stroke: none; } .fs-dM-l { stroke: var(--fs-M); stroke-width: 1.8; fill: none; } .fs-dM-t { fill: var(--fs-M); }
.fs-dV { fill: color-mix(in srgb, var(--fs-V) 22%, transparent); stroke: none; } .fs-dV-l { stroke: var(--fs-V); stroke-width: 1.8; fill: none; } .fs-dV-t { fill: var(--fs-V); }
.fs-dN-t { fill: color-mix(in srgb, var(--fs-Nt) 22%, transparent); } .fs-dN-t-l { stroke: var(--fs-Nt); stroke-width: 1.8; fill: none; } .fs-dN-t-t { fill: var(--fs-Nt); }
.fs-dN-c { fill: color-mix(in srgb, var(--fs-Nc) 20%, transparent); } .fs-dN-c-l { stroke: var(--fs-Nc); stroke-width: 1.8; fill: none; } .fs-dN-c-t { fill: var(--fs-Nc); }
.fs-dD { fill: color-mix(in srgb, var(--fs-def) 18%, transparent); } .fs-dD-l { stroke: var(--fs-def); stroke-width: 1.8; fill: none; } .fs-dD-t { fill: var(--fs-def); }
.fs-defl { stroke: var(--fs-def); stroke-width: 2.6; fill: none; stroke-linejoin: round; } .fs-defl-t { fill: var(--fs-def); }
.fs-react { stroke: var(--fs-react); stroke-width: 2.2; } .fs-react-h { fill: var(--fs-react); }
.fs-panel { fill: color-mix(in srgb, var(--fs-paper) 70%, transparent); stroke: var(--fs-grid); }
.fs-axis { stroke: var(--fs-ink); stroke-width: 1.2; }
.fs-il-p { fill: color-mix(in srgb, var(--fs-M) 24%, transparent); } .fs-il-n { fill: color-mix(in srgb, var(--fs-Nc) 20%, transparent); }
.fs-il-l { stroke: var(--fs-ink); stroke-width: 2; fill: none; } .fs-il-dot { fill: var(--fs-M); }
.fs-env-n { fill: color-mix(in srgb, var(--fs-Nc) 18%, transparent); }
.fs-veh { stroke: var(--fs-q); stroke-width: 2.2; } .fs-veh-h { fill: var(--fs-q); } .fs-veh-t { fill: var(--fs-q); font-weight: 700; } .fs-veh-b { fill: color-mix(in srgb, var(--fs-q) 25%, transparent); stroke: var(--fs-q); }
.fs-mark { stroke: var(--fs-M); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fs-hover { stroke: var(--fs-M); stroke-width: 1.4; stroke-dasharray: 3 3; }

/* ---------- studio layout ---------- */
.fs-app { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; margin: 8px 0 30px; }
@media (max-width: 1000px) { .fs-app { grid-template-columns: 1fr; } }
.fs-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; display: grid; gap: 12px; }
@media (max-width: 1000px) { .fs-side { position: static; max-height: none; } }
.fs-card { border-radius: 16px; padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.fs-card h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--purple-ink); }
.fs-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fs-tpl { display: grid; gap: 2px; text-align: left; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font: 600 .78rem/1.2 var(--font-body); }
.fs-tpl svg { width: 100%; height: 34px; }
.fs-tpl small { font-weight: 400; color: var(--muted); font-size: .68rem; }
.fs-tpl[aria-pressed="true"] { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); background: var(--purple-tint); }
.fs-tpl .tp-l { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.fs-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-2); margin: 0 0 10px; }
.fs-tabs button { flex: 1 1 auto; border: 0; background: transparent; padding: 9px 12px; border-radius: 10px; font: 600 .84rem var(--font-body); color: var(--muted); cursor: pointer; }
.fs-tabs button[aria-selected="true"] { background: var(--surface); color: var(--purple-ink); box-shadow: var(--shadow); }
.fs-stage { border-radius: 16px; border: 1px solid var(--line); background: var(--fs-paper); overflow: hidden; position: relative; box-shadow: var(--shadow); }
.fs-stage-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); font: 500 .82rem var(--font-body); }
.fs-stage-bar label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.fs-stage-bar select, .fs-stage-bar input[type="range"] { font: 500 .82rem var(--font-body); }
.fs-stage-bar select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); max-width: 100%; }
.fs-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-2); gap: 2px; }
.fs-seg button { border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; font: 700 .78rem var(--font-mono); color: var(--muted); cursor: pointer; }
.fs-seg button[aria-pressed="true"] { background: var(--surface); color: var(--purple-ink); box-shadow: var(--shadow); }
.fs-read { position: absolute; left: 12px; bottom: 10px; padding: 6px 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); font: 600 .78rem var(--font-mono); color: var(--ink); pointer-events: none; }
.fs-tables h4 { margin: 14px 0 6px; font: 700 .76rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.fs-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fs-t { border-collapse: collapse; width: 100%; font-size: .82rem; }
.fs-t th { text-align: left; padding: 6px 6px; background: var(--bg-2); font: 700 .7rem var(--font-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.fs-t td { padding: 3px 4px; border-top: 1px solid var(--line); }
.fs-t input, .fs-t select { width: 100%; min-width: 58px; font: 500 .82rem var(--font-body); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--input-ink, var(--ink)); }
.fs-t input[type="checkbox"] { width: auto; min-width: 0; }
.fs-t .del { border: 0; background: none; color: #a33224; cursor: pointer; font-size: 1.1rem; }
.fs-add { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.fs-add .btn { padding: 6px 11px; font-size: .78rem; }
.fs-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.fs-res div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface); }
.fs-res span { display: block; font: 600 .66rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fs-res b { font: 800 1.1rem var(--font-display); color: var(--purple-ink); }
.fs-ok { color: #2d6a4f; font-weight: 700; } .fs-bad { color: #a33224; font-weight: 700; }
.fs-note { font-size: .82rem; color: var(--muted); margin: 8px 2px; }
.fs-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-actions .btn { padding: 7px 12px; font-size: .8rem; }
.fs-drag { touch-action: none; }