html,body{max-width:100%;overflow-x:hidden}img,svg,video,canvas{max-width:100%}h1,h2,h3,p,a,button,label,span{overflow-wrap:anywhere}.workspace,main,.pageintro,.resume,.reading,.practice-card,.settings-section,.legal-page section,.nav-chat{min-width:0}.lesson-card>div:last-child,.q-surah-card>span,.q-saved>div,.settings-row>div{min-width:0}
@media(min-width:421px) and (max-width:900px){.workspace,main{width:100%}.topbar,main,footer{padding-left:clamp(24px,5vw,44px);padding-right:clamp(24px,5vw,44px)}.q-search-form,.q-controls{min-width:0}.q-search-form>*,.q-controls>*{min-width:0}}
@media(max-width:420px){main{padding-left:15px;padding-right:15px}.topbar{padding-left:14px;padding-right:14px}.topbar #connection{display:none}.topbar>div{flex:none}.mobile-brand{min-width:0;flex:1;gap:8px}.mobile-brand span:last-child{min-width:0;max-width:none;overflow-wrap:anywhere}.mobile-nav{padding-left:5px;padding-right:5px}.mobile-nav a,.mobile-nav button{min-width:0;font-size:.66rem;padding-left:1px;padding-right:1px;line-height:1.25}.resume-copy{padding:24px 21px}.lesson-card{gap:14px;padding:18px}.number{width:38px;height:40px}.section-heading{align-items:flex-start;flex-direction:column;gap:2px}.section-heading h2{margin-bottom:0}.section-heading small{white-space:normal;margin-bottom:13px}.path-toggle button{min-width:0;line-height:1.4}.q-topline{display:block}.q-reader-title{display:block;max-width:100%;padding-top:0;text-align:right}.q-reader-links{align-items:stretch}.q-reader-links a,.q-reader-links button{flex:1 1 calc(50% - 7px);white-space:normal;text-align:center}.q-controls,.q-search-form{grid-template-columns:minmax(0,1fr)}.q-controls>*,.q-search-form>*,.q-search-form>div:first-child,.q-search-form>div:nth-child(3),.q-translator,.q-compare-select{grid-column:1/-1}.q-controls select,.q-controls input,.q-search-form select,.q-search-form input{min-width:0;width:100%}.q-directory-tools>div{max-width:none}.q-ayah{padding:18px 16px}.q-ayah .verse-top{align-items:flex-start;flex-direction:column}.q-verse-actions{width:100%;justify-content:flex-end}.q-arabic{font-size:1.9rem;line-height:2.15}.q-surah-card{padding:18px 15px}.q-surah-arabic{max-width:32%;font-size:1.4rem}.q-pagination{display:grid;grid-template-columns:1fr 1fr;gap:8px}.q-pagination button{min-width:0;padding-left:8px;padding-right:8px;white-space:normal;line-height:1.35}.actions{align-items:stretch}.actions .primary,.actions .secondary{flex:1}.stats{grid-template-columns:1fr}.stat{display:flex;gap:16px;align-items:center}.settings-row{align-items:flex-start}.appearance-options button{flex:1}dialog{width:calc(100vw - 20px);max-width:calc(100vw - 20px);padding:21px}.navigator-dialog{padding:0}.nav-chat-form{flex-wrap:wrap}.nav-chat-form input{flex:1 1 180px}.release-banner{width:calc(100vw - 24px);justify-content:space-between}footer{padding-left:15px;padding-right:15px}footer div{flex-wrap:wrap}}
@media(max-width:280px){.topbar{padding-left:10px;padding-right:10px}.mobile-brand span:last-child{max-width:105px;font-size:.78rem}.mobile-brand .brandmark{width:31px;height:33px;font-size:22px}main{padding:21px 11px 38px}h1{font-size:1.65rem}.pageintro p{font-size:.93rem}.path-toggle{display:grid;grid-template-columns:1fr}.path-toggle button{width:100%}.resume-copy{padding:21px}.resume h2{font-size:1.48rem}.lesson-card{padding:16px;gap:10px}.lesson-card .number{width:34px;height:36px;font-size:.86rem}.section-heading{display:block}.section-heading small{white-space:normal;display:block;margin:-8px 0 12px}.mobile-nav a,.mobile-nav button{font-size:.58rem;gap:2px}.mobile-nav svg{width:18px;height:18px}.q-topline{display:block}.q-reader-title{display:none}.q-controls{padding:14px}.q-ayah{padding:16px 13px}.q-arabic{font-size:1.8rem}.q-surah-arabic{display:none}.q-ayah .verse-top{align-items:flex-start;flex-direction:column}.q-verse-actions{width:100%;justify-content:space-between}.reading,.practice-card,.settings-section,.legal-page section{padding:17px}.stats{grid-template-columns:1fr}.nav-chat-form{flex-wrap:wrap}.nav-chat-form button{width:100%}.nav-chat-top{padding:15px 14px}.navigator-dialog .nav-chat-top{padding-right:55px}}
@media(max-width:420px){.actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.actions .primary,.actions .secondary{width:100%;min-width:0;max-width:100%;flex:none;white-space:normal;overflow-wrap:break-word;word-break:normal}.mobile-nav span,.mobile-brand span:last-child{overflow-wrap:normal;word-break:normal;hyphens:none}}
@media(min-width:421px) and (max-width:600px){.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}.actions .primary,.actions .secondary{width:100%;min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word;word-break:normal}}
/* Reflow controls by available space; preserve their content and appearance. */
@media (max-width: 1200px) {
  .q-controls > *, .q-search-form > *, .toolbar > *, .rail > * { min-width: 0; }
  .actions > .primary, .actions > .secondary {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center;
  }
  .q-input-button { flex-wrap: wrap; }
  .q-input-button input { flex: 1 1 8rem; width: auto; }
  .q-input-button button { flex: 0 0 auto; }
}
@media (max-width: 900px) {
  .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobile-nav a, .mobile-nav button {
    min-width: 0;
    justify-content: flex-start;
    text-align: center;
  }
  .mobile-nav a > span, .mobile-nav button > span {
    width: 100%;
    min-width: 0;
    min-height: 2.6em;
    line-height: 1.3;
    display: grid;
    place-items: center;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }
  .topbar { height: auto; min-height: 70px; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .mobile-brand { min-width: 0; }
  .mobile-brand .brandmark, .topbar > div { flex-shrink: 0; }
  footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
  .actions { align-items: stretch; }
  .actions > .primary, .actions > .secondary { flex: 1 1 14rem; }
  .q-topline > div { min-width: 0; }
  .q-verse-actions { flex-wrap: wrap; }
  .verse-top, .practice-top, .section-heading { flex-wrap: wrap; }
  .toolbar > div { flex: 1 1 10rem; }
  .toolbar select, audio { width: 100%; max-width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  .topbar { min-height: 65px; }
  .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .actions > .primary, .actions > .secondary { width: 100%; min-width: 0; }
  .q-search-form, .q-controls { grid-template-columns: minmax(0, 1fr); }
  .q-search-form > *, .q-controls > * { grid-column: 1 / -1; }
  .q-directory-tools > div { max-width: none; }
  .reader-options summary > div { min-width: 0; }
  .reader-options summary::after { flex-shrink: 0; }
  .nav-chat-top { flex-wrap: wrap; }
  .nav-chat-form { flex-wrap: wrap; }
  .nav-chat-form input { flex: 1 1 12rem; }
  .nav-prompts button, .nav-action { max-width: 100%; }
  .more-title { gap: 12px; }
  .more-title button { flex-shrink: 0; }
  .navigator-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .navigator-dialog .nav-chat-log { height: auto; max-height: 45dvh; }
  .section-heading small { white-space: normal; }
  .path-toggle { flex-wrap: wrap; }
  .path-toggle button { flex: 1 1 10rem; }
  .q-pagination { flex-wrap: wrap; }
  .q-pagination button { min-width: 0; white-space: normal; }
}
@media (max-width: 350px) {
  .mobile-nav { padding-left: 2px; padding-right: 2px; }
  .mobile-nav a, .mobile-nav button { padding-left: 1px; padding-right: 1px; }
  .mobile-nav a > span, .mobile-nav button > span { overflow-wrap: anywhere; }
  .q-pagination { grid-template-columns: minmax(0, 1fr); }
}