/* LocalBuy — the one stylesheet. Brand tokens from brand/tokens.json (locked 2026-11-05).
   Rules: harvest-gold is for graphics only (never text or thin lines on white);
   border colour is for decorative hairlines only — input borders use ink-muted;
   danger is for errors and failed verification only, always with words.
   No inline styles (the Content-Security-Policy blocks them): add a class here instead. */

:root {
  --brand-green: #1E6B43;
  --brand-green-dark: #14492E;
  --field-dark: #14261B;
  --harvest-gold: #E3A21A;
  --ink: #17231C;
  --ink-muted: #4A5550;
  --surface: #FFFFFF;
  --surface-tint: #F3F6F4;
  --border: #D5DDD8;
  --on-brand: #FFFFFF;
  --danger: #B3261E;

  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --focus: 3px solid var(--brand-green-dark);
  --wrap: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; padding-top: var(--space-6); padding-bottom: var(--space-12); overflow-wrap: break-word; }
main:focus { outline: none; }
img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 var(--space-4); }
h1 { font-size: 28px; line-height: 34px; font-weight: 700; }
h2 { font-size: 20px; line-height: 26px; font-weight: 600; margin-top: var(--space-6); }
h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
.display { font-family: var(--font-display); font-size: 48px; line-height: 54px; font-weight: 700; letter-spacing: -0.02em; }
p, ul, ol, dl, table { margin: 0 0 var(--space-4); }
.lead { font-size: 18px; line-height: 28px; max-width: 70ch; }
.small, small { font-size: 14px; line-height: 20px; }
.muted { color: var(--ink-muted); }
.label {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-muted);
}
code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 0.92em; background: var(--surface-tint); padding: 1px 4px; border-radius: 4px; }
pre.debug { white-space: pre-wrap; background: var(--surface-tint); padding: var(--space-4); border-radius: var(--radius-sm); font-size: 13px; overflow: auto; }

a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-green-dark); }

/* Visible keyboard focus, never hidden */
:focus-visible { outline: var(--focus); outline-offset: 2px; }
.site-footer :focus-visible, .act-for-banner :focus-visible { outline-color: var(--harvest-gold); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }

/* ---------- Skip link, demo banner, act-for banner ---------- */
.skip-link {
  position: absolute; left: var(--space-2); top: -60px; z-index: 100;
  background: var(--field-dark); color: var(--on-brand); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: var(--space-2); color: var(--on-brand); }

.demo-banner {
  background: var(--field-dark); color: var(--on-brand);
  font-size: 14px; line-height: 20px; text-align: center; padding: 4px var(--space-4);
}
.act-for-banner { background: var(--field-dark); color: var(--on-brand); border-top: 4px solid var(--harvest-gold); }
.act-for-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.act-for-row p { margin: 0; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; min-height: 44px; }
.brand img { width: 40px; height: 40px; flex: none; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.03em; }
.wm-local { color: var(--ink); }
.wm-buy { color: var(--brand-green); }
.brand-dark .wm-local, .brand-dark .wm-buy { color: var(--on-brand); }

.header-search { display: flex; flex: 1 1 320px; gap: var(--space-2); max-width: 560px; }
.header-search input { flex: 1; min-width: 0; }
.header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-left: auto; }
.nav-link { font-weight: 600; text-decoration: none; padding: var(--space-2) 4px; min-height: 24px; }
.nav-link:hover { text-decoration: underline; }
.current-org { font-size: 14px; line-height: 20px; }
.org-switcher { display: flex; align-items: center; gap: var(--space-2); }
.org-switcher select { max-width: 240px; padding-top: 4px; padding-bottom: 4px; }

