:root {
  --brand-tag: 0.875rem;
  --bg: #0c1219;
  --surface: #172433;
  --surface-2: #1e2e40;
  --border: #3a5570;
  --text: #eef4fa;
  --muted: #96a8bb;
  --accent: #3d9cf0;
  --accent-dim: #2a6fa8;
  --brand: #7ee8b5;
  --money: #8eecc4;
  --select-text: #fff;
  --select-from: #4aa6f4;
  --select-to: #2b7fd0;
  --select-border: #2a78c0;
  --action-from: #5eb3f8;
  --action-to: #2d86d6;
  --action-border: #1e6aaf;
  --action-shadow: rgba(45, 134, 214, 0.34);
  --wash-a: rgba(61, 156, 240, 0.18);
  --wash-b: rgba(126, 232, 181, 0.1);
  --wash-c: rgba(61, 156, 240, 0.08);
  --hatch: rgba(140, 196, 240, 0.045);
  --hatch-2: rgba(126, 232, 181, 0.03);
  --bg-from: #121a26;
  --bg-mid: #10161c;
  --bg-to: #101a18;
  --success: #7ee8b5;
  --danger: #f07178;
  --warning: #e6c07b;
  --field-bg: #101820;
  --field-border: #3a5570;
  --label: #c5d5e4;
  --chrome: #101820;
  --map-bg: #1a3148;
  --map-water: #24506e;
  --map-route: #7ee8b5;
  --map-ferry: #3d9cf0;
  --map-pin: #f07178;
  --radius: 12px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 40px rgba(0, 0, 0, 0.38);
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --tap-min: 44px;
  --page-pad-x: 1rem;
  --card-pad-x: 1.2rem;
  --card-pad-y: 1.25rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-height: calc(4.55rem + var(--safe-bottom));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-bottom: var(--tabbar-height);
}

body.keyboard-open {
  --tabbar-height: 0px;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 95% 72% at 0% 0%, var(--wash-a), transparent 72%),
    radial-gradient(ellipse 85% 68% at 100% 0%, var(--wash-b), transparent 70%),
    radial-gradient(ellipse 90% 60% at 60% 100%, var(--wash-c), transparent 72%),
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      var(--hatch) 22px 23px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 34px,
      var(--hatch-2) 34px 35px
    ),
    linear-gradient(120deg, var(--bg-from) 0%, var(--bg) 40%, var(--bg-mid) 70%, var(--bg-to) 100%);
  background-attachment: fixed;
  color: var(--text);
  color-scheme: dark;
  line-height: 1.5;
  overflow-x: clip;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem var(--page-pad-x) calc(1.25rem + var(--tabbar-height));
  width: 100%;
}

.header {
  margin-bottom: 1.5rem;
}

.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.header-top .brand {
  flex: 1 1 auto;
  min-width: 0;
}

.role-switch {
  flex: 0 0 auto;
  width: min(11.5rem, 46%);
  margin-top: 0.1rem;
}

.role-switch label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.role-switch select {
  width: 100%;
  min-height: var(--tap-min);
}

.role-switch label[hidden],
.role-switch select[hidden] {
  display: none !important;
}

.role-switch .form-message {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}

/* Help sits on the Working as label row so the select and brand stay put. */
.role-switch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  height: 1.08rem;
  margin: 0 0 0.25rem;
  min-width: 0;
}

.role-switch-head label {
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
}

/* Solo-only "Request a new feature" link (styled with the Solo rules below); never on org/district. */
.feature-request-btn[hidden] { display: none !important; }
html:not(.wp-solo) .feature-request-btn { display: none !important; }
.support-contact-row[hidden], .support-contact-btn[hidden] { display: none !important; }
html:not(.wp-solo) .support-contact-row, html:not(.wp-solo) .support-contact-btn { display: none !important; }

.help-menu {
  position: relative;
  flex: 0 0 auto;
}

.help-menu-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  height: 1.08rem;
  margin: 0;
  padding: 0 0.42rem;
  color: #fff;
  background: linear-gradient(180deg, var(--action-from) 0%, var(--action-to) 100%);
  border: 1px solid var(--action-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  touch-action: manipulation;
}

.help-menu-btn::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  right: -0.1rem;
  top: -0.55rem;
  bottom: 0;
}

/* 44px target sits on the visible control. The button box stays the same. */
.help-menu-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.help-menu-btn:hover,
.help-menu-btn[aria-expanded="true"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--action-from) 82%, white) 0%,
    color-mix(in srgb, var(--action-to) 88%, white) 100%
  );
}

.help-menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.help-menu-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 0.35rem);
  right: 0;
  width: max-content;
  min-width: 10.5rem;
  max-width: calc(100vw - 1.5rem);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.help-menu-panel[hidden] {
  display: none !important;
}

.help-menu-panel a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.help-menu-panel a:hover,
.help-menu-panel a:focus {
  color: #fff;
  background: linear-gradient(180deg, var(--select-from) 0%, var(--select-to) 100%);
  outline: none;
}

.help-menu-panel a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#app-notice {
  margin: 0.75rem 0 0;
}

#app-notice.hidden {
  display: none;
}

.session-warning {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warning) 65%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  color: var(--warning);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.session-warning.hidden {
  display: none;
}

.brand {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  position: relative;
  padding-bottom: 0.55rem;
}

.brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 62%, transparent 100%);
}

.brand > div {
  min-width: 0;
}

.header .brand-logo {
  width: 2.5rem;
  flex: 0 0 auto;
}

.header .brand > div {
  min-width: min-content;
}

.brand h1 {
  font-size: calc(var(--brand-tag) * 1.875);
  letter-spacing: -0.02em;
  line-height: 1.05;
  overflow-wrap: normal;
  white-space: nowrap;
}

.brand h1.wordmark {
  line-height: 0;
  position: relative;
}

.brand h1.wordmark svg {
  display: block;
  width: calc(var(--brand-tag) * 8.584);
  height: auto;
  margin-left: calc(var(--brand-tag) * 0.07);
}

.brand h1.wordmark + .subtitle {
  margin-top: 0.15rem;
}

.brand .subtitle {
  margin: 0.08rem 0 0;
  font-size: var(--brand-tag);
  line-height: 1.2;
  white-space: nowrap;
}

.brand-logo {
  display: block;
  /* vw so a phone (~390px) draws a smaller seal; rem cap keeps desktop steady.
     height: auto + min-width: 0 stops the 1950px PNG from forcing flex overflow. */
  width: clamp(1.65rem, 7.5vw, 2.75rem);
  max-width: 100%;
  height: auto;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.subtitle {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

h2 {
  margin: 0 0 1.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  position: relative;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.75rem;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 5.75rem),
    var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x) 1.35rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    var(--shadow);
  margin-bottom: 1rem;
  overflow: visible;
}

.field {
  margin-bottom: 1rem;
  min-width: 0;
}

.field-row {
  display: grid;
  gap: 0;
}

@media (min-width: 560px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--label);
  margin-bottom: 0.35rem;
}

.optional {
  font-weight: 400;
  opacity: 0.8;
}

input[type="date"],
input[type="text"],
input[type="search"],
input[type="month"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--tap-min);
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #6d8eab;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.4;
}

select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23b7aea6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* Location value is stored on a select that must never be shown.
   A visible <select> opens the phone OS picker in front of the in-page list. */
.loc-native {
  display: none !important;
}

.other-wrap {
  margin-top: 0.65rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.other-wrap.hidden,
.hidden {
  display: none !important;
}

.hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  min-height: 1.1em;
  overflow-wrap: anywhere;
}

.hint.ok {
  color: var(--success);
}

.hint.err {
  color: var(--danger);
}

.route-mode {
  margin: 0 0 1rem;
  padding: 0.85rem 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  min-width: 0;
  max-width: 100%;
}

.route-mode-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.route-mode-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.route-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.route-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap-min);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  touch-action: manipulation;
}

.route-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.route-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.route-option input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}

.route-option-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.route-option-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.route-option-detail {
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.route-option-miles {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.distance-panel {
  margin: 1.15rem 0 1.25rem;
  padding: 1rem 1.1rem;
  /* 2.7.7: lighter, see-through mint tint so the page shows through. */
  background:
    linear-gradient(180deg, rgba(142, 236, 196, 0.05), transparent 72%),
    color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid rgba(142, 236, 196, 0.26);
  border-radius: 10px;
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.distance-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.distance-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

.distance-error {
  color: var(--danger);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}

.distance-error p {
  margin: 0;
}

.distance-estimate-note {
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--warning);
  font-size: 0.85rem;
  font-weight: 650;
}

.distance-retry {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  min-height: var(--tap-min);
  min-width: 44px;
  padding: 0.35rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}

.hint .distance-retry {
  margin-top: 0.35rem;
}

.distance-retry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.distance-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.5rem;
}

/* New Trip miles box: the figure and the source line are each centered. */
#distance-result {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  gap: 0.35rem;
}

#distance-result .miles-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.miles-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--success);
  line-height: 1;
}

/* The New Trip miles figure is the large box itself, not a second field above it. */
#miles-input.miles-value {
  width: 8ch;
  min-width: 3ch;
  max-width: 9rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--success);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  field-sizing: content;
  -moz-appearance: textfield;
  appearance: textfield;
}

#miles-input.miles-value::-webkit-outer-spin-button,
#miles-input.miles-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#miles-input.miles-value:hover,
#miles-input.miles-value:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--success);
}

#miles-input.miles-value[readonly] {
  color: var(--success);
}

.distance-result .miles-changed {
  width: 100%;
  text-align: center;
}

.miles-unit {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
}

.miles-meta {
  width: 100%;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.btn {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  min-height: var(--tap-min);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn.primary {
  background: linear-gradient(180deg, var(--action-from) 0%, var(--action-to) 100%);
  color: #fff;
  border-color: var(--action-border);
  flex: 1;
  min-width: 8rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 18px var(--action-shadow);
}

.btn.primary:hover:not(:disabled) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--action-from) 82%, white) 0%,
    color-mix(in srgb, var(--action-to) 88%, white) 100%
  );
}

.btn.primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--field-border);
}

.btn.ghost:hover {
  color: #fff;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--field-border);
  flex: 1 1 12rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.btn.secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: #fff;
  background: #3a322c;
}

.btn.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-message {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  min-height: 1.25em;
  overflow-wrap: anywhere;
}

.form-message.ok {
  color: var(--success);
}

.form-message.err {
  color: var(--danger);
}

/* Status line lives in the sticky action row so a phone save acknowledgement
   stays on screen. Empty state takes no space; text uses its own full row. */
.actions-sticky .form-message {
  flex: 1 0 100%;
  width: 100%;
  margin: 0;
  min-height: 0;
}

.actions-sticky .form-message:not(:empty) {
  margin-top: 0.15rem;
  min-height: 1.25em;
}

.actions-sticky .form-message:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  flex: none;
}

.trips-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.trips-header h2 {
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--money) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--money) 50%, transparent);
  border-radius: 999px;
  color: var(--money);
}

.trips-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trips-sync {
  margin: 0 0 0.75rem;
}

.trips-sync:empty {
  display: none;
  margin: 0;
}

.trips-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

.trips-empty-text {
  margin: 0;
}

.trips-filters .export-chips {
  margin-bottom: 0.75rem;
}

.trips-filter-summary {
  margin: 0 0 0.85rem;
}

.trips-filter-range .field {
  margin-bottom: 0.75rem;
}

.trips-filter-range input[type="date"] {
  font-size: 16px;
  line-height: 1.2;
  min-height: 44px;
  min-width: 0;
}

.trips-filter-range .actions {
  margin-bottom: 0.35rem;
}

.trips-filter-range .btn {
  min-height: 44px;
  font-size: 16px;
}

.trips-range-error:empty {
  display: none;
  margin: 0;
}

#trips-filter-reset {
  margin-top: 0.75rem;
  min-height: 44px;
}

.trip-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
  align-items: start;
  min-width: 0;
}

.trips-card .trip-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.trip-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.75rem;
  align-items: start;
  min-width: 0;
  width: 100%;
}

.trip-item:first-of-type {
  border-top: none;
  padding-top: 0.25rem;
}

.trip-route {
  font-weight: 550;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  min-width: 0;
}

.trip-meta {
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.trip-miles {
  font-weight: 700;
  color: var(--success);
  font-size: 0.95rem;
  align-self: start;
  white-space: nowrap;
}

.trip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.trip-actions .trip-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.trip-actions .trip-action svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trip-del {
  align-self: center;
}

.trip-edited {
  grid-column: 1 / -1;
  margin-top: 0.1rem;
}

.trip-edited summary {
  width: fit-content;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.trip-edited p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

body.trip-edit-open {
  overflow: hidden;
}

.trip-edit-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.trip-edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.55);
}

.trip-edit-panel {
  position: relative;
  width: min(100%, 36rem);
  max-height: min(92dvh, 46rem);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 1rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}

.trip-edit-panel h2 {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
}

.trip-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  background: linear-gradient(to top, var(--surface) 70%, rgba(23, 36, 51, 0));
}

@media (min-width: 560px) {
  .trip-edit-sheet {
    align-items: center;
    padding: 1.25rem;
  }

  .trip-edit-panel {
    border-bottom: 1px solid var(--border);
    border-radius: 16px;
    max-height: min(88dvh, 46rem);
  }
}

.footer {
  margin-top: 1.5rem;
  text-align: center;
  padding-inline: 0.25rem;
}

.footer p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.footer code {
  font-size: 0.7rem;
  color: #d7e7f5;
  background: #121c28;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid #3a5570;
  word-break: break-all;
}

.footer-version {
  color: var(--money);
  font-variant-numeric: tabular-nums;
}

.footer-dev {
  margin-top: 0.35rem;
}

.loc-picker {
  position: relative;
}

.loc-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--tap-min);
  appearance: none;
  -webkit-appearance: none;
  padding: 0.7rem 2.25rem 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  background-color: #101820;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23b7aea6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  border: 1px solid #3a5570;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: manipulation;
}

.loc-trigger.is-placeholder {
  color: var(--muted);
}

.loc-trigger:hover {
  border-color: #6d8eab;
}

.loc-trigger:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.loc-trigger-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-picker.is-open .loc-trigger {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
}

.loc-panel {
  position: relative;
  z-index: 3;
  padding: 0.45rem;
  background: #101820;
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.48);
}

.loc-filter {
  margin-bottom: 0.35rem;
}

.loc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(14rem, 42dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.loc-option {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  appearance: none;
  -webkit-appearance: none;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}

.loc-option + .loc-option {
  margin-top: 1px;
}

.loc-option.is-selected {
  background: rgba(62, 207, 142, 0.14);
  box-shadow: inset 3px 0 0 var(--success);
}

.loc-option:hover,
.loc-option:focus {
  outline: none;
  background: var(--surface-2);
}

.loc-option.is-selected:hover,
.loc-option.is-selected:focus {
  background: rgba(62, 207, 142, 0.22);
}

.loc-empty {
  margin: 0;
  padding: 0.65rem 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* —— Accounts + export —— */
.account-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.85rem;
}

.account-bar .google-signin-wrap,
.account-bar .session-chip,
.account-bar #account-select,
.account-bar .role-menu {
  grid-column: 1 / -1;
}

.account-bar select {
  width: 100%;
  min-width: 0;
}

.account-bar .btn {
  width: 100%;
  justify-self: stretch;
}

.btn.small {
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  flex: 0;
  min-width: 0;
  min-height: var(--tap-min);
}

/* Row Edit/Delete stay content-sized. .btn.small would otherwise collapse them. */
.trips-card .trip-actions .btn.trip-action {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}

.hint-block {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.hint-block strong {
  color: var(--text);
}

.export-oneline {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text);
}

.how-this-works {
  margin: 0 0 0.85rem;
  border: 1px solid #3a5570;
  border-radius: 8px;
  background: #121c28;
  padding: 0 0.75rem;
}

.how-this-works summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

.how-this-works .hint-block {
  margin: 0;
  padding-bottom: 0.75rem;
}

.hint.is-reason {
  color: var(--warning);
}

.hint.is-block {
  color: var(--danger);
}

.save-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(62, 207, 142, 0.45);
  background: rgba(62, 207, 142, 0.1);
  border-radius: 10px;
}

.save-banner-text {
  margin: 0 0 0.65rem;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.save-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.save-banner-actions .btn {
  flex: 1 1 8rem;
}

.role-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.role-menu .role-link {
  background: #172433;
  border-color: #3a5570;
  color: #eef4fa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.role-menu .role-link:hover {
  color: #fff;
  border-color: var(--accent);
  background: #1e2e40;
}

.role-link[aria-current="page"],
.role-link[aria-current="page"]:hover {
  color: var(--select-text);
  border-color: var(--select-border);
  background: linear-gradient(180deg, var(--select-from) 0%, var(--select-to) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 16px color-mix(in srgb, var(--select-to) 45%, transparent);
}

.tabbar {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--chrome);
  border-top: 1px solid var(--border);
  box-shadow:
    0 -10px 28px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: var(--safe-bottom);
}

.tabbar::-webkit-scrollbar {
  display: none;
}

.tabbar-cue {
  display: none;
  position: fixed;
  z-index: 41;
  bottom: 0;
  width: 2.35rem;
  height: var(--tabbar-height);
  pointer-events: none;
}

.tabbar.is-overflow-left ~ .tabbar-cue-left,
.tabbar.is-overflow-right ~ .tabbar-cue-right {
  display: block;
}

.tabbar-cue-left {
  left: 0;
  background: linear-gradient(90deg, #14202c 0%, #14202c 32%, rgba(16, 24, 32, 0) 100%);
}

.tabbar-cue-right {
  right: 0;
  background: linear-gradient(270deg, #14202c 0%, #14202c 32%, rgba(16, 24, 32, 0) 100%);
}

.tabbar-cue::after {
  content: "";
  position: absolute;
  top: calc((var(--tabbar-height) - var(--safe-bottom)) / 2);
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.28rem;
  border-right: 2px solid rgba(238, 244, 250, 0.82);
  border-bottom: 2px solid rgba(238, 244, 250, 0.82);
}

.tabbar-cue-left::after {
  left: 0.42rem;
  transform: rotate(135deg);
}

.tabbar-cue-right::after {
  right: 0.42rem;
  transform: rotate(-45deg);
}

body.keyboard-open .tabbar,
body.keyboard-open .tabbar-cue.tabbar-cue-left,
body.keyboard-open .tabbar-cue.tabbar-cue-right {
  display: none;
}

@media (max-width: 560px) {
  :root {
    --brand-tag: 0.8rem;
  }
}

.tabbar-inner {
  width: max-content;
  min-width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}

.tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  line-height: 1.15;
  min-height: 4.15rem;
  padding: 0.35rem 0.15rem 0.4rem;
  flex: 1 0 auto;
  min-width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  cursor: pointer;
  touch-action: manipulation;
}

.tab[hidden] {
  display: none !important;
}

.tab svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-label {
  display: block;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: 0.72rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

@media (max-width: 560px) {
  .tab {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tab svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .tab-label {
    font-size: 0.68rem;
    letter-spacing: -0.02em;
  }
}

/* Wider than a phone: keep the visible section buttons on one row.
   The max-width: 560px block above is the phone bar and stays a flex row. */
@media (min-width: 561px) {
  .tabbar-inner {
    display: flex;
  }

  .tab-label {
    white-space: nowrap;
    font-size: 0.75rem;
  }
}

/* The phone bar scrolls instead of using these sizes. They apply only if a tab
   is a size container. */
@container (max-width: 80px) {
  .tab-label {
    font-size: 0.5rem;
    letter-spacing: -0.04em;
  }
}

@container (max-width: 58px) {
  .tab-label {
    font-size: 0.4rem;
    letter-spacing: -0.06em;
  }
}

.tab[aria-current="page"] {
  color: var(--accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent) 5%, transparent)
  );
  box-shadow: inset 0 3px 0 var(--accent);
}

.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.export-row {
  align-items: end;
}

.export-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.chip {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #3a5570;
  background: #121c28;
  color: #f0e6d8;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.chip:hover {
  color: #fff;
  border-color: var(--accent);
  background: #182636;
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover,
.chip[aria-selected="true"],
.chip[aria-selected="true"]:hover {
  color: var(--select-text);
  border-color: var(--select-border);
  background: linear-gradient(180deg, var(--select-from) 0%, var(--select-to) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px color-mix(in srgb, var(--select-to) 42%, transparent);
}

.export-summary {
  margin: 0 0 1rem;
}

.export-meta {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-bottom: 1rem;
}

.muted {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.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;
}

.google-signin-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}

#google-signin-btn {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#google-signin-btn > div,
#google-signin-btn iframe {
  max-width: 100% !important;
}

.google-status {
  margin: 0;
}

.session-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem 0.55rem 0.85rem;
  background: linear-gradient(180deg, #1e2e40 0%, #172433 100%);
  border: 1px solid #3a5570;
  border-radius: 8px;
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: 0.85rem;
  min-width: 0;
}

.session-chip.hidden {
  display: none !important;
}

#session-label {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

#session-label::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.16);
  transform: translateY(1px);
}

#session-label strong {
  color: var(--text);
}

/* Sticky primary actions (trip + account forms) on phone widths */
@media (max-width: 559px) {
  :root {
    --page-pad-x: 0.75rem;
    --card-pad-x: 1rem;
  }

  .app {
    padding-top: 1rem;
  }

  h1 {
    font-size: 1.2rem;
  }

  .subtitle {
    font-size: 0.8rem;
  }

  .card:has(.actions-sticky) {
    padding-bottom: 0;
  }

  .actions-sticky {
    position: sticky;
    bottom: var(--tabbar-height);
    z-index: 20;
    /* Side bleed only. A negative bottom margin pulled the save acknowledgement
       up under this bar (and past the viewport when stuck), clipping the text. */
    margin: 0.25rem calc(var(--card-pad-x) * -1) 0;
    padding: 0.75rem var(--card-pad-x) calc(0.85rem + var(--safe-bottom));
    overflow: visible;
    background: linear-gradient(
      to top,
      var(--surface) 65%,
      rgba(23, 36, 51, 0.92) 85%,
      rgba(23, 36, 51, 0.75)
    );
    border-top: 1px solid var(--border);
    border-bottom-left-radius: calc(var(--radius) - 1px);
    border-bottom-right-radius: calc(var(--radius) - 1px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .actions-sticky .btn.primary {
    flex: 1 1 auto;
    min-width: 0;
  }

  .actions-sticky .btn.ghost {
    flex: 0 0 auto;
    min-width: 5.5rem;
  }

  .export-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .export-meta {
    margin-top: -0.35rem;
    margin-bottom: 0.85rem;
    min-height: 0;
  }

  #export-btn,
  #email-pdf-btn {
    width: 100%;
    flex: 1 1 100%;
  }

  #view-admin-user .export-actions .btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .trip-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .trip-item > div:first-child {
    min-width: 0;
  }

  .trips-card .trip-actions .trip-action {
    padding-inline: 0.55rem;
  }

  /* Portrait (~390px): a long "Signed in as …" line was shrinking Sign out
     to a zero flex-basis, so the label clipped. Stack the chip instead. */
  .session-chip {
    flex-direction: column;
    align-items: stretch;
  }

  #session-label {
    flex: 0 1 auto;
    width: 100%;
  }

  #btn-sign-out {
    flex: none;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
  }

  /* Admin/Finance sit in the same account bar as Sign out, so they inherited
     .btn.small's flex-basis: 0 and min-width: 0. On a phone the two labels
     collapsed onto each other. Give each a real tap size and let the row
     share leftover width; wrap only if the labels cannot fit. */
  .account-bar .role-menu .role-link {
    flex: 1 1 0;
    width: auto;
    min-width: max-content;
    max-width: 100%;
    white-space: nowrap;
    padding-inline: 1rem;
  }
}

/* Desktop / wider: account bar can sit in a compact row */
@media (min-width: 560px) {
  .account-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .account-bar .google-signin-wrap,
  .account-bar .session-chip {
    flex: 1 1 100%;
  }

  .account-bar #account-select {
    flex: 1 1 12rem;
    width: auto;
    max-width: 18rem;
    grid-column: auto;
  }

  .account-bar .role-menu {
    flex: 1 1 100%;
  }

  .account-bar .btn {
    width: auto;
    flex: 0 0 auto;
  }

  #google-signin-btn {
    width: auto;
  }

  .login-card #google-signin-btn {
    width: 100%;
  }
}

