/* body main {display:flex;flex-wrap:wrap;justify-content:space-evenly;} */
/* body.station main {flex-direction:row-reverse;} */
/* body.train main {align-items:flex-start;} */






/***************/
/* 2024 AUG 30 */
/* Swap Station-Name for `Starts Here` or `Terminates` if relevant */
.station-trains .startshere .arrives,
.station-trains .terminates .departs
{
    font-size: var(--tiny);
    color: transparent;
}
.station-trains .startshere .arrives .station-name::before,
.station-trains .terminates .departs .station-name::before
{
    /* font-size:var(--small); */
    color:var(--text);
    opacity:0.6;
}
.station-trains .startshere .arrives .station-name::before {
    content:'Starts Here ';
}
.station-trains .terminates .departs .station-name::before {
    content:'Terminates ';
}
/***************/


/* change status cell into a coloured circle */
.station-trains div.status {
    grid-column:status;
    grid-row:span 2;
    /* align-self:stretch; */
    color:transparent;
    background:var(--hue);
    min-height:1ch;
    aspect-ratio:1;
    border-radius:50%;
}
/* show or hide destination/origin */
.station-trains .departs, .station-trains .arrives {display:contents;cursor:pointer;}
.station-trains.departures .arrives {display:none;}
.station-trains.arrivals   .departs {display:none;}

.station-trains .platform {
    grid-column:platform;
    grid-row:span 2;
    /* align-self:stretch; */
}
.station-trains .platform.hidden {opacity:0.1}
.station-trains .platform.hidden:hover {opacity:0.8}
.station-trains .platform.cancelled {
    /* line-height:1.2;    this helps because ✓ html entity isn't centered?!! */
    /* translate:unset; */
    /* width:2rem; */
    /* aspect-ratio:1; */
    /* text-align:center; */
    color:var(--white);
    background:var(--red);
    /* border-radius:25%; */
}
.station-trains > *:has(.cancelled) time, .station-trains > *:has(.cancelled) .station-name {
    opacity: 0.6;   /* fade departure time and station name for cancelled trains */
}

.station-trains time {grid-column:time;}
.station-trains .real-time {
    grid-column:time;
    font-size:var(--smaller);
}

.station-trains .notes {
    grid-column: 2 /-1;
    justify-self: stretch;
    /* margin-inline: 2ch; */
    /* white-space:pre-line; */
    font-size: var(--small);
    opacity: 0.7;
}
/* sub.via {
    display: inline-block;
    font-size: var(--tiny);
    translate: 0 -1.2ch;
    margin-left: 6rem;
} */
.notes > aside {
    margin:unset;
    padding:unset;
}

.station-trains .href {
    grid-column:href;
    grid-row:span 2;
    font-size:var(--smaller);
}

.list-header > * {
    display:inline-block !important;
    width:100%;
    font-size:var(--tiny);
    opacity:0.6;
    background:var(--stripe);
}
.list-header > *:not(.station-name) {
    text-align:center;
}
.grid-spacer {
    grid-column: 1 / -1;
    width:100%;
    height:1ch;
    border:unset;
}
.grid-spacer:first-child {border-top: 1px dotted var(--gridline);}


/* AUGUST 24 : Modal Train Display */
/*dialog.r__modal {*/
/*    width: clamp(360px,64%,480px);*/
/*    min-height: 40vh;*/
/*    margin-block: 6vh auto;*/
/*    margin-inline: auto;*/
/*    border-color: var(--shadow);*/
/*}*/
/*dialog.r__modal::backdrop {*/
/*    background:hsla(34, 17%, 6%, 0.9);*/
/*}*/

/*dialog.r__modal:has(.train-modal) {*/
/*    width:min-content;*/
/*    border:unset;*/
/*    background:transparent;*/
/*}*/
/*.train-modal {*/
/*    display:inline-block;*/
/*    width:clamp(250px, 27ch, 320px);*/
/*    max-width:100%;*/
/*    min-height:520px;*/
/*    margin-inline:auto;*/
/*    padding: 1rem;*/
/*    font-family: monospace;*/
/*    font-variant:small-caps;*/
/*    font-size:var(--medium);*/
/*    background:var(--black);*/
/*    color:var(--white);*/
/*    border: 2px outset var(--shadow);*/
/*}*/
/*.train-modal header {*/
    /* display:flex; */
    /* flex-wrap:wrap; */
    /* justify-content: space-between; */
    /* flex-direction:column-reverse; */
