/* CORE R__AILWAY PROJECT STYLES */
/* 2025 JUL 24 : File Split for Development Purposes */
/* @import url('https://spoiltcat.com/r__/-css/rail-train-pid.css?v2'); */
/* @import url('https://spoiltcat.com/r__/-css/rail-station-calls.css?v2'); */

:root {
    /* RAILWAY COLORS */
    --col_brred: hsl(2, 70%, 54%);
    --col_srblu: hsl(217, 100%, 20%);

    --color_scotland: hsl(217, 100%, 20%);
    --color_wales: hsl(148, 64%, 35%);
    --color_england: hsl(354, 85%, 44%);

    --color-station:hsla(210, 25%, 50%, 0.5);
    --col_station:var(--color-station);

    /* TRAVEL TYPE & DAY TRIP COLORS */
    --col_explore:hsla(90, 25%, 50%, 0.5);
    --col_passive:hsla(300, 100%, 80%, 0.2);
    --color-train:  hsla(210, 25%, 50%, 0.5);
    --col_train:  var(--color-train);
    --col_subway: hsla(30, 80%, 50%, 0.5);
    --col_ferry:  hsla(180, 80%, 20%, 0.5);
    /* --col_ship:   var(--col_ferry);             2024 OCT 06 : Required by Ferry Dog pages */
    --col_bus:    hsla(270, 40%, 60%, 0.5);
    --col_tram:   hsla(0, 0%, 60%, 0.5);
    --col_taxi:   hsla(0, 0%, 0%, 0.5);
    --col_canx:   hsla(0, 25%, 50%, 0.5);

    /* DEPARTURE BOARD COLORS */
    --ldb-board: black;
    --ldb-text: ghostwhite;
    --ldb-ontime: green;
    --color-late: darkgoldenrod;
    --color-delayed: darkred;
    --color-cancelled: firebrick;

    /* =^.^=OBSOLETE : 2025 MAR 29 : use hyphenated versions */
    --ldb_board: var(--ldb-board);
    --ldb_text: var(--ldb-text);
    --col_late: var(--color-late);
    --col_delayed: var(--color-delayed);
    --col_cancelled: var(--color-cancelled);

    /* DEFAULT (FONT) SIZES (1rem should equal 10px) */
    --rfs-1: 1.0rem;    /* tiny */
    --rfs-1a: 1.2rem;    /* smaller */
    --rfs-2: 1.4rem;    /* small */
    --rfs-3: 1.6rem;    /* regular */
    --rfs-4: 1.8rem;    /* big */
    --rfs-5: 2.4rem;    /* large */
    --rfs-6: 3.4rem;    /* huge */
    --rfs-9:   9rem;    /* massive (for icons, not text pls!) */
    --rfs-12: 12rem;    /* super-massive (for large icons, not text. NEVER text!!) */
    
}
@media (prefers-color-scheme: light) {
    :root {
        --ldb-board: whitesmoke;
        --ldb-text: black;
        }
}

/* CSS Reset Options */
*, *::before, *::after { box-sizing: border-box; }
* { margin:unset; padding:unset; font:inherit; }
html {font-size:62.5%;}


.card-journey {
    width: clamp(360px, 96%, 460px);
}
/* STATION NAME & TITLE */
station-name, .station-name {
    font-family: Raleway, Arial, sans-serif;
    width: max-content;
    margin-right:auto;
}
h1.station-name {
    width:94%;
    margin-inline:auto;
    letter-spacing:0.1ch;
}


section.station > .station-info {padding:1rem;}
section.station > footer {margin-left: auto;}
/* Station Codes Info Panel*/
.station-codes {
    margin-inline:auto;
    /* margin: 1rem 2rem 1rem auto; */
    padding: 0.5rem 1rem;
    border: 1px solid var(--shadow);
    border-radius: 0.5rem;
}
.station-codes *:first-child {
    text-align: center;
    white-space: pre-line;
    padding:1rem;
}
figure.station-codes > figcaption {
    opacity:0.4;
}
figure.station-codes:hover > figcaption {
    opacity:1;
    scale: 1 !important;
}

