/* Solution Categories admin dashboard.
   Dark-only (tesote-dark). Tuned neutrals sit between base-100 and base-200.
   The whole palette lives here — the helper selects classes, never inlines a
   color; continuous geometry (bar widths, bar flex) arrives as the custom
   properties --sc-w / --sc-flex. */

.sc-num { font-variant-numeric: tabular-nums; }

/* ---- skill-group colors (shared by dots, guides, non-outcome bars) ---- */
.sc-c-bank { --sc-color: #2FA872; --sc-guide: #2FA87266; }
.sc-c-rails { --sc-color: #3A7EFF; --sc-guide: #3A7EFF66; }
.sc-c-platform { --sc-color: #C965A8; --sc-guide: #C965A866; }
.sc-c-process { --sc-color: #8E949E; --sc-guide: #8E949E66; }
.sc-no-1 { --sc-color: #6E7681; }
.sc-no-2 { --sc-color: #565952; }
.sc-no-3 { --sc-color: #43443f; }

/* ---- diverging rate scale (green healthy → red poor) ---- */
.sc-rate-1 { color: #3FD68F; }
.sc-rate-2 { color: #9BD170; }
.sc-rate-3 { color: #E5C04B; }
.sc-rate-4 { color: #F09A4E; }
.sc-rate-5 { color: #F1655F; }

/* ---- range nav ---- */
.sc-range { display: inline-flex; border: 1px solid var(--color-base-300); border-radius: .5rem; overflow: hidden; }
.sc-range-tab { font-size: .72rem; padding: 5px 14px; color: #8f8b82; border-right: 1px solid #2e2d2a; }
.sc-range-tab:last-child { border-right: 0; }
.sc-range-tab:hover { color: #c9c5bc; }
.sc-range-tab.is-active { background: var(--color-neutral); color: var(--color-base-content); font-weight: 600; }

/* ---- funnel ---- */
.sc-funnel { display: flex; align-items: stretch; }
.sc-stage { flex: 1; min-width: 0; padding: 2px 4px; }
.sc-stage-cnt { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; }
.sc-stage-cnt--completed { color: #9BD170; }
.sc-stage-lb { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #8f8b82; margin-bottom: 2px; }
.sc-stage-ds { font-size: .72rem; color: #7d7970; margin-top: 3px; }
.sc-stage-ds .sc-delta { margin-right: 5px; }
.sc-bar { height: 3px; border-radius: 2px; margin-top: 8px; background: var(--color-base-300); overflow: hidden; }
.sc-bar > i { display: block; height: 100%; border-radius: 2px; width: var(--sc-w, 0%); }
.sc-bar--run > i { background: #55534d; }
.sc-bar--real > i { background: #8f8b82; }
.sc-bar--completed > i { background: #9BD170; }
.sc-bar--merged > i { background: var(--color-success); }
.sc-conn { width: 104px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; }
.sc-conn-pct { font-size: .8rem; font-weight: 600; color: #b7b3aa; }
.sc-conn-pct--warn { color: var(--color-warning); }
.sc-conn-arr { color: #55534d; font-size: .7rem; }
.sc-conn-loss { font-size: .66rem; color: #7d7970; text-align: center; line-height: 1.3; }
.sc-conn-loss--warn { color: #c7a13d; }
@media (max-width: 1023px) {
  .sc-funnel { flex-direction: column; gap: 10px; }
  .sc-conn { width: auto; flex-direction: row; gap: 8px; padding: 0; }
}

/* ---- delta chips ---- */
.sc-delta { font-size: .66rem; font-weight: 600; letter-spacing: .02em; }
.sc-delta-up { color: #3FD68F; }
.sc-delta-down { color: #F1655F; }
.sc-delta-neutral, .sc-delta-flat { color: #6f6c65; }
.sc-delta-note { color: #55534d; font-size: .6rem; margin-left: 4px; }

/* ---- svg charts (shared) ---- */
.sc-chart { width: 100%; height: auto; display: block; }
.sc-chart .grid { stroke: #33322d; stroke-width: 1; stroke-dasharray: 1 4; }
.sc-chart .axis { stroke: #4a4945; stroke-width: 1; }
.sc-chart .tick { fill: #7d7970; font-size: 9.5px; font-variant-numeric: tabular-nums; }
.sc-chart .axis-title { fill: #8f8b82; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sc-chart .vol { fill: #3a3935; }
.sc-chart .vol.in-window { fill: #46443f; }
.sc-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sc-chart .line-value { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-chart .window-band { fill: var(--color-base-content); opacity: .04; }
.sc-chart .hit { fill: transparent; cursor: crosshair; }
.sc-chart .zone { fill: var(--color-warning); opacity: .03; }
.sc-chart .parity { stroke: #8f8b82; stroke-width: 1; stroke-dasharray: 3 4; opacity: .5; }
.sc-chart .parity-label { fill: #8f8b82; font-size: 9.5px; font-style: italic; }
.sc-chart .bubble { stroke-width: 1; cursor: pointer; transition: fill-opacity .12s; }
.sc-chart .bubble:hover { fill-opacity: .95; }
.sc-chart .bubble-label { fill: #c9c5bc; font-size: 10.5px; }
.sc-chart .bubble-label.dim { fill: #8f8b82; }
.sc-chart .leader { stroke: #6a675f; stroke-width: 1; }

/* trend legend markers */
.sc-tlm { display: inline-block; vertical-align: middle; margin-right: 6px; }
.sc-tlm-line { width: 1rem; border-top-width: 2px; border-radius: 2px; }
.sc-tlm-merge { border-color: var(--color-success); }
.sc-tlm-completion { border-color: #8f8b82; }
.sc-tlm-volume { width: .625rem; height: .625rem; border-radius: 2px; background: #3a3935; }

/* legend chips */
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: #a8a49b;
  border: 1px solid var(--color-base-300); border-radius: 99px; padding: 2.5px 10px; }
.sc-legend-chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--sc-color, #8E949E); }
.sc-legend-count { color: #6f6c65; }

/* ---- hierarchy table ---- */
.sc-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.sc-table th { font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; color: #8f8b82; font-weight: 600;
  padding: 6px 10px; border-bottom: 1px solid var(--color-base-300); white-space: nowrap; text-align: left; }
.sc-table th.right, .sc-table td.right { text-align: right; }
.sc-table td { padding: 0 10px; height: 38px; border-bottom: 1px solid #2e2d2a; white-space: nowrap; }
.sc-sort { color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.sc-sort:hover, .sc-sort.is-active { color: var(--color-base-content); }
.sc-caret { font-size: .6rem; margin-left: 3px; opacity: .8; }

.sc-fam-toggle { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; color: inherit;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer; padding: 0; min-width: 0; }
.sc-fam:hover td { background: #211f1e; }
.sc-fam.is-open td { border-bottom-color: transparent; }
.sc-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sc-chev { width: 12px; flex: none; color: #6f6c65; font-size: .62rem; transition: transform .15s; }
.sc-fam.is-open .sc-chev { transform: rotate(90deg); color: #b7b3aa; }
.sc-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--sc-color, #8E949E); }
.sc-name { overflow: hidden; text-overflow: ellipsis; }
.sc-tag { font-size: .62rem; color: #6f6c65; font-weight: 400; border: 1px solid var(--color-base-300);
  border-radius: 99px; padding: 1px 7px; flex: none; }

.sc-sub > td { height: 32px; background: #1d1c1a; font-size: .8rem; }
.sc-sub[hidden] { display: none; }
.sc-sub > td:first-child { position: relative; }
.sc-sub > td:first-child .sc-cell { padding-left: 21px; }
.sc-guide { position: absolute; left: 15px; top: -1px; height: calc(100% + 1px); width: 11px; pointer-events: none; }
.sc-guide::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; border-left: 1px solid var(--sc-guide, #3A3935); }
.sc-guide::after { content: ''; position: absolute; left: 0; top: 50%; width: 10px; border-top: 1px solid var(--sc-guide, #3A3935); }
.sc-sub.is-last .sc-guide::before { height: 50%; width: 10px; border-bottom: 1px solid var(--sc-guide, #3A3935); border-bottom-left-radius: 7px; }
.sc-sub.is-last .sc-guide::after { display: none; }
.sc-sub .sc-name { color: #c9c5bc; font-weight: 400; }
.sc-sub.is-non .sc-name { color: #807c73; }
.sc-sub.is-non .sc-tag { color: #807c73; border-style: dashed; }

.sc-pct { font-weight: 600; }
.sc-pct--muted { color: #6f6c65; font-weight: 400; }
.sc-n { color: #a8a49b; }
.sc-n b { color: var(--color-base-content); font-weight: 600; }
.sc-gap { font-size: .78rem; }
.sc-gap-1 { color: #6f6c65; }
.sc-gap-2 { color: #c7a13d; }
.sc-gap-3 { color: #F09A4E; }
.sc-gap-4 { color: #F1655F; }
.sc-gap-none, .sc-gap-muted { color: #55534d; }
.sc-gap-surplus { color: #3FD68F; opacity: .7; }

/* ---- ranked lists ---- */
.sc-rank { display: flex; align-items: center; gap: 8px; padding: 5.5px 0; border-top: 1px solid #2e2d2a; font-size: .8rem; }
.sc-rank:first-child { border-top: 0; }
.sc-rank .sc-dot { width: 7px; height: 7px; }
.sc-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9c5bc; }
.sc-rank-name .sc-rank-desc { color: #6f6c65; font-size: .7rem; }
.sc-rank-pc { font-weight: 700; width: 44px; text-align: right; }
.sc-rank-count { color: #c9c5bc; }
.sc-rank-n { color: #6f6c65; font-size: .7rem; width: 40px; text-align: right; }
.sc-nonbar { height: 5px; border-radius: 3px; display: flex; overflow: hidden; gap: 2px; margin: 8px 0; }
.sc-nonbar i { border-radius: 2px; flex: var(--sc-flex, 1); background: var(--sc-color, #43443f); }