/* One token set for every page (owner, 2026-10-09, WP2 condition 1; ADR-092).
   Every colour any page draws comes from here - light and dark both - so a
   page never carries its own palette. Brand and levels follow the sign-in
   page (the reference level): forest green, brass, a warm off-white.
   Dark: from the system (prefers-color-scheme) unless the page says
   data-theme="light" or "dark". No external request. */
:root {
  --nf-bg: #F6F4EF;
  --nf-surface: #FFFFFF;
  --nf-surface-2: #F2F5F2;
  --nf-surface-3: #E7EEE9;
  --nf-ink: #101814;
  --nf-ink-2: #3F4F46;
  --nf-ink-3: #66756C;
  --nf-line: #E0E6E1;
  --nf-line-strong: #C3D1C8;
  --nf-brand: #143A2A;
  --nf-brand-hover: #0F2E21;
  --nf-brand-2: #1B6A4B;
  --nf-accent: #155B40;
  --nf-brand-3: #5FB58C;
  --nf-brand-soft: #E2F1E8;
  --nf-brand-soft-2: #C9E6D6;
  --nf-on-brand: #FFFFFF;
  --nf-gold: #B98942;
  --nf-gold-soft: #F6E7C8;
  --nf-on-gold: #2A1E05;
  --nf-warn-bg: #FBF3E6;
  --nf-warn-ink: #7A5212;
  --nf-warn-line: #E4C48F;
  --nf-danger: #A92D2D;
  --nf-danger-bg: #FBEAEA;
  --nf-danger-line: #EDC3C3;
  --nf-ok-bg: #EEF5F0;
  --nf-ok-ink: #1C4A35;
  --nf-info-bg: #E1F0FD;
  --nf-info-ink: #155FA0;
  --nf-hero-1: #0D3B30;
  --nf-hero-2: #147A57;
  --nf-glass: rgba(255, 255, 255, .92);
  --nf-shadow-sm: 0 1px 2px rgba(16, 24, 20, .05), 0 8px 24px -14px rgba(16, 24, 20, .14);
  --nf-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 12px 32px -12px rgba(16, 24, 20, .12);
  --nf-ring: rgba(20, 58, 42, .18);
  --nf-radius-sm: 10px;
  --nf-radius: 14px;
  --nf-radius-lg: 20px;
  /* Roles: --nf-brand / --nf-brand-2 are fills (buttons, chips) with
     --nf-on-brand on them; --nf-accent is green TEXT on a surface. */
  /* Persian and Arabic: Vazirmatn only (it carries Latin digits and codes
     too). The Latin set (Inter) is linked only on English/Malay/Indonesian
     pages - never on a Persian page (WP2 condition 2). */
  --nf-font-fa: Vazirmatn, Tahoma, Arial, sans-serif;
  --nf-font-latin: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Vazirmatn before the generic monospace: a mono face has no Persian, and the generic
     fallback drew Persian letters unjoined («م د ا ر ک»; desk phase 1, owner 2026-10-12) */
  --nf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Vazirmatn, monospace;
  --nf-font: var(--nf-font-fa);
  --nf-tabbar-h: 64px;
  color-scheme: light;
}
:root:lang(en), :root:lang(id), :root:lang(ms), :root:lang(hi) { --nf-font: var(--nf-font-latin); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nf-bg: #0B1511;
    --nf-surface: #111E18;
    --nf-surface-2: #15241D;
    --nf-surface-3: #1B2D25;
    --nf-ink: #EDF2EE;
    --nf-ink-2: #B9C7BE;
    --nf-ink-3: #8C9B92;
    --nf-line: #1F3128;
    --nf-line-strong: #2E4539;
    --nf-brand: #1E5A40;
    --nf-brand-hover: #256B4C;
    --nf-brand-2: #2A7553;
    --nf-accent: #7FD0A8;
    --nf-brand-3: #7FD8B0;
    --nf-brand-soft: #173326;
    --nf-brand-soft-2: #1E4232;
    --nf-on-brand: #F3EFE4;
    --nf-gold: #D9B074;
    --nf-gold-soft: #3A2E18;
  --nf-on-gold: #2A1E05;
    --nf-on-gold: #2A1E05;
    --nf-warn-bg: #2A2112;
    --nf-warn-ink: #F1D7A8;
    --nf-warn-line: #6B5326;
    --nf-danger: #F09A9A;
    --nf-danger-bg: #3A1A1A;
    --nf-danger-line: #6B2C2C;
    --nf-ok-bg: #15281F;
    --nf-ok-ink: #CFE6D8;
    --nf-info-bg: #12243A;
    --nf-info-ink: #9CC8F2;
    --nf-hero-1: #0F2E21;
    --nf-hero-2: #1A5A40;
    --nf-glass: rgba(17, 30, 24, .9);
    --nf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .6);
    --nf-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
    --nf-ring: rgba(62, 154, 110, .28);
    color-scheme: dark;
  }
}
:root[data-theme="dark"],
.nf-theme-dark {  /* a page that is dark by design (the buyer desk) */
  --nf-bg: #0B1511;
  --nf-surface: #111E18;
  --nf-surface-2: #15241D;
  --nf-surface-3: #1B2D25;
  --nf-ink: #EDF2EE;
  --nf-ink-2: #B9C7BE;
  --nf-ink-3: #8C9B92;
  --nf-line: #1F3128;
  --nf-line-strong: #2E4539;
  --nf-brand: #1E5A40;
  --nf-brand-hover: #256B4C;
  --nf-brand-2: #2A7553;
  --nf-accent: #7FD0A8;
  --nf-brand-3: #7FD8B0;
  --nf-brand-soft: #173326;
  --nf-brand-soft-2: #1E4232;
  --nf-on-brand: #F3EFE4;
  --nf-gold: #D9B074;
  --nf-gold-soft: #3A2E18;
  --nf-on-gold: #2A1E05;
  --nf-warn-bg: #2A2112;
  --nf-warn-ink: #F1D7A8;
  --nf-warn-line: #6B5326;
  --nf-danger: #F09A9A;
  --nf-danger-bg: #3A1A1A;
  --nf-danger-line: #6B2C2C;
  --nf-ok-bg: #15281F;
  --nf-ok-ink: #CFE6D8;
  --nf-info-bg: #12243A;
  --nf-info-ink: #9CC8F2;
  --nf-hero-1: #0F2E21;
  --nf-hero-2: #1A5A40;
  --nf-glass: rgba(17, 30, 24, .9);
  --nf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .6);
  --nf-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
  --nf-ring: rgba(62, 154, 110, .28);
  color-scheme: dark;
}

