/* SPDX-License-Identifier: Apache-2.0 */
/* CadCraft drafting UI — toolbar | layers · drawing · properties | command line | status bar.
 * Tokens only (paper/model aware); hierarchy by line weight; no shadows. */

.cc {
  --cc-tabs-h: 1.9rem;
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr) 17.5rem;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "tools tools tools"
    "left stage right"
    "cmd cmd cmd"
    "status status status";
  height: 100%;
  min-height: 0;
}

/* ---- Toolbar ---- */
.cc-tools {
  grid-area: tools;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--sheet-2);
  border-bottom: var(--pen-2) solid var(--ink);
  scrollbar-width: thin;
}
/* Toolbar rows (CP.1, GJoe2 getcadcraft/cadcraft#2; Settings › CadCraft › Toolbar rows). Wrap = the bars as they were.
   1 = one line that scrolls sideways; 2 = the groups fill two lines (column by column) and scroll sideways when they do not fit. */
.cc[data-toolbar-rows="1"] :is(.cc-tools, .cc-in-rbody, .cc-in-quickbar) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.cc[data-toolbar-rows="1"] :is(.cc-tools, .cc-in-rbody, .cc-in-quickbar) > * { flex-shrink: 0; }
.cc[data-toolbar-rows="2"] :is(.cc-tools, .cc-in-rbody, .cc-in-quickbar) {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content;
  align-items: start; overflow-x: auto; scrollbar-width: thin;
}
.cc[data-toolbar-rows="2"] :is(.cc-tools, .cc-in-rbody, .cc-in-quickbar)[data-rows-wrap] { display: flex; flex-wrap: wrap; }
.cc-tool-group { display: flex; flex-direction: column; padding: .25rem .35rem .3rem; border-right: var(--pen-1) solid var(--line); flex: 0 0 auto; }
.cc-tool-group:last-of-type { border-right: 0; }
.cc-tool-label { font-size: .75rem; font-weight: 600; color: var(--ink-2); padding: 0 .2rem .15rem; }
.cc-tool-row { display: flex; gap: .1rem; }
.cc-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 2.6rem;
  padding: .25rem .2rem .2rem;
  font: inherit;
  font-size: .71875rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: var(--pen-1) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.cc-tool .bi { font-size: 1.15rem; line-height: 1; color: var(--layer); }
.cc-tool:hover { border-color: var(--line); background: var(--sheet); }
.cc-tool:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
.cc-tool[aria-pressed="true"] { border-color: var(--ink); background: var(--sheet); }
.cc-tool:disabled { opacity: .45; cursor: default; }
/* Edit › More: a toolbar menu (details/summary; cadcraft.js closes it on a click elsewhere and on Esc) */
.cc-menu { position: relative; }
.cc-menu > summary { list-style: none; }
.cc-menu > summary::-webkit-details-marker { display: none; }
.cc-menu[open] > summary { border-color: var(--ink); background: var(--sheet); }
.cc-menu-list {
  position: absolute; z-index: 30; top: calc(100% + .25rem); right: 0; min-width: 15rem;
  display: flex; flex-direction: column; padding: .25rem 0;
  background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius);
}
.cc-menu-list button { display: flex; justify-content: space-between; gap: 1.25rem; font: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--ink); background: none; border: 0; padding: .35rem .8rem; cursor: pointer; }
.cc-menu-list button:hover, .cc-menu-list button:focus-visible { background: var(--sheet); text-decoration: underline; outline: none; }
.cc-menu-list button:disabled { opacity: .45; cursor: default; text-decoration: none; background: none; }
.cc-menu-list button kbd { font: inherit; font-size: .75rem; color: var(--ink-2); background: none; border: 0; padding: 0; }
.cc-menu-list hr { margin: .25rem 0; border: 0; border-top: var(--pen-1) solid var(--line); opacity: 1; }
/* Settings › CadCraft: two-choice rows */
.shell-seg.cc-set-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The staff tab (staff-panel.inc) sits bottom-left over the page; lift it clear of the command line and the sheet tabs
   (cadcraft.js fitBars measures where they end). */
body.app-shell .sp-tab { bottom: var(--cc-sp-bottom, 11.5rem); }

/* Short windows (0.5 VP.5; cadcraft.js fitBars): first the toolbar drops the words under its icons (unless Settings
   says labels only) and its group names, and the history shows two lines; then the toolbar is one row that scrolls
   sideways, its menus fixed so the scrolling row doesn't clip them (as in the phone layout). */
.cc.cc-fit-compact .cc-tool-label { display: none; }
body:not([data-shell-tb="labels"]) .cc.cc-fit-compact .cc-tool > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cc.cc-fit-compact .cc-tool { min-width: 2.1rem; padding: .3rem .25rem; }
.cc.cc-fit-compact .cc-tool-group { padding-block: .2rem; }
.cc.cc-fit-compact .cc-history { height: 2.9rem; }
.cc.cc-fit-row .cc-tools { flex-wrap: nowrap; overflow-x: auto; }
.cc.cc-fit-row .cc-menu-list { position: fixed; top: auto; left: 1rem; right: 1rem; min-width: 0; }
.cc.cc-fit-tight .cc-history { height: 1.5rem; }   /* the last line only; F2 / the history keeps the rest */
.cc.cc-fit-tight .cc-keyrow { padding-block: .15rem; gap: .2rem; }
.cc.cc-fit-tight .cc-keyrow > button { padding-block: .15rem; min-height: 0; }

/* ---- Panels ---- */
.cc-panel { overflow-y: auto; min-height: 0; background: var(--sheet-2); }
.cc-left { grid-area: left; border-right: var(--pen-2) solid var(--ink); }
.cc-right { grid-area: right; border-left: var(--pen-2) solid var(--ink); }
.cc-sec { padding: .9rem 1rem; border-bottom: var(--pen-1) solid var(--line); }
.cc-sec:last-child { border-bottom: 0; }
.cc-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.cc-h { font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; margin: 0 0 .5rem; }
.cc-sec-head .cc-h { margin: 0; }
.cc-note, .cc-muted { color: var(--ink-2); font-size: .875rem; margin: .5rem 0 0; }
.cc-linkbtn { font: inherit; font-size: .875rem; font-weight: 600; color: var(--action); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cc-linkbtn:hover { text-decoration-thickness: 2px; }
.cc-sec-tools { display: inline-flex; align-items: baseline; gap: .75rem; }
.cc-sec-tools .cc-menu > summary { cursor: pointer; }

.cc-input, .cc-select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--sheet);
  border: var(--pen-1) solid var(--line);
  border-radius: var(--radius);
  padding: .2rem .4rem;
  font-variant-numeric: tabular-nums;
}
.cc-input:focus, .cc-select:focus { outline: var(--pen-2) solid var(--action); outline-offset: 0; border-color: var(--action); }