/*    opacity:0.6;*/
/*    font-size:var(--small);*/
/*    margin-bottom:1ch;*/
/*    border-bottom:1px dotted var(--shadow);*/
/*}*/

/* Show only Origin or Destination */
.train-modal.departure .arrives,
.train-modal.arrival .departs
 { display:none !important; }
/* .train-modal.arrival .arrives time::after { */
.train-modal.departure .departs .station-name::before,
.train-modal.arrival .arrives .station-name::before
{
    opacity: 0.6;
    font-family: sans-serif;
    font-variant: normal;
    font-size:var(--small);
}
.train-modal.departure .departs .station-name::before {content:' to ';}
.train-modal.arrival .arrives .station-name::before {content:' from ';}

.train-modal a .station-name {display:inline-block;width:100%;text-align:left;}

.train-modal > a:focus-visible {outline:unset;} /* opening <dialogs> captures focus */
/* .train-modal .platform.confirmed::before {
    content:'Platform ';
    font-family:sans-serif;
    font-variant:normal;
    font-size:var(--smaller);
    opacity:0.6;
} */






/*=^.^=TEMP : html layout not finalised, .tocwork should be on the aside */
aside.extra:has(.tocwork) {text-align: right;white-space: pre-line;font-family: monospace;}


section.station {
	/*font-size:2.8rem;*/
	background: var(--col_station);
	position: relative;
	width: clamp(340px, 90%, 400px);
    min-width:unset;
	margin-inline: auto;
	padding: 1rem;
	/*border: 1px solid hsl(0 0% 50%);*/
}
/* section.station .station-codes {
	display:block;
    margin: 1rem 2rem 1rem auto;
    padding: 0.5rem 1rem;
    width: min-content;
    white-space: pre;
    font-size: var(--small);
    border: 1px solid var(--shadow);
    border-radius: 0.5rem;
} */
section.station .breadcrumb > li {
    display:block;
}



.platform.hidden {
    opacity: 0.2;
}
/* .platform.hidden::after {
    content: '?';
} */
.platform.none {
    opacity:0.5;
    font-size:var(--smaller);
}

.arrdep {
    max-width:100%;
    display: grid;
    /* grid-template-areas: 'arrive origin origin platform_a'
                         'depart destination destination platform_d'
                         'forecast forecast ident delay'
                         'blank notes notes empty'; */
    grid-template-areas: 'arrive origin origin origin'
                         'depart destination destination destination'
                         'forecast forecast ident delay'
                         'blank notes notes empty';
    grid-template-columns: 5ch auto auto 6ch;
    align-items: center;
    justify-items: start;
    padding: 0.5rem 0;
    border-bottom: 1px dotted hsl(0 0% 50%);
}
.daytrip .arrdep {
    grid-template-areas: 'arrive origin origin platform_d'
                         'depart destination destination platform_a'
                         'forecast forecast ident delay'
                         'blank notes notes empty';
}
.arrdep .human-duration,
.arrdep time.a {grid-area:arrive}
.arrdep time.d {grid-area:depart;}
.arrdep .platform {grid-area:platform_d;margin-inline:auto;opacity:0.8}
.arrdep .platform.arr {grid-area:platform_a;margin-inline:auto;opacity:0.8}
.arrdep .platform.hidden {opacity:0.2;}
.arrdep .platform:before {content:'p.\00a0';opacity:0.3;font-size:var(--smaller)}
.arrdep .platform.cancelled {background:var(--col_cancelled);color:var(--white);padding:1ch 0.5ch;border-radius:0.5ch}
.arrdep .platform.past {visibility:collapse;}   /* used when DayTrip Trains are in the past and platfoms are no longer relevant */
.arrdep .forecast {grid-area:forecast;font-size:var(--smaller);}
.arrdep .delay {
    grid-area:delay;
    width:min-content;
    margin-inline:auto;
    text-align:center;
    font-size:var(--smaller);
}
.arrdep .forecast.late,
.arrdep .forecast.delayed {
    padding: 0.2rem 0.5rem;
    border-radius: 0.2rem;
    color:var(--white);
    background: var(--col_late);
}
.arrdep .forecast.delayed {background:var(--col_delayed);}


