/* ==========================================================================
   SIVD - Sovereign Deal Comps (Tool 4)
   Charts, the sortable table head and the deal detail modal.

   These rules used to live in a <style> block inside deal_comps.html, where the
   a11y guards could not see them -- which is how `.chart-bar:focus { outline:
   none }` survived on a control carrying tabindex="0". They are a stylesheet
   now, so the audit suite reads them like any other.

   Consumes tokens.css. Declares no colour, size, space, radius or duration of
   its own. Loaded after benchmark.css, which this page also uses.
   ========================================================================== */

/* Deal Comps Specialized Chart & Visual Styles */
.deal-comps-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (max-width: 900px) {
  .deal-comps-analytics-grid {
    grid-template-columns: 1fr;
  }
}
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: all var(--motion-base) var(--ease-standard);
}
.chart-card:hover {
}
.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
}
.chart-card-title {
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0;
}
.chart-card-subtitle {
  font-size: var(--size-2xs);
  color: var(--text-muted);
}
.chart-svg-wrapper {
  width: 100%;
  height: 250px;
  position: relative;
}
.chart-svg-wrapper svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-bar {
  fill: var(--primary);
  transition: fill var(--motion-base) var(--ease-standard);
  cursor: pointer;
}
.chart-bar:hover {
  fill: var(--primary-hover);
}
/* These bars and segments carry tabindex="0", so they are keyboard-reachable
   controls and owe the viewer a visible focus indicator. The fill change alone
   was 1.35:1 between two greens, nowhere near the 3:1 floor for a non-text
   indicator, and an `outline: none` here sat outside both .css files and so
   outside the guard in tests/test_ux_trust_audit.py that bans exactly this.
   The stroke backs up `outline`, whose SVG support is uneven. */
.chart-bar:focus-visible,
.chart-donut-segment:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  stroke: var(--text-highlight);
  stroke-width: 2;
}
.chart-bar-label {
  font-size: var(--size-3xs);
  font-weight: var(--weight-semibold);
  fill: var(--text-secondary);
  text-anchor: middle;
  font-family: inherit;
}
.chart-axis-line {
  stroke: var(--border-medium);
  stroke-width: 1;
}
.chart-grid-line {
  stroke: var(--border-subtle);
  stroke-width: 1;
  stroke-dasharray: 2, 2;
}
.chart-donut-segment {
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
  cursor: pointer;
}
.chart-donut-segment:hover {
  opacity: 0.88;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--size-2xs);
  color: var(--text-secondary);
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  display: inline-block;
}
.deal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-5);
}
.deal-modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--text-accent);
  border-radius: var(--radius-md);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
}
.deal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}
.deal-modal-title {
  font-family: var(--font-sans);
  font-size: var(--size-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.deal-modal-close {
  background: none;
  border: none;
  font-size: var(--size-2xl);
  cursor: pointer;
  color: var(--text-muted);
  line-height: var(--leading-none);
  padding: var(--space-1);
  transition: color var(--motion-base) var(--ease-standard);
}
.deal-modal-close:hover {
  color: var(--text-primary);
}
.deal-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  font-size: var(--size-sm);
  margin-bottom: var(--space-6);
}
.deal-modal-field-label {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.deal-modal-field-value {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-top: var(--space-1);
}
.badge-esg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-accent);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
}
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sortable-th:hover {
  background: rgba(var(--accent-rgb), 0.06);
}
.sort-indicator {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: var(--size-2xs);
  color: var(--text-accent);
}

/* ==========================================================================
   LAYOUT THAT USED TO LIVE IN style ATTRIBUTES
   ========================================================================== */

/* The Rule 6 provenance notice runs full width here rather than as a flex row,
   because it sits under the hero instead of beside a table. */
.integrity-notice-block {
  display: block;
  margin-top: var(--space-4);
}

.filter-range-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-range-row .filter-input {
  width: 50%;
}

.filter-range-dash {
  color: var(--text-muted);
}

.deal-modal-section {
  margin-bottom: var(--space-5);
}

.deal-modal-syndicate {
  margin-top: var(--space-1);
  font-size: var(--size-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.deal-modal-footnote {
  padding: var(--space-3);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: var(--size-2xs);
  color: var(--text-secondary);
}

/* The pagination indicator emitted a class no rule matched, so the page count sat
   in the browser default face beside two mono buttons. */
.page-indicator {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}