/* Grid view */
#grid {
  padding: 24px
           calc(env(safe-area-inset-right, 0px) + 24px)
           calc(env(safe-area-inset-bottom, 0px) + 24px)
           calc(env(safe-area-inset-left, 0px) + 24px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Empty-state messages for sections that have no content */
.empty-state {
  grid-column: 1 / -1;
  padding: 48px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
.card {
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: outline 0.15s;
  outline: 2px solid transparent;
}
.card:hover { outline-color: var(--accent); }
.card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--bg);
  display: block;
}
.card .placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
}
.card .label {
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.card .label .dir {
  color: var(--text-2);
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}

/* CAD detail view (inside ContentViewer modal). Used by both STEP prints
   and DXF cuts — same renderer/scene/camera/gizmo, different geometry
   producer. The renderer canvas fills the wrapper; the gizmo overlays
   the top-right corner. The loading pill centers while the file parses. */
.cad-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
}
.cad-wrapper > canvas.cad-viewport {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.cad-wrapper > canvas.cad-gizmo {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 10;
  pointer-events: none;
}
.cad-wrapper > .cad-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-2);
  font-size: 15px;
  z-index: 11;
  display: none;
}
.cad-wrapper > .ruler-toggle {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  z-index: 11;
  padding: 6px 10px;
  background: rgba(35, 35, 66, 0.85);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cad-wrapper > .ruler-toggle:hover {
  background: rgba(58, 58, 90, 0.9);
}
.cad-wrapper > .ruler-toggle.off {
  opacity: 0.55;
}
.cad-wrapper > .reset-view,
.pan-zoom-reset {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 11;
  padding: 6px 10px;
  background: rgba(35, 35, 66, 0.85);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cad-wrapper > .reset-view:hover,
.pan-zoom-reset:hover {
  background: rgba(58, 58, 90, 0.9);
}

/* Minimap for 2D PanZoom surfaces (mermaid + drawings). 2D equivalent
   of the 3D ViewCube gizmo: outer box is the wrapper at the default
   (fit) view, inner box is what portion of that view is currently
   visible after pan/zoom. Pointer-events: none — the box is an
   indicator, not an input surface. Sits 8px to the left of the
   ContentViewer's .cv-close button (top: 8px right: 8px, 36×36) so
   the close X doesn't appear to apply to the minimap. */
.pan-zoom-minimap {
  position: absolute;
  top: 8px;
  right: 52px; /* 8 (close X right) + 36 (close X width) + 8 (gap) */
  z-index: 10;
  background: rgba(35, 35, 66, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pan-zoom-minimap-rect {
  position: absolute;
  background: rgba(68, 136, 255, 0.20);
  border: 1px solid var(--accent);
  border-radius: 2px;
  pointer-events: none;
}

/* Section headers in grid */
.section-header {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.section-header:first-child { padding-top: 0; }
.subsection-header {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 0 2px;
  opacity: 0.65;
}

/* Mermaid thumbnail in card */
.card .mmd-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}
.card .mmd-thumb svg {
  max-width: 100%;
  max-height: 100%;
}

/* Line-art drawing thumbnail in card. SVGs from tools/line-art are
   black-on-transparent; the card uses var(--bg) as background and we
   recolor strokes to var(--text) so the line work reads against the
   dark surface. */
.card .drawing-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}
.card .drawing-thumb svg {
  max-width: 100%;
  max-height: 100%;
}
.card .drawing-thumb svg path,
.card .drawing-thumb svg line {
  stroke: var(--text);
}

/* Same recolor for the zoomed view inside the modal — the SVG is parsed
   in drawings.js and tagged with .drawing-svg so the strokes read white
   against the dark surface, matching the thumbnail. */
.drawing-svg path,
.drawing-svg line {
  stroke: var(--text);
}

/* Engineering drawings: visible edges get full stroke weight (the
   outer <g> sets stroke-width: 1.5), but the dashed hidden-line group
   gets reduced weight so the dots don't compete with the solid lines
   for attention. Applies to both the card thumbnail and the zoomed
   modal view. */
.card .drawing-thumb svg g[stroke-dasharray],
.drawing-svg g[stroke-dasharray] {
  stroke-width: 0.5;
}