/* One type scale for the mobile app, account pages, and the offline screen. */
@media screen {
  html.large-text { font-size: 150%; }
  html.large-text .service-time { flex-wrap: wrap; }
  html.large-text .service-time > span { max-width: none; }
  .reading-page { font-size: 112.5%; }
  .reading-page body { font-size: 1rem; }
  .reading-page .type-switch {
    min-width: 2.45rem; width: auto; min-height: 44px; margin: 0;
    padding: .2rem .4rem; border: 1px solid #a8b7ae; border-radius: 9px;
    color: #173f36; background: #fffefa; font: 600 1.1rem/1.25 Georgia, serif;
  }
  .reading-page .type-switch[aria-pressed="true"] { color: white; background: #173f36; }
}

@media screen and (max-width: 800px) {
  html, html.reading-page { min-width: 0; font-size: 125%; scroll-padding-top: 4rem; }
  html.large-text { font-size: 162.5%; }
  body { line-height: 1.55; }
  #root { --subtle: #4f6258; --small-type: .85rem; }

  /* Keep all text sizes relative to the user's reading preference. */
  #root :where(.page-intro, .hero-content > p, .quick-action small, .next-service-detail,
    .quiet-card p, .first-visit-card p, .schedule-info p, .parish-story p, .sacrament-card p,
    .contact-card p, .address-panel p, .support-panel p, .faq-list details > p, .faq-list summary,
    .day-detail > p, .reading-list, .saint-list, .fast-note p, .feature-card p, .modal-body > p,
    .preparation-list, .install-instruction p, .quiet-content > .text-muted, .search-results small,
    .settings-row, .field > label, .field-label, .input, .textarea, .select, .checkbox-row,
    .info-box, .error-box, .note-paper p, .success-card p, .note-row p, .office-note-names,
    .empty-state p, .note-details summary, .office-event p, .toast) {
    font-size: 1rem; line-height: 1.55;
  }
  #root :where(.button, .link-button, .hero-text-link, .segmented > button, .filter-tabs button,
    .status-filters button, .mobile-nav button, .footer-privacy) {
    font-size: .95rem; line-height: 1.35; min-height: 48px; white-space: normal;
  }
  #root :where(.eyebrow, .hero-content > .hero-kicker, .hero-location, .photo-label,
    .subtle-date, .today-date small, .old-style, .fast-pill, .badge, .status-pill, .count-badge,
    .form-hint, .form-count, .field-meta, .step-marker, .privacy-button, .calendar-explainer,
    .calendar-weekdays > span, .legend, .date-month, .schedule-time span, .feed-status,
    .schedule-meta, .source-link, .contact-email, .app-footer, .install-brand span,
    .note-paper .note-paper-caption, .note-contact, .note-message, .service-time > span) {
    font-size: var(--small-type); line-height: 1.45;
  }
  #root :where(.hero-kicker, .eyebrow, .step-marker) { letter-spacing: .03em; }
  #root :where(.subtle-date, .schedule-meta, .schedule-time span, .contact-email,
    .form-count, .old-style, .calendar-weekdays > span, .app-footer, .footer-privacy,
    .search-results small, .note-paper-caption) { color: var(--subtle); }
  #root :where(.service-date, .today-date span, .day-number, .calendar-readings h3,
    .day-detail h3.panel-heading) { font-size: 1rem; }
  #root :where(.quick-action strong, .search-results strong, .note-row h3, .office-event h3) {
    font-size: 1.08rem; line-height: 1.35;
  }

  #root .topbar { gap: 8px; min-height: 62px; padding: 7px 12px; flex-wrap: wrap; }
  #root .mobile-brand { gap: 7px; font-size: 1.15rem; }
  #root .mobile-brand strong { max-width: none; }
  #root .mobile-brand img { width: 30px; height: 30px; }
  #root .topbar-actions { gap: 5px; flex-wrap: wrap; max-width: 100%; }
  #root .topbar .search-button { display: none; }
  #root .reading-button {
    display: inline-flex; width: auto; min-width: 44px; padding: 5px 8px;
    min-height: 44px; font: 600 1.1rem/1 Georgia, serif; color: #173f36;
    background: #edf2e8; border-color: #a8b7ae;
  }
  #root .language-switch button { font-size: .82rem; min-width: 40px; min-height: 44px; padding: 3px; }
  #root .content-wrap { padding: 12px clamp(10px,3.5vw,22px) calc(4.8rem + env(safe-area-inset-bottom,0px)); }
  #root .content-wrap :where(h1,h2,h3,p,li,button,a,label,summary,strong,small,span) { overflow-wrap: anywhere; }
  #root :where(.page-head h1, .hero h1) { font-size: 1.95rem; line-height: 1.12; }
  #root :where(.section-heading h2, .modal-head h2, .calendar-today h3, .day-detail h2,
    .feature-card h2, .contact-card h2, .address-panel h2, .parish-story h2,
    .sacrament-card h2, .panel-heading, .success-card h2) { font-size: 1.5rem; line-height: 1.2; }
  #root :where(.panel-heading, .section-heading, .toolbar, .field-meta, .service-time, .office-event,
    .section-heading.home-heading) { flex-wrap: wrap; }
  #root :where(.panel-heading h2, .panel-heading h3, .settings-row > span, .modal-head h2) { min-width: 0; }
  #root :where(.field, .schedule-info, .office-note-content, .office-toolbar .field, .search-results button > span) { min-width: 0; }
  #root :where(.panel, .success-card, .day-detail) { padding: clamp(14px,4vw,22px); }
  #root .step-marker { width: auto; height: auto; padding: .12em .5em; border-radius: 2em; white-space: nowrap; }
  #root .service-time { gap: .25em; font-size: 2.8rem; }
  #root .service-time > span { max-width: none; color: #e1e9d9; }
  #root .modal-head { gap: 8px; padding: 14px 16px; }
  #root .modal-body { padding: 16px; }
  #root .segmented, #root .filter-tabs { flex-wrap: wrap; max-width: 100%; }
  #root .segmented > button, #root .filter-tabs button { flex: 1 1 auto; }
  #root .privacy-button { margin-left: 0; }
  #root .checkbox-row input { width: 1.1em; height: 1.1em; }

  /* Put the church photo alongside the welcome, and the next action on its own line. */
  #root .hero {
    display: grid; grid-template-columns: minmax(0,1fr) clamp(64px,20vw,110px);
    align-items: center; gap: 10px 14px; height: auto; min-height: 0; padding: clamp(15px,4vw,25px);
    background: #f1f0e6; color: var(--ink); border: 1px solid var(--line); box-shadow: none;
  }
  #root .hero-content { display: contents; }
  #root .hero-image { position: static; grid-area: 2 / 2; z-index: auto; height: clamp(68px,18vw,100px); border-radius: 9px; }
  #root .hero-shade, #root .hero-location { display: none; }
  #root .hero-kicker { grid-area: 1 / 1 / 2 / -1; margin: 0; color: #66512e !important; }
  #root .hero h1 { grid-area: 2 / 1; color: #173f36; font-weight: 650; }
  #root .hero-content > p:not(.hero-kicker) { grid-column: 1 / -1; max-width: 40em; margin: 0; color: #344a3f !important; }
  #root .hero .hero-actions { grid-column: 1 / -1; margin: 3px 0 0; gap: 6px 16px; }
  #root .hero .button-light { color: #fff; background: #174638; border: 1px solid #174638; }
  #root .hero-text-link { color: #244e40; text-decoration: underline; text-underline-offset: 3px; }
  #root .mobile-nav { column-gap: 3px; background: #fffef9; padding-inline: 6px; min-height: 0; }
  #root .mobile-nav button { color: #41564b; padding: 6px 3px; gap: 2px; font-size: var(--small-type); }
  #root .mobile-nav button.active { color: #113e31; }
  #root .mobile-nav button svg { width: 23px; height: 23px; }
  #root .calendar-layout, #root .grid-two { grid-template-columns: minmax(0,1fr); }
  #root .calendar-panel { padding: 16px 6px; }
  #root .calendar-grid, #root .calendar-weekdays { gap: 2px; }
  #root .calendar-weekdays > span { padding-inline: 0; }
  #root .calendar-day { padding: 6px 0; min-height: max(48px,2.5rem); }
  #root .month-header { flex-wrap: wrap; gap: 8px; padding-inline: 6px; }
  #root .month-title { font-size: 1.4rem; }
  #root .month-header .toolbar { gap: 5px; }
  #root .month-header .icon-button { min-width: 44px; min-height: 44px; }
  #root .settings-row { gap: 12px; }
  #root .section-heading .link-button { min-width: 0; max-width: 100%; flex-shrink: 1; }
  #root .note-row { grid-template-columns: minmax(0,1fr); }
  #root .day-detail .toolbar, #root .note-row .toolbar { flex-wrap: wrap; }
  #account-links { overflow-wrap: anywhere; font-size: .9rem; }
  .reading-page body { padding: clamp(8px,3vw,20px); }
  .reading-page main { margin: 8px auto; padding: clamp(14px,4vw,24px); overflow-wrap: anywhere; }
  .reading-page .top { flex-wrap: wrap; gap: 8px; }
  .reading-page nav a { display: inline-grid; place-items: center; padding: 0; min-width: 40px; min-height: 44px; }
  .reading-page input { min-width: 0; }
  .reading-page .small { font-size: .85rem; }
}

