/* Weergave-instellingen (public/prefs.js): venster, verborgen blokken, rustig thema en leesbaar lettertype.
   Klassen staan op <html>: theme-calm, font-readable, no-bigbanner, no-hovertips, no-footlinks. */

/* ---------- verborgen blokken ---------- */
.pref-off { display: none !important; }
.pref-note { margin: 26px 0 0; text-align: center; font-size: 14px; font-style: italic; color: var(--faded); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--gold2); }

/* ---------- knoppen in de banner: instellingen (vierkant) en account, zelfde hoogte als de zoekbalk ---------- */
.banner-in .prefs-btn { width: 46px; padding: 0; justify-content: center; cursor: pointer; }
.prefs-btn svg, .acct-btn svg { display: block; flex: 0 0 auto; }
.acct-btn { cursor: pointer; gap: 8px; }
.acct-btn[hidden] { display: none; }
.acct-btn.on svg { color: var(--gold); }
@media (max-width: 1050px) { .banner-in .acct-btn { width: 46px; padding: 0; justify-content: center; } .acct-btn span { display: none; } }
@media (max-width: 860px) {
  .banner-in .prefs-btn { order: 5; }
  .banner-in .acct-btn { order: 6; }
  .search { flex-basis: calc(100% - 116px); }
  .banner-in:has(.acct-btn:not([hidden])) .search { flex-basis: calc(100% - 174px); }
}

/* ---------- accountvenster ---------- */
.acct-in { max-width: 420px; }
.acct-links { display: grid; padding: 6px 0; }
.acct-links a, .acct-links button { display: block; width: 100%; text-align: left; padding: 11px 20px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; }
.acct-links a:hover, .acct-links button:hover { background: rgba(201, 162, 74, .07); color: var(--gold2); }
.acct-links b { display: block; font-weight: 500; }
.acct-links small { display: block; color: var(--faded); font-size: 13.5px; font-style: italic; }
.acct-foot { padding: 12px 20px 16px; display: flex; justify-content: flex-end; }