.account-menu { position: relative; }
.account-menu summary {
  cursor: pointer; font-weight: 600; padding: var(--space-2) 12px; border: 1px solid var(--ink-muted);
  border-radius: var(--radius-sm); list-style: none; min-height: 40px; display: flex; align-items: center; gap: var(--space-2);
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after { content: "▾"; font-size: 12px; }
.account-menu ul {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 240px;
  list-style: none; margin: 0; padding: var(--space-2) 0; background: var(--surface);
  border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(20, 38, 27, 0.12);
}
.account-menu li a, .account-menu .link-button { display: block; width: 100%; padding: var(--space-2) var(--space-4); text-align: left; }

/* ---------- Footer ---------- */
.site-footer { background: var(--field-dark); color: var(--on-brand); padding: var(--space-6) 0; margin-top: auto; }
.site-footer a { color: var(--on-brand); }
.site-footer a:hover { color: var(--harvest-gold); }
.footer-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.footer-links a { display: inline-block; padding: 4px 0; }
.footer-note { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 20px; color: #D7DED9; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4);
  font: 600 16px/24px var(--font-sans);
  color: var(--on-brand); background: var(--brand-green);
  border: 1px solid var(--brand-green); border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
}
.btn:hover, .btn:active { background: var(--brand-green-dark); border-color: var(--brand-green-dark); color: var(--on-brand); }
.btn-primary { /* same as .btn; kept for clarity in templates */ }
.btn-secondary { background: var(--surface); color: var(--brand-green); border-color: var(--brand-green); }
.btn-secondary:hover { background: var(--surface-tint); color: var(--brand-green-dark); }
.btn-light { background: var(--surface); color: var(--field-dark); border-color: var(--surface); }
.btn-light:hover { background: var(--surface-tint); color: var(--field-dark); border-color: var(--surface-tint); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #8C1D17; border-color: #8C1D17; }
.btn-small { min-height: 32px; padding: 4px 12px; font-size: 14px; line-height: 20px; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.link-button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--brand-green);
  text-decoration: underline; cursor: pointer; min-height: 24px;
}
.link-button:hover { color: var(--brand-green-dark); }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="url"], input[type="tel"], input[type="file"], select, textarea {
  font: 16px/24px var(--font-sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink-muted); border-radius: var(--radius-sm);
  padding: 7px 10px; min-height: 40px; width: 100%; max-width: 100%;
}
textarea { min-height: 120px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--danger); }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--brand-green); margin: 0; flex: none; }
.field { margin-bottom: var(--space-4); }
.field-check { display: flex; gap: var(--space-2); align-items: flex-start; }
.field-check label { font-weight: 400; margin: 0; }
.field-hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0 0 4px; }
.field-error { color: var(--danger); font-weight: 600; font-size: 14px; line-height: 20px; margin: 4px 0 0; }
.form-stack { max-width: 520px; }
.form-stack .btn { margin-right: var(--space-4); }
.input-row { display: flex; gap: var(--space-2); }
.input-row input { flex: 1; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-6); }
.filter-row .field { margin: 0; min-width: 180px; }

