/* One theme for everyone: dark-mode panels and buttons over a mid-tone scene
   (the sky and ground sit halfway between the old light and dark looks).
   Screen tiers (VL.BP in js/config.js, js/layout.js): phone <= 760 px, narrow 761-1199 px, wide >= 1200 px.
   Desktop rules (narrow and wide) are the defaults; @media (max-width:760px) holds the phone overrides (and
   one more block for portrait phones) and @media (min-width:1200px) the wide ones, so every width falls in
   exactly one tier. */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
  --bg:#3f5566;
  --scene:#738899;
  --scene-night:#48596a;
  --panel:rgba(0,29,59,.84);
  --panel-solid:#0b2d4d;
  --ink:#e6f0f4;
  --muted:#93a8ba;
  --line:rgba(230,240,244,.14);
  --chip:rgba(230,240,244,.07);
  --accent:#00C9A5;
  --accent-ink:#5ff0d4;
  --accent-on:#00261f; /* text and icons on an accent fill */
  --blue:#7c87ff;
  --red:#ff5a6b;
  --panelLight:#b6f23a;
  --nir:var(--panelLight);
  --warn:#fdba74;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  height:100%;margin:0;overflow:hidden;
  background:var(--bg);color:var(--ink);
  font-family:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;
}
#scene{position:fixed;top:0;left:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.brand{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.9rem;margin-bottom:.9rem;color:var(--accent-ink)}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.glass{
  background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}

.panel{
  position:fixed;right:16px;top:calc(16px + env(safe-area-inset-top,0px));
  width:304px;max-height:calc(100% - 32px);overflow:auto;
  background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:16px 16px 12px;
  transition:transform .28s ease,opacity .28s ease,visibility 0s linear 0s;
}
.panelHead{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.panelHead .tabs{flex:1;margin-bottom:0}
/* collapsed panel (desktop): slides off to the right, leaving a small pill */
.expandPanel{
  position:fixed;right:16px;top:calc(16px + env(safe-area-inset-top,0px));
  display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;
  padding:.45rem .5rem .45rem .8rem;font-size:.84rem;font-weight:500;
  animation:pillIn .28s ease;
}
.expandPanel svg{width:15px;height:15px}
.pillOut{font-size:.74rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:999px;padding:.12rem .5rem}
@keyframes pillIn{from{opacity:0;transform:translateX(12px)}}
body.panelCollapsed .panel{transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform .28s ease,opacity .28s ease,visibility 0s linear .28s}
.panel section{padding:12px 0;border-top:1px solid var(--line)}
.panel section:first-child{border-top:0;padding-top:0}
.panel h2{font-size:.78rem;font-weight:500;color:var(--muted);margin:0 0 .55rem;letter-spacing:.01em}

.readouts{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.readouts div{min-width:0}
.readouts b{display:block;font-weight:500;font-size:1.28rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.readouts b small{font-size:.72rem;font-weight:400;color:var(--muted);margin-left:2px}
.readouts span{font-size:.74rem;color:var(--muted)}
.readouts .wide{grid-column:1/-1}
.readouts>div>.badge{display:flex;width:max-content;margin-top:4px;font-size:.68rem} /* Illustrative (C1), js/layout.js */
/* a readout a story step points at (step.highlight; the engine sets .hl on the readout's container) */
.readouts>div{border-radius:8px;transition:box-shadow .3s ease,background-color .3s ease}
.readouts>div.hl{
  margin:-5px -7px;padding:5px 7px; /* room for the ring, the text stays in place */
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 16px 3px color-mix(in srgb,var(--accent) 25%,transparent);
}
.readouts>div.hl b{color:var(--accent-ink)}
.meter{height:6px;border-radius:3px;background:var(--chip);overflow:hidden;margin-top:5px}
.meter i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .3s}

.seg{display:flex;background:var(--chip);border-radius:10px;padding:3px;gap:2px}
.seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:.45rem .3rem;font-size:.8rem;font-weight:400;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--panel-solid);color:var(--ink);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.12)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.35rem .7rem;font-size:.8rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--muted)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.35}
.chip[aria-pressed="true"]{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.chip[aria-pressed="true"] i{opacity:1}

.timeRow{display:flex;align-items:center;gap:10px}
.play{width:34px;height:34px;flex:none;border-radius:50%;border:0;background:var(--accent);color:var(--accent-on);display:grid;place-items:center}
.play svg{width:14px;height:14px}
input[type=range]{flex:1;accent-color:var(--accent);min-width:0}
.clock{font-weight:500;font-variant-numeric:tabular-nums;width:3.2em;text-align:right;font-size:.9rem}

.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.74rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:14px;height:4px;border-radius:2px;flex:none}
.explodeBtn{margin-top:8px;width:100%;border:1px solid var(--line);background:transparent;border-radius:10px;padding:.5rem;font-size:.82rem}
.explodeBtn[hidden]{display:none}

