/* PORTAL-NEXT V2 — Score module CSS.
   Visual authority: design-system-2.1/references/score.md (NORMATIVE
   TEXT pattern, no executable Approved Reference exists for Score —
   see docs/SCORE-VISUAL-AUTHORITY.md) + data-table.md (ranking table).
   Every value is a var() from tokens.css. No speedometer/gauge/
   trophy/medal/podium/emoji (score.md's own MUST NOT). Sortable-column
   visual indicator is UNRESOLVED per data-table.md — not invented;
   the table shows calcScores()'s own sort order only, not
   interactively re-sortable this Wave. */

.scPage { max-width: 1100px; }

/* Wave 3D — page header and fixture banner migrated to the shared
   module-system.css primitives (.modPageHeader/.modFixtureBanner).
   Rules below superseded, 0 remaining reference (grep-verified before
   editing), kept for history same as prior Waves' dead-rule discipline. */
.scHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.scHeader h1 {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.01em;
  margin: 0;
}
.scHeader p {
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
  font-size: 13px;
}

/* ---------- dev fixture context (Gate 30/51 — clearly dev-only) ---------- */
.scFixtureBar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  border: 1px dashed var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-muted);
}
.scFixtureBar .scFixtureLabel {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-warning);
}
.scFixtureBar select {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
}
.scFixtureBar select:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---------- ranking table (HIGH density -- data-table.md pattern) ---------- */
/* Wave 3D — desktop table base (.scTableWrap/.scTable's own box model,
   typography) is superseded by the shared .modTableWrap/.modTable, 0
   remaining reference. table-layout:fixed + wrapping is NOT superseded
   (same reasoning/convention as Waves 3B/3C's own widest-table
   overrides): the shared .modTable's default white-space:nowrap isn't
   what keeps this table at 0 horizontal scroll — this module's own
   PORTAL-NEXT-07.6 fix (fixed layout + wrapping) is, so it's
   re-declared as a module-specific override. */
.scPage .modTable { table-layout: fixed; }
.scPage .modTable thead th, .scPage .modTable td { white-space: normal; overflow-wrap: break-word; }
/* the shared .modTable's own generic first-child sticky rule would
   stick the RANK column (#) — this table deliberately keeps the NAME
   column (2nd child, .scNameCell below) sticky instead, since that's
   the more useful anchor while scrolling; cancel the shared rule on
   the actual first column so the two don't both try to pin to left:0. */
.scPage .modTable thead th:first-child, .scPage .modTable td:first-child { position: static; background: none; }

.scTableWrap { overflow-x: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.scTable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.scTable thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-hairline-strong);
  white-space: normal;
  overflow-wrap: break-word;
}
.scTable td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: middle;
}
.scTable tbody tr:last-child td { border-bottom: none; }
.scTable tbody tr { cursor: pointer; }
.scTable tbody tr:hover,
.scTable tbody tr:focus-visible { background: rgba(255,255,255,.028); }
.scTable tbody tr:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
/* Wave 3D — superseded by shared .modNumCol (identical rule), 0
   remaining reference. */
