/* Shared text legibility fixes. Loaded after each page's own styles. */
body.readable-dark,
body.readable-light {
  font-size: 1rem;
  line-height: 1.55;
}

body.readable-dark {
  --muted: #c6d5da;
  --mid: #c6d5da;
  --dim: #b5c8cf;
}

body.readable-light {
  --mid: #475569;
  --err: #b42336;
}

body.readable-dark :is(input, select, textarea),
body.readable-light :is(input, select, textarea) {
  font-size: 1rem;
}

body.readable-dark :is(input, textarea)::placeholder {
  color: #b9cbd1;
  opacity: 1;
}

body.readable-light :is(input, textarea)::placeholder {
  color: #526176;
  opacity: 1;
}

/* Small inline labels are used throughout the dynamic booking and staff cards. */
body.readable-dark :is(div, span, p, small, label, a, button, td, th, li)[style*="font-size:.6"],
body.readable-dark :is(div, span, p, small, label, a, button, td, th, li)[style*="font-size:.7"],
body.readable-dark :is(div, span, p, small, label, a, button, td, th, li)[style*="font-size:.8"],
body.readable-light :is(div, span, p, small, label, a, button, td, th, li)[style*="font-size:.6"],
body.readable-light :is(div, span, p, small, label, a, button, td, th, li)[style*="font-size:.7"],
body.readable-light :is(div, span, p, small, label, a, button, td, th, li)[style*="font-size:.8"] {
  font-size: .875rem !important;
  line-height: 1.45;
}

/* Dynamic staff cards often set pale text at 20–50% opacity inline. */
body.readable-dark :is(div, span, p, small, label, a, button, td, th, li):is(
  [style*="color:rgba(255,255,255,.1"],
  [style*="color:rgba(255,255,255,.2"],
  [style*="color:rgba(255,255,255,.3"],
  [style*="color:rgba(255,255,255,.4"],
  [style*="color:rgba(255,255,255,.5"]
) {
  color: #c5d3d9 !important;
}

body.readable-admin :is(
  .login-sub, .login-label, .login-hint, .login-biz-name,
  .sidebar-brand .brand-tag, .nav-section, .nav-item, .nav-group-header,
  .nav-subitem,
  .sidebar-footer, .sidebar-footer a, .stat-card .sc-label,
  .stat-card .sc-sub, .section-hed p, .qlink .ql-sub,
  .ann-meta, .ann-del, .empty-state, .ref-table th,
  .hours-adm-day, .setting-label span, .ops-field label,
  .ops-stat span, .ops-kennel-meta, .ops-muted,
  .ops-booking small, .ops-shift small, .rc-field-label
) {
  color: #c5d3d9;
}
body.readable-admin :is(
  .login-sub, .login-label, .login-hint, .login-biz-name,
  .sidebar-brand .brand-tag, .nav-section, .nav-item, .nav-group-header,
  .nav-subitem,
  .sidebar-footer, .stat-card .sc-label, .stat-card .sc-sub,
  .qlink .ql-sub, .ann-meta, .ref-table th, .setting-label span,
  .ops-field label, .ops-stat span, .ops-kennel-meta, .ops-muted,
  .ops-booking small, .ops-shift small, .rc-field-label
) {
  font-size: .875rem;
}
body.readable-admin .nav-item:hover,
body.readable-admin .nav-item.active {
  color: #fff;
}
body.readable-admin :is(.sidebar-footer a, .ann-del):hover {
  color: #fff;
}

body.readable-manual :is(.sidebar-logo .sub, .sidebar-section, .sidebar a, .sidebar .snum) {
  font-size: .875rem;
}
body.readable-manual :is(p, li, .card p, .sidebar a) {
  font-size: .9375rem;
}

body.readable-portal :is(.brand-sub, .eyebrow, .field label, .hint, .sub,
  .stat span, .row-main span, .badge, .visit-status-detail, .visit-notice) {
  font-size: .875rem;
}
body.readable-portal .field label {
  color: #d5e2e6;
}
body.readable-portal .badge {
  white-space: normal;
}

