.portal-login, .portal-shell, .portal-evaluate { color: var(--c-fg); }
.portal-login { background: var(--c-bg); }
.content { width: min(100% - 32px, 1180px); padding-block: 18px 44px; }
.content.narrow { width: min(100% - 32px, 760px); }
.login-card { width: min(560px, 100%); padding: 26px; border-radius: var(--r-lg); box-shadow: none; }
.login-card h1 { font-size: 21px; font-weight: 600; }
.portal-choice-grid { gap: 8px; }
.portal-choice { min-height: 78px; padding: 11px 12px; border-radius: var(--r-md); background: var(--c-bg); }
.portal-choice:hover { border-color: var(--c-border-strong); background: var(--c-surface); }
.portal-choice.selected { border-color: color-mix(in oklab, var(--c-primary) 44%, transparent); background: color-mix(in oklab, var(--c-primary) 9%, var(--c-bg)); box-shadow: none; }
.endpoint-login-context { border-radius: var(--r-md); background: var(--c-surface); }
.gateway-public-summary {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--c-surface) 72%, var(--c-bg));
}
.gateway-public-summary > header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gateway-public-summary > header > div { min-width: 0; }
.gateway-public-summary > header strong { display: block; margin-top: 2px; color: var(--c-fg); font-size: 11px; font-weight: 600; }
.gateway-public-health { flex: 0 0 auto; color: var(--c-muted); font-size: 10px; line-height: 1.4; text-align: right; }
.gateway-public-health[data-state="up"] { color: var(--c-primary); }
.gateway-public-health[data-state="error"] { color: var(--c-warn); }
.gateway-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.gateway-summary-grid article { min-width: 0; padding: 8px 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-bg) 76%, transparent); }
.gateway-summary-grid article > span, .gateway-summary-grid article > small { display: block; color: var(--c-muted); font-size: 9.5px; line-height: 1.4; }
.gateway-summary-grid article > strong { display: block; margin: 5px 0 3px; color: var(--c-fg); font: 600 15px/1 var(--font-mono); }
.gateway-summary-grid article > small { color: var(--c-subtle); font-size: 9px; }
.gateway-public-summary > p { margin: 0; color: var(--c-subtle); font-size: 9.5px; line-height: 1.5; }
.topbar { min-height: 56px; padding: 8px clamp(16px, 3vw, 34px); border-color: var(--c-border); box-shadow: none; }
.brand strong { font-size: 13px; }
.brand span, .account { color: var(--c-muted); }
.account { gap: 7px; }

.grid { gap: 12px; }
.card { padding: 14px; border-color: var(--c-border); border-radius: var(--r-md); background: var(--c-bg-elevated); box-shadow: none; }
.card h1 { font-size: 20px; }
.card h2 { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.muted, .subtle, .field-help { color: var(--c-muted); }
.button { min-height: 36px; border-color: var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-fg); font-size: 12px; font-weight: 500; }
.button.primary { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-primary-fg); }
.button:hover:not(:disabled) { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.button.primary:hover:not(:disabled) { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 86%, var(--c-fg)); }
.button.danger { border-color: color-mix(in oklab, var(--c-danger) 42%, transparent); background: color-mix(in oklab, var(--c-danger) 10%, transparent); color: var(--c-danger); }
.button:disabled { opacity: .42; cursor: not-allowed; }
input, select, textarea { min-height: 40px; border-color: var(--c-border); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-fg); }
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--c-info); outline: 0; box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-info) 13%, transparent); }

.table-wrap { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-elevated); }
.ui-scroll-region { position: relative; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.ui-scroll-region:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }
th { padding: 8px 10px; border-color: var(--c-border); background: var(--c-surface); color: var(--c-muted); font-size: 10.5px; }
td { padding: 9px 10px; border-color: var(--c-border); color: var(--c-fg); font-size: 12px; }
tbody tr:hover td { background: color-mix(in oklab, var(--c-info) 4%, transparent); }
.status, .tag { border-color: var(--c-border); background: transparent; color: var(--c-muted); }
.status.green { border-color: color-mix(in oklab, var(--c-primary) 40%, transparent); color: var(--c-primary); }
.status.amber { border-color: color-mix(in oklab, var(--c-warn) 40%, transparent); color: var(--c-warn); }
.status.red { border-color: color-mix(in oklab, var(--c-danger) 40%, transparent); color: var(--c-danger); }

.notice, .notification-item, .portal-entry, .weather-card, .weather-alert,
.screen-device-login, .workflow-blockers, .workflow-archive-evidence {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-muted);
  box-shadow: none;
}
.notice, .notification-item.unread { border-left-width: 1px; }
.notice { padding: 12px 13px; }
.empty { padding: 28px 18px; color: var(--c-muted); }
.notification-item { padding: 12px 13px; }
.portal-directory { gap: 10px; }
.portal-entry { min-height: 158px; padding: 15px; }
.question { border-color: var(--c-border); }
.rating label { min-height: 44px; border-color: var(--c-border); border-radius: var(--r-sm); background: var(--c-bg); }
.rating label:has(input:checked) { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 9%, transparent); color: var(--c-fg); }
dialog { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg-elevated); box-shadow: var(--sh-float); }
dialog::backdrop { background: color-mix(in oklab, var(--c-bg) 66%, transparent); backdrop-filter: blur(2px); }

.portal-screen-mode { background: var(--c-bg); color: var(--c-fg); }
.portal-screen-mode .topbar, .screen-command-header, .screen-panel, .screen-command-timeline,
.screen-kpis article { border-color: var(--c-border); background: var(--c-bg-elevated); box-shadow: none; }
.screen-mode-nav { border-color: var(--c-border); background: var(--c-border); }
.screen-mode-nav button { background: var(--c-bg-elevated); color: var(--c-muted); }
.screen-mode-nav button[aria-pressed="true"] { background: color-mix(in oklab, var(--c-primary) 12%, var(--c-bg-elevated)); color: var(--c-fg); box-shadow: inset 0 -2px var(--c-primary); }
.screen-kpis article::before { background: var(--c-info); }
.screen-kpis article.risk::before { background: var(--c-danger); }
.screen-kpis span, .screen-kpis small, .screen-panel-head span, .screen-panel-note { color: var(--c-muted); }
.screen-kpis strong, .screen-panel-head h2 { color: var(--c-fg); }
.screen-focus-card, .screen-task, .screen-status-grid > div, .screen-weather-facts > div,
.screen-capability, .screen-geo-empty, .screen-empty-state { border-color: var(--c-border); background: var(--c-surface); }
.screen-task:hover, .screen-task.selected { border-color: var(--c-border-strong); background: var(--c-surface-2); box-shadow: none; }
.screen-task.selected { border-color: color-mix(in oklab, var(--c-primary) 42%, transparent); }
.screen-health-dot.green, .screen-capability.connected > span { border-color: var(--c-primary); background: var(--c-primary); }

.ui-iconized { display: inline-flex; align-items: center; gap: 7px; }
.ui-leading-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1023px) {
  .portal-shell .button,
  .portal-login .button,
  .portal-evaluate .button,
  .portal-shell input:not([type="checkbox"]):not([type="radio"]),
  .portal-login input:not([type="checkbox"]):not([type="radio"]),
  .portal-evaluate input:not([type="checkbox"]):not([type="radio"]),
  .portal-shell select, .portal-login select, .portal-evaluate select,
  .portal-shell textarea, .portal-login textarea, .portal-evaluate textarea { min-height: 44px; }
  .button.small { min-width: 44px; }
  .ui-scroll-region[data-ui-overflow="true"]::before {
    content: "左右滑动查看完整表格";
    position: sticky;
    left: 8px;
    z-index: 3;
    display: block;
    width: max-content;
    margin: 7px 8px 1px;
    padding: 3px 7px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: color-mix(in oklab, var(--c-bg-elevated) 92%, transparent);
    color: var(--c-muted);
    font-size: 9px;
    line-height: 1.4;
    transition: opacity 150ms ease;
  }
  .ui-scroll-region[data-ui-overflow="true"][data-ui-scrolled="true"]::before { opacity: 0; }
  .ui-scroll-region td[colspan] > .empty-state,
  .ui-scroll-region td[colspan] > .empty {
    position: sticky;
    left: 0;
    width: min(560px, calc(100dvw - 56px));
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .content { width: min(100% - 24px, 760px); padding-block: 10px 28px; }
  .topbar { min-height: 56px; gap: 8px; }
  .account { width: auto; margin-left: auto; }
  .account > span:first-child { display: none; }
  .account .button { min-width: 44px; min-height: 44px; }
  .grid { gap: 10px; }
  .card { padding: 13px; }
  .button, input, select, textarea { min-height: 44px; }
  .portal-choice { min-height: 84px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .gateway-summary-grid { grid-template-columns: 1fr; }
  .gateway-public-health { text-align: left; }
  .gateway-public-summary > header { flex-direction: column; gap: 4px; }
}

@media (pointer: coarse) {
  .portal-shell button,
  .portal-login button,
  .portal-evaluate button,
  .portal-shell .button,
  .portal-login .button,
  .portal-evaluate .button,
  .portal-shell summary,
  .portal-login summary,
  .portal-evaluate summary { min-width: 44px; min-height: 44px; }
  .portal-shell input:not([type="checkbox"]):not([type="radio"]),
  .portal-login input:not([type="checkbox"]):not([type="radio"]),
  .portal-evaluate input:not([type="checkbox"]):not([type="radio"]),
  .portal-shell select,
  .portal-login select,
  .portal-evaluate select,
  .portal-shell textarea,
  .portal-login textarea,
  .portal-evaluate textarea { min-height: 44px; }
}

@media (max-width: 390px) {
  .portal-login { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .login-card { padding: 20px 16px; }
  .login-card h1 { font-size: 19px; }
  .content { width: min(100% - 20px, 760px); }
  .card { padding: 12px; }
  th, td { padding: 9px 8px; }
  .rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .rating label { justify-content: center; padding: 6px 4px; font-size: 11px; }
}

/* Apply / Driver shell: mirrors the approved new-ui information architecture while
   keeping every fact and action sourced from the existing portal APIs. */
.portal-task-body { overflow: hidden; }
.portal-task-shell {
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--c-bg);
}
.portal-task-shell .portal-sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
}
.portal-sidebar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 12px;
  color: var(--c-fg);
  text-decoration: none;
}
.portal-sidebar-brand .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.portal-sidebar-brand > span:last-child { min-width: 0; }
.portal-sidebar-brand strong,
.portal-sidebar-brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar-brand strong { font-size: 11px; font-weight: 600; line-height: 1.3; }
.portal-sidebar-brand small { margin-top: 2px; color: var(--c-primary); font-size: 11px; }
.portal-sidebar-label {
  padding: 0 16px 5px;
  color: var(--c-subtle);
  font-size: 10px;
  letter-spacing: .16em;
}
.portal-side-nav { min-height: 0; flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.portal-nav-item {
  position: relative;
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-sm);
  padding: 6px 8px;
  color: var(--c-muted);
  font-size: 13px;
  text-decoration: none;
}
.portal-nav-item:hover { background: var(--c-surface); color: var(--c-fg); }
.portal-nav-item.active { background: color-mix(in oklab, var(--c-primary) 12%, transparent); color: var(--c-fg); }
.portal-nav-item.active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  left: 0;
  width: 2px;
  border-radius: 99px;
  background: var(--c-primary);
}
.portal-nav-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-nav-item.active svg { stroke-width: 2.1; }
.portal-nav-badge {
  min-width: 18px;
  margin-left: auto;
  color: var(--c-danger);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
}
.portal-sidebar-foot {
  display: grid;
  gap: 6px;
  margin: 8px;
  padding: 10px 8px 2px;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 11px;
}
.portal-sidebar-account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar-foot a { width: max-content; color: var(--c-info); text-decoration: none; }

