/* 2026-11-11 fix1-buy: the journey as ONE line (owner 11-09, 11-11: "a bunch of boxes on the screen in a line").
   Opt-in: only a .g6-journey with data-journey-line (/buy/, /sell/). Everywhere else this file only hides the step
   figures, so the home and article renderings of the same list do not change.
   No JS, phone and tablet: one vertical line, every stop listed, numbered dots, filled dot = your step.
   JS + 960px and up (.g6-journey--line, js/gen6-punch-journey-line.js): one horizontal line of numbered stops, the
   current stop enlarged, its words and its real image on a fixed-height stage under the line (no layout shift).
   Tokens only (gen6.css :root). Auto-loaded last by inc/gen6-owner-punch.php.
   2026-11-12 fix1b: steps come from template-parts/gen6-journey-line.php (8 on /buy/, 8 on /sell/); a words-only step
   sets its sentence large where the picture would be; a phone screen is shown whole. */

.g6-journey:not([data-journey-line]) .g6-journey-media { display: none; }

/* ---------- base: vertical line (no JS, phone, tablet) ---------- */
[data-journey-line] { --g6j-dot: 44px; --g6j-rule: color-mix(in srgb, var(--g6-ink) 16%, transparent); }
[data-journey-line] .g6-journey-steps {
  position: relative;
  display: block;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
[data-journey-line] .g6-journey-steps::before {
  content: "";
  position: absolute;
  left: calc(var(--g6j-dot) / 2 - 1px);
  top: calc(var(--g6j-dot) / 2);
  bottom: calc(var(--g6j-dot) / 2);
  width: 2px;
  background: var(--g6j-rule);
}
.g6pb-js [data-journey-line] .g6-journey-steps li,
[data-journey-line] .g6-journey-steps li,
[data-journey-line] .g6-journey-steps li[data-who="you"] {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0 0 28px calc(var(--g6j-dot) + 20px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
  filter: none;
  text-align: left;
  transition: none;
}
[data-journey-line] .g6-journey-steps li:last-child { padding-bottom: 0; }
[data-journey-line] .g6-journey-steps li::after,
.g6pb-js [data-journey-line] .g6-journey-steps li::after { content: none; display: none; }

[data-journey-line] .g6-journey-number {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--g6j-dot);
  height: var(--g6j-dot);
  margin: 0;
  border-radius: 50%;
  background: var(--g6-paper);
  box-shadow: inset 0 0 0 2px var(--g6-ink);
  color: var(--g6-ink);
  font: 700 .875rem/1 var(--g6-ui);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
[data-journey-line] li[data-who="you"] .g6-journey-number {
  background: var(--g6-channel);
  box-shadow: none;
  color: var(--g6-paper);
}
[data-journey-line] .g6-journey-chip,
[data-journey-line] li[data-who="you"] .g6-journey-chip {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--g6-slate);
  font: 700 .875rem/1.2 var(--g6-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-journey-line] li[data-who="you"] .g6-journey-chip { color: var(--g6-channel); }
[data-journey-line] .g6-journey-steps h3 {
  margin: 0 0 6px;
  padding-top: 8px;
  color: var(--g6-ink);
  font: 500 1.5rem/1.15 var(--g6-display);
  letter-spacing: 0;
}
[data-journey-line] .g6-journey-steps p {
  max-width: 38rem;
  margin: 0;
  color: var(--g6-ink);
  font: 400 1rem/1.6 var(--g6-ui);
}
[data-journey-line] .g6-journey-media { margin: 16px 0 0; }
[data-journey-line] .g6-journey-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: var(--g6-radius);
  box-shadow: var(--g6-floating-shadow);
  background: var(--g6-mist);
}
[data-journey-line] .g6-journey-media--photo img { object-position: 50% 40%; }
[data-journey-line] .g6-journey-media--map img { object-position: 50% 100%; }
[data-journey-line] .g6-journey-media--portrait img { object-position: 50% 42%; }
[data-journey-line] .g6-journey-media--group img { object-position: 50% 30%; }
[data-journey-line] .g6-journey-media figcaption {
  margin-top: 10px;
  color: var(--g6-slate);
  font: 500 .875rem/1.45 var(--g6-ui);
}
/* fin1-buy: a frame taken from a film links to that film (44px target, underlined like the rest of the site's links) */
[data-journey-line] .g6-journey-watch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 4px;
  color: var(--g6-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
[data-journey-line] .g6-journey-watch:focus-visible { outline: 3px solid var(--g6-channel); outline-offset: 2px; border-radius: 4px; }

/* ---------- with JS: stop buttons, one open step ---------- */
.g6-journey--line .g6-journey-steps h3 { padding: 0; font: inherit; }
.g6-journey--line .g6-journey-stop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--g6j-dot);
  margin: 0;
  padding: 2px 0 0;
  border: 0;
  background: none;
  color: var(--g6-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.g6-journey--line .g6-journey-title {
  color: var(--g6-ink);
  font: 500 1.5rem/1.15 var(--g6-display);
}
.g6-journey--line .g6-journey-stop .g6-journey-chip { order: -1; }
.g6-journey--line .g6-journey-stop:focus-visible { outline: 3px solid var(--g6-channel); outline-offset: 4px; border-radius: var(--g6-radius); }
.g6-journey--line li.is-active .g6-journey-number { box-shadow: inset 0 0 0 2px var(--g6-ink), 0 0 0 6px color-mix(in srgb, var(--g6-channel) 22%, transparent); }
.g6-journey--line li[data-who="you"].is-active .g6-journey-number { box-shadow: 0 0 0 6px color-mix(in srgb, var(--g6-channel) 22%, transparent); }
.g6-journey--line .g6-journey-detail { padding-top: 10px; }
.g6-journey--line li:not(.is-active) .g6-journey-detail { display: none; }
.g6-journey--line .g6-journey-of,
.g6-journey--line .g6-journey-big { display: none; }
.g6-journey--line .g6-journey-nav { display: flex; gap: 8px; margin-top: 18px; }
.g6-journey--line .g6-journey-nav button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--g6-ink) 30%, transparent);
  border-radius: 50%;
  background: var(--g6-paper);
  color: var(--g6-ink);
  font: 600 1.125rem/1 var(--g6-ui);
  cursor: pointer;
  transition: background-color var(--g6-motion) ease, color var(--g6-motion) ease;
}
.g6-journey--line .g6-journey-nav button:hover:not(:disabled) { background: var(--g6-ink); color: var(--g6-paper); }
.g6-journey--line .g6-journey-nav button:focus-visible { outline: 3px solid var(--g6-channel); outline-offset: 3px; }
.g6-journey--line .g6-journey-nav button:disabled { opacity: .35; cursor: default; }
/* "Your part" / "Our part": the chosen side's stops are ringed and bold; nothing fades (text keeps full contrast),
   and stepping skips the other side's stops (js). */
