:root {
    --bg-color: #07090e;
    --text-color: #f0f3f6;
    --header-name-color: #ffffff;
    --link-color: #4da6ff;
    --border-color: rgba(255, 255, 255, 0.08);
    --card-bg: rgba(22, 27, 34, 0.75);
    --subtext-color: #9198a1;
    --badge-bg: rgba(30, 41, 59, 0.6);
    --badge-text: #58a6ff;
    --glow-color: rgba(88, 166, 255, 0.15);
    --accent-color: #4da6ff;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --pass-bg: rgba(46, 160, 67, 0.16);
    --pass-text: #3fb950;
    --fail-bg: rgba(248, 81, 73, 0.16);
    --fail-text: #ff7b72;
    --star-color: #f59e0b;
    color-scheme: dark;
}

body.light-mode {
    --bg-color: #f8fafc;
    --text-color: #1e293b;
    --header-name-color: #0f172a;
    --link-color: #0284c7;
    --border-color: rgba(0, 0, 0, 0.08);
    --card-bg: rgba(255, 255, 255, 0.85);
    --subtext-color: #64748b;
    --badge-bg: rgba(241, 245, 249, 0.9);
    --badge-text: #0284c7;
    --glow-color: rgba(2, 132, 199, 0.08);
    --accent-color: #0284c7;
    --hover-bg: rgba(15, 23, 42, 0.05);
    --pass-bg: rgba(26, 127, 55, 0.12);
    --pass-text: #1a7f37;
    --fail-bg: rgba(207, 34, 46, 0.12);
    --fail-text: #cf222e;
    --star-color: #b45309;
    color-scheme: light;
}

html {
    background-color: var(--bg-color);
}

/* Light mode: the --bg-color token lives on body.light-mode, but <html>
   (the viewport surround outside the 1140px body column) resolves it from
   :root, so it stayed dark #07090e in light mode — and the root
   color-scheme stayed dark. Mirror the token onto <html> so the surround,
   the column and the browser chrome all match the active theme. */
html:has(body.light-mode) {
    --bg-color: #f8fafc;
    color-scheme: light;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Lora", serif;
    /* Desktop container: a professional ~1140px single column (was 740px,
       which read as very narrow on desktop). Grids, tables and cards are
       fluid, so they breathe into the wider canvas; the minimal
       single-column reading feel is unchanged. Mobile keeps its own
       padding in the media query below. */
    max-width: 1140px;
    margin: 80px auto;
    padding: 0 40px;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.8;
    letter-spacing: -0.01em;
    transition: background-color 0.4s ease, color 0.4s ease;
    animation: keynoteFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes keynoteFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Theme switcher — a small light/dark pill in the header bar (.site-nav).
   The sliding knob carries the icon: sun on the left (light mode), moon on
   the right (dark mode). The track is neutral in both themes — no green,
   no "on/off" reading. The icons are part of the slider, so they are
   visible on desktop and mobile alike. Site convention (script.js):
   checkbox checked = dark mode, unchecked = light mode. */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Neutral dark track (site defaults to dark). */
    background-color: #3a4556;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 28px;
}

/* Neutral light track in light mode. */
body.light-mode .slider {
    background-color: #d3d8de;
}

.slider:before {
    position: absolute;
    content: "☀︎";
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background-color: #ffffff;
    color: #d97706; /* amber sun: light mode */
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

input:checked + .slider:before {
    content: "☾︎";
    color: #64748b; /* slate moon: dark mode */
    transform: translateX(26px);
}

.switch input:focus-visible + .slider {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

header {
    margin-bottom: 60px;
    position: relative;
}

h1 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
    font-size: 3.4rem;
    font-weight: 700;
    margin: 0 0 14px 0;
    letter-spacing: -0.04em;
    color: var(--header-name-color);
    text-shadow: 0 2px 25px rgba(0,0,0,0.15);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--badge-bg);
    color: var(--badge-text);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: #2ea043;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #2ea043;
}

