:root {
  color-scheme: light;
  --ink-950: #111827;
  --ink-900: #15213a;
  --ink-800: #26344f;
  --ink-700: #3b4963;
  --ink-600: #5f6b80;
  --ink-500: #5f6b80;
  --ink-300: #cfd5df;
  --ink-200: #e1e5eb;
  --ink-100: #eef1f5;
  --ink-050: #f7f8fa;
  --paper: #ffffff;
  --map-paper: #edf1eb;
  --blue: #335cff;
  --blue-dark: #2345cf;
  --blue-soft: #eef1ff;
  --orange: #f28b2f;
  --orange-soft: #fff1e5;
  --green: #15846d;
  --cyan: #00a9c7;
  --cyan-soft: #e8f9fc;
  --red: #ce4156;
  --shadow-sm: 0 2px 10px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 14px 36px rgba(17, 24, 39, 0.16);
  --radius-sm: 7px;
  --radius-md: 11px;
  --header-height: 68px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-100);
  color: var(--ink-900);
}

body {
  min-width: 320px;
  font-size: 16px;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
canvas:focus-visible {
  outline: 3px solid rgba(51, 92, 255, 0.34);
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  background: var(--ink-950);
  color: white;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  height: 100%;
  display: grid;
  grid-template-rows: var(--header-height) auto minmax(0, 1fr);
}

.app-header {
  grid-row: 1;
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 24px);
  min-width: 0;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(90deg, rgba(0, 201, 224, 0.08) 1px, transparent 1px) 0 0 / 38px 100%,
    linear-gradient(110deg, #101a31 0%, #172744 58%, #10213d 100%);
  color: white;
  box-shadow: 0 5px 18px rgba(17, 24, 39, 0.18);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #5575ff, #087c9e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 0 18px rgba(49, 200, 224, 0.2);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.05em;
}

.brand-block h1 {
  margin: -1px 0 0;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.025em;
}

/* The county switcher sits outside .header-context on purpose: the context
   block collapses on narrow viewports, and the control that decides which
   county the workspace is showing must never be the thing that disappears. */
.county-switcher {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.county-switcher-label {
  color: #9aa7c2;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.county-switcher select {
  max-width: 210px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #edf1fa;
  font-size: 12px;
  font-weight: 650;
}

.county-switcher select:disabled {
  cursor: default;
  opacity: 0.62;
}

/* The closed select keeps light text for the dark header, but the browser
   draws the open list on its own light surface. Options inheriting that
   near-white text vanish there, so each option carries dark-on-white colours. */
.county-switcher select option {
  background-color: #ffffff;
  color: #111827;
  font-weight: 600;
}

.county-switcher.is-busy select {
  cursor: progress;
}

.county-switch-status {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: max-content;
  padding: 5px 9px;
  border: 1px solid rgba(87, 215, 235, 0.4);
  border-radius: 999px;
  background: #10213d;
  color: #d9f9ff;
  font-size: 11px;
  font-weight: 750;
  box-shadow: var(--shadow-sm);
}

.county-switch-status:empty { display: none; }

.eyebrow {
  margin: 0 0 4px;
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1;
}

.app-header .eyebrow {
  color: #9aa7c2;
}

.header-context {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  flex: 1;
}

.context-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.context-item span {
  color: #9aa7c2;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.context-item strong {
  max-width: 190px;
  overflow: hidden;
  color: #f7f9ff;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #dce2f0;
  font-size: 11px;
  font-weight: 700;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6bf5d;
  box-shadow: 0 0 0 3px rgba(246, 191, 93, 0.13);
}

.sync-status.connected .status-dot {
  background: #5fd2aa;
  box-shadow: 0 0 0 3px rgba(95, 210, 170, 0.13);
}

.sync-status.demo {
  border-color: rgba(249, 177, 83, 0.25);
  background: rgba(218, 127, 29, 0.14);
  color: #ffd9a6;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.routing-job {
  grid-row: 2;
  position: relative;
  z-index: 35;
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(230px, 1.2fr)
    minmax(260px, 1.7fr)
    minmax(330px, 1.3fr)
    auto;
  align-items: center;
  gap: 12px 18px;
  min-height: 70px;
  padding: 9px 18px;
  border-bottom: 1px solid #cbd3e1;
  background: #f7f9fc;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.09);
}

.routing-job[hidden] {
  display: none;
}

.routing-job[data-status="completed"] {
  border-bottom-color: rgba(21, 132, 109, 0.35);
  background: #f2faf7;
}

.routing-job[data-status="failed"],
.routing-job[data-status="cancelled"] {
  border-bottom-color: rgba(206, 65, 86, 0.3);
  background: #fff7f8;
}

.routing-job-state {
  min-width: 0;
}

.routing-job-state .eyebrow {
  overflow: hidden;
  margin-bottom: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-job-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.routing-job-title strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.routing-job-title span {
  color: var(--blue-dark);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
}

.routing-job-state > p:last-child {
  max-width: 460px;
  margin: 3px 0 0;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.routing-job-progress {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.routing-job-progress progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #dfe4ec;
  color: var(--blue);
  accent-color: var(--blue);
}

.routing-job-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #dfe4ec;
}

.routing-job-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #335cff, #627dff);
}

.routing-job-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #335cff, #627dff);
}

.routing-job[data-status="completed"] progress {
  color: var(--green);
  accent-color: var(--green);
}

.routing-job[data-status="completed"] progress::-webkit-progress-value,
.routing-job[data-status="completed"] progress::-moz-progress-bar {
  background: var(--green);
}

.routing-job-phase-detail {
  color: var(--ink-600);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.routing-job-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}

.routing-job-metrics > div {
  min-width: 0;
  padding-left: 11px;
  border-left: 1px solid var(--ink-200);
}

.routing-job-metrics dt {
  margin-bottom: 2px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.routing-job-metrics dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  min-width: 0;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.routing-job-metrics strong {
  color: var(--ink-900);
  font-size: 14px;
  min-width: 0;
}

.routing-job-metrics span {
  min-width: 0;
  color: var(--ink-600);
  font-size: 14px;
}

.routing-job-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.routing-job-actions .button {
  min-height: 31px;
  padding: 6px 10px;
  font-size: 10.5px;
}

.routing-job-actions .icon-button {
  width: 30px;
  height: 30px;
}


.button,
.icon-button,
.map-button,
.text-button {
  border: 0;
  color: inherit;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transition: background 130ms ease, border-color 130ms ease, transform 130ms ease;
}

.button:active {
  transform: translateY(1px);
}

/*
 * An author-declared display always beats the user-agent's [hidden] rule, so a
 * button that sets display: inline-flex or inline-grid stays on screen when the
 * markup or the script hides it. Every control the workspace shows and hides -
 * Cancel, Load plan, Dismiss, Sign out, Stop upload - is one of these, so the
 * attribute is honoured here once for the whole button system.
 */
.button[hidden],
.icon-button[hidden],
.text-button[hidden] {
  display: none;
}

.button.primary {
  min-height: 48px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: white;
  box-shadow: 0 4px 12px rgba(51, 92, 255, 0.25);
}

.button.primary:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.button.ghost {
  border: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-800);
}

.app-header .button.ghost {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #edf1fa;
}

.button.ghost:hover {
  background: var(--ink-050);
}

.app-header .button.ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.button.secondary {
  border: 1px solid var(--ink-200);
  background: var(--paper);
  color: var(--ink-800);
}

.button.secondary:hover {
  border-color: #b4bdca;
  background: var(--ink-050);
}

.full-width {
  width: 100%;
}

.workspace {
  --setup-panel-width: 660px;
  --route-panel-width: 312px;
  grid-row: 3;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--setup-panel-width)) minmax(468px, 1fr) minmax(0, var(--route-panel-width));
  overflow: hidden;
  transition: grid-template-columns 180ms ease;
}

.panel {
  position: relative;
  z-index: 20;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 3px 0 14px rgba(17, 24, 39, 0.07);
}

.route-panel {
  box-shadow: -3px 0 14px rgba(17, 24, 39, 0.07);
}

.setup-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.panel-edge-toggle {
  position: absolute;
  z-index: 46;
  top: 50%;
  width: 30px;
  height: 132px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #b7c0ce;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink-800);
  box-shadow: 0 5px 16px rgba(17, 24, 39, 0.18);
  font-size: 25px;
  font-weight: 760;
  line-height: 1;
  transition: left 180ms ease, right 180ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.panel-edge-toggle:hover {
  border-color: #8fa2e6;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.panel-edge-toggle:focus-visible {
  outline-offset: -4px;
}

.setup-edge-toggle {
  left: calc(var(--setup-panel-width) - 1px);
  border-radius: 0 10px 10px 0;
}

.route-edge-toggle {
  right: calc(var(--route-panel-width) - 1px);
  border-radius: 10px 0 0 10px;
}

@media (min-width: 1400px) {
  .setup-panel {
    grid-column: 1;
  }

  .map-workspace {
    grid-column: 2;
  }

  .route-panel {
    grid-column: 3;
  }

  .workspace.setup-panel-collapsed {
    --setup-panel-width: 0px;
  }

  .workspace.route-panel-collapsed {
    --route-panel-width: 0px;
  }

  .workspace.setup-panel-collapsed .setup-panel,
  .workspace.route-panel-collapsed .route-panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .setup-panel,
  .route-panel {
    transition: visibility 0s linear 0s, opacity 120ms ease;
  }

  .workspace.setup-panel-collapsed .setup-panel,
  .workspace.route-panel-collapsed .route-panel {
    transition: visibility 0s linear 120ms, opacity 120ms ease;
  }
}

.setup-tabs {
  grid-row: 2;
  position: relative;
  z-index: 3;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-050);
}

.setup-tab-button {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-600);
  font-size: 10.5px;
  font-weight: 780;
}

.setup-tab-button:hover {
  border-color: var(--ink-200);
  background: white;
  color: var(--ink-900);
}

.setup-tab-button[aria-selected="true"] {
  border-color: #aebbe8;
  background: white;
  color: var(--blue-dark);
  box-shadow: 0 2px 7px rgba(38, 52, 79, 0.09), inset 0 -3px 0 var(--blue);
}

.setup-tab-button:focus-visible {
  outline: 3px solid rgba(51, 92, 255, 0.28);
  outline-offset: 1px;
}

.setup-tab-button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-tab-tooltip {
  position: fixed;
  z-index: 120;
  max-width: 280px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #18233c;
  color: white;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.setup-tab-tooltip[hidden],
.setup-tab-panel[hidden] {
  display: none;
}

.setup-tab-viewport {
  grid-row: 4;
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.setup-panel > .panel-heading {
  grid-row: 1;
}

.routing-wizard-bar {
  grid-row: 3;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #b9c6f3;
  background: linear-gradient(135deg, #f5f7ff 0%, #edf1ff 100%);
}

.routing-wizard-bar[hidden],
.routing-wizard-footer[hidden] {
  display: none;
}

.routing-wizard-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 14px;
  box-shadow: 0 3px 9px rgba(51, 92, 255, 0.24);
}

.routing-wizard-bar .eyebrow {
  color: var(--blue-dark);
}

.routing-wizard-bar strong {
  display: block;
  margin-top: 1px;
  font-size: 12px;
}

#routingWizardStepHelp {
  margin: 2px 0 0;
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.35;
}

#routingWizardStepProgress {
  width: min(240px, 100%);
  height: 5px;
  display: block;
  margin-top: 7px;
  border: 0;
  accent-color: var(--blue);
}

.routing-wizard-footer {
  grid-row: 5;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--ink-200);
  background: white;
  box-shadow: 0 -5px 14px rgba(17, 24, 39, 0.06);
}

.routing-wizard-footer > div {
  min-width: 0;
  text-align: center;
}

#routingWizardStatus {
  display: block;
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 700;
}

.routing-wizard-error {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--red);
  font-size: 9.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-guide-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding-inline: 7px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
}

.setup-guide-button:hover {
  border-color: #aebbe8;
  background: var(--blue-soft);
  text-decoration: none;
}

.setup-tab-panel {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.panel-heading {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--ink-200);
  background:
    linear-gradient(90deg, rgba(0, 169, 199, 0.06) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(180deg, #ffffff, #f7fafb);
}

.panel-heading h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.panel-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9ba6b6 #eef1f5;
}

.panel-scroll::-webkit-scrollbar {
  width: 11px;
}

.panel-scroll::-webkit-scrollbar-track {
  background: var(--ink-100);
}

.panel-scroll::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid var(--ink-100);
  border-radius: 999px;
  background: #9ba6b6;
}

.panel-scroll::-webkit-scrollbar-thumb:hover {
  background: #778396;
}

.control-section,
.legend-section,
.selected-section,
.warning-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ink-200);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-heading-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.info-trigger {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  padding: 0;
  border: 1px solid #bdc6d3;
  border-radius: 50%;
  background: white;
  color: var(--blue-dark);
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.info-trigger:hover {
  border-color: #8fa2e6;
  background: var(--blue-soft);
}

.setup-guidance-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #c5cff3;
  background: #f7f8ff;
}

.setup-guidance-heading strong {
  font-size: 11.5px;
}

.setup-guidance-heading p {
  margin: 2px 0 0;
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.4;
}

.section-heading label,
.field-title,
.section-heading h3,
.control-section > label:not(.check-row),
.selected-section > label {
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 780;
}