body.readable-book :is(.biz-contact, .field label, .field .err-msg,
  .review-label, .waiver-box p, .vacc-note, .pickup-meta,
  .booking-footer a) {
  font-size: .875rem;
}
body.readable-book .biz-banner span,
body.readable-book :is(.tab-btn.active, .size-pill.selected, .paw-step.done,
  .paw-step.active, .btn-next) {
  color: #092630;
}

body.readable-home :is(.hero h1 span, .nav-logo span, .footer-logo span,
  .section-eyebrow, .price-plan) {
  color: #087653;
}
body.readable-home .section-eyebrow {
  font-size: .875rem;
}
body.readable-home .how .section-eyebrow,
body.readable-home .price-card.featured .price-plan {
  color: #60dfb6;
}
body.readable-home :is(.how .section-sub, .step p, .demo-booking p,
  .price-card.featured .price-period, .price-card.featured .price-features li,
  .cta-section p) {
  color: #cbd7dd;
}
body.readable-home :is(.hero-sub, .social-proof p, .logos, .step p,
  .demo-booking p, .demo-badge, .price-plan, .price-period,
  .price-features li, .pricing-note, .proof-card p,
  footer p, footer a) {
  font-size: .875rem;
}
/* Feature descriptions need to be comfortable to read without zooming. */
body.readable-home .features-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
body.readable-home .feat-card {
  background: #fff;
  border-color: #c9d8d1;
}
body.readable-home .feat-card h3 {
  color: #163936;
  font-size: 1.2rem;
  line-height: 1.35;
}
body.readable-home .feat-card p {
  color: #344c47;
  font-size: 1.0625rem;
  line-height: 1.6;
}
body.readable-home .logos {
  opacity: 1;
}
body.readable-home :is(.site-powered-bar, .arrival-links a,
  .arrival-eyebrow, .arrival-button, .arrival-actions p,
  .arrival-footer, .arrival-checkin strong) {
  font-size: .875rem;
}
body.readable-home :is(.arrival-caption, .arrival-checkin small,
  .arrival-sticker) {
  font-size: .75rem;
}

body.readable-signup :is(.nav-logo span, .form-section-label),
body.readable-onboard .nav-logo span {
  color: #087653;
}
body.readable-signup :is(.perk p, .page-left p) {
  color: #d1dbe2;
}
body.readable-signup :is(.field .hint, .slug-preview, .login-link,
  .perk p, .form-section-label),
body.readable-onboard :is(.nav-biz, .step-label, .field .hint,
  .logo-preview-text, .plan-card-features, .skip-link) {
  font-size: .875rem;
}
body.readable-onboard .step-circle.done,
body.readable-onboard .plan-card-badge {
  color: #0a1628;
}

body.readable-payment :is(.eyebrow, .error),
body.readable-demo .eyebrow {
  font-size: .875rem;
}
body.readable-payment .bill-row {
  font-size: .9375rem;
}

@media (max-width: 768px) {
  body.readable-admin .sidebar {
    overflow-x: hidden;
  }
  body.readable-admin .nav-group-header {
    justify-content: center;
    padding: 12px;
  }
  body.readable-admin .nav-group-header > span:not(.ni) {
    display: none;
  }
  body.readable-admin .nav-group.open .nav-group-items {
    position: fixed;
    top: 64px;
    left: 64px;
    width: min(260px, calc(100vw - 72px));
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    background: #162b3a;
    border: 1px solid #5b818b;
    border-radius: 0 10px 10px 0;
    box-shadow: 10px 12px 30px rgba(0, 0, 0, .4);
  }
  body.readable-admin .dash-top-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.readable-admin .status-tab-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }
  body.readable-admin .s-tab {
    min-width: 0;
    padding: 10px 6px;
    font-size: .875rem;
    flex-wrap: wrap;
    line-height: 1.35;
  }
  body.readable-admin .topbar {
    gap: 10px;
    padding: 12px 16px;
  }
  body.readable-admin .topbar-right {
    gap: 8px;
  }
  body.readable-admin .cap-table {
    width: 100%;
    table-layout: fixed;
  }
  body.readable-admin .cap-table th {
    padding: 8px 2px;
    overflow-wrap: anywhere;
  }
}

