/* ==========================================================================
   Tracking page v2
   Built mobile-first. Breakpoints: <=576 small, 577-767 mobile, 768-991 tablet, >=992 desktop.
   Status colours live here as custom properties so the hero graphic, the status badge and the
   progress bar can never drift apart (see components/utils/statusTheme.js).
   Do not add to _main.css — it is shared with the home and not-found pages.
   ========================================================================== */

:root {
    /* Status palette. Amber/blue/red keep the previous progress-bar values so the page stays
       recognisable; green is brightened to match the redesign. */
    /* Was #f5a551 at 2.02:1 on white. This token paints the hero graphic and the progress bar, which
       are non-text UI components and so need 3:1 (WCAG 1.4.11) — it failed that, not just the text
       threshold. Darkened to 3.15:1, keeping the hue so the page still reads as amber. Text never uses
       this value; it uses --st-status-ink below. */
    --st-status-pending: #d17d24;
    --st-status-manifested: #d17d24;
    --st-status-transit: #428bca;
    /* Nudged from #22b573 so the progress nodes clear 3:1 against white (WCAG 1.4.11). */
    --st-status-delivered: #20a86b;
    --st-status-exception: #d26759;
    --st-status-cancelled: #8a9099;
    --st-status-refund: #8a9099;

    /* Neutrals */
    --st-ink: #1f2733;
    --st-ink-soft: #5b6675;
    /* Was #8b95a3 at 3.03:1 — below 4.5:1, and this token carries real body text (field labels,
       event locations, footer copyright). Darkened to 4.53:1. */
    --st-ink-faint: #6c7788;
    --st-line: #e6eaf0;
    --st-surface: #ffffff;
    --st-canvas: #f4f7fb;

    /* Brand accent — overwritten inline from primaryColor for whitelabel brands.
       Buttons, links and focus rings only; never a status colour. */
    --st-accent: #ed5926;
    /* ShipTime orange is only 3.47:1 on white, so it fails as text. Icons, borders and hovers keep
       --st-accent; anything that renders as *text* uses this darker variant (4.55:1).

       A whitelabel brand overrides BOTH tokens together, from TrackingPage's shellStyle -- overriding
       only --st-accent would leave this ShipTime value in place, and because it is defined here the
       `var(--st-accent-ink, var(--st-accent))` fallback would never reach the brand's colour. If a
       token is ever added below that a brand should influence, give it the same treatment. */
    --st-accent-ink: #d44312;

    --st-radius: 12px;
    --st-radius-sm: 8px;
    --st-shadow: 0 1px 2px rgba(31, 39, 51, .06), 0 4px 16px rgba(31, 39, 51, .05);
    --st-gap: 16px;
}

/* Status-scoped accent. Any descendant using `currentColor` or var(--st-status) picks this up. */
.st-status-pending {
    --st-status: var(--st-status-pending);
    --st-status-ink: #94601f;
    --st-status-soft: rgba(209, 125, 36, .14);
}
.st-status-manifested {
    --st-status: var(--st-status-manifested);
    --st-status-ink: #94601f;
    --st-status-soft: rgba(209, 125, 36, .14);
}
.st-status-transit {
    --st-status: var(--st-status-transit);
    --st-status-ink: #2c5f8a;
    --st-status-soft: rgba(66, 139, 202, .13);
}
.st-status-delivered {
    --st-status: var(--st-status-delivered);
    --st-status-ink: #16794d;
    --st-status-soft: rgba(32, 168, 107, .14);
}
.st-status-exception {
    --st-status: var(--st-status-exception);
    --st-status-ink: #8f3a2e;
    --st-status-soft: rgba(210, 103, 89, .14);
}
.st-status-cancelled {
    --st-status: var(--st-status-cancelled);
    --st-status-ink: #55606e;
    --st-status-soft: rgba(138, 144, 153, .16);
}
.st-status-refund {
    --st-status: var(--st-status-refund);
    --st-status-ink: #55606e;
    --st-status-soft: rgba(138, 144, 153, .16);
}

/* Visually hidden but announced. Bootstrap ships .sr-only too; this keeps the page independent of it. */
.st-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- page shell */