.section-heading h3 {
  margin: 0;
}

.field-help,
.editor-help {
  margin: 3px 0 0;
  color: var(--ink-600);
  font-size: 11px;
  line-height: 1.4;
}

.text-button {
  min-height: 44px;
  padding: 2px 0;
  background: transparent;
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
}

.text-button:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

.field-label {
  display: block;
  margin: 10px 0 5px;
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
}

select,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: white;
  color: var(--ink-900);
  font-size: 14px;
}

select:hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover {
  border-color: #acb5c4;
}

.segmented {
  display: grid;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-100);
}

.segmented.two-up {
  grid-template-columns: repeat(2, 1fr);
}

.segmented.three-up {
  grid-template-columns: repeat(3, 1fr);
}

.segmented label {
  min-width: 0;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--ink-600);
  font-size: 11px;
  font-weight: 720;
  text-align: center;
}

.segmented input:checked + span {
  background: white;
  color: var(--ink-900);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.11);
}

.segmented input:focus-visible + span {
  outline: 3px solid rgba(51, 92, 255, 0.3);
}

.scope-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 7px;
  background: #f0f4f8;
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.4;
}

.note-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dce5ef;
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 800;
}

.inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.capacity-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.capacity-primary-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
}

.capacity-primary-grid .wide-field {
  grid-column: 1 / -1;
}

.capacity-time-help {
  margin-bottom: 10px;
}

.inline-fields label,
.capacity-grid label,
.details-content label,
#roadFields label,
dialog label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
}

.is-disabled > span {
  opacity: 0.5;
}

.capacity-overall {
  margin-top: 10px;
}

.capacity-overall label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
}

.capacity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.capacity-grid label > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.category-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.category-dot.improved {
  background: #5471ca;
}

.category-dot.vacant {
  background: #6b9978;
}

.category-dot.construction {
  background: #e58b2b;
}

.category-dot.commercial {
  background: #a25cbe;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  color: var(--ink-800);
}

.check-row.compact {
  margin-top: 0;
  padding: 9px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
}

.check-row input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.check-row span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.check-row strong {
  font-size: 11px;
}

.check-row small {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.count-pill {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px rgba(38, 52, 79, 0.06);
}

.count-pill.warning {
  background: var(--orange-soft);
  color: #ad5819;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}

.team-roster-controls { display: grid; gap: 8px; margin-top: 16px; }
.team-roster-controls label { display: grid; gap: 6px; }
.team-bulk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-bulk-actions button, .team-roster-controls input { min-height: 48px; min-width: 0; }
.team-roster-controls .field-help { margin: 0; }

.team-roster-notice {
  margin: 4px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--panel-soft, rgba(0, 0, 0, 0.04));
  color: var(--ink-soft, inherit);
  font-size: 12px;
}

.team-roster-notice.is-error {
  background: var(--red-soft, rgba(190, 30, 30, 0.08));
  color: var(--red, #a1262d);
}

.team-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 3px;
}

.team-row input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
}

.person-color {
  width: 9px;
  height: 25px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 4px;
  vertical-align: middle;
}

.team-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.team-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-copy small {
  color: var(--ink-500);
  font-size: 9.5px;
}

.team-copy .team-summary {
  overflow: hidden;
  color: var(--ink-700);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-edit-button {
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: white;
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 750;
}

.team-edit-button:hover {
  border-color: #aebbe8;
  background: var(--blue-soft);
}

.team-status {
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subsection {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

.apply-location-defaults {
  margin-top: 10px;
}

.location-workflow-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #bdc8f4;
  border-radius: 9px;
  background: #f4f6ff;
  color: var(--ink-800);
}

.location-workflow-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: white;
  color: var(--blue-dark);
  font-size: 17px;
  box-shadow: var(--shadow-sm);
}

.location-workflow-callout strong {
  font-size: 11px;
}

.location-workflow-callout p {
  margin: 3px 0 0;
  color: var(--ink-600);
  font-size: 10px;
  line-height: 1.45;
}

.appraiser-endpoint-summary {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.appraiser-endpoint-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: var(--ink-050);
}

.appraiser-endpoint-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-700);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appraiser-endpoint-row strong {
  color: var(--ink-900);
  font-size: 10px;
}

.appraiser-endpoint-row.is-missing {
  border-color: #efc58c;
  background: #fff9ef;
}

.appraiser-endpoint-row button {
  min-height: 27px;
  padding: 4px 7px;
  border: 1px solid var(--ink-300);
  border-radius: 6px;
  background: white;
  color: var(--blue-dark);
  font-size: 9.5px;
  font-weight: 750;
}

.grid-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 8px 0 9px;
}

.chip-label {
  display: block;
  margin: 10px 0 6px;
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 750;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
}

.grid-chip {
  min-height: 30px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: white;
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 780;
}

.grid-chip[aria-pressed="true"] {
  border-color: #879eff;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.category-chip {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  background: white;
  color: var(--ink-600);
  font-size: 9.5px;
  font-weight: 730;
}

.category-chip[aria-pressed="true"] {
  border-color: #9eacf2;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.methods-section {
  padding-top: 0;
}

details summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

details summary small {
  color: var(--ink-500);
  font-size: 10px;
}

details summary::after {
  content: "⌄";
  color: var(--ink-500);
  font-size: 16px;
}

details:not([open]) summary::after {
  transform: rotate(-90deg);
}

.details-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 9px;
  padding: 2px 0 12px;
}

.optimizer-callout {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #d6dcff;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f6ff, #eef1ff);
}

.optimizer-callout strong {
  color: #3047b4;
  font-size: 10px;
}

.optimizer-callout span {
  color: var(--ink-600);
  font-size: 9.5px;
  line-height: 1.4;
}

.details-content label:first-child,
.details-content label:nth-child(2) {
  grid-column: span 2;
}

.methods-section .details-content label {
  grid-column: auto;
}

.methods-section .details-content label:nth-of-type(1),
.methods-section .details-content label:nth-of-type(2) {
  grid-column: span 2;
}

.service-time-content label:first-child {
  grid-column: span 2;
}

.service-time-content label:nth-child(2) {
  grid-column: auto;
}

.method-note {
  grid-column: span 2;
  margin: 0;
  padding: 8px 9px;
  border-left: 3px solid #97a8fb;
  border-radius: 4px;
  background: var(--blue-soft);
  color: var(--ink-600);
  font-size: 9.5px;
  line-height: 1.45;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-600);
  font-size: 17px;
  line-height: 1;
}

.icon-button:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mobile-close,
.mobile-panel-toggle {
  display: none;
}

.map-workspace {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 169, 199, 0.05), transparent 44%),
    var(--map-paper);
}

.map-workspace::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background:
    linear-gradient(rgba(16, 58, 72, 0.11) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(16, 58, 72, 0.11) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(circle at center, transparent 28%, black 100%);
}

.gis-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.gis-map-loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #edf1eb;
  color: #15213a;
  font-size: 18px;
  font-weight: 650;
}

.gis-map-loading[hidden] { display: none; }

.gis-map-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #c9d4df;
  border-top-color: #1853a1;
  border-radius: 50%;
  animation: gis-map-spin 0.8s linear infinite;
}

@keyframes gis-map-spin { to { transform: rotate(360deg); } }

.routing-tools { position: relative; }

.routing-tools-summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  min-width: 48px;
  padding: 8px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: #ffffff;
  color: #15213a;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.routing-tools-summary::-webkit-details-marker { display: none; }

.routing-tools-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 10px;
  background: #ffffff;
  color: #0b0f19;
  border: 1px solid #c9d4df;
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(11, 15, 25, 0.28);
}

.routing-tools[open] > .routing-tools-menu { display: flex; }

.app-header .routing-tools-menu :is(.routing-tools-link, button.routing-tools-action) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: #ffffff;
  color: #15213a;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
}

.app-header .routing-tools-menu :is(.routing-tools-link, button.routing-tools-action):hover:enabled {
  background: #e8f1fb;
  color: #15213a;
}

.app-header .routing-tools-menu button.routing-tools-action:disabled {
  background: #ffffff;
  color: #4b5563;
  opacity: 1;
  cursor: not-allowed;
}

.app-header .routing-tools-menu button.routing-tools-action[hidden] {
  display: none;
}

#mapCanvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  background: transparent;
}

#routePlaybackCanvas {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#mapCanvas.is-dragging {
  cursor: grabbing;
}

#mapCanvas.editing-road {
  cursor: crosshair;
}

#mapCanvas.editing-grid {
  cursor: crosshair;
}

#mapCanvas.picking-location {
  cursor: crosshair;
}

.history-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: min(90vh, 860px);
}

.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.history-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-600);
}

.history-toolbar input,
.history-toolbar select {
  min-width: 140px;
}

.history-status,
.history-disclosure {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-700);
}

.history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}

.history-summary div {
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.history-summary span {
  display: block;
  font-size: 11px;
  color: var(--ink-600);
}

.history-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 180px;
}

.history-lists h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.map-context-menu {
  position: absolute;
  z-index: 40;
  width: min(265px, calc(100% - 20px));
  overflow: hidden;
  border: 1px solid var(--ink-300);
  border-radius: 9px;
  background: white;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.22);
}

.map-context-menu[hidden] {
  display: none;
}

.map-context-menu > p {
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-050);
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 700;
}

.map-context-menu > button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-800);
  text-align: left;
}

.map-context-menu > button[hidden] {
  display: none;
}

.map-context-menu > button:last-child {
  border-bottom: 0;
}

.map-context-menu > button:hover,
.map-context-menu > button:focus-visible {
  background: var(--blue-soft);
  color: var(--blue-dark);
  outline: 0;
}

.map-context-menu > button > span:first-child {
  color: var(--blue-dark);
  font-size: 17px;
  text-align: center;
}

.map-context-menu > button > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.map-context-menu strong {
  font-size: 10.5px;
}

.map-context-menu small {
  color: var(--ink-600);
  font-size: 9px;
}

.map-toolbar,
.map-summary,
.map-scale,
.map-instructions,
.map-mode-banner,
.map-attribution,
.layer-menu {
  position: absolute;
  z-index: 10;
}

.map-toolbar {
  top: 14px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(38, 52, 79, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.map-toolbar.top-left {
  left: 14px;
}

.map-toolbar.top-center {
  left: 50%;
  transform: translateX(-50%);
}

.map-toolbar.top-right {
  right: 14px;
}

.map-button {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--ink-200);
  background: transparent;
  color: var(--ink-800);
  font-size: 18px;
  font-weight: 650;
}

.map-button:last-child {
  border-right: 0;
}

.map-button.text {
  font-size: 10.5px;
  font-weight: 760;
}

.map-button:hover,
.map-button.is-active {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.filter-bar {
  padding: 3px;
}

.filter-bar label {
  display: flex;
}

.filter-bar select {
  width: auto;
  min-width: 100px;
  min-height: 30px;
  padding: 4px 25px 4px 8px;
  border: 0;
  background-color: transparent;
  font-size: 10.5px;
  font-weight: 710;
}

.toolbar-divider {
  width: 1px;
  margin: 4px 2px;
  background: var(--ink-200);
}

.layer-menu {
  top: 58px;
  right: 91px;
  min-width: 175px;
  padding: 11px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: white;
  box-shadow: var(--shadow-md);
}

.layer-menu p {
  margin: 0 0 7px;
  color: var(--ink-600);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.layer-menu label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 650;
}

.layer-menu input {
  accent-color: var(--blue);
}

.layer-menu .aerial-layer-option {
  min-height: 39px;
  align-items: flex-start;
  padding-block: 4px;
}

.layer-menu .parcel-layer-option {
  min-height: 43px;
  align-items: flex-start;
  padding-block: 4px;
}

/* parcel-label-visible-threshold. The visible-parcel count at or below which
   every parcel is labelled is the operator's own choice, so it sits with the
   other map-display controls in the Layers popup rather than in a settings
   page. It is a select, not a text box: the four values are the whole list. */
.layer-menu .parcel-label-threshold-option {
  min-height: 39px;
  justify-content: space-between;
  gap: 10px;
  padding-block: 4px;
}

.layer-menu select {
  width: auto;
  min-width: 72px;
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background-color: white;
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 700;
}

.aerial-layer-option > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.parcel-layer-option > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aerial-layer-option small {
  max-width: 150px;
  overflow: hidden;
  color: var(--ink-500);
  font-size: 8.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aerial-layer-option.is-unavailable {
  color: var(--ink-500);
}

.parcel-status-key {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
  color: var(--ink-500);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.2;
}

.parcel-status-key > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.parcel-status-swatch {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.parcel-status-swatch.visited {
  color: #d9364f;
  background: rgba(217, 54, 79, 0.2);
}

.parcel-status-swatch.unvisited {
  color: #159447;
  background: rgba(21, 148, 71, 0.2);
}

.map-attribution {
  right: 12px;
  bottom: 10px;
  max-width: min(55%, 360px);
  padding: 4px 7px;
  border: 1px solid rgba(38, 52, 79, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-600);
  font-size: 8.5px;
  font-weight: 650;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

.map-summary {
  left: 50%;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(38, 52, 79, 0.14);
  border-radius: 10px;
  background: rgba(21, 33, 58, 0.94);
  color: white;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.map-summary > div {
  min-width: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.map-summary > div:last-child {
  border: 0;
}

.map-summary span {
  color: #9eabc1;
  font-size: 8.5px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.map-summary strong {
  font-size: 13px;
}

.map-scale {
  right: 18px;
  bottom: 20px;
  width: 74px;
  min-width: 32px;
  max-width: 96px;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  text-shadow: none;
}

.map-scale span {
  height: 5px;
  display: block;
  border: solid var(--ink-700);
  border-width: 0 1px 1px;
}

.map-scale small {
  font-size: 14px;
  font-weight: 750;
}

.map-instructions {
  left: 16px;
  bottom: 17px;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  font-weight: 650;
  text-shadow: none;
}

.map-mode-banner {
  top: 62px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  transform: translateX(-50%);
  border: 1px solid #9eacf2;
  border-radius: 8px;
  background: #f6f7ff;
  color: #283d9d;
  box-shadow: var(--shadow-sm);
  font-size: 10.5px;
  font-weight: 700;
}

.map-mode-banner[hidden] {
  display: none;
}

.map-mode-banner button {
  min-height: 25px;
  border: 1px solid #bec8ff;
  border-radius: 6px;
  background: white;
  color: #3047b4;
  font-size: 10px;
  font-weight: 760;
}

.plan-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 18px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-050);
}

.route-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.plan-summary-strip > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-summary-strip strong {
  font-size: 14px;
}

.plan-summary-strip span {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 650;
}

.sticky-section-heading {
  position: sticky;
  z-index: 3;
  top: -16px;
  margin: -16px -18px 8px;
  padding: 15px 18px 8px;
  background: white;
}

.route-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.route-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-900);
  text-align: left;
}

.route-card:hover {
  background: var(--ink-050);
}

.route-card.is-selected {
  border-color: #ccd4ff;
  background: var(--blue-soft);
}

.route-card.is-hidden {
  opacity: 0.48;
}

.legend-line {
  width: 27px;
  height: 7px;
  border-radius: 4px;
  background-color: var(--route-color);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(255, 255, 255, 0.45) 4px, rgba(255, 255, 255, 0.45) 6px);
}

.route-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.route-card-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-card-copy span {
  color: var(--ink-500);
  font-size: 9.5px;
}

.visibility-button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-500);
  font-size: 14px;
}

.visibility-button:hover {
  background: white;
  color: var(--ink-900);
}

.selection-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px;
  border-radius: 8px;
  background: var(--ink-050);
}

