/* intoxicant.wiki compound pages. One DOM per compound; html[data-view] picks the layout (a safety card, b full article, c at a glance). */
:root {
  --bg: #f3f5f7; --paper: #ffffff; --ink: #15202b; --muted: #5a6876; --line: #d6dde4;
  --accent: #0f5c8c; --accent-soft: #e2eef6; --warn: #b5470f; --warn-soft: #fbeadf;
  --pending: #7a6a1c; --pending-soft: #f6f0d4;
  --danger: #b42318; --danger-soft: #fde7e5; --unsafe: #c4570c; --unsafe-soft: #fdeedd; --caution: #8a6d00; --caution-soft: #fbf3d2; --low: #2f6b45; --low-soft: #e3f1e7;
  --band-th: #cfe3d4; --band-light: #9fcbab; --band-common: #f2cf74; --band-strong: #ec9a5c; --band-heavy: #d4583a;
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--f-body) }
h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; line-height: 1.15; margin: 0 }
a { color: var(--accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
p { margin: 0 }
.in, .page { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.mono { font-family: var(--f-mono); font-size: .86em } .wrap { word-break: break-all }
.num { font-variant-numeric: tabular-nums }
.muted { color: var(--muted) } .small { font-size: .82rem }
.label { font: 600 .7rem var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted) }

header.site { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5 }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper) }
header.site .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 10px }
.brand { font: 800 1.1rem var(--f-display); font-stretch: 85%; color: var(--ink); text-decoration: none }
.viewswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px }
.viewswitch button { font: 600 .82rem var(--f-body); background: none; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer }
.viewswitch button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper) }

.page { padding-block: 22px 40px; display: grid; gap: 18px }
.titleblock { display: grid; gap: 8px }
.titleblock h1 { font-size: clamp(2rem, 5vw, 3rem); font-stretch: 80%; font-weight: 800 }
.aka { color: var(--muted) }
.wikibar { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .86rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper) }
.wikibar a { font-weight: 600; overflow-wrap: anywhere }
.pending-inline { color: var(--pending) }

.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start }
.blocks { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.blk { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: grid; gap: 10px; min-width: 0 }
.blk h2 { font-size: 1.3rem }
.blk h3 { font-size: 1rem; margin-top: 6px }
.blk h4 { font-size: .9rem }
.scroll { overflow-x: auto }
table { border-collapse: collapse; width: 100% }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9rem }
thead th { font: 600 .7rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
tbody th { font-weight: 600; white-space: nowrap }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 }
dl.kv dt { color: var(--muted); font-weight: 600 } dl.kv dd { margin: 0; min-width: 0 }
@media (max-width: 560px) { dl.kv { grid-template-columns: 1fr } dl.kv dt { margin-top: 6px } }

.src { font: 600 .64rem/1 var(--f-mono); letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); border-radius: 3px; padding: 3px 5px; text-decoration: none; vertical-align: middle; white-space: nowrap }
.refno { font-size: .72em; vertical-align: super; text-decoration: none; margin-left: 1px }
.flag { display: inline-block; margin-left: 6px; font-size: .78rem; color: var(--warn); background: var(--warn-soft); border-radius: 4px; padding: 1px 6px }
.claim[data-status="disputed"] { background: var(--warn-soft); border-radius: 3px }
.chip { display: inline-block; font-size: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--ink); margin: 2px 2px 2px 0 }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px }
.chips .claim { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 4px 1px 9px; font-size: .84rem }
.pending { background: var(--pending-soft); color: var(--pending); border: 1px dashed var(--pending); border-radius: 6px; padding: 10px 12px; font-size: .86rem }
.pending b { font: 600 .7rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: 2px }
.note-warn { background: var(--warn-soft); border-left: 4px solid var(--warn); padding: 8px 12px; border-radius: 0 6px 6px 0 }

.tier { display: inline-block; font: 600 .68rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; margin-right: 4px }
.tier-danger { background: var(--danger-soft); color: var(--danger) } .tier-unsafe { background: var(--unsafe-soft); color: var(--unsafe) }
.tier-caution { background: var(--caution-soft); color: var(--caution) } .tier-low { background: var(--low-soft); color: var(--low) }
.mixlist { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px }
.mixlist li { border-left: 3px solid var(--line); padding-left: 10px }
.tsgroup { display: grid; gap: 6px }
.refs { margin: 0; padding-left: 22px; font-size: .84rem; display: grid; gap: 4px }
.kind { font: 600 .62rem var(--f-mono); text-transform: uppercase; letter-spacing: .04em; border-radius: 3px; padding: 1px 5px; background: var(--bg); color: var(--muted) }
.kind-medical_journal_or_agency { background: var(--low-soft); color: var(--low) }
.legal { margin: 0; padding-left: 18px; display: grid; gap: 4px }

.doseband { display: grid; gap: 4px }
.doseband .bar { display: flex; height: 32px; border-radius: 4px; overflow: hidden }
.doseband .bar div { display: flex; align-items: center; justify-content: center; font: 600 .68rem var(--f-mono); color: var(--ink); overflow: hidden; white-space: nowrap; min-width: 0 }
.b-th { background: var(--band-th) } .b-light { background: var(--band-light) } .b-common { background: var(--band-common) } .b-strong { background: var(--band-strong) } .b-heavy { background: var(--band-heavy) }
.ticks, .axis { position: relative; height: 18px; font: .7rem var(--f-mono); color: var(--muted) }
.ticks span, .axis span { position: absolute; transform: translateX(-50%) } .ticks span:first-child, .axis span:first-child { transform: none }
.ticks .unit { right: 0; left: auto; transform: none }
.tl { display: grid; gap: 4px } .tl .row { display: flex; height: 28px; border-radius: 4px; overflow: hidden }
.tl .row div { display: flex; align-items: center; padding-left: 6px; font: 600 .68rem var(--f-mono); white-space: nowrap; overflow: hidden; min-width: 0 }
.ph-onset { background: var(--band-th) } .ph-comeup { background: var(--band-light) } .ph-peak { background: var(--band-common) } .ph-offset { background: var(--band-strong) }

.tiles { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.tile .v { font: 700 1.15rem/1.2 var(--f-display); margin-top: auto }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

.infobox { display: none; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: .86rem; overflow: hidden; min-width: 0 }
.infobox h2 { font-size: 1.05rem; padding: 10px 12px; background: var(--accent-soft) }
.infobox dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) }
.infobox dt, .infobox dd { margin: 0; padding: 7px 12px; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere }
.infobox dt { color: var(--muted); font-weight: 600 }

.reports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.reports .col { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.reports h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 6px }
.reports .host { font: 400 .72rem var(--f-mono) }
@media (max-width: 640px) { .reports { grid-template-columns: 1fr } }

.xlinks { display: grid; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px }
.xlinks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem }

footer.site { border-top: 1px solid var(--line); background: var(--paper) }
footer.site .in { padding-block: 18px 28px; display: grid; gap: 10px }
footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 16px }

/* trust controls (shown when reviewer voting is switched on) */
.trust { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; font: 600 .66rem/1 var(--f-mono) }
.trust button { font: inherit; border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 3px; padding: 2px 5px; cursor: pointer }
.trust button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink) }

/* ---------- views ---------- */
/* A · safety card: single column, dose first */
html[data-view="a"] .blocks { max-width: 820px }
html[data-view="a"] #s-dose { order: 1 } html[data-view="a"] #s-timing { order: 2 } html[data-view="a"] #s-mixing { order: 3 }
html[data-view="a"] #s-risks { order: 4 } html[data-view="a"] #s-testing { order: 5 } html[data-view="a"] #s-effects { order: 6 }
html[data-view="a"] #s-summary { order: 7 } html[data-view="a"] #s-reports { order: 8 } html[data-view="a"] #s-history { order: 9 }
html[data-view="a"] #s-legal { order: 10 } html[data-view="a"] #s-chem { order: 11 } html[data-view="a"] #s-pharm { order: 12 } html[data-view="a"] #s-refs { order: 13 }
html[data-view="a"] #s-mixing, html[data-view="a"] #s-risks, html[data-view="c"] #s-mixing, html[data-view="c"] #s-risks { border-left: 4px solid var(--warn) }

/* B · full article: overview first, fact box beside */
html[data-view="b"] .layout { grid-template-columns: minmax(0, 1fr) 290px }
html[data-view="b"] .infobox { display: block; position: sticky; top: 64px }
html[data-view="b"] #s-summary { order: 1 } html[data-view="b"] #s-effects { order: 2 } html[data-view="b"] #s-dose { order: 3 }
html[data-view="b"] #s-timing { order: 4 } html[data-view="b"] #s-mixing { order: 5 } html[data-view="b"] #s-risks { order: 6 }
html[data-view="b"] #s-testing { order: 7 } html[data-view="b"] #s-pharm { order: 8 } html[data-view="b"] #s-chem { order: 9 }
html[data-view="b"] #s-history { order: 10 } html[data-view="b"] #s-legal { order: 11 } html[data-view="b"] #s-reports { order: 12 } html[data-view="b"] #s-refs { order: 13 }
html[data-view="b"] .blk { border-radius: 0; border-width: 0 0 1px; background: transparent; padding-inline: 0 }
@media (max-width: 860px) { html[data-view="b"] .layout { grid-template-columns: 1fr } html[data-view="b"] .infobox { position: static; order: -1 } }

/* C · at a glance: tiles, scale, timeline, mixing, risks; long text hidden */
html[data-view="c"] .tiles { display: grid; order: 0 }
html[data-view="c"] #s-dose { order: 1 } html[data-view="c"] #s-timing { order: 2 } html[data-view="c"] #s-mixing { order: 3 } html[data-view="c"] #s-risks { order: 4 }
html[data-view="c"] #s-testing { order: 5 } html[data-view="c"] #s-reports { order: 6 }
html[data-view="c"] .blk.long { display: none }
html[data-view="c"] #s-dose table, html[data-view="c"] #s-timing table { font-size: .82rem }
html[data-view="c"] .titleblock h1 { font-size: clamp(2.4rem, 8vw, 3.6rem) }
html[data-view="c"] .blk > p.claim, html[data-view="c"] .blk > p:not([class]), html[data-view="c"] .blk li { max-width: 70ch }
html[data-view="c"] .refno { display: none }  /* the reference list is not part of this view */
/* safety card and sparse pages: the boxes above and below the cards share the cards' width */
html[data-view="a"] .wikibar, html[data-view="a"] .page > .safety-notice, html[data-view="a"] .xlinks, .sparse .wikibar, .sparse .page > .safety-notice, .sparse .xlinks { max-width: 820px }
.clip { color: transparent }  /* a band label that does not fit its band; the band keeps its title */
#s-pharm thead th { text-transform: none; letter-spacing: 0 }  /* units such as μM must keep their case */
#s-pharm td:not(:first-child):not(:last-child) { white-space: nowrap }
.infobox dd { hyphens: auto }
.safety-notice a[href^="tel:"] { white-space: nowrap }

/* D · sparse */
.sparse .blocks { max-width: 820px }

