/* SwissBauArchiv — light redesign, loaded AFTER the existing stylesheets.
 * Opt in with .sba-redesign on portal shells and .sba-redesign-login on login.
 * Original assets, visibility decisions and all action hooks belong to app.js.
 * !important is limited to legacy important rules, effects and accessibility.
 */

body.sba-redesign { background: #f7f8fa; cursor: auto; }

/* Foundation: shared by customer, admin, tenant and B2B shells. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell),
.login-shell.sba-redesign-login {
  --accent: #c8102e;
  --accent-strong: #a80d26;
  --accent-soft: #fff1f3;
  --ink: #202125;
  --ink-soft: #42464e;
  --muted: #626773;
  --paper: #f7f8fa;
  --card: #fff;
  --card-solid: #fff;
  --line: #e6e8ec;
  --shadow: 0 16px 44px rgb(24 32 48 / 7%);
  --shadow-soft: 0 4px 20px rgb(24 32 48 / 4%);
  --sba-brand: var(--accent);
  --sba-ink: var(--ink);
  --sba-muted: var(--muted);
  --sba-canvas: var(--paper);
  --sba-surface: #fff;
  --sba-surface-soft: #f7f8fa;
  --sba-line: var(--line);
  --sba-shadow-sm: var(--shadow-soft);
  --sba-shadow-md: var(--shadow);
  --sba-radius-panel: 24px;
  --sba-radius-card: 18px;
  --sba-page-gap: clamp(16px, 2.2vw, 32px);
  color-scheme: light;
  color: var(--ink);
  background: var(--paper);
  background-attachment: scroll;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  cursor: auto;
  -webkit-font-smoothing: antialiased;
}

:is(.sba-redesign, .sba-redesign-login),
:is(.sba-redesign, .sba-redesign-login) *,
:is(.sba-redesign, .sba-redesign-login) *::before,
:is(.sba-redesign, .sba-redesign-login) *::after {
  box-sizing: border-box;
  /* Remove inherited 24–60px glass effects, including full-screen overlays.
   * Only the bounded navigation chrome below opts back into blur. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :where(main, section, article, header, footer, form, fieldset, div, dl, dt, dd),
.login-shell.sba-redesign-login :where(section, form, div, label) {
  min-width: 0;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :where(h1, h2, h3, h4, p, strong, small, span, label, a, button, dt, dd),
.login-shell.sba-redesign-login :where(h1, h2, h3, p, strong, small, span, label, a, button) {
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(h1, .section-heading h2, .project-title-line h2) {
  font-size: clamp(1.85rem, 2.8vw, 2.8rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(h2, h3, h4) { letter-spacing: -0.022em; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.eyebrow, .mini-label) { color: var(--muted); letter-spacing: 0.07em; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.muted-text, .sba-chart-empty) { color: var(--muted); }

:is(.sba-redesign, .sba-redesign-login) :is(button, a, summary, [role="button"]) {
  touch-action: manipulation;
  cursor: pointer;
}

:is(.sba-redesign, .sba-redesign-login) :is(button, summary, [role="button"], input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 44px;
}

:is(.sba-redesign, .sba-redesign-login) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #2768b5;
  outline-offset: 3px;
  scroll-margin-block: 88px 112px;
}

:is(.sba-redesign, .sba-redesign-login) :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.login-shell.sba-redesign-login :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  max-width: 100%;
  border-color: #d8dce2;
  border-radius: 12px;
  background-color: #fff;
  color: var(--ink);
  font-size: 16px;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.primary-button, .login-submit-button),
.login-shell.sba-redesign-login .login-submit-button {
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(168 13 38 / 12%);
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.secondary-button, .outline-button) {
  border: 1px solid #d8dce2;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

/* Shell uses document scrolling; fixed chrome never owns the page height. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) {
  --sba-sidebar-width: 232px;
  --sba-sidebar-left: 0px;
  --sba-sidebar-top: 0px;
  --sba-sidebar-gap: 0px;
  display: grid;
  grid-template-columns: var(--sba-sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  gap: 0;
  width: 100%;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-sidebar {
  position: sticky;
  inset: 0 auto auto 0;
  display: flex;
  flex-direction: column;
  width: var(--sba-sidebar-width);
  min-width: 0;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 28px 16px 20px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-sidebar .portal-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .portal-nav-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 48px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-soft);
  background: transparent;
  box-shadow: none;
  font-size: 0.9rem;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.portal-nav-item, .mobile-drawer-item).active {
  border-color: #f3dce1;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .logo-lockup { gap: 10px; margin: 0 4px 28px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .logo-lockup strong { font-size: 0.93rem; letter-spacing: -0.025em; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.brand-mini-logo, .mobile-portal-brand img),
.login-shell.sba-redesign-login .login-logo-image {
  object-fit: contain;
  filter: none;
  box-shadow: none;
  animation: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-main {
  grid-column: 2;
  grid-row: auto;
  width: 100%;
  max-width: 1600px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--sba-page-gap) 48px;
  background: transparent;
  overflow: visible;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-main > .portal-topbar {
  position: relative;
  inset: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 88px;
  margin: 0 0 24px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.topbar-actions, .action-bar, .project-header-actions, .form-actions, .flow-footer, .document-actions, .invoice-filter-tabs, .admin-customer-tabs) {
  flex-wrap: wrap;
  gap: 8px;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.stack-view, .sba-vnext-page) {
  width: 100%;
  min-width: 0;
  padding: 0;
  gap: var(--sba-page-gap);
}

/* Existing page surfaces: start, projects, finance, material/assets, offers,
 * schedule, documents, protection, inbox, profile and admin forms. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(
  .panel, .card, .manage-card, .list-card, .sba-vnext-section,
  .sba-vnext-next-step, .sba-vnext-quick-card, .sba-vnext-protection-hero,
  .project-command-card, .project-widget-card, .project-flow-panel,
  .project-widget-detail, .project-asset-center, .property-dossier-card,
  .property-hub-widget, .property-create-panel, .tenant-property-card,
  .document-card, .offer-detail-card, .offer-mini, .metric-card-ref,
  .invoice-project-group, .invoice-activity-panel, .message-focus-card,
  .damage-card, .defect-card, .delivery-card, .partner-offer-row,
  .admin-project-card, .admin-cockpit-section, .review-panel,
  .sba-chart-card, .sba-trust-status, .sba-company-card, .sba-cost-breakdown
) {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.panel, .sba-vnext-section, .project-command-card, .message-focus-card, .sba-chart-card, .sba-trust-status, .sba-company-card, .sba-cost-breakdown) {
  padding: clamp(16px, 2vw, 28px);
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.section-heading, .sba-vnext-heading, .sba-vnext-section__head, .project-glass-header, .admin-hero, .invoice-hero, .properties-hero) {
  gap: 16px;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-vnext-quick-grid, .sba-vnext-summary-grid, .metric-grid, .invoice-stat-grid, .admin-stat-grid, .project-widget-grid, .property-hub-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 16px;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-grid, .document-gallery, .property-document-gallery, .tenant-property-grid, .offer-category-grid, .admin-media-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: 20px;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-vnext-start-grid, .split-grid, .invoice-layout, .messages-hub-grid, .project-command-grid, .sba-vnext-command-grid, .admin-cockpit-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-start-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "property next";
  align-items: stretch;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.project-command-card.cost, .message-focus-card.wide) { grid-column: 1 / -1; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.form-grid, .schedule-form-grid, .admin-account-form) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.form-grid, .schedule-form-grid, .admin-account-form) > .full { grid-column: 1 / -1; }

/* Photographic surfaces use only real images provided by the renderer. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero, .sba-vnext-property-hero) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: visible;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero__media, .sba-vnext-property-hero__media) {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 220px;
  height: clamp(220px, 23vw, 350px);
  border-radius: 23px 23px 0 0;
  background: #edf0f2;
  overflow: hidden;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero__media, .sba-vnext-property-hero__media, .sba-vnext-project-row__media) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-property-hero::after,
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-property-hero__media::after { content: none; }

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero__content, .sba-vnext-property-hero__content) {
  position: relative;
  inset: auto;
  display: grid;
  gap: 10px;
  padding: 24px;
  color: var(--ink);
  background: #fff;
  border-radius: 0 0 23px 23px;
  text-shadow: none;
}

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-property-hero__content :is(h2, p, span, strong, small) { color: inherit; text-shadow: none; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-property-hero__facts { flex-wrap: wrap; color: var(--muted); }

:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(120px, 0.45fr) 44px;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  text-align: left;
}
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__media { width: 100%; height: 124px; border-radius: 12px; overflow: hidden; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__main { min-width: 0; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__meta { display: grid; gap: 4px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__status { min-width: 0; max-width: 100%; }

/* Finance: full values, tabular figures and expandable rows, never ellipsis. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(
  .numeric-display, .sba-money, .cost-contract-value, .project-cost-balance strong,
  .project-cost-legend small, .invoice-overview-meta strong, .metric-card-ref strong,
  .sba-vnext-quick-value, .sba-vnext-summary-grid strong, .sba-vnext-list-row__aside,
  .sba-cost-breakdown dd, .sba-cost-row strong
) {
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  overflow-wrap: anywhere;
  word-break: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.metric-card-ref strong, .sba-vnext-quick-value) { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-overview-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 0.7fr) auto 44px;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.invoice-title-row, .invoice-project-head, .invoice-project-totals) { flex-wrap: wrap; gap: 8px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-cost-dashboard-head { grid-template-columns: 44px minmax(0, 1fr) auto; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.project-cost-balance, .project-cost-legend) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-cost-row, .sba-cost-breakdown dl > div) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 12px; border-bottom: 1px solid var(--line); }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-cost-breakdown dd { margin: 0; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-chart-card :is(svg, canvas) { display: block; max-width: 100%; height: auto; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-chart-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-chart-empty { padding: 20px 0; }

/* Data bars: label + full CHF value, followed by a full-width track.
 * Renderer supplies --sba-bar-value (percentage) or an inline width on fill;
 * an absent value leaves the track empty. Text remains the source of truth. */
.sba-redesign :is(.sba-chart-row, .sba-bar-row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 16px;
  min-width: 0;
  padding-block: 12px;
}
.sba-redesign :is(.sba-chart-label, .sba-chart-value) {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
.sba-redesign .sba-chart-value { text-align: right; font-variant-numeric: tabular-nums; }
.sba-redesign :is(.sba-chart-track, .sba-bar-track) {
  grid-column: 1 / -1;
  min-width: 0;
  height: 8px;
  border-radius: 8px;
  background: #edf0f3;
  overflow: hidden;
}
.sba-redesign :is(.sba-chart-track, .sba-bar-track) > span {
  display: block;
  width: var(--sba-bar-value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--sba-chart-color, #607087);
}
.sba-redesign :is(.sba-chart-row, .sba-bar-row).is-confirmed { --sba-chart-color: #258153; }
.sba-redesign :is(.sba-chart-row, .sba-bar-row).is-reported { --sba-chart-color: #ae7525; }
@media (max-width: 430px) {
  .sba-redesign :is(.sba-chart-row, .sba-bar-row) { grid-template-columns: minmax(0, 1fr); }
  .sba-redesign .sba-chart-value { text-align: left; }
}

/* Trust and companies: neutral by default; the renderer owns state labels. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-trust-status { display: flex; align-items: flex-start; gap: 14px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-trust-status[data-tone="success"] { border-color: #bad9cb; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-trust-status[data-tone="warning"] { border-color: #e2cfab; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-trust-status[data-tone="danger"] { border-color: #e8bcc5; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-company-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-company-card > :is(div, section) { flex: 1 1 160px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-company-avatar { display: grid; flex: 0 0 56px; width: 56px; height: 56px; place-items: center; border: 1px solid var(--line); border-radius: 16px; background: #f7f8fa; object-fit: contain; }

/* Documents/materials retain preview, download, menus and edit controls. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.document-card, .project-document-item, .project-asset-row, .offer-detail-card, .user-row, .partner-info-row) { overflow: visible; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.document-preview-tile, .document-mini-thumb, .invoice-thumb) { background-color: #f2f4f7; border-color: var(--line); border-radius: 12px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.document-actions, .offer-support-actions, .decision-row) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.project-asset-tabs, .invoice-filter-tabs, .admin-preview-nav) { flex-wrap: wrap; overflow: visible; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.glass-dropdown-menu, .global-search-panel, .profile-menu, .offer-detail-menu-panel, .project-asset-menu-panel) { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.flow-backdrop, .modal-backdrop) { background: rgb(20 27 39 / 38%); }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.flow-modal, .compact-modal, .project-action-modal, .property-widget-modal, .file-preview-modal) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow-y: auto; }

/* Planner: do not shrink a seven-day timeline into unreadable narrow columns.
 * The existing mobile agenda remains available; month/week scroll locally. */
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.project-calendar-desktop, .project-month-calendar, .table-wrap) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; min-width: 700px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-month-weekdays { min-width: 700px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-calendar-grid { min-width: 760px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row > * { grid-column: auto; min-width: 0; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row .flow-requirements { grid-column: span 2; }

/* Login: unchanged blue alpine panel; approved hikers behind the right form. */
.login-shell.sba-redesign-login {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 100dvh;
  padding: 0;
  overflow: visible;
  background: #fff;
}
.login-shell.sba-redesign-login::before,
.login-shell.sba-redesign-login::after { content: none; }
.login-shell.sba-redesign-login .mobile-login-topbar { display: none; }
.login-shell.sba-redesign-login .login-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  min-height: 100dvh;
  padding: clamp(28px, 4.5vw, 72px);
  color: #fff;
  background: linear-gradient(180deg, rgb(13 30 49 / 28%), rgb(13 30 49 / 4%) 30%, rgb(13 30 49 / 84%) 100%), url("./sba-alpine-background.jpg") center 40% / cover no-repeat;
  animation: none;
}
.login-shell.sba-redesign-login .login-brand-top { margin-bottom: auto; }
.login-shell.sba-redesign-login .login-logo-image { width: 56px; height: 56px; flex-basis: 56px; border-radius: 0; }
.login-shell.sba-redesign-login .login-logo-row :is(strong, span) { color: #fff; }
.login-shell.sba-redesign-login .login-hero-copy { margin: 40px 0 0; }
.login-shell.sba-redesign-login .login-hero-copy h1 { margin: 0 0 20px; font-size: clamp(2rem, 3.35vw, 3.6rem); font-weight: 650; line-height: 1.08; letter-spacing: -0.045em; color: #fff; }
.login-shell.sba-redesign-login .login-hero-copy :is(h1 span, h1 mark, p, p strong) { color: #fff; background: transparent; text-shadow: none; }
.login-shell.sba-redesign-login .login-hero-copy p { max-width: 38em; font-size: 1rem; line-height: 1.6; }
.login-shell.sba-redesign-login .login-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.login-shell.sba-redesign-login .login-feature-grid > div { min-height: 0; justify-items: start; align-content: start; gap: 4px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-shell.sba-redesign-login .login-feature-grid :is(strong, small, span) { color: #fff; background: transparent; }
.login-shell.sba-redesign-login .login-footer-line { flex-wrap: wrap; color: #fff; opacity: 1; font-size: 0.8rem; }
.login-shell.sba-redesign-login .login-auth-panel {
  display: grid; align-content: center; justify-items: center; align-self: stretch;
  width: 100%; min-width: 0; max-width: none; margin: 0;
  padding: 40px clamp(24px, 3vw, 48px); animation: none;
  isolation: isolate; overflow: clip; background: #dfd2bf;
}
.login-shell.sba-redesign-login .login-auth-panel::before {
  content: ""; position: absolute; inset: -8px; z-index: -1;
  background: linear-gradient(180deg, rgb(255 245 227 / 12%), rgb(22 34 50 / 12%)),
    url("./assets/mail-hikers-v1.jpg") 70% center / cover no-repeat;
  filter: blur(2px);
}
.login-shell.sba-redesign-login .login-auth-content {
  width: 100%; max-width: 500px; min-width: 0;
  display: grid; gap: 16px; padding: clamp(22px, 2vw, 28px);
  border: 1px solid rgb(255 255 255 / 86%); border-radius: 28px;
  background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(255 253 249 / 86%));
  box-shadow: 0 24px 64px rgb(24 35 50 / 16%), inset 0 1px 0 #fff;
}
.login-shell.sba-redesign-login .auth-card { width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-shell.sba-redesign-login .auth-form { gap: 14px; padding: 16px 0 0; }
.login-shell.sba-redesign-login .login-welcome { display: grid; gap: 10px; }
.login-shell.sba-redesign-login .login-welcome :is(p, .mini-label) { margin: 0; color: var(--muted); }
.login-shell.sba-redesign-login [data-login-form] .auth-heading h2,
.login-shell.sba-redesign-login [data-login-form] .auth-heading .mini-label {
  /* Keep the form heading accessible without repeating the welcome title. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.login-shell.sba-redesign-login [data-login-form] .auth-heading p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.login-shell.sba-redesign-login .remember-device-note { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.login-shell.sba-redesign-login .login-motion-control { min-height: 44px; justify-self: start; padding: 8px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.login-shell.sba-redesign-login .auth-tabs { margin-bottom: 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #f5f6f8; }
.login-shell.sba-redesign-login .auth-tabs button { border-radius: 8px; }
.login-shell.sba-redesign-login .auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 5px rgb(24 32 48 / 7%); }
.login-shell.sba-redesign-login .auth-input-shell { min-height: 52px; border: 1px solid #d8dce2; border-radius: 12px; background: #fff; box-shadow: none; }
.login-shell.sba-redesign-login .auth-input-shell input { min-width: 0; border: 0; background: transparent; }
.login-shell.sba-redesign-login .auth-options-row { flex-wrap: wrap; gap: 8px 16px; }
.login-shell.sba-redesign-login .auth-options-row :is(.remember-check, .inline-link) { font-size: 0.875rem; }
.login-shell.sba-redesign-login .auth-note { font-size: 0.875rem; }
.login-shell.sba-redesign-login .auth-note small { margin-top: 6px; font-size: 0.8rem; }
.login-shell.sba-redesign-login .remember-check { min-height: 44px; }
.login-shell.sba-redesign-login .login-submit-button { min-height: 52px; }
.login-shell.sba-redesign-login .login-auth-promo { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #f8f9fb; box-shadow: none; animation: none; }
.login-shell.sba-redesign-login .promo-shield { width: 44px; height: 44px; }
.login-shell.sba-redesign-login .login-auth-promo h2 { font-size: 1rem; line-height: 1.35; }
.login-shell.sba-redesign-login .promo-partner { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.login-shell.sba-redesign-login .promo-partner span { max-width: 22ch; font-size: 0.7rem; }
.login-shell.sba-redesign-login .promo-partner img { width: 106px; height: 32px; flex-shrink: 0; }
.login-shell.sba-redesign-login .hello-rotator,
.login-shell.sba-redesign-login .hello-rotator.is-switching {
  min-width: 0;
  min-height: 1.3em;
  width: 100%;
  padding: 0;
  color: var(--accent);
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.2;
  text-align: left;
  text-shadow: none;
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
  transition: color 1800ms ease;
  animation: sba-greeting-color 12s ease-in-out infinite;
}
@keyframes sba-greeting-color {
  0%, 100% { color: #b51331; }
  50% { color: #555d6b; }
}

/* The device indicator is neutral unless the renderer confirms active trust. */
.sba-redesign .sba-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sba-redesign .sba-security-grid > section { min-width: 0; padding: 20px; border: 1px solid #e6e8ec; border-radius: 16px; background: #fafbfc; }
.sba-redesign .sba-security-grid :is(h3, p) { margin-block: 0 12px; }
.sba-redesign .sba-motion-setting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e6e8ec; }
.sba-redesign .sba-motion-setting > div { flex: 1 1 260px; min-width: 0; }
.sba-redesign .sba-motion-setting .remember-check { min-height: 44px; }
:is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-trust-status { align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.82rem; box-shadow: none; }
.sba-redesign .sba-trust-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background-color: #737985; animation: none; }
.sba-redesign :is(.sba-trust-status.is-active, .sba-device-trusted) .sba-trust-dot { background-color: #258153; animation: sba-trust-pulse 4s ease-in-out infinite; }
.sba-redesign .mobile-avatar-button.sba-device-trusted { position: relative; }
.sba-redesign .mobile-avatar-button.sba-device-trusted .sba-trust-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border: 2px solid #fff; }
@keyframes sba-trust-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(37 129 83 / 0%); }
  50% { box-shadow: 0 0 0 4px rgb(37 129 83 / 12%); }
}
@keyframes sba-trust-color {
  0%, 100% { background-color: #258153; }
  50% { background-color: #496e59; }
}

/* 1024 and tablet widths retain the complete drawer for every role. */
@media (max-width: 1080px) {
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-sidebar,
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-main > .portal-topbar { display: none !important; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .portal-main { min-height: 0; padding-top: 24px; padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .mobile-portal-topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 4px 16px rgb(24 32 48 / 4%);
  }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .mobile-topbar-actions { gap: 4px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.mobile-menu-button, .mobile-bell-button, .mobile-avatar-button, .mobile-drawer-close, .kebab, .top-icon) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .mobile-nav-drawer { width: min(360px, calc(100vw - 20px)); max-height: 100dvh; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: #fff; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav {
    position: fixed;
    inset: auto 12px 0;
    z-index: var(--sba-z-topbar);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: auto;
    max-width: 620px;
    min-height: 72px;
    margin: 0 auto;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -4px 24px rgb(24 32 48 / 6%);
  }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 52px; gap: 4px; padding: 6px 2px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 0.69rem; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav > button.active { color: var(--accent-strong); background: var(--accent-soft); }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav > button > span { white-space: normal; overflow: visible; text-overflow: clip; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-start-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "property" "next"; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.invoice-layout, .admin-cockpit-grid, .admin-account-layout) { grid-template-columns: minmax(0, 1fr) !important; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row { grid-template-columns: 120px minmax(0, 1fr) 44px; gap: 16px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__status { grid-column: 2; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__action { grid-column: 3; grid-row: 1; }
}

/* Glass is limited to two shallow navigation strips, with opaque fallback. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1080px) {
    :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .mobile-portal-topbar,
    :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav {
      background: rgb(255 255 255 / 92%);
      -webkit-backdrop-filter: blur(10px) !important;
      backdrop-filter: blur(10px) !important;
    }
  }
}

/* 768/834: keep the login photo above the form; desktop split begins at 901. */
@media (max-width: 900px) {
  .login-shell.sba-redesign-login { grid-template-columns: minmax(0, 1fr); }
  .login-shell.sba-redesign-login .login-brand-panel { min-height: 300px; padding: 28px; gap: 14px; background-position: center 37%; }
  .login-shell.sba-redesign-login .login-hero-copy { margin-top: 28px; }
  .login-shell.sba-redesign-login .login-hero-copy h1 { font-size: clamp(1.85rem, 4.6vw, 2.5rem); margin-bottom: 12px; }
  .login-shell.sba-redesign-login .login-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .login-shell.sba-redesign-login .login-auth-panel { max-width: none; padding: 36px 28px 48px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.split-grid, .messages-hub-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-overview-row { grid-template-columns: 56px minmax(0, 1fr) 44px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-overview-meta { grid-column: 2; text-align: left; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-status-pill { grid-column: 2; justify-self: start; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-card-menu { grid-column: 3; grid-row: 1; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 430/390/320: single-column content, full amounts and all actions retained. */
@media (max-width: 620px) {
  .sba-redesign .sba-security-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) { --sba-page-gap: 16px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-vnext-quick-grid, .sba-vnext-summary-grid, .metric-grid, .invoice-stat-grid, .admin-stat-grid, .project-widget-grid, .property-hub-grid, .project-command-grid, .sba-vnext-command-grid, .form-grid, .schedule-form-grid, .admin-account-form, .project-cost-balance, .project-cost-legend) { grid-template-columns: minmax(0, 1fr) !important; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.section-heading, .sba-vnext-heading, .invoice-toolbar, .project-glass-header, .invoice-project-head) { display: flex; flex-direction: column; align-items: stretch; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero, .sba-vnext-property-hero) { min-height: 0; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero__media, .sba-vnext-property-hero__media) { height: 210px; min-height: 0; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.sba-visual-hero__content, .sba-vnext-property-hero__content) { padding: 20px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 14px; padding: 16px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__media { grid-column: 1 / -1; height: 180px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__main { grid-column: 1 / -1; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__status { grid-column: 1; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-row__action { grid-column: 2; grid-row: auto; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-list-row { flex-wrap: wrap; grid-template-columns: 44px minmax(0, 1fr); }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-list-row__aside { grid-column: 2; flex-basis: 100%; max-width: 100%; text-align: left; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-cost-dashboard-head { grid-template-columns: minmax(0, 1fr); }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .project-cost-ring { justify-self: start; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row { grid-template-columns: minmax(0, 1fr) !important; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row > * { grid-column: 1; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .sba-vnext-project-detail .project-flow-row .flow-requirements { grid-column: 1; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.user-row, .partner-info-row, .project-asset-row) { grid-template-columns: minmax(0, 1fr); }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.user-row, .partner-info-row, .project-asset-row) > * { min-width: 0; max-width: 100%; }
  .login-shell.sba-redesign-login .login-brand-panel { min-height: 240px; padding: 20px; gap: 12px; }
  .login-shell.sba-redesign-login .login-brand-top { display: block !important; }
  .login-shell.sba-redesign-login :is(.login-feature-grid, .login-footer-line) { display: none !important; }
  .login-shell.sba-redesign-login .login-logo-image { width: 40px; height: 40px; flex-basis: 40px; }
  .login-shell.sba-redesign-login .login-hero-copy { margin-top: 24px; }
  .login-shell.sba-redesign-login .login-hero-copy h1 { font-size: clamp(1.55rem, 6.2vw, 2.15rem); }
  .login-shell.sba-redesign-login .login-hero-copy p { font-size: 0.9rem; }
  .login-shell.sba-redesign-login .login-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .login-shell.sba-redesign-login .login-feature-grid > div { padding: 4px 0; }
  .login-shell.sba-redesign-login .login-feature-grid strong { font-size: 0.8rem; }
  .login-shell.sba-redesign-login .login-feature-grid small { font-size: 0.75rem; }
  .login-shell.sba-redesign-login .login-auth-panel { padding: 24px 14px 32px; }
  .login-shell.sba-redesign-login .login-auth-content { padding: 22px 18px; gap: 18px; border-radius: 24px; }
}

@media (max-width: 360px) {
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) { --sba-page-gap: 12px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) > .mobile-portal-topbar { padding-inline: 8px; gap: 4px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .mobile-portal-brand { flex-wrap: wrap; gap: 2px 6px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .mobile-portal-brand strong { font-size: 0.75rem; white-space: normal; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav { inset-inline: 6px; padding-inline: 4px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .customer-mobile-bottom-nav > button { font-size: 0.65rem; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-overview-row { grid-template-columns: minmax(0, 1fr) 44px; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) :is(.invoice-overview-copy, .invoice-overview-meta, .invoice-status-pill) { grid-column: 1 / -1; }
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) .invoice-card-menu { grid-column: 2; }
}

@media (min-width: 1440px) {
  :is(.portal-shell.sba-redesign, body.sba-redesign .portal-shell) { --sba-sidebar-width: 248px; --sba-page-gap: 40px; }
}

/* Reduced motion preserves only slow greeting color, never travel or flashes. */
@media (prefers-reduced-motion: reduce) {
  :is(.sba-redesign, .sba-redesign-login),
  :is(.sba-redesign, .sba-redesign-login) *,
  :is(.sba-redesign, .sba-redesign-login) *::before,
  :is(.sba-redesign, .sba-redesign-login) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .login-shell.sba-redesign-login .hello-rotator,
  .login-shell.sba-redesign-login .hello-rotator.is-switching {
    animation: sba-greeting-color 16s ease-in-out infinite !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .sba-redesign :is(.sba-trust-status.is-active, .sba-device-trusted) .sba-trust-dot {
    animation: sba-trust-color 12s ease-in-out infinite !important;
    box-shadow: none !important;
  }
}

/* User pause wins over reduced motion and JS-applied greeting tone classes.
 * app.js must also pause its greeting timer; CSS cannot stop text mutations. */
body.sba-redesign[data-motion='paused'],
body.sba-redesign[data-motion='paused'] *,
body.sba-redesign[data-motion='paused'] *::before,
body.sba-redesign[data-motion='paused'] *::after,
body[data-motion='paused'] :is(.sba-redesign, .sba-redesign-login),
body[data-motion='paused'] :is(.sba-redesign, .sba-redesign-login) *,
body[data-motion='paused'] :is(.sba-redesign, .sba-redesign-login) *::before,
body[data-motion='paused'] :is(.sba-redesign, .sba-redesign-login) *::after {
  animation: none !important;
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body[data-motion='paused'] .login-shell.sba-redesign-login .hello-rotator,
body[data-motion='paused'] .login-shell.sba-redesign-login .hello-rotator.is-switching {
  animation: none !important;
  color: #b51331 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
body[data-motion='paused'] .sba-redesign :is(.sba-trust-status.is-active, .sba-device-trusted) .sba-trust-dot,
body.sba-redesign[data-motion='paused'] :is(.sba-trust-status.is-active, .sba-device-trusted) .sba-trust-dot {
  animation: none !important;
  animation-play-state: paused !important;
  background-color: #258153 !important;
  box-shadow: none !important;
}

@media (forced-colors: active) {
  :is(.sba-redesign, .sba-redesign-login) :is(button, input, select, textarea, .sba-trust-status, .sba-chart-card) { border: 1px solid ButtonText; }
  .login-shell.sba-redesign-login .login-brand-panel { background: Canvas; color: CanvasText; }
  .login-shell.sba-redesign-login .login-brand-panel :is(h1, p, strong, small, span, mark) { color: CanvasText; }
  .login-shell.sba-redesign-login .login-auth-panel::before { content: none; }
  .login-shell.sba-redesign-login :is(.login-auth-panel, .login-auth-content) { background: Canvas; color: CanvasText; box-shadow: none; }
}