/* CloseFolks. Layout: sticky bar, a hero pairing the person with a "life lately" timeline,
   then the feed beside a side column that stacks above it on phones. */
:root{
  --bg:#ECF0EE; --surface:#FFFFFF; --sunk:#E0E8E5; --ink:#16232A; --muted:#55696E; --line:#CFD9D6;
  --accent:#0D6A72; --accent-ink:#FFFFFF; --accent-soft:#D5E8E5; --stamp:#B03346;
  --c-travel:#0D6A72; --c-family:#B03346; --c-friends:#A8661A; --c-outdoors:#2E8049; --c-torino:#5A4DB0;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1518; --surface:#162026; --sunk:#1D2A30; --ink:#E3ECEA; --muted:#94A6A9; --line:#2A3940;
    --accent:#55BBC1; --accent-ink:#06282B; --accent-soft:#173439; --stamp:#EE8292;
    --c-travel:#55BBC1; --c-family:#EE8292; --c-friends:#E5A65A; --c-outdoors:#6CC98C; --c-torino:#A69CF0; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-display);font-size:15px;line-height:1.5;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,select,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card,.chapter,.chip,.moment,.legend li,.tag{--c:var(--accent)}
.t-travel{--c:var(--c-travel)} .t-family{--c:var(--c-family)} .t-friends{--c:var(--c-friends)} .t-outdoors{--c:var(--c-outdoors)} .t-torino{--c:var(--c-torino)}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)!important;font-size:13px!important}

/* Bar */
.bar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:-.01em;margin-right:auto;color:var(--ink);text-decoration:none}
.brand svg{color:var(--accent)}
.aboutbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;border-radius:999px;padding:6px 12px;cursor:pointer}
.previewas{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
select{font-weight:600;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.flash{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:var(--accent-soft);font-size:14px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;padding-block:24px 40px}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:24px}}
.eyebrow{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0}
h1{font-size:clamp(44px,8vw,78px);line-height:.92;font-weight:800;letter-spacing:-.035em;margin:10px 0 16px;text-wrap:balance}
.intro{font-family:var(--f-body);font-size:18px;line-height:1.55;max-width:34em;margin:0}
.now{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);padding:7px 14px 7px 10px;border-radius:16px;font-size:14px;margin-top:18px;max-width:100%}
.now i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);animation:ping 2.4s infinite}
.now b{font-weight:700}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
.stats{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:24px}
.stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lately{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px 12px;display:grid;gap:6px}
.lately h2{margin:0 4px;font-size:16px;font-weight:700}
.lately svg{display:block;width:100%;height:auto}
.lately .axis{stroke:var(--line);stroke-width:2}
.lately .tick{stroke:var(--line);stroke-width:1}
.lately .ml{fill:var(--muted);font:10px var(--f-mono);letter-spacing:.08em}
.lately .stem{stroke:var(--c);stroke-width:1.5;opacity:.6}
.lately .dot{fill:var(--c);stroke:var(--surface);stroke-width:3}
.lately .lbl{fill:var(--ink);font:600 12.5px var(--f-display)}
.lately .moment:hover .dot,.lately .moment:focus .dot{stroke-width:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 4px;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:6px}
.legend li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}

