/* ===========================================================================
   PeptideLine.io
   =========================================================================== */

:root {
    --navy: #0d1f3c;
    --navy-deep: #081528;
    --brand: #1b3a6b;
    --red: #e8403c;
    --ink: #121826;
    --body: #4d5668;
    --muted: #6b7489;   /* 4.68:1 on white — the old #8a93a5 was 3.09 and failed AA */
    --line: #e6e9f0;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --radius: 16px;
    --shadow: 0 10px 40px rgba(13, 31, 60, 0.08);
}


/* A display rule on an element silently defeats the hidden attribute, because
   [hidden] is only a UA default of display:none. Both panels set display:flex,
   so both rendered on every page load with hidden still set. This outranks any
   component rule and must stay above them. */
[hidden] {
    display: none !important;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .num {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* --------------------------------------------------------------- header -- */

#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 21, 40, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 0.85rem 2rem;
}

.logo img {
    height: 42px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.93rem;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.nav-links a:hover {
    color: #fff;
    border-bottom-color: var(--red);
}

/* ----------------------------------------------------------------- hero -- */

.hero {
    position: relative;
    background:
        radial-gradient(900px 600px at 15% 0%, #1b3a6b 0%, rgba(27, 58, 107, 0) 60%),
        radial-gradient(800px 500px at 85% 20%, #2a1e52 0%, rgba(42, 30, 82, 0) 65%),
        linear-gradient(170deg, #0d1f3c 0%, #081528 100%);
    color: #fff;
    text-align: center;
    padding: 5.5rem 2rem 6.5rem;
    overflow: hidden;
    isolation: isolate;
}

#molecules {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.55;
}

.hero-glow {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(232, 64, 60, 0.16) 0%, rgba(232, 64, 60, 0) 62%);
    z-index: -1;
    pointer-events: none;
}

.hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(8, 21, 40, 0) 0%, #ffffff 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}

.hero-logo {
    display: block;
    /* max-width caps the clamp's 290px floor, which otherwise overflows
       viewports narrower than that and scrolls the page sideways. */
    width: clamp(290px, 66vw, 780px);
    max-width: 100%;
    height: auto;
    margin: 0 auto 2.5rem;
    filter: drop-shadow(0 8px 40px rgba(120, 170, 255, 0.35));
    animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tagline {
    font-size: clamp(1.6rem, 3.6vw, 2.9rem);
    font-weight: 700;
    margin-bottom: 1.3rem;
    animation: rise 0.9s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.grad {
    background: linear-gradient(100deg, #ff6b57 0%, #ffb86b 45%, #6fd3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
    margin: 0 auto 2.4rem;
    animation: rise 0.9s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: rise 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.95rem 2rem;
    border-radius: 999px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-primary {
    background: linear-gradient(135deg, #e8403c 0%, #ff7a4d 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(232, 64, 60, 0.35);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(232, 64, 60, 0.45);
}

.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem 3.5rem;
    margin-top: 4rem;
    animation: rise 0.9s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.num {
    font-size: 2.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #9fc2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lbl {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}

@keyframes rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- sections -- */

.content-section {
    max-width: 1200px;
    margin: 5.5rem auto;
    padding: 0 2rem;
}

.section-head {
    margin-bottom: 2.5rem;
}

.eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
    margin-bottom: 0.7rem;
}

.content-section h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    color: var(--ink);
}

.lede {
    color: var(--body);
    max-width: 68ch;
    margin-top: 0.9rem;
    font-size: 1.05rem;
}

.count {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
    vertical-align: middle;
    margin-left: 0.6rem;
    letter-spacing: 0;
}

/* --------------------------------------------------------- theme tiles -- */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 1rem;
}

.theme {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.3rem 1.2rem;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.theme::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c) 0%, transparent 70%);
    opacity: 0.08;
    transition: opacity 0.25s;
}

.theme:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(13, 31, 60, 0.14);
}

.theme:hover::before {
    opacity: 0.18;
}

.theme .dot {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--c);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 45%, transparent);
}

.theme h3 {
    position: relative;
    font-size: 1.02rem;
    margin-bottom: 0.15rem;
}

.theme span.n {
    position: relative;
    font-size: 0.85rem;
    color: var(--muted);
}

/* -------------------------------------------------------------- search -- */

.library-bar {
    margin: 4rem auto 2rem;
}

.searchwrap {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.search-icon {
    position: absolute;
    left: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

#search {
    width: 100%;
    padding: 1.1rem 1.4rem 1.1rem 3.3rem;
    font: inherit;
    font-size: 1.02rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 2px solid transparent;
    border-radius: 999px;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

#search::placeholder {
    color: var(--muted);
}

#search:focus {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 5px rgba(27, 58, 107, 0.1);
}

/* ------------------------------------------------------------- filters -- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.chip {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--body);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.chip:hover {
    border-color: var(--c, var(--brand));
    color: var(--c, var(--brand));
    transform: translateY(-1px);
}

.chip.active {
    background: var(--c, var(--brand));
    border-color: var(--c, var(--brand));
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--c, var(--brand)) 40%, transparent);
}

/* ----------------------------------------------------------- compounds -- */

.compound-list {
    display: grid;
    gap: 0.8rem;
}

.compound {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}

.compound::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--c, var(--brand));
    opacity: 0.85;
}

.compound:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(13, 31, 60, 0.1);
    border-color: transparent;
}

.compound.open {
    box-shadow: 0 16px 44px rgba(13, 31, 60, 0.13);
    border-color: transparent;
}