.route-swatch {
  width: 9px;
  height: 37px;
  flex: 0 0 9px;
  border-radius: 5px;
  background: #1e88e5;
}

.selection-badge > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.selection-badge strong {
  font-size: 11px;
}

.selection-badge span {
  color: var(--ink-500);
  font-size: 9.5px;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}

.metric-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  border-right: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}

.metric-grid > div:nth-child(2n) {
  border-right: 0;
}

.metric-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.metric-grid span {
  color: var(--ink-500);
  font-size: 9px;
}

.metric-grid strong {
  font-size: 10px;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.action-grid.three {
  grid-template-columns: repeat(3, 1fr);
  margin: 8px 0;
}

.action-grid.three .button {
  padding-inline: 5px;
  font-size: 10px;
}

.route-playback {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
}

.route-playback-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--ink-700);
  font-size: 10px;
}

.route-playback-heading output {
  color: var(--ink-500);
  font-size: 9.5px;
  font-weight: 650;
  text-align: right;
}

.route-playback-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ink-200);
}

.route-playback-progress span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--route-playback-color, var(--blue));
  transition: width 100ms linear;
}

.route-playback-actions {
  margin-top: 8px;
}

.route-playback-actions .button {
  min-width: 0;
  white-space: nowrap;
}

.stop-card {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
}

.stop-number {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-800);
  color: white;
  font-size: 10px;
  font-weight: 800;
}

.stop-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.stop-card strong {
  font-size: 10.5px;
}

.stop-card span {
  overflow: hidden;
  color: var(--ink-500);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stop-card .prediction-copy {
  margin-top: 2px;
  color: #4e63ad;
  font-weight: 700;
}

.stop-card .road-access-copy {
  color: #a15c08;
  font-weight: 700;
}

.selected-section > label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-600);
  font-size: 9.5px;
}

.compound-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.road-editor {
  background: #fbfbff;
}

#roadFields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.warning-row {
  width: 100%;
  min-height: 47px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid var(--ink-200);
  background: transparent;
  color: var(--ink-900);
  text-align: left;
}

.warning-row:is(button) {
  cursor: pointer;
}

.warning-row:is(button):hover {
  color: var(--blue-dark);
}

.warning-row:is(button):focus-visible {
  border-radius: 5px;
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.warning-row.is-advisory {
  cursor: default;
}

.warning-row.is-error .warning-symbol {
  background: #fee2e2;
  color: #b42318;
}

.warning-symbol {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--orange-soft);
  color: #b25e1c;
  font-size: 11px;
  font-weight: 850;
}

.warning-row > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.warning-row strong {
  font-size: 12px;
  line-height: 1.35;
}

.warning-row small {
  color: var(--ink-700);
  font-size: 12px;
  line-height: 1.35;
}

.review-warning-list {
  display: grid;
}

.review-warning-label {
  margin: 9px 0 3px;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-warning-label:first-child {
  margin-top: 0;
}

.review-warning-empty {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--ink-200);
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.4;
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 326px;
  bottom: 82px;
  width: min(350px, calc(100vw - 30px));
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background: rgba(21, 33, 58, 0.96);
  color: white;
  box-shadow: var(--shadow-md);
  animation: toast-in 180ms ease both;
  max-height: 70dvh;
  overflow: auto;
  overflow-wrap: anywhere;
  pointer-events: auto;
}

.toast strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
}

.toast span {
  color: #c8d0df;
  font-size: 10px;
  line-height: 1.4;
}

.toast-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4f68db;
  font-size: 12px;
}

.toast[data-kind="error"] .toast-icon {
  background: #c93c4b;
}

.toast[data-kind="warning"] .toast-icon {
  background: var(--orange);
  color: var(--ink-950);
}

.client-error-panel {
  position: fixed;
  z-index: 101;
  right: 326px;
  bottom: 156px;
  width: min(470px, calc(100vw - 30px));
  max-height: min(460px, calc(100vh - 170px));
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(170, 38, 54, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink-900);
  box-shadow: 0 24px 64px rgba(17, 24, 39, 0.28);
}

.client-error-panel[hidden] {
  display: none;
}

.client-error-heading,
.client-error-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.client-error-heading h2 {
  margin: 1px 0 0;
  color: #9f2434;
  font-size: 15px;
  line-height: 1.3;
}

.client-error-summary {
  margin: 12px 0 0;
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.client-error-help {
  margin: 7px 0 10px;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.45;
}

.client-error-detail {
  min-height: 88px;
  max-height: 220px;
  margin: 0;
  overflow: auto;
  padding: 11px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: #f7f8fb;
  color: #27344d;
  font: 500 10.5px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
  tab-size: 2;
  user-select: text;
  white-space: pre-wrap;
}

.client-error-detail:focus {
  border-color: #5e72d8;
  outline: 3px solid rgba(74, 96, 205, 0.18);
}

.client-error-actions {
  align-items: center;
  margin-top: 11px;
}

.client-error-actions > span {
  min-height: 16px;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.4;
}

.client-error-actions .button {
  flex: 0 0 auto;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ONE scrollbar per dialog, never two. The UA stylesheet gives `dialog` its own
   `overflow: auto`, and `dialog form` below carries the same `max-height` as the
   dialog. The form's border box therefore cannot fit inside the dialog's CONTENT
   box -- the 1px border above and below is enough -- so the dialog overflowed by
   a few pixels and grew a second vertical bar beside the form's own.
   MEASURED on Manage router users, 2026-09-20, which is where the operator saw
   it: DIALOG scrollHeight 672 against clientHeight 666, a 2px bar, sitting next
   to the FORM's scrollHeight 867 against clientHeight 672 and its 15px bar.
   The form is the scroller and the dialog is the frame. Every one of the twelve
   dialogs in index.html wraps its content in a form, so nothing is clipped by
   this; a NEW dialog must keep that shape or its content will be. */
dialog {
  width: min(480px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: white;
  color: var(--ink-900);
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.28);
}

/* The open dialog is a COLUMN and the form is the one thing that stretches, so
   the form is sized BY the dialog instead of guessing the same max-height and
   missing by its border. That guess is what produced two bars, and clipping the
   overflow alone would have swapped them for lost content: measured, the form
   stood 6px proud of the dialog on a desktop and 30px on a 390px phone.
   `[open]` is load-bearing. The UA rule is `dialog:not([open]){display:none}`,
   so an unguarded `display:flex` here would make every closed dialog on the
   page visible. */
dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(2px);
}

dialog form {
  display: flex;
  /* No max-height of its own any more: `flex: 1 1 auto` with `min-height: 0`
     takes the dialog's content box exactly, and `min-height: 0` is what lets a
     flex item scroll instead of growing to fit its content. */
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 13px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  scrollbar-gutter: stable;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dialog-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.dialog-copy {
  margin: -3px 0 2px;
  color: var(--ink-600);
  font-size: 11px;
  line-height: 1.5;
}

dialog .field-help {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -20px -20px;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--ink-200);
  background: white;
}

dialog fieldset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}

dialog legend {
  padding: 0 5px;
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 750;
}

.override-fieldset .check-row {
  margin-top: 0;
}

.appraiser-location-explanation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid #bdc8f4;
  border-radius: 8px;
  background: #f4f6ff;
}

.appraiser-location-explanation strong {
  color: var(--ink-900);
  font-size: 10.5px;
}

.appraiser-location-explanation .button {
  min-height: 32px;
}

.location-manager-dialog {
  width: min(760px, calc(100vw - 28px));
}

.routing-wizard-review-dialog {
  width: min(680px, calc(100vw - 28px));
}

.session-expired-dialog {
  width: min(440px, calc(100vw - 28px));
}

.upload-dialog {
  width: min(620px, calc(100vw - 28px));
}

.upload-dialog input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--ink-300);
  border-radius: 8px;
  background: var(--ink-050);
  color: var(--ink-800);
  font-size: 11px;
}

.upload-file-list {
  display: grid;
  gap: 4px;
  max-height: 148px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upload-file-list:empty {
  display: none;
}

.upload-file-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: white;
}

.upload-file-list strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-file-list span {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.upload-validation {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(206, 65, 86, 0.3);
  border-radius: 8px;
  background: #fff7f8;
  color: #8f2135;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.45;
}

.upload-validation[data-kind="warning"] {
  border-color: rgba(218, 127, 29, 0.3);
  background: #fff9f0;
  color: #8a5312;
}

.upload-validation[hidden] {
  display: none;
}

.upload-job {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
}

.upload-job[hidden] {
  display: none;
}

.upload-job-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-job-label {
  display: block;
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.upload-job-heading strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-status {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink-200);
  color: var(--ink-800);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.upload-status[data-status="completed"] {
  background: rgba(21, 132, 109, 0.15);
  color: var(--green);
}

.upload-status[data-status="failed"],
.upload-status[data-status="cancelled"] {
  background: rgba(206, 65, 86, 0.15);
  color: var(--red);
}

.upload-job progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #dfe4ec;
  color: var(--blue);
  accent-color: var(--blue);
}

.upload-progress-detail,
.upload-job-execution,
.upload-job > p {
  margin: 0;
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.45;
}

.upload-job-execution {
  color: var(--ink-500);
  font-weight: 650;
}

.upload-job-execution[hidden] {
  display: none;
}

.routing-wizard-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.routing-wizard-review > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
}

.routing-wizard-review dt {
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.routing-wizard-review dd {
  margin: 3px 0 0;
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.routing-wizard-warnings {
  padding: 10px 12px;
  border: 1px solid #e6c98b;
  border-radius: 8px;
  background: #fffaf0;
}

.routing-wizard-warnings > strong {
  font-size: 10.5px;
}

.routing-wizard-warnings ul,
.help-dialog-points {
  margin: 7px 0 0;
  padding-left: 18px;
}

.routing-wizard-warnings li,
.help-dialog-points li {
  margin: 5px 0;
  color: var(--ink-700);
  font-size: 10.5px;
  line-height: 1.45;
}

.routing-wizard-review-actions {
  flex-wrap: wrap;
}

.help-dialog {
  width: min(540px, calc(100vw - 28px));
}

.help-dialog-manual-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--ink-700);
  font-size: 10px;
  line-height: 1.45;
}

.location-source-fieldset {
  padding: 8px;
}

.location-source-control {
  width: 100%;
}

.saved-location-section {
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: var(--ink-050);
}

.location-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.location-section-heading strong {
  font-size: 11px;
}

.saved-location-list {
  display: flex;
  max-height: 154px;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.saved-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: white;
}

.saved-location-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.saved-location-copy strong,
.saved-location-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-location-copy strong {
  font-size: 10.5px;
}

.saved-location-copy small {
  color: var(--ink-600);
  font-size: 9.5px;
}

.saved-location-actions {
  display: flex;
  gap: 5px;
}

.saved-location-actions button {
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid var(--ink-300);
  border-radius: 6px;
  background: white;
  color: var(--blue-dark);
  font-size: 9.5px;
  font-weight: 750;
}

