/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE 03 · THE REP'S WEEK                                           26 Aug 2026
   "The seat that scored 3/10 in the original review."
   ═══════════════════════════════════════════════════════════════════════════════
   The plate's held verdicts, and where each lives:

     · "The remedy is a full-bleed band on the card spine, not a nested box with its
       own indent."                                     → .p3-remedy
     · "One call to action in the table, on the row that matters. The rest are
       chevrons."                                       → .p3-deal-row + .is-focus
     · "The trajectory chart makes its own argument."    → .p3-chart

   AND THE ONE IT FLAGGED AS STILL OPEN:

     · "'YOUR ONE LEVER THIS WEEK' is still a tracked-caps eyebrow where every other
       card on every other screen carries a 16px title. That edit did not land."
       It lands here, the same way it landed on plate 04: the string is unchanged —
       it comes from the tone layer, applyCoachTone's hero_label — and only the
       treatment moves onto the scale every other card uses.

   THE SPLIT IS 7/5, plate 07's only split, as a ratio rather than a width.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

/* ── THE TOP LINE ──────────────────────────────────────────────────────────── */
.p3-top { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.p3-week { font-family:var(--face-ui); font-size:var(--fs-page); line-height:var(--lh-page);
           font-weight:600; color:var(--ink); }
.p3-week-sub { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-3);
               font-variant-numeric:tabular-nums; }
.p3-top-right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.p3-tone-label { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); }

/* THE SEGMENTED CONTROL. One control, three states, and the selected one is a raised
   surface on a recessed track rather than a fill — plate 07 keeps the accent for the
   primary action, and a three-way preference is not one. */
.p3-seg { display:inline-flex; background:var(--recessed); border:1px solid var(--line);
          border-radius:var(--r-control); padding:2px; gap:2px; }
.p3-seg button { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:500; line-height:1;
                 padding:6px 12px; border:0; border-radius:3px; background:none; color:var(--ink-3);
                 cursor:pointer; transition:color var(--micro) var(--micro-ease),
                 background var(--micro) var(--micro-ease); }
.p3-seg button:hover { color:var(--ink); }
.p3-seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600;
                                      box-shadow:var(--plane-card); }
.p3-seg button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ── CARDS ─────────────────────────────────────────────────────────────────── */
.p3-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
           box-shadow:var(--plane-card); min-width:0; overflow:hidden; }
.p3-pad { padding:var(--sp-5); }
.p3-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
           flex-wrap:wrap; margin-bottom:var(--sp-3); }
/* THE EDIT THAT DID NOT LAND, LANDING. 16px title, same object as every other card. */
.p3-title { font-family:var(--face-ui); font-size:var(--fs-card); line-height:var(--lh-card);
            font-weight:600; color:var(--ink); margin:0; }
.p3-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 LEVER ─────────────────────────────────────────────────────────────── */
/* The gap is the screen's headline: one behaviour, in the serif, stated as a fact
   rather than as advice. The advice is the band at the foot. */
.p3-gap { font-family:var(--face-serif); font-size:var(--fs-headline); line-height:var(--lh-headline);
          color:var(--ink); margin:0 0 var(--sp-4); text-wrap:balance; }
.p3-lever-body { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:var(--sp-5); align-items:start; }
@media (max-width:820px){ .p3-lever-body { grid-template-columns:minmax(0,1fr); } }
/* THE COST COLUMN. Two figures, and the rule between them is the only rule in the
   card — how often it happens, and what it is live on right now. */
.p3-cost { border-left:1px solid var(--line); padding-left:var(--sp-4); }
.p3-cost-n { font-family:var(--face-serif); font-size:var(--fs-quote); line-height:1.1; color:var(--ink);
             font-variant-numeric:tabular-nums; }
.p3-cost-n small { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:400; color:var(--ink-3); }
.p3-cost-note { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
                color:var(--ink-3); margin:4px 0 0; }
.p3-cost-rule { border:0; border-top:1px solid var(--line); margin:var(--sp-4) 0; }
/* The money at stake takes NOT AGREED, never contradicted: this is a range the buyer
   was never asked for, not a figure anyone withdrew. */
