/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE 04 · DEAL RECORD                                              26 Aug 2026
   "The density test."
   ═══════════════════════════════════════════════════════════════════════════════
   Six cards on one screen without it becoming a wall. The plate's own verdicts,
   and where each lives below:

     · "The €220K / €176K gap leads, and the Exhibit sits directly beneath it on the
       recessed plane, so the correction and its proof read as one object."
                                                    → .p4-value + the exhibit inside it
     · "Write-back labels and values share one left edge; the ticks are ink, not
       green."                                      → .p4-write-row grid + .p4-tick
     · "The change log shows four entries against its stated '4 changes'."
                                                    → the count is the list's length

   AND THE TWO IT FLAGGED AS STILL OPEN, both answered here rather than reproduced:

     · "'VALUE THE CUSTOMER AGREED TO' carries the same stale eyebrow as plate 03.
       Two screens out of six still use the old idiom." Plate 03 states what the new
       idiom is: "every other card on every other screen carries a 16px title". So
       the eyebrow becomes a card title in the plate's own words, sentence-cased to
       match "What the calls established" and "Every edit, and who made it".
     · "~90px of dead air above the change-log footer." Chad's ruling on the same
       defect in plate 02 governs: centre the block, invent nothing to fill it. The
       change log's footer is pinned to the card's foot instead, because a footer
       that says "nothing here was written without a call behind it" is a statement
       about the whole list and belongs at its end, not floating after it.

   THE SPLIT IS 7/5 — plate 07's "the only split", 670/474, expressed as a ratio so
   it holds at every width rather than only at 1440.
   ═══════════════════════════════════════════════════════════════════════════════ */

.p4 { display:grid; grid-template-columns:minmax(0,670fr) minmax(0,474fr);
      gap:var(--sp-4); align-items:start; }
@media (max-width:1100px){ .p4 { grid-template-columns:minmax(0,1fr); } }
.p4-col { display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }

/* ── THE TOP LINE ────────────────────────────────────────────────────────────
   Breadcrumb, the deal, its state — then the two facts that are properties of the
   deal rather than of any call (owner, stage) and the one export. */
.p4-top { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
          margin-bottom:var(--sp-4); }
.p4-crumb { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--accent);
            background:none; border:0; padding:0; cursor:pointer; }
.p4-crumb:hover { text-decoration:underline; }
.p4-crumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-pill); }
.p4-sep { color:var(--ink-3); }
.p4-name { font-family:var(--face-ui); font-size:var(--fs-page); line-height:var(--lh-page);
           font-weight:600; color:var(--ink); }
.p4-top-right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

/* ── CARDS ───────────────────────────────────────────────────────────────────
   One card object for the whole screen. The plate's density comes from the rows
   inside them, never from six differently-shaped containers. */
.p4-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
           box-shadow:var(--plane-card); padding:var(--sp-5); min-width:0; }
.p4-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
           flex-wrap:wrap; margin-bottom:var(--sp-4); }
/* THE NEW IDIOM. 16px title, not a 9.5px tracked-caps eyebrow — the edit plate 03
   flagged as not having landed, landing here. */
.p4-title { font-family:var(--face-ui); font-size:var(--fs-card); line-height:var(--lh-card);
            font-weight:600; color:var(--ink); margin:0; }
