:root {
  --bg: #f5f7fa;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #eef1f6;
  --border: #e0e4ec;
  --text: #101828;
  --text-muted: #5b6478;
  --text-faint: #8a93a6;
  --accent: #f15a2c;
  --accent-hover: #d14a20;
  --accent-text: #ffffff;
  --success: #16a34a;
  --warning: #b45309;
  --danger: #dc2626;
  --info: #0284c7;
  --radius: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Roboto Mono', Consolas, monospace;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.tfl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.tfl-logo {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.tfl-logo span {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75em;
  letter-spacing: 0.03em;
  margin-left: 5px;
}

.tfl-nav { display: flex; flex-wrap: wrap; gap: 20px; row-gap: 10px; align-items: center; }
.tfl-nav a { color: var(--text-muted); font-size: 14px; }
.tfl-nav a:hover { color: var(--text); text-decoration: none; }
.tfl-nav a.btn-primary,
.tfl-nav a.btn-primary:hover { color: var(--accent-text); }

.tfl-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.tfl-shell--narrow { max-width: 440px; padding-top: 80px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  margin-top: 24px;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}

h1 { font-size: 26px; font-weight: 650; margin: 0 0 8px; }
h2 { font-size: 18px; font-weight: 650; margin: 0 0 20px; }
h3 { font-size: 14px; font-weight: 650; margin: 28px 0 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
h3:first-child { margin-top: 0; }
p.subtitle { color: var(--text-muted); margin: 0 0 28px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 24px 0 10px;
}
label:first-child { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(241, 90, 44, 0.15);
}

.field-hint { font-size: 12px; color: var(--text-faint); margin-top: 8px; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.field-row:first-child { margin-top: 0; }
/* A search box wants more room than a plain filter dropdown next to it -
   still collapses with the rest of .field-row at 640px below. */
.field-row--search-3 { grid-template-columns: 2fr 1fr 1fr; }

/* Contextual side panel (see public/js/transaction-new.js) - explains
   whichever field currently has focus, instead of a .field-hint under
   every input competing with the form for attention. */
.field-guide { position: sticky; top: 24px; align-self: start; }
.field-guide-eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.field-guide h2 { font-size: 16px; margin: 0 0 10px; }
.field-guide p:not(.field-guide-eyebrow) { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.full { width: 100%; margin-top: 28px; }

.org-search-result {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}
.org-search-result:hover,
.org-search-result:focus-visible { background: var(--border); }

.form-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
/* .form-actions is a compact inline toolbar (filters + a button), not a
   vertical form - the global input/select 100% width above is right for
   an actual form but was making any select/search field dropped in here
   swallow the whole row and push the button onto its own line. */
.form-actions select, .form-actions input[type="search"] { width: auto; }

.alert {
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.alert-error { background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.3); color: #b91c1c; }
.alert-success { background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.3); color: #15803d; }
.alert-info { background: rgba(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 0.3); color: #0369a1; }
.alert-warning { background: rgba(180, 83, 9, 0.08); border: 1px solid rgba(180, 83, 9, 0.3); color: var(--warning); }

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--shadow-card), 0 4px 16px rgba(16, 24, 40, 0.14);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.toast-show { opacity: 1; transform: translateY(0); }
.toast-hide { opacity: 0; transform: translateY(8px); }
.toast-error { background: #fef2f2; border: 1px solid rgba(220, 38, 38, 0.3); color: #b91c1c; }
.toast-success { background: #f0fdf4; border: 1px solid rgba(22, 163, 74, 0.3); color: #15803d; }
.toast-info { background: #f0f9ff; border: 1px solid rgba(2, 132, 199, 0.3); color: #0369a1; }
.toast-message { flex: 1; }
.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  padding: 0;
}
.toast-close:hover { opacity: 1; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-draft { background: rgba(91,100,120,0.12); color: var(--text-muted); }
.badge-submitted, .badge-under_review { background: rgba(180,83,9,0.12); color: var(--warning); }
.badge-additional_information_required { background: rgba(180,83,9,0.12); color: var(--warning); }
.badge-approved, .badge-active, .badge-accepted, .badge-completed, .badge-delivered { background: rgba(22,163,74,0.12); color: var(--success); }
.badge-rejected, .badge-suspended, .badge-declined, .badge-cancelled, .badge-exception, .badge-fraud_hold, .badge-compliance_hold, .badge-disputed { background: rgba(220,38,38,0.12); color: var(--danger); }
.badge-requested, .badge-quoted, .badge-interested { background: rgba(180,83,9,0.12); color: var(--warning); }
.badge-pending, .badge-voided { background: rgba(91,100,120,0.12); color: var(--text-muted); }
.badge-calculated, .badge-invoiced { background: rgba(180,83,9,0.12); color: var(--warning); }
.badge-collected { background: rgba(22,163,74,0.12); color: var(--success); }
.badge-refunded { background: rgba(220,38,38,0.12); color: var(--danger); }
.badge-open { background: rgba(180,83,9,0.12); color: var(--warning); }
.badge-overdue { background: rgba(220,38,38,0.12); color: var(--danger); }
.badge-paid { background: rgba(22,163,74,0.12); color: var(--success); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--text-faint); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; padding: 8px 12px; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }

/* Two-column label/value tables (exporter/provider "Contact & details") -
   a fixed label width reads fine on desktop but forces sideways scroll on
   a phone; stacked label-over-value below .detail-table's own breakpoint
   avoids that without touching the plain data tables elsewhere. */
.detail-table th { width: 160px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.stack { display: flex; flex-direction: column; gap: 4px; }
.row-between { display: flex; flex-wrap: wrap; row-gap: 12px; align-items: center; justify-content: space-between; }

.modal {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
  overflow-y: auto;
}
.modal::backdrop { background: rgba(16, 24, 40, 0.6); }
.candidate-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.candidate-card:last-child { margin-bottom: 0; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }

/* auto-fit rather than a fixed 4 columns: this grid sits inside the
   dash-grid's narrower left column (sidebar + billing column both eat
   into it), so its available width doesn't track viewport width the way
   a plain page-width breakpoint assumes - it needs to shrink on its own
   container's width, not just below a phone-sized viewport. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; }
.stat-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.stat-tile .stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat-tile .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-tile.stat-tile--warn .stat-value { color: var(--warning); }

.org-switcher { display: flex; align-items: center; gap: 8px; }
.org-switcher select { width: auto; padding: 6px 10px; font-size: 13px; }

.footer-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}

.checkbox-list { padding: 6px 4px; }
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
  margin: 0 0 14px;
  cursor: pointer;
}
.checkbox-list label:last-child { margin-bottom: 0; }
.checkbox-list input { width: auto; }

/* ---------- Landing page ---------- */
.lp-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.lp-hero-bg {
  background-color: #fff;
  background-image: url('/ballz.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.lp-hero { padding-top: 100px; padding-bottom: 88px; text-align: left; min-height: 520px; display: flex; flex-direction: column; justify-content: center; }
.lp-hero h1 { font-size: 44px; line-height: 1.18; max-width: 600px; margin: 0 0 20px; }
.lp-hero h1 span { color: var(--accent); }
.lp-hero .lp-sub { font-size: 18px; color: var(--text-muted); max-width: 520px; margin: 0 0 36px; line-height: 1.6; }
.lp-hero .lp-cta { display: flex; gap: 14px; justify-content: flex-start; }
.lp-hero .lp-cta .btn { padding: 13px 26px; font-size: 15px; }

@media (max-width: 900px) {
  .lp-hero-bg { background-image: none; }
  .lp-hero { min-height: 0; padding-top: 64px; padding-bottom: 48px; }
}

.lp-strip {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 28px;
  margin-top: 56px; padding: 24px 0; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-faint);
}
.lp-strip span { display: flex; align-items: center; gap: 8px; }
.lp-strip svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.lp-section { padding-top: 64px; padding-bottom: 64px; }
.lp-section + .lp-section { border-top: 1px solid var(--border); }
.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.lp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.lp-section-head h2 { font-size: 30px; margin: 0 0 12px; }
.lp-section-head p { color: var(--text-muted); font-size: 15px; margin: 0; line-height: 1.6; }

.lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }

.lp-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(241, 90, 44, 0.1); color: var(--accent); margin-bottom: 16px;
}
.lp-icon svg { width: 20px; height: 20px; }

.lp-card h3 { color: var(--text); text-transform: none; letter-spacing: normal; font-size: 16px; margin: 0 0 8px; }
.lp-card p { color: var(--text-muted); font-size: 14px; margin: 0; line-height: 1.65; }

.lp-audience-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lp-audience-list li { display: flex; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.lp-audience-list svg { width: 15px; height: 15px; margin-top: 3px; color: var(--success); flex-shrink: 0; }

.lp-steps { display: flex; flex-direction: column; }
.lp-step { display: flex; gap: 24px; padding: 24px 0; }
.lp-step + .lp-step { border-top: 1px solid var(--border); }
.lp-step-num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.lp-step h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); text-transform: none; letter-spacing: normal; }
.lp-step p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.65; }

.lp-cta-band {
  text-align: center; padding: 64px 40px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(241, 90, 44, 0.1), rgba(241, 90, 44, 0.02));
  border: 1px solid var(--border);
}
.lp-cta-band h2 { font-size: 26px; margin: 0 0 10px; }
.lp-cta-band p { color: var(--text-muted); margin: 0 0 28px; font-size: 15px; }

.lp-footer {
  padding-top: 40px; padding-bottom: 64px; border-top: 1px solid var(--border); margin-top: 8px;
}
.lp-footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 32px; }
.lp-footer-links { display: flex; gap: 24px; }
.lp-footer-links a { color: var(--text-muted); font-size: 13px; }
.lp-footer-links a:hover { color: var(--text); }
.lp-disclaimer { font-size: 12px; color: var(--text-faint); line-height: 1.7; max-width: 980px; }

@media (max-width: 860px) {
  .lp-grid, .lp-grid--3, .lp-grid--2 { grid-template-columns: 1fr; }
  .lp-hero h1 { font-size: 32px; }
  .lp-hero .lp-cta { flex-direction: column; }
  .lp-hero .lp-cta .btn { width: 100%; }
  .lp-footer-grid { flex-direction: column; gap: 16px; }
}

@media (max-width: 640px) {
  .tfl-nav-anchor { display: none; }
  .lp-hero { padding-top: 56px; }
  .lp-hero h1 { font-size: 26px; }
  .lp-hero .lp-sub { font-size: 15px; }
  .lp-strip { gap: 16px; margin-top: 40px; }
  .lp-section { padding-top: 44px; padding-bottom: 44px; }
  .lp-section-head { margin-bottom: 32px; }
  .lp-section-head h2 { font-size: 22px; }
  .lp-cta-band { padding: 40px 20px; }
  .lp-cta-band h2 { font-size: 21px; }
  .lp-step { gap: 16px; }
  .lp-footer-links { flex-wrap: wrap; row-gap: 10px; }
}

/* ---------- Responsive (app shell, forms, tables) ---------- */
@media (max-width: 640px) {
  .tfl-header { padding: 12px 16px; }
  .tfl-nav { gap: 14px; }
  .tfl-shell { padding: 24px 16px 56px; }
  .tfl-shell--narrow { padding-top: 36px; }
  .card { padding: 20px; }
  .card + .card { margin-top: 16px; }
  .widget { padding: 18px; }
  .app-main { padding-top: 20px; }
  .field-row, .grid-2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  table { font-size: 12px; }
  th, td { padding: 8px; white-space: nowrap; }

  .detail-table, .detail-table tbody, .detail-table tr, .detail-table th, .detail-table td {
    display: block;
    width: auto;
  }
  .detail-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .detail-table tr:last-child { border-bottom: none; }
  .detail-table th { padding: 0 0 2px; border-bottom: none; white-space: normal; }
  .detail-table td { padding: 0; border-bottom: none; white-space: normal; word-break: break-word; }
}

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- App shell: sidebar + column dashboard ---------- */

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.app-sidebar {
  width: 252px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 16px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-logo { font-weight: 700; font-size: 18px; letter-spacing: 0.02em; color: var(--accent); padding: 0 8px; }
.app-logo span { color: var(--text-muted); font-weight: 600; font-size: 0.75em; letter-spacing: 0.03em; margin-left: 5px; }

.app-org-switcher select { padding: 9px 10px; font-size: 13px; border-radius: 8px; }

.app-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.app-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}
.app-nav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.app-nav a.active { background: rgba(241, 90, 44, 0.1); color: var(--accent); }
.app-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.app-nav-divider { height: 1px; background: var(--border); margin: 8px 4px; }

.app-sidebar-footer { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.app-user-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.app-user-row .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-main { flex: 1; min-width: 0; padding: 32px 40px 80px; max-width: 1320px; }

.app-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; }
.app-breadcrumb:hover { color: var(--text); text-decoration: none; }

/* A single-focus form/detail page's content, centered within the full-width
   app-main rather than the whole main area being squeezed to one side -
   the squeezed version left a large, unbalanced empty void next to a
   left-pinned card on anything wider than a laptop. Width is set per page
   via an inline style, same as app-main's old max-width was. */
.app-narrow { max-width: 680px; margin: 0 auto; }

.app-topbar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.app-topbar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
/* The right column is billing-only - a non-provider org (importer,
   exporter, government) never shows it, so the grid must stop reserving
   that track for it or the left column stays squeezed against an empty
   space even at full width. Toggled in dashboard.js#renderBillingWidget. */
.dash-grid.dash-grid--no-side { grid-template-columns: 1fr; }
.dash-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dash-full-row { grid-column: 1 / -1; }

.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}

/* Billing snapshot widget - the provider-facing "what's owed, what's
   accruing, what to do about it" summary, surfaced on the dashboard so a
   provider org doesn't have to visit /provider-requests.html just to know
   if they owe anything. */
.billing-widget-row { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.billing-widget-row:last-of-type { border-bottom: none; }
.billing-widget-label { font-size: 13px; color: var(--text-muted); }
.billing-widget-value { font-size: 15px; font-weight: 650; font-family: var(--font-mono); }
.billing-widget-value.is-warn { color: var(--warning); }
.billing-widget-value.is-danger { color: var(--danger); }
.billing-widget-empty { font-size: 13px; color: var(--text-faint); padding: 4px 0 8px; }

/* Wider than the general 1080px collapse below: the dashboard's left
   column also competes with the fixed 252px sidebar nav, so at ordinary
   laptop widths (1100-1350px) the 2fr/1fr split still squeezed the
   transactions table/stat tiles uncomfortably even though nothing here
   is actually "small-screen" - collapsing earlier gives that column the
   full width instead. */
@media (max-width: 1360px) {
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .field-guide { position: static; }
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }
  .app-org-switcher { order: 3; width: 100%; }
  .app-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
  .app-nav-divider { display: none; }
  .app-sidebar-footer { flex-direction: row; align-items: center; justify-content: space-between; border-top: none; padding-top: 0; margin-left: auto; }
  .app-user-row { padding: 0; }
  .app-main { padding: 24px 16px 56px; }
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.legal-content .legal-meta {
  color: var(--text-faint);
  font-size: 13px;
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.legal-content h1 { font-size: 32px; margin: 0 0 8px; }
.legal-content h2 {
  font-size: 19px;
  margin: 44px 0 14px;
  padding-top: 4px;
  color: var(--text);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  margin: 24px 0 10px;
}
.legal-content p, .legal-content li { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.legal-content strong { color: var(--text); }
.legal-content ul, .legal-content ol { padding-left: 22px; margin: 0 0 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-content .legal-callout {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14px;
}
.legal-content .legal-callout p { margin: 0; font-size: 14px; }
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 40px;
  padding: 16px 20px;
  background: var(--surface-hover);
  border-radius: var(--radius);
}
.legal-toc a { font-size: 13px; color: var(--text-muted); }
.legal-toc a:hover { color: var(--accent); }