@media screen and (max-width: 620px) {
  /* Reading a whole service across the card leaves enough width for long titles. */
  #root .schedule-row, #root .schedule-row.compact {
    grid-template-columns: max-content minmax(0,1fr) auto; gap: 9px 12px; padding: 18px 0;
  }
  #root .schedule-row > .date-tile { grid-area: 1 / 1; min-width: 0; padding: 5px 8px; }
  #root .schedule-row > .schedule-time { grid-area: 1 / 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  #root .schedule-row > .schedule-actions { grid-area: 1 / 3; align-self: center; }
  #root .schedule-row > .schedule-info { grid-area: 2 / 1 / 3 / -1; }
  #root .schedule-time strong { font-size: 1.6rem; }
  #root .schedule-info h3 { font-size: 1.32rem; }
  #root .home-grid, #root .quick-actions, #root .sacrament-grid, #root .form-grid { grid-template-columns: minmax(0,1fr); }
  #root .quiet-card, #root .first-visit-card { flex-wrap: wrap; }
  #root .first-visit-card img { width: 100%; height: 125px; object-position: center 47%; }
  #root .quiet-symbol { display: none; }
  #root .mobile-nav { grid-template-columns: .95fr 1.35fr .85fr; }
  /* Calendar and parish are also available in the full menu. */
  #root .mobile-nav button:nth-child(2), #root .mobile-nav button:nth-child(4) { display: none; }
  #root .mobile-nav button { font-size: .9rem; }
}

@media screen and (max-width: 420px) {
  #root .segmented:not(.quiet-durations), #root .filter-tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
  #root .hero .hero-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  #root .hero-text-link { justify-content: center; }
  #root .panel-heading { column-gap: 8px; }
  #root .field-meta { gap: 2px 10px; }
  #root .quiet-card, #root .first-visit-card { gap: 8px; }
  html.large-text #root .hero-image { grid-area: 1 / 2; }
  html.large-text #root .hero-kicker { grid-area: 1 / 1; }
  html.large-text #root .hero-kicker > span { display: none; }
  html.large-text #root .hero h1 { grid-area: 2 / 1 / 3 / -1; }
}