/* ═══════════════════════════════════════════════════════════════════════
   SYNC AGRICULTURE — SHARED BRAND SYSTEM  (brand.css)
   Single source of truth for color tokens, typography, nav + footer chrome.
   Linked by every tool:  <link rel="stylesheet" href="/assets/brand.css">
   New tool = link this file, inherit the theme. Change once, propagates everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Arial Narrow';src:local('Arial Narrow'),local('ArialNarrow');font-stretch:condensed;font-display:swap}

:root{
  /* ── raw palette ── */
  --green-900:#0d1c12; --green-800:#173420; --green-700:#1e4429; --green-600:#2f6b3d;
  --leaf-300:#8fbe6f; --leaf-400:#6fa84f; --amber-500:#e8a33d; --amber-600:#c47f1e;
  --white:#fff; --paper:#f7f8fa;
  --ink-900:#1a1a2e; --ink-600:#4a5568; --ink-400:#718096;
  --line-200:#e2e8f0; --line-300:#d0d8e4; --positive:#3f7d45; --negative:#c0532b;

  /* ── brand semantic aliases ── */
  --brand-deepest:var(--green-900); --brand-deep:var(--green-800);
  --brand-deep-mid:var(--green-700); --brand-deep-soft:var(--green-600);
  --brand-tint:var(--leaf-300);
  --brand-accent:var(--amber-500); --brand-accent-strong:var(--amber-600);

  /* ── THE header color. One token, applied to nav on every page. ──
     Corn-leaf dark green, between #173420 and #0d1c12. */
  --brand-header:#142412;

  /* ── surfaces / text ── */
  --surface-page:var(--white); --surface-tint:#f4f6f1; --surface-card:var(--white);
  --surface-rule:#dde4d8; --border:#dde4d8;
  --text-strong:var(--brand-deep); --text-body:#5d6b5f; --text-heading:#16261b;
  --text-muted:var(--ink-400); --text-on-deep:var(--white); --text-on-deep-soft:rgba(255,255,255,.62);

  /* ── type ── */
  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font-system); --font-body:var(--font-system); --font-brand:var(--font-system);
  --font-brand-condensed:"Arial Narrow","Roboto Condensed",var(--font-system);

  /* ── shape / shadow / layout ── */
  --radius-soft:10px; --radius-card:14px; --radius-pill:999px;
  --shadow-soft:0 1px 3px rgba(23,38,27,.10),0 4px 16px rgba(23,38,27,.06);
  --container:1100px; --tracking-eyebrow:2.5px;

  /* legacy --sa-* aliases (GDU) → DS semantic tokens */
  --sa-deep:var(--brand-deep); --sa-deep2:var(--brand-deep-mid);
  --sa-leaf:var(--leaf-300); --sa-leaf2:var(--leaf-400); --sa-amber:var(--brand-accent);
  --sa-bg:var(--surface-tint); --sa-card:var(--surface-card); --sa-ink:var(--text-heading);
  --sa-muted:var(--text-body); --sa-line:var(--border); --sa-shadow:var(--shadow-soft);
  --sa-warn:var(--negative); --sa-ok:var(--positive);
}

/* ── dark theme (used by tools that opt in via data-theme="dark") ── */
[data-theme="dark"]{
  --surface-tint:#10130d; --surface-page:#161a12; --surface-card:#1b2016;
  --text-heading:#ecebe8; --text-body:#a8b0a0; --border:#2c3326;
  --brand-header:#0f1c0e;   /* slightly deeper header in dark mode */
  --shadow-soft:0 1px 3px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
}

/* ═══ SHARED NAV (masthead) ═══════════════════════════════════════════════
   Identical markup across all tools:
   <nav class="sa-nav">
     <a href="/" class="sa-lockup">…sync · Agriculture LLC…</a>   (logo → home)
     <span class="sa-toolid"> tool name + sub </span>             (optional)
     <div class="sa-nav-right"> links / theme btn </div>          (optional)
   </nav>
   ═════════════════════════════════════════════════════════════════════════ */
.sa-nav{background:var(--brand-header);color:#fff;padding:14px 24px;display:flex;align-items:center;
  gap:18px;position:sticky;top:0;z-index:30}
