/* ============================================
   POSITION RESULTS TAB — cohort triage view
   Rendered by CohortRenderer.fs into the Results tab of the position page.
   Bands are the spine (no absolute scores); relative standing is muted and
   context-only. Two-layer split: components = structure, theme = colour.
   ============================================ */

@layer components {
  .cohort-root {
    display: block;

    /* ---- Cohort summary ---- */
    .cohort-summary {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      padding: var(--space-lg);
      border-radius: var(--radius-lg);
      margin-block-end: var(--space-md);
    }

    .cohort-funnel {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: var(--space-sm);
      margin: 0;
      padding: 0;
      list-style: none;

      .funnel-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4xs);
        /* Kill the app-wide adjacent-sibling stack margin (base.css owl) — it
           lands only on steps 2..n and shoves them ~5px below Invited. This row
           spaces horizontally via the parent's `gap`, so no margin is wanted. */
        margin: 0;
        flex: 1 1 0;
        min-width: 4.5rem;
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);

        .funnel-count {
          font-size: var(--fs-large);
          font-weight: var(--fw-bold);
          line-height: 1;
        }

        .funnel-label {
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-medium);
          text-transform: uppercase;
          letter-spacing: 0.04em;
        }
      }
    }

    /* ---- Cohort distribution strip ---- */
    .cohort-plot-stage {
      position: relative;
    }

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

    /* The role bar is a handle dragged along the plot; touch-action:none so a
       touch-drag moves the bar instead of scrolling the page. */
    .cohort-bar-handle {
      cursor: grab;
      touch-action: none;

      &:active {
        cursor: grabbing;
      }
    }

    /* Dots fade as they cross behind the bar; smooth the state change. */
    .cohort-dot {
      transition: fill-opacity 0.12s ease;
    }

    /* ---- Interactive role-bar control ---- */
    .cohort-bar-control {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin-block-start: var(--space-sm);
    }

    .cohort-bar-readout {
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
    }

    .cohort-bar-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
    }

    .cohort-bar-btn {
      padding: var(--space-4xs) var(--space-sm);
      border-radius: var(--radius-sm);
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      cursor: pointer;

      &:disabled {
        cursor: not-allowed;
      }
    }

    .cohort-bar-status {
      font-size: var(--fs-xsmall);
      min-block-size: 1rem;
    }

    /* ---- Cohort summary stat tiles ---- */
    .cohort-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-sm);

      .cohort-stat {
        display: flex;
        flex-direction: column;
        gap: var(--space-4xs);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);

        .cohort-stat-value {
          font-size: var(--fs-large);
          font-weight: var(--fw-bold);
          line-height: 1.1;
        }

        .cohort-stat-sub {
          font-size: var(--fs-xxsmall);
        }

        .cohort-stat-label {
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-medium);
          text-transform: uppercase;
          letter-spacing: 0.03em;
        }
      }
    }

    .band-distribution {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);

      .band-bar {
        display: inline-flex;
        align-items: baseline;
        gap: var(--space-2xs);
        padding: var(--space-2xs) var(--space-sm);
        border-radius: var(--radius-pill);

        .band-bar-count {
          font-size: var(--fs-small);
          font-weight: var(--fw-bold);
        }

        .band-bar-label {
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-medium);
        }
      }
    }

    .cohort-note {
      margin: 0;
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    /* ---- Bulk action bar ---- */
    .cohort-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
      margin-block-end: var(--space-md);

      /* Two rows: pick the cohort, then reason + decide. Keeps the reason
         field from being crushed between the top-n picker and the buttons. */
      .cohort-actions-select,
      .cohort-actions-decide {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm);
      }

      .cohort-select-all-label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);
        font-size: var(--fs-small);
        cursor: pointer;
      }

      /* Native checkboxes render as a ~13px dot that all but vanishes on the
         dark surface; size the select-all up so it reads as a real, clickable
         checkbox. The row-select is sized in .cohort-row below (it lives
         outside .cohort-actions in the DOM). Colour (accent-color) is in
         @layer theme. */
      .cohort-select-all {
        inline-size: 1.15rem;
        block-size: 1.15rem;
        flex: none;
      }

      .cohort-selection-count {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
      }

      .cohort-topn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);

        .cohort-topn-label {
          font-size: var(--fs-xsmall);
        }

        .cohort-topn-btn {
          padding: var(--space-4xs) var(--space-xs);
          border-radius: var(--radius-sm);
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-medium);
          cursor: pointer;
        }
      }

      .cohort-reason {
        flex: 1 1 16rem;
        min-inline-size: 12rem;
        padding: var(--space-2xs) var(--space-sm);
        border-radius: var(--radius-sm);
        font-size: var(--fs-small);
      }

      .cohort-dispo-buttons {
        display: inline-flex;
        gap: var(--space-2xs);
        margin-inline-start: auto;

        .cohort-dispo-btn {
          padding: var(--space-2xs) var(--space-md);
          border-radius: var(--radius-sm);
          font-size: var(--fs-small);
          font-weight: var(--fw-semibold);
          cursor: pointer;
          transition:
            background 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease;

          &:disabled {
            cursor: not-allowed;
          }
        }
      }

      .cohort-status {
        flex-basis: 100%;
        margin: 0;
        font-size: var(--fs-xsmall);
      }
    }

    /* ---- Ranked candidate list ---- */
    .cohort-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cohort-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);

      .cohort-row-select {
        cursor: pointer;
        inline-size: 1.15rem;
        block-size: 1.15rem;
      }

      .cohort-row-main {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        min-width: 0;
        text-decoration: none;

        .cohort-row-identity {
          display: flex;
          flex-direction: column;
          min-width: 0;

          .cohort-row-name {
            font-size: var(--fs-small);
            font-weight: var(--fw-semibold);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .cohort-row-email {
            font-size: var(--fs-xsmall);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .cohort-task-dots {
          display: inline-flex;
          gap: 3px;

          .cohort-task-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
          }
        }
      }

      .cohort-band {
        justify-self: start;
        padding: var(--space-4xs) var(--space-sm);
        border-radius: var(--radius-pill);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
      }

      .cohort-standing {
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
      }

      .cohort-flags {
        display: inline-flex;
        gap: var(--space-3xs);

        .cohort-flag {
          padding: var(--space-4xs) var(--space-xs);
          border-radius: var(--radius-sm);
          font-size: var(--fs-xxsmall);
          font-weight: var(--fw-medium);
          white-space: nowrap;
        }
      }

      .cohort-dispo-badge {
        padding: var(--space-4xs) var(--space-sm);
        border-radius: var(--radius-pill);
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
      }

      .cohort-chevron {
        font-size: var(--fs-medium);
        line-height: 1;
      }
    }

    /* ---- Empty state ---- */
    .cohort-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-3xl) var(--space-lg);
      text-align: center;

      .cohort-empty-title {
        margin: 0;
        font-size: var(--fs-medium);
        font-weight: var(--fw-semibold);
      }

      .cohort-empty-body {
        margin: 0;
        max-width: 32rem;
        font-size: var(--fs-small);
        line-height: 1.5;
      }
    }

    /* ---- Narrow viewports: relax the fixed row grid ---- */
    @media (width < 48rem) {
      .cohort-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: var(--space-2xs);

        .cohort-standing,
        .cohort-flags {
          grid-column: 2 / -1;
        }
      }

      .cohort-actions .cohort-dispo-buttons {
        margin-inline-start: 0;
      }
    }
  }

  /* Preview runs — admin test attempts. A sibling of .cohort-root in the
     Evaluations tab (rendered into its own hole, never the cohort itself). */
  .preview-runs {
    margin-block-start: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;

    .preview-runs-summary {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      cursor: pointer;
      list-style: none;
      font-size: var(--fs-small);

      &::-webkit-details-marker {
        display: none;
      }

      .preview-runs-title {
        font-weight: var(--fw-semibold);
      }

      .preview-runs-count {
        padding: 0 var(--space-2xs);
        border-radius: var(--radius-pill);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-bold);
      }

      .preview-runs-note {
        margin-inline-start: auto;
        font-size: var(--fs-xsmall);
      }
    }

    .preview-runs-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin: 0;
      padding: 0 var(--space-sm) var(--space-sm);
      list-style: none;
    }

    .preview-run-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius-sm);

      .preview-run-identity {
        display: flex;
        flex-direction: column;
        min-width: 0;

        .preview-run-name {
          font-size: var(--fs-small);
          font-weight: var(--fw-medium);
        }

        .preview-run-email {
          font-size: var(--fs-xsmall);
        }
      }

      .preview-run-view {
        margin-inline-start: auto;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        text-decoration: none;
        white-space: nowrap;
      }
    }
  }
}

