/* Process Strip — track variants (nodes, cards, pills)
 * Three horizontal step layouts that share the field_items child paragraphs.
 * Tokens map directly to --site-* design tokens; --dh-accent inherits from
 * any ancestor accent class (.doghouse-node--accent-*, .doghouse-card--accent-*).
 *
 * Status modifiers (.is-done, .is-active) are emitted by
 * site_theme_preprocess_paragraph() based on the field_step_state field.
 */

/* Track variants render their own grid; suppress default vertical step rows. */
.doghouse-process-strip--track .doghouse-process-strip__steps { display: none; }

.doghouse-process-strip__viewport {
  margin-top: var(--site-space-xl);
}

.doghouse-process-strip__track {
  padding: 0 var(--site-container-padding);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}

/* Scroll cues — chevrons that appear at each side of the track when
   horizontal overflow exists in that direction. JS toggles
   .is-overflow-start / .is-overflow-end on the viewport. */
.doghouse-process-strip__scroll-cue {
  position: absolute;
  top: 50%;
  bottom: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  color: var(--dh-accent, var(--site-color-coral));
  background: #14121d80;
  box-shadow: 0 0 9px #14121d80;
  transform: translateY(-50%);
}

.doghouse-process-strip__scroll-cue::after {
  content: '';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.doghouse-process-strip__scroll-cue--prev {
  left: 0;
}

.doghouse-process-strip__scroll-cue--prev::after {
  transform: rotate(-135deg);
  margin-left: 0.25rem;
}

.doghouse-process-strip__scroll-cue--next {
  right: 0;
}

.doghouse-process-strip__scroll-cue--next::after {
  transform: rotate(45deg);
  margin-right: 0.25rem;
}

.doghouse-process-strip__viewport.is-overflow-start .doghouse-process-strip__scroll-cue--prev,
.doghouse-process-strip__viewport.is-overflow-end .doghouse-process-strip__scroll-cue--next {
  opacity: 1;
}

/* Below 1280px, drop the cues underneath the track but keep them at the
   left/right edges of the viewport. */
@media (max-width: 1279px) {
  .doghouse-process-strip__viewport {
    padding-bottom: 3.5rem;
  }

  .doghouse-process-strip__scroll-cue {
    top: auto;
    bottom: 0;
    transform: none;
  }

  .doghouse-process-strip__scroll-cue--prev {
    left: 1rem;
  }

  .doghouse-process-strip__scroll-cue--next {
    right: 1rem;
  }
}

/* Shared tag-pill chip used by all three variants */
.doghouse-tl-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--site-space-sm);
}

.doghouse-tl-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: var(--site-radius-full);
  border: 1px solid var(--site-color-border-bright);
  background: rgba(255, 255, 255, 0.04);
  color: var(--site-color-text-label);
  font-family: var(--site-font-mono);
  font-size: 0.68rem;
  font-weight: var(--site-fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.doghouse-tl-tag-pill--accent {
  border-color: color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 30%, transparent);
  background: color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 12%, transparent);
  color: var(--dh-accent, var(--site-color-coral));
}

/* ══════════════════════════════════════════════════════════
   VARIANT A — NODES + CONNECTOR LINE
   ══════════════════════════════════════════════════════════ */
.doghouse-process-strip__track--nodes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Reserve space for the scrollbar so it doesn't overlap content */
  padding-bottom: var(--site-space-sm);
}

.doghouse-tl-a-step {
  /* Grow to fill the row when there's room, never shrink below 240px —
     past that, the track scrolls horizontally. */
  flex: 1 0 259px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 var(--site-space-base);
  text-align: center;
}

/* Connector line between nodes */
.doghouse-tl-a-step::before {
  content: '';
  position: absolute;
  top: 1.75rem;             /* vertically centred on the 3.5rem node */
  left: calc(50% + 1.75rem);
  right: calc(-50% + 1.75rem);
  height: 2px;
  background: var(--site-color-border-bright);
  z-index: 0;
}
.doghouse-tl-a-step:last-child::before { display: none; }
.doghouse-tl-a-step.is-done::before {
  background: var(--dh-accent, var(--site-color-coral));
}

