/**
 * PROJECT OUTLIER — OPERATION ATHENA
 * Predictive intelligence card styling (Milestone VII)
 *
 * Visually complements Oracle (oracle.css) using the same Operation Glass
 * tokens. ATHENA cards read as "outlook" — a cooler, dashed-accent treatment so
 * predictions are distinguishable from Oracle's solid-accent recommendations.
 */

.ath-stack { display: flex; flex-direction: column; gap: var(--im-gap-2); }

.ath-card {
  position: relative;
  border-radius: var(--im-radius-md);
  border: 1px dashed var(--im-hairline-strong);
  border-left: 3px solid var(--_ac, var(--im-accent));
  background: color-mix(in srgb, var(--im-abyss) 40%, transparent);
  padding: var(--im-gap-2) var(--im-gap-3);
  animation: ath-in var(--im-motion-slow) var(--im-ease) both;
}
@keyframes ath-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ath-p1 { --_ac: var(--im-sev-severe); }
.ath-p2 { --_ac: var(--im-sev-high); }
.ath-p3 { --_ac: var(--im-sev-guarded); }

.ath-head { display: flex; align-items: center; gap: var(--im-gap-1); margin-bottom: 0.35rem; }
.ath-tag {
  font-size: var(--im-text-micro); font-weight: 800; letter-spacing: var(--im-track-wide);
  color: var(--im-accent); padding: 0.12em 0.5em; border-radius: var(--im-radius-pill);
  border: 1px solid color-mix(in srgb, var(--im-accent) 45%, transparent);
}
.ath-phase {
  font-size: var(--im-text-micro); font-weight: 700; letter-spacing: var(--im-track-wide);
  text-transform: uppercase; padding: 0.12em 0.5em; border-radius: var(--im-radius-pill);
}
.ath-phase--accelerating { color: var(--im-sev-severe); background: color-mix(in srgb, var(--im-sev-severe) 16%, transparent); }
.ath-phase--increasing { color: var(--im-sev-high); background: color-mix(in srgb, var(--im-sev-high) 16%, transparent); }
.ath-phase--stabilizing { color: var(--phx-text-muted); }
.ath-phase--improving { color: var(--phx-success); background: color-mix(in srgb, var(--phx-success) 16%, transparent); }
.ath-phase--baseline, .ath-phase--steady { color: var(--phx-text-muted); }
.ath-conf { margin-left: auto; font-size: var(--im-text-micro); font-weight: 700; padding: 0.12em 0.55em; border-radius: var(--im-radius-pill); }
.ath-conf--high { color: var(--phx-success); background: color-mix(in srgb, var(--phx-success) 16%, transparent); }
.ath-conf--med { color: var(--phx-warning); background: color-mix(in srgb, var(--phx-warning) 16%, transparent); }
.ath-conf--low { color: var(--phx-text-muted); background: color-mix(in srgb, var(--phx-text-muted) 16%, transparent); }
.ath-evo { font-weight: 800; }

.ath-pred { margin: 0 0 0.35rem; font-family: var(--im-font-display); font-size: var(--im-text-md); font-weight: 800; line-height: 1.25; }
.ath-eta { margin: 0 0 0.5rem; font-size: var(--im-text-xs); color: var(--phx-text-secondary); }
.ath-eta span { color: var(--phx-text-muted); text-transform: uppercase; letter-spacing: var(--im-track-wide); font-size: 10px; font-weight: 700; margin-right: 0.4em; }

/* Situation evolution grid */
.ath-sit { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--im-gap-1); margin-bottom: 0.4rem; }
.ath-sit-cell { border: 1px solid var(--im-hairline); border-radius: var(--im-radius-sm, 10px); padding: 0.35rem 0.5rem; background: color-mix(in srgb, var(--im-void) 30%, transparent); }
.ath-sit-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: var(--im-track-wide); color: var(--phx-text-muted); font-weight: 700; }
.ath-sit-val { font-size: var(--im-text-xs); color: var(--phx-text-secondary); }