@media (prefers-reduced-motion: no-preference) { .viewswitch button { transition: background .15s, color .15s } }
.replinks { margin: 0; padding-left: 18px; font-size: .86rem; display: grid; gap: 3px }
/* source tags: each site keeps its own colour so tags are told apart at a glance; favicon shown when saved */
/* the tag is a plain inline so the no-break space before it keeps it on the same line as the value's last word */
.src { display: inline; white-space: nowrap } .src .ico { margin-right: 3px; vertical-align: -2px }
.src .ico { width: 12px; height: 12px; border-radius: 2px; background-position: center; background-size: contain; background-repeat: no-repeat; display: inline-block; flex: none }
.src-psychonautwiki { background: #ece4f7; color: #5b2a9b }
.src-wikipedia { background: #ebebeb; color: #202122 }
.src-tripsit { background: #e1f3f1; color: #0b6b62 }
.src-pubchem { background: #e3ecf8; color: #1f4f8f }
.wslist { margin: 0; padding-left: 20px; display: grid; gap: 4px }
.ico { width: 12px; height: 12px; border-radius: 2px; background-position: center; background-size: contain; background-repeat: no-repeat; display: inline-block; flex: none }
.named { white-space: nowrap }
.named .ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px }
/* brand: the "." in intoxicant.wiki is drawn as a capsule centered where the dot sits; the real dot stays for copy and screen readers */
:root { --pill-a: #d4583a; --pill-b: transparent }
.brand { display: inline-flex; align-items: baseline }
.brand .dot { position: relative; display: inline-block; width: .32em }
.brand .dot-char { color: transparent }
.brand .pill { position: absolute; left: 50%; bottom: .09em; width: .5em; height: .25em; transform: translateX(-50%) rotate(var(--r, -28deg)); transform-origin: 50% 50%; color: var(--ink); overflow: visible }
/* pop culture (community-added) */
html[data-view="a"] #s-popculture { order: 9 } html[data-view="b"] #s-popculture { order: 12 }
.pclist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.pclist li { border-left: 3px solid var(--line); padding-left: 10px; display: grid; gap: 4px }
.pclist blockquote { margin: 0; color: var(--muted) }
.pcadd summary { cursor: pointer; font-weight: 600; color: var(--accent) }
.pcform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 8px }
.pcform label { display: grid; gap: 2px; font-size: .82rem; color: var(--muted) }
.pcform .wide { grid-column: 1 / -1 }
.pcform input, .pcform select, .pcform button { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink) }
.pcform button { justify-self: start; cursor: not-allowed }
@media (max-width: 560px) { .pcform { grid-template-columns: 1fr } }
.pclist li > .tier { justify-self: start }
.wikibar { display: grid; gap: 4px }
.wikihead { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center }
.wikibar .why { font-size: .8rem; color: var(--muted); max-width: 90ch }
.prose p, .prose li { max-width: 68ch }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 4px }
.tagline { font: italic 400 .84rem/1.3 var(--f-body); color: var(--muted); margin-left: 10px; flex: 1 1 0; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
/* phone: the subtitle gets its own full line under the brand, and the header scrolls away instead of sticking, so it does not cost a quarter of the screen */
@media (max-width: 640px) { .tagline { flex-basis: 100%; margin-left: 0; font-size: .8rem } header.site { position: static } }
.topnav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; margin-left: 18px }
.topnav a { color: var(--muted); text-decoration: none } .topnav a:hover { color: var(--accent); text-decoration: underline }
@media (max-width: 640px) { .topnav { margin-left: 0; order: 3; width: 100% } }
.blk > *, .scroll { min-width: 0 } .scroll { max-width: 100% }
.page > *, .layout > *, .blocks > * { min-width: 0 }
.refs li, .refs a { overflow-wrap: anywhere; min-width: 0 }
/* every sourced value: hover shows where it came from, right-click (or long-press) opens the claim menu */
.claim { border-bottom: 1px dotted transparent; transition: border-color .12s, background .12s }
.claim:hover { border-bottom-color: var(--accent); background: var(--accent-soft); border-radius: 2px; cursor: context-menu }
.claimmenu { position: fixed; z-index: 50; min-width: 240px; max-width: min(92vw, 360px); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; font-size: .88rem }
.claimmenu .hd { font: 600 .68rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 4px; overflow-wrap: anywhere }
.claimmenu button, .claimmenu a { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; color: var(--ink); padding: 7px 10px; border-radius: 5px; cursor: pointer; text-decoration: none }
.claimmenu button:hover, .claimmenu a:hover, .claimmenu button:focus-visible, .claimmenu a:focus-visible { background: var(--accent-soft); outline: none }
.claimmenu .danger { color: var(--warn) }
.claimmenu form { display: grid; gap: 6px; padding: 6px 10px 8px }
.claimmenu textarea, .claimmenu input, .claimmenu select { font: inherit; width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink) }
.claimmenu .row { display: flex; gap: 6px; justify-content: flex-end }
.claimmenu .row button { width: auto; border: 1px solid var(--line) }
.claimmenu .row .primary { background: var(--accent); color: var(--paper); border-color: var(--accent) }
.claimmenu .ok { padding: 8px 10px; color: var(--low) }
/* self-reported dose */
.selfreport { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 10px }
.selfreport summary { cursor: pointer; font-weight: 600; color: var(--accent) }
.warnbox { background: var(--danger-soft); border-left: 4px solid var(--danger); padding: 10px 12px; border-radius: 0 6px 6px 0; font-size: .9rem }
.srform { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end }
.srform label { display: grid; gap: 2px; font-size: .82rem; color: var(--muted) }
.srform label.chk { grid-auto-flow: column; align-items: center; justify-content: start; gap: 6px; color: var(--ink) }
.srform input, .srform select, .srform button { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink) }
.srform input[type=number] { width: 7em }
.srform button { background: var(--accent); color: var(--paper); border-color: var(--accent); cursor: pointer }
.srstats table { width: auto } .srstats .few { color: var(--warn) }
.consent { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: .9rem; max-width: 720px; margin: 0 auto }
.consent span { flex: 1 1 320px } .consent button { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer }
.consent button[data-c="yes"] { background: var(--accent); color: var(--paper); border-color: var(--accent) }

/* homepage and A–Z */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.hero { display: grid; gap: 12px; padding: 18px 0 6px }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-stretch: 80%; font-weight: 800; line-height: 1.05; margin: 0 }
.lede { font-size: 1.05rem; max-width: 70ch; margin: 0 }
.search { position: relative; display: flex; gap: 8px; max-width: 640px }
.search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.05rem; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink) }
.search button { font: 600 .95rem var(--f-body); padding: 0 16px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent); color: var(--paper); cursor: pointer }
.hits { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6; list-style: none; margin: 0; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); max-height: 60vh; overflow: auto }
.hits li a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none }
.hits li a:hover, .hits li a:focus { background: var(--accent-soft) }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.qt { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); text-decoration: none; font-size: .92rem; min-width: 0 }
.qt:hover { border-color: var(--accent) } .qt span { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch } @media (max-width: 760px) { .home-grid { grid-template-columns: 1fr } }
.home .blk ul { margin: 0; padding-left: 18px; display: grid; gap: 6px }
[hidden] { display: none !important }
.letters { display: flex; flex-wrap: wrap; gap: 4px } .letters a { font: 600 .9rem var(--f-mono); min-width: 2em; text-align: center; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; background: var(--paper) }
.azlist { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 24px } .azlist li { break-inside: avoid; padding: 3px 0; font-size: .92rem; overflow-wrap: anywhere }
:root { --header-h: 43px } @media (max-width: 640px) { :root { --header-h: 0px } }
.azgroup { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 8px) }
.azgroup h2 { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); background: var(--paper); margin: 0; padding: 6px 0 4px }

/* combination chart */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem } .lg { display: inline-flex; align-items: center; gap: 5px }
.legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--line) } .legend i.none { background: var(--bg) }
.combo-wrap { max-height: 80vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper) } @media (min-width: 900px) { .combo-wrap { max-height: none } }
.combos .page > p.small { max-width: 70ch }
.combo { border-collapse: separate; border-spacing: 2px; font-size: .72rem; width: auto; table-layout: fixed }
.combo-wrap { width: 100%; max-width: 100%; contain: paint } .combos .page, .combos main { min-width: 0 }
.combo th { position: sticky; background: var(--paper); z-index: 2; font-weight: 600; padding: 2px 4px; border: 0; white-space: nowrap; text-align: left }
.combo thead th { top: 0; height: 116px; vertical-align: bottom; text-transform: none; letter-spacing: 0 } .combo thead th span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 112px; overflow: hidden }
.combo tbody th { left: 0 } .combo th.corner { left: 0; top: 0; z-index: 3 }
.combo td { padding: 0; border: 0; width: 22px; height: 22px; min-width: 22px; border-radius: 3px; background: var(--bg) } .combo td.self { background: var(--line) }
.combo td button { display: block; width: 100%; height: 100%; min-height: 22px; background: none; border: 0; cursor: pointer; border-radius: 3px }
.combo td button:hover, .combo td button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
#cd-status.tier { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.5) }

/* dose and duration tables share one column grid per page, so rows line up between route tables; row headers may wrap */
@media (min-width: 641px) { #s-dose .scroll table, #s-timing .scroll table { table-layout: fixed } #s-dose .scroll th:first-child { width: 22% } #s-timing .scroll th:first-child { width: 24% } }
#s-dose tbody th, #s-timing tbody th { white-space: normal }

/* code keys in tables stay whole; the footer emergency notice's country picker follows the theme */
td code { white-space: nowrap }
.safety-notice select { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px }
/* table.stack: on a phone each row becomes a short block, labelled from the cells' data-label (for wide reference tables such as emergency numbers) */
@media (max-width: 640px) {
  table.stack, table.stack tbody { display: block } table.stack thead { display: none }
  table.stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line) }
  table.stack th, table.stack td { display: block; border: 0; padding: 2px 0; white-space: normal } table.stack tbody th { padding-bottom: 4px }
  table.stack td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 7.5rem; margin-right: .5em; font: 600 .66rem/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
}
.letters.kinds { margin-top: 6px } .letters.kinds a { font: 600 .8rem var(--f-body) }
.mixlist.sub { margin-top: 6px; padding-left: 1.2rem; gap: 4px } .mixlist.sub li { list-style: circle; border-left: 0; padding-left: 0 }
.wslist li.d2 { margin-left: 1.3rem; list-style: circle } .wslist li.d3, .wslist li.d4 { margin-left: 2.6rem; list-style: square }
p.claim.d2 { margin-left: 1.3rem }
#s-pharm thead tr:first-child th[colspan] { text-align: center; border-bottom: 1px solid var(--line) }
/* header "Random" button (site.js) */
.hrandom { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: 10px; padding: 6px 11px; font-size: .86rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); text-decoration: none; white-space: nowrap }
.hrandom svg { width: 15px; height: 15px; fill: currentColor }
.hrandom:hover { border-color: var(--accent); color: var(--accent) }
.hrandom:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.hrandom[aria-busy="true"] { opacity: .6; cursor: progress }
/* wide screens: icon only, so the subtitle keeps its room; phones: icon and word, on the search box's row */
@media (min-width: 641px) { .hrandom { padding: 7px 9px } .hrandom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } }
@media (max-width: 640px) { .hrandom { order: 2; margin-left: 8px; padding: 7px 11px } header.site .in .hsearch:has(+ .hrandom) { flex: 1 1 0 } }

/* homepage dictionary entry for "intoxicant" */
.defbox { margin: 6px 0 16px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; max-width: 760px }
.defbox .label { margin: 0 0 4px }
.def-head { margin: 0 0 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px }
.def-head dfn { font: 800 1.9rem/1.1 var(--f-display); font-style: normal; font-stretch: 85% }
.def-pos { font: italic .95rem var(--f-body); color: var(--muted) }
.def-pron { font: .95rem var(--f-body); color: var(--muted) }
.def-senses { margin: 0 0 8px; padding-left: 20px } .def-senses li { margin: 0 }
.defbox q { quotes: "\201C" "\201D" } .defbox cite { font-style: normal; white-space: nowrap }
.def-rel { margin: 0 0 8px; padding-top: 8px; border-top: 1px dashed var(--line) } .def-rel b { margin-right: 4px }
.defbox > p:last-child { margin: 0 }
.kind-hr { background: var(--low-soft); color: var(--low) }
.azlist .aka-inline { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3 }

