/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE 02 · EVIDENCE DRAWER                                          26 Aug 2026
   "The screen the whole design exists to deliver."
   ═══════════════════════════════════════════════════════════════════════════════
   Every figure that claims something opens to this: the deals inside it → the call →
   the buyer's sentence → why this counts as agreed, with its honest caution.

   THE THREE THINGS THE PLATE SAYS HOLD, and where each lives below:
     · "Nothing is clipped. The transcript FADES under the action bar rather than
       cutting mid-line."                          → .p2-script + .p2-fade
     · "The left pane states what the figure EXCLUDES as well as what it contains."
                                                   → .p2-excluded
     · "The drawer lands on a column boundary and clears the topbar control it used
       to slice in half."                          → .p2-panel width + top offset

   MOTION IS PLATE 09 AND ONLY PLATE 09: the drawer travels 24px, not 700. It fades
   in place rather than sliding in from off-screen, "because the thing it explains is
   directly behind it and the eye must not be asked to follow anything across the
   page." Enter 180ms, exit 120ms, and only opacity and transform ever animate.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* THE SCRIM — 34%, and the plate flags this as a live argument: "The scrim is 34%
   on purpose, so the number you clicked stays visible behind it. Two reviewers
   objected in opposite directions." Kept at 34 because the drawer's whole job is to
   explain the figure behind it, and a scrim that hides the figure defeats it. */
.p2-scrim { position:fixed; inset:0; z-index:1000; background:rgba(11,18,32,.34);
            opacity:0; transition:opacity var(--enter) var(--enter-ease); }
.p2-scrim.is-open { opacity:1; }
.p2-scrim.is-closing { opacity:0; transition-duration:var(--exit); transition-timing-function:var(--exit-ease); }

/* THE DRAWER. Lands on a column boundary (the 5-column evidence width plus its own
   padding) and starts below the topbar rather than over it. */
.p2-panel { position:fixed; z-index:1001; top:76px; right:28px; bottom:28px;
            width:min(1060px, calc(100vw - 56px));
            background:var(--surface); border:1px solid var(--line);
            border-radius:var(--r-card); box-shadow:var(--plane-drawer);
            display:flex; flex-direction:column; overflow:hidden;
            opacity:0; transform:translateY(var(--travel));
            transition:opacity var(--enter) var(--enter-ease), transform var(--enter) var(--enter-ease); }
.p2-panel.is-open { opacity:1; transform:translateY(0); }
.p2-panel.is-closing { opacity:0; transform:translateY(var(--travel));
                       transition-duration:var(--exit); transition-timing-function:var(--exit-ease); }

/* HEAD — the figure it is explaining, restated so the drawer is self-contained. */
.p2-head { padding:var(--sp-6) var(--sp-6) var(--sp-4); border-bottom:1px solid var(--line); position:relative; }
.p2-eyebrow { 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 var(--sp-2); }
.p2-figure-row { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.p2-figure { font-family:var(--face-serif); font-size:var(--fs-headline); line-height:var(--lh-headline);
             color:var(--ink); font-variant-numeric:tabular-nums; }
.p2-head-sub { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
               margin:var(--sp-2) 0 0; font-variant-numeric:tabular-nums; }
.p2-close { position:absolute; top:var(--sp-4); right:var(--sp-4);
            width:30px; height:30px; display:grid; place-items:center;
            background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
            color:var(--ink-2); cursor:pointer; font-size:var(--fs-row); line-height:1;
            transition:background var(--micro) var(--micro-ease), border-color var(--micro) var(--micro-ease); }
.p2-close:hover { background:var(--row-hover); border-color:var(--ink-3); }

/* THE TWO PANES. Left is the list, right is the evidence. */
.p2-body { display:grid; grid-template-columns:355px minmax(0,1fr); flex:1; min-height:0; }
@media (max-width:900px){ .p2-body { grid-template-columns:minmax(0,1fr); } .p2-left { display:none; } }
.p2-left { border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.p2-right { display:flex; flex-direction:column; min-height:0; position:relative; }

/* LEFT · the deals inside the figure. */
.p2-list { overflow-y:auto; flex:1; min-height:0; padding:var(--sp-4) var(--sp-4) 0; }
.p2-list-title { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600; color:var(--ink);
                 margin:0 0 var(--sp-3); }
.p2-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--sp-2); align-items:center;
           width:100%; text-align:left; padding:var(--sp-3); border:0; background:none; cursor:pointer;
           border-radius:var(--r-control); box-shadow:inset 2px 0 0 transparent;
           transition:background var(--micro) var(--micro-ease); }
