/* Sentence workspace: keep the signer and input in the visible phone viewport.
   JS enables this only while the sentence tool is selected on a phone. */
.mobile-composer {
  position: fixed;
  top: var(--mobile-top, 0px);
  left: 0;
  width: 100%;
  height: var(--mobile-height, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-composer .site-header {
  flex: 0 0 auto;
  min-height: 52px;
  width: 100%;
  padding: max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left));
  gap: 12px;
  flex-wrap: nowrap;
}
.mobile-composer .signasl-logo { height: 40px; max-width: 74px; }
.mobile-composer .studio-nav {
  order: 0;
  margin-left: auto;
  width: auto;
  gap: 0;
  padding: 3px;
  min-width: 0;
}
.mobile-composer .studio-nav a { min-height: 38px; padding: 6px 8px; font-size: 11px; gap: 5px; white-space: nowrap; flex: 0 1 auto; }
.mobile-composer .studio-nav .ui-icon { display: none; }
.mobile-composer .header-about,
.mobile-composer .learning-hero,
.mobile-composer .practice-section-heading,
.mobile-composer .practice-coach,
.mobile-composer .studio-footer { display: none; }
.mobile-composer .page-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 6px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.mobile-composer .sign-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 44px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
  height: 100%;
}
.mobile-composer .task-panel,
.mobile-composer .viewer-column { display: contents; }
.mobile-composer .task-tabs { grid-row: 1; margin: 0; padding: 2px; }
.mobile-composer .task-tabs button { min-height: 40px; padding: 6px; font-size: 12px; }
.mobile-composer .player-card { grid-row: 2; display: flex; flex-direction: column; min-height: 0; position: relative; border-radius: 14px; }
.mobile-composer .player-heading { position: absolute; z-index: 3; top: 0; left: 0; right: 0; min-height: 44px; padding: 5px 10px; gap: 10px; pointer-events: none; }
.mobile-composer .player-heading button { pointer-events: auto; }
.mobile-composer .player-heading > div { max-width: calc(50% - 35px); }
.mobile-composer .player-heading h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-composer #current-meaning { display: none; }
.mobile-composer .avatar-trigger { padding: 3px 6px; min-height: 36px; gap: 5px; }
.mobile-composer .avatar-trigger img { display: block; width: 26px; height: 26px; }
.mobile-composer .avatar-trigger strong { font-size: 12px; }
.mobile-composer .avatar-trigger small { display: none; }
.mobile-composer .stage { flex: 1; height: auto; min-height: 0; aspect-ratio: auto; }
.mobile-composer .stage-topline { top: auto; bottom: 6px; left: 10px; right: 10px; font-size: 10px; }
.mobile-composer .stage-topline .view-label { max-width: 100%; }
.mobile-composer #stage-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-composer .loading-overlay { padding: 12px; gap: 8px; }
.mobile-composer #loading-title { font-size: 16px; }
.mobile-composer #loading-detail { font-size: 12px; }
.mobile-composer .transport { flex: 0 0 auto; padding: 4px 8px; }
.mobile-composer .timeline-row { margin-bottom: 0; gap: 6px; font-size: 10px; }
.mobile-composer .transport-row { flex-wrap: nowrap; gap: 3px; }
.mobile-composer .play-controls { gap: 0; }
.mobile-composer .play-button { min-width: 61px; min-height: 40px; font-size: 12px; padding: 6px 8px; gap: 4px; }
.mobile-composer .icon-button { width: 32px; height: 40px; }
.mobile-composer .speed-control { gap: 0; width: auto; order: 0; }
.mobile-composer .speed-control > span,
.mobile-composer .loop-button > span { display: none; }
.mobile-composer .speed-control button { min-width: 30px; min-height: 40px; padding: 4px 5px; font-size: 11px; }
.mobile-composer .loop-button { min-height: 40px; padding: 4px 6px; margin-left: auto; }
.mobile-composer .phrase-segments { flex-wrap: nowrap; max-height: 34px; padding: 1px 0 3px; gap: 4px; }
.mobile-composer .phrase-segments button { flex: 0 0 auto; font-size: 11px; padding: 4px 7px; }
.mobile-composer .player-options { flex: 0 0 auto; padding: 0 8px; gap: 6px; border-top: 1px solid var(--line); }
.mobile-composer .view-options > summary { min-height: 34px; padding: 6px 2px; font-size: 11px; margin: 0; }
.mobile-composer .view-action-label { gap: 6px; }
.mobile-composer .view-action-label svg { width: 15px; height: 15px; }
.mobile-composer .detail-hint { display: none; }
.mobile-composer #review-shortcut { min-height: 34px; font-size: 11px; }
.mobile-composer .camera-controls {
  position: absolute;
  z-index: 5;
  bottom: 35px;
  left: 0;
  right: 0;
  max-height: 70%;
  overflow: auto;
  padding: 12px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px #142a421a;
}
.mobile-composer .sentence-card {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(var(--mobile-height, 100dvh) * .45);
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  overscroll-behavior: contain;
}
.mobile-composer .sentence-heading,
.mobile-composer .sentence-examples,
.mobile-composer .beta-label { display: none; }
.mobile-composer .sentence-modes { flex: 0 0 auto; width: 100%; max-width: none; gap: 6px; padding: 0; margin: 0 0 6px; }
.mobile-composer .sentence-modes button { flex: 1; min-height: 32px; padding: 4px 8px; font-size: 12px; }
.mobile-composer .sentence-input-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
.mobile-composer #word-form { flex: 0 0 auto; padding: 0; }
.mobile-composer .compose-row { flex-direction: row; gap: 6px; }
.mobile-composer #word-input { min-height: 44px; padding: 10px 32px 10px 10px; font-size: 16px; }
.mobile-composer #clear-input { width: 28px; height: 36px; top: 4px; right: 2px; }
.mobile-composer .compose-row .primary-button { width: 104px; min-width: 0; flex: 0 0 104px; min-height: 44px; padding: 6px; font-size: 12px; }
.mobile-composer #sign-button { padding: 6px; font-size: 12px; white-space: nowrap; }
.mobile-composer .composer-hint,
.mobile-composer .input-message { font-size: 11px; line-height: 1.4; margin: 5px 0 0; }
.mobile-composer .input-message:empty { display: none; }
.mobile-composer .translation-retry { font-size: 11px; padding: 4px 0; }
.mobile-composer .sentence-card:has([data-sentence-mode=direct][aria-pressed=true]) #translation-status:not(.error),
.mobile-composer .sentence-card:has([data-sentence-mode=direct][aria-pressed=true]) #retry-translation { display: none; }
.mobile-composer .translation-preview { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-padding: 8px 0 48px; padding: 8px; margin: 8px 0 0; }
.mobile-composer .translation-preview h3 { font-size: 13px; }
.mobile-composer .translation-caveat { margin: 4px 0; font-size: 11px; line-height: 1.4; }
.mobile-composer .translation-preview label { margin-bottom: 3px; font-size: 11px; }
.mobile-composer #translation-sequence { min-height: 44px; height: 44px; padding: 7px; font-size: 16px; line-height: 1.4; }
.mobile-composer .translation-parts { margin-top: 4px; flex-wrap: nowrap; overflow: auto; }
.mobile-composer .translation-part { flex: 0 0 auto; font-size: 11px; padding: 3px 5px; }
.mobile-composer .translation-notes { font-size: 11px; line-height: 1.4; margin-top: 4px; }
.mobile-composer #play-translation { position: sticky; bottom: 0; width: 100%; min-height: 40px; margin-top: 6px; font-size: 13px; box-shadow: 0 -4px 10px #f3f8ff; }
.mobile-composer .translation-preview:has(#translation-sequence:focus) #play-translation { position: static; }
.mobile-composer:has(#translation-preview:not([hidden])) .selection-readout { display: none; }
.mobile-composer:has(#translation-preview:not([hidden])) #translation-status:not(.error) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0);
}
@media (max-height: 700px) {
  /* Keep useful signing space while reviewing a draft on a smaller phone.
     The tool tabs remain available; other tabs restore the main navigation. */
  .mobile-composer:has(#translation-preview:not([hidden])) .site-header { display: none; }
}

/* Give the avatar the space freed by temporarily closing the page chrome.
   Submitting a valid sentence dismisses the keyboard and restores controls. */
.mobile-composer.mobile-keyboard .site-header,
.mobile-composer.mobile-keyboard .task-tabs,
.mobile-composer.mobile-keyboard .player-heading,
.mobile-composer.mobile-keyboard .transport,
.mobile-composer.mobile-keyboard .player-options,
.mobile-composer.mobile-keyboard .sentence-modes { display: none; }
.mobile-composer.mobile-keyboard .sign-explorer { grid-template-rows: minmax(0, 1fr) auto; }
.mobile-composer.mobile-keyboard .player-card { grid-row: 1; }
.mobile-composer.mobile-keyboard .sentence-card { grid-row: 2; max-height: calc(var(--mobile-height, 100dvh) * .55); }
.mobile-composer.mobile-keyboard .page-shell { padding-top: 4px; padding-bottom: 4px; }

/* In landscape, use the width for signing and keep the editor beside it. */
@media (min-width: 600px) and (max-height: 500px) {
  .mobile-composer .sign-explorer { grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); grid-template-rows: 44px minmax(0, 1fr); }
  .mobile-composer .task-tabs { grid-column: 1 / -1; }
  .mobile-composer .player-card { grid-column: 1; grid-row: 2; }
  .mobile-composer .sentence-card { grid-column: 2; grid-row: 2; max-height: none; }
  .mobile-composer.mobile-keyboard .sign-explorer { grid-template-rows: minmax(0, 1fr); }
  .mobile-composer.mobile-keyboard .player-card,
  .mobile-composer.mobile-keyboard .sentence-card { grid-row: 1; max-height: none; }
}