/* Disneyland parking, card 872.
   Wayfinding signage. Navy sign panels, white sign type and four route colors, one per way in.
   The signature is the route board: every way to the gates drawn as a transit line on one shared
   minute scale. The rate stub, the lot board, the gate clock and the construction ledger each
   carry real data. Light mode is the sign in daylight, dark mode is the garage at night. */

.dlp {
    --paper: #f2f0ea;
    --card: #ffffff;
    --ink: #121c33;
    --ink2: #4a5468;
    --sign: #13294b;
    --sign-ink: #f4f6fa;
    --sign-2: #c9d4e6;
    --rule: color-mix(in srgb, var(--ink) 16%, transparent);
    --c-drop: #b97a00;
    --c-tram: #c62f3c;
    --c-walk: #2a64a8;
    --c-toy: #23804a;
    --gold: #f2b632;
    --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    --body: "Hanken Grotesk", system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
    padding-bottom: 48px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dlp {
        --paper: #0c1322; --card: #151f36; --ink: #edf1f8; --ink2: #b4bdd0; --sign: #1d3563; --sign-ink: #f4f6fa; --sign-2: #c9d4e6;
        --c-drop: #f2b632; --c-tram: #ff7682; --c-walk: #79b0f2; --c-toy: #63cf8c;
    }
}
:root[data-theme="dark"] .dlp {
    --paper: #0c1322; --card: #151f36; --ink: #edf1f8; --ink2: #b4bdd0; --sign: #1d3563; --sign-ink: #f4f6fa; --sign-2: #c9d4e6;
    --c-drop: #f2b632; --c-tram: #ff7682; --c-walk: #79b0f2; --c-toy: #63cf8c;
}

.dlp *, .dlp *::before, .dlp *::after { box-sizing: border-box; }
.dlp-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 16px; }
.dlp h1, .dlp h2, .dlp h3 { font-family: var(--display); letter-spacing: -.02em; color: var(--ink); }
.dlp h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.02; margin: 6px 0 10px; font-weight: 800; }
.dlp h3 { line-height: 1.15; }
.dlp :where(a) { color: var(--c-tram); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dlp :where(a):hover { text-decoration-thickness: 3px; }
.dlp :where(a, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--gold); border-radius: 4px; }
.dlp :where(.dlp-jump, .dlp-cluster, .dlp-board) :where(a):focus-visible { outline-color: var(--gold); box-shadow: none; }
.dlp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero */
.dlp-hero { padding: 28px 0 34px; border-bottom: 1px solid var(--rule); }
.dlp-hero-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; }
.dlp-crumb { font-size: 14px; color: var(--ink2); display: flex; gap: 8px; margin-bottom: 14px; }
.dlp-crumb :where(a) { color: var(--ink2); }
.dlp h1 { font-size: clamp(44px, 7vw, 88px); line-height: .92; margin: 0 0 18px; font-weight: 800; }
.dlp h1 span { display: block; font-size: max(.3em, 18px); line-height: 1.2; letter-spacing: -.005em; margin-top: 14px; color: var(--ink2); font-weight: 600; max-width: 30ch; }
.dlp-answer { margin: 0; font-size: 18.5px; max-width: 640px; background: var(--card); border: 1px solid var(--rule); border-left: 8px solid var(--sign); border-radius: 4px 12px 12px 4px; padding: 16px 20px; }
.dlp-by { margin: 14px 0 0; font-size: 14.5px; color: var(--ink2); }

/* Rate stub: a pay booth ticket in sign navy */
.dlp-stub { background: var(--sign); color: var(--sign-ink); border-radius: 14px; padding: 18px 20px 0; position: relative; box-shadow: 0 18px 40px -18px rgba(10, 20, 45, .55); }
.dlp-stub-top { display: flex; flex-direction: column; border-bottom: 2px solid var(--gold); padding-bottom: 10px; }
.dlp-stub-top small { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.dlp-stub-top b { font-family: var(--display); font-size: 28px; line-height: 1.05; }
.dlp-stub dl { margin: 6px 0 10px; }
.dlp-stub dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dotted rgba(244, 246, 250, .3); }
.dlp-stub dl div:first-child dd { font-size: 34px; color: var(--gold); }
.dlp-stub dt { font-size: 15.5px; font-weight: 700; }
.dlp-stub dt small { display: block; font-weight: 400; font-size: 13.5px; color: var(--sign-2); }
.dlp-stub dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.dlp-stub-foot { margin: 0 -20px; padding: 18px 20px 16px; border-top: 2px dashed rgba(244, 246, 250, .45); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; }
.dlp-stub-foot b { color: var(--gold); }
.dlp-punch { border: 2px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); }

