/* Shared styles for Jacob Wadkins Personal Website */

/* Text utilities (justified only where lines are long enough not to open big gaps between words) */
@media (min-width: 768px) {
    .justify-full {
        text-align: justify;
        text-justify: inter-word;
    }
}

/* Site header: the name on the left and the main pages on the right, on one line (60px tall, 80px
   from md up). Phones don't have room for the links beside the name, so they get a Menu button that
   opens them in a panel under the header (site-nav.js) */
.site-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1rem;
    background: #1e3a8a;
    color: white;
}

.site-name {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.site-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
}

.site-name,
.site-links a {
    transition: color 0.3s;
}

.site-name:hover,
.site-links a:hover,
.site-links a:focus-visible,
.site-links a[aria-current] {
    color: #ef4444;
}

.site-menu-button {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1875rem 0.7rem;
    line-height: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 9999px;
    font-weight: 600;
}

@media (max-width: 539px) {
    .has-menu .site-menu-button {
        display: flex;
    }

    .has-menu .site-links {
        display: none;
    }

    .has-menu.is-open .site-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 0.5rem;
        background: #1e3a8a;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }

    .has-menu .site-links a {
        padding: 0.8rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        font-size: 1.05rem;
    }
}

@media (min-width: 768px) {
    .site-nav {
        padding: 1.5rem 5rem;
    }

    .site-name {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .site-links {
        gap: 2rem;
    }
}

/* phones on their side keep the shorter header */
@media (min-width: 768px) and (max-height: 500px) {
    .site-nav {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .site-name {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

/* Under the header on the Personal and Professional subpages: the section's main page, then the
   pages in it */
.section-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4b5563;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .section-nav {
        padding: 0.75rem 5rem; /* lines up with the name in the header */
    }
}

.section-nav a {
    transition: color 0.3s;
}

.section-nav a:hover,
.section-nav a:focus-visible {
    color: #ef4444;
}

.section-nav a[aria-current="page"] {
    color: #ef4444;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35rem;
}

.section-nav-home {
    color: #1e3a8a;
}

.section-nav-sep {
    margin: 0 -0.5rem;
    color: #9ca3af;
}

/* Quote styling (for Quotes page) */
.quote-container {
    max-width: 1200px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quote-text {
    font-size: 1.125rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.quote-author {
    font-size: 1rem;
    text-align: right;
}

@media (min-width: 768px) {
    .quote-container {
        margin: 2rem auto;
        padding: 2rem;
    }

    .quote-text {
        font-size: 1.5rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .quote-author {
        font-size: 1.25rem;
    }
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1a365d;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Treatment train diagram (Professional page) */
.tt-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.tt-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tt-scroll svg {
    display: block;
    width: 100%;
    height: auto;
}

/* below desktop widths the diagram keeps its designed size, so its labels stay readable, and scrolls */
@media (max-width: 1023px) {
    .tt-scroll svg {
        min-width: 1256px;
    }
}

.tt-pipe {
    fill: none;
    stroke: url(#tt-pipe-grad);
    stroke-width: 12;
}

.tt-permeate {
    fill: none;
    stroke: #4ba3c4;
    stroke-width: 6;
    stroke-linejoin: round;
}

.tt-flow {
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 3;
    stroke-dasharray: 8 16;
    animation: tt-flow 0.9s linear infinite;
}

.tt-flow-thin {
    stroke-width: 2;
}

.tt-wall {
    fill: none;
    stroke: #334155;
    stroke-width: 3;
    stroke-linejoin: round;
}

.tt-tiny {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tt-name {
    font-size: 15px;
    font-weight: 700;
    fill: #334155;
    text-anchor: middle;
    transition: fill 0.3s;
}

.tt-num {
    fill: #2563eb;
}

.tt-sub {
    font-size: 12px;
    fill: #64748b;
    text-anchor: middle;
}

.tt-unit {
    cursor: pointer;
}

.tt-hl {
    fill: #eff6ff;
    stroke: #93c5fd;
    stroke-width: 2;
    opacity: 0;
    transition: opacity 0.3s;
}

.tt-unit:hover .tt-hl {
    opacity: 0.5;
}

.tt-unit.is-active .tt-hl {
    opacity: 1;
}

.tt-unit.is-active .tt-name {
    fill: #1d4ed8;
}

.tt-bubble {
    fill: rgba(255, 255, 255, 0.75);
    animation: tt-rise 3s linear infinite;
}

.tt-wave {
    animation: tt-wave 3s linear infinite;
}

.tt-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: tt-spin 1.2s linear infinite;
}

.tt-spin-slow {
    animation-duration: 8s;
}

.tt-skim {
    animation: tt-skim 4s linear infinite;
}

.tt-uv {
    animation: tt-pulse 1.6s ease-in-out infinite alternate;
}

.tt-level {
    animation: tt-level 6s ease-in-out infinite alternate;
}

@keyframes tt-flow {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes tt-rise {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 0.9; }
    85% { opacity: 0.9; }
    100% { transform: translateY(calc(-1 * var(--rise))); opacity: 0; }
}

@keyframes tt-wave {
    from { transform: translateX(0); }
    to { transform: translateX(56px); }
}

@keyframes tt-spin {
    to { transform: rotate(360deg); }
}

@keyframes tt-skim {
    from { transform: translateX(0); }
    to { transform: translateX(40px); }
}

@keyframes tt-pulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

@keyframes tt-level {
    from { transform: translateY(16px); }
    to { transform: translateY(0); }
}

/* Stage tabs; the active tab's bar fills while the auto-tour runs (5s, matches TOUR_MS) */
.tt-tabs {
    position: relative;
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
}

.tt-tab {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem 0.35rem 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    background: white;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.tt-tab:hover {
    border-color: #1e3a8a;
}

.tt-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    background: #dbeafe;
    color: #1d4ed8;
}

.tt-tab[aria-selected="true"] {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: white;
}

.tt-tab[aria-selected="true"] .tt-tab-num {
    background: white;
}

.tt-touring .tt-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #ef4444;
    transform-origin: left;
    animation: tt-progress 5s linear;
}

@keyframes tt-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.tt-panel {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .tt-panel {
        grid-template-columns: 3fr 2fr;
    }
}

.tt-panel.tt-fade {
    animation: tt-fade 0.4s ease-out;
}

@keyframes tt-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.tt-project {
    padding: 0.75rem 1rem;
    border-left: 4px solid #3b9ede;
    border-radius: 0.25rem;
    background: #f1f5f9;
}

@media (prefers-reduced-motion: reduce) {
    .tt-flow, .tt-bubble, .tt-wave, .tt-spin, .tt-skim, .tt-uv, .tt-level, .tt-panel.tt-fade {
        animation: none;
    }
}

/* Canoe river game (Personal page) */
.cr-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    max-height: 80vh;
    overflow: hidden;
    border-radius: 0.5rem;
    background: linear-gradient(#9fb5cb, #6f8a7a 55%, #2f4636);
    color: white;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 639px) {
    .cr-stage {
        aspect-ratio: 4 / 5;
    }
}

/* on the Personal page the river fills the screen below the header (60px tall, 80px from md up) */
.cr-page {
    --cr-header: 60px;
    padding: 0.5rem 0.5rem 0;
}

.cr-page .cr-stage {
    aspect-ratio: auto;
    height: calc(100vh - var(--cr-header) - 1rem);
    min-height: 26rem;
    max-height: none;
}

@supports (height: 100svh) {
    .cr-page .cr-stage {
        height: calc(100svh - var(--cr-header) - 1rem);
    }
}

@media (min-width: 768px) {
    .cr-page {
        --cr-header: 80px;
    }
}

.cr-below {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1.5rem;
    padding: 0.6rem 0.25rem 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.cr-links a {
    font-weight: 600;
    color: #1e3a8a;
    transition: color 0.3s;
}

.cr-links a:hover,
.cr-links a:focus-visible {
    color: #ef4444;
}

.cr-stage:focus {
    outline: none;
}

.cr-stage:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: -3px;
}

.cr-stage:fullscreen,
.cr-stage.is-expanded {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

.cr-stage.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.cr-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

.cr-stage canvas.is-dragging {
    cursor: grabbing;
}

.cr-vignette,
.cr-labels,
.cr-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cr-vignette {
    background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(8, 14, 12, 0.4) 100%);
}

.cr-hud {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 3.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cr-hud[hidden] {
    display: none;
}

.cr-chip,
.cr-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem 0.25rem 0.3rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: white;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.cr-chip {
    transition: background-color 0.2s;
}

.cr-chip:hover,
.cr-chip:focus-visible {
    background: rgba(30, 58, 138, 0.9);
}

.cr-chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.92);
}

/* landings you've reached get the site's red */
.cr-chip.is-visited .cr-chip-num {
    color: white;
    background: #ef4444;
}

.cr-label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.85rem;
    opacity: 0;
    will-change: transform, opacity;
}

.cr-label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom: 0;
    border-top-color: rgba(15, 23, 42, 0.55);
}

.cr-label-dist {
    font-weight: 400;
    opacity: 0.8;
}

.cr-card {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    width: min(22rem, calc(100% - 1.5rem));
    padding: 0.9rem 1.1rem 1rem;
    border-radius: 0.5rem;
    color: #334155;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.cr-card.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.cr-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.cr-ashore {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
    color: white;
    background: #1e3a8a;
    transition: background-color 0.3s;
}

.cr-ashore:hover,
.cr-ashore:focus-visible {
    background: #ef4444;
}

.cr-hint {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
}

.cr-key {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 0.3em;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    color: #475569;
    background: #f8fafc;
}

/* the About Me introduction over the river, gone once you start paddling */
.cr-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.5s, visibility 0.5s;
}

.cr-stage.is-playing .cr-overlay {
    opacity: 0;
    visibility: hidden;
}

/* the landing card and touch controls wait until then too */
.cr-stage:not(.is-playing) .cr-card,
.cr-stage:not(.is-playing) .cr-touch {
    visibility: hidden;
}

.cr-intro {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    width: min(32rem, calc(100% - 2rem));
    max-height: calc(100% - 5rem); /* clear of the landing buttons */
    border-radius: 0.5rem;
    color: #374151;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}

.cr-intro-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 0.9rem;
    font-size: 0.95rem;
}

.cr-intro-scroll p + p {
    margin-top: 0.75rem;
}

.cr-intro-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.cr-intro-photo {
    width: 4rem;
    height: 4rem;
    flex: none;
    object-fit: cover;
    border: 2px solid white;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cr-intro-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.cr-intro-foot {
    flex: none;
    padding: 0.8rem 1.5rem 1.1rem;
    border-top: 1px solid rgba(100, 116, 139, 0.25);
}

.cr-intro-cta {
    font-size: 0.9rem;
}

@media (max-width: 639px) {
    .cr-intro {
        left: 0.5rem;
        bottom: 0.5rem;
        width: calc(100% - 1rem);
        /* leave the river showing, and the two rows of landing buttons, but on short phones give the
           About Me text room to read */
        max-height: min(calc(100% - 6.5rem), max(60%, 22rem));
    }

    .cr-intro-scroll {
        padding: 1rem 1rem 0.75rem;
        font-size: 0.875rem;
    }

    .cr-intro-foot {
        padding: 0.7rem 1rem 0.9rem;
    }

    .cr-intro-photo {
        width: 3rem;
        height: 3rem;
    }

    .cr-intro-title {
        font-size: 1.3rem;
    }
}

.cr-status {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #475569;
}

.cr-fail-links a {
    font-weight: 700;
    color: #1e3a8a;
    text-decoration: underline;
}

.cr-spinner {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.5rem;
    vertical-align: -0.1rem;
    border: 2px solid rgba(30, 58, 138, 0.25);
    border-top-color: #1e3a8a;
    border-radius: 9999px;
    animation: tt-spin 0.9s linear infinite;
}

.cr-status.is-error .cr-spinner {
    display: none;
}

.cr-start {
    margin-top: 0.75rem;
    padding: 0.55rem 1.5rem;
    border-radius: 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    background: #1e3a8a;
    transition: background-color 0.3s;
}

.cr-start:hover,
.cr-start:focus-visible {
    background: #ef4444;
}

/* coming back from a landing's page skips the introduction */
.cr-resume-note {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.cr-resume-note .cr-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: white;
}

.cr-stage.is-resuming .cr-intro {
    display: none;
}

.cr-stage.is-resuming .cr-resume-note {
    display: flex;
}

.cr-fs {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    background: rgba(15, 23, 42, 0.55);
    transition: background-color 0.2s;
}

.cr-fs:hover,
.cr-fs:focus-visible {
    background: rgba(30, 58, 138, 0.9);
}

.cr-toast {
    position: absolute;
    left: 50%;
    top: 3.4rem;
    width: max-content; /* otherwise it only gets the half of the stage right of center, and wraps narrow */
    max-width: calc(100% - 2rem);
    padding: 0.4rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.72);
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.4s;
}

.cr-toast.is-visible {
    opacity: 1;
}

@media (max-width: 639px) {
    .cr-toast {
        top: 5.6rem; /* below the two rows of landing buttons */
    }
}

.cr-fade {
    background: #0b1210;
    opacity: 0;
    transition: opacity 0.45s;
}

.cr-fade.is-on {
    opacity: 1;
}

/* on-screen paddle and steering buttons for touch screens */
.cr-touch {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    display: none;
    justify-content: space-between;
    gap: 0.5rem;
}

.cr-touch button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 6.5rem;
    padding: 0.85rem 0;
    border-radius: 9999px;
    font-weight: 700;
    color: white;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    touch-action: none;
}

.cr-touch button.is-down {
    background: rgba(30, 58, 138, 0.9);
}

.cr-touch-help {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .cr-touch {
        display: flex;
    }

    .cr-card {
        bottom: 4.6rem;
    }

    .cr-keys-help {
        display: none;
    }

    .cr-touch-help {
        display: inline;
    }
}

/* phones on their side: fit the river between the header and the bottom of the screen, and keep the
   introduction and landing cards compact enough to leave the river and the buttons clear */
@media (max-height: 500px) {
    .cr-page {
        --cr-header: 60px;
    }

    .cr-page .cr-stage {
        min-height: 15rem;
    }

    .cr-intro {
        max-height: calc(100% - 4.25rem); /* clear of the one row of landing buttons */
    }

    .cr-intro-scroll {
        padding: 0.8rem 1.25rem 0.6rem;
        font-size: 0.875rem;
    }

    .cr-intro-head {
        margin-bottom: 0.5rem;
    }

    .cr-intro-photo {
        width: 2.75rem;
        height: 2.75rem;
    }

    .cr-intro-title {
        font-size: 1.2rem;
    }

    /* the Start button beside the invitation instead of under it */
    .cr-intro-foot {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 1rem;
        padding: 0.6rem 1.25rem 0.7rem;
    }

    .cr-intro-foot .cr-status,
    .cr-intro-foot .cr-start {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }

    .cr-intro-cta {
        font-size: 0.85rem;
    }

    /* between the paddle buttons and the landing buttons; a long quote scrolls rather than covering them */
    .cr-card {
        max-height: calc(100% - 7.7rem);
        overflow-y: auto;
        padding: 0.6rem 0.9rem 0.7rem;
    }

    .cr-card-title {
        font-size: 1.1rem;
        margin-bottom: 0.1rem;
    }

    .cr-card .mt-3 {
        margin-top: 0.5rem;
    }

    .cr-ashore {
        padding: 0.3rem 0.9rem;
    }

    /* messages go bottom right, beside the landing card rather than over it */
    .cr-toast {
        top: auto;
        bottom: 4.6rem;
        left: auto;
        right: 0.75rem;
        max-width: max(12rem, calc(100% - 24rem));
        transform: none;
    }
}

/* on the landing pages (river-return.js): back to the canoe on the Personal page */
.cr-return {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem 0.65rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    color: white;
    background: #1e3a8a;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.35);
    transition: background-color 0.3s;
    animation: cr-return-in 0.5s ease-out 0.3s both;
}

.cr-return:hover,
.cr-return:focus-visible {
    background: #ef4444;
}

/* room at the bottom of the footer so the button doesn't cover its text */
@media (max-width: 1023px) {
    .has-river-return footer {
        padding-bottom: 4.5rem;
    }
}

@keyframes cr-return-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cr-card, .cr-overlay, .cr-toast, .cr-fade, .cr-return {
        transition: none;
    }

    .cr-spinner, .cr-return {
        animation: none;
    }
}