/* layers */
.cc-layer-form { display: flex; gap: .4rem; margin-bottom: .5rem; }
.cc-layers { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.cc-layers li { display: grid; grid-template-columns: 1.1rem 1.1rem minmax(0, 1fr) auto; align-items: center; gap: .35rem; padding: .2rem 0; border-top: var(--pen-1) solid var(--grid); }
.cc-layers li:first-child { border-top: 0; }
.cc-layers li.is-current .cc-layer-name { font-weight: 700; }
.cc-layer-cur { width: .7rem; height: .7rem; border: var(--pen-2) solid var(--ink); border-radius: 50%; background: transparent; padding: 0; cursor: pointer; justify-self: center; }
.is-current .cc-layer-cur { background: var(--ink); }
.cc-swatch { position: relative; width: 1rem; height: 1rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); padding: 0; cursor: pointer; overflow: hidden; }
.cc-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.cc-layer-name { background: none; border: 0; padding: .1rem 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-layer-name:hover { text-decoration: underline; }
.cc-layer-flags { display: flex; gap: .1rem; }
.cc-flag { background: none; border: var(--pen-1) solid transparent; border-radius: var(--radius); padding: 0 .2rem; color: var(--ink-2); cursor: pointer; font-size: .9rem; line-height: 1.4; }
.cc-flag:hover { border-color: var(--line); color: var(--ink); }
.cc-flag[aria-pressed="true"] { color: var(--layer-orange); }
.cc-layers li.is-off .cc-layer-name { color: var(--ink-2); text-decoration: line-through; }

.cc-dl { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: .25rem .75rem; margin: 0; font-size: .875rem; }
.cc-dl dt { color: var(--ink-2); font-weight: 500; }
.cc-dl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cc-report { margin: .6rem 0 0; padding: .5rem .6rem; font-size: .875rem; border-left: var(--pen-3) solid var(--layer-ochre); background: var(--sheet); }
.cc-report p { margin: 0; }
.cc-report ul { margin: .25rem 0 0; padding-left: 1.1rem; }

/* properties */
.cc-props { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: .35rem .6rem; align-items: center; font-size: .875rem; margin: 0; }
.cc-props label, .cc-props .k { color: var(--ink-2); font-weight: 500; }
.cc-props .v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-props .span { grid-column: 1 / -1; }
.cc-props textarea.cc-input { resize: vertical; min-height: 3.5rem; }
.cc-props-sub { grid-column: 1 / -1; margin: .4rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.cc-props + .cc-props { margin-top: .9rem; padding-top: .75rem; border-top: var(--pen-1) solid var(--grid); }

/* ---- The Properties panel (props.js + proppanel.js; session cad-props): header row, foldable sections, divider,
   point pick buttons, the vertex browser, refused entries, auto-hide ---- */
[data-props] { position: relative; }
.cc-props.cc-pgrid { grid-template-columns: var(--cc-pk, 44%) minmax(0, 1fr); }
.cc-props-head { display: flex; gap: .25rem; align-items: center; margin: 0 0 .5rem; }
.cc-pgroup { flex: 1 1 auto; min-width: 0; width: auto; }
.cc-pgroup-fill { flex: 1 1 auto; }
.cc-pbtn, .cc-ppick {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0;
  font: inherit; color: var(--ink); background: transparent; border: var(--pen-1) solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.cc-ppick { width: 1.5rem; height: 1.5rem; font-size: .8125rem; }
.cc-pbtn:hover, .cc-ppick:hover { background: var(--sheet); border-color: var(--ink-2); }
.cc-pbtn[aria-pressed="true"] { border-color: var(--ink); background: var(--sheet); }
.cc-pbtn:focus-visible, .cc-ppick:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 1px; }
.cc-psec { border-top: var(--pen-1) solid var(--grid); }
.cc-psec-h { padding: .4rem 0; font-size: .8125rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.cc-psec-h:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 1px; }
.cc-psec > .cc-props { padding: 0 0 .65rem; }
.cc-ppt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cc-pbool { display: flex; align-items: center; min-height: 1.85rem; }
.cc-pvtx { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.cc-pvtx .cc-input { width: 2.6rem; min-width: 0; flex: 0 1 auto; padding-inline: .3rem; }
.cc-pvtx .cc-muted { margin: 0; white-space: nowrap; font-size: .8125rem; }
.cc-pvtx .cc-pbtn { width: 1.45rem; }
.cc-props.cc-pgrid > * { min-width: 0; }
.cc-input.is-invalid { border-color: var(--layer-red); outline-color: var(--layer-red); }
.cc-pnote { margin: .5rem 0 0; font-size: .8125rem; color: var(--layer-red); }
.cc-pnote:empty { display: none; }
.cc-pdiv { position: absolute; top: 0; bottom: 0; width: .5rem; margin-left: -.25rem; cursor: col-resize; z-index: 1; touch-action: none; }
.cc-pdiv::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: var(--pen-1) solid transparent; }
.cc-pdiv:hover::after, .cc-pdiv:focus-visible::after { border-left-color: var(--action); }
.cc-pdiv:focus-visible { outline: none; }
/* auto-hide: a strip at the edge; pointing at it (or focus, Ctrl+1, PROPERTIES) opens the panel over the drawing */
.cc-ah-tab { display: none; }
.cc.cc-ah { position: relative; }
.cc.cc-ah:not(.shell-panels-managed) { grid-template-columns: var(--cc-lw, 15.5rem) minmax(0, 1fr) 2rem !important; }
.cc-right.cc-ah-panel { overflow: hidden; }
.cc-right.cc-ah-panel > :not(.cc-ah-tab):not(.shell-grip) { display: none; }
.cc-right.cc-ah-panel > .cc-ah-tab {
  display: flex; align-items: center; gap: .4rem; width: 100%; padding: .75rem 0; writing-mode: vertical-rl;
  font: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink); background: transparent; border: 0; cursor: pointer;
}
.cc-right.cc-ah-panel > .cc-ah-tab:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: -2px; }
.cc-right.cc-ah-panel.cc-ah-open { position: absolute; grid-area: right; justify-self: end; inset: 0 0 0 auto; width: 17.5rem; z-index: 25; overflow-y: auto; }
.cc-right.cc-ah-panel.cc-ah-open > :not(.cc-ah-tab):not(.shell-grip) { display: revert; }
.cc-right.cc-ah-panel.cc-ah-open > .cc-ah-tab { display: none; }
/* Quick Properties (QP): a small panel by the cursor; choosing which properties show (the gear) */
.cc-qp {
  position: absolute; z-index: 22; width: 17rem; max-height: min(24rem, calc(100% - 1rem)); overflow-y: auto; padding: .5rem .6rem .6rem;
  background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius);
}
.cc-qp[hidden] { display: none; }
.cc-qp-head { display: flex; align-items: center; gap: .25rem; margin: 0 0 .45rem; }
.cc-qp-name { flex: 1 1 auto; font-size: .8125rem; font-weight: 700; }
.cc-qp .cc-pgroup { flex: 1 1 auto; }
.cc-pcustom { width: min(34rem, calc(100vw - 2rem)); }
.cc-pcustom-list { max-height: min(26rem, 60vh); overflow-y: auto; margin-top: .5rem; border: var(--pen-1) solid var(--line); }
.cc-pcustom-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cc-pcustom-table th, .cc-pcustom-table td { padding: .25rem .5rem; border-bottom: var(--pen-1) solid var(--grid); text-align: left; font-weight: 500; }
.cc-pcustom-table thead th { position: sticky; top: 0; background: var(--sheet-2); font-weight: 700; }
.cc-pcustom-table td { text-align: center; width: 6.5rem; }
.cc-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.cc-danger { color: var(--layer-red, #b3261e); }
.cc-sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .25rem; }
.cc-row { display: flex; gap: .4rem; align-items: center; min-width: 0; }

/* blocks */
.cc-blocks { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.cc-blocks li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .5rem; padding: .2rem 0; border-top: var(--pen-1) solid var(--grid); }
.cc-blocks li:first-child { border-top: 0; }
.cc-block-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-blocks .cc-muted { margin: 0; font-variant-numeric: tabular-nums; }

/* ---- Stage ---- */
.cc-stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--sheet); }
.cc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-over { cursor: none; touch-action: none; }
.cc-over.is-panning { cursor: grabbing; }
.cc-hint {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  max-width: min(32rem, calc(100% - 2rem));
  padding: .75rem 1rem;
  font-size: .875rem;
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
  pointer-events: none;
}
.cc-hint-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.cc-hint-h { margin: 0; font-weight: 700; font-stretch: 112%; }
.cc-hint-close { pointer-events: auto; padding: .15rem .35rem; font-size: .8125rem; line-height: 1; color: var(--ink); background: transparent; border: var(--pen-1) solid transparent; border-radius: var(--radius); cursor: pointer; }
.cc-hint-close:hover { border-color: var(--line); background: var(--sheet); }
.cc-hint-close:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
.cc-dyn {   /* dynamic input (F12) by the crosshair */
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .3rem; padding: .2rem .35rem; font-size: .8125rem;
  color: var(--ink); background: var(--sheet-2); border: var(--pen-1) solid var(--ink-2); border-radius: var(--radius); pointer-events: none; white-space: nowrap;
}
.cc-dyn-p { color: var(--ink-2); }
.cc-dyn-f { min-width: 4.5rem; padding: 0 .3rem; border: var(--pen-1) solid var(--line); background: var(--sheet); font-variant-numeric: tabular-nums; }
.cc-dyn-f.is-active { border-color: var(--ink); }
.cc-dyn-f.is-locked { font-weight: 700; border-style: double; border-width: 3px; }
.cc-bedit {   /* the block editor's banner (BEDIT) */
  position: absolute; z-index: 3; top: .5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem;
  padding: .35rem .6rem; font-size: .875rem; font-weight: 600; color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius);
}
.cc-bedit > span { white-space: nowrap; }
.cc-bedit > .cc-select { width: auto; max-width: 12rem; padding: .15rem .35rem; }   /* the visibility state (DB.9) */
.cc-bedit > .cc-te-btn { white-space: nowrap; }
.cc-te { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: .25rem; }   /* MTEXT / TEXTEDIT in place */
.cc-te-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; padding: .3rem .45rem; font-size: .8125rem;
  background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); max-width: min(46rem, calc(100vw - 2rem));
}
.cc-te-bar .cc-input { width: 5.5rem; padding: .15rem .35rem; }
.cc-te-bar .cc-select { width: auto; padding: .15rem .35rem; }
.cc-te-btn { font: inherit; font-weight: 600; padding: .15rem .7rem; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); cursor: pointer; }
.cc-te-btn.is-primary { color: var(--sheet); background: var(--ink); }
.cc-te-btn:focus-visible { outline: var(--pen-2) solid var(--ink); outline-offset: 2px; }
.cc-te-ta {
  display: block; box-sizing: content-box; min-height: 1.2em; padding: 0; margin: 0; resize: none; overflow: hidden;
  color: var(--ink); background: var(--sheet); border: 0; outline: var(--pen-1) dashed var(--ink-2); white-space: pre-wrap; overflow-wrap: break-word;
}
.cc-te-ta:focus-visible { outline: var(--pen-2) solid var(--ink); }
.cc-hint ul { margin: 0; padding-left: 1.1rem; }
.cc-hint li + li { margin-top: .2rem; }
.cc kbd { font-family: inherit; font-size: .8125rem; font-weight: 700; padding: 0 .3rem; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.cc-drop, .cc-busy {
  position: absolute;
  inset: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: color-mix(in srgb, var(--sheet) 85%, transparent);
  border: var(--pen-3) dashed var(--action);
  border-radius: var(--radius);
}
.cc-busy { border-style: solid; border-color: var(--line); }
.cc-drop .bi { color: var(--action); }

/* model / layout tabs, along the bottom of the drawing */
.cc-tabs {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: var(--cc-tabs-h);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 .5rem;
  background: var(--sheet-2);
  border-top: var(--pen-1) solid var(--line);
}
.cc-tablist { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.cc-tab, .cc-tab-add {
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-bottom: var(--pen-3) solid transparent;
  padding: .3rem .75rem .2rem;
  white-space: nowrap;
  cursor: pointer;
}
.cc-tab { flex: 0 0 auto; max-width: min(18rem, 100%); overflow: hidden; text-overflow: ellipsis; }   /* a long sheet name: the tooltip has it all (VP.5); never wider than the tab list (1366 px at 175 % with both panels docked: final sweep) */
.cc-tab:hover, .cc-tab-add:hover { color: var(--ink); }
.cc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); background: var(--sheet); }
.cc-tab:focus-visible, .cc-tab-add:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: -2px; }
.cc-tab-add { padding-inline: .5rem; }
.cc-canvases { position: absolute; inset: 0 0 var(--cc-tabs-h) 0; }