/* =================================================================================================================================================
=======      ===        =====  =====        ==    ====    ====  =======  ============        ==       ======  =====    ==  =======  ===      =======
======  ====  =====  =======    =======  ======  ====  ==  ===   ======  ===============  =====  ====  ====    =====  ===   ======  ==  ====  ======
======  ====  =====  ======  ==  ======  ======  ===  ====  ==    =====  ===============  =====  ====  ===  ==  ====  ===    =====  ==  ====  ======
=======  ==========  =====  ====  =====  ======  ===  ====  ==  ==  ===  ===============  =====  ===   ==  ====  ===  ===  ==  ===  ===  ===========
=========  ========  =====  ====  =====  ======  ===  ====  ==  ===  ==  ==        =====  =====      ====  ====  ===  ===  ===  ==  =====  =========
===========  ======  =====        =====  ======  ===  ====  ==  ====  =  ===============  =====  ====  ==        ===  ===  ====  =  =======  =======
======  ====  =====  =====  ====  =====  ======  ===  ====  ==  =====    ===============  =====  ====  ==  ====  ===  ===  =====    ==  ====  ======
======  ====  =====  =====  ====  =====  ======  ====  ==  ===  ======   ===============  =====  ====  ==  ====  ===  ===  ======   ==  ====  ======
=======      ======  =====  ====  =====  =====    ====    ====  =======  ===============  =====  ====  ==  ====  ==    ==  =======  ===      =======
====================================================================================================================================================
2024 AUG 30 : Core Departures & Arrivals Board Style (Station pages; a list of Trains)
2025 JUL 24 : CHECKED IN USE (.station-trains & train-at-station) for core LDBs (ajax-ldp.php & ldbs-cis-header.php)
*/
/* 2024 AUG 30 : [BETA] check okay */
/* AUG 24 Departures/Arrivals Board Styles */
.station-trains {
    display: grid;
    grid-template-columns: [status] 2ch [platform] 5ch [time] 6ch [station] 1fr [href] 2rem;
    align-items: center;
    justify-items: center;
}
.station-trains:first-child { margin-top:2ch; } /* ie. the header row */
.station-trains > * {display:contents;}         /* ignore containers for grid layout */
.station-trains .station-name {width:100%}      /* used to extend href link target beyond text */



/* 2024 SEP 01 */
/* TRAIN AT STATION : a container for arrival & departure details
/* $wrapper can be any html element passed by variable. Includes `<a href="$href"></a>` option
    <$wrapper>
        <div class="platform">[0-9]</div>
        <div class="arrives">
            <time class="a">[HH:mm|null]</time>
            <span class="station-name origin">Station Name</span>
        </div>
        <div class="departs">
            <time class="d">[HH:mm|null]</time>
            <div class="station-name destination">Station Name</div>
            [[<sub class="via">via Station</sub>]]
        </div>
    </$wrapper>
 */
.train-at-station {display:contents;}  /* use contents in grid layout */
.train-at-station .via {
    grid-column: station;
    margin-inline: 1rem auto;
    font-size: clamp(var(--tiny), var(--smaller), var(--small));
    opacity: 0.67;
}

.train-at-station .delay {display:contents;}
.train-at-station .delay > * {
    opacity:0.8;
    font-style:italic;
    font-size:var(--smaller);
}
.train-at-station .delay > aside {grid-column:status / time;}
.train-at-station .delay > time {grid-column:time;}
.train-at-station .delay .reason {margin-right:auto;}

