/* ─────────────────────────────────────────────────────────────
   PlanHub 2028 — the journey timeline (section #journey).
   A spine down the middle: posters' moments on the left, bidders' on
   the right, the date on the empty side. Each company has its own color.
   Under 760px everything moves to the right of a spine on the left.
   ───────────────────────────────────────────────────────────── */
.jr { --spine: 72px; }
.jr__ev--gulf { --co: var(--color-primitives-green-500); --co-soft: var(--color-primitives-green-100); --co-text: var(--color-primitives-green-700); }
.jr__ev--hollis { --co: var(--color-primitives-blue-500); --co-soft: var(--color-primitives-blue-100); --co-text: var(--color-primitives-blue-700); }
.jr__ev--bay { --co: var(--color-primitives-orange-500); --co-soft: var(--color-primitives-orange-100); --co-text: var(--color-primitives-orange-700); }
.jr__co--gulf { --co: var(--color-primitives-green-500); }
.jr__co--hollis { --co: var(--color-primitives-blue-500); }
.jr__co--bay { --co: var(--color-primitives-orange-500); }

/* Follow a person: one box per company, people inside ---------- */
.jr__bar { margin-top: var(--layout-space-l); }
.jr__barl { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); }
.jr__filters { display: flex; flex-wrap: wrap; gap: 12px; }
.jr__co {
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
    padding: 10px 10px 10px; border-radius: 14px;
    background: var(--bg-surface); border-top: 3px solid var(--co);
}
.jr__cochips { display: flex; flex-wrap: wrap; gap: 6px; }
.jr__coname { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
/* Company type pill (same as the presentation), smaller on the cards */
.st-type--sm { height: 18px; padding: 0 7px; font-size: 9.5px; letter-spacing: 0.5px; margin-right: 6px; vertical-align: 1px; }
.jr__chip {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px;
    border: 1px solid var(--border-subtle); border-radius: var(--layout-radius-full);
    background: var(--bg-canvas); cursor: pointer; font: inherit; color: var(--text-secondary);
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.jr__chip:hover { border-color: var(--co); color: var(--text-primary); }
.jr__chip:focus-visible { outline: 2px solid var(--action-primary-default); outline-offset: 2px; }
.jr__chip[aria-pressed="true"] { background: var(--bg-app-shell); border-color: var(--bg-app-shell); color: rgba(255, 255, 255, 0.72); }
.jr__chip[aria-pressed="true"] .jr__chipt b { color: var(--text-inverse); }
.jr__chipt { display: flex; flex-direction: column; align-items: flex-start; font-size: 11px; line-height: 14px; text-align: left; white-space: nowrap; }
.jr__chipt b { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text-primary); }
.jr__av { display: inline-flex; flex: none; }
.jr__av svg { width: 32px; height: 32px; border-radius: 50%; }
/* Screen-reader only: who is being followed */
.jr__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Posters | Bidders labels, pinned while the line scrolls ------- */
.jr__track { margin-top: var(--layout-space-l); }
.jr__hats {
    position: sticky; top: 0; z-index: 4;
    display: grid; grid-template-columns: 1fr var(--spine) 1fr;
    /* Bleeds past the column so card shadows don't peek out at the sides */
    margin: 0 -16px; padding: 14px 16px 10px; background: var(--bg-canvas);
    box-shadow: 0 1px 0 var(--border-subtle);
}
.jr__hat {
    font-size: var(--typography-font-size-xs); font-weight: var(--typography-font-weight-semi-bold);
    letter-spacing: var(--typography-letter-spacing-wide); text-transform: uppercase; color: var(--text-primary);
}
.jr__hat { text-align: center; }
.jr__hat--post { grid-column: 1; }
.jr__hat--bid { grid-column: 3; }
/* Divider between the two labels, on the same line as the spine below */
.jr__hats::after {
    content: ""; grid-column: 2; grid-row: 1; justify-self: center; align-self: stretch;
    width: 2px; margin: -14px 0 -10px; background: var(--border-subtle);
}

/* The spine ---------------------------------------------------- */
.jr__line { position: relative; list-style: none; margin: 0; padding: 0 0 var(--layout-space-s); }
.jr__line::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
    border-radius: 2px; background: var(--border-subtle);
}
.jr__chapter {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--layout-space-l) 0 var(--layout-space-s); text-align: center;
}
.jr__chapter:first-child { padding-top: var(--layout-space-m); }
.jr__chapt {
    padding: 6px 16px; border-radius: var(--layout-radius-full); background: var(--bg-app-shell);
    font-size: 13px; font-weight: 600; color: var(--text-inverse);
}