/* ---------- venster ---------- */
.prefs-in { max-width: 560px; }
.prefs-body { overflow-y: auto; padding: 4px 20px 20px; }
.prefs-body section { padding: 16px 0 4px; border-bottom: 1px solid var(--line); }
.prefs-body section:last-child { border-bottom: 0; }
.prefs-body h4 { margin: 0 0 10px; font: 500 13px var(--sc); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.prefs-body h4 small { margin-left: 6px; text-transform: none; letter-spacing: 0; font: italic 13px var(--serif); color: var(--faded); }
.prefs-body p { margin: 0 0 12px; color: var(--ink2); }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 10px; }
.pref-row > span { min-width: 0; }
.pref-row small { display: block; font-size: 13.5px; color: var(--faded); font-style: italic; }
.pref-seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 2px; }
.pref-seg button { box-sizing: border-box; min-height: 30px; padding: 0 14px; background: none; border: 0; cursor: pointer; font: 500 14px var(--sc); letter-spacing: .06em; color: var(--ink2); }
.pref-seg button + button { border-left: 1px solid var(--line2); }
.pref-seg button:hover { color: var(--gold2); }
.pref-seg button.on { background: var(--gold); color: #1a1208; }
.pref-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin-bottom: 10px; }
.pref-sw { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; min-width: 0; }
.pref-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pref-sw i { flex: 0 0 auto; position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line2); transition: background .15s, border-color .15s; }
.pref-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--faded); transition: transform .15s, background .15s; }
.pref-sw input:checked + i { background: rgba(201, 162, 74, .3); border-color: var(--gold); }
.pref-sw input:checked + i::after { transform: translateX(16px); background: var(--gold2); }
.pref-sw input:focus-visible + i { outline: 2px solid var(--gold2); outline-offset: 2px; }
.pref-sw span { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.pref-sw input:not(:checked) ~ span { color: var(--faded); }
.pref-acts { display: flex; gap: 8px; margin-bottom: 12px; }
.pref-empty { font-size: 14px; font-style: italic; }
@media (max-width: 560px) {
  .pref-list { grid-template-columns: 1fr; }
  .pref-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pref-sw i, .pref-sw i::after { transition: none; } }

/* ---------- "Everywhere"-schakelaars ---------- */
.no-hovertips #hover { display: none !important; }
.no-footlinks .foot-cols { display: none; }
.no-bigbanner body.home .banner-in, .theme-calm body.home .banner-in { min-height: 120px; }
@media (max-width: 860px) { .no-bigbanner body.home .banner-in, .theme-calm body.home .banner-in { min-height: 0; } }

/* ---------- rustig thema "Calm": diep warm zwart, fijne lijnen, kopjes in kapitalen; geen textuur, knoopwerk,
   schaduwranden of bannerplaat. Accent = CH-goud (standaard) of wijnrood (instelling accent, klasse accent-wine).
   --acc = accentkleur als "r, g, b" voor rgba(var(--acc), …) ---------- */
:root.theme-calm {
  --peat: #0d0c0a; --peat2: #121110; --vellum: #151311; --vellum2: #1d1a17;
  --ink: #ece4d6; --ink2: #c4b8a2; --faded: #8f8370; --dim: #6c6354;
  --gold: #c8a45e; --gold2: #e5cb8c; --gold-d: #5a4a2a; --acc: 200, 164, 94;
  --line: rgba(var(--acc), .12); --line2: rgba(var(--acc), .26);
  --uncial: "Alegreya SC", "Alegreya", Georgia, serif;
  --glow: rgba(150, 112, 40, .2); --band: #221a0f; --band2: #17130d;
}
:root.theme-calm.accent-wine {
  --peat: #0d0b0b; --peat2: #121010; --vellum: #151212; --vellum2: #1d1918;
  --ink: #ece4dc; --ink2: #c3b6aa; --faded: #8e8077; --dim: #6c615a;
  --gold: #c8936b; --gold2: #e6b994; --gold-d: #5c3d2e; --acc: 200, 147, 107;
  --glow: rgba(110, 32, 36, .28); --band: #2b1215; --band2: #1a0f10;
}
.theme-calm body {
  background: var(--peat) radial-gradient(ellipse 70% 45% at 0% 0%, var(--glow), transparent 70%) no-repeat;
  background-attachment: fixed;
}.theme-calm body::before { display: none; }
.theme-calm ::selection { background: rgba(var(--acc), .35); }
.theme-calm ::-webkit-scrollbar-thumb { background: var(--gold-d); }

/* banner: wijnrood dat naar rechts wegvloeit, dunne koperen lijn eronder */
.theme-calm .banner { background: linear-gradient(90deg, var(--band) 0%, var(--band2) 38%, var(--peat2) 75%); box-shadow: none; border-bottom: 1px solid var(--line2); }
.theme-calm .banner::before { display: none; }
.accent-wine.theme-calm .brand img { filter: sepia(1) saturate(1.6) hue-rotate(-18deg) brightness(.95); }
.theme-calm .brand b { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 26px; color: var(--gold2); }
.theme-calm .brand small { letter-spacing: .3em; color: var(--faded); }
@media (max-width: 860px) { .theme-calm .brand b { font-size: 19px; letter-spacing: .05em; } .theme-calm .brand small { letter-spacing: .2em; } }
.theme-calm .brand b, .theme-calm .brand small, .theme-calm .title h1, .theme-calm .leave, .theme-calm .nav-t { text-shadow: none; }
.theme-calm .search input { background: rgba(0, 0, 0, .35); box-shadow: none; border-color: var(--line2); }
.theme-calm .search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--acc), .12); }
.theme-calm .search kbd { border-color: var(--line2); }
.theme-calm .suggest { background: var(--vellum); border-color: var(--line2); }
.theme-calm .fblink { background: rgba(0, 0, 0, .3); border-color: var(--line2); }
.theme-calm .fblink:hover { background: rgba(var(--acc), .08); border-color: var(--gold); }

/* menu: tabbladen zonder vlak, alleen een koperen streep onder het actieve */
.theme-calm .nav-t.on, .theme-calm .nav-t.peek { background: none; border-color: transparent; }
.theme-calm .nav-t.on::before, .theme-calm .nav-t.peek::before { background: var(--gold); height: 1px; }
.theme-calm .subnav { background: var(--peat2); box-shadow: none; border-bottom-color: var(--line); }
.theme-calm .subnav-list a + a::before { background: var(--line2); }
.theme-calm .subnav-list a.on::after { height: 1px; background: var(--gold); }