.ldb-train.late .arrdep .delay {
    outline:2px solid var(--red);
    background:var(--red);
    color:var(--white);
}
.ldb-train.late .arrdep .delay::before {
    content:'exp ';
    font-size:var(--smaller);
}

.arrdep .station-name::before {
	content: '\00a0';
	margin-right:1ch;
    letter-spacing: normal;
	font-family:monospace;
	font-size: var(--tiny);
	white-space:pre;
	opacity:0.5;
}
.arrdep .station-name.origin {grid-area:origin}
.arrdep .station-name.origin::before {content:'from';}

.arrdep .station-name.destination {grid-area:destination}
.arrdep .station-name.destination::before {content:'\00a0to\00a0';}

.arrdep .station-name.dim {font-size:var(--smaller);opacity:0.5;}
.arrdep .station-name.dim::before {content:'\00a0\00a0\00a0\00a0\00a0';}

.arrdep .identity {grid-area:ident;margin-left:auto;font-size:var(--smaller);opacity:0.5;}
.arrdep .notes {
    grid-area:notes;
    margin-top:0.5rem;
    text-align:left;
    font-family:sans-serif;
    font-size:var(--small);
    opacity:0.8;
}

/* "Simple" view hides train identity and notes */
.simple .arrdep .identity {visibility:hidden;}
.simple .arrdep .notes {display:none;}

    .ldb-2024 {width:clamp(360px,100%,400px);margin-inline:auto}
    .ldb-2024 ol {width:98%;margin-inline:auto}
    .ldb-2024 li {
        padding:1rem 0.5rem;
        /* border-bottom:1px dotted var(--shadow) */
    }
    .ldb-2024 .human-duration {text-align:right;}
    /*.ldb-2024 .station-name {font-family:"Raleway", sans-serif}*/
    .ldb-2024 .platform:before{content:unset}


.train_list .cancelled {
	color:var(--red);
}
/* .platform.cancelled {line-height:1rem;translate:0 0.5rem} */



/* 
=============================================================================================================================================================
==========    ====    ====  ====  ==       ===  =======  ==        ==  ====  ========      ===        ====     ===        ==    ====    ====  =======  ======
===========  ====  ==  ===  ====  ==  ====  ==   ======  ==  ========   ==   =======  ====  ==  =========  ===  =====  ======  ====  ==  ===   ======  ======
===========  ===  ====  ==  ====  ==  ====  ==    =====  ==  =========  ==  ========  ====  ==  ========  ===========  ======  ===  ====  ==    =====  ======
===========  ===  ====  ==  ====  ==  ===   ==  ==  ===  ==  =========  ==  =========  =======  ========  ===========  ======  ===  ====  ==  ==  ===  ======
===========  ===  ====  ==  ====  ==      ====  ===  ==  ==      ======    ============  =====      ====  ===========  ======  ===  ====  ==  ===  ==  ======
===========  ===  ====  ==  ====  ==  ====  ==  ====  =  ==  ===========  ===============  ===  ========  ===========  ======  ===  ====  ==  ====  =  ======
======  ===  ===  ====  ==  ====  ==  ====  ==  =====    ==  ===========  ==========  ====  ==  ========  ===========  ======  ===  ====  ==  =====    ======
======  ===  ====  ==  ===   ==   ==  ====  ==  ======   ==  ===========  ==========  ====  ==  =========  ===  =====  ======  ====  ==  ===  ======   ======
=======     ======    =====      ===  ====  ==  =======  ==        =====  ===========      ===        ====     ======  =====    ====    ====  =======  ======
=============================================================================================================================================================
 */
.travelby {
    height:fit-content;
	font-size:2.8rem;
	background: var(--col_journey);
	position: relative;
	width: clamp(340px, 90%, 400px);
	margin-inline: auto;
	padding: 1rem;
	border: 1px solid hsl(0 0% 50%);
}
.travelby header {
    font-family:sans-serif;
    font-size:var(--medium);
}
.travelby header .from:after {
    content: '\a';
    white-space: pre-line;
}


.train {
    --col_journey:var(--col_train);
}
.bus {
    align-self:center;
    --col_journey:var(--col_bus);
}
.ship {
    align-self:center;
    --col_journey:var(--col_ferry);
}
.taxi {
    align-self:center;
    --col_journey:var(--col_taxi);
}

.train-name {font-size:smaller;}

