/*
 * Driver experience layer
 * Field-first delivery controls based on the UI/UX Pro Max accessibility,
 * touch-target, responsive, status, and data-density guidance.
 * The repeated app attribute gives intentional domain overrides enough
 * specificity while the shared accessibility stylesheet remains last.
 */

body[data-perabox-app="driver"][data-perabox-app="driver"] {
  --ux-canvas: #edf3f0;
  --ux-surface: #fffefb;
  --ux-surface-soft: #f1f6f3;
  --ux-ink: #102d2f;
  --ux-muted: #526b6b;
  --ux-line: #cbd9d4;
  --ux-gold: #e9b949;
  --ux-green: #17775a;
  --ux-green-strong: #0a4b3c;
  --ux-danger: #aa3939;
  --ux-shadow-card: 0 14px 34px rgba(10, 47, 48, 0.08);
  --ux-shadow-raised: 0 22px 54px rgba(8, 34, 34, 0.16);
  min-height: 100dvh;
  background:
    radial-gradient(circle at 86% 1%, rgba(233, 185, 73, 0.08), transparent 28rem),
    var(--ux-canvas);
  color: var(--ux-ink);
  font-size: 16px;
  line-height: 1.55;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .skip-link {
  position: fixed;
  z-index: 1000;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--pb-gold, #e9b949);
  border-radius: 8px;
  background: #fffef9;
  color: #102d2f;
  box-shadow: var(--ux-shadow-raised);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .skip-link:focus {
  transform: translateY(0);
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(p, li, dd, small) {
  line-height: 1.55;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] small {
  font-size: 0.78rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(h1, h2, h3, h4) {
  text-wrap: balance;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(
  button,
  .button,
  .icon-button,
  .nav-item,
  .mini-link,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select
) {
  min-height: 44px;
  touch-action: manipulation;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(button, .button, .icon-button, .nav-item, .mini-link) {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(button, .button, .icon-button, .nav-item, .mini-link):active:not(:disabled) {
  opacity: 0.82;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(button, .button):disabled {
  opacity: 0.5;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .sidebar {
  width: 264px;
  padding: 28px 18px 22px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .brand {
  margin-bottom: 40px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .brand-copy strong {
  font-size: 1.18rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .brand-copy small {
  font-size: 0.69rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .side-nav {
  gap: 8px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .sidebar .nav-item {
  min-height: 52px;
  padding-inline: 15px;
  font-size: 0.92rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .support-card {
  min-height: 70px;
  padding: 14px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .support-card strong {
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .support-card small {
  font-size: 0.75rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .side-profile {
  min-height: 72px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .side-profile-copy strong {
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .side-profile-copy small {
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .main-shell {
  min-height: 100dvh;
  margin-left: 264px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar {
  min-height: 88px;
  height: auto;
  padding: 12px 36px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar-copy p {
  font-size: 0.73rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar-copy h1 {
  font-size: 1.42rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .sync-state {
  font-size: 0.73rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar .icon-button {
  width: 44px;
  height: 44px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .availability-control {
  min-width: 170px;
  min-height: 52px;
  height: auto;
  padding-inline: 14px 8px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .availability-label strong {
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .availability-label small {
  font-size: 0.72rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .view {
  max-width: 1440px;
  padding: 32px 36px 64px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] #view-overview.is-active {
  display: flex;
  flex-direction: column;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] #view-overview > .status-banner {
  order: 0;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] #view-overview > .welcome-row {
  order: 1;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] #view-overview > .overview-layout {
  order: 2;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] #view-overview > .metric-grid {
  order: 3;
  margin-top: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .status-banner {
  min-height: 68px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-color: var(--ux-line);
  border-radius: 12px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .status-banner strong {
  font-size: 0.9rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .status-banner p {
  color: var(--ux-muted);
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .welcome-row,
body[data-perabox-app="driver"][data-perabox-app="driver"] .page-intro {
  margin-bottom: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .welcome-row h2,
body[data-perabox-app="driver"][data-perabox-app="driver"] .page-intro h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  line-height: 1.15;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .welcome-row > div > p:last-child,
body[data-perabox-app="driver"][data-perabox-app="driver"] .page-intro > div > p:last-child {
  max-width: 64ch;
  color: var(--ux-muted);
  font-size: 0.94rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(.eyebrow, .section-eyebrow, .heading-kicker) {
  color: var(--ux-green);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(.road-status, .secure-pill, .verification-pill) {
  min-height: 40px;
  padding-inline: 14px;
  color: #455e5e;
  font-size: 0.78rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(310px, 0.8fr);
  gap: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-main,
body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-side {
  gap: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .panel,
body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card {
  border-color: var(--ux-line);
  border-radius: 12px;
  background-color: var(--ux-surface);
  box-shadow: var(--ux-shadow-card);
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(
  .active-job-panel,
  .request-panel,
  .earnings-panel,
  .rating-panel,
  .payout-card,
  .profile-form,
  .kyc-form,
  .signed-in-profile,
  .kyc-unavailable,
  .payout-history-panel
) {
  padding: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .section-heading {
  margin-bottom: 18px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .section-heading h3,
body[data-perabox-app="driver"][data-perabox-app="driver"] .dialog-head h3 {
  font-size: 1.17rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .button {
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 10px;
  font-size: 0.86rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .button-small {
  min-height: 44px;
  padding-inline: 14px;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .button:hover:not(:disabled),
body[data-perabox-app="driver"][data-perabox-app="driver"] .icon-button:hover,
body[data-perabox-app="driver"][data-perabox-app="driver"] :where(.request-card, .job-card):hover {
  transform: none;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .mini-link {
  min-height: 44px;
  padding: 8px 4px;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .active-job-content > .empty-state {
  min-height: 180px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .empty-state h4 {
  font-size: 1rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .empty-state p {
  color: var(--ux-muted);
  font-size: 0.82rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .active-route-card {
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .job-id-row {
  font-size: 0.73rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .status-chip {
  min-height: 28px;
  padding-inline: 9px;
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .route-point small {
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .route-point strong {
  font-size: 0.94rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .route-point span {
  color: var(--ux-muted);
  font-size: 0.78rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .active-fare small {
  color: var(--ux-muted);
  font-size: 0.75rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .active-fare strong {
  font-size: 1.65rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .request-list {
  gap: 12px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .request-card {
  min-height: 104px;
  padding: 16px;
  border-color: var(--ux-line);
  border-radius: 11px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .request-top strong {
  font-size: 0.88rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .request-top small {
  font-size: 0.74rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .request-route {
  color: #385353;
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .request-meta {
  color: var(--ux-muted);
  font-size: 0.76rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .fare-column strong {
  font-size: 1.05rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .fare-column small {
  font-size: 0.72rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-grid {
  gap: 16px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card {
  min-height: 164px;
  padding: 20px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card > p {
  color: var(--ux-muted);
  font-size: 0.82rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card > strong {
  font-size: 1.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card > strong em {
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card > small {
  color: var(--ux-muted);
  font-size: 0.75rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-primary > p,
body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-primary > small {
  color: #b8d2ce;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(.metric-trend, .metric-caption) {
  font-size: 0.72rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .earnings-panel .section-heading > strong {
  font-size: 1.2rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .earnings-chart {
  height: 160px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .chart-bar-wrap span,
body[data-perabox-app="driver"][data-perabox-app="driver"] .chart-legend {
  color: var(--ux-muted);
  font-size: 0.72rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .review-head strong {
  font-size: 0.82rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .review-body p {
  color: var(--ux-muted);
  font-size: 0.78rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .empty-mini {
  color: var(--ux-muted);
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .filter-tabs {
  gap: 6px;
  padding: 6px;
  border-color: var(--ux-line);
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .filter-tabs button {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .filter-tabs button span {
  min-width: 22px;
  height: 22px;
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .jobs-board {
  gap: 18px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .job-card {
  min-height: 280px;
  padding: 20px;
  border-color: var(--ux-line);
  border-radius: 12px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .job-card-head strong {
  font-size: 0.92rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .job-card-head small,
body[data-perabox-app="driver"][data-perabox-app="driver"] .job-card-facts small {
  font-size: 0.72rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .job-card-facts strong {
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-layout,
body[data-perabox-app="driver"][data-perabox-app="driver"] .profile-layout {
  gap: 24px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-hero {
  min-height: 250px;
  border-radius: 14px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-brand-row,
body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-hero > p {
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-bottom small {
  font-size: 0.68rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-bottom b {
  font-size: 0.78rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-stats article {
  min-height: 78px;
  padding: 16px;
  border-color: var(--ux-line);
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-stats small,
body[data-perabox-app="driver"][data-perabox-app="driver"] .payout-destination small {
  color: var(--ux-muted);
  font-size: 0.76rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-stats strong,
body[data-perabox-app="driver"][data-perabox-app="driver"] .payout-destination strong {
  font-size: 0.94rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(.field-label, .form-grid label > span, .notes-field > span) {
  color: #3d5554;
  font-size: 0.82rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .quick-amounts {
  gap: 8px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .quick-amounts button {
  min-height: 44px;
  padding-inline: 14px;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .payout-destination {
  min-height: 68px;
  border-color: var(--ux-line);
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .payout-destination > i {
  min-height: 26px;
  padding-inline: 8px;
  font-size: 0.67rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .form-note {
  color: var(--ux-muted);
  font-size: 0.76rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(th, td) {
  padding: 14px 12px;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] th {
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .table-subtext {
  font-size: 0.72rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .registration-access {
  min-height: 76px;
  padding: 14px;
  border-color: var(--ux-line);
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .registration-access strong {
  font-size: 0.86rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .registration-access small {
  color: var(--ux-muted);
  font-size: 0.76rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(.registration-password-note, .registration-privacy-note, .form-status) {
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .signed-in-profile {
  min-height: 230px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .profile-identity {
  min-height: 78px;
  padding: 16px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .profile-identity strong {
  font-size: 0.94rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .profile-identity small {
  color: var(--ux-muted);
  font-size: 0.76rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .form-step {
  min-height: 28px;
  padding: 6px 9px;
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(
  .form-grid input,
  .form-grid select,
  .full-input,
  .notes-field textarea,
  .support-field input,
  .support-field select,
  .support-field textarea,
  .typed-signature input
) {
  min-height: 48px;
  border-color: var(--ux-line);
  border-radius: 9px;
  font-size: 1rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .kyc-intro {
  padding: 13px;
  color: #3d5e55;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .kyc-unavailable {
  min-height: 260px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .kyc-unavailable p:not(.section-eyebrow) {
  color: #455f56;
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .kyc-unavailable li {
  color: #3d554d;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .upload-box {
  min-height: 176px;
  border-color: #9fb8b0;
  border-radius: 11px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .upload-box > strong {
  font-size: 0.88rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .upload-box > small,
body[data-perabox-app="driver"][data-perabox-app="driver"] .upload-box > em,
body[data-perabox-app="driver"][data-perabox-app="driver"] .file-selected b {
  font-size: 0.75rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .consent-row {
  min-height: 44px;
  align-items: center;
  color: #455e5c;
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .consent-row input {
  width: 20px;
  height: 20px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .proof-dialog {
  border-radius: 16px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .dialog-shell {
  padding: 26px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(
  .dialog-copy,
  #proofPreview small,
  .signature-group > small,
  .typed-signature > small,
  .support-ticket p,
  .support-empty,
  .notification-toolbar p,
  .notification-item small
) {
  color: var(--ux-muted);
  font-size: 0.8rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] :where(
  #proofPreview strong,
  .signature-heading label,
  .typed-signature > label,
  .support-section-heading h4,
  .support-form h4,
  .support-ticket strong,
  .support-field > span,
  .notification-item strong
) {
  font-size: 0.84rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .signature-heading button {
  min-width: 44px;
  min-height: 44px;
  font-size: 0.78rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .notification-item {
  min-height: 72px;
  padding: 14px;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .notification-item time,
body[data-perabox-app="driver"][data-perabox-app="driver"] .support-ticket-status {
  font-size: 0.7rem;
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .toast-stack {
  width: min(400px, calc(100vw - 32px));
}

body[data-perabox-app="driver"][data-perabox-app="driver"] .toast {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.84rem;
}

@media (max-width: 1240px) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.8fr);
  }
}

@media (max-width: 1050px) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-layout {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] {
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
    font-size: 16px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .main-shell {
    margin-left: 0;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar {
    min-height: calc(72px + env(safe-area-inset-top));
    padding:
      calc(8px + env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      8px
      max(18px, env(safe-area-inset-left));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-brand {
    margin-right: 14px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar-copy h1 {
    font-size: 1.15rem;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .view {
    padding: 26px 18px 42px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav {
    height: calc(84px + env(safe-area-inset-bottom));
    padding:
      8px
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav > button {
    min-height: 62px;
    gap: 4px;
    font-size: 0.72rem;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav > button svg {
    width: 21px;
    height: 21px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav .mobile-online {
    transform: translateY(-14px);
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-online > span {
    width: 56px;
    height: 56px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-online > small {
    font-size: 0.7rem;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .toast-stack {
    right: 16px;
    bottom: calc(98px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 650px) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar {
    padding-inline: max(14px, env(safe-area-inset-left));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .view {
    padding-inline: 14px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .welcome-row,
  body[data-perabox-app="driver"][data-perabox-app="driver"] .page-intro {
    gap: 14px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .welcome-row h2,
  body[data-perabox-app="driver"][data-perabox-app="driver"] .page-intro h2 {
    font-size: 1.85rem;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card {
    min-height: 158px;
    padding: 16px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card > strong {
    font-size: 1.55rem;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-layout,
  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-main,
  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-side {
    gap: 16px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .overview-side {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] :where(
    .active-job-panel,
    .request-panel,
    .earnings-panel,
    .rating-panel,
    .payout-card,
    .profile-form,
    .kyc-form,
    .signed-in-profile,
    .kyc-unavailable,
    .payout-history-panel
  ) {
    padding: 18px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .active-route-card {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .active-job-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .request-card {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .request-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .jobs-board {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-stats article {
    min-width: 0;
    align-items: flex-start;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .dialog-shell {
    padding: 20px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .table-wrap {
    margin-inline: -18px;
    padding-inline: 18px;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 480px) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] .status-banner {
    align-items: flex-start;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .section-heading {
    align-items: flex-start;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .request-actions {
    grid-template-columns: 1fr 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .fare-column {
    grid-column: 1 / -1;
    text-align: left;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .request-actions .button {
    width: 100%;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .wallet-stats {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .dialog-actions {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .dialog-actions .button {
    width: 100%;
  }
}

@media (max-width: 375px) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-grid {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-card {
    min-height: 142px;
  }
}

@media (max-width: 880px) and (orientation: landscape) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] .topbar {
    min-height: calc(64px + env(safe-area-inset-top));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .view {
    padding-top: 20px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav {
    height: calc(68px + env(safe-area-inset-bottom));
    padding-top: 4px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav > button {
    min-height: 54px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-nav .mobile-online {
    transform: translateY(-9px);
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .mobile-online > span {
    width: 48px;
    height: 48px;
  }

  body[data-perabox-app="driver"][data-perabox-app="driver"] .toast-stack {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: more) {
  body[data-perabox-app="driver"][data-perabox-app="driver"] {
    --ux-line: #839a93;
    --ux-muted: #344f4f;
  }
}