/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE 01 · PIPELINE — "The CRO opens here"                          26 Aug 2026
   ═══════════════════════════════════════════════════════════════════════════════
   The plate's own note on what holds: "The hero is four things now — title, figure,
   chart, footer. One rule instead of four." That is the whole instruction. The card
   that used to be a stack of competing blocks is one object with four parts and a
   single hairline separating the claim from its footnote.

   One file per plate, rather than one growing stylesheet. Eight screens are being
   rebuilt one at a time, and a single file would make every screen's diff touch
   every other screen's rules — which is how a system becomes a pile again. Each
   plate's anatomy is separable, reviewable, and revertable on its own.

   Everything here consumes plate 07: the figure is Newsreader, the labels are Inter,
   the axis is JetBrains Mono, and no value below is a literal.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* THE 7/5 SPLIT — "the only split — content left, evidence right". */
.p1 { display:grid; grid-template-columns:minmax(0,var(--split-content)) minmax(0,var(--split-evidence));
      gap:var(--gutter); align-items:start; }
@media (max-width:1180px){ .p1 { grid-template-columns:minmax(0,1fr); } }
.p1-col { display:flex; flex-direction:column; gap:var(--gutter); min-width:0; }

/* THE CARD. One radius, one plane, one rule. */
.p1-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
           box-shadow:var(--plane-card); padding:var(--sp-6); min-width:0; }
.p1-card.is-primary { box-shadow:var(--plane-primary); }
.p1-card.is-recessed { background:var(--recessed); box-shadow:var(--plane-footnote); }

/* 1 · TITLE */
.p1-title { font-family:var(--face-ui); font-size:var(--fs-card); line-height:var(--lh-card);
            font-weight:600; color:var(--ink); margin:0; }
.p1-sub { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
          color:var(--ink-3); margin:2px 0 0; font-variant-numeric:tabular-nums; }

/* 2 · FIGURE — the one loud object. Newsreader, and the only 84px on the screen. */
.p1-figure-row { display:flex; align-items:baseline; gap:var(--sp-6); flex-wrap:wrap;
                 margin:var(--sp-4) 0 var(--sp-6); }
.p1-figure { font-family:var(--face-serif); font-size:var(--fs-figure); line-height:var(--lh-figure);
             color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.015em; }
.p1-figure-aside { display:flex; flex-direction:column; gap:3px; padding-bottom:6px; }
.p1-of { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2);
         font-variant-numeric:tabular-nums; }
.p1-of b { color:var(--ink); font-weight:600; }
.p1-delta { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2);
            font-variant-numeric:tabular-nums; }

/* 3 · THE HOUSE CHART — segmented bar, RULED TO SCALE.
   The plate's rule: "labelled in place where it fits, in the legend where it does
   not". A segment narrower than its own label prints nothing rather than a clipped
   number, and the legend carries the share instead — which is why the bar states
   money and the legend states percentages. */
.p1-bar { display:flex; height:34px; border-radius:var(--r-pill); overflow:hidden; background:var(--track); }
.p1-seg { display:flex; align-items:center; padding:0 10px; min-width:0; overflow:hidden;
          font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:#FFFFFF;
          font-variant-numeric:tabular-nums; white-space:nowrap; }
.p1-seg.s-agreed       { background:var(--agreed); }
.p1-seg.s-not-agreed   { background:var(--not-agreed); }
.p1-seg.s-contradicted { background:var(--contradicted); }
/* "not asked" is the only segment whose label would fail contrast on its own fill,
   so it carries ink rather than white. The one place the bar's label colour varies,
   and it varies because the measurement said so, not because it looked better. */
.p1-seg.s-not-asked    { background:var(--not-asked); color:var(--ink); }

/* THE AXIS. Mono, because it is a measurement and not a label. */
.p1-axis { display:flex; justify-content:space-between; margin-top:6px;
           font-family:var(--face-mono); font-size:var(--fs-stamp); color:var(--ink-3);
           font-variant-numeric:tabular-nums; }

/* THE LEGEND — the four marks, the four words, the four shares. */
.p1-legend { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-4); }
.p1-legend .st { gap:7px; }
.p1-pct { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600;
          color:var(--ink); font-variant-numeric:tabular-nums; }

/* 4 · FOOTER — one hairline, the definition on the left, the way in on the right. */
.p1-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
           margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--line);
           flex-wrap:wrap; }
.p1-def { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2); margin:0; }
/* THE RESIDUAL SENTENCE, between the bar and the definition line. Metadata grey, not
   amber: it is a fact ABOUT the figure rather than part of it, and the money it names
   is deliberately in none of the four segments above. The four state colours mean what
   a BUYER did; the distance between a CRM and a customer is not one of those things. */
.p1-residual { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
               color:var(--ink-3); margin:var(--sp-3) 0 0; max-width:72ch;
               font-variant-numeric:tabular-nums; }