.portal-task-shell > .topbar {
  grid-column: 2;
  grid-row: 1;
  min-height: 48px;
  padding: 7px 16px;
  position: relative;
  top: auto;
  z-index: 5;
}
.portal-task-shell > .topbar .brand { display: none; }
.portal-task-shell .portal-breadcrumb { display: flex; min-width: 0; align-items: center; gap: 6px; font-size: 13px; }
.portal-task-shell .portal-breadcrumb span { color: var(--c-muted); }
.portal-task-shell .portal-breadcrumb i { color: var(--c-subtle); font-style: normal; }
.portal-task-shell .portal-breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.portal-task-shell .account { min-width: 0; flex-wrap: nowrap; }
.portal-task-shell .account > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-task-shell .account .button { min-height: 32px; padding: 5px 9px; }
.portal-task-shell > .content {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 16px 20px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.portal-task-shell > .portal-mobile-nav { display: none; }

.app-card,
.portal-list-card,
.portal-route-empty,
.portal-inspection-link,
.driver-runtime-rail {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-elevated);
  color: var(--c-fg);
  box-shadow: none;
}
.app-card { padding: 16px; }
.app-card.card { margin: 0; }
.portal-eyebrow {
  display: block;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}
.portal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-card-head > div { min-width: 0; }
.portal-card-head h1,
.portal-card-head h2,
.portal-card-head h3 { margin: 3px 0 0; overflow-wrap: anywhere; }
.portal-card-head h1 { font-size: 20px; line-height: 1.2; }
.portal-card-head h2 { font-size: 16px; }
.portal-card-head h3 { font-size: 14px; font-weight: 600; }
.portal-card-head > a { color: var(--c-info); font-size: 11px; text-decoration: none; }
.portal-page-stack { display: grid; gap: 12px; max-width: 1180px; margin-inline: auto; }
.portal-page-intro {
  display: flex;
  min-height: 52px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.portal-page-intro h1 { margin: 2px 0 0; font-size: 22px; line-height: 1.2; }
.portal-page-intro p { margin: 5px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; }
.portal-count {
  min-width: 44px;
  color: var(--c-primary);
  font-family: var(--font-mono);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.portal-summary-pills { display: flex; gap: 6px; }
.portal-summary-pills span {
  padding: 5px 9px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-muted);
  font-size: 11px;
}
.portal-summary-pills b { margin-left: 4px; color: var(--c-fg); font-family: var(--font-mono); }

.portal-home-layout,
.portal-form-layout,
.portal-task-layout,
.portal-inspect-layout,
.portal-safety-layout { display: grid; gap: 16px; max-width: 1180px; margin-inline: auto; }
.portal-home-layout { grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); }
.portal-form-layout { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: start; }
.portal-task-layout { grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); align-items: start; }
.portal-inspect-layout { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: start; }
.portal-safety-layout { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); align-items: start; }
.portal-home-primary,
.portal-home-secondary,
.portal-form-aside,
.portal-task-main,
.portal-task-aside,
.portal-safety-main,
.portal-safety-aside { display: grid; align-content: start; gap: 12px; min-width: 0; }
.portal-active-card > h1 { margin: 5px 0 14px; font-size: 22px; letter-spacing: -.02em; }
.portal-active-card .portal-list-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.portal-active-card .portal-list-card > .portal-card-head { display: none; }
.portal-active-card .portal-trip-card .portal-data-note { display: none; }
.portal-permission-note,
.portal-data-note {
  margin: 10px 0 0;
  color: var(--c-subtle);
  font-size: 11px;
  line-height: 1.55;
}
.portal-home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.portal-primary-action,
.portal-secondary-action {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  color: var(--c-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.portal-primary-action { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-primary-fg); }
.portal-primary-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.portal-secondary-action { justify-content: space-between; background: var(--c-bg-elevated); font-weight: 500; }
.portal-secondary-action b { color: var(--c-muted); font-family: var(--font-mono); }
.portal-compact-card h3 { margin: 4px 0; font-size: 16px; }
.portal-compact-card > p { margin: 6px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; }
.portal-compact-list { display: grid; gap: 0; margin-top: 8px; }
.portal-compact-list .portal-list-card { padding: 9px 0; border: 0; border-top: 1px solid var(--c-border); border-radius: 0; background: transparent; }
.portal-compact-list .portal-list-card:first-child { border-top: 0; }
.portal-message-preview { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.portal-message-preview li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; font-size: 12px; }
.portal-message-preview span { color: var(--c-muted); font-family: var(--font-mono); font-size: 10px; }
.portal-message-preview b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.portal-inline-empty { margin-top: 10px; padding: 14px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); color: var(--c-muted); font-size: 12px; line-height: 1.55; text-align: center; }
.portal-honest-empty { min-height: 360px; display: grid; place-content: center; justify-items: start; }
.portal-honest-empty p { max-width: 520px; margin: 6px 0 16px; color: var(--c-muted); line-height: 1.65; }

