/*
 * StudySessionView.swift mobile port.
 * This file is deliberately loaded last. Review geometry and deck motion live
 * here only; generic site styles must not participate in this screen. This
 * composition owns every Review viewport at 899px and below.
 */
@media (max-width: 899px) {
  .review-view {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto !important;
    min-height: 100dvh;
    height: 100dvh;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom));
    overflow: hidden;
    background: var(--canvas);
    font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  .review-header { flex: 0 0 42px; height: 42px; }
  /* Center the progress affordance against the physical phone viewport, not
     * the grid's remaining middle track. Safari can calculate that track
     * differently around its browser chrome than desktop emulation does. */
  .review-header { position:relative; }
  .review-header-center { position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%); }
  #undo-button { grid-column:3; justify-self:end; }
  .circle-button { width: 42px; height: 42px; border: 0; color: #1d1d1d; background: #fff; box-shadow: none; }
  .circle-button .ff-symbol { width: 20px; height: 20px; stroke-width: 3.3; }
  .review-progress { gap: 7px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.64); font-family: "Avenir Next", Avenir, sans-serif; font-size: 16px; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,.07); }
  .review-progress #review-count,.review-progress b { font-family: "Avenir Next", Avenir, sans-serif; font-size: 16px; font-weight: 600; }
  .review-view.is-defend .review-progress { cursor:default; }
  .review-view.is-defend .review-trophy-count { gap:6px; }

  .card-stack { position: relative; flex: 1 1 auto; min-height: min(520px, calc(100dvh - 250px)); height: auto; margin: 0; }
  .flashcard {
    --review-artwork-size: 296px;
    --review-hanzi-row: 76px;
    --review-pinyin-row: 58px;
    --review-hanzi-size: 72px;
    --review-pinyin-size: 40px;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-areas: "art" "hanzi" "pinyin" "footer";
    grid-template-rows: minmax(0,1fr) var(--review-hanzi-row) var(--review-pinyin-row) 72px;
    min-height: min(520px, calc(100dvh - 250px));
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 9px 20px rgba(0,0,0,.10);
    transform-origin: center center;
    transition: transform .22s ease-in, opacity .22s ease-in, background .12s ease;
  }
  .card-stack > #study-card { z-index: 2; }
  .next-flashcard { z-index: 1; transform: scale(.96) translateY(10px); pointer-events: none; }
  .flashcard.is-resetting { transition: none !important; }

  .flashcard > .artwork { grid-area: art; display: flex; align-items: flex-start; justify-content: center; min-width: 0; min-height: 0; width: auto; height: auto; padding-top: 30px; overflow: visible; }
  .flashcard > .artwork > img { display: block; flex: 0 0 var(--review-artwork-size); width: var(--review-artwork-size); height: var(--review-artwork-size); max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.11)); }
  .flashcard > .artwork .card-art-fallback { width: var(--review-artwork-size); height: var(--review-artwork-size); }
  .flashcard > .card-hanzi { grid-area: hanzi; align-self: center; margin: 0; padding: 0 30px; overflow: hidden; color: #1d1d1d; font-family: "Avenir Next", Avenir, "PingFang SC", sans-serif; font-size: var(--review-hanzi-size); font-weight: 700; line-height: 1; letter-spacing: -.05em; text-align: center; white-space: nowrap; }
  .flashcard > .card-pinyin { grid-area: pinyin; align-self: center; margin: 0; padding: 0 30px; color: var(--pinyin); font-family: "Avenir Next", Avenir, sans-serif; font-size: var(--review-pinyin-size); font-weight: 600; line-height: 1; letter-spacing: -.04em; text-align: center; white-space: nowrap; }
  /* With pinyin as the only caption, Swift's vacant character row is not a
     * spacer: pinyin rises to sit just beneath the artwork/hero. */
  .flashcard.shows-artwork:not(.shows-characters).shows-pinyin,
  .flashcard:not(.shows-artwork).shows-characters.shows-pinyin {
    grid-template-areas: "art" "pinyin" "footer";
    grid-template-rows: minmax(0,1fr) calc(var(--review-hanzi-row) + var(--review-pinyin-row)) 72px;
  }
  .flashcard.shows-artwork:not(.shows-characters).shows-pinyin > .card-pinyin,
  .flashcard:not(.shows-artwork).shows-characters.shows-pinyin > .card-pinyin {
    align-self: start;
    padding-top: 12px;
  }
  .flashcard > .card-footer { grid-area: footer; display: grid; grid-template-columns: 1fr 62px; align-items: center; width: 100%; min-height: 0; padding: 0 46px 8px; }
  .card-english { margin: 0; color: rgba(0,0,0,.45); font-family: "Avenir Next", Avenir, sans-serif; font-size: var(--review-english-size,21px); font-weight: 500; line-height: 1; letter-spacing: -.02em; text-align: left; white-space: nowrap; }
  .card-footer button { display: flex; justify-content: flex-end; align-items: center; width: 62px; height: 54px; padding: 0; border: 0; color: var(--audio); background: transparent; }
  .card-footer button:focus-visible { outline: none; }
  .card-footer .ff-symbol { width: 29px; height: 29px; margin: 0; }

  .result-controls { flex: 0 0 62px; display: grid; grid-template-columns: 62px minmax(0,1fr) minmax(0,1fr); gap: 12px; width: 100%; margin: 0; }
  .collect-button,.result-button { height: 62px; border: 0; border-radius: 18px; color: #fff; }
  .collect-button { background: var(--trophy); box-shadow: 0 4px 0 var(--trophy-shadow); }
  .result-button { box-shadow: 0 5px 0 var(--result-shadow); }
  .not-yet { --result-shadow: var(--not-yet-shadow); background: var(--not-yet); }
  .knew-it { --result-shadow: var(--knew-it-shadow); background: var(--knew-it); }
  .result-button .ff-symbol { width: 34px; height: 34px; stroke-width: 3.4; }
  .collect-button .ff-symbol { width: 31px; height: 31px; stroke-width: 3.2; }

  .display-controls { flex: 0 0 47px; display: flex; justify-content: center; gap: 14px; margin: 0; padding-bottom: 2px; }
  .display-controls button { width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.16); border-radius: 50%; font-family: "Avenir Next", Avenir, sans-serif; font-size: 14px; font-weight: 600; }
  .display-controls .ff-symbol { width: 19px; height: 19px; }

  /* A touch tap must not leave the browser's generic black focus rectangle. */
  @media (hover: none) and (pointer: coarse) { button:focus-visible { outline: none; } }
}

