/* Loads before the app bundle, so it has its own tokens. Layout values mirror styles.css. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-condensed-600-latin.woff2) format('woff2');
}
:root {
  --bg: #f6f6f7;
  --surface: #fff;
  --ink: #18181b;
  --muted: #5f5f68;
  --accent: #18181b;
  --line: #e4e4e7;
  --sk: color-mix(in srgb, var(--ink) 7%, transparent);
  --sk-strong: color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--bg);
  color: var(--ink);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0f0f10;
  --surface: #18181b;
  --ink: #f4f4f5;
  --muted: #a8a8b0;
  --accent: #f4f4f5;
  --line: #303034;
  color-scheme: dark;
}
body {
  margin: 0;
}
#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
}
#boot[hidden] {
  display: none;
}
.boot-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.loader-track {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  overflow: hidden;
  z-index: 1;
}
.loader-track::after {
  content: '';
  display: block;
  width: 28%;
  height: 100%;
  background: var(--accent);
  animation: loader-travel 1.3s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
:root[data-boot='login'] .loader-track::after {
  background: #85858d;
}
@keyframes loader-travel {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(360%);
  }
}
.sk {
  display: block;
  border-radius: 8px;
  background: var(--sk);
  animation: sk-breathe 1.6s ease-in-out infinite alternate;
}
@keyframes sk-breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
.boot-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

:root:not([data-boot='login']) .boot-login,
:root[data-boot='login'] .boot-workspace,
.boot-front,
.boot-kitchen,
.boot-other {
  display: none;
}
:root[data-boot-view='front'] .boot-front {
  display: grid;
}
:root[data-boot-view='kitchen'] .boot-kitchen,
:root[data-boot-view='other'] .boot-other,
:root[data-boot-view='settings'] .boot-other {
  display: block;
}

.boot-login {
  --sk: color-mix(in srgb, #101828 7%, transparent);
  --sk-strong: color-mix(in srgb, #101828 12%, transparent);
  display: grid;
  grid-template-columns: 1fr max(420px, 42vw);
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
}
.boot-login-story {
  padding: 28px clamp(24px, 5vw, 72px);
  background: linear-gradient(180deg, #0079b3 0%, #0074b0 58%, #00598f 100%);
}
.boot-login-story img {
  display: block;
  width: 200px;
  height: auto;
  filter: brightness(0) invert(1);
}
.boot-logo {
  display: block;
  height: 38px;
  width: auto;
}
:root[data-theme='dark'] .logo-on-light,
:root:not([data-theme='dark']) .logo-on-dark {
  display: none;
}
.boot-login-form {
  align-self: center;
  justify-self: center;
  width: min(380px, 100% - 64px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.boot-login-client {
  display: block;
  width: 178px;
  height: auto;
  margin-bottom: 30px;
}
[data-logo]:not([src]) {
  visibility: hidden;
}
.sk-title {
  width: 58%;
  height: 38px;
  margin-top: 6px;
}
.sk-label {
  width: 30%;
  height: 12px;
}
.sk-field {
  height: 48px;
}
.sk-button {
  height: 50px;
  margin-top: 6px;
  background: var(--sk-strong);
}

#boot,
#boot * {
  box-sizing: border-box;
}
.boot-topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 70px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.boot-topbar .boot-wordmark {
  min-height: 44px;
}
.boot-nav {
  display: flex;
  gap: 6px;
}
.sk-pill {
  height: 45px;
  border-radius: 9px;
}
.sk-pill:nth-child(1) {
  width: 124px;
}
.sk-pill:nth-child(2) {
  width: 103px;
}
.sk-pill:nth-child(3) {
  width: 110px;
}
.sk-pill:nth-child(4) {
  width: 162px;
}
.sk-pill:nth-child(5) {
  width: 109px;
}
@media (max-width: 860px) {
  .sk-pill {
    height: 44px;
  }
  .sk-pill:nth-child(1) {
    width: 105px;
  }
  .sk-pill:nth-child(2) {
    width: 86px;
  }
  .sk-pill:nth-child(3),
  .sk-pill:nth-child(5) {
    width: 92px;
  }
  .sk-pill:nth-child(4) {
    width: 140px;
  }
}
.boot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.boot-live {
  display: grid;
  place-items: center;
  width: 55px;
  height: 44px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.sk-signout {
  width: 44px;
  height: 44px;
  border-radius: 9px;
}
.sk-menu {
  display: none;
  width: 91px;
  height: 48px;
  margin-right: 22px;
}
/* The logo's alpha masks a conic sweep, so the ring can be drawn like a stroke. */
@property --o-from {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --o-to {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}
.o-mark {
  --o-ink: #005aab;
  --o-ghost: color-mix(in srgb, var(--o-ink) 20%, transparent);
  display: block;
  width: 21px;
  height: 22px;
  background: conic-gradient(
    from 228deg at 50% 45%,
    var(--o-ghost) var(--o-from, 0deg),
    var(--o-ink) var(--o-from, 0deg) var(--o-to, 360deg),
    var(--o-ghost) var(--o-to, 360deg)
  );
  -webkit-mask: url(/brand/orgnyse-mark-blue.png) center / contain no-repeat;
  mask: url(/brand/orgnyse-mark-blue.png) center / contain no-repeat;
}
:root[data-theme='dark'] .o-mark {
  --o-ink: #fff;
}
.o-mark.tracing {
  animation: o-trace 2.2s infinite;
}
@keyframes o-trace {
  0% {
    --o-from: 0deg;
    --o-to: 0deg;
    animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
  }
  55% {
    --o-from: 0deg;
    --o-to: 360deg;
  }
  68% {
    --o-from: 0deg;
    --o-to: 360deg;
    animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
  }
  100% {
    --o-from: 360deg;
    --o-to: 360deg;
  }
}

.boot-bar {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 12px 28px;
}
.sk-chips {
  width: 330px;
  max-width: 100%;
  height: 18px;
}
.boot-main {
  max-width: 1560px;
  margin: 0 auto;
  padding: 30px 28px;
}
.sk-session {
  height: 44px;
  margin-bottom: 10px;
  border-radius: 10px;
}
:root:not(:is([data-boot-view='kitchen'], [data-boot-view='settings'])) .boot-main {
  padding-top: 4px;
}
:root:is([data-boot-view='kitchen'], [data-boot-view='settings']) .boot-bar,
:root:is([data-boot-view='kitchen'], [data-boot-view='settings']) .sk-session {
  display: none;
}

.boot-front {
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: 26px;
  align-items: start;
}
.boot-list,
.boot-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.boot-aside {
  gap: 18px;
}
.sk-search {
  height: 65px;
  border-radius: 12px;
}
.boot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 13px 0;
}
.sk-chip {
  width: 104px;
  height: 44px;
}
.sk-caption {
  width: 60px;
  height: 12px;
  margin: 7px 0 9px;
}
.sk-card {
  height: 133px;
  border-radius: 10px;
}
.sk-card + .sk-card {
  margin-top: 10px;
}
.sk-panel {
  height: 285px;
  border-radius: 12px;
}
.sk-panel.short {
  height: 254px;
}

