/* OBSCURA OS: the Engineering Suite's shared dialogs, for both halves.

   The library of documents on this device, a document's versions, the
   notice for work a lost tab left behind (pro-code/cad-library.js), and
   the 3D half's export, part properties and print preparation dialogs
   (pro-code/eng-files.js, pro-code/eng-print.js). On the design system's
   tokens (theme.css), so a colourway and dark mode reach them. */

.cad-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgb(0 0 0 / 0.55);
}
.cad-dialog.cad-wide { width: min(980px, calc(100vw - 32px)); }
.cad-dialog { overflow-x: hidden; overflow-y: auto; }
.cad-dhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.cad-dhead h2 { flex: 1; margin: 0; font: 600 var(--text-xl)/1.2 var(--font-headline); }
.cad-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font: 400 var(--text-2xl)/1 var(--font-ui); cursor: pointer; }
.cad-close:hover, .cad-close:focus-visible { background: var(--paper-inset); color: var(--ink); }
.cad-dbody { padding: 14px 20px 20px; }
.cad-lead { margin: 0 0 14px; font-size: var(--text-sm); line-height: var(--leading-prose, 1.55); color: var(--ink-soft); }
.cad-note { margin: 12px 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.cad-note:empty { display: none; }
.cad-note.cad-bad { color: var(--danger); }
.cad-note.cad-warn { color: var(--warn); }
.cad-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cad-in { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.cad-in:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

/* Buttons that read as links: the actions on a card or a row. */
.cad-link { min-height: 32px; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-strong); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.cad-link:hover, .cad-link:focus-visible { background: var(--accent-soft); }
.cad-link.cad-danger, .cad-danger { color: var(--danger); }

/* The library: a search, a filter, and a card for each document. */
.cad-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cad-search { flex: 1 1 220px; }
.cad-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--paper-inset); }
.cad-seg button { min-height: 32px; padding: 4px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.cad-seg button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.cad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cad-card { display: grid; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.cad-card.cad-here { border-color: var(--accent-border); }
.cad-open { display: grid; gap: 2px; padding: 0 0 8px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cad-open:hover .cad-name, .cad-open:focus-visible .cad-name { color: var(--accent-strong); }
.cad-open img, .cad-open .cad-nopic { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--paper-inset); margin-bottom: 6px; }
.cad-name { padding: 0 10px; font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.cad-meta { padding: 0 10px; font-size: var(--text-2xs); color: var(--ink-faint); }
.cad-acts { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 4px 6px; }

/* Versions: a row each. */
.cad-keep { display: flex; gap: 8px; margin-bottom: 14px; }
.cad-keep label { flex: 1; }
.cad-vers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cad-ver { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; align-items: center; padding: 8px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); }
.cad-ver img, .cad-ver .cad-nopic { display: block; width: 96px; height: 64px; object-fit: contain; border-radius: var(--radius-sm); background: var(--paper-inset); }
.cad-vtext { display: grid; gap: 2px; }
.cad-vtext .cad-name, .cad-vtext .cad-meta { padding: 0; }
.cad-ver .cad-acts { grid-column: 1 / -1; padding: 0; }
.cad-rename { display: flex; gap: 6px; margin-top: 4px; }
.cad-rename[hidden] { display: none; }

/* Work a lost tab left behind, offered back. */
.cad-recover { position: absolute; z-index: 35; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: grid; gap: 8px; }
.cad-rrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--accent-border), 0 14px 36px rgb(16 16 24 / 0.18); }
.cad-rrow p { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); line-height: 1.45; }

/* Forms in the 3D half's dialogs: export, part properties, printing. */
.cad-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cad-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cad-form label { display: grid; gap: 4px; font-size: var(--text-xs); color: var(--ink-soft); }
.cad-form .cad-check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--text-sm); }
.cad-form fieldset { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.cad-form legend { padding: 0 4px; font-size: var(--text-xs); color: var(--ink-soft); }
.cad-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.cad-actions .btn { min-height: 40px; }
.cad-custom { display: grid; gap: 6px; }
.cad-custom-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; }

/* Print preparation: the parts, and each plate from above. */
.cad-parts { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.cad-parts th, .cad-parts td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.cad-parts th { font-weight: 600; color: var(--ink-soft); }
.cad-parts td.cad-num { font-family: var(--font-mono); white-space: nowrap; }
.cad-parts input[type="number"] { width: 64px; }
.cad-fit { font-weight: 600; }
.cad-fit.cad-yes { color: var(--good); }
.cad-fit.cad-no { color: var(--danger); }
.cad-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cad-plate { display: grid; gap: 4px; margin: 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.cad-plate svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--paper-inset); }
.cad-plate .cad-bed { fill: none; stroke: var(--rule-strong); }
.cad-plate .cad-foot { fill: var(--accent-soft); stroke: var(--accent); }
.cad-plate .cad-foot.cad-pin { fill: var(--paper-raised); }
.cad-plate svg * { vector-effect: non-scaling-stroke; }

/* A dot by the name while there are changes not saved to a file. */
.cad-dirty { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cad-dirty[hidden] { display: none; }

@media (max-width: 720px) {
  .cad-grid2 { grid-template-columns: 1fr; }
  .cad-keep { flex-wrap: wrap; }
  .cad-link, .cad-seg button, .cad-in, .cad-actions .btn { min-height: 44px; }
  .cad-parts { display: block; overflow-x: auto; }
}