/* 2BIT panel: the cabinet SERVICE CARD (DESIGN_SPEC §5.8, §8 "Panel").
   From 900px it fills the column the stage opens (.pn-root is that column);
   below 900px js/ui/panel.js moves .pn under <body> and it becomes a bottom
   sheet with a scrim, a drag handle and two snaps (peek / full).

   Set from JS:  --pn-c  cabinet colour     --pn-k  screen scale (1, or .5 below 560px)
                 --pn-sw one palette swatch  [data-snap="closed|peek|full"] on .pn */

.pn-root{ position:relative; min-width:0; min-height:0; overflow:hidden; }

.pn{
  --pn-c:var(--line-2); --pn-k:1; --pn-peek:176px;
  position:absolute; inset:0;
  display:flex; flex-direction:column; min-width:0;
  background:var(--bg-card); color:var(--tx-1);
  border-left:2px solid var(--pn-c);
}
.pn-sheet{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.pn-in{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
/* content slides in; calm drops the travel and shortens the fade */
.pn-in.pn-enter{ animation:pn-in var(--d-route) var(--e-out) both; }
@keyframes pn-in{ from{ opacity:0; transform:translateX(calc(var(--rise) * 3)); } }

.pn-grab, .pn-scrim, .pn-peek{ display:none; }

/* ---------- fixed head ---------- */
.pn-head{
  position:relative; flex:none;
  display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto 1fr;
  grid-template-areas:"bez id" "bez meta" "bez cta";
  column-gap:var(--s-3); row-gap:var(--s-2);
  padding:var(--s-4);
}

/* the cabinet's own screen at 1:1 inside a dark bezel with a marquee-colour lip */
.pn-bezel{
  grid-area:bez; align-self:start;
  padding:var(--s-2); background:var(--shelf);
  border-top:6px solid var(--pn-c); border-radius:var(--r-2);
}
.pn-glass{
  width:calc(180px * var(--pn-k)); height:calc(240px * var(--pn-k));
  border-radius:var(--r-1);
}
/* Out of Order: glass off, a paper note taped on at a tilt */
.pn-off{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pn-note{
  padding:6px 10px; background:var(--tx-2); color:var(--tx-ink);
  font:700 12px/1.2 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transform:rotate(8deg);
}
.pn.is-dead .pn-bezel{ border-top-color:var(--line-2); }

.pn-id{ grid-area:id; min-width:0; padding-right:40px; }   /* 40px: the close button */
.pn-ticker{
  font:400 34px/1 var(--f-pix); letter-spacing:.02em; text-transform:none;
  color:var(--tx-1); overflow-wrap:anywhere;
}
.pn-ticker[data-fit="m"]{ font-size:22px; }
.pn-ticker[data-fit="s"]{ font-size:20px; }
.pn-tier{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:var(--s-2);
  font:700 13px/1.2 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2);
}
.pn-pips{ display:inline-flex; }

.pn-meta{ grid-area:meta; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.pn-title{ font:600 14px/1.3 var(--f-ui); letter-spacing:.03em; color:var(--tx-1); overflow-wrap:anywhere; }
.pn-chip{ max-width:100%; }

.pn-cta{ grid-area:cta; align-self:end; min-width:0; }
.pn-play{ padding:0 var(--s-2); }
.pn-dead{ color:var(--tx-2); }

.pn-x{ position:absolute; top:var(--s-3); right:var(--s-3); }

/* ---------- tabs and scrolling body ---------- */
.pn-tabs{ flex:none; padding:0 var(--s-4); background:var(--bg-card); }
.pn-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-4);
}
.pn-p{ display:flex; flex-direction:column; gap:var(--s-5); border-radius:var(--r-1); }
.pn-p:focus-visible{ box-shadow:0 0 0 2px var(--sel); }
/* Stats holds one of two block sets (a simulated cabinet's, a real coin's); a set stacks like the tab */
.pn-set{ display:flex; flex-direction:column; gap:var(--s-5); min-width:0; }

.pn-b{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.pn-h{ display:flex; align-items:center; gap:var(--s-2); min-height:24px; }
.pn-row{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-3); min-width:0; }

/* STATS */
.pn-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-2); }
.pn-kpis .kpi{ padding:10px; }
.pn-kpis .kpi-n{ font-size:18px; }
.pn-kpis .kpi-n.up{ color:var(--up); }
.pn-kpis .kpi-n.down{ color:var(--down); }
.pn-spark{
  padding:var(--s-2); color:var(--tx-2);
  background:var(--bg-raise); border-radius:var(--r-2);
}
.pn-spark svg{ display:block; width:100%; height:auto; }
.pn-next{ font:500 14px/1.4 var(--f-ui); color:var(--tx-1); }
.pn-addr{ font-size:14px; color:var(--tx-1); overflow-wrap:anywhere; }
/* a KPI whose value is words ("3 min ago"), set to the height of a number */
.pn-kpis .kpi-n.is-word{ font-size:14px; line-height:18px; letter-spacing:0; white-space:normal; }