:root[data-boot-view='kitchen'] .boot-topbar {
  flex-wrap: nowrap;
  padding-block: 6px;
}
:root[data-boot-view='kitchen'] .boot-logo {
  height: 38px;
}
:root[data-boot-view='kitchen'] .boot-nav {
  display: none;
}
:root[data-boot-view='kitchen'] .sk-menu {
  display: block;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1181px) {
  :root[data-boot-view='kitchen'] .boot-nav {
    display: flex;
  }
  :root[data-boot-view='kitchen'] .sk-menu {
    display: none;
  }
}
:root[data-boot-view='kitchen'] .boot-main {
  padding-top: 16px;
}
.boot-kbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 58px;
  margin-bottom: 10px;
}
.sk-ktitle {
  width: 210px;
  height: 36px;
}
.sk-kactions {
  width: 300px;
  height: 48px;
}
.sk-tabs {
  display: none;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.boot-kgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr) minmax(240px, 1fr);
  gap: 20px;
  align-items: start;
}
.boot-kcol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.sk-colhead {
  height: 63px;
  border-radius: 9px;
}
.boot-pair {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}
.sk-ticket {
  height: 300px;
  border-radius: 10px;
  background: linear-gradient(var(--sk-strong) 0 60px, var(--sk) 60px);
}
.sk-urow {
  height: 65px;
  border-radius: 10px;
}