/* ---------- Alerts and flash messages ---------- */
.alert, .flash { border-radius: var(--radius-sm); padding: 12px var(--space-4); margin: 0 0 var(--space-4); border: 1px solid var(--ink-muted); border-left-width: 6px; background: var(--surface); }
.alert p:last-child { margin-bottom: 0; }
.alert-error, .flash-error { border-color: var(--danger); }
.alert-error strong, .flash-error strong { color: var(--danger); }
.alert-warning { border-color: var(--harvest-gold); background: #FFF9EC; }
.flash-success { border-color: var(--brand-green); }
.flash-info { border-color: var(--field-dark); }
.flashes { margin-bottom: var(--space-4); }

/* ---------- Cards, lists, tables ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6); }
.card > :last-child { margin-bottom: 0; }
.card-tint { background: var(--surface-tint); border-color: var(--surface-tint); }
.tile-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-4); }
.tile-list .card { margin: 0; }
.tile-list h2 { margin-top: 0; }
.inline-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.summary-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-6); }
.summary-list dt { font-weight: 600; }
.summary-list dd { margin: 0; }
.prose { max-width: 72ch; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--space-2) 12px; border-bottom: 1px solid var(--border); }
.table thead th { font-size: 13px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); border-bottom: 2px solid var(--ink-muted); white-space: nowrap; }
.table tbody tr:nth-child(even) { background: var(--surface-tint); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-compact th, .table-compact td { padding: 4px var(--space-2); font-size: 14px; line-height: 20px; }
.table-scroll { overflow-x: auto; }

/* ---------- Badges and pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 2px 10px 2px 4px; border-radius: var(--radius-full);
  font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.badge img { width: 20px; height: 20px; }
a.badge:hover { text-decoration: underline; }
.badge-verified { background: #E7F1EB; color: var(--brand-green-dark); border: 1px solid var(--brand-green); }
.badge-pending { background: var(--surface); color: var(--ink-muted); border: 1px dashed var(--ink-muted); padding-left: 10px; }
.badge-owned { background: var(--surface); color: var(--field-dark); border: 1px solid var(--field-dark); }
.owned-dot { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--harvest-gold); border: 3px solid var(--field-dark); }
.pill { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-tint); border: 1px solid var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pill-count { background: var(--brand-green); border-color: var(--brand-green); color: var(--on-brand); }

/* ---------- Page pieces ---------- */
.login-layout { display: grid; grid-template-columns: minmax(280px, 420px) minmax(280px, 1fr); gap: var(--space-6); align-items: start; }
.login-card .btn { width: 100%; }
.demo-accounts { background: var(--surface-tint); border-color: var(--surface-tint); }
.demo-accounts h2 { margin-top: 0; }
.hero { padding: var(--space-6) 0; max-width: 820px; }
.hero h1 { font-size: 48px; line-height: 54px; letter-spacing: -0.02em; }
.hero-search { max-width: 640px; }
.error-page { max-width: 720px; padding: var(--space-6) 0; }
.message-body { background: var(--surface-tint); padding: var(--space-4); border-radius: var(--radius-sm); max-width: 72ch; white-space: normal; overflow-wrap: anywhere; margin-bottom: var(--space-4); }

/* ---------- Catalogue (LB-2) ---------- */
.badge-row { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.badge-cert { background: var(--surface); color: var(--ink); border: 1px solid var(--ink-muted); padding-left: 10px; white-space: normal; }
.badge-preferred { background: var(--surface-tint); color: var(--brand-green-dark); border: 1px solid var(--brand-green-dark); padding-left: 8px; }
.tag-made { display: inline-block; font-size: 13px; line-height: 18px; font-weight: 600; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--field-dark); color: var(--field-dark); background: var(--surface); }
.search-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.filters { background: var(--surface-tint); border-radius: var(--radius-md); padding: var(--space-4); }
.filters .field { margin-bottom: 12px; }
.filters-title { margin-top: 0; }
.fieldset-plain { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.fieldset-plain legend { margin-bottom: 4px; padding: 0; }
.fieldset-plain .field-check { margin-bottom: 4px; }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.price-range label { font-weight: 400; font-size: 14px; }
.results-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.results-count { margin: 0; }
.sort-form { display: flex; align-items: center; gap: var(--space-2); }
.sort-form label { margin: 0; }
.sort-form select { width: auto; min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
.compare-hint { margin-bottom: var(--space-2); }
.results-table td:first-child { width: 32px; }
.results-table input[type="checkbox"] { margin-top: 4px; }
.item-name { font-weight: 600; }
.item-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.price-cell { white-space: nowrap; font-weight: 600; }
.row-preferred td { box-shadow: inset 0 0 0 0 transparent; }
.row-preferred td:first-child { border-left: 4px solid var(--brand-green); }
.pager ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pager a, .pager span { display: inline-block; min-width: 32px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); text-align: center; }
.pager span[aria-current] { background: var(--brand-green); border-color: var(--brand-green); color: var(--on-brand); font-weight: 600; }
.breadcrumbs { margin-bottom: var(--space-2); }
.product-layout, .store-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.price-big { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; margin-bottom: var(--space-2); }
.price-unit { font-family: var(--font-sans); font-size: 16px; font-weight: 400; color: var(--ink-muted); }
.qty-form { max-width: 360px; margin-bottom: var(--space-4); }
.cost-table { max-width: 420px; }
.cost-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.cost-table th { font-weight: 400; }
.total-row th, .total-row td { border-top: 2px solid var(--ink-muted); }
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.action-row form { margin: 0; }
.specs-table th { width: 40%; font-weight: 600; }
.doc-list { padding-left: 20px; }
.doc-list li { margin-bottom: 4px; }
.seller-box h2 { margin-top: 0; }
.seller-name { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; margin-bottom: 4px; }
.card-verified { border: 2px solid var(--brand-green); background: #F4FAF6; }
.proof-status h2 { display: flex; align-items: center; gap: var(--space-2); margin-top: 0; }
.proof-table th[scope="row"] { min-width: 200px; }
.result-pass { color: var(--brand-green-dark); }
.result-fail { color: var(--danger); }
.result-more_info { color: var(--ink); }
.tick { font-weight: 700; }
.tick-yes { color: var(--brand-green-dark); }
.tick-no { color: var(--ink-muted); }
.plain-list { list-style: none; padding: 0; }
.plain-list li { margin-bottom: 4px; }
.columns { columns: 2 280px; }
.store-head { margin-bottom: var(--space-4); }
.concern-link { margin-top: var(--space-4); }
.compare-table th[scope="row"] { white-space: nowrap; }
.compare-table thead th { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); white-space: normal; }

/* ---------- Buying (LB-3): carts, approvals, orders, invoices ---------- */
.cart-meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: center; }
.cart-group { margin-bottom: var(--space-4); }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.cart-table td, .po-lines td { vertical-align: middle; }
.qty-input { width: 6.5em !important; min-height: 32px; padding: 2px 6px; text-align: right; }
.price-input { width: 8em !important; min-height: 32px; padding: 2px 6px; text-align: right; }
.totals-table { max-width: 420px; margin-left: auto; }
.totals-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.totals-table th { font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--space-6); align-items: start; }
.field-wide { grid-column: 1 / -1; }
.form-inline { max-width: 560px; margin-bottom: var(--space-6); }
.inline-form { display: inline-flex; gap: var(--space-4); margin: 0; }
.decide-row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.decide-row form { margin: 0; }
details.card > summary { cursor: pointer; font-weight: 600; min-height: 24px; }
details.card[open] > summary { margin-bottom: var(--space-4); }
.pill.status-pending_approval, .pill.status-change_proposed, .pill.status-rejected { border-style: dashed; }
.pill.status-ordered, .pill.status-closed, .pill.status-delivered { background: #E7F1EB; border-color: var(--brand-green); }
.pill.status-cancelled { text-decoration: line-through; }
.timeline { list-style: none; padding: 0 0 0 var(--space-4); border-left: 3px solid var(--border); }
.timeline li { position: relative; padding: 0 0 12px var(--space-4); }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--brand-green); border: 2px solid var(--surface); }
.timeline li.timeline-mismatch::before, .timeline li.timeline-cancelled::before, .timeline li.timeline-dispute_opened::before { background: var(--danger); }
.timeline-when { display: inline-block; min-width: 170px; font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.thread { list-style: none; padding: 0; max-width: 80ch; }
.thread-msg { border-left: 4px solid var(--border); padding-left: var(--space-4); margin-bottom: var(--space-4); }
.thread-supplier { border-left-color: var(--field-dark); }
.thread-buyer, .thread-resident { border-left-color: var(--brand-green); }
.thread-platform { border-left-color: var(--ink-muted); border-left-style: double; border-left-width: 6px; }
.po-doc { max-width: 1000px; }
.po-doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); border-bottom: 2px solid var(--ink); margin-bottom: var(--space-4); }
.po-doc-brand { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }
.po-doc-title { text-align: right; }
.po-doc-title h1 { margin-bottom: 4px; }
.po-doc-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.po-doc-parties h2 { font-size: 13px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin: 0 0 4px; }
.po-lines tfoot th, .po-lines tfoot td { border-top: 2px solid var(--ink-muted); font-weight: 600; }