/* Set by TrackingPage while it is mounted — see the comment there. `!important` because the shell also
   carries Bootstrap padding utilities in some builds, and those declare !important themselves. */
._mainContainer.st-flush {
    padding: 0 !important;
    margin: 0 !important;
}

.st-page {
    background: var(--st-canvas);
    color: var(--st-ink);
    min-height: 100%;
    /* Guards the whole redesign against horizontal scroll on narrow viewports. */
    overflow-x: hidden;
}

/* The header/footer bars sit outside this wrapper so they can paint edge to edge, which is why the
   content wrapper carries its own top padding. */
.st-shell {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 16px 32px;
}

.st-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow);
    margin-bottom: var(--st-gap);
}

.st-card__body { padding: 18px; }

.st-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-ink);
    margin: 0;
}

/* Long values wrap rather than widening their card. Deliberately NOT `word-break: break-word`, which
   also splits ordinary words ("Deliver/ed") once a column gets narrow. */
.st-break { overflow-wrap: break-word; min-width: 0; }

/* Tap targets: 44px minimum on anything interactive. */
.st-tap {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------- icons

   Glyphs come from components/ui/Icon.js, which resolves a name to a Font Awesome 4.7 <i> where 4.7 has
   the mark and to an inline SVG only where it does not (see that file). Both draw in `currentColor`, so
   colour is inherited either way — which is what lets one timeline glyph follow its row's status tint
   and one tile glyph follow the brand accent. SIZING DIFFERS between the two, and the rules below cover
   only the SVG branch: FA's own `.fa` rule resets font-size, so each context states its size again in
   the "Font Awesome glyph sizing" section at the foot of this file.

   `vertical-align` matters: an inline SVG sits on the text baseline by default, which leaves it
   looking dropped beside a label. `-0.125em` centres a 1em box against lower-case text. */
.st-icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex: 0 0 auto;
}
/* In a flex or grid cell the glyph is the only child and should fill it, so the parent sets the size. */
.st-event__icon .st-icon,
.st-tile__icon .st-icon,
.st-route__icon .st-icon,
.st-social .st-icon { vertical-align: middle; }

/* --------------------------------------------------------------- text links

   NOT APPLIED BY ANYTHING ON THIS BRANCH — every outbound link here is a tile, a social icon or the
   header's "Need help?", each with its own treatment. Kept, and not to be tidied away: this is the
   page's only accent-coloured TEXT style and the only reader of --st-accent-ink, which TrackingPage
   overrides per brand, and the stacked gate branch applies both classes to its "View proof of
   delivery" and shipment-details controls. Re-deriving the contrast maths is how the 3.47:1 ShipTime
   orange came to be used as text in the first place. */

/* A link whose label is preceded by a glyph. */
.st-link--icon { display: inline-flex; align-items: center; gap: 6px; }

.st-link {
    color: var(--st-accent-ink, var(--st-accent));
    text-decoration: none;
    font-weight: 500;
}
.st-link:hover, .st-link:focus { color: var(--st-accent); text-decoration: underline; }

/* Scoped to this page. A bare `:focus-visible` also restyled the home and not-found pages, which this
   file is explicitly not supposed to reach -- those two keep the browser default they have on main. */
.st-page :focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- header */

/* Full-bleed white bar, as drawn: it spans the viewport while its contents stay on the page grid. */
.st-header-bar {
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-line);
}

.st-header {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* These brand SVGs carry a viewBox but no width/height. In a flex container `max-height` alone
   leaves the width indefinite and the image collapses to zero, so set a definite height and let the
   intrinsic ratio supply the width. */
.st-header__logo { flex: 0 0 auto; max-width: 62%; }
.st-header__logo img { height: 40px; width: auto; max-width: 100%; display: block; }
/* The logo images are 40px and 30px tall, leaving their links short of a 44px touch target. Growing the
   anchor rather than the image keeps the artwork at its intended size. */
.st-header__logo a,
.st-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.st-header__logo-text { font-size: 18px; font-weight: 700; color: var(--st-ink); }

.st-header__help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--st-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.st-header__help:hover { color: var(--st-accent); }

/* --------------------------------------------------------------- hero */

.st-hero__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 18px;
}

