/* Sunlight-readable DARK theme: near-black surfaces, pure-white text, bright accents, thick borders. */
:root {
  --bg: #0b0f14; --fg: #ffffff; --muted: #c9d4df; --line: #e6edf3; --panel: #151c24; --panel2: #222c38; --input: #000;
  --primary: #ffd400; --primary-fg: #000; --danger: #ff5c5c; --accent: #ffb300; --ok: #3ddc84;
  --ridge: #ff5c5c; --valley: #4db8ff; --hip: #4dff88; --pen: #e08cff; --face: #ffd400;
  --surface: #000; --inv-bg: #fff; --inv-fg: #000; --ring: #fff; --rule: #1d2733; --rule2: #3a4a5a; --overlay: rgba(0,0,0,.88); --overlay2: rgba(0,0,0,.7); --banner: #2a2400; --setme: #1d1a00; --note-bg: #3a0d0d; --canvas: #0b0f14; --step-bg: #0f1720; --soft: #cfd8e3;
  --ok-t: #3ddc84; --primary-t: #ffd400; --face-t: #ffd400; --kp-num: #000;
  --touch: 45px; --radius: 10px; --fs: 18px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 600 var(--fs)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
#app { display: flex; height: 100vh; height: 100dvh; }
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--muted); font-weight: 500; }
.warn { color: var(--danger); font-weight: 800; }
.ok { color: var(--ok-t); font-weight: 800; }
.hintsm { font-size: 13px; color: var(--muted); font-weight: 600; }

/* rail */
#rail { width: 81px; background: var(--surface); color: var(--fg); display: flex; flex-direction: column; padding: 8px 6px; gap: 6px; overflow-y: auto; border-right: 3px solid var(--line); }
#rail .brand { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.1; padding: 3px 0 6px; }
#rail .brand img { border-radius: 8px; margin-bottom: 4px; }
#rail button { min-height: 48px; border: 2px solid transparent; background: transparent; color: var(--fg); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; gap: 2px; padding: 3px; }
#rail button .ico { font-size: 16px; line-height: 1; }
#rail button.active { background: var(--primary); color: #000; border-color: var(--primary); }
#rail button.future { opacity: .6; border: 2px dashed rgba(255,255,255,.6); }
#rail button[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); }
.rail-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; margin-top: 6px; }
.net { font-size: 12px; text-align: center; color: var(--muted); }

