/*
  Hamstring Testing Intelligence card (Version 3 Phase 11).

  Loaded after styles/v3-app-shell.css in v3.html, so the --v3-* custom
  properties are already in scope — this file defines none of its own and
  introduces no second design system.

  Scoped entirely under .v3-nordbord-intel* so it cannot bleed into the rest of
  the shell. It styles only the markup dashboards/nordbord/
  nordbordIntelligenceRenderer.js emits, changes no data contract, and nothing
  here is generated, inferred, or conditional on a value.

  ## Deliberately the Catapult card's stylesheet, class prefix aside

  The two cards have the same anatomy — a contextual statement plus actionable
  findings — so every shared rule below is the Catapult card's, unchanged. A
  fourth vocabulary of colour and spacing for a fourth vendor would be a second
  design system wearing a namespace, and a coach moving between panels would
  have to relearn what a tint means.

  The four outcome tints are therefore the Force Plate card's, which the Perch
  and Catapult cards also adopted: brand maroon for a matched rule (an exception
  worth attention, never a clinical judgement), green for within-threshold,
  amber for could-not-check, red only for an evaluation fault. The fifth, slate,
  marks a contextual rule: present, legible, and plainly a different kind of
  statement.

  ## The one section that is this card's alone

  `.v3-nordbord-intel-side-*` styles the side-attribution list, which no other
  card in this application has, because ASYMMETRY_STANDARD.md §5 permits only
  NordBord to name a limb. It introduces **no new colour**: it reuses the maroon
  finding tint, because a side-attributed finding is a finding, and adds only
  the badge and the basis line that say what kind of claim it is.

  Nothing here is tinted by severity, and no rule below reacts to a value. A
  stylesheet that turned red above a number would be making the clinical
  judgement PERFORMANCE_KNOWLEDGE_MODEL.md §9 forbids, in CSS.
*/

/* ---------------------------------------------------------------------- */
/* Card shell                                                             */
/* ---------------------------------------------------------------------- */

/*
  ## Why this card must be able to shrink to nothing

  The card is a sibling of the VBT tables inside `[data-perch-dashboard-root]`,
  a shared column flex container. A grid or flex item's automatic minimum size
  is its min-content width, and an ancestor track cannot shrink below it — so an
  item that refuses to get narrower does not overflow itself, it widens
  everything it shares a container with. That is the only way a fully namespaced
  stylesheet can damage a layout it never selects, and it is what the Force
  Plate card hit at 1024px.

  The same three rules apply here, and none may be removed:

  - `min-width: 0` on the card and on every flex/grid child that holds text.
  - `minmax(min(Npx, 100%), 1fr)` rather than `minmax(Npx, 1fr)`.
  - No `white-space: nowrap` on anything longer than a short label.
*/

.v3-nordbord-intelligence {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-4);
  padding: var(--v3-space-5);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
  background: var(--v3-surface);
  min-width: 0;
  max-width: 100%;
}

.v3-nordbord-intelligence *,
.v3-nordbord-intelligence *::before,
.v3-nordbord-intelligence *::after {
  min-width: 0;
}

.v3-nordbord-intel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--v3-space-2) var(--v3-space-4);
  padding-bottom: var(--v3-space-3);
  border-bottom: 1px solid var(--v3-border);
}

.v3-nordbord-intel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

/* The standing statement that these boundaries are unreviewed. It is part of
   the card's meaning, so it is legible rather than fine print. */
.v3-nordbord-intel-ruleset {
  margin: 0;
  font-size: 0.78rem;
  color: var(--v3-text-muted);
  overflow-wrap: anywhere;
}

.v3-nordbord-intelligence h4 {
  margin: var(--v3-space-2) 0 0;
  font-size: 0.88rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Overall status and the count strip                                     */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-summary {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-3);
}

.v3-nordbord-intel-status {
  margin: 0;
  padding: var(--v3-space-2) var(--v3-space-3);
  border-left: 4px solid var(--v3-border-strong);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface-muted);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--v3-text);
}

.v3-nordbord-intelligence[data-status="findings"] .v3-nordbord-intel-status {
  border-left-color: var(--v3-maroon);
  background: #fbeef2;
  color: var(--v3-maroon-dark);
}

/* A `findings` status whose every match was contextual is not a threshold
   breach, and must not be tinted as one. */
.v3-nordbord-intelligence[data-context-only="true"] .v3-nordbord-intel-status {
  border-left-color: #7b8ca6;
  background: #eef2f7;
  color: #33455e;
}

.v3-nordbord-intelligence[data-status="no_findings"] .v3-nordbord-intel-status {
  border-left-color: #3d8b5f;
  background: #e6f4ea;
  color: #1e5631;
}

.v3-nordbord-intelligence[data-status="all_suppressed"] .v3-nordbord-intel-status {
  border-left-color: #d9b26a;
  background: #fdf3df;
  color: #6b4700;
}

.v3-nordbord-intelligence[data-status="error"] .v3-nordbord-intel-status {
  border-left-color: #c07070;
  background: #fdecea;
  color: #7a1f1f;
}

.v3-nordbord-intel-counts {
  display: grid;
  /* `min(140px, 100%)`: 140px when the container can afford it, and the
     container's own width when it cannot. A bare 140px would be a floor. */
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--v3-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-nordbord-intel-counts li {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
  padding: var(--v3-space-3);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface-muted);
}

.v3-nordbord-intel-counts span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-nordbord-intel-counts strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--v3-text);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Highest priority findings                                              */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-findings-priority {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-nordbord-intel-priority-finding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--v3-space-1) var(--v3-space-3);
  padding: var(--v3-space-3) var(--v3-space-4);
  border: 1px solid var(--v3-border);
  border-left: 4px solid var(--v3-maroon);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
}

.v3-nordbord-intel-priority-finding .v3-nordbord-intel-finding-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-priority-value {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: var(--v3-text);
  overflow-wrap: anywhere;
}

/* The two measurements a percentage change came from. A percentage alone does
   not say what moved, so this line is part of the finding, not decoration. */
.v3-nordbord-intel-priority-movement {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--v3-text);
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-priority-evidence {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--v3-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Side attribution: the one section no other card has                    */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-side-findings {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Same maroon left border as a priority finding, because it is one. The badge
   below, not the colour, is what says a side was named. */
.v3-nordbord-intel-side-finding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--v3-space-1) var(--v3-space-3);
  align-items: baseline;
  padding: var(--v3-space-3) var(--v3-space-4);
  border: 1px solid var(--v3-border);
  border-left: 4px solid var(--v3-maroon);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
}

