/* Panel and tab primitives from Transitions.dev; values follow the landing surface. */
:root {
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 12px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: var(--text-mid);
  --tabs-text-active: var(--text-hi);
  --tabs-bar-bg: var(--bg-1);
  --tabs-pill-bg: var(--bg-3);
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

/* The bar is just a flex container with padding for the pill
   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
   so labels read above the pill background. */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}

/* The pill: width + transform are written inline by JS so
   the transition tweens between the previous and next
   measured positions. */
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

/* Intelligence: visible information paths, with one finite handoff on entry. */
.intelligence { --signal: var(--info); }
.intelligence-eyebrow { margin: 0 0 12px; font: 500 10px/1.5 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--signal); }
.intelligence .section-head h2 { font-size: clamp(30px, 3.7vw, 46px); }
.intelligence-map { display: grid; grid-template-columns: 170px minmax(50px, 1fr) auto minmax(50px, 1fr) auto; align-items: center; gap: 0; padding: 0 28px 36px; }
.intel-sources { display: grid; gap: 7px; }
.intel-sources > span { min-height: 31px; display: flex; align-items: center; gap: 9px; color: var(--text-mid); font-size: 12px; }
.intel-sources i { width: 7px; height: 7px; border: 1px solid var(--signal); border-radius: 2px; box-shadow: 0 0 12px color-mix(in srgb, var(--signal) 20%, transparent); }
.intel-connections, .intel-output { width: 100%; height: 116px; stroke: color-mix(in srgb, var(--signal) 65%, var(--line)); stroke-width: 1; overflow: visible; }
.intel-output { height: 30px; }
.intel-transfer { stroke: var(--signal); stroke-width: 2; stroke-dasharray: .18 .82; stroke-dashoffset: 1; opacity: 0; }
.intel-context-node { display: flex; align-items: center; gap: 17px; padding: 21px 24px; border: 1px solid color-mix(in srgb, var(--signal) 42%, var(--line)); border-radius: 14px; background: var(--bg-2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 4%, transparent), 0 14px 36px -25px var(--signal); }
.intel-core { display: grid; place-items: center; width: 47px; height: 47px; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line)); border-radius: 11px; }
.intel-context-node strong, .intel-ai-node strong { display: block; color: var(--text-hi); font: 600 15px/1.5 var(--font-display); }
.intel-context-node div > span, .intel-ai-node div > span { display: block; margin-top: 4px; color: var(--text-mid); font-size: 11px; }
.intel-ai-node { display: flex; align-items: center; gap: 13px; }
.intel-ai-symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--signal) 65%, var(--line)); border-radius: 50%; color: var(--signal); background: var(--bg-1); font: 500 12px var(--font-mono); }
.intelligence .workspace-shell { position: relative; border-color: color-mix(in srgb, var(--signal) 28%, var(--line)); border-radius: 18px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 3%, transparent), 0 30px 80px -46px color-mix(in srgb, var(--signal) 35%, var(--bg-0)); }
.intelligence .workspace-toolbar { background: var(--bg-1); }
.preview-tabs.t-tabs { display: flex; gap: 6px; padding: 10px 18px; border-radius: 0; }
.preview-tabs .t-tab { height: auto; min-height: 42px; padding: 10px 14px; border: 0; border-radius: 8px; }
.preview-tabs .t-tab[aria-selected="true"] { color: var(--text-hi); }
.preview-tabs .t-tabs-pill { top: 10px; height: calc(100% - 20px); border: 1px solid color-mix(in srgb, var(--signal) 40%, var(--line)); border-radius: 8px; box-shadow: 0 0 16px -9px var(--signal); }
.intelligence-question { display: flex; align-items: center; gap: 15px; margin: 22px 30px 0; padding: 15px 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-1); }
.intelligence-question > span:first-child { color: var(--signal); font: 500 24px/1 var(--font-mono); }
.intelligence-question-label { display: block; margin-bottom: 5px; font: 500 9px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-mid); }
.intelligence-question p { margin: 0; color: var(--text-hi); font-size: 14px; }
.intelligence-context-tag { margin-left: auto; padding-left: 16px; border-left: 1px solid var(--line); color: var(--text-mid); font-size: 11px; }
.intelligence .metrics { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); overflow: hidden; }
.intelligence .metric:first-child { padding-left: 20px; }
.intelligence .metric strong { transition: color 250ms var(--panel-ease); }
.intelligence .metric:hover strong { color: var(--signal); }
.intelligence .income-chart rect { transform-origin: center 156px; }
.intelligence[data-intel-entered="true"] .intel-transfer { animation: intel-flow 3600ms linear infinite; }
.intelligence[data-intel-entered="true"] .intel-transfer:nth-of-type(3) { animation-delay: 260ms; }
.intelligence[data-intel-entered="true"] .intel-transfer:nth-of-type(4) { animation-delay: 520ms; }
.intelligence[data-intel-entered="true"] .intel-output .intel-transfer { animation-delay: 840ms; }
.intelligence[data-intel-entered="true"] .income-chart rect { animation: intel-chart-enter 650ms var(--panel-ease) both; }
.intelligence[data-intel-entered="true"] .income-chart rect:nth-of-type(2) { animation-delay: 70ms; }
.intelligence[data-intel-entered="true"] .income-chart rect:nth-of-type(3) { animation-delay: 140ms; }
@keyframes intel-flow { 0% { stroke-dashoffset: 1; opacity: .22; } 14%, 74% { opacity: .78; } 100% { stroke-dashoffset: 0; opacity: .22; } }
@keyframes intel-chart-enter { from { transform: scaleY(.06); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 950px) {
  .intelligence-map { grid-template-columns: 150px minmax(25px, 1fr) auto minmax(25px, 1fr) 150px; padding-inline: 0; }
  .intel-context-node { padding: 16px; gap: 12px; }
  .intel-context-node strong, .intel-ai-node strong { font-size: 13px; }
  .intel-ai-node { gap: 8px; }
  .intel-ai-symbol { flex-shrink: 0; }
}
@media (max-width: 700px) {
  .intelligence-map { grid-template-columns: 1fr 38px 1fr; gap: 0; padding-bottom: 26px; }
  .intel-sources { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .intel-sources > span { min-height: 0; font-size: 10px; gap: 5px; }
  .intel-sources i { flex-shrink: 0; width: 5px; height: 5px; }
  .intel-connections { display: none; }
  .intel-context-node { padding: 12px; gap: 9px; }
  .intel-core { width: 31px; height: 31px; flex-shrink: 0; border-radius: 7px; }
  .intel-core img { width: 27px; height: 27px; }
  .intel-context-node strong, .intel-ai-node strong { font-size: 12px; }
  .intel-context-node div > span, .intel-ai-node div > span { font-size: 9px; }
  .intel-ai-symbol { display: none; }
  .intel-ai-node { padding-left: 7px; }
  .intelligence-question { margin: 16px 16px 0; padding: 13px; gap: 10px; }
  .intelligence-question p { font-size: 12px; }
  .intelligence-context-tag { display: none; }
}
@media (max-width: 560px) {
  .preview-tabs.t-tabs { padding-inline: 8px; gap: 3px; }
  .preview-tabs .t-tab { padding-inline: 10px; font-size: 11px; }
  .intelligence .metric { padding: 15px 12px; }
  .intelligence .metric:first-child, .intelligence .metric:nth-child(3) { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .intelligence .intel-transfer, .intelligence .income-chart rect { animation: none !important; }
  .intelligence .intel-transfer { opacity: .38; stroke-dashoffset: 0; }
  .intelligence .metric strong { transition: none; }
}