/* Jump nav */
.dlp-jump { position: sticky; top: 0; z-index: 5; background: var(--sign); }
.dlp-jump .dlp-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.dlp-jump .dlp-wrap::-webkit-scrollbar { display: none; }
.dlp-jump :where(a) { color: var(--sign-ink); text-decoration: none; font-size: 14.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.dlp-jump :where(a):hover { background: rgba(255, 255, 255, .12); }

/* Sections */
.dlp-sec { padding-top: 56px; scroll-margin-top: 56px; }
.dlp-sec-head { max-width: 720px; margin-bottom: 22px; }
.dlp-sec-head > p:last-child { margin: 0; color: var(--ink2); }
.dlp-kick { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-tram); }
.dlp-note { font-size: 15.5px; color: var(--ink2); margin: 16px 0 0; max-width: 760px; }

/* Route board, the signature */
.dlp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dlp-line { --c: var(--c-tram); background: var(--card); border: 1px solid var(--rule); border-left: 10px solid var(--c); border-radius: 6px 14px 14px 6px; padding: 16px 18px 14px; }
.dlp-line--drop { --c: var(--c-drop); }
.dlp-line--walk { --c: var(--c-walk); }
.dlp-line--toy { --c: var(--c-toy); }
.dlp-line.is-muted { border-left-color: color-mix(in srgb, var(--c) 40%, var(--card)); }
.dlp-line.is-muted .dlp-track { opacity: .4; }
.dlp-line-delta { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.dlp-line-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.dlp-line h3 { margin: 0; font-size: 21px; }
.dlp-line h3 :where(a) { color: var(--ink); text-decoration-color: var(--c); }
.dlp-line-total { margin: 0; font-size: 15px; color: var(--ink2); }
.dlp-line-total b { font-family: var(--display); font-size: 30px; color: color-mix(in srgb, var(--c) 80%, var(--ink)); font-variant-numeric: tabular-nums; }
.dlp-track { display: flex; align-items: center; height: 34px; margin: 10px 0 6px; padding-right: 88px; position: relative; }
.dlp-track > .dlp-leg { flex: 0 0 var(--w); }
.dlp-leg { width: var(--w); height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.dlp-leg::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.dlp-leg--walk::before { height: 4px; background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 13px); }
.dlp-leg--ride::before { height: 12px; border-radius: 6px; background: var(--c); }
.dlp-leg--wait::before { height: 4px; background: radial-gradient(circle, var(--c) 2px, transparent 2.5px) 0 50% / 8px 4px repeat-x; }
.dlp-leg--check::before { height: 22px; border-radius: 4px; border: 2px solid var(--c); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent) 0 3px, transparent 3px 7px); }
.dlp-leg + .dlp-leg::after { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--card); border: 2px solid var(--c); z-index: 1; }
.dlp-leg i { position: relative; z-index: 2; font-style: normal; font-size: 12px; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 4px; background: var(--card); color: var(--ink); font-variant-numeric: tabular-nums; }
.dlp-leg--ride i { background: var(--c); color: var(--card); }
.dlp-stop--start { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.dlp-stop--gate { flex: none; margin-left: 6px; background: var(--sign); color: var(--sign-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.dlp-legs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; color: var(--ink2); }
.dlp-legs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dlp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 14px; color: var(--ink2); }
.dlp-key span::before { content: ""; display: inline-block; width: 26px; height: 10px; margin-right: 6px; vertical-align: middle; }
.dlp-key .k-walk::before { height: 4px; background: repeating-linear-gradient(90deg, var(--ink2) 0 6px, transparent 6px 10px); }
.dlp-key .k-check::before { border: 2px solid var(--ink2); border-radius: 3px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink2) 35%, transparent) 0 2px, transparent 2px 5px); }
.dlp-key .k-wait::before { height: 4px; background: radial-gradient(circle, var(--ink2) 2px, transparent 2.5px) 0 50% / 7px 4px repeat-x; }
.dlp-key .k-ride::before { border-radius: 5px; background: var(--ink2); }

