/* Ported to the React build from css/json-drawer.css — tokens reconciled to the
   Pursuit DS 2026 canonical sheet (legacy --border/--radius/--secondary names
   replaced; see react/css/bridge.css for remaining aliases). */

/* ========================================================================
   JSON DRAWER — render styles for the Worksheets record-detail body.
   Ported from the standalone renderer and re-tokenised onto the app's
   design system. Everything is scoped under .jd-root with .jd-* class
   names so it can't collide with search/detail/worksheet styles.
   ======================================================================== */

.jd-root {
  display: flex;
  flex-direction: column;
  /* adaptive margins are set per-child inline by the renderer */
}

/* ── Primitive field (label + value) ── */
.jd-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.jd-field-label {
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.jd-field-value {
  font: 400 13px/1.45 var(--font-body);
  color: var(--foreground);
  word-break: break-word;
}
.jd-field-value.jd-null-value,
.jd-field-value.jd-empty-array {
  color: var(--muted-foreground);
}
.jd-field-value.jd-empty-array { font-style: italic; }
.jd-field-value.jd-short-desc {
  font-size: 12.5px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

/* ── Facts grid — key/value pairs styled like the Account / Contact
   detail header (primary icon + mono uppercase label + value), laid out
   in a responsive multi-column grid. ── */
.jd-root .jd-facts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
}
.jd-root .jd-fact {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.jd-root .jd-fact-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font: 500 12px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.jd-root .jd-fact-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--ps-primary-500);
  opacity: 0.7;
  align-self: center;
  position: relative;
  top: 1px;
}
.jd-root .jd-fact-value {
  font: 400 13px/1.45 var(--font-body);
  color: var(--foreground);
  overflow-wrap: anywhere;
  min-width: 0;
}
.jd-root .jd-fact-value.jd-null-value,
.jd-root .jd-fact-value.jd-empty-array {
  color: var(--muted-foreground);
}
.jd-root .jd-fact-value.jd-empty-array { font-style: italic; }
.jd-root .jd-fact-value.jd-short-desc { color: var(--muted-foreground); }
.jd-root a.jd-fact-value {
  color: var(--ps-primary-500);
  text-decoration: none;
}
.jd-root a.jd-fact-value:hover { color: var(--ps-primary-700); text-decoration: underline; }
.jd-root .jd-fact .jd-pill { margin-top: -1px; }

/* Long-text field — label (icon + text) then a full-width paragraph block. */
.jd-root .jd-longtext {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.jd-root .jd-fact-label--block { white-space: normal; }

/* ── Links ── */
.jd-field-link {
  font: 500 13px/1.4 var(--font-body);
  color: var(--ps-primary-500);
  text-decoration: none;
  word-break: break-all;
}
.jd-field-link:hover { color: var(--ps-primary-700); text-decoration: underline; }

/* ── Card (top-level nested object) ── */
.jd-card {
  border-radius: var(--radius-md, 16px);
  border: 1px solid #fff;
  border-top-width: 1.5px;
  background: var(--card);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(20,20,23,0.04));
  overflow: hidden;
  flex-shrink: 0;
}
.jd-card-header {
  background: var(--ps-neutral-100);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--ps-neutral-150);
}
.jd-card-header-title {
  font: 600 14px/1.3 var(--font-body);
  color: var(--foreground);
}
.jd-card-header-subtitle {
  font: 400 11.5px/1.4 var(--font-body);
  color: var(--muted-foreground);
}
.jd-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
}

/* ── Section (deeper nesting) ── */
.jd-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.jd-section-title {
  font: 600 14px/1.3 var(--font-body);
  color: var(--foreground);
  margin-bottom: 10px;
}

/* ── Bulleted list (array of primitives) ── */
.jd-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.jd-bullet-list-label {
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.jd-bullet-list-items {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.jd-bullet-row {
  display: flex;
  gap: 9px;
  padding-left: 6px;
}
.jd-bullet-char {
  color: var(--ps-primary-500);
  font-size: 13px;
  line-height: 1.5;
  flex-shrink: 0;
}
.jd-bullet-text {
  font: 400 13px/1.5 var(--font-body);
  color: var(--foreground);
}

/* ── Array of objects — accent-bar groups ── */
.jd-array-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.jd-array-group-label {
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.jd-array-group-items {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.jd-accent-bar-item { display: flex; gap: 0; }
.jd-accent-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--ps-primary-500);
  flex-shrink: 0;
}
.jd-accent-bar-content {
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ── Two-column layout ── */
.jd-two-col {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.jd-two-col > .jd-field { flex: 1; min-width: 0; }

/* ── Pills ── */
.jd-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 3px 9px;
  font: 600 12px/1.2 var(--font-body);
  width: fit-content;
}
.jd-pill-monetary {
  background: var(--ps-primary-60);
  color: var(--ps-primary-700);
  font-family: var(--font-mono);
}
.jd-pill-score {
  background: var(--ps-secondary-50);
  color: var(--ps-secondary-600);
}

/* ── Long-text paragraph block ── */
.jd-paragraph-block {
  background: var(--ps-neutral-100);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  width: 100%;
}
.jd-paragraph-block .jd-field-value {
  font-size: 13px;
  line-height: 1.6;
  color: var(--foreground);
}

/* ── Mini-table (deep uniform arrays) ── */
.jd-mini-table {
  border: 1px solid var(--ps-neutral-200);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
}
.jd-mini-table table {
  width: 100%;
  border-collapse: collapse;
}
.jd-mini-table thead th {
  background: var(--ps-neutral-100);
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  padding: 7px 13px;
  border-bottom: 1px solid var(--ps-neutral-200);
  white-space: nowrap;
}
.jd-mini-table tbody td {
  padding: 8px 13px;
  font: 400 12px/1.45 var(--font-body);
  color: var(--foreground);
  border-bottom: 1px solid var(--ps-neutral-150);
  vertical-align: top;
}
.jd-mini-table tbody tr:last-child td { border-bottom: none; }
.jd-mini-table tbody td.jd-null-value { color: var(--muted-foreground); }
.jd-mini-table tbody td .jd-pill { font-size: 11px; padding: 1px 7px; }