.compound-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.6rem 1.15rem 1.9rem;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.compound-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.compound-head h3 {
    font-size: 1.16rem;
    color: var(--ink);
}



.pill.approved { background: #10b981; }
.pill.trials   { background: #f59e0b; }
.pill.research { background: #94a3b8; }

.chev {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.28s;
}

.compound.open .chev {
    transform: rotate(-135deg) translate(-2px, -2px);
    border-color: var(--c, var(--brand));
}

.compound-body {
    display: none;
    padding: 0 1.9rem 1.75rem;
    max-width: 78ch;
}

.compound.open .compound-body {
    display: block;
    animation: fade 0.35s ease both;
}

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


.aka {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
}

.summary {
    color: var(--body);
    font-size: 1.02rem;
}

.reported {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reported li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--body);
}

.reported li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c, var(--brand));
}




.facts {
    margin-top: 1.6rem;
    border-top: 1px solid var(--line);
    padding-top: 1.1rem;
    font-size: 0.9rem;
}

.facts > div {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 1rem;
    padding: 0.4rem 0;
}

.facts dt {
    color: var(--muted);
}

.facts dd {
    color: #46506a;
    word-break: break-word;
}

.facts dd.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
}

.pubchem {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}

.pubchem:hover {
    color: var(--red);
}

.empty {
    color: var(--muted);
    padding: 2.5rem 0;
    text-align: center;
}

/* ---------------------------------------------------------- field guide -- */

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.2rem;
}

.guide-card {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    transition: transform 0.25s, box-shadow 0.25s;
}

.guide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(13, 31, 60, 0.1);
}

.guide-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--c);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.guide-card h3 {
    font-size: 1.08rem;
    margin-bottom: 0.5rem;
}

.guide-card p {
    color: var(--body);
    font-size: 0.95rem;
}


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

footer {
    background: var(--navy-deep);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 5rem;
}

.footer-logo {
    height: 38px;
    width: auto;
    margin: 0 auto 1.1rem;
    display: block;
    opacity: 0.9;
}

/* --------------------------------------------------------------- reveal -- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
    nav {
        flex-direction: column;
        gap: 0.7rem;
        padding: 0.8rem 1.1rem;
    }

    .logo img {
        height: 34px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 1.1rem;
    }

    .nav-links a {
        font-size: 0.84rem;
    }

    .hero {
        padding: 3.5rem 1.25rem 5rem;
    }

    .content-section {
        margin: 4rem auto;
        padding: 0 1.25rem;
    }

    .stats {
        gap: 1.75rem 2.5rem;
        margin-top: 3rem;
    }

    .num {
        font-size: 2rem;
    }

    .facts > div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
        padding: 0.55rem 0;
    }

    .compound-head {
        padding: 1rem 1.2rem 1rem 1.5rem;
    }

    .compound-body {
        padding: 0 1.5rem 1.4rem;
    }

    .btn {
        padding: 0.85rem 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

.pill.supply { background: #64748b; }

/* why people take it */
.uses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.use {
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: var(--c, var(--brand));
    background: color-mix(in srgb, var(--c, var(--brand)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--brand)) 22%, transparent);
}


.mech {
    color: var(--body);
    font-size: 0.97rem;
}

/* evidence tiers */
.ev-grid {
    display: grid;
    gap: 1.1rem;
}

.ev {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.7rem;
    border-left: 5px solid var(--c);
    background: var(--surface);
}

.ev-a { --c: #10b981; }
.ev-b { --c: #3b82f6; }
.ev-c { --c: #f59e0b; }
.ev-d { --c: #94a3b8; }

.ev header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.ev-rank {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c);
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
}

.ev h3 {
    font-size: 1.12rem;
}

.ev ul {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    color: var(--body);
}

.ev li {
    margin-bottom: 0.4rem;
}


.ev-safety {
    margin-top: 1.6rem;
    padding: 1.3rem 1.5rem;
    background: #fff8ec;
    border: 1px solid #f6e3bd;
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: #7a5a17;
}

.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.2rem;
    margin-top: 1.6rem;
}

.class-card {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 1.6rem;
    border-top: 4px solid var(--brand);
}

.class-card:last-child {
    border-top-color: var(--red);
}

.class-card h3 {
    font-size: 1.08rem;
    margin-bottom: 0.6rem;
}

.class-card p {
    color: var(--body);
    font-size: 0.96rem;
}

/* ---- in practice: real-world use, deliberately NOT styled like evidence ---- */








.guide-card h3 
.guide-sub {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    font-size: 0.88rem !important;
    color: var(--muted) !important;
}

/* study metadata beside each evidence tier */
.ev-meta {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    border-left: 2px solid var(--line);
    padding-left: 1rem;
}

.ev-meta > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.75rem;
    padding: 0.22rem 0;
}

.ev-meta dt {
    color: var(--muted);
}

.ev-meta dd {
    color: #46506a;
}

@media (max-width: 860px) {
    .ev-meta > div {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.35rem 0;
    }
}

/* visually hidden, still announced */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* combined search/filter result line */
.result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 1rem auto 0;
    padding: 0.8rem 1.1rem;
    background: var(--surface-2);
    border-radius: 999px;
    font-size: 0.92rem;
    color: var(--body);
}

.rb-split {
    color: var(--muted);
}

.rb-none {
    color: #7a5a17;
}

.result-bar:has(.rb-none) {
    background: #fff8ec;
    border: 1px solid #f6e3bd;
}

