/* BusyBee — base stylesheet (C0.6).
 * Vanilla CSS, mobile-first, one breakpoint at 640px.
 * Honey/amber accent over neutral text. No framework. */

:root {
  --color-bg: #fffbf3;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #d97706;        /* amber-600 — meets AA on white */
  --color-accent-hover: #b45309;  /* amber-700 */
  --color-accent-soft: #fef3c7;   /* amber-100 */
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 2px 8px rgba(17, 24, 39, 0.08);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --max-width: 64rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-4); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--space-4); }

/* Layout shell */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner,
.site-main,
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-header__brand {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  text-decoration: none;
}
.site-header__brand:hover { color: var(--color-accent-hover); }
.site-header__nav { display: flex; align-items: center; gap: var(--space-4); }
.site-header__nav .user-name { color: var(--color-muted); font-size: 0.95rem; }

.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Hero (landing) */
.hero {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-accent-soft), var(--color-bg));
}
.hero__title { font-size: 2.25rem; }
.hero__lede { font-size: 1.125rem; color: var(--color-muted); max-width: 36rem; }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* Cards (dashboard) */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.card__title { margin: 0 0 var(--space-2); font-size: 1.125rem; }
.card dl { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-4); row-gap: var(--space-2); margin: 0; }
.card dt { color: var(--color-muted); font-weight: 500; }
.card dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.card__form { margin-top: var(--space-4); }
.card__title .badge { font-size: 0.75rem; vertical-align: middle; margin-left: var(--space-2); }
.muted { color: var(--color-muted); }

/* Forms */
.auth-shell {
  max-width: 28rem;
  margin: var(--space-6) auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.form-field { display: block; margin-bottom: var(--space-4); }
.form-field label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.form-field input {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.form-field input:focus { border-color: var(--color-accent); }
.form-field .help { display: block; color: var(--color-muted); font-size: 0.875rem; margin-top: var(--space-1); }

/* Buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn:hover { background: #f9fafb; color: var(--color-text); }
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }

/* Flash / alerts */
.flash {
  padding: var(--space-3);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}
.flash-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

@media (min-width: 640px) {
  .hero__title { font-size: 2.75rem; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .site-header__inner, .site-main, .site-footer__inner { padding: var(--space-4) var(--space-6); }
}

/* App shell with side nav (C1.2) */
.app-shell { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.app-nav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2); }
.app-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.app-nav li { flex: 1 1 auto; }
.app-nav a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  text-decoration: none; color: var(--color-text); font-weight: 500; text-align: center;
}
.app-nav a:hover { background: var(--color-accent-soft); color: var(--color-text); }
.app-nav a.is-active {
  background: var(--color-accent-soft); color: var(--color-accent-hover);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.app-main { min-width: 0; }

/* Section header (catalog list/detail/form pages) */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4);
}
.section-header h1 { margin: 0; }
.header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.breadcrumb { margin: 0 0 var(--space-4); font-size: 0.875rem; }
.filter-row { margin: 0 0 var(--space-3); font-size: 0.875rem; }

/* List tables */
.list-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.list-table { width: 100%; border-collapse: collapse; }
.list-table th, .list-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.list-table tbody tr:last-child td { border-bottom: 0; }
.list-table th { background: #fafaf7; font-weight: 600; font-size: 0.875rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.list-table td.num, .list-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.list-table tr.is-archived td { color: var(--color-muted); }
.list-table tr.is-archived a { color: var(--color-muted); }

/* Empty state */
.empty-state {
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-4);
  text-align: center; color: var(--color-muted);
}
.empty-state p { margin: 0 0 var(--space-4); }