.parcel-location-search {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.parcel-location-search[hidden] {
  display: none;
}

.parcel-location-search > label {
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
}

.parcel-search-controls {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(250px, 1.4fr);
  gap: 9px;
}

.parcel-search-controls label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
}

.map-location-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #bdc8f4;
  border-radius: 8px;
  background: #f4f6ff;
}

.map-location-source[hidden] {
  display: none;
}

.map-location-source strong {
  color: var(--ink-900);
  font-size: 10.5px;
}

.map-location-source p {
  margin: 3px 0 0;
  color: var(--ink-600);
  font-size: 9.5px;
  line-height: 1.4;
}

.map-location-source .button {
  min-height: 33px;
}

.location-coordinate-fields[hidden],
#locationCoordinateHelp[hidden] {
  display: none;
}

.parcel-search-results {
  max-height: 196px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: white;
  box-shadow: var(--shadow-md);
  scrollbar-gutter: stable;
}

.parcel-search-option {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid var(--ink-200);
  border-radius: 0;
  background: white;
  color: var(--ink-900);
  text-align: left;
}

.parcel-search-option:last-child {
  border-bottom: 0;
}

.parcel-search-option:hover,
.parcel-search-option[aria-selected="true"] {
  background: var(--blue-soft);
}

.parcel-search-option strong {
  font-size: 10.5px;
}

.parcel-search-option small {
  color: var(--ink-600);
  font-size: 9.5px;
}

.parcel-selection-status {
  min-height: 15px;
}

.location-appraiser-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.location-appraiser-option {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: white;
}

.location-appraiser-option input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  accent-color: var(--blue);
}

.location-appraiser-option span {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compareDialog {
  width: min(560px, calc(100vw - 28px));
}

#compareDialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
}

.comparison-list-actions,
.comparison-job-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comparison-list-actions {
  min-height: 22px;
  color: var(--ink-600);
  font-size: 10px;
}

.comparison-list-actions > span:last-child {
  display: flex;
  gap: 9px;
}

.comparison-config-list {
  display: flex;
  max-height: 214px;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.comparison-config-list[aria-busy="true"] {
  min-height: 52px;
  border-radius: 8px;
  background: linear-gradient(100deg, var(--ink-050) 30%, var(--ink-100) 50%, var(--ink-050) 70%);
  background-size: 240% 100%;
  animation: comparison-loading 1.4s ease infinite;
}

.comparison-empty {
  margin: 2px 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--ink-050);
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.45;
}

.comparison-job {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: var(--ink-050);
}

.comparison-job[hidden] {
  display: none;
}

.comparison-job-heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.comparison-job-label {
  color: var(--ink-600);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#comparisonJobId {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

.comparison-status[data-status="completed"],
.comparison-status[data-status="succeeded"] {
  background: #e4f4ef;
  color: var(--green);
}

.comparison-status[data-status="completed_with_errors"] {
  background: var(--orange-soft);
  color: #ad5819;
}

.comparison-status[data-status="failed"],
.comparison-status[data-status="cancelled"] {
  background: #fae8eb;
  color: var(--red);
}

#comparisonProgress {
  width: 100%;
  height: 7px;
  accent-color: var(--blue);
}

.comparison-progress-detail {
  margin: 0;
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

#comparisonJobMessage {
  margin: 0;
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.45;
}

.comparison-result {
  padding: 8px 9px;
  border-radius: 7px;
  background: white;
  color: var(--ink-700);
  font-size: 10px;
  line-height: 1.45;
}

.comparison-artifacts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.comparison-artifacts > strong {
  font-size: 10.5px;
}

.comparison-artifacts ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comparison-artifacts a {
  display: block;
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: white;
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-artifacts a:hover {
  border-color: #aebbe8;
  background: var(--blue-soft);
}

@keyframes comparison-loading {
  to {
    background-position-x: -240%;
  }
}

@media (max-width: 520px) {
  .comparison-artifacts ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1500px) {
  .workspace {
    --setup-panel-width: 600px;
    --route-panel-width: 292px;
    grid-template-columns: minmax(0, var(--setup-panel-width)) minmax(388px, 1fr) minmax(0, var(--route-panel-width));
  }

  .header-context .context-item:nth-child(2) {
    display: none;
  }

  .header-actions .button { padding-inline: 10px; }

  .brand-block { min-width: 170px; }

  .county-switcher-label { display: none; }

  .map-toolbar.top-center {
    top: 58px;
  }
}

@media (max-width: 1399px) {
  .routing-job {
    grid-template-columns: minmax(210px, 1fr) minmax(250px, 1.4fr) auto;
  }

  .routing-job-metrics {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .routing-job-actions {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .workspace {
    grid-template-columns: 1fr;
    /* The height is load-bearing, not cosmetic. Below this breakpoint .panel
       becomes position:absolute (just below), which takes both side panels out
       of flow and leaves nothing to give the workspace's implicit grid row a
       height. It collapsed to grid-template-rows: 0px / height: 0px, so every
       panel was present and visibility:visible at ZERO pixels tall and the
       operator saw a correct header above a blank page — on any window under
       1400px, which includes ordinary laptop and tablet-landscape widths.
       .app-shell reserves minmax(0, 1fr) as row 3. The shell children are
       explicitly pinned to their rows because a hidden route-job bar leaves
       auto-placement free to put .workspace in row 2 (auto) and the empty
       row 3 then consumes all remaining height. height:100% claims the pinned
       row and the explicit single row stops its contents auto-sizing to zero.
       Measured at 1240x655: 0px before, 480.875px after. */
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  .panel-edge-toggle {
    display: none;
  }

  .panel {
    position: absolute;
    z-index: 55;
    top: 0;
    bottom: 0;
    width: min(350px, calc(100vw - 34px));
    transition: transform 180ms ease;
    box-shadow: var(--shadow-md);
  }

  .setup-panel {
    left: 0;
    width: min(660px, calc(100vw - 34px));
    transform: translateX(-105%);
  }

  .route-panel {
    right: 0;
    transform: translateX(105%);
  }

  .panel.mobile-open {
    transform: translateX(0);
  }

  .mobile-panel-scrim {
    position: absolute;
    z-index: 52;
    inset: 0;
    display: block;
    width: 100%;
    min-height: 44px;
    border: 0;
    background: rgba(8, 18, 35, 0.54);
    backdrop-filter: blur(2px);
    cursor: pointer;
  }

  .mobile-panel-scrim[hidden] { display: none; }

  .mobile-close,
  .mobile-panel-toggle {
    display: inline-grid;
  }

  .mobile-panel-toggle {
    display: inline-flex;
  }

  .header-context {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .toast-region {
    right: 16px;
  }

  .client-error-panel {
    right: 16px;
  }

  .map-toolbar.top-center {
    top: 14px;
  }
}

@media (max-width: 650px) {
  :root {
    --header-height: 60px;
  }

  .app-header {
    gap: 8px;
    padding: 0 10px;
  }

  .routing-job {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 8px 10px;
  }

  .routing-job-state {
    grid-column: 1;
  }

  .routing-job-state > p:last-child {
    white-space: normal;
  }

  .routing-job-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .routing-job-metrics {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 6px;
  }

  .routing-job-metrics > div {
    padding-left: 7px;
  }

  .routing-job-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .routing-job-actions .button {
    min-width: 58px;
  }

  .brand-block {
    min-width: 0;
  }

  .brand-block .eyebrow,
  .brand-mark {
    display: none;
  }

  .brand-block h1 {
    font-size: 16px;
  }

  .header-actions {
    gap: 5px;
  }

  .header-actions .button {
    min-height: 35px;
    padding: 7px 9px;
  }

  #generateButton {
    font-size: 0;
  }

  #generateButton span,
  .guided-setup-button span {
    font-size: 15px;
  }

  .guided-setup-button {
    font-size: 0;
  }

  .map-toolbar.top-center {
    top: 58px;
  }

  .map-toolbar.top-right {
    top: 14px;
  }

  .map-toolbar.top-right { top: 14px; }

  .map-toolbar.top-right .map-button { min-width: 44px; }

  .setup-panel {
    width: calc(100vw - 16px);
  }

  .setup-tabs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78px, 1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .setup-tab-button {
    min-height: 50px;
    flex-direction: column;
    gap: 3px;
    padding: 5px 6px;
    font-size: 8.5px;
  }

  .routing-wizard-review {
    grid-template-columns: 1fr;
  }

  .routing-wizard-bar {
    padding-inline: 10px;
  }

  .routing-wizard-footer {
    gap: 6px;
    padding-inline: 10px;
  }

  .client-error-panel {
    right: 10px;
    bottom: 154px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 174px);
  }

  .layer-menu {
    top: 55px;
    right: 14px;
  }

  .map-summary {
    bottom: 16px;
    grid-template-columns: 1fr 1fr;
  }

  .map-summary > div {
    min-width: 95px;
    padding: 7px 10px;
  }

  .map-summary > div:nth-child(2) {
    border-right: 0;
  }

  .map-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .map-scale,
  .map-instructions {
    display: none;
  }

  dialog .inline-fields,
  .location-appraiser-list,
  .parcel-search-controls,
  .appraiser-location-explanation,
  .map-location-source {
    grid-template-columns: 1fr;
  }

  .saved-location-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .saved-location-actions {
    justify-content: flex-end;
  }
}

/* Interaction floor: these are the controls used in the live routing shell.
   Specific compact component rules can shape them, but may not reduce their
   usable touch box below WCAG's 44 CSS-pixel target. */
.app-shell button,
.app-shell summary,
.app-shell select,
.app-shell input[type="text"],
.app-shell input[type="search"],
.app-shell input[type="number"],
.app-shell input[type="date"] {
  min-height: 44px;
  font-size: max(14px, 0.875rem);
}

.app-shell .button.primary {
  min-height: 48px;
}

.app-shell .icon-button {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Sign-in page (login.html)

   Served to anonymous visitors, so it shares this stylesheet - and therefore
   the same tokens, radii and button styles as the application - without
   pulling in index.html or app.js. The served CSP is `style-src 'self'`, so
   login.html carries no inline style and every rule it needs lives here.
   --------------------------------------------------------------------------- */

.login-body {
  overflow: auto;
  background: linear-gradient(160deg, var(--ink-100) 0%, var(--blue-soft) 100%);
}

.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 32px 20px;
}

.login-card {
  width: 100%;
  max-width: 372px;
  padding: 28px 28px 22px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.login-brand {
  margin-bottom: 22px;
}

.login-mark {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.login-title {
  margin: 11px 0 4px;
  color: var(--ink-950);
  font-size: 21px;
  font-weight: 780;
  line-height: 1.2;
}

.login-subtitle {
  margin: 0;
  color: var(--ink-600);
  font-size: 12px;
  line-height: 1.45;
}

.login-input {
  width: 100%;
  min-height: 37px;
  padding: 8px 11px;
  border: 1px solid var(--ink-300);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 13px;
}

.login-input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.login-password-row {
  display: flex;
  gap: 7px;
  align-items: stretch;
}

.login-reveal {
  flex: 0 0 auto;
  min-width: 62px;
}

.login-error {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(206, 65, 86, 0.32);
  border-radius: 8px;
  background: rgba(206, 65, 86, 0.07);
  color: var(--red);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.login-submit {
  margin-top: 18px;
}

.login-note {
  margin-top: 14px;
  text-align: center;
}

/* Router user management (index.html #adminUsersDialog).
   A dense admin table built from the same tokens as the rest of the workspace:
   no new colour system, no new control shapes. The list scrolls inside the
   dialog so a 361-user roster never grows the page. */

.admin-users-dialog {
  width: min(900px, calc(100vw - 28px));
}

.tablet-claims-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tablet-claims-section[hidden],
.tablet-claim-empty[hidden],
.tablet-claim-list:empty,
.tablet-claims-section .button[hidden] {
  display: none;
}

.tablet-claim-status,
.tablet-claim-empty {
  margin: 0;
  color: var(--ink-600);
  font-size: 11px;
  line-height: 1.45;
}

.tablet-claim-status[data-tone="error"] {
  color: var(--red);
}

.tablet-claim-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tablet-claim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--paper);
}

.tablet-claim-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  color: var(--ink-600);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.tablet-claim-identity strong {
  color: var(--ink-900);
  font-size: 12px;
}

.tablet-claim-assign {
  min-height: 32px;
  padding: 7px 9px;
  white-space: nowrap;
}

.device-locations-section,
.device-location-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.device-locations-section[hidden],
#deviceLocationsLayerOption[hidden],
.device-location-empty[hidden],
.device-location-list:empty,
.device-locations-section .button[hidden] {
  display: none;
}

.device-location-status,
.device-location-empty {
  margin: 0;
  color: var(--ink-600);
  font-size: 11px;
  line-height: 1.45;
}

.device-location-status[data-tone="error"] {
  color: var(--red);
}

.device-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--paper);
}

.device-location-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-600);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.device-location-identity strong {
  color: var(--ink-900);
  font-size: 14px;
}

.device-location-state {
  align-self: start;
  padding: 3px 7px;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  color: var(--ink-700);
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
}

.device-location-state[data-state="online"] {
  border-color: var(--green);
}

.device-location-state[data-state="stale"] {
  border-color: var(--amber);
}

.device-location-state[data-state="offline"] {
  border-color: var(--red);
}

.device-location-show {
  grid-column: 1 / -1;
  min-height: 48px;
}

/* The user agent's [hidden] rule is display:none at the lowest specificity, so
   every class below that sets display has to restore it. Without this the
   one-time unlock code panel renders empty-but-visible the moment the dialog
   opens, and a panel for no selected user stays on screen. */
.admin-unlock-reveal[hidden],
.admin-user-panel[hidden],
.admin-users-notice[hidden],
.admin-users-status[hidden],
.admin-row-note[hidden],
.admin-user-empty[hidden] {
  display: none;
}

.admin-users-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
  align-items: end;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-200);
}

