/* ============================================================================================
   popout.css — the POP-OUT WINDOW skin (popout.js, design/41 Phase 6): `/pop/?popout=cvd,…` is this
   same page showing a few of its opener's indicator panes over a thin price pane. EVERY rule is
   prefixed `html[data-popout="1"]` — the attribute index.html stamps PRE-PAINT (the embed.css
   pattern: a class from chart.js would land ~1MB of JS after first paint, so the full 48px bar would
   flash) — and the prefix's (1,1,x) specificity beats plain `#stage` / `#topbar` whatever the source
   order, so chart.css needs no edit and a page loaded without the flag matches nothing here.

   The window is FOR its panes: a slim 30px bar (coin · TF · price · LIVE · linked · Dock all) and
   the chart. Everything that edits or navigates is hidden — the TF row and tool cluster, the drawing
   toolrail, the drawers and inspector, the setup ribbon, the symbol switcher's caret, the Indicators
   modal's list (the gear still opens an indicator's settings) — and popout.js swallows their keys.
   ============================================================================================ */
html[data-popout="1"] #topbar { height: 30px; gap: 8px; padding: 0 8px; }
html[data-popout="1"] #stage { height: calc(100% - 30px); }
html[data-popout="1"] .tb-left {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}
html[data-popout="1"] .coin { font-size: 13px; pointer-events: none; cursor: default; }
html[data-popout="1"] #last-price { font-size: 12px; }
html[data-popout="1"] #chg24 { font-size: 11px; }

html[data-popout="1"] #tf-row,
html[data-popout="1"] #tb-tools,
html[data-popout="1"] #tool-more,
html[data-popout="1"] #tb-back,
html[data-popout="1"] #tb-stats,
html[data-popout="1"] #coin-name,
html[data-popout="1"] #l4-pill,
html[data-popout="1"] #l4-note,
html[data-popout="1"] #l4-menu,
html[data-popout="1"] .sw-caret,
html[data-popout="1"] #toolrail,
html[data-popout="1"] #setup-ribbon,
html[data-popout="1"] #setup-drawer,
html[data-popout="1"] #snap-drawer,
html[data-popout="1"] #inspector,
html[data-popout="1"] #setup-composer,
html[data-popout="1"] #l4b-panel,
html[data-popout="1"] #ind-list,
html[data-popout="1"] #ind-none { display: none !important; }

/* The TF this window follows (its opener's; there is no TF row to change it here). */
html[data-popout="1"] .pop-tf {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* ● linked / ◌ linking… / ○ unlinked — the one fact about this window its content cannot show. */
html[data-popout="1"] .pop-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-popout="1"] .pop-link::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
}
html[data-popout="1"] .pop-link[data-state="linked"] { color: var(--accent); }
html[data-popout="1"] .pop-link[data-state="linked"]::before { background: currentColor; }
html[data-popout="1"] .pop-link[data-state="waiting"]::before { border-style: dashed; }

html[data-popout="1"] .pop-dock {
  margin-left: auto;
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 4px 9px;
  color: var(--fg);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
html[data-popout="1"] .pop-dock:hover { background: var(--hover); border-color: var(--accent); }
html[data-popout="1"] .pop-dock[hidden] { display: none; }

/* The unlinked card: centred over the chart, the chart still visible (and usable) around it. */
html[data-popout="1"] .pop-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  min-width: 240px;
  max-width: calc(100% - 32px);
  padding: 14px 16px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  text-align: center;
}
html[data-popout="1"] .pop-card-text { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--fg); }
html[data-popout="1"] .pop-card-sub { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
html[data-popout="1"] .pop-card-row { display: flex; gap: 8px; justify-content: center; }
html[data-popout="1"] .pop-card-btn {
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  color: var(--fg);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
html[data-popout="1"] .pop-card-btn:hover { border-color: var(--accent); }