.runDate {
    width: fit-content;
    font-family: sans-serif;
    font-size: var(--smaller);
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--col_train);
    border-radius: 0.5rem;
}
.train-title {
    display: block;
    font-size:var(--small);
    margin-block:1rem;
    padding: 0.5rem 1.5rem;
    background:var(--col_train);
    border-radius: 1rem;
}
.travelby .platform {
    margin-right: 1rem;
    font-size: 1.8rem;
    text-align: right;
}
.train > .platform::before {
    content: 'Platform ';
    font-size: smaller;
}
.train .platform.predicted, .train .platform.hidden {
    opacity: 0.5;
}
/* .train .platform.predicted::after, .train .platform.hidden::after {
    content: '?';
} */
.train > .platform.none::before {content:unset;}


.train-info > .delayed,
.train-info > .cancelled {
    padding-inline:1rem;
    font-family: serif;
    font-size: var(--small);
    /* background: var(--ldb-board);
    color:var(--ldb-text); */
}
.train-info > .delayed::before, .train-info > .cancelled::before {
    display: inline-block;
    height: calc(var(--small) * 1.5);
    aspect-ratio: 1;
    font-size: var(--larger);
    font-family: monospace;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 0.5rem;
    content: '!';
    text-align: center;
}
.train-info > .delayed::before {
    background: var(--col_delayed);
    color: var(--white);
}
.train-info > .cancelled::before {
    background: var(--col_cancelled);
    color: var(--white);
}


/* 
====================================================================================================================================
========     ======  =====  ========  =================       ======  =====        ==        ==        ==       ===  =======  ======
=======  ===  ====    ====  ========  =================  ====  ====    =======  ========  =====  ========  ====  ==   ======  ======
======  =========  ==  ===  ========  =================  ====  ===  ==  ======  ========  =====  ========  ====  ==    =====  ======
======  ========  ====  ==  ========  =================  ====  ==  ====  =====  ========  =====  ========  ===   ==  ==  ===  ======
======  ========  ====  ==  ========  =================       ===  ====  =====  ========  =====      ====      ====  ===  ==  ======
======  ========        ==  ========  =================  ========        =====  ========  =====  ========  ====  ==  ====  =  ======
======  ========  ====  ==  ========  =================  ========  ====  =====  ========  =====  ========  ====  ==  =====    ======
=======  ===  ==  ====  ==  ========  =================  ========  ====  =====  ========  =====  ========  ====  ==  ======   ======
========     ===  ====  ==        ==        =         =  ========  ====  =====  ========  =====        ==  ====  ==  =======  ======
====================================================================================================================================
// pre 2024 */
ol.call_pattern {
    grid-area: calls;
    display: table;
    width: clamp(340px,95%,460px);
    margin-top: 1rem;
    margin-inline: auto;
    padding: 2rem 1rem 2rem 2rem;
    font-size: var(--small);
    background: var(--ldb-board);
    color: var(--ldb-text);
}
ol.call_pattern li {
    display: table-row;
    grid-template-columns: auto 7ch 7ch 2ch;
    padding: 0.5rem 0 0.1rem;
    border-bottom: 1px var(--silver) dashed;
    font-family: monospace;
    /* margin-inline: 20%; */
}
ol.call_pattern li > * {
    display: table-cell;
    padding: 0.5rem 0.2rem;
    vertical-align:middle;
    border-bottom: 1px dashed var(--shadow);
}

/* Adds a Solid Border above joinat & below alight locations
 - remove if first-child (origin) or last-child (destination) 
   ie. only show border line if they're an intermediary station */
   /* NOPE, now just show on .journey styles, remove for allstops to give visual indicator a change has been applied even if journey IS allstops */
ol.call_pattern.journey li.joinat > *:not(.logtime) {border-top: 2px solid var(--shadow);}
ol.call_pattern.journey li.alight > *:not(.logtime) {border-bottom: 2px solid var(--shadow);}
/* ol.call_pattern:not(.calls-listed) li:first-child > *:not(.logtime) {border-top: unset;}
ol.call_pattern:not(.calls-listed) li:last-child > *:not(.logtime) {border-bottom: unset;} */
/* ol.call_pattern.allstops li:first-child > *:not(.logtime) {border-top: unset;} */
/* ol.call_pattern.allstops li:last-child > *:not(.logtime) {border-bottom: unset;} */


ol.call_pattern li.crossing:not(.station) {opacity:0.5;}
ol.call_pattern .crossing .station-name > sub {
	opacity:1;
}