.clear-search {
    flex: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--brand);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-search:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* evidence strength on collapsed cards */

.evidence-tag.human { color: #0f766e; }
.evidence-tag.animal { color: #a16207; }
.evidence-tag.thin  { color: #9f1239; }

/* ---- keyboard focus -------------------------------------------------------
   Only #search had a focus style; everything else fell back to the browser
   default, which is inconsistent and nearly invisible on the dark header. */
:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
    border-radius: 6px;
}

.compound-head:focus-visible,
.theme:focus-visible {
    outline-offset: -3px;
}

#site-header a:focus-visible,
.hero a:focus-visible {
    outline-color: #ffb86b;
}

/* skip link */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    background: #fff;
    color: var(--brand);
    font-weight: 600;
    padding: 0.7rem 1.3rem;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    transition: transform 0.2s;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* ---- individual compound pages (pre-rendered for search) ---------------- */
.entry {
    max-width: 820px;
    margin: 3rem auto 5rem;
    padding: 0 2rem;
}

.crumbs {
    font-size: 0.86rem;
    color: var(--muted);
    margin-bottom: 1.6rem;
}

.crumbs a {
    color: var(--brand);
    text-decoration: none;
}

.crumbs a:hover { text-decoration: underline; }

.crumbs span[aria-hidden] { margin: 0 0.35rem; }

.entry h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--ink);
    margin-bottom: 1rem;
    border-left: 5px solid var(--c, var(--brand));
    padding-left: 1rem;
}

.entry-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.entry h2 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 2.2rem 0 0.9rem;
}

.entry .summary {
    font-size: 1.12rem;
    color: var(--body);
    margin-bottom: 0.5rem;
}

.entry 
.entry .facts { margin-top: 1rem; }

.prevnext {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 3rem 0 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.pn {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    padding: 0.5rem 0;
}

.pn:hover { color: var(--red); }

.pn.next { margin-left: auto; text-align: right; }

.entry 
.full-entry:hover { color: var(--red); }

@media (max-width: 860px) {
    .entry { padding: 0 1.25rem; margin: 2rem auto 3rem; }
}

/* ---- chat widget ------------------------------------------------------- */
.chat-toggle {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 150;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #e8403c 0%, #ff7a4d 100%);
    border: 0;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(232, 64, 60, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(232, 64, 60, 0.45);
}

.chat-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 160;
    width: min(420px, calc(100vw - 2.5rem));
    max-height: min(620px, calc(100vh - 2.5rem));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(13, 31, 60, 0.28);
    overflow: hidden;
}

.chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--navy-deep);
    color: #fff;
}

.chat-sub {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 0.15rem;
}

