/* ==========================================================================
   SOC Training Lab — Components
   --------------------------------------------------------------------------
   Requires design-system/tokens.css.

   Rules this file obeys, and that tools/check_design.py enforces:
     - no raw hex / rgb() values (tokens only)
     - no px except hairline borders and shadows (space scale only)
     - logical properties everywhere (inline-start, not left) so RTL is free
     - every interactive element has a visible :focus-visible ring
     - nothing depends on colour alone to convey state
   ========================================================================== */

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
}

:where(a) {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

:where(p) {
  margin: 0;
  text-wrap: pretty;
}

:where(ul, ol) {
  margin: 0;
  padding-inline-start: var(--space-5);
}

:where(img, svg) {
  max-width: 100%;
}

/* One focus treatment for the whole product. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Screen-reader-only text that still gets focus when tabbed to. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-on);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ----------------------------------------------------------------- layout */

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-block: var(--space-5) var(--space-8);
}

/* Vertical rhythm owned by the container, not by every child's margin-top.
   This is what kills the 225 `style="margin-top:0.5rem"` attributes. */
.stack > * + * {
  margin-block-start: var(--space-4);
}

.stack-lg > * + * {
  margin-block-start: var(--space-6);
}

.prose {
  max-width: var(--measure);
  color: var(--muted);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ------------------------------------------------------------- back link */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding-block: var(--space-1);
  transition: color var(--dur-fast) var(--ease);
}

.back-link:hover {
  color: var(--text);
}

.back-link svg {
  flex: none;
}

/* The chevron points "back", which is the other way round in RTL. */
[dir="rtl"] .back-link svg {
  transform: scaleX(-1);
}

/* ------------------------------------------------------------ room header */

.room-header {
  display: grid;
  gap: var(--space-3);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-thin);
}

.room-title {
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
}

.room-lede {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

/* Room metadata as a description list, so "3 tasks" and "Splunk · Foundations"
   are machine-readable facts rather than two anonymous grey pills. */
.room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--fs-sm);
}

.room-meta div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.room-meta dt {
  color: var(--dim);
  font-weight: var(--fw-medium);
}

.room-meta dd {
  margin: 0;
  color: var(--muted);
  font-weight: var(--fw-semibold);
}

/* ------------------------------------------------------------------ badge */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--card-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

.badge--accent {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-on);
}

.badge--quiet {
  background: transparent;
}

/* The path pill: same component, accent comes from [data-path] on an ancestor. */
.path-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-on);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.path-pill::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.65;
}

/* ---------------------------------------------------------------- callout */
/* Replaces `.objectives`, `.room-goal`, and the two inline border-color hacks.
   Variants carry an icon as well as a colour, so the meaning survives for
   colour-blind readers and in print. */

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: var(--border-thin);
  border-inline-start: var(--space-1) solid
    var(--callout-accent, var(--border-strong));
  border-start-start-radius: var(--radius-sm);
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  border-end-start-radius: var(--radius-sm);
  background: var(--card);
}

.callout__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--callout-soft, var(--card-2));
  color: var(--callout-accent, var(--muted));
}

.callout__icon svg {
  inline-size: var(--space-4);
  block-size: var(--space-4);
}

.callout__title {
  align-self: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.callout__body {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.callout__body[data-preserve-lines] {
  white-space: pre-line;
}

.callout--goal {
  --callout-accent: var(--accent);
  --callout-soft: var(--accent-soft);
}
.callout--prereq {
  --callout-accent: var(--muted);
  --callout-soft: var(--card-2);
}
.callout--lesson {
  --callout-accent: var(--accent-network);
  --callout-soft: var(--accent-network-soft);
}
.callout--data {
  --callout-accent: var(--green);
  --callout-soft: var(--green-soft);
}
.callout--warn {
  --callout-accent: var(--amber);
  --callout-soft: var(--amber-soft);
}
.callout--vm {
  --callout-accent: var(--accent-splunk);
  --callout-soft: var(--accent-splunk-soft);
}

/* ------------------------------------------------------------ section head */

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
  padding-block-end: var(--space-2);
  border-block-end: var(--border-thin);
}

.section-head h2 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

.section-head__count {
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- CTA */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--card-2);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-on);
}

.btn--primary:hover {
  background: var(--accent-deep);
  color: var(--accent-on);
  border-color: transparent;
}

/* `--primary` on a deep fill needs light text; the token pair handles it. */
.btn--ghost {
  background: transparent;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Arrow is decorative and direction-aware — it is NOT baked into the
   translated label, which is why it used to vanish on language switch. */
.btn__arrow {
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(2px);
}

[dir="rtl"] .btn__arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn__arrow {
  transform: scaleX(-1) translateX(2px);
}

/* --------------------------------------------------------------- lab CTA */

.lab-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--card);
}