.ath-explain { margin-top: 0.4rem; }
.ath-explain > summary { cursor: pointer; font-size: var(--im-text-xs); color: var(--im-accent); list-style: none; display: inline-flex; align-items: center; gap: 0.3em; }
.ath-explain > summary::before { content: "\25B8"; transition: transform var(--im-motion-fast) var(--im-ease); }
.ath-explain[open] > summary::before { transform: rotate(90deg); }
.ath-x-block { margin-top: 0.5rem; }
.ath-x-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: var(--im-track-wide); color: var(--phx-text-muted); font-weight: 700; margin-bottom: 0.15rem; }
.ath-x-block p { margin: 0; font-size: var(--im-text-xs); color: var(--phx-text-secondary); }
.ath-x-block ul { margin: 0; padding-left: 1.1em; }
.ath-x-block li { font-size: var(--im-text-xs); color: var(--phx-text-secondary); }
.ath-ts { color: var(--phx-text-muted); }

/* Preparation checklist */
.ath-checklist { list-style: none; padding-left: 0; }
.ath-checklist li { display: flex; gap: 0.4em; align-items: baseline; margin-bottom: 0.15rem; }
.ath-check { color: var(--im-accent); flex: none; }
.ath-cite { color: var(--phx-text-muted); font-style: italic; }

/* Cascade chain */
.ath-cascade { display: flex; flex-direction: column; gap: 0.1rem; }
.ath-cascade-step { font-size: var(--im-text-xs); color: var(--phx-text-secondary); }
.ath-cascade-arrow { color: var(--im-sev-high); font-size: var(--im-text-xs); }

.ath-empty { margin: 0; font-size: var(--im-text-xs); color: var(--phx-text-muted); font-style: italic; }
.ath-empty--wait { color: var(--phx-text-secondary); }
.ath-note { margin: 0.3rem 0 0; font-size: var(--im-text-micro); color: var(--phx-text-muted); }

/* Unified timeline */
.ath-timeline { margin-top: var(--im-gap-2); border-top: 1px solid var(--im-hairline); padding-top: var(--im-gap-2); }
.ath-timeline > summary { cursor: pointer; font-size: var(--im-text-xs); color: var(--phx-text-secondary); }
.ath-tl-list { margin-top: var(--im-gap-1); display: flex; flex-direction: column; gap: 0.2rem; }
.ath-tl-row { display: flex; align-items: center; gap: 0.5em; font-size: var(--im-text-micro); }
.ath-tl-dot { width: 0.5em; height: 0.5em; border-radius: 50%; flex: none; background: var(--phx-text-muted); }
.ath-tl-row[data-kind="prediction"] .ath-tl-dot { background: var(--im-accent); }
.ath-tl-row[data-status="acknowledged"] .ath-tl-dot { background: var(--phx-success); }
.ath-tl-row[data-status="expired"] .ath-tl-dot { background: var(--im-sev-guarded); }
.ath-tl-row[data-status="superseded"] .ath-tl-dot { background: var(--im-sev-elevated); }
.ath-tl-label { text-transform: uppercase; letter-spacing: var(--im-track-wide); color: var(--phx-text-muted); flex: none; min-width: 7.5em; }
.ath-tl-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--phx-text-secondary); }
.ath-tl-time { color: var(--phx-text-muted); flex: none; }

/* High contrast */
:root[data-immersive-contrast="high"] .ath-card { background: var(--im-abyss); border-style: solid; }
:root[data-immersive-contrast="high"] .ath-conf--high,
:root[data-immersive-contrast="high"] .ath-conf--med,
:root[data-immersive-contrast="high"] .ath-conf--low,
:root[data-immersive-contrast="high"] .ath-phase { background: transparent; border: 1px solid currentColor; }

/* Reduced motion */
:root[data-immersive-motion="reduced"] .ath-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .ath-card { animation: none; } }

@media (max-width: 560px) { .ath-sit { grid-template-columns: 1fr; } }