h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 60px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    color: var(--text-color);
    opacity: 0.9;
}

h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 8px;
    color: var(--text-color);
}

p {
    margin-bottom: 20px;
    color: var(--subtext-color);
}

body > p, body > h2 + p {
    color: var(--text-color);
}

ul {
    padding-left: 20px;
    margin-top: 8px;
}

li {
    margin-bottom: 10px;
    color: var(--subtext-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    margin-bottom: 20px;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--glow-color);
    border-color: var(--link-color);
}

.card h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    color: var(--text-color);
}

.card ul li {
    color: var(--text-color);
}

.quote-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.quote-card blockquote {
    margin: 0;
    color: var(--text-color);
    font-style: italic;
}

.quote-author {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 0.85rem;
    color: var(--subtext-color);
    text-align: right;
    margin-top: 12px;
    font-weight: 500;
}

.book-list-container {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.book-list-container {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.book-list-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--glow-color);
    border-color: var(--link-color);
}

.book-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}

.book-controls select, .recipe-controls select {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

.podcast-container {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.donate-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    text-align: center;
}

.btc-address-box {
    font-family: monospace;
    font-size: 0.85rem;
    background: var(--bg-color);
    border: 1px dashed var(--border-color);
    padding: 8px 12px;
    border-radius: 10px;
    word-break: break-all;
    margin: 8px 0;
    color: var(--text-color);
}

.copy-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    background-color: var(--text-color);
    color: var(--bg-color);
    border: none;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.copy-btn:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

/* Live Donation Feed Section */
.donation-log-box {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.donation-log-title {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    color: var(--subtext-color);
}

.donation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 180px;
    overflow-y: auto;
}

.donation-item {
    font-size: 0.85rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
}

.donation-empty {
    font-size: 0.85rem;
    color: var(--subtext-color);
    font-style: italic;
    padding: 6px 0;
}

.analytics-container {
    width: 100%;
    height: 420px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    overflow: hidden;
    margin-top: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.btc-chart-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.btc-chart-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.btc-chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--glow-color);
    border-color: var(--link-color);
}

.chart-resize-wrapper {
    resize: vertical;
    overflow: auto;
    min-height: 450px;
    height: 650px;
    max-height: 1200px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.tradingview-widget-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.live-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #2ea043;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 160, 67, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
}


/* --- Shared subpage header: smaller title, tighter header (all subpages) --- */
.page-header {
    margin-bottom: 40px;
}

.page-header h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--header-name-color);
}

.subtitle {
    font-size: 1rem;
    color: var(--subtext-color);
    line-height: 1.6;
    margin-top: 0;
}

/* --- Shared footer (one markup on every page) --- */
.site-footer {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 1rem;
    color: var(--subtext-color);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-links a {
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.05rem;
}

.footer-links a:hover {
    color: var(--link-color);
    opacity: 0.9;
}

/* --- Shared back link (all subpages) --- */
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    font-weight: 500;
}

/* --- Bitcoin hero header (bitcoin.html only) --- */
.hero-header {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 35px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.hero-header h1 {
    font-size: 2.4rem;
    margin: 0 0 8px 0;
    letter-spacing: -0.03em;
}

.hero-header p {
    margin: 0;
    color: var(--text-color);
    font-weight: 500;
}

/* --- Shared explainer accordions (finance / health / sustainability / recipes) --- */
.explainer-wrapper {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    overflow: hidden;
    transition: border-color 0.2s;
}

.explainer-wrapper:hover {
    border-color: var(--link-color);
}

.info-toggle {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-color);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-toggle:hover {
    background-color: var(--hover-bg);
}

.explainer-card {
    display: none;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--subtext-color);
    background: var(--bg-color);
}

.explainer-card.active {
    display: block;
}

