/* =========================
   THEME TOKENS (merged)
   ========================= */
:root{
  color-scheme: dark;

  /* palette */
  --bg:#16181b;
  --panel:#1e2024;
  --panel-2:#1a1c1f;
  --border:#2b2f34;
  --muted:#aeb5bd;
  --brand:#2e5bea;
  --ok:#7dffa0;
  --err:#ff8b8b;
  --link:#9ecbff;
  --link-hover:#f59e0b;
  --text:#e9edf3;

  /* glass + shadows */
  --glass: rgba(255,255,255,.05);
  --glass-brd: rgba(255,255,255,.12);
  --shadow-3d: 0 24px 60px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.22);

  /* layout */
  --outer-gap: 8px;

  /* alt tokens used by some blocks */
  --panel-bg: rgba(22,24,28,0.55);
  --panel-border: rgba(255,255,255,0.08);
  --pane-foot-bg: #000;
  --pane-foot-text: #fff;

  /* buttons (for special cases) */
  --btn-bg: #000000;
  --btn-fg: #ffffff;

  /* brand header sizing */
  --brand-title2-size: clamp(24px, 2.6vw, 34px);
  --brand-tagline2-size: clamp(12px, 1.3vw, 14px);
  --brand-gap-y: 2px;
  --brand-logo-extra: 10px;

  /* chevrons (desktop defaults) */
  --chev-w: 28px;
  --chev-h: 120px;
  --chev-top: 68vh;
  --chev-icon: 26px;
}

body.light{
  color-scheme: light;

  /* palette */
  --bg:#eef2f7;
  --panel:#ffffff;
  --panel-2:#f1f4f9;
  --border:#d7dbe2;
  --muted:#6b7280;
  --brand:#2457ff;
  --ok:#22985a;
  --err:#cc2f2f;
  --link:#204ecf;
  --link-hover:#f59e0b;
  --text:#0b0b0b;

  /* glass + shadows */
  --glass: rgba(0,0,0,.05);
  --glass-brd: rgba(0,0,0,.12);
  --shadow-3d: 0 24px 60px rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.08);

  /* alt tokens */
  --panel-bg: rgba(255,255,255,0.7);
  --panel-border: rgba(0,0,0,0.08);
  --pane-foot-bg: #ffffff;
  --pane-foot-text: #000000;

  /* special buttons */
  --btn-bg:#ffffff;
  --btn-fg:#000000;
}

/* =========================
   BASE + LAYOUT
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* no page scrollbars on desktop layout; mobile re-enables in media */
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

.stage{
  padding-block: var(--outer-gap);
  padding-inline: 12px;
}

a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--link-hover); }

/* =========================
   HEADER (center brand, right nav)
   ========================= */
.site-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:26px 24px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-3d);
}

.brand-wrap{ grid-column: 2; justify-self: center; }
.brand-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:12px;
  row-gap:var(--brand-gap-y);
  align-items:center;
}
.brand-logo{
  grid-row:1 / 3;
  width:  calc(var(--brand-title2-size) + var(--brand-tagline2-size) + var(--brand-gap-y) + var(--brand-logo-extra));
  height: calc(var(--brand-title2-size) + var(--brand-tagline2-size) + var(--brand-gap-y) + var(--brand-logo-extra));
  object-fit:contain;
}
.brand-title2{
  font-size:var(--brand-title2-size);
  font-weight:400;
  line-height:1.05;
  white-space:nowrap;
}
.brand-tagline2{
  font-size:var(--brand-tagline2-size);
  line-height:1.1;
  color:var(--muted);
  white-space:nowrap;
}
.brand-tagline2 .dot{ font-weight:900; display:inline-block; margin:0 .25ch; transform:translateY(-0.02em); }

.site-nav{ grid-column:3; justify-self:end; display:flex; gap:16px; }
.site-nav a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.site-nav a:hover{ color:var(--link-hover); }




button:disabled { opacity: .6; cursor: not-allowed; }

/* --- Panel toggle buttons --- */
.btn.btn-toggle[aria-pressed="true"],
.btn.btn-toggle.is-on{
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}

/* Remove old chevrons */
.chevron-tab{ display:none !important; }

/* Small-screen stacked behavior for show-left/show-right flags */
@media (max-width:1024px){
  .app.show-left  .left.panel { display:block; }
  .app.show-right .right.panel{ display:block; }
  .app{ display:flex; flex-direction:column; gap:8px; height:auto; }

  /* keep your nice collapse animations */
  .left.panel, .right.panel{
    overflow:hidden; max-height:1000px; opacity:1; transform:translateY(0);
    transition:max-height .35s ease, opacity .25s ease, transform .35s ease;
  }

  /* hide only if JS adds these */
  .app.hide-left  .left.panel { max-height:0; opacity:0; transform:translateY(-8px); pointer-events:none; }
  .app.hide-right .right.panel { max-height:0; opacity:0; transform:translateY(8px);  pointer-events:none; }
}




/* =========================
   APP GRID
   ========================= */
.app{
  display:grid;
  grid-template-columns: minmax(240px,25%) 8px minmax(0,50%) 8px minmax(240px,25%);
  grid-template-rows: 1fr;
  gap:5px;
  height:100%;
  min-height:0;
}
.app.collapsed-left{
  grid-template-columns: 0 0 minmax(0,75%) 8px minmax(240px,25%);
}
.app.collapsed-left .left.panel{ display:none; }
.app.collapsed-left .v-resize:first-of-type{ display:none; } /* optional: hide the left resizer */

 .app.collapsed-right{
   grid-template-columns: minmax(240px,25%) 8px minmax(0,75%) 0 0;
 
 }
 .app.collapsed-right .right.panel{ display:none; }
.app.collapsed-right .v-resize:last-of-type{ display:none; } /* optional */