/* Psychedelic subtitle (2026-10-25, the site admin liked all four looks): site.js picks one at random on each load, like the line itself.
   aurora = flowing rainbow + glow; melt = per-letter colors in a wave (site.js splits letters into .psy-c); fillmore = 60s poster face
   (Shrikhand, SIL OFL, loaded by site.js) with a drifting cyan/magenta double image; fm = melt + fillmore.
   Only the header subtitle; dosing and warning text never uses it. Reduce-motion keeps the colors, no movement. */
:root { --psy-1: #c2185b; --psy-2: #7b1fa2; --psy-3: #3949ab; --psy-4: #00796b; --psy-5: #b35c00; --psy-glow: rgba(123,31,162,.28); --psy-ab-a: rgba(233,30,99,.35); --psy-ab-b: rgba(0,172,193,.35); --f-psy: "Shrikhand", "Cooper Black", Georgia, serif }
.tagline.psy-aurora { font-weight: 600; background: linear-gradient(90deg, var(--psy-1), var(--psy-2), var(--psy-3), var(--psy-4), var(--psy-5), var(--psy-1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px var(--psy-glow)) }
.tagline.psy-melt { font-weight: 600 }
.tagline .psy-w { display: inline-block; white-space: nowrap }
.tagline .psy-c { display: inline-block; color: var(--k, var(--muted)); text-shadow: 0 0 8px var(--psy-glow) }
.tagline.psy-fillmore, .tagline.psy-fm { font: 400 .95rem/1.4 var(--f-psy); letter-spacing: .01em; filter: drop-shadow(-1.5px 0 0 var(--psy-ab-a)) drop-shadow(1.5px 0 0 var(--psy-ab-b)) }
.tagline.psy-fillmore { background: linear-gradient(100deg, var(--psy-5), var(--psy-1) 40%, var(--psy-2) 70%, var(--psy-3)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent }
.tagline.psy-fm .psy-c { text-shadow: none }
@media (max-width: 640px) { .tagline.psy-fillmore, .tagline.psy-fm { font-size: .88rem } }
@media (prefers-reduced-motion: no-preference) {
  .tagline.psy-aurora { animation: psy-flow 9s linear infinite }
  .tagline .psy-c { animation: psy-bob 3.2s ease-in-out infinite, psy-hue 8s linear infinite; animation-delay: calc(var(--i) * -90ms), calc(var(--i) * -120ms) }
  .tagline.psy-fillmore { animation: psy-flow 12s linear infinite alternate, psy-drift 4s ease-in-out infinite }
  .tagline.psy-fm { animation: psy-drift 4s ease-in-out infinite }
}
@keyframes psy-flow { to { background-position: 300% 0 } }
@keyframes psy-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
@keyframes psy-hue { to { filter: hue-rotate(360deg) } }
@keyframes psy-drift { 0%, 100% { filter: drop-shadow(-1.5px 0 0 var(--psy-ab-a)) drop-shadow(1.5px 0 0 var(--psy-ab-b)) } 50% { filter: drop-shadow(1.5px .5px 0 var(--psy-ab-a)) drop-shadow(-1.5px -.5px 0 var(--psy-ab-b)) } }

/* Duration timeline toggles (site.js): buttons above the chart, one bracket per shown phase under the bands */
.tl-tog { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 2px }
.tl-b { font: 600 .74rem var(--f-mono); background: var(--paper); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer }
.tl-b:hover { color: var(--ink) } .tl-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.tl-b[aria-pressed="true"] { color: var(--ink); border-color: var(--ink) }
.tl-b[aria-pressed="true"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; background: var(--band-common) }
.ph-onset-b[aria-pressed="true"]::before { background: var(--band-th) } .ph-comeup-b[aria-pressed="true"]::before { background: var(--band-light) }
.ph-offset-b[aria-pressed="true"]::before { background: var(--band-strong) }
.tl-pts { display: grid; gap: 2px }
.tl-pt { position: relative; height: 22px }
.tl-pt .br { position: absolute; top: 3px; height: 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ink) }
.tl-pt .br::before, .tl-pt .br::after { content: ""; position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); border-radius: 1px }
.tl-pt .br::before { left: 0 } .tl-pt .br::after { right: 0 }
.tl-pt .lb { position: absolute; top: 13px; transform: translateX(-50%); font: 600 .7rem/12px var(--f-mono); color: var(--ink); white-space: nowrap }
.tl-pt .lb.start { transform: none } .tl-pt .lb.end { transform: translateX(-100%) }
.tl-pt .lb.start { left: 0 !important } .tl-pt .lb.end { left: 100% !important }
.tl-pt { height: 28px }
@media (prefers-reduced-motion: no-preference) { .tl-b { transition: color .15s, border-color .15s } }

/* Link colours (2026-10-25): links to other sites are green, links within intoxicant.wiki keep the blue accent.
   Same specificity as the base `a` rule, so components that colour their own links (source tags, menus) are unchanged. */
a:where([href^="http"]:not([href*="intoxicant.wiki"]):not([href*="intoxicantwiki.pages.dev"])) { color: var(--low) }
.src:where([href^="http"]:not([href*="intoxicant.wiki"]):not([href*="intoxicantwiki.pages.dev"])) { color: var(--low); background: var(--low-soft) }

/* Rainbow subtitle (2026-10-25, the site admin asked for real rainbow): vivid spectrum palette, and the gradient looks show the whole spectrum at once */
:root { --psy-1: #e53935; --psy-2: #ef6c00; --psy-y: #c99a00; --psy-3: #2e9e44; --psy-4: #1e6fe0; --psy-5: #8e24aa }
.tagline.psy-aurora, .tagline.psy-fillmore { background-image: linear-gradient(90deg, var(--psy-1), var(--psy-2), var(--psy-y), var(--psy-3), var(--psy-4), var(--psy-5)); background-size: 100% 100% }
@media (prefers-reduced-motion: no-preference) { .tagline.psy-aurora { animation: psy-hue 9s linear infinite } }

/* Holographic glint: a faint iridescent flicker that ripples letter by letter through page text (site.js splits it into .gl-c).
   Separate from the .psy-* subtitle looks. site.js leaves dose, timing, mixing, risk, testing and warning text untouched. */
:root { --gl-dur: 4s; --gl-amt: 25%; --gl-a: #12a3bd; --gl-b: #e0559a }
.gl-w { display: inline !important; white-space: nowrap !important; flex: none; width: auto !important }
.gl-c { display: inline !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; position: static !important }
.gl-c { animation: gl-hop var(--gl-dur) ease-in-out infinite; animation-delay: calc(var(--i) * 22ms) }
.gl-off .gl-c { animation: none }
@keyframes gl-hop {
  0%, 6%, 100% { color: currentColor }
  2% { color: color-mix(in srgb, var(--gl-a) var(--gl-amt), currentColor) }
  4% { color: color-mix(in srgb, var(--gl-b) var(--gl-amt), currentColor) }
}
@media (prefers-reduced-motion: reduce) { .gl-c { animation: none } }

/* Page view counter (homepage, live) */
.views { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums }
.views[hidden] { display: none }
.views b { color: var(--ink); font-weight: 700 }
.views-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 0 rgba(47,191,113,.6); animation: views-pulse 2s ease-out infinite }
.views.bump b { animation: views-bump .6s ease-out }
@keyframes views-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,191,113,.55) } 70% { box-shadow: 0 0 0 7px rgba(47,191,113,0) } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0) } }
@keyframes views-bump { 0% { color: #2fbf71 } 100% { color: var(--ink) } }
@media (prefers-reduced-motion: reduce) { .views-dot, .views.bump b { animation: none } }
.views-pages h2 .views-dot { display: inline-block; vertical-align: middle; margin-left: 6px }
.views-t { width: 100%; max-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums }
.views-t th, .views-t td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line) }
.views-t th:not(:first-child), .views-t td:not(:first-child) { text-align: right; white-space: nowrap }
.views-more { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer }

/* Subtitle lab pick (2026-10-25, owner's settings from the Rainbow Subtitle Lab): always Melt, golden-ratio letter colors
   (site.js mixes neighbouring rainbow colors per letter), Righteous font, 4px wave every 3.2s, 20s color cycle, 20px glow. */
.tagline.psy-melt { font: italic 400 .95rem/1.4 "Righteous", var(--f-body) }
@media (max-width: 640px) { .tagline.psy-melt { font-size: .88rem } }
.tagline.psy-melt .psy-c { text-shadow: 0 0 20px color-mix(in srgb, var(--psy-4) 60%, transparent) }
@media (prefers-reduced-motion: no-preference) {
  .tagline.psy-melt .psy-c { animation: psy-bob4 3.2s ease-in-out infinite, psy-hue 20s linear infinite; animation-delay: calc(var(--i) * -90ms), calc(var(--i) * -120ms) }
}
@keyframes psy-bob4 { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

/* Drug of Choice button under substance page titles (site.js) */
.docbox { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px }
.docbtn { font: inherit; font-size: .9rem; font-weight: 600; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer }
.docbtn:hover { border-color: var(--accent); color: var(--accent) }
.docbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.docbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--bg) }
.docnote { margin: 0; font-size: .82rem; color: var(--muted, inherit); opacity: .85 }

/* Pastel band background (light mode): soft horizontal color bands that slowly widen and narrow. */
@property --pb1 { syntax: "<percentage>"; inherits: false; initial-value: 16% }
@property --pb2 { syntax: "<percentage>"; inherits: false; initial-value: 34% }
@property --pb3 { syntax: "<percentage>"; inherits: false; initial-value: 52% }
@property --pb4 { syntax: "<percentage>"; inherits: false; initial-value: 70% }
@property --pb5 { syntax: "<percentage>"; inherits: false; initial-value: 87% }
html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background: linear-gradient(180deg, #f9e1e8 0%, #fcebdc var(--pb1), #faf4d6 var(--pb2), #e1f2e5 var(--pb3), #dbebf7 var(--pb4), #e7e1f5 var(--pb5), #f6e0ee 100%);
  animation: iw-pb1 23s ease-in-out infinite alternate, iw-pb2 31s ease-in-out infinite alternate, iw-pb3 19s ease-in-out infinite alternate, iw-pb4 37s ease-in-out infinite alternate, iw-pb5 27s ease-in-out infinite alternate, iw-breathe 9s ease-in-out infinite alternate }