.admin-users-search,
.admin-users-picker {
  min-width: 0;
}

.admin-users-toolbar .count-pill {
  align-self: center;
  font-size: 14px;
  white-space: nowrap;
}

/* Every list in this dialog paints its own options. A native option otherwise
   inherits whatever the platform list surface uses, which is how the county
   picker's names became unreadable; dark text on white is set explicitly. */
.admin-users-dialog select,
.admin-users-dialog select option {
  background-color: #ffffff;
  color: #111827;
}

.admin-users-dialog select option {
  font-weight: 600;
}

.admin-users-dialog select:disabled {
  background-color: #eef1f5;
  color: #3b4963;
}

.admin-users-status {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.admin-users-status[data-tone="error"] {
  border-color: rgba(206, 65, 86, 0.32);
  background: #fdf1f3;
  color: #a3263a;
}

.admin-users-status[data-tone="muted"] {
  border-style: dashed;
  color: var(--ink-700);
}

.admin-users-status[data-tone="ok"] {
  border-color: rgba(21, 132, 109, 0.28);
  background: #eef8f5;
  color: #0f5f4f;
}

.admin-users-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e8cd9d;
  border-radius: 8px;
  background: #fff8e9;
  color: #6b4508;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.admin-users-retry {
  align-self: flex-start;
}

.admin-user-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-900);
}

.admin-user-panel[aria-busy="true"] {
  background: var(--ink-050);
}

.admin-user-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.admin-user-login {
  margin: 0;
  color: var(--ink-900);
  font-size: 18px;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.admin-user-name,
.admin-user-team {
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-county-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.admin-county-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-county-table caption {
  padding-bottom: 6px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 750;
  text-align: left;
}

.admin-county-table thead th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--paper);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 750;
  text-align: left;
}

.admin-county-table td,
.admin-county-table tbody th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}

.admin-county-name {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-county-project {
  display: block;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 500;
}

.admin-county-cell-label {
  display: none;
}

.admin-county-table select {
  min-width: 180px;
}

.admin-user-autonomy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

/* Mode and percent sit side by side while there is room and stack on a narrow
   canvas. The percent column is wide enough for three digits plus the spinner
   so a 200 is never clipped. */
.admin-autonomy-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  align-items: end;
  gap: 10px 14px;
}

@media (max-width: 720px) {
  .admin-autonomy-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

dialog label.admin-autonomy-mode,
dialog label.admin-autonomy-percent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-autonomy-controls > label > span {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.admin-autonomy-controls select,
.admin-autonomy-controls input {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--ink-300);
  border-radius: 8px;
  background-color: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 650;
}

.admin-autonomy-controls input:disabled,
.admin-autonomy-controls select:disabled {
  background-color: #eef1f5;
  color: #3b4963;
}

.admin-user-unlock,
.admin-user-permissions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

.admin-unlock-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 750;
}

.admin-unlock-state {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-unlock-state[data-set="true"] {
  background: #e3f3ee;
  color: #0f5f4f;
}

.admin-unlock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-row-note {
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.admin-row-note[data-tone="ok"] {
  color: #0f5f4f;
}

.admin-row-note[data-tone="error"] {
  color: #a3263a;
}

dialog label.admin-manage-users {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
}

.admin-manage-users input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
}

.admin-users-dialog .button.danger {
  border: 1px solid #8f1d31;
  background: #a3263a;
  color: #ffffff;
}

.admin-users-dialog .button.danger:hover:not(:disabled) {
  background: #8f1d31;
}

.admin-user-empty {
  margin: 0;
  padding: 14px 12px;
  border: 1px dashed var(--ink-300);
  border-radius: 8px;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

/* The one-time unlock code. It is the only value in this workspace that cannot
   be read back, so it is given the loudest surface in the dialog. */
.admin-unlock-reveal {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(242, 139, 47, 0.55);
  border-radius: 9px;
  background: var(--orange-soft);
}

.admin-unlock-reveal-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.admin-unlock-reveal-heading strong {
  color: #7a3c05;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-unlock-reveal-user {
  color: var(--ink-800);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-unlock-code {
  padding: 9px 12px;
  border: 1px solid rgba(242, 139, 47, 0.5);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-950);
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  user-select: all;
}

.admin-unlock-reveal-detail {
  margin: 0;
  color: #7a3c05;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.admin-unlock-reveal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-unlock-copy-status {
  margin: 0;
  min-height: 13px;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .admin-users-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-users-search,
  .admin-users-picker {
    grid-column: 1 / -1;
  }

  .admin-users-toolbar .count-pill {
    justify-self: start;
  }

  .admin-county-table thead {
    display: none;
  }

  .admin-county-table caption {
    display: block;
    width: 100%;
  }

  .admin-county-table,
  .admin-county-table tbody,
  .admin-county-table tr,
  .admin-county-table td,
  .admin-county-table tbody th {
    display: block;
    width: 100%;
  }

  .admin-county-table tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--ink-200);
  }

  .admin-county-table td,
  .admin-county-table tbody th {
    padding: 4px 0;
    border-bottom: 0;
  }

  .admin-county-cell-label {
    display: block;
    margin-bottom: 4px;
    color: var(--ink-700);
    font-size: 14px;
    font-weight: 700;
  }

  .admin-county-table select {
    min-width: 0;
  }

  .admin-unlock-actions,
  .admin-unlock-actions .button,
  .admin-user-permissions .button {
    width: 100%;
  }
}

/* Field publication: the route panel's published-route view and lock controls
   (index.html #fieldPublicationSection), and the publish-to-field dialog
   (#publishToFieldDialog). Built from the same tokens and control shapes as the
   rest of the workspace: no new colour system, no new button vocabulary. The
   panel section lives in a 312px column, so every row below is measured to fit
   it without wrapping a control onto its own line. */

/* An author-declared display beats the user-agent's [hidden] rule, so every
   class here that sets one has to restore it. Missing this renders a published
   fact list and a publish receipt as empty-but-visible boxes. */
.published-route-facts[hidden],
.publish-receipt[hidden] {
  display: none;
}

.field-publication-section {
  padding: 16px 18px;
  border-top: 3px solid rgba(0, 169, 199, 0.42);
  background: linear-gradient(180deg, var(--cyan-soft), var(--paper) 72px);
}

.publish-readiness {
  margin: 0;
  padding: 9px 18px;
  border-bottom: 1px solid var(--ink-200);
  background: #f4f7fa;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.publish-readiness[data-tone="ready"] {
  border-bottom-color: rgba(21, 132, 109, 0.25);
  background: #edf9f5;
  color: #0c6855;
}

.published-route-status {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.published-route-status[data-tone="error"] {
  border-color: rgba(206, 65, 86, 0.32);
  background: rgba(206, 65, 86, 0.07);
  color: var(--red);
}

.published-route-status[data-tone="muted"] {
  border-style: dashed;
  color: var(--ink-600);
}

.published-route-status[data-tone="ok"] {
  border-color: rgba(21, 132, 109, 0.28);
  background: rgba(21, 132, 109, 0.07);
  color: var(--green);
}

.published-route-facts {
  display: grid;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}

.published-route-facts > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ink-200);
}

.published-route-facts > div:last-child {
  border-bottom: 0;
}

.published-route-facts dt {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.published-route-facts dd {
  margin: 0;
  color: var(--ink-900);
  font-size: 10.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.route-lock-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* The county's routing limitation, under the lock it qualifies. Its controls
   keep the workspace minimums -- 48 CSS pixels tall, 14px text -- because this
   panel is not the 20px Data Entry bar. */
.route-autonomy-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

.route-autonomy-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.route-autonomy-controls label > span {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.route-autonomy-controls select,
.route-autonomy-controls input {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--ink-300);
  border-radius: 8px;
  background-color: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 650;
}

.route-autonomy-controls select option {
  background-color: #ffffff;
  color: #111827;
  font-weight: 600;
}

.route-autonomy-controls select:disabled,
.route-autonomy-controls input:disabled {
  background-color: #eef1f5;
  color: #3b4963;
}

.route-lock-window {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 8px;
}

.route-lock-window > span {
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 700;
}

.route-lock-window input {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.route-lock-controls .action-grid .button {
  min-height: 32px;
  padding-inline: 6px;
  font-size: 11px;
}

.route-lock-note {
  margin: 0;
  color: var(--ink-600);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
}

.route-lock-note[data-tone="ok"] {
  color: var(--green);
}

.route-lock-note[data-tone="error"] {
  color: var(--red);
}

.field-publication-section .full-width {
  margin-top: 9px;
  min-height: 32px;
}

/* The publish-to-field dialog. It is wider than the default dialog because a
   van binding is an appraiser and a vehicle side by side, and a day date is a
   date and its provenance side by side. */
.publish-field-dialog {
  width: min(720px, calc(100vw - 28px));
}

.publish-warning {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(242, 139, 47, 0.55);
  border-radius: 9px;
  background: var(--orange-soft);
  color: #8a4406;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.publish-plan-facts {
  display: grid;
  /* flex-shrink is pinned because `dialog form` is a column flex container and
     `overflow: hidden` sets this box's automatic minimum size to zero. Without
     it the whole strip is squeezed to its two borders -- 2px tall, its rows
     spilling out of a box the reader cannot see. The rounded corners need the
     clipping, so the shrink is what gives way. */
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}

.publish-plan-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-right: 1px solid var(--ink-200);
}

.publish-plan-facts > div:last-child {
  border-right: 0;
}

.publish-plan-facts dt {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.publish-plan-facts dd {
  margin: 0;
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.publish-day-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.publish-day-row {
  display: grid;
  grid-template-columns: 58px 158px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: var(--paper);
}

.publish-day-label {
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 780;
}

.publish-day-input {
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 11.5px;
  font-weight: 650;
}

.publish-day-note {
  color: var(--ink-500);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.publish-day-note[data-override="true"] {
  color: #ad5819;
}

.publish-day-clear {
  font-size: 10.5px;
}

.publish-day-empty,
.publish-van-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--ink-300);
  border-radius: 8px;
  color: var(--ink-600);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
}

.publish-van-status {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}

.publish-van-status[data-tone="ok"] {
  border-color: rgba(21, 132, 109, 0.28);
  background: rgba(21, 132, 109, 0.07);
  color: var(--green);
}

.publish-van-status[data-tone="warning"] {
  border-color: rgba(242, 139, 47, 0.5);
  background: var(--orange-soft);
  color: #8a4406;
}

.publish-van-retry {
  align-self: flex-start;
  min-height: 30px;
  font-size: 11px;
}

.publish-van-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.publish-van-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: var(--paper);
}

.publish-van-row:hover {
  border-color: #acb5c4;
}

.publish-van-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.publish-van-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 3px;
}

.publish-van-name {
  display: block;
  color: var(--ink-900);
  font-size: 11.5px;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.publish-van-detail {
  display: block;
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 650;
}

.publish-van-field {
  min-width: 0;
}

.publish-van-select,
.publish-van-input {
  width: 100%;
  min-height: 32px;
  padding: 4px 7px;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 11.5px;
  font-weight: 650;
}

.publish-validation {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(206, 65, 86, 0.32);
  border-radius: 8px;
  background: rgba(206, 65, 86, 0.07);
  color: var(--red);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.publish-receipt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(21, 132, 109, 0.32);
  border-radius: 9px;
  background: rgba(21, 132, 109, 0.06);
}

.publish-receipt > strong {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.publish-receipt-facts {
  display: grid;
  /* Same reason as .publish-plan-facts: this sits inside .publish-receipt,
     which is itself a column flex container. */
  flex: 0 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(21, 132, 109, 0.24);
  border-radius: 8px;
  background: var(--paper);
}

.publish-receipt-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-right: 1px solid rgba(21, 132, 109, 0.18);
  border-bottom: 1px solid rgba(21, 132, 109, 0.18);
}

.publish-receipt-facts dt {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.publish-receipt-facts dd {
  margin: 0;
  color: var(--ink-900);
  font-size: 11.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.publish-receipt-dates {
  margin: 0;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .publish-plan-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publish-plan-facts > div:nth-child(2n) {
    border-right: 0;
  }

  .publish-day-row {
    grid-template-columns: 58px minmax(0, 1fr);
    row-gap: 4px;
  }

  .publish-van-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Header action-bar width budget.

   .app-header is a single fixed-height flex row and .header-context is the only
   child of it that may shrink: it carries `flex: 1; min-width: 0`, while
   .brand-block, .county-switcher and .header-actions are all sized by their
   content. So every pixel the action bar grows is taken straight out of the
   configuration name, the work date and the signed-in operator name.

   Users and Publish to field were added to a bar that had no slack left. The
   whole header needs about 1750px to draw every label; measured in a browser
   before these rules, with those two buttons present:

     1600x1000  configuration name 59px of the 106px it needs, operator 31 of 48
     1440x900   configuration name 29px, operator name 15px -- one character
     1280x860   both 0px, and the "Live <county> data" pill drawn ON TOP of the
                Upload data button

   Hiding either new button restored all of it, so the bar is what has to give
   the width back. It does so in the order the commands are least needed as
   words, and only as far down as each width actually requires. Every button
   keeps its title, and font-size:0 leaves the label in the accessibility tree,
   so an icon-only command still announces and still explains itself on hover --
   the same idiom #generateButton and .guided-setup-button already use at 650px.

   There are two bands rather than one per button, and each breakpoint is placed
   well ABOVE the width the band still needs, because the case that actually
   breaks is the boundary -- one pixel above a breakpoint, where the narrower
   band has not applied yet. Requirements measured in a browser: ~1750px with no
   band, ~1568px under the first, ~1334px under both (~1238px once the 1500px
   rule above has also dropped the work date). Re-measured against these exact
   rules at 900, 1280, 1366, 1501, 1601, 1740 and 1801 -- the two breakpoint
   boundaries among them -- and at each one nothing in the header is clipped and
   no two header children overlap. Every width between those is covered by the
   same measurements, because widening the viewport inside a band only adds
   slack. A ninth button on this bar has to be measured the same way.
   --------------------------------------------------------------------------- */
@media (max-width: 1800px) {
  .app-header {
    gap: 16px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-actions .button {
    padding-inline: 10px;
  }

  /* Upload data and Users are the two rarest commands on the bar -- one is a
     dataset import, the other is admin-only -- so they are the first to stand
     on their glyph alone. */
  #uploadDataButton,
  #adminUsersButton {
    font-size: 0;
  }

  #uploadDataButton > span,
  #adminUsersButton > span {
    font-size: 15px;
  }
}

@media (max-width: 1600px) {
  #compareButton,
  #saveConfigButton,
  #publishToFieldButton,
  #routingWizardButton {
    font-size: 0;
  }

  #compareButton > span,
  #saveConfigButton > span,
  #publishToFieldButton > span,
  #routingWizardButton > span {
    font-size: 15px;
  }
}

/* Routing teams (index.html #teamsDialog and the Appraisers panel's
   #routingTeamSection). A team is one county's saved crew: the dialog is the
   CRUD surface for them, and the panel section is the plan's choice of which
   ones it routes from. Built from the same tokens and control shapes as the
   rest of the workspace -- no new colour system, no new button vocabulary. */

/* An author-declared display beats the user agent's [hidden] rule, so every
   class below that sets one has to restore it. Without these the team form,
   the delete warning and the membership editor all render empty-but-visible
   the moment the dialog opens, and a filtered-out row stays on screen. */
.team-form[hidden],
.team-delete-confirm[hidden],
.team-members[hidden],
.team-admin-list[hidden],
.team-admin-row[hidden],
.team-member-row[hidden],
.team-candidate-row[hidden],
.routing-team-choice[hidden] {
  display: none;
}

.teams-dialog {
  width: min(1080px, calc(100vw - 28px));
}

.teams-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ink-200);
}

