/* Recent, the app's front door (structural redesign §7, slice 6): the files you changed as a grid that
   WRAPS, so the page never scrolls sideways and needs no inner scroller either. (It was the Home page
   until slice 6, whose tile rows scrolled sideways inside their own box; its current-project hero went
   with the current project in slice 4.) */
@layer pages {
  /* BUILT FROM THE APP'S OWN COMPONENTS (UI-cohesion spec §2.6). `.home-section` and `.section-head`
     duplicated `.panel` and `.panel-head` at a different size (h2 15px against 14) and with no surface
     or border, so the app's front door was the one page that did not look like the app. The markup
     carries `panel` and `panel-head`; all that is left here is the gap between sections, which
     `.panel` has no opinion about. */
  .home-section { margin-bottom: 24px; }

  /* 160px tiles, as many per row as fit, stretched to fill the row — and NEVER FEWER THAN TWO. A bare
     `minmax(160px, 1fr)` gave a 375px phone ONE column (measured: a 302px grid, where two 160px tracks
     and the gap need 332), so sixteen 302px squares stacked 5,400px deep. The `min()` lets a track
     shrink to half the row when 160px will not fit twice; at desktop width half the row is far over
     160px, so the rule is the plain one there (how many tracks depends on the window: five of 184px at 1280px, measured). */
  .recent-grid {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(160px, calc((100% - var(--space-3)) / 2)), 1fr));
  }
  /* `.thumb` has no intrinsic size (components.css); each container sizes it. A file tile is square,
     as in the Library's grid. Scoped to `.grid-card` so a project card in Active projects keeps the
     height `.project-card .thumb` gives it. */
  .recent-grid .grid-card .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  .attention-list { list-style: none; margin: 0; padding: 0; }
  .attention-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .attention-mark { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .attention-row--danger .attention-mark { background: var(--danger); }
  /* Low stock (stage 2, S2-3): a milder signal than a failed print — warn, not danger. */
  .attention-row--warn .attention-mark { background: var(--warn); }
  .attention-text { flex: 1; min-width: 0; }

  /* GETTING STARTED (F onboarding, 2026-10-13): Recent's panel while the library holds no live file.
     A NATIVE <ol>, so the three steps stay a numbered list to a screen reader (a counter drawn in
     `::before` over `list-style: none` stops being a list in Safari); the numbers are muted ink and
     nothing here is accent — the top bar's Upload is this page's one (design-system.md rule 13).
     The measure is the prose one: these are sentences to read, not tiles to scan. Scoped under
     `.getting-started` throughout, because `.file-sources` and `.projects-intake` also render in
     the Library's and Projects' empty-state boxes, which lay them out on their own. */
  .getting-started-steps { margin: 0; padding-left: 20px; max-width: var(--prose-measure); }
  .getting-started-steps > li + li { margin-top: var(--space-4); }
  .getting-started-steps > li::marker { color: var(--fg-muted); font-weight: 600; }
  .getting-started-steps h3 { margin-bottom: var(--space-1); }
  .getting-started-steps p { color: var(--fg-muted); }
  .getting-started-steps strong { color: var(--fg); font-weight: 600; }
  .getting-started-steps > li > :last-child,
  .getting-started .file-sources > :last-child { margin-bottom: 0; }
}