/* Admin and Finance portals */
.portal-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.portal-card {
  border: 1px solid #3a5570;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 2.75rem),
    var(--surface-2);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.portal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.portal-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.adobe-sign-card,
.google-drive-card {
  position: relative;
  margin: 0 0 1.25rem;
  min-width: 0;
  max-width: 100%;
}

.adobe-sign-card h3,
.google-drive-card h3 {
  margin-bottom: 0.65rem;
}

.adobe-sign-card .actions,
.google-drive-card .actions {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

.adobe-sign-card .connect-actions,
.google-drive-card .actions {
  flex-wrap: wrap;
  align-items: stretch;
}

.adobe-sign-card .connect-actions .btn.primary,
.google-drive-card .actions .btn.primary {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

.adobe-sign-card .hint-block {
  margin: 0.65rem 0 0;
}

.google-drive-card .hint-block {
  margin: 0 0 0.75rem;
}

.adobe-sign-card .hint-block:empty,
.adobe-sign-card .form-message:empty,
.google-drive-card .hint-block:empty,
.google-drive-card .form-message:empty,
.drive-status:empty {
  display: none;
}

.google-drive-card .form-message {
  overflow-wrap: anywhere;
}

.drive-status {
  margin: 0 0 0.85rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.drive-status.is-connected {
  color: var(--success);
}

.drive-status.is-unconfigured {
  color: var(--warning);
}

.drive-sync {
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid #3a5570;
  min-width: 0;
}

.drive-sync > h4 {
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.drive-sync .drive-backfill {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.drive-backfill {
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid #3a5570;
  min-width: 0;
}

.drive-backfill h4 {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.drive-backfill .hint-block {
  margin: 0 0 0.75rem;
}

.drive-backfill-note {
  margin: 0 0 0.75rem;
  color: var(--warning);
  font-size: 0.85rem;
}

.drive-backfill-actions {
  flex-direction: column;
  align-items: stretch;
}

.google-drive-card .drive-backfill-actions .btn.primary,
.google-drive-card .drive-backfill-actions .btn.secondary {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

.drive-backfill-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
}

.drive-backfill-counts:empty {
  display: none;
}

.drive-backfill-count {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid #3a5570;
  border-radius: 8px;
  background: rgba(16, 24, 34, 0.35);
}

.drive-backfill-count-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.drive-backfill-count-value {
  color: var(--brand);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.drive-backfill-count.is-skipped .drive-backfill-count-value {
  color: var(--muted);
}

.drive-backfill-count.is-failed .drive-backfill-count-value {
  color: var(--danger);
}

.drive-backfill-count.is-remaining .drive-backfill-count-value {
  color: var(--accent);
}

.drive-backfill-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 32rem;
  margin-top: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.drive-backfill-list:empty {
  display: none;
  margin-top: 0;
}

.drive-backfill-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  border: 1px solid #3a5570;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  background: linear-gradient(180deg, #1e2e40, #172433);
}

.drive-backfill-name,
.drive-backfill-meta,
.drive-backfill-reason {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.drive-backfill-name {
  font-weight: 650;
}

.drive-backfill-meta {
  font-size: 0.85rem;
}

.drive-backfill-month {
  color: var(--muted);
}

.drive-backfill-status {
  font-weight: 650;
}

.drive-backfill-status[data-status="filed"],
.drive-backfill-status[data-status="would_file"] {
  color: var(--brand);
}

.drive-backfill-status[data-status="skipped"] {
  color: var(--muted);
}

.drive-backfill-status[data-status="failed"] {
  color: var(--danger);
}

.drive-backfill-reason {
  font-size: 0.85rem;
  color: var(--text);
}

.drive-backfill-open {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: 0.1rem;
  color: var(--accent);
  font-weight: 650;
}

.settings-screen {
  min-width: 0;
}

.settings-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  width: auto;
  margin: 0 0 0.85rem;
  padding-left: 0.55rem;
  padding-right: 0.9rem;
}

.settings-back-icon {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.account-hub,
.account-row {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

.account-hub {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap-min);
  margin: 0 0 1.25rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #3a5570;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 2.75rem),
    var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-hub-copy,
.account-row-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.account-hub-title,
.account-row-name {
  display: block;
  font-size: 1rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.account-hub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.account-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.account-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #5c7084;
  box-shadow: 0 0 0 3px rgba(92, 112, 132, 0.18);
}

.account-dot.is-connected {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(126, 232, 181, 0.18);
}

.account-chevron {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-hub:hover,
.account-row:hover {
  border-color: var(--accent);
}

.account-hub:focus-visible,
.account-row:focus-visible,
.settings-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.account-list li {
  margin: 0;
  min-width: 0;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.75rem 0.8rem;
  border: 1px solid #3a5570;
  border-radius: 10px;
  background: linear-gradient(180deg, #1e2e40, #172433);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: #d7ebff;
  font-size: 0.95rem;
  font-weight: 700;
}

.account-row-status {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.account-row-status.is-connected {
  color: var(--brand);
}

.account-row-status.is-unconfigured {
  color: var(--warning);
}

.user-row.drive-access-entry {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}

.drive-access-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
  margin: 0;
  min-width: 0;
}

.drive-access-key {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.drive-access-value {
  display: block;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.drive-access-email,
.drive-access-opened {
  white-space: nowrap;
}

#drive-access-message:empty {
  display: none;
}

.reports-drive-audit {
  margin-top: 1.15rem;
  margin-bottom: 0;
}

.reports-drive-audit > h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.reports-drive-audit .form-message:empty {
  display: none;
}

.archive-root-actions {
  margin: 0 0 0.85rem;
}

.archive-root-actions .btn {
  flex: 1 1 100%;
  width: 100%;
}

#archive-message:empty {
  display: none;
  margin: 0;
}

#archive-retry,
.archive-files-retry {
  width: 100%;
  margin-top: 0.65rem;
}

.archive-files .form-message {
  margin-top: 0;
}

.archive-unavailable {
  margin: 0 0 0.35rem;
  padding: 0.95rem 1rem;
  border: 1px solid #3a5570;
  border-radius: 10px;
  background: #121c28;
}

.archive-unavailable h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 650;
}

.archive-unavailable p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.archive-folder {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  border: 1px solid #3a5570;
  background: linear-gradient(180deg, #1e2e40, #172433);
  border-radius: 10px;
  padding: 0.8rem 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.archive-folder h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.archive-meta {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.archive-filed {
  margin: 0.28rem 0 0;
  color: var(--text);
  font-size: 0.9rem;
}

.archive-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.archive-folder-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  white-space: nowrap;
}

.archive-folder-actions .archive-files-btn[aria-expanded="true"] {
  color: var(--select-text);
  border-color: var(--select-border);
  background: linear-gradient(180deg, var(--select-from) 0%, var(--select-to) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px color-mix(in srgb, var(--select-to) 42%, transparent);
}

.archive-files {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid #3a5570;
}

.archive-file {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem;
  border-radius: 8px;
  border: 1px solid #2c4258;
  background: #121c28;
}

.archive-file-month {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

.archive-file-name {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.archive-file .btn {
  flex: 1 1 auto;
  width: 100%;
}

.archive-files-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

@media (min-width: 480px) {
  .archive-file {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .archive-file .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 5.5rem;
  }
}

.mileage-rate-card {
  margin: 0 0 1.25rem;
}

.mileage-rate-card h3 {
  margin-bottom: 0.45rem;
}

.mileage-rate-card .hint-block {
  margin-bottom: 0.75rem;
}

.mileage-rate-current {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
}

.mileage-rate-current strong {
  color: var(--money);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.mileage-rate-card {
  box-shadow: inset 3px 0 0 var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mileage-rate-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.mileage-rate-form .field {
  flex: 1 1 11rem;
  max-width: 16rem;
  margin-bottom: 0;
}

.mileage-rate-card .portal-meta {
  margin: 0.75rem 0 0;
}

.mileage-rate-card .form-message:empty {
  min-height: 0;
  margin-top: 0;
}

.create-user-card {
  margin: 0 0 1.25rem;
}

.create-user-card h3 {
  margin-bottom: 0.45rem;
}

.create-user-card .hint-block {
  margin-bottom: 0.75rem;
}

.create-user-card .form-message:empty {
  min-height: 0;
  margin-top: 0;
}

.create-user-profile {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem 0.15rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}

.create-user-profile legend {
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.create-user-profile .field:last-child {
  margin-bottom: 0.7rem;
}

.portal-meta {
  margin: 0.15rem 0 0.7rem;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.role-checks {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0 0.75rem;
}

.role-checks label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tap-min);
  font-size: 0.95rem;
}

.role-checks input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent);
}

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.portal-actions .btn {
  flex: 1 1 8.5rem;
}

.admin-count {
  margin: -0.35rem 0 0.75rem;
  font-size: 0.85rem;
}

.admin-count:empty {
  display: none;
  margin: 0;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: start;
  border: 1px solid #3a5570;
  background: linear-gradient(180deg, #1e2e40, #172433);
  border-radius: 10px;
  padding: 0.75rem 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.users-head h2 {
  margin: 0;
}

.users-add[hidden] {
  display: none !important;
}

.users-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: 0 0 auto;
  border: 1px solid var(--action-border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--action-from) 0%, var(--action-to) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 6px 14px var(--action-shadow);
}

.users-add svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
}

.users-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.users-bulk-row {
  margin: -0.35rem 0 1rem;
}

.users-bulk-row[hidden],
#users-bulk-upload[hidden] {
  display: none !important;
}

#users-bulk-upload {
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}

.user-row-main {
  min-width: 0;
}

.user-row h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.presence-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  transform: translateY(1px);
}

.presence-dot.is-online {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.16);
}

.presence-dot.is-offline {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(240, 113, 120, 0.16);
}

.user-row .portal-meta {
  margin: 0.1rem 0 0;
}

.supervisor-line {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.user-editor {
  grid-column: 1 / -1;
  min-width: 0;
}

.user-editor.hidden {
  display: none;
}

.user-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  gap: 0.35rem;
}

.user-row-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: auto;
  min-width: 4.75rem;
  max-width: 100%;
  align-self: flex-end;
  min-height: 36px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.user-test-mode {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.user-test-mode .switch-row {
  margin-bottom: 0.25rem;
}

.user-test-mode .hint {
  margin: 0;
}

.user-test-mode .form-message:empty {
  display: none;
}

.user-access {
  grid-column: 1 / -1;
  margin-top: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.access-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.access-toggle.is-enabled {
  color: #073322;
  background: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 70%, #fff);
}

.access-toggle.is-disabled {
  color: #3b1014;
  background: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 75%, #fff);
}

.access-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.access-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.user-access .form-message:empty {
  display: none;
}

.disabled-by {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.role-pills:empty {
  display: none;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--money) 50%, transparent);
  background: color-mix(in srgb, var(--money) 14%, transparent);
  color: var(--money);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-method-editor {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem 0.15rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}

.auth-method-editor legend {
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.auth-password.is-locked input,
.auth-password input:disabled {
  background: #6a7888;
  color: #e4ebf2;
  border-color: #8494a6;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

.auth-password .hint {
  margin-top: 0.4rem;
}

.change-password-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.change-password-card .form-message:empty,
.change-password-card .hint:empty {
  display: none;
}

.change-password-card.is-locked .btn.primary:disabled {
  background: #6a7888;
  color: #e4ebf2;
  border-color: #8494a6;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

.role-editor {
  margin: 0.35rem 0 0;
  padding: 0.65rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.supervisor-editor {
  margin: 0.35rem 0 0;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.supervisor-editor legend {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.supervisor-editor .field {
  margin: 0.35rem 0 0.75rem;
}

.supervisor-editor select {
  background-color: var(--bg);
}

.supervisor-editor .hint {
  margin-top: 0.45rem;
}

.supervisees-editor {
  margin: 0.35rem 0 0;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.supervisees-editor legend {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.supervisees-editor .field {
  margin: 0.75rem 0 0.35rem;
}

.supervisees-editor select {
  background-color: var(--bg);
}

.supervisees-editor .hint.is-reassign {
  color: var(--warning);
}

.supervisee-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.supervisee-list li {
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.supervisee-name {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.supervisee-list .portal-meta {
  margin: 0.15rem 0 0;
  overflow-wrap: anywhere;
}

.supervisee-empty {
  margin: 0.65rem 0 0;
}

#users-edit-supervisees-pending {
  margin: 0.75rem 0 0;
}

.role-editor legend {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.admin-back {
  margin: 0 0 0.85rem;
}

#view-admin-user .portal-meta {
  margin: -0.55rem 0 0;
}

.trip-item.readonly {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-source-edit {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  min-width: 0;
}

.admin-source-edit .field {
  margin-bottom: 0.65rem;
}

.admin-source-caption {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #c5d5e4;
  margin-bottom: 0.35rem;
}

.admin-source-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.85rem;
}

.admin-source-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap-min);
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.admin-source-choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--accent);
}

.admin-source-edit .btn {
  width: 100%;
}

.admin-source-edit .form-message {
  margin: 0.45rem 0 0;
}

.admin-source-edit .form-message:empty {
  display: none;
  margin: 0;
}

.reports-viewer {
  margin: -0.35rem 0 0.75rem;
  font-weight: 600;
  color: var(--money);
  letter-spacing: 0.01em;
}

.reports-subject h3 {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.reports-subject h3:empty,
.reports-subject .portal-meta:empty {
  display: none;
}

.reports-picker {
  position: relative;
  margin: 0 0 1rem;
  min-width: 0;
}

.reports-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--tap-min);
  appearance: none;
  -webkit-appearance: none;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  background-color: #101820;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23b7aea6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  border: 1px solid #3a5570;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: manipulation;
}

.reports-trigger.is-placeholder {
  color: var(--muted);
}

.reports-trigger:hover {
  border-color: #6d8eab;
}

.reports-trigger:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.reports-picker.is-open .reports-trigger {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
}

.reports-trigger-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.05rem;
}

.reports-trigger-name {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.reports-trigger.is-placeholder .reports-trigger-name {
  font-weight: 400;
}

.reports-trigger-email {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.reports-trigger-email:empty {
  display: none;
}

.reports-panel {
  position: relative;
  z-index: 4;
  padding: 0.45rem;
  background: #101820;
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.48);
}

.reports-filter {
  margin-bottom: 0.35rem;
}

.reports-people {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  max-height: min(14rem, 42dvh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.reports-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.55rem 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}

.reports-person[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.reports-person:hover,
.reports-person:focus {
  outline: none;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.reports-person[aria-selected="true"]:hover,
.reports-person[aria-selected="true"]:focus {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.reports-person-name {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.reports-person-email {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.reports-empty {
  margin: 0;
  padding: 0.55rem 0.7rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.reports-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  color: var(--muted);
}

.reports-loading.hidden {
  display: none;
}

.reports-data {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.reports-data h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.reports-data > .hint {
  margin-top: 0;
}

.reports-sheet-link a {
  color: var(--accent);
  font-weight: 650;
}

.report-columns {
  border: 0;
  margin: 0.75rem 0 0.35rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}

.report-columns legend {
  width: 100%;
  padding: 0;
  margin: 0 0 0.15rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
}

.report-column {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap-min);
  font-size: 0.92rem;
  cursor: pointer;
}

.report-column input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}

#view-reports .export-actions {
  flex-direction: column;
}

#view-reports .export-actions .btn {
  width: 100%;
  flex: 1 1 auto;
}

#reports-retry {
  width: 100%;
  margin-top: 0.65rem;
}

.report-trip {
  display: block;
}

.report-trip-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.55rem;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap-min);
  touch-action: manipulation;
}

.report-trip-toggle .trip-date {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.report-trip-detail {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.report-trip-detail p {
  margin: 0.15rem 0;
}

.report-trip-edit {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 1.6rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  background: var(--surface);
}

.status-badge.pending {
  color: var(--warning);
  border-color: rgba(230, 192, 123, 0.45);
}

.status-badge.received {
  color: var(--success);
  border-color: rgba(62, 207, 142, 0.45);
}

.inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.2rem 0.65rem;
  align-items: start;
  border: 1px solid #3a5570;
  background: linear-gradient(180deg, #1e2e40, #172433);
  border-radius: 10px;
  padding: 0.75rem 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.inbox-row.is-unread {
  border-color: rgba(230, 192, 123, 0.5);
  box-shadow: inset 3px 0 0 var(--warning);
}

.inbox-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: var(--warning);
}

.inbox-row.is-read {
  grid-template-columns: minmax(0, 1fr) auto;
}

.inbox-main {
  min-width: 0;
}

.inbox-main h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.inbox-row.is-read h3 {
  font-weight: 550;
}

.inbox-subject {
  margin: 0.1rem 0 0;
  font-size: 0.92rem;
}

.inbox-row .portal-meta {
  margin: 0.15rem 0 0;
}

.inbox-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.inbox-actions .btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 5.5rem;
  white-space: nowrap;
}

/* —— Login gate —— */
.login-screen {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center when the card fits. On a short phone, start at the top and scroll
     so Sign in with Google is reachable instead of clipped. */
  justify-content: safe center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(1.25rem, env(safe-area-inset-top, 0px))
    0.75rem
    calc(1.5rem + var(--safe-bottom));
  width: 100%;
  box-sizing: border-box;
}

.login-card {
  width: min(420px, 100%);
  margin: 0;
  flex-shrink: 0;
}

.login-card .brand {
  align-items: center;
  margin-bottom: 1.25rem;
}

.login-card .brand-logo {
  width: clamp(2.25rem, 12vw, 4.75rem);
  max-width: 100%;
  height: auto;
}

.login-card .actions .btn {
  width: 100%;
  flex: 1 1 100%;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0 1.05rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-footnote {
  margin-top: 0.35rem;
  min-height: 0;
}

.login-footnote strong {
  color: var(--text);
  font-weight: 600;
}

.login-alt-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.btn.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.35rem 0.5rem;
  background: transparent;
  color: var(--accent);
  border: none;
  box-shadow: none;
  font-weight: 600;
}

.btn.link:hover {
  color: #fff;
  text-decoration: underline;
}

#forgot-password-form .hint-block {
  margin-bottom: 0.85rem;
}

#reset-screen .hint-block {
  margin-bottom: 0.85rem;
}

.register-panel {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.register-panel .btn.ghost {
  width: 100%;
}

#register-form {
  margin-top: 1rem;
}

#google-signin-btn {
  display: flex;
  justify-content: center;
}

.login-card #google-signin-btn {
  width: 100%;
  min-height: var(--tap-min);
}

#login-api-status {
  margin: 0 0 1rem;
}

/* Claim status. Current step is red. Done steps use the same light green
   as the mileage figure. Upcoming stays muted. */

.claim-status-slot {
  margin: 0.35rem 0 0.85rem;
}

.claim-status-slot[hidden] {
  display: none !important;
}

.claim-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

.claim-status-line li {
  display: inline;
}

.claim-status-line li:not(:last-child)::after {
  content: "·";
  margin-left: 0.35rem;
  color: var(--muted);
  font-weight: 400;
}

.claim-status-line li.is-done {
  color: var(--success);
  font-weight: 700;
}

.claim-status-line li.is-current {
  color: var(--danger);
  font-weight: 700;
}

.claim-status-line li.is-upcoming {
  color: var(--muted);
  font-weight: 500;
}

.trip-lock-note {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.trip-item.is-locked .trip-action:disabled,
.trip-item.is-locked .trip-action:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted);
  border-color: var(--border);
  background: rgba(16, 24, 34, 0.35);
}

#supervisor-queue.card {
  margin-top: 1.15rem;
  margin-bottom: 1.15rem;
}

#supervisor-queue > h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

#supervisor-queue > .hint {
  margin: 0 0 0.75rem;
}

#supervisor-queue .form-message:empty {
  display: none;
}

.queue-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 2.6rem),
    var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.queue-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.queue-subject {
  margin: 0.1rem 0 0;
  font-size: 0.92rem;
}

.queue-meta {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.queue-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.queue-comment {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

.queue-comment span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #c5d5e4;
}

.queue-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.queue-buttons .btn {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.queue-buttons .btn.primary,
.queue-buttons .btn.secondary {
  flex: 1 1 auto;
}

.queue-buttons .btn:disabled,
.queue-buttons .btn:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

.inapp-sign {
  min-width: 0;
}

.inapp-lead {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand);
}

.inapp-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

.inapp-consent input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.12rem;
  flex: none;
  accent-color: var(--accent);
}

.inapp-consent span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inapp-methods {
  display: flex;
  gap: 0.45rem;
}

.inapp-methods .chip {
  flex: 1 1 0;
}

.inapp-pad-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.inapp-pad-wrap[hidden] {
  display: none !important;
}

.inapp-pad {
  width: 100%;
  max-width: 100%;
  height: 148px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: #f7fafc;
  touch-action: none;
  cursor: crosshair;
  display: block;
}

.inapp-pad-actions {
  display: flex;
  justify-content: flex-end;
}

.inapp-pad-actions .btn {
  width: auto;
  min-width: 5.5rem;
}

.inapp-sign > .btn {
  width: 100%;
}

.inbox-actions .mark-received {
  white-space: normal;
  line-height: 1.2;
}

.btn.deny-claim {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, #3a5570);
  background: linear-gradient(180deg, #1e2e40 0%, #172433 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.inbox-actions .btn.deny-claim,
.finance-deny-actions .btn.deny-claim {
  flex: 0 0 auto;
  width: 100%;
}

.inbox-actions .btn.deny-claim:hover:not(:disabled),
.finance-deny-actions .btn.deny-claim:hover:not(:disabled) {
  color: #fff;
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 22%, #172433);
}

.inbox-row.finance-denied-row {
  grid-template-columns: minmax(0, 1fr);
}

.finance-deny-reason {
  margin: 0.35rem 0 0;
  color: var(--text);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

body.finance-deny-open {
  overflow: hidden;
}

.finance-deny-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.finance-deny-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.55);
}

.finance-deny-panel {
  position: relative;
  width: min(100%, 36rem);
  max-height: min(92dvh, 46rem);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 1rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}

.finance-deny-panel h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.finance-deny-actions {
  margin-top: 0.75rem;
}

.finance-deny-actions .btn {
  width: 100%;
  flex: 1 1 auto;
}

#finance-deny-error:empty {
  display: none;
}

body.bulk-upload-open {
  overflow: hidden;
}

.bulk-upload-note {
  margin-bottom: 0.75rem;
}

.bulk-upload-template-row {
  margin: 0 0 0.85rem;
}

#bulk-upload-template {
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  min-height: var(--tap-min);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

#bulk-upload-file {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.bulk-upload-summary {
  margin: 0 0 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bulk-upload-summary:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bulk-upload-confirm {
  margin: 0.75rem 0 0;
  overflow-wrap: anywhere;
}

.bulk-upload-rows {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.bulk-upload-row {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: var(--surface-2);
}

.bulk-upload-row-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  margin: 0;
  min-width: 0;
}

.bulk-upload-row-num {
  color: var(--muted);
  font-size: 0.8rem;
}

.bulk-upload-email {
  min-width: 0;
  flex: 1 1 8rem;
  overflow-wrap: anywhere;
}

.bulk-upload-reason {
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bulk-upload-count.is-created,
.bulk-upload-status.is-created {
  color: var(--success);
}

.bulk-upload-count.is-skipped,
.bulk-upload-status.is-skipped {
  color: var(--accent);
}

.bulk-upload-count.is-error,
.bulk-upload-status.is-error {
  color: var(--danger);
}

.bulk-upload-count.is-neutral {
  color: var(--muted);
}

.bulk-upload-audit {
  margin: 0 0 0.75rem;
  color: var(--warning);
  overflow-wrap: anywhere;
}

#bulk-upload-error:empty,
#bulk-upload-file-name:empty {
  display: none;
  min-height: 0;
  margin: 0;
}

#bulk-upload-confirm[hidden],
#bulk-upload-check-results[hidden],
#bulk-upload-results[hidden],
#bulk-upload-audit[hidden] {
  display: none !important;
}

@media (min-width: 560px) {
  .finance-deny-sheet {
    align-items: center;
    padding: 1.25rem;
  }

  .finance-deny-panel {
    border-bottom: 1px solid var(--border);
    border-radius: 16px;
    max-height: min(88dvh, 46rem);
  }
}

#submitted-reimbursements {
  margin-top: 0.85rem;
  scroll-margin-top: 0.75rem;
  scroll-margin-bottom: var(--tabbar-height);
}

#submissions-own > h3,
#submissions-approved > h3 {
  margin: 0.85rem 0 0.55rem;
  font-size: 1rem;
  font-weight: 650;
}

#submitted-reimbursements .form-message:empty {
  display: none;
}

.submission-group {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.8rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 2.4rem),
    var(--surface-2);
}

.submission-group h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.submission-group .portal-meta {
  margin-bottom: 0.65rem;
}

.submission-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.85rem;
  background: linear-gradient(180deg, #1e2e40, #172433);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.submission-row h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.submission-received {
  margin: 0.35rem 0 0;
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.submission-figures {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.submission-miles {
  color: var(--success);
  font-weight: 700;
}

.submission-denied {
  margin-top: 0.45rem;
}

.submission-denied-label {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 700;
}

.submission-deny-reason {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.submission-row.is-denied {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.submission-row .btn {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.whats-new {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    0.75rem
    calc(0.75rem + var(--safe-bottom));
  background: rgba(8, 12, 16, 0.78);
}

.whats-new-card {
  width: min(26rem, 100%);
  margin: 0;
}

.whats-new-version {
  display: inline-flex;
  align-items: center;
  margin: -0.35rem 0 0.85rem;
  min-height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
}

.whats-new-version:empty {
  display: none;
}

.whats-new-copy p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.whats-new-copy ul {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
}

.whats-new-copy li {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.whats-new-card .actions .btn.primary {
  width: 100%;
  flex: 1 1 100%;
}

.whats-new-card .form-message:empty {
  display: none;
}

.miles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.miles-row:has(.field[hidden]:only-child),
.miles-row:has(#miles-source-field[hidden]),
.miles-row:has(#trip-edit-miles-source-field[hidden]) {
  grid-template-columns: 1fr;
}

.miles-row:not(:has(.field:not([hidden]))) {
  display: none;
}

#miles-input[readonly],
#trip-edit-miles-input[readonly] {
  color: var(--money);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--tap-min);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.switch-row > span {
  flex: 1 1 auto;
  min-width: 0;
}

.switch-row input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.6rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #101820;
  position: relative;
  cursor: pointer;
}

.switch-row input::after {
  content: "";
  position: absolute;
  top: 0.14rem;
  left: 0.16rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--muted);
  transition: left 0.15s ease, background 0.15s ease;
}

.switch-row input:checked {
  background: var(--accent);
  border-color: var(--select-border);
}

.switch-row input:checked::after {
  left: 1.28rem;
  background: #fff;
}

.switch-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Profile opt-out for Finance holders. The row stays a 44px target; the track is at least 44px on both axes. */
.finance-email-alerts .switch-row {
  min-height: 44px;
  margin-bottom: 0.25rem;
}

.finance-email-alerts .switch-row input {
  width: 64px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.finance-email-alerts .switch-row input::after {
  top: 4px;
  left: 4px;
  width: 36px;
  height: 36px;
}

.finance-email-alerts .switch-row input:checked::after {
  left: 24px;
}

.finance-email-alerts .switch-row input:disabled {
  opacity: 0.55;
  cursor: progress;
}

.finance-email-alerts .hint {
  margin-top: 0;
}

.finance-email-alerts .form-message:empty {
  display: none;
}

.finance-emails-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#settings-switches-card .form-message:empty {
  display: none;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tap-min);
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.check-row input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent);
}

.miles-changed {
  margin: 0.35rem 0 0;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
}

.trip-miles .miles-changed {
  text-align: right;
}

@media (min-width: 561px) {
  .queue-buttons {
    flex-direction: row;
  }
}

/* Dashboard widgets are separate cards. Phone width stacks them in DOM order:
   Reimbursements, Recent submissions, Miles claimed, Dollars by account
   number, then By employee when those cards are shown. Wide screens stack
   Reimbursements and Miles claimed in the left column and stretch Recent
   submissions down the right column so the two columns end together. A long
   recent list scrolls inside that card. Miles stay the same light green as
   the trip figure. Extra bottom space keeps the last card above the fixed
   tab bar. */
#view-dashboard .dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#view-dashboard .dashboard-card {
  min-width: 0;
  margin-bottom: 0;
  padding: 0.9rem 0.95rem 1rem;
}

#view-dashboard > h2 {
  margin-bottom: 0.65rem;
}

.fiscal-year-field {
  margin: 0 0 0.55rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  row-gap: 0.2rem;
  align-items: center;
}

.fiscal-year-field label {
  margin: 0;
  white-space: nowrap;
}

.fiscal-year-field select {
  min-height: 2.55rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 0.95rem;
}

/* 16px keeps iOS Safari from zooming the page when the year picker is focused. */
#dashboard-fy,
#submitted-fy {
  font-size: 16px;
}

.fiscal-year-field .hint {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 0;
}

.dashboard-audience {
  margin: 0 0 0.7rem;
}

@media (max-width: 560px) {
  #view-dashboard {
    padding-bottom: 1.5rem;
  }
}

#view-dashboard .form-message:empty {
  display: none;
}

#view-dashboard .dashboard-heading {
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.dashboard-reimbursement-figures {
  display: flex;
  flex-direction: column;
}

.dashboard-reimbursement-figures > div + div {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.dashboard-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.dashboard-figure {
  margin: 0.2rem 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.dashboard-miles-total {
  justify-content: flex-start;
  margin: 0 0 0.55rem;
}

.dashboard-month-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#dashboard-accounts-wrap {
  padding: 0.7rem 0.85rem 0.75rem;
}

#dashboard-accounts.dashboard-month-list {
  gap: 0.4rem;
}

#dashboard-accounts .dashboard-bar-track {
  margin-top: 0.22rem;
}

.dashboard-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.dashboard-bar-head span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-bar-track {
  height: 0.55rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: #121c28;
  border: 1px solid var(--border);
  overflow: hidden;
}

.dashboard-bar-fill {
  height: 100%;
  border-radius: 999px;
  max-width: 100%;
}

.dashboard-bar-fill-miles {
  background: var(--success);
}

.dashboard-bar-fill-dollars {
  background: linear-gradient(180deg, var(--action-from) 0%, var(--action-to) 100%);
}

.dashboard-month-figures {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.dashboard-month-miles {
  color: var(--success);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-month-dollars {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-account-dollars {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-status,
.dashboard-person {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-weight: 650;
}

.dashboard-employee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dashboard-employee {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.dashboard-employee-name {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.dashboard-employee-figures {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

#dashboard-recent.portal-list {
  gap: 0.5rem;
}

#dashboard-recent .submission-row {
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
}

#dashboard-recent .submission-row.is-shortcut {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

#dashboard-recent .submission-row.is-shortcut:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#dashboard-recent .claim-status-line {
  margin: 0.15rem 0 0;
}

@media (min-width: 561px) {
  #view-dashboard .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.7rem;
    align-items: stretch;
  }

  #dashboard-reimbursements-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  #dashboard-miles-wrap {
    grid-column: 1;
    grid-row: 2;
  }

  /* Content is taken out of flow so a long list cannot stretch the rows.
     The card then matches the left column and the list scrolls inside it. */
  #dashboard-recent-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #dashboard-recent-wrap .dashboard-recent-fill {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.9rem 0.95rem 1rem;
  }

  #dashboard-recent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  #dashboard-accounts-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #dashboard-employees-wrap {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .dashboard-reimbursement-figures {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .dashboard-reimbursement-figures > div {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .dashboard-reimbursement-figures .dashboard-figure {
    margin-top: auto;
    padding-top: 0.2rem;
  }

  .dashboard-reimbursement-figures > div + div {
    margin-top: 0;
    margin-left: 0.85rem;
    padding-top: 0;
    padding-left: 0.85rem;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

/* Admin hard delete. Red is only for this destructive action. */
.btn.danger {
  background: #d32732;
  color: #fff;
  border-color: #a61e27;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn.danger:hover:not(:disabled) {
  background: #e23d48;
  color: #fff;
  border-color: #c2303a;
}

.btn.danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn.danger.compact {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.15;
  white-space: nowrap;
}

.trip-item.admin-trip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.admin-trip-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: start;
  min-width: 0;
}

.admin-trip-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  min-width: 0;
}

.admin-trip-aside .trip-miles {
  text-align: right;
}

.admin-month-bar,
.admin-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}

.admin-month-bar {
  margin: 0.35rem 0 0.85rem;
}

#view-admin-user.is-readonly .export-actions,
#view-admin-user.is-readonly #admin-export-hint,
#view-admin-user.is-readonly #admin-sign-hint,
#view-admin-user.is-readonly #admin-month-bar,
#view-admin-user.is-readonly .admin-source-edit,
#view-admin-user.is-readonly .admin-trip-delete {
  display: none !important;
}

.admin-month-bar[hidden] {
  display: none !important;
}

.admin-month-head {
  list-style: none;
  padding: 0.7rem 0 0.35rem;
  border-top: 1px solid var(--border);
}

.admin-month-head:first-child {
  border-top: none;
  padding-top: 0.15rem;
}

.admin-month-label {
  margin: 0;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.report-trip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
}

.report-trip-row .report-trip-toggle {
  min-width: 0;
}

body.admin-delete-open {
  overflow: hidden;
}

.admin-delete-who,
.admin-delete-detail,
.admin-delete-permanent,
.admin-delete-claim {
  margin: 0.45rem 0 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-delete-who {
  margin-top: 0;
  font-weight: 650;
}

.admin-delete-permanent {
  font-weight: 650;
}

.admin-delete-claim {
  color: var(--warning);
}

.admin-delete-claim[hidden] {
  display: none !important;
}

#admin-delete-error:empty,
#submission-delete-error:empty {
  display: none;
}

body.submission-delete-open {
  overflow: hidden;
}

body.is-admin-submissions #view-reimbursement {
  display: none !important;
}

body.is-admin-submissions #submitted-reimbursements {
  margin-top: 0;
}

body.is-finance-reimbursements #view-reimbursement {
  display: none !important;
}

body.is-finance-reimbursements #submitted-reimbursements {
  margin-top: 0;
}

body.is-supervisor-submissions #view-reimbursement {
  display: none !important;
}

body.is-supervisor-submissions #submitted-reimbursements {
  margin-top: 0;
}

#submission-delete-sheet .field {
  margin-top: 0.75rem;
}

#submission-delete-sheet .finance-deny-panel {
  max-width: 100%;
}

.submission-row .btn.danger.submission-delete {
  width: 100%;
}

.admin-delete-actions .btn.danger {
  width: 100%;
}

.admin-delete-toast {
  position: fixed;
  z-index: 70;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--success) 50%, var(--border));
  background: #13261c;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.admin-delete-toast[hidden] {
  display: none !important;
}

