/*
 * tinytrainset.com
 *
 * Loaded after site.css, so it only states what changes.
 *
 * The idea: a Hornby catalogue from about 1978. Model railway publishing has a
 * register of its own and it is nothing like a software product page. Every
 * item carries a catalogue reference. Specifications are printed as
 * specifications, in a ruled block, with the figures aligned. The livery
 * colours are the real ones. Nothing is soft, nothing floats, and the paper is
 * cream because catalogues were printed on cheap stock.
 *
 * That register is also honest about what the site is: a simulator wrapped in
 * reference material for a hobby that is precise about gauge, radius and
 * clearance. A rounded white card told you none of that.
 *
 * Fixed here as well, because they are faults rather than taste:
 *   - .toggle-btn.active had no rule at all, so the control panel had no
 *     selected state, visible or announced.
 *   - five outline:none rules removed the focus indicator, one of them on a
 *     range input, with nothing put back.
 */

/* ------------------------------------------------------------------ type */

:root {
    /* The scale stopped at 2.488rem. The catalogue plate headings need a top. */
    --step-6: 3.2rem;
    --step-7: 4.2rem;

    --font-catalogue: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-plain: 'Source Sans 3', system-ui, sans-serif;
    --font-spec: ui-monospace, 'SF Mono', Menlo, monospace;

    /* BR maroon, which the site already had and never committed to. */
    --maroon: #6B3A2C;
    --maroon-deep: #4A2619;

    /* Cheap cream catalogue stock rather than a neutral off-white. */
    --cream: #EFE9DC;
    --plate: #FAF7F0;
    --ink: #20180F;
    --ink-soft: #4A3F33;
    --muted: #6A5C4C;
    --rule: #D8CFBD;
    --rule-strong: #B6A991;

    /* Real liveries, used to code the spec blocks. Both clear 7:1 on cream. */
    --br-blue: #1F4E79;
    --br-green: #1F3D2B;
}

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-plain);
}

h1, h2, h3, h4,
.panel-title,
.section-title {
    font-family: var(--font-catalogue);
    letter-spacing: -0.015em;
}

/*
 * Catalogue references, spec labels and anything that names a thing rather than
 * describes it. One mannerism, used everywhere it applies.
 */
.cat-ref,
.masthead-kicker,
.spec-key,
.section-title,
.control-group > label {
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* -------------------------------------------------------------- the nav */

.site-nav {
    background: var(--maroon);
    border-bottom: 4px solid var(--maroon-deep);
}

.site-nav .nav-brand {
    color: #fff;
    font-family: var(--font-catalogue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.site-nav .nav-links a {
    color: #fff;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a[aria-current='page'] {
    background: transparent;
    border-bottom-color: #fff;
}

.site-nav svg.icon {
    stroke: #fff;
}

/* ------------------------------------------------------------- masthead */

/*
 * Full bleed. The plate is ballast photographed from directly above, with the
 * sleeper impressions still in it, greyscale and multiplied over the maroon so
 * it can only darken. White on the flat maroon is 9.26:1 and 14.86:1 over the
 * mid tones of the ballast, so the image cannot make the type worse.
 */
.masthead {
    background-color: var(--maroon);
    background-image: url('/img/ballast.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    border-bottom: 5px solid var(--maroon-deep);
    padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem);
}

.masthead-inner {
    max-width: 66rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.masthead-kicker {
    display: block;
    color: #fff;
    opacity: 0.78;
    margin-bottom: 1rem;
}

.masthead h1 {
    color: #fff;
    font-size: clamp(2rem, 5.5vw, var(--step-6));
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 18ch;
    margin: 0;
    text-wrap: balance;
}

.masthead-standfirst {
    margin-top: 1rem;
    max-width: 48ch;
    font-size: 1.08rem;
    line-height: 1.5;
    color: #fff;
    opacity: 0.9;
}

.masthead.masthead-interior {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
}

.masthead.masthead-interior h1 {
    font-size: clamp(1.75rem, 4.5vw, var(--step-5, 2.488rem));
    max-width: 24ch;
}

/* ----------------------------------------------------------- the pages */

/*
 * site.css collapses fourteen class names into one white 10px-radius box with a
 * soft shadow, which is why every page in the estate looked the same. Retired.
 * The page is held together by rules, weight and space instead.
 */
.content-card,
.info-card,
.article-card,
.blog-card,
.faq-card,
.card,
.result-box,
.history-item,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.balance-card,
.highlight-box {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

body > .container,
.container {
    max-width: 66rem;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/*
 * The catalogue's plate numbering. Sections are numbered R.01, R.02 in the
 * margin, which is how every piece of track in a Hornby catalogue has always
 * been referenced. Generated rather than written into the markup: it is
 * numbering, not content, and a screen reader should get the heading.
 */
main,
.container {
    counter-reset: plate;
}

.container > .content-card,
.container > section {
    counter-increment: plate;
    display: grid;
    gap: 0.4rem clamp(0.75rem, 2vw, 2rem);
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
    border-top: 1px solid var(--rule);
}

.container > .content-card::before,
.container > section::before {
    content: 'R.' counter(plate, decimal-leading-zero);
    font-family: var(--font-spec);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--maroon);
}

@media (min-width: 64rem) {
    .container > .content-card,
    .container > section {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: start;
    }

    .container > .content-card > *,
    .container > section > * {
        grid-column: 2;
    }

    .container > .content-card::before,
    .container > section::before {
        grid-column: 1;
        grid-row: 1 / -1;
        text-align: right;
        border-top: 3px solid var(--maroon);
        padding-top: 0.35rem;
        margin-top: -0.35rem;
    }
}

.container h2 {
    font-size: var(--step-4, 2.074rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 0.6rem;
    max-width: 24ch;
    color: var(--ink);
}

.container h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 1.5rem 0 0.3rem;
    color: var(--ink);
}

.container p,
.container li {
    color: var(--ink-soft);
    max-width: 68ch;
}

.intro {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
}

/*
 * The highlight box was a tinted rounded panel. A catalogue sets an aside as an
 * indented note against a heavy rule, which is quieter and reads as an aside
 * rather than as a second, louder paragraph.
 */
.highlight-box {
    border-left: 4px solid var(--maroon);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------ the control panel */

/*
 * The panel is the catalogue's specification column: ruled, tight, aligned, and
 * set in the same voice as the rest of the page rather than as a separate app.
 */
#controls-panel {
    background: var(--plate);
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--maroon);
    border-radius: 0;
    box-shadow: none;
}

#controls-panel .panel-title {
    font-family: var(--font-catalogue);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.6rem;
}

.control-section + .control-section {
    border-top: 1px solid var(--rule);
    padding-top: 0.9rem;
    margin-top: 0.9rem;
}

.section-title {
    color: var(--maroon);
    margin-bottom: 0.6rem;
}

.control-group > label,
.control-group > .group-label {
    display: block;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.value-display {
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
}

/* ----------------------------------------------------- controls: state */

/*
 * .toggle-btn.active had no rule anywhere in site.css, so six pairs of buttons
 * had no selected state at all: the panel opened claiming nothing was chosen
 * when six things were. The selected state is now carried by fill, weight and
 * aria-pressed together, never by one of them alone.
 */
.toggle-btn {
    background: transparent;
    border: 2px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink-soft);
    font-family: var(--font-plain);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: none;
}

.toggle-btn:hover {
    border-color: var(--maroon);
    color: var(--maroon);
}

.toggle-btn.active,
.toggle-btn[aria-pressed='true'] {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
    font-weight: 700;
}

/*
 * Focus was removed on .toggle-btn, .primary-btn, .secondary-btn, every field
 * and the range input, and replaced on none of them. A keyboard user could not
 * see where they were anywhere in the panel.
 */
.toggle-btn:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--maroon);
    outline-offset: 2px;
}

.site-nav a:focus-visible,
.masthead a:focus-visible,
.editorial-footer a:focus-visible,
footer a:focus-visible {
    outline-color: #fff;
}

/* The range input lost its outline at site.css:1769 and got nothing back. */
input[type='range'] {
    outline: revert;
    accent-color: var(--maroon);
}

input[type='range']:focus-visible {
    outline: 3px solid var(--maroon);
    outline-offset: 4px;
}

.primary-btn {
    background: var(--maroon);
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: var(--font-plain);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.8rem 1.2rem;
}

.primary-btn:hover {
    background: var(--maroon-deep);
}

.secondary-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--font-plain);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.secondary-btn:hover {
    border-color: var(--maroon);
    color: var(--maroon);
}

select {
    border-radius: 0;
    border: 1px solid var(--rule-strong);
    background: var(--plate);
    font-family: var(--font-plain);
    color: var(--ink);
}

/* ------------------------------------------------------- the spec block */

/*
 * Gauge, scale and radius are the numbers this hobby argues about, and they
 * were previously three sentences in a paragraph. Set as a specification: keys
 * in small caps, figures in mono on a common right edge, ruled between.
 */
