/* System-wide readability floor. Loaded after the app's existing styles. */
body {
  font-size: 17px !important;
  line-height: 1.55;
}

:is(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  a.button,
  a.btn,
  a[role="button"]
) {
  min-height: 40px;
  font-size: 16px !important;
}

:is(label, legend) {
  font-size: 15px !important;
}

:is(small, .muted, .helper, .help, .hint, [class$="-helper"], [class$="-help"], [class$="-hint"]) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(table, td) {
  font-size: 15px !important;
}

th {
  font-size: 14px !important;
}

:is(
  .badge,
  .pill,
  .chip,
  .tag,
  [class$="-badge"],
  [class$="-pill"],
  [class$="-chip"],
  [class$="-tag"]
) {
  font-size: 13px !important;
}

/* Mobile-only layout overlay. */
@media (max-width: 760px) {
  :is(html, body, .page-grid, .setup-panel, .layout-panel, .summary-panel, .result-column) {
    max-width: 100%;
    min-width: 0;
  }

  :is(img, video, canvas, iframe) {
    max-width: 100%;
    height: auto;
  }

  :is(
    button,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    a.button,
    a.btn,
    .header-actions a
  ) {
    min-height: 44px;
    min-width: 44px;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }

  :is(.site-header, .header-actions, .section-title, .summary-actions) {
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap !important;
  }

  :is(
    .page-grid,
    .product-tabs,
    .preset-grid,
    .input-grid,
    .input-grid.two,
    .input-grid.three,
    .choice-grid,
    .choice-grid.two,
    .summary-actions
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.rate-table, .table-wrap, .table-container, .table-scroll) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.modal-backdrop, .confirm-layer, .dialog-backdrop) {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }

  :is(dialog, .modal, .dialog, [role="dialog"]) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto;
  }
}

@media (max-width: 420px) {
  :is(.header-actions, .summary-actions) > :is(button, a) {
    flex: 1 1 100%;
  }
}

/* Selector-specific readability floors. Keep this final for cascade priority. */
.eyebrow {
  font-size: 14px !important;
}

/* Readability for calculator guidance, measurements, and result summaries. */
:is(
  .header-center b,
  .header-center span,
  .header-actions > span,
  .section-title > span,
  .section-title p,
  .block-heading p,
  .preset-grid span,
  .unit-input span,
  .metric span,
  .choice-grid strong,
  .rate-row span,
  .inline-note,
  .layout-panel > p,
  .withholding-result,
  footer
) {
  font-size: 14px !important;
  line-height: 1.55;
}

.layout-stats span {
  font-size: 13px !important;
  line-height: 1.45;
}

:is(.section-title p, .block-heading p, .unit-input span, .metric span, .rate-row span) {
  color: #5f6b7a !important;
}

.section-title > span {
  color: #b93827 !important;
}

footer {
  color: #5b6677 !important;
}

/* The unified theme makes the final header light; keep all header text readable. */
.site-header .brand {
  color: #13213d !important;
}

.site-header .brand small {
  color: #4b5f7a !important;
}

.site-header .header-center b {
  color: #155e75 !important;
}

:is(.site-header .header-center span, .site-header .header-actions > span) {
  color: #4b5f7a !important;
}

.site-header .icon-button {
  color: #13213d !important;
  border-color: #cbd7e8 !important;
  background: #eef3f8 !important;
}

/* Restore a coherent final cascade when the user enables dark mode. */
body.dark {
  --lgs-bg: #081428;
  --lgs-surface: #102039;
  --lgs-surface-2: #142842;
  --lgs-text: #e9eef8;
  --lgs-muted: #bdcbe0;
  --lgs-line: #33445f;
  --bg: #081428;
  --panel: #102039;
  --ink: #e9eef8;
  --muted: #bdcbe0;
  --line: #33445f;
  color: #e9eef8 !important;
  background: #081428 !important;
}

body.dark .site-header {
  color: #e9eef8 !important;
  border-bottom-color: #33445f !important;
  background: #0b1730 !important;
}

body.dark .site-header .brand {
  color: #f5f8ff !important;
}

body.dark .site-header .brand small {
  color: #bdcbe0 !important;
}

body.dark .site-header .header-center b {
  color: #67e8f9 !important;
}

body.dark :is(.site-header .header-center span, .site-header .header-actions > span) {
  color: #c2cee0 !important;
}

body.dark .site-header .icon-button {
  color: #e9eef8 !important;
  border-color: #40516b !important;
  background: #142842 !important;
}

body.dark :is(input, select, textarea, .outline) {
  color: #e9eef8 !important;
  border-color: #40516b !important;
  background: #0c1a30 !important;
  color-scheme: dark;
}

body.dark .section-title > span {
  color: #ff9a87 !important;
}

body.dark footer {
  color: #bdcbe0 !important;
}

:is(.login-card .eyebrow, .back-link, .choice-grid strong, .sheet-visual) {
  color: #245fae !important;
}

.hero {
  background:
    radial-gradient(circle at 86% 8%, rgba(73, 162, 255, .3), transparent 32%),
    linear-gradient(135deg, #0b1730 0%, #15386f 58%, #2f6fc9 100%) !important;
}

.hero .eyebrow {
  color: #fff !important;
}

.hero > p {
  color: #f5f8ff !important;
}

:is(.primary, .grand-total) {
  background: linear-gradient(135deg, #2f6fc9, #15386f) !important;
}

:is(.product-tabs button.active, .preset-grid button.active, .choice-grid button.active) {
  color: #13213d !important;
}

:is(.product-tabs button.active, .preset-grid button.active, .choice-grid button.active) small {
  color: #5f6b7a !important;
}

body.dark :is(
  label,
  .section-title p,
  .block-heading p,
  .unit-input span,
  .metric span,
  .rate-row span
) {
  color: #bdcbe0 !important;
}

body.dark :is(
  .choice-grid strong,
  .sheet-visual,
  .login-card .eyebrow,
  .back-link
) {
  color: #67e8f9 !important;
}

body.dark :is(.product-tabs button.active, .preset-grid button.active, .choice-grid button.active) {
  color: #e9eef8 !important;
}

body.dark :is(.product-tabs button.active, .preset-grid button.active, .choice-grid button.active) small {
  color: #bdcbe0 !important;
}