/* =========================================================================
   PaidByAd Lawn Care — design system
   Audience 40+: large type, big tap targets, high contrast, button-first nav.
   ========================================================================= */
:root{
  --green-900:#1b5e20; --green-800:#256528; --green-700:#2e7d32; --green-600:#388e3c;
  --green-500:#43a047; --green-400:#66bb6a; --green-300:#a5d6a7; --green-50:#edf7ee;
  --earth:#6d4c41; --sky:#1565c0; --sun:#f9a825; --rose:#d84315;
  --ink:#1c2519; --ink-soft:#46524a; --muted:#6b7a6e;
  --line:#dfe7e0; --bg:#f4f7f3; --card:#ffffff; --card-2:#f8faf7;
  --radius:16px; --radius-sm:11px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(20,40,20,.06),0 1px 3px rgba(20,40,20,.08);
  --shadow:0 4px 14px rgba(20,50,20,.10);
  --shadow-lg:0 12px 34px rgba(20,50,20,.16);
  --tap:52px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--green-700);text-decoration:none}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;color:var(--ink);font-weight:800}
h1{font-size:1.9rem} h2{font-size:1.5rem} h3{font-size:1.2rem}
p{margin:0 0 1rem}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.9rem}
.center{text-align:center}
.hidden{display:none!important}
.show-mobile{display:none}