/* TRAIN AT STATION : WITHIN MODAL */
.train-modal > .train-at-station {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-content: flex-start;
    justify-content: space-between;
    min-height: 5.5ch;
    font-size: 2.4rem;
    border-bottom: 1px dotted var(--shadow);
}
.train-modal .train-at-station > *:not(.platform) {
    display:contents;
}
.train-modal .train-at-station .delay {
    display:flex;
    flex-wrap:wrap;
    flex-direction: row-reverse;
    justify-content: space-around;
    margin-top:1ch;
    font-family: sans-serif;
    font-variant: normal;
    font-size:var(--smaller);
}
.train-modal .train-at-station .delay > time::before {
    content:var(--tense);
    opacity: 0.6;
}





/* 2025 MARCH : BETA STYLES */
.allox {
    grid-column: 1/-1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
figure.traction-graphic {
    margin-inline:auto 1rem;
    display: grid;
    justify-items: end;
    max-width:96%;
    overflow-x: auto;
    scrollbar-width: thin;
}
figure.traction-graphic .formation {display:flex;}
figure.traction-graphic img {
    max-height: 8px;
}
figure.traction-graphic > figcaption {
    grid-column: 1/-1;
}

dialog.modal-pid {
    width:min(360px,98%);
    min-height: 64svh;
    max-height: calc(100svh - 5rem);
    /* display: grid; */
    align-items:center;
    margin: 3rem auto;
    overflow: auto;
    border:1px solid hsl(from currentColor h s l /0.2);
    border-radius: 2px;
}
dialog[open].modal-pid {
    display: grid;
    align-items: start;
}
dialog.modal-pid:focus-visible {
    outline: unset;
}
dialog.modal-pid .pid-reload {
    min-height: calc(var(--rfs-1)*20);
    /* aspect-ratio: 3/4; */
}
dialog.modal-pid::backdrop {
    background-color: hsla(0, 0%, 0%, 0.9);
}
body:has(.modal-pid:open) {
    overflow: hidden;
}
.pid-reload.waiting-for-server {
    min-height: 200px;
    /* height: unset !important; */
    /* aspect-ratio: 3/4; */
}

section.daytrip, section.planner, section.itinerary {
    width: min(390px,96%);
}

.source-info {
    position:absolute;
    bottom:0;
    left:0;
    position-anchor: --pid-data-attribution;
    inset-inline-start: anchor(inside);
    inset-block-end: anchor(inside);
    width: fit-content;
    padding: 0.2rem 1rem;
    font-size: calc(var(--rfs-1)*.8);
    font-family: serif;
    font-variant: normal;
    font-style:italic;
    opacity: 0.5;
}
.source-info.cached {
    outline: 1px solid hsl(from currentColor h s l /0.2);
    background: hsl(from currentColor h s l /0.05);
    border-radius: 2px;
    opacity: 0;
}
*:has(.source-info):hover > .source-info.cached {
    opacity: 1;
}

/* CopyPaste of .pid-train */
.cis-station {
    position: relative;
    display: flex;
    flex-direction: column;
    width:min(calc(var(--rfs-1)*42), 100%); /* calc default of 420px, smaller only if no space */
    margin:auto;
    padding:1rem;
    background:var(--ldb-board);
    color:var(--ldb-text);
    border-radius:2px;
    /* font-family: monospace; */
}
.pid-train img.refresh,
.cis-station img.refresh {
    position: absolute;
    cursor: pointer;
    height: 2rem;
    mix-blend-mode: darken;
}
.past .pid-train img.refresh {display: none;}   /* don't show refresh if train is classed "in the past" */
.pid-train img.refresh {
    animation: delayed-fade-in 5s;
}
.cis-station img.refresh {
    animation: delayed-fade-in 30s;
    margin: 2px 0.5rem;
}
.cis-station .platform.cancelled {
    padding: 2px;
    border-radius: 2px;
    font-family: 'Noto Emoji', emoji;
    background: var(--color-cancelled);
    color: var(--white);
}
.cis-station *li:has(.cancelled) .allox {
    color: transparent;
}

.cis-station .tocwork {
    display: block;
    /* margin-left: auto; */
    white-space: pre-line;
    font-family: monospace;
    text-align: right;
    font-size: var(--rfs-1);
}

.blog-card.rbc-journey:nth-child(even) .scml-grid {grid-template-columns: 3fr 1fr !important;}
.blog-card.rbc-journey:nth-child(even) .scml-grid > *:first-child {order: 2;}

/* 2025 DAY TRIP TRAINS */
/* .daytrip .blog-card {display: contents; scale: 1.2;} */
.daytrip .blog-date {display: none;}
.daytrip .blog-card > .scml-grid {column-gap: 6px;}
.daytrip .nophoto {display: none;}
.daytrip .nophoto+.rbc-fromto {    /* no photo thumbnail so stretch this out */
    grid-column: 1/-1;
    font-size: var(--rfs-4);
    max-width:40rem;
}

/* ================================================================================================================
======        ==       ======  =====    ==  =======  =======  =====  ====    ====       ======  =====  ============
=========  =====  ====  ====    =====  ===   ======  =======   ===   ===  ==  ===  ====  ====    ====  ============
=========  =====  ====  ===  ==  ====  ===    =====  =======  =   =  ==  ====  ==  ====  ===  ==  ===  ============
=========  =====  ===   ==  ====  ===  ===  ==  ===  =======  == ==  ==  ====  ==  ====  ==  ====  ==  ============
=========  =====      ====  ====  ===  ===  ===  ==  =======  =====  ==  ====  ==  ====  ==  ====  ==  ============
=========  =====  ====  ==        ===  ===  ====  =  =======  =====  ==  ====  ==  ====  ==        ==  ============
=========  =====  ====  ==  ====  ===  ===  =====    =======  =====  ==  ====  ==  ====  ==  ====  ==  ============
=========  =====  ====  ==  ====  ===  ===  ======   =======  =====  ===  ==  ===  ====  ==  ====  ==  ============
=========  =====  ====  ==  ====  ==    ==  =======  =======  =====  ====    ====       ===  ====  ==        ======
================================================================================================================ */
/* 2025 JANUARY : Blog Card cloned to modal */
dialog#R_ModalTrain {
    width: clamp(300px,100%,500px);
    margin-block: auto;
    padding-block: 1rem 6rem;
}
#R_ModalTrain::backdrop {
    background: var(--color-train);
    backdrop-filter: brightness(0.1) blur(4px);
}
#R_ModalTrain .rbc-train .rbc-fromto {
    grid-column: 1/-1;
    order:-1;
    margin-bottom:1rem;
}
#R_ModalTrain .rbc-train:has(.train-fullCIS) .rbc-fromto {
    display: none;
}
#R_ModalTrain .rbc-journey .scml-grid {
    grid-template-columns: 1fr 2fr;
}
#R_ModalTrain .scml-grid:has(.nophoto) .train-fullCIS {
    grid-column: 1/-1;
    margin-top:4rem;
    /* scale:1.4; */
    /* max-width:40rem; */
}

#R_ModalTrain .scp-diptych,
#R_ModalTrain .scp-triptych {
    flex-direction: column;
}
#R_ModalTrain .scp-diptych > *:nth-child(2),
#R_ModalTrain .scp-triptych > *:nth-child(n+2) {
    display: block;
}

/* ================================================================================================================
======        ==       ======  =====    ==  =======  =======  =====  ====    ====       ======  =====  ============
=========  =====  ====  ====    =====  ===   ======  =======   ===   ===  ==  ===  ====  ====    ====  ============
=========  =====  ====  ===  ==  ====  ===    =====  =======  =   =  ==  ====  ==  ====  ===  ==  ===  ============
=========  =====  ===   ==  ====  ===  ===  ==  ===  =======  == ==  ==  ====  ==  ====  ==  ====  ==  ============
=========  =====      ====  ====  ===  ===  ===  ==  =======  =====  ==  ====  ==  ====  ==  ====  ==  ============
=========  =====  ====  ==        ===  ===  ====  =  =======  =====  ==  ====  ==  ====  ==        ==  ============
=========  =====  ====  ==  ====  ===  ===  =====    =======  =====  ==  ====  ==  ====  ==  ====  ==  ============
=========  =====  ====  ==  ====  ===  ===  ======   =======  =====  ===  ==  ===  ====  ==  ====  ==  ============
=========  =====  ====  ==  ====  ==    ==  =======  =======  =====  ====    ====       ===  ====  ==        ======
================================================================================================================ */
/* AUG/SEP 24 : Modal Train Display */
dialog.r__modal:has(.train-modal) {
    width:min-content;
    border:unset;
    background:transparent;
}
.train-modal {
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    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);
}
dialog.r__modal:has(.train-modal)::backdrop {
    backdrop-filter: grayscale(0.5) brightness(0.4) blur(0.3ch);
    background: unset;
}