.p3-cost-money { font-family:var(--face-serif); font-size:var(--fs-quote); line-height:1.1;
                 color:var(--not-agreed); font-variant-numeric:tabular-nums; }

/* THE REMEDY — a full-bleed band on the card spine. The plate is explicit that this
   is NOT "a nested box with its own indent": the advice runs the full width of the
   card, sitting on the recessed plane, so it reads as the card's floor rather than as
   a callout someone dropped inside it. Negative margins pull it back out through the
   card's own padding. */
.p3-remedy { background:var(--recessed); border-top:1px solid var(--line);
             margin:var(--sp-5) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
             padding:var(--sp-4) var(--sp-5); }
.p3-remedy-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
                  margin-bottom:var(--sp-2); }
.p3-remedy-label { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
                   text-transform:uppercase; color:var(--ink-3); }
.p3-remedy-text { font-family:var(--face-ui); font-size:var(--fs-card); line-height:var(--lh-card);
                  color:var(--ink); margin:0; max-width:62ch; }
.p3-remedy-acts { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }

/* ── CONTROLS ──────────────────────────────────────────────────────────────── */
.p3-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); }
.p3-btn:hover { background:var(--row-hover); border-color:var(--ink-3); }
.p3-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.p3-btn.is-primary { background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
.p3-btn.is-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.p3-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; }
.p3-link:hover { text-decoration:underline; }
.p3-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-pill); }

/* ── THE DEALS TABLE ───────────────────────────────────────────────────────── */
/* "One call to action in the table, on the row that matters. The rest are chevrons."
   The row that matters is the one the lever is live on — not the largest, not the
   first. That is what makes the CTA information rather than decoration. */
/* THE MOVE GETS THE ROOM. The first split gave the deal name 1.5fr and the move
   2.4fr, which at this column's real width wrapped "Send Mette the CFO one-pager
   anchoring the ROI before Thursday's pricing call" onto four lines beside a value
   column with space to spare. The move is the sentence the row exists to deliver;
   the name is two words. */
.p3-deals-head, .p3-deal-row { display:grid;
/* The name column has a FLOOR. At 1.1fr with no minimum, the ellipsis fix worked too
   well and cut "Blåvand Wind" to "Blåvand …" — truncation is for the 44-character
   name plate 08 draws, not for two ordinary words. 140px fits a normal company and
   still lets a long one truncate. */
  grid-template-columns:minmax(140px,1.4fr) 76px 104px minmax(0,2.4fr) 136px; gap:var(--sp-3);
  align-items:center; }
/* EVERY CELL IS ITS OWN OVERFLOW CONTEXT. Without this a grid item takes its content's
   min-content width as a floor, so "Blåvand Wind" pushed straight through the gap and
   sat against €128K with the ellipsis never firing — the name's own overflow:hidden is
   useless while the cell it lives in refuses to be narrower than the word. */
.p3-deal-row > span, .p3-deals-head > span { min-width:0; }
/* And the action never wraps: "Prepare the call" broke to "Prepa / call" inside its
   own button, which reads as a rendering fault rather than a tight column. */
.p3-deal-act .p3-btn { white-space:nowrap; }
@media (max-width:900px){
  .p3-deals-head { display:none; }
  .p3-deal-row { grid-template-columns:minmax(0,1fr); gap:var(--sp-2); }
}
.p3-deals-head { padding:0 var(--sp-5) var(--sp-2); font-family:var(--face-ui);
                 font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
                 text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); }
.p3-deal-row { width:100%; text-align:left; padding:var(--sp-4) var(--sp-5); border:0;
               background:none; cursor:pointer; border-bottom:1px solid var(--line);
               box-shadow:inset 3px 0 0 transparent;
               transition:background var(--micro) var(--micro-ease); }
.p3-deal-row:hover { background:var(--row-hover); }
.p3-deal-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* The focus row carries the same left rule the active nav item does — plate 08:
   "the same shape means the same thing in two places". */