.sk-heading {
  width: 260px;
  height: 44px;
}
.sk-sub {
  width: min(460px, 80%);
  height: 14px;
  margin-top: 15px;
}
.sk-page {
  height: 300px;
  margin-top: 27px;
  border-radius: 12px;
}
:root[data-boot-view='settings'] .sk-page {
  max-width: 760px;
  height: 421px;
}

@media (min-width: 1600px) {
  .boot-topbar,
  .boot-bar {
    padding-inline: calc((100vw - 1504px) / 2);
  }
}
@media (max-width: 905px) {
  .boot-topbar {
    min-height: 62px;
    padding-block: 8px;
    gap: 16px;
  }
  .boot-nav {
    gap: 2px;
  }
  .boot-bar {
    height: 56px;
  }
}
@media (max-width: 1100px) {
  .boot-topbar {
    gap: 16px;
  }
}
@media (max-width: 1023px) {
  .boot-topbar {
    flex-wrap: wrap;
    padding-block: 12px;
    gap: 14px 16px;
  }
  .boot-nav {
    order: 3;
    width: 100%;
  }
}
@media (max-width: 1180px) {
  .boot-kgrid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }
  .sk-menu {
    margin-right: 8px;
  }
}
@media (max-width: 900px) {
  .boot-main {
    padding: 24px 20px 36px;
  }
  .boot-front {
    grid-template-columns: minmax(0, 1fr);
  }
  .boot-aside {
    display: none;
  }
  .sk-heading {
    height: 38px;
  }
}
@media (max-width: 899px) {
  .sk-tabs {
    display: block;
  }
  .sk-colhead,
  .boot-kcol + .boot-kcol {
    display: none;
  }
  .boot-kgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .boot-kbar {
    height: 113px;
    flex-wrap: wrap;
    align-content: center;
  }
}
@media (max-width: 600px) {
  .boot-topbar {
    gap: 12px 10px;
    padding: 10px 16px;
  }
  .boot-logo {
    height: 36px;
  }
  .boot-nav {
    gap: 2px;
  }
  .sk-pill:nth-child(n) {
    flex: 1;
    width: auto;
    height: 54px;
  }
  .boot-bar {
    height: 142px;
    padding: 10px 16px;
  }
  .boot-main {
    padding: 22px 16px 30px;
  }
  .sk-session {
    height: 58px;
  }
  .sk-search {
    height: 58px;
  }
  .boot-row {
    row-gap: 5px;
    margin: 11px 0;
  }
  .sk-caption {
    margin: 7px 0 8px;
  }
  .sk-card {
    height: 180px;
  }
  .boot-kbar {
    height: 196px;
  }
  .sk-menu {
    margin-right: 2px;
  }
  .sk-heading {
    height: 37px;
  }
  .sk-sub {
    margin-top: 12px;
  }
  :root[data-boot-view='other'] .sk-sub {
    height: 33px;
  }
  .sk-page {
    margin-top: 21px;
  }
}
@media (max-width: 860px) {
  .boot-login {
    display: flex;
    flex-direction: column;
  }
  .boot-login-story {
    padding: 16px 20px 18px;
    min-height: clamp(143px, 89.8px + 13.64vw, 169px);
    background: linear-gradient(180deg, #0079b3 0%, #0074b0 58%, #00598f 100%);
  }
  .boot-login-story img {
    width: 150px;
  }
  .boot-login-form {
    align-self: auto;
    justify-self: auto;
    width: min(440px, 100% - 40px);
    margin: 0 auto;
    padding: 28px 0;
  }
  .boot-login-client {
    width: 160px;
    margin-bottom: 10px;
  }
}
@media (max-width: 860px) and (min-height: 844px) {
  .boot-login-story {
    min-height: calc(clamp(143px, 89.8px + 13.64vw, 169px) + 12px + min(40vw, 400px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader-track::after,
  .sk,
  .o-mark.tracing {
    animation: none;
  }
}