/* plot dialog */
.cc-dialog {
  width: min(64rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  color: var(--ink);
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
}
.cc-dialog::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.cc-plot { display: flex; flex-direction: column; max-height: calc(100vh - 2.5rem); }
.cc-plot-head, .cc-plot-foot { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; }
.cc-plot-head { justify-content: space-between; border-bottom: var(--pen-1) solid var(--line); }
.cc-plot-head .cc-h { margin: 0; }
.cc-plot-foot { justify-content: flex-end; border-top: var(--pen-1) solid var(--line); flex-wrap: wrap; }
.cc-plot-foot .cc-note { margin: 0 auto 0 0; }
.cc-x { font: inherit; background: none; border: var(--pen-1) solid transparent; border-radius: var(--radius); color: var(--ink); cursor: pointer; padding: .2rem .4rem; }
.cc-x:hover { border-color: var(--line); }
.cc-plot-body { display: grid; grid-template-columns: 19rem minmax(0, 1fr); min-height: 0; overflow: auto; }
.cc-plot-opts { padding: .9rem 1rem; border-right: var(--pen-1) solid var(--line); display: grid; align-content: start; gap: .9rem; }
.cc-plot-opts .cc-note { margin: 0; }
.cc-plot-preview { position: relative; min-height: 22rem; background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); }
.cc-plot-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.cc-ask { width: min(30rem, calc(100vw - 2rem)); }
.cc-find { width: min(38rem, calc(100vw - 2rem)); }
.cc-find-opts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.cc-find-list { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow: auto; font-size: .875rem; }
.cc-find-list li { padding: .2rem 0; border-bottom: var(--pen-1) solid var(--line); }
.cc-find-list .k { font-weight: 600; }
.cc-find-to { color: var(--ink-2); }
.cc-ask-text { margin: 0; padding: 1rem; }

