:root {
  --vita-green: #00784e;
  --vita-warning: #d53f25;
  --vita-color-danger: #9d0000;
  --vita-info: #146c94;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vita-green: rgb(15.8823529412%, 100%, 70.5588235294%);
    --vita-warning: rgb(89.4368627451%, 46.6133333333%, 39.1905882353%);
    --vita-color-danger: rgb(100%, 23.0196078431%, 23.0196078431%);
    --vita-info: rgb(35.0168067227%, 73.6554621849%, 91.218487395%);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--body, #424240);
  background: var(--bg-body, #fefdfa);
  font-family: "Work Sans", "Sans Serif Fallback", sans-serif;
  line-height: 1.5;
}

.app-shell__header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--b, #e3e3e2);
}

.app-shell__brand {
  font-weight: 700;
}

.app-shell__nav {
  display: flex;
  gap: 16px;
}

.app-shell__main {
  padding: 24px;
}

.booking-step {
  max-width: 640px;
}

.booking-step__pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.booking-step__change {
  font-size: 0.9em;
}

.booking-step__caveat,
.booking-step__hint,
.booking-step__intro {
  color: var(--dark-gray, #6b6b68);
}

.booking-notice {
  padding: 12px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  margin-bottom: 16px;
}

.booking-notice--warning {
  border-color: var(--vita-warning, #d53f25);
  background: color-mix(in srgb, #d53f25 18%, var(--bg-body, #fefdfa));
}

.booking-notice--success {
  border-color: var(--vita-green, #00784e);
  background: color-mix(in srgb, #00784e 18%, var(--bg-body, #fefdfa));
}

.booking-notice--info {
  border-color: var(--vita-info, #146c94);
  background: color-mix(in srgb, #146c94 18%, var(--bg-body, #fefdfa));
}

.booking-notice__link {
  margin-left: 8px;
  font-weight: 600;
}

.booking-loading,
.booking-empty {
  color: var(--dark-gray, #6b6b68);
}

.booking-error {
  color: var(--vita-color-danger, #9d0000);
}

.form-error {
  color: var(--vita-color-danger, #9d0000);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 6px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  max-width: 320px;
  font: inherit;
}

.form-field--checkbox {
  flex-direction: row;
  align-items: center;
}

.form-field__badge {
  display: inline-block;
  font-size: 0.75em;
  color: var(--vita-green, #00784e);
  font-weight: 600;
}

.form-field__hint {
  color: var(--dark-gray, #6b6b68);
  margin: 0;
}

.form-field__input--locked {
  background: var(--bg-lightest-gray, #f6f6f5);
}

.form-field__readonly {
  color: var(--body, #424240);
}

.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 3px;
}
.form-fieldset legend {
  padding: 0 0.25em;
  font-weight: 600;
}
.form-fieldset > label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: normal;
}

.form-fieldset--nested {
  gap: 0.35em;
  margin: 0;
  padding: 0;
  border: none;
}
.form-fieldset--nested legend {
  padding: 0;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  color: var(--body, #424240);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--bg-btn-primary, #d00000);
  border-color: var(--b-btn-primary, #d00000);
  color: var(--btn-primary, #fefdfa);
}

.btn--link {
  border: none;
  background: none;
  color: var(--link, #d00000);
  text-decoration: underline;
  padding: 4px 0;
}

.btn--danger {
  background: var(--vita-color-danger, #9d0000);
  border-color: var(--vita-color-danger, #9d0000);
  color: #fefdfa;
}

.btn--link.btn--danger {
  background: none;
  border: none;
  color: var(--vita-color-danger, #9d0000);
  padding: 4px 0;
}

.site-card-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}

.site-card {
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  gap: 16px;
}

.site-card__photo {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}

.site-card__phone,
.site-card__open-appointments {
  margin: 2px 0;
  color: var(--dark-gray, #6b6b68);
}

.site-card__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.dashboard-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.dashboard-tile {
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 6px;
  padding: 16px;
  background: var(--bg-card, #fefdfa);
}
.dashboard-tile h2 {
  margin: 0 0 0.5em;
  font-size: 1.05em;
}

.dashboard-tile--approved {
  border-color: var(--vita-green);
}

.dashboard-tile--needs_attention {
  border-color: var(--vita-color-danger);
}

.dashboard-tile--partly_uploaded,
.dashboard-tile--in_review {
  border-color: var(--vita-warning);
}

.dashboard-tile--locked {
  opacity: 0.75;
  background: var(--bg-lightest-gray, #f6f6f5);
}

.dashboard-tile--compact {
  padding: 8px;
}
.dashboard-tile--compact h2 {
  font-size: 0.95em;
}

.dashboard-tile--primary {
  padding: 20px;
  border-width: 2px;
  border-color: var(--link, #d00000);
  background: color-mix(in srgb, var(--link, #d00000) 12%, var(--bg-body, #fefdfa));
}
.dashboard-tile--primary h2 {
  font-size: 1.3em;
}

.dashboard-tile-grid--compact {
  gap: 8px;
}

.dashboard-tile__head {
  margin-bottom: 4px;
}

.dashboard-tile__status {
  display: block;
  width: fit-content;
  margin: 0 0 0.5em;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-lightest-gray, #f6f6f5);
  color: var(--body, #424240);
}

.dashboard-tile__status--approved {
  background: color-mix(in srgb, #00784e 18%, var(--bg-body, #fefdfa));
  color: var(--vita-green, #00784e);
}

.dashboard-tile__status--needs_attention {
  background: color-mix(in srgb, #d00000 18%, var(--bg-body, #fefdfa));
  color: var(--vita-color-danger, #9d0000);
}

.dashboard-tile__status--partly_uploaded,
.dashboard-tile__status--in_review {
  background: color-mix(in srgb, #d53f25 18%, var(--bg-body, #fefdfa));
  color: var(--vita-warning, #d53f25);
}

.dashboard-tile__status--reminder {
  background: color-mix(in srgb, #146c94 18%, var(--bg-body, #fefdfa));
  color: var(--vita-info, #146c94);
}

.dashboard-tile__upload-count {
  color: var(--dark-gray, #6b6b68);
}

.checklist__locked-note {
  color: var(--dark-gray, #6b6b68);
  font-style: italic;
}

.dashboard-tile__description {
  color: var(--dark-gray, #6b6b68);
}

.dashboard-tile__links {
  margin: 8px 0 0;
}

.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.day-picker__day {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
}
.day-picker__day--selected {
  border-color: var(--link, #d00000);
  background: color-mix(in srgb, var(--link, #d00000) 12%, var(--bg-body, #fefdfa));
}
.day-picker__day--closed, .day-picker__day:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.day-picker__closed {
  font-size: 0.75em;
  color: var(--vita-color-danger, #9d0000);
}

.month-picker {
  margin-bottom: 16px;
}

.month-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.month-picker__label {
  margin: 0;
  font-size: 1em;
}

.month-picker__nav {
  padding: 4px 8px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.month-picker__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.month-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.75em;
  color: var(--dark-gray, #6b6b68);
  text-align: center;
}

.month-picker__grid {
  display: grid;
  gap: 4px;
}

.month-picker__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.month-picker__day {
  min-height: 3.25em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
}
.month-picker__day--empty {
  border-color: transparent;
  background: transparent;
}
.month-picker__day--today {
  font-weight: 700;
}
.month-picker__day--open {
  border-color: var(--vita-green, #00784e);
}
.month-picker__day--selected {
  border-color: var(--link, #d00000);
  background: color-mix(in srgb, var(--link, #d00000) 12%, var(--bg-body, #fefdfa));
  font-weight: 700;
}
.month-picker__day--full, .month-picker__day--closed, .month-picker__day--none, .month-picker__day--past, .month-picker__day--out-of-range, .month-picker__day[aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}

.month-picker__day-number {
  font-size: 1em;
}

.month-picker__day-badge {
  font-size: 0.65em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--vita-green, #00784e);
}

.month-picker__day-language {
  font-size: 0.65em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--link, #d00000);
  font-weight: 700;
}

.month-picker__legend {
  margin: 8px 0 0;
  font-size: 0.85em;
}

.month-picker__legend-mark {
  color: var(--link, #d00000);
}

.month-picker__day--full .month-picker__day-badge,
.month-picker__day--closed .month-picker__day-badge {
  color: var(--vita-color-danger, #9d0000);
}

.month-picker__detail {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--vita-color-danger, #9d0000);
}

.shift-calendar {
  margin-bottom: 16px;
}

.shift-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shift-calendar__label {
  margin: 0;
  font-size: 1em;
}

.shift-calendar__nav {
  padding: 4px 8px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.shift-calendar__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.shift-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.75em;
  color: var(--dark-gray, #6b6b68);
  text-align: center;
}

.shift-calendar__grid {
  display: grid;
  gap: 4px;
}

.shift-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.shift-calendar__day {
  min-height: 3.25em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
}
.shift-calendar__day--empty {
  border-color: transparent;
  background: transparent;
}
.shift-calendar__day--today {
  font-weight: 700;
}
.shift-calendar__day--open {
  border-color: var(--vita-green, #00784e);
}
.shift-calendar__day--full {
  border-color: var(--vita-warning, #d53f25);
}
.shift-calendar__day--closed {
  border-color: var(--vita-color-danger, #9d0000);
}
.shift-calendar__day--selected {
  border-color: var(--link, #d00000);
  background: color-mix(in srgb, var(--link, #d00000) 12%, var(--bg-body, #fefdfa));
  font-weight: 700;
}
.shift-calendar__day--past, .shift-calendar__day[aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}

.shift-calendar__day-number {
  font-size: 1em;
}

.shift-calendar__day-badge {
  font-size: 0.65em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--vita-green, #00784e);
}

.shift-calendar__day--full .shift-calendar__day-badge {
  color: var(--vita-warning, #d53f25);
}

.shift-calendar__day--closed .shift-calendar__day-badge {
  color: var(--vita-color-danger, #9d0000);
}

.shift-calendar__day-signed-up {
  font-size: 0.75em;
  line-height: 1;
  color: var(--link, #d00000);
  font-weight: 700;
}

.shift-calendar__detail {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--dark-gray, #6b6b68);
}

.slot-list__reassurance {
  color: var(--dark-gray, #6b6b68);
  font-size: 0.85em;
  margin: 0 0 8px;
}

.slot-list__items {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.slot-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  background: var(--bg-card, #fefdfa);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.slot-row__seats {
  margin-left: auto;
}
.slot-row:hover:not(:disabled), .slot-row:focus-visible:not(:disabled) {
  border-color: var(--link, #d00000);
  background: color-mix(in srgb, var(--link, #d00000) 12%, var(--bg-body, #fefdfa));
}
.slot-row--picked {
  border-color: var(--link, #d00000);
  background: color-mix(in srgb, var(--link, #d00000) 12%, var(--bg-body, #fefdfa));
}
.slot-row--full, .slot-row:disabled {
  cursor: not-allowed;
}
.slot-row--full:not(.slot-row--current), .slot-row:disabled:not(.slot-row--current) {
  opacity: 0.5;
}
.slot-row--current .slot-row__seats {
  color: var(--dark-gray, #6b6b68);
  font-style: italic;
}

.slot-row__arrow {
  color: var(--link, #d00000);
  font-weight: 700;
}

.slot-row__badge {
  font-size: 0.8em;
  color: var(--vita-green, #00784e);
}

.existing-appt-list {
  list-style: none;
  padding: 0;
}

.existing-appt-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--b, #e3e3e2);
}

.review-list {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 8px;
  column-gap: 16px;
}
.review-list dt {
  font-weight: 600;
}
.review-list dd {
  margin: 0;
}

.booking-demographics {
  margin: 16px 0;
  border: 1px solid var(--b, #e3e3e2);
  border-radius: 4px;
  padding: 12px;
}