/* ─────────────────────────────────────────────────────────────
   Starboard · Disclosure CSS
   Accordion, Collapsible, Tabs.
   Content open/close uses the grid-template-rows 0fr→1fr trick;
   all motion references the shared token scale — no new keyframes.
   ───────────────────────────────────────────────────────────── */
@import url('../../colors_and_type.css');

/* ═══ Accordion ═══ */
.ad-acc {
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ad-acc__item + .ad-acc__item { border-top: 1px solid var(--neutral-200); }

/* Ghost variant — no outer frame, separators only */
.ad-acc--ghost { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.ad-acc--ghost .ad-acc__item + .ad-acc__item { border-top: 1px solid var(--neutral-100); }

.ad-acc__heading { margin: 0; }
.ad-acc__trigger {
  display: flex; align-items: center; gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600; font-size: 14px; line-height: 1.4;
  color: var(--fg-strong);
  text-align: start;
  background: transparent; border: 0; cursor: pointer;
  transition: background var(--duration-4) var(--ease-out);
}
.ad-acc--ghost .ad-acc__trigger { padding-inline-start: var(--space-3xs); padding-inline-end: var(--space-3xs); }
.ad-acc__trigger:hover { background: var(--neutral-50); }
.ad-acc__trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
  position: relative; z-index: 1;
}
.ad-acc__label { flex: 1; min-width: 0; }
.ad-acc__meta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--fg-muted);
}
.ad-acc__chevron {
  flex: 0 0 auto; width: 16px; height: 16px;
  color: var(--neutral-500);
  transition: transform var(--duration-5) var(--ease-out);
}
.ad-acc__item.is-open .ad-acc__chevron { transform: rotate(180deg); }
.ad-acc__item.is-open .ad-acc__trigger { color: var(--primary-700); }

/* Animated content — wrapper grid 0fr→1fr, inner clips */
.ad-acc__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-8) var(--ease-out);
}
.ad-acc__item.is-open > .ad-acc__content { grid-template-rows: 1fr; }
.ad-acc__inner { overflow: hidden; min-height: 0; }
.ad-acc__pad {
  padding: 0 var(--space-md) var(--space-sm);
  font-size: var(--text-sm-size); line-height: 1.6;
  color: var(--fg-default);
}
.ad-acc--ghost .ad-acc__pad { padding-inline-start: var(--space-3xs); padding-inline-end: var(--space-3xs); }

/* ═══ Collapsible ═══ */
.ad-clp__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  margin-inline-start: calc(-1 * var(--space-2xs));
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600; font-size: 13px;
  color: var(--fg-strong);
  background: transparent; border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-4) var(--ease-out);
}
.ad-clp__trigger:hover { background: var(--neutral-100); }
.ad-clp__trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-clp__chevron {
  width: 14px; height: 14px; color: var(--neutral-500);
  transition: transform var(--duration-5) var(--ease-out);
}
.ad-clp.is-open .ad-clp__chevron { transform: rotate(180deg); }
.ad-clp__count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--fg-muted); background: var(--neutral-100);
  padding: 1px 6px; border-radius: var(--radius-pill);
}
.ad-clp__content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-8) var(--ease-out);
}
.ad-clp.is-open > .ad-clp__content { grid-template-rows: 1fr; }
.ad-clp__inner { overflow: hidden; min-height: 0; }
.ad-clp__pad {
  padding-top: var(--space-2xs);
  font-size: var(--text-sm-size); line-height: 1.6; color: var(--fg-default);
}

/* ═══ Tabs ═══ */
.ad-tabs { min-width: 0; }
.ad-tabs--vertical { display: flex; gap: var(--space-md); align-items: flex-start; }

/* Tab strip — horizontal scroll with edge fade masks */
.ad-tabs__list {
  position: relative;
  display: flex; gap: var(--space-3xs);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--space-sm), black calc(100% - var(--space-sm)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black var(--space-sm), black calc(100% - var(--space-sm)), transparent 100%);
}
.ad-tabs__list::-webkit-scrollbar { display: none; }
.ad-tabs--underline > .ad-tabs__list { border-bottom: 1px solid var(--neutral-200); padding: 0 var(--space-sm); }

.ad-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600; font-size: 13px; line-height: 1.3;
  color: var(--fg-muted);
  background: transparent; border: 0; cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--duration-4) var(--ease-out);
}
.ad-tabs__tab:hover { color: var(--fg-strong); }
.ad-tabs__tab.is-active { color: var(--primary-700); }
.ad-tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
.ad-tabs__tab:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.ad-tabs__badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--fg-muted); background: var(--neutral-100);
  padding: 1px 6px; border-radius: var(--radius-pill);
  transition: background var(--duration-4) var(--ease-out), color var(--duration-4) var(--ease-out);
}
.ad-tabs__tab.is-active .ad-tabs__badge { background: var(--primary-50); color: var(--primary-700); }

/* Sliding active indicator — left/width driven from JS measurement */
.ad-tabs__indicator {
  position: absolute; bottom: 0; height: 2px;
  background: var(--primary-600);
  border-radius: 1px;
  pointer-events: none;
  transition:
    left var(--duration-8) var(--ease-out),
    width var(--duration-8) var(--ease-out),
    top var(--duration-8) var(--ease-out),
    height var(--duration-8) var(--ease-out);
}

/* Pills (segmented) variant — indicator becomes the raised pill */
.ad-tabs--pills > .ad-tabs__list {
  background: var(--neutral-100);
  border-radius: var(--radius-md);
  padding: var(--space-3xs);
  gap: 2px;
  -webkit-mask-image: none; mask-image: none;
  width: fit-content; max-width: 100%;
}
.ad-tabs--pills .ad-tabs__tab { padding: 7px 14px; border-radius: var(--radius-sm); position: relative; z-index: 1; }
.ad-tabs--pills .ad-tabs__tab.is-active { color: var(--fg-strong); }
.ad-tabs--pills .ad-tabs__indicator {
  top: var(--space-3xs); bottom: var(--space-3xs); height: auto;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  z-index: 0;
}

/* Vertical orientation — indicator hugs the right edge of the rail */
.ad-tabs--vertical > .ad-tabs__list {
  flex-direction: column;
  overflow: visible;
  border-bottom: 0; border-inline-end: 1px solid var(--neutral-200);
  padding: 0; min-width: 160px;
  -webkit-mask-image: none; mask-image: none;
}
.ad-tabs--vertical .ad-tabs__tab {
  justify-content: flex-start; text-align: start;
  padding: 9px 14px;
  border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm);
  border-start-end-radius: 0; border-end-end-radius: 0;
}
.ad-tabs--vertical .ad-tabs__indicator {
  inset-inline-start: auto; inset-inline-end: -1px; bottom: auto;
  width: 2px; height: auto;
}

/* Panel — fades up on tab change */
.ad-tabs__panel {
  padding-top: var(--space-sm);
  font-size: var(--text-sm-size); line-height: 1.6; color: var(--fg-default);
  animation: ad-fade-up var(--duration-4) var(--ease-out) both;
  min-width: 0;
}
.ad-tabs--vertical .ad-tabs__panel { padding-top: var(--space-3xs); flex: 1; }
.ad-tabs__panel:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }