/* ──────────────────────────────────────────────────────────────
   findings.css — Lab451 reference report panel
   Loaded after labs.css. Uses its own --l451-* variables with
   fallbacks so it renders correctly whatever labs.css defines,
   and follows the existing [data-theme] dark-mode convention.

   Motion: the panel rises in, findings stagger in, and an opened
   finding fades its body in (@starting-style). All of it is
   CSS-only and needs no markup change; browsers without
   @starting-style simply show the body instantly.
   ────────────────────────────────────────────────────────────── */

:root {
  --l451-critical: #dc2626;
  --l451-high:     #ea580c;
  --l451-medium:   #b45309;
  --l451-low:      #2563eb;
  --l451-info:     #6b7280;
  --l451-clean:    #16a34a;

  --l451-bg:       var(--surface, #ffffff);
  --l451-surface:  var(--bg-2, #f9fafb);
  --l451-border:   var(--border, #e5e7eb);
  --l451-text:     inherit;
  --l451-muted:    var(--text-2, #4b5563);
  --l451-code-bg:  var(--bg-3, #f3f4f6);
  --l451-mono:     var(--font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  --l451-ease:     cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --l451-critical: #f87171;
  --l451-high:     #fb923c;
  --l451-medium:   #fbbf24;
  --l451-low:      #60a5fa;
  --l451-info:     #9ca3af;
  --l451-clean:    #4ade80;

  --l451-bg:       var(--surface, #111827);
  --l451-surface:  var(--bg-2, #111827);
  --l451-border:   var(--border, #1f2937);
  --l451-muted:    var(--text-2, #d1d5db);
  --l451-code-bg:  var(--bg-3, #1f2937);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --l451-critical: #f87171;
    --l451-high:     #fb923c;
    --l451-medium:   #fbbf24;
    --l451-low:      #60a5fa;
    --l451-info:     #9ca3af;
    --l451-clean:    #4ade80;
  }
}

@keyframes l451-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Panel shell ──
   Neutral border; state shows as a thin left edge and a faint
   wash at the top (green when clean, red when blocking). */
.l451-panel {
  /* --l451-edge: var(--l451-clean); */
  margin-top: 12px;
  padding: 12px 14px 14px;
  border: 1px solid var(--l451-clean);
  border-radius: var(--radius);
  background: var(--l451-bg);
  box-shadow: inset 3px 0 0 0 var(--l451-edge);
  color: var(--l451-text);
  font-size: 0.9rem;
  line-height: 1.5;
  animation: l451-rise 0.38s var(--l451-ease) 0.06s both;
}
.l451-panel--blocking { --l451-edge: var(--l451-critical); }

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .l451-panel {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--l451-edge) 6%, var(--l451-bg)) 0,
      var(--l451-bg) 96px);
  }
}

.l451-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.l451-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--l451-clean, inherit);
}
.l451-panel__title::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--l451-edge);
  flex: 0 0 auto;
}

.l451-panel__warn {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--l451-critical);
  border-radius: 8px;
  color: var(--l451-critical);
  font-weight: 500;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .l451-panel__warn {
    background: color-mix(in srgb, var(--l451-critical) 7%, transparent);
    border-color: color-mix(in srgb, var(--l451-critical) 28%, transparent);
  }
}
.l451-panel__note  { margin: 0 0 10px; color: var(--l451-muted); }
.l451-panel__clean { margin: 0; color: var(--l451-muted); }

/* ── Severity chips and tab badges — tinted pills ── */
.l451-sevrow { display: flex; flex-wrap: wrap; gap: 5px; }

.l451-chip,
.l451-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid currentColor;
  background: transparent;
  animation: l451-rise 0.3s var(--l451-ease) 0.12s both;
}
.l451-chip strong { font-weight: 700; }
.l451-badge { margin-left: 8px; vertical-align: middle; animation: none; }

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .l451-chip,
  .l451-badge {
    background: color-mix(in srgb, currentColor 9%, transparent);
    border-color: color-mix(in srgb, currentColor 32%, transparent);
  }
}

.l451-chip--critical, .l451-badge--critical { color: var(--l451-critical); }
.l451-chip--high,     .l451-badge--high     { color: var(--l451-high); }
.l451-chip--medium,   .l451-badge--medium   { color: var(--l451-medium); }
.l451-chip--low,      .l451-badge--low      { color: var(--l451-low); }
.l451-chip--info,     .l451-badge--info     { color: var(--l451-info); }
.l451-badge--clean                          { color: var(--l451-clean); }

