/* The product's look, for every screen a brand owner, importer, reviewer or shopper uses.
 *
 * Taken from Wesley's app concept ("Know your food. Find your better."): a soft off-white
 * ground, deep forest-green ink, lime pill buttons, the leaf in a scan frame, rounded
 * white cards. The consumer app was built to that concept; Pro takes the same family in a
 * working-desk layout so both read as one company's product.
 *
 * Loaded after each page's own styles. It re-points the page's colour tokens at the
 * product palette rather than restyling each screen, so a screen's own layout is kept.
 * Internal briefing pages use /brief/internal.css instead, which is deliberately unlike this.
 */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap");

html:root:not([data-fw]){
  --ink:#12261d; --ink2:#2f4f3f; --mute:#5b7064;
  --line:#e2e5dd; --line2:#eef0ea;
  --paper:#f4f4ef; --card:#ffffff; --tint:#eef3ea;
  --rail:#12261d; --railink:#eef3ea; --railmute:#a9bdb1;
  --leaf:#1f7a4d; --leaf-s:#e4f3ea;
  --lime:#9fdb63; --lime-ink:#12261d;
  --f:"Inter",-apple-system,system-ui,sans-serif;
  --f-body:"Inter",-apple-system,system-ui,sans-serif;
  --f-dis:"Bricolage Grotesque","Inter",-apple-system,system-ui,sans-serif;
  --focus:#1f7a4d;
}
@media (prefers-color-scheme:dark){ html:root:not([data-theme=light]){
  --ink:#e8efe9; --ink2:#b6c9bd; --mute:#9cb0a3;
  --line:#2a352e; --line2:#202a24;
  --paper:#0f1613; --card:#18211c; --tint:#16211b;
  --rail:#0b110e; --railink:#e8efe9; --railmute:#8fa597;
  --leaf:#5fc48c; --leaf-s:#163323;
  --lime:#9fdb63; --lime-ink:#0f1613; --focus:#9fdb63;
}}

body{font-family:var(--f-body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,.ti,.lname,.verdict,.brandbar b,.bb b{font-family:var(--f-dis);letter-spacing:-.02em}
h1{font-weight:800}

/* The sidebars become the forest-green desk rail. */
.rail{background:var(--rail)!important;color:var(--railink)}
.rail .railh,.rail .railfoot,.rail .m,.rail small,.rail .pm,.bb span,.brandbar span{color:var(--railmute)!important}

/* The mark: Wesley's leaf in a scan frame, before the account name in every rail. */
.brandbar,.bb{position:relative;padding-left:56px!important;min-height:34px}
.brandbar .dot{display:none}
.brandbar::before,.bb::before{content:"";position:absolute;left:16px;top:0;width:30px;height:30px;
  background:no-repeat center/30px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231f7a4d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 10V5a2 2 0 0 1 2-2h5M22 3h5a2 2 0 0 1 2 2v5M29 22v5a2 2 0 0 1-2 2h-5M10 29H5a2 2 0 0 1-2-2v-5'/%3E%3Cpath d='M10.5 21.5c0-6.5 4.5-10.5 11-11-0.5 6.5-4.5 11-11 11zM10.5 21.5l5-5'/%3E%3C/svg%3E")}
.rail .brandbar::before,.rail .bb::before{left:16px;top:0;width:30px;height:30px;
  background:no-repeat center/30px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%239fdb63' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 10V5a2 2 0 0 1 2-2h5M22 3h5a2 2 0 0 1 2 2v5M29 22v5a2 2 0 0 1-2 2h-5M10 29H5a2 2 0 0 1-2-2v-5'/%3E%3Cpath d='M10.5 21.5c0-6.5 4.5-10.5 11-11-0.5 6.5-4.5 11-11 11zM10.5 21.5l5-5' stroke='%239fdb63'/%3E%3C/svg%3E")}

/* Buttons: the primary action is the lime pill from the concept; the rest are quiet. */
.btn,button.btn,.acts button{border-radius:999px!important;font-family:var(--f-body)}
.btn.p,.btn.cta,.acts button.primary{background:var(--lime)!important;color:var(--lime-ink)!important;border-color:var(--lime)!important}
.btn.p:hover,.acts button.primary:hover{filter:brightness(.95)}
.btn:disabled,.btn.p:disabled{opacity:.45}
:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px}

/* Cards: rounder and whiter, as in the concept. */
.panel,.card,.sec,.lane,.job,.ph+*{border-radius:16px}
.panel,.sec{border-color:var(--line)}

/* The account bar (store.js) in the product's colours. */
#fw-account{background:var(--rail)!important;font-family:var(--f-body)!important}
#fw-account button{background:var(--lime)!important;color:var(--lime-ink)!important;font-weight:600}
#fw-login .go{background:var(--lime)!important;color:var(--lime-ink)!important}
#fw-login .box{border-radius:20px!important;font-family:var(--f-body)}
#fw-login h2{font-family:var(--f-dis)}

/* Rail lists (products, queues): flat rows on the green rail, the current one marked in lime. */
.rail button.prod,.rail button.q{background:transparent;color:var(--railink);border:0;border-left:3px solid transparent;width:100%;text-align:left;font:inherit}
.rail button.prod:hover,.rail button.q:hover{background:rgba(159,219,99,.08)}
.rail button.prod[aria-current=true],.rail button.q[aria-current=true]{background:rgba(159,219,99,.16);border-left-color:var(--lime)}