/* From mockups/round2/styles.css (approved). One hue (--h) drives every color. */
/* ===== Theme: everything comes from ONE hue (--h). Drupal: print --h from the member's "favorite color" field. ===== */
:root{--h:145; /* Mark's pick: green */
--bg:oklch(0.64 0.075 var(--h));        /* mid-tone page background (50/50 light/dark, colored) */
--bg-hi:oklch(0.69 0.075 var(--h));
--surface:oklch(0.74 0.06 var(--h));    /* header, toolbars */
--card:oklch(0.80 0.05 var(--h));       /* cards: light tint, never pure white */
--field:oklch(0.86 0.035 var(--h));     /* inputs */
--line:oklch(0.60 0.06 var(--h));
--ink:oklch(0.19 0.03 var(--h));        /* body text: AA on bg, card, surface */
--ink2:oklch(0.24 0.035 var(--h));      /* secondary text on bg */
--muted:oklch(0.30 0.04 var(--h));      /* secondary text on cards only */
--btn:oklch(0.30 0.08 var(--h));--btn-txt:oklch(0.96 0.015 var(--h));
--accent:oklch(0.38 0.11 var(--h));--accent-soft:oklch(0.72 0.09 var(--h));
--gold:oklch(0.86 0.11 88);--gold-ink:oklch(0.30 0.07 70);
--r:14px}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;font-size:16px}
a{color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
header.site{background:var(--surface);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.02em}
.logo .mk{width:36px;height:36px;border-radius:10px;background:var(--btn);color:var(--btn-txt);display:grid;place-items:center;font-size:15px;font-weight:800;position:relative}
.logo .mk:after{content:"";position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--surface)}
.logo small{font-weight:700;color:var(--ink2);font-size:11px;border:1px solid var(--line);border-radius:20px;padding:1px 7px}
nav.main{display:flex;gap:22px;flex:1}nav.main a{text-decoration:none;color:var(--ink2);font-weight:600;font-size:15px}
nav.main a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);padding-bottom:4px}
.tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;border-radius:20px;padding:2px 8px;vertical-align:middle;white-space:nowrap}
.tag.accent{background:var(--btn);color:var(--btn-txt)}
.tag.si{background:var(--field);color:var(--ink);border:1px solid var(--line)}   /* Signed in as Mark Baker */
.tag.id{background:var(--gold);color:var(--gold-ink);border:1px solid oklch(0.7 0.1 80)} /* ID verified */
.tag.found{background:transparent;color:var(--ink);border:1px dashed var(--ink2)}
.tag.gray{background:var(--field);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;font-family:inherit}
.btn.pri{background:var(--accent);color:var(--btn-txt)}.btn.dark{background:var(--btn);color:var(--btn-txt)}
.btn.sec{background:var(--field);color:var(--ink);border:1px solid var(--line)}.btn.ghost{background:transparent;color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:13.5px;border-radius:8px}
.hdr-actions{display:flex;gap:10px;align-items:center}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--field);place-items:center;font-size:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.card .muted,.muted-c{color:var(--muted)}
.muted{color:var(--ink2)}.small{font-size:13.5px}
/* avatars: photo first, initials fallback */
.av{width:48px;height:48px;border-radius:50%;flex:none;object-fit:cover;display:grid;place-items:center;font-weight:800;font-size:17px;border:2px solid var(--field);background:oklch(0.45 0.1 var(--mh,var(--h)));color:oklch(0.96 0.015 var(--mh,var(--h)))}
.av.lg{width:120px;height:120px;font-size:40px;border:4px solid var(--card);box-shadow:0 2px 10px rgba(0,0,0,.15)}
.av.sm{width:36px;height:36px;font-size:13px}
.avf{background:var(--field);border:2px dashed var(--ink2);color:var(--ink)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;margin:0 0 .4em}
.input{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--muted)}
.input.big{padding:16px 18px;font-size:17px;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.input.filled{color:var(--ink)}
label.f{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
.sel{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14.5px;color:var(--ink)}
footer.site{border-top:1px solid var(--line);margin-top:64px;padding:28px 0;color:var(--ink2);font-size:13.5px}
footer.site .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.p2banner{background:var(--btn);color:var(--btn-txt);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;margin:20px 0}
.note{background:var(--gold);color:var(--gold-ink);border-radius:10px;padding:10px 14px;font-size:13.5px;margin:14px 0}
.grid{display:grid;gap:18px}
@media (max-width:720px){
 .wrap{padding:0 16px}nav.main,.hide-m{display:none!important}
 header.site .wrap{height:58px;justify-content:space-between;gap:10px}.burger{display:grid}.logo{font-size:18px}.logo small{display:none}}
/* From mockups/round2/build2.py page styles (approved). */
/* ---- cards (mockup MC) ---- */
.mc{display:flex;gap:14px;align-items:center;padding:14px 16px;border-left:6px solid oklch(0.45 0.11 var(--mh,var(--h)))}.mc .mi{flex:1;min-width:0}.mn{font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.mc.fl{border-style:dashed;border-left:6px dashed var(--line);background:color-mix(in oklch,var(--card) 60%,var(--bg))}
@media (max-width:720px){.mc .btn{display:none}}
/* ---- home (mockup) ---- */
.hero{padding:56px 0 40px;background:radial-gradient(900px 420px at 85% 0,var(--bg-hi),transparent)}.hgrid{display:grid;grid-template-columns:1.25fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:56px;margin:14px 0}.lead{font-size:19px;max-width:560px}.ctas{display:flex;gap:12px;margin:22px 0 10px;flex-wrap:wrap}
.stack{padding:28px}.stack .big{font-size:64px;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1}.bars{display:grid;gap:8px;margin:18px 0}.bars div{display:flex;gap:10px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px}.bars b{font-size:20px;min-width:64px}.bars span{color:var(--muted);font-size:14px}
.faces{display:flex;align-items:center}.faces .av{margin-right:-8px}.faces span{margin-left:16px}
.three{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1fr 1fr}.how{padding:22px}.how .n{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--btn-txt);font-weight:800;display:grid;place-items:center;margin-bottom:10px}.how .muted{color:var(--muted)}
.claim{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 24px;margin-top:28px}.claim .muted{color:var(--muted)}
@media (max-width:720px){.hgrid,.three,.two{grid-template-columns:1fr}.hero{padding:30px 0}.hero h1{font-size:38px}.lead{font-size:17px}.claim{flex-direction:column;align-items:flex-start}.stack .big{font-size:52px}.ctas .btn{width:100%;justify-content:center}}
/* ---- dir (mockup) ---- */
.dtop{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px}.toggle{display:flex;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:3px}.toggle span{padding:7px 14px;border-radius:8px;font-weight:700;font-size:14px}.toggle .on{background:var(--btn);color:var(--btn-txt)}
.dgrid{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}.filters{padding:18px}.chk{display:flex;align-items:center;gap:8px;font-size:14.5px;margin:6px 0}.box{width:18px;height:18px;border-radius:5px;border:1px solid var(--ink2);display:grid;place-items:center;font-size:12px;background:var(--field)}.box.on{background:var(--btn);color:var(--btn-txt)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips span{border:1px solid var(--line);background:var(--field);border-radius:20px;padding:3px 10px;font-size:13px;font-weight:600}.chips span:first-child{background:var(--btn);color:var(--btn-txt)}
.rowhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.hide-desk{display:none}.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.map{display:block;width:100%;height:auto}.mapfoot{padding:10px 14px;border-top:1px solid var(--line);color:var(--muted)}
@media (max-width:720px){.dgrid{grid-template-columns:1fr}.filters{display:none}.hide-desk{display:inline-flex}.dtop{flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}}
/* ---- prof (mockup) ---- */
.ownerbar{background:var(--surface);border-bottom:1px solid var(--line);font-size:14px}.ownerbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.cover{height:150px;background:linear-gradient(120deg,oklch(0.30 0.08 var(--h)),oklch(0.45 0.11 var(--h)) 55%,oklch(0.70 0.10 calc(var(--h) + 40)))}
.phead{display:flex;gap:20px;align-items:flex-start;margin-top:-60px}.avwrap{position:relative}.cam{position:absolute;right:4px;bottom:6px;width:34px;height:34px;border-radius:50%;background:var(--btn);color:var(--btn-txt);display:grid;place-items:center;font-size:16px;border:2px solid var(--card)}
.pt{flex:1;padding-top:68px}.pt h1{font-size:32px;margin-bottom:6px}.badges{display:flex;gap:6px;flex-wrap:wrap}.pa{display:flex;gap:8px;padding-top:70px}
.pgrid{display:grid;grid-template-columns:1fr 330px;gap:20px;margin-top:24px;align-items:start}.pad{padding:20px;margin-bottom:16px}
.prow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);gap:12px}.pl{font-size:12.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.pv{font-weight:600}
.vis{font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:5px 9px;white-space:nowrap;background:var(--field)}
.addf{margin-top:12px;font-size:13.5px;color:var(--accent);font-weight:700}.faces2{display:flex;gap:6px;align-items:center}.up{display:flex;gap:12px;align-items:center}.up .av{width:64px;height:64px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:32px;height:32px;border-radius:50%;border:3px solid var(--card);background:oklch(0.60 0.12 var(--sh));box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.swatch.on{box-shadow:0 0 0 3px var(--ink)}
.hue{width:100%;appearance:none;height:12px;border-radius:8px;background:linear-gradient(90deg,oklch(.6 .12 0),oklch(.6 .12 60),oklch(.6 .12 120),oklch(.6 .12 180),oklch(.6 .12 240),oklch(.6 .12 300),oklch(.6 .12 359))}
.sw{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;gap:10px}.tg{width:40px;height:23px;border-radius:20px;background:var(--line);position:relative;flex:none}.tg:after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--field)}.tg.on{background:var(--accent)}.tg.on:after{left:20px}
@media (max-width:720px){.pgrid{grid-template-columns:1fr}.phead{flex-direction:column;align-items:flex-start;gap:8px}.pt,.pa{padding-top:0}.pt h1{font-size:26px}.cover{height:110px}.av.lg{width:96px;height:96px}}
/* ---- found (mockup) ---- */
.narrow{max-width:900px}.fcard{padding:22px;border:2px dashed var(--ink2)}.fh{display:flex;gap:14px;align-items:center}.mn{font-weight:700}.fmeta{display:flex;flex-direction:column;gap:4px;margin:14px 0;font-size:13.5px;color:var(--muted)}.facts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.flows{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.flow{padding:22px}.flow ol{list-style:none;padding:0;margin:0;counter-reset:s}.flow li{counter-increment:s;position:relative;padding:0 0 16px 40px;border-left:2px solid var(--line);margin-left:13px}.flow li:last-child{border-color:transparent}
.flow li:before{content:counter(s);position:absolute;left:-14px;top:-2px;width:26px;height:26px;border-radius:50%;background:var(--field);border:2px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:13px}.flow li.done:before{content:"\2713";background:var(--accent);border-color:var(--accent);color:var(--btn-txt)}.flow li.cur:before{border-color:var(--accent);color:var(--accent)}
.flow li b{display:block}.flow li span{font-size:14px;color:var(--muted)}.code{font-family:ui-monospace,Menlo,monospace;background:var(--btn);color:var(--btn-txt);border-radius:8px;padding:6px 10px;display:block;width:max-content;margin-top:6px;font-size:13.5px}
.done-msg{margin-top:14px;background:var(--field);border-left:4px solid var(--accent);border-radius:10px;padding:10px 12px;font-size:14px}
@media (max-width:720px){.flows{grid-template-columns:1fr}.facts .btn{width:100%;justify-content:center}}
/* ---- join (mockup) ---- */
.narrow-wide{max-width:1120px}.jgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}.jstep{padding:18px}.jstep .muted{color:var(--muted)}.sn{font-size:12px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}.jstep h3{font-size:18px;margin-top:4px}
.oidc{display:flex;flex-direction:column;gap:8px;margin:10px 0}.obtn{display:flex;align-items:center;justify-content:center;border-radius:10px;padding:10px;font-weight:700;font-size:14.5px;background:var(--field);border:1px solid var(--line)}.obtn.apple{background:var(--ink);color:var(--field);border-color:var(--ink)}
.res{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px;margin-top:10px;font-size:14px}.res.ok{background:var(--field);border-left:5px solid var(--accent)}.res.no{background:oklch(0.86 0.05 30);color:oklch(0.25 0.06 30);border-left:5px solid oklch(0.5 0.15 30)}
.pick{display:flex;flex-wrap:wrap;gap:6px}.pick span{border:1px solid var(--line);background:var(--field);border-radius:20px;padding:4px 10px;font-size:13px;font-weight:600}.pick .on{background:var(--btn);color:var(--btn-txt);border-color:var(--btn)}
.bdg{display:grid;gap:10px;margin:8px 0}.welcome{display:flex;gap:14px;align-items:center;padding:16px 20px;margin-top:16px}.welcome .muted{color:var(--muted)}
@media (max-width:1100px){.jgrid{grid-template-columns:1fr 1fr}}@media (max-width:720px){.jgrid{grid-template-columns:1fr}.welcome{flex-direction:column;align-items:flex-start}.welcome .btn{margin-left:0!important}}/* Drupal glue: real forms, messages, pager, in the same mid-tone palette. */
.page-h1{margin-top:32px}.center{text-align:center}.sec-h{margin-top:44px}.small-h{font-size:20px;margin-top:32px}
.narrow{max-width:900px}
main{display:block;min-height:50vh}
.slogan{font-style:italic;color:var(--ink)}.slogan-big{font-size:20px;font-style:italic;font-weight:600;color:var(--ink);margin:4px 0}
.slogan-card{border-left:6px solid var(--accent)}
.is-disabled{opacity:.6;cursor:not-allowed}
.note a{color:inherit;font-weight:700}
.res-ico{font-size:26px;line-height:1}
.gate .res{margin-top:0}
.cam{text-decoration:none}

/* search boxes: a real <input> inside the mockup's .input pill */
form.input{color:var(--ink)}
form.input input[type=search],.input.search input[type=search]{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none}
form.input input::placeholder,.input.search input::placeholder{color:var(--muted)}

/* form controls */
input[type=text],input[type=email],input[type=url],input[type=number],select,textarea,.form-text,.form-email,.form-select,.form-textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 12px;max-width:100%}
select.sel{width:100%;appearance:auto}
textarea{width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
label.chk{cursor:pointer}
.form-item,.js-form-item{margin:14px 0}
.form-item label,.fieldset-legend{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.form-item .description,.description{font-size:13px;color:var(--muted);margin-top:4px}
.form-type-checkbox label,.form-type-radio label{display:inline;font-weight:600}
.form-required:after{content:" *";color:var(--accent)}
input[type=submit],button.button,.button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;background:var(--btn);color:var(--btn-txt);text-decoration:none}
.button--danger,a.button--danger,#edit-delete{background:transparent;color:var(--ink);text-decoration:underline}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 14px}

/* member edit form groups */
details.mb-group{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 20px;margin:14px 0}
details.mb-group>summary{font-weight:800;font-size:17px;padding:16px 0;cursor:pointer}
details.mb-group[open]>summary{border-bottom:1px solid var(--line);margin-bottom:6px}
.user-form,.mb-form{max-width:760px}
.image-widget{display:flex;gap:14px;align-items:center}
.image-widget img{border-radius:50%;width:96px;height:96px;object-fit:cover}

/* OpenID Connect buttons on /join */
.oidc form{display:flex;flex-direction:column;gap:8px;margin:0}
.oidc input.sso{width:100%;justify-content:center;background:var(--field);color:var(--ink);border:1px solid var(--line);font-size:14.5px;padding:10px}
.oidc input.sso-apple{background:var(--ink);color:var(--field);border-color:var(--ink)}

/* status messages */
.messages-wrap{margin-top:18px}
.messages{border-radius:12px;padding:12px 16px;margin:8px 0;background:var(--card);border-left:5px solid var(--accent);font-size:14.5px}
.messages--warning{background:var(--gold);color:var(--gold-ink);border-left-color:oklch(0.6 0.12 70)}
.messages--error{background:oklch(0.86 0.05 30);color:oklch(0.25 0.06 30);border-left-color:oklch(0.5 0.15 30)}
.messages ul{margin:0;padding-left:18px}

/* pager */
.pager__items{display:flex;gap:6px;list-style:none;padding:0;margin:16px 0;flex-wrap:wrap}
.pager__item a{display:inline-block;padding:6px 11px;border-radius:8px;background:var(--field);border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:13.5px}
.pager__item.is-active a{background:var(--btn);color:var(--btn-txt)}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;word-wrap:normal}

