/* ═══════════════════════════════════════════════════════════════════════════════
   COACH · THE MANAGER'S VIEW                                          26 Aug 2026
   ═══════════════════════════════════════════════════════════════════════════════
   THERE IS NO ARTBOARD FOR THIS SCREEN. The eleven plates cover Pipeline, the
   evidence drawer, the rep's week, the deal record, call history, forecast, the
   system, ugly data, motion, and two variants of Pipeline. A manager's coach home
   is not among them, so plate 07 is the spec — which is the standing instruction
   anyway: "build from this sheet, not from the screens".

   What that means in practice: no new type sizes, no new colours, no new radii, no
   control that does not already exist. The composition is 7/5, the cards are the
   card object, the state marks are the four words, and the two faces keep their
   jobs. Where this screen needs something the sheet does not name, it does without.

   THE ONE IDEA THE SCREEN IS BUILT ON: each rep card IS that rep's own screen. The
   mirror rule is the product's spine, and this is the surface where it is provable
   rather than promised — so the rep's lever, the rep's quote and the rep's next
   moves render here as the same objects, and each card says so out loud.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.cm-top { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.cm-title { font-family:var(--face-ui); font-size:var(--fs-page); line-height:var(--lh-page);
            font-weight:600; color:var(--ink); }
.cm-sub { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-3);
          font-variant-numeric:tabular-nums; }
.cm-top-right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

.cm-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
           box-shadow:var(--plane-card); min-width:0; overflow:hidden; }
.cm-pad { padding:var(--sp-5); }
.cm-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
           flex-wrap:wrap; margin-bottom:var(--sp-3); }
.cm-h { font-family:var(--face-ui); font-size:var(--fs-card); line-height:var(--lh-card);
        font-weight:600; color:var(--ink); margin:0; }
.cm-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 MEETING LINE ──────────────────────────────────────────────────────────
   One thing to raise with the whole team, with the measurement behind it. It takes
   the NOT-AGREED tone when a dimension has slipped, and this is the one judgement
   worth stating: a coverage drop is not a contradiction, it is a gap that opened. */
.cm-flag { border-left:3px solid var(--not-agreed); }
.cm-flag-dim { font-family:var(--face-serif); font-size:var(--fs-quote); line-height:var(--lh-quote);
               color:var(--ink); margin:0; text-transform:capitalize; }
.cm-flag-move { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600;
                color:var(--not-agreed); font-variant-numeric:tabular-nums; margin-top:var(--sp-2); }
.cm-flag-def { 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:60ch; }

/* ── A REP CARD ────────────────────────────────────────────────────────────────
   The name, what changed since last week, then that rep's own lever and their own
   next moves. The mirror line is not a footnote: it is the claim the whole product
   rests on, so it sits directly under the name where it cannot be missed. */
.cm-rep-head { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.cm-rep-name { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600; color:var(--ink); }
.cm-mirror { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
             color:var(--ink-3); margin:3px 0 var(--sp-4); }
.cm-lever { font-family:var(--face-serif); font-size:var(--fs-quote); line-height:var(--lh-quote);
            color:var(--ink); margin:0 0 var(--sp-3); }
.cm-fix { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
          color:var(--ink); margin:0; }
.cm-fix b { font-weight:600; }

/* THE MOVES. Each is a deal with a sentence and a value. The mode matters and is
   drawn: a rep's move is INFORMATION to their manager — something to know about,
   not an instruction to carry out — and the payload distinguishes the two, so the
   screen does too rather than flattening them into one list of tasks. */
.cm-moves { margin-top:var(--sp-4); border-top:1px solid var(--line); }
.cm-move { display:grid; grid-template-columns:minmax(120px,1fr) 76px minmax(0,2.4fr) auto;
           gap:var(--sp-3); align-items:baseline; width:100%; text-align:left;
           padding:var(--sp-3) 0; border:0; border-bottom:1px solid var(--line);
           background:none; cursor:pointer; transition:background var(--micro) var(--micro-ease); }
.cm-move:last-child { border-bottom:0; }
.cm-move:hover { background:var(--row-hover); }
.cm-move:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.cm-move > span { min-width:0; }
.cm-move-co { 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; }
.cm-move-val { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
               font-variant-numeric:tabular-nums; }
.cm-move-txt { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
               color:var(--ink-2); }
.cm-chev { color:var(--ink-3); }
.cm-mode { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
           text-transform:uppercase; color:var(--ink-3); }

/* ── COVERAGE ──────────────────────────────────────────────────────────────────
   A dimension, its coverage now, and the movement. The delta takes a tone only
   where it is a real move; zero is grey, because a colour on "no change" teaches a
   reader that the colours mean nothing. */
.cm-cov-row { display:grid; grid-template-columns:minmax(0,1fr) 56px 64px; gap:var(--sp-3);
              align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line);
              font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2); }
.cm-cov-row:last-child { border-bottom:0; }
.cm-cov-dim { color:var(--ink); font-weight:600; text-transform:capitalize; }
.cm-cov-pct { font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; text-align:right; }
.cm-cov-delta { font-variant-numeric:tabular-nums; text-align:right; color:var(--ink-3); }
.cm-cov-delta.is-down { color:var(--not-agreed); font-weight:600; }
.cm-cov-delta.is-up { color:var(--agreed); font-weight:600; }
.cm-cov-note { 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; }

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