/* Moving between pages (WP2, ADR-092): the page stays until the next one has
   painted, then the two cross-fade - no white flash between pages. Browsers
   without view transitions simply navigate as before. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* the thin line that says a tap was heard (js/nf-nav.js) */
.nf-nav-progress { position: fixed; inset-inline: 0; top: 0; z-index: 10000; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--nf-brand-2), var(--nf-gold)); transform: scaleX(0); transform-origin: right; opacity: 0; }
html[dir="ltr"] .nf-nav-progress { transform-origin: left; }
.nf-nav-progress.is-on { opacity: 1; animation: nf-nav-progress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nf-nav-progress { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) { .nf-nav-progress.is-on { animation: none; transform: scaleX(.6); } }

/* The app shell every role shares (WP2, ADR-092): the bottom bar on phones.
   Kept in this file so a page loads one shared sheet, not two. */
.nf-tabbar{display:none}
@media (max-width: 900px){
  body.has-tabs{padding-bottom:calc(var(--nf-tabbar-h) + env(safe-area-inset-bottom, 0px))}
  .nf-tabbar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    min-height:var(--nf-tabbar-h);padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background:var(--nf-glass);border-top:1px solid var(--nf-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .nf-tabbar__tab{display:grid;justify-items:center;align-content:center;gap:3px;min-height:52px;border-radius:var(--nf-radius-sm);
    color:var(--nf-ink-3);text-decoration:none;font-family:var(--nf-font);font-size:11.5px;font-weight:700;-webkit-tap-highlight-color:transparent}
  .nf-tabbar__tab[aria-current="page"]{color:var(--nf-accent)}
  .nf-tabbar__tab[aria-current="page"] .nf-tabbar__icon{background:var(--nf-brand-soft)}
  .nf-tabbar__tab:focus-visible{outline:3px solid var(--nf-ring);outline-offset:-3px}
  .nf-tabbar__icon{position:relative;display:grid;place-items:center;width:44px;height:28px;border-radius:999px}
  .nf-tabbar__icon svg{width:22px;height:22px}
  .nf-tabbar__count{position:absolute;top:-4px;inset-inline-end:2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
    background:var(--nf-danger);color:var(--nf-on-brand);font-size:10.5px;line-height:18px;text-align:center}
  /* the sticky page buttons sit above the bar, never under it */
  body.has-tabs .rp-sticky-submit{bottom:calc(var(--nf-tabbar-h) + 10px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion: no-preference){.nf-tabbar__tab{transition:color .15s ease}}

/* an icon inside text or a button (templates/_nf_icon.html) - never an emoji */
.nf-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
/* the grower's floating «ثبت بار جدید»: on a phone the bottom bar already has «ثبت بار» */
@media (max-width: 900px) { body.has-tabs .od-dock { display: none; } }

/* the one separator (owner, 2026-10-12): a thin line drawn here, never a dash or a dot beside a number */
.nf-sep { display:inline-block;width:1px;height:.85em;margin:0 .45em;vertical-align:-.08em;background:currentColor;opacity:.45; }