/* plantora.info shop onboarding pages (/business, /business/apply, /my-shop) - 2026-10.
 * Loaded after account.css; only adds what those pages need. Same tokens as the rest of the site. */

.acct-card.wide{max-width:760px}
.acct-card + .acct-card,.apply .acct-card,.shop .acct-card{margin-top:18px}
.acct-card h3.mini{font-size:1.02rem;font-weight:800;margin:20px 0 8px}
.acct-card .two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:600px){.acct-card .two{grid-template-columns:1fr}}
.field textarea{
  width:100%;padding:10px 14px;border-radius:var(--r-sm);border:1.5px solid var(--hairline);background:var(--mint-050);
  color:var(--ink-900);font:inherit;font-size:1rem;resize:vertical;
}
.field textarea:focus{outline:none;border-color:var(--forest-400);background:#fff}
.static-value{min-height:46px;display:flex;align-items:center;padding:10px 14px;border-radius:var(--r-sm);border:1.5px solid var(--hairline);background:var(--mint-100);font-weight:700}

.need{margin:0 0 20px;padding-inline-start:20px;list-style:disc;color:var(--ink-600);line-height:1.7}
.who dd.reason{white-space:pre-wrap;text-align:start;max-width:60%}
.pill{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);font-size:.82rem;font-weight:800}
.pill--pending{background:#fff3d6;color:#7a5a00}
.pill--approved{background:var(--mint-100);color:var(--forest-700)}
.pill--rejected{background:var(--terracotta-100);color:#7a3a1f}

.legal-box{max-height:260px;overflow:auto;border:1.5px solid var(--hairline);border-radius:var(--r-sm);padding:14px 16px;background:var(--mint-050);font-size:.92rem;line-height:1.6;color:var(--ink-600);margin-bottom:14px}
.legal-box h3{font-size:1rem;margin:0 0 8px;color:var(--ink-900)}
.legal-box p{margin:0 0 10px}

.docs{display:grid;gap:12px;margin-bottom:6px}
.doc{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border:1.5px solid var(--hairline);border-radius:var(--r-sm);background:var(--mint-050)}
.doc-name{font-weight:700;color:var(--ink-900)}
.doc-state{grid-column:1;color:var(--ink-400);font-size:.86rem}
.doc-state.ok{color:var(--forest-500);font-weight:700}
.doc .doc-btn{grid-column:2;grid-row:1 / span 2;width:auto;min-height:42px;padding-inline:18px;display:inline-flex;align-items:center;cursor:pointer}
.acct-card .btn--inline,.shop .btn--inline{width:auto;min-height:42px;padding-inline:20px}
@media (max-width:520px){.doc{grid-template-columns:1fr}.doc .doc-btn{grid-column:1;grid-row:auto;justify-self:start}}

/* address picker + map */
.addr .actions-row.left{justify-content:flex-start;gap:10px;flex-wrap:wrap;margin:10px 0}
.mapbox{position:relative;border-radius:var(--r-md,14px);overflow:hidden;border:1.5px solid var(--hairline)}
.map{height:340px;width:100%;background:var(--mint-100);z-index:0}
/* The pin is fixed at the centre of the map; a square with one sharp corner, turned so the tip points down and lands
   exactly on the centre point (26px square: its tip is 18px below its middle, so the middle sits 31px above the centre). */
.map-pin{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-31px 0 0 -13px;z-index:500;pointer-events:none;
  background:var(--terracotta-500,#d97a56);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.map-pin::after{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;background:#fff;border-radius:50%}
.pin-state{margin-top:2px}
.pin-state.ok{color:var(--forest-500);font-weight:700}
.leaflet-container{font:inherit}

/* shop dashboard */
.shop-head{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tabs{display:flex;gap:6px;background:var(--mint-100);padding:4px;border-radius:var(--r-pill)}
.tab{border:0;background:none;font:inherit;font-weight:800;color:var(--forest-700);padding:8px 18px;border-radius:var(--r-pill);cursor:pointer}
.tab[aria-selected=true]{background:#fff;box-shadow:var(--shadow-card)}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.list-head h2{margin:0}
.plist{display:grid;gap:12px;margin-top:10px}
.pcard{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px;border:1.5px solid var(--hairline);border-radius:var(--r-sm)}
.pcard .pactions{grid-column:1 / -1;display:flex;gap:14px;flex-wrap:wrap}
.pthumb{width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--mint-100)}
.pthumb--empty{display:block}
.ptitle{font-weight:800;color:var(--ink-900)}
.psub{color:var(--ink-600);font-size:.9rem}
.badges{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.badge{display:inline-block;font-size:.75rem;font-weight:800;padding:2px 10px;border-radius:var(--r-pill);background:var(--mint-100);color:var(--forest-700)}
.badge--paused{background:#eee;color:#555}
.badge--low{background:var(--terracotta-100);color:#7a3a1f}
.linkbtn{background:none;border:0;padding:4px 0;font:inherit;font-weight:700;color:var(--forest-500);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn--danger{color:var(--terracotta-500,#c0553a)}
.linkbtn[disabled]{opacity:.5;cursor:not-allowed}

.photos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.photo{display:grid;gap:4px;justify-items:start;position:relative}
.photo .badge{position:absolute;top:4px;inset-inline-start:4px}
.vrow{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:0 10px;align-items:end;margin-bottom:6px}
@media (max-width:600px){.vrow{grid-template-columns:1fr 1fr}.vrow .field:first-child{grid-column:1 / -1}}
.details .other{margin-top:6px}
.images{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.images{grid-template-columns:1fr}}
.thumb{display:block;width:96px;height:96px;object-fit:cover;border-radius:12px;margin-bottom:8px;background:var(--mint-100)}
.thumb--wide{width:100%;max-width:260px;height:96px}
.actions-row{display:flex;gap:14px;align-items:center;margin-top:14px}
.acct-card .actions-row .btn{width:auto;padding-inline:26px}
.status.ok{background:var(--mint-100);color:var(--forest-700)}

/* validation messages that sit outside a .field (documents, pledge, terms, address) */
.acct-card .hint{font-size:.85rem;color:var(--ink-400);margin-top:5px}
.acct-card .hint.bad{color:var(--terracotta-500,#c0553a);font-weight:700}
.acct-card .hint.ok{color:var(--forest-500);font-weight:700}

/* the page-level status line follows the card width */
.acct .wrap > .status{max-width:760px;margin:0 auto 14px}