/* ============================================================
   Decision Inputs — Partner Playground mirror styles (compact).
   Companion to partner-decision-inputs.jsx. Reuses playground.css
   chrome (pp-*); this adds the Decision-Inputs-specific surfaces.
   Tokens only.
   ============================================================ */
.pdi { display: flex; flex-direction: column; gap: var(--space-4); }

/* on-behalf banner */
.pdi-behalf {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-data-soft); border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-data);
}
.pdi-behalf__tag {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px;
  color: var(--accent-data); background: var(--surface-raised);
  padding: 1px var(--space-2); border-radius: 999px; flex-shrink: 0;
}
.pdi-behalf .pp-narr { color: var(--ink-secondary); }

/* model chrome telemetry */
.pdi-chrome {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--surface-sunk); border: 1px solid var(--line-soft);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.pdi-chrome__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pdi-chrome__row .pp-strong { min-width: 150px; }

/* sections */
.pdi-section { display: flex; flex-direction: column; gap: var(--space-3); }
.pdi-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pdi-section__head h2 { margin: 0; font-size: 13px; }
.pdi-section__head .pp-narr { margin-top: 2px; max-width: 70ch; }

.pdi-kbar { display: inline-flex; align-items: center; gap: var(--space-3); }
.pdi-kbar__k { font-size: 12px; color: var(--accent-primary); background: var(--accent-primary-soft); padding: 2px var(--space-2); border-radius: 999px; font-weight: 600; }
.pdi-kbar__k .pp-numeric { font-family: var(--font-mono); font-weight: 700; }

.pdi-gate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--space-3); }
@media (max-width: 820px) { .pdi-gate-grid { grid-template-columns: 1fr; } }

/* push bar */
.pdi-push {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); background: var(--surface-raised);
  border: 1px solid var(--line-default); border-radius: var(--radius-md);
}

/* library sub-tabs */
.pdi-lib-subs { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.pdi-lib-sub { padding: var(--space-2) var(--space-4); height: auto; }

.pdi-scope { display: inline-flex; align-items: center; gap: var(--space-2); }

/* assumption-driver authoring table */
.pdi-dtable { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; }
.pdi-dtable__head, .pdi-dtable__row {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) 56px 96px minmax(220px, 1.2fr) 110px 56px;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.pdi-dtable__head { background: var(--surface-sunk); border-bottom: 1px solid var(--line-default); }
.pdi-dtable__head .pp-mono { color: var(--ink-tertiary); font-size: 11px; }
.pdi-dtable__row { border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.pdi-dtable__row:last-child { border-bottom: none; }
.pdi-dtable__row:hover { background: var(--surface-canvas); }
.pdi-mand {
  background: var(--surface-sunk); border: 1px solid var(--line-soft); cursor: pointer;
  padding: 2px var(--space-2); border-radius: 999px; font: inherit; font-size: 11px;
  color: var(--ink-tertiary); width: fit-content;
}
.pdi-mand.is-on { background: var(--state-warning-soft); color: var(--state-warning); border-color: transparent; font-weight: 600; }
.pdi-band { font-size: 12px; }
.pdi-conf { min-width: 90px; }
.pdi-dtable__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }

@media (max-width: 900px) {
  .pdi-dtable { overflow-x: auto; }
  .pdi-dtable__head, .pdi-dtable__row { min-width: 760px; }
}