/* Opt-in tray trial. The frozen Version A and every other style stay untouched. */
.cr-tray-toolbar, .cr-tray-pan-cue { display: none; }

@media (max-width: 700px), (max-width: 1000px) and (max-height: 540px) {
  .cr-app[data-tray-ui] .cr-workspace {
    height: calc(100svh - 12px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    grid-template-rows: 40px minmax(0, 1fr) auto 172px;
    gap: 3px;
    scroll-margin-top: 6px;
  }
  .cr-app[data-tray-ui] .cr-play {
    min-height: 0;
    align-self: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #82908d #dce5e1;
  }
  .cr-app[data-tray-ui] .cr-board-frame { padding: 0; width: min(100%, 307px); }
  .cr-app[data-tray-ui] .cr-play[data-scrollable="true"] .cr-tray-pan-cue {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 20px;
    padding: 2px 4px;
    background: #e6e0f0;
    color: #53435e;
    border-radius: 5px;
    font-size: 10px;
    line-height: 16px;
    font-weight: 750;
    text-align: center;
    pointer-events: none;
  }
  .cr-app[data-tray-ui] .cr-rack { min-width: 0; }
  .cr-app[data-tray-ui] .cr-rack > .cr-section-heading { display: block; margin: 0 0 4px; min-height: 44px; }
  .cr-app[data-tray-ui] .cr-rack > .cr-section-heading > h2 {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cr-app[data-tray-ui] .cr-tray-toolbar { display: flex; align-items: center; gap: 4px; min-width: 0; height: 44px; }
  .cr-app[data-tray-ui] .cr-tray-toggle {
    display: flex; flex: 1; align-items: center; gap: 5px;
    min-height: 44px; min-width: 94px; padding: 2px 4px;
    border: 1px solid #b3a7be; border-radius: 8px; background: #e9e1ef; color: #4f4058;
    box-shadow: inset 0 1px 0 #fff9, 0 2px 0 #b3a7be;
    text-align: left; touch-action: none; user-select: none;
  }
  .cr-app[data-tray-ui] .cr-tray-toggle > span:nth-child(2) { display: grid; gap: 1px; }
  .cr-app[data-tray-ui] .cr-tray-toggle strong { font-size: 11px; line-height: 14px; }
  .cr-app[data-tray-ui] .cr-tray-toggle small { font-size: 9px; line-height: 11px; white-space: nowrap; }
  .cr-app[data-tray-ui] .cr-tray-grip { flex: 0 0 7px; height: 17px; border-inline: 2px solid #9785a6; }
  .cr-app[data-tray-ui] .cr-tray-chevron { margin-left: auto; font-size: 17px; }
  .cr-app[data-tray-ui] .cr-tray-pin {
    display: grid; place-items: center; align-content: center; gap: 1px;
    width: 44px; min-width: 44px; height: 44px; padding: 2px;
    border: 1px solid #b9ad9b; border-radius: 8px; color: #655548; background: #f5eddd;
    font-size: 9px; font-weight: 750; box-shadow: 0 2px 0 #b9ad9b;
  }
  .cr-app[data-tray-ui] .cr-tray-pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cr-app[data-tray-ui] .cr-tray-pin[aria-pressed="true"] { background: #57465f; color: #fff7e7; border-color: #57465f; box-shadow: 0 2px 0 #392f41; }
  .cr-app[data-tray-ui] .cr-tray-pin:disabled { opacity: .45; box-shadow: none; }
  .cr-app[data-tray-ui] :is(.cr-tray-pin, .cr-tray-toggle):focus-visible { outline: 3px solid #57465f; outline-offset: 2px; }
  .cr-app[data-tray-ui] .cr-rack-metrics { display: grid; gap: 2px; font-size: 8px; min-width: 83px; }
  .cr-app[data-tray-ui] .cr-rack-metrics strong { font-size: 11px; }
  .cr-app[data-tray-ui] .cr-cube-list { grid-auto-rows: 80px; min-height: 166px; gap: 6px 7px; padding-bottom: 3px; }
  .cr-app[data-tray-ui] .cr-cube-button { min-height: 80px; padding: 3px; gap: 2px; transform: none; }
  .cr-app[data-tray-ui] .cr-cube-net { --net-cell: 18px; }
  .cr-app[data-tray-ui] .cr-net-face strong { font-size: 14px; }
  .cr-app[data-tray-ui] .cr-cube-status { font-size: 8px; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-list {
    grid-template-columns: repeat(var(--tray-count), minmax(0, 1fr));
    grid-auto-rows: 62px; min-height: 65px; gap: 0 6px;
  }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-button { min-height: 62px; padding: 12px 1px 2px; gap: 3px; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-button > .cr-cube-code {
    top: 3px; left: 4px; height: 13px; min-height: 13px; width: 18px; font-size: 8px; border-radius: 4px;
  }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-selection { top: 6px; right: 5px; width: 7px; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-net { display: grid; grid-template: 26px / 26px; gap: 0; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-net-face:not(.is-top) { display: none; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-net-face.is-top { grid-area: 1 / 1; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-net-face strong { font-size: 20px; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-status { font-size: 7px; white-space: nowrap; }
  .cr-app[data-tray-ui] .cr-touch-dock { height: 172px; padding: 0; border: 0; }
  .cr-app[data-tray-ui] .cr-toolbar-restart {
    display: grid; align-content: center; justify-items: center; gap: 0;
    flex: 0 0 56px; width: 56px; height: 44px; min-height: 44px; padding: 2px;
    border: 1px solid #604832; border-radius: 8px; background: #795c43; color: #fff5df;
    box-shadow: inset 0 1px 0 #ffffff30, 0 2px 0 #4f3d2f;
  }
  .cr-app[data-tray-ui] .cr-toolbar-restart > span { font-size: 21px; line-height: 21px; }
  .cr-app[data-tray-ui] .cr-toolbar-restart > strong { font-size: 10px; line-height: 13px; font-weight: 750; }
  .cr-app[data-tray-ui] .cr-restart-dialog { max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); border: 2px solid #9c8c76; border-radius: 12px; background: #f6efdf; }
  .cr-app[data-tray-ui] .cr-restart-dialog .cr-dialog-actions { display: grid; gap: 12px; }
  .cr-app[data-tray-ui] .cr-restart-dialog button { min-height: 44px; }
  .cr-app[data-tray-ui] .cr-restart-dialog .cr-icon-button { min-width: 44px; }
  .cr-app[data-tray-ui] .cr-restart-dialog [data-focus-key="keep-playing"] { background: #57465f; border-color: #57465f; color: #fff7e7; }
  .cr-app[data-tray-ui] .cr-restart-dialog [data-action="confirm-restart"] { background: #f2e7d3; border-color: #c2ad90; color: #725845; }
  .cr-app[data-tray-ui] :is(.cr-toolbar-restart, .cr-restart-dialog button):focus-visible { outline: 3px solid #57465f; outline-offset: 2px; }
  .cr-app[data-tray-ui] .cr-tray-dialog { width: calc(100vw - 20px); max-width: 500px; max-height: calc(100svh - 24px); }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-dialog-header > button { min-width: 44px; min-height: 44px; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-rack > .cr-section-heading { display: none; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 80px; min-height: 0; gap: 8px; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-button { min-height: 80px; padding: 3px; gap: 2px; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-net { display: grid; grid-template-columns: repeat(4, 18px); grid-template-rows: repeat(3, 18px); gap: 2px; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-net-face:not(.is-top) { display: grid; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-net-face.is-top { grid-area: 2 / 2; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-net-face strong { font-size: 14px; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-code { top: 4px; height: 18px; min-height: 18px; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-status { font-size: 8px; }
  .cr-app[data-tray-ui] .cr-tray-dialog-note { font-size: 12px; line-height: 1.4; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-dialog-body > .cr-button { width: 100%; min-height: 44px; }
}

@media (max-width: 700px) and (max-height: 559px) {
  .cr-app[data-tray-ui] .cr-hints-dialog { height: calc(100svh - 16px); }
}

@media (min-width: 701px) {
  .cr-app[data-tray-ui] .cr-rack > .cr-section-heading { display: flex; }
}