/* ══════════════════════════════════════════════════════════════════════
   VisionX Present — full-screen slides (see visionx-present.js)
   Colours come from the app's tokens, so slides follow the light / dark
   mode and the accent theme each user picked.
   ══════════════════════════════════════════════════════════════════════ */

/* ── top-bar button ───────────────────────────────────────────────── */
.vxp-open{
  height:36px;padding:0 13px 0 11px;border-radius:12px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;flex:none;
  border:1px solid var(--ai-line);background:var(--ai-soft);color:var(--text);font:600 12.5px/1 Inter,system-ui,sans-serif;
  transition:border-color .16s,background .16s;
}
.vxp-open:hover{border-color:var(--accent)}
.vxp-open svg{width:16px;height:16px;color:var(--accent)}
@media(max-width:1100px){.vxp-open{width:36px;padding:0;justify-content:center}.vxp-open span{display:none}}

/* ── the dialog ───────────────────────────────────────────────────── */
dialog.vxp{
  position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  background:var(--paper);color:var(--text);overflow:hidden;
}
dialog.vxp[open]{display:flex;flex-direction:column}
dialog.vxp:not([open]){display:none!important}
dialog.vxp::backdrop{background:var(--paper)}
dialog.vxp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 0%,rgba(var(--accent-rgb),.13),transparent 70%),
    radial-gradient(50% 45% at 100% 100%,rgba(var(--accent-rgb),.08),transparent 70%);
}
dialog.vxp>*{position:relative}

.vxp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,36px);flex:none}
.vxp-brand{display:flex;align-items:baseline;gap:10px;min-width:0;font:500 13px/1.3 Inter,system-ui,sans-serif;color:var(--slate)}
.vxp-brand b{color:var(--text);font:600 14px/1.3 "Space Grotesk",Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxp-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxp-tools{display:flex;gap:8px;flex:none}
.vxp-tools button{
  height:32px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--slate);
  font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
}
.vxp-tools button:hover{color:var(--text);border-color:var(--ai-line)}

.vxp-stage{flex:1 1 auto;min-height:0;overflow:hidden auto;display:flex;padding:0 clamp(16px,4vw,64px)}
.vxp-slide{width:100%;max-width:1240px;margin:auto;padding:8px 0 16px;animation:vxp-in .42s cubic-bezier(.2,.7,.2,1) both}
.vxp-slide.back{animation-name:vxp-in-back}
@keyframes vxp-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes vxp-in-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