/* Named StudySessionView layouts. Each one has a complete, closed grid: an
 * inactive item is removed rather than left invisible in a borrowed row. */
@media (max-width: 899px) {
  .flashcard > .artwork,
  .flashcard > .card-hanzi,
  .flashcard > .card-pinyin,
  .flashcard > .card-footer { display: none; }
  .flashcard > .artwork { grid-area: art; }
  .flashcard > .card-hanzi { grid-area: hanzi; }
  .flashcard > .card-pinyin { grid-area: pinyin; }
  .flashcard > .card-footer { grid-area: footer; }

  .flashcard.layout-full { grid-template-areas: "art" "hanzi" "pinyin" "footer"; grid-template-rows: minmax(0,1fr) var(--review-hanzi-row) var(--review-pinyin-row) 72px; }
  .flashcard.layout-full > .artwork,.flashcard.layout-full > .card-hanzi,.flashcard.layout-full > .card-pinyin,.flashcard.layout-full > .card-footer { display: flex; }
  .flashcard.layout-full > .artwork { display: flex; }
  .flashcard.layout-full > .card-hanzi,.flashcard.layout-full > .card-pinyin { display: block; }
  .flashcard.layout-full > .card-footer { display: grid; }
  /* Let each full-card row centre itself. Previous upward offsets made the
     artwork, labels, and footer read as a top-heavy composition on phones. */
  .flashcard.layout-full > .artwork,.flashcard.layout-full > .card-hanzi,.flashcard.layout-full > .card-pinyin { transform:none; }

  /* Mandarin and Korean's two-label phone card reads as one visual group.
     Lift that group slightly toward the larger illustration. Japanese owns a
     separate label frame, and one-label courses never use `layout-full`. */
  .flashcard.layout-full:not(.is-japanese-three-track) > .card-hanzi,
  .flashcard.layout-full:not(.is-japanese-three-track) > .card-pinyin {
    transform:translateY(-12px);
  }

  .flashcard.layout-art-characters { grid-template-areas: "art" "hanzi" "footer"; grid-template-rows: minmax(0,1fr) var(--review-hanzi-row) 72px; }
  .flashcard.layout-art-characters > .artwork { display: flex; }
  .flashcard.layout-art-characters > .card-hanzi { display: block; }
  .flashcard.layout-art-characters > .card-footer { display: grid; }

  .flashcard.layout-art-pinyin { grid-template-areas: "art" "pinyin" "footer"; grid-template-rows: minmax(0,1fr) var(--review-pinyin-row) 72px; }
  .flashcard.layout-art-pinyin > .artwork { display: flex; }
  .flashcard.layout-art-pinyin > .card-pinyin { display: block; align-self: start; padding-top: 12px; }
  .flashcard.layout-art-pinyin > .card-footer { display: grid; }

  .flashcard.layout-art-only { grid-template-areas: "art" "footer"; grid-template-rows: minmax(0,1fr) 72px; }
  .flashcard.layout-art-only > .artwork { display: flex; }
  .flashcard.layout-art-only > .card-footer { display: grid; }

  .flashcard.layout-characters-pinyin { grid-template-areas: "art" "pinyin" "footer"; grid-template-rows: minmax(0,1fr) var(--review-pinyin-row) 72px; }
  .flashcard.layout-characters-pinyin > .artwork { display: flex; width: 100%; height: 100%; padding-top: 0; }
  .flashcard.layout-characters-pinyin > .card-pinyin { display: block; align-self: start; padding-top: 12px; }
  .flashcard.layout-characters-pinyin > .card-footer { display: grid; }

  .flashcard.layout-characters-hero,.flashcard.layout-pinyin-hero,.flashcard.layout-audio-hero { grid-template-areas: "art" "footer"; grid-template-rows: minmax(0,1fr) 72px; }
  .flashcard.layout-characters-hero > .artwork,.flashcard.layout-pinyin-hero > .artwork,.flashcard.layout-audio-hero > .artwork { display: flex; width: 100%; height: 100%; padding-top: 0; }
  .flashcard.layout-characters-hero > .card-footer,.flashcard.layout-pinyin-hero > .card-footer,.flashcard.layout-audio-hero > .card-footer { display: grid; }

  .flashcard.layout-characters-pinyin > .artwork > img,.flashcard.layout-characters-hero > .artwork > img,.flashcard.layout-pinyin-hero > .artwork > img,.flashcard.layout-audio-hero > .artwork > img { display: none; }
  .flashcard.layout-characters-pinyin .card-art-fallback,.flashcard.layout-characters-hero .card-art-fallback,.flashcard.layout-pinyin-hero .card-art-fallback,.flashcard.layout-audio-hero .card-art-fallback { display: grid; width: 100%; height: 100%; }
  .flashcard.layout-characters-pinyin .fallback-disc,.flashcard.layout-characters-hero .fallback-disc { display: block; }
  .flashcard.layout-characters-pinyin [id$="hero-hanzi"],.flashcard.layout-characters-hero [id$="hero-hanzi"] { display: block; max-width: 100%; margin: 0; overflow: hidden; font-family: "Avenir Next", Avenir, "PingFang SC", sans-serif; font-size: var(--review-hero-hanzi-size) !important; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; }
  .flashcard.layout-pinyin-hero [id$="hero-pinyin"] { display: none !important; }
  .flashcard.layout-audio-hero [id$="hero-audio-button"] { display: block; }

  .flashcard.layout-art-characters > .card-hanzi { font-size: var(--review-hanzi-size); }
  .flashcard.layout-art-pinyin > .card-pinyin,.flashcard.layout-characters-pinyin > .card-pinyin { font-size: var(--review-pinyin-size); }

  /* No-art language cards are a deliberately compact pair, rather than two
     * independent screen-centred elements.  Solo pinyin retains its language
     * colour and rises slightly into the same visual zone. */
  .flashcard.layout-characters-pinyin [id$="hero-hanzi"] { transform: translateY(36px); }
  .flashcard.layout-characters-pinyin > .card-pinyin { transform: translateY(-42px); }
  .flashcard.layout-pinyin-hero > .card-pinyin { display: block; visibility: visible !important; grid-area: art; align-self: center; padding: 0 30px; color: var(--pinyin); font-family: "Avenir Next", Avenir, sans-serif; font-size: var(--review-pinyin-size); font-weight: 600; transform: translateY(32px); }

  /* Audio-only is a real hero state: the fallback button owns the centre,
     * while the footer keeps only a centred English label. */
  .flashcard.layout-audio-hero .card-art-fallback { display: grid; place-items: center; }
  .flashcard.layout-audio-hero .card-art-fallback [id$="hero-audio-button"] { display: grid !important; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; color: var(--audio); background: transparent; }
  .flashcard.layout-audio-hero .card-art-fallback [id$="hero-audio-button"] .ff-symbol { width: clamp(64px,22vw,120px); height: clamp(64px,22vw,120px); }
  .flashcard.layout-audio-hero > .card-footer { grid-template-columns: 1fr; }
  .flashcard.layout-audio-hero > .card-footer .card-english { text-align: center; transform: translateY(-18px); }
  .flashcard.layout-audio-hero > .card-footer > button { display: none; }

  /* No-photo phone cards are text compositions, not a coloured-disc state.
   * Both physical card slots use different IDs, so target their shared suffix
   * rather than allowing the queued card's native button to leak through. */
  .flashcard .card-art-fallback .fallback-disc { display: none !important; }
  .flashcard .card-art-fallback [id$="hero-audio-button"] { display: none !important; }
  .flashcard.layout-audio-hero .card-art-fallback [id$="hero-audio-button"] { display: block !important; }
}