.train-modal > * {flex-basis:100%;}
.train-modal > .runDate {
    flex-basis:fit-content;
    /* display:block; */
    padding:revert;
    border:revert;
    /* text-align:left; */
    font-size:var(--small);
    opacity:0.5;
}
.train-modal > .platform {
    flex-basis:content;
    margin-left:auto;
}
.train-modal > .platform.confirmed::before {
    content:'Platform ';
    font-family:sans-serif;
    font-variant:normal;
    font-size:var(--smaller);
    opacity:0.9;
}
.train-modal > .platform.cancelled {
    aspect-ratio:initial;
    /* color: transparent; */
    /* background:unset; */
    border-radius:unset;
    padding:0 0.5ch
}
.train-modal > .platform.cancelled::before {
    content:'Cancelled ';
    color:initial;
    background:initial;
    font-family:sans-serif;
    font-variant:normal;
    font-size:var(--smaller);
    opacity:0.9;
}

/* =^.^=ALPHA visibility:hidden until replaced in all templates */
.train-modal .train-at-station .platform {visibility: hidden;}

.train-modal > footer {
    padding-bottom:var(--tiny); /* allows tiny DataAttribution to be absolutely positioned beneath footer without overlap */
    font-size:var(--small); /*=^.^= should be inherited from .train > footer */
    text-align: right;
}

/* TRAIN-MODAL > CALLS-AT */
.train-modal .calls-at {
    display:grid;
    grid-template-columns: [station] 1fr [time] 5rem [status] 1.5rem;
    /* justify-items:center; */
    align-items:center;
    margin:2ch 0 2ch 1ch;
    padding-bottom: 2rem;   /* absolute positioned footer ignores margin so add padding */
    font-size:var(--smaller);
}
.train-modal .calls-at > * {display:contents;}
.train-modal .calls-at .station-name {margin-right:auto;}
.train-modal .calls-at time {
    /* align-self:center; */
    font-size:var(--smaller);
}

.train-modal .calls-at .pre-joinat {display: none !important;}
.train-modal .calls-at .post-alight > * {opacity:0.6;}
.train-modal .calls-at .status {
    grid-row:auto;
    justify-self:center;
    font-size:var(--smaller);   /* to match <time> */
    color:var(--hue);
    background:transparent;
    width:unset;
    height:unset !important;
    min-height: unset;
    aspect-ratio:unset;
}


/* ITINERARY TRAIN */
.trip-train > .edge {cursor:pointer;}   /*=^.^= "hidden" modal-train view */


