/* Mobile smart-session controls: keep labels inside the jewel settings and
   reduce the collapsed player affordance while the session editor is open. */
@layer sukun-r1149-session-fit {
@media (max-width:700px) {
 /* The restore status is much longer than the two download labels. Give it
    its own row so the ornate end caps never cover the text. */
 html[data-r1074-theme="berhet"] body #bakBox .bakRow {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;gap:8px!important;width:100%!important;min-width:0!important;
 }
 html[data-r1074-theme="berhet"] body #bakBox .bakRow>.btn {
  box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
  min-height:56px!important;height:auto!important;max-height:none!important;
  padding:12px 25px!important;border-image-width:10px 20px!important;
  font:700 12px/1.35 system-ui,sans-serif!important;letter-spacing:0!important;
  text-align:center!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
 }
 html[data-r1074-theme="berhet"] body #bakBox .bakRow>#bakImportBtn {grid-column:1/-1!important}
 html[data-r1074-theme="berhet"] body #r170SessionHub :is(#r1082OrderTitle,#r1092PreflightSummary) {
  position:relative!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:50px!important;
  padding:12px 40px 12px 27px!important;border-image-width:10px 22px!important;
  color:#fff2d6!important;font:600 13px/1.35 system-ui,sans-serif!important;letter-spacing:0!important;
  white-space:normal!important;overflow-wrap:break-word!important;overflow:visible!important;
 }
 html[data-r1074-theme="berhet"] body #r170SessionHub :is(#r1082OrderTitle,#r1092PreflightSummary)::after {right:22px!important}
 html[data-r1074-theme="berhet"] body #r170SessionHub #r1082StageNav {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
 }
 html[data-r1074-theme="berhet"] body #r170SessionHub #r1082StageNav>button:last-child {grid-column:1/-1!important}
 html[data-r1074-theme="berhet"] body #r170SessionHub :is(#r1082StageNav>button,#r170PresetPills>button,.r170Row>button,#r170SavedSessions button,#r261FavoritePills [data-fload]) {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;min-height:46px!important;height:auto!important;
  border-image-width:9px 18px!important;padding:11px 23px!important;
  font:600 12px/1.35 system-ui,sans-serif!important;letter-spacing:0!important;
  text-align:center!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
 }
 html[data-r1074-theme="berhet"] body #r170SessionHub :is(#r170PresetPills,#r170SavedSessions) {
  display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:8px!important;
  min-width:0!important;max-width:100%!important;
 }
 html[data-r1074-theme="berhet"] body #r170SessionHub #r170PresetPills>button {flex:1 1 125px!important}
 html[data-r1074-theme="berhet"] body #r170SessionHub :is(.r261Fav,.r261SavedWrap) {
  display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;max-width:100%!important;
 }
 html[data-r1074-theme="berhet"] body #r170SessionHub :is(.r261Fav,.r261SavedWrap)>.r261Star {
  flex:0 0 44px!important;box-sizing:border-box!important;width:44px!important;min-width:44px!important;max-width:44px!important;
  height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;border-image-width:8px!important;
 }
 html[data-r1074-theme="berhet"] body #r170SessionHub .r170Row {gap:8px!important;min-width:0!important}
 html[data-r1074-theme="berhet"] body #r170SessionHub .r170Row>button {flex:1 1 145px!important}
 html[data-r1074-theme="berhet"] body #r170SessionHub #r170SessionName {min-width:0!important;max-width:100%!important}
 /* A compact but full-text player handle frees most of the reading width.
    Its extra scroll reserve keeps the last editor row reachable. */
 html[data-r1074-theme="berhet"] body.sukun-zikir-tab.r431-dock-visible.r433-dock-hidden:has(#r170SessionHub[open]):not(.r441-peek-tab) #r433DockPeek {
  box-sizing:border-box!important;position:fixed!important;left:auto!important;right:max(8px,env(safe-area-inset-right,0px))!important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;transform:none!important;animation:none!important;
  width:min(190px,calc(100vw - 16px))!important;min-width:0!important;max-width:190px!important;
  min-height:48px!important;height:auto!important;max-height:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:12px 24px!important;border:1px solid transparent!important;
  border-image:url('../assets/berhetiyye-premium/r1133/gem-sapphire.webp') 210 540 fill / 9px 20px / 0 stretch!important;
  background:none!important;overflow:visible!important;
 }
 html[data-r1074-theme="berhet"] body.sukun-zikir-tab.r431-dock-visible.r433-dock-hidden:has(#r170SessionHub[open]):not(.r441-peek-tab) #r433DockPeek :is(.r433TxtWrap,.r433Txt) {
  min-width:0!important;max-width:100%!important;white-space:normal!important;text-align:center!important;
  font:650 12px/1.3 system-ui,sans-serif!important;
 }
 html[data-r1074-theme="berhet"] body.sukun-zikir-tab.r431-dock-visible.r433-dock-hidden:has(#r170SessionHub[open]) .wrap {
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px)!important;
 }
}
}