/*
 * East Coast Muslim: The Road (the road module's own stylesheet, loaded only on Road pages, state pages' I-95
 * section and the city pages' "Passing through" door). Interstate green (--road) appears only here, so it always
 * means "you are traveling". Every class carries the rd- prefix (no other stylesheet uses it); everything else is the
 * UI kit's. Tokens only, so the dark theme follows. Phone first: one column at 320 and 390, more from 760 and 1024.
 * Every element toggled with the hidden attribute has its own [hidden] guard.
 */

/* Page head on Deep Water */
.ecm-hero.rd-hero{border-bottom:6px solid var(--road)}
.rd-hero .ecm-hero__inner{display:flex;flex-direction:column;gap:var(--sp-4)}
.rd-hero .ecm-hero__inner > *{margin:0}
.rd-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);margin:var(--sp-2) 0 0;max-width:66rem}
@media (min-width:760px){.rd-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rd-stats > div{display:flex;flex-direction:column;gap:.2rem;padding-top:var(--sp-3);border-top:3px solid var(--road)}
.rd-stats dt{order:2;font-size:var(--fs-sm);line-height:1.35;color:var(--on-deep-muted,var(--muted))}
.rd-stats dd{order:1;margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(1.625rem,1.3rem + 1.3vw,2.25rem);line-height:1.1}
.rd-jumps{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);list-style:none;margin:0;padding:0;font-weight:700}
.rd-jumps a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px}
.rd-jumps .ecm-icon{width:1.125rem;height:1.125rem}

/* Exit by exit: a rail with a station for each listed exit */
.rd-exits-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-5)}
.rd-exits-head h2{margin:0 0 var(--sp-2)}
.rd-exits-head p{margin:0 0 var(--sp-1);color:var(--muted);max-width:52ch}
.rd-dir{display:inline-flex;border:2px solid var(--road);border-radius:var(--radius-m);overflow:hidden;flex:none}
.rd-dir[hidden]{display:none}
.rd-dir button{min-height:44px;padding:.5rem .9rem .4rem;background:var(--surface);color:var(--ink);border:0;font:inherit;font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.rd-dir button + button{border-left:2px solid var(--road)}
.rd-dir button[aria-pressed="true"]{background:var(--road);color:var(--on-road)}
.rd-dir button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.rd-layout{align-items:start}
.rd-main{min-width:0}
.rd-route{--rail:14px;position:relative;list-style:none;margin:0;padding:0}
.rd-route::before{content:"";position:absolute;left:calc(var(--rail) - 2px);top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--road)}
.rd-route > li{position:relative;padding-left:2.75rem;scroll-margin-top:calc(var(--header-h) + 16px)}
.rd-dot{position:absolute;left:calc(var(--rail) - 10px);top:.35rem;width:20px;height:20px;border-radius:50%;background:var(--bg);border:4px solid var(--road);z-index:1}
.rd-end .rd-dot{border-radius:4px;background:var(--road)}
.rd-gap{padding-block:var(--sp-3) var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--muted);letter-spacing:.02em}
.rd-stop{padding-bottom:var(--sp-4)}
.rd-stop > *{margin:0}
.rd-stop__head{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem}
.rd-stop__head h3{margin:0;font-size:var(--fs-h3);font-weight:800;line-height:1.2}
.rd-end .rd-stop__head h3{font-size:var(--fs-h4)}
.rd-stop__roads{margin-top:.25rem!important;font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.rd-stop__links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-2)!important;font-size:var(--fs-sm);font-weight:700}
.rd-stop__links a{display:inline-flex;align-items:center;min-height:44px}
.rd-nw{white-space:nowrap}

/* A place near a ramp */
.rd-near{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.rd-near__item{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);align-items:start;padding:var(--sp-3);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-m)}
.rd-near__item--featured{border-color:var(--accent);box-shadow:inset 0 4px 0 var(--accent)}
.rd-near__item--stale{background:var(--bg);border-style:dashed;border-color:var(--line)}
.rd-near__icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--tint);color:var(--link)}
.rd-near__icon .ecm-icon{width:1.25rem;height:1.25rem}
.rd-near__body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.rd-near__body > p{margin:0}
.rd-near__name{font-weight:800;font-size:1.0625rem;line-height:1.3;overflow-wrap:anywhere}
.rd-near__item--stale .rd-near__name{color:var(--muted)}
.rd-near__what{font-size:var(--fs-sm);color:var(--muted)}
.rd-near__min{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--muted);white-space:nowrap;padding-top:.15rem}
.rd-near__min .ecm-time{font-size:1.0625rem;font-weight:700;color:var(--ink)}