body.readable-dark :is(a, button, input, select, textarea):focus-visible,
body.readable-light :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #f4a034;
  outline-offset: 3px;
}

/* Shared readability pass: role-based weights only; leave icons and disabled states alone. */
body.readable-dark :is(p, li, .sub, .hint, .muted, .description, .helper-text,
  .form-hint, .fine-print, .empty-state, .section-desc, .step-body, .step-detail),
body.readable-light :is(p, li, .sub, .hint, .muted, .description, .helper-text,
  .form-hint, .fine-print, .empty-state, .section-desc, .step-body, .step-detail) {
  font-weight: 500;
  line-height: 1.55;
}

body.readable-dark :is(.field label, .rc-field-label, .field-label, .form-label,
  .section-label, .table-wrap th, table th),
body.readable-light :is(.field label, .rc-field-label, .field-label, .form-label,
  .section-label, .table-wrap th, table th) {
  font-weight: 700;
}

body.readable-dark :is(.button, .btn, .btn-primary, .btn-next, .submit-btn,
  .tab-btn, .s-tab, .nav-link, .nav-item, .nav-group-header, .floor-mode-switch),
body.readable-light :is(.button, .btn, .btn-primary, .btn-next, .submit-btn,
  .tab-btn, .s-tab, .nav-link, .nav-item, .nav-group-header) {
  font-weight: 700;
}

/* Admin content uses pale cards: replace legacy pale-on-white metadata with inked muted text. */
body.readable-admin :is(.login-sub, .login-label, .login-hint, .login-biz-name,
  .sidebar-brand .brand-tag, .nav-section, .sidebar-footer, .sidebar-footer a,
  .stat-card .sc-label, .stat-card .sc-sub, .section-hed p, .qlink .ql-sub,
  .ann-meta, .ann-text, .ann-del, .empty-state, .ref-table th, .cap-table th,
  .hours-adm-day, .setting-label span, .ops-field label, .ops-stat span,
  .ops-kennel-meta, .ops-muted, .ops-booking small, .ops-shift small, .rc-field-label,
  .room-board-head > div, .room-booking-chip small) {
  color: #53675f !important;
  font-weight: 500;
}

body.readable-admin :is(.nav-section, .nav-item, .nav-group-header, .nav-subitem,
  .ops-field label, .setting-label, .rc-field-label, .ref-table th, .cap-table th,
  .room-board-head > div, .s-tab, .sc-label, .setting-label span, .ops-stat span,
  .ops-btn, .setting-btn, .add-btn, .save-btn, .quick-ci-btn, .logout-btn) {
  font-weight: 700;
}

body.readable-admin :is(.topbar-title, .section-hed h2, .card h3, .panel h2,
  .panel h3, .login-box h1) {
  font-weight: 800;
}

/* The employee CSS follows design-system.css; these scoped rules deliberately win on its light cards. */
:is(body.readable-dark.employee-mode, body.readable-dark .employee-mode) :is(.page-head p, .employee-greeting p, .employee-stamp,
  .summary-card .summary-label, .summary-card small, .attention-item p,
  .employee-task-meta, .pickup-row small, .employee-care-line, .employee-dog-chip small,
  .employee-handoff-ident, .handoff-confirm .handoff-kicker, .handoff-confirm dt,
  .handoff-confirm > p, .employee-group-warning, .employee-form-note, .field label,
  .employee-details summary, .employee-task-section h2 span) {
  color: #4b655b;
  font-weight: 500;
}

:is(body.readable-dark.employee-mode, body.readable-dark .employee-mode) :is(.summary-card .summary-label, .field label,
  .employee-task-section h2 span, .employee-details summary, .handoff-confirm dt) {
  font-weight: 700;
}