/* Phone layout firewall. native-overrides.css predates the three-mode Review
 * contract and still contains a min-width:760px horizontal card. 760–899px is
 * nevertheless phone territory, so explicitly clear every property that
 * horizontal rule owns.  Keep this beside the phone composition rather than
 * trying to make a later desktop rule "win" by accident. */
@media (min-width: 760px) and (max-width: 899px) {
  .review-view .card-stack {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: min(520px, calc(100dvh - 250px)) !important;
  }

  .review-view .flashcard {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    padding: 0 !important;
    align-content: stretch !important;
  }

  .review-view .flashcard.layout-full {
    grid-template-areas: "art" "hanzi" "pinyin" "footer" !important;
    grid-template-rows: minmax(0,1fr) var(--review-hanzi-row) var(--review-pinyin-row) 72px !important;
  }
  .review-view .flashcard.layout-art-characters {
    grid-template-areas: "art" "hanzi" "footer" !important;
    grid-template-rows: minmax(0,1fr) var(--review-hanzi-row) 72px !important;
  }
  .review-view .flashcard.layout-art-pinyin,
  .review-view .flashcard.layout-characters-pinyin {
    grid-template-areas: "art" "pinyin" "footer" !important;
    grid-template-rows: minmax(0,1fr) var(--review-pinyin-row) 72px !important;
  }
  .review-view .flashcard.layout-art-only,
  .review-view .flashcard.layout-characters-hero,
  .review-view .flashcard.layout-pinyin-hero,
  .review-view .flashcard.layout-audio-hero {
    grid-template-areas: "art" "footer" !important;
    grid-template-rows: minmax(0,1fr) 72px !important;
  }

  .review-view .flashcard > .artwork {
    grid-row: auto !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: auto !important;
    height: auto !important;
    padding: 30px 0 0 !important;
  }
  .review-view .flashcard > .card-hanzi,
  .review-view .flashcard > .card-pinyin {
    min-height: 0 !important;
    padding: 0 30px !important;
  }
  .review-view .flashcard > .card-footer { padding: 0 46px 8px !important; }
}