.admin-delete-toast p {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-delete-toast p:first-child {
  margin-top: 0;
  color: var(--success);
  font-weight: 700;
}

.admin-delete-toast .admin-delete-stale {
  color: var(--warning);
  font-weight: 650;
}

/* Custom location name, saved-place picker, and manage sheet. */
.saved-places-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.saved-places-card .hint {
  margin-top: 0;
}

.saved-places-card .actions {
  margin-top: 0.85rem;
}

.saved-places-bar {
  margin-bottom: 0.75rem;
}

.btn.saved-places-open {
  width: 100%;
  flex: none;
}

.saved-places-panel {
  margin: 0 0 0.75rem;
  padding: 0.45rem;
  background: #101820;
  border: 1px solid var(--accent);
  border-radius: 8px;
}

.saved-places-list,
.places-manage-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.saved-places-list {
  max-height: min(14rem, 40dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.saved-place-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

.saved-place-option.is-selected {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.saved-place-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.saved-place-row {
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
}

.saved-place-row > .saved-place-option {
  flex: 1 1 auto;
  min-width: 0;
}

/* Star toggle in the saved places list: a real button, 44px touch target. */
.saved-place-star {
  --star-on: var(--warning);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.saved-place-star:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.saved-place-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.saved-place-star:disabled { opacity: 0.6; cursor: progress; }

.saved-place-star.is-favorite,
.saved-places-panel .saved-place-star.is-favorite {
  color: var(--star-on);
}

/* Light theme: the old #8a5a10 brown read as plain text. Gold #c27c0e is 3.4:1 on white
   (WCAG 1.4.11 icon contrast), with a thin dark edge so it reads as a filled star. */
html[data-theme="light"] .saved-place-star { --star-on: #c27c0e; }
html[data-theme="light"] .saved-place-star.is-favorite span { text-shadow: 0 0 0.5px #6b4505, 0 0 0.5px #6b4505; }

.saved-place-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.saved-place-title,
.saved-place-address,
.place-manage-item input,
.trip-place-detail {
  overflow-wrap: anywhere;
}

.saved-place-address {
  color: var(--muted);
  font-size: 0.75rem;
}

.saved-places-panel .form-message,
.other-wrap .form-message,
.place-manage-error,
#places-manage-status {
  margin-top: 0.35rem;
  min-height: 0;
}

.saved-places-panel .form-message:empty,
.other-wrap .form-message:empty,
.place-manage-error:empty,
#places-manage-status:empty {
  display: none;
}


.other-wrap > button.use-location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 8px;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--money);
  color: #10241b;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  flex: 1 1 100%;
}

.other-wrap > button.use-location:hover {
  background: var(--money);
  color: #10241b;
  border: 0;
}

/* 2.7.7: brand mint in both themes. Token is scoped to this button so
   --money stays the same everywhere else. #10241b on #8eecc4 is about 12:1. */
.other-wrap > button.use-location { --use-location-bg: #8eecc4; --use-location-fg: #10241b; }
html[data-theme="light"] .other-wrap > button.use-location,
html[data-theme="light"] .other-wrap > button.use-location:hover {
  background: var(--use-location-bg);
  color: var(--use-location-fg);
  border: 1px solid #2f9e6e;
}
html[data-theme="light"] .other-wrap > button.use-location:hover { background: #7fe3b8; }
.other-wrap > button.use-location:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.other-wrap > button.use-location .loc-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.other-wrap label {
  margin-top: 0.65rem;
}

.other-wrap label:first-of-type,
.saved-places-bar + label,
.saved-places-panel + label {
  margin-top: 0;
}

.places-sheet {
  z-index: 80;
}

body.places-sheet-open {
  overflow: hidden;
}

.places-manage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.place-manage-item {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  min-width: 0;
}

.place-manage-item .field {
  margin-bottom: 0.65rem;
}

.place-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.place-manage-actions .btn {
  flex: 1 1 8rem;
}

.place-star.is-on {
  background: var(--accent);
  border-color: var(--select-border);
  color: #fff;
}

.trip-place-detail {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

@media (max-width: 390px) {
  .other-wrap {
    padding: 0.65rem;
  }

  .place-manage-actions .btn.danger.compact {
    flex: 1 1 100%;
  }
}

.users-archive-filter {
  margin: 0 0 0.85rem;
}

.users-archive-filter[hidden],
#archive-affected[hidden],
#backup-empty[hidden],
#backup-running[hidden],
#backup-facts[hidden],
#backup-folder[hidden],
#backup-restore-running[hidden],
#backup-restore-file[hidden],
#backup-restore-selected[hidden],
#backup-restore-run[hidden],
#backup-restore-again[hidden] {
  display: none !important;
}

.needs-supervisor-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  min-height: 1.45rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning) 70%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
}

.archived-line {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.archive-affected {
  margin: 0.75rem 0;
}

.archive-affected-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.archive-affected-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  background: #121c28;
}

.archive-affected-copy {
  min-width: 0;
  flex: 1 1 8rem;
}

.archive-affected-name {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.archive-affected-copy .portal-meta {
  margin: 0.1rem 0 0;
}

body.archive-user-open,
body.location-archive-open {
  overflow: hidden;
}

#archive-user-error:empty,
#restore-user-error:empty,
#backup-message:empty,
#backup-restore-list-error:empty,
#backup-restore-message:empty {
  display: none;
}

.backup-facts {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0;
}

.backup-facts div {
  display: grid;
  gap: 0.1rem;
}

.backup-facts dt {
  color: var(--muted);
  font-size: 0.75rem;
}

.backup-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.backup-running-note {
  margin: 0.65rem 0 0;
  color: var(--warning);
  font-weight: 600;
}

.backup-folder-row {
  margin: 0.35rem 0 0.75rem;
}

.backup-folder-link {
  color: var(--accent);
  font-weight: 600;
}

.backup-restore {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.backup-restore h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}

.backup-restore .hint-block {
  margin-bottom: 0.75rem;
}

.backup-restore .field {
  margin-bottom: 0.75rem;
}

.backup-restore .actions {
  flex-direction: column;
}

.backup-restore .actions .btn {
  flex: 1 1 auto;
  width: 100%;
}

#backup-restore-selected {
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
}

#backup-restore-file {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.restore-preview-summary {
  margin: 0.35rem 0 0.45rem;
  font-size: 0.85rem;
}

.restore-preview {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
}

.restore-preview th,
.restore-preview td {
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.restore-preview th:nth-child(n + 2),
.restore-preview td:nth-child(n + 2) {
  width: 4.7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.restore-preview th:nth-child(n + 2) {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
}

.restore-preview th:first-child,
.restore-preview td:first-child {
  overflow-wrap: anywhere;
}

.restore-preview tfoot th,
.restore-preview tfoot td {
  font-weight: 700;
}

.restore-excluded {
  margin-top: 0.15rem;
}

/* Admin › Settings: customization, integrations, domain. Phone-first. */
.settings-card {
  margin: 0 0 1.25rem;
  min-width: 0;
  max-width: 100%;
}

.settings-card h3,
.settings-card h4 {
  margin: 0 0 0.45rem;
}

.settings-card h4 {
  font-size: 0.95rem;
  font-weight: 650;
}

.settings-card .hint-block {
  margin-bottom: 0.75rem;
}

.settings-product {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.settings-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.settings-label-row label {
  margin: 0;
}

.source-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.color-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.color-controls input[type="color"] {
  flex: 0 0 auto;
  width: 3rem;
  height: var(--tap-min);
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.color-controls input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.brand-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.35rem 0 0.85rem;
  max-width: 100%;
}

.brand-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: var(--brand);
  color: var(--bg);
  font-weight: 700;
  overflow: hidden;
}

.brand-preview-bar span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.brand-preview-bar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-preview-accent {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

.settings-card .actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.settings-card .actions .btn {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.settings-card fieldset.settings-group {
  margin: 0 0 1rem;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.settings-card legend {
  padding: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.secret-status {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.asset-list {
  margin-top: 0.35rem;
}

.asset-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.asset-body {
  width: 100%;
  min-width: 0;
}

.asset-body > label {
  display: block;
  font-weight: 650;
  margin-bottom: 0.2rem;
}

.asset-row input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.35rem 0;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.asset-thumb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-empty {
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
  padding: 0.25rem;
  line-height: 1.25;
}

.dns-wrap {
  max-width: 100%;
  margin: 0.75rem 0;
  overflow: hidden;
}

.dns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.dns-table caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 0.45rem;
}

.dns-table th,
.dns-table td {
  text-align: left;
  padding: 0.35rem 0.25rem;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dns-copy-btn {
  min-height: var(--tap-min);
}

.btn .btn-spinner {
  width: 1rem;
  height: 1rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  display: inline-block;
  vertical-align: -0.15rem;
  animation: settings-spin 0.7s linear infinite;
}

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

@media (max-width: 420px) {
  .dns-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

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

  .dns-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    margin: 0 0 0.55rem;
    background: var(--surface);
  }

  .dns-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.2rem 0;
  }

  .dns-table td::before {
    content: attr(data-label);
    flex: 0 0 3.4rem;
    color: var(--muted);
    font-size: 0.72rem;
  }

  .dns-table td.dns-copy {
    justify-content: stretch;
  }

  .dns-table td.dns-copy::before {
    content: none;
  }

  .dns-table td.dns-copy .dns-copy-btn {
    width: 100%;
  }
}

@media (min-width: 480px) {
  .settings-card .actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .settings-card .actions .btn {
    width: auto;
    flex: 1 1 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn .btn-spinner {
    animation: none;
  }
}

/* Admin › Locations. Phone-first; stacked at 360px and 390px. */
.locations-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  min-width: 0;
}

.locations-list,
.loc-import-rows {
  list-style: none;
  margin: 0.75rem 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.location-row,
.loc-form-row,
.loc-import-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.8rem;
  background: var(--surface-2);
  min-width: 0;
  max-width: 100%;
}

.location-row-name,
.loc-import-title {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.location-row-meta,
.location-row-address,
.loc-import-row p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.location-row .actions {
  margin-top: 0.7rem;
}

.loc-form-row legend {
  padding: 0;
  font-weight: 700;
}

.loc-combo {
  min-width: 0;
}

.loc-suggest {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  max-height: 16rem;
  overflow: auto;
}

.loc-suggest[hidden] {
  display: none !important;
}

.loc-suggest-option {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

.loc-suggest-option[aria-selected="true"],
.loc-suggest-option:hover,
.loc-suggest-option:focus-visible {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  outline: none;
}

.loc-dup {
  margin: 0.85rem 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}

.loc-dup legend {
  padding: 0 0.25rem;
  font-weight: 700;
}

.loc-dup-choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tap-min);
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
}

.loc-dup-choice input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0;
}

.loc-import-summary {
  margin: 0.75rem 0 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.loc-import-warn {
  color: var(--warning);
}

.loc-import-err {
  color: var(--danger);
}

.form-message.notice {
  color: var(--warning);
}

#locations-screen,
#locations-browse,
#locations-form,
#locations-upload-card,
#locations-ferry-card {
  min-width: 0;
  max-width: 100%;
}

#locations-screen input[type="file"] {
  max-width: 100%;
  min-width: 0;
}

#locations-form[hidden],
#locations-browse[hidden],
#locations-row-1[hidden],
#ferry-details[hidden],
#locations-restore-wrap[hidden],
#locations-upload-phase[hidden],
#locations-empty[hidden] {
  display: none !important;
}

@media (max-width: 390px) {
  .locations-add-actions,
  .loc-upload-actions,
  .location-row .actions,
  #locations-form .actions,
  #locations-ferry-card .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .locations-add-actions .btn,
  .loc-upload-actions .btn,
  .location-row .actions .btn,
  #locations-form .actions .btn,
  #locations-ferry-card .actions .btn {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* v2 stage 1: shared frame. Screens keep their own layout inside it. */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border: #e3e8ee;
  --text: #1c2836;
  --muted: #5c6d80;
  --accent: #1e72c1;
  --accent-dim: #1b6cb8;
  --brand: #0b7d5a;
  --money: #0b7d5a;
  --select-text: #fff;
  --select-from: #2277c9;
  --select-to: #1b6cb8;
  --select-border: #155a9a;
  --action-from: #2277c9;
  --action-to: #1e72c1;
  --action-border: #1b6cb8;
  --action-shadow: rgba(31, 116, 196, 0.28);
  --wash-a: rgba(27, 108, 184, 0.08);
  --wash-b: rgba(142, 236, 196, 0.16);
  --wash-c: rgba(27, 108, 184, 0.04);
  --hatch: rgba(27, 108, 184, 0.035);
  --hatch-2: rgba(142, 236, 196, 0.06);
  --bg-from: #f7f9fb;
  --bg-mid: #f4f6f8;
  --bg-to: #edf8f3;
  --success: #0b7d5a;
  --danger: #c43131;
  --warning: #8a5a10;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.05);
  --field-bg: #ffffff;
  --field-border: #cfd6e0;
  --label: #3d4d5e;
  --chrome: #ffffff;
  --map-bg: #e7eef5;
  --map-water: #c5d9ea;
  --map-route: #2fae7c;
  --map-ferry: #1b6cb8;
  --map-pin: #c43131;
  --mint: #8eecc4;
  --on-mint: #073322;
}

html[data-theme="light"] body {
  color-scheme: light;
}

html[data-theme="light"] .btn.primary,
html[data-theme="light"] .help-menu-btn {
  color: #fff;
}

html[data-theme="light"] .btn.ghost:hover,
html[data-theme="light"] .btn.secondary:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-2);
}

#app-shell .header .brand,
#app-shell .header-top {
  display: none;
}

.v2-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  margin: -1.25rem calc(var(--page-pad-x) * -1) 1rem;
  padding: 6px var(--page-pad-x);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 46;
}

.v2-menu,
.v2-theme {
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--field-border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.v2-menu {
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 44px;
}

.v2-theme {
  padding: 0 12px;
  font-size: 0.95rem;
}

.v2-top-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v2-top-title img,
.v2-brand img {
  border-radius: 8px;
}

.v2-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(12, 18, 25, 0.45);
}

.v2-backdrop[hidden] {
  display: none !important;
}

.v2-sidebar {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
  bottom: var(--tabbar-height);
  width: min(20rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-105%);
  transition: transform 0.18s ease;
  overflow: auto;
}

body.v2-nav-open .v2-sidebar {
  transform: none;
}

.v2-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 8px;
}

.v2-brand-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v2-brand-tag {
  color: var(--muted);
  font-size: 12px;
}

.v2-sidebar .role-switch {
  width: auto;
  margin: 4px 12px 8px;
  flex: none;
}

.v2-sidebar .role-switch select {
  font-size: 16px;
}

/* Solo light theme: the inline wordmark text is near-white (#eef4fa) for dark backgrounds.
   Draw it in the light-theme text navy so it reads on light cards; dark theme keeps the white text.
   wp-solo-brand is set before first paint from a cached flag, wp-solo once /api/config loads. */
html[data-theme="light"].wp-solo .brand h1.wordmark svg .wordmark-text,
html[data-theme="light"].wp-solo-brand .brand h1.wordmark svg .wordmark-text {
  fill: #1c2836;
}
/* Solo sign-in, create-account, forgot and reset cards, light and dark: show one logo, the W + wordmark
   lockup (letters navy on light, #eef4fa on dark), not the large app icon beside it. */
html.wp-solo .login-card .brand > .brand-logo,
html.wp-solo-brand .login-card .brand > .brand-logo {
  display: none;
}
html.wp-solo .login-card .brand h1.wordmark svg,
html.wp-solo-brand .login-card .brand h1.wordmark svg {
  width: min(15rem, 62vw);
}

/* Solo hides the role selector. Park Help on the logo row and drop the empty label row. */
.v2-sidebar:has(#role-switch[hidden]) .role-switch {
  width: auto;
  height: 0;
  margin: 0;
  overflow: visible;
}

.v2-sidebar:has(#role-switch[hidden]) .role-switch-head {
  position: absolute;
  top: 16px;
  right: 12px;
  height: 36px;
  margin: 0;
  align-items: center;
  justify-content: flex-end;
}

.v2-sidebar:has(#role-switch[hidden]) .role-switch > .form-message {
  display: none !important;
}

.v2-sidebar:has(#role-switch[hidden]) .v2-brand {
  padding-right: 4.5rem;
}

.v2-sidebar:has(#role-switch[hidden]) .v2-brand > div {
  min-width: 0;
  flex: 1 1 auto;
}

.v2-sidebar:has(#role-switch[hidden]) .v2-brand-name,
.v2-sidebar:has(#role-switch[hidden]) .v2-brand-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-sidenav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  flex: 1;
}

.v2-nav {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.v2-nav[hidden] {
  display: none !important;
}

.v2-nav.is-current {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.v2-side-foot {
  padding: 8px 12px 16px;
}

.v2-side-foot .v2-theme {
  width: 100%;
}

body.v2-nav-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.host-employee #app-shell.app {
    max-width: 430px;
    margin: 0 auto;
    padding: 1.5rem 1rem calc(5.5rem + env(safe-area-inset-bottom));
    box-shadow: 0 0 0 1px var(--border);
    min-height: 100vh;
  }

  body.host-employee .v2-sidebar,
  body.host-employee .v2-backdrop {
    display: none !important;
  }

  body.host-employee .v2-topbar {
    display: flex;
  }

  body.host-employee .tabbar {
    display: block;
    left: 50%;
    width: min(430px, 100%);
    right: auto;
    transform: translateX(-50%);
  }

  #app-shell.app {
    max-width: none;
    margin: 0;
    padding: 1.5rem 2rem 2.5rem calc(16rem + 2rem);
  }

  .v2-topbar {
    display: none;
  }

  .v2-sidebar {
    top: 0;
    bottom: 0;
    width: 16rem;
    transform: none;
  }

  .v2-backdrop {
    display: none !important;
  }

  .tabbar,
  .tabbar-cue {
    display: none !important;
  }

  body.v2-nav-open {
    overflow: auto;
  }
}

@media (max-width: 390px) {
  .v2-theme {
    font-size: 0.85rem;
    padding: 0 8px;
  }
}

/* v2 stage 2: employee screens only. Other roles keep the stage 1 layout. */

#employee-log-trip {
  display: none;
}

.claim-progress[hidden],
.reimburse-queue[hidden],
.trip-detail-sheet[hidden],
.trip-delete-sheet[hidden] {
  display: none !important;
}

.claim-tracker {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
  padding: 0;
}

.claim-tracker li {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.2;
}

.claim-tracker i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  margin-bottom: 6px;
}

.claim-tracker li.is-done {
  color: var(--money);
}

.claim-tracker li.is-done i,
.claim-tracker li.is-now i {
  background: var(--money);
}

.claim-tracker li.is-now {
  color: var(--text);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
}

.claim-history {
  margin-top: 8px;
}

.claim-history summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}

.claim-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.claim-timeline-list li {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.claim-timeline-list li.is-backfilled {
  color: var(--muted);
}

.claim-timeline-when {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.reimburse-queue h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.route-map {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.trip-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.trip-detail-sheet,
.trip-delete-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.trip-delete-sheet {
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.trip-delete-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 12, 18, 0.55);
}

.trip-detail-panel,
.trip-delete-card {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.trip-detail-panel {
  height: 100%;
  overflow: auto;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
}

.trip-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
}

.trip-detail-head h2,
.trip-delete-card h2 {
  margin: 0;
}

.trip-detail-facts {
  margin: 8px 0 0;
}

.trip-detail-facts div {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.trip-detail-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trip-detail-facts dd {
  margin: 2px 0 0;
}

.trip-detail-actions,
.trip-delete-card .trip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.trip-delete-card {
  width: min(100%, 28rem);
  border-radius: 16px;
  padding: 16px;
}

.trip-delete-card .btn,
.trip-detail-actions .btn {
  width: 100%;
}

body.trip-detail-open,
body.trip-delete-open {
  overflow: hidden;
}

body.role-employee #employee-log-trip {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 56px;
  margin: 0 0 14px;
  font-size: 1.05rem;
}

@media (max-width: 600px) {
  /* 2.5.61: same cause on the Dashboard: body.role-employee #employee-log-trip is display:flex with no align-items,
     so its text stretches to the top of the 48px button (~5px high at 412px). Center it; phones only, desktop unchanged. */
  html.wp-solo body.role-employee #employee-log-trip {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

body.role-employee #view-dashboard > h2,
body.role-employee #view-new-trip > h2,
body.role-employee #view-saved-trips h2,
body.role-employee #view-reimbursement > h2,
body.role-employee #account-panel > h2 {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

body.role-employee #view-dashboard .dashboard-figure,
body.role-employee #dashboard-miles {
  color: var(--money);
}

body.role-employee #view-new-trip #distance-result {
  background: color-mix(in srgb, var(--money) 18%, var(--surface));
  border-radius: 14px;
  padding: 14px;
}

body.role-employee #view-new-trip .actions-sticky .btn.primary,
body.role-employee #view-reimbursement .export-actions {
  display: grid;
  gap: 8px;
}

body.role-employee #view-reimbursement .export-actions .btn {
  width: 100%;
}

body.role-employee #view-saved-trips .trips-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.role-employee #view-saved-trips .employee-trip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  margin: 0 0 10px;
  box-shadow: var(--shadow);
}

body.role-employee #view-saved-trips .employee-trip .trip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.role-employee #view-saved-trips .employee-trip .trip-actions .btn {
  width: 100%;
  min-height: 44px;
}

body.role-employee #view-saved-trips .route-map,
body.role-employee #trip-detail-map .route-map {
  margin-bottom: 8px;
}

body.role-employee #trips-filters .export-chips,
body.role-employee #view-reimbursement .export-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

body.role-employee #profile-theme .switch-row {
  min-height: 44px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

body.role-employee #claim-status {
  display: none !important;
}

body.role-employee .submission-row .claim-tracker {
  margin-top: 8px;
}

/* v2 stage 3: Admin Users, Locations, and Settings. Other roles keep their screens. */

body.role-admin .users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

body.role-admin .users-table th,
body.role-admin .users-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

body.role-admin .users-table th {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}

body.role-admin tr.user-row {
  display: table-row;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

body.role-admin .users-name {
  font-weight: 700;
}

body.role-admin .users-table .role-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 4px 4px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

body.role-admin .users-table .user-row-actions {
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
  max-width: 16rem;
  align-items: center;
  gap: 6px;
}

body.role-admin .users-table .user-test-mode,
body.role-admin .users-table .user-access {
  flex: 1 1 100%;
}

body.role-admin.admin-inline-open #view-users-edit,
body.role-admin.admin-inline-open #view-users-new {
  margin-top: 12px;
  border-top: 3px solid var(--accent);
}

body.role-admin #view-admin [data-settings-screen="home"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

body.role-admin #view-admin [data-settings-screen="home"] > h2,
body.role-admin #view-admin [data-settings-screen="home"] > .hint-block,
body.role-admin #view-admin [data-settings-screen="home"] > .account-hub,
body.role-admin #customization-card,
body.role-admin #integrations-card,
body.role-admin #domain-card,
body.role-admin #backup-card {
  grid-column: 1 / -1;
}

body.role-admin #view-admin .portal-card,
body.role-admin #view-admin .account-hub {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

@media (min-width: 721px) {
  body.role-admin #locations-screen .locations-list {
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }

  body.role-admin #locations-screen .location-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1.1fr) minmax(8rem, 1fr) minmax(0, 2fr) auto;
    gap: 8px 12px;
    align-items: center;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    padding: 10px 12px;
  }

  body.role-admin #locations-screen .location-row-meta,
  body.role-admin #locations-screen .location-row-address,
  body.role-admin #locations-screen .location-row .actions {
    margin: 0;
  }

  body.role-admin #locations-screen .location-row .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }

  body.role-admin #locations-screen .location-row .actions .btn {
    width: auto;
    min-height: 36px;
  }
}

@media (max-width: 720px) {
  body.role-admin #view-admin [data-settings-screen="home"] {
    grid-template-columns: 1fr;
  }

  body.role-admin .users-table,
  body.role-admin .users-table tbody,
  body.role-admin tr.user-row,
  body.role-admin .users-table td {
    display: block;
    width: 100%;
  }

  body.role-admin .users-table thead {
    display: none;
  }

  body.role-admin tr.user-row {
    border-bottom: 1px solid var(--border);
    padding: 10px 0 12px;
  }

  body.role-admin .users-table td {
    border: 0;
    padding: 4px 10px;
  }

  body.role-admin .users-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.role-admin .users-table .user-row-actions {
    max-width: none;
  }

  body.role-admin .users-table .user-row-actions .btn {
    min-height: 44px;
  }

  body.role-admin.admin-inline-open #view-users-edit,
  body.role-admin.admin-inline-open #view-users-new {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    overflow: auto;
    border-radius: 0;
    max-height: 100dvh;
  }
}

/* v2 stage 4: Finance queue, Submissions review, and claim detail. */

.finance-export-row {
  align-items: flex-end;
}

.finance-export-choice {
  flex: 1 1 16rem;
  max-width: 28rem;
  margin: 0;
}

.finance-table,
.review-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.finance-table th,
.finance-table td,
.review-table th,
.review-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.finance-table th,
.review-table th {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}

.finance-name,
.review-name {
  font-weight: 700;
}

.finance-actions,
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.finance-actions .btn,
.review-actions .btn {
  flex: none;
  width: auto;
  min-width: 0;
}

.claim-detail-sheet[hidden],
.claim-detail-sheet.hidden {
  display: none !important;
}

.claim-detail-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.claim-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.55);
}

.claim-detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 32rem);
  overflow: auto;
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}

.claim-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.claim-detail-head h2 {
  margin: 0;
}

.claim-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.claim-detail-stats div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
}

.claim-detail-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.claim-detail-stats b {
  font-size: 1.15rem;
}

body.claim-detail-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  #view-finance .chip,
  .claim-detail-head .btn,
  .finance-actions .btn,
  .review-actions .btn {
    min-height: 44px;
  }

  .claim-detail-panel {
    width: 100%;
    border-left: 0;
  }

  .finance-table,
  .finance-table tbody,
  .finance-table tr,
  .finance-table td,
  .review-table,
  .review-table tbody,
  .review-table tr,
  .review-table td {
    display: block;
    width: 100%;
  }

  .finance-table thead,
  .review-table thead {
    display: none;
  }

  .finance-table tr,
  .review-table tr {
    border-bottom: 1px solid var(--border);
    padding: 10px 0 12px;
  }

  .finance-table td,
  .review-table td {
    border: 0;
    padding: 4px 10px;
  }

  .finance-table td::before,
  .review-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #view-reports input,
  #view-archive input,
  #view-reports .chip,
  .report-detail-sheet .btn,
  .reports-table .btn,
  .archive-table .btn {
    min-height: 44px;
    font-size: 16px;
  }

  #view-reports,
  #view-archive,
  .reports-trip-wrap,
  .archive-table,
  .reports-table {
    max-width: 100%;
    min-width: 0;
  }
}

/* v2 stage 5: Reports and Archive console. */

.reports-range {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.reports-month-field {
  margin: 0;
  max-width: 16rem;
}

.reports-range .export-chips,
.reports-range .field-row .field {
  margin-bottom: 0;
}

.reports-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.reports-stats div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 0;
}

.reports-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reports-stats b {
  font-size: 1.15rem;
}

.reports-trip-wrap {
  margin-top: 12px;
  min-width: 0;
}

#report-detail-map {
  margin: 12px 0 8px;
}

#report-detail-map .route-map {
  border: 1px solid var(--border);
  background: var(--surface);
}

.archive-files-row td {
  background: var(--surface-2);
}

body.report-detail-open {
  overflow: hidden;
}

@media (min-width: 900px) {
  .reports-range {
    grid-template-columns: 14rem auto minmax(0, 1fr);
    align-items: end;
  }
}

@media (max-width: 420px) {
  .reports-stats {
    grid-template-columns: 1fr;
  }
}

/* Payments lives inside Finance. The log stacks on a phone. */
#finance-payments,
#payments-log,
.payment-row {
  min-width: 0;
  max-width: 100%;
}

.payments-upload-bar {
  margin: 0 0 0.75rem;
}

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

.payment-row.is-flagged {
  border-color: rgba(230, 192, 123, 0.5);
  box-shadow: inset 3px 0 0 var(--warning);
}

.payment-row h3,
.payment-row p {
  overflow-wrap: anywhere;
}

.payments-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin: 0.3rem 0 0;
}

.payments-amounts span {
  font-variant-numeric: tabular-nums;
}

.payments-amount-current.is-changed {
  color: var(--warning);
  font-weight: 700;
}

.payment-flag {
  margin: 0.3rem 0 0;
  color: var(--warning);
  font-weight: 650;
}

.payments-mismatch-facts {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.55rem 0 0.75rem;
}

.payments-mismatch-facts div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.payments-mismatch-facts div.is-off {
  border-color: rgba(230, 192, 123, 0.7);
}

.payments-mismatch-facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.payments-mismatch-facts dd {
  margin: 0 0 0.35rem;
  overflow-wrap: anywhere;
}

.payments-mismatch-facts dd:last-child {
  margin-bottom: 0;
}

#payments-preview[hidden],
#payments-mismatch[hidden] {
  display: none !important;
}

#payments-upload-save,
#payments-mismatch-confirm {
  width: 100%;
  margin: 0 0 0.75rem;
}

#payments-upload-file {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 16px;
}

.payment-email-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.payment-email-check input {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
}

body.payments-sheet-open {
  overflow: hidden;
}

#payment-email-template {
  font-size: 16px;
  min-height: 8rem;
}

@media (max-width: 420px) {
  #payments-upload-open,
  .payment-row .inbox-actions .btn {
    width: 100%;
    min-height: 44px;
  }

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

  .payment-row .inbox-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .payment-row .inbox-actions .btn {
    flex: 1 1 8rem;
  }

  #view-finance,
  #view-admin,
  #view-users-edit {
    overflow-x: hidden;
  }
}

.v2-nav svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.v2-nav { gap: 10px; }
.v2-settings-group { display: flex; flex-direction: column; gap: 2px; }
.v2-settings-group[hidden] { display: none !important; }
.v2-chev {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg);
}
#v2-nav-settings[aria-expanded="true"] .v2-chev { transform: rotate(45deg); }
.v2-subnav { display: flex; flex-direction: column; margin: 0 4px 6px 28px; padding-left: 8px; border-left: 1px solid var(--border); }
.v2-subnav[hidden] { display: none !important; }
.v2-sub[hidden] { display: none !important; }
.v2-sub {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--muted);
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.v2-sub.is-current { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 650; }
.v2-sub-label {
  margin: 8px 8px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.v2-sub-label[hidden] { display: none !important; }
.color-reset {
  width: 100%;
  margin-top: 0.45rem;
  white-space: normal;
  line-height: 1.25;
}
.v2-collapse {
  width: 36px;
  height: 36px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.v2-side-foot { display: flex; flex-direction: column; align-items: stretch; }
.settings-gap {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--text);
  font-weight: 650;
}
.settings-status { margin: 0; font-size: 1.15rem; font-weight: 700; }
.settings-steps { margin: 10px 0; }
#view-admin[data-settings-page]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page] { display: none !important; }
#view-admin[data-settings-page="mileage"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="mileage"],
#view-admin[data-settings-page="trips"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="trips"],
#view-admin[data-settings-page="locations"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="locations"],
#view-admin[data-settings-page="forms"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="forms"],
#view-admin[data-settings-page="paymail"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="paymail"],
#view-admin[data-settings-page="auth"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="auth"],
#view-admin[data-settings-page="storage"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="storage"],
#view-admin[data-settings-page="maps"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="maps"],
#view-admin[data-settings-page="modules"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="modules"],
#view-admin[data-settings-page="signing"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="signing"],
#view-admin[data-settings-page="email"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="email"],
#view-admin[data-settings-page="branding"]:not([data-settings-page=""]) [data-settings-screen="home"] [data-settings-page~="branding"] { display: block !important; }
#view-admin[data-settings-page]:not([data-settings-page=""]) #integrations-card,
#view-admin[data-settings-page]:not([data-settings-page=""]) #integrations-form { display: contents; }
#view-admin[data-settings-page]:not([data-settings-page=""]) [data-settings-screen="home"] .is-page-off { display: none !important; }
#view-admin[data-settings-page]:not([data-settings-page="email"]):not([data-settings-page="auth"]):not([data-settings-page="storage"]):not([data-settings-page="signing"]) #encryption-note { display: none !important; }
html[data-theme="light"] #app-shell .session-chip {
  background: #fff;
  color: #1c2836;
  border-color: #e3e8ee;
  box-shadow: none;
}
html[data-theme="light"] #session-label,
html[data-theme="light"] #session-label strong { color: #1c2836; }
html[data-theme="light"] #app-shell .header:has(#session-chip:not(.hidden)) #account-select { display: none !important; }
@media (min-width: 1024px) {
  body.v2-collapsed #app-shell.app { padding-left: calc(4.5rem + 2rem); }
  body.v2-collapsed .v2-sidebar { width: 4.5rem; }
  body.v2-collapsed .v2-nav-label,
  body.v2-collapsed .v2-brand > div,
  body.v2-collapsed .v2-chev,
  body.v2-collapsed .v2-subnav,
  body.v2-collapsed .role-switch,
  body.v2-collapsed .v2-theme-switch > span:first-child { display: none; }
  body.v2-collapsed .v2-brand,
  body.v2-collapsed .v2-nav,
  body.v2-collapsed .v2-side-foot { justify-content: center; }
  body.v2-collapsed .v2-nav { padding-inline: 0; }
}
@media (max-width: 1023px) {
  .v2-sidebar { width: 100%; }
}
@media (max-width: 400px) {
  #view-admin, #view-finance, #view-admin input, #view-admin select, #view-admin textarea { max-width: 100%; }
  #view-admin .portal-card, #view-admin .settings-page, #view-admin .field { min-width: 0; }
  #view-admin .settings-group { min-width: 0; }
}

.password-change-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  background: var(--bg, #0c1219);
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    0.75rem
    calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.password-change-gate[hidden] {
  display: none !important;
}

.password-change-card {
  width: min(22rem, 100%);
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
}

.password-change-card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.password-change-card .field,
.password-change-card .actions,
.password-change-card input,
.password-change-card .btn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.password-change-card .actions .btn {
  flex: 1 1 100%;
}

#users-edit-super[hidden] {
  display: none !important;
}