.app.collapsed-left.collapsed-right{
  grid-template-columns: 0 0 1fr 0 0;
  
}
/* =========================
   PANELS
   ========================= */
.panel{
  background: linear-gradient(180deg, var(--panel) 0%, color-mix(in oklab, var(--panel), #000 4%) 100%);
  border:1px solid var(--border);
  border-radius:0;
  overflow:hidden;
  box-shadow: var(--shadow-3d);
  min-width:0;
  min-height:0;
}

.pane-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  background:var(--glass);
  border-bottom:1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  font-weight:500;
}
.pane-head .title{ font-weight:500; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pane-head .right-controls{ margin-left:auto; display:flex; gap:8px; flex-wrap:nowrap; min-width:0; }

.left.panel{ grid-column:1; display:flex; flex-direction:column; min-height:0; }
.left .pane-head .title{ display:none; }
.left .pane-head .select{ max-width:50%; }
.left .pane-body{
  padding:10px 12px;
  height:auto;
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.pane-head select{
  appearance:none;
  background: color-mix(in oklab, var(--panel), transparent 70%);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color:var(--text);
  padding:8px 28px 8px 10px;
  border-radius:0;
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.08) inset;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='none' stroke='%23aeb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:12px;
  background: color-mix(in oklab, var(--panel), transparent 80%);
  border:1px solid color-mix(in oklab, var(--glass-brd), transparent 20%);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.pane-head select:focus{ outline:2px solid color-mix(in oklab, var(--brand), transparent 50%); outline-offset:2px; }
.pane-head select option{ background:var(--panel-2); color:var(--text); }
body.light .pane-head select{ border-color:rgba(0,0,0,.12); }
.left.panel .pane-head{ gap:0; } /* no side gap so it can reach edge-to-edge */

.left.panel .pane-head .select,
.left.panel .pane-head select{
  width:100%;
  flex:1 1 auto;          /* grow to fill the pane-head */
  margin:0;
  text-align:left;      /* Firefox */
  text-align-last:left; /* Chrome/Edge – centers the displayed value */
  padding-right:34px;     /* keep space for the custom arrow */
}

/* keep the dropdown menu itself left-aligned when open */
.left.panel .pane-head select option{ text-align:left; }

#leftContent .wrap{ max-width:1200px; margin:0 auto; }

.center.panel{ grid-column:3; display:flex; flex-direction:column; min-height:0; }
#editor{ flex:1 1 0; min-height:0; height:100%; display:block; }

.right.panel{ grid-column:5; display:flex; flex-direction:column; min-height:0; background: var(--panel-bg); }

/* Resizers */
.v-resize{ width:8px; cursor:col-resize; }
.v-resize div{ width:100%; height:100%; background:transparent; }
.v-resize div:hover{ background:var(--glass); }

/* Frozen tone */
.panel.frozen{ filter:saturate(.85) brightness(.92); }
.panel.frozen .pane-head{ filter:grayscale(.2); }

/* Dim overlay (but allow interaction/scroll) */
.screen-dim{ opacity:.55; }

/* =========================
   BUTTONS
   ========================= */
.btn{
  width:36px; height:36px; padding:0; border-radius:0;
  border:1px solid var(--glass-brd);
  background:var(--glass);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  display:inline-grid; place-items:center;
  box-shadow: none;
}
.btn.primary{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.05));
  border-color:transparent;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn svg{ width:18px; height:18px; fill:currentColor; }

/* Opt-in attention only */
@keyframes glowPulseFix {
  0%,100% { box-shadow: 0 0 0 currentColor; }
  50%     { box-shadow: 0 0 18px currentColor, 0 0 34px currentColor; }
}
.btn.attn{ animation: glowPulseFix 1.2s ease-in-out infinite; }
.btn:not(.attn){ animation:none; box-shadow:none; filter:none; }

/* Run / Reset cues */
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.08);} 100%{transform:scale(1);} }
@keyframes spinReset { to{ transform:rotate(360deg); } }
.btn.is-running{ animation:pulse .9s ease-in-out infinite; }
.btn.is-resetting svg{ animation:spinReset .7s linear infinite; }
.btn.is-running:disabled,
.btn.is-resetting:disabled{ animation:none; }

/* Pyplot button (always black, glowing when enabled) */
.pane-head .right-controls, .right-controls { overflow:visible; }
#btnPlotPreview{
  position:relative; z-index:1;
  border:none; background:#000; color:#fff;
}
#btnPlotPreview:disabled{ opacity:.6; cursor:not-allowed; }
@keyframes glowWhite {
  0%,100% { box-shadow:0 0 0 rgba(255,255,255,0); }
  50%     { box-shadow:0 0 12px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.6); }
}
#btnPlotPreview:not([disabled])::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:glowWhite 1.2s ease-in-out infinite; z-index:-1;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{ padding-block:12px; padding-inline:12px; font-size:12px; overflow: hidden; }
.site-footer .footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "left right"
    "left legal";
  align-items:center;
  column-gap:12px;
}
.site-footer .footer-left  { grid-area:left;  justify-self:start; display:flex; align-items:center; gap:8px; min-width:0;}
.site-footer .footer-center{ grid-area:right; justify-self:end;   display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:nowrap;  }
.site-footer .footer-right { grid-area:legal; justify-self:end;   gap: 10px; display:flex; flex-wrap: nowrap !important; white-space: nowrap !important;  min-width:0; overflow:hidden; }

.footer-logo{ width:26px; height:26px; object-fit:contain; }
.footer-left .powered{ font-size:12px; line-height:1.1; display:block; }
.footer-left .subline{ font-size:12px; color:var(--muted); line-height:1.1; display:block;}
.footer-left .subline .dot{ font-weight:900; margin:0 2px; }

.footer-center .label{ margin-right:6px; color:var(--muted); }
.footer-center .social{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 4px; flex:0 0 auto; color:var(--link); }
.footer-center .social:hover{ color:var(--link-hover); }
.footer-center .social svg{ width:18px; height:18px; }

