/* ====================================================================
   Tote Tracker — Trader Joe's tote availability map
   Palette inspired by TJ signage (crimson red + cream) and the
   reusable mini‑tote colors (red / yellow / green / blue).
   ==================================================================== */
:root{
  --tj-red:#C8102E;        /* signature red */
  --tj-red-dark:#9E0B23;
  --tj-red-deep:#7d0a1c;
  --cream:#FBF6EC;         /* signage cream */
  --cream-2:#F3EAD6;
  --ink:#2A2724;
  --ink-soft:#5d574e;
  --line:#e7ddca;
  --card:#ffffff;

  /* tote accent colors */
  --tote-red:#D2232A;
  --tote-yellow:#F2C20A;
  --tote-green:#3C8D43;
  --tote-blue:#1E73BE;

  /* semantic status — out_of_stock is plum (calmer than red; green↔purple is far more
     distinguishable than green↔red for the most common color blindness) */
  --s-in:#2E8B4F;
  --s-in-deep:#246b3d;
  --s-limited:#E2920E;
  --s-out:#7C5CBF;
  --s-out-deep:#5e459b;
  --s-unknown:#9a958c;

  --shadow:0 6px 24px rgba(40,25,10,.16);
  --shadow-sm:0 2px 8px rgba(40,25,10,.12);
  --r:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --header-h:60px;
  --search-h:56px;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
[hidden]{display:none !important}

/* ---------------- Header ---------------- */
.app-header{
  position:relative;z-index:1200;
  height:calc(var(--header-h) + var(--safe-t));
  padding:var(--safe-t) 12px 0;
  background:linear-gradient(180deg,var(--tj-red),var(--tj-red-dark));
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:34px;height:34px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.brand-text{min-width:0}
.brand-text h1{font-size:20px;font-weight:800;letter-spacing:.2px;line-height:1.05}
.brand-text p{font-size:11px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.chip-btn{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);
  padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
}
.chip-btn.verified{background:#fff;color:var(--tj-red);border-color:#fff}
.icon-btn{
  width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);font-size:18px;color:#fff;line-height:1;
}

/* ---------------- Search ---------------- */
.searchbar{
  position:relative;z-index:1150;
  background:var(--cream);border-bottom:1px solid var(--line);
  padding:9px 12px;display:flex;gap:8px;align-items:center;
}
.search-input-wrap{position:relative;flex:1;display:flex;align-items:center}
.search-ic{position:absolute;left:12px;font-size:14px;opacity:.78;pointer-events:none}
#searchInput{
  width:100%;height:42px;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:0 36px 0 34px;font-size:15px;color:var(--ink);
  box-shadow:var(--shadow-sm);
}
#searchInput:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.14)}
.search-clear{position:absolute;right:8px;width:26px;height:26px;border-radius:999px;background:var(--cream-2);font-size:13px;color:var(--ink-soft)}
.nearme-btn{
  height:42px;display:flex;align-items:center;gap:6px;padding:0 14px;border-radius:12px;
  background:var(--tj-red);color:#fff;font-weight:700;font-size:14px;box-shadow:var(--shadow-sm);
}
.nearme-btn:active{transform:scale(.97)}
.nearme-ic{font-size:15px}

/* ---------------- Map ---------------- */
#map{
  position:absolute;left:0;right:0;
  top:calc(var(--header-h) + var(--safe-t) + var(--search-h));
  bottom:0;background:#e9eef0;z-index:1;
}
.leaflet-control-attribution{font-size:10px !important;background:rgba(255,255,255,.8) !important}

/* Markers (divIcon) */
.pin{
  width:30px;height:30px;border-radius:50% 50% 50% 4px;
  transform:rotate(45deg);
  border:2.5px solid #fff;box-shadow:0 3px 7px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  background:var(--s-unknown);
}
.pin .pin-glyph{transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;color:#fff}
.pin .pin-glyph .mark{width:15px;height:15px;display:block}
.pin.s-in{background:var(--s-in)}
.pin.s-limited{background:var(--s-limited)}
.pin.s-out{background:var(--s-out)}
.pin.s-unknown{background:var(--s-unknown)}
/* pulsing green ring for CONFIRMED in-stock ("go now"). Compositor-only (transform+opacity)
   on a pseudo-element ring — never animated box-shadow. Disabled under reduced-motion below. */
.pin.s-in.pulse::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--s-in);
  opacity:.65;transform:scale(.85);animation:pinPulse 1.8s ease-out infinite;pointer-events:none;
}
@keyframes pinPulse{0%{opacity:.6;transform:scale(.82)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
.leaflet-div-icon{background:transparent;border:none}

/* cluster bubbles in TJ red */
.marker-cluster{background:rgba(200,16,46,.25)}
.marker-cluster div{background:var(--tj-red);color:#fff;font-weight:700}

/* ---------------- Legend & FAB ---------------- */
.legend{
  position:absolute;left:12px;bottom:calc(16px + var(--safe-b));z-index:600;
  background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:12px;
  padding:8px 10px;font-size:12px;box-shadow:var(--shadow-sm);
  display:grid;gap:4px;
}
.legend-row{display:flex;align-items:center;gap:7px;color:var(--ink-soft)}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.dot.s-in{background:var(--s-in)}
.dot.s-limited{background:var(--s-limited)}
.dot.s-out{background:var(--s-out)}
.dot.s-unknown{background:var(--s-unknown)}

.fab-list{
  position:absolute;right:12px;bottom:calc(16px + var(--safe-b));z-index:600;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  padding:11px 15px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow);
}
.fab-list:active{transform:scale(.96)}

.ctx-warn{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--header-h) + var(--safe-t) + var(--search-h) + 10px);z-index:650;
  background:#fff4d6;border:1px solid #e6c36b;color:#7a5b12;
  padding:8px 12px;border-radius:10px;font-size:12px;max-width:90vw;box-shadow:var(--shadow-sm);
}

