/* Optional x/y tile-set presentation.
   This file is intentionally isolated so the upgrade can be removed cleanly. */

:root{
  --tile-purple:#7657c8;
  --tile-orange:#e58a36;
  --tile-indigo:#bf4fa3;
}

.tile[data-kind="y"],.tile--y{--tileW:36px;--tileH:101px;}
.tile[data-kind="y"][data-orientation="h"],.tile--y[data-orientation="h"]{--tileW:101px;--tileH:36px;}
.tile[data-kind="y2"],.tile--y2{--tileW:101px;--tileH:101px;}
.tile[data-kind="xy"],.tile--xy{--tileW:101px;--tileH:144px;}
.tile[data-kind="xy"][data-orientation="h"],.tile--xy[data-orientation="h"]{--tileW:144px;--tileH:101px;}

.tile[data-kind="y"]:not(.is-negative) .tile__face,.tile--y:not(.is-negative) .tile__face{
  background:var(--tile-purple) !important;
  color:#fff !important;
}
.tile[data-kind="y2"]:not(.is-negative) .tile__face,.tile--y2:not(.is-negative) .tile__face{
  background:var(--tile-orange) !important;
  color:#fff !important;
}
.tile[data-kind="xy"]:not(.is-negative) .tile__face,.tile--xy:not(.is-negative) .tile__face{
  background:var(--tile-indigo) !important;
  color:#fff !important;
}
.tile[data-kind="y"] .tile__label *,
.tile[data-kind="y2"] .tile__label *,
.tile[data-kind="xy"] .tile__label *{
  color:inherit !important;
}
.tile[data-kind="y"],
.tile[data-kind="y"] .tile__inner,
.tile[data-kind="y"] .tile__face,
.tile[data-kind="xy"],
.tile[data-kind="xy"] .tile__inner,
.tile[data-kind="xy"] .tile__face{
  transform-origin:50% 50% !important;
}

.tilePreview--yV{
  width:36px !important;
  height:56px !important;
  background:var(--tile-purple) !important;
  color:#fff !important;
}
.tilePreview--yH{
  width:56px !important;
  height:36px !important;
  background:var(--tile-purple) !important;
  color:#fff !important;
}
.tilePreview--y2{
  width:56px !important;
  height:56px !important;
  background:var(--tile-orange) !important;
  color:#fff !important;
}
.tilePreview--xy{
  width:74px !important;
  height:56px !important;
  background:var(--tile-indigo) !important;
  color:#fff !important;
}
.tilePreview--yV .tilePreview__label *,
.tilePreview--yH .tilePreview__label *,
.tilePreview--y2 .tilePreview__label *,
.tilePreview--xy .tilePreview__label *{
  color:inherit !important;
}
.tilePreview--neg{
  background:var(--tile-negative) !important;
  color:#000 !important;
}
.tilePreview--neg .tilePreview__label *{
  color:#000 !important;
}

.appShell[data-screen="board"] #rightPalette [data-tile-set-extra][hidden]{
  display:none !important;
}

.appShell[data-screen="board"] #rightPalette .tileSetSwitch[hidden]{
  display:none !important;
}

.appShell[data-screen="board"] #rightPalette .tileSetSwitch{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:3px !important;
  width:118px !important;
  margin:0 auto 12px !important;
  padding:3px !important;
  border:1px solid rgba(57,82,111,.12) !important;
  border-radius:999px !important;
  background:rgba(232,239,248,.72) !important;
}

.appShell[data-screen="board"] #rightPalette .tileSetSwitchLabel,
.appShell[data-screen="board"] #rightPalette .tileSetChoiceLabel,
.appShell[data-screen="board"] #rightPalette .tileSetChoiceCheck{
  display:none;
}

.appShell[data-screen="board"] #rightPalette .tileSetSwitchBtn{
  min-width:0 !important;
  min-height:32px !important;
  padding:0 9px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#667487 !important;
  font:700 17px/1 var(--tile-font-family) !important;
  cursor:pointer !important;
}