.explainer-card h4 {
    color: var(--text-color);
    font-size: 0.92rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.explainer-card p {
    margin: 0 0 0.75rem 0;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.rule-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
}

.rule-item strong {
    color: var(--text-color);
    font-size: 0.82rem;
    display: block;
    margin-bottom: 0.2rem;
}

.rule-item p {
    margin: 0 0 0.4rem 0;
    font-size: 0.78rem;
}

.rule-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--link-color);
}

/* --- Shared resource cards (finance / health / sustainability) --- */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.resource-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 12px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    display: block;
}

.resource-card:hover {
    border-color: var(--link-color);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px var(--glow-color);
}

.resource-card h3, .resource-card h4 {
    color: var(--text-color);
    font-size: 1.05rem;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.resource-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.resource-card p {
    color: var(--subtext-color);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.5;
}

/* --- Nested recipe accordions (recipes.html only) --- */
.recipe-wrapper {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    overflow: hidden;
}

.recipe-toggle {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-color);
    padding: 0.65rem 0.9rem;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recipe-toggle:hover {
    background-color: var(--hover-bg);
}

.recipe-content {
    display: none;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--subtext-color);
    background: var(--bg-color);
}

.recipe-content.active {
    display: block;
}

.recipe-meta {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--link-color);
    margin-bottom: 0.5rem;
    display: block;
}

.recipe-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0.8rem 0 0.3rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.recipe-list, .recipe-steps {
    padding-left: 1.2rem;
    margin: 0 0 0.8rem 0;
    color: var(--subtext-color);
}

.recipe-list li, .recipe-steps li {
    margin-bottom: 0.3rem;
}

/* Nested sub-steps inside one preparation step, and numbered lists
   inside a notes block (e.g. Variations): same tokens, tighter indent. */
.recipe-steps ol, .recipe-notes ol {
    padding-left: 1.2rem;
    margin: 0.3rem 0 0.5rem 0;
    color: var(--subtext-color);
}

.recipe-steps ol li, .recipe-notes ol li {
    margin-bottom: 0.2rem;
}

.recipe-notes {
    font-size: 0.76rem;
    color: var(--subtext-color);
    border-top: 1px dashed var(--border-color);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

/* --- Recipe filter + sort (recipes.html only) --- */
.recipe-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 16px 0;
}

.recipe-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    background: var(--badge-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.filter-pill:hover {
    border-color: var(--link-color);
}

.filter-pill.active {
    color: var(--link-color);
    border-color: var(--link-color);
}

.filter-pill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
    align-items: center;
}

.recipe-empty {
    font-size: 0.85rem;
    color: var(--subtext-color);
    font-style: italic;
    padding: 6px 0;
}

/* --- Finance-only: ticker panel + screening table (scoped so they
       cannot restyle other pages' tables, selects or labels) --- */
.selector-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 10px;
    margin: 2rem 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.selector-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 250px;
}

.selector-group label {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--subtext-color);
}

.selector-group select {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.selector-group select:hover, .selector-group select:focus {
    border-color: var(--accent-color);
}

.spreadsheet-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 3rem;
    /* Right-edge scroll affordance: a soft shadow that shows only while
       there is more to see. The cover (local attachment) scrolls with the
       content and hides the shadow once scrolled fully right; when the
       table fits, the cover sits over the shadow and nothing shows. */
    background-image:
        linear-gradient(to left, var(--card-bg) 30%, transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent);
    background-size: 36px 100%, 14px 100%;
    background-position: right center, right center;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

/* Sticky first column (Company / Investor) so the row label stays visible
   while scrolling sideways. Opaque theme backgrounds keep scrolling
   content from showing through. */
.spreadsheet-container th:first-child,
.spreadsheet-container td:first-child:not(.empty-state) {
    position: sticky;
    left: 0;
    box-shadow: 1px 0 0 var(--border-color);
}
.spreadsheet-container th:first-child {
    z-index: 3;
}
.spreadsheet-container td:first-child:not(.empty-state) {
    z-index: 2;
    background-color: var(--card-bg);
}

.spreadsheet-container table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
}