#users-edit-super .switch-row input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.footer-support-row {
  margin-top: 0.35rem;
}

.footer-support-row a {
  color: var(--money);
  font-size: 0.75rem;
}

.footer-support-row[hidden] {
  display: none !important;
}

.help-menu-panel [hidden] {
  display: none !important;
}

/* Solo terms consent (2.3.3): minimal; UI Bot owns final styling. */
.solo-terms { margin: 0 0 0.75rem; font-size: 0.9rem; }
.solo-terms.needs-attention { outline: 2px solid #ff6b6b; outline-offset: 4px; border-radius: 4px; }

/* Two-step sign-in */
.two-factor-form [hidden],
.security-card [hidden],
.password-breach-tip[hidden],
#recovery-low-banner[hidden],
#two-factor-email-link[hidden] {
  display: none !important;
}

.login-card.two-factor-open #password-login-form,
.login-card.two-factor-open #forgot-password-form,
.login-card.two-factor-open #login-divider,
.login-card.two-factor-open #google-signin-wrap,
.login-card.two-factor-open #register-panel,
.login-card.two-factor-open #login-footnote {
  display: none !important;
}

.two-factor-form h2,
.security-card h3,
.security-card h4 {
  margin: 0 0 0.35rem;
}

.security-card h4 {
  margin-top: 0.85rem;
  font-size: 1.05rem;
}

.otp-field {
  position: relative;
  margin: 0.75rem 0 0.25rem;
}

.otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 1rem;
  caret-color: transparent;
}

.otp-boxes {
  display: flex;
  gap: 6px;
}

.otp-box {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
}

.otp-box.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.two-factor-form .btn,
.security-card .btn,
.security-dialog .btn {
  width: 100%;
  margin-top: 0.75rem;
}

.two-factor-form .btn.link,
.muted-link {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  text-align: center;
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 600;
  min-height: 2.4rem;
  box-shadow: none;
}

.muted-link {
  color: var(--muted);
}

.btn.ghost.is-waiting,
.btn.ghost:disabled.is-waiting {
  opacity: 0.45;
}

.mono {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
}

.center {
  text-align: center;
}

.security-card.is-unavailable {
  display: none !important;
}

.security-method {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 0.9rem;
  margin-top: 0.7rem;
}

.security-method-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.status-pill {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
}

.status-pill.is-on {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  border-color: transparent;
}

.btn.danger-ghost {
  background: transparent;
  color: #ff8a8d;
  border-color: #a33a3f;
  box-shadow: none;
}

.btn.danger {
  background: linear-gradient(#ef5a5f, #c9353a);
  color: #fff;
  border-color: #9e2a2e;
  box-shadow: 0 4px 14px rgba(201, 53, 58, 0.35);
}

.warn-banner {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: #3a2f12;
  border: 1px solid #a7832a;
  color: #ffe3a3;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin: 0.7rem 0;
  font-size: 0.88rem;
}

/* 2.5.20 Solo read-only banner (bannerText + Resubscribe). [data-org-only] is hidden in Solo by app.js. */
.solo-readonly-banner { align-items: center; }
.solo-readonly-banner .btn { flex: none; font-weight: 600; }
.solo-readonly-banner { flex-wrap: wrap; }
.solo-readonly-banner > p { flex: 1 1 220px; margin: 0; }
.solo-readonly-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.solo-readonly-banner .btn[disabled] { opacity: 0.6; cursor: progress; }
.solo-readonly-export-msg { flex: 1 1 100%; margin: 0; font-size: 0.9em; font-weight: 600; }
.solo-readonly-export-msg[hidden] { display: none; }
.solo-readonly-banner .btn[hidden] { display: none; }
html[data-theme="light"] .solo-readonly-banner { background: #fff4d6; border-color: #c99a2e; color: #5a4210; }
html[data-theme="light"] .solo-readonly-banner .btn { color: #5a4210; border-color: #c99a2e; }
[data-org-only][hidden] { display: none !important; }

.warn-banner p {
  margin: 0;
  flex: 1;
}

.warn-banner .btn {
  width: auto;
  margin: 0;
  color: #ffe3a3;
  border-color: #a7832a;
}

.security-qr {
  width: 180px;
  height: 180px;
  margin: 0.4rem auto 0.6rem;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
}

.security-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.7rem 0;
}

.recovery-codes div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.security-code-actions {
  display: flex;
  gap: 0.5rem;
}

.security-code-actions .btn {
  flex: 1;
}

.security-saved {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.8rem;
}

.field.is-invalid input {
  border-color: #e5484d;
}

.password-breach-tip {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.security-dialog {
  border: 1px solid #a33a3f;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 1.15rem;
  width: min(400px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
}

.security-dialog::backdrop {
  background: rgba(5, 8, 12, 0.75);
}

.security-dialog h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.security-recovery {
  margin: 0.8rem 0 0;
}
.solo-plan-card .plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.solo-plan-card .plan-head h3 { margin: 0; }
.plan-pill {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.plan-pill.is-active { background: rgba(126, 232, 181, 0.15); color: var(--brand); }
.plan-pill.is-trial { background: rgba(61, 156, 240, 0.18); color: #9ccfff; }
.plan-pill.is-muted { background: var(--surface-2); color: var(--muted); }
.plan-pill[hidden] { display: none; }
.solo-plan-card .plan-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.solo-plan-card .plan-kv[hidden] { display: none; }
.solo-plan-card .plan-kv span:first-child { color: var(--muted); }
.solo-plan-card .plan-note {
  background: rgba(126, 232, 181, 0.08);
  border: 1px solid rgba(126, 232, 181, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--brand);
}
.solo-plan-card .plan-portal-note { text-align: center; margin-top: 8px; }
.solo-plan-card #solo-plan-manage { width: 100%; margin-top: 14px; }
/* Solo Plan card (2552, Eon-approved mockups): badge with a 1px currentColor edge so the badge never relies on fill
   alone; light Trial text #155a9a (live #9ccfff failed at 1.38:1); amber Canceling, red Payment due, gray Ended.
   Text >= 4.5:1 on the flattened badge and edge >= 3:1 on the card, light and dark (tests/solo-plan-card-2552). */
html.wp-solo .plan-pill { border: 1px solid currentColor; }
html.wp-solo[data-theme="light"] .plan-pill.is-trial { color: #155a9a; background: rgba(27, 108, 184, 0.10); }
html.wp-solo .plan-pill.is-warm { color: #e6c07b; background: rgba(230, 192, 123, 0.16); }
html.wp-solo[data-theme="light"] .plan-pill.is-warm { color: #8a5a10; background: rgba(138, 90, 16, 0.10); }
html.wp-solo .plan-pill.is-due { color: #ff9aa0; background: rgba(240, 113, 120, 0.10); }
html.wp-solo[data-theme="light"] .plan-pill.is-due { color: #a82424; background: rgba(196, 49, 49, 0.06); }
html.wp-solo[data-theme="light"] .plan-pill.is-muted { background: #eef1f4; }
html.wp-solo .solo-plan-card .plan-line { margin: 10px 0 0; }
html.wp-solo .solo-plan-card .plan-line[hidden] { display: none; }
html.wp-solo .solo-plan-card #solo-plan-resume { width: 100%; margin-top: 14px; }
html.wp-solo .solo-plan-card #solo-plan-choose { margin-top: 12px; }

.solo-mileage-card h3 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
}

.solo-mileage-card .solo-rate-choices {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.solo-mileage-card .solo-rate-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap-min);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field-bg);
  cursor: pointer;
  font-weight: 600;
}

.solo-mileage-card .solo-rate-choice:has(input:checked) {
  border-color: var(--accent);
}

.solo-mileage-card .solo-rate-choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.solo-mileage-card .solo-rate-choice input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.solo-mileage-card [data-solo-rate-custom] {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.solo-mileage-card .actions {
  margin-top: 0.85rem;
}

/* 2.7.0 org: static route thumbnail (from Solo 2.5.8). */
/* Static route thumbnail. 16:9 map, same corner radius as other cards. */
.trip-gmap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 8px 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.trip-gmap.hidden,
.trip-gmap[hidden] {
  display: none;
}
.trip-gmap-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.trip-gmap-img,
.trip-gmap-skeleton {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.trip-gmap-img {
  object-fit: contain;
  background: var(--map-bg);
}
.trip-gmap-credit {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted);
}
.trip-gmap-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: trip-gmap-shimmer 1.2s ease-in-out infinite;
}
@keyframes trip-gmap-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trip-gmap-skeleton { animation: none; }
}
body.trip-gmap-open { overflow: hidden; }
.trip-gmap-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
}
.trip-gmap-modal[hidden],
.trip-gmap-modal.hidden {
  display: none !important;
}
.trip-gmap-modal-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
}
.trip-gmap-enlarged {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
}
.trip-gmap-enlarged .trip-gmap-open,
.trip-gmap-enlarged .trip-gmap-img,
.trip-gmap-enlarged .trip-gmap-skeleton {
  aspect-ratio: auto;
  max-width: none;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.trip-gmap-enlarged .trip-gmap-img {
  object-fit: contain;
  background: var(--map-bg);
}

#view-saved-trips .trip-gmap {
  max-width: 400px;
}

/* 2.7.0 org: business-name suggestions under the Other address field. */
.place-suggest {
  list-style: none;
  margin: 4px 0 8px;
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  max-height: 260px;
  overflow-y: auto;
}
.place-suggest.hidden,
.place-suggest[hidden] { display: none; }
.place-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  min-height: 44px;
  justify-content: center;
  cursor: pointer;
}
.place-suggest-item:hover,
.place-suggest-item:focus { background: var(--surface-2); outline: none; }
.place-suggest-name { font-weight: 600; }
.place-suggest-address { font-size: 0.85em; color: var(--muted); }
.place-suggest-credit {
  padding: 4px 12px 2px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
}
.use-location.hidden,
.use-location[hidden] { display: none; }

/* 2.7.7: Settings > Forms phone layout */
.forms-file{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}
.forms-file .btn{min-height:44px;white-space:nowrap;flex:0 0 auto;margin:0}
.forms-file label.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.forms-file label.btn.is-busy{opacity:.6;pointer-events:none}
.forms-file-name{flex:1 1 140px;min-width:0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.forms-file-name.is-set{color:var(--text);font-weight:600}
.forms-map-head{margin:18px 0 6px;font-size:1rem}
.forms-map{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden;table-layout:fixed}
.forms-map th,.forms-map td{padding:10px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;overflow-wrap:anywhere}
.forms-map th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--surface-2)}
.forms-map td:first-child{font-family:ui-monospace,monospace;font-size:13px}
.forms-map tr:last-child td{border-bottom:0}

/* 2.7.7: only the Employee role keeps the bottom tab bar */
body.tabbar-off{--tabbar-height:0px}
body.tabbar-off .tabbar,body.tabbar-off .tabbar-cue{display:none !important}

/* 2.7.7: in-app sign dialog */
.sign-dialog-consent{margin:.5rem 0;line-height:1.45}
.sign-dialog-agree{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.sign-dialog-agree input{width:22px;height:22px}
.sign-dialog-preview{min-height:1.6em;margin:.4rem 0 0;font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.6rem;border-bottom:1px solid var(--border)}

/* 2.7.7: Light theme for the Start/End location picker. The base rules above
   hard-code dark navy colors, so light theme needs its own tokens. Dark theme
   is unchanged. */
/* Solo (my.): Account > Delete your account, Super Admin panel, signed-out delete request.
   An open sub-page hides the other Profile cards so it reads as its own page. */
body.solo-subpage-open main [data-view="profile"]:not(.solo-page-open) {
  display: none !important;
}

.btn.danger-text {
  color: var(--danger);
}

.solo-delete-body {
  margin: 0.6rem 0 0.8rem;
  line-height: 1.5;
}

#solo-delete-plan label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
}

#solo-delete-google,
#solo-admin-enroll-google {
  margin: 0.2rem 0 0.8rem;
}

.solo-admin-user {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.solo-admin-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.7rem 0;
  font-size: 0.92rem;
}

.solo-admin-facts dt {
  color: var(--muted);
}

.solo-admin-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.solo-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.solo-admin-dialog {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.solo-admin-dialog.is-danger {
  border-color: var(--danger);
}

.solo-admin-dialog textarea {
  width: 100%;
  box-sizing: border-box;
}

.solo-delete-notice {
  margin-top: 0.6rem;
}

.solo-delete-confirm .warn-banner {
  flex-direction: column;
}

.solo-delete-confirm .warn-banner label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  font-weight: 600;
}

/* Start / End location cards (New Trip + Edit Trip). Colors match the map's A (green) / B (red) pins. Markup classes only; no behavior. */
.loc-card {
  --loc-accent: #34c77b;
  --loc-accent-bg: rgba(52, 199, 123, 0.08);
  --loc-label: #6ee7a8;
  border: 1px solid var(--loc-accent);
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--loc-accent-bg);
  padding: 12px 12px 10px;
  margin-bottom: 14px;
}
.loc-card--end {
  --loc-accent: #ef5350;
  --loc-accent-bg: rgba(239, 83, 80, 0.08);
  --loc-label: #ff8a85;
}
.loc-card > .loc-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--loc-label);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.loc-card-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--loc-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  flex: none;
}
.loc-card--start .loc-card-pin { color: #06240f; }
html[data-theme="light"] .loc-card {
  --loc-accent: #1e8e4e;
  --loc-accent-bg: #eefaf2;
  --loc-label: #146c3a;
}
html[data-theme="light"] .loc-card--end {
  --loc-accent: #c62828;
  --loc-accent-bg: #fdf0f0;
  --loc-label: #a51d1d;
}
html[data-theme="light"] .loc-card--start .loc-card-pin { color: #fff; }

/* Start/End dropdown: saved places (★) and the Manage saved places… entry. */
.loc-option.loc-option-saved { font-weight: 600; }
.loc-option.loc-option-manage {
  border-top: 1px solid var(--border, rgba(127, 127, 127, 0.35));
  font-style: italic;
  opacity: 0.9;
}

/* Light theme for the Start/End location picker (trigger, panel, filter,
   options). The base rules hard-code dark navy colors, so without these the
   light Solo dropdown was a dark box with low-contrast text. Same rules as
   the org build (2.7.7). Dark theme is unchanged. */
html[data-theme="light"] .loc-trigger {
  color: var(--text);
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235c6d80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--field-border);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
}
html[data-theme="light"] .loc-trigger.is-placeholder { color: var(--muted); }
html[data-theme="light"] .loc-trigger:hover { border-color: #9fb0c3; }
html[data-theme="light"] .loc-trigger:focus,
html[data-theme="light"] .loc-picker.is-open .loc-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
html[data-theme="light"] .loc-panel {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}
html[data-theme="light"] .loc-filter {
  color: var(--text);
  background: var(--field-bg);
  border-color: var(--field-border);
}
html[data-theme="light"] .loc-option { color: var(--text); background: transparent; }
html[data-theme="light"] .loc-option:hover,
html[data-theme="light"] .loc-option:focus { background: #eaf1f8; }
html[data-theme="light"] .loc-option.is-selected {
  background: rgba(15, 122, 73, 0.1);
  box-shadow: inset 3px 0 0 var(--success);
}
html[data-theme="light"] .loc-option.is-selected:hover,
html[data-theme="light"] .loc-option.is-selected:focus { background: rgba(15, 122, 73, 0.16); }
html[data-theme="light"] .loc-empty { color: var(--muted); }

html[data-theme="light"] .distance-panel {
  background:
    linear-gradient(180deg, rgba(142, 236, 196, 0.12), transparent 72%),
    color-mix(in srgb, var(--surface-2) 50%, transparent);
  border-color: rgba(15, 122, 73, 0.2);
}

/* 2.7.7: trip-saved card. Log another is the brand primary; View saved is
   a brand-outlined secondary. Both stay at least 44px and wrap at 360px. */
.save-banner-actions .btn {
  min-height: max(44px, var(--tap-min));
  min-width: 0;
  flex: 1 1 7rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  white-space: nowrap;
}
.save-banner-actions .btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}
.save-banner-actions .btn.secondary:hover:not(:disabled) {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}
html[data-theme="light"] .save-banner-actions .btn.secondary {
  background: #ffffff;
}
html[data-theme="light"] .save-banner-actions .btn.secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
}

/* 2.7.7: Saved places panel used a hard-coded dark navy background, so in
   light theme the dark text tokens landed on navy. Theme it with tokens. */
.saved-places-panel .saved-place-title { color: var(--text); }
.saved-places-panel .saved-place-address,
.saved-places-panel .saved-place-star:not(.is-favorite),
.saved-places-panel .hint { color: var(--muted); }
html[data-theme="light"] .saved-places-panel {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
}
html[data-theme="light"] .saved-place-option:hover { background: #eaf1f8; }
html[data-theme="light"] .saved-places-panel .btn.ghost {
  color: var(--accent);
  border-color: var(--accent);
  background: #ffffff;
}
html[data-theme="light"] .saved-places-panel .btn.ghost:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
}

/* 2.7.7 light-theme sweep. These base rules hard-code dark navy surfaces,
   dark borders, or light text with no light-theme override. Dark theme is
   unchanged; light theme uses the theme tokens. */
html[data-theme="light"] .user-row,
html[data-theme="light"] .inbox-row,
html[data-theme="light"] .submission-row,
html[data-theme="light"] .account-row,
html[data-theme="light"] .archive-folder,
html[data-theme="light"] .drive-backfill-item {
  background: var(--surface);
  border-color: var(--field-border);
  color: var(--text);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .user-row .portal-meta,
html[data-theme="light"] .user-row .supervisor-line { color: var(--muted); }
html[data-theme="light"] .footer code,
html[data-theme="light"] .how-this-works,
html[data-theme="light"] .chip:not([aria-pressed="true"]):not([aria-selected="true"]),
html[data-theme="light"] .archive-unavailable,
html[data-theme="light"] .archive-file,
html[data-theme="light"] .archive-affected-row,
html[data-theme="light"] .dashboard-bar-track {
  background: var(--surface-2);
  border-color: var(--field-border);
  color: var(--text);
}
html[data-theme="light"] .chip:not([aria-pressed="true"]):not([aria-selected="true"]):hover { background: #eaf1f8; color: var(--text); }
html[data-theme="light"] .role-menu .role-link {
  background: var(--surface);
  border-color: var(--field-border);
  color: var(--text);
}
html[data-theme="light"] .role-menu .role-link:hover { background: #eaf1f8; color: var(--text); }
html[data-theme="light"] .portal-card,
html[data-theme="light"] .drive-backfill-count,
html[data-theme="light"] .account-hub { border-color: var(--field-border); }
html[data-theme="light"] .account-mark { color: var(--accent); }
html[data-theme="light"] .admin-source-caption,
html[data-theme="light"] .queue-comment span { color: var(--muted); }
html[data-theme="light"] .auth-password.is-locked input,
html[data-theme="light"] .auth-password input:disabled { color: var(--muted); }
html[data-theme="light"] .btn.link:hover { color: var(--accent-dim); }
html[data-theme="light"] .reports-trigger {
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235c6d80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--field-border);
  color: var(--text);
}
html[data-theme="light"] .reports-panel { background: var(--surface); color: var(--text); }
html[data-theme="light"] .btn.deny-claim {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--field-border));
  color: var(--danger);
}
html[data-theme="light"] .inbox-actions .btn.deny-claim:hover:not(:disabled),
html[data-theme="light"] .finance-deny-actions .btn.deny-claim:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 10%, #ffffff);
  color: var(--danger);
}
html[data-theme="light"] .switch-row input { background: #cfd6e0; }
html[data-theme="light"] .admin-delete-toast { background: #e8f6ee; }
html[data-theme="light"] .tabbar-cue-left {
  background: linear-gradient(90deg, var(--chrome) 0%, var(--chrome) 32%, rgba(255, 255, 255, 0) 100%);
}
html[data-theme="light"] .tabbar-cue-right {
  background: linear-gradient(270deg, var(--chrome) 0%, var(--chrome) 32%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 559px) {
  html[data-theme="light"] .actions-sticky {
    background: linear-gradient(to top, var(--surface) 65%, rgba(255, 255, 255, 0.92) 85%, rgba(255, 255, 255, 0.75));
  }
}
/* 2.7.x: Supervises picker, reassign confirm, locked Profile supervisor */
.supervises-field{grid-column:1/-1}
.supervises-box{position:relative}
.supervises-control{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;padding:5px 8px;border:1px solid var(--field-border);border-radius:10px;background:var(--field-bg);color:var(--text)}
.supervises-control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.supervises-chips{display:contents;list-style:none;margin:0;padding:0}
.supervises-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 4px 3px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--text);font-size:14px;font-weight:500}
.supervises-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supervises-chip button{all:unset;cursor:pointer;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--muted);font-size:16px;line-height:1}
.supervises-chip button:focus-visible{outline:2px solid var(--accent)}
.supervises-control input.supervises-search{flex:1 1 8rem;min-width:6rem;width:auto;min-height:32px;margin:0;padding:4px 2px;border:0;background:transparent;box-shadow:none;color:var(--text);font-size:16px}
.supervises-control input.supervises-search:focus{outline:none;box-shadow:none}
.supervises-panel{margin-top:6px;max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.35))}
.supervises-opt{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:9px 12px;border-top:1px solid var(--border);color:var(--text);cursor:pointer}
.supervises-opt:first-child{border-top:0}
.supervises-opt.is-active,.supervises-opt:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.supervises-opt input{margin-top:3px;accent-color:var(--accent);min-height:0;width:auto}
.supervises-opt-name{font-weight:600}
.supervises-opt-email{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.supervises-opt-current{color:var(--warning);font-size:12.5px}
.supervises-empty{padding:10px 12px;color:var(--muted);font-size:14px}
.supervises-warn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 11px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warning) 55%,var(--border));background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--text);font-size:14px}
.supervises-warn strong{color:var(--warning)}
.reassign-list{list-style:none;margin:12px 0;padding:0}
.reassign-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.reassign-name{font-weight:600}
.reassign-from{color:var(--muted);font-size:14px}
.reassign-pill{align-self:center;white-space:nowrap;font-size:13px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--warning) 14%,var(--surface));color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 45%,var(--border))}
.reassign-released{color:var(--muted);font-size:14px;padding:9px 11px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--border)}
.locked-field{position:relative}
.locked-field input[disabled]{background:var(--surface-2);color:var(--muted);border-style:dashed;cursor:not-allowed;padding-right:40px;opacity:1;-webkit-text-fill-color:var(--muted)}
.locked-field-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none}