.portal-weather-slot { min-width: 0; }
.portal-weather-slot > .card { width: 100%; margin: 0; }
.portal-weather-slot .weather-grid { grid-template-columns: minmax(0, 1fr); }
.portal-weather-slot .weather-snapshot-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-weather-slot .weather-foot { display: grid; }
.portal-weather-slot .weather-foot span:first-child { max-width: none; }
.portal-weather-summary { min-width: 0; }
.portal-weather-summary-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.portal-weather-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--r-md); background: color-mix(in oklab, var(--c-warn) 14%, var(--c-surface)); color: var(--c-warn); }
.portal-weather-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-weather-summary h3 { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.portal-weather-summary-head p { margin: 3px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.45; }
.portal-weather-advice,
.portal-weather-alert { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--c-border); color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.portal-weather-alert { color: var(--c-warn); }
.portal-weather-summary-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.portal-weather-summary-actions > span { color: var(--c-subtle); font-size: 10px; line-height: 1.45; }
.portal-weather-summary-actions .button { min-height: 32px; flex: 0 0 auto; }
.portal-weather-summary .weather-attribution { margin-top: 10px; padding-top: 9px; }

.portal-card-list { display: grid; gap: 10px; }
.portal-list-card { position: relative; display: block; min-width: 0; padding: 15px; color: var(--c-fg); text-decoration: none; }
.portal-list-card:hover { border-color: var(--c-border-strong); background: color-mix(in oklab, var(--c-primary) 2%, var(--c-bg-elevated)); }
.portal-route-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  color: var(--c-muted);
  font-size: 12px;
}
.portal-route-line b { min-width: 0; overflow-wrap: anywhere; color: var(--c-fg); font-weight: 500; }
.portal-route-line b:last-child { text-align: right; }
.portal-route-line > span { color: var(--c-subtle); }
.portal-route-line.large { margin-top: 14px; font-size: 14px; }
.portal-fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; background: var(--c-border); }
.portal-fact-list > div { min-width: 0; padding: 8px 10px; background: var(--c-surface); }
.portal-fact-list dt { color: var(--c-muted); font-size: 10px; }
.portal-fact-list dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--c-fg); font-size: 12px; font-weight: 500; }
.portal-list-card.compact .portal-route-line { margin-top: 4px; font-size: 11px; }
.portal-list-card.compact .portal-card-head h3 { margin-top: 2px; }
.portal-card-actions { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--c-border); }
.portal-request-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.portal-request-progress > span { color: var(--c-muted); font-size: 10px; }
.portal-request-progress > strong { min-width: 0; overflow-wrap: anywhere; color: var(--c-fg); font-size: 11px; font-weight: 600; }
.portal-request-progress > small { color: var(--c-subtle); font-size: 10px; text-align: right; }
.portal-request-progress[data-state="waiting"] { border-color: color-mix(in oklab, var(--c-primary) 28%, var(--c-border)); }
.portal-request-progress[data-state="unknown"] { border-color: color-mix(in oklab, var(--c-warn) 38%, var(--c-border)); }
.portal-inline-note { margin: 10px 0 0; color: var(--c-warn); font-size: 11px; line-height: 1.55; }
.portal-trip-card .workflow-stack { margin-top: 12px; padding: 11px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.portal-trip-card .workflow-history { grid-column: 1 / -1; }
.portal-route-preview { margin-top: 12px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.portal-route-preview[data-state="live"] { border-color: color-mix(in oklab, var(--c-primary) 34%, var(--c-border)); }
.portal-route-preview[data-state="partial"] { border-color: color-mix(in oklab, var(--c-warn) 42%, var(--c-border)); }
.portal-route-preview[data-state="unavailable"] { background: color-mix(in oklab, var(--c-danger) 3%, var(--c-surface)); }
.portal-route-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-route-preview-head > div:first-child { min-width: 0; display: grid; gap: 3px; }
.portal-route-preview-head b { font-size: 12px; font-weight: 600; }
.portal-route-preview-head span:not(.status) { color: var(--c-muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.portal-route-preview-head .actions { flex: 0 0 auto; margin: 0; }
.portal-route-preview-facts,
.portal-telemetry-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 11px 0 0; background: var(--c-border); }
.portal-route-preview-facts > div,
.portal-telemetry-facts > div { min-width: 0; padding: 8px 9px; background: var(--c-bg-elevated); }
.portal-route-preview-facts dt,
.portal-telemetry-facts dt { color: var(--c-muted); font-size: 9px; }
.portal-route-preview-facts dd,
.portal-telemetry-facts dd { margin: 3px 0 0; color: var(--c-fg); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.portal-route-preview .weather-attribution { margin-top: 10px; padding-top: 9px; }

.portal-form-layout #request-form { width: 100%; margin: 0; padding: 16px; }
.portal-form-layout #request-form h2 { font-size: 18px; }
.portal-form-aside .app-card h2 { margin: 12px 0 6px; font-size: 16px; line-height: 1.4; }
.portal-form-aside .app-card p,
.portal-honesty-panel p { margin: 0; color: var(--c-muted); font-size: 12px; line-height: 1.65; }
.portal-contract-list { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.portal-contract-list li { position: relative; padding-left: 15px; color: var(--c-muted); font-size: 12px; line-height: 1.5; }
.portal-contract-list li::before { content: ""; position: absolute; top: .58em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-primary); }

/* Applicant request attachments: an explicit queue keeps large/private files
   understandable on both desktop and small screens.  Uploads remain one at a
   time so a failed object can be retried without losing the saved draft. */
.applicant-attachment-upload { display: grid; gap: 10px; margin-top: 16px; padding: 13px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: color-mix(in oklab, var(--c-primary) 3%, var(--c-surface)); }
.applicant-attachment-upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.applicant-attachment-upload-head > div { min-width: 0; }
.applicant-attachment-upload-head label { display: block; margin: 0; color: var(--c-fg); font-size: 13px; font-weight: 650; }
.applicant-attachment-upload-head p { margin: 4px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.applicant-attachment-upload-head .status { flex: 0 0 auto; }
.applicant-attachment-upload-fields { display: grid; grid-template-columns: minmax(130px, .42fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.applicant-attachment-upload-fields label { min-width: 0; margin: 0; }
.applicant-attachment-type select { min-height: 40px; margin-top: 5px; }
.applicant-attachment-picker { position: relative; display: flex !important; min-height: 40px; align-items: center; justify-content: center; border: 1px dashed var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-bg-elevated); color: var(--c-info); cursor: pointer; font-size: 12px !important; transition: border-color .16s ease, background .16s ease; }
.applicant-attachment-picker:hover { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 6%, var(--c-bg-elevated)); }
.applicant-attachment-picker input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.applicant-attachment-selection { display: grid; gap: 7px; min-width: 0; }
.applicant-attachment-selection-empty,
.applicant-attachment-selection-count { color: var(--c-subtle); font-size: 10.5px; line-height: 1.5; }
.applicant-attachment-selection ul,
.applicant-attachment-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.applicant-attachment-selection li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg-elevated); }
.applicant-attachment-selection li > span { display: grid; gap: 2px; min-width: 0; }
.applicant-attachment-selection li strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-fg); font-size: 11px; }
.applicant-attachment-selection li small { color: var(--c-muted); font-size: 10px; }
.applicant-attachment-selection li .button { flex: 0 0 auto; }
.applicant-attachment-selection-error { display: grid; gap: 3px; padding: 7px 8px; border: 1px solid color-mix(in oklab, var(--c-danger) 45%, var(--c-border)); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-danger) 8%, var(--c-surface)); color: var(--c-danger); font-size: 10.5px; line-height: 1.5; }
.applicant-attachment-upload-status { display: grid; gap: 7px; padding-top: 9px; border-top: 1px solid var(--c-border); }
.applicant-upload-status-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--c-muted); font-size: 10.5px; }
.applicant-upload-status-head strong { color: var(--c-fg); font-size: 11px; }
.applicant-upload-status-head span { overflow-wrap: anywhere; text-align: right; }
.applicant-attachment-upload-status > ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.applicant-attachment-upload-status > ul > li { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-width: 0; padding: 6px 7px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg-elevated); }
.applicant-attachment-upload-status > ul > li > div { display: grid; gap: 2px; min-width: 0; }
.applicant-attachment-upload-status > ul strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-fg); font-size: 10.5px; }
.applicant-attachment-upload-status > ul small { color: var(--c-muted); font-size: 10px; overflow-wrap: anywhere; }
.applicant-upload-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-warn); }
.applicant-upload-status-dot.green { background: var(--c-primary); }
.applicant-upload-status-dot.red { background: var(--c-danger); }
.applicant-upload-status-complete { padding: 8px 9px; border: 1px solid color-mix(in oklab, var(--c-primary) 35%, var(--c-border)); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-primary) 8%, var(--c-surface)); color: var(--c-primary); font-size: 11px; line-height: 1.5; }
.applicant-attachment-panel { display: grid; gap: 9px; margin-top: 14px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-elevated); }
.applicant-attachment-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.applicant-attachment-panel-head > div { display: grid; gap: 3px; min-width: 0; }
.applicant-attachment-panel-head strong { color: var(--c-fg); font-size: 12px; }
.applicant-attachment-panel-head p { margin: 0; color: var(--c-muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.applicant-attachment-panel-head .button { flex: 0 0 auto; }
.applicant-attachment-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.applicant-attachment-file-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: color-mix(in oklab, var(--c-info) 13%, var(--c-surface)); color: var(--c-info); font: 700 9px var(--font-mono); }
.applicant-attachment-file-icon-pdf { background: color-mix(in oklab, var(--c-danger) 14%, var(--c-surface)); color: var(--c-danger); }
.applicant-attachment-file-icon-doc { background: color-mix(in oklab, var(--c-primary) 14%, var(--c-surface)); color: var(--c-primary); }
.applicant-attachment-file-copy { display: grid; gap: 3px; min-width: 0; }
.applicant-attachment-file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-fg); font-size: 11px; }
.applicant-attachment-file-copy span { color: var(--c-muted); font-size: 10px; overflow-wrap: anywhere; }
.applicant-attachment-file-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.applicant-attachment-empty { padding: 9px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-muted); font-size: 10.5px; line-height: 1.55; text-align: center; }
.applicant-attachment-error { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 9px; border: 1px solid color-mix(in oklab, var(--c-danger) 45%, var(--c-border)); border-radius: var(--r-sm); background: color-mix(in oklab, var(--c-danger) 7%, var(--c-surface)); color: var(--c-danger); font-size: 10.5px; line-height: 1.5; }
.applicant-request-attachment-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.applicant-request-attachment-card > div:first-child { display: grid; gap: 2px; min-width: 0; }
.applicant-request-attachment-card small { color: var(--c-muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.applicant-request-attachment-card > button { min-width: 92px; }
.applicant-request-attachment-viewer { grid-column: 1 / -1; min-width: 0; }
.applicant-request-attachment-viewer[hidden] { display: none; }
.applicant-request-attachment-viewer .applicant-attachment-panel { margin-top: 0; padding: 10px; }
.applicant-attachment-append { display: grid; grid-column: 1 / -1; gap: 8px; min-width: 0; padding: 10px; border: 1px solid color-mix(in oklab, var(--c-info) 24%, var(--c-border)); border-radius: var(--r-md); background: color-mix(in oklab, var(--c-info) 4%, var(--c-bg-elevated)); }
.applicant-attachment-append-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.applicant-attachment-append-head > div { display: grid; gap: 2px; min-width: 0; }
.applicant-attachment-append-head strong { color: var(--c-fg); font-size: 11.5px; }
.applicant-attachment-append-head small { color: var(--c-muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.applicant-attachment-append-head .status { flex: 0 0 auto; }
.applicant-attachment-append-controls { display: grid; grid-template-columns: minmax(120px, .36fr) minmax(180px, 1fr) auto; gap: 8px; align-items: end; }
.applicant-attachment-append-controls > * { min-width: 0; margin: 0; }
.applicant-attachment-append-controls .button { min-height: 40px; white-space: nowrap; }

/* Employee profile: a calm, information-first home for the applicant portal.
   The same token contract works across Grid Night, Paper, Slate and Mist. */
.portal-apply-body .applicant-profile-page { gap: 16px; }
.portal-apply-body .applicant-profile-intro { align-items: center; }
.portal-apply-body .applicant-profile-intro .button { flex: 0 0 auto; }
.portal-apply-body .applicant-profile-hero {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow: hidden;
  border-color: color-mix(in oklab, var(--c-info) 22%, var(--c-border));
  background:
    linear-gradient(125deg, color-mix(in oklab, var(--c-primary) 8%, var(--c-bg-elevated)), var(--c-bg-elevated) 58%),
    var(--c-bg-elevated);
}
.portal-apply-body .applicant-profile-hero::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -30px;
  width: 250px;
  height: 180px;
  border: 1px solid color-mix(in oklab, var(--c-info) 18%, transparent);
  border-radius: 50%;
  opacity: .52;
  pointer-events: none;
  transform: rotate(-16deg);
}
.portal-apply-body .applicant-profile-person {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.portal-apply-body .applicant-profile-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--c-primary) 55%, var(--c-border-strong));
  border-radius: 18px;
  background: color-mix(in oklab, var(--c-primary) 15%, var(--c-surface));
  color: var(--c-primary);
  font: 700 20px/1 var(--font-mono);
}
.portal-apply-body .applicant-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-apply-body .applicant-profile-person-copy { min-width: 0; }
.portal-apply-body .applicant-profile-person-copy h2 { margin: 4px 0 0; color: var(--c-fg); font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
.portal-apply-body .applicant-profile-person-copy p { margin: 5px 0 0; color: var(--c-muted); font: 11px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.portal-apply-body .applicant-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.portal-apply-body .applicant-profile-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.portal-apply-body .applicant-profile-completion {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.portal-apply-body .applicant-profile-completion > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.portal-apply-body .applicant-profile-completion strong { color: var(--c-fg); font-size: 12px; }
.portal-apply-body .applicant-profile-completion > div:first-child span { color: var(--c-primary); font: 11px var(--font-mono); }
.portal-apply-body .applicant-profile-progress { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--c-border-strong) 72%, transparent); }
.portal-apply-body .applicant-profile-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-primary), var(--c-info)); transition: width .25s ease; }
.portal-apply-body .applicant-profile-completion p { margin: 0; color: var(--c-muted); font-size: 10.5px; line-height: 1.5; }
.portal-apply-body .applicant-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.portal-apply-body .applicant-profile-card { min-width: 0; padding: 17px; }
.portal-apply-body .applicant-profile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--c-border); }
.portal-apply-body .applicant-profile-card-head h2 { margin: 3px 0 0; color: var(--c-fg); font-size: 15px; }
.portal-apply-body .applicant-profile-card-index { color: var(--c-subtle); font: 10px var(--font-mono); }
.portal-apply-body .applicant-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; background: var(--c-border); }
.portal-apply-body .applicant-profile-field { min-width: 0; padding: 10px 11px; background: var(--c-surface); }
.portal-apply-body .applicant-profile-field dt { color: var(--c-muted); font-size: 10px; line-height: 1.4; }
.portal-apply-body .applicant-profile-field dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--c-fg); font-size: 12px; font-weight: 600; line-height: 1.45; }
.portal-apply-body .applicant-profile-field dd.is-missing { color: var(--c-subtle); font-weight: 500; }
.portal-apply-body .applicant-profile-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.portal-apply-body .applicant-profile-card-actions .button { min-height: 34px; }
.portal-apply-body .applicant-profile-notice { grid-column: 1 / -1; border-color: color-mix(in oklab, var(--c-info) 20%, var(--c-border)); }
.portal-apply-body .applicant-profile-notice > p { margin: 12px 0 0; color: var(--c-fg); font-size: 12px; line-height: 1.65; }
.portal-apply-body .applicant-profile-notice ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0 0 0 17px; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.portal-apply-body .applicant-profile-notice small { display: block; margin-top: 13px; color: var(--c-subtle); font: 10px var(--font-mono); }
.portal-apply-body .applicant-profile-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in oklab, var(--c-danger) 45%, var(--c-border)); border-radius: var(--r-md); background: color-mix(in oklab, var(--c-danger) 8%, var(--c-surface)); color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.portal-apply-body .applicant-profile-error strong { color: var(--c-danger); font-size: 11px; }
.portal-apply-body .applicant-profile-error span { overflow-wrap: anywhere; }
.portal-apply-body .applicant-profile-loading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 220px; padding: 24px; }
.portal-apply-body .applicant-profile-loading-mark { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid color-mix(in oklab, var(--c-info) 40%, var(--c-border)); border-radius: 14px; background: color-mix(in oklab, var(--c-info) 10%, var(--c-surface)); color: var(--c-info); }
.portal-apply-body .applicant-profile-loading-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.portal-apply-body .applicant-profile-loading h1 { margin: 4px 0 0; font-size: 20px; }
.portal-apply-body .applicant-profile-loading p { margin: 6px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.6; }