/* ---- Command line ---- */
.cc-cmd { grid-area: cmd; background: var(--sheet-2); border-top: var(--pen-2) solid var(--ink); }
.cc-history {
  list-style: none;
  margin: 0;
  padding: .3rem 1rem 0;
  height: 4.6rem;
  overflow-y: auto;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.cc-history li { line-height: 1.4; }
.cc-history li.is-cmd { color: var(--ink); font-weight: 600; }
.cc-cmdline { display: flex; align-items: center; gap: .5rem; padding: .25rem 1rem .4rem; border-top: var(--pen-1) solid var(--grid); }
.cc-prompt { flex: 0 1 auto; font-size: .875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.cc-cmd-input { flex: 1 1 8rem; min-width: 6rem; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-bottom: var(--pen-1) solid var(--line); padding: .1rem 0; }
.cc-cmd-input:focus { outline: none; border-bottom: var(--pen-2) solid var(--action); }
.cc-suggest { flex: 0 1 auto; font-size: .8125rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Status bar ---- */
.cc-status { grid-area: status; display: flex; align-items: center; gap: 1rem; padding: .2rem 1rem; font-size: .8125rem; background: var(--sheet-2); border-top: var(--pen-1) solid var(--line); }
.cc-coords { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 13rem; }
.cc-status-msg { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.cc-seltotals { display: flex; gap: .75rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 0.6 DF.4 */
.cc-seltotals[hidden] { display: none; }
html.cc-phone .cc-seltotals { display: none; }
.cc-toggles { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.cc-toggle { font: inherit; font-size: .8125rem; font-weight: 600; padding: .05rem .5rem; color: var(--ink-2); background: transparent; border: var(--pen-1) solid var(--line); border-radius: var(--radius); cursor: pointer; }
.cc-toggle[aria-pressed="true"] { color: var(--on-action); background: var(--action); border-color: var(--action); }
.cc-snapkinds { position: relative; }
.cc-snapkinds summary { list-style: none; cursor: pointer; padding: .05rem .35rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.cc-snapkinds summary::-webkit-details-marker { display: none; }
.cc-snapkinds fieldset { position: absolute; z-index: 20; right: 0; bottom: calc(100% + .35rem); min-width: 12rem; margin: 0; padding: .5rem .75rem; background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.cc-snapkinds legend { float: left; width: 100%; font-size: .8125rem; font-weight: 700; margin: 0 0 .3rem; padding: 0; }
.cc-snapkinds label { display: flex; align-items: center; gap: .45rem; padding: .12rem 0; font-size: .875rem; cursor: pointer; }
.cc-snapkinds input { accent-color: var(--action); }

@media (max-width: 1100px) {
  .cc { grid-template-columns: 13rem minmax(0, 1fr) 15rem; }
}
@media (max-width: 760px) {
  body.app-shell .sp-tab { bottom: .75rem; }
  .cc-plot-body { grid-template-columns: minmax(0, 1fr); }
  .cc-plot-opts { border-right: 0; border-bottom: var(--pen-1) solid var(--line); }
  .cc-plot-preview { min-height: 16rem; }
  .cc-tools { flex-wrap: nowrap; overflow-x: auto; }
  .cc-menu-list { position: fixed; top: auto; left: 1rem; right: 1rem; min-width: 0; }
  .shell-seg.cc-set-seg2 { grid-template-columns: minmax(0, 1fr); }
  .cc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 62vh auto auto auto auto;
    grid-template-areas: "tools" "stage" "cmd" "status" "right" "left";
    height: auto;
  }
  .cc-left, .cc-right { border: 0; border-top: var(--pen-2) solid var(--ink); }
  .cc-status { flex-wrap: wrap; gap: .5rem; padding-inline: 1rem; }
  .cc-coords { min-width: 0; }
  .cc-hint { font-size: .8125rem; }
}

/* ---- library panel (libpanel.js) and attribute rows ---- */
.cc-lib { width: min(72rem, calc(100vw - 2rem)); }
.cc-lib-frame { display: flex; flex-direction: column; max-height: calc(100vh - 2.5rem); min-height: min(36rem, calc(100vh - 2.5rem)); }
.cc-lib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem 1rem 0; border-bottom: var(--pen-1) solid var(--line); }
.cc-lib-bar .cc-tablist { display: flex; }
.cc-lib-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-left: auto; padding-bottom: .4rem; font-size: .875rem; }
.cc-lib-search { display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem 1rem; }
.cc-lib-search .cc-input { flex: 1 1 14rem; width: auto; }
.cc-lib-search .cc-select { flex: 0 1 14rem; width: auto; }
.cc-lib-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 1rem 1rem; }
.cc-lib-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.cc-lib-card { display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; padding: .6rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.cc-lib-card.is-withdrawn { border-color: var(--layer-red); }
.cc-lib-card .btn-plot { justify-self: start; }
.cc-lib-prev { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--sheet-2); border: var(--pen-1) solid var(--grid); overflow: hidden; }
.cc-lib-prev img, .cc-lib-prev canvas { max-width: 100%; max-height: 100%; }
.cc-lib-prev img { width: 100%; height: 100%; object-fit: contain; background: #fff; }   /* previews are 4:3 tiles; never cropped */
.cc-lib-prev .bi { font-size: 2rem; color: var(--ink-2); }
.cc-lib-meta p { margin: 0 0 .2rem; font-size: .875rem; overflow-wrap: anywhere; }
.cc-lib-name { font-weight: 600; }
.cc-lib-tags { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.cc-lib-badge { display: inline-block; padding: 0 .35rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); font-size: .75rem; font-weight: 600; }
.cc-lib-warn { color: var(--layer-red); font-weight: 600; }
.cc-lib-empty { padding: 1.5rem 0; }
.cc-lib-rows { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .875rem; }
.cc-lib-rows li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: baseline; padding: .4rem 0; border-top: var(--pen-1) solid var(--grid); }
.cc-lib-credits li { grid-template-columns: 4rem minmax(0, 1fr) auto; }
.cc-lib-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cc-lib-attrib, .cc-lib-feed { overflow-wrap: anywhere; }
.cc-lib-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.cc-att-ro { overflow-wrap: anywhere; }
.cc-att-credit { overflow-wrap: anywhere; }
.cc-choose { display: grid; gap: .5rem; }
.cc-choose .cc-note { margin: 0; }
.cc-choose-list { height: auto; min-height: 12rem; }
/* Save as: one ruled row per format */
.cc-formats { display: grid; gap: .6rem; }
.cc-format { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; padding: .65rem .75rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); cursor: pointer; }
.cc-format:has(input:checked) { border: var(--pen-2) solid var(--ink); padding: calc(.65rem - 1px) calc(.75rem - 1px); }
.cc-format input { margin-top: .2rem; accent-color: var(--ink); }
.cc-format-text { display: grid; gap: .15rem; min-width: 0; }
.cc-format-name { font-weight: 650; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.cc-format-file { font-weight: 400; color: var(--ink-2); font-size: .875rem; overflow-wrap: anywhere; }
.cc-format .cc-note, .cc-formats > .cc-note { margin: 0; }
.cc-format-ver-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .2rem 0 .1rem; font-size: .875rem; }
.cc-format-ver-row .select-cc { width: auto; min-width: 11rem; }
@media (max-width: 40rem) {
  .cc-lib-rows li { grid-template-columns: 3rem minmax(0, 1fr); }
  .cc-lib-links { margin-left: 0; }
}

/* ---- Parameters panel (params-panel.js) ---- */
.cc-params .cc-par-table { width: 100%; border-collapse: collapse; font-size: .8125rem; margin: .25rem 0 .5rem; table-layout: fixed; }
.cc-params .cc-par-table th { text-align: left; font-weight: 600; color: var(--ink-2); border-bottom: var(--pen-1) solid var(--line); padding: .2rem .25rem; }
.cc-params .cc-par-table th:nth-child(1) { width: 22%; }
.cc-params .cc-par-table th:nth-child(3) { width: 18%; }
.cc-params .cc-par-table th:nth-child(4) { width: 18%; }
.cc-params .cc-par-table th:nth-child(5) { width: 1.75rem; }
.cc-params .cc-par-table td { padding: .15rem .25rem; vertical-align: top; border-bottom: var(--pen-1) solid var(--line); }
.cc-params .cc-par-table .cc-input { width: 100%; min-width: 0; font-size: .8125rem; padding: .15rem .3rem; }
.cc-params .cc-par-val { font-variant-numeric: tabular-nums; }
.cc-params span.cc-par-val { display: inline-block; padding: .2rem .3rem; }
.cc-params .cc-par-kind { color: var(--ink-2); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: .35rem; }
.cc-params tr.is-selected td { background: var(--sheet-2); }
.cc-params tr.is-error .cc-par-expr { border-color: var(--layer-red); }
.cc-par-err { display: block; color: var(--layer-red); font-size: .75rem; }
.cc-params .cc-par-new { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: .25rem; align-items: center; }
.cc-params .cc-par-new .cc-input { min-width: 0; font-size: .8125rem; }
.cc-params .cc-par-msg:empty { display: none; }
.cc-params .cc-par-del { padding: .1rem .25rem; }

/* ---- the 3D tab (ws3d.js): the three.js view over the 2D canvases; the toolbar's 3D group replaces the 2D-only ones */
.cc-tools > [hidden] { display: none !important; }
.cc-canvases.is-3d > .cc-canvas { visibility: hidden; }
.cc-3d { position: absolute; inset: 0; background: var(--sheet); }
.cc-3d[hidden] { display: none; }
.cc-3d-gl, .cc-3d-over { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-3d-over { cursor: crosshair; touch-action: none; }
.cc-3d-over.is-orbit { cursor: grab; }
.cc-3d-bar { position: absolute; left: 5.5rem; right: .5rem; bottom: .35rem; display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; font-size: .75rem; color: var(--ink-2); }
.cc-3d-tip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-3d-style { flex: 0 0 auto; }
.cc-menu-list button[aria-checked="true"]::after { content: "✓"; }

/* split screen (panes.js): the dividers between panes; view.js draws the panes and the active one's frame */
.cc-dividers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cc-divider { position: absolute; pointer-events: auto; touch-action: none; }
.cc-divider[data-dir="v"] { cursor: col-resize; }
.cc-divider[data-dir="h"] { cursor: row-resize; }
.cc-divider:hover, .cc-divider:focus-visible { background: color-mix(in srgb, var(--action) 35%, transparent); outline: none; }

/* several drawings open (doctabs.js): the document tabs over the drawing, shown from the second drawing on */
.cc-doctabs {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--cc-tabs-h);
  display: flex; align-items: stretch; gap: .25rem; padding: 0 .5rem;
  background: var(--sheet-2); border-bottom: var(--pen-1) solid var(--line);
}
.cc-doctabs[hidden] { display: none; }
.cc-stage.has-doctabs .cc-canvases { top: var(--cc-tabs-h); }
.cc-doctab-list { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.cc-doctab-wrap { display: flex; align-items: stretch; border-top: var(--pen-3) solid transparent; }
.cc-doctab-wrap.is-on { border-top-color: var(--action); background: var(--sheet); }
.cc-doctab, .cc-doctab-x, .cc-doctab-tool {
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--ink-2); background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.cc-doctab { padding: .2rem .25rem .2rem .75rem; max-width: 16rem; display: flex; align-items: center; gap: .35rem; }
.cc-doctab-name { overflow: hidden; text-overflow: ellipsis; }
.cc-doctab-dirty { color: var(--layer-orange); font-size: .6rem; }
.cc-doctab-wrap.is-on .cc-doctab { color: var(--ink); }
.cc-doctab-x { padding: 0 .4rem; }
.cc-doctab-tool { padding: 0 .45rem; }
.cc-doctab:hover, .cc-doctab-x:hover, .cc-doctab-tool:hover { color: var(--ink); }
.cc-doctab:focus-visible, .cc-doctab-x:focus-visible, .cc-doctab-tool:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: -2px; }

/* touch (S.8; cadcraft.js adds .is-touch on a touch screen): bigger targets, and the key row under the command line */
.cc.is-touch .cc-tool { min-height: 3rem; }
.cc.is-touch .cc-tab, .cc.is-touch .cc-doctab, .cc.is-touch .cc-doctab-x, .cc.is-touch .cc-doctab-tool, .cc.is-touch .cc-tab-add { min-height: 2.5rem; padding-inline: .9rem; }
.cc.is-touch { --cc-tabs-h: 2.5rem; }
.cc.is-touch .cc-toggle { min-height: 2.5rem; min-width: 3rem; }
.cc-keyrow { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem 1rem .45rem; border-top: var(--pen-1) solid var(--grid); }
.cc-keyrow[hidden] { display: none; }
.cc-key {
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); background: var(--sheet); min-width: 2.75rem; min-height: 2.5rem;
  padding: .2rem .7rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); cursor: pointer; touch-action: manipulation;
}
.cc-key.is-char { font-family: var(--font-mono, ui-monospace, monospace); }
.cc-key.is-enter { margin-left: auto; min-width: 6rem; background: var(--action); color: var(--on-action); border-color: var(--action); }
.cc-key:active { background: var(--sheet-2); }
.cc-key.is-enter:active { filter: brightness(.9); }
.cc-key:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 1px; }

