/* Approved evaluation presentation; scoring and report content unchanged. */
@layer theme {
  body:has(.evaluation-detail-page) {
    --font-heading: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --bg-primary: #faf7f0;
    --bg-secondary: #eeefeb;
    --text-primary: #242522;
    --text-secondary: #686b64;
    --accent-primary: #465b32;
    --accent-secondary: #354526;
    --accent-warm: #b8541f;
    --accent-warm-hover: #934018;
    --surface-elevated: #ffffff;
    --surface-base: #ffffff;
    --surface-sunken: #eeefeb;
    --surface-deep: #eeefeb;
    --pilot-border: #e3e4df;
    --pilot-selected: #e7ecdf;
    --pilot-icon-bg: #e2eeeb;
    --pilot-icon-ink: #37665e;
    --pilot-brand: #465b32;
    --pilot-nav-text: #252622;
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  html[data-theme='dark'] body:has(.evaluation-detail-page) {
    --bg-primary: #0b0c0e;
    --bg-secondary: #1c1e22;
    --text-primary: #f3f4f6;
    --text-secondary: #a4a8ae;
    --accent-primary: #e47a3c;
    --accent-secondary: #ec8f58;
    --accent-warm: #e47a3c;
    --accent-warm-hover: #ec8f58;
    --surface-elevated: #16181b;
    --surface-base: #16181b;
    --surface-sunken: #101114;
    --surface-deep: #08090a;
    --pilot-border: #2a2d32;
    --pilot-selected: #2b1c14;
    --pilot-icon-bg: #2b1c14;
    --pilot-icon-ink: #ec8f58;
    --pilot-brand: #e47a3c;
    --pilot-nav-text: #e5e7eb;
    /* Gunmetal finish: a top light and a diagonal glint over the flat surface. */
    --pilot-sheen:
      linear-gradient(180deg, #ffffff0a, #ffffff00 220px),
      linear-gradient(115deg, #ffffff00 20%, #ffffff07 42%, #ffffff00 64%);
    --pilot-sheen-edge: inset 0 1px 0 #ffffff17;
    --pilot-page-sheen:
      radial-gradient(90rem 40rem at 100% -5rem, #2a303a59, #2a303a00 70%),
      linear-gradient(170deg, #121419, #0b0c0e 22rem, #08090a 56rem);
    background: var(--pilot-page-sheen);
    background-color: var(--bg-primary);
  }
}
@layer components {
  .evaluation-detail-page .page-bg {
    display: none;
  }
  .evaluation-detail-page .eval-verdict {
    padding: 20px 24px;
  }
  .evaluation-detail-page :is(.eval-verdict, .eval-card) {
    border-width: 1px;
    border-style: solid;
  }
  .evaluation-detail-page .eval-verdict .ev-top {
    padding-bottom: 10px;
  }
  .evaluation-detail-page .eval-verdict .ev-chips {
    gap: 6px;
  }
  .evaluation-detail-page .eval-verdict .ev-headline {
    font-size: 25px;
    margin-block: 6px;
  }
  .evaluation-detail-page .eval-verdict .ev-scale {
    padding: 14px 16px;
    margin-top: 14px;
  }
  .evaluation-detail-page .eval-verdict .ev-plot-stage {
    margin-top: 22px;
  }
  .evaluation-detail-page .eval-verdict .ev-plot-stage--scale .ev-plot {
    height: 80px;
  }
  .evaluation-detail-page .eval-verdict .ev-plot-stage--scale .ev-plot-label--role {
    inset-block-start: -15px;
    bottom: auto;
  }
  .evaluation-detail-page .eval-verdict .ev-plot-stage--scale .ev-plot-label--cand {
    inset-block-start: 65px;
    bottom: auto;
  }
  .evaluation-detail-page .eval-verdict .ev-axis-ends {
    margin-top: 16px;
  }
  .evaluation-detail-page .eval-verdict .ev-scale-note {
    max-inline-size: 100%;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 12px;
  }
  .evaluation-detail-page .eval-verdict .ev-cov-sub,
  .evaluation-detail-page .eval-verdict .ev-cov-note {
    max-inline-size: 100%;
    font-size: 14px;
    line-height: 1.55;
  }
  .evaluation-detail-page .eval-verdict .ev-stage {
    padding: 10px 12px;
  }
  .evaluation-detail-page .eval-verdict .ev-foot {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 14px;
    padding-top: 12px;
  }
  .evaluation-detail-page .tab-list {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 6px;
    border-bottom: 1px solid;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .evaluation-detail-page .tab-trigger {
    white-space: nowrap;
    padding: 10px 14px;
  }
  .evaluation-detail-page .eval-card {
    padding: 20px;
  }
  .evaluation-detail-page .eval-card-head {
    margin-bottom: 16px;
    letter-spacing: 0.025em;
  }
  .evaluation-detail-page :is(.eval-summary, .eval-sd-item, .eval-signal-name, .eval-outcome-row) {
    font-size: 15px;
    line-height: 1.65;
  }
  .evaluation-detail-page .band {
    font-size: 12px;
    padding: 4px 9px;
  }
  .evaluation-detail-page :is(.eval-signal-row, .eval-outcome-row) {
    padding-block: 12px;
  }
  /* Only the swatch is faded (eval-detail.css); fading the whole entry took its
     label under 4.5:1 in both themes. */
  @media (max-width: 600px) {
    .evaluation-detail-page {
      padding: 16px !important;
    }
    .evaluation-detail-page .eval-verdict {
      padding: 16px;
    }
    .evaluation-detail-page .eval-verdict .ev-scale-head {
      flex-wrap: wrap;
      gap: 8px;
    }
    .evaluation-detail-page .eval-verdict .ev-plot-label {
      font-size: 11px;
    }
  }
  .evaluation-detail-page {
    overflow: visible !important;
  }
}

@layer theme {
  .evaluation-detail-page {
    --color-success: #287047;
    --color-info: #276d65;
    --color-warning: #875e12;
    --color-error: #ad4141;
  }
  [data-theme='dark'] .evaluation-detail-page {
    --color-success: #94d5ab;
    --color-info: #93c5fd;
    --color-warning: #e7c37d;
    --color-error: #f19a96;
    :is(.eval-verdict, .eval-card) {
      background-image: var(--pilot-sheen);
      box-shadow:
        var(--pilot-sheen-edge),
        0 8px 24px #00000059;
    }
    /* Mirrors the light rule's selectors so it wins on specificity, not source order. */
    :is(strong, b),
    .eval-verdict :is(strong, b) {
      color: var(--text-primary);
    }
  }
  .evaluation-detail-page .eval-card-head {
    color: var(--text-primary);
  }
  .evaluation-detail-page :is(.eval-verdict, .eval-card) {
    background: var(--surface-base);
    border-color: var(--pilot-border);
    box-shadow: none;
  }
  .evaluation-detail-page .eval-verdict .ev-scale {
    background: var(--surface-sunken);
    border-color: var(--pilot-border);
  }
  .evaluation-detail-page :is(strong, b),
  .evaluation-detail-page .eval-verdict :is(strong, b) {
    color: var(--accent-warm);
  }
  .evaluation-detail-page .tab-list {
    background: var(--bg-primary);
    border-color: var(--pilot-border);
  }
  .evaluation-detail-page .tab-list .tab-trigger.active {
    background: var(--pilot-selected);
    color: var(--text-primary);
  }
  /* The headline takes its verdict's colour (#1170). Every page-wide strong
     rule out-ranked the one in eval-detail.css: the brand's, scoped under
     body[data-authed]:has(#main-content > .page), carries an id (1,4,3 in
     dark), and the verdict card is also a .card. Anchoring on #main-content
     with one more class puts this at (1,5,1), above all of them in both themes. */
  #main-content .evaluation-detail-page.detail-page .eval-verdict .ev-verdict .ev-headline strong {
    color: var(--verdict-accent);
  }
}