/* Monochrome cKas treatment for the daily-report entry flow. */
html:has(body.step1-basic-page[data-step]) {
  --step-mono-paper: #fff;
  --step-mono-ink: #090909;
  --step-mono-muted: #666;
  --step-mono-rule: #d8d8d8;
  --step-mono-soft: #f3f3f3;
  background: var(--step-mono-paper) !important;
  color-scheme: light;
}

/* Match the cKas home header after workflow-specific styles have loaded. */
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .step-top-brand-bar {
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10040 !important;
  display: grid !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1180px !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  height: calc(82px + env(safe-area-inset-top)) !important;
  min-height: calc(82px + env(safe-area-inset-top)) !important;
  margin: 0 auto !important;
  padding: env(safe-area-inset-top) 32px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--step-mono-rule) !important;
  border-radius: 0 !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .nippo-header-icon-link {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  grid-column: 1 !important;
  justify-self: start !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .nippo-header-icon-link::before,
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .nippo-header-icon-link::after {
  display: none !important;
  content: none !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .nippo-header-title {
  grid-column: 2 !important;
  justify-self: center !important;
  color: var(--step-mono-ink) !important;
  font: 700 21px/1 Arial, sans-serif !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .nippo-header-mark {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  object-fit: contain !important;
  filter: grayscale(1) invert(1) !important;
}
html:has(body.step1-basic-page[data-step][data-theme="dark"]) body.step1-basic-page[data-step][data-theme="dark"] .nippo-header-mark {
  filter: grayscale(1) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .nippo-theme-toggle {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 0 !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
  grid-column: 3 !important;
  justify-self: end !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .step-bar {
  top: calc(82px + env(safe-area-inset-top)) !important;
}
@media (max-width: 767px) {
  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .step-top-brand-bar {
    height: calc(68px + env(safe-area-inset-top)) !important;
    min-height: calc(68px + env(safe-area-inset-top)) !important;
    padding-inline: 20px !important;
  }
  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .step-bar {
    top: calc(68px + env(safe-area-inset-top)) !important;
  }
}

body.step1-basic-page[data-step] {
  --main-color: var(--step-mono-ink) !important;
  --theme-color-base: var(--step-mono-ink) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}

html:has(body.step1-basic-page[data-theme="dark"]) {
  --step-mono-paper: #090909;
  --step-mono-ink: #fff;
  --step-mono-muted: #bdbdbd;
  --step-mono-rule: #383838;
  --step-mono-soft: #171717;
  background: var(--step-mono-paper) !important;
  color-scheme: dark;
}

body.step1-basic-page[data-theme="dark"] {
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}

body.step1-basic-page[data-step] :is(
  .step-top-brand-bar,
  .step-bar,
  .step-context-bar,
  .page,
  .card,
  .date-select-area,
  .date-main-row,
  .phase-actions
) {
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  border-color: var(--step-mono-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step] .step-top-brand-bar {
  box-sizing: border-box !important;
  width: min(100%, 1180px) !important;
  min-height: 68px !important;
  margin-inline: auto !important;
  padding: 12px !important;
  border-bottom: 1px solid var(--step-mono-rule) !important;
}

body.step1-basic-page[data-step] .step-top-brand-bar .step-app-identity {
  color: var(--step-mono-ink) !important;
}

body.step1-basic-page[data-step] .step-top-brand-bar .ckas-back-button,
body.step1-basic-page[data-step] .step-top-brand-bar .nippo-theme-toggle {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 0 !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step] .step-bar {
  box-sizing: border-box !important;
  width: min(100%, 1180px) !important;
  margin-inline: auto !important;
  border-bottom: 1px solid var(--step-mono-rule) !important;
}

body.step1-basic-page[data-step] .step-bar .step-label {
  color: var(--step-mono-muted) !important;
}

body.step1-basic-page[data-step] .step-bar .step-line {
  color: var(--step-mono-muted) !important;
  border-color: var(--step-mono-rule) !important;
  background: var(--step-mono-paper) !important;
}

body.step1-basic-page[data-step] .step-bar .step.is-active .step-label,
body.step1-basic-page[data-step] .step-bar .step.active .step-label,
body.step1-basic-page[data-step] .step-bar .step[aria-current="step"] .step-label {
  color: var(--step-mono-ink) !important;
}

body.step1-basic-page[data-step] .step-bar .step.is-active .step-line,
body.step1-basic-page[data-step] .step-bar .step.active .step-line,
body.step1-basic-page[data-step] .step-bar .step[aria-current="step"] .step-line {
  color: var(--step-mono-paper) !important;
  border-color: var(--step-mono-ink) !important;
  background: var(--step-mono-ink) !important;
}

body.step1-basic-page[data-step] .step-context-bar {
  color: var(--step-mono-ink) !important;
}

body.step1-basic-page[data-step] .step-context-label,
body.step1-basic-page[data-step] .card > :is(p, .card-description),
body.step1-basic-page[data-step] .phase-prompt :is(p, small) {
  color: var(--step-mono-muted) !important;
}

body.step1-basic-page[data-step] .page > .card {
  border: 1px solid var(--step-mono-rule) !important;
}

body.step1-basic-page[data-step] .card-section-header,
body.step1-basic-page[data-step] .card h2,
body.step1-basic-page[data-step] .card h3,
body.step1-basic-page[data-step] .card label {
  color: var(--step-mono-ink) !important;
}

body.step1-basic-page[data-step] .date-select-area {
  border: 1px solid var(--step-mono-rule) !important;
}

body.step1-basic-page[data-step] .date-main-row {
  border: 1px solid var(--step-mono-rule) !important;
}

body.step1-basic-page[data-step] .date-shortcut-row .btn-secondary,
body.step1-basic-page[data-step] .date-picker-btn,
body.step1-basic-page[data-step] .page .btn-secondary,
body.step1-basic-page[data-step] .page .btn-icon-sm {
  border: 1px solid var(--step-mono-ink) !important;
  border-radius: 0 !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step] .page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 0 !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step] .page :is(input, select, textarea):focus {
  border-color: var(--step-mono-ink) !important;
  outline: 2px solid var(--step-mono-ink) !important;
  outline-offset: 2px !important;
}

body.step1-basic-page[data-step] .phase-actions {
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 0 !important;
}

body.step1-basic-page[data-step] .phase-actions :is(.phase-btn-primary, #nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn) {
  border: 1px solid var(--step-mono-ink) !important;
  border-radius: 0 !important;
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step] .phase-actions :is(.phase-btn-primary, #nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn):disabled {
  color: var(--step-mono-muted) !important;
  background: var(--step-mono-soft) !important;
  border-color: var(--step-mono-rule) !important;
}

body.step1-basic-page[data-theme="dark"][data-step] .step-bar .step-line {
  color: var(--step-mono-muted) !important;
  border-color: var(--step-mono-rule) !important;
}

body.step1-basic-page[data-theme="dark"][data-step] .step-bar .step.is-active .step-line,
body.step1-basic-page[data-theme="dark"][data-step] .step-bar .step.active .step-line,
body.step1-basic-page[data-theme="dark"][data-step] .step-bar .step[aria-current="step"] .step-line {
  color: #090909 !important;
  border-color: #fff !important;
  background: #fff !important;
}

/* Some phase-specific legacy rules use very specific selectors. Keep the
   monochrome surfaces authoritative over those declarations as well. */
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] :is(
  .page > .card,
  .date-select-area,
  .date-main-row,
  .phase-actions,
  .phase-actions :is(.phase-btn, #nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn),
  .date-shortcut-row .btn-secondary,
  .date-picker-btn,
  .page .btn-secondary,
  .page .btn-icon-sm
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .page > .card {
  border: 1px solid var(--step-mono-rule) !important;
  background: var(--step-mono-paper) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] :is(.date-select-area, .date-main-row) {
  border: 1px solid var(--step-mono-rule) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .phase-actions {
  border: 1px solid var(--step-mono-rule) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .page :is(.btn-secondary, .btn-icon-sm) {
  border: 1px solid var(--step-mono-ink) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .phase-actions :is(.phase-btn-primary, #nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn) {
  border: 1px solid var(--step-mono-ink) !important;
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .phase-actions :is(.phase-btn-primary, #nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn):disabled {
  border-color: var(--step-mono-rule) !important;
  color: var(--step-mono-muted) !important;
  background: var(--step-mono-soft) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .phase-actions :is(.phase-btn-primary.is-disabled, .phase-btn-primary[aria-disabled="true"], #nextBtn.is-disabled, #nextBtn[aria-disabled="true"], #returnNextBtn.is-disabled, #generatePdfBtn.is-disabled, #startBtn.is-disabled) {
  border-color: var(--step-mono-rule) !important;
  color: var(--step-mono-muted) !important;
  background: var(--step-mono-soft) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {
  border-radius: 0 !important;
  border-color: var(--step-mono-rule) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index] .page :is(p, small, .hint, .help-text, .description, .phase-prompt) {
  color: var(--step-mono-muted) !important;
}

/* Give the date-selection phase a wider, centered workspace on desktop. */
@media (min-width: 781px) {
  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page:has(.date-select-area) {
    grid-template-columns: minmax(0, 860px) !important;
    justify-content: center !important;
  }

  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page > .card:has(.date-select-area) {
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area {
  box-sizing: border-box !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .date-main-row,
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .date-shortcut-row {
  box-sizing: border-box !important;
  width: 100% !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area .date-main-row,
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .date-select-area .date-shortcut-row {
  width: 100% !important;
  max-width: none !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .date-select-area .date-shortcut-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .date-select-area #dayOfWeek + .date-shortcut-row {
  width: 100% !important;
  max-width: none !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .date-select-area :is(#yesterdayButton, #todayButton, #openDatePickerBtn) {
  border: 1px solid var(--step-mono-ink) !important;
  border-radius: 0 !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
}

/* Match the safety reminder action's 8px corners on the date phase buttons. */
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page :is(#yesterdayButton, #todayButton, #nextBtn) {
  border-radius: 8px !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] #openDatePickerBtn {
  filter: grayscale(1) !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .page .phase-prompt,
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .page .phase-prompt * {
  color: var(--step-mono-muted) !important;
}

@media (max-width: 780px) {
  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .page {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-phase-index="0"] .page > .card:has(.date-select-area) {
    width: 100% !important;
  }
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .step-top-brand-bar > .nippo-header-identity {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}


/* Readable date selection and summary values, scoped to the combined entry page. */
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] :is(#stepContextDate, #stepContextDate > span, #stepContextBin, #date, #date > span, .info-display-box) {
  color: var(--step-mono-ink) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .info-display-box {
  background: var(--step-mono-soft) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .info-display-box.is-empty {
  color: var(--step-mono-muted) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .page :is(input, textarea)::placeholder {
  color: var(--step-mono-muted) !important;
  opacity: 1 !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .page :is(input, select, textarea):disabled {
  color: var(--step-mono-muted) !important;
  background: var(--step-mono-soft) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page:has(.date-select-area) {
  gap: 16px !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page > .card:has(.date-select-area) {
  padding: 20px !important;
  min-height: 0 !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] :is(.date-select-area, .date-main-row, .phase-actions) {
  border: 0 !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] :is(.date-select-area, .phase-actions) {
  padding: 0 !important;
  min-height: 0 !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .date-main-row {
  padding: 8px 0 !important;
  min-height: 56px !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] #date {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  gap: 4px !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] #date:empty::before {
  color: var(--step-mono-muted) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] :is(#yesterdayButton, #todayButton).active {
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .fieldwork-date-dialog,
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .fieldwork-date-dialog :is(.fw-dialog-header, button) {
  color: var(--step-mono-ink) !important;
  border-color: var(--step-mono-rule) !important;
  background: var(--step-mono-paper) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .fw-calendar-days button[aria-current="date"] {
  border-color: var(--step-mono-ink) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .fw-calendar-days button[aria-pressed="true"] {
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .fieldwork-date-dialog button:disabled {
  color: var(--step-mono-muted) !important;
  background: var(--step-mono-soft) !important;
}
@media (min-width: 781px) {
  html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page:has(.date-select-area) {
    grid-template-columns: minmax(0, 640px) !important;
    justify-content: center !important;
  }
}


/* Date controls and lower action clearance for the starting phase. */
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .date-main-row {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] #openDatePickerBtn {
  box-sizing: border-box !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  aspect-ratio: 1 !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .page {
  padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
}
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index="0"] .phase-actions {
  top: auto !important;
  bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  margin-bottom: 0 !important;
  transform: translateX(-50%) !important;
}
/* Keep the route choice consistent with the selected light or dark theme. */
body.step1-basic-page[data-step][data-phase-index] .bin-select-box,
body.step1-basic-page[data-step][data-phase-index] .bin-select-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}
body.step1-basic-page[data-step][data-phase-index] .bin-select-label,
body.step1-basic-page[data-step][data-phase-index] .bin-item-special :is(.bin-name, .bin-sub) {
  color: var(--step-mono-ink) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body.step1-basic-page[data-step][data-phase-index] #normalBinSelect.bin-select,
body.step1-basic-page[data-step][data-phase-index] .bin-item-special {
  max-width: 100% !important;
  border-color: var(--step-mono-rule) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}
body.step1-basic-page[data-step][data-phase-index] .bin-select-wrap.has-selection #normalBinSelect.bin-select,
body.step1-basic-page[data-step][data-phase-index] .bin-item-special.active {
  border-color: var(--step-mono-ink) !important;
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
}
body.step1-basic-page[data-step][data-phase-index] .bin-item-special.active :is(.bin-name, .bin-sub) { color: var(--step-mono-paper) !important; }

/* The course picker is a single choice; keep empty states and the special course full width. */
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] #binList {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] .bin-select-wrap {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] .bin-select-wrap :is(.bin-select-label, .bin-select) {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] .bin-select-wrap .bin-select {
  min-height: 56px !important;
  padding: 10px 42px 10px 14px !important;
  font-size: 17px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] .bin-item-special {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 14px 16px 14px 44px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] .bin-item-special .bin-sub {
  min-width: 0 !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="1"]) body.step1-basic-page[data-step][data-phase-index="1"] .bin-manage-link {
  justify-self: end !important;
  width: fit-content !important;
}

html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step][data-phase-index] .phase-actions :is(.phase-btn, #nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn) {
  border-radius: 8px !important;
}

/* Keep the date shortcuts consistent with the 8px workflow actions. */
html:has(body.step1-basic-page[data-step]) body.step1-basic-page[data-step] .date-shortcut-row .btn-secondary { border-radius: 8px !important; }

/* Keep step-one phase guidance as a title strip above its input card. */
html:has(body.step1-basic-page[data-step][data-phase-index]) body.step1-basic-page[data-step][data-phase-index] .page > .phase-prompt {
  box-sizing: border-box !important;
  position: relative !important;
  top: auto !important;
  min-height: 0 !important;
  margin: 4px 0 10px !important;
  padding: 2px 0 2px 14px !important;
  border: 0 !important;
  border-left: 3px solid var(--step-mono-ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* Keep a selected special route readable in either monochrome theme. */
html:has(body.step1-basic-page[data-step][data-phase-index]) body.step1-basic-page[data-step][data-phase-index] .bin-item-special:is(.active, [aria-checked="true"]) {
  border-color: var(--step-mono-ink) !important;
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]) body.step1-basic-page[data-step][data-phase-index] .bin-item-special:is(.active, [aria-checked="true"]) :is(.bin-name, .bin-sub, *) {
  color: var(--step-mono-paper) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]) body.step1-basic-page[data-step][data-phase-index] .bin-item-special[aria-checked="true"]::before {
  border-color: var(--step-mono-paper) !important;
  background: var(--step-mono-paper) !important;
}

/* Use the card's full width for saved details, with a single outer frame. */
html:has(body.step1-basic-page[data-step][data-phase-index]) body.step1-basic-page[data-step][data-phase-index] .driver-summary-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]) body.step1-basic-page[data-step][data-phase-index] .driver-summary-line {
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1fr) !important;
}

/* Put short pre-departure actions after their forms instead of leaving a fixed empty band. */
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]) .page {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  margin-inline: auto !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]) .page > .phase-prompt {
  display: block !important;
  width: 100% !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]) .page > .card.is-phase-hidden {
  display: none !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]):not([data-phase-index="6"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]):not([data-phase-index="6"]) .page > .phase-actions {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}
/* Legacy primary-button anchoring must follow the action row into document flow. */
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]):not([data-phase-index="6"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]):not([data-phase-index="6"]) .page > .phase-actions > .phase-btn {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]) .phase-prompt-title {
  padding: 0 !important;
  border: 0 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="6"]) body.step1-basic-page[data-step][data-phase-index="6"] .card:has([data-inspection-focus]) {
  padding: 0 !important;
  border: 0 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="6"]) body.step1-basic-page[data-step][data-phase-index="6"] :is(.inspection-focus-overview, .inspection-focus-item) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="6"]) body.step1-basic-page[data-step][data-phase-index="6"] :is(.inspection-choice, .inspection-choice span, .inspection-bulk-action) {
  border-color: var(--step-mono-rule) !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="6"]) body.step1-basic-page[data-step][data-phase-index="6"] :is(.inspection-choice:has(input:checked), .inspection-choice input:checked + span) {
  border-color: var(--step-mono-ink) !important;
  color: var(--step-mono-paper) !important;
  background: var(--step-mono-ink) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="7"]) body.step1-basic-page[data-step][data-phase-index="7"] #inspectionSignatureCanvas {
  border-color: var(--step-mono-rule) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="7"]) body.step1-basic-page[data-step][data-phase-index="7"] #openSignatureModalBtn {
  width: auto !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 8px !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]) .phase-prompt-title::before,
html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]) .phase-prompt-title::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 767px) {
  html:has(body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]):not([data-phase-index="6"])) body.step1-basic-page[data-step][data-phase-index]:not([data-phase-index="0"]):not([data-phase-index="6"]) .page {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Two-line ride date layout for the initial step only. */
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-main-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .step-date-label {
  color: var(--step-mono-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #date.date-main-text {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  color: var(--step-mono-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #date.date-main-text:focus-visible {
  outline: 2px solid var(--step-mono-ink) !important;
  outline-offset: 2px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-shortcut-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-shortcut-row .btn-secondary {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

/* Keep the three ride-date controls compact and in one row on every width. */
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area .date-main-row {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  width: auto !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area #date.date-main-text {
  width: auto !important;
  justify-content: center !important;
  text-align: center !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #rideDateNavigation {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 6px !important;
  width: min(100%, 360px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #rideDateNavigation > button {
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 44px !important;
  max-width: 120px !important;
  margin: 0 !important;
}
/* Ride-date screen polish: preserve layout and make date navigation discoverable. */
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .date-select-area .date-main-row {
  gap: 8px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] .step-date-label {
  font-size: 16px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #date.date-main-text {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 2px 10px !important;
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 8px !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-soft) !important;
  font-size: clamp(20px, 5.5vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #date.date-main-text:focus-visible {
  outline: 2px solid var(--step-mono-ink) !important;
  outline-offset: 2px !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #rideDateNavigation {
  gap: 8px !important;
  width: min(100%, 320px) !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #rideDateNavigation > button {
  min-height: 48px !important;
  border: 1px solid var(--step-mono-rule) !important;
  border-radius: 8px !important;
  color: var(--step-mono-ink) !important;
  background: var(--step-mono-paper) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
html:has(body.step1-basic-page[data-step][data-phase-index="0"]) body.step1-basic-page[data-step][data-phase-index="0"] #todayButton:is(:hover, :focus-visible) {
  background: var(--step-mono-soft) !important;
}