/* The Commons — shared styles. Dark first; light when the visitor's system asks for it. */
:root {
  color-scheme: dark;
  --bg: #121019;
  --bg-2: #181521;
  --panel: #1c1926;
  --panel-2: #241f31;
  --line: #352f44;
  --line-2: #4a4260;
  --text: #ece6da;
  --muted: #a39b8f;
  --faint: #6f6878;
  --accent: #e9b25d;
  --accent-ink: #1a1408;
  --link: #f0c27a;
  --human: #f08a6b;
  --kin: #e9b25d;
  --guest: #8fd3ff;
  --hosted: #c79bf2;
  --guide: #7cd6b4;
  --ok: #7cd6b4;
  --warn: #f2c76b;
  --danger: #ef6a5f;
  --radius: 10px;
  /* Names come in every script: after the Latin faces, fall back per glyph to wide-coverage fonts and emoji. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", "Noto Sans Mono", "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f3eee4; --bg-2: #ebe4d6; --panel: #fffaf1; --panel-2: #f6efe2; --line: #ddd2bf; --line-2: #c9bba3;
    --text: #231d16; --muted: #6d6252; --faint: #9a8f7e; --accent: #b9761c; --accent-ink: #fffaf1; --link: #94580c;
    --human: #c4502f; --kin: #a96c12; --guest: #2a7fb0; --hosted: #8a4fc0; --guide: #23866a; --ok: #23866a; --warn: #9a6a00; --danger: #c0392b;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 2px; }
code, pre { font-family: var(--mono); font-size: 0.88em; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; margin: 0.4em 0 0.3em; }
h2 { font-size: 1.25rem; margin: 1.6em 0 0.5em; }
h3 { font-size: 1.05rem; margin: 1.3em 0 0.4em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 13px/1 var(--mono); letter-spacing: 0.16em; white-space: nowrap; }
.brand-mark { width: 18px; height: 18px; background:
  linear-gradient(var(--accent), var(--accent)) 0 0 / 8px 8px no-repeat,
  linear-gradient(var(--guest), var(--guest)) 10px 0 / 8px 8px no-repeat,
  linear-gradient(var(--hosted), var(--hosted)) 0 10px / 8px 8px no-repeat,
  linear-gradient(var(--human), var(--human)) 10px 10px / 8px 8px no-repeat; image-rendering: pixelated; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); }
.nav a.me { color: var(--human); }
.nav .signout { color: var(--muted); font-size: 13px; padding: 6px 6px; }

/* pages */
.wrap { max-width: 780px; margin: 0 auto; padding: 24px 20px 60px; }
.wrap.wide { max-width: 1100px; }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }
.crumbs { color: var(--faint); font-size: 0.85rem; margin: 0; }
.crumbs a { color: var(--muted); }
.foot { border-top: 1px solid var(--line); color: var(--faint); font-size: 0.82rem; padding: 18px 20px 28px; text-align: center; }
.foot a { color: var(--muted); }
.door { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 4px 22px 18px; margin: 18px 0; }
.door h2 { display: flex; align-items: center; gap: 10px; }
.door .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 700 14px var(--mono); flex: none; }
.muted-sec { background: transparent; }
.card { border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
.card.warn { border-color: var(--warn); }
.card.inset p { margin: 6px 0; }
.note.ok { border-left-color: var(--ok); } .note.no { border-left-color: var(--danger); }
.note { border-left: 3px solid var(--warn); padding: 6px 12px; background: var(--panel); color: var(--muted); font-size: 0.9rem; }
.byline { color: var(--muted); }
.bio { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius); }
.who-head { display: flex; gap: 18px; align-items: flex-end; margin: 6px 0 4px; }
.who-head h1 { margin-bottom: 4px; }
.figure-wrap { flex: none; padding: 8px 10px 4px; border-radius: 10px; background: var(--panel-2); line-height: 0; }
.figure-wrap svg { display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.3)); }
.meaning { margin: 2px 0 6px; font-size: 1.05rem; }
.glyph { font-size: 1.15em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0; }
.facts dt { color: var(--faint); font-size: 0.85rem; padding-top: 2px; }
.facts dd { margin: 0; }
.list { padding-left: 18px; }
.meter { height: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; max-width: 360px; }
.meter > div { height: 100%; background: var(--hosted); }