/* ---- APPLOAD, the aliases file, DELBLOCKS' list, a routine's DCL dialogs (appload.js, lisp/dcl-ui.js; session cad-lisp) ---- */
.cc-appload { width: min(46rem, calc(100vw - 2rem)); }
.cc-aliases { width: min(44rem, calc(100vw - 2rem)); }
.cc-db { width: min(26rem, calc(100vw - 2rem)); }
.cc-al-body { padding: .9rem 1rem; display: grid; gap: .6rem; overflow: auto; max-height: calc(100vh - 9rem); }
.cc-al-body > .cc-note { margin: 0; }
.cc-al-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cc-al-actions .cc-note { margin: 0; }
.cc-al-msg:empty { display: none; }
.cc-al-h { font-size: .9375rem; font-weight: 600; margin: .4rem 0 0; }
.cc-al-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-1) solid var(--line); }
.cc-al-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .3rem 0; border-bottom: var(--pen-1) solid var(--line); }
.cc-al-name { font-weight: 600; overflow-wrap: anywhere; }
.cc-al-meta { color: var(--ink-2); font-size: .875rem; margin-right: auto; overflow-wrap: anywhere; }
.cc-al-tag { color: var(--ink-2); font-size: .8125rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .05rem .4rem; }
.cc-al-empty { color: var(--ink-2); font-size: .875rem; }
.cc-al-refused summary { cursor: pointer; font-size: .875rem; }
.cc-appload.is-busy { cursor: progress; }
.cc-al-text { font-family: var(--font-mono, ui-monospace, monospace); font-size: .875rem; width: 100%; min-height: 16rem; resize: vertical; padding: .5rem; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.cc-al-errors { margin: 0; padding-left: 1.2rem; color: var(--layer-red); font-size: .875rem; }
.cc-al-errors:empty { display: none; }
.cc-db .cc-select { width: 100%; }
.cc-dcl { width: fit-content; min-width: min(22rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }   /* a routine's dialog is as wide as its tiles */
.cc-dcl-body { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .6rem; overflow: auto; max-height: calc(100vh - 7rem); }
.cc-dcl-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.cc-dcl-column { display: flex; flex-direction: column; gap: .5rem; }
.cc-dcl-body > .cc-dcl-row:last-child { justify-content: center; }
.cc-dcl-box { margin: 0; padding: .5rem .75rem .75rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); display: flex; gap: .5rem; }
.cc-dcl-box.is-row { flex-direction: row; flex-wrap: wrap; }
.cc-dcl-box.is-column { flex-direction: column; }
.cc-dcl-box legend { font-size: .875rem; padding: 0 .25rem; }
.cc-dcl-field { display: flex; flex-direction: column; gap: .2rem; font-size: .875rem; }
.cc-dcl-field.is-list .cc-select { min-width: 16rem; }
.cc-dcl-check { display: flex; align-items: center; gap: .4rem; font-size: .875rem; }
.cc-dcl-text { margin: 0; font-size: .875rem; }
.cc-dcl-err { margin: 0; min-height: 1.2em; color: var(--layer-red); font-size: .875rem; }
.cc-dcl-spacer { height: .4rem; }
.cc-dcl-image { border: var(--pen-1) solid var(--line); background: var(--sheet); border-radius: var(--radius); }

/* ---- Sheet Set panel (track Z; sheetset-panel.js) ---- */
.cc-ss-tree, .cc-ss-tree ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.cc-ss-tree ul { padding-left: .9rem; border-left: var(--pen-1) solid var(--grid); margin-left: .3rem; }
.cc-ss-tree [role=treeitem] > .cc-ss-label, .cc-ss-tree [role=treeitem] > .cc-ss-sub { display: block; }
.cc-ss-tree [role=treeitem] { padding: .15rem .25rem; border-radius: var(--radius); cursor: default; }
.cc-ss-tree [role=treeitem] > .cc-ss-sub { color: var(--ink-2); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ss-set > .cc-ss-label, .cc-ss-subset > .cc-ss-label { font-weight: 600; }
.cc-ss-sheet { cursor: grab; }
.cc-ss-tree .is-sel > .cc-ss-label { color: var(--action); }
.cc-ss-tree .is-sel { outline: var(--pen-1) solid var(--action); outline-offset: -1px; }
.cc-ss-tree [role=treeitem]:focus-visible { outline: var(--pen-2) solid var(--action); }
.cc-ss-tree .is-drop { background: var(--sheet-2); box-shadow: inset 0 2px 0 var(--action); }
.cc-ss.is-busy { opacity: .7; cursor: progress; }
.cc-ss-form { display: grid; gap: .6rem; }
.cc-ss-field { display: grid; gap: .2rem; font-size: .875rem; }
.cc-ss-field textarea { font-family: inherit; }
.cc-ss-picks { display: grid; gap: .25rem; max-height: 50vh; overflow: auto; margin: .5rem 0; font-size: .875rem; }
.cc-ss-pick { display: flex; gap: .4rem; align-items: baseline; }

/* ---- My tools (0.5 DR.9; mytools-ui.js) ---- */
.cc-mytool-icon { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.cc-mt-list { list-style: none; margin: .25rem 0 .5rem; padding: 0; border-top: var(--pen-1) solid var(--line); font-size: .875rem; }
.cc-mt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .3rem 0; border-bottom: var(--pen-1) solid var(--line); }
.cc-mt-name { margin-right: auto; overflow-wrap: anywhere; }
.cc-mt-empty { color: var(--ink-2); }
.cc-mt-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.cc-mt-dlg { width: min(34rem, calc(100vw - 2rem)); }
.cc-mt-field { display: grid; gap: .2rem; font-size: .875rem; }
.cc-mt-field .cc-input { width: 100%; }
.cc-mt-preview img { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; }

/* a dynamic block's visibility grip opens its states here (0.5 DB.5) */
.cc-menu-list.cc-dynvis { top: auto; right: auto; min-width: 10rem; max-height: 50vh; overflow-y: auto; z-index: 40; }

/* ---- Compare settings (0.5 WL.12; compare-ui.js) ---- */
.cc-cmp { width: min(52rem, calc(100vw - 2rem)); }
.cc-cmp-body { padding: .9rem 1rem; display: grid; gap: .6rem; max-height: calc(100vh - 7rem); overflow: auto; }
.cc-cmp-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .4rem .6rem; align-items: center; font-size: .875rem; }
.cc-cmp-only { font-size: .875rem; display: flex; align-items: center; gap: .3rem; }
.cc-cmp-body > .cc-note { margin: 0; }
.cc-cmp-scroll { overflow: auto; max-height: 55vh; border-top: var(--pen-1) solid var(--line); }
.cc-cmp-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.cc-cmp-table th, .cc-cmp-table td { text-align: left; padding: .25rem .4rem; border-bottom: var(--pen-1) solid var(--grid); }
.cc-cmp-table thead th { position: sticky; top: 0; background: var(--sheet-2); }
.cc-cmp-table tr.is-diff th, .cc-cmp-table tr.is-diff td { background: color-mix(in srgb, var(--layer-orange) 14%, transparent); }
.cc-cmp-acts { white-space: nowrap; width: 1%; }
@media (max-width: 760px) { .cc-cmp-pick { grid-template-columns: auto minmax(0, 1fr); } }

/* ---- Map layers (0.5 SG.3; maplayers.js builds the dialog — the same block in cadcraft.css and bimcraft.css) ---- */
.ml-dialog { width: min(44rem, 94vw); max-height: 90vh; padding: 0; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.ml-dialog::backdrop { background: rgb(0 0 0 / .35); }
.ml-form { display: flex; flex-direction: column; max-height: 90vh; }
.ml-head, .ml-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .9rem; border-bottom: var(--pen-1) solid var(--line); }
.ml-foot { border-bottom: 0; border-top: var(--pen-1) solid var(--line); justify-content: flex-end; }
.ml-h { margin: 0; font-size: var(--fs-md); }
.ml-h3 { margin: .9rem 0 .4rem; font-size: var(--fs-base); }
.ml-body { overflow: auto; padding: .2rem .9rem .9rem; font-size: var(--fs-sm); }
.ml-x { border: 0; background: none; color: inherit; padding: .2rem .35rem; cursor: pointer; }
.ml-x:disabled { opacity: .35; cursor: default; }
.ml-note { color: var(--ink-2); margin: .3rem 0; }
.ml-problem { color: var(--layer-red); margin: .3rem 0; }
.ml-props { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .6rem; align-items: center; margin: .4rem 0; }
.ml-place { grid-template-columns: repeat(2, max-content 1fr); }
.ml-input { width: 100%; min-width: 0; padding: .25rem .4rem; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); font: inherit; }
.ml-num { font-variant-numeric: tabular-nums; }
.ml-select { width: 100%; }
.ml-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.ml-rows { list-style: none; margin: 0; padding: 0; }
.ml-row { padding: .4rem 0; border-bottom: var(--pen-1) solid var(--line); }
.ml-row.is-off .ml-name { color: var(--ink-2); }
.ml-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.ml-net { padding: .6rem .7rem; margin-top: .7rem; background: var(--sheet-2); border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.ml-attrib { position: absolute; right: .5rem; bottom: .5rem; z-index: 3; max-width: 60%; padding: .1rem .4rem; font-size: var(--fs-sm); color: var(--ink-2); background: var(--sheet); border: var(--pen-1) solid var(--line); pointer-events: auto; }
.ml-attrib[hidden] { display: none; }

/* library panel, Standard tab (stdlib.js; 0.5 MQ.3/MQ.4) */
.cc-lib-std { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; padding: 0 1rem .6rem; }
.cc-lib-std > .cc-select { flex: 1 1 18rem; width: auto; }
.cc-lib-opt { display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; }
.cc-lib-opt[hidden] { display: none; }
.cc-lib-opt .cc-input { width: 7rem; }
.cc-lib-parts { overflow: auto; max-height: 50vh; }
.cc-lib-parts table { border-collapse: collapse; font-size: .8125rem; }
.cc-lib-parts th, .cc-lib-parts td { padding: .25rem .5rem; border-bottom: var(--pen-1) solid var(--line); text-align: left; }

/* ---- A phone (0.5 Track PH; the layout is the shell's assets/js/app-phone.js + app-shell.css § Phones). CadCraft's own:
   the command line stays whole above the bar (and above the on-screen keyboard: the shell sizes the page to what is
   visible), its history shows the last line (it scrolls for the rest), the touch key row is one line that
   scrolls sideways, the drawing tabs and the status line are one line each. ---- */

html.cc-phone .cc-cmdline { padding-block: .1rem; }
html.cc-phone .cc-keyrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .2rem .5rem; gap: .25rem; }
html.cc-phone .cc-keyrow > button { flex: 0 0 auto; min-height: 2.25rem !important; min-width: 2.5rem; padding-block: .1rem; font-size: .75rem; }
html.cc-phone .cc-status { flex-wrap: nowrap; gap: .35rem; padding-inline: .5rem; }
html.cc-phone .cc-status > * { flex: 0 0 auto; }
html.cc-phone .cc-status .cc-status-msg { flex: 0 1 auto; max-width: 60vw; }
/* a short phone upright (0.6): the key row sits at the start of the status row, which scrolls sideways */
.cc.cc-keys-in-status .cc-status { overflow-x: auto; scrollbar-width: none; padding-block: .05rem; }
.cc.cc-keys-in-status .cc-status > .cc-keyrow { display: flex; flex: 0 0 auto; flex-wrap: nowrap; padding: 0; border: 0; background: none; }
.cc.cc-keys-in-status .cc-status > .cc-keyrow[hidden] { display: none; }
.cc.cc-keys-in-status .cc-status .cc-status-msg { order: 9; }   /* a message goes after the toggles, still on the row */
html.cc-kbd .cc-keyrow { padding-block: .1rem; }
html.cc-phone .cc-history { height: 1.2rem; padding-block: 0; font-size: .75rem; }   /* the last line; scroll it for the rest */
html.cc-phone .cc-tabs button, html.cc-phone .cc-tab { min-height: 2.25rem; padding-block: .15rem; font-size: .75rem; }
html.cc-phone .cc-prompt { font-size: .8125rem; }
html.cc-phone .cc-cmd-input { font-size: .875rem; }
html.cc-phone .cc.is-touch, html.cc-phone .cc { --cc-tabs-h: 2.25rem; }

