/* ==========================================================================
   Atosworld — hand-drawn dog-park callboard. Day / night themes via tokens.
   ========================================================================== */

:root{
  --bg:#EDE7D0; --bg2:#E4DCC0; --paper:#FCF6E9;
  --ink:#34291F; --ink-soft:#6B5D4F; --ink-faint:#9C8E7C; --line:#D8CCAE;

  --grass:#4C9A57; --grass-deep:#347C3F; --sky:#5FAAD4; --sky-deep:#3E86B0;
  --sun:#F0B435; --coral:#EA5F3D; --berry:#CE4E76;

  --good:#4C9A57; --warn:#EA5F3D; --info:#3E86B0;

  --note-mint:#DDF0D6; --note-sky:#D6EAF6; --note-butter:#FBEEC0;
  --note-blush:#F7DAE0; --note-lilac:#E7DFF4;

  --pin:#EA5F3D; --tape:rgba(240,180,53,.34);
  --shadow:0 10px 22px -12px rgba(52,41,31,.45);
  --shadow-lift:0 20px 34px -14px rgba(52,41,31,.5);
  --radius-hd:255px 12px 225px 15px/15px 225px 18px 255px;
  --paw:%2334291F;

  --display:'Chalkboard SE','Comic Sans MS','Marker Felt','Segoe Print','Bradley Hand',cursive;
  --body:'Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#18211E; --bg2:#131a18; --paper:#28322E; --ink:#F2EAD6; --ink-soft:#C3BBA6;
    --ink-faint:#8B8471; --line:#3A453F;
    --grass:#6DBE74; --grass-deep:#59A861; --sky:#77BEE4; --sky-deep:#5EA6CE;
    --sun:#F6C24C; --coral:#F5794F; --berry:#E8749A;
    --good:#6DBE74; --warn:#F5794F; --info:#77BEE4;
    --note-mint:#2C3B31; --note-sky:#293A42; --note-butter:#3A3625; --note-blush:#3B2A30; --note-lilac:#312C3E;
    --tape:rgba(246,194,76,.2); --pin:#F5794F;
    --shadow:0 12px 24px -12px rgba(0,0,0,.6); --shadow-lift:0 22px 38px -14px rgba(0,0,0,.66);
    --paw:%23F2EAD6;
  }
}
:root[data-theme="light"]{
  --bg:#EDE7D0; --bg2:#E4DCC0; --paper:#FCF6E9; --ink:#34291F; --ink-soft:#6B5D4F; --ink-faint:#9C8E7C; --line:#D8CCAE;
  --grass:#4C9A57; --grass-deep:#347C3F; --sky:#5FAAD4; --sky-deep:#3E86B0; --sun:#F0B435; --coral:#EA5F3D; --berry:#CE4E76;
  --good:#4C9A57; --warn:#EA5F3D; --info:#3E86B0;
  --note-mint:#DDF0D6; --note-sky:#D6EAF6; --note-butter:#FBEEC0; --note-blush:#F7DAE0; --note-lilac:#E7DFF4;
  --tape:rgba(240,180,53,.34); --pin:#EA5F3D;
  --shadow:0 10px 22px -12px rgba(52,41,31,.45); --shadow-lift:0 20px 34px -14px rgba(52,41,31,.5);
  --paw:%2334291F;
}
:root[data-theme="dark"]{
  --bg:#18211E; --bg2:#131a18; --paper:#28322E; --ink:#F2EAD6; --ink-soft:#C3BBA6; --ink-faint:#8B8471; --line:#3A453F;
  --grass:#6DBE74; --grass-deep:#59A861; --sky:#77BEE4; --sky-deep:#5EA6CE; --sun:#F6C24C; --coral:#F5794F; --berry:#E8749A;
  --good:#6DBE74; --warn:#F5794F; --info:#77BEE4;
  --note-mint:#2C3B31; --note-sky:#293A42; --note-butter:#3A3625; --note-blush:#3B2A30; --note-lilac:#312C3E;
  --tape:rgba(246,194,76,.2); --pin:#F5794F;
  --shadow:0 12px 24px -12px rgba(0,0,0,.6); --shadow-lift:0 22px 38px -14px rgba(0,0,0,.66);
  --paw:%23F2EAD6;
}

*{box-sizing:border-box}
html,body{margin:0}
/* Disable iOS Safari's text-autosizing ("font boosting"). It MUST live on the
   <html> root — WebKit's autosizer ignores the property when it's only on
   <body>, which was inflating the header labels until the action buttons
   overflowed the (narrow) iPhone viewport and got clipped off the right edge. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--body); color:var(--ink); background-color:var(--bg);
  background-attachment:fixed; line-height:1.5; overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
/* Clip any horizontal overflow from decorative art / rotated cards so the page
   never gets wider than the screen (which made mobile render it scaled). The
   sticky <header> is a sibling of <main>, so this doesn't affect it. */
