/* @import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap'); */
/* ====================================================================================================================================
========     =============================================       ======================================================================
=======  ===  ============================================  ====  =====================================================================
======  =======================  =========================  ====  ==========================================  =========================
======  ========  =  ===   ===    ===   ===  =  = ========  ====  ==  =   ====   ===    ====   ===  =   ===    ==  ===   ====   =======
======  ========  =  ==  =  ===  ===     ==        =======       ===    =  ==     ==  =  ==  =  ==    =  ===  =======  =  ==  =  ======
======  ========  =  ===  =====  ===  =  ==  =  =  =======  ========  =======  =  ==  =  ==     ==  ========  ===  ==     ===  ========
======  ========  =  ====  ====  ===  =  ==  =  =  =======  ========  =======  =  ==    ===  =====  ========  ===  ==  =======  =======
=======  ===  ==  =  ==  =  ===  ===  =  ==  =  =  =======  ========  =======  =  ==  =====  =  ==  ========  ===  ==  =  ==  =  ======
========     ====    ===   ====   ===   ===  =  =  =======  ========  ========   ===  ======   ===  ========   ==  ===   ====   =======
==================================================================================================================================== */
:root {
    --text: black;
    --background: hsl(0,0%,96%);
    --text: canvascolor;
    --background: canvas;

    --color: 220, 20%, 50%;
    --hued:hsla(var(--color), 1);
    --accent:hsla(var(--color), 0.5);
    --color-hover:rebeccapurple;

    --hue_red:    000,  68%, 42%; /* ~firebrick */
    --hue_orange: 043,  74%, 49%; /* ~goldenrod */
    --hue_green:  146,  50%, 36%; /* ~seagreen */
    --hue_blue:   210, 100%, 56%; /* ~dodgerblue */

	/* R__ailway Colors */
    --col_brred: hsl(2, 70%, 54%);		/* British Rail Red */
    --col_srblu: hsl(217, 100%, 20%);	/* ScotRail Blue */

    /* legacy color variables */
    --black: black;
    --gray:  gray;
    --silver:silver;
    --white: white;
    --green: green;
    --yellow:yellow;
    --red:   red;
    --highlight:var(--yellow);

    /* --color_x are used in charts */
    --color_a: dodgerblue;
    --color_b: indianred;
    --color_c: seagreen;
    --color_d: darkgoldenrod;
    --color_e: darkmagenta;

    /* GRAYSCALE LEVELS */
    --blackout: hsl(0, 0%, 9%);
    --night:    hsla(0, 0%,  9%, 1.0);
    --shadow:   hsla(0, 0%, 50%, 0.5);
    --stripe:  hsla(0, 0%, 67%, 0.1);
    --gridline: hsla(0, 0%, 50%, 0.4);


    --gridlines: linear-gradient(var(--gridline) 0.5px, transparent 0.5px, transparent calc(100% - 0.5px), var(--gridline) calc(100% - 0.5px)), linear-gradient(90deg, var(--gridline) 0.5px, transparent 0.5px, transparent calc(100% - 0.5px), var(--gridline) calc(100% - 0.5px));
    --stripes:  hsla(0, 0%, 67%, 0.1);  /* =^.^=OBSOLETE : 2024 AUG 24 : use singular --stripe variable instead */


    /* 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!!) */

    /* OBSOLETE : make these go away pls */
    --tiny:   var(--rfs-1);
    --small:  var(--rfs-2);
    --medium: var(--rfs-5);
    --large:  var(--rfs-6);
    --halved:  50%;
    --smaller: 80%;
    --larger: 125%;

    /* Major Page Sizes */
    --page_width:1024px;
    --content_width: 968px;
    --grid-column-min-width: 380px;

    /* Main Grid Cards */
    --color-card-background:whitesmoke;
    --color-card-border:silver;
    --size-card-corners:var(--rfs-3);

}
/* @media (prefers-color-scheme: dark) {
    :root {
        --text: hsl(0,0%,89%);
        /* --background: hsl(14,9%,14%);
    }
} */

/* CSS Reset Options */
*, *::before, *::after { box-sizing: border-box; }
* { margin:unset; padding:unset; font:inherit; }
[popover] {color:inherit;background:inherit;}
section {position:relative;}
legend {margin-inline-start: 2rem;}
details > summary {cursor: pointer;}
html { color-scheme: light dark; font-size:62.5%;}
img, picture, svg, video { display:block; max-height:80vh; max-width:100%; margin-inline:auto}
figcaption {text-align: center;}
/* main, section {container-type: inline-size;} */
h1 {text-wrap:balance;}
p, figcaption {text-wrap:pretty;}
p a {text-decoration:underline dashed hsla(0,0%,0%,0.4);color:inherit;}
p a:hover {text-decoration:underline solid hsla(0,0%,0%,0.6);}
body, main {container-type: inline-size;}



/* =================================================================================================================
=======      ===    ==        ==        =======  ===========  =====  ====  ====    ====  ====  ==        ===========
======  ====  ===  ======  =====  =============  ==========    ====   ==   ===  ==  ===  ====  =====  ==============
======  ====  ===  ======  =====  =============  =========  ==  ====  ==  ===  ====  ==  ====  =====  ==============
=======  ========  ======  =====  =============  ========  ====  ===  ==  ===  ====  ==  ====  =====  ==============
=========  ======  ======  =====      =========  ========  ====  ====    ====  ====  ==  ====  =====  ==============
===========  ====  ======  =====  =============  ========        =====  =====  ====  ==  ====  =====  ==============
======  ====  ===  ======  =====  =============  ========  ====  =====  =====  ====  ==  ====  =====  ==============
======  ====  ===  ======  =====  =============  ========  ====  =====  ======  ==  ===   ==   =====  ==============
=======      ===    =====  =====        =======        ==  ====  =====  =======    =====      ======  ==============
================================================================================================================= */
/* 2025 JUL 21 : Fixed Header & Navigation */
body {
    display:flex;
    flex-direction: column;
}
body > header,
  body > nav {
    z-index: 99;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    inset: auto;
    margin-left: calc((clamp(320px,100%,var(--page_width)) - clamp(320px, 100%, var(--content_width))) / 2);
    color: var(--background);
    background:var(--hued);
}
body > header {
	justify-content: space-between;
    /* order:-9; */
    height: 42px;
    /* background: linear-gradient(180deg, var(--hued) 97%, var(--accent)); */
	padding:0.5ch;
    font-family:Comic Neue, cursive;
    font-size: var(--rfs-5);
}
body > nav {
    /* order:-6; */
    top: 42px;
    min-height: 28px;
    /* padding-top: 0.2ch; */
    border-top: 1px solid hsl(from currentColor h s l /0.5);
    border-radius: 0 0 4px 4px;
    box-shadow: 0px 4px 4px 0px hsl(from canvas h s l /0.5);
}
/* Move <main> content down from behind fixed header */
body > main {padding-top:72px;}
html {scroll-behavior:smooth;scroll-padding-top:80px}

