/* ══════════════════════════════════════════════════════════════
   Forest Farmers — Brand system
   Single source of truth for palette, typography, and shared
   components. Loaded on every page; no page should redefine
   --green-*, --cream, --text, --muted, --border, --white.
   ══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ── Brand palette (preferred tokens) ─────────────────────── */
  --paper:     #f4efe3;
  --paper-2:   #ece5d2;
  --ink:       #1a1915;
  --ink-soft:  #55514a;
  --sun:       #f2bd2e;
  --clay:      #e86a3c;
  --sky:       #7cb6d6;
  --fern:      #3f8a48;
  --fern-dark: #2d6a37;
  --plum:      #8d3d5f;
  --white:     #ffffff;
  --line:      rgba(26,25,21,0.08);
  --line-2:    rgba(26,25,21,0.14);

  /* Soft tints for hover / badge bgs */
  --fern-tint: #e5efe4;
  --sun-tint:  #fdf4cf;
  --clay-tint: #fde1d0;
  --sky-tint:  #e0edf3;
  --plum-tint: #f0dce6;

  /* Semantic (non-brand) */
  --danger:     #dc2626;
  --danger-50:  #fee2e2;
  --warn:       #c7860f;
  --warn-50:    #fef3c7;

  /* ── Legacy tokens remapped to brand (for existing code) ───── */
  --text:      var(--ink);
  --muted:     var(--ink-soft);
  --border:    var(--line);
  --cream:     var(--paper);
  --green-700: var(--fern);
  --green-800: var(--fern-dark);
  --green-900: #1e4a26;
  --green-50:  var(--fern-tint);
  --green-100: #d4e4d3;
}

/* ── Global body type — Figtree across the app ──────────────── */
body {
  font-family: "Figtree", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  font-family: "Figtree", system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   Shared component primitives
   Pages should prefer these over rolling their own. Scoped to
   .ff-* to avoid collisions with legacy page styles.
   ══════════════════════════════════════════════════════════════ */

/* Pill button — primary (ink) */
.ff-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background .2s ease, transform .2s ease;
  text-decoration: none;
}
.ff-btn:hover { background: var(--clay); transform: translateY(-1px); }
.ff-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Pill button — sun (secondary prominent) */
.ff-btn-sun {
  background: var(--sun);
  color: var(--ink);
}
.ff-btn-sun:hover { background: var(--clay); color: #fff; }

/* Pill button — ghost (outline) */
.ff-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.ff-btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Pill chip (smaller, unstyled link-like) */
.ff-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26,25,21,0.05);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}
.ff-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }

/* Card */
.ff-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ff-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(26,25,21,0.18); }

/* Form controls */
.ff-input,
.ff-select,
.ff-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ff-input:focus,
.ff-select:focus,
.ff-textarea:focus {
  border-color: var(--fern);
  box-shadow: 0 0 0 3px var(--fern-tint);
}
.ff-textarea { min-height: 96px; resize: vertical; }

/* Section label — small uppercase pill eyebrow */
.ff-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: rgba(26,25,21,0.05);
}
.ff-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fern); }

/* ══════════════════════════════════════════════════════════════
   Shell refinements — soften the app top-bar / sidebar chrome
   Loaded after shell.css if link order is correct; otherwise
   higher specificity via body class defeats shell defaults.
   ══════════════════════════════════════════════════════════════ */

.ff-shell-topbar {
  background: var(--paper);
  border-bottom-color: var(--line);
}
.ff-shell-brand {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-size: .98rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.ff-shell-brand .ff-brand-mark {
  width: 24px;
  height: 24px;
  display: block;
  color: var(--ink);
  flex-shrink: 0;
}
.ff-shell-brand .ff-brand-wordmark {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ff-shell-brand .ff-brand-wordmark { display: none; }
  .ff-shell-brand .ff-brand-mark { width: 26px; height: 26px; }
}
.ff-shell-page-title {
  color: var(--ink-soft);
  font-weight: 500;
}
.ff-shell-sidebar {
  background: var(--paper);
  border-right-color: var(--line);
}
.ff-shell-nav-item {
  border-radius: 10px;
  font-weight: 500;
}
.ff-shell-avatar {
  background: var(--plum);
  font-weight: 600;
}
.ff-shell-signin {
  border-radius: 999px;
  padding: .4rem 1rem;
  font-weight: 500;
  border: none;
  background: var(--ink);
  color: var(--paper);
}
.ff-shell-signin:hover {
  background: var(--clay);
  color: #fff;
}
.ff-shell-help-btn { border-radius: 50%; border-width: 1px; }
.ff-shell-help-btn:hover { border-color: var(--ink); color: var(--ink); }
.ff-shell-lang-btn {
  border-radius: 999px;
  border-width: 1px;
  font-weight: 500;
  padding: .28rem .65rem;
}
.ff-shell-lang-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ff-shell-usermenu {
  border-radius: 14px;
  border-color: var(--line);
  box-shadow: 0 12px 36px rgba(26,25,21,0.15);
}
.ff-shell-drawer {
  background: var(--paper);
  border-left-color: var(--line);
}

/* Feedback modal — rounded + paper */
.ff-feedback-modal {
  background: var(--paper);
  border-radius: 18px;
}
.ff-feedback-field select,
.ff-feedback-field textarea {
  background: var(--white);
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════
   Universal overrides for legacy page classes
   Every app page has its own .btn / .btn-primary / .status /
   .page-header etc. — these rules catch them wholesale so each
   page picks up the brand without individual edits.
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons (.btn, .btn-primary, .btn-outline, .btn-xs) ────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 500;
  font-family: "Figtree", sans-serif;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
.btn-primary:hover {
  background: var(--clay) !important;
  border-color: var(--clay) !important;
  color: #fff !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.btn-outline:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

.btn-sun {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-color: var(--sun) !important;
}
.btn-sun:hover {
  background: var(--clay) !important;
  border-color: var(--clay) !important;
  color: #fff !important;
}

.btn-xs,
.btn-sm {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}
.btn-xs-green {
  background: var(--fern) !important;
  color: #fff !important;
  border-color: var(--fern) !important;
}
.btn-xs-green:hover {
  background: var(--fern-dark) !important;
  border-color: var(--fern-dark) !important;
}

/* ── Page header pattern ────────────────────────────────────── */
.page-header h1,
.page-header h2,
.page-title {
  font-family: "Figtree", sans-serif;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  font-size: 1.5rem !important;
  color: var(--ink);
  line-height: 1.1;
}
.page-header-sub {
  font-family: "Figtree", sans-serif;
  color: var(--ink-soft) !important;
  font-size: 15px;
  margin-top: .4rem;
  line-height: 1.5;
}

/* ── Status pills (species-db) ──────────────────────────────── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid transparent;
  letter-spacing: 0;
}
.status-db {
  background: var(--fern-tint) !important;
  color: var(--fern-dark) !important;
  border-color: rgba(63,138,72,0.2) !important;
}
.status-loading {
  background: var(--sun-tint) !important;
  color: #8a6814 !important;
  border-color: rgba(242,189,46,0.35) !important;
}
.status-offline {
  background: var(--clay-tint) !important;
  color: var(--clay) !important;
  border-color: rgba(232,106,60,0.35) !important;
}

/* Notification badge */
.notif-badge {
  background: var(--clay) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ── Filter chips (.fc used in species-db, line-designer) ──── */
.fc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Figtree", sans-serif;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line-2) !important;
  background: var(--white) !important;
  color: var(--ink-soft) !important;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  letter-spacing: 0;
  line-height: 1.2;
}
.fc:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.fc.on,
.fc.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

/* ── Coming-soon / eyebrow pill (generic) ───────────────────── */
.coming-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(26,25,21,0.05) !important;
  color: var(--ink-soft) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border: none !important;
}
.coming-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sun);
}

