/*
VMB Engine shared interface styles

Shared presentation, export, dialog and Decision Point interface styles.
*/

.preview-box {
  display: none;
  margin-top: .8rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.preview-box .caption {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .6rem;
}

.preview-box img {
  width: auto;
  max-width: min(760px, 100%);
  max-height: 70vh;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: block;
}

.export-options {
  position: relative;
  display: inline-block;
}

.export-options > summary {
  list-style: none;
}

.export-options > summary::-webkit-details-marker {
  display: none;
}

.export-options > summary.act {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 8px;
  padding: .58rem .95rem;
  font-size: .88rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  border: 1px solid #C9BFA8;
  user-select: none;
}

.export-options > summary.act::after {
  content: "▼";
  font-size: .72em;
  line-height: 1;
  transition: transform .16s ease;
}

.export-options[open] > summary.act::after {
  transform: rotate(180deg);
}

.export-options:not([open]) > .export-menu {
  display: none !important;
}

.export-options[open] > .export-menu {
  display: grid;
}

.export-menu {
  position: absolute;
  left: 0;
  top: calc(100% + .45rem);
  z-index: 20;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(7, 27, 70, .12);
  padding: .5rem;
  display: grid;
  gap: .4rem;
  min-width: 230px;
}

.export-menu .act {
  text-align: left;
  white-space: nowrap;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #071B46;
  color: #fff;
  padding: .8rem 1rem;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 8px 28px rgba(7, 27, 70, .22);
  opacity: 0;
  transform: translateY(12px);
  transition: .22s;
  pointer-events: none;
  z-index: 100;
  max-width: min(520px, calc(100vw - 36px));
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.hidden {
  display: none !important;
}


/* Shared Dialog & Notification Engine */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 70, .34);
  z-index: 90;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-backdrop.show {
  display: flex;
}

.modal {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(7, 27, 70, .2);
  padding: 1.25rem 1.35rem;
  line-height: 1.5;
}

.modal h2 {
  margin: .1rem 0 .7rem;
  font-family: var(--math-font);
  color: var(--navy);
  font-size: 1.45rem;
}

.modal p {
  margin: .6rem 0;
  color: #334155;
}

.modal .close-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 680px) {
  .modal {
    padding: 1rem;
  }

  .modal .close-row .act {
    width: 100%;
  }
}


/* Pupil Mode transition guard: prevent Safari painting an intermediate model. */
body.pupil-transition .diagram-card,
body.pupil-transition .working-panel {
  visibility: hidden !important;
}


