/* ── royerramirez.com composition components ──────────────────────────────
   Tokens (--ink, --paper, --yellow …) come from neo-theme.css :root.
   `.rr*` rules are scoped under a `.rr` ancestor so they never collide with
   Bootstrap or the global theme. Interior helpers (.neo-h1, .neo-kicker) are
   safe to apply to bare elements anywhere — they style typography only and do
   not touch descendant links. */

.rr a { color: inherit; text-decoration: none; }

/* Header ---------------------------------------------------------------- */
.rr-header {
    align-items: center;
    border-bottom: 2px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    justify-content: space-between;
    padding: 20px clamp(18px, 3vw, 42px) 18px;
}

.rr-brand {
    display: inline-grid;
    gap: 3px;
    grid-template-columns: repeat(6, clamp(34px, 3.3vw, 46px));
    grid-template-rows: repeat(2, clamp(34px, 3.3vw, 46px));
    transform: rotate(-1deg);
}

.rr-tile {
    align-items: center;
    background: var(--ink);
    border: 2px solid var(--ink);
    color: var(--paper);
    display: grid;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    font-weight: 900;
    justify-items: center;
    letter-spacing: -0.06em;
    line-height: 1;
    place-items: center;
}
.rr-tile--orange { background: var(--orange); color: var(--ink); }
.rr-tile--yellow { background: var(--yellow); color: var(--ink); }
.rr-tile--blue   { background: var(--blue);   color: #fff; }
.rr-tile--green  { background: var(--green);  color: var(--ink); }

.rr-skill {
    font-family: var(--font-mono);
    font-size: clamp(0.62rem, 1vw, 0.78rem);
    letter-spacing: 0.02em;
}

.rr-tile--status { background: var(--field); color: var(--ink); gap: 4px; }
.rr-status-dot {
    animation: rr-pulse 1.4s ease-in-out infinite;
    background: var(--green);
    border: 2px solid var(--ink);
    border-radius: 50%;
    height: 14px; width: 14px;
}
.rr-status-label {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}
@keyframes rr-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.72); }
}

/* Nav ------------------------------------------------------------------- */
.rr-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    font-weight: 700;
    gap: 4px 2px;
    justify-content: flex-end;
    row-gap: 8px;
}
.rr-nav a {
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 8px 14px;
    transition: background .15s ease, border-color .15s ease;
}
.rr-nav a:hover { background: var(--field); border-color: var(--ink); }
.rr-nav a[aria-current="page"] {
    background: var(--paper);
    border-color: var(--ink);
    box-shadow: 3px 3px 0 var(--orange);
}
/* --- Navigation -----------------------------------------------------------
   Desktop: the bar sits inline, the Menu wrapper is transparent, and only the
   Data group is a real dropdown. Mobile: everything collapses behind Menu, so
   links are never hidden off-screen in a scrolling strip.
   Both use native <details>, so this degrades to plain expanded lists. */

/* --- Navigation -----------------------------------------------------------
   .rr-nav is a plain wrapper; .rr-nav-items is the bar. flex:1 because the bar
   is right-aligned inside the header's space-between layout.

   The mobile toggle is a checkbox, not <details>: Chrome does not paint a
   closed <details>'s contents even when author CSS overrides display, which
   left every desktop link laid out but invisible and unclickable. Links now
   live outside any collapsible element. */
.rr-nav { display: block; flex: 1 1 auto; }

/* Visually hidden but focusable, so the menu opens from the keyboard. */
.rr-nav-checkbox {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}
.rr-nav-toggle { display: none; }

.rr-nav-items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
    justify-content: flex-end;
}

.rr-nav-group { position: relative; }
.rr-nav-group > summary {
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    padding: 8px 14px;
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.rr-nav-group > summary::-webkit-details-marker { display: none; }
.rr-nav-group > summary::after {
    content: "";
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: .34em solid currentColor;
    display: inline-block;
    margin-left: .45em;
    vertical-align: .12em;
}
.rr-nav-group > summary:hover { background: var(--field); border-color: var(--ink); }
.rr-nav-group[open] > summary { background: var(--field); border-color: var(--ink); }
.rr-nav-group > summary[aria-current="true"] { background: var(--yellow); border-color: var(--ink); }

.rr-nav-sub {
    background: var(--paper);
    border: var(--border-default);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
}
.rr-nav-sub a { border-radius: 8px; white-space: nowrap; }

/* 959px: the widest viewport at which the eight-item bar still wraps to a
   second row beside the brand. Above it the bar fits on one line. */
@media (max-width: 959px) {
    .rr-nav { position: relative; }
    .rr-nav-toggle {
        align-items: center;
        border: var(--border-default);
        border-radius: 999px;
        box-shadow: 3px 3px 0 var(--ink);
        cursor: pointer;
        display: inline-flex;
        gap: 8px;
        min-height: 44px;
        padding: 8px 16px;
        user-select: none;
    }
    .rr-nav-toggle-bars {
        background: currentColor;
        box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
        display: block;
        height: 2px;
        width: 18px;
    }
    .rr-nav-checkbox:checked ~ .rr-nav-toggle { background: var(--yellow); }
    .rr-nav-checkbox:focus-visible ~ .rr-nav-toggle { outline: 3px solid var(--blue); outline-offset: 2px; }

    .rr-nav-items { display: none; }
    .rr-nav-checkbox:checked ~ .rr-nav-items {
        align-items: stretch;
        background: var(--paper);
        border: var(--border-default);
        box-shadow: var(--shadow-lg);
        display: flex;
        flex-direction: column;
        gap: 2px;
        /* Anchored left, not right: the bar is left-aligned at this
           breakpoint, so right:0 pushed a 220px panel off-screen and clipped
           the links. max-width keeps it inside whichever side it lands on. */
        left: 0;
        right: auto;
        max-width: calc(100vw - 24px);
        min-width: 220px;
        padding: 10px;
        position: absolute;
        top: calc(100% + 10px);
        /* Above sticky page controls (the zones bar sits at 1100). */
        z-index: 1200;
    }
    .rr-nav-items > a,
    .rr-nav-group > summary { align-items: center; border-radius: 10px; display: flex; min-height: 44px; }

    /* Nested group opens in flow rather than as a floating card. */
    .rr-nav-sub {
        border: 0;
        border-left: 2px solid var(--ink);
        box-shadow: none;
        margin: 2px 0 2px 12px;
        padding: 0 0 0 10px;
        position: static;
    }
}

.rr main { overflow: hidden; display: block; }

/* Hero ------------------------------------------------------------------ */
.rr-hero {
    display: grid;
    gap: clamp(30px, 6vw, 88px);
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
    align-items: center;
    min-height: 63vh;
    padding: clamp(52px, 9vw, 118px) clamp(32px, 6vw, 110px) clamp(28px, 5vw, 60px) clamp(18px, 3vw, 42px);
    position: relative;
}
.rr-hero::before, .rr-hero::after {
    border: 2px solid var(--ink);
    content: "";
    position: absolute;
    z-index: -1;
}
.rr-hero::before {
    background: var(--orange);
    border-radius: 50%;
    height: clamp(72px, 11vw, 130px); width: clamp(72px, 11vw, 130px);
    left: clamp(18px, 5vw, 72px);
    top: clamp(36px, 8vw, 96px);
    opacity: .92;
    transform: rotate(6deg);
}
.rr-hero::after {
    background: transparent;
    border: 3px solid var(--orange);
    border-radius: 50%;
    height: clamp(64px, 9vw, 118px); width: clamp(64px, 9vw, 118px);
    bottom: clamp(24px, 6vw, 88px);
    right: clamp(14px, 7vw, 100px);
    opacity: .88;
    transform: rotate(-5deg);
}

.rr-portrait {
    background: var(--orange);
    border: 2px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink);
    margin: 0;
    max-width: 360px;
    padding: 14px;
    position: relative;
    transform: rotate(-3deg);
}
.rr-portrait img {
    aspect-ratio: 1;
    border: 2px solid var(--ink);
    display: block;
    filter: saturate(1.08) contrast(1.04);
    object-fit: cover;
    width: 100%;
}
.rr-portrait-status {
    background: var(--yellow);
    border: 2px solid var(--ink);
    bottom: -20px; left: 26px;
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 1.6vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 8px 10px;
    position: absolute;
    transform: rotate(4deg);
    white-space: nowrap;
}
.rr-portrait--fill {
    align-self: stretch;
    display: flex;
    max-width: none;
}
.rr-portrait--fill img {
    aspect-ratio: auto;
    flex: 1;
    height: 100%;
    min-height: 0;
    object-position: center 22%;
}
/* Hero: don't stretch to the full copy column — keep a controlled portrait
   shape so the photo height reads aligned with the title block. */
.rr-hero .rr-portrait--fill {
    align-self: center;
    display: block;
    max-width: 460px;
}
.rr-hero .rr-portrait--fill img {
    aspect-ratio: 5 / 4;
    flex: none;
    height: auto;
}
.rr-status--coffee { display: none; }
.rr-portrait:has(img:hover) .rr-status--ready,
.rr-portrait:focus-within .rr-status--ready { display: none; }
.rr-portrait:has(img:hover) .rr-status--coffee,
.rr-portrait:focus-within .rr-status--coffee { display: inline; }
.rr-portrait:has(img:hover) .rr-portrait-status,
.rr-portrait:focus-within .rr-portrait-status { background: var(--green); }

/* The hero is a grid whose text column is minmax(0,1fr), so the column can be
   narrower than a 12ch display-size H1. Without these caps the copy block ran
   ~40px past the viewport at 1280-1440 and was clipped by .rr main's
   overflow:hidden. Capping at 100% wraps a word earlier instead of clipping. */
.rr-copy { margin-left: auto; max-width: min(980px, 100%); min-width: 0; }

