/* Mobile reading surfaces. Enqueue after the existing theme/component styles.
 * Keep the approved paper, ink, brick, typefaces, artwork and editorial copy.
 * Every override is bounded to mobile; homepage map/detail and navigation are
 * owned by their own stylesheets. Shared discussion controls are intentional.
 */
@media (max-width: 800px) {
  /* Matching lanes remain adjacent, even at 320px. Each lane can be browsed
   * without losing the other lane's place or shuttling down the whole page.
   * No card text is clamped and the existing selection/preview actions remain.
   */
  .minigame-page .ttv-matching {
    width: calc(100% - 1.5rem);
    padding-block: 1.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .minigame-page .ttv-matching h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.2;
  }
  .minigame-page .ttv-matching__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .minigame-page .ttv-matching__toolbar select {
    min-width: 0;
    width: 100%;
    min-height: 3rem;
    font-size: 1rem;
  }
  .minigame-page .ttv-matching__metrics { gap: .5rem; }
  .minigame-page .ttv-matching__metrics span {
    max-width: 100%;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
  }
  .minigame-page .ttv-matching__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: .5rem;
    margin-top: 1rem;
  }
  .minigame-page .ttv-matching__column {
    padding: .375rem;
    border-radius: .75rem;
  }
  .minigame-page .ttv-matching__column > h2 {
    margin: .375rem .25rem .5rem;
    font-size: 1rem;
    line-height: 1.4;
  }
  .minigame-page .ttv-matching__cards {
    gap: .5rem;
    align-content: start;
    max-height: min(65vh, 32rem);
    max-height: min(65svh, 32rem);
    overflow-y: auto;
    padding: .25rem;
    scroll-padding-block: .5rem;
    scrollbar-width: thin;
  }
  .minigame-page .ttv-matching__card-row {
    display: grid;
    gap: .5rem;
  }
  .minigame-page .ttv-matching__card,
  .minigame-page .ttv-matching__card-row > .ttv-matching__card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: .375rem;
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: .5rem;
    font-size: 1rem;
    line-height: 1.4;
  }
  .minigame-page .ttv-matching__card img {
    width: 100%;
    height: 3rem;
    object-fit: contain;
  }
  .minigame-page .ttv-matching__image-preview {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: .375rem;
    font-size: .875rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .minigame-page .ttv-matching__cards :focus-visible {
    outline: 3px solid var(--ttv-match-ink, #17334a);
    outline-offset: 1px;
  }
  .minigame-page .ttv-matching__button {
    min-height: 3rem;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .minigame-page .ttv-matching__prize { padding: 1rem; }
  .minigame-page .ttv-matching__prize input:not([type="checkbox"]) {
    min-width: 0;
    min-height: 3rem;
    font-size: 1rem;
  }
  .minigame-page .ttv-matching__consent { padding-block: .5rem; }
  .minigame-page .ttv-matching__consent input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .25rem;
  }

  /* Dialogs use border-box dimensions, safe-area breathing room and contained
   * images; their native open/hidden state and keyboard behavior are retained.
   */
  .minigame-page .ttv-matching__preview,
  .travel-map-page .ttv-travel-map__preview {
    box-sizing: border-box;
    width: calc(100% - 1.5rem);
    max-width: 36rem;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-wrap: anywhere;
  }
  .minigame-page .ttv-matching__preview-header,
  .travel-map-page .ttv-travel-map__preview-header {
    align-items: flex-start;
    gap: .75rem;
  }
  .minigame-page .ttv-matching__preview-header h2,
  .travel-map-page .ttv-travel-map__preview-header h3 {
    min-width: 0;
    font-size: 1.125rem;
    line-height: 1.5;
  }
  .travel-map-page .ttv-travel-map__preview-header form { flex-shrink: 0; }
  .minigame-page .ttv-matching__preview-close { min-width: 2.75rem; }
  .minigame-page .ttv-matching__preview-image { max-height: 55dvh; }
  .minigame-page .ttv-matching__preview-help,
  .minigame-page .ttv-matching__preview-status { font-size: 1rem; }

  .travel-map-page .ttv-travel-map {
    box-sizing: border-box;
    min-height: 0;
    padding: 1.5rem .75rem 3rem;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .travel-map-page .ttv-travel-map h1 {
    max-width: 17ch;
    font-size: clamp(2rem, 8.5vw, 3.5rem);
    line-height: 1.18;
    letter-spacing: -.025em;
  }
  .travel-map-page .ttv-travel-map__workspace { margin-top: 1.5rem; }
  .travel-map-page .ttv-travel-map__profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .travel-map-page .ttv-travel-map__profile input,
  .travel-map-page .ttv-travel-map__export-options select {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    font-size: 1rem;
  }
  .travel-map-page .ttv-travel-map__profile p { margin: 0; }
  .travel-map-page .ttv-travel-map__layout { grid-template-columns: minmax(0, 1fr); }
  .travel-map-page .ttv-travel-map__visual,
  .travel-map-page .ttv-travel-map__catalog { padding: .75rem; }
  .travel-map-page .ttv-travel-map__catalog legend { max-width: 100%; }
  .travel-map-page .ttv-travel-map__canvas { min-height: 0; }
  .travel-map-page .ttv-travel-map__choices {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: .5rem;
  }
  .travel-map-page .ttv-travel-map__choice {
    min-width: 0;
    min-height: 3rem;
    padding: .5rem;
    line-height: 1.5;
  }
  .travel-map-page .ttv-travel-map__choice input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
  }
  .travel-map-page .ttv-travel-map__button,
  .travel-map-page .ttv-travel-map__archipelago-choice {
    min-height: 3rem;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .travel-map-page .ttv-travel-map__profile input:focus-visible,
  .travel-map-page .ttv-travel-map__export-options select:focus-visible,
  .travel-map-page .ttv-travel-map__button:focus-visible,
  .travel-map-page .ttv-travel-map__archipelago-choice:focus-visible,
  .travel-map-page .ttv-travel-map__choice:focus-within {
    outline: 3px solid var(--ttv-ink, #17334a);
    outline-offset: 2px;
  }

  /* Server-rendered full articles/catalogues, rather than homepage readers. */
  main.ttv-client-article {
    width: calc(100% - 1.5rem);
    margin-block: 1rem 2rem;
    padding: clamp(.875rem, 3.5vw, 1.5rem);
    font-size: 1rem;
    line-height: 1.8;
  }
  main.ttv-client-article h1,
  .province-profile h1,
  .ttv-seo-catalogue h1 {
    margin-block: .75rem 1rem;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  main.ttv-client-article :is(h2, h3),
  .province-profile :is(h2, h3) { line-height: 1.4; }
  main.ttv-client-article :is(p, li),
  .province-profile :is(p, li) {
    overflow-wrap: anywhere;
    text-align: start;
  }
  main.ttv-client-article :is(ul, ol),
  .province-profile :is(ul, ol) { padding-inline-start: 1.25rem; }
  main.ttv-client-article :is(figure, blockquote),
  .province-profile :is(figure, blockquote) { margin-inline: 0; }
  main.ttv-client-article :is(img, video, iframe, audio),
  .province-profile :is(img, video, iframe, audio) { max-width: 100%; }
  main.ttv-client-article :is(img, video),
  .province-profile :is(img, video) { height: auto; }
  main.ttv-client-article :is(pre, table),
  .province-profile :is(pre, table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .single-ttv_province #main {
    width: calc(100% - 1.5rem);
    margin-block: 1rem 2rem;
  }
  .province-profile { font-size: 1rem; line-height: 1.8; }
  .province-profile nav ul { padding: 0; }
  .province-profile nav a {
    max-width: 100%;
    padding: .625rem .875rem;
    line-height: 1.5;
  }
  .province-profile details { scroll-margin-top: 6rem; }
  .province-profile summary { padding: 1rem .75rem; }
  .province-profile details > section { padding: 0 .75rem 1rem; }
  .ttv-seo-catalogue {
    margin-block: 1.25rem 2rem;
    padding-inline: .75rem;
  }
  .ttv-seo-catalogue-grid { gap: 1rem; }
  .ttv-seo-catalogue-card > div { padding: 1rem; }
  .ttv-seo-catalogue-card img { height: auto; }
  .ttv-seo-catalogue-card h2 { font-size: 1.5rem; line-height: 1.4; }
  .ttv-seo-catalogue-tabs,
  .ttv-seo-catalogue-pagination { gap: .5rem; margin-block: 1rem; }
  .ttv-seo-catalogue-tabs a,
  .ttv-seo-catalogue-pagination a {
    max-width: 100%;
    min-height: 3rem;
    padding: .625rem .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .ttv-seo-breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
  .ttv-seo-breadcrumbs a { display: inline-block; padding-block: .5rem; }

  /* Shared discussion and read-more affordances, including native reports. */
  /* A bare 1fr track has an automatic min-content floor. In the 320px story
   * footer it widened the comment form beyond the clipped reader viewport. */
  .story-reader__footer { grid-template-columns: minmax(0, 1fr); }
  .story-reader__footer > * { min-width: 0; max-width: 100%; }
  .province-discussion,
  .ttv-client-article .ttv-client-discussion {
    min-width: 0;
    padding: 1rem 0;
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .ttv-comments-content .province-comment { padding: .875rem .75rem; }
  .province-comment__meta { flex-wrap: wrap; gap: .25rem .75rem; }
  .province-comments__form label,
  .province-discussion label,
  .ttv-client-discussion label { line-height: 1.5; overflow-wrap: anywhere; }
  .province-comments__form :is(input, textarea),
  .province-discussion :is(input, textarea),
  .ttv-client-article .ttv-client-discussion :is(input, textarea),
  main.ttv-client-article .post-password-form input {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 3rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  .province-comments__form textarea,
  .province-discussion textarea,
  .ttv-client-discussion textarea { resize: vertical; min-height: 8rem; }
  .province-comments__form .form-help { font-size: .875rem; line-height: 1.65; }
  .province-comments__form button,
  .province-discussion button,
  .ttv-client-article .ttv-client-discussion button,
  .ttv-comments-toggle,
  .ttv-comments-compose > summary,
  .ttv-client-discussion [data-report-details] > summary,
  .ttv-comment-more {
    box-sizing: border-box;
    min-width: 2.75rem;
    max-width: 100%;
    min-height: 2.75rem;
    padding: .625rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ttv-comments-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    align-items: stretch;
  }
  .ttv-comments-pagination .ttv-comments-page {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: .875rem;
  }
  .ttv-client-article .ttv-comments-pagination button,
  .province-discussion .ttv-comments-pagination button { margin: 0; }
  .province-comments__form :focus-visible,
  .ttv-comments-content :focus-visible,
  .ttv-client-discussion [data-report-details] > summary:focus-visible {
    outline: 3px solid var(--ink-strong, #17334a);
    outline-offset: 2px;
  }
  .province-discussion dialog {
    box-sizing: border-box;
    width: calc(100% - 1.5rem);
    max-width: 32rem;
    max-height: calc(100dvh - 2rem);
    padding: 1rem;
  }
}