/* The model catalog: index toolbar, the detail page's two columns, the file tree, print log. The
   shelf rows the old model-shelves settings page drew left with that page (2026-10-20). */
@layer pages {
  /* The detail page's rules below (hero, gallery, file tree, print settings) were migrated from the
     old models.css with the token substitution applied; the toolbar, the card cover, the print log,
     and the drop zone were rewritten for PR 3. The .badge.mstatus-* rules are NOT
     here — they are components. The index toolbar is the .toolbar component, so this page only
     sizes what sits in it; the status filters are .chip and carry no page rule at all. */
  .models-toolbar { margin-bottom: 14px; }
  .models-toolbar input[type="search"] { flex: 0 1 260px; min-width: 160px; }
  .models-toolbar .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

  /* THE MODEL PAGE, PRINTABLES-STYLE (2026-10-21): the model's files on the left, the pane on the
     right. One column below 900px, the list first (modelstage_controller.js scrolls the pane into
     view on a phone). Selection is ink (design-system rule 13): the shown entry is --fg on --raised. */
  .model-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
  @media (max-width: 899px) { .model-layout { grid-template-columns: 1fr; } }
  .model-index-details { display: block; padding: 4px 8px; margin-bottom: 14px; border-radius: 4px; font-weight: 600; }
  .model-index a[aria-current="true"] { background: var(--raised); color: var(--fg); }
  .model-stage { display: block; min-width: 0; }
  .model-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
  .model-stage-name { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
  .model-stage-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
  .model-stage .preview-pdf { width: 100%; height: 75vh; }

  .model-hero { margin-bottom: 14px; }
  .model-hero-img { display: block; width: 100%; max-height: 60vh; object-fit: contain;
                    background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-panel); }
  .model-hero-thumb { display: flex; align-items: center; justify-content: center; width: 100%;
                      aspect-ratio: 4/3; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-panel); }
  .model-hero-thumb img { max-width: 100%; max-height: 100%; }
  .model-hero-empty { display: flex; align-items: center; justify-content: center; width: 100%;
                      aspect-ratio: 4/3; font-size: 48px; background: var(--raised); border-radius: var(--radius-panel); }

  .image-gallery { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  /* A thumbnail cell (a .heic, tinkerex#285) sits beside the inline pictures at their size. */
  .image-gallery .gallery-thumb, .image-gallery .gallery-thumb .thumb { width: 84px; height: 66px; display: inline-flex; align-items: center; justify-content: center; }
  .image-gallery img { width: 84px; height: 66px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

  .model-notes { margin-top: 20px; }
  .model-notes h2, .model-files h2 { font-size: 15px; margin: 0 0 10px; }

  /* Files as a scrollable folder tree. */
  .model-files { margin-bottom: 22px; }
  .file-tree-box { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 8px 6px; max-height: 420px;
                   overflow: auto; background: var(--surface); color: var(--fg); font-size: 13px; }
  .file-tree { list-style: none; margin: 0; padding: 0; }
  .file-tree .file-tree { margin-left: 16px; padding-left: 6px; border-left: 1px solid var(--line); }
  .file-tree li { padding: 1px 0; }
  .tree-dir > details > summary { cursor: pointer; list-style: none; padding: 2px 4px; border-radius: 4px; }
  .tree-dir > details > summary::-webkit-details-marker { display: none; }
  .tree-dir > details > summary:hover { background: var(--raised); }
  /* The tree draws the Library's folder glyph, not an emoji (design system: no emoji in the interface);
     a file entry keeps its 22px indent so its name lines up with a folder name beside its glyph. */
  .tree-folder .folder-glyph { margin-right: 6px; }
  .tree-folder { font-weight: 600; color: var(--fg); }
  .tree-file .tree-fname { display: block; padding: 2px 4px 2px 22px; border-radius: 4px;
                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tree-file .tree-fname:hover { background: var(--raised); }

  .model-print-settings { margin-bottom: 22px; }
  .ps-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; margin: 0;
             border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 10px 12px; }
  .ps-grid dt { color: var(--fg-muted); white-space: nowrap; }
  .ps-grid dd { margin: 0; }

  /* A MODEL'S COVER IS SQUARE (2026-10-20). `.project-card .thumb` is a fixed 120px tall in a grid
     whose columns are at least 150px wide, so a square render sat in a short, wide box. Model cards
     only: project and explore cards keep their banner shape. The status badge that sat over the
     cover's corner is gone; the chips above the grid and the model page carry the status. */
  .model-card .thumb { height: auto; aspect-ratio: 1 / 1; }

  /* An empty hero is the 3D models icon (slice 5; no emoji in the interface), at the size the
     glyph it replaced was set. The model CARD's empty cover is sized by pages/projects.css's
     `.project-card .project-thumb-empty .rail-icon`: the card carries `.project-card` too. */
  .model-hero-empty .rail-icon { width: 48px; height: 48px; color: var(--fg-muted); }

  /* The 3D models view grouped by project: the head is the .group-head component, and only the
     space between groups is this page's. */
  .models-group + .models-group { margin-top: var(--space-5); }

  .print-log details.composer { margin: 0 0 10px; }
  .print-form { display: grid; gap: 8px; max-width: 480px; }
  .print-form .row { display: flex; gap: 10px; }
  .print-form .field { margin: 0; }
  .print-log .print-run { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
  .print-log .print-run strong { font-family: var(--font-mono); font-weight: 500; }

  /* The import form's file input, as a target you can drop onto as well as click. */
  .dropzone { display: block; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-panel); background: var(--surface); text-align: center; cursor: pointer; }
  .dropzone:hover { border-color: var(--fg); }
  .dropzone input[type="file"] { display: block; margin: 10px auto 0; }

  /* A MODEL'S PROJECTS ROW (2026-10-21): on the strip it sits under the head; on the model page, in
     its Details pane under the metadata. */
  .model-strip .model-projects, .model-details .model-projects { margin-top: 8px; }
}