/* Supplier and venue comparison. Loaded after tools.css on the comparison
   page only, and builds on its fields, pills, tags and panels. */

/* Switching between comparisons, and starting a new one */

.sc-switcher {
  margin-bottom: 1.5rem;
}

.sc-start .empty-state {
  margin: 0 0 1.5rem;
}

.sc-new {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.sc-new-heading {
  flex: 1 1 100%;
  margin: 0;
  font-size: 1.25rem;
}

.sc-new .sc-new-category {
  flex: 1 1 12rem;
}

.sc-add {
  margin-top: 1.25rem;
}

/* Criteria */

.sc-criteria {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.sc-criterion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.25rem 1rem;
  align-items: center;
}

.sc-criterion .check {
  white-space: nowrap;
}

.sc-check-note,
.sc-flag,
.sc-row-note,
.sc-cell-note {
  font-weight: normal;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.sc-reset-criteria {
  margin: 0.75rem 0 0;
}

/* Comfortable tap sizes for the small controls this tool uses a lot. */
.sc-reset-criteria .text-button {
  min-height: 2.75rem;
  text-align: left;
}

.sc-switcher .pill > span,
.sc-choice .pill > span {
  min-height: 2.75rem;
}

@media (max-width: 34rem) {
  .sc-criterion {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .sc-criterion-name {
    grid-column: 1 / -1;
  }

  .sc-criterion .check {
    white-space: normal;
  }
}

/* Option cards */

.sc-options {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.sc-option {
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.sc-option-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: flex-start;
}

.sc-option-summary {
  flex: 1 1 16rem;
  min-width: 0;
}

.sc-option-title {
  margin: 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.sc-option-meta {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
}

.sc-tags:empty {
  display: none;
}

.sc-option-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sc-toggle {
  min-height: 2.75rem;
}

.sc-toggle[aria-expanded="true"] {
  border-color: var(--color-text);
  background: var(--color-bg-alt);
}

.sc-option-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.sc-scores {
  margin-top: 1.5rem;
}

.sc-scores legend {
  font-size: 1rem;
}

.sc-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem 1.25rem;
  margin-top: 0.75rem;
}

/* Side by side */

.sc-verdict {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

/* The table scrolls inside its own labelled region on narrow screens, so
   the page itself never scrolls sideways. */
.sc-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.sc-table-wrap:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.sc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.sc-table th,
.sc-table td {
  min-width: 9.5rem;
  max-width: 18rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.sc-table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border);
}

.sc-col-name {
  display: block;
  overflow-wrap: anywhere;
}

/* Row labels stay in view while the options scroll past. */
.sc-table tbody th,
.sc-table thead td {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8.5rem;
  max-width: 12rem;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
}

.sc-table tbody tr:last-child > * {
  border-bottom: 0;
}

.sc-total-row > * {
  background: var(--color-bg);
  font-weight: bold;
}

.sc-table .sc-total-row th {
  background: var(--color-bg);
}

.sc-muted {
  color: var(--color-text-muted);
}

.sc-multiline {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.sc-scroll-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.sc-choice {
  margin-top: 1.5rem;
}

/* Budget hand-off */

.sc-budget {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.sc-budget-heading {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.sc-budget-summary {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.sc-budget-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.sc-budget-form .field {
  flex: 1 1 14rem;
}

.sc-budget-result .notice {
  display: block;
  margin: 1rem 0 0;
}

/* Print */

.sc-print-verdict {
  padding-left: 1.2em;
}

.sc-print-table caption {
  text-align: left;
  font-weight: bold;
  padding-bottom: 4pt;
}

.sc-print-table th,
.sc-print-table td {
  vertical-align: top;
}

@media print {
  .sc-print-table {
    font-size: 9.5pt;
  }

  .sc-print-table tr {
    break-inside: avoid;
  }

  .sc-print-table .sc-tags {
    display: inline;
    font-weight: normal;
  }
}