/**
 * Issue 153 task_2: タブレット・スマートフォン向けレイアウト。
 * MacBookを含む1280px以上の商談画面を変えないため、可視スタイルは必ず
 * max-width: 1279px の条件内だけで上書きする。
 */

@media (max-width: 1279px) {
  html,
  body,
  .app-shell,
  .screen-root,
  .screen {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* タッチ端末ではロゴと再開始だけを残し、画面本体へ横幅を返す。 */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    height: 56px;
    padding: 0 20px;
  }

  .breadcrumbs,
  .status-pill,
  .brand__company {
    display: none;
  }

  .brand,
  #reset-demo {
    min-height: 44px;
  }

  .brand__mark {
    margin-right: 10px;
  }

  .topbar__actions {
    min-width: 0;
    gap: 0;
  }

  #reset-demo {
    padding-inline: 12px;
    white-space: nowrap;
  }

  /* zoom拡大は狭幅で横超過を生むため、task_2対象画面だけ等倍へ戻す。 */
  .screen-root--industry,
  .screen-root--usecases,
  .screen-root--step1,
  .screen-root--step2,
  .screen-root--closing {
    --screen-zoom: 1;
    min-height: calc(100dvh - 56px);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .screen-root .screen {
    min-height: auto;
    max-width: 100%;
    padding: 24px;
  }

  .screen-heading {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .screen-heading__title {
    font-size: 32px;
  }

  .screen-heading__subtitle {
    font-size: 16px;
  }

  /* 下部は進行に必要な二操作だけを、親指で押せる48pxボタンとして固定する。 */
  .experience-footer {
    display: block;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  }

  .experience-footer > .footer-action--quiet,
  .experience-footer > .footer-context,
  .experience-footer > .progress-dots {
    display: none;
  }

  .footer-controls {
    display: grid;
    width: 100%;
    height: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .footer-action,
  .footer-action--primary {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    font-size: 16px;
  }

  .footer-action--primary {
    border-color: var(--color-accent-text);
  }

  .experience-footer .keycap {
    display: none;
  }

  .footer-action__arrow {
    font-size: 16px;
  }

  /* 業界はiPad縦横の双方で2列×3行を維持する。 */
  .screen--industry {
    padding-top: 20px;
  }

  .industry-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 140px);
    gap: 14px;
  }

  .industry-card--featured {
    width: 100%;
    height: 140px;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px 18px;
  }

  .industry-card__scene {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* 課題カードは一件を二段で読み、形式数が多い場合もカード内で折り返す。 */
  .screen-root--usecases .screen--usecases {
    padding: 20px 24px 24px;
  }

  .screen-root--usecases .screen--usecases .screen-heading {
    margin-bottom: 16px;
  }

  .usecase-row {
    height: auto;
    min-height: 96px;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 12px 16px;
  }

  .usecase-row__number {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .usecase-row__title {
    grid-column: 2;
    grid-row: 1;
  }

  .usecase-row__answer-kind {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: start;
  }

  .usecase-row__action {
    grid-column: 4;
    grid-row: 1;
  }

  .role-pill {
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
  }

  .file-types {
    min-width: 0;
    grid-column: 3 / 5;
    grid-row: 2;
    justify-content: flex-end;
  }

  .file-type {
    padding: 3px 6px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
  }

  /* ①は保管場所を2列で見せ、収集結果をその下へ置いて横超過を防ぐ。 */
  .screen--experience {
    padding: 16px 20px 24px;
  }

  .experience-step__button {
    min-height: 44px;
  }

  .screen--experience .screen-heading__title {
    font-size: 26px;
  }

  .scatter-layout {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .scatter-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .scatter-lane {
    overflow: visible;
  }

  .scatter-collector {
    min-height: 0;
  }

  .scatter-fragments {
    flex: 0 0 auto;
  }

  .scatter-card__body strong,
  .scatter-card__version,
  .scatter-card q,
  .scatter-fragment q {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  /* ②はiPadでは左右比較を保ちつつ、固定高さを外して内容切れをなくす。 */
  .naive-layout {
    height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
    align-items: stretch;
    gap: 12px;
  }

  .naive-chat,
  .naive-review {
    min-height: 330px;
  }

  .naive-annotation__label,
  .naive-annotation__correct {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .naive-check {
    min-height: 44px;
  }

  /* closingは画像幅と条件の読み順を一本化し、将来の主CTAも常に上へ置く。 */
  .screen-root .screen--closing {
    padding: 16px 24px 24px;
  }

  .screen--closing .closing-heading {
    margin-bottom: 12px;
  }

  .closing-illustration,
  .closing-facts {
    width: 100%;
    max-width: 100%;
  }

  .closing-scene__heading {
    padding-inline: 6px;
    white-space: normal;
  }

  .closing-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
  }

  .closing-fact {
    min-height: 88px;
    margin: 0;
  }

  .closing-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }

  .closing-actions > *,
  .screen--closing .closing-actions .button {
    width: 100%;
    min-height: 48px;
  }

  .closing-actions .button--primary {
    order: -1;
  }

  /*
   * 補助ラベルを14pxへ揃え、タブレットで意味のない文字サイズ差が
   * 視線を分断しないようにする。スマートフォンの14px下限とも整合する。
   */
  .screen--experience .screen-heading__eyebrow,
  .experience-step__number,
  .crosscheck-table__corner,
  .crosscheck-column-header,
  .crosscheck-column-header__version,
  .crosscheck-row__label,
  .crosscheck-cell__value,
  .evidence-item__number {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .brand__mark {
    width: 34px;
    height: 34px;
    margin-right: 8px;
  }

  .brand__name {
    overflow: visible;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: clip;
  }

  #reset-demo {
    gap: 6px;
    padding-inline: 10px;
  }

  .screen-root .screen,
  .screen-root--usecases .screen--usecases,
  .screen-root .screen--closing {
    padding: 16px 14px 24px;
  }

  .screen-heading {
    margin-bottom: 16px;
  }

  .screen-heading__eyebrow,
  .screen-heading__subtitle {
    font-size: 14px;
  }

  .screen-heading__title {
    font-size: 26px;
    line-height: 1.35;
  }

  .experience-footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .footer-controls {
    gap: 8px;
  }

  /* スマートフォンは6業界を112pxカードで縦に読み流せる形へ切り替える。 */
  .screen--industry {
    padding-top: 14px;
  }

  .industry-featured-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, 112px);
    gap: 10px;
  }

  .industry-card--featured {
    height: 112px;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px 14px;
  }

  .industry-card__name {
    font-size: 17px;
  }

  .industry-card__scene-label,
  .industry-card__scene {
    font-size: 14px;
  }

  /* 一行目を番号・課題・型、二行目を困る人・形式だけに固定する。 */
  .usecase-list {
    gap: 10px;
  }

  .usecase-row {
    min-height: 112px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 8px;
    padding: 12px;
  }

  .usecase-row__number {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
  }

  .usecase-row__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 14px;
    line-height: 1.45;
  }

  .usecase-row__answer-kind {
    grid-column: 3;
    grid-row: 1;
    font-size: 14px;
  }

  .usecase-row__action {
    display: none;
  }

  .role-pill {
    min-height: 28px;
    width: 42%;
    grid-column: 1 / 4;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    overflow: visible;
    padding: 3px 6px;
    font-size: 14px;
    text-overflow: clip;
  }

  .role-pill span {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .file-types {
    width: 56%;
    grid-column: 1 / 4;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    justify-content: flex-end;
    gap: 4px;
  }

  .file-type {
    gap: 2px;
    padding: 3px 5px;
    font-size: 14px;
  }

  /* ステップ名は2行まで見せ、各タブの44pxタップ標的を維持する。 */
  .experience-step__button {
    min-height: 56px;
    gap: 5px;
    padding: 5px 6px;
    font-size: 14px;
    line-height: 1.3;
  }

  .experience-step__number {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 14px;
  }

  .screen--experience .screen-heading {
    margin-bottom: 8px;
    padding-right: 68px;
  }

  .screen--experience .screen-heading__eyebrow {
    font-size: 14px;
  }

  .screen--experience .screen-heading__title {
    font-size: 22px;
  }

  .screen--experience[data-step="3"] .experience-heading {
    display: block;
    min-height: 0;
    padding-right: 68px;
  }

  .screen--experience[data-step="3"] .screen-heading__title {
    overflow: visible;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
  }

  .experience-heading__answer-kind {
    bottom: 5px;
    font-size: 14px;
  }

  .question-card--compact {
    min-height: 68px;
    gap: 10px;
    padding: 10px 12px;
  }

  .question-card__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .question-card__meta,
  .question-card p {
    font-size: 14px;
  }

  /* ①は保管場所を一列にし、省略されていた断片文も折り返して読めるようにする。 */
  .scatter-lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  .scatter-lane__heading {
    min-height: 44px;
  }

  .scatter-lane__heading h2,
  .scatter-card__body strong,
  .scatter-card__version,
  .scatter-card q,
  .scatter-collector__copy p,
  .scatter-fragment q {
    font-size: 14px;
  }

  .scatter-card__body strong,
  .scatter-card__version,
  .scatter-card q,
  .scatter-fragment q {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .scatter-card {
    min-height: 76px;
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .scatter-card__thumbnail {
    width: 72px;
    min-height: 76px;
  }

  .scatter-collector {
    padding: 14px;
  }

  .scatter-fragment {
    min-height: 44px;
    height: auto;
  }

  /* ②は回答を横幅いっぱいにし、照合注釈を直後へ積む。 */
  .naive-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .naive-chat,
  .naive-review {
    min-height: 0;
    overflow: visible;
  }

  .naive-chat__top {
    min-height: 44px;
    height: auto;
    padding: 8px 12px;
    font-size: 14px;
  }

  .naive-source-state,
  .chat-message__label,
  .naive-query > span,
  .naive-answer__label,
  .naive-annotation-legend,
  .naive-summary,
  .naive-annotation__label,
  .naive-annotation__correct,
  .naive-footnote {
    font-size: 14px;
  }

  .naive-query {
    margin: 12px 12px 0 16%;
  }

  .naive-answer {
    width: 100%;
    margin: 12px 0 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .naive-query p,
  .naive-answer__text,
  .naive-closing {
    font-size: 16px;
  }

  .scatter-fragment__number,
  .naive-annotation__number,
  .screen--experience sup {
    font-size: 14px;
  }

  .naive-review {
    padding: 12px;
  }

  .naive-annotation {
    min-height: 48px;
  }

  .naive-annotation__label,
  .naive-annotation__correct {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .naive-check {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  /* 見出しは画像の三分割と対応させ、条件とCTAは一列で大きく押せる。 */
  .screen--closing .closing-heading .screen-heading__eyebrow {
    font-size: 14px;
  }

  .screen--closing .closing-heading .screen-heading__title {
    font-size: 24px;
  }

  .closing-scenes--headings {
    min-height: 60px;
    align-items: center;
  }

  .closing-scene__heading {
    font-size: 14px;
    line-height: 1.4;
  }

  .closing-scene__detail,
  .closing-fact span,
  .closing-action-sentence {
    font-size: 14px;
  }

  .closing-fact strong {
    font-size: 22px;
  }
}

/* Issue 153 task_3: ③はタブレットで58/42の二面、スマートフォンで一面タブにする。 */
@media (max-width: 1279px) {
  .screen-root--step3 {
    --screen-zoom: 1;
    min-height: calc(100dvh - 56px);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .screen-root--step3 .screen {
    min-height: auto;
    max-width: 100%;
  }

  .screen--experience[data-step="3"] .experience-stage,
  .screen--experience[data-step="3"] .grounded-layout,
  .screen--experience[data-step="3"] .grounded-answer,
  .screen--experience[data-step="3"] .grounded-evidence-pane {
    min-width: 0;
    max-width: 100%;
  }

  /* iPad縦横とも、左を読む面・右を確かめる面の58/42比率を保つ。 */
  .screen--experience[data-step="3"] .grounded-layout {
    width: 100%;
    height: clamp(500px, calc(100dvh - 236px), 720px);
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 12px;
  }

  .screen--experience[data-step="3"] .grounded-evidence-pane {
    grid-template-rows: minmax(180px, 42%) minmax(280px, 1fr);
  }

  .screen--experience[data-step="3"] .evidence-list-panel {
    display: flex;
    min-height: 0;
    align-self: stretch;
    flex-direction: column;
  }

  .screen--experience[data-step="3"] .evidence-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .screen--experience[data-step="3"] .grounded-panel-heading,
  .screen--experience[data-step="3"] .evidence-list__header,
  .screen--experience[data-step="3"] .evidence-viewer__header {
    height: auto;
    min-height: 44px;
  }

  .screen--experience[data-step="3"] .evidence-viewer__document {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .screen--experience[data-step="3"] .experience-step__button,
  .screen--experience[data-step="3"] .grounded-questions-button,
  .screen--experience[data-step="3"] .evidence-original-link,
  .screen--experience[data-step="3"] .evidence-item,
  .screen--experience[data-step="3"] .experience-completion .button {
    min-height: 44px;
  }

  .screen--experience[data-step="3"] .evidence-item__metadata {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 5px;
  }

  .screen--experience[data-step="3"] .evidence-item__location {
    max-width: 100%;
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .screen--experience[data-step="3"] .evidence-link {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  /* セル全体が44pxのボタンなので、セル内の根拠番号は視覚径だけを抑える。 */
  .screen--experience[data-step="3"] .crosscheck-cell__evidence {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  /* 右ビューアの表は5列をペイン内へ収め、別の横スクロール面を増やさない。 */
  .screen--experience[data-step="3"] .excel-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* 表だけを横へ動かし、ページ本体と見出し・結論は常に画面幅へ留める。 */
  .crosscheck-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-control);
    overscroll-behavior-x: contain;
    scrollbar-color: var(--color-accent) var(--color-background);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .crosscheck-table-scroll:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }

  .crosscheck-table-scroll .crosscheck-table {
    width: 100%;
    min-width: 620px;
  }

  .crosscheck-table-scroll .crosscheck-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-background);
  }

  .crosscheck-table-scroll .crosscheck-table thead tr > :first-child {
    z-index: 3;
  }

  /* 680基準のSVGはviewBoxを維持したまま、左カード実幅へ等比縮小する。 */
  .screen--experience[data-step="3"] .diagram-stage,
  .screen--experience[data-step="3"] .diagram-svg {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .screen--experience[data-step="3"] .diagram-stage {
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  .screen-root--step3 {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  .screen--experience[data-step="3"] {
    padding-right: 14px;
    padding-bottom: 24px;
    padding-left: 14px;
  }

  .screen--experience[data-step="3"] .experience-step__button {
    min-height: 56px;
  }

  /* タブは48px操作バーの直上に固定し、回答と根拠を同じ幅で切り替える。 */
  .grounded-mobile-tabs {
    position: fixed;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 0;
    z-index: 20;
    display: grid;
    width: 100%;
    height: 44px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
  }

  .grounded-mobile-tab {
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 16px;
    font-weight: 700;
  }

  .grounded-mobile-tab + .grounded-mobile-tab {
    border-left: 1px solid var(--color-border);
  }

  .grounded-mobile-tab[aria-selected="true"] {
    border-bottom-color: var(--color-accent-text);
    color: var(--color-accent-text);
  }

  .screen--experience[data-step="3"] .grounded-layout {
    display: block;
    height: auto;
    min-height: 0;
  }

  .screen--experience[data-step="3"] [data-mobile-panel][hidden] {
    display: none !important;
  }

  .screen--experience[data-step="3"] .grounded-answer {
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .screen--experience[data-step="3"] .grounded-panel-heading {
    flex-wrap: wrap;
    padding: 6px 10px;
  }

  .screen--experience[data-step="3"] .grounded-panel-tools {
    flex-wrap: wrap;
  }

  .screen--experience[data-step="3"] .grounded-questions-button,
  .screen--experience[data-step="3"] .evidence-original-link {
    min-height: 44px;
    padding: 6px 8px;
  }

  .screen--experience[data-step="3"] .grounded-answer__scroll {
    flex: 0 0 auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .screen--experience[data-step="3"] .grounded-chat {
    padding: 10px;
  }

  .screen--experience[data-step="3"] .grounded-chat .chat-message__body {
    max-width: calc(100% - 34px);
    padding: 12px;
  }

  .screen--experience[data-step="3"] .grounded-chat .chat-message--user .chat-message__body {
    margin-right: 0;
  }

  .screen--experience[data-step="3"] .grounded-answer__scroll--format {
    display: flex;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .screen--experience[data-step="3"] .grounded-answer__scroll--format > .question-card {
    position: static;
  }

  .screen--experience[data-step="3"] .crosscheck-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .screen--experience[data-step="3"] .crosscheck-summary {
    justify-content: flex-start;
  }

  .screen--experience[data-step="3"] .crosscheck-table-scroll {
    touch-action: pan-x pinch-zoom;
  }

  .screen--experience[data-step="3"] .crosscheck-table {
    table-layout: fixed;
    font-size: 14px;
  }

  .screen--experience[data-step="3"] .crosscheck-cell__body {
    min-height: 44px;
  }

  .screen--experience[data-step="3"] .evidence-link {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  .screen--experience[data-step="3"] .crosscheck-cell__evidence {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .screen--experience[data-step="3"] .grounded-bottom {
    height: 104px;
    flex: 0 0 104px;
  }

  .screen--experience[data-step="3"] .business-reason,
  .screen--experience[data-step="3"] .experience-completion {
    align-content: center;
    padding: 8px 10px;
  }

  .screen--experience[data-step="3"] .experience-completion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .screen--experience[data-step="3"] .experience-completion > strong {
    grid-column: 1 / -1;
    margin: 0;
  }

  .screen--experience[data-step="3"] .experience-completion .button {
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
  }

  /* 根拠一覧は内部で選択行を追い、ビューアはその直下で十分な高さを持つ。 */
  .screen--experience[data-step="3"] .grounded-evidence-pane {
    width: 100%;
    height: auto;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .screen--experience[data-step="3"] .evidence-list-panel {
    display: flex;
    max-height: min(320px, 40dvh);
    flex-direction: column;
  }

  .screen--experience[data-step="3"] .evidence-list__header {
    height: auto;
    min-height: 52px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 6px 10px;
  }

  .screen--experience[data-step="3"] .evidence-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .screen--experience[data-step="3"] .evidence-item,
  .screen--experience[data-step="3"] .crosscheck-layout .evidence-item,
  .screen--experience[data-step="3"] .diagram-layout .evidence-item {
    height: 56px;
    min-height: 56px;
    grid-template-columns: 24px 58px minmax(0, 1fr);
    padding: 7px 8px;
  }

  .screen--experience[data-step="3"] .evidence-item--active,
  .screen--experience[data-step="3"] .crosscheck-layout .evidence-item--active,
  .screen--experience[data-step="3"] .diagram-layout .evidence-item--active {
    height: 76px;
    min-height: 76px;
  }

  .screen--experience[data-step="3"] .evidence-item__metadata {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 5px;
  }

  .screen--experience[data-step="3"] .evidence-item__location {
    grid-column: 1 / -1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .screen--experience[data-step="3"] .evidence-viewer {
    min-height: 360px;
  }

  .screen--experience[data-step="3"] .evidence-viewer__header {
    display: grid;
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 8px;
  }

  .screen--experience[data-step="3"] .evidence-viewer__body {
    min-height: 280px;
    max-height: 55dvh;
    overflow: auto;
  }

  .screen--experience[data-step="3"] .viewer-toolbar {
    min-height: 44px;
    flex-wrap: wrap;
  }

  .screen--experience[data-step="3"] .excel-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
  }

  .screen--experience[data-step="3"] .excel-cell {
    min-height: 44px;
    padding: 3px;
  }

  .screen--experience[data-step="3"] .video-viewer {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen--experience[data-step="3"] .video-player-column video {
    max-height: none;
  }

  .screen--experience[data-step="3"] .video-timeline {
    max-height: 220px;
  }

  .screen--experience[data-step="3"] .diff-table {
    width: calc(100% - 12px);
    margin: 6px;
  }

  /* スマートフォンの可視本文と補助情報は14pxを下限に揃える。 */
  .screen--experience[data-step="3"] :where(
    .grounded-panel-heading h2,
    .grounded-scroll-hint,
    .grounded-questions-button,
    .grounded-pipeline__item,
    .mechanical-checks__heading h3,
    .mechanical-checks__count,
    .mechanical-check,
    .business-reason__label,
    .business-reason strong,
    .experience-completion > strong,
    .evidence-list__header h2,
    .evidence-list__status,
    .evidence-item__number,
    .evidence-format,
    .evidence-item__title,
    .evidence-item__version,
    .evidence-item__location,
    .evidence-item__excerpt,
    .evidence-position,
    .evidence-viewer__document,
    .evidence-viewer__location,
    .evidence-original-link,
    .viewer-toolbar,
    .excel-cell__reference,
    .excel-cell__value,
    .code-evidence__line,
    .document-page p,
    .diagram-tags strong,
    .video-jump,
    .video-timeline time,
    .video-timeline strong,
    .video-timeline p,
    .glossary-captions,
    .diff-table th,
    .diff-table td,
    .diff-kind,
    .refusal-card__nearby,
    .refusal-card ul,
    .crosscheck-heading h3,
    .crosscheck-summary,
    .crosscheck-column-header__version,
    .crosscheck-row__label,
    .crosscheck-cell__value,
    .crosscheck-cell__status,
    .crosscheck-conclusion .chat-sentence,
    .diagram-conclusion .chat-sentence
  ) {
    font-size: 14px;
  }
}