:root {
  --bg: #f4f5f7; --panel: #ffffff; --ink: #1d2733; --muted: #667085; --line: #d9dde3;
  --accent: #b5651d; --accent-ink: #ffffff; --ok: #1f7a4d; --err: #b42318; --warn-bg: #fff4e0;
  --viewer-bg: #e9ebef;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1f24; --panel: #252a31; --ink: #e6e8eb; --muted: #98a2b3; --line: #3a424c;
    --accent: #e09450; --accent-ink: #1b1f24; --ok: #55c28a; --err: #ff8a80; --warn-bg: #3a2f1c;
    --viewer-bg: #14171b;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 8px; }
p.hint, .hint { color: var(--muted); margin: 0 0 12px; }

.topbar { display: flex; align-items: center; gap: 4px; padding: 0 16px; height: 48px; background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar .brand { font-weight: 700; margin-right: 16px; }
.topbar a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--muted); }
.topbar a.active, .topbar a:hover { background: var(--bg); color: var(--ink); }

main.page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }

button, .btn { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.small { padding: 3px 9px; font-size: 12px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
input[type=number] { width: 90px; }
textarea { width: 100%; font-family: Consolas, monospace; font-size: 12px; }

.msg { padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.msg.err { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); white-space: pre-wrap; }
.msg.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.msg.warn { background: var(--warn-bg); }

/* settings */
fieldset.opt { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px; padding: 10px 14px; }
fieldset.opt legend { font-weight: 600; padding: 0 6px; }
fieldset.opt label { display: block; padding: 3px 0; cursor: pointer; }

/* sketch page */
.drop { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); }
.drop img { max-width: 100%; max-height: 260px; display: block; margin: 10px auto 0; border-radius: 6px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--warn-bg); }
.projects { width: 100%; border-collapse: collapse; }
.projects td, .projects th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }

/* project page */
body.project { display: flex; flex-direction: column; }
.workspace { flex: 1; display: flex; min-height: 0; }
.side { width: 500px; max-width: 70vw; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: none; padding: 10px 4px; }
.tabs button.active { border-bottom-color: var(--accent); font-weight: 600; }
.tabbody { flex: 1; overflow: auto; padding: 12px; }
.stage { flex: 1; position: relative; min-width: 0; background: var(--viewer-bg); }
.stage .toolbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; z-index: 2; pointer-events: none; }
.stage .toolbar > * { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
.stage .toolbar label { display: inline-flex; align-items: center; gap: 6px; line-height: 20px; }
.stage .toolbar input[type=range] { margin: 0; height: 20px; vertical-align: middle; }
#statusbar { position: absolute; left: 10px; bottom: 10px; z-index: 2; }

details.body { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
details.body > summary { cursor: pointer; padding: 8px 10px; font-weight: 600; }
details.body .fields { padding: 4px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.fields label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields select { width: 100%; color: var(--ink); }
.fields label.check { flex-direction: row; align-items: center; gap: 6px; }
.fields label.check input { width: auto; }

table.cut { border-collapse: collapse; width: 100%; font-size: 12px; }
table.cut th, table.cut td { padding: 3px 5px; border-bottom: 1px solid var(--line); text-align: left; }
table.cut td.num, table.cut th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pieces .piece { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; font-size: 12px; border-radius: 4px; }
.pieces .piece:hover, .pieces .piece.hl { background: var(--bg); }
.pieces .piece span:last-child { color: var(--muted); white-space: nowrap; }
pre.summary { background: var(--bg); padding: 8px; border-radius: 6px; font-size: 12px; overflow: auto; }

@media (max-width: 760px) {
  .workspace { flex-direction: column-reverse; }
  .side { width: 100%; max-width: none; height: 50vh; border-right: 0; border-top: 1px solid var(--line); }
  .stage { height: 45vh; flex: none; }
}

/* zone editor */
.zone { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.zone .row { margin: 0 0 6px; }
.grow { flex: 1; }
.zone .fields { padding: 0; grid-template-columns: 1fr 1fr; display: grid; gap: 6px 10px; }


/* readout while a body is being moved */
#movehint { position: absolute; top: 52px; left: 10px; z-index: 2; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
#movehint[hidden] { display: none; }
/* the ruler: its button (pressed while it is on) and the see-through card of the numbers, under the undo / redo buttons */
#rulerBtn { cursor: pointer; gap: 6px; }
#rulerBtn.on { background: var(--accent, #2d7ff9); color: #fff; border-color: transparent; }
#rulerBtn svg.ic { width: 18px; height: 18px; }
#cards { position: absolute; top: 56px; right: 10px; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#measure, #info { width: 260px; box-sizing: border-box; padding: 8px 12px; border-radius: 8px; font-size: 12px;
  background: color-mix(in srgb, var(--panel) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); backdrop-filter: blur(3px); box-shadow: 0 2px 10px #0002; }
#measure[hidden], #info[hidden] { display: none; }
#measure table, #info table { border-collapse: collapse; margin: 4px 0; width: 100%; }
#info table + table { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
#measure th, #info th { font-weight: 600; text-align: left; padding: 1px 8px 1px 0; color: var(--muted); white-space: nowrap; vertical-align: top; }
#measure td, #info td { text-align: right; padding: 1px 0 1px 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#measure thead th, #measure tr:first-child th:not(:first-child) { text-align: right; }
#measure .dist { margin-top: 4px; font-size: 13px; }
#measure .hint { margin-top: 3px; }
details.body.sel { background: color-mix(in srgb, var(--ink) 8%, var(--panel)); }
/* the sections of a body card: accordions, one open at a time */
details.body > .row { padding: 0 10px 8px; }
/* one card per drawer inside a drawer zone */
.drawer { border: 1px dashed var(--line); border-radius: 6px; padding: 6px 8px; margin: 6px 0 0; }
.drawer .hint { margin: 0 0 4px; }
.drawer .fields { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }

.pieceslist { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 2px 0 10px; font-size: 13px; }
.pieceslist label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; }

/* Explodare and Vedere: two cards one under the other, the same width */

.stage .toolbar { align-items: flex-start; }   /* Fronturi / Blat / Snap on the line of Explodare, Vedere under it */
.pieceslist label.check .hint { margin: 0 0 0 auto; font-size: 12px; }   /* the type (carcass, back...) on the same line as the name, aligned to the right */
h2.wt-title { margin: 14px 0 6px; }
details.body.wt > summary .hint { font-weight: 400; margin: 0 0 0 6px; font-size: 12px; }
fieldset.opt label.num { display: flex; align-items: center; gap: 8px; }
fieldset.opt label.num > span:first-child { min-width: 7em; }

/* the left column folds to a strip */
.tabs .sidetoggle { flex: none; width: 32px; padding: 10px 0; }
.side.min { width: 36px !important; }
.side.min .tabbody, .side.min .tabs button[data-tab] { display: none; }
.side.min .tabs { border-bottom: 0; }
.bodycard .row { margin: 8px 0 0; }

/* the tree under Vedere (in the same column, same left edge): transparent, with dotted guides and folders */
#tree { max-height: calc(100vh - 230px); overflow: auto; font-size: 13px; pointer-events: none; align-self: flex-start; }
#tree .tn { pointer-events: auto; display: flex; align-items: center; gap: 3px; padding: 0 6px 0 0; cursor: pointer; border-radius: 4px; white-space: nowrap; width: fit-content; line-height: 20px; text-shadow: 0 0 3px var(--viewer-bg), 0 0 3px var(--viewer-bg); position: relative; }
#tree .kids { margin-left: 8px; }
#tree .node { position: relative; padding-left: 12px; }
#tree .node::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px dotted var(--muted); }
#tree .node:last-child::before { bottom: auto; height: 10px; }   /* the guide ends at the last child */
#tree .node > .tn::before { content: ''; position: absolute; left: -12px; top: 10px; width: 10px; border-top: 1px dotted var(--muted); }
#tree .tn:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); }
#tree .tn.sel { background: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; }
#tree .tn.cur, #tree .tn.root { font-weight: 600; }
#tree .tn.off { opacity: .45; }
#tree .exp { width: 11px; height: 11px; flex: none; border: 1px solid var(--muted); background: var(--panel); color: var(--ink); font: 10px/9px monospace; text-align: center; margin-right: 2px; }
#tree .exp:empty { border: 0; background: none; }
#tree .ico { font-size: 12px; }
#tree .hint { margin: 0; font-size: 11px; }
#tree button.small { padding: 0 6px; line-height: 16px; margin-left: 6px; }
@media (max-width: 760px) { #tree { max-height: calc(45vh - 160px); } }

/* selection-driven panel */
.tabs button[hidden] { display: none; }
table.kv { border-collapse: collapse; margin: 0 0 8px; font-size: 13px; }
table.kv th { text-align: left; font-weight: 400; color: var(--muted); padding: 2px 14px 2px 0; }
table.kv td { padding: 2px 0; }
#tree .tick { margin: 0 2px 0 0; width: 13px; height: 13px; pointer-events: auto; }

/* the sections of a body's properties: always open, a bold title and a line between them */
.sec { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.sec:first-child { border-top: 0; padding-top: 0; }
.sec > h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.sec > .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 0 0 8px; }
.sec > .zone-body { padding: 0 0 8px; }

/* the right-click menu of the 3D view */
.ctxmenu { position: absolute; z-index: 5; min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 0; box-shadow: 0 4px 14px #0003; }
.ctxmenu[hidden] { display: none; }
.ctxmenu button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: 5px 14px; }
.ctxmenu button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.ctxmenu button:disabled { opacity: .45; }
.ctxmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
#tree .tn.hid .lbl { opacity: .45; text-decoration: line-through; }   /* a body hidden from the 3D view */

/* accounts */
.topbar .spacer { flex: 1; }
#usermenu { display: flex; gap: 4px; }
main.page.auth { max-width: 460px; padding-top: 48px; }
main.page.wide { max-width: 1100px; }
.auth .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.auth .fields input, #profile input, #password input { width: 100%; }
#profile.fields, #password.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
td.acts { white-space: nowrap; }
.row input, .row select { min-width: 150px; }
[hidden] { display: none !important; }

/* password rules */
ul.rules { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
ul.rules li.ok { color: var(--ok); }
.okmsg { color: var(--ok); }

/* importing a sketch */
dialog#sketchDlg { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 18px 20px; width: min(520px, 94vw); }
dialog#sketchDlg::backdrop { background: #0006; }
#sketchPreview { display: block; max-width: 100%; max-height: 260px; margin: 10px 0; border-radius: 6px; }
.progress { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin: 8px 0; }
#sketchFound { font-size: 13px; line-height: 2; }
#sketchFound .chip { display: inline-block; margin: 0 4px 2px 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); line-height: 1.7; }
.progress > i { display: block; width: 35%; height: 100%; background: var(--accent); border-radius: 3px; animation: wcp-slide 1.3s ease-in-out infinite; }
@keyframes wcp-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.modes { display: grid; gap: 6px; margin: 8px 0; }
.modes label.check { display: flex; align-items: center; gap: 8px; }
#sketchQuestions { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; }
.sketches { display: grid; gap: 8px; }
.sketch { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; }
.sketch img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

/* materials */
form.matform { grid-template-columns: 1fr 1fr; }
form.matform input:not([type=checkbox]):not([type=file]) { width: 100%; }
.texrow { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.texrow label { flex-direction: column; }
.texrow img#preview { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
img.tex { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }

/* the choice of a material */
.mfield { margin: 0 0 12px; }
.mfield > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.mpick { position: relative; }
.mbtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 8px; }
.mbtn .caret { margin-left: auto; color: var(--muted); }
.mtxt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mtxt small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw { flex: none; width: 34px; height: 26px; border-radius: 4px; border: 1px solid var(--line); background-size: cover; background-position: center; }
.sw.empty { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 4px, var(--line) 4px, var(--line) 5px); }
.mlist { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px #0003; padding: 6px; }
.mlist .msearch { width: 100%; margin-bottom: 4px; }
.mrows { max-height: 300px; overflow: auto; }
.mrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.mrow:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.mrow.on { background: color-mix(in srgb, var(--accent) 28%, var(--panel)); }
.mrow.none { color: var(--muted); }
.pad { padding: 8px; margin: 0; }

/* the floating window of the things to confirm */
.floatwin { position: absolute; top: 12px; right: 12px; width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 70px); overflow: auto; z-index: 4; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px #0003; }
.floatwin[hidden] { display: none; }
.floatwin .fwhead { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: move; position: sticky; top: 0; background: var(--panel); user-select: none; }
.floatwin h3 { font-size: 13px; margin: 10px 10px 4px; }
ul.issues { list-style: none; margin: 0 0 8px; padding: 0 10px; font-size: 13px; }
ul.issues li { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
ul.issues li button { flex: none; }
.warnbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; }   /* the same height as the other buttons */
.warnbtn .cnt { font-size: 12px; font-weight: 700; min-width: 8px; }
.warnbtn.none { opacity: .5; }

.row.same { align-items: stretch; }   /* the sketch button and the warning triangle: the same height */
.row button { white-space: nowrap; }

/* the button that turns the grain, beside the choice of a material */
.mpick { display: flex; gap: 6px; align-items: stretch; }
.mpick .mbox { position: relative; flex: 1; min-width: 0; }
.rotbtn { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; padding: 2px 6px; line-height: 1.1; }
.rotbtn .ico { font-size: 18px; }
.rotbtn small { font-size: 10px; color: var(--muted); min-height: 11px; }
.rotbtn.on { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); border-color: var(--accent); }
.rotbtn.on small { color: var(--ink); }

ul.grouplist { margin: 4px 0 10px; padding-left: 20px; }

/* a field whose value differs between the bodies of a group: marked, and empty */
.mixed select, .mixed input, button.mixed { background: color-mix(in srgb, #f2c200 28%, var(--panel)); border-color: #c9a100; }
.mixtag { font-size: 10px; font-weight: 600; color: #7a5f00; background: #f2c20055; border-radius: 3px; padding: 0 4px; margin-left: 4px; }
p.grouplist { word-break: break-word; }

/* the cards of the 3D view: one row, the tree under Explodare */
.stage .toolbar { align-items: flex-start; }
.stage .toolbar > #tree { flex: 0 0 100%; background: none; border: 0; padding: 0; border-radius: 0; pointer-events: none; }
.stage .toolbar .dd { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.ddtitle { font-weight: 600; }
.ddbtn { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; }   /* icons only: the card is as wide as its icon and the arrow, whatever is chosen */
.ddbtn .caret { color: var(--muted); }
.dd.multi .ddbtn { min-width: 78px; }
.ddbtn .ddic { display: inline-flex; }
.ddbtn .ddic.off { opacity: .28; }
.dditem kbd { margin-left: auto; font: 11px/1 system-ui, sans-serif; color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; background: var(--bg); }
.dditem span { margin-right: 14px; }
.ddbtn .ddicons { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.ddlist { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; min-width: 160px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px #0003; padding: 4px; }
.ddlist[hidden] { display: none; }
.dditem { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.dditem:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.dditem.on { background: color-mix(in srgb, var(--accent) 28%, var(--panel)); }
.dditem input { margin: 0; }
svg.ic { width: 18px; height: 18px; flex: none; }

/* all the cards of the toolbar the same height */
.stage .toolbar > .tcard { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.stage .toolbar > .tcard .ddbtn { height: 26px; }

/* the user menu of the top bar */
#usermenu { align-items: center; }
.umenu { position: relative; }
.ubtn { border: 0; background: none; padding: 6px 12px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.ubtn:hover, .ubtn.active { background: var(--bg); color: var(--ink); }
.ubtn .caret { font-size: 11px; }
.ulist { position: absolute; right: 0; top: calc(100% + 4px); min-width: 170px; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px #0003; padding: 4px; }
.ulist[hidden] { display: none; }
.ulist a { display: block; padding: 6px 10px; border-radius: 4px; }
.topbar a.logout { display: inline-flex; align-items: center; gap: 6px; }

h2.listhead { font-size: 15px; font-weight: 700; margin: 4px 0 8px; }
h2.listhead:not(:first-child) { margin-top: 16px; }

table.cut th.cant, table.cut td.cant { min-width: 76px; padding-left: 12px; white-space: nowrap; }   /* the Cant column: wider, one edge per line */

.tabbody table.cut { table-layout: auto; }
.tabbody table.cut th, .tabbody table.cut td { padding: 3px 4px; }   /* the list fits the panel even with the Fibra column */

/* logo and icons of the top bar */
.topbar .brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar .logo { flex: none; }
.topbar a svg.ic { vertical-align: -3px; margin-right: 4px; }

.ulist a { display: flex; align-items: center; gap: 8px; }
.ulist a svg.ic { margin: 0; flex: none; }

/* position and size on rows of three; the icon of a section title */
.sec > .fields.three { grid-template-columns: repeat(3, 1fr); }
.sec > h3 svg.ic { margin-right: 6px; vertical-align: -3px; }
.sec > .zone-body > .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 6px 0 4px; }   /* the fields of a zone: two to a row */

/* the settings pages: sections, two numbers on a line */
fieldset.opt .optgroup { margin: 0 0 12px; }
fieldset.opt .optgroup h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
fieldset.opt .pair { display: flex; gap: 24px; flex-wrap: wrap; }
fieldset.opt label.num { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
fieldset.opt label.num > span:first-child { min-width: 12em; }
fieldset.opt .pair label.num > span:first-child { min-width: 11em; }

/* the title of a section: one font and size in every tab */
.sech { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.sech:not(:first-child) { margin-top: 16px; }
.sech svg.ic { margin-right: 6px; vertical-align: -3px; }
.sech .hint { font-weight: 400; }

fieldset.opt legend svg.ic { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }

/* the right-click menu: an icon in front, the shortcut on the right */
.ctxmenu { min-width: 300px; }
.ctxmenu button { display: flex; align-items: center; gap: 10px; }
.ctxmenu button svg.ic { width: 17px; height: 17px; flex: none; }
.ctxmenu button .mlabel { flex: 1; }
.ctxmenu kbd { font: 11px/1 system-ui, sans-serif; color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; background: var(--bg); }

/* undo / redo: top right of the 3D view */
.stage .undoredo { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.stage .undoredo button { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.stage .undoredo button svg.ic { width: 20px; height: 20px; }
.stage .toolbar { right: 104px; }   /* the cards leave the corner to undo / redo */
.floatwin { top: 56px; }

/* the tree: as wide as its rows, down to the bottom of the 3D view; the scrollbar right of the rows */
.stage .toolbar > .tbreak { flex: 0 0 100%; height: 0; padding: 0; border: 0; background: none; pointer-events: none; }
.stage .toolbar > #tree { flex: 0 0 auto; width: max-content; max-width: 100%; margin-top: -12px; overflow-y: auto; overflow-x: hidden; }
.stage .toolbar > #tree.scrolls { pointer-events: auto; padding-right: 4px; }

/* the scrollbar of the tree: thin and half see-through, so it does not cover the 3D view */
.stage .toolbar > #tree { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; }
.stage .toolbar > #tree::-webkit-scrollbar { width: 8px; }
.stage .toolbar > #tree::-webkit-scrollbar-track { background: transparent; }
.stage .toolbar > #tree::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 50%, transparent); border-radius: 4px; }
.stage .toolbar > #tree::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 80%, transparent); }

/* the canvas of the 3D view fills the stage without taking part in its layout (its size can never feed back into the stage's: no scrollbars, no resize loop) */
.stage { isolation: isolate; overflow: hidden; }
.stage > canvas.viewer-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }

/* the strip between the left column and the 3D view: drag it to change the width of the column */
.sizer { flex: none; width: 6px; margin-left: -3px; margin-right: -3px; position: relative; z-index: 4; cursor: col-resize; background: transparent; touch-action: none; }
.sizer:hover, .sizer.drag { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.side.min + .sizer { display: none; }
@media (max-width: 760px) { .sizer { display: none; } }

/* the result of importing a list of decors */
.import { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.import.err { border-color: #c92a2a; color: #c92a2a; }
.import ul { margin: 4px 0 0 18px; padding: 0; max-height: 200px; overflow: auto; font-size: 13px; }

/* the notes of a project: several lines, a vertical scrollbar when they do not fit */
textarea.infobox { width: 100%; box-sizing: border-box; min-height: 5.5em; max-height: 60vh; resize: vertical; overflow-y: auto; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); line-height: 1.4; }

/* the fields of the project (name, notes): the same spacing as the fields of Constructie */
.fields.projfields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 0 0 8px; }

/* the sign-in page: the checkbox sits close to the password, the links keep their distance from the button */
.auth #match:empty { display: none; }
.auth #forgot, .auth #extra, .auth #switch { margin: 0; }
.auth #forgot { margin-top: 18px; }
.auth #extra { margin-top: 14px; }
.auth #switch { margin-top: 12px; }

/* the field of the registration form that only a bot fills in: out of sight, out of the tab order */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* the profile fields join the grid of the form they are in */
#pfHost, .pf { display: contents; }
.fields select { width: 100%; color: var(--ink); }

/* the details of an account in the admin list: boxes side by side under its row */
tr.detrow > td { background: var(--bg); padding: 10px 14px; }
.detgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.detbox h4 { margin: 0 0 4px; font-size: 13px; }
.detbox table.kv { margin: 0; }

/* the admin list: wider, with icon buttons */
main.page.xwide { max-width: 1400px; }
button.iconbtn { width: 30px; height: 30px; padding: 0; margin-right: 2px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
button.iconbtn.danger:hover { color: #c92a2a; border-color: #c92a2a; }
td.acts { text-align: right; }

/* the imports left of the account: a pill at the right end of the Wizard AI row */
.creditpill { margin-left: auto; align-self: center; display: inline-flex; align-items: center; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-weight: 600; font-size: 13px; color: var(--ink); cursor: default; white-space: nowrap; }
.creditpill.none { color: #c92a2a; border-color: #c92a2a; }

/* a choice with its wrench (the window with the numbers of the machining) */
.optrow { display: flex; gap: 6px; align-items: flex-end; }
.optrow > label { flex: 1; min-width: 0; }
.optrow select { width: 100%; }
.optsel { margin: 0 0 12px; }
.optsel > label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.selrow { display: flex; gap: 6px; align-items: center; }
.selrow select { flex: 1; max-width: 460px; }
button.iconbtn.wrench { flex: none; }
dialog.cncdlg { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 14px 18px; width: min(620px, 94vw); }
dialog.cncdlg::backdrop { background: #0006; }
dialog.cncdlg h2 { margin: 0 0 4px; font-size: 16px; }
dialog.cncdlg p.hint { margin: 0 0 6px; }
dialog.cncdlg fieldset.opt { margin: 8px 0; padding: 6px 12px 10px; }
dialog.cncdlg .row { margin: 10px 0 0; }
.cncgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
dialog.cncdlg .cncgrid label { display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; font-size: 12px; color: var(--muted); margin: 0; padding: 0; }   /* flex-end: the fields of a row stay level when a title wraps */
.cncgrid3 { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 6px 14px; margin-top: 2px; }   /* a pack: name, code, maker on one line */
.packname { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--ink); }
dialog.cncdlg .cncgrid3 label { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--muted); margin: 0; padding: 0; }
.cncgrid3 .fld { display: flex; }
.cncgrid3 input { flex: 1; min-width: 0; box-sizing: border-box; color: var(--ink); padding: 4px 8px; }
.cncgrid .fld { display: flex; align-items: center; gap: 8px; }
.cncgrid input { flex: 1; min-width: 0; box-sizing: border-box; color: var(--ink); padding: 4px 8px; }
.cncgrid .hint { flex: none; white-space: nowrap; font-size: 11px; }

/* a number in the settings: the same as a choice, the title above and the field below; two to a line where the layout says so */
.optsel input[type=number] { width: 9em; }
fieldset.opt .pair { gap: 0 24px; }
fieldset.opt .pair > .optsel { flex: 1 1 12em; }

/* two columns: the fields of a row line up (the title may wrap in one of them: the extra lines go above, the fields stay level) */
fieldset.opt .pair { align-items: flex-end; }
.fields label:not(.check) { justify-content: flex-end; }

.adjgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; margin: 4px 0 6px; }
.adjgrid label { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--muted); margin: 0; }
.adjgrid input { box-sizing: border-box; width: 100%; color: var(--ink); padding: 4px 8px; }

/* the confirmation (common.js confirmBox): a window in the middle of the page */
dialog.confirmdlg { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 18px 22px; width: min(440px, 92vw); box-shadow: 0 10px 40px #0005; }
dialog.confirmdlg::backdrop { background: #0006; }
dialog.confirmdlg p { margin: 0 0 16px; font-size: 14px; line-height: 1.45; }
dialog.confirmdlg .row { display: flex; gap: 8px; justify-content: flex-end; margin: 0; }
dialog.confirmdlg button.danger { background: #c0392b; border-color: #c0392b; color: #fff; }
/* the lists of the project (cut list, hardware): a window with two tabs, scrolling in the middle */
dialog.listsdlg { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 14px 18px; width: min(980px, 96vw); max-height: 92vh; }
dialog.listsdlg[open] { display: flex; flex-direction: column; }
dialog.listsdlg::backdrop { background: #0006; }
dialog.listsdlg .fwhead { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel); user-select: none; margin: -14px -18px 8px; border-radius: 9px 9px 0 0; }
dialog.listsdlg .listsbody { overflow: auto; flex: 1; min-height: 120px; max-height: 66vh; margin: 4px 0; }
dialog.listsdlg .row { margin: 10px 0 0; align-items: center; }
/* the lists of fitting types (admins): a window with a tab for each family and a table of the types */
dialog.fitdlg { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 14px 18px; width: min(1100px, 96vw); max-height: 92vh; }
dialog.fitdlg::backdrop { background: #0006; }
dialog.fitdlg h2 { margin: 0 0 4px; font-size: 16px; }
.fittabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.fittabs button.active { background: var(--accent, #2d7ff9); color: #fff; border-color: transparent; }
.fittabs button.active .hint { color: #fffc; }
.fitscroll { overflow: auto; max-height: 52vh; border: 1px solid var(--line); border-radius: 6px; }
table.fit { border-collapse: collapse; width: 100%; font-size: 12px; }
table.fit th { position: sticky; top: 0; background: var(--panel); text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); font-weight: 600; white-space: normal; vertical-align: bottom; }
table.fit td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
table.fit input { width: 100%; box-sizing: border-box; padding: 3px 6px; color: var(--ink); }
table.fit input.name { min-width: 150px; } table.fit input.code { min-width: 100px; } table.fit input.maker { min-width: 90px; } table.fit input.num { min-width: 64px; }
dialog.fitdlg .row { margin: 10px 0 0; align-items: center; }
/* a submenu of the right-click menu: opens to the right of its item */
.ctxmenu .ctxitem.sub { position: relative; }
.ctxmenu .ctxitem.sub > button { width: 100%; }
.ctxmenu .ctxsub { display: none; position: absolute; left: 100%; top: -4px; min-width: 150px; }
.ctxmenu .ctxitem.sub:hover > .ctxsub, .ctxmenu .ctxitem.sub.open > .ctxsub { display: block; }