/* ---------- Buttons (primary navigation pattern) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--tap);padding:0 22px;border-radius:var(--radius-sm);
  font-size:1.05rem;font-weight:700;border:2px solid transparent;cursor:pointer;
  background:var(--green-700);color:#fff;transition:.15s ease;white-space:nowrap;
  text-decoration:none;line-height:1;
}
.btn:hover{background:var(--green-800);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn-lg{min-height:60px;font-size:1.18rem;padding:0 30px;border-radius:var(--radius)}
.btn-sm{min-height:40px;font-size:.95rem;padding:0 14px}
.btn-block{display:flex;width:100%}
.btn-ghost{background:#fff;color:var(--green-800);border-color:var(--line)}
.btn-ghost:hover{background:var(--green-50);border-color:var(--green-300)}
.btn-outline{background:transparent;color:var(--green-800);border-color:var(--green-600)}
.btn-outline:hover{background:var(--green-50)}
.btn-sky{background:var(--sky)} .btn-sky:hover{background:#0d47a1}
.btn-earth{background:var(--earth)} .btn-earth:hover{background:#5d4037}
.btn-danger{background:var(--rose)} .btn-danger:hover{background:#bf360c}
.btn-muted{background:#eceee9;color:var(--ink)} .btn-muted:hover{background:#e2e6df}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-icon{min-width:var(--tap);padding:0 14px}

.btn-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Top app bar ---------- */
.appbar{position:sticky;top:0;z-index:50;background:linear-gradient(120deg,var(--green-800),var(--green-600));
  color:#fff;box-shadow:var(--shadow)}
.appbar .container{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem;color:#fff}
.brand .logo{width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;font-size:1.4rem}
.appbar .grow{flex:1}
.searchbar{flex:1;max-width:440px;display:flex;align-items:center;background:rgba(255,255,255,.16);
  border-radius:999px;padding:0 8px 0 16px;height:48px}
.searchbar input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:1rem}
.searchbar input::placeholder{color:rgba(255,255,255,.8)}
.searchbar button{height:38px;width:38px;border:0;border-radius:50%;background:#fff;color:var(--green-800);cursor:pointer;font-size:1.1rem}
.appbar .nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:48px;min-width:48px;
  padding:0 16px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;border:0;cursor:pointer;position:relative}
.appbar .nav-btn:hover{background:rgba(255,255,255,.26)}
.appbar .nav-btn.solid{background:#fff;color:var(--green-800)}
.dot{position:absolute;top:6px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sun);
  color:#3a2c00;font-size:.72rem;font-weight:800;display:grid;place-items:center}

/* avatar */
.avatar{border-radius:50%;object-fit:cover;background:var(--green-300);flex:none}
.avatar.sm{width:38px;height:38px} .avatar.md{width:48px;height:48px}
.avatar.lg{width:84px;height:84px} .avatar.xl{width:120px;height:120px}

/* ---------- Layout grid ---------- */
.layout{display:grid;grid-template-columns:240px 1fr 300px;gap:22px;padding:22px 0}
.side-left,.side-right{position:sticky;top:88px;align-self:start}
.side-nav{display:flex;flex-direction:column;gap:8px}
.side-nav a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:12px;
  font-weight:700;color:var(--ink);background:var(--card)}
.side-nav a .ic{font-size:1.3rem;width:28px;text-align:center}
.side-nav a:hover{background:var(--green-50)}
.side-nav a.active{background:var(--green-700);color:#fff}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-pad{padding:18px}
.card+.card{margin-top:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.panel h3{display:flex;align-items:center;gap:8px}

/* ---------- Feed tabs ---------- */
.tabs{display:flex;gap:8px;background:var(--card);padding:8px;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{flex:1;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center;gap:.4em;
  border-radius:11px;font-weight:800;color:var(--ink-soft);white-space:nowrap;padding:0 14px}
.tabs a.active{background:var(--green-700);color:#fff}
.tabs a:hover:not(.active){background:var(--green-50)}

/* ---------- Composer (start a post) ---------- */
.composer{display:flex;gap:12px;align-items:center;padding:14px 16px;margin-bottom:16px}
.composer-input{flex:1;min-width:0;display:flex;align-items:center;min-height:52px;padding:0 18px;
  border:2px solid var(--line);border-radius:999px;background:var(--card-2);color:var(--muted);
  font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-input:hover{border-color:var(--green-300);background:var(--green-50);color:var(--ink-soft)}
.composer-post{flex:none}

/* ---------- Post card ---------- */
.post{overflow:hidden}
.post-head{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
.post-head .who{font-weight:800}
.post-head .meta{color:var(--muted);font-size:.9rem}
.chip{display:inline-flex;align-items:center;gap:.4em;height:34px;padding:0 14px;border-radius:999px;
  font-weight:800;font-size:.85rem;color:#fff;background:var(--green-600)}
.chip.ghost{background:var(--green-50);color:var(--green-800);border:1px solid var(--green-300)}
.chip.weather{background:#e8f1fb;color:var(--sky);border:1px solid #bcdcff}
.chip.solved{background:#e6f4ea;color:var(--green-800);border:1px solid var(--green-300)}
.post-body{padding:12px 18px}
.post-title{font-size:1.35rem;font-weight:800;margin:.2em 0 .3em}
.post-media{display:grid;gap:4px;background:#000}
.post-media.n1{grid-template-columns:1fr}
.post-media.n2{grid-template-columns:1fr 1fr}
.post-media.n3,.post-media.n4{grid-template-columns:1fr 1fr}
.post-media img{width:100%;height:100%;max-height:520px;object-fit:cover}
.post-media.n1 img{max-height:560px}
.badge-pill{display:inline-flex;align-items:center;gap:.35em;height:28px;padding:0 10px;border-radius:999px;
  font-size:.78rem;font-weight:800;background:var(--green-50);color:var(--green-800);border:1px solid var(--green-300)}

/* action bar */
.actions{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.act{display:inline-flex;align-items:center;gap:.45em;min-height:46px;padding:0 14px;border-radius:11px;border:0;
  background:var(--card-2);color:var(--ink);font-weight:700;font-size:1rem;cursor:pointer}
.act:hover{background:var(--green-50)}
.act.on{background:var(--green-700);color:#fff}
.act .ic{font-size:1.2rem}
.vote{display:inline-flex;align-items:center;background:var(--card-2);border-radius:11px;overflow:hidden}
.vote button{min-height:46px;min-width:46px;border:0;background:transparent;font-size:1.25rem;cursor:pointer;color:var(--ink-soft)}
.vote button:hover{background:var(--green-50)}
.vote .score{min-width:34px;text-align:center;font-weight:800}
.vote button.up.on{color:var(--green-600)} .vote button.down.on{color:var(--rose)}

/* stars */
.stars{display:inline-flex;gap:2px;font-size:1.3rem;color:#d8d8d8}
.stars .on{color:var(--sun)}
.rate button{background:none;border:0;font-size:1.5rem;cursor:pointer;color:#d8d8d8;line-height:1}
.rate button.on,.rate button:hover{color:var(--sun)}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px}
label{display:block;font-weight:700;margin-bottom:6px}
.input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],select,textarea{
  width:100%;min-height:var(--tap);padding:12px 14px;font-size:1.05rem;font-family:inherit;
  border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);outline:none}
textarea{min-height:120px;resize:vertical}
.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-50)}
.help{color:var(--muted);font-size:.88rem;margin-top:4px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
fieldset{border:2px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 18px}
legend{font-weight:800;padding:0 8px;color:var(--green-800)}

/* file dropzone */
.drop{border:2px dashed var(--green-300);border-radius:var(--radius);padding:22px;text-align:center;background:var(--green-50);cursor:pointer}
.drop:hover{background:#e4f3e6}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.thumbs img{width:84px;height:84px;border-radius:11px;object-fit:cover;border:2px solid var(--line)}

/* ---------- Owner bar (edit your post) ---------- */
.owner-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 18px 8px;padding:12px 16px;background:var(--green-50);border:2px solid var(--green-300);border-radius:14px}
.owner-bar-label{font-weight:800;color:#1b5e20}
.edit-photos{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.edit-photo{display:flex;flex-direction:column;gap:6px;border:2px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.edit-photo img{width:120px;height:120px;border-radius:9px;object-fit:cover}
.edit-photo .rm{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.edit-photo .rm input{width:22px;height:22px;min-height:auto}
.edit-photo:has(input:checked){border-color:var(--rose);background:#fdecea;opacity:.85}
.edit-photo:has(input:checked) img{filter:grayscale(.6)}

/* ---------- Flash ---------- */
.flash{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;margin:14px 0;font-weight:700}
.flash.success{background:#e6f4ea;color:#1b5e20;border:1px solid var(--green-300)}
.flash.error{background:#fdecea;color:#a52714;border:1px solid #f5c6cb}
.flash.info{background:#e8f1fb;color:#0d47a1;border:1px solid #bcdcff}

/* ---------- Comments ---------- */
.comment{padding:12px 0;border-top:1px solid var(--line)}
.comment .body{margin:6px 0}
.thread{margin-left:0}
.comment .replies{margin-left:20px;border-left:3px solid var(--green-50);padding-left:14px;margin-top:8px}
.comment .ctrl{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.collapse-btn{cursor:pointer;color:var(--muted);font-weight:800;background:none;border:0;font-size:.9rem}

/* ---------- Profile ---------- */
.profile-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.xp-bar{height:14px;border-radius:999px;background:var(--green-50);overflow:hidden;border:1px solid var(--green-300)}
.xp-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--green-500),var(--green-700))}
.stat{display:flex;flex-direction:column;align-items:center;min-width:84px}
.stat b{font-size:1.4rem}
.badge-big{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border-radius:14px;background:var(--green-50);border:1px solid var(--green-300);min-width:96px}
.badge-big .ic{font-size:2rem}

/* ---------- Bottom mobile nav ---------- */
.tabbar{display:none}

/* ---------- Footer ---------- */
.footer{background:var(--green-900);color:#cde9cf;margin-top:40px;padding:30px 0}
.footer a{color:#fff}
.footer .btn-row{margin-top:14px}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ic{font-size:3rem;display:block;margin-bottom:10px}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:440px}
.auth-hero{background:linear-gradient(135deg,var(--green-700),var(--green-500));color:#fff;border-radius:var(--radius-lg);padding:26px;text-align:center;margin-bottom:18px}

/* ---------- Tables (admin) ---------- */
.table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:var(--green-50);font-weight:800;color:var(--green-800)}
.table tr:hover td{background:var(--card-2)}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:800}
.tag.green{background:#e6f4ea;color:#1b5e20} .tag.red{background:#fdecea;color:#a52714}
.tag.amber{background:#fff4d6;color:#7a5b00} .tag.gray{background:#eceee9;color:#465}

/* admin shell */
.admin{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:22px 0}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi .card{padding:16px}
.kpi .n{font-size:2rem;font-weight:900;color:var(--green-800)}
.kpi .l{color:var(--muted);font-weight:700}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .layout{grid-template-columns:1fr 300px}
  .side-left{display:none}
}
@media (max-width:860px){
  body{font-size:17px;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .hide-mobile{display:none!important}
  .show-mobile{display:inline-flex!important}
  .container{padding:0 12px}
  .layout{grid-template-columns:1fr;padding:12px 0;gap:14px}
  .side-right{display:none}
  .admin{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}

  /* app bar tightened for phones */
  .appbar .container{height:60px;gap:8px}
  .appbar .searchbar{display:none}
  .appbar .nav-btn{height:46px;min-width:46px;padding:0 12px}

  /* composer becomes a clean bar with a round + button */
  .composer{padding:12px 14px;gap:10px}
  .composer-post-text{display:none}
  .composer-post{min-width:54px;padding:0;border-radius:50%;font-size:1.5rem}

  /* feed tabs scroll as snap pills instead of squishing */
  .tabs{gap:6px;padding:6px;margin-bottom:14px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:0 0 auto;scroll-snap-align:start;min-height:46px;padding:0 18px;font-size:1rem}

  /* bottom tab bar */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(0,0,0,.08);justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:60px;border-radius:12px;color:var(--ink-soft);font-size:.72rem;font-weight:800;position:relative}
  .tabbar a .ic{font-size:1.5rem}
  .tabbar a.active{color:var(--green-700)}
  .tabbar a.post-fab{background:var(--green-700);color:#fff;margin:-16px 6px 0;border-radius:50%;max-width:64px;min-height:64px;
    box-shadow:0 6px 16px rgba(46,125,50,.4)}
  .tabbar a.post-fab .ic{font-size:1.9rem}
}
/* subtle staggered entrance for feed cards (mobile only, motion-safe) */
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .feed>.post{animation:cardIn .42s ease both}
  .feed>.post:nth-child(2){animation-delay:.04s}
  .feed>.post:nth-child(3){animation-delay:.08s}
  .feed>.post:nth-child(4){animation-delay:.12s}
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:480px){
  .post-head{padding:14px 14px 0}
  .post-body{padding:10px 14px}
  .post-title{font-size:1.18rem}
  .actions{padding:10px 12px;gap:6px}
  .post-media img{max-height:360px}
  .kpi{grid-template-columns:1fr 1fr}
  h1{font-size:1.5rem}
}

/* mobile grid blowout fix (v8): let grid items shrink below content width */
html{overflow-x:hidden}
.layout{grid-template-columns:240px minmax(0,1fr) 300px}
.layout>*{min-width:0}
.feed{min-width:0}

/* ===== mobile polish (v9): balanced fit, clean composer, 4-up tab bar ===== */
@media (max-width:860px){
  .composer{gap:10px;padding:12px 14px}
  .composer .avatar.md{width:44px;height:44px}
  .composer-input{font-size:.95rem;padding:0 16px;min-height:48px}
  .composer-post{min-width:48px;height:48px;font-size:1.4rem}
  .tabs{gap:6px;padding:6px;overflow:visible}
  .tabs a{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:7px 4px;min-height:54px}
  .tabs a .t-ic{font-size:1.25rem;line-height:1}
  .tabs a .t-tx{font-size:.72rem;font-weight:800;white-space:nowrap;line-height:1}
  body{font-size:16px}
  .post-title{font-size:1.16rem;line-height:1.25}
  .post-body{font-size:.98rem}
}

/* ===== mobile polish (v9): balanced fit, clean composer, 4-up tab bar ===== */
@media (max-width:860px){
  .composer{gap:10px;padding:12px 14px}
  .composer .avatar.md{width:44px;height:44px}
  .composer-input{font-size:.95rem;padding:0 16px;min-height:48px}
  .composer-post{min-width:48px;height:48px;font-size:1.4rem}
  .tabs{gap:6px;padding:6px;overflow:visible}
  .tabs a{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:7px 4px;min-height:54px}
  .tabs a .t-ic{font-size:1.25rem;line-height:1}
  .tabs a .t-tx{font-size:.72rem;font-weight:800;white-space:nowrap;line-height:1}
  body{font-size:16px}
  .post-title{font-size:1.16rem;line-height:1.25}
  .post-body{font-size:.98rem}
}

/* mobile composer: drop redundant + (bottom FAB posts), give prompt full width */
@media (max-width:860px){
  .composer-post{display:none}
  .composer-input{font-size:1rem;justify-content:flex-start}
}

/* mobile composer: drop redundant + (bottom FAB posts), give prompt full width */
@media (max-width:860px){
  .composer-post{display:none}
  .composer-input{font-size:1rem;justify-content:flex-start}
}