/* =================================================================
   Detail pane — shared slide-over component.
   Pairs with assets/panel.js. Reuses the site's :root tokens
   (--ink-*, --violet*, --rule*, --ease-*) defined per page.
   Markup contract:
     - triggers:  <a class="…" data-pane="KEY" href="full-page.html">
     - content:   <template data-pane-content="KEY">…</template>
     - shell:     [data-pane-scrim] + [data-pane-el] (+ slots)
   ================================================================= */

/* --- Trigger affordance: a chevron that hints "opens a pane" --- */
.pidx-peek {
  display: none;                 /* shown only once panel.js enables the pane (JS-off falls back to the link) */
  width: 7px; height: 7px; flex-shrink: 0;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 220ms ease, transform 220ms var(--ease-out-expo);
  color: var(--violet-lift);
}
.pane-enabled .pidx-peek { display: inline-block; }
/* The scope cell holds the chevron to the right of the label. */
.pidx-row .pidx-scope {
  display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end;
}
@media (hover: hover) and (pointer: fine) {
  .pidx-row:hover .pidx-peek,
  .pidx-row:focus-within .pidx-peek { opacity: 1; transform: translateX(0); }
}
.pidx-row[aria-expanded="true"] .pidx-num { color: var(--violet-lift); }
.pidx-row[aria-expanded="true"] .pidx-name::after { transform: scaleX(1); }
@media (max-width: 640px) {
  .pidx-row .pidx-scope { justify-content: flex-start; }
}

/* --- Scrim --- */
.pane-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(5, 6, 8, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease-out-expo);
}
.pane-scrim.is-open { opacity: 1; pointer-events: auto; }

/* --- Pane shell --- */
.pane {
  position: fixed; top: 0; right: 0; z-index: 90;
  height: 100dvh; width: min(92vw, 520px);
  background: var(--ink-1);
  border-left: 1px solid var(--rule-bright);
  box-shadow: -40px 0 80px -40px rgba(0, 0, 0, 0.7);
  transform: translateX(100%);
  transition: transform 420ms var(--ease-out-expo);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.pane.is-open { transform: translateX(0); }

.pane-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 28px 22px; border-bottom: 1px solid var(--rule);
}
.pane-eyebrow { display: flex; gap: 10px; align-items: center; }
.pane-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 6px var(--violet-glow);
}
.pane-close {
  appearance: none; background: transparent; border: 1px solid var(--rule-bright);
  color: var(--ink-6); width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.pane-close:hover { color: var(--ink-9); border-color: var(--violet-lift); transform: rotate(90deg); }
.pane-close:focus-visible { outline: 2px solid var(--violet-lift); outline-offset: 3px; }

.pane-body { flex: 1 1 auto; overflow-y: auto; padding: 30px 28px 36px; }
.pane-num { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-4); }
.pane-title {
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -0.025em; line-height: 1.04; margin: 14px 0 0; color: var(--ink-9);
}
.pane-lede { color: var(--ink-6); font-size: 17px; line-height: 1.55; margin: 18px 0 0; max-width: 42ch; }
.pane-section-label {
  font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.pane-p { color: var(--ink-6); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.pane-list { list-style: none; padding: 0; margin: 0; }
.pane-list li {
  position: relative; padding: 13px 0 13px 18px;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink-9); font-size: 14.5px; line-height: 1.45;
}
.pane-list li::before { content: ''; position: absolute; left: 0; top: 20px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet-lift); }
.pane-list li strong { color: var(--ink-9); font-weight: 500; }
.pane-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pane-chip {
  font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-6); border: 1px solid var(--rule-bright); border-radius: 100px; padding: 6px 12px;
}
.pane-foot {
  flex: 0 0 auto; padding: 18px 28px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
}
.pane-foot[hidden] { display: none; }
.pane-cta {
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px; text-decoration: none;
  color: var(--ink-0); background: var(--violet-lift); padding: 11px 18px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 200ms var(--ease-physical), background 200ms ease;
}
.pane-cta:hover { transform: translateY(-1px); background: var(--violet-glow); }
.pane-cta:focus-visible { outline: 2px solid var(--violet-lift); outline-offset: 3px; }

@media (max-width: 640px) {
  .pane { width: 100vw; border-left: 0; }
  .pane-head { padding: 20px 20px 18px; }
  .pane-body { padding: 24px 20px 30px; }
  .pane-foot { padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pane, .pane-scrim, .pane-close, .pane-cta { transition: none !important; }
}

/* =================================================================
   RICH CONTENT PRIMITIVES — used inside <template data-pane-content>.
   Theme-native: tables, lanes, figures, callouts, key/value rows.
   Plus generic trigger affordances (any [data-pane], not just .pidx).
   ================================================================= */

/* Any element wired as a pane trigger gets a pointer + the peek chevron. */
.pane-enabled [data-pane] { cursor: pointer; }
.pane-peek {
  display: none;
  width: 7px; height: 7px; flex-shrink: 0;
  opacity: 0; transform: translateX(-3px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out-expo);
  color: var(--violet-lift);
}
.pane-enabled .pane-peek { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  [data-pane]:hover .pane-peek,
  [data-pane]:focus-visible .pane-peek,
  [data-pane]:focus-within .pane-peek { opacity: 1; transform: translateX(0); }
}

/* Inline text-button that opens a pane — the "lighten heavy text + link" move. */
.pane-link {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.04em;
  color: var(--violet-lift); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.pane-link .pane-peek { display: inline-block; opacity: 1; transform: none; }
.pane-link:hover { color: var(--violet-glow); }
.pane-link:focus-visible { outline: 2px solid var(--violet-lift); outline-offset: 3px; border-radius: 2px; }

/* Row trigger — a button that INHERITS its cell's text style (for table rows / cards). */
.pane-rowtrigger {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 8px;
}
.pane-rowtrigger:hover { color: var(--violet-lift); }
.pane-rowtrigger:focus-visible { outline: 2px solid var(--violet-lift); outline-offset: 3px; border-radius: 2px; }

/* State pip + label — reuses the canvas automation palette (agentic/assisted/human). */
.pane-state { display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-6); }
.pane-state .ps-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pane-state.agentic  { color: var(--violet-lift); }
.pane-state.agentic  .ps-pip { background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
.pane-state.assisted .ps-pip { background: transparent; border: 1px solid var(--violet-lift); }
.pane-state.human    .ps-pip { background: transparent; border: 1px solid var(--ink-6); }

/* Lanes — a small split block (e.g. "what agents run / what stays human"). */
.pane-lanes { display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin: 10px 0 4px; }
.pane-lane { background: var(--ink-1); padding: 14px 16px; }
.pane-lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pane-lane-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pane-lane-pip.agentic  { background: var(--violet); box-shadow: 0 0 5px var(--violet-glow); }
.pane-lane-pip.assisted { background: transparent; border: 1px solid var(--violet-lift); }
.pane-lane-pip.human    { background: transparent; border: 1px solid var(--ink-6); }
.pane-lane-label { font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-6); }
.pane-lane p { margin: 0; color: var(--ink-9); font-size: 14px; line-height: 1.45; }

/* Mini table. */
.pane-table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 13.5px; }
.pane-table th { text-align: left; font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); padding: 0 0 8px; border-bottom: 1px solid var(--rule); }
.pane-table td { padding: 11px 0; border-bottom: 1px solid var(--rule-faint); color: var(--ink-9); vertical-align: top; line-height: 1.45; }
.pane-table td.k { color: var(--ink-4); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; padding-right: 18px; }
.pane-table tr:last-child td { border-bottom: none; }

/* Key/value definition rows. */
.pane-kv { margin: 10px 0 4px; }
.pane-kv > div { display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule-faint); }
.pane-kv > div:last-child { border-bottom: none; }
.pane-kv dt { margin: 0; color: var(--ink-4); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.06em; }
.pane-kv dd { margin: 0; color: var(--ink-9); font-size: 14px; line-height: 1.45; }

/* Tinted callout — one key point. */
.pane-callout { margin: 18px 0 4px; padding: 14px 16px; border-radius: 6px;
  background: var(--violet-soft); border: 1px solid color-mix(in srgb, var(--violet-lift) 24%, transparent);
  color: var(--ink-9); font-size: 14px; line-height: 1.5; }
.pane-callout strong { color: var(--violet-lift); font-weight: 500; }

/* Figure — a framed in-theme graphic + caption. */
.pane-figure { margin: 18px 0 4px; border: 1px solid var(--rule); border-radius: 8px; padding: 18px; background: var(--ink-0); }
.pane-figure svg { display: block; width: 100%; height: auto; }
.pane-figcaption { margin-top: 12px; font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); text-align: center; }

/* Automation meter — a 3-segment shape-graphic (Human-led / AI-assisted / Agentic).
   Identical markup in every pane; only the .meter-* class on the <svg> changes,
   so it mirrors the canvas pip semantics without per-pane SVG authoring. */
.auto-meter { width: 100%; height: auto; display: block; font-family: 'Geist Mono', monospace; }
.auto-meter .seg { fill: transparent; stroke: var(--rule-bright); stroke-width: 1; }
.auto-meter .seg-label { fill: var(--ink-4); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.meter-agentic  .seg-agentic  { fill: var(--violet); stroke: var(--violet); }
.meter-agentic  .lbl-agentic  { fill: var(--ink-9); }
.meter-assisted .seg-assisted { fill: var(--violet-soft); stroke: var(--violet-lift); }
.meter-assisted .lbl-assisted { fill: var(--violet-lift); }
.meter-human    .seg-human    { fill: var(--rule-faint); stroke: var(--ink-6); }
.meter-human    .lbl-human    { fill: var(--ink-9); }

/* Trade-off figure — a small two-axis shape-graphic (output × quality). */
.tradeoff-fig { width: 100%; height: auto; display: block; }
.tradeoff-fig .tf-axis { stroke: var(--rule-bright); stroke-width: 1; }
.tradeoff-fig .tf-frontier { stroke: var(--ink-6); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0.55; }
.tradeoff-fig .tf-glow { fill: var(--violet-glow); opacity: 0.22; }
.tradeoff-fig .tf-point { fill: var(--violet); }
.tradeoff-fig .tf-axis-label { fill: var(--ink-4); font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.tradeoff-fig .tf-note { fill: var(--ink-6); font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.06em; }
.tradeoff-fig .tf-point-label { fill: var(--violet-lift); font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.06em; }

/* Icon header — carries a card's glyph into its pane. */
.pane-icon { width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--violet-lift); background: var(--violet-soft);
  border: 1px solid color-mix(in srgb, var(--violet-lift) 24%, transparent); }
.pane-icon svg { width: 23px; height: 23px; }

/* Ownership bar — who operates what (a proportional two-segment graphic). */
.ownbar { display: flex; gap: 3px; height: 40px; }
.ownbar-seg { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 10px; text-align: center;
  border-radius: 4px; font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.2; }
.ownbar-seg.studio { background: var(--violet-soft); color: var(--violet-lift); border: 1px solid color-mix(in srgb, var(--violet-lift) 30%, transparent); }
.ownbar-seg.client { background: var(--ink-2); color: var(--ink-6); border: 1px solid var(--rule-bright); }