/* Pulse screens: one layout from a tablet to a 4K TV (owner, 2026-10-19:
   "it needs to work across all sizes, from tablet to large", "maybe throw
   it on their TV"). Loaded after the view sheets, so it settles three
   things only:
     1. the fluid page container and the auto-filling project grid;
     2. the overview summary density (readiness panel + metric tiles);
     3. the large screen scale (zoom) at 2400 CSS px and wider.
   The look stays the drafting/instrument one; metric colours stay
   --up/--warn/--down. Verdict: docs/DESIGN-TASTE.md, 2026-10-19. */

/* ── 1. Container and project grid ───────────────────────────────────── */
/* The container grows with the screen up to 1760px; the side gutter grows
   with it. Views with their own width (#ai, activity, bookings) keep it. */
@media (min-width: 1200px) {
  .wrap { max-width: 1760px; padding-left: clamp(24px, 3.5%, 56px); padding-right: clamp(24px, 3.5%, 56px); }
}
/* Project cards fill as many 316px+ columns as fit: 2 on a tablet, 3 from
   1100px, 4 at 1440 and on a scaled 4K screen, 5 at 1920. 316px keeps a
   16 character host name whole beside the ring. Detail panel pairs
   (.grid--2) keep their two columns. */
@media (min-width: 700px) {
  .grid:not(.grid--2) { grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 12px; }
  .grid:not(.grid--2) > .card { padding: 16px; }
}

/* ── 2. Overview summary density ─────────────────────────────────────── */
/* Smaller ring and numerals, less padding: the summary is a readout, not a
   hero. Skeleton and hydrated panels share these rules (zero layout shift). */
@media (min-width: 700px) {
  #totals .hero--cmd { gap: 16px; padding: 14px 18px; }
  #totals .hero__gauge { width: 88px; height: 88px; }
  #totals .hero__num .odometer { font-size: 28px; }
  #totals .hero__num .gauge__denom { font-size: 11px; margin-top: 2px; }
  #totals .hero__trend { margin-top: 6px; font-size: 13px; }
  #totals .kpis--cmd { gap: 10px; }
  #totals .tile { padding: 12px 14px; }
  #totals .tile__label { margin-bottom: 6px; }
  #totals .tile__value { font-size: 24px; }
  /* The empty Campaigns state reads on one line instead of three. */
  #campaigns-ov .cmp__empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 6px 2px 0; }
  #campaigns-ov .cmp__empty-line { margin: 0; }
}
/* Desktop: the readiness panel sits beside six tile columns, so the whole
   summary is two tile rows tall and the first project row starts above the
   fold at 1440x900. The last tile spans the rest of its row: no holes. */
@media (min-width: 1200px) {
  #totals { display: grid; grid-template-columns: minmax(300px, 22%) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
  #totals .hero--cmd { margin: 0; }
  #totals .kpis--cmd { grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; }
  #totals .kpis--cmd > .tile:last-child { grid-column: auto; }
  #totals .kpis--cmd > .tile:nth-child(6n+1):last-child { grid-column: span 6; }
  #totals .kpis--cmd > .tile:nth-child(6n+2):last-child { grid-column: span 5; }
  #totals .kpis--cmd > .tile:nth-child(6n+3):last-child { grid-column: span 4; }
  #totals .kpis--cmd > .tile:nth-child(6n+4):last-child { grid-column: span 3; }
  #totals .kpis--cmd > .tile:nth-child(6n+5):last-child { grid-column: span 2; }
  /* A six column tile is too narrow to promise the revenue figure and the
     MRR/ARR toggle one line: "$0" fits, the skeleton and "$12,345" wrap,
     and the first tile row moved 24px on hydration. The toggle always sits
     under the figure, so the height never depends on the data. */
  #totals .tile__value--rev { flex-direction: column; align-items: flex-start; }
}

/* ── 3. Large screen scale ───────────────────────────────────────────── */
/* A 40 inch monitor or a TV at 3840x2160 with no OS scaling gets the
   desktop layout scaled up, so text reads from a distance: 16px body text
   becomes 36px (0.94% of the width) at 4K. Screens that already scale
   (a Mac at 1920 "looks like") never reach these widths in CSS px.
   Zoom applies per view, not on <html>: inside a zoomed box vh and vw
   are zoomed too, so the body and the fixed tooltip stay unzoomed.
   #database keeps 1x: its schema canvas has its own pan and zoom. */
:root { --pulse-zoom: 1; }
@media (min-width: 2400px) { :root { --pulse-zoom: 1.25; } }
@media (min-width: 2880px) { :root { --pulse-zoom: 1.5; } }
@media (min-width: 3360px) { :root { --pulse-zoom: 1.875; } }
@media (min-width: 3600px) { :root { --pulse-zoom: 2.25; } }
@media (min-width: 2400px) {
  .app:not(#database), body > dialog.pulse-nav-dialog { zoom: var(--pulse-zoom); }
  /* Viewport units inside a zoomed box are zoomed as well: divide them back. */
  .app dialog { max-height: calc(92dvh / var(--pulse-zoom)); }
  body > dialog.pulse-nav-dialog { max-height: calc(92dvh / var(--pulse-zoom)); }
  .pulse-project-list { max-height: calc(50dvh / var(--pulse-zoom)); }
  .ai-conversation-layout { min-height: calc(66dvh / var(--pulse-zoom)); }
}