/* 2.7.9: post-save Supervises notice (movedClaims / flaggedClaims) */
.supervises-notice { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.supervises-notice.has-flagged { border-color: var(--warning); }
.supervises-notice p { margin: 0 0 6px; }
.supervises-notice-title { font-weight: 700; color: var(--warning); }
.supervises-notice-list { margin: 0 0 8px; padding-left: 18px; }
.supervises-notice-list li { margin: 2px 0; }
.supervises-notice-close { margin-top: 4px; }
.reassign-acrobat-note { margin-top: 6px; }
/* 2.7.10: Type | Draw signatures (Sign and send dialog + supervisor queue).
   The pad stays light in both themes so the dark ink reads the same everywhere. */
.sign-methods{margin:.25rem 0 .6rem}
.sign-methods .chip,.inapp-methods .chip{min-height:44px}
.sign-panel-hidden,#sign-panel-type[hidden],#sign-panel-draw[hidden]{display:none !important}
.sign-draw-pad{margin-top:.6rem}
.sign-pad-label{font-weight:600;font-size:.9rem}
.sign-pad-stage{position:relative}
.sign-pad-stage .inapp-pad{height:160px;background:#f7fafc;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sign-pad-stage .inapp-pad.is-invalid{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.sign-pad-baseline{position:absolute;left:18px;right:18px;bottom:36px;border-bottom:1.5px dashed #8a99ab;pointer-events:none}
.sign-pad-x{position:absolute;left:18px;bottom:40px;color:#5c6d80;font-size:1.1rem;pointer-events:none}
.sign-pad-hint{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;color:#5c6d80;font-size:.85rem;pointer-events:none}
.sign-pad-hint[hidden]{display:none}
.sign-pad-actions{justify-content:space-between;align-items:center;gap:8px}
.sign-pad-actions .hint{margin:0}
.sign-pad-buttons{display:flex;gap:8px}
.sign-pad-buttons .btn{min-height:44px;min-width:4.5rem}
#sign-dialog-error:empty{display:none}
html[data-theme="light"] .sign-methods .chip:not([aria-pressed="true"]),
html[data-theme="light"] .inapp-methods .chip:not([aria-pressed="true"]){background:var(--surface);color:var(--text);border-color:var(--field-border)}
html[data-theme="light"] .sign-methods .chip:not([aria-pressed="true"]):hover,
html[data-theme="light"] .inapp-methods .chip:not([aria-pressed="true"]):hover{background:var(--surface-2);border-color:var(--accent)}
/* 2.7.15: Supervisor signature queue on Reimbursements */
.sq-waiting{margin:0 0 22px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.sq-head{display:flex;align-items:center;gap:10px}
.sq-head h2{margin:0;font-size:1.15rem}
.sq-badge{min-width:26px;height:26px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;background:var(--accent)}
.sq-badge.is-zero{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.sq-list{display:flex;flex-direction:column;gap:10px}
.sq-row{display:block}
.sq-row-head{display:flex;gap:14px;align-items:center;justify-content:space-between}
.sq-row-head > div{min-width:0}
.sq-row h3{margin:0}
.sq-row .queue-subject{margin:2px 0}
.sq-nums{display:flex;gap:14px;margin:4px 0;font-size:.95rem}
.sq-nums b{font-weight:700}
.sq-sign{min-height:44px;min-width:96px;flex:0 0 auto}
.sq-row.is-open{border-color:var(--accent)}
.sq-row > .inapp-sign{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.sq-empty{display:flex;gap:12px;align-items:center;padding:14px;border:1px dashed var(--border);border-radius:12px;background:var(--surface)}
.sq-empty svg{width:28px;height:28px;flex:0 0 auto;fill:none;stroke:var(--brand);stroke-width:2.4}
.sq-empty p{margin:0;color:var(--muted)}
.sq-empty strong{color:var(--text)}
.queue-moved-card{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}
.queue-moved-card h3{margin:0 0 2px;font-size:1rem}
.queue-moved-card .hint{margin:0}
@media (max-width:520px){.sq-row-head{flex-direction:column;align-items:stretch}.sq-sign{width:100%}}
.sq-row > .inapp-sign[hidden]{display:none !important}
.sq-row-head > div{flex:1 1 auto}
.sq-row-head .sq-sign{width:auto}
.sq-waiting[hidden]{display:none !important}
.sq-row.is-target{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)}
.submission-row.is-target{outline:3px solid var(--accent);outline-offset:2px}
.claim-link-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.claim-link-note[hidden]{display:none}
.sq-nums .sq-tolls{color:var(--muted);font-weight:500}

/* Archive: employee files, paged */
.archive-row.is-clickable{cursor:pointer}
.archive-row.is-clickable:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.archive-person-btn{all:unset;cursor:pointer;font-weight:700;color:var(--accent);min-height:44px;display:inline-flex;align-items:center}
.archive-person-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.archive-row-go{font-size:1.4rem;color:var(--muted);text-align:right;width:28px}
.archive-emp-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}
.archive-back{min-height:40px}
.archive-emp-head h3{margin:0;font-size:1.15rem}
.archive-emp-sub{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.archive-pager-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0 10px}
.archive-range{margin:0;font-weight:600}
.archive-size{display:inline-flex;align-items:center;gap:8px;font-size:.9rem}
.archive-size select{min-height:40px;min-width:76px;padding:4px 30px 4px 12px;border-radius:10px}
.archive-files-paged{display:flex;flex-direction:column;gap:8px}
.archive-file-date{margin:2px 0 0;font-size:.85rem;color:var(--muted)}
.archive-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.archive-pager .btn{min-height:44px;min-width:110px}
.archive-page-of{color:var(--muted);font-size:.9rem}
.archive-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 12px;border:1px dashed var(--border);border-radius:14px;color:var(--muted)}
.archive-empty svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.6;margin-bottom:8px}
.archive-empty strong{color:var(--text)}
@media (max-width:520px){.archive-table th:nth-child(4),.archive-table td.archive-row-go{display:none}}

/* Light palette closer to dark: mint #8eecc4 (dark --money) for fills, with dark ink on it
   (#073322 on #8eecc4 is about 9.9:1). Green text stays a deep mint-green (#0b7d5a, 5.1:1 on white). */
html[data-theme="light"] .brand::after { background: linear-gradient(90deg, var(--mint) 0%, var(--accent) 62%, transparent 100%); }
html[data-theme="light"] #session-label::before,
html[data-theme="light"] .account-dot.is-connected,
html[data-theme="light"] .presence-dot.is-online { background: #3fcf95; box-shadow: 0 0 0 3px rgba(142, 236, 196, 0.45); }
html[data-theme="light"] .access-toggle.is-enabled { background: var(--mint); color: var(--on-mint); border-color: #4cc797; }
html[data-theme="light"] .dashboard-bar-fill-miles,
html[data-theme="light"] .claim-tracker li.is-now i { background: var(--mint); box-shadow: inset 0 0 0 1px #4cc797; }
html[data-theme="light"] .loc-option.is-selected { background: rgba(142, 236, 196, 0.28); }
html[data-theme="light"] .loc-option.is-selected:hover,
html[data-theme="light"] .loc-option.is-selected:focus { background: rgba(142, 236, 196, 0.4); }
html[data-theme="light"] .claim-tracker li.is-done i { background: #3fcf95; }
/* Solo (my.) Reports + Settings (PR solo-reports-ui-2520). Org never sets html.wp-solo. */
html.wp-solo #employee-nav .tabbar-inner { width: 100%; }
html.wp-solo #employee-nav .tab { flex: 1 1 0; min-width: 0; }
html.wp-solo.wp-solo-reports-off #submitted-reimbursements { display: none !important; }
html.wp-solo.wp-solo-forms-off #solo-forms-section { display: none !important; }
.solo-reports-list { display: grid; gap: 10px; }
.solo-report-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border, rgba(127,127,127,.25)); }
.solo-report-row:first-child { border-top: 0; }
.solo-report-text { display: grid; gap: 2px; min-width: 0; }
.solo-report-note { font-size: 13px; font-style: italic; }
.solo-report-row .form-message { grid-column: 1 / -1; margin: 0; }
html.wp-solo #sign-pdf-btn, html.wp-solo #sign-pdf-hint, html.wp-solo #sign-status, html.wp-solo #claim-status,
html.wp-solo #claim-progress, html.wp-solo #reimburse-queue, html.wp-solo #how-this-works { display: none !important; }
.solo-report-kind { font-size: .75rem; font-weight: 600; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; opacity: .8; }

/* Solo (my.) Settings sub-page back links ("‹ Profile", "‹ Account"): same .btn.ghost button, theme colors only.
   The old .btn.link look turned the text #fff on hover/tap (invisible in light mode) and sat under the 44px tap target. */
html.wp-solo .solo-back-link, html.wp-my .solo-back-link { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: var(--tap-min); margin: 0 0 0.75rem; padding: 0.5rem 1rem; color: var(--text); border-color: var(--field-border); }
html.wp-solo .solo-back-link:hover, html.wp-my .solo-back-link:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); text-decoration: none; }
html.wp-solo .solo-back-link:focus-visible, html.wp-my .solo-back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Solo (my.) one-time welcome pop-up (solo-welcome.js). Theme tokens only, so light and dark both follow. */
body.solo-welcome-open { overflow: hidden; }
.solo-welcome {
  position: fixed; z-index: 85; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem calc(0.75rem + var(--safe-bottom, 0px));
  background: rgba(8, 12, 16, 0.78);
}
.solo-welcome[hidden],
.solo-welcome [hidden] { display: none !important; }
.solo-welcome-card { position: relative; width: min(28rem, 100%); margin: 0; color: var(--text); }
.solo-welcome-card h2 { margin: 0 2.75rem 0.85rem 0; font-size: 1.3rem; line-height: 1.25; }
.solo-welcome-card h2:focus { outline: none; }
.solo-welcome-body p { margin: 0 0 0.75rem; font-size: 0.98rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.solo-welcome-notice {
  margin: 0 0 0.85rem; padding: 0.7rem 0.85rem; border-radius: 10px; font-weight: 600; color: var(--text);
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.solo-welcome-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--text); cursor: pointer;
}
.solo-welcome-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.solo-welcome-actions .btn { min-height: 44px; flex: 1 1 10rem; }
.solo-welcome-card :is(button, .btn):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Solo (my.) setup walkthrough + Settings > Setup (solo-setup.js). Flag-gated; org never renders these. */
.solo-setup { position: fixed; inset: 0; z-index: 900; overflow-y: auto; background: var(--bg); padding: 16px 12px 32px; }
html.wp-setup-open body { overflow: hidden; }
.ssw-wrap { max-width: 640px; margin: 0 auto; }
.ssw-progress { display: flex; gap: 6px; margin: 8px 0 10px; }
.ssw-progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.ssw-progress i.on { background: var(--accent); }
.ssw-step { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.ssw-card h1 { font-size: 1.4rem; margin: 0 0 8px; }
.ssw-card h1:focus, .ssw-sec h3:focus, .solo-setup-card h2:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.ssw-opts { border: 0; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.ssw-opt { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap-min, 44px); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface); cursor: pointer; }
.ssw-opt:has(input:checked), .ssw-tpl:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ssw-opt input, .ssw-tpl input { margin-top: 3px; accent-color: var(--accent); }
.ssw-opt-body { display: grid; gap: 2px; }
.ssw-opt-body span { color: var(--muted); font-size: 0.92rem; }
.ssw-banner { margin: 12px 0; padding: 10px 12px; border-radius: var(--radius, 10px); background: var(--field-bg); border: 1px solid var(--field-border); font-size: 0.92rem; }
.ssw-big { font-size: 2.2rem; line-height: 1; color: var(--success); margin: 4px 0 8px; }
.ssw-form-preview { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius, 10px); overflow: hidden; background: #fff; max-height: 260px; }
.ssw-form-preview img, .ssw-tpl img { display: block; width: 100%; height: auto; }
.ssw-row-actions, .ssw-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ssw-act-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ssw-link { text-decoration: underline; }
.ssw-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.ssw-tpl { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface); cursor: pointer; font-size: 0.9rem; }
.ssw-tpl img { border-radius: 6px; background: #fff; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.ssw-tag { justify-self: start; font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: #fff; }
.ssw-summary { display: grid; gap: 0; margin: 12px 0; }
.ssw-sum-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ssw-sum-row small { display: block; color: var(--muted); font-size: 0.85rem; }
.ssw-dialog { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, 0.55); }
.ssw-dialog-card { width: min(720px, 100%); max-height: 90vh; overflow: auto; }
.ssw-dialog-card img { width: 100%; height: auto; background: #fff; }
.solo-setup-card .ssw-sec { margin-top: 16px; padding-top: 4px; }
.solo-setup-card .ssw-sec h3 { margin: 0 0 6px; }
.ssw-restart { opacity: 0.8; }
.ssw-trips-card .ssw-row-actions { justify-content: flex-end; }
html.wp-setup-on #solo-forms-section { display: none !important; }
#ssw-forms-slot > .card { margin: 10px 0 0; box-shadow: none; }
.odo-fields { border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 10px 12px; margin: 0 0 12px; }
.odo-fields legend { padding: 0 4px; font-weight: 600; }
.odo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.odo-field { display: grid; gap: 4px; font-size: 0.92rem; }
.odo-field input { min-height: var(--tap-min, 44px); }
.odo-field input[aria-invalid="true"] { border-color: var(--danger); }
.odo-hint { margin: 6px 0 0; font-size: 0.85rem; }
@media (max-width: 400px) { .odo-row { grid-template-columns: 1fr; } .ssw-act-right { margin-left: 0; width: 100%; } }

/* Solo (my.) New Trip place picker sheet + "Add to Favorite Places?" (solo-location-sheet.js). Only mounted on Solo. */
html.wp-solo #start-other-wrap > label, html.wp-my #start-other-wrap > label, html.wp-solo #start-other-wrap > input, html.wp-my #start-other-wrap > input, html.wp-solo #end-other-wrap > label, html.wp-my #end-other-wrap > label, html.wp-solo #end-other-wrap > input, html.wp-my #end-other-wrap > input, html.wp-solo #start-other-wrap > .use-location, html.wp-my #start-other-wrap > .use-location, html.wp-solo #end-other-wrap > .use-location, html.wp-my #end-other-wrap > .use-location, html.wp-solo #start-place-message:empty, html.wp-solo #end-place-message:empty { display: none !important; }
.wp-ls-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(4, 9, 15, .62); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wp-ls-overlay.is-sheet { align-items: flex-end; padding: 0; }
.wp-ls-panel { width: min(100%, 440px); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 1rem 1.1rem 1.2rem; animation: wp-ls-pop .18s ease-out; }
.wp-ls-overlay.is-sheet .wp-ls-panel { width: min(100%, 560px); height: 88vh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); animation-name: wp-ls-up; }
@keyframes wp-ls-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wp-ls-pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wp-ls-panel { animation: none !important; } }
.wp-ls-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.wp-ls-title { flex: 1; margin: 0; border: 0; background: none; font-size: 1.15rem; font-weight: 700; text-align: center; padding-left: 44px; }
.wp-ls-x { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.wp-ls-x:focus-visible, .wp-ls-row:focus-visible, .wp-ls-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-ls-searchwrap { position: relative; }
.wp-ls-searchwrap input.wp-ls-search { padding-left: 2.7rem !important; }
.wp-ls-title::after, .wp-ls-title::before { content: none !important; display: none !important; }
.wp-ls-mag { position: absolute; left: .85rem; top: 50%; width: 14px; height: 14px; margin-top: -9px; border: 2px solid var(--muted); border-radius: 50%; }
.wp-ls-mag::after { content: ""; position: absolute; width: 2px; height: 7px; background: var(--muted); right: -4px; bottom: -6px; transform: rotate(-45deg); }
.wp-ls-search { width: 100%; min-height: 48px; padding: .6rem .9rem .6rem 2.7rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1rem; }
.wp-ls-body { flex: 1; overflow-y: auto; margin-top: .4rem; -webkit-overflow-scrolling: touch; }
.wp-ls-section { margin: 1rem 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.wp-ls-list { list-style: none; margin: 0; padding: 0; }
.wp-ls-list > li + li { border-top: 1px solid var(--border); }
.wp-ls-row { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 56px; padding: .55rem .2rem; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; border-radius: 10px; }
.wp-ls-row:hover { background: var(--surface-2); }
.wp-ls-ico { flex: 0 0 auto; width: 26px; text-align: center; color: var(--muted); font-size: 1.15rem; }
.wp-ls-ico.is-star::before { content: "\2605"; color: #7ee8b5; }
.wp-ls-ico.is-pin::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.wp-ls-ico.is-type::before { content: "\270E"; }
.wp-ls-ico.is-gps::before { content: "\27A4"; color: var(--accent); display: inline-block; transform: rotate(-45deg); }
.wp-ls-copy { display: flex; flex-direction: column; min-width: 0; }
.wp-ls-name { font-weight: 600; }
.wp-ls-addr { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.wp-ls-empty, .wp-ls-status:not(:empty) { color: var(--muted); font-size: .92rem; margin: .4rem 0; }
.wp-ls-text { margin: 0 0 1rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.wp-ls-actions { display: flex; gap: .6rem; }
.wp-ls-actions > .btn { flex: 1; min-height: 44px; }
.wp-ls-form { display: flex; flex-direction: column; gap: .45rem; }
.wp-ls-field { min-height: 48px; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1rem; }
html[data-theme="light"] .wp-ls-overlay { background: rgba(28, 40, 54, .45); }
html[data-theme="light"] .wp-ls-panel { box-shadow: 0 18px 44px rgba(28,40,54,.22); }
html[data-theme="light"] .wp-ls-ico.is-star::before { color: #0f7a49; }
/* Solo (my.) Saved Trips card (solo-saved-trip-card.js). Date header, big miles + dollars,
   existing map thumbnail, A (green) / B (red) place lines. Scoped to html.wp-solo. */
html.wp-solo #view-saved-trips .solo-trip-card, html.wp-my #view-saved-trips .solo-trip-card {
  display: block !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin: 0 0 12px;
  box-shadow: var(--shadow);
  list-style: none;
}
html.wp-solo .solo-trip-card .solo-tc-top, html.wp-my .solo-trip-card .solo-tc-top { margin-bottom: 10px; }
html.wp-solo .solo-trip-card .solo-tc-date, html.wp-my .solo-trip-card .solo-tc-date {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
html.wp-solo .solo-trip-card .solo-tc-figures, html.wp-my .solo-trip-card .solo-tc-figures {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
html.wp-solo .solo-trip-card .solo-tc-miles, html.wp-my .solo-trip-card .solo-tc-miles { font-size: 2rem; font-weight: 800; line-height: 1.1; }
html.wp-solo .solo-trip-card .solo-tc-dollars, html.wp-my .solo-trip-card .solo-tc-dollars { font-size: 1.25rem; font-weight: 700; color: #7ee8b5; }
html[data-theme="light"].wp-solo .solo-trip-card .solo-tc-dollars { color: #0f7a49; }
html.wp-solo .solo-trip-card .solo-tc-tag, html.wp-my .solo-trip-card .solo-tc-tag { align-self: center; font-size: 0.78rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
html.wp-solo .solo-trip-card .trip-gmap, html.wp-my .solo-trip-card .trip-gmap, html.wp-solo .solo-trip-card .route-map, html.wp-my .solo-trip-card .route-map { border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
html.wp-solo .solo-trip-card .trip-open, html.wp-my .solo-trip-card .trip-open {
  display: block !important;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  min-height: 44px;
}
html.wp-solo .solo-trip-card .solo-tc-places, html.wp-my .solo-trip-card .solo-tc-places { display: grid; gap: 10px; }
html.wp-solo .solo-trip-card .solo-tc-place, html.wp-my .solo-trip-card .solo-tc-place { display: flex; gap: 10px; align-items: flex-start; }
html.wp-solo .solo-trip-card .solo-tc-dot, html.wp-my .solo-trip-card .solo-tc-dot {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}
html.wp-solo .solo-trip-card .is-end .solo-tc-dot, html.wp-my .solo-trip-card .is-end .solo-tc-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); }
html.wp-solo .solo-trip-card .solo-tc-place-text, html.wp-my .solo-trip-card .solo-tc-place-text { min-width: 0; }
html.wp-solo .solo-trip-card .solo-tc-place-name, html.wp-my .solo-trip-card .solo-tc-place-name { font-weight: 700; overflow-wrap: anywhere; }
html.wp-solo .solo-trip-card .solo-tc-place-addr, html.wp-my .solo-trip-card .solo-tc-place-addr { font-size: 0.86rem; color: var(--muted); overflow-wrap: anywhere; }
html.wp-solo .solo-trip-card .solo-tc-meta, html.wp-my .solo-trip-card .solo-tc-meta { margin-top: 8px; font-size: 0.8rem; }
html.wp-solo .solo-trip-card .solo-tc-actions, html.wp-my .solo-trip-card .solo-tc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
html.wp-solo .solo-trip-card .solo-tc-actions .btn, html.wp-my .solo-trip-card .solo-tc-actions .btn { width: 100%; min-height: 44px; border-radius: 12px; }

/* Solo (my.) New Trip option rows (solo-trip-options.js, 2.5.47 draft). Org/district never show them. */
html:not(.wp-solo):not(.wp-my) .nto-options, html:not(.wp-solo):not(.wp-my) .solo-vehicles-card { display: none !important; }
html.wp-solo #trip-form .field.nto-moved, html.wp-my #trip-form .field.nto-moved { display: none !important; }
html.wp-solo .nto-options, html.wp-my .nto-options { margin: 0.75rem 0 0.25rem; border-top: 1px solid var(--border); }
html.wp-solo .nto-row, html.wp-my .nto-row { display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.25rem 0.1rem; border-bottom: 1px solid var(--border); }
html.wp-solo .nto-row.hidden, html.wp-my .nto-row.hidden, html.wp-solo .nto-row[hidden], html.wp-my .nto-row[hidden] { display: none; }
html.wp-solo .nto-ico, html.wp-my .nto-ico { flex: 0 0 24px; width: 24px; height: 24px; color: var(--muted); }
html.wp-solo .nto-ico svg, html.wp-my .nto-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.wp-solo .nto-label, html.wp-my .nto-label { flex: 1 1 auto; font-size: 1rem; color: var(--text); margin: 0; }
html.wp-solo .nto-slot, html.wp-my .nto-slot { flex: 1 1 auto; min-width: 0; }
html.wp-solo .nto-slot input[type="date"], html.wp-my .nto-slot input[type="date"], html.wp-solo .nto-slot input[type="time"], html.wp-my .nto-slot input[type="time"], html.wp-solo .nto-slot textarea, html.wp-my .nto-slot textarea {
  width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; padding: 0.55rem 0; box-shadow: none; }
html.wp-solo .nto-slot textarea, html.wp-my .nto-slot textarea { resize: vertical; }
html.wp-solo .nto-slot input:focus-visible, html.wp-my .nto-slot input:focus-visible, html.wp-solo .nto-slot textarea:focus-visible, html.wp-my .nto-slot textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
html.wp-solo .nto-times, html.wp-my .nto-times { display: flex; align-items: center; gap: 0.75rem; }
html.wp-solo .nto-times input[type="time"], html.wp-my .nto-times input[type="time"] { width: auto; flex: 0 1 8.5rem; }
html.wp-solo .nto-time, html.wp-my .nto-time { position: relative; flex: 0 1 8.5rem; display: block; min-height: 44px; }
html.wp-solo .nto-time input[type="time"], html.wp-my .nto-time input[type="time"] { width: 100%; }
html.wp-solo .nto-ph, html.wp-my .nto-ph { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: none; font-size: 1rem; }
html.wp-solo .nto-time.is-empty .nto-ph, html.wp-my .nto-time.is-empty .nto-ph { display: block; }
html.wp-solo .nto-time.is-empty input[type="time"]:not(:focus), html.wp-my .nto-time.is-empty input[type="time"]:not(:focus) { color: transparent; }
html.wp-solo .nto-time-hint, html.wp-my .nto-time-hint { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
html.wp-solo .nto-to, html.wp-my .nto-to { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.04em; }
html.wp-solo .nto-text, html.wp-my .nto-text { padding: 0.55rem 0; }
html.wp-solo .nto-text.is-placeholder, html.wp-my .nto-text.is-placeholder { color: var(--muted); }
html.wp-solo .nto-switch, html.wp-my .nto-switch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 48px; height: 28px; margin: 8px 0; border-radius: 999px;
  background: var(--border); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background 0.18s; }
html.wp-solo .nto-switch::after, html.wp-my .nto-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform 0.18s; }
html.wp-solo .nto-switch:checked, html.wp-my .nto-switch:checked { background: var(--accent); border-color: var(--accent); }
html.wp-solo .nto-switch:checked::after, html.wp-my .nto-switch:checked::after { transform: translateX(20px); }
html.wp-solo .nto-switch:focus-visible, html.wp-my .nto-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.wp-solo .nto-row--switch, html.wp-my .nto-row--switch { cursor: pointer; }
html.wp-solo .solo-vehicles-card .nto-row, html.wp-my .solo-vehicles-card .nto-row { border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { html.wp-solo .nto-switch, html.wp-my .nto-switch, html.wp-solo .nto-switch::after, html.wp-my .nto-switch::after { transition: none; } }
/* Solo edit sheet time (client wire 2547) */
html:not(.wp-solo):not(.wp-my) #trip-edit-times, #trip-edit-times[hidden] { display: none !important; }
html.wp-solo #trip-edit-times .nto-times input[type="time"], html.wp-my #trip-edit-times .nto-times input[type="time"] { min-height: 44px; }
html:not(.wp-solo) #trip-edit-vehicle-field, #trip-edit-vehicle-field[hidden], html:not(.wp-solo):not(.wp-org-vehicles) .solo-vehicle-manage, .solo-vehicle-manage[hidden] { display: none !important; }
html.wp-solo .nto-select, html.wp-my .nto-select { min-height: 44px; font-size: 1rem; background: transparent; color: var(--text); border: 0; padding: 0.4rem 0; }
html.wp-solo .nto-select[hidden], html.wp-my .nto-select[hidden] { display: none; }
html.wp-solo .solo-vehicle-manage, html.wp-my .solo-vehicle-manage { margin-top: 1rem; }
html.wp-solo .solo-vehicle-manage h4, html.wp-my .solo-vehicle-manage h4 { margin: 0 0 0.4rem; font-size: 1rem; }
html.wp-solo .svl-list, html.wp-my .svl-list { list-style: none; margin: 0; padding: 0; }
html.wp-solo .svl-row, html.wp-my .svl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; min-height: 52px; padding: 0.35rem 0; border-top: 1px solid var(--border); }
html.wp-solo .svl-name, html.wp-my .svl-name { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
html.wp-solo .svl-tag, html.wp-my .svl-tag { font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent); color: #fff; }
html.wp-solo .svl-actions, html.wp-my .svl-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; }
html.wp-solo .svl-btn, html.wp-my .svl-btn { min-height: 44px; padding: 0.3rem 0.6rem; }
html.wp-solo .svl-add, html.wp-my .svl-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
html.wp-solo .svl-add input, html.wp-my .svl-add input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
html.wp-solo .wp-ls-never, html.wp-my .wp-ls-never { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; margin: 0.25rem 0 0.5rem; }
/* Solo (my.) Trip saved pop-up (solo-trip-saved-popup.js). Org never wraps #save-banner, so none of this applies there. */
html.wp-tsp-open, html.wp-tsp-open body { overflow: hidden; overscroll-behavior: none; }
html.wp-solo .wp-tsp-backdrop, html.wp-my .wp-tsp-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: rgba(4, 9, 15, 0.62);
  animation: wp-tsp-fade 0.18s ease-out;
}
html.wp-solo .wp-tsp-backdrop[hidden], html.wp-my .wp-tsp-backdrop[hidden] { display: none; }
/* Keeps the existing Trip saved card colors (green-tinted success card, success title); opaque base so the form doesn't show through. */
html.wp-solo .wp-tsp-backdrop .save-banner.wp-tsp-dialog, html.wp-my .wp-tsp-backdrop .save-banner.wp-tsp-dialog {
  position: relative; margin: 0; width: min(100%, 24rem); max-height: calc(100dvh - 2rem); overflow-y: auto;
  padding: 1.4rem 1.15rem 1.15rem;
  background: linear-gradient(rgba(62, 207, 142, 0.1), rgba(62, 207, 142, 0.1)), var(--surface);
  color: var(--text);
  border: 1px solid rgba(62, 207, 142, 0.45); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  animation: wp-tsp-pop 0.2s ease-out;
}
html.wp-solo .wp-tsp-dialog:focus, html.wp-my .wp-tsp-dialog:focus { outline: none; }
html.wp-solo .wp-tsp-dialog .save-banner-text, html.wp-my .wp-tsp-dialog .save-banner-text {
  margin: 0.25rem 2rem 0.9rem; text-align: center; font-size: 1.2rem; color: var(--success);
}
html.wp-solo .wp-tsp-dialog .wp-tsp-close, html.wp-my .wp-tsp-dialog .wp-tsp-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--text); opacity: 0.8; cursor: pointer;
}
html.wp-solo .wp-tsp-dialog .wp-tsp-close:hover, html.wp-my .wp-tsp-dialog .wp-tsp-close:hover { opacity: 1; background: var(--surface-2); }
html.wp-solo .wp-tsp-dialog .wp-tsp-close:focus-visible, html.wp-my .wp-tsp-dialog .wp-tsp-close:focus-visible { outline: 2px solid #3d9cf0; outline-offset: 2px; opacity: 1; }
html.wp-solo .wp-tsp-dialog .trip-gmap, html.wp-my .wp-tsp-dialog .trip-gmap { margin: 0 0 0.85rem; border-radius: 10px; overflow: hidden; }
/* Open in Maps: full width, the one bright button. */
html.wp-solo .wp-tsp-dialog .save-banner-open-maps, html.wp-my .wp-tsp-dialog .save-banner-open-maps { margin: 0 0 0.6rem; }
html.wp-solo .wp-tsp-dialog .save-banner-open-maps a, html.wp-my .wp-tsp-dialog .save-banner-open-maps a, html.wp-solo .wp-tsp-dialog .save-banner-open-maps .btn, html.wp-my .wp-tsp-dialog .save-banner-open-maps .btn { width: 100%; min-height: 48px; justify-content: center; }
/* New Trip | Saved Trips: one row, equal width, secondary. */
html.wp-solo .wp-tsp-dialog .save-banner-actions, html.wp-my .wp-tsp-dialog .save-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
html.wp-solo .wp-tsp-dialog .save-banner-actions .btn, html.wp-my .wp-tsp-dialog .save-banner-actions .btn { width: 100%; min-width: 0; min-height: 44px; padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; }
html.wp-solo[data-theme="light"] .wp-tsp-backdrop, html.wp-my[data-theme="light"] .wp-tsp-backdrop { background: rgba(15, 23, 32, 0.5); }
html.wp-solo[data-theme="light"] .wp-tsp-backdrop .save-banner.wp-tsp-dialog, html.wp-my[data-theme="light"] .wp-tsp-backdrop .save-banner.wp-tsp-dialog { background: linear-gradient(rgba(62, 207, 142, 0.1), rgba(62, 207, 142, 0.1)), #fff; box-shadow: 0 18px 48px rgba(15, 23, 32, 0.28); }
html.wp-solo[data-theme="light"] .wp-tsp-dialog .save-banner-text, html.wp-my[data-theme="light"] .wp-tsp-dialog .save-banner-text { color: #0f7a49; }
html.wp-solo[data-theme="light"] .wp-tsp-dialog .wp-tsp-close:focus-visible, html.wp-my[data-theme="light"] .wp-tsp-dialog .wp-tsp-close:focus-visible { outline-color: #1b6cb8; }
@keyframes wp-tsp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wp-tsp-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.wp-solo .wp-tsp-backdrop, html.wp-my .wp-tsp-backdrop, html.wp-solo .wp-tsp-backdrop .save-banner.wp-tsp-dialog, html.wp-my .wp-tsp-backdrop .save-banner.wp-tsp-dialog { animation: none; }
}

/* 2.6.5: Solo Help sheet (one-pager). */
.solo-help-sheet { align-items: flex-start; }
.solo-help-sheet[hidden] { display: none !important; }
.solo-help-card { width: min(36rem, 100%); }
.solo-help-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.solo-help-head h2 { margin: 0; }
.solo-help-head .btn { min-height: 44px; }
.solo-help-actions { justify-content: flex-start; margin: 0.5rem 0; }
.solo-help-actions:has(> [hidden]:only-child) { display: none; }
.solo-help-body h3 { margin: 0.75rem 0 0.1rem; font-size: 1.05rem; }
.solo-help-body h4 { margin: 0.9rem 0 0.25rem; font-size: 0.98rem; }
.solo-help-tag { margin: 0 0 0.5rem; opacity: 0.8; }
.solo-help-tip, .solo-help-foot { font-size: 0.92rem; }
/* 2.6.6: the quick-start look (same as the rebuilt one-pager). Dark panels stay dark in both themes. */
html.wp-solo .solo-help-body { --qs-bg: #0c1219; --qs-surface: #172433; --qs-border: #3a5570; --qs-text: #eef4fa; --qs-muted: #96a8bb;
  --qs-blue: #3d9cf0; --qs-mint: #7ee8b5; }
html.wp-solo .solo-qs-ic, html.wp-solo .solo-qs-arrow { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--qs-blue); stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
html.wp-solo .solo-qs-hero { position: relative; overflow: hidden; margin: 0.25rem 0 0.6rem; padding: 0.85rem 1rem 1.9rem; border-radius: 14px;
  color: var(--qs-text); border: 1px solid var(--qs-border); border-top: 3px solid var(--qs-blue); background-color: var(--qs-bg);
  background-image: radial-gradient(ellipse 95% 120% at 0% 0%, rgba(61,156,240,.26), transparent 72%),
    radial-gradient(ellipse 85% 110% at 100% 0%, rgba(126,232,181,.14), transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(140,196,240,.05) 22px 23px),
    linear-gradient(120deg, #121a26 0%, #0c1219 45%, #101a18 100%); }
html.wp-solo .solo-qs-hero h3 { margin: 0; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
html.wp-solo .solo-qs-bar { display: block; height: 4px; width: 60%; margin: 0.45rem 0 0.35rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--qs-mint) 0%, var(--qs-blue) 62%, transparent 100%); }
html.wp-solo .solo-qs-hero .solo-help-tag { margin: 0; opacity: 1; color: var(--qs-mint); font-weight: 600; font-size: 1.02rem; }
html.wp-solo .solo-qs-route { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1.7rem; pointer-events: none; }
html.wp-solo .solo-qs-route-line { fill: none; stroke: var(--qs-blue); stroke-opacity: .8; stroke-width: 2.5; stroke-dasharray: 1.5 8; stroke-linecap: round; }
html.wp-solo .solo-qs-route-dot { fill: var(--qs-mint); }
html.wp-solo .solo-qs-route-pin { fill: var(--qs-blue); }
html.wp-solo .solo-qs-tabs { display: flex; margin: 0.6rem 0 0.5rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--qs-border);
  background: linear-gradient(180deg, #1a2838 0%, #101820 100%); box-shadow: inset 0 2px 0 rgba(61,156,240,.55); }
html.wp-solo .solo-qs-tab { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.5rem 0.15rem 0.45rem; color: var(--qs-text); font-size: 0.78rem; font-weight: 600; text-align: center; }
html.wp-solo .solo-qs-tab + .solo-qs-tab { border-left: 1px solid rgba(58,85,112,.55); }
html.wp-solo .solo-qs-n { position: absolute; top: 0.3rem; left: 0.35rem; width: 1rem; height: 1rem; border-radius: 999px; font-size: 0.62rem;
  line-height: 1rem; font-weight: 700; color: #0c1219; background: var(--qs-mint); }
html.wp-solo .solo-qs-flow { margin: 0 0 0.75rem; padding: 0.6rem 0.65rem 0.7rem; border-radius: 14px; color: var(--qs-text);
  border: 1px solid var(--qs-border); border-top: 3px solid var(--qs-blue);
  background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(61,156,240,.22), transparent 70%),
    radial-gradient(ellipse 70% 80% at 100% 100%, rgba(126,232,181,.14), transparent 70%), var(--qs-surface); }
html.wp-solo .solo-qs-kicker { margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qs-muted); }
html.wp-solo .solo-qs-flow > .solo-qs-kicker { margin-bottom: 0.4rem; }
html.wp-solo .solo-qs-flow-row { display: flex; align-items: center; gap: 0.2rem; }
html.wp-solo .solo-qs-arrow { width: 0.8rem; height: 0.8rem; stroke: var(--qs-muted); }
html.wp-solo .solo-qs-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center;
  padding: 0.45rem 0.15rem; border-radius: 10px; background: rgba(12,18,25,.55); border: 1px solid var(--qs-border); }
html.wp-solo .solo-qs-num { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: 0.66rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, #5eb3f8, #2d86d6); }
html.wp-solo .solo-qs-step-title { font-size: 0.76rem; font-weight: 700; line-height: 1.15; }
html.wp-solo .solo-qs-step-sub { font-size: 0.64rem; color: var(--qs-muted); }
html.wp-solo .solo-qs-step.final { border-color: var(--qs-mint); background: rgba(126,232,181,.16); }
html.wp-solo .solo-qs-step.final .solo-qs-num { background: var(--qs-mint); color: #0c1219; }
html.wp-solo .solo-qs-step.final .solo-qs-ic { stroke: var(--qs-mint); }
html.wp-solo .solo-help-sec { margin: 0 0 0.7rem; border: 1px solid var(--border, #3a5570); border-radius: 13px; overflow: hidden; }
html.wp-solo .solo-help-sec > ol, html.wp-solo .solo-help-sec > ul { margin: 0.55rem 0.8rem 0.4rem; padding-left: 1.2rem; }
html.wp-solo .solo-help-sec li { margin-bottom: 0.25rem; }
html.wp-solo .solo-qs-sec-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; color: var(--qs-text);
  border-top: 3px solid var(--qs-blue); background: linear-gradient(180deg, rgba(61,156,240,.16), transparent 3rem),
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(126,232,181,.12), transparent 70%), var(--qs-surface); }
html.wp-solo .solo-help-sec.green .solo-qs-sec-head { border-top-color: var(--qs-mint); }
html.wp-solo .solo-qs-sec-head .solo-qs-kicker { color: var(--qs-mint); font-size: 0.6rem; }
html.wp-solo .solo-help-body .solo-qs-sec-head h4 { margin: 0; font-size: 1.02rem; color: #fff; }
html.wp-solo .solo-qs-tile { flex: none; width: 2rem; height: 2rem; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(61,156,240,.3), rgba(61,156,240,.08)); border: 1px solid #2a6fa8; }
html.wp-solo .solo-help-sec.green .solo-qs-tile { background: linear-gradient(180deg, rgba(126,232,181,.28), rgba(126,232,181,.06)); border-color: #36a676; }
html.wp-solo .solo-help-sec.green .solo-qs-tile .solo-qs-ic { stroke: var(--qs-mint); }
html.wp-solo .solo-help-tip { position: relative; margin: 0.2rem 0.7rem 0.7rem; padding: 0.45rem 0.6rem 0.45rem 2.6rem; border-radius: 10px;
  background: rgba(126,232,181,.12); border: 1px solid rgba(126,232,181,.45); }
html.wp-solo .solo-help-tip::before { content: "TIP"; position: absolute; left: 0.55rem; top: 0.5rem; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; color: #0c1219; background: var(--qs-mint); border-radius: 5px; padding: 1px 5px; }
html.wp-solo .solo-help-foot { margin: 0.2rem 0 0.4rem; padding: 0.7rem 0.85rem; border-radius: 13px; color: var(--qs-text); font-weight: 600;
  background: var(--qs-surface); border: 1px solid var(--qs-border); border-top: 3px solid var(--qs-mint); }
@media (max-width: 380px) { html.wp-solo .solo-qs-arrow { display: none; } html.wp-solo .solo-qs-step-sub { display: none; } }
html.solo-help-open { overflow: hidden; }

/* Org (app.) 2.8.0 my. look extras (html.wp-my only; Solo untouched).
   Saved Trips header card: flat surface like Solo, no blue top border or tint. The trip count badge is
   hidden; the filter summary below the chips ("Showing N trips") carries the same count. */
html.wp-my #view-saved-trips.trips-card {
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
}
html.wp-my #view-saved-trips .trips-header #trips-count { display: none; }
/* Org Profile > Forms (WAYPOINT_ORG_FORMS): title matches the Trip options / Saved places card titles. */
html.wp-my #solo-forms-section > #solo-forms-title { font-size: 1.17em; font-weight: 700; border-bottom: 0; padding-bottom: 0; margin: 0 0 0.6rem; }
/* Org New Trip IRS rate category (WAYPOINT_ORG_IRS_RATES): a row like Round trip / Date / Notes above it. */
html.wp-my #trip-form .field[data-org-feature="irs_rates"] { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0; }
html.wp-my #trip-form .field[data-org-feature="irs_rates"] > label { font-size: 0.95rem; font-weight: 600; color: var(--text); }
html.wp-my #org-rate-category { min-height: 44px; width: 100%; }
html.wp-my .solo-forms-card .sf-empty { font-size: 0.9rem; line-height: 1.4; }
html.wp-my .solo-forms-card h3 { margin-top: 0.75rem; }
/* Org: the ported wp-btn display rules must not un-hide [hidden] buttons (e.g. Solo's "‹ Settings" back link showed on every org view). */
html.wp-my body:not(#wp-btn-scope) .btn[hidden], html.wp-my body:not(#wp-btn-scope) .wp-btn[hidden], html.wp-my .solo-back-link[hidden] { display: none !important; }
/* Org: show-password eye before html.wp-my is set (sign-in screen paints before the config call). Toggles are only mounted when the my. look is on. */
html:not(.wp-solo):not(.wp-my) .pw-wrap { position: relative; display: block; }
html:not(.wp-solo):not(.wp-my) .pw-wrap > input { width: 100%; padding-right: 3rem; box-sizing: border-box; }
html:not(.wp-solo):not(.wp-my) .pw-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; border-radius: var(--radius); }
html:not(.wp-solo):not(.wp-my) .pw-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Org phone menu: the bottom "‹" button closes the drawer; give it a visible label too. */
@media (max-width: 1023px) {
  html.wp-my .v2-side-foot .v2-collapse::after { content: "Close menu"; margin-left: 0.4rem; font-size: 0.9rem; font-weight: 600; }
  html.wp-my .v2-side-foot .v2-collapse { width: auto; height: auto; min-height: 44px; align-self: flex-start; padding-inline: 0.75rem; }
}
/* Org small phones (< 360px): keep the top bar and 5-tab bar on one line without clipping. */
@media (max-width: 359px) {
  html.wp-my .v2-topbar .v2-theme-switch > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.wp-my .tabbar .tab { padding-inline: 0.05rem; }
  html.wp-my .tabbar .tab-label { font-size: 0.62rem; letter-spacing: -0.01em; }
}

/* Solo (my.) Settings home (solo-settings-home.js, 2.5.47 cleanup). A short list with small section labels; each
   row opens one existing Settings card as its own screen. Every rule is html.wp-solo scoped; org/district never match. */
html.wp-solo.ss-on main > [data-view="profile"]:not(.ss-active) { display: none !important; }
html.wp-solo .solo-settings-home { padding: 0.5rem 0 0.75rem; overflow: hidden; }
html.wp-solo .solo-settings-home > h2 { margin: 0.5rem var(--card-pad-x) 0.25rem; font-size: 1.25rem; }
html.wp-solo .ssh-label { margin: 0; padding: 1rem var(--card-pad-x) 0.35rem; border-top: 1px solid var(--border); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
html.wp-solo .ssh-label:first-child, html.wp-solo .ssh-nav > .ssh-label:first-of-type { border-top: 0; }
html.wp-solo .ssh-list { list-style: none; margin: 0; padding: 0 0 0.35rem; }
html.wp-solo .ssh-row,
html.wp-solo .ssh-slot { display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: max(var(--tap-min), 3rem); padding: 0.3rem var(--card-pad-x); }
html.wp-solo .ssh-row { margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer; }
html.wp-solo .ssh-row:hover { background: var(--surface-2); }
html.wp-solo .ssh-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.wp-solo .ssh-title { flex: 1 1 auto; min-width: 0; }
html.wp-solo .ssh-chev { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); margin-right: 0.25rem; }
html.wp-solo .ssh-ico { --tone: var(--accent); flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
html.wp-solo .ssh-ico svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.wp-solo .ssh-ico--brand { --tone: var(--brand); }
html.wp-solo .ssh-ico--success { --tone: var(--success); }
html.wp-solo .ssh-ico--warning { --tone: var(--warning); }
html.wp-solo .ssh-ico--danger { --tone: var(--danger); }
html.wp-solo .ssh-ico--muted { --tone: var(--muted); }
html.wp-solo .ssh-slot-body { flex: 1 1 auto; min-width: 0; }
html.wp-solo .ssh-slot-body .switch-row { margin: 0; font-weight: 500; font-size: 1rem; }
html.wp-solo .ssh-slot-body .switch-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.wp-solo .solo-settings-back[hidden], html.wp-solo:not([data-ss-open]) .solo-settings-back { display: none; }
html.wp-solo .ssh-slot-body > .profile-theme { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
html.wp-solo body .ssh-slot-body #profile-theme .switch-row { min-height: var(--tap-min); margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
html.wp-solo.ss-on main > .ss-active :is(h2, h3)[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* Sub-screens: one card, its own back button, no second heading trail ("Profile › …" hints). */
html.wp-solo[data-ss-open] .solo-settings-back { margin: 0 0 0.75rem; }
html.wp-solo[data-ss-open="security"] #security-home > .hint:first-of-type,
html.wp-solo[data-ss-open="delete"] #solo-account-home > .hint { display: none; }
html.wp-solo[data-ss-open="delete"] #solo-delete-page > .hint:first-of-type { display: none; }
/* A card's own inner back ("‹ Account", "‹ Profile") takes over once its inner page is open, so there is one back at a time. */
html.wp-solo #solo-account-card:has(#solo-delete-page:not([hidden])) > .solo-settings-back,
html.wp-solo #solo-admin-card:has(#solo-admin-page:not([hidden])) > .solo-settings-back { display: none; }
/* Settings > Setup is split across three rows: Reimbursement form, Trip log and odometer, Run setup again. */
html.wp-solo[data-ss-open] #solo-setup-card > #solo-setup-title,
html.wp-solo[data-ss-open] #solo-setup-card > #solo-setup-title + .hint { display: none; }
html.wp-solo[data-ss-open="forms"] #solo-setup-card > .ssw-sec:not(#ssw-sec-forms),
html.wp-solo[data-ss-open="logsheet"] #solo-setup-card > .ssw-sec:not(#ssw-sec-logsheet):not(#ssw-sec-odometer),
html.wp-solo[data-ss-open="setup"] #solo-setup-card > .ssw-sec:not(#ssw-sec-setup),
html.wp-solo[data-ss-open="setup"] #solo-setup-card > p.hint:last-child { display: none; }
html.wp-solo[data-ss-open] #solo-setup-card > .ssw-sec:first-of-type,
html.wp-solo[data-ss-open] #solo-setup-card > .ssw-sec { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.wp-solo.ss-on main > [data-view="profile"].ss-active { animation: ssh-in 0.16s ease-out; }
  @keyframes ssh-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
/* Solo phone menu: slide in and out without motion when the phone asks for reduced motion. */
@media (prefers-reduced-motion: reduce) { html.wp-solo .v2-sidebar, html.wp-my .v2-sidebar { transition: none; } }
/* Solo (my.) page chrome + Saved Trips filters (2.5.52 draft). Org/district never get html.wp-solo. */
/* Main bottom-nav page titles: hidden visually, kept for screen readers and focus. */
html.wp-solo #form-title, html.wp-my #form-title, html.wp-solo #trips-title, html.wp-my #trips-title, html.wp-solo #export-title, html.wp-my #export-title, html.wp-solo #solo-settings-title, html.wp-solo #sa-home-title, html.wp-solo #dashboard-title, html.wp-my #dashboard-title {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html.wp-solo .trips-header, html.wp-my .trips-header { justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
html.wp-solo .trips-header::after, html.wp-my .trips-header::after, html.wp-solo .trips-header h2::after, html.wp-my .trips-header h2::after { display: none; }
html.wp-solo .trips-totals, html.wp-my .trips-totals { order: -1; margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--text); }
html.wp-solo .sa-home-head { justify-content: flex-end; }
/* Compact filter chips; the row scrolls sideways with an edge fade. Hit area stays 44px via ::before. */
html.wp-solo #trips-filters .export-chips, html.wp-my #trips-filters .export-chips {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0.35rem;
  padding: 7px 18px 7px 0; margin-bottom: 0.4rem; scroll-padding-inline: 18px;
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, black calc(100% - 22px), transparent);
}
html.wp-solo #trips-filters .export-chips::-webkit-scrollbar, html.wp-my #trips-filters .export-chips::-webkit-scrollbar { display: none; }
html.wp-solo #trips-filters .chip, html.wp-my #trips-filters .chip {
  position: relative; flex: 0 0 auto; white-space: nowrap;
  min-height: 30px; padding: 0.2rem 0.7rem; font-size: 0.78rem; border-radius: 999px;
}
html.wp-solo #trips-filters .chip::before, html.wp-my #trips-filters .chip::before { content: ""; position: absolute; left: -1px; right: -1px; top: -8px; bottom: -8px; }
/* Light theme chips: light surface + visible border from the shared wp-btn secondary tokens
   (#155a9a on #eaf3fc text ~6.6:1, #1b6cb8 border ~4.9:1). Selected = wp-btn primary fill, white text. Dark keeps the base .chip look. */
html.wp-solo[data-theme="light"] #trips-filters .chip:not([aria-pressed="true"]), html.wp-my[data-theme="light"] #trips-filters .chip:not([aria-pressed="true"]) {
  background: var(--wpb-s-bg); color: var(--wpb-s-text); border-color: var(--wpb-s-border); box-shadow: none;
}
html.wp-solo[data-theme="light"] #trips-filters .chip:not([aria-pressed="true"]):hover, html.wp-my[data-theme="light"] #trips-filters .chip:not([aria-pressed="true"]):hover {
  background: var(--wpb-s-hover-bg); color: var(--wpb-s-hover-text); border-color: var(--wpb-s-border);
}
html.wp-solo[data-theme="light"] #trips-filters .chip[aria-pressed="true"], html.wp-my[data-theme="light"] #trips-filters .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--wpb-p-from) 0%, var(--wpb-p-to) 100%);
  color: var(--wpb-p-text); border-color: var(--wpb-p-border); box-shadow: none;
}
/* Signed-in-as card: Solo shows no name or role; Log out moved to the menu. */
html.wp-solo #app-shell .session-chip { display: none !important; }
/* Top bar: no theme switch (it is in the menu and in Settings); Help + Request a new feature stacked. */
html.wp-solo .v2-topbar > .v2-theme-switch { display: none; }
html.wp-solo .v2-top-help { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
html.wp-solo .v2-top-help[hidden] { display: none; }
html.wp-solo .v2-top-help-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 0.6rem; margin: 2px 0; font-size: 0.72rem; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
}
html.wp-solo .v2-top-help-btn[hidden] { display: none; }
html.wp-solo .v2-top-help-btn::before { content: ""; position: absolute; left: -6px; right: -6px; top: -3px; bottom: -3px; }
/* Menu foot: Log out is the last row. Room for the bottom bar so it is never covered. */
/* Log out: real .btn.secondary + shared .wp-btn (solo-button-style-2552) with the Saved Trips card button shape used by the 2.5.52 button pass
   (12px radius, 600 weight, 0.8125rem, compact padding, 44px tap). Fill/border colors come from .btn.secondary in both themes. */
html.wp-solo .v2-side-logout, html.wp-my .v2-side-logout {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 100%; height: auto; margin: 8px 0 0;
  border-radius: 12px; font-weight: 600; font-size: 0.8125rem; line-height: 1.2; padding: 0.15rem 0.7rem;
  min-height: 44px; min-width: 44px; text-decoration: none; cursor: pointer;
}
html.wp-solo .v2-side-logout[hidden], html.wp-my .v2-side-logout[hidden] { display: none; }
html.wp-solo .v2-side-logout:focus-visible, html.wp-my .v2-side-logout:focus-visible { outline: 2px solid var(--wpb-focus, var(--accent)); outline-offset: 2px; }
html.wp-solo .v2-side-foot, html.wp-my .v2-side-foot { display: flex; flex-direction: column; }

/* Org (app.) fiscal-year dashboard: Solo dashboard box look on the existing org cards (html.wp-my only). */
html.wp-my #dashboard-figures .dashboard-card {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  min-width: 0;
}
html.wp-my #dashboard-figures .dashboard-card::before { display: none; }
html.wp-my #dashboard-figures .dashboard-heading { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
html.wp-my #dashboard-figures .dashboard-label {
  margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
html.wp-my #dashboard-figures .dashboard-figure {
  margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
html.wp-my #dashboard-figures #dashboard-dollars { color: var(--money); }

/* Solo (my.) Dashboard 2.5.57 (solo-dashboard.js): Total dollars + Total miles from the user's trips, the Saved Trips
   time-frame chips (one shared choice), Miles by day bars. Solo only (html.wp-solo); org/district keep the old dashboard.
   Boxes use the Saved Trips card look: no blue top border or tint, a single --shadow (no doubled dark inset). */
html.wp-solo #view-dashboard > .fiscal-year-field,
html.wp-solo #view-dashboard > #dashboard-audience,
html.wp-solo #view-dashboard > #dashboard-figures { display: none !important; }
html.wp-solo #view-dashboard > #solo-dash[hidden] { display: none; }
html.wp-solo #view-dashboard #employee-log-trip.wp-btn { margin: 0 0 12px; }
html.wp-solo #dash-filters .export-chips {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0.35rem;
  padding: 7px 18px 7px 0; margin-bottom: 0.4rem; scroll-padding-inline: 18px;
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, black calc(100% - 22px), transparent);
}
html.wp-solo #dash-filters .export-chips::-webkit-scrollbar { display: none; }
html.wp-solo #dash-filters .chip {
  position: relative; flex: 0 0 auto; white-space: nowrap;
  min-height: 30px; padding: 0.2rem 0.7rem; font-size: 0.78rem; border-radius: 999px;
}
html.wp-solo #dash-filters .chip::before { content: ""; position: absolute; left: -1px; right: -1px; top: -8px; bottom: -8px; }
html.wp-solo body:where(html[data-theme="light"] *) #dash-filters .chip:not([aria-pressed="true"]) {
  background: var(--wpb-s-bg); color: var(--wpb-s-text); border-color: var(--wpb-s-border); box-shadow: none;
}
html.wp-solo body:where(html[data-theme="light"] *) #dash-filters .chip:not([aria-pressed="true"]):hover {
  background: var(--wpb-s-hover-bg); color: var(--wpb-s-hover-text); border-color: var(--wpb-s-border);
}
html.wp-solo body:where(html[data-theme="light"] *) #dash-filters .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--wpb-p-from) 0%, var(--wpb-p-to) 100%);
  color: var(--wpb-p-text); border-color: var(--wpb-p-border); box-shadow: none;
}
html.wp-solo body:where(html:not([data-theme="light"]) *) #dash-filters .chip:not([aria-pressed="true"]) { border-color: var(--accent); }
html.wp-solo #solo-dash .trips-filter-summary { margin: 0 0 0.6rem; }
html.wp-solo #solo-dash .solo-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
html.wp-solo #solo-dash .solo-dash-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin: 0;
  box-shadow: var(--shadow);
  min-width: 0;
}
html.wp-solo #solo-dash .solo-dash-box[hidden] { display: none; }
html.wp-solo #solo-dash .solo-dash-label {
  margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
html.wp-solo #solo-dash .solo-dash-figure {
  margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
html.wp-solo #solo-dash #dash-dollars { color: var(--money); }
html.wp-solo #solo-dash .solo-dash-sub { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
html.wp-solo #solo-dash .solo-dash-note { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
html.wp-solo #solo-dash .solo-dash-note[hidden] { display: none; }
html.wp-solo #solo-dash.is-empty .solo-dash-box { border-style: dashed; box-shadow: none; }
html.wp-solo #solo-dash.is-empty .solo-dash-figure,
html.wp-solo #solo-dash.is-empty #dash-dollars { color: var(--muted); }
html.wp-solo #solo-dash .solo-dash-empty {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 0.95rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
}
html.wp-solo #solo-dash .solo-dash-empty[hidden] { display: none; }
html.wp-solo #solo-dash .solo-dash-bars { margin-top: 12px; }
html.wp-solo #solo-dash .solo-dash-svg { display: block; width: 100%; height: auto; max-height: 120px; }
html.wp-solo #solo-dash .sdb-bar { fill: var(--wp-mint, var(--brand)); }
html.wp-solo #solo-dash .sdb-stub { fill: var(--muted); }
html.wp-solo #solo-dash .sdb-day { fill: var(--muted); font-weight: 600; font-size: 11px; }
/* Solo (my.) 2.5.57 retroactive rate sheet (solo-rate-apply.js). Solo only; tokens only, no raw hex. */
html.wp-solo #rate-apply {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center;
  padding: 12px; background: rgb(0 0 0 / 0.6);
}
html.wp-solo #rate-apply[hidden] { display: none; }
html.wp-solo #rate-apply .rate-apply-card {
  width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 16px 16px; box-shadow: var(--shadow);
}
html.wp-solo #rate-apply .rate-apply-title { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.25; color: var(--text); }
html.wp-solo #rate-apply .rate-apply-text { margin: 0 0 12px; font-size: 1rem; line-height: 1.4; color: var(--text); }
html.wp-solo #rate-apply .rate-apply-hint { margin: 0 0 12px; font-size: 0.9rem; color: var(--muted); }
html.wp-solo #rate-apply .rate-apply-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
html.wp-solo #rate-apply .rate-apply-dates label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; color: var(--text); }
html.wp-solo #rate-apply .rate-apply-dates input {
  min-height: 44px; min-width: 0; padding: 0 10px; border-radius: 10px; font: inherit;
  background: var(--surface); color: var(--text); border: 1px solid var(--muted);
}
html.wp-solo #rate-apply .rate-apply-dates input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.wp-solo #rate-apply .rate-apply-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
html.wp-solo #rate-apply .rate-apply-actions .btn { flex: 1 1 auto; min-height: 48px; }
html.wp-solo #rate-apply .rate-apply-actions .btn[hidden] { display: none; }
html.wp-solo #rate-apply .rate-apply-status { margin: 12px 0 0; font-size: 0.95rem; color: var(--text); }
html.wp-solo #rate-apply .rate-apply-status[data-kind="err"] {
  padding: 10px 12px; border-radius: 10px; border: 2px solid var(--danger); font-weight: 600;
}
html.wp-solo #rate-apply .rate-apply-status[data-kind="err"]::before { content: "Error: "; }
/* Solo (my.) mint highlight (2.5.52 draft): one shared mint for the active bottom tab and the tapped Settings row.
   Org/district never get html.wp-solo. Dark: brand mint #7ee8b5. Light: --success green #0f7a49. */
