/* One theme for everyone: dark neutral panels over a mid-tone, neutral scene.
   Colour system (Dominik's design review, 5 Oct 2026). Every colour on the page comes from the tokens below,
   in CSS and in the scene (js/core.js reads them into VL.PALETTE):
   - light: --light-sun (incoming sunlight), --light-blue and --light-red (to the crop), --light-green and
     --light-nir (to the panel; NIR is a deep magenta, "beyond red"). The light rays are the visual core.
   - green is reserved for two things: the crop (--crop-green) and the green light ray (--light-green).
   - energy: --energy (amber) for everything electrical: cables, hub links, grid, battery, module output,
     kWp, the Energy widgets. Nothing else is amber.
   - surroundings and UI chrome: --neutral-* (greys, warm beige, off-white). --accent is the UI's own
     highlight (warm beige), not a brand colour; --brand (Voltiris teal) is kept for the logo dot only.
   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.
   --site-bar: height of the site's navigation bar when the site build adds it (site/shared/js/viewer-chrome.js);
   unset (0) when the viewer runs on its own. The top-anchored panels sit below it; js/layout.js frames below it. */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
  /* light */
  --light-sun:#fff1c9;
  --light-blue:#6f7dff;
  --light-red:#ff4757;
  --light-green:#4fe36b;
  --light-nir:#c3177c;
  /* the crop, the only other green */
  --crop-green:#4f9a45;
  /* energy */
  --energy:#ffb21f;
  --energy-ink:#ffd27a;  /* amber text on the dark panels */
  --energy-on:#2b1d00;   /* text and icons on an amber fill */
  /* neutrals: greys, warm beige, off-white */
  --neutral-950:#161618;
  --neutral-900:#1f1f21;
  --neutral-800:#2a2a2c;
  --neutral-700:#3c3b39;
  --neutral-600:#57554f;
  --neutral-500:#7c7870;
  --neutral-400:#a39e94;
  --neutral-300:#c4beb3;
  --neutral-200:#ddd6c9;
  --neutral-100:#ece6db;
  --neutral-50:#f6f3ee;
  --beige:#d6c8af;
  --brand:#00C9A5;       /* Voltiris teal: the logo dot only */
  /* UI roles, built on the tokens above */
  --bg:var(--neutral-700);
  --scene:#879a80;       /* far land in the haze by day: the fog, and the dome below the horizon */
  --scene-night:#28302a;
  --sky-horizon:#cfdbe6; /* sky just above the horizon by day (sun-theme.js: the sky dome) */
  --sky-horizon-night:#36404d;
  --sky-zenith:#4f86c6;  /* sky overhead by day */
  --sky-zenith-night:#18202d;
  --panel:rgba(31,31,33,.86);
  --panel-solid:var(--neutral-800);
  --ink:var(--neutral-100);
  --muted:var(--neutral-400);
  --line:rgba(236,230,219,.14);
  --chip:rgba(236,230,219,.07);
  --accent:var(--beige);
  --accent-ink:#ebdcc0;
  --accent-on:var(--neutral-950); /* text and icons on an accent fill */
  --warn:#eea597;        /* form warnings: soft coral, apart from the amber of energy */
  /* older names, kept as aliases */
  --blue:var(--light-blue);
  --red:var(--light-red);
  --panelLight:var(--light-green);
  --nir:var(--light-nir);
  --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)}
/* language switch (js/i18n.js), at the end of the brand row */
.seg.langSeg{margin-left:auto;padding:2px;gap:1px;pointer-events:auto;text-shadow:none}
.seg.langSeg button{flex:none;padding:.18rem .45rem;font-size:.68rem;font-weight:500;letter-spacing:.03em;border-radius:6px}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--brand);display:inline-block;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 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 + var(--site-bar,0px) + 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 + var(--site-bar,0px) + 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(--energy-ink);background:color-mix(in srgb,var(--energy) 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(--energy);border-radius:3px;transition:width .3s}
/* energy readouts in amber: the module output, the kWp of the Greenhouse tab */
#rOut,.kwp{color:var(--energy-ink)}
.summary b.kwp{font-weight:500}

.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 + var(--site-bar,0px) + env(safe-area-inset-top,0px));
  width:296px;max-height:calc(100% - 32px - var(--site-bar,0px) - 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,.stepNote,.stepLinks{transition:opacity .16s ease,transform .16s ease}
.step.swap .stepHead,.step.swap .stepBody,.step.swap>.badge,.step.swap .stepWidget,.step.swap .stepNote,.step.swap .stepLinks{opacity:0;transform:translateY(3px)}
.step>.badge{align-self:flex-start}
.stepWidget:empty{display:none}
/* step.note: a side note under the widget, smaller than the step text */
.stepNote{margin:0;color:var(--muted);font-size:.72rem;line-height:1.45;font-style:italic}
.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 + var(--site-bar,0px) + 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;
  }
  /* a soft dark veil from the top edge, so the head stays readable over the sky and the tree line */
  .dims::before{content:"";position:absolute;z-index:-1;left:-16px;right:-70px;top:calc(-18px - env(safe-area-inset-top,0px));
    height:calc(100% + 64px + env(safe-area-inset-top,0px));background:linear-gradient(rgba(14,16,18,.62),rgba(14,16,18,.38) 60%,rgba(14,16,18,0))}
  .dimsHead{padding:0;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35)} /* over the scene: readable on the sky and the lawn */
  .dimsHead .brand{margin-bottom:.5rem}
  .seg.langSeg{margin-left:.6rem;background:var(--panel)} /* next to the brand, clear of the Controls button; a panel ground over the scene */
  .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 + var(--site-bar,0px) + 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 .stepNote{font-size:.7rem}
  .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,.stepNote,.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}