/* FlowCAD3D — the drawing module (js/ui/draw/, 2026.10.41): the head above the tabs of the right panel, the tab
   Tekenen with its sections, fields, keypad and parts. One layout for desktop and tablet; the touch sizes come from
   body.mode-touch. Phone: the right panel is a sheet from the bottom (css/app.css, phone layout). */

/* ---------- the head: name of the drawing, Esc, photo, Klaar, ⋯ ---------- */
.dr-head { padding: 10px 12px 10px; border-bottom: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; gap: 8px; }
.dr-hrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dr-hrow .dr-htext { flex: 1; }
/* the fold button in the top-left corner of the head (desktop and tablet); the tabs below spread over the full width.
   A phone (compact) keeps the button at the start of the tab row; docked at the bottom the panel cannot be folded. */
.dr-head .pnl-fold { flex: none; margin-left: -4px; }
body.compact #right .dr-head .pnl-fold, body.dock-bottom #right .dr-head .pnl-fold { display: none; }
body:not(.compact) #right .tabs .pnl-fold { display: none; }
body:not(.compact) #right .tabs .tab { flex: 1 1 auto; justify-content: center; }
.dr-htext { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dr-htitle { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-hsub { font-size: 12px; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-hacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Gereedmelden (A-01, 2026.10.129) on its own line, so that Klaar en opslaan keeps its full label */
.dr-hacts .dr-donestep { flex: 1 1 100%; justify-content: center; }
.dr-hacts .btn { min-height: 40px; }
.dr-hacts .dr-esc { min-width: 56px; font-weight: 700; padding: 0 8px; }
.dr-hacts .dr-esc .ico { width: 16px; height: 16px; }
.dr-hacts .dr-photo, .dr-hacts .dr-more { min-width: 40px; padding: 0 6px; position: relative; }
.dr-hacts .dr-photo .cnt { position: absolute; top: -4px; right: -4px; font-size: 11px; background: var(--accent); color: #fff; border-radius: 9px; padding: 0 5px; }
.dr-hacts .dr-done { flex: 1; min-width: 0; justify-content: center; }
.dr-hacts .dr-done .lbl { overflow: hidden; text-overflow: ellipsis; }
body.mode-touch .dr-hacts .btn { min-height: 48px; }
body.mode-touch .dr-htitle { font-size: 16px; }

/* ---------- the tab Tekenen: a scrolling body and a fixed footer ---------- */
.pbody.dr-host { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }   /* min-height 0: the body shrinks to the panel (a low drawer on a phone in landscape) */
.dr-msg { flex: none; min-height: 40px; padding: 7px 12px; font-size: 13px; line-height: 18px; background: var(--accentbg); color: var(--fg); border-bottom: 1px solid var(--line); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dr-msg.warn { background: #FEF3C7; color: var(--warn); }
.dr-msg:empty { display: none; }
.dr-scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dr-scroll > * { flex-shrink: 0; }
.dr-foot { flex: none; padding: 8px 12px 10px; border-top: 1px solid var(--line); background: var(--bg2); }
.dr-foot .btn { width: 100%; min-height: 48px; font-size: 16px; font-weight: 700; justify-content: center; }
body.mode-touch .dr-foot .btn { min-height: 58px; font-size: 18px; }
.dr-sec { display: flex; flex-direction: column; gap: 8px; }
.dr-sect { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
.dr-hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fg2); }
.dr-ro { margin: 0; }

/* ---------- the grid of the settings: label left, control right ---------- */
.dr-grid { display: grid; grid-template-columns: 76px 1fr; gap: 8px 10px; align-items: center; }
.dr-grid > label { font-size: 13px; font-weight: 600; color: var(--fg2); }
.dr-grid .inp { min-height: 38px; width: 100%; }
.dr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.dr-withbtn { display: grid; grid-template-columns: 1fr 38px; gap: 8px; min-width: 0; }
.dr-withbtn .btn { min-width: 38px; min-height: 38px; padding: 0; }
.dr-two .btn { min-height: 38px; padding: 0 6px; font-size: 13px; }
body.mode-touch .dr-grid .inp, body.mode-touch .dr-withbtn .btn, body.mode-touch .dr-two .btn { min-height: 44px; }
body.mode-touch .dr-withbtn { grid-template-columns: 1fr 44px; }
body.mode-touch .dr-grid { grid-template-columns: 84px 1fr; }
body.mode-touch .dr-grid > label { font-size: 13px; }

/* start point */
.dr-startrow { display: flex; flex-direction: column; gap: 8px; }
.dr-xyz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-xyz .inp { min-height: 38px; width: 100%; text-align: right; }
.dr-setstart { min-height: 42px; justify-content: center; }
body.mode-touch .dr-xyz .inp { min-height: 44px; } body.mode-touch .dr-setstart { min-height: 48px; }

/* ---------- the methods and their input ---------- */
.dr-modebtn { width: 100%; justify-content: space-between; min-height: 40px; font-weight: 700; }
body.mode-touch .dr-modebtn { min-height: 48px; font-size: 14px; }
.dr-input { display: flex; flex-direction: column; gap: 10px; }
.dr-dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-dir { min-height: 60px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--fg); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.dr-dir.on { border-color: var(--accent); background: var(--accentbg); color: var(--accent); }
.dr-dir:disabled { opacity: .35; cursor: not-allowed; }
.dr-dir:active:not(:disabled) { background: var(--accentbg); border-color: var(--accent); }
body.mode-touch .dr-dir { min-height: 70px; font-size: 14px; }
.dr-arrow { width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 8h-5v12h-4V10H5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 8h-5v12h-4V10H5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.dr-d-up .dr-arrow { transform: rotate(0deg); } .dr-d-down .dr-arrow { transform: rotate(180deg); }
.dr-d-right .dr-arrow { transform: rotate(120deg); } .dr-d-left .dr-arrow { transform: rotate(-60deg); }
.dr-d-back .dr-arrow { transform: rotate(60deg); } .dr-d-front .dr-arrow { transform: rotate(-120deg); }
.dr-follow { font-size: 13px; font-weight: 600; color: var(--fg2); }
.dr-flds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-flds.two { grid-template-columns: 1fr 1fr; }
.dr-flds.one { grid-template-columns: 1fr; }
.dr-fld { --ax: var(--accent); min-height: 60px; border: 2px solid var(--line); border-top: 6px solid var(--ax); border-radius: 12px; background: var(--bg2); color: var(--fg); font: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 10px 8px; text-align: left; }
.dr-fld .dr-flbl { font-size: 14px; font-weight: 800; color: var(--ax); }
.dr-fld .dr-flbl small { font-size: 11px; font-weight: 700; margin-left: 6px; }
.dr-fld .dr-fval { font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dr-fld.on { border-color: var(--ax); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax) 30%, transparent); background: color-mix(in srgb, var(--ax) 8%, var(--bg2)); }
body.mode-touch .dr-fld { min-height: 68px; } body.mode-touch .dr-fld .dr-fval { font-size: 20px; }
.dr-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-plane { min-height: 76px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--fg); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dr-plane svg { width: 52px; height: 38px; }
.dr-plane.on { border-color: var(--accent); background: var(--accentbg); }
.dr-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dr-key { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--fg); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.dr-key.dr-kpm { color: var(--accent); }
.dr-key.dr-kfn { font-size: 14px; }
.dr-key:nth-last-child(2) { grid-column: 1 / 3; }
.dr-key:active { background: var(--accentbg); }
body.mode-touch .dr-key { min-height: 52px; font-size: 20px; }
.dr-info { font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 10px; background: var(--accentbg); min-height: 36px; line-height: 1.4; }
.dr-info.warn { background: #FEF3C7; color: var(--warn); }
.dr-info:empty { display: none; }

/* automatic route */
.dr-row3 { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
.dr-row3 .btn { min-width: 40px; min-height: 40px; padding: 0; }
.dr-var { font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- parts at the end ---------- */
.dr-library { min-height: 40px; justify-content: center; }
.dr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dr-row2 .btn { min-height: 42px; font-size: 13px; font-weight: 600; justify-content: center; }
body.mode-touch .dr-row2 .btn, body.mode-touch .dr-library { min-height: 48px; }
.dr-choose { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dr-tile { min-height: 56px; min-width: 88px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--fg); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.dr-tile:active { border-color: var(--accent); background: var(--accentbg); }

/* labels in 3D */
.lbl3d.dr-endlbl { transform: translate(-50%, 60%); color: var(--ink); border-color: #22c55e; background: rgba(255,255,255,.92); font-weight: 800; }
#toast-root .dr-donetoast { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
#toast-root .dr-donetoast .btn { color: inherit; background: transparent; border-color: currentColor; white-space: nowrap; flex-shrink: 0; }

/* ---------- tablet: the right panel always docked; in portrait at the bottom in two columns ---------- */
body.dock-bottom #main { flex-direction: column; }
body.dock-bottom #center { min-height: 0; }
body.dock-bottom #right { width: auto !important; height: 46vh; max-height: 46vh; border-left: 0; border-top: 1px solid var(--line); flex: none; }
body.dock-bottom #right .dr-scroll { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-content: start; }
body.dock-bottom #right .dr-scroll > .dr-s-line, body.dock-bottom #right .dr-scroll > .dr-s-start, body.dock-bottom #right .dr-scroll > .dr-s-next, body.dock-bottom #right .dr-scroll > .dr-s-auto { grid-column: 1; }
body.dock-bottom #right .dr-scroll > .dr-row2, body.dock-bottom #right .dr-scroll > .dr-ro { grid-column: 2; }
body.dock-bottom #right .dr-scroll > .dr-s-next { grid-row: span 3; }
body.dock-bottom .dr-head { flex-direction: row; align-items: center; }
body.dock-bottom .dr-head .dr-hrow { flex: 1; }
body.dock-bottom .dr-head .dr-hacts { margin: 0; }
body.dock-bottom .dr-hacts .dr-done { flex: none; }
body.dock-bottom .fc-drawer-handle.right { display: none; }

/* ---------- phone (portrait): the right panel as a sheet from the bottom while drawing ---------- */
body.phone.rsheet #right { top: auto; bottom: 0; left: 0; right: 0; width: 100% !important; height: var(--rsheet-h, 54vh); max-height: calc(100dvh - var(--tb-h) - 40px); transform: none; visibility: visible; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(11, 30, 58, .16); transition: height .2s ease; display: flex; flex-direction: column; }
body.phone.rsheet.rsheet-full #right { height: calc(100dvh - var(--tb-h) - var(--safe-t) - 8px); }
body.phone.rsheet.rsheet-peek #right { height: auto; }
body.phone.rsheet.rsheet-peek #right .pbody, body.phone.rsheet.rsheet-peek #right .tabs { display: none; }
body.phone.rsheet #center { margin-bottom: 0; }
.dr-grab { display: none; }
body.phone.rsheet .dr-grab { display: flex; touch-action: none; align-items: center; justify-content: center; height: 22px; flex: none; border: 0; background: var(--bg2); cursor: var(--cur-grab); width: 100%; padding: 0; }
.dr-grab .dr-grabbar { width: 44px; height: 5px; border-radius: 3px; background: var(--line2); }
/* the palette stays above the sheet: js/ui/palette.js place() measures the part of the drawing area above it */
body.phone .dr-head { padding: 6px 10px 8px; }
/* the tab row of the right panel on a phone: one line that scrolls (wrapped it takes four rows of a low drawer in landscape) */
body.phone #right .tabs { flex-wrap: nowrap; overflow-x: auto; }
body.phone #right .tabs .tab { flex: none; }
body.phone .dr-hacts .dr-esc { min-width: 48px; }
body.phone .dr-dirs { grid-template-columns: repeat(6, 1fr); }
body.phone .dr-dir { min-height: 56px; font-size: 11px; }
body.phone.phone-land .dr-dirs { grid-template-columns: repeat(3, 1fr); }

/* ---------- phone (body.phone): its own layout, 2026.10.44 — the tablet and the desktop are unchanged ----------
   Compact: the sheet takes 40 % of the screen, the head is one row of 44 px (the name of the drawing is in the top bar),
   the tabs are low, the sections Leiding and Startpunt are folded, the palette is a slim row of icons, the view cube is small. */
body.phone.rsheet #right { height: var(--rsheet-h, 40vh); }
body.phone.rsheet .dr-grab { height: 14px; }
body.phone .dr-head { padding: 3px 6px 4px; gap: 0; touch-action: none; }
body.phone .dr-htext { display: none; }
body.phone .dr-hacts { gap: 4px; }
body.phone .dr-hacts .btn { min-height: 44px; }
body.phone .dr-hacts .dr-esc { min-width: 44px; padding: 0 6px; }
body.phone .dr-hacts .dr-esc .lbl { display: none; }
body.phone #right .tabs { padding: 0 4px; }
body.phone #right .tabs .tab { min-height: 34px; padding: 0 8px; font-size: 13px; }
body.phone .dr-msg { min-height: 0; padding: 4px 10px; font-size: 12px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.phone .dr-sec { padding: 4px 10px; }
body.phone .dr-sect { font-size: 11px; margin-bottom: 3px; }
body.phone .dr-grid { grid-template-columns: 60px 1fr; gap: 5px 8px; }
body.phone .dr-grid .inp, body.phone .dr-withbtn .btn, body.phone .dr-two .btn { min-height: 38px; }
body.phone .dr-keys .dr-key { min-height: 44px; }
body.phone .dr-fld { min-height: 46px; }
body.phone .dr-foot { padding: 4px 8px; }
body.phone .dr-foot .btn { min-height: 44px; }
/* folded sections on a phone: a summary line that opens on a tap */
body.mode-touch .dr-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; }
body.mode-touch .dr-fold > summary::-webkit-details-marker { display: none; }
body.mode-touch .dr-fold > summary .dr-sect { margin: 0; }
body.mode-touch .dr-fold > summary .dr-foldsum { color: var(--fg2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
body.mode-touch .dr-fold[open] > summary .dr-foldsum { display: none; }
/* the palette: a row of icons at the bottom of the view */
body.phone #palette.pal-phone { display: flex !important; flex-direction: row; flex-wrap: nowrap; gap: 2px; padding: 2px; border-radius: 10px; }
body.phone #palette.pal-phone .btn { min-width: 36px; min-height: 44px; padding: 0; }
body.phone #palette.pal-phone .btn .pal-lbl { display: none; }
body.phone #palette.pal-phone .pal-grip { display: none; }   /* docked at the bottom: no dragging on a phone */
body.phone #palette.pal-phone .pal-sep { width: 1px; height: 24px; margin: 0 2px; }
body.phone #palette.pal-phone .pal-min { display: none; }
/* the view cube and its tiles: smaller on a phone */
body.phone #viewbar { transform: scale(.66); transform-origin: top right; }

/* phone: every panel folds away (2026.10.44) — the sheet to its head (button in the head and the handle), the palette to one
   button, the view cube panel to one button */
body.phone .dr-sheetbtn { display: inline-flex; min-width: 44px; padding: 0 6px; }
body.phone .dr-sheetbtn .ico { transform: rotate(90deg); transition: transform .2s; }
body.phone.rsheet-peek .dr-sheetbtn .ico { transform: rotate(-90deg); }
.dr-sheetbtn { display: none; }
body.phone #palette.pal-phone .pal-min { display: inline-flex; min-width: 30px; }
body.phone #palette.pal-phone.minimized .pal-keep, body.phone #palette.pal-phone.minimized .pal-grip { display: none !important; }
body.phone:not(.vb-open) #viewbar .vc-box { display: none; }
body.phone #viewbar .vb-toggle { min-height: 44px; min-width: 44px; }

/* phone: the drawing sheet as a compact input dock (2026.10.44) — the fields and a two-row keypad first, the method
   button after them; the tab row stays in view while the tab Tekenen is active (2026.10.54) */
body.mode-touch .dr-s-next { display: flex; flex-direction: column; gap: 6px; }
body.mode-touch .dr-s-next > .dr-sect { display: none; }
body.mode-touch .dr-s-next > .dr-modebtn { order: 2; min-height: 44px; font-size: 13px; }
body.phone .dr-input { gap: 6px; }
body.mode-touch .dr-input > .dr-hint { display: none; }
body.phone .dr-flds { gap: 6px; }
body.phone .dr-fld { min-height: 44px; }
body.phone .dr-keys { grid-template-columns: repeat(7, 1fr); gap: 4px; }
body.phone .dr-keys .dr-key { min-height: 44px; font-size: 18px; }
body.phone .dr-key:nth-last-child(2) { grid-column: auto; }
body.phone .dr-key[data-key="1"] { order: 1; } body.phone .dr-key[data-key="2"] { order: 2; } body.phone .dr-key[data-key="3"] { order: 3; }
body.phone .dr-key[data-key="4"] { order: 4; } body.phone .dr-key[data-key="5"] { order: 5; } body.phone .dr-key[data-key="±"] { order: 6; }
body.phone .dr-key[data-key="⌫"] { order: 7; } body.phone .dr-key[data-key="6"] { order: 8; } body.phone .dr-key[data-key="7"] { order: 9; }
body.phone .dr-key[data-key="8"] { order: 10; } body.phone .dr-key[data-key="9"] { order: 11; } body.phone .dr-key[data-key="0"] { order: 12; }
body.phone .dr-key[data-key=","] { order: 13; } body.phone .dr-key[data-key="C"] { order: 14; }
body.phone .dr-info { min-height: 0; padding: 4px 8px; font-size: 12px; line-height: 1.3; }
/* a narrow phone (360 px): two rows of seven keys as well — narrower margins keep every key at least 44 px wide, so the
   sheet stays low and the 3D view above it large (2026.10.58) */
@media (max-width: 379px) { body.phone .dr-scroll { padding-left: 6px; padding-right: 6px; } body.phone .dr-sec { padding-left: 4px; padding-right: 4px; } }
/* a phone in landscape (the drawer beside the view): three rows of five keys, all at least 44 px wide */
body.phone.phone-land .dr-keys { grid-template-columns: repeat(5, 1fr); }
body.phone.phone-land .dr-key[data-key="6"] { order: 6; } body.phone.phone-land .dr-key[data-key="7"] { order: 7; } body.phone.phone-land .dr-key[data-key="8"] { order: 8; }
body.phone.phone-land .dr-key[data-key="9"] { order: 9; } body.phone.phone-land .dr-key[data-key="0"] { order: 10; } body.phone.phone-land .dr-key[data-key="±"] { order: 11; }
body.phone.phone-land .dr-key[data-key=","] { order: 12; } body.phone.phone-land .dr-key[data-key="⌫"] { order: 13; } body.phone.phone-land .dr-key[data-key="C"] { order: 14; }
/* the pointed piece (2026.10.45): two actions under the steps */
.dr-foot.dr-foot2 { display: flex; gap: 8px; }
.dr-foot.dr-foot2 .btn { flex: 1; }
.dr-s-pending .dr-pendhint { font-weight: 600; }
body.phone .dr-s-pending > .dr-sect { display: none; }
body.phone .dr-s-pending .dr-pendhint { display: none; }
@media (max-width: 379px) { body.phone #palette.pal-phone .btn { min-width: 33px; } body.phone #palette.pal-phone .pal-min { min-width: 28px; } }
/* tablet in portrait: the right panel is docked at the bottom and cannot be folded away (2026.10.54) */
body.dock-bottom #right .tabs .pnl-fold { display: none; }
/* a tablet (touch, not a phone): the labels of the settings above their fields and the subtitle of the head on two lines,
   so no option or name is cut off (2026.10.58, L-44) */
body.mode-touch:not(.phone) .dr-grid { grid-template-columns: 1fr; gap: 2px 0; }
body.mode-touch:not(.phone) .dr-grid > label { margin-top: 6px; font-size: 12px; }
body.mode-touch:not(.phone) .dr-hsub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }