/* ============================================================================
   site.css  -  joewfoley.net main stylesheet  (live since 2026-10-22)
   ----------------------------------------------------------------------------
   The homepage stylesheet (formerly its inline <style> block; background path
   now absolute). Night mode graduated from the Test Lab on 2026-10-22.
   Night skin: site-dark.css. Theme switch logic: /assets/js/theme.js.
   The Test Lab section at the end is scoped to html.lab and never reaches a
   public page (standard_websites.md s11.7).
   ============================================================================ */

/* =========================================
   TYPOGRAPHY SYSTEM
   Playfair Display: hero and headings.
   Source Sans 3: well-weighted body copy.
   Fraunces: retained for selected project-card headings.
   ========================================= */
:root {
    --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-ancient-display: "Cormorant Garamond", Georgia, serif;
    --font-beatles-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-leave-display: "Fraunces", Georgia, "Times New Roman", serif;
    --ink: #0f2933;
    --ink-deep: #081c24;
    --terracotta: #9a3412;
    --teal: #2d4f5b;
    --cream: #fdf6e3;
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-image: url('/Background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ink);
    min-height: 100vh;
    font-family: var(--font-body);
    letter-spacing: -0.012em;
}

h1 {
    font-family: var(--font-display);
    font-weight: 850;
    line-height: 0.92;
    letter-spacing: -0.055em;
    text-shadow: 0 2px 18px rgba(253, 246, 227, 0.48);
}

h2 {
    font-family: var(--font-body);
    font-weight: 900;
    letter-spacing: 0.22em;
}

h3 {
    font-family: var(--font-display);
    font-weight: 760;
    letter-spacing: -0.028em;
    line-height: 1.18;
}

p {
    line-height: 1.68;
}

/* Core Function card titles share the icon row; body copy remains below. */
#core-functions .glass {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
}

#core-functions .glass > i {
    grid-column: 1;
    margin: 0;
}

#core-functions .glass > h3 {
    grid-column: 2;
    margin-bottom: 0;
}

#core-functions .glass > p {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
}

header p {
    letter-spacing: 0.018em;
    text-transform: lowercase;
}

/* =========================================
   OPAL GLASS CARDS
   Stronger edge definition so the glass remains visible over the image.
   ========================================= */
.glass {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(253, 246, 227, 0.58) 42%, rgba(223, 239, 236, 0.46)),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(188, 108, 77, 0.13), transparent 32%);
    backdrop-filter: blur(18px) saturate(1.22);
    -webkit-backdrop-filter: blur(18px) saturate(1.22);
    border: 1px solid rgba(255, 255, 255, 0.72);
    outline: 1px solid rgba(188, 108, 77, 0.16);
    box-shadow:
        0 18px 46px rgba(8, 28, 36, 0.15),
        0 4px 14px rgba(8, 28, 36, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(8, 28, 36, 0.035);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.glass:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 24px 58px rgba(8, 28, 36, 0.18),
        0 8px 20px rgba(8, 28, 36, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(8, 28, 36, 0.04);
}

.glass p {
    font-weight: 560;
    letter-spacing: -0.006em;
}

/* =========================================
   PROJECT CARD SKINS
   One shared geometry with a small visual signature from each target site.
   ========================================= */
.project-card {
    --project-accent: #2d4f5b;
    --project-accent-deep: #0f2933;
    --project-surface: rgba(255, 255, 255, 0.78);
    --project-surface-soft: rgba(253, 246, 227, 0.72);
    --project-stripe: linear-gradient(90deg, var(--project-accent), var(--project-accent-deep));
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-color: rgba(255, 255, 255, 0.78);
    background:
        linear-gradient(145deg, var(--project-surface), var(--project-surface-soft)),
        rgba(255, 255, 255, 0.72);
}

.project-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.42rem;
    background: var(--project-stripe);
}

.project-card-link {
    color: inherit;
    text-decoration: none;
}

.project-card h3 {
    padding-top: 0.24rem;
    padding-right: 5.25rem;
}

.project-card h3 i {
    color: var(--project-accent) !important;
}

.project-card .site-link {
    color: var(--project-accent-deep);
}

.project-card > .project-status {
    position: absolute;
    z-index: 1;
    top: 1.2rem;
    right: 1.25rem;
    margin-top: 0;
    padding-top: 0.36rem;
    padding-bottom: 0.36rem;
    color: var(--project-accent-deep);
    background: var(--project-surface-soft);
    border-color: var(--project-accent);
}

.project-leave {
    --project-accent: #8b2252;
    --project-accent-deep: #3f1847;
    --project-surface: rgba(250, 243, 230, 0.92);
    --project-surface-soft: rgba(240, 226, 191, 0.82);
    --project-stripe: linear-gradient(90deg, #3f1847 0 34%, #8b2252 34% 67%, #dfc594 67%);
}

/* AussieLeaveCalculator.com retains its established display face for the card heading. */
.project-leave h3 {
    font-family: var(--font-leave-display);
}

.project-energy {
    --project-accent: #c86b4c;
    --project-accent-deep: #2e5339;
    --project-surface: rgba(255, 251, 245, 0.92);
    --project-surface-soft: rgba(232, 220, 202, 0.84);
    --project-stripe: linear-gradient(90deg, #2e5339 0 58%, #c86b4c 58% 76%, #e8dcca 76%);
}

.project-compliance {
    --project-accent: #534b52;
    --project-accent-deep: #2d232e;
    --project-surface: rgba(250, 249, 245, 0.94);
    --project-surface-soft: rgba(224, 221, 207, 0.88);
    --project-stripe: linear-gradient(90deg, #2d232e, #474448 72%, #e0ddcf 72%);
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(83, 75, 82, 0.055) 31px 32px),
        linear-gradient(145deg, var(--project-surface), var(--project-surface-soft));
}

.project-ancient {
    --project-accent: #d4af37;
    --project-accent-deep: #14162b;
    --project-surface: rgba(255, 253, 248, 0.94);
    --project-surface-soft: rgba(246, 241, 231, 0.86);
    --project-stripe: linear-gradient(90deg, #14162b 0 46%, #d4af37 46% 82%, #8b2d2b 82%);
}

.project-vox {
    --project-accent: #d97706;
    --project-accent-deep: #0b252c;
    --project-surface: rgba(255, 255, 255, 0.88);
    --project-surface-soft: rgba(252, 248, 238, 0.82);
    --project-stripe: linear-gradient(90deg, #0b252c, #164e5b 56%, #d97706 56%);
    /* Reuse the Core Functions frosted-glass surface; the project-card stripe remains above it. */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(253, 246, 227, 0.58) 42%, rgba(223, 239, 236, 0.46)),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(188, 108, 77, 0.13), transparent 32%);
}

.project-opfolio {
    --project-accent: #c9a86a;
    --project-accent-deep: #101010;
    --project-surface: rgba(247, 243, 235, 0.94);
    --project-surface-soft: rgba(253, 252, 250, 0.86);
    --project-stripe: linear-gradient(90deg, #101010 0 48%, #c9a86a 48% 78%, #d6d0c7 78%);
}

.project-opfolio h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
}

.project-beatles {
    --project-accent: #d49a3b;
    --project-accent-deep: #3a2e1d;
    --project-surface: rgba(255, 253, 247, 0.94);
    --project-surface-soft: rgba(246, 228, 189, 0.84);
    --project-stripe: repeating-linear-gradient(120deg, #3a2e1d 0 14px, #d49a3b 14px 28px, #f2b84b 28px 42px);
    background:
        radial-gradient(circle at 90% 18%, rgba(212, 154, 59, 0.18) 0 8%, transparent 8.5%),
        linear-gradient(145deg, var(--project-surface), var(--project-surface-soft));
}

/* BeatlesAnswers.org keeps its established editorial display face. */
.project-beatles h3 {
    font-family: var(--font-beatles-display);
}

.project-safety {
    --project-accent: #24282b;
    --project-accent-deep: #111315;
    --project-stripe: repeating-linear-gradient(135deg, #ffd21f 0 18px, #17191b 18px 36px);
    border-color: rgba(17, 19, 21, 0.58);
    outline-color: rgba(255, 210, 31, 0.72);
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
        radial-gradient(circle at 82% 86%, rgba(226, 194, 112, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(255, 249, 218, 0.98), rgba(246, 232, 170, 0.98));
    box-shadow:
        0 18px 46px rgba(8, 12, 14, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(17, 19, 21, 0.22);
}

.project-safety h3,
.project-safety p {
    color: #17191b !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.project-safety > .project-status {
    color: #ffd21f;
    background: #24282b;
    border-color: rgba(17, 19, 21, 0.68);
}

.project-show {
    --project-accent: #c2413c;
    --project-accent-deep: #242126;
    --project-surface: rgba(250, 247, 241, 0.94);
    --project-surface-soft: rgba(229, 220, 210, 0.86);
    --project-stripe: repeating-linear-gradient(90deg, #242126 0 8px, #c2413c 8px 12px, #242126 12px 18px, #e5dcd2 18px 22px);
}

.project-bins {
    --project-accent: #d97828;
    --project-accent-deep: #183a34;
    --project-surface: rgba(255, 253, 245, 0.94);
    --project-surface-soft: rgba(235, 228, 210, 0.86);
    --project-stripe: linear-gradient(90deg, #183a34 0 42%, #be2d35 42% 56%, #d9a500 56% 70%, #2f7a46 70% 84%, #d97828 84%);
}

.project-egypt {
    --project-accent: #c28a25;
    --project-accent-deep: #174c73;
    --project-surface: rgba(247, 244, 234, 0.94);
    --project-surface-soft: rgba(221, 208, 168, 0.86);
    --project-stripe: repeating-linear-gradient(90deg, #174c73 0 24px, #c28a25 24px 34px, #9f4932 34px 44px, #c28a25 44px 54px);
}


/* =========================================
   ACTIVITY TICKER
   Static, hand-maintained entries with seven compact native-derived themes.
   Tokens are re-expressed locally; no managed-site stylesheet is imported.
   ========================================= */
.activity-ticker {
    --activity-accent: #8f6c16;
    --activity-deep: #14162b;
    --activity-surface: rgba(246, 241, 231, 0.96);
    --activity-surface-soft: rgba(255, 253, 248, 0.82);
    --activity-border: rgba(143, 108, 22, 0.42);
    --activity-font: var(--font-ancient-display);
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--activity-border);
    background:
        linear-gradient(135deg, var(--activity-surface), var(--activity-surface-soft));
    color: var(--activity-deep);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.activity-ticker::before {
    position: absolute;
    inset: 0 0 auto;
    height: 0.28rem;
    background: var(--activity-accent);
    content: "";
}

/* Native sources: Ancient Measures v8 site.css; Leave public Berries skin;
   Beatles public Honeycomb skin; Energy v2 Harvest; Compliance v1 Ledger;
   Brisbane v3 Citrus; Gods of Egypt live-site styles; Opfolio V6 folio tokens;
   Vox Liberata v9 public skin. */
.activity-theme-ancient {
    --activity-accent: #8f6c16;
    --activity-deep: #14162b;
    --activity-surface: rgba(246, 241, 231, 0.96);
    --activity-surface-soft: rgba(255, 253, 248, 0.82);
    --activity-border: rgba(143, 108, 22, 0.42);
    --activity-font: var(--font-display);
}

.activity-theme-leave {
    --activity-accent: #8b2252;
    --activity-deep: #2c1a2e;
    --activity-surface: rgba(240, 226, 191, 0.96);
    --activity-surface-soft: rgba(250, 243, 230, 0.84);
    --activity-border: #b29176;
    --activity-font: var(--font-beatles-display);
}

.activity-theme-beatles {
    --activity-accent: #9c6b1f;
    --activity-deep: #3a2e1d;
    --activity-surface: rgba(255, 252, 244, 0.96);
    --activity-surface-soft: rgba(253, 247, 234, 0.86);
    --activity-border: rgba(156, 107, 31, 0.46);
    --activity-font: var(--font-beatles-display);
}

.activity-theme-energy {
    --activity-accent: #2e5339;
    --activity-deep: #2c2926;
    --activity-surface: rgba(255, 251, 245, 0.96);
    --activity-surface-soft: rgba(232, 220, 202, 0.86);
    --activity-border: #b7aa97;
    --activity-font: var(--font-beatles-display);
}

.activity-theme-compliance {
    --activity-accent: #2d232e;
    --activity-deep: #2d232e;
    --activity-surface: rgba(241, 240, 234, 0.96);
    --activity-surface-soft: rgba(250, 249, 245, 0.84);
    --activity-border: #a9a28e;
    --activity-font: var(--font-display);
}

.activity-theme-brisbane {
    --activity-accent: #235748;
    --activity-deep: #152421;
    --activity-surface: rgba(244, 240, 227, 0.96);
    --activity-surface-soft: rgba(255, 253, 245, 0.84);
    --activity-border: #b8b09d;
    --activity-font: var(--font-beatles-display);
}

.activity-theme-egypt {
    --activity-accent: #174c73;
    --activity-deep: #102f45;
    --activity-surface: rgba(247, 244, 234, 0.96);
    --activity-surface-soft: rgba(238, 229, 203, 0.86);
    --activity-border: #c4b47f;
    --activity-font: var(--font-display);
}

.activity-theme-opfolio {
    --activity-accent: #C9A86A;
    --activity-deep: #101010;
    --activity-surface: rgba(247, 243, 235, 0.96);
    --activity-surface-soft: rgba(253, 252, 250, 0.84);
    --activity-border: #D6D0C7;
    --activity-font: "Cormorant Garamond", Georgia, serif;
}

.activity-theme-vox-liberata {
    --activity-accent: #975311;
    --activity-deep: #0b252c;
    --activity-surface: rgba(255, 254, 250, 0.96);
    --activity-surface-soft: rgba(242, 238, 228, 0.86);
    --activity-border: #d8d6cc;
    --activity-font: Georgia, serif;
}

.activity-kicker,
.activity-controls {
    display: flex;
    align-items: center;
}

.activity-kicker {
    justify-content: space-between;
    gap: 1rem;
    color: var(--activity-deep);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.activity-kicker-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.activity-kicker-label i {
    color: var(--activity-accent);
}

.activity-display {
    display: grid;
    gap: 0.6rem;
    box-sizing: border-box;
    height: var(--activity-display-height, 11.6rem);
    min-height: 11.6rem;
    padding: 1.35rem 0 1.1rem;
    align-content: center;
}

.activity-site {
    width: fit-content;
    border: 1px solid var(--activity-border);
    border-radius: 999px;
    background: var(--activity-surface-soft);
    color: var(--activity-deep);
    padding: 0.28rem 0.66rem;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.035em;
}

.activity-link {
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: var(--activity-deep);
    text-decoration: none;
    font-family: var(--activity-font);
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    font-weight: 760;
    letter-spacing: -0.03em;
    line-height: 1.16;
}

.activity-summary {
    max-width: 62ch;
    color: var(--activity-deep);
    font-size: 0.9rem;
    font-weight: 620;
    line-height: 1.55;
}

.activity-post-marker {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 2px solid var(--activity-accent);
    border-radius: 50%;
    background: var(--activity-surface-soft);
    color: var(--activity-accent);
    font-size: 1rem;
    text-align: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.activity-post-marker i {
    color: inherit;
}

.activity-theme-ancient .activity-post-marker {
    border-color: #d4af37;
    background: #14162b;
    color: #d4af37;
}

.activity-theme-ancient .activity-link:hover .activity-post-marker,
.activity-theme-ancient .activity-link:focus-visible .activity-post-marker {
    background: #1e223d;
}

.activity-theme-opfolio .activity-post-marker {
    border-color: #C9A86A;
    background: #2E3D2F;
    color: #F7F3EB;
}

.activity-theme-opfolio .activity-link:hover .activity-post-marker,
.activity-theme-opfolio .activity-link:focus-visible .activity-post-marker {
    background: #101010;
}

.activity-link:hover span,
.activity-link:focus-visible span {
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.18em;
}

.activity-link:hover .activity-post-marker,
.activity-link:focus-visible .activity-post-marker {
    background: var(--activity-surface);
    transform: translateX(0.16rem);
}

.activity-link:focus-visible,
.activity-control:focus-visible {
    outline: 3px solid var(--activity-accent);
    outline-offset: 3px;
}

.activity-controls {
    justify-content: flex-end;
    gap: 0.28rem;
    margin-top: 0.15rem;
}

.activity-control {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border: 1px solid var(--activity-border);
    border-radius: 999px;
    background: var(--activity-surface-soft);
    color: var(--activity-deep);
    font-size: 0.68rem;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.activity-control:hover,
.activity-control:focus-visible {
    background: var(--activity-deep);
    color: var(--activity-surface);
    transform: translateY(-1px);
}

.activity-note {
    margin-top: 0.7rem;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 650;
}

@media (max-width: 640px) {
    .activity-ticker {
        padding: 1.25rem;
    }

    .activity-kicker {
        align-items: flex-start;
    }

    .activity-display {
        --activity-display-height: 13.2rem;
        min-height: 13.2rem;
    }

    .activity-link {
        gap: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity-ticker,
    .activity-link i,
    .activity-control {
        transition: none;
    }
}

.btn-primary {
    background: linear-gradient(135deg, #bc6c4d, #2d4f5b);
    color: var(--cream);
    font-family: var(--font-body);
    font-weight: 850;
    letter-spacing: -0.006em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover {
    transform: scale(1.02);
    filter: saturate(1.08);
    box-shadow: 0 12px 20px -4px rgba(154, 52, 18, 0.34);
}

.text-accent { color: var(--terracotta); }
.text-heading { color: var(--ink-deep); }

.site-link {
    color: var(--terracotta);
    text-decoration: none;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    font-weight: 800;
}

.site-link:hover {
    color: #7c2d12;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
}

footer p,
.glass span {
    font-family: var(--font-body);
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    h1 {
        letter-spacing: -0.045em;
    }

    p {
        line-height: 1.6;
    }
}


/* =========================================
   SITE HEADER AND THEME SWITCH (live 2026-10-22)
   The switch sits top right beside the name. It shows the current mode;
   hover, focus or a first tap opens it to Light / Dark / Auto.
   Hidden without JavaScript (the head snippet adds html.has-theme).
   Night colours for the switch live in site-dark.css.
   ========================================= */
.site-header {
    position: relative;
}

.name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.theme-switch {
    display: none;
    justify-content: flex-end;
    margin: -1.75rem 0 1rem;
}

html.has-theme .theme-switch {
    display: flex;
}

.ts-track {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.76);
    outline: 1px solid rgba(188, 108, 77, 0.16);
    box-shadow: 0 10px 28px rgba(8, 28, 36, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(1.16);
    -webkit-backdrop-filter: blur(14px) saturate(1.16);
    transition: gap 0.25s ease;
}

.ts-track button {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ts-track button:hover {
    background: rgba(188, 108, 77, 0.12);
}

.ts-track button[aria-checked="true"] {
    background: linear-gradient(135deg, #bc6c4d, #2d4f5b);
    color: var(--cream);
}

.ts-track button:focus-visible {
    outline: 3px solid rgba(188, 108, 77, 0.6);
    outline-offset: 2px;
}

/* Collapsed: only the current mode shows. */
.theme-switch:not(:hover):not(:focus-within):not(.open) .ts-track {
    gap: 0;
}

.theme-switch:not(:hover):not(:focus-within):not(.open) button[aria-checked="false"] {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .name-row {
        justify-content: flex-start;
    }

    .theme-switch {
        position: absolute;
        top: 0.35rem;
        right: 0;
        margin: 0;
        z-index: 5;
    }
}

/* Short colour fade when the visitor switches theme (skipped for reduced motion). */
html.theme-fade body,
html.theme-fade .glass,
html.theme-fade h1,
html.theme-fade h2,
html.theme-fade h3,
html.theme-fade p {
    transition: color 0.45s ease, background-color 0.45s ease, border-color 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ts-track,
    .ts-track button {
        transition: none;
    }
}


/* =========================================
   TEST LAB (standard_websites.md s11.7)
   Lab-only rules, scoped with :where(html.lab) so they cannot reach a
   public page. Colours are tokens, so they follow the night skin.
   Keep this section LAST in the file (lab_lint checks from here down).
   ========================================= */
:where(html.lab) .test-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.2rem 0.8rem;
    border: 1.5px solid var(--terracotta);
    border-radius: 999px;
    color: var(--terracotta);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

:where(html.lab) .test-pill:hover {
    background: color-mix(in srgb, var(--terracotta) 14%, transparent);
}

:where(html.lab) .lab-crumb {
    margin-bottom: 0.6rem;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
}

:where(html.lab) .lab-crumb a {
    color: var(--terracotta);
}

:where(html.lab) .lab-theme {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

:where(html.lab) .lab-theme button {
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border: 1px solid color-mix(in srgb, var(--terracotta) 45%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

:where(html.lab) .lab-theme button[aria-pressed="true"] {
    border-color: var(--terracotta);
    background: var(--terracotta);
    color: var(--cream);
}

:where(html.lab)[data-theme="dark"] .lab-theme button[aria-pressed="true"] {
    color: #0a1626;
}

:where(html.lab) .lab-checks {
    margin-top: 1rem;
    padding-left: 1.2rem;
    list-style: disc;
    font-size: 0.85rem;
    line-height: 1.6;
}