/* The overview strip: before the list on phones (folded), a sticky side column from 1024 px */
.rd-aside{min-width:0;margin-bottom:var(--sp-5)}
.rd-overview > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:48px;padding:.6rem var(--sp-4) .5rem;background:var(--surface);border:2px solid var(--road);border-radius:var(--radius-m);font-weight:800;cursor:pointer;list-style:none}
.rd-overview > summary::-webkit-details-marker{display:none}
.rd-overview > summary .ecm-icon{color:var(--road);transition:transform var(--dur) var(--ease-out)}
.rd-overview[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.rd-overview[open] > summary .ecm-icon{transform:rotate(180deg)}
.rd-overview[open] > .ecm-strip{border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.rd-overview .ecm-strip__stop{min-height:40px}
.rd-overview .ecm-strip__exit .ecm-tag{min-width:4.6rem;justify-content:center}
.rd-overview .ecm-strip__meta{flex-basis:100%}
@media (min-width:1024px){
  .rd-aside{margin-bottom:0}
  .rd-layout > .rd-aside{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + var(--sp-4));max-height:calc(100vh - var(--header-h) - var(--sp-6));overflow:auto;overscroll-behavior:contain}
  .rd-layout > .rd-main{grid-column:1;grid-row:1}
  .rd-overview > summary{display:none}
  .rd-overview[open] > .ecm-strip{border-top:1px solid var(--rule);border-radius:var(--radius-m);border-left:6px solid var(--road)}
}

/* Every exit, as a table */
.rd-all{margin-top:var(--sp-6)}
.rd-all > summary,.rd-how > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:48px;padding:.6rem var(--sp-4) .5rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-m);font-weight:800;cursor:pointer;list-style:none}
.rd-all > summary::-webkit-details-marker,.rd-how > summary::-webkit-details-marker{display:none}
.rd-all > summary .ecm-icon,.rd-how > summary .ecm-icon{flex:none;transition:transform var(--dur) var(--ease-out)}
.rd-all[open] > summary .ecm-icon,.rd-how[open] > summary .ecm-icon{transform:rotate(180deg)}
.rd-all .ecm-table-wrap{margin-top:var(--sp-3)}
.rd-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--surface)}
.rd-table caption{text-align:left;font-weight:700;padding:var(--sp-2) 0}
.rd-table th,.rd-table td{padding:.55rem .6rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.rd-table thead th{background:var(--tint);font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-label)}
.rd-table__signs{min-width:12rem;color:var(--muted)}
.rd-table tr{scroll-margin-top:calc(var(--header-h) + 16px)}
.rd-credit{margin-top:var(--sp-4);color:var(--muted)}
.rd-none{margin-bottom:var(--sp-5)}

/* /road/ and the state pages */
.rd-states{list-style:none;margin:0;padding:0}
.rd-state{border-top:4px solid var(--road)}
.rd-state-sum{max-width:var(--measure);margin:0 0 var(--sp-4)}
.rd-state-strip{margin-bottom:var(--sp-4);max-width:44rem}
.rd-state-cta{margin:0}
.rd-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4) var(--sp-5);padding:var(--sp-5);background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--road);border-radius:var(--radius-m)}
.rd-cta__text{max-width:46rem;min-width:0}
.rd-cta__text > *{margin:0 0 var(--sp-2)}
.rd-cta__examples{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);list-style:none;padding:0;font-weight:700}
.rd-cta__examples a{display:inline-flex;align-items:center;gap:.3rem;min-height:44px}
.rd-cta__examples .ecm-icon{width:1rem;height:1rem}