.rr-kicker {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    display: inline-block;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    font-weight: 800;
    margin: 0 0 clamp(22px, 3vw, 34px);
    padding: 10px 14px;
    transform: rotate(1.5deg);
}
.rr-kicker--history { display: none; }
.rr-kicker:hover { background: var(--blue); color: #fff; }
.rr-kicker:hover .rr-kicker--current { display: none; }
.rr-kicker:hover .rr-kicker--history { display: inline; }

.rr-hero h1 {
    /* Largest scale at which the unbreakable word ENGINEERING fits its grid
       column at every desktop width. At 9.6vw its glyphs ran up to 40px past
       the viewport between 1280 and 1680 and were clipped by main's
       overflow:hidden; measured per-word with Range.getClientRects. */
    font-size: clamp(3rem, 9vw, 9.5rem);
    font-weight: 800;
    letter-spacing: -0.085em;
    line-height: 0.86;
    margin: 0;
    max-width: min(12ch, 100%);
    overflow-wrap: normal;
    word-break: normal;
}

.rr-intro {
    color: var(--ink);
    font-size: clamp(1.6rem, 3.2vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.02;
    margin: clamp(28px, 5vw, 58px) 0 0 0;
    max-width: 900px;
    min-height: 1.1em;
}
.rr-intro .typist {
    animation: rr-caret 1s step-end infinite;
    border-right: 3px solid var(--ink);
    padding-right: 2px;
}
@keyframes rr-caret {
    0%, 100% { border-right-color: var(--ink); }
    50%      { border-right-color: transparent; }
}

.rr-stickers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(28px, 4vw, 46px);
}
.rr-sticker {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 4px 4px 0 var(--ink);
    display: inline-block;
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    font-weight: 800;
    padding: 11px 17px;
}
.rr-sticker:nth-child(1) { background: var(--yellow); transform: rotate(-3deg); }
.rr-sticker:nth-child(2) { background: var(--blue); color: #fff; transform: rotate(2deg); }
.rr-sticker:nth-child(3) { background: var(--orange); transform: rotate(-1deg); }
.rr-sticker:nth-child(4) { background: var(--green); transform: rotate(1.5deg); }

/* Feature strip --------------------------------------------------------- */

/* Live figures under the strip: small stat tiles that link to each dashboard. */
.rr-live {
    background: var(--ink);
    border-bottom: 2px solid var(--ink);
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(4, 1fr);
}
.rr-live-tile {
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 44px;
    min-width: 0;
    padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 34px);
    text-decoration: none;
}
.rr-live-tile:nth-child(1) { background: var(--yellow); }
.rr-live-tile:nth-child(2) { background: var(--orange); }
.rr-live-tile:nth-child(3) { background: var(--blue); color: #fff; }
.rr-live-tile:nth-child(4) { background: var(--green); }
.rr-live-tile:hover { color: var(--ink); }
.rr-live-tile:nth-child(3):hover { color: #fff; }
.rr-live-tile:hover .rr-live-value { text-decoration: underline; }
.rr-live-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }
.rr-live-tile:nth-child(3):focus-visible { outline-color: #fff; }
.rr-live-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rr-live-value {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

/* Section / ConfigMap --------------------------------------------------- */
.rr-section {
    padding: clamp(54px, 8vw, 104px) clamp(18px, 3vw, 42px);
}
.rr-section-label {
    font-size: clamp(2.6rem, 7vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.86;
    margin: 0 0 clamp(18px, 3vw, 34px);
}
.rr-about-grid {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(420px, 1.45fr) minmax(240px, 0.55fr);
}

/* About's portrait variant. Scoped to widths that can actually fit two tracks:
   the minmax floors need 360 + 260 + gap, so below that it must fall back to
   the single-column rule rather than force the document wider than the
   viewport. This lived as an inline style, which outranked every media query
   and made /about/ scroll sideways on phones. */
@media (min-width: 1181px) {
    .rr-about-grid--portrait {
        gap: clamp(28px, 4vw, 48px);
        grid-template-columns: minmax(360px, 1.3fr) minmax(260px, 0.7fr);
    }
}
.rr-configmap {
    align-content: start;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    display: grid;
    grid-template-rows: auto 1fr;
    font-family: var(--font-mono);
    font-size: clamp(0.82rem, 1.15vw, 1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    transform: rotate(-0.4deg);
}
.rr-configmap-bar {
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 14px;
}
.rr-configmap-title { font-size: clamp(0.95rem, 1.3vw, 1.15rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-configmap-badge {
    background: var(--green);
    border: 2px solid var(--paper);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 4px 7px;
    text-transform: uppercase;
    white-space: nowrap;
}
.rr-configmap-body { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.rr-configmap-lines, .rr-configmap-code { padding: 18px 0; margin: 0; }
.rr-configmap-lines {
    background: var(--field);
    border-right: 2px solid var(--ink);
    color: var(--muted);
    padding-inline: 12px;
    text-align: right;
    user-select: none;
}
.rr-configmap-code { color: var(--ink); overflow-x: auto; padding-inline: 18px; white-space: pre; }
.rr-k { color: #9a4c00; }
.rr-v { color: #1f5f99; }
.rr-s { color: #316b1f; }
.rr-c { color: var(--muted); }

.rr-panel {
    background: rgba(247, 244, 239, 0.86);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: clamp(18px, 2vw, 26px);
}
.rr-panel p {
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.06;
    margin: 0;
}
.rr-panel p + p {
    color: var(--muted);
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.rr-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-chip {
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 5px 7px;
    text-transform: uppercase;
}
.rr-chip:nth-child(2) { background: var(--green); }
.rr-chip:nth-child(3) { background: var(--orange); }

/* Copy-panel accents (links + lead initial) ----------------------------- */
.rr-prose-section { padding-top: clamp(28px, 4vw, 52px); }
.rr-prose-section .rr-panel p {
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    line-height: 1.12;
}
.rr-prose-section .rr-panel p + p {
    font-size: clamp(1.02rem, 1.3vw, 1.25rem);
    line-height: 1.32;
}
.rr-panel p > b:first-child {
    color: var(--orange);
    font-weight: 900;
}
.rr-panel a {
    background: linear-gradient(var(--yellow), var(--yellow)) no-repeat;
    background-position: 0 88%;
    background-size: 100% 36%;
    color: var(--ink);
    padding: 0 2px;
    text-decoration: none;
    transition: background-size 0.18s ease;
}
.rr-panel a:hover { background-size: 100% 100%; }

/* Load-more bar --------------------------------------------------------- */
.rr-loadmore {
    background: var(--orange);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    display: block;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    padding: 18px clamp(18px, 3vw, 42px);
}
.rr-loadmore:hover { background: var(--yellow); }
.rr-loadmore::after { content: " ->"; }

/* Index notes [01]..[06] ------------------------------------------------ */
.rr-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.rr-note {
    background: rgba(247, 244, 239, 0.78);
    border-bottom: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: clamp(18px, 3vw, 38px);
    transition: background 180ms ease, transform 180ms ease;
}
.rr-note:nth-child(3n) { border-right: 0; }
.rr-note:hover { background: var(--yellow); transform: translateY(-6px); }
.rr-note:nth-child(3n+2):hover { background: var(--blue); color: #fff; }
.rr-note:nth-child(3n+2):hover p { color: #fff; }
.rr-note:nth-child(3n):hover { background: var(--green); }
.rr-note strong {
    display: block;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: auto;
}
.rr-note p {
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.2;
    margin: 28px 0 0;
}
.rr-note span { font-weight: 800; margin-top: 18px; }
.rr-note span::after { content: " ->"; }

/* Footer ---------------------------------------------------------------- */
.rr-footer {
    align-items: center;
    background: var(--ink);
    border-top: 2px solid var(--ink);
    color: var(--paper);
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    justify-content: space-between;
    margin-top: auto;
    padding: 22px clamp(18px, 3vw, 42px);
}
.rr-footer a { color: var(--paper); text-decoration: none; }
.rr-footer-left { align-items: center; display: flex; gap: 18px; }
.rr-footer-mark {
    background: var(--yellow);
    border: 2px solid var(--paper);
    color: var(--ink);
    font-weight: 900;
    letter-spacing: -0.06em;
    padding: 4px 9px;
    transform: rotate(-3deg);
}
.rr-footer-socials { display: flex; gap: 14px; }
.rr-footer-socials a {
    align-items: center;
    display: inline-flex;
    line-height: 1;
    transition: color .15s ease, transform .15s ease;
    /* The icons are 20-22px, well under the 44px minimum touch target both
       Apple and Google specify. Grow the hit area without growing the icon;
       the flex centring keeps the glyph where it was. */
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}
.rr-footer-socials a:hover { color: var(--yellow); transform: translateY(-2px); }
.rr-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.rr-footer-email {
    border-bottom: 2px solid var(--yellow);
    font-weight: 800;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    letter-spacing: -0.03em;
}
.rr-footer-email:hover { color: var(--yellow); }
.rr-footer-meta { color: rgba(247, 244, 239, 0.62); font-size: 0.82rem; font-weight: 600; }

/* Document pages (resume / thesis PDF preview) -------------------------- */
.doc-page { --r-shadow: 0 12px 40px rgba(8, 8, 8, 0.12); }
.doc-page .page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 48px) clamp(18px, 3vw, 42px) 80px;
}
.doc-page .page-kicker {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin: 0 0 8px;
}
.doc-page h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin: 0 0 12px;
    max-width: 24ch;
}
.doc-page .lede {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    color: var(--muted);
    max-width: 52ch;
    margin: 0 0 20px;
}
.doc-page .sticker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.doc-page .sticker {
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
}
.doc-page .sticker:nth-child(1) { background: var(--yellow); }
.doc-page .sticker:nth-child(2) { background: var(--orange); }
.doc-page .sticker:nth-child(3) { background: var(--blue); color: #fff; }
.doc-page .sticker:nth-child(4) { background: var(--green); }
.doc-page .layout {
    display: grid;
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}
@media (min-width: 900px) {
    .doc-page .layout {
        grid-template-columns: minmax(260px, 340px) 1fr;
        align-items: stretch;
    }
    .doc-page .preview-wrap { height: 100%; min-height: 0; }
    .doc-page .preview-body { min-height: 0; }
}
.doc-page .panel {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: var(--r-shadow);
    padding: clamp(18px, 2.5vw, 24px);
}
.doc-page .panel h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 14px;
    font-weight: 700;
}
.doc-page .panel p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 14px;
}
.doc-page .panel p:last-of-type { margin-bottom: 24px; }
.doc-page .highlights {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.doc-page .highlights li {
    position: relative;
    padding-left: 1.1em;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.doc-page .highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--orange);
    border: 2px solid var(--ink);
    border-radius: 1px;
    transform: rotate(45deg);
}
.doc-page .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.doc-page .rbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    padding: 14px 18px;
    border-radius: 10px;
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.doc-page .rbtn:active { transform: scale(0.98); }
.doc-page .rbtn-primary {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 4px 4px 0 var(--yellow);
}
.doc-page .rbtn-primary:hover { box-shadow: 6px 6px 0 var(--orange); }
.doc-page .rbtn-secondary {
    background: var(--paper);
    color: var(--ink);
}
.doc-page .rbtn-secondary:hover { background: var(--field); }
.doc-page .hint {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.45;
}
.doc-page .preview-wrap {
    display: flex;
    flex-direction: column;
    min-height: min(72vh, 720px);
    background: var(--field);
    border: 2px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--r-shadow);
}
.doc-page .preview-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 2px solid var(--ink);
    flex-shrink: 0;
}
.doc-page .preview-dots { display: flex; gap: 6px; }
.doc-page .preview-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.doc-page .preview-dots span:nth-child(1) { background: #ff6b6b; }
.doc-page .preview-dots span:nth-child(2) { background: var(--yellow); }
.doc-page .preview-dots span:nth-child(3) { background: #82d173; }
.doc-page .preview-title {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-page .preview-badge {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--blue);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}
.doc-page .preview-body {
    position: relative;
    flex: 1;
    min-height: 400px;
    background: #e8e4dc;
}
.doc-page .preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--field);
    z-index: 1;
    transition: opacity 0.35s ease;
}
.doc-page .preview-loading.hidden {
    opacity: 0;
    pointer-events: none;
}
.doc-page .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--line);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: doc-spin 0.7s linear infinite;
}
@keyframes doc-spin { to { transform: rotate(360deg); } }
.doc-page .preview-body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.doc-page .sticky-actions { display: none; }
@media (max-width: 899px) {
    .doc-page .sticky-actions {
        display: flex;
        gap: 10px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(247, 244, 239, 0.92);
        backdrop-filter: blur(10px);
        border-top: 2px solid var(--ink);
        z-index: 10;
    }
    .doc-page .sticky-actions .rbtn {
        flex: 1;
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    .doc-page .page-main { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-page .rbtn,
    .doc-page .preview-loading { transition: none; }
    .doc-page .spinner {
        animation: none;
        border-top-color: var(--ink);
    }
}

/* ── Data pages: the /smart/ dashboards ─────────────────────────────
   One hero, heading, lede, card, stat tile, bar and map frame, defined once.
   Each page root sets --kicker-bg; page-specific layouts follow below. */
.rr.data-page { --data-mono: var(--font-mono); }
.run-page { --kicker-bg: var(--yellow); }
.daily-page { --kicker-bg: var(--orange); }
.activity-page { --kicker-bg: var(--blue); }
.flights-page { --kicker-bg: var(--orange); }
.air-page { --kicker-bg: var(--green); }
.music-page { --kicker-bg: var(--green); }

.data-page main,
.data-page .page-main {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(247, 216, 74, 0.55), transparent 18rem),
        radial-gradient(circle at 92% 12%, rgba(255, 107, 53, 0.38), transparent 16rem),
        radial-gradient(circle at 78% 88%, rgba(79, 124, 255, 0.26), transparent 20rem);
}
.data-page .data-hero {
    padding: clamp(54px, 8vw, 104px) clamp(18px, 3vw, 42px);
    border-bottom: 2px solid var(--ink);
}
.data-page .kicker {
    display: inline-block;
    background: var(--kicker-bg);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-xs);
    font-family: var(--data-mono);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 8px 10px;
    margin-bottom: 22px;
    transform: rotate(-1deg);
}
.data-page .kicker:hover {
    transform: rotate(-1deg);
    background: var(--kicker-bg);
    color: var(--ink);
}
.data-page h1 {
    font-size: clamp(3.3rem, 10vw, 9.4rem);
    font-weight: 800;
    letter-spacing: -0.09em;
    line-height: 0.84;
    margin: 0;
    max-width: 11ch;
}
.data-page .lede {
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 500;
    line-height: 1.42;
    max-width: 62ch;
    margin: clamp(20px, 3vw, 32px) 0 0;
}
.data-page .source-note {
    font-family: var(--data-mono);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 62ch;
    margin: 10px 0 0;
    opacity: 0.7;
}
/* "As of" line under the hero: the latest record date and a staleness pill. */
.data-page .as-of {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--data-mono);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 14px 0 0;
}
.data-page .as-of__badge {
    display: inline-block;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--shadow-xs);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    text-transform: uppercase;
}
.data-page .as-of--fresh .as-of__badge { background: var(--green); }
.data-page .as-of--aging .as-of__badge { background: var(--yellow); }
.data-page .as-of--stale .as-of__badge { background: var(--orange); }

/* Stat tiles: four in a row, ink gutters, the same colour order everywhere. */
.data-page .stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    background: var(--ink);
    border-bottom: 2px solid var(--ink);
}
.data-page .stat-tile {
    background: var(--paper);
    padding: clamp(20px, 3vw, 34px);
    min-width: 0;
}
.data-page .stat-tile:nth-child(1) { background: var(--yellow); }
.data-page .stat-tile:nth-child(2) { background: var(--orange); }
.data-page .stat-tile:nth-child(3) { background: var(--blue); color: #fff; }
.data-page .stat-tile:nth-child(4) { background: var(--green); }
.data-page .stat-label {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.data-page .stat-value {
    display: block;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.86;
}
.data-page .stat-detail {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 12px;
}

/* Section headings and their body copy. */
.data-page .section-head h2 {
    font-size: clamp(2.2rem, 6vw, 5.4rem);
    font-weight: 900;
    letter-spacing: -0.085em;
    line-height: 0.86;
    margin: 0;
}
.data-page .section-head p {
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    font-weight: 700;
    line-height: 1.45;
    margin: 22px 0 0;
}
.data-page .section-head .partial-note { margin-top: 16px; }

/* Chart cards. */
.data-page .chart-card {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-lg);
    padding: clamp(18px, 3vw, 30px);
    min-width: 0;
}
.data-page .chart-card h3,
.data-page .ol-acc-card h3 {
    font-family: var(--data-mono);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

/* Horizontal bars. */
.data-page .bar-list { display: grid; gap: 12px; }
.data-page .bar-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 80px;
    align-items: center;
    gap: 12px;
}
.data-page .bar-row--wide { grid-template-columns: 148px minmax(0, 1fr) 44px; }
.data-page .bar-year,
.data-page .bar-val {
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
}
.data-page .bar-row--wide .bar-year {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.data-page .bar-track {
    background: var(--field);
    border: 2px solid var(--ink);
    height: 20px;
    overflow: hidden;
}
.data-page .bar-fill { display: block; background: var(--orange); height: 100%; min-width: 4px; }
.data-page .is-best .bar-fill { background: var(--green); }
.data-page .bar-year-star { color: var(--orange); }
.data-page .partial-note {
    margin: 14px 0 0;
    font-family: var(--data-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(8, 8, 8, 0.55);
}

/* Maps, in the Capture the Tile style: paper on the field colour, an ink
   frame with a hard shadow, and a mono caption strip along the bottom. */
.data-page .map-frame {
    position: relative;
    margin: 0;
    border: 2px solid var(--ink);
    background: var(--field);
    box-shadow: 8px 8px 0 var(--ink);
}
.data-page .map-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0;
    padding: 6px 10px;
    border-top: 2px solid var(--ink);
    background: var(--paper);
    color: var(--muted);
    font-family: var(--data-mono);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}
.data-page .map-strip strong { color: var(--ink); font-weight: 900; }

@media (max-width: 960px) {
    .data-page .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .data-page h1 { font-size: clamp(2.8rem, 14vw, 4.8rem); }
    .data-page .bar-row { grid-template-columns: 58px minmax(0, 1fr) 64px; }
    .data-page .bar-row--wide { grid-template-columns: 112px minmax(0, 1fr) 40px; }
}

/* ── Running dashboard (modeled on royerramirez.com/running) ───────────── */
.run-page .trend-section {
    display: grid;
    grid-template-columns: minmax(240px, 0.45fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 46px);
    padding: clamp(46px, 7vw, 92px) clamp(18px, 3vw, 42px);
}
.run-page .stand-chart .bar-row { grid-template-columns: 104px minmax(0, 1fr) 56px; }
.run-page .stand-chart + .stand-week { margin-top: clamp(22px, 3vw, 34px); }
.stand-week-grid {
    display: grid;
    grid-template-columns: 44px repeat(4, minmax(0, 1fr)) 52px;
    gap: 4px;
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}
.stand-week-grid .stand-week-head { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); align-self: end; }
.stand-week-grid .stand-week-day { text-align: left; align-self: center; color: var(--ink); }
.stand-week-grid .stand-week-total { align-self: center; color: var(--muted); }
.stand-week-grid .stand-week-cell { padding: 10px 0; border-radius: 4px; color: var(--ink); }
.stand-week-grid .l0 { background: var(--field); }
.stand-week-grid .l1 { background: color-mix(in srgb, var(--orange) 25%, var(--field)); }
.stand-week-grid .l2 { background: color-mix(in srgb, var(--orange) 50%, var(--field)); }
.stand-week-grid .l3 { background: color-mix(in srgb, var(--orange) 75%, var(--field)); }
.stand-week-grid .l4 { background: var(--orange); color: var(--paper); }
/* Yearly mileage — append the year's most-run shoe under each bar. */
.run-page .year-chart .bar-row {
    grid-template-areas:
        "year track val"
        ".    shoe  shoe";
    row-gap: 7px;
}
.run-page .year-chart .bar-year { grid-area: year; }
.run-page .year-chart .bar-track { grid-area: track; }
.run-page .year-chart .bar-val { grid-area: val; }
.run-page .year-shoe {
    grid-area: shoe;
    font-family: var(--data-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(8, 8, 8, 0.55);
}
.run-page .year-shoe-tag {
    color: var(--orange);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
}

/* Shoe rotation — stacked rows so long product names stay readable. */
.run-page .shoe-chart { gap: 0; }
.run-page .shoe-chart .bar-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
        "rank name  miles"
        "rank meta  miles"
        "track track track";
    column-gap: 18px;
    row-gap: 10px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 2px solid rgba(8, 8, 8, 0.1);
    transition: background 0.15s ease;
}
.run-page .shoe-chart .bar-row:hover { background: rgba(255, 107, 53, 0.05); }
.run-page .shoe-chart .bar-row:first-child { padding-top: 0; }
.run-page .shoe-chart .bar-row:last-child { padding-bottom: 0; border-bottom: 0; }
.run-page .shoe-rank {
    grid-area: rank;
    align-self: center;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-family: var(--data-mono);
    font-size: 0.98rem;
    font-weight: 900;
    color: var(--paper);
    background: var(--ink);
    border: 2px solid var(--ink);
}
.run-page .shoe-chart .bar-row:first-child .shoe-rank { background: var(--orange); }
.run-page .shoe-chart .shoe-name {
    grid-area: name;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-transform: none;
}
.run-page .shoe-miles {
    grid-area: miles;
    align-self: center;
    justify-self: end;
    display: grid;
    justify-items: end;
    row-gap: 2px;
    white-space: nowrap;
}
.run-page .shoe-miles-fig {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--data-mono);
}
.run-page .shoe-miles-fig strong {
    font-size: clamp(1.3rem, 2.2vw, 2.2rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.run-page .shoe-miles-unit {
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--orange);
}
.run-page .shoe-runs {
    font-family: var(--data-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(8, 8, 8, 0.55);
}
.run-page .shoe-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--data-mono);
    font-size: 0.86rem;
    letter-spacing: 0.01em;
}
.run-page .shoe-type {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    background: var(--yellow);
    border: 2px solid var(--ink);
    padding: 3px 9px;
}
.run-page .shoe-spec {
    font-weight: 600;
    color: rgba(8, 8, 8, 0.6);
}
.run-page .shoe-spec + .shoe-spec::before {
    content: "\00b7";
    color: var(--orange);
    font-weight: 900;
    padding-right: 8px;
}
.run-page .shoe-chart .bar-track { grid-area: track; height: 20px; }
.run-page .spark-year--partial { color: var(--orange); }
.run-page .insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}
.run-page .insight {
    border: 2px solid var(--ink);
    min-height: 140px;
    padding: 18px;
}
.run-page .insight:nth-child(1) { background: var(--yellow); }
.run-page .insight:nth-child(2) { background: var(--blue); color: #fff; }
.run-page .insight:nth-child(3) { background: var(--green); }
.run-page .insight .insight-label {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.run-page .insight .insight-value {
    display: block;
    font-size: clamp(1.6rem, 3vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 0.95;
}
/* Conditions — 4-up climate stats + median-pace-by-feels-like-band chart. */
.run-page .wx-grid { grid-template-columns: repeat(4, 1fr); }
.run-page .wx-grid .insight { min-height: 116px; }
.run-page .wx-grid .insight:nth-child(4) { background: var(--orange); color: #fff; }
.run-page .wx-grid .insight-value { font-size: clamp(1.3rem, 2.3vw, 2.1rem); }
.run-page .insight-sub {
    font-family: var(--data-mono);
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 4px;
    opacity: 0.6;
}
.run-page .insight-grid + .chart-card { margin-top: clamp(26px, 4vw, 44px); }
.run-page .wx-chart .bar-row {
    grid-template-columns: 104px minmax(0, 1fr) 96px;
    padding: 9px 0;
}
.run-page .wx-band { display: flex; flex-direction: column; gap: 4px; }
.run-page .wx-best-tag {
    font-size: 0.56rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--green);
}
.run-page .wx-chart .bar-val {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}
.run-page .wx-band-n {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(8, 8, 8, 0.5);
    margin-top: 3px;
}
/* Band sub-label (climb-per-mile range, time-of-day range). */
.run-page .wx-band-sub {
    font-family: var(--data-mono);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(8, 8, 8, 0.45);
}

/* Conditions extras strip — dew point / AQI / headwind callouts. */
.run-page .wx-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(18px, 3vw, 28px);
}
.run-page .wx-extras span {
    flex: 1 1 200px;
    background: var(--field);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 12px 14px;
    font-family: var(--data-mono);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}
.run-page .wx-extras strong {
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* ACWR — training-load balance card with zone-colored header. */
.run-page .acwr-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-bottom: 3px solid var(--ink);
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.run-page .acwr-ratio {
    font-size: clamp(2.6rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.9;
}
.run-page .acwr-zone {
    font-family: var(--data-mono);
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.run-page .acwr-detraining .acwr-zone { background: var(--blue); color: #fff; }
.run-page .acwr-balanced .acwr-zone { background: var(--green); }
.run-page .acwr-building .acwr-zone { background: var(--yellow); }
.run-page .acwr-spike .acwr-zone { background: var(--orange); color: #fff; }
.run-page .acwr-note {
    font-size: 1.02rem;
    line-height: 1.5;
    margin: 0 0 16px;
    max-width: 60ch;
}
.run-page .acwr-legs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-family: var(--data-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(8, 8, 8, 0.6);
}
.run-page .acwr-legs strong {
    font-weight: 900;
    font-size: 1.04rem;
    color: var(--ink);
}

/* The Dead Ends — ruled-out ideas, deliberately muted vs the live charts. */
.run-page .nontrends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.run-page .nontrend {
    background: var(--field);
    border: 2px solid var(--ink);
    padding: 18px 18px 20px;
    position: relative;
}
.run-page .nontrend-tag {
    display: inline-block;
    font-family: var(--data-mono);
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--paper);
    background: var(--ink);
    padding: 3px 7px;
    margin-bottom: 10px;
}
.run-page .nontrend h3 {
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--orange);
}
.run-page .nontrend p {
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    color: rgba(8, 8, 8, 0.72);
}

/* Watch + firmware timeline */
.run-page .watch-section {
    padding: clamp(34px, 5vw, 70px) clamp(18px, 3vw, 42px);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    background: var(--field);
}
.run-page .watch-head { max-width: 760px; margin: 0 0 clamp(30px, 4vw, 52px); }
.run-page .watch-kicker {
    display: inline-block;
    font-family: var(--data-mono);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: var(--ink);
    color: var(--paper);
    padding: 5px 10px;
    margin-bottom: 16px;
}
.run-page .watch-head h2 {
    font-size: clamp(1.9rem, 4.5vw, 3.7rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.92;
    margin: 0;
}
.run-page .watch-head p {
    color: var(--muted);
    font-size: clamp(0.98rem, 1.4vw, 1.18rem);
    font-weight: 700;
    line-height: 1.45;
    margin: 18px 0 0;
}
.run-page .watch-timeline {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    padding: clamp(34px, 4vw, 48px) clamp(18px, 3vw, 36px) clamp(22px, 3vw, 32px);
}
.run-page .watch-axis {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 28px);
    margin: 0 0 18px;
}
.run-page .watch-axis-track {
    grid-column: 2;
    position: relative;
    height: 18px;
    border-bottom: 2px dashed rgba(8, 8, 8, 0.25);
}
.run-page .watch-year {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 900;
    color: var(--muted);
}
.run-page .watch-row {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 28px);
    align-items: center;
    padding: clamp(18px, 2.4vw, 26px) 0;
    border-top: 2px solid rgba(8, 8, 8, 0.12);
}
.run-page .watch-meta { display: flex; flex-direction: column; gap: 4px; }
.run-page .watch-name {
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}
.run-page .watch-note {
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.run-page .watch-track { position: relative; }
.run-page .watch-bar {
    position: relative;
    height: 30px;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.run-page .watch-row:nth-child(2) .watch-bar { background: var(--blue); }
.run-page .watch-row:nth-child(3) .watch-bar { background: var(--yellow); }
.run-page .watch-row:nth-child(4) .watch-bar { background: var(--orange); }
.run-page .watch-row:nth-child(5) .watch-bar { background: var(--green); }
.run-page .watch-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
}
.run-page .watch-tick:hover { width: 4px; margin-left: -2px; background: var(--paper); outline: 1px solid var(--ink); }
.run-page .watch-span-start,
.run-page .watch-span-end {
    position: absolute;
    top: -17px;
    font-family: var(--data-mono);
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--ink);
    white-space: nowrap;
}
.run-page .watch-span-start { left: 0; }
.run-page .watch-span-end { right: 0; }
.run-page .watch-fw-count {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    font-family: var(--data-mono);
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}

.run-page .records-card { margin-top: clamp(26px, 4vw, 44px); }
.run-page .records-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.run-page .record {
    background: var(--field);
    border: 2px solid var(--ink);
    padding: 16px;
}
.run-page .record .record-month {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.run-page .record .record-val {
    display: block;
    font-size: clamp(1.3rem, 2.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.05em;
}
.run-page .updated {
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    margin: 18px 0 0;
}

@media (max-width: 960px) {
    .run-page .trend-section { grid-template-columns: 1fr; }
    .run-page .insight-grid,
    .run-page .wx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .run-page .insight-grid,
    .run-page .wx-grid,
    .run-page .nontrends-grid,
    .run-page .records-list { grid-template-columns: 1fr; }
    .run-page .watch-row { grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
    .run-page .watch-axis { grid-template-columns: 1fr; }
    .run-page .watch-axis-track { grid-column: 1; }
    .run-page .shoe-chart .bar-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .run-page .shoe-chart .shoe-name { font-size: 1.12rem; }
}

/* Project explainer dropdown — bump the slightly-small content text. */
.slidedownContent { font-size: 1.1rem; line-height: 1.6; }

@media (max-width: 640px) {
    .rr-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
    .rr-footer-right { align-items: flex-start; text-align: left; }
}

/* ── Interior-page helpers (safe on bare elements, no `.rr` parent) ─────── */

/* Statement-style page title — drop-in replacement for Bootstrap .display-* */
.neo-h1 {
    font-size: clamp(2.6rem, 7vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.88;
    color: var(--ink);
}

/* Mono eyebrow above a statement title */
.neo-kicker {
    background: var(--ink);
    color: var(--paper);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: clamp(0.62rem, 1vw, 0.78rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    padding: 6px 10px;
    text-transform: uppercase;
}

/* Page-head wrapper to give consistent vertical rhythm on interior pages */
.neo-pagehead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Neo form — wrap a <form> in .neo-form to style its raw inputs */
.neo-form label { display: block; font-weight: 800; letter-spacing: -0.02em; margin: 18px 0 6px; }
.neo-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.neo-form textarea,
.neo-form select {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--ink);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    padding: 11px 13px;
    width: 100%;
}
.neo-form textarea { min-height: 140px; resize: vertical; }
.neo-form input:focus, .neo-form textarea:focus, .neo-form select:focus {
    box-shadow: 3px 3px 0 var(--orange);
    outline: none;
}
.neo-form p { margin-bottom: 6px; }
.neo-form .helptext { color: var(--muted); display: block; font-size: 0.82rem; margin-top: 4px; }
.neo-btn,
.neo-form button[type="submit"],
.neo-form .btn {
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--ink);
    cursor: pointer;
    display: inline-block;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 24px;
    padding: 12px 22px;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.neo-btn:hover,
.neo-form button[type="submit"]:hover {
    background: var(--orange);
    box-shadow: 6px 6px 0 var(--ink);
    transform: translate(-2px, -2px);
}

/* ── Activity page: multi-sport rollup + abstract GPS scatter ───────── */
.run-page .sport-chart .bar-row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "name meta stat"
        "track track track";
    column-gap: 14px;
    row-gap: 7px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 2px solid rgba(8, 8, 8, 0.1);
}
.run-page .sport-chart { gap: 0; }
.run-page .sport-chart .bar-row:first-child { padding-top: 0; }
.run-page .sport-chart .bar-row:last-child { padding-bottom: 0; border-bottom: 0; }
.run-page .sport-name {
    grid-area: name;
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: 0.005em;
    text-transform: none;
}
.run-page .sport-stat {
    grid-area: stat;
    justify-self: end;
    white-space: nowrap;
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(8, 8, 8, 0.6);
}
.run-page .sport-stat strong { font-weight: 900; color: var(--ink); }
.run-page .sport-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--data-mono);
    font-size: 0.7rem;
    font-weight: 600;
}
.run-page .sport-spec {
    background: var(--field);
    border: 2px solid var(--ink);
    padding: 1px 6px;
    letter-spacing: 0.02em;
}
.run-page .sport-chart .bar-track { grid-area: track; height: 16px; }

.run-page .map-card .activity-maps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
    margin-bottom: 18px;
}
.run-page .activity-map {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(8, 8, 8, 0.10) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(8, 8, 8, 0.10) 39px 40px),
        var(--field);
}
.run-page .activity-map svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.run-page .activity-map .map-lines path {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.run-page .activity-map .map-lines .is-other { stroke: var(--ink); opacity: 0.4; }
.run-page .activity-map .map-lines .is-run { stroke: var(--orange); opacity: 0.8; }
@media (max-width: 720px) {
    .run-page .map-card .activity-maps { grid-template-columns: 1fr; }
}

/* ── Running page: Tiles claimed, monthly bars from the Capture the Tile board ── */
.run-page .tiles-row { height: 160px; gap: clamp(2px, 0.6vw, 8px); }
.run-page .tiles-row .spark-bar { background: var(--orange); }
.run-page .tiles-section > * { min-width: 0; }
.run-page .tiles-row .spark-col { min-width: 0; }
.run-page .tiles-row .spark-year { white-space: nowrap; min-height: 1em; }
@media (max-width: 640px) {
    .run-page .tiles-row .spark-year { font-size: 0.56rem; letter-spacing: -0.03em; }
}
.run-page .tiles-card .records-list { margin-top: clamp(22px, 3vw, 32px); }
.run-page .tiles-card .record-sub {
    font-family: var(--data-mono);
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 4px;
    opacity: 0.7;
}

/* ── Daily page: Movement and Rest group bands, then the rest sparklines ── */
.daily-page .daily-group {
    padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 42px) 0;
    border-top: 2px solid var(--ink);
}
.daily-page .daily-group .kicker { margin: 0; }
.daily-page .stat-value.daily-drift { font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 0.95; }

/* ── Daily page rest: qualitative sparklines, stress mix, full-rest ring ── */
.run-page .spark-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.run-page .spark-card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-areas:
        "title chart"
        "drift chart"
        "foot  chart";
    align-content: center;
    align-items: center;
    column-gap: clamp(18px, 3vw, 34px);
    row-gap: 12px;
    min-width: 0;
}
.run-page .chart-card.spark-card h3 { grid-area: title; align-self: end; margin-bottom: 0; }
.run-page .spark-row {
    grid-area: chart;
    display: flex;
    align-items: flex-end;
    gap: clamp(5px, 1vw, 12px);
    height: 116px;
    padding: 8px 0 0;
    border-bottom: 2px solid var(--ink);
    min-width: 0;
}
.run-page .spark-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    height: 100%;
}
.run-page .spark-bar {
    width: 100%;
    background: var(--ink);
    border: 2px solid var(--ink);
    min-height: 6px;
}
.run-page .spark-col:last-child .spark-bar { background: var(--orange); }
.run-page .spark-year {
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}
.run-page .spark-drift {
    grid-area: drift;
    justify-self: start;
    align-self: start;
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--data-mono);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 9px;
}
.run-page .spark-foot {
    grid-area: foot;
    justify-self: start;
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 700;
    color: rgba(8, 8, 8, 0.55);
}

.run-page .stress-card .stress-bar {
    display: flex;
    height: 46px;
    border: 2px solid var(--ink);
    overflow: hidden;
}
.run-page .stress-seg { height: 100%; border-right: 2px solid var(--ink); }
.run-page .stress-seg:last-child { border-right: 0; }
.run-page .stress-seg--calm { background: var(--green); }
.run-page .stress-seg--moderate { background: var(--yellow); }
.run-page .stress-seg--high { background: var(--orange); }
.run-page .stress-key {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
.run-page .stress-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--data-mono);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.run-page .stress-swatch {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ink);
}
.run-page .stress-tag--calm .stress-swatch { background: var(--green); }
.run-page .stress-tag--moderate .stress-swatch { background: var(--yellow); }
.run-page .stress-tag--high .stress-swatch { background: var(--orange); }

.run-page .ring-card { text-align: left; }
.run-page .rest-ring {
    --pct: 0;
    display: grid;
    place-items: center;
    width: 188px;
    height: 188px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background:
        conic-gradient(var(--orange) calc(var(--pct) * 1%), var(--field) 0);
    box-shadow: 6px 6px 0 var(--ink);
    margin: 6px auto 4px;
}
.run-page .rest-ring::after {
    content: "";
    grid-area: 1 / 1;
    width: 128px;
    height: 128px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
}
.run-page .rest-ring-num {
    grid-area: 1 / 1;
    z-index: 1;
    display: flex;
    align-items: baseline;
    font-weight: 900;
    font-size: 3.1rem;
    letter-spacing: -0.04em;
    line-height: 1;
}
.run-page .rest-ring-pct { font-size: 1.3rem; margin-left: 2px; }
.run-page .rest-ring-cap {
    grid-area: 1 / 1;
    z-index: 1;
    margin-top: 70px;
    font-family: var(--data-mono);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.run-page .ring-note {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    margin: 14px 0 0;
}

@media (max-width: 880px) {
    .run-page .spark-card {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "chart" "drift" "foot";
        align-content: start;
    }
    .run-page .chart-card.spark-card h3 { align-self: start; }
}

@media (max-width: 1180px) {
    .rr-hero { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); min-height: auto; }
    .rr-about-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
    .rr-header { flex-direction: column; align-items: flex-start; }
    .rr-nav { justify-content: flex-start; width: 100%; }
    .rr-hero { gap: 46px; grid-template-columns: 1fr; padding-top: 42px; }
    .rr-copy { margin-left: 0; }
    .rr-hero h1 { font-size: clamp(2.55rem, 12.5vw, 5.5rem); max-width: 12ch; }
    .rr-intro { font-size: clamp(1.2rem, 6vw, 2.2rem); }
    .rr-about-grid, .rr-notes { grid-template-columns: 1fr; }
    .rr-note { border-right: 0; }
    .rr-section-label { font-size: clamp(2.4rem, 12vw, 4.4rem); }
    .rr-hero::before, .rr-hero::after { opacity: .45; }
}

@media (max-width: 560px) {
    .rr-live { grid-template-columns: repeat(2, 1fr); }
    .rr-nav { justify-content: flex-end; width: auto; }
    .rr-portrait { max-width: min(280px, 86vw); }
}

@media (prefers-reduced-motion: reduce) {
    .rr-status-dot { animation: none; }
    .rr-note:hover, .rr-portrait { transform: none; }
}

/* ============================================================= *
 *  FLIGHTS  (/smart/flights/)                                    *
 *  Neo-brutalist logbook: light page, one dramatic dark world    *
 *  map panel with glowing great-circle arcs. Tokens from         *
 *  neo-theme.css; bar primitives mirror the run pages.           *
 * ============================================================= */
/* --- world map: paper land on the field colour, as on Capture the Tile --- */
.fl-map-wrap { padding: clamp(30px, 5vw, 68px) clamp(18px, 3vw, 42px); }
.flights-page .section-head { max-width: 66ch; margin-bottom: clamp(20px, 3vw, 32px); }
.fl-map { display: block; width: 100%; height: auto; background: var(--field); }
.fl-ocean { fill: transparent; }

/* graticule: the faint chart grid behind the land */
.fl-grid-lines line {
    stroke: rgba(8, 8, 8, 0.10);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.fl-grid-lines line.is-equator {
    stroke: rgba(8, 8, 8, 0.28);
    stroke-dasharray: 4 4;
}
.fl-land {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* great-circle corridors, drawn in on load; width still encodes how often */
.fl-arcs path {
    fill: none;
    stroke: var(--orange);
    stroke-opacity: 0.8;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .fl-arcs path { animation: fl-draw 1.15s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
}
@keyframes fl-draw {
    from { stroke-dashoffset: 1; stroke-opacity: 0; }
    to { stroke-dashoffset: 0; stroke-opacity: 0.8; }
}

/* radar ping on the home node */
.fl-ping circle {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
    .fl-ping circle { animation: fl-ping 3s ease-out infinite; }
    .fl-ping circle:nth-child(2) { animation-delay: 1.5s; }
}
@keyframes fl-ping {
    0% { transform: scale(1); stroke-opacity: 0.6; }
    70% { stroke-opacity: 0; }
    100% { transform: scale(6); stroke-opacity: 0; }
}

.fl-node {
    fill: var(--ink);
    stroke: var(--paper);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}
.fl-node.is-home {
    fill: var(--yellow);
    stroke: var(--ink);
    stroke-width: 2;
}
.fl-leaders line {
    stroke: rgba(8, 8, 8, 0.5);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.fl-labels text {
    fill: var(--ink);
    font-family: var(--data-mono);
    font-size: 11px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* legend, carried in the caption strip */
.fl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fl-legend-row { display: inline-flex; align-items: center; gap: 6px; }
.fl-legend-dot { display: inline-block; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--paper); }
.fl-legend-dot--home { width: 10px; height: 10px; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.fl-legend-dot--sm { width: 5px; height: 5px; }
.fl-legend-dot--lg { width: 11px; height: 11px; margin-left: -2px; }

/* --- slice charts --- */
.fl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.5vw, 32px);
    padding: 0 clamp(18px, 3vw, 42px) clamp(30px, 5vw, 60px);
}
.flights-page .bar-val { text-align: right; }

/* --- footer callouts --- */
.fl-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.5vw, 32px);
    padding: 0 clamp(18px, 3vw, 42px) clamp(48px, 7vw, 92px);
}
.fl-callout {
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    padding: clamp(22px, 3vw, 34px);
}
.fl-callout--blue { background: var(--blue); color: #fff; }
.fl-callout--orange { background: var(--orange); color: var(--ink); }
.fl-callout-label {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fl-callout-value {
    display: block;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.9;
    margin: 12px 0;
}
.fl-callout p { font-size: 0.98rem; font-weight: 700; line-height: 1.45; margin: 0; }
.fl-callout--blue a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fl-callout--orange a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================= *
 *  THE AIR I BREATHE  (/smart/air/)                             *
 *  Neo-brutalist, green-accented (living room / plants). Line   *
 *  charts + centre-origin correlation bars. Tokens from         *
 *  neo-theme.css.                                               *
 * ============================================================= */
/* blocks */
.air-block { padding: clamp(30px, 5vw, 64px) clamp(18px, 3vw, 42px); }
.air-block--split {
    display: grid;
    grid-template-columns: minmax(240px, 0.5fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
}
.air-page .section-head { max-width: 66ch; margin-bottom: clamp(20px, 3vw, 30px); }
.air-block--split .section-head { margin-bottom: 0; }

/* line charts */
.air-chart { display: block; width: 100%; height: auto; }
.air-ref { stroke: rgba(8, 8, 8, 0.16); stroke-width: 1; stroke-dasharray: 4 4; }
.air-ref-label {
    fill: rgba(8, 8, 8, 0.5);
    font-family: var(--data-mono);
    font-size: 10px;
    font-weight: 700;
}
.air-area { fill: rgba(130, 209, 115, 0.3); }
.air-poly { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.air-peak { fill: var(--orange); stroke: var(--ink); stroke-width: 1.5; }
.air-trough { fill: var(--blue); stroke: var(--ink); stroke-width: 1.5; }
.air-xtick {
    fill: rgba(8, 8, 8, 0.55);
    font-family: var(--data-mono);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

/* centre-origin correlation bars */
.cor-card { display: grid; gap: 13px; }
.cor-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.4fr) 48px;
    align-items: center;
    gap: 14px;
}
.cor-label {
    font-family: var(--data-mono);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
}
.cor-track {
    position: relative;
    height: 22px;
    background: var(--field);
    border: 2px solid var(--ink);
}
.cor-zero {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--ink);
    transform: translateX(-1px);
}
.cor-fill { position: absolute; top: 0; bottom: 0; }
.cor-fill.is-pos { background: var(--green); }
.cor-fill.is-neg { background: var(--orange); }
.cor-val {
    font-family: var(--data-mono);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: right;
}
.cor-axis {
    display: flex;
    justify-content: space-between;
    margin: 6px 2px 0;
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(8, 8, 8, 0.45);
}

/* footer callouts */
.air-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.5vw, 32px);
    padding: 0 clamp(18px, 3vw, 42px) clamp(48px, 7vw, 92px);
}
.air-callout {
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    padding: clamp(22px, 3vw, 32px);
}
.air-callout--green { background: var(--green); color: var(--ink); }
.air-callout--ink { background: var(--ink); color: var(--paper); }
.air-callout-label {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.air-callout-value {
    display: block;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-bottom: 12px;
}
.air-callout p { font-size: 0.98rem; font-weight: 700; line-height: 1.45; margin: 14px 0 0; }
.air-tert { width: 100%; border-collapse: collapse; font-family: var(--data-mono); }
.air-tert th, .air-tert td {
    text-align: right;
    padding: 7px 6px;
    font-size: 0.76rem;
    font-weight: 700;
    border-bottom: 1.5px solid rgba(8, 8, 8, 0.25);
}
.air-tert th:first-child, .air-tert td:first-child { text-align: left; }
.air-tert th { font-weight: 900; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.03em; }
.air-tert tr:last-child td { border-bottom: none; }

@media (max-width: 760px) {
    .air-block--split { grid-template-columns: 1fr; gap: 22px; }
    .air-block--split .section-head { margin-bottom: 4px; }
}

/* occupancy strip under the season timeline */
.air-strip { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.air-strip-cap {
    fill: rgba(8, 8, 8, 0.5);
    font-family: var(--data-mono);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
}
.occ-home { fill: var(--field); stroke: var(--ink); stroke-width: 1; }
.occ-flight { fill: var(--blue); }
.occ-away { fill: var(--orange); }
.occ-flag { fill: var(--orange); stroke: var(--ink); stroke-width: 1; }
.occ-flag-label {
    fill: var(--ink);
    font-family: var(--data-mono);
    font-size: 9px;
    font-weight: 900;
    text-anchor: middle;
}
.occ-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 12px;
    font-family: var(--data-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.occ-legend span { display: flex; align-items: center; gap: 7px; }
.occ-key { width: 15px; height: 11px; border: 2px solid var(--ink); display: inline-block; }
.occ-key--home { background: var(--field); }
.occ-key--flight { background: var(--blue); }
.occ-key--away { background: var(--orange); }
.air-find {
    margin-top: clamp(16px, 2.4vw, 26px);
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    padding: clamp(18px, 2.5vw, 28px);
}
.air-find-tag {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.air-find p { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; }

/* indoor-vs-outdoor temperature (dual line + shaded gap) */
.temp-band { fill: rgba(130, 209, 115, 0.25); }
.temp-in { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.temp-out { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.temp-key--in { background: var(--green); }
.temp-key--out { background: var(--blue); }

/* ── Music x running (/smart/music/), on top of .data-page and .run-page ── */
/* A song title is longer than a number, so the fourth tile steps down. */
.music-page .stat-value.music-song {
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    letter-spacing: -0.05em;
    line-height: 1;
    overflow-wrap: anywhere;
}
.music-page .chart-card + .chart-card { margin-top: clamp(22px, 3vw, 34px); }
.music-page .music-scatter { display: block; width: 100%; height: auto; }
.music-page .music-grid line { stroke: rgba(8, 8, 8, 0.12); stroke-width: 1; }
.music-page .music-grid text,
.music-page .music-ref-label {
    font-family: var(--data-mono);
    font-size: 11px;
    font-weight: 700;
    fill: var(--muted);
}
.music-page .music-dots { fill: none; stroke: var(--blue); stroke-opacity: 0.3; stroke-width: 6; stroke-linecap: round; }
.music-page .music-step { fill: none; stroke: var(--orange); stroke-width: 3; }
.music-page .music-ref { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.music-page .music-axis { stroke: var(--ink); stroke-width: 2; }

/* Soundtrack: two columns of ranked lists, stacked below 960px. */
.music-page .music-wide { grid-template-columns: 1fr; }
.music-page .music-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
}
.music-page .music-cols .chart-card + .chart-card { margin-top: 0; }
.music-page .music-tracks .bar-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas: "rank name val" "rank track track";
    row-gap: 6px;
}
.music-page .music-tracks .bar-track { grid-area: track; height: 10px; }
.music-page .music-tracks .bar-val {
    grid-area: val;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.music-page .music-rank {
    grid-area: rank;
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
}
.music-page .music-name { grid-area: name; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.music-page .music-artist {
    display: block;
    font-family: var(--data-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
}
.music-page .music-labels .bar-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 48px; }
.music-page .music-labels .bar-year { overflow-wrap: anywhere; }

/* Monthly listening: ~170 compact rows, run minutes stacked inside. */
.music-page .music-months { gap: 3px; }
.music-page .music-months .bar-row { grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 8px; }
.music-page .music-months .bar-year,
.music-page .music-months .bar-val { font-size: 0.62rem; }
.music-page .music-months .bar-track { height: 10px; border-width: 1px; }
.music-page .music-months .bar-fill { background: rgba(8, 8, 8, 0.25); min-width: 0; }
.music-page .music-run-fill { display: block; height: 100%; background: var(--orange); }

/* Season and weather tiles. */
.music-page .music-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
}
.music-page .music-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 16px;
}
.music-page .music-tile .insight-label {
    font-family: var(--data-mono);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}
.music-page .music-tile-value { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 900; letter-spacing: -0.06em; }
.music-page .music-tile-top { margin-top: auto; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.music-page .music-tile-top .insight-sub { display: block; margin: 0 0 2px; }
.music-page .music-method ul { margin: 0; padding-left: 18px; line-height: 1.5; font-weight: 700; }

@media (max-width: 960px) {
    .music-page .music-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* The 560-wide viewBox shrinks ~0.55x on a phone. Keep axis text legible. */
    .music-page .music-grid text,
    .music-page .music-ref-label { font-size: 14px; }
}
@media (min-width: 1200px) {
    .music-page .music-months { display: block; columns: 2; column-gap: 28px; }
    .music-page .music-months .bar-row { break-inside: avoid; margin-bottom: 3px; }
}

/* Explainer GIFs. One per project, showing how data flows through it. */
.explainer-gif {
    max-width: 880px;
    margin: 24px auto 0;
}
.explainer-gif img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-lg);
    background: var(--paper);
}
.explainer-gif figcaption {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 12px;
}
@media (max-width: 640px) {
    /* Phones. Let the GIF use the explainer's side padding too. */
    .slidedownContent .explainer-gif {
        margin-left: -18px;
        margin-right: -18px;
    }
}

/* ── Apple vs Garmin (/smart/compare/) ───────────────────────────────────── */
.compare-page { --kicker-bg: var(--orange); }
/* .page-main is overflow hidden for the hero glow, which stops position sticky. Clip keeps the glow and lets the chart stick. */
.compare-page .page-main { overflow: clip; }
.compare-page .trend-section {
    padding: clamp(46px, 7vw, 92px) clamp(18px, 3vw, 42px);
}
.compare-page .compare-story .section-head { max-width: 66ch; }
.compare-page .scrolly {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: start;
    margin-top: clamp(24px, 4vw, 40px);
}
.compare-page .scrolly-steps {
    display: grid;
    gap: 45vh;
    padding-block: 20vh 40vh;
}
.compare-page .scrolly-step {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: 18px 20px;
    border: 2px solid var(--ink);
    background: var(--field);
    box-shadow: var(--shadow-lg);
    opacity: 0.45;
    transition: opacity 0.3s;
}
.compare-page .scrolly-step.is-active { opacity: 1; }
.compare-page .scrolly-step h3 { margin: 0; }
.compare-page .scrolly-step p { margin: 0; line-height: 1.5; }
.compare-page .scrolly-figures {
    font-family: var(--data-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
}
.compare-page .scrolly-more-btn,
.compare-dialog .compare-dialog-close {
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}
.compare-page .scrolly-more-btn:hover,
.compare-dialog .compare-dialog-close:hover { background: var(--yellow); }
.compare-page .scrolly-more-btn:focus-visible,
.compare-dialog .compare-dialog-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.compare-page .scrolly-sticky {
    position: sticky;
    top: 16px;
}
.compare-page .scrolly-readout {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 0 8px;
    font-family: var(--data-mono);
    font-size: 0.8rem;
    font-weight: 700;
}
.compare-page .scrolly-plot { position: relative; }
.compare-page .scrolly-plot svg { display: block; width: 100%; height: auto; }
.compare-page .scrolly-plot circle { cursor: pointer; }
.compare-page .scrolly-tip {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 2px;
    max-width: 260px;
    padding: 8px 10px;
    white-space: nowrap;
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--data-mono);
    font-size: 0.72rem;
    line-height: 1.35;
    pointer-events: none;
}
.compare-page .scrolly-caption {
    margin: 10px 0 0;
    font-family: var(--data-mono);
    font-size: 0.72rem;
    color: var(--muted);
}

/* Read more dialog. */
.compare-dialog {
    width: min(640px, calc(100vw - 32px));
    padding: clamp(20px, 3vw, 32px);
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
}
.compare-dialog::backdrop { background: rgba(8, 8, 8, 0.55); }
.compare-dialog h3 { margin: 0 0 14px; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.compare-dialog p { margin: 0 0 12px; line-height: 1.55; }
.compare-dialog .scrolly-figures { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.compare-dialog .compare-dialog-close { margin-top: 6px; }

/* Closing card, kept clear of the footer. */
.compare-page .compare-outro { padding-top: 0; padding-bottom: clamp(60px, 9vw, 120px); }
.compare-page .compare-outro-card { display: grid; gap: 16px; justify-items: start; max-width: 72ch; }
.compare-page .compare-outro-card h2 {
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin: 0;
}
.compare-page .compare-outro-card p { margin: 0; font-size: 1.05rem; line-height: 1.55; max-width: 62ch; }
.compare-page .compare-outro-card .source-note { margin-top: 6px; }
.compare-page .compare-outro-link {
    display: inline-block;
    min-height: 44px;
    line-height: 40px;
    padding: 0 16px;
    border: 2px solid var(--ink);
    background: var(--yellow);
    color: #080808;
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--data-mono);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
}
.compare-page .compare-outro-link:hover { background: var(--orange); }
.compare-page .compare-outro-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (max-width: 760px) {
    .compare-page .scrolly { grid-template-columns: 1fr; gap: 0; }
    .compare-page .scrolly-sticky {
        order: 0;
        top: 0;
        z-index: 2;
        background: var(--paper);
        padding-block: 8px;
    }
    .compare-page .scrolly-plot svg { height: 40vh; }
    .compare-page .scrolly-caption { display: none; }
    .compare-page .scrolly-steps { order: 1; gap: 30vh; padding-block: 10vh 30vh; }
}
@media (prefers-reduced-motion: reduce) {
    .compare-page .scrolly-step { transition: none; }
}

/* Blog meta line. Date, category, read time and the tag chips on one line. */
.post-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.post-line .neo-tag { margin-left: 4px; }

/* Blog list. The whole card is the link; the tag chips sit above the stretched link. */
.post-card { position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.post-card:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--ink); background: var(--field); }
.post-card .post-card-link::after { content: ""; position: absolute; inset: 0; }
.post-card .post-line .neo-tag { position: relative; z-index: 1; }

/* Name to DNA round 2. Share link status and the read only fallback box. */
.share-status { align-self: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.share-url { width: 100%; min-height: 44px; padding: 8px 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }

/* Name to DNA round 2. Restriction sites on the coding strand. The label is CSS so Copy keeps only the bases. */
.derived-seq.has-sites { line-height: 2.6; }
.derived-seq .site { position: relative; display: inline-block; line-height: 1.2; text-decoration: underline 3px var(--orange); text-underline-offset: 4px; }
.derived-seq .site::before { content: attr(data-enzyme); position: absolute; left: 0; bottom: 100%; font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.site-list { margin: 10px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.site-list li + li { margin-top: 4px; }

/* IGV round 2. BLAT hits on the Name to DNA banner of the IGV page. */
.igv-page .igv-seq .igv-blat-status { font-weight: 800; margin: 12px 0 0; }
.igv-page .igv-seq .igv-blat-status:empty { margin: 0; }
.igv-page .igv-blat-hits { display: grid; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.igv-page .igv-blat-hit {
    background: var(--paper);
    border: var(--border-default);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    font-size: 0.9rem;
    gap: 2px;
    min-height: 44px;
    padding: 8px 12px;
    text-align: left;
    width: 100%;
}
.igv-page .igv-blat-hit:hover { background: var(--field); }
.igv-page .igv-blat-hit[aria-pressed="true"] { background: var(--yellow); }
.igv-page .igv-blat-hit:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.igv-page .igv-blat-locus { font-family: var(--font-mono); font-weight: 800; overflow-wrap: anywhere; }
.igv-page .igv-btn:disabled { cursor: progress; opacity: 0.6; }

/* Globe round 2. A CSS poster holds the frame until CesiumJS loads. */
.globe-page #globe { position: relative; }
.globe-page .globe-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: var(--paper);
    text-align: center;
}
.globe-page .globe-poster-disc {
    position: relative;
    width: min(55%, 260px, 36vh);
    aspect-ratio: 1;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--field);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.globe-page .globe-poster-disc::before,
.globe-page .globe-poster-disc::after { content: ""; position: absolute; }
.globe-page .globe-poster-disc::before {
    inset: -2px 22%;
    border: 2px solid var(--ink);
    border-radius: 50%;
    animation: globe-poster-turn 2.4s ease-in-out infinite alternate;
}
.globe-page .globe-poster-disc::after { left: 0; right: 0; top: calc(50% - 1px); border-top: 2px solid var(--ink); }
.globe-page .globe-poster-text,
.globe-page .globe-poster-note { font-family: var(--font-mono); font-weight: 900; text-transform: uppercase; margin: 0; }
.globe-page .globe-poster-note { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.globe-page .globe-poster [hidden] { display: none; }
@keyframes globe-poster-turn {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.08); }
}
@media (prefers-reduced-motion: reduce) {
    .globe-page .globe-poster-disc::before { animation: none; }
}

/* Globe round 2. Runs and routes near a pin, in the info card. */
.globe-page .globe-info .globe-info-runs { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; margin: 0 0 4px; }
.globe-page .globe-info .globe-info-routes {
    width: fit-content;
    margin: 0 0 8px;
    padding: 2px 8px;
    border: 2px solid var(--ink);
    background: var(--yellow);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}
.globe-page .globe-info .globe-info-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 12px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.globe-page .globe-info .globe-info-link:hover { background: var(--yellow); }
.globe-page .globe-info .globe-info-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Bioinfo bot round 2. Numbered citations, answer feedback and the paper chip. */
.cite {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    margin: 0 1px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: super;
    color: var(--ink);
    text-decoration: none;
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
}
.cite:hover { background: var(--orange); color: var(--ink); }
.cite:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ref-badge__n { font-family: var(--font-mono); font-weight: 700; }
.references__item--flash { animation: ref-flash 1.2s ease-out; }
@keyframes ref-flash {
    0%, 40% { background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); }
    100% { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
    .references__item--flash { animation: none; background: var(--yellow); }
}
.feedback { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.feedback__btn {
    min-height: 44px;
    padding: 0 14px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
}
.feedback__btn:hover { background: var(--yellow); }
.feedback__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.feedback__btn:focus-visible, .feedback--done:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.feedback--done { align-items: center; min-height: 44px; font-weight: 700; font-size: 0.85rem; }
.paper-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 20px;
}
.paper-chip__label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.paper-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 2px 2px 8px;
    color: var(--ink);
    background: var(--yellow);
    border: 2px solid var(--ink);
}
.paper-chip__title {
    max-width: 26ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}
.paper-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    background: var(--paper);
    border: 2px solid var(--ink);
}
.paper-chip a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Paper network round 2. Year colours, year slider, cluster labels and the cluster card. */
.paper-map-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.paper-map-label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    pointer-events: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.paper-map-label span { background: rgba(247, 244, 239, 0.85); padding: 2px 4px; }
.paper-map-label:hover span,
.paper-map-label.is-active span { background: var(--yellow); outline: 2px solid var(--ink); }
.paper-map-label:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
@media (pointer: coarse) {
    .paper-map-label { min-height: 44px; min-width: 44px; }
}
.paper-map-tip .paper-map-ask {
    display: inline-block;
    margin-top: 8px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: underline;
}
.paper-hits .paper-hits-ask { margin-left: 8px; font-family: var(--font-mono); font-size: 0.75rem; white-space: nowrap; }
.paper-hits .paper-hits-add {
    display: block;
    margin-top: 6px;
    min-height: 32px;
    padding: 2px 10px;
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.paper-hits .paper-hits-add[aria-pressed="true"] { background: var(--orange); }
.paper-hits .paper-hits-add:disabled { opacity: 0.45; cursor: default; }
.paper-hits .paper-hits-add:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.paper-map-layout.has-panel { display: grid; gap: 20px; }
.paper-map-main { min-width: 0; }
@media (min-width: 992px) {
    .paper-map-layout.has-panel { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
@media (max-width: 991px) {
    .paper-cluster-card:not(.is-open) { display: none; }
}
.paper-cluster-card {
    min-width: 0;
    max-height: 75vh;
    overflow-y: auto;
    background: var(--field);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-md);
    padding: 16px;
}
.paper-cluster-hint { margin: 0; font-size: 0.9rem; }
.paper-cluster-card h3 { margin: 10px 0 8px; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.paper-cluster-card p { font-size: 0.92rem; line-height: 1.4; }
.paper-cluster-card .paper-paper-meta { font-family: var(--font-mono); font-size: 0.78rem; }
.paper-cluster-bars svg { display: block; width: 100%; height: auto; margin: 4px 0 12px; overflow: visible; }
.paper-cluster-bars text { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: var(--ink); }
.paper-cluster-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.paper-cluster-actions .neo-btn { margin-top: 0; min-height: 44px; padding: 8px 14px; font-size: 0.85rem; }
.paper-cluster-actions .neo-btn[aria-pressed="true"] { background: var(--orange); }
.paper-cluster-actions .paper-cluster-close { background: var(--paper); }
.paper-cluster-actions .neo-btn:disabled { opacity: 0.45; cursor: default; }
/* The paper body keeps its buttons in one short row above the title */
.paper-paper-actions { flex-wrap: nowrap; gap: 5px; margin-bottom: 12px; }
.paper-paper-actions .neo-btn {
    min-height: 36px;
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--ink);
}
.paper-paper-actions .paper-cluster-close { flex: none; width: 36px; padding: 0; font-size: 1.1rem; }
.paper-cluster-card .paper-paper-body h3 { margin-top: 0; }

/* Basket of papers for the agent, under the map help line */
.paper-basket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.paper-basket[hidden] { display: none; }
.paper-basket-label { flex-basis: 100%; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.paper-basket-list { flex-basis: 100%; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.paper-basket-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; line-height: 1.35; }
.paper-basket-list span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.paper-basket-list button {
    flex: none;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    cursor: pointer;
}
.paper-basket .neo-btn { margin-top: 0; min-height: 44px; padding: 8px 14px; font-size: 0.85rem; }
.paper-basket .paper-cluster-close { background: var(--paper); }
.paper-basket a:focus-visible,
.paper-basket button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* "Show me around" replays the guided tour, as on the zones pages */
.paper-tour-start {
    min-height: 48px;
    padding: 8px 16px;
    border: 2px solid var(--ink);
    background: var(--orange);
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}
.paper-tour-start:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
.paper-tour-start:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* The guided tour. A card at the foot of the screen, and the part it describes
   is ringed in the site's orange */
.paper-tour-focus {
    outline: 4px solid var(--orange);
    outline-offset: 4px;
}
.paper-tour {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 2000;
    width: min(480px, calc(100vw - 32px));
    padding: 14px 16px 16px;
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink);
    transform: translateX(-50%);
}
.paper-tour[hidden] { display: none; }
.paper-tour-count { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; }
.paper-tour-text { margin: 4px 0 12px; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.paper-tour-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.paper-tour-btns button {
    min-height: 36px;
    padding: 0 12px;
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.paper-tour-btns [data-tour="next"] { background: var(--ink); color: var(--paper); }
.paper-tour-btns [data-tour="skip"] { margin-left: auto; border-color: transparent; text-decoration: underline; }
.paper-tour-btns button:disabled { opacity: 0.4; cursor: default; }
.paper-tour-btns button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.paper-tour-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.paper-tour-progress span { display: block; width: 0; height: 100%; background: var(--orange); }
.paper-tour.is-playing .paper-tour-progress span { animation: paper-tour-step 5.2s linear forwards; }
@keyframes paper-tour-step { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .paper-tour.is-playing .paper-tour-progress span { animation: none; }
}

.paper-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
}
.paper-legend-strip {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    flex: 1 1 300px;
    border: 2px solid var(--ink);
}
.paper-legend-strip span { background: var(--swatch); padding: 4px 0; text-align: center; }
.paper-legend-unknown::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    background: var(--swatch);
    border: 2px solid var(--ink);
}
.paper-year-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.paper-year-controls label { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; }
.paper-year-controls output { display: inline-block; min-width: 4ch; }
.paper-year-controls .neo-btn { margin-top: 0; min-height: 44px; padding: 8px 20px; }
.paper-year-controls .neo-btn[aria-pressed="true"] { background: var(--orange); }
.paper-year-controls input[type="range"] {
    flex: 1 1 220px;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 3px 0 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.paper-year-controls input[type="range"]:focus { background: transparent; box-shadow: none; }
.paper-year-controls input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--ink); }
.paper-year-controls input[type="range"]::-moz-range-track { height: 6px; background: var(--ink); }
.paper-year-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    margin-top: -19px;
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
}
.paper-year-controls input[type="range"]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
}
.paper-year-controls input[type="range"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.paper-year-count { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; }

/* ── Daily news poetry retrospective (/projects/auto_news_poems/) ─────────── */
.poems-page { --kicker-bg: var(--yellow); --data-mono: var(--font-mono); margin-bottom: 60px; }
.poems-page .data-hero { padding-inline: 0; }
.poems-page .trend-section {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
    padding: clamp(40px, 6vw, 80px) 0;
    border-bottom: 2px solid var(--ink);
}
.poems-page .section-head { max-width: 66ch; }
.poems-page .bar-list { gap: 8px; }
.poems-page .bar-row--wide { grid-template-columns: 112px minmax(0, 1fr) 52px; }
.poems-page .bar-val { text-align: right; }
.poems-page .stat-detail a { color: inherit; text-decoration: underline; }

/* Themes by month. Fixed columns so long words wrap on phones. */
.poems-page .poem-themes {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-family: var(--data-mono);
    font-size: 0.82rem;
    font-weight: 700;
}
.poems-page .poem-themes th,
.poems-page .poem-themes td {
    border-bottom: 2px solid var(--field);
    padding: 8px 6px;
    text-align: left;
    overflow-wrap: anywhere;
}
.poems-page .poem-themes thead th { border-bottom: 2px solid var(--ink); text-transform: uppercase; font-size: 0.72rem; }
.poems-page .poem-themes tbody th { font-weight: 900; }

/* The shape of a poem. Six tiles, three across. */
.poems-page .poem-shape {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 2px solid var(--ink);
}
.poems-page .poem-shape .stat-value { font-size: clamp(2rem, 4vw, 3.2rem); }

/* Words the poet loved. Poems beside news, stacked on phones. */
.poems-page .poem-vocab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.poems-page .poem-vocab-news .bar-fill { background: var(--blue); }

/* Read one. The calendar keeps its rounded card. The poem sits beside it. */
.poems-page .poem-reader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}
.poems-page .calendar {
    background: #fff;
    padding: 20px;
    border: 2px solid var(--ink);
    border-radius: 50px;
    box-shadow: 0 30px 30px -20px rgba(0, 0, 0, 0.3);
    min-width: 0;
}
.poems-page .calendar .month {
    position: relative;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 48px;
}
.poems-page .calendar .month .date { font-size: 30px; font-weight: 600; display: inline-block; }
.poems-page .calendar .month .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9e9e9e;
    cursor: pointer;
}
.poems-page .calendar .month #prevMonth { left: 0; }
.poems-page .calendar .month #nextMonth { right: 0; }
.poems-page .calendar .month .nav:hover:not(:disabled) { background: #eee; color: var(--ink); }
.poems-page .calendar .month .nav:disabled { opacity: 0.3; cursor: default; }
.poems-page .calendar .month .nav:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.poems-page .calendar .days,
.poems-page .calendar .dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.poems-page .calendar .days { color: #999; font-weight: 600; margin-bottom: 15px; text-align: center; }
.poems-page .calendar .dates button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 50px;
    aspect-ratio: 1;
    min-height: 44px;
    margin: 2px auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition-duration: 0.2s;
}
.poems-page .calendar .dates button.has-poem { background: rgba(10, 61, 98, 0.3); color: var(--ink); font-weight: 700; }
.poems-page .calendar .dates button:hover { background: #000; color: #fff; }
.poems-page .calendar .dates button.selected { background: #0a3d62; color: #fff; font-weight: 600; }
.poems-page .calendar .dates button:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.poems-page .side-div { font-size: 1.2rem; overflow-wrap: break-word; }
.poems-page .poem-text { white-space: pre-line; margin: 18px 0; }
.poems-page #newsDiv {
    margin-top: 20px;
    padding: 14px 16px;
    border: 2px solid var(--ink);
    background: rgba(247, 210, 0, 0.552);
}

/* Explainer button in the neo style, as on the other project pages. */
.poems-page .slidedown {
    margin-top: clamp(32px, 5vw, 56px);
    padding: 16px 20px;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-lg);
    font-size: 1.25em;
    font-weight: 700;
    transition: all 0.18s ease;
}
.poems-page .slidedown:hover { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: var(--shadow-xl); }
.poems-page .slidedown:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.poems-page .slidedownContent { padding: 0 20px; background: var(--field); border: 2px solid var(--ink); border-top: none; }

@media (max-width: 760px) {
    .poems-page .poem-reader,
    .poems-page .poem-vocab { grid-template-columns: 1fr; }
    .poems-page .poem-shape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .poems-page .bar-row--wide { grid-template-columns: 96px minmax(0, 1fr) 48px; }
    .poems-page .calendar { padding: 12px 8px; border-radius: 28px; }
    .poems-page .calendar .month .date { font-size: 22px; }
    .poems-page .poem-themes { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
    .poems-page .slidedown,
    .poems-page .calendar .dates button { transition: none; }
}

/* ── Running page round 2. Race predictions, consistency rings, run heatmap ── */
.run-page .race-grid { margin-top: 0; }
.run-page .race-grid .insight-value { white-space: nowrap; }
.run-page .race-grid + .partial-note { margin-top: 18px; }

.run-page .run-rings { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.run-page .run-ring { margin: 0; width: 96px; text-align: center; }
.run-page .run-ring svg { display: block; width: 96px; height: 96px; }
.run-page .run-ring-track,
.run-page .run-ring-fill { fill: none; stroke-width: 14; }
.run-page .run-ring-track { stroke: var(--field); }
.run-page .run-ring-fill { stroke: var(--orange); }
.run-page .run-ring-edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.run-page .run-ring-pct { fill: var(--ink); font-family: var(--font-sans); font-size: 22px; font-weight: 900; letter-spacing: -0.04em; }
.run-page .run-ring figcaption { font-family: var(--data-mono); font-size: 0.78rem; font-weight: 900; margin-top: 6px; }

/* Cumulative climb lines with the Everest silhouette on the right. */
.run-page .climb-card { margin-top: clamp(22px, 3vw, 34px); }
.run-page .climb-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.run-page .climb-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.run-page .climb-line.is-partial { stroke-width: 3.5; }
.run-page .climb-grid { stroke: var(--line); stroke-width: 1; }
.run-page .climb-base { stroke: var(--ink); stroke-width: 2; }
.run-page .climb-tick { font-family: var(--data-mono); font-size: 12px; font-weight: 700; fill: var(--muted); }
.run-page .climb-everest-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.5; }
.run-page .climb-everest { fill: var(--field); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.run-page .climb-snow { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.run-page .climb-everest-label { fill: var(--ink); }
.run-page .climb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-family: var(--data-mono); font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.run-page .climb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.run-page .climb-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.run-page .climb-legend b { color: var(--ink); }

/* Race training: two scatter panels, the comparison table and the race list. */
.run-page .trend-section > * { min-width: 0; } /* tables and svgs must not widen the column */
.run-page .race-progress svg { display: block; width: 100%; height: auto; overflow: visible; }
.run-page .race-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.7; }
.run-page .race-panels-after { margin-top: clamp(14px, 2vw, 24px); }
.run-page .race-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.run-page .race-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.run-page .race-grid { stroke: var(--line); stroke-width: 1; }
.run-page .race-base { stroke: var(--ink); stroke-width: 2; }
.run-page .race-tick { font-family: var(--data-mono); font-size: 12px; font-weight: 700; fill: var(--muted); }
.run-page .race-dot { stroke: var(--ink); stroke-width: 1.5; }
.run-page .race-rho { margin-top: 10px; font-family: var(--data-mono); font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.run-page .race-legend i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.run-page .race-card { margin-top: clamp(14px, 2vw, 24px); }
.run-page .race-scroll { overflow-x: auto; }
.run-page .race-table { width: 100%; border-collapse: collapse; font-family: var(--data-mono); font-size: 0.78rem; color: var(--muted); }
.run-page .race-table th, .run-page .race-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.run-page .race-table th:first-child, .run-page .race-table td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.run-page .race-table th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: normal; vertical-align: bottom; }
.run-page .race-table td b { color: var(--ink); }
.run-page .race-table i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; border: 1.5px solid var(--ink); }
@media (max-width: 720px) { .run-page .race-panels { grid-template-columns: 1fr; } }

.run-page .run-heat-section { grid-template-columns: minmax(0, 1fr); }
.run-heat { --cell: 11px; --gap: 3px; }
.run-heat .run-heat-scroll { overflow-x: auto; padding-bottom: 4px; }
.run-heat .run-heat-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.run-heat .run-heat-year {
    display: grid;
    grid-template-columns: 112px max-content;
    align-items: end;
    gap: 16px;
}
.run-heat .run-heat-year + .run-heat-year { margin-top: 18px; }
.run-heat .run-heat-label { display: grid; gap: 2px; font-family: var(--data-mono); font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.run-heat .run-heat-label strong { color: var(--ink); font-family: var(--font-sans); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
.run-heat .run-heat-months,
.run-heat .run-heat-grid {
    display: grid;
    grid-template-columns: repeat(53, var(--cell));
    column-gap: var(--gap);
}
.run-heat .run-heat-months { margin-bottom: 4px; }
.run-heat .run-heat-months span { grid-row: 1; font-family: var(--data-mono); font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.run-heat .run-heat-grid { grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; row-gap: var(--gap); }
.run-heat .l0 { background: var(--field); }
.run-heat .l1 { background: color-mix(in srgb, var(--orange) 25%, var(--field)); }
.run-heat .l2 { background: color-mix(in srgb, var(--orange) 50%, var(--field)); }
.run-heat .l3 { background: color-mix(in srgb, var(--orange) 75%, var(--field)); }
.run-heat .l4 { background: var(--orange); }
.run-heat .is-out { visibility: hidden; }
.run-heat .run-heat-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-family: var(--data-mono); font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.run-heat .run-heat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.run-heat .run-heat-legend i { display: inline-block; width: 11px; height: 11px; }

@media (max-width: 640px) {
    .run-page .run-ring,
    .run-page .run-ring svg { width: 72px; }
    .run-page .run-ring svg { height: 72px; }
    .run-heat { --cell: 7px; --gap: 2px; }
    .run-heat .run-heat-year { grid-template-columns: max-content; gap: 6px; }
    .run-heat .run-heat-label { display: flex; align-items: baseline; gap: 10px; }
    .run-heat .run-heat-label strong { font-size: 1.15rem; }
}

/* ── Daily page round 2. Records, goal streaks, the week, sleep split, sleep and stress ── */
.daily-page .stat-value.daily-record {
    font-size: clamp(1.8rem, 3.4vw, 3.2rem);
    line-height: 0.95;
    overflow-wrap: anywhere;
}
.daily-page .daily-records { margin-top: clamp(22px, 3vw, 34px); border-top: 2px solid var(--ink); }

/* Two stat tiles over the goal grid, framed like a chart card. */
.daily-page .goal-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-lg);
    margin-bottom: clamp(22px, 3vw, 34px);
}
/* Slim side padding so 53 weeks fit at 1280px. Narrower cards scroll inside. */
.daily-page .goal-card { padding-inline: 18px; }
.daily-page .goal-section > div { min-width: 0; }
.daily-page .goal-scroll { overflow-x: auto; padding-bottom: 6px; }
.daily-page .goal-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.daily-page .goal-grid { --cell: 11px; --gap: 3px; width: max-content; }
.daily-page .goal-months,
.daily-page .goal-cells {
    display: grid;
    grid-template-columns: repeat(53, var(--cell));
    gap: var(--gap);
}
.daily-page .goal-months {
    height: 16px;
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 900;
    white-space: nowrap;
}
.daily-page .goal-cells { grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; }
.daily-page .goal-cell {
    display: inline-block;
    width: var(--cell, 11px);
    height: var(--cell, 11px);
    border: 1px solid rgba(8, 8, 8, 0.28);
    background: var(--field);
}
.daily-page .goal-cell--hit { background: var(--green); border-color: var(--ink); }
.daily-page .goal-cell--none { background: transparent; border-color: transparent; }
.daily-page .goal-cell--pad { visibility: hidden; }
.daily-page .goal-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    font-family: var(--data-mono);
    font-size: 0.72rem;
    font-weight: 900;
}
.daily-page .goal-key > span { display: inline-flex; align-items: center; gap: 6px; }
.daily-page .goal-key .goal-cell--none { border: 1px dashed rgba(8, 8, 8, 0.4); }

/* The week. Two seven-bar charts side by side, stacked on phones. */
.daily-page .week-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 34px);
}
.daily-page .week-card .partial-note { grid-column: 1 / -1; margin: 0; }
.daily-page .week-bars { display: flex; gap: clamp(4px, 1vw, 10px); }
.daily-page .week-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.daily-page .week-plot {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 132px;
    border-bottom: 2px solid var(--ink);
}
.daily-page .week-bar {
    display: block;
    width: 100%;
    min-height: 4px;
    background: var(--field);
    border: 2px solid var(--ink);
    border-bottom: 0;
}
.daily-page .week-bar--weekend { background: var(--yellow); }
.daily-page .week-val,
.daily-page .week-day {
    font-family: var(--data-mono);
    font-size: 0.66rem;
    font-weight: 900;
    white-space: nowrap;
}

/* Sleep split. One night per year, REM in blue, other sleep in field. */
.daily-page .rem-card .bar-row { grid-template-columns: 58px minmax(0, 1fr); }
.daily-page .rem-track { display: block; min-width: 0; }
.daily-page .rem-night {
    display: flex;
    align-items: center;
    height: 24px;
    background: var(--field);
    border: 2px solid var(--ink);
    overflow: hidden;
}
.daily-page .rem-fill { align-self: stretch; flex: none; background: var(--blue); border-right: 2px solid var(--ink); }
.daily-page .rem-label {
    padding: 0 8px;
    font-family: var(--data-mono);
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}
.daily-page .rem-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--field);
    border: 2px solid var(--ink);
}
.daily-page .rem-swatch--rem { background: var(--blue); }

/* Sleep against stress. The music page scatter, with a best fit line. */
.daily-page .sleep-scatter { display: block; width: 100%; height: auto; }
.daily-page .sleep-grid line { stroke: rgba(8, 8, 8, 0.12); stroke-width: 1; }
.daily-page .sleep-grid text {
    font-family: var(--data-mono);
    font-size: 11px;
    font-weight: 700;
    fill: var(--muted);
}
.daily-page .sleep-dots { fill: none; stroke: var(--blue); stroke-opacity: 0.3; stroke-width: 6; stroke-linecap: round; }
.daily-page .sleep-fit { stroke: var(--orange); stroke-width: 3; }
.daily-page .sleep-axis { stroke: var(--ink); stroke-width: 2; }

@media (max-width: 640px) {
    .daily-page .goal-grid { --cell: 7px; --gap: 2px; }
    .daily-page .goal-months { font-size: 0.56rem; }
    .daily-page .week-card { grid-template-columns: 1fr; }
    .daily-page .week-val { font-size: 0.6rem; }
    .daily-page .sleep-grid text { font-size: 16px; }
}

/* ── Apple vs Garmin round 2. Scatter or Bland Altman pill, gap bars ─────── */
.compare-page .compare-views {
    display: inline-flex;
    margin: 0 0 12px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    overflow: hidden;
}
.compare-page .compare-view-btn {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--data-mono);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}
.compare-page .compare-view-btn + .compare-view-btn { border-left: 2px solid var(--ink); }
.compare-page .compare-view-btn:hover { background: var(--yellow); }
.compare-page .compare-view-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.compare-page .compare-view-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -5px; }
@media (max-width: 760px) {
    .compare-page .compare-views { margin-bottom: 8px; }
    .compare-page .scrolly-readout { row-gap: 2px; }
}

/* Where the gap moves. Two bar cards, side by side on desktop. */
.compare-page .compare-gaps { padding-top: 0; }
.compare-page .compare-gaps .section-head { max-width: 66ch; }
.compare-page .compare-gap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
    margin-top: clamp(24px, 4vw, 40px);
}
.compare-page .compare-gap-grid svg { display: block; width: 100%; height: auto; }
.compare-page .compare-gap-note { margin: 12px 0 0; line-height: 1.5; }
@media (max-width: 760px) {
    .compare-page .compare-gap-grid { grid-template-columns: 1fr; }
}

/* Site wide round 2. Lighthouse contrast fixes. White text on the blue and
   orange fills is below 4.5 to 1, so those fills take ink text, as the yellow,
   orange and green tiles already do. Muted captions get darker. */
.rr-tile--blue { color: var(--ink); }
.rr-live-tile:nth-child(3),
.rr-live-tile:nth-child(3):hover { color: var(--ink); }
.rr-live-tile:nth-child(3):focus-visible { outline-color: var(--ink); }
.data-page .stat-tile:nth-child(3) { color: var(--ink); }
.run-page .insight:nth-child(2),
.run-page .wx-grid .insight:nth-child(4) { color: var(--ink); }
.data-page .partial-note,
.run-page .spark-foot { color: rgba(8, 8, 8, 0.68); }
.run-page .spark-year--partial { color: #b84a1a; }
.compare-page .scrolly-step { opacity: 0.68; }

/* Round 5 blog. List titles are h2 for the outline but keep the old h5 size */
.post-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* ── Round 5 workstream A: site shell, homepage, about, policy ────────── */
.rr-notfound { align-items: flex-start; margin-top: clamp(22px, 3vw, 38px); max-width: 720px; }
.rr-notfound .neo-btn { background: var(--yellow); font-size: 1rem; margin-top: 8px; min-height: 44px; padding: 12px 22px; }
.rr-notfound .neo-btn:hover { background: var(--orange); }
/* Keyboard focus on the hero kicker shows the same history line as hover. */
.rr-kicker:focus-visible { background: var(--blue); color: #fff; outline: 3px solid var(--ink); outline-offset: 3px; }
.rr-kicker:focus-visible .rr-kicker--current { display: none; }
.rr-kicker:focus-visible .rr-kicker--history { display: inline; }
/* About story: one panel of short sections beside the portrait. */
.rr-about-story { gap: 12px; justify-content: flex-start; }
.rr-about-story h2 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 18px 0 0;
}
.rr-about-story p,
.rr-about-story p + p {
    color: var(--ink);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.5;
}
.rr-about-story .rr-about-lead {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}
.rr-about-story .rr-chip-row { margin-top: 12px; }
.rr-about-grid--portrait > .rr-portrait { align-self: start; justify-self: center; width: 100%; }
/* Policy: five short lines in one panel, linked from the footer. */
.rr-policy { margin-top: clamp(22px, 3vw, 38px); max-width: 820px; }
.rr-policy ul { display: grid; gap: 14px; margin: 0; padding-left: 1.2em; }
.rr-policy li { font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: 600; line-height: 1.5; }
.rr-policy code { font-family: var(--font-mono); font-size: 0.92em; }
.rr-about-story .rr-policy-date { color: var(--muted); font-size: 0.85rem; }
.rr-footer-policy { align-items: center; display: inline-flex; min-height: 44px; text-decoration: underline; }
.rr-footer-policy:hover { color: var(--yellow); }

/* Round 5 workstream D. Project pages */
#game-board .card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.game-error {
    background: var(--yellow);
    border: 2px solid var(--ink);
    font-weight: 700;
    margin: 0 auto 12px;
    max-width: 60ch;
    padding: 10px 14px;
    text-align: center;
}
.igv-page .chart-card h2 {
    font-family: var(--data-mono);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 18px;
    text-transform: uppercase;
}
.igv-page .igv-load-error {
    background: var(--yellow);
    border: 2px solid var(--ink);
    font-weight: 800;
    margin: 0;
    padding: 18px;
}

.globe-info figcaption a { color: inherit; text-decoration: underline; }