/* Ciliate.org Community — shared design mockup styles */
/* Latin-subset WOFF (~82KB each) instead of the 2.3MB full-CJK TTFs — kills the font-swap flash. */
@font-face{font-family:'Gothic A1';src:url('fonts/GothicA1-Regular.woff?v=2') format('woff');font-weight:400;font-display:swap;}
@font-face{font-family:'Gothic A1';src:url('fonts/GothicA1-Black.woff?v=2') format('woff');font-weight:900;font-display:swap;}

:root{
	--green:#5f9440; --green-2:#8BB553; --green-deep:#3f7a4f;
	--ink:#1e2a12; --muted:#7c8a68; --bg:#eef3e7; --card:#ffffff;
	--line:#e6ede0; --shadow:0 6px 20px rgba(50,80,20,.08); --radius:18px;
}

/* Cross-page transitions via the View Transitions API (needs http — see the /mockups/ alias).
   The top bar and left rail are NAMED so they persist across navigations (stay put, no fade,
   no white flash); only the page content cross-fades. */
@view-transition{ navigation:auto; }
.topbar{ view-transition-name:site-topbar; }
.rail{ view-transition-name:site-rail; }
@media (prefers-reduced-motion:no-preference){
	::view-transition-old(root){ animation-duration:.11s; }
	::view-transition-new(root){ animation-duration:.15s; }
}

/* --- center content load-in (subtle fade + rise). Delete this block to revert. --- */
@keyframes contentin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
	.page{ animation:contentin .30s ease both; }
}

