.surface{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.hero{padding:clamp(24px,7vw,58px)}
.hero h1{margin:8px 0 16px;max-width:34ch;font-size:clamp(1.9rem,6.5vw,3.6rem);font-weight:700;line-height:1.08;letter-spacing:-.015em;overflow-wrap:normal;word-break:normal}
.hero p{max-width:52rem}
.hero-disclosures{margin-top:18px}
.hero-metrics .metric-value{white-space:nowrap;overflow-wrap:normal}
.finance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.finance-kpi{min-height:128px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.finance-kpi span{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.finance-kpi strong{display:block;margin-top:12px;font-size:clamp(1.35rem,3vw,2.25rem)}
.finance-kpi.critical{border-color:#ff7169;background:var(--critical);color:#170402}
.finance-kpi.attention{background:var(--attention);color:#1e0b05}
.finance-kpi.favourable{background:var(--favourable);color:#07160d}
/* Confirmed live: ".finance-kpi span" above fixes the label to --muted grey
   unconditionally -- on a coloured (critical/attention/favourable) card
   that reads as washed-out light text on a bright background, the exact
   same bug already fixed for .itemMeta on progressive-card. Same fix. */
.finance-kpi.critical span,.finance-kpi.attention span,.finance-kpi.favourable span{color:inherit}
.finance-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px}
.finance-notice,.finance-loading,.empty-state{padding:22px}
.view-nav-shell{position:sticky;top:65px;z-index:30;width:var(--page);margin:0 auto;background:var(--canvas)}
.view-nav-shell .view-nav{position:static;width:100%;margin:0;padding:10px 0}
.view-nav-shell::before,.view-nav-shell::after{position:absolute;top:0;bottom:0;z-index:2;width:34px;content:"";pointer-events:none;opacity:1;transition:opacity .18s ease}
.view-nav-shell::before{left:0;background:linear-gradient(90deg,var(--canvas),transparent)}
.view-nav-shell::after{right:0;background:linear-gradient(270deg,var(--canvas),transparent)}
.view-nav-shell.at-start::before,.view-nav-shell.at-end::after,.view-nav-shell[data-overflow="false"]::before,.view-nav-shell[data-overflow="false"]::after{opacity:0}
.nav-more-cue{position:absolute;right:4px;bottom:-18px;z-index:3;padding:2px 7px;border-radius:999px;color:var(--muted);background:var(--canvas);font-size:.68rem;pointer-events:none;opacity:0;transition:opacity .18s ease}
.view-nav-shell[data-overflow="true"]:not(.at-end) .nav-more-cue{opacity:1}
.view-tab{white-space:nowrap}
.state-critical{border-color:#ff7169;color:#170402;background:var(--critical)}
.state-critical .eyebrow,.state-critical .muted,.state-critical .heroSub{color:#3b0a07}
.state-critical .eyebrow,.state-attention .eyebrow,.state-watch .eyebrow,.state-favourable .eyebrow{color:inherit}
.state-attention{color:#1e0b05;background:var(--attention)}
.state-watch{color:#1b1205;background:var(--watch)}
.state-favourable{color:#07160d;background:var(--favourable)}
.state-normal{background:var(--normal)}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.metric{padding:16px;border-top:1px solid currentColor;container-type:inline-size}
.metric-label,.metricLabel{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.metric-value,.metricValue{margin-top:6px;font-size:clamp(1rem,11cqi,2.4rem);font-weight:800;line-height:1;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.freshness-strip,.freshnessStrip{display:flex;gap:8px;margin:14px 0;overflow-x:auto;scrollbar-width:none}
.fresh{flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.78rem}
.surfaceHead{padding:24px 22px 14px}
.surfaceTitle{font-size:clamp(1.4rem,5vw,2.2rem);font-weight:800}
.surfaceSub,.muted,.itemMeta{color:var(--muted)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px 22px;border-top:1px solid var(--line)}
.itemTitle{font-weight:760;overflow-wrap:anywhere}
.itemMeta{margin-top:5px;font-size:.84rem;line-height:1.45}
.itemValue{text-align:right;font-weight:800;overflow-wrap:anywhere}
.action-strip,.actionStrip{display:flex;gap:8px;overflow-x:auto}
.action-strip button,.actionStrip button,.adminGrid button,.ackBtn{min-height:44px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--ink);background:var(--surface)}
.action-panel,.actionPanel{margin-top:10px;padding:22px}
.adminDrawer{margin-top:42px;padding:20px;border:1px solid var(--line);border-radius:24px}
.adminGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.adminPanel{margin-top:16px}
.toast{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:100;padding:12px 16px;border-radius:12px;color:#101812;background:#f1f2ec}
.attentionCritical{border-color:#ff7169;background:var(--critical);color:#190402}
.attentionCritical .surfaceTitle,.attentionCritical .surfaceSub,.attentionCritical .itemMeta{color:#280805}
.bad{color:#ff7770}
.watchText{color:#ebc06d}
.good{color:#a3d7ad}
.disclosure{border-top:1px solid currentColor}
.disclosure summary{min-height:54px;padding:16px 22px;font-weight:700}
.disclosure-body{padding:0 22px 20px;line-height:1.55}
.progressive-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);background:var(--normal)}
.progressive-card+.progressive-card{margin-top:12px}
.progressive-card>summary{list-style:none;cursor:pointer}
.progressive-card>summary::-webkit-details-marker,.level-three>summary::-webkit-details-marker{display:none}
.progressive-card .level-one{position:relative;padding:clamp(22px,5vw,38px)}
.progressive-card .level-one::after{position:absolute;right:22px;bottom:18px;content:"＋";font-size:1.4rem;font-weight:800}
.progressive-card[open] .level-one::after{content:"−"}
.progressive-card .level-one h2{max-width:24ch;margin:14px 0 8px;font-size:clamp(1.65rem,5vw,3.2rem);line-height:1.02;letter-spacing:-.035em}
.progressive-card .level-one p{max-width:54rem;margin:0;font-size:clamp(.96rem,2vw,1.18rem);line-height:1.5}
.level-hint{display:block;margin-top:8px;font-size:.66rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;opacity:.85}
.level-two{padding:0 clamp(18px,4vw,30px) clamp(20px,4vw,30px);border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.level-three{margin-top:14px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:18px;background:color-mix(in srgb,var(--canvas) 88%,transparent)}
.level-three>summary{display:flex;align-items:center;list-style:none;min-height:48px;padding:14px 16px;cursor:pointer;color:var(--ink);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.level-three-body{padding:0 16px 16px;color:var(--ink);line-height:1.6}
.progressive-card.state-critical{border-color:#ff7169;background:var(--critical);color:#170402}
.progressive-card.state-attention{background:var(--attention);color:#1e0b05}
.progressive-card.state-watch{background:var(--watch);color:#1b1205}
.progressive-card.state-favourable{background:var(--favourable);color:#07160d}
.progressive-card.state-normal{background:var(--normal);color:var(--ink)}
.progressive-card.state-critical .status-label,.progressive-card.state-attention .status-label,.progressive-card.state-watch .status-label,.progressive-card.state-favourable .status-label{color:inherit}
/* Confirmed live, twice: dimming itemMeta to 78% opacity on a coloured
   (yellow/orange/red/green) card reads as grey/washed-out text on a bright
   background -- low contrast, explicitly rejected. Full-strength currentColor
   (the card's own near-black text colour) is used instead. Specificity here
   is deliberate: :where() wraps only the ".progressive-card.state-X" part,
   so the whole selector's specificity comes from ".itemMeta" alone (0,1,0) --
   the SAME as the plain ".itemMeta{color:var(--muted)}" rule above, which
   this rule beats purely by coming later in the file (a fully-:where()'d
   version, tried first, had ZERO specificity and silently lost that tie,
   which is why itemMeta rendered as plain grey on every coloured card
   despite this rule existing). Matching that same (0,1,0) tie-break lets an
   explicit per-row .state-text-critical/attention/watch/favourable class
   still win, since those rules are declared later still, below. */
:where(.progressive-card.state-critical,.progressive-card.state-attention,.progressive-card.state-watch,.progressive-card.state-favourable) .itemMeta{color:inherit}
.progressive-card.state-critical .itemValue,.progressive-card.state-attention .itemValue,.progressive-card.state-watch .itemValue,.progressive-card.state-favourable .itemValue{color:inherit}
.progressive-card .surfaceHead{padding-left:0;padding-right:0}
.progressive-card .metric{border-top-color:color-mix(in srgb,currentColor 45%,transparent)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-field{display:grid;gap:7px}
.form-field input,.form-field select,.form-field textarea{width:100%;min-height:48px;border:1px solid #405046;border-radius:14px;padding:12px;color:var(--ink);background:#0c1510}
/* Confirmed live: unstyled, these fell back to the browser's default grey
   button, while the setup instructions right above them explicitly say "tap
   the green Connect Zoho Books button" -- the button and the instructions
   telling the farmer what to look for must actually match. */
.primary-action{min-height:48px;border:0;border-radius:999px;padding:12px 22px;font-weight:750;color:#07160d;background:var(--favourable)}
.secondary-action{min-height:48px;border:1px solid var(--line);border-radius:999px;padding:12px 22px;font-weight:750;color:var(--ink);background:transparent}
.status-label{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-transform:uppercase}
.status-label::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.hero-metrics{grid-template-columns:minmax(280px,2fr) repeat(2,minmax(180px,1fr))}
.hero-metrics .metric{container-type:inline-size}
.hero-metrics .metric-value{white-space:nowrap;overflow-wrap:normal;font-size:clamp(1.05rem,12cqi,2.65rem);font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.state-text-critical{color:var(--critical)}
/* Confirmed live: --attention (amber, #ffb000) and --watch (bright yellow,
   #f6d84a) are calibrated as bold FULL-CARD FILLS, not as inline text
   colours -- used as text on a same-hue card (an "attention" flag inside a
   "watch"/yellow card, or vice versa) they read as barely-visible
   orange-on-yellow. Red has strong contrast against every card colour in
   this palette including yellow, so attention text uses it instead of the
   amber fill colour. Watch text keeps a gold tone (matching the OLD --watch
   value from before the brighter signal-palette.css fill was introduced)
   rather than reusing the new bright-yellow fill, for the same reason. */
.state-text-attention{color:var(--critical)}
.state-text-watch{color:#c99a52}
.state-text-favourable{color:var(--favourable)}
.state-text-normal{color:var(--ink)}
.hero.state-critical .metric-value,.hero.state-attention .metric-value,.hero.state-watch .metric-value,.hero.state-favourable .metric-value{color:inherit}

/* Decision instrument (procurement/commodity/weather/input-price cockpit instruments) */
.decision-instrument .decision-action{margin:4px 0 6px;font-size:clamp(1rem,2.4vw,1.3rem);font-weight:700}
.decision-instrument .decision-why{margin:0 0 14px;font-size:.92rem;font-weight:500;color:inherit}
.decision-l1-metrics{margin-top:10px}
.decision-l1-metrics .metric{container-type:inline-size}
.decision-l1-metrics .metric-value{white-space:nowrap;overflow-wrap:normal;font-size:clamp(1rem,11cqi,2.4rem);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.trend-cue{display:flex;align-items:baseline;gap:8px;margin:10px 0 0;font-size:.95rem}
.trend-symbol{font-size:1.3rem;font-weight:800}
.chart-heading{margin:22px 0 8px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.78}
.decision-chart-figure{margin:0;max-width:100%;padding:16px;border-radius:16px;background:var(--canvas);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.decision-chart-figure .chart-data-table{color:var(--ink)}
.decision-boundary-editor{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.decision-boundary-editor label{font-size:.78rem;color:var(--muted)}
.decision-boundary-editor input[type=date]{min-height:40px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:10px;color:var(--ink);background:var(--surface)}
.decision-chart{width:100%;height:auto;display:block}
.surface-loading{padding:22px;color:var(--muted)}
.em-form{margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
/* No explicit color on .em-form-lede/.em-field/.em-form-result, on purpose,
   same reasoning as .basket-explainer below: Enterprise Mix's forms render
   inside a progressive-card that can be state-favourable/state-watch
   (bright green/yellow), and a hardcoded --muted grey there is the exact
   low-contrast bug confirmed live on .itemMeta -- verified again here via a
   live computed-style probe (rgb(169,179,170) grey text on a
   rgb(7,22,13)-text green card). Inheriting the card's own colour instead
   is correct in every context these appear in: colour-coded cards get full
   contrast, and the plain dark state-normal card still reads fine at full
   --ink strength. */
.em-form-lede{margin:0 0 12px;font-size:.9rem}
.em-field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:12px}
.em-field{display:flex;flex-direction:column;gap:6px;font-size:.78rem}
.em-field input,.em-field select{min-height:44px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:10px;color:var(--ink);background:var(--surface);font-size:1rem}
.em-form-result{margin-top:10px;font-size:.85rem}
.em-form-result-done{font-size:.95rem;font-weight:700;color:var(--ink-strong)}
/* No explicit color here on purpose: it must inherit the card's own
   per-state text colour (like .eyebrow does) rather than a hardcoded
   --muted grey, which would repeat the exact low-contrast bug found on
   bright state-attention/state-watch cards elsewhere. */
.basket-explainer{margin:-4px 0 14px;font-size:.88rem;line-height:1.5}
.assistant-messages{display:flex;flex-direction:column;gap:14px;margin-top:20px;max-height:60vh;overflow-y:auto}
.assistant-question{align-self:flex-end;max-width:85%;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--surface-2);font-weight:650}
.assistant-answer{margin:0}
.assistant-input-row{display:flex;gap:8px;align-items:center;margin-top:16px}
.assistant-input-row input{flex:1;min-height:48px;border:1px solid #405046;border-radius:15px;padding:0 16px;color:#142016;background:#f3f2d8}
#assistantMic{font-size:1.3rem;border-radius:999px;background:var(--surface-2)}
#assistantMic.is-listening{background:var(--critical);color:#fff}
.chart-data-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.85rem;display:block;overflow-x:auto}
.chart-data-table caption{caption-side:top;text-align:left;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.68;margin-bottom:6px}
.chart-data-table th,.chart-data-table td{padding:7px 10px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);text-align:left;white-space:nowrap}
.chart-data-table td.num,.chart-data-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.driver-list{display:grid;gap:8px;margin-top:6px}
.driver-list .item{padding:10px 0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.confidence-summary{display:flex;flex-wrap:wrap;gap:18px;margin:8px 0}
.confidence-summary div{min-width:140px}
.confidence-summary dt{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.confidence-summary dd{margin:2px 0 0;font-weight:700}
.net-effect-callout{margin-top:14px;padding:16px 18px;border-radius:16px;background:var(--canvas);color:var(--ink);border-left:4px solid currentColor}
.net-effect-label{margin:0 0 6px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.net-effect-text{margin:0;font-size:1.05rem;line-height:1.5;font-weight:650}
.net-effect-confidence{margin:10px 0 0;font-size:.82rem;opacity:.8;line-height:1.5}
.why-ranks-first{margin-top:16px;line-height:1.55}
.data-notice{font-style:italic;opacity:.82}
@media(prefers-reduced-motion:reduce){.decision-chart *{transition:none;animation:none}}