.v3-nordbord-intel-side-badge {
  display: inline-block;
  align-self: start;
  padding: 2px var(--v3-space-2);
  border: 1px solid #d8b3bf;
  border-radius: 999px;
  background: #fbeef2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v3-maroon-dark);
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-side-value {
  font-size: 0.95rem;
  color: var(--v3-text);
  overflow-wrap: anywhere;
}

/* Why this card is allowed to say "left" or "right" at all. It is part of the
   claim, not a footnote, so it stays legible rather than becoming fine print. */
.v3-nordbord-intel-side-basis {
  margin: var(--v3-space-2) 0 0;
  font-size: 0.8rem;
  color: var(--v3-text-muted);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Context: what the evaluation established                               */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-context-findings,
.v3-nordbord-intel-context-notes {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-nordbord-intel-context-notes {
  margin-top: var(--v3-space-2);
}

.v3-nordbord-intel-context-finding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--v3-space-1) var(--v3-space-3);
  padding: var(--v3-space-3) var(--v3-space-4);
  border: 1px solid #c3cddb;
  /* Slate rather than maroon: present, and plainly not a threshold breach. */
  border-left: 4px solid #7b8ca6;
  border-radius: var(--v3-radius-sm);
  background: #eef2f7;
}

.v3-nordbord-intel-context-finding .v3-nordbord-intel-finding-name {
  font-weight: 700;
  color: #33455e;
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-context-badge {
  display: inline-block;
  align-self: start;
  padding: 2px var(--v3-space-2);
  border: 1px solid #a9b8cc;
  border-radius: 999px;
  background: var(--v3-surface);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #33455e;
}

.v3-nordbord-intel-context-value {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: #33455e;
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-context-note {
  padding: var(--v3-space-2) var(--v3-space-3);
  border: 1px dashed #a9b8cc;
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
  font-size: 0.82rem;
  color: #33455e;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Outcome badges, shared by both finding lists                           */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-finding-outcome {
  display: inline-block;
  align-self: start;
  padding: 2px var(--v3-space-2);
  border: 1px solid var(--v3-border-strong);
  border-radius: 999px;
  background: var(--v3-surface-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v3-text-muted);
  /* "Configured threshold exceeded" is ~190px unbreakable. It wraps rather
     than setting a floor under the whole panel. */
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-priority-finding .v3-nordbord-intel-finding-outcome,
.v3-nordbord-intel-finding[data-outcome="matched"] .v3-nordbord-intel-finding-outcome {
  border-color: #d8b3bf;
  background: #fbeef2;
  color: var(--v3-maroon-dark);
}

/* A contextual match in the full results list keeps the slate, so the two
   lists agree about what kind of statement it is. */
.v3-nordbord-intel-finding[data-contextual="true"] .v3-nordbord-intel-finding-outcome {
  border-color: #a9b8cc;
  background: #eef2f7;
  color: #33455e;
}

.v3-nordbord-intel-finding[data-outcome="notMatched"] .v3-nordbord-intel-finding-outcome {
  border-color: #9fcbb0;
  background: #e6f4ea;
  color: #1e5631;
}

.v3-nordbord-intel-finding[data-outcome="suppressed"] .v3-nordbord-intel-finding-outcome {
  border-color: #d9b26a;
  background: #fdf3df;
  color: #6b4700;
}

.v3-nordbord-intel-finding[data-outcome="error"] .v3-nordbord-intel-finding-outcome {
  border-color: #c07070;
  background: #fdecea;
  color: #7a1f1f;
}

/* An unconfirmed unit is stated rather than printed beside the number
   (D-CMC-3), so the note must read as a caveat and not as a unit. */
.v3-nordbord-intel-unit-note {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--v3-text-muted);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Suggested actions                                                      */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-nordbord-intel-recommendation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v3-space-2) var(--v3-space-3);
  padding: var(--v3-space-3) var(--v3-space-4);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface-muted);
}

.v3-nordbord-intel-recommendation-action {
  font-weight: 600;
  color: var(--v3-text);
}

.v3-nordbord-intel-recommendation-meta {
  font-size: 0.78rem;
  color: var(--v3-text-muted);
  overflow-wrap: anywhere;
}

/* Every recommendation surface states that it is a suggestion for staff
   review (PERFORMANCE_KNOWLEDGE_MODEL.md §21). It is never de-emphasised to
   the point of disappearing. */
.v3-nordbord-intel-disclaimer {
  margin: 0;
  font-size: 0.8rem;
  color: var(--v3-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Rules that could not be evaluated                                      */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-suppressed-rules {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-nordbord-intel-suppressed-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v3-space-1) var(--v3-space-3);
  padding: var(--v3-space-2) var(--v3-space-3);
  border-bottom: 1px solid var(--v3-border);
}

.v3-nordbord-intel-suppressed-rule:last-child {
  border-bottom: 0;
}

.v3-nordbord-intel-suppressed-name {
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-suppressed-reason {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b4700;
}

/* ---------------------------------------------------------------------- */
/* All rule results, and per-finding evidence                             */
/* ---------------------------------------------------------------------- */

.v3-nordbord-intel-all-results,
.v3-nordbord-intel-provenance {
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface-muted);
}

.v3-nordbord-intel-all-results > summary,
.v3-nordbord-intel-provenance > summary,
.v3-nordbord-intel-evidence > summary {
  padding: var(--v3-space-2) var(--v3-space-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--v3-text-muted);
  cursor: pointer;
}

.v3-nordbord-intel-all-results[open] > summary,
.v3-nordbord-intel-provenance[open] > summary {
  border-bottom: 1px solid var(--v3-border);
}

.v3-nordbord-intel-all-results > summary:focus-visible,
.v3-nordbord-intel-provenance > summary:focus-visible,
.v3-nordbord-intel-evidence > summary:focus-visible {
  outline: 3px solid var(--v3-focus-ring);
  outline-offset: 2px;
}

.v3-nordbord-intel-findings {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-3);
  margin: 0;
  padding: var(--v3-space-3);
  list-style: none;
}

.v3-nordbord-intel-finding {
  padding: var(--v3-space-3);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
}

.v3-nordbord-intel-finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v3-space-2);
}

