/* ============================================================
   presenter.css — the presenter console.

   Deliberately NOT part of either portal's design language: it is a
   tool bolted onto the side of two products, and it should read that
   way. Flat surfaces, no backdrop-filter (the performance contract
   allows exactly three, and all three are spoken for), transform and
   opacity only.

   Layer order: handle 150 (visible through the tour mask at 140),
   scrim 190, panel 200 — above everything the product owns.
   ============================================================ */

/* ---------- the handle ---------- */
.pzhandle{
  position:fixed; left:14px; bottom:14px; z-index:150;
  display:inline-flex; align-items:center; gap:7px;
  height:30px; padding:0 12px 0 10px;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--panel); color:var(--ink-3);
  font:inherit; font-size:11px; font-weight:650; letter-spacing:.02em;
  cursor:pointer; opacity:.44;
  transition:opacity var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.pzhandle:hover, .pzhandle:focus-visible{ opacity:1; color:var(--ink); border-color:var(--accent-line); transform:translateY(-1px); }
.pzhandle .pzdot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* ---------- scrim + panel ---------- */
.pzscrim{
  position:fixed; inset:0; z-index:190; background:var(--scrim);
  opacity:0; transition:opacity 180ms ease;
}
.pzscrim.on{ opacity:1; }

.pzpanel{
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  width:min(440px, 100vw);
  display:flex; flex-direction:column;
  background:var(--bg-1); border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(0,0,0,.22);
  transform:translateX(18px); opacity:0;
  transition:transform 200ms cubic-bezier(.2,.7,.3,1), opacity 180ms ease;
}
.pzpanel.on{ transform:none; opacity:1; }

/* ---------- head ---------- */
.pzhead{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 18px 14px; border-bottom:1px solid var(--line-2); flex:none;
}
.pzhead .pztitle{ font-family:var(--font-display); font-size:21px; font-weight:500; line-height:1.1; }
.pzhead .pzsub{ font-size:11.5px; color:var(--ink-3); margin-top:4px; line-height:1.5; }
.pzhead .iconbtn{ margin-left:auto; flex:none; }

/* ---------- readout ---------- */
.pzreadout{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; background:var(--line-2); border-bottom:1px solid var(--line-2); flex:none;
}
.pzcell{ background:var(--bg-1); padding:9px 12px; min-width:0; }
.pzcell .pzk{ font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.pzcell .pzv{
  font-size:12.5px; font-weight:650; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- tabs ---------- */
.pztabs{
  display:flex; gap:2px; padding:10px 12px 0; flex:none;
  border-bottom:1px solid var(--line-2);
}
.pztab{
  flex:1; padding:8px 4px 10px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:650; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--fast), border-color var(--fast);
}
.pztab:hover{ color:var(--ink-2); }
.pztab[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--accent); }

/* ---------- body ---------- */
.pzbody{ flex:1; overflow-y:auto; padding:16px 18px 22px; min-height:0; }
.pzstack{ display:flex; flex-direction:column; gap:22px; }

.pzgroup{ display:flex; flex-direction:column; gap:9px; }
.pzgtitle{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.pznote{ font-size:11.5px; color:var(--ink-3); line-height:1.6; margin:0; }

.pzrow{ display:flex; gap:8px; flex-wrap:wrap; }
.pzrow > .btn{ flex:1 1 auto; }
.pzchips{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- list rows ---------- */
.pzlist{ display:flex; flex-direction:column; gap:6px; }
.pzitem{
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  padding:9px 11px; cursor:pointer; font:inherit; color:var(--ink-2);
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:background var(--fast), border-color var(--fast), color var(--fast);
}
.pzitem:hover{ background:var(--panel-2); border-color:var(--accent-line); color:var(--ink); }
.pzitem[disabled]{ opacity:.45; pointer-events:none; }
.pzitem[aria-pressed="true"]{ border-color:var(--accent-line); background:var(--accent-soft); color:var(--ink); }
.pzitem .pzin{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pzitem .pzn{ font-size:12px; font-weight:650; line-height:1.35; }
.pzitem .pzd{ font-size:10.5px; color:var(--ink-3); line-height:1.4; word-break:break-word; }
.pzitem .pzadd{ font-size:15px; color:var(--accent); flex:none; }
.pzitem .pzadd.high{ color:var(--high); }

/* ---------- foot ---------- */
.pzfoot{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:11px 18px; border-top:1px solid var(--line-2);
  font-size:10.5px; color:var(--ink-3);
}
.pzfoot .spacer{ flex:1; }
.pzlink{
  border:0; background:none; cursor:pointer; font:inherit; font-size:10.5px;
  font-weight:650; color:var(--ink-3); padding:0;
}
.pzlink:hover{ color:var(--accent); }

@media (max-width:560px){
  .pzreadout{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pzhandle{ left:10px; bottom:10px; }
}
@media (prefers-reduced-motion: reduce){
  .pzpanel, .pzscrim{ transition:none; }
}