/* ==============================================================================================
=======      ==============================================      ================================
======  ====  ============================================  ====  ===============================
======  ====  ===  ===========  ==========================  ====  ===============================
=======  =======    ===   ===    ==  ===   ===  = =========  =======  ===   ===  = ====   =======
=========  ======  ===  =  ===  =======     ==     ==========  =========  =  ==     ==  =  ======
===========  ====  ======  ===  ===  ==  =  ==  =  ============  ===  ===    ==  =  ===  ========
======  ====  ===  ====    ===  ===  ==  =  ==  =  =======  ====  ==  =====  ==  =  ====  =======
======  ====  ===  ===  =  ===  ===  ==  =  ==  =  =======  ====  ==  ==  =  ==  =  ==  =  ======
=======      ====   ===    ===   ==  ===   ===  =  ========      ===  ===   ===  =  ===   =======
============================================================================================== */
/* Station Signs List */
.signs-list {
    display:flex;
    flex-wrap:wrap;
    font-size:10px;
    column-gap:0.5em;
    row-gap: 2em;
}
/* for large screen widths */
@media screen and (min-width:640px) {
    .signs-list {font-size: 12px;}
}
.signs-list > header {flex-basis:90%}

/* If signs-list is filtered hide everything and let other(JS) logic display requested items */
.signs-list.filtered > .station-sign {display:none;}

.station-sign {
    display:block;
    margin: auto;
    width: fit-content;
    min-width: 10em;
    max-width: 100%;
	background:white;
	color:black;
    border: 1px solid var(--gray);
    border-bottom: 0;
}
.station-sign:hover{border-color:var(--hued);}
.station-sign > .station-name {
    font-family: Raleway, sans-serif;
	font-size:1.2em;
    display: block;
    color: var(--col_srblu);
    width:auto;
    margin: 0.65em 1.2em;
    text-align: center;
    /*white-space: pre;*/
}
.station-sign > .station-number {
    display: block;
    text-align: right;
    padding: 0.2em 0.6em;
    font-size:0.8em;
    color: white;
    background-color: var(--col_srblu);
    margin:unset;
    /* margin-bottom: 1em; */
}


.station-sign.visited{
    filter:opacity(0.5) grayscale(0.5) brightness(1.5);
}
.station-sign.not-visited{
    filter:grayscale(1) opacity(0.2);
}
.station-sign.england > .station-number {
    background-color: var(--color_england);
}
.station-sign.wales > .station-number {
    background-color: var(--color_wales);
}



/* ================================================================================================
=========  =====  =======  ==    ==  =====  =====  =====        ==    ====    ====  =======  ======
========    ====   ======  ===  ===   ===   ====    =======  ======  ====  ==  ===   ======  ======
=======  ==  ===    =====  ===  ===  =   =  ===  ==  ======  ======  ===  ====  ==    =====  ======
======  ====  ==  ==  ===  ===  ===  == ==  ==  ====  =====  ======  ===  ====  ==  ==  ===  ======
======  ====  ==  ===  ==  ===  ===  =====  ==  ====  =====  ======  ===  ====  ==  ===  ==  ======
======        ==  ====  =  ===  ===  =====  ==        =====  ======  ===  ====  ==  ====  =  ======
======  ====  ==  =====    ===  ===  =====  ==  ====  =====  ======  ===  ====  ==  =====    ======
======  ====  ==  ======   ===  ===  =====  ==  ====  =====  ======  ====  ==  ===  ======   ======
======  ====  ==  =======  ==    ==  =====  ==  ====  =====  =====    ====    ====  =======  ======
================================================================================================ */
/* Spining 'loading wait' ring */
/* BASED on https://github.com/loadingio/css-spinner/blob/master/dist/dual-ring.html */
.waiting-for-server {
    position: relative;
    grid-column: 1/-1;
    width:100%;
    color: var(--ldb-text);
}
.waiting-for-server:after {
    position: absolute;
    inset: 20% calc(50% - 17px);
    opacity: 0.8;
    content: "\a0";
    display: block;
    width: 34px;
    height: 34px;
    /* margin: 8px; */
    border-radius: 50%;
    border: 4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: waiting-for-server 1s linear infinite;
}
@keyframes waiting-for-server {
    from {transform: rotate(360deg);}
      to {transform: rotate(0deg);}
}