.p2-item:hover { background:var(--row-hover); }
.p2-item.is-current { background:var(--accent-weak); box-shadow:inset 2px 0 0 var(--accent); }
.p2-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.p2-item-name { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p2-item-meta { grid-column:1; font-family:var(--face-ui); font-size:var(--fs-eyebrow);
                letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-3); }
.p2-item-val { font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
               font-variant-numeric:tabular-nums; grid-row:1; }
.p2-chev { color:var(--ink-3); grid-row:1; }

/* "NOT IN THIS FIGURE" — the plate's own note: "The left pane states what the figure
   EXCLUDES as well as what it contains — €376K, itemised." A figure that only shows
   what it contains is a figure you cannot audit. */
.p2-excluded { border-top:1px solid var(--line); margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-4) 0; }
.p2-ex-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-2);
             align-items:center; padding:5px 0; font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2); }
.p2-ex-row .p2-ex-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p2-ex-row .p2-ex-val { font-variant-numeric:tabular-nums; color:var(--ink-2); }
/* ONLY THE MARK TAKES THE STATE'S TONE. The name and the value stay in the row's ink,
   because five coloured rows in a secondary pane is a shout, and the pane is a reference
   list rather than the figure itself. Toning the mark alone keeps the one thing a reader
   scans this list FOR — is anything in here contradicted? — legible at a glance without
   turning the list into a traffic light. Shape still carries it in greyscale. */
.p2-ex-row.is-agreed       .mk { color:var(--agreed); }
.p2-ex-row.is-not-agreed   .mk { color:var(--not-agreed); }
.p2-ex-row.is-contradicted .mk { color:var(--contradicted); }
.p2-ex-row.is-not-asked    .mk { color:var(--not-asked); }

/* THE PINNED TOTAL. The plate flags ~140px of air above it as an open question; it is
   pinned to the pane's foot on purpose — the reconciliation should not scroll away
   from the list it reconciles. */
.p2-total { border-top:1px solid var(--line); padding:var(--sp-4); background:var(--band); }
.p2-total-bar { display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden;
                background:var(--track); margin:var(--sp-2) 0 4px; }
.p2-total-row { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3);
                font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600; color:var(--ink);
                font-variant-numeric:tabular-nums; margin-top:var(--sp-3); }
.p2-total-note { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); margin-top:4px; }

/* RIGHT · the evidence. */
.p2-ev-head { padding:var(--sp-5) var(--sp-6) var(--sp-4); border-bottom:1px solid var(--line);
              display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.p2-ev-title { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600; color:var(--ink); margin:0; }
.p2-ev-meta { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); margin:3px 0 0;
              font-variant-numeric:tabular-nums; }

/* THE SCROLLING EVIDENCE. Its foot carries padding equal to the action bar's height so
   the last line can never sit under it — "nothing is clipped".

   SHORT EVIDENCE IS CENTRED, NOT TOP-ALIGNED. A deal whose sentence is on file without
   its transcript leaves roughly 240px under the reasons block, and top-aligned that
   reads as a pane that failed to finish loading. Centring makes the same emptiness read
   as deliberate margin. Nothing is added to fill it: there is nothing more on file, and
   inventing a passage to square up a bottom edge is the one thing this drawer exists to
   never do.

   `safe center` is the whole trick. Plain `center` on a scroller pushes the top of an
   overflowing passage above the scroll origin, where it cannot be reached; `safe` falls
   back to start-alignment exactly when the content is taller than the pane. So one rule
   covers both: short evidence centres, a long transcript scrolls from its first line.
   The unprefixed `center` below it is the fallback for anything without `safe`, where
   erring toward centred beats erring toward a rule that does not parse. */
.p2-script { overflow-y:auto; flex:1; min-height:0; padding:var(--sp-5) var(--sp-6) 96px;
             display:flex; flex-direction:column;
             justify-content:center; justify-content:safe center; }
.p2-script-inner { flex:0 0 auto; width:100%; }

/* THE EXHIBIT STAMP — the same object as everywhere else in the product. */
.p2-stamp { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.p2-stamp-tab { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
                text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line);
                border-radius:var(--r-pill); padding:3px 8px; }
.p2-stamp-where { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
                  text-transform:uppercase; color:var(--ink-3); }

/* THE TRANSCRIPT — mono, "the passage as recorded". */
.p2-line { display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--sp-3); padding:3px 0;
           font-family:var(--face-mono); font-size:var(--fs-mono); line-height:var(--lh-mono); color:var(--ink-2); }
.p2-who { color:var(--ink-3); }
/* THE CITED LINE — serif, because "the serif is the sentence being cited" while the
   mono is "the passage as recorded". The two faces carry the distinction. */
.p2-line.is-cited .p2-said { font-family:var(--face-serif); font-style:italic; font-size:var(--fs-row);
                             color:var(--ink); background:var(--accent-weak);
                             padding:3px 8px; border-radius:var(--r-control); display:inline-block; }
/* The last line before the fold is dimmed rather than cut, so the reader can see the
   passage continues. */
.p2-line.is-tail { color:var(--ink-3); opacity:.55; }

/* THE SENTENCE WITHOUT ITS SURROUNDINGS. Same serif-is-the-citation rule as .is-cited
   above — this IS that line, just with no mono passage to sit inside. It is set larger
   and given its own rule, because with nothing around it the quote is the whole pane
   and reads as an exhibit rather than a highlight. The note beneath states what is
   missing in the drawer's own voice; it is deliberately not styled as a warning, since
   an absent transcript is a fact about the recording, not a fault in the claim. */
.p2-solo { padding:var(--sp-2) 0 var(--sp-3); }
.p2-solo-quote { margin:0; font-family:var(--face-serif); font-style:italic;
                 font-size:var(--fs-card); line-height:var(--lh-card); color:var(--ink);
                 border-left:2px solid var(--accent); padding:var(--sp-2) 0 var(--sp-2) var(--sp-4); }
.p2-solo-note { margin:var(--sp-3) 0 0; font-family:var(--face-ui); font-size:var(--fs-meta);
                line-height:var(--lh-meta); color:var(--ink-3); max-width:56ch; }

/* WHY THIS COUNTS — with its honest caution. The caution is NOT styled as an error:
   it is a limit on the claim, and a product that colours its own caveats red teaches
   the reader to skip them. */
.p2-why { margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.p2-why-title { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600; color:var(--ink);
                margin:0 0 var(--sp-3); }
.p2-reason { display:grid; grid-template-columns:18px minmax(0,1fr); gap:var(--sp-2); align-items:start;
             padding:5px 0; font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2); }
.p2-reason .p2-tick { color:var(--agreed); text-align:center; }
.p2-reason.is-caution .p2-tick { color:var(--not-agreed); font-weight:700; }
.p2-reason.is-caution { color:var(--ink-2); }

/* ALSO ESTABLISHED — the other states on this deal, so the drawer answers "and what
   else do we know" without a second trip. */
.p2-also { margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.p2-also-row { display:grid; grid-template-columns:auto 120px minmax(0,1fr) auto; gap:var(--sp-3);
               align-items:baseline; padding:var(--sp-2) 0;
               font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2); }
.p2-also-field { color:var(--ink); font-weight:600; }
.p2-also-quote { font-family:var(--face-serif); font-style:italic; color:var(--ink-2);
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p2-also-when { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
                font-variant-numeric:tabular-nums; }

/* THE ACTION BAR. Sits over the transcript, which is why the transcript's foot has
   96px of padding and a fade above it — "the transcript fades under the action bar
   rather than cutting mid-line". */
.p2-actions { position:absolute; left:0; right:0; bottom:0; z-index:2;
              display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
              padding:var(--sp-4) var(--sp-6); background:var(--surface); border-top:1px solid var(--line); }
.p2-fade { position:absolute; left:0; right:0; bottom:0; height:150px; pointer-events:none; z-index:1;
           background:linear-gradient(to bottom, rgba(255,255,255,0), var(--surface) 62%); }
.p2-pager { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2);
            font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.p2-pager button { width:26px; height:26px; display:grid; place-items:center; cursor:pointer;
                   background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
                   color:var(--ink-2); transition:background var(--micro) var(--micro-ease); }
.p2-pager button:hover:not(:disabled) { background:var(--row-hover); }
.p2-pager button:disabled { opacity:.4; cursor:default; }

/* Buttons — plate 07's control spec: 28px high, 5px radius, one focus ring. */
.p2-btn { height:28px; padding:0 12px; border-radius:var(--r-control); cursor:pointer;
          font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600;
          border:1px solid var(--accent); background:var(--surface); color:var(--accent);
          transition:background var(--micro) var(--micro-ease); }
.p2-btn.is-primary { background:var(--accent); color:#FFFFFF; }
.p2-btn:hover { background:var(--accent-weak); }
.p2-btn.is-primary:hover { background:var(--accent); filter:brightness(1.08); }
.p2-btn:focus-visible, .p2-close:focus-visible, .p2-pager button:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }

/* PLATE 08 · the drawer's own ugly data. A figure can be opened on a deal whose call
   has no captured passage — that is a real state and it gets a sentence, not a blank. */
.p2-none { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2);
           border:1px dashed var(--line); border-radius:var(--r-card); padding:var(--sp-5); }