.p1-open { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--accent);
           text-decoration:none; background:none; border:0; padding:0; cursor:pointer; }
.p1-open:hover { text-decoration:underline; }

/* THE TABLE — columns whose right edges match their headers. */
.p1-table { width:100%; border-collapse:collapse; font-family:var(--face-ui); font-size:var(--fs-row); }
.p1-table th { 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); white-space:nowrap; }
.p1-table th.num { text-align:right; }
.p1-table td { padding:var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom:1px solid var(--line-2);
               vertical-align:middle; color:var(--ink-2); }
.p1-table tr:last-child td { border-bottom:none; }
.p1-table .num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
                 color:var(--ink); white-space:nowrap; }
.p1-deal { font-weight:600; color:var(--ink); }
.p1-owner { color:var(--ink-3); font-size:var(--fs-meta); }
/* The buyer's sentence in the serif — "the serif is the sentence being cited". */
.p1-said { font-family:var(--face-serif); font-style:italic; font-size:var(--fs-row); color:var(--ink-2); }
.p1-when { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
           text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* "ROW, AT REST · AND UNDER THE CURSOR" — the only hover fill in the product, and an
   accent rule that APPEARS rather than a colour that changes, so the row does not
   move and nothing reflows under the cursor. */
.p1-row { cursor:pointer; }
.p1-row td:first-child { box-shadow:inset 2px 0 0 transparent; padding-left:10px; }
.p1-row:hover { background:var(--row-hover); }
.p1-row:hover td:first-child { box-shadow:inset 2px 0 0 var(--accent); }
.p1-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.p1-tfoot { display:flex; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-4);
            padding-top:var(--sp-3); border-top:1px solid var(--line);
            font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
            font-variant-numeric:tabular-nums; }

/* COMPARISON BARS — "track = the whole, fill = the part, one scale down the column". */
.p1-owner-row { display:grid; grid-template-columns:1fr 120px auto; gap:var(--sp-3); align-items:center;
                padding:var(--sp-2) 0; font-family:var(--face-ui); font-size:var(--fs-row); }
.p1-owner-name { color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p1-owner-track { height:8px; background:var(--track); border-radius:var(--r-pill); overflow:hidden; }
.p1-owner-fill { height:100%; background:var(--agreed); border-radius:var(--r-pill); }
.p1-owner-val { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); font-weight:600; }
.p1-owner-val span { color:var(--ink-3); font-weight:400; }

/* REVIEW LIST — one row per deal that needs a person today. */
.p1-review { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
             padding:var(--sp-3) 0; border-bottom:1px solid var(--line-2); }
.p1-review:last-of-type { border-bottom:none; }
.p1-review-name { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink); }
.p1-review-why { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); margin-top:2px; }

/* ── PLATE 08 · WHEN THE DATA IS UGLY — shipped WITH the screen, not after ─────
   "An empty quarter is a sentence, not a mascot."

   THE SKELETON keeps the final column geometry, so nothing shifts on load. That is
   the whole point of it: a spinner tells you to wait, a skeleton tells you what is
   coming and then does not move when it arrives. */
/* CORRECTED 26 Aug 2026 against plate 09, which rules on this directly:
   "The skeleton is not a shimmer. It is the real table with grey where the words
    will be, so the only thing that changes is the ink."

   The first version of this shipped a moving gradient. That is a delight layer —
   it animates while nothing has changed, which breaks plate 09's second rule
   ("motion marks a change of STATE, never a change of data") and its own claim that
   the only loading state in the product does not move. A still block of the ink's
   own colour is both quieter and more honest: the geometry is already final, so when
   the data lands the only thing that changes is the ink. */
.p1-skel { background:var(--line-2); border-radius:var(--r-pill); height:11px; }
.p1-skel.tall { height:var(--fs-figure); border-radius:var(--r-control); }
.p1-skel.bar { height:34px; border-radius:var(--r-pill); }

/* EMPTY — a sentence and one action. No illustration, no cheerful noun. */
.p1-empty { border:1px dashed var(--line); border-radius:var(--r-card); padding:var(--sp-6);
            font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2); }
.p1-empty p { margin:0 0 var(--sp-3); }
.p1-empty .p1-open { font-size:var(--fs-row); }

/* A NAME THAT DOES NOT FIT truncates on a real ellipsis and keeps its owner line —
   the 44-character company name from plate 08. */
.p1-clip { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* A DEAD INTEGRATION states the heard number and the stored number side by side
   rather than picking one. Plate 08 is explicit that it must not choose. */
.p1-stale { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
            background:var(--recessed); border:1px solid var(--line); border-radius:var(--r-control);
            font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-2); margin-bottom:var(--gutter); }
.p1-stale b { color:var(--ink); font-weight:600; }