.st-hero__graphic {
    /* The status colour reaches the illustration through currentColor. */
    color: var(--st-status, var(--st-status-transit));
    flex: 0 0 auto;
    align-self: center;
    width: 148px;
    max-width: 60%;
}
.st-hero__graphic svg { width: 100%; height: auto; display: block; }

.st-hero__text { flex: 1 1 auto; min-width: 0; text-align: center; }

/* Dark text on a pale tint, as drawn. White-on-solid measured 2.0–3.6:1 for every status, all short of
   the 4.5:1 this 12px label needs; dark-on-tint lands at 5.3–7.5:1. */
.st-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--st-status-ink, var(--st-ink));
    background: var(--st-status-soft, var(--st-canvas));
    margin-bottom: 10px;
}

.st-hero__headline {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--st-ink);
}

.st-hero__sub { font-size: 14px; color: var(--st-ink-soft); margin: 0; }
.st-hero__sub-location { font-size: 14px; color: var(--st-ink-faint); margin: 2px 0 0; }

/* --------------------------------------------------------------- progress steps */

/* Vertical below 576px: a 4-node horizontal bar with labels AND dates cannot fit 375px. */
/* Colour of a COMPLETED step. Normally the shipment's status colour, so a delivered journey is green
   throughout. On an exception it is forced back to the transit blue: those steps genuinely succeeded, and
   painting "Created" red implied it had failed, which is a large part of why the bar read as terminal. */
.st-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    --st-step-done: var(--st-status, var(--st-status-transit));
}
.st-status-exception .st-steps { --st-step-done: var(--st-status-transit); }

.st-steps__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 18px;
}
.st-steps__item:last-child { padding-bottom: 0; }

/* Connector between nodes. */
.st-steps__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--st-line);
}
/* Only a step that was completed AND passed fills its outgoing connector. The exception node is by
   definition the furthest one reached, so the segment leaving it stays grey — nothing got past it. */
.st-steps__item--done:not(:last-child)::before { background: var(--st-step-done); }

.st-steps__node {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--st-line);
    background: var(--st-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    position: relative;
    z-index: 1;
}
.st-steps__item--done .st-steps__node {
    background: var(--st-step-done);
    border-color: var(--st-step-done);
}
/* The step where a problem was reported. Full-strength exception colour, so it is the one thing that
   draws the eye on an otherwise in-progress bar. */
.st-steps__item--exception .st-steps__node {
    background: var(--st-status-exception);
    border-color: var(--st-status-exception);
}
/* Where a cancelled or refunded shipment stopped. Takes the status colour, which is grey for both. */
.st-steps__item--stopped .st-steps__node {
    background: var(--st-status, var(--st-status-cancelled));
    border-color: var(--st-status, var(--st-status-cancelled));
}

.st-steps__label { font-size: 14px; font-weight: 600; color: var(--st-ink); }
.st-steps__item--todo .st-steps__label { color: var(--st-ink-faint); font-weight: 500; }
/* The problem step keeps a full-weight label: it is the one a recipient needs to read. */
.st-steps__item--exception .st-steps__label { color: var(--st-status-ink, var(--st-ink)); }
.st-steps__date { font-size: 13px; color: var(--st-ink-soft); }

/* --------------------------------------------------------------- summary card */

.st-summary { display: grid; grid-template-columns: 1fr; gap: 14px; }

.st-field__label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--st-ink-faint);
    margin-bottom: 4px;
}
/* Grid, not flex-wrap: long Canpar-style tracking numbers wrapped and pushed the copy button onto a
   line of its own. The value wraps inside column 1; the button stays put in column 2. */
.st-field__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--st-ink);
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    justify-content: start;
    align-items: center;
    gap: 2px;
}

