/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE 05 · CALL HISTORY                                             26 Aug 2026
   "The second density."
   ═══════════════════════════════════════════════════════════════════════════════
   The plate's held verdicts:

     · "Twenty-two rows at a 32px pitch, on the same ground and the same 28px page
       padding as every other screen."           → .p5-row height + the page padding
     · "Nine columns whose right edges match their headers."
                                                 → one grid template, header and row
     · "The buyer's sentence survives into the dense mode — it is the rightmost
       column, not the first thing cut."         → .p5-said

   AND THE ONE IT FLAGGED AS STILL OPEN, answered rather than reproduced:

     · "The italic serif quote column is at the soft end of legible across twenty-two
       rows. It is the one place the type system is doing something decorative rather
       than load-bearing."

       The plate is right, and the fix is narrower than dropping the serif. Plate 07's
       rule is that the serif IS the sentence being cited — that is meaning, and it
       stays. Nothing in the sheet asks for italic. Italic serif at 13px works for one
       prominent quote in a drawer at 27px; across twenty-two 32px rows it is the
       thing a reader's eye slides off. So: serif, roman, at the row ink rather than
       metadata grey. Still unmistakably a citation, and legible at the pitch the
       plate is proud of.

   ONE GRID TEMPLATE, declared once and shared by the header and every row. Nine
   columns whose right edges match is not a thing you achieve by matching two lists
   of widths; it is a thing you achieve by having one list.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.p5-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
           box-shadow:var(--plane-card); overflow:hidden; }

/* ── THE FILTER BAR ─────────────────────────────────────────────────────────*/
.p5-filters { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
              padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); }
.p5-filter-right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-3);
                   font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
                   font-variant-numeric:tabular-nums; }
.p5-sel { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink);
          background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
          padding:7px 10px; cursor:pointer; }
.p5-sel:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* A removable filter is a chip with an affordance, not a label. */
.p5-chip { display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--face-ui);
           font-size:var(--fs-row); font-weight:600; color:var(--accent);
           background:var(--accent-weak); border:1px solid var(--accent); border-radius:var(--r-control);
           padding:6px 8px 6px 10px; }
.p5-chip button { border:0; background:none; color:var(--accent); cursor:pointer; line-height:1;
                  font-size:var(--fs-row); padding:0 2px; }
.p5-chip button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── THE TABLE ──────────────────────────────────────────────────────────────
   EIGHT columns, not the plate's nine. LENGTH is not drawn, because no call
   duration is stored anywhere in the data model — see the module for the refusal.
   The template lives here once; the header and the rows both use it. */
.p5-head, .p5-row {
  display:grid;
  grid-template-columns:
    58px            /* date   */
    50px            /* time   */
    minmax(120px,1.4fr) /* company */
    minmax(96px,1fr)    /* rep     */
    minmax(96px,1fr)    /* call    */
    52px            /* score  */
    120px           /* state  */
    minmax(0,2.2fr);/* what the buyer said */
  gap:var(--sp-3);
  align-items:center;
  padding:0 var(--sp-5);
}
.p5-head { height:34px; background:var(--band); border-bottom:1px solid var(--line);
           font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
           text-transform:uppercase; color:var(--ink-3); }
/* THE 32px PITCH the plate is proud of. Fixed, not min: a row that grows on a long
   sentence would break the density the whole screen is arguing for, so the sentence
   truncates instead and the row opens to the call that has all of it. */
.p5-row { height:32px; width:100%; text-align:left; border:0; background:none; cursor:pointer;
          border-bottom:1px solid var(--line); box-shadow:inset 3px 0 0 transparent;
          font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2);
          transition:background var(--micro) var(--micro-ease); }
.p5-row:last-of-type { border-bottom:0; }
.p5-row:hover { background:var(--row-hover); }
.p5-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.p5-row.is-current { background:var(--accent-weak); box-shadow:inset 3px 0 0 var(--accent); }
.p5-head > span, .p5-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p5-date, .p5-time { color:var(--ink-3); font-variant-numeric:tabular-nums; }
.p5-co { color:var(--ink); font-weight:600; }
.p5-score { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* THE ANSWER TO THE PLATE'S OPEN ITEM. Serif because it is a citation — that is
   plate 07's rule and it carries meaning. Roman rather than italic, and at the row's
   own ink rather than metadata grey, because twenty-two rows of 13px italic serif is
   where the type system stopped being load-bearing and started being decorative. */
.p5-said { font-family:var(--face-serif); font-size:var(--fs-row); line-height:var(--lh-row);
           color:var(--ink-2); }

.p5-foot { display:flex; align-items:center; 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; }
.p5-pager { display:inline-flex; align-items:center; gap:var(--sp-2); }
.p5-pager button { font-family:var(--face-ui); font-size:var(--fs-row); line-height:1;
                   width:26px; height:26px; border:1px solid var(--line); border-radius:var(--r-control);
                   background:var(--surface); color:var(--ink-2); cursor:pointer; }
.p5-pager button:hover:not([disabled]) { background:var(--row-hover); border-color:var(--ink-3); }
.p5-pager button[disabled] { opacity:.4; cursor:default; }
.p5-pager button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.p5-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); }
.p5-btn:hover { background:var(--row-hover); border-color:var(--ink-3); }
.p5-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.p5-btn.is-primary { background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
.p5-btn.is-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

/* ── PLATE 08 ───────────────────────────────────────────────────────────────
   "A skeleton that keeps the final column geometry, so nothing shifts on load."
   Static ink, never a shimmer — plate 09: "the skeleton is not a shimmer. It is the
   real table with grey where the words will be." */
.p5-skel-bar { height:8px; border-radius:var(--r-pill); background:var(--track); }
.p5-empty { padding:var(--sp-8) var(--sp-5); text-align:center; }
.p5-empty-t { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600; color:var(--ink);
              margin:0; }
.p5-empty-b { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
              color:var(--ink-2); margin:var(--sp-2) auto 0; max-width:52ch; }
.p5-notset { color:var(--ink-3); }