/* Phone layouts and touch controls. Public URLs are managed separately in navigation.js. */
@media screen and (max-width: 600px), screen and (pointer: coarse) {
  .experience input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .experience select,
  .experience textarea,
  .experience .date-parts select,
  .experience .puja-member .date-parts select,
  .experience #directory-controls input { font-size: 16px; }

  .experience .flow-progress button,
  .experience .flow-actions .text-button,
  .experience .result-actions .button,
  .experience .result-actions .text-button,
  .experience .report-cover-top > .button,
  .experience .consultation-rail .button,
  .experience .related-tools a,
  .experience .site-header nav a,
  .experience .date-shortcuts button,
  .experience .occasion-picks button { min-height: 44px; min-width: 44px; }

  .experience .flow-progress button { padding-block: 11px 8px; font-size: 12px; }
  .experience .flow-actions .text-button { padding-inline: 8px; }
  .experience .result-actions .button,
  .experience .result-actions .text-button,
  .experience .occasion-picks button { font-size: 12px; }
  .experience .related-tools a { display: inline-flex; align-items: center; }
  .experience summary { min-height: 44px; padding-block: 10px; }
  .experience.visual-home .entry-dialog .dialog-close { width: 44px; height: 44px; }
  .experience .entry-dialog {
    max-height: calc(100dvh - 24px);
    max-width: calc(100vw - 24px);
    overflow-y: auto;
    scroll-padding-block: 64px 20px;
  }
  .experience .entry-dialog input,
  .experience .entry-dialog select,
  .experience .entry-dialog textarea { scroll-margin-block: 64px 20px; }
}

@media screen and (max-width: 600px) {
  .experience .site-language,
  .experience .language-picker { flex: 0 0 100px; min-width: 100px; }
  .experience .site-language select,
  .experience .language-picker select { width: 100%; padding-inline: 10px; }
  .experience .header-inner { column-gap: 8px; }

  /* The desktop heading rule had overridden the original small-card type size. */
  .experience.visual-home .match-spot h2 {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.22;
    min-width: 0;
    max-width: 100%;
  }
  .experience.visual-home .match-bottom { min-width: 0; }
  .experience.visual-home .sample-sheet {
    width: clamp(104px, 30vw, 124px);
    top: 22px;
    right: 16px;
    transform: rotate(7deg);
  }

  /* Keep every report section discoverable without a sideways tab gesture. */
  .experience .report-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-block: 8px 14px;
    overflow: visible;
  }
  .experience .report-tabs button {
    min-width: 0;
    min-height: 44px;
    white-space: normal;
    font-size: 12px;
    line-height: 1.3;
    padding: 10px 8px;
    border: 1px solid #ded8c5;
    border-radius: 9px;
    background: #fffdf5;
  }
  .experience .report-tabs button[aria-selected="true"] {
    color: #fff9e7;
    background: #304a3a;
    border-color: #304a3a;
  }

  .experience .report-contact-banner strong { font-size: 12px; }
  .experience .report-contact-banner span { font-size: 10px; }
  .experience .report-cover .record { font-size: 12px; overflow-wrap: anywhere; }
  .experience .r-summary small { font-size: 10px; }
  .experience .r-summary p,
  .experience .r-summary .summary-meaning,
  .experience .period-track small,
  .experience .consultation-rail p.small { font-size: 12px; }
  .experience .r-section > p { font-size: 13px; }
  .experience .rail-direct-contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
}

@media screen and (max-width: 360px) {
  .experience:not(.visual-home) .brand { font-size: 17px; }
  .experience .date-parts,
  .experience .matching-person .date-parts { grid-template-columns: 48px minmax(0, 1fr) 72px; }
  .experience .puja-member .date-parts { grid-template-columns: 44px minmax(0, 1fr); }
  .experience .puja-member .date-parts > .field:last-child { grid-column: 1 / -1; }
  .experience .date-parts input,
  .experience .date-parts select { padding-inline: 7px; }
  .experience .report-contact-banner { grid-template-columns: 1fr; }
  .experience .report-contact-banner > div { grid-column: auto; }
}