/* Forms (catalog) */
.form-shell { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); max-width: 36rem; }
.form-field select, .form-field textarea {
  width: 100%; font: inherit; color: inherit;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius); background: #fff;
}
.form-field textarea { min-height: 5rem; resize: vertical; }
.form-field select:focus, .form-field textarea:focus { border-color: var(--color-accent); }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--color-error-text); }
.form-field .field-error { display: block; color: var(--color-error-text); font-size: 0.875rem; margin-top: var(--space-1); }
.form-field .required { color: var(--color-error-text); }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.form-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.form-fieldset legend { padding: 0 var(--space-2); font-weight: 600; }
.form-fieldset__hint { margin: 0 0 var(--space-3); }

/* Definition list — catalog detail variant (override mono on plain values) */
.card dd.plain { font-family: inherit; word-break: normal; }

/* Badges */
.badge { display: inline-block; padding: 0.125rem var(--space-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-muted { background: #f3f4f6; color: var(--color-muted); }

/* Danger button (delete/archive) */
.btn-danger { background: #fff; border-color: var(--color-error-border); color: var(--color-error-text); }
.btn-danger:hover { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-text); }

@media (min-width: 640px) {
  .app-shell { grid-template-columns: 12rem 1fr; align-items: start; }
  .app-nav ul { flex-direction: column; }
  .app-nav li { flex: 0 0 auto; }
  .app-nav a { text-align: left; }
}

/* Status badges (C1.3) — honey-amber for live states, grey for terminal-not-ok. */
.badge-status-placed { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-status-fulfilled { background: #dcfce7; color: #166534; }
.badge-status-canceled { background: #f3f4f6; color: var(--color-muted); }
.badge-status-open { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-status-paid { background: #dcfce7; color: #166534; }
.badge-status-void { background: #f3f4f6; color: var(--color-muted); }
/* Pollination job lifecycle (C2.6). scheduled=blue (planned), in_progress=amber
   (running), fulfilled/canceled reuse the C1.3 green/grey above. */
.badge-status-scheduled { background: #dbeafe; color: #1e40af; }
.badge-status-in_progress { background: var(--color-accent-soft); color: var(--color-accent-hover); }

/* Money formatting */
.money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Order line-item rows — stacked on mobile, table-row on desktop. */
.line-items { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.line-item-row {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius); background: #fff;
}
.line-item-row .form-field { margin-bottom: 0; }
.line-item-row .row-actions { display: flex; justify-content: flex-end; }
.line-item-row .btn-remove {
  font: inherit; background: transparent; border: 0; color: var(--color-muted);
  cursor: pointer; padding: var(--space-1) var(--space-2); text-decoration: underline;
}
.line-item-row .btn-remove:hover { color: var(--color-error-text); }
.totals-card .total-row { display: flex; justify-content: space-between; padding: var(--space-1) 0; }
.totals-card .total-row.grand { font-weight: 700; border-top: 1px solid var(--color-border); padding-top: var(--space-2); margin-top: var(--space-2); }

@media (min-width: 640px) {
  .line-item-row {
    grid-template-columns: 2fr 3fr 1fr 1fr auto;
    align-items: end;
  }
}

/* Merchant status badges (C1.4). draft/submitted are amber (in-flight),
   approved is green (terminal-ok), rejected is red. */
.badge.merchant-status-draft { background: #f3f4f6; color: var(--color-muted); }
.badge.merchant-status-submitted { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.merchant-status-approved { background: #dcfce7; color: #166534; }
.badge.merchant-status-rejected { background: var(--color-error-bg); color: var(--color-error-text); }

/* Rainforest embedded-component wrapper (C1.4). The custom element
   sets its own internal layout; we just give it breathing room and
   stop it fighting the card padding when it grows tall. */
.rainforest-embed-card { padding: var(--space-3); }
.rainforest-embed { display: block; min-height: 16rem; }
.rainforest-embed rainforest-merchant-onboarding,
.rainforest-embed rainforest-payment,
.rainforest-embed rainforest-deposit-report,
.rainforest-embed rainforest-payment-report { display: block; width: 100%; }
/* Report components (C1.7) render their own table chrome; give them a
   touch more vertical room than the form components. */
.rainforest-embed rainforest-deposit-report,
.rainforest-embed rainforest-payment-report { min-height: 24rem; }
.section-header h1 .badge { font-size: 0.875rem; vertical-align: middle; margin-left: var(--space-2); }

/* Payment-status badges (C1.5 hotfix BB-D-0007). Mirrors invoice/order
   states: pending = honey-amber (in-flight), succeeded = green
   (terminal-ok), failed/refunded = grey (terminal-not-collected). The
   payin id cell uses tabular numerics so long ids wrap predictably on
   narrow viewports rather than blowing out the row height. */
.badge-payment-pending { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-payment-succeeded { background: #dcfce7; color: #166534; }
.badge-payment-failed { background: var(--color-error-bg); color: var(--color-error-text); }
.badge-payment-refunded { background: #f3f4f6; color: var(--color-muted); }
.list-table td.payin-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; word-break: break-all; }

/* BB-D-0011 — optimistically-paid rows (status=pending, captured_at
   null) get a left border in the same amber as the pending badge so
   the operator can distinguish "user finished paying, webhook hasn't
   landed yet" from a fully-canonical capture without scanning columns. */
.list-table tr.is-awaiting-webhook td { background: #fffaf0; }
.list-table tr.is-awaiting-webhook td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }

/* Checkout page (C1.5). The Pay button gets a touch more presence than
   the standard primary; it's the main call-to-action on a placed
   order. Embedded payment card matches the onboarding card spacing. */
.btn-pay { padding: var(--space-3) var(--space-6); font-size: 1.0625rem; }
.checkout-lines {
  list-style: none; padding: 0; margin: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border);
}
.checkout-lines li {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.checkout-lines__qty { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.checkout-lines__amount { white-space: nowrap; }
.rainforest-embed rainforest-payment { display: block; width: 100%; min-height: 18rem; }

/* Weather card (C2.3). Mobile-first: periods stack in a column. At
   the 640px breakpoint they reflow into a 3-up grid so 6 periods fit
   on two rows on a desktop apiary detail page. The retry button is
   styled as a link (no chrome) so it inherits the flash colors. */
.weather-card .weather-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
.weather-period {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-3); background: var(--color-bg);
}
.weather-period__name { font-weight: 600; margin-bottom: var(--space-1); }
.weather-temp {
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  color: var(--color-accent-hover); font-variant-numeric: tabular-nums;
}
.weather-temp__unit { font-size: 1rem; font-weight: 500; margin-left: 0.125rem; }
.weather-period__short { margin-top: var(--space-2); }
.weather-period__wind { font-size: 0.875rem; margin-top: var(--space-1); }
.weather-footer { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; }
.btn-link {
  font: inherit; background: transparent; border: 0; padding: 0;
  color: inherit; text-decoration: underline; cursor: pointer;
}
@media (min-width: 640px) {
  .weather-card .weather-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Hives (C2.4). Card grid + queen-status badges (queenright=green,
   queenless/swarming=warning, requeening=honey-amber, unknown=grey)
   + print-label sheet (4-col on paper, 2-col on small screens). */
.hives-section__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.hive-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3); }
.hive-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hive-card__link { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); text-decoration: none; color: var(--color-text); }
.hive-card__link:hover { background: var(--color-accent-soft); }
.hive-card__qr { flex: 0 0 auto; width: 80px; height: 80px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.hive-card__label { font-weight: 600; margin-bottom: var(--space-1); word-break: break-word; }
.hive-qr-card { text-align: center; }
.hive-qr { background: #fff; display: inline-block; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); }
.badge.queen-status-queenright { background: #dcfce7; color: #166534; }
.badge.queen-status-queenless, .badge.queen-status-swarming { background: var(--color-error-bg); color: var(--color-error-text); }
.badge.queen-status-requeening { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.queen-status-unknown { background: #f3f4f6; color: var(--color-muted); }
.label-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.label-card { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: var(--space-3); text-align: center; background: #fff; break-inside: avoid; page-break-inside: avoid; }
.label-card__qr { display: block; margin: 0 auto var(--space-2); width: 100%; max-width: 180px; height: auto; }
.label-card__caption { font-weight: 600; word-break: break-word; }
.label-card__sub { font-weight: 400; font-size: 0.875rem; color: var(--color-muted); margin-top: var(--space-1); }
/* U9: SKU input + Generate button, sit on one row, button shrinks-to-fit. */
.input-with-button { display: flex; gap: var(--space-2); align-items: stretch; }
.input-with-button input { flex: 1 1 auto; min-width: 0; }
.input-with-button .btn { flex: 0 0 auto; }
@media (min-width: 640px) { .label-sheet { grid-template-columns: repeat(4, 1fr); } }
@media print {
  @page { margin: 0.5in; }
  body { background: #fff; }
  .no-print, .site-header, .site-footer, .app-nav { display: none !important; }
  .app-shell { display: block; }
  .label-sheet { grid-template-columns: repeat(4, 1fr); gap: 0.25in; }
}
/* C2.5 — money pair input (employees hourly rate) and free-text dd renderings. */
.money-pair { display: flex; align-items: stretch; gap: var(--space-2); }
.money-pair input { flex: 1 1 auto; min-width: 0; }
.money-pair select { flex: 0 0 auto; }
.money-prefix { display: inline-flex; align-items: center; padding: 0 var(--space-2); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius); background: #fafaf7; font-variant-numeric: tabular-nums; }
.card dd.notes, .card dd.address { white-space: pre-wrap; }

/* Onboarding checklist (U1). Auto-hides at the section level when all
   six steps complete; the `done` modifier is for when the section is
   still rendered but a row is finished. */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist-item { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; }
.checklist-item.done .checklist-label { color: var(--color-muted); }
.checklist-icon { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; flex: 0 0 1.25rem; text-align: center; }
.checklist-icon.done { color: #166534; font-weight: 700; }
.checklist-icon.pending { color: var(--color-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* CSV import preview (U5, U8). Status icons stay narrow so the data
   columns claim the row width; the error message wraps under the icon. */
.import-table td:first-child { font-variant-numeric: tabular-nums; color: var(--color-muted); width: 3rem; }
.import-table td:nth-child(2) { width: 14rem; }
.row-ok { color: #166534; font-weight: 700; }
.row-error { color: var(--color-error-text); font-weight: 700; }
.row-error-msg { color: var(--color-error-text); font-size: 0.8125rem; margin-top: var(--space-1); }

/* Apiary form: location-mode toggle + geocode preview (U3, U4). */
.field-group--hidden { display: none; }
.location-mode { border: 0; padding: 0; margin: 0 0 var(--space-4) 0; display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.location-mode legend { font-weight: 600; margin-right: var(--space-2); padding: 0; }
.location-mode__option { display: inline-flex; gap: var(--space-1); align-items: center; cursor: pointer; }
.geocode-preview { margin-top: var(--space-2); font-size: 0.9375rem; }
.geocode-preview:empty, .geocode-preview[data-state="empty"] { display: none; }
.geocode-preview--found { color: var(--color-accent-hover); }
.geocode-preview--not-found { color: var(--color-error-text); }
.geocode-preview__line { margin: 0; }

/* Hive log timeline (C2.7). Card-pattern entries (one <li> per event)
   with a kind badge + timestamp + small delete on the header row, then
   a per-kind dl body. Reuses spacing/colour tokens; no new variables. */
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.timeline-entry { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); padding: var(--space-3); }
.timeline-entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.timeline-entry__when { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.timeline-entry__delete { margin-left: auto; }
.timeline-entry__body { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-4); row-gap: var(--space-1); margin: 0; }
.timeline-entry__body dt { color: var(--color-muted); font-weight: 500; }
.timeline-entry__body dd { margin: 0; font-family: inherit; word-break: normal; }
.timeline-entry__body dd.notes { white-space: pre-wrap; }
.kind-badge { display: inline-block; padding: 0.125rem var(--space-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.kind-badge--inspection { background: #dbeafe; color: #1e40af; }
.kind-badge--queen-event { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.kind-badge--honey-extraction { background: #dcfce7; color: #166534; }
.btn-sm { padding: var(--space-1) var(--space-2); font-size: 0.8125rem; }
.queen-color-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 1px solid var(--color-border); vertical-align: middle; margin-right: var(--space-1); }
.queen-color-swatch.color-white { background: #ffffff; }
.queen-color-swatch.color-yellow { background: #facc15; }
.queen-color-swatch.color-red { background: #dc2626; }
.queen-color-swatch.color-green { background: #16a34a; }
.queen-color-swatch.color-blue { background: #2563eb; }
.hive-log-form .form-actions { margin-top: var(--space-3); }
.geocode-preview__coords { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Platform admin (C3.1). Reuses existing list-table + card chrome.
   Merchant badges mirror the per-tenant ones above but use shorter
   class names because the directory row prints the raw status string
   straight into the modifier (approved/draft/submitted/rejected). */
.badge.merchant-approved { background: #dcfce7; color: #166534; }
.badge.merchant-draft { background: #f3f4f6; color: var(--color-muted); }
.badge.merchant-submitted { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.merchant-rejected { background: var(--color-error-bg); color: var(--color-error-text); }
/* Search form sits next to the H1 in the section header. Stays usable
   on narrow viewports because section-header already wraps. */
.admin-search { display: flex; gap: var(--space-2); align-items: stretch; }
.admin-search input[type="search"] {
  font: inherit; padding: var(--space-2) var(--space-3); min-width: 14rem;
  border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff;
}
/* Sort affordance — a row of small links above the table. The active
   sort gets the accent-soft pill so the operator always knows which
   column is driving the order. */
.admin-sort { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin: 0 0 var(--space-3); font-size: 0.9375rem; }
.admin-sort__label { color: var(--color-muted); margin-right: var(--space-1); }
.admin-sort__link { padding: var(--space-1) var(--space-2); border-radius: var(--radius); text-decoration: none; color: var(--color-text); }
.admin-sort__link:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.admin-sort__link.is-active { background: var(--color-accent-soft); color: var(--color-accent-hover); font-weight: 600; }
/* Stat-card grid for the drill-down counts. ``auto-fit, minmax``
   collapses to one column on narrow viewports and grows up to seven
   on wide ones — no media-query needed. */
.stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.stat-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); background: var(--color-bg); display: flex; flex-direction: column; gap: var(--space-1); }
.stat-card__num { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--color-accent-hover); font-variant-numeric: tabular-nums; }
.stat-card__label { color: var(--color-muted); font-size: 0.875rem; }
/* Spacing between the three "Recent" panels on the drill-down. The
   cards already have margin-bottom; this is a no-op hook so future
   selectors targeting the section can find them. */
.admin-recent-section { margin-bottom: var(--space-4); }
/* Visual separator above the platform-admin nav item. */
.app-nav__divider { margin-top: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }

/* Platform admin reports (C3.2). Card grid for the index, inline-SVG
   bar chart for payment-volume, and a "muted-tag" pill used by the
   churn / status / webhook pages for sentinel cells (never / unknown). */
.report-card-grid { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.report-card { display: block; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-sm); transition: border-color 120ms, box-shadow 120ms; }
.report-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); color: var(--color-text); }
.report-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.report-card__title { margin: 0 0 var(--space-1); font-size: 1.0625rem; color: var(--color-accent-hover); }
.report-card__desc { margin: 0; color: var(--color-muted); font-size: 0.9375rem; }
/* Inline SVG bar chart. Single accent color reused from the palette so
   we don't introduce a new chart-only token. ``overflow-x: auto`` keeps
   12+ bars readable on narrow viewports without compressing them. */
.bar-chart { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow-x: auto; }
.bar-chart svg { display: block; min-width: 100%; }
.bar-chart__bar { fill: var(--color-accent); transition: fill 120ms; }
.bar-chart__bar:hover { fill: var(--color-accent-hover); }
.bar-chart__label { font-size: 0.75rem; fill: var(--color-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Small inline pill for sentinel cells: "never", "unknown", "—".
   Reads as muted secondary text without looking like a real badge. */
.muted-tag { color: var(--color-muted); font-size: 0.875rem; font-style: italic; }
/* Per-bucket beekeeper rollup list inside the merchant-status table. */
.merchant-status__list { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.merchant-status__list li { margin-bottom: var(--space-1); }
.merchant-status__list code { font-size: 0.8125rem; }
/* Sub-heading above the recent-parked table on the webhook-health page. */
.report-subhead { margin-top: var(--space-6); font-size: 1.125rem; }
.stat-card__unit { font-size: 0.875rem; font-weight: 500; color: var(--color-muted); }

/* Feedback intake (C3.3). The public form reuses .auth-shell for chrome
   and adds a slightly wider cap so the textarea has room. The honeypot
   wrapper is positioned off-screen and aria-hidden so neither sighted
   visitors nor screen-reader users encounter it; the field still ships
   on submit so a blanket-fill bot trips the trap. */
.feedback-card { max-width: 32rem; }
.feedback-honeypot {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.feedback-categories {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
}
.feedback-categories legend { padding: 0 var(--space-2); font-weight: 600; }
.feedback-category { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.feedback-category input[type="radio"] { margin: 0; }
/* Body of the admin detail page — preserves submitter line breaks. */
.feedback-body { white-space: pre-wrap; word-wrap: break-word; margin: 0; }
/* Category badges. Soft pastels picked from the existing palette so they
   sit alongside merchant-/order-status pills without introducing new
   accent colors. */
.badge.category-badge--feedback { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.category-badge--question { background: #dbeafe; color: #1e40af; }
.badge.category-badge--request  { background: #ede9fe; color: #5b21b6; }
/* Triage status pills. Open=neutral (in-flight), resolved=green
   (terminal-ok), spam=red-muted (terminal-discarded). Same shape as
   .merchant-* from C3.1. */
.badge.status-badge--open     { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.status-badge--resolved { background: #dcfce7; color: #166534; }
.badge.status-badge--spam     { background: var(--color-error-bg); color: var(--color-error-text); }
/* Filter form on the admin list page — selects + button on one row,
   wraps below the H1 on narrow viewports because section-header wraps. */
.admin-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: stretch; }
.admin-filter select,
.admin-filter input[type="text"],
.admin-filter input[type="date"] {
  font: inherit; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff;
}
/* Audit log (C3.4a). One color per AUDIT_EVENT_CATEGORIES value, picked
   to mirror the existing palette: auth=blue (informational), admin-read=
   purple (operator activity), money-write=amber (live state, matches
   accent), feedback=teal (sits next to category-badge--feedback), other=
   neutral grey. Hyphenated class names — the underscores in the category
   strings are replaced in the template. */
.badge.audit-auth        { background: #dbeafe; color: #1e40af; }
.badge.audit-admin-read  { background: #ede9fe; color: #5b21b6; }
.badge.audit-money-write { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.audit-feedback    { background: #ccfbf1; color: #115e59; }
.badge.audit-other       { background: #f3f4f6; color: var(--color-muted); }
/* Metadata expander row sits visually attached to the row above, with a
   subtle tinted background so the eye groups them. */
.audit-meta-row > td {
  background: #fafaf7; padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.audit-meta-row details > summary {
  cursor: pointer; color: var(--color-muted); font-size: 0.875rem; padding: var(--space-1) 0;
}
.audit-meta-row details[open] > summary { color: var(--color-text); }
/* Mono small text — used for IPs, truncated target ids, and the
   pretty-printed metadata blob. */
.audit-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; color: var(--color-muted); white-space: pre-wrap; word-break: break-word;
}
pre.audit-meta { margin: var(--space-2) 0 0; padding: var(--space-2); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }