/* Panel — local configuration UI. */

#panelRoot {
  flex: 1; overflow-y: auto;
  padding: 0 18px 12px;
  color: #1a1b22;
  font-size: 13.5px;
}

/* ---- tab strip ---- */
/* Sticky so the tabs stay reachable while the body scrolls. The
 * negative side-margins extend the background to the panel's edges
 * without affecting the tab buttons' alignment. */
.p-tabs {
  display: flex; gap: 4px;
  margin: 0 -18px 12px;
  padding: 8px 18px 0;
  border-bottom: 1px solid #e2dccf;
  position: sticky; top: 0; z-index: 5;
  background: #f3eee6;
}
.p-tab {
  border: 0; background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; margin-bottom: -1px;
  color: #6a6477;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.p-tab:hover { color: #14101c; }
.p-tab.on {
  color: #14101c;
  border-bottom-color: #c7b5ff;
}
.p-tab-body { display: block; }

/* Unified vertical rhythm — every tab gets the same gap between its
 * top-level blocks (header + cards + lists). Individual tabs can still
 * tighten gaps inside a card; this rule is for the gap BETWEEN cards. */
.p-tab-body > div > * + * { margin-top: 12px; }

/* header */
.p-head { margin-bottom: 0; }
.p-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 560;
  font-size: 22px; margin: 0 0 4px; color: #14101c;
}
.p-sub {
  margin: 0 0 8px; color: #6a6477; font-size: 13px; line-height: 1.5;
}
.p-sub em { color: #6e5aa8; font-style: italic; }
.p-count {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: #6a6477; letter-spacing: .04em;
}
.p-count span { font-weight: 600; color: #14101c; }
.p-count-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px;
}
.p-count-actions { display: flex; gap: 4px; }

.p-mini-btn {
  border: 1px solid #e2dccf;
  background: #fff;
  color: #6a6477;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.p-mini-btn:hover {
  border-color: #c7b5ff;
  color: #4a3585;
  background: #f7f3eb;
}

/* ---- components tab — composition tester ---- */
.p-tester { background: #fff; border: 1px solid #c7b5ff;
  box-shadow: 0 0 0 1px rgba(199,181,255,.25) inset; }
.p-tester-preview-wrap {
  margin-top: 12px; padding: 12px; border-radius: 10px;
  background: linear-gradient(155deg, #1b1428, #15111e);
  border: 1px solid #2a2336;
}
.p-tester-preview-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #79708a; margin-bottom: 8px;
}
.p-tester-preview { color: #f3eee6; }

.p-disclaimer-footer {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px dashed #e2dccf;
  font-size: 11px; color: #9c93a6; line-height: 1.5;
}
.p-disclaimer-footer summary {
  cursor: pointer; font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .08em;
  color: #9c93a6;
}
.p-disclaimer-footer summary:hover { color: #6a6477; }
.p-disclaimer-footer p { margin: 6px 0 0; color: #79708a; }

/* list */
.p-list { display: flex; flex-direction: column; gap: 12px; }

/* card */
.p-card {
  background: #fff; border: 1px solid #e2dccf; border-radius: 12px;
  padding: 14px 14px 12px;
  transition: border-color .12s ease;
}
.p-card.on { border-color: #c7b5ff; box-shadow: 0 0 0 1px rgba(199,181,255,.25) inset; }

.p-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  margin: -14px -14px 0;          /* expand click area to full card width */
  padding: 14px 14px 12px;
  border-radius: 12px 12px 0 0;
}
.p-card-head:hover { background: #f7f3eb; }
.p-card-head-l {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0; flex: 1 1 auto;
}
.p-card-chev {
  display: inline-block; width: 14px;
  color: #c7b5ff; font-size: 10px;
  transition: transform .12s ease;
  text-align: center;
  flex: 0 0 14px;
  padding-top: 4px;               /* visual align with first line of title */
}
.p-card-status {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding-top: 1px;
}
.p-card.open .p-card-chev { transform: rotate(90deg); }
.p-card-body { display: none; padding-top: 6px; }
.p-card.open .p-card-body { display: block; }
.p-card.open .p-card-head { margin-bottom: 0; }
.p-card-name {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600;
  color: #14101c; word-break: break-word;
}
.p-chip {
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10px;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px;
  letter-spacing: .04em; text-transform: lowercase; vertical-align: middle;
}
.p-chip.kind { background: #efeae0; color: #6a6477; }
.p-chip.live { background: #d4f4e1; color: #1f7a4a; }
.p-chip.dim  { background: #efeae0; color: #9c93a6; }

.p-desc {
  color: #6a6477; font-size: 12.5px; line-height: 1.5; margin: 0 0 10px;
}

.p-section { margin-top: 10px; }
.p-section-h, .p-section-h-inline {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #9c93a6; margin: 0 0 6px;
}
.p-section-h-inline { display: inline; margin: 0; }
.p-meta-details summary {
  cursor: pointer; list-style: none;
  padding: 2px 0; user-select: none;
}
.p-meta-details summary::-webkit-details-marker { display: none; }
.p-meta-details summary::before {
  content: '▸'; display: inline-block; width: 14px;
  color: #c7b5ff; font-size: 10px;
  transition: transform .12s ease;
}
.p-meta-details[open] summary::before { transform: rotate(90deg); }
.p-meta-count {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: #c0b8cf; text-transform: none; letter-spacing: 0;
}
.p-meta-details[open] > ul { margin-top: 6px; }
.p-section-hint {
  text-transform: none; letter-spacing: 0;
  color: #c0b8cf; font-size: 10.5px;
}

/* component constraints */
.p-constraint-list { list-style: none; padding: 0; margin: 0; }
.p-constraint-list li {
  font-size: 12.5px; color: #2c2737; padding: 4px 0; line-height: 1.5;
  border-top: 1px dashed #e2dccf;
}
.p-constraint-list li:first-child { border-top: 0; }
.p-constraint-list li code {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  background: #ede5ff; color: #4a3585;
  padding: 1px 5px; border-radius: 4px;
}

/* composition tester issues */
.p-tester-issues {
  display: flex; flex-direction: column; gap: 2px;
  margin: 4px 0;
}
.p-tester-issues:empty { display: none; }
.p-tester-issues .p-issue {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  padding: 4px 8px; border-radius: 4px; line-height: 1.45;
}
.p-tester-issues .p-issue.error { background: #fbe6e6; color: #a8302d; }
.p-tester-issues .p-issue.warn  { background: #fff6e8; color: #7a5c1a; }
.p-tester-issues .p-issue code  {
  background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 3px;
}
.p-tester-issues .p-issue-rule  { font-style: italic; }
.p-payload-status.warn { color: #7a5c1a; }

/* stores — variant bundles per surface */
.p-stores { display: flex; flex-direction: column; gap: 8px; }
.p-store {
  background: #f7f3eb; border: 1px solid #e2dccf; border-radius: 8px;
  padding: 8px 10px;
}
.p-store-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px;
}
.p-store-flag {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  background: #ede5ff; color: #4a3585;
  padding: 2px 7px; border-radius: 5px;
}
.p-store-count {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  color: #9c93a6;
}
.p-store-variants { display: flex; flex-wrap: wrap; gap: 4px; }

/* presets */
.p-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.p-preset {
  border: 1px solid #e2dccf; background: #fff;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  padding: 5px 10px; border-radius: 999px; color: #2c2737;
}
.p-preset:hover { border-color: #c7b5ff; background: #f7f3eb; }

/* schema viewer */
.p-schema { background: #f7f3eb; border: 1px solid #e2dccf; border-radius: 8px; padding: 6px 10px; }
.p-schema summary {
  cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: #6a6477; padding: 2px 0;
  display: flex; align-items: center; gap: 8px;
}
.p-schema-summary-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-schema-copy { flex-shrink: 0; }
.p-schema pre {
  margin: 6px 0 2px; font-size: 11.5px; color: #2c2737;
  overflow-x: auto; line-height: 1.45;
}

/* validation issues */
.p-payload-status { font-family: "JetBrains Mono", monospace; font-size: 11.5px; padding: 2px 0; }
.p-payload-status.err { color: #c54a4a; }
.p-payload-issues {
  display: flex; flex-direction: column; gap: 2px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  margin: 4px 0;
}
.p-issue { padding: 3px 7px; border-radius: 4px; }
.p-issue code { background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 3px; }
.p-issue.warn  { background: #fff6e8; color: #7a5c1a; }
.p-issue.error { background: #fbe6e6; color: #a8302d; }

/* advertisements */
.p-ad-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.p-ad {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: #2c2737;
}
.p-verb {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  background: #f3eee6; color: #6e5aa8;
  padding: 1px 7px; border-radius: 6px;
}
.p-satisfies {
  color: #6a6477; font-size: 11.5px;
  font-family: "JetBrains Mono", monospace;
}
.p-shape {
  width: 100%; margin-top: 2px;
}
.p-shape summary {
  cursor: pointer; font-size: 11px; color: #9c93a6;
  font-family: "JetBrains Mono", monospace;
}
.p-shape pre {
  margin: 4px 0 0; padding: 8px 10px; background: #f7f3eb;
  border-radius: 6px; font-size: 11.5px; color: #2c2737;
  overflow-x: auto;
}

/* consequences */
.p-conseq { list-style: none; padding: 0; margin: 0; }
.p-conseq li { font-size: 12.5px; color: #6a6477; padding: 2px 0; }
.p-conseq code {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  background: #f3eee6; padding: 1px 5px; border-radius: 4px; color: #14101c;
}

/* variant picker */
.p-variants {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;             /* breathing room before the next block */
}
.p-variant {
  border: 1px solid #e2dccf; background: #fff;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  padding: 5px 10px; border-radius: 999px; color: #2c2737;
}
.p-variant:hover { border-color: #c7b5ff; }
.p-variant.on { background: #c7b5ff; border-color: #c7b5ff; color: #14101c; font-weight: 600; }

/* payload editor */
.p-payload-ta {
  width: 100%; min-height: 90px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  background: #f7f3eb; border: 1px solid #e2dccf; border-radius: 8px;
  padding: 8px 10px; color: #14101c;
  resize: vertical;
}
.p-payload-ta:focus { outline: 2px solid #c7b5ff; outline-offset: -1px; }
.p-payload-err {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: #c54a4a; min-height: 14px; padding: 2px 0;
}
.p-payload-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.p-payload-actions .p-btn {
  white-space: nowrap;             /* don't let "Update" wrap to two lines */
}
.p-btn {
  border: 1px solid #e2dccf; background: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; color: #2c2737;
  white-space: nowrap;
}
.p-btn:hover { border-color: #c7b5ff; }
.p-btn.primary { background: #14101c; color: #fff; border-color: #14101c; }
.p-btn.primary:hover { background: #2c2737; }

/* ============================================================
 * Constraints tab — manifesto, rule catalog, scenarios, editor
 * ============================================================ */

.p-manifesto-line {
  font-family: "Fraunces", "Playfair Display", serif;
  font-size: 15px; line-height: 1.5; color: #2c2737;
  margin: 0 0 10px;
}
.p-manifesto-line:last-child { margin-bottom: 0; }
.p-manifesto-line.lead {
  font-size: 17px; font-style: italic; color: #14101c;
}

/* Rule catalog */
.p-rule-catalog .p-rule {
  border-top: 1px solid #e2dccf;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.p-rule:first-of-type { border-top: 0; padding-top: 4px; }
.p-rule-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.p-rule-name {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  background: #ede5ff; color: #4a3585;
  padding: 2px 8px; border-radius: 5px;
}
.p-rule-summary { font-size: 13px; color: #14101c; font-weight: 600; }
.p-rule-principle { font-size: 12.5px; color: #4a4358; line-height: 1.5; }
.p-btn.small {
  font-size: 11.5px; padding: 4px 10px;
}

/* Scenarios */
.p-scenario-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
}
.p-scenario-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e2dccf; background: #fff;
  border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; color: #2c2737; cursor: pointer;
}
.p-scenario-chip:hover { border-color: #c7b5ff; }
.p-scenario-chip.on { background: #14101c; color: #fff; border-color: #14101c; }
.p-scenario-chip-intent {
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  width: 14px; text-align: center;
}
.p-scenario-chip.p-intent-works .p-scenario-chip-intent { color: #2d8a3a; }
.p-scenario-chip.p-intent-breaks .p-scenario-chip-intent { color: #c54a4a; }
.p-scenario-chip.p-intent-breaks-soft .p-scenario-chip-intent { color: #c98926; }
.p-scenario-chip.on .p-scenario-chip-intent { color: #fff; }

.p-scenario-detail {
  background: #f7f3eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 4px;
}
.p-scenario-teaches {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.p-scenario-teaches-label {
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #6c6479;
}
.p-scenario-teaches code {
  background: #ede5ff; color: #4a3585;
  padding: 1px 6px; border-radius: 4px;
}
.p-scenario-why {
  font-size: 13px; line-height: 1.55; color: #2c2737;
  margin: 0;
}

/* ============================================================
 * Prompts tab — PostHog AI prompts for driving the showcase
 * ============================================================ */

/* Status pill — small "connected/not connected" chip inside the
 * Setup summary so visitors see PostHog state at a glance without
 * expanding anything. */
.p-prompts-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #6c6479;
  background: #f7f3eb;
  border-radius: 999px;
  padding: 3px 10px;
}
.p-prompts-status-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #c54a4a;
}
.p-prompts-status-dot.on { background: #2d8a3a; box-shadow: 0 0 0 2px rgba(45,138,58,0.18); }
.p-prompts-status-label { color: #4a4358; }

.p-prompts-checklist {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.p-prompts-checklist li {
  display: flex; gap: 12px; align-items: flex-start;
}
.p-prompts-step-num {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  background: #ede5ff; color: #4a3585;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 700;
}
.p-prompts-step-body { flex: 1; min-width: 0; }
.p-prompts-step-label { font-size: 13px; font-weight: 600; color: #14101c; margin-bottom: 2px; }
.p-prompts-step-detail { font-size: 12.5px; color: #4a4358; line-height: 1.5; }

/* Collapsibles — unified styling for every <details> in this tab */
.p-prompts-details > summary {
  cursor: pointer; padding: 2px 0;
  list-style: none;
}
.p-prompts-details > summary::-webkit-details-marker { display: none; }
.p-prompts-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 13px; font-weight: 600; color: #14101c;
}
.p-prompts-summary::before {
  content: '▸';
  font-size: 10px; color: #6c6479;
  display: inline-block; margin-right: 6px;
  transition: transform .12s ease;
}
.p-prompts-details[open] > summary .p-prompts-summary::before,
.p-prompts-details[open] > summary.p-prompts-summary::before { transform: rotate(90deg); }
.p-prompts-query { margin: 10px 0 12px; }
.p-prompts-query-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.p-prompts-query-label {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #6c6479;
}
.p-prompts-query-hint {
  font-size: 12px; color: #4a4358; line-height: 1.45;
  margin: 4px 0 6px;
}
.p-prompts-sql,
.p-prompt-body {
  background: #14101c; color: #e9e3d8;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
  max-height: 380px; overflow: auto;
}

/* Prompt cards */
.p-prompts-list {
  display: flex; flex-direction: column; gap: 12px;
}
.p-prompt-actions { display: flex; gap: 6px; }
.p-chip.ok { background: #d9ecdc; color: #1f6b2b; }

/* Notes */
.p-prompts-notes-list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.p-prompts-notes-list li {
  font-size: 12.5px; color: #2c2737; line-height: 1.5;
  padding: 8px 12px;
  background: #f7f3eb;
  border-radius: 8px;
}
.p-prompts-notes-list li b { color: #14101c; }

/* Surfaces tab — extras accordion (stores + advertises + consequences
 * folded into one collapsed block to keep each card scannable) */
.p-extras-details { margin-top: 8px; }
.p-extras-details > summary {
  cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: #6c6479; letter-spacing: 0.04em;
  padding: 4px 0;
  list-style: none;
}
.p-extras-details > summary::-webkit-details-marker { display: none; }
.p-extras-summary::before {
  content: '▸';
  font-size: 9px; color: #c7b5ff;
  display: inline-block; margin-right: 6px;
  transition: transform .12s ease;
}
.p-extras-details[open] > .p-extras-summary::before { transform: rotate(90deg); }
.p-extras-block { margin: 10px 0; }
.p-extras-block + .p-extras-block { border-top: 1px solid #efeae0; padding-top: 10px; }
.p-extras-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #4a3585;
  margin-bottom: 4px;
}
.p-extras-hint {
  font-size: 11.5px; color: #6c6479; line-height: 1.45;
  margin-bottom: 6px;
}

/* ============================================================
 * Mobile polish (≤ 640px)
 *
 *   - Primary tap targets grow to --touch-min.
 *   - Tab row scrolls horizontally when it doesn't fit (4 tabs
 *     can't quite squeeze into 360px). flex-shrink stays off so
 *     each tab keeps its readable width; the user swipes if
 *     needed. Scrollbar hidden to avoid a 2-line tab strip.
 *   - JSON editor jumps to 16px so iOS Safari doesn't zoom on
 *     focus (same trick as connect modal inputs).
 *   - SQL/prompt scrollers drop their max-height — the panel
 *     itself scrolls, no need for a nested viewport on a phone.
 * ============================================================ */
@media (max-width: 640px) {
  .p-tabs { overflow-x: auto; scrollbar-width: none; }
  .p-tabs::-webkit-scrollbar { display: none; }
  .p-tab { min-height: var(--touch-min); flex: 0 0 auto; }
  .p-btn { min-height: var(--touch-min); padding-inline: 14px; }
  .p-mini-btn { min-height: 36px; padding-inline: 12px; }
  .p-payload-ta { font-size: 16px; }
  .p-prompts-sql, .p-prompt-body { max-height: none; }
}