/* Columns */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-block:0 56px}
@media (max-width:900px){.cols{grid-template-columns:1fr}.side{order:-1}}
.side,.main{display:grid;gap:16px;min-width:0}
.main{gap:20px}
.sectionhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}
.sectionhead h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.sectionhead span{font:500 12px var(--f-mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:600;text-decoration:none}
.chip[class*="t-"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.chip[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Panels and forms */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:12px;min-width:0}
.panel h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.panel h3.inline{display:inline}
.panel p{margin:0;color:var(--muted);font-size:14px}
.panel summary{cursor:pointer}
.badge{font:500 11px var(--f-mono);background:var(--stamp);color:var(--surface);border-radius:999px;padding:1px 8px}
.field{display:grid;gap:5px}
.field label{font-size:13px;font-weight:600}
.row2,.row3{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:620px){.row2,.row3{grid-template-columns:1fr}}
input,textarea,.field select{color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;font-size:15px}
textarea{font-family:var(--f-body);font-size:16px;resize:vertical;min-height:88px}
input[type="file"]{padding:8px;font-size:13px}
input[type="checkbox"]{width:auto}
.stack{display:grid;gap:12px}
.btn{font-weight:700;font-size:14px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:11px 16px;cursor:pointer;justify-self:start;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn[disabled]{opacity:.6;cursor:wait}
.linkbtn{border:0;background:none;color:var(--accent);font-weight:700;font-size:13.5px;padding:4px 0;cursor:pointer}
.linkbtn.small{font-size:12.5px}
.linkbtn.danger{color:var(--stamp)}
.hint{font-size:13.5px;color:var(--muted);margin:0}
.mediaprev{display:flex;flex-wrap:wrap;gap:6px}
.mediaprev:empty{display:none}
.mediaprev img,.mediaprev video{width:96px;height:72px;object-fit:cover;border-radius:8px;background:var(--ink)}
.audpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:14px;margin-top:6px}
.audpick label{display:flex;align-items:center;gap:7px;font-weight:400}

/* Inbox and people */
.inbox,.people{list-style:none;margin:0;padding:0;display:grid}
.msg{border-top:1px solid var(--line);padding-block:12px;display:grid;gap:4px}
.msg:first-child{border-top:0;padding-top:2px}
.msg header,.reply header,.thread header{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:700}
.msg time,.reply time,.thread time{font:400 12px var(--f-mono);color:var(--muted)}
.msg header b{display:flex;align-items:center;gap:7px}
.msg .unread{width:8px;height:8px;border-radius:50%;background:var(--stamp)}
.msg p,.reply p{font-family:var(--f-body);font-size:15px;color:var(--ink);margin:0}
.msg p.followup{padding-top:4px;border-top:1px dashed var(--line)}
.msg small{font-size:12px;color:var(--muted)}
.reply{margin:4px 0 0 14px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--bg);border-radius:0 10px 10px 0;display:grid;gap:2px}
.rform{display:grid;gap:8px;margin-top:6px}
.rform textarea{min-height:70px}
.rel{font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunk);border-radius:999px;padding:2px 8px;white-space:nowrap}
.rel.unset{color:var(--stamp)}
.relcounts{display:flex;flex-wrap:wrap;gap:6px}
.addperson{display:grid;gap:10px;padding:12px;border-radius:12px;background:var(--bg)}
.addperson input,.addperson select{background:var(--surface)}
.person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;border-top:1px solid var(--line);padding-block:10px}
.person:first-child{border-top:0}
.person b{font-size:14.5px;overflow-wrap:anywhere}
.person small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.person select{font-size:12.5px;max-width:150px}
.person .ptools{grid-column:1 / -1;display:flex;gap:14px}
.person.is-new{background:var(--accent-soft);border-radius:10px;padding-inline:8px}

