/* ==========================================================================
   SeriesChief — Stewarding page (stew-)
   Accent: amber / yellow flag. Uses tokens and components from site.css.
   ========================================================================== */

.stew-page { --stew: var(--amber); --stew-ink: #1c1400; --stew-soft: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.stew-amber, .display .stew-amber { color: var(--stew); }
.stew-eyebrow { color: var(--stew); }
.stew-eyebrow .eyebrow__num { color: var(--fg); }

/* Amber variant of the primary button for this page */
.btn.stew-btn-amber { --btn-bg: var(--stew); --btn-fg: var(--stew-ink); --btn-bd: transparent; }
.btn.stew-btn-amber:hover { --btn-bg: #ffd36e; color: var(--stew-ink); }

/* --------------------------------------------------------------------------
   Hero — copy + real Race Control screen
   -------------------------------------------------------------------------- */
.stew-hero { isolation: isolate; }
.stew-hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.stew-hero__title { max-width: 12ch; }
.stew-hero__copy .lede { max-width: 42ch; }
.stew-hero__actions { --gap: 0.9rem 1.2rem; padding-top: 0.4rem; }
.stew-hero__shot .shot__frame {
  border-color: color-mix(in srgb, var(--stew) 30%, var(--line));
  box-shadow: 0 0 0 1px rgb(255 194 61 / 0.1), 0 40px 90px -36px rgb(255 194 61 / 0.3), var(--shadow);
}

/* --------------------------------------------------------------------------
   01 Pipeline — the signature track (scroll-linked by stewarding.js)
   -------------------------------------------------------------------------- */
.stew-flow { overflow: hidden; }
.stew-flow .section-head { margin-bottom: var(--space-4); }
.stew-pipe { --p: 1; position: relative; }
.stew-pipe__track {
  position: absolute; left: 0; right: 0; top: 9px; height: 14px; overflow: hidden;
  background: var(--surface-2); border-block: 1px solid var(--line);
}
.stew-pipe__track::before {
  content: ""; position: absolute; inset: 6px 0 auto; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 18px, transparent 18px 36px);
}
.stew-pipe__rail {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(255 194 61 / 0.25), var(--stew));
  transform: translateX(calc((var(--p) - 1) * 100%));
  will-change: transform;
}
.stew-pipe__car {
  position: absolute; right: 0; top: -1px; bottom: -1px; width: 34px;
  background: conic-gradient(var(--fg) 25%, var(--stew-ink) 0 50%, var(--fg) 0 75%, var(--stew-ink) 0) 0 0 / 8px 8px;
  transform: skewX(var(--lean)); transform-origin: bottom right;
}
.stew-pipe__steps {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.stew-step { position: relative; display: grid; align-content: start; justify-items: start; gap: 0.6rem; padding-top: 3.2rem; }
.stew-step__node {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px;
  background: var(--green); border: 2px solid var(--green);
  transform: skewX(var(--lean));
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stew-step__title { font-size: var(--step-1); display: flex; align-items: baseline; gap: 0.55rem; }
.stew-step__code { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.1em; color: var(--muted); font-style: normal; }
.stew-step__text { color: var(--muted); font-size: var(--step--1); line-height: 1.5; max-width: 30ch; }
.stew-step .tag { transition: opacity var(--dur) var(--ease); }

/* the human step: the decision */
.stew-step--human {
  margin-top: -1.1rem; padding: 4.3rem 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--stew) 45%, var(--line));
  background: linear-gradient(180deg, var(--stew-soft), var(--surface) 70%); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgb(255 194 61 / 0.18), 0 30px 70px -30px rgb(255 194 61 / 0.45);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur) var(--ease);
}
.stew-step--human .stew-step__node { left: 1rem; top: 1.1rem; background: var(--stew); border-color: var(--stew); }
.stew-step--human .stew-step__title { font-size: var(--step-2); font-family: var(--font-display); font-style: italic; font-weight: 860; font-stretch: 70%; text-transform: uppercase; color: var(--stew); }
.stew-step--human .stew-step__code { color: var(--stew); }
.stew-step--human .stew-step__text { color: var(--fg-2); }