/* Breathing (2026-11-10): the band colours drift a few degrees of hue and swell slightly in strength and brightness, on one slow cycle */
@keyframes iw-breathe { 0% { opacity: .68; filter: hue-rotate(-30deg) saturate(.85) brightness(1) } 100% { opacity: .95; filter: hue-rotate(30deg) saturate(1.9) brightness(1.04) } }
/* The heat-haze canvases paint their own copy of the bands, so they breathe on the same cycle (colour only) */
@keyframes iw-breathe-c { 0% { filter: hue-rotate(-30deg) saturate(.85) brightness(1) } 100% { filter: hue-rotate(30deg) saturate(1.9) brightness(1.04) } }
canvas.iw-haze, canvas.iw-trail-haze { animation: iw-breathe-c 9s ease-in-out infinite alternate }
@media (prefers-reduced-motion: reduce) { canvas.iw-haze, canvas.iw-trail-haze { animation: none } }
@keyframes iw-pb1 { from { --pb1: 8% } to { --pb1: 25% } }
@keyframes iw-pb2 { from { --pb2: 41% } to { --pb2: 28% } }
@keyframes iw-pb3 { from { --pb3: 46% } to { --pb3: 60% } }
@keyframes iw-pb4 { from { --pb4: 77% } to { --pb4: 63% } }
@keyframes iw-pb5 { from { --pb5: 81% } to { --pb5: 94% } }
@media (prefers-reduced-motion: reduce) { html::before { animation: none } }
/* Rainbow theme (2026-10-28): light mode with its pastel bands, but the header and footer keep the dark-mode colours */
:root[data-tint="rainbow"] header.site, :root[data-tint="rainbow"] footer.site {
  --bg: #0f151b; --paper: #161f28; --ink: #e4eaf0; --muted: #93a2b1; --line: #2a3643;
  --accent: #6fb6e3; --accent-soft: #19303f; --warn: #f0905c; --warn-soft: #3a2218; --pending: #e0cb6e; --pending-soft: #2f2a14;
  --danger: #ff8a80; --danger-soft: #3d1715; --unsafe: #f5a25d; --unsafe-soft: #3a2414; --caution: #e7cf6a; --caution-soft: #332c12; --low: #8fd0a4; --low-soft: #17301f;
  color: var(--ink); color-scheme: dark }
:root[data-tint="rainbow"] body::before { background: #161f28 }
:root[data-tint="rainbow"] footer.site { background: color-mix(in srgb, #161f28 88%, transparent) }   /* the 50% footer is too faint for light text over the pastel bands */
:root[data-tint="rainbow"] footer.site .safety-notice { color: #f2f4f7 }
:root[data-tint="rainbow"] footer.site .safety-notice .safety-note, :root[data-tint="rainbow"] footer.site .safety-notice .safety-meta { color: #d0d5dd }
/* Rainbow/light toggle button in the header (site.js adds it). The dark theme was removed 2026-10-31. */
.htheme { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; line-height: 1 }
.htheme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round }
.htheme:hover { border-color: var(--accent); color: var(--accent) }
.htheme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
@media (max-width: 640px) { .htheme { order: 2; margin-left: 8px } }

/* 3D structure link on substance pages (site.js loader, links to /molecule/) */
.molbox { margin: 8px 0 0 }
.molbtn { display: inline-block; font-size: .9rem; font-weight: 600; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); text-decoration: none }
.molbtn:hover { border-color: var(--accent); color: var(--accent) }
.molbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }

/* Word count next to the drug name (2026-10-26) */
.titleblock h1 .wc { font-family: var(--f-body, inherit); font-size: .9rem; font-weight: 500; font-stretch: 100%; color: var(--muted); letter-spacing: 0; white-space: nowrap; vertical-align: middle; margin-left: .4em }

/* Layout switcher as a floating panel on the right edge (2026-10-26). site.js moves .viewswitch out of the header into .vsfloat. */
header.site .viewswitch { display: none }
.tagline { -webkit-line-clamp: 1 }
.vsfloat { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; align-items: center }
.vsfloat-tab { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .7rem var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-right: 0; border-radius: 0 8px 8px 0; padding: 12px 6px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18) }
.vsfloat-tab:hover { color: var(--accent) }
.vsfloat .viewswitch { display: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .22) }
.vsfloat .viewswitch > .label { text-align: center; padding-bottom: 2px }
.vsfloat .viewswitch > button { white-space: nowrap; text-align: center }
.vsfloat.open .viewswitch { display: flex }
.vsfloat.open .vsfloat-tab { display: none }
@media (min-width: 1400px) {
  .vsfloat .viewswitch { display: flex }
  .vsfloat .vsfloat-tab { display: none }
}
@media (max-width: 640px) {
  .vsfloat { top: auto; bottom: 30%; transform: none }
  .vsfloat-tab { padding: 10px 5px; font-size: .65rem }
}
@media print { .vsfloat { display: none } }

/* Wikipedia source box collapsed by default (site.js adds .wb-collapsible and the toggle; 2026-10-26) */
.wikibar.wb-collapsible { padding: 6px 12px }
.wikibar.wb-collapsible > .why { display: none }
.wikibar.wb-collapsible.wb-open > .why { display: block; margin: 4px 0 2px }
.wikibar .wb-toggle { font: inherit; font-size: .78rem; font-weight: 500; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; margin-left: 2px; cursor: pointer; white-space: nowrap; line-height: 1.5 }
.wikibar .wb-toggle::after { content: " \25BE"; font-size: .7rem }
.wikibar.wb-open .wb-toggle::after { content: " \25B4" }
.wikibar .wb-toggle:hover, .wikibar .wb-toggle:focus-visible { color: var(--accent); border-color: var(--accent) }
.wikibar .wb-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }

/* D · scroll story (2026-10-27). site.js adds the chapter cards (.st-chap), rail, progress bar and backdrop the first time it is picked.
   No rule here styles a bare descendant span: the letter-ripple glint wraps letters in spans. */
.st-chap, .st-rail, .st-bar, .st-bg { display: none }
html[data-view="d"] { overflow-x: clip }
html[data-view="d"] .st-bg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
html[data-view="d"] .st-bg::before, html[data-view="d"] .st-bg::after { content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .55 }
html[data-view="d"] .st-bg::before { background: radial-gradient(closest-side, var(--accent-soft), transparent); left: -20vmax; top: -15vmax; transform: translate3d(calc(var(--st-sy, 0) * 12vw), calc(var(--st-sy, 0) * 18vh), 0) }
html[data-view="d"] .st-bg::after { background: radial-gradient(closest-side, var(--warn-soft), transparent); right: -25vmax; bottom: -30vmax; transform: translate3d(calc(var(--st-sy, 0) * -10vw), calc(var(--st-sy, 0) * -14vh), 0) }
html[data-view="d"] .page { position: relative; z-index: 1; max-width: none; padding-block: 0 40px; gap: 0 }
html[data-view="d"] .page > * { width: 100%; max-width: 920px; margin-inline: auto }
html[data-view="d"] .page > .layout { max-width: none }
html[data-view="d"] .infobox { display: none }

/* opening slide: the name, big */
html[data-view="d"] .titleblock { min-height: calc(100svh - var(--header-h, 0px)); align-content: center; justify-items: center; text-align: center; gap: 14px; padding-block: 6vh }
html[data-view="d"] .titleblock h1 { font-size: clamp(3.4rem, 15vw, 10rem); line-height: .95; letter-spacing: -.02em; font-stretch: 75%;
  background: linear-gradient(100deg, var(--ink) 30%, var(--accent) 70%, var(--warn)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translate3d(0, calc(var(--st-sy, 0) * -14vh), 0) scale(calc(1 - var(--st-sy, 0) * .12)); opacity: calc(1 - var(--st-sy, 0) * .9) }
html[data-view="d"] .titleblock h1 > .wc { display: block; margin: 10px 0 0; -webkit-text-fill-color: var(--muted); font-size: 1rem }
html[data-view="d"] .titleblock > .label { font-size: .85rem }
html[data-view="d"] .titleblock .aka { font-size: clamp(1.05rem, 2.4vw, 1.4rem); max-width: 40ch }
html[data-view="d"] .titleblock .wikibar { text-align: left; max-width: 760px }
html[data-view="d"] .titleblock .docbox { justify-content: center }

/* the safety notice keeps its full warning box, right after the opening slide */
html[data-view="d"] .page > .safety-notice { margin-block: 0 8vh; font-size: 1.05rem }

/* the numbers slide (the at-a-glance tiles), with oversized values */
html[data-view="d"] .blocks { gap: 0 }
html[data-view="d"] .blocks > * { order: var(--st-o, 99) }
html[data-view="d"] .tiles { display: grid; order: 1; min-height: 80svh; align-content: center; gap: 16px; max-width: 920px; width: 100%; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) }
html[data-view="d"] .tile { padding: 22px 20px; border-radius: 16px; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(8px) }
html[data-view="d"] .tile { container-type: inline-size }
html[data-view="d"] .tile .v { font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.05; max-width: 100% }
/* long values shrink so their longest word fits the card width */
@supports (width: 1cqi) { html[data-view="d"] .tile .v { font-size: max(.95rem, min(clamp(1.5rem, 3.6vw, 2.5rem), calc(100cqi / (var(--st-lw, 6) * .64)))) } }
html[data-view="d"] .tile.st-rev { transition-delay: calc(var(--st-i, 0) * 90ms) }
/* as many columns as tiles (site.js sets --st-n), centred; no tiles = no empty slide */
html[data-view="d"] .tiles { grid-template-columns: repeat(var(--st-n, 4), minmax(0, 300px)); justify-content: center }
html[data-view="d"] .tiles:not(:has(> .tile)) { display: none }
@media (max-width: 700px) { html[data-view="d"] .tiles { grid-template-columns: repeat(var(--st-n2, 2), minmax(0, 1fr)) } }
/* owner's Edit section bar: a normal row under the chapter card, right-aligned with the content */
html[data-view="d"] .blk.st-sec > .sec-bar { position: static; justify-content: flex-end; margin-bottom: 4px }

/* chapters: each section opens with a pinned full-screen card, then its content */
html[data-view="d"] .blk.st-sec { display: block; background: none; border: 0; border-radius: 0; padding: 0 0 6vh }
html[data-view="d"] .blk.st-sec > :not(.st-chap) { width: 100%; max-width: 920px; margin: 0 auto 16px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) }
html[data-view="d"] .blk.st-sec > h2 { font-size: .8rem; font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
html[data-view="d"] .blk.st-sec > p, html[data-view="d"] .blk.st-sec li { font-size: 1.06rem; line-height: 1.7 }
html[data-view="d"] #s-summary > p:first-of-type { font: 600 clamp(1rem, 4.4vw, 1.75rem)/1.45 var(--f-display); font-stretch: 90% }
html[data-view="d"] .blk.st-sec table { background: color-mix(in srgb, var(--paper) 88%, transparent); border-radius: 10px }
html[data-view="d"] .st-chap { display: block; position: relative; height: 140svh; width: 100vw; margin-left: calc(50% - 50vw) }
html[data-view="d"] .st-chap-in { position: sticky; top: var(--header-h, 0px); height: calc(100svh - var(--header-h, 0px)); display: grid; place-content: center; justify-items: center; text-align: center; overflow: hidden; padding-inline: 16px }
html[data-view="d"] .st-num { display: block; font: 800 clamp(7rem, 34vw, 22rem)/1 var(--f-display); font-stretch: 75%; color: transparent; -webkit-text-stroke: 2px var(--line); position: absolute; left: 50%; top: 50%;
  transform: translate3d(-50%, calc(-50% + (1 - var(--e, 1)) * 30vh - var(--p, 0) * 25vh), 0) scale(calc(.8 + var(--e, 1) * .2)); opacity: var(--e, 1) }
html[data-view="d"] .st-title { position: relative; display: block; max-width: 14ch; font: 800 clamp(2.6rem, 9vw, 6.5rem)/1 var(--f-display); font-stretch: 80%; letter-spacing: -.01em; color: var(--ink);
  transform: translate3d(0, calc(var(--p, 0) * -12vh), 0) scale(calc(1.3 - var(--e, 1) * .3 + var(--p, 0) * .08)); opacity: clamp(0, calc(var(--e, 1) * 1.6 - .4 - var(--p, 0) * .6), 1);
  filter: blur(calc((1 - var(--e, 1)) * 6px + var(--p, 0) * 2px)) }
html[data-view="d"] .st-warn .st-chap-in { background: radial-gradient(ellipse at center, var(--danger-soft), transparent 70%) }
html[data-view="d"] .st-warn .st-title { color: var(--danger) }
html[data-view="d"] .st-warn .st-num { -webkit-text-stroke-color: var(--danger) }
html[data-view="d"] #s-mixing > :not(.st-chap):not(h2), html[data-view="d"] #s-risks > :not(.st-chap):not(h2) { border-left: 4px solid var(--warn) }

/* content fades and rises in as it scrolls into view */
html[data-view="d"] .st-rev { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1) }
html[data-view="d"] .st-rev.st-in { opacity: 1; transform: none }