.teams-filter {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.teams-filter > span {
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.teams-toolbar .count-pill {
  align-self: center;
  white-space: nowrap;
}

.teams-toolbar .button {
  min-height: 36px;
}

.teams-status,
.team-members-status,
.team-candidate-status,
.routing-team-status {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-050);
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.teams-status[data-tone="error"],
.team-members-status[data-tone="error"],
.team-candidate-status[data-tone="error"],
.routing-team-status[data-tone="error"] {
  border-color: rgba(206, 65, 86, 0.32);
  background: rgba(206, 65, 86, 0.07);
  color: var(--red);
}

.teams-status[data-tone="muted"],
.team-members-status[data-tone="muted"],
.team-candidate-status[data-tone="muted"],
.routing-team-status[data-tone="muted"] {
  border-style: dashed;
  color: var(--ink-600);
}

.teams-status[data-tone="ok"],
.team-members-status[data-tone="ok"],
.team-candidate-status[data-tone="ok"],
.routing-team-status[data-tone="ok"] {
  border-color: rgba(21, 132, 109, 0.28);
  background: rgba(21, 132, 109, 0.07);
  color: var(--green);
}

.teams-retry {
  align-self: flex-start;
  min-height: 32px;
}

.team-admin-list {
  display: flex;
  min-height: 0;
  max-height: min(38vh, 380px);
  flex: 1 0 auto;
  flex-direction: column;
  gap: 5px;
  padding-right: 3px;
}

.team-admin-list:empty {
  display: none;
}

.team-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--paper);
}

.team-admin-row:hover {
  border-color: #acb5c4;
}

.team-admin-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.team-admin-name {
  color: var(--ink-950);
  font-size: 12.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.team-admin-description {
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.team-admin-provenance {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 600;
}

.team-admin-size {
  align-self: center;
  white-space: nowrap;
}

.team-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.team-admin-actions .button {
  min-height: 30px;
}

.team-admin-note {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
}

.team-admin-note[data-tone="ok"] {
  color: var(--green);
}

.team-admin-note[data-tone="error"] {
  color: var(--red);
}

.team-admin-empty,
.team-member-empty,
.team-candidate-empty {
  margin: 0;
  padding: 14px 12px;
  border: 1px dashed var(--ink-300);
  border-radius: 8px;
  color: var(--ink-600);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.team-form,
.team-members {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: var(--ink-050);
}

.team-form > strong,
.team-members-heading > strong {
  color: var(--ink-950);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.team-form-status {
  margin: 0;
  min-height: 13px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
}

.team-form-status[data-tone="error"] {
  color: var(--red);
}

.team-form-actions,
.team-delete-actions {
  display: flex;
  gap: 7px;
}

.team-form-actions .button,
.team-delete-actions .button {
  min-height: 32px;
}

/* Deleting a team throws away every membership somebody assembled, so the
   warning is given the loudest surface in the dialog rather than a quiet line
   beside the button that caused it. */
.team-delete-confirm {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(242, 139, 47, 0.55);
  border-radius: 9px;
  background: var(--orange-soft);
}

.team-delete-confirm > strong {
  color: #8a4406;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.team-delete-confirm > p {
  margin: 0;
  color: var(--ink-800);
  font-size: 11.5px;
  font-weight: 620;
  line-height: 1.45;
}

.team-members-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.team-members-heading .count-pill {
  white-space: nowrap;
}

.team-members-heading .button {
  min-height: 30px;
  margin-left: auto;
}

.team-member-list {
  display: flex;
  max-height: min(24vh, 220px);
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.team-member-list:empty {
  display: none;
}

.team-member-row,
.team-candidate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--paper);
}

.team-member-identity,
.team-candidate-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.team-member-identity strong,
.team-candidate-identity strong {
  color: var(--ink-950);
  font-size: 11.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.team-member-login,
.team-candidate-login {
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 620;
}

.team-member-role,
.team-candidate-role {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 600;
}

.team-member-row .button,
.team-candidate-row .button {
  min-height: 28px;
}

.team-member-picker {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-200);
}

.team-picker-copy {
  margin: 0;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.45;
}

.team-member-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.team-member-picker-controls .count-pill {
  align-self: center;
  white-space: nowrap;
}

.team-candidate-list {
  display: flex;
  min-height: 0;
  max-height: min(30vh, 300px);
  flex-direction: column;
  gap: 4px;
  padding-right: 3px;
}

.team-candidate-list:empty {
  display: none;
}

/* The Appraisers panel's team selector. It sits in a 312px column, so every
   row is measured to fit without wrapping a control onto its own line. */
.routing-team-picker {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

.routing-team-choices {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0;
}

.routing-team-choices:empty {
  display: none;
}

.routing-team-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  background: var(--paper);
  cursor: pointer;
}

.routing-team-choice:hover {
  border-color: #acb5c4;
}

.routing-team-choice > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.routing-team-choice strong {
  color: var(--ink-950);
  font-size: 11.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.routing-team-choice small {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 600;
}

.routing-team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .teams-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .teams-toolbar .button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .team-admin-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-admin-actions {
    justify-content: flex-start;
  }

  .team-member-picker-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Task workspace. One configuration model, one visible task rail, and a map
   selection inspector. These scoped rules replace the former three-rail shell
   without changing the specialist dialog components or their permission gates. */
.task-shell {
  --task-panel-width: 380px;
  --selection-panel-width: 350px;
  --header-height: 72px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
}

.task-shell .app-header {
  min-height: 72px;
  flex-wrap: wrap;
  z-index: 200;
  gap: 20px;
  padding: 12px 22px;
  box-shadow: none;
  background: linear-gradient(110deg, #14233c, #1b2d49);
}

.task-shell .brand-block { min-width: 206px; }
.task-shell .brand-block h1 { font-size: 19px; line-height: 1.25; }
.task-shell .brand-block .eyebrow { font-size: 11px; }
.task-shell .header-context { display: flex; flex: 1 0 100%; order: 1; flex-wrap: wrap; gap: 12px 24px; }
.task-shell .header-context .context-item { display: flex; flex: 0 1 auto; }
.task-shell .context-item span { font-size: 14px; }
.task-shell .context-item strong { max-width: none; overflow: visible; font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.task-shell .county-switcher { min-width: 0; gap: 10px; }
.task-shell .county-switcher select { min-width: 164px; max-width: 235px; }
.task-shell .county-switcher-label { font-size: 14px; }
.task-shell .header-actions { flex-shrink: 0; margin-left: auto; }
.task-shell .header-actions .mobile-panel-toggle,
.task-shell .mobile-close { display: none !important; }
.task-shell .sync-status { font-size: 14px; padding: 8px 10px; }

.workflow-bar {
  grid-row: 2;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
  min-height: 72px;
  padding: 0 22px;
  gap: 18px;
  border-bottom: 1px solid var(--ink-200);
  background: white;
  z-index: 25;
}

.workflow-nav { display: flex; min-width: 0; gap: 8px; }
.workflow-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-600);
  text-align: left;
  font-weight: 750;
}
.workflow-button:hover { background: var(--ink-050); }
.workflow-button[aria-current="step"] { color: var(--blue-dark); }
.workflow-button[aria-current="step"]::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--blue);
}
.workflow-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--ink-050);
  font-size: 12px;
}
.workflow-button[aria-current="step"] .workflow-number { background: var(--blue); border-color: var(--blue); color: white; }
.workflow-button small { display: block; margin-top: 4px; color: var(--ink-600); font-size: 12px; font-weight: 450; }
.workflow-note { align-self: center; margin: 0; max-width: 265px; color: var(--ink-600); font-size: 13px; line-height: 1.45; }

