:root {
  --crew-blue: #036EB0;
  --crew-navy: #0E1D42;
  --crew-orange: #F58220;
  --crew-page-bg: #F7F7F5;
  --crew-card-border: #E2E0DB;
  --crew-muted: #4A5468;
  --crew-good-bg: #DDF3E6;
  --crew-good-text: #17633D;
  --crew-hold-bg: #FEF0D6;
  --crew-hold-text: #8A5300;
  --crew-lost-bg: #FBE7E2;
  --crew-lost-text: #9A3119;
  --crew-info: #E3EEF6;
  --crew-orange-tint: #FEF0E3;
}

* {
  box-sizing: border-box;
}

.crew-page {
  min-height: 100vh;
  margin: 0;
  background: var(--crew-page-bg);
  color: var(--crew-navy);
  font-family: "Georama", sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

.crew-header,
.crew-main {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

.crew-header {
  padding: 20px;
  background: var(--crew-blue);
  color: #fff;
}

.crew-main {
  padding: 20px 20px 84px;
}

.crew-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--crew-card-border);
  border-radius: 16px;
}

.crew-h,
.crew-big {
  margin-top: 0;
  font-family: "Bungee", sans-serif;
  font-weight: 400;
}

.crew-h {
  line-height: 1.2;
  text-transform: uppercase;
}

.crew-big {
  font-size: 48px;
  line-height: 1.1;
}

.crew-muted {
  color: var(--crew-muted);
}

.crew-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.crew-pill.is-good {
  background: var(--crew-good-bg);
  color: var(--crew-good-text);
}

.crew-pill.is-hold {
  background: var(--crew-hold-bg);
  color: var(--crew-hold-text);
}

.crew-pill.is-lost {
  background: var(--crew-lost-bg);
  color: var(--crew-lost-text);
}

.crew-pill.is-zero {
  background: var(--crew-info);
  color: var(--crew-muted);
}

.crew-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crew-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--crew-orange);
  color: var(--crew-navy);
  font: 700 17px/1.2 "Georama", sans-serif;
  cursor: pointer;
}

.crew-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  background: #fff;
  border-top: 1px solid var(--crew-card-border);
}

.crew-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: var(--crew-muted);
  font-size: 13px;
  line-height: 1.1;
  text-decoration: none;
}

.crew-nav a[aria-current="page"] {
  color: var(--crew-blue);
  font-weight: 700;
}

.crew-nav svg {
  width: 23px;
  height: 23px;
  margin-bottom: 3px;
}

.crew-signin {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin-inline: auto;
  background: var(--crew-blue);
}

.crew-signin .crew-header {
  padding: 32px 28px 36px;
  font-weight: 600;
  text-align: center;
}

.crew-signin .crew-header p {
  margin: 0;
}

.crew-sheet {
  flex: 1;
  padding: 32px 24px 40px;
  background: #fff;
  border-radius: 28px 28px 0 0;
}

.crew-sheet > img {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 72px;
  margin: 0 auto 32px;
}

.crew-sheet .crew-h {
  margin-bottom: 20px;
  font-size: 30px;
}

.crew-sheet p {
  margin: 0 0 20px;
}

.crew-sheet form {
  margin: 24px 0 20px;
}

.crew-signin-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.crew-signin-card svg {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--crew-blue);
}

.crew-signin-card p {
  margin: 0;
  font-weight: 700;
}

/* Home */
.crew-home-header .crew-h {
  margin: 0;
  font-size: 28px;
}

.crew-home {
  display: grid;
  gap: 20px;
}

.crew-home p {
  margin-top: 0;
  margin-bottom: 0;
}

.crew-label,
.crew-tile h2 {
  font-weight: 700;
}

.crew-home .crew-big {
  margin: 8px 0;
}

.crew-home .crew-hold {
  margin-top: 8px;
  color: var(--crew-hold-text);
  font-weight: 700;
}

.crew-tile h2 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.3;
}

.crew-tile-money {
  font-family: "Bungee", sans-serif;
  font-size: 25px;
  line-height: 1.2;
}

.crew-home .crew-lost {
  margin-top: 8px;
  color: var(--crew-lost-text);
  font-size: 14px;
  font-weight: 700;
}

.crew-week-status {
  display: grid;
  gap: 16px;
}

.crew-week-status .crew-h,
.crew-weeks .crew-h {
  margin-bottom: 0;
  font-size: 24px;
}

.crew-attendance,
.crew-call-outs {
  display: grid;
  gap: 6px;
}

.crew-call-outs {
  padding-left: 16px;
}

.crew-weeks {
  display: grid;
  gap: 12px;
}

.crew-week-list {
  padding: 0;
  overflow: hidden;
}

.crew-week-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--crew-card-border);
}

.crew-week-row:last-child {
  border-bottom: 0;
}

.crew-week-row > strong {
  text-align: right;
}

.crew-weeks-link {
  color: var(--crew-blue);
  font-weight: 700;
}

.crew-footer-note {
  font-size: 14px;
  text-align: center;
}

/* My weeks */
.crew-period-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: center;
}

.crew-period-switcher a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--crew-blue);
  font-weight: 700;
  text-decoration: none;
}

.crew-period-switcher a:last-child {
  justify-content: flex-end;
}

.crew-week-summary {
  cursor: pointer;
}

.crew-week-summary > .crew-week-row {
  display: inline-grid;
  width: calc(100% - 28px);
  vertical-align: middle;
}

.crew-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--crew-card-border);
  color: var(--crew-navy);
  text-decoration: none;
}

.crew-job-row > span {
  display: grid;
  gap: 2px;
}

.crew-job-result {
  text-align: right;
}

.crew-job-result.is-good {
  color: var(--crew-good-text);
}

.crew-job-result.is-hold {
  color: var(--crew-hold-text);
}

.crew-job-result.is-zero {
  color: var(--crew-muted);
}

.crew-job-result.is-lost {
  color: var(--crew-lost-text);
}

.crew-struck-amount {
  text-decoration: line-through;
}

/* Job */
.crew-job-header {
  padding-top: 0;
}

.crew-job-back {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.crew-job-day,
.crew-job-header .crew-h,
.crew-job-award,
.crew-job-header-result,
.crew-job-result-large {
  margin: 0;
}

.crew-job-header .crew-h {
  margin-top: 4px;
  font-size: 28px;
}

.crew-job-award {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
}

.crew-job-award .crew-big {
  margin: 0;
}

.crew-job-header-result,
.crew-job-result-large {
  margin-top: 8px;
  font-weight: 700;
}

.crew-job-result-large {
  font-size: 22px;
}

.crew-job {
  display: grid;
  gap: 20px;
}

.crew-job > .crew-h {
  margin-bottom: 0;
  font-size: 24px;
}

.crew-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--crew-card-border);
}

.crew-step:first-child {
  padding-top: 0;
}

.crew-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.crew-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--crew-blue);
  color: #fff;
  font-weight: 700;
}

.crew-step:last-child .crew-step-number {
  background: var(--crew-orange);
  color: var(--crew-navy);
}

.crew-step-copy h3,
.crew-step-copy p {
  margin: 0;
}

.crew-step-copy h3 {
  font-size: 17px;
}

.crew-step-copy p + p {
  margin-top: 8px;
}

.crew-step-copy .crew-muted {
  font-size: 14px;
}

.crew-step-good {
  color: var(--crew-good-text);
  font-weight: 700;
}

.crew-crew-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.crew-crew-card svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--crew-blue);
}

.crew-crew-card p {
  margin: 0;
}

.crew-split {
  padding: 20px;
  background: var(--crew-info);
  border-radius: 16px;
}

.crew-split h2,
.crew-split p {
  margin: 0;
}

.crew-split h2 {
  font-size: 20px;
}

.crew-split-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.crew-split-tile {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
}

.crew-split-tile strong {
  color: var(--crew-blue);
  font-family: "Bungee", sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.crew-split-tile span {
  font-size: 14px;
}

.crew-job-legend {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

/* Today */
.crew-today-header {
  padding-top: 0;
  background: var(--crew-navy);
}

.crew-today-day,
.crew-today-header .crew-h,
.crew-today-crew,
.crew-today p,
.crew-today-card span,
.crew-today-card strong {
  margin: 0;
}

.crew-today-header .crew-h {
  margin-top: 4px;
  font-size: 28px;
}

.crew-today-crew {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--crew-orange);
  color: var(--crew-navy);
  font-size: 14px;
  font-weight: 700;
}

.crew-today-crew svg {
  width: 20px;
  height: 20px;
}

.crew-today {
  display: grid;
  gap: 20px;
}

.crew-today-message {
  display: grid;
  gap: 8px;
}

.crew-today-status {
  display: grid;
  gap: 8px;
  padding: 24px 20px;
  border-radius: 16px;
  text-align: center;
}

.crew-today-status.is-ahead {
  background: #17633D;
  color: #fff;
}

.crew-today-status.is-on-target {
  background: #FAA627;
  color: var(--crew-navy);
}

.crew-today-status.is-over {
  background: #B23A20;
  color: #fff;
}

.crew-today-status-pill {
  justify-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 20%);
  font-size: 14px;
  font-weight: 700;
}

