/* ==========================================================================
   box-polish-3.css  (superset of v2 + mobile / tablet adaptation)

   1. sidebar removal
   2. native fullscreen layout + safe area (desktop & tablet)
   3. shell chrome removal on lab routes
   4. phone tier  : bottom thumb toolbar + symbol drawer
   5. tablet tier : coarse-pointer palette
   Pure ASCII on purpose: Chinese text is never written here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. sidebar removal
   -------------------------------------------------------------------------- */
#root aside.bg-wood{display:none!important}
#root main{flex:1 1 auto;width:100%;max-width:none;margin-left:0;margin-right:0}

@media (min-width:768px){
  #root main>div>header{margin-left:0}
}

/* --------------------------------------------------------------------------
   2. fullscreen state (class toggled by box-polish-3.js)
   -------------------------------------------------------------------------- */
.fl.box-fs-el,
.mfl.box-fs-el{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:120;
  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);
}

.fl:fullscreen,
.mfl:fullscreen{
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  min-height:0;
  border-radius:0;
}

html.box-fs,
html.box-fs body{
  overflow:hidden!important;
  height:100%!important;
  max-height:100%!important;
  overscroll-behavior:none;
}

/* desktop / tablet fullscreen insets.
   Scoped to >=601px on purpose: on phones the bottom drawer takes over and
   the old top/left offsets pushed the palette 20px past the right edge. */
@media (min-width:601px) and (min-height:561px){
  .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));
  }

  .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));
  }

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

  .mfl.box-fs-el .mfl-bottom{
    bottom:calc(50px + 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-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));
  }
}

/* --------------------------------------------------------------------------
   2b. landscape presentation on phones
   Chrome/Edge for Android can lock the screen orientation inside fullscreen.
   iOS Safari, Firefox for Android and most in-app WebViews cannot, so the lab
   itself is rotated by 90deg with swapped dimensions instead: same result,
   works everywhere.
   -------------------------------------------------------------------------- */
html.box-fs #root .box-landscape{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:100vh!important;
  height:100vw!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  margin:0!important;
  border-radius:0!important;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  z-index:2147483000;
}

@supports (height:100dvh){
  html.box-fs #root .box-landscape{
    width:100dvh!important;
    height:100vw!important;
  }
}

/* the rotated box is as wide as the long edge: fit ~44px cells across it so
   all symbols stay reachable without scrolling the sheet */
html.box-fs #root .box-landscape :is(.fl-panel,.mfl-panel){
  grid-template-columns:repeat(auto-fill,minmax(40px,1fr))!important;
  max-height:164px;
}

/* short desktop window inside fullscreen (phones/tablets are handled below) */
@media (max-height:560px) and (min-width:901px){
  .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:36px;
    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-symbol,
  .mfl.box-fs-el .mfl-symbol{
    font-size:20px!important;
  }
}

/* chevron: up = tap to slide the drawer up, down = tap to close.
   Driven by the class the script mirrors on the lab root, because the bundle's
   own aria-expanded can lag behind after a programmatic collapse. */
:is(.fl,.mfl).box-drawer-open :is(.fl-panel-toggle,.mfl-panel-toggle) svg{
  transform:rotate(180deg);
}

:is(.fl,.mfl):not(.box-drawer-open) :is(.fl-panel-toggle,.mfl-panel-toggle) svg{
  transform:none;
}

/* --------------------------------------------------------------------------
   3. shell chrome removal - only on lab routes (html.box-lab is set by JS)
   The lab owns a header and a back button, so the shell header (65px) and the
   single-tab bottom nav (46px) are pure duplication on phones.
   -------------------------------------------------------------------------- */
html.box-lab #root main > div.sticky{display:none!important}
html.box-lab #root > div > nav.fixed.inset-x-0.bottom-0{display:none!important}
/* the padded wrapper around the lab (depth varies) is tagged by JS */
.box-nopad{padding-bottom:0!important}
html.box-lab #root main > div{padding-bottom:0!important}

/* --------------------------------------------------------------------------
   4. PHONE TIER
   condition: <=600px wide, or a short landscape phone (<=560px tall and
   <=900px wide, so a short desktop window keeps the desktop layout)
   -------------------------------------------------------------------------- */