html.wp-solo, html.wp-my {
  --wp-mint: var(--brand);
    --wp-mint-tint: color-mix(in srgb, var(--wp-mint) 16%, transparent);
  --wp-settings-icon: var(--muted);
}
html.wp-solo[data-theme="light"], html.wp-my[data-theme="light"] { --wp-mint: var(--success); }
/* Active tab: the bar layout is unchanged. The selected icon lights up mint, the label is bold in the text color,
   and a 3px mint line runs along the BOTTOM edge of the selected tab's cell, under the label (an inset box-shadow,
   so nothing moves). The cell ends above the bar's safe-area inset, so the line stays visible above a home indicator.
   The old blue wash and top rule are cleared. Color is never the only signal: bold label + line + aria-current="page". */
html.wp-solo #employee-nav .tab[aria-current="page"], html.wp-my #employee-nav .tab[aria-current="page"] { color: var(--text); background: none; box-shadow: inset 0 -3px 0 var(--wp-mint); }
html.wp-solo #employee-nav .tab[aria-current="page"] svg, html.wp-my #employee-nav .tab[aria-current="page"] svg { color: var(--wp-mint); box-shadow: none; }
html.wp-solo #employee-nav .tab[aria-current="page"] .tab-label, html.wp-my #employee-nav .tab[aria-current="page"] .tab-label { font-weight: 800; }
html.wp-solo #employee-nav .tab:focus-visible, html.wp-my #employee-nav .tab:focus-visible { outline-color: var(--wp-mint); }
/* Settings icons: all one gray, like the Dark mode row (same glyphs and tiles). */
html.wp-solo .ssh-list .ssh-ico { --tone: var(--wp-settings-icon); }
/* Tapped / focused / last-opened Settings row: the same mint as the active tab. */
html.wp-solo .ssh-list .ssh-row:active,
html.wp-solo .ssh-list .ssh-row.ssh-row--last,
html.wp-solo .ssh-list .ssh-row:focus-visible {
  background: var(--wp-mint-tint);
  box-shadow: inset 3px 0 0 var(--wp-mint);
}
html.wp-solo .ssh-list .ssh-row:focus-visible { outline-color: var(--wp-mint); }
html.wp-solo .ssh-list .ssh-row:active .ssh-ico,
html.wp-solo .ssh-list .ssh-row.ssh-row--last .ssh-ico,
html.wp-solo .ssh-list .ssh-row:focus-visible .ssh-ico { color: var(--wp-mint); }
/* No new tile: the gray tile stays; only the glyph turns mint. */
html.wp-solo .ssh-list .ssh-row.ssh-row--last .ssh-title { font-weight: 700; }
/* Saved Trips filter chips, dark: unselected border to --accent #3d9cf0 so it reaches 3:1 (light keeps its own rule). */
html.wp-solo:not([data-theme="light"]) #trips-filters .chip:not([aria-pressed="true"]), html.wp-my:not([data-theme="light"]) #trips-filters .chip:not([aria-pressed="true"]) { border-color: var(--accent); }
/* Solo (my.) Settings > Forms: one card (solo-forms-card.js). Scoped to .solo-forms-card; org never renders it. */
.solo-forms-card h3 { margin: 1rem 0 0.5rem; font-size: 1.05rem; }
.solo-forms-card h4 { margin: 1.1rem 0 0.5rem; font-size: 0.95rem; color: var(--label); }
.solo-forms-card select, .solo-forms-card input[type="text"], .solo-forms-card input[type="file"] { width: 100%; max-width: 100%; }
.solo-forms-card .sf-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.solo-forms-card .sf-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--field-bg); padding: 0.75rem; min-width: 0; }
.solo-forms-card .sf-item.sf-danger { border-color: var(--danger); }
.solo-forms-card .sf-item p { margin: 0.25rem 0; }
.solo-forms-card .sf-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.solo-forms-card .sf-item-head strong { overflow-wrap: anywhere; }
.solo-forms-card .sf-badge { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; }
.solo-forms-card .sf-badge.ok { color: var(--success); }
.solo-forms-card .sf-badge.todo { color: var(--warning); }
.solo-forms-card .sf-item-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.solo-forms-card .sf-item-actions .btn { min-height: var(--tap-min); }
.solo-forms-card .sf-item-actions .sf-del { color: var(--danger); }
.solo-forms-card .sf-empty { color: var(--muted); margin: 0.5rem 0; }
.solo-forms-card .sf-privacy { font-size: 0.85rem; }
.solo-forms-card .sf-check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.6rem 0; cursor: pointer; }
.solo-forms-card .sf-check input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--accent); flex: 0 0 auto; }
/* "‹ Forms" back: keep the shared .btn.ghost size/padding/radius (an old padding-left:0 jammed the text against the outline). */
.solo-forms-card .sf-back { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0.5rem; }
.solo-forms-card .sf-map-row { margin-bottom: 0.6rem; }
.solo-forms-card .sf-map-row label { display: flex; justify-content: space-between; gap: 0.5rem; overflow-wrap: anywhere; }
.solo-forms-card .sf-page { color: var(--muted); font-weight: 400; font-size: 0.8rem; flex: 0 0 auto; }
.solo-forms-card .sf-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.solo-forms-card .sf-map-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.solo-forms-card .sf-map-actions .btn { flex: 1 1 10rem; }
.solo-forms-card .sf-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; }
.solo-forms-card .sf-offer { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--accent); border-radius: var(--radius); }
.solo-forms-card .sf-sheet { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg); padding: max(12px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.solo-forms-card .sf-sheet-inner { max-width: 560px; margin: 0 auto; }
.solo-forms-card .sf-sheet h3 { margin-top: 0.25rem; }
html.wp-sf-sheet-open body { overflow: hidden; }
@media (max-width: 380px) { .solo-forms-card .sf-formats { grid-template-columns: 1fr; } }

/* Solo New Trip on phones (2.5.44 candidate). Everything here is inside
   one max-width: 600px query and scoped to html.wp-solo / html.wp-my #view-new-trip, so
   tablet/desktop and org builds render exactly as before. */
@media (max-width: 600px) {
  html.wp-solo #view-new-trip #trip-form > .field:first-child, html.wp-my #view-new-trip #trip-form > .field:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  html.wp-solo #view-new-trip #trip-form > .field:first-child > label, html.wp-my #view-new-trip #trip-form > .field:first-child > label {
    flex: none;
    margin: 0;
    min-width: 3.2rem;
  }
  html.wp-solo #view-new-trip #trip-form > .field:first-child > input, html.wp-my #view-new-trip #trip-form > .field:first-child > input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  html.wp-solo #view-new-trip #trip-form .field, html.wp-my #view-new-trip #trip-form .field { margin-bottom: 10px; }
  html.wp-solo #view-new-trip #trip-form label, html.wp-my #view-new-trip #trip-form label { font-size: 0.88rem; }
  html.wp-solo #view-new-trip #trip-form input, html.wp-my #view-new-trip #trip-form input, html.wp-solo #view-new-trip #trip-form textarea, html.wp-my #view-new-trip #trip-form textarea, html.wp-solo #view-new-trip #trip-form select, html.wp-my #view-new-trip #trip-form select { font-size: 16px; }
  html.wp-solo #view-new-trip .loc-card, html.wp-my #view-new-trip .loc-card { padding: 8px 10px 8px; margin-bottom: 10px; border-radius: 10px; }
  html.wp-solo #view-new-trip .loc-card > .loc-card-label, html.wp-my #view-new-trip .loc-card > .loc-card-label { margin-bottom: 6px; font-size: 0.9rem; }
  html.wp-solo #view-new-trip .loc-trigger, html.wp-my #view-new-trip .loc-trigger { min-height: 44px; }
  html.wp-solo #view-new-trip .other-wrap label, html.wp-my #view-new-trip .other-wrap label { margin-top: 4px; }
  html.wp-solo #view-new-trip .loc-card.is-collapsed, html.wp-my #view-new-trip .loc-card.is-collapsed { padding: 0; }
  html.wp-solo #view-new-trip .loc-card.is-collapsed > :not(.loc-summary), html.wp-my #view-new-trip .loc-card.is-collapsed > :not(.loc-summary) { display: none !important; }
  html.wp-solo #view-new-trip .loc-summary, html.wp-my #view-new-trip .loc-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--loc-label);
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
  }
  html.wp-solo #view-new-trip .loc-summary[hidden], html.wp-my #view-new-trip .loc-summary[hidden] { display: none; }
  html.wp-solo #view-new-trip .loc-summary:focus-visible, html.wp-my #view-new-trip .loc-summary:focus-visible { outline: 3px solid var(--loc-accent); outline-offset: 2px; }
  html.wp-solo #view-new-trip .loc-summary-text, html.wp-my #view-new-trip .loc-summary-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.wp-solo #view-new-trip .loc-summary-edit, html.wp-my #view-new-trip .loc-summary-edit { flex: none; font-size: 0.85rem; font-weight: 600; text-decoration: underline; }
  html.wp-solo #view-new-trip .route-picker--phone, html.wp-my #view-new-trip .route-picker--phone {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 2px solid #2563eb;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
  }
  html.wp-solo #view-new-trip .route-picker--phone[hidden], html.wp-my #view-new-trip .route-picker--phone[hidden] { display: none; }
  html.wp-solo #view-new-trip .route-picker--phone::before, html.wp-my #view-new-trip .route-picker--phone::before {
    content: "Choose a Route";
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.95rem;
  }
  /* The ::before above is the visible heading; the legend carries the same "Choose a Route" name for screen readers. */
  html.wp-solo #view-new-trip .route-picker--phone .route-picker-options > legend, html.wp-my #view-new-trip .route-picker--phone .route-picker-options > legend {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* PR 303: no Show/Hide routes button on phones; the card is always open and loads routes by itself. */
  html.wp-solo #view-new-trip .route-picker--phone .route-picker-toggle, html.wp-my #view-new-trip .route-picker--phone .route-picker-toggle { display: none; }
  html.wp-solo #view-new-trip .distance-panel, html.wp-my #view-new-trip .distance-panel { padding: 10px; }
  html.wp-solo #view-new-trip .distance-result, html.wp-my #view-new-trip .distance-result { padding: 10px; }

  /* PR 303: Save trip / Reset bar as flat "liquid glass" (phones only; the sticky bar
     itself only exists below 560px, so desktop/tablet never see it). No bevel, no
     rounded top/bottom, no heavy shadow; frosted translucent tint + hairline edge.
     AA (worst case, content behind unblurred): dark #eef4fa on 72% #172433 >= 5.65:1,
     light #1c2836 on 72% #ffffff >= 7.5:1; buttons sit on their own solid fills. */
  html.wp-solo #view-new-trip .actions-sticky, html.wp-my #view-new-trip .actions-sticky {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    background-image: none;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 0;
    box-shadow: none;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.wp-solo #view-new-trip .actions-sticky, html.wp-my #view-new-trip .actions-sticky { background: color-mix(in srgb, var(--surface) 94%, transparent); }
  }
  /* Flat buttons, solid brand blue --action-border (white text: dark #1e6aaf 5.62:1, light #155a9a 7.09:1). */
  html.wp-solo #view-new-trip .actions-sticky .btn.primary, html.wp-my #view-new-trip .actions-sticky .btn.primary {
    background: var(--action-border);
    border-color: var(--action-border);
    box-shadow: none;
  }
  /* 2.5.59: body.role-employee makes this button display:grid (v2 frame), which top-aligns its label inside the
     44px+ min-height (Android WebView shows it ~3px high). Center the label; phones only, desktop unchanged. */
  html.wp-solo #view-new-trip .actions-sticky .btn.primary, html.wp-my #view-new-trip .actions-sticky .btn.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  html.wp-solo #view-new-trip .actions-sticky .btn.primary:hover:not(:disabled), html.wp-my #view-new-trip .actions-sticky .btn.primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--action-border) 88%, white);
  }
  html.wp-solo #view-new-trip .actions-sticky .btn.ghost, html.wp-my #view-new-trip .actions-sticky .btn.ghost {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border-color: var(--accent);
    box-shadow: none;
  }
}