/* readable text selection (was the browser-default blue) */
::selection{ background:#8BB553; color:#fff; }

/* clear, high-contrast focus on all form fields (fixes the hard-to-read highlight) */
.f:focus, select.f:focus, .reply-box textarea:focus, .tp-compose input:focus{
	border-color:#6f9a3f; background:#fff; box-shadow:0 0 0 3px rgba(139,181,83,.25); color:var(--ink);
}
.search input:focus{ outline:none; background:transparent; border:0; box-shadow:none; }  /* just click & type — no box */
select.f option:checked{ background:#8BB553; color:#fff; }   /* selected option contrast */

/* ---------- search results ---------- */
.sresult{position:relative;cursor:pointer;display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
	border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:10px;transition:transform .12s,box-shadow .12s;}
.sresult:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(50,80,20,.12);}
.sresult .avatar{width:40px;height:40px;flex:0 0 40px;}
.sresult .t{flex:1;min-width:0;}
.sresult .title{font-weight:900;color:var(--ink);font-size:1.05rem;}
.sresult .title::after{content:"";position:absolute;inset:0;}
.sresult .snippet{color:var(--muted);font-size:.9rem;margin:4px 0;}
.sresult .snippet mark,.posthilit{background:#eaf3d8;color:#3f6b18;border-radius:4px;padding:0 3px;}
.sresult .by{font-size:.8rem;color:var(--muted);} .sresult .by b{color:var(--ink);}

/* ---------- user menu (avatar dropdown w/ log out) ---------- */
.usermenu-btn{border:0;background:none;cursor:pointer;padding:0;display:flex;align-items:center;gap:5px;}
.usermenu-btn::after{content:"▾";color:var(--green);font-size:.85rem;line-height:1;transition:transform .15s;}  /* menu affordance */
.usermenu.open .usermenu-btn::after{transform:rotate(180deg);}
.usermenu .dd-menu{right:0;left:auto;min-width:224px;}
.dd-menu.um a{display:flex;align-items:center;gap:9px;}
.um-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.um-head .avatar{width:40px;height:40px;} .um-head b{color:var(--ink);display:block;} .um-head span{color:var(--muted);font-size:.78rem;}
.um-sep{height:1px;background:var(--line);margin:4px 0;}
.dd-menu.um a.logout{color:#c25b4e;}
.dd-menu.um a.logout:hover{background:#fbeae7;}

/* ---------- auth (login) ---------- */
.auth{max-width:430px;margin:6vh auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 32px;}
.auth .brand-lg{text-align:center;margin-bottom:16px;}
.auth .brand-lg .mark{width:56px;height:56px;border-radius:16px;margin:0 auto;font-size:28px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#9cc267,#3f7a4f);box-shadow:0 4px 10px rgba(63,122,79,.35);}
.auth h1{font-weight:900;color:var(--ink);font-size:1.45rem;text-align:center;}
.auth .sub{text-align:center;color:var(--muted);margin:6px 0 22px;font-size:.92rem;}
.auth label{display:block;font-weight:800;color:var(--ink);margin:14px 0 6px;font-size:.88rem;}
.auth .rememberrow{display:flex;align-items:center;justify-content:space-between;margin:16px 0;font-size:.88rem;color:var(--muted);}
.auth .rememberrow a{color:var(--green);font-weight:700;}
.auth .btn{width:100%;text-align:center;margin-top:6px;padding:12px;}
.auth .note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.85rem;}
.auth .note a{color:var(--green);font-weight:700;}

/* ---------- guest (logged-out) banner ---------- */
.guest-cta{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#8BB553,#5f9440);color:#fff;
	border-radius:var(--radius);padding:16px 22px;margin-bottom:22px;box-shadow:0 6px 18px rgba(63,122,79,.22);}
.guest-cta .txt{flex:1;} .guest-cta b{font-size:1.05rem;}
.guest-cta .btn{background:#fff;color:var(--green) !important;box-shadow:none;}

/* ---------- profile ---------- */
.profile-hero{display:flex;gap:22px;align-items:center;background:var(--card);border:1px solid var(--line);
	border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-bottom:20px;}
.profile-hero > .avatar{width:96px;height:96px;flex:0 0 96px;}
.profile-hero h1{font-weight:900;color:var(--ink);font-size:1.6rem;}
.profile-hero .meta{color:var(--muted);margin-top:4px;}
.profile-hero .pstats{display:flex;gap:26px;margin-top:14px;}
.profile-hero .pstats b{display:block;color:var(--ink);font-size:1.25rem;} .profile-hero .pstats span{color:var(--muted);font-size:.78rem;}
.profile-hero .pacts{margin-left:auto;display:flex;flex-direction:column;gap:8px;}
@media(max-width:760px){.profile-hero{flex-direction:column;text-align:center;} .profile-hero .pacts{margin:0;width:100%;} .profile-hero .pstats{justify-content:center;}}

/* ---------- settings ---------- */
.settings-grid{display:grid;grid-template-columns:220px 1fr;gap:22px;}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr;}}
.set-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;height:fit-content;}
.set-nav a{display:block;padding:10px 14px;border-radius:10px;font-weight:700;color:var(--ink);}
.set-nav a.on,.set-nav a:hover{background:#eef4e3;color:var(--green);}
.set-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;}
.set-section{margin-bottom:28px;} .set-section h3{font-weight:900;color:var(--ink);margin-bottom:4px;}
.set-section .hint{color:var(--muted);font-size:.88rem;margin-bottom:14px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line);}
.toggle-row:last-child{border-bottom:0;} .toggle-row .l b{color:var(--ink);display:block;} .toggle-row .l span{color:var(--muted);font-size:.82rem;}
.switch{width:46px;height:26px;border-radius:999px;background:#cdd7bf;position:relative;cursor:pointer;transition:background .15s;flex:0 0 46px;}
.switch.on{background:var(--green);} .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.switch.on::after{left:23px;}
.readonly-note{background:#f4f7ee;border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--muted);font-size:.85rem;}
.readonly-note a{color:var(--green);font-weight:700;}
*{box-sizing:border-box;margin:0;padding:0;}
/* html paints the whole viewport so there's never half-page white; content sizes to itself */
html{min-height:100vh;background:var(--bg);}
body{font-family:'Gothic A1','Segoe UI',Arial,sans-serif;background:transparent;color:#2f3a24;line-height:1.5;padding-left:74px;}

/* ---------- left site rail (home + species genome sites) ---------- */
.rail{position:fixed;top:0;left:0;bottom:0;width:74px;background:linear-gradient(180deg,#3f7a4f,#2c5738);
	display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 0 14px;z-index:60;overflow:visible;}
/* home icon centered inside the top-bar-height zone, so the divider lines up with the top bar's bottom edge */
.rail a.home{margin-top:9px;}
.rail a{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;
	font-weight:900;font-size:.82rem;background:rgba(255,255,255,.14);position:relative;transition:border-radius .15s,transform .1s,background .15s;flex:0 0 auto;}
.rail a:hover{border-radius:12px;transform:translateY(-1px);}
.rail a.home{background:#fff;color:#3f7a4f;font-size:1.2rem;}
.rail .sep{width:34px;height:2px;background:rgba(255,255,255,.22);border-radius:2px;margin:2px 0;flex:0 0 auto;}
.rail a .tip{position:absolute;left:58px;white-space:nowrap;background:#17210d;color:#fff;padding:6px 11px;border-radius:9px;
	font-size:.78rem;font-weight:700;opacity:0;pointer-events:none;transform:translateX(-4px);transition:.12s;box-shadow:0 4px 12px rgba(0,0,0,.25);}
.rail a:hover .tip{opacity:1;transform:translateX(0);}

/* ---------- starred / favorites ---------- */
.star{cursor:pointer;color:#e0b53c;font-size:1.15rem;line-height:1;user-select:none;}
.star.off{color:#cdd7bf;}
.card .star{position:absolute;top:12px;right:14px;}
.side .fav{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);}
.side .fav:last-child{border-bottom:0;}
.side .fav .ic{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.side .fav a{font-weight:800;color:var(--ink);font-size:.9rem;flex:1;}
.side .fav .star{font-size:1rem;}
.trow .star{flex:0 0 auto;}
a{text-decoration:none;color:inherit;}
.avatar{border-radius:50%;object-fit:cover;background:#cfe0b4;display:inline-block;overflow:hidden;}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.btn{background:linear-gradient(135deg,#9cc267,#5f9440);color:#fff !important;padding:9px 18px;border-radius:999px;
	font-weight:800;box-shadow:0 3px 10px rgba(95,148,64,.35);border:0;cursor:pointer;display:inline-block;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn.ghost{background:#eef4e3;color:var(--green) !important;box-shadow:none;}
.badge{display:inline-block;font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.5px;vertical-align:middle;}
.badge.staff{background:#5f9440;color:#fff;} .badge.admin{background:#b58a2f;color:#fff;}
.badge.mod{background:#3f7a9f;color:#fff;} .badge.pin{background:#c25b4e;color:#fff;} .badge.solved{background:#5f9440;color:#fff;}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.topbar .inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:0 22px;height:64px;}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.35rem;color:var(--ink);}
.brand .mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#9cc267,#3f7a4f);display:flex;
	align-items:center;justify-content:center;color:#fff;font-size:20px;box-shadow:0 3px 8px rgba(63,122,79,.35);}
.brand small{display:block;font-weight:400;font-size:.72rem;color:var(--muted);letter-spacing:.3px;}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:#f1f5ea;border:1px solid var(--line);
	border-radius:999px;padding:9px 16px;color:var(--muted);}
.search input{border:0;background:transparent;outline:0;flex:1;min-width:0;font:inherit;color:var(--ink);}
.search{min-width:0;}
.topnav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.topnav a{padding:8px 14px;border-radius:999px;font-weight:700;color:var(--green);font-size:.92rem;}
.topnav a:hover,.topnav a.active{background:#eaf2dd;color:var(--ink);}
.topnav .me{width:34px;height:34px;background:#3f7a9f;box-shadow:none;}
.topnav a:has(.me){padding:2px;background:none !important;box-shadow:none;}  /* clean flat avatar, no hover pill */

/* layout */
.page{max-width:1180px;margin:24px auto;padding:0 22px;}
.page.grid{display:grid;grid-template-columns:1fr 320px;gap:24px;}
@media(max-width:900px){.page.grid{grid-template-columns:1fr;}}
/* species-sites dropdown — shown on mobile (replaces the rail), hidden on desktop */
.dd-wrap.sites-menu{display:none;position:relative;}   /* .dd-wrap.sites-menu beats the later .dd-wrap{display:inline-block} */
.sites-btn{border:0;background:#eef4e3;border-radius:12px;width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--green);}
.sites-btn:hover{background:#e0ecd0;}
.sites-btn svg{width:22px;height:22px;}
.sites-dd{left:0;right:auto;min-width:230px;max-height:70vh;overflow-y:auto;}
.sites-dd .dd-hd{padding:9px 12px 6px;font-size:.72rem;font-weight:800;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;}
.sites-dd a{display:flex;align-items:center;gap:10px;}
.sites-dd .dot{width:16px;height:16px;border-radius:5px;flex:0 0 16px;}

/* mobile: hide the fixed left rail + reclaim its space, show the sites dropdown,
   drop Board/Members/Messages from the bar, and let the top bar wrap.
   NOTE: the rail-hide must live AFTER the base `.rail{display:flex}` rule or source
   order keeps the rail visible (that was the overlap bug). */
/* PHONE ONLY (<=640): the left rail is hidden and the sites dropdown replaces it.
   Above 640 the rail is shown and the dropdown is hidden (rail = the sidebar links). */
@media(max-width:640px){
	body{padding-left:0 !important;}
	.rail{display:none !important;}
	.dd-wrap.sites-menu{display:flex;}
	.topnav .nav-link{display:none;}
	/* forum-page header: wrap so the New-topic button drops to its own line instead of warping */
	.pagehead{flex-wrap:wrap;}
	.pagehead h1{font-size:1.4rem;}
	.pagehead .btn{flex-shrink:0;}
}
/* SMALL SCREENS (<=760): let the top bar wrap so it never overflows the viewport */
@media(max-width:760px){
	.topbar .inner{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px 12px;}
	.brand{font-size:1.15rem;}
	.brand .mark{width:34px;height:34px;}
	.search{order:3;flex-basis:100%;max-width:none;}
	.topnav{margin-left:auto;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
	.topnav a{padding:6px 10px;font-size:.86rem;}
}
@media(max-width:400px){
	.brand small{display:none;}
	.topnav a{padding:5px 8px;font-size:.8rem;}
}
/* stop long unbreakable strings (TTHERM IDs, URLs) from forcing horizontal scroll */
.post .content,.sresult .snippet,.content{overflow-wrap:break-word;word-break:break-word;}
.codebox,pre{overflow-x:auto;max-width:100%;}
.crumbs{max-width:1180px;margin:18px auto 0;padding:0 22px;color:var(--muted);font-size:.9rem;}
.crumbs a{color:var(--green);font-weight:700;}
.pagehead{display:flex;align-items:center;gap:14px;margin:10px 4px 18px;}
.pagehead h1{font-weight:900;font-size:1.7rem;color:var(--ink);}
.pagehead .sub{color:var(--muted);font-size:.95rem;}
.pagehead .spacer{flex:1;}

/* hero */
.hero{background:linear-gradient(120deg,#8BB553 0%,#5f9440 55%,#3f7a5f 100%);color:#fff;border-radius:var(--radius);
	padding:28px 30px;margin-bottom:24px;box-shadow:0 8px 24px rgba(63,122,79,.22);}
.hero h1{font-weight:900;font-size:1.9rem;margin-bottom:6px;}
.hero p{opacity:.95;max-width:640px;}
.hero .stats{display:flex;gap:26px;margin-top:16px;font-size:.9rem;}
.hero .stats b{display:block;font-size:1.35rem;}

/* category + forum cards (index) */
.cat-head{display:flex;align-items:center;gap:10px;margin:26px 4px 12px;}
.cat-head h2{font-weight:900;font-size:1.15rem;color:var(--ink);text-transform:uppercase;letter-spacing:.6px;}
.cat-head .line{flex:1;height:1px;background:var(--line);}
.card{position:relative;display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	box-shadow:var(--shadow);padding:18px 20px;margin-bottom:14px;transition:transform .15s,box-shadow .15s,border-color .15s;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(50,80,20,.14);border-color:#cfe0b4;}
.card .icon,.pagehead .icon{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
	font-size:26px;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);font-family:'Gothic A1','Segoe UI',Arial,sans-serif;}
.icon.c1{background:linear-gradient(135deg,#9cc267,#5f9440);} .icon.c2{background:linear-gradient(135deg,#6fb0c9,#3f7a9f);}
.icon.c3{background:linear-gradient(135deg,#c9a86f,#a97f3f);} .icon.c4{background:linear-gradient(135deg,#b58bd0,#7f4fa0);}
.card .body{flex:1;min-width:0;} .card .body h3{font-weight:900;font-size:1.12rem;color:var(--ink);}
.card .body p{color:var(--muted);font-size:.92rem;margin-top:2px;}
.card .meta{display:flex;gap:16px;margin-top:8px;font-size:.8rem;color:var(--muted);} .card .meta b{color:var(--ink);}
.card .last{flex:0 0 250px;display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:16px;}
@media(max-width:760px){.card .last{display:none;}}
.card .last .avatar{width:40px;height:40px;}
.card .last .lp-title{font-weight:700;color:var(--ink);font-size:.88rem;display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card .last .lp-meta{color:var(--muted);font-size:.78rem;}
/* whole-card click: the forum-name link stretches over the whole card; the last-post link stays independently clickable above it */
.card .card-link{color:var(--ink);}
.card .card-link::after{content:"";position:absolute;inset:0;z-index:1;}
.card .last a{position:relative;z-index:2;}

/* sidebar */
.side .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;}
.side h4{font-weight:900;color:var(--ink);font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;}
.side .stat-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem;}
.side .stat-row:last-child{border-bottom:0;} .side .stat-row b{color:var(--green);}
.side .who{display:flex;flex-wrap:wrap;gap:6px;} .side .who .avatar{width:34px;height:34px;}
.act{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);} .act:last-child{border-bottom:0;}
.act .avatar{width:34px;height:34px;flex:0 0 34px;} .act .t{font-size:.85rem;} .act .t b{color:var(--ink);}
.act .t span{color:var(--muted);font-size:.78rem;display:block;}

/* topic list (viewforum) */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.trow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;
	box-shadow:var(--shadow);padding:14px 18px;margin-bottom:10px;transition:transform .12s,box-shadow .12s;}
.trow:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(50,80,20,.12);}
.trow.pinned{border-color:#e2d9b0;background:#fbf8ec;}
.trow .avatar{width:44px;height:44px;flex:0 0 44px;}
.trow .t{flex:1;min-width:0;}
.trow .t a.title{font-weight:900;color:var(--ink);font-size:1.05rem;}
.trow .t a.title:hover{color:var(--green);}
.trow .t .by{color:var(--muted);font-size:.82rem;margin-top:2px;}
.trow .nums{display:flex;gap:20px;text-align:center;color:var(--muted);font-size:.78rem;}
.trow .nums b{display:block;color:var(--ink);font-size:1.05rem;}
.trow .lastcol{flex:0 0 180px;font-size:.82rem;color:var(--muted);}
.trow .lastcol b{color:var(--ink);}
@media(max-width:760px){.trow .nums,.trow .lastcol{display:none;}}
/* whole-row click: the title's link stretches over the entire row; star stays independently clickable */
.trow{position:relative;cursor:pointer;}
.trow .t a.title::after{content:"";position:absolute;inset:0;z-index:1;}
.trow .star{position:relative;z-index:2;}

/* reusable sort/filter dropdown */
.dd-wrap{position:relative;display:inline-block;}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:#fff;border:1px solid var(--line);
	border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:6px;display:none;z-index:40;}
.dd-wrap.open .dd-menu{display:block;}
.dd-menu a{display:block;padding:9px 12px;border-radius:8px;font-weight:700;color:var(--ink);font-size:.9rem;}
.dd-menu a:hover{background:#f2f7ec;}
.dd-menu a.on{color:var(--green);} .dd-menu a.on::before{content:"✓ ";}

.pager{display:flex;gap:6px;justify-content:center;margin:18px 0;}
.pager a{padding:7px 13px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-weight:700;color:var(--green);}
.pager a.on{background:var(--green);color:#fff;border-color:var(--green);}

/* members grid */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
	padding:20px;text-align:center;transition:transform .12s,box-shadow .12s;}
.mcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(50,80,20,.14);}
.mcard .avatar{width:72px;height:72px;margin:0 auto 10px;display:block;}
.mcard h3{font-weight:900;color:var(--ink);font-size:1.05rem;}
.mcard .role{margin:6px 0;}
.mcard .mstats{display:flex;justify-content:center;gap:18px;margin-top:10px;color:var(--muted);font-size:.8rem;}
.mcard .mstats b{display:block;color:var(--ink);font-size:1rem;}
.online-dot{width:9px;height:9px;border-radius:50%;background:#5fb04f;display:inline-block;margin-right:5px;}

/* thread (viewtopic) */
.post{display:flex;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;}
.post .who{flex:0 0 190px;background:#f6f9f1;border-right:1px solid var(--line);padding:22px 18px;text-align:center;}
.post .who .avatar{width:74px;height:74px;margin:0 auto 10px;display:block;}
.post .who .name{font-weight:900;color:var(--ink);}
.post .who .r{margin:6px 0;} .post .who .pc{color:var(--muted);font-size:.78rem;}
.post .body{flex:1;padding:20px 24px;}
.post .body .phead{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:14px;}
.post .body .content{color:#33402a;} .post .body .content p{margin-bottom:12px;}
.post .body .acts{margin-top:16px;display:flex;gap:8px;}
@media(max-width:760px){.post{flex-direction:column;}.post .who{flex:none;display:flex;gap:12px;align-items:center;text-align:left;border-right:0;border-bottom:1px solid var(--line);}.post .who .avatar{margin:0;width:48px;height:48px;}}
.reply-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;}
.reply-box textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;resize:vertical;}

/* messages (DM inbox) */
.msg-wrap{display:grid;grid-template-columns:320px 1fr;gap:0;background:var(--card);border:1px solid var(--line);
	border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;height:calc(100vh - 210px);min-height:520px;}
.convo-list{overflow-y:auto;} .tp-body{overflow-y:auto;}
@media(max-width:760px){.msg-wrap{grid-template-columns:1fr;}}
.convo-list{border-right:1px solid var(--line);}
.convo-list .clhead{padding:16px 18px;font-weight:900;color:var(--ink);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.convo{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;}
.convo:hover,.convo.active{background:#f2f7ec;}
.convo .avatar{width:44px;height:44px;flex:0 0 44px;}
.convo .c{flex:1;min-width:0;}
.convo .c .n{font-weight:800;color:var(--ink);display:flex;justify-content:space-between;}
.convo .c .n span{font-weight:400;color:var(--muted);font-size:.75rem;}
.convo .c .snip{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.convo .unread{background:var(--green);color:#fff;border-radius:999px;font-size:.7rem;font-weight:800;padding:1px 7px;align-self:center;}
.thread-pane{display:flex;flex-direction:column;}
.tp-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;font-weight:900;color:var(--ink);}
.tp-body{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px;background:#f8faf4;}
.bubble{max-width:70%;padding:11px 15px;border-radius:16px;font-size:.92rem;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.bubble.them{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px;}
.bubble.me{background:linear-gradient(135deg,#9cc267,#5f9440);color:#fff;align-self:flex-end;border-bottom-right-radius:5px;}
.bubble .time{display:block;font-size:.68rem;opacity:.7;margin-top:4px;}
.tp-compose{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;}
.tp-compose input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font:inherit;outline:0;}

/* footer */
.footer{max-width:1180px;margin:24px auto 40px;padding:0 22px;color:#93a17f;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.footer a{color:var(--green);font-weight:700;}

/* ---------- compose (new topic / new message) ---------- */
.compose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;}
.compose label{display:block;font-weight:800;color:var(--ink);margin:16px 0 6px;font-size:.9rem;}
.compose label:first-of-type{margin-top:0;}
.f{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;outline:0;background:#fbfdf8;color:var(--ink);}
select.f{cursor:pointer;} textarea.f{min-height:220px;resize:vertical;} .title-in{font-size:1.2rem;font-weight:800;}
.editor-toolbar{display:flex;gap:4px;padding:8px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#f4f7ee;}
.editor-toolbar button{border:0;background:transparent;width:36px;height:34px;border-radius:8px;cursor:pointer;font-weight:800;color:var(--ink);font-size:.95rem;}
.editor-toolbar button:hover{background:#e5eed6;}
.editor-toolbar + textarea.f{border-radius:0 0 12px 12px;}
.compose .actions{display:flex;gap:10px;margin-top:20px;align-items:center;}
.compose .actions .spacer{flex:1;}
.tips li{margin:8px 0;color:var(--muted);font-size:.9rem;} .tips li b{color:var(--ink);}

/* recipient typeahead */
.recip{position:relative;}
.recip .field{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fbfdf8;min-height:50px;}
.recip .field:focus-within{border-color:#9cc267;box-shadow:0 0 0 3px rgba(139,181,83,.18);}
.recip .chip{display:flex;align-items:center;gap:6px;background:#e9f2dc;border:1px solid #cfe0b4;border-radius:999px;padding:4px 8px 4px 4px;font-weight:700;font-size:.85rem;color:var(--ink);}
.recip .chip .avatar{width:24px;height:24px;} .recip .chip .x{cursor:pointer;color:#8a9a70;font-weight:900;padding:0 2px;}
.recip .field input{border:0;background:transparent;outline:0;flex:1;min-width:140px;font:inherit;padding:6px;}
.recip .dd{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.16);z-index:20;overflow:hidden;max-height:300px;overflow-y:auto;}
.recip .dd .hd{padding:9px 14px;font-size:.72rem;font-weight:800;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;background:#f6f9f1;}
.recip .opt{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;}
.recip .opt:hover,.recip .opt.hl{background:#f2f7ec;}
.recip .opt .avatar{width:34px;height:34px;} .recip .opt .nm{font-weight:800;color:var(--ink);} .recip .opt .ro{margin-left:auto;}
.recip .empty{padding:14px;color:var(--muted);font-size:.9rem;text-align:center;}

/* ============================================================================
   INHERITED phpBB PAGES — post editor, PM compose/reply, UCP profile & prefs,
   MCP, etc. still use phpBB's default markup. Rather than rebuild each template,
   we brand phpBB's stock classes (.panel/.inputbox/.button*/fieldset dl) with our
   tokens so those pages match the design. Our rebuilt pages use their own classes
   (.card/.trow/.post/.btn/.f) and are unaffected.
   ============================================================================ */

/* Inherited pages (post editor, MCP…) put content directly in #page-body with NO .page
   wrapper, so it would run full-bleed. Center + pad just those top-level containers to
   match our .page column. IMPORTANT: never restyle .page itself — our rebuilt pages
   already own their width/margins, and overriding them here made every page full-width. */
#page-body > .panel,#page-body > form,#page-body > .forumbg,#page-body > .forabg,
#page-body > .action-bar,#page-body > .rules,#page-body > .notice,
#page-body > .posting-title,#page-body > h2{
	max-width:1180px;margin:22px auto;padding:0 22px;
}

/* panels → cards */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px;}
.panel .inner{padding:0;}
.panel h2,.posting-title,.ucp-title{font-weight:900;color:var(--ink);font-size:1.5rem;margin:0 0 14px;}
.panel h3{font-weight:900;color:var(--ink);font-size:1.1rem;margin-bottom:8px;}
.posting-title a,.panel h2 a{color:var(--ink);}
/* inside our settings shell the panel is already carded — flatten it */
.set-panel .panel{border:0;box-shadow:none;padding:0;margin:0 0 16px;background:none;}

/* form fields */
.inputbox,#page-body input[type=text],#page-body input[type=password],#page-body input[type=email],
#page-body input[type=number],#page-body input[type=url],#page-body input[type=search],#page-body textarea,#page-body select{
	border:1px solid var(--line);border-radius:12px;padding:10px 13px;font:inherit;background:#fbfdf8;color:var(--ink);outline:0;max-width:100%;}
textarea.inputbox,#message,#signature{width:100%;min-height:180px;resize:vertical;line-height:1.5;}
.inputbox.autowidth{width:auto;}
.inputbox:focus,#page-body input:focus,#page-body textarea:focus,#page-body select:focus{border-color:#6f9a3f;background:#fff;box-shadow:0 0 0 3px rgba(139,181,83,.25);}

/* label/field rows */
fieldset.fields1 dl,fieldset.fields2 dl{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--line);margin:0;}
fieldset.fields1 dl:last-child,fieldset.fields2 dl:last-child{border-bottom:0;}
fieldset.fields1 dt,fieldset.fields2 dt{font-weight:800;color:var(--ink);flex:0 0 210px;max-width:210px;}
fieldset dt label{font-weight:800;color:var(--ink);}
fieldset.fields1 dd,fieldset.fields2 dd{margin-left:0;flex:1;min-width:220px;color:var(--muted);}
fieldset dd label{font-weight:600;color:var(--ink);}
@media(max-width:640px){fieldset.fields1 dt,fieldset.fields2 dt{flex-basis:100%;max-width:none;}}

/* buttons */
input.button1,button.button1,input.button2,button.button2,.button,a.button{
	display:inline-block;border:0;cursor:pointer;font-weight:800;border-radius:999px;padding:9px 18px;font:inherit;text-decoration:none;line-height:1.2;}
input.button1,button.button1,.default-submit-action{background:linear-gradient(135deg,#9cc267,#5f9440);color:#fff;box-shadow:0 3px 10px rgba(95,148,64,.35);}
input.button2,button.button2,.button.button-secondary,a.button.button-secondary{background:#eef4e3;color:var(--green);}
.button:not(.button-secondary){background:linear-gradient(135deg,#9cc267,#5f9440);color:#fff;}
.button1:hover,.button2:hover,.button:hover{transform:translateY(-1px);}
fieldset.submit-buttons{text-align:center;padding:4px 0;}

/* BBCode editor toolbar */
#format-buttons,.format-buttons{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;align-items:center;}
#format-buttons button,#format-buttons input.button2,#format-buttons select{background:#eef4e3;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:none;}
#format-buttons button:hover{background:#e0ecd0;transform:none;}
.smiley-box{margin:10px 0;color:var(--muted);} .bbcode-status{color:var(--muted);font-size:.82rem;margin-top:8px;}
.message-box{margin-top:4px;}

/* notices / errors / rules */
#page-body .error,.error{color:#a4392b;}
.notice,.rules{background:#f4f7ee;border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--muted);margin-bottom:14px;}

/* editor sub-panel tabs (options / attachments / poll) */
.tabs.sub-panels ul,#tabs.tabs ul{display:flex;gap:6px;list-style:none;margin:16px 0 0;padding:0;}
.tabs .tab a{display:inline-block;padding:8px 16px;border-radius:12px 12px 0 0;background:#eef4e3;color:var(--green);font-weight:700;}
.tabs .tab.activetab a{background:var(--card);color:var(--ink);border:1px solid var(--line);border-bottom:0;}

/* generic tables on inherited pages (drafts, groups, attachments) */
#page-body table.table1{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
#page-body table.table1 th{background:#eef4e3;color:var(--ink);text-align:left;padding:11px 14px;font-weight:800;}
#page-body table.table1 td{padding:11px 14px;border-top:1px solid var(--line);}

/* topic ★ bookmark / 🔔 watch toggles in the thread pagehead */
.topic-tools{display:flex;gap:8px;align-items:center;}
.star-btn{background:#eef4e3;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:800;color:var(--green);cursor:pointer;display:inline-flex;gap:6px;align-items:center;}
.star-btn.on{background:linear-gradient(135deg,#f0c14b,#e0a92c);color:#fff;border-color:#e0a92c;}
.star-btn:hover{transform:translateY(-1px);}

/* ============================================================================
   BRANDING (2026-07-20): real species art in the rail, ciliate SVG mark,
   outline search icon, and a sticky footer.
   ============================================================================ */

/* Left rail: real species drawings (from the landing nav) on their colored tiles.
   The art is light line-work, so normalize every icon to crisp white. */
.rail a.sp{padding:6px;}
.rail a.sp img{width:100%;height:100%;object-fit:contain;display:block;filter:brightness(0) invert(1);opacity:.95;}
.rail a.sp:hover img{opacity:1;}

/* Brand ciliate mark (inline SVG replaces the emoji) */
.brand .mark svg{width:28px;height:28px;display:block;}
.auth .brand-lg .mark svg{width:40px;height:40px;display:block;}

/* Clean outline magnifier (replaces the colored 🔍 emoji) */
.search .search-ic{width:18px;height:18px;flex:0 0 18px;color:var(--muted);}

/* Sticky footer: the page column fills the viewport so .footer sits at the bottom
   even on short pages (was floating mid-page). */
body{display:flex;flex-direction:column;min-height:100vh;}
#page-body{flex:1 0 auto;}
.footer{flex-shrink:0;}
/* phpBB's runtime overlays are revealed by JS on demand; without prosilver's CSS we
   must hide them at rest so they don't render as empty blocks under the footer. */
#darkenwrapper,#phpbb_alert,#phpbb_confirm{display:none;}

/* ============================================================================
   PROFILE VIEW + UCP CONTENT (2026-07-20). phpBB's profile/overview/friends/
   groups pages use dl.details / .column1-2 / .left-box / avatar containers that
   the form CSS above didn't cover, so they rendered bare. These classes appear
   only on inherited pages (our rebuilt pages use their own), so styling is safe.
   ============================================================================ */
.memberlist-title{font-weight:900;color:var(--ink);font-size:1.5rem;margin:0 0 16px;}
.panel h3{font-weight:900;color:var(--ink);font-size:1.05rem;margin-bottom:10px;}

/* two-column blocks (contact | board stats, etc.) */
.column1,.column2{float:left;width:48%;box-sizing:border-box;}
.column2{float:right;}
.panel .inner:after{content:"";display:table;clear:both;}
@media(max-width:640px){.column1,.column2{float:none;width:100%;}.column2{margin-top:18px;}}

/* label : value detail lists */
dl.details{overflow:hidden;margin:0;}
dl.details dt{float:left;clear:left;width:34%;font-weight:800;color:var(--ink);padding:8px 14px 8px 0;box-sizing:border-box;}
dl.details dd{margin-left:34%;padding:8px 0;color:var(--muted);}
dl.details dd a{color:var(--green);font-weight:700;}
@media(max-width:640px){dl.details dt,dl.details dd{float:none;width:100%;margin-left:0;padding:4px 0;}}

/* profile avatar block */
.avatar-rank-container{float:left;margin:0 26px 14px 0;text-align:center;}
.avatar-rank-container .profile-avatar{margin-bottom:8px;}
.profile-avatar img,.avatar-container img{border-radius:16px;box-shadow:var(--shadow);max-width:130px;height:auto;}
.profile-details{overflow:hidden;}
.signature.standalone{color:var(--muted);}

/* phpBB list rows (UCP overview / bookmarks / subscribed / drafts) */
.topiclist{list-style:none;margin:0 0 14px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.topiclist.two-long-columns,.topiclist.cplist{box-shadow:var(--shadow);}
.topiclist li.row{border-top:1px solid var(--line);position:relative;}
.topiclist li.row:first-child{border-top:0;}
.topiclist li.row .list-inner{padding:13px 16px;}
.topiclist .row-item dt{padding:0;}
.topiclist a.topictitle{font-weight:800;color:var(--ink);}
.topiclist a.topictitle:hover{color:var(--green);}
.topiclist .row-item dd{color:var(--muted);font-size:.85rem;}
.topiclist li.header{background:#eef4e3;}
.topiclist li.header .list-inner,.topiclist li.header dd{padding:10px 16px;font-weight:800;color:var(--ink);}

/* members grid: the whole card links to the member's profile */
.mcard{position:relative;}
.mcard .card-link{position:absolute;inset:0;z-index:1;border-radius:var(--radius);}
.mcard h3 a,.mcard .mstats a{position:relative;z-index:2;}
.mcard:hover{border-color:#cfe0b4;}
/* profile-view avatar: real uploaded image fills the round frame */
.profile-hero > .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}

/* ============================================================================
   POST EDITOR + FORM POLISH (2026-07-21)
   ============================================================================ */

/* FontAwesome is loaded, but every icon uses prosilver's .icon class which only
   gets its icon font from prosilver's CSS (not loaded). One rule renders them all
   (BBCode toolbar, alert close, back-to-top, etc.). */
.icon{font-family:'FontAwesome';font-weight:normal;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;display:inline-block;-webkit-font-smoothing:antialiased;}
.icon-md{font-size:1.15em;} .icon-lg{font-size:1.3em;}
.icon-red{color:#c25b4e;} .icon-blue{color:#3f7a9f;} .icon-green{color:#5f9440;}
.icon-gray,.icon-lightgray{color:var(--muted);}

/* remove the default (ugly) fieldset chrome on every inherited phpBB form */
#page-body fieldset,.set-panel fieldset{border:0;margin:0;padding:0;min-width:0;}

/* BBCode toolbar buttons: square, centered, with the now-visible FA glyph */
#format-buttons button{min-width:36px;height:34px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;font-size:.98rem;}
#format-buttons .bbcode-size{height:34px;border-radius:8px;padding:0 8px;}
#smiley-box img,.smiley-box img{vertical-align:middle;margin:2px;}

/* Our flex thread-post layout (.post{display:flex}) is the default so viewtopic/PM
   always work; inherited posts (topic review, preview, search) have no .who, so
   revert THEM to block. Flex stays the fallback if :has() is unsupported. */
.post:not(:has(.who)){display:block;}
.post:not(:has(.who)) > .inner{padding:18px 20px;}
.post.post-ignore{display:none;}   /* hidden/ignored placeholder posts */

/* topic-review + preview blocks under the editor */
.topicreview,.review{margin-top:18px;}
.topicreview h3,.review h3,#preview h3{font-weight:900;color:var(--ink);font-size:1.05rem;margin:0 0 10px;}
.post .author{color:var(--muted);font-size:.84rem;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--line);}
.post .author a{color:var(--green);font-weight:700;}
.post .content{color:var(--ink);line-height:1.6;}
.post-buttons{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 10px;}
.post-buttons .button{padding:6px 10px;}
.post .notice,.post .post-notice{margin:8px 0;}

/* ---- modern compose editor (new topic / reply / PM) ---- */
.compose-editor{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fbfdf8;}
.compose-editor #format-buttons,.compose-editor .format-buttons{background:#f1f5ea;border-bottom:1px solid var(--line);padding:8px 10px;margin:0;border-radius:0;}
.compose-editor .message-box{margin:0;}
.compose-editor #message-box textarea,.compose-editor textarea{border:0;background:transparent;border-radius:0;min-height:260px;width:100%;padding:16px;box-shadow:none !important;line-height:1.6;resize:vertical;display:block;}
.compose-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);background:#f6f9f1;}
.compose-meta .smiley-box{display:flex;flex-wrap:wrap;gap:2px;align-items:center;}
.compose-meta .smiley-box img{width:20px;height:20px;vertical-align:middle;cursor:pointer;}
.compose-meta .bbcode-status{margin:0;color:var(--muted);font-size:.78rem;}
.compose-actions{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap;}
.compose-cancel{color:var(--muted);font-weight:700;}
.compose-cancel:hover{color:var(--ink);}
.post-icons{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:4px;}
.post-icons label{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--muted);margin:0;}
.post-icons img{vertical-align:middle;}
/* flatten compose cards inside the settings shell (PM compose) */
.set-panel .compose{border:0;box-shadow:none;padding:0;margin:0 0 16px;background:none;}
#options-panel{margin-top:0;}
#options-panel .fields1 > div{padding:6px 0;}
#options-panel label{font-weight:600;color:var(--ink);cursor:pointer;}