.site-footer .footer-center {               /* keep in a single row */
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}
.site-footer .footer-center .label{
  display:inline; margin-right:6px;         /* keep label on same line */
}
.site-footer .footer-center .social{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin:0 6px;
  color:var(--text);                        /* <-- theme color: white/black */
}
.site-footer .footer-center .social:hover{ color:var(--link-hover); }

/* ensure SVGs / icon fonts actually take the color */
.site-footer .footer-center .social svg,
.site-footer .footer-center .social i{
  fill:currentColor; color:currentColor;
}

/* =========================
   OUTPUT / PREVIEW
   ========================= */
#output{
  flex:1 1 0;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:block;
  background:transparent !important;
  color:var(--text);
  padding:10px;
}
#output *, #output table, #output pre { background-color:transparent !important; }

#jconsole{
  display:inline-block;
  min-width:100%;
  white-space:pre;
  word-break:normal;
  overflow-wrap:normal;
  overflow:visible;
  padding:0;
}

#preview{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}

/* =========================
   STATUS CHIPS (pane foot)
   ========================= */
.pane-foot .msg.status{ display:inline-flex; align-items:center; gap:8px; font-weight:500; }
.pane-foot .msg.status .icon{
  width:12px; height:12px; border-radius:999px; display:inline-block; position:relative;
}
.pane-foot .msg.status .text{ display:inline-flex; align-items:baseline; gap:4px; }
.pane-foot .status .detail{
  opacity:.85; margin-left:6px; font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* colors per pane */
#leftFoot{  color:#f59e0b; }
#centerFoot{color:var(--ok); }
#rightFoot{ color:var(--brand); }
#rightFoot.error,
#rightFoot.status.error{ color:var(--err); }

/* READY */
@keyframes pulseDot {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 currentColor; }
  50%     { transform:scale(1.15); box-shadow:0 0 10px 2px color-mix(in oklab, currentColor, transparent 60%); }
}
.pane-foot .status.ready .icon,
.pane-foot.status.ready .icon{ background:currentColor; animation:pulseDot 1.2s ease-in-out infinite; }

/* WAITING */
@keyframes breath {
  0%,100% { box-shadow:0 0 0 0 currentColor; }
  50%     { box-shadow:0 0 8px 2px color-mix(in oklab, currentColor, transparent 60%); }
}
@keyframes dot {
  0%,20% { opacity:.2; transform:translateY(0); }
  50%    { opacity:1;  transform:translateY(-2px); }
  80%,100%{ opacity:.2; transform:translateY(0); }
}
.pane-foot .status.waiting .icon,
.pane-foot.status.waiting .icon{ border:2px solid currentColor; background:transparent; animation:breath 1.4s ease-in-out infinite; }
.pane-foot .status.waiting .dots span,
.pane-foot.status.waiting .dots span{
  display:inline-block; width:4px; height:4px; border-radius:999px; background:currentColor; margin-left:3px; animation:dot 1.2s ease-in-out infinite;
}
.pane-foot .status.waiting .dots span:nth-child(2),
.pane-foot.status.waiting .dots span:nth-child(2){ animation-delay:.2s; }
.pane-foot .status.waiting .dots span:nth-child(3),
.pane-foot.status.waiting .dots span:nth-child(3){ animation-delay:.4s; }

/* RUNNING */
@keyframes spin { to{ transform:rotate(360deg); } }
.pane-foot .status.running .icon,
.pane-foot.status.running .icon{
  width:12px; height:12px; border-radius:999px;
  border:2px solid transparent; border-top-color:currentColor; border-left-color:currentColor;
  animation:spin .8s linear infinite;
}
.pane-foot .status.running .dots span,
.pane-foot.status.running .dots span{
  display:inline-block; width:4px; height:4px; margin-left:3px; border-radius:999px; background:currentColor; animation:dot 1.2s ease-in-out infinite;
}
.pane-foot .status.running .dots span:nth-child(2),
.pane-foot.status.running .dots span:nth-child(2){ animation-delay:.2s; }
.pane-foot .status.running .dots span:nth-child(3),
.pane-foot.status.running .dots span:nth-child(3){ animation-delay:.4s; }

/* SUCCESS */
@keyframes popIn { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.2);} 100%{transform:scale(1);opacity:1} }
.pane-foot .status.success .icon,
.pane-foot.status.success .icon{ border:2px solid currentColor; background:transparent; }
.pane-foot .status.success .icon::before,
.pane-foot.status.success .icon::before{
  content:'✓'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; font-weight:700; color:currentColor; animation:popIn .35s ease-out both;
}

/* ERROR */
@keyframes shakeX { 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-1.5px); } 75%{ transform:translateX(1.5px); } }
.pane-foot .status.error .icon,
.pane-foot.status.error .icon{ border:2px solid currentColor; background:transparent; animation:shakeX .5s linear 1; }
.pane-foot .status.error .icon::before,
.pane-foot.status.error .icon::before{
  content:'✕'; position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; color:currentColor;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pane-foot .msg.status .icon,
  .pane-foot .msg.status .dots span,
  .btn.is-running,
  .btn.is-resetting svg,
  .btn.attn{ animation:none !important; }
}

/* =========================
   MODAL (centered)
   ========================= */
.pc-modal{
  position:fixed; inset:0; display:none; place-items:center; z-index:1000;
}
.pc-modal[aria-hidden="false"]{ display:grid; }
.pc-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.pc-modal__dialog{
  position:relative; margin:0; width:min(90vw, 820px); max-height:80vh;
  overflow:hidden; display:flex; flex-direction:column;
  background: var(--panel, #111);
  color:inherit;
  border:1px solid var(--panel-border, rgba(255,255,255,.1));
  border-radius:0;
  box-shadow:0 20px 50px rgba(0,0,0,.35); padding:14px;
}
.pc-modal__header{ display:flex; align-items:center; justify-content:space-between; }
.pc-modal__body{ overflow:auto; max-height:60vh; }
.pc-modal__footer{ display:flex; justify-content:flex-end; gap:8px; }

/* footer button look (hidden if you prefer no footer CTAs) */
.pc-modal__footer .btn{
  border-radius:0; padding:6px 14px; background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--panel-border);
  display:none; /* show if you want footer buttons */
}
.pc-modal__footer .btn:hover{ filter:brightness(1.08); }