.st-copy {
    border: 0;
    background: transparent;
    color: var(--st-ink-faint);
    cursor: pointer;
    padding: 0 6px;
    border-radius: var(--st-radius-sm);
    /* 32x44. Short of the 44x44 in WCAG 2.5.5 (AAA), but comfortably past the 24px minimum in 2.5.8
       (AA). Reserving the full 44px of width pushed the icon onto its own line next to a long tracking
       number, so the height carries the touch target and the width stays tight. */
    min-height: 44px;
    min-width: 32px;
    flex: 0 0 auto;
}
.st-copy:hover { color: var(--st-accent); }
.st-copy--done { color: var(--st-status-delivered); }

.st-carrier-logo { max-height: 26px; max-width: 130px; }

.st-summary__toggle {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--st-line);
    margin-top: 4px;
}
.st-summary__toggle button {
    border: 0;
    background: transparent;
    color: var(--st-ink-soft);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}
.st-summary__toggle button:hover { color: var(--st-accent); }

/* --------------------------------------------------------------- main columns */

.st-columns { display: grid; grid-template-columns: 1fr; gap: var(--st-gap); align-items: start; }

/* --------------------------------------------------------------- activity */

.st-activity__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.st-events { list-style: none; margin: 0; padding: 0; position: relative; }

/* Grid rather than flex so the date pill can drop to its own line on mobile without touching the
   markup. Beside the text at 360px it left ~110px for the event name, which forced mid-word breaks. */
.st-event {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
        "icon main"
        ".    when";
    align-items: start;
    gap: 6px 12px;
    padding: 12px 0;
    position: relative;
}
.st-event__icon { grid-area: icon; }
.st-event__main { grid-area: main; }
.st-event__when { grid-area: when; justify-self: start; }
.st-event:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50px;
    bottom: -6px;
    width: 2px;
    background: var(--st-line);
}

.st-event__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(66, 139, 202, .10);
    position: relative;
    z-index: 1;
}
/* The glyph is sized here rather than in the component, so every row matches whatever icon the
   resolver chose for it. */
.st-event__icon .st-icon { font-size: 17px; }

/* Each tone sets three things from one colour: the halo, the disc tint and the glyph itself. Declaring
   `color` is what makes the glyph follow the row — Icon draws in currentColor. */
