/* Plug-ins manager, Sandbox, storage meter. Uses the site's own colour variables. */
body.vkp-no-run .code-run-btn{ display:none !important; }
.vkp-plug,.vkp-sbx{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; gap:8px; color:var(--foam); background:var(--navy-800);
  padding:calc(12px + env(safe-area-inset-top)) max(14px, calc((100vw - 760px) / 2)) calc(12px + env(safe-area-inset-bottom)); }
.vkp-sbx{ padding-inline:14px; }
.vkp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vkp-actions,.vkp-btns{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vkp-scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding-bottom:20px; }
.vkp-scroll h4{ margin:12px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.vkp-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border:1px solid var(--navy-700); border-radius:12px; font-size:13.5px; }
.vkp-row > span:first-child{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vkp-row small,.vkp-note{ font-size:12px; opacity:.7; line-height:1.45; margin:0; }
.vkp-note code{ padding:1px 5px; border-radius:6px; border:1px solid var(--navy-700); }
.vkp-form{ display:flex; flex-direction:column; gap:6px; }
.vkp-form input,.vkp-form textarea,.vkp-bar select,.vkp-actions select{ font:inherit; font-size:13px; padding:8px 10px; border-radius:10px; color:inherit; background:var(--navy-900,transparent); border:1px solid var(--navy-700); outline:none; }
.vkp-form textarea{ font:12.5px ui-monospace,Menlo,Consolas,monospace; resize:vertical; }
.vkp-store{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.vkp-bar-track{ height:8px; border-radius:99px; background:var(--navy-700); overflow:hidden; }
.vkp-bar-track i{ display:block; height:100%; background:currentColor; opacity:.85; }
.vkp-bar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vkp-time{ margin-left:auto; font-size:12px; opacity:.7; }
.vkp-body{ flex:1; min-height:0; display:grid; gap:8px; grid-template-rows:1fr 1fr; }
@media (min-width:900px){ .vkp-body{ grid-template-rows:none; grid-template-columns:1fr 1fr; } }
.vkp-body textarea{ font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace; padding:10px; border-radius:10px; color:inherit; background:var(--navy-900,transparent); border:1px solid var(--navy-700); resize:none; outline:none; min-height:0; tab-size:2; }
.vkp-right{ min-height:0; display:flex; flex-direction:column; gap:8px; }
.vkp-preview{ flex:1.3; min-height:0; }
.vkp-preview iframe{ width:100%; height:100%; border:1px solid var(--navy-700); border-radius:10px; background:#fff; }
.vkp-console{ flex:1; min-height:60px; overflow:auto; padding:8px 10px; border:1px solid var(--navy-700); border-radius:10px; font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.vkp-l{ padding:1px 0; } .vkp-err{ color:#e5674e; } .vkp-warn{ color:#d9a441; } .vkp-ret{ opacity:.85; } .vkp-sys{ opacity:.55; font-style:italic; }
.vkp-search{ flex:1; min-width:140px; font:inherit; font-size:13px; padding:8px 10px; border-radius:10px; color:inherit; background:var(--navy-900,transparent); border:1px solid var(--navy-700); outline:none; }
.vkp-cxlist{ display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; overscroll-behavior:contain; }
.vkp-memlist{ display:flex; flex-direction:column; gap:6px; }
.vkp-mtext{ white-space:pre-wrap; word-break:break-word; font-size:13.5px; }
.vk-chip[data-active="1"]::after{ content:""; display:inline-block; width:7px; height:7px; margin-left:6px; border-radius:50%; background:currentColor; vertical-align:middle; }
.vkp-bar select{ max-width:150px; }
.vkp-runbar{ position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:130; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; font-size:13px; color:var(--foam); background:var(--navy-800); border:1px solid var(--navy-700); box-shadow:0 6px 24px rgba(0,0,0,.35); }

/* ===== Sandbox: fits every screen (phone, landscape phone, tablet, desktop) ===== */
.vkp-sbx{ height:100vh; height:var(--vkp-vh, 100dvh); bottom:auto; overflow:hidden; box-sizing:border-box; }
.vkp-sbx .vkp-head{ flex:0 0 auto; flex-wrap:nowrap; min-width:0; }
.vkp-sbx .vkp-head strong{ font-size:16px; flex:0 0 auto; }
.vkp-sbx .vkp-actions{ flex-wrap:nowrap; min-width:0; justify-content:flex-end; }
.vkp-sbx .vkp-actions select{ min-width:0; max-width:132px; }
/* one tidy row of tools that scrolls sideways instead of stacking into five rows */
.vkp-sbx .vkp-bar{ flex:0 0 auto; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-bottom:2px; mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent); }
.vkp-sbx .vkp-bar::-webkit-scrollbar{ display:none; }
.vkp-sbx .vkp-bar > *{ flex:0 0 auto; white-space:nowrap; }
.vkp-sbx .vkp-time{ margin-left:8px; padding-right:18px; }
.vkp-sbx .vkp-body{ grid-template-rows:minmax(0,3fr) minmax(0,2fr); grid-template-columns:minmax(0,1fr); }
.vkp-sbx .vkp-body > *{ min-width:0; min-height:0; }
.vkp-sbx .vkp-body:has(.vkp-preview:not([hidden])){ grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
.vkp-sbx .vkp-console:empty::before{ content:"Output appears here. Press Run (Ctrl/Cmd + Enter)."; opacity:.45; font-style:italic; }
/* wide screens and landscape phones: code on the left, result on the right */
@media (min-width:900px), (orientation:landscape) and (max-height:560px){
  .vkp-sbx .vkp-body, .vkp-sbx .vkp-body:has(.vkp-preview:not([hidden])){ grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (orientation:landscape) and (max-height:560px){
  .vkp-sbx{ gap:5px; padding-top:calc(6px + env(safe-area-inset-top)); padding-bottom:calc(6px + env(safe-area-inset-bottom));
    padding-inline:max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .vkp-sbx .vkp-head .btn, .vkp-sbx .vkp-head .icon-btn{ min-height:34px; }
}
@media (max-width:520px){
  .vkp-sbx{ padding-inline:max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); gap:6px; }
  .vkp-sbx .vkp-actions{ gap:4px; }
  .vkp-sbx .vkp-actions .btn{ padding:7px 12px; min-height:36px; }
  .vkp-sbx .vkp-actions select{ max-width:124px; padding:7px 4px; }
}
/* touch screens: 16 px fields so iPhones do not zoom when you tap into the code */
@media (pointer:coarse){
  .vkp-sbx textarea, .vkp-sbx select{ font-size:16px; }
  .vkp-sbx .vkp-console{ font-size:13px; }
  .vkp-sbx .btn-tiny{ min-height:34px; }
}
@media (min-width:1500px){ .vkp-sbx{ padding-inline:max(14px, calc((100vw - 1500px) / 2)); } }

/* ===== Sandbox extras (vk-sandbox-plus.js) ===== */
.vkp-chk{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; white-space:nowrap; }
.vkp-xbar select{ font-size:12.5px; padding:6px 8px; max-width:140px; }
.vkp-find{ flex:0 0 auto; }
.vkp-find .vkp-search{ min-width:90px; max-width:200px; }
.vkp-preview[data-dev="tablet"] iframe{ width:768px; max-width:100%; display:block; margin:0 auto; }
.vkp-preview[data-dev="phone"] iframe{ width:390px; max-width:100%; display:block; margin:0 auto; }
.vkp-body textarea{ overflow:auto; }

/* ===== Sandbox part 3: coloured code, file tabs, input box, plots ===== */
.vkp-edwrap{ position:relative; min-height:0; display:grid; }
.vkp-edwrap > textarea{ position:relative; z-index:1; background:transparent !important; color:transparent !important; caret-color:var(--foam,#fff); scrollbar-width:none; }
.vkp-edwrap > textarea::-webkit-scrollbar{ display:none; }
.vkp-edwrap > textarea::selection{ background:rgba(63,191,134,.35); }
.vkp-hl{ position:absolute; inset:0; margin:0; overflow:hidden; pointer-events:none; box-sizing:border-box; border:1px solid transparent; border-radius:10px; background:var(--navy-900,transparent); color:var(--foam,#eee); }
.vkp-hl i{ font-style:normal; } .hl-c{ color:#7a8f8b; font-style:italic !important; } .hl-s{ color:#3fb27f; } .hl-n{ color:#d19a3a; } .hl-k{ color:#5aa0d8; }
.vkp-stdin[hidden],.vkp-tabs[hidden]{ display:none; } .vkp-stdin{ flex:0 0 auto; align-items:flex-start; }
.vkp-plot{ max-width:100%; height:auto; background:#fff; border-radius:8px; display:block; margin:6px 0; }
.vkp-xbar .vkp-search{ padding:6px 10px; font-size:12.5px; min-width:110px; max-width:150px; flex:0 0 auto; }