.pc-modal__close{
  width:32px; height:32px; display:inline-grid; place-items:center;
  background:transparent; border:1px solid rgba(127,127,127,.35);
  border-radius:8px; color:inherit; cursor:pointer;
  transition: background .2s, border-color .2s, color .2s, transform .08s;
}
.pc-modal__close:hover{
  background:rgba(127,127,127,.15);
  border-color:rgba(127,127,127,.55);
  color:var(--brand);
}
.pc-modal__close:active{ transform:translateY(1px); }
.pc-modal__close:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

.cx-summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; }
.cx-table{ width:100%; border-collapse:collapse; font:13px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.cx-table th, .cx-table td{ border-bottom:1px solid rgba(127,127,127,.25); padding:6px 8px; vertical-align:top; }
.cx-table th{ text-align:left; position:sticky; top:0; background:inherit; }
.cx-notes{ opacity:.9; font-size:12px; margin-top:8px; }
#btnComplexity{ margin-right:8px; }
#btnComplexity svg{ display:block; }
#btnComplexity .sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================
   CHEVRONS — FINAL
   ========================= */
.chevron-tab{
  position:fixed; top:var(--chev-top); transform:translateY(-50%);
  width:var(--chev-w); height:var(--chev-h);
  border:0; border-radius:0;
  background:rgba(255,255,255,0.01);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display:grid; place-items:center;
  cursor:pointer; opacity:.08;
  transition:opacity .25s ease, background .25s ease, color .25s ease, transform .25s ease;
  z-index:9999;
}
.chevron-tab.left{ left:0; }
.chevron-tab.right{ right:0; }
.chevron-tab *{ display:initial; }
.chevron-tab svg{
  width:var(--chev-icon); height:var(--chev-icon);
  fill:currentColor; color:var(--text);
  transition:transform .25s ease, color .25s ease;
}
.chevron-tab.left  svg{ transform:rotate(180deg); }
.chevron-tab.right svg{ transform:rotate(0deg);    }
.chevron-tab.left[aria-expanded="true"]  svg{ transform:rotate(0deg);   }
.chevron-tab.right[aria-expanded="true"] svg{ transform:rotate(180deg); }
.chevron-tab:hover, .chevron-tab:focus-visible{
  background:rgba(255,255,255,0.10); opacity:.95; outline:none;
}
body.light .chevron-tab{ background:rgba(255,255,255,0.25); opacity:.12; }
body.light .chevron-tab:hover{ background:rgba(255,255,255,0.45); opacity:.95; }

/* =========================
   PAGE FX
   ========================= */
@keyframes pageIn { from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }
.page-fade, body.page-fade{ animation: pageIn .55s ease-out both; }
.page-fade .site-header{ animation-delay:.02s; }
.page-fade .stage, .page-fade .app{ animation-delay:.06s; }
.page-fade .site-footer{ animation-delay:.10s; }
@media (prefers-reduced-motion: reduce){
  .page-fade, body.page-fade,
  .page-fade .site-header, .page-fade .stage, .page-fade .app, .page-fade .site-footer{ animation:none !important; }
}

/* =========================
   H-OVERFLOW SAFETY
   ========================= */
html, body{ overflow-x: hidden; }
.site-header nav, .pane-head .right-controls{ min-width:0; flex-wrap:nowrap; }
.site-header nav{ white-space:normal; }

#leftPanel, #centerPanel, #rightPanel,
.panel, .pane-head, .pane-body, #editor, #output{ min-width:0; }

/* =========================
   CONTAINER QUERIES (editor head)
   ========================= */
#centerPanel{ container-type:inline-size; }

@container (max-width:760px){
  #centerPanel .pane-head .title{ font-size:13px; }
  #centerPanel .pane-head .btn{ width:34px; height:34px; }
}
@container (max-width:640px){
  #centerPanel .pane-head .title{ font-size:12px; }
  #centerPanel .pane-head .btn{ width:32px; height:32px; }
}
@container (max-width:520px){
  #centerPanel .pane-head{ align-items:flex-start; }
  #centerPanel .pane-head .right-controls{ flex-direction:row; align-items:center; gap:6px; }
}



/*PANEL OUT IN ANIMATION*/

/* enable grid track animation */
@media (prefers-reduced-motion: no-preference){
  .app{
    transition: grid-template-columns .35s cubic-bezier(.2,.6,.2,1), gap .2s;
  }
  .panel{
    transition: opacity .25s ease, transform .35s cubic-bezier(.2,.6,.2,1);
    will-change: transform, opacity;
  }
}

/* when collapsing, slide + fade the side panels */
.app.collapsed-left  .left.panel{
  opacity: 0; transform: translateX(-12px);
  pointer-events: none; visibility: hidden;
}
.app.collapsed-right .right.panel{
  opacity: 0; transform: translateX(12px);
  pointer-events: none; visibility: hidden;
}

/* (optional) fade the hidden resizers */
.app.collapsed-left  .v-resize:first-of-type,
.app.collapsed-right .v-resize:last-of-type{
  opacity:0; transition:opacity .2s; pointer-events:none;
}




@media (prefers-reduced-motion: no-preference){
  .app{
    transition: grid-template-columns .28s cubic-bezier(.2,.6,.2,1), gap .2s;
  }
  .panel{
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.6,.2,1);
    will-change: transform, opacity;
  }

  /* when collapsing desktop panels */
  .app.collapsed-left  .left.panel  { opacity:0; transform:translateX(-10px); pointer-events:none; }
  .app.collapsed-right .right.panel { opacity:0; transform:translateX( 10px); pointer-events:none; }
}