.lab-cta__copy {
  flex: 1 1 18rem;
  min-inline-size: 0;
}

.lab-cta__title {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.lab-cta__hint {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------- code block */

.code {
  position: relative;
  margin: 0;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}

.code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-block-end: var(--border-thin);
  background: var(--card-2);
}

.code__lang {
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.code__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.code__copy:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.code__copy[data-copied="true"] {
  color: var(--green);
  border-color: var(--green);
}

.code pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  direction: ltr;
  text-align: start;
}

.code code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
  tab-size: 2;
}

/* Inline code inside prose. */
:not(.code) > code {
  padding: 0.1em 0.4em;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* -------------------------------------------------------------- task card */

.task {
  --task-accent: var(--accent);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background: var(--card);
  scroll-margin-block-start: var(--space-6);
}

.task--detect {
  --task-accent: var(--accent-detection);
}

.task__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

/* Numbered so students can say "I'm stuck on task 2" instead of quoting a title. */
.task__number {
  display: grid;
  place-items: center;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--card-2);
  color: var(--task-accent);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.task__title {
  font-size: var(--fs-lg);
}

.task__explain {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* MITRE / data-source facts as a real definition list. */
.task__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--fs-sm);
}

.task__facts dt {
  color: var(--dim);
  font-weight: var(--fw-semibold);
}

.task__facts dd {
  margin: 0;
  color: var(--muted);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- flag form */

.answer {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--card-2);
}

.answer__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.answer__question {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.answer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.answer__input {
  flex: 1 1 14rem;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-med);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  direction: ltr;
  text-align: start;
}

.answer__input::placeholder {
  color: var(--dim);
  font-family: var(--sans);
}

.answer__input:hover {
  border-color: var(--accent);
}

/* Result region. Icon + text, never colour alone. Announced via aria-live. */
.answer__result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.answer__result:empty {
  display: none;
}

.answer__result[data-state="correct"] {
  color: var(--green);
}

.answer__result[data-state="incorrect"] {
  color: var(--red);
}

.answer__result[data-state="pending"] {
  color: var(--muted);
}

.answer__result::before {
  font-family: var(--mono);
}

.answer__result[data-state="correct"]::before {
  content: "✓";
}

.answer__result[data-state="incorrect"]::before {
  content: "✕";
}

.answer__result[data-state="pending"]::before {
  content: "…";
}

/* Solved state for the whole task. */
.task[data-solved="true"] {
  --task-accent: var(--green);
  border-color: var(--green);
}

.task[data-solved="true"] .task__number::after {
  content: "✓";
}

.task[data-solved="true"] .task__number {
  color: var(--green-on);
  background: var(--green);
}

.task[data-solved="true"] .task__number span {
  display: none;
}

/* ----------------------------------------------------------- progress bar */

.room-progress {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--card);
}

.room-progress__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.room-progress__count {
  color: var(--text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.room-progress__track {
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--card-2);
  overflow: hidden;
}

.room-progress__fill {
  block-size: 100%;
  inline-size: 0%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: inline-size var(--dur-slow) var(--ease);
}

/* -------------------------------------------------------------- path hero */

.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
}

.path-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  min-block-size: 12rem;
  padding: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--accent-on);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-med) var(--ease),
    box-shadow var(--dur-med) var(--ease);
}

.path-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at 12% 12%,
    rgb(255 255 255 / 0.18),
    transparent 55%
  );
}

.path-hero:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.path-hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.85;
}

.path-hero__title {
  font-size: var(--fs-2xl);
}

.path-hero__desc {
  max-width: 34ch;
  font-size: var(--fs-sm);
  opacity: 0.92;
}

.path-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.path-hero__meta span {
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.16);
}

/* ----------------------------------------------------------- feature card */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
}

.feature-card {
  display: flex;
  flex-direction: column;
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease),
    border-color var(--dur-med) var(--ease),
    box-shadow var(--dur-med) var(--ease);
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.feature-card__cover {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  object-fit: cover;
  background: var(--card-2);
}

.feature-card__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.feature-card__title {
  font-size: var(--fs-md);
}

.feature-card__desc {
  color: var(--muted);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------ page footer */

.room-footer {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-thin);
  color: var(--dim);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------- printing */

@media print {
  :root {
    color-scheme: light;
  }
  .skip-link,
  .back-link,
  .code__copy,
  .lab-cta,
  .btn {
    display: none !important;
  }
  .task,
  .callout,
  .code {
    break-inside: avoid;
    border: 1px solid #999;
  }
}