.driver-runtime-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 11px 8px; text-align: center; }
.driver-runtime-rail > div { min-width: 0; padding-inline: 4px; border-left: 1px solid var(--c-border); }
.driver-runtime-rail > div:first-child { border-left: 0; }
.driver-runtime-rail i { display: block; width: 6px; height: 6px; margin: 0 auto 5px; border-radius: 50%; background: var(--c-subtle); }
.driver-runtime-rail [data-state="known"] i { background: var(--c-primary); }
.driver-runtime-rail span,
.driver-runtime-rail b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-runtime-rail span { color: var(--c-fg); font-size: 11px; }
.driver-runtime-rail b { margin-top: 2px; color: var(--c-muted); font-size: 9px; font-weight: 500; }
.driver-task-card { padding-right: 42px; }
.driver-card-chevron { position: absolute; top: 50%; right: 14px; color: var(--c-subtle); transform: translateY(-50%); }
.driver-card-chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.portal-driver-profile .portal-fact-list { margin-top: 10px; }

.portal-task-hero > .portal-card-head h1 { font-size: 20px; }
.portal-workflow-block { display: grid; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--c-border); }
.portal-workflow-block .workflow-stack { min-width: 0; }
.portal-workflow-block > .workflow-history { margin-top: 0; }
.portal-route-nodes ol { display: grid; gap: 12px; margin: 13px 0 0; padding: 0; list-style: none; }
.portal-route-nodes li { display: grid; grid-template-columns: 8px 72px minmax(0, 1fr); gap: 9px; align-items: center; font-size: 12px; }
.portal-route-nodes li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-subtle); }
.portal-route-nodes li.done i { background: var(--c-primary); }
.portal-route-nodes li span { color: var(--c-muted); }
.portal-route-nodes li b { overflow-wrap: anywhere; font-weight: 500; }
.portal-capability-card > p,
.portal-task-aside > .app-card > p { margin: 12px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.portal-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.portal-capability-grid > div { display: grid; gap: 3px; min-height: 78px; place-content: center; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); text-align: center; }
.portal-capability-grid span { color: var(--c-muted); font-size: 10px; }
.portal-capability-grid b { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
.portal-capability-grid small { color: var(--c-subtle); font-size: 9px; }
.portal-telemetry-facts { margin-top: 10px; }
.portal-inspection-link { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-color: color-mix(in oklab, var(--c-warn) 40%, var(--c-border)); background: color-mix(in oklab, var(--c-warn) 9%, var(--c-bg-elevated)); color: var(--c-warn); font-size: 12px; text-decoration: none; }
.portal-inspection-link.ready { border-color: color-mix(in oklab, var(--c-primary) 35%, var(--c-border)); background: color-mix(in oklab, var(--c-primary) 8%, var(--c-bg-elevated)); color: var(--c-primary); }
.portal-driver-actions { align-items: stretch; flex-direction: column; }
.portal-driver-actions .button { width: 100%; min-height: 40px; }
.portal-task-aside > .exception-evidence-panel { margin: 0; }

.portal-inspect-summary > p { margin: 9px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.6; }
.portal-inspect-summary .inspection-summary { margin-top: 14px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.portal-wide-action { width: 100%; min-height: 44px; margin-top: 12px; }
.portal-honesty-panel { position: sticky; top: 0; }

.portal-performance-row,
.portal-event-row,
.portal-availability-list article { margin-top: 11px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.portal-performance-row > b { display: block; margin-top: 7px; font-size: 13px; }
.portal-performance-row > p,
.portal-event-row > p,
.portal-availability-list p { margin: 5px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.portal-event-row > div:first-child,
.portal-availability-list article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-event-row > div:first-child span { color: var(--c-muted); font-family: var(--font-mono); font-size: 10px; }
.portal-safety-missing { margin-top: 13px; }
.portal-safety-missing > div { min-height: 68px; }
.portal-safety-aside form label { margin-top: 11px; }

.portal-route-empty {
  display: grid;
  min-height: 280px;
  place-content: center;
  justify-items: center;
  padding: 28px;
  border-style: dashed;
  color: var(--c-muted);
  text-align: center;
}
.portal-route-empty h1,
.portal-route-empty h2 { margin: 12px 0 0; color: var(--c-fg); font-size: 20px; }
.portal-route-empty p { max-width: 520px; margin: 7px 0 16px; font-size: 12px; line-height: 1.65; }
.portal-empty-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-primary); }
.portal-empty-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1023px) {
  .portal-task-body { overflow: hidden; }
  .portal-task-shell {
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) auto;
  }
  .portal-task-shell .portal-sidebar { display: none; }
  .portal-task-shell > .topbar {
    grid-column: 1;
    grid-row: 1;
    min-height: 56px;
    padding: 6px 16px;
    position: relative;
    flex-wrap: nowrap;
  }
  .portal-task-shell > .topbar .brand { display: flex; width: auto; min-width: 0; gap: 8px; }
  .portal-task-shell > .topbar .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
  .portal-task-shell > .topbar .brand > div { min-width: 0; }
  .portal-task-shell > .topbar .brand strong { color: var(--c-muted); font-size: 10px; font-weight: 500; letter-spacing: .12em; }
  .portal-task-shell > .topbar .brand span:last-child { margin: 0; overflow: hidden; color: var(--c-fg); font-size: 17px; font-weight: 650; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .portal-task-shell .portal-breadcrumb { display: none; }
  .portal-task-shell .account { width: auto; margin-left: auto; gap: 3px; }
  .portal-task-shell .account > span,
  .portal-task-shell #app-gateway-link { display: none; }
  .portal-task-shell .account .button { min-width: 44px; min-height: 44px; padding: 5px 7px; font-size: 11px; }
  .portal-task-shell > .content {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    padding: 10px 16px 16px;
  }
  .portal-task-shell > .portal-mobile-nav {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-height: 59px;
    padding-bottom: max(7px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-border);
    background: color-mix(in oklab, var(--c-bg-elevated) 88%, transparent);
    backdrop-filter: blur(16px);
  }
  .portal-mobile-nav .portal-nav-item {
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: 0;
    padding: 4px 2px;
    font-size: 10px;
  }
  .portal-mobile-nav .portal-nav-item:hover,
  .portal-mobile-nav .portal-nav-item.active { background: transparent; color: var(--c-primary); }
  .portal-mobile-nav .portal-nav-item.active::before { display: none; }
  .portal-mobile-nav .portal-nav-item svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .portal-mobile-nav .portal-nav-item.active svg { stroke-width: 2.2; }
  .portal-mobile-nav .portal-nav-badge { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 16px; margin: 0; padding: 1px 4px; border-radius: 99px; background: var(--c-danger); color: white; font-size: 8px; text-align: center; }

  .portal-home-layout,
  .portal-form-layout,
  .portal-task-layout,
  .portal-inspect-layout,
  .portal-safety-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .portal-form-layout > div { min-width: 0; }
  .portal-honesty-panel { position: static; }
  .portal-page-intro { min-height: 44px; }
}

@media (max-width: 640px) {
  .portal-apply-body .applicant-profile-intro { align-items: stretch; }
  .portal-apply-body .applicant-profile-intro .button { width: max-content; }
  .portal-apply-body .applicant-profile-hero,
  .portal-apply-body .applicant-profile-card { padding: 14px; }
  .portal-apply-body .applicant-profile-person { grid-template-columns: 58px minmax(0, 1fr); }
  .portal-apply-body .applicant-profile-avatar { width: 58px; height: 58px; border-radius: 15px; }
  .portal-apply-body .applicant-profile-hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .portal-apply-body .applicant-profile-fields { grid-template-columns: minmax(0, 1fr); }
  .portal-apply-body .applicant-profile-notice { grid-column: auto; }
  .portal-apply-body .applicant-profile-error { grid-template-columns: auto minmax(0, 1fr); }
  .portal-apply-body .applicant-profile-error .button { grid-column: 2; width: max-content; }
  .portal-task-shell .grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .portal-task-shell .span-12 { grid-column: 1; }
  .app-card,
  .portal-list-card { padding: 14px; }
  .portal-page-intro { display: grid; gap: 10px; }
  .portal-page-intro h1 { font-size: 20px; }
  .portal-summary-pills { width: 100%; }
  .portal-summary-pills span { flex: 1; text-align: center; }
  .portal-count { text-align: left; }
  .portal-card-head { gap: 8px; }
  .portal-card-head h1 { font-size: 18px; }
  .portal-active-card > h1 { font-size: 21px; }
  .portal-honest-empty { min-height: 310px; }
  .portal-home-actions { gap: 8px; }
  .portal-primary-action,
  .portal-secondary-action { min-height: 56px; font-size: 13px; }
  .portal-fact-list { grid-template-columns: minmax(0, 1fr); }
  .portal-route-line { font-size: 11px; }
  .portal-request-progress { grid-template-columns: auto minmax(0, 1fr); }
  .portal-request-progress > small { grid-column: 2; text-align: left; }
  .portal-weather-slot .weather-snapshot-meta { grid-template-columns: minmax(0, 1fr); }
  .portal-weather-slot .weather-title { display: grid; }
  .portal-weather-slot .weather-title .actions { margin-top: 2px; }
  .portal-weather-summary-head { grid-template-columns: 36px minmax(0, 1fr); }
  .portal-weather-summary-head > .status { grid-column: 2; width: max-content; }
  .portal-weather-summary-actions { align-items: flex-start; }
  .portal-route-preview-head { display: grid; }
  .portal-route-preview-head .actions { width: 100%; justify-content: space-between; }
  .portal-route-preview-facts,
  .portal-telemetry-facts { grid-template-columns: minmax(0, 1fr); }
  .portal-form-layout #request-form { padding: 14px; }
  .portal-route-empty { min-height: 240px; padding: 22px 18px; }
  .portal-message-preview li { grid-template-columns: 86px minmax(0, 1fr); }
  .portal-task-aside > .exception-evidence-panel { border-radius: var(--r-lg); }
}

@media (max-width: 390px) {
  .portal-apply-body .applicant-profile-person { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .portal-apply-body .applicant-profile-avatar { width: 48px; height: 48px; border-radius: 13px; font-size: 16px; }
  .portal-apply-body .applicant-profile-person-copy h2 { font-size: 19px; }
  .portal-apply-body .applicant-profile-hero-actions .button { flex: 1 1 auto; }
  .portal-task-shell > .content { width: 100%; padding: 10px 16px 16px; }
  .portal-task-shell > .topbar { min-height: 56px; padding-inline: 16px; }
  .portal-task-shell > .portal-mobile-nav { min-height: 59px; }
  .portal-task-shell > .topbar .brand strong { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-task-shell > .topbar .brand span:last-child { max-width: 132px; }
  .portal-task-shell .account .button { min-width: 44px; min-height: 44px; }
  .portal-home-layout,
  .portal-form-layout,
  .portal-task-layout,
  .portal-inspect-layout,
  .portal-safety-layout,
  .portal-page-stack { width: 100%; }
  .portal-home-primary,
  .portal-home-secondary,
  .portal-form-aside,
  .portal-task-main,
  .portal-task-aside,
  .portal-safety-main,
  .portal-safety-aside { gap: 10px; }
  .portal-capability-grid { gap: 6px; }
  .driver-runtime-rail { padding-inline: 4px; }
  .driver-runtime-rail b { font-size: 8px; }
}

@media (max-width: 640px) {
  .applicant-attachment-upload-fields { grid-template-columns: minmax(0, 1fr); }
  .applicant-attachment-upload-head { align-items: stretch; flex-direction: column; }
  .applicant-attachment-upload-head .status { width: max-content; }
  .applicant-attachment-file-actions { align-items: flex-end; flex-direction: column; }
  .applicant-attachment-append-controls { grid-template-columns: minmax(0, 1fr); }
  .applicant-attachment-append-controls .button { width: 100%; }
}

@media (max-width: 390px) {
  .applicant-attachment-upload { padding: 11px; }
  .applicant-attachment-panel { padding: 10px; }
  .applicant-attachment-list li { grid-template-columns: 28px minmax(0, 1fr); }
  .applicant-attachment-file-actions { grid-column: 2; align-items: flex-start; flex-direction: row; justify-content: flex-start; }
  .applicant-upload-status-head { align-items: flex-start; flex-direction: column; }
  .applicant-upload-status-head span { text-align: left; }
  .applicant-request-attachment-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .applicant-request-attachment-card > button { width: 100%; }
  .applicant-attachment-append-head { align-items: stretch; flex-direction: column; }
  .applicant-attachment-append-head .status { width: max-content; }
}

/* Driver work mode: task-first, touch-first, and scoped away from the other portals. */
.portal-driver-body .portal-task-shell {
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
}
.portal-driver-body .portal-task-shell > .content { padding: 22px 28px 40px; }
.portal-driver-body .driver-page {
  width: 100%;
  max-width: 1320px;
  min-width: 0;
  display: grid;
  gap: 16px;
  margin-inline: auto;
}
.portal-driver-body .driver-page h1,
.portal-driver-body .driver-page h2,
.portal-driver-body .driver-page h3,
.portal-driver-body .driver-page p { overflow-wrap: anywhere; }
.portal-driver-body .driver-page .status { max-width: 100%; white-space: normal; text-align: center; }
.portal-driver-body .driver-section-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.portal-driver-body .driver-section-heading h2 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.35; }
.portal-driver-body .driver-section-heading p { margin: 4px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; }
.portal-driver-body .driver-section-heading > span { flex: 0 0 auto; color: var(--c-muted); font-size: 12px; }
.portal-driver-body .driver-duty-head {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.portal-driver-body .driver-duty-head > div:first-child > span,
.portal-driver-body .driver-focus-head > div > span,
.portal-driver-body .driver-inspection-head > div > span,
.portal-driver-body .driver-safety-head > div:first-child > span {
  display: block;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 650;
}
.portal-driver-body .driver-duty-name { display: block; margin: 2px 0 0; color: var(--c-fg); font-size: 24px; font-weight: 700; line-height: 1.2; }
.portal-driver-body .driver-duty-head p { margin: 3px 0 0; color: var(--c-muted); font: 11px/1.45 var(--font-mono); }
.portal-driver-body .driver-duty-head > div:last-child { display: flex; align-items: center; gap: 8px; }
.portal-driver-body .driver-duty-head .button,
.portal-driver-body .portal-weather-summary-actions .button { min-height: 44px; }
.portal-driver-body .driver-focus-task,
.portal-driver-body .driver-task-summary,
.portal-driver-body .driver-task-progress,
.portal-driver-body .driver-route-evidence,
.portal-driver-body .driver-runtime-rail,
.portal-driver-body .driver-task-history,
.portal-driver-body .driver-inspection-work,
.portal-driver-body .driver-inspection-note,
  .portal-driver-body .driver-safety-section,
  .portal-driver-body .driver-schedule-panel,
  .portal-driver-body .driver-duty-overview,
  .portal-driver-body .driver-profile-identity,
  .portal-driver-body .driver-home-empty,
.portal-driver-body .driver-authority-warning,
.portal-driver-body .driver-load-error {
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-elevated);
}
.portal-driver-body .driver-focus-task,
.portal-driver-body .driver-task-summary { padding: clamp(18px, 2.4vw, 28px); }
.portal-driver-body .driver-focus-head,
.portal-driver-body .driver-inspection-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.portal-driver-body .driver-focus-head :is(h1, h2),
.portal-driver-body .driver-inspection-head h1 { margin: 4px 0 0; font-size: 26px; line-height: 1.25; }
.portal-driver-body .driver-focus-head p,
.portal-driver-body .driver-inspection-head p { margin: 5px 0 0; color: var(--c-muted); font: 11px/1.5 var(--font-mono); }
.portal-driver-body .driver-focus-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 0;
  border-block: 1px solid var(--c-border);
}
.portal-driver-body .driver-focus-route > div { min-width: 0; }
.portal-driver-body .driver-focus-route > div:last-child { text-align: right; }
.portal-driver-body .driver-focus-route span { display: block; margin-bottom: 6px; color: var(--c-muted); font-size: 11px; }
.portal-driver-body .driver-focus-route strong { display: block; color: var(--c-fg); font-size: 17px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.portal-driver-body .driver-focus-route i { color: var(--c-primary); font-style: normal; font-size: 22px; }
.portal-driver-body .driver-focus-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--c-border);
}
.portal-driver-body .driver-focus-facts > div { min-width: 0; padding: 13px 14px; background: var(--c-surface); }
.portal-driver-body .driver-focus-facts dt { color: var(--c-muted); font-size: 11px; }
.portal-driver-body .driver-focus-facts dd { margin: 5px 0 0; color: var(--c-fg); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.portal-driver-body .driver-focus-task > .weather-inline,
.portal-driver-body .driver-task-summary > .weather-inline { margin-top: 14px; }
.portal-driver-body .driver-next-action {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--c-primary) 44%, var(--c-border));
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--c-primary) 8%, var(--c-bg-elevated));
}
.portal-driver-body .driver-focus-task > .driver-next-action { margin-top: 16px; }
.portal-driver-body .driver-next-action > div:first-child { min-width: 0; }
.portal-driver-body .driver-next-action > div:first-child span { display: block; color: var(--c-primary); font-size: 11px; font-weight: 650; }
.portal-driver-body .driver-next-action > div:first-child strong { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; }
.portal-driver-body .driver-next-action-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.portal-driver-body .driver-next-action-buttons .button { min-height: 48px; min-width: 132px; }
.portal-driver-body .driver-next-action-buttons .driver-primary-command { font-size: 14px; font-weight: 700; }
.portal-driver-body .driver-risk-actions { grid-column: 1 / -1; border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-risk-actions summary,
.portal-driver-body .driver-data-detail summary,
.portal-driver-body .driver-task-progress details > summary,
.portal-driver-body .driver-availability-create > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--c-muted);
  font-size: 12px;
  cursor: pointer;
}
.portal-driver-body .driver-risk-actions > div { display: flex; gap: 8px; padding-bottom: 4px; }
.portal-driver-body .driver-connectivity-alert,
.portal-driver-body .driver-refresh-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in oklab, var(--c-warn) 46%, var(--c-border));
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--c-warn) 9%, var(--c-bg));
  color: var(--c-warn);
  font-size: 12px;
  line-height: 1.5;
}
.portal-driver-body .driver-connectivity-alert strong { color: var(--c-fg); }
.portal-driver-body .driver-support-grid,
.portal-driver-body .driver-task-evidence-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.portal-driver-body .driver-runtime-rail { display: block; padding: 16px; text-align: left; }
.portal-driver-body .driver-runtime-rail dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 0;
  background: var(--c-border);
}
.portal-driver-body .driver-runtime-rail dl > div { min-width: 0; padding: 11px 12px; background: var(--c-surface); }
.portal-driver-body .driver-runtime-rail dt { color: var(--c-muted); font-size: 10px; }
.portal-driver-body .driver-runtime-rail dd { margin: 4px 0 0; color: var(--c-fg); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.portal-driver-body .driver-runtime-rail [data-state="known"] dd { color: var(--c-primary); }
.portal-driver-body .driver-duty-overview { padding: 18px; }
.portal-driver-body .driver-duty-overview dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 0;
  background: var(--c-border);
}
.portal-driver-body .driver-duty-overview dl > div { min-width: 0; padding: 12px 13px; background: var(--c-surface); }
.portal-driver-body .driver-duty-overview dt { color: var(--c-muted); font-size: 10px; }
.portal-driver-body .driver-duty-overview dd { margin: 5px 0 0; color: var(--c-fg); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.portal-driver-body .driver-duty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.portal-driver-body .driver-duty-actions .button { min-height: 44px; }
.portal-driver-body .driver-task-history,
.portal-driver-body .driver-task-progress,
.portal-driver-body .driver-route-evidence,
.portal-driver-body .driver-inspection-work,
.portal-driver-body .driver-inspection-note,
.portal-driver-body .driver-safety-section,
.portal-driver-body .driver-schedule-panel { padding: 18px; }
.portal-driver-body .driver-task-records,
.portal-driver-body .driver-review-list,
.portal-driver-body .driver-performance-list { display: grid; gap: 8px; margin-top: 14px; }
.portal-driver-body .driver-task-record {
  position: relative;
  min-width: 0;
  display: block;
  padding: 14px 46px 14px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-fg);
  text-decoration: none;
}
.portal-driver-body .driver-task-record:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.portal-driver-body .driver-task-record:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }
.portal-driver-body .driver-task-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-driver-body .driver-task-record-head span:first-child { color: var(--c-muted); font: 10px/1.45 var(--font-mono); }
.portal-driver-body .driver-task-record-head h3 { margin: 3px 0 0; font-size: 14px; line-height: 1.4; }
.portal-driver-body .driver-task-record-route { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.portal-driver-body .driver-task-record-route b { min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.portal-driver-body .driver-task-record-route span { color: var(--c-muted); }
.portal-driver-body .driver-task-record-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--c-muted); font-size: 11px; }
.portal-driver-body .driver-record-limit { margin: 12px 0 0; color: var(--c-muted); font-size: 11px; }
.portal-driver-body .driver-back-link { width: max-content; min-height: 44px; display: inline-flex; align-items: center; color: var(--c-info); font-size: 12px; text-decoration: none; }
.portal-driver-body .driver-task-progress .workflow-stack { margin-top: 15px; }
.portal-driver-body .driver-task-progress details { margin-top: 12px; border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-task-history-detail { display: grid; gap: 10px; padding-top: 2px; }
.portal-driver-body .driver-task-evidence-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.portal-driver-body .driver-task-side { min-width: 0; display: grid; gap: 12px; }
.portal-driver-body .driver-task-side .app-card { padding: 16px; }
.portal-driver-body .portal-capability-card .portal-card-head small { display: block; margin-top: 4px; color: var(--c-muted); font-size: 10px; }
.portal-driver-body .portal-capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-driver-body .portal-capability-grid > div { min-height: 86px; }
.portal-driver-body .driver-route-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-driver-body .driver-data-detail { margin-top: 10px; border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-data-detail dl { display: grid; gap: 8px; margin: 0 0 4px; }
.portal-driver-body .driver-data-detail dl > div { min-width: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 11px; }
.portal-driver-body .driver-data-detail dt { color: var(--c-muted); }
.portal-driver-body .driver-data-detail dd { margin: 0; color: var(--c-fg); overflow-wrap: anywhere; }
.portal-driver-body .driver-inspection-head,
.portal-driver-body .driver-safety-head { min-width: 0; padding: 4px 2px 2px; }
.portal-driver-body .driver-inspection-items { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.portal-driver-body .driver-inspection-items li {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--c-border);
}
.portal-driver-body .driver-inspection-items li > span { color: var(--c-muted); font: 600 12px/1.5 var(--font-mono); }
.portal-driver-body .driver-inspection-items li strong { font-size: 14px; }
.portal-driver-body .driver-inspection-items li p { margin: 4px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; }
.portal-driver-body .driver-inspection-items.completed li[data-result="pass"] > span { color: var(--c-primary); }
.portal-driver-body .driver-inspection-items.completed li[data-result="fail"] > span { color: var(--c-danger); }
.portal-driver-body .driver-inspection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--c-primary) 40%, var(--c-border));
  border-radius: var(--r-md);
  background: var(--c-bg-elevated);
}
.portal-driver-body .driver-inspection-actions .button { min-height: 48px; min-width: 160px; }
.portal-driver-body .driver-inspection-note ul { margin: 10px 0 0; padding-left: 20px; color: var(--c-muted); font-size: 12px; line-height: 1.75; }
.portal-driver-body .driver-safety-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.portal-driver-body .driver-safety-head h1 { margin: 4px 0 0; font-size: 25px; }
.portal-driver-body .driver-safety-head p { max-width: 64ch; margin: 6px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; }
.portal-driver-body .driver-safety-head > div:last-child { display: flex; gap: 8px; }
.portal-driver-body .driver-safety-head > div:last-child span { padding: 7px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-muted); font-size: 11px; }
.portal-driver-body .driver-safety-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); align-items: start; gap: 16px; }
.portal-driver-body .driver-safety-layout > .driver-safety-main { min-width: 0; display: grid; gap: 16px; }
.portal-driver-body .driver-profile-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 16px;
}
.portal-driver-body .driver-profile-identity { grid-row: 1 / span 2; padding: 18px; }
.portal-driver-body .driver-profile-person { min-width: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.portal-driver-body .driver-profile-avatar { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--c-border-strong); border-radius: 50%; background: var(--c-surface); color: var(--c-primary); }
.portal-driver-body .driver-profile-avatar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.portal-driver-body .driver-profile-person > div { min-width: 0; }
.portal-driver-body .driver-profile-person > div > span { color: var(--c-primary); font-size: 11px; font-weight: 650; }
.portal-driver-body .driver-profile-person h2 { margin: 3px 0 0; font-size: 20px; }
.portal-driver-body .driver-profile-person p { margin: 4px 0 0; color: var(--c-muted); font: 11px/1.5 var(--font-mono); }
.portal-driver-body .driver-profile-identity dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; background: var(--c-border); }
.portal-driver-body .driver-profile-identity dl > div { min-width: 0; padding: 11px 12px; background: var(--c-surface); }
.portal-driver-body .driver-profile-identity dt { color: var(--c-muted); font-size: 10px; }
.portal-driver-body .driver-profile-identity dd { margin: 5px 0 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.portal-driver-body .driver-profile-actions { display: grid; gap: 8px; margin-top: 16px; }
.portal-driver-body .driver-profile-actions .button { width: 100%; min-height: 44px; justify-content: center; }
.portal-driver-body .driver-review-list article,
.portal-driver-body .driver-performance-list article,
.portal-driver-body .portal-availability-list article {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.portal-driver-body .driver-review-list article > div:first-child,
.portal-driver-body .driver-performance-list article > div:first-child,
.portal-driver-body .portal-availability-list article > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-driver-body .driver-review-list p,
.portal-driver-body .driver-performance-list p,
.portal-driver-body .portal-availability-list p { margin: 6px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.portal-driver-body .driver-review-list .button,
.portal-driver-body .driver-performance-list .button,
.portal-driver-body .portal-availability-list .button { min-height: 44px; margin-top: 10px; }
.portal-driver-body .driver-performance-list article > div:first-child > b { color: var(--c-primary); font: 600 24px/1 var(--font-mono); }
.portal-driver-body .driver-record-complete { display: block; margin-top: 9px; color: var(--c-muted); font-size: 11px; }
.portal-driver-body .driver-record-detail { margin-top: 9px; border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-record-detail summary { min-height: 44px; display: flex; align-items: center; color: var(--c-info); font-size: 11px; cursor: pointer; }
.portal-driver-body .driver-record-detail dl { display: grid; gap: 7px; margin: 0 0 8px; }
.portal-driver-body .driver-record-detail dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 9px; font-size: 11px; }
.portal-driver-body .driver-record-detail dt { color: var(--c-muted); }
.portal-driver-body .driver-record-detail dd { margin: 0; overflow-wrap: anywhere; }
.portal-driver-body .driver-metric-list { display: grid; gap: 1px; margin-bottom: 8px; background: var(--c-border); }
.portal-driver-body .driver-metric-list > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px; background: var(--c-surface); }
.portal-driver-body .driver-metric-list span { font-size: 11px; font-weight: 600; }
.portal-driver-body .driver-metric-list b { color: var(--c-primary); font: 600 15px/1.4 var(--font-mono); }
.portal-driver-body .driver-metric-list small { grid-column: 1 / -1; color: var(--c-muted); font-size: 10px; overflow-wrap: anywhere; }
.portal-driver-body .driver-appeal-history { padding-top: 4px; border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-schedule-panel { display: grid; gap: 14px; }
.portal-driver-body .driver-license-panel { padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.portal-driver-body .driver-license-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; background: var(--c-border); }
.portal-driver-body .driver-license-panel dl > div { min-width: 0; padding: 10px; background: var(--c-surface); }
.portal-driver-body .driver-license-panel dt { color: var(--c-muted); font-size: 10px; }
.portal-driver-body .driver-license-panel dd { margin: 4px 0 0; color: var(--c-fg); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.portal-driver-body .driver-message-section > .card { margin: 0; padding: 0; border: 0; background: transparent; }
.portal-driver-body .driver-message-section .notification-list { margin-top: 14px; }
.portal-driver-body .driver-message-section .notification-item { min-height: 72px; }
.portal-driver-body .portal-availability-list { display: grid; gap: 8px; margin-top: 14px; }
.portal-driver-body .driver-availability-create { border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-availability-create form { display: grid; gap: 10px; padding-top: 2px; }
.portal-driver-body .driver-availability-create label { margin: 0; }
.portal-driver-body .driver-setup-page { max-width: 1060px; gap: 18px; padding-top: 10px; }
.portal-driver-body .driver-setup-hero,
.portal-driver-body .driver-setup-guide,
.portal-driver-body .driver-setup-account {
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-elevated);
}
.portal-driver-body .driver-setup-hero { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 32px; }
.portal-driver-body .driver-setup-icon { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--c-border-strong); border-radius: 50%; background: var(--c-surface); color: var(--c-primary); }
.portal-driver-body .driver-setup-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.portal-driver-body .driver-setup-kicker { display: block; color: var(--c-primary); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.portal-driver-body .driver-setup-hero h1 { max-width: 24ch; margin: 5px 0 0; font-size: 28px; line-height: 1.25; }
.portal-driver-body .driver-setup-hero p { max-width: 68ch; margin: 10px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.7; }
.portal-driver-body .driver-setup-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.portal-driver-body .driver-setup-actions .button { min-height: 46px; }
.portal-driver-body .driver-setup-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: start; gap: 18px; }
.portal-driver-body .driver-setup-guide,
.portal-driver-body .driver-setup-account { padding: 20px; }
.portal-driver-body .driver-setup-guide ol { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.portal-driver-body .driver-setup-guide li { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--c-border); }
.portal-driver-body .driver-setup-guide li > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--c-border); border-radius: 50%; color: var(--c-muted); font: 600 10px/1 var(--font-mono); }
.portal-driver-body .driver-setup-guide li[data-state="complete"] > span { border-color: color-mix(in oklab, var(--c-primary) 55%, var(--c-border)); color: var(--c-primary); }
.portal-driver-body .driver-setup-guide li strong { display: block; font-size: 13px; }
.portal-driver-body .driver-setup-guide li p { margin: 4px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.6; }
.portal-driver-body .driver-setup-account > span { display: block; color: var(--c-muted); font-size: 10px; }
.portal-driver-body .driver-setup-account > strong { display: block; margin-top: 4px; font-size: 18px; overflow-wrap: anywhere; }
.portal-driver-body .driver-setup-account dl { display: grid; gap: 1px; margin: 16px 0 0; background: var(--c-border); }
.portal-driver-body .driver-setup-account dl > div { min-width: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; padding: 10px; background: var(--c-surface); font-size: 11px; }
.portal-driver-body .driver-setup-account dt { color: var(--c-muted); }
.portal-driver-body .driver-setup-account dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.portal-driver-body .driver-setup-account > p { margin: 14px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.6; }
.portal-driver-body .driver-home-empty,
.portal-driver-body .driver-authority-warning,
.portal-driver-body .driver-load-error {
  min-height: 240px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: clamp(22px, 4vw, 42px);
}
.portal-driver-body .driver-home-empty :is(h1, h2),
.portal-driver-body .driver-authority-warning :is(h1, h2),
.portal-driver-body .driver-load-error h1 { margin: 0; font-size: 22px; }
.portal-driver-body .driver-home-empty p,
.portal-driver-body .driver-authority-warning p,
.portal-driver-body .driver-load-error p { margin: 6px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.6; }
.portal-driver-body .driver-authority-warning { display: block; min-height: 0; border-color: color-mix(in oklab, var(--c-warn) 50%, var(--c-border)); }
.portal-driver-body .driver-loading { width: 100%; max-width: 1320px; display: grid; gap: 14px; margin-inline: auto; }
.portal-driver-body .driver-loading-copy { color: var(--c-muted); font-size: 12px; }
.portal-driver-body .driver-skeleton,
.portal-driver-body .driver-skeleton-grid { min-width: 0; display: grid; gap: 12px; }
.portal-driver-body .driver-skeleton { min-height: 150px; padding: 24px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg-elevated); }
.portal-driver-body .driver-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-driver-body .driver-skeleton i { display: block; height: 12px; border-radius: var(--r-xs); background: var(--c-surface-2); animation: driver-skeleton-pulse 1.4s ease-in-out infinite alternate; }
.portal-driver-body .driver-skeleton i:nth-child(1) { width: 32%; }
.portal-driver-body .driver-skeleton i:nth-child(2) { width: 76%; height: 26px; }
.portal-driver-body .driver-skeleton i:nth-child(3) { width: 92%; }
.portal-driver-body .driver-skeleton i:nth-child(4) { width: 58%; }
@keyframes driver-skeleton-pulse { to { opacity: .48; } }

