/* Layout pieces added by the 2026-09-25 re-arrangement, in the app's original
   plain look.

   An earlier version of this file was a full visual refresh (gradients, glow,
   large rounded cards, motion). The owner asked for the app to stay as it was
   -- "not too cartoonish" -- so all of that is gone. What is left decides only
   WHERE things sit, and uses the tokens, radii, borders and colours that
   app.css already defines: a page header with its actions beside the title, a
   toolbar, the file-at-a-glance tiles, and the dashboard's two columns.

   Loaded after every other stylesheet so these pieces can rely on the base
   rules having applied. Removing the <link> in layout.js removes the pieces. */

/* A title with what you can do about it, on one line. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 18px; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin: 0 0 4px; }
.page-head p.lede { margin: 0; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Nothing to do, said plainly. */
.all-clear { text-align: center; padding: 22px 12px; }
.all-clear-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--good); }

/* Search, stage and filters as one surface. */
.toolbar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 4px; margin: 0 0 16px;
}
.toolbar .search-box { margin-bottom: 10px; }

/* The file at a glance: the dashboard's tiles, a little smaller. */
.stat-row.glance { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 18px; }
.stat-row.glance .stat-tile .n { font-size: 24px; }
.stat-row.glance .stat-tile.text .n { font-size: 17px; line-height: 1.25; }
.stat-row.glance .stat-tile.text .label { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* A heading that only labels the groups below it (the rules list's "By
   paragraph" and "By rider"). */
h2[data-guide-group] {
  display: flex; align-items: center; gap: 12px; margin: 28px 0 0;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
h2[data-guide-group]::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.rules-section > h2 { font-size: 17px; margin-top: 18px; }

/* Navigation links inside the page are not prose links: no underline, ink
   text. (The plain-link rule in app.css catches every unclassed <a> in main.) */
main .progress-list a { text-decoration: none; color: var(--ink); }
main .progress-list a:hover { color: var(--accent-strong); }

/* Helper text sits under a label as a quiet note, not as body copy. */
.card .field > p.help, .card .field > .help { font-size: 13px; line-height: 1.45; color: var(--faint); margin: -2px 0 8px; }

/* ---- the dashboard: Needs You full width, a handful of what happened under
   it -------------------------------------------------------------------
   Activity used to sit beside Needs You at equal width, which crowded out
   the reason to be on this page; the full feed moved to its own page
   (activityPage.js), and this is what is left here (Alex Boby, 2026-09-28,
   relaying a design review). */

.recent-activity-list { list-style: none; margin: 0; padding: 0; }
.recent-activity-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.recent-activity-list li:last-child { border-bottom: none; }
.recent-activity-list .item-title { font-weight: 600; }
.recent-activity-list .meta { white-space: nowrap; }

/* ---- the dashboard's tiles that open a pile of work ---------------------- */

/* A tile that is a button or a link keeps the tile's own look. */
button.stat-tile, a.stat-tile {
  font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
  display: block; width: 100%;
}
button.stat-tile .n, button.stat-tile .label, a.stat-tile .n, a.stat-tile .label { display: block; }
button.stat-tile:hover, a.stat-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
button.stat-tile:focus-visible, a.stat-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The piles that are the person's to act on. */
.stat-tile.attention .n { color: var(--accent); }
/* Seven tiles on one row: the original five and the two staff piles. */
.stat-row.desk { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* The popup: the same items and buttons as the list, in a box over the page. */
.dash-popup {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; background: rgba(25, 27, 31, .38);
}
.dash-popup[hidden] { display: none; }
.dash-popup-box {
  width: min(760px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.dash-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dash-popup-head h2 { margin: 0; font-size: 18px; }
button.dash-popup-close {
  font-family: inherit; font-size: 22px; line-height: 1; color: var(--dim);
  background: none; border: none; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-xs);
}
button.dash-popup-close:hover { color: var(--accent); background: var(--accent-soft); }
.dash-popup-body { padding: 14px 16px 6px; overflow-y: auto; }
.dash-popup-body .empty { margin: 8px 0 14px; }
.dash-popup-body.must-confirm { border-left: 3px solid var(--danger); }
body.dash-popup-open { overflow: hidden; }

/* The document review page's own findings popup (2026-10-02, Michael: "the
   pop up from the needs review should not obstruct the uploaded document"):
   confined to the right half of the viewport, over the Extracted data pane
   it is actually about, rather than the dashboard's own full-page overlay.
   The whole point of reviewing a finding here is reading it against the
   document it is about, so the left pane -- the PDF -- stays visible and in
   reach the entire time this is open; only `left` is overridden, so it
   still inherits position:fixed/inset:0 from .dash-popup above and just
   narrows which part of the viewport that box covers. */
#dash-popup-doc-findings { left: 50%; background: rgba(25, 27, 31, .18); }
#dash-popup-doc-findings .dash-popup-box { width: 100%; max-width: 520px; margin: 0 auto; }
@media (max-width: 860px) {
  /* The split screen itself stacks here (see .split's own breakpoint), so
     there is no side-by-side PDF left to protect -- back to the ordinary
     full-width popup. */
  #dash-popup-doc-findings { left: 0; background: rgba(25, 27, 31, .38); }
}