@media (max-width:600px), (max-height:560px) and (max-width:900px){

  /* 4.1 the 480px floor clipped 844x390 by 90px, unrecoverably */
  #root :is(.fl,.mfl):not(.box-fs-el){
    min-height:0!important;
    height:100%;
  }

  /* 4.2 header: one 48px line, back + title only (actions move to the toolbar) */
  #root :is(.fl-header,.mfl-header){
    min-height:48px;
    height:auto;
    flex-wrap:nowrap;
    gap:4px;
    padding:calc(2px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) 2px calc(6px + env(safe-area-inset-left,0px));
  }

  #root :is(.fl-header,.mfl-header) > h1{
    font-size:15px;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  #root :is(.fl-header,.mfl-header) > :is(.fl-button,.mfl-button){
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
  }

  /* 4.3 actions -> bottom toolbar in the thumb zone.
     absolute (not fixed) keeps it inside .fl, which is position:relative,
     so no transformed ancestor can capture it. */
  #root :is(.fl-actions,.mfl-actions){
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:6;
    margin:0;
    width:auto;
    max-width:none;
    height:auto;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:2px;
    padding:6px calc(4px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(4px + env(safe-area-inset-left,0px));
    background:#fffdfa;
    border-top:1px solid #ddd8ce;
    box-shadow:0 -3px 14px rgba(56,53,46,.10);
  }

  #root :is(.fl-actions,.mfl-actions) > :is(.fl-button,.mfl-button){
    flex:1 1 0;
    width:auto;
    min-width:44px;
    min-height:50px;
    height:50px;
    padding:3px 0 2px;
    flex-direction:column;
    gap:3px;
    border:0;
    border-radius:10px;
    background:transparent;
  }

  #root :is(.fl-actions,.mfl-actions) > :is(.fl-button,.mfl-button)::after{
    content:attr(aria-label);
    font-size:10px;
    line-height:1;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    color:#6b5f52;
  }

  #root :is(.fl-actions,.mfl-actions) > :is(.fl-button,.mfl-button):active{
    background:#f0eae0;
  }

  #root :is(.fl-actions,.mfl-actions) > :is(.fl-button,.mfl-button) svg{
    width:20px;
    height:20px;
  }

  /* 4.4 symbol palette -> bottom drawer sitting on top of the toolbar */
  #root :is(.fl-symbol-library,.mfl-symbol-library){
    position:absolute;
    left:0;
    right:0;
    bottom:calc(62px + env(safe-area-inset-bottom,0px));
    top:auto;
    z-index:7;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:auto;
    pointer-events:none;
  }

  #root :is(.fl-panel-toggle,.mfl-panel-toggle){
    pointer-events:auto;
    position:static;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    min-width:0;
    height:40px;
    min-height:40px;
    padding:0;
    border:1px solid #ddd8ce;
    border-bottom:0;
    border-radius:14px 14px 0 0;
    background:#fffdfa;
    box-shadow:0 -2px 10px rgba(56,53,46,.06);
    font-size:12px;
    color:#65594b;
  }

  #root :is(.fl-panel-toggle,.mfl-panel-toggle) svg{
    width:14px;
    height:14px;
    transition:transform .18s ease;
  }

  /* collapsed: a small floating pill instead of a full-width bar */
  #root :is(.fl-panel-toggle,.mfl-panel-toggle)[aria-expanded="false"]{
    width:132px;
    align-self:center;
    margin-bottom:6px;
    border:1px solid #ddd8ce;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(56,53,46,.10);
  }

  #root :is(.fl-panel,.mfl-panel){
    pointer-events:auto;
    position:static;
    display:none;
    width:auto;
    height:auto;
    max-height:min(242px,46dvh);
    padding:6px calc(6px + env(safe-area-inset-right,0px)) 8px calc(6px + env(safe-area-inset-left,0px));
    border:1px solid #ddd8ce;
    border-top:0;
    border-radius:0;
    background:#fffdfa;
    box-shadow:0 -8px 22px rgba(56,53,46,.12);
    grid-template-columns:repeat(8,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-rows:44px;
    gap:2px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }

  #root :is(.fl-panel,.mfl-panel).fl-panel-open,
  #root :is(.fl-panel,.mfl-panel).mfl-panel-open{
    display:grid;
  }

  #root :is(.fl-symbol,.mfl-symbol){
    width:100%;
    min-width:0;
    height:44px;
    padding:0;
    font-size:22px!important;
    border-radius:9px;
  }

  /* 4.5 result card above the drawer handle */
  #root :is(.fl-bottom,.mfl-bottom){
    left:calc(8px + env(safe-area-inset-left,0px));
    right:calc(8px + env(safe-area-inset-right,0px));
    bottom:calc(112px + env(safe-area-inset-bottom,0px));
    z-index:2;
    width:auto;
    min-width:0;
    max-width:none;
    min-height:0;
    padding:8px 12px;
    border-radius:14px;
    transform:none;
    margin-left:0;
    margin-right:0;
  }

  #root :is(.fl-status,.mfl-status){
    left:calc(10px + env(safe-area-inset-left,0px));
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
    max-width:70%;
    font-size:12px;
  }

  /* 4.6 demo panel -> sheet above the toolbar */
  #root :is(.fl-demo-panel,.mfl-demo-panel){
    top:auto;
    left:calc(8px + env(safe-area-inset-left,0px));
    right:calc(8px + env(safe-area-inset-right,0px));
    width:auto;
    bottom:calc(62px + env(safe-area-inset-bottom,0px));
    max-height:min(64dvh,520px);
    border-radius:16px;
    z-index:8;
  }

  /* 4.7 menus opened from the toolbar must not fly off the bottom */
  #root :is(.fl-menu,.mfl-menu){
    position:absolute;
    right:calc(8px + env(safe-area-inset-right,0px));
    bottom:calc(62px + env(safe-area-inset-bottom,0px));
    top:auto;
  }
}