@keyframes swapIn { from { opacity:.6; transform:translateY(6px); } to { opacity:1; transform:none; } }
.app.swap-anim { animation: swapIn .28s ease-out; }




/* expanded states */
.app.expand-left  { grid-template-columns: 1fr 0 0 0 0 !important;  }
.app.expand-right { grid-template-columns: 0 0 0 0 1fr !important;}
.app.expand-center{ grid-template-columns: 0 0 1fr 0 0 !important; }

/* stacked: make the chosen one taller */
@media (max-width:1024px){
  .app.expand-left  .left.panel   { flex-basis: 78svh !important;}
  .app.expand-right .right.panel  { flex-basis: 78svh !important;}
  .app.expand-center .center.panel{ flex-basis: 78svh !important;}
}

button:disabled { opacity: .6; cursor: not-allowed; }





/* =======================================================================
   MEDIA QUERIES — ONE PER BREAKPOINT
   ======================================================================= */


/* ≤1024px — stacked app + fixed compact header */
@media (max-width:1024px){
  html,body{ overflow-y:auto; overflow-x:hidden; }

  :root{ --mhead-h:52px; }
  body > header.site-header{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
    padding:8px 12px; height:var(--mhead-h);
    background:var(--glass); border-bottom:1px solid var(--glass-brd);
    backdrop-filter: blur(10px);
    
  }
  .stage{ padding-top: calc(var(--mhead-h) + 8px); }

  .app{
    display:flex; flex-direction:column; gap:8px;
    height:auto; min-height:0;
  }
  header.site-header{ order:1; }
 
 
 
 .left.panel{ order:2; }
  .center.panel{ order:3; }
  .right.panel{ order:4; }

  /* animated collapse/expand for stacked panels */
  .left.panel, .right.panel{
    overflow:hidden;
    max-height: 1000px;      /* large enough to fit content */
    opacity: 1;
    transform: translateY(0);
    transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
  }

  /* collapse states (triggered by your .app.collapsed-* classes) */
  .app.collapsed-left  .left.panel{
    max-height:0; opacity:0; transform:translateY(-8px); pointer-events:none;
  }
  .app.collapsed-right .right.panel{
    max-height:0; opacity:0; transform:translateY(8px);  pointer-events:none;
  }
  
  
  
  
  
  
  .chevron-tab.right{display: none};
  .center.panel{ order:3; }
  .right.panel { order:4;}
  footer.site-footer{ order:5; }

  .v-resize{ display:none; }

  #editor{ min-height: clamp(260px, 52svh, 64svh); }
  #output{ min-height: clamp(180px, 34svh, 48svh); }


  .brand-wrap{ grid-column:1; justify-self:start; }
  .brand-logo{ width:26px; height:26px; }
  .brand-title2{ font-size:18px; line-height:1.05; font-weight:400; }
  .brand-tagline2{ font-size:10px; line-height:1.1; }
  .site-nav{ grid-column:3; justify-self:end; display:flex; gap:10px; }
  .site-nav a, .site-header nav a{ font-size:11px; line-height:1; }

  /* Editor toolbar wrapping retained (uses container queries above) */
  
}

/* ≤640px — footer stack + smaller chevrons */
@media (max-width:640px){
  .site-footer{ padding:10px 12px; }
  .site-footer .footer-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "right"
      "legal";
    row-gap:8px; text-align:center;
  }
  .site-footer .footer-left   { justify-self:center; flex-direction:column; gap:6px; }
  .site-footer .footer-center { justify-self:center; flex-direction:row; gap:6px; flex-wrap:nowrap; }
  .site-footer .footer-right  { justify-self:center; gap:10px; flex-wrap: wrap !important; white-space: normal !important; }
  .site-footer .footer-center .label{ display:inline; margin-right:6px; }
  .site-footer .footer-center .social{ margin:0 6px; }

  :root{ --chev-w:22px; --chev-h:100px; --chev-top:72vh; --chev-icon:22px; }
}



/* Toggle look: blue when ON */
.btn.btn-toggle[aria-pressed="true"],
.btn.btn-toggle.is-on{
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}

/* Retire chevrons */
.chevron-tab{ display:none !important; }


@media (max-width:1024px){
  /* make the middle row own the height of the page area */
  .stage{ min-height:0; }
  .app{
    display:flex; flex-direction:column;
    height:100%;        /* fill the grid’s 1fr row */
    min-height:0; gap:8px;
  }

  /* sides take 25svh each when shown; center flexes to fill remainder */
  .left.panel, .right.panel{
    flex:0 0 25svh;
    max-height:25svh;
  }
  .center.panel{
    flex:1 1 auto;      /* ← THIS fixes “empty space” */
    min-height:0;
  }

  

  /* hide only when JS adds these (keep your class names) */
  .app.hide-left  .left.panel {
    flex-basis:0; max-height:0; opacity:0; transform:translateY(-8px); pointer-events:none;
  }
  .app.hide-right .right.panel{
    flex-basis:0; max-height:0; opacity:0; transform:translateY( 8px); pointer-events:none;
  }
}


/* let the page scroll */
body{
  overflow-y: auto;                    /* was: hidden */
  grid-template-rows: auto minmax(100vh, auto) auto;  /* middle row >= 100vh */
}

/* stacked (mobile) header is fixed; make the middle row account for it */
@media (max-width:1024px){
  body{
    /* header is fixed (var(--mhead-h)), so give the middle row that space */
    grid-template-rows: minmax(calc(100vh - var(--mhead-h)), auto) auto;
  }
  /* ensure the stage/app chain can actually grow */
  .stage{ min-height: 0; }
  .app{ height: auto; min-height: 0; }      /* avoid forcing viewport-tall app */
  .center.panel{ flex: 1 1 auto; min-height: 0; }
  #editor{ flex: 1 1 auto; min-height: 0 !important; height: auto; }
}


