/* ==========================================================================
   Evaluation detail — redesigned, band-based per-candidate report.
   Scoped under .evaluation-detail-page. Two-layer split: @layer components =
   structure only, @layer theme = color only (review-blocking convention).
   Bands map to semantic tokens: Strong=success, Adequate=info, Limited=warning,
   Not Demonstrated=muted; the "below role bar" verdict uses error.
   Recordings (.rec-*) and the tab shell are NOT redesigned — those styles still
   live in evaluations.css and are shared.
   ========================================================================== */

@layer components {
  .evaluation-detail-page {
    /* Per-band accent, remapped per modifier in the theme layer. */

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      margin-block-end: var(--space-md);
      font-size: var(--fs-small);
    }

    /* ---- Qualitative band chip (Strong / Adequate / Limited / Not Demonstrated) */
    .band {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3xs);
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      white-space: nowrap;

      & .band__dot {
        inline-size: 0.4rem;
        block-size: 0.4rem;
        border-radius: 50%;
      }
    }

    /* ---- Verdict header (hybrid: role-bar scale + evidence coverage) -------- */
    .eval-verdict {
      padding: var(--space-lg) var(--space-xl) var(--space-md);
      border-radius: 12px;
      margin-block-end: var(--space-lg);
    }

    /* Advisory banner: SVG defaults to display:block (base reset), which
       dropped the icon onto its own line above the text. Flex-row it so the
       icon sits inline, top-aligned to the first line. */
    .eval-disclaimer {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
      margin-block-end: var(--space-lg);

      & svg {
        flex: none;
        margin-block-start: 1px;
      }

      & span {
        text-wrap: pretty;
      }
    }

    .ev-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-lg);
      padding-block-end: var(--space-md);
    }

    .ev-id {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      min-inline-size: 0;

      & .ev-avatar {
        flex: none;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-size: var(--fs-body);
        font-weight: var(--fw-bold);
      }

      & .ev-name {
        font-size: var(--fs-medium);
        font-weight: var(--fw-semibold);
        line-height: 1.2;
      }

      & .ev-id-text {
        min-inline-size: 0;
      }

      & .ev-email {
        font-size: var(--fs-small);
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .ev-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin-block: var(--space-md) var(--space-3xs);

      & .ev-chip {
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 8px;
        font-size: var(--fs-xsmall);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
    }

    .ev-verdict {
      margin-block-start: var(--space-lg);

      & .ev-eyebrow {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        margin-block-end: var(--space-sm);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.06em;
        text-transform: uppercase;

        &::after {
          content: '';
          flex: 1;
          block-size: 1px;
        }
      }

      & .ev-headline {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin: 0;
        font-size: var(--fs-xl);
        font-weight: var(--fw-semibold);
        line-height: 1.1;

        & .ev-tick {
          flex: none;
          inline-size: 0.7rem;
          block-size: 2rem;
          border-radius: 3px;
        }
      }

      & .ev-delta {
        margin-block: var(--space-sm) 0;
        max-inline-size: 62ch;
        font-size: var(--fs-small);
        line-height: 1.5;
      }
    }

    /* role-bar scale (SVG number-line) */
    .ev-scale {
      margin-block-start: var(--space-md);
      padding: var(--space-md);
      border-radius: 10px;

      & .ev-scale-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-block-end: var(--space-2xs);
      }

      & .ev-scale-title {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      & .ev-scale-legend {
        display: flex;
        gap: var(--space-md);
        font-size: var(--fs-xsmall);

        & .ev-lg {
          display: inline-flex;
          align-items: center;
          gap: var(--space-3xs);
        }

        & .ev-lg-swatch {
          inline-size: 0.5rem;
          block-size: 0.5rem;
          border-radius: 2px;
        }

        & .ev-lg-bar {
          inline-size: 2px;
          block-size: 0.625rem;
          border-radius: 1px;
        }
      }

      & .ev-plot-stage {
        position: relative;
        margin-block-start: var(--space-2xs);
      }

      & .ev-plot {
        inline-size: 100%;
        block-size: auto;
        display: block;
      }

      & .ev-plot-label {
        position: absolute;
        transform: translateX(-50%);
        white-space: nowrap;
        pointer-events: none;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 0.1rem 0.45rem;

        &.ev-plot-label--role {
          inset-block-start: -0.5rem;
          letter-spacing: 0.05em;
          text-transform: uppercase;
        }

        &.ev-plot-label--cand {
          inset-block-start: 1.75rem;
        }
      }

      & .ev-axis-ends {
        display: flex;
        justify-content: space-between;
        margin-block-start: var(--space-3xs);
        font-size: var(--fs-xsmall);

        & span {
          display: inline-flex;
          align-items: center;
          gap: var(--space-4xs);
        }
      }
    }

    /* evidence coverage (three stage cards) */
    .ev-coverage {
      margin-block-start: var(--space-lg);

      & .ev-cov-head {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        margin-block-end: var(--space-3xs);

        & .ev-cov-mark {
          inline-size: 4px;
          block-size: 0.875rem;
          border-radius: 2px;
        }

        & .ev-cov-title {
          font-size: var(--fs-small);
          font-weight: var(--fw-semibold);
          letter-spacing: 0.04em;
          text-transform: uppercase;
        }
      }

      & .ev-cov-sub {
        margin: 0 0 var(--space-md);
        max-inline-size: 64ch;
        font-size: var(--fs-small);
        line-height: 1.5;
      }

      & .ev-stages {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);

        @media (max-width: 640px) {
          grid-template-columns: 1fr;
        }
      }

      & .ev-stage {
        position: relative;
        padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md);
        border-radius: 10px;
        overflow: clip;

        &::before {
          content: '';
          position: absolute;
          inset-block: 0;
          inset-inline-start: 0;
          inline-size: 3px;
        }

        & .ev-stage-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--space-2xs);
          margin-block-end: var(--space-2xs);
        }

        & .ev-stage-name {
          font-size: var(--fs-small);
          font-weight: var(--fw-semibold);
        }

        & .ev-stage-n {
          font-size: var(--fs-xxsmall);
          font-weight: var(--fw-semibold);
          font-variant-numeric: tabular-nums;
        }

        & .ev-state-chip {
          display: inline-flex;
          align-items: center;
          gap: var(--space-3xs);
          padding: var(--space-4xs) var(--space-2xs);
          border-radius: 100px;
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-semibold);
        }

        & .ev-stage-note {
          margin: var(--space-2xs) 0 0;
          font-size: var(--fs-xsmall);
          line-height: 1.45;
        }
      }
    }

    .ev-foot {
      display: flex;
      align-items: flex-start;
      gap: var(--space-2xs);
      margin-block-start: var(--space-md);
      padding-block-start: var(--space-sm);
      font-size: var(--fs-xsmall);
      line-height: 1.5;

      & svg {
        flex: none;
        margin-block-start: 1px;
      }
    }

    /* ---- Overview tab cards ------------------------------------------------- */
    .eval-overview {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-lg);
      align-items: start;

      @media (max-width: 900px) {
        grid-template-columns: 1fr;
      }

      & .eval-overview-col {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        min-inline-size: 0;
      }
    }

    .eval-card {
      padding: var(--space-lg);
      border-radius: 12px;

      & .eval-card-head {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        margin-block-end: var(--space-md);
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.02em;
        text-transform: uppercase;

        & svg {
          inline-size: 0.9375rem;
          block-size: 0.9375rem;
        }

        & .eval-card-note {
          margin-inline-start: auto;
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-regular);
          letter-spacing: 0;
          text-transform: none;
        }
      }
    }

    /* AI assessment */
    .eval-summary {
      margin-block: var(--space-sm) var(--space-md);
      font-size: var(--fs-small);
      line-height: 1.62;
    }

    .eval-sd-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-lg);

      @media (max-width: 620px) {
        grid-template-columns: 1fr;
      }
    }

    .eval-sd {
      & .eval-sd-label {
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
        margin-block-end: var(--space-sm);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.04em;
        text-transform: uppercase;

        & svg {
          inline-size: 0.875rem;
          block-size: 0.875rem;
        }
      }

      & .eval-sd-item {
        position: relative;
        margin-block-end: var(--space-2xs);
        padding-inline-start: var(--space-md);
        font-size: var(--fs-small);
        line-height: 1.55;

        &::before {
          content: '';
          position: absolute;
          inset-inline-start: 0;
          inset-block-start: 0.5rem;
          inline-size: 0.3rem;
          block-size: 0.3rem;
          border-radius: 50%;
          opacity: 0.5;
        }
      }
    }

    /* Overall signals rows */
    .eval-signal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: var(--space-sm);

      & .eval-signal-name {
        font-size: var(--fs-small);
      }
    }

    .eval-card-foot-note {
      margin-block-start: var(--space-sm);
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    /* Integrity (reported separately) */
    .eval-integ-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-sm);
      padding-block: var(--space-sm);

      & .eval-integ-name {
        font-size: var(--fs-small);

        & small {
          display: block;
          margin-block-start: 2px;
          max-inline-size: 22ch;
          font-size: var(--fs-xsmall);
        }
      }

      & .eval-tag {
        flex: none;
        padding: var(--space-4xs) var(--space-2xs);
        border-radius: 8px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
      }
    }

    .eval-integ-note {
      display: flex;
      gap: var(--space-2xs);
      margin-block-start: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: 9px;
      font-size: var(--fs-xsmall);
      line-height: 1.5;

      & svg {
        flex: none;
      }
    }

    /* Task outcomes */
    .eval-outcome-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: var(--space-md);
      padding-block: var(--space-sm);

      & .eval-outcome-name {
        font-size: var(--fs-small);

        & small {
          display: block;
          margin-block-start: 2px;
          font-size: var(--fs-xsmall);
        }
      }

      & .eval-tests {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        font-size: var(--fs-xsmall);
        font-variant-numeric: tabular-nums;
      }

      & .eval-tdot {
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
      }

      & .eval-oc {
        padding: var(--space-4xs) var(--space-2xs);
        border-radius: 8px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
      }
    }

    /* ---- Simulation journey (band-based) ----------------------------------- */
    .eval-journey-head {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block: var(--space-3xs) var(--space-md);

      /* Match the uppercase section-head treatment used elsewhere; this one
         sits outside .eval-card so it wasn't picking up those styles. */
      & .eval-card-head {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
    }

    .eval-stage {
      display: grid;
      grid-template-columns: 2.5rem 1fr;
      gap: var(--space-md);

      & .eval-stage-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      & .eval-stage-dot {
        flex: none;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: 11px;
        display: grid;
        place-items: center;

        & svg {
          inline-size: 1.125rem;
          block-size: 1.125rem;
        }
      }

      & .eval-stage-line {
        inline-size: 1px;
        flex: 1;
        margin-block: var(--space-2xs);
      }

      & .eval-stage-body {
        padding-block-end: var(--space-lg);
      }

      & .eval-stage-title {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-block-end: var(--space-sm);

        & h3 {
          margin: 0;
          font-size: var(--fs-body);
        }

        & .eval-stage-cnt {
          padding: 2px var(--space-2xs);
          border-radius: 100px;
          font-size: var(--fs-xsmall);
        }
      }
    }

    .eval-absent-note {
      margin-block-end: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: 10px;
      font-size: var(--fs-small);
      line-height: 1.5;
    }

    .eval-dim-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-sm);

      @media (max-width: 720px) {
        grid-template-columns: 1fr;
      }

      & .eval-dim {
        padding: var(--space-sm) var(--space-md);
        border-radius: 11px;

        &.eval-dim--na {
          opacity: 0.72;
        }

        & .eval-dim-name {
          margin-block-end: var(--space-2xs);
          font-size: var(--fs-small);
        }
      }
    }

    .eval-taskrow {
      padding: var(--space-md);
      border-radius: 12px;
      margin-block-end: var(--space-sm);

      & .eval-taskrow-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
      }

      & .eval-taskrow-left {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
      }

      & .eval-task-n {
        flex: none;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        border-radius: 7px;
        display: grid;
        place-items: center;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-bold);
      }

      & .eval-task-nm {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
      }

      & .eval-task-sub {
        font-size: var(--fs-xsmall);
      }

      & .eval-task-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        margin-block-start: var(--space-sm);
      }

      & .eval-metric {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 8px;
        font-size: var(--fs-xsmall);
      }
    }
  }
}