.spreadsheet-container th, .spreadsheet-container td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.spreadsheet-container th {
    background-color: var(--hover-bg);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--subtext-color);
    font-weight: 600;
}

.spreadsheet-container tr:last-child td {
    border-bottom: none;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--subtext-color);
    font-style: italic;
}

.cell-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.framework-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    display: inline-block;
    letter-spacing: 0.02em;
}

.badge-pass {
    background-color: var(--pass-bg);
    color: var(--pass-text);
}

.badge-fail {
    background-color: var(--fail-bg);
    color: var(--fail-text);
}

@media (max-width: 768px) {
    body {
        margin: 40px auto;
        padding: 0 18px;
    }
    .site-brand-logo {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }
    .site-nav-right {
        gap: 8px;
    }
    h1 {
        font-size: 2.2rem;
    }
    .bento-grid {
        grid-template-columns: 1fr;
    }
    /* Merged About section: the working mobile timeline rules live at the
       END of this file (see "Mobile: About Me + Career & Education") —
       this block sits before the base .career-* rules, so rules placed
       here were overridden by them. */
    .analytics-container {
        height: 350px;
    }
    .chart-resize-wrapper {
        height: 450px;
    }
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Site-wide header nav with Pages dropdown (all pages) --- */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    padding-top: 8px;
    padding-bottom: 14px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
    /* Stacking context for the dropdown: it opens below the header, above
       page content and above the theme toggle (the original bug was the
       toggle covering the open menu). */
    /* Sticky header (2026-11-12): the nav stays pinned to the top of the
       viewport while scrolling, so the logo, Explore dropdown and theme
       toggle are always one tap away. Solid page background so scrolled
       content never shows through; the dropdown (z-index 1100 inside
       this stacking context) still opens above page content. Sticky
       keeps the nav in flow, so nothing jumps when it pins. */
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-color);
}

/* Brand: logo only, top left; links home. The logo (32px) sets the row
   height; the Pages button is the same height and the slider centres
   against both, so the bar is one clean, vertically centred row. */
.site-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
    color: var(--text-color);
}

.site-brand:hover {
    text-decoration: none;
    opacity: 1;
}

.site-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: block;
}

/* Pages dropdown + theme toggle, top right. */
.site-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.site-nav-menu {
    position: relative;
    flex-shrink: 0;
}

.site-nav-toggle {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.site-nav-toggle:hover {
    border-color: var(--link-color);
}

.site-nav-toggle[aria-expanded="true"] {
    border-color: var(--link-color);
    color: var(--link-color);
}

.site-nav-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    z-index: 1100;
}

.site-nav-dropdown.open {
    display: block;
}

.site-nav-dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.site-nav-dropdown a:hover {
    background: var(--hover-bg);
    opacity: 1;
    text-decoration: none;
}

/* --- Featured recipe card (health.html) --- */
.resource-card--featured {
    padding: 2rem;
}

.resource-card--featured h3 {
    font-size: 1.3rem;
}

.resource-card p.featured-meta {
    margin-top: 0.6rem;
    color: var(--link-color);
    font-weight: 600;
    font-size: 0.82rem;
}

/* --- Health resource logos & app links (added 2026-11-11) --- */
.resource-logo { margin-bottom: 0.75rem; line-height: 0; }
.resource-logo img { display: block; width: 48px; height: 48px; border-radius: 12px; }
.resource-logo--wordmark img { width: auto; max-width: 180px; height: 40px; background: #ffffff; padding: 6px 12px; border-radius: 10px; object-fit: contain; }
.resource-card h3 a { color: var(--text-color); text-decoration: none; }
.resource-card h3 a:hover { text-decoration: underline; }
.resource-links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.75rem; font-size: 0.85rem; }
.resource-links a { color: var(--link-color); text-decoration: none; }
.resource-links a:hover { text-decoration: underline; }

