/* ============================================================================
   EL NIÑO COMMODITY WATCH — STYLES
   ============================================================================ */
:root{
  --bg:#0a0e16; --bg2:#0e1420; --panel:#141c2b; --panel2:#1a2433;
  --border:#243044; --border2:#2e3c52;
  --text:#e8eef7; --muted:#9aa8bd; --muted2:#6b7888;
  --accent:#4aa8ff; --accent2:#7dd3fc;
  --ok:#34d399; --watch:#fbbf24; --concern:#f87171;
  --lvl-low:#34d399; --lvl-mod:#fbbf24; --lvl-elev:#fb923c; --lvl-high:#f43f5e;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,138,61,.08), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, rgba(74,168,255,.07), transparent 55%),
    var(--bg);
  color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1220px; margin:0 auto; padding:0 20px 60px}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em}
code{font-family:var(--mono); background:var(--panel2); padding:1px 6px; border-radius:5px; font-size:.85em; color:var(--accent2)}
b{color:#fff}

/* ---------------- top nav ---------------- */
.topnav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:18px;
  padding:12px 4px; margin-bottom:20px; flex-wrap:wrap;
  background:rgba(10,14,22,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{font-weight:800; font-size:17px; letter-spacing:-.02em; white-space:nowrap}
.nav-links{display:flex; gap:4px; flex-wrap:wrap; flex:1}
.nav-link{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px;
  color:var(--muted); font-size:13.5px; font-weight:600; border:1px solid transparent; transition:.12s;
}
.nav-link:hover{color:var(--text); background:var(--panel)}
.nav-link.is-active{color:#fff; background:var(--panel2); border-color:var(--border2)}
.nav-emoji{font-size:14px}
.nav-right{display:flex; align-items:center; gap:10px; margin-left:auto}
.live-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#aef0c8; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.45);
  padding:4px 9px; border-radius:20px;
}
.live-badge-sm{font-size:10px; padding:2px 7px}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse-dot 1.8s ease-out infinite}
.live-badge.is-fetching{color:#cfe3ff; border-color:rgba(74,168,255,.5); background:rgba(74,168,255,.12)}
.live-badge.is-fetching .live-dot{background:var(--accent)}
.live-badge.is-error{color:#ffc9c9; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.12)}
.live-badge.is-error .live-dot{background:var(--concern); animation:none}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* ---------------- live status line ---------------- */
.statusline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 18px; padding:8px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; font-family:var(--mono); font-size:12px}
.sl-state{font-weight:700}
.sl-state.sl-ok{color:var(--ok)} .sl-state.sl-loading{color:var(--accent2)} .sl-state.sl-error{color:var(--concern)}
.sl-meta{color:var(--muted2)}
.reset-btn{
  font-family:var(--mono); font-size:12px; color:var(--muted); background:var(--panel);
  border:1px solid var(--border2); border-radius:8px; padding:5px 10px; cursor:pointer; transition:.12s;
}
.reset-btn:hover{color:#fff; border-color:var(--accent)}

/* ---------------- hero ---------------- */
.hero{padding:14px 4px 6px}
.hero h1{font-size:34px; background:linear-gradient(90deg,#fff,#9fd0ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-h2{font-size:21px; font-weight:800; color:#dbe4f0; margin:14px 0 4px}
.hero-sub{color:var(--muted); max-width:820px; font-size:15.5px; line-height:1.6; margin:8px 0 6px}
.hero-sub b{color:#eaf1fb}
.hero-meta{color:var(--muted2); font-size:13px; font-family:var(--mono)}
.hero-meta .js-clock{color:var(--accent2)}

/* ---------------- ENSO banner ---------------- */
.enso-section{margin:10px 0 26px}
.enso-strip{margin-bottom:18px}
.enso-banner{
  border:1px solid rgba(255,138,61,.35); border-radius:14px; padding:16px 18px;
  background:linear-gradient(120deg, rgba(255,138,61,.12), rgba(244,63,94,.06) 60%, var(--panel));
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.enso-left{min-width:230px}
.enso-phase{font-weight:800; font-size:15px; color:#ffd9a8; letter-spacing:.02em}
.enso-oni{font-size:14px; color:var(--muted); margin-top:4px}
.enso-oni-val{font-family:var(--mono); font-size:26px; font-weight:800; color:#fff}
.enso-oni-sub{font-size:12px; color:var(--watch); margin-left:4px}
.enso-sst{font-size:12.5px; color:var(--muted); margin-top:5px}
.enso-sst-val{font-family:var(--mono); font-weight:700; color:var(--accent2)}
.enso-sst-cap{font-size:10px; color:var(--muted2); border:1px solid var(--border2); border-radius:5px; padding:1px 5px; margin-left:4px}
.enso-stats{display:flex; gap:10px; flex-wrap:wrap; flex:1; justify-content:flex-end}
.enso-stat{text-align:center; background:rgba(0,0,0,.22); border:1px solid var(--border); border-radius:10px; padding:8px 12px; min-width:92px}
.es-num{display:block; font-family:var(--mono); font-size:18px; font-weight:800; color:#fff}
.es-lab{display:block; font-size:10.5px; color:var(--muted); line-height:1.25; margin-top:3px}
.enso-detail{display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px dashed var(--border2)}
.enso-gauge-wrap{flex:0 0 auto}
.enso-gauge{width:320px; max-width:100%; height:60px}
.gauge-tick{fill:var(--muted); font-size:9px; font-family:var(--mono)}
.enso-gauge-cap{font-size:11px; color:var(--muted2); margin-top:2px; font-family:var(--mono)}
.enso-history{flex:1; min-width:240px}
.enso-history-title{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.enso-hist-item{display:inline-block; font-size:12px; font-family:var(--mono); background:var(--panel2); border:1px solid var(--border); border-radius:7px; padding:3px 8px; margin:0 6px 6px 0}
.enso-hist-item i{color:var(--muted2); font-style:normal}
.enso-note{margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.6}

/* ---------------- overview grid ---------------- */
.ov-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; margin-top:6px}
.ov-card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; transition:.15s; position:relative; overflow:hidden;
}
.ov-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ov-card-top{display:flex; align-items:center; gap:11px}
.ov-emoji{font-size:30px}
.ov-name{font-size:21px; font-weight:800}
.ov-tag{font-size:12.5px; color:var(--accent2); font-weight:600; margin-top:6px}
.ov-regions{margin:14px 0 8px; display:flex; flex-direction:column; gap:7px; flex:1}
.ov-region{display:flex; align-items:center; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--border)}
.ov-region:last-child{border-bottom:none; padding-bottom:0}
.ov-region-name{font-size:12.5px; color:#dbe4f0; font-weight:600; line-height:1.3}
.ov-region .zone-badge{margin-left:auto; font-size:9.5px; padding:3px 9px; letter-spacing:.04em}
.ov-region-empty{font-size:12.5px; color:var(--muted); border-bottom:none}
.ov-go{font-size:12.5px; font-weight:700; color:var(--accent); margin-top:10px}

/* ---------------- concern badges / levels ---------------- */
.ov-badge,.cmd-overall-badge{
  font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.05em;
  padding:5px 11px; border-radius:20px; border:1px solid; white-space:nowrap;
}
.lvl-low{color:var(--lvl-low); border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.12)}
.lvl-mod{color:var(--lvl-mod); border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.12)}
.lvl-elev{color:var(--lvl-elev); border-color:rgba(251,146,60,.55); background:rgba(251,146,60,.14)}
.lvl-high{color:#fff; border-color:var(--lvl-high); background:rgba(244,63,94,.85)}

/* ---------------- commodity header ---------------- */
.cmd-header{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:6px 0 4px}
.cmd-title{display:flex; align-items:center; gap:14px}
.cmd-emoji{font-size:44px}
.cmd-title h1{font-size:32px}
.cmd-tag{font-size:13.5px; color:var(--accent2); font-weight:600}
.cmd-header-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.cmd-overall-badge{font-size:14px; padding:7px 15px}
.cmd-clock{font-size:11.5px; color:var(--muted2); font-family:var(--mono)}
.cmd-clock .js-clock{color:var(--accent2)}
.cmd-mechanism{
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:13px 16px; font-size:14px; color:var(--muted); margin:16px 0 22px; line-height:1.6;
}
.cmd-mechanism b{color:var(--accent2)}

/* ---------------- metric grid + boxes ---------------- */
.metric-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px}
.metric-box{
  background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:15px 16px 14px;
  border-top:3px solid var(--border2); transition:border-color .25s, box-shadow .25s;
}
.box-ok{border-top-color:var(--ok)}
.box-watch{border-top-color:var(--watch); box-shadow:0 0 0 1px rgba(251,191,36,.12)}
.box-concern{border-top-color:var(--concern); box-shadow:0 0 22px rgba(248,113,113,.16)}
.box-na{border-top-color:var(--border2)}
.mb-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.mb-label{font-size:13.5px; font-weight:700; color:#dfe8f4}
.mb-status{font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:2px 8px; border-radius:6px; border:1px solid var(--border2); color:var(--muted)}
.st-ok{color:var(--ok); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1)}
.st-watch{color:var(--watch); border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.1)}
.st-concern{color:#fff; border-color:var(--concern); background:rgba(248,113,113,.8)}
.st-na{color:var(--muted2)}
.spark-na{stroke:var(--muted2)}
.mb-live{color:var(--ok); opacity:.75}
.mb-value-row{display:flex; align-items:baseline; gap:8px; margin:8px 0 2px}
.mb-value{font-family:var(--mono); font-size:30px; font-weight:800; color:#fff; line-height:1}
.mb-unit{font-size:13px; color:var(--muted)}
.mb-delta{font-family:var(--mono); font-size:13px; font-weight:700; margin-left:auto}
.d-bad{color:var(--concern)} .d-good{color:var(--ok)} .d-up{color:var(--accent2)} .d-down{color:var(--muted)} .d-flat{color:var(--muted2)}
.mb-spark{width:100%; height:34px; margin:4px 0 2px; display:block}
.mb-spark path{fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke}
.spark-ok{stroke:var(--ok)} .spark-watch{stroke:var(--watch)} .spark-concern{stroke:var(--concern)}
.mb-thresh{font-family:var(--mono); font-size:11px; color:var(--muted2); padding-bottom:9px; border-bottom:1px dashed var(--border); margin-bottom:9px}
.mb-desc p{margin:0 0 8px; font-size:12.5px; color:var(--muted); line-height:1.55}
.mb-desc p:last-child{margin-bottom:0}
.mb-tag{display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent2); background:rgba(74,168,255,.12); border:1px solid rgba(74,168,255,.3);
  padding:1px 6px; border-radius:5px; margin-right:7px; vertical-align:1px}
.mb-tag-warn{color:#ffd9a8; background:rgba(255,138,61,.14); border-color:rgba(255,138,61,.35)}

/* ---------------- assessment ---------------- */
.assessment{margin:30px 0 6px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px}
.assess-title{font-size:19px; margin-bottom:14px}
.assess-live{display:flex; gap:18px; align-items:stretch; flex-wrap:wrap}
.meter{flex:0 0 14px; width:14px; min-height:90px; background:var(--panel2); border-radius:8px; overflow:hidden; position:relative; display:flex; align-items:flex-end}
.meter-fill{width:100%; border-radius:8px; transition:height .6s, background .4s; min-height:8px}
.lvl-low.meter-fill,.meter-fill.lvl-low{background:var(--lvl-low)}
.meter-fill.lvl-mod{background:var(--lvl-mod)} .meter-fill.lvl-elev{background:var(--lvl-elev)} .meter-fill.lvl-high{background:var(--lvl-high)}
.assess-live-text{flex:1; min-width:280px}
.assess-level{font-family:var(--mono); font-size:16px; font-weight:800; letter-spacing:.05em; padding:3px 12px; border-radius:8px; border:1px solid}
.js-liveread{font-size:14px; color:var(--text); line-height:1.65; margin:10px 0 6px}
.assess-stamp{font-size:11px; color:var(--muted2); font-family:var(--mono)}
.assess-stamp .js-clock{color:var(--accent2)}
.assess-analyst{margin-top:16px; padding-top:14px; border-top:1px dashed var(--border2)}
.assess-analyst p{margin:8px 0 0; font-size:13.5px; color:var(--muted); line-height:1.65}

/* ---------------- context grid ---------------- */
.context-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:16px; margin-top:18px}
.ctx-card{background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:16px 18px}
.ctx-card h3{font-size:15px; margin-bottom:12px; color:#dfe8f4}
.prod-list{display:flex; flex-direction:column; gap:8px}
.prod-item{display:grid; grid-template-columns:auto auto 1fr; gap:8px; align-items:baseline; font-size:13px; border-bottom:1px solid var(--border); padding-bottom:7px}
.prod-item:last-child{border-bottom:none; padding-bottom:0}
.prod-country{font-weight:700; color:#fff}
.prod-share{font-family:var(--mono); color:var(--accent2); font-weight:700}
.prod-note{color:var(--muted2); font-size:11.5px; text-align:right}
.ctx-sources,.ctx-conf{font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 8px}
.ctx-conf{margin-bottom:0}

/* ---------------- disclaimer + footer ---------------- */
.disclaimer{margin-top:26px; background:rgba(255,138,61,.06); border:1px solid rgba(255,138,61,.28); border-radius:13px; padding:16px 18px}
.disclaimer h3{font-size:14.5px; color:#ffd9a8; margin-bottom:8px}
.disclaimer p{font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 8px}
.disclaimer p:last-child{margin-bottom:0}
.foot{margin-top:24px; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--muted2); font-family:var(--mono); display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* ---------------- responsive ---------------- */
@media (max-width:680px){
  .hero h1{font-size:26px}
  .enso-stats{justify-content:flex-start}
  .context-grid{grid-template-columns:1fr}
  .metric-grid,.ov-grid{grid-template-columns:1fr}
  .cmd-header-right{align-items:flex-start; text-align:left}
  .mb-value{font-size:26px}
  .macro-grid{grid-template-columns:1fr}
}

/* ============== v4 additions: zones, levels, IOD, macro ============== */
/* extra concern levels */
.lvl-watch{color:var(--watch); border-color:rgba(251,191,36,.6); background:rgba(251,191,36,.16)}
.lvl-red{color:#fff; border-color:#b91c1c; background:#dc2626}
.meter-fill.lvl-watch{background:var(--watch)} .meter-fill.lvl-red{background:#dc2626}

/* ENSO live readouts + IOD */
.enso-readouts{display:flex; gap:14px; flex-wrap:wrap; margin-top:7px; font-size:12px; color:var(--muted); font-family:var(--mono)}
.enso-readouts .ro b{color:var(--accent2); font-weight:700}
.enso-readouts .iod-pos{color:var(--concern); font-style:normal} .enso-readouts .iod-neg{color:var(--ok); font-style:normal}
.enso-iod{border-top:1px dashed var(--border2); padding-top:10px; color:var(--muted)}

/* zones */
.zone{margin:0 0 20px}
.zone-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; padding-bottom:8px; border-bottom:1px solid var(--border)}
.zone-label{font-size:16px; font-weight:800; color:#eaf1fb}
.chip{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 8px; border-radius:6px; border:1px solid var(--border2); color:var(--muted)}
.chip-prio.prio-primary{color:#fff; background:rgba(74,168,255,.25); border-color:var(--accent)}
.chip-prio.prio-secondary{color:var(--accent2); background:rgba(74,168,255,.1)}
.chip-prio.prio-watch{color:var(--muted2)}
.chip-risk{color:#ffd9a8; background:rgba(255,138,61,.12); border-color:rgba(255,138,61,.3)}
.zone-badge{margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.05em; padding:4px 11px; border-radius:20px; border:1px solid}
.zone-note{font-size:12.5px; color:var(--muted); margin:8px 0 12px; line-height:1.55}

/* info panels */
.info-panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:0 0 22px}
.info-panel{background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:13px 15px}
.info-panel h4{font-size:13.5px; color:var(--accent2); margin-bottom:6px}
.info-panel p{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0}

/* generic panels + callout */
.sec-title{font-size:20px; margin:8px 0 14px}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:16px 18px; margin:18px 0}
.panel h3{font-size:15px; margin-bottom:8px; color:#dfe8f4}
.panel p{font-size:13px; color:var(--muted); line-height:1.6; margin:0}
.panel-accent{border-left:3px solid var(--accent2)}
.callout{background:rgba(255,138,61,.06); border:1px solid rgba(255,138,61,.28); border-radius:13px; padding:16px 18px; margin:18px 0}
.callout h3{font-size:14.5px; color:#ffd9a8; margin-bottom:10px}
.callout ul{margin:0; padding-left:18px}
.callout li{font-size:12.5px; color:var(--muted); line-height:1.55; margin-bottom:7px}
.callout li:last-child{margin-bottom:0}

/* collapsible historical */
.histbox{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:4px 18px; margin:18px 0}
.histbox summary{cursor:pointer; font-weight:700; font-size:14px; color:#dfe8f4; padding:12px 0; list-style:revert}
.histbox p{font-size:12.5px; color:var(--muted); line-height:1.65; padding:0 0 14px}

/* marex chip */
.marex-chip{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700; color:#cbb5ff; background:rgba(140,120,255,.12); border:1px solid rgba(140,120,255,.4); padding:3px 9px; border-radius:7px; margin-top:6px}

/* macro overlay */
.macro{margin-top:30px; padding-top:18px; border-top:1px solid var(--border)}
.macro-waves{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:16px}
.wave{background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:11px; padding:14px 16px}
.wave-h{font-family:var(--mono); font-size:12.5px; font-weight:800; color:var(--accent2); margin-bottom:7px}
.wave p{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0}
.macro-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.macro-marex{margin-top:14px}
.marex-row{display:flex; align-items:center; gap:10px; margin:7px 0}
.marex-name{width:80px; font-size:12.5px; color:#dfe8f4; font-weight:600}
.marex-bar{flex:1; height:10px; background:var(--panel2); border-radius:6px; overflow:hidden}
.marex-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--concern)); border-radius:6px}
.marex-num{font-family:var(--mono); font-size:13px; font-weight:800; color:#fff; width:24px; text-align:right}
.macro-caveat{font-size:12.5px; color:#ffd9a8; line-height:1.6; margin:14px 0 6px}
.macro-src{font-size:11px; color:var(--muted2); font-family:var(--mono); margin:0}

/* ============== cocoa/palm update: offset tiles, note box, threshold table ============== */
/* offset (positive) tile status — Ecuador cocoa supply offset */
.st-offset{color:#06281b; background:var(--ok); border-color:var(--ok); font-weight:800}
.chip-prio.prio-offset{color:var(--ok); background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.45)}

/* always-visible informational note box (e.g. biodiesel amplifier) */
.note-box{background:rgba(74,168,255,.06); border:1px solid rgba(74,168,255,.3); border-left:3px solid var(--accent); border-radius:13px; padding:16px 18px; margin:18px 0}
.note-box h3{font-size:14.5px; color:var(--accent2); margin-bottom:8px}
.note-box p{font-size:12.5px; color:var(--muted); line-height:1.6; margin:0}

/* concern threshold reference table */
.thresh-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px}
.thresh-table td{padding:8px 8px; border-bottom:1px solid var(--border); color:var(--muted); vertical-align:top}
.thresh-table td:first-child{color:#dfe8f4; font-weight:600; width:44%}
.thresh-table tr:last-child td{border-bottom:none}
.thresh-note{font-size:11.5px; color:var(--muted2); margin:10px 0 0; font-style:italic}

/* sourced historical list inside the collapsible box */
.histbox ul{margin:0; padding:0 0 14px 18px}
.histbox li{font-size:12.5px; color:var(--muted); line-height:1.55; margin-bottom:10px}
.histbox cite{display:block; color:var(--muted2); font-style:normal; font-size:11px; margin-top:3px}

/* ============== coffee update: variety split, cycle badges, summary table ============== */
.variety-head{font-size:18px; font-weight:800; margin:26px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--accent); color:#eaf1fb; letter-spacing:.02em}
.chip-contra{color:var(--ok); background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.45)}
.cycle-row{display:flex; gap:12px; flex-wrap:wrap; margin:2px 0 12px}
.cycle{flex:1; min-width:240px; background:var(--panel2); border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-size:12px; color:var(--muted)}
.cyc-lab{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted2); margin-bottom:5px}
.cyc-badge{font-family:var(--mono); font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; border:1px solid; margin-right:8px}
.cyc-note{font-size:11.5px}
.tbl-scroll{overflow-x:auto}
.sum-table th{text-align:left; padding:7px 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); border-bottom:1px solid var(--border2); white-space:nowrap}
.sum-table td{font-size:11.5px; white-space:nowrap}
.sum-table td:first-child{width:auto; white-space:normal}

/* ============== bidirectional scale: FAVORABLE / NEUTRAL / WATCH / STRESSED / CRITICAL ============== */
/* tile status badges */
.st-favorable{color:#fff; background:#2e7d32; border-color:#2e7d32}
.st-neutral{color:var(--muted2); border-color:var(--border2)}
.st-stressed{color:#fff; border-color:#e65100; background:rgba(230,81,0,.88)}
.st-critical{color:#fff; border-color:#b71c1c; background:#b71c1c}
/* tile box top-border */
.box-favorable{border-top-color:#2e7d32}
.box-neutral{border-top-color:var(--border2)}
.box-stressed{border-top-color:#e65100; box-shadow:0 0 0 1px rgba(230,81,0,.12)}
.box-critical{border-top-color:#b71c1c; box-shadow:0 0 22px rgba(183,28,28,.20)}
/* sparkline strokes */
.spark-favorable{stroke:#2e7d32} .spark-neutral{stroke:var(--muted2)} .spark-stressed{stroke:#e65100} .spark-critical{stroke:#b71c1c}
/* origin / overall level badges */
.lvl-fav{color:#fff; border-color:#2e7d32; background:#2e7d32}
.lvl-neutral{color:var(--muted); border-color:var(--border2); background:rgba(117,117,117,.16)}
.lvl-watch2{color:#bfdcff; border-color:#1565c0; background:rgba(21,101,192,.28)}
.lvl-stress{color:#fff; border-color:#e65100; background:rgba(230,81,0,.88)}
.lvl-crit{color:#fff; border-color:#b71c1c; background:#b71c1c}
.meter-fill.lvl-fav{background:#2e7d32} .meter-fill.lvl-neutral{background:#757575} .meter-fill.lvl-watch2{background:#1565c0} .meter-fill.lvl-stress{background:#e65100} .meter-fill.lvl-crit{background:#b71c1c}

/* IOD proxy readout in the assessment box */
.iod-line{font-size:12px; color:var(--muted); margin:9px 0 0; line-height:1.55}
.iod-zoneline{margin-top:13px; padding-top:11px; border-top:1px dashed var(--border)}
.iod-label{color:var(--muted)}
.iod-val{font-family:var(--mono); color:var(--accent2); font-weight:700}
.iod-warn{color:var(--muted2); font-size:11.5px}
.iod-info{position:relative; display:inline-block; margin-left:5px; color:var(--accent2); cursor:help; font-weight:700}
.iod-info .iod-tip{
  visibility:hidden; opacity:0; position:absolute; bottom:150%; left:50%; transform:translateX(-50%);
  width:260px; max-width:72vw; background:#0b0f17; color:#fff; border:1px solid var(--border2); border-radius:8px;
  padding:9px 11px; font-size:11px; font-weight:400; line-height:1.5; text-align:left; z-index:60;
  box-shadow:0 8px 24px rgba(0,0,0,.5); transition:opacity .12s; pointer-events:none;
}
.iod-info .iod-tip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#0b0f17}
.iod-info:hover .iod-tip, .iod-info:focus .iod-tip{visibility:visible; opacity:1}