.doghouse-tl-a-node {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--site-radius-full);
  border: 2px solid var(--site-color-border-bright);
  background: var(--site-color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-font-mono);
  font-size: 0.85rem;
  font-weight: var(--site-fw-bold);
  color: var(--site-color-text-label);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.doghouse-tl-a-step.is-done .doghouse-tl-a-node {
  border-color: var(--dh-accent, var(--site-color-coral));
  background: color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 12%, transparent);
  color: var(--dh-accent, var(--site-color-coral));
}

.doghouse-tl-a-step.is-active .doghouse-tl-a-node {
  border-color: var(--dh-accent, var(--site-color-coral));
  background: var(--dh-accent, var(--site-color-coral));
  color: var(--dh-accent-contrast, var(--site-color-text-white));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 12%, transparent);
}

.doghouse-tl-a-content {
  margin-top: var(--site-space-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.doghouse-tl-a-label {
  font-family: var(--site-font-sans);
  font-weight: var(--site-fw-bold);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--site-color-text-heading);
  margin-bottom: var(--site-space-sm);
}

.doghouse-tl-a-body,
.doghouse-tl-a-body p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--site-color-text-body);
}
.doghouse-tl-a-body { max-width: 18rem; }

.doghouse-tl-a-content .doghouse-tl-tag-pills {
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   VARIANT B — NUMBERED CARDS ON A TRACK
   ══════════════════════════════════════════════════════════ */
.doghouse-process-strip__track--cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--site-space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Reserve space for the scrollbar so it doesn't overlap content */
  padding-bottom: var(--site-space-sm);
}

.doghouse-tl-b-step {
  /* Grow to fill the row when there's room, never shrink below 240px. */
  flex: 1 0 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Connector line between badges. Drawn per-step (not on the track) so it
   covers the full scroll width — `position: absolute` on a scrolling
   container measures `right` against visible width, not scroll width.
   Right offset also accounts for the track's gap so the line bridges it. */
.doghouse-tl-b-step::before {
  content: '';
  position: absolute;
  top: 1.25rem;             /* centre of the 2.5rem badge */
  left: calc(50% + 1.25rem);
  right: calc(1.25rem - 50% - var(--site-space-md));
  height: 2px;
  background: var(--site-color-border-bright);
  z-index: 0;
}
.doghouse-tl-b-step:last-child::before { display: none; }

.doghouse-tl-b-badge {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--site-radius-full);
  background: var(--site-color-bg-surface);
  border: 2px solid var(--site-color-border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-font-mono);
  font-size: 0.78rem;
  font-weight: var(--site-fw-bold);
  color: var(--site-color-text-label);
  margin-bottom: var(--site-space-base);
  flex-shrink: 0;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.doghouse-tl-b-step.is-done .doghouse-tl-b-badge,
.doghouse-tl-b-step.is-active .doghouse-tl-b-badge {
  background: var(--dh-accent, var(--site-color-coral));
  border-color: var(--dh-accent, var(--site-color-coral));
  color: var(--dh-accent-contrast, var(--site-color-text-white));
}

.doghouse-tl-b-step.is-active .doghouse-tl-b-badge {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 12%, transparent);
}

.doghouse-tl-b-card {
  width: 100%;
  flex: 1;
  background: var(--site-color-bg-surface);
  border: 1px solid var(--site-color-border);
  border-top: 3px solid var(--site-color-border-bright);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-lg) var(--site-space-md);
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Done cards keep the default look — only the badge changes.
   Active cards get the full accent treatment: top stripe, accent border, surface lift. */
.doghouse-tl-b-step.is-active .doghouse-tl-b-card {
  border-top-color: var(--dh-accent, var(--site-color-coral));
  border-color: color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 30%, transparent);
  background: var(--site-color-bg-surface-mid);
}

.doghouse-tl-b-title {
  font-family: var(--site-font-sans);
  font-weight: var(--site-fw-bold);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--site-color-text-heading);
  margin-bottom: 0.6rem;
}

