/* Deal Comparison workspace (Shape Swaps tab).
   Chrome reuses the house primitives in style.css: .panel, .section-hdr, .shape-controls,
   .shape-control-group, .shape-label, .shape-select, .shape-input, .btn-primary, .btn-ghost,
   .data-table, .shape-table-wrap, .shape-result-card, .shape-product-badge, .shape-overview-group
   and .shape-qq-text. The sd-* classes below are layout hooks only; every value is a design
   token from the :root block in style.css (colours, type scale, spacing, radii). */

.shape-deals { min-width: 0; }
.shape-deals * { box-sizing: border-box; }
.shape-deals [hidden] { display: none !important; }
.shape-deals .section-hdr { margin-top: 0; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }

/* Prose, captions and provenance lines (sans); figures stay mono */
.sd-muted { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin: 0 0 var(--sp-3); }
.sd-terms { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-dim); line-height: 1.5; margin: var(--sp-2) 0 0; }
.sd-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); }
.sd-figures { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); margin: var(--sp-2) 0; }
.sd-figures strong { font-weight: 600; }

/* Shared EOD curve row */
.sd-market { margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.sd-market .sd-meta { align-self: flex-end; padding-bottom: var(--sp-2); }

/* Form grids: house control groups laid out four-up */
.sd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.sd-grid + .sd-grid { margin-top: var(--sp-4); }
.sd-grid .shape-select, .sd-grid .shape-input, .sd-window .shape-select { width: 100%; min-width: 0; }
.shape-deals .shape-select option { background: var(--bg-primary); color: var(--text); }

/* Contract editor (deal shape / hedge leg) */
.sd-contract { min-width: 0; margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-tint-1); }
.sd-contract legend { padding: 0 var(--sp-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-normal); text-transform: uppercase; color: var(--text-muted); }
.sd-contract > .btn-ghost { margin-top: var(--sp-3); }
.sd-custom { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.sd-window { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.sd-window > label { flex: 0 1 140px; }
.sd-days { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; }
.sd-days label, .sd-checkbox { display: inline-flex; flex-direction: row; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.shape-deals input[type=checkbox] { accent-color: var(--accent); }

/* Buttons: house .btn-primary / .btn-ghost, plus one compact modifier for inline actions */
.sd-btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.shape-deals button:disabled { cursor: default; opacity: 0.45; }
.shape-deals :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }

/* Status line and notices */
.sd-status { min-height: 20px; margin: var(--sp-3) 0 0; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); }
.sd-status.sd-error { color: var(--negative); }
.sd-notice { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--text); background: color-mix(in srgb, var(--amber) 8%, transparent); border-left: 3px solid var(--amber); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Results panel */
#sd-results { scroll-margin-top: calc(var(--top-bar-h) + var(--sp-5)); }
.sd-result-heading .shape-product-badge { margin-bottom: 0; }
.sd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; }
.sd-section { margin-top: var(--sp-6); }
.shape-deals .shape-overview-group { margin-top: var(--sp-4); }
.shape-deals .data-table td .sd-cell-text { display: inline-block; min-width: 200px; max-width: 360px; white-space: normal; line-height: 1.4; font-family: var(--font-sans); color: var(--text-muted); }
.shape-deals .data-table .sd-btn-sm { vertical-align: middle; }
.sd-chart { display: block; width: 100%; max-height: 200px; margin: var(--sp-3) 0; color: var(--text-dim); }
.sd-chart text { font-family: var(--font-mono); font-size: var(--text-sm); fill: var(--text-dim); }
.sd-chart .sd-bar-long { fill: var(--positive); }
.sd-chart .sd-bar-short { fill: var(--price-orange); }
.shape-deals .shape-qq-text { border: 1px solid var(--border); border-radius: var(--radius-sm); }

@media (max-width: 900px) {
  .sd-grid, .sd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sd-grid, .sd-metrics { grid-template-columns: 1fr; }
  .sd-contract { padding: var(--sp-3); }
  .sd-actions > button { width: 100%; justify-content: center; }
  .sd-window > label { flex: 1 1 100px; }
}