.portal-driver-body #action-dialog[data-variant^="driver"] {
  width: min(720px, calc(100% - 32px));
  max-height: min(90dvh, 780px);
  overflow: hidden;
}
.portal-driver-body #action-dialog[data-variant="driver-inspection"] { width: min(780px, calc(100% - 32px)); }
.portal-driver-body #action-dialog[data-variant^="driver"] .dialog-form {
  max-height: min(90dvh, 780px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding: 0;
}
.portal-driver-body #action-dialog[data-variant^="driver"] .dialog-form > h2 { padding: 20px 22px 0; }
.portal-driver-body #action-dialog[data-variant^="driver"] .dialog-form > .muted { margin: 8px 0 0; padding: 0 22px 14px; border-bottom: 1px solid var(--c-border); }
.portal-driver-body #action-dialog[data-variant^="driver"] #action-fields { min-height: 0; overflow-y: auto; padding: 16px 22px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.portal-driver-body #action-dialog[data-variant="driver-inspection"] #action-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.portal-driver-body #action-dialog[data-variant^="driver"] #action-fields label { margin-top: 12px; }
.portal-driver-body #action-dialog[data-variant^="driver"] #action-fields label:first-child { margin-top: 0; }
.portal-driver-body #action-dialog[data-variant^="driver"] #action-message { min-height: 0; margin: 0; padding: 0 22px; }
.portal-driver-body #action-dialog[data-variant^="driver"] .dialog-actions { margin: 12px 0 0; padding: 14px 22px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--c-border); background: var(--c-bg-elevated); }
.portal-driver-body #action-dialog[data-variant^="driver"] .dialog-actions .button { min-height: 48px; min-width: 132px; }

