/* ==========================================================================
   box-polish.css
   1) remove the left sidebar and let <main> reclaim the full width
   2) real Fullscreen API layout (fills viewport, no clipping / no black bars)
   3) mobile landscape: safe-area insets + touch friendly controls
   Loaded after the app stylesheet. Pure ASCII on purpose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. sidebar removal
   The shell renders:  #root > div > div.flex > [aside.bg-wood, main]
   aside owns both the brand block and the collapse/expand toggle, so hiding
   the aside also removes its toggle button and the leftover tooltip.
   -------------------------------------------------------------------------- */
#root aside.bg-wood{display:none!important}

/* main is already flex:1; drop anything that could keep a 140px offset */
#root main{flex:1 1 auto;width:100%;max-width:none;margin-left:0;margin-right:0}

/* the desktop shell header used to be offset by the sidebar - keep it flush */
@media (min-width:768px){
  #root main>div>header{margin-left:0}
}

/* --------------------------------------------------------------------------
   2. fullscreen state (class is toggled by box-polish.js)
   .box-fs-el is set on the lab root (.fl / .mfl) both for the native
   Fullscreen API and for the CSS-only fallback used by browsers without it.
   -------------------------------------------------------------------------- */
.fl.box-fs-el,
.mfl.box-fs-el{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  min-height:0;
  margin:0;
  border-radius:0;
  box-shadow:none;
  background:#f4f1ea;
  --box-fs-t:env(safe-area-inset-top,0px);
  --box-fs-r:env(safe-area-inset-right,0px);
  --box-fs-b:env(safe-area-inset-bottom,0px);
  --box-fs-l:env(safe-area-inset-left,0px);
}

/* native fullscreen: keep the UA box but make sure nothing is scrolled away */
.fl:fullscreen,
.mfl:fullscreen{
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  min-height:0;
  border-radius:0;
}

/* background scroll lock: no stray scrollbars behind the fullscreen layer */
html.box-fs,
html.box-fs body{
  overflow:hidden!important;
  height:100%!important;
  max-height:100%!important;
  overscroll-behavior:none;
}

/* notched screens: keep the toolbar / palette / status inside the safe area */
.fl.box-fs-el>.fl-header,
.mfl.box-fs-el>.mfl-header{
  padding-top:calc(8px + var(--box-fs-t));
  padding-right:calc(14px + var(--box-fs-r));
  padding-bottom:8px;
  padding-left:calc(14px + var(--box-fs-l));
}

.fl.box-fs-el .fl-symbol-library{
  top:calc(8px + var(--box-fs-t));
  left:calc(8px + var(--box-fs-l));
  right:calc(8px + var(--box-fs-r));
}

.fl.box-fs-el .fl-panel{
  top:calc(20px + var(--box-fs-t));
  left:calc(20px + var(--box-fs-l));
  max-height:calc(100% - 40px - var(--box-fs-t) - var(--box-fs-b));
}

.fl.box-fs-el .fl-status{
  left:calc(12px + var(--box-fs-l));
  bottom:calc(10px + var(--box-fs-b));
}

.fl.box-fs-el .fl-bottom{
  bottom:calc(50px + var(--box-fs-b));
}

.fl.box-fs-el .fl-demo-panel{
  top:calc(12px + var(--box-fs-t));
  right:calc(12px + var(--box-fs-r));
  max-height:calc(100% - 24px - var(--box-fs-t) - var(--box-fs-b));
}

.mfl.box-fs-el .mfl-symbol-library{
  top:calc(8px + var(--box-fs-t));
  left:calc(8px + var(--box-fs-l));
  right:calc(8px + var(--box-fs-r));
}

.mfl.box-fs-el .mfl-panel{
  top:calc(20px + var(--box-fs-t));
  left:calc(20px + var(--box-fs-l));
  max-height:calc(100% - 40px - var(--box-fs-t) - var(--box-fs-b));
}

.mfl.box-fs-el .mfl-bottom{
  bottom:calc(50px + var(--box-fs-b));
}

/* --------------------------------------------------------------------------
   3. short / landscape viewports (phone turned sideways, small window)
   Compact the toolbar so the canvas keeps the usable height, keep every
   control at a touch friendly size and let the symbol palette scroll
   instead of being squeezed into sub-20px rows.
   -------------------------------------------------------------------------- */
@media (max-height:560px){
  .fl.box-fs-el>.fl-header,
  .mfl.box-fs-el>.mfl-header{
    padding-top:calc(4px + var(--box-fs-t));
    padding-bottom:4px;
    gap:4px;
  }

  .fl.box-fs-el>.fl-header h1,
  .mfl.box-fs-el>.mfl-header h1{
    font-size:15px;
  }

  .fl.box-fs-el .fl-header .fl-icon-button,
  .mfl.box-fs-el .mfl-header .mfl-icon-button{
    width:40px;
    min-width:40px;
    min-height:44px;
  }

  .fl.box-fs-el .fl-panel,
  .mfl.box-fs-el .mfl-panel{
    grid-auto-rows:32px;
    max-height:calc(100% - 56px - var(--box-fs-t) - var(--box-fs-b));
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }

  .fl.box-fs-el .fl-bottom,
  .mfl.box-fs-el .mfl-bottom{
    bottom:calc(34px + var(--box-fs-b));
    min-height:60px;
    padding:8px 14px;
  }
}

/* coarse pointer on roomy widths: never go below a 40px hit area */
@media (pointer:coarse) and (min-width:600px){
  .fl .fl-header .fl-icon-button,
  .mfl .mfl-header .mfl-icon-button{
    width:40px;
    min-width:40px;
    min-height:44px;
  }
}

/* small feedback toast used when the fullscreen request is rejected */
.box-toast{
  position:fixed;
  left:50%;
  bottom:calc(28px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:2147483000;
  max-width:min(86vw,420px);
  padding:10px 16px;
  border-radius:12px;
  background:rgba(56,53,46,.94);
  color:#f7f3ec;
  font:13px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}

.box-toast.is-on{opacity:1}