/* ---------------- Demand-test pilot banner ---------------- */
.pilot-banner{
  position:absolute;left:8px;right:8px;
  top:calc(var(--header-h) + var(--safe-t) + var(--search-h) + 8px);z-index:640;
  background:linear-gradient(135deg,#1E73BE,#155a93);color:#fff;
  border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.35;font-weight:600;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;
}
.pilot-tx{flex:1}
.pilot-x{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.25);color:#fff;font-size:13px}

/* ---------------- Bottom sheet ---------------- */
.scrim{position:fixed;inset:0;background:rgba(20,12,4,.35);z-index:1300;backdrop-filter:blur(1px)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:1400;
  background:var(--cream);border-radius:22px 22px 0 0;
  box-shadow:0 -10px 40px rgba(30,15,5,.28);
  transform:translateY(105%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  max-height:88vh;display:flex;flex-direction:column;
  padding-bottom:var(--safe-b);
}
.sheet.open{transform:translateY(0)}
.sheet-grab{padding:10px 0 4px;display:flex;justify-content:center;touch-action:none;cursor:grab}
.sheet-grab span{width:42px;height:5px;border-radius:999px;background:#d8ccb3}
.sheet-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;color:var(--ink-soft);z-index:2}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px calc(20px + var(--safe-b))}

/* store detail */
.store-head{padding-right:36px}
.store-name{font-size:21px;font-weight:800;line-height:1.15}
.store-addr{color:var(--ink-soft);font-size:13.5px;margin-top:3px;line-height:1.35}
.store-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
.store-meta a{color:var(--tj-red);text-decoration:none;font-weight:600}
.store-dist{font-weight:700;color:var(--ink)}

.status-card{
  margin-top:14px;border-radius:16px;padding:14px;color:#fff;position:relative;overflow:hidden;
  background:var(--s-unknown);box-shadow:var(--shadow-sm);
}
.status-card.s-in{background:linear-gradient(135deg,var(--s-in),var(--s-in-deep))}
.status-card.s-limited{background:linear-gradient(135deg,#B36C00,#8f5500)}  /* darkened for WCAG white-text contrast */
.status-card.s-out{background:linear-gradient(135deg,var(--s-out),var(--s-out-deep))}
.status-card.s-unknown{background:linear-gradient(135deg,#6E6A62,#565249)}  /* darkened for WCAG */
.status-card.glow{animation:cardGlow 2.6s ease-in-out infinite}
@keyframes cardGlow{0%,100%{box-shadow:var(--shadow-sm)}50%{box-shadow:0 0 18px 2px rgba(46,139,79,.45),var(--shadow-sm)}}
.status-top{display:flex;align-items:center;gap:11px}
.status-mark{width:34px;height:34px;flex:0 0 auto;color:#fff;display:flex;align-items:center;justify-content:center}
.status-label{font-size:20px;font-weight:800}
.status-conf{font-size:12.5px;opacity:1;margin-top:1px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.status-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.status-act{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:700;font-size:12.5px;border-radius:999px;padding:7px 13px}
.status-act.on{background:#fff;color:var(--tj-red)}
.status-act:active{transform:scale(.97)}
.status-extra{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.status-pill{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}
.status-updated{margin-top:9px;font-size:12px;opacity:.92;display:flex;align-items:center;gap:5px}
.status-updated .ic{width:13px;height:13px}

/* report block */
.sec-title{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:20px 0 9px}
.report-q{font-size:15px;font-weight:700;margin-bottom:8px}
.status-choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.choice{
  border:2px solid var(--line);background:#fff;border-radius:13px;padding:11px 4px;text-align:center;
  font-weight:700;font-size:13px;color:var(--ink);transition:.12s;
}
.choice .c-emoji{display:block;font-size:21px;margin-bottom:3px}
.choice[aria-pressed="true"].c-in{border-color:var(--s-in);background:#eaf6ee;color:#1c6b38}
.choice[aria-pressed="true"].c-limited{border-color:var(--s-limited);background:#fdf2dd;color:#9c6406}
.choice[aria-pressed="true"].c-out{border-color:var(--s-out);background:#fce9ea;color:#a3192a}
.choice:active{transform:scale(.97)}

.report-extras{margin-top:12px;display:grid;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12px;font-weight:700;color:var(--ink-soft)}
.fld input[type=number],.fld input[type=text],.fld textarea,.crew-field{
  border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px 12px;font-size:15px;color:var(--ink);width:100%;
}
.fld textarea{resize:vertical;min-height:42px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}

.photo-row{display:flex;align-items:center;gap:10px}
.photo-btn{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--line);background:#fff;border-radius:12px;padding:11px 14px;font-weight:700;font-size:14px;color:var(--ink-soft)}
.photo-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.photo-clear{font-size:12px;color:var(--tj-red);font-weight:700}

.proximity-note{display:flex;align-items:center;gap:8px;font-size:12.5px;border-radius:10px;padding:9px 11px;margin-top:4px;background:#eef6f0;color:#1c6b38;border:1px solid #c9e6d3}
.proximity-note.remote{background:#fdf3df;color:#6f5200;border-color:#ecd49a}
.proximity-note.unknown{background:#f1eee7;color:var(--ink-soft);border-color:var(--line)}

.btn-primary{background:var(--tj-red);color:#fff;font-weight:800;font-size:16px;border-radius:13px;padding:14px;box-shadow:var(--shadow-sm)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.5}
.btn-primary.full{width:100%}
.submit-report{margin-top:16px;width:100%}
.btn-text{background:none;color:var(--tj-red);font-weight:700;font-size:14px;padding:10px;width:100%}
.btn-text.danger{color:#b32430}

/* reports feed */
.feed{display:grid;gap:10px;margin-top:6px}
.feed-empty{color:var(--ink-soft);font-size:13.5px;text-align:center;padding:14px;background:#fff;border-radius:12px;border:1px dashed var(--line)}
.report-item{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 12px;display:flex;gap:11px}
.report-item.sample{border-style:dashed}
.ri-photo{width:54px;height:54px;border-radius:10px;object-fit:cover;flex:0 0 auto;cursor:zoom-in;border:1px solid var(--line)}
.ri-main{flex:1;min-width:0}
.ri-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ri-status{font-weight:800;font-size:14px}
.ri-status.s-in{color:var(--s-in)}
.ri-status.s-limited{color:#8a5b00}  /* darker amber for AA text contrast */
.ri-status.s-out{color:var(--s-out)}
.ri-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:2px 7px}
.ri-tag.onsite{background:#eaf6ee;color:#1c6b38}
.ri-tag.remote{background:#f1eee7;color:#6f5200}
.ri-tag.official{background:var(--tj-red);color:#fff}
.ri-tag.sample{background:#eef0f2;color:#5f6772}
.ri-meta{font-size:12px;color:var(--ink-soft);margin-top:3px}
.ri-note{font-size:13.5px;margin-top:5px;line-height:1.4;color:var(--ink)}

/* nearby list */
.list-head{display:flex;align-items:baseline;justify-content:space-between;padding-right:36px}
.list-head h2{font-size:19px;font-weight:800}
.list-head .lh-sub{font-size:12.5px;color:var(--ink-soft)}
.store-list{display:grid;gap:9px;margin-top:12px}
.sl-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 12px;text-align:left;width:100%}
.sl-item:active{background:var(--cream-2)}
.sl-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sl-dot.s-in{background:var(--s-in)}.sl-dot.s-limited{background:var(--s-limited)}.sl-dot.s-out{background:var(--s-out)}.sl-dot.s-unknown{background:var(--s-unknown)}
.sl-main{flex:1;min-width:0}
.sl-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-sub{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-right{text-align:right;flex:0 0 auto}
.sl-dist{font-weight:800;font-size:13.5px}
.sl-when{font-size:11px;color:var(--ink-soft)}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(26px + var(--safe-b));
  transform:translateX(-50%) translateY(20px);
  z-index:2000;background:var(--ink);color:#fff;border-radius:14px;
  padding:13px 18px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow);
  max-width:90vw;text-align:center;opacity:0;transition:.3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.thanks{background:linear-gradient(135deg,var(--tj-red),var(--tj-red-dark))}

/* ---------------- Modals ---------------- */
.modal{position:fixed;inset:0;z-index:1800;background:rgba(20,12,4,.45);display:flex;align-items:flex-end;justify-content:center;padding:0;backdrop-filter:blur(2px)}
.modal-card{
  background:var(--cream);width:100%;max-width:460px;border-radius:22px 22px 0 0;
  padding:22px 20px calc(22px + var(--safe-b));box-shadow:var(--shadow);position:relative;
  max-height:92vh;overflow-y:auto;
  animation:slideUp .3s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.modal-card h2{font-size:21px;font-weight:800;padding-right:30px}
.modal-sub{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.45}
.fld-label{display:block;font-size:13px;font-weight:700;margin:16px 0 6px}
.fld-hint{font-size:12px;color:var(--ink-soft);margin-top:6px}
#crewEmail,#crewCode{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 14px;font-size:16px}
#crewEmail:focus,#crewCode:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.code-input{letter-spacing:.5em;text-align:center;font-size:22px !important;font-weight:800}
.demo-note{margin-top:12px;background:#fff4d6;border:1px solid #e6c36b;color:#7a5b12;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.4}
.demo-note b{font-size:18px;letter-spacing:.2em}
.crew-done{font-size:46px;text-align:center;margin:6px 0}
.crew-done-tx{text-align:center;font-size:14.5px;line-height:1.45}
.modal-card .btn-primary{margin-top:16px}
.modal-foot{font-size:11.5px;color:var(--ink-soft);margin-top:16px;line-height:1.4}
.muted{opacity:.9}
.info-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px;font-size:14px;line-height:1.4}
.info-actions{display:grid;gap:4px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}

/* ---------------- Lightbox ---------------- */
.lightbox{position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px}
.lightbox-x{position:absolute;top:calc(14px + var(--safe-t));right:16px;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;font-size:18px}

/* ad slot (off by default) */
.ad-slot{min-height:60px;background:var(--cream-2);border-top:1px solid var(--line)}

/* screen-reader-only (kept in DOM for SEO/a11y) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------- Welcome modal ---------------- */
.welcome-card{text-align:center}
/* one-shot choreographed reveal — the 4 totes slide in from the right and settle, then STOP
   (no perpetual loop). Static under reduced-motion. */
.welcome-totes{display:flex;justify-content:center;gap:6px;margin:2px 0 14px;min-height:64px}
/* totes slide in, settle, then gently jiggle (hanging from the handles). Static under reduced-motion. */
.welcome-tote{width:58px;height:62px;object-fit:contain;opacity:0;transform:translateX(26px) rotate(4deg);
  transform-origin:50% 12px;
  animation:toteReveal .65s cubic-bezier(.2,1.3,.4,1) both, toteJiggle 2.6s ease-in-out infinite}
.welcome-tote:nth-child(1){animation-delay:.05s,1.0s}
.welcome-tote:nth-child(2){animation-delay:.15s,1.18s}
.welcome-tote:nth-child(3){animation-delay:.25s,1.36s}
.welcome-tote:nth-child(4){animation-delay:.35s,1.54s}
@keyframes toteReveal{0%{opacity:0;transform:translateX(26px) rotate(4deg)}60%{opacity:1;transform:translateX(-3px) rotate(-1deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes toteJiggle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(-3.5deg)}75%{transform:translateY(-1px) rotate(3.5deg)}}
.welcome-card h2{padding:0;font-size:23px}
.welcome-lead{font-size:15.5px;line-height:1.5;margin-top:12px;color:var(--ink)}
.welcome-sub{font-size:13.5px;color:var(--ink-soft);margin-top:14px;font-weight:700;text-align:left}
.welcome-ways{list-style:none;padding:0;margin:8px 0 4px;display:grid;gap:8px;text-align:left;font-size:14px;line-height:1.4}
.welcome-card .btn-primary{margin-top:18px}
.link-inline{display:inline;color:var(--tj-red);font-weight:700;font-size:inherit;padding:0;text-decoration:underline}

/* ---------------- Store ref & disclaimer ---------------- */
.store-ref{font-size:13px;font-weight:600;color:var(--ink-soft)}
.disclaimer-line{font-size:12px;color:var(--ink-soft);font-style:italic;margin-top:10px;line-height:1.4;padding:0 2px}

/* ---------------- Report flow (two-channel) ---------------- */
.report-groups{display:grid;gap:11px}
.rgroup{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.rgroup-h{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:9px}
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rbtn{border:2px solid var(--line);background:#fff;border-radius:12px;padding:12px 8px;font-weight:700;font-size:13.5px;color:var(--ink);transition:.12s;text-align:center}
.rbtn:active{transform:scale(.97)}
.rbtn.on{border-color:var(--tj-red);background:#fdeaec;color:var(--tj-red-dark);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.rbtn.haul{grid-column:1 / -1;background:linear-gradient(135deg,#fff,#fdeaec);border-color:var(--tj-red);color:var(--tj-red-dark)}
.rbtn.haul.on{background:linear-gradient(135deg,var(--tj-red),var(--tj-red-dark));color:#fff;border-color:var(--tj-red)}
.report-detail{margin-top:13px;display:grid;gap:12px}
.report-detail:empty{margin:0}

.quick-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.qchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.qchip:active{background:var(--cream-2)}
.haul-hint{font-size:13px;color:var(--tj-red-deep);background:#fdeaec;border:1px solid #f3c9ce;border-radius:10px;padding:9px 11px;line-height:1.4}

.limit-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lim-toggle{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-weight:700;font-size:13.5px;color:var(--ink-soft)}
.limit-row:not(.off) .lim-toggle{color:var(--tj-red);border-color:var(--tj-red)}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:38px;height:40px;font-size:20px;font-weight:700;background:#fff;color:var(--ink)}
.stepper span{min-width:34px;text-align:center;font-weight:800}
.scope-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.scope-toggle button{padding:9px 11px;font-size:12.5px;font-weight:700;background:#fff;color:var(--ink-soft)}
.scope-toggle button.on{background:var(--tj-red);color:#fff}

.color-chips{display:flex;gap:8px;flex-wrap:wrap}
.cchip{display:flex;align-items:center;gap:7px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.cchip .cdot{width:14px;height:14px;border-radius:50%;background:var(--cc);border:1px solid rgba(0,0,0,.18)}
.cchip.on{border-color:var(--tj-red);background:#fdeaec}
.haul-share{margin-top:8px;background:var(--tj-red);color:#fff;font-weight:700;font-size:13px;border-radius:10px;padding:8px 12px}

/* ---------------- Floating action buttons ---------------- */
.fab-col{position:absolute;right:12px;bottom:calc(16px + var(--safe-b));z-index:600;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab-btn{background:#fff;color:var(--ink);border:1px solid var(--line);padding:11px 15px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px}
.fab-btn.primary{background:var(--tj-red);color:#fff;border-color:var(--tj-red)}
.fab-btn:active{transform:scale(.96)}

/* you-are-here marker */
.you-dot{width:18px;height:18px;border-radius:50%;background:#1E73BE;border:3px solid #fff;box-shadow:0 0 0 2px rgba(30,115,190,.4),0 2px 6px rgba(0,0,0,.3)}

/* ---------------- Feedback inputs ---------------- */
#fbMsg,#fbEmail{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;font-size:16px;color:var(--ink)}
#fbMsg{resize:vertical;min-height:92px;line-height:1.4}
#fbMsg:focus,#fbEmail:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}

/* ---------------- Welcome tote swatches (featured colors) ---------------- */
.welcome-featured{margin-top:12px;background:#fff7e6;border:1px solid #f1d9b0;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4}

/* ---------------- Celebration: raining totes + blessing ---------------- */
.celebrate{position:fixed;inset:0;z-index:2100;pointer-events:none;display:flex;align-items:center;justify-content:center}
.tote-rain{position:absolute;inset:0;overflow:hidden}
.tote-drop{position:absolute;top:-14vh;object-fit:contain;will-change:transform;animation-name:toteFall;animation-timing-function:linear;animation-fill-mode:forwards;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
@keyframes toteFall{to{transform:translateY(120vh) rotate(220deg)}}
.blessing{background:rgba(255,255,255,.97);border:2px solid var(--tj-red);border-radius:20px;padding:20px 24px;text-align:center;box-shadow:var(--shadow);max-width:82vw;opacity:0;transform:scale(.8)}
.blessing.pop{animation:blessingPop .5s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes blessingPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
.blessing-tote{width:56px;height:56px;object-fit:contain}
.blessing-tx{font-size:18px;font-weight:800;color:var(--tj-red);margin-top:6px;line-height:1.25}
.blessing-sub{font-size:13px;color:var(--ink-soft);margin-top:6px}

@media (prefers-reduced-motion:reduce){
  .tote-drop{display:none}
  .blessing.pop{animation:none;opacity:1;transform:none}
  .pin.s-in.pulse::before{animation:none;opacity:0}
  .status-card.glow{animation:none}
  .welcome-tote{animation:none;opacity:1;transform:none}
  .tree-opt,.tote-tile,.board-item,.rchip{transition:none}
}

/* ---------------- Legend extras, unconfirmed pin, a11y focus ---------------- */
.nonaffil{font-style:normal;font-weight:600;color:var(--ink-soft)}
.ri-tag.board{background:#efe9fb;color:#5e459b}
.pin.unconfirmed{opacity:.72}                       /* tentative: faded until a 2nd report confirms */
.dot.dot-unconf{background:#cdc6b6}

/* Keyboard focus ring — visible for keyboard users, not on mouse/touch */
:focus-visible{outline:3px solid #1E73BE;outline-offset:2px;border-radius:8px}
.leaflet-container :focus-visible{outline-offset:0}

/* ---------------- Desktop / wide ---------------- */
@media (min-width:780px){
  .sheet{
    left:auto;right:16px;bottom:16px;top:calc(var(--header-h) + var(--search-h) + 16px);
    width:480px;max-height:none;border-radius:20px;
    transform:translateX(130%);
  }
  .sheet.open{transform:translateX(0)}
  .scrim{background:transparent;backdrop-filter:none;pointer-events:none}
  .brand-text p{font-size:12px}
}
@media (min-width:780px) and (max-width:1100px){.legend{display:none}}

@media (prefers-reduced-motion:reduce){
  .sheet,.toast,.modal-card{transition:none;animation:none}
}

/* ====================================================================
   v2 components — inline icons, "Now Open", decision tree, store chat,
   pin hover tooltip. (Status meaning is shape + text, never color-only.)
   ==================================================================== */
.mark{width:18px;height:18px;display:block}
.ic{width:16px;height:16px;flex:0 0 auto}

/* inline-SVG sizing for the chrome that used to be emoji */
.icon-btn svg{width:20px;height:20px}
.search-ic svg{width:16px;height:16px;display:block}
.nearme-ic svg{width:16px;height:16px;display:block}
.search-clear,.sheet-close,.modal-x,.pilot-x,.lightbox-x{display:flex;align-items:center;justify-content:center}
.search-clear svg,.sheet-close svg,.modal-x svg,.pilot-x svg{width:16px;height:16px}
.lightbox-x svg{width:20px;height:20px}
.fab-tote{object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}

/* store-meta with inline icons */
.store-meta a,.store-dist{display:inline-flex;align-items:center;gap:5px}
.store-meta .ic{width:15px;height:15px}
.status-act{display:inline-flex;align-items:center;gap:6px}

/* "Now Open" chip — neutral by default; green reserved for stock status */
.hours-chip{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:12.5px;font-weight:700;
  border-radius:999px;padding:5px 11px;border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.hours-chip .ic{width:14px;height:14px}
.hours-chip.open{color:#1c6b38;background:#eef6f0;border-color:#cfe7d8}
.hours-chip.soon{color:#8a5b00;background:#fdf3df;border-color:#ecd49a}
.hours-chip.closed,.hours-chip.vary{color:#6a6760;background:#f3efe7;border-color:var(--line)}

/* feed status mark */
.ri-mark{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--cream-2);margin-top:1px}
.ri-mark .mark{width:16px;height:16px}
.ri-mark.s-in{color:var(--s-in)}.ri-mark.s-limited{color:#8a5b00}.ri-mark.s-out{color:var(--s-out)}.ri-mark.s-unknown{color:var(--ink-soft)}
.report-item{align-items:flex-start}
.ri-status.s-out{color:var(--s-out)}

/* ---- Decision-tree report flow ---- */
.report-tree{margin-top:2px}
.tree-q{font-size:16px;font-weight:700;margin-bottom:11px}
.tree-opts{display:grid;gap:9px}
.tree-opt{display:flex;align-items:center;gap:10px;border:2px solid var(--line);background:#fff;border-radius:13px;
  padding:14px;font-weight:700;font-size:15px;color:var(--ink);text-align:left;transition:.12s}
.tree-opt .mark{width:20px;height:20px}
.tree-opt.in{color:#1c6b38}.tree-opt.in .mark{color:var(--s-in)}
.tree-opt.out{color:var(--s-out-deep)}.tree-opt.out .mark{color:var(--s-out)}
.tree-opt:active{transform:scale(.985)}
@media (hover:hover){.tree-opt:hover{border-color:#cdc6b6}}

.tree-posted{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.tp-row{display:flex;align-items:center;gap:8px;font-size:15px}
.tp-row .mark{width:19px;height:19px;color:var(--s-in)}
.tree-posted .restock-chips .mark{color:inherit}
.tp-undo{margin-left:auto;color:var(--tj-red);font-weight:700;font-size:13px;text-decoration:underline}
.tree-q2{font-size:14px;font-weight:700;margin:14px 0 9px}
.tree-q2 .opt{color:var(--ink-soft);font-weight:600}
.restock-chips{display:flex;gap:8px;flex-wrap:wrap}
.rchip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-size:13.5px;font-weight:700;color:var(--ink)}
.rchip.on{border-color:var(--s-out);background:#efe9fb;color:var(--s-out-deep)}
.tree-done{margin-top:14px;width:100%}

.tote-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tote-tile{border:2px solid var(--line);background:#fff;border-radius:13px;padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.12s}
.tote-tile img{width:54px;height:54px;object-fit:contain}
.tote-tile span{font-size:11px;font-weight:700;color:var(--ink-soft);line-height:1.1;text-align:center}
.tote-tile.on{border-color:var(--s-in);background:#eef6f0}
.tote-tile.on span{color:#1c6b38}
.tote-tile:active{transform:scale(.96)}

.tree-far{background:#fdf3df;border:1px solid #ecd49a;border-radius:13px;padding:13px}
.tree-far-tx{font-size:14px;color:#6f5200;margin-bottom:10px}
.tree-far-acts{display:flex;flex-direction:column;gap:6px}
.btn-secondary{background:#fff;border:1.5px solid var(--tj-red);color:var(--tj-red);font-weight:800;font-size:15px;border-radius:12px;padding:12px}
.btn-secondary:active{transform:scale(.98)}

/* ---- Store chat (community board) ---- */
.board-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.4;margin:2px 0 10px}
.board-compose{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;display:grid;gap:10px}
.board-text{border:1px solid var(--line);border-radius:11px;background:var(--cream);padding:10px 12px;font-size:15px;color:var(--ink);width:100%;resize:vertical;min-height:44px;font-family:inherit}
.board-text:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.board-actions{display:flex;align-items:center;gap:10px}
.board-photo-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--line);border-radius:11px;padding:9px 13px;font-weight:700;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
.board-photo-btn .ic{width:17px;height:17px}
.board-send{margin-left:auto;padding:11px 22px;font-size:15px}
.board-preview{position:relative;width:84px}
.board-preview img{width:84px;height:84px;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
.board-photo-clear{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.board-photo-clear .ic{width:13px;height:13px}
.board-list{display:grid;gap:9px;margin-top:12px}
.board-loading,.board-empty{color:var(--ink-soft);font-size:13px;text-align:center;padding:12px;background:#fff;border-radius:12px;border:1px dashed var(--line)}
.board-item{display:flex;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 12px}
.board-thumb{width:60px;height:60px;flex:0 0 auto;border-radius:10px;object-fit:cover;border:1px solid var(--line);cursor:zoom-in;background:var(--cream-2)}
.board-main{flex:1;min-width:0}
.board-msg{font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.board-meta{font-size:11.5px;color:var(--ink-soft);margin-top:4px}

/* ---- Pin hover tooltip (desktop only — bound when hover+fine pointer) ---- */
.pin-tip.leaflet-tooltip{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:9px 12px;font-size:12.5px;color:var(--ink);width:max-content;min-width:130px;max-width:230px;white-space:normal;line-height:1.4}
.pin-tip.leaflet-tooltip-top::before{border-top-color:#fff}
.tip-name{font-weight:800;font-size:13.5px;margin-bottom:3px;white-space:normal}
.tip-row{color:var(--ink-soft)}
.tip-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tip-dot.s-in{background:var(--s-in)}.tip-dot.s-limited{background:var(--s-limited)}.tip-dot.s-out{background:var(--s-out)}.tip-dot.s-unknown{background:var(--s-unknown)}
.tip-sub{margin-top:3px;font-size:11.5px;color:var(--ink-soft)}

/* ====================================================================
   v2.1 — nickname, edit/delete, photo album, "Latest updates", landing CTA
   ==================================================================== */
.fab-btn svg{width:18px;height:18px;flex:0 0 auto}
.fab-btn:not(.primary){color:var(--ink)}

/* board: nickname row + per-message head/actions + inline edit */
.board-nick{display:flex;align-items:center;gap:8px}
.board-nick label{font-size:12px;font-weight:700;color:var(--ink-soft);flex:0 0 auto}
.board-nick-in{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--cream);padding:7px 10px;font-size:13.5px;color:var(--ink)}
.board-nick-in:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.bi-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.bi-nick{font-size:13px;font-weight:800;color:var(--ink)}
.bi-time{font-size:11px;color:var(--ink-soft)}
.bi-actions{display:flex;gap:16px;margin-top:7px}
.bi-actions button{font-size:12px;font-weight:700;color:var(--tj-red);padding:0}
.bi-actions button.danger{color:#b32430}
.board-edit-in{width:100%;border:1px solid var(--tj-red);border-radius:10px;background:#fff;padding:9px 11px;font-size:14px;color:var(--ink);resize:vertical;font-family:inherit;box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.bi-edit-acts{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:8px}
.bi-edit-acts .btn-text{width:auto;padding:8px 10px}
.bi-save{padding:8px 18px;font-size:14px}

/* board: photo album strip */
.board-album:empty{display:none}
.board-album{margin-top:12px}
.album-head{font-size:11.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-bottom:7px}
.album-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.album-thumb{width:74px;height:74px;flex:0 0 auto;border-radius:10px;object-fit:cover;border:1px solid var(--line);cursor:zoom-in;background:var(--cream-2)}

/* "Latest updates" cross-store list */
.lu-list{display:grid;gap:9px;margin-top:12px}
.lu-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 12px;text-align:left;width:100%}
.lu-item:active{background:var(--cream-2)}
.lu-thumb{width:46px;height:46px;flex:0 0 auto;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:var(--cream-2)}
.lu-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lu-dot.s-in{background:var(--s-in)}.lu-dot.s-limited{background:var(--s-limited)}.lu-dot.s-out{background:var(--s-out)}.lu-dot.s-unknown{background:var(--s-unknown)}
.lu-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lu-store{font-size:12px;font-weight:800;color:var(--tj-red-dark)}
.lu-msg{font-size:14px;color:var(--ink);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lu-when{font-size:11.5px;color:var(--ink-soft)}

/* landing: contribute callout + disclaimer */
.welcome-contribute{margin-top:12px;font-size:14px;line-height:1.45;background:#eef6f0;border:1px solid #cfe7d8;border-radius:12px;padding:10px 12px;color:#1c6b38;text-align:left}
.welcome-disclaimer{margin-top:14px;font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.welcome-disclaimer a{color:var(--tj-red);font-weight:700}

/* ====================================================================
   Store chat — its own (rounded) typeface + compact, bubbly look
   ==================================================================== */
:root{ --chat-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Segoe UI Rounded", system-ui, -apple-system, sans-serif; }
.board-hint{font-size:12px;color:var(--ink-soft);line-height:1.4;margin:2px 0 8px}
/* compose: compact, white rounded card distinct from the cream sheet */
.board-compose{font-family:var(--chat-font);background:#fff;border:1px solid var(--line);border-radius:18px;padding:9px 10px;gap:7px;box-shadow:var(--shadow-sm)}
.board-nick{gap:6px}
.board-nick label{font-size:11px}
.board-nick-in{padding:5px 9px;font-size:13px;border-radius:9px;font-family:var(--chat-font)}
.board-text{min-height:34px;padding:8px 11px;font-size:13.5px;border-radius:13px;font-family:var(--chat-font);background:#fff;line-height:1.35}
.board-actions{gap:8px}
.board-photo-btn{padding:7px 11px;font-size:12.5px;border-radius:10px}
.board-photo-btn .ic{width:15px;height:15px}
.board-send{padding:8px 20px;font-size:14px;border-radius:11px}
/* messages as little chat bubbles */
.board-list{gap:8px;margin-top:10px}
.board-item{font-family:var(--chat-font);background:#faf5ea;border:1px solid #ece2cd;border-radius:14px 14px 14px 5px;padding:9px 11px;gap:9px}
.board-thumb{width:52px;height:52px;border-radius:9px}
.bi-head{gap:7px}
.bi-nick{font-size:12.5px;color:var(--tj-red-dark)}
.bi-time{font-size:10.5px}
.board-msg{font-size:13.5px;line-height:1.4}
.bi-actions{gap:14px;margin-top:5px}
.bi-actions button{font-size:11.5px}
.board-empty{font-family:var(--chat-font);background:#faf5ea;border:1px dashed #e0d4ba;color:var(--ink-soft);font-size:13px;border-radius:14px;padding:16px 12px}
.album-thumb{border-radius:11px}

/* ====================================================================
   Bigger store header + compact status card + board status/bot posts
   ==================================================================== */
.store-name{font-size:24px;line-height:1.12}
/* status card — trimmed so the report tree shows without scrolling */
.status-card{margin-top:12px;padding:12px 13px}
.status-mark{width:28px;height:28px}
.status-mark .mark{width:24px;height:24px}
.status-extra{margin-top:8px}
.status-updated{margin-top:7px}
.status-actions{margin-top:10px;gap:7px}
.status-act{padding:6px 12px;font-size:12px}

/* board: "status update" posts mirrored from a tap report — distinct (non-rounded) font + status color */
.board-item.status{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#fff;border:1px solid var(--line);border-left:4px solid var(--s-unknown);border-radius:6px 14px 14px 6px}
.board-item.status.s-in{border-left-color:var(--s-in);background:#f0f8f3}
.board-item.status.s-out{border-left-color:var(--s-out);background:#f5f1fc}
.board-item.status.s-limited{border-left-color:var(--s-limited);background:#fdf6e8}
.bs-mark{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.bs-mark .mark{width:18px;height:18px}
.board-item.status.s-in .bs-mark{color:var(--s-in)}.board-item.status.s-out .bs-mark{color:var(--s-out)}.board-item.status.s-limited .bs-mark{color:#8a5b00}
.bi-nick.status{letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;font-weight:800}
.board-item.status.s-in .bi-nick.status,.board-item.status.s-in .board-msg.status{color:#1c6b38}
.board-item.status.s-out .bi-nick.status,.board-item.status.s-out .board-msg.status{color:var(--s-out-deep)}
.board-item.status.s-limited .bi-nick.status,.board-item.status.s-limited .board-msg.status{color:#8a5b00}
.board-msg.status{font-weight:700}

/* board: friendly "Tote Bot" welcome post (the inviting empty state) */
.board-item.bot{background:#eef5fb;border:1px solid #cfe0f0;border-radius:14px 14px 14px 5px;align-items:center}
.bot-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--tote-blue);color:#fff;display:flex;align-items:center;justify-content:center}
.bot-avatar .ic{width:18px;height:18px}
.board-item.bot .bi-nick{color:var(--tote-blue)}

/* decision-tree "Other" restock free-text */
.restock-other{margin-top:8px;width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;color:var(--ink);font-family:inherit}
.restock-other:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}

/* ====================================================================
   Round 4 — one-line "Share an update", chat-window thread, tidy status posts
   ==================================================================== */
/* Q1 as one sleek row of three cells */
.tree-opts{grid-template-columns:repeat(3,1fr);gap:8px}
.tree-opt{flex-direction:column;gap:5px;padding:12px 6px;text-align:center;justify-content:center;align-items:center}
.tree-opt .mark{width:22px;height:22px}
.tree-opt span{font-size:12.5px;font-weight:700;line-height:1.15}
.tree-opt.some{color:#1c6b38}.tree-opt.some .mark{color:var(--s-in)}

/* Store chat as a real chat window: bubbles inside a bigger box, input below */
.board-thread{display:grid;gap:8px;margin-top:10px;background:#fffdf8;border:1px solid var(--line);border-radius:16px;padding:11px;min-height:96px}
.board-compose{margin-top:10px}

/* Status posts: no background tint — differentiate by font color + a thin left rule + the mark only.
   Tagged to the poster's nickname; author can Delete. */
.board-item.status{background:#faf5ea;border:1px solid #ece2cd;border-left:3px solid var(--s-unknown);border-radius:14px 14px 14px 5px;font-family:var(--chat-font)}
.board-item.status.s-in{background:#faf5ea;border-left-color:var(--s-in)}
.board-item.status.s-out{background:#faf5ea;border-left-color:var(--s-out)}
.board-item.status.s-limited{background:#faf5ea;border-left-color:var(--s-limited)}
.board-msg.status{font-weight:700}

/* Edit / Delete: small, muted, right-tucked — not a bold full-width line */
.bi-actions{justify-content:flex-end;gap:14px;margin-top:4px}
.bi-actions button{font-size:11px;font-weight:600;color:var(--ink-soft)}
.bi-actions button:active{color:var(--tj-red)}
.bi-actions button.danger{color:var(--ink-soft)}
.bi-actions button.danger:active{color:#b32430}

/* ====================================================================
   Chatbox — scrollable thread, own-right / others-left bubbles, docked input
   ==================================================================== */
.chat-window{margin-top:10px;border:1px solid var(--line);border-radius:18px;background:#fffdf8;overflow:hidden;box-shadow:var(--shadow-sm)}
.chat-thread{max-height:48vh;min-height:130px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;display:flex;flex-direction:column;gap:10px;font-family:var(--chat-font)}
@media (min-width:780px){.chat-thread{max-height:340px}}
.chat-thread .board-loading{color:var(--ink-soft);font-size:12px;text-align:center;margin:auto;border:none;background:none;padding:0}

/* message rows */
.cmsg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.cmsg.me{flex-direction:row-reverse}
.avatar{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#c9a14a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.avatar.bot{background:var(--tote-blue)}.avatar.bot .ic{width:17px;height:17px}
.cbody{max-width:80%;display:flex;flex-direction:column;gap:2px;min-width:0}
.cmsg.me .cbody{align-items:flex-end}
.cb-edit{max-width:100%;width:100%}
.cname{font-size:11px;font-weight:800;color:var(--ink-soft);margin-left:5px}
.bubble{background:#fff;border:1px solid var(--line);border-radius:15px 15px 15px 5px;padding:8px 11px;font-size:13.5px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.cmsg.me .bubble{background:var(--tj-red);border-color:var(--tj-red);color:#fff;border-radius:15px 15px 5px 15px}
.cmsg.bot .bubble{background:#eef5fb;border-color:#cfe0f0}
.cmsg.bot .cname{color:var(--tote-blue)}
.bubble-text{white-space:pre-wrap}
.bubble-photo{display:block;max-width:190px;width:100%;border-radius:11px;margin-bottom:5px;cursor:zoom-in;background:var(--cream-2)}
.cmeta{font-size:10.5px;color:var(--ink-soft);margin:0 5px}
.cmsg.me .cmeta{text-align:right}
.cmeta button{font-size:10.5px;font-weight:700;color:var(--ink-soft);padding:0}
.cmeta button:active{color:var(--tj-red)}.cmeta button.danger:active{color:#b32430}

/* status updates as centered "system" chips */
.csys{align-self:center;max-width:94%;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:11.5px;color:var(--ink-soft);font-family:var(--chat-font);line-height:1.3}
.csys-mark{flex:0 0 auto;width:15px;height:15px}
.csys-mark .mark{width:15px;height:15px}
.csys.s-in .csys-mark,.csys.s-in b{color:#1c6b38}
.csys.s-out .csys-mark,.csys.s-out b{color:var(--s-out-deep)}
.csys.s-limited .csys-mark,.csys.s-limited b{color:#8a5b00}
.csys-del{font-size:10.5px;font-weight:700;color:var(--ink-soft);padding:0}
.csys-del:active{color:#b32430}

/* docked input bar */
.chat-input{border-top:1px solid var(--line);background:#fff;padding:8px 10px;display:grid;gap:7px}
.chat-input .board-nick{gap:6px}
.chat-input .board-nick label{font-size:11px;font-weight:700;color:var(--ink-soft)}
.chat-input .board-nick-in{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px;font-family:var(--chat-font)}
.chat-input-row{display:flex;align-items:flex-end;gap:8px}
.chat-photo-btn{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer}
.chat-photo-btn .ic{width:19px;height:19px}
.chat-input .board-text{flex:1;min-width:0;min-height:40px;max-height:120px;border:1px solid var(--line);border-radius:13px;padding:10px 13px;font-size:14px;font-family:var(--chat-font);background:var(--cream);resize:none;line-height:1.35}
.chat-input .board-text:focus{outline:none;border-color:var(--tj-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.chat-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--tj-red);color:#fff;display:flex;align-items:center;justify-content:center}
.chat-send:disabled{opacity:.5}
.chat-send .ic{width:20px;height:20px}
.chat-input .board-preview img{width:72px;height:72px}