.g6-journey--line[data-show="you"] li[data-who="team"],
.g6-journey--line[data-show="team"] li[data-who="you"] { opacity: 1; filter: none; }
/* 2026-11-12 fix1b: the other side's stops step back so the toggle visibly does something: their dots dim (decorative,
   aria-hidden), their labels drop to regular weight in a lighter slate (about 5:1 on the page background). */
/* fin1m: a dimmed dot is redrawn in the same light slate as its label (about 5:1), not faded: a faded filled "You"
   dot fell under 3:1 (bar file: decorative numerals still meet 3:1, dimmed stops stay readable) */
.g6-journey--line[data-show="you"] li[data-who="team"] .g6-journey-number,
.g6-journey--line[data-show="team"] li[data-who="you"] .g6-journey-number {
  opacity: 1;
  background: var(--g6-paper);
  color: color-mix(in srgb, var(--g6-slate) 72%, var(--g6-paper));
  box-shadow: inset 0 0 0 2px currentColor;
}
.g6-journey--line[data-show="you"] li[data-who="team"] .g6-journey-title,
.g6-journey--line[data-show="team"] li[data-who="you"] .g6-journey-title,
.g6-journey--line[data-show="you"] li[data-who="team"] .g6-journey-chip,
.g6-journey--line[data-show="team"] li[data-who="you"] .g6-journey-chip { color: color-mix(in srgb, var(--g6-slate) 72%, var(--g6-paper)); font-weight: 400; }
.g6-journey--line[data-show="you"] li[data-who="you"] .g6-journey-number,
.g6-journey--line[data-show="team"] li[data-who="team"] .g6-journey-number { box-shadow: inset 0 0 0 2px var(--g6-ink), 0 0 0 5px color-mix(in srgb, var(--g6-channel) 30%, transparent); }
.g6-journey--line[data-show="you"] li[data-who="you"] .g6-journey-title,
.g6-journey--line[data-show="team"] li[data-who="team"] .g6-journey-title { font-weight: 700; }
/* the toggle is a choice, not an action: its pressed state is outlined so the page keeps one filled button */
.g6-journey--line .g6-journey-toggle { margin-bottom: 24px; }
.g6-journey--line .g6-journey-toggle button[aria-pressed="true"] {
  background: var(--g6-paper);
  color: var(--g6-ink);
  box-shadow: inset 0 0 0 2px var(--g6-ink);
}