.appShell[data-screen="board"] #rightPalette .tileSetSwitchBtn.is-active{
  background:#0877f8 !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(8,119,248,.24) !important;
}

.appShell[data-screen="board"] #rightPalette .tileSetSwitchBtn:focus-visible{
  outline:3px solid rgba(8,119,248,.28) !important;
  outline-offset:2px !important;
}

.compactPaletteControlRail{
  display:contents;
}

.compactVariableControl,
.compactPaletteSignBtn{
  display:none;
}

@media (max-width:760px){
  .tile[data-kind="y"],.tile--y{--tileW:18.9px !important;--tileH:53.025px !important;}
  .tile[data-kind="y"][data-orientation="h"],.tile--y[data-orientation="h"]{--tileW:53.025px !important;--tileH:18.9px !important;}
  .tile[data-kind="y2"],.tile--y2{--tileW:53.025px !important;--tileH:53.025px !important;}
  .tile[data-kind="xy"],.tile--xy{--tileW:53.025px !important;--tileH:75.6px !important;}
  .tile[data-kind="xy"][data-orientation="h"],.tile--xy[data-orientation="h"]{--tileW:75.6px !important;--tileH:53.025px !important;}
}

@media (min-width:1061px){
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y.tilePaletteSection--positive{
    margin-top:8px !important;
    padding-top:18px !important;
    border-top:1px solid rgba(57,82,111,.14) !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid{
    --palette-x2:66px !important;
    --palette-xy-long:calc(var(--palette-x2) * 144 / 101);
    grid-template-rows:var(--palette-x2) var(--palette-xy-long) !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--y2{
    width:66px !important;
    height:66px !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--yV{
    width:34px !important;
    height:66px !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--xy{
    width:var(--palette-x2) !important;
    height:var(--palette-xy-long) !important;
  }
}

@media (max-width:1060px){
  .appShell[data-screen="board"] #rightPalette .tileSetSwitch{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:44px !important;
    gap:2px !important;
    flex:0 0 96px !important;
    width:96px !important;
    height:50px !important;
    margin:0 8px 0 0 !important;
    padding:2px !important;
    border:1px solid rgba(57,82,111,.14) !important;
    border-radius:14px !important;
    background:rgba(232,239,248,.78) !important;
    box-sizing:border-box !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetSwitchLabel{
    display:none !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetSwitchBtn{
    position:relative;
    display:grid !important;
    place-items:center;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 4px !important;
    border:0 !important;
    border-radius:11px !important;
    background:transparent !important;
    color:#526176 !important;
    font:inherit !important;
    box-shadow:none !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetSwitchBtn.is-active{
    background:#0877f8 !important;
    color:#fff !important;
    box-shadow:0 3px 9px rgba(8,119,248,.24) !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetChoiceMath{
    font:700 16px/1 var(--tile-font-family);
  }

  .appShell[data-screen="board"] #rightPalette .tileSetChoiceLabel{
    display:none !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetChoiceCheck{
    display:none !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetSwitchBtn.is-active .tileSetChoiceCheck{
    display:none !important;
  }

  .appShell[data-screen="board"][data-tile-set="xy"] #rightPalette .tilePaletteSections{
    justify-content:flex-start !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--y2{
    width:45px !important;
    height:45px !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid{
    --palette-x2:45px !important;
    --palette-y-unit:26px;
    --palette-xy-long:calc(var(--palette-x2) * 144 / 101);
    grid-template-columns:var(--palette-x2) var(--palette-xy-long) !important;
    grid-template-rows:var(--palette-x2) var(--palette-y-unit) !important;
    width:calc(var(--palette-x2) + var(--palette-xy-long) + var(--palette-gap)) !important;
    min-width:calc(var(--palette-x2) + var(--palette-xy-long) + var(--palette-gap)) !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--yV{
    width:var(--palette-x2) !important;
    height:var(--palette-y-unit) !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--xy{
    width:var(--palette-xy-long) !important;
    height:var(--palette-x2) !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid > .paletteBtn:nth-child(2){
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid > .paletteBtn:nth-child(3){
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .appShell[data-screen="board"][data-tile-set="xy"] #rightPalette .tilePaletteSection--negative{
    display:none !important;
  }
  .appShell[data-screen="board"][data-tile-set="xy"] #rightPalette .tilePaletteSection--y.tilePaletteSection--positive{
    margin-left:8px !important;
    padding-left:16px !important;
    border-left:1px solid rgba(57,82,111,.14) !important;
  }
}

/* Compact palette v3: signed groups have immutable geometry. The browser may
   move the complete palette, but it must never compress an individual group. */
@media (max-width:1060px){
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open{
    display:grid!important;
    width:max-content!important;
    max-width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;
    align-items:stretch!important;
    justify-content:end!important;
    column-gap:0!important;
  }
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open[data-tile-set="x"]{
    grid-template-columns:max-content 58px!important;
  }
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open[data-tile-set="xy"]{
    grid-template-columns:max-content 58px!important;
  }
  .appShell[data-screen="board"] #rightPalette.is-open .tilePaletteContent{
    width:max-content!important;
    max-width:none!important;
    min-width:max-content!important;
    overflow:visible!important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSections{
    --signed-x-group:94px;
    --signed-y-group:106px;
    display:grid!important;
    grid-template-rows:94px!important;
    align-items:center!important;
    justify-content:start!important;
    width:max-content!important;
    min-width:max-content!important;
    height:94px!important;
    min-height:94px!important;
    gap:10px!important;
    padding:0 10px!important;
    overflow:visible!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="x"] .tilePaletteSections{
    grid-template-columns:var(--signed-x-group) var(--signed-x-group)!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSections{
    grid-template-columns:var(--signed-x-group) var(--signed-y-group)!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="x"] .tilePaletteSection--x.tilePaletteSection--positive{
    grid-column:1!important;
    grid-row:1!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="x"] .tilePaletteSection--x.tilePaletteSection--negative{
    grid-column:2!important;
    grid-row:1!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--x{
    grid-column:1!important;
    grid-row:1!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--y{
    grid-column:2!important;
    grid-row:1!important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--x{
    box-sizing:border-box!important;
    width:var(--signed-x-group)!important;
    min-width:var(--signed-x-group)!important;
    max-width:var(--signed-x-group)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y{
    box-sizing:border-box!important;
    width:var(--signed-y-group)!important;
    min-width:var(--signed-y-group)!important;
    max-width:var(--signed-y-group)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--positive{
    display:block!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--negative{
    display:none!important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteGrid{
    max-width:none!important;
    flex:none!important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteGrid > .paletteBtn,
  .appShell[data-screen="board"] #rightPalette .tilePaletteGrid .tilePreview{
    flex:none!important;
    max-width:none!important;
  }
}

@media (max-width:360px){
  .appShell[data-screen="board"] #rightPalette .tilePaletteSections{
    --signed-x-group:86px;
    --signed-y-group:97px;
    grid-template-rows:86px!important;
    height:86px!important;
    min-height:86px!important;
    gap:8px!important;
    padding-inline:7px!important;
  }
}

/* Bottom palette: tiles own the width; infrequent controls share a narrow rail. */
@media (max-width:1060px){
  .appShell[data-screen="board"] #rightPalette.rightPalette,
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-hidden,
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open{
    background:rgba(247,250,253,.98) !important;
  }

  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open{
    right:max(10px,env(safe-area-inset-right)) !important;
    bottom:max(10px,env(safe-area-inset-bottom)) !important;
    width:max-content !important;
    max-width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    height:118px !important;
    min-height:118px !important;
    padding:8px 0 8px 8px !important;
    overflow:visible !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteContent{
    position:relative !important;
    flex:0 1 auto !important;
    width:max-content !important;
    max-width:calc(100vw - 86px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    min-width:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .appShell[data-screen="board"] #rightPalette .tileSetSwitch{
    display:none !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSections,
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open .tilePaletteSections{
    display:flex !important;
    flex:0 0 auto !important;
    width:max-content !important;
    min-width:0 !important;
    min-height:94px !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:4px 12px !important;
    overflow:hidden !important;
    scrollbar-width:none !important;
  }

  .appShell[data-screen="board"][data-tile-set="xy"] #rightPalette .tilePaletteSections{
    padding-right:38px !important;
    box-sizing:border-box !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y.tilePaletteSection--positive,
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y.tilePaletteSection--negative{
    margin-left:0 !important;
    padding-left:10px !important;
    border-left:1px solid rgba(57,82,111,.14) !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid{
    --palette-x2:42px !important;
    --palette-y-unit:24px !important;
    --palette-xy-long:60px !important;
    grid-template-columns:var(--palette-x2) var(--palette-xy-long) !important;
    grid-template-rows:var(--palette-x2) var(--palette-y-unit) !important;
    width:calc(var(--palette-x2) + var(--palette-xy-long) + var(--palette-gap)) !important;
    min-width:calc(var(--palette-x2) + var(--palette-xy-long) + var(--palette-gap)) !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--y2{
    width:var(--palette-x2) !important;
    height:var(--palette-x2) !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--yV{
    width:var(--palette-x2) !important;
    height:var(--palette-y-unit) !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid .tilePreview--xy{
    width:var(--palette-xy-long) !important;
    height:var(--palette-x2) !important;
  }

  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="positive"] .tilePaletteSection--negative,
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="negative"] .tilePaletteSection--positive{
    display:none !important;
  }

  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="negative"] .tilePaletteSection--negative{
    display:block !important;
  }

  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--positive,
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--negative{
    flex:0 0 auto !important;
    transform-origin:50% 50%;
    backface-visibility:hidden;
  }

  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteGrid{
    transform-origin:50% 50%;
    backface-visibility:hidden;
  }

  .appShell[data-screen="board"] #rightPalette .compactPaletteControlRail{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-rows:1fr;
    flex:0 0 58px;
    width:58px;
    min-width:58px;
    align-self:stretch;
    border-left:0;
  }

  .appShell[data-screen="board"] #rightPalette.is-open .compactPaletteControlRail{
    grid-template-rows:1fr 1fr;
    border-left:1px solid rgba(57,82,111,.12);
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableControl{
    position:relative;
    display:none;
    min-width:0;
  }

  .appShell[data-screen="board"] #rightPalette.is-open .compactVariableControl{
    display:block;
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableBtn{
    display:grid;
    width:100%;
    height:100%;
    min-height:44px;
    place-items:center;
    padding:0 3px;
    border:0;
    border-radius:0 19px 0 0;
    background:transparent;
    color:#172033;
    cursor:pointer;
    font:700 15px/1 var(--tile-font-family);
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableBtn[aria-expanded="true"]{
    background:#edf6ff;
    color:#075fcb;
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableBtn:focus-visible{
    outline:3px solid rgba(8,119,248,.3);
    outline-offset:-3px;
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableMenu{
    position:absolute;
    top:auto;
    right:0;
    bottom:calc(100% + 8px);
    z-index:8;
    display:grid;
    grid-template-columns:repeat(2,48px);
    gap:3px;
    padding:3px;
    border:1px solid rgba(57,82,111,.14);
    border-radius:14px;
    background:rgba(247,250,253,.99);
    box-shadow:0 12px 30px rgba(31,55,83,.2);
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableMenu[hidden]{
    display:none !important;
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableMenu button{
    display:grid;
    min-width:44px;
    min-height:44px;
    place-items:center;
    padding:0 4px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#526176;
    cursor:pointer;
    font:700 16px/1 var(--tile-font-family);
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableMenu button.is-active{
    background:#0877f8;
    color:#fff;
    box-shadow:0 3px 9px rgba(8,119,248,.24);
  }

  .appShell[data-screen="board"] #rightPalette .compactVariableMenu button:focus-visible{
    outline:3px solid rgba(8,119,248,.3);
    outline-offset:1px;
  }

  .appShell[data-screen="board"] #rightPalette .compactPaletteControlRail .boardPaletteToggleBtn,
  .appShell[data-screen="board"] #rightPalette.is-open .compactPaletteControlRail .boardPaletteToggleBtn{
    width:58px !important;
    min-width:58px !important;
    flex-basis:auto !important;
    border-left:0 !important;
    border-top:1px solid transparent !important;
    border-radius:0 17px 17px 0 !important;
  }

  .appShell[data-screen="board"] #rightPalette.is-open .compactPaletteControlRail .boardPaletteToggleBtn{
    border-top-color:rgba(57,82,111,.12) !important;
    border-radius:0 0 19px 0 !important;
  }
}

@media (max-width:360px){
  .appShell[data-screen="board"] #rightPalette .tilePaletteSections,
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open .tilePaletteSections{
    gap:8px !important;
    padding-right:10px !important;
    padding-left:10px !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y.tilePaletteSection--positive,
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y.tilePaletteSection--negative{
    padding-left:7px !important;
  }

  .appShell[data-screen="board"][data-tile-set="xy"] #rightPalette .tilePaletteSections{
    padding-right:34px !important;
  }

  .appShell[data-screen="board"] #rightPalette .tilePaletteSection--y .tilePaletteGrid{
    --palette-x2:38px !important;
    --palette-y-unit:22px !important;
    --palette-xy-long:55px !important;
  }
}

/* Compact palette correctness: one-variable mode shows both signed x groups.
   Two-variable mode keeps one stable set of previews and changes their faces
   through the shared board flip engine. */
@media (max-width:1060px){
  .appShell[data-screen="board"] #rightPalette.rightPalette:not(.is-open){
    width:58px!important;
    min-width:58px!important;
  }
  .appShell[data-screen="board"] #rightPalette:not(.is-open) .compactPaletteControlRail,
  .appShell[data-screen="board"] #rightPalette:not(.is-open) .boardPaletteToggleBtn{
    width:56px!important;
    min-width:56px!important;
    flex:0 0 56px!important;
    border:0!important;
    border-radius:17px!important;
  }
  .appShell[data-screen="board"][data-tile-set="x"] #rightPalette .tilePaletteSection--x.tilePaletteSection--positive,
  .appShell[data-screen="board"][data-tile-set="x"] #rightPalette .tilePaletteSection--negative:not(.tilePaletteSection--y){
    display:block !important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePreview{
    transform-origin:50% 50%;
    backface-visibility:hidden;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSections{
    --compact-x-group:94px;
    --compact-y-group:118px;
    display:grid !important;
    grid-template-columns:var(--compact-x-group) var(--compact-y-group) !important;
    grid-template-rows:1fr;
    align-items:center !important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--x{
    grid-column:1;
    grid-row:1;
    width:var(--compact-x-group) !important;
    min-width:var(--compact-x-group) !important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--y{
    grid-column:2;
    grid-row:1;
    width:var(--compact-y-group) !important;
    min-width:var(--compact-y-group) !important;
  }
  .appShell[data-screen="board"] #rightPalette .tilePaletteSection{
    flex:0 0 auto !important;
    min-width:max-content;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--positive{
    display:block !important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSection--negative{
    display:none !important;
  }
  .appShell[data-screen="board"] #rightPalette .compactVariableBtn{
    position:relative;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    min-height:38px;
    margin:5px;
    border:1px solid rgba(57,82,111,.2);
    border-radius:11px;
    background:#f1f5f8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 7px rgba(31,55,83,.08);
  }
  .appShell[data-screen="board"] #rightPalette .compactVariableBtn[aria-expanded="true"]{
    border-color:rgba(8,119,248,.3);
    background:#e7f2ff;
  }
}

@media (max-width:360px){
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSections{
    --compact-x-group:86px;
    --compact-y-group:106px;
  }
}

/* Compact sign picker and content-sized palette. The sign menu sits above the
   tiles and therefore needs no separate vertical column. */
.compactPaletteSignControl{
  display:none;
}

@media (max-width:1060px){
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open{
    left:auto!important;
    right:max(10px,env(safe-area-inset-right))!important;
    width:max-content!important;
    max-width:calc(100vw - max(88px,calc(env(safe-area-inset-left) + 82px)) - max(12px,env(safe-area-inset-right)))!important;
    display:grid!important;
    grid-template-columns:max-content 58px!important;
    align-items:stretch!important;
    column-gap:8px!important;
    overflow-x:auto!important;
  }
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open[data-tile-set="xy"]{
    height:132px!important;
    min-height:132px!important;
  }
  .appShell[data-screen="board"] #rightPalette.is-open .tilePaletteContent{
    grid-column:1;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .appShell[data-screen="board"] #rightPalette.is-open .compactPaletteControlRail{
    grid-column:2;
    width:58px!important;
    min-width:58px!important;
    border-left:1px solid rgba(57,82,111,.12);
  }
  .appShell[data-screen="board"] #rightPalette .compactVariableBtn,
  .appShell[data-screen="board"] #rightPalette .compactVariableBtn[aria-expanded="true"]{
    border-color:#0877f8!important;
    background:#0877f8!important;
    color:#fff!important;
    box-shadow:0 5px 14px rgba(8,119,248,.24)!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteContent{
    display:grid!important;
    grid-template-rows:24px minmax(0,1fr)!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .compactPaletteSignControl:not([hidden]){
    position:relative;
    z-index:12;
    display:flex!important;
    grid-row:1;
    justify-content:center;
    align-items:start;
    height:24px;
  }
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignBtn,
  .appShell[data-screen="board"] #rightPalette.is-open[data-tile-set="xy"] .compactPaletteSignBtn{
    position:relative!important;
    inset:auto!important;
    display:inline-flex!important;
    width:auto!important;
    min-width:0!important;
    height:22px!important;
    min-height:22px!important;
    flex:none!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    margin:0!important;
    padding:0 8px!important;
    overflow:visible!important;
    border:1px solid rgba(57,82,111,.18)!important;
    border-radius:999px!important;
    background:#f4f7fa!important;
    color:#475467!important;
    box-shadow:0 2px 6px rgba(31,55,83,.08)!important;
    font:800 10px/1.1 Montserrat,system-ui,sans-serif!important;
    white-space:nowrap;
  }
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignBtn::before,
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignBtn::after{
    display:none!important;
    content:none!important;
  }
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignMenu{
    position:absolute;
    top:25px;
    left:50%;
    z-index:20;
    display:grid;
    width:max-content;
    min-width:112px;
    padding:4px;
    border:1px solid rgba(57,82,111,.16);
    border-radius:10px;
    background:#fff;
    box-shadow:0 10px 24px rgba(31,55,83,.18);
    transform:translateX(-50%);
  }
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignMenu[hidden]{
    display:none!important;
  }
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignMenu button{
    min-height:28px;
    padding:0 9px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#344054;
    font:750 11px/1.2 Montserrat,system-ui,sans-serif;
    text-align:left;
  }
  .appShell[data-screen="board"] #rightPalette .compactPaletteSignMenu button[aria-checked="true"]{
    background:#eaf3ff;
    color:#0668cf;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"] .tilePaletteSections{
    grid-row:2;
    min-height:84px!important;
    height:84px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="positive"] .tilePaletteSection--positive,
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="negative"] .tilePaletteSection--positive{
    display:block!important;
  }
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="positive"] .tilePaletteSection--negative,
  .appShell[data-screen="board"] #rightPalette[data-tile-set="xy"][data-tile-sign="negative"] .tilePaletteSection--negative{
    display:none!important;
  }
}

@media (max-width:360px){
  .appShell[data-screen="board"] #rightPalette.rightPalette.is-open{
    max-width:calc(100vw - max(78px,calc(env(safe-area-inset-left) + 72px)) - max(8px,env(safe-area-inset-right)))!important;
  }
}