/* --- Recipes nutrition tool (added 2026-11-11) --- */
.nutrition-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.nutrition-serving { color: var(--subtext-color); font-size: 0.85rem; margin: 0 0 0.5rem 0; }
.nutrition-summary p { margin: 0.25rem 0; font-size: 0.88rem; color: var(--text-color); line-height: 1.5; }
.nutri-bars { margin: 0.6rem 0; }
.nutri-row { display: grid; grid-template-columns: 7.5rem 5.5rem 1fr 4.5rem; gap: 0.5rem; align-items: center; margin: 0.35rem 0; font-size: 0.85rem; }
.nutri-label { color: var(--text-color); }
.nutri-value { color: var(--subtext-color); text-align: right; }
.nutri-bar { height: 6px; background: var(--hover-bg); border: 1px solid var(--border-color); border-radius: 3px; overflow: hidden; }
.nutri-fill { height: 100%; background: var(--link-color); border-radius: 2px; }
.nutri-pct { color: var(--subtext-color); text-align: right; white-space: nowrap; }
.nutrition-note { color: var(--subtext-color); font-size: 0.8rem; margin-top: 0.6rem; line-height: 1.5; }
.nutrition-variant { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.nutrition-variant button { font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; background: var(--badge-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.nutrition-variant button:hover { border-color: var(--link-color); }
.nutrition-variant button.active { color: var(--link-color); border-color: var(--link-color); }
.combiner-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem; margin-top: 1rem; align-items: start; }
.combiner-list label { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; padding: 0.35rem 0; font-size: 0.9rem; color: var(--text-color); cursor: pointer; line-height: 1.4; }
.combiner-list input[type="checkbox"] { accent-color: var(--link-color); }
.combiner-serving { color: var(--subtext-color); font-size: 0.8rem; }
.combiner-variant { font: inherit; font-size: 0.85rem; color: var(--text-color); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.1rem 0.3rem; }
.combiner-total { font-size: 0.9rem; color: var(--text-color); margin-bottom: 0.5rem; line-height: 1.5; }
.combiner-empty { color: var(--subtext-color); font-size: 0.9rem; }
@media (max-width: 700px) {
    .combiner-layout { grid-template-columns: 1fr; }
    .nutri-row { grid-template-columns: 6.5rem 4.75rem 1fr 4rem; font-size: 0.8rem; }
}

/* --- Health Products & Services: compact cards (added 2026-11-12) --- */
.resource-grid--compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.resource-grid--compact .resource-card { padding: 1rem 1.1rem; }
.resource-grid--compact .resource-card h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.resource-grid--compact .resource-card h4 { font-size: 0.88rem; margin-bottom: 0.25rem; }
.resource-grid--compact .resource-card p { font-size: 0.82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.resource-grid--compact .resource-logo { margin-bottom: 0.5rem; }
.resource-grid--compact .resource-logo img { width: 36px; height: 36px; border-radius: 9px; }
.resource-grid--compact .resource-logo--wordmark img { width: auto; max-width: 140px; height: 30px; padding: 4px 10px; }
.resource-grid--compact .resource-links { margin-top: 0.5rem; font-size: 0.8rem; }

/* --- Recipes grid cards (added 2026-11-12) --- */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; }
.recipe-grid .recipe-wrapper { margin-bottom: 0; display: flex; flex-direction: column; }
.recipe-grid .recipe-wrapper.expanded { grid-column: 1 / -1; }
.recipe-grid .recipe-toggle { display: block; padding: 0; text-align: left; font-family: inherit; }
.recipe-card-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--hover-bg); }
.recipe-card-body { display: block; padding: 0.7rem 0.8rem 0.8rem; }
.recipe-card-title { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--text-color); }
.recipe-card-meta { display: block; font-size: 0.78rem; font-weight: 400; color: var(--subtext-color); margin-top: 0.3rem; line-height: 1.4; }
.recipe-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.55rem; }
.recipe-card-tag { font-size: 0.72rem; font-weight: 600; color: var(--badge-text); background: var(--badge-bg); border: 1px solid var(--border-color); padding: 0.15rem 0.6rem; border-radius: 20px; }
.recipe-card-arrow { font-size: 0.8rem; color: var(--subtext-color); }
.recipe-grid .recipe-content { padding: 1rem 1.25rem; }