.jr__ev {
    position: relative; display: grid; grid-template-columns: 1fr var(--spine) 1fr; align-items: start;
    padding: 8px 0; transition: opacity 0.2s;
}
.jr__dot {
    grid-column: 2; grid-row: 1; justify-self: center; margin-top: 22px; position: relative; z-index: 1;
    width: 14px; height: 14px; border-radius: 50%; background: var(--bg-canvas);
    border: 3px solid var(--co); box-shadow: 0 0 0 4px var(--bg-canvas);
}
.jr__card { grid-row: 1; position: relative; }
.jr__when { grid-row: 1; margin-top: 19px; font-size: 12px; font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jr__ev--post .jr__card { grid-column: 1; }
.jr__ev--post .jr__when { grid-column: 3; }
.jr__ev--bid .jr__card { grid-column: 3; }
.jr__ev--bid .jr__when { grid-column: 1; justify-self: end; }
/* A short arm from the card to the dot */
.jr__card::before {
    content: ""; position: absolute; top: 28px; width: calc(var(--spine) / 2 - 8px); height: 2px; background: var(--co);
    opacity: 0.5;
}
.jr__ev--post .jr__card::before { right: calc(var(--spine) / -2 + 8px); }
.jr__ev--bid .jr__card::before { left: calc(var(--spine) / -2 + 8px); }

.jr__head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px;
    border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-canvas);
    box-shadow: var(--elevation-light-low); cursor: pointer; font: inherit; text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, border-radius 0.15s;
}
.jr__head:hover { border-color: var(--co); }
.jr__head:focus-visible { outline: 2px solid var(--action-primary-default); outline-offset: 2px; }
.jr__head .jr__av svg { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--co); }
.jr__headt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jr__who { font-size: 12px; line-height: 16px; color: var(--co-text); font-weight: 500; }
.jr__who b { font-weight: 700; }
.jr__title { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--text-primary); }
.jr__date { display: none; font-size: 12px; color: var(--text-tertiary); }
.jr__chev { display: flex; color: var(--icon-subtle); transition: transform 0.2s; }
.jr__ev.is-open .jr__chev { transform: rotate(180deg); }
.jr__ev.is-open .jr__head { border-color: var(--co); border-radius: 12px 12px 0 0; box-shadow: none; }

.jr__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.jr__ev.is-open .jr__more { grid-template-rows: 1fr; }
.jr__morein {
    overflow: hidden; min-height: 0; visibility: hidden;
    border: 1px solid transparent; border-top: 0; border-radius: 0 0 12px 12px;
    transition: visibility 0.25s;
}
.jr__ev.is-open .jr__morein {
    visibility: visible; padding: 14px 16px 16px; border-color: var(--co); background: var(--bg-canvas);
    box-shadow: var(--elevation-light-medium);
}
.jr__text { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--text-secondary); }
/* The ideas behind the moment, by name */
.jr__ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.jr__helps { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.jr__idea {
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-surface);
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
}
/* See screen and Play in the story: sibling capsules (.storylink, story.css) */
.jr__links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.jr__links a.storylink { text-decoration: none; }

/* Following one person: everyone else steps back */
.jr__ev.is-dim { opacity: 0.28; }
.jr__ev.is-dim .jr__head { box-shadow: none; }

/* Phones and narrow columns: one side, spine on the left */
@media (max-width: 760px) {
    .jr { --spine: 32px; }
    .jr__hats { display: none; }
    .jr__line::before { left: 15px; }
    .jr__chapter { align-items: flex-start; }
    .jr__ev { grid-template-columns: var(--spine) 1fr; }
    .jr__dot { grid-column: 1; }
    .jr__ev--post .jr__card, .jr__ev--bid .jr__card { grid-column: 2; }
    .jr__ev--post .jr__card::before, .jr__ev--bid .jr__card::before { left: -8px; right: auto; width: 8px; }
    .jr__when { display: none; }
    .jr__date { display: block; }
    .jr__chipt { display: none; }
    .jr__chip { padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .jr__more, .jr__morein, .jr__chev, .jr__ev, .jr__head { transition: none; }
}