/* 2025 JUL 24 : Cut & Paste CSS to New File Created */


.pid-train header {anchor-name: --pid-train-header, --pid-data-attribution;}
/* ============================================================================================
======       ===    ==       =============        ==       ======  =====    ==  =======  ======
======  ====  ===  ===  ====  ===============  =====  ====  ====    =====  ===   ======  ======
======  ====  ===  ===  ====  ===============  =====  ====  ===  ==  ====  ===    =====  ======
======  ====  ===  ===  ====  ===============  =====  ===   ==  ====  ===  ===  ==  ===  ======
======       ====  ===  ====  ==        =====  =====      ====  ====  ===  ===  ===  ==  ======
======  =========  ===  ====  ===============  =====  ====  ==        ===  ===  ====  =  ======
======  =========  ===  ====  ===============  =====  ====  ==  ====  ===  ===  =====    ======
======  =========  ===  ====  ===============  =====  ====  ==  ====  ===  ===  ======   ======
======  ========    ==       ================  =====  ====  ==  ====  ==    ==  =======  ======
============================================================================================ */
/* 2025 MAR 16 : AJAX loaded Passenger Information Display for individual Trains. */
.pid-train {
    --rfs-4: 2.2rem;

    position: relative;
    display: flex;
    flex-direction: column;
    width:min(calc(var(--rfs-1)*40), 100%); /* calc default of 400px, smaller only if no space */
    /* min-height:calc(var(--rfs-1a)*40); */
    margin:auto;
    padding:1rem;
    background:var(--ldb-board);
    color:var(--ldb-text);
    border-radius:2px;
    font-family: monospace;
    /* font-variant: small-caps; */
}
.pid-train > header,
.pid-train > footer {
    position: relative;
    margin-inline:var(--rfs-1);
    display: grid;
}
.pid-train > header {
    /* padding-top:calc(var(--rfs-1)/2); top margin is collapsed in beta test */
    grid-template-areas:
        'pid-date pid-date joinat joinat'
        'depart-time depart-time platform platform'
        'destination destination destination arrive-time'
        'spacer spacer journey-time journey-time'
        'notes notes notes notes';
    /* grid-template-columns: auto 1fr 1fr auto; */
    grid-template-rows: var(--rfs-5) auto auto auto;
    justify-items: left;
}
.pid-train .joinat-details,
.pid-train .alight-details {
    display:contents;
}
.pid-train header .pid-trainID {
    font-size:var(--rfs-1a);
    font-variant: small-caps;
    /* Default to not display inside header */
    display:none;
}

/* "fake" header inside header */
.pid-train header .joinat,
.pid-train .pid-date {
    opacity:0.5;
    font-size:var(--rfs-1a);
    font-variant: small-caps;
}
.pid-train .joinat {
    grid-area:joinat;
    margin-inline: auto 0;  /* overrule <station-name> default margin-right:auto*/
}
.pid-train .pid-date {
    grid-area:pid-date;
    padding-inline-start: 1.5rem;
}
.pid-train .pid-date::before {
    content:'\1F5D3\a0';
    font-family: 'Noto Emoji';
    filter: grayscale(1);
}
/* .pid-train .joinat::before {
    content: '\1F4CD';
    font-family: 'Noto Emoji';
    filter: grayscale(1);
} */
.pid-train header .toc {
    grid-area: spacer;
    font-size: var(--rfs-1);
    align-self: center;
    margin-inline-start: 2.5rem;
}

/********/
/* TIME */
.pid-train time {
    font-family: sans-serif;
}
.pid-train .cis-departure {
    grid-area:depart-time;
    font-size:var(--rfs-4);
}
.pid-train .cis-arrival {
    grid-area:arrive-time;
    font-size:var(--rfs-4);
    display: none;  /* Default is to hide arrival time & platform within header */
}
.pid-train header .journey-time {
    grid-area: journey-time;
    justify-self: end;
    margin-inline-end: 1ch;
    font-size: var(--rfs-3);
    word-spacing: -0.5ch;
}
body.train .pid-train .journey-time::before {
    content: 'Journey Time: ';
    font-size: var(--rfs-1a);
}
.pid-train .destination {
    grid-area:destination;
    font-size:var(--rfs-4);
}
.pid-train .joinat::before,
.pid-train .destination::before {
    font-family: sans-serif;
    font-variant: normal;
    opacity:0.5;
    font-size:var(--rfs-2);
}
/* .pid-train .joinat::before {
    content:'\0000a0\0000a0';
} */
.pid-train .destination::before {
    content:'to\a0';
}
/****************************/
/* .pid-train PLATFORM */
/****************************/
.pid-train .platform {
    grid-area:platform;
    justify-self:right;
    /* margin-right:calc(2*var(--rfs-4)); */
    font-size:var(--rfs-4);
}
.pid-train .alight-details > .platform {
    grid-area:platform-alight;
    display: none;  /* Default is to hide arrival time & platform within header */
}
.pid-train .platform:not(:empty):not(.cancelled)::before {
    content: 'Platform ';
    opacity: 0.8;
    font-family: sans-serif;
    font-variant: normal;
    font-size:80%;
}
.pid-train .platform.cancelled {
    font-family:sans-serif;
    font-size:var(--rfs-3);
    text-transform: capitalize;
    color:var(--white);
    background: var(--color-cancelled);
    padding-inline:1rem;
    border-radius: 4px;
    max-height:calc(var(--rfs-3)*1.2);
    width:9rem;
}
.joinat-details:has(.cancelled)+.alight-details > .cancelled {
    display: none !important;
}
/*************************/
/* .pid-train NOTES */
/*************************/
.pid-train .alerts {
    max-width: 80%;
    margin: auto;
    padding: 4px 9px;
    border: 1px solid hsl(from var(--color-delayed) h s 50 /0.9);
    border-radius:4px;
}
.pid-train aside.delayed,
.pid-train aside.cancelled,
.pid-train aside.will-not-call-at {
    max-width: 90%;
    margin: auto;
    padding: 4px 9px;
    font-size:var(--rfs-1a);
    text-align:center;
    text-wrap:balance;
    border-radius:2px;
}
.pid-train aside.cancelled,
.pid-train aside.will-not-call-at {
    /* border: 1px solid hsl(from var(--color-cancelled) h s 50 /0.9); */
    color:var(--white);
    background: var(--color-cancelled);
}
.pid-train aside.delayed {
    /* border: 1px solid hsl(from var(--color-late) h s 50 /0.9); */
    background: hsl(from var(--color-late) h s 50 /0.5);
}

/**************************/
/* .pid-train FOOTER */
/**************************/
.pid-train > footer {
    font-size: var(--rfs-2);
    grid-template-rows: auto auto var(--rfs-5);
}
/* "fake" footer inside footer */
/* .pid-train .source-info {
    align-self: end;
    padding-top: calc(var(--rfs-1)/2);
    font-size:var(--rfs-1a);
    font-variant: small-caps;
    border-top:1px solid hsl(from currentColor h s l /0.4);
} */
/**************************/



/* ==============================================================================================================================================================================================================
======       ======  =====  ====  ==        ==       ===    ==       ========        ==       ======  =====    ==  =======  =========     ===    ===      ===========   ======      ======   =====         ======
======  ====  ====    ====   ==   =====  =====  ====  ===  ===  ====  ==========  =====  ====  ====    =====  ===   ======  ========  ===  ===  ===  ====  ========   =   ===   ==   ===   =   ===  =============
======  ====  ===  ==  ====  ==  ======  =====  ====  ===  ===  ====  ==========  =====  ====  ===  ==  ====  ===    =====  =======  =========  ===  ====  =======   ===   ==  ====  ==   ===   ==  =============
======  ====  ==  ====  ===  ==  ======  =====  ===   ===  ===  ====  ==========  =====  ===   ==  ====  ===  ===  ==  ===  =======  =========  ====  =================   ===  ====  =======   ===  =    ========
======  ====  ==  ====  ====    =======  =====      =====  ===       ===========  =====      ====  ====  ===  ===  ===  ==  =======  =========  ======  ==============   ====  ====  ======   ====   ===  =======
======  ====  ==        =====  ========  =====  ====  ===  ===  ================  =====  ====  ==        ===  ===  ====  =  =======  =========  ========  ===========   =====  ====  =====   =====  =====  ======
======  ====  ==  ====  =====  ========  =====  ====  ===  ===  ================  =====  ====  ==  ====  ===  ===  =====    =======  =========  ===  ====  =========   ======  ====  ====   =============  ======
======  ====  ==  ====  =====  ========  =====  ====  ===  ===  ================  =====  ====  ==  ====  ===  ===  ======   ========  ===  ===  ===  ====  ========   =======   ==   ===   =======  ====  =======
======       ===  ====  =====  ========  =====  ====  ==    ==  ================  =====  ====  ==  ====  ==    ==  =======  =========     ===    ===      ========        ====      ===        =====     ========
============================================================================================================================================================================================================== */
/* 2025 MAR 25 : Customise Customer Information Screen Train Display for DayTrip Itinerary */
.daytrip .pid-train {
    min-height: auto;
}
.daytrip .pid-train > header {
    grid-template-areas:
        'pid-date pid-date trainid trainid'
        'depart-time joinat joinat platform'
        'arrive-time destination destination platform-alight'
        'spacer spacer journey-time journey-time'
        'notes notes notes notes';
    grid-template-columns: auto 1fr 1fr auto;
    /* grid-template-rows: var(--rfs-5) auto auto auto; */
    /* justify-items: left; */
}
.daytrip .pid-train header .pid-trainID {
    display: initial;
    grid-area: trainid;
    align-self: self-start;
    margin-left: auto;
    opacity: 0.5;
    font-size: var(--rfs-1a);
    font-variant: small-caps;
    border-top:unset;
    padding-top:unset;
}
.daytrip .pid-train header .joinat {
    opacity:1;
    font-size:var(--rfs-4);
    font-variant: normal;
    margin-inline:0 auto;
}
.daytrip .pid-train .platform:not(:empty):not(.cancelled)::before {
    content: 'Plat.';
    opacity: 0.5;
    font-size: 50%;
}
.daytrip .pid-train .cis-arrival,
.daytrip .pid-train .cis-departure {
    margin-inline: auto 0.2rem;
}
.daytrip .pid-train header .joinat::before,
 .daytrip .pid-train header .destination::before {
    font-family: monospace;
    font-size: calc(var(--rfs-1)*.8);
    margin-right: 0.2rem;
}
.daytrip .pid-train header .joinat::before {
    content:'dep';
}
.daytrip .pid-train header .destination::before {
    content:'arr';
}
/* resurface items hidden by default */
.daytrip .pid-train .cis-arrival,
.daytrip .pid-train .alight-details > .platform {
    display: initial;
}