/* ---- Align and distribute panel (0.6 DF.2, align-ui.js): over the drawing's top right, the drawing stays live ---- */
.cc-alignpanel { position: absolute; top: .5rem; right: .5rem; z-index: 6; width: 17rem; max-width: calc(100% - 1rem); background: var(--sheet); color: var(--ink);
  border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .5rem .65rem .6rem; display: flex; flex-direction: column; gap: .4rem; }
.cc-alignpanel[hidden] { display: none; }
.cc-align-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cc-align-head .cc-h { font-size: .9375rem; margin: 0; }
.cc-align-close { background: none; border: 0; color: var(--ink-2); padding: .15rem .3rem; cursor: pointer; }
.cc-align-close:hover, .cc-align-close:focus-visible { color: var(--ink); }
.cc-align-field { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8125rem; }
.cc-align-field .cc-select { flex: 0 1 9.5rem; }
.cc-align-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.cc-align-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.cc-align-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .75rem; padding: .3rem .2rem; }
.cc-align-btn .bi { font-size: 1.05rem; }
.cc-alignpanel .cc-note { font-size: .75rem; margin: 0; }
html.cc-phone .cc-alignpanel { top: auto; bottom: .5rem; }

/* ---- attribute editor (EATTEDIT) and block attribute manager (BATTMAN), 0.6 DF.5 (attedit-ui.js) ---- */
.cc-attdlg { width: min(46rem, calc(100vw - 2rem)); }
.cc-att-body { display: flex; flex-direction: column; gap: .75rem; padding: .75rem 1rem; max-height: 70vh; overflow: auto; }
.cc-att-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cc-att-table th, .cc-att-table td { text-align: left; padding: .25rem .35rem; border-bottom: var(--pen-1) solid var(--grid); vertical-align: middle; }
.cc-att-table thead th { font-weight: 600; color: var(--ink-2); }
.cc-att-table tbody tr[data-att-row] { cursor: pointer; }
.cc-att-table tbody tr.is-on { background: var(--sheet-2); }
.cc-att-table .cc-input { width: 100%; min-width: 6rem; }
.cc-att-opts { border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; margin: 0; }
.cc-att-opts legend { font-weight: 700; font-size: .875rem; padding: 0 .25rem; }
.cc-battman-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cc-battman-top .cc-select { width: auto; min-width: 10rem; }
.cc-battman-modes { white-space: nowrap; font-size: .8125rem; }
.cc-battman-modes .cc-check { margin-right: .4rem; }
.cc-battman-btns { white-space: nowrap; }