main{overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

h1,h2,h3,.disp{font-family:var(--display);font-weight:400;letter-spacing:.2px;text-wrap:balance}
a{color:var(--sky-deep)}
button{font-family:var(--body);cursor:pointer}
:focus-visible{outline:3px solid var(--sky-deep);outline-offset:2px;border-radius:6px}

/* boot / loading */
.boot-screen{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.boot-mark{font-size:56px;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}

/* ---------- buttons ---------- */
.btn{
  border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:9px 15px;border-radius:14px 10px 16px 9px/9px 16px 10px 14px;
  font-weight:700;font-size:.9rem;box-shadow:0 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;line-height:1.2;
}
.btn:hover{transform:translateY(-2px) rotate(-.6deg);box-shadow:0 5px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 3px 0 var(--ink)}
.btn.primary{background:var(--grass);color:#fff;border-color:var(--grass-deep);box-shadow:0 3px 0 var(--grass-deep)}
.btn.primary:hover{box-shadow:0 5px 0 var(--grass-deep)}
.btn.coral{background:var(--coral);color:#fff;border-color:#b7452a;box-shadow:0 3px 0 #b7452a}
.btn.sky{background:var(--sky);color:#08283a;border-color:var(--sky-deep);box-shadow:0 3px 0 var(--sky-deep)}
.btn.ghost{background:transparent;box-shadow:none;border-style:dashed}
.btn.sm{padding:6px 11px;font-size:.8rem;box-shadow:0 2px 0 var(--ink);border-width:2px}
.btn.block{width:100%;justify-content:center;font-size:1rem;padding:12px}
.icon-btn{width:44px;height:40px;justify-content:center}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:blur(8px);border-bottom:2px dashed var(--line)}
/* One non-wrapping row: brand fixed left · actions flex-fill (right-aligned,
   wrapping in place so they start on the logo line) · corner fixed top-right. */
.top .wrap{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none;color:var(--ink);background:none;border:none;padding:0}
.mark{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--sun);color:#34291F;
  border-radius:50% 46% 52% 48%/48% 52% 48% 52%;font-size:24px;box-shadow:var(--shadow);
  border:2.5px solid #34291F22;transform:rotate(-6deg)}
.brand b{font-family:var(--display);font-size:1.5rem;line-height:1;display:block;text-align:left}
.brand small{font-size:.72rem;color:var(--ink-soft);letter-spacing:.3px}
nav.actions{display:flex;flex:1 1 0;min-width:0;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* account / admin dropdown menu */
.menu-wrap{position:relative;display:inline-block;flex:none}
.menu-btn.on{background:var(--bg2)}
.menu-scrim{position:fixed;inset:0;z-index:48}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:212px;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:15px;box-shadow:var(--shadow-lift);
  padding:6px;display:flex;flex-direction:column;gap:2px}
.menu-user{display:flex;align-items:center;gap:9px;padding:6px 10px 8px}
.menu-user b{font-family:var(--display);font-size:1.02rem;line-height:1.1}
.menu-user small{display:block;color:var(--ink-soft);text-transform:capitalize;font-size:.72rem}
.menu-emoji{font-size:1.4rem}
.menu-item{display:block;width:100%;text-align:left;background:transparent;border:none;font:inherit;
  color:var(--ink);padding:9px 11px;border-radius:10px;cursor:pointer}
.menu-item:hover{background:color-mix(in srgb,var(--sky) 18%,var(--paper))}
.menu-item.on{font-weight:800;background:color-mix(in srgb,var(--grass) 12%,var(--paper))}
.auth-lang{position:absolute;top:14px;left:14px}
.menu-item.danger{color:var(--coral)}
.menu-item.danger:hover{background:color-mix(in srgb,var(--coral) 15%,var(--paper))}
/* Outstanding-count pill on the "Reports" menu item. */
.menu-badge{float:right;min-width:20px;padding:0 6px;margin-left:8px;border-radius:11px;
  background:var(--coral);color:#fff;font-size:.78rem;font-weight:800;line-height:20px;text-align:center}
/* Selected reason row in the "Report a problem" sheet. */
.pick-row.on{border-color:var(--grass)!important;background:color-mix(in srgb,var(--grass) 9%,var(--paper))}
.menu-sep{height:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);margin:4px 6px;border-radius:2px}

/* ---------- hero ---------- */
/* vertical-only padding so .wrap's left/right padding isn't clobbered */
.hero{padding-top:34px;padding-bottom:8px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:26px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.78rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--grass-deep);background:var(--note-mint);padding:5px 12px;border-radius:20px;
  border:2px dashed var(--grass);transform:rotate(-1.2deg)}
.hero h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1;margin:16px 0 6px}
.hero h1 .u{position:relative;white-space:nowrap;color:var(--grass-deep)}
.hero h1 .u svg{position:absolute;left:0;right:0;bottom:-.32em;width:100%;height:.4em;overflow:visible}
.lead{font-size:1.1rem;color:var(--ink-soft);max-width:46ch;margin:14px 0 22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.ticker{margin-top:26px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper);
  box-shadow:var(--shadow);overflow:hidden;display:flex;align-items:stretch}
.ticker .lbl{background:var(--coral);color:#fff;font-weight:800;padding:10px 14px;white-space:nowrap;font-size:.82rem;
  letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.ticker .track{overflow:hidden;flex:1;position:relative;height:44px;display:flex;align-items:center}
.ticker .move{white-space:nowrap;display:flex;align-items:center;font-weight:600;min-width:100%}
.ticker .move.static{padding:0 16px}
/* Two identical runs; sliding left by exactly one run (-50%) loops seamlessly,
   independent of content width — so adding a ping can't clip it. */
.ticker .move.scrolling{position:absolute;left:0;top:0;height:100%;will-change:transform;
  animation-name:marq;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:30s}
.ticker .run{display:inline-flex;align-items:center;gap:26px;padding-right:26px}
.ticker .move b{color:var(--grass-deep)}
.ticker .sep{opacity:.4}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hero-art{position:relative;min-height:280px}
.postcard{position:absolute;background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--radius-hd);
  box-shadow:var(--shadow-lift);padding:14px}
.postcard .ph{border-radius:200px 12px 200px 12px/12px 200px 12px 200px;overflow:hidden;border:2px solid var(--ink)}
.postcard .cap{font-family:var(--display);text-align:center;margin-top:8px;font-size:1.02rem}
.pin-dot{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff6, transparent 42%), var(--pin);
  box-shadow:0 3px 5px rgba(0,0,0,.35);border:1.5px solid rgba(0,0,0,.25)}
.pin-dot.green{background:radial-gradient(circle at 34% 30%, #fff6, transparent 42%), var(--grass)}

/* ---------- sections ---------- */
/* vertical-only padding so the horizontal padding from .wrap survives */
section.board{padding-top:30px;padding-bottom:30px}
.sec-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.sec-head h2{font-size:1.85rem;margin:0}
.sec-head p{margin:2px 0 0;color:var(--ink-soft);font-size:.95rem}
.sec-head .spacer{flex:1}

/* now strip */
.now-strip{background:linear-gradient(180deg,var(--note-sky),color-mix(in srgb,var(--note-sky) 60%, var(--bg)));
  border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);padding:18px;position:relative}
.now-strip::before,.now-strip::after{content:"";position:absolute;top:-13px;width:74px;height:26px;
  background:var(--tape);border:1px solid #0002}
.now-strip::before{left:34px;transform:rotate(-4deg)}
.now-strip::after{right:34px;transform:rotate(4deg)}
.now-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}

/* Floating "I've left" button — shown only when your dog is out, always in
   reach as you scroll. Sits below modal backdrops (z 60) so it hides behind an
   open sheet, and below the toast (z 90). */
.leave-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.leave-fab .fab-btn{font-size:1rem;padding:14px 20px;border-radius:999px;
  box-shadow:0 4px 0 #b7452a, 0 8px 20px rgba(0,0,0,.28)}
.leave-fab .fab-btn:active{box-shadow:0 2px 0 #b7452a, 0 4px 12px rgba(0,0,0,.28)}
.leave-scrim{position:fixed;inset:0;z-index:44}
.leave-menu{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow-lift);padding:8px;min-width:230px;max-width:82vw}
.leave-menu-h{font-size:.76rem;color:var(--ink-soft);padding:4px 8px 6px}
.leave-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:transparent;border:none;padding:10px 8px;border-radius:10px;font:inherit;color:var(--ink);cursor:pointer}
.leave-menu-item:hover{background:color-mix(in srgb,var(--coral) 12%,var(--paper))}
.leave-menu-item .lm-park{font-weight:700}
.leave-menu-item .lm-dogs{margin-left:auto;color:var(--ink-soft);font-size:.82rem;white-space:nowrap}
.ping{background:var(--paper);border:2px solid var(--ink);border-radius:14px 12px 15px 11px/11px 15px 12px 14px;
  padding:12px 13px;display:flex;gap:11px;align-items:flex-start;box-shadow:0 3px 0 rgba(52,41,31,.14);
  text-align:left;color:var(--ink);width:100%}
.dogface{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;
  background:var(--note-butter);border:2px solid var(--ink)}
.ping .who{font-family:var(--display);font-size:1.14rem;line-height:1.05}
.ping .meta{font-size:.82rem;color:var(--ink-soft);margin-top:3px}
.ping .meta .pk{font-weight:700;color:var(--ink)}
.now-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--good);margin-right:5px;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px;
  border:1.5px solid;white-space:nowrap}