.spec {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0 1.5rem;
    margin: 1.25rem 0;
    max-width: 34rem;
}

.spec > dt {
    color: var(--muted);
    padding: 0.5rem 0;
    border-top: 1px solid var(--rule);
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    align-self: center;
}

.spec > dd {
    margin: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rule);
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: var(--ink);
}

.spec > dt:first-of-type,
.spec > dd:first-of-type {
    border-top: 2px solid var(--maroon);
}

/* ---------------------------------------------------------- the footer */

.editorial-footer,
footer {
    background: var(--maroon);
    border-top: 5px solid var(--maroon-deep);
    color: #fff;
    margin-top: clamp(2rem, 5vw, 4rem);
}

.editorial-footer a,
footer a {
    color: #fff;
}

/* ------------------------------------------------------------ dark mode */

/*
 * The maroon is dark enough to be legible on cream and too close to a dark
 * ground. On dark it lifts, and the paper becomes a dark board rather than the
 * cream inverted, which would go muddy.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --cream: #16130F;
        --plate: #201B15;
        --ink: #F0EAE0;
        --ink-soft: #CBC0B2;
        --muted: #9C8E7C;
        --rule: #342C23;
        --rule-strong: #4A3F33;
        --maroon: #C87F68;
        --maroon-deep: #A9634D;
    }

    /* On dark the band keeps the deep maroon so white type stays white on dark. */
    :root:not([data-theme='light']) .masthead,
    :root:not([data-theme='light']) .site-nav,
    :root:not([data-theme='light']) .editorial-footer,
    :root:not([data-theme='light']) footer {
        background-color: #4A2619;
    }

    :root:not([data-theme='light']) .toggle-btn.active,
    :root:not([data-theme='light']) .toggle-btn[aria-pressed='true'],
    :root:not([data-theme='light']) .primary-btn {
        background: #8E4C38;
        border-color: #8E4C38;
        color: #fff;
    }
}

/* ---------------------------------------------------------------- print */

@media print {
    .site-nav,
    #controls-panel,
    #scene-container,
    .editorial-footer,
    footer,
    .book-plug,
    .adsbygoogle {
        display: none !important;
    }

    .masthead {
        background: none;
        color: #000;
        border-bottom: 2px solid #000;
    }

    .masthead h1,
    .masthead-kicker,
    .masthead-standfirst {
        color: #000;
        opacity: 1;
    }
}

/*
 * A placeholder is a hint, not a value.
 *
 * The fields on these pages were enlarged so the figure people type is legible
 * at the scale of the answer. At that size a placeholder set in the input's own
 * colour and weight reads as a filled field, and somebody arrives at a form that
 * looks already answered. Every field here carries a visible label, so the
 * placeholder is free to recede.
 */
input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* placeholder specificity */
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* ------------------------------------------- skipping past the navigation */

/*
 * No page on the site had a skip link, and the nav sits above everything on
 * every one of them. Visible on focus only, and it has to sit above the scene
 * canvas, which paints over anything in normal flow.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--maroon);
    color: #FFF;
    font-family: var(--font-plain);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------- when the simulator cannot be shown */

/*
 * A WebGL failure, a blocked CDN or a fault during set-up used to leave an
 * empty canvas and no explanation at all, which reads as a broken page rather
 * than a browser that cannot do it.
 */
.noscript-note,
.sim-error {
    font-family: var(--font-plain);
    border: 1px solid var(--rule-strong);
    border-left: 4px solid var(--maroon);
    background: var(--plate);
    color: var(--ink-soft);
    padding: 1rem 1.15rem;
    margin: 1rem 0;
}

.sim-error {
    position: absolute;
    inset: 1rem;
    overflow: auto;
    margin: 0;
}

.sim-error p {
    margin: 0 0 0.5rem;
}

.sim-error p:last-child {
    margin-bottom: 0;
}

.sim-error-title {
    font-family: var(--font-catalogue);
    font-weight: 700;
    color: var(--ink);
}

/* ------------------------------------------------ the build mode status line */

#build-status {
    font-style: normal;
    border-top: 1px solid var(--rule);
    padding-top: 0.5rem;
}

/* ------------------------------------------------------------ brand mark */

/*
 * The mark is not an icon from the shared set and never will be, so it does
 * not carry svg.icon: the design build refreshes those from a registry and
 * would rewrite this one back to whatever it holds. Same sizing and weight,
 * its own class.
 */
.brand-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.brand-mark-lg {
    width: 1.35em;
    height: 1.35em;
}