/*
 * AI Infrastructure Intelligence — Right-rail panels v2
 *
 * Progressive disclosure pattern for the project-detail right rail.
 * Uses native <details>/<summary> for the disclosure mechanic.
 * Scoped to `body.ui-v2` so legacy chrome stays unaffected.
 *
 * Authority: Wave 2 of UI-REVIEW-PLAN.md.
 * Tokens: tokens.css
 */

/* ============================================================ */
/*  Headline strip — the hero data block above all panels       */
/* ============================================================ */

body.ui-v2 .headline-strip {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-5);
  /*
   * Hero track is capped (not `auto`) so the long "Blended risk across..."
   * sub-sentence wraps *within* the hero instead of inflating the column to
   * its max-content width (~600px) and starving the `1fr` detail track. The
   * @container rule below stacks both tracks once the rail itself is narrow.
   */
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  margin: var(--space-5) 0 var(--space-7);
  padding: var(--space-6);
}

/*
 * Stack the headline strip when the detail rail is narrow. Keyed to the
 * rail's own inline-size (see `container-name: rail` on .detail-panel), not
 * the viewport — the rail is resizable and decoupled from screen width, so a
 * wide monitor with a slim rail still gets the single-column layout.
 */
@container rail (max-width: 560px) {
  body.ui-v2 .headline-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.ui-v2 .headline-strip-hero {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 140px;
}

body.ui-v2 .headline-strip-label {
  color: var(--color-steel-400);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  line-height: 1;
  text-transform: uppercase;
}

body.ui-v2 .headline-strip-value {
  color: var(--color-ink-800);
  font-family: var(--font-mono);
  font-size: var(--type-display-xl-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--type-display-xl-lh);
}

body.ui-v2 .headline-strip-value--missing {
  color: var(--color-steel-300);
}

body.ui-v2 .headline-strip-sub {
  color: var(--color-steel-500);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
}

body.ui-v2 .headline-strip-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

body.ui-v2 .headline-strip-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

body.ui-v2 .headline-strip-question {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-body-md-lh);
  margin: 0;
}

body.ui-v2 .headline-strip-driver-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

body.ui-v2 .headline-strip-posture {
  align-items: center;
  background: var(--color-brand-100);
  border-radius: var(--radius-pill);
  color: var(--color-brand-700);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
}

body.ui-v2 .headline-strip-posture[data-posture="constructive"] {
  background: var(--color-positive-bg);
  color: var(--color-positive-text);
}

body.ui-v2 .headline-strip-posture[data-posture="caution"] {
  background: var(--color-risk-bg);
  color: var(--color-risk-text);
}

