/* DetailCraft — toolbar | model · 3D view · properties | reports | status bar.
 * Tokens only (paper/model aware); hierarchy by line weight; no shadows. Mirrors the CadCraft app's look. */

.dc {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 19rem;
  grid-template-rows: auto minmax(0, 1fr) 13rem auto;
  grid-template-areas:
    "tools tools tools"
    "left stage right"
    "left reports right"
    "status status status";
  height: 100%;
  min-height: 0;
}

/* ---- Toolbar ---- */
.dc-tools { grid-area: tools; display: flex; flex-wrap: wrap; background: var(--sheet-2); border-bottom: var(--pen-2) solid var(--ink); scrollbar-width: thin; }
.dc-tool-group { display: flex; flex-direction: column; padding: .25rem .35rem .3rem; border-right: var(--pen-1) solid var(--line); flex: 0 0 auto; }
.dc-tool-group:last-of-type { border-right: 0; }
.dc-tool-label { font-size: .75rem; font-weight: 600; color: var(--ink-2); padding: 0 .2rem .15rem; }
.dc-tool-row { display: flex; gap: .1rem; }
.dc-tool {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 2.75rem; padding: .25rem .25rem .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;
}
.dc-tool .bi { font-size: 1.15rem; line-height: 1; color: var(--layer); }
.dc-tool:hover { border-color: var(--line); background: var(--sheet); }
.dc-tool:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
.dc-tool[aria-pressed="true"] { border-color: var(--ink); background: var(--sheet); }
.dc-tool:disabled { opacity: .45; cursor: default; }

/* Edit › More menu (a <details>; closes on a pick, a click outside or Esc) */
.dc-menu { position: relative; }
.dc-menu > summary { list-style: none; }
.dc-menu > summary::-webkit-details-marker { display: none; }
.dc-menu[open] > summary { border-color: var(--ink); background: var(--sheet); }
.dc-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);
}
.dc-menu-list button { font: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--ink); background: none; border: 0; padding: .35rem .8rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1.25rem; }
.dc-menu-list button:hover:not(:disabled), .dc-menu-list button:focus-visible { background: var(--sheet); text-decoration: underline; outline: none; }
.dc-menu-list button:disabled { color: var(--ink-2); opacity: .6; cursor: default; }
.dc-menu-list button kbd { font: inherit; font-size: .75rem; color: var(--ink-2); background: none; border: 0; padding: 0; }
.dc-menu-list hr { margin: .25rem 0; border: 0; border-top: var(--pen-1) solid var(--line); }

/* Settings › DetailCraft (settings.inc lives in the shell's dialog, outside <main>) */
.dc-set-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-set-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.dc-set-xyz label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem; font-weight: 600; }
.dc-set-xyz input { min-width: 0; width: 100%; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .25rem .4rem; }
.dc-set-xyz input:focus { outline: var(--pen-2) solid var(--action); outline-offset: 0; border-color: var(--action); }

body.app-shell .sp-tab { bottom: 15rem; }

/* ---- Panels ---- */
.dc-panel { overflow-y: auto; min-height: 0; background: var(--sheet-2); }
.dc-left { grid-area: left; border-right: var(--pen-2) solid var(--ink); }
.dc-right { grid-area: right; border-left: var(--pen-2) solid var(--ink); }
.dc-sec { padding: .85rem 1rem; border-bottom: var(--pen-1) solid var(--line); }
.dc-sec:last-child { border-bottom: 0; }
.dc-h { font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; margin: 0 0 .5rem; }
.dc-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; }
.dc-fold > summary::-webkit-details-marker { display: none; }
.dc-fold > summary::before { content: ""; width: .45rem; height: .45rem; border-right: var(--pen-2) solid var(--ink-2); border-bottom: var(--pen-2) solid var(--ink-2); transform: rotate(-45deg); transition: transform .12s; }
.dc-fold[open] > summary::before { transform: rotate(45deg); }
.dc-fold[open] > summary { margin-bottom: .6rem; }
.dc-fold > summary:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 2px; }
.dc-note { color: var(--ink-2); font-size: .875rem; margin: .5rem 0 0; }
.dc-note:first-child { margin-top: 0; }
.dc 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); }
.dc-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; }
.dc-linkbtn:hover { text-decoration-thickness: 2px; }
.dc-linkbtn:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 2px; }
.btn-sm-dc { min-height: 2.1rem; padding: .3rem .75rem; font-size: .875rem; }
.dc-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-top: .4rem; min-width: 0; }
.dc-row.start { justify-content: flex-start; }