/* Artwork-visible phone cards share a fixed illustration region and caption
 * band. Toggling a label changes only that label's density; it cannot make
 * the artwork jump or claim newly available vertical space. */
@media (max-width: 899px) {
  .flashcard.has-artwork:not(.is-japanese-three-track) {
    grid-template-areas: "art" "hanzi" "pinyin" "footer" !important;
    grid-template-rows: minmax(0,1fr) var(--review-hanzi-row) var(--review-pinyin-row) 72px !important;
  }
  .flashcard.has-artwork:not(.is-japanese-three-track) > .artwork,
  .flashcard.has-artwork:not(.is-japanese-three-track) > .card-footer { display:flex; }
  .flashcard.has-artwork:not(.is-japanese-three-track) > .card-footer { display:grid; }
  .flashcard.has-artwork:not(.is-japanese-three-track).layout-full > .card-hanzi,
  .flashcard.has-artwork:not(.is-japanese-three-track).layout-full > .card-pinyin { display:block; }
  .flashcard.has-artwork:not(.is-japanese-three-track).layout-art-characters > .card-hanzi,
  .flashcard.has-artwork:not(.is-japanese-three-track).layout-art-pinyin > .card-pinyin {
    display:block;
    grid-row:2 / 4;
    align-self:center;
    padding:0 30px;
  }
  .flashcard.has-artwork:not(.is-japanese-three-track).layout-art-characters > .card-hanzi {
    font-size:var(--review-hanzi-size);
    transform:translateY(-12px);
  }
  .flashcard.has-artwork:not(.is-japanese-three-track).layout-art-pinyin > .card-pinyin {
    align-self:center;
    padding-top:0;
    transform:translateY(-8px);
  }

  /* A foreign-language term is allowed to use two balanced lines instead of
     * being clipped by the Mandarin-oriented one-line caption rule. */
  html[data-program-format="single-language"] .flashcard > .card-pinyin {
    width:100%;
    max-width:none;
    box-sizing:border-box;
    margin-inline:auto;
    overflow:visible;
    overflow-wrap:normal;
    word-break:normal;
    line-height:1.05;
    text-wrap:balance;
    white-space:normal;
  }
  html[data-program-format="single-language"] .flashcard.is-single-language:not(.has-multiple-words) > .card-pinyin {
    font-size:var(--review-single-language-size);
    white-space:nowrap;
  }
  html[data-program-format="single-language"] .flashcard.is-single-language.has-multiple-words > .card-pinyin {
    font-size:var(--review-single-language-phrase-size);
  }
  html[data-program-format="single-language"] .flashcard.layout-pinyin-hero > .card-pinyin {
    max-width:calc(100% - 56px);
    text-align:center;
  }
  html[data-program-format="single-language"] .flashcard.has-artwork.layout-art-pinyin > .card-pinyin {
    transform:translateY(-18px);
  }
}