/* Spostia v10 — audit UX: faster entry, focused mobile navigation and a useful cargo visual. */
.welcome-hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 22px; padding: 12px 26px; font-size: 19px; }
.price-example { display: block; margin-bottom: 5px; color: var(--primary-dark); font-size: 15px; font-weight: 700; }
.explore-panel { margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.explore-panel h2 { margin-bottom: 14px; font-size: 22px; }
.explore-panel > div { display: flex; flex-wrap: wrap; gap: 10px; }
.explore-panel .btn { min-height: 48px; }

.radar-pin.is-selected { background: #006c63; outline: 3px solid #142525; outline-offset: 3px; }
.radar-pin-count { position: absolute; top: -12px; right: -11px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid white; border-radius: 50%; background: #29d6c8; color: #142525; font-size: 13px; font-weight: 800; }
.radar-selection { margin: 0 22px; padding: 19px 0 21px; border-bottom: 1px solid var(--line); }
.radar-selection h3 { margin: 6px 0; font-size: 24px; }
.radar-selection p { color: #405b56; font-size: 17px; }
.radar-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.radar-option { min-height: 44px; padding: 7px 11px; border: 1px solid #bed8d1; border-radius: 9px; background: #f6faf9; color: var(--ink); font-size: 16px; font-weight: 650; }
.radar-option.is-selected { border-color: #006c63; background: #d7f6ee; }
.radar-selection-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.radar-selection-action > span { color: #405b56; font-size: 15px; }
.radar-selection-action small { display: block; margin-top: 3px; font-size: 14px; }
.radar-selection-action .btn { min-height: 48px; }

.trip-edit, .service-accordion { margin: 0 0 22px; border: 1px solid #c6ddd7; border-radius: 14px; background: #f7fbfa; }
.trip-edit > summary, .service-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding: 14px 18px; cursor: pointer; list-style: none; }
.trip-edit > summary::-webkit-details-marker, .service-accordion > summary::-webkit-details-marker { display: none; }
.trip-edit > summary strong, .trip-edit > summary small { display: block; }
.trip-edit > summary strong { font-size: 21px; }
.trip-edit > summary small { margin-top: 2px; color: #405b56; font-size: 16px; }
.trip-edit-action, .service-accordion summary span { flex-shrink: 0; color: var(--primary-dark); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.trip-edit-fields, .service-accordion-body { padding: 0 18px 18px; }
.trip-edit-fields .fields + .fields { margin-top: 14px; }
.service-accordion > summary { font-size: 20px; font-weight: 700; }
.service-accordion > summary .service-head { display: block; color: var(--ink); text-decoration: none; }
.service-head small { display: block; margin-top: 2px; color: #405b56; font-size: 16px; font-weight: 400; }
.service-accordion-body .check { margin-top: 14px; }

.space-preview-live:empty { display: none; }
.space-preview { margin: 4px 0 22px; padding: 20px 22px; border: 1px solid #94d6c9; border-radius: 18px; background: #e5f8f3; }
.space-preview-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; align-items: baseline; }
.space-preview-head strong { font-size: 22px; }
.space-van { display: flex; align-items: flex-end; width: min(100%, 390px); height: 82px; margin: 16px 0 8px; }
.space-van-bay { position: relative; display: flex; align-items: center; justify-content: center; width: 77%; height: 68px; overflow: hidden; border: 4px solid #142525; border-radius: 10px 8px 4px 4px; background: white; }
.space-van-bay > .icon { z-index: 1; width: 40px; height: 40px; color: #142525; }
.space-van-fill { position: absolute; inset: 0 auto 0 0; background: #29d6c8; transition: width .2s ease-out; }
.space-van-cab { display: grid; place-items: center; width: 23%; height: 52px; border: 4px solid #142525; border-radius: 5px 14px 4px 4px; background: #29d6c8; }
.space-van-cab .icon { width: 36px; height: 36px; }
.space-preview meter { display: block; width: min(100%, 390px); height: 11px; accent-color: #006c63; }
.space-preview-status { margin-top: 10px; font-weight: 700; }
.space-preview .hint { margin-top: 5px; font-size: 15px; }

@media (max-width: 800px) {
  .nav button:nth-child(n+4) { display: none; }
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav button { min-height: 66px; font-size: 15px; }
  .sidebar { padding-top: 105px; }
  .topbar { min-height: 104px; height: 104px; }
  .topbar .brand-lockup.mobile-logo { max-width: 165px; }
  .topbar .brand-lockup .brand-claim { font-size: 16px; line-height: 1.15; white-space: nowrap; }
  .role-picker select { width: 140px; }
  .radar-selection-action .btn { width: 100%; }
}
@media (max-width: 480px) {
  .welcome-hero-cta { width: 100%; margin-top: 19px; }
  .welcome-scope { margin-top: 16px; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; min-height: 142px; height: 142px; align-content: start; gap: 5px; }
  .sidebar { padding-top: 148px; }
  .topbar .brand-lockup.mobile-logo { max-width: 180px; }
  .topbar .brand-lockup.mobile-logo .brand-logo { width: 170px; }
  .topbar .brand-lockup .brand-claim { font-size: 16px; }
  .top-actions, .role-picker { width: 100%; }
  .role-picker { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; }
  .role-picker select { width: 148px; font-size: 16px; }
  .explore-panel { padding: 18px; }
  .explore-panel .btn { width: 100%; }
  .radar-selection { margin: 0 17px; }
  .trip-edit > summary, .service-accordion > summary { padding: 12px 14px; }
  .trip-edit-fields, .service-accordion-body { padding: 0 14px 14px; }
  .space-preview { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) { .space-van-fill { transition: none; } }