/* 0.13.41 — phone and tablet fixes from the mobile UI audit (Study Desk first).
   Loaded LAST, so each rule here only corrects one measured problem and states
   which. Nothing here changes a desktop layout wider than 1100px. */

/* Pane tabs «نسخهٔ اصلی / ترجمهٔ فارسی» stuck at top:0 slid under the sticky
   top bar after the first scroll. */
@media (max-width:700px){
  .reader-tabs10{top:var(--topbar-h,48px)!important}
}

/* The selection tools were left:50% with no centring transform above 700px, so
   «ساده‌تر توضیح بده» and «معنی اصطلاح» ran off the right edge on landscape
   phones and tablets. */
@media (min-width:701px){
  #selectionTools[popover]{left:8px;right:8px;margin-inline:auto;width:fit-content;max-width:calc(100vw - 16px)!important;overflow-x:auto}
}

/* Dialog window buttons were forced to 28px by a later rule, and «□» (maximise,
   meaningless on a phone) was forced visible. */
@media (max-width:700px){
  :root dialog [data-window],:root .quick-panel [data-window],:root dialog .icon-button,:root .quick-panel .icon-button{
    inline-size:40px!important;block-size:40px!important;width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;max-width:40px!important;flex:0 0 40px!important}
  :root dialog [data-window=maximize],:root .quick-panel [data-window=maximize]{display:none!important}
}

/* Long words, URLs and part numbers pushed whole dialogs (دفتر پژوهش، کنترل
   علمی، مسیر یادگیری) sideways. */
.notice10,.notice10 p,.notice10 h3,#extraDialog .modal-body p{overflow-wrap:anywhere}
.learning-step10 .btn{white-space:normal;min-width:0;height:auto;text-align:start}
.learning-step10 label{min-width:0}

/* Page thumbnails are an absolute overlay: below desktop widths nothing
   reserves room for them, and they covered the start of every line. */
@media (max-width:1100px){
  .ghost-pages,.translation-ghost10{display:none!important}
}

/* The experimental local read-aloud card's licence table was 1720px wide and
   widened the whole settings page on a phone. */
#localTts250 .tts250-scroll{overflow-x:auto;max-width:100%}
#localTts250 table{white-space:normal}
#localTts250 td,#localTts250 th{overflow-wrap:anywhere;min-width:6em}

/* Admin page headers with three buttons did not wrap (2px sideways scroll). */
.section-head{flex-wrap:wrap}

/* The translation paper is shrunk to the pane with CSS zoom; controls INSIDE
   it shrank with it (a 9px checkbox, a 17px tray button). `--paper-zoom251` is
   the applied zoom (≤ 1), set by mobile251.js, so these keep a finger's size. */
@media (pointer:coarse){
  #translation .tray-mark114{width:calc(38px / var(--paper-zoom251,1))!important;height:calc(38px / var(--paper-zoom251,1))!important;font-size:calc(17px / var(--paper-zoom251,1))!important}
  #translation .overlay-toggle{font-size:calc(14px / var(--paper-zoom251,1));min-height:calc(36px / var(--paper-zoom251,1));display:inline-flex;align-items:center;gap:calc(6px / var(--paper-zoom251,1))}
  #translation .overlay-toggle input{width:calc(22px / var(--paper-zoom251,1));height:calc(22px / var(--paper-zoom251,1))}
  #translation .edit150-start,#translation .edit150-done{min-height:calc(36px / var(--paper-zoom251,1));font-size:calc(14px / var(--paper-zoom251,1))}
  [data-research-select],[data-progress10],dialog input[type=checkbox]{width:24px;height:24px}
}

/* 0.13.42 (48B) — PHONE LANDSCAPE: the same compact form portrait phones
   already get below 700px. The page title and the full «چیدمان و خروجی» card
   took ~80% of a 390px-high screen before the first line of the book. The
   card folds into its one-line «⋯ چیدمان و خروجی» (the native <details> it
   already is — every action inside, nothing removed, no new handler); turning
   the phone back to portrait or using a taller screen restores it as before. */
@media (orientation:landscape) and (max-height:500px){
  .reading .page-head{display:none}
  .layout-details10>summary{display:block;padding:4px}
  .layout-details10:not([open])>:not(summary){display:none}
  .layout-settings10{margin-bottom:4px!important;padding:3px 8px!important}
}
@media (max-width:700px), (orientation:landscape) and (max-height:500px){
  .layout-details10>summary::before{content:'⋯ '}
}

/* 0.13.42 — touch targets in the reading panes' header rows (were 28–34px):
   at least 36px on a touch screen. The rows already scroll sideways. */
@media (pointer:coarse) and (max-width:700px){
  #readingPanes .window-head .btn,#readingPanes .window-head button,#readingPanes .window-head summary{min-height:36px!important;min-width:36px!important}
  html body #readingPanes .window-head #read10,html body #readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114{
    min-height:36px!important;min-width:36px!important;max-height:none!important;max-width:none!important;height:auto!important}
  #readingPanes .figure-ref,#translation a.ref-link{display:inline-block;min-height:32px;line-height:32px}
}