.p3-deal-row.is-focus { box-shadow:inset 3px 0 0 var(--accent); }
/* BLOCK, or the truncation is inert. overflow:hidden and text-overflow do nothing on
   an inline box, so "Blåvand Wind" ran straight through the column gap and sat against
   €128K with the ellipsis never firing. The cell's min-width:0 was necessary and was
   not sufficient; both are needed and neither works alone. */
.p3-deal-name { display:block; font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600;
                color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p3-deal-sub { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); margin-top:2px;
               display:block; }
.p3-deal-val { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
               font-variant-numeric:tabular-nums; }
.p3-deal-move { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row); color:var(--ink); }
/* The buyer's words under the move, in the serif — the same rule as everywhere else:
   mono is the record, serif is the sentence being cited. */
.p3-deal-why { display:block; font-family:var(--face-serif); font-style:italic;
               font-size:var(--fs-row); line-height:var(--lh-row); color:var(--ink-2); margin-top:3px; }
.p3-deal-act { text-align:right; }
.p3-chev { color:var(--ink-3); }
.p3-deals-foot { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
                 flex-wrap:wrap; padding:var(--sp-4) var(--sp-5); background:var(--band);
                 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; }

/* ── THE TRAJECTORY CHART ──────────────────────────────────────────────────── */
.p3-score { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.p3-score-n { font-family:var(--face-serif); font-size:var(--fs-headline); line-height:1;
              color:var(--ink); font-variant-numeric:tabular-nums; }
.p3-score-n small { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:400; color:var(--ink-3); }
.p3-delta { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink-2);
            font-variant-numeric:tabular-nums; }
.p3-chart { display:block; width:100%; height:auto; overflow:visible; }
.p3-chart .ax { stroke:var(--line); stroke-width:1; }
.p3-chart .grid-label { font-family:var(--face-ui); font-size:9.5px; fill:var(--ink-3); }
.p3-chart .series { fill:none; stroke:var(--accent); stroke-width:2;
                    stroke-linejoin:round; stroke-linecap:round; }
/* A FLAT SERIES DRAWS FLAT AND DASHED. It is not a failure state and it is not hidden:
   a rep whose score has not moved in four weeks needs to see that, and a solid line
   through four identical points would imply a shape the numbers do not have. */
.p3-chart .series.is-flat { stroke-dasharray:4 3; }
.p3-chart .avg-line { stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; }
.p3-chart .avg-label { font-family:var(--face-ui); font-size:9.5px; fill:var(--ink-3); }
.p3-chart .end-dot { fill:var(--accent); }
.p3-chart .end-label { font-family:var(--face-ui); font-size:var(--fs-meta); font-weight:600; fill:var(--accent); }
.p3-chart-x { display:flex; justify-content:space-between; font-family:var(--face-ui);
              font-size:var(--fs-meta); color:var(--ink-3); margin-top:4px; }
.p3-thin { 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; }

/* ── THE MIRROR CARD ───────────────────────────────────────────────────────── */
/* The transparency promise as a visible object rather than a line of small print.
   It states the rule and then SHOWS the manager's screen, which is the only form of
   the claim a reader can check. */
.p3-mirror-title { display:flex; align-items:center; gap:var(--sp-2); }
.p3-mirror-body { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
                  color:var(--ink-2); margin:var(--sp-2) 0 0; max-width:56ch; }
.p3-mirror-screen { border-left:2px solid var(--line); padding-left:var(--sp-4); margin-top:var(--sp-4); }
.p3-mirror-who { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); }
.p3-mirror-lever { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
                   margin:3px 0 0; }
.p3-mirror-quote { font-family:var(--face-serif); font-style:italic; font-size:var(--fs-row);
                   line-height:var(--lh-row); color:var(--ink-3); margin:3px 0 0; }

/* ── PLATE 08 ──────────────────────────────────────────────────────────────── */
.p3-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; }
.p3-empty-act { margin-top:var(--sp-3); }
.p3-notset { color:var(--ink-3); }