/* ══════════════════════════════════════════════════════════════════════
   VisionX Studio styles — monthly phasing, notes on numbers, the Build
   your own page (tables, KPIs, charts, library, branding), the slide
   builder and share buttons.
   Colours come from the app's tokens. Status colours (green / red) and
   chart series colours are fixed and never follow the accent theme.
   ══════════════════════════════════════════════════════════════════════ */

:root{--vx-good:#2fb36b;--vx-bad:#e5634d}
:root[data-theme="light"]{--vx-good:#15803d;--vx-bad:#c2410c}

/* ── shared small pieces ──────────────────────────────────────────── */
.vxb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* visionx-business.css styles every table in the app (sticky upper-case headings, wide padding); these tables set their own. */
table.vxph-t th,table.vxt th,.vxb-grid table th{text-transform:none;letter-spacing:normal;position:static;top:auto;z-index:auto;color:var(--text);font-size:inherit}

/* ══════════ Monthly phasing ══════════ */
.vxph-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:12px}
.vxph-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vxph-seg button,.vxph-csv{
  min-height:36px;padding:0 14px;border:0;background:transparent;color:var(--slate);font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
}
.vxph-seg button+button{border-left:1px solid var(--line)}
.vxph-seg button[aria-pressed="true"]{background:var(--ai-soft);color:var(--text)}
.vxph-csv{border:1px solid var(--line);border-radius:10px;color:var(--text)}
.vxph-csv:hover,.vxph-seg button:hover{color:var(--text)}
.vxph-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.vxph-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
table.vxph-t{border-collapse:separate;border-spacing:0;min-width:100%;white-space:nowrap;font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:var(--text)}
table.vxph-t th,table.vxph-t td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line)}
table.vxph-t tbody tr:last-child th,table.vxph-t tbody tr:last-child td{border-bottom:0}
table.vxph-t .vxph-l{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;min-width:132px;border-right:1px solid var(--line);font:500 12.5px/1.3 Inter,system-ui,sans-serif}
table.vxph-t thead th{background:var(--panel);font-weight:500}
table.vxph-t thead .vxph-l{background:var(--panel);z-index:3;font:500 10.5px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate);vertical-align:bottom}
.vxph-m{text-align:center!important;font:600 12.5px/1.2 "Space Grotesk",Inter,sans-serif!important;border-left:1px solid var(--line)}
.vxph-m.now{color:var(--accent)}
table.vxph-t th.vxph-s{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
table.vxph-t td.a,table.vxph-t th.vxph-s:nth-child(3n+1){border-left:1px solid var(--line)}
table.vxph-t .alt{background:color-mix(in srgb,var(--text) 3.5%,transparent)}
table.vxph-t .tot{background:color-mix(in srgb,var(--accent) 7%,transparent)}
table.vxph-t td.b{color:var(--slate)}
table.vxph-t td.v.good{color:var(--vx-good)}
table.vxph-t td.v.bad{color:var(--vx-bad)}
table.vxph-t tr.cost .vxph-l{color:var(--slate);padding-left:20px}
table.vxph-t tr.strong th,table.vxph-t tr.strong td.a{font-weight:600}
table.vxph-t tr.grand th,table.vxph-t tr.grand td{font-weight:700;border-top:1px solid var(--slate)}
.vxph-c{font:inherit;color:inherit;background:none;border:0;padding:2px 5px;margin:-2px -5px;border-radius:6px;cursor:pointer;position:relative}
.vxph-c:hover{background:var(--ai-soft)}
.vxph-c:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.vxph-c.has-note::after{content:"";position:absolute;top:-1px;right:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.vxph-note{margin:10px 0 0;font:500 11.5px/1.5 Inter,system-ui,sans-serif;color:var(--dim)}
.vxph-print{display:none}
.vxph-q h4{margin:0 0 6px;font:600 12.5px/1.2 "Space Grotesk",Inter,sans-serif}
.vxph-q table.vxph-t{font-size:10.5px}
.vxph-q table.vxph-t th,.vxph-q table.vxph-t td{padding:5px 7px}
.vxph-q table.vxph-t .vxph-l{position:static;min-width:104px}
/* on a slide and in the PDF the year is shown as quarters, which fit the page */
.vxp-body .vxph-screen,.vxp-body .vxph-bar{display:none}
.vxp-body .vxph-print{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.vxp-body .vxph-q.wide{grid-column:1/-1}
.vxp-body .vxph-q{overflow-x:auto}
@media(max-width:900px){.vxp-body .vxph-print{grid-template-columns:minmax(0,1fr)}}

/* ══════════ Notes on numbers ══════════ */
.vxnote-btn,.kpi > .vxsh-btn{
  position:absolute;top:12px;right:46px;z-index:3;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:9px;cursor:pointer;color:var(--slate);background:var(--surface);border:1px solid var(--line);
  opacity:0;transform:scale(.9);transition:opacity .16s,transform .16s,border-color .16s,color .16s;
}
.kpi > .vxsh-btn{right:80px}
.vxnote-btn svg,.vxsh-btn svg{width:14px;height:14px}
.kpi:hover .vxnote-btn,.kpi:focus-within .vxnote-btn,.vxnote-btn:focus-visible,.vxnote-btn.on,
.kpi:hover > .vxsh-btn,.kpi:focus-within > .vxsh-btn,.kpi > .vxsh-btn:focus-visible{opacity:1;transform:none}
.vxnote-btn:hover,.vxsh-btn:hover{color:var(--text);border-color:var(--ai-line)}
.vxnote-btn:focus-visible,.vxsh-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vxnote-btn.on{color:var(--accent-ink,#03201b);background:var(--accent);border-color:var(--accent)}
.vxnote-btn i{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;
  background:var(--text);color:var(--paper);font:600 10px/16px "IBM Plex Mono",ui-monospace,monospace;font-style:normal;text-align:center}
@media(hover:none){.vxnote-btn{opacity:1;transform:none}.kpi > .vxsh-btn{display:none}}
.vxnote-flag{cursor:pointer}
.vxnote-flag rect{fill:var(--accent)}
.vxnote-flag text{fill:var(--accent-ink,#03201b);font:600 8px "IBM Plex Mono",ui-monospace,monospace}
.vxnote-flag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A closed dialog must never be drawn. The browser hides it by default, but any
   author rule that sets display on the same class would bring it back (the note
   window once shared a class name with the landing page's neural panel and stayed
   on screen after Close). These rules make that impossible for every Studio dialog. */
dialog.vxnote:not([open]),dialog.vxb-dlg:not([open]),dialog.vxd:not([open]){display:none!important}
dialog.vxnote,dialog.vxb-dlg{
  position:fixed;inset:0;margin:auto;height:fit-content;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);
  padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);overflow:auto;
}
dialog.vxnote::backdrop,dialog.vxb-dlg::backdrop{background:rgba(3,8,15,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vxnote-in,.vxb-dlg-in{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.vxnote-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vxnote-top h2,.vxb-dlg-in h2{margin:0;font:600 18px/1.25 "Space Grotesk",Inter,sans-serif}
.vxnote-x,.vxnote-save,.vxnote-meta button{
  min-height:36px;padding:0 14px;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;flex:none;
}
.vxnote-save{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#03201b);align-self:flex-start;min-height:42px}
.vxnote-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vxnote-list li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}
.vxnote-list p{margin:0 0 8px;font:400 14px/1.5 Inter,system-ui,sans-serif;white-space:pre-wrap}
.vxnote-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 11.5px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate)}
.vxnote-meta button{min-height:30px;padding:0 10px;font-size:11.5px}
.vxnote-empty,.vxnote-hint,.vxnote-lock{margin:0;font:400 13.5px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxnote-form{display:flex;flex-direction:column;gap:8px}
.vxnote-form label{font:600 12.5px/1.2 Inter,system-ui,sans-serif;color:var(--slate)}
.vxnote-form textarea,.vxb-dlg-in textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--text);
  font:400 14px/1.5 Inter,system-ui,sans-serif;resize:vertical;
}
.vxb-dlg-in p{margin:0;font:400 13.5px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-dlg-in textarea{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;white-space:pre}
.vxb-dlg-acts{display:flex;gap:8px;justify-content:flex-end}
.vxb-dlg-acts button{min-height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer}

/* ══════════ Share button on a panel ══════════ */
.ph > .vxsh-btn,.vxb-preview h4 > .vxsh-btn{
  margin-left:auto;width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--slate);cursor:pointer;
}
.vxsh-btn[aria-busy="true"]{opacity:.5;cursor:progress}

/* ══════════ Build your own ══════════ */
.vxb-page,.vxb-body{display:flex;flex-direction:column;gap:14px}
.vxb-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.vxb-tabs button{
  min-height:40px;padding:0 16px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--slate);
  font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer;
}
.vxb-tabs button:hover{color:var(--text)}
.vxb-tabs button[aria-selected="true"]{background:var(--ai-soft);border-color:var(--ai-line);color:var(--text)}
.vxb-lock{margin:0;padding:11px 14px;border-radius:12px;border:1px dashed var(--line);font:500 13px/1.45 Inter,system-ui,sans-serif;color:var(--text);background:color-mix(in srgb,#e0a030 10%,transparent)}
.vxb-saved{margin:0;font:500 11.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--dim)}
.vxb-split{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.vxb-list{flex:1 1 220px;min-width:0;max-width:300px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.vxb-list h3{margin:0 4px 6px;font:600 14px/1.2 "Space Grotesk",Inter,sans-serif}
.vxb-list p{margin:8px 4px 0;font:400 11.5px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.vxb-item.on{border-color:var(--accent);background:var(--ai-soft)}
.vxb-item b{display:block;font:600 13px/1.25 Inter,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vxb-item span{display:block;margin-top:2px;font:400 11.5px/1.3 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-new{min-height:42px;border-radius:11px;border:1px dashed var(--slate);background:transparent;color:var(--text);font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vxb-main{flex:5 1 560px;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px}
.vxb-row1{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.vxb-name{flex:1 1 240px;min-width:0}
.vxb-page label{display:flex;flex-direction:column;gap:6px;font:500 12px/1.2 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-page input[type="text"],.vxb-page select,.vxb-page textarea{
  min-height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--text);
  font:500 13.5px/1.3 Inter,system-ui,sans-serif;min-width:0;width:100%;box-sizing:border-box;
}
.vxb-page textarea{padding:10px 12px;line-height:1.5;resize:vertical;font-weight:400}
.vxb-page input:focus-visible,.vxb-page select:focus-visible,.vxb-page textarea:focus-visible,.vxb-page button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.vxb-page input:disabled,.vxb-page select:disabled,.vxb-page textarea:disabled,.vxb-page button:disabled{opacity:.55;cursor:not-allowed}
.vxb-name input{font:600 16px/1.2 "Space Grotesk",Inter,sans-serif!important}
.vxb-pill,.vxb-tools button,.vxb-strip-acts button,.vxb-form-acts button,.vxb-quick button,.vxb-lib button,.vxb-brand button{
  min-height:42px;padding:0 14px;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;
}
.vxb-pill[aria-pressed="true"],.vxb-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink,#03201b)!important}
.vxb-primary{min-height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--accent);font:700 13px/1 Inter,system-ui,sans-serif;cursor:pointer;align-self:flex-start}
.vxb-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vxb-tools button[aria-pressed="true"]{border-color:var(--accent)}
.vxb-tools .vxb-fig{flex:0 1 260px}
.vxb-page .danger{color:var(--vx-bad)}
.vxb-tools .danger{margin-left:auto}
.vxb-hint{margin:0;font:400 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px;border-radius:12px;border:1px solid var(--ai-line);background:var(--ai-soft)}
.vxb-strip label{flex:1 1 150px}
.vxb-strip label.wide{flex:3 1 260px}
.vxb-strip-acts{display:flex;gap:6px;flex-wrap:wrap}
.vxb-strip-help{flex:1 1 100%;margin:0;font:500 12px/1.4 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-strip-help.bad,.vxb-result.bad{color:var(--vx-bad)}

.vxb-grid{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.vxb-grid table{border-collapse:collapse;width:100%;min-width:560px;font:500 13px/1.3 Inter,system-ui,sans-serif}
.vxb-grid table th{padding:0;background:var(--panel);border-bottom:1px solid var(--line);text-align:left;vertical-align:bottom}
.vxb-grid table th.sel{box-shadow:inset 0 -2px 0 var(--accent)}
.vxb-grid table th button{display:block;width:100%;padding:9px 10px;background:none;border:0;color:var(--text);text-align:inherit;cursor:pointer}
.vxb-grid table th.n button{text-align:right}
.vxb-grid table th b{display:block;font:600 12.5px/1.25 Inter,system-ui,sans-serif}
.vxb-grid table th small{display:block;margin-top:3px;font:400 10px/1.2 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vxb-grid table th.n small{margin-left:auto}
.vxb-grid table th small.f{color:var(--accent)}
.vxb-grid table td{padding:4px 5px;border-bottom:1px solid var(--line);vertical-align:top}
.vxb-grid table td input{min-height:38px!important;border-color:transparent!important;background:var(--paper)!important;padding:0 8px!important;min-width:150px}
.vxb-grid table td.n input{min-width:92px}
.vxb-grid table th small{max-width:150px}
.vxb-grid table td input:focus{border-color:var(--accent)!important}
.vxb-grid table td.n input,.vxb-grid table td.n{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace}
.vxb-grid table td.calc{padding:13px 12px;color:var(--text)}
.vxb-live{display:block;padding:2px 8px 4px;font:500 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;color:var(--accent);text-align:right}
.vxb-grid .acts{width:1%;white-space:nowrap;text-align:right}
.vxb-grid .acts button{width:30px;height:30px;padding:0;margin:4px 1px 0;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.vxb-grid .acts button:hover:not(:disabled){color:var(--text);border-color:var(--slate)}
.vxb-grid .acts svg{width:14px;height:14px}
.vxb-grid table tfoot td{padding:11px 12px;background:var(--panel);font-weight:600;border-bottom:0}
.vxb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.vxb-cards > div{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px}
.vxb-cards b{font:600 13px/1.2 "Space Grotesk",Inter,sans-serif}
.vxb-cards p{margin:6px 0 0;font:400 12px/1.55 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-cards code{font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--text);background:var(--paper);padding:2px 5px;border-radius:5px;white-space:nowrap}
.vxb-empty{padding:26px 22px;border:1px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vxb-empty b{font:600 16px/1.2 "Space Grotesk",Inter,sans-serif}
.vxb-empty p{margin:0;max-width:62ch;font:400 13.5px/1.55 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-check{flex-direction:row!important;align-items:center;gap:9px!important;color:var(--text)!important;font-size:13px!important}
.vxb-check input{width:18px;height:18px;accent-color:var(--accent);flex:none}

/* read-only custom table (slides, PDF) */
.vxt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table.vxt{border-collapse:collapse;width:100%;font:500 14px/1.35 Inter,system-ui,sans-serif;color:var(--text)}
table.vxt th{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
table.vxt td{padding:10px 14px;border-bottom:1px solid var(--line)}
table.vxt tbody tr:last-child td{border-bottom:0}
table.vxt .n{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace}
table.vxt tfoot td{font-weight:700;border-top:1px solid var(--slate);border-bottom:0;background:var(--panel)}
.vxt-more{margin:0;padding:8px 14px;font:500 12px/1.4 Inter,system-ui,sans-serif;color:var(--dim);border-top:1px solid var(--line)}

/* KPI tiles (Build page, Overview, slides) */
.vxbk{margin:0 0 16px}
.vxbk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.vxbk-head h3{margin:0;font:600 15px/1.2 "Space Grotesk",Inter,sans-serif}
.vxbk-head button{min-height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--slate);font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vxbk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.vxbk-tile{display:flex;flex-direction:column;gap:6px;text-align:left;min-width:0;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
button.vxbk-tile{cursor:pointer;font:inherit}
button.vxbk-tile:hover,.vxbk-tile.on{border-color:var(--accent)}
.vxbk-tile .l{font:500 10.5px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.vxbk-tile .v{font:600 22px/1.1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:-.02em;overflow-wrap:anywhere}
.vxbk-tile small{font:500 12px/1.35 Inter,system-ui,sans-serif;color:var(--slate)}
.vxbk-tile small.good{color:var(--vx-good)}
.vxbk-tile small.bad{color:var(--vx-bad)}
.vxbk-tile em{font:400 11px/1.3 Inter,system-ui,sans-serif;font-style:normal;color:var(--dim)}
/* a KPI made on the retired KPIs & targets page can be taken off from here */
.vxbk-legacy-x{align-self:flex-start;min-height:30px;margin-top:2px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--slate);font:600 11.5px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vxbk-legacy-x:hover{color:var(--vx-bad);border-color:var(--vx-bad)}
.vxbk-legacy-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vxbk-spark{display:block;margin-top:2px;height:26px}
.vxbk-spark svg{display:block;width:100%;height:26px}
.vxb-quick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font:500 12px/1 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-quick button{min-height:36px;font-weight:500}
.vxb-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);align-items:end}
.vxb-form.flat{padding:0;border:0;background:none}
.vxb-form h3{grid-column:1/-1;margin:0;font:600 15px/1.2 "Space Grotesk",Inter,sans-serif}
.vxb-form .wide,.vxb-form-acts,.vxb-result{grid-column:1/-1}
.vxb-form-acts{display:flex;gap:8px;flex-wrap:wrap}
.vxb-result{margin:0;min-height:18px;font:500 12.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--accent)}

/* custom charts */
.vxb-preview{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px}
.vxb-preview h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 14px/1.2 "Space Grotesk",Inter,sans-serif}
.vxc-fig{margin:0}
.vxc-fig > svg{display:block;width:100%;height:auto;max-height:420px}
.vxc-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate)}
.vxc-key span{display:inline-flex;align-items:center;gap:7px}
.vxc-key i,.vxc-donut li i{width:11px;height:11px;border-radius:3px;flex:none}
.vxc-donut{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.vxc-donut svg{width:min(230px,60vw);height:auto;flex:none}
.vxc-donut ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:180px;flex:1 1 180px}
.vxc-donut li{display:flex;align-items:center;gap:9px;font:500 13px/1.3 Inter,system-ui,sans-serif;color:var(--text)}
.vxc-donut li span{flex:1 1 auto;min-width:0}
.vxc-donut li b{font:600 12.5px/1 "IBM Plex Mono",ui-monospace,monospace}
.vxc-empty{margin:0;padding:22px;border:1px dashed var(--line);border-radius:12px;font:400 13px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}

/* commentary library */
.vxb-lib{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.vxb-lib article{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.vxb-lib h4{margin:0;font:600 14px/1.25 "Space Grotesk",Inter,sans-serif}
.vxb-lib p{margin:0;font:400 13px/1.55 Inter,system-ui,sans-serif;color:var(--slate);white-space:pre-wrap;flex:1 1 auto}
.vxb-lib div{display:flex;gap:6px}
.vxb-lib button{min-height:34px}

/* branding */
.vxb-brand{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.vxb-brand .vxb-form{flex:3 1 420px;min-width:0;align-items:start}
.vxb-brand .vxb-form > div{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.vxb-brand .vxb-form > div label{width:100%}
.vxb-lab{font:500 12px/1.2 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-logo img{max-width:240px;max-height:100px;border:1px solid var(--line)}
.vxb-logo-none{padding:22px 26px;border:1px dashed var(--line);border-radius:12px;font:400 13px/1 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-logo p{margin:0;font:400 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxb-upload{flex-direction:row!important;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--accent);color:var(--text)!important;font-weight:600!important;cursor:pointer;width:auto!important}
.vxb-upload.off{opacity:.55;cursor:not-allowed}
.vxb-upload input{position:absolute;width:1px;height:1px;opacity:0}
.vxb-upload:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.vxb-color{display:flex;align-items:center;gap:12px;font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--text)}
.vxb-page .vxb-color input[type="color"]{width:56px;min-width:56px;height:42px;flex:none;padding:2px;border-radius:10px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.vxb-warn{margin:0;font:500 12px/1.5 Inter,system-ui,sans-serif;color:var(--text);padding:9px 12px;border-radius:10px;background:color-mix(in srgb,#e0a030 12%,transparent)}
.vxb-brand-prev{flex:2 1 280px;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.vxb-brand-prev .k{font:600 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.vxb-brand-prev img{max-width:180px;max-height:70px}
.vxb-brand-prev b{font:600 30px/1.05 "Space Grotesk",Inter,sans-serif;letter-spacing:-.03em;overflow-wrap:anywhere}
.vxb-brand-prev i{display:block;width:84px;height:6px;border-radius:3px;background:var(--vxb-brand,var(--accent))}
.vxb-brand-prev small{font:400 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}

/* PDF additions */
.vxb-cover{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.vxb-cover img{max-height:54px;max-width:220px}
/* the plate behind a company logo, wherever the logo is shown */
img.vx-plate-white{background:#fff;border-radius:8px;padding:6px 10px;box-sizing:content-box}
img.vx-plate-dark{background:#0b1826;border-radius:8px;padding:6px 10px;box-sizing:content-box}
.vxb-cover span{font:700 20px/1.2 "Space Grotesk",Inter,sans-serif;color:#fff}
.vxb-pdf{margin:0 0 18px;break-inside:avoid}
.vxb-pdf h3{margin:0 0 8px;font:600 14px/1.2 "Space Grotesk",Inter,sans-serif}

/* ══════════ Slide builder ══════════ */
dialog.vxd{
  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.vxd[open]{display:flex;flex-direction:column}
dialog.vxd::backdrop{background:var(--paper)}
dialog.vxd button,dialog.vxd select,dialog.vxd input,dialog.vxd textarea{font-family:Inter,system-ui,sans-serif}
dialog.vxd :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vxd-top{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:16px clamp(14px,2.4vw,28px) 14px;border-bottom:1px solid var(--line);flex:none}
.vxd-title{flex:1 1 240px;min-width:0}
.vxd-title span{display:block;font:600 10px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.vxd-title h2{margin:0;font:600 24px/1.1 "Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
.vxd-top button,.vxd-deck select{
  min-height:42px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 12.5px/1 Inter,system-ui,sans-serif;cursor:pointer;
}
.vxd-deck{display:flex;flex-direction:column;gap:4px;font:500 11px/1 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-deck select{min-width:170px;padding-right:8px}
.vxd-count{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--slate);padding:0 4px 14px}
.vxd-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink,#03201b)!important;font-weight:700!important;padding:0 20px!important}
.vxd-danger{color:var(--vx-bad)!important}
.vxd-lock{margin:0;padding:10px clamp(14px,2.4vw,28px);font:500 13px/1.45 Inter,system-ui,sans-serif;background:color-mix(in srgb,#e0a030 12%,transparent);flex:none}
.vxd-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(270px,330px);gap:16px;padding:16px clamp(14px,2.4vw,28px) 20px}
.vxd-cols > section{min-height:0;overflow:auto;border-radius:16px}
.vxd-list,.vxd-set{border:1px solid var(--line);background:var(--surface);padding:14px 12px}
.vxd-set{padding:16px 16px 20px;display:flex;flex-direction:column;gap:18px}
.vxd-list h3,.vxd-set h3,.vxd-pick h3{margin:0 4px 4px;font:600 14.5px/1.2 "Space Grotesk",Inter,sans-serif}
.vxd-set h3{margin:0 0 6px}
.vxd-set h3 label{font:inherit;color:inherit}
.vxd-help{margin:0 4px 10px;font:400 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-set .vxd-help{margin:0 0 8px}
.vxd-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.vxd-row{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;border-radius:11px;border:1px solid var(--line);background:var(--panel)}
.vxd-row.sel{border-color:var(--accent);background:var(--ai-soft)}
.vxd-row.off .vxd-name{text-decoration:line-through;color:var(--slate)}
.vxd-grip{flex:none;width:10px;cursor:grab;color:var(--dim)}
.vxd-grip svg{display:block;width:10px;height:18px;fill:currentColor}
.vxd-box{flex:none;width:24px;height:24px;padding:0;border-radius:7px;border:1px solid var(--slate);background:transparent;color:var(--accent-ink,#03201b);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vxd-box[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.vxd-box svg{width:14px;height:14px}
.vxd-name{flex:1 1 auto;min-width:0;min-height:42px;padding:0;border:0;background:none;color:var(--text);font:600 13px/1.25 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;overflow:hidden}
.vxd-name i{flex:none;min-width:16px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;color:var(--slate)}
.vxd-tag{flex:none;padding:3px 7px;border-radius:6px;background:var(--accent);color:var(--accent-ink,#03201b);font:600 10px/1 "IBM Plex Mono",ui-monospace,monospace}
.vxd-move{flex:none;display:flex;gap:2px}
.vxd-move button{width:24px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--slate);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vxd-move button:hover:not(:disabled){color:var(--text);background:var(--surface)}
.vxd-move button:disabled{opacity:.3;cursor:default}
.vxd-move svg{width:14px;height:14px}
.vxd-list h3 + .vxd-add{margin-top:8px}
.vxd-add{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin-bottom:6px;padding:6px 12px;border-radius:11px;border:1px dashed var(--slate);background:transparent;color:var(--text);text-align:left;cursor:pointer}
.vxd-add[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:var(--ai-soft)}
.vxd-add svg{flex:none;width:14px;height:14px;color:var(--accent)}
.vxd-add b{display:block;font:600 13px/1.2 Inter,system-ui,sans-serif}
.vxd-add small{display:block;margin-top:2px;font:400 11.5px/1.3 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-prev{display:flex;flex-direction:column;gap:10px}
.vxd-stage{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden;flex:none}
.vxd-canvas{width:1280px;height:720px;box-sizing:border-box;padding:44px 64px;display:flex;overflow:hidden;position:relative;
  background:radial-gradient(60% 50% at 12% 0%,rgba(var(--accent-rgb),.11),transparent 70%)}
.vxd-canvas .vxp-slide{animation:none!important;margin:auto}
.vxd-cap,.vxd-none{margin:0 4px;font:400 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-none button{min-height:34px;padding:0 12px;margin-left:6px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vxd-pick{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px}
.vxd-pick-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.vxd-pick-top button{min-height:38px;padding:0 14px;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}
.vxd-pick h4{margin:16px 0 8px;font:600 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.vxd-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.vxd-opt{min-height:46px;padding:8px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-align:left;cursor:pointer}
.vxd-opt:hover{border-color:var(--accent)}
.vxd-opt b{display:block;font:600 13px/1.25 Inter,system-ui,sans-serif}
.vxd-opt small{display:block;margin-top:2px;font:400 11.5px/1.3 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-auto{margin:0;padding:11px 13px;border-radius:12px;border:1px dashed var(--line);font:400 12.5px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-seg{display:flex;gap:6px;margin-bottom:8px}
.vxd-seg button{flex:1 1 0;min-height:42px;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}
.vxd-seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--ai-soft)}
.vxd-set label{display:block;font:500 12px/1.2 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-set input[type="text"],.vxd-set textarea,.vxd-set select{
  display:block;width:100%;box-sizing:border-box;margin-top:6px;min-height:42px;padding:0 12px;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;
}
.vxd-set textarea{padding:10px 12px;resize:vertical;margin-top:0}
.vxd-part{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin-bottom:6px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 13px/1.25 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.vxd-part span:nth-child(2){flex:1 1 auto;min-width:0}
.vxd-part em,.vxd-extra em{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;color:var(--slate)}
.vxd-sw{flex:none;width:34px;height:20px;border-radius:10px;background:var(--slate);display:flex;align-items:center;padding:0 2px;box-sizing:border-box}
.vxd-sw i{width:16px;height:16px;border-radius:50%;background:var(--surface)}
.vxd-part[aria-pressed="true"] .vxd-sw{background:var(--accent);justify-content:flex-end}
.vxd-extra{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:6px;padding:0 6px 0 12px;border-radius:10px;border:1px solid var(--ai-line);background:var(--ai-soft);font:500 13px/1.25 Inter,system-ui,sans-serif}
.vxd-extra span{flex:1 1 auto;min-width:0}
.vxd-extra button,.vxd-tools button{min-height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vxd-dashed,.vxd-set .vxd-danger{width:100%;min-height:44px;border-radius:10px;border:1px dashed var(--slate);background:transparent;color:var(--text);font:600 12.5px/1.2 Inter,system-ui,sans-serif;cursor:pointer;padding:0 12px}
.vxd-set .vxd-danger{border-style:solid;border-color:var(--line)}
.vxd-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.vxd-tools .vxd-ai{border-color:var(--ai-line);background:var(--ai-soft)}
.vxd-aimsg{margin:8px 0 0;font:500 12px/1.5 Inter,system-ui,sans-serif;color:var(--slate)}
.vxd-tools select{width:auto;flex:1 1 150px;min-width:0;max-width:100%;margin:0;min-height:34px;font-size:12px;padding:0 8px}
dialog.vxd button:disabled,dialog.vxd textarea:disabled,dialog.vxd input:disabled,dialog.vxd select:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:1100px){
  dialog.vxd{overflow:auto}
  dialog.vxd[open]{display:block}
  .vxd-cols{display:flex;flex-direction:column}
  .vxd-cols > section{overflow:visible}
  /* stacked: keep the slide list short so the preview and settings stay within reach */
  .vxd-rows{max-height:44vh;overflow:auto}
}

@media print{
  .vxph-bar,.vxph-screen,.vxnote-btn,.vxsh-btn,.vxbk-head button{display:none!important}
  .vxph-print{display:block}
  .vxph-q{break-inside:avoid;margin-bottom:12px}
  table.vxph-t td.v.good{color:#15803d}table.vxph-t td.v.bad{color:#b91c1c}
  dialog.vxd,/* A closed dialog must never be drawn. The browser hides it by default, but any
   author rule that sets display on the same class would bring it back (the note
   window once shared a class name with the landing page's neural panel and stayed
   on screen after Close). These rules make that impossible for every Studio dialog. */
dialog.vxnote:not([open]),dialog.vxb-dlg:not([open]),dialog.vxd:not([open]){display:none!important}
dialog.vxnote,dialog.vxb-dlg{display:none!important}
}