/**
 * tribeCast.org — center pane (SHELL-3-lite)
 *
 * Scoped entirely under .tc-cp-* / #tc-cp-* / #tc-center-pane selectors —
 * same "own prefix, never touch anything else's classes" discipline
 * css/right-rail.css documents in its own header. This file cannot repaint
 * #tc-rail, #tcrr-root, the megamenu, or the pagebar; it only ever styles
 * the pane host this lane adds.
 */

#tc-center-pane {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin: 16px;
  overflow: hidden;
}

/* An ID selector (#tc-center-pane above) outranks the UA stylesheet's
   attribute selector ([hidden] { display: none }), so without this rule
   center-pane.js's closePane() setting .hidden = true has NO visible
   effect — the pane keeps rendering at display:flex. Caught by the real-
   Chromium verify script's screenshots (jsdom's getComputedStyle doesn't
   apply stylesheet cascade, so the jsdom suite couldn't see this); this
   explicit override, with a strictly higher specificity than the bare-ID
   rule above, is what actually makes `hidden` hide the element. */
#tc-center-pane[hidden] {
  display: none;
}

.tc-cp-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.tc-cp-titlebar-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-cp-titlebar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.tc-cp-titlebar-title {
  color: #fff;
  font: 600 14px 'Geist', 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-cp-title-tribe {
  color: #ff7a29;
}

.tc-cp-titlebar-spacer {
  flex: 1 1 auto;
}

.tc-cp-popout-btn,
.tc-cp-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tc-cp-popout-btn:hover,
.tc-cp-close-btn:hover {
  color: #fff;
  border-color: rgba(255, 122, 41, 0.4);
  background: rgba(255, 122, 41, 0.08);
}

.tc-cp-popout-btn i,
.tc-cp-close-btn i {
  width: 16px;
  height: 16px;
}

.tc-cp-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
}

.tc-cp-iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 60vh;
  border: 0;
  background: #050505;
}

.tc-cp-loading,
.tc-cp-error {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: #a1a1aa;
  font: 400 13px 'Geist', 'Inter', system-ui, sans-serif;
  text-align: center;
}

.tc-cp-error-link {
  color: #ff7a29;
  font-weight: 600;
  text-decoration: none;
}

.tc-cp-error-link:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  #tc-center-pane {
    margin: 8px;
    min-height: 70vh;
  }
}