.doghouse-tl-b-body,
.doghouse-tl-b-body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--site-color-text-body);
}

/* ══════════════════════════════════════════════════════════
   VARIANT C — PILL TRACK
   ══════════════════════════════════════════════════════════ */
.doghouse-process-strip__track--pills {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Reserve space for the scrollbar so it doesn't overlap content */
  padding-bottom: var(--site-space-sm);
}

.doghouse-tl-c-step {
  /* Grow to fill the row when there's room, never shrink below 240px. */
  flex: 1 0 259px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

.doghouse-tl-c-pill {
  flex: 1;
  background: var(--site-color-bg-surface);
  border: 1px solid var(--site-color-border-bright);
  border-radius: 0;
  padding: var(--site-space-base) var(--site-space-base);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background-color 0.2s, border-color 0.2s;
}

/* First / last corner rounding — pills are always horizontal so only round
   the outer edges of the chain. Adjoining pills share their inner borders. */
.doghouse-tl-c-step:first-child .doghouse-tl-c-pill {
  border-radius: var(--site-radius-lg) 0 0 var(--site-radius-lg);
}
.doghouse-tl-c-step:last-child .doghouse-tl-c-pill {
  border-radius: 0 var(--site-radius-lg) var(--site-radius-lg) 0;
}
.doghouse-tl-c-step + .doghouse-tl-c-step .doghouse-tl-c-pill {
  border-left: none;
}

.doghouse-tl-c-step.is-done .doghouse-tl-c-pill {
  background: color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 12%, transparent);
  border-color: color-mix(in srgb, var(--dh-accent, var(--site-color-coral)) 30%, transparent);
}

.doghouse-tl-c-step.is-active .doghouse-tl-c-pill {
  background: var(--dh-accent, var(--site-color-coral));
  border-color: var(--dh-accent, var(--site-color-coral));
}

.doghouse-tl-c-num {
  font-family: var(--site-font-mono);
  font-size: 0.65rem;
  font-weight: var(--site-fw-bold);
  letter-spacing: 0.18em;
  color: var(--site-color-text-label);
}

.doghouse-tl-c-step.is-done .doghouse-tl-c-num {
  color: var(--dh-accent, var(--site-color-coral));
}

.doghouse-tl-c-step.is-active .doghouse-tl-c-num {
  color: color-mix(in srgb, var(--dh-accent-contrast, var(--site-color-text-white)) 75%, transparent);
}

.doghouse-tl-c-label {
  font-family: var(--site-font-sans);
  font-weight: var(--site-fw-bold);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--site-color-text-heading);
}

.doghouse-tl-c-step.is-active .doghouse-tl-c-label {
  color: var(--dh-accent-contrast, var(--site-color-text-white));
}

/* Note: descendant `p` selectors are duplicated in each body-colour rule
   because the global `p { color: ... }` in base.css would otherwise win
   inside the body field's rendered HTML. */
.doghouse-tl-c-body,
.doghouse-tl-c-body p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--site-color-text-body);
}
.doghouse-tl-c-body { margin-top: 0.25rem; }

.doghouse-tl-c-step.is-done .doghouse-tl-c-body,
.doghouse-tl-c-step.is-done .doghouse-tl-c-body p {
  color: var(--site-color-text-lead);
}

.doghouse-tl-c-step.is-active .doghouse-tl-c-body,
.doghouse-tl-c-step.is-active .doghouse-tl-c-body p {
  color: var(--dh-accent-contrast, var(--site-color-text-white));
}

/* On an active pill, force tag pills to a high-contrast inverse derived
   from the accent's contrast colour — works on both light- and dark-text
   accent fills. */
.doghouse-tl-c-step.is-active .doghouse-tl-tag-pill {
  border-color: color-mix(in srgb, var(--dh-accent-contrast, var(--site-color-text-white)) 35%, transparent);
  background: color-mix(in srgb, var(--dh-accent-contrast, var(--site-color-text-white)) 14%, transparent);
  color: var(--dh-accent-contrast, var(--site-color-text-white));
}