/* Park Forest Grove styles (from the prototype) */

:root{
  --bg:#F8F5EE; --surface:#FFFFFF; --cream:#F3E6C8; --cream-2:#FAF3E3;
  --forest:#2F4F32; --forest-deep:#243D27; --mist:#E6EDE2; --olive:#6E7A42;
  --ink:#1C2420; --muted:#565E52; --line:#E3DCCB; --off:#8A8578;
  --mustard:#E2A83A; --mustard-lt:#F2C66D; --mustard-soft:#FBEBC8; --orange:#D8772A; --orange-soft:#FBE3D0;
  --rust:#B4502A; --rust-deep:#8E3B22; --rust-soft:#F6DFD4; --brown:#4A2E17;
  --display:'Alfa Slab One','Rockwell','Roboto Slab',Georgia,serif;
  --body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --k:1; --r:16px; --shadow:0 1px 2px rgba(36,61,39,.06),0 6px 18px rgba(36,61,39,.07);
}
html,body{height:100%}
body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:calc(17px * var(--k));line-height:1.5;-webkit-font-smoothing:antialiased}
.large{--k:1.28}   /* "Larger text": about 28% bigger */
*{box-sizing:border-box}
/* The hidden attribute always hides, even on elements that set their own display (flex, grid) */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px;border-radius:8px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--forest)}

/* ---------- frame: a phone column; a guide rail beside it on wide screens ---------- */
.frame{display:flex;justify-content:center;gap:40px;min-height:100%}
.phone{width:100%;max-width:460px;min-height:100%;background:var(--bg);display:flex;flex-direction:column;position:relative}
@media (min-width:640px){
  body{background:#EAE3D2}
  .phone{max-width:560px;box-shadow:0 0 0 1px var(--line),0 10px 40px rgba(28,36,32,.08)}
}

/* ---------- app chrome ---------- */
.stripes{display:flex;height:5px;flex:none}.stripes i{flex:1}.stripes i:nth-child(1){background:var(--forest)}.stripes i:nth-child(2){background:var(--mustard)}.stripes i:nth-child(3){background:var(--rust)}
.topbar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
button.brand{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0;min-height:44px}
button.brand:focus-visible{outline:3px solid var(--mustard);outline-offset:2px;border-radius:8px}
.brand img{width:40px;height:40px;flex:none}
.brand span{font-family:var(--display);font-size:calc(20px * var(--k));color:var(--forest);white-space:nowrap}
.topbar .title{font-family:var(--display);font-size:calc(19px * var(--k));color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{all:unset;cursor:pointer;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--forest);flex:none;position:relative}
.iconbtn:hover{background:var(--mist)}
.iconbtn svg{width:26px;height:26px}
.spacer{flex:1}
.bell .n{position:absolute;top:4px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--rust);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
main{flex:1;overflow-y:auto;padding:18px 16px 28px;display:flex;flex-direction:column;gap:22px}
main > *{flex-shrink:0}
main{padding-bottom:110px}
.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,minmax(min-content,1fr));column-gap:4px;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:460px;margin-inline:auto}
@media (min-width:640px){.tabbar,.sheet{max-width:560px}}
.tabbar button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px;font-size:15px;font-weight:700;color:var(--muted);white-space:nowrap}
.tabbar button svg{width:26px;height:26px}
.tabbar button[aria-current="page"]{color:var(--forest)}
.tabbar .pip{width:22px;height:4px;border-radius:4px;background:transparent;margin-bottom:2px}
.tabbar button[aria-current="page"] .pip{background:var(--mustard)}