/* Lot board */
.dlp-board { background: var(--sign); color: var(--sign-ink); border-radius: 14px; overflow: hidden; }
.dlp-board-row { display: grid; grid-template-columns: 1.3fr 1.3fr 1.4fr .7fr .7fr .8fr 1.6fr; gap: 12px; padding: 14px 18px; border-top: 1px solid rgba(244, 246, 250, .16); font-size: 15px; align-items: start; }
.dlp-board-head { border-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding-block: 12px; }
.dlp-board-lot { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 18px; }
.dlp-board-lot i { font-style: normal; flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--sign-ink); color: var(--sign); display: grid; place-items: center; font-size: 13px; letter-spacing: .02em; }
.dlp-board :where(a) { color: var(--sign-ink); text-decoration-color: var(--gold); }

/* Gate clock */
.dlp-clock { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dlp-clock li { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.dlp-clock li.is-today { border: 2px solid var(--sign); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent); }
.dlp-clock small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.dlp-clock-day { font-family: var(--display); font-weight: 800; font-size: 19px; }
.dlp-clock-day small { text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 600; font-size: 13px; }
.dlp-clock-lots b { font-family: var(--display); font-size: 24px; color: var(--c-tram); font-variant-numeric: tabular-nums; }
.dlp-clock-by b { font-size: 17px; font-variant-numeric: tabular-nums; }
.dlp-clock-parks { font-size: 13.5px; color: var(--ink2); }

/* Ledger */
.dlp-ledger { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--sign); }
.dlp-ledger li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--rule); position: relative; }
.dlp-ledger li::before { content: ""; position: absolute; left: -11px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 3px solid var(--sign); }
.dlp-ledger :is(time, .dlp-when) {font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--c-tram); padding-top: 2px; }
.dlp-ledger h3 { margin: 0 0 4px; font-size: 19px; }
.dlp-ledger p { margin: 0; color: var(--ink2); }

/* Who pays */
.dlp-pays-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.dlp-pays-grid > div { padding: 18px; border-left: 1px solid var(--rule); }
.dlp-pays-grid > div:first-child { border-left: 0; }
.dlp-pays-grid h3 { margin: 0 0 6px; font-size: 19px; }
.dlp-pays-grid p { margin: 0; font-size: 15.5px; color: var(--ink2); }

/* Facts list (spokes) */
.dlp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.dlp-facts > div { background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--sign); border-radius: 4px 4px 12px 12px; padding: 16px; }
.dlp-facts dt { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.dlp-facts dd { margin: 6px 0 0; }
.dlp-facts dd b { display: block; font-family: var(--display); font-size: 22px; line-height: 1.15; margin-bottom: 4px; }

/* Turn by turn steps (spokes) */
.dlp-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; max-width: 820px; }
.dlp-steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.dlp-steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 10px; background: var(--sign); color: var(--sign-ink); font-family: var(--display); font-weight: 800; font-size: 20px; display: grid; place-items: center; }
.dlp-steps h3 { margin: 2px 0 4px; font-size: 18.5px; }
.dlp-steps p { margin: 0; color: var(--ink2); font-size: 16px; }

.dlp-prose { max-width: 760px; }
.dlp-prose h3 { font-size: 21px; margin: 24px 0 6px; }
.dlp-prose p { margin: 0 0 10px; }

/* FAQ */
.dlp-faq details { border-bottom: 1px solid var(--rule); max-width: 860px; }
.dlp-faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 700; font-size: 18px; position: relative; }
.dlp-faq summary::-webkit-details-marker { display: none; }
.dlp-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 26px; color: var(--c-tram); }
.dlp-faq details[open] summary::after { content: "\2212"; }
.dlp-faq details p { margin: 0 0 16px; color: var(--ink2); }