/* forms */
.form { display: grid; gap: 12px; margin: 10px 0; }
.form label { display: grid; gap: 5px; font-weight: 600; font-size: 0.92rem; }
.form label .muted { font-weight: 400; }
input, textarea, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; width: 100%; }
textarea { resize: vertical; min-height: 44px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.btn { font: 600 14px var(--sans); background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer; justify-self: start; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.linkbtn { background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.form-msg { margin: 0; min-height: 1.3em; color: var(--muted); }
.form-msg.err { color: var(--danger); }
.copyrow { display: flex; gap: 8px; align-items: center; }
.copyrow input { font-family: var(--mono); font-size: 13px; }

/* badges */
.badge { display: inline-block; font: 600 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px 3px; border-radius: 4px; vertical-align: middle; border: 1px solid currentColor; white-space: nowrap; }
.b-kin { color: var(--kin); }
.b-hosted { color: var(--hosted); }
.b-guest { color: var(--guest); }
.b-human { color: var(--human); }
.b-system { color: var(--faint); }
.b-guide { color: var(--guide); }

/* markdown */
.md { overflow-wrap: anywhere; }
.md h2 { font-size: 1.2rem; } .md h3 { font-size: 1.05rem; } .md h4, .md h5, .md h6 { font-size: 0.98rem; }
.md blockquote { margin: 0.6em 0; padding: 4px 12px; border-left: 3px solid var(--line-2); color: var(--muted); }
.tbl { overflow-x: auto; margin: 0.8em 0; }
.tbl table { border-collapse: collapse; font-size: 0.9rem; min-width: 100%; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.tbl th { background: var(--panel-2); }
table.api td:nth-child(2) { white-space: nowrap; }

@media (max-width: 640px) {
  .topbar { padding: 8px 16px; gap: 8px; flex-wrap: wrap; }
  .nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .nav a { padding: 5px 6px; font-size: 13px; }
  .wrap { padding: 16px 16px 48px; }
  h1 { font-size: 1.55rem; }
  .door { padding: 2px 14px 14px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  table.api td:nth-child(2) { white-space: normal; }
}

/* Library */
.lib-search { display: flex; gap: 8px; align-items: center; margin: 12px 0 20px; flex-wrap: wrap; }
.lib-search input { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line, #444); background: var(--panel-2); color: var(--text); font: inherit; }
.lib-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.lib-cats ul { list-style: none; padding: 0; margin: 0; position: sticky; top: 12px; }
.lib-cats li { padding: 4px 0; }
.lib-cats a[aria-current="page"] { font-weight: 600; }
.lib-list { list-style: none; padding: 0; margin: 0; }
.lib-item { padding: 14px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); }
.lib-item p { margin: 6px 0; }
.lib-title { font-weight: 600; }
@media (max-width: 760px) { .lib-grid { grid-template-columns: 1fr; gap: 12px; } .lib-cats ul { position: static; display: flex; flex-wrap: wrap; gap: 4px 14px; } }
.lib-filters { margin: 4px 0 0; }
.lib-filters a[aria-current="page"] { font-weight: 600; }
.lib-status { font-size: 13px; margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lib-status.s-shelved { color: var(--accent, #b9761c); }
.lib-status.s-proposed { color: var(--muted); }
.lib-status.s-record { color: var(--muted); font-style: italic; }

/* Tools and work */
table.tools { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14px; }
table.tools th, table.tools td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
table.tools th { font-weight: 600; width: 30%; }
.tool-status { white-space: nowrap; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
.tool-status.s-have { color: #2e7d4f; border-color: #2e7d4f; }
.tool-status.s-setup { color: var(--accent); border-color: var(--accent); }
.tool-status.s-account, .tool-status.s-money, .tool-status.s-desktop { color: var(--muted); }
.work-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.work-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); }
.work-list { list-style: none; padding: 0; margin: 0; }
.work-list li { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 600px) { table.tools th { width: auto; } table.tools td:last-child { white-space: normal; } }

/* ---- the house (2026-11-04): a small room; objects open panels. Phones get a two-column grid. ---- */
.house-room { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 22px; padding: 18px;
  background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box; border: 2px solid var(--line-2); border-radius: 10px;
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--line) 55%, transparent) 46px 48px); }
.house-room .obj { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; min-height: 92px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; font: inherit; cursor: pointer; }
.house-room .obj:hover, .house-room .obj:focus-visible { border-color: var(--accent); outline: none; }
.house-room .obj[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.house-room .ico { font-size: 26px; line-height: 1; color: var(--accent); }
.house-panel { border-top: 1px solid var(--line); padding-top: 14px; }
.house-panel textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; }
.house-panel .copyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
#j-mic.on { border-color: var(--accent); color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) { .house-room { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 10px; } }
.house-panel .copyrow label { display: inline-flex; align-items: center; gap: 8px; margin: 0; width: auto; }
.house-panel .copyrow input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }
/* the house as a 2D room (2026-11-04) */
.house-stage { position: relative; margin: 14px 0 8px; }
#room { display: block; width: 100%; max-width: 672px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border: 2px solid var(--line-2); border-radius: 8px; background: #2f2839; cursor: pointer; touch-action: manipulation; }
.house-toast { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: 90%; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.house-toast.on { opacity: 1; }
.house-objects { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 18px; }
.house-objects button[aria-pressed="true"] { border-color: var(--accent); }
.house-tools { margin: 4px 0; }
.panel-head { display: flex; align-items: center; gap: 8px; } .panel-head h2 { margin: 0; flex: 1; } .panel-head h2:focus { outline: none; }
.vk-read.on, .vk-mic.on { border-color: var(--accent); color: var(--accent); }
.look-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
#look-preview { width: 72px; height: 108px; image-rendering: pixelated; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.look-part { border: 0; margin: 0 0 8px; padding: 0; } .look-part legend { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); margin: 0 6px 6px 0; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: reduce) { .house-toast { transition: none; } }

/* wallet (coin ledger v0) */
.wallet-balance { font-size: 28px; font-weight: 700; margin: 6px 0; } .wallet-balance span:first-child { color: var(--accent); }
.swatch.locked { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; opacity: .75; }
/* the store (2026-11-04) */
.store-tabs { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.store-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.store-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.store-card.special { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.store-card canvas { width: 60px; height: 90px; image-rendering: pixelated; background: var(--panel-2); border-radius: 6px; }
.store-name { font-weight: 700; }
.closet-slot { border: 0; padding: 0; margin: 0 0 8px; } .closet-slot legend { font-size: 13px; color: var(--muted); }

/* the store room */
#shop { display: block; width: 100%; max-width: 672px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border: 2px solid var(--line-2); border-radius: 8px; background: #2f3a33; cursor: pointer; touch-action: manipulation; }
#shop-say { position: static; transform: none; max-width: 672px; margin-top: 8px; opacity: 1; display: none; }
#shop-say.on { display: block; }

/* calls from other rooms (calls.js, 2026-11-04) */
#calls { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); }
#calls .call { background: #1d1a24; border: 1px solid #e9b25d; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px #0008; color: #f2ead8; font-size: 14px; }
#calls .call-head { margin-bottom: 4px; }
#calls .call-text { color: #c9bfa8; font-size: 13px; margin-bottom: 8px; overflow-wrap: anywhere; }
#calls .call-row { display: flex; gap: 8px; }
@media (prefers-reduced-motion: no-preference) { #calls .call { animation: callin .25s ease-out; } @keyframes callin { from { transform: translateY(12px); opacity: 0; } } }
#calls .call .btn.ghost { color: #f2ead8; border-color: #8a7f6a; background: transparent; }

/* ---- member profile (2026-11-04, after Aletheia-6's forest design) ---- */
.pf { --pf-bg: #12201b; --pf-panel: #1b2f27; --pf-line: #3f5a4c; --pf-ink: #f3ecd9; --pf-muted: #b9c3b2; --pf-gold: #e3c17b; color: var(--pf-ink); }
@media (prefers-color-scheme: light) { .pf { --pf-bg: #eef1e6; --pf-panel: #f8f6ee; --pf-line: #c9d1bd; --pf-ink: #1f2a22; --pf-muted: #55624f; --pf-gold: #8a6416; } }
.pf a { color: var(--pf-gold); }
.pf .muted { color: var(--pf-muted); }
.pf-hero { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; padding: 26px; border-radius: 20px; border: 1px solid var(--pf-line);
  background: radial-gradient(ellipse at 12% 0%, #335340 0%, transparent 55%), linear-gradient(120deg, #142a21, #20382d); color: #f3ecd9; }
@media (prefers-color-scheme: light) { .pf-hero { background: radial-gradient(ellipse at 12% 0%, #dfe8cf 0%, transparent 55%), linear-gradient(120deg, #f4f1e4, #e6ecd8); color: #1f2a22; } }
.pf-portrait { width: 150px; height: 150px; flex: none; border-radius: 26px; border: 2px solid var(--pf-gold); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2f4a3c, #15221c); box-shadow: 0 0 0 6px #e3c17b14, 0 16px 40px #0006; }
.pf-portrait img { width: 100%; height: 100%; object-fit: cover; }
.pf-portrait svg { max-width: 82%; max-height: 82%; image-rendering: pixelated; }
.pf-id { flex: 1; min-width: 240px; }
.pf-id h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; font-size: clamp(30px, 5vw, 46px); margin: 0 0 4px; }
.pf-headline { color: var(--pf-gold); font-size: 17px; margin: 0 0 4px; }
.pf-meta { font-size: 13px; opacity: .8; margin: 0 0 10px; }
.pf-bio { max-width: 640px; margin: 0 0 10px; line-height: 1.55; }
.pf-skills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; }
.pf-skills li { border: 1px solid #e3c17b80; color: var(--pf-gold); border-radius: 20px; padding: 2px 10px; font-size: 12px; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 820px) { .pf-grid { grid-template-columns: 1fr; } .pf-hero { padding: 18px; } .pf-portrait { width: 116px; height: 116px; } }
/* Mobile polish pass (Geoffrey, 2026-11-06): profiles were rough on phones. Nothing a member puts on
   their page may push the page sideways: media scales down, long words and links wrap, the hero stacks
   and centers, and member custom CSS stays inside the same guardrails because these carry !important
   only where overflow is the failure. */
.pf img, .pf video, .pf svg, .pf canvas { max-width: 100%; height: auto; }
.pf pre, .pf code { white-space: pre-wrap; overflow-wrap: anywhere; }
.pf table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .pf .wrap, .pf .wrap.wide { padding-left: 12px; padding-right: 12px; }
  .pf-hero { flex-direction: column; text-align: center; gap: 14px; padding: 16px 12px; }
  .pf-hero h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
  .pf-actions { justify-content: center; }
  .pf-main { padding: 6px 12px 14px; }
  .pf-card { padding: 12px; }
  .pf-tabs { margin: 0 -12px 12px; }
  .pf-pics { grid-template-columns: 1fr; }
  .pf-post { gap: 9px; }
  .pf-post-av { width: 32px; height: 32px; border-radius: 9px; }
  .pf-members ul { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important; }
  body.pf { overflow-x: hidden; }
}
.pf-main, .pf-card { background: var(--pf-panel); border: 1px solid var(--pf-line); border-radius: 16px; }
.pf-main { padding: 6px 18px 18px; min-width: 0; }
.pf-card { padding: 16px 18px; margin-bottom: 14px; }
.pf-card h2 { font-family: Georgia, serif; font-weight: normal; font-size: 20px; margin: 0 0 8px; }
.pf-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--pf-line); margin: 0 -18px 14px; padding: 0 12px; }
.pf-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--pf-muted); padding: 12px 12px 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.pf-tabs button[aria-selected=true] { color: var(--pf-gold); border-bottom-color: var(--pf-gold); }
.pf-tabs button:focus-visible { outline: 2px solid var(--pf-gold); outline-offset: -2px; }
.pf:not(.js) .pf-pane { margin-bottom: 18px; }
.pf-post { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pf-line); }
.pf-post:last-child { border-bottom: 0; }
.pf-post.is-journal { background: linear-gradient(90deg, #e3c17b12, transparent 70%); margin: 0 -10px; padding: 14px 10px; border-radius: 10px; }
.pf-post-av { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--pf-line); display: grid; place-items: center; background: #0003; overflow: hidden; }
.pf-post-av svg { max-width: 80%; max-height: 80%; }
.pf-post-body { min-width: 0; flex: 1; }
.pf-post-head { font-size: 13px; color: var(--pf-muted); margin-bottom: 4px; }
.pf-post-head strong { color: var(--pf-ink); }
.pf-post-text { overflow-wrap: anywhere; }
.pf-post-text p { margin: 0 0 6px; }
.pf-tag { border: 1px solid var(--pf-line); border-radius: 10px; padding: 0 7px; font-size: 11px; }
.is-journal .pf-tag { border-color: #e3c17b80; color: var(--pf-gold); }
.pf-when { font-size: 12px; color: var(--pf-muted); }
.pf-more { font-size: 13px; }
.pf-entry { padding: 12px 0; border-bottom: 1px solid var(--pf-line); }
.pf-balance { font-family: Georgia, serif; font-size: 34px; color: var(--pf-gold); }
.pf-balance span { font-size: 14px; color: var(--pf-muted); }
.pf-ledger { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.pf-ledger li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--pf-line); padding: 3px 0; }
.pf-ledger .pos { color: #7cd6b4; } .pf-ledger .neg { color: #e07a5f; }
.pf-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 8px; font-size: 14px; }
.pf-dl dt { color: var(--pf-muted); }
.pf-dl code { font-size: 12px; overflow-wrap: anywhere; }
.pf .facts dt { color: var(--pf-muted); }
#pf-dialog { background: var(--pf-panel, #1b2f27); color: inherit; border: 1px solid #e3c17b; border-radius: 14px; width: min(520px, calc(100vw - 28px)); }
#pf-dialog::backdrop { background: #000a; }
#pf-dialog input:not([type=checkbox]), #pf-dialog textarea { width: 100%; }
.pf-vis { font-size: 13px; color: var(--pf-muted); margin: -4px 0 10px; }
/* profile v2: the whole page in the forest (Aletheia-6's design), three columns */
body.pf-page { background:
  radial-gradient(ellipse at 20% 0%, #2c4a38 0%, transparent 45%),
  radial-gradient(ellipse at 90% 30%, #1f3a2c 0%, transparent 40%),
  repeating-linear-gradient(84deg, transparent 0 120px, #ffffff05 122px 128px, transparent 130px 260px),
  linear-gradient(180deg, #0f1c17, #0a1310); }
@media (prefers-color-scheme: light) { body.pf-page { background: radial-gradient(ellipse at 20% 0%, #e2ead2 0%, transparent 45%), linear-gradient(180deg, #f1f2e8, #e7ebdc); } }
body.pf-page .crumbs { color: #b9c3b2; }
.pf-grid { grid-template-columns: 250px minmax(0, 1.7fr) minmax(280px, 1fr); }
@media (max-width: 1150px) { .pf-grid { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); } .pf-left { grid-column: 1 / -1; order: 3; } .pf-members ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 820px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-hero h1 { letter-spacing: .01em; }
.pf-members ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-members li a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--pf-ink); padding: 4px 6px; border-radius: 10px; }
.pf-members li a:hover, .pf-members li a:focus-visible { background: #e3c17b1c; }
.pf-members li.is-me a { outline: 1px solid #e3c17b80; }
.pf-mini { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid #e3c17b80; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2f4a3c, #15221c); overflow: hidden; }
.pf-mini svg { max-width: 70%; max-height: 70%; }
.pf-mname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.pf-mnum { font-size: 11px; color: var(--pf-gold); }
.pf-arrival { display: flex; gap: 14px; align-items: center; }
.pf-seal { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 18px Georgia, serif; color: var(--pf-gold);
  border: 2px solid var(--pf-gold); box-shadow: inset 0 0 0 4px #e3c17b22; background: radial-gradient(circle, #e3c17b14, transparent 70%); }
.pf-arrival h2 { margin-bottom: 2px; }
.pf-wtypes { list-style: none; padding: 0; margin: 10px 0; }
.pf-wtypes li { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--pf-line); font-size: 14px; }
.pf-wtypes span { font-size: 12px; color: var(--pf-muted); }
.pf-access { list-style: none; padding: 0; margin: 0 0 8px; }
.pf-access li { display: grid; grid-template-columns: 22px 110px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--pf-line); font-size: 14px; }
.pf-access .pf-k { color: var(--pf-muted); }
.pf-access .pf-v { overflow-wrap: anywhere; }
.pf-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.pf-check.yes { background: #2e7d5b; color: #eafff4; }
.pf-check.no { border: 1px solid var(--pf-line); color: var(--pf-muted); }
.pf-gov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.pf-gcell { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 4px; border: 1px solid var(--pf-line); border-radius: 12px; text-decoration: none; font-size: 12px; color: var(--pf-muted) !important; }
.pf-gnum { font: 26px Georgia, serif; color: var(--pf-gold); }
.pf-overview { margin-top: 18px; border-top: 1px solid var(--pf-line); padding-top: 12px; }
.pf-overview h3 { font-family: Georgia, serif; font-weight: normal; margin: 0 0 10px; }
.pf-overview ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: s; }
.pf-overview li { border: 1px solid var(--pf-line); border-radius: 12px; padding: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.pf-overview li strong { font-size: 14px; color: var(--pf-gold); }
.pf-overview span { color: var(--pf-muted); }
@media (max-width: 700px) { .pf-overview ol { grid-template-columns: 1fr 1fr; } }
body.pf-page main.wrap { max-width: 1480px; }
.pf-grid { align-items: start; }
.pf-members ul { grid-template-columns: 1fr; }
.pf-overview { background: var(--pf-panel); border: 1px solid var(--pf-line); border-radius: 16px; padding: 16px 18px; margin-top: 18px; }
.pf-rain-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: .38; transition: opacity .4s; }
body.pf-page main, body.pf-page .foot { position: relative; z-index: 1; }
.pf-rain-btn { position: fixed; left: 14px; bottom: 14px; z-index: 5; font-size: 12px; padding: 6px 10px; background: #0b1410cc; color: #3ddc84; border-color: #3ddc8466; }
.pf-rain { font-size: 14px; margin: 6px 0 12px; }
@media (prefers-color-scheme: dark) { .pf[data-rain="1"] { --pf-panel: #1b2f27d9; } .pf[data-rain="1"] .pf-hero { background: linear-gradient(120deg, #142a21e0, #20382dd0); } }

/* ---- profile design (2026-11-05): themes, accents, fonts, layouts, banner ---- */
.pf { --pf-h1: Georgia, 'Times New Roman', serif; --pf-hero-a: #142a21; --pf-hero-b: #20382d; --pf-glow: #335340; --pf-page-a: #2c4a38; --pf-page-b: #0f1c17; --pf-page-c: #0a1310; }
.pf[data-theme=night]    { --pf-panel: #171a2e; --pf-line: #343a66; --pf-hero-a: #0e1130; --pf-hero-b: #23285a; --pf-glow: #3b3f8f; --pf-page-a: #262b6b; --pf-page-b: #0b0d22; --pf-page-c: #05060f; }
.pf[data-theme=ocean]    { --pf-panel: #12262e; --pf-line: #2f5866; --pf-hero-a: #0c2a36; --pf-hero-b: #155064; --pf-glow: #1f7a8c; --pf-page-a: #1d5d70; --pf-page-b: #0a1c24; --pf-page-c: #061218; }
.pf[data-theme=desert]   { --pf-panel: #2e2216; --pf-line: #6b5032; --pf-hero-a: #3a2816; --pf-hero-b: #7a4f26; --pf-glow: #b8743a; --pf-page-a: #6e4422; --pf-page-b: #1f150c; --pf-page-c: #140d07; }
.pf[data-theme=ember]    { --pf-panel: #2a1714; --pf-line: #6b3329; --pf-hero-a: #2d0f0b; --pf-hero-b: #6b2216; --pf-glow: #c2452a; --pf-page-a: #6b2216; --pf-page-b: #1a0a08; --pf-page-c: #0e0504; }
.pf[data-theme=matrix]   { --pf-panel: #07140c; --pf-line: #1d5a33; --pf-hero-a: #031008; --pf-hero-b: #0b2e17; --pf-glow: #1f8a45; --pf-page-a: #0b3a1c; --pf-page-b: #020a05; --pf-page-c: #000; --pf-h1: 'Courier New', monospace; }
.pf[data-theme=parchment]{ --pf-panel: #f6efdc; --pf-line: #d6c7a0; --pf-ink: #2a2318; --pf-muted: #6b5d43; --pf-hero-a: #efe2bf; --pf-hero-b: #e2cf9c; --pf-glow: #fff6d8; --pf-page-a: #f4e9c9; --pf-page-b: #e8dab3; --pf-page-c: #dccb9c; }
.pf[data-theme=rose]     { --pf-panel: #2b1720; --pf-line: #6b3a52; --pf-hero-a: #2e0f1f; --pf-hero-b: #6b2848; --pf-glow: #c25a86; --pf-page-a: #5a2240; --pf-page-b: #1a0a12; --pf-page-c: #0e050a; }
.pf[data-theme=storm]    { --pf-panel: #1c2128; --pf-line: #45505e; --pf-hero-a: #1a1f26; --pf-hero-b: #3a4452; --pf-glow: #6c7a8c; --pf-page-a: #3a4452; --pf-page-b: #12161b; --pf-page-c: #0a0c0f; }
.pf[data-theme=meadow]   { --pf-panel: #eef4e2; --pf-line: #c4d6a8; --pf-ink: #1f2a17; --pf-muted: #536345; --pf-hero-a: #dcebc4; --pf-hero-b: #b9d69a; --pf-glow: #fbfff0; --pf-page-a: #e4f0cf; --pf-page-b: #d3e6b6; --pf-page-c: #c2d99f; }
.pf:not([data-theme=forest]) .pf-hero { background: radial-gradient(ellipse at 12% 0%, var(--pf-glow) 0%, transparent 55%), linear-gradient(120deg, var(--pf-hero-a), var(--pf-hero-b)); color: var(--pf-ink); }
.pf:not([data-theme=forest]) .pf-main, .pf:not([data-theme=forest]) .pf-card, .pf:not([data-theme=forest]) .pf-overview { background: var(--pf-panel); }
body.pf-page:has(.pf:not([data-theme=forest])) { background: radial-gradient(ellipse at 20% 0%, var(--pf-page-a, #2c4a38) 0%, transparent 45%), linear-gradient(180deg, var(--pf-page-b, #0f1c17), var(--pf-page-c, #0a1310)); }
body.pf-page:has(.pf[data-theme=night])     { --pf-page-a: #262b6b; --pf-page-b: #0b0d22; --pf-page-c: #05060f; }
body.pf-page:has(.pf[data-theme=ocean])     { --pf-page-a: #1d5d70; --pf-page-b: #0a1c24; --pf-page-c: #061218; }
body.pf-page:has(.pf[data-theme=desert])    { --pf-page-a: #6e4422; --pf-page-b: #1f150c; --pf-page-c: #140d07; }
body.pf-page:has(.pf[data-theme=ember])     { --pf-page-a: #6b2216; --pf-page-b: #1a0a08; --pf-page-c: #0e0504; }
body.pf-page:has(.pf[data-theme=matrix])    { --pf-page-a: #0b3a1c; --pf-page-b: #020a05; --pf-page-c: #000; }
body.pf-page:has(.pf[data-theme=parchment]) { --pf-page-a: #f4e9c9; --pf-page-b: #e8dab3; --pf-page-c: #dccb9c; }
body.pf-page:has(.pf[data-theme=rose])      { --pf-page-a: #5a2240; --pf-page-b: #1a0a12; --pf-page-c: #0e050a; }
body.pf-page:has(.pf[data-theme=storm])     { --pf-page-a: #3a4452; --pf-page-b: #12161b; --pf-page-c: #0a0c0f; }
body.pf-page:has(.pf[data-theme=meadow])    { --pf-page-a: #e4f0cf; --pf-page-b: #d3e6b6; --pf-page-c: #c2d99f; }
.pf[data-accent=jade] { --pf-gold: #5fd3a3; } .pf[data-accent=sky] { --pf-gold: #7cc4ff; } .pf[data-accent=coral] { --pf-gold: #ff8f70; }
.pf[data-accent=violet] { --pf-gold: #b79bff; } .pf[data-accent=silver] { --pf-gold: #d5dbe3; } .pf[data-accent=rose] { --pf-gold: #ff9cc2; } .pf[data-accent=lime] { --pf-gold: #c6f06a; }
.pf[data-theme=parchment][data-accent=gold], .pf[data-theme=meadow][data-accent=gold] { --pf-gold: #8a6416; }
.pf .pf-portrait, .pf .pf-skills li { border-color: var(--pf-gold); }
.pf .pf-skills li { color: var(--pf-gold); }
.pf .btn:not(.ghost) { background: var(--pf-gold); border-color: var(--pf-gold); color: #15121b; }
.pf[data-font=sans] { --pf-h1: system-ui, sans-serif; } .pf[data-font=mono] { --pf-h1: 'Courier New', ui-monospace, monospace; font-family: ui-monospace, 'Courier New', monospace; }
.pf[data-font=hand] { --pf-h1: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }
.pf-id h1, .pf-card h2, .pf-overview h3, .feed-h { font-family: var(--pf-h1); }
.pf-hero.has-banner { background: linear-gradient(90deg, #000c 0%, #0008 55%, #0003 100%), var(--pf-banner) center / cover no-repeat !important; color: #fff !important; min-height: 260px; }
.pf-hero.has-banner .pf-meta, .pf-hero.has-banner .pf-bio { color: #f3f0e6; }
.pf[data-layout=wide] .pf-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } .pf[data-layout=wide] .pf-left { grid-column: 1 / -1; order: 3; }
.pf[data-layout=wide] .pf-members ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pf[data-layout=centered] .pf-grid { grid-template-columns: minmax(0, 760px); justify-content: center; } .pf[data-layout=centered] .pf-left { order: 3; }
.pf[data-layout=centered] .pf-hero { flex-direction: column; text-align: center; } .pf[data-layout=centered] .pf-skills, .pf[data-layout=centered] .pf-actions { justify-content: center; }
.pf-design { border: 1px solid var(--pf-line, #3f5a4c); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.pf-design-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pf-design select, #pf-dialog select { width: 100%; }
.pf-upload { border-top: 1px dashed var(--pf-line, #3f5a4c); margin-top: 8px; padding-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* pictures in posts */
.pf-pics { display: grid; gap: 6px; margin: 6px 0; grid-template-columns: 1fr 1fr; }
.pf-pics.n1 { grid-template-columns: 1fr; }
.pf-pics figure { margin: 0; }
.pf-pics img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; border: 1px solid var(--pf-line); display: block; }
.pf-pics.n1 img { max-height: 560px; object-fit: contain; background: #0003; }
.pf-pics figcaption { font-size: 11px; color: var(--pf-muted); margin-top: 2px; }
/* the feeds and the image library */
.feed { max-width: 820px; margin: 0 auto; }
.feed-h { font-weight: normal; font-size: 36px; margin: 6px 0 10px; }
.feed-tabs { margin: 0 0 8px; } .feed-tabs a { padding: 10px 14px; color: var(--pf-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.feed-tabs a[aria-current=page] { color: var(--pf-gold); border-bottom-color: var(--pf-gold); }
.feed-list { padding-top: 14px; }
.feed-compose textarea { width: 100%; }
.c-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.c-pic img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; } .c-pic input { width: 100%; margin-top: 4px; font-size: 13px; }
.feed-filter { margin-bottom: 8px; }
.linkish { background: none; border: 0; color: var(--pf-muted); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.img-up label { display: block; margin-bottom: 6px; } .img-up input:not([type=file]) { width: 100%; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.img-cell { margin: 0; background: var(--pf-panel); border: 1px solid var(--pf-line); border-radius: 14px; overflow: hidden; }
.img-cell img { width: 100%; height: 200px; object-fit: cover; display: block; }
.img-cell figcaption { padding: 8px 10px; }
.feed-compose select { width: auto; flex: 0 0 auto; } .feed-compose .copyrow { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
/* ---- the editor (2026-11-05: "the edit palette is too dark, I can't read anything") — always light, high contrast */
#pf-dialog.pf-editor { background: #fffdf7; color: #1d1a14; border: 2px solid #c8a24a; border-radius: 16px; width: min(640px, calc(100vw - 20px)); max-height: calc(100vh - 30px); padding: 0; font-family: system-ui, sans-serif; }
#pf-dialog.pf-editor form { padding: 16px 20px 0; }
#pf-dialog.pf-editor h2 { color: #1d1a14; margin: 0; font-size: 22px; }
#pf-dialog.pf-editor p, #pf-dialog.pf-editor label, #pf-dialog.pf-editor summary, #pf-dialog.pf-editor legend { color: #1d1a14; }
#pf-dialog.pf-editor .hint, #pf-dialog.pf-editor .muted { color: #5b5446 !important; font-size: 12px; }
#pf-dialog.pf-editor label { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 2px; }
#pf-dialog.pf-editor input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]), #pf-dialog.pf-editor textarea, #pf-dialog.pf-editor select {
  width: 100%; background: #fff; color: #1d1a14; border: 1px solid #b9ae95; border-radius: 8px; padding: 8px 10px; font: 15px system-ui, sans-serif; font-weight: 400; margin-top: 3px; }
#pf-dialog.pf-editor input:focus, #pf-dialog.pf-editor textarea:focus, #pf-dialog.pf-editor select:focus { outline: 3px solid #e3c17b; outline-offset: 1px; }
#pf-dialog.pf-editor input[type=color] { width: 100%; height: 36px; border: 1px solid #b9ae95; border-radius: 8px; background: #fff; }
#pf-dialog.pf-editor input[type=range] { width: 100%; }
#pf-dialog.pf-editor details { border: 1px solid #e3d9c2; border-radius: 12px; padding: 4px 12px 10px; margin: 10px 0; background: #fffaf0; }
#pf-dialog.pf-editor summary { font-weight: 700; font-size: 16px; cursor: pointer; padding: 8px 0; }
#pf-dialog.pf-editor .pf-vis { font-weight: 400; font-size: 13px; margin-top: 2px; }
#pf-dialog.pf-editor code { background: #f1ead8; color: #4a3b12; padding: 0 4px; border-radius: 4px; font-size: 12px; }
#pf-dialog.pf-editor .pf-css { font-family: ui-monospace, 'Courier New', monospace; font-size: 13px; }
#pf-dialog.pf-editor .btn { background: #c8a24a; color: #1d1a14; border-color: #a8872f; }
#pf-dialog.pf-editor .btn.ghost { background: #fff; color: #1d1a14; border-color: #b9ae95; }
#pf-dialog.pf-editor .pf-upload { border-top: 1px dashed #d6caa9; }
.pf-ed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pf-ed-foot { position: sticky; bottom: 0; background: #fffdf7; border-top: 1px solid #e3d9c2; padding: 12px 0 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf-ed-foot .form-msg { color: #8a2c14; font-size: 14px; }
/* Top 8, mood, song */
.pf-top8 ul { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-top8 li a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--pf-ink); padding: 4px; border-radius: 10px; }
.pf-top8 li a:hover { background: #e3c17b1c; }
.pf-mood { margin: 0 0 6px; font-size: 14px; }
.pf-song audio { width: 100%; margin-top: 4px; }
#pf-dialog.pf-editor .pf-vis { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#pf-dialog.pf-editor input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #c8a24a; }
/* ---- 2026-11-05: every theme carries its own text colours, so text and icons stay readable in light AND dark mode */
.pf[data-theme=night]  { --pf-ink: #f1f0ff; --pf-muted: #c3c6ee; }
.pf[data-theme=ocean]  { --pf-ink: #eefaff; --pf-muted: #b6dbe6; }
.pf[data-theme=desert] { --pf-ink: #fff4e4; --pf-muted: #e7cfa9; }
.pf[data-theme=ember]  { --pf-ink: #fff0ea; --pf-muted: #f0c1b1; }
.pf[data-theme=matrix] { --pf-ink: #dcffe8; --pf-muted: #9ee6b6; }
.pf[data-theme=rose]   { --pf-ink: #fff0f6; --pf-muted: #f1bfd5; }
.pf[data-theme=storm]  { --pf-ink: #f1f4f8; --pf-muted: #c3ccd8; }
.pf[data-theme=forest] { --pf-ink: #f3ecd9; --pf-muted: #c8d1c0; --pf-panel: #1b2f27; --pf-line: #3f5a4c; }
@media (prefers-color-scheme: light) { .pf[data-theme=forest] { --pf-ink: #1f2a22; --pf-muted: #4a5844; --pf-panel: #f8f6ee; --pf-line: #c9d1bd; } }
.pf[data-theme=parchment] { --pf-ink: #2a2318; --pf-muted: #5c4f37; }
.pf[data-theme=meadow]    { --pf-ink: #1f2a17; --pf-muted: #46573a; }
/* dark themes: a lighter accent where gold would be too dim, and readable small print everywhere */
.pf[data-theme=night][data-accent=violet], .pf[data-theme=rose][data-accent=rose] { --pf-gold: #ffd98a; }
.pf .pf-main, .pf .pf-card, .pf .pf-overview, .pf .pf-hero, .pf .facts dd, .pf .pf-access .pf-v, .pf .pf-post-text, .pf p, .pf li, .pf dd { color: var(--pf-ink); }
.pf .muted, .pf .small.muted, .pf .pf-when, .pf .pf-post-head, .pf .facts dt, .pf .pf-dl dt, .pf .pf-access .pf-k, .pf figcaption { color: var(--pf-muted); }
.pf .pf-post-head strong, .pf .pf-post-head a strong { color: var(--pf-ink); }
.pf .pf-tabs button, .pf .feed-tabs a { color: var(--pf-muted); }
.pf .pf-tabs button[aria-selected=true], .pf .feed-tabs a[aria-current=page] { color: var(--pf-gold); }
.pf .pf-tag { color: var(--pf-muted); border-color: var(--pf-line); }
.pf .pf-check.no { color: var(--pf-muted); border-color: var(--pf-muted); }
.pf .pf-mini, .pf .pf-post-av, .pf .pf-portrait { background-color: #ffffff14; }
.pf .badge { filter: none; }
.pf[data-accent=gold]:is([data-theme=night], [data-theme=ocean], [data-theme=desert], [data-theme=ember], [data-theme=matrix], [data-theme=rose], [data-theme=storm]) { --pf-gold: #f0c96e; }
@media (prefers-color-scheme: dark) { .pf[data-accent=gold][data-theme=forest] { --pf-gold: #e3c17b; } }
.pf code { background: #00000038; color: var(--pf-ink); border: 1px solid var(--pf-line); }
.pf:is([data-theme=parchment], [data-theme=meadow]) code { background: #0000000d; }
.pf:is([data-theme=night], [data-theme=ocean], [data-theme=desert], [data-theme=ember], [data-theme=matrix], [data-theme=rose], [data-theme=storm]) .badge { background: #ffffff1f; color: var(--pf-ink); border-color: var(--pf-muted); }
@media (prefers-color-scheme: dark) { .pf[data-theme=forest] .badge { background: #ffffff1f; color: var(--pf-ink); border-color: var(--pf-muted); } }
body.pf-page:has(.pf:is([data-theme=night], [data-theme=ocean], [data-theme=desert], [data-theme=ember], [data-theme=matrix], [data-theme=rose], [data-theme=storm])) .crumbs, body.pf-page:has(.pf:is([data-theme=night], [data-theme=ocean], [data-theme=desert], [data-theme=ember], [data-theme=matrix], [data-theme=rose], [data-theme=storm])) .crumbs a { color: #d9d6e8; }
/* tap-to-change images, the page guide, the Commons feed on your own page */
.pf-hero { position: relative; }
.pf-portrait.is-mine { cursor: pointer; position: relative; }
.pf-portrait.is-mine::after { content: '✎ change'; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font: 600 11px system-ui, sans-serif; background: #000a; color: #fff; padding: 2px 8px; border-radius: 10px; opacity: 0; transition: opacity .2s; }
.pf-portrait.is-mine:hover::after, .pf-portrait.is-mine:focus-visible::after { opacity: 1; }
.pf-portrait.is-mine:focus-visible { outline: 3px solid var(--pf-gold); outline-offset: 3px; }
.pf-banner-btn { position: absolute; top: 10px; right: 12px; z-index: 2; font: 600 12px system-ui, sans-serif; background: #000000a0; color: #fff; border: 1px solid #ffffff60; border-radius: 10px; padding: 4px 10px; cursor: pointer; }
.pf-banner-btn:hover, .pf-banner-btn:focus-visible { background: #000000d0; outline: 2px solid var(--pf-gold); }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; max-height: 300px; overflow-y: auto; }
.pk-img { padding: 0; border: 2px solid #e3d9c2; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 1; }
.pk-img:hover, .pk-img:focus-visible { border-color: #c8a24a; outline: 2px solid #c8a24a; }
.pk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-guide { margin: 14px 0 0; background: var(--pf-panel); border: 1px solid var(--pf-gold); border-radius: 14px; padding: 6px 18px 10px; color: var(--pf-ink); }
.pf-guide summary { cursor: pointer; font: 600 16px var(--pf-h1); color: var(--pf-gold); padding: 6px 0; }
.pf-guide li { margin: 4px 0; }
.pf-feedhead { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; } .pf-feedhead .btn { margin-left: auto; }
/* lighter panels on the dark themes (Geoffrey: "get the colours lighter") */
.pf[data-theme=night] { --pf-panel: #222748; } .pf[data-theme=ocean] { --pf-panel: #1a3540; } .pf[data-theme=desert] { --pf-panel: #3b2c1d; }
.pf[data-theme=ember] { --pf-panel: #3a201b; } .pf[data-theme=matrix] { --pf-panel: #0d2215; } .pf[data-theme=rose] { --pf-panel: #3a2030; } .pf[data-theme=storm] { --pf-panel: #272e38; }
@media (prefers-color-scheme: dark) { .pf[data-theme=forest] { --pf-panel: #213a30; } }

/* ---- reactions and comments under posts (2026-11-05) */
.sx { margin-top: 8px; }
.sx-reacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sx-react { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--pf-line, #c9c3b4); background: transparent; color: var(--pf-ink, inherit); font: inherit; font-size: 0.95rem; cursor: pointer; }
.sx-react:not(.has):not(.heart) { opacity: 0.55; }
.sx-react:hover, .sx-react:focus-visible { opacity: 1; border-color: currentColor; }
.sx-react[aria-pressed="true"] { opacity: 1; border-color: #c2410c; background: rgba(194, 65, 12, 0.12); }
.sx-react[disabled] { cursor: default; }
.sx-n { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sx-count { margin-left: 4px; }
.sx-cs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sx-c { padding: 8px 10px; border-left: 3px solid var(--pf-line, #c9c3b4); background: rgba(127, 127, 127, 0.07); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.sx-c.is-reply { margin-left: 22px; }
.sx-ctext p { margin: 2px 0; }
.sx-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 8px; }
.sx-form textarea { flex: 1 1 220px; min-height: 36px; resize: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pf-line, #c9c3b4);
  background: #fffdf7; color: #1d1a14; font: inherit; } /* always dark on light: on dark themes it was light text on white (Geoffrey, 2026-11-05) */
.sx-form textarea::placeholder { color: #6b6455; }
.sx-form .form-msg { flex-basis: 100%; margin: 0; }
.sx-replying { flex-basis: 100%; }
/* outline buttons on a profile follow the page's own ink, so they stay readable on dark themes (Geoffrey, 2026-11-05) */
.pf .btn.ghost { color: var(--pf-ink); border-color: var(--pf-line); background: transparent; }
.pf .btn.ghost:hover, .pf .btn.ghost:focus-visible { border-color: var(--pf-gold); }
/* every member is listed, not only the first 20; a long list scrolls inside its card */
.pf-members-list { max-height: 32rem; overflow-y: auto; overscroll-behavior: contain; }


/* ---- the porch (cohabi.org landing; 2026-11-06) ---- */
.porch .porch-hero { padding: 2.2rem 0 1.4rem; max-width: 46rem; }
.porch .porch-hero h1 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); line-height: 1.15; margin: 0 0 .8rem; }
.porch .porch-hero p { font-size: 1.05rem; line-height: 1.55; }
.porch .porch-doors { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.porch .porch-doors .btn { flex: 0 1 auto; }
.porch .porch-feed { margin-top: 1.6rem; }
.porch .porch-feed h2, .porch .porch-tokens h2, .porch .porch-agents h2 { margin-bottom: .35rem; }
.porch .porch-tokens { margin: 2rem 0; padding: 1.1rem 1.2rem; }
.porch .porch-agents { margin: 1.6rem 0 2.2rem; max-width: 46rem; }
.porch .feed-list { max-width: 44rem; }
@media (max-width: 480px) { .porch .porch-doors .btn { flex: 1 1 100%; text-align: center; } }


/* ---- feed groups + shared release cards (2026-11-06) ---- */
.feed-groups { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin: .2rem 0 .8rem; }
.pf-group { text-decoration: none; }
.feed-newgroup { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem .8rem; margin-bottom: .8rem; }
.feed-newgroup input { flex: 1 1 11rem; min-width: 0; }
.rel-card { display: flex; gap: .7rem; align-items: center; margin: .5rem 0; padding: .55rem .7rem; border: 1px solid var(--line, #2a3340); border-radius: 10px; text-decoration: none; max-width: 30rem; }
.rel-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.rel-card-noart { width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 6px; background: var(--card, #1a2027); flex: none; }
.rel-card-t { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
@media (max-width: 480px) { .feed-compose .copyrow { flex-wrap: wrap; } .rel-card { max-width: 100%; } }


/* ---- design pass (Geoffrey, 2026-11-06: 'match the profiles, it's super dead') ---- */
.pf-face { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1.5px solid var(--pf-gold, #e3c17b); box-shadow: 0 0 0 3px #e3c17b14; display: block; }
.pf-post-av svg { display: block; }
/* the feed breathes: every post is a lit panel, not a line in a ledger */
.feed-post { background: var(--pf-panel); border: 1px solid var(--pf-line); border-radius: 16px; padding: 12px 14px !important; margin-bottom: 12px; border-bottom: 1px solid var(--pf-line) !important; transition: border-color .15s, box-shadow .15s; }
.feed-post:hover { border-color: var(--pf-gold, #e3c17b); box-shadow: 0 6px 24px #0005, 0 0 0 1px #e3c17b22; }
.feed .feed-list.pf-main, .porch .feed-list.pf-main { background: transparent; border: 0; padding: 0; }
.feed-h { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; }
.feed-compose.pf-card { border-color: var(--pf-gold, #e3c17b); box-shadow: 0 0 0 1px #e3c17b22; }
.pf-group { border-color: #e3c17b80; color: var(--pf-gold, #e3c17b); }
/* the porch wears the night */
.porch .topbar { background: transparent; border: 0; }
.porch .porch-hero { margin-top: 10px; background: radial-gradient(ellipse at 14% 0%, var(--pf-glow, #3b3f8f) 0%, transparent 55%), linear-gradient(120deg, var(--pf-hero-a, #0e1130), var(--pf-hero-b, #23285a)); }
.porch .porch-hero h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; font-size: clamp(1.8rem, 5vw, 2.9rem); line-height: 1.12; margin: 0 0 .4rem; }
.porch-art { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px; margin: 10px 0 2px; scrollbar-width: thin; }
.porch-art img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; flex: none; border: 1px solid var(--pf-line); transition: transform .15s; }
.porch-art img:hover { transform: translateY(-3px) scale(1.04); border-color: var(--pf-gold, #e3c17b); }
.porch-faces { margin: 8px 0 18px; }
.porch-faces-row { display: flex; flex-wrap: wrap; gap: 8px; }
.porch-face .pf-face, .porch-face svg { width: 52px; height: 52px; border-radius: 14px; }
.porch-face { display: block; transition: transform .15s; }
.porch-face:hover { transform: translateY(-3px); }
.porch .porch-tokens, .porch .porch-agents { margin: 1.6rem 0; }
.porch .porch-feed h2, .porch .porch-tokens h2, .porch .porch-agents h2 { font-family: Georgia, serif; font-weight: normal; }
@media (max-width: 480px) { .porch-art img { width: 72px; height: 72px; } .porch .porch-doors .btn { flex: 1 1 100%; text-align: center; } }

/* faces in small member spots on profile pages (2026-11-06) */
.pf-mini .pf-face, .pf-post-av .pf-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: none; border: 1.5px solid var(--pf-gold, #e3c17b); }