/* ---------- type & blocks ---------- */
.label{font-size:calc(15px * var(--k));font-weight:800;color:var(--rust)}
.h1{font-family:var(--display);font-weight:400;font-size:calc(28px * var(--k));line-height:1.12;color:var(--forest)}
.h2{font-family:var(--display);font-weight:400;font-size:calc(21px * var(--k));line-height:1.15;color:var(--forest)}
.lead{font-size:calc(17px * var(--k));color:var(--muted)}
.meta{font-size:calc(15px * var(--k));color:var(--muted)}
.t{font-weight:800}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.link{all:unset;box-sizing:border-box;cursor:pointer;color:var(--forest);font-weight:700;font-size:calc(15px * var(--k));text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px;margin-block:-8px;position:relative}   /* 44px to tap, without spreading the layout out */
.link:focus-visible{outline:3px solid var(--mustard);outline-offset:2px;border-radius:6px}
/* A link inside a sentence stays part of the line; an invisible 44px area around it takes the tap */
:is(p, span, label, .reply) > :is(.link, a[href]){display:inline;min-height:0;margin:0;position:relative}
:is(p, span, label, .reply) > :is(.link, a[href])::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.link.quiet{color:var(--muted);font-weight:600}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card.flat{box-shadow:none;background:var(--cream-2)}
.tap{all:unset;box-sizing:border-box;display:block;cursor:pointer;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;width:100%}
.tap:hover{box-shadow:0 0 0 2px var(--mist),var(--shadow)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:999px;font-weight:800;font-size:calc(17px * var(--k));text-align:center;line-height:1.2}
.btn svg{width:22px;height:22px;flex:none}
.btn.primary{background:var(--forest);color:#fff}.btn.primary:hover{background:var(--forest-deep)}
.btn.secondary{background:var(--surface);color:var(--forest);box-shadow:inset 0 0 0 2px var(--forest)}
.btn.alert{background:var(--rust);color:#fff}.btn.alert:hover{background:var(--rust-deep)}
.btn.ghost{color:var(--muted)}
.btn.block{width:100%}
.btn.sm{min-height:44px;font-size:calc(15px * var(--k));padding:0 16px}
.btn[disabled]{opacity:.55;cursor:default}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:calc(15px * var(--k));font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;line-height:1.3}
.chip svg{width:15px;height:15px}
.chip.official{background:var(--forest);color:#fff}
.chip.free{background:var(--mist);color:var(--forest)}
.chip.trade{background:var(--mustard-soft);color:var(--brown)}
.chip.borrow{background:var(--orange-soft);color:#7A3E12}
.chip.wanted{background:#E4E9F2;color:#2E4466}
.chip.pets{background:var(--rust-soft);color:var(--rust-deep)}
.chip.claimed,.chip.done{background:#ECEBE6;color:var(--muted)}
.chip.teen{background:#E4E9F2;color:#2E4466}
.chip.lock{background:var(--cream);color:var(--brown)}
.chip.new{background:var(--mustard);color:var(--brown)}
.divider{height:1px;background:var(--line)}
.center{text-align:center}

/* date tile */
.dt{flex:none;width:58px;border-radius:14px;overflow:hidden;text-align:center;background:var(--cream-2);box-shadow:inset 0 0 0 1px var(--line)}
.dt .m{background:var(--rust);color:#fff;font-size:13px;font-weight:800;padding:2px 0}
.dt .d{font-family:var(--display);font-size:24px;color:var(--brown);line-height:1.25}
.dt .w{font-size:13px;font-weight:700;color:var(--muted);padding-bottom:4px}
.dt.rec .m{background:var(--olive)}
.ev{display:flex;gap:14px;align-items:flex-start}
.ev .t{font-size:calc(17px * var(--k));line-height:1.3}
.official-band{background:var(--forest);color:#fff;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.official-band .label{color:var(--mustard-lt)}
.official-band .h2{color:#fff}
.official-band .meta{color:#DCE6D8}
.official-band .btn.primary{background:var(--mustard);color:var(--brown)}
.official-band .btn.primary:hover{background:#F0B84A}

/* photos: every card can carry one */
.ph{display:grid;place-items:center;border-radius:14px;overflow:hidden;flex:none;background:var(--cream)}
.ph svg{width:44%;height:44%;opacity:.85}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.sm{width:64px;height:64px;border-radius:12px}
.ph.wide{width:100%;aspect-ratio:16/9;max-width:100%}
.ph.t-free{background:#DDE8D6;color:var(--forest)}.ph.t-trade{background:#F7E3B8;color:var(--brown)}.ph.t-borrow{background:#F8D9C0;color:#7A3E12}
.ph.t-wanted{background:#DCE3EE;color:#2E4466}.ph.t-pets{background:#F1D3C6;color:var(--rust-deep)}.ph.t-ev{background:var(--cream);color:var(--rust)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery .ph{aspect-ratio:1;width:100%}

/* people */
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;background:var(--olive);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:72px;height:72px;font-size:24px}
.faces{display:flex}
.faces .avatar{width:34px;height:34px;font-size:13px;border:2px solid var(--surface);margin-left:-8px}
.faces .avatar:first-child{margin-left:0}
.newn{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.newn .card{min-width:240px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}

/* quick actions */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick button{all:unset;cursor:pointer;box-sizing:border-box;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:92px;font-weight:800;font-size:calc(16px * var(--k));line-height:1.25}
.quick button svg{width:28px;height:28px;color:var(--forest)}
.quick button:hover{box-shadow:0 0 0 2px var(--mist),var(--shadow)}

/* lists */
.list{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.list > button,.list > div{all:unset;box-sizing:border-box;display:flex;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.list > button{cursor:pointer}
.list > :last-child{border-bottom:0}
.list > button:hover{background:var(--cream-2)}
.grow{flex:1;min-width:0}
.chev{width:22px;height:22px;color:var(--muted);flex:none}
.count{font-weight:800;color:var(--forest);font-size:15px;white-space:nowrap}
.ico{width:44px;height:44px;border-radius:12px;background:var(--mist);display:grid;place-items:center;flex:none;color:var(--forest)}
.ico svg{width:24px;height:24px}

/* segmented control & filters */
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);border-radius:999px;padding:4px}
.seg button{all:unset;cursor:pointer;text-align:center;padding:10px 0;border-radius:999px;font-weight:800;font-size:calc(16px * var(--k));color:var(--forest)}
.seg button[aria-pressed="true"]{background:var(--forest);color:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px}   /* chips wrap onto a second line on phones */
.filters button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:calc(15px * var(--k));white-space:nowrap}
.filters button[aria-pressed="true"]{background:var(--forest);color:#fff;box-shadow:none}
.filters button:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.search{position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--muted)}
.search input{padding-left:46px!important}

/* quotes, contact */
.quote{background:var(--cream-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.quote .by{font-size:calc(15px * var(--k));font-weight:700;color:var(--muted)}
.contact{display:flex;flex-direction:column;gap:10px;background:var(--mist);border-radius:14px;padding:14px}
.contact .num{font-weight:800;font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums}
.callrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.callrow a{text-decoration:none}

/* forms */
form{display:flex;flex-direction:column;gap:16px}
label,.lbl{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:calc(16px * var(--k))}
label small,.lbl small{font-weight:500;color:var(--muted);font-size:calc(15px * var(--k))}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],input[type=search],select,textarea{width:100%;min-height:52px;border-radius:12px;border:2px solid var(--line);background:var(--surface);padding:10px 14px;font-size:calc(17px * var(--k))}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--forest);outline:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{flex-direction:row;align-items:flex-start;gap:12px;font-weight:600;padding:10px 0;margin:-6px 0}   /* 44px to tap */
.check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--forest);flex:none}
.opt{display:flex;flex-direction:row;align-items:flex-start;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;font-weight:600}
.opt input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--forest);flex:none}
.opt:has(input:checked){border-color:var(--forest);background:var(--mist)}
.opt .t{display:block}
.opt small{display:block;font-weight:500;color:var(--muted);font-size:calc(15px * var(--k));margin-top:2px}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
legend{font-weight:700;margin-bottom:8px;padding:0}
.hint{background:var(--cream-2);border-radius:12px;padding:12px 14px;font-size:calc(15px * var(--k));color:var(--brown);display:flex;gap:10px}
.hint svg{flex:none;width:22px;height:22px;color:var(--orange)}
.err{color:var(--rust-deep);font-weight:700;font-size:calc(15px * var(--k))}
.field-err{margin:4px 0 0}
form > .field-err{margin-top:-10px}
fieldset > .field-err{margin-top:0}
input[aria-invalid="true"],input[aria-invalid="true"]:focus,textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rust-deep)}
input,select,textarea,fieldset{scroll-margin-top:96px;scroll-margin-bottom:96px}
.eg{font-weight:500;color:var(--muted);white-space:nowrap}
.builder{gap:10px}
.builder .two > label{justify-content:flex-end}
.sent{display:flex;gap:10px;align-items:flex-start;background:var(--mist);border-radius:12px;padding:12px 14px;font-weight:700;color:var(--forest)}
.sent svg{flex:none;width:22px;height:22px}

/* toggles */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.toggle:last-child{border-bottom:0}
.sw{display:flex;align-items:center;gap:8px;flex:none}
.sw .st{font-size:calc(15px * var(--k));font-weight:800;color:var(--muted);min-width:26px;text-align:right}
.switch{all:unset;cursor:pointer;width:60px;height:44px;position:relative;flex:none;border-radius:999px}   /* 44px tall to tap; the track drawn inside is 32px */
.switch::before{content:"";position:absolute;top:6px;left:2px;width:56px;height:32px;border-radius:999px;background:var(--off);transition:background .15s}
.switch::after{content:"";position:absolute;top:10px;left:6px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch[aria-checked="true"]::before{background:var(--forest)}
.switch[aria-checked="true"]::after{left:30px}
.switch:focus-visible{outline:3px solid var(--mustard);outline-offset:0}
.pick{display:flex;flex-wrap:wrap;background:var(--mist);border-radius:24px;padding:3px;flex:none;max-width:100%}
.pick button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-size:calc(15px * var(--k));font-weight:800;color:var(--forest)}
.pick button[aria-pressed="true"]{background:var(--forest);color:#fff}
.setrow{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}

/* sign-up */
.welcome{display:flex;flex-direction:column;gap:18px;text-align:center;padding-block:4px}
.welcome .patch{width:100%;max-width:330px;height:auto;margin-inline:auto}
.trust{display:flex;flex-direction:column;gap:6px;background:var(--mist);border-radius:14px;padding:14px;color:var(--forest);font-weight:700;font-size:15px}
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:18px}
.step:last-child{padding-bottom:0}
.step .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:15px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);color:var(--muted);z-index:1}
.step .dot svg{width:16px;height:16px}
.step.done .dot{background:var(--forest);color:#fff;box-shadow:none}
.step.now .dot{background:var(--mustard);color:var(--brown);box-shadow:none}
.step:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--line)}
.step.done:not(:last-child)::before{background:var(--forest)}
.checklist .item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.checklist .item:last-child{border-bottom:0}
.box{width:28px;height:28px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:#fff}
.box.on{background:var(--forest);border-color:var(--forest)}
.box svg{width:18px;height:18px}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code input{text-align:center;font-weight:800;font-size:24px;padding:0}

/* help */
.sosbar{display:flex;align-items:center;gap:12px;background:var(--rust-soft);border-radius:16px;padding:12px 14px}
.sosbar .grow{font-weight:800;color:var(--rust-deep)}
.call911{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border-radius:12px;padding:12px 14px;font-weight:700;color:var(--rust-deep)}
.call911 svg{flex:none;width:24px;height:24px}
.night{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.night:last-child{border-bottom:0}
.alertlive{background:var(--rust);color:#fff;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px}
.alertlive .h2{color:#fff}
.alertlive .meta{color:#FBE3D8}
.pumpkin{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--orange);margin-right:3px;vertical-align:-1px}

/* confirmation */
.done-screen{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;padding-top:20px}
.done-screen .badge{width:124px;height:124px}
.tick{width:72px;height:72px;border-radius:50%;background:var(--forest);display:grid;place-items:center;color:#fff}
.tick svg{width:40px;height:40px}

/* sheets, toasts, QR */
.scrim{position:fixed;inset:0;background:rgba(28,36,32,.45);z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:460px;max-height:88vh;overflow-y:auto;background:var(--surface);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.sheet .grab{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 4px;flex:none}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;font-size:calc(15px * var(--k));z-index:40;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;gap:14px;align-items:center}
.toast button{all:unset;cursor:pointer;color:var(--mustard-lt);font-weight:800;padding:11px 8px;margin:-11px -8px;border-radius:8px}
.toast button:focus-visible{outline:3px solid var(--mustard);outline-offset:0}

.qr{background:#fff;border-radius:14px;padding:14px;display:grid;place-items:center}
.qr canvas,.qr img{width:160px!important;height:160px!important}
.hanger{border-radius:18px;background:var(--forest);color:#fff;padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hanger .hole{width:54px;height:54px;border-radius:50%;background:var(--bg)}
.hanger .h2{color:#fff}
.hanger .qr{padding:10px}
.hanger-url{font-weight:800;font-size:calc(18px * var(--k));letter-spacing:.02em;margin-top:-4px}
/* Printing door hangers: only the two copies in #printzone go to paper, in color */
#printzone{display:none}
@media print{
  @page{size:letter portrait;margin:.35in}
  body.print-hanger,body.print-guide{background:#fff}
  body.print-hanger > *:not(#printzone),body.print-guide > *:not(#printzone){display:none!important}
  body.print-hanger #printzone,body.print-guide #printzone{display:block}
  /* The how-to sheet: one letter page, large black-and-white type */
  .print-guide-sheet .guide{font-size:13.5pt;line-height:1.35;gap:.09in;color:#000}
  .print-guide-sheet .guide-title{font-size:24pt;color:#000}
  .print-guide-sheet .guide-url{font-size:15pt}
  .print-guide-sheet .guide h3{font-size:15pt;color:#000;margin-top:.06in}
  .print-guide-sheet .guide .qr img{width:1.2in!important;height:1.2in!important}
  .print-guide-sheet .guide .qr canvas{display:none!important}
  .print-guide-sheet .guide-head img{width:.9in;height:.9in}
  .print-guide-sheet .guide-911{border-color:#000}
  .print-sheet{display:grid;grid-template-columns:1fr 1fr;gap:.3in;height:10.2in}
  .print-sheet .hanger{border-radius:0;padding:.3in .25in;gap:10px;justify-content:space-evenly;font-size:14pt;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid;outline:1px dashed #9A9A9A}
  .print-sheet .hanger .hole{width:1.1in;height:1.1in;background:#fff}
  .print-sheet .hanger > img{width:1.5in;height:1.5in}
  .print-sheet .hanger .h2{font-size:26pt}
  .print-sheet .hanger p{font-size:14pt;line-height:1.35}
  .print-sheet .hanger .meta{font-size:12pt}
  .print-sheet .hanger .qr img{width:1.9in!important;height:1.9in!important}
  .print-sheet .hanger .qr canvas{display:none!important}
  .print-sheet .hanger-url{font-size:20pt}
}
/* ---------- v2 additions ---------- */
[tabindex="-1"]:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
label.btn:focus-within{outline:3px solid var(--mustard);outline-offset:2px}
.link svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.checklist button.item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);width:100%;font-weight:700}
.checklist button.item:last-child{border-bottom:0}
.checklist .item.done .grow{color:var(--muted);font-weight:600}
.who{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:center}
.sosbar > svg{width:26px;height:26px;color:var(--rust-deep);flex:none}
.recline{display:flex;align-items:center;gap:8px;color:var(--forest);font-weight:800}
.recline svg{width:22px;height:22px;flex:none}
.trust span{display:flex;align-items:flex-start;gap:8px;text-align:left}
.trust svg{width:18px;height:18px;flex:none;margin-top:3px}
.list > .setrow{flex-direction:column;align-items:stretch;gap:10px}
.list > .toggle{justify-content:space-between}
.setrow .pick{align-self:flex-start}
.hanger .qr canvas,.hanger .qr img{width:120px!important;height:120px!important}
.dotnew{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rust);margin-right:8px;vertical-align:1px}
.teal{display:inline-block;width:14px;height:14px;border-radius:50%;background:#2A8C8C;margin-right:6px;vertical-align:-1px}
.notice h3{font-size:calc(17px * var(--k));font-weight:800;line-height:1.3}
.num-badge{min-width:32px;height:32px;border-radius:10px;background:var(--mist);color:var(--forest);font-weight:800;display:grid;place-items:center;flex:none}
.call911 .btn{color:#fff}
.ph{position:relative}
.avatar svg{width:24px;height:24px}
.me-btn .avatar{width:36px;height:36px;font-size:14px;box-shadow:0 0 0 2px var(--mustard)}
.clamp2{-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph svg.scene{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.compare{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow)}
.compare svg,.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-now,.cmp-then{position:absolute;inset:0}
.cmp-then{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:focus-within{outline:3px solid var(--mustard);outline-offset:2px}
.cmp-tag{position:absolute;bottom:10px;background:rgba(28,36,32,.72);color:#fff;font-size:15px;font-weight:800;padding:3px 9px;border-radius:8px;pointer-events:none}
.cmp-tag.l{left:10px}.cmp-tag.r{right:10px}
.compare.aerial{aspect-ratio:10/9}
.aerial-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.aerial-outline polygon{fill:rgba(226,168,58,.10);stroke:#FFD57E;stroke-width:2.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.aerial-pin{position:absolute;transform:translate(-50%,-100%);background:var(--mustard);color:var(--brown);font-size:15px;font-weight:800;padding:2px 8px;border-radius:8px;pointer-events:none;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:3}
.aerial-pin::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--mustard);border-bottom:0}
.tl{list-style:none;margin:0;padding:0 0 0 16px;border-left:3px solid var(--line);display:flex;flex-direction:column;gap:20px}
.tl-year{position:relative;padding-left:14px}
.tl-year::before{content:"";position:absolute;left:-26px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--mustard);box-shadow:0 0 0 3px var(--bg)}
.tl-y{font-family:var(--display);font-size:calc(22px * var(--k));color:var(--forest);margin-bottom:8px;line-height:1.1}
.moment{display:flex;gap:10px;align-items:flex-start;background:var(--cream-2);border-radius:14px;padding:12px 14px;font-weight:500}
.moment svg{width:20px;height:20px;flex:none;color:var(--rust);margin-top:2px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tap.tile{padding:8px 8px 12px;display:flex;flex-direction:column;gap:6px}
.reply{background:var(--cream-2);border-radius:12px;padding:10px 12px;font-size:calc(15px * var(--k))}
form.f-reply{flex-direction:row;gap:8px;align-items:center}
form.f-reply input{min-height:44px;flex:1;min-width:0}
.track{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.track li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:calc(15px * var(--k));font-weight:700;color:var(--muted);text-align:center;line-height:1.2}
.track li::before{content:"";height:6px;border-radius:3px;background:var(--line)}
.track li.done::before{background:var(--olive)}
.track li.now::before{background:var(--forest)}
.track li.now{color:var(--forest);font-weight:800}
.bar{display:block;height:8px;border-radius:4px;background:var(--mist);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--forest);border-radius:4px}
.how{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px;font-size:calc(15px * var(--k))}
.iconpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ipick{cursor:pointer;align-items:center;position:relative}
.ipick .ico{width:100%;height:52px;border-radius:14px}
.ipick:has(input:checked) .ico{background:var(--forest);color:#fff}
.ipick:focus-within .ico{outline:3px solid var(--mustard);outline-offset:2px}
.newn .card > :last-child{margin-top:auto}
.newn .card{flex:0 0 256px}
.tour{display:flex;flex-direction:column;gap:18px}
.tour-art{background:var(--cream-2);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px var(--line)}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:9px;height:9px;border-radius:5px;background:var(--line);transition:width .2s}
.dots i.past{background:var(--olive)}
.dots i.on{background:var(--forest);width:24px}
.tour-nav{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:12px 0 4px;background:linear-gradient(to bottom,rgba(248,245,238,0),var(--bg) 30%)}
.tabmini{display:flex;flex-direction:column;gap:12px}
.tabmini-row,.rule{display:flex;gap:12px;align-items:flex-start}
.rules{display:flex;flex-direction:column;gap:14px}
.two-col{display:grid;grid-template-columns:1fr;gap:10px}
.yes,.no{display:flex;gap:8px;align-items:flex-start;font-size:calc(15px * var(--k))}
.yes svg,.no svg{width:18px;height:18px;flex:none;margin-top:3px}
.yes svg{color:var(--forest)}.no svg{color:var(--rust)}
.ph img{position:absolute;inset:0}
/* Local pros: a big Call button, and the collapsed "More categories" list */
.btn.big{min-height:60px;font-size:calc(19px * var(--k))}
.more-cats > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:800;color:var(--forest);min-height:44px}
.more-cats > summary::-webkit-details-marker{display:none}
.more-cats > summary svg{width:20px;height:20px;transition:transform .15s}
.more-cats[open] > summary svg{transform:rotate(90deg)}
.more-cats > .list{margin-top:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- real site additions ---------- */
.skel{display:flex;flex-direction:column;gap:12px}
.skel i{display:block;height:84px;border-radius:var(--r);background:linear-gradient(90deg,#EFE9DC,#F7F2E7,#EFE9DC);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
.skel i:first-child{height:34px;width:60%}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.loading-line{color:var(--muted);font-size:15px;display:flex;gap:8px;align-items:center}
.problem{background:var(--rust-soft);color:var(--rust-deep);border-radius:12px;padding:12px 14px;font-weight:700;display:flex;flex-direction:column;gap:8px}
.bubbles{display:flex;flex-direction:column;gap:8px}
.bubble{max-width:82%;padding:10px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.me{align-self:flex-end;background:var(--forest);color:#fff}
.bubble .when{display:block;font-size:calc(15px * var(--k));margin-top:4px;opacity:.85}
.iconbtn .n{position:absolute;top:4px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--rust);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.alertbar{display:flex;flex-direction:column;gap:10px;background:var(--rust);color:#fff;border-radius:16px;padding:14px 16px}
.alertbar .meta{color:#FBE3D8}
.alertbar .btn{background:#fff;color:var(--rust-deep)}
/* An alert that's been open 2 hours or more: still there, but not shouting */
.alertold{gap:6px;border-left:5px solid var(--rust)}
.alertold .label{color:var(--rust-deep)}
.alertold .btn{margin-top:6px}
/* Lost and found pets: a warm banner at the top of Home for 48 hours */
.petbar{display:flex;flex-direction:column;gap:12px;background:var(--rust-soft);border-radius:16px;padding:14px 16px}
.petbar > .row > svg{flex:none;width:26px;height:26px;color:var(--rust-deep)}
.petbar .h2{color:var(--rust-deep)}
.petbar .pet{display:flex;flex-direction:column;gap:10px;background:var(--surface);border-radius:12px;padding:12px}
.petbar .pet .t{overflow-wrap:anywhere}
.petbar .pet .btn{align-self:flex-start}
.reply .when{color:var(--muted);white-space:nowrap}
.bill{width:100%;border-radius:12px;background:var(--cream-2)}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.codebox{letter-spacing:.4em;text-align:center;font-weight:800;font-size:28px!important}
.topbar .brand span{font-size:calc(18px * var(--k))}
/* Phones: the top bar (logo, name, and three 44px buttons) fits from 360px up.
   The name shrinks with the screen (about 14px at 360, 18px from 400) and hides only below 360px. */
@media (max-width:439px){
  .topbar{gap:6px;padding:8px 8px 8px 12px}
  .topbar .brand{gap:8px}
  .topbar .brand img{width:36px;height:36px}
  .topbar .brand span{font-size:clamp(13px, calc((100vw - 228px) / 9.7), 18px)}
}
@media (max-width:359px){.topbar .brand span{display:none}}
.mini{font-size:calc(15px * var(--k))}
.inline-form{flex-direction:row;gap:8px;align-items:flex-end}
.inline-form > *{flex:1;min-width:0}
.inline-form .btn{flex:none}

/* ---------- layouts for tablets and computers ---------- */
/* Home: one column on phones in this order; two columns on computers (see below). */
/* Home is built in reading order for each layout (see V.home), so there's no reordering here */
.home-cols,.col-a,.col-b{display:flex;flex-direction:column;gap:22px}
#newn,#grp{scroll-margin-top:90px}
/* Tab labels: 15px, or 17px with Larger text. Each tab is at least as wide as its word, so "Neighbors" fits even at 320px. */
.large .tabbar button{font-size:17px}
@media (max-width:1023px){body.toasting main{padding-bottom:200px}}   /* room to scroll a new post above a toast */
/* Pilot banner: one thin line under the top bar on every signed-in page */
.pilotbar{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:6px;padding:4px 16px;background:var(--mustard-soft);color:var(--brown);border-bottom:1px solid var(--line);font-size:calc(15px * var(--k));font-weight:600;line-height:1.35;text-align:center}
.pilotbar button{background:none;border:0;padding:2px;margin:0;font:inherit;font-weight:800;color:var(--forest);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:6px;position:relative}
.pilotbar button::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}   /* a thin line, but a 44px tap */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.side-only{display:none!important}
body{--cw:760px}

/* Tablets (iPad portrait and up): the app fills the screen, content stays a comfortable width */
@media (min-width:760px){
  body{background:var(--bg)}
  body.bare{--cw:640px}
  body[data-screen="welcome"]{--cw:1000px}
  .frame{display:block}
  .phone{max-width:none;box-shadow:none}
  main{width:100%;max-width:var(--cw);margin-inline:auto;padding:26px 32px 120px}
  .topbar{padding-inline:max(16px,calc((100% - var(--cw)) / 2 + 20px))}
  .tabbar{max-width:none;padding-inline:max(4px,calc(50% - 360px))}
  .tabbar button{flex-direction:row;justify-content:center;gap:8px;padding:10px 0}
  .tabbar .pip{position:absolute;top:0;width:36px}
  .tabbar button{position:relative}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards > .tap{height:100%}
  .quick{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(4,1fr)}
  /* sheets become centered dialogs */
  .scrim{align-items:center;padding:24px}
  .sheet{max-width:560px;border-radius:22px;padding:22px 24px;max-height:86vh}
  .sheet .grab{display:none}
  /* welcome: the patch beside the words */
  .welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;row-gap:16px;text-align:left;align-items:center;padding-top:32px}
  .welcome > *{grid-column:2}
  .welcome .patch{grid-column:1;grid-row:1 / span 8;max-width:420px;align-self:center}
  .welcome .link{justify-self:start}
  .welcome .h1{font-size:calc(38px * var(--k))}
}

/* Computers and iPads held sideways: a sidebar instead of the bottom tab bar */
@media (min-width:1024px){
  body.wide{--cw:1120px}
  .stripes{position:fixed;top:0;left:0;right:0;z-index:12}
  .phone{padding-top:5px}
  .topbar{top:5px}
  body.nav .phone{padding-left:232px}
  body.nav .topbar[data-kind="tab"]{display:none}
  main{padding:32px 36px 56px}
  .toast{bottom:32px}
  body.nav .toast{margin-left:116px}
  .side-only{display:flex!important}
  .tabbar{top:5px;bottom:0;left:0;right:auto;width:232px;margin:0;padding:18px 14px 20px;display:flex;flex-direction:column;gap:2px;border-top:0;border-right:1px solid var(--line);overflow-y:auto}
  .tabbar button{flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 14px;font-size:16px;color:var(--ink);font-weight:700;white-space:normal}
  .tabbar button:hover{background:var(--cream-2)}
  .tabbar button svg{width:24px;height:24px;color:var(--forest)}
  .tabbar button[aria-current="page"]{background:var(--mist);color:var(--forest);font-weight:800}
  .tabbar .pip{display:none}
  .tabbar .side-brand{gap:10px;padding:0 6px 16px;margin-bottom:6px;border-bottom:1px solid var(--line);border-radius:0}
  .tabbar .side-brand:hover{background:none}
  .tabbar .side-brand img{width:44px;height:44px}
  .tabbar .side-brand span{font-family:var(--display);font-weight:400;color:var(--forest);font-size:19px;line-height:1.1}
  .tabbar .side-sep{height:1px;background:var(--line);margin:10px 6px}
  .tabbar .side-grow{flex:1;min-height:16px}
  .tabbar .side-me .avatar{width:28px;height:28px;font-size:12px;box-shadow:0 0 0 2px var(--mustard)}
  .tabbar button svg{flex:none}
  .tabbar .side-n{position:absolute;left:24px;top:2px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:var(--rust);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface);line-height:1}
  .tabbar .side-sos{background:var(--rust-soft);color:var(--rust-deep);justify-content:center;border-radius:999px;font-weight:800;white-space:nowrap;gap:8px;padding:12px 10px;font-size:15px}
  .tabbar .side-sos svg{color:var(--rust-deep)}
  .tabbar .side-sos:hover{background:#F1CFC1}
}

/* Wide screens: Home in two columns */
@media (min-width:1100px){
  .home-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
  .col-b .quick{grid-template-columns:1fr 1fr}
  .col-a .cards{grid-template-columns:minmax(0,1fr)}
  .col-b .newn{flex-direction:column;overflow:visible}
  .col-b .newn .card{flex:none;min-width:0}
  body.wide[data-screen="events"] .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Welcome: how joining works */
.howjoin{background:var(--surface);border-radius:14px;padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:6px}
.howjoin h2{font-size:calc(18px * var(--k));margin:0}
.howjoin ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
/* Home: the greeting with "+ Post" beside it */
.greet .btn{flex:none}
.greet .h1{overflow-wrap:anywhere}
/* Post an event: Starts and Ends side by side, lined up, with room for the words in the boxes */
.times > label{justify-content:flex-end}
.times select{padding-left:10px;padding-right:4px}
.optl{font-weight:500;color:var(--muted)}
@media (max-width:420px){.large .times{grid-template-columns:1fr}}
/* "More options": the extras on a form, folded away until they're wanted */
.more-opts{border:2px solid var(--line);border-radius:14px;background:var(--surface)}
.more-opts > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:56px;font-weight:800;color:var(--forest)}
.more-opts > summary::-webkit-details-marker{display:none}
.more-opts > summary{align-items:flex-start}
.more-opts > summary > svg{width:20px;height:20px;flex:none;margin-top:3px;transition:transform .15s}
.more-opts[open] > summary > svg{transform:rotate(90deg)}
.more-opts > summary .t{display:block;font-size:calc(17px * var(--k))}
.more-opts > summary small{display:block;font-weight:500;color:var(--muted);font-size:calc(15px * var(--k))}
.more-opts > .stack{padding:4px 14px 16px}
.more-opts:focus-within > summary:focus-visible{outline:3px solid var(--forest);outline-offset:2px;border-radius:12px}
/* Ask for help: the kinds of help as big tappable cards, two to a row */
.kindgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kindcard{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:92px;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;line-height:1.25}
.kindcard .ki{width:36px;height:36px;border-radius:10px;background:var(--mist);color:var(--forest);display:grid;place-items:center;flex:none}
.kindcard .ki svg{width:22px;height:22px}
.kindcard .t{min-width:0;max-width:100%;overflow-wrap:break-word}
.kindcard:has(input:checked){border-color:var(--forest);background:var(--mist)}
.kindcard:has(input:checked) .ki{background:var(--forest);color:#fff}
.kindcard:has(input:focus-visible){outline:3px solid var(--forest);outline-offset:2px}
@media (max-width:420px){.large .kindgrid{grid-template-columns:1fr}}
/* The how-to sheet (Invite page), on screen */
.guide{display:flex;flex-direction:column;gap:8px;color:var(--ink);font-size:calc(15px * var(--k));line-height:1.4}
.guide-head{display:flex;align-items:center;gap:12px}
.guide-title{font-family:var(--display);font-size:1.35em;line-height:1.15;color:var(--forest)}
.guide-url{font-weight:800}
.guide .qr{flex:none;width:76px}
.guide .qr img,.guide .qr canvas{width:76px!important;height:76px!important;display:block}
.guide h3{margin:6px 0 0;font-size:1.05em;font-weight:800;color:var(--forest)}
.guide dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.guide dt{font-weight:800}
.guide dd{margin:0}
.guide ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:2px}
.guide p{margin:0}
.guide-911{border:2px solid var(--rust);border-radius:12px;padding:10px 12px;margin-top:4px}
.guide-foot{font-weight:600}
/* "This week in the Grove" on Home */
.weekline{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:14px;background:var(--mist);border-left:5px solid var(--forest)}
.weekline h2.label{margin:0;color:var(--forest)}
.weekline .items{font-size:calc(17px * var(--k));line-height:1.6}
.weekline .items .link{font-size:inherit}
.weekline .dot{color:var(--muted);font-weight:700}
/* "Put Park Forest on your home screen" (phones, once) */
.a2hs img{width:52px;height:52px;border-radius:12px;flex:none;box-shadow:0 0 0 1px var(--line)}
.a2hs .steps{margin:0;padding-left:1.5em;display:flex;flex-direction:column;gap:6px}
.a2hs .steps li{padding-left:2px}
.a2hs .kbd{display:inline-flex;vertical-align:-5px;width:26px;height:26px;border-radius:7px;background:var(--mist);color:var(--forest);align-items:center;justify-content:center}
.a2hs .kbd svg{width:18px;height:18px}
.a2hs > .label{margin-top:4px}
/* Questions for neighbors */
.ask h3.t{font-size:calc(17px * var(--k));line-height:1.3}
.ask .list{box-shadow:none;border:1px solid var(--line)}
#asks:focus,#newn:focus{outline:none}
#asks:focus-visible,#newn:focus-visible{outline:3px solid var(--mustard);outline-offset:4px}