/* Flavour scorecard — scoped styles, loaded ONLY by scorecard.html, so nothing here
   affects other pages. Layout, columns and shaded A/B bands follow the agreed mockup
   (design/flavour-scorecard-mockup-v2.html). */

/* The scorecard table is far wider than the global .page cap (480px). This scoped
   modifier widens ONLY this screen; the global cap in styles.css is deliberately left
   alone (widening app-wide is its own pass), exactly as flavour-velocity.css does. */
.page--wide {
  max-width: 1180px;
}

/* Screen-local palette. Scoped to the wrapper (not :root) so it can't leak, though this
   file only loads here anyway. */
.sc {
  --sc-card: #fff;
  --sc-ink: var(--text, #20262a);
  --sc-ink-2: #5c6560;
  --sc-ink-3: #8b938d;
  --sc-rule: #ded9cd;
  --sc-rule-strong: #c2bbaa;
  --sc-green: #3f6b4a;
  --sc-green-mid: #7d9b5c;
  --sc-green-pale: #eaf0e2;
  --sc-tan: #e5d9c3;
  --sc-tan-deep: #c9a961;
  --sc-rust: #b5432a;
  --sc-rust-pale: #f8e9e5;
  --sc-amber: #8a6414;
  --sc-amber-pale: #fbf1dc;
  --sc-blue: #3b5f75;
  --sc-blue-pale: #e6eef3;
  --sc-field: #fffdf6;
  --sc-field-edge: #e0d5b4;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
}

.sc a.sc-back { color: var(--sc-green); }
.sc-head h1 { font-size: 20px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
.sc-head p { margin: 0 0 16px; color: var(--sc-ink-3); font-size: 13px; max-width: 78ch; }

.sc-card {
  background: var(--sc-card);
  border: 1px solid var(--sc-rule);
  border-radius: 8px;
  margin-bottom: 16px;
}
.sc-cardhdr { padding: 13px 16px; border-bottom: 1px solid var(--sc-rule); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; }
.sc-cardhdr h2 { margin: 0; font-size: 15px; font-weight: 650; }
.sc-cardhdr .sc-toggle { font-size: 12.5px; color: var(--sc-ink-3); }
.sc-mock-note { font-size: 12px; color: var(--sc-ink-3); }

/* Yield panel inputs + stats */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sc-fld { padding: 11px 14px; border-right: 1px solid var(--sc-rule); border-bottom: 1px solid var(--sc-rule); }
.sc-fld label { display: block; font-size: 11.5px; color: var(--sc-ink-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.sc-fld .sc-hint { display: block; font-size: 11px; color: var(--sc-ink-3); margin-top: 4px; }
.sc-fld input[type=number] {
  width: 100%; padding: 6px 8px; font: inherit; font-size: 14px;
  background: var(--sc-field); border: 1px solid var(--sc-field-edge); border-radius: 4px; color: var(--sc-ink);
}
.sc-fld input:focus { outline: 2px solid var(--sc-green); outline-offset: 1px; }
.sc-readonly { font-size: 14px; font-weight: 650; padding-top: 4px; }

.sc-stats { display: flex; flex-wrap: wrap; }
.sc-stats > div { flex: 1 1 160px; padding: 13px 16px; border-right: 1px solid var(--sc-rule); border-bottom: 1px solid var(--sc-rule); }
.sc-stats span { display: block; font-size: 11.5px; color: var(--sc-ink-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.sc-stats b { font-size: 19px; font-weight: 650; display: block; }
.sc-stats small { display: block; font-size: 12px; color: var(--sc-ink-3); margin-top: 2px; }
.sc-stats b.hot { color: var(--sc-rust); }
.sc-stats b.good { color: var(--sc-green); }

/* Controls */
.sc-ctrl { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--sc-rule); }
.sc-ctrl label { font-size: 12.5px; color: var(--sc-ink-2); margin-right: 7px; }
.sc-seg { display: inline-flex; border: 1px solid var(--sc-rule-strong); border-radius: 20px; overflow: hidden; }
.sc-seg button { font: inherit; font-size: 13px; padding: 5px 13px; border: 0; background: #fff; color: var(--sc-ink-2); cursor: pointer; }
.sc-seg button + button { border-left: 1px solid var(--sc-rule); }
.sc-seg button.on { background: var(--sc-green); color: #fff; font-weight: 600; }
.sc-basis { font-size: 12px; color: var(--sc-ink-3); margin-left: auto; text-align: right; }

/* Table — let the table scroll inside its own container (never the page), keyed off the
   container width, not the viewport (a viewport breakpoint above a fixed cap caused a real
   clipping bug on the tubs screen). */
.sc-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc table { border-collapse: collapse; width: 100%; min-width: 1050px; font-size: 13.5px; }
.sc th, .sc td { padding: 9px 11px; text-align: right; border-bottom: 1px solid var(--sc-rule); white-space: nowrap; }
.sc th {
  font-size: 11.5px; font-weight: 600; color: var(--sc-ink-2); border-bottom: 1px solid var(--sc-rule-strong);
  vertical-align: bottom; line-height: 1.3; cursor: pointer; user-select: none;
}
.sc th:hover { color: var(--sc-ink); }
.sc th.nosort, .sc th.nosort:hover { cursor: default; color: var(--sc-ink-2); }
.sc th .arw { color: var(--sc-green); font-size: 10px; }
.sc th.band {
  text-align: center; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sc-ink-3); border-bottom: 1px solid var(--sc-rule); padding-bottom: 5px; cursor: default;
}
.sc th.band.a { background: var(--sc-blue-pale); color: var(--sc-blue); }
.sc th.band.b { background: var(--sc-green-pale); color: var(--sc-green); }
.sc th.l, .sc td.l { text-align: left; }
.sc td.name { font-weight: 600; }
.sc tbody tr:hover { background: #faf9f5; }
.sc .grp { border-left: 1px solid var(--sc-rule-strong); }
.sc td.a { background: #f6fafc; }
.sc td.b { background: #f7faf3; }
.sc .muted { color: var(--sc-ink-3); }
.sc tfoot td { font-weight: 600; border-top: 1px solid var(--sc-rule-strong); }

/* Pills + chips */
.sc-pill { display: inline-block; padding: 1px 8px; border-radius: 11px; font-size: 11.5px; font-weight: 600; }
.sc-pill.dairy { background: var(--sc-tan); color: #6b5320; }
.sc-pill.vegan { background: var(--sc-green-pale); color: var(--sc-green); }
.sc-pill.demi { background: #e8e4f0; color: #4b3f6b; }
.sc-pill.sorbet { background: var(--sc-blue-pale); color: var(--sc-blue); }
.sc-pill.always { background: #e7edf1; color: var(--sc-blue); }
.sc-pill.rotational { background: #f2ede2; color: var(--sc-amber); }
.sc-chip { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.sc-chip.complete { background: var(--sc-green-pale); color: var(--sc-green); }
.sc-chip.estimated { background: var(--sc-amber-pale); color: var(--sc-amber); }
.sc-chip.missing_inclusions { background: var(--sc-rust-pale); color: var(--sc-rust); }

/* Cost/earnings bars + utilisation colour */
.sc-bar { display: block; height: 5px; border-radius: 3px; background: #eee9dd; margin-top: 4px; }
.sc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sc-green-mid); }
.sc-bar.cost i { background: var(--sc-tan-deep); }
.sc-util { font-weight: 600; }
.sc-util.hi { color: var(--sc-green); }
.sc-util.mid { color: var(--sc-amber); }
.sc-util.lo { color: var(--sc-rust); }
/* Confidence column: the run count is a positive value on every row, coloured by the same
   threshold the old sort tier used (high = clears it, low = below). */
.sc-confv { font-weight: 600; }
.sc-confv.hi { color: var(--sc-green); }
.sc-confv.lo { color: var(--sc-amber); }
.sc-conf { display: block; font-size: 10.5px; color: var(--sc-ink-3); margin-top: 2px; }

/* Notes + basis */
.sc-note {
  background: #fff; border: 1px solid var(--sc-rule); border-left: 3px solid var(--sc-tan-deep);
  border-radius: 6px; padding: 11px 14px; font-size: 13px; color: var(--sc-ink-2); margin-bottom: 14px;
}
.sc-note b { color: var(--sc-ink); }
.sc-note.warn { border-left-color: var(--sc-rust); }
.sc-note.info { border-left-color: var(--sc-blue); }
.sc-foot { font-size: 12px; color: var(--sc-ink-3); max-width: 84ch; margin-bottom: 10px; }
.sc-error { color: var(--sc-rust); }