/* --- Nutrition 0-5 dots + personalization (added 2026-11-12) --- */
.nutri-dots { display: inline-flex; gap: 4px; align-items: center; }
.nutri-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-color); background: transparent; }
.nutri-dot.filled { background: var(--link-color); border-color: var(--link-color); }
.nutri-dots--none { color: var(--subtext-color); }
.nutri-limit { display: block; font-size: 0.68rem; font-weight: 600; color: var(--subtext-color); text-transform: uppercase; letter-spacing: 0.03em; }
.nutrition-legend { color: var(--subtext-color); font-size: 0.8rem; line-height: 1.5; margin: 0.4rem 0 0.6rem; }
.nutrition-profile { border: 1px solid var(--border-color); border-radius: 10px; padding: 0.9rem 1rem; margin: 0.8rem 0 1rem; background: var(--card-bg); }
.nutrition-profile h5 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--text-color); }
.nutrition-profile-intro { font-size: 0.85rem; color: var(--subtext-color); margin: 0 0 0.7rem; line-height: 1.5; }
.nutrition-profile-fields { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; }
.nutrition-profile-fields label { font-size: 0.82rem; font-weight: 600; color: var(--text-color); display: flex; flex-direction: column; gap: 0.25rem; }
.nutrition-profile-fields input, .nutrition-profile-fields select { font: inherit; font-size: 0.85rem; color: var(--text-color); background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.35rem 0.5rem; width: 7rem; }
.nutrition-profile-fields select { width: auto; min-width: 9rem; }
.profile-height { display: flex; align-items: center; gap: 0.3rem; font-weight: 400; }
.profile-height input { width: 3.2rem; }
.nutrition-profile-hint { font-size: 0.78rem; color: var(--subtext-color); margin: 0.6rem 0; line-height: 1.5; }
.nutrition-profile-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.nutrition-profile-actions button { font-family: inherit; font-size: 0.85rem; font-weight: 600; background: var(--link-color); color: var(--bg-color); border: none; border-radius: 20px; padding: 0.45rem 1rem; cursor: pointer; }
.nutrition-profile-actions button.profile-reset { background: var(--badge-bg); color: var(--text-color); border: 1px solid var(--border-color); }
.nutrition-profile-status { font-size: 0.85rem; color: var(--text-color); margin: 0.7rem 0 0; line-height: 1.5; }
.nutrition-profile-formulas { margin-top: 0.7rem; font-size: 0.8rem; color: var(--subtext-color); line-height: 1.55; }
.nutrition-profile-formulas summary { cursor: pointer; color: var(--link-color); font-weight: 600; }
@media (max-width: 700px) {
    .recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .recipe-card-body { padding: 0.55rem 0.6rem 0.65rem; }
    .recipe-card-title { font-size: 0.82rem; }
    .recipe-card-meta { font-size: 0.7rem; }
}

/* --- Nutrition dots: dark-mode contrast + pairing suggestions (added 2026-11-12) --- */
/* Dark mode only: empty-dot outlines were nearly invisible (border was 8% white).
   Light mode is untouched. */
body:not(.light-mode) .nutri-dot { border-color: rgba(255, 255, 255, 0.5); }
.nutrition-pairs { margin: 0.7rem 0 0.2rem; }
.nutrition-pairs p { font-size: 0.88rem; line-height: 1.55; color: var(--text-color); margin: 0.35rem 0; }
.nutrition-pairs .pair-tag { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--subtext-color); }
.nutrition-pairs a.pair-link { color: var(--link-color); }