/* =========================================================================================================
======  =======  =====  =====  ====  ==    ===      ======  =====        ==    ====    ====  =======  ======
======   ======  ====    ====  ====  ===  ===   ==   ====    =======  ======  ====  ==  ===   ======  ======
======    =====  ===  ==  ===  ====  ===  ===  ====  ===  ==  ======  ======  ===  ====  ==    =====  ======
======  ==  ===  ==  ====  ==  ====  ===  ===  ========  ====  =====  ======  ===  ====  ==  ==  ===  ======
======  ===  ==  ==  ====  ==   ==   ===  ===  ========  ====  =====  ======  ===  ====  ==  ===  ==  ======
======  ====  =  ==        ===  ==  ====  ===  ===   ==        =====  ======  ===  ====  ==  ====  =  ======
======  =====    ==  ====  ===  ==  ====  ===  ====  ==  ====  =====  ======  ===  ====  ==  =====    ======
======  ======   ==  ====  ====    =====  ===   ==   ==  ====  =====  ======  ====  ==  ===  ======   ======
======  =======  ==  ====  =====  =====    ===      ===  ====  =====  =====    ====    ====  =======  ======
========================================================================================================= */
/* 2025 JUL 22 : #page-nav = page->type specific options */
#page-nav {
    position: fixed;
    top: 70px;
    /* left: var(--rfs-5); */
    z-index: 100;
    width: clamp(320px, 100%, var(--content_width));
    margin-left: calc((clamp(320px,100%,var(--content_width)) - clamp(320px, 100%, var(--content_width))) / 2);
    /* width: 100%; */
    /* height: 20px; */
    display: flex;
    align-items: center;
    /* column-gap:1rem; */
    /* padding-inline: 2rem; */
    font-size: var(--rfs-1a);
    /* border-radius: 0 0 2px 2px;
    box-shadow: 0px 2px 4px hsl(from silver h s l /0.5); */
}
#page-nav > * {
    padding: 1px 1ch;
    background: var(--hued);
    color: var(--background);
    border:1px solid silver;
    border-radius:1px;
}

/* A-Z alphabet squares */
nav.nav-alphabet {
    /* order: revert; */
    max-width: 96%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--rfs-1a);
    /* box-shadow: 0px 1px 2px 0px hsl(from var(--hued) h s l /0.4); */
}
nav.nav-alphabet > * {
    cursor:pointer;
    padding:0.25rem 1rem;
    /* border-left:1px solid var(--hued); */
    box-shadow: 0px 1px 2px 0px hsl(from var(--hued) h s l /0.4);
}
nav.nav-alphabet > *:first-child {
    border-left:unset;
}
nav.nav-alphabet :target {
    background: var(--color-hover);
}
/*******************************/

/**************************/
/* post-reset Core Styles */
h2 {
    font-size:var(--rfs-4);
    margin:0.5rem;
    padding:0.5rem 1rem;
}
/**************************/

/* ******************** */
/* PAGE & CONTENT SIZES */


/* 2025 MAR 29 : Not Used Anymore? */
.pixel {width: 1px;height: 1px;opacity: 0;}

/* colour filters for black svg icons */
img.-green {filter: invert(0.5) sepia(1) saturate(6) hue-rotate(45deg);}
img.-orange {filter: invert(0.5) sepia(1) saturate(6);}
img.-red {filter: invert(0.5) sepia(1) saturate(6) hue-rotate(-45deg);}
img.-custom {filter: invert(0.5) sepia(1) saturate(6) hue-rotate(calc(var(--hue)deg - 45));}

.emoji {font-family: 'Noto Emoji';}
.pointer {cursor:pointer;}
.formation .mirror,
.mirror::before{display:inline-block;transform:scaleX(-1);} /* Only used for flipping the edit pencil emoji? */
hr.spacer-line {
    grid-column: 1/-1;
    flex-basis:100%;
    margin:1ch !important;
    padding:0 !important;
}

/* fake "alerts" that disapear forever when clicked */
details.disappearing:not([open]) {display:none;}


/* ================================================================================================================================
=========  =====  ====  ==        ====    ======     =====    ====  =====  ==       ===  ========        ==        ==        ======
========    ====  ====  =====  ======  ==  ====  ===  ===  ==  ===   ===   ==  ====  ==  ========  ===========  =====  ============
=======  ==  ===  ====  =====  =====  ====  ==  ========  ====  ==  =   =  ==  ====  ==  ========  ===========  =====  ============
======  ====  ==  ====  =====  =====  ====  ==  ========  ====  ==  == ==  ==  ====  ==  ========  ===========  =====  ============
======  ====  ==  ====  =====  =====  ====  ==  ========  ====  ==  =====  ==       ===  ========      =======  =====      ========
======        ==  ====  =====  =====  ====  ==  ========  ====  ==  =====  ==  ========  ========  ===========  =====  ============
======  ====  ==  ====  =====  =====  ====  ==  ========  ====  ==  =====  ==  ========  ========  ===========  =====  ============
======  ====  ==   ==   =====  ======  ==  ====  ===  ===  ==  ===  =====  ==  ========  ========  ===========  =====  ============
======  ====  ===      ======  =======    ======     =====    ====  =====  ==  ========        ==        =====  =====        ======
================================================================================================================================ */
/* eg. Station Searches */
.autocomplete-items {
    max-width: 300px;
    position: absolute;
    z-index: 99;
    font-size: var(--smaller);
    color: black;
    background: whitesmoke;
    box-shadow: 0px 0px 6px var(--shadow);
}
.autocomplete-items > li {
    display: flex;
    justify-content: space-between;
    min-width:20rem;
    padding:0.5rem;
    padding-right:1.5rem;
    border-bottom:1px dotted var(--shadow);
}
.autocomplete-active,
.autocomplete-items > li:hover {cursor:pointer;background:steelblue;color:white;border-radius:2px;}
@media (prefers-color-scheme: dark) {
    .autocomplete-items {color:whitesmoke;background:black;}
}


/* ==============================================================================================================
=  ====  ===================  ======================================        =====================================
=  ====  ===================  ======================================  ===========================================
=  ====  ===================  ==========================  ==========  =======================  ==================
=  ====  ===   ====   ======  ===   ===  =   ===========  ==========  =========   ====   ===    ===   ===  =   ==
=        ==  =  ==  =  ===    ==  =  ==    =  =======        =======      ====     ==     ===  ===  =  ==    =  =
=  ====  ==     =====  ==  =  ==     ==  ===============  ==========  ========  =  ==  =  ===  ===     ==  ======
=  ====  ==  ======    ==  =  ==  =====  ===============  ==========  ========  =  ==  =  ===  ===  =====  ======
=  ====  ==  =  ==  =  ==  =  ==  =  ==  ===========================  ========  =  ==  =  ===  ===  =  ==  ======
=  ====  ===   ====    ===    ===   ===  ===========================  =========   ====   ====   ===   ===  ======
============================================================================================================== */																		   
/*************************************/
/* Main HTML Header & Navigation Styles */
    /* height:6rem; */
	/* font-size:clamp(var(--small), 5vw, var(--large)) */
/* #header, #nav-header {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-content:center;
	justify-content: space-between;
    align-items: center;
	padding:0.5ch 1rem;
    font-family:Comic Neue, cursive;
    font-size: var(--rfs-5);
} */
/* #header .title {padding-left:1rem;} */
#site-header .subtitle {
    position:relative;
    top:-1ch;
    flex-basis:100%;
    font-size: var(--rfs-1);
    font-family: sans-serif;
    text-indent: 4rem;
}
#loginas {
    display: flex;
    flex-direction: column;
    gap:0.5ch;
    width:min-content;
    min-width: 2.8rem;
    text-align:center;
    font-size:1.6rem;
    font-family:cursive;
    font-variant:all-small-caps;
    line-height:1ch;
}
#loginas:before {
    width:unset;
    margin:unset;
    font-weight: bold;
}
.traybtn{
    font-size:2.5rem;
    width:2rem;
    margin-inline:0.5rem;
    cursor:pointer;
}
header .traybtn {transform:scale(1.6)}
/* MAIN PAGE NAVIGATION */
dialog#rmd_nav-page {
    position:fixed;
    top:42px;
    margin-block:unset;
    margin-inline: auto;
    width:var(--content_width);
    max-width:100%;
    border:unset;
}
dialog#rmd_nav-page::backdrop {
    background:linear-gradient(to bottom, transparent 42px, hsla(0,0%,0%,0.8) 42px);
    /* background:hsla(0,0%,0%,0.8); */
    backdrop-filter: none;
}
#rmd_nav-page > nav {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    align-items:center;
    gap: 1ch;
    width: 100%;
    min-width:280px;
    background: var(--background);
    color: var(--text);
    padding: 1ch 2ch 4ch;
}
#rmd_nav-page > nav > * {
    padding:0.5rem 2rem;
    border: 1px solid var(--gridline);
    border-radius:9px;
}
/* <a icon="&bull;"> */
.r__icon:before,
nav.old-site-menu > a:before {
    opacity: 1;
    content: attr(icon);
    display:inline-block;
    font-family:'Noto Emoji';
    width:2rem;
    text-align:center;
    margin-right: 1ch;
}
/* fake a magnifying glass icon using rotated conjuction */
#rmd_nav-page > nav > a.search:before {
    display: inline-block;
    rotate: -165deg;
    scale: 1.8;
    line-height: 1.443;
    font-weight: normal;
}

#rmd_nav-page > nav .material-symbols-sharp {
    translate: 0 0.5rem;
}
#nav-header {
    display: flex;
    align-items:center;
    /* font-size:var(--small); */
    /* padding:0 1ch; */
}
#nav-header > * {cursor: pointer;}
#nav-header > a {margin-right:auto}
/* #nav-header > *:nth-child(2) {margin-inline:1ch auto;} */
#nav-header > *:focus-visible{outline:unset;}



/* =========================================================================================================
======  =======  =====  =====  ====  ==    ===      ======  =====        ==    ====    ====  =======  ======
======   ======  ====    ====  ====  ===  ===   ==   ====    =======  ======  ====  ==  ===   ======  ======
======    =====  ===  ==  ===  ====  ===  ===  ====  ===  ==  ======  ======  ===  ====  ==    =====  ======
======  ==  ===  ==  ====  ==  ====  ===  ===  ========  ====  =====  ======  ===  ====  ==  ==  ===  ======
======  ===  ==  ==  ====  ==   ==   ===  ===  ========  ====  =====  ======  ===  ====  ==  ===  ==  ======
======  ====  =  ==        ===  ==  ====  ===  ===   ==        =====  ======  ===  ====  ==  ====  =  ======
======  =====    ==  ====  ===  ==  ====  ===  ====  ==  ====  =====  ======  ===  ====  ==  =====    ======
======  ======   ==  ====  ====    =====  ===   ==   ==  ====  =====  ======  ====  ==  ===  ======   ======
======  =======  ==  ====  =====  =====    ===      ===  ====  =====  =====    ====    ====  =======  ======
========================================================================================================= */
/* 2025 APR 26 : Use `.site-menu`, move `r__breadcrumb` to become obsolete */
/* 2025 MAY 11 : NAV.SITE-MENU now OBSOLETE?! */
nav.site-menu {
    position: relative;
    z-index:99;
    order:-100;
    /* grid-row:1; */
    grid-column:1/-1;
    justify-self: baseline;
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    font-size: var(--rfs-3);
    box-shadow: 0px 1px 2px 0px hsl(from var(--hued) h s l /0.4);
}
nav.site-menu * {user-select: none;}
nav.site-menu [popover] {
    color:var(--text);
    background:var(--background);
}
nav.site-menu > ul {
    display: contents;
}
nav.site-menu > ul > li {
    display: contents;
}
nav.site-menu > ul > li > a {
    position:relative;
    display: inline-block;
    padding:0.25rem 1rem;
    border-left:1px solid hsl(from var(--hued) h s l /0.6);
    user-select: none;
}
nav.site-menu ul > li:hover {
    cursor: pointer;
    /* color: var(--white) !important; */
    background: hsl(from var(--color-hover) h s l /0.5);
    /* filter:saturate(0.34); */
}

/* sub menus */
nav.site-menu ul > *:hover > ul {
    display: grid;
}
nav.site-menu ul > * > ul {
    position: absolute;
    top: 100%;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    width: 100%;
    padding-inline:2rem;
    border: unset;
    overflow: visible;
    /* box-shadow: 1px 1px 3px 10000px hsla(var(--color), 0.5); */
    box-shadow: 1px 1px 3px 10000px hsla(0, 0%, 0%, 0.5);
}
nav.site-menu ul > li > ul > li {
    position: relative;
    height:3.9rem;
}
nav.site-menu ul > * > ul ul {
    z-index:100;
    background-color: canvas;
    position:absolute;
    bottom:0px;
    /* left:calc(100% - 1rem); */
    min-width: max-content;
}
nav.site-menu ul > * > ul a {
    display: block;
    padding: 1rem;
}
nav.site-menu ul > * > ul a::before {
    content: attr(icon);
    font-family: 'Noto Emoji';
    margin-inline-end: 0.5rem;
}

/* stops weirdness of following menu items being bright */
nav.site-menu li:hover > a {z-index:1}
nav.site-menu li:hover ~ li > a {position: unset !important;}


nav.r__breadcrumb {
    order:-9;
    grid-column:1/-1;
    justify-self: baseline;
    /* margin:0.1rem 0 0 2rem; */
    /* padding-top:0.25rem; */
    display: flex;
    flex-wrap: wrap;
    /* font-size:var(--rfs-1a); */
    border-bottom:1px solid var(--hued);
    border-top-width:0;
    /* gap: 5%;
    margin-left: 5%; */
    box-shadow: 0px 1px 2px 0px hsl(from var(--hued) h s l /0.4);
}
nav.r__breadcrumb:has(.hover-only) {border:unset;}
nav.r__breadcrumb > ul {display:contents}
/* nav.r__breadcrumb li:not(:last-child):after {content:'|';opacity: 0.5;} */
nav.r__breadcrumb > * {
    display: inline;
    padding:0.25rem 1rem;
    /* border-radius:4px; */
    border-left:1px solid var(--hued);
}
nav.r__breadcrumb .emoji {
    padding:0.25rem;
}
.submenu > ul {
    position: absolute;
    top: 100%;
    border: unset;
    /* margin-inline: 2px 6px; */
    min-width: 100%;
    width: max-content;
    overflow: visible;
    /* border: 2px solid var(--hued); */
    box-shadow: 1px 1px 3px 0px hsla(var(--color), 0.5);
}
.submenu:hover > ul {
    display: grid;
}
.submenu > ul > li {
    background: var(--background);
    color: var(--text);
}
.submenu ul > li > a {
    display: block;
    padding: 1rem;
}
.submenu a::before {
    content: attr(icon);
    font-family: 'Noto Emoji';
    margin-inline-end: 0.5rem;
}
.submenu li:hover {
    color:var(--white);
    background:var(--color-hover);
}

.submenu >ul .submenu >ul {
    top:0px;
    left:100%;
}

/* narrow columns custom styles */
@container (width < 600px) {
    .wide-column-only {
        display: none;
    }
}


/* =====================================================================================================
======  =====  =====  =====    ==  =======  =======  ============      ===       ===    ==       =======
======   ===   ====    =====  ===   ======  ========  ==========   ==   ==  ====  ===  ===  ====  ======
======  =   =  ===  ==  ====  ===    =====  =========  =========  ====  ==  ====  ===  ===  ====  ======
======  == ==  ==  ====  ===  ===  ==  ===  ==========  ========  ========  ===   ===  ===  ====  ======
======  =====  ==  ====  ===  ===  ===  ==  ===========  =======  ========      =====  ===  ====  ======
======  =====  ==        ===  ===  ====  =  ==========  ========  ===   ==  ====  ===  ===  ====  ======
======  =====  ==  ====  ===  ===  =====    =========  =========  ====  ==  ====  ===  ===  ====  ======
======  =====  ==  ====  ===  ===  ======   ========  ==========   ==   ==  ====  ===  ===  ====  ======
======  =====  ==  ====  ==    ==  =======  =======  ============      ===  ====  ==    ==       =======
===================================================================================================== */
/* 2025 MAY 15 : Default use is to highlght & separate `main > section` cards */
.grid-card {
    background: var(--color-card-background);
    border: 1px solid var(--color-card-border);
    border-radius: var(--size-card-corners);
}





/* UTILITY STYLES */
.rfs-1 {font-size:var(--rfs-1)}
.rfs-1a {font-size:var(--rfs-1a)}
.rfs-2 {font-size:var(--rfs-2)}
.rfs-3 {font-size:var(--rfs-3)}
.rfs-4 {font-size:var(--rfs-4)}
.rfs-5 {font-size:var(--rfs-5)}
.rfs-6 {font-size:var(--rfs-6)}
.order-last {order:99}
/* hover-only hides utility options from screenshots etc */
.hover-only {opacity:0}
*:hover > .hover-only, .hover-only:focus {opacity:0.5}
.faded {opacity: 0.2;}

.r__tright {margin-left:auto;text-align:right;}
.r__dim {opacity:0.5}

/* "blog style" date in top-right above page title */
.r__title+.r__date,
.r__subtitle+.r__date {
    padding-top:0.25em;
    grid-row:2;
    /* order:-98; */
    grid-column:1/-1;
    width:96%;
    padding-right:4%;
    text-align:right;
    font-size:var(--rfs-2)
}
.r__title+.r__subtitle {
    order:-1;
    grid-column:1/-1;
    margin-block:-0.5rem 1rem;
    text-align: center;
    text-wrap: pretty;
    /* padding-right:4%;
    text-align:right; */
}

/* EXPORT STYLE BOXES : easy to read tsv for cut & paste */
.tsv,
.export {
    grid-column:1/-1;
    margin-block: 1rem;
    width: 90%;
    min-height: 60vh;
    margin-inline:auto;
    padding: 2rem;
    white-space: pre;
    tab-size:6;
    font-family:monospace;
    font-size: var(--rfs-2);
    filter: invert(1) contrast(0.8);
}
.export {
    background: var(--shadow);
}


/* MAIN PAGE CONTENT */
/* body {overflow-y: scroll;} my personal asthetic is to always show scrollbar on desktop */
main.r__flex {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* r__grid is just a definable column width & responsive layout */
.r__grid {
    flex-basis:100%;
    display: grid !important;
    justify-items: center;
    grid-template-columns: repeat( auto-fill, minmax(var(--grid-column-min-width), 1fr) );
}
.r__grid:not(main) {
    justify-items: center;
    align-items: center;
}

.grid-stretch{
    justify-self: stretch;
    align-self: stretch;
}
/* push title elements to top of any grid/flexbox they're in */
.r__title {
    display: block;
    order:-1;
    grid-column: 1 / -1;
    flex-basis: 100%;
}

.r__full-width {
    display: block;
    margin-inline:auto;
    grid-column: 1 / -1;
    flex-basis: 100%;
    max-width:100% !important;
    width:100%;
}
section > header,
section > footer {
    grid-column:1/-1;
}


.r__center {
    margin-inline: auto;
    text-align:center;
    text-wrap:balance;
    align-self: center;
}
.r__left {
    margin-right: auto;
    text-align:left;
}
.r__right {
    margin-left: auto;
    text-align:right;
}
.r__size-50 { font-size:clamp(1rem, 50%, 3.6rem) }
.r__size-75 { font-size:clamp(1rem, 75%, 3.6rem) }

.r__section {
    width:clamp(300px,98%,460px);
    margin-inline:auto;
    margin-bottom:2vh;
}
.r__readable {
    margin-inline:auto;
    max-width:65ch;
    text-wrap:pretty;
}
/* Usually an add-on to .r__section */
.r__flex {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
    justify-content: space-evenly;
    align-items: baseline;
}

/* force into a "narrow" (half) width column */
.r__column {
    /* width: clamp(360px, 49%, 480px); */
    margin-inline: auto;
}

.r__two-tall {
    grid-row:span 2;
    height:fit-content;
}
.tall-rowsx2 {
    grid-row:span 2;
    height:fit-content;
}
.tall-rowsx3 {
    grid-row:span 3;
    height:fit-content;
}

.r__block {
    display: block;
    margin-inline:auto;
    width: 96%;
}
.r__hued-block {
    background:var(--hued);
}
/* shaded background with margin & padding */
.r__accent {
    background: var(--accent);
}
.r__accent-block {
    display: block;
    background: var(--accent);
    padding: 1.5rem 2.5rem;
    margin: 1.5rem auto;
    max-width: 46ch;
    text-wrap: balance;
}
.r__text-block {
    justify-self: center;
    margin-inline: auto;
    max-width: 64ch !important;
    margin: 1rem 1ch;
    padding:1ch;
    border: 1rem solid var(--accent);
    border-radius: 4px;
    white-space: pre-line;
    text-wrap-style:balance;
}
.r__wiki-block {
    height:fit-content;
    padding: 1.5rem 2.5rem;
    margin: 1.5rem auto;
    max-width: 54ch;
    text-wrap: balance;
    font-size: var(--rfs-2);
    border: 1ch solid var(--hued);
    border-radius: 1rem;
    box-shadow: 0 0 2px 1px var(--accent);
}
/* 2024 DEC 22 : shrink large wikipedia previews */
.r__wiki-block > *:nth-child(2) {
    max-height: 12rem;
    mask-image: linear-gradient(to bottom, black 4rem, transparent 10rem);
    font-size: var(--rfs-1);
}
.r__wiki-block > *:nth-child(n+3) {
    display: none;
}
.r__wiki-block > a:last-of-type {display: block;}   /* ensure the credit link is visible! */


.r__soft-block {
    border-radius: 1rem;
    box-shadow: 0 0 2px 1px var(--accent);
}

.r__scroll {
    max-width:96%;
    margin-inline:auto;
    overflow:auto;
}

.r__margin-block {
    margin-block:0.5ch;
}
footer.r__margin-block {
    margin-block:2ch 1ch;
}
.r__margin-inline {
    margin-inline:1ch;
}
.r__padded-block {
    padding-block:0.5ch;
}

.r__italic {
    font-style: italic;
}


/* for large screen widths */
@media screen and (min-width:640px) {
    main.flex .r__section {
        width:clamp(340px,49%,460px);
    }
    /* allow full width on portrait but indent margins on landscape (two-column grid) views */
    .r__accent-block { width:96%; }
    .r__title {
        font-size:var(--rfs-6);
    }
}

/* for portrait view screens */
@media screen and (max-width:640px) {
    .only-landscape {
        display: none;
    }
    .r__title {
        font-size:var(--rfs-5);
    }
}

/* Make <input>'s look like normal text : NOTE this also hides functionality & accessibility :(  */
select.mimic_text,
input.mimic_text {
    margin:unset;
    border:unset;
    background:transparent;
    width:min-content;
    text-align:right;
}
select.mimic_text option,
select.mimic_text optgroup {background:hsl(0, 0%, 50%)}

/* =========================================================================================================
======       ======  ======      ===    ==  =======  =====  =====        ==    ====    ====  =======  ======
======  ====  ====    ====   ==   ===  ===   ======  ====    =======  ======  ====  ==  ===   ======  ======
======  ====  ===  ==  ===  ====  ===  ===    =====  ===  ==  ======  ======  ===  ====  ==    =====  ======
======  ====  ==  ====  ==  =========  ===  ==  ===  ==  ====  =====  ======  ===  ====  ==  ==  ===  ======
======       ===  ====  ==  =========  ===  ===  ==  ==  ====  =====  ======  ===  ====  ==  ===  ==  ======
======  ========        ==  ===   ===  ===  ====  =  ==        =====  ======  ===  ====  ==  ====  =  ======
======  ========  ====  ==  ====  ===  ===  =====    ==  ====  =====  ======  ===  ====  ==  =====    ======
======  ========  ====  ==   ==   ===  ===  ======   ==  ====  =====  ======  ====  ==  ===  ======   ======
======  ========  ====  ===      ===    ==  =======  ==  ====  =====  =====    ====    ====  =======  ======
========================================================================================================= */
.pagination {
    grid-column: 1/-1;
    width:100%;
    display: inline-flex;
    justify-content: flex-end;
    margin-right:2em;
    font-size: var(--rfs-1)
}
.pagination > * {
    min-width: 2.25em;
    text-align:center;
    padding: 4px 6px;
    border: 1px solid var(--gridline);
}
.pagination > *:first-child,
.pagination > *:last-child {
    min-width:1em;
}
.pagination > .current-page {
    background-color: var(--accent);
    cursor: pointer;
}


/* =================================================================================================================================
======  =====  ====    ====       ======  =====  =============       ===    =====  =====  ==========    =====      ====      =======
======   ===   ===  ==  ===  ====  ====    ====  =============  ====  ===  =====    ====  =========  ==  ===   ==   ==  ====  ======
======  =   =  ==  ====  ==  ====  ===  ==  ===  =============  ====  ===  ====  ==  ===  ========  ====  ==  ====  ==  ====  ======
======  == ==  ==  ====  ==  ====  ==  ====  ==  =============  ====  ===  ===  ====  ==  ========  ====  ==  =========  ===========
======  =====  ==  ====  ==  ====  ==  ====  ==  =============  ====  ===  ===  ====  ==  ========  ====  ==  ===========  =========
======  =====  ==  ====  ==  ====  ==        ==  =============  ====  ===  ===        ==  ========  ====  ==  ===   =======  =======
======  =====  ==  ====  ==  ====  ==  ====  ==  =============  ====  ===  ===  ====  ==  ========  ====  ==  ====  ==  ====  ======
======  =====  ===  ==  ===  ====  ==  ====  ==  =============  ====  ===  ===  ====  ==  =========  ==  ===   ==   ==  ====  ======
======  =====  ====    ====       ===  ====  ==        =======       ===    ==  ====  ==        ====    =====      ====      =======
================================================================================================================================= */
.r__modals {display: contents;}   /* a <section> of <dialogs> so remove from grid order etc */
.r__modal-opener {cursor:pointer;}  /* Default to pointer cursor over ALL modal-openers */
.r__modal-opener > * {cursor:default;}  /* But don't show pointer on actual modal */
dialog.r__modal {
    margin-block: 9vh auto;
    margin-inline: auto;
}
dialog.r__modal.lightbox {
    max-height: 80vh;
    min-width: 46vw;
}
dialog.r__modal::backdrop {
    backdrop-filter: blur(1ch);
    background:hsla(34, 17%, 6%, 0.5);
}
dialog.r__modal.lightbox::backdrop {
    background:hsla(34, 17%, 6%, 0.96);
}
/* slower transition on opening dialogs */
dialog.r__modal {
    transition: opacity 1s;
    opacity: 0;
    &[open] {
      opacity: 1;
      /* @starting-style {
        opacity: 0;
      } */
    }
}


/* ======================================================================================================================
======      ====  ==========    =====      ===========  =====       =====     ===  ====  ==    ==  ====  ==        ======
======  ===  ===  =========  ==  ===   ==   =========    ====  ====  ===  ===  ==  ====  ===  ===  ====  ==  ============
======  ====  ==  ========  ====  ==  ====  ========  ==  ===  ====  ==  ========  ====  ===  ===  ====  ==  ============
======  ===  ===  ========  ====  ==  =============  ====  ==  ===   ==  ========  ====  ===  ===  ====  ==  ============
======      ====  ========  ====  ==  =============  ====  ==      ====  ========        ===  ===   ==   ==      ========
======  ===  ===  ========  ====  ==  ===   =======        ==  ====  ==  ========  ====  ===  ====  ==  ===  ============
======  ====  ==  ========  ====  ==  ====  =======  ====  ==  ====  ==  ========  ====  ===  ====  ==  ===  ============
======  ===  ===  =========  ==  ===   ==   =======  ====  ==  ====  ===  ===  ==  ====  ===  =====    ====  ============
======      ====        ====    =====      ========  ====  ==  ====  ====     ===  ====  ==    =====  =====        ======
====================================================================================================================== */
/* 2024 NOV 26 : new core Blog Class */
.blog-day {
    container-name: blog-day;
    container-type: inline-size;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-self:stretch;
    min-height:19rem;
    width: clamp(360px, 98%, 425px);
    margin-block: 2ch auto;
    padding-block-end: 2rem;
    border: 1px solid hsl(from var(--accent) h s l /0.5);
    border-radius: 4px;
}
.blog-day > .blog-card-date {
    padding-block: 0.2rem;
    background: var(--accent);
    border-radius:4px 4px 0 0;
}
.blog-card {
    container-name: blog-card;
    container-type: inline-size;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-self:stretch;
    width: clamp(360px, 98%, 425px);
    padding: 1ch 0.5ch;
    margin-block: 2ch auto;
    border: 1px solid var(--accent);
    border-radius: 2ch;
    border-bottom: none;
}
.blog-card > .blog-card {
    border: 1px solid var(--gridline);
    border-radius: 4px;
}
.blog-card-date {
    padding-right: 1rem;
    text-align: right;
    font-family: serif;
    font-style: italic;
}
.blog-card.feature-text {
    display: block;
    padding:2rem;
    font-family: serif;
    font-style:italic;
    border: 2px solid var(--hued);
    border-block-width:4px 9px;
    border-radius: 4px;
    margin-block: var(--rfs-4) var(--rfs-6);
}
/* .text-preview fades out towards bottom and adds a "read more" */
a:has(.text-preview) {
    margin:1rem 1.5rem;
}
.text-preview {
    text-indent:1rem;
    padding:unset;
    mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
}
.blog-card .text-preview {
    /* vaguely align height with blog-card thumbnail size */
    min-height:9rem;
    max-height:15rem;
}
a:has(.text-preview):after {
    content:'read more...';
    display:block;
    padding-right:2rem;
    text-align:right;
    opacity:0.6 ;
    font-size:var(--rfs-1);
}
.rbc-journey .text-preview {
    min-height: unset;
    mask-image:unset;
}

.blog-archive-list {
    margin: 1rem 4cqi;
}
.blog-archive-list > li { margin-block:1ch }
.blog-archive-list > li > a {
    display:block;
    margin-block:2rem 0.5rem;
    font-weight:lighter;
}
.blog-archive-list > li > *:not(a) {
    margin-left:2.5rem;
}
/* .blog-headline > a {font-weight:bold;} */


.calendar-years {
    margin-inline: 20%;
    /* grid-row: -1; */
    grid-column:1/-1;
    display: flex;
    gap:0.5rem;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-block-start: 1rem;
}
.r__title+.calendar-months {
    grid-column: 1/-1;
}
.calendar-months {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(6,5rem);
    justify-items: center;
    margin-inline: auto;
    font-variant: all-small-caps;
}
.blog-card .calendar-months {
    margin-block-start: 1rem;
}
@container (width > 600px) {
    .calendar-months {
        grid-column:1/-1;
        grid-template-columns: repeat(12,5rem);
    }
}

.calendar-years > *,
.calendar-months > * {
    padding: 0.25rem 1rem;
    border:1px solid var(--gridline);
    border-radius: 4px;
}
.calendar-years > .selected,
.calendar-months > .selected {
    background-color:var(--color-hover);
}
.calendar-years > a:not(.faded):hover,
.calendar-months > a:not(.faded):hover {
    background-color: var(--color-hover);
}

/* BLOG CARDS : TRAINS */
.rbc-train > .scml-grid {
    grid-template-columns: 1fr 2fr !important;
    align-items: start;
}
.rbc-train .scf-inline img,
.rbc-journey .scf-inline img
 {
    max-height:120px !important;
    max-width:120px !important;
}

.rbc-fromto {
    /* grid-column:1/-1; */
    width:96%;
    display:grid;
    padding-bottom:1rem;
    grid-template-columns:1fr 4fr;
    border-style:solid;
    border-width: 4px 2px;
    border-radius: 4px;
}
.blog-oneday .nophoto {
display: none;
}
.blog-oneday .nophoto+.rbc-fromto {    /* no photo thumbnail so stretch this out */
    grid-column: 1/-1;
    max-width:320px;
}
.rbc-train .rbc-fromto {
    border-color: var(--col_train);
}
.rbc-journey time {
    margin-left:0.5rem;
    font-family:monospace;
    text-align: center;
}
.rbc-train .text-preview {
    padding: 0.2rem 1rem;
}
.rbc-fromto > .journey-type {
    display: block;
    grid-column: 1/-1;
    /* margin: 0 -1rem 0.5rem; */
    margin-bottom:0.5rem;
    padding: 0 1rem 4px;
    font-family:monospace;
    font-variant: all-small-caps;
    letter-spacing:0.1rem;
    text-align: right;
    color: white;
}
.rbc-fromto > .duration {
    grid-column: 2;
    text-align: right;
    margin-right: 1rem;
}
.rbc-journey .info-box,
.rbc-train .train-fullCIS {
    display:none;
}
#R_ModalTrain .rbc-journey .info-box,
#R_ModalTrain .rbc-train .train-fullCIS {
    display:block;
}


/* ==============================================================================================
=======      =====     ===  =====  ==  ==============      ================  ====================
======  ====  ===  ===  ==   ===   ==  =============  ====  ===============  ====================
======  ====  ==  ========  =   =  ==  =============  ====  ===  ==========  ====================
=======  =======  ========  == ==  ==  ==============  =======    ==  =  ==  ===   ====   =======
=========  =====  ========  =====  ==  ================  ======  ===  =  ==  ==  =  ==  =  ======
===========  ===  ========  =====  ==  ==================  ====  ====    ==  ==     ===  ========
======  ====  ==  ========  =====  ==  =============  ====  ===  ======  ==  ==  =======  =======
======  ====  ===  ===  ==  =====  ==  =============  ====  ===  ===  =  ==  ==  =  ==  =  ======
=======      =====     ===  =====  ==        ========      ====   ===   ===  ===   ====   =======
============================================================================================== */
/* 2024 DEC 28 : Contain SpoiltCat Markup Language elements */
.scml-container {
    container-name: scml-block;
    container-type: inline-size;
    display: block;
    width: clamp(340px, 96%, 64ch);
    margin-inline: auto;
    padding: 1rem;
    border: 2px solid var(--shadow);
    border-radius: 2px;
}

/* ============================================================================================
======    ==        ==    ==  =======  ==        ==       ======  =====       ===  ====  ======
=======  ======  ======  ===   ======  ==  ========  ====  ====    ====  ====  ==   ==   ======
=======  ======  ======  ===    =====  ==  ========  ====  ===  ==  ===  ====  ===  ==  =======
=======  ======  ======  ===  ==  ===  ==  ========  ===   ==  ====  ==  ===   ===  ==  =======
=======  ======  ======  ===  ===  ==  ==      ====      ====  ====  ==      ======    ========
=======  ======  ======  ===  ====  =  ==  ========  ====  ==        ==  ====  =====  =========
=======  ======  ======  ===  =====    ==  ========  ====  ==  ====  ==  ====  =====  =========
=======  ======  ======  ===  ======   ==  ========  ====  ==  ====  ==  ====  =====  =========
======    =====  =====    ==  =======  ==        ==  ====  ==  ====  ==  ====  =====  =========
===============================================================================================
// 2024 JUL 28 : ALPHA
*/
/* Saturate Colours for non-dark-mode displays */
@media (prefers-color-scheme: light) {
    .itinerary {filter: saturate(2);}
}


[class^="trip"] {
    display: flex;
    /* flex-direction: row-reverse; */
    position: relative;
    padding:0 !important;
    border:3px solid var(--col_trip);
    border-right: 0.5ch solid var(--col_trip);
    border-radius:unset !important;
}
.edge {
    writing-mode:tb;
    text-orientation:upright;
    text-align:center;
    font-family:monospace;
    font-variant: all-small-caps;
    letter-spacing: -0.2ch;
    margin-right:1ch;
    padding:0.25ch;
    background:var(--col_trip);
    color:var(--background);
}

[class^="trip"] span.human-duration {
    grid-area:empty;
    justify-self:end;
    padding-right:1ch;
    white-space:nowrap;
}
[class^="trip"] .arrdep {
    font-size:var(--rfs-4);
    border-bottom:unset !important;
}
.arrdep {
    flex-basis:100%;
    padding-top:1ch;
}

/* If an explore follows an explore then add a gap */
.explore+.explore {
    margin-top: 1ch;
}


/*
=======================================================================================
======       =====================  ========    ==  =======  ==  ====  ===      =======
======  ====  ====================  =========  ===   ======  ==  ===  ===  ====  ======
======  ====  ====================  =========  ===    =====  ==  ==  ====  ====  ======
======  ===   ====================  =========  ===  ==  ===  ==  =  ======  ===========
======      ======================  =========  ===  ===  ==  ==     ========  =========
======  ====  ====================  =========  ===  ====  =  ==  ==  =========  =======
======  ====  ====================  =========  ===  =====    ==  ===  ===  ====  ======
======  ====  ====================  =========  ===  ======   ==  ====  ==  ====  ======
======  ====  =                  =        ==    ==  =======  ==  ====  ===      =======
=======================================================================================
// 2024 AUG 19
<ol class="r__links">
    <li><a href=""></a></li>
    ...
</ol>
*/
.r__links {
    max-width:96%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    padding:1rem 0;
    border:1px solid var(--hued);
}
.r__links > ul, .r__links > li {display:contents;}
.r__links a {
    width: 300px;
    width: clamp(160px, 45%, 380px);
    padding: 0.5rem 1rem 0.6rem;
    border-radius: 0.5rem;
    text-align: center;
    border:1px solid var(--shadow);
}
.r__links a:hover {
    background: var(--color-hover);
    filter:saturate(0.34);
}
/* .r__links a:hover {background:transparent;box-shadow:none;} */
/* 
==============================================================================
======       =====================        =====  =====      =====      =======
======  ====  =======================  =======    ====  ===  ===  ====  ======
======  ====  =======================  ======  ==  ===  ====  ==  ====  ======
======  ===   =======================  =====  ====  ==  ===  ====  ===========
======      =========================  =====  ====  ==      =======  =========
======  ====  =======================  =====        ==  ===  ========  =======
======  ====  =======================  =====  ====  ==  ====  ==  ====  ======
======  ====  =======================  =====  ====  ==  ===  ===  ====  ======
======  ====  =                  ====  =====  ====  ==      =====      =======
==============================================================================
// 2024 AUG 19
<section class="r__tabs">
    <ol class="tab-list">
        <li id="r_t-###"><a href="r_t-###">TAB</a></li>
        ...
    </ol>
    <div id="r_t-page-###" class="tab-page">
        Lorem ipsum dolor sit amet ...
    </div>
    ...
</section>
*/
/* =^.^=BAD But Works. Forces scroll-to-top when changing tabs */
/* html:has(.r__tabs-css) {scroll-padding-top:99rem;} */

.r__tabs {
    --tab-page-display-style: block;
}
.r__tabs > .tab-list {
    display:flex;
    gap: 1ch;
    border-bottom:2px solid var(--accent);
}
.r__tabs > .tab-list > li {
    cursor:pointer;
    padding-inline:1ch;
    background:var(--accent);
    opacity:0.6;
}
.r__tabs > .tab-list > li.active,
.r__tabs > .tab-list:not(:has(.active)) > li:first-child {
    opacity:1;
}


.r__tabs > .tab-page {display:none;}            /* HIDE ALL tab pages */
.r__tabs > .tab-page.active,                    /* DISPLAY active tab page */
.r__tabs:not(:has(.active)) > :nth-child(2)     /* DISPLAY first tab page (2nd element after tab-list) if NONE are .active*/
{
    display:var(--tab-page-display-style);
}



/* ==========================================================================================================
=========  =====  =======  ==    ==  =====  =====  =====        ==    ====    ====  =======  ===      =======
========    ====   ======  ===  ===   ===   ====    =======  ======  ====  ==  ===   ======  ==  ====  ======
=======  ==  ===    =====  ===  ===  =   =  ===  ==  ======  ======  ===  ====  ==    =====  ==  ====  ======
======  ====  ==  ==  ===  ===  ===  == ==  ==  ====  =====  ======  ===  ====  ==  ==  ===  ===  ===========
======  ====  ==  ===  ==  ===  ===  =====  ==  ====  =====  ======  ===  ====  ==  ===  ==  =====  =========
======        ==  ====  =  ===  ===  =====  ==        =====  ======  ===  ====  ==  ====  =  =======  =======
======  ====  ==  =====    ===  ===  =====  ==  ====  =====  ======  ===  ====  ==  =====    ==  ====  ======
======  ====  ==  ======   ===  ===  =====  ==  ====  =====  ======  ====  ==  ===  ======   ==  ====  ======
======  ====  ==  =======  ==    ==  =====  ==  ====  =====  =====    ====    ====  =======  ===      =======
========================================================================================================== */
/* 2024 NOV 14 : Put all animations behind no motion preference */
@media (prefers-reduced-motion: no-preference) {
    /* default to slower hover background highlighting */
    a:hover {
        transition:background 0.4s;
    }
    .text-preview:hover {
        transition: scale 0.4s;
        scale:1.01;
    }    
}