/* progress bar and chapter rail */
html[data-view="d"] .st-bar { display: block; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 11; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--warn)) }
html[data-view="d"] .st-rail { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6 }
html[data-view="d"] .st-rail a { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); opacity: .6; transition: transform .2s, opacity .2s, background .2s }
html[data-view="d"] .st-rail a.st-warn { border-color: var(--danger) }
html[data-view="d"] .st-rail a.on { background: var(--accent); border-color: var(--accent); opacity: 1; transform: scale(1.35) }
html[data-view="d"] .st-rail a.st-warn.on { background: var(--danger); border-color: var(--danger) }
html[data-view="d"] .st-rail a:hover, html[data-view="d"] .st-rail a:focus-visible { opacity: 1 }
/* section name beside a rail dot on hover or keyboard focus (data-label = the section's h2) */
html[data-view="d"] .st-rail a { position: relative }
html[data-view="d"] .st-rail a::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; padding: 4px 9px; border-radius: 6px;
  font: 600 .78rem/1.2 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s }
html[data-view="d"] .st-rail a.st-warn::after { color: var(--danger); border-color: var(--danger) }
html[data-view="d"] .st-rail a.on::after { font-size: calc(.78rem / 1.35); padding: 3px 7px; left: calc(100% + 9px) }
html[data-view="d"] .st-rail a:hover::after, html[data-view="d"] .st-rail a:focus-visible::after { opacity: 1; transform: translate(0, -50%) }
@media (max-width: 760px) {
  html[data-view="d"] .st-rail { display: none }
  html[data-view="d"] .st-chap { height: 120svh }
  html[data-view="d"] .tiles { min-height: 0; padding-block: 8vh }
}

/* reduced motion: same slides and big type, nothing moves */
@media (prefers-reduced-motion: reduce) {
  html[data-view="d"] .st-rev { opacity: 1; transform: none; transition: none }
  html[data-view="d"] .st-chap { height: 100svh }
  html[data-view="d"] .st-num, html[data-view="d"] .st-title, html[data-view="d"] .titleblock h1, html[data-view="d"] .st-bg::before, html[data-view="d"] .st-bg::after { transform: none; opacity: 1; filter: none }
  html[data-view="d"] .st-num { transform: translate(-50%, -50%) }
  html[data-view="d"] .st-rail a, html[data-view="d"] .st-rail a::after { transition: none }
}
@media print { html[data-view="d"] .st-chap, html[data-view="d"] .st-rail, html[data-view="d"] .st-bar, html[data-view="d"] .st-bg { display: none } html[data-view="d"] .st-rev { opacity: 1; transform: none } }

/* Scroll story on/off switch in the Layout panel */
.viewswitch .vs-story { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px }
.vs-story .vs-knob { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--line); flex: none; transition: background .2s }
.vs-story .vs-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform .2s }
.viewswitch .vs-story[aria-checked="true"] { background: none; color: var(--ink); border-color: var(--accent) }
.vs-story[aria-checked="true"] .vs-knob { background: var(--accent) }
.vs-story[aria-checked="true"] .vs-knob::after { transform: translateX(12px) }
@media (prefers-reduced-motion: reduce) { .vs-story .vs-knob, .vs-story .vs-knob::after { transition: none } }

/* Effects chips (2026-10-27): the list's cited span is one block, so hover lights the whole list, not just its first line; each chip links to /effects/<effect>/ */
p > .claim:has(> .chips) { display: block; padding: 2px 4px; margin: 0 -4px }
a.chip { text-decoration: none; color: var(--ink); transition: border-color .12s, background .12s }
a.chip:hover, a.chip:focus-visible { border-color: var(--accent); background: var(--paper); color: var(--accent); outline: none }
.efflist { list-style: none; padding: 0; margin: 12px 0; columns: 2 220px; column-gap: 24px }
.efflist > li { break-inside: avoid; padding: 3px 0 }
.efflist .src { font: 600 .68rem var(--f-mono); margin-left: 4px }

/* Header nav: "How we cite" and "Edit log" live in the footer only (2026-10-27) */
.topnav a[href$="how-we-cite/"], .topnav a[href$="changelog/changelog.html"] { display: none }

/* Substance auto-links (2026-10-27): mentions of a substance that has its own page link to it. Lighter than normal links so prose stays easy to read: body-coloured text, thin faint underline, accent colour on hover. */
a.autolink { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent) }
a.autolink:hover, a.autolink:focus-visible { color: var(--accent); text-decoration-color: var(--accent) }

/* Fluid drops background (2026-10-27): site.js draws drops, splashes and ripples on this canvas, behind all page content. */
canvas.iw-fluid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block }
@media (prefers-reduced-motion: reduce) { canvas.iw-fluid { display: none } }
@media print { canvas.iw-fluid { display: none } }
/* header droplet button turns the drops off and on (site.js); it borrows the .htheme look */
.hfluid { margin-left: 6px }
.hfluid[aria-pressed="false"] { color: var(--muted); opacity: .6 }
.hfluid[data-bg="drops"] svg path:first-child { fill: color-mix(in srgb, var(--accent) 35%, transparent) }
@media (prefers-reduced-motion: reduce) { .hfluid { display: none } }
/* Heat haze background (2026-10-27): site.js draws the shimmer on this canvas when the header switch is on heat haze. Half resolution, stretched. */
canvas.iw-haze { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block }
canvas.iw-haze[hidden] { display: none }
@media (prefers-reduced-motion: reduce) { canvas.iw-haze { display: none } }
@media print { canvas.iw-haze { display: none } }
/* Fractal trail background (2026-10-27): site.js traces fractal curves with a fading ripple trail on this canvas when the header switch is on fractal trail. */
canvas.iw-trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block }
canvas.iw-trail[hidden] { display: none }
@media (prefers-reduced-motion: reduce) { canvas.iw-trail { display: none } }
@media print { canvas.iw-trail { display: none } }
/* Trail controls (2026-10-27): fold-out panel for the fractal trail, bottom left, shown by site.js only while the trail is on. */
.iw-tctl { position: fixed; left: 16px; bottom: 16px; z-index: 40; max-width: calc(100vw - 32px); font-size: .8rem; line-height: 1.3; color: var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.18); backdrop-filter: blur(6px) }
.iw-tctl[hidden] { display: none }
.iw-tctl-sum { cursor: pointer; padding: 7px 12px; font-weight: 600; color: var(--muted); list-style: none; user-select: none }
.iw-tctl-sum::-webkit-details-marker { display: none }
.iw-tctl-sum::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .15s }
.iw-tctl[open] > .iw-tctl-sum::before { transform: rotate(90deg) }
.iw-tctl-sum:hover, .iw-tctl-sum:focus-visible { color: var(--accent) }
.iw-tctl-body { width: 250px; max-width: 100%; padding: 2px 12px 12px; max-height: 60vh; overflow-y: auto }
.iw-tctl-row { display: block; margin: 8px 0 0 }
.iw-tctl-lbl { display: flex; justify-content: space-between; font-weight: 500; color: var(--muted) }
.iw-tctl-val { font: .74rem var(--f-mono); color: var(--ink) }
.iw-tctl input[type=range] { width: 100%; margin: 2px 0 0; accent-color: var(--accent) }
.iw-tctl select { width: 100%; margin-top: 3px; padding: 4px 6px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px }
.iw-tctl-seed { display: flex; gap: 6px; margin-top: 3px }
.iw-tctl-seed > input { flex: 1; min-width: 0; padding: 4px 6px; font: .76rem var(--f-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px }
.iw-tctl-seed > button, .iw-tctl-btns > button { padding: 5px 8px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer }
.iw-tctl-seed > button:hover, .iw-tctl-seed > button:focus-visible { border-color: var(--accent); color: var(--accent) }
.iw-tctl-btns { display: flex; gap: 8px; margin-top: 12px }
.iw-tctl-btns > button { flex: 1; padding: 5px 8px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer }
.iw-tctl-btns > button:hover, .iw-tctl-btns > button:focus-visible { border-color: var(--accent); color: var(--accent) }
@media (prefers-reduced-motion: reduce) { .iw-tctl { display: none } }
@media print { .iw-tctl { display: none } }
.iw-tctl-tabs { display: flex; gap: 4px; margin: 4px 0 6px; border-bottom: 1px solid var(--line) }
.iw-tctl-tab { flex: 1; padding: 6px 8px; margin-bottom: -1px; font: inherit; font-weight: 600; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px 6px 0 0; cursor: pointer }
.iw-tctl-tab[aria-selected="true"] { color: var(--ink); background: var(--bg); border-color: var(--line); border-bottom-color: var(--bg) }
.iw-tctl-tab:hover, .iw-tctl-tab:focus-visible { color: var(--accent); outline: none }
.iw-tctl-pane[hidden] { display: none }
.iw-tctl-chk { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-weight: 600; color: var(--ink); cursor: pointer }
.iw-tctl-chk > input { accent-color: var(--accent); margin: 0 }

/* Filled "Awaiting source" boxes and their editor (2026-10-27, site.js loader "Fill-in for Awaiting source boxes"). */
.pending { position: relative }
.pending.bxf { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: .92rem }
.pending.bxf .bxf-lbl { color: var(--muted) }
.pending.bxf p { margin: 0 0 8px } .pending.bxf p:last-of-type { margin-bottom: 0 }
.pending .bxf-src { font-size: .8rem; color: var(--muted); margin-top: 8px !important }
.pending.bxf-can { padding-right: 84px }
.pending.bxf-preview { outline: 2px dashed var(--accent); outline-offset: 3px }
.pending > .bxf-tag { display: inline-block; font: 600 .66rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--paper); background: var(--accent); padding: 1px 6px; border-radius: 4px; margin-bottom: 6px; font-style: normal }
.pending > .bxf-btn { position: absolute; top: 6px; right: 6px; font: 600 .72rem var(--f-body); padding: 3px 9px; border-radius: 5px; border: 1px solid currentColor; background: var(--paper); color: var(--accent); cursor: pointer }
.pending > .bxf-btn:hover, .pending > .bxf-btn:focus-visible { background: var(--accent); color: var(--paper) }
.bxf-ed { margin: 8px 0 14px; padding: 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: .88rem }
.bxf-ed .bxf-h { margin: 0 0 8px; font-weight: 600 }
.bxf-ed label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .8rem }
.bxf-ed textarea, .bxf-ed input { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; font: 400 .9rem/1.5 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px }
.bxf-ed textarea { resize: vertical; min-height: 110px }
.bxf-ed .bxf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
@media (max-width: 600px) { .bxf-ed .bxf-row { grid-template-columns: 1fr } }
.bxf-ed .bxf-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.bxf-ed .bxf-acts > button { font: 600 .82rem var(--f-body); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer }
.bxf-ed .bxf-acts > .bxf-save { background: var(--accent); border-color: var(--accent); color: var(--paper) }
.bxf-ed .bxf-acts > .bxf-clear { color: var(--warn); border-color: var(--warn) }
.bxf-ed .bxf-msg { font-size: .8rem; color: var(--muted) } .bxf-ed .bxf-msg.err { color: var(--danger) }
.bxf-flash { margin: 6px 0 12px; font-size: .82rem; color: var(--low) }
.bxf-bar { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 9999; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 .85rem var(--f-body); box-shadow: 0 6px 24px rgba(0,0,0,.35); max-width: calc(100% - 32px); flex-wrap: wrap }
.bxf-bar > button { font: inherit; padding: 5px 12px; border-radius: 6px; border: 0; background: var(--accent); color: var(--paper); cursor: pointer }
html.bxf-reader .bxf-ed { display: none }
@media print { .pending > .bxf-btn, .bxf-ed, .bxf-bar { display: none } }