.st-event__icon--green  { color: #1a8f5c; background: rgba(32, 168, 107, .12);  box-shadow: 0 0 0 5px rgba(32, 168, 107, .12); }
.st-event__icon--orange { color: #b8691c; background: rgba(209, 125, 36, .13);  box-shadow: 0 0 0 5px rgba(209, 125, 36, .13); }
.st-event__icon--red    { color: #b84b3c; background: rgba(210, 103, 89, .13);  box-shadow: 0 0 0 5px rgba(210, 103, 89, .13); }
.st-event__icon--blue   { color: #3579b0; background: rgba(66, 139, 202, .12);  box-shadow: 0 0 0 5px rgba(66, 139, 202, .12); }
.st-event__icon--grey   { color: #6b7480; background: rgba(138, 144, 153, .14); box-shadow: 0 0 0 5px rgba(138, 144, 153, .14); }

/* The newest scan is filled solid with a white glyph, as drawn — it is the row the recipient reads
   first. Backgrounds use the full-strength status colours, all of which clear 3:1 against white. */
.st-event__icon--current { color: #fff; }
.st-event__icon--current.st-event__icon--green  { background: var(--st-status-delivered); }
.st-event__icon--current.st-event__icon--orange { background: var(--st-status-pending); }
.st-event__icon--current.st-event__icon--red    { background: var(--st-status-exception); }
.st-event__icon--current.st-event__icon--blue   { background: var(--st-status-transit); }
.st-event__icon--current.st-event__icon--grey   { background: var(--st-status-cancelled); }

.st-event__main { min-width: 0; }
.st-event__name { font-size: 14px; font-weight: 600; color: var(--st-ink); }
.st-event__where { font-size: 13px; color: var(--st-ink-faint); }

/* Tinted per event status, matching the design's coloured date chips. */
.st-event__when {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-ink-soft);
    background: var(--st-canvas);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
    display: inline-flex;
    gap: 8px;
}
.st-event__when--green  { background: rgba(34, 181, 115, .12); color: #16794d; }
.st-event__when--blue   { background: rgba(66, 139, 202, .12); color: #2c5f8a; }
.st-event__when--orange { background: rgba(245, 165, 81, .16); color: #94601f; }
.st-event__when--red    { background: rgba(210, 103, 89, .14); color: #8f3a2e; }
.st-event__when--grey   { background: rgba(138, 144, 153, .14); color: #55606e; }
.st-event__time { opacity: .85; }

.st-empty { text-align: center; padding: 24px 8px; color: var(--st-ink-faint); }
.st-empty img { width: 160px; max-width: 60%; margin-bottom: 12px; }

/* --------------------------------------------------------------- route panel */

.st-route { display: flex; flex-direction: column; }
.st-route__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
}
.st-route__row + .st-route__row { border-top: 1px solid var(--st-line); }
.st-route__row:first-child { padding-top: 2px; }
.st-route__row:last-child { padding-bottom: 2px; }
.st-route__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--st-canvas);
    color: var(--st-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-route__label { font-size: 13px; font-weight: 400; color: var(--st-ink-faint); }
.st-route__value { font-size: 14px; font-weight: 600; color: var(--st-ink); }

/* --------------------------------------------------------------- action tiles */

/* One card holding all three actions, divided by hairlines — as drawn. */
.st-tiles {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow);
    margin-bottom: var(--st-gap);
    overflow: hidden;
}

.st-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
}
.st-tile + .st-tile { border-top: 1px solid var(--st-line); }
.st-tile:hover { background: var(--st-canvas); text-decoration: none; color: inherit; }

.st-tile__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--st-canvas);
    color: var(--st-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.st-tile__icon .st-icon { font-size: 32px; }
.st-tile__text { min-width: 0; }
.st-tile__title { font-size: 14px; font-weight: 600; color: var(--st-ink); }
.st-tile__sub { font-size: 12px; color: var(--st-ink-faint); }
.st-tile__ext { margin-left: auto; color: var(--st-ink-faint); flex: 0 0 auto; }

/* The Proof of Delivery action inside the details panel. Separated from the table above by a rule,
   because it is an action rather than more of the same data. */
.st-details__pod {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--st-line);
}

/* --------------------------------------------------------------- gate modal */

.st-modal {
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;   /* `inset` shorthand fallback for older Safari */
    background: rgba(31, 39, 51, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1050;
}

.st-modal__panel {
    background: var(--st-surface);
    border-radius: var(--st-radius);
    box-shadow: 0 12px 40px rgba(31, 39, 51, .22);
    padding: 22px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
}

.st-modal__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--st-ink); }
.st-modal__desc { font-size: 14px; color: var(--st-ink-soft); margin: 0 0 16px; }

.st-modal__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;    /* 16px stops iOS Safari zooming the page on focus */
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    color: var(--st-ink);
    background: var(--st-surface);
}
.st-modal__input:focus { border-color: var(--st-accent); outline: 2px solid var(--st-accent); outline-offset: 1px; }

.st-modal__error { font-size: 13px; color: var(--st-status-exception); margin: 8px 0 0; }

.st-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.st-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--st-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.st-btn--primary { background: var(--st-accent); color: #fff; }
.st-btn--primary:disabled { opacity: .55; cursor: default; }
.st-btn--ghost { background: transparent; color: var(--st-ink-soft); border-color: var(--st-line); }
.st-btn--ghost:hover { color: var(--st-ink); }

/* --------------------------------------------------------------- POD viewer */

.st-modal__panel--wide { max-width: 760px; }

.st-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.st-modal__close {
    border: 0;
    background: transparent;
    color: var(--st-ink-faint);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--st-radius-sm);
    flex: 0 0 auto;
}
.st-modal__close:hover { color: var(--st-ink); }

.st-pod__doc + .st-pod__doc { margin-top: 18px; border-top: 1px solid var(--st-line); padding-top: 18px; }

.st-pod__image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Matches PodPreviewDialog's 400px iframe. */
.st-pod__pdf {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 4px;
    display: block;
}

.st-pod__fallback { display: inline-block; margin-top: 10px; font-size: 14px; }
.st-pod__download { display: inline-flex; align-items: center; text-decoration: none; }
.st-pod__download:hover { color: #fff; text-decoration: none; }

/* --------------------------------------------------------------- details panel */

.st-details { border-top: 1px solid var(--st-line); padding-top: 16px; }

.st-details__summary { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 14px; }
.st-details__summary dt { font-size: 13px; font-weight: 400; color: var(--st-ink-faint); margin: 0; }
.st-details__summary dd { font-size: 16px; font-weight: 600; color: var(--st-ink); margin: 2px 0 0; }

/* Narrow viewports scroll the table rather than the page. */
.st-details__table-wrap { overflow-x: auto; }

.st-details__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-details__table th,
.st-details__table td { text-align: left; padding: 8px 12px 8px 0; white-space: nowrap; }
.st-details__table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-ink-faint);
    border-bottom: 1px solid var(--st-line);
}
.st-details__table tbody th { font-weight: 600; color: var(--st-ink); }
.st-details__table tbody tr + tr th,
.st-details__table tbody tr + tr td { border-top: 1px solid var(--st-line); }

.st-details__note { font-size: 13px; color: var(--st-ink-soft); margin: 10px 0 0; }

/* --------------------------------------------------------------- description */

.st-note {
    font-size: 14px;
    color: var(--st-ink-soft);
    text-align: center;
    margin: 0 auto var(--st-gap);
    max-width: 680px;
}

/* In the footer the note sits above the attribution, so it owns the top padding and gives its bottom
   margin back — .st-footer brings its own 20px. .st-footer-bar has no padding of its own, hence the
   horizontal 16px, which keeps the text off the edge on a phone. */
.st-footer-bar .st-note {
    margin: 0 auto;
    padding: 18px 16px 0;
}

/* --------------------------------------------------------------- social row */

.st-social { display: flex; justify-content: center; gap: 12px; padding: 4px 0 8px; }
.st-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-ink-soft);
}
.st-social a:hover { color: var(--st-accent); border-color: var(--st-accent); }
/* All four marks are now Icon glyphs on a 24 grid, so they share one size. The previous rule sized a
   48-viewBox inline <svg> for X only, which is why it sat visibly smaller than its three siblings. */
.st-social .st-icon { font-size: 20px; }

/* --------------------------------------------------------------- footer

   The page's single provider-attribution slot: "Powered by", the provider logo, the copyright. See
   components/tracking/SiteFooter.js for which of the three appear together.

   This whole block was missing. `.st-footer-bar`, `.st-footer__powered` and `.st-footer__copy` had no
   rules at all, and `.st-footer` had only a `flex-direction` in the >= 768px query, applied to an
   element that was never `display: flex`. The visible result was the provider logo vanishing: the
   brand SVGs carry a viewBox and no width/height, so with no definite height the image collapses to
   zero and the footer read "Powered By" followed by the copyright and nothing in between. The header
   and not-found logos already carry the height rule that avoids this, three lines apart from the
   comment explaining why -- the footer needed the same and did not get it. */

.st-footer-bar {
    /* Mirrors .st-header-bar: full-bleed surface, hairline against the canvas. */
    background: var(--st-surface);
    border-top: 1px solid var(--st-line);
}

.st-footer {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* Same trap as the header logo, and the reason this block exists. A definite height lets the
   intrinsic ratio supply the width; `max-height` alone leaves the width indefinite in a flex
   container and the image disappears. Smaller than the header's 40px: attribution, not identity. */
.st-footer img { height: 30px; width: auto; max-width: 100%; display: block; }

/* BrandLogo falls back to text when a logo URL is missing or 404s. Without a class of its own it
   would inherit the header's 18px bold treatment, which is too loud for a footer credit. */
.st-footer__logo-text { font-size: 15px; font-weight: 600; color: var(--st-ink-soft); }

.st-footer__powered { font-size: 12px; color: var(--st-ink-faint); }
.st-footer__copy { font-size: 12px; color: var(--st-ink-faint); }

/* ==========================================================================
   >= 577px — small phones landscape and up: steps go horizontal
   ========================================================================== */
@media (min-width: 577px) {
    .st-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .st-steps {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }
    .st-steps__item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding-bottom: 0;
    }
    /* Horizontal connector, drawn from the node's centre to the next node's centre. */
    .st-steps__item:not(:last-child)::before {
        left: 50%;
        right: auto;
        top: 11px;
        bottom: auto;
        width: 100%;
        height: 2px;
    }
    .st-steps__label { font-size: 13px; }
    .st-steps__date { font-size: 12px; }

    .st-event {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas: "icon main when";
    }
}

/* ==========================================================================
   >= 768px — tablet
   ========================================================================== */
@media (min-width: 768px) {
    .st-shell { padding: 24px 24px 40px; }
    .st-card__body { padding: 22px; }

    .st-hero__body { flex-direction: row; align-items: center; gap: 28px; padding: 26px; }
    .st-hero__graphic { width: 168px; max-width: none; align-self: auto; }
    .st-hero__text { text-align: left; }
    .st-hero__headline { font-size: 26px; }

    .st-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

    /* Columns follow the tile count so the row is always filled, never left with a blank third. */
    .st-tiles--1 { grid-template-columns: minmax(0, 1fr); }
    .st-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Dividers become vertical once the tiles sit side by side. */
    .st-tile + .st-tile { border-top: 0; border-left: 1px solid var(--st-line); }

    /* Wide enough to sit on one line: Powered by | logo | copyright. */
    .st-footer { flex-direction: row; gap: 14px; padding: 22px 16px; }
}

/* ==========================================================================
   >= 992px — desktop: activity and route side by side, as drawn
   ========================================================================== */
@media (min-width: 992px) {
    .st-hero__headline { font-size: 28px; }
    /* Tracking numbers are much longer than the other values, so the first column gets more room. */
    .st-summary { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
    .st-columns { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}

/* ==========================================================================
   Print / reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Scoped, for the reason given on `.st-page :focus-visible` above: a bare `*` also silenced the
       transitions the shared shell and the toasts declare on the other two pages. */
    .st-page, .st-page * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------- not-found page */

.st-notfound__logo img { height: 64px; width: auto; max-width: 100%; display: block; }
.st-notfound__logo .st-header__logo-text { font-size: 22px; }

/* --------------------------------------------------------------- Font Awesome glyph sizing

   Icon.js renders Font Awesome <i> elements for every mapped name, so these rules are what actually
   size the icons on the page — the `.st-icon` font-size rules further up only apply to the inline-SVG
   fallback for names FA has no equivalent for.

   Sizes are set against the mockup rather than picked freely. Measured in the mockup at its own scale
   and converted to this page's 1080px content width (the mockup's content column is ~1235px, so
   ~1.14x), the glyph sits at roughly 20px in the action tiles and 16px in the timeline. FA 4.7's
   `.fa` base rule is `font: normal normal normal 14px/1 FontAwesome`, whose `font` shorthand resets
   font-size — which is why each context has to state its own size rather than inheriting one. */
.fa.st-icon {
    font-family: FontAwesome !important;
    font-style: normal;
}
.st-steps__node .fa.st-icon { font-size: 11px; }
.st-route__icon .fa.st-icon { font-size: 16px; }
.st-event__icon .fa.st-icon { font-size: 16px; }
.st-tile__icon  .fa.st-icon { font-size: 20px; }
.st-social      .fa.st-icon { font-size: 20px; }

/* The action tiles' discs are tinted from the accent in the mockup — a warm wash under an orange
   glyph — where this page had them on --st-canvas, a cool blue-grey. That read as a different design
   rather than as a smaller one.

   The tint is drawn as a `currentColor` layer at low opacity rather than a named colour, so it follows
   whatever accent the brand set: a whitelabel page gets a wash of its own colour, with no per-brand CSS
   and no `color-mix()` (too new to rely on for a public tracking link opened in whatever the recipient
   has). It goes on the wrapper's ::before because the glyph's own ::before already carries the FA
   character. */
.st-tile__icon {
    position: relative;
    background: transparent;
    color: var(--st-accent);
}
.st-tile__icon::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* explicit offsets: `inset` is unsupported on older Safari */
    border-radius: 50%;
    background: currentColor;
    opacity: .12;
}
/* Lift the glyph above the tint layer. */
.st-tile__icon .st-icon { position: relative; }