/* StudentPilot — interactive learning visuals (traffic pattern page only).
 * Everything is prefixed tp- and builds on the design tokens declared in
 * application.css (--brand, --accent, --ink, …). */

.tp-intro { max-width: 46rem; color: var(--ink-soft); margin-bottom: 1.75rem; }

.tp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 960px) {
  .tp-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The diagram stage ---------- */

.tp-stage {
  background: linear-gradient(175deg, #eef5fb, var(--paper-deep));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 1.25rem;
}
.tp-svg { display: block; width: 100%; height: auto; max-width: 100%; }

.tp-runway { fill: #46535f; }
.tp-runway-number {
  fill: #f6f9fc;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
}

.tp-leg {
  fill: none;
  stroke: color-mix(in srgb, var(--brand) 30%, #ffffff);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke .25s, stroke-width .25s;
}
.tp-leg--dashed { stroke-dasharray: 10 9; }
.tp-leg.is-active { stroke: var(--brand); stroke-width: 6; }

/* The rollout portion of the upwind leg lies on the runway itself, so it is
 * drawn as the runway's dashed centerline — and brightens when active. */
.tp-leg--onrunway { stroke: rgba(246, 249, 252, .75); stroke-width: 2.5; stroke-dasharray: 14 12; }
.tp-leg--onrunway.is-active {
  stroke: color-mix(in srgb, var(--brand) 45%, #ffffff);
  stroke-width: 5;
  stroke-dasharray: none;
}

.tp-label {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
  fill: var(--ink-soft);
  transition: fill .25s;
}
.tp-label.is-active { fill: var(--brand); }
.tp-note { font-size: 12.5px; fill: var(--ink-faint); }

.tp-wind__shaft { stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
.tp-wind__head { fill: var(--ink-soft); }
.tp-wind__label {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  fill: var(--ink-soft);
}

.tp-turn-hint { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 5 5; }
.tp-turn-hint-head { fill: var(--ink-faint); }

.tp-plane { fill: var(--accent); stroke: #ffffff; stroke-width: 1; }

/* ---------- Controls ---------- */

.tp-controls {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: .9rem;
}
.tp-play { min-width: 5.25rem; }
.tp-speed { display: inline-flex; gap: .35rem; }
.tp-speed .btn { background: #fff; }
.tp-speed .btn.is-active {
  background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand);
}
.tp-follow { background: #fff; }
.tp-follow[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}

/* ---------- Side panel: the legs ---------- */

.tp-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1.4rem;
}
.tp-panel__title { font-size: 1.05rem; margin-bottom: .75rem; }

.tp-legs { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.tp-legs__item {
  padding: .55rem .75rem .55rem .85rem;
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background .25s, border-color .25s;
}
.tp-legs__item + .tp-legs__item { margin-top: .35rem; }
.tp-legs__item h3 { font-size: .95rem; margin-bottom: .15rem; }
.tp-legs__item p { margin: 0; font-size: .87rem; color: var(--ink-soft); }
.tp-legs__item.is-active {
  background: var(--brand-soft);
  border-left-color: var(--accent);
}
.tp-legs__item.is-active h3 { color: var(--brand-deep); }

/* ---------- Legend ---------- */

.tp-legend { border-top: 1px solid var(--line); padding-top: 1rem; }
.tp-legend__title { font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.tp-legend__list { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .87rem; color: var(--ink-soft); }
.tp-legend__list li { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.tp-legend__note { margin: 0; font-size: .84rem; color: var(--ink-faint); }

.tp-key { display: inline-block; width: 1.6rem; height: 0; border-top: 4px solid; border-radius: 2px; flex-shrink: 0; }
.tp-key--active { border-color: var(--brand); }
.tp-key--dashed { border-top-style: dashed; border-top-width: 3px; border-color: color-mix(in srgb, var(--brand) 45%, #ffffff); }
.tp-key--plane {
  width: .8rem; height: .8rem; border: 0; border-radius: 50%;
  background: var(--accent);
}