/* titels: ruim, kapitalen met letterafstand, een korte koperen lijn in plaats van het ornament */
.theme-calm .title h1 { font-weight: 500; letter-spacing: .06em; }
.theme-calm .rule { width: 56px; height: 1px; background: var(--gold); opacity: .6; margin-top: 14px; }
.theme-calm .unofficial { color: var(--gold); opacity: .8; }

/* blokken: vlak, fijne rand, kop in kapitalen */
.theme-calm .panel { background: rgba(21, 18, 18, .92); border: 1px solid var(--line2); outline: 0; box-shadow: none; border-radius: 0; }
.theme-calm .panel::before, .theme-calm .panel::after { display: none; }
.theme-calm .panel-h { background: none; border-bottom-color: var(--line); padding: 15px 20px 14px; }
.theme-calm .panel-h h3 { font-weight: 500; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.theme-calm .panel-h h3 .pi { color: var(--gold); font-size: 14px; }
.theme-calm .tip { background: rgba(16, 13, 13, .96); box-shadow: none; border-color: var(--line2); }
.theme-calm .kv b { color: var(--ink); }
.theme-calm .kv span, .theme-calm .tbl th { color: var(--faded); }
.theme-calm .tbl th { font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.theme-calm .tbl th.on { color: var(--gold2); }
.theme-calm .tbl tbody tr:nth-child(even) { background: none; }
.theme-calm .tbl tbody tr:hover, .theme-calm .rowlist a:hover, .theme-calm .links a:hover { background: rgba(var(--acc), .06); }
.theme-calm .links a.here { background: rgba(var(--acc), .1); }
.theme-calm .filters input, .theme-calm .filters select, .theme-calm .tbl select { background: rgba(0, 0, 0, .3); }
.theme-calm select option { background: var(--vellum2); }
.theme-calm select option:checked { background: rgba(var(--acc), .3); }

/* knoppen: koper, de rest omlijnd */
.theme-calm .btn:not(.ghost) { background: var(--gold); border-color: var(--gold); color: #1c140b; }
.theme-calm .btn.ghost { color: var(--gold2); border-color: var(--line2); }
.theme-calm .btn.ghost:hover, .theme-calm .btn.ghost.on { background: rgba(var(--acc), .1); border-color: var(--gold); }
.theme-calm .tabsbar button.on, .theme-calm .tabsbar.plain a.on, .theme-calm .tabsbar > .btn.small:not(.ghost) { background: rgba(var(--acc), .16); border-color: var(--gold); color: var(--gold2); }
.theme-calm .pref-seg button.on { background: rgba(var(--acc), .2); color: var(--gold2); }
.theme-calm .pref-sw input:checked + i { background: rgba(var(--acc), .3); }

.theme-calm .foot img { display: none; }
.theme-calm .foot { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 30px; }
.theme-calm .modal { background: rgba(5, 3, 3, .7); }
.theme-calm .drawer-panel { background: var(--peat2); }
/* ---------- leesbaar lettertype ---------- */
:root.font-readable {
  --uncial: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.font-readable body { font-size: 15px; }
.font-readable .brand b, .font-readable .title h1, .font-readable .drawer-h b, .font-readable .gr-codex-h h2,
.font-readable .clan-id h2, .font-readable .clan-invite h2, .font-readable .prerender h1 { font-weight: 700; letter-spacing: -.01em; }
.font-readable .title h1 { font-size: 32px; }
.font-readable .brand b { font-size: 26px; }
.font-readable .brand small { letter-spacing: .18em; }
.font-readable .panel-h h3 { font-size: 15.5px; letter-spacing: .02em; }
.font-readable .lede p:first-of-type::first-letter, .font-readable .quote::first-letter { float: none; font: inherit; margin: 0; color: inherit; }
.font-readable .search input, .font-readable .foot, .font-readable .panel-h .meta { font-style: normal; }