:is(body.readable-dark.employee-mode, body.readable-dark .employee-mode) :is(.page-head h1, .employee-greeting h1,
  .employee-panel-title h2, .employee-task-section h2, .attention-item strong,
  .employee-task-row strong, .pickup-row strong, .employee-handoff-ident strong,
  .handoff-confirm h3, .employee-dog-chip span) {
  font-weight: 800;
}

/* Marketing copy is medium weight, while existing dark-panel foreground colors stay intact. */
body.readable-home :is(.hero-sub, .arrival-intro > p, .section-sub, .feat-card p,
  .proof-card p, .step p, .demo-workflow p, .pricing-note, .faq-section details p,
  .workflow-split article > p, .incident-sample span, .ops-sample-grid span,
  .ops-sample > p, .migration-flow > div small, .capability-list small,
  .floor-showcase-intro > p, .floor-showcase-caption, .arrival-actions p) {
  font-weight: 500;
  line-height: 1.55;
}

body.readable-home :is(.arrival-links a, .arrival-nav-cta, .arrival-mobile-cta,
  .arrival-button, .section-eyebrow, .feat-card h3, .proof-card h3, .step h3,
  .faq-section summary, .workflow-panel-head, .ops-sample-head, .capability-list strong,
  .floor-window-heading span, .floor-status-lane > div strong, .floor-attention-head strong) {
  font-weight: 700;
}

/* Supporting workflow pages: modestly strengthen common metadata without recoloring dark panels. */
body.readable-dark :is(.brand-sub, .eyebrow, .stat span, .row-main span, .visit-status-detail,
  .visit-notice, .biz-contact, .review-label, .waiver-box p, .vacc-note, .pickup-meta,
  .booking-footer, .bill-row, .payment-note, .demo-card p, .tour-step p,
  .sidebar-logo .sub, .sidebar-section, .content p, .content li) {
  font-weight: 500;
}

body.readable-dark :is(.eyebrow, .field label, .rc-field-label, .review-label,
  .sidebar-section, .table-wrap th, table th, .bill-label, .stat-label,
  .tour-step h2, .demo-card h2) {
  font-weight: 700;
}

body.readable-light :is(.eyebrow, .field label, .section-label, .form-section-label,
  .step-label, .table-wrap th, table th, .nav-link) {
  font-weight: 700;
}

body.readable-dark :is(h1, .page-title) {
  font-weight: 800;
}
body.readable-dark :is(h2, .section-title, .panel-title) {
  font-weight: 750;
}
body.readable-dark :is(h3, .card-title) {
  font-weight: 700;
}
body.readable-light :is(h1, .page-title) {
  font-weight: 800;
}
body.readable-light :is(h2, .section-title, .panel-title) {
  font-weight: 750;
}
body.readable-light :is(h3, .card-title) {
  font-weight: 700;
}

body.readable-light :is(.page-left p, .perk p) {
  font-weight: 500;
}

/* Floor identity text sits on pale navigation, not on a dark brand panel. */
body.readable-dark .floor-shell .sidebar-identity strong {
  color: #174f45 !important;
}
body.readable-dark .floor-shell .sidebar-identity :is(span, small, .eyebrow) {
  color: #53675f !important;
}
body.readable-admin .sidebar-footer .sidebar-identity strong {
  color: #176b5c !important;
}
body.readable-admin .sidebar-footer .sidebar-identity :is(span, small, .eyebrow) {
  color: #53675f !important;
}

/* Preserve light-on-dark contrast for shared dark-green blocks after scoped text rules. */
body.readable-home :is(.team-in-motion .team-motion-copy > p, .team-in-motion .motion-words,
  .how .section-sub, .how .step h3, .how .step p, .price-card.featured > p,
  .price-card.featured .price-period, .price-card.featured .price-features li,
  .cta-section > p) {
  color: #e2ebe6 !important;
}
body.readable-home :is(.team-in-motion .team-motion-heading h2, .how .section-title,
  .price-card.featured .price-amount, .cta-section .section-title) {
  color: #f4f4e9 !important;
}