.dc-input, .dc-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;
}
.dc-input:focus, .dc-select:focus { outline: var(--pen-2) solid var(--action); outline-offset: 0; border-color: var(--action); }
.dc-input[aria-invalid="true"] { border-color: var(--layer-red); }

.dc-props { display: grid; grid-template-columns: fit-content(48%) minmax(0, 1fr); gap: .35rem .6rem; align-items: center; font-size: .875rem; margin: 0; }
.dc-props label, .dc-props .k { color: var(--ink-2); font-weight: 500; }
.dc-props .v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dc-props .span { grid-column: 1 / -1; }
.dc-sub { grid-column: 1 / -1; margin: .55rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.dc-props + .dc-props, .dc-block + .dc-block { margin-top: .9rem; padding-top: .75rem; border-top: var(--pen-1) solid var(--grid); }
.dc-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.dc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.dc-danger { color: var(--layer-red); }

.dc-levels { list-style: none; margin: 0 0 .25rem; padding: 0; display: grid; gap: .3rem; }
.dc-levels li { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 1.6rem; gap: .3rem; align-items: center; }
.dc-x, .dc-icon-btn { font: inherit; background: none; border: var(--pen-1) solid transparent; border-radius: var(--radius); color: var(--ink-2); cursor: pointer; padding: .1rem .3rem; line-height: 1.2; }
.dc-x:hover, .dc-icon-btn:hover { border-color: var(--line); color: var(--ink); }
.dc-x:focus-visible, .dc-icon-btn:focus-visible { outline: var(--pen-2) solid var(--action); }

.dc-list, .dc-marks { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .875rem; }
.dc-list li, .dc-marks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .2rem 0; border-top: var(--pen-1) solid var(--grid); }
.dc-list li:first-child, .dc-marks li:first-child { border-top: 0; }
.dc-marks button { font: inherit; text-align: left; background: none; border: 0; padding: .05rem 0; color: var(--ink); cursor: pointer; display: flex; gap: .6rem; min-width: 0; }
.dc-marks button:hover .dc-mk, .dc-marks button:focus-visible .dc-mk { text-decoration: underline; }
.dc-marks button:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 1px; }
.dc-mk { font-weight: 700; min-width: 2.2rem; }
.dc-muted { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dc-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dc-msgs { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .875rem; }
.dc-msgs li { padding: .3rem .5rem; border-left: var(--pen-3) solid var(--layer-ochre); background: var(--sheet); margin-top: .3rem; }
.dc-msgs li.is-hard { border-left-color: var(--layer-red); }
.dc-msgs button { font: inherit; background: none; border: 0; padding: 0; color: var(--action); cursor: pointer; text-decoration: underline; margin-left: .35rem; }

/* ---- Stage ---- */
.dc-stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--sheet); }
.dc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.dc-stage.is-placing .dc-canvas { cursor: crosshair; }
.dc-viewbar { position: absolute; z-index: 3; top: .6rem; right: .6rem; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 1.2rem); }
.dc-seg { display: inline-flex; border: var(--pen-1) solid var(--line); border-radius: var(--radius); background: var(--sheet-2); }
.dc-seg button { font: inherit; font-size: .8125rem; font-weight: 600; padding: .25rem .6rem; background: transparent; border: 0; color: var(--ink-2); cursor: pointer; }
.dc-seg button + button { border-left: var(--pen-1) solid var(--line); }
.dc-seg button[aria-checked="true"] { color: var(--on-action); background: var(--action); }
.dc-seg button:focus-visible, .dc-vbtn:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: 1px; }
.dc-vsel { width: auto; max-width: 11rem; background: var(--sheet-2); }
.dc-vbtn { font: inherit; padding: .2rem .45rem; background: var(--sheet-2); border: var(--pen-1) solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; }
.dc-hint {
  position: absolute; z-index: 2; top: 3.2rem; left: 1rem;
  max-width: min(30rem, 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;
}
.dc-hint-h { margin: 0 0 .35rem; font-weight: 700; font-stretch: 112%; }
.dc-hint ul { margin: 0; padding-left: 1.1rem; }
.dc-hint li + li { margin-top: .2rem; }
.dc-drop { position: absolute; inset: .75rem; z-index: 4; 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); }
.dc-drop .bi { color: var(--action); }
.dc-nogl { position: absolute; inset: auto 1rem 1rem 1rem; margin: 0; padding: .6rem .8rem; background: var(--sheet-2); border-left: var(--pen-3) solid var(--layer-ochre); }