/* very narrow phones: fewer columns + two rows of actions */
@media (max-height:560px) and (max-width:900px){
  #root :is(.fl-panel,.mfl-panel){
    grid-template-columns:repeat(10,minmax(0,1fr));
  }
}

@media (max-width:359px){
  #root :is(.fl-panel,.mfl-panel){
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  #root :is(.fl-actions,.mfl-actions){
    flex-wrap:wrap;
    gap:4px 2px;
  }

  #root :is(.fl-actions,.mfl-actions) > :is(.fl-button,.mfl-button){
    flex:1 1 22%;
  }
}

/* --------------------------------------------------------------------------
   5. TABLET TIER (coarse pointer, 601-1023px)
   the desktop palette is 184px wide with 32px rows - below the 44px target.
   Give it 44px rows, a 5th column and a real collapse handle.
   -------------------------------------------------------------------------- */
@media (pointer:coarse) and (min-width:601px) and (max-width:1180px) and (min-height:561px){
  #root :is(.fl,.mfl){
    min-height:0!important;
  }

  /* the bundle only hides a collapsed palette below 600px */
  #root :is(.fl-panel,.mfl-panel):not(.fl-panel-open):not(.mfl-panel-open){
    display:none;
  }

  #root :is(.fl-panel,.mfl-panel){
    width:238px;
    top:58px;
    left:10px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-rows:44px;
    max-height:calc(100% - 68px);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }

  #root .fl.box-fs-el .fl-panel,
  #root .mfl.box-fs-el .mfl-panel{
    top:calc(58px + var(--box-fs-t));
    left:calc(10px + var(--box-fs-l));
    max-height:calc(100% - 68px - var(--box-fs-t) - var(--box-fs-b));
  }

  #root :is(.fl-symbol,.mfl-symbol){
    font-size:22px!important;
  }

  #root :is(.fl-panel-toggle,.mfl-panel-toggle){
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:absolute;
    top:10px;
    left:10px;
    z-index:5;
    width:auto;
    min-width:96px;
    height:40px;
    padding:0 12px;
    border:1px solid #ddd8ce;
    border-radius:12px;
    background:#fffdfac9;
    font-size:12px;
  }

  #root :is(.fl-panel-toggle,.mfl-panel-toggle) svg{
    width:14px;
    height:14px;
    transition:transform .18s ease;
  }
}

/* --------------------------------------------------------------------------
   6. toast (shared behaviour with v2)
   -------------------------------------------------------------------------- */
.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}