/* Header menu (2026-10-27, site.js): one arrow button holds the header icons and nav links. .topnav is the panel. */
.hm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; line-height: 1 }
.hm-btn > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.hm-btn:hover, .hm-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent) }
.hm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.hm-btn > .hm-n { position: absolute; top: -.5em; right: -.55em; min-width: 1.3em; padding: 0 .3em; border-radius: 999px; background: #d33f49; color: #fff; font: 700 .68rem/1.3em var(--f-body); text-align: center }
@media (prefers-reduced-motion: no-preference) { .hm-btn > svg { transition: transform .15s } }
.hm-btn[aria-expanded="true"] > svg { transform: rotate(180deg) }
header.site .in > .hs-wrap { display: contents }
header.site .in > .hs-wrap > .hs-toggle { display: none }
header.site .in > .topnav.hm-panel { position: fixed; z-index: 30; top: 0; left: 0; right: auto; margin: 0; order: 0; width: max-content; min-width: 210px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: .9rem }
header.site .in > .topnav.hm-panel[hidden] { display: none }
header.site .hm-panel > * { order: 2 }
header.site .hm-panel > .hm-sep { order: 1; display: block; height: 1px; margin: 4px 2px; background: var(--line) }
header.site .hm-panel > .hm-i { order: 0 }
header.site .hm-panel > .hm-i, header.site .hm-panel > a { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; line-height: 1.2; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; opacity: 1 }
header.site .hm-panel > a:not(.hm-i) { color: var(--muted) }
header.site .hm-panel > .hm-i:hover, header.site .hm-panel > a:hover, header.site .hm-panel > .hm-i:focus-visible, header.site .hm-panel > a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); text-decoration: none; outline: none }
header.site .hm-panel > .hm-i > svg { flex: 0 0 auto; width: 16px; height: 16px }
header.site .hm-panel > .hm-search > svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round }
header.site .hm-panel > .hm-i > span { position: static; width: auto; height: auto; overflow: visible; clip: auto }
header.site .hm-panel > .hm-t::after { content: attr(title) }
header.site .hm-panel > .hfluid[aria-pressed="false"] { color: var(--muted) }
header.site .hm-panel > .hdm > .hdm-n { position: static; order: 2; margin-left: auto }
@media (max-width: 640px) {
  header.site { position: relative }
  header.site .in > .brand { order: -2 }
  header.site .in > .hm-btn { order: -1; margin-left: auto }
}

/* Reports menu (2026-10-30, site.js): second header dropdown left of the main arrow. */
header.site .in > .rp-wrap { flex: 0 0 auto; margin-left: 10px }
header.site .in > .rp-wrap ~ .hm-btn { margin-left: -6px }
.rp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; font: 600 .85rem/1.1 var(--f-body) }
.rp-btn > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.rp-btn > .rp-chev { width: 13px; height: 13px; stroke-width: 1.8 }
.rp-btn > b { font-weight: inherit }
.rp-btn:hover, .rp-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent) }
.rp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
@media (prefers-reduced-motion: no-preference) { .rp-btn > .rp-chev { transition: transform .15s } }
.rp-btn[aria-expanded="true"] > .rp-chev { transform: rotate(180deg) }
.rp-panel { position: fixed; z-index: 30; top: 0; left: 0; width: max-content; min-width: 210px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: .9rem }
.rp-panel[hidden] { display: none }
.rp-panel > a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink); line-height: 1.2; text-decoration: none; white-space: nowrap }
.rp-panel > a:hover, .rp-panel > a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); text-decoration: none; outline: none }
.rp-panel > a[aria-current="page"] { font-weight: 700 }
.rp-panel > .rp-sep { display: block; height: 1px; margin: 4px 2px; background: var(--line) }
@media (max-width: 640px) {
  header.site .in > .rp-wrap { order: -1; margin-left: auto }
  header.site .in > .rp-wrap ~ .hm-btn { margin-left: 0 }
  .rp-btn > b { display: none }
}
/* Header links (2026-10-31, site.js): Forum, All compounds, Reports as plain links left of the Reports dropdown.
   Phones: their own row under the brand row, shared equally. */
header.site .in > .hq-links { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-left: auto }
header.site .in > .hq-links + .rp-wrap { margin-left: 4px }
header.site .in > .hq-links + .rp-wrap .rp-btn > b { display: none }
.hq-links > a { padding: 7px 10px; border-radius: 8px; color: var(--ink); font: 600 .88rem/1.1 var(--f-body); text-decoration: none; white-space: nowrap }
.hq-links > a:hover, .hq-links > a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); text-decoration: none; outline: none }
.hq-links > a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent) }
@media (max-width: 640px) {
  header.site .in > .hq-links { order: 0; flex: 1 0 100%; margin: 0; gap: 6px }
  header.site .in > .hq-links ~ .tagline, header.site .in > .tagline { order: 1 }
  header.site .in > .hq-links + .rp-wrap { margin-left: auto }
  .hq-links > a { flex: 1 1 0; padding: 8px 6px; border: 1px solid var(--line); background: var(--bg); text-align: center; font-size: .85rem }
}
/* footer background at half strength so the page background shows through (2026-10-28); text stays full strength */
footer.site { background: color-mix(in srgb, var(--paper) 50%, transparent) }
/* background structures are links to their substance pages (site.js); a hand shows over them in open space */
html.iw-mol-hover, html.iw-mol-hover * { cursor: grab }   /* a grab hand: a single click no longer opens the page (double-click does) */
html.iw-mol-drag, html.iw-mol-drag * { cursor: grabbing !important; user-select: none }

/* "Current danger" flag (2026-10-28): alert on substance pages, staff toggle bar, homepage list. Loader at end of site.js. */
.dgr-alert { margin: 12px 0 16px; padding: 10px 14px; border: 1px solid #c0392b; border-left: 6px solid #c0392b; border-radius: 0 8px 8px 0; background: color-mix(in srgb, #c0392b 10%, var(--paper)); color: var(--ink) }
.dgr-alert p { margin: 4px 0 }
.dgr-alert .dgr-h { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: .9rem; color: #c0392b }
.dgr-alert .dgr-note { border-top: 1px solid color-mix(in srgb, #c0392b 30%, transparent); margin-top: 6px; padding-top: 4px }
.dgr-alert .dgr-src { font-size: .88rem; color: var(--muted) }
.dgr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 }
.dgr-bar button { font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer }
.dgr-bar .dgr-btn { border-color: #c0392b; color: #c0392b }
.dgr-bar .dgr-btn[aria-pressed="true"] { background: #c0392b; color: #fff }
.dgr-bar .err, .dgr-ed .err { color: #c0392b }
.dgr-bar .dgr-log { flex-basis: 100%; font-size: .85rem }
.dgr-bar .dgr-log ul { margin: 4px 0; padding-left: 18px }
.dgr-ed { flex-basis: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper) }
.dgr-ed label { display: block; font-size: .85rem; font-weight: 600; margin: 6px 0 }
.dgr-ed textarea, .dgr-ed input { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink) }
.dgr-ed .dgr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
@media (max-width: 560px) { .dgr-ed .dgr-row { grid-template-columns: 1fr } }
.dgr-ed .dgr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px }
.dgr-home { border-left: 6px solid #c0392b }
.dgr-home h2 { color: #c0392b }
.dgr-home .dgr-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px }
.dgr-home .dgr-list > li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper) }
.dgr-home .dgr-list > li > a { font-weight: 700 }
.dgr-home .dgr-li-note { display: block; margin-top: 3px; font-size: .9rem; color: var(--muted) }

/* Recent deaths in medical journals (fatal-cases loader in site.js) */
.fcr{margin:14px 0 18px;padding:12px 16px;border:1px solid rgba(200,60,60,.45);border-left:4px solid #c83c3c;border-radius:10px;background:rgba(200,60,60,.06)}
.fcr h2{margin:0 0 4px;font-size:1.1rem}
.fcr > p{margin:4px 0}
.fcr-list{margin:6px 0;padding-left:20px}
.fcr-list li{margin:4px 0;line-height:1.4}
.fcr-more summary{cursor:pointer;font-size:.9rem}

/* Homepage "What's on a page" / "How to check us": keep content at the top when the other column is taller (2026-10-28) */
.home-grid > .blk, .home .home-grid .blk ul { align-content: start }

/* Homepage "What's on a page" + "How to check us" (2026-10-28): two equal-width, equal-height cards with backgrounds in
   every layout. The full-article layout's sidebar rule had made the right box narrow and stripped the card look. */
html[data-view] .layout.home-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch }
@media (max-width: 760px) { html[data-view] .layout.home-grid { grid-template-columns: minmax(0,1fr) } }
html[data-view] .layout.home-grid > .blk { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px }

/* Full-article layout (B) cards (2026-10-28): its sections had no background by design, which read as missing panels over the light pastel bands. Same card look as the other layouts. */
html[data-view="b"] .blk { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px }

/* No page jump on load (2026-10-30): hold the room that site.js and safety-notice.js fill in after first paint.
   Header row = height of the menu button (.hm-btn, 32px); the empty Transparency nav no longer takes a row on phones
   (its links are hidden and site.js moves it into the menu); the tagline keeps its styled line height; the dose
   safety notice keeps the size it has once the emergency numbers load (3-line countries). */
header.site .in::before { content: ""; order: -3; width: 0; height: 32px; margin-right: -16px }
header.site .in > .topnav:not(.hm-panel) { display: none }
@media (max-width: 640px) { header.site .in > .tagline { min-height: 1.25rem } header.site .in > .brand { margin-right: auto } }
.safety-notice[data-variant="dose"]:empty { min-height: 184px }
@media (max-width: 714px) { .safety-notice[data-variant="dose"]:empty { min-height: 206px } }
@media (max-width: 648px) { .safety-notice[data-variant="dose"]:empty { min-height: 228px } }
@media (max-width: 540px) { .safety-notice[data-variant="dose"]:empty { min-height: 250px } }
@media (max-width: 516px) { .safety-notice[data-variant="dose"]:empty { min-height: 271px } }
@media (max-width: 468px) { .safety-notice[data-variant="dose"]:empty { min-height: 293px } }
@media (max-width: 396px) { .safety-notice[data-variant="dose"]:empty { min-height: 315px } }
@media (max-width: 370px) { .safety-notice[data-variant="dose"]:empty { min-height: 337px } }
@media (max-width: 362px) { .safety-notice[data-variant="dose"]:empty { min-height: 359px } }
/* Substance pages: site.js adds the Drug of Choice, 3D structure and Experience reports buttons under the title and
   folds the Wikipedia box to one line. Until it does, the Wikipedia box starts folded and sits where it ends up. */
.wikibar:not(.wb-collapsible) { padding: 6px 12px }
.wikibar:not(.wb-collapsible) > .why { display: none }
.titleblock { --iw-rg: 8px; --iw-doch: 39px }
@media (max-width: 730px) { .titleblock { --iw-doch: 66px } }
@media (max-width: 482px) { .titleblock { --iw-doch: 93px } }
html[data-view="d"] .titleblock { --iw-rg: 14px }
main.page:has(> .safety-notice[data-variant="dose"]) > .titleblock:not(:has(> .docbox)) { --iw-r1: calc(var(--iw-doch) + 10px + var(--iw-rg)) }
main.page:has(> .safety-notice[data-variant="dose"]):has(a[href^="https://pubchem.ncbi.nlm.nih.gov/compound/"]) > .titleblock:not(:has(> .molbox:not(.xrbox))) { --iw-r2: calc(47px + var(--iw-rg)) }
main.page:has(> .safety-notice[data-variant="dose"]) > .titleblock:not(:has(> .xrbox)) { --iw-r3: calc(47px + var(--iw-rg)) }
main.page > .titleblock > .wikibar { margin-top: calc(var(--iw-r1, 0px) + var(--iw-r2, 0px) + var(--iw-r3, 0px)) }
.hero, .titleblock { grid-template-columns: minmax(0, 1fr) }

/* Documented overdoses in medical journals (overdose-cases loader in site.js, /documented-overdoses/): amber version of .fcr */
.fcr.ocr{border-color:rgba(214,140,30,.5);border-left-color:#d68c1e;background:rgba(214,140,30,.07)}

/* Infobox: let long values (systematic names, IUPAC) wrap; glint words are nowrap elsewhere (2026-10-30) */
.infobox .gl-w, dl.kv .gl-w { white-space: normal !important }

/* Footer link groups (2026-10-30): set up by the "Footer link groups" block at the end of site.js */
footer.site nav.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; align-items: start }
footer.site nav.fgrid > .fg[hidden], footer.site nav.fgrid > .fg-row[hidden] { display: none }
footer.site .fg-h { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
footer.site .fg-l { display: flex; flex-direction: column; align-items: flex-start; gap: 5px }
footer.site .fg-l .iw-viewas { flex-wrap: wrap }
footer.site .fg-l .iw-viewas select { max-width: 100% }
footer.site .fg-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line) }
@media (max-width: 420px) { footer.site nav.fgrid { grid-template-columns: 1fr 1fr; gap: 14px 16px } }
/* Monero address in the footer (2026-10-31): set up by the "Monero address" block in site.js */
footer.site .iw-xmr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; margin-top: 2px }
footer.site .iw-xmr .xmr-a { display: block; max-width: 100%; font-size: .7rem; line-height: 1.35; word-break: break-all; user-select: all; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper) }
footer.site .iw-xmr .xmr-c { font: inherit; font-size: .78rem; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer }

/* Community thread analyses box (thread-reports loader in site.js): light-blue version of .fcr. The boxes under the
   title (Recent deaths, Documented overdoses, thread reports) sit 10px apart: .page is a grid with an 18px gap, so the
   upper box drops its bottom margin and the lower one pulls up 8px (view d has no grid gap). */
.fcr.trr{border-color:rgba(60,140,220,.5);border-left-color:#3c8cdc;background:rgba(60,140,220,.08)}
.fcr:has(+ .fcr){margin-bottom:0}
.fcr + .fcr{margin-top:-8px}
html[data-view="d"] .fcr + .fcr{margin-top:10px}

/* Owner-only dosage table editor (2026-10-31), see the matching loader at the end of site.js. */
#s-dose table.dte-preview { outline: 2px dashed var(--accent); outline-offset: 3px }
#s-dose .dte-src { display: block; font: 400 .72rem var(--f-body); color: var(--muted); margin-top: 2px }
#s-dose .dte-note { margin: 4px 0 12px } #s-dose .dte-note p { margin: 4px 0 0 }
#s-dose .dte-tag { display: inline-block; font: 600 .66rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--paper); background: var(--accent); padding: 1px 6px; border-radius: 4px; font-style: normal }
.dte-bar { margin: 4px 0 12px }
.dte-btn { font: 600 .74rem var(--f-body); padding: 3px 10px; border-radius: 5px; border: 1px solid currentColor; background: var(--paper); color: var(--accent); cursor: pointer }
.dte-btn:hover, .dte-btn:focus-visible { background: var(--accent); color: var(--paper) }
.dte-ed { margin: 8px 0 16px; padding: 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: .86rem }
.dte-ed .dte-h { margin: 0 0 8px; font-weight: 600 }
.dte-ed .dte-grid { overflow-x: auto; margin-bottom: 6px }
.dte-ed .dte-grid table { border-collapse: collapse; min-width: 100%; width: auto }
.dte-ed .dte-grid th, .dte-ed .dte-grid td { padding: 2px; border: 0; background: none; font-size: .74rem; text-align: left; vertical-align: middle }
.dte-ed input, .dte-ed textarea { box-sizing: border-box; width: 100%; min-width: 92px; font: 400 .84rem/1.4 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px }
.dte-ed .dte-hd { font-weight: 600 }
.dte-ed label { display: block; margin: 6px 0 8px; font-weight: 600; font-size: .8rem }
.dte-ed textarea { display: block; margin-top: 3px; resize: vertical }
.dte-ed button { font: 600 .8rem var(--f-body); padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer }
.dte-ed .dte-del { padding: 2px 8px; color: var(--danger); border-color: var(--danger) }
.dte-ed .dte-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.dte-ed .dte-save { background: var(--accent); border-color: var(--accent); color: var(--paper) }
.dte-ed .dte-clear { color: var(--warn); border-color: var(--warn) }
.dte-ed .dte-msg { font-size: .8rem; color: var(--muted) } .dte-ed .dte-msg.err { color: var(--danger) }
.dte-flash { margin: 6px 0 12px; font-size: .82rem; color: var(--low) }
@media print { .dte-bar, .dte-ed { display: none } }

/* Reader-picked report links (2026-10-31): the yellow "Awaiting source" boxes in the User reports columns are hidden
   (a staff-written fill, .bxf, still shows) along with the label above them; site.js adds the "Add your favorite"
   buttons, the reader picks and the red warning. */
#s-reports .pending:not(.bxf) { display: none }
#s-reports .label:has(+ .pending:not(.bxf)) { display: none }
.urx-warn { border: 2px solid var(--danger); background: var(--danger-soft); color: var(--ink); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px }
.urx-warn p { margin: 4px 0 }
.urx-warn .urx-warn-h, .urx-warn > p:first-child { color: var(--danger); font-weight: 800; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .01em }
.urx { display: grid; gap: 8px }
.urx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.urx-it { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; overflow-wrap: anywhere }
.urx-it > a:first-child { flex: 1 1 100% }
.urx-meta { color: var(--muted); font-size: .78rem }
.urx-tag { font: 600 .68rem var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--pending); border: 1px dashed var(--pending); border-radius: 4px; padding: 1px 5px }
.urx-wait > a:first-child { opacity: .8 }
.urx-acts { display: inline-flex; gap: 6px }
.urx-acts button, .urx-row button { font-size: .8rem; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer }
.urx-add { justify-self: start; font-size: .85rem; padding: 6px 12px; border-radius: 6px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--ink); cursor: pointer }
.urx-add::before { content: "+ " }
.urx-f { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--paper) }
.urx-f label { display: grid; gap: 3px; font-size: .85rem }
.urx-f input { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink) }
.urx-f p { margin: 0 }
.urx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.urx-row button:first-child { border-color: var(--accent); background: var(--accent); color: var(--paper) }
.urx-msg.err { color: var(--danger) }
.urx-ok { color: var(--low); margin: 0 }

/* Owner-only section editor (2026-10-31), see the matching loader at the end of site.js. */
section.sec-can { position: relative }
.sec-bar { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 8px; align-items: center; font: 400 .72rem var(--f-body); color: var(--muted) }
.sec-bar > button { font: 600 .72rem var(--f-body); padding: 3px 9px; border-radius: 5px; border: 1px solid currentColor; background: var(--paper); color: var(--accent); cursor: pointer }
.sec-bar > button:hover, .sec-bar > button:focus-visible { background: var(--accent); color: var(--paper) }
section.sec-editing { outline: 2px dashed var(--accent); outline-offset: 4px }
.sec-ui .sec-tools { position: sticky; top: 60px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 0 0 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft) }
.sec-ui button { font: 600 .78rem var(--f-body); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer }
.sec-ui .sec-src { margin-left: auto } .sec-ui .sec-src[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent) }
.sec-ui .sec-body { display: grid; gap: 10px; min-width: 0; min-height: 80px; outline: none; cursor: text }
.sec-ui .sec-body:focus { box-shadow: inset 0 0 0 1px var(--line) }
.sec-ui .sec-html { display: block; width: 100%; box-sizing: border-box; font: 400 .8rem/1.5 var(--f-mono); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px; resize: vertical }
.sec-ui .sec-acts { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft) }
.sec-ui .sec-save { background: var(--accent); border-color: var(--accent); color: var(--paper) }
.sec-ui .sec-clear { color: var(--warn); border-color: var(--warn) }
.sec-ui .sec-msg { font-size: .8rem; color: var(--muted) } .sec-ui .sec-msg.err { color: var(--danger) }
@media print { .sec-bar, .sec-ui .sec-tools, .sec-ui .sec-acts { display: none } }

/* Header Log out item (2026-10-31, site.js) */
header.site .hm-panel > .hlogout { color: var(--muted) }
header.site .hm-panel > .hlogout:hover, header.site .hm-panel > .hlogout:focus-visible { color: #d64545; background: color-mix(in srgb, #d64545 14%, transparent) }

/* Route and dose-level definitions (site.js, 2026-10-31): dotted underline on the term, one floating box for the quote */
.iw-def { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: help; border-radius: 2px }
.iw-def:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
#iw-tip { position: fixed; z-index: 2147483000; max-width: min(340px, calc(100vw - 16px)); box-sizing: border-box; padding: 10px 12px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  font: 400 .84rem/1.45 var(--f-body); text-align: left; text-transform: none; letter-spacing: normal; white-space: normal }
#iw-tip[hidden] { display: none }
#iw-tip > span, #iw-tip > b { display: block }
#iw-tip .iw-tip-h { font-weight: 700; margin-bottom: 3px }
#iw-tip .iw-tip-src { margin-top: 6px; font-size: .74rem; color: var(--muted) }
#iw-tip .iw-tip-src a { color: var(--accent) }
@media (max-width: 640px) {
  table.stack td.iw-dlab::before { text-decoration: underline dotted; text-underline-offset: .18em; cursor: help }
}
/* Trail controls: Nerd stats tab (2026-10-31) */
.iw-nerd-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0 }
.iw-nerd-dl > dt { color: var(--muted); font-weight: 500 }
.iw-nerd-dl > dd { margin: 0; text-align: right; font: .76rem var(--f-mono); color: var(--ink); overflow-wrap: anywhere }
.iw-nerd-h { margin: 10px 0 2px; font-weight: 600; color: var(--ink) }
.iw-nerd-top { margin: 0; padding-left: 18px }
.iw-nerd-top > li { margin: 2px 0 }
.iw-nerd-top > li > span { display: block; color: var(--muted); font-size: .72rem }
.iw-nerd-note { margin: 10px 0 0; font-size: .72rem; color: var(--muted) }
.iw-tctl-body { width: 270px }
.iw-tctl-tab { padding: 6px 4px; white-space: nowrap }