.p4-head-meta { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
                color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ── THE VALUE CARD — the screen's argument ─────────────────────────────────
   The gap leads: what the customer agreed to, what the CRM holds, and the distance
   between them named in money. The two actions sit on the figure's line because
   they are the only decision this screen asks anyone to make. */
.p4-value-sub { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
                color:var(--ink-3); margin:2px 0 0; }
.p4-figure-row { display:flex; align-items:baseline; gap:var(--sp-5); flex-wrap:wrap;
                 margin:var(--sp-4) 0 var(--sp-5); }
/* THE HEADLINE SIZE, NOT THE HERO SIZE. Built at --fs-figure (84px) first, which is
   what plate 01's dashboard hero uses, and on this card it dwarfed everything and
   pushed the two actions onto a line of their own. Plate 07 separates the two on
   purpose: --fs-figure is "the hero figure", --fs-headline is "one headline per
   screen". The dashboard's €410K is the figure its page exists to state; this €220K
   is this screen's headline, on a card among six. Same scale, correct step on it. */
.p4-figure { font-family:var(--face-serif); font-size:var(--fs-headline); line-height:var(--lh-headline);
             color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.p4-figure-side { display:flex; flex-direction:column; gap:3px; min-width:0; }
.p4-entered { font-family:var(--face-ui); font-size:var(--fs-card); color:var(--ink-2);
              font-variant-numeric:tabular-nums; }
/* The gap sentence takes the NOT-AGREED tone, and this is the one judgement in the
   palette worth stating: the money is not contradicted — nobody withdrew anything —
   it is agreed on a call and not yet claimed in the CRM. Amber, not red. */
.p4-gap { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600;
          color:var(--not-agreed); font-variant-numeric:tabular-nums; }
.p4-actions { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

/* ── CONTROLS ────────────────────────────────────────────────────────────────
   One primary, one secondary, one select. Plate 07's control states, and nothing
   on this screen invents a fourth kind of button. */
.p4-btn { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; line-height:1;
          padding:9px 14px; border-radius:var(--r-control); border:1px solid var(--line);
          background:var(--surface); color:var(--ink); cursor:pointer;
          transition:background var(--micro) var(--micro-ease), border-color var(--micro) var(--micro-ease); }
.p4-btn:hover { background:var(--row-hover); border-color:var(--ink-3); }
.p4-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.p4-btn.is-primary { background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
.p4-btn.is-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.p4-btn.is-block { width:100%; padding:11px 14px; }
.p4-btn[disabled] { opacity:.5; cursor:default; }
.p4-btn[disabled]:hover { background:var(--surface); border-color:var(--line); }

/* ── THE DIMENSIONS TABLE ────────────────────────────────────────────────────
   Four columns whose right edges match their headers, per plate 05's rule for the
   dense mode. The state column is the four words and their marks — the same object
   the pipeline bar and the drawer use, so one glance reads the same everywhere. */
.p4-tbl { width:100%; border-collapse:collapse; }
.p4-tbl th { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
             text-transform:uppercase; color:var(--ink-3); font-weight:600; text-align:left;
             padding:0 var(--sp-3) var(--sp-2) 0; border-bottom:1px solid var(--line); }
.p4-tbl td { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
             color:var(--ink-2); padding:9px var(--sp-3) 9px 0; border-bottom:1px solid var(--line); }
.p4-tbl tr:last-child td { border-bottom:0; }
.p4-tbl .p4-dim { color:var(--ink); font-weight:600; white-space:nowrap; }
.p4-tbl .p4-said { color:var(--ink-2); }
.p4-tbl .p4-chev { text-align:right; color:var(--ink-3); width:1%; padding-right:0; }
.p4-row-btn { display:contents; }
tr.p4-tr { cursor:pointer; transition:background var(--micro) var(--micro-ease); }
tr.p4-tr:hover td { background:var(--row-hover); }
/* Plate 08: "Focus is a 2px navy ring on a white gap, never a browser outline."
   Selection uses the same left rule as the active nav item, so the same shape means
   the same thing in two places. */
tr.p4-tr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
tr.p4-tr.is-open td { background:var(--accent-weak); }
tr.p4-tr.is-open td:first-child { box-shadow:inset 2px 0 0 var(--accent); }

/* The receipt a dimension row opens to — an exhibit, in its own row, spanning the
   table so the evidence is not squeezed into one column's width. */
.p4-receipt-cell { padding:0 0 var(--sp-4) !important; border-bottom:1px solid var(--line) !important; }

/* ── THE CALL THREAD ─────────────────────────────────────────────────────────
   Date, what the call was, what it added, its score. Oldest first, because a deal
   is read forward. */
.p4-thread-row { display:grid; grid-template-columns:64px minmax(0,1fr) auto auto;
                 gap:var(--sp-3); align-items:baseline; width:100%; text-align:left;
                 padding:var(--sp-3) 0; border:0; background:none; cursor:pointer;
                 border-bottom:1px solid var(--line);
                 transition:background var(--micro) var(--micro-ease); }
.p4-thread-row:last-child { border-bottom:0; }
.p4-thread-row:hover { background:var(--row-hover); }
.p4-thread-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.p4-th-date { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
              font-variant-numeric:tabular-nums; white-space:nowrap; }
.p4-th-name { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink); }
/* BLOCK, not inline. As an inline span this ran straight on from the row's name —
   "ProposalProposal walkthrough with Ribe Foods" — which reads as a duplicated word
   rather than as a title above its summary. The two are different facts about the
   call and they get different lines. */
.p4-th-sub { display:block; font-family:var(--face-ui); font-size:var(--fs-meta);
             line-height:var(--lh-meta); color:var(--ink-3); margin-top:2px; }
.p4-th-score { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
               font-variant-numeric:tabular-nums; white-space:nowrap; }
.p4-th-chev { color:var(--ink-3); }

/* ── THE WRITE-BACK PANEL ────────────────────────────────────────────────────
   The plate's held note is a layout rule and it is load-bearing: "Write-back labels
   and values share one left edge; the ticks are ink, not green." A green tick would
   put a deal-state colour on something that is not a deal state — plate 07 forbids
   exactly that overload, and the tick means "this one is included", not "this is
   agreed". So the grid gives the tick its own narrow column and everything else
   starts on one edge. */
.p4-write-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--sp-3);
                align-items:start; padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.p4-write-row:last-of-type { border-bottom:0; }
.p4-tick { color:var(--ink-2); font-size:var(--fs-row); line-height:var(--lh-row); text-align:center; }
.p4-write-label { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
                  text-transform:uppercase; color:var(--ink-3); margin:0 0 3px; }
.p4-write-val { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
                color:var(--ink); font-variant-numeric:tabular-nums; }
.p4-was { color:var(--ink-3); text-decoration:line-through; }
.p4-arrow { color:var(--ink-3); margin:0 6px; }
.p4-now { font-weight:600; color:var(--ink); }
.p4-write-note { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
                 color:var(--ink-3); text-align:center; margin:var(--sp-3) 0 0; }

/* ── THE CHANGE LOG ──────────────────────────────────────────────────────────
   Date, then the change, then who made it. The footer is PINNED to the card's foot
   rather than following the list, which is the plate's "~90px of dead air" answered:
   the sentence is about the whole log, so it belongs at the log's end however long
   the log happens to be. */
.p4-log { display:flex; flex-direction:column; min-height:0; }
.p4-log-row { display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--sp-3);
              align-items:baseline; padding:5px 0; font-family:var(--face-ui);
              font-size:var(--fs-row); line-height:var(--lh-row); color:var(--ink-2); }
.p4-log-date { font-size:var(--fs-meta); color:var(--ink-3); font-variant-numeric:tabular-nums;
               white-space:nowrap; }
.p4-log-row b { color:var(--ink); font-weight:600; }
.p4-log-foot { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
               flex-wrap:wrap; margin-top:auto; padding-top:var(--sp-4);
               border-top:1px solid var(--line); }
.p4-log-claim { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
                color:var(--ink-3); margin:0; }
.p4-link { font-family:var(--face-ui); font-size:var(--fs-meta); font-weight:600; color:var(--accent);
           background:none; border:0; padding:0; cursor:pointer; }
.p4-link:hover { text-decoration:underline; }
.p4-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-pill); }

/* ── PLATE 08, SHIPPING WITH THE SCREEN ──────────────────────────────────────
   Every card's empty state is a sentence. "Empty is a sentence and one action,
   never an illustration and never a cheerful noun. It says what exists, what is
   missing, and what to do." */
.p4-empty { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
            color:var(--ink-2); margin:0; max-width:60ch; }
.p4-empty b { color:var(--ink); font-weight:600; }
.p4-empty-act { margin-top:var(--sp-3); }
/* "A missing value reads not set, never an em dash." */
.p4-notset { color:var(--ink-3); }

/* The stale-CRM banner, drawn by plate 08 and belonging on this screen more than
   any other: it shows the heard number and the stored number side by side rather
   than picking one. Amber ground, because a stale connection is not a contradiction. */
.p4-stale { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
            border:1px solid var(--line); border-left:3px solid var(--not-agreed);
            border-radius:var(--r-control); background:var(--band); margin-bottom:var(--sp-4); }
.p4-stale-body { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
                 color:var(--ink-2); min-width:0; }
.p4-stale-body b { color:var(--ink); font-weight:600; }