/* Fallbacks for embedded TV browsers, including Chromium 53-78. */
body {
  background: #f4f6f8;
  color: #17202a;
}

/* Keep important content away from TV overscan on all supported resolutions. */
.message-tv,
.shift-tv,
.demo-info-tv {
  padding-left: 3vw;
  padding-right: 3vw;
}

.demo-info-footer {
  left: 3vw;
  right: 3vw;
}

.page {
  width: calc(100% - 32px);
  max-width: 1080px;
}

.auth-page {
  width: calc(100% - 32px);
  max-width: 1160px;
}

.auth-hero {
  min-height: 440px;
  padding: 48px;
}

.auth-hero h1 {
  font-size: 4.2rem;
}

.auth-hero p:not(.eyebrow) {
  color: #607080;
  font-size: 1.25rem;
}

.auth-hero a {
  color: #146c94;
}

.qr-panel {
  border-color: #dce3ea;
  background: #ffffff;
  gap: 0 !important;
}

.qr-copy span,
.qr-copy p {
  color: #607080;
}

.qr-box {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 24px;
}

.qr-box img {
  width: 280px;
  max-width: 100%;
}

.message-tv,
.shift-tv,
.demo-info-tv {
  height: 100vh;
  min-height: 100vh;
}

.message-alert {
  display: block;
}

.message-alert strong,
.message-alert span {
  display: block;
}

.postit::before {
  top: 0;
  right: 0;
  left: 0;
}

.postit h2 {
  font-size: 2rem;
}

.postit p {
  font-size: 1.35rem;
}

.postit-symbol,
.postit-empty,
.shift-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.postit-empty {
  flex-direction: column;
}

.weather-strip,
.shift-board,
.shift-column {
  gap: 0 !important;
}

.weather-tile + .weather-tile {
  margin-left: 12px;
}

.shift-column + .shift-column {
  margin-left: 18px;
}

.shift-card + .shift-card {
  margin-top: 6px;
}

.shift-meta {
  margin-left: auto;
}

.shift-empty-sleepy img {
  margin-right: 46px;
}

.saying-bar span {
  font-size: 2.2rem;
}

.shift-card strong {
  font-size: 1.85rem;
}

.shift-time,
.shift-card p {
  font-size: 1.2rem;
}

.shift-card b {
  font-size: 1.4rem;
}

.shift-empty {
  border-color: #dce3ea;
  font-size: 2.2rem;
}

.shift-empty-sleepy strong {
  font-size: 5.8rem;
}

.shift-empty-sleepy span {
  font-size: 2.3rem;
}

.demo-info-hero h1 {
  font-size: 4.4rem;
}

.demo-info-hero p {
  font-size: 1.4rem;
}

.demo-info-grid strong {
  font-size: 1.5rem;
}

.demo-info-grid p {
  font-size: 1.08rem;
}

.status-badge.status-green::before {
  background: #1f9d45;
}

.status-badge.status-yellow::before {
  background: #f2c94c;
}

.status-badge.status-red::before {
  background: #d93a2f;
}

.status-badge::before {
  background: #d93a2f;
}

.shift-card {
  border-left-color: #146c94;
  box-shadow: none;
}

.task-group-0 { border-left-color: #2f80ed; }
.task-group-1 { border-left-color: #27ae60; }
.task-group-2 { border-left-color: #f2994a; }
.task-group-3 { border-left-color: #9b51e0; }
.task-group-4 { border-left-color: #eb5757; }
.task-group-5 { border-left-color: #00a6a6; }
.task-group-6 { border-left-color: #b7791f; }
.task-group-7 { border-left-color: #4f6f52; }

.tv-logout:focus,
.status-badge:focus,
a:focus,
button:focus {
  outline: 4px solid #ffd54a;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .auth-page {
    width: calc(100% - 24px);
    max-width: 560px;
  }

  .auth-hero {
    min-height: 260px;
    padding: 24px;
  }

  .qr-panel {
    display: block;
  }

  .qr-box {
    margin: 18px 0 0;
  }
}

@media (min-width: 960px) and (max-width: 1400px) {
  .message-tv,
  .shift-tv,
  .demo-info-tv {
    padding-left: 38px;
    padding-right: 38px;
  }

  .demo-info-footer {
    left: 38px;
    right: 38px;
  }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  .weather-tile + .weather-tile { margin-left: 24px; }
  .shift-column + .shift-column { margin-left: 36px; }
  .shift-card + .shift-card { margin-top: 12px; }
  .postit h2 { font-size: 3.6rem; }
  .postit p { font-size: 2.5rem; }
  .saying-bar span { font-size: 3.8rem; }
  .shift-card strong { font-size: 3.4rem; }
  .shift-time { font-size: 2.2rem; }
  .shift-card b { font-size: 2.6rem; }
  .shift-card p { font-size: 2.2rem; }
  .demo-info-hero h1 { font-size: 5.15rem; }
  .demo-info-hero p { font-size: 1.55rem; }
  .shift-empty-sleepy img { margin-right: 92px; }
}