.scTable .scNumCol { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Score linear meter (Gate 3: TRANSPLANTED from the Human
   Approved Executable Reference — design-system-2.1/references/
   baselines/module-landing-approved/{pages.js,styles.css}
   .rankScoreBar/.fill, app.js's own Design Trace tags this
   'score-list' component status:APPROVED. Track size (80x4, radius 3)
   and the literal #232325 track background are copied AS-IS from that
   frozen reference — not tokenized here, since that's the approved
   value, not this Wave's to "fix". The BAR ITSELF still does not carry
   quality-coded color (fill stays --color-accent-primary, unchanged) —
   PORTAL-NEXT-07.7B's new .scBand element below is a SEPARATE,
   additive interpretation layer above the score/bar (docs/SCORE-BAND-
   NORMATIVE-07-7B.md), not a recoloring of the bar; the bar's own
   mathematical fill relationship (Gate 13) is untouched. No fill
   animation exists in the reference (checked directly) -- none added
   here either. */
.scScoreCell { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.scScoreValueRow { display: flex; align-items: center; gap: var(--space-2); }
.scMeterTrack { width: 80px; height: 4px; border-radius: 3px; background: #232325; overflow: hidden; flex-shrink: 0; }
.scMeterFill { display: block; height: 100%; border-radius: 3px; background: var(--color-accent-primary); }
@media (max-width: 480px) { .scMeterTrack { width: 48px; } }

/* PORTAL-NEXT-07.7B — HUMAN-APPROVED executive Score Band (docs/
   SCORE-BAND-NORMATIVE-07-7B.md): the textual label is authoritative
   (Gate 14 — never color-only). Colors below are a restrained,
   documented reuse of existing Design System semantic tokens
   (design-system-2/tokens.css) — 4 tokens exist (success/warning/
   critical/info) for 5 bands, so a naive 1:1 mapping doesn't cleanly
   work (Gate 12); PERFORMANCE (the "meets expectations" baseline
   band) deliberately stays neutral/unmarked rather than forcing a 5th
   hue, and ELITE reuses --color-success (same as ALTA PERFORMANCE)
   distinguished by weight + a subtle border rather than inventing a
   new color — the same "position/weight, not just hue" principle
   already used for Dashbi's Share/Receita Total emphasis (PORTAL-
   NEXT-07.5). No red/orange/yellow/green/gold rainbow was assumed. */
.scBand { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.scBandCritico { color: var(--color-critical); }
.scBandDesenvolvimento { color: var(--color-warning); }
.scBandPerformance { color: var(--color-text-secondary); }
.scBandAlta { color: var(--color-success); }
.scBandElite { color: var(--color-success); font-weight: 700; padding: 1px 6px; border: 1px solid var(--color-success); border-radius: var(--radius-sm); }
.scTable .scNameCell {
  position: sticky;
  left: 0;
  background: var(--color-surface-1);
  font-weight: 500;
}
/* PORTAL-NEXT-07.6 — was overflow:hidden + text-overflow:ellipsis
   (truncating vendor names, real information loss and the direct
   cause of a residual 2-4px overflow even past the ellipsis at
   320-430px). Wraps instead, matching Gate 55's "seller names may
   wrap" rule; the title attribute (full name on hover) stays, harmless
   now that the name is never cut. */
.scTable .scNameText {
  display: block;
  max-width: 220px;
  overflow-wrap: break-word;
  white-space: normal;
}
.scRankCol { font-family: var(--font-mono); color: var(--color-text-muted); width: 34px; }

/* ---------- detail / breakdown (Gate 15-16 -- meters, not gamified) ---------- */
.scDetail {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}
.scDetail[hidden] { display: none; }
.scDetailHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.scDetailHead h2 { font-family: var(--font-ui); font-weight: 400; font-size: 18px; margin: 0; }
.scDetailTotal { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.scCriterion { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-hairline); }
.scCriterion:last-child { border-bottom: none; }
.scCriterionTop { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; }
.scCriterionName { color: var(--color-text-primary); }
.scCriterionPoints { font-family: var(--font-mono); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.scCriterionMeta { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: 2px; font-size: 11.5px; color: var(--color-text-muted); }
.scMeter { height: 3px; background: var(--color-hairline-strong); border-radius: 2px; margin-top: var(--space-2); overflow: hidden; }
.scMeter span { display: block; height: 100%; background: var(--color-accent-primary); }
.scAmostraNote { margin-top: 4px; font-size: 11px; color: var(--color-text-muted); font-style: italic; }

/* ---------- close/back affordance ---------- */
.scCloseDetail {
  background: none; border: 1px solid var(--color-hairline-strong);
  color: var(--color-text-secondary); font-family: var(--font-mono);
  font-size: 11px; padding: 4px var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
}
.scCloseDetail:focus-visible, .scCloseDetail:hover { outline: var(--focus-ring); outline-offset: 2px; color: var(--color-accent-primary); }

@media (max-width: 768px) {
  .scTable .scNameCell { max-width: 140px; }
  .scTable .scNameText { max-width: 120px; }
}

/* PORTAL-NEXT-07.6.4 — human UAT rejected transforming the desktop
   <table> into a mobile layout three times in a row (07.6, 07.6.2,
   07.6.3-retested), even though the last version was proven correct by
   every automated/computed-style check available — the human's actual
   browser result is authoritative regardless. Strategy changed: two
   independent renderers (score.js's renderDesktopTable()/
   renderMobileCards()), fed by the same computed `rows`, no
   recalculation. Exactly one is visible at a time; the inactive one is
   display:none, never both. <=767px uses the non-table mobile
   renderer; 768px+ keeps the plain table (verified readable there in
   PORTAL-NEXT-07.6.2 — Loja/Depto/full meter+value/Financ. all fit on
   one line with room to spare). */
.scDesktopOnly { display: block; }
.scMobileOnly { display: none; }

@media (max-width: 767px) {
  .scDesktopOnly { display: none; }
  .scMobileOnly { display: block; }
}

/* ---------- mobile record cards (plain divs — no table/tr/td/th/col
   anywhere in this block, so no legacy column geometry can ever reach
   them again) ---------- */
.scMobileCard {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
}
.scMobileCard:last-child { margin-bottom: 0; }
.scMobileCard:hover,
.scMobileCard:focus-visible { background: rgba(255,255,255,.028); }
.scMobileCard:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.scMobileRank { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
.scMobileName { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin-top: 2px; overflow-wrap: break-word; }
.scMobileSub { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: break-word; }
.scMobileLabel { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.scMobileScoreBlock { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); }
.scMobileScoreRow { display: flex; align-items: center; gap: var(--space-3); margin-top: 4px; }
.scMobileScoreValue { font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* PORTAL-NEXT-07.7B — mobile hierarchy matches the approved executive
   order (Gate 6): number, then band, then bar. .scBand's own base
   rule handles color/weight; only position/spacing added here. */
.scMobileBand { display: inline-block; margin-top: 4px; }
/* overrides the base .scMeterTrack's flex-shrink:0 (correct for the
   desktop table, where the track has a small fixed budget alongside
   the number) — here the track is the one flexible element in the row
   and must be allowed to shrink; found via real measurement with the
   large_values fixture (score value "1000" widened the number enough
   to overflow a non-shrinking 100%-width track by 52px at 320px). */
.scMobileScoreBlock .scMeterTrack { width: 100%; flex: 1 1 0; min-width: 0; }
.scMobileScoreValue { flex-shrink: 0; }
.scMobileField { margin-top: var(--space-3); }
.scMobileValue { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; margin-top: 2px; }