/* --- Message board hub: one board per Discussion category (added 2026-11-12) --- */
.board-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.2rem; }
.board-tab { padding: 0.45rem 1rem; border-radius: 20px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.board-tab.active { background: var(--link-color); border-color: var(--link-color); color: var(--bg-color); }
.board-panel h2 { margin: 0 0 0.3rem; }
.board-panel > p { color: var(--subtext-color); font-size: 0.9rem; margin: 0 0 1rem; }

/* Homepage: About Me + Career & Education as ONE section (merged 2026-11-12).
   A single heading; the career/education history is a compact timeline
   inside it, so Projects I Follow sits noticeably higher on the page.
   All facts are unchanged — only the presentation is tighter. */
.about-section > p {
    color: var(--text-color);
    line-height: 1.6;
    max-width: 70ch;
    margin-bottom: 14px;
}
.about-section .about-pillars {
    max-width: 70ch;
    margin-bottom: 8px;
}
.about-section .about-pillars li {
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.6;
}
.career-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--subtext-color);
    margin: 20px 0 8px 0;
}
.career-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
}
.career-timeline li {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}
.career-date {
    flex: 0 0 120px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--subtext-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.career-detail {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-color);
}
.career-detail > strong {
    color: var(--text-color);
    font-weight: 700;
}
.career-detail > strong a {
    color: var(--text-color);
    text-decoration: none;
}
.career-detail > strong a:hover {
    color: var(--link-color);
    text-decoration: underline;
}
.career-sub {
    display: block;
    color: var(--subtext-color);
    font-size: 0.9rem;
    line-height: 1.55;
}
.career-sub strong {
    font-weight: 600;
    color: inherit;
}
.section-featured {
    font-size: 1.45rem;
    letter-spacing: 0.04em;
    margin-top: 48px;
    padding-bottom: 14px;
    opacity: 1;
}
.projects-list {
    margin-top: 16px;
}
.projects-list li {
    font-size: 1.02rem;
    margin-bottom: 14px;
}

/* --- Projects I Follow: full-row tappable cards (added 2026-11-12) ---
   Each project row reuses the site's existing .resource-card treatment
   (same as the cards on health.html etc.): blue border + lift + blue glow
   on hover, so the list behaves exactly like the other pages. The rows
   only add a pressed state and a visible keyboard focus ring. */
.projects-list {
    list-style: none;
    padding: 0;
}
.project-row {
    padding: 1.1rem 1.25rem;
}
.project-row h3 {
    margin: 0 0 0.25rem 0;
}
.project-row:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--glow-color);
    border-color: var(--link-color);
}
.project-row:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* --- Homepage logo intro: full-viewport JBO logo that scroll-scrubs into
   the header logo (index.html only, added 2026-11-12). The intro is a fixed
   overlay; scrolling drives the logo from centered-large to the 32px header
   spot, and scrolling back up reverses it. transform/opacity only, wired by
   initLogoIntro() in script.js. Hidden unless JS adds .logo-intro-on to
   <html>, so no-JS and reduced-motion visitors just see the normal header.
   Note: .logo-intro-on also disables the body's keynoteFadeIn animation —
   its translateY(0) fill would create a containing block and break the
   intro's fixed positioning. */