/* Trip prayer planner */
.rd-planner__head{display:flex;flex-direction:column;gap:var(--sp-2);max-width:var(--measure);margin-bottom:var(--sp-5)}
.rd-planner__head > *{margin:0}
.rd-trip{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.rd-trip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.rd-form{max-width:40rem;padding:var(--sp-4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-m)}
@media (min-width:760px){.rd-form{padding:var(--sp-5)}}
.rd-form__when{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.rd-form__when .ecm-input{flex:1 1 14rem;min-width:0}
.rd-now[hidden]{display:none}
.rd-form .ecm-select{max-width:100%}
.rd-how{margin-top:var(--sp-6);max-width:var(--measure)}
.rd-how__body{padding:var(--sp-4) var(--sp-4) 0}
.rd-how__body p{margin:0 0 var(--sp-3)}

/* The two paces: radio buttons and CSS, no script */
.rd-plans{position:relative}
.rd-pace__input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rd-pace{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.rd-pace__label{flex-basis:100%;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.rd-pace__opt{display:flex;flex-direction:column;gap:.1rem;flex:1 1 12rem;min-height:44px;padding:.6rem .8rem .5rem;border:2px solid var(--road);border-radius:var(--radius-m);background:var(--surface);color:var(--ink);cursor:pointer}
.rd-pace__opt span{font-size:var(--fs-xs);color:var(--muted)}
#rd-pace-steady:checked ~ .rd-pace label[for="rd-pace-steady"],#rd-pace-easy:checked ~ .rd-pace label[for="rd-pace-easy"]{background:var(--road);color:var(--on-road)}
#rd-pace-steady:checked ~ .rd-pace label[for="rd-pace-steady"] span,#rd-pace-easy:checked ~ .rd-pace label[for="rd-pace-easy"] span{color:var(--on-road)}
#rd-pace-steady:focus-visible ~ .rd-pace label[for="rd-pace-steady"],#rd-pace-easy:focus-visible ~ .rd-pace label[for="rd-pace-easy"]{outline:3px solid var(--focus);outline-offset:2px}
#rd-pace-steady:checked ~ .rd-plan--easy,#rd-pace-easy:checked ~ .rd-plan--steady{display:none}

.rd-plan{background:var(--surface);border:1px solid var(--rule);border-top:6px solid var(--road);border-radius:var(--radius-m);padding:var(--sp-4) var(--sp-4) var(--sp-5)}
@media (min-width:760px){.rd-plan{padding:var(--sp-5) var(--sp-5) var(--sp-6)}}
.rd-plan > p,.rd-plan > h2{margin:0}
.rd-plan .ecm-eyebrow{margin-bottom:var(--sp-2)}
.rd-plan__title{font-size:var(--fs-h3);margin-bottom:var(--sp-2)!important}
.rd-plan__sum{max-width:var(--measure)}
.rd-plan__legs{margin:var(--sp-3) 0 0;padding-left:1.1rem;font-size:var(--fs-sm);color:var(--muted)}
.rd-plan__legs li + li{margin-top:.2rem}
.rd-plan__list{list-style:none;margin:var(--sp-4) 0;padding:0}
.rd-plan__item{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--rule)}
.rd-plan__item:last-child{border-bottom:1px solid var(--rule)}
.rd-plan__time{font-size:1.0625rem;font-weight:700;white-space:nowrap;padding-top:.05rem}
.rd-plan__body{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.rd-plan__body p{margin:0;font-size:var(--fs-sm)}
.rd-plan__name{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;font-size:1.0625rem!important}
.rd-plan__name b{font-weight:800}
.rd-plan__stop{font-size:var(--fs-base)!important}
.rd-plan__none{font-weight:700}
.rd-when{display:inline-flex;align-items:center;padding:.12rem .45rem .05rem;border:1px solid var(--rule);border-radius:var(--radius-s);background:var(--bg);color:var(--muted);font-size:var(--fs-xs);font-weight:700;line-height:1.45}
.rd-when--road{background:var(--road);border-color:var(--road);color:var(--on-road)}
.rd-when--now{background:var(--accent-tint);border-color:var(--accent);color:var(--ink)}
.rd-plan__item.is-before .rd-plan__time,.rd-plan__item.is-after .rd-plan__time{color:var(--muted)}
.rd-plan__item.is-road{background:var(--bg);box-shadow:inset 4px 0 0 var(--road);padding-left:var(--sp-3)}
.rd-plan__foot{font-size:var(--fs-xs);color:var(--muted)}
@media (max-width:359px){.rd-plan__item{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}}

/* Airports */
.rd-deep{padding:var(--sp-4);border-radius:var(--radius-m);background:var(--deep);border-left:6px solid var(--road)}
@media (min-width:760px){.rd-deep{padding:var(--sp-5)}}
.rd-nearby{list-style:none;margin:0;padding:0}
.rd-airports__state{margin:var(--sp-6) 0 var(--sp-3)}
.rd-airport__room{margin:0;font-size:var(--fs-sm)}
.rd-airport__guide{margin:var(--sp-2) 0 0}
.rd-airports{list-style:none;margin:0;padding:0}
.rd-airport{border-top:4px solid var(--road)}
.rd-rooms{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.rd-room{padding:var(--sp-4);background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--road);border-radius:var(--radius-m)}
.rd-room > *{margin:0}
.rd-room > * + *{margin-top:var(--sp-2)}
.rd-room__name{font-size:var(--fs-h3);font-weight:800}
.rd-source{font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}
.rd-unknown{max-width:var(--measure)}

/* Saved cities */
.rd-saved{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.rd-saved[hidden],.rd-saved-empty[hidden],.rd-saved-off[hidden],.rd-save[hidden],.rd-save-msg[hidden]{display:none}
.rd-saved__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);padding:var(--sp-4);background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--road);border-radius:var(--radius-m)}
.rd-saved__item a{font-weight:800;font-size:1.0625rem}
.rd-saved__when{font-size:var(--fs-xs);color:var(--muted);margin:0}
.rd-saved__remove{min-height:44px}
.rd-save{display:inline-flex;align-items:center;gap:.4rem}
.rd-save-msg{display:block;margin:var(--sp-2) 0 0;font-size:var(--fs-sm)}
.rd-steps{margin:0;padding-left:1.25rem;max-width:var(--measure)}
.rd-steps li + li{margin-top:var(--sp-2)}
.rd-saved__how{margin:var(--sp-7) 0 var(--sp-3)}
.rd-saved__privacy{margin:var(--sp-4) 0 0;max-width:var(--measure);color:var(--muted)}
.rd-offline{margin:var(--sp-4) auto;max-width:calc(var(--max) - 2 * var(--gutter))}