/* phytotron.com skin for a public crop hub (export_public.py appends it after the hub's own CSS).
   Mirrors the site's Web-design system v1.1 (phytotron-website/site/src/app/tokens.css + globals.css):
   navy is the default ground, paper the reading ground, and the choice is the site's own (localStorage
   "pt-ground", same origin), so a visitor arriving from phytotron.com keeps the ground they picked.
   The hub's own dark/light themes carry the two grounds: navy -> data-theme="dark", paper -> "light". */

/* ---------- grounds ---------- */
:root, :root[data-theme="light"]{
  --paper:#F0F4EF; --surface:#F7FAF6; --sunk:#E4EBE2; --ink:#12241A; --ink-2:#3E4F42; --ink-3:#4E6054;
  --rule:#C8D3C6; --rule-2:#9FB09C; --green:#098E19; --green-d:#0B5A16; --green-t:#D9EBD8;
  --navy:#102033; --chip:#E4EBE2; --btn:#098E19; --btn-ink:#F0F4EF; --lift:none;
  --pt-hero-wash:240 244 239; --pt-hero-ink:#12241A; --pt-hero-ink2:#3E4F42; --pt-accent:#0B5A16;
}
:root[data-theme="dark"]{
  --paper:#102033; --surface:#1A3049; --sunk:#162a41; --ink:#F0F4EF; --ink-2:#D3DEE7; --ink-3:#A8BACD;
  --rule:#22344B; --rule-2:#324864; --green:#3FCC51; --green-d:#3FCC51; --green-t:rgba(63,204,81,.12);
  --navy:#0b1726; --navy-ink:#F0F4EF; --stage:#0b1726; --chip:#22344B; --btn:#098E19; --btn-ink:#F0F4EF; --lift:none;
  --copper:#D08A54; --copper-d:#E0A06A;
  --pt-hero-wash:16 32 51; --pt-hero-ink:#F0F4EF; --pt-hero-ink2:#D3DEE7; --pt-accent:#3FCC51;
  color-scheme:dark;
}
/* the hub follows the OS when no data-theme is set; the skin always sets one, so neutralise the OS branch */
@media (prefers-color-scheme: dark){:root[data-theme="light"]{color-scheme:light}}

/* ---------- type: the site sets display type in Inter Tight, tight and heavy; mono for labels ---------- */
:root{--serif:'Inter Tight','Noto Sans Devanagari','Noto Sans Kannada',system-ui,sans-serif}
body{font-family:var(--sans)}
.hero h1{font-weight:600;letter-spacing:-.035em;font-size:clamp(40px,6vw,74px);line-height:1}
html:not(:lang(en)) .hero h1{letter-spacing:0;line-height:1.2;font-size:clamp(36px,5.4vw,64px)}
h2{font-weight:600;letter-spacing:-.025em;font-size:clamp(26px,3.2vw,40px)}
html:not(:lang(en)) h2{letter-spacing:0}

/* ---------- shape: the site is square. Pills, cards, panels and media lose their radius; dots stay round ---------- */
.dl,.btn,.chip,.tchip,.seg,.seg button,.langs,.langs button,.langsel,.cropsel,select,input[type="date"],
.callout,.contact,.costbox,.dcard,.doc,.empty,.fthumb,.fthumb img,.fthumb .ph,.next,.panel,.player,.poster img,.prod,
.pv,.quick,.quick .dl,.rulebox,.stagebox,.verdict,.tbar,#heroimg,.thumb,.cardrow,.topnav a,.secnav a,.copy,.badge,.tag,
.ptag,.fprods span,.plang img,dialog#zoom img,#toast,.lint{border-radius:0!important}
.panel,.quick,.next,.contact,.costbox,.dcard,.doc,.prod,.rulebox,.verdict,.stagebox,.fthumb,.callout{box-shadow:none!important;border:1px solid var(--rule)}

/* ---------- buttons: the site's key CTA (green, square, mono caps) and its outline sibling ---------- */
.dl,.btn{font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;background:var(--btn);color:var(--btn-ink);transition:background .2s,box-shadow .2s,transform .2s}
.dl:hover,.btn:hover{background:#0AA61D;box-shadow:0 0 0 3px rgba(9,142,25,.28)}
.dl.ghost,.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.dl.ghost:hover,.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--green);color:var(--green-d)}
html:not(:lang(en)) :is(.dl,.btn){font:600 14px/1.1 var(--sans);letter-spacing:0;text-transform:none}
.chip[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--green);color:var(--btn-ink)}
:root[data-theme="dark"] .chip[aria-pressed="true"],:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:#098E19;color:#F0F4EF}
a{color:var(--green-d)}

