/* ═══════════════════════════════════════════════════════════
   engine/css/study-panel.css — Study panel, tabs, and audio footer
═══════════════════════════════════════════════════════════ */

/* ── Study panel body & layer panes ──────────────────────── */
.study-panel-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.layer-pane {
  display: none;
  flex-direction: column;
  height: 100%;
}

.layer-pane--active {
  display: flex;
}

.layer-pane-content {
  /* font, color, background, padding — owned by shared/css/surface.css */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.layer-pane-content::-webkit-scrollbar { width: 4px; }
.layer-pane-content::-webkit-scrollbar-track { background: transparent; }
.layer-pane-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.layer-attr {
  flex-shrink: 0;
  padding: 4px 14px;
  font-size: 10px;
  color: var(--text-3);
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
}

/* ── Study tabs — manila folder tab bar ──────────────────── */

.study-tabs {
  /* All tokens map to system design tokens — dark mode handled automatically by theme.css */
  --tab-rail-bg:       var(--bg-card);   /* matches topbar, audio footer */
  --tab-rail-border:   var(--border);
  --tab-active-bg:     var(--bg-raised); /* white — "white like the Study Panel background" */
  --tab-inactive-bg:   var(--bg);        /* address-bar shade from the Text Panel */
  --tab-hover-bg:      var(--bg-card);   /* midpoint between inactive and active */
  --tab-border:        var(--border);
  --tab-text-active:   var(--text);
  --tab-icon-inactive: 0.55;

  display: flex;
  align-items: flex-end;
  gap: 0;
  height: var(--bar-h);          /* matches reference bar, footers */
  border-bottom: 1px solid var(--tab-rail-border);
  padding: 0 10px;               /* matches reference bar, footers */
  flex-shrink: 0;
  background: var(--tab-rail-bg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (prefers-color-scheme: dark) {
  .study-tabs {
    /* System tokens resolve correctly in dark mode; only tweak icon opacity */
    --tab-icon-inactive: 0.45;
  }
}

.study-tabs::-webkit-scrollbar { display: none; }

/* ── Individual tab ── */
.study-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Inactive: icon-only fixed width; active expands to fit icon + label */
  min-width: calc(var(--btn-icon) + 12px); /* 28px: floor — icon + 6px each side */
  width: calc(var(--btn-icon) + 34px);   /* ~50px: pre-JS fallback; JS overrides via inline style */
  /* 5px shorter: 1px for the bottom border + 4px top gap to match the reference bar */
  height: calc(var(--bar-h) - 5px);
  padding: 0 4px;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  position: relative;

  /* Overlap: every tab slides 10px under the previous */
  margin-left: -10px;

  /* \ shape: straight left, angled right. polygon() scales with any tab width. */
  clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);

  /* Tab's own background IS the border color; the fill (::before) sits 1px inset,
     leaving a 1px strip of border color visible at the angled edges and top */
  background: var(--tab-border);
  color: var(--tab-text-active);

  /* clip-path eats box-shadow — use filter: drop-shadow instead */
  filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.15));

  transition: filter 0.12s;
}

/* Fill layer — 1px inset so the tab's border-color background peeks out at the edges */
.study-tab::before {
  content: '';
  position: absolute;
  inset: 1px 1px 0 1px;
  background: var(--tab-inactive-bg);
  clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);
  z-index: -1;
  transition: background 0.12s;
}

/* Z-index descending so each tab sits on top of the one to its right —
   left tab covers right tab's left edge, leaving only the right angled side visible */
.study-tab:nth-child(1) { z-index: 7; }
.study-tab:nth-child(2) { z-index: 6; }
.study-tab:nth-child(3) { z-index: 5; }
.study-tab:nth-child(4) { z-index: 4; }
.study-tab:nth-child(5) { z-index: 3; }
.study-tab:nth-child(6) { z-index: 2; }
.study-tab:nth-child(7) { z-index: 1; }

/* First tab never has a previous tab to overlap */
.study-tab:first-child { margin-left: 0; }

/* ── Tabs left of the active tab — angled left, / right edge ── */
.study-tab--left {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.study-tab--left::before {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.study-tab .icon {
  width: var(--btn-icon);
  height: var(--btn-icon);
  flex-shrink: 0;
  opacity: var(--tab-icon-inactive);
  transition: opacity 0.12s;
}

/* Hover changes the fill layer, not the tab background (which is always border color) */
.study-tab:hover:not(.study-tab--active)::before { background: var(--tab-hover-bg); }
.study-tab:hover .icon { opacity: calc(var(--tab-icon-inactive) + 0.2); }

/* ── Label (hidden on inactive tabs) ── */
.study-tab__label {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--tab-text-active);
  letter-spacing: 0.01em;
}

/* ── Active tab — raised, expanded, stays in DOM position ── */
.study-tab--active {
  /* Expand to accommodate icon + label */
  width: auto;
  overflow: visible;

  /* Overlap = clip angle so the / left edge aligns flush with the left tab's right edge.
     first-child override (0,2,0 specificity) keeps tab 1 flush with the container edge. */
  margin-left: -8px;
  padding: 0 14px 0 10px;
  justify-content: flex-start;

  /* Always on top of all other tabs regardless of DOM position */
  z-index: 20;

  /* / left side, \ right side — classic raised tab */
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);

  filter:
    drop-shadow(0   -2px 4px rgba(0, 0, 0, 0.10))
    drop-shadow(-2px  0  3px rgba(0, 0, 0, 0.15))
    drop-shadow(1px   0  3px rgba(0, 0, 0, 0.08));
}

/* Active fill = panel body color. Same polygon as outer so the 1px inset shows as a border. */
.study-tab--active::before {
  background: var(--tab-active-bg);
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);
}

@media (prefers-color-scheme: dark) {
  .study-tab--active {
    filter:
      drop-shadow(0   -2px 5px rgba(0, 0, 0, 0.50))
      drop-shadow(-2px  0  4px rgba(0, 0, 0, 0.40))
      drop-shadow(1px   0  4px rgba(0, 0, 0, 0.35));
  }
}

.study-tab--active .icon      { opacity: 1; }
.study-tab--active .study-tab__label { display: block; }

/* ── Audio footer ────────────────────────────────────────── */
.study-audio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  padding: 0 8px 0 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
  background: var(--bg-card);
}

.study-audio-ref {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* Active play/pause state */
.chip--audio-active {
  background: var(--accent-soft);
}

.chip--audio-active .icon { opacity: 1; }

/* ── Tablet — tighter inner spacing ──────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 480px) {
  .layer-pane-content  { padding: 10px; }
}

/* ── Mobile: hide tab bar to reclaim screen space ────────────
   Brands with tabs enabled override .study-tabs in brand.css. */
@media (max-width: 639px) {
  .study-tabs { display: none; }
}

@media (orientation: landscape) and (max-height: 479px) {
  .study-tabs { display: none; }
}