/* ---------- Supplier side (LB-5) ---------- */
.dash-sub { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-top: calc(-1 * var(--space-2)); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); align-items: start; }
.dash-grid .card { margin: 0; }
.dash-grid h2 { margin-top: 0; }
.dash-todo { grid-column: 1 / -1; }
.todo-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.todo-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); min-height: 24px; }
.todo-list li:last-child { border-bottom: 0; }
.todo-urgent a { font-weight: 600; }
.todo-flag { display: inline-block; background: var(--field-dark); color: #fff; border-radius: var(--radius-sm); padding: 2px 6px; margin-right: 4px; }
.card-danger { border-left: 6px solid var(--danger); }
.pill-draft { border-style: dashed; background: #FFF9EC; white-space: normal; }
.pill.status-draft { border-style: dashed; }
.pill.status-published { background: #E7F1EB; border-color: var(--brand-green); }
.pill.status-archived { color: var(--ink-muted); }
.photo-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-4); }
.photo-list img { display: block; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-tint); max-width: 100%; height: auto; }
.build-steps { padding-left: 1.5em; }
.build-steps li { margin-bottom: var(--space-2); }
.build-steps.is-building li { color: var(--ink-muted); }
.build-steps.is-building li.is-done { color: var(--ink); }
.build-steps.is-building li.is-done::marker { content: "✓  "; color: var(--brand-green); font-weight: 700; }
.row-error td { background: #FDF1F0; }
.error-list li { margin: 0; }
.spec-edit input[type="text"] { width: 100%; min-width: 90px; }
.steps-plain { padding-left: 1.5em; }
.steps-plain li { margin-bottom: 4px; }

/* ---------- Local-spend report (LB-7) ----------
   Charts are inline SVG drawn by SpendReport; their colours live here. Local = brand green, other spend = harvest gold
   (fills only, never text or thin lines); last year = dashed ink-muted line with square markers. Every chart has a
   legend and the same numbers in a table beside it, so colour is never the only signal. */
.report-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.report-head h1 { margin-bottom: 4px; }
.report-head .label { margin: 0 0 4px; }
.report-period { margin: 0; }
.report-head-actions { margin: 0; }
.period-form { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-end; background: var(--surface-tint); border-radius: var(--radius-md); padding: 12px var(--space-4); margin-bottom: var(--space-2); }
.period-form .field { margin: 0; min-width: 160px; }
.period-form select, .period-form input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.field-hint-inline { font-weight: 400; color: var(--ink-muted); font-size: 13px; }
.preset-links { font-size: 14px; gap: 4px var(--space-4); margin-bottom: var(--space-6); }
.preset-links a[aria-current] { font-weight: 700; text-decoration-thickness: 3px; }
.sample-note { border-color: var(--harvest-gold); background: #FFF9EC; }
.report-summary { margin-bottom: var(--space-4); }
.report-sentence { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; max-width: 62ch; margin: 0 0 4px; padding: 4px 0 4px var(--space-4); border-left: 6px solid var(--harvest-gold); }
.report-section { margin-bottom: var(--space-6); }
.report-section > h2 { border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin-bottom: 12px; }
.kpi-grid { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 2px; background: var(--surface-tint); border-radius: var(--radius-md); padding: 12px var(--space-4); border-left: 6px solid var(--border); }
.kpi-main { border-left-color: var(--brand-green); background: #EEF5F0; }
.kpi-label { font-size: 13px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.kpi-value { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-pct { color: var(--brand-green-dark); }
.kpi-prev { font-size: 14px; line-height: 20px; font-weight: 600; }
.kpi-change { font-weight: 400; color: var(--ink-muted); }
.kpi-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.kpi-small .kpi-value { font-size: 22px; line-height: 28px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px var(--space-6); align-items: center; font-size: 14px; line-height: 20px; margin-bottom: var(--space-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { flex: none; vertical-align: middle; }
.chart-with-table { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--space-6); align-items: start; }
.chart-figure { margin: 0; }
.chart-figure figcaption { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: 4px; }
.chart { display: block; overflow: visible; }
.chart-trend { width: 100%; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { fill: var(--ink-muted); font: 12px var(--font-sans); }
.chart-value { fill: var(--ink); font: 600 14px var(--font-sans); }
.chart-line { fill: none; stroke: var(--brand-green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line-prev { fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-dasharray: 6 4; }
.chart-dot { fill: var(--brand-green); stroke: var(--surface); stroke-width: 2; }
.chart-dot-prev { fill: var(--ink-muted); stroke: var(--surface); stroke-width: 1.5; }
.bar-local { fill: var(--brand-green); }
.bar-other { fill: var(--harvest-gold); stroke: var(--ink-muted); stroke-width: 1px; } /* LB-9: outline gives 3:1+ against white */
.bar-cell { width: 260px; vertical-align: middle !important; }
.bar-cell .chart-bar { width: 240px; max-width: 100%; height: 16px; }
.table-caption { caption-side: top; text-align: left; font-weight: 600; font-size: 14px; padding-bottom: 4px; }
.report-table th[scope="row"] { font-weight: 600; }
.report-table tfoot th, .report-table tfoot td { border-top: 2px solid var(--ink-muted); font-weight: 700; }
.sort-link { color: inherit; text-decoration: none; display: inline-block; min-height: 24px; }
.sort-link:hover { text-decoration: underline; color: var(--brand-green-dark); }
th[aria-sort] .sort-link { color: var(--ink); text-decoration: underline; }
.supplier-table .badge { font-size: 13px; min-height: 24px; }
.conc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.kpi-grid-2 { grid-template-columns: 1fr; }
.export-list { list-style: none; padding: 0; }
.export-list li { margin-bottom: var(--space-2); display: flex; flex-wrap: wrap; gap: 4px var(--space-4); align-items: center; }
.on-date { font-weight: 600; font-size: 14px; white-space: nowrap; }
.on-date-yes { color: var(--brand-green-dark); }
.on-date-no { color: var(--ink-muted); }
.report-method ul { max-width: 90ch; padding-left: 20px; }
.report-doc { max-width: 1100px; }
.report-doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); border-bottom: 2px solid var(--ink); margin-bottom: var(--space-4); }
.report-doc-title { text-align: right; }
.report-doc-title h1 { margin-bottom: 4px; }

/* ---------- Home, About, Help (LB-8) ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.stat-strip { list-style: none; padding: var(--space-4) 0; margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-strip strong { font-family: var(--font-display); font-size: 28px; line-height: 34px; color: var(--brand-green-dark); margin-right: 6px; }
.audience-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.audience-grid .card { margin: 0; display: flex; flex-direction: column; }
.audience-grid .card > p:last-child { margin-top: auto; }
.audience-grid h3 { font-size: 20px; line-height: 26px; }
.explainer-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: var(--space-6); align-items: start; }
.check-steps { padding-left: 24px; }
.check-steps li { margin-bottom: var(--space-2); }
.badge-examples { background: var(--surface-tint); border-radius: var(--radius-md); padding: var(--space-4); }
.badge-examples p.small { margin-top: -8px; color: var(--ink-muted); }
.link-list { padding-left: 20px; }
.link-list li { margin-bottom: 4px; min-height: 24px; }
.page-toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.page-toc a { display: inline-block; min-height: 24px; padding: 2px 0; }
.prose h2 { scroll-margin-top: var(--space-4); }
.empty-state { background: var(--surface-tint); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6); }
.empty-state > :last-child { margin-bottom: 0; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .explainer-grid { grid-template-columns: 1fr; }
  .stat-strip { gap: var(--space-2) var(--space-6); }
  .header-row { gap: var(--space-2) var(--space-4); }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .header-nav { margin-left: 0; }
  .login-layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; line-height: 40px; }
  .summary-list { grid-template-columns: 1fr; }
  .summary-list dd { margin-bottom: var(--space-2); }
  .table-scroll .table, .table { font-size: 14px; }
  .account-menu ul { right: auto; left: 0; }
  .search-layout, .product-layout, .store-layout { grid-template-columns: 1fr; }
  .results-table td:nth-child(6), .results-table th:nth-child(6) { display: none; }
  .chart-with-table, .conc-grid { grid-template-columns: 1fr; }
  .report-sentence { font-size: 18px; line-height: 26px; }
  .bar-cell { width: auto; }
  .report-doc-title { text-align: left; }
  /* LB-11: nothing wider than a 320 px phone */
  .display { font-size: 34px; line-height: 40px; }
  .proof-table th[scope="row"] { min-width: 0; }
  .wordmark { font-size: 24px; }
}

/* ---------- Print (purchase orders, reports save cleanly as PDF) ---------- */
@media print {
  .skip-link, .site-header, .site-footer, .act-for-banner, .flashes, .no-print, form.filter-row { display: none !important; }
  .demo-banner { background: none; color: #000; border-bottom: 1px solid #000; }
  body { font-size: 11pt; line-height: 1.4; }
  a { color: #000; text-decoration: none; }
  .card { border: 1px solid #999; break-inside: avoid; }
  .table tbody tr:nth-child(even) { background: none; }
  main { padding: 0; }
  /* purchase orders (LB-3) */
  .breadcrumbs { display: none !important; }
  .po-doc { max-width: none; }
  .po-doc-head { border-bottom: 2px solid #000; }
  .po-doc .wm-buy { color: #000; }
  .po-lines { font-size: 9.5pt; }
  .po-lines th, .po-lines td { padding: 3px 5px; border-bottom: 1px solid #999; }
  .table-scroll { overflow: visible; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  /* local-spend report (LB-7): keep chart colours, keep each chart with its table */
  .report-doc { max-width: none; }
  .report-doc-head { border-bottom: 2px solid #000; }
  .report-doc .wm-buy { color: #000; }
  .chart, .swatch, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .kpi { padding: 6px 8px; break-inside: avoid; }
  .kpi-value { font-size: 18pt; line-height: 1.2; }
  .report-sentence { font-size: 14pt; line-height: 1.35; }
  .chart-with-table { grid-template-columns: 3fr 2fr; gap: 12px; break-inside: avoid; }
  .report-section > h2 { break-after: avoid; font-size: 13pt; margin-top: 10pt; }
  .report-table { font-size: 9pt; }
  .report-table th, .report-table td { padding: 2px 5px; }
  .bar-cell { width: 170px; }
  .bar-cell .chart-bar { width: 160px; }
  .supplier-table .badge { border: 0; padding: 0; min-height: 0; background: none; color: #000; font-size: 9pt; }
  .supplier-table .badge img { width: 12px; height: 12px; }
  @page { margin: 15mm; }
}