/* ---------- site nav (replaces the hub bar's look; the hub's language pills stay, restyled) ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:40;background:rgb(var(--pt-hero-wash)/.92);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.top .bar{max-width:none;height:64px;padding:0 clamp(16px,4vw,40px);gap:clamp(12px,2vw,26px)}
.top .lock,.top .cropsel,.top .topnav{display:none!important}
.pt-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.pt-leaf{display:inline-block;width:36px;height:22px;background:var(--pt-accent);-webkit-mask:url(/assets/brand/phytotron-logo.svg) center/contain no-repeat;mask:url(/assets/brand/phytotron-logo.svg) center/contain no-repeat}
.pt-word{font-family:'Archivo Black','Arial Black',sans-serif;font-size:1.05rem;letter-spacing:.02em}
.pt-word sup{font-family:var(--sans);font-size:.5em;vertical-align:top}
.pt-links{display:flex;align-self:stretch;margin-left:auto}
.pt-links a{display:inline-flex;align-items:center;padding:0 clamp(9px,1.1vw,15px);color:var(--ink);opacity:.82;text-decoration:none;font:500 .74rem var(--mono);font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;position:relative}
.pt-links a::after{content:"";position:absolute;left:clamp(9px,1.1vw,15px);right:clamp(9px,1.1vw,15px);bottom:20px;height:1px;background:var(--pt-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.pt-links a:hover,.pt-links a.on{opacity:1;color:var(--pt-accent)}
.pt-links a:hover::after,.pt-links a.on::after{transform:scaleX(1)}
.top .hspace{display:none}
.top .langs{background:transparent;padding:0;gap:0;border:1px solid var(--rule-2)}
.top .langs button{border-radius:0;padding:8px 11px;font-size:13px;color:var(--ink-2)}
.top .langs button[aria-pressed="true"]{background:var(--green);color:#F0F4EF;box-shadow:none}
:root[data-theme="dark"] .top .langs button[aria-pressed="true"]{background:#098E19}
.pt-dial{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;flex:none}
.pt-dial i{display:block;width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.pt-key{display:inline-flex;align-items:center;gap:11px;height:40px;padding:0 18px;text-decoration:none;background:#098E19;color:#F0F4EF;font:500 .74rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;flex:none;transition:background .2s,box-shadow .2s}
.pt-key:hover{background:#0AA61D;box-shadow:0 0 0 3px rgba(9,142,25,.28)}
.pt-key svg{width:12px;height:12px}
@media (max-width:1120px){.pt-links{display:none}.top .langs{margin-left:auto}}
@media (max-width:720px){.pt-key{display:none}}

/* ---------- hero: the site's page-head over a full-bleed photo plate ---------- */
main.wrap{max-width:1200px}
.hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr);padding-block:calc(64px + clamp(64px,9vw,124px)) clamp(36px,5vw,56px);color:var(--pt-hero-ink)}
.hero>div:first-child{max-width:820px}
#heroimg{max-width:none!important;position:absolute!important;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin:0!important;transform:translateX(-50%);height:auto!important;aspect-ratio:auto!important;overflow:hidden}
#heroimg img{width:100%;height:100%;object-fit:cover;object-position:78% 35%!important}
#heroimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--pt-hero-wash)/.96) 0%,rgb(var(--pt-hero-wash)/.84) 42%,rgb(var(--pt-hero-wash)/.35) 100%),linear-gradient(0deg,rgb(var(--pt-hero-wash)/1) 0%,rgb(var(--pt-hero-wash)/0) 38%)}
#heroimg .ptag,#heroimg figcaption{position:absolute;right:clamp(16px,4vw,40px);bottom:14px;z-index:1;font:11px 'JetBrains Mono',monospace;color:var(--ink-3);background:none!important}
.hero .lede{color:var(--pt-hero-ink2);font-size:1.12rem;max-width:62ch}
.hero .facts{font-family:'JetBrains Mono',monospace;color:var(--ink-3)}
.pt-crumbs{font:500 .72rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.pt-crumbs a{color:inherit;text-decoration:none}.pt-crumbs a:hover{color:var(--pt-accent)}
.pt-crumbs span{margin:0 8px;color:var(--rule-2)}
@media (max-width:760px){#heroimg::after{background:linear-gradient(0deg,rgb(var(--pt-hero-wash)/1) 8%,rgb(var(--pt-hero-wash)/.78) 60%,rgb(var(--pt-hero-wash)/.55) 100%)}}

/* ---------- sections: rules and mono eyebrows like the site's catalogue pages ---------- */
section{border-top:1px solid var(--rule)}
.secnav{border-top:1px solid var(--rule)}
.secnav a{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
html:not(:lang(en)) .secnav a{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:14px}
.secnav a[aria-current="true"]{background:transparent!important;color:var(--pt-accent)!important;box-shadow:inset 0 -1px 0 var(--pt-accent)}
.callout{border-left:2px solid var(--green)!important}
.foot{color:var(--ink-3)}

/* ---------- site footer slab (always navy, like the site) ---------- */
.pt-foot{background:#0b1726;color:#D3DEE7;margin-top:72px;padding:56px 0 28px;font-size:.92rem}
.pt-foot .pt-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.pt-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.pt-foot .pt-brand{color:#F0F4EF;margin-bottom:14px}.pt-foot .pt-leaf{background:#3FCC51}
.pt-foot p{margin:4px 0;color:#A8BACD;max-width:34ch}
.pt-foot h4{font:500 .7rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#A8BACD;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid #324864}
.pt-foot a{display:block;color:#F0F4EF;text-decoration:none;padding:3px 0}.pt-foot a:hover{color:#3FCC51}
.pt-foot__legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:18px;border-top:1px solid #22344B;font:11px 'JetBrains Mono',monospace;color:#A8BACD}
@media (max-width:820px){.pt-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pt-foot__grid{grid-template-columns:1fr}}

/* ---------- motion: one entrance for the hero, nothing else moves on load ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero>div:first-child>*{animation:pt-rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero>div:first-child>*:nth-child(2){animation-delay:.06s}.hero>div:first-child>*:nth-child(3){animation-delay:.12s}
  .hero>div:first-child>*:nth-child(4){animation-delay:.18s}.hero>div:first-child>*:nth-child(5){animation-delay:.24s}
  #heroimg img{animation:pt-plate 1.4s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes pt-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pt-plate{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* hero actions: films first (the stall QR lands here), the presenter second; caption on the plate's right */
.hero .cta{display:flex!important;gap:10px;flex-wrap:wrap;margin-top:22px}
.pt-films{padding:14px 20px}
@media (max-width:700px){#presbtn2{display:none!important}.pt-films{width:100%;justify-content:center}}
#heroimg .ptag{left:auto!important;right:clamp(16px,4vw,40px)!important;bottom:14px!important;padding:0!important;color:var(--ink-3)!important}

.quick .dl{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.quick .dl:hover{box-shadow:inset 0 0 0 1px var(--green);color:var(--green-d);background:transparent}

/* ---------- motion layer (motion.js). Everything is visible without it; nothing moves under reduced motion ---------- */
.pt-motion .pt-rv{opacity:0;transform:translateY(18px)}
.pt-motion .pt-rv.pt-in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1) var(--pt-d,0ms),transform .55s cubic-bezier(.2,.7,.2,1) var(--pt-d,0ms)}
/* header: transparent over the hero, settles into the site's stuck bar once the hero is under it */
.top{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.top:not(.pt-stuck){background:rgb(var(--pt-hero-wash)/.55);border-bottom-color:transparent}
.top.pt-stuck{box-shadow:0 10px 30px -22px rgba(0,0,0,.6)}
/* scroll progress: a 2px green hairline under the bar, driven by the scroll timeline (no JS) where the browser has it */
.pt-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#098E19;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){.pt-progress{animation:pt-grow linear both;animation-timeline:scroll(root)}}
}
@keyframes pt-grow{to{transform:scaleX(1)}}
/* view transitions: language switch and ground switch crossfade, fast */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* tactile details */
.fthumb,.dcard,.prod,.doc{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,background-color .25s}
@media (hover:hover){
  .fthumb:hover,.dcard:hover,.prod:hover,.doc:hover{transform:translateY(-3px);border-color:var(--green)!important}
  .pt-films:hover svg{transform:translateX(2px)}
}
.pt-films svg{transition:transform .2s}
.dl:active,.btn:active,.chip:active,.pt-key:active{transform:scale(.97)}
.player video{background:#000}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}