/* armed by JS: stages start dim and light as the car passes */
.stew-pipe.is-armed .stew-step:not(.is-lit) .stew-step__node { background: var(--bg); border-color: var(--line-2); transform: skewX(var(--lean)) scale(0.82); }
.stew-pipe.is-armed .stew-step:not(.is-lit) .tag { opacity: 0.35; }
.stew-pipe.is-armed .stew-step--human:not(.is-lit) { box-shadow: none; border-color: var(--line); }

@media (max-width: 960px) {
  .stew-pipe__track { left: 15px; right: auto; top: 0; bottom: 0; width: 14px; height: auto; border-block: 0; border-inline: 1px solid var(--line); }
  .stew-pipe__track::before { inset: 0 auto 0 5px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 18px, transparent 18px 36px); }
  .stew-pipe__rail { background: linear-gradient(180deg, rgb(255 194 61 / 0.25), var(--stew)); transform: translateY(calc((var(--p) - 1) * 100%)); }
  .stew-pipe__car { left: -1px; right: -1px; top: auto; bottom: 0; width: auto; height: 30px; transform: none; }
  .stew-pipe__steps { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .stew-step { padding: 0 0 0 3.6rem; }
  .stew-step__node { top: 0; left: 6px; }
  .stew-step--human { margin: 0 0 0 2.7rem; padding: 1rem 1rem 1.1rem; }
  .stew-step--human .stew-step__node { left: -2.7rem; top: 1rem; margin-left: 6px; }
  .stew-step__text { max-width: 46ch; }
}

/* --------------------------------------------------------------------------
   02 Race control & the record — points + real screens
   -------------------------------------------------------------------------- */
.stew-rc__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.stew-rc__lead { display: grid; gap: 1.4rem; }
.stew-points { margin: 0.4rem 0 0; border-top: 1px solid var(--line); }
.stew-point { display: grid; gap: 0.2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.stew-point dt {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-stretch: 74%; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1.1; color: var(--fg);
}
.stew-point dd { margin: 0; color: var(--muted); font-size: var(--step--1); }
.stew-alpha {
  font-family: var(--font-mono); font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 0.12rem 0.45rem; color: var(--stew); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stew) 55%, var(--line));
}
.stew-tour .tour__tab[aria-selected="true"] { color: var(--stew-ink); background: var(--stew); }
.stew-tour .shot__img { background: var(--bg); }
/* New-incident capture (900x850): frame the driver picker and the car grid, below the cut-off app header */
.stew-tour .shot__img[src*="app-race-control-incident"] { object-position: center 63%; }

.stew-frame--bare { background: #000; }
.stew-tour .tour__panel .shot__frame { max-height: none; }

/* Pace analysis block (part of the add-on): real screen + three tagged rows */
.stew-pace {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.stew-pace__copy { display: grid; gap: 1.2rem; }
.stew-pace__title {
  font-family: var(--font-display); font-style: italic; font-weight: 820; font-stretch: 72%; text-transform: uppercase;
  font-size: var(--step-3); line-height: 0.95; color: var(--fg);
}
.stew-pace__rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stew-pace__rows li {
  display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: baseline; gap: 0.8rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: var(--step--1); line-height: 1.5;
}
.stew-pace__rows .tag { justify-self: start; }

@media (max-width: 960px) {
  .stew-rc__grid { grid-template-columns: minmax(0, 1fr); }
  .stew-pace { grid-template-columns: minmax(0, 1fr); }
  .stew-pace__copy { order: -1; }
}

/* --------------------------------------------------------------------------
   03 Trust — one compact row
   -------------------------------------------------------------------------- */
.stew-trust__head { display: grid; gap: 0.9rem; margin-bottom: var(--space-4); }
.stew-trust__head .h2 { font-size: var(--step-3); max-width: 24ch; }
.stew-trust__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
.stew-trust__row li { display: grid; align-content: start; gap: 0.35rem; padding: 1.2rem 1.4rem 0.4rem 0; }
.stew-trust__row li + li { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.stew-trust__row strong {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stew);
}
.stew-trust__row span { color: var(--fg-2); font-size: var(--step--1); line-height: 1.5; }
@media (max-width: 960px) {
  .stew-trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stew-trust__row li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .stew-trust__row { grid-template-columns: minmax(0, 1fr); }
  .stew-trust__row li, .stew-trust__row li + li { padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Responsive hero
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .stew-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .stew-hero__title { max-width: 11ch; }
}
@media (max-width: 520px) {
  .stew-hero__actions .btn { width: 100%; }
}