@layer theme {
  .cohort-root {
    .cohort-summary {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid var(--border-subtle);
    }

    .cohort-funnel .funnel-step {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      color: var(--text-primary);

      .funnel-label {
        color: var(--text-secondary);
      }

      &.is-terminal {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        color: var(--accent-primary);

        .funnel-label {
          color: var(--accent-primary);
        }
      }
    }

    .cohort-note {
      color: var(--text-secondary);
    }

    .cohort-stats .cohort-stat {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));

      .cohort-stat-sub,
      .cohort-stat-label {
        color: var(--text-secondary);
      }
    }

    .cohort-stat--ahead .cohort-stat-value {
      color: var(--color-success);
    }

    .cohort-stat--behind .cohort-stat-value {
      color: var(--color-error);
    }

    .cohort-stat--most .cohort-stat-value {
      color: var(--text-primary);
    }

    /* Band palette — one source of truth for the four bands, shared by the
       distribution bars and the row chips. Kept as explicit paired selectors
       (not a nested &--mod under a comma list, which would expand to an invalid
       :is(...)--mod and match nothing). */
    .band-bar--strong,
    .cohort-band--strong {
      background: oklch(from var(--color-success) l c h / 0.14);
      border: 1px solid oklch(from var(--color-success) l c h / 0.3);
      color: var(--color-success);
    }

    .band-bar--adequate,
    .cohort-band--adequate {
      background: oklch(from var(--color-info) l c h / 0.14);
      border: 1px solid oklch(from var(--color-info) l c h / 0.3);
      color: var(--color-info);
    }

    .band-bar--limited,
    .cohort-band--limited {
      background: oklch(from var(--color-warning) l c h / 0.14);
      border: 1px solid oklch(from var(--color-warning) l c h / 0.3);
      color: var(--color-warning);
    }

    .band-bar--none,
    .cohort-band--none {
      background: oklch(from var(--text-secondary) l c h / 0.1);
      border: 1px solid oklch(from var(--text-secondary) l c h / 0.25);
      color: var(--text-secondary);
    }

    /* A band with zero candidates recedes to a neutral ghost so the
       populated bands lead the eye. Wins over the colour rules above by
       source order (same specificity). */
    .band-bar--empty {
      background: oklch(from var(--text-secondary) l c h / 0.05);
      border: 1px solid oklch(from var(--text-secondary) l c h / 0.14);
      color: var(--text-secondary);
      opacity: 0.6;
    }

    /* Flat modifier selectors: native CSS nesting has no Sass-style `&--mod`
       concatenation (and the BFF serves CSS raw — no transpile step), so a
       `.cohort-task-dot { &--strong {} }` would expand to an invalid selector
       and never paint. Same pattern for the band palette above and the
       disposition selectors below. */
    .cohort-task-dot--strong {
      background: var(--color-success);
    }

    .cohort-task-dot--adequate {
      background: var(--color-info);
    }

    .cohort-task-dot--limited {
      background: var(--color-warning);
    }

    .cohort-task-dot--none {
      background: oklch(from var(--text-secondary) l c h / 0.4);
    }

    .cohort-actions {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid var(--border-subtle);

      .cohort-select-all-label,
      .cohort-topn-label {
        color: var(--text-primary);
      }

      /* On-brand checked fill + a legible control on dark. */
      .cohort-select-all {
        accent-color: var(--accent-primary);
      }

      .cohort-selection-count {
        color: var(--text-secondary);
      }

      .cohort-topn-btn {
        background: transparent;
        border: 1px solid var(--border-muted);
        color: var(--text-secondary);

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

      .cohort-reason {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--text-primary);

        &::placeholder {
          color: var(--text-secondary);
        }
      }

      .cohort-status {
        color: var(--text-secondary);
      }
    }

    /* ---- Interactive role-bar control ---- */
    .cohort-bar-handle:focus-visible {
      outline: none;

      /* The handle group is focusable (role="slider"); mark focus on the knob
         itself rather than boxing the whole tall handle. */
      .cohort-bar-knob rect {
        stroke: var(--accent-primary);
        stroke-width: 2;
      }
    }

    .cohort-bar-readout {
      color: var(--text-primary);
    }

    .cohort-bar-btn {
      background: transparent;
      border: 1px solid var(--border-muted);
      color: var(--text-secondary);

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

      &:disabled {
        opacity: 0.55;
      }
    }

    .cohort-bar-btn--primary {
      border-color: var(--accent-primary);
      background: var(--accent-primary);
      color: var(--surface-base);

      &:hover:not(:disabled) {
        color: var(--surface-base);
        opacity: 0.9;
      }
    }

    .cohort-bar-status {
      color: var(--text-secondary);
    }

    /* Disposition buttons — outline that fills on hover. Pseudo-classes nest
       fine under `&`; the coloured variants are flat (see the note above). */
    .cohort-dispo-btn {
      background: transparent;
      border: 1px solid var(--border-muted);
      color: var(--text-secondary);

      &:disabled {
        opacity: 0.5;
      }
    }

    /* Semantic colour at rest so the actions read as three distinct
       decisions, not three grey outlines; hover fills the tint. */
    .cohort-dispo-btn--shortlist {
      border-color: oklch(from var(--color-success) l c h / 0.35);
      color: var(--color-success);
    }

    .cohort-dispo-btn--hold {
      border-color: oklch(from var(--color-warning) l c h / 0.35);
      color: var(--color-warning);
    }

    .cohort-dispo-btn--decline {
      border-color: oklch(from var(--color-error) l c h / 0.35);
      color: var(--color-error);
    }

    .cohort-dispo-btn--shortlist:hover:not(:disabled) {
      background: oklch(from var(--color-success) l c h / 0.14);
      border-color: oklch(from var(--color-success) l c h / 0.4);
      color: var(--color-success);
    }

    .cohort-dispo-btn--hold:hover:not(:disabled) {
      background: oklch(from var(--color-warning) l c h / 0.14);
      border-color: oklch(from var(--color-warning) l c h / 0.4);
      color: var(--color-warning);
    }

    .cohort-dispo-btn--decline:hover:not(:disabled) {
      background: oklch(from var(--color-error) l c h / 0.14);
      border-color: oklch(from var(--color-error) l c h / 0.4);
      color: var(--color-error);
    }

    .cohort-row {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.02));
      border: 1px solid var(--border-faint);

      &:hover {
        border-color: var(--border-muted);
      }

      .cohort-row-select {
        accent-color: var(--accent-primary);
      }

      .cohort-row-name {
        color: var(--text-primary);
      }

      .cohort-row-email {
        color: var(--text-secondary);
      }

      .cohort-standing {
        color: var(--text-secondary);
      }

      .cohort-chevron {
        color: var(--text-secondary);
      }
    }

    .cohort-flag--debrief {
      background: oklch(from var(--color-warning) l c h / 0.12);
      border: 1px solid oklch(from var(--color-warning) l c h / 0.28);
      color: var(--color-warning);
    }

    /* Recorded disposition badges (flat modifiers — see the note above). */
    .cohort-dispo-badge--shortlist {
      background: oklch(from var(--color-success) l c h / 0.16);
      color: var(--color-success);
    }

    .cohort-dispo-badge--hold {
      background: oklch(from var(--color-warning) l c h / 0.16);
      color: var(--color-warning);
    }

    .cohort-dispo-badge--decline {
      background: oklch(from var(--color-error) l c h / 0.16);
      color: var(--color-error);
    }

    .cohort-empty {
      .cohort-empty-title {
        color: var(--text-primary);
      }

      .cohort-empty-body {
        color: var(--text-secondary);
      }
    }
  }

  .preview-runs {
    border: 1px solid var(--border-subtle);
    background: light-dark(oklch(0% 0 0 / 0.015), oklch(100% 0 0 / 0.02));

    .preview-runs-summary {
      color: var(--text-primary);

      .preview-runs-count {
        background: oklch(from var(--text-secondary) l c h / 0.14);
        color: var(--text-secondary);
      }

      .preview-runs-note {
        color: var(--text-secondary);
      }
    }

    .preview-run-row {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.02));

      .preview-run-name {
        color: var(--text-primary);
      }

      .preview-run-email {
        color: var(--text-secondary);
      }

      .preview-run-view {
        color: var(--accent-primary);
      }
    }
  }
}