/* Solo (my.) route picker + Open in Maps (2.5.29 UI). Org never sets html.wp-solo, and never mounts these. */
html.wp-solo .route-picker { margin-top: 0.6rem; display: grid; gap: 0.5rem; flex: 1 1 100%; width: 100%; min-width: 0; text-align: left; }
html.wp-solo .route-attribution a, html.wp-my .route-attribution a { color: inherit; text-decoration: underline; }
html.wp-solo .distance-panel:has(> .route-picker:not([hidden])) { flex-wrap: wrap; }
html.wp-solo .route-picker[hidden], html.wp-solo .route-save-error[hidden], html.wp-solo .open-in-maps-box[hidden] { display: none; }
html.wp-solo .route-picker-toggle { min-height: 44px; width: 100%; justify-content: flex-start; text-align: left; white-space: normal; }
html.wp-solo .route-picker-panel { display: grid; gap: 0.5rem; }
html.wp-solo .route-picker-options { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; min-width: 0; }
html.wp-solo .route-picker-options legend { font-weight: 600; margin-bottom: 0.35rem; padding: 0; }
html.wp-solo .rp-option, html.wp-my .rp-option {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer;
}
html.wp-solo .rp-option:has(input:checked), html.wp-my .rp-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
html.wp-solo .rp-option:focus-within, html.wp-my .rp-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
html.wp-solo .rp-option input, html.wp-my .rp-option input { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; accent-color: var(--accent); }
html.wp-solo .rp-option-label, html.wp-my .rp-option-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html.wp-solo .rp-option-tag, html.wp-my .rp-option-tag { font-size: 0.78rem; color: var(--muted); flex: none; }
html.wp-solo .route-picker-status, html.wp-solo .route-picker-error, html.wp-solo .route-attribution, html.wp-my .route-attribution { margin: 0; }
html.wp-solo .route-picker-error { color: var(--danger, #e5534b); }
html.wp-solo .route-attribution, html.wp-my .route-attribution { font-size: 0.75rem; color: var(--muted); }
html.wp-solo .route-save-error { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
html.wp-solo .route-save-error .btn { min-height: 44px; }
html.wp-solo .open-in-maps-box { display: grid; gap: 0.35rem; margin: 0.75rem 0; }
html.wp-solo .open-in-maps-box .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
html.wp-solo .save-banner-open-maps { margin: 0.5rem 0 0; }
html.wp-solo .edit-saved-banner .save-banner-text { margin: 0; }
html.wp-solo .open-in-maps-note { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* 2.5.30 Google-only maps: manual-miles prompt, address hint, degraded banner (Solo). */
.manual-miles-prompt { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 45%, transparent); background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface, #fff)); color: var(--text, inherit); font-size: 0.95rem; line-height: 1.4; }
.manual-miles-prompt[hidden], .maps-degraded-banner[hidden], .lookup-unavailable-hint[hidden] { display: none; }
.lookup-unavailable-hint { margin: 0.35rem 0 0; color: var(--muted, inherit); }
.maps-degraded-banner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 12px; border: 1px solid color-mix(in srgb, #d97706 55%, transparent); background: color-mix(in srgb, #f59e0b 14%, var(--surface, #fff)); color: var(--text, inherit); }
.maps-degraded-text { margin: 0; flex: 1 1 12rem; line-height: 1.4; }
.maps-degraded-close { min-height: 44px; min-width: 44px; }

/* Solo 2.5.30: read-only Super Admin account list. Solo only (html.wp-solo). */
html.wp-solo .solo-admin-list { margin-top: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: 0 0.8rem; background: var(--surface-2); }
html.wp-solo .solo-admin-list > summary { min-height: 44px; display: flex; align-items: center; gap: 0.35rem; cursor: pointer; font-weight: 600; }
html.wp-solo .solo-admin-list[open] { padding-bottom: 0.8rem; }
html.wp-solo .sal-ro { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
html.wp-solo .sal-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.6rem; }
html.wp-solo .sal-filters .sal-f-email { grid-column: 1 / -1; }
html.wp-solo .sal-filters input, html.wp-solo .sal-filters select { min-height: 44px; width: 100%; box-sizing: border-box; }
html.wp-solo .sal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
html.wp-solo .sal-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.4rem; border-bottom: 1px solid var(--border); }
html.wp-solo .sal-table td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
html.wp-solo .sal-who strong, html.wp-solo .sal-who .sal-name { display: block; }
html.wp-solo .sal-name, html.wp-solo .sal-detail { color: var(--muted); font-size: 0.85rem; }
html.wp-solo .sal-detail { display: block; margin-top: 0.2rem; }
html.wp-solo .sal-num { text-align: right; white-space: nowrap; }
html.wp-solo .sal-chip { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 0.1rem 0.5rem; margin: 0 0.25rem 0.2rem 0; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); }
html.wp-solo .sal-chip.is-ok, html.wp-solo .sal-plan.is-paid { color: var(--brand); background: color-mix(in srgb, var(--brand) 15%, transparent); border-color: transparent; }
html.wp-solo .sal-chip.is-warn, html.wp-solo .sal-plan.is-trial, html.wp-solo .sal-plan.is-read_only { color: #b7791f; background: color-mix(in srgb, #d69e2e 16%, transparent); border-color: transparent; }
html.wp-solo .sal-chip.is-bad, html.wp-solo .sal-plan.is-past_due, html.wp-solo .sal-plan.is-canceled { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: transparent; }
html.wp-solo .sal-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; }
html.wp-solo .sal-pager .btn { min-height: 44px; }
html.wp-solo .sal-pageline { color: var(--muted); font-size: 0.88rem; text-align: center; }
/* Narrow (and the 640px app column): rows as cards, no horizontal scroll. */
@media (max-width: 899px) {
  html.wp-solo .sal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.wp-solo .sal-table, html.wp-solo .sal-table tbody, html.wp-solo .sal-table tr, html.wp-solo .sal-table td { display: block; }
  html.wp-solo .sal-row { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; margin-top: 0.6rem; background: var(--surface); }
  html.wp-solo .sal-table td { border: 0; padding: 0.15rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; text-align: left; }
  html.wp-solo .sal-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; }
  html.wp-solo .sal-table td.sal-who { display: block; padding-bottom: 0.3rem; }
  html.wp-solo .sal-table td.sal-who::before { content: none; }
}
@media (min-width: 900px) {
  html.wp-solo .sal-filters { grid-template-columns: 2fr 1fr 1fr 1fr 0.7fr; }
  html.wp-solo .sal-filters .sal-f-email { grid-column: auto; }
}


/* Solo 2.5.33: Super Admin home = Overview (solo-superadmin-home.js). Solo only (html.wp-solo.wp-sa-home). */
#sa-home.hidden { display: none; }
/* 2.6.8: the rest of the Dashboard stays visible under the Overview card. */
html.wp-solo.wp-sa-home #view-dashboard > #sa-home { display: block; margin-bottom: 1.25rem; }
html.wp-solo .sa-home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
html.wp-solo .sa-home-head h2 { margin: 0; }
html.wp-solo .sa-home-head .btn { min-height: 44px; }
html.wp-solo #sa-home-accounts-hint { margin: 0.25rem 0 0.8rem; }

/* Solo (my.) acknowledgement checkboxes ("I understand", Terms, checkout consent): shared .solo-ack.
   One readable size and colour everywhere. On an amber .warn-banner the label and box use the bar's own
   ink (#ffe3a3 on #3a2f12) in both themes, instead of the page --label colour, which was 1.2:1 on the bar in
   light theme. The label text is not selectable, so tapping it can't paint the "highlighted" selection look. */
html.wp-solo .solo-ack {
  --solo-ack-ink: var(--text);
  --solo-ack-paper: var(--surface);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin: 0.25rem 0 0;
  padding: 0;
  color: var(--solo-ack-ink);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.wp-solo .warn-banner .solo-ack {
  --solo-ack-ink: #ffe3a3;
  --solo-ack-paper: #3a2f12;
  flex: none;
}
html.wp-solo .warn-banner:has(> .solo-ack) { flex-wrap: wrap; align-items: center; row-gap: 0.25rem; }
html.wp-solo .warn-banner:has(> .solo-ack) > p { flex: 1 1 220px; }
html.wp-solo .solo-delete-confirm .warn-banner:has(> .solo-ack) { align-items: flex-start; }
html.wp-solo .solo-delete-confirm .warn-banner:has(> .solo-ack) > p { flex: 0 0 auto; }
html.wp-solo .solo-ack a { -webkit-user-select: text; user-select: text; }
html.wp-solo .solo-ack input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--solo-ack-ink);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
html.wp-solo .solo-ack input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border: solid var(--solo-ack-paper);
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg);
  visibility: hidden;
}
html.wp-solo .solo-ack input[type="checkbox"]:hover,
html.wp-solo .solo-ack input[type="checkbox"]:focus { border-color: var(--solo-ack-ink); box-shadow: none; }
html.wp-solo .solo-ack input[type="checkbox"]:checked { background: var(--solo-ack-ink); }
html.wp-solo .solo-ack input[type="checkbox"]:checked::before { visibility: visible; }
html.wp-solo .solo-ack input[type="checkbox"]:focus-visible { outline: 2px solid var(--solo-ack-ink); outline-offset: 3px; }
html.wp-solo .solo-ack input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }
html.wp-solo .solo-ack::selection, html.wp-solo .solo-ack *::selection { background: transparent; }

/* Solo (my.) support chat panel (support-chat.js). Shown only when /api/config supportChat is on. Brand: mint --brand #7ee8b5,
   blue --accent #3d9cf0 (dark) / #1b6cb8 -> #155a9a (light), same fills as the PR 299 mint button and the Open in Maps blue. */
html.wp-solo .sc-panel { --sc-blue-from: #2a6fa8; --sc-blue-to: #1f64a3; --sc-blue-text: #ffffff; --sc-blue-border: #3d9cf0;
  --sc-mint: #7ee8b5; --sc-mint-text: #0c1219; --sc-mint-border: #4fbf8c; --sc-focus: #7ee8b5;
  position: fixed; z-index: 1200; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 8px;
  height: min(var(--sc-vh, 100dvh), 100dvh); max-height: var(--sc-vh, 100dvh); padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--text); border-top: 1px solid var(--border); box-sizing: border-box; }