@media (max-width: 1023px) {
  .portal-driver-body .portal-task-shell {
    grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) auto;
  }
  .portal-driver-body .portal-task-shell > .topbar {
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: max(6px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  .portal-driver-body .portal-task-shell > .content {
    padding: 14px max(18px, env(safe-area-inset-right)) 24px max(18px, env(safe-area-inset-left));
  }
  .portal-driver-body .portal-task-shell > .portal-mobile-nav {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
    background: var(--c-bg-elevated);
    backdrop-filter: none;
  }
  .portal-driver-body .driver-task-evidence-grid { grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); }
  .portal-driver-body .driver-safety-layout { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
  .portal-driver-body .toast {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    max-width: none;
    z-index: 50;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767px) {
  .portal-driver-body .driver-page { gap: 12px; }
  .portal-driver-body .driver-duty-head,
  .portal-driver-body .driver-focus-head,
  .portal-driver-body .driver-inspection-head,
  .portal-driver-body .driver-safety-head { align-items: flex-start; }
  .portal-driver-body .driver-focus-route { gap: 12px; }
  .portal-driver-body .driver-focus-route strong { font-size: 15px; }
  .portal-driver-body .driver-support-grid,
  .portal-driver-body .driver-task-evidence-grid,
  .portal-driver-body .driver-safety-layout,
  .portal-driver-body .driver-profile-layout,
  .portal-driver-body .driver-setup-grid,
  .portal-driver-body .driver-skeleton-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body .driver-profile-identity { grid-row: auto; }
  .portal-driver-body .driver-duty-overview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-driver-body .driver-next-action { grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body .driver-next-action-buttons { justify-content: stretch; }
  .portal-driver-body .driver-next-action-buttons .button { min-width: 0; flex: 1; }
  .portal-driver-body .driver-task-page > .driver-next-action,
  .portal-driver-body .driver-inspection-actions { position: static; box-shadow: none; }
  .portal-driver-body .driver-safety-head { display: grid; }
  .portal-driver-body .driver-home-empty,
  .portal-driver-body .driver-load-error { grid-template-columns: auto minmax(0, 1fr); }
  .portal-driver-body .driver-home-empty .button,
  .portal-driver-body .driver-load-error .button { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .portal-driver-body .portal-task-shell > .content { padding-top: 10px; }
  .portal-driver-body .driver-duty-head,
  .portal-driver-body .driver-focus-head,
  .portal-driver-body .driver-inspection-head,
  .portal-driver-body .driver-safety-head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 12px; }
  .portal-driver-body .driver-duty-head > div:last-child { width: 100%; justify-content: space-between; }
  .portal-driver-body .driver-focus-task,
  .portal-driver-body .driver-task-summary { padding: 17px 15px; }
  .portal-driver-body .driver-focus-head { gap: 10px; }
  .portal-driver-body .driver-focus-head > .status { width: max-content; }
  .portal-driver-body .driver-focus-route { grid-template-columns: minmax(0, 1fr); margin-top: 18px; padding: 15px 0; }
  .portal-driver-body .driver-focus-route > div:last-child { text-align: left; }
  .portal-driver-body .driver-focus-route i { transform: rotate(90deg); transform-origin: left center; }
  .portal-driver-body .driver-focus-facts { grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body .driver-next-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body .driver-next-action-buttons .button { width: 100%; min-height: 52px; }
  .portal-driver-body .driver-runtime-rail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-driver-body .driver-task-record-head { display: grid; gap: 8px; }
  .portal-driver-body .driver-task-record-head .status { width: max-content; }
  .portal-driver-body .driver-task-record-route { align-items: flex-start; flex-direction: column; gap: 3px; }
  .portal-driver-body .driver-task-record-route span { font-size: 10px; }
  .portal-driver-body .portal-capability-grid { gap: 5px; }
  .portal-driver-body .portal-capability-grid > div { min-height: 78px; }
  .portal-driver-body .portal-capability-grid b { font-size: 17px; }
  .portal-driver-body .driver-inspection-head { gap: 10px; }
  .portal-driver-body .driver-inspection-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body .driver-inspection-actions .button { width: 100%; min-width: 0; }
  .portal-driver-body .driver-safety-head > div:last-child { width: 100%; }
  .portal-driver-body .driver-safety-head > div:last-child span { flex: 1; text-align: center; }
  .portal-driver-body .driver-setup-hero { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 22px 18px; }
  .portal-driver-body .driver-setup-icon { width: 52px; height: 52px; }
  .portal-driver-body .driver-setup-icon svg { width: 25px; height: 25px; }
  .portal-driver-body .driver-setup-hero h1 { font-size: 23px; }
  .portal-driver-body .driver-setup-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body .driver-setup-actions .button { width: 100%; justify-content: center; }
  .portal-driver-body .driver-profile-person { grid-template-columns: 44px minmax(0, 1fr); }
  .portal-driver-body .driver-profile-person > .status { grid-column: 1 / -1; width: max-content; }
  .portal-driver-body .driver-profile-avatar { width: 44px; height: 44px; }
  .portal-driver-body .driver-profile-identity dl,
  .portal-driver-body .driver-duty-overview dl { grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body #action-dialog[data-variant^="driver"] {
    width: calc(100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)));
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  }
  .portal-driver-body #action-dialog[data-variant^="driver"] .dialog-form { max-height: inherit; }
  .portal-driver-body #action-dialog[data-variant="driver-inspection"] #action-fields { grid-template-columns: minmax(0, 1fr); }
  .portal-driver-body #action-dialog[data-variant^="driver"] .dialog-form > h2 { padding: 16px 16px 0; font-size: 18px; }
  .portal-driver-body #action-dialog[data-variant^="driver"] .dialog-form > .muted { padding: 0 16px 12px; }
  .portal-driver-body #action-dialog[data-variant^="driver"] #action-fields { padding: 12px 16px; }
  .portal-driver-body #action-dialog[data-variant^="driver"] #action-message { padding-inline: 16px; }
  .portal-driver-body #action-dialog[data-variant^="driver"] .dialog-actions { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  .portal-driver-body #action-dialog[data-variant^="driver"] .dialog-actions .button { width: 100%; }
}

@media (max-width: 390px) {
  .portal-driver-body .portal-task-shell > .content {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .portal-driver-body .portal-task-shell > .topbar .brand strong { display: none; }
  .portal-driver-body .portal-task-shell > .topbar .brand span:last-child { max-width: 112px; font-size: 15px; }
  .portal-driver-body .driver-task-history,
  .portal-driver-body .driver-task-progress,
  .portal-driver-body .driver-route-evidence,
  .portal-driver-body .driver-inspection-work,
  .portal-driver-body .driver-inspection-note,
  .portal-driver-body .driver-safety-section,
  .portal-driver-body .driver-schedule-panel,
  .portal-driver-body .driver-duty-overview,
  .portal-driver-body .driver-profile-identity,
  .portal-driver-body .driver-setup-guide,
  .portal-driver-body .driver-setup-account,
  .portal-driver-body .driver-runtime-rail { padding: 14px; }
  .portal-driver-body .driver-next-action { padding: 12px; }
  .portal-driver-body .driver-data-detail dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-contrast: more) {
  .portal-driver-body .driver-focus-task,
  .portal-driver-body .driver-task-summary,
  .portal-driver-body .driver-next-action,
  .portal-driver-body .driver-task-record,
  .portal-driver-body .driver-safety-section { border-width: 2px; }
  .portal-driver-body .driver-page .button:focus-visible,
  .portal-driver-body .driver-page a:focus-visible { outline-width: 3px; }
}

/* Dispatch wallboard mirrors the dense new-ui operations layout. */
.portal-screen-mode .portal-shell > .topbar { display: none; }
.portal-screen-mode .content {
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: var(--c-bg);
}
.screen-command {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.screen-command-header {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(210px, auto) minmax(360px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
}
.screen-command-title { min-width: 0; }
.screen-command-title > span { display: block; color: var(--c-muted); font-size: 9px; letter-spacing: .08em; }
.screen-command-title h1 { margin: 2px 0 0; color: var(--c-fg); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.screen-command-title p { margin: 2px 0 0; color: var(--c-subtle); font-size: 8px; }
.screen-mode-nav {
  min-width: 0;
  display: flex;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  overflow-x: auto;
}
.screen-mode-nav button {
  min-width: max-content;
  min-height: 28px;
  flex: 1 0 auto;
  padding: 5px 10px;
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  color: var(--c-muted);
  font: 500 10px/1.2 var(--font-sans);
}
.screen-mode-nav button[aria-pressed="true"] {
  background: var(--c-surface);
  color: var(--c-fg);
  box-shadow: none;
}
.screen-mode-nav button:focus-visible,
.screen-command-actions .button:focus-visible,
.screen-task:focus-visible {
  outline: 2px solid var(--c-info);
  outline-offset: 1px;
}
.screen-mode-nav button:disabled { background: transparent; color: var(--c-subtle); }
.screen-command-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.screen-command-clock { min-width: max-content; display: grid; text-align: right; }
.screen-command-clock time { color: var(--c-info); font: 500 12px/1.1 var(--font-mono); letter-spacing: .02em; }
.screen-command-clock span { margin-top: 2px; color: var(--c-subtle); font-size: 8px; }
.screen-command-health { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 9px; }
.screen-command-health > div { display: flex; align-items: center; gap: 5px; color: var(--c-muted); font-size: 9px; }
.screen-command-health small { grid-column: 1 / -1; color: var(--c-subtle); font-size: 8px; }
.screen-health-dot { width: 6px; height: 6px; border-width: 1px; }
.screen-refresh-state { min-height: 0; padding: 0; color: var(--c-subtle); font-size: 8px; white-space: nowrap; }
.screen-command-actions { display: flex; gap: 4px; }
.screen-command-actions .button {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 9px;
  white-space: nowrap;
}
.screen-priority-strip {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-danger) 38%, var(--c-border));
  background: color-mix(in oklab, var(--c-danger) 9%, var(--c-bg));
  color: var(--c-danger);
  font-size: 10px;
}
.screen-priority-strip b {
  padding: 2px 5px;
  border: 1px solid color-mix(in oklab, var(--c-danger) 52%, transparent);
  border-radius: var(--r-xs);
  font: 600 9px/1 var(--font-mono);
}
.screen-priority-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-kpis {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
}
.screen-kpis article {
  min-width: 0;
  min-height: 55px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 7px;
  padding: 7px 10px;
  border: 0;
  border-right: 1px solid var(--c-border);
  background: transparent;
}
.screen-kpis article:last-child { border-right: 0; }
.screen-kpis article::before { display: none; }
.screen-kpis span { grid-column: 1; grid-row: 1; color: var(--c-muted); font-size: 9px; }
.screen-kpis strong { grid-column: 2; grid-row: 1 / span 2; color: var(--c-fg); font: 500 20px/1 var(--font-mono); text-align: right; }
.screen-kpis article.risk strong { color: var(--c-danger); }
.screen-kpis small { grid-column: 1; grid-row: 2; color: var(--c-subtle); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-command-body { min-height: 0; flex: 1; overflow: hidden; }
.screen-command-columns,
.screen-command-columns.dispatch-mode,
.screen-command-columns.weather-mode {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) 270px;
  gap: 0;
}
.screen-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
.screen-center { border-right: 1px solid var(--c-border); border-left: 1px solid var(--c-border); }
.screen-panel {
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
}
.screen-panel.screen-primary { min-height: 100%; display: flex; flex-direction: column; }
.screen-panel-head { min-height: 22px; margin-bottom: 7px; }
.screen-panel-head h2 { color: var(--c-fg); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.screen-panel-head span { color: var(--c-muted); font-size: 8px; }
.screen-privacy-badge { padding: 2px 5px; border-color: var(--c-border); color: var(--c-info) !important; font-size: 8px !important; }
.screen-status-grid { gap: 3px; }
.screen-status-grid > div {
  padding: 5px 7px;
  border-color: var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-surface);
}
.screen-status-grid span { color: var(--c-muted); font-size: 9px; }
.screen-status-grid strong { color: var(--c-fg); font: 500 13px/1 var(--font-mono); }
.screen-focus-card {
  padding: 9px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.screen-focus-title span,
.screen-focus-card dt,
.screen-time-facts dt { color: var(--c-muted); font-size: 8px; }
.screen-focus-title strong { color: var(--c-fg); font-size: 12px; }
.screen-focus-card > p { margin: 6px 0; color: var(--c-muted); font-size: 9px; }
.screen-route-line { padding: 6px; border-color: var(--c-border); border-radius: var(--r-xs); background: var(--c-bg); font-size: 9px; }
.screen-focus-card dd,
.screen-time-facts dd { color: var(--c-fg); font-size: 9px; }
.screen-stage-rail { margin: 7px 0; background: var(--c-border); }
.screen-stage-rail > div { padding: 6px 3px; background: var(--c-bg); color: var(--c-muted); }
.screen-stage-rail span { width: 15px; height: 15px; border-color: var(--c-border-strong); font-size: 8px; }
.screen-stage-rail b { font-size: 8px; }
.screen-stage-rail .done { background: color-mix(in oklab, var(--c-primary) 8%, var(--c-bg)); color: var(--c-primary); }
.screen-stage-rail .current { background: color-mix(in oklab, var(--c-info) 10%, var(--c-bg)); color: var(--c-fg); box-shadow: inset 0 -2px var(--c-info); }
.screen-area-plot,
.screen-geo-empty {
  min-height: 170px;
  flex: 1;
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-bg);
  background-image: linear-gradient(color-mix(in oklab, var(--c-info) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--c-info) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
.screen-area-plot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.screen-area-plot figcaption { position: absolute; right: 7px; bottom: 6px; padding: 3px 5px; border-radius: var(--r-xs); background: color-mix(in oklab, var(--c-bg) 86%, transparent); color: var(--c-muted); font-size: 8px; }
.screen-geo-empty { display: grid; place-content: center; gap: 4px; padding: 16px; border-style: solid; text-align: center; }
.screen-geo-empty strong { color: var(--c-fg); font-size: 11px; }
.screen-geo-empty span { max-width: 42ch; color: var(--c-muted); font-size: 9px; }
.screen-task-list { gap: 3px; }
.screen-task {
  padding: 6px 7px;
  border-color: transparent;
  border-bottom-color: var(--c-border);
  border-radius: 0;
  background: transparent;
}
.screen-task:hover,
.screen-task.selected { border-color: var(--c-border-strong); background: var(--c-surface); }
.screen-task.selected { box-shadow: none; }
.screen-task strong { font-size: 10px; }
.screen-task .status,
.screen-task time,
.screen-task small { font-size: 8px; }
.screen-weather-facts { gap: 3px; }
.screen-weather-facts > div { padding: 6px 3px; border-color: var(--c-border); border-radius: var(--r-xs); background: var(--c-surface); }
.screen-weather-facts span { color: var(--c-muted); font-size: 8px; }
.screen-weather-facts strong { color: var(--c-fg); font: 500 14px/1 var(--font-mono); }
.screen-panel-note { color: var(--c-muted); font-size: 8px; }
.screen-alert-stack article {
  padding: 6px 7px;
  border: 1px solid color-mix(in oklab, var(--c-danger) 34%, var(--c-border));
  border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--c-danger) 7%, var(--c-bg));
}
.screen-alert-stack article.amber { border-color: color-mix(in oklab, var(--c-warn) 38%, var(--c-border)); background: color-mix(in oklab, var(--c-warn) 7%, var(--c-bg)); }
.screen-alert-stack strong { font-size: 9px; }
.screen-alert-stack span { color: var(--c-muted); font-size: 8px; }
.screen-capabilities { gap: 3px; }
.screen-capability { padding: 5px 6px; border-color: var(--c-border); border-radius: var(--r-xs); background: var(--c-surface); }
.screen-capability strong,
.screen-capability b { font-size: 8.5px; }
.screen-capability small { font-size: 7.5px; }
.screen-weather-full > .weather-panel { border: 0; border-radius: 0; background: transparent; }
.screen-command-timeline {
  min-height: 72px;
  padding: 6px 12px 7px;
  border: 0;
  border-top: 1px solid var(--c-border);
  border-radius: 0;
  background: var(--c-bg-elevated);
}
.screen-command-timeline .screen-panel-head { min-height: 16px; margin-bottom: 4px; }
.screen-timeline li { color: var(--c-muted); }
.screen-timeline b { color: var(--c-fg); font-size: 8px; }
.screen-timeline time { color: var(--c-muted); font-size: 7.5px; }

@media (max-width: 1180px) and (min-width: 901px) {
  .screen-command-header { grid-template-columns: minmax(180px, auto) minmax(330px, 1fr) auto; }
  .screen-command-meta { display: none; }
  .screen-command-columns,
  .screen-command-columns.dispatch-mode,
  .screen-command-columns.weather-mode { grid-template-columns: 190px minmax(360px, 1fr) 235px; }
  .screen-kpis small { display: none; }
}

@media (max-width: 900px) {
  .portal-screen-mode { overflow: auto; }
  .portal-screen-mode .content { height: auto; min-height: 100dvh; overflow: visible; }
  .screen-command { height: auto; }
  .screen-command-header { position: sticky; top: 0; z-index: 3; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .screen-command-title > span,
  .screen-command-title p,
  .screen-command-meta { display: none; }
  .screen-command-title h1 { font-size: 16px; }
  .screen-mode-nav { grid-column: 1 / -1; grid-row: 2; }
  .screen-mode-nav button { min-height: 44px; font-size: 12px; }
  .screen-mode-nav button:disabled { display: none; }
  .screen-command-actions { grid-column: 2; grid-row: 1; }
  .screen-command-actions .button { min-width: 44px; min-height: 44px; font-size: 11px; }
  .screen-command-actions a { display: none; }
  .screen-priority-strip { min-height: 38px; padding-inline: 10px; font-size: 11px; }
  .screen-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-kpis article { min-height: 62px; }
  .screen-kpis article:nth-child(2n) { border-right: 0; }
  .screen-kpis article.risk { grid-column: auto; }
  .screen-kpis strong { font-size: 22px; }
  .screen-kpis span { font-size: 12px; }
  .screen-kpis small { font-size: 11px; white-space: normal; }
  .screen-command-body { overflow: visible; }
  .screen-command-columns,
  .screen-command-columns.dispatch-mode,
  .screen-command-columns.weather-mode { height: auto; display: flex; flex-direction: column; }
  .screen-column { overflow: visible; }
  .screen-center { order: -1; border: 0; }
  .weather-mode .screen-center { order: 0; }
  .screen-panel.screen-primary { min-height: 430px; }
  .screen-area-plot,
  .screen-geo-empty { min-height: 270px; }
  .screen-task { min-height: 50px; }
  .screen-command-timeline { min-height: 0; }
  .screen-panel-head h2,
  .screen-focus-title strong,
  .screen-geo-empty strong,
  .screen-task strong,
  .screen-alert-stack strong { font-size: 12px; }
  .screen-panel-head span,
  .screen-priority-strip b,
  .screen-status-grid span,
  .screen-focus-title span,
  .screen-focus-card dt,
  .screen-time-facts dt,
  .screen-focus-card > p,
  .screen-route-line,
  .screen-focus-card dd,
  .screen-time-facts dd,
  .screen-stage-rail b,
  .screen-area-plot figcaption,
  .screen-geo-empty span,
  .screen-task .status,
  .screen-task time,
  .screen-task small,
  .screen-weather-facts span,
  .screen-panel-note,
  .screen-alert-stack span,
  .screen-capability strong,
  .screen-capability b,
  .screen-capability small,
  .screen-timeline b,
  .screen-timeline time { font-size: 11px; }
  .screen-privacy-badge { font-size: 11px !important; }
  .screen-stage-rail span { width: 22px; height: 22px; font-size: 11px; }
}

@media (max-width: 390px) {
  .portal-task-shell > .content { width: 100%; padding: 10px 16px 16px; }
  .portal-task-shell > .topbar { min-height: 56px; padding-inline: 16px; }
  .portal-task-shell > .portal-mobile-nav { min-height: 59px; }
  .screen-command-header { padding-inline: 8px; }
  .screen-command-title h1 { max-width: 180px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .screen-mode-nav { width: 100%; }
  .screen-mode-nav button { padding-inline: 8px; }
  .screen-kpis article { padding-inline: 8px; }
  .screen-kpis span { font-size: 12px; }
  .screen-kpis small { font-size: 11px; }
  .screen-panel { padding: 10px; }
  .screen-panel.screen-primary { min-height: 400px; }
  .screen-stage-rail { overflow-x: auto; grid-template-columns: repeat(6, minmax(72px, 1fr)); }
  .screen-command-timeline { padding-inline: 10px; }
}

/* Driver expense handoff stays in the task: financial results are server-owned. */
.driver-expense-panel { overflow-wrap: anywhere; scroll-margin-top: 80px; }
.driver-expense-panel p { line-height: 1.7; }
.driver-expense-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block: 12px; }
.driver-expense-panel .button { min-height: 44px; white-space: normal; }
.driver-expense-form { margin-block: 18px; padding-block: 18px; border-block: 1px solid var(--c-border); }
.driver-expense-form fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.driver-expense-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.driver-expense-fields label, .driver-expense-upload label { display: grid; gap: 8px; min-width: 0; }
.driver-expense-panel input, .driver-expense-panel select, .driver-expense-panel textarea { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
.driver-expense-panel textarea { min-height: 96px; resize: vertical; }
.driver-expense-wide { grid-column: 1 / -1; }
.driver-expense-error { color: var(--c-danger); padding-inline-start: 12px; border-inline-start: 3px solid currentColor; }
.driver-expense-list, .driver-expense-attachments { list-style: none; margin: 0; padding: 0; }
.driver-expense-list > li { padding-block: 20px; border-top: 1px solid var(--c-border); }
.driver-expense-row, .driver-expense-attachments > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.driver-expense-row h3 { margin: 0; font-variant-numeric: tabular-nums; }
.driver-expense-attachments > li { padding-block: 8px; }
.driver-expense-upload { margin-top: 12px; padding: 16px; background: var(--c-surface); border-radius: var(--r-sm); }
@media (max-width: 600px) {
  .driver-expense-fields { grid-template-columns: minmax(0, 1fr); }
  .driver-expense-panel .driver-section-heading { flex-wrap: wrap; }
  .driver-expense-upload { padding: 12px; }
}