/* AFRERA design system — extracted from the AFRERA / NE Harvest platform (v43 "paddy · forest · turmeric"
   palette and Bricolage/Public Sans type, v9 Cormorant accents, design-canvas module layouts).
   Loaded LAST on every page: re-skins shared primitives without changing markup or behaviour.
   Fonts are self-hosted (SIL OFL, see /fonts/OFL-*.txt) so the strict CSP and visitor privacy hold. */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/public-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/public-sans-latin-600-normal.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/public-sans-latin-700-normal.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}

:root{/* mut, turmeric-ink, ok, warn darkened 2-7% (2026-10-18) so AA 4.5:1 holds on paddy, paddy2, white AND mist */
 --af-paddy:#F7F3E6;--af-paddy2:#EFE9D6;--af-ink:#1C2B26;--af-ink2:#3D4F48;--af-mut:#5B6B63;
 --af-forest:#1E4D3B;--af-forestd:#123528;--af-turmeric:#C9930F;--af-turmeric-ink:#876100;--af-turms:#F0DFAE;
 --af-chilli:#A62B1F;--af-indigo:#26355E;--af-mist:#E4EDE6;--af-line:#DCD4BE;--af-white:#fff;
 --af-ok:#1D7644;--af-warn:#A64E09;--af-bad:#A62B1F;
 --af-forest-fill:#1E4D3B;--af-forest-light:#2B6A50;--af-on-turmeric:#1C2B26;--af-on-dark:#D5E5DA;--af-on-dark-mut:#BFD6C7;
 --af-focus:#1469A8;--af-focus-on-dark:#F0DFAE;
 --af-sh:0 8px 24px rgba(28,43,38,.09);--af-shl:0 18px 46px rgba(28,43,38,.15);--af-r:13px;--af-rs:9px;
 --af-fd:"Bricolage Grotesque",Georgia,serif;--af-fb:"Public Sans",system-ui,-apple-system,"Segoe UI","Nirmala UI","Noto Sans Devanagari",sans-serif;
 --af-fm:"IBM Plex Mono",ui-monospace,Consolas,monospace;--af-fs:"Cormorant Garamond",Georgia,serif;
 --af-loom:repeating-linear-gradient(135deg,var(--af-chilli) 0 9px,var(--af-ink) 9px 12px,var(--af-turmeric) 12px 21px,var(--af-ink) 21px 24px,var(--af-forest-fill) 24px 33px,var(--af-ink) 33px 36px);
}
/* ── Base ───────────────────────────────────────────────────────────── */
html body,html body.surface{font-family:var(--af-fb);background:var(--af-paddy);color:var(--af-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body :is(h1,h2,h3,h4){font-family:var(--af-fd);letter-spacing:-.012em;line-height:1.13}
/* Headings keep their section's colour (light on dark heroes, ink on paper); accents adapt to it. */
body :is(h1 i,h2 i,h1 em,h2 em){font-family:var(--af-fs);font-style:italic;font-weight:500;color:color-mix(in srgb,currentColor 45%,var(--af-turmeric));letter-spacing:0}
body code,body .hash{font-family:var(--af-fm)}
body a{text-underline-offset:3px}
:focus-visible{outline:3px solid var(--af-focus);outline-offset:2px}
:is(.surface-header,.surface-hero,.account-hero,.surface-footer,body>footer,.footer,.app .sidebar,.hero-banner,.detail-panel,.handoff) :focus-visible{outline-color:var(--af-focus-on-dark)}
.skip,.skip-link{background:var(--af-turmeric);color:var(--af-on-turmeric)}

/* ── Header (pine two-row bar with handloom stripe) ─────────────────── */
.surface-header,body .topbar:not(.main .topbar){background:var(--af-forestd);color:var(--af-on-dark);border:0;position:sticky;top:0;z-index:50;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.surface-header::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:var(--af-loom);opacity:.92}
.surface-header .surface-logo strong,.surface-header .surface-logo small{color:#fff}
.surface-header .surface-logo small{color:var(--af-on-dark-mut);letter-spacing:.14em}
.surface-header .logo-plate{background:var(--af-turmeric);color:var(--af-on-turmeric);border-radius:10px;font-family:var(--af-fd);font-weight:800}
.surface-header nav a{color:#E3EEE6;font-weight:600}
.surface-header nav a:hover,.surface-header nav a[aria-current=page]{color:#fff;text-decoration:underline;text-decoration-color:var(--af-turmeric);text-decoration-thickness:3px}
.surface-header .mode{background:transparent;border:1px solid rgba(240,223,174,.45);color:var(--af-turms);border-radius:999px;font-size:11px;letter-spacing:.08em}

/* ── Hero ───────────────────────────────────────────────────────────── */
.surface-hero,.account-hero{background:linear-gradient(135deg,var(--af-forestd) 0%,var(--af-forest-fill) 62%,var(--af-forest-light) 100%);color:var(--af-on-dark);border-radius:0 0 var(--af-r) var(--af-r);margin-top:8px;position:relative;overflow:hidden}
.surface-hero::before,.account-hero::before{content:"";position:absolute;inset:auto -10% -40px -10%;height:140px;opacity:.18;pointer-events:none;
 background:radial-gradient(120% 60px at 50% 100%,var(--af-turms) 0 40%,transparent 41%),radial-gradient(110% 80px at 30% 120%,#9CC3A9 0 45%,transparent 46%),radial-gradient(90% 90px at 75% 130%,#9CC3A9 0 45%,transparent 46%)}
.surface-hero :is(h1,h2),.account-hero :is(h1,h2){color:#fff}
.surface-hero :is(h1 i,h1 em),.account-hero :is(h1 i,h1 em){color:var(--af-turms)}
.surface-hero p,.account-hero p,.surface-hero .caption{color:var(--af-on-dark)}
.surface-hero .kicker,.account-hero .kicker{color:var(--af-turms)}

/* Hill-terrace illustration replaces generic hero ornaments (NE hill farming, drawn inline: no network) */
.surface-hero .hero-art{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20600%20420%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22s%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23F0DFAE%22%20stop-opacity=%22.55%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23F0DFAE%22%20stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx=%22430%22%20cy=%22120%22%20r=%2258%22%20fill=%22%23F0DFAE%22%20opacity=%22.9%22/%3E%3Ccircle%20cx=%22430%22%20cy=%22120%22%20r=%2296%22%20fill=%22url%28%23s%29%22%20opacity=%22.5%22/%3E%3Cpath%20d=%22M0%20250%20Q120%20170%20230%20215%20T470%20190%20T600%20210%20V420%20H0Z%22%20fill=%22%232B6A50%22/%3E%3Cpath%20d=%22M0%20290%20Q140%20220%20270%20262%20T600%20250%20V420%20H0Z%22%20fill=%22%23245C45%22/%3E%3Cg%20fill=%22none%22%20stroke=%22%239CC3A9%22%20stroke-opacity=%22.55%22%20stroke-width=%222%22%3E%3Cpath%20d=%22M20%20318%20Q160%20262%20300%20300%20T590%20288%22/%3E%3Cpath%20d=%22M10%20342%20Q160%20290%20310%20326%20T600%20316%22/%3E%3Cpath%20d=%22M0%20366%20Q170%20318%20320%20352%20T600%20344%22/%3E%3C/g%3E%3Cpath%20d=%22M0%20330%20Q150%20280%20300%20318%20T600%20305%20V420%20H0Z%22%20fill=%22%231E4D3B%22/%3E%3Cpath%20d=%22M0%20372%20Q170%20330%20330%20362%20T600%20356%20V420%20H0Z%22%20fill=%22%23123528%22/%3E%3Cg%20fill=%22%23C9930F%22%3E%3Ccircle%20cx=%22118%22%20cy=%22300%22%20r=%224%22/%3E%3Ccircle%20cx=%22140%22%20cy=%22296%22%20r=%223%22/%3E%3Ccircle%20cx=%22380%22%20cy=%22292%22%20r=%224%22/%3E%3Ccircle%20cx=%22402%22%20cy=%22289%22%20r=%223%22/%3E%3Ccircle%20cx=%22520%22%20cy=%22300%22%20r=%223%22/%3E%3C/g%3E%3Cg%20stroke=%22%23F0DFAE%22%20stroke-opacity=%22.8%22%20stroke-width=%222%22%20fill=%22none%22%3E%3Cpath%20d=%22M250%20120%20q8%20-8%2016%200%20q8%20-8%2016%200%22/%3E%3Cpath%20d=%22M300%2090%20q6%20-6%2012%200%20q6%20-6%2012%200%22/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;border-radius:var(--af-r);border:1px solid rgba(240,223,174,.22);min-height:280px}
.surface-hero .hero-art>:not(.art-label),body.surface .surface-hero .hero-art::before,body.surface .surface-hero .hero-art::after{display:none}
.surface-hero .hero-art .art-label{background:rgba(18,53,40,.72);color:var(--af-turms);border:1px solid rgba(240,223,174,.35)}
/* ── Labels ─────────────────────────────────────────────────────────── */
.kicker,.section-tag,.eyebrow,.overline,.tiny-label,.r-overline{font-family:var(--af-fb);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--af-turmeric-ink)}
.section-title h2,.section-head h2,.intro-block h2,.section-heading h2{font-size:clamp(24px,3vw,34px)}

/* ── Buttons ────────────────────────────────────────────────────────── */
.hero-button,.primary-btn,.prime-cta,.button-dark,.btn.primary,body button[type=submit]{background:var(--af-turmeric);color:var(--af-on-turmeric);border:0;border-radius:11px;font-weight:700;box-shadow:0 6px 16px rgba(201,147,15,.28);transition:transform .14s,box-shadow .14s}
.hero-button:hover,.primary-btn:hover,.prime-cta:hover,.button-dark:hover,body button[type=submit]:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(201,147,15,.34)}
.outline-btn,.secondary-btn,.button-outline,.button-light,.text-btn{border:1.5px solid var(--af-forest);color:var(--af-forest);background:var(--af-white);border-radius:11px;font-weight:700}
body button:not([class]){border-radius:10px;border:1.5px solid var(--af-forest);background:var(--af-white);color:var(--af-forest);font-weight:700;padding:.5rem .9rem}
body button:not([class]):hover{background:var(--af-mist)}

/* ── Cards & panels ─────────────────────────────────────────────────── */
.focus-card,.expert-card,.account-panel,.panel,.cf-card,.metric-card,.module-card,.feature-card,.form-panel,.result-panel,.intent-card,.journey-board,.farmer-value-panel,.shared-eff-connection,.flow-grid>*,.experts-grid>*{
 background:var(--af-white);border:1px solid var(--af-line);border-radius:var(--af-r);box-shadow:var(--af-sh)}
.service-doorways>a:hover,.intent-card:hover,.module-card:hover,.feature-card:hover{border-color:var(--af-turmeric);box-shadow:var(--af-shl);transform:translateY(-2px)}
.card-num,.step-num{font-family:var(--af-fm);color:var(--af-turmeric-ink)}
.metrics-ribbon{background:var(--af-white);border:1px solid var(--af-line);border-radius:var(--af-r);box-shadow:var(--af-sh)}
.metrics-ribbon strong,.metric-value,.stats strong{font-family:var(--af-fd);color:var(--af-forest)}

/* ── Notes & alerts (design-canvas "value leakage" callout) ─────────── */
.release-note,.account-alert,.disclosure,.note{background:#FEF3D6;border:1px solid #F0D58A;border-left:5px solid var(--af-turmeric);border-radius:var(--af-rs);color:#5A3D00}
.release-note strong{color:#7A4B00}

/* ── Forms ──────────────────────────────────────────────────────────── */
body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1.5px solid var(--af-line);border-radius:var(--af-rs);background:var(--af-white);color:var(--af-ink);font-family:var(--af-fb)}
body :is(input,select,textarea):focus{border-color:var(--af-forest);box-shadow:0 0 0 3px rgba(30,77,59,.15)}
body label,body legend{font-weight:600}

/* ── Tables ─────────────────────────────────────────────────────────── */
body table th{background:var(--af-paddy2);color:var(--af-ink2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
body table td,body table th{border-color:var(--af-line)}
body table tbody tr:hover{background:#FBF8EE}

/* ── Badges ─────────────────────────────────────────────────────────── */
.cf-badge,.vcb-badge,.module-stage,.live-tag,.gate-state{border-radius:999px;font-weight:700}
.cf-complete,.cf-live,.cf-ok,.vcb-living{color:var(--af-ok)}.cf-gated,.vcb-partial{color:var(--af-turmeric-ink)}.cf-incomplete,.cf-not-built,.cf-fail,.vcb-missing{color:var(--af-bad)}

/* ── Footer ─────────────────────────────────────────────────────────── */
.surface-footer,body>footer,.footer{background:var(--af-forestd);color:var(--af-on-dark-mut);border-top:8px solid transparent;border-image:var(--af-loom) 8}
.surface-footer a,body>footer a,.footer a{color:var(--af-turms)}
.surface-footer strong,body>footer strong{color:#fff}

/* ── Enterprise console (index app shell) ───────────────────────────── */
.app .sidebar{background:var(--af-forestd);border-right:0}
.app .sidebar .nav-item{color:var(--af-on-dark)}.app .sidebar .nav-item:hover,.app .sidebar .nav-item.active{background:rgba(240,223,174,.12);color:#fff}
.app .sidebar .sidebar-label{color:var(--af-turms)}.app .sidebar .brand-name{color:#fff}.app .sidebar .brand-name small{color:var(--af-on-dark-mut)}
.brand-mark{background:var(--af-forestd);color:var(--af-turms)}.brand-name{color:var(--af-forestd);font-family:var(--af-fd)}
.main .topbar{background:var(--af-white);border-bottom:1px solid var(--af-line);color:var(--af-ink)}
.hero-banner{background:linear-gradient(120deg,var(--af-forestd),var(--af-forest-fill) 60%,var(--af-forest-light))}
.hero-copy h2 i{color:var(--af-turms);font-family:var(--af-fs)}
.filter-pill.active,.journey-option.active{background:var(--af-forest-fill);border-color:var(--af-forest-fill)}
.detail-panel{background:var(--af-forestd)}
.bar-fill{background:var(--af-forest-fill)}

/* ── Dark theme: OPT-IN via <html data-theme="dark"> (design-system production pass 2026-10-17).
   Not automatic: later layers (ux-quality, elevated-ui, client-experiences) are light-only with literal light
   surfaces, so an OS-driven flip produced mixed pages. Brand/status values from the v43 prototype (accepted). */
[data-theme="dark"]{--af-paddy:#14201B;--af-paddy2:#1B2A24;--af-ink:#EEF3EE;--af-ink2:#C9D6CD;--af-mut:#A9B8AE;--af-line:#2E4239;--af-white:#1A2822;--af-mist:#22362D;--af-forest:#6FD199;--af-ok:#6ED79A;--af-warn:#F0B265;--af-bad:#F2998E;--af-chilli:#EE9086;--af-turmeric-ink:#F0C36A;--af-focus:#F0C36A}
[data-theme="dark"] :is(.release-note,.account-alert,.disclosure,.note){background:#2E2610;border-color:#5C4A15;color:#F3E2B2}
[data-theme="dark"] body table tbody tr:hover{background:#1F3029}
@media (max-width:640px){.surface-header::after{height:6px;bottom:-6px}}
@media print{.surface-header,.surface-footer,body>footer{background:none;color:#000}.surface-header::after{display:none}}
/* ── Spacing fixes for shared panels ─────────────────────────────── */
.account-panel{padding:clamp(18px,3vw,32px)}
.account-hero .kicker,.surface-hero .kicker{display:inline-block;width:auto}
.vcb-sr,.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Notice panels: headings follow the panel's text colour */
.notice :is(h2,h3){color:#F4F1E4}

/* WebSuite site directory */
.site-directory{padding:clamp(32px,5vw,64px) clamp(16px,4vw,48px);border-top:1px solid var(--af-line,#DCD4BE)}
.site-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:24px;margin-top:20px}
.site-dir-col h3{font-size:1rem;margin:0 0 8px}.site-dir-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.site-dir-col a{text-decoration:none}.site-dir-col a:hover{text-decoration:underline}

/* "Finish this" hand-off (handoff.mjs) */
.handoff{margin:32px clamp(16px,4vw,48px);padding:22px clamp(16px,3vw,28px);border-radius:16px;background:#123528;color:#F4F1E4}
.handoff h2{color:#F4F1E4;margin:0 0 6px}.handoff p{margin:0 0 14px;opacity:.9}
.handoff ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.handoff li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.handoff a{color:#E8C25A;font-weight:700;text-decoration:none}.handoff a:hover,.handoff a:focus-visible{text-decoration:underline}.handoff span{font-size:.85rem;opacity:.85}
/* Primary-button label wins over page link colours (2026-10-18 audit: forest text on turmeric). */
a.btn.primary,button.btn.primary{color:var(--af-on-turmeric)}