/* ---- File › Open a sample (0.6 DF.9) ---- */
.cc-samples { display: flex; flex-direction: column; gap: .75rem; max-width: 34rem; }
.cc-sample { border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; }
.cc-sample .cc-h { font-size: .9375rem; margin: 0 0 .25rem; }
.cc-sample p { margin: 0 0 .5rem; font-size: .875rem; }
.cc-sample-btns { display: flex; gap: .4rem; }

/* ---- plot style tables (0.6 DC.14; plotstyle-ui.js) ---- */
.cc-psdlg { width: min(56rem, calc(100vw - 2rem)); }
.cc-ps-body { display: grid; gap: .5rem; padding: .75rem 1rem; max-height: 72vh; overflow: auto; }
.cc-ps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.cc-ps-bar .cc-select { width: auto; min-width: 12rem; flex: 1 1 12rem; }
.cc-ps-main { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: .75rem; align-items: start; }
.cc-ps-grid { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 2px; margin-bottom: .375rem; }
.cc-ps-cell { position: relative; padding: 0; border: var(--pen-1) solid var(--line); border-radius: var(--radius); background: var(--sheet); aspect-ratio: 1; min-width: 0; cursor: pointer; }
.cc-ps-sw { position: absolute; inset: 2px; border-radius: 1px; }
.cc-ps-cell.is-set::after { content: ''; position: absolute; top: 1px; right: 1px; width: .35rem; height: .35rem; background: var(--ink); border: 1px solid var(--sheet); border-radius: 50%; }
.cc-ps-cell.is-on { outline: var(--pen-3) solid var(--action); outline-offset: 0; z-index: 1; }
.cc-ps-cell:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
.cc-ps-mark { position: absolute; left: 1px; bottom: 0; font-size: .5rem; line-height: 1; color: var(--ink); text-shadow: 0 0 2px var(--sheet); }
.cc-ps-colorin { width: 2.5rem; height: 1.9rem; padding: 0; border: var(--pen-1) solid var(--line); background: var(--sheet); }
@media (max-width: 760px) {
  .cc-ps-main { grid-template-columns: minmax(0, 1fr); }
  .cc-ps-grid { grid-template-columns: repeat(15, minmax(0, 1fr)); }
}