body.ui-v2 .headline-strip-posture[data-posture="watchlist"] {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

body.ui-v2 .headline-strip-driver-chip {
  align-items: baseline;
  background: var(--color-neutral-bg);
  border-radius: var(--radius-sm);
  color: var(--color-steel-600);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
}

body.ui-v2 .headline-strip-driver-chip[data-severity="elevated"],
body.ui-v2 .headline-strip-driver-chip[data-severity="high"] {
  background: var(--color-risk-bg);
  color: var(--color-risk-text);
}

body.ui-v2 .headline-strip-driver-chip[data-severity="watch"] {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

body.ui-v2 .headline-strip-driver-chip[data-severity="contained"],
body.ui-v2 .headline-strip-driver-chip[data-severity="low"] {
  background: var(--color-positive-bg);
  color: var(--color-positive-text);
}

body.ui-v2 .headline-strip-driver-label {
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  opacity: 0.85;
  text-transform: uppercase;
}

body.ui-v2 .headline-strip-driver-value {
  color: inherit;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

/* ============================================================ */
/*  Panels — collapsible <details> blocks                        */
/* ============================================================ */

body.ui-v2 .panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
  margin: 0 0 var(--space-7);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .panel[open] {
  border-color: var(--color-line-300);
}

body.ui-v2 .panel-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  user-select: none;
}

body.ui-v2 .panel-summary::-webkit-details-marker {
  display: none;
}

body.ui-v2 .panel-summary:hover {
  background: var(--color-hover-overlay);
}

body.ui-v2 .panel-summary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

body.ui-v2 .panel-title {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-title-sm-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--type-title-sm-lh);
  margin: 0;
}

body.ui-v2 .panel-summary-meta {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

body.ui-v2 .panel-chevron {
  color: var(--color-steel-400);
  flex: none;
  transition: transform var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .panel[open] .panel-chevron {
  transform: rotate(180deg);
}

body.ui-v2 .panel-pin {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-steel-300);
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition: background-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
  width: 28px;
}

body.ui-v2 .panel-pin:hover {
  background: var(--color-hover-overlay);
  color: var(--color-steel-600);
}

body.ui-v2 .panel-pin[data-pinned="true"] {
  color: var(--color-brand-600);
}

body.ui-v2 .panel-pin[data-pinned="true"]:hover {
  color: var(--color-brand-700);
}

body.ui-v2 .panel-pin:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

body.ui-v2 .panel-body {
  border-top: 1px solid var(--color-line-100);
  container-name: panel;
  container-type: inline-size;
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/*
 * Container-query overrides — keep dense multi-column grids readable when
 * the right rail is narrow. Viewport-based media queries don't help here
 * because rail width is decoupled from viewport. These rules look at the
 * panel-body's own width, so they fire when the panel itself is small
 * regardless of the screen size.
 */

@container panel (max-width: 480px) {
  body.ui-v2 .timeline-attribution-dimensions,
  body.ui-v2 .risk-history-latest,
  body.ui-v2 .trajectory-card-row,
  body.ui-v2 .driver-focus-card-row,
  body.ui-v2 .stage-fit-card-row,
  body.ui-v2 .benchmark-summary-grid,
  body.ui-v2 .portfolio-summary-grid,
  body.ui-v2 .diligence-summary-grid,
  body.ui-v2 .risk-delta-grid,
  body.ui-v2 .score-audit-metrics,
  body.ui-v2 .review-impact-summary,
  body.ui-v2 .review-impact-run-grid,
  body.ui-v2 .project-timeline-summary,
  body.ui-v2 .timeline-attribution-dimensions,
  body.ui-v2 .methodology-guide-grid,
  body.ui-v2 .memo-grid,
  body.ui-v2 .project-memo-preview-grid,
  body.ui-v2 .project-memo-diligence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container panel (max-width: 320px) {
  body.ui-v2 .timeline-attribution-dimensions,
  body.ui-v2 .risk-history-latest,
  body.ui-v2 .trajectory-card-row,
  body.ui-v2 .driver-focus-card-row,
  body.ui-v2 .stage-fit-card-row,
  body.ui-v2 .benchmark-summary-grid,
  body.ui-v2 .portfolio-summary-grid,
  body.ui-v2 .diligence-summary-grid,
  body.ui-v2 .risk-delta-grid,
  body.ui-v2 .score-audit-metrics,
  body.ui-v2 .review-impact-summary,
  body.ui-v2 .review-impact-run-grid,
  body.ui-v2 .methodology-guide-grid,
  body.ui-v2 .memo-grid,
  body.ui-v2 .project-memo-preview-grid,
  body.ui-v2 .project-memo-diligence-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Long unbreakable strings (source IDs, URLs, raw event keys) often live in
 * <code>-ish contexts inside panels. Allow them to break so they don't push
 * the panel wider than its container. This is targeted — we don't apply
 * word-break to all text, only to elements likely to carry unbroken tokens.
 */

body.ui-v2 .panel-body .eyebrow,
body.ui-v2 .panel-body .source-id,
body.ui-v2 .panel-body .row-meta,
body.ui-v2 .panel-body code,
body.ui-v2 .panel-body .timeline-evidence-chip,
body.ui-v2 .panel-body .row-notes,
body.ui-v2 .panel-body .model-evidence-keys,
body.ui-v2 .panel-body .model-evidence-keys span,
body.ui-v2 .panel-body .model-run-row,
body.ui-v2 .panel-body .evidence-row {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Timeline track keeps its internal horizontal scroll, but make sure the
 * scroll stays inside the panel — never propagate horizontal scroll up to
 * the aside.
 */

body.ui-v2 .panel-body .project-timeline-frame {
  max-width: 100%;
}

/*
 * Min-content collapse — Grid/flex items default to min-width: min-content,
 * which lets long words and indivisible tokens push tracks wider than their
 * parent. Inside a v2 panel-body we explicitly allow shrinking so column
 * tracks honour their container.
 */

body.ui-v2 .panel-body .score-audit-panel,
body.ui-v2 .panel-body .score-audit-grid,
body.ui-v2 .panel-body .score-audit-card,
body.ui-v2 .panel-body .score-audit-card-head,
body.ui-v2 .panel-body .score-audit-card-head > span,
body.ui-v2 .panel-body .score-audit-metrics > div,
body.ui-v2 .panel-body .risk-history-panel,
body.ui-v2 .panel-body .risk-history-latest,
body.ui-v2 .panel-body .trajectory-card-row,
body.ui-v2 .panel-body .driver-focus-card-row,
body.ui-v2 .panel-body .stage-fit-card-row,
body.ui-v2 .panel-body .benchmark-summary-grid,
body.ui-v2 .panel-body .portfolio-summary-grid,
body.ui-v2 .panel-body .diligence-summary-grid,
body.ui-v2 .panel-body .risk-delta-grid,
body.ui-v2 .panel-body .review-impact-summary,
body.ui-v2 .panel-body .review-impact-run-grid,
body.ui-v2 .panel-body .methodology-guide-grid,
body.ui-v2 .panel-body .memo-grid,
body.ui-v2 .panel-body .project-memo-preview-grid,
body.ui-v2 .panel-body .project-memo-diligence-grid,
body.ui-v2 .panel-body .timeline-attribution-dimensions {
  min-width: 0;
}

/*
 * Pixel-floor minmax tracks (`minmax(94px, 1fr)` etc.) are the second source
 * of overflow: even after a container-query reduces the column count, each
 * remaining track still claims its pixel floor. Inside v2 panels we drop
 * floors to 0 so columns can compress all the way to their content.
 *
 * Legacy chrome (`body:not(.ui-v2)`) keeps the original min widths because
 * those rules were tuned for the wider workbench main column.
 */

body.ui-v2 .panel-body .score-audit-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.ui-v2 .panel-body .benchmark-summary-grid,
body.ui-v2 .panel-body .portfolio-summary-grid,
body.ui-v2 .panel-body .diligence-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/*
 * Score-audit-panel/grid/card are nested `display: grid` containers with no
 * explicit `grid-template-columns`. The implicit single auto track is sized
 * to min-content, so even after children get `min-width: 0`, the track
 * itself refuses to compress. Anchoring each level to `minmax(0, 1fr)`
 * lets the tracks shrink to their parent's width.
 */

body.ui-v2 .panel-body .score-audit-panel,
body.ui-v2 .panel-body .score-audit-grid,
body.ui-v2 .panel-body .score-audit-card,
body.ui-v2 .panel-body .model-run-list,
body.ui-v2 .panel-body .risk-history-panel {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * Risk-driver action panel — three children in order: [projected-risk stat]
 * [linked-diligence text] [action button]. Original CSS used pixel floors
 * (`minmax(120px, 0.55fr) minmax(160px, 1fr) auto`) that overflow narrow
 * rails. Drop floors to 0 but keep the *shape*: stat auto, body 1fr, button
 * auto + nowrap so it doesn't get crushed to its padding.
 */

body.ui-v2 .panel-body .risk-driver-action-panel {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

@container panel (max-width: 360px) {
  body.ui-v2 .risk-driver-action-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ui-v2 .risk-driver-action-panel .risk-driver-action-button {
    justify-self: start;
  }
}

/*
 * Other `repeat(auto-fit, minmax(>0, 1fr))` patterns inside panels — drop
 * the pixel floor so columns wrap rather than overflow.
 */

body.ui-v2 .panel-body .score-audit-movers {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/*
 * Universal min-width:0 inside v2 panels — grid/flex items default to
 * `min-width: min-content`, which is the most common cause of nested
 * overflow. Resetting it lets every track honour its parent's width.
 * Scoped to .panel-body so legacy chrome and primary workbench columns
 * (where intrinsic sizing is the right default) are unaffected.
 */

body.ui-v2 .panel-body :where(div, section, article, ul, ol, li, p) {
  min-width: 0;
}

/*
 * Form controls — native <select> and <input> elements have an intrinsic
 * minimum width based on their content (the longest <option> label) that
 * ignores `min-width: 0`. Cap them to their container so they never blow
 * past the panel on narrow screens.
 */

body.ui-v2 .panel-body select,
body.ui-v2 .panel-body input[type="text"],
body.ui-v2 .panel-body input[type="search"],
body.ui-v2 .panel-body input[type="number"],
body.ui-v2 .panel-body input[type="url"],
body.ui-v2 .panel-body input[type="email"],
body.ui-v2 .panel-body textarea {
  max-width: 100%;
  min-width: 0;
}

/*
 * Score-audit-card-head is flex with `justify-content: space-between`. Its
 * inner <span> wraps eyebrow + label and needs min-width:0 to ellipsis cleanly
 * instead of pushing the card wider. The right-side <strong> can stay auto.
 */

body.ui-v2 .panel-body .score-audit-card-head {
  align-items: baseline;
  gap: var(--space-2);
}

body.ui-v2 .panel-body .score-audit-card-head > span {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.ui-v2 .panel-body .score-audit-card-head > strong {
  flex: none;
}

/* When closed, hide the body cleanly; when open, present it with breathing room */
body.ui-v2 .panel:not([open]) .panel-body {
  display: none;
}

/* Always-open headline area (no toggle) — used inside detail-header context */
body.ui-v2 .panel--static {
  border: 1px solid var(--color-line-200);
}

body.ui-v2 .panel--static .panel-summary {
  cursor: default;
}

body.ui-v2 .panel--static .panel-summary:hover {
  background: transparent;
}

body.ui-v2 .panel--static .panel-chevron {
  display: none;
}

/* Pinned panel — a quiet clay hairline on the leading edge marks a panel the
 * analyst floated to the top of its section. Reinforces the pin-button state
 * (styled above) without adding chrome. */
body.ui-v2 .panel:has(.panel-pin[data-pinned="true"]) {
  box-shadow: var(--selected-edge);
}

/* ============================================================ */
/*  UI-U2 dossier spine — section grouping + jump-nav            */
/* ============================================================ */

/*
 * The project detail rail is regrouped into 7 labelled sections (Identity ->
 * Verdict -> ... -> History & Activity). Section headers are quiet full-width
 * dividers with a mono section label (matching the chrome.css idiom), a panel
 * count, and per-section expand/collapse-all controls. A slim sticky chip row
 * (the jump-nav) sits above the spine; scroll-spy marks the active section.
 */

body.ui-v2 .dossier-nav {
  align-items: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-200);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

body.ui-v2 .dossier-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

body.ui-v2 .dossier-nav-chip {
  background: transparent;
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-pill);
  color: var(--color-steel-500);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  letter-spacing: var(--ls-overline);
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--motion-snap),
              border-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
  white-space: nowrap;
}

body.ui-v2 .dossier-nav-chip:hover {
  border-color: var(--color-line-300);
  color: var(--color-ink-800);
}

body.ui-v2 .dossier-nav-chip:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

body.ui-v2 .dossier-nav-chip.is-active {
  background: var(--color-brand-100);
  border-color: var(--color-brand-100);
  color: var(--color-brand-700);
}

body.ui-v2 .dossier-nav-reset {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-steel-400);
  cursor: pointer;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  letter-spacing: var(--ls-overline);
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
  white-space: nowrap;
}

body.ui-v2 .dossier-nav-reset:hover {
  background: var(--color-hover-overlay);
  color: var(--color-ink-800);
}

body.ui-v2 .dossier-nav-reset:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

body.ui-v2 .dossier-section {
  margin: 0 0 var(--space-8);
  scroll-margin-top: 64px;
}

body.ui-v2 .dossier-section-header {
  align-items: center;
  border-top: 1px solid var(--color-line-200);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
}

body.ui-v2 .dossier-section-heading {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

body.ui-v2 .dossier-section-label {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

body.ui-v2 .dossier-section-count {
  color: var(--color-steel-400);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
}

body.ui-v2 .dossier-section-controls {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

body.ui-v2 .dossier-section-toggle {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-steel-400);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  letter-spacing: var(--ls-overline);
  padding: var(--space-1) var(--space-2);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
  white-space: nowrap;
}

body.ui-v2 .dossier-section-toggle:hover {
  background: var(--color-hover-overlay);
  color: var(--color-ink-800);
}

body.ui-v2 .dossier-section-toggle:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Narrow rail: the section header's expand/collapse controls drop to keep the
 * label + count legible; the jump-nav chips scroll horizontally. */
@container rail (max-width: 420px) {
  body.ui-v2 .dossier-section-controls {
    display: none;
  }

  body.ui-v2 .dossier-nav-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* ============================================================ */
/*  Detail-panel container override for v2                      */
/* ============================================================ */

body.ui-v2 .detail-panel {
  /*
   * Establish a query container so descendants (e.g. the headline strip)
   * can respond to the rail's own width. inline-size containment is safe
   * here: the rail's width is set by the workbench grid track, not its
   * contents, and it leaves block/height sizing untouched.
   */
  container-name: rail;
  container-type: inline-size;
  padding: 0 var(--space-7) var(--space-9);
}

body.ui-v2 .detail-header {
  padding: var(--space-7) 0 0;
}

/* ============================================================ */
/*  Portfolio glance — strip above the Projects table           */
/* ============================================================ */

/*
 * Default: hidden. The host element is in the legacy markup so it would
 * otherwise leak into v1 chrome — keep it out of the document flow there.
 */
body:not(.ui-v2) .projects-glance {
  display: none;
}

body.ui-v2 .projects-glance {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
}

body.ui-v2 .projects-glance:empty {
  display: none;
}

body.ui-v2 .projects-glance-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

body.ui-v2 .projects-glance-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

body.ui-v2 .projects-glance-stat-label {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  line-height: 1;
  text-transform: uppercase;
}

body.ui-v2 .projects-glance-stat-value {
  color: var(--color-ink-800);
  font-family: var(--font-mono);
  font-size: var(--type-title-sm-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
}

body.ui-v2 .projects-glance-stat-value--missing {
  color: var(--color-steel-300);
}

body.ui-v2 .projects-glance-posture {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

body.ui-v2 .projects-glance-posture-label {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  line-height: 1;
  text-transform: uppercase;
}

body.ui-v2 .projects-glance-bar {
  background: var(--color-line-100);
  border-radius: var(--radius-pill);
  display: flex;
  height: 8px;
  overflow: hidden;
  width: 100%;
}

body.ui-v2 .projects-glance-bar-seg {
  background: var(--color-steel-300);
  display: block;
  flex: 1;
  min-width: 2px;
}

body.ui-v2 .projects-glance-bar-seg[data-posture="constructive"] {
  background: var(--color-positive-text);
}

body.ui-v2 .projects-glance-bar-seg[data-posture="watchlist"] {
  background: var(--color-warn-text);
}

body.ui-v2 .projects-glance-bar-seg[data-posture="caution"] {
  background: var(--color-risk-text);
}

body.ui-v2 .projects-glance-bar-seg[data-posture="unscored"] {
  background: var(--color-steel-300);
}

body.ui-v2 .projects-glance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

body.ui-v2 .projects-glance-legend-item {
  align-items: center;
  color: var(--color-steel-600);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  gap: var(--space-2);
}

body.ui-v2 .projects-glance-legend-swatch {
  background: var(--color-steel-300);
  border-radius: 2px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

body.ui-v2 .projects-glance-legend-item[data-posture="constructive"] .projects-glance-legend-swatch {
  background: var(--color-positive-text);
}

body.ui-v2 .projects-glance-legend-item[data-posture="watchlist"] .projects-glance-legend-swatch {
  background: var(--color-warn-text);
}

body.ui-v2 .projects-glance-legend-item[data-posture="caution"] .projects-glance-legend-swatch {
  background: var(--color-risk-text);
}

body.ui-v2 .projects-glance-legend-count {
  color: var(--color-ink-800);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

@media (max-width: 960px) {
  body.ui-v2 .projects-glance {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/*  Score badge — unified 5-tier severity chip                  */
/* ============================================================ */

/*
 * `.score-badge` replaces the binary `.score-chip` and `.score-chip.risk`
 * pair in v2. Same DOM site, different visual language: a 5-tier ramp
 * (very-low / low / medium / high / very-high) with polarity-aware tones
 * (a high "score" is good; a high "risk" is bad). Tier and polarity are
 * carried on data-attrs so the entire color logic lives in CSS.
 */

body.ui-v2 .score-badge {
  align-items: baseline;
  background: var(--color-neutral-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-ink-700);
  cursor: help;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

/* Score polarity (higher = better) */
body.ui-v2 .score-badge[data-polarity="score"][data-tier="very-low"]  { background: var(--color-risk-bg);     color: var(--color-risk-text); }
body.ui-v2 .score-badge[data-polarity="score"][data-tier="low"]       { background: var(--color-warn-bg);     color: var(--color-warn-text); }
body.ui-v2 .score-badge[data-polarity="score"][data-tier="medium"]    { background: var(--color-neutral-bg);  color: var(--color-steel-700); }
body.ui-v2 .score-badge[data-polarity="score"][data-tier="high"]      { background: var(--color-positive-bg); color: var(--color-positive-text); }
body.ui-v2 .score-badge[data-polarity="score"][data-tier="very-high"] {
  background: var(--color-positive-bg);
  border-color: var(--color-positive-text);
  color: var(--color-positive-text);
}

/* Risk polarity (higher = worse) */
body.ui-v2 .score-badge[data-polarity="risk"][data-tier="very-low"]   { background: var(--color-positive-bg); color: var(--color-positive-text); }
body.ui-v2 .score-badge[data-polarity="risk"][data-tier="low"]        { background: var(--color-positive-bg); color: var(--color-positive-text); }
body.ui-v2 .score-badge[data-polarity="risk"][data-tier="medium"]     { background: var(--color-neutral-bg);  color: var(--color-steel-700); }
body.ui-v2 .score-badge[data-polarity="risk"][data-tier="high"]       { background: var(--color-warn-bg);     color: var(--color-warn-text); }
body.ui-v2 .score-badge[data-polarity="risk"][data-tier="very-high"]  {
  background: var(--color-risk-bg);
  border-color: var(--color-risk-text);
  color: var(--color-risk-text);
}

body.ui-v2 .score-badge[data-tier="unknown"] {
  background: var(--color-neutral-bg);
  color: var(--color-steel-300);
}

/* ============================================================ */
/*  Diligence queue — priority list pattern                     */
/* ============================================================ */

/*
 * The Diligence Workspace renders a long flat list of `.diligence-queue-row`
 * cards plus a separate "Portfolio Enrichment Queue" of `.enrichment-trail-row`
 * cards. Both are inherently scannable lists where priority + factor are the
 * primary axes. v1 styles them with chunky left-borders and crowded metadata;
 * v2 reframes them as Linear/Stripe-style priority rows:
 *  - subtle ambient background, no heavy border-left
 *  - oversize priority chip in the top-left, tone-coded
 *  - title prominent, factor as eyebrow
 *  - metrics aligned to the right with mono numerals
 *  - hover lifts the row without changing its size (no layout shift)
 */

body.ui-v2 .diligence-queue-row {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-left: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  position: relative;
  transition: border-color var(--dur-fast) var(--motion-snap),
              box-shadow var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .diligence-queue-row::before {
  background: var(--color-steel-300);
  border-radius: var(--radius-pill);
  content: "";
  height: calc(100% - var(--space-5));
  left: 0;
  position: absolute;
  top: var(--space-3);
  width: 3px;
}

body.ui-v2 .diligence-queue-row.high::before    { background: var(--color-risk-text); }
body.ui-v2 .diligence-queue-row.medium::before  { background: var(--color-warn-text); }
body.ui-v2 .diligence-queue-row.low::before     { background: var(--color-positive-text); }
body.ui-v2 .diligence-queue-row.closed::before  { background: var(--color-steel-300); }

body.ui-v2 .diligence-queue-row:hover {
  background: var(--color-surface);
  border-color: var(--color-line-300);
  box-shadow: var(--elevation-1);
}

body.ui-v2 .diligence-queue-row.closed {
  opacity: 0.7;
}

body.ui-v2 .diligence-select-button {
  align-items: start;
  gap: var(--space-3);
}

body.ui-v2 .diligence-queue-row .priority-pill {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
  white-space: nowrap;
}

body.ui-v2 .diligence-queue-row.high .priority-pill {
  background: var(--color-risk-bg);
  border-color: transparent;
  color: var(--color-risk-text);
}

body.ui-v2 .diligence-queue-row.medium .priority-pill {
  background: var(--color-warn-bg);
  border-color: transparent;
  color: var(--color-warn-text);
}

body.ui-v2 .diligence-queue-row.low .priority-pill {
  background: var(--color-positive-bg);
  border-color: transparent;
  color: var(--color-positive-text);
}

body.ui-v2 .diligence-queue-row .diligence-title {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--type-body-md-lh);
}

body.ui-v2 .diligence-queue-row .diligence-action {
  color: var(--color-steel-600);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

body.ui-v2 .diligence-queue-row .diligence-workflow-note {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
}

body.ui-v2 .diligence-queue-row .diligence-metrics {
  align-items: end;
  color: var(--color-steel-600);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  gap: var(--space-1);
  text-align: right;
}

body.ui-v2 .diligence-queue-row .diligence-metrics > span:first-child {
  color: var(--color-ink-800);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-semibold);
}

body.ui-v2 .diligence-status-chip {
  background: var(--color-neutral-bg);
  border-radius: var(--radius-pill);
  color: var(--color-steel-600);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  letter-spacing: var(--ls-overline);
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
}

body.ui-v2 .diligence-status-chip.closed {
  background: var(--color-positive-bg);
  color: var(--color-positive-text);
}

body.ui-v2 .diligence-action-button,
body.ui-v2 .diligence-workflow-button {
  background: var(--color-surface);
  border: 1px solid var(--color-line-300);
  border-radius: var(--radius-sm);
  color: var(--color-ink-700);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  padding: var(--space-2) var(--space-3);
  transition: background-color var(--dur-fast) var(--motion-snap),
              border-color var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .diligence-action-button:hover,
body.ui-v2 .diligence-workflow-button:hover {
  background: var(--color-hover-overlay);
  border-color: var(--color-line-400, var(--color-line-300));
}

/*
 * Enrichment trail rows — the AI-discovered enrichment lane that lives below
 * the diligence queue. v1 styles it with a 4px brown left-border; v2 reuses
 * the priority-list visual language for visual consistency between the two
 * adjacent queues.
 */

body.ui-v2 .enrichment-trail-row {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-left: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  position: relative;
  transition: border-color var(--dur-fast) var(--motion-snap),
              box-shadow var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .enrichment-trail-row::before {
  background: var(--color-steel-300);
  border-radius: var(--radius-pill);
  content: "";
  height: calc(100% - var(--space-5));
  left: 0;
  position: absolute;
  top: var(--space-3);
  width: 3px;
}

body.ui-v2 .enrichment-trail-row.applied {
  background: var(--color-surface);
}

body.ui-v2 .enrichment-trail-row.applied::before {
  background: var(--color-positive-text);
}

body.ui-v2 .enrichment-trail-row.needs_review {
  background: var(--color-surface);
}

body.ui-v2 .enrichment-trail-row.needs_review::before {
  background: var(--color-warn-text);
}

body.ui-v2 .enrichment-trail-row:hover {
  border-color: var(--color-line-300);
  box-shadow: var(--elevation-1);
}

/* ============================================================ */
/*  Empty / loading / error states                              */
/* ============================================================ */

/*
 * v1 painted `.empty-state` as bare gray text. v2 reframes it as a card-like
 * state container: dashed border, neutral surface, icon + headline + optional
 * hint. The same markup (a `<div class="empty-state">text</div>`) renders
 * with the new look automatically — no JS changes for the 30+ call sites.
 *
 * Sister classes `.loading-state` and `.error-state` use the same chassis
 * with different polarity and a pseudo-element marker (spinner/error glyph).
 */

/*
 * Shared chassis for `.empty-state`, `.loading-state`, `.error-state`.
 * Each variant only overrides what differs (background, border-color,
 * indicator content) — the layout, typography, and padding live here.
 */

body.ui-v2 .empty-state,
body.ui-v2 .loading-state,
body.ui-v2 .error-state {
  align-items: center;
  background: var(--color-neutral-bg);
  border: 1px dashed var(--color-line-300);
  border-radius: var(--radius-md);
  color: var(--color-steel-500);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  gap: var(--space-2);
  justify-content: center;
  line-height: var(--type-body-sm-lh);
  min-height: 96px;
  padding: var(--space-5);
  text-align: center;
}

body.ui-v2 .empty-state strong,
body.ui-v2 .empty-state b {
  color: var(--color-ink-700);
  font-weight: var(--fw-semibold);
}

body.ui-v2 .empty-state::before {
  background: var(--color-line-300);
  border-radius: 50%;
  content: "";
  display: block;
  flex: none;
  height: 8px;
  width: 8px;
}

/* Loading variant — animated spinner indicator */

body.ui-v2 .empty-state.is-loading::before,
body.ui-v2 .loading-state::before {
  animation: spinner-rotate 720ms linear infinite;
  background: transparent;
  border: 2px solid var(--color-line-300);
  border-radius: 50%;
  border-top-color: var(--color-steel-500);
  content: "";
  display: block;
  flex: none;
  height: 14px;
  width: 14px;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Error variant — risk-tinted border + exclamation glyph */

body.ui-v2 .empty-state.is-error,
body.ui-v2 .error-state {
  background: var(--color-risk-bg);
  border-style: solid;
  border-color: var(--color-risk-text);
  color: var(--color-risk-text);
}

body.ui-v2 .empty-state.is-error::before,
body.ui-v2 .error-state::before {
  background: var(--color-risk-text);
  border-radius: 50%;
  color: var(--color-surface);
  content: "!";
  flex: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  height: 18px;
  line-height: 18px;
  text-align: center;
  width: 18px;
}

/*
 * Empty-state inside detail-panel / panel-body — keep it readable but
 * remove the dashed border since it would compete with the panel chrome.
 */

body.ui-v2 .panel-body .empty-state,
body.ui-v2 .detail-panel > .empty-state,
body.ui-v2 .detail-panel .detail-panel-section .empty-state {
  background: transparent;
  border: 0;
  min-height: auto;
  padding: var(--space-4) 0;
}

/*
 * Message region — used at workspace top for "Loading projects…" /
 * "No projects match…" / error messages. v2 styles it as an inline banner.
 */

body.ui-v2 .message-region {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  color: var(--color-steel-600);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
}

body.ui-v2 .message-region:empty {
  display: none !important;
}

body.ui-v2 .message-region.visible {
  display: block;
}

body.ui-v2 .message-region.error {
  background: var(--color-risk-bg);
  border-color: var(--color-risk-text);
  color: var(--color-risk-text);
}

body.ui-v2 .message-region.loading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

body.ui-v2 .message-region.loading::before {
  animation: spinner-rotate 720ms linear infinite;
  border: 2px solid var(--color-line-300);
  border-radius: 50%;
  border-top-color: var(--color-steel-500);
  content: "";
  display: block;
  flex: none;
  height: 12px;
  width: 12px;
}

/* ============================================================ */
/*  Sources tab — v2 chip system                                */
/* ============================================================ */

/*
 * `.source-strength-badge` is v1's source-quality indicator (Decision /
 * Supportive / Context / Weak). v2 re-uses the score-badge tier palette
 * so a Weak source reads visually identical to a high-risk score badge:
 * one tone language across the whole dashboard.
 */

body.ui-v2 .source-strength-badge {
  background: var(--color-neutral-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-steel-700);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  padding: var(--space-1) var(--space-3);
}

body.ui-v2 .source-strength-badge.decision {
  background: var(--color-positive-bg);
  color: var(--color-positive-text);
}

body.ui-v2 .source-strength-badge.supportive {
  background: var(--color-positive-bg);
  color: var(--color-positive-text);
  opacity: 0.85;
}

body.ui-v2 .source-strength-badge.context {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

body.ui-v2 .source-strength-badge.weak {
  background: var(--color-risk-bg);
  color: var(--color-risk-text);
}

/*
 * `.flag-chip` is v1's status/issue tag (Review pending / Missing X evidence
 * / informational). v2 maps the warning/risk/info variants to the v2 tone
 * tokens for visual consistency with status pills elsewhere.
 */

body.ui-v2 .flag-chip {
  background: var(--color-neutral-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-steel-600);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--ls-tight);
  min-height: 22px;
  padding: var(--space-1) var(--space-3);
}

body.ui-v2 .flag-chip.risk {
  background: var(--color-risk-bg);
  color: var(--color-risk-text);
}

body.ui-v2 .flag-chip.warning {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

body.ui-v2 .flag-chip.info {
  background: var(--color-info-bg, var(--color-neutral-bg));
  color: var(--color-info-text, var(--color-steel-600));
}

/* Source row spacing — let the chips breathe and align cleanly */
body.ui-v2 .source-row td {
  vertical-align: top;
}

/* ============================================================ */
/*  Benchmarks tab — driver chips + stage cohort rows           */
/* ============================================================ */

/*
 * `.benchmark-driver-chip` is the clickable filter chip on the driver-
 * drilldown row (Power 6, Regulatory 4, etc.). v1 styled them as heavy
 * brown badges. v2 turns them into neutral, monospaced "pill-with-count"
 * chips that highlight when the corresponding driver is the active focus.
 */

body.ui-v2 .benchmark-driver-chip {
  align-items: center;
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-pill);
  color: var(--color-ink-700);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  transition: background-color var(--dur-fast) var(--motion-snap),
              border-color var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .benchmark-driver-chip:hover {
  background: var(--color-hover-overlay);
  border-color: var(--color-line-300);
}

body.ui-v2 .benchmark-driver-chip[aria-pressed="true"],
body.ui-v2 .benchmark-driver-chip.active {
  background: var(--color-brand-100);
  border-color: var(--color-brand-600);
  color: var(--color-brand-700);
}

body.ui-v2 .benchmark-driver-chip span:last-child {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

body.ui-v2 .benchmark-driver-chip[aria-pressed="true"] span:last-child,
body.ui-v2 .benchmark-driver-chip.active span:last-child {
  color: var(--color-brand-700);
}

/*
 * `.benchmark-stage-cohort-row` — stage-band card with title, counts, and
 * a callout sentence. v2 styles it as a priority-list row matching the
 * diligence queue pattern: subtle border, accent strip on the left, hover lift.
 */

body.ui-v2 .benchmark-stage-cohort-row {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  position: relative;
  transition: border-color var(--dur-fast) var(--motion-snap),
              box-shadow var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .benchmark-stage-cohort-row::before {
  background: var(--color-steel-300);
  border-radius: var(--radius-pill);
  content: "";
  height: calc(100% - var(--space-5));
  left: 0;
  position: absolute;
  top: var(--space-3);
  width: 3px;
}

body.ui-v2 .benchmark-stage-cohort-row.has-exception::before,
body.ui-v2 .benchmark-stage-cohort-row.high-for-stage::before {
  background: var(--color-risk-text);
}

body.ui-v2 .benchmark-stage-cohort-row.de-risked::before {
  background: var(--color-positive-text);
}

body.ui-v2 .benchmark-stage-cohort-row:hover {
  border-color: var(--color-line-300);
  box-shadow: var(--elevation-1);
}

body.ui-v2 .benchmark-stage-cohort-title strong {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-semibold);
}

body.ui-v2 .benchmark-stage-cohort-title span {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
}

/* ============================================================ */
/*  Responsive                                                  */
/* ============================================================ */

@media (max-width: 960px) {
  body.ui-v2 .headline-strip {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
  body.ui-v2 .panel-summary {
    padding: var(--space-4) var(--space-5);
  }
  body.ui-v2 .panel-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
  body.ui-v2 .detail-panel {
    padding: 0 var(--space-5) var(--space-7);
  }
  body.ui-v2 .diligence-queue-row {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ui-v2 .diligence-queue-row .diligence-metrics {
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
  }
}

/*
 * Mobile IA — single-column workbench at <= 720px.
 *
 * The desktop layout is a 2-column grid (list + 360px-min detail rail).
 * On a phone that forces horizontal scroll. We:
 *  - Collapse the workbench to a single column
 *  - Drop the rail's 360px min so it takes the full viewport width
 *  - Stack the glance strip vertically for breathing room
 *  - Make the project pane title row stack (title + filter input below)
 *  - Make the table's columns prioritize project + score, hide deploy
 *    (location is reachable in the row's project-id subline)
 */

@media (max-width: 720px) {
  body.ui-v2 .workbench {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  body.ui-v2 .project-pane,
  body.ui-v2 .detail-panel {
    min-width: 0;
  }

  body.ui-v2 .detail-panel {
    padding: 0 var(--space-4) var(--space-6);
  }

  body.ui-v2 .pane-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  body.ui-v2 .pane-header input[type="search"],
  body.ui-v2 .pane-header .filter-controls {
    width: 100%;
  }

  body.ui-v2 .projects-glance {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  body.ui-v2 .projects-glance-stats {
    gap: var(--space-4);
  }

  /* Table compaction — hide deploy column (auto-revealed via row meta) */
  body.ui-v2 .project-table th:nth-child(5),
  body.ui-v2 .project-table td:nth-child(5) {
    display: none;
  }

  /* Detail-panel headline gets less vertical padding on mobile */
  body.ui-v2 .detail-header {
    padding: var(--space-5) 0 0;
  }

  body.ui-v2 .headline-strip {
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-5);
  }

  /*
   * Table-wrap holds an unconstrained <table> that wants to be ~760px wide.
   * Without min-width:0 on its grid-item parent, the table forces the whole
   * project-pane (and body) to stretch. min-width:0 lets table-wrap claim
   * only its parent's width and use overflow-x:auto for internal scroll.
   */
  body.ui-v2 .project-pane,
  body.ui-v2 .table-wrap,
  body.ui-v2 .pane-header {
    min-width: 0;
    max-width: 100%;
  }

  body.ui-v2 .table-wrap {
    overflow-x: auto;
  }
}

/* ============================================================ */
/*  Project status chip — stage-keyed color (PE-CRITIQUE M-1)   */
/* ============================================================ */
/*                                                              */
/*  Color maps to the deal-lifecycle phase so analysts can      */
/*  triage Projects-table rows at a glance:                     */
/*                                                              */
/*    announced         -> info (early signal)                  */
/*    permitting        -> warn (active regulatory)             */
/*    under_construction-> brand (active execution, where the   */
/*                         analyst's attention should commit)   */
/*    energized         -> positive (delivered)                 */
/*                                                              */
/*  Unknown / source-review statuses keep the base neutral chip */
/*  styling defined in styles.css.                              */

body.ui-v2 .status-chip[data-status="announced"] {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}

body.ui-v2 .status-chip[data-status="permitting"] {
  background: var(--color-warn-bg);
  border-color: var(--color-warn-border);
  color: var(--color-warn-text);
}

body.ui-v2 .status-chip[data-status="under_construction"] {
  background: var(--color-brand-100);
  border-color: var(--color-brand-500);
  color: var(--color-brand-700);
}

body.ui-v2 .status-chip[data-status="energized"] {
  background: var(--color-positive-bg);
  border-color: var(--color-positive-border);
  color: var(--color-positive-text);
}

/* ============================================================ */
/*  Panel glossary disclosure (PE-CRITIQUE H-3)                 */
/* ============================================================ */
/*                                                              */
/*  Native <details> "What is this?" entry that appears at the  */
/*  top of vocabulary-loaded panels (Investor Brief, Investor   */
/*  Risk, Evidence Readiness, Benchmark, Stage Risk Fit).       */
/*  Muted styling so it never competes with panel data; the     */
/*  goal is "discoverable when needed, invisible otherwise."    */

body.ui-v2 .panel-glossary {
  background: var(--color-paper-tint);
  border: 1px solid var(--color-line-100);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
}

body.ui-v2 .panel-glossary-summary {
  color: var(--color-steel-500);
  cursor: pointer;
  font-size: var(--type-caption-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  list-style: none;
  user-select: none;
}

body.ui-v2 .panel-glossary-summary::-webkit-details-marker {
  display: none;
}

body.ui-v2 .panel-glossary-summary::before {
  content: "ⓘ";
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--color-info-text);
}

body.ui-v2 .panel-glossary[open] .panel-glossary-summary {
  color: var(--color-steel-600);
}

body.ui-v2 .panel-glossary-body {
  color: var(--color-steel-600);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  margin: var(--space-3) 0 var(--space-1);
}

/* ============================================================ */
/*  Diligence sort pill (PE-CRITIQUE H-4)                       */
/* ============================================================ */
/*                                                              */
/*  "Highest impact first" chip in the Diligence Workspace      */
/*  header. The list was already priority-sorted, but with no   */
/*  visible cue an analyst staring at 52 items at 7 a.m.        */
/*  couldn't tell whether to trust the order. The chip is a     */
/*  static affordance that answers "what should I read first?". */

.diligence-pane-meta {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

body.ui-v2 .sort-pill {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-pill);
  color: var(--color-info-text);
  display: inline-flex;
  font-size: var(--type-caption-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

body.ui-v2 .sort-pill::before {
  content: "↓ ";
  margin-right: var(--space-2);
  opacity: 0.7;
}

/* ============================================================ */
/*  Empty-state CTA (PE-CRITIQUE M-6)                           */
/* ============================================================ */
/*                                                              */
/*  Replaces "No X records." shrug states with a specific       */
/*  "what evidence is missing" sentence + a button that routes  */
/*  the analyst to the panel or tab where the gap can be        */
/*  resolved (Evidence Readiness gap form for site / financing  */
/*  gaps; Sources tab for cost-disclosure ingest).              */

body.ui-v2 .empty-state--with-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

body.ui-v2 .empty-state-description {
  color: var(--color-steel-600);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  margin: 0;
}

/* PE-CRITIQUE cheap win #3: the "Next: <action>" line surfaces the live
 * analyst_action from the evidence model right below the hardcoded "why"
 * description, so the empty panel doubles as the gap-resolution prompt
 * without forcing the analyst into the Evidence Readiness panel first. */
body.ui-v2 .empty-state-next-action {
  color: var(--color-ink-800);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  margin: 0;
}

body.ui-v2 .empty-state-next-action strong {
  font-weight: var(--fw-semibold);
  color: var(--color-ink-900);
}

body.ui-v2 .empty-state-cta {
  align-self: flex-start;
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-500);
  border-radius: var(--radius-sm);
  color: var(--color-brand-700);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-medium);
  padding: var(--space-2) var(--space-4);
  transition: background var(--dur-fast) var(--motion-snap);
}

body.ui-v2 .empty-state-cta:hover {
  background: var(--color-brand-100);
}

body.ui-v2 .empty-state-cta:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ============================================================ */
/*  Filings applicant chip (PE-CRITIQUE M-9)                    */
/* ============================================================ */
/*                                                              */
/*  Third-party permit applicant rendered as a labeled chip     */
/*  *above* the prose blurb, so it is impossible to misread a   */
/*  TCEQ Armstrong County filing as a Google application when   */
/*  Crusoe Energy Systems is the actual applicant. Warn-tinted  */
/*  to draw the eye in PE deal review.                          */

body.ui-v2 .filing-applicant-chip {
  align-items: baseline;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
}

body.ui-v2 .filing-applicant-label {
  color: var(--color-warn-text);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

body.ui-v2 .filing-applicant-name {
  color: var(--color-ink-800);
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-medium);
}

/* PE-CRITIQUE cheap win #1: the risk-legend chip lives next to "Overall Risk"
   wherever it appears. Tiny 14px circle so it never competes with the value;
   tabindex=0 + focus state so keyboard users can read the tooltip too. */
body.ui-v2 .risk-legend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2xs);
  padding: 0;
  border: 1px solid var(--color-ink-300);
  border-radius: 50%;
  background: var(--color-surface-1);
  color: var(--color-ink-600);
  font-size: 10px;
  font-style: italic;
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

body.ui-v2 .risk-legend-chip:hover,
body.ui-v2 .risk-legend-chip:focus-visible {
  border-color: var(--color-brand-500);
  color: var(--color-brand-700);
  outline: none;
}

body.ui-v2 .risk-legend-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-sm) 0;
  padding: var(--space-2xs) var(--space-xs);
  border-left: 2px solid var(--color-ink-200);
  background: var(--color-surface-1);
  color: var(--color-ink-600);
  font-size: var(--type-body-sm-size);
  line-height: 1.4;
}

body.ui-v2 .risk-legend-line .risk-legend-chip {
  flex-shrink: 0;
  margin-top: 2px;
  margin-left: 0;
}

/* PE-CRITIQUE cheap win #7: small warn-toned counter that rides inside the
   Sources view-switch button. Stays out of the way (small, tucked inline)
   when the queue is reasonable, but the warn color and weight make it
   register without being alarmist. hidden attribute hides it at zero so
   a fully-reviewed corpus shows no chrome. */
.needs-review-pill,
body.ui-v2 .needs-review-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: var(--space-2xs, 4px);
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-warn-100, #fff4d6);
  color: var(--color-warn-800, #6a4400);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

.needs-review-pill[hidden],
body.ui-v2 .needs-review-pill[hidden] {
  display: none;
}

/* PE-CRITIQUE #14: counterparty (entity) panel chips. Credit rating tone
   keys off rating tier so an analyst sees "BBB" green and "CCC" warn
   without reading the letters. Ticker is monospace -- the analyst's
   eye routes "GOOGL" through a different muscle than prose. The
   "(CDS + EBITDA coverage coming)" tooltip on the rating signals that
   this is the scaffold for richer credit data, not the final form. */
body.ui-v2 .entity-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

body.ui-v2 .entity-ticker-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  height: 20px;
  border-radius: 4px;
  background: var(--color-surface-2, #f4f6f9);
  color: var(--color-ink-800);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.ui-v2 .entity-role-group-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  height: 20px;
  border-radius: 4px;
  background: var(--color-surface-3, #e8edf3);
  color: var(--color-ink-700);
  font-size: 11px;
  font-weight: 600;
}

body.ui-v2 .entity-public-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  height: 20px;
  border-radius: 9999px;
  background: var(--color-info-100, #e6f0ff);
  color: var(--color-info-800, #14387c);
  font-size: 11px;
  font-weight: 600;
}

body.ui-v2 .entity-credit-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  height: 20px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.ui-v2 .entity-credit-chip[data-tier="ig-high"] {
  background: var(--color-positive-100, #e6f7ec);
  color: var(--color-positive-800, #0f5a2c);
}

body.ui-v2 .entity-credit-chip[data-tier="ig-low"] {
  background: var(--color-positive-100, #e6f7ec);
  color: var(--color-positive-700, #1b6b39);
  border: 1px dashed var(--color-positive-700, #1b6b39);
}

body.ui-v2 .entity-credit-chip[data-tier="hy-high"] {
  background: var(--color-warn-100, #fff4d6);
  color: var(--color-warn-800, #6a4400);
}

body.ui-v2 .entity-credit-chip[data-tier="hy-low"],
body.ui-v2 .entity-credit-chip[data-tier="unknown"] {
  background: var(--color-warn-200, #ffe6b3);
  color: var(--color-warn-900, #4d2f00);
}

body.ui-v2 .entity-asset-tier-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  height: 20px;
  border-radius: 9999px;
  background: var(--color-surface-2, #f4f6f9);
  color: var(--color-ink-700);
  font-size: 11px;
  font-weight: 500;
}

/* PE-CRITIQUE #9: MW capture summary surfaces the precedence ladder
   (energized > committed > announced) at a glance so an analyst sees
   "Energized 0 MW, Committed 1200 MW, Announced 1500 MW" and reads
   the gap between announcement and reality immediately. */
body.ui-v2 .mw-capture-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

body.ui-v2 .mw-capture-summary-cell {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  border-radius: 6px;
  background: var(--color-surface-1);
  border-left: 3px solid var(--color-ink-200);
}

body.ui-v2 .mw-capture-summary-cell[data-scope="energized"] {
  border-left-color: var(--color-positive-700, #1b6b39);
}

body.ui-v2 .mw-capture-summary-cell[data-scope="committed"] {
  border-left-color: var(--color-info-700, #1c5bb8);
}

body.ui-v2 .mw-capture-summary-cell[data-scope="announced"] {
  border-left-color: var(--color-warn-700, #8a5500);
}

body.ui-v2 .mw-capture-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-600);
}

body.ui-v2 .mw-capture-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink-900);
  margin: 2px 0;
}

body.ui-v2 .mw-capture-summary-meta {
  font-size: 11px;
  color: var(--color-ink-500);
  font-style: normal;
}

body.ui-v2 .mw-capture-form .mw-capture-target {
  margin-bottom: var(--space-xs);
  color: var(--color-ink-700);
  font-size: var(--type-body-sm-size);
}

body.ui-v2 .mw-capture-form .mw-capture-hint {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 11px;
  color: var(--color-ink-600);
  font-style: italic;
}

/* PE-CRITIQUE #12: inline GIS add form is the analyst's escape hatch from
   an empty GIS Context panel. Visually separated by a top border so it
   doesn't blend with the feature rows above when both exist. */
body.ui-v2 .gis-inline-add-form {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-ink-200);
}

body.ui-v2 .gis-inline-add-title {
  margin: 0 0 var(--space-2xs) 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-800);
}

body.ui-v2 .gis-inline-add-helper {
  margin: 0 0 var(--space-sm) 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-ink-600);
}

/*
 * PE-CRITIQUE #10: peer-scope widening line.
 *
 * Shown above the Benchmark metric grid when the project's natural peer scope
 * (state + status + mw_class) had <5 peers and the ladder had to widen. The
 * "used" rung is bolded so the analyst can see which scope drove the deltas
 * without reading the prose in calculation_notes.
 */
body.ui-v2 .peer-scope-widened-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm) 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-warning-600, #b45309);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink-700);
}

body.ui-v2 .peer-scope-widened-line .peer-scope-label {
  font-weight: var(--fw-semibold);
  color: var(--color-ink-800);
}

body.ui-v2 .peer-scope-widened-line .peer-scope-chain {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}

body.ui-v2 .peer-scope-widened-line .peer-scope-rung {
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .peer-scope-widened-line .peer-scope-rung.used {
  font-weight: var(--fw-semibold);
  color: var(--color-ink-900);
}

body.ui-v2 .peer-scope-widened-line .peer-scope-arrow {
  color: var(--color-ink-500);
}

/*
 * PE-CRITIQUE LOW (source URL snapshot): Wayback Machine chip beside each
 * source link. Renders inline + small + subdued so the live link stays the
 * primary call-to-action, but the snapshot path is one click away whenever
 * a regulator URL rots or a sponsor moves a blog post. Subtle enough that
 * a quiet panel doesn't shout "archive me" -- analyst sees it on hover.
 */
body.ui-v2 .source-snapshot-link,
.source-snapshot-link {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-ink-600, #555);
  background: var(--color-surface-2, #f4f4f4);
  border: 1px solid var(--color-border-subtle, #d8d8d8);
  border-radius: 3px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background 120ms ease-out, color 120ms ease-out;
}

body.ui-v2 .source-snapshot-link::before,
.source-snapshot-link::before {
  content: "\2197"; /* ↗ — outbound + archive feel */
  margin-right: 3px;
  font-size: 10px;
}

body.ui-v2 .source-snapshot-link:hover,
.source-snapshot-link:hover {
  background: var(--color-brand-50, #eef);
  color: var(--color-brand-700, #1a4080);
  border-color: var(--color-brand-500, #335599);
}

/*
 * PE-CRITIQUE Wishlist #6: side-by-side comparison workspace.
 *
 * Grid layout uses CSS Grid with --compare-count column-count variable
 * set inline by the renderer. Metric label column is fixed-width on the
 * left (200px); each project column shares the remaining width equally,
 * so 2-3 projects get wide readable cells and 5-6 projects get tighter
 * cells without overflow. Sticky header row + sticky label column means
 * the analyst can scroll a long list of metrics without losing context.
 */

body.ui-v2 .compare-workbench {
  padding: var(--space-lg) var(--space-xl);
}

body.ui-v2 .compare-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

body.ui-v2 .compare-picker-label {
  font-weight: var(--fw-semibold);
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-800);
}

body.ui-v2 .compare-picker-help {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-600);
  line-height: 1.4;
}

body.ui-v2 #compare-picker-input {
  max-width: 460px;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--type-body-sm-size);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-ink-900);
}

body.ui-v2 .compare-selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

body.ui-v2 .compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--color-brand-50, #eef);
  border: 1px solid var(--color-brand-500, #335599);
  border-radius: 12px;
  font-size: 12px;
  color: var(--color-brand-700, #1a4080);
}

body.ui-v2 .compare-chip-label {
  font-weight: var(--fw-medium);
}

body.ui-v2 .compare-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-brand-700, #1a4080);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

body.ui-v2 .compare-chip-remove:hover {
  background: var(--color-brand-500, #335599);
  color: white;
}

body.ui-v2 .compare-empty-chip {
  color: var(--color-ink-500);
  font-size: 12px;
  font-style: italic;
}

body.ui-v2 .compare-grid {
  margin-top: var(--space-md);
  overflow-x: auto;
}

body.ui-v2 .compare-grid-table {
  display: grid;
  grid-template-columns: 200px repeat(var(--compare-count, 2), minmax(180px, 1fr));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  min-width: max-content;
}

body.ui-v2 .compare-grid-row {
  display: contents;
}

body.ui-v2 .compare-grid-cell {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--type-body-sm-size);
  line-height: 1.4;
  color: var(--color-ink-800);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .compare-grid-row:last-child .compare-grid-cell {
  border-bottom: none;
}

body.ui-v2 .compare-grid-header .compare-grid-cell {
  background: var(--color-surface-2);
  border-bottom: 2px solid var(--color-border-strong, #999);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-900);
  position: sticky;
  top: 0;
  z-index: 2;
}

body.ui-v2 .compare-grid-corner,
body.ui-v2 .compare-grid-label {
  background: var(--color-surface-2);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-900);
  position: sticky;
  left: 0;
  z-index: 1;
}

body.ui-v2 .compare-grid-header-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.ui-v2 .compare-grid-header-meta {
  font-size: 11px;
  font-weight: var(--fw-normal);
  color: var(--color-ink-600);
}

body.ui-v2 .compare-row-headline .compare-grid-cell {
  background: var(--color-surface-2);
  font-weight: var(--fw-semibold);
}

body.ui-v2 .compare-row-factor .compare-grid-label {
  font-weight: var(--fw-normal);
  color: var(--color-ink-700);
  padding-left: var(--space-md);
}

body.ui-v2 .compare-factor-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

body.ui-v2 .compare-factor-cell strong {
  font-size: 14px;
}

body.ui-v2 .compare-factor-label {
  font-size: 11px;
  color: var(--color-ink-600);
  font-weight: var(--fw-medium);
}

body.ui-v2 .compare-factor-delta {
  font-size: 11px;
  color: var(--color-ink-500);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .compare-sponsor-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

body.ui-v2 .compare-sponsor-cell strong {
  font-size: 13px;
}

body.ui-v2 .compare-sponsor-ticker,
body.ui-v2 .compare-sponsor-rating,
body.ui-v2 .compare-sponsor-tier {
  display: inline-block;
  font-size: 11px;
  color: var(--color-ink-600);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .compare-cell-muted {
  color: var(--color-ink-500);
  font-style: italic;
  font-size: 12px;
}

/*
 * PE-CRITIQUE Wishlist #13: Anomalies panel. Severity drives the LEFT-edge
 * accent (border-left + dot) instead of full background fill -- a 4px accent
 * is loud enough to scan, but a saturated background would compete with the
 * adjacent Risk Panel chips. High severity uses the canonical danger color
 * the rest of the app uses for raises_risk impacts so analysts can map the
 * cue across panels.
 */

body.ui-v2 .anomaly-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .anomaly-row {
  border: 1px solid var(--color-border-subtle, #d8d8e0);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--color-surface-elevated, #ffffff);
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.ui-v2 .anomaly-row.anomaly-high {
  border-left-color: #c0392b;
  background: #fff5f3;
}

body.ui-v2 .anomaly-row.anomaly-medium {
  border-left-color: #d68910;
  background: #fff9ef;
}

body.ui-v2 .anomaly-row.anomaly-low {
  border-left-color: #8884a0;
  background: #fafafd;
}

body.ui-v2 .anomaly-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

body.ui-v2 .anomaly-severity-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-500);
  flex-shrink: 0;
}

body.ui-v2 .anomaly-high .anomaly-severity-dot {
  background: #c0392b;
}

body.ui-v2 .anomaly-medium .anomaly-severity-dot {
  background: #d68910;
}

body.ui-v2 .anomaly-low .anomaly-severity-dot {
  background: #8884a0;
}

body.ui-v2 .anomaly-severity-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-ink-600);
}

body.ui-v2 .anomaly-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .anomaly-description {
  font-size: 12px;
  color: var(--color-ink-700);
  line-height: 1.45;
  margin-bottom: 6px;
}

body.ui-v2 .anomaly-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

body.ui-v2 .anomaly-source {
  font-size: 11px;
  color: var(--color-ink-600);
  background: var(--color-surface-muted, #f0f0f4);
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .anomaly-action {
  font-size: 12px;
  color: var(--color-ink-700);
  line-height: 1.45;
}

/*
 * PE-CRITIQUE Structural #14: Tenant Credit panel. The anchor counterparty
 * gets a CARD treatment (larger, prominent role chip, badge row) because
 * its credit is the deal's primary credit anchor. Supporting counterparties
 * sit below as compact rows -- present so the analyst sees the bench, but
 * visually subordinate. The gap_disclosure box uses the same warning tint
 * as the peer-scope-widened-line so missing-credit reads as caution.
 */

body.ui-v2 .tenant-credit-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .tenant-credit-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body.ui-v2 .tenant-credit-gap {
  font-size: 12px;
  color: var(--color-ink-700);
  background: #fff9ef;
  border-left: 4px solid #d68910;
  padding: 8px 10px;
  border-radius: 4px;
  line-height: 1.45;
}

body.ui-v2 .tenant-credit-anchor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-border-subtle, #d8d8e0);
  border-left: 4px solid #2c3e8a;
  border-radius: 6px;
  background: var(--color-surface-elevated, #ffffff);
}

body.ui-v2 .tenant-credit-role-chip {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-ink-600);
  background: var(--color-surface-muted, #f0f0f4);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

body.ui-v2 .tenant-credit-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-900);
  overflow-wrap: anywhere;
}

body.ui-v2 .tenant-credit-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

body.ui-v2 .tenant-credit-ticker,
body.ui-v2 .tenant-credit-rating,
body.ui-v2 .tenant-credit-tier,
body.ui-v2 .tenant-credit-private {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .tenant-credit-ticker {
  background: #eef3ff;
  color: #2c3e8a;
  font-weight: 600;
}

body.ui-v2 .tenant-credit-rating {
  background: var(--color-surface-muted, #f0f0f4);
  color: var(--color-ink-700);
  font-weight: 600;
}

body.ui-v2 .tenant-credit-tier {
  background: var(--color-surface-muted, #f0f0f4);
  color: var(--color-ink-600);
}

body.ui-v2 .tenant-credit-private {
  background: #f5f5f7;
  color: var(--color-ink-500);
  font-style: italic;
}

body.ui-v2 .tenant-credit-source {
  font-size: 11px;
  color: var(--color-ink-500);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .tenant-credit-supporting {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.ui-v2 .tenant-credit-supporting-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--color-border-subtle, #e5e5ec);
  border-radius: 4px;
  background: var(--color-surface-muted, #fafafd);
  overflow-wrap: anywhere;
}

body.ui-v2 .tenant-credit-supporting-role {
  color: var(--color-ink-600);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.ui-v2 .tenant-credit-supporting-name {
  color: var(--color-ink-900);
}

body.ui-v2 .tenant-credit-supporting-rating {
  color: var(--color-ink-700);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/*
 * PE-CRITIQUE Structural #13: risk-trend disclosure banner. Sits above the
 * risk_history chart so the label and the chart are visually co-located --
 * an analyst's eye reads the label, then the chart, in the same glance.
 * The trend-* color is muted vs. the trajectory_summary block because this
 * is a disclosure (window context), not the headline. trend-worsening
 * uses the same danger tint the trend chip does in the portfolio table so
 * the visual cue is consistent across surfaces.
 */

body.ui-v2 .risk-trend-disclosure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-left: 4px solid var(--color-ink-400, #8884a0);
  background: var(--color-surface-muted, #f5f5f7);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

body.ui-v2 .risk-trend-disclosure.trend-improving {
  border-left-color: #2e8b57;
  background: #f0f8f3;
}

body.ui-v2 .risk-trend-disclosure.trend-worsening {
  border-left-color: #c0392b;
  background: #fff5f3;
}

body.ui-v2 .risk-trend-disclosure.trend-flat {
  border-left-color: #8884a0;
  background: #f5f5f7;
}

body.ui-v2 .risk-trend-disclosure.trend-new {
  border-left-color: #2c3e8a;
  background: #eef3ff;
}

body.ui-v2 .risk-trend-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .risk-trend-window {
  font-size: 11px;
  color: var(--color-ink-600);
  font-variant-numeric: tabular-nums;
}

/*
 * PE-CRITIQUE Wishlist #5: Tenant Offtake panel. The summary strip at the
 * top uses a 3-cell grid so the analyst can scan anchor/commitment/
 * readiness in one glance. Commitments and structured-gaps live in
 * distinct sections below -- the gap list uses an ordered list with a
 * left-edge warning accent so the missing fields are visually treated
 * as outstanding DD items, not decorative copy. Readiness chip is the
 * single most important cue: not-ready = the deal cannot be offtake-
 * underwritten yet, full stop.
 */

body.ui-v2 .tenant-offtake-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .tenant-offtake-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body.ui-v2 .tenant-offtake-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.ui-v2 .tenant-offtake-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--color-surface-muted, #fafafd);
  border: 1px solid var(--color-border-subtle, #e5e5ec);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

body.ui-v2 .tenant-offtake-summary-cell > span {
  font-size: 10px;
  color: var(--color-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.ui-v2 .tenant-offtake-summary-cell > strong {
  font-size: 13px;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .tenant-offtake-readiness.ready {
  background: #f0f8f3;
  border-color: #2e8b57;
}

body.ui-v2 .tenant-offtake-readiness.ready > strong {
  color: #1f6e44;
}

body.ui-v2 .tenant-offtake-readiness.not-ready {
  background: #fff9ef;
  border-color: #d68910;
}

body.ui-v2 .tenant-offtake-readiness.not-ready > strong {
  color: #8e5d0a;
}

body.ui-v2 .tenant-offtake-section-title {
  margin: 0 0 6px 0;
  font-size: 11px;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .tenant-offtake-commitments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .tenant-offtake-commitment-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle, #e5e5ec);
  border-radius: 4px;
  background: var(--color-surface-elevated, #ffffff);
  overflow-wrap: anywhere;
}

body.ui-v2 .tenant-offtake-commitment-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

body.ui-v2 .tenant-offtake-tenant {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .tenant-offtake-amount {
  font-size: 13px;
  color: var(--color-ink-700);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body.ui-v2 .tenant-offtake-commitment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--color-ink-600);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .tenant-offtake-phase,
body.ui-v2 .tenant-offtake-date {
  background: var(--color-surface-muted, #f0f0f4);
  padding: 2px 6px;
  border-radius: 4px;
}

body.ui-v2 .tenant-offtake-source-link {
  color: #2c3e8a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.ui-v2 .tenant-offtake-notes {
  font-size: 11px;
  color: var(--color-ink-600);
  line-height: 1.4;
  font-style: italic;
}

body.ui-v2 .tenant-offtake-gaps {
  border-left: 4px solid #d68910;
  background: #fff9ef;
  padding: 8px 12px;
  border-radius: 4px;
}

body.ui-v2 .tenant-offtake-gap-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .tenant-offtake-gap-row {
  font-size: 12px;
  color: var(--color-ink-700);
}

body.ui-v2 .tenant-offtake-gap-label {
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .tenant-offtake-gap-question {
  font-size: 11px;
  color: var(--color-ink-600);
  margin-top: 2px;
  line-height: 1.4;
}

/*
 * PE-CRITIQUE Wishlist #2: IRR/DCF panel. Base case gets a large 2-cell
 * grid so IRR + NPV are scannable at a glance. Sensitivity table uses
 * tabular numerals so the analyst's eye can compare columns without
 * font-width jitter. The gap section mirrors the Tenant Offtake panel
 * (numbered DD items with amber warning tint) so the missing-input
 * convention reads consistently across the rail.
 */

body.ui-v2 .irr-dcf-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .irr-dcf-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
}

body.ui-v2 .irr-dcf-readiness {
  align-self: flex-start;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

body.ui-v2 .irr-dcf-readiness.ready {
  background: #f0f8f3;
  color: #1f6e44;
  border: 1px solid #2e8b57;
}

body.ui-v2 .irr-dcf-readiness.not-ready {
  background: #fff9ef;
  color: #8e5d0a;
  border: 1px solid #d68910;
}

body.ui-v2 .irr-dcf-base {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.ui-v2 .irr-dcf-base-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: #eef3ff;
  border: 1px solid #2c3e8a;
  border-radius: 6px;
  text-align: center;
}

body.ui-v2 .irr-dcf-base-cell > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-600);
  font-weight: 600;
}

body.ui-v2 .irr-dcf-base-cell > strong {
  font-size: 20px;
  color: #2c3e8a;
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .irr-dcf-section-title {
  margin: 0 0 6px 0;
  font-size: 11px;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .irr-dcf-sensitivity table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body.ui-v2 .irr-dcf-sensitivity th,
body.ui-v2 .irr-dcf-sensitivity td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--color-border-subtle, #e5e5ec);
  text-align: left;
}

body.ui-v2 .irr-dcf-sensitivity th {
  color: var(--color-ink-600);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.ui-v2 .irr-dcf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .irr-dcf-delta.positive {
  color: #1f6e44;
}

body.ui-v2 .irr-dcf-delta.negative {
  color: #c0392b;
}

body.ui-v2 .irr-dcf-inputs dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4px 8px;
  font-size: 12px;
}

body.ui-v2 .irr-dcf-inputs dt {
  color: var(--color-ink-600);
}

body.ui-v2 .irr-dcf-inputs dd {
  margin: 0;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .irr-dcf-source {
  color: var(--color-ink-500);
  font-size: 11px;
  font-style: italic;
}

body.ui-v2 .irr-dcf-gaps {
  border-left: 4px solid #d68910;
  background: #fff9ef;
  padding: 8px 12px;
  border-radius: 4px;
}

body.ui-v2 .irr-dcf-gap-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

body.ui-v2 .irr-dcf-gap-label {
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .irr-dcf-gap-question {
  font-size: 11px;
  color: var(--color-ink-600);
  margin-top: 2px;
  line-height: 1.4;
}

/*
 * PE-CRITIQUE Wishlist #12: confidence ribbons. Visually subordinate to
 * the score they qualify -- the analyst's eye lands on the number,
 * then catches the ribbon as a "and here's how much to trust it"
 * follow-up. Color encodes confidence: green = tight band, amber =
 * medium, red = low/wide. Uses tabular numerals so the ±pp value
 * doesn't shift width across re-renders.
 */

body.ui-v2 .confidence-ribbon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  cursor: help;
}

body.ui-v2 .confidence-ribbon.confidence-high {
  background: #f0f8f3;
  color: #1f6e44;
  border-color: #2e8b57;
}

body.ui-v2 .confidence-ribbon.confidence-medium {
  background: #fff9ef;
  color: #8e5d0a;
  border-color: #d68910;
}

body.ui-v2 .confidence-ribbon.confidence-low {
  background: #fff5f3;
  color: #8b2010;
  border-color: #c0392b;
}

/* PE-CRITIQUE Wishlist #4 (TX abatement lookup): styling follows the
 * irr-dcf panel because the two sit side-by-side on the right rail and
 * an investor should read them as the same kind of object -- "rough money
 * estimates anchored to capex, with named gaps". Status pills (available
 * / expired / varies) reuse the readiness color vocabulary so green/amber
 * /red mean the same thing across the page. */
body.ui-v2 .tax-abatement-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .tax-abatement-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
}

body.ui-v2 .tax-abatement-section-title {
  margin: 0 0 6px 0;
  font-size: 11px;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .tax-abatement-program-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.ui-v2 .tax-abatement-program {
  padding: 10px 12px;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 6px;
  background: #fafbfd;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .tax-abatement-program-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.ui-v2 .tax-abatement-program-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .tax-abatement-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
}

body.ui-v2 .tax-abatement-status.available {
  background: #f0f8f3;
  color: #1f6e44;
  border-color: #2e8b57;
}

body.ui-v2 .tax-abatement-status.expired_legacy_only {
  background: #fff5f3;
  color: #8b2010;
  border-color: #c0392b;
}

body.ui-v2 .tax-abatement-status.varies_by_jurisdiction {
  background: #fff9ef;
  color: #8e5d0a;
  border-color: #d68910;
}

body.ui-v2 .tax-abatement-program-summary {
  font-size: 12px;
  color: var(--color-ink-700);
  line-height: 1.45;
}

body.ui-v2 .tax-abatement-program-figures {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  column-gap: 8px;
  row-gap: 2px;
  margin: 0;
  font-size: 11px;
}

body.ui-v2 .tax-abatement-program-figures dt {
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .tax-abatement-program-figures dd {
  margin: 0;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .tax-abatement-program-question {
  font-size: 11px;
  font-style: italic;
  color: var(--color-ink-600);
  border-left: 2px solid var(--color-line, #d8dee8);
  padding-left: 8px;
}

body.ui-v2 .tax-abatement-gaps {
  padding: 8px 10px;
  background: #fff9ef;
  border: 1px solid #d68910;
  border-radius: 6px;
}

body.ui-v2 .tax-abatement-gap-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--color-ink-800);
  line-height: 1.45;
}

/* PE-CRITIQUE Wishlist #1 ($/MW transaction comps): table-first layout
 * because the analyst is comparing 4-6 prints; cards would be slower to
 * scan. Tabular numerals on the money columns so digits line up. The
 * disclosure pill (firm / approx / estimated) sits inside the EV cell so
 * the print-firmness travels with the number. */
body.ui-v2 .transaction-comps-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .transaction-comps-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
}

body.ui-v2 .transaction-comps-section-title {
  margin: 0 0 6px 0;
  font-size: 11px;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .transaction-comps-band {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
  font-size: 12px;
  padding: 8px 10px;
  background: #fafbfd;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 6px;
}

body.ui-v2 .transaction-comps-band dt {
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 11px;
}

body.ui-v2 .transaction-comps-band dd {
  margin: 0;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .transaction-comps-source {
  color: var(--color-ink-600);
  font-size: 10px;
  font-weight: 400;
}

body.ui-v2 .transaction-comps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body.ui-v2 .transaction-comps-table th,
body.ui-v2 .transaction-comps-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-line, #d8dee8);
  vertical-align: top;
  text-align: left;
}

body.ui-v2 .transaction-comps-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-600);
}

body.ui-v2 .transaction-comp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .transaction-comp-date {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-700);
  white-space: nowrap;
}

body.ui-v2 .transaction-comp-headline a {
  color: var(--color-ink-900);
  font-weight: 600;
  text-decoration: none;
}

body.ui-v2 .transaction-comp-headline a:hover,
body.ui-v2 .transaction-comp-headline a:focus-visible {
  text-decoration: underline;
}

body.ui-v2 .transaction-comp-notes {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-ink-600);
  line-height: 1.4;
}

body.ui-v2 .transaction-comp-deal-type {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  background: #eef3ff;
  color: #2c3e8a;
  border: 1px solid #2c3e8a;
}

body.ui-v2 .transaction-comp-disclosure {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
  vertical-align: middle;
}

body.ui-v2 .transaction-comp-disclosure-reported {
  background: #f0f8f3;
  color: #1f6e44;
  border-color: #2e8b57;
}

body.ui-v2 .transaction-comp-disclosure-approximate {
  background: #fff9ef;
  color: #8e5d0a;
  border-color: #d68910;
}

body.ui-v2 .transaction-comp-disclosure-estimated {
  background: #fff5f3;
  color: #8b2010;
  border-color: #c0392b;
}

body.ui-v2 .transaction-comps-gaps {
  padding: 8px 10px;
  background: #fff9ef;
  border: 1px solid #d68910;
  border-radius: 6px;
}

body.ui-v2 .transaction-comps-gap-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--color-ink-800);
  line-height: 1.45;
}

/* Workstream T2 -- Technical components. Reuses the transaction-comps table
 * vocabulary (compact table, tabular numeric cells, disclosure pills) so the
 * technical line items read as the same class of "structured fact" as the
 * cost/comps panels. The disclosure pill carries the sourced/derived/refused
 * discipline; a refused row swaps its numeric cells for the reason text. */
body.ui-v2 .components-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body.ui-v2 .components-table th,
body.ui-v2 .components-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-line, #d8dee8);
  vertical-align: top;
  text-align: left;
}

body.ui-v2 .components-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-600);
}

body.ui-v2 .component-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .component-type {
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .component-source {
  margin-top: 2px;
  font-size: 11px;
}

body.ui-v2 .component-disclosure {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
  vertical-align: middle;
}

body.ui-v2 .component-disclosure-sourced {
  background: #f0f8f3;
  color: #1f6e44;
  border-color: #2e8b57;
}

body.ui-v2 .component-disclosure-derived {
  background: #fff9ef;
  color: #8e5d0a;
  border-color: #d68910;
}

body.ui-v2 .component-disclosure-refused {
  background: #fff5f3;
  color: #8b2010;
  border-color: #c0392b;
}

body.ui-v2 .component-refusal {
  font-size: 11px;
  color: var(--color-ink-600);
  line-height: 1.4;
}

body.ui-v2 .components-locked-summary {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--color-ink-700);
  line-height: 1.45;
}

/* PE-CRITIQUE Wishlist #3 (ERCOT interconnect-queue overlay): grouped
 * list layout (ISO queue rows first, then utility, then docket). Each
 * receipt is a compact card with a queue-id pill that mirrors the
 * disclosure-pill vocabulary from transaction comps -- one consistent
 * "structured fact" cue across the right rail. */
body.ui-v2 .interconnect-queue-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ui-v2 .interconnect-queue-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
}

body.ui-v2 .interconnect-queue-section-title {
  margin: 0 0 6px 0;
  font-size: 11px;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .interconnect-queue-summary {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr max-content 1fr;
  column-gap: 10px;
  row-gap: 2px;
  margin: 0;
  font-size: 12px;
  padding: 8px 10px;
  background: #fafbfd;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 6px;
}

body.ui-v2 .interconnect-queue-summary dt {
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 11px;
}

body.ui-v2 .interconnect-queue-summary dd {
  margin: 0;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .interconnect-queue-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .interconnect-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.ui-v2 .interconnect-queue-row {
  padding: 8px 10px;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 6px;
  background: #fafbfd;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .interconnect-queue-row-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

body.ui-v2 .interconnect-queue-id {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  background: #eef3ff;
  color: #2c3e8a;
  border: 1px solid #2c3e8a;
}

body.ui-v2 .interconnect-queue-title {
  font-size: 12px;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

body.ui-v2 .interconnect-queue-title a {
  color: var(--color-ink-900);
  text-decoration: none;
}

body.ui-v2 .interconnect-queue-title a:hover,
body.ui-v2 .interconnect-queue-title a:focus-visible {
  text-decoration: underline;
}

body.ui-v2 .interconnect-queue-date {
  font-size: 11px;
  color: var(--color-ink-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.ui-v2 .interconnect-queue-row-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  row-gap: 2px;
  margin: 0;
  font-size: 11px;
}

body.ui-v2 .interconnect-queue-row-fields dt {
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.ui-v2 .interconnect-queue-row-fields dd {
  margin: 0;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .interconnect-queue-tier {
  font-size: 10px;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.ui-v2 .interconnect-queue-gaps {
  padding: 8px 10px;
  background: #fff9ef;
  border: 1px solid #d68910;
  border-radius: 6px;
}

body.ui-v2 .interconnect-queue-gap-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--color-ink-800);
  line-height: 1.45;
}

/* PE-CRITIQUE Wishlist #8 (saved diligence threads): thread sits at the
 * bottom of each checklist card. Assignment row is one line so it never
 * pushes the card height by more than ~20px when empty. Comments are a
 * vertical list with author + time on a single line, body below. The
 * add-form is hidden on derived items (no workflow_item_id) -- CSS
 * handles only styling; the renderer controls presence. */
body.ui-v2 .diligence-thread {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-line, #d8dee8);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.ui-v2 .diligence-thread-assignment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-ink-700);
}

body.ui-v2 .diligence-thread-meta-label {
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 10px;
}

body.ui-v2 .diligence-thread-meta-value {
  color: var(--color-ink-900);
  font-weight: 600;
}

body.ui-v2 .diligence-thread-meta-separator {
  color: var(--color-ink-400);
}

body.ui-v2 .diligence-thread-edit-button {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--color-line, #d8dee8);
  background: #ffffff;
  color: var(--color-ink-700);
  cursor: pointer;
}

body.ui-v2 .diligence-thread-edit-button:hover,
body.ui-v2 .diligence-thread-edit-button:focus-visible {
  background: #eef3ff;
  color: #2c3e8a;
  border-color: #2c3e8a;
}

body.ui-v2 .diligence-thread-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .diligence-thread-empty {
  font-size: 11px;
  color: var(--color-ink-600);
  font-style: italic;
}

body.ui-v2 .diligence-thread-comment {
  padding: 6px 8px;
  background: #fafbfd;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 4px;
}

body.ui-v2 .diligence-thread-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
}

body.ui-v2 .diligence-thread-comment-author {
  font-weight: 600;
  color: var(--color-ink-900);
}

body.ui-v2 .diligence-thread-comment-time {
  color: var(--color-ink-600);
  font-variant-numeric: tabular-nums;
}

body.ui-v2 .diligence-thread-comment-body {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-ink-800);
  line-height: 1.4;
  white-space: pre-wrap;
}

body.ui-v2 .diligence-thread-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

body.ui-v2 .diligence-thread-add-body {
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 4px;
  resize: vertical;
  color: var(--color-ink-900);
  background: #ffffff;
}

body.ui-v2 .diligence-thread-add-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

body.ui-v2 .diligence-thread-add-author {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 3px;
  color: var(--color-ink-800);
  background: #ffffff;
  min-width: 0;
}

body.ui-v2 .diligence-thread-add-submit {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid #2c3e8a;
  background: #eef3ff;
  color: #2c3e8a;
  font-weight: 600;
  cursor: pointer;
}

body.ui-v2 .diligence-thread-add-submit:hover,
body.ui-v2 .diligence-thread-add-submit:focus-visible {
  background: #2c3e8a;
  color: #ffffff;
}

/* PE-CRITIQUE Wishlist #9 (watchlist alerts): vertical feed of cards;
 * unread rows get a tinted left border so unread vs read is one
 * glance. Kind-pills reuse the disclosure-pill vocabulary from
 * transaction comps and tax abatement so the analyst learns one chip
 * shape and reads it across the dashboard. */
body.ui-v2 .alerts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.ui-v2 .alert-row {
  padding: 10px 12px;
  border: 1px solid var(--color-line, #d8dee8);
  border-left-width: 3px;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.ui-v2 .alert-row.alert-unread {
  border-left-color: #2c3e8a;
  background: #f5f8ff;
}

body.ui-v2 .alert-row.alert-read {
  border-left-color: var(--color-line, #d8dee8);
}

body.ui-v2 .alert-row-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
}

body.ui-v2 .alert-kind-pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}

body.ui-v2 .alert-row.alert-kind-regulatory_filing .alert-kind-pill {
  background: #f0f8f3;
  color: #1f6e44;
  border: 1px solid #2e8b57;
}

body.ui-v2 .alert-row.alert-kind-committed_capital .alert-kind-pill {
  background: #eef3ff;
  color: #2c3e8a;
  border: 1px solid #2c3e8a;
}

body.ui-v2 .alert-row.alert-kind-interconnection_update .alert-kind-pill {
  background: #fff9ef;
  color: #8e5d0a;
  border: 1px solid #d68910;
}

body.ui-v2 .alert-row-project {
  font-weight: 600;
  color: var(--color-ink-900);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

button.alert-row-project:hover,
button.alert-row-project:focus-visible {
  color: #2c3e8a;
}

body.ui-v2 .alert-row-date {
  margin-left: auto;
  color: var(--color-ink-600);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

body.ui-v2 .alert-row-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  line-height: 1.4;
}

body.ui-v2 .alert-row-body {
  font-size: 12px;
  color: var(--color-ink-700);
  line-height: 1.45;
}

body.ui-v2 .alert-row-source a {
  font-size: 11px;
  color: #2c3e8a;
  text-decoration: none;
}

body.ui-v2 .alert-row-source a:hover,
body.ui-v2 .alert-row-source a:focus-visible {
  text-decoration: underline;
}

/* PE-CRITIQUE Wishlist #10 (community signal): five-bucket exposure pill
 * keys off the same Literal vocabulary the scoring layer emits, so the
 * panel's tone is locked to the model -- a future scoring-layer
 * expansion (sixth bucket) lands in three files (Literal + this stylesheet
 * + tests) at once. Snippet rendering uses a left-bordered blockquote so
 * the analyst can scan-confirm a suspected hit without opening the source. */
body.ui-v2 .community-signal-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.ui-v2 .community-signal-headline {
  font-size: 13px;
  font-weight: 600;
  color: #1c2538;
  line-height: 1.4;
}

body.ui-v2 .community-signal-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7185;
  margin: 0 0 6px;
}

body.ui-v2 .community-exposure-block {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 4px;
  margin: 0;
  padding: 8px 10px;
  background: #f7f9fc;
  border: 1px solid var(--color-line, #d8dee8);
  border-radius: 6px;
  font-size: 12px;
}

body.ui-v2 .community-exposure-block dt {
  font-weight: 600;
  color: #6b7185;
}

body.ui-v2 .community-exposure-block dd {
  margin: 0;
  color: #1c2538;
}

body.ui-v2 .community-exposure-pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}

body.ui-v2 .community-exposure-pill[data-exposure-level="high"] {
  background: #fdecec;
  color: #8a2424;
  border: 1px solid #b13838;
}

body.ui-v2 .community-exposure-pill[data-exposure-level="moderate"] {
  background: #fff5e1;
  color: #8a5a14;
  border: 1px solid #c0892d;
}

body.ui-v2 .community-exposure-pill[data-exposure-level="low"] {
  background: #f0f8f3;
  color: #1f6e44;
  border: 1px solid #2e8b57;
}

body.ui-v2 .community-exposure-pill[data-exposure-level="distant"] {
  background: #eef2fb;
  color: #2c3e8a;
  border: 1px solid #3b52b3;
}

body.ui-v2 .community-exposure-pill[data-exposure-level="unknown"] {
  background: #f1f2f5;
  color: #6b7185;
  border: 1px solid #a5acba;
}

body.ui-v2 .community-signal-opposition {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .community-signal-empty {
  font-size: 12px;
  color: #6b7185;
  font-style: italic;
  padding: 6px 0;
}

body.ui-v2 .community-signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .community-signal-row {
  padding: 8px 10px;
  border: 1px solid var(--color-line, #d8dee8);
  border-left: 3px solid #b13838;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.ui-v2 .community-signal-row-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

body.ui-v2 .community-signal-keyword {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  background: #fdecec;
  color: #8a2424;
  border: 1px solid #b13838;
}

body.ui-v2 .community-signal-source {
  font-size: 11px;
  color: #4b5468;
}

body.ui-v2 .community-signal-source a {
  color: #2c3e8a;
  text-decoration: none;
}

body.ui-v2 .community-signal-source a:hover,
body.ui-v2 .community-signal-source a:focus-visible {
  text-decoration: underline;
}

body.ui-v2 .community-signal-snippet {
  margin: 0;
  padding: 4px 8px;
  border-left: 2px solid var(--color-line, #d8dee8);
  font-size: 12px;
  color: #1c2538;
  font-style: italic;
  line-height: 1.45;
}

body.ui-v2 .community-signal-gaps {
  padding: 8px 10px;
  border: 1px dashed #c0892d;
  border-radius: 6px;
  background: #fff8ec;
}

body.ui-v2 .community-signal-gap-list {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: #6b5114;
  line-height: 1.45;
}