/* Cluster nav */
.dlp-cluster { margin-top: 56px; background: var(--sign); color: var(--sign-ink); border-radius: 16px; padding: 24px; }
.dlp-cluster h2 { color: var(--sign-ink); font-size: 30px; margin: 0 0 14px; }
.dlp-cluster ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dlp-cluster li { border: 1px solid rgba(244, 246, 250, .25); border-radius: 10px; padding: 12px 14px; }
.dlp-cluster li[aria-current] { background: rgba(244, 246, 250, .1); border-color: var(--gold); }
.dlp-cluster li > :where(a), .dlp-cluster li > span { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--sign-ink); text-decoration-color: var(--gold); }
.dlp-cluster small { display: block; font-size: 14px; color: var(--sign-2); margin-top: 2px; }
.dlp-cluster .dlp-cluster-plan { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.dlp-cluster .dlp-cluster-plan li { border: 0; padding: 0; }
.dlp-cluster .dlp-cluster-plan :where(a) { font-family: var(--body); font-size: 15.5px; font-weight: 700; color: var(--gold); }
.dlp-foot { font-size: 14.5px; color: var(--ink2); margin-top: 20px; }

@media (max-width: 980px) {
    .dlp-jump .dlp-wrap { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .dlp-hero-in { grid-template-columns: 1fr; gap: 28px; }
    .dlp-stub { max-width: 460px; }
    .dlp-clock { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .dlp-pays-grid { grid-template-columns: 1fr 1fr; }
    .dlp-pays-grid > div:nth-child(3) { border-left: 0; }
    .dlp-pays-grid > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .dlp-cluster ul { grid-template-columns: 1fr 1fr; }
    .dlp-board-head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .dlp-board-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 16px 18px; }
    .dlp-board-row:nth-child(2) { border-top: 0; }
    .dlp-board-lot { grid-column: 1 / -1; }
    .dlp-board-row [data-l]::before { content: attr(data-l); content: attr(data-l) / ""; display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
    .dlp-facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dlp { font-size: 16.5px; }
    .dlp-answer { font-size: 17px; padding: 14px 16px; }
    .dlp-pays-grid { grid-template-columns: 1fr; }
    .dlp-pays-grid > div { border-left: 0; border-top: 1px solid var(--rule); }
    .dlp-pays-grid > div:first-child { border-top: 0; }
    .dlp-cluster ul { grid-template-columns: 1fr; }
    .dlp-ledger li { grid-template-columns: 1fr; gap: 2px; }
    .dlp-line { padding: 14px 14px 12px; }
    .dlp-track { padding-right: 72px; }
    .dlp-leg i { font-size: 11px; padding: 1px 3px; }
    .dlp-leg.is-short i { display: none; }
    .dlp-stub-foot { flex-direction: column; align-items: flex-start; }
    .dlp-clock { grid-template-columns: 1fr; gap: 6px; }
    .dlp-clock li { grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 4px 10px; padding: 10px 12px; }
    .dlp-clock-parks { grid-column: 1 / -1; }
    .dlp-clock-parks small { display: inline; margin-right: 4px; }
    .dlp-clock-lots b { font-size: 21px; }
}
@media (prefers-reduced-motion: no-preference) {
    .dlp-line .dlp-leg::before { transform-origin: left center; animation: dlp-draw .6s ease-out both; }
    .dlp-line .dlp-leg:nth-child(3)::before { animation-delay: .08s; }
    .dlp-line .dlp-leg:nth-child(4)::before { animation-delay: .16s; }
    .dlp-line .dlp-leg:nth-child(5)::before { animation-delay: .24s; }
    .dlp-line .dlp-leg:nth-child(6)::before { animation-delay: .32s; }
}
@keyframes dlp-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Night garage: the navy sign color sits too close to the card, so lift the edges */
:root[data-theme="dark"] .dlp-clock li.is-today { border-color: var(--gold); }
:root[data-theme="dark"] :is(.dlp-stop--gate, .dlp-steps li::before) { outline: 1px solid var(--sign-2); }
:root[data-theme="dark"] .dlp-map .m-road { fill: #2b4a80; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dlp-map .m-road { fill: #2b4a80; }
    :root:not([data-theme="light"]) .dlp-clock li.is-today { border-color: var(--gold); }
    :root:not([data-theme="light"]) .dlp-stop--gate,
    :root:not([data-theme="light"]) .dlp-steps li::before { outline: 1px solid var(--sign-2); }
}
/* Keep the floating support button off the end of the sticky jump bar */
@media (min-width: 981px) { .dlp-jump .dlp-wrap { padding-right: 190px; } }

/* Mickey and Friends, the per head bars */
.dlp-heads { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; max-width: 820px; }
.dlp-heads li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.dlp-heads li.is-callout { background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
.dlp-heads-n { font-weight: 800; font-size: 15px; }
.dlp-heads-bar { display: flex; align-items: center; height: 30px; }
.dlp-heads-bar b { width: max(var(--w), 2.9em); height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; border-radius: 6px; background: var(--c-walk); color: var(--card); font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; }
.dlp-heads li.is-callout .dlp-heads-bar b { font-size: 20px; }
.dlp-heads-alt { grid-column: 2; font-size: 13.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.dlp-heads-alt i { font-style: normal; margin: 0 4px; }

/* Toy Story, the booth rate bars */
.dlp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 820px; }
.dlp-bars li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-toy) 42%, var(--card)) var(--v), var(--card) var(--v)); border: 1px solid var(--rule); }
.dlp-bars li::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: calc(var(--v) - 2px); width: 4px; border-radius: 2px; background: var(--c-toy); }
.dlp-bars li::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ref); border-left: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); }
.dlp-bars span { font-weight: 700; }
.dlp-bars-tag { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c-toy) 70%, var(--ink)); }
.dlp-bars b { font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }

/* Drop off, the Harbor Blvd approach map */
.dlp-approach { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.dlp-approach .dlp-steps li:nth-child(1)::before { background: var(--gold); color: #121c33; }
.dlp-approach .dlp-steps li:nth-child(2)::before { background: var(--c-tram); color: #fff; }
.dlp-map { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 10px; }
.dlp-map svg { display: block; width: 100%; height: auto; }
.dlp-map figcaption { font-size: 13.5px; color: var(--ink2); margin-top: 6px; }
.dlp-map .m-land { fill: var(--paper); }
.dlp-map .m-esp { fill: color-mix(in srgb, var(--c-drop) 16%, var(--card)); stroke: var(--rule); }
.dlp-map .m-road { fill: var(--sign); }
.dlp-map .m-mid { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 10 8; }
.dlp-map .m-curb { fill: var(--c-drop); }
.dlp-map .m-cross rect { fill: var(--sign-ink); opacity: .55; }
.dlp-map .m-walk { stroke: var(--ink2); stroke-width: 3; stroke-dasharray: 6 6; fill: none; marker-end: none; }
.dlp-map .m-south, .dlp-map .m-north { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dlp-map .m-south { stroke: var(--gold); }
.dlp-map .m-north { stroke: var(--c-tram); }
.dlp-map text { font-family: var(--body); fill: var(--ink); }
.dlp-map .m-lbl { font-family: var(--display); font-weight: 800; font-size: 18px; }
.dlp-map .m-sub { font-size: 12.5px; fill: var(--ink2); }
.dlp-map .m-curb-t { font-size: 12px; font-weight: 800; fill: var(--sign); letter-spacing: .04em; }
.dlp-map .m-road-t { font-size: 12px; font-weight: 800; fill: var(--ink2); letter-spacing: .08em; text-transform: uppercase; }
.dlp-map .m-end { font-size: 11px; font-weight: 700; fill: var(--sign-ink); }
.dlp-map .m-key { font-size: 12px; font-weight: 800; }
.dlp-map .m-key-s { fill: color-mix(in srgb, var(--c-drop) 75%, var(--ink)); }
.dlp-map .m-key-n { fill: var(--c-tram); }
@media (max-width: 760px) {
    .dlp-approach { grid-template-columns: 1fr; }
    .dlp-map { max-width: 360px; }
}
@media (max-width: 560px) {
    .dlp-heads-alt { font-size: 12.5px; }
    .dlp-line.is-muted .dlp-legs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .dlp-line.is-muted { padding-block: 10px; }
    .dlp-line.is-muted .dlp-track { margin-bottom: 0; }
}