/* Groups */
.mygroup{display:grid;gap:2px;text-decoration:none;color:var(--ink);background:var(--accent-soft);border-radius:12px;padding:12px 14px}
.mygroup:hover b{text-decoration:underline}
.mygroup .gk{font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mygroup b{font-size:16px}
.mygroup .go{font-size:13px;color:var(--accent);font-weight:600}
.gcat{display:grid;gap:2px}
.gcat h4{margin:6px 0 2px;font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gcat a{display:flex;justify-content:space-between;gap:10px;color:var(--ink);text-decoration:none;font-size:14px;padding:6px 8px;margin-inline:-8px;border-radius:8px}
.gcat a:hover{background:var(--sunk)}
.gcat a span{color:var(--muted);flex:none}

/* Moments */
.feed{display:grid;gap:28px}
.empty{color:var(--muted);font-size:15px;margin:0;padding:24px;border:1px dashed var(--line);border-radius:var(--r);text-align:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;scroll-margin-top:84px}
.pic{position:relative;aspect-ratio:4/3;background:var(--sunk);max-width:100%}
.pic .slot{position:absolute;inset:0}
.pic .slot img{width:100%;height:100%;display:block;object-fit:cover}
.pic .slot video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.thumbs{display:flex;gap:6px;padding:8px 10px 0;overflow-x:auto}
.thumbs button{flex:none;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--sunk)}
.thumbs button[aria-pressed="true"]{border-color:var(--accent)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs .vt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;height:100%;background:var(--ink);color:var(--bg);font-size:10.5px;font-weight:700}
.mark{position:absolute;top:14px;right:14px;width:94px;height:94px;border-radius:50%;border:2px solid var(--stamp);outline:1px dashed var(--stamp);outline-offset:-8px;color:var(--stamp);display:grid;place-content:center;text-align:center;font:500 9.5px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-9deg);background:color-mix(in srgb,var(--surface) 82%,transparent);padding:0 12px;pointer-events:none}
.mark b{display:block;font-size:12px;font-weight:500}
.cbody{padding:20px 22px 22px;display:grid;gap:10px}
.textonly .cbody{border-left:4px solid var(--c)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:13px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.aud{font:500 11px var(--f-mono);letter-spacing:.04em;color:var(--muted);background:var(--sunk);border-radius:999px;padding:2px 9px}
.aud.limited{color:var(--stamp);background:color-mix(in srgb,var(--stamp) 12%,transparent)}
.card h3{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.story{display:grid;gap:12px;max-width:62ch}
.story p{font-family:var(--f-body);font-size:17px;line-height:1.62;margin:0}
.acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.acts form{margin:0}
.acts .push{margin-left:auto}
.wave{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;background:var(--sunk);color:var(--ink);border:0;border-radius:999px;padding:7px 14px 7px 11px;cursor:pointer;font-variant-numeric:tabular-nums}
.wave.static{cursor:default}
.wave[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.ncount{font-size:14px;color:var(--muted)}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.note{background:var(--bg);border-radius:12px;padding:10px 13px}
.note b{font-size:13px}
.note span{display:block;font-family:var(--f-body);font-size:15.5px}
.note form{margin:4px 0 0}
.nform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.nform input{padding:9px 11px;font-size:14px}
.nform .btn{padding:9px 14px}
@media (max-width:560px){.nform{grid-template-columns:1fr}.cbody{padding:16px}.card h3{font-size:22px}}

/* Chapters */
.chapter{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;scroll-margin-top:84px}
.chead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:640px){.chead{grid-template-columns:1fr}}
.ccover{position:relative;min-height:240px;background:var(--sunk)}
.ccover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cinfo{padding:22px;display:grid;gap:10px;align-content:start}
.ckind{font:500 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.chapter h3{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.025em;font-weight:800;text-wrap:balance}
.cinfo > p{margin:0;font-family:var(--f-body);font-size:16.5px}
.days{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.days a{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;color:var(--ink);padding:7px 8px;border-radius:8px;font-size:14px;text-decoration:none}
.days a:hover{background:var(--sunk)}
.days b{font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c);padding-top:2px}
.cdetails{border-top:1px solid var(--line)}
.cdetails > summary{list-style:none;margin:16px 22px}
.cdetails > summary::-webkit-details-marker{display:none}
.cdetails[open] > summary{margin-bottom:0}
.cdays{display:grid;gap:20px;padding:20px 18px;background:var(--bg)}
@media (max-width:560px){.cdays{padding-inline:10px}}
.dayline{font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}

/* Welcome note */
.welcome{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--ink) 45%,transparent);display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.wcard{background:var(--surface);color:var(--ink);border-radius:18px;max-width:600px;width:100%;max-height:100%;overflow-y:auto;padding:28px 30px;display:grid;gap:10px;box-shadow:0 20px 60px rgb(0 0 0 / .3);outline:none}
@media (max-width:560px){.wcard{padding:22px 18px}}
.wcard h2{margin:2px 0 0;font-size:clamp(30px,6vw,40px);line-height:1;font-weight:800;letter-spacing:-.03em}
.wcard h3{margin:10px 0 0;font-size:16px;font-weight:700}
.wcard p,.wcard li{font-family:var(--f-body);font-size:16px;line-height:1.55;margin:0}
.wcard .wlead{font-size:17.5px}
.wcard ul{margin:0;padding-left:20px;display:grid;gap:6px}
.wcard li b{font-family:var(--f-display);font-weight:700}
.wcard .wnote{font-family:var(--f-display);font-size:14px;color:var(--muted);background:var(--bg);border-radius:12px;padding:12px 14px;margin-top:6px}

/* Simple pages (sign in, messages, conversations) */
.simple{padding-block:48px}
.simple .panel{max-width:560px;margin:0 auto;padding:28px;gap:14px}
.h-simple{font-size:clamp(30px,6vw,42px);margin:0}
.h-sub{font-size:20px;margin:10px 0 0;font-weight:800;letter-spacing:-.01em}
.lead{font-family:var(--f-body);font-size:17.5px;color:var(--ink)!important}
.thread{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.thread li{padding:12px 14px;border-radius:12px;background:var(--bg);display:grid;gap:4px}
.thread li.from-owner{border-left:3px solid var(--accent)}
.thread p{margin:0;font-family:var(--f-body);font-size:16px;color:var(--ink)}

/* Home */
.homegrid{display:grid;gap:16px;max-width:640px;padding-block:32px 56px}
.hhead{display:grid;gap:4px}
.hhead p{margin:0}
.linklist{list-style:none;margin:0;padding:0;display:grid}
.linklist li + li{border-top:1px solid var(--line)}
.linklist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px;color:var(--ink);text-decoration:none;font-weight:600}
.linklist a:hover{color:var(--accent)}
.linklist small{font-weight:400;color:var(--muted);font-size:12.5px}
.newgroup > summary{list-style:none;justify-self:start}
.newgroup > summary::-webkit-details-marker{display:none}
.newgroup[open] > summary{margin-bottom:12px}
.modnote{background:var(--accent-soft);color:var(--ink)!important;border-radius:10px;padding:10px 12px}

/* Groups */
.nameprompt{margin-top:16px}
.ghero{padding-block:24px 28px;display:grid;gap:6px}
.ghero h1{margin:6px 0 4px}
.ghero p{margin:0}
.modwelcome{margin-top:16px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r);padding:16px 18px;display:grid;gap:6px}
.modwelcome h2{margin:0;font-size:20px}
.modwelcome p{margin:0;font-family:var(--f-body);font-size:16px}
.gpost .meta .who{color:var(--ink);font-size:14px}
.gpost .meta form{margin:0}
.gpost .meta .push{margin-left:auto}
.gmedia{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.gmedia img,.gmedia video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;background:var(--sunk)}
.gmedia video{object-fit:contain;background:#000}

/* Page requests */
.btnrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btnrow form{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.slugrow{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
.slugrow span{padding:10px 0 10px 12px;color:var(--muted);font-family:var(--f-mono);font-size:14px;white-space:nowrap}
.slugrow input{border:0;border-radius:0;padding-left:2px;font-family:var(--f-mono);font-size:14px;min-width:0}
.flash.error{background:color-mix(in srgb,var(--stamp) 14%,transparent)}
.reqs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.req{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:6px}
.req header{display:flex;justify-content:space-between;gap:8px}
.req time{font:400 12px var(--f-mono);color:var(--muted)}
.req .plans{font-family:var(--f-body);font-size:16px;color:var(--ink);margin:0;white-space:pre-line}
.req .rel{justify-self:start}
.t-home{--c:var(--c-torino)}

.foot{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-block:20px 32px}
.foot p{margin:0}
@media (prefers-reduced-motion: reduce){.now i{animation:none}}

/* Admin */
.small{font-size:12.5px}
.admin{display:grid;gap:18px;padding-block:28px 56px}
.ahead{display:grid;gap:4px}
.ahead p{margin:0}
.admin h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:2px;align-content:start}
.tile.wide{grid-column:span 2}
@media (max-width:420px){.tile.wide{grid-column:auto}}
.tile b{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.tile span{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile small{font-size:12.5px;color:var(--muted)}
.meter{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;margin:6px 0 2px}
.meter i{display:block;height:100%;background:var(--accent);border-radius:999px}
.phead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.asearch{display:flex;gap:8px;align-items:center;flex:1 1 260px;max-width:420px}
.asearch input{padding:8px 10px;font-size:14px}
.asearch .btn{padding:8px 12px}
.tablewrap{overflow-x:auto;margin-inline:-4px}
.admin table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.admin th{text-align:left;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.admin td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.admin td small{color:var(--muted)}
.admin td form{margin:0}
.admin .wrapcell{max-width:260px}
.admin tr.suspended td{opacity:.55}

/* Moderation */
.report{display:inline-block;position:relative}
.report > summary{list-style:none;cursor:pointer;color:var(--muted)}
.report > summary::-webkit-details-marker{display:none}
.report[open] > summary{color:var(--accent)}
.report form{position:absolute;right:0;z-index:5;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgb(0 0 0 / .15);margin-top:6px}
.note .report{float:right}
.heldnote{margin:0;font-size:13.5px;background:color-mix(in srgb,var(--stamp) 10%,transparent);color:var(--ink);border-radius:10px;padding:8px 12px}
.rules{display:grid;gap:8px;padding-left:22px;margin:0}
.rules li{font-family:var(--f-body);font-size:16px;line-height:1.5}
.areport{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px}
.areport header{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.areport .snap{font-family:var(--f-body);font-size:15.5px;white-space:pre-line;background:var(--bg);border-radius:10px;padding:10px 12px;margin:0;max-height:220px;overflow:auto}
.areport .thumbs img{width:120px;height:90px}
.areports{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gpost .meta .report{margin-left:auto}
.gpost .meta .report + .push{margin-left:12px}

/* Facebook importer */
.importer{display:grid;gap:18px;padding-block:28px 56px;max-width:860px}
.importer h2{margin:0;font-size:19px;font-weight:800}
.steps{margin:0;padding-left:22px;display:grid;gap:8px;font-family:var(--f-body);font-size:16px}
.steps ul{margin:6px 0 0;padding-left:20px}
.status{margin:0;background:var(--accent-soft);color:var(--ink)!important;border-radius:10px;padding:10px 12px}
.fbfilters{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px}
.fbfilters label{display:flex;gap:6px;align-items:center}
.fbfilters input[type="search"]{flex:1 1 220px;padding:8px 10px;font-size:14px}
.fblist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fbrow{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px}
.fbrow.already{background:var(--bg)}
.fbrow.done{border-color:var(--accent);background:var(--accent-soft)}
.fbrow.problem{border-color:var(--stamp)}
.fbtick input{width:20px;height:20px;margin-top:4px}
.fbmain{display:grid;gap:6px;min-width:0}
.fbmeta{margin:0;font-size:13px;color:var(--muted)}
.fbtitle{font-weight:700;font-size:15.5px;padding:7px 10px}
.fbtext{margin:0;font-family:var(--f-body);font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.fbmain details textarea{margin-top:6px;min-height:120px}
.fbthumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fbthumbs img{width:72px;height:54px;object-fit:cover;border-radius:8px;background:var(--sunk)}
.fbthumbs span{font-size:13px;color:var(--muted)}
.fbopts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fbresult{font-size:13px;font-weight:600}
.fbrow.problem .fbresult{color:var(--stamp)}
.fbgo{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.inlinecheck{display:flex!important;gap:8px;align-items:center;font-weight:400!important;margin-top:24px}
.progress{display:grid;gap:6px}
.progress .meter{height:10px}
.progress p{margin:0}
.saved{display:grid;gap:6px;background:var(--accent-soft);border-radius:10px;padding:12px 14px}
.saved p{margin:0;color:var(--ink)!important}
.saved .linkbtn{justify-self:start}
.fbtick.onpage{display:grid;place-items:center;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--c-outdoors);color:#fff;font-weight:800;font-size:14px}
.onpagetext{color:var(--c-outdoors)}