/* Телефон: раздел 9 разбора лейаута. Класс .lay-phone ставит JS по
   matchMedia; вторая координатная система живёт в tokens.css. */

/* кнопка «Лог» и шторка нужны только на телефоне */
#btn-log-sheet { display: none; }

html.lay-phone #btn-log-sheet { display: inline-flex; align-items: center; }
html.lay-phone .topbar { height: 40px; padding: 0 8px; gap: 6px; }
html.lay-phone .topbar__season { display: none; }
html.lay-phone .topbar__center { font-size: 11px; gap: 8px; }
html.lay-phone .tb { padding: 0 6px; font-size: 12px; height: 26px; }
/* §9.3: название стола уезжает, меню сворачивается в бургер */
html.lay-phone .topbar__left { display: none; }
html.lay-phone .tb--burger { display: inline-flex; align-items: center; }
html.lay-phone .topbar__nav { display: none; }
html.lay-phone .topbar.is-open .topbar__nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  right: 0;
  top: 34px;
  z-index: 250;
  min-width: 160px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
html.lay-phone .topbar.is-open .topbar__nav .tb { height: 34px; text-align: left; }

/* плашка на телефоне ниже: вторая строка в неё не влезает (§9.3) */
html.lay-phone .seat__sub { display: none; }
html.lay-phone .seat__name { font-size: 11px; }
html.lay-phone .settings { right: 8px; top: 44px; width: calc(100vw - 16px); }

html.lay-phone .actionbar {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  height: auto;
  flex-direction: column;
  gap: 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
html.lay-phone .log { display: none; }
html.lay-phone .cluster { width: 100%; }
html.lay-phone .cluster__a { height: 34px; margin-bottom: 6px; }
html.lay-phone .cluster__b { height: 34px; margin-bottom: 6px; }
html.lay-phone .cluster__c { height: 52px; }

html.lay-phone .fracs, html.lay-phone .status,
html.lay-phone .autonext, html.lay-phone .amount,
html.lay-phone .mainrow { padding-right: 0; gap: 6px; }

html.lay-phone .frac { flex: 1 1 0; width: auto; height: 34px; font-size: 12px; }
html.lay-phone .amount__field { width: 72px; height: 34px; font-size: 16px; }
html.lay-phone .slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
html.lay-phone .slider::-moz-range-thumb { width: 28px; height: 28px; }

html.lay-phone .main, html.lay-phone .pre { flex: 1 1 0; width: auto !important; height: 52px; }
html.lay-phone .main__t { font-size: 15px; }
html.lay-phone .main__s { display: none; }
html.lay-phone .pre__t { font-size: 13px; }

html.lay-phone .toast { right: 8px; left: 8px; bottom: auto; top: 8px; max-width: none; }

html:not(.lay-phone) .logsheet { display: none !important; }