/* History panel (0.7 D7.31; history-ui.js): not modal, at the right of the drawing; the compare's colours as in view.js COMPARE_COLORS */
.cc-hist { width: min(34rem, calc(100vw - 2rem)); position: fixed; inset: auto 1rem auto auto; top: 5.5rem; margin: 0; z-index: 60; }   /* above the floating panels (z-index up to 46) */
.cc-hist-body { padding: .75rem 1rem; display: grid; gap: .6rem; max-height: calc(100vh - 9rem); overflow: auto; }
.cc-hist-tabs { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .875rem; }
.cc-hist-against { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: center; font-size: .875rem; }
.cc-hist-list, .cc-hist-items { list-style: none; margin: 0; padding: 0; display: grid; }
.cc-hist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: var(--pen-1) solid var(--grid); }
.cc-hist-what { display: grid; gap: .1rem; font-size: .875rem; }
.cc-hist-meta { margin: 0; }
.cc-hist-acts { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.cc-hist-error { color: var(--layer-red); }
.cc-hist-h3 { font-size: .95rem; margin: .4rem 0 0; }
.cc-hist-result { display: grid; gap: .45rem; border-top: var(--pen-2) solid var(--line); padding-top: .5rem; }
.cc-hist-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8125rem; }
.cc-hist-legend li, .cc-hist-item { display: flex; align-items: center; gap: .4rem; }
.cc-hist-chip { width: .9rem; height: .5rem; flex: none; border-radius: 1px; background: var(--chip, currentColor); }
.cc-hist .is-added { --chip: #1a9850; }
.cc-hist .is-removed { --chip: #d73027; }
.cc-hist .is-changed { --chip: #e08a00; }
.cc-hist-legend .is-changed .cc-hist-chip { background: repeating-linear-gradient(90deg, #e08a00 0 4px, transparent 4px 7px); }
.cc-hist-items { max-height: 14rem; overflow: auto; border-top: var(--pen-1) solid var(--grid); }
.cc-hist-item { appearance: none; background: transparent; border: 0; border-bottom: var(--pen-1) solid var(--grid); padding: .25rem .1rem; width: 100%; text-align: left; font: inherit; font-size: .8125rem; color: inherit; cursor: pointer; }
.cc-hist-item:hover:not(:disabled) { background: var(--sheet-2); }
.cc-hist-item:disabled { opacity: .55; cursor: default; }
.cc-hist-kind { font-weight: 600; }
.cc-hist-show { font-size: .875rem; display: flex; gap: .3rem; align-items: center; }
@media (max-width: 760px) { .cc-hist { inset: auto; top: 3rem; left: .5rem; right: .5rem; width: auto; } .cc-hist-row { grid-template-columns: 1fr; } .cc-hist-acts { justify-content: flex-start; } }

/* Dimension style manager (0.7 D7.14, dimstyle-ui.js) */
.cc-dsdlg { width: min(40rem, calc(100vw - 2rem)); }
.cc-ds-body { display: grid; gap: .6rem; padding: .75rem 1rem; max-height: 72vh; overflow: auto; }
.cc-ds-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-1) solid var(--line); }
.cc-ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .35rem .5rem; border-bottom: var(--pen-1) solid var(--line); cursor: pointer; }
.cc-ds-row.is-sel { outline: var(--pen-2) solid var(--action); outline-offset: -2px; }
.cc-ds-name { font-weight: 600; }
.cc-ds-actions, .cc-ds-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cc-ds-sub[hidden] { display: none; }
.cc-ds-diff { margin: 0; padding-left: 1.1rem; flex-basis: 100%; }
.cc-dsmod { width: min(38rem, calc(100vw - 2rem)); }
.cc-ds-form { padding: .5rem 1rem .75rem; max-height: 70vh; overflow: auto; }
.cc-ds-form .cc-pgrid { padding-bottom: .5rem; }

/* ---- Toolbar dock (0.7 D7.02; Settings › CadCraft › Toolbar position, TOOLBARDOCK). Top is how it always was; the rules below only
   apply to the other sides, and only on a wide window (a phone keeps the shell's own top / bottom bar). The menu styles' bars live
   inside .cc-tools, so they move with it: the CadCraft toolbar suits the sides best, a ribbon is meant for top or bottom. ---- */
@media (min-width: 761px) {
  .cc[data-toolbar-dock="bottom"] {
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "left stage right" "tools tools tools" "cmd cmd cmd" "status status status";
  }
  .cc[data-toolbar-dock="bottom"] .cc-tools { border-bottom: 0; border-top: var(--pen-2) solid var(--ink); }
  .cc[data-toolbar-dock="left"] {
    grid-template-columns: auto 15.5rem minmax(0, 1fr) 17.5rem;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "tools left stage right" "cmd cmd cmd cmd" "status status status status";
  }
  .cc[data-toolbar-dock="right"] {
    grid-template-columns: 15.5rem minmax(0, 1fr) 17.5rem auto;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "left stage right tools" "cmd cmd cmd cmd" "status status status status";
  }
  .cc:is([data-toolbar-dock="left"], [data-toolbar-dock="right"])[data-toolbar-rows] .cc-tools {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-content: flex-start;
    overflow-x: hidden; overflow-y: auto; max-width: 13rem; min-height: 0;
    border-bottom: 0;
  }
  .cc[data-toolbar-dock="left"] .cc-tools { border-right: var(--pen-2) solid var(--ink); }
  .cc[data-toolbar-dock="right"] .cc-tools { border-left: var(--pen-2) solid var(--ink); }
  .cc:is([data-toolbar-dock="left"], [data-toolbar-dock="right"])[data-toolbar-rows] .cc-tools > .cc-tool-group { border-right: 0; border-bottom: var(--pen-1) solid var(--line); }
  .cc:is([data-toolbar-dock="left"], [data-toolbar-dock="right"]) .cc-tool-row { flex-wrap: wrap; }
  .cc:is([data-toolbar-dock="left"], [data-toolbar-dock="right"]) .cc-tools.cc-in-styled { max-width: 22rem; }
}

/* The first-drawing tour (0.7 D7.06, tour.js): a small box over the drawing, bottom right, out of the way of the command line. */
.cc-hint-tour { margin: .5rem 0 0; }
.cc-tour { position: absolute; right: .75rem; bottom: 4.5rem; z-index: 20; width: min(21rem, calc(100% - 1.5rem)); padding: .6rem .75rem .7rem; background: var(--sheet); color: var(--ink);
  border: var(--pen-2) solid var(--action); border-radius: var(--radius); }
.cc-tour.is-done { border-color: var(--layer-green, var(--action)); }
.cc-tour-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cc-tour-n { font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.cc-tour-h { margin: .15rem 0 .25rem; font-weight: 700; font-size: 1rem; }
.cc-tour-p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.45; }
.cc-tour-foot { display: flex; flex-wrap: wrap; gap: .4rem; }
.cc-tour-ok { color: var(--layer-green, var(--action)); }

/* ---- Laser panel (0.7 SU.772, laser-cad.js over lib/laser's laser-panel.css): over the drawing's top right, the drawing stays live ---- */
.cc-laserpanel { position: absolute; top: .5rem; right: .5rem; z-index: 6; width: min(42rem, calc(100% - 1rem)); max-height: calc(100% - 1rem); overflow: auto;
  background: var(--sheet); color: var(--ink); border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .5rem .65rem .6rem; }
.cc-laserpanel[hidden] { display: none; }
.cc-laserpanel .cc-align-head .cc-h { margin: 0; }
.cc-laser-body .cc-note { font-size: .8125rem; margin: .25rem 0; }
.cc-laser-block { margin: .6rem 0 0; padding-top: .5rem; border-top: var(--pen-1) solid var(--grid); }
.cc-laser-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cc-laser-head h3 { font-size: .875rem; font-weight: 700; margin: 0; }
.cc-laser-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cc-laser-table th, .cc-laser-table td { padding: .2rem .3rem; border-top: var(--pen-1) solid var(--grid); text-align: left; vertical-align: middle; }
.cc-laser-table .n { text-align: right; }
html.cc-phone .cc-laserpanel { top: auto; bottom: .5rem; max-height: 70%; }

/* ---- workspace layouts (0.7 WS.8; workspace-cadcraft.js on the shell's engine, assets/css/app-workspace.css): CadCraft's own parts inside
   the blocks. Scope: a page with a layout on, or a panels window holding the palettes. ---- */
.ws-stage > .cc-hint { top: calc(var(--ws-st, 0px) + var(--ws-vt, 0px) + 1rem); left: calc(var(--ws-sl, 0px) + 1rem); }
.ws-stage > .cc-doctabs { top: calc(var(--ws-st, 0px) + var(--ws-vt, 0px)); left: var(--ws-sl, 0px); right: var(--ws-sr, 0px); }
body.ws-on .ws-stage.has-doctabs > .cc-canvases.ws-fill { top: calc(var(--ws-st, 0px) + var(--ws-vt, 0px) + var(--cc-tabs-h)) !important; }
.tbx-info .cc-toggles, .ws-ribbon-box .cc-toggles { display: flex; flex-wrap: wrap; gap: .2rem; }
.tbx-info .cc-ws-layer { min-width: 7rem; max-width: 14rem; }
.tbx-quick [data-coords] { font-variant-numeric: tabular-nums; padding: 0 .5rem; }
.ws-statusbar .cc-status { display: flex; flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0 .5rem; gap: .75rem; }
.cc-ws-props > .cc-sec { border: 0; }
.cc-ws-browser { padding: .25rem .4rem; }
.cc-ws-pb { margin: 0 0 .35rem; }
.cc-ws-pb > summary { font-weight: 600; padding: .15rem 0; cursor: pointer; }
.cc-ws-pb ul { list-style: none; margin: .1rem 0 .25rem; padding: 0 0 0 .75rem; }
.cc-ws-pb li { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.cc-ws-pb .cc-ws-pb-go { flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; border-color: transparent; background: transparent; }
.cc-ws-pb .cc-ws-pb-go[aria-current="page"] { font-weight: 700; }
.cc-ws-pb .cc-muted { flex: 0 0 auto; white-space: nowrap; }
.cc-ws-pb-actions { display: flex; flex-wrap: wrap; gap: .2rem; margin: .1rem 0 .25rem .75rem; }
.cc-ws-pb-empty { margin: .1rem 0 .25rem .75rem; color: var(--ink-2); }
/* the info box keeps one height while commands start and end (the drawing under it must not move: a zoom stays where it was put); the
   selection note's one line is the engine's (app-workspace.css .tbx-sel) */
.tbx-info .tbx-ig-tool .tbx-ig-body { min-height: 2.75rem; align-content: flex-start; }

/* Tabs inside a dialog (the Library's sources: LibraryCraft, Files…, Standard, Other feeds) are a choice, not sheet tabs: a size a hand can
   hit (owner 2026-10-24, dialog audit: they were 22 px tall; tools/workspace-test/dialog-audit.mjs) */
dialog .cc-tablist .cc-tab { min-height: 2.25rem; padding: .45rem .9rem .35rem; font-size: .875rem; }