/* Shared Presentation Engine toolbar and Pupil Mode visibility */
body.presentation .stage-toolbar{display:none!important;}
body.presentation .presentation-bar{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:.45rem!important;
  padding:.55rem .85rem!important;
  overflow:visible!important;
}
body.presentation .presentation-bar .left,
body.presentation .presentation-bar .right{
  display:flex!important;
  align-items:center!important;
  gap:.55rem!important;
  flex-wrap:wrap!important;
  min-width:0!important;
}
body.presentation .presentation-bar .left{display:none!important;}
body.presentation .presentation-bar .right{justify-content:center!important;}
body.presentation .presentation-primary-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.38rem!important;
  width:min(34rem,96vw)!important;
}
body.presentation .presentation-primary-row .generate-hero{
  width:min(16rem,64vw)!important;
  min-width:12rem!important;
  padding:.58rem 1.05rem!important;
  font-size:.88rem!important;
}
body.presentation .presentation-history-btn{
  width:2.25rem!important;
  min-width:2.25rem!important;
  height:2.15rem!important;
  min-height:2.15rem!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.82rem!important;
}
body.presentation .presentation-history-btn:disabled{opacity:.35;cursor:not-allowed;}
body.presentation .presentation-history-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:7.4rem!important;
  font-size:.76rem!important;
  font-weight:900!important;
  color:var(--navy)!important;
  white-space:nowrap!important;
}
body.presentation .presentation-toolbar-toggle{
  width:2.1rem!important;
  height:2.1rem!important;
  min-height:2.1rem!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.presentation .presentation-secondary-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.38rem!important;
  flex-wrap:wrap!important;
  width:100%!important;
  min-width:0!important;
}
body.presentation .presentation-secondary-row .act,
body.presentation .presentation-stage-mini .act{
  flex:0 0 auto!important;
  padding:.42rem .62rem!important;
  font-size:.74rem!important;
  line-height:1.05!important;
  min-height:1.86rem!important;
  white-space:nowrap!important;
}
body.presentation .presentation-stage-mini{
  display:flex!important;
  align-items:center!important;
  gap:.35rem!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
}
body.presentation .presentation-stage-mini .range{width:min(320px,34vw)!important;}
body.presentation .presentation-stage-mini .stage-note{font-size:.74rem!important;min-width:3.8rem!important;text-align:center!important;}
body.presentation .font-controls{padding:.16rem .22rem!important;gap:.16rem!important;}
body.presentation .font-controls .act{padding:.32rem .42rem!important;min-height:1.72rem!important;}
body.presentation .wrap{max-width:none!important;padding:calc(var(--pres-bar-h,76px) + .8rem) 1rem .65rem!important;}
body.presentation.presentation-bottom .wrap{padding-top:.65rem!important;padding-bottom:calc(var(--pres-bar-h,76px) + .8rem)!important;}
body.presentation .diagram-card svg{width:auto!important;max-width:98vw!important;max-height:calc(100vh - var(--pres-bar-h,76px) - 1.7rem)!important;}
body.presentation.presentation-stage-collapsed .presentation-secondary-row{
  display:flex!important;
  justify-content:flex-end!important;
  min-height:2.1rem!important;
}
body.presentation.presentation-stage-collapsed .presentation-secondary-row > :not(.presentation-toolbar-toggle){
  display:none!important;
}
body.presentation.presentation-stage-collapsed .presentation-toolbar-toggle{
  display:inline-flex!important;
  margin-left:auto!important;
}
body.presentation.presentation-stage-collapsed .presentation-bar{padding:.45rem .75rem!important;}
body.presentation.presentation-stage-collapsed .wrap{padding-top:calc(var(--pres-bar-h,56px) + .8rem)!important;}
body.presentation.presentation-bottom.presentation-stage-collapsed .wrap{padding-top:.65rem!important;padding-bottom:calc(var(--pres-bar-h,56px) + .8rem)!important;}
body.presentation.presentation-stage-collapsed .diagram-card svg{max-height:calc(100vh - var(--pres-bar-h,56px) - 1.7rem)!important;}
@media(max-width:760px){
  body.presentation .presentation-bar{padding:.42rem .5rem!important;gap:.32rem!important;}
  body.presentation .presentation-bar .right{gap:.32rem!important;}
  body.presentation .presentation-primary-row{width:min(31rem,98vw)!important;gap:.28rem!important;}
  body.presentation .presentation-primary-row .generate-hero{width:min(13.2rem,68vw)!important;min-width:10rem!important;padding:.5rem .85rem!important;font-size:.8rem!important;}
  body.presentation .presentation-history-btn{width:1.95rem!important;min-width:1.95rem!important;height:1.9rem!important;min-height:1.9rem!important;font-size:.7rem!important;}
  body.presentation .presentation-secondary-row{gap:.24rem!important;}
  body.presentation .presentation-secondary-row .act,
  body.presentation .presentation-stage-mini .act{padding:.32rem .42rem!important;font-size:.64rem!important;min-height:1.62rem!important;}
  body.presentation .presentation-stage-mini .range{width:min(260px,62vw)!important;}
  body.presentation .presentation-stage-mini .stage-note{font-size:.64rem!important;min-width:3.1rem!important;}
}


/* Question history and manual controls are unavailable in Pupil Mode. */
body.pupil #presentationPrevExample,
body.pupil #presentationNextExample,
body.pupil #presentationHistoryStatus,
body.pupil #presentationCustom,
body.pupil #presentationPrev,
body.pupil #presentationPlay,
body.pupil #presentationStage{
  display:none!important;
}


/* Shared Presentation layout ownership */
.presentation-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 80;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(7, 27, 70, .08);
}

body.presentation.presentation-bottom .presentation-bar {
  top: auto;
  bottom: 0;
  border-top: 1px solid var(--line);
  border-bottom: none;
}