/* found-link removal form */
form.flow{padding:22px;margin-top:18px}
form.flow .mc{margin-bottom:12px}
.hdr-actions form{margin:0}

.input.search{color:var(--ink)}
body>.dialog-off-canvas-main-canvas,body{display:flex;flex-direction:column;min-height:100vh}main{flex:1}


/* ===== Framework-free app additions ===== */
.proto{background:oklch(0.86 0.09 85);color:oklch(0.25 0.05 70);font-size:13.5px;border-bottom:1px solid oklch(0.7 0.1 80)}
.proto .wrap{padding-top:7px;padding-bottom:7px}
form.inline{display:inline;margin:0}
.in{font:inherit;font-size:15px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;box-sizing:border-box}
input[type=password].in{width:100%}
label.f{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
label.chk{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:14.5px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.ferr{color:oklch(0.35 0.12 30);font-size:13px;font-weight:600;margin-top:4px}
.frow{display:flex;gap:10px;align-items:flex-end}.frow .fmain{flex:1;min-width:0}.vsel{width:auto!important;max-width:170px;margin-bottom:1px;font-size:13.5px!important}
@media (max-width:560px){.frow{flex-direction:column;align-items:stretch}.vsel{max-width:none}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.trycheck{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.phrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.swl{position:relative;display:inline-block}.swl .swatch{display:block}.swl input{position:absolute;opacity:0;width:32px;height:32px;margin:0;cursor:pointer}
.swl input:checked+.swatch{box-shadow:0 0 0 3px var(--ink)}.swl input:focus-visible+.swatch{outline:3px solid var(--accent);outline-offset:2px}
.editf .card,#leave{margin-bottom:14px}
.obtn.soon{opacity:.75}.obtn .tag{margin-left:6px}
.pager{display:flex;gap:12px;justify-content:space-between;margin:12px 0}
.note{margin:14px 0}
.show-m{display:none}@media (max-width:720px){.show-m{display:inline-flex}.hdr-actions{gap:6px}}
@media (max-width:440px){.signed-in .logo .lt{display:none}}

/* ===== Feed, messages, map (same mid-tones; --mh = the author's hue) ===== */
nav.main a{position:relative}
.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:5px;border-radius:10px;background:var(--btn);color:var(--btn-txt);font-size:11.5px;font-weight:800;vertical-align:1px}
.badge[hidden]{display:none}
.subnav{display:none;border-top:1px solid var(--line)}
.subnav .wrap{display:flex!important;gap:4px;height:auto!important;overflow-x:auto;padding-top:4px;padding-bottom:4px}
.subnav a{flex:none;text-decoration:none;color:var(--ink2);font-weight:700;font-size:14px;padding:8px 10px;border-radius:9px;white-space:nowrap}
.subnav a.on{background:var(--field);color:var(--ink)}
@media (max-width:720px){.subnav{display:block}}
.av.xs{width:30px;height:30px;font-size:11px;border-width:1px}
.feedwrap{max-width:720px}
.composer{margin-bottom:16px;border-left:6px solid oklch(0.45 0.11 var(--mh,var(--h)))}
.composer textarea{resize:vertical}
.crow{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}.crow .sel{width:auto;font-size:14px}.crow .btn.pri{margin-left:auto}
.filebtn{position:relative;overflow:hidden;cursor:pointer}.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.filebtn.has{background:var(--field)}
.note-card{margin-bottom:16px}
.post{padding:16px 18px;margin-bottom:14px;border-left:6px solid oklch(0.45 0.11 var(--mh,var(--h)))}
.ph{display:flex;gap:10px;align-items:center}.pmeta{flex:1;min-width:0}.pn{font-weight:700;text-decoration:none}.pn:hover,.plink:hover{text-decoration:underline}.plink{color:var(--muted);text-decoration:none}
.pbody{margin:10px 0 4px;white-space:normal;overflow-wrap:anywhere;font-size:16px}
.pphoto{display:block;margin:10px 0 4px}.pphoto img{display:block;max-width:100%;max-height:520px;border-radius:12px;border:1px solid var(--line);background:var(--field)}
.pacts{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:8px}
.like.on{color:oklch(0.40 0.14 15)}
.rep{margin-left:auto;opacity:.85}
.comments{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;display:grid;gap:10px}
.cm{display:flex;gap:8px;align-items:flex-start}.cb{flex:1;min-width:0;background:var(--field);border-radius:12px;padding:7px 11px;font-size:14.5px;overflow-wrap:anywhere}
.cacts{display:flex;gap:10px;margin-top:2px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.cform{display:flex;gap:8px;align-items:center}
.thumb{max-width:200px;border-radius:10px}
.quote{margin:8px 0;white-space:normal;overflow-wrap:anywhere}
.rep-item{margin-bottom:12px}
.narrow{max-width:640px}
.inbox{overflow:hidden;padding:0}
.conv{display:flex;gap:12px;align-items:center;padding:13px 16px;text-decoration:none;border-top:1px solid var(--line);border-left:5px solid transparent}
.conv:first-child{border-top:0}.conv:hover{background:var(--field)}
.conv.unread{border-left-color:oklch(0.45 0.11 var(--mh,var(--h)));background:color-mix(in oklch,var(--field) 55%,var(--card))}
.conv.unread .cv-last{color:var(--ink);font-weight:600}
.cv-main{flex:1;min-width:0;display:grid}.cv-top{display:flex;gap:6px;align-items:baseline}.cv-at{margin-left:auto;white-space:nowrap}
.cv-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.thread{padding:0;overflow:hidden}
.th-head{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--card) 70%,var(--surface))}
.th-head>div{flex:1;min-width:0}
.msgs{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.msg{max-width:78%;align-self:flex-start}.msg.me{align-self:flex-end;text-align:right}
.bub{display:inline-block;text-align:left;padding:9px 13px;border-radius:16px 16px 16px 4px;background:var(--field);overflow-wrap:anywhere;font-size:15px}
.msg.me .bub{border-radius:16px 16px 4px 16px;background:var(--accent);color:var(--btn-txt)}
.mt{font-size:12px;margin-top:3px}.msg .mt a{color:var(--muted)}
.mform{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)}.mform textarea{resize:vertical}
.thread .note,.thread .messages{margin:12px 16px}
.mapcard{padding:0;overflow:hidden}
.map{height:min(68vh,620px);min-height:360px;background:var(--field)}
.leaflet-container{font:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card);color:var(--ink)}
.mpop{display:flex;gap:10px;align-items:center;min-width:220px}.mpop .av{width:44px;height:44px;font-size:15px}
.mpop .t{display:grid;gap:1px;font-size:13.5px}.mpop b{font-size:15px}.mpop a.btn{margin-top:6px;justify-self:start;color:var(--btn-txt)}
.mk-pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:oklch(0.50 0.12 var(--mh,var(--h)));border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mk-pin.f{background:var(--card);border:2px dashed oklch(0.35 0.04 var(--h))}
.legend{white-space:nowrap}.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 4px 0 10px;vertical-align:-1px;background:oklch(0.50 0.12 var(--h))}.dot.f{background:var(--card);border:1.5px dashed var(--ink)}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:color-mix(in oklch,var(--accent-soft) 70%,transparent)}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--accent);color:var(--btn-txt);font-weight:800}
@media (max-width:720px){.post{padding:14px}.msg{max-width:88%}.rep{margin-left:0}.map{height:62vh}}