.v3-nordbord-intel-finding-name {
  font-size: 0.88rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.v3-nordbord-intel-suppression {
  margin: var(--v3-space-1) 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b4700;
}

.v3-nordbord-intel-finding-values,
.v3-nordbord-intel-evidence dl,
.v3-nordbord-intel-provenance dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--v3-space-2) var(--v3-space-4);
  margin: var(--v3-space-3) 0 0;
}

.v3-nordbord-intel-evidence dl,
.v3-nordbord-intel-provenance dl {
  margin: 0;
  padding: var(--v3-space-3);
}

.v3-nordbord-intel-finding-values dt,
.v3-nordbord-intel-evidence dt,
.v3-nordbord-intel-provenance dt {
  margin: 0 0 var(--v3-space-1);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-nordbord-intel-finding-values dd,
.v3-nordbord-intel-evidence dd,
.v3-nordbord-intel-provenance dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--v3-text);
  /* recordKeys are long, opaque, and must never push the panel sideways. */
  overflow-wrap: anywhere;
}

/* Window sessions, size, and observed dates behind a change finding. Secondary
   to the value above them, but never hidden: a change nobody can trace to two
   windows is not evidence. */
.v3-nordbord-intel-window-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--v3-text-muted);
}

.v3-nordbord-intel-window-shortfall {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b4700;
}

.v3-nordbord-intel-evidence {
  margin-top: var(--v3-space-3);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface-muted);
}

.v3-nordbord-intel-evidence[open] > summary {
  border-bottom: 1px solid var(--v3-border);
}

/* ---------------------------------------------------------------------- */
/* Empty, unavailable, and error states                                   */
/* ---------------------------------------------------------------------- */

/* Stated answers, never blank space: "nothing crossed a threshold" and "no
   data has been imported" are results a coach needs to be able to read. */
.v3-nordbord-intel-empty {
  margin: 0;
  padding: var(--v3-space-4);
  border: 1px dashed var(--v3-border-strong);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface-muted);
  color: var(--v3-text-muted);
}

.v3-nordbord-intelligence[data-status="configuration_error"] .v3-nordbord-intel-empty,
.v3-nordbord-intelligence[data-status="evaluation_error"] .v3-nordbord-intel-empty {
  border-style: solid;
  border-color: #e0a3a3;
  background: #fdecea;
  color: #7a1f1f;
}

.v3-nordbord-intel-detail {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: #7a1f1f;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Responsive: tablet and narrow desktop                                  */
/* ---------------------------------------------------------------------- */

@media (max-width: 899px) {
  .v3-nordbord-intelligence {
    padding: var(--v3-space-4);
  }

  .v3-nordbord-intel-counts {
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  }
}

@media (max-width: 560px) {
  .v3-nordbord-intel-counts {
    grid-template-columns: 1fr;
  }

  .v3-nordbord-intel-priority-finding,
  .v3-nordbord-intel-context-finding,
  .v3-nordbord-intel-side-finding {
    grid-template-columns: 1fr;
  }

  .v3-nordbord-intel-finding-values,
  .v3-nordbord-intel-evidence dl,
  .v3-nordbord-intel-provenance dl {
    grid-template-columns: 1fr;
  }

  .v3-nordbord-intel-recommendation,
  .v3-nordbord-intel-suppressed-rule {
    flex-direction: column;
    align-items: flex-start;
  }
}