.vxp-kicker{
  font:600 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.vxp-h{
  font:600 clamp(24px,3.3vw,46px)/1.12 "Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;color:var(--text);
  margin:0 0 clamp(18px,3vh,34px);max-width:24ch;text-wrap:balance;
}
.vxp-body{min-width:0}
.vxp-foot-note{margin:16px 0 0;font:500 12.5px/1.5 Inter,system-ui,sans-serif;color:var(--dim)}

/* Links into the dashboard make no sense behind a modal. */
.vxp-body .no-print,.vxp-body [data-dtab]{display:none!important}

/* title slide */
.vxp-title{text-align:left}
.vxp-company{font:600 clamp(40px,7.4vw,104px)/1 "Space Grotesk",Inter,sans-serif;letter-spacing:-.035em;margin:0 0 22px;color:var(--text);text-wrap:balance}
.vxp-period{font:500 clamp(18px,2.3vw,30px)/1.25 "Space Grotesk",Inter,sans-serif;color:var(--text);margin:0 0 12px}
.vxp-meta{font:500 14px/1.5 Inter,system-ui,sans-serif;color:var(--slate);margin:0}
.vxp-title .vxp-kicker{margin-bottom:22px}

/* headline figures */
.vxp-kpis{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(4,minmax(0,1fr))}
.vxp-kpis.n1{grid-template-columns:minmax(0,420px)}
.vxp-kpis.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vxp-kpis.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vxp-kpi{
  border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:clamp(16px,2vw,28px);
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.vxp-kpi span{font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.vxp-kpi b{font:600 clamp(24px,3vw,44px)/1.05 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:-.03em;color:var(--text);overflow-wrap:anywhere}
.vxp-kpi small{font:500 13.5px/1.35 Inter,system-ui,sans-serif;color:var(--slate)}
.vxp-kpi small.good{color:#2fb36b}
.vxp-kpi small.bad{color:#e5634d}

/* charts */
.vxp-chart,.vxp-flow{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:clamp(12px,1.6vw,24px)}
.vxp-chart svg{display:block;width:100%;height:auto;max-height:52vh}
.vxp-flow svg{display:block;width:100%;height:auto;max-height:40vh}
.vxp-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font:500 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate)}
.vxp-key span{display:inline-flex;align-items:center;gap:7px}
.vxp-key i{width:11px;height:11px;border-radius:3px;flex:none}
.vxp-body .vxh,.vxp-body .vxy{margin:0}

/* panels borrowed from the report pages */
.vxp-panels{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:minmax(0,1fr);align-items:start}
.vxp-panels.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vxp-panels .panel{margin:0;min-width:0;border-radius:20px;padding:clamp(14px,1.6vw,24px);animation:none}
.vxp-panels svg[viewBox^="0 0 560"],.vxp-panels svg[viewBox^="0 0 300"],.vxp-panels svg[viewBox^="0 0 220"]{
  display:block;width:100%;height:auto;max-height:50vh;margin:0 auto;
}
.vxp-panels.n2 svg[viewBox^="0 0 560"],.vxp-panels.n2 svg[viewBox^="0 0 300"]{max-height:44vh}

/* The report pages set their text for a desk, not a meeting room. */
@media(min-width:1100px) and (min-height:800px){
  .vxp-panels .panel{zoom:1.3}
  .vxp-panels svg[viewBox^="0 0 560"],.vxp-panels svg[viewBox^="0 0 300"],.vxp-panels svg[viewBox^="0 0 220"]{max-height:38vh}
  .vxp-panels.n2 svg[viewBox^="0 0 560"],.vxp-panels.n2 svg[viewBox^="0 0 300"]{max-height:34vh}
  /* The tall ones stay closer to their own size so they fit without scrolling. */
  [data-slide="pnl"] .vxp-panels .panel{zoom:1}
  [data-slide="costs"] .vxp-panels .panel{zoom:1.1}
  [data-slide="ratios"] .vxp-panels .panel{zoom:1.15}
}

/* signals */
.vxp-sigs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vxp-sigs li{
  display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:14px 18px;font:500 clamp(14px,1.25vw,17px)/1.45 Inter,system-ui,sans-serif;color:var(--text);
}
.vxp-sigs i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:.45em;background:var(--slate)}
.vxp-sigs li.good i{background:#2fb36b}
.vxp-sigs li.warn i,.vxp-sigs li.bad i{background:#e0a030}
.vxp-sigs em{
  display:block;font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;font-style:normal;
  color:var(--slate);margin-bottom:6px;
}

/* commentary */
.vxp-prose{max-width:74ch;font:400 clamp(15px,1.35vw,19px)/1.6 Inter,system-ui,sans-serif;color:var(--text)}
.vxp-prose h1,.vxp-prose h2,.vxp-prose h3,.vxp-prose h4{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;line-height:1.2;margin:1.1em 0 .45em;color:var(--text)}
.vxp-prose h1{font-size:1.5em}.vxp-prose h2{font-size:1.3em}.vxp-prose h3,.vxp-prose h4{font-size:1.1em}
.vxp-prose>*:first-child{margin-top:0}
.vxp-prose p{margin:0 0 .8em}
.vxp-prose ul,.vxp-prose ol{margin:0 0 .8em;padding-left:1.3em}
.vxp-prose li{margin:.25em 0}
.vxp-prose blockquote{margin:0 0 .8em;padding:.2em 0 .2em 1em;border-left:3px solid var(--accent);color:var(--slate)}

/* ── navigation bar ───────────────────────────────────────────────── */
.vxp-nav{display:flex;align-items:center;gap:14px;padding:12px clamp(16px,3vw,36px) 16px;flex:none}
.vxp-arrow{
  width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;
}
.vxp-arrow svg{width:20px;height:20px}
.vxp-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.vxp-arrow:disabled{opacity:.35;cursor:default}
.vxp-dots{flex:1 1 auto;display:flex;gap:6px;align-items:center;min-width:0}
.vxp-dots button{flex:1 1 0;max-width:72px;height:16px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.vxp-dots button::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;border-radius:2px;background:var(--line);transition:background .2s}
.vxp-dots button:hover::before{background:var(--slate)}
.vxp-dots button[aria-current]::before{background:var(--accent)}
.vxp-count{font:500 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate);flex:none}
dialog.vxp button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── large screens and projectors: scale the reused dashboard cards ── */
@media(min-width:1500px) and (min-height:860px){
  .vxp-body .vxh,.vxp-body .vxy{zoom:1.18}
}

/* ── short screens (small laptops) ────────────────────────────────── */
@media(min-width:761px) and (max-height:799px){
  .vxp-h{font-size:clamp(22px,2.5vw,32px);margin-bottom:14px;max-width:40ch}
  .vxp-kicker{margin-bottom:10px}
  .vxp-chart svg{max-height:44vh}
  .vxp-flow svg{max-height:32vh}
  .vxp-panels svg[viewBox^="0 0 560"],.vxp-panels svg[viewBox^="0 0 300"],.vxp-panels svg[viewBox^="0 0 220"]{max-height:42vh}
}

/* ── phones ───────────────────────────────────────────────────────── */
@media(max-width:760px){
  .vxp-kpis,.vxp-kpis.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vxp-panels.n2{grid-template-columns:minmax(0,1fr)}
  .vxp-dots{gap:3px}
  .vxp-brand span{display:none}
  .vxp-slide{margin:0 auto;padding-top:14px}
  .vxp-h{max-width:none}
  .vxp-chart svg,.vxp-flow svg{max-height:none}
  .vxp-flow{overflow-x:auto}
  .vxp-flow svg{min-width:640px}
}

@media print{
  dialog.vxp,.vxp-open{display:none!important}
}

/* ── builder additions: commentary, extras, actions, branding ─────── */
.vxp-mid{flex:1 1 auto;min-height:0;display:flex}
.vxp-mid > .vxp-stage{min-width:0}
.vxp-skin .vxp-kicker{color:var(--vxp-brand-text,var(--accent))}
.vxp-skin .vxp-dots button[aria-current]::before{background:var(--vxp-brand,var(--accent))}
.vxp-brand img{max-height:26px;max-width:110px;flex:none;align-self:center}
.vxp-logo{display:block;max-height:64px;max-width:260px;margin:0 0 26px}
.vxp-main{display:block}
.vxp-main.has-note{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1.25fr);gap:clamp(18px,2.6vw,40px);align-items:start}
.vxp-note{border-left:3px solid var(--vxp-brand,var(--accent));padding:4px 0 4px clamp(14px,1.6vw,26px);min-width:0}
.vxp-note > span{display:block;font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.vxp-note p{margin:0 0 .75em;font:400 clamp(15px,1.4vw,21px)/1.5 Inter,system-ui,sans-serif;color:var(--text);overflow-wrap:anywhere}
.vxp-note p:last-child{margin-bottom:0}
.vxp-prose.big{font-size:clamp(17px,1.7vw,25px);max-width:60ch}
.vxp-blank{margin:0;padding:22px;border:1px dashed var(--line);border-radius:16px;font:400 14px/1.6 Inter,system-ui,sans-serif;color:var(--slate)}
.vxp-extras{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:minmax(0,1fr);margin-top:clamp(12px,1.6vw,22px);align-items:start}
.vxp-extras.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vxp-extras.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vxp-extras .panel{margin:0;min-width:0;border-radius:18px;animation:none}
.vxp-extras svg[viewBox^="0 0 560"],.vxp-extras svg[viewBox^="0 0 300"],.vxp-extras svg[viewBox^="0 0 640"]{display:block;width:100%;height:auto;max-height:26vh}
.vxp-block{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:14px 16px;min-width:0}
.vxp-block h4{margin:0 0 10px;font:600 14px/1.2 "Space Grotesk",Inter,sans-serif}
.vxp-block .vxt-wrap{border:0;border-radius:0}
.vxp-chart .vxc-fig > svg{max-height:52vh}
.vxp-body .vxh.solo{grid-template-columns:minmax(0,1fr)}
.vxp-body .vxbk-grid{gap:clamp(12px,1.6vw,22px)}
.vxp-body .vxbk-tile{padding:clamp(16px,2vw,26px);border-radius:20px}
.vxp-body .vxbk-tile .v{font-size:clamp(22px,2.6vw,38px)}
.vxp-body table.vxt{font-size:clamp(13px,1.2vw,17px)}
.vxp-tools button[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}

.vxp-drawer{flex:0 0 min(340px,86vw);min-height:0;overflow:auto;border-left:1px solid var(--line);background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.vxp-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vxp-drawer h3{margin:0;font:600 17px/1.2 "Space Grotesk",Inter,sans-serif}
.vxp-drawer button{min-height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 12.5px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vxp-drawer form{display:flex;flex-direction:column;gap:8px}
.vxp-drawer form > button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#03201b);min-height:42px}
.vxp-drawer label{display:flex;flex-direction:column;gap:5px;font:500 12px/1.2 Inter,system-ui,sans-serif;color:var(--slate);min-width:0;flex:1 1 0}
.vxp-drawer input,.vxp-drawer textarea{min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--text);font:400 13.5px/1.5 Inter,system-ui,sans-serif;min-width:0;width:100%;box-sizing:border-box}
.vxp-drawer textarea{padding:9px 10px;resize:vertical}
.vxp-drawer-row{display:flex;gap:8px}
.vxp-drawer-note,.vxp-drawer-empty{margin:0;font:400 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxp-drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vxp-drawer li{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vxp-drawer li p{margin:0;font:400 13.5px/1.45 Inter,system-ui,sans-serif;overflow-wrap:anywhere}
.vxp-drawer li span{font:500 11.5px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate)}
.vxp-drawer li button{min-height:32px;font-size:12px}
@media(max-width:760px){
  .vxp-main.has-note{grid-template-columns:minmax(0,1fr)}
  .vxp-extras.n2,.vxp-extras.n3{grid-template-columns:minmax(0,1fr)}
  .vxp-tools{flex-wrap:wrap;justify-content:flex-end}
  .vxp-top{align-items:flex-start}
  .vxp-drawer{position:absolute;inset:0 0 0 auto;z-index:4}
  .vxp-mid{position:relative}
}