/* ── Tabs (species-db) ──────────────────────────────────────── */
.tab-btn {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.tab-btn.active {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
  font-weight: 600 !important;
}

/* ── Cards (.settings-card, .community-card legacy) ─────────── */
.settings-card,
.community-card {
  background: var(--white);
  border-color: var(--line) !important;
  border-radius: 16px !important;
}

/* ── Form inputs (legacy tbl-input, generic inputs) ─────────── */
.tbl-input {
  font-family: "Figtree", sans-serif !important;
  border-radius: 8px !important;
  border-color: var(--line-2) !important;
}
.tbl-input:focus {
  border-color: var(--fern) !important;
  box-shadow: 0 0 0 2px var(--fern-tint);
  background: var(--white) !important;
}

/* ══════════════════════════════════════════════════════════════
   Page-level sweeping overrides — catch the "circus"
   Legacy pages define .field, .ob-field, .auth-field, .s-field, .hf,
   .tag, .lang-pill, .filter-chip, .parcel-pill, .species-card,
   .action-chip, .modal-box, .auth-box, .toast etc. Unify them here
   so every page inherits the brand without a page-by-page rewrite.
   ══════════════════════════════════════════════════════════════ */

/* ── Universal form controls ────────────────────────────────── */
.field input, .field textarea, .field select,
.ob-field input, .ob-field select, .ob-field textarea,
.auth-field input,
.s-field input, .s-field select,
.opt-field input,
.hf input, .hf select,
.sef input, .sef select,
.sp-search,
.length-input, .line-name-input,
.species-search,
.override-fields select,
.ob-override-fields select {
  font-family: "Figtree", sans-serif !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.field input:focus, .field textarea:focus, .field select:focus,
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus,
.auth-field input:focus,
.s-field input:focus, .s-field select:focus,
.opt-field input:focus,
.hf input:focus, .hf select:focus,
.sef input:focus, .sef select:focus,
.sp-search:focus,
.length-input:focus, .line-name-input:focus,
.species-search:focus,
.override-fields select:focus,
.ob-override-fields select:focus {
  border-color: var(--fern) !important;
  box-shadow: 0 0 0 3px var(--fern-tint) !important;
  background: var(--white) !important;
}

/* Field labels — small caps, ink-soft */
.field label,
.ob-field label,
.auth-field label,
.s-field label,
.opt-field label,
.step-label,
.fgroup-label,
.section-label,
.sp-edit-title,
.sef > label {
  font-family: "Figtree", sans-serif !important;
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
}

/* Checkbox / radio accent */
.check-group label input[type=checkbox],
.sef-check input[type=checkbox],
.species-check-row input {
  accent-color: var(--fern) !important;
}

/* ── Universal pills / chips (legacy .tag, .lang-pill, .filter-chip,
     .parcel-pill, .species-card, .action-chip, .mode-badge,
     .parcel-card-state, .coming-soon-badge, .preview-banner-btn) ── */

/* Tags: compact outlined pill */
.tag {
  font-family: "Figtree", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: var(--paper-2) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tag-neutral {
  background: rgba(26,25,21,0.04) !important;
  color: var(--ink-soft) !important;
  border-color: var(--line) !important;
}

/* Lang pills (welcome, settings, line-designer, my-lines onboarding) */
.lang-pill, .lang-btn {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  transition: all .15s ease !important;
}
.lang-pill:hover, .lang-btn:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}
.lang-pill.active, .lang-btn.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* Filter chip (maintenance page) — match .fc vocabulary */
.filter-chip {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  background: var(--white) !important;
  color: var(--ink-soft) !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all .15s ease !important;
}
.filter-chip:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}
.filter-chip.on {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* Parcel pill + species card pill (maintenance only) —
   .species-grid scopes to maintenance's log-entry species picker so we
   don't accidentally style the species-db card-grid tiles. */
.parcel-pill,
.species-grid .species-card {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  background: var(--white) !important;
  color: var(--ink-soft) !important;
  transition: all .15s ease !important;
}
.parcel-pill:hover,
.species-grid .species-card:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}
.parcel-pill.sel,
.species-grid .species-card.sel {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* Action chip (maintenance) — card style */
.action-chip {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  transition: all .15s ease !important;
}
.action-chip:hover {
  border-color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -10px rgba(26,25,21,0.22);
}
.action-chip.sel {
  border-color: var(--ink) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 2px var(--ink) inset;
}

/* Mode badge / parcel card state — semantic tints */
.mode-badge, .parcel-card-state {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  letter-spacing: .04em !important;
  font-size: 10.5px !important;
}
.mode-badge-planning, .parcel-card-state-planning {
  background: var(--sun-tint) !important;
  color: #8a6814 !important;
  border: 1px solid rgba(242,189,46,0.35) !important;
}
.mode-badge-maintenance, .parcel-card-state-planted {
  background: var(--fern-tint) !important;
  color: var(--fern-dark) !important;
  border: 1px solid rgba(63,138,72,0.22) !important;
}

/* Coming-soon badge */
.coming-soon-badge {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  background: rgba(26,25,21,0.06) !important;
  color: var(--ink-soft) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
}

/* Coming-soon container (maintenance) */
.coming-soon {
  background: var(--paper-2) !important;
  border: 1px dashed var(--line-2) !important;
  border-radius: 14px !important;
}

/* Line species mini-tag */
.line-sp-tag {
  border-radius: 999px !important;
  background: rgba(26,25,21,0.05) !important;
  color: var(--ink) !important;
}

/* ── Modals — unified paper rounded ──────────────────────────── */
.modal-box, .auth-box, .ob-box, .sp-modal {
  background: var(--white) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px -12px rgba(26,25,21,0.28) !important;
}
.modal-close, .auth-close, .sp-modal-close {
  color: var(--ink-soft) !important;
}
.modal-close:hover, .auth-close:hover, .sp-modal-close:hover {
  color: var(--ink) !important;
}
.modal-title, .auth-title, .ob-title, .sp-modal-cn {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.modal-sub, .auth-sub, .ob-sub, .sp-modal-ln {
  color: var(--ink-soft) !important;
}

/* auth-submit + ob-submit — use ink pill */
.auth-submit {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  transition: background .2s ease, transform .2s ease !important;
}
.auth-submit:hover {
  background: var(--clay) !important;
  transform: translateY(-1px);
}
.auth-switch button {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* ── Parcel card (my-lines) ─────────────────────────────────── */
.parcel-card {
  border-radius: 16px !important;
  border-color: var(--line) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.parcel-card:hover {
  border-color: var(--line-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(26,25,21,0.18) !important;
}
.parcel-card-name {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
}
.parcel-card-new {
  border-style: dashed !important;
}
.parcel-card-new:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: var(--paper-2) !important;
}

/* Parcel header card */
.parcel-header {
  border-radius: 16px !important;
  border-color: var(--line) !important;
}
.parcel-name {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── Toast — universal ink pill ─────────────────────────────── */
.toast {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  box-shadow: 0 12px 28px -8px rgba(26,25,21,0.35) !important;
}

/* ── Page header typography everywhere ──────────────────────── */
.page-header h1,
.page-title {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
}
.page-title-hero {
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(28px, 4vw, 44px) !important;
}

/* ── Breadcrumb — fern link colour ──────────────────────────── */
.breadcrumb a {
  color: var(--fern-dark) !important;
}
.breadcrumb a:hover {
  color: var(--ink) !important;
}

/* ── Wizard steps (parcel import) ───────────────────────────── */
.wizard-step.active {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}
.wizard-step.done {
  color: var(--fern-dark) !important;
  border-bottom-color: var(--fern) !important;
}

/* ── Import banner / preview banner ─────────────────────────── */
.import-banner {
  background: var(--fern-tint) !important;
  border: 1px solid rgba(63,138,72,0.22) !important;
  border-radius: 16px !important;
}
.import-banner-title {
  color: var(--fern-dark) !important;
  font-family: "Figtree", sans-serif !important;
}
.import-banner-desc {
  color: var(--ink-soft) !important;
}

.preview-banner {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
.preview-banner-btn {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  transition: background .2s ease, transform .2s ease !important;
}
.preview-banner-btn:hover {
  background: var(--clay) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── Summary box (parcel wizard) ────────────────────────────── */
.summary-box {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
}
.summary-box strong {
  color: var(--ink) !important;
}
.selected-count {
  color: var(--fern-dark) !important;
}

/* ── Materials table (parcel) — swap dark-green header for ink ── */
.mat-table thead tr {
  background: var(--ink) !important;
}
.mat-table thead th {
  color: var(--paper) !important;
  font-family: "Figtree", sans-serif !important;
  letter-spacing: .06em !important;
}
.mat-table tbody tr {
  border-bottom: 1px solid var(--line) !important;
}
.mat-table tfoot td {
  background: var(--paper-2) !important;
  border-top-color: var(--line-2) !important;
}
.materials-card {
  border-radius: 16px !important;
  border-color: var(--line) !important;
}
.materials-footer {
  background: var(--paper-2) !important;
}

/* ── Demo banner (line-designer) — soft sun paper ───────────── */
.demo-banner {
  background: var(--sun-tint) !important;
  border-bottom: 1px solid rgba(242,189,46,0.35) !important;
  color: #8a6814 !important;
  font-family: "Figtree", sans-serif !important;
}
.demo-banner-cta {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  transition: background .2s ease !important;
}
.demo-banner-cta:hover {
  background: var(--clay) !important;
}

/* ── Settings card ──────────────────────────────────────────── */
.settings-card {
  border-radius: 16px !important;
  padding: 1.5rem 1.6rem !important;
}
.settings-card-title {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  font-size: 15px !important;
}
.settings-card-desc {
  color: var(--ink-soft) !important;
  font-size: 13.5px !important;
}

/* Settings warning */
.s-warning {
  background: var(--sun-tint) !important;
  border-color: rgba(242,189,46,0.35) !important;
  color: #8a6814 !important;
  border-radius: 12px !important;
}

/* ── Species-db status pills ────────────────────────────────── */
.status-pending {
  background: var(--sun-tint) !important;
  color: #8a6814 !important;
  border: 1px solid rgba(242,189,46,0.35) !important;
}
.status-approved {
  background: var(--fern-tint) !important;
  color: var(--fern-dark) !important;
  border: 1px solid rgba(63,138,72,0.22) !important;
}
.status-rejected {
  background: var(--clay-tint) !important;
  color: var(--clay) !important;
  border: 1px solid rgba(232,106,60,0.3) !important;
}

/* ── Line-designer stratum palette — brand accents per layer ── */
body {
  --c-emergent: var(--fern-dark);
  --c-high:     var(--fern);
  --c-medium:   var(--sun);
  --c-low:      var(--clay);
}

/* Score cell hover tint — fern */
.cell:hover:not(.filled) {
  background: var(--fern-tint) !important;
  border-color: rgba(63,138,72,0.22) !important;
}
.cell.drag-over {
  background: var(--fern-tint) !important;
  border-color: var(--fern) !important;
}

/* Validation pip — paper/ink instead of faded gray */
.pip.ok {
  background: var(--fern-tint) !important;
  color: var(--fern-dark) !important;
}
.pip.no {
  background: rgba(26,25,21,0.05) !important;
  color: var(--ink-soft) !important;
}

/* ── Climate card (welcome) ─────────────────────────────────── */
.climate-card {
  border-radius: 16px !important;
  background: var(--white) !important;
  border-color: var(--line) !important;
}
.climate-zone-badge {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 3px 10px !important;
}
.species-count {
  color: var(--ink) !important;
  font-family: "Figtree", sans-serif !important;
}
.species-chip {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 500 !important;
}
.climate-readiness-note {
  background: var(--sun-tint) !important;
  color: #8a6814 !important;
  border: 1px solid rgba(242,189,46,0.35) !important;
  border-radius: 12px !important;
}
.loading-dot {
  background: var(--fern) !important;
}

/* Map prompt (welcome) */
.map-prompt-icon {
  background: var(--fern-tint) !important;
  border: 1px solid rgba(63,138,72,0.22) !important;
  border-radius: 12px !important;
}
.map-prompt-inner {
  border-radius: 14px !important;
}

/* Onboarding (my-lines) climate card */
.ob-climate-card {
  background: var(--fern-tint) !important;
  border: 1px solid rgba(63,138,72,0.22) !important;
  border-radius: 12px !important;
}
.ob-climate-zone {
  color: var(--fern-dark) !important;
}
#ob-map {
  border-radius: 14px !important;
}

/* ── Log book list items (maintenance) ──────────────────────── */
.log-item {
  border-radius: 14px !important;
  border-color: var(--line) !important;
}
.log-action-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.log-action-icon.act-clay { background: var(--clay-tint); color: var(--clay); }
.log-action-icon.act-sun  { background: var(--sun-tint);  color: #8a6814; }
.log-action-icon.act-sky  { background: var(--sky-tint);  color: #3a7a95; }
.log-action-icon.act-fern { background: var(--fern-tint); color: var(--fern-dark); }
.log-action-icon.act-plum { background: var(--plum-tint); color: var(--plum); }
.log-action-icon.act-ink  { background: var(--paper-2);   color: var(--ink); }
.log-item-action {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
.log-item-parcel {
  color: var(--fern-dark) !important;
  font-weight: 500 !important;
}

/* ── Dash cards (parcel) ────────────────────────────────────── */
.dash-card {
  border-radius: 16px !important;
  border-color: var(--line) !important;
}
.dash-card-title {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
}

/* ── Form card (maintenance) ────────────────────────────────── */
.form-card {
  border-radius: 16px !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 28px -16px rgba(26,25,21,0.18) !important;
}

/* ── Auth prompt (my-lines anon) ────────────────────────────── */
.auth-prompt {
  border-radius: 18px !important;
  border-color: var(--line) !important;
}
.auth-prompt h2 {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
}

/* ── Confidence dots (line-designer species panel) ──────────── */
.conf-dot.sourced { background: var(--line-2) !important; }
.conf-dot.community { background: var(--sky) !important; }
.conf-dot.expert { background: var(--fern) !important; }

/* Favourite star */
.sp-fav-btn.on { color: var(--sun) !important; }

/* ── Sp-modal detail (line-designer species modal) ──────────── */
.sp-modal-pill {
  border-radius: 999px !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
.sp-modal-pill.green {
  color: var(--fern-dark) !important;
  border-color: rgba(63,138,72,0.22) !important;
  background: var(--fern-tint) !important;
}
.sp-modal-dot.filled { background: var(--fern) !important; }
.sp-modal-link { color: var(--fern-dark) !important; }
.sp-modal-fav.on {
  background: var(--sun-tint) !important;
  border-color: rgba(242,189,46,0.35) !important;
  color: #8a6814 !important;
}

/* ── Species-db table header override (if hardcoded) ────────── */
.sp-tbl thead tr,
table.sp-tbl thead {
  background: var(--ink) !important;
}