.crew-today-status.is-on-target .crew-today-status-pill {
  background: rgb(14 29 66 / 12%);
}

.crew-today-timer {
  font-family: "Bungee", sans-serif;
  font-size: 84px;
  line-height: 1;
}

.crew-today-status progress {
  width: 100%;
  height: 14px;
  margin: 10px 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 30%);
  accent-color: #fff;
}

.crew-today-status progress::-webkit-progress-bar {
  background: rgb(255 255 255 / 30%);
  border-radius: 999px;
}

.crew-today-status progress::-webkit-progress-value {
  background: #fff;
  border-radius: 999px;
}

.crew-today-status progress::-moz-progress-bar {
  background: #fff;
  border-radius: 999px;
}

.crew-today-status.is-on-target progress {
  background: rgb(14 29 66 / 20%);
  accent-color: var(--crew-navy);
}

.crew-today-status.is-on-target progress::-webkit-progress-bar {
  background: rgb(14 29 66 / 20%);
}

.crew-today-status.is-on-target progress::-webkit-progress-value,
.crew-today-status.is-on-target progress::-moz-progress-bar {
  background: var(--crew-navy);
}

.crew-today-budget {
  margin-top: -12px !important;
  font-size: 14px;
  text-align: center;
}

.crew-today-goal {
  display: grid;
  gap: 6px;
  border: 2px solid var(--crew-blue);
  text-align: center;
}

.crew-today-goal .crew-h {
  margin-top: 4px;
  font-size: 28px;
}

.crew-today > .crew-h {
  margin: 4px 0 -8px;
  font-size: 24px;
}

.crew-today-ladder {
  padding: 0;
  overflow: hidden;
}

.crew-today-ladder-list {
  display: grid;
}

.crew-today-ladder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--crew-card-border);
}

.crew-today-ladder-row.is-passed {
  color: var(--crew-muted);
  text-decoration: line-through;
}

.crew-today-ladder-row.is-best {
  background: var(--crew-orange-tint);
}

.crew-today-ladder > p {
  padding: 0 20px;
}

.crew-today-ladder > p:first-of-type {
  margin-top: 16px;
  font-weight: 700;
}

.crew-today-ladder > p:last-child {
  margin: 8px 0 20px;
  font-size: 14px;
}

.crew-today-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--crew-navy);
  color: #fff;
  text-decoration: none;
}

.crew-today-card > svg {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--crew-orange);
}

.crew-today-card-copy {
  display: grid;
  gap: 6px;
}

.crew-today-card-bonus {
  color: #F9B77E;
  font-size: 14px;
  font-weight: 700;
}

/* How it works */
.crew-how-header .crew-h {
  margin-bottom: 4px;
  font-size: 28px;
}

.crew-how-header p {
  margin: 0;
}

.crew-how {
  display: grid;
  gap: 20px;
}

.crew-how > .crew-h {
  margin: 4px 0 -8px;
  font-size: 24px;
}

.crew-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crew-rule {
  padding: 16px;
  border-radius: 14px;
}

.crew-rule.is-info {
  background: var(--crew-info);
}

.crew-rule.is-orange {
  background: var(--crew-orange-tint);
}

.crew-rule h3,
.crew-rule p,
.crew-how-intro,
.crew-tip p,
.crew-tip-question p {
  margin: 0;
}

.crew-rule h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.crew-how-intro {
  margin-top: -8px;
}

.crew-tip {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--crew-card-border);
  border-radius: 16px;
}

.crew-tip summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px;
  cursor: pointer;
}

.crew-tip-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
}

.crew-tip-number.is-tech {
  background: #036EB0;
  color: #fff;
}

.crew-tip-number.is-lead {
  background: #F58220;
  color: #0E1D42;
}

.crew-tip-number.is-crew {
  background: #0E1D42;
  color: #fff;
}

.crew-tip-title {
  font-weight: 700;
  line-height: 1.3;
}

.crew-tip-who {
  color: var(--crew-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.crew-tip-body {
  display: grid;
  gap: 16px;
  padding: 0 16px 16px;
  border-top: 1px solid var(--crew-card-border);
}

.crew-tip-why {
  padding-top: 16px;
}

.crew-tip-how {
  font-weight: 700;
}

.crew-tip-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-tip-steps li {
  position: relative;
  padding-left: 28px;
}

.crew-tip-steps li::before {
  position: absolute;
  top: 0;
  left: 2px;
  color: var(--crew-good-text);
  content: "✓";
  font-weight: 700;
}

.crew-tip-question {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--crew-info);
  border-radius: 12px;
}