/* ══════════════════════════════════════════════════════════════════════════
   PANEL.CSS — the companion-panel layer · EBS PROJECT FORK
   Personal-project chrome (trevor.marketing × LEPUS silverpoint), light only.
   Load AFTER theme.css. The Compaytence original lives in the skill assets;
   this copy is deliberately de-branded — do not re-sync it from the skill.

   This file adds only what the four companion panels need that a normal
   document does not: the dock, swatch and specimen grids, the asset
   inventory, the font selector, and the copy diff. Every value here routes
   through a system.css token — there is not one hardcoded gray, one second
   hue, or one hand-rolled shadow in this file. If you need a new value,
   derive it from a token rather than picking one.

   Class prefix `p-` throughout, so nothing collides with system.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. THE DOCK ════════════════════════════════════════════════════════
   The bottom-right switcher. It is a floating element, not a card, so it is
   the one place `--shadow` is correct at rest (system.css reserves it for
   exactly this: popovers, dropdowns, sticky bars).

   SELF-CONTAINED, ALWAYS. The dock rides on the EBS sites, which have their
   own stylesheets and colliding variable names (D defines --paper-2; E and F
   a light --ink) — so every dock rule below uses hard values and consumes NO
   custom properties. Panel pages get their tokens from theme.css, but the
   dock stays hard-valued everywhere so it is identical on sites and panels.
   Do not "simplify" this to var()s: that shipped an invisible dock once
   (2026-08-18).   */

.p-dock{
  position:fixed; right:24px; bottom:24px; z-index:2147483000;
  display:flex; gap:6px; padding:6px; margin:0;
  background:rgba(251,250,247,.95); border:1px solid rgba(27,29,29,.16);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(27,29,29,.06), 0 12px 28px -16px rgba(27,29,29,.26);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  line-height:1.2; text-align:left; text-transform:none;
  transition:box-shadow .45s ease;
}
.p-dock:hover{
  box-shadow:0 2px 4px rgba(27,29,29,.08), 0 24px 48px -20px rgba(27,29,29,.34);
}

.p-dock a{
  display:flex; flex-direction:column; gap:2px;
  min-width:92px; min-height:44px;            /* 44px standalone-control min */
  padding:6px 12px; margin:0;
  border-radius:8px; border:1px solid transparent;
  text-decoration:none; color:#5e5a52;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.p-dock a:hover{ background:rgba(27,29,29,.06); color:#1b1d1d; }

/* The step numeral is the same figure device the rest of the system uses:
   a serif, in the blue, tabular. */
.p-dock .p-dock-n{
  font-family:'Fraunces', Georgia, serif; font-size:14px;
  font-variant-numeric:tabular-nums; line-height:1;
  color:#1b1d1d; font-weight:600;
}
.p-dock .p-dock-t{
  font-size:11px; font-weight:600; line-height:1.2;
  letter-spacing:.02em; white-space:nowrap;
}

/* Current panel. Tint fill + the mark, never a second hue. */
.p-dock a[aria-current="page"]{
  background:rgba(27,29,29,.06); color:#1b1d1d;
  border-color:rgba(27,29,29,.14);
}
.p-dock a[aria-current="page"] .p-dock-n{ color:#e4551f; }

/* Keyboard hint, revealed on dock hover/focus only so it never nags. */
.p-dock-k{
  position:absolute; right:12px; top:-30px;
  font-size:11px; color:#5e5a52;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.p-dock:hover .p-dock-k, .p-dock:focus-within .p-dock-k{ opacity:1; }

/* Narrow screens: drop the labels down, keep the numerals and a short tag. */
@media (max-width:720px){
  .p-dock{ right:12px; bottom:12px; gap:2px; }
  .p-dock a{ min-width:56px; padding:6px; align-items:center; }
  .p-dock .p-dock-t{ font-size:9px; letter-spacing:.04em; }
  .p-dock-k{ display:none; }
}
@media print{ .p-dock{ display:none; } }

/* Give the page room so the dock never covers the last line. */
.p-has-dock .foot{ margin-bottom:var(--s8); }

/* ═══ 2. SPECIMEN BLOCKS (System panel) ══════════════════════════════════ */

/* Swatches. Each one shows its token name, its hex, and its measured
   contrast — the readout is the point, not the color chip. */
.p-swatches{ display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
.p-swatch{
  border:var(--hair) solid rgba(var(--rule-c),.12); border-radius:var(--r-lg);
  overflow:hidden; background:var(--card);
}
.p-swatch-chip{ height:76px; display:block; }
.p-swatch-meta{ padding:var(--s2); display:flex; flex-direction:column; gap:2px; }
.p-swatch-name{ font-size:var(--t-xs); font-weight:600; color:var(--ink);
  letter-spacing:.02em; }
.p-swatch-hex{ font-family:var(--face-code); font-size:var(--t-xs);
  color:var(--graphite); }
.p-swatch-ratio{ font-family:var(--face-display); font-size:var(--t-sm);
  font-variant-numeric:tabular-nums; color:var(--fig-inline); }
.p-swatch-role{ font-size:var(--t-xs); color:var(--graphite); }

/* Type specimen rows. */
.p-spec{ border-top:var(--hair) solid rgba(var(--rule-c),.10);
  padding:var(--s4) 0; display:grid; gap:var(--s2);
  grid-template-columns:minmax(0,1fr) 200px; align-items:baseline; }
.p-spec:first-child{ border-top:0; }
.p-spec-sample{ color:var(--ink); }
.p-spec-facts{ display:flex; flex-direction:column; gap:2px;
  font-size:var(--t-xs); color:var(--graphite); text-align:right; }
.p-spec-facts b{ font-family:var(--face-display); font-size:var(--t-sm);
  font-variant-numeric:tabular-nums; color:var(--fig-inline); font-weight:400; }
@media (max-width:720px){
  .p-spec{ grid-template-columns:1fr; }
  .p-spec-facts{ text-align:left; }
}

/* Spacing ruler — the 30px baseline made visible. */
.p-ruler{ display:flex; flex-direction:column; gap:var(--s1); }
.p-ruler-row{ display:grid; grid-template-columns:64px 1fr 56px; gap:var(--s2);
  align-items:center; font-size:var(--t-xs); color:var(--graphite); }
.p-ruler-bar{ height:10px; border-radius:var(--r-xs);
  background:var(--mark-solid); opacity:.55; }
.p-ruler-row b{ font-family:var(--face-display); font-variant-numeric:tabular-nums;
  color:var(--fig-inline); font-weight:400; font-size:var(--t-sm); }

/* State matrix — rest / hover / focus / disabled, side by side. The states
   nobody screenshots are exactly the ones this panel exists to pin down. */
.p-states{ display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.p-state{ border:var(--hair) solid rgba(var(--rule-c),.12);
  border-radius:var(--r-lg); padding:var(--s3); background:var(--card);
  display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }
.p-state-l{ font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--graphite); }

/* ═══ 3. ASSET INVENTORY + MODEL SHEET (Graphics panel) ══════════════════ */

.p-assets{ display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.p-asset{ border:var(--hair) solid rgba(var(--rule-c),.12);
  border-radius:var(--r-lg); overflow:hidden; background:var(--card);
  display:flex; flex-direction:column;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease); }
.p-asset:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.p-asset-fig{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--wash); }
.p-asset-body{ padding:var(--s2) var(--s3) var(--s3);
  display:flex; flex-direction:column; gap:var(--s1); }
.p-asset-name{ font-size:var(--t-sm); font-weight:600; color:var(--ink);
  word-break:break-all; }
.p-asset-dl{ display:grid; grid-template-columns:auto 1fr; gap:2px var(--s2);
  font-size:var(--t-xs); margin:0; }
.p-asset-dl dt{ color:var(--graphite); }
.p-asset-dl dd{ margin:0; color:var(--ink-soft); }
.p-asset-dl dd.p-num{ font-family:var(--face-display);
  font-variant-numeric:tabular-nums; color:var(--fig-inline); }
.p-asset-prompt{ font-family:var(--face-code); font-size:var(--t-xs);
  color:var(--graphite); background:var(--wash); border-radius:var(--r-xs);
  padding:var(--s1) var(--s2); max-height:5.4em; overflow:auto; }

/* Model sheet — the character/illustration turnaround grid. */
.p-sheet{ display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.p-sheet figure{ margin:0; border:var(--hair) solid rgba(var(--rule-c),.12);
  border-radius:var(--r-lg); overflow:hidden; background:var(--card); }
.p-sheet img{ display:block; width:100%; aspect-ratio:1; object-fit:contain;
  background:var(--wash); }
.p-sheet figcaption{ padding:var(--s1) var(--s2); font-size:var(--t-xs);
  color:var(--graphite); text-align:center; }

/* ═══ 4. FONT SELECTOR (Graphics panel) ══════════════════════════════════
   Click a card and the whole preview re-renders in that pairing. The point
   is to judge a face in situ, so the preview block is real page furniture:
   a headline, a figure, and a paragraph of body — not "Aa".               */

.p-fonts{ display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); }
.p-font{
  text-align:left; cursor:pointer; font:inherit;
  border:var(--hair) solid rgba(var(--rule-c),.12); border-radius:var(--r-lg);
  background:var(--card); padding:var(--s3);
  display:flex; flex-direction:column; gap:var(--s1);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease),
             border-color .3s var(--ease);
}
.p-font:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.p-font[aria-pressed="true"]{ border-color:var(--mark);
  background:var(--mark-tint); }
.p-font-aa{ font-size:var(--t-xl); line-height:1.1; color:var(--ink); }
.p-font-name{ font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.p-font-pair{ font-size:var(--t-xs); color:var(--graphite); }
.p-font-why{ font-size:var(--t-xs); color:var(--ink-soft); }
.p-font-lic{ font-size:var(--t-xs); color:var(--graphite);
  display:flex; align-items:center; gap:var(--s1); }
.p-font-lic::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--good); flex:none; }
.p-font-lic[data-license="paid"]::before{ background:var(--risk); }
.p-font-lic[data-license="check"]::before{ background:var(--mark-solid); }

/* The recommendation. One per shortlist, and it must carry its reasoning —
   a recommendation with no argument is a coin flip wearing a badge. */
.p-font-badge{ align-self:flex-start; font-size:var(--t-xs); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--mark-deep); background:var(--mark-tint);
  border-radius:var(--r-xs); padding:2px var(--s1); }

