/* tabs.css — the /chart TAB STRIP and the tab iframes (tabs.js, design/44). The look is "timeframe chips" (the
   user's pick, 2026-09-29): each tab a quiet bordered chip whose timeframe is its name tag, so a 1m / 1D / 1W
   set reads at a glance.

   EVERYTHING here is gated on html[data-tabs="1"], which tabs-boot.js stamps PRE-PAINT (the data-embed /
   data-rail reason: the strip's height is reserved from the first paint, so the chart never reflows once
   tabs.js runs). Without the stamp — a /grid pane, a pop-out, the trainer, ?mobile=1, the iOS WebView — the
   strip is display:none and --tabs-h is unset, so every `var(--tabs-h, 0px)` term in chart.css / rdock.css is
   0 and the page is pixel-identical to a page without tabs. */
html[data-tabs="1"] { --tabs-h: 34px; --tabs-veil: rgba(6, 8, 12, 0.26); }
html[data-tabs="1"][data-theme="light"] { --tabs-veil: rgba(246, 247, 250, 0.52); }

#tabs-strip { display: none; }
html[data-tabs="1"] #tabs-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--tabs-h);
  /* The docked toolrail's gutter lines the first tab up with the chart's left edge (0 below 1280 px). */
  padding: 0 8px 0 calc(var(--rail-gutter, 0px) + 8px);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  user-select: none;
  position: relative;
  z-index: 29; /* under #topbar's tooltips (z 30), over #stage */
  font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-tabs="1"] #tabs-strip::-webkit-scrollbar { display: none; }

/* A tab: [TF chip] COIN name ×. It shrinks (the name first, then the coin) before the strip scrolls. Rename is a
   double-click (or F2, or the right-click menu) — there is no rename button (the user, round 2). */
.tabs-tab {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  min-width: 90px;
  max-width: 220px;
  padding: 0 3px 0 3px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.tabs-tab .tabs-tf {
  flex: none;
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 4px 5px;
  border-radius: 3px;
  background: var(--hover);
  color: var(--fg);
}
/* A SPLIT tab (split.js) names every cell's timeframe in its chip — "5m·15m·1H·4H" — set a touch tighter so four
   cells still leave room for the coin. */
.tabs-tab .tabs-tf.split { letter-spacing: -0.3px; }
.tabs-tab .tabs-coin { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; letter-spacing: 0.2px; }
.tabs-tab .tabs-name { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.tabs-tab:hover { border-color: var(--muted); }
.tabs-tab.on { border-color: var(--fg); background: var(--panel-2); color: var(--fg); }
.tabs-tab.on .tabs-tf { background: var(--fg); color: var(--panel); }
.tabs-tab.dragging { opacity: 0.6; cursor: grabbing; }
/* LOADING: the tab asked for is highlighted at once while the tab on screen stays until it is ready (tabs.js,
   swap when ready). The one mark is a slow breath on its TF badge — one ink, no glow, no bar; still under
   reduced motion, where the badge only dims. */
.tabs-tab.loading .tabs-tf { animation: tabs-wait 1.2s ease-in-out infinite; }
@keyframes tabs-wait { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .tabs-tab.loading .tabs-tf { animation: none; opacity: 0.55; }
}

/* × close: shown on hover, always on the highlighted tab (its room is kept, so nothing shifts). */
.tabs-btn {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.tabs-tab:hover .tabs-btn,
.tabs-tab.on .tabs-btn,
.tabs-tab:focus-within .tabs-btn { opacity: 1; }
.tabs-btn:hover { background: var(--hover); color: var(--fg); }
.tabs-x { margin-left: auto; }
.tabs-tab.renaming .tabs-btn { display: none; }

.tabs-rename {
  flex: 1 1 auto;
  min-width: 60px;
  width: 120px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}

.tabs-add {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px dashed var(--border);
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.tabs-add:hover { color: var(--fg); background: var(--hover); border-color: var(--muted); }

.tabs-tab:focus-visible,
.tabs-btn:focus-visible,
.tabs-add:focus-visible { outline: 1px solid var(--fg); outline-offset: -2px; }

/* The right-click menu (Rename · Duplicate · Close · Close other tabs), in the document that was clicked. */
.tabs-menu {
  position: fixed;
  z-index: 90;
  min-width: 170px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}
:root[data-theme="light"] .tabs-menu { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.tabs-menu-item {
  text-align: left;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--fg);
  font: 12.5px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.tabs-menu-item:hover:not(:disabled) { background: var(--hover); }
.tabs-menu-item:disabled { color: var(--muted); cursor: default; opacity: 0.6; }

/* THE BUSY VEIL (round 4, tabs.js setBusy): while this document is the tab on screen and ANOTHER tab is loading to
   replace it (+, a cold click, a tab still on the old coin, an F5's restore), everything but the strip is inert — a
   light dim that takes the pointer (cursor: progress) and one quiet pill naming the tab on its way. The strip is
   lifted above it, so clicking the tab on screen cancels and another one retargets; the tab menu and the toast stay
   above it too.
   Its fade-in waits a beat, so a quick swap never flashes a veil; the pointer is blocked from the first frame. */
#tabs-veil { display: none; }
html[data-tabs="1"].tabs-busy #tabs-veil {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--tabs-veil);
  cursor: progress;
}
html[data-tabs="1"].tabs-busy #tabs-strip { z-index: 5001; }
html[data-tabs="1"].tabs-busy .tabs-menu,
html[data-tabs="1"].tabs-busy #status { z-index: 5002; }
.tabs-veil-pill {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
}
:root[data-theme="light"] .tabs-veil-pill { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
@keyframes tabs-veil-in { from { background: transparent; } }
@keyframes tabs-veil-pill-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-tabs="1"].tabs-busy #tabs-veil { animation: tabs-veil-in 0.24s ease-out 0.12s both; }
  html[data-tabs="1"].tabs-busy .tabs-veil-pill { animation: tabs-veil-pill-in 0.24s ease-out 0.12s both; }
}

/* THE "MOVED" PLACEHOLDER (round 6, tabs.js syncMoved): another window took the tab this window had on screen, and
   nothing else is up yet. It covers the whole viewport — the host's frames (z 200) and its own chart, the topbar of
   which belongs to no tab any more — on the page ground, with a --panel band where the topbar was so the strip reads
   as the bottom of an empty header; the strip, its menu and the toast are lifted above it, so any chip (or "Bring it
   back") takes the screen again. Both themes through the tokens; below the busy veil, which never shows with it. */
#tabs-moved { display: none; }
html[data-tabs="1"].tabs-moved #tabs-moved {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 4000;
  padding-top: calc(48px + var(--tabs-h));
  background: linear-gradient(to bottom, var(--panel) 0, var(--panel) 48px, var(--bg) 48px);
  color: var(--muted);
}
html[data-tabs="1"].tabs-moved #tabs-strip { z-index: 4001; }
html[data-tabs="1"].tabs-moved .tabs-menu { z-index: 4002; }
.tabs-moved-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 32px));
  text-align: center;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.tabs-moved-text { color: var(--fg); }
.tabs-moved-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.tabs-moved-btn:hover { border-color: var(--muted); background: var(--hover); }
.tabs-moved-btn:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.tabs-moved-btn[hidden] { display: none; }

/* The host's own toast ("“ETH 1D” moved here from another window"): chart.css's .status look, but FIXED and above
   everything the host owns — its frames, the veil, the placeholder — so it is seen whichever tab is on screen. */
html[data-tabs="1"] #tabs-toast { position: fixed; z-index: 5003; }

/* A chart that cannot draw covers the page with #banner (chart.css: inset 0). In a tab document it stops under
   the strip, so a broken tab can always be left for another one. */
html[data-tabs="1"] .banner { top: calc(48px + var(--tabs-h)); }

/* The HOST's child iframes: the whole viewport, over the host's own chrome. An inactive one is hidden by
   VISIBILITY (never display:none: LWC would size to 0 and back on every switch) and takes no pointer. The
   ground colour covers the host while a freshly created tab is still loading. */
.tabs-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  z-index: 200;
  background: var(--bg);
  visibility: hidden;
  pointer-events: none;
}
.tabs-frame.on { visibility: visible; pointer-events: auto; }

@media (prefers-reduced-motion: no-preference) {
  .tabs-tab, .tabs-add, .tabs-btn { transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s; }
}