@keyframes delayed-fade-in {
    from {opacity:0}
    50%  {opacity:0}
    100% {opacity:1}
}

/* Spining 'loading wait' ring */
.lds-dual-ring img {z-index:2}
.lds-dual-ring {
    /* change color here */
    color: var(--modal-text);
}
.lds-dual-ring:after {
    position:absolute;
    inset: 40% calc(50% - 32px);
    opacity: 0.5;
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: lds-dual-ring 2s linear 5;
}
@keyframes lds-dual-ring {
    from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
}



/* ==================================================================================================================
=========  =====       ===  =====  ==    ==  =======  ===============  ======        ==       ===    ==        ======
========    ====  ====  ==   ===   ===  ===   ======  ==============  =======  ========  ====  ===  ======  =========
=======  ==  ===  ====  ==  =   =  ===  ===    =====  =============  ========  ========  ====  ===  ======  =========
======  ====  ==  ====  ==  == ==  ===  ===  ==  ===  ============  =========  ========  ====  ===  ======  =========
======  ====  ==  ====  ==  =====  ===  ===  ===  ==  ===========  ==========      ====  ====  ===  ======  =========
======        ==  ====  ==  =====  ===  ===  ====  =  ==========  ===========  ========  ====  ===  ======  =========
======  ====  ==  ====  ==  =====  ===  ===  =====    =========  ============  ========  ====  ===  ======  =========
======  ====  ==  ====  ==  =====  ===  ===  ======   ========  =============  ========  ====  ===  ======  =========
======  ====  ==       ===  =====  ==    ==  =======  =======  ==============        ==       ===    =====  =========
================================================================================================================== */
/* 2024 NOV 09 */
.edit-form {
    /* width:clamp(360px, 100%, 480px); */
    margin-inline:auto;
}
.edit-form form {
    width:clamp(320px, 98%, 380px);
    margin-inline:auto;
    padding:2ch;
    display:grid;
    grid-template-columns:auto 1fr;
    justify-content:center;
    align-items:center;
    gap:1ch;
}
.edit-form fieldset {
    padding:2ch;
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: center;
    gap:1ch;
}
.edit-form label {
    justify-self:self-end;
}
.edit-form textarea {
    min-width:24ch;
    min-height:4ch;
    padding:1ch;
}


/* ============================================================================== */
/* =======      =====================  ==========     ====      ====      ======= */
/* ======  ====  ====================  =========  ===  ==  ====  ==  ====  ====== */
/* ======  ====  ====================  ===  ===  ========  ====  ==  ====  ====== */
/* =======  =======    ====   ===  ==  ==    ==  =========  ========  =========== */
/* =========  =====  =  ==     ======  ===  ===  ===========  ========  ========= */
/* ===========  ===  =  ==  =  ==  ==  ===  ===  =============  ========  ======= */
/* ======  ====  ==    ===  =  ==  ==  ===  ===  ========  ====  ==  ====  ====== */
/* ======  ====  ==  =====  =  ==  ==  ===  ====  ===  ==  ====  ==  ====  ====== */
/* =======      ===  ======   ===  ==  ===   ====     ====      ====      ======= */
/* ============================================================================== */
/* 2024 AUG 15 */
.ghost {opacity: 0.2;}
.ghost:hover {opacity:inherit;}
.fourohfour {
    grid-column:1/-1;
}
img.fourohfour {
    /* margin:4ch 1ch 2ch; */
    margin:1ch;
    object-fit:contain !important;
}
#spoiltdog {
    width: 34%;
    max-width:270px;
    padding: 8% 4%;
    margin: 5%auto;
    background: hsla(34, 34%, 34%, 0.5);
    border-radius: 2rem;
    box-shadow: inset 0 0 4px 0px hsla(0, 0%, 0%, 0.5);
}
/* Footer & Credits Styling */
#footer {
    position:relative;
	grid-row:100;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	align-items:center;
	padding-top:2rem;
    border-top:1px solid var(--background);
	/* border-radius: 9px ; */
}
#footer > * {width:46%; min-width:270px;}
#attribution {width:fit-content;max-width:480px;height:fit-content;padding:1rem;text-align:center;border:1px solid slategray;border-radius:9px;}
#attribution a:not(#nre_logo) {display:block;padding-bottom:1rem;opacity:0.64}
#attribution sub, #attribution sup {display:block;font-size:var(--small);}
#spoiltcat {
    width:fit-content;
    min-width:unset;
    margin: 9px 6px 17px;
    padding: 6px;
    border: 3px solid slategray;
    border-radius: 0px 9px;
    opacity:0.64;
}

#retrogray {
    flex-grow:1;
    width:calc(100vw - 10ch);
    height:12px;
    margin: 1ch 0;
    min-width:270px;
}

/* Debug Styling */
.spoilt_predata {
    z-index:999;
    grid-column:1/-1;
    display:block !important;
    width:clamp(250px, 460px, 1024px);
    overflow:auto;
    margin:1ch;
    padding:1ch;
    white-space:pre-wrap !important;
    font-variant: normal;
    font-size:1.4rem;
    text-align:left !important;
    background:thistle;
    color:black;
    border:3px double whitesmoke;
}
.spoilt_predata > * {
    margin-bottom:1ch;
    padding:0.5ch;
    background:white;
}
.spoilt_predata:hover { background:thistle !important; }

.spoiltcat-log {padding:1ch 1ch 2ch;}
.spoiltcat-log > pre {overflow:auto;background:black;color:green;}
.spoiltcat-log > pre > * {margin-block:1ch;}
.spoiltcat-log > pre > div::before {
    display: inline-block;
    width: 6.5ch;
    content: attr(label);
    font-size:1.2rem;
    text-align: center;
    color: black;
    outline: 2px outset hsl(0, 0%, 50%);
}

.spoiltcat-log .sc-file::before  { background:gray;}
.spoiltcat-log .sc-meth::before  { background:silver;}
.spoiltcat-log .sc-query::before { background:#f29221;}
.spoiltcat-log .sc-cache::before {background:#45758e;}
.spoiltcat-log .sc-API::before   {background:magenta;}

.spoiltcat-log .sc-warn::before   {background:red;}
.spoiltcat-log .sc-alert::before  {background:orange;}
.spoiltcat-log .sc-good::before   {background:green;}
.spoiltcat-log .sc-class::before  {background:silver;}