ol.call_pattern li > .station-name {
    width:100%;
    text-align: left;
    font-family: 'Raleway', sans-serif;
}
ol.call_pattern .station-name > sub {
	display:block;
	text-align:center;
	font-size:var(--smaller);
	opacity:0.5;
}
ol.call_pattern li > time {
    width:5ch;
}
ol.call_pattern li > time:last-of-type::after {
    content: '\00A0';
}
/* ol.call_pattern time::before, time::after {
    margin-inline: 0.2rem;
    font-family: monospace;
    font-size: 1.2rem;
    opacity: 0.4;
} */
ol.call_pattern li > .arrive::before {
    content: 'a';
}
ol.call_pattern li > .depart::before {
    content: 'd';
}
ol.call_pattern:not(.tiplocs) li > .collapse {
    color:var(--ldb-board); /* Fake Collapse because visibility:collapse hides a border that we want to keep */
}

/* fade ghost & tiploc items */
ol.call_pattern > li.ghost  {opacity:0.8;}
ol.call_pattern > li.tiploc {opacity:0.6;}

ol.call_pattern .logtime {
    /* text-align: right; */
    text-align: center;
    min-width: 3ch;
    outline:2px solid var(--ldb-board);
}
ol.call_pattern .logtime.on-time {
    color:var(--green);
}
ol.call_pattern .logtime.cancelled {
    color:var(--white);
    background:var(--col_delayed);
    padding:0.5rem;
    /* border:1px solid var(--white); */
    border-radius:0.2rem;
    line-height:1ch;
}
ol.call_pattern .logtime.delayed,
ol.call_pattern .logtime.cancelled {
    color:var(--white);
    background:var(--col_delayed);
}


/* show/hide ghosts & tiplocs based on list style */
ol.call_pattern.calls-listed > li.ghost,
ol.call_pattern.journey > li.ghost {
        display: none;
}
ol.call_pattern.calls-listed > li.tiploc,
ol.call_pattern.allstops > li.tiploc,
ol.call_pattern.journey > li.tiploc {
        display: none;
}

/*
===========================================================================================================================================================
========     ======  =====  ========  =========      ==========     =====    ====  ========  ===========  =====       ====      ===        ==       =======
=======  ===  ====    ====  ========  ========  ====  ========  ===  ===  ==  ===  ========  ==========    ====  ====  ==  ====  ==  ========  ====  ======
======  =========  ==  ===  ========  ========  ====  =======  ========  ====  ==  ========  =========  ==  ===  ====  ==  ====  ==  ========  ====  ======
======  ========  ====  ==  ========  =========  ============  ========  ====  ==  ========  ========  ====  ==  ====  ===  =======  ========  ====  ======
======  ========  ====  ==  ========  ===========  ==========  ========  ====  ==  ========  ========  ====  ==       ======  =====      ====  ====  ======
======  ========        ==  ========  =============  ========  ========  ====  ==  ========  ========        ==  =============  ===  ========  ====  ======
======  ========  ====  ==  ========  ========  ====  =======  ========  ====  ==  ========  ========  ====  ==  ========  ====  ==  ========  ====  ======
=======  ===  ==  ====  ==  ========  ========  ====  ========  ===  ===  ==  ===  ========  ========  ====  ==  ========  ====  ==  ========  ====  ======
========     ===  ====  ==        ==        ===      ==========     =====    ====        ==        ==  ====  ==  =========      ===        ==       =======
===========================================================================================================================================================
// 2024 JUL 03 */
ol.call_pattern.calls-listed {
    display: flex;
    flex-wrap: wrap;
    padding: unset;
    background: transparent;
    color:inherit;
}
ol.call_pattern.calls-listed:before {
    content: 'Calling at:\00a0\00a0';
} 
ol.call_pattern.calls-listed > li,
ol.call_pattern.calls-listed li > * {
    padding: unset;
    border-bottom:unset;
}