.chat-close {
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.chat-close:hover { color: #fff; }

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.msg {
    max-width: 92%;
    padding: 0.7rem 0.95rem;
    border-radius: 14px;
    font-size: 0.94rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.msg.bot {
    background: var(--surface-2);
    color: var(--body);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.msg.user {
    background: var(--brand);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.msg.pending { opacity: 0.6; font-style: italic; }

.msg.error {
    background: #fff8ec;
    color: #7a5a17;
    border: 1px solid #f6e3bd;
}

.msg a { color: var(--brand); }

.chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1.2rem 0.5rem;
    border-top: 1px solid var(--line);
}

.chat-form input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 0.94rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    outline: none;
}

.chat-form input:focus { border-color: var(--brand); }

.chat-form button {
    flex: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: 0;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
}

.chat-form button:disabled { opacity: 0.55; cursor: default; }

.chat-note {
    padding: 0 1.2rem 0.9rem;
    font-size: 0.78rem;
    color: var(--muted);
    min-height: 1.1rem;
}

@media (max-width: 860px) {
    .chat-toggle { right: 0.8rem; bottom: 0.8rem; padding: 0.75rem 1.1rem; font-size: 0.86rem; }
    .chat-panel { right: 0.6rem; left: 0.6rem; bottom: 0.6rem; width: auto; }
}

.msg p { margin: 0 0 0.55rem; }
.msg p:last-child { margin-bottom: 0; }
.msg-list { margin: 0 0 0.55rem; padding-left: 1.15rem; }
.msg-list li { margin-bottom: 0.25rem; }
.msg { white-space: normal; }

/* ---- chat on phones ----------------------------------------------------
   Two real iOS bugs: Safari zooms the page when an input under 16px gets
   focus, and 100vh counts the browser chrome so a panel sized with it runs
   off the bottom of the screen. dvh tracks the visible viewport instead and
   shrinks when the keyboard opens. */
.chat-panel {
    max-height: min(620px, calc(100dvh - 2.5rem));
}

@media (max-width: 860px) {
    .chat-panel {
        right: 0;
        left: 0;
        bottom: 0;
        top: auto;
        width: auto;
        height: 88dvh;
        max-height: 88dvh;
        border-radius: 18px 18px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    /* 16px exactly — anything less and iOS zooms on focus. */
    .chat-form input {
        font-size: 16px;
        padding: 0.7rem 1rem;
    }

    .chat-form {
        padding: 0.8rem 1rem 0.5rem;
        /* clear the home indicator on gesture-nav phones */
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .chat-log {
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .msg {
        max-width: 100%;
        font-size: 0.97rem;
    }

    .chat-head {
        padding: 0.9rem 1rem;
        padding-top: max(0.9rem, env(safe-area-inset-top));
    }

    .chat-close {
        font-size: 1.8rem;
        padding: 0 0.3rem;
    }

    .chat-note {
        padding: 0 1rem 0.7rem;
    }

    .chat-toggle {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
}

/* ---- dosing ------------------------------------------------------------
   Two blocks that must never read as one. "Tested" is a number from a named
   study; "reported" is what people do. Different colour, different border,
   different label. */
.dosing {
    margin-top: 1.6rem;
}






.dose-tag.ev { background: #0f766e; }
.dose-tag.pr { background: #8b5cf6; }

.dose-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dose-list > li {
    padding: 0.6rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.dose-list > li:first-child { border-top: 0; padding-top: 0; }

.dose-list.plain > li {
    position: relative;
    padding-left: 1.3rem;
    border-top: 0;
    color: #4a4160;
    font-size: 0.95rem;
}

.dose-list.plain > li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 0.85em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid #8b5cf6;
}

.dose-amt {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.dose-dur,
.dose-ctx,
.dose-out {
    display: block;
    font-size: 0.89rem;
    margin-top: 0.18rem;
}

.dose-dur { color: #0f766e; font-weight: 600; }
.dose-ctx { color: var(--muted); }
.dose-out { color: var(--body); }




/* ---- compare ----------------------------------------------------------- */
.cmp-pick {
    position: absolute;
    top: 0.65rem;
    right: 3.2rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.18s, color 0.18s, background 0.18s;
}

.compound:hover .cmp-pick,
.cmp-pick:focus-within,
.cmp-pick:has(:checked) {
    opacity: 1;
}

.cmp-pick:hover { color: var(--brand); background: var(--surface-2); }
.cmp-pick:has(:checked) { color: var(--brand); background: #e9eff8; }
.cmp-box { accent-color: var(--brand); margin: 0; }

.cmp-tray {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 140;
    width: min(760px, calc(100vw - 2rem));
}

.cmp-tray-inner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
    background: var(--navy-deep);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 16px 44px rgba(13, 31, 60, 0.35);
}

.cmp-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.cmp-items { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: 1; min-width: 0; }

.cmp-chip {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
}

.cmp-chip:hover { background: rgba(232, 64, 60, 0.9); }

.cmp-go, .cmp-clear {
    flex: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
}

.cmp-go { background: linear-gradient(135deg, #e8403c 0%, #ff7a4d 100%); color: #fff; }
.cmp-go:disabled { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.5); cursor: default; }
.cmp-clear { background: none; color: rgba(255,255,255,0.6); padding: 0.45rem 0.6rem; }
.cmp-clear:hover { color: #fff; }

.cmp-msg {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--red);
    opacity: 0;
    transition: opacity 0.2s;
}

.cmp-msg.show { opacity: 1; }

.cmp-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(8, 21, 40, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem 1rem 0;
}

body.cmp-open { overflow: hidden; }

.cmp-sheet {
    width: min(1180px, 100%);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

.cmp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.cmp-head h2 { font-size: 1.15rem; }

.cmp-close {
    font: inherit;
    font-size: 1.7rem;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
}

.cmp-close:hover { color: var(--ink); }

.cmp-body { flex: 1; overflow: auto; }

.cmp-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.92rem;
}

.cmp-table th,
.cmp-table td {
    vertical-align: top;
    text-align: left;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--line);
}

/* label column stays put when the table scrolls sideways on a phone */
.cmp-rowhead {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 11rem;
    min-width: 9rem;
    background: var(--surface-2);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.cmp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 3px solid var(--c, var(--brand));
    font-size: 1.05rem;
}

.cmp-table thead .cmp-rowhead { z-index: 3; background: var(--surface-2); }
.cmp-table thead th a { color: var(--ink); text-decoration: none; }
.cmp-table thead th a:hover { color: var(--c, var(--brand)); }
.cmp-table td { min-width: 15rem; color: var(--body); }
.cmp-table .reported li { margin-bottom: 0.3rem; }
.cmp-table .uses { gap: 0.3rem; }
.cmp-table .use { font-size: 0.8rem; padding: 0.25rem 0.6rem; }

.cmp-doses { margin: 0; padding: 0; list-style: none; }
.cmp-doses > li { margin-bottom: 0.6rem; }
.cmp-doses.plain > li { padding-left: 1rem; position: relative; }
.cmp-doses.plain > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px; height: 5px;
    border-radius: 50%;
    border: 1.5px solid #8b5cf6;
}

.cmp-none { color: var(--muted); font-style: italic; }
.cmp-caveat { color: #7a5a17; }

.cmp-foot {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--muted);
}

@media (max-width: 860px) {
    .cmp-pick { opacity: 1; top: 0.5rem; right: 2.6rem; font-size: 0.64rem; }
    .cmp-tray { bottom: 4.6rem; width: calc(100vw - 1.2rem); }
    .cmp-tray-inner { border-radius: 16px; }
    .cmp-panel { padding: 1rem 0 0; }
    .cmp-sheet { max-height: 94dvh; border-radius: 16px 16px 0 0; }
    .cmp-rowhead { width: 7.5rem; min-width: 7.5rem; font-size: 0.68rem; padding: 0.8rem; }
    .cmp-table td { min-width: 13rem; padding: 0.8rem; }
}

/* =========================================================================
   DESIGN SYSTEM
   One callout pattern, one badge scale, one spacing rhythm.
   Written to replace six competing box styles that had accreted one feature
   at a time. The rule: colour carries meaning, never decoration. A callout
   gets a thin rule and a quiet label — not a filled box fighting its
   neighbours for attention.
   ========================================================================= */

:root {
    --sp-1: .35rem;  --sp-2: .7rem;   --sp-3: 1.1rem;
    --sp-4: 1.6rem;  --sp-5: 2.4rem;  --sp-6: 3.5rem;

    --ink-2: #3d4659;
    --line-2: #eef1f6;

    --c-evidence: #0f766e;
    --c-caution:  #b45309;
    --c-practice: #7c3aed;
    --c-neutral:  #64748b;
}

/* ---- section labels ---------------------------------------------------- */
.compound-body h4,
.entry h2 {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: var(--sp-4) 0 var(--sp-2);
}

.compound-body > *:first-child,
.entry h2:first-of-type { margin-top: 0; }

/* ---- one callout ------------------------------------------------------- */
.note,
.caveat,
.status,
.gap,
.dose-note,
.dose-none,
.disclaimer,
.ev-note {
    position: relative;
    margin: var(--sp-3) 0 0;
    padding: 0 0 0 var(--sp-3);
    border-left: 2px solid var(--line);
    font-size: .94rem;
    line-height: 1.6;
    color: var(--ink-2);
    background: none;
    border-radius: 0;
}

.caveat    { border-left-color: var(--c-caution);  color: var(--ink-2); }
.status    { border-left-color: var(--c-neutral); }
.gap       { border-left-color: var(--c-practice); }
.dose-note { border-left-color: var(--c-caution); }
.dose-none { border-left-color: var(--line); color: var(--muted); font-style: italic; }

.caveat strong, .status strong, .gap strong, .dose-note strong { color: var(--ink); }

.disclaimer {
    margin-top: var(--sp-5);
    border-left-color: var(--c-caution);
    font-size: .88rem;
    color: var(--muted);
}

.disclaimer strong { color: var(--ink-2); }

/* ---- practice: set apart by restraint, not decoration ------------------ */
.practice {
    margin-top: var(--sp-4);
    padding: 0 0 0 var(--sp-3);
    border-left: 2px solid var(--c-practice);
    background: none;
    border-radius: 0;
}

.practice-h {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin: 0 0 var(--sp-2) !important;
    color: var(--c-practice) !important;
}

.practice-list { margin: 0; padding: 0; list-style: none; }

.practice-list li {
    position: relative;
    padding-left: var(--sp-3);
    margin-bottom: var(--sp-1);
    color: var(--ink-2);
    font-size: .94rem;
}

.practice-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .72em;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-practice);
}

.practice-note {
    margin-top: var(--sp-2);
    font-size: .8rem;
    color: var(--muted);
}

/* ---- dosing: two columns of the same system ---------------------------- */
.dose-block {
    margin-bottom: var(--sp-3);
    padding: 0 0 0 var(--sp-3);
    border-left: 2px solid var(--line);
    background: none;
    border-radius: 0;
}

.dose-block.tested { border-left-color: var(--c-evidence); }
.dose-block.used   { border-left-color: var(--c-practice); }

.dose-block h3,
.dose-block h5 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 var(--sp-2) !important;
}

.dose-block.tested h3, .dose-block.tested h5 { color: var(--c-evidence) !important; }
.dose-block.used   h3, .dose-block.used   h5 { color: var(--c-practice) !important; }
.dose-list > li { border-top-color: var(--line-2); }
.dose-warn { margin-top: var(--sp-2); font-size: .8rem; color: var(--muted); font-style: normal; }

/* ---- one badge scale --------------------------------------------------- */
.tag,
.pill,
.evidence-tag,
.fam,
.offlabel,
.dose-tag {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .22rem .6rem;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* category: identity, so it carries its colour — quietly */
.tag {
    color: var(--c, var(--brand));
    background: color-mix(in srgb, var(--c, var(--brand)) 9%, transparent);
}

/* approval + evidence: outlined, so they read as metadata not decoration.
   background is reset on each modifier because the older filled rules
   (.pill.approved etc) outrank a bare .pill selector. */
.pill, .evidence-tag {
    background: none;
    border-color: currentColor;
}

.pill.approved { color: #0f766e;        background: none; }
.pill.trials   { color: #b45309;        background: none; }
.pill.research { color: var(--c-neutral); background: none; }
.pill.supply   { color: var(--c-neutral); background: none; }

.evidence-tag.human  { color: #0f766e; }
.evidence-tag.animal { color: #b45309; }
.evidence-tag.thin   { color: #9f1239; }

/* family + off-label: the quietest things on the card */
.fam {
    color: var(--muted);
    background: var(--surface-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.offlabel { color: var(--c-practice); background: color-mix(in srgb, var(--c-practice) 10%, transparent); }
.dose-tag { color: #fff; }
.dose-tag.ev { background: var(--c-evidence); }
.dose-tag.pr { background: var(--c-practice); }

/* ---- card: calmer ------------------------------------------------------ */
.compound {
    border-color: var(--line-2);
    border-radius: 10px;
}

.compound::before { width: 3px; opacity: 1; }

.compound-title { gap: var(--sp-2); }

.compound-head h3 { font-size: 1.1rem; letter-spacing: -.01em; }

.compound-body { padding-bottom: var(--sp-4); }

.compound-body .summary { font-size: 1.01rem; color: var(--ink-2); }

.reported li, .mech { color: var(--ink-2); }

.facts { border-top-color: var(--line-2); }

/* ---- entry page rhythm ------------------------------------------------- */
.entry h1 { border-left-width: 4px; }
.entry .summary { color: var(--ink-2); }
.entry-badges { gap: var(--sp-1) var(--sp-2); }

/* the practice heading is also a section label, so it keeps section rhythm */
.entry .practice-h,
.compound-body .practice-h { margin-top: var(--sp-4) !important; }
.entry .practice,
.compound-body .practice { margin-top: var(--sp-1); }
.entry .dosing h2 { margin-bottom: var(--sp-2); }

/* =========================================================================
   Evidence at a glance + diagrams
   ========================================================================= */

.glance {
    margin: var(--sp-4) 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-left: 4px solid var(--c-neutral);
    border-radius: 10px;
    background: var(--surface-2);
}

.glance.ev-human  { border-left-color: var(--c-evidence); }
.glance.ev-animal { border-left-color: var(--c-caution); }
.glance.ev-thin   { border-left-color: #9f1239; }

.glance h2 {
    margin: 0 0 var(--sp-2) !important;
    color: var(--ink) !important;
    font-size: .74rem !important;
}

.glance dl { margin: 0; }

.glance dl > div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--sp-2);
    padding: .28rem 0;
    font-size: .95rem;
}

.glance dt { color: var(--muted); font-weight: 600; }
.glance dd { color: var(--ink); margin: 0; }

.glance-caveat {
    margin: var(--sp-2) 0 0;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
    font-size: .92rem;
    color: var(--ink-2);
}

/* ---- diagrams ---------------------------------------------------------- */
.diagram { margin: 0; }

.diagram svg { display: block; width: 100%; height: auto; }

.diagram figcaption {
    margin-top: var(--sp-2);
    font-size: .84rem;
    color: var(--ink-2);
    text-align: center;
}

.dg-key {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--c);
    margin-right: .45rem;
    vertical-align: baseline;
}

.where {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-4);
    align-items: start;
}

.diagram-body svg { max-height: 330px; }

.where-note { font-size: .93rem; color: var(--ink-2); }

.mech-wrap {
    display: grid;
    grid-template-columns: 1fr 215px;
    gap: var(--sp-4);
    align-items: start;
}

.mech-wrap .mech { margin: 0; }

.diagram-cell figcaption { text-align: left; font-size: .82rem; }

.uses-note {
    margin-top: var(--sp-2);
    font-size: .82rem;
    color: var(--muted);
}

@media (max-width: 760px) {
    .where, .mech-wrap { grid-template-columns: 1fr; gap: var(--sp-3); }
    .diagram-body svg { max-height: 260px; }
    .diagram-cell { max-width: 280px; margin: 0 auto; }
    .glance dl > div { grid-template-columns: 1fr; gap: 0; padding: .35rem 0; }
    .glance dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
}


/* category icon: the body map, miniaturised — meaningful rather than an arbitrary glyph */
.theme .dot {
    width: 42px;
    height: 42px;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 15%, #fff);
    color: var(--c);
    box-shadow: none;
}

.theme .dot svg { width: 100%; height: 100%; display: block; }

/* breadcrumb: one compact left-aligned line; a back link on phones */
.crumbs { text-align: left; }
.crumb-back { display: none; font-weight: 600; }

@media (max-width: 760px) {
    .crumb-full { display: none; }
    .crumb-back { display: inline-block; }
}

/* ---- compound imagery -------------------------------------------------- */
.gallery {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.gallery figure { margin: 0; }

.gallery img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.gallery-1 img {
    height: auto;
    max-height: 460px;
    object-fit: contain;
}

.papers {
    margin-top: var(--sp-3);
    font-size: .9rem;
}

.papers a { color: var(--brand); font-weight: 600; text-decoration: none; }
.papers a:hover { color: var(--red); }
.papers span { display: block; margin-top: .25rem; color: var(--muted); font-size: .82rem; }

/* =========================================================================
   MOBILE PASS
   Measured before changing anything: the header took 16% of a 375px screen
   on every page, the hero logo was 290px wide on it, the filter chips were a
   320px wall before the first result, and the chat pill was 204px wide over
   the content. Each number below is answering one of those.
   ========================================================================= */

.nav-toggle {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
}

.nav-bars,
.nav-bars::before,
.nav-bars::after {
    position: absolute;
    left: 11px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .22s, opacity .22s;
}

.nav-bars { top: 20px; }
.nav-bars::before { content: ''; top: -6px; }
.nav-bars::after  { content: ''; top: 6px; }

[aria-expanded="true"] .nav-bars { background: transparent; }
[aria-expanded="true"] .nav-bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* measure: long lines are hard to track back to the next line start */
.entry .summary,
.entry > p,
.compound-body .summary,
.mech,
.lede { max-width: 68ch; }

@media (max-width: 860px) {
    /* one row, not two stacked: 131px -> ~60px */
    nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: .55rem 1rem;
        gap: .75rem;
    }

    .logo img { height: 30px; }
    .nav-toggle { display: block; }

    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .35rem 0 .6rem;
        background: var(--navy-deep);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 18px 40px rgba(8, 21, 40, .4);
        display: none;
    }

    body.nav-open .nav-links { display: flex; }

    .nav-links a {
        display: block;
        padding: .7rem 1.15rem;
        font-size: .95rem;
        border-bottom: 0;
    }

    .nav-links a:hover { background: rgba(255, 255, 255, .07); }

    /* the headline should lead, not a 290px logo */
    .hero-logo { width: min(190px, 52vw); margin-bottom: 1.5rem; }
    .hero { padding-top: 2.5rem; }

    /* search is the primary action — give it room directly under the hero */
    .library-bar { margin: 2rem auto 1rem; }

    /* a 320px wall of chips before any result; collapse it */
    .filters {
        max-height: 2.65rem;
        overflow: hidden;
        position: relative;
    }

    .filters.open { max-height: none; }

    .filter-more {
        display: block;
        width: 100%;
        margin: -0.6rem 0 1.4rem;
        padding: .5rem;
        font: inherit;
        font-size: .83rem;
        font-weight: 600;
        color: var(--brand);
        background: none;
        border: 0;
        border-top: 1px solid var(--line);
        cursor: pointer;
    }

    /* The compare control sat on top of the badges. Taking it out of absolute
       positioning and letting it wrap into the badge row fixes the overlap
       without adding a row to all 107 cards — which cost ~7 screens of scroll
       when tried the other way. */
    /* .cmp-pick is a sibling of .compound-head, not inside it, so taking it
       out of absolute flow pushed it above the compound name. It stays
       absolute; the header reserves room so wrapped badges never run under
       it. Label hidden — the checkbox alone is enough at this width. */
    .compound-head { padding: .85rem 4.2rem .85rem 1.4rem; }
    .compound-title { align-items: center; gap: .4rem; }

    .cmp-pick {
        position: absolute;
        top: .75rem;
        right: 2.5rem;
        opacity: 1;
        padding: 0;
        background: none;
    }

    .cmp-pick span[aria-hidden],
    .cmp-pick > span:not(.sr-only) { display: none; }

    /* 204px pill over the content -> a 52px circle */
    .chat-toggle {
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        display: grid;
        place-items: center;
    }

    .chat-toggle span[aria-hidden] { font-size: 1.25rem; }
    .cmp-tray { bottom: 5.4rem; }
}

@media (min-width: 861px) { .filter-more { display: none; } }

/* =========================================================================
   STATIC COMPARISON PAGES  (/comparisons.html, /compare/*.html)

   Namespaced cx- deliberately. The client-side compare overlay owns the
   unscoped .cmp-* rules above and its .cmp-head is a flex header bar, so
   reusing those names here breaks both. Same visual language, separate
   namespace.
   ========================================================================= */

.cx-page h1,
.cx-index h1 { margin-bottom: var(--sp-2); }

.cx-vs {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.72em;
    padding: 0 0.15em;
}

.cx-headline {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 var(--sp-3);
    line-height: 1.35;
}

/* --- the two compound cards at the top --- */

.cx-heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.cx-head {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-top: 3px solid var(--c, var(--brand));
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.cx-head:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 31, 60, 0.08);
    border-color: var(--c, var(--brand));
}

.cx-head-name {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.cx-head-cat { font-size: 0.82rem; color: var(--muted); }

.cx-head-go {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c, var(--brand));
}

/* --- the comparison table --- */

.cx-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-4) 0 var(--sp-3);
    font-size: 0.93rem;
}

.cx-table th,
.cx-table td {
    vertical-align: top;
    text-align: left;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.cx-table thead th {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.02rem;
    color: var(--ink);
    border-bottom: 3px solid var(--c, var(--brand));
    width: 38%;
}

.cx-table thead td { border-bottom: 1px solid var(--line); width: 24%; }

/* row label */
.cx-table tbody th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2);
    width: 24%;
}

.cx-table td { color: var(--body); }
.cx-table p { margin: 0 0 0.5rem; }
.cx-table p:last-child { margin-bottom: 0; }

/* Evidence and the caveat are the rows that matter most, so they are the
   rows that look like it. */
.cx-key td { background: #f7fbfa; }
.cx-key th { background: #eef6f5; color: var(--c-evidence); }

.cx-caveat { color: #7a5a17; }

/* Reported practice must never read as evidence — same purple treatment as
   the practice box on the entry pages. */
.cx-prac td { background: #faf8ff; }
.cx-prac th { background: #f3eeff; color: var(--c-practice); }

.cx-list { margin: 0; padding-left: 1.1rem; }
.cx-list li { margin-bottom: 0.35rem; }
.cx-list li:last-child { margin-bottom: 0; }

.cx-practice { list-style: none; padding-left: 1rem; }
.cx-practice li { position: relative; }
.cx-practice li::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    border: 1.5px solid var(--c-practice);
}

.cx-sub {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-evidence);
}

.cx-sub-practice { color: var(--c-practice); margin-top: 0.7rem; }

.cx-none { color: var(--muted); font-style: italic; }

.cx-table .use { font-size: 0.8rem; padding: 0.25rem 0.6rem; }

.cx-foot {
    font-size: 0.84rem;
    color: var(--muted);
    margin-bottom: var(--sp-5);
}

/* --- outbound links --- */

.cx-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
}

.cx-link {
    display: inline-block;
    padding: 0.6rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.cx-link:hover { border-color: var(--brand); background: var(--surface-2); }
.cx-link.alt { color: var(--muted); }
.cx-link.alt:hover { color: var(--brand); }

.cx-others { margin: var(--sp-2) 0 var(--sp-5); padding-left: 1.1rem; }
.cx-others li { margin-bottom: 0.4rem; }
.cx-others a { color: var(--brand); }

/* --- the hub page --- */

.cx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-5);
}

.cx-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.cx-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 31, 60, 0.08);
}

.cx-card-pair {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.cx-card-pair em {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
    font-size: 0.85em;
}

.cx-card-head { font-size: 0.86rem; color: var(--muted); line-height: 1.4; }

/* --- phone: the table becomes stacked, labelled blocks --------------------
   A two-column table of prose does not survive 375px. Each row turns into
   its own block with the compound name above each value, so the pairing
   stays obvious without any sideways scrolling. */

@media (max-width: 760px) {
    .cx-heads { grid-template-columns: 1fr; gap: var(--sp-2); }
    .cx-headline { font-size: 1.02rem; }

    .cx-table { display: block; font-size: 0.9rem; margin-top: var(--sp-3); }
    .cx-table thead { display: none; }
    .cx-table tbody, .cx-table tr { display: block; }

    .cx-table tr {
        margin-bottom: var(--sp-3);
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
    }

    .cx-table tbody th {
        display: block;
        width: auto;
        border-bottom: 1px solid var(--line);
        padding: 0.6rem var(--sp-3);
    }

    .cx-table td {
        display: block;
        width: auto;
        border-bottom: 1px solid var(--line);
        padding: var(--sp-3);
    }

    .cx-table tr td:last-child { border-bottom: 0; }

    /* the compound name, so a value is never orphaned from its column */
    .cx-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.4rem;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cx-head, .cx-card { transition: none; }
    .cx-head:hover, .cx-card:hover { transform: none; }
}

.cx-head-aka {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

/* Comparison pages: the compound illustrations, which the first cut of these
   pages left out entirely. */

.cx-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.55rem;
    background: var(--surface-2);
}

.cx-card-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
}

.cx-card-thumbs .cx-thumb { margin-bottom: 0; aspect-ratio: 4 / 3; }

/* Library card thumbnails. The 114 illustrations only appeared on the entry
   pages, so the main grid — the page most people actually see — was 114 rows
   of text. */

.card-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--surface-2);
}

/* The head padding assumes the title starts at the left edge; with a
   thumbnail the gap does that job instead. */
.compound-head:has(.card-thumb) { padding-left: 1.2rem; }

@media (max-width: 760px) {
    .card-thumb { width: 52px; height: 52px; border-radius: 8px; }
    .compound-head:has(.card-thumb) { padding-left: 0.9rem; gap: 0.75rem; }
}

/* Collapsed cards used to show only a name and badges, so the library could
   not be scanned without opening every card. The summary now sits in the
   head, clamped, and gives way to the body's full copy once the card opens. */

.compound-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;        /* lets the clamp actually clamp inside a flex row */
}

.compound-titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.card-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--body);
    font-weight: 400;
}

/* The body repeats it in full, so drop the clamped copy when open. */
.compound.open .card-summary { display: none; }

@media (max-width: 760px) {
    .card-summary { font-size: 0.86rem; -webkit-line-clamp: 3; line-clamp: 3; }
    .compound-title { gap: 0.35rem; }
}

/* The horizontal nav runs from 861px up, and adding "Compare" made nine
   items. At 2rem gaps that overflowed the viewport by ~10px at 1024px, so
   the page scrolled sideways on small laptops and landscape tablets.
   Tighten the gaps in the band between the hamburger and a roomy desktop. */

@media (min-width: 861px) and (max-width: 1180px) {
    .nav-links { gap: 1.15rem; }
    .nav-links a { font-size: 0.875rem; }
}

/* Real anatomical images for "Where it acts", when supplied. Falls back to
   the generated SVG silhouette per region — see docs/body-map-brief.md. */

.body-img {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-2);
}

/* "Where it acts" on the photographic figure. Replaces the SVG silhouette,
   which was a grey blob with a dot on it. Marker positions are percentages
   set inline from diagrams.FIGURE_POINTS. */

.bodyfig {
    position: relative;
    display: block;
    width: 100%;
    max-width: 230px;
    margin-inline: auto;
}

.bodyfig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.bf-pins { position: absolute; inset: 0; }

.bf-pin {
    position: absolute;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;    /* centre on the coordinate */
    border-radius: 50%;
    background: var(--c, var(--brand));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--brand)) 28%, transparent),
                0 0 0 9px color-mix(in srgb, var(--c, var(--brand)) 12%, transparent);
}