/* STATS, a real coin: its picture beside contract and creator, then the links out */
.pn-coin{ display:flex; align-items:flex-start; gap:var(--s-3); min-width:0; }
.pn-coin .pn-facts{ flex:1 1 auto; min-width:0; align-items:center; }
.pn-pic{
  flex:none; width:64px; height:64px; overflow:hidden;
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.pn-pic img{ width:100%; height:100%; object-fit:cover; }
.pn-row .pn-you{ margin-left:0; }
.pn-links{ display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s-4); }
.pn-links a{ display:inline-flex; align-items:center; min-height:32px; }

/* BOARD and the POT split share one compact table */
.pn-beat{ font:500 14px/1.4 var(--f-ui); color:var(--tx-2); }
.pn-beat strong{ color:var(--tx-1); }
.pn-tbl th, .pn-tbl td{ padding:var(--s-2); }
.pn-tbl th{ position:static; }   /* the panel has its own sticky tabs */
.pn-tbl td .mono{ font-size:14px; font-weight:700; }
.pn-tbl td.coin{ color:var(--coin); }
.pn-tbl td.dim, .pn-tbl td .dim{ color:var(--tx-3); }
.pn-you{ margin-left:var(--s-2); background:var(--sel); color:var(--tx-ink); }
.pn-b .empty{ padding:var(--s-5) var(--s-3); }

/* POT */
.pn-pot{ display:flex; align-items:baseline; gap:var(--s-2); }
.pn-pot-n{ font:700 30px/1 var(--f-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pn-count{ font-size:16px; }
.pn-drops{ display:flex; flex-direction:column; }
.pn-drops li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:32px; border-bottom:1px solid var(--line-1);
  font-size:13px;
}
.pn-drops li:last-child{ border-bottom:0; }

/* BUILD */
.pn-facts{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px var(--s-3); }
.pn-facts dt{
  font:700 12px/1.5 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3);
}
.pn-facts dd{ font:500 13px/1.4 var(--f-mono); color:var(--tx-1); overflow-wrap:anywhere; }
.pn-mods{ display:flex; flex-direction:column; gap:var(--s-2); }
.pn-mods li{ display:flex; align-items:baseline; gap:var(--s-2); }
.pn-mods .tag{ flex:none; align-self:center; }
.pn-sw{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px var(--s-3); }
.pn-sw li{ display:flex; align-items:center; gap:var(--s-2); min-width:0; font:500 12px/1.2 var(--f-mono); color:var(--tx-2); }
.pn-sw i{
  flex:none; width:20px; height:20px;
  background:var(--pn-sw, var(--bg-screen)); border:1px solid var(--line-2); border-radius:var(--r-1);
}
.pn-body .pn-log[role="list"]{
  padding:var(--s-3); color:var(--tx-2);
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.pn-log li::before{ content:"> "; color:var(--tx-3); }

.pn-json{ border:1px solid var(--line-1); border-radius:var(--r-2); }
.pn-json summary{
  display:flex; align-items:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-3);
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2);
  border-radius:var(--r-2); cursor:pointer; list-style:none;
}
.pn-json summary::-webkit-details-marker{ display:none; }
.pn-json summary::before{ content:"+"; width:12px; font:700 14px/1 var(--f-mono); color:var(--tx-3); }
.pn-json[open] summary::before{ content:"−"; }
.pn-json summary:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }
.pn-json-bar{ padding:0 var(--s-3) var(--s-3); }
.pn-json-pre{
  max-height:240px; overflow:auto; margin:0; padding:var(--s-3);
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--tx-2);
  background:var(--bg-screen); border-top:1px solid var(--line-1); border-radius:0 0 var(--r-2) var(--r-2);
}
.pn-json-pre:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }

/* ---------- below 900px: the bottom sheet ----------
   .pn is a clip box sitting on the tab bar (so the sheet can never cover it);
   .pn-sheet slides inside it by transform only. */