ol.call_pattern.calls-listed > li > :not(.station-name) {
    display: none;
}
ol.call_pattern.calls-listed li:first-child,
ol.call_pattern.calls-listed li.joinat {
    display: none;
}
ol.call_pattern.calls-listed > li > .station-name:after {
    content: ',\00a0';
}
ol.call_pattern.calls-listed > li:last-child > .station-name:after,
ol.call_pattern.calls-listed > li.alight > .station-name:after {
    content: unset;
}
/* ol.call_pattern.calls-listed > li:last-child > .station-name:before,
ol.call_pattern.calls-listed > li.alight > .station-name:before {
    content: 'and\00a0';
} */
/* last displayed station call is complicated to figure in css */
ol.call_pattern.calls-listed > li:last-child > .station-name:after {
    content: ' only';
}
ol.call_pattern.calls-listed:has(.call:not(.ghost):not(.alight):not(.joinat)) > li:last-child > .station-name:after {
        content: unset;
}
ol.call_pattern.calls-listed:has(.call:not(.ghost):not(.alight):not(.joinat)) > li:last-child > .station-name:before,
ol.call_pattern.calls-listed:has(.call:not(.ghost):not(.alight):not(.joinat)) > li.alight > .station-name:before {
        content: 'and\00a0';
}

.station footer,
.travelby footer,
.train footer {
    margin-bottom:1rem;
    font-size: var(--small);
    text-align: right;
}
p {
    margin: 0.5rem 0px 0.25rem;
    padding: 0.5rem 1rem;
}

.logtime > .tiny {font-size:var(--tiny)}

/* Station|Train Search & Auto-Complete */
form[class^="search"] {
    max-width: 300px;
    margin-inline: auto;
    font-size:var(--medium);
}
form[class^="search"] > * { width:100%;margin:0.5rem auto;}
form[class^="search"] > * > * { width:100%;margin-inline: auto;}



/* 
======================================================================================================================================================================
======       ======  =====  ====  ==        ==       ===    ==       ========    ==        ==    ==  =======  ==        ==       ======  =====       ===  ====  ======
======  ====  ====    ====   ==   =====  =====  ====  ===  ===  ====  ========  ======  ======  ===   ======  ==  ========  ====  ====    ====  ====  ==   ==   ======
======  ====  ===  ==  ====  ==  ======  =====  ====  ===  ===  ====  ========  ======  ======  ===    =====  ==  ========  ====  ===  ==  ===  ====  ===  ==  =======
======  ====  ==  ====  ===  ==  ======  =====  ===   ===  ===  ====  ========  ======  ======  ===  ==  ===  ==  ========  ===   ==  ====  ==  ===   ===  ==  =======
======  ====  ==  ====  ====    =======  =====      =====  ===       =========  ======  ======  ===  ===  ==  ==      ====      ====  ====  ==      ======    ========
======  ====  ==        =====  ========  =====  ====  ===  ===  ==============  ======  ======  ===  ====  =  ==  ========  ====  ==        ==  ====  =====  =========
======  ====  ==  ====  =====  ========  =====  ====  ===  ===  ==============  ======  ======  ===  =====    ==  ========  ====  ==  ====  ==  ====  =====  =========
======  ====  ==  ====  =====  ========  =====  ====  ===  ===  ==============  ======  ======  ===  ======   ==  ========  ====  ==  ====  ==  ====  =====  =========
======       ===  ====  =====  ========  =====  ====  ==    ==  =============    =====  =====    ==  =======  ==        ==  ====  ==  ====  ==  ====  =====  =========
======================================================================================================================================================================
 */
 .itinerary {
    max-width:390px;
    margin-inline: auto;
}
.itinerary > * {
    border-radius:1ch;
    /* margin-block:1ch; */
    text-align:center;
    padding:1rem;
}

.itinerary > .bookend {
    margin-block:2ch;
    white-space: pre-line;
    background:hsla(45, 50%, 50%, 0.5);
}

.itinerary .arrdep .station-name.origin::before,
.itinerary .arrdep .station-name.destination::before
 {font-size:25%;content: '\00A0';}

.itinerary .ldb-train > a {
    font-size:120%;
    /* border:3px solid var(--col_train);
    padding-left:1ch !important; */
}
.arrdep:hover {box-shadow:unset;}
.itinerary > .work-duties {
    width:80%;
    margin:0 auto;
    padding:0.5ch;
    font-size:var(--smaller);
    border-color:var(--shadow) var(--gray);
    border-style:dotted solid;
    border-width:1px 2px;
    border-radius:0;
}
.itinerary > .connection {
    width:80%;
    margin:0 auto;
    padding:0.5ch;
    font-size:var(--smaller);
    background:var(--col_passive);
}
.explore {background:var(--col_explore);}

.itinerary > .journey {
    background:var(--col_journey);
}