/* PERIPATOS, version 1 (2026-10-27): the app's own look (Carbon, Pearl, one red), light and dark. Colours as
   variables on :root; no inline styles anywhere (the page's policy forbids them). */
:root { --bg:#f7f7f5; --panel:#ffffff; --line:rgba(23,26,32,0.14); --soft:rgba(23,26,32,0.05); --text:#171a20; --muted:#5b616b; --red:#E31937; --go:#2a7a43; --bad:#b3261e; --link:#1b5fb3; --shadow:0 6px 24px rgba(0,0,0,0.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --panel:#171a20; --line:rgba(240,240,250,0.14); --soft:rgba(240,240,250,0.06); --text:#f0f0fa; --muted:rgba(240,240,250,0.62); --go:#7fd99a; --bad:#f08a8a; --link:#8cc8ff; --shadow:0 6px 24px rgba(0,0,0,0.5); } }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:'Albert Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size:15px; line-height:1.5; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
.skip { position:absolute; left:-999px; top:8px; background:var(--panel); padding:6px 10px; border-radius:8px; z-index:20; } .skip:focus { left:8px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
button, .btn { font:inherit; font-size:14px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; }
button:hover, .btn:hover { background:var(--soft); text-decoration:none; }
button:disabled { opacity:0.5; cursor:default; }
button.primary, .btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); font-weight:600; }
button.primary:hover { opacity:0.9; }
button.danger { color:var(--bad); border-color:var(--bad); }
button.linkish, .linkish { background:none; border:none; color:var(--link); padding:2px 4px; min-height:0; cursor:pointer; font:inherit; }
input, textarea, select { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 12px; min-height:40px; }
textarea { resize:vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
h1 { font-size:22px; margin:0; } h2 { font-size:17px; margin:22px 0 8px; } h3 { font-size:15px; margin:14px 0 6px; }
.muted { color:var(--muted); } .small { font-size:13px; } .err { color:var(--bad); min-height:1.2em; margin:6px 0; } .ok { color:var(--go); }
.pad { padding:16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; min-width:0; }

/* The three columns. */
.shell { display:grid; grid-template-columns:240px minmax(0, 620px) 320px; justify-content:center; gap:0 24px; min-height:100vh; }
.rail { position:sticky; top:0; height:100vh; padding:14px 8px; display:flex; flex-direction:column; gap:4px; }
.rail .brand { font-weight:800; letter-spacing:0.14em; text-transform:uppercase; font-size:14px; padding:10px 14px 16px; color:var(--text); }
.rail a.nav, .rail button.nav { display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:999px; color:var(--text); font-size:17px; border:none; background:none; min-height:44px; width:100%; text-align:left; }
.rail a.nav:hover, .rail button.nav:hover { background:var(--soft); text-decoration:none; }
.rail a.nav.on { font-weight:700; }
.rail .ico { width:24px; text-align:center; font-size:19px; }
.rail .badge { margin-left:auto; background:var(--red); color:#fff; border-radius:999px; font-size:12px; padding:1px 8px; font-weight:700; }
.rail .post-btn { margin:12px 8px; justify-content:center; min-height:46px; font-size:16px; border-radius:999px; background:var(--red); color:#fff; border-color:var(--red); }
.rail .who { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; }
.rail .who:hover { background:var(--soft); }
.column { border-left:1px solid var(--line); border-right:1px solid var(--line); min-height:100vh; background:var(--bg); }
.side { position:sticky; top:0; height:100vh; overflow:auto; padding:12px 0; display:flex; flex-direction:column; gap:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px 16px; }
.card h2 { margin:4px 0 8px; font-size:18px; }
.bottom { display:none; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:999px; opacity:0; transition:all .25s; pointer-events:none; z-index:30; max-width:90vw; }
.toast.on { opacity:1; transform:translateX(-50%); }

/* The column's header and tabs. */
.head { position:sticky; top:0; z-index:4; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.head .bar { display:flex; align-items:center; gap:12px; padding:10px 16px; min-height:52px; }
.head .back { font-size:20px; border:none; background:none; padding:4px 8px; min-height:0; }
.tabs { display:flex; }
.tabs a { flex:1; text-align:center; padding:12px 8px; color:var(--muted); font-weight:600; position:relative; }
.tabs a:hover { background:var(--soft); text-decoration:none; }
.tabs a.on { color:var(--text); }
.tabs a.on::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:56px; height:4px; border-radius:4px; background:var(--red); }
.notice { border-bottom:1px solid var(--line); padding:10px 16px; background:rgba(227,25,55,0.06); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Compose. */
.compose { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.compose textarea { width:100%; border:none; background:none; padding:8px 0; font-size:18px; min-height:56px; }
.compose textarea:focus { outline:none; }
.compose .tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:8px; }
.compose .tools .count { margin-left:auto; font-size:13px; color:var(--muted); } .compose .tools .count.over { color:var(--bad); font-weight:700; }
.compose .tool { border:none; background:none; color:var(--link); font-size:18px; padding:4px 8px; min-height:36px; }
.compose .thumbs { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:8px 0; }
.compose .thumb { position:relative; }
.compose .thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; display:block; }
.compose .thumb input { width:100%; margin-top:4px; min-height:34px; padding:4px 10px; font-size:13px; }
.compose .thumb button { position:absolute; top:6px; right:6px; min-height:28px; padding:2px 10px; background:rgba(0,0,0,0.65); color:#fff; border:none; }
.compose .quoting { border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:6px 0; font-size:14px; }
.compose select { max-width:100%; }
.hidden { display:none !important; }

/* Avatars. */
.av { width:44px; height:44px; border-radius:50%; background:var(--soft); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; flex:none; overflow:hidden; text-decoration:none; }
.av img { width:100%; height:100%; object-fit:cover; display:block; }
.av.sm { width:32px; height:32px; font-size:13px; } .av.lg { width:96px; height:96px; font-size:34px; }

/* A post. */
.post { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); position:relative; }
.post:hover { background:var(--soft); }
.post .ctx { color:var(--muted); font-size:13px; margin:-4px 0 4px 56px; }
.post .meta { display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; font-size:15px; }
.post .meta .name { font-weight:700; color:var(--text); }
.post .meta .hdl, .post .meta .when { color:var(--muted); }
.post .meta .plus { color:var(--red); font-size:12px; border:1px solid var(--red); border-radius:6px; padding:0 5px; }
.post .body { margin:2px 0 6px; white-space:pre-wrap; word-break:break-word; font-size:16px; line-height:1.45; }
.post.focus .body { font-size:21px; line-height:1.4; }
.post .body a { color:var(--link); }
.media { display:grid; gap:4px; border-radius:14px; overflow:hidden; margin:6px 0; border:1px solid var(--line); }
.media.n2, .media.n3, .media.n4 { grid-template-columns:1fr 1fr; }
.media img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/10; cursor:zoom-in; }
.media.n1 img { aspect-ratio:auto; max-height:520px; }
.media.n3 img:first-child { grid-row:span 2; aspect-ratio:auto; }
.preview { display:flex; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:6px 0; color:var(--text); background:var(--panel); }
.preview:hover { text-decoration:none; background:var(--soft); }
.preview img { width:120px; height:120px; object-fit:cover; flex:none; }
.preview .pt { padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.preview .pt b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview .pt span { font-size:13px; color:var(--muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.quote { border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:6px 0; background:var(--panel); }
.quote .post { padding:0; border:none; } .quote .post:hover { background:none; }
.hubcard svg { width:100%; height:auto; display:block; border-radius:12px; margin:6px 0; }
.acts { display:flex; justify-content:space-between; max-width:460px; margin-top:4px; }
.acts button { border:none; background:none; color:var(--muted); padding:4px 8px; min-height:34px; gap:6px; font-size:13.5px; border-radius:999px; }
.acts button:hover { background:var(--soft); color:var(--text); }
.acts button.on.like { color:var(--red); } .acts button.on.rt { color:var(--go); } .acts button.on.bm { color:var(--link); }
.acts .ico { font-size:17px; }
.more { position:relative; }
.menu { position:absolute; right:0; top:36px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); z-index:6; min-width:220px; padding:6px; display:flex; flex-direction:column; }
.menu button, .menu a { border:none; background:none; border-radius:10px; justify-content:flex-start; text-align:left; width:100%; color:var(--text); padding:9px 12px; }
.menu button:hover, .menu a:hover { background:var(--soft); text-decoration:none; }
.menu .danger { color:var(--bad); }
.chain .post { border-bottom:none; }
.chain .post::before { content:''; position:absolute; left:37px; top:58px; bottom:-14px; width:2px; background:var(--line); }
.gone { padding:12px 16px 12px 72px; color:var(--muted); font-size:14px; }
.held { background:rgba(227,25,55,0.07); border-left:3px solid var(--red); }
.edited { font-size:13px; color:var(--muted); }
.loadmore { display:block; width:100%; text-align:center; padding:14px; border:none; border-radius:0; border-bottom:1px solid var(--line); }
.empty { padding:40px 24px; text-align:center; color:var(--muted); }
.empty b { display:block; color:var(--text); font-size:20px; margin-bottom:6px; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; z-index:40; cursor:zoom-out; }
.lightbox img { max-width:96vw; max-height:92vh; }
.lightbox p { position:absolute; bottom:12px; left:0; right:0; text-align:center; color:#fff; font-size:14px; padding:0 20px; }

/* Profiles. */
.header { height:180px; background:var(--soft); overflow:hidden; } .header img { width:100%; height:100%; object-fit:cover; display:block; }
.profile { padding:0 16px 12px; }
.profile .top { display:flex; justify-content:space-between; align-items:flex-end; margin-top:-48px; gap:8px; }
.profile .top .av.lg { border:4px solid var(--bg); background:var(--panel); }
.profile .actions { display:flex; gap:8px; align-items:center; margin-top:52px; }
.profile h1 { margin-top:8px; }
.profile .bio { margin:6px 0; white-space:pre-wrap; }
.profile .facts { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px; margin:4px 0; }
.profile .counts { display:flex; gap:18px; margin:6px 0; font-size:14px; } .profile .counts b { color:var(--text); } .profile .counts a { color:var(--muted); }
.pin { color:var(--muted); font-size:13px; padding:8px 16px 0 56px; }
.person { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); align-items:flex-start; }
.person .grow b { display:block; }
.person p { margin:4px 0 0; font-size:14px; }

/* Notifications. */
.note { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.note.new { background:rgba(27,95,179,0.06); }
.note .ico { font-size:22px; width:32px; text-align:center; flex:none; }
.note .text { color:var(--muted); font-size:14px; margin-top:2px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Search and trends. */
.search { display:flex; gap:8px; padding:0 0 4px; } .search input { flex:1; border-radius:999px; }
.trend { display:block; padding:8px 0; border-bottom:1px solid var(--line); color:var(--text); }
.trend:last-child { border-bottom:none; }
.trend b { display:block; } .trend span { font-size:13px; color:var(--muted); }
.side .person { padding:8px 0; border-bottom:none; }

/* Forms (settings, join, admin). */
.form { display:flex; flex-direction:column; gap:12px; padding:16px; max-width:520px; }
.form label, .field { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--muted); }
.form label > input, .form label > textarea, .form label > select, .field > input { color:var(--text); }
.form .inline { flex-direction:row; align-items:center; gap:10px; } .form .inline input { width:20px; height:20px; min-height:0; }
.form h2 { margin:10px 0 0; }
.sect { padding:4px 16px 16px; border-bottom:1px solid var(--line); }
.sect h2 { margin:14px 0 8px; }
.token { font-family:Consolas, monospace; background:var(--soft); padding:8px; border-radius:8px; word-break:break-all; border:1px solid var(--go); }
.codes { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; font-family:Consolas, monospace; }
.codes span { background:var(--soft); padding:6px 10px; border-radius:8px; }
.line { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line); }
.line.done { opacity:0.55; }
blockquote { margin:6px 0; padding:6px 12px; border-left:3px solid var(--line); white-space:pre-wrap; }
.modq { border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 16px; display:flex; flex-direction:column; gap:8px; background:var(--panel); }
.modq .hist { font-size:13px; color:var(--muted); }
.modq .mini svg { width:100%; max-width:420px; height:auto; border-radius:8px; }
.modq img { max-width:240px; border-radius:8px; }
.stats { display:flex; flex-wrap:wrap; gap:18px; padding:8px 16px; } .stats > div { min-width:110px; } .stats b { display:block; font-size:22px; }
.trendbars { width:calc(100% - 32px); max-width:640px; height:80px; display:block; margin:6px 16px; background:var(--soft); border-radius:8px; }
details.rep summary { cursor:pointer; color:var(--muted); font-size:13px; }
.repf { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.rules { padding:0 16px 24px; max-width:680px; } .rules li { margin:4px 0; } .rules table { border-collapse:collapse; font-size:14px; } .rules td { padding:4px 10px 4px 0; border-bottom:1px solid var(--line); }

/* Cards and forums (the older parts, kept). */
.feed { display:grid; grid-template-columns:1fr; gap:0; }
.cardpost { border-bottom:1px solid var(--line); padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.cardpost svg { width:100%; height:auto; display:block; border-radius:12px; }
.cardpost .meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.like.on { color:var(--red); border-color:var(--red); }
.cmt { border-bottom:1px solid var(--line); padding:10px 16px; } .cmt p { margin:4px 0; white-space:pre-wrap; }
.cmt .meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; }
.cmt.child { margin-left:28px; border-left:2px solid var(--line); padding-left:12px; }
.form.sub { margin:6px 0 6px 28px; padding:0; }
.comms { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; padding:12px 16px; }
.comm { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); }
.comm:hover { border-color:var(--text); text-decoration:none; }
.plist { display:flex; flex-direction:column; }
.prow { display:flex; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); color:var(--text); }
.prow:hover { background:var(--soft); text-decoration:none; }
.pv { min-width:34px; text-align:center; font-weight:700; color:var(--go); }
.pt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pe { color:var(--muted); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; }
.ftabs { display:flex; gap:8px; padding:8px 16px; } .ftabs a { border:1px solid var(--line); border-radius:999px; padding:4px 12px; color:var(--muted); } .ftabs a.on { color:var(--text); border-color:var(--text); }
.pager { display:flex; gap:14px; padding:12px 16px; }
.postfull { display:flex; gap:16px; padding:12px 16px; } .postfull .grow { flex:1; min-width:0; }
.votes { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vote.on { border-color:var(--go); color:var(--go); }
.pbody { white-space:pre-wrap; line-height:1.6; margin:10px 0; }
.mini svg { width:100%; max-width:480px; height:auto; border-radius:10px; }
.badges { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; padding:0 16px 12px; }
.badge { border:1px solid var(--line); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; opacity:0.55; font-size:13px; }
.badge.have { opacity:1; border-color:#d9a400; } .badge.have b { color:#b58900; }
.prof .grid svg { width:100%; height:auto; border-radius:12px; }

/* Phones and narrow screens. */
@media (max-width: 1100px) { .shell { grid-template-columns:72px minmax(0, 1fr); } .side { display:none; } .rail .label, .rail .brand span, .rail .who .grow { display:none; } .rail a.nav, .rail button.nav { justify-content:center; padding:10px; } .rail .badge { position:absolute; margin:0; transform:translate(14px, -14px); } .rail .post-btn { width:48px; padding:0; margin:12px auto; } .rail .post-btn .label { display:none; } .rail .brand { text-align:center; padding:10px 0 16px; } }
@media (max-width: 700px) {
  .shell { grid-template-columns:minmax(0, 1fr); } .rail { display:none; } .column { border:none; padding-bottom:64px; }
  .bottom { display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--line); z-index:10; justify-content:space-around; padding:4px 0 max(4px, env(safe-area-inset-bottom)); }
  .bottom a { display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 10px; color:var(--muted); font-size:11px; min-width:52px; position:relative; }
  .bottom a .ico { font-size:22px; } .bottom a.on { color:var(--text); }
  .bottom .badge { position:absolute; top:2px; right:6px; background:var(--red); color:#fff; border-radius:999px; font-size:10px; padding:0 5px; font-weight:700; }
  .post.focus .body { font-size:18px; }
  .compose textarea { font-size:16px; }
  .preview img { width:90px; height:90px; }
  .header { height:120px; }
  .stats { gap:12px; }
  .postfull { flex-direction:column; }
}