/* MOBILE: allow the page to grow + scroll */
@media (max-width:1024px){
  html, body{
    height: auto;            /* ← stop clamping to viewport */
    min-height: 100dvh;      /* dynamic vh works better on mobile UI chrome */
  }

  body{
    overflow-y: auto;        /* we want to scroll the page */
    /* two-row grid: content + footer (header is fixed, out of flow) */
    grid-template-rows: minmax(calc(100dvh - var(--mhead-h)), auto) auto;
  }

  /* make sure the middle area can actually grow */
  .stage{ min-height: 0; }
  .app{ height: auto; min-height: 0; }
  .center.panel{ flex: 1 1 auto; min-height: 0; }
  #editor{ flex: 1 1 auto; min-height: 0 !important; height: auto; }
}

/* Stack mode: keep panel overflow visible so footers aren't clipped */
@media (max-width:1024px){
  .left.panel,
  .right.panel{
    overflow: visible;              /* override earlier overflow:hidden */
  }

  /* only clip during the hide transition */
  .app.hide-left  .left.panel,
  .app.hide-right .right.panel{
    overflow: hidden;
  }

  /* ensure the body of the panel is the scroller */
  .pane-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* make the pane foot always occupy space & be visible */
  .pane-foot{
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--glass-brd);
    background: var(--pane-foot-bg);
    color: var(--pane-foot-text);
  }
}
/* FIX: restore editor/output min-heights on small screens */
@media (max-width:1024px){
  /* let the body section actually own height */
  .pane-body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* give the editor and output a floor so they can't collapse */
  #editor{ min-height: clamp(260px, 72svh, 80svh) !important; height:auto; flex:1 1 auto; }
  #output{ min-height: clamp(180px, 34svh, 48svh) !important; }
}


/* stacked mode: don't clamp side panels to 25svh */
@media (max-width:1024px){
  .left.panel,
  .right.panel{ flex:0 0 auto; max-height:none; }

  /* body scrolls if needed; foot always visible below it */
  .left.panel .pane-body,
  .right.panel .pane-body{ display:flex; flex-direction:column; flex:0 0 auto; min-height:0; overflow:auto; }

  /* make sure the foot has its own height + styling */
  .pane-foot{
    flex:0 0 auto;
    padding:8px 12px;
    background:var(--pane-foot-bg);
    color:var(--pane-foot-text);
    border-top:1px solid var(--glass-brd);
  }
}

/* Stacked mode: don't let side panels collapse */
@media (max-width:1024px){
  :root{ --stack-pane-min: 220px; } /* tweak to taste */

  .left.panel{
    min-height: clamp(var(--stack-pane-min), 26svh, 420px);
    flex-basis: auto;  /* keep growing if it needs more */
  }

  /* (optional) keep right panel consistent too */
  .right.panel{
    min-height: clamp(var(--stack-pane-min), 26svh, 420px);
  }

  /* when hidden, remove the floor so the collapse animation works */
  .app.hide-left  .left.panel,
  .app.collapsed-left  .left.panel{ min-height: 0 !important; }
  .app.hide-right .right.panel,
  .app.collapsed-right .right.panel{ min-height: 0 !important; }
}



/* Panels are vertical flex boxes */
.panel{
  display:flex;
  flex-direction:column;
  min-height:0;             /* allow inner scrolling */
}

/* Body fills the space; scrolls if needed */
.pane-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  display:block;            /* guard against accidental flex centering */
}

/* Foot lives at the bottom no matter the panel height */
.pane-foot{
  flex:0 0 auto;
  margin-top:auto !important;
}

/* In stacked mode keep the foot visible while scrolling */
@media (max-width:1024px){
  .pane-foot{
    position:sticky;
    bottom:0;
    z-index:2;
    background:var(--pane-foot-bg);
    color:var(--pane-foot-text);
    border-top:1px solid var(--glass-brd);
    padding:8px 12px;
  }
}



























/* same highlight you use for .btn-toggle */
.btn.expander[aria-pressed="true"],
.btn.btn-toggle[aria-pressed="true"],
.btn.btn-toggle.is-on{
  background: var(--brand);
  color: #fff;                 /* white reads well on the brand blue */
  border-color: transparent;
}









/* Panels stay flex columns */
.panel{
  display:flex;
  flex-direction:column;
  min-height:0;              /* allow inner scrolling */
  overflow:hidden;           /* keep nice panel clipping */
}

/* NEW: the shared scroll container inside each panel */
.pane-scroll{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;             /* this is the scroller */
  -webkit-overflow-scrolling:touch;
}

/* Body fills available space and can be taller than the viewport */
.pane-body{
  flex:1 1 auto;
  min-height:0;
}

/* Status sticks to the bottom of its own panel viewport */
.pane-foot{
  position:sticky;
  bottom:0;
  z-index:1;                 /* above body contents */
  flex:0 0 auto;
  padding:8px 12px;
  background:var(--pane-foot-bg);
  color:var(--pane-foot-text);
  border-top:1px solid var(--glass-brd);
}




@media (prefers-reduced-motion: no-preference){
  .app{
    transition: grid-template-columns .28s cubic-bezier(.2,.6,.2,1), gap .2s;
  }
}



/* Disable transitions while booting to avoid flicker */
body[data-boot] .app,
body[data-boot] .panel,
body[data-boot] .left.panel,
body[data-boot] .center.panel,
body[data-boot] .right.panel{
  transition: none !important;
  animation: none !important;
  visibility: hidden;               /* optional: avoid intermediate states */
}




/* Give the left panel its own size on smaller screens */
#leftPanel{ font-size:14px; } /* default */