html.wp-solo .sc-panel[hidden] { display: none; }
html.wp-solo[data-theme="light"] .sc-panel { --sc-blue-from: #1b6cb8; --sc-blue-to: #155a9a; --sc-blue-text: #ffffff; --sc-blue-border: #124f88;
  --sc-mint: #7ee8b5; --sc-mint-text: #0c1219; --sc-mint-border: #2f9e6b; --sc-focus: #155a9a; }
html.wp-solo.sc-open body { overflow: hidden; }
@media (min-width: 700px) { html.wp-solo .sc-panel { inset: auto 24px 24px auto; width: 400px; height: min(620px, calc(100dvh - 48px));
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } }
html.wp-solo .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.wp-solo .sc-head h2 { margin: 0; font-size: 1.1rem; }
html.wp-solo .sc-close { min-width: 44px; min-height: 44px; font-size: 1.6rem; line-height: 1; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
html.wp-solo .sc-notice { padding: 12px; border: 1px solid var(--sc-mint-border); border-radius: 10px; background: var(--surface-2); }
html.wp-solo .sc-notice p { margin: 0 0 10px; line-height: 1.45; }
html.wp-solo .sc-panel a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
html.wp-solo .sc-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
html.wp-solo .sc-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; }
html.wp-solo .sc-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
html.wp-solo .sc-user { align-self: flex-end; background: var(--sc-blue-from); color: var(--sc-blue-text); }
html.wp-solo .sc-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
html.wp-solo .sc-handoff { border-color: var(--sc-mint-border); }
html.wp-solo .sc-sources { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; }
html.wp-solo .sc-sources li { margin: 2px 0; }
html.wp-solo .sc-status:empty { display: none; }
html.wp-solo .sc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
html.wp-solo .sc-status p { margin: 0; flex: 1 1 180px; }
html.wp-solo .sc-panel[data-state="error"] .sc-status, html.wp-solo .sc-panel[data-state="rate"] .sc-status,
html.wp-solo .sc-panel[data-state="offline"] .sc-status, html.wp-solo .sc-panel[data-state="expired"] .sc-status,
html.wp-solo .sc-panel[data-state="guard"] .sc-status { border-color: var(--danger); }
html.wp-solo .sc-form { display: flex; flex-direction: column; gap: 6px; }
html.wp-solo .sc-input { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 48px; padding: 10px; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
html.wp-solo .sc-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
html.wp-solo .sc-confirm { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html.wp-solo .sc-confirm p { flex: none; }
html.wp-solo .sc-actions { display: flex; gap: 8px; justify-content: space-between; }
html.wp-solo .sc-btn { min-height: 44px; padding: 0 16px; font: inherit; font-weight: 600; border-radius: 10px; cursor: pointer; }
html.wp-solo .sc-blue { background: linear-gradient(180deg, var(--sc-blue-from), var(--sc-blue-to)); color: var(--sc-blue-text); border: 1px solid var(--sc-blue-border); }
html.wp-solo .sc-mint { background: var(--sc-mint); color: var(--sc-mint-text); border: 1px solid var(--sc-mint-border); }
html.wp-solo .sc-btn:disabled { opacity: 0.6; cursor: default; }
html.wp-solo .sc-panel :focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html.wp-solo .sc-panel, html.wp-solo .sc-panel * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Solo 2.5.31: read-only Super Admin Overview tab (solo-overview.js). Solo only (html.wp-solo). */
html.wp-solo .sao-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.8rem; }
html.wp-solo .sao-tabs.hidden { display: none; }
html.wp-solo .sao-tabs [role="tab"] { min-height: 44px; padding: 0 1rem; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
html.wp-solo .sao-tabs [aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
html.wp-solo .sao-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
html.wp-solo .sao-ranges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
html.wp-solo .sao-ranges .chip, html.wp-solo .sao-refresh, html.wp-solo #sao-bucket { min-height: 44px; min-width: 44px; }
html.wp-solo .sao-ranges .chip { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 99px; padding: 0 0.9rem; font-weight: 600; }
html.wp-solo .sao-ranges .chip[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
html.wp-solo #sao-bucket { width: auto; flex: 0 0 auto; }
html.wp-solo .sao-bucket-l { font-size: 0.85rem; color: var(--muted); }
html.wp-solo .sao-updated { color: var(--muted); font-size: 0.85rem; flex: 1 1 10rem; }
html.wp-solo .sao-card { border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem; background: var(--surface-2); }
html.wp-solo .sao-card-title, html.wp-solo .sao-h { margin: 0 0 0.5rem; font-size: 1rem; }
html.wp-solo .sao-h { margin-top: 1.1rem; }
html.wp-solo .sao-rev-main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
html.wp-solo .sao-k { display: block; font-size: 0.8rem; color: var(--muted); }
html.wp-solo .sao-big { font-size: 1.6rem; }
html.wp-solo .sao-mid { font-size: 1.15rem; }
html.wp-solo .sao-note { margin: 0.4rem 0; font-weight: 600; color: var(--muted); }
html.wp-solo .sao-rev-lines { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.25rem; font-size: 0.9rem; }
html.wp-solo .sao-sandbox { margin: 0.5rem 0 0; color: #8a8f98; font-size: 0.85rem; }
html.wp-solo .sao-fine { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.78rem; }
html.wp-solo .sao-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
html.wp-solo .sao-tile { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; background: var(--surface); min-width: 0; }
html.wp-solo .sao-tile strong { display: block; font-size: 1.2rem; overflow-wrap: anywhere; }
html.wp-solo .sao-sub { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
html.wp-solo .sao-h .sao-sub { display: inline; }
html.wp-solo .sao-mix { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin-top: 0.7rem; background: var(--border); }
html.wp-solo .sao-mix-legend { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--muted); }
html.wp-solo .sao-mix-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: -1px; }
html.wp-solo .sao-mix-free { background: #94a3b8; } html.wp-solo .sao-mix-trialing { background: #d69e2e; }
html.wp-solo .sao-mix-paid { background: var(--brand); } html.wp-solo .sao-mix-pastDue { background: var(--danger); }
html.wp-solo .sao-mix-readOnly { background: #a78bfa; } html.wp-solo .sao-mix-canceled { background: #64748b; }
html.wp-solo .sao-charts { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
html.wp-solo .sao-chart { margin: 0; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; background: var(--surface); }
html.wp-solo .sao-chart figcaption { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
html.wp-solo .sao-chart svg { width: 100%; height: 90px; display: block; }
html.wp-solo .sao-chart rect { fill: var(--brand); }
html.wp-solo .sao-chart .sao-supp { fill: var(--muted); font-size: 10px; }
html.wp-solo .sao-axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); }
html.wp-solo .sao-notes { color: var(--muted); font-size: 0.82rem; padding-left: 1.1rem; }
@media (min-width: 900px) {
  html.wp-solo .sao-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.wp-solo .sao-charts { grid-template-columns: repeat(3, 1fr); }
}

/* Solo (my.) show-password eye toggle (solo-password-toggle.js). */
html.wp-solo .pw-wrap, html.wp-my .pw-wrap { position: relative; display: block; }
html.wp-solo .pw-wrap > input, html.wp-my .pw-wrap > input { width: 100%; padding-right: 3rem; box-sizing: border-box; }
html.wp-solo .pw-toggle, html.wp-my .pw-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; border-radius: var(--radius); }
html.wp-solo .pw-toggle:hover, html.wp-my .pw-toggle:hover, html.wp-solo .pw-toggle[aria-pressed="true"], html.wp-my .pw-toggle[aria-pressed="true"] { color: var(--text); }
html.wp-solo .pw-toggle:focus-visible, html.wp-my .pw-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Solo (my.) "Request a new feature" text button beside Help (solo-feature-request.js). It carries Help's own class (.help-menu-btn),
   so shape, size, weight, radius, padding, height and 44px tap target are Help's rules. This block only makes the <a> lay out like
   Help's <button> and swaps the blue for mint (dark text, AA in both themes). Org never shows it. */
html.wp-solo .help-menu-btn.feature-request-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; flex: 0 0 auto;
  --fr-from: #8eecc4; --fr-to: #5fd3a0; --fr-border: #3fb583; --fr-text: #062a1a;
  color: var(--fr-text); background: linear-gradient(180deg, var(--fr-from) 0%, var(--fr-to) 100%); border-color: var(--fr-border); }
html.wp-solo .help-menu-btn.feature-request-btn:where(html[data-theme="light"] *) { --fr-from: #9df0c8; --fr-to: #6fdcaa; --fr-border: #2f9e6c; --fr-text: #06321f; }
html.wp-solo .help-menu-btn.feature-request-btn:hover { color: var(--fr-text); background: linear-gradient(180deg, color-mix(in srgb, var(--fr-from) 70%, white) 0%, color-mix(in srgb, var(--fr-to) 80%, white) 100%); }
html.wp-solo .help-menu-btn.feature-request-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.wp-solo .v2-sidebar:has(#role-switch[hidden]):has(#feature-request-link:not([hidden])) .role-switch { height: auto; margin: 0.25rem 12px 0.5rem; }
html.wp-solo .v2-sidebar:has(#role-switch[hidden]):has(#feature-request-link:not([hidden])) .role-switch-head { position: static; flex-wrap: wrap; justify-content: center; gap: 0.75rem; height: auto; min-height: 44px; }
html.wp-solo .v2-sidebar:has(#role-switch[hidden]):has(#feature-request-link:not([hidden])) .v2-brand { padding-right: 16px; }
html.wp-solo .v2-sidebar:has(#feature-request-link:not([hidden])) .help-menu { display: flex; align-items: center; } /* drops the inline line-box gap so Help and the mint button share one top/bottom edge */
/* 2.5.59 phones/tablets (top bar shown below 1024px): the drawer started at top 0, under the sticky top bar
   (z 46 > drawer z 45), so the logo, "Miles made simple" and Help poked out under the bar. Start it below the bar. */
@media (max-width: 1023px) {
  html.wp-solo .v2-sidebar, html.wp-my .v2-sidebar { top: var(--v2-topbar-h, 57px); }
}
/* Phones: the drawer's logo row sits under the top bar, which hid Help (pre-existing). Center Help underneath it. */
@media (max-width: 899px) {
  html.wp-solo .v2-sidebar:has(#role-switch[hidden]) .role-switch, html.wp-my .v2-sidebar:has(#role-switch[hidden]) .role-switch { height: auto; margin: 0.25rem 0 0.5rem; }
  html.wp-solo .v2-sidebar:has(#role-switch[hidden]) .role-switch-head, html.wp-my .v2-sidebar:has(#role-switch[hidden]) .role-switch-head { position: static; justify-content: center; height: 44px; }
}


/* 2.5.38 Solo mapper: sidebar (bottom sheet on phones), zoom, label tags. Solo only (html.wp-solo), placed just before the flat-placer block so that block stays last; html.wp-solo specificity wins over it. */
html.wp-solo .solo-forms-card .sfp-work { display: block; }
html.wp-solo .solo-forms-card .sfp-stage { position: relative; }
html.wp-solo .solo-forms-card .sfp-zoombar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.4rem; }
html.wp-solo .solo-forms-card .sfp-zoombar .btn { min-height: 44px; min-width: 44px; padding: 0 0.7rem; }
html.wp-solo .solo-forms-card .sfp-zoombar output { min-width: 3.4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
html.wp-solo .solo-forms-card .sfp-zoombar .sfp-labels { margin-left: auto; }
html.wp-solo .solo-forms-card .sfp-zoom { overflow: auto; max-height: 75vh; border-radius: 6px; touch-action: pan-x pan-y; overscroll-behavior: contain; }
html.wp-solo .solo-forms-card .sfp-zoom:not(.zoomed) { max-height: none; overflow: visible; }
html.wp-solo .solo-forms-card .sfp-zoom.zoomed .sfp-paper { max-width: none; }
html.wp-solo .solo-forms-card .sfp-stage > .sfp-mag { top: 52px; }
/* Pins: the dot is the pin (a 28 px hit area for dragging found boxes); the label is a separate tag that never takes pointer events. */
html.wp-solo .solo-forms-card .sfp-pin.tagged { width: 0; height: 0; padding: 0; background: none; border-radius: 0; transform: none; outline: none; z-index: 2; }
html.wp-solo .solo-forms-card .sfp-pin.tagged::after { left: -4px; bottom: auto; top: -4px; width: 8px; height: 8px; right: auto; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.drag::before { content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; }
html.wp-solo .solo-forms-card .sfp-pin.tagged .sfp-tag { position: absolute; left: 0; top: 6px; visibility: hidden; pointer-events: none; background: #1b6cb8; color: #fff; font: 700 11px/1.3 system-ui, sans-serif; padding: 1px 6px; border-radius: 4px; white-space: nowrap; box-shadow: 0 0 0 1px #fff; }
html.wp-solo .solo-forms-card .sfp-pin.tagged .sfp-lead { position: absolute; left: -0.5px; top: 4px; width: 1px; height: 2px; background: #1b6cb8; box-shadow: 0 0 0 0.5px #fff; pointer-events: none; visibility: hidden; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.laid .sfp-tag, html.wp-solo .solo-forms-card .sfp-pin.tagged.laid .sfp-lead { visibility: visible; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.cur .sfp-tag { background: #c2410c; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.cur .sfp-lead { background: #c2410c; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.unset .sfp-tag, html.wp-solo .solo-forms-card .sfp-pin.tagged.unset .sfp-lead { background: #6b7280; }
/* 2.5.44 draggable dots: the active dot is brand blue with a mint halo and drags (touch-action none only on it); other dots are tap-to-activate and leave page scroll/pinch alone. */
html.wp-solo .solo-forms-card .sfp-pin.tagged.pickable { pointer-events: auto; cursor: pointer; touch-action: pan-x pan-y pinch-zoom; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.pickable::before { content: ""; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.active { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 3; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.active::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.active::after { left: -7px; top: -7px; width: 14px; height: 14px; background: #1b6cb8; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #7ee8b5, 0 0 0 6px #2a6fa8; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.active .sfp-tag, html.wp-solo .solo-forms-card .sfp-pin.tagged.active .sfp-lead { background: #1b6cb8; box-shadow: 0 0 0 2px #7ee8b5; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.active:focus-visible { outline: none; }
html.wp-solo .solo-forms-card .sfp-pin.tagged.active:focus-visible::before { outline: 3px solid #2a6fa8; outline-offset: -3px; }
html.wp-solo .solo-forms-card .sfp-paper.busy .sfp-pin.tagged.active { cursor: grabbing; }
html.wp-solo .solo-forms-card .sfp-paper.no-labels .sfp-pin.tagged.laid .sfp-tag, html.wp-solo .solo-forms-card .sfp-paper.no-labels .sfp-pin.tagged.laid .sfp-lead,
html.wp-solo .solo-forms-card .sfp-paper.busy .sfp-pin.tagged.laid .sfp-tag, html.wp-solo .solo-forms-card .sfp-paper.busy .sfp-pin.tagged.laid .sfp-lead,
html.wp-solo .solo-forms-card .sfp-pin.tagged.laid.under-mag .sfp-tag, html.wp-solo .solo-forms-card .sfp-pin.tagged.laid.under-mag .sfp-lead { visibility: hidden; }
/* Sidebar */
html.wp-solo .solo-forms-card .sfp-side { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
html.wp-solo .solo-forms-card .sfp-side-h { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; }
html.wp-solo .solo-forms-card .sfp-side-t { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; text-align: left; min-height: 44px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; padding: 0 0.25rem; cursor: pointer; }
html.wp-solo .solo-forms-card .sfp-search input { width: 100%; min-height: 44px; box-sizing: border-box; }
/* 2.5.45: the collapsed bar keeps the chosen item's example and a short description on one ellipsized line. */
html.wp-solo .solo-forms-card .sfp-side-tl { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
html.wp-solo .solo-forms-card .sfp-side-tl > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.wp-solo .solo-forms-card .sfp-side-ex { display: block; font-size: 0.78rem; font-weight: 400; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.wp-solo .solo-forms-card .sfp-side-ex-v { font-weight: 700; color: var(--text); }
html.wp-solo .solo-forms-card .sfp-side-t .sfp-count { flex: none; }
html.wp-solo .solo-forms-card .sfp-side-b { padding: 0 0.5rem 0.5rem; overflow-y: auto; }
html.wp-solo .solo-forms-card .sfp-grp summary { display: flex; justify-content: space-between; align-items: center; min-height: 40px; cursor: pointer; font-weight: 700; }
html.wp-solo .solo-forms-card .sfp-grp ul { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
html.wp-solo .solo-forms-card .sfp-grp .sfp-chip { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; border-radius: 10px; padding: 0.35rem 0.7rem; }
html.wp-solo .solo-forms-card .sfp-grp .sfp-chip[data-dragkey] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
html.wp-solo .solo-forms-card .sfp-grp .sfp-chip:disabled { opacity: 0.5; cursor: not-allowed; }
html.wp-solo .solo-forms-card .sfp-count { font-size: 0.8rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
html.wp-solo .solo-forms-card .sfp-side-tip { font-size: 0.85rem; opacity: 0.8; margin: 0.4rem 0 0; }
html.wp-solo .solo-forms-card .sfp-help { font-size: 0.78rem; line-height: 1.3; color: var(--muted); margin: 0.15rem 0.7rem 0.2rem; }
html.wp-solo .solo-forms-card .sfp-ex { font-size: 0.8rem; line-height: 1.3; color: var(--muted); margin: 0.2rem 0.7rem 0.3rem; overflow-wrap: anywhere; }
html.wp-solo .solo-forms-card .sfp-ex-v { display: inline-block; max-width: 100%; padding: 0.05rem 0.35rem; border: 1px solid #c9d2dc; border-radius: 4px; background: #fff; color: #111; font-family: Helvetica, Arial, sans-serif; }
html.wp-solo .solo-forms-card .sfp-ghost { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
html.wp-solo .solo-forms-card .sfp-ghost i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #c2410c; box-shadow: 0 0 0 2px #fff; }
html.wp-solo .solo-forms-card .sfp-ghost b { position: absolute; left: 0; bottom: 8px; background: #c2410c; color: #fff; font: 700 12px/1.3 system-ui, sans-serif; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
@media (min-width: 900px) {
  html.wp-solo .solo-forms-card .sf-sheet-inner:has(.sfp-work.has-side) { max-width: 1080px; }
  html.wp-solo .solo-forms-card .sfp-work.has-side { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
  html.wp-solo .solo-forms-card .sfp-work.has-side .sfp-side { position: sticky; top: 0; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
  /* The list never makes the row taller than the page preview: it stretches to the preview's height (capped at the viewport) and scrolls inside, so the page preview and the dot you are dragging stay in view. */
  html.wp-solo .solo-forms-card .sfp-work.has-side .sfp-side { align-self: stretch; contain: size; min-height: 0; overflow: hidden; }
  html.wp-solo .solo-forms-card .sfp-work.has-side .sfp-side-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  html.wp-solo .solo-forms-card .sfp-side-t { pointer-events: none; }
}
@media (max-width: 899.98px) {
  /* Phones and narrow windows: the list is a bottom sheet. Collapsed it shows the title, count and search. */
  html.wp-solo .solo-forms-card .sfp-work.has-side { padding-bottom: 7.5rem; }
  html.wp-solo .solo-forms-card .sfp-work.has-side .sfp-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25); padding-bottom: env(safe-area-inset-bottom); max-width: 100vw; }
  html.wp-solo .solo-forms-card .sfp-work.has-side { padding-bottom: 140px; }
  html.wp-solo .solo-forms-card .sfp-side:not(.open) .sfp-side-b { display: none; }
  /* 2.5.45: collapsed sheet = page control + item bar only (search shows when opened), so it stays short over the page. */
  html.wp-solo .solo-forms-card .sfp-side:not(.open) .sfp-search { display: none; }
  html.wp-solo .solo-forms-card .sfp-side-h { gap: 0.25rem; padding: 0.4rem 0.5rem; }
  html.wp-solo .solo-forms-card .sfp-side.open .sfp-side-b { max-height: 45vh; }
  html.wp-solo .solo-forms-card .sfp-side-t::after { content: "▴"; margin-left: 0.5rem; }
  html.wp-solo .solo-forms-card .sfp-side.open .sfp-side-t::after { content: "▾"; }
}
/* Solo create account (sign-in screen). Org builds never show these nodes. */
html.wp-solo .solo-create-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.2rem;
}
html.wp-solo .solo-create-entry.hidden,
html.wp-solo .solo-signup-form.hidden,
html.wp-solo .solo-legal-links.hidden,
html.wp-solo .solo-create-entry[hidden],
html.wp-solo .solo-signup-form[hidden],
html.wp-solo .solo-legal-links[hidden],
html.wp-solo .solo-signup-away { display: none !important; }
html.wp-solo .solo-create-lead { margin: 0; color: var(--muted, #9fb0c3); }
html.wp-solo .solo-create-entry .btn { min-height: 44px; }
html.wp-solo .solo-signup-form .actions .btn { width: 100%; }
html.wp-solo .solo-signup-form .hint { margin: 0.3rem 0 0; font-size: 0.85rem; }
html.wp-solo .solo-signup-terms { margin: 0.6rem 0 0.4rem; }
html.wp-solo .solo-signup-form #solo-signup-back { margin-top: 0.4rem; }
html.wp-solo .solo-legal-links { text-align: center; }
html.wp-solo .solo-legal-links a { color: inherit; text-decoration: underline; }
html.wp-solo .solo-consent-lead { display: block; margin-bottom: 0.45rem; font-weight: 600; }

/* Solo (my.) shared real-button style "wp-btn" (2.5.52 button pass). Reuse: add class="wp-btn" (or keep .btn) on any Solo button.
   Shape = the Saved Trips card buttons: 12px radius, 600 weight, compact type and padding, never underlined, 44px+ tap target
   (min-height/min-width, no pseudo-element). Box- or link-looking buttons (ghost, bare .btn, back buttons, Preview buttons) get the
   secondary fill so they read as buttons in dark and light. Primary keeps its fill, width and 1rem type. Destructive roles keep their colors.
   :not(#wp-btn-scope) only raises specificity over older page rules. No new motion. Org/district never set html.wp-solo. */
html.wp-solo body, html.wp-my body { --wpc-radius: 12px; --wpc-weight: 600; --wpc-font: 0.8125rem; --wpc-pad: 0.15rem 0.7rem; --wpc-line: 1.2; --wpc-tap: 44px; }
html.wp-solo body:not(#wp-btn-scope) :is(.wp-btn, .btn:not(.link)), html.wp-my body:not(#wp-btn-scope) :is(.wp-btn, .btn:not(.link)) {
  border-radius: var(--wpc-radius); font-weight: var(--wpc-weight); font-size: var(--wpc-font); line-height: var(--wpc-line);
  padding: var(--wpc-pad); min-height: var(--wpc-tap); min-width: var(--wpc-tap); text-decoration: none;
  text-align: center;
}
html.wp-solo body:not(#wp-btn-scope) :is(.wp-btn, .btn:not(.link)).primary, html.wp-my body:not(#wp-btn-scope) :is(.wp-btn, .btn:not(.link)).primary { font-size: 1rem; padding: 0.5rem 1rem; min-height: 48px; }
html.wp-solo body:not(#wp-btn-scope) :is(.wp-btn, .btn.ghost, .btn:not(.primary):not(.secondary):not(.ghost):not(.danger):not(.link)):not(.danger):not(.danger-ghost):not(.danger-text):not(.sf-del):not(.link), html.wp-my body:not(#wp-btn-scope) :is(.wp-btn, .btn.ghost, .btn:not(.primary):not(.secondary):not(.ghost):not(.danger):not(.link)):not(.danger):not(.danger-ghost):not(.danger-text):not(.sf-del):not(.link) {
  background: var(--wpb-s-bg); color: var(--wpb-s-text); border: 1px solid var(--wpb-s-border); box-shadow: none; text-decoration: none;
}
html.wp-solo body:not(#wp-btn-scope) :is(.wp-btn, .btn.ghost, .btn:not(.primary):not(.secondary):not(.ghost):not(.danger):not(.link)):not(.danger):not(.danger-ghost):not(.danger-text):not(.sf-del):not(.link):hover:not(:disabled), html.wp-my body:not(#wp-btn-scope) :is(.wp-btn, .btn.ghost, .btn:not(.primary):not(.secondary):not(.ghost):not(.danger):not(.link)):not(.danger):not(.danger-ghost):not(.danger-text):not(.sf-del):not(.link):hover:not(:disabled) {
  background: var(--wpb-s-hover-bg); color: var(--wpb-s-hover-text); border-color: var(--wpb-s-border); text-decoration: none;
}
html.wp-solo body:not(#wp-btn-scope) :is(.wp-btn, .btn:not(.link)):focus-visible, html.wp-my body:not(#wp-btn-scope) :is(.wp-btn, .btn:not(.link)):focus-visible { outline: 2px solid var(--wpb-focus); outline-offset: 2px; }
/* Settings home rows stay list rows (already buttons); clear pressed state, focus ring already set above in the Settings home block. */
html.wp-solo .ssh-row:active { background: var(--wp-mint-tint); }

/* Solo (my.) button brand pass (2.5.44 candidate). Shared .btn roles only, all under html.wp-solo, so org (app.) and district builds are untouched.
   Brand blue = --accent #3d9cf0 (dark) / #1b6cb8 (light); --accent-dim #2a6fa8 / #155a9a; mint focus ring = --brand #7ee8b5; ink = --bg #0c1219.
   Tokens live on body so every rule line starts "html.wp-solo "; light values use the :where(html[data-theme="light"] *) pattern from the feature-request button.
   Dark primary = white on darker brand blue #2a6fa8->#1f64a3 (5.33 / 6.16:1), hover #1f64a3->#1b5f9c (6.16 / 6.64:1), border #3d9cf0; no dark text on blue. Destructive buttons (.danger, .danger-ghost, .danger-text, .sf-del) keep their own rules. Open in Maps is a plain .btn.primary (solid brand blue, white text) so it stands out from the saved-card secondary/ghost buttons. */
html.wp-solo body, html.wp-my body {
  --wpb-p-from: #2a6fa8; --wpb-p-to: #1f64a3; --wpb-p-border: #3d9cf0; --wpb-p-text: #ffffff;
  --wpb-p-hover-from: #1f64a3; --wpb-p-hover-to: #1b5f9c;
  --wpb-s-bg: #142a40; --wpb-s-border: #3d9cf0; --wpb-s-text: #3d9cf0;
  --wpb-s-hover-bg: #1f4466; --wpb-s-hover-text: #eef4fa;
  --wpb-g-border: #2a6fa8; --wpb-g-text: #3d9cf0; --wpb-g-hover-bg: #142a40;
  --wpb-focus: #7ee8b5;
}
html.wp-solo body:where(html[data-theme="light"] *), html.wp-my body:where(html[data-theme="light"] *) {
  --wpb-p-from: #1b6cb8; --wpb-p-to: #155a9a; --wpb-p-border: #124f88; --wpb-p-text: #ffffff;
  --wpb-p-hover-from: #155a9a; --wpb-p-hover-to: #124f88;
  --wpb-s-bg: #eaf3fc; --wpb-s-border: #1b6cb8; --wpb-s-text: #155a9a;
  --wpb-s-hover-bg: #d6e8f8; --wpb-s-hover-text: #155a9a;
  --wpb-g-border: #9cc2e6; --wpb-g-text: #1b6cb8; --wpb-g-hover-bg: #eaf3fc;
  --wpb-focus: #0c1219;
}
html.wp-solo .btn.primary:not(.danger), html.wp-my .btn.primary:not(.danger) { background: linear-gradient(180deg, var(--wpb-p-from) 0%, var(--wpb-p-to) 100%); color: var(--wpb-p-text); border-color: var(--wpb-p-border); }
html.wp-solo .btn.primary:not(.danger):hover:not(:disabled), html.wp-my .btn.primary:not(.danger):hover:not(:disabled) { background: linear-gradient(180deg, var(--wpb-p-hover-from) 0%, var(--wpb-p-hover-to) 100%); color: var(--wpb-p-text); }
html.wp-solo .btn.secondary:not(.danger):not(.sf-del), html.wp-my .btn.secondary:not(.danger):not(.sf-del) { background: var(--wpb-s-bg); color: var(--wpb-s-text); border-color: var(--wpb-s-border); box-shadow: none; }
html.wp-solo .btn.secondary:not(.danger):not(.sf-del):hover:not(:disabled), html.wp-my .btn.secondary:not(.danger):not(.sf-del):hover:not(:disabled) { background: var(--wpb-s-hover-bg); color: var(--wpb-s-hover-text); border-color: var(--wpb-s-border); }
html.wp-solo .btn.ghost:not(.sf-del):not(.danger-ghost):not(.danger-text), html.wp-my .btn.ghost:not(.sf-del):not(.danger-ghost):not(.danger-text) { background: transparent; color: var(--wpb-g-text); border-color: var(--wpb-g-border); }
html.wp-solo .btn.ghost:not(.sf-del):not(.danger-ghost):not(.danger-text):hover:not(:disabled), html.wp-my .btn.ghost:not(.sf-del):not(.danger-ghost):not(.danger-text):hover:not(:disabled) { background: var(--wpb-g-hover-bg); color: var(--wpb-g-text); border-color: var(--wpb-s-border); }
html.wp-solo .btn.link, html.wp-my .btn.link { color: var(--wpb-g-text); }
html.wp-solo .btn.link:hover, html.wp-my .btn.link:hover { color: var(--wpb-g-text); text-decoration: underline; }
html.wp-solo .btn:focus-visible, html.wp-my .btn:focus-visible { outline: 2px solid var(--wpb-focus); outline-offset: 2px; }
html.wp-solo .btn:disabled, html.wp-my .btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Destructive ghost (.sf-del: mapper list "Remove", form "Delete"): keep the --danger red, give it a real red outline and a faint red fill; fills solid red on hover.
   Dark #f07178 on #2a1a22 = 5.78; light #c43131 on #fdf0f0 = 4.93; hover ink #0c1219 on #f07178 = 6.57, #fff on #c43131 = 5.48. Color rules only, no layout. */
html.wp-solo body, html.wp-my body { --wpb-d-bg: #2a1a22; --wpb-d-text: #f07178; --wpb-d-border: #f07178; --wpb-d-hover-bg: #f07178; --wpb-d-hover-text: #0c1219; }
html.wp-solo body:where(html[data-theme="light"] *), html.wp-my body:where(html[data-theme="light"] *) { --wpb-d-bg: #fdf0f0; --wpb-d-text: #c43131; --wpb-d-border: #c43131; --wpb-d-hover-bg: #c43131; --wpb-d-hover-text: #ffffff; }
html.wp-solo .solo-forms-card .btn.ghost.sf-del { background: var(--wpb-d-bg); color: var(--wpb-d-text); border-color: var(--wpb-d-border); }
html.wp-solo .solo-forms-card .btn.ghost.sf-del:hover:not(:disabled) { background: var(--wpb-d-hover-bg); color: var(--wpb-d-hover-text); border-color: var(--wpb-d-border); }
/* Solo (my.) Help > Email support form (solo-support-contact.js). Never on org/district. */
html.wp-solo .help-menu-panel .support-contact-btn {
  display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0.2rem 0;
  padding: 0.45rem 0.8rem; border: 1px solid var(--wpb-p-border, var(--accent-dim)); border-radius: 6px;
  background: linear-gradient(180deg, var(--wpb-p-from, var(--accent-dim)) 0%, var(--wpb-p-to, var(--accent-dim)) 100%); color: var(--wpb-p-text, #fff); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
html.wp-solo .help-menu-panel .support-contact-btn:hover { background: linear-gradient(180deg, var(--wpb-p-hover-from, var(--accent-dim)) 0%, var(--wpb-p-hover-to, var(--accent-dim)) 100%); }
html.wp-solo .support-contact-btn:focus-visible,
html.wp-solo .support-contact :focus-visible { outline: 3px solid #7ee8b5; outline-offset: 2px; }
html.wp-solo .support-contact {
  width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.1rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
}
html.wp-solo .support-contact::backdrop { background: rgba(0, 0, 0, 0.45); }
html.wp-solo .support-contact h2 { margin: 0 0 0.75rem; font-size: 1.15rem; border-top: 3px solid #7ee8b5; padding-top: 0.6rem; }
html.wp-solo .support-contact-who { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0 0 0.9rem; font-size: 0.9rem; }
html.wp-solo .support-contact-who dt { font-weight: 700; }
html.wp-solo .support-contact-who dd { margin: 0; overflow-wrap: anywhere; color: var(--muted, var(--text)); }
html.wp-solo .support-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.8rem; }
html.wp-solo .support-field label { font-weight: 700; font-size: 0.9rem; }
html.wp-solo .support-field select, html.wp-solo .support-field input, html.wp-solo .support-field textarea {
  min-height: 44px; font: inherit; width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem;
  color: var(--text); background: var(--bg, var(--surface)); border: 1px solid var(--border); border-radius: 6px;
}
html.wp-solo .support-field textarea { resize: vertical; }
html.wp-solo .support-count { align-self: flex-end; font-size: 0.8rem; }
html.wp-solo .support-field-err, html.wp-solo .support-contact-error { margin: 0.1rem 0 0.4rem; color: var(--danger, #c62828); font-weight: 600; font-size: 0.875rem; }
html.wp-solo .support-check { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-bottom: 0.6rem; cursor: pointer; }
html.wp-solo .support-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-dim); }
html.wp-solo .support-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 0.6rem; }
html.wp-solo .support-btn { min-height: 44px; min-width: 6rem; padding: 0.5rem 1rem; font: inherit; font-weight: 700; border-radius: 6px; cursor: pointer; }
html.wp-solo .support-btn-primary { color: var(--wpb-p-text, #fff); background: linear-gradient(180deg, var(--wpb-p-from, var(--accent-dim)) 0%, var(--wpb-p-to, var(--accent-dim)) 100%); border: 1px solid var(--wpb-p-border, var(--accent-dim)); }
html.wp-solo .support-btn-secondary { color: var(--text); background: transparent; border: 1px solid var(--border); }
html.wp-solo .support-btn:disabled { opacity: 0.6; cursor: not-allowed; }
html.wp-solo .support-contact-confirm p, html.wp-solo .support-contact-sent p { font-size: 1rem; margin: 0 0 0.5rem; }
html.wp-solo .support-ref { font-family: ui-monospace, monospace; font-size: 0.875rem; }

/* Android app (Solo): Plan card shows only the neutral status line and the managed-on-web line
   (no price, plan name, button or link). Kept above the forms block, which stays last. */
html.wp-solo .solo-plan-card--managed > :not(.plan-head):not(#solo-plan-managed-status):not(#solo-plan-managed) { display: none !important; }
html.wp-solo .solo-plan-card--managed #solo-plan-pill { display: none !important; }
html.wp-solo .solo-plan-managed-status { font-weight: 600; margin: 0.35rem 0 0.15rem; }
html.wp-solo .solo-plan-managed { margin: 0; opacity: 0.85; }
/* 2.6.0 (PR-C): Android Google Play plan screen. Placeholder styling; UI Bot should restyle. */
html.wp-solo .solo-play-root[hidden] { display: none; }
html.wp-solo .solo-play-title { font-weight: 600; margin: 12px 0 8px; }
html.wp-solo .solo-play-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
html.wp-solo .solo-play-option { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  padding: 12px; border: 1px solid var(--border, rgba(127,127,127,.35)); border-radius: 12px; }
html.wp-solo .solo-play-option input { grid-row: span 2; }
html.wp-solo .solo-play-name { font-weight: 600; }
html.wp-solo .solo-play-price { color: var(--muted); }
html.wp-solo .solo-play-option:has(input:checked) { border-color: var(--accent, #2563eb); }
html.wp-solo #solo-play-continue, html.wp-solo #solo-play-manage { width: 100%; margin-top: 10px; }
html.wp-solo .solo-play-status:empty { display: none; }

/* Solo (my.) flat / scanned PDF "tap where each item goes" (solo-flat-place.js, 2.5.24). Lives only inside the Solo Forms card. */
.solo-forms-card .sfp-progress { margin: 0.5rem 0 0.75rem; font-size: 0.85rem; color: var(--muted); }
.solo-forms-card .sfp-bar { height: 6px; border-radius: 999px; background: var(--border); margin-top: 0.35rem; overflow: hidden; }
.solo-forms-card .sfp-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.solo-forms-card .sfp-intro { border: 1px solid var(--accent); background: var(--wash-a); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.5rem; }
.solo-forms-card .sfp-q { font-size: 1.15rem; margin: 0.5rem 0 0.15rem; }
.solo-forms-card .sfp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.solo-forms-card .sfp-chip { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--border); background: var(--field-bg); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.solo-forms-card .sfp-chip.done { border-color: var(--success); }
.solo-forms-card .sfp-chip.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.solo-forms-card .sfp-chip.more { font-weight: 400; border-style: dashed; }
.solo-forms-card .sfp-chip:focus-visible, .solo-forms-card .sfp-paper:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.solo-forms-card .sfp-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.25rem 0; }
.solo-forms-card .sfp-pager .btn { min-width: 44px; min-height: 44px; font-size: 1rem; }
/* 2.5.45: labeled Prev/Next (brand secondary blue, --wpb-s-*); the page number sits between them. */
.solo-forms-card .sfp-pager .sfp-pg { min-width: 5.5rem; padding: 0 0.75rem; font-weight: 700; white-space: nowrap; }
.solo-forms-card .sfp-pager .sfp-pg:disabled { opacity: 0.45; cursor: not-allowed; }
.solo-forms-card .sfp-pager .sfp-pg:focus-visible { outline: 3px solid var(--wpb-focus, #1b6cb8); outline-offset: 2px; }
.solo-forms-card .sfp-pg-n { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.solo-forms-card .sfp-pg-n small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
/* Without the item list (trips box step) the control is sticky at the top of the scrolling sheet. */
.solo-forms-card .sfp-pager:not(.in-side) { position: sticky; top: 0; z-index: 6; background: var(--surface, var(--bg)); padding: 0.25rem 0; }
.solo-forms-card .sfp-pager.in-side { margin: 0; }
.solo-forms-card .sfp-paper { position: relative; border: 1px solid var(--border); border-radius: 6px; background: #fff; overflow: hidden; line-height: 0; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.solo-forms-card .sfp-paper img { width: 100%; height: auto; display: block; }
.solo-forms-card .sfp-loading { line-height: 1.4; color: #333; padding: 3rem 1rem; text-align: center; margin: 0; }
.solo-forms-card .sfp-pin { position: absolute; transform: translateY(-100%); background: #1b6cb8; color: #fff; font: 700 10px/1.3 system-ui, sans-serif; padding: 1px 5px; border-radius: 4px 4px 4px 0; white-space: nowrap; pointer-events: none; }
.solo-forms-card .sfp-pin.cur { background: #c2410c; outline: 2px solid #fff; }
.solo-forms-card .sfp-box { position: absolute; border: 2px solid #1b6cb8; background: rgba(27, 108, 184, 0.08); line-height: 1.2; }
.solo-forms-card .sfp-box > i { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(27, 108, 184, 0.6); pointer-events: none; }
.solo-forms-card .sfp-col { position: absolute; top: 0; bottom: 0; border-left: 2px solid #c2410c; pointer-events: none; }
.solo-forms-card .sfp-col em { position: absolute; top: -1.3em; left: -1px; background: #c2410c; color: #fff; font: 700 10px/1.3 system-ui, sans-serif; font-style: normal; padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.solo-forms-card .sfp-col.cur em { outline: 2px solid #fff; }
.solo-forms-card .sfp-h { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; touch-action: none; cursor: grab; }
.solo-forms-card .sfp-h span { display: block; width: 18px; height: 18px; margin: 13px; border-radius: 50%; background: #1b6cb8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.solo-forms-card .sfp-h.tl { left: 0; top: 0; } .solo-forms-card .sfp-h.tr { left: 100%; top: 0; }
.solo-forms-card .sfp-h.bl { left: 0; top: 100%; } .solo-forms-card .sfp-h.br { left: 100%; top: 100%; }
.solo-forms-card .sfp-mag { position: absolute; right: 8px; top: 8px; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); background-color: #fff; background-repeat: no-repeat; pointer-events: none; }
.solo-forms-card .sfp-mag span { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #c2410c; border-radius: 50%; }
/* Loupe crosshair = the anchor: dot at the start of the baseline, the line the text sits on, and a tick up for the text. */
.solo-forms-card .sfp-mag span.sfp-cross { width: 6px; height: 6px; margin: -3px 0 0 -3px; border: 0; background: #c2410c; }
.solo-forms-card .sfp-mag span.sfp-cross::before { content: ""; position: absolute; left: 3px; top: 2px; width: 46px; height: 2px; background: #c2410c; }
.solo-forms-card .sfp-mag span.sfp-cross::after { content: ""; position: absolute; left: 2px; bottom: 3px; width: 2px; height: 16px; background: #c2410c; }
.solo-forms-card .sfp-mag span.sfp-cross.a-right::before { left: auto; right: 3px; }
.solo-forms-card .sfp-mag span.sfp-cross.a-right::after { left: auto; right: 2px; }
.solo-forms-card .sfp-rows { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.75rem 0 0.25rem; font-weight: 700; }
.solo-forms-card .sfp-stepper { display: flex; align-items: center; gap: 0.5rem; }
.solo-forms-card .sfp-stepper .btn { min-width: 48px; min-height: 48px; font-size: 1.3rem; }
.solo-forms-card .sfp-stepper output { min-width: 2ch; text-align: center; font-size: 1.2rem; }
.solo-forms-card .sfp-list-title { margin: 0.9rem 0 0.25rem; }
.solo-forms-card .sfp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.solo-forms-card .sfp-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem 0.5rem; background: var(--field-bg); }
.solo-forms-card .sfp-li-act { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.solo-forms-card .sfp-li-act .btn { min-height: 44px; }
.solo-forms-card .sfp-li-act .sf-del { color: var(--danger); }
.solo-forms-card .sfp-summary { margin: 0.5rem 0; padding-left: 1.2rem; }
.solo-forms-card .sfp-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.6rem; margin-top: 1rem; }
.solo-forms-card .sfp-nav .btn { min-height: 52px; }
.solo-forms-card .sfp-nav .btn:only-child { grid-column: 1 / -1; }

/* Solo form sets: "Is it more than one form?" (2.5.26). Scoped to the Solo Forms card. */
.solo-forms-card .stf-choices { display: grid; gap: 10px; margin: 12px 0; }
.solo-forms-card .stf-choice { display: grid; gap: 4px; text-align: left; min-height: 64px; padding: 14px 16px; border: 2px solid var(--border, #c9ced6); border-radius: 12px; background: var(--field-bg, #fff); color: inherit; font: inherit; cursor: pointer; }
.solo-forms-card .stf-choice.on { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent); }
.solo-forms-card .stf-page { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border, #e3e6ea); }
.solo-forms-card .stf-page.bad { outline: 2px solid var(--danger, #c0392b); border-radius: 8px; }
.solo-forms-card .stf-thumb { display: grid; gap: 4px; justify-items: center; }
.solo-forms-card .stf-thumb img, .solo-forms-card .stf-pg img { width: 96px; border: 1px solid var(--border, #c9ced6); border-radius: 4px; background: #fff; }
.solo-forms-card .stf-load { display: grid; place-items: center; width: 96px; height: 124px; font-size: 12px; border: 1px dashed var(--border, #c9ced6); border-radius: 4px; }
.solo-forms-card .stf-seg { display: grid; gap: 6px; }
.solo-forms-card .stf-seg button { min-height: 44px; border: 1px solid var(--border, #c9ced6); border-radius: 10px; background: var(--field-bg, #fff); color: inherit; font: inherit; cursor: pointer; }
.solo-forms-card .stf-seg button.on { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; font-weight: 600; }
.solo-forms-card .stf-sug { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); }
.solo-forms-card .stf-pgs { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0; }
.solo-forms-card .stf-pg { margin: 0; text-align: center; font-size: 12px; }
.solo-forms-card .stf-overflow { font-weight: 600; }
.solo-forms-card .stf-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.solo-forms-card .stf-sw .btn { min-height: 44px; flex: 1; white-space: nowrap; padding-inline: 8px; }
.solo-forms-card .stf-stack { display: grid; gap: 12px; max-height: 60vh; overflow-y: auto; padding: 8px; border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); }
.solo-forms-card .stf-sheetpg { margin: 0; }
.solo-forms-card .stf-sheetpg figcaption { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.solo-forms-card .stf-paper img { width: 100%; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.solo-forms-card .stf-inline { padding: 4px 8px; min-height: 36px; }
.solo-forms-card .stf-link { width: 100%; margin-top: 8px; }
.solo-forms-card .stf-default { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.solo-forms-card .stf-default input { width: 24px; height: 24px; }
.solo-forms-card .sf-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.solo-forms-card .sf-badge.ok { background: #dcfce7; color: #166534; }
.solo-forms-card .sf-badge.todo { background: #fef3c7; color: #92400e; }
.solo-forms-card .sf-badge.bad { background: #fee2e2; color: #991b1b; }
.solo-forms-card .sf-problems { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.solo-forms-card .sf-in-set { font-style: italic; }

/* Solo (my.) one item in many places + unit labels (solo-multi-place.js). Lives only inside the Solo Forms card. */
.solo-forms-card .smp-toggle { display: flex; gap: 0; margin: 0.4rem 0 0.8rem; border: 2px solid var(--border); border-radius: 999px; overflow: hidden; }
.solo-forms-card .smp-toggle button { flex: 1; min-height: 44px; border: 0; background: var(--field-bg); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.solo-forms-card .smp-toggle button.on { background: var(--accent); color: #fff; }
.solo-forms-card .smp-items { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; }
.solo-forms-card .smp-item { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.8rem; background: var(--field-bg); }
.solo-forms-card .smp-item.multi { border-color: var(--accent); }
.solo-forms-card .smp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.solo-forms-card .smp-count { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.solo-forms-card .smp-sample { margin: 0.2rem 0; }
.solo-forms-card .smp-places { list-style: none; margin: 0.4rem 0; padding: 0; }
.solo-forms-card .smp-places li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.solo-forms-card .smp-places .sf-page { margin-left: 0.5rem; }
.solo-forms-card .smp-addbtn { min-height: 44px; margin-top: 0.3rem; font-weight: 700; }
.solo-forms-card .smp-add select { width: 100%; min-height: 44px; margin: 0.3rem 0; }
.solo-forms-card .smp-rest { margin-top: 1rem; }
.solo-forms-card .sfp-badge { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; line-height: 1.4; }
.solo-forms-card .sfp-chip.cur .sfp-badge { background: #fff; color: var(--accent); }
.solo-forms-card .sfp-list li.sfp-group { display: block; padding: 0.5rem 0.6rem; }
.solo-forms-card .sfp-group-h { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.solo-forms-card .sfp-group-h .btn { margin-left: auto; min-height: 44px; }
.solo-forms-card .sfp-places { margin: 0.3rem 0 0; padding-left: 0; list-style: none; display: grid; gap: 0.3rem; }
.solo-forms-card .sfp-list .sfp-places li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 0.35rem 0 0; background: none; }
.solo-forms-card .sfp-places li > span { flex: 1 1 100%; overflow-wrap: anywhere; }
.solo-forms-card .sfp-places li.cur { font-weight: 700; }
/* 2.5.34 visual mapper: detected chips are draggable, unlabeled ones show "?"; page badges; empty-page note */
.solo-forms-card .sfp-pin.drag { pointer-events: auto; cursor: grab; touch-action: none; }
.solo-forms-card .sfp-pin.unset { background: #6b7280; }
.solo-forms-card .sfp-mode { border: 1px solid var(--line, #d0d7e2); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.solo-forms-card .sfp-mode legend { font-weight: 700; padding: 0 4px; }
.solo-forms-card .sfp-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.solo-forms-card .sfp-seg button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line, #c6cfdc); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.solo-forms-card .sfp-seg button.on { background: #1d6fc4; border-color: #1d6fc4; color: #fff; }
.solo-forms-card .sfp-seg button:disabled { opacity: .5; cursor: not-allowed; }
.solo-forms-card .sfp-price { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.solo-forms-card .sfp-toggle { min-width: 64px; min-height: 44px; }
.solo-forms-card .sfp-toggle[aria-checked="true"] { background: #1d6fc4; border-color: #1d6fc4; color: #fff; }
.solo-forms-card .sfp-pin.a-center { transform: translate(-50%, -100%); border-radius: 4px 4px 0 0; }
.solo-forms-card .sfp-pin.a-right { transform: translate(-100%, -100%); border-radius: 4px 4px 0 4px; }
/* Anchor dot: the exact spot the text baseline starts (ends, for right-aligned items). */
.solo-forms-card .sfp-pin::after { content: ""; position: absolute; left: -3px; bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: #c2410c; box-shadow: 0 0 0 1.5px #fff; }
.solo-forms-card .sfp-pin.a-center::after { left: calc(50% - 3px); }
.solo-forms-card .sfp-pin.a-right::after { left: auto; right: -3px; }
.solo-forms-card .sfp-guide { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.solo-forms-card .sfp-guide .hint { margin: 0; }
.solo-forms-card .sfp-guide-pic { flex: none; color: inherit; }
.solo-forms-card .sfp-sample { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.solo-forms-card .sfp-sample-t { font-family: Helvetica, Arial, sans-serif; fill: #111; }
.solo-forms-card .sfp-sample-u { font-family: system-ui, sans-serif; font-weight: 700; fill: #1b6cb8; }
.solo-forms-card .sfp-sample-dot { fill: #c2410c; stroke: #fff; stroke-width: 1; }
.solo-forms-card .sfp-pin.lift { transform: translateY(calc(-100% - var(--lift, 0px))); }
.solo-forms-card .sfp-pin.lift.a-center { transform: translate(-50%, calc(-100% - var(--lift, 0px))); }
.solo-forms-card .sfp-pin.lift.a-right { transform: translate(-100%, calc(-100% - var(--lift, 0px))); }
.solo-forms-card .sfp-pin.lift::after { display: none; }
.solo-forms-card .sfp-mag i.sfp-mag-sample { position: absolute; top: 50%; left: 50%; transform: translateY(-100%); margin-top: 0; line-height: 1; padding-bottom: 0.2em; font-style: normal; font-family: Helvetica, Arial, sans-serif; color: #111; white-space: nowrap; pointer-events: none; }
.solo-forms-card .sfp-mag i.sfp-mag-sample.a-right { left: auto; right: 50%; }
.solo-forms-card .sfp-mag b.sfp-mag-label { position: absolute; top: calc(50% + 8px); left: 50%; transform: translateX(-50%); font: 700 9px/1.2 system-ui, sans-serif; color: #fff; background: #c2410c; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.solo-forms-card .sfp-relabel select { min-height: 44px; max-width: 100%; margin-top: 0.25rem; }
.solo-forms-card .sfp-group.unset .sfp-group-h { flex-wrap: wrap; }
.solo-forms-card .sfp-empty { border: 1px dashed currentColor; border-radius: 8px; padding: 0.5rem; }
.solo-forms-card .stf-badge { display: inline-block; font-size: 0.8rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid; margin-left: 0.35rem; }
.solo-forms-card .stf-badge.scanned { border-color: #ea580c; background: rgba(234, 88, 12, 0.14); }
.solo-forms-card .stf-badge.fillable { border-color: #16a34a; background: rgba(22, 163, 74, 0.14); }
.solo-forms-card .sfp-grp .sfp-chip[data-later] { border-style: dashed; }
.solo-forms-card .sfp-grp-note { font-size: 0.85rem; opacity: 0.85; margin: 0.2rem 0 0.4rem; }