/* Only the trial route adds this compact mode switch. */
.trial-nav{padding:0 0 12px;border-bottom:1px solid #dce6df;margin-bottom:0;min-width:0;flex:none}.trial-nav>a{display:block;font-size:11px;text-decoration:none;margin-bottom:8px}.trial-nav nav{display:flex;flex-direction:row;gap:4px;padding:3px;background:#edf4ec;border-radius:8px}.trial-nav nav a{flex:1;text-align:center;text-decoration:none;font-size:11px;white-space:nowrap;padding:7px 3px;border-radius:6px}.trial-nav nav a[aria-current]{background:#1b5e4b;color:white}.trial-nav button{display:block;width:100%;margin:8px 0 0;font-size:11px;min-height:32px;padding:7px;background:#f5f9f3;color:#1b5e4b;border:1px solid #dce6df}.trial-nav p{margin:7px 0 0;font-size:10px;line-height:1.65;color:#607568}.trial-nav~.brand-block{margin-top:0}@media(max-width:980px){.trial-nav{grid-column:1/-1;grid-row:1;border:0;padding:0}.app-rail .brand-block{grid-row:2}.app-rail #newLesson{grid-row:2}.app-rail nav[aria-label="Điều hướng"]{grid-row:3}.app-rail .rail-recent,.app-rail #settingsBtn{grid-row:4}.trial-nav nav{max-width:340px}.trial-nav>a,.trial-nav p{display:none}.trial-nav button{width:auto;position:absolute;right:16px;top:12px;margin:0;max-width:180px}.trial-nav nav{margin-right:175px;min-width:150px}}@media(max-width:500px){.trial-nav nav{margin-right:0;max-width:none}.trial-nav button{position:static;width:100%;max-width:none}.trial-nav~.brand-block{margin-top:5px}}

/* Phone layouts for the trial tools. The desktop rails use the original rules. */
@media (max-width: 760px) and (pointer: coarse),
       (max-width: 980px) and (max-height: 520px) and (pointer: coarse) {
  #studyApp > header,
  header.app-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
  }

  header > .trial-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }

  header > .trial-nav nav {
    grid-area: auto;
    align-self: stretch;
    justify-self: stretch;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  header > .trial-nav nav a,
  header > .trial-nav button {
    display: grid;
    place-items: center;
    min-height: 44px;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }

  header > .trial-nav button {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 9px;
  }

  #studyApp > header > .brand-block,
  #studyApp > header > nav {
    grid-row: 2;
    align-self: center;
    min-width: 0;
  }

  #studyApp > header > .brand-block {
    grid-column: 1;
    gap: 0;
    margin: 0;
  }

  #studyApp > header > nav {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    white-space: normal;
  }

  #studyApp > header > nav button {
    min-height: 44px;
    padding: 4px 6px;
    font-size: 12px;
  }

  #studyApp > header .brand {
    gap: 6px;
    font-size: 16px;
  }

  #studyApp > header .brand-logo {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  #studyApp > header > .video-picker {
    display: grid;
    grid-area: 3 / 1 / auto / -1;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 6px;
    max-width: none;
    align-items: start;
  }

  #studyApp > header .youtube-launch,
  #studyApp > header .manual-video > summary {
    min-height: 44px;
    padding: 5px 6px;
    font-size: 12px;
    text-align: center;
  }

  #studyApp > header .manual-video {
    margin: 0;
  }

  #studyApp > header .manual-video[open],
  #studyApp > header .lesson-transfer {
    grid-column: 1 / -1;
  }

  #studyApp > header .manual-video > summary {
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  #studyApp > header .manual-video .url-bar {
    max-width: none;
  }

  #studyApp > header .manual-video .url-bar input {
    font-size: 16px;
  }

  #studyApp > header .lesson-transfer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    gap: 3px 6px;
  }

  #studyApp > header .lesson-transfer button,
  #studyApp > header .manual-video .url-bar button {
    min-height: 44px;
  }

  #studyApp .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #studyApp .workspace > .content-pane {
    contain: none;
    height: auto;
    max-height: none;
    min-width: 0;
  }

  #studyApp .workspace > .content-pane > .panel:not([hidden]) {
    flex: none;
  }

  #studyApp .watch-pane > .current-card {
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 0;
    padding: 4px 10px 8px;
  }

  #studyApp .current-card .card-top {
    flex-basis: auto;
  }

  #studyApp #saveCurrent {
    min-width: 44px;
    min-height: 44px;
  }

  #studyApp .current-card .reading-stack {
    display: block;
    flex: none;
  }

  #studyApp #currentText.reading-text {
    max-height: 8em;
    padding: 0 0 4px;
    font-size: clamp(19px, calc(var(--reading) + 2px), 25px);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  #studyApp .lesson-controls {
    padding: 7px;
    gap: 7px;
  }

  #studyApp .lesson-controls .controls-main-grid,
  #studyApp .lesson-controls .controls-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  #studyApp .lesson-controls .control-playback .transport {
    grid-template-columns: 44px minmax(0, 1fr) 44px auto;
    padding-top: 0;
  }

  #studyApp .lesson-controls .control-playback .transport > button,
  #studyApp .lesson-controls .playback-tools #speed,
  #studyApp .lesson-controls .control-ab .ab-loop-controls button,
  #studyApp .lesson-controls .controls-bottom button,
  #studyApp .lesson-controls #recentSelect {
    min-height: 44px;
  }

  #studyApp .lesson-controls .control-playback .transport > button {
    width: auto;
  }

  #studyApp .lesson-controls .control-ab .ab-loop-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  #studyApp .lesson-controls .control-ab .ab-loop-controls button {
    padding: 3px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #studyApp .lesson-controls .controls-bottom .video-bookmarks button {
    flex: 1;
  }

  #studyApp .content-pane > .tabbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px;
    gap: 3px;
    overflow: visible;
  }

  #studyApp .content-pane > .tabbar button {
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 12px;
    white-space: normal;
  }

  #studyApp .content-pane > .tabbar button[aria-selected="true"] {
    background: #e5f2e9;
    border-color: #b9d4c2;
    color: #17634f;
  }

  #studyApp #panel-transcript .transcript-viewport {
    height: clamp(360px, 66vh, 540px);
    height: clamp(360px, 66svh, 540px);
  }

  #studyApp #transcriptList {
    overscroll-behavior-y: auto;
  }

  #studyApp #transcriptFocus {
    height: 204px;
  }

  #studyApp #transcriptFocus .cue,
  #studyApp #transcriptList .cue {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 5px;
    padding: 5px 2px;
    align-items: center;
  }

  #studyApp #transcriptList .cue-text,
  #studyApp #transcriptFocus .cue-text {
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  #studyApp #transcriptFocus .cue .seek,
  #studyApp #transcriptFocus .cue .save,
  #studyApp #transcriptList .cue .seek,
  #studyApp #transcriptList .cue .save,
  #studyApp .transcript-actions button {
    min-height: 44px;
  }

  #studyApp #transcriptFocus .cue .save,
  #studyApp #transcriptList .cue .save {
    width: 44px;
  }

  .app-rail > .trial-nav nav {
    grid-column: 1 / -1;
  }

  .app-rail > .trial-nav label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .app-rail > .trial-nav select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 14px;
  }

  .app-rail > .landscape-rail-group {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .learning-card .lesson-tabs [role="tab"],
  .app-rail nav[aria-label="Điều hướng"] button {
    min-height: 44px;
    white-space: normal;
  }

  .screen .practice-controls {
    flex-wrap: wrap;
  }
}

@media (orientation: landscape) and (max-width: 980px) and (max-height: 520px) and (pointer: coarse) {
  #studyApp .video-shell {
    width: min(100%, 132vh);
    width: min(100%, 132svh);
    margin-inline: auto;
  }
}