/* ---------- Leeuwen Matta · arrival updates ---------- */
:root{
  --bg:#f7f6f0; --card:#fffdf7; --ink:#2f3a2c; --ink-soft:#6d7a68;
  --accent:#55704f; --accent-deep:#3f5539; --accent-wash:#e6ede2;
  --line:#e2ded1; --warm:#b5763f; --danger:#b04a3f;
  --radius:18px; --shadow:0 1px 2px rgba(47,58,44,.06), 0 8px 24px rgba(47,58,44,.06);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font:16px/1.55 ui-rounded,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 .7em}
p:last-child{margin-bottom:0}
button{font:inherit; color:inherit; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
a{color:var(--accent-deep)}
.hide{display:none !important}

/* ---------- shell ---------- */
.wrap{max-width:640px; margin:0 auto; padding:0 16px}
.screen{min-height:100dvh; display:flex; flex-direction:column}

/* ---------- entry screens ---------- */
.entry{justify-content:center; padding:32px 0 calc(40px + var(--safe-b))}
.entry .wrap{width:100%}
.mark{text-align:center; margin-bottom:26px}
.mark img{width:76px; height:76px; border-radius:22px; box-shadow:var(--shadow)}
.mark h1{font-size:26px; margin-top:14px}
.mark .sub{color:var(--ink-soft); font-size:15px; margin-top:6px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.card + .card{margin-top:14px}
.card h2{font-size:18px; margin-bottom:4px}
.card .hint{color:var(--ink-soft); font-size:14px; margin-bottom:16px}

label.f{display:block; margin-bottom:14px}
label.f span{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px}
.in{
  width:100%; padding:13px 14px; background:#fff; border:1px solid var(--line);
  border-radius:12px; font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.in:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
textarea.in{resize:vertical; min-height:88px; line-height:1.5}
.row{display:flex; gap:10px}
.row > *{flex:1}
.row .cc{flex:0 0 92px}
.code-in{letter-spacing:.35em; text-align:center; font-size:22px; font-weight:600}

.btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:14px 16px; border:1px solid transparent; border-radius:12px;
  background:var(--accent); color:#fff; font-weight:600; font-size:16px;
  transition:transform .08s, background .15s, opacity .15s;
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.5; cursor:default}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.quiet{background:transparent; color:var(--ink-soft); border:0; font-weight:500; font-size:14px; padding:10px}
.btn.sm{width:auto; padding:9px 14px; font-size:14px; border-radius:10px}
.btn.danger{background:transparent; color:var(--danger); border:1px solid var(--line)}

.sep{display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:13px; margin:16px 0}
.sep::before,.sep::after{content:""; flex:1; height:1px; background:var(--line)}

.msg{border-radius:12px; padding:11px 13px; font-size:14px; margin-bottom:14px}
.msg.err{background:#fbeceb; color:#8f3a30; border:1px solid #f0d5d1}
.msg.ok{background:var(--accent-wash); color:var(--accent-deep); border:1px solid #d3e0cb}
.msg.warn{background:#fdf2e5; color:#8a5a2c; border:1px solid #f2e0c6}

/* avatar picker */
.pick{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.pick .ring{
  width:76px; height:76px; border-radius:50%; flex:0 0 auto; background:var(--accent-wash);
  border:2px dashed #c2cfba; display:grid; place-items:center; overflow:hidden; color:var(--accent); font-size:24px;
}
.pick .ring img{width:100%; height:100%; object-fit:cover}
.pick .ring.set{border-style:solid; border-color:var(--accent)}

/* ---------- app chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(247,246,240,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:12px; height:58px}
.topbar h1{font-size:17px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .dot{width:8px; height:8px; border-radius:50%; background:#c9d3c4; flex:0 0 auto}
.topbar .dot.live{background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}

main{flex:1; padding:16px 0 calc(96px + var(--safe-b))}

.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:rgba(255,253,247,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding-bottom:var(--safe-b);
}
.tabs .wrap{display:flex}
.tab{
  flex:1; background:none; border:0; padding:9px 4px 11px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--ink-soft); font-size:11px; font-weight:600;
}
.tab svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tab.on{color:var(--accent)}
.tab .badge{
  position:absolute; transform:translate(13px,-4px); background:var(--warm); color:#fff;
  border-radius:9px; font-size:10px; padding:1px 5px; line-height:1.4;
}

/* ---------- feed ---------- */
.banner{
  background:linear-gradient(135deg,#5c7856,#48633f); color:#fff; border-radius:var(--radius);
  padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow);
}
.banner h2{font-size:16px; margin-bottom:4px}
.banner p{font-size:14px; opacity:.92}
.banner .btn{margin-top:12px; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); color:#fff}
.banner .btn.quiet{background:transparent; border-color:transparent; margin-top:2px}

.post{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden}
.post.pin{border-color:#c9d8c1; background:#fbfdf7}
.post-h{display:flex; gap:11px; align-items:center; padding:15px 16px 0}
.post-h .who{flex:1; min-width:0}
.post-h .who b{display:block; font-size:14px; font-weight:650}
.post-h .who time{display:block; font-size:12.5px; color:var(--ink-soft)}
.pinflag{font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-wash); padding:3px 8px; border-radius:8px}
.post-b{padding:12px 16px 4px}
.post-b h3{font-size:18px; margin-bottom:7px; line-height:1.3}
.post-b .body{white-space:pre-wrap; font-size:15.5px}
.shots{display:grid; gap:3px; grid-template-columns:1fr; margin-top:12px}
.shots.two{grid-template-columns:1fr 1fr}
.shots.many{grid-template-columns:1fr 1fr 1fr}
.shots img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--accent-wash); display:block}
.post-f{display:flex; align-items:center; gap:6px; padding:10px 10px 10px; border-top:1px solid var(--line); margin-top:12px}
.post-f .btn{width:auto; background:none; border:0; color:var(--ink-soft); font-size:13.5px; font-weight:600; padding:7px 10px}
.post-f .btn:hover{color:var(--accent)}
.post-f .sp{flex:1}

.thread{border-top:1px solid var(--line); background:#fcfbf5; padding:6px 16px 14px}
.cmt{display:flex; gap:10px; padding:10px 0}
.cmt + .cmt{border-top:1px solid #efece1}
.cmt .body{flex:1; min-width:0}
.cmt .body b{font-size:13.5px}
.cmt .body time{font-size:12px; color:var(--ink-soft); margin-left:7px}
.cmt .body p{font-size:14.5px; margin-top:2px; white-space:pre-wrap}
.cmt .x{background:none; border:0; color:var(--ink-soft); font-size:16px; padding:0 4px; line-height:1}
.cbox{display:flex; gap:9px; align-items:flex-end; padding-top:10px}
.cbox textarea{min-height:42px; padding:10px 12px; border-radius:20px}

.av{width:38px; height:38px; border-radius:50%; flex:0 0 auto; object-fit:cover; background:var(--accent-wash);
    display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--accent-deep); overflow:hidden}
.av.sm{width:30px; height:30px; font-size:12px}
.av.lg{width:64px; height:64px; font-size:22px}
img.av{display:block}

/* ---------- composer ---------- */
.composer{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:16px}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}
.thumbs .t{position:relative; width:66px; height:66px; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.thumbs .t img{width:100%; height:100%; object-fit:cover}
.thumbs .t button{position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:13px; line-height:1; display:grid; place-items:center}
.crow{display:flex; gap:10px; align-items:center; margin-top:12px}
.crow .sp{flex:1}

/* ---------- asks ---------- */
.ask{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:15px 16px; margin-bottom:12px}
.ask .q{display:flex; gap:11px}
.ask .q p{font-size:15px; white-space:pre-wrap; margin-top:2px}
.ans{margin-top:12px; padding:12px 14px; background:var(--accent-wash); border-radius:14px; font-size:14.5px; white-space:pre-wrap}
.ans b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-deep); margin-bottom:3px}

/* ---------- people ---------- */
.person{display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px; margin-bottom:9px}
.person .who{flex:1; min-width:0}
.person .who b{font-size:15px}
.person .who span{display:block; font-size:12.5px; color:var(--ink-soft)}
.chip{font-size:11px; font-weight:700; color:var(--accent-deep); background:var(--accent-wash); padding:3px 9px; border-radius:9px}

/* ---------- me ---------- */
.me-h{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.me-h .who b{font-size:19px; display:block}
.me-h .who span{color:var(--ink-soft); font-size:14px}
.set{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line)}
.set .lbl{flex:1}
.set .lbl b{display:block; font-size:15px; font-weight:600}
.set .lbl span{font-size:13px; color:var(--ink-soft)}
.sw{position:relative; width:48px; height:29px; flex:0 0 auto}
.sw input{opacity:0; width:100%; height:100%; margin:0; position:absolute; z-index:2}
.sw i{position:absolute; inset:0; background:#d6d2c4; border-radius:15px; transition:background .2s}
.sw i::after{content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; background:#fff;
  border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked + i{background:var(--accent)}
.sw input:checked + i::after{transform:translateX(19px)}

.empty{text-align:center; color:var(--ink-soft); padding:44px 20px; font-size:15px}
.empty .big{font-size:34px; display:block; margin-bottom:10px}
.spin{width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:sp .7s linear infinite}
.btn.ghost .spin{border-color:var(--line); border-top-color:var(--accent)}
@keyframes sp{to{transform:rotate(360deg)}}

.lightbox{position:fixed; inset:0; z-index:60; background:rgba(24,28,22,.94); display:grid; place-items:center; padding:20px}
.lightbox img{max-width:100%; max-height:90dvh; border-radius:10px}

.foot{text-align:center; color:var(--ink-soft); font-size:12.5px; padding:22px 10px 4px}

/* ---------- admin ---------- */
.tab .badge{font-style:normal}
details#admin-details summary{cursor:pointer; font-size:13.5px; color:var(--ink-soft); padding:6px 0; list-style:none}
details#admin-details summary::-webkit-details-marker{display:none}
details#admin-details summary::before{content:"▸ "; color:var(--accent)}
details#admin-details[open] summary::before{content:"▾ "}

table.stats{width:100%; border-collapse:collapse; margin-top:12px; font-size:14px}
table.stats th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); font-weight:700; padding:0 8px 7px 0; border-bottom:1px solid var(--line)}
table.stats th:not(:first-child),
table.stats td:not(:first-child){text-align:right; white-space:nowrap}
table.stats td{padding:9px 8px 9px 0; border-bottom:1px solid #efece1; vertical-align:top}
table.stats tr:last-child td{border-bottom:0}
table.stats td.muted{color:var(--ink-soft); text-align:left}
table.stats .chip{padding:1px 6px; font-size:10px}

.vrow{display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid #efece1; font-size:14px}
.vrow:last-child{border-bottom:0}
.vrow span:first-child{flex:1; min-width:0; color:var(--ink); font-weight:600}
.vrow .muted, .muted{color:var(--ink-soft); font-size:12.5px}

.req{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-top:11px; background:#fbfdf7}
.req-top{display:flex; gap:12px; align-items:center}
.req-top .who{flex:1; min-width:0}
.req-top .who b{display:block; font-size:15px}
.req-top .who span{display:block; font-size:12.5px; color:var(--ink-soft)}
.req-act{display:flex; gap:9px; margin-top:11px}
.req-act .btn{flex:1; width:auto}

details.disc{margin-top:4px}
details.disc summary{cursor:pointer; font-size:13.5px; color:var(--ink-soft); padding:8px 0; list-style:none}
details.disc summary::-webkit-details-marker{display:none}
details.disc summary::before{content:"\25B8 "; color:var(--accent)}
details.disc[open] summary::before{content:"\25BE "}