.iconBtn{
  width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--line);background:transparent;
  display:grid;place-items:center;color:var(--ink);padding:0;
}
.iconBtn svg{width:12px;height:12px}
.iconBtn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.iconBtn.ghost{border-color:transparent;color:var(--muted)}
.iconBtn:disabled{opacity:.35;cursor:default}
/* clickable progress bar: one segment per step, with a taller hit area than it looks */
.steps{display:flex;gap:4px}
.steps button{flex:1;height:14px;border:0;background:transparent;padding:5px 0;cursor:pointer}
.steps button::before{content:"";display:block;height:4px;border-radius:2px;background:var(--chip);transition:background .25s}
.steps button[aria-current="step"]::before,.steps button.done::before{background:var(--accent)}
.steps button.done::before{opacity:.45}

/* ---------- "How it works": the left column (#dims), one exclusive accordion section per story ---------- */
.dims{
  position:fixed;left:16px;top:calc(16px + env(safe-area-inset-top,0px));
  width:296px;max-height:calc(100% - 32px - env(safe-area-inset-top,0px));
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  border-radius:16px;padding:16px 10px 8px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.dimsHead{padding:0 6px 12px}
.dimsHead .brand{margin-bottom:.6rem}
.dimsHead h1{font-weight:500;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 .35rem}
.dimsHead p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}
body.storyOpen .dimsHead p{display:none} /* room for the open section, as the old tour did */
.dim{border-top:1px solid var(--line)}
.dim>summary{
  display:flex;align-items:center;gap:.5rem;list-style:none;cursor:pointer;
  margin:3px 0;padding:.55rem .6rem;border-radius:10px;font-size:.9rem;font-weight:500;
  transition:background-color .15s ease,color .15s ease;
}
.dim>summary::-webkit-details-marker{display:none}
.dim>summary::after{
  content:"";flex:none;margin-left:auto;width:6px;height:6px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.dim[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.dim>summary:hover{background:var(--chip)}
.dim[open]>summary{color:var(--accent-ink)}
.dimMeta{font-size:.72rem;font-weight:400;color:var(--muted)}
.dim .step{padding:2px 6px 12px}

/* one story step (template #stepTpl): in the open column section, or in the phone caption card */
.step{display:flex;flex-direction:column;gap:9px}
.stepHead{display:flex;align-items:baseline;gap:8px}
.stepCount{flex:none;font-size:.72rem;font-weight:500;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stepTitle{flex:1;min-width:0;margin:0;font-weight:500;font-size:.95rem;line-height:1.3;letter-spacing:-.01em}
.stepTitle:focus{outline:none}
.stepBody{margin:4px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.stepHead,.stepBody,.step>.badge,.stepWidget,.stepLinks{transition:opacity .16s ease,transform .16s ease}
.step.swap .stepHead,.step.swap .stepBody,.step.swap>.badge,.step.swap .stepWidget,.step.swap .stepLinks{opacity:0;transform:translateY(3px)}
.step>.badge{align-self:flex-start}
.stepWidget:empty{display:none}
.dimWidget{max-height:140px;overflow:hidden}
.capWidget{max-height:24px;overflow:hidden}
.stepLinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.74rem;color:var(--muted)}
.stepLinks button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.3rem .65rem;font-size:.76rem;font-weight:500;color:var(--ink);text-align:left}
.stepLinks button:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.stepLinks .linkArrow{color:var(--accent-ink);margin-right:.35rem} /* a cross-link to another story: "→ Agronomy" */
.stepControls{display:flex;flex-direction:column;gap:6px}
.stepNav{display:flex;align-items:center;gap:6px}
/* Next on a story's last step reads "Next: <story>" (js/layout.js, class chain on the button and the step):
   the dots then get a row of their own and the buttons go below them on the right, as for the timeline */
.stepNextText:empty{display:none}
.stepNext.chain{width:auto;display:inline-flex;align-items:center;gap:6px;padding:0 9px 0 11px;font-size:.76rem;font-weight:500;white-space:nowrap}
.step.chain .stepNav{flex-wrap:wrap}
.step.chain .stepProgress{flex-basis:100%}
.step.chain .stepBack{margin-left:auto}
.stepProgress{flex:1;min-width:0}
.stepProgress .steps{margin-right:8px}
/* timeline stories (Daily): the timeline gets a row of its own, the buttons go below it on the right */
.step.timeline .stepNav{flex-wrap:wrap}
.step.timeline .stepProgress{flex-basis:100%}
.step.timeline .stepBack{margin-left:auto}

/* "Illustrative" badge and "Where we are going" tag (from js/claims.js through VL.claims.badgeFor) */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.68rem;font-weight:500;letter-spacing:.02em;line-height:1.4;
  border-radius:999px;padding:.1rem .55rem;border:1px solid var(--line);color:var(--muted);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.illustrative{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.badge.roadmap{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* on-scene tag while "Without Voltiron" is on; js/layout.js puts it at the top of the free area */
.sceneTag{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);pointer-events:none;
  max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.8rem;font-weight:500;padding:.38rem .85rem;border-radius:999px;
  color:var(--warn);background:var(--panel);border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* phone-only parts: hidden on the desktop tiers */
.howPill,.chooser,.caption{display:none}

/* the right panel leaves while a story is open on a narrow screen (panelAway, transient) or when presenting
   (present: ?present=1). Presenting keeps the Controls pill, which brings the panel back (js/ui.js); while
   panelAway the panel cannot come back, so the pill hides. */
body.panelAway .panel,body.present .panel{transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform .28s ease,opacity .28s ease,visibility 0s linear .28s}
body.panelAway .expandPanel{display:none}

/* dissolve between the greenhouse and the one-module view: a frozen frame fading out over the new scene */
#dissolve{position:fixed;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;visibility:hidden}
#dissolve.on{visibility:visible}
#labels{transition:opacity .3s ease}
body.swapping #labels{opacity:0}

#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.label{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-size:.78rem;font-weight:400;padding:.28rem .6rem;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  transform:translate(10px,-50%); /* JS prepends the screen position */
  will-change:transform;
}
/* the leader line, from the anchor to the label; a part label moved clear of another (ui.js: --dx right,
   --dy down) keeps it reaching back to the anchor */
.label::before{content:"";position:absolute;left:calc(-10px - var(--dx,0px));top:calc(50% - var(--dy,0px));width:calc(10px + var(--dx,0px));height:1px;background:var(--muted)}
.label.flipped::before{left:auto;right:-10px} /* drawn left of its anchor (addLabel {flip:true}, ui.js) */
/* part name under the pointer in the one-module view */
.partTip{
  position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;
  font-size:.78rem;padding:.35rem .65rem;border-radius:8px;
  background:var(--panel);border:1px solid var(--accent);color:var(--ink);
}
.partTip b{display:block;font-weight:600}
.partTip span{display:block;color:var(--muted);font-size:.72rem}
.partTip span:empty{display:none}

.toggleControls{display:none}

@media (min-width:1200px){
  .dims{width:320px}
}

@media (max-width:760px){
  /* the column shows only its head, like the old page header; the stories go through the chooser */
  .dims{
    left:16px;right:70px;top:calc(18px + env(safe-area-inset-top,0px));width:auto;max-height:none;overflow:visible;
    padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;
  }
  .dimsHead{padding:0}
  .dimsHead .brand{margin-bottom:.5rem}
  .dimsHead h1{font-size:1.25rem;line-height:1.15;margin-bottom:.4rem}
  .dimsHead p{font-size:.84rem;max-width:34ch}
  .dimList{display:none}

  .toggleControls{
    display:block;position:fixed;right:14px;top:calc(14px + env(safe-area-inset-top,0px));
    border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:.5rem .75rem;font-size:.84rem;font-weight:500;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .panel{
    top:auto;right:0;left:0;bottom:0;width:auto;max-height:62%;
    border-radius:18px 18px 0 0;border-bottom:0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateY(105%);transition:transform .3s ease;
  }
  .panel.open{transform:none}
  /* phones use the bottom sheet instead of collapsing (also when presenting) */
  .collapseBtn,.expandPanel{display:none !important}
  body.panelCollapsed .panel,body.panelAway .panel,body.present .panel{opacity:1;visibility:visible;transform:translateY(105%);transition:transform .3s ease}
  body.panelCollapsed .panel.open,body.panelAway .panel.open,body.present .panel.open{transform:none}

  /* "How it works" pill in the bottom slot, then the chooser sheet */
  .howPill{
    display:inline-flex;align-items:center;gap:.55rem;position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    border-radius:999px;padding:.5rem 1rem .5rem .5rem;font-size:.86rem;font-weight:500;
  }
  .howPill i{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-on);display:grid;place-items:center}
  .howPill svg{width:10px;height:10px;margin-left:2px}
  body.storyOpen .howPill,body.sheet .howPill,body.chooserOpen .howPill{display:none}
  .chooser{
    display:block;position:fixed;left:0;right:0;bottom:0;max-height:62%;overflow:auto;
    border-radius:18px 18px 0 0;border-bottom:0;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));
    animation:sheetIn .28s ease;
  }
  .chooserHead{display:flex;align-items:center;justify-content:space-between;padding:0 2px 8px 6px}
  .chooserHead h2{margin:0;font-size:.95rem;font-weight:500}
  .chooserList{display:flex;flex-direction:column;gap:6px}
  .chooserList button{
    display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
    border:1px solid var(--line);background:var(--chip);border-radius:12px;padding:.75rem .9rem;font-size:.9rem;font-weight:500;
  }
  .chooserList button::after{
    content:"";flex:none;margin-left:auto;width:6px;height:6px;
    border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);
  }

  /* the compact caption card of the open story (the old tour card) */
  body.storyOpen .caption{
    display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    max-height:50%;overflow-y:auto;overscroll-behavior:contain;border-radius:14px;padding:10px 10px 8px 14px;
  }
  body.storyOpen.sheet .caption{display:none}
  .caption .step{gap:7px}
  .caption .stepTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .caption .stepBody{font-size:.8rem;line-height:1.45;margin-top:3px}
  .caption .seg button{padding:.38rem .3rem;min-height:40px}
  /* tap targets of at least 40 px on phones; the look stays the tour card's (same icons, same thin bars) */
  .caption .iconBtn,.chooserHead .iconBtn{width:40px;height:40px;border-radius:10px}
  .caption .stepNext.chain{width:auto}
  .caption .steps{gap:0}
  .caption .steps button{height:40px;padding:18px 2px} /* the hit areas meet; the bars keep their 4 px gaps */
  .caption .stepLinks button{min-height:40px}
  .caption .vw-timeline.vw--compact,.caption .vw .vwTlSeg{height:40px}
  .toggleControls{min-height:40px}

  .sceneTag{transform:translate(-50%,-100%)}
}
/* portrait phones: the dots always get a row of their own, as on a story's last step (.step.chain) and for the
   timeline, so each is at least 40 px wide (six steps at 375 px: 53 px; beside back, next and close they would
   be 30 px). The bars sit in the middle of their 40 px hit areas, so the rows need no gap. Landscape phones
   keep the dots on the nav row, where they are wider than 40 px and the card has little height to spare. */
@media (max-width:760px) and (orientation:portrait){
  .caption .stepNav{flex-wrap:wrap;row-gap:0}
  .caption .stepProgress{flex-basis:100%}
  .caption .stepBack{margin-left:auto}
}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .panel,body.panelCollapsed .panel,body.panelAway .panel,body.present .panel,.meter i,#scene,#labels,
  .stepHead,.stepBody,.step>.badge,.stepWidget,.stepLinks,.dim>summary,.dim>summary::after,.readouts>div{transition:none}
  .expandPanel,.chooser{animation:none}
}

.tabs{margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:4px;font-size:.74rem;color:var(--muted);min-width:0}
.field input,.field select{
  font:inherit;font-size:.86rem;color:var(--ink);background:var(--chip);
  border:1px solid var(--line);border-radius:8px;padding:.42rem .55rem;width:100%;min-width:0;
}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary{margin:12px 0 0;font-size:.84rem;line-height:1.45}
.summary b{font-weight:500}
.warn{margin:8px 0 0;font-size:.78rem;line-height:1.45;color:var(--warn)}
.warn:empty,.summary:empty{display:none}
[hidden]{display:none !important}