.task-shell .routing-job { grid-row: 3; max-height: 36dvh; overflow: auto; }
.task-shell .workspace {
  --setup-panel-width: var(--task-panel-width);
  --route-panel-width: var(--task-panel-width);
  grid-row: 4;
  grid-template-columns: minmax(0, var(--task-panel-width)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.task-shell .workspace > .panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  transform: none;
  box-shadow: none;
  border-right: 1px solid var(--ink-200);
  opacity: 1;
  visibility: visible;
}
.task-shell .setup-panel { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; }
.task-shell .setup-panel > .panel-heading { grid-row: 1; }
.task-shell .setup-panel > .task-intro { grid-row: 2; }
.task-shell .setup-tabs { grid-row: 3; }
.task-shell .routing-wizard-bar { grid-row: 4; }
.task-shell .setup-tab-viewport { grid-row: 5; }
.task-shell .routing-wizard-footer { grid-row: 6; }
.task-shell .setup-action-footer { grid-row: 7; }
.task-shell .route-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.task-shell .field-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.task-shell .workspace > .panel[hidden],
.task-shell .workspace > .panel[inert][hidden] { display: none; }
.task-shell .workspace > .map-workspace { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.task-shell .workspace[data-workflow-stage="plan"].setup-panel-collapsed,
.task-shell .workspace[data-workflow-stage="review"].route-panel-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.task-shell .workspace[data-workflow-stage="plan"].setup-panel-collapsed .setup-panel,
.task-shell .workspace[data-workflow-stage="review"].route-panel-collapsed .route-panel { visibility: hidden; opacity: 0; pointer-events: none; }
.task-shell .panel-edge-toggle { display: none; width: 28px; height: 96px; top: 48%; z-index: 24; font-size: 22px; box-shadow: 0 3px 12px #15213a16; }
.task-shell .workspace[data-workflow-stage="plan"] .setup-edge-toggle,
.task-shell .workspace[data-workflow-stage="review"] .route-edge-toggle { display: grid; left: calc(var(--task-panel-width) - 1px); right: auto; border-radius: 0 10px 10px 0; }
.task-shell .workspace[data-workflow-stage="plan"].setup-panel-collapsed .setup-edge-toggle,
.task-shell .workspace[data-workflow-stage="review"].route-panel-collapsed .route-edge-toggle { left: 0; }
.task-shell .mobile-panel-scrim { display: none !important; }

.task-shell .panel-heading { padding: 20px 20px 13px; min-height: 78px; background: white; border-bottom: 0; }
.task-shell .panel-heading h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.035em; }
.task-shell .panel-heading .eyebrow { font-size: 11px; color: var(--ink-600); line-height: 1.4; }
.task-shell .heading-actions { gap: 5px; }
.plan-options { position: relative; flex: 0 0 auto; }
.plan-options > #morePlanButton { cursor: pointer; }
.plan-options.is-open > #morePlanButton { border-color: var(--blue); background: var(--blue-soft); }
.plan-options-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: white;
  box-shadow: var(--shadow-md);
}
.plan-options-menu[hidden] { display: none; }
.plan-options-label { margin: 0 4px 1px; color: var(--ink-600); font-size: 12px; font-weight: 750; }
.plan-options-menu .button { width: 100%; justify-content: flex-start; white-space: normal; }
.task-shell .setup-guide-button { white-space: nowrap; text-align: center; max-width: none; font-size: 14px; gap: 6px; }
.task-intro { margin: 0; padding: 0 20px 17px; color: var(--ink-600); font-size: 14px; line-height: 1.5; }
.task-shell .setup-tabs { padding: 7px 8px; gap: 3px; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ink-050); }
.task-shell .setup-tab-button { min-height: 72px; flex-direction: column; gap: 5px; padding: 7px 3px; font-size: 14px; }
.task-shell .setup-tab-button > span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.task-shell .panel-scroll { scrollbar-width: thin; scrollbar-color: #bcc6d5 transparent; }
.task-shell .control-section { padding: 20px; }
.task-shell .control-section + .control-section { border-top: 1px solid var(--ink-200); }
.task-shell .section-heading { gap: 10px; margin-bottom: 12px; }
.task-shell .section-heading > div { min-width: 0; }
.task-shell .section-heading > div:first-child { flex: 1 1 auto; }
.task-shell .section-heading-actions { flex: 0 0 auto; }
.task-shell .inline-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.task-shell .inline-fields > * { min-width: 0; }
.task-shell .capacity-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-shell .capacity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-shell .details-content { grid-template-columns: minmax(0, 1fr); }
.task-shell .details-content > *,
.task-shell .details-content label:first-child,
.task-shell .details-content label:nth-child(2) { grid-column: 1; min-width: 0; }
.task-shell .service-time-content > div { min-width: 0; }
.task-shell .details-content.single-column { display: grid; }
.task-shell .details-content.single-column .field-help { margin: 0; }
.task-shell .setup-guidance-heading { padding: 20px; }
.task-shell .setup-guidance-heading strong { font-size: 16px; }
.advanced-settings-group { margin-top: 18px; padding: 0 12px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fbfcfe; }
.advanced-settings-group > summary { padding: 12px 0; }
.advanced-settings-content { border-top: 1px solid var(--ink-200); padding-top: 14px; }
.advanced-settings-content .subsection { margin-top: 0; padding-top: 0; border-top: 0; }
.advanced-settings-content .segmented { margin-bottom: 14px; }
.task-shell .team-row { min-height: 72px; gap: 8px; }
.task-shell .team-copy strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.task-shell .team-copy small,
.task-shell .team-copy .team-summary { font-size: 13px; line-height: 1.45; white-space: normal; overflow: visible; }
.task-shell .team-status { font-size: 11px; }
.task-shell .appraiser-endpoint-row { gap: 8px; align-items: start; }
.task-shell .appraiser-endpoint-row span { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.task-shell .appraiser-endpoint-row strong { font-size: 13px; }
.task-shell .location-workflow-callout { padding: 12px; }
.task-shell .grid-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-shell .category-chip { white-space: normal; }
.task-shell .scope-note { font-size: 14px; line-height: 1.45; }
.task-shell .scope-note .note-icon { flex: 0 0 20px; }
.task-shell .segmented span { min-height: 48px; font-size: 14px; padding: 7px 5px; }
.task-shell .segmented label { display: flex; align-items: stretch; }
.task-shell .segmented label > span { width: 100%; }
.task-shell .check-row { min-height: 48px; gap: 10px; }
.task-shell .check-row > input { flex: 0 0 18px; }
.task-shell .check-row strong { font-size: 14px; }
.task-shell .check-row small { font-size: 14px; line-height: 1.45; }

.task-action-footer { padding: 16px 20px; border-top: 1px solid var(--ink-200); background: white; box-shadow: 0 -4px 14px #15213a05; }
.task-action-footer p { margin: 0; line-height: 1.45; font-size: 14px; }
.task-action-footer > .button.primary { width: 100%; margin-top: 12px; justify-content: center; }
.task-action-footer .task-action-help { margin-top: 9px; color: var(--ink-600); font-size: 13px; }
.task-shell :is(#generateButton, #saveConfigButton, #publishToFieldButton, #routingWizardButton, #compareButton, #uploadDataButton, #adminUsersButton) { font-size: 14px; }
.setup-save-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.setup-save-row > p { min-width: 0; font-size: 13px; color: var(--ink-600); }
.setup-save-row .button { flex: 0 0 auto; padding-inline: 10px; }
#setupReadiness { color: var(--ink-700); }
#setupReadinessFix { margin-top: 5px; }
#draftSetupStatus { color: var(--ink-700); font-weight: 650; margin-bottom: 8px; }
.draft-coverage-summary { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--ink-200); border-radius: 8px; color: var(--ink-700); background: var(--ink-050); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.task-action-footer .draft-coverage-summary { margin-bottom: 12px; }
.draft-coverage-summary[data-state="partial"], .draft-coverage-summary[data-state="unknown"] { border-color: #d9a656; background: #fff7e8; color: #704416; }
.task-shell .publish-readiness { margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-600); font-size: 14px; }
.task-shell .plan-summary-strip { padding: 14px 20px; gap: 10px; }
.task-shell .plan-summary-strip > div { flex-direction: column; gap: 4px; align-items: flex-start; }
.task-shell .plan-summary-strip strong { font-size: 22px; }
.task-shell .plan-summary-strip span { font-size: 13px; color: var(--ink-600); }
.task-shell .route-panel > .panel-scroll > section { padding-inline: 20px; }
.plan-disclosures { margin: 0 20px 16px; border: 1px solid #d9a656; border-radius: 8px; background: #fff7e8; color: #704416; }
.plan-disclosures[hidden] { display: none; }
.plan-disclosures summary { min-height: 48px; padding: 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.plan-disclosures ol { margin: 0; padding: 0 16px 16px 32px; }
.plan-disclosures li { padding-block: 6px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-shell .sticky-section-heading { top: -16px; margin-inline: -20px; padding-inline: 20px; }
.task-shell .route-legend { gap: 8px; }
.task-shell .route-card { display: flex; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--ink-200); border-radius: 10px; overflow: hidden; }
.task-shell .route-card.is-selected { border-color: #9db0f2; }
.route-select-button { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding: 13px 10px; border: 0; background: transparent; color: var(--ink-900); text-align: left; }
.route-select-button:hover { background: var(--blue-soft); }
.task-shell .route-card-copy { gap: 5px; }
.task-shell .route-card-copy strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.task-shell .route-card-copy span { font-size: 13px; color: var(--ink-600); line-height: 1.45; }
.task-shell .visibility-button { flex: 0 0 44px; align-self: center; width: 44px; height: 44px; margin-right: 4px; }
.task-shell .legend-line { flex: 0 0 24px; width: 24px; }
.task-shell .review-warning-list { font-size: 14px; }
.task-shell .review-warning-empty,
.task-shell .review-warning-label { color: var(--ink-600); font-size: 14px; line-height: 1.5; }
.task-shell .field-panel .panel-scroll > section { padding: 18px 20px; }
.task-shell .field-panel .section-heading { flex-wrap: wrap; }
.task-shell .field-panel .section-heading > div:first-child { flex: 1 1 175px; }
.task-shell .published-route-facts { grid-template-columns: 1fr; }
.task-shell .published-route-facts dd { overflow-wrap: anywhere; }
.task-shell .field-publication-section { border-top: 0; }

.task-shell .map-workspace::after { opacity: .12; pointer-events: none; }
.task-shell .map-toolbar.top-left { top: auto; bottom: 90px; left: 16px; flex-direction: column; }
.task-shell .map-toolbar.top-left .map-button { border-right: 0; border-bottom: 1px solid var(--ink-200); }
.task-shell .map-toolbar.top-left .map-button:last-child { border-bottom: 0; }
.task-shell .map-toolbar.top-right { top: 16px; right: 16px; }
.task-shell .map-toolbar.top-center { top: 16px; left: 16px; transform: none; max-width: calc(100% - 244px); }
.task-shell .filter-bar { padding: 5px; overflow: visible; }
.task-shell .filter-bar label { min-width: 0; align-items: center; }
.task-shell .filter-bar label:first-child { gap: 8px; }
.filter-label { font-size: 12px; font-weight: 700; color: var(--ink-600); padding-left: 6px; white-space: nowrap; }
.task-shell .filter-bar select { min-width: 0; max-width: 180px; font-size: 14px; }
.task-shell .map-button.text { font-size: 14px; }
.task-shell .layer-menu { top: 68px; right: 16px; max-width: min(310px, calc(100% - 32px)); max-height: calc(100% - 100px); overflow: auto; }
.task-shell .layer-menu label { min-height: 48px; font-size: 14px; }
.task-shell .layer-menu p { font-size: 12px; }
.task-shell .layer-menu select { min-height: 48px; font-size: 14px; padding: 6px 8px; }
.task-shell .aerial-layer-option small,
.task-shell .parcel-status-key { font-size: 12px; white-space: normal; max-width: none; }
.task-shell .map-summary { bottom: 50px; max-width: calc(100% - 140px); }
.task-shell .map-summary > div { min-width: 100px; padding: 12px 14px; }
.task-shell .map-summary span { font-size: 14px; }
.task-shell .map-summary strong { font-size: 17px; }
.task-shell .map-scale { left: 16px; right: auto; bottom: 50px; }
.task-shell .map-instructions { bottom: 8px; max-width: calc(100% - 400px); font-size: 14px; line-height: 1.35; }
.task-shell .map-mode-banner { top: 82px; max-width: calc(100% - 32px); font-size: 14px; }
.task-shell .map-mode-banner button { flex: 0 0 auto; font-size: 14px; }

.selection-inspector {
  position: absolute;
  z-index: 23;
  top: 88px;
  right: 16px;
  bottom: 26px;
  width: min(var(--selection-panel-width), calc(100% - 32px));
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid #cbd5e4;
  border-radius: 12px;
  background: white;
  box-shadow: 0 12px 35px #15213a26;
}
.selection-inspector[hidden] { display: none; }
.selection-inspector [hidden] { display: none !important; }
.selection-inspector-toolbar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 18px; border-bottom: 1px solid var(--ink-200); background: white; color: var(--ink-600); font-size: 13px; font-weight: 650; }
.task-shell .selection-inspector .selected-section { padding: 18px; border-bottom: 0; }
.task-shell .selection-inspector .selected-section h3 { font-size: 20px; line-height: 1.3; }
.task-shell .selection-inspector .selection-badge { padding: 12px; }
.task-shell .selection-inspector .selection-badge strong { font-size: 14px; }
.task-shell .selection-inspector .selection-badge span { font-size: 13px; line-height: 1.45; }
.task-shell .selection-inspector .metric-grid { gap: 9px; }
.task-shell .selection-inspector .metric-grid span { font-size: 13px; }
.task-shell .selection-inspector .metric-grid strong { font-size: 16px; }
.task-shell .selection-inspector .action-grid { gap: 8px; }
.task-shell .selection-inspector .action-grid.three { grid-template-columns: 1fr; }
.task-shell .selection-inspector .route-playback-actions { grid-template-columns: 1fr 1fr 1fr; }
.task-shell .selection-inspector .route-playback-actions .button { padding-inline: 7px; }
.stop-navigator { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.stop-navigator > span { grid-row: 1; grid-column: 1 / -1; color: var(--ink-600); font-size: 14px; line-height: 1.45; }
.stop-navigator .button { font-size: 14px; padding-inline: 8px; }
.task-shell .stop-card { gap: 10px; }
.task-shell .stop-card strong { font-size: 14px; overflow-wrap: anywhere; }
.task-shell .stop-card span { font-size: 14px; line-height: 1.45; }

/* Operational copy and primary targets are consistent in task rails, existing
   dialogs and sign-in. Metadata can stay smaller; useful help cannot. */
.task-shell :is(.field-help, .editor-help, .field-label, .field-title, .method-note, .scope-note, .prediction-copy, .road-access-copy, .routing-team-status, .published-route-status, .route-lock-note, .route-lock-window > span, .tablet-claim-status, .device-location-status, .device-location-empty, .review-warning-empty),
.task-shell .control-section label > span,
.task-shell .section-heading label,
.task-shell .section-heading h3,
.task-shell .setup-guidance-heading p,
.task-shell .location-workflow-callout p,
.task-shell .location-workflow-callout strong,
.task-shell details summary small,
dialog :is(.field-help, .dialog-copy, .method-note, .publish-day-empty, .publish-van-empty, .publish-warning, .publish-validation, .publish-van-status, .location-help, .help-copy),
dialog label > span,
dialog label > small { font-size: 14px; line-height: 1.5; }
/* Counts, saved-state provenance and operational facts remain readable beside
   primary controls. Technical identifiers and legal attribution stay secondary. */
.task-shell :is(.workflow-button small, .workflow-note, .county-switcher-label, .task-action-help, #setupSaveStatus, .plan-summary-strip span, .route-card-copy span, .selection-inspector-toolbar, .selection-badge span, .metric-grid span, .route-playback-heading strong, .route-playback-heading output, #reviewWarningCount, #reviewWarningList strong, #reviewWarningList small, #publishedRouteLockPill, .published-route-facts dt, .published-route-facts dd, #tabletClaimCount, #deviceLocationCount, .tablet-claim-empty),
dialog :is(legend, .publish-day-label, .publish-day-note, .publish-van-name, .publish-van-detail, .publish-plan-facts dt, .publish-plan-facts dd, #comparisonConfigurationCount),
.toast strong,
.toast span { font-size: 14px; line-height: 1.45; }
.task-shell .published-route-facts > div { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); }
.task-shell .published-route-facts dt,
.task-shell .map-summary span { overflow-wrap: anywhere; }
.task-shell .route-playback-heading { flex-wrap: wrap; }
body :is(button, summary, select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], input[type="password"], input[type="email"]) { min-height: 48px !important; }
body button { min-width: 48px !important; }
body label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 48px; }
body :is(button, select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], input[type="password"], input[type="email"]) { font-size: 14px !important; }
body :is(.icon-button, .map-button:not(.text), .panel-edge-toggle) { font-size: 20px !important; }
body .button.primary { min-height: 48px !important; }
body :is(.icon-button, .info-trigger) { min-width: 48px; width: 48px; height: 48px; flex-basis: 48px; }
body input[type="file"] { min-height: 48px; font-size: 14px !important; }
body input[type="file"]::file-selector-button { min-height: 44px; font: inherit; margin-right: 10px; }
body input:is([type="checkbox"], [type="radio"]) { font-size: 14px; }
dialog .check-row,
dialog .check-row strong,
dialog .check-row small { font-size: 14px; line-height: 1.5; }
.login-subtitle,
.login-error,
.login-note { font-size: 14px; line-height: 1.5; }
dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
dialog .button { font-size: 14px; }
dialog .publish-day-list input,
dialog .publish-van-list select { font-size: 14px; }
dialog .publish-day-row,
dialog .publish-van-row { min-width: 0; }
.publish-draft-warning { padding: 13px 15px; border: 1px solid #e8cd9d; border-radius: 9px; background: #fff8e9; color: #80540d; font-size: 14px; line-height: 1.5; }
.publish-earlier-draft { flex: 0 0 auto; flex-direction: row; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ink-200); border-radius: 9px; background: var(--ink-050); }
.publish-earlier-draft[hidden] { display: none; }
.publish-earlier-draft input { flex: 0 0 18px; }
.publish-earlier-draft span { min-width: 0; }
.publish-earlier-draft strong,
.publish-earlier-draft small { font-size: 14px; line-height: 1.45; }

@media (max-width: 1500px) and (min-width: 1024px) {
  .task-shell .filter-label { display: none; }
  .task-shell .map-summary { left: auto; right: 16px; transform: none; }
  .task-shell .map-summary > div { min-width: 82px; padding: 10px; }
}

@media (max-width: 1200px) and (min-width: 1024px) {
  .task-shell { --task-panel-width: 356px; --selection-panel-width: 340px; }
  .task-shell .header-context { display: none; }
  .workflow-note { display: none; }
  .task-shell .map-toolbar.top-center { top: 76px; max-width: calc(100% - 32px); }
  .task-shell .selection-inspector { top: 140px; }
  .task-shell .map-mode-banner { top: 136px; }
  .task-shell .map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(100% - 95px); }
  .task-shell .map-summary > div:nth-child(2) { border-right: 0; }
  .task-shell .map-summary > div:nth-child(-n + 2) { border-bottom: 1px solid #ffffff24; }
}

@media (max-width: 1023px) {
  html, body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .task-shell { min-height: 100dvh; height: auto; grid-template-rows: auto auto auto auto; }
  .task-shell .app-header { min-height: 68px; padding: 12px 18px; gap: 16px; }
  .task-shell .header-context { display: none; }
  .workflow-bar { padding-inline: 10px; min-height: 68px; }
  .workflow-nav { width: 100%; justify-content: space-between; gap: 0; }
  .workflow-button { flex: 1; justify-content: center; padding-inline: 12px; }
  .workflow-note { display: none; }
  .task-shell .workspace,
  .task-shell .workspace[data-workflow-stage="plan"].setup-panel-collapsed,
  .task-shell .workspace[data-workflow-stage="review"].route-panel-collapsed {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .task-shell .workspace > .panel,
  .task-shell .workspace[data-workflow-stage="plan"].setup-panel-collapsed .setup-panel,
  .task-shell .workspace[data-workflow-stage="review"].route-panel-collapsed .route-panel {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ink-200);
    order: 1;
    overflow: visible;
  }
  .task-shell .workspace > .map-workspace { order: 2; height: 620px; min-height: 620px; width: 100%; flex: none; }
  .task-shell .panel-edge-toggle { display: none !important; }
  .task-shell .panel-scroll,
  .task-shell .setup-tab-viewport { overflow: visible; min-height: 0; }
  .task-shell .setup-tabs { grid-auto-flow: initial; grid-auto-columns: initial; overflow: visible; }
  .task-shell .setup-tab-button { min-height: 58px; flex-direction: row; gap: 7px; }
  .task-shell .panel-heading { padding: 22px 24px 14px; }
  .task-intro { padding-inline: 24px; max-width: 760px; }
  .task-shell .control-section,
  .task-shell .setup-guidance-heading { padding: 22px 24px; }
  .task-shell .setup-action-footer,
  .task-shell .review-action-footer,
  .task-shell .field-action-footer { padding: 18px 24px; }
  .task-shell .setup-save-row { justify-content: flex-start; gap: 14px; }
  .task-shell .task-action-footer > .button.primary { max-width: 450px; }
  .task-shell .capacity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-shell .details-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-shell .details-content > * { grid-column: auto; }
  .task-shell .details-content label:first-child,
  .task-shell .details-content label:nth-child(2),
  .task-shell .details-content > p { grid-column: 1 / -1; }
  .task-shell .details-content.single-column { grid-template-columns: 1fr; }
  .task-shell .map-toolbar.top-center { max-width: calc(100% - 244px); }
  .task-shell .filter-label { display: none; }
  .task-shell .selection-inspector { top: 86px; max-height: 505px; }
  .task-shell .map-summary { max-width: calc(100% - 125px); }
  .task-shell .routing-job { max-height: none; overflow: visible; }
}

@media (max-width: 650px) {
  .task-shell .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px 16px; }
  .task-shell .brand-block { min-width: 0; grid-column: 1; grid-row: 1; gap: 9px; }
  .task-shell .brand-mark { display: grid; width: 32px; height: 32px; flex: 0 0 32px; }
  .task-shell .brand-block h1 { font-size: 17px; }
  .task-shell .brand-block .eyebrow { display: block; font-size: 10px; }
  .task-shell .header-actions { grid-column: 2; grid-row: 1; margin-left: 0; }
  .task-shell .county-switcher { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  .task-shell .county-switcher-label { display: block; min-width: 54px; }
  .task-shell .county-switcher select { min-width: 0; width: 100%; max-width: none; flex: 1; }
  .task-shell .county-switch-status { z-index: 50; top: calc(100% + 5px); max-width: calc(100vw - 32px); min-width: 0; white-space: normal; }
  .workflow-bar { padding: 0 6px; min-height: 74px; }
  .workflow-button { flex-direction: column; gap: 5px; padding: 10px 5px; text-align: center; justify-content: flex-start; font-size: 14px; }
  .workflow-button > span:last-child { min-width: 0; line-height: 1.3; }
  .workflow-button small { display: none; }
  .workflow-number { width: 23px; height: 23px; flex-basis: 23px; font-size: 11px; }
  .workflow-button[aria-current="step"]::after { left: 5px; right: 5px; }
  .task-shell .setup-tab-button { flex-direction: column; min-height: 74px; font-size: 14px; padding-inline: 2px; }
  .task-shell .panel-heading { padding: 22px 20px 14px; }
  .task-intro { padding-inline: 20px; }
  .task-shell .control-section,
  .task-shell .setup-guidance-heading { padding: 20px; }
  .task-shell .task-action-footer { padding: 16px 20px; }
  .task-shell .setup-save-row { justify-content: space-between; }
  .task-shell .task-action-footer > .button.primary { max-width: none; }
  .task-shell .capacity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-shell .details-content { grid-template-columns: 1fr; }
  .task-shell .details-content > * { grid-column: 1; }
  .task-shell .inline-fields { gap: 10px; }
  .task-shell .map-workspace { height: 610px !important; min-height: 610px !important; }
  .task-shell .map-toolbar.top-center { top: 76px; left: 14px; right: 14px; width: calc(100% - 28px); max-width: none; }
  .task-shell .filter-bar label { flex: 1; min-width: 0; }
  .task-shell .filter-bar select { width: 100%; max-width: none; font-size: 14px; padding-left: 6px; padding-right: 23px; }
  .task-shell .map-toolbar.top-right { top: 16px; right: 14px; }
  .task-shell .map-toolbar.top-left { left: 14px; bottom: 92px; }
  .task-shell .selection-inspector { top: 142px; bottom: 20px; right: 14px; width: calc(100% - 28px); max-height: none; }
  .task-shell .selection-inspector .route-playback-actions { grid-template-columns: 1fr; }
  .task-shell .map-mode-banner { top: 137px; left: 14px; right: 14px; width: calc(100% - 28px); transform: none; }
  .task-shell .map-summary { left: auto; right: 14px; bottom: 35px; transform: none; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(100% - 83px); }
  .task-shell .map-summary > div { min-width: 88px; padding: 9px 10px; }
  .task-shell .map-summary > div:nth-child(2) { border-right: 0; }
  .task-shell .map-summary > div:nth-child(-n + 2) { border-bottom: 1px solid #ffffff24; }
  .task-shell .map-attribution { max-width: calc(100% - 28px); white-space: normal; text-align: right; }
  .task-shell .layer-menu { top: 68px; right: 14px; }
  dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); margin: auto; padding: 18px; }
  dialog .dialog-heading { gap: 10px; }
  dialog .dialog-heading h2 { font-size: 21px; }
  dialog .dialog-actions { flex-wrap: wrap; }
  dialog .dialog-actions .button { flex: 1 1 140px; white-space: normal; }
  dialog .publish-day-row,
  dialog .publish-van-row { grid-template-columns: minmax(0, 1fr); }
  dialog .publish-plan-facts,
  dialog .publish-receipt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog fieldset { min-width: 0; }
  dialog select { min-width: 0; max-width: 100%; }
  .task-shell .routing-wizard-footer { padding-inline: 14px; gap: 6px; }
  .task-shell .routing-wizard-error { white-space: normal; }
}

@media (max-width: 360px) {
  .task-shell .app-header { padding-inline: 12px; gap: 10px; }
  .task-shell .brand-mark { display: none; }
  .task-shell .brand-block h1 { font-size: 16px; }
  .task-shell .panel-heading,
  .task-shell .control-section,
  .task-shell .setup-guidance-heading,
  .task-shell .task-action-footer { padding-left: 16px; padding-right: 16px; }
  .task-intro { padding-inline: 16px; }
  .task-shell .setup-save-row { flex-wrap: wrap; gap: 7px; }
  .task-shell .setup-save-row > p { flex: 1 1 130px; }
  .task-shell .segmented span { font-size: 14px; }
  .task-shell .selection-inspector .action-grid { grid-template-columns: 1fr; }
  .task-shell .stop-navigator { grid-template-columns: 1fr; }
  .task-shell .stop-navigator > span { grid-column: 1; }
  .task-shell .map-summary > div { min-width: 82px; padding: 8px; }
  .task-shell .map-summary strong { font-size: 15px; }
}

/* Compact setup controls requested September 18. */
.task-shell .setup-panel > .panel-heading { min-height:0; padding:3px 8px; }
.task-shell .setup-tabs { padding:3px 4px; gap:2px; }
.task-shell .setup-tab-button { min-height:28px; padding:3px 4px; flex-direction:row; gap:0; font-size:13px; }
.task-shell .setup-tab-button > span { white-space:nowrap; line-height:20px; }
.task-shell .saved-setup-row, .task-shell .setup-save-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:6px; height:18px; min-height:0; padding:0; margin:0; line-height:18px; }
.task-shell .saved-setup-row label, .task-shell .setup-save-row > p { flex:0 1 auto; margin:0; padding:0; font-size:12px !important; line-height:18px; white-space:nowrap; }
.task-shell .saved-setup-row button, .task-shell .setup-save-row button { display:inline-flex; align-items:center; flex:0 0 auto; min-height:0 !important; height:18px; margin:0; padding:0 4px; font-size:12px !important; line-height:16px; border-radius:3px; }
#setupSaveStatus[data-state="unsaved"] { color:#b42318; }
.task-shell .workflow-bar .header-context { display:flex; flex:0 1 auto; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-left:auto; }
.task-shell .workflow-bar .context-item { min-width:0; }
#apiStatus:has(#apiStatusText:empty) { display:none; }

.task-shell #setupSaveStatus { font-size:12px; line-height:18px; }
.task-shell .setup-tab-button { min-height:28px !important; }