:root {
  --bg: #fafaf7; --fg: #1d1d1b; --muted: #5d5d57; --line: #e2e1da; --card: #fff;
  --accent: #1f5f8b; --warn-bg: #fff4e5; --warn-fg: #7a3e00;
  --strong: #1e6b3a; --medium: #7a5a00; --weak: #5d5d57; --danger: #8a2f2f; --field: #8a8983;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151514; --fg: #ecebe6; --muted: #a5a49d; --line: #33322f; --card: #1e1e1c;
          --accent: #7fb8e0; --warn-bg: #3a2a14; --warn-fg: #ffd59e;
          --strong: #7fd29a; --medium: #e8c46a; --weak: #a5a49d; --danger: #f19a9a; --field: #6a6964; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
header.site { border-bottom: 1px solid var(--line); padding: 1.25rem 0 0; }
h1 { margin: 0; font-size: 1.6rem; }
.tag { margin: .25rem 0 1rem; color: var(--muted); }
nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.tab { min-height: 44px; display: inline-flex; align-items: center; padding: .5rem .6rem; border-radius: .5rem .5rem 0 0; color: var(--muted); text-decoration: none; }
.tab:hover { color: var(--fg); }
.tab[aria-current="page"] { color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-bottom-color: var(--bg); margin-bottom: -1px; font-weight: 600; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.disclaimer { background: var(--warn-bg); color: var(--warn-fg); padding: .6rem .9rem; border-radius: .5rem; margin: 1rem 0; }
.panel h2 { font-size: 1.25rem; }
.panel:focus { outline: none; }
form[role="search"] { display: flex; gap: .5rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: .55rem .7rem; border: 1px solid var(--field); border-radius: .5rem; background: var(--card); color: var(--fg); min-height: 44px; }
#q { flex: 1; font-size: 1.05rem; }
button { min-height: 44px; padding: .5rem 1rem; border-radius: .5rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .9; cursor: progress; }
@media (prefers-color-scheme: dark) { button { color: #0d1b26; } }
.chip { background: transparent; color: var(--accent); border-color: var(--line); padding: .25rem .7rem; min-height: 44px; margin: .15rem; }
.examples { color: var(--muted); }
.muted, .hint { color: var(--muted); }
.hint { display: block; font-size: .9rem; margin-top: .25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: .9rem 1rem; margin: .75rem 0; }
.redflags { border-left: 4px solid var(--danger); }
.redflags h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--danger); }
.cause h4 { margin: 0; font-size: 1.05rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.bar { height: 6px; border-radius: 3px; background: var(--line); margin: .4rem 0; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.badge { font-size: .78rem; padding: .05rem .5rem; border-radius: 1rem; border: 1px solid currentColor; font-weight: 600; }
.badge.strong { color: var(--strong); } .badge.medium { color: var(--medium); } .badge.weak { color: var(--weak); border-style: dashed; }
.meta { font-size: .9rem; color: var(--muted); margin: .3rem 0 0; }
.genes code { font-size: .85rem; }
details summary { cursor: pointer; color: var(--accent); margin-top: .2rem; padding: .6rem 0; min-height: 44px; }
.filters { margin: .75rem 0; }
.filters select { margin-left: .5rem; max-width: 100%; }
.filters label { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.book { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: 0 1.1rem; }
.book:empty { display: none; }
.book blockquote { margin: 1rem 0 .3rem; padding-left: .9rem; border-left: 3px solid var(--accent); font-size: 1.08rem; }
.book ul { padding-left: 1.1rem; }
.book li { margin: .2rem 0; }
#share-form label { display: block; margin: .6rem 0 .2rem; }
#share-form textarea { width: 100%; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.row label, .row .field { flex: 1 1 10rem; }
.row input { width: 100%; }
.consent { display: flex !important; gap: .5rem; align-items: center; min-height: 44px; }
.consent input { min-height: auto; width: 1.2rem; height: 1.2rem; }
.error { color: var(--danger); }
footer { padding: 2rem 1rem; font-size: .9rem; }
footer a { display: inline-block; padding: .6rem .25rem; }   /* 44px tap targets */
.redflags .emergency { margin-top: .4rem; }
.legend { font-size: .9rem; color: var(--muted); margin: -.4rem 0 .5rem; }
.legend-bar { display: inline-block; width: 2rem; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; }
.success { border-left: 4px solid var(--strong); }
.book .badge { font-style: normal; white-space: nowrap; }
@media (max-width: 480px) { .tab { font-size: .95rem; } }

/* share form */
.share-rules { padding-left: 1.2rem; margin: 0 0 1rem; }
.share-rules li { margin: .25rem 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* spam trap: humans never see it */

/* moderation page */
[hidden] { display: none !important; }
.admin-unlock input { flex: 1; }
.admin-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.admin-bar label { display: flex; align-items: center; gap: .5rem; }
.admin-bar #stats { margin: 0; flex: 1 1 16rem; }
.admin-bar #lock { margin-left: auto; }
#queue:focus { outline: none; }
.mod-text { white-space: pre-wrap; font-size: 1.05rem; margin-top: 0; }
.mod-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
button.secondary { background: transparent; color: var(--accent); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }

/* privacy page */
.h1 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.h1 .home { color: var(--fg); text-decoration: none; }
.h1 .home:hover { text-decoration: underline; }
.prose { padding-bottom: 1rem; }
.prose h1 { font-size: 1.5rem; margin: 1.25rem 0 .25rem; }
.prose h2 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; }
.prose .card h2 { margin-top: 0; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: .3rem 0; }
.prose p, .prose li { max-width: 70ch; }
.prose code { font-size: .95em; }

/* idiom atlas */
.idiom-echo { border-left: 4px solid var(--accent); padding: .1rem 0 .1rem .8rem; margin: .5rem 0; }
.idiom-echo q { font-weight: 600; }
.also-said { margin: .25rem 0 .5rem; }
.also-said ul { list-style: none; padding: 0; margin: .25rem 0; }
.also-said li { margin: .35rem 0; }
.also-said li a { display: inline-flex; align-items: center; min-height: 44px; }   /* 44px tap targets */
.also-said .lang { color: var(--muted); }
.redflags .notice { margin: 0 0 .4rem; }   /* the only line a non-English reader can read: full weight */
.false-friend { border-left: 4px solid var(--muted); }
.false-friend h3 { margin: 0 0 .3rem; font-size: 1rem; }
.false-friend p { margin: 0; }