body.presentation {
  background: #fff;
}

body.presentation .hero,
body.presentation .intro,
body.presentation .info-toolbar,
body.presentation [data-vmb-presentation-hide],
body.presentation section.panel > h2,
body.presentation .export-toolbar,
body.presentation .preview-box {
  display: none !important;
}

body.presentation .diagram-card {
  border: none;
  background: #fff;
  padding: .2rem;
  overflow: visible;
  margin-top: 0;
}

body.pupil .presentation-title::after {
  content: " — Pupil Mode";
  color: var(--red);
}

body.presentation .presentation-secondary-row .custom-example-btn {
  background: #fff;
  color: var(--ink);
  border: 1px solid #C9BFA8;
}

body:has(.export-options[open]) {
  padding-bottom: min(22rem, 45vh);
}


/* Shared Decision Point interface */
.thinking-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 70, .42);
  z-index: 95;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.thinking-backdrop.show { display: flex; }

.thinking-panel {
  width: min(900px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(7, 27, 70, .28);
  padding: 1.15rem 1.25rem;
}

.thinking-panel h2 {
  margin: .05rem 0 .35rem;
  font-family: var(--math-font);
  color: var(--navy);
  font-size: 1.45rem;
}

.thinking-panel .thinking-question {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: .35rem 0 .75rem;
}

.thinking-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: .85rem 0;
}

.thinking-options > .act {
  justify-self: stretch;
  min-height: 3rem;
  font-size: 1rem;
}

.thinking-option {
  border: 2px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: .75rem;
  min-height: 3rem;
  text-align: left;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}

.thinking-option:hover {
  border-color: var(--navy);
  box-shadow: 0 8px 22px rgba(8, 43, 95, .12);
}

.thinking-option.removed { display: none; }
.thinking-option.text-option { font-size: 1rem; }

.thinking-feedback {
  display: none;
  border-left: 4px solid var(--navy);
  background: #eef4ff;
  padding: .75rem .9rem;
  border-radius: 10px;
  margin-top: .75rem;
  color: var(--ink);
  font-weight: 700;
}

.thinking-feedback-correct {
  border-left-color: #2e7d32 !important;
  background: #eaf7ec !important;
  color: #1b5e20 !important;
}

.thinking-feedback-incorrect {
  border-left-color: var(--red) !important;
  background: #fff3f3 !important;
  color: var(--ink) !important;
}

.thinking-feedback-neutral {
  border-left-color: var(--navy) !important;
  background: #eef4ff !important;
  color: var(--ink) !important;
}

.thinking-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.thinking-mini {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #fafcff;
}

.thinking-session-pill {
  font-size: .82rem;
  font-weight: 800;
  color: var(--navy);
  background: #eef4ff;
  border: 1px solid #d8e4ff;
  border-radius: 999px;
  padding: .25rem .55rem;
  display: inline-block;
  margin-bottom: .45rem;
}

@media (max-width: 680px) {
  .thinking-panel { padding: 1rem; }
  .thinking-options { grid-template-columns: 1fr; }
  .thinking-actions .act { flex: 1 1 auto; }
}

/* Shared Bar Model Engine */
.vmb-bar-animate{animation-duration:var(--vmb-duration,520ms);animation-delay:var(--vmb-delay,0ms);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.75,.25,1)}
.vmb-bar-draw{animation-name:vmbBarDraw;transform-box:fill-box;transform-origin:left center}
.vmb-bar-rise{animation-name:vmbBarRise}
.vmb-bar-pop{animation-name:vmbBarPop;transform-box:fill-box;transform-origin:center}
.vmb-bar-fade{animation-name:vmbBarFade}
.vmb-bar-line{animation-name:vmbBarLine;stroke-dasharray:1;stroke-dashoffset:1}
@keyframes vmbBarLine{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes vmbBarDraw{from{opacity:.2;transform:scaleX(.02)}to{opacity:1;transform:scaleX(1)}}
@keyframes vmbBarRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes vmbBarPop{0%{opacity:0;transform:scale(.82)}70%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes vmbBarFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.vmb-bar-animate{animation:none!important}}

body.presentation.pupil .diagram-card{padding:.55rem!important;overflow:visible!important}
body.presentation.pupil .diagram-card svg{max-width:100%!important;width:100%!important;height:auto!important;max-height:calc(48vh - 1rem)!important}
body.presentation.pupil .thinking-panel{width:min(1100px,calc(100vw - 1rem));max-height:47vh;overflow:auto}
body.presentation.pupil .thinking-options{align-items:stretch}
body.presentation.pupil .thinking-option{min-width:0;overflow:hidden}
body.presentation.pupil .thinking-mini{width:100%;max-height:29vh;object-fit:contain}
@media(max-width:680px){body.presentation.pupil .diagram-card svg{max-height:35vh!important}body.presentation.pupil .thinking-panel{max-height:56vh}.thinking-mini{min-height:130px}}
@media (prefers-reduced-motion:reduce){.working-line-animate{opacity:1!important;animation:none!important;transform:none!important}}
.working-fragment-animate{opacity:0;animation:vmbWorkingFragment .42s ease-out var(--fragment-delay,0ms) forwards}
@keyframes vmbWorkingFragment{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
.working-equation{white-space:nowrap;min-height:1.65em}
@media (prefers-reduced-motion:reduce){.working-fragment-animate{opacity:1!important;animation:none!important;transform:none!important}}

.vmb-rounding-note{margin:.3rem 1rem .75rem;text-align:right;font-size:.78rem;line-height:1.25;color:#61718a;font-weight:600;}
.vmb-rounding-note[hidden]{display:none!important;}

/* Shared bar-model animation controls */
.vmb-animation-toggle[aria-pressed="true"]{background:#EEF4FF!important;border-color:#9CB6DF!important;color:#0B2E6D!important}
.vmb-animation-toggle[aria-pressed="false"]{background:#fff!important;color:#5F6978!important}
.vmb-bar-static .vmb-bar-animate,.vmb-bar-static.vmb-bar-animate{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
@media(max-width:680px){.stage-left .vmb-animation-toggle{flex:1 1 100%}}


/* Pass 1.1: compact desktop presentation controls and stable model/working layout */
@media(min-width:761px){
  body.presentation .presentation-bar{padding:.38rem .58rem!important;gap:.28rem!important;}
  body.presentation .presentation-bar .right{gap:.28rem!important;flex-wrap:nowrap!important;width:100%!important;}
  body.presentation .presentation-primary-row{width:auto!important;flex:0 0 auto!important;gap:.25rem!important;}
  body.presentation .presentation-primary-row .generate-hero{width:auto!important;min-width:9.6rem!important;padding:.42rem .7rem!important;font-size:.76rem!important;}
  body.presentation .presentation-history-btn{width:1.8rem!important;min-width:1.8rem!important;height:1.75rem!important;min-height:1.75rem!important;font-size:.66rem!important;}
  body.presentation .presentation-history-status{min-width:5.8rem!important;font-size:.66rem!important;}
  body.presentation .presentation-toolbar-toggle{width:1.75rem!important;height:1.75rem!important;min-height:1.75rem!important;font-size:.7rem!important;}
  body.presentation .presentation-secondary-row{width:auto!important;flex:1 1 auto!important;flex-wrap:nowrap!important;gap:.22rem!important;justify-content:flex-end!important;}
  body.presentation .presentation-stage-mini{flex-wrap:nowrap!important;gap:.2rem!important;}
  body.presentation .presentation-secondary-row .act,
  body.presentation .presentation-stage-mini .act{padding:.3rem .42rem!important;font-size:.64rem!important;min-height:1.7rem!important;}
  body.presentation .presentation-stage-mini .range{width:min(210px,17vw)!important;}
  body.presentation .presentation-stage-mini .stage-note{font-size:.62rem!important;min-width:3.2rem!important;}
  body.presentation .font-controls{padding:.08rem .12rem!important;gap:.08rem!important;}
  body.presentation .font-controls .act{padding:.24rem .32rem!important;min-height:1.6rem!important;}
}
.diagram-card-main{min-height:430px;display:flex;flex-direction:column;justify-content:center;}
.working-panel-main{min-height:13.2rem;box-sizing:border-box;}
@media(max-width:680px){
  .diagram-card-main{min-height:320px;}
  .working-panel-main{min-height:11.5rem;}
}


/* Pass 1.2: deliberate two-row presentation and pupil toolbars */
@media(min-width:761px){
  body.presentation .presentation-bar{
    padding:.48rem .7rem!important;
    gap:.38rem!important;
  }
  body.presentation .presentation-bar .right{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:.38rem!important;
    width:100%!important;
  }
  body.presentation .presentation-primary-row,
  body.presentation .presentation-secondary-row{
    width:100%!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
  }
  body.presentation .presentation-primary-row{
    justify-content:center!important;
    gap:.42rem!important;
  }
  body.presentation .presentation-secondary-row{
    justify-content:center!important;
    gap:.42rem!important;
  }
  body.presentation .presentation-primary-row .generate-hero{
    min-width:12rem!important;
    padding:.48rem .9rem!important;
    font-size:.78rem!important;
  }
  body.presentation .presentation-history-btn{
    width:2rem!important;
    min-width:2rem!important;
    height:1.95rem!important;
    min-height:1.95rem!important;
  }
  body.presentation .presentation-history-status{
    min-width:8rem!important;
    font-size:.7rem!important;
  }
  body.presentation .presentation-secondary-row .act,
  body.presentation .presentation-stage-mini .act{
    padding:.36rem .52rem!important;
    font-size:.68rem!important;
    min-height:1.78rem!important;
  }
  body.presentation .presentation-stage-mini{
    flex:1 1 auto!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
  }
  body.presentation .presentation-stage-mini .range{
    width:min(300px,24vw)!important;
  }
  body.presentation .presentation-stage-mini .stage-note{
    min-width:8rem!important;
    max-width:13rem!important;
  }
  body.presentation .presentation-toolbar-toggle{
    margin-left:auto!important;
    flex:0 0 auto!important;
    width:2rem!important;
    height:2rem!important;
    min-height:2rem!important;
  }
  body.pupil .presentation-primary-row{
    justify-content:flex-start!important;
  }
  body.pupil .presentation-secondary-row{
    justify-content:flex-end!important;
  }
}

/* Pass 1.3: resilient mode toolbars and sticky representation controls */
body.presentation .presentation-history-group,
body.presentation .presentation-view-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.38rem;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
}
body.presentation .presentation-primary-row,
body.presentation .presentation-secondary-row{
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
body.presentation .presentation-secondary-row{
  flex-wrap:wrap!important;
  align-items:center!important;
}
body.presentation .presentation-stage-mini{
  flex:1 1 34rem!important;
  min-width:min(100%,24rem)!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
}
body.presentation .presentation-stage-mini .range{
  flex:1 1 12rem!important;
  min-width:8rem!important;
  width:auto!important;
  max-width:24rem!important;
}
body.presentation .presentation-stage-mini .stage-note{
  flex:0 1 auto!important;
  min-width:7rem!important;
  max-width:16rem!important;
  white-space:normal!important;
  line-height:1.15!important;
}
body.presentation .presentation-view-group{
  flex:0 1 auto;
}
body.presentation .presentation-toolbar-toggle{
  order:99;
  margin-left:auto!important;
  flex:0 0 auto!important;
}
body.pupil .presentation-primary-row,
body.pupil .presentation-history-group{
  justify-content:center!important;
  width:100%!important;
}
body.pupil #presentationNew{
  margin-inline:auto!important;
}

@media(min-width:761px){
  body.presentation .presentation-bar .right{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    width:100%!important;
    min-width:0!important;
  }
  body.presentation .presentation-primary-row,
  body.presentation .presentation-secondary-row{
    flex-wrap:wrap!important;
  }
  body.presentation .presentation-history-group{
    width:min(100%,42rem)!important;
  }
  body.presentation .presentation-secondary-row{
    display:flex!important;
    justify-content:center!important;
    row-gap:.38rem!important;
  }
}

@media(max-width:980px), (min-resolution:1.5dppx){
  body.presentation .presentation-bar{
    overflow-x:hidden!important;
  }
  body.presentation .presentation-primary-row .generate-hero{
    min-width:min(12rem,60vw)!important;
    max-width:100%!important;
  }
  body.presentation .presentation-secondary-row .act,
  body.presentation .presentation-stage-mini .act{
    max-width:100%!important;
  }
}

/* The step controls stay available only while the representation workspace is in view. */
.representation-workspace{
  position:relative;
  min-width:0;
}
body:not(.presentation) .representation-workspace .stage-toolbar{
  position:sticky;
  top:0;
  z-index:45;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 5px 16px rgba(7,27,70,.08);
}
body:not(.presentation) .representation-workspace .stage-toolbar .stage-left{
  flex-wrap:wrap;
  min-width:0;
}
body:not(.presentation) .representation-workspace .stage-toolbar .stage-top{
  min-width:0;
}
@media(max-width:680px){
  body:not(.presentation) .representation-workspace .stage-toolbar{
    top:0;
  }
}


/* Pass 1.5: final representation engine polish */
.vmb-partition-flash{
  pointer-events:none;
  animation:vmbPartitionFlash .72s ease-out both;
}
@keyframes vmbPartitionFlash{
  0%{opacity:0}
  18%{opacity:1}
  72%{opacity:1}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){.vmb-partition-flash{animation-duration:.28s}}

.info-toolbar{justify-content:center!important;}

/* Browser zoom should enlarge the representation in presentation and pupil modes
   rather than forcing it to fill the viewport at every zoom level. */
body.presentation .diagram-card svg,
body.presentation.pupil .diagram-card svg{
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  margin-inline:auto!important;
}

/* Keep the primary row visible; collapsing now hides only the secondary controls. */
body.presentation.presentation-stage-collapsed .presentation-secondary-row{
  display:none!important;
}
body.presentation.presentation-stage-collapsed .presentation-primary-row{
  display:flex!important;
}
body.presentation .presentation-primary-row .presentation-toolbar-toggle{
  margin-left:.35rem!important;
  flex:0 0 auto!important;
}
body.presentation.presentation-stage-collapsed .presentation-bar{
  padding:.38rem .7rem!important;
}
body.presentation.presentation-stage-collapsed .wrap{
  padding-top:calc(var(--pres-bar-h,56px) + .8rem)!important;
}

.vmb-playback-locked input:disabled,
.vmb-playback-locked button:disabled{cursor:wait;}


/* Pass 1.6: final edge-case polish */
.recurring-answer{white-space:nowrap;}
.recurring-digit{position:relative;display:inline-block;}
.recurring-digit.recurring-dot::before{content:"";position:absolute;width:.17em;height:.17em;border-radius:50%;background:currentColor;left:50%;transform:translateX(-50%);top:-.30em;}

/* At browser zoom, preserve the representation's intrinsic size in Presentation
   and Pupil modes. The diagram card becomes the scroll container instead of
   shrinking the SVG back down to the available CSS-pixel width. */
body.presentation .diagram-card,body.presentation.pupil .diagram-card{overflow:auto!important;}
body.presentation .diagram-card svg,body.presentation.pupil .diagram-card svg{max-width:none!important;max-height:none!important;width:auto!important;height:auto!important;}

.vmb-playback-locked [disabled]{cursor:wait!important;}

/* Pass 1.7: editable whole-number fields and browser-zoom parity */
body.presentation .diagram-card-main,
body.presentation.pupil .diagram-card-main{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.presentation .diagram-card-main svg,
body.presentation.pupil .diagram-card-main svg{
  display:block!important;
  margin-inline:auto!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
}

/* Pass 1.8: let browser zoom scale Presentation/Pupil representations naturally.
   Use a stable CSS width at normal zoom; once zoom narrows the CSS viewport the
   surrounding card scrolls rather than continuously shrinking the SVG to 100%. */
body.presentation .diagram-card-main,
body.presentation.pupil .diagram-card-main{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.presentation .diagram-card-main svg,
body.presentation.pupil .diagram-card-main svg{
  display:block!important;
  width:min(980px,calc(100vw - 3rem))!important;
  max-width:none!important;
  max-height:none!important;
  height:auto!important;
  margin-inline:auto!important;
}
@media(max-width:680px){
  body.presentation .diagram-card-main svg,
  body.presentation.pupil .diagram-card-main svg{
    width:min(980px,calc(100vw - 1.5rem))!important;
  }
}