/* ReFood Brand Kit layer — loaded last. Source: ReFood Brand Kit (Inter, #16A34A / #166534 / #15803D, tint #F0FDF4) */
:root{
  --display:'Inter',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --primary:#16a34a; --deep:#166534; --mid:#15803d; --tint:#f0fdf4; --muted-bg:#f3f4f6; --border:#e5e7eb;
  --r:12px; --shadow:0 1px 2px rgba(2,8,23,.05),0 1px 3px rgba(2,8,23,.06);
  --bg:#fff; --c-direct:#16a34a;
}
body{background:#fff;font-size:16px;line-height:1.5;font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.2;color:var(--deep)}
h1{font-size:clamp(2.25rem,5vw,3rem);line-height:1.1;font-weight:700}
h2{font-size:clamp(1.65rem,3vw,1.875rem);line-height:1.2;font-weight:700}
h3{font-size:1.25rem;line-height:1.4;font-weight:600;letter-spacing:-.01em}
section{padding:72px 0}
.lead{font-size:1.125rem}
/* buttons: 6px radius, Inter 500 14px, flat */
.btn{border-radius:6px;font-weight:500;font-size:.875rem;padding:10px 18px;border:1px solid var(--border);box-shadow:none;transition:background .15s,border-color .15s,color .15s}
.btn:hover{transform:none;box-shadow:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--mid);border-color:var(--mid)}
.btn-ghost{background:#fff;color:var(--deep);border-color:var(--border)}
.btn-ghost:hover{background:var(--tint);border-color:var(--primary)}
.btn-sm{padding:7px 12px}
.btn-light{background:#fff;color:var(--deep);border-color:#fff}
.btn-danger{background:#fff;color:#b91c1c;border-color:#fecaca}
.btn-accent,.btn-mustard{background:var(--primary);color:#fff;border-color:var(--primary)}
/* surfaces */
.card,.panel,.kpi,.preview-card,.mc,.ev-card,.modal,.menu,.job,.metric,.req,.notif-card{border-radius:12px;box-shadow:var(--shadow);border-color:var(--border)}
.panel-head,.panel-body{border-color:var(--border)}
input,select,textarea{border-radius:6px;border:1px solid var(--border);font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(22,163,74,.35);outline-offset:1px;border-color:var(--primary)}
.eyebrow{color:var(--mid);letter-spacing:.08em;font-weight:600}
.eyebrow::before{background:var(--primary)}
.hl{background:none;color:var(--primary)}
.squig svg{display:none}
/* header / nav */
.site-header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--border)}
.logo{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--deep);gap:8px}
.logo svg{width:28px;height:28px;color:var(--primary)}
.nav-links a{font-weight:500;font-size:.875rem;border-radius:6px;color:var(--ink)}
.nav-links a:hover{color:var(--primary);background:transparent}
.nav-links a.active{background:transparent;color:var(--primary)}
/* sections: white / tint rhythm */
.tint,.alt{background:var(--tint)}
.band{background:var(--deep)}
.band .n,.band .stat .n{color:#86efac}
.hl-amber{color:var(--primary)}
.dark,.cta,.site-footer{background:var(--deep)}
.site-footer .logo{color:#fff}.site-footer .logo svg{color:#4ade80}
.dark .eyebrow,.dark .hl{color:#86efac}
/* icon tiles: 72px circle on tint, 2px primary stroke */
.ico,.icon-tile{width:72px;height:72px;border-radius:50%;background:var(--tint);color:var(--primary);display:grid;place-items:center}
.ico svg,.icon-tile svg{stroke:var(--primary);stroke-width:2}
/* chips / status */
.chip,.tag,.tag-x{border-radius:999px;border-width:1px}
.date-badge{background:var(--deep);border-radius:12px}
/* dashboard */
.app-body{background:#f9fafb}
.side{background:var(--deep)}
.nav-item{border-radius:6px;font-weight:500}
.nav-item.on{background:#fff;color:var(--deep)}
.role-tag{background:var(--primary);color:#fff;border-radius:999px}
.top{background:rgba(255,255,255,.92);border-bottom:1px solid var(--border)}
.avatar{background:var(--tint);color:var(--deep);border:1px solid var(--border);border-radius:999px}
.kpi.hl-k{background:var(--deep)}.kpi.hl-k .k-val{color:#fff}
.k-val{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:2rem}
.page-head h1{font-size:1.875rem;line-height:1.2}
.tbl thead th{background:#f9fafb;font-weight:600}
.tabs-u button.on,.tabs-u button[aria-selected=true]{color:var(--deep);border-bottom-color:var(--primary)}
.tabs-u{border-bottom:1px solid var(--border)}
.tgl .sw{border-radius:999px}
.toast{background:var(--deep);border-radius:8px}
/* decorative blobs: brand greens instead of amber */
.shape{background:#dcfce7;border-color:#bbf7d0}
.page-hero::after,.auth-art::before{background:#bbf7d0;border-color:transparent}
.cta::before,.cta::after{background:#15803d;border-color:transparent;opacity:.55}
.bar i{background:var(--primary)}
.btn-primary:hover{box-shadow:none}
input:focus,select:focus,textarea:focus{box-shadow:none}
.site-footer a:hover{color:#86efac}
.page-hero{background:var(--tint)}
.auth-art{background:var(--deep)}
.irow .no,summary::after,.quick svg{color:var(--primary)}
.tabs-u button.on{border-bottom-color:var(--primary)}
.notif.unread::before{background:var(--primary)}
.btn-danger{background:#fff;color:#b91c1c;border-color:#fecaca}
.side .logo{color:#fff}.side .logo svg{color:#4ade80}
.app-body{background:#f9fafb}.app-body .content{background:transparent}

/* ===== Review additions (Oct 2026): states, auth, gallery, PWA, permissions ===== */
[hidden]{display:none !important}
.alert{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:.9rem;line-height:1.45;margin-bottom:16px}
.alert.err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert.ok{background:var(--tint);border-color:#bbf7d0;color:var(--deep)}
.alert.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert.info{background:#f9fafb;color:#374151}
.state-pills{display:flex;flex-wrap:wrap;gap:8px}
.state-pills button{font:500 .8rem/1 var(--body);padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--deep);cursor:pointer}
.state-pills button:hover,.state-pills button.on{border-color:var(--primary);background:var(--tint)}
.linkish{border:0;background:none;padding:0;font:500 .85rem var(--body);color:var(--muted);text-decoration:underline;cursor:pointer}
.linkish:hover{color:#b91c1c}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:200px}
.gallery span{background:var(--c1,var(--tint));border-radius:10px;display:grid;place-items:center;overflow:hidden}
.gallery span:first-child{grid-row:1/3}
.gallery span svg{width:56px;height:56px}
.gallery span:first-child svg{width:96px;height:96px}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-4{grid-template-columns:1fr}}
.install-bar{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;margin:0 auto;z-index:90;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(2,8,23,.15);padding:12px 14px;transform:translateY(140%);transition:transform .3s}
.install-bar.show{transform:none}
.install-bar img{border-radius:10px;flex:none}
.install-bar div{flex:1;min-width:0}
.install-bar b{display:block;color:var(--deep);font-size:.92rem}
.install-bar small{color:var(--muted);font-size:.8rem}
.install-bar .x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:6px}
/* permissions matrix */
.perm td,.perm th{text-align:center;white-space:nowrap}
.perm td:first-child,.perm th:first-child{text-align:left;white-space:normal}
.perm .grp td{background:var(--tint);font-weight:700;color:var(--deep);text-align:left}
.pm{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 6px;border-radius:999px;font-size:.72rem;font-weight:700}
.pm.y{background:#dcfce7;color:var(--deep)}.pm.o{background:#fef3c7;color:#92400e}.pm.n{background:#f3f4f6;color:#9ca3af}
/* prototype screen index */
.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.screens a{display:block;border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:#fff;color:var(--ink);text-decoration:none}
.screens a:hover{border-color:var(--primary);background:var(--tint)}
.screens b{display:block;color:var(--deep)}.screens small{color:var(--muted);font-size:.82rem}
/* dashboard additions */
.photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.photo-strip span{aspect-ratio:4/3;border-radius:10px;background:var(--c1,var(--tint));display:grid;place-items:center}
.photo-strip span svg{width:48px;height:48px}
.limited-note{opacity:.55;pointer-events:none}
.s-restricted{color:#b45309}
.filters select{width:auto;flex:0 1 auto}
.filters .tgl{flex:none}
.app-body svg.i{width:15px;height:15px;flex:none;vertical-align:-2px}
.app-body .listing .meta span{display:inline-flex;align-items:center;gap:5px}

/* ===== v5 — client UI/UX review fixes (14 Oct 2026 report) ===== */
/* P0-3 contrast: primary actions use the darker brand green (#15803d on white ≈ 5.0:1) */
.btn-primary,.btn-accent,.btn-mustard{background:var(--mid);border-color:var(--mid);color:#fff}
.btn-primary:hover,.btn-accent:hover,.btn-mustard:hover,.btn-primary:active,.btn-accent:active{background:var(--deep);border-color:var(--deep);color:#fff}
.nav-links a.active{color:var(--mid);font-weight:600}
.nav-links a:hover{color:var(--mid)}
.hl{color:var(--mid)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--mid);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.btn-primary:focus-visible{box-shadow:0 0 0 2px #fff}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mid);outline-offset:1px}
/* P0-1 modal: hidden from the tab order when closed, background made inert while open */
.modal-back{visibility:hidden}
.modal-back.open{visibility:visible}
.modal-back[hidden]{display:none}
.modal:focus{outline:none}
.modal h2:focus{outline:none}
.modal .x{width:44px;height:44px;font-size:1.1rem;color:var(--deep)}
.modal-lead{background:var(--tint);border:1px solid #bbf7d0;border-radius:8px;padding:10px 12px;font-size:.92rem;color:var(--deep);margin:4px 0 8px}
.facts-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:14px 0 4px;font-size:.88rem}
.facts-list>div{display:grid;gap:2px}
.facts-list dt{font-weight:600;color:var(--deep);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.facts-list dd{color:var(--ink);margin:0}.facts-list dd small{color:var(--muted);display:block}
@media(max-width:480px){.facts-list{grid-template-columns:1fr}}
/* P0-2 mobile menu: collapsed menu is not focusable and not announced; Log in appears in the menu */
.nav-login{display:none}
@media(max-width:1080px){
  .nav-links{visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
  .nav-links.open{visibility:visible;transition:opacity .25s,transform .25s,visibility 0s}
  .nav-login{display:block;border-top:1px solid var(--border);margin-top:8px;padding-top:8px}
  .nav-login a{color:var(--mid);font-weight:600}
}
.burger:focus-visible{outline:3px solid var(--mid);outline-offset:2px}
/* P1-6 demo notice */
.demo-notice{background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e;font-size:.85rem;padding:8px 0}
.demo-notice .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between}
.demo-notice button{border:1px solid #fde68a;background:#fff;color:#92400e;border-radius:6px;padding:6px 10px;font:500 .8rem var(--body);cursor:pointer;min-height:36px}
.band-note{color:#bbf7d0;font-size:.82rem;margin-top:22px}
/* P1-3 / P1-4 listing cards: pickup window, partial quantities, honest transport tag, no-photo label */
.listing .thumb .nophoto,.gallery .nophoto{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-size:.7rem;font-weight:600;color:var(--muted);font-style:normal}
.gallery span{position:relative}
.listing .chips{display:flex;gap:6px;flex-wrap:wrap}
.chip.warn{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.chip.soft{background:#f9fafb;border-color:var(--border);color:var(--muted)}
.meta .ok{color:var(--mid);font-weight:600}
.kg .until{display:block;font-weight:500;font-size:.75rem;letter-spacing:0}
.listing .foot{align-items:flex-end}
/* P1-3 toolbar: area + search + Filters button by default; advanced filters in a panel */
.toolbar{grid-template-columns:1.4fr 1.6fr 1fr 1fr 1fr auto;align-items:end}
.toolbar .filters-panel{display:contents}
#filters-btn{display:none}
#filters-btn .n:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--mid);color:#fff;font-size:.72rem;margin-left:6px}
.toolbar .field label{white-space:nowrap}
.toolbar select{text-overflow:ellipsis}
@media(max-width:960px){
  .toolbar{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .toolbar .search{grid-column:1/-1}
  .toolbar .area{grid-column:1/-1}
  #filters-btn{display:inline-flex;grid-column:1/-1;justify-content:center;min-height:44px}
  .toolbar .filters-panel{display:none;grid-column:1/-1;grid-template-columns:1fr;gap:10px;border-top:1px solid var(--border);padding-top:12px}
  .toolbar .filters-panel.open{display:grid}
  .toolbar #clear{grid-column:1/-1}
}
.result-bar{margin:22px 0 16px}
/* P1-3 touch targets ≥ 44 px on small screens / touch devices */
@media(max-width:768px),(pointer:coarse){
  .btn,.btn-sm,.seg button,.state-pills button,select,input:not([type=checkbox]):not([type=radio]),.linkish{min-height:44px}
  .seg button{padding:7px 16px}
  .pw button{width:44px;height:44px;right:2px;place-items:center}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}
/* P1-2 / P1-3 mobile: compact page headers, smaller hero art, tighter section rhythm */
@media(max-width:768px){
  section{padding:48px 0}
  .page-hero{padding:28px 0 56px}
  .page-hero h1{font-size:1.9rem;margin-bottom:8px}
  .page-hero .lead{font-size:.98rem}
  .page-hero::after{width:220px;height:220px;right:-80px;top:-70px}
  .hero{padding:32px 0 40px}
  .hero-grid{gap:24px}
  .hero-art{max-width:240px;margin-inline:0}
  .hero .lead{margin-bottom:22px}
  .hero-ctas{margin-bottom:20px}
  .sec-head{margin-bottom:28px}
  .listing .thumb{height:118px}
  .toolbar{margin-top:-28px}
}
/* P1-2 home: food in your area */
.area-bar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:22px}
.area-bar .field{min-width:220px}
.area-bar p{font-size:.9rem;align-self:center}
.sec-head.row{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:16px}
.steps4.compact{gap:20px}
.steps4.compact .no{font-size:2.2rem}
.steps4.compact h3{font-size:1.05rem}
.steps4.compact p{font-size:.9rem}
.notes-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
@media(max-width:800px){.notes-2{grid-template-columns:1fr}}
.inspiration{display:flex;gap:16px;align-items:center;background:var(--tint);border:1px solid #bbf7d0;border-radius:12px;padding:18px 20px;margin-top:40px}
.inspiration p{flex:1;font-size:.92rem;color:var(--ink)}
@media(max-width:640px){.inspiration{flex-direction:column;align-items:flex-start}}
/* P1-5 / P2-2 task context strips on login, sign-up and share pages */
.task-context,.need-context{display:grid;gap:2px;background:var(--tint);border:1px solid #bbf7d0;border-left:4px solid var(--mid);border-radius:8px;padding:12px 14px;margin-bottom:22px;font-size:.9rem}
.task-context .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mid);font-weight:600}
.task-context b,.need-context b{color:var(--deep);font-size:1rem}
.task-context small,.need-context small{color:var(--muted);margin-top:4px}
/* P2-2 harvest event sign-up */
.ev-cta{display:grid;gap:6px;margin-top:8px;justify-items:start}
.ev-cta small{color:var(--muted);font-size:.8rem}
/* P2-3 sign-up expectations */
.role small{line-height:1.35}
.steps-mini{list-style:none;display:grid;gap:6px;font-size:.86rem;color:var(--ink);counter-reset:s}
.steps-mini li{display:flex;gap:10px;align-items:flex-start;counter-increment:s}
.steps-mini li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;background:var(--mid);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.field small.why{color:var(--muted);font-size:.78rem}
/* prototype tools are hidden on the public login page (shown via login.html?preview=1) */
[data-proto][hidden]{display:none!important}
/* P1-3 tighter first screen on phones: Filters + Clear share a row, smaller header, shorter thumbnails */
@media(max-width:960px){
  #filters-btn{grid-column:1/2}
  .toolbar #clear{grid-column:2/3;min-height:44px}
}
@media(max-width:768px){
  .page-hero{padding:16px 0 40px}
  .page-hero .eyebrow{display:none}
  .page-hero h1{font-size:1.75rem;margin-bottom:6px}
  .page-hero .lead{font-size:.95rem;line-height:1.4}
  .toolbar{padding:12px;gap:8px}
  .result-bar{margin:14px 0 10px}
  .listing .thumb{height:84px}.listing .thumb svg{width:50px;height:50px}
  .listing .body{padding:12px 14px 14px;gap:6px}
  .listings-grid{gap:16px}
}