@media (max-width: 900px){
  #leftPanel{ font-size:13px; }
  #leftPanel .pane-head select{ font-size:12px; }
}
@media (max-width: 600px){
  #leftPanel{ font-size:12.5px; }
}



@media (max-width:1024px){
  .app{
    display:flex !important;        /* out-rank any later desktop grid rules */
    flex-direction:column;
    gap:8px;
    height:auto;
  }

  /* Guard rails against horizontal creeping */
  .stage, .app, .panel, .pane-head, .pane-body, .pane-scroll{
    max-width:100%;
  }
}






[hidden] { display: none !important; }

















/* ==== MOBILE FOOTER: ultra-compact layout & sizes ==== */
@media (max-width:640px){
  /* grid: left | right, then centered legal row */
  .site-footer .footer-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "left right"
      "legal legal";
    column-gap: 4px;
    row-gap: 6px;
    align-items: start;
  }

  /* left stays left */
  .site-footer .footer-left{
    grid-area: left;
    justify-self: start !important;
    align-items: flex-start !important;
    text-align: left;
  }

  /* socials tight to the right */
  .site-footer .footer-center{
    grid-area: right;
    justify-self: end !important;
    align-items: center;
    gap: 2px;                 /* ← tighter gap overall */
    text-align: right;
  }
  .site-footer .footer-center .label{
    font-size: 4.5px;         /* smallest readable; tweak if needed */
    line-height: 1;
    margin-right: 1px;        /* ← almost flush with first icon */
    opacity: .85;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .site-footer .footer-center .social{
    width: 9px; height: 9px;  /* ↓ smaller buttons */
    margin: 0 2px;
    padding: 0;
  }
  .site-footer .footer-center .social svg{
    width: 9px; height: 9px;  /* match container so no visual nudge */
  }

  /* legal: own centered row */
  .site-footer .footer-right{
    grid-area: legal !important;
    justify-self: center !important;
    text-align: center;
    white-space: nowrap;      /* keep on one line; switch to normal to wrap */
    gap: 5px;
    margin-top: 2px;
    min-width: 0; overflow: hidden;
    font-size: 5px;
  }
  .site-footer .footer-right a{
    text-underline-offset: 1px;
    text-decoration-thickness: .06em;
  }

  /* logo a touch larger */
  .footer-logo{ width: 17px; height: 17px; }
}

/* Optional: ultra-narrow phones get even tighter spacing */
@media (max-width:380px){
  .site-footer .footer-center{ gap: 1px; }
  .site-footer .footer-center .label{ font-size: 4.25px; margin-right: 1px; }
  .site-footer .footer-center .social,
  .site-footer .footer-center .social svg{ width: 8px; height: 8px; }
}



/* pressed/selected look for any button */
.btn[aria-pressed="true"],
.btn.is-on{
  background: var(--brand);
  color:#fff;
  border-color: transparent;
}











/* === DESKTOP: no page scrollbar; panes scroll === */
@media (min-width:1025px){
  html, body { height: 100%; }

  body{
    display: grid !important;
    height: 100dvh !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;  /* header | middle | footer */
    overflow: hidden !important;                              /* ← hide page scroll */
  }

  .stage{ min-height: 0 !important; overflow: hidden !important; }
  .app{ height: 100% !important; min-height: 0 !important; overflow: hidden !important; }

  .panel{ display:flex !important; flex-direction:column !important; min-height:0 !important; overflow:hidden !important; }
  .pane-scroll, .pane-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;             /* internal scrolling lives here */
    -webkit-overflow-scrolling:touch;
  }

  /* make sure Monaco doesn't force extra height */
  #editor{ flex:1 1 auto !important; min-height:0 !important; height:auto !important; }
}

/* === MOBILE/TABLET: page scroll is OK (header fixed) === */
@media (max-width:1024px){
  html, body { height:auto; min-height:100dvh; }
  body{
    overflow-y:auto !important;  /* page scroll on small screens */
    grid-template-rows: minmax(calc(100dvh - var(--mhead-h)), auto) auto !important;
  }
  .stage{ overflow:visible !important; }
}





/* === Mobile & small screens (fix horizontal clipping + smooth scroll) === */
@media (max-width:1024px){
  /* Re-enable page scrolling in stacked mode; forbid sideways spill. */
  html, body { overflow-x:hidden; overflow-y:auto; height:auto; }

  /* Make inner containers shrink-to-fit so their own scrollers can work */
  .stage, .app, .panel, .pane-head, .pane-body, .pane-scroll { min-width:0; max-width:100%; }

  /* Make the usual scrollers be momentumy + self-contained */
  .pane-scroll,
  #leftContent,
  #output,
  #centerPanel .pane-body,
  #rightPanel .pane-body{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }

  /* Header/nav shouldn’t force the page wider on tiny screens */
  .site-header, .site-nav { min-width:0; overflow:hidden; }
  .site-nav { flex-wrap:wrap; }
}

/* === Desktop stays no-page-scroll; panels scroll internally === */
@media (min-width:1025px){
  html, body { height:100%; overflow:hidden; } /* body grid already does header | 1fr | footer */
  .stage { min-height:0; }
}

/* === Console & output content: show horizontal scroller INSIDE #output === */
#output { overflow:auto; } /* global: applies to Web/SQL too */
#output > pre,
#output .console,
#sqlout pre{
  display:block;
  min-width:max-content;   /* long lines create an inner horizontal scrollbar */
  white-space:pre;
}
#preview{ display:block; max-width:100%; } /* Web preview iframe safety */






/* PWA button — responsive, non-distorting */
.pwa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:40px; padding:10px 14px;
  border:0; border-radius:12px; font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--text,#e9edf3); background:var(--brand,#2e5bea);
  letter-spacing:.2px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