.bf-pin::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--c, var(--brand));
    opacity: 0.55;
    animation: bf-ping 2.4s ease-out infinite;
}

@keyframes bf-ping {
    0%   { transform: scale(0.75); opacity: 0.6; }
    70%  { transform: scale(2.1);  opacity: 0; }
    100% { transform: scale(2.1);  opacity: 0; }
}

/* Systemic compounds act everywhere, so they tint the whole figure rather
   than claiming a single spot. */
.bf-wash {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--c, var(--brand));
    opacity: 0.22;
    mix-blend-mode: multiply;
}

.bodyfig-label {
    display: block;
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .bf-pin::after { animation: none; opacity: 0.4; }
}

@media (max-width: 760px) {
    .bodyfig { max-width: 190px; }
    .bf-pin { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
}

.bodyfig-wrap { display: block; }

/* The illustration and the body figure inside an expanded library card, so
   the main page shows them without a click through to the entry page. */

.card-where {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--sp-3);
    align-items: start;
    margin: var(--sp-3) 0;
}

.card-where .bodyfig { max-width: 150px; }
.card-where .bf-pin { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.card-where .where-note { font-size: 0.88rem; }

.card-figure { margin: var(--sp-3) 0 0; }

.card-figure img {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-2);
}

.card-figure figcaption {
    margin-top: 0.45rem;
    max-width: 520px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

@media (max-width: 760px) {
    .card-where { grid-template-columns: 110px 1fr; gap: var(--sp-2); }
    .card-where .bodyfig { max-width: 110px; }
    .card-where .bf-pin { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
}