/* Sources map (2026-10-31): toggle in References + canvas graph from assets/srcgraph.js */
.sg-wrap { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper) }
.sg-wrap > summary { cursor: pointer; padding: 10px 14px; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px }
.sg-wrap > summary::-webkit-details-marker { display: none }
.sg-wrap > summary::before { content: "▸"; color: var(--accent); transition: transform .2s; display: inline-block }
.sg-wrap[open] > summary::before { transform: rotate(90deg) }
.sg-sum { font-family: var(--f-display); color: var(--accent) }
.sg-sum-sub { color: var(--muted); font-size: .82rem }
.sg-panel { padding: 0 12px 12px; color: var(--muted); font-size: .85rem }
.sg-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px }
.sg-legend, .sg-tools { display: flex; flex-wrap: wrap; gap: 6px }
.sg-key, .sg-tb, .sg-btn, .sg-chip, .sg-spot, .sg-x { font: inherit; font-size: .8rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px }
.sg-key[aria-pressed="false"] { opacity: .45; text-decoration: line-through }
.sg-key > i, .sg-chip > i, .sg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none }
.sg-tb { min-width: 32px; justify-content: center; font-weight: 600 }
.sg-key:hover, .sg-tb:hover, .sg-btn:hover, .sg-chip:hover, .sg-spot:hover { border-color: var(--accent) }
.sg-stage { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg) }
.sg-canvas { display: block; width: 100%; height: 420px; touch-action: none; user-select: none; -webkit-user-select: none }
.sg-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.sg-hint { position: absolute; left: 10px; bottom: 6px; margin: 0; font-size: .75rem; color: var(--muted); pointer-events: none; transition: opacity .6s }
.sg-hint.sg-gone { opacity: 0 }
.sg-card { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink) }
.sg-ch { display: flex; align-items: flex-start; gap: 8px }
.sg-ch > strong { flex: 1; min-width: 0; overflow-wrap: anywhere }
.sg-dot { margin-top: 5px }
.sg-x { padding: 0 8px; font-size: 1rem; line-height: 1.4 }
.sg-meta, .sg-sub { margin: 4px 0; color: var(--muted); font-size: .8rem }
.sg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 }
.sg-btn { color: var(--accent); font-weight: 600 }
.sg-spots, .sg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.sg-spots { flex-direction: column }
.sg-spot { border-radius: 8px; text-align: left; display: block; width: 100%; white-space: normal }
.sg-spot > em { font-style: normal; font-weight: 600; color: var(--accent) }
.sg-chip { text-align: left; white-space: normal }
@keyframes sgFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); background-color: color-mix(in srgb, var(--accent) 18%, transparent) } 100% { box-shadow: 0 0 0 3px transparent } }
.sg-flash { animation: sgFlash 2.2s ease-out; border-radius: 4px }
@media (max-width: 560px) { .sg-panel { padding: 0 8px 10px } .sg-bar { flex-direction: column } }
@media (prefers-reduced-motion: reduce) { .sg-flash { animation: none; outline: 3px solid var(--accent) } .sg-wrap > summary::before, .sg-hint { transition: none } }

/* Floating "Report" button + pop-out box (2026-10-31), bottom right of every page. Classes only (letter glint rule). */
.iw-fr { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: .85rem; line-height: 1.35 }
.iw-fr-btn { order: 2; display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--f-mono, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 6px; box-shadow: 0 4px 18px rgba(0,0,0,.2); backdrop-filter: blur(6px); cursor: pointer }
.iw-fr-btn:hover, .iw-fr.on .iw-fr-btn { color: var(--accent); border-color: var(--accent) }
.iw-fr-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--paper); font: 700 .8rem/1 system-ui, sans-serif }
.iw-fr-pop { order: 1; width: min(320px, calc(100vw - 32px)); box-sizing: border-box; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.25); padding: 10px 12px 12px; margin: 0 }
.iw-fr-pop[hidden] { display: none }
.iw-fr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px }
.iw-fr-x { font: inherit; font-size: 1.2rem; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px }
.iw-fr-x:hover { color: var(--accent) }
.iw-fr-l { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 4px }
.iw-fr-pop textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink) }
.iw-fr-page { margin: 4px 0 8px; font-size: .72rem; color: var(--muted); overflow-wrap: anywhere }
.iw-fr-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.iw-fr-send { font: inherit; font-weight: 600; padding: 5px 14px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--paper); cursor: pointer }
.iw-fr-send:disabled { opacity: .6; cursor: default }
.iw-fr-msg { color: var(--muted); flex: 1 1 120px } .iw-fr-msg.err { color: var(--warn, #c33) }
/* "Beta-testers" label floating to the left of the button; hidden while the box is open. */
.iw-fr-tip { position: absolute; right: calc(100% + 10px); bottom: 4px; white-space: nowrap; font-weight: 600; font-size: .8rem; color: var(--paper); background: var(--accent); padding: 5px 10px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.22); cursor: pointer; animation: iwFrBob 3s ease-in-out infinite }
.iw-fr-tip::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: var(--accent) }
.iw-fr.on .iw-fr-tip { display: none }
@keyframes iwFrBob { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(-4px) } }
@media (prefers-reduced-motion: reduce) { .iw-fr-tip { animation: none } }
@media (max-width: 560px) { .iw-fr-lbl { display: none } .iw-fr-btn { padding: 6px } .iw-fr-tip { white-space: normal; width: 9.5em; font-size: .7rem; line-height: 1.25; padding: 4px 8px; bottom: 0 } }
@media print { .iw-fr { display: none } }

/* Report photos + "Report element" chip in the floating Report box (2026-11-04). */
.iw-fr-el { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 5px 8px; font-size: .74rem; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; overflow-wrap: anywhere }
.iw-fr-el[hidden] { display: none }
.iw-fr-el > span { flex: 1 1 auto }
.iw-fr-elx { font: inherit; font-size: 1rem; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px }
.iw-fr-phs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px }
.iw-fr-add { position: relative; display: inline-block; font-size: .76rem; font-weight: 600; color: var(--accent); border: 1px dashed var(--accent); border-radius: 6px; padding: 3px 8px; cursor: pointer }
.iw-fr-add[hidden] { display: none }
.iw-fr-add input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden }
.iw-fr-add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px }
.iw-fr-phn { font-size: .68rem; color: var(--muted) }
.iw-fr-thumbs { display: flex; gap: 6px; flex-basis: 100% }
.iw-fr-thumbs:empty { display: none }
.iw-fr-th { position: relative; display: block; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg) }
.iw-fr-th > img { width: 100%; height: 100%; object-fit: cover; display: block }
.iw-fr-th > button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; font: 700 .8rem/18px system-ui, sans-serif; background: rgba(0,0,0,.65); color: #fff; cursor: pointer }

/* Site-wide right-click menu (2026-11-04). */
.iw-cm { position: fixed; z-index: 1000; min-width: 210px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 5px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.28); font: .84rem/1.3 var(--f-body, system-ui, sans-serif) }
.iw-cm > button { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 5px; padding: 7px 10px; cursor: pointer }
.iw-cm > button:hover, .iw-cm > button:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none }
.iw-cm > .iw-cm-rep { font-weight: 600; color: var(--warn) }
.iw-cm-hint { display: block; margin-top: 4px; padding: 5px 10px 2px; border-top: 1px solid var(--line); font-size: .68rem; color: var(--muted) }
.iw-cm-hl { outline: 2px dashed var(--warn) !important; outline-offset: 2px }
/* Right-click + drag selection box (2026-11-10): the box being drawn, and the elements that will go in the report */
.iw-rs { position: fixed; z-index: 999; pointer-events: none; box-sizing: border-box; border: 2px dashed var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 3px }
.iw-rs-on { outline: 2px solid var(--warn) !important; outline-offset: 1px }
@media print { .iw-rs { display: none } }
@media print { .iw-cm { display: none } }


/* Edge vignette (2026-11-10): a soft shade along the window edges, above everything but click-through */
html::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: radial-gradient(ellipse 115% 105% at 50% 45%, transparent 45%, rgba(30,16,52,.16) 70%, rgba(30,16,52,.42) 100%);
  box-shadow: inset 0 0 160px rgba(30,16,52,.30) }
@media print { html::after { display: none } }

/* Title light (2026-11-10): with the Fractal trail background on, the moving point is the light source for the page title's
   shadow. site.js sets --lt-x/--lt-y (offset away from the point), --lt-b (blur), --lt-a (darkness), --lt-c (long tail) and
   --lt-h (a faint highlight on the lit side) on main h1 every frame. Off = no shadow, as before. */
html.iw-lit main h1 {
  text-shadow:
    calc(var(--lt-x, 0px) * -0.12) calc(var(--lt-y, 0px) * -0.12) 0 rgba(255,255,255,var(--lt-h, 0)),
    var(--lt-x, 0px) var(--lt-y, 0px) var(--lt-b, 2px) rgba(30,24,55,var(--lt-a, 0)),
    calc(var(--lt-x, 0px) * var(--lt-c, 1.6)) calc(var(--lt-y, 0px) * var(--lt-c, 1.6)) calc(var(--lt-b, 2px) * 2.2) rgba(30,24,55,calc(var(--lt-a, 0) * 0.4))
}
html.iw-lit main h1 .wc { text-shadow: none }
/* the slide layout's gradient title has see-through letters, where a shadow would show through them */
html.iw-lit[data-view="d"] .titleblock h1 { text-shadow: none }

/* Two-column header menu (2026-11-10, option A): Reports column on the left of the arrow menu (site.js "Two-column header menu").
   Grid: the Reports column spans every row; the last row is 1fr so a tall Reports column never stretches the right-hand rows. */
header.site .in > .topnav.hm-panel.hm-2col { display: grid; grid-template-columns: max-content max-content; grid-template-rows: repeat(39, auto) 1fr; column-gap: 6px; row-gap: 2px; align-content: start; max-height: calc(100vh - 70px); overflow-y: auto }
header.site .in > .topnav.hm-panel.hm-2col[hidden] { display: none }
header.site .hm-panel.hm-2col > * { grid-column: 2 }
header.site .hm-panel.hm-2col > .hm-rcol { grid-column: 1; grid-row: 1 / span 40; order: -10; display: flex; flex-direction: column; gap: 2px; padding-right: 6px; border-right: 1px solid var(--line) }
header.site .hm-panel > .hm-rcol > a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink); line-height: 1.2; text-decoration: none; white-space: nowrap }
header.site .hm-panel > .hm-rcol > a:hover, header.site .hm-panel > .hm-rcol > a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); text-decoration: none; outline: none }
header.site .hm-panel > .hm-rcol > a[aria-current="page"] { font-weight: 700 }
header.site .hm-panel > .hm-rcol > .rp-sep { display: block; height: 1px; margin: 4px 2px; background: var(--line) }
header.site .hm-panel.hm-2col .hm-h { display: block; padding: 8px 10px 4px; color: var(--muted); font: 600 .7rem/1.2 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase }
header.site .hm-panel.hm-2col > .hm-h-you { order: -5 }
header.site .hm-panel.hm-2col > .hm-i.hacct, header.site .hm-panel.hm-2col > .hm-i.hdm, header.site .hm-panel.hm-2col > .hm-i.hlogout { order: -4 }
header.site .hm-panel.hm-2col > .hm-sep2 { order: -3; display: block; height: 1px; margin: 4px 2px; background: var(--line) }
header.site .hm-panel.hm-2col > .hm-h-site { order: -2 }
@media (max-width: 560px) {
  header.site .hm-panel > .hm-rcol > a, header.site .hm-panel.hm-2col > .hm-i, header.site .hm-panel.hm-2col > a { white-space: normal }
  header.site .in > .topnav.hm-panel.hm-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: calc(100vw - 16px); font-size: .85rem }
}