/* buttons & inputs */
.btn { min-height: 39px; padding: 6px 12px; border: 2px solid var(--line); background: var(--panel); color: var(--fg); border-radius: var(--radius); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.btn.big { min-height: var(--touch); padding: 8px 15px; font-size: 14px; }
.btn.primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.icon { min-width: 42px; padding: 0; }
.btn:active, .tool:active, .segbtn:active, .pbtn:active { transform: scale(.97); }
.btn:disabled, .tool:disabled { opacity: .3; }
.btn.future, .future { opacity: .6; border-style: dashed; }
.btn small, .future small { font-size: 11px; text-transform: uppercase; background: var(--primary); color: #000; padding: 1px 4px; border-radius: 4px; }
.input { min-height: 56px; width: 100%; border: 2px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: var(--input); color: var(--fg); font-size: 19px; font-weight: 700; }
.input::placeholder { color: #8796a8; }
.input.setme { border: 2px dashed var(--primary); background: var(--setme); }
.input.setme::placeholder { color: var(--primary-t); font-weight: 800; }
.input.big { font-size: 22px; min-height: 64px; margin: 12px 0; }
.input:focus { outline: 4px solid var(--accent); outline-offset: 1px; }
textarea.input { min-height: 90px; }
.select { width: auto; max-width: 260px; min-height: 52px; }
.sys-pick { flex-direction: row; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 800; color: var(--muted); }
.flabel { font-size: 15px; font-weight: 800; color: var(--muted); display: block; margin-bottom: 6px; }
label.block { margin-top: 14px; }
.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.row.end { justify-content: flex-end; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.seg { display: flex; gap: 8px; }
.seg.wrap { flex-wrap: wrap; margin-bottom: 12px; }
.segbtn { min-height: 42px; padding: 6px 12px; border: 2px solid var(--line); background: var(--panel); color: var(--fg); border-radius: var(--radius); font-weight: 800; }
.segbtn.on { background: var(--primary); color: #000; border-color: var(--primary); }
.badge { background: var(--primary); color: #000; font-size: 12px; font-weight: 900; padding: 2px 6px; border-radius: 4px; }
.banner { background: var(--banner); border: 2px solid var(--primary); color: var(--fg); border-radius: var(--radius); padding: 10px 12px; font-size: 16px; margin-bottom: 10px; }
.banner.done { background: #08260f; border-color: var(--ok); }
.banner.warn { background: #3a0b0b; border-color: var(--danger); margin-top: 10px; }
.empty { color: var(--muted); padding: 20px; font-weight: 600; }
.empty.big { font-size: 22px; padding: 40px; text-align: center; }
.saved { font-size: 15px; color: var(--ok-t); font-weight: 900; padding: 0 8px; }
.saved.dirty { color: var(--muted); }
.saved.flash { background: #0f3a1c; border-radius: 6px; }

.view-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 3px solid var(--line); }
.view-head h1 { margin: 0; font-size: 28px; }
.view-foot { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 2px solid var(--panel2); flex-wrap: wrap; font-size: 15px; }

/* jobs */
.job-list { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.job-card { display: flex; align-items: stretch; gap: 10px; border: 2px solid var(--line); border-radius: 12px; padding: 8px; background: var(--panel); }
.job-open { flex: 1; text-align: left; background: var(--surface); border: 2px solid var(--panel2); color: var(--fg); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; min-height: 68px; justify-content: center; }
.job-name { font-size: 22px; font-weight: 900; }
.job-meta { font-size: 14px; color: var(--muted); font-weight: 600; }

/* drawing */
.draw-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 3px solid var(--line); min-height: 66px; background: var(--surface); }
.job-title { font-size: 20px; font-weight: 900; background: none; border: 0; min-height: 52px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; text-decoration: underline dotted; }
.tabs { display: flex; gap: 6px; overflow-x: auto; max-width: 30vw; }
.tab { min-height: 39px; padding: 4px 10px; border: 2px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; font-weight: 800; white-space: nowrap; }
.tab.active { background: var(--inv-bg); color: var(--inv-fg); }
.tab.add { border-style: dashed; }
.draw-body { flex: 1; min-height: 0; display: flex; }
.canvas-wrap { flex: 1; min-width: 0; position: relative; background: var(--bg); }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; font-family: system-ui, sans-serif; }
.tools { width: 126px; border-left: 3px solid var(--line); background: var(--surface); padding: 6px; overflow-y: auto; }
.tsec { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 5px 2px 3px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool { min-height: 44px; border: 2px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; font-size: 11px; font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; }
.tool .ico { font-size: 16px; line-height: 1; }
.tool .sw { width: 26px; height: 4px; border-radius: 3px; background: currentColor; }
.tool.ridge { color: var(--ridge); } .tool.valley { color: var(--valley); } .tool.hip { color: var(--hip); } .tool.pen { color: var(--pen); } .tool.face { color: var(--face-t); }
.tool.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); box-shadow: 0 0 0 3px var(--accent); }
.tool.ridge.on { background: var(--ridge); border-color: var(--ridge); } .tool.valley.on { background: var(--valley); border-color: var(--valley); }
.tool.hip.on { background: var(--hip); border-color: var(--hip); } .tool.pen.on { background: var(--pen); border-color: var(--pen); } .tool.face.on { background: var(--face); border-color: var(--face); }
.tool.danger { color: var(--danger); }
.tool.toggle { font-size: 11px; }
.tool.toggle.on { background: var(--ok); color: #000; border-color: var(--ok); box-shadow: none; }
.tool.toggle:not(.on)::after { content: 'off'; font-size: 11px; color: var(--muted); }
.tool.toggle.on::after { content: 'on'; font-size: 11px; }
.zoompair { display: flex; gap: 6px; }
.tool.half { flex: 1; font-size: 20px; }
.draw-foot { display: flex; align-items: center; gap: 16px; padding: 6px 12px; border-top: 3px solid var(--line); min-height: 48px; font-size: 16px; background: var(--surface); }
.hint { flex: 1; font-weight: 800; }

/* systems */
.sys-layout { flex: 1; min-height: 0; display: flex; }
.sys-list { width: 320px; border-right: 3px solid var(--line); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.sys-item { text-align: left; border: 2px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; padding: 10px 12px; min-height: 72px; display: flex; flex-direction: column; gap: 4px; }
.sys-item.active { box-shadow: 0 0 0 4px var(--accent); }
.sys-name { font-weight: 900; font-size: 18px; }
.sys-meta { font-size: 13px; color: var(--muted); }
.sys-form { flex: 1; overflow-y: auto; padding: 14px 20px 40px; }
.sys-form h2 { margin: 0; font-size: 24px; }
.sys-form h3 { margin: 22px 0 8px; font-size: 20px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 8px; }
.span2 { grid-column: span 2; }
.trims { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.trim-row { display: grid; grid-template-columns: 1fr 180px 56px; gap: 8px; }

/* modal */
#modal-root:empty { display: none; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; }
.modal { background: var(--panel); color: var(--fg); border: 3px solid var(--line); border-radius: 16px; padding: 18px 22px; width: min(660px, 100%); max-height: 100%; overflow-y: auto; }
.modal.wide { width: min(900px, 100%); }
.modal h2 { margin: 0 0 8px; font-size: 24px; }
.modal h3 { margin: 14px 0 6px; }
.modal .lead { font-size: 18px; color: var(--muted); }
.modal.kp { width: min(580px, 100%); padding: 14px 18px; }
.kp-head .sub { color: var(--muted); font-size: 15px; }
.kp-mode { margin-top: 8px; } .kp-mode .segbtn { flex: 1; }
.kp-display { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
#kp-in { flex: 1; min-width: 0; font-size: 34px; font-weight: 900; min-height: 64px; border: 3px solid var(--line); border-radius: 10px; padding: 4px 12px; font-family: ui-monospace, monospace; background: var(--input); color: var(--fg); }
.kp-prev { font-size: 18px; font-weight: 900; color: var(--ok-t); min-width: 150px; }
.kp-prev.bad { color: var(--danger); }
.kp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kp-key { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--fg); font-size: 16px; font-weight: 900; }
.kp-key.num { background: var(--kp-num); font-size: 22px; }
.kp-actions { display: flex; gap: 8px; margin-top: 10px; }
.kp-actions .btn { flex: 1; }
.kp-help { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }
.pitch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 8px; }
.pbtn { min-height: 48px; border: 2px solid var(--face); background: var(--surface); color: var(--face-t); border-radius: 10px; font-size: 16px; font-weight: 900; }
.pbtn.on { background: var(--face); color: #000; }
.pitch-in { grid-column: span 2; min-height: 64px; }
table.kv, table.grid-t { width: 100%; border-collapse: collapse; font-size: 16px; margin: 8px 0; }
table.kv th, table.kv td, table.grid-t th, table.grid-t td { border-bottom: 1px solid var(--panel2); padding: 7px 8px; text-align: left; }
table.kv th { color: var(--muted); width: 210px; }
table.grid-t tr:first-child th { color: var(--muted); font-size: 13px; text-transform: uppercase; }

#toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(20px); background: var(--inv-bg); color: var(--inv-fg); padding: 14px 22px; border-radius: 12px; font-size: 18px; font-weight: 800; opacity: 0; pointer-events: none; transition: .2s; z-index: 60; max-width: 80vw; text-align: center; border: 3px solid #000; }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* max contrast: pure black/white, thicker borders, larger text */
body.hc { --bg: #000; --panel: #000; --panel2: #fff; --muted: #fff; --line: #fff; --fs: 19px; }
body.hc .btn, body.hc .tool, body.hc .input, body.hc .segbtn, body.hc .tab, body.hc .job-card, body.hc .sys-item, body.hc .kp-key, body.hc .pbtn { border-width: 3px; }
body.hc .grid line { stroke: #161616 !important; }

@media (max-height: 720px) { .tool { min-height: 39px; } .tsec { margin: 2px 2px 1px; } }
@media (orientation: portrait) { .tools { width: 105px; } .sys-list { width: 240px; } }

/* ---------- phase 3: rules editor, layout, takeoff ---------- */
.badge.warn { background: var(--danger); color: #fff; }
.badge.ex { background: #c38bff; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: 900; }
.badge.ref, .banner.ref b { background: #00e5ff; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: 900; }
.banner.ref { background: #002a30; border-color: #00e5ff; margin: 8px 18px 0; }
.banner.sm { font-size: 14px; }
.lnk { color: var(--primary-t); font-weight: 800; }
.rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.rgroup { border: 2px solid var(--line); border-radius: var(--radius); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rgroup.wide { grid-column: 1 / -1; overflow-x: auto; }
.rgroup legend { font-weight: 900; font-size: 17px; padding: 0 6px; color: var(--primary-t); }
.rule { display: grid; grid-template-columns: 1fr minmax(110px, 46%); gap: 4px 10px; align-items: center; font-size: 15px; }
.rule .input { min-height: 48px; }
.rule.rule-bool { grid-template-columns: 1fr auto; }
.rule .src { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.p .src, p.src { font-size: 13px; color: var(--muted); }
.chk { width: 32px; height: 32px; accent-color: var(--primary); }
.rule-bool.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px; font-weight: 800; }
.rtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.rtable th, .rtable td { border-bottom: 1px solid var(--line); padding: 4px; text-align: left; }
.rtable .input { min-height: 44px; width: 100%; }
.rtable .input.sm { width: 70px; }
.job-sub { color: var(--muted); font-size: 18px; font-weight: 700; }
.tabs.pad { padding: 8px 18px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.layout-body, .takeoff-body { flex: 1; min-height: 0; display: flex; gap: 0; }
.layout-canvas { flex: 1; min-width: 0; background: var(--canvas); display: flex; }
.layout-canvas svg { width: 100%; height: 100%; }
.lpt { fill: #fff; font-weight: 900; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #000; stroke-width: 0.12px; pointer-events: none; }
#layoutSvg .plane-num, #layoutSvg .plane-num * { pointer-events: none; }
.layout-side, .takeoff-side { width: 380px; overflow-y: auto; padding: 10px 14px 30px; border-left: 3px solid var(--line); background: var(--surface); }
.takeoff-side { width: 470px; }
.layout-side h3, .takeoff-side h3 { margin: 14px 0 6px; font-size: 18px; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lg { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.lg .sw { width: 26px; height: 20px; border-radius: 4px; border: 2px solid #000; outline: 1px solid #fff; }
.plane-card { border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { border: 3px solid var(--line); border-radius: 6px; padding: 2px 6px; font-weight: 800; }
.chip.extra { border-style: dashed; font-weight: 600; font-size: 11px; }
.btn.sm { min-height: 36px; padding: 3px 9px; font-size: 11px; }
.order { flex: 1; min-width: 0; overflow-y: auto; padding: 12px 18px 40px; }
.shorthand { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 18px; margin-bottom: 10px; }
.order-t { width: 100%; border-collapse: collapse; }
.order-t tr.cat th { text-align: left; font-size: 19px; color: var(--primary-t); padding: 14px 0 4px; border-bottom: 2px solid var(--line); }
.order-t td { padding: 6px 4px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.order-t td.ol { font-size: 19px; white-space: nowrap; }
.order-t .pl { font-size: 22px; }
.order-t td.basis { font-size: 13px; color: var(--muted); }
.edge-t, .cmp-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.edge-t td, .cmp-t td, .cmp-t th { padding: 3px 4px; border-bottom: 1px solid var(--rule); text-align: left; }
.edge-t .input.sm { min-height: 44px; }
.btn.snow.on { background: #cfefff; color: #000; }
.cmp-t tr.ok td:last-child { color: var(--ok-t); font-weight: 800; }
.cmp-t tr.bad td:last-child { color: #ff8a8a; font-weight: 800; }
.cmp-t tr.muted td { color: var(--muted); }
details { margin-top: 10px; font-size: 14px; }

/* ---------- phase 3b: confirmations, manual lists, job options ---------- */
.conf { display: inline-block; font-size: 11.5px; font-weight: 900; padding: 1px 6px; border-radius: 4px; margin-right: 4px; white-space: nowrap; }
.conf.c { background: var(--ok); color: #000; }
.conf.u { background: #ffb347; color: #000; }
.mode { font-size: 11px; font-weight: 900; padding: 2px 6px; border-radius: 4px; }
.mode.m { background: var(--ok); color: #000; }
.mode.c { background: #3a4654; color: #fff; }
.plane-card.manual { border-color: var(--ok); }
.lpt.mtag { fill: var(--ok); }
.sq-box { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; background: #08260f; border: 2px solid var(--ok); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
.sq-box > div:first-child { display: flex; flex-direction: column; }
.sqn { font-size: 30px; }
.sq-alt { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.jopts { display: flex; flex-direction: column; gap: 8px; }
.jo { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--fg); }
.jo .input.sm { width: auto; min-height: 48px; font-size: 16px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper b { min-width: 28px; text-align: center; font-size: 20px; }
.stepper .btn.sm, .ml-row .btn.sm { min-width: 36px; min-height: 36px; font-size: 15px; }
.btn.tgl.on { background: var(--ok); color: #000; border-color: var(--ok); }
.rtable-wrap { overflow-x: auto; }
.ml { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 14px; }
.ml-list { max-height: 52vh; max-height: 52dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ml-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--panel2); padding: 2px 0; }
.ml-len { font-size: 24px; min-width: 90px; }
.ml-qty { font-size: 22px; min-width: 34px; text-align: center; }
.ml-x { color: var(--muted); }
.ml-total { font-size: 15px; color: var(--ok-t); font-weight: 900; margin-top: 6px; }
#ml-in { flex: 1; min-width: 0; font-size: 28px; font-weight: 900; min-height: 56px; border: 3px solid var(--line); border-radius: 10px; padding: 4px 10px; font-family: ui-monospace, monospace; background: var(--input); color: var(--fg); }
.ml-grid .kp-key { min-height: 39px; }
.ml-add { width: 100%; margin-top: 8px; }

/* ---------- screen space: collapsible nav + tools, full-screen draw ---------- */
.navbtn { flex: none; }
#navScrim { display: none; }
body.nav-collapsed #rail { display: none; }
body.tools-hidden .tools { display: none; }
.fs-ctrl { display: none; }
.draw-head { min-height: 56px; padding: 4px 8px; gap: 6px; }
.draw-head .btn { min-height: 36px; }
.draw-head .btn.icon { min-width: 36px; font-size: 15px; }
.draw-foot { min-height: 40px; padding: 4px 10px; font-size: 15px; }
body.fsdraw #rail, body.fsdraw .draw-head, body.fsdraw .draw-foot { display: none !important; }
body.fsdraw .fs-ctrl { display: flex; position: absolute; top: 8px; left: 8px; gap: 6px; z-index: 5; }
body.fsdraw .fs-ctrl .btn { min-height: 39px; background: rgba(0,0,0,.72); }
body.fsdraw .fs-ctrl .btn.icon { min-width: 39px; font-size: 16px; }
body.fsdraw .draw-body { position: relative; }

/* narrow screens (phones, either orientation) */
@media (max-width: 760px), (max-height: 520px) {
  :root { --touch: 52px; --fs: 17px; }
  #rail { display: none; position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: 84px; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
  body.nav-open #rail { display: flex; }
  body.nav-open #navScrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 44; }
  .view-head { padding: 6px 8px; gap: 8px; flex-wrap: wrap; }
  .view-head h1 { font-size: 21px; }
  .view-head .btn.big { min-height: 36px; font-size: 12px; padding: 4px 9px; }
  .job-sub { font-size: 14px; }
  .wide-only { display: none !important; }
  .job-title { max-width: 120px; font-size: 16px; }
  .draw-head .tabs { max-width: none; flex: 1; min-width: 0; }
  .view > * { flex-shrink: 0; }
  .view > .layout-body, .view > .takeoff-body, .view > .sys-layout, .view > .job-list, .view > .draw-body { flex-shrink: 1; }
  .tab { min-height: 36px; padding: 3px 8px; }
  .select { max-width: 150px; min-height: 46px; font-size: 15px; }
  .sys-pick > span { display: none; }
  .job-card { flex-wrap: wrap; }
  .job-open { flex-basis: 100%; }
  .sys-layout { flex-direction: column; overflow-y: auto; }
  .sys-list { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 3px solid var(--line); flex: none; }
  .sys-item { min-width: 220px; min-height: 60px; }
  .sys-form { overflow: visible; padding: 10px 12px 40px; }
  .fgrid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .rules { grid-template-columns: 1fr; }
  .layout-body, .takeoff-body { flex-direction: column; overflow-y: auto; }
  .layout-canvas { flex: none; height: 62vh; height: 62dvh; min-height: 260px; }
  .layout-side, .takeoff-side { width: auto; border-left: 0; border-top: 3px solid var(--line); overflow: visible; }
  .order { overflow: visible; flex: none; padding: 10px 12px; }
  .banner.ref { margin: 6px 8px 0; font-size: 14px; }
  .ml { grid-template-columns: 1fr; }
  .ml-list { max-height: 30vh; max-height: 30dvh; }
  .modal { padding: 12px 14px; }
  .kp-key { min-height: 36px; }
  .draw-foot .hint { font-size: 14px; }
}
/* phone portrait: tools become a bottom strip under the canvas */
@media (max-width: 760px) and (orientation: portrait) {
  .draw-head { flex-wrap: wrap; row-gap: 4px; }
  .draw-head .job-title { flex: 1 1 140px; min-width: 140px; max-width: none; }
  .draw-head .spacer { display: none; }
  .draw-head .tabs { order: 10; flex: 1 1 0; }
  .draw-head .sys-pick { order: 11; }
  .draw-body { flex-direction: column; }
  .tools { width: auto; border-left: 0; border-top: 3px solid var(--line); display: flex; overflow-x: auto; overflow-y: hidden; padding: 6px; gap: 6px; flex: none; }
  .tools .tsec { display: none; }
  .tools .tgrid { display: flex; gap: 4px; }
  .tools .tool { min-width: 48px; min-height: 42px; flex: none; }
  .tools .zoompair { flex: none; }
  .tools .tool.half { min-width: 39px; }
  #measureInfo { display: none; }
}
/* phone landscape: one slim column of tools, compact bars */
@media (max-height: 520px) and (orientation: landscape) {
  .draw-head { min-height: 48px; flex-wrap: nowrap; }
  .draw-head .btn { min-height: 36px; }
  .draw-head .btn.icon { min-width: 36px; }
  .tools { width: 69px; padding: 4px; }
  .tools .tsec { display: none; }
  .tools .tgrid { grid-template-columns: 1fr; gap: 3px; margin-bottom: 4px; }
  .tools .tool { min-height: 36px; font-size: 11px; }
  .tools .tool .ico { font-size: 14px; }
  .tools .zoompair { flex-direction: column; gap: 3px; }
  .tools .tool.half { min-height: 36px; width: 100%; }
  .draw-foot { min-height: 32px; font-size: 13px; padding: 2px 8px; }
  #measureInfo { display: none; }
  .layout-canvas { height: 80vh; height: 80dvh; }
}

/* ---- panel length overrides (Panel Layout) ---- */
.layout-canvas { position: relative; }
.lp { cursor: pointer; touch-action: none; }
.lp.sel { stroke: #ff9f1c !important; stroke-width: 0.5px; stroke-dasharray: none !important; fill-opacity: 0.95; }
.lp.rm.sel { fill: #ff9f1c; fill-opacity: 0.25; stroke: #ff9f1c !important; }
.lpt.rmt { pointer-events: none; }
.lpt.ovt { fill: #fff; }
.ov-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; background: var(--overlay); border: 2px solid #ff9f1c; border-radius: 14px; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; z-index: 5; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.ov-bar[hidden] { display: none; }
.ov-info { font-size: 17px; flex: 1 1 260px; }
.ov-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-btns .nudge { min-width: 76px; font-size: 24px; font-weight: 900; }
.ov-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--overlay2); color: var(--soft); padding: 6px 12px; border-radius: 999px; font-size: 14px; pointer-events: none; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.ovcount { color: #fff; background: #5a3b00; border: 1px dashed #fff; border-radius: 6px; padding: 1px 6px; font-weight: 800; }
.lg .sw.ovsw { background: #444; border: 3px dashed #fff; outline: none; }
.lg .sw.selsw { background: #444; border: 3px solid #ff9f1c; outline: none; }
.legend.marks { margin-top: 6px; }
.lenat { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.approx { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; color: #111; background: #ffd400; border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }
.lkmodal .kp-grid { margin: 8px 0; }
@media (max-width: 760px), (max-height: 520px) {
  .ov-bar { left: 4px; right: 4px; bottom: 4px; padding: 6px; gap: 6px; }
  .ov-info { font-size: 15px; flex-basis: 100%; }
  .ov-btns .btn.big { min-height: 36px; padding: 0 8px; }
  .ov-btns .nudge { min-width: 64px; }
}
/* ---- editable order ---- */
.eo-t { width: 100%; border-collapse: collapse; }
.eo-t th, .eo-t td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.eo-t .eo-q { width: 84px; } .eo-t .eo-l { width: 96px; } .eo-t .eo-d { width: 100%; min-width: 160px; }
.eo-t .input.sm { min-height: 44px; font-size: 17px; }
.eo-row.edited td { background: rgba(255, 159, 28, 0.12); }
.eo-row.added td { background: rgba(125, 255, 107, 0.10); }
.eo-mark { display: block; font-size: 12px; color: #ffb35c; font-weight: 700; }
@media (max-width: 760px) { .eo-t .eo-q { width: 64px; } .eo-t .eo-l { width: 76px; } .eo-t .eo-d { min-width: 110px; } }

/* Official specs block + boot table */
.specs { margin: 8px 0; padding: 6px 10px; border: 1px solid #c9d6e3; border-radius: 8px; background: #f6f9fc; }
.specs summary { font-weight: 600; cursor: pointer; }
.specs td:last-child { white-space: nowrap; }

/* ---------- sketch workflow: step bar + per-step palette ---------- */
.stepbar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--surface); border-bottom: 3px solid var(--line); overflow-x: auto; flex: none; }
.stp { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 3px 9px 3px 4px; border: 2px solid var(--line); border-radius: 24px; background: var(--panel); color: var(--fg); font-weight: 900; font-size: 12px; white-space: nowrap; }
.stp .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2a3440; font-size: 12px; }
.stp small { font-weight: 700; color: var(--muted); }
.stp.done .n { background: var(--ok); color: #000; }
.stp.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); box-shadow: 0 0 0 3px var(--accent); }
.stp.on .n { background: var(--accent); color: #000; }
.stp.on small { color: #333; }
.stp-sep { color: var(--muted); font-weight: 900; }
.stp-next { margin-left: auto; min-height: 36px; padding: 3px 14px; font-size: 13px; white-space: nowrap; }
.step-help { font-size: 14px; line-height: 1.3; color: var(--soft); background: var(--step-bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.tgrid.common { margin-bottom: 4px; }
.tgrid.common .tool { min-height: 36px; font-size: 11px; }
.tool.wide { width: 100%; margin-top: 6px; flex-direction: row; gap: 6px; font-size: 12px; }
.tool.wide.primary { background: var(--accent); color: #000; border-color: var(--accent); }
.tool.wide.primary:disabled { background: var(--panel); color: var(--fg); }
.lgrid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 6px; }
.lbtn { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 3px 8px; border: 3px solid var(--c); border-radius: 10px; background: var(--panel); color: var(--c); font-size: 13px; font-weight: 900; text-align: left; }
.lbtn .sw { width: 20px; height: 6px; border-radius: 4px; background: var(--c); flex: none; }
.lbtn.on { background: var(--c); color: #000; box-shadow: 0 0 0 3px var(--ring); }
.lbtn.on .sw { background: #000; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pgrid .pbtn { min-height: 39px; font-size: 14px; }
.sec-list { margin: 4px 0; padding-left: 22px; font-size: 15px; font-weight: 700; }
.sec-list li { margin: 4px 0; }
.banner.sm { font-size: 13px; padding: 6px 8px; margin-top: 6px; }
.step-note { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--note-bg); color: var(--fg); border: 2px solid var(--danger); border-radius: 10px; padding: 6px 14px; font-weight: 800; font-size: 15px; z-index: 4; max-width: 90%; text-align: center; pointer-events: none; }
@media (min-width: 761px) and (min-height: 521px) { .tools { width: 147px; } }
@media (min-width: 761px) and (min-height: 521px) and (orientation: portrait) { .tools { width: 132px; } }
@media (max-width: 760px), (max-height: 520px) {
  .stp { min-height: 36px; padding: 2px 6px 2px 3px; font-size: 11px; }
  .stp .n { width: 21px; height: 21px; }
  .stp-next { min-height: 36px; padding: 2px 9px; }
  .step-help, .sec-list { display: none; }
  .stepbar { padding: 3px 6px; }
}
/* phone portrait: one horizontal strip under the canvas */
@media (max-width: 760px) and (orientation: portrait) {
  .tools { flex-wrap: nowrap; align-items: stretch; }
  .tools .tgrid.common, .step-tools, .step-tools .tgrid, .lgrid, .pgrid { display: flex; gap: 4px; flex: none; margin: 0; }
  .lbtn { min-width: 72px; min-height: 42px; font-size: 11px; flex: none; }
  .pgrid .pbtn { min-width: 45px; min-height: 42px; flex: none; }
  .tool.wide { width: auto; min-width: 82px; margin: 0; flex: none; }
  .step-tools .hintsm, .step-tools .banner { flex: none; max-width: 180px; align-self: center; margin: 0; }
  .stp-sep { display: none; }
}
/* phone landscape: slim column */
@media (max-height: 520px) and (orientation: landscape) {
  .lgrid, .pgrid { grid-template-columns: 1fr; gap: 4px; }
  .lbtn { min-height: 36px; font-size: 11px; padding: 2px 4px; }
  .lbtn .sw { display: none; }
  .pgrid .pbtn { min-height: 36px; font-size: 11px; }
  .tool.wide { font-size: 11px; flex-direction: column; gap: 0; }
  .step-tools .hintsm, .step-tools .banner { font-size: 11px; }
  .stp-sep { display: none; }
}
.open-items ul { margin: .4em 0 0 1.2em; padding: 0; } .open-items li { margin: .25em 0; }
.net.ver { font-weight: 800; font-size: 15px; color: #ffd400; letter-spacing: .5px; }

#ovLen.flash { animation: ovflash 0.6s ease-out; }
@keyframes ovflash { 0% { background: var(--ok); color: #000; } 100% { background: transparent; } }
#layoutSvg .arrow, #layoutSvg .mtag { pointer-events: none; }
#layoutSvg { touch-action: none; }
.lz-btns { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 3; }
.lz-btns .btn { min-width: 36px; min-height: 36px; font-size: 16px; font-weight: 900; background: #1b2633cc; }
.lz-btns .btn[data-lz=fit] { font-size: 11px; }
.slide-bar { position: absolute; top: 6px; left: 6px; right: 180px; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; align-items: center; z-index: 3; pointer-events: none; }
.slide-bar > * { pointer-events: auto; }
.slide-bar .btn { min-height: 36px; white-space: nowrap; background: #1b2633e6; }
.slide-bar .btn.primary { background: var(--accent); }
.slide-info { background: #000c; border: 2px solid #00e5ff; border-radius: 10px; padding: 6px 10px; font-weight: 800; pointer-events: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slide-hint { pointer-events: none !important; font-size: 13px; color: var(--soft); background: var(--overlay); padding: 4px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 2; }
.slide-bar .hintsm { background: var(--overlay); padding: 4px 8px; border-radius: 8px; }

/* short pieces (v23) */
.lpt.spt { fill: #ffb347; pointer-events: none; }
.lp.sp.sel { stroke: #00e5ff; }
.lpt.ext { fill: #ffe08a; }
.sp-banner { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: var(--overlay); border: 1px solid #ffb347; color: var(--soft); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 14px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 180px); }
.sp-info { flex-basis: 100%; color: #ffe0b0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-list { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; }
.sp-row.pend { color: #ffcf70; }
.sp-row.min { color: #ff6b6b; font-weight: 800; } /* v34: a sub-3' piece left on the order = red in Review */

/* v24: Galaxy Tab fit — nothing off-screen, nothing under the browser / Android nav bar */
#app { box-sizing: border-box; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
@media (min-width: 700px) and (min-height: 521px) { /* tablets only — phones keep their scrolling bars */
  .draw-head { flex-wrap: wrap; row-gap: 4px; }
  .draw-head .tabs { min-width: 0; flex: 1 1 120px; }
  .stepbar { flex-wrap: wrap; row-gap: 4px; }
  .stepbar .stp-next { margin-left: auto; }
}
@media (min-width: 761px) and (min-height: 521px) and (max-height: 900px) {
  .tools .tool { min-height: 36px; font-size: 11px; padding: 2px 3px; }
  .tools .tool .ico { font-size: 13px; }
  .tgrid { gap: 4px; }
  .tsec { margin: 3px 2px 2px; }
}
@media (min-width: 761px) and (min-height: 521px) and (max-height: 760px) {
  .tools .tool { min-height: 36px; flex-direction: row; gap: 3px; }
  .tools .tsec { display: none; }
}
@media (min-width: 700px) and (max-width: 760px) and (orientation: portrait) {
  .tools { flex-wrap: wrap !important; overflow-x: visible !important; }
  .tools .tgrid.common, .step-tools, .step-tools .tgrid, .lgrid, .pgrid { flex-wrap: wrap !important; flex: 1 1 auto !important; }
}
.lc-top { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; z-index: 3; pointer-events: none; }
.lc-top .slide-bar { position: static; right: auto; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; overflow: visible; }
.lc-top .lz-btns { position: static; margin-left: auto; flex: none; pointer-events: auto; }
.slide-info { max-width: 100%; }
.sp-banner { white-space: normal; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 16px); border-radius: 14px; text-align: center; }
@media (min-width: 700px) and (min-height: 521px) { .draw-head .tabs { flex: 0 1 auto; flex-wrap: wrap; overflow: visible; max-width: none; row-gap: 4px; } }
@media (min-width: 761px) and (min-height: 521px) and (max-height: 900px) {
  .tools .tgrid.common .tool { min-height: 36px; }
  .step-help { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
.len-entry { display: flex; flex-wrap: wrap; gap: 4px; }
.len-entry .segbtn { flex: 1 1 64px; min-width: 0; min-height: 36px; }
@media (min-width: 761px) and (min-height: 521px) and (max-height: 900px) and (orientation: landscape) {
  .tools { width: 204px; } /* v33: buttons shrank 25%, but the column keeps room for the 11px labels (3 per row) */
  .step-help { display: none; }
  .tools .tgrid, .tools .lgrid { grid-template-columns: repeat(3, 1fr); }
  .tools .tgrid .span2, .tools .lgrid .span2 { grid-column: span 3; }
}
@media (min-width: 761px) and (min-height: 521px) and (max-height: 900px) and (orientation: landscape) {
  .tools .tgrid, .tools .lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools .tool { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
}
@media (min-width: 761px) and (min-height: 521px) and (max-height: 900px) and (orientation: landscape) {
  .tools .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .tools .lbtn { min-width: 0; min-height: 36px; padding: 3px 4px; font-size: 11px; gap: 3px; }
}
/* portrait tablets (Galaxy Tab 800×1280): drawing on top, full width; lists below (like phones) */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .layout-body { flex-direction: column; overflow-y: auto; }
  .layout-canvas { flex: none; height: 60vh; height: 60dvh; min-height: 320px; }
  .layout-side { width: auto; border-left: 0; border-top: 3px solid var(--line); overflow: visible; }
  /* v33: Takeoff stacks too (order list, then the side panel) and the header wraps — no sideways overflow on the Tab in portrait */
  .takeoff-body { flex-direction: column; overflow-y: auto; }
  .takeoff-side { width: auto; border-left: 0; border-top: 3px solid var(--line); overflow: visible; }
  .order { overflow: visible; flex: none; }
  .view-head { flex-wrap: wrap; }
  .order-t td.ol { white-space: normal; }
  .order-t td { overflow-wrap: anywhere; }
}

/* v25: squares by pitch + Premier Loc (standing seam) labor */
.tier-box, .labor-box { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--rule2); border-radius: 10px; background: rgba(127,127,127,.06); }
.tier-t { border-collapse: collapse; margin: 4px 0; min-width: 220px; }
.tier-t td { padding: 2px 10px 2px 0; }
.tier-t td.num { text-align: right; }
.tier-t tr.tot td { border-top: 1px solid var(--rule2); padding-top: 4px; }
.labor-main { font-size: 18px; margin: 4px 0; }
.labor-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.order-ver { margin-left: 8px; opacity: .8; white-space: nowrap; }

/* v27: Draw toggle button — ON = filled accent (Draw), OFF = plain outline (Move) */
.tool.drawtg { min-height: 36px; min-width: 36px; }
/* v33 (Aaron): Draw is ONE plain button like every other tool — tap on, tap off (Move). ON = solid filled highlight; no switch-style ring or glow. */
.tool.drawtg.on { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: none; }
.tool.drawtg:not(.on) { background: var(--panel); }
/* v27: Snap toggle — inline-SVG magnet + "Snap"; ON = lit accent, full-colour magnet; OFF = dimmed outline, grey magnet, diagonal strike */
.tool.toggle.stated::after { content: none; }
.tool.snaptg { min-height: 36px; min-width: 36px; gap: 2px; }
.tool.snaptg .mag { display: block; flex: none; }
.tool.snaptg .mag-body { fill: #e53935; }
.tool.snaptg .mag-tip { fill: #eceff1; }
.tool.snaptg .mag-strike { stroke: var(--fg); stroke-width: 2.5; stroke-linecap: round; display: none; }
.tool.snaptg.on { background: var(--accent); border-color: var(--accent); color: #000; box-shadow: 0 0 8px var(--accent); }
.tool.snaptg:not(.on) { background: transparent; color: var(--muted); border-style: dashed; }
.tool.snaptg:not(.on) .mag-body, .tool.snaptg:not(.on) .mag-tip { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.tool.snaptg:not(.on) .mag-strike { display: inline; stroke: var(--muted); }
@media (min-width: 761px) and (min-height: 521px) and (max-height: 760px) { .tool.snaptg .mag { width: 14px; height: 14px; } }

/* ---- v29 pitch strip (Sketch) — under the drawing, never covers it ---- */
.pstrip { position: absolute; left: 0; right: 0; bottom: 0; min-height: 56px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; padding: 4px 6px; background: var(--panel); border-top: 3px solid var(--line); z-index: 4; } /* tablets: wraps to 2 rows when the canvas is narrow (Tab portrait); the canvas shrinks by the strip height (--psh) */
.pstrip[hidden] { display: none; }
.canvas-wrap.pstrip-on #canvas { height: calc(100% - var(--psh, 56px)); bottom: auto; }
.pstrip-l { align-self: center; font-weight: 900; font-size: 13px; color: var(--face-t); padding: 0 2px; flex: none; text-transform: uppercase; }
.pstrip .pbtn { flex: 1 0 44px; min-width: 36px; min-height: 36px; height: 36px; padding: 0 2px; font-size: 14px; border-radius: 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.pstrip .pbtn.steep { flex: 1.6 0 64px; font-size: 11px; letter-spacing: .5px; }
.pstrip .pbtn.on { box-shadow: 0 0 0 3px var(--ring) inset; }
@media (max-width: 760px), (max-height: 520px) {
  .pstrip { height: 58px; min-height: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 3px 4px; } /* phones: one row that scrolls sideways */
  .canvas-wrap.pstrip-on #canvas { height: calc(100% - var(--psh, 58px)); }
  .pstrip .pbtn { flex: 0 0 46px; font-size: 13px; }
  .pstrip .pbtn.steep { flex: 0 0 70px; }
}
/* ---- v29 line-type switcher: floats over the drawing while a line is selected ---- */
.typebar { position: absolute; left: 6px; right: 6px; bottom: calc(var(--psh, 56px) + 6px); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; background: var(--overlay); border: 2px solid var(--line); border-radius: 12px; z-index: 5; }
.typebar[hidden] { display: none; }
.tb-l { align-self: center; font-weight: 900; font-size: 13px; color: var(--fg); padding: 0 4px; }
.tbtn { display: flex; align-items: center; gap: 4px; min-height: 36px; min-width: 36px; padding: 2px 8px; border: 3px solid var(--c, var(--line)); border-radius: 10px; background: var(--surface); color: var(--c, var(--fg)); font-size: 11px; font-weight: 900; }
.tbtn .sw { width: 14px; height: 4px; border-radius: 3px; background: var(--c); flex: none; }
.tbtn.on { background: var(--c); color: #000; box-shadow: 0 0 0 3px var(--ring); }
.tbtn.on .sw { background: #000; }
.tbtn.close { --c: var(--fg); --ct: var(--fg); }
@media (max-width: 760px), (max-height: 520px) {
  .typebar { bottom: calc(var(--psh, 58px) + 4px); left: 2px; right: 2px; padding: 4px; }
  .tbtn { font-size: 11px; padding: 2px 4px; }
  .tbtn .sw { display: none; }
}
/* v29 keypad pitch row (length label popup) */
.kp-pitch { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.kp-pl { font-weight: 900; color: var(--face-t); }
.kp-pd { min-width: 39px; min-height: 36px; font-size: 14px; font-weight: 900; }
.kp-psel { flex: 1; min-height: 44px; font-size: 18px; font-weight: 800; }
/* v29: toasts sit above the pitch strip so they never hide it */
body:has(.canvas-wrap.pstrip-on) #toast { bottom: calc(var(--psh-toast, 56px) + 70px); }
/* v29: tablet portrait (narrow canvas beside the tool column): the strip is two even rows of 7 */
@media (min-width: 761px) and (min-height: 521px) and (orientation: portrait) {
  .pstrip-l { display: none; }
  .pstrip .pbtn, .pstrip .pbtn.steep { flex: 0 0 calc((100% - 24px) / 7); min-width: 36px; }
}
/* ---- v30 stacked edges: picker + stacked-edge buttons in the type switcher ---- */
.tbtn.pick { min-height: 42px; font-size: 13px; padding: 3px 10px; }
.tbtn .tb-w { font-weight: 700; font-size: 11px; opacity: .85; }
.tbtn.stk { --c: var(--fg); --ct: var(--fg); border-style: dashed; }
.tbtn.stk.del { --c: #ff8080; }
.typebar[data-mode="stack"] { border-color: var(--fg); border-style: dashed; }
/* v30: toasts move above the type switcher / stacked picker while it is open */
body:has(.canvas-wrap.pstrip-on):has(#typeBar:not([hidden])) #toast { bottom: calc(var(--psh-toast, 56px) + var(--tbh, 110px) + 76px); }
body:has(#typeBar:not([hidden])):not(:has(.canvas-wrap.pstrip-on)) #toast { bottom: calc(var(--tbh, 110px) + 40px); }

/* ---- v33: invisible hit-slop — buttons are 25% smaller, touch areas stay ~44px (4px all round) ---- */
.btn, .tool, .pbtn, .segbtn, .tab, .stp, .tbtn, .lbtn, .kp-key, .kp-pd, #rail button { position: relative; }
.btn::before, .tool::before, .pbtn::before, .segbtn::before, .tab::before, .stp::before, .tbtn::before, .lbtn::before, .kp-key::before, .kp-pd::before, #rail button::before { content: ''; position: absolute; inset: -4px 0; }

/* ---- v33: theme picker in the menu (rail) ---- */
.theme-pick { display: flex; flex-direction: column; gap: 3px; }
.theme-pick .rail-sep { margin-top: 2px; }
#rail .theme-pick button { min-height: 36px; font-size: 11px; flex-direction: row; gap: 3px; border: 2px solid var(--rule2); }
#rail .theme-pick button.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }

/* ---- v33: LIGHT theme (outdoor sunlight): near-black text on white / very light surfaces, AA or better everywhere ---- */
:root[data-theme="light"] {
  --bg: #ffffff; --fg: #0a0a0a; --muted: #333d48; --line: #1c232b; --panel: #f1f4f7; --panel2: #dfe5eb; --input: #ffffff;
  --primary: #ffd400; --primary-fg: #000; --danger: #b71c1c; --accent: #ffb300; --ok: #3ddc84;
  --ridge: #b71c1c; --valley: #0b5fa5; --hip: #17773a; --pen: #7b1fa2; --face: #8a6a00;
  --surface: #ffffff; --inv-bg: #0a0a0a; --inv-fg: #ffffff; --ring: #000; --rule: #cfd6de; --rule2: #9aa6b2; --overlay: rgba(255,255,255,.96); --overlay2: rgba(255,255,255,.92);
  --banner: #fff5c4; --setme: #fff8d6; --note-bg: #ffe4e4; --canvas: #ffffff; --step-bg: #f4f6f8; --soft: #2a333d;
  --ok-t: #11642e; --primary-t: #6b5200; --face-t: #6b5200; --kp-num: #ffffff;
  color-scheme: light;
}
:root[data-theme="light"] #rail { border-right-color: var(--line); }
:root[data-theme="light"] .input::placeholder { color: #5a6673; }
:root[data-theme="light"] .tool.ridge.on, :root[data-theme="light"] .tool.valley.on, :root[data-theme="light"] .tool.hip.on, :root[data-theme="light"] .tool.pen.on, :root[data-theme="light"] .tool.face.on { color: #fff; }
:root[data-theme="light"] .pbtn.on { background: var(--primary); color: #000; border-color: var(--face); }
:root[data-theme="light"] .lbtn, :root[data-theme="light"] .tbtn { color: var(--fg); border-color: var(--ct, var(--c, var(--line))); }
:root[data-theme="light"] .lbtn .sw, :root[data-theme="light"] .tbtn .sw { background: var(--ct, var(--c)); }
:root[data-theme="light"] .lbtn.on, :root[data-theme="light"] .tbtn.on { background: var(--c); color: #000; border-color: var(--ct, #000); }
:root[data-theme="light"] .lpt { fill: #000; stroke: #fff; }
:root[data-theme="light"] .lpt.ovt { fill: #000; }
:root[data-theme="light"] .mode.c { background: #c3ccd6; color: #000; }
:root[data-theme="light"] .lz-btns .btn { background: #ffffffe6; }
:root[data-theme="light"] .slide-bar .btn { background: #ffffffe6; }
:root[data-theme="light"] body.fsdraw .fs-ctrl .btn { background: rgba(255,255,255,.92); }
:root[data-theme="light"] .stp .n { background: #dfe5eb; }
:root[data-theme="light"] .tool.snaptg .mag-tip { fill: #546e7a; }
:root[data-theme="light"] .lg .sw { border-color: #000; outline-color: #000; }
:root[data-theme="light"] .ovcount { color: #000; background: #ffe0a3; border-color: #000; }
:root[data-theme="light"] .lg .sw.ovsw, :root[data-theme="light"] .lg .sw.selsw { background: #c3ccd6; border-color: #000; }
:root[data-theme="light"] .eo-row.added td { background: rgba(23, 119, 58, 0.12); }
:root[data-theme="light"] .warn { color: var(--danger); }
:root[data-theme="light"] .badge.warn { color: #fff; }
:root[data-theme="light"] body.hc { --bg: #fff; --panel: #fff; --panel2: #fff; --muted: #000; --line: #000; --fg: #000; --soft: #000; --rule: #000; }
:root[data-theme="light"] .banner.done, :root[data-theme="light"] .sq-box { background: #e3f6e9; border-color: #17773a; }
:root[data-theme="light"] .banner.warn { background: #ffe4e4; }
:root[data-theme="light"] .banner.ref { background: #e0f9fc; border-color: #007c8a; }
:root[data-theme="light"] .saved.flash { background: #c9efd6; }
:root[data-theme="light"] .cmp-t tr.bad td:last-child { color: var(--danger); }
:root[data-theme="light"] .eo-mark { color: #8a4600; }
:root[data-theme="light"] .net.ver { color: #6b5200; }
:root[data-theme="light"] .sp-info { color: #6b4300; }
:root[data-theme="light"] .sp-row.pend { color: #6b4300; }
:root[data-theme="light"] .sp-row.min { color: #b00020; }
:root[data-theme="light"] .stp.on small { color: #ddd; }
:root[data-theme="light"] .slide-info { background: rgba(255,255,255,.95); border-color: #007c8a; }
:root[data-theme="light"] .badge.ref, :root[data-theme="light"] .banner.ref b { background: #00e5ff; color: #000; }
/* v34 paint mode (Sketch): line-type buttons; the active one is filled in its colour with a thick ring so it's obvious it's ON */
.lgrid.paint { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.lgrid.paint .lbtn { min-height: 36px; padding: 2px 3px; font-size: 11px; gap: 2px; justify-content: center; text-align: center; }
.lgrid.paint .lbtn .sw { display: none; }
.lgrid.paint .lbtn.on { background: var(--c); color: #000; box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--c); position: relative; z-index: 1; }
.paint-hint { margin: 6px 0 2px; padding: 4px 6px; border-radius: 8px; background: var(--note-bg); font-size: 12px; line-height: 1.25; }
@media (orientation: portrait) { .lgrid.paint { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lgrid.paint .lbtn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* v34: tablet portrait — the narrow tool column also holds the 9 paint buttons; keep the step hint to 5 lines (full text in its tooltip) */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .tools .step-help { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .tools .step-help { display: block; -webkit-line-clamp: unset; font-size: 12px; line-height: 15px; height: 45px; max-height: none; padding: 4px 8px; box-sizing: content-box; overflow: hidden; }
}
.lgrid.paint .lbtn { white-space: normal; line-height: 1.1; word-break: keep-all; }
/* ---------- v34: ONE step bar for the whole job (Sketch › Sections › Lengths › Panels › Takeoff › Export) ---------- */
.flowbar[hidden] { display: none !important; }
.flowbar { flex-wrap: nowrap !important; scrollbar-width: none; scroll-behavior: auto; }
.flowbar::-webkit-scrollbar { display: none; }
.flowbar .stp { flex: none; white-space: nowrap; }
.flowbar .stp-next { flex: none; }
.stp small.flag { color: #000; background: var(--warn, #ffb020); border-radius: 9px; padding: 0 5px; font-weight: 900; }
.stp.on small.flag { color: #000; }
@media (min-width: 761px) and (min-height: 521px) { .flowbar .stp { padding: 2px 8px 2px 3px; font-size: 13px; min-height: 36px; } .flowbar .stp .n { width: 22px; height: 22px; } .flowbar { gap: 3px; } }
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1100px) { .flowbar .stp-sep { display: none; } .flowbar .stp { font-size: 12px; padding: 2px 6px 2px 3px; } }
body.fsdraw .flowbar { display: none !important; }
.ll-switch { display: flex; gap: 0; margin: 4px 0 6px; }
.ll-switch .segbtn { flex: 1 1 0; min-width: 0; min-height: 36px; font-size: 12px; padding: 2px 4px; border-radius: 0; }
.ll-switch .segbtn:first-child { border-radius: 10px 0 0 10px; } .ll-switch .segbtn:last-child { border-radius: 0 10px 10px 0; }
.ll-switch .segbtn.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
@media (max-width: 760px) and (orientation: portrait) { .ll-switch { flex: none; margin: 0; align-self: center; } .ll-switch .segbtn { min-width: 70px; } }
/* Export view */
.export-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 18px; display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-content: start; }
.ex-card { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.ex-card h3 { margin: 0 0 8px; }
.ex-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ex-pre { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.35; background: var(--input); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-height: 60vh; overflow: auto; margin: 0; }
@media (max-width: 900px) { .export-body { grid-template-columns: 1fr; padding: 8px; } }
.about-t td { padding: 3px 10px 3px 0; }
@media print {
  body.print-order #rail, body.print-order .flowbar, body.print-order .view-head, body.print-order .ex-btns, body.print-order .ex-card:not(:first-child), body.print-order .ex-card h3, body.print-order #toast { display: none !important; }
  body.print-order .ex-pre { max-height: none; overflow: visible; border: 0; background: #fff; color: #000; font-size: 11pt; }
  body.print-order .export-body { display: block; overflow: visible; }
  body.print-order #app, body.print-order main, body.print-order .view { height: auto; display: block; }
}
@media (max-height: 520px) and (orientation: landscape) { .ll-switch { flex-direction: column; gap: 3px; } .ll-switch .segbtn { border-radius: 10px !important; min-height: 36px; min-width: 36px; } }