[data-theme="dark"] .sa-nav{border-bottom:1px solid #2c3326}

/* logo lockup — now an <a> to home, centerlines aligned via shared baseline */
.sa-lockup{display:inline-flex;align-items:center;gap:13px;text-decoration:none;line-height:1}
.sa-lockup:hover{opacity:.92}
.sa-sync{font-family:var(--font-brand);font-size:26px;font-weight:700;color:#fff;letter-spacing:-.3px;line-height:1}
.sa-rule{width:1px;height:24px;background:rgba(255,255,255,.24)}
/* centerline fix: align "Agriculture LLC" optically to the "sync" wordmark */
.sa-desc{font-family:var(--font-brand);font-size:15px;font-weight:700;color:#fff;letter-spacing:.2px;line-height:1;
  display:inline-flex;align-items:center;align-self:center}
/* Consistent text rendering across all tools — without this, identical font-weights
   render heavier on pages that lack smoothing (the Fertility logo looked bolder). */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.sa-desc .llc{font-weight:400;margin-left:.28em}
[data-theme="dark"] .sa-desc{color:#e6e4de}

/* per-tool identity block (name + subtitle) sitting next to the lockup */
.sa-toolid{display:inline-flex;flex-direction:column;justify-content:center;gap:2px;
  padding-left:18px;margin-left:4px;border-left:1px solid rgba(255,255,255,.18)}
.sa-toolid .tool-name{font-weight:700;font-size:15px;color:#fff;line-height:1}
.sa-toolid .tool-sub{font-weight:400;font-size:11px;color:#c9d8c1;letter-spacing:1.5px;
  text-transform:uppercase;line-height:1}

/* right-hand cluster: tool links + theme toggle */
.sa-nav-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.sa-nav-links{display:flex;gap:22px;align-items:center;font-size:13px;font-weight:600;letter-spacing:.3px}
.sa-nav-links a{color:rgba(255,255,255,.82);text-decoration:none}
.sa-nav-links a:hover{color:#fff}
.sa-nav-links a.current{color:#fff;border-bottom:2px solid var(--brand-accent);padding-bottom:2px}
.sa-nav-cta{background:var(--brand-accent);color:#fff !important;padding:8px 16px;border-radius:var(--radius-soft);
  font-weight:600;text-decoration:none}
.sa-nav-cta:hover{background:var(--brand-accent-strong)}
.themebtn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;
  padding:6px 12px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap}
.themebtn:hover{background:rgba(255,255,255,.1)}

@media(max-width:680px){
  .sa-nav-links{display:none}
  .sa-toolid{padding-left:12px}
}

/* ═══ SHARED FOOTER ═══════════════════════════════════════════════════════
   <footer class="sa-foot"> … </footer>  — same disclaimer everywhere.
   ═════════════════════════════════════════════════════════════════════════ */
.sa-foot{background:var(--brand-header);color:rgba(255,255,255,.7);padding:40px 24px 28px;margin-top:30px}
.sa-foot-inner{max-width:var(--container);margin:0 auto}
.sa-foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-start;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:20px}
.sa-foot-tag{font-size:13px;max-width:380px;line-height:1.6;margin-top:12px;color:rgba(255,255,255,.7)}
.sa-foot-links{display:flex;gap:30px;font-size:13px}
.sa-foot-links a{color:rgba(255,255,255,.75);text-decoration:none}
.sa-foot-links a:hover{color:#fff}
.sa-foot-legal{font-size:11px;line-height:1.6;color:rgba(255,255,255,.5)}
.sa-foot-legal strong{color:rgba(255,255,255,.7)}
@media(max-width:680px){.sa-foot-top{flex-direction:column}}

/* ═══ SHARED TAB BAR (.fieldtabs / .ftab) ═══════════════════════════════════
   Used by GDU (field tabs) and Fertility (function tabs). One definition so
   both tools look identical. Underline-style bar reads cleanly even with 7 tabs. */
.fieldtabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px;padding-bottom:2px;
  border-bottom:1px solid var(--border,#dde4d8);align-items:center}
.ftab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px 8px 0 0;
  border:1px solid transparent;border-bottom:none;background:transparent;
  color:var(--text-body,#5d6b5f);font-size:13px;font-weight:600;cursor:pointer;
  transition:color .15s,background .15s;position:relative;top:1px}
.ftab:hover:not(.active){color:var(--brand-deep-soft,#2f6b3d);background:rgba(143,190,111,.10)}
.ftab.active{background:var(--surface-card,#fff);color:var(--brand-header,#142412);
  border-color:var(--border,#dde4d8);border-bottom:1px solid var(--surface-card,#fff)}
[data-theme="dark"] .ftab.active{background:var(--surface-card,#1b2016);
  color:var(--brand-tint,#8fbe6f);border-color:#2c3326;border-bottom-color:var(--surface-card,#1b2016)}
.ftab.add{font-weight:700;color:var(--leaf-400,#6fa84f);border-style:dashed;border-bottom-style:dashed}
.ftab.add.active{background:var(--surface-card,#fff);border-color:var(--brand-tint,#8fbe6f)}
.ftab .x{font-size:13px;opacity:.6;line-height:1}
.ftab .x:hover{opacity:1}
@media(max-width:680px){.ftab{padding:8px 11px;font-size:12px}}