@layer theme {
  .evaluation-detail-page {
    /* band accents keyed to semantic tokens */
    .band--strong {
      color: var(--color-success);
      background: light-dark(
        oklch(from var(--color-success) l c h / 0.1),
        oklch(from var(--color-success) l c h / 0.14)
      );
    }
    .band--adequate {
      color: var(--color-info);
      background: light-dark(
        oklch(from var(--color-info) l c h / 0.1),
        oklch(from var(--color-info) l c h / 0.14)
      );
    }
    .band--limited {
      color: var(--color-warning);
      background: light-dark(
        oklch(from var(--color-warning) l c h / 0.12),
        oklch(from var(--color-warning) l c h / 0.16)
      );
    }
    .band--none {
      color: var(--text-secondary);
      background: oklch(from var(--glass-tint) l c h / 0.06);
    }
    .band .band__dot {
      background: currentColor;
    }

    .back-link {
      color: var(--text-secondary);
      text-decoration: none;

      &:hover {
        color: var(--accent-primary);
      }
    }

    /* Verdict header — carries a --verdict-accent set by a modifier below. */
    .eval-verdict {
      --verdict-accent: var(--color-error);
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      &.eval-verdict--above {
        --verdict-accent: var(--color-success);
      }
      &.eval-verdict--close {
        --verdict-accent: var(--color-warning);
      }
      &.eval-verdict--below {
        --verdict-accent: var(--color-error);
      }
    }

    .ev-top {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .ev-id {
      & .ev-avatar {
        background: linear-gradient(
          150deg,
          oklch(from var(--accent-primary) l c h / 0.35),
          var(--accent-primary)
        );
        color: #fff;
      }
      & .ev-name {
        color: var(--text-primary);
      }
      & .ev-email {
        color: var(--text-secondary);
      }
    }

    .ev-chips .ev-chip {
      color: var(--text-secondary);
      background: oklch(from var(--glass-tint) l c h / 0.04);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      &.ev-chip--flag {
        color: var(--color-warning);
        background: oklch(from var(--color-warning) l c h / 0.08);
        border-color: oklch(from var(--color-warning) l c h / 0.28);
      }
    }

    .ev-verdict {
      & .ev-eyebrow {
        color: var(--text-secondary);

        &::after {
          background: oklch(from var(--glass-tint) l c h / 0.08);
        }
      }
      & .ev-headline {
        color: var(--text-primary);

        & strong {
          color: var(--verdict-accent);
          font-weight: inherit;
        }
        & .ev-tick {
          background: var(--verdict-accent);
        }
      }
      & .ev-delta {
        color: var(--text-secondary);

        & b {
          color: var(--text-primary);
        }
      }
    }

    .ev-scale {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      & .ev-scale-title {
        color: var(--text-secondary);
      }
      & .ev-scale-legend {
        color: var(--text-secondary);

        & .ev-lg-bar {
          background: var(--text-secondary);
        }
        & .ev-lg-cand .ev-lg-swatch {
          background: var(--verdict-accent);
          border-radius: 50%;
        }
        & .ev-lg-cohort .ev-lg-swatch {
          background: var(--text-secondary);
          opacity: 0.5;
        }
      }
      & .ev-axis-ends {
        color: var(--text-secondary);
      }

      & .ev-plot-label--role {
        color: var(--text-primary);
        background: var(--surface-raised);
        border-color: oklch(from var(--glass-tint) l c h / 0.14);
      }
      & .ev-plot-label--cand {
        color: var(--verdict-accent);
        background: oklch(from var(--verdict-accent) l c h / 0.16);
        border-color: oklch(from var(--verdict-accent) l c h / 0.5);
      }
    }

    .ev-coverage {
      & .ev-cov-head .ev-cov-mark {
        background: var(--accent-primary);
      }
      & .ev-cov-head .ev-cov-title {
        color: var(--text-primary);
      }
      & .ev-cov-sub {
        color: var(--text-secondary);

        & b {
          color: var(--text-primary);
        }
      }

      & .ev-stage {
        --stage-accent: var(--text-secondary);
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

        &.ev-stage--complete {
          --stage-accent: var(--color-success);
        }
        &.ev-stage--partial {
          --stage-accent: var(--color-warning);
        }
        &.ev-stage--missing {
          --stage-accent: var(--text-secondary);
        }

        &::before {
          background: var(--stage-accent);
        }
        & .ev-stage-name {
          color: var(--text-primary);
        }
        &.ev-stage--missing .ev-stage-name {
          color: var(--text-secondary);
        }
        & .ev-stage-n {
          color: var(--text-secondary);
        }
        & .ev-state-chip {
          color: var(--stage-accent);
          background: oklch(from var(--stage-accent) l c h / 0.12);
          border: 1px solid oklch(from var(--stage-accent) l c h / 0.3);
        }
        & .ev-stage-note {
          color: var(--text-secondary);
        }
      }
    }

    .ev-foot {
      color: var(--text-secondary);
      border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      & b {
        color: var(--text-primary);
      }
    }

    /* Overview cards */
    .eval-card {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      & .eval-card-head {
        color: var(--text-secondary);

        & svg {
          color: var(--accent-primary);
        }
        & .eval-card-note {
          color: var(--text-secondary);
        }
      }
    }

    .eval-summary {
      color: var(--text-primary);
    }

    .eval-sd {
      &.eval-sd--pos .eval-sd-label {
        color: var(--color-success);
      }
      &.eval-sd--warn .eval-sd-label {
        color: var(--color-warning);
      }
      & .eval-sd-item {
        color: var(--text-secondary);

        &::before {
          background: currentColor;
        }
      }
    }

    .eval-signal-row {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      &:last-child {
        border-block-end: none;
      }
      & .eval-signal-name {
        color: var(--text-primary);
      }
    }

    .eval-card-foot-note {
      color: var(--text-secondary);
    }

    .eval-integ-row {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      &:last-child {
        border-block-end: none;
      }
      & .eval-integ-name {
        color: var(--text-primary);

        & small {
          color: var(--text-secondary);
        }
      }
      & .eval-tag--ok {
        color: var(--color-success);
        background: oklch(from var(--color-success) l c h / 0.12);
      }
      & .eval-tag--unknown {
        color: var(--text-secondary);
        background: oklch(from var(--glass-tint) l c h / 0.06);
      }
    }

    .eval-integ-note {
      color: var(--text-secondary);
      background: oklch(from var(--color-warning) l c h / 0.06);
      border: 1px solid oklch(from var(--color-warning) l c h / 0.16);

      & svg {
        color: var(--color-warning);
      }
    }

    .eval-outcome-row {
      border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      &:last-child {
        border-block-end: none;
      }
      & .eval-outcome-name {
        color: var(--text-primary);

        & small {
          color: var(--text-secondary);
        }
      }
      & .eval-tests {
        color: var(--text-secondary);
      }
      & .eval-tdot--pass {
        background: var(--color-success);
      }
      & .eval-tdot--fail {
        background: oklch(from var(--color-error) l c h / 0.35);
      }
      & .eval-oc--solved {
        color: var(--color-success);
        background: oklch(from var(--color-success) l c h / 0.12);
      }
      & .eval-oc--partial {
        color: var(--color-warning);
        background: oklch(from var(--color-warning) l c h / 0.12);
      }
      & .eval-oc--not {
        color: var(--color-error);
        background: oklch(from var(--color-error) l c h / 0.11);
      }
    }

    /* Journey */
    .eval-stage {
      & .eval-stage-dot {
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.1);

        & svg {
          color: var(--text-secondary);
        }
      }
      & .eval-stage-line {
        background: oklch(from var(--glass-tint) l c h / 0.06);
      }
      & .eval-stage-title {
        & h3 {
          color: var(--text-primary);
        }
        & .eval-stage-cnt {
          color: var(--text-secondary);
          border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
        }
      }
    }

    .eval-absent-note {
      color: var(--text-secondary);
      background: oklch(from var(--glass-tint) l c h / 0.03);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      & b {
        color: var(--text-primary);
      }
    }

    .eval-dim {
      background: oklch(from var(--glass-tint) l c h / 0.03);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      & .eval-dim-name {
        color: var(--text-secondary);
      }
    }

    .eval-taskrow {
      background: oklch(from var(--glass-tint) l c h / 0.03);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      & .eval-task-n {
        color: var(--text-secondary);
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.1);
      }
      & .eval-task-nm {
        color: var(--text-primary);
      }
      & .eval-task-sub {
        color: var(--text-secondary);
      }
      & .eval-metric {
        color: var(--text-secondary);
        background: light-dark(oklch(0% 0 0 / 0.15), oklch(0% 0 0 / 0.25));
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

        & .eval-metric-name {
          color: var(--text-secondary);
        }
      }
    }
  }
}