.logo-intro { position: fixed; inset: 0; z-index: 2000; pointer-events: auto; visibility: hidden; }
html.logo-intro-on .logo-intro { visibility: visible; }
html.logo-intro-on body { animation: none; }
.logo-intro-bg { position: absolute; inset: 0; background: #0f3227; }
.logo-intro-logo { position: absolute; left: 50%; top: 50%; width: min(78vmin, 640px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); will-change: transform; }
/* While the intro is active, the real header logo is hidden (the intro logo
   lands exactly on its spot) and the nav sticks to the top so the landing
   spot stays put while scrolling. */
html.logo-intro-on .site-brand-logo { visibility: hidden; }
html.logo-intro-on .site-nav { position: sticky; top: 0; padding-top: 8px; z-index: 1001; background: var(--bg-color); }
/* While the intro runs, the page is pinned at scrollY 0: scroll input
   drives the morph only (see initLogoIntro in script.js). Scrolling is
   blocked by intercepting the input (wheel / touch / keys) plus a
   scrollTo(0, 0) safety net — deliberately NOT overflow: hidden, so the
   scrollbar stays put, nothing shifts, and the fixed overlay still spans
   the full viewport. touch-action / overscroll-behavior stop the browser
   from starting a native scroll or pull-to-refresh underneath. */
html.logo-intro-locked,
html.logo-intro-locked body { touch-action: none; overscroll-behavior: none; }
/* One-shot: once the logo has landed, the intro is gone for the session —
   the overlay hides and the real header logo shows. .logo-intro-on stays
   on <html> so the nav keeps its sticky position and the body's
   keynoteFadeIn stays off. */
html.logo-intro-done .logo-intro { visibility: hidden; }
html.logo-intro-done .site-brand-logo { visibility: visible; }

/* --- Bitcoin cursor (bitcoin.html + Bitcoin areas on index.html, added 2026-11-12).
   Classic orange disc + white ₿ with a pointer tip (hotspot 2,2 = the tip).
   Scoped: the whole bitcoin.html page via body.bitcoin-page, and only the
   .btc-cursor areas on the homepage (Bitcoin project card, TradingView chart
   wrapper, Support/Donate card, "Fix the Money" quote). Links and buttons
   keep the hand pointer: the UA stylesheet gives links cursor:pointer and
   the site's buttons set it explicitly, and both beat inheritance from
   these container rules. Note: the TradingView chart is a cross-origin
   iframe, so the ₿ shows on the chart wrapper/frame but reverts to the
   default arrow over the chart itself — that cannot be styled from outside. */
body.bitcoin-page { cursor: url("bitcoin-cursor.svg") 2 2, auto; }
.btc-cursor { cursor: url("bitcoin-cursor.svg") 2 2, auto; }

/* --- Mobile: About Me + Career & Education (index.html) ---
   These rules live at the END of this file on purpose. The earlier
   @media (max-width: 768px) block sits BEFORE the base .career-* rules,
   so its `flex: none` and `gap: 2px` were overridden by the base
   `flex: 0 0 120px` / `gap: 20px`. In the stacked column layout that
   stretched every date to 120px tall and left a ~100px void between
   the date and its entry in every row (timeline 1070px tall on a 390px
   phone vs 325px on desktop). Placed here, the mobile rules win. */
@media (max-width: 768px) {
    body.home header {
        margin-bottom: 28px;
    }
    .about-section h2 {
        margin-top: 32px;
    }
    .career-label {
        margin: 16px 0 4px;
    }
    .career-timeline li {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 12px 0;
    }
    .career-date {
        flex: none;
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* --- Portfolio backtest (finance.html only) --- */
.backtest-chart-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

#backtestChart {
    width: 100%;
    height: 320px;
    display: block;
}

.backtest-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-color);
    margin-top: 0.75rem;
}

.backtest-legend .legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.backtest-readout {
    font-size: 0.85rem;
    color: var(--subtext-color);
    min-height: 1.25em;
    margin-top: 0.5rem;
}

.backtest-holdings input[type="number"] {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.85rem;
}

.backtest-holdings input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
}

@media (max-width: 768px) {
    #backtestChart {
        height: 240px;
    }
}

/* --- Back to top (all pages): one quiet floating button, bottom-right.
   Hidden at the top of the page, where it would be useless; each page's
   snippet adds .show once the reader has scrolled (~600px). The chrome
   matches the header controls: translucent card background + blur and a
   hairline border. z-index 900 sits above page content but below the
   sticky header (1000) and its dropdown (1100). On pages with a bottom
   bar (recipes), the snippet adds .lifted so the button rests above the
   bar instead of covering it. */
.back-to-top {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: var(--text-color);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top.lifted {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.back-to-top:hover {
    border-color: var(--link-color);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

.back-to-top svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
        transform: none;
    }

    .back-to-top.show {
        transform: none;
    }
}