.pwa-btn:active{ transform:translateY(1px) scale(.98) }
.pwa-btn[disabled]{ opacity:.6; pointer-events:none }
@media (max-width:480px){ .pwa-btn{ padding:10px 12px; font-size:13px } }





/* --- Scroll fixes for left panel (works for HTML & SQL too) --- */
.left.panel, .right.panel, .center.panel {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow inner children to shrink */
}

.panel .pane-body,
.left.panel .pane-body,
.left.panel .content,
.left.panel nav {
  flex: 1 1 auto;
  min-height: 0;               /* critical for scroll inside flex */
  overflow: auto;               /* enable scrolling */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}

/* If you have a wrapper directly under .left.panel */
.left.panel > .pane,
.left.panel > .pane > .pane-body {
  min-height: 0;
  overflow: auto;
}

.left.panel .topics { 
  flex: 1 1 auto; 
  min-height: 0; 
  overflow: auto; 
  -webkit-overflow-scrolling: touch; 
}





/* Inline explanation block under stderr */
.console-explain { margin-top: .5rem; }
.eh-wrap { border:1px solid var(--glass-brd); background:var(--glass); border-radius:.75rem; padding:.75rem; }
.eh-head { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.5rem; }
.eh-head strong { font-size:.95rem; }
.eh-summary { opacity:.8; font-size:.9rem; line-height:1.3; }

/* Hint cards */
.eh-hint{border:1px solid var(--glass-brd); background:var(--glass); padding:.75rem; border-radius:.75rem; margin:.5rem 0}
.eh-hint .eh-hdr{display:flex; justify-content:space-between; gap:.75rem; margin-bottom:.25rem}
.eh-hint .eh-meta{opacity:.7; font-size:.85em}
.eh-hint.error{border-color:#ff8b8b4d}
.eh-hint.warning{border-color:#f59e0b4d}
.eh-fix span{opacity:.75; margin-right:.25rem}
.eh-snip{margin-top:.5rem; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.9em; background:rgba(0,0,0,.15); border:1px dashed var(--glass-brd); border-radius:.5rem; padding:.5rem}
.eh-snip-line{display:flex; gap:.5rem}
.eh-snip-line em{opacity:.65; width:3ch; text-align:right; font-style:normal}


/* host notice line in the console */
.pc-note-error {
  color: #ff4d4d;           /* adjust for theme if you want */
  font-weight: 600;
}

#pcFailNote.pc-fail-banner {
  margin: 8px 0 6px;
  color: #c62828;   /* strong red */
  font-size: 1.17em;  /* h3 default */
  font-weight: bold;
}

.pc-capturing body { opacity: .001 !important; }


/* 1) Allow the middle row's children to shrink so their inner areas can scroll */
.stage, .app, .panel, .pane-body, .pane-scroll { min-height: 0; }

/* 2) On phones/tablets, use momentum scroll + stop scroll chaining into body */
@media (max-width:1024px){
  /* These are the usual scrollers; add others if you have them */
  .pane-scroll,
  #leftContent,
  #output,
  #centerPanel .pane-body,
  #rightPanel .pane-body{
    -webkit-overflow-scrolling: touch;  /* iOS momentum */
    overscroll-behavior: contain;       /* stop chain-scrolling */
    touch-action: pan-y;                /* vertical scroll allowed */
  }

  /* Ensure the page itself can scroll in stacked mode */
  html, body { overflow-x: hidden; overflow-y: auto; height:auto; }
}

/* 3) Desktop: keep no-page-scroll layout (header|1fr|footer) */
@media (min-width:1025px){
  html, body { height:100%; overflow:hidden; }   /* page never scrolls */
  .stage { min-height:0; }
}

/* 4) Resizer handles should not interfere with vertical page scroll when not dragging */
.drag-handle, .resizer, .gutter, [data-resizer]{
  touch-action: none;   /* allow horizontal dragging without triggering scroll */
}




.eh-hint { border-radius: 8px; padding: 12px; margin: 10px 0; border: 1px solid transparent; }
.eh-hdr { display:flex; justify-content:space-between; font-weight:600; margin-bottom:6px; }
.eh-hint.error   { background:#ffecec; border-color:#f5b5b5; }
.eh-hint.warning { background:#fff7e6; border-color:#f3d08a; }
.eh-hint.note    { background:#eef6ff; border-color:#b7d3f6; }
.eh-meta { color:#6b7280; font-weight:400; font-size:12px; }
.eh-hdr{
  display:flex;
  align-items:baseline;          /* keep baseline tidy */
  justify-content:space-between; /* title left, meta right */
  gap:.5rem;
}
.eh-hdr > strong{
  flex:1 1 auto;                 /* let title take remaining space */
  min-width:0;
  overflow:hidden;               /* avoid overflow */
  white-space:nowrap;
  text-overflow:ellipsis;
}
.eh-meta{
  flex:0 0 auto;
  display:inline-flex;
  gap:.5rem;
  white-space:nowrap;            /* keep "Line" + "Confidence" on one line */
}








.btn.attn:disabled,
.btn.attn[aria-disabled="true"] { animation: none !important; box-shadow: none !important; }


/* === PRINT / PDF === */
@media print {
  /* let the page expand and disable the 3-pane grid */
  html, body { height:auto !important; overflow:visible !important; }
  .app { display:block !important; height:auto !important; }
  .left.panel, .right.panel, .v-resize { display:none !important; } /* print only the center/output */
  .center.panel { display:block !important; }

  /* Use the full page width and make tables printable */
  #output { overflow:visible !important; padding:0 !important; }
  #output table {
    table-layout: auto !important;
    width: auto !important;          /* don’t force 100% if it causes clipping */
    max-width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px;                 /* slightly smaller to fit more columns */
  }
  #output th, #output td { padding: 4px 6px !important; white-space: nowrap; }

  /* Landscape gives more horizontal room */
  @page { size: A4 landscape; margin: 12mm; }
}