/* ============================================================
   LIVAQ DATA ROOM — v3 layout corrections
   Loaded after investor.css. Overrides only; the design
   stylesheet is a generated bundle and stays untouched.
   ============================================================ */

/* ============================================================
   R&D allocator — dashboard treatment
   Donut (total funded) + moat/build stat cards + compact sliders.
   Scoped under .rddash so it does not touch other tools.
   ============================================================ */
.rddash{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-top:20px;
}
.rddash .rdhead{
  display:grid;grid-template-columns:auto 1fr 1fr;gap:22px;align-items:center;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
/* donut */
.rddash .rdgauge{position:relative;width:132px;height:132px;flex-shrink:0}
.rddash .rdring{width:132px;height:132px;transform:rotate(-90deg)}
.rddash .rdring .rdtrack{fill:none;stroke:#eeece8;stroke-width:11}
.rddash .rdring .rdprog{fill:none;stroke:var(--red);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset .35s ease, stroke .35s ease}
.rddash .rdgc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rddash .rdgval{font-family:'Saira';font-weight:800;font-size:26px;line-height:1;color:#1c1c1e;font-variant-numeric:tabular-nums}
.rddash .rdgval small{font-size:13px;font-weight:700}
.rddash .rdgsub{font-family:'Mono';font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--g2);margin-top:5px}
/* stat cards */
.rddash .rdstat{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.rddash .rdstat-k{font-family:'Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--g1);line-height:1.5}
.rddash .rdstat-k span{display:block;color:var(--g2);letter-spacing:.06em}
.rddash .rdstat-v{font-family:'Saira';font-weight:800;font-size:30px;line-height:1;margin:8px 0 9px;color:#1f7a3f;font-variant-numeric:tabular-nums}
.rddash .rdbar{height:7px;border-radius:999px;background:#eeece8;overflow:hidden}
.rddash .rdbarf{height:100%;width:100%;border-radius:999px;background:#1f7a3f;transition:width .3s ease,background .3s ease}
.rddash .rdstat-n{font-family:'Archivo';font-size:11.5px;color:var(--g2);line-height:1.45;margin-top:9px}
/* slider grid */
.rddash .rdgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 34px}
.rddash .arow{border:0;padding:0;margin:0;background:none;display:block}
.rddash .arh{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.rddash .ah{width:9px;height:9px;border-radius:50%;background:#1f7a3f;flex-shrink:0;transition:background .3s ease}
.rddash .alab{font-family:'Archivo';font-weight:600;font-size:14px;color:#1c1c1e}
.rddash .aval{margin-left:auto;font-family:'Saira';font-weight:800;font-size:17px;color:#1c1c1e;font-variant-numeric:tabular-nums}
.rddash .aval small{font-size:11px;font-weight:700}
.rddash .arow input[type=range]{width:100%;margin:0;display:block}
.rddash .arf{display:flex;gap:6px;margin-top:7px;font-family:'Mono';font-size:10.5px;color:var(--g2)}
.rddash .amslip{font-weight:500;white-space:nowrap}
.rddash .rdflow{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'Archivo';font-size:13px;color:var(--g1);line-height:1.5}
.rddash .rdflow b{color:var(--red)}
@media(max-width:820px){
  .rddash .rdhead{grid-template-columns:1fr 1fr;gap:16px}
  .rddash .rdgauge{grid-column:1 / -1;justify-self:center}
  .rddash .rdgrid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .rddash .rdhead{grid-template-columns:1fr}
}

/* ---------- 1. Persistent chrome: the section list follows you ----------
   The title bar and the section rail stay put while the page scrolls,
   so an investor can jump to the next section from anywhere. */
.drtitlebar {
  position: sticky;
  top: 0;
  z-index: 70;
}
.drside {
  position: sticky;
  top: 48px;
  align-self: flex-start;
  height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* thin, unobtrusive scrollbar inside the rail */
.drside::-webkit-scrollbar { width: 8px; }
.drside::-webkit-scrollbar-thumb { background: #e0ded9; border-radius: 999px; }
.drside::-webkit-scrollbar-track { background: transparent; }
/* below 900px the rail becomes an overlay drawer — see the responsive
   pass at the end of this file (it overrides these desktop rules). */

/* in-page jump targets must clear the sticky title bar */
#tool, #scenarioEmbed, #alloc { scroll-margin-top: 64px; }

/* ---------- 2. Downloads / tools panel, top right of every section ---------- */
.dlpanel {
  flex-shrink: 0;
  width: 268px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.dlpanel .dlh {
  font-family: 'Mono';
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g2);
  margin-bottom: 2px;
}
.dlrow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.dlrow:hover { border-color: var(--red); }
.dlrow .dltag {
  font-family: 'Mono';
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--g1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.dlrow .dlt {
  font-family: 'Archivo';
  font-weight: 600;
  font-size: 13px;
  color: #1c1c1e;
  line-height: 1.25;
}
.dlrow .dlg {
  margin-left: auto;
  color: var(--g2);
  font-size: 14px;
  flex-shrink: 0;
}
.dlrow.app .dltag { border-color: rgba(255, 35, 0, .32); color: var(--red); }
.dlrow.soon { opacity: .5; pointer-events: none; }
/* the header row that carries the panel */
.sechead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.sechead > .sectext { flex: 1; min-width: 280px; }
@media (max-width: 860px) {
  .dlpanel { width: 100%; }
}

/* ---------- 3. Overview side annotations ----------
   These were absolutely positioned at calc(50% - 870px), which only
   clears the content column when the main pane is wider than ~1740px.
   Below that they were pushed outside the section and clipped away.
   Wide screens keep the intended margin notes; narrower screens drop
   them into the flow underneath the text instead of losing them. */
/* the design gated these behind @media(min-width:1760px) and offset them
   by calc(50% - 870px), measured against the full page rather than the
   content pane, so they were hidden on most screens and clipped on the
   rest. Always show them; place them as rails only when there is room. */
.annot > .marg { display: block; }

@media (min-width: 1900px) {
  .annot > .wrap { max-width: 1080px; }
  .annot > .marg.left  { left:  calc(50% - 540px - 236px); }
  .annot > .marg.right { right: calc(50% - 540px - 236px); }
}
@media (max-width: 1899px) {
  .annot { display: flex; flex-direction: column; }
  .annot > .wrap { order: 1; }
  .annot > .marg {
    position: static;
    left: auto;
    right: auto;
    top: auto !important;   /* the design sets top inline */
    order: 2;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 4px;
    text-align: left;
    box-sizing: border-box;
  }
  .annot > .marg:first-of-type { padding-top: 30px; }
  .annot > .marg .mh { margin-bottom: 10px; }
  /* stat rows sit side by side rather than stacking down a rail */
  .annot > .marg .mrow {
    display: inline-block;
    vertical-align: top;
    min-width: 176px;
    margin: 0 8px 8px 0;
  }
  .annot > .marg.right .badge { flex-direction: row; }
  /* each badge is wrapped in its own div; lay them out in a row */
  .annot > .marg > div:has(> .badge) {
    display: inline-block;
    margin: 0 8px 8px 0 !important;
  }
  .annot > .marg .margchart { max-width: 460px; }
}
/* the hero clips its own glow; only open it up where the side rails
   need to escape, and keep the glow inside the pane regardless */
@media (min-width: 1900px) {
  .hero.annot { overflow: visible; }
}
.hero.annot .glow { z-index: 0; max-width: 100%; left: 0; }
.hero.annot > .wrap { position: relative; z-index: 1; }

/* ---------- 4. Margin ramp ----------
   Width is set on the tool's own inline rule in index.html (940 -> 1100px),
   since that inline <style> block loads after this file and would win here.
   The aspect ratio is the design's original, so height follows width:
   pushing much past 1100px makes the chart tower rather than just enlarge. */
#scenarioEmbed .rampblock { padding: 20px 22px 18px; }

/* ---------- 5. Cash runway is a tile in the top row ---------- */
#scenarioEmbed .cards5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { #scenarioEmbed .cards5 { grid-template-columns: repeat(2, 1fr); } }
/* the runway value stays compact even when it reads "Beyond the plan" */
#scenarioEmbed #rwBig { white-space: nowrap; }
/* Take-away buttons for the investor's own scenario. */
#scenarioEmbed .dlscen { display: flex; gap: 7px; flex-shrink: 0; }
#scenarioEmbed .dlscen button {
  font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; letter-spacing: .02em;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--g1);
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
#scenarioEmbed .dlscen button:hover { border-color: var(--red); color: var(--ink); }
@media (max-width: 560px) {
  #scenarioEmbed .ramphead { flex-wrap: wrap; gap: 8px; }
  #scenarioEmbed .dlscen { width: 100%; }
  #scenarioEmbed .dlscen button { flex: 1; }
}

/* The printable scenario sheet: hidden on screen, the only thing on paper. */
#scenSheet { display: none; }
@media print {
  body > *:not(#scenSheet) { display: none !important; }
  #scenSheet { display: block !important; position: static; padding: 0; color: #000; font-family: 'Archivo', system-ui, sans-serif; }
  #scenSheet h1 { font-family: 'Saira', system-ui, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 2px; }
  #scenSheet .sub { font-size: 11px; color: #555; margin-bottom: 16px; }
  #scenSheet h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #666; margin: 16px 0 6px; }
  #scenSheet table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
  #scenSheet th, #scenSheet td { border-bottom: 1px solid #ddd; padding: 5px 6px; text-align: right; }
  #scenSheet th:first-child, #scenSheet td:first-child { text-align: left; }
  #scenSheet .dials td:first-child { width: 60%; }
  #scenSheet .foot { font-size: 9.5px; color: #666; margin-top: 14px; line-height: 1.5; }
  @page { margin: 16mm; }
}

/* A phrase, not a number: smaller and wrapping, with the tile's heavy
   tracking eased off so words stay readable. */
#scenarioEmbed #rwBig.long { font-size: 20px; line-height: 1.25; white-space: normal; letter-spacing: .06em; }


/* ============================================================
   iPhone / iPad — responsive pass
   The design shipped desktop-only: a fixed 240px rail and several
   wide tools (roadmap grids, the scenario model, the title bar).
   Below, the rail becomes an overlay drawer, wide tools stack or
   scroll inside their own box, and the page never scrolls sideways.
   ============================================================ */

/* ---- Menu button: an inline control at the start of the title bar ----
   (the design floats it as a vertical tab over the content; instead it now
   lives in the header, shown only when the rail is collapsed — always on
   phones, on demand on desktop — so it tracks the header in demo & prod. */
.drtoggle{
  position:static; order:-1; flex-shrink:0;
  writing-mode:horizontal-tb; text-orientation:mixed;
  display:none; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:none; padding:7px 12px; margin-right:2px;
  font-family:'Mono'; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g1); cursor:pointer; line-height:1;
}
body.dr-collapsed .drtoggle{ display:inline-flex }
.drtoggle:hover{ border-color:var(--red); color:var(--red) }

/* ---- Title bar: compact so it fits a phone ---- */
@media (max-width: 700px){
  .drtitlebar{gap:8px;padding:0 10px}
  .drtitlebar .drdot{display:none}      /* decorative macOS dots */
  .drtitlebar .navlabel{display:none}   /* "Investor Data Room" label */
  .drtitlebar img{height:16px}          /* wordmark a touch smaller */
  #visitorChip{max-width:22vw;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;display:inline-block;vertical-align:bottom}
  .drtoggle{padding:7px 10px;letter-spacing:.1em}
}

/* ---- Sidebar becomes an overlay drawer on tablet & phone ----
   Taken out of flow (position:fixed) so the content is always full
   width; the design's Menu button / collapse toggle still drive it,
   and a backdrop closes it. */
@media (max-width: 900px){
  .drside{
    position:fixed; top:48px; left:0; bottom:0;
    width:min(290px,84vw); height:auto;
    z-index:82; overflow-y:auto;
    box-shadow:6px 0 30px rgba(0,0,0,.16);
  }
  body.dr-collapsed .drside{width:0;box-shadow:none}   /* keep design's hide */
  #drScrim{position:fixed;inset:48px 0 0;background:rgba(20,20,22,.42);
    z-index:81;opacity:0;pointer-events:none;transition:opacity .22s}
  body:not(.dr-collapsed) #drScrim{opacity:1;pointer-events:auto}
}
@media (min-width: 901px){ #drScrim{display:none} }
@media (prefers-reduced-motion: reduce){ #drScrim{transition:none} }

/* ---- Roadmap grids scroll horizontally instead of crushing ---- */
@media (max-width: 760px){
  .rmap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rmap .yrs, .rmap .track{min-width:620px}
}

/* ---- Financials scenario tool: stack controls over the table ---- */
@media (max-width: 820px){
  #scenarioEmbed .grid{grid-template-columns:1fr;gap:16px}
  #scenarioEmbed .grid > *{min-width:0}   /* let the table's box shrink so .tscroll can scroll */
}

/* ---- Section header panel: never sit beside the text on a phone ---- */
@media (max-width: 700px){
  .sechead{flex-direction:column;gap:22px}
  .dlpanel{width:100%}
}