.p-preview{ border:var(--hair) solid rgba(var(--rule-c),.12);
  border-radius:var(--r-lg); padding:var(--s5); background:var(--card);
  display:flex; flex-direction:column; gap:var(--s3); }
.p-preview h3{ font-family:var(--p-face-display,var(--face-display));
  font-size:var(--t-2xl); line-height:1.08; color:var(--ink); font-weight:400; }
.p-preview p,.p-preview .p-preview-ui{
  font-family:var(--p-face-text,var(--face-text)); }
.p-preview-fig{ font-family:var(--p-face-display,var(--face-display));
  font-size:var(--t-3xl); font-variant-numeric:tabular-nums; color:var(--fig);
  line-height:1; }

/* ═══ 5. THE COPY AUDIT (Copy panel) ═════════════════════════════════════ */

/* Verdict strip. The count is the headline number, so it is a figure. */
.p-verdict{ display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.p-verdict-cell{ display:flex; flex-direction:column; gap:2px; }
.p-verdict-fig{ font-family:var(--face-display); font-size:var(--t-3xl);
  font-variant-numeric:tabular-nums; color:var(--fig); line-height:1; }
.p-verdict-l{ font-size:var(--t-xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--graphite); }

/* One change = one card. Before struck through, after in the ink, and the
   reason underneath. The reason is mandatory: an edit you cannot justify is
   an opinion, and the point of this panel is to argue the edit. */
.p-diff{ display:flex; flex-direction:column; gap:var(--s3); }
.p-change{ border:var(--hair) solid rgba(var(--rule-c),.12);
  border-radius:var(--r-lg); background:var(--card); overflow:hidden;
  transition:box-shadow .45s var(--ease); }
.p-change:hover{ box-shadow:var(--shadow-lift); }
.p-change-h{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;
  padding:var(--s2) var(--s3);
  border-bottom:var(--hair) solid rgba(var(--rule-c),.10); }
.p-change-n{ font-family:var(--face-display); font-size:var(--t-sm);
  font-variant-numeric:tabular-nums; color:var(--fig-inline); }
.p-change-loc{ font-size:var(--t-xs); color:var(--graphite); }
.p-change-body{ padding:var(--s3); display:flex; flex-direction:column;
  gap:var(--s2); }

.p-was,.p-now{ display:grid; grid-template-columns:64px 1fr; gap:var(--s2);
  align-items:baseline; }
.p-was-l,.p-now-l{ font-size:var(--t-xs); letter-spacing:.06em;
  text-transform:uppercase; }
.p-was-l{ color:var(--risk); }
.p-now-l{ color:var(--good); }
.p-was q,.p-now q{ quotes:none; }
.p-was q{ color:var(--graphite); text-decoration:line-through;
  text-decoration-color:rgba(var(--rule-c),.35); }
.p-now q{ color:var(--ink); font-weight:500; }
.p-why{ font-size:var(--t-sm); color:var(--ink-soft);
  border-left:2px solid rgba(var(--rule-c),.16); padding-left:var(--s2); }

/* Tag chips naming which rule fired. Neutral by default; the two semantics
   are the only colored variants, same as system.css notes. */
.p-tag{ font-size:var(--t-xs); font-weight:600; letter-spacing:.03em;
  border-radius:var(--r-xs); padding:2px var(--s1);
  color:var(--ink-soft); background:var(--wash);
  border:var(--hair) solid rgba(var(--rule-c),.10); }
.p-tag[data-kind="slop"]{ color:var(--risk); }
.p-tag[data-kind="principle"]{ color:var(--mark-deep); background:var(--mark-tint); }

/* Principle scorecard. */
.p-score{ display:flex; flex-direction:column; gap:var(--s2); }
.p-score-row{ display:grid; grid-template-columns:1fr 120px 44px;
  gap:var(--s2); align-items:center; }
.p-score-t{ font-size:var(--t-sm); color:var(--ink); }
.p-score-track{ height:6px; border-radius:var(--r-xs);
  background:rgba(var(--rule-c),.10); overflow:hidden; }
.p-score-fill{ display:block; height:100%; background:var(--mark-solid); }
.p-score-v{ font-family:var(--face-display); font-size:var(--t-sm);
  font-variant-numeric:tabular-nums; color:var(--fig-inline); text-align:right; }

/* Filter bar for long audits. */
.p-filters{ display:flex; flex-wrap:wrap; gap:var(--s1); }
.p-filter{ font:inherit; font-size:var(--t-xs); font-weight:600; cursor:pointer;
  min-height:32px; padding:var(--s1) var(--s2);
  border-radius:var(--r-ctl); border:var(--hair) solid rgba(var(--rule-c),.12);
  background:transparent; color:var(--graphite);
  transition:background .3s var(--ease), color .3s var(--ease); }
.p-filter:hover{ background:var(--wash); color:var(--ink); }
.p-filter[aria-pressed="true"]{ background:var(--mark-tint);
  color:var(--mark-deep); border-color:rgba(var(--rule-c),.18); }
.p-change[hidden]{ display:none; }

/* ═══ 6. SHARED SMALL PARTS ══════════════════════════════════════════════ */

/* Provenance line. Every panel ends with one: what generated this, from
   what source, on what date. A panel with no provenance is decoration. */
.p-prov{ font-size:var(--t-xs); color:var(--graphite);
  border-top:var(--hair) solid rgba(var(--rule-c),.10);
  padding-top:var(--s3); margin-top:var(--s6);
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); }

.p-copybtn{ font:inherit; font-size:var(--t-xs); font-weight:600; cursor:pointer;
  min-height:32px; padding:var(--s1) var(--s2); border-radius:var(--r-ctl);
  border:var(--hair) solid rgba(var(--rule-c),.12);
  background:transparent; color:var(--graphite);
  transition:background .3s var(--ease), color .3s var(--ease); }
.p-copybtn:hover{ background:var(--wash); color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .p-asset,.p-font,.p-change,.p-dock{ transition:none; }
  .p-asset:hover,.p-font:hover{ transform:none; }
}