/* ---- Reports ---- */
.dc-reports { grid-area: reports; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--sheet-2); border-top: var(--pen-2) solid var(--ink); }
.dc-tabs { display: flex; gap: 0; padding: 0 .5rem; border-bottom: var(--pen-1) solid var(--line); overflow-x: auto; flex: 0 0 auto; }
.dc-tab { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--ink-2); background: transparent; border: 0; border-bottom: var(--pen-3) solid transparent; padding: .35rem .75rem .25rem; white-space: nowrap; cursor: pointer; }
.dc-tab:hover { color: var(--ink); }
.dc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); }
.dc-tab:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: -2px; }
.dc-rep { flex: 1 1 auto; overflow: auto; padding: .5rem 1rem .75rem; font-size: .875rem; min-height: 0; }
.dc-rep:focus-visible { outline: var(--pen-2) solid var(--action); outline-offset: -2px; }
.dc-rep-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 .35rem; }
.dc-rep-head h3 { font-size: .875rem; font-weight: 700; margin: 0; }
.dc-table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0 0 .9rem; min-width: 100%; }
.dc-table th, .dc-table td { text-align: left; padding: .15rem .6rem .15rem 0; border-bottom: var(--pen-1) solid var(--grid); white-space: nowrap; }
.dc-table th { color: var(--ink-2); font-weight: 600; font-size: .8125rem; }
.dc-table td.n, .dc-table th.n { text-align: right; padding-right: 1rem; }
.dc-table tr.total td { font-weight: 700; border-bottom: 0; }
.dc-table button { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: var(--action); cursor: pointer; text-decoration: underline; }

/* ---- Dialogs ---- */
.dc-dialog { width: min(60rem, 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); }
.dc-dialog::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.dc-dlg { display: flex; flex-direction: column; max-height: calc(100vh - 2.5rem); }
.dc-dlg-head, .dc-dlg-foot { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; }
.dc-dlg-head { justify-content: space-between; border-bottom: var(--pen-1) solid var(--line); }
.dc-dlg-head .dc-h { margin: 0; }
.dc-dlg-foot { justify-content: flex-end; border-top: var(--pen-1) solid var(--line); flex-wrap: wrap; }
.dc-dlg-foot .dc-note { margin: 0 auto 0 0; }
.dc-shop-body { position: relative; aspect-ratio: 420 / 297; max-height: calc(100vh - 9rem); background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); }
.dc-shop-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-ask { width: min(30rem, calc(100vw - 2rem)); }
.dc-ask-text { margin: 0; padding: 1rem; }
.dc-dwg-sel { flex: 1 1 auto; min-width: 0; max-width: 28rem; }
.dc-report-dlg { width: min(44rem, calc(100vw - 2rem)); }
.dc-report-body { padding: .75rem 1rem; overflow: auto; }
.dc-report-body p { margin: 0 0 .5rem; }
.dc-report-body .dc-table { min-width: 0; }
.dc-report-body .dc-table td { white-space: normal; }
.dc-report-body .dc-warn { padding-left: .5rem; border-left: var(--pen-2) solid var(--layer-red); }

/* ---- Status bar ---- */
.dc-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); min-width: 0; }
.dc-node { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 11rem; }
.dc-status-msg { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.dc-counts { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .dc { grid-template-columns: 14rem minmax(0, 1fr) 16.5rem; }
}
@media (max-width: 760px) {
  body.app-shell .sp-tab { bottom: .75rem; }
  .dc-tools { flex-wrap: nowrap; overflow-x: auto; }
  .dc-menu-list { position: fixed; top: auto; left: 1rem; right: 1rem; min-width: 0; }
  .dc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 60vh auto auto auto auto;
    grid-template-areas: "tools" "stage" "status" "right" "reports" "left";
    height: auto;
  }
  .dc-left, .dc-right { border: 0; border-top: var(--pen-2) solid var(--ink); }
  .dc-reports { max-height: 24rem; }
  .dc-status { flex-wrap: wrap; gap: .25rem 1rem; }
  .dc-node { min-width: 0; }
  .dc-hint { font-size: .8125rem; top: 3rem; left: .6rem; }
  .dc-viewbar { left: .6rem; right: .6rem; justify-content: flex-start; }
}
/* view cube (viewcube.js): below the 3D / Plan / Elevation bar */
.dc-stage > .cc-vc.at-top-right { top: 3rem; }