/* ---------- 960px and up: one horizontal line and a stage ---------- */
@media (min-width: 960px) {
  .g6-journey--line { --g6j-rail: 132px; --g6j-stage: 410px; --g6j-p: 0; }
  .g6-journey--line.g6-journey--words { --g6j-stage: 300px; }
  .g6-journey--line .g6-journey-steps {
    display: grid;
    grid-template-columns: repeat(var(--g6j-n, 7), minmax(0, 1fr));
    align-items: start;
    max-width: none;
    padding-bottom: var(--g6j-stage);
  }
  .g6-journey--line .g6-journey-steps::before,
  .g6-journey--line .g6-journey-steps::after {
    left: calc(50% / var(--g6j-n, 7));
    right: auto;
    top: calc(var(--g6j-dot) / 2 - 1px);
    bottom: auto;
    width: calc(100% - 100% / var(--g6j-n, 7));
    height: 2px;
  }
  .g6-journey--line .g6-journey-steps::after {
    content: "";
    position: absolute;
    background: var(--g6-ink);
    transform: scaleX(var(--g6j-p));
    transform-origin: 0 50%;
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
  }
  .g6-journey--line .g6-journey-steps li,
  .g6pb-js .g6-journey--line .g6-journey-steps li,
  .g6-journey--line .g6-journey-steps li[data-who="you"] {
    position: static;
    height: var(--g6j-rail);
    padding: 0 6px;
    text-align: center;
  }
  .g6-journey--line .g6-journey-stop { align-items: center; text-align: center; gap: 4px; padding: 0 0 6px; }
  .g6-journey--line .g6-journey-stop .g6-journey-chip { order: 0; font-size: .8125rem; } /* 13px floor for meta labels (fin1-buy) */
  .g6-journey--line .g6-journey-number {
    position: relative;
    left: auto;
    top: auto;
    width: 30px;
    height: 30px;
    margin: 7px auto 12px;
    font-size: .8125rem;
    transition: width var(--g6-motion) ease, height var(--g6-motion) ease, margin var(--g6-motion) ease;
  }
  .g6-journey--line li.is-active .g6-journey-number { width: var(--g6j-dot); height: var(--g6j-dot); margin: 0 auto 5px; font-size: .9375rem; }
  .g6-journey--line .g6-journey-title {
    color: var(--g6-ink);
    font: 600 .9375rem/1.3 var(--g6-ui);
    text-wrap: balance;
  }
  .g6-journey--line li.is-active .g6-journey-title,
  .g6-journey--line .g6-journey-stop:hover .g6-journey-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .g6-journey--line li.is-active .g6-journey-title { font-weight: 700; }

  /* the stage: the open step's words and image, same box for every step */
  .g6-journey--line .g6-journey-detail {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--g6j-rail) + 10px);
    height: calc(var(--g6j-stage) - 10px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-content: start;
    padding-top: 8px;
    text-align: left;
  }
  .g6-journey--line li.is-active .g6-journey-detail { animation: g6jStage 320ms cubic-bezier(.22, 1, .36, 1); }
  .g6-journey--line .g6-journey-steps .g6-journey-of {
    display: block;
    grid-column: 1;
    margin: 0 0 10px;
    color: var(--g6-slate);
    font: 700 .875rem/1.2 var(--g6-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .g6-journey--line .g6-journey-steps li[data-who="you"] .g6-journey-of { color: var(--g6-channel); }
  .g6-journey--line .g6-journey-steps .g6-journey-big {
    display: block;
    grid-column: 1;
    margin: 0 0 14px;
    max-width: none;
    color: var(--g6-ink);
    font: 500 clamp(2rem, 2.7vw, 2.75rem)/1.06 var(--g6-display);
    letter-spacing: -.01em;
  }
  .g6-journey--line .g6-journey-detail > p:not([class]) { grid-column: 1; font-size: 1.0625rem; text-wrap: pretty; }
  .g6-journey--line .g6-journey-nav { grid-column: 1; align-self: start; }
  .g6-journey--line .g6-journey-media {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
  }
  .g6-journey--line .g6-journey-media img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
  /* 2026-11-12 fix1b: a step with no real image. Its words fill the stage, centred, set large: the title leads, the
     sentence sits right under it, the arrows stay with the text. No empty side, no stand-in picture. */
  .g6-journey--line .g6-journey-steps li.g6-journey-nomedia .g6-journey-detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .g6-journey--line .g6-journey-steps li.g6-journey-nomedia .g6-journey-detail > * { grid-column: 1; }
  .g6-journey--line .g6-journey-steps li.g6-journey-nomedia .g6-journey-big { font-size: clamp(2.75rem, 3.6vw, 3.5rem); margin-bottom: 18px; }
  .g6-journey--line .g6-journey-steps li.g6-journey-nomedia .g6-journey-detail > p:not([class]) {
    max-width: 40rem;
    margin: 0;
    color: var(--g6-ink);
    font: 400 clamp(1.1875rem, 1.4vw, 1.375rem)/1.55 var(--g6-ui);
    text-wrap: pretty;
  }
  .g6-journey--line .g6-journey-steps li.g6-journey-nomedia .g6-journey-nav { justify-content: center; margin-top: 26px; }
  /* a phone screen: shown whole at the stage height, never cropped to a landscape box */
  .g6-journey--line .g6-journey-media--phone { align-items: flex-start; }
  .g6-journey--line .g6-journey-media--phone img { flex: 1 1 auto; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
  /* fin1-buy: the sellers' closing photo is shown whole (heads and the "just sold" sign), never cropped to the stage's
     wider box; it sits at its own width at the start of the column */
  .g6-journey--line .g6-journey-media--group { align-items: flex-start; }
  .g6-journey--line .g6-journey-media--group img { width: auto; max-width: 100%; object-fit: contain; }
}
/* phone screens on the vertical line: whole, at a sensible height */
[data-journey-line] .g6-journey-media--phone img { width: auto; max-width: 100%; max-height: 460px; aspect-ratio: auto; object-fit: contain; }
@keyframes g6jStage { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .g6-journey--line .g6-journey-steps::after,
  .g6-journey--line .g6-journey-number,
  .g6-journey--line .g6-journey-nav button { transition: none !important; }
  .g6-journey--line li.is-active .g6-journey-detail { animation: none !important; }
}

/* fin1-buy: the lede is two short sentences; keep it to a readable measure (about 70 characters a line) */
[data-journey-line] .g6-journey-lede { max-width: 40rem !important; text-wrap: balance; } /* gen6-punch-buyer.css sets max-width: none !important */