/* The Files pages: the list and grid, the type filter, sorting, notes. Components (table.files,
   .thumb, .chip, .view-toggle) come from components.css; these are the page's own classes. */
@layer pages {
  /* SQUARE STAGES, AT LEAST 160PX (2026-10-08): about four per row where 140px fitted five — the
     redesign trades density for preview, since previews are what the library is used for. */
  .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-5) var(--space-4); }
  .files-grid .grid-card { align-items: stretch; }
  .files-grid .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .hidden-toggle { margin: 0 0 10px; font-size: 12px; }

  /* THE LIBRARY AND ITS INSPECTOR (structural redesign §5.1–5.2, slice 3). Hidden until a file is
     selected (`.has-inspector`, written by the server for `?selected=` and by selection_controller).
     Docked beside the listing at 1100px and up; sliding over it from 720px; a full-screen sheet on a
     phone. The two narrow forms are `position: fixed` and pinned by `left`/`right`, never sized in
     `vw` — a 100vw box is wider than the page whenever a scrollbar takes room, which is a sideways
     scroll at 375px (design-system.md rule 11). Selection is INK, never the accent (rule 13). */
  .library { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .inspector { display: none; padding: var(--space-4); background: var(--surface);
               border: 1px solid var(--line); border-radius: var(--radius-panel); min-width: 0; }
  .library.has-inspector .inspector { display: block; }
  .inspector-close { float: right; margin: 0 0 var(--space-2) var(--space-2); }
  .inspector-head { margin-bottom: var(--space-3); }
  .inspector-head .eyebrow { display: block; font: 600 11px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
  .inspector-name { margin: 0; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
  .inspector-stage .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .inspector-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
  .inspector dl.meta { grid-template-columns: max-content minmax(0, 1fr); overflow-wrap: anywhere; }
  .inspector .attach-form { flex-wrap: wrap; }
  .inspector .attach-form select { max-width: 100%; min-width: 0; }
  .inspector-origin, .inspector-notes { margin: var(--space-3) 0 0; font-size: 13px; }
  .grid-card.is-selected .thumb { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
  table.files tr:has(.is-selected) { background: var(--raised); }
  @media (min-width: 1100px) {
    .library.has-inspector { grid-template-columns: minmax(0, 1fr) 300px; }
    .inspector { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); align-self: start;
                 max-height: calc(100vh - var(--topbar-height) - var(--space-6)); overflow-y: auto; }
  }
  @media (max-width: 1099px) {
    .inspector { position: fixed; z-index: 40; top: var(--topbar-height); right: 0; bottom: 0;
                 width: 340px; max-width: 100%; overflow-y: auto; border-radius: 0; box-shadow: var(--shadow-float); }
  }
  @media (max-width: 719px) {
    .inspector { top: 0; left: 0; width: auto; max-width: none; bottom: var(--tabbar-height); z-index: 50; }
  }

  /* MIGRATED VERBATIM (old application.css 639-657): .ext-filter, .ext-picker, .ext-picker label,
     .ext-picker select, .ext-picker select:disabled, .ext-active, .ext-filter .chip,
     .ext-filter .chip:hover, .ext-filter .chip.active, .ext-filter .chip .chip-x,
     .ext-filter .chip.active:hover — with the substitution table applied. */
  /* --- The flat by-extension filter: a dropdown of what the library holds + the active chips --- */
  .ext-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
  .ext-picker { display: inline-flex; gap: 6px; align-items: center; }
  .ext-picker label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .ext-picker select {
    font: inherit; font-size: 13px; max-width: 260px; }
  /* The full-set state (MAX_EXTS reached) — the control goes inert rather than accepting a value
     resolve_exts would then drop. */
  .ext-picker select:disabled { opacity: .45; cursor: not-allowed; }
  .ext-active { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  /* The active-type chips are the .chip component (components.css), whose active and hover
     states are token-based. The migrated per-page copies painted `color: #fff` over var(--accent)
     and var(--fg), which the theme flip made unreadable on dark (Task 2 review, 2026-09-03). The
     × stays INSIDE the chip link, so the whole chip is one target that removes that type. */

  /* Column classes files/_list.html.erb carries (Task 3), so a phone drops columns instead of
     scrolling sideways. Order of loss: modified, version, then size. */
  @media (max-width: 719px) { table.files .col-modified, table.files .col-version { display: none; } }
  @media (max-width: 479px) { table.files .col-size, table.files .col-folder { display: none; } }

  /* MIGRATED VERBATIM (old notes.css): .notes-panel, .notes-panel h2, .note, .note-body :first-child,
     .note-body :last-child, .note-meta — substitution table applied. (.note-badge, .file-menu and
     .note-popover are components now and are NOT copied here.) */
  /* Detail-page notes section */
  .notes-panel { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 16px; }
  .notes-panel h2 { font-size: 16px; margin: 0 0 12px; }
  .note { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 12px; margin-bottom: 10px; max-width: 640px; }
  .note-body :first-child { margin-top: 0; }
  .note-body :last-child { margin-bottom: 0; }
  .note-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; }
  /* THE NOTE BADGE'S ICON (ShellHelper::ICON_PATHS[:note], slice 7) at the size of its 11px count.
     HERE AND NOT BESIDE `.note-badge` IN components.css, because a layer outranks specificity:
     shell.css's bare `.rail-icon { width: 16px }` sits in a LATER layer than components, so this
     rule written there lost and the icon drew at 16px (measured; files_layout_test.rb pins 12px). */
  .note-badge .rail-icon { width: 12px; height: 12px; vertical-align: -2px; }

  /* MIGRATED VERBATIM (old projects.css): .attach-to-project, .attach-form, .attach-form select,
     .project-chip, .project-chip form, .chip-x, .chip-x:hover — these live on files/show. */
  .attach-to-project { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
  .attach-form { display: inline-flex; align-items: center; gap: 8px; }
  .attach-form select { max-width: 260px; }
  .project-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px;
    border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
  .project-chip form { display: inline; }
  .chip-x { background: none; border: 0; cursor: pointer; color: var(--fg-muted);
    font-size: 15px; line-height: 1; padding: 0 4px; }
  .chip-x:hover { color: var(--fg); }

  /* --- Connected files (stage 4, S4-8), on files/show. `.connections-panel` follows
     `.notes-panel` above: a PAGE class, because `.panel` is a component and components.css owns
     that selector alone (design-system.md rule 3). `.chip-x` above is REUSED rather than copied,
     which is why this block sits beside it. The rows WRAP rather than squashing, which is rule
     11's requirement at 375px — a long library name plus a Remove button has no business pushing
     the page sideways. */
  .connections-panel { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 16px; }
  .connections-panel h2 { font-size: 16px; margin: 0 0 12px; }
  .connections-panel h3 { font-size: 13px; font-weight: 500; margin: 0 0 6px; }
  .connection-group { margin-bottom: 14px; }
  .connection-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    overflow-wrap: anywhere; margin-bottom: 4px; }
  /* The photo rows sit side by side rather than stacking; the cells are the only thumbnails on
     this page outside the preview row. `.thumb` is a component with NO intrinsic size (every
     tenant sizes it inside its own container — table.files .thumb, .files-grid .thumb), so this
     one is qualified the same way rather than left to collapse to nothing. */
  .connections-photos .connection-row { display: inline-flex; vertical-align: top; margin-right: 8px; }
  .connections-photos .photo-cell { display: block; width: 96px; }
  .connections-photos .photo-cell .thumb { width: 96px; height: 96px; }
  .connections-panel details.composer { margin-top: 10px; }
  .connections-panel details.composer > summary { min-height: 24px; padding: 0 8px; font-size: 12px; }
  .connections-panel .link-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 8px 0 0; }

  /* --- The one toolbar row (spec §8). .toolbar is the component; these are its Files tenants. */
  .files-toolbar { margin-bottom: 14px; }
  .files-toolbar .ext-filter { margin: 0; }
  .files-toolbar .hidden-toggle { margin: 0; }
  /* The grid tile's second line: size and type, in mono, under the name. */
  .grid-sub { display: block; font: 400 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); }
  /* The file page's title row and format badge (Task 2's markup). */
  .page-head .page-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .page-head .file-badge { font-family: var(--font-mono); text-transform: none; letter-spacing: .04em; }
  /* The notes composer (Task 2): the summary reads as a small button under the heading. */
  .notes-panel details.composer { margin: 0 0 12px; }
  .notes-panel details.composer > summary { min-height: 24px; padding: 0 8px; font-size: 12px; }

  /* THE MODEL STRIP (files/_model_strip.html.erb): a model folder's header above its files. A panel,
     qualified rather than redeclared (design-system.md rule 3). The cover is a fixed small square so
     the strip stays a strip; it wraps at phone width rather than scrolling sideways. The title's 180px
     basis is what keeps the cover beside it inside a 375px phone's panel; the actions wrap below. */
  .model-strip { margin-bottom: var(--space-4); }
  .model-strip-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
  .model-strip-cover { flex: 0 0 72px; width: 72px; height: 72px; }
  .model-strip-cover--empty { display: grid; place-items: center; color: var(--fg-muted); }
  .model-strip-cover--empty .rail-icon { width: 24px; height: 24px; }
  .model-strip-title { flex: 1 1 180px; min-width: 0; }
  .model-strip-title .eyebrow { display: block; font: 600 11px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
  .model-strip-title h2 { margin: 0 0 var(--space-1); font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
  .model-strip-meta { margin: var(--space-1) 0 0; font-size: 13px; overflow-wrap: anywhere; }
  .model-strip-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .model-strip-settings { margin-top: var(--space-3); grid-template-columns: max-content minmax(0, 1fr); }
  .model-strip-notes { margin-top: var(--space-3); }
  .model-strip .print-log { margin-top: var(--space-3); }
}