/**
 * STORMSCAPE — analysis panel: notes, tabs, metrics, anatomy, hazards, drivers.
 */

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.panel-head__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* A quiet "this is live" indicator. It breathes rather than blinks — a
   blinking dot in peripheral vision is a distraction, not information. */
.panel-head__live {
  display: grid;
  place-items: center;
  width: 8px;
  height: 8px;
}

.panel-head__pulse {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-muted);
  animation: live-pulse 2.8s var(--ease-in-out) infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-head__pulse { animation: none; }
}

/* --------------------------------------------------------------------------
   Scenario notes
   -------------------------------------------------------------------------- */

.panel-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  border-left-width: 2px;
  background: var(--bg-inset);
  animation: note-in var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

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

.note[data-tone='info'] { border-left-color: var(--info); }
.note[data-tone='warn'] { border-left-color: var(--warn); }
.note[data-tone='danger'] { border-left-color: var(--danger); }

.note__icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.note__icon svg {
  width: 15px;
  height: 15px;
}

.note[data-tone='info'] .note__icon { color: var(--info-text); }
.note[data-tone='warn'] .note__icon { color: var(--warn-text); }
.note[data-tone='danger'] .note__icon { color: var(--danger-text); }

.note__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.note__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.note__text {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-1);
  flex: 0 0 auto;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
}

.tab {
  flex: 1;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.tab:hover {
  color: var(--text-primary);
}

.tab[data-active='true'] {
  background: var(--bg-control-active);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-highlight);
}

.panel-body {
  flex: 1;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Metrics
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-inset);
  transition: border-color var(--duration-normal) var(--ease-out);
}

.metric[data-severity='4'],
.metric[data-severity='5'] {
  border-color: color-mix(in srgb, var(--metric-color) 34%, transparent);
}

.metric__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.metric__label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  line-height: 1.3;
}

.metric__delta {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 1px 4px;
  border-radius: var(--radius-xs);
}

.metric__delta[data-direction='up'] {
  color: var(--warn-text);
  background: var(--warn-muted);
}

.metric__delta[data-direction='down'] {
  color: var(--info-text);
  background: var(--info-muted);
}

.metric__figure {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--metric-color, var(--text-primary));
  letter-spacing: var(--tracking-tight);
}

.metric__unit {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

.metric__bar {
  display: block;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--bg-void);
  overflow: hidden;
}

.metric__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--metric-color, var(--accent));
  transition: width var(--duration-slow) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Education blocks
   -------------------------------------------------------------------------- */

.panel-education {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.panel-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panel-block--quiet {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
}

.panel-block__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.panel-block__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---- Anatomy ------------------------------------------------------------- */

.anatomy {
  display: flex;
  flex-direction: column;
}

.anatomy__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  animation: note-in var(--duration-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.anatomy__item:last-child {
  padding-bottom: 0;
}

.anatomy__marker {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: 4px;
  padding-top: 5px;
}

.anatomy__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--accent);
  background: var(--bg-panel-solid);
}

/* The connector line makes the list read as a diagram legend rather than
   bullet points — it implies the parts are stacked in space, which they are. */
.anatomy__line {
  width: 1px;
  background: linear-gradient(180deg, var(--border-strong), transparent);
}

.anatomy__item:last-child .anatomy__line {
  display: none;
}

.anatomy__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 2px;
}

.anatomy__detail {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ---- Hazards ------------------------------------------------------------- */

.hazards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hazard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
}

.hazard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hazard__subject {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.hazard__meter {
  display: flex;
  gap: 3px;
}

.hazard__pip {
  width: 12px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--bg-void);
  transition: background var(--duration-normal) var(--ease-out);
}

.hazard__pip[data-on='true'] {
  background: var(--hazard-color, var(--accent));
}

.hazard__effect {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ---- Drivers ------------------------------------------------------------- */

.drivers {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.driver {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.driver__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.driver__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.driver__value {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  text-align: right;
}

.driver__gauge {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--bg-void);
  overflow: hidden;
}

.driver__gauge-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--info) 70%, transparent),
    var(--accent)
  );
  transition: width var(--duration-slow) var(--ease-out);
}

.driver__detail {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.about-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.about-list li {
  padding-left: var(--space-4);
  position: relative;
}

.about-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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