/* Compare screen (phase 7). Tokens only, from styles.css. */

.cmp-tiles { grid-template-columns: repeat(4, 1fr); }
.cmp-vs, .cmp-unit { font-size: var(--t-md); font-weight: var(--w-medium); color: var(--ink-3); letter-spacing: var(--track-snug); }
.cmp-grid { margin-bottom: var(--space-3); }
.cmp-grid .plan-svg { height: auto; min-height: 0; max-height: calc(100vh - var(--space-7) * 3); }
.plan-svg .cmp-iss { fill: none; }
.plan-svg .cmp-iss.ex { stroke-dasharray: 0.3 0.2; opacity: 0.6; }
.plan-svg .cmp-pair { stroke: var(--ink-3); }
.plan-svg .cmp-pair.far { stroke: var(--warn); stroke-dasharray: 0.4 0.25; }
.plan-svg .cmp-br { fill: var(--sev-danger-bg); fill-opacity: 0.55; stroke: var(--danger); }
.cmp-key { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.cmp-key span { display: inline-flex; gap: var(--space-1h); align-items: center; }
.cmp-key svg { width: var(--space-4); height: var(--space-4); }
.cmp-iss-key { fill: none; stroke: var(--ink-2); stroke-width: 0.25; }
.cmp-br-key { fill: var(--sev-danger-bg); stroke: var(--danger); stroke-width: 0.25; }

.cmp-table { box-shadow: none; border: 1px solid var(--line); }
.cmp-table td, .cmp-table th { padding-left: var(--space-2h); padding-right: var(--space-2h); }

.cmp-table td.num, .cmp-table th.num { white-space: nowrap; }
.cmp-sys { display: inline-flex; align-items: center; gap: var(--space-2); }
.cmp-sys-card { margin-bottom: var(--space-3); }
.cmp-sys .lg-ico { width: var(--space-4); height: var(--space-4); flex: none; }
.cmp-note { margin: var(--space-3) 0 0; }

.cmp-sheets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cmp-sheets li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cmp-sheets li > div { display: grid; }

.cmp-diffs { margin-bottom: var(--space-3); }
.cmp-diffs > .meta { margin: 0 0 var(--space-4); }
.cmp-rooms { box-shadow: none; border: 1px solid var(--line); }
.cmp-rooms td { padding-top: var(--space-1h); padding-bottom: var(--space-1h); height: auto; }
.cmp-rooms select { max-width: 100%; }
.cmp-rooms tr.cmp-err td { background: var(--sev-danger-bg); }
.cmp-set { margin-left: var(--space-2); }
.cmp-why { margin-top: var(--space-1); }
.cmp-rooms td:last-child { width: 55%; }
.cmp-add { margin-top: var(--space-3); }
.cmp-add > .meta { margin: 0 0 var(--space-4); }

@media (max-width: 1180px) {
  .cmp-grid .side { grid-template-columns: 1fr 1fr; }
}
.cmp-head .actions { margin-left: auto; }