@media (max-width: 899px){
  .pn{
    position:fixed; inset:auto 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) 0;
    z-index:var(--z-sheet);
    display:block; overflow:hidden; pointer-events:none;
    height:calc(100vh - var(--header-h) - var(--tabbar-h) - env(safe-area-inset-bottom, 0px) - 8px);
    height:calc(100dvh - var(--header-h) - var(--tabbar-h) - env(safe-area-inset-bottom, 0px) - 8px);
    background:none; border:0;
  }
  /* the sheet only exists on the Floor route */
  body:not([data-view="floor"]) > .pn, body:not([data-view="floor"]) > .pn-scrim{ display:none; }

  .pn-sheet{
    height:100%; pointer-events:auto;
    background:var(--bg-card);
    border-top:2px solid var(--pn-c); border-radius:var(--r-3) var(--r-3) 0 0;
    transform:translateY(100%);
    transition:transform var(--d-3) var(--e-out);
  }
  .pn[data-snap="peek"] .pn-sheet{ transform:translateY(max(0px, calc(100% - var(--pn-peek)))); }
  .pn[data-snap="full"] .pn-sheet{ transform:none; }
  .pn-sheet.is-drag{ transition:none; }

  .pn-scrim{
    display:block; position:fixed; left:0; right:0; top:var(--header-h);
    bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index:var(--z-sheet);
    background:var(--bg-void); opacity:0; pointer-events:none;
    transition:opacity var(--d-2) linear;
  }
  .pn-scrim[data-on="1"]{ opacity:.72; pointer-events:auto; }

  /* drag handle: a real button (tap or Enter toggles the snap) */
  .pn-grab{
    position:relative; display:block; flex:none; width:100%; height:22px;
    border-radius:var(--r-3) var(--r-3) 0 0; cursor:grab; touch-action:none;
    -webkit-tap-highlight-color:transparent;
  }
  .pn-grab::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:44px; }
  .pn-grab::after{
    content:""; position:absolute; left:50%; top:9px; width:44px; height:4px; margin-left:-22px;
    background:var(--line-2); border-radius:2px;
  }
  .pn-grab:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }

  /* the whole card scrolls; the tabs stick */
  .pn-in{ display:block; overflow-y:auto; overscroll-behavior:contain; }
  .pn-in.pn-enter{ animation:none; }
  .pn:not([data-snap="full"]) .pn-in{ overflow:hidden; }
  .pn-tabs{ position:sticky; top:0; z-index:2; padding:0 var(--s-3); }
  .pn-body{ overflow:visible; padding:var(--s-4) var(--s-3) var(--s-6); }

  .pn-head{
    grid-template-rows:auto; grid-template-areas:"id id" "bez meta" "peek peek" "cta cta";
    row-gap:0; padding:0 var(--s-3) var(--s-3);
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .pn-id{ display:flex; flex-direction:column; justify-content:center; min-height:44px; padding-right:52px; }
  .pn-ticker, .pn-ticker[data-fit="m"]{ font-size:22px; }
  .pn-ticker[data-fit="s"]{ font-size:20px; }
  .pn-tier{ margin-top:var(--s-1); }
  .pn-bezel, .pn-meta, .pn-peek, .pn-cta{ margin-top:6px; }
  .pn-meta{ align-self:center; }
  .pn-x{ top:0; right:var(--s-2); width:44px; height:44px; }

  /* peek: ticker, tier, three numbers, PLAY. The screen shows only at full. */
  .pn:not([data-snap="full"]) .pn-bezel, .pn:not([data-snap="full"]) .pn-meta{ display:none; }
  .pn-peek{ grid-area:peek; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  .pn[data-snap="full"] .pn-peek{ display:none; }
  .pn-peek .kpi{ gap:2px; padding:4px var(--s-2); }
  .pn-peek .kpi-n{ font-size:15px; }
  .pn-peek .kpi-l{ letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pn-play{ padding:0 var(--s-4); }

  .pn-json-bar .btn-sm, .pn-row .btn-sm{ height:44px; }
  .pn-links a{ min-height:44px; }
}

@media (max-width: 559px){
  .pn-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pn-sw{ grid-template-columns:minmax(0, 1fr); }
}

/* ---------- calm: the sheet and scrim switch state instantly ---------- */
:root[data-calm="1"] .pn-sheet, :root[data-calm="1"] .pn-scrim{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .pn-sheet, .pn-scrim{ transition:none; }
}