/* ── Individual findings ── */
.l451-panel__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.l451-finding {
  border: 1px solid var(--l451-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--l451-bg);
  box-shadow: inset 2px 0 0 0 var(--l451-sev, transparent);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.l451-finding:has(.l451-dot--critical) { --l451-sev: var(--l451-critical); }
.l451-finding:has(.l451-dot--high)     { --l451-sev: var(--l451-high); }
.l451-finding:has(.l451-dot--medium)   { --l451-sev: var(--l451-medium); }
.l451-finding:has(.l451-dot--low)      { --l451-sev: var(--l451-low); }
.l451-finding:has(.l451-dot--info)     { --l451-sev: var(--l451-info); }

/* Staggered entrance — replays each time a new report renders */
.l451-panel__list > .l451-finding { animation: l451-rise 0.3s var(--l451-ease) both; }
.l451-panel__list > .l451-finding:nth-child(1)  { animation-delay: 0.14s; }
.l451-panel__list > .l451-finding:nth-child(2)  { animation-delay: 0.18s; }
.l451-panel__list > .l451-finding:nth-child(3)  { animation-delay: 0.22s; }
.l451-panel__list > .l451-finding:nth-child(4)  { animation-delay: 0.26s; }
.l451-panel__list > .l451-finding:nth-child(5)  { animation-delay: 0.30s; }
.l451-panel__list > .l451-finding:nth-child(6)  { animation-delay: 0.34s; }
.l451-panel__list > .l451-finding:nth-child(7)  { animation-delay: 0.38s; }
.l451-panel__list > .l451-finding:nth-child(8)  { animation-delay: 0.42s; }
.l451-panel__list > .l451-finding:nth-child(n+9) { animation-delay: 0.46s; }

.l451-finding__head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.l451-finding__head:hover { background: var(--l451-surface); }
.l451-finding__head:focus-visible { outline: 2px solid var(--l451-low); outline-offset: -2px; }

/* Chevron — only drawn when the button exposes aria-expanded */
.l451-finding__head[aria-expanded]::after {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin: 0 2px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.5;
  transform: rotate(45deg);
  transition: transform 0.2s var(--l451-ease), margin 0.2s var(--l451-ease);
}
.l451-finding__head[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}
.l451-finding:has(> .l451-finding__head[aria-expanded="true"]) { border-color: var(--border-strong, #d1d5db); }
.l451-finding:has(> .l451-finding__head[aria-expanded="true"]) .l451-finding__head { background: var(--l451-surface); }

.l451-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.l451-dot--critical { color: var(--l451-critical); }
.l451-dot--high     { color: var(--l451-high); }
.l451-dot--medium   { color: var(--l451-medium); }
.l451-dot--low      { color: var(--l451-low); }
.l451-dot--info     { color: var(--l451-info); }

.l451-finding__title { flex: 1 1 auto; font-weight: 600; font-size: 0.88rem; }

.l451-finding__sev {
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--l451-sev, var(--l451-info));
  border: 1px solid currentColor;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .l451-finding__sev {
    background: color-mix(in srgb, currentColor 9%, transparent);
    border-color: color-mix(in srgb, currentColor 28%, transparent);
  }
}

/* Body — fades/slides in when it appears */
.l451-finding__body {
  padding: 2px 12px 12px 28px;
  border-top: 1px solid var(--l451-border);
  transition: opacity 0.22s var(--l451-ease), transform 0.22s var(--l451-ease);
  transition: opacity 0.22s var(--l451-ease), transform 0.22s var(--l451-ease), display 0.22s allow-discrete;
}
.l451-finding__body[hidden] { opacity: 0; transform: translateY(-3px); }
@starting-style {
  .l451-finding__body { opacity: 0; transform: translateY(-3px); }
}
.l451-finding__detail { margin: 8px 0 10px; color: var(--l451-muted); line-height: 1.55; }

/* ── Key/value rows ── */
.l451-kv {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 3px 10px;
  margin-bottom: 5px;
  font-size: 0.84rem;
  align-items: start;
}

.l451-kv__k {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, inherit);
  padding-top: 2px;
}

.l451-kv__code {
  font-family: var(--l451-mono);
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--l451-border);
  background: var(--l451-code-bg);
  word-break: break-all;
}

.l451-kv__link {
  color: var(--l451-low);
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.l451-kv__link:hover { text-decoration-color: currentColor; }
.l451-kv__v    { color: var(--l451-muted); }

/* ── Actions ── */
.l451-panel__actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.l451-panel__dl { padding: 6px 14px; font-size: 0.8rem; }

@media (max-width: 560px) {
  .l451-kv { grid-template-columns: 1fr; gap: 1px; }
  .l451-finding__body { padding-left: 12px; }
  .l451-finding__sev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .l451-panel,
  .l451-chip,
  .l451-panel__list > .l451-finding { animation: none; }
  .l451-finding__body { transition: none; }
}