.chip.now{color:var(--good);border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.chip.soon{color:var(--info);border-color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent)}
.empty{color:var(--ink-soft);font-style:italic;padding:8px 2px}

/* park cards */
.parks{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:26px 22px}
.park{position:relative;background:var(--note);border:2.5px solid var(--ink);border-radius:var(--radius-hd);
  padding:20px 18px 16px;box-shadow:var(--shadow);transition:transform .16s ease, box-shadow .16s ease;
  text-align:left;color:var(--ink);display:flex;flex-direction:column;gap:10px;width:100%}
.park:nth-child(3n){transform:rotate(-1.1deg)}
.park:nth-child(3n+1){transform:rotate(.8deg)}
.park:nth-child(3n+2){transform:rotate(-.4deg)}
.park:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow-lift);z-index:2}
.park .pin-dot{top:-12px}
.park .emoji{font-size:2rem;line-height:1}
.park h3{font-size:1.5rem;margin:0}
.park .loc{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:.86rem;font-weight:600}
.park .stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.stat{font-size:.76rem;font-weight:700;background:var(--paper);border:2px solid var(--ink);border-radius:12px;
  padding:4px 9px;display:inline-flex;gap:5px;align-items:center}
.badge-warn{background:var(--coral);color:#fff;border-color:#b7452a}
.park .foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px}
.avatars{display:flex}
.avatars .a{width:26px;height:26px;border-radius:50%;background:var(--note-lilac);border:2px solid var(--paper);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-left:-7px;box-shadow:0 1px 2px #0003;overflow:hidden}
.avatars .a:first-child{margin-left:0}
.avatars .a img{width:100%;height:100%;object-fit:cover;display:block}
.avatars .a.present{border-color:var(--good);box-shadow:0 0 0 2px var(--good), 0 1px 2px #0003}
.avatars{max-width:100%}
.avatars .a.more{width:auto;min-width:26px;padding:0 6px;border-radius:13px;background:var(--bg2);
  color:var(--ink-soft);font-size:.72rem;font-weight:700}
.avatars.big{flex-wrap:wrap}
.avatars.big .a{width:40px;height:40px;font-size:1rem;margin-left:-8px;margin-bottom:6px}
.avatars.big .a.more{width:auto;min-width:40px;padding:0 9px;border-radius:20px}
.avatars.big .a:first-child{margin-left:0}

.danger-zone{border:2px dashed color-mix(in srgb,var(--coral) 55%,var(--paper));
  background:color-mix(in srgb,var(--coral) 8%,var(--paper));border-radius:14px}
.danger-zone h4{color:var(--coral)}
.park .go{margin-left:auto;font-weight:800;color:var(--grass-deep);font-size:.86rem;display:inline-flex;align-items:center;gap:4px}
.find-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.find-bar input{flex:1;min-width:190px}
.park[role="button"]{cursor:pointer;font:inherit}
.add-park{display:grid;place-content:center;place-items:center;gap:8px;min-height:190px;text-align:center;
  background:transparent;border:3px dashed var(--line);border-radius:26px;color:var(--ink-soft);
  font-family:var(--display);font-size:1.3rem;transition:border-color .15s, color .15s, background .15s}
.add-park:hover{border-color:var(--grass);color:var(--grass-deep);background:color-mix(in srgb,var(--grass) 7%,transparent)}
.add-park .plus{font-size:2.4rem;line-height:1}

/* ---------- modal / sheet ---------- */
.backdrop{position:fixed;inset:0;z-index:60;background:rgba(30,22,15,.5);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto}
/* A sheet opened on top of another sheet (e.g. a warning/event detail over the
   park board) must stack above it — equal z-index would let the first one win. */
.backdrop.raised{z-index:82}
.sheet{width:100%;max-width:560px;background:var(--bg);border:3px solid var(--ink);border-radius:24px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);position:relative;animation:pop .22s ease}
.sheet.wide{max-width:720px}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{padding:20px 22px 14px;border-bottom:2px dashed var(--line);display:flex;align-items:flex-start;gap:12px}
.sheet-head .emoji{font-size:2.2rem;line-height:1}
.sheet-head h2{margin:0;font-size:1.7rem}
.sheet-head .loc{color:var(--ink-soft);font-weight:600;font-size:.88rem;display:flex;gap:6px;align-items:center}
.loc-link{color:var(--sky-deep);font-weight:700;text-decoration:none;border-bottom:2px dotted var(--sky-deep)}
.loc-link:hover{color:var(--grass-deep);border-bottom-color:var(--grass-deep)}
.loc-link span{font-size:.8em;opacity:.8}
.x{margin-left:auto;border:2px solid var(--ink);background:var(--paper);width:36px;height:36px;border-radius:50%;
  font-size:1.05rem;font-weight:800;line-height:1;box-shadow:0 2px 0 var(--ink);flex:none;color:var(--ink)}
.x:hover{transform:translateY(-1px)}
.sheet-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:20px}

.block h4{font-family:var(--display);font-size:1.2rem;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.block h4 .count{font-family:var(--body);font-size:.72rem;font-weight:800;background:var(--ink);color:var(--bg);border-radius:20px;padding:2px 8px}
.stack{display:flex;flex-direction:column;gap:9px}

.row{background:var(--paper);border:2px solid var(--ink);border-radius:13px;padding:11px 13px;display:flex;gap:10px;align-items:flex-start}
.row .body{flex:1;min-width:0}
.row .t{font-weight:700}
.row .s{font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.row.clickable{cursor:pointer;transition:transform .1s ease, box-shadow .1s ease}
.row.clickable:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(52,41,31,.14)}
.viewer-by{color:#e9e2d0;font-size:.82rem;text-align:center;margin:2px 0 6px;opacity:.85}
.row.warn{background:color-mix(in srgb,var(--coral) 12%,var(--paper));border-color:var(--coral)}
.row.info{background:color-mix(in srgb,var(--info) 10%,var(--paper))}
.poof-tag{font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.poof-tag.soon{color:var(--coral)}
.mini-x{border:none;background:transparent;color:var(--ink-faint);font-size:1rem;font-weight:800;line-height:1;padding:2px 4px;border-radius:6px}
.mini-x:hover{color:var(--coral)}

.group{border:2px solid var(--ink);border-radius:14px;padding:12px 13px;background:var(--note-lilac)}
.group.mine{background:var(--note-mint)}
.group .g-top{display:flex;align-items:center;gap:9px}
.group .g-name{font-family:var(--display);font-size:1.14rem;line-height:1}
.group .g-mem{font-size:.8rem;color:var(--ink-soft);margin-top:5px}
.group .g-by{font-size:.76rem;color:var(--ink-soft);margin-top:3px}
.group .g-act{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.joined-pill{font-size:.72rem;font-weight:800;color:var(--grass-deep);background:color-mix(in srgb,var(--grass) 18%,transparent);
  border:2px solid var(--grass);padding:3px 10px;border-radius:20px}

.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.polaroid{background:#fff;border:1px solid #0002;padding:7px 7px 0;border-radius:4px;box-shadow:var(--shadow);
  transform:rotate(-1.5deg);position:relative}
.polaroid:nth-child(even){transform:rotate(2deg)}
.polaroid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;background:#eee}
.polaroid .pcap{font-family:var(--display);color:#34291F;font-size:.82rem;text-align:center;padding:6px 2px 8px;line-height:1.2}
.polaroid .life{position:absolute;top:-9px;right:-9px;background:var(--coral);color:#fff;font-size:.64rem;font-weight:800;
  padding:3px 7px;border-radius:20px;border:2px solid #fff;box-shadow:0 2px 4px #0004;white-space:nowrap}
.polaroid .del{position:absolute;top:-9px;left:-9px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;
  background:var(--ink);color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 4px #0004}

/* ---------- forms ---------- */
form.grid{display:grid;gap:12px}
label.f{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.85rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);border-radius:11px;padding:10px 12px;width:100%}
textarea{resize:vertical;min-height:64px}
input[readonly]{background:var(--bg2);color:var(--ink-soft);cursor:default}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg > button{border:2px solid var(--ink);border-radius:20px;padding:7px 13px;font-weight:700;font-size:.85rem;
  background:var(--paper);color:var(--ink)}
.seg > button.on{background:var(--grass);color:#fff;border-color:var(--grass-deep)}
.emoji-sel{display:flex;align-items:center;gap:12px}
.emoji-sel-face{font-size:1.9rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:12px;background:var(--paper)}
.emoji-sel-face.empty{opacity:.35}
.emoji-panel{margin-top:8px;border:2px dashed var(--line);border-radius:12px;background:var(--bg2);overflow:hidden}
.emoji-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:8px;border-bottom:2px dashed var(--line);position:sticky;top:0}
.emoji-tabs button{font-size:1.1rem;width:36px;height:36px;border-radius:9px;border:2px solid transparent;background:var(--paper)}
.emoji-tabs button.on{border-color:var(--grass);background:var(--note-mint)}
.emoji-more-grid{display:grid;grid-template-columns:repeat(auto-fill,42px);gap:6px;padding:8px;max-height:220px;overflow-y:auto;justify-content:space-between}
.emoji-more-grid button{font-size:1.3rem;width:42px;height:42px;border-radius:11px;border:2px solid var(--line);background:var(--paper)}
.emoji-more-grid button.on{border-color:var(--grass);background:var(--note-mint);transform:scale(1.06)}

/* dog breed icons */
.dico{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.dogface .dico{width:100%;height:100%}
.dogface .dico svg{width:82%;height:82%;display:block}
.dico-in{width:1.4em;height:1.4em;vertical-align:-0.34em}
.dico-in svg{width:100%;height:100%;display:block}
.seg > button .dico-in{margin-right:2px}
/* photo avatars */
.dico-photo{border-radius:50%;overflow:hidden;background:var(--note-butter)}
.dico-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dogface .dico-photo{width:100%;height:100%}
.dico-in.dico-photo{width:1.5em;height:1.5em}

/* photo cropper */
.cropper{display:grid;gap:8px}
.cropwrap{width:220px;height:220px;margin:0 auto;border-radius:50%;overflow:hidden;position:relative;
  border:3px solid var(--ink);background:#181818;touch-action:none;cursor:grab;user-select:none}
.cropwrap.dragging{cursor:grabbing}
.cropwrap img{position:absolute;max-width:none;pointer-events:none;-webkit-user-drag:none}
.crop-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6), inset 0 0 0 3px rgba(0,0,0,.25)}
.crop-ctrls{display:flex;align-items:center;gap:10px;justify-content:center;max-width:280px;margin:0 auto;width:100%}
.crop-ctrls .btn.sm{padding:4px 12px;font-size:1rem}
.crop-ctrls input[type=range]{flex:1;accent-color:var(--grass)}

/* full-screen photo viewer (tap a photo to zoom & rotate) */
.viewer{position:fixed;inset:0;z-index:80;background:rgba(15,12,8,.93);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:14px;overscroll-behavior:contain}
.viewer-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:grab}
.viewer-stage img{max-width:96%;max-height:100%;user-select:none;-webkit-user-drag:none;
  border-radius:6px;box-shadow:0 12px 44px rgba(0,0,0,.55);transition:transform .06s linear}
.viewer-x{position:absolute;top:12px;right:14px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  background:rgba(0,0,0,.4);color:#fff;font-size:1.15rem;font-weight:800;z-index:2}
.viewer-cap{color:#fff;font-family:var(--display);font-size:1.1rem;text-align:center;margin:8px 0;max-width:90%}
.viewer-ctrls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-bottom:4px}
.polaroid img{cursor:zoom-in}

.breed-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;max-height:300px;overflow-y:auto;
  padding:8px;border:2px dashed var(--line);border-radius:14px;background:var(--paper)}
.breed-pick button{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid var(--line);
  background:var(--bg);border-radius:12px;padding:7px 3px;color:var(--ink)}
.breed-pick button:hover{border-color:var(--ink-faint)}
.breed-pick button .dico{width:42px;height:42px}
.breed-pick button .dico svg{width:100%;height:100%}
.breed-pick button .bn{font-size:.6rem;font-weight:700;line-height:1.06;text-align:center;color:var(--ink-soft)}
.breed-pick button.on{border-color:var(--grass);background:var(--note-mint);color:var(--ink)}
.breed-pick button.on .bn{color:var(--grass-deep)}
.form-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;flex-wrap:wrap}
.hint{font-size:.8rem;color:var(--ink-soft);font-weight:400}
.err{background:color-mix(in srgb,var(--coral) 15%,var(--paper));border:2px solid var(--coral);color:var(--ink);
  border-radius:11px;padding:9px 12px;font-size:.86rem;font-weight:600}

/* ---- superuser statistics ---------------------------------------- */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:6px}
.stat-card{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:12px 14px;
  box-shadow:0 2px 0 var(--ink)}
.stat-card .sc-k{font-size:.74rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.3px}
.stat-card .sc-v{font-family:var(--display);font-size:2rem;line-height:1.05;margin:2px 0}
.stat-card .sc-s{font-size:.76rem;color:var(--ink-soft)}
.chart-wrap{overflow-x:auto}
.stat-chart{width:100%;min-width:320px;height:auto;display:block}
.stat-chart .grid{stroke:color-mix(in srgb,var(--ink) 15%,transparent);stroke-width:1}
.stat-chart .axis{fill:var(--ink-soft);font-size:11px;font-family:ui-sans-serif,system-ui,sans-serif}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;font-size:.82rem}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
.chart-legend .lg b{color:var(--ink)}
.chart-legend .lg-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.bar-list{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-row .bar-label{flex:0 0 40%;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.help-q{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;padding:0;
  border:1.5px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink-soft);
  font-size:.7rem;font-weight:800;line-height:1;cursor:pointer;vertical-align:middle}
.help-q:hover{border-color:var(--grass);color:var(--grass-deep)}
.bar-row .bar-track{flex:1;height:16px;background:var(--bg2);border-radius:8px;overflow:hidden}
.bar-row .bar-fill{height:100%;background:var(--grass);border-radius:8px;min-width:3px}
.bar-row .bar-fill.sky{background:var(--sky)}
.bar-row .bar-num{flex:none;font-weight:700;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}

.park-info{white-space:pre-wrap;line-height:1.5;font-size:.95rem;color:var(--ink);
  background:var(--note-mint);border:2px solid var(--ink);border-radius:13px;padding:12px 14px}
.pinmap{width:100%;position:relative;z-index:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.pin-marker{font-size:26px;line-height:1;text-align:center;filter:drop-shadow(0 1px 1px #0006)}
.geo-found{background:color-mix(in srgb,var(--sky) 14%,var(--paper));border:2px solid var(--ink);border-radius:12px;padding:10px 12px}
.geo-found .t{font-family:var(--display);font-size:1.02rem}
.geo-found .s{margin-top:2px}
.geo-found a{color:var(--sky-deep);font-weight:700}

.invite-box{background:var(--note-butter);border:2.5px dashed var(--ink);border-radius:14px;padding:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;word-break:break-all;color:var(--ink)}
.qr-wrap{display:flex;flex-direction:column;align-items:center;margin:6px 0 12px}
.qr{width:236px;height:236px;image-rendering:pixelated;background:#fff;padding:12px;
  border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink)}

/* Ads — printable bulletin-board leaflets (two per US-Letter page) */
.leaflet-overlay{position:fixed;inset:0;z-index:95;background:rgba(15,12,8,.85);overflow:auto;
  display:flex;flex-direction:column;align-items:center;padding-bottom:40px}
.leaflet-bar{position:sticky;top:0;z-index:2;width:100%;display:flex;gap:12px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding:12px 16px;background:var(--paper);border-bottom:2px solid var(--ink)}
.leaflet-sheet{width:8.5in;min-height:11in;background:#fff;color:#1c1c1c;margin:20px 0;padding:.3in;
  display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.55);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.lf-cut{border-top:2px dashed #bbb;margin:.14in 0;position:relative}
.lf-cut::after{content:"\2702  cut";position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  background:#fff;padding:0 8px;color:#999;font-size:10px;letter-spacing:.5px}
.leaflet{flex:1;min-height:0;display:flex;flex-direction:column;border:2.5px solid #34291F;border-radius:16px;overflow:hidden;background:#fff;break-inside:avoid}
.lf-head{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 22px 6px}
.lf-mark{width:62px;height:62px;flex:none;display:grid;place-items:center;background:#F0B435;color:#34291F;
  border-radius:50% 46% 52% 48%/48% 52% 48% 52%;font-size:34px;border:2.5px solid #34291F22;
  box-shadow:0 3px 0 #34291F1a;transform:rotate(-6deg)}
.lf-brand{font-family:'Chalkboard SE','Comic Sans MS','Marker Felt','Segoe Print','Bradley Hand',cursive;
  font-size:2.3rem;line-height:1;color:#34291F;letter-spacing:.3px}
.lf-title{margin:10px 22px 2px;font-size:1.8rem;line-height:1.06;color:#1c1c1c;font-weight:800;text-wrap:balance;text-align:center}
.lf-tag{margin:0 22px 6px;font-size:1.02rem;color:#3a3a3a;text-align:center}
.lf-body{display:flex;gap:18px;align-items:center;padding:2px 24px;flex:1;min-height:0;overflow:hidden}
/* Size the phone mockup by HEIGHT (the source PNG is very tall, 1344x2992), so it
   always fits a half-letter leaflet instead of overflowing into the title/footer. */
.lf-phone{height:2.5in;flex:none;position:relative;background:#1c1c1c;border-radius:20px;padding:6px 6px 8px;
  box-shadow:0 8px 18px rgba(0,0,0,.30);transform:rotate(-3deg)}
.lf-phone img{height:100%;width:auto;display:block;border-radius:14px;background:#EDE7D0}
.lf-phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:34%;height:5px;background:#000;border-radius:4px;opacity:.55;z-index:2}
.lf-right{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px}
.lf-points{margin:0;padding:0;list-style:none;font-size:1.06rem;line-height:1.7;font-weight:700;flex:1}
.lf-qr{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.leaflet .qr{width:2.05in;height:2.05in;padding:8px;border:2px solid #1c1c1c;border-radius:14px;box-shadow:none;flex:none}
.lf-scan{font-family:'Chalkboard SE','Comic Sans MS','Marker Felt',cursive;font-weight:400;font-size:1.35rem;line-height:1.05;color:#347C3F;text-align:center}
.lf-foot{background:#F0B435;color:#34291F;text-align:center;font-weight:800;padding:11px;font-size:1.18rem;letter-spacing:.5px}

@media print{
  @page{size:letter;margin:0}
  body.printing-leaflet{background:#fff}
  /* The leaflet overlay is portalled to <body>; hide the rest of the app entirely
     (not just visibility:hidden — that keeps its height and prints blank pages). */
  body.printing-leaflet>*{display:none !important}
  body.printing-leaflet>.leaflet-overlay{display:block !important;position:static;background:none;padding:0;overflow:visible}
  body.printing-leaflet .leaflet-bar{display:none !important}
  body.printing-leaflet .leaflet-sheet{width:8.5in;height:11in;min-height:0;margin:0;box-shadow:none}
}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;font-weight:700;box-shadow:var(--shadow-lift);
  opacity:0;transition:opacity .25s, transform .25s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- auth ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:28px 16px}
.auth-card{width:100%;max-width:430px;background:var(--bg);border:3px solid var(--ink);border-radius:26px;
  box-shadow:var(--shadow-lift);padding:26px 24px;position:relative}
/* Match the Sheet modals' close button (bold ink border + drop shadow) so the
   sign-in / sign-up card's close matches the app's look and feel. */
.auth-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);
  background:var(--paper);color:var(--ink);font-size:1.05rem;font-weight:800;line-height:1;cursor:pointer;
  box-shadow:0 2px 0 var(--ink);z-index:2}
.auth-x:hover{transform:translateY(-1px)}
.guest-banner{background:var(--note-butter);border:2px solid var(--sun);border-radius:14px;padding:11px 15px;
  margin:14px 0 0;font-size:.92rem;font-weight:600;color:var(--ink)}
.guest-banner .link-btn{font-size:.92rem}
.auth-card::before{content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:120px;height:28px;background:var(--tape);border:1px solid #0002}
.auth-mark{width:66px;height:66px;margin:0 auto 8px;display:grid;place-items:center;background:var(--sun);color:#34291F;
  border-radius:50% 46% 52% 48%/48% 52% 48% 52%;font-size:36px;box-shadow:var(--shadow);border:2.5px solid #34291F22;
  transform:rotate(-6deg)}
.auth-card h1{text-align:center;font-size:2rem;margin:6px 0 2px}
.auth-card .sub{text-align:center;color:var(--ink-soft);margin:0 0 18px;font-size:.94rem}
.otp{display:flex;gap:8px;justify-content:center;margin:6px 0}
.otp-box{width:44px;height:54px;text-align:center;font-size:1.5rem;font-weight:800;
  border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.otp-box:focus{outline:none;border-color:var(--grass);box-shadow:0 0 0 3px color-mix(in srgb,var(--grass) 25%,transparent)}
.otp-box:disabled{opacity:.6}
@media (max-width:380px){.otp{gap:5px}.otp-box{width:38px;height:48px;font-size:1.3rem}}
.privacy-note{background:var(--note-mint);border:2px solid var(--grass-deep);border-radius:14px;padding:12px 14px;margin-top:4px}
.privacy-note .pn-title{font-weight:800;font-size:.9rem;margin-bottom:6px;color:var(--grass-deep)}
.privacy-note ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.5;color:var(--ink)}
.privacy-note li{margin:2px 0}
.auth-switch{text-align:center;margin-top:16px;font-size:.9rem;color:var(--ink-soft)}
.auth-switch button{background:none;border:none;color:var(--grass-deep);font-weight:800;text-decoration:underline;padding:0;font-size:.9rem}
.link-btn{background:none;border:none;color:var(--sky-deep);font-weight:700;text-decoration:underline;padding:0;font-size:.85rem}

/* ---------- admin table ---------- */
.tbl-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:14px}
table.users{border-collapse:collapse;width:100%;min-width:520px;background:var(--paper)}
table.users th,table.users td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.88rem}
table.users th{font-family:var(--display);font-weight:400;background:var(--note-butter)}
table.users th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.users th.sortable:hover{color:var(--grass-deep)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.role-pill{font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:20px;border:2px solid var(--ink);background:var(--paper)}
.role-pill.superuser{background:var(--sun)}
.role-pill.admin{background:var(--note-sky)}

footer{padding:38px 0 60px;text-align:center;color:var(--ink-soft)}
footer .paws{font-size:1.4rem;letter-spacing:8px;opacity:.5}
footer p{margin:8px 0 0;font-size:.86rem}

@media (max-width:760px){
  .wrap{padding-left:16px;padding-right:16px}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{min-height:220px;margin-top:8px}
  .two{grid-template-columns:1fr}
  .brand small{display:none}
}
@media (max-width:600px){
  /* Tighter header gaps + a smaller wordmark so the action buttons get more
     room to sit beside the logo before wrapping. */
  .top .wrap{gap:10px}
  .brand b{font-size:1.2rem}
  .find-bar input{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker .move{padding-left:0}
}