.daytrip .pid-train .tocwork {order: -1;}
/* .daytrip .pid-train .tocwork.work {background: var(--col_work);} */
.daytrip .pid-train .tocwork.assist {background: var(--col_assist);}
.daytrip .pid-train .tocwork.pass {background: var(--col_pass);}

/* =============================================================================================================================================================================
======       ===  ===========  =====  =======  ==  =======  ==        ==       ========       ===    ==       =============        ==       ======  =====    ==  =======  ======
======  ====  ==  ==========    ====   ======  ==   ======  ==  ========  ====  =======  ====  ===  ===  ====  ===============  =====  ====  ====    =====  ===   ======  ======
======  ====  ==  =========  ==  ===    =====  ==    =====  ==  ========  ====  =======  ====  ===  ===  ====  ===============  =====  ====  ===  ==  ====  ===    =====  ======
======  ====  ==  ========  ====  ==  ==  ===  ==  ==  ===  ==  ========  ===   =======  ====  ===  ===  ====  ===============  =====  ===   ==  ====  ===  ===  ==  ===  ======
======       ===  ========  ====  ==  ===  ==  ==  ===  ==  ==      ====      =========       ====  ===  ====  ==        =====  =====      ====  ====  ===  ===  ===  ==  ======
======  ========  ========        ==  ====  =  ==  ====  =  ==  ========  ====  =======  =========  ===  ====  ===============  =====  ====  ==        ===  ===  ====  =  ======
======  ========  ========  ====  ==  =====    ==  =====    ==  ========  ====  =======  =========  ===  ====  ===============  =====  ====  ==  ====  ===  ===  =====    ======
======  ========  ========  ====  ==  ======   ==  ======   ==  ========  ====  =======  =========  ===  ====  ===============  =====  ====  ==  ====  ===  ===  ======   ======
======  ========        ==  ====  ==  =======  ==  =======  ==        ==  ====  =======  ========    ==       ================  =====  ====  ==  ====  ==    ==  =======  ======
============================================================================================================================================================================= */
.planner .pid-train {
    padding:0;
    border: 2px solid var(--color-train);
    border-radius: 4px;
}
.planner .pid-train header,
.planner .pid-train footer {
    /* background: whitesmoke; */
    margin: 0;
    padding: 0;
}
.planner .pid-train footer {
    padding: 1rem 1rem 0;
}
.planner .pid-train .spacer-line,
.planner .pid-train .station-calls-2025:empty {
    display: none;
}
.planner .pid-train header .pid-trainID {
    justify-self: stretch;
    min-width:max-content;
    margin-left: 0;
    align-self: auto;
    padding-top:5px;
    padding-inline-end: 5px;
    text-align:right;
    color:white;
    background:hsl(from var(--color-train) h s l /1);
}
.planner .pid-train header .pid-date {
    font-size:var(--rfs-1);
    justify-self: stretch;
    color: hsl(from var(--color-train) h s l /1);
    background:hsl(from var(--color-train) h s l /1);
}
.planner .pid-train header .toc {
    grid-area: pid-date;
}
.planner .pid-train time {padding-left:0.5rem}
.planner .pid-train .platform {padding-right:0.5rem}
.planner .pid-train .platform:not(:empty):not(.cancelled)::before {
    content: 'pl';
}

/* ARCHIVES view */
.blog-card figure+.pid-train,
.blog-card .nophoto+.pid-train {
    /* shrink some default sizes */
    --rfs-1:8px;
    --rfs-1a:1rem;
    --rfs-3:1.2rem;
    --rfs-4:1.6rem;
    max-width:min(270px,100%);
}
.blog-card .nophoto+.pid-train {
    grid-column:1/-1;
}
.blog-card *+.pid-train .station-calls-2025 {
    /* fake hiding arrival times and add space due no footer */
    grid-template-columns: [notes-start station-start] 1fr [station-end arrive-start] 1rem [arrive-end depart-start] 5rem [depart-end status-start] 3.4rem [status-end notes-end];
    margin-block-end:2rem;
}
.rbc-journey *+.pid-train time {margin-left:0}
.blog-oneday .blog-card *+.pid-train .platform {display:none;}
.blog-card *+.pid-train > footer {display: none;}