/* Compact the mobile jewel navigation without changing the original gems,
   icon semantics, or the text-measuring and sticky-offset controller. */
@layer sukun-r1149-nav {
@media (max-width:720px) {
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs:not([hidden]) {
  box-sizing:border-box!important;
  width:min(100%,294px)!important;max-width:294px!important;
  margin-inline:auto!important;padding:8px!important;
  grid-template-columns:repeat(3,minmax(0,88px))!important;
  grid-auto-rows:1fr!important;justify-content:center!important;
  justify-items:stretch!important;align-items:stretch!important;gap:6px!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs:not([hidden])>button {
  box-sizing:border-box!important;position:relative!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;max-width:88px!important;
  height:auto!important;min-height:44px!important;max-height:none!important;aspect-ratio:1/1!important;
  padding:10px 9px!important;margin:0!important;gap:4px!important;
  border-image-width:10px 9px!important;--r1133-end:9px!important;
  filter:saturate(1.16) contrast(1.04) drop-shadow(0 3px 2px #000b)!important;
  text-shadow:0 1px 2px #000,0 0 2px #000!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="2"] {
  grid-template-columns:repeat(2,minmax(0,135px))!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="2"]>button {
  max-width:135px!important;aspect-ratio:4/3!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="1"] {
  grid-template-columns:minmax(0,1fr)!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="1"]>button {
  max-width:none!important;min-height:44px!important;aspect-ratio:auto!important;flex-direction:row!important;
 }
}

@media (forced-colors:active) {
 html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button {filter:none!important;text-shadow:none!important}
}
}

/* r1150: retain the jewel artwork while reserving room for text on phones. */
@layer sukun-r1149-nav {
@media (max-width:720px) {
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs:not([hidden]) {
  width:min(100%,276px)!important;max-width:276px!important;
  grid-template-columns:repeat(3,minmax(0,82px))!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs:not([hidden])>button {
  max-width:82px!important;padding:9px 8px!important;gap:3px!important;
 }
 /* Keep the native label fully inside the end caps and give the slider its own row. */
 html[data-r1074-theme="berhet"] body #tab-zkr #vhBox .jRow {
  display:grid!important;grid-template-columns:auto minmax(100px,1fr)!important;
  align-items:center!important;gap:8px!important;min-width:0!important;
 }
 html[data-r1074-theme="berhet"] body #tab-zkr #vhBox #vhLayers {
  box-sizing:border-box!important;min-width:100px!important;width:100%!important;max-width:100%!important;
  min-height:46px!important;padding:9px 26px 9px 20px!important;
  border-image-width:9px 17px!important;text-align:center!important;text-align-last:center!important;
 }
 html[data-r1074-theme="berhet"] body #tab-zkr #vhBox #vhVol {
  grid-column:1/-1!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;
 }
 /* Recorded recitation disclosures may be themed as carved panels. Reserve
    the ends for the ornament and let every line use the available inner area. */
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  padding:14px 20px!important;overflow-wrap:anywhere!important;
 }
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded :is(h3,label,p,a) {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.5!important;
 }
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded select {
  min-height:48px!important;padding:10px 28px 10px 23px!important;border-image-width:10px 19px!important;
 }
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded details>summary {
  display:block!important;position:relative!important;box-sizing:border-box!important;
  width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:54px!important;
  padding:13px 39px 13px 25px!important;border-image-width:10px 21px!important;
  font:600 13px/1.4 system-ui,sans-serif!important;white-space:normal!important;
  overflow-wrap:break-word!important;overflow:visible!important;text-align:left!important;
 }
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded details>summary::after {
  right:19px!important;top:50%!important;transform:translateY(-50%)!important;
 }
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded .r1128-delail-actions {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
 }
 html[data-r1074-theme="berhet"] body #r1128DelailRecorded .r1128-delail-actions>button {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;min-height:46px!important;
  height:auto!important;padding:10px 22px!important;border-image-width:9px 18px!important;
  white-space:normal!important;overflow-wrap:break-word!important;text-align:center!important;
 }
 /* Studio metadata and disclosure text must not occupy the gilt edges. */
 html[data-r1074-theme="berhet"] body #tab-zkr #r170Studio>summary {
  padding:14px 29px!important;grid-template-columns:20px minmax(0,1fr) 12px!important;gap:6px!important;
 }
 html[data-r1074-theme="berhet"] body #tab-zkr #r170Studio>summary>span:nth-child(2) {
  display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;
 }
 html[data-r1074-theme="berhet"] body #tab-zkr #r170Studio>summary>span:nth-child(2) :is(b,small) {
  display:block!important;position:static!important;white-space:normal!important;overflow-wrap:break-word!important;line-height:1.35!important;
 }
 html[data-r1074-theme="berhet"] body #tab-zkr #r170Studio .r170StudioMeta {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;
 }
 html[data-r1074-theme="berhet"] body #tab-zkr #r170Studio .r170StudioMeta>div {
  box-sizing:border-box!important;min-width:0!important;min-height:58px!important;height:auto!important;
  padding:12px 14px!important;border-image-width:9px 12px!important;
  white-space:normal!important;overflow-wrap:break-word!important;
 }
}
}
@layer sukun-r1149-nav {
@media (max-width:720px) {
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="2"] {
  grid-template-columns:repeat(2,minmax(0,126px))!important;
 }
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="2"]>button {max-width:126px!important;}
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="1"] {grid-template-columns:minmax(0,1fr)!important;}
 html[data-r1074-theme="berhet"] body:not(:is(.sukun-tefekkur-mode,.sukun-focus-mode,.r616-ui)) .wrap>nav.tabs[data-r1145-cols="1"]>button {max-width:none!important;}
}
}
@layer sukun-r1149-nav {
@media (max-width:720px) {
 html[data-r1074-theme="berhet"] body #gqHub>summary {
  display:grid!important;grid-template-columns:20px minmax(0,1fr) 12px!important;
  align-items:center!important;gap:6px!important;box-sizing:border-box!important;
  width:100%!important;min-width:0!important;max-width:100%!important;min-height:66px!important;height:auto!important;
  padding:14px 28px!important;border-image-width:11px 22px!important;
  overflow:visible!important;white-space:normal!important;
 }
 html[data-r1074-theme="berhet"] body #gqHub>summary>span:nth-child(2) {
  display:block!important;position:static!important;min-width:0!important;max-width:100%!important;
 }
 html[data-r1074-theme="berhet"] body #gqHub>summary>span:nth-child(2) :is(b,small) {
  display:block!important;position:static!important;white-space:normal!important;
  overflow-wrap:break-word!important;line-height:1.35!important;
 }
 html[data-r1074-theme="berhet"] body #gqHub>summary::after {position:static!important;justify-self:center!important;}
}
}

/* r1156: a compact title is part of the sticky navigation's measured height. */
@layer sukun-r1149-nav {
 html body .wrap>nav.tabs {
  flex-wrap:wrap!important;
  grid-template-rows:auto!important;
 }
 html body .wrap>nav.tabs>.sukunCenterHeading {
  box-sizing:border-box!important;grid-column:1 / -1!important;
  flex:0 0 100%!important;width:100%!important;min-width:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  margin:0!important;padding:3px 4px 1px!important;
  color:#e7c988!important;-webkit-text-fill-color:currentColor!important;
  font:650 clamp(10px,2.7vw,12px)/1.3 system-ui,sans-serif!important;
  letter-spacing:.11em!important;text-align:center!important;
  white-space:normal!important;overflow-wrap:break-word!important;
  text-shadow:0 1px 3px #000b!important;
 }
 html body .wrap>nav.tabs>.sukunCenterHeading>span:first-child,
 html body .wrap>nav.tabs>.sukunCenterHeading>span:last-child {
  color:#c49a53!important;font-size:.8em!important;flex:none!important;
 }
 @media(forced-colors:active) {
  html body .wrap>nav.tabs>.sukunCenterHeading,
  html body .wrap>nav.tabs>.sukunCenterHeading>span {color:CanvasText!important;text-shadow:none!important}
 }
}

/* r1157: panel title sits above volume and the complete quick controls. */
@layer sukun-r1149-nav {
 html body .wrap>.masterBar>.sukunControlHeading {
  box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;gap:7px!important;
  margin:0 0 10px!important;padding:3px 4px!important;
  color:#e7c988!important;-webkit-text-fill-color:currentColor!important;
  font:650 clamp(10px,2.7vw,12px)/1.3 system-ui,sans-serif!important;letter-spacing:.11em!important;
  white-space:normal!important;overflow-wrap:break-word!important;text-align:center!important;
  text-shadow:0 1px 3px #000b!important;
 }
 html body .wrap>.masterBar>.sukunControlHeading>span:first-child,
 html body .wrap>.masterBar>.sukunControlHeading>span:last-child {
  flex:none!important;color:#c49a53!important;font-size:.8em!important;
 }
 @media(forced-colors:active) {
  html body .wrap>.masterBar>.sukunControlHeading,
  html body .wrap>.masterBar>.sukunControlHeading>span {color:CanvasText!important;text-shadow:none!important}
 }
}

/* Berhetiyye diagnostics: keep labels within the carved ends on phones.
   The technical tables retain their own horizontal scroll. */
@layer sukun-r1149-nav {
 @media (max-width: 600px) {
  html[data-r1074-theme="berhet"] body #r455Diag .dShell {
   box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
   padding-inline:12px!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dHead {
   grid-template-columns:minmax(0,1fr)!important;gap:8px!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag :is(.dTitle,.dSub) {
   min-width:0!important;max-width:100%!important;text-align:center!important;
   white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.4!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag :is(.dHeadBtns,.r649LabActions,.r501OverflowActions) {
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:7px!important;min-width:0!important;width:100%!important;justify-content:center!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag :is(.dHeadBtns,.r649LabActions,.r501OverflowActions)>button {
   box-sizing:border-box!important;min-width:0!important;max-width:100%!important;width:100%!important;
   min-height:48px!important;height:auto!important;max-height:none!important;margin:0!important;
   padding:10px 19px!important;border-image-width:8px 15px!important;
   white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
   font-size:11px!important;line-height:1.3!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dGrid {
   grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dCard {
   min-width:0!important;max-width:100%!important;height:auto!important;padding:10px 16px!important;
   text-align:center!important;overflow-wrap:anywhere!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dCard :is(small,b,em) {
   white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
   overflow-wrap:anywhere!important;line-height:1.35!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dShell>details>summary {
   display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,100px)!important;
   align-items:center!important;gap:6px!important;box-sizing:border-box!important;
   width:100%!important;min-width:0!important;max-width:100%!important;
   height:auto!important;min-height:52px!important;max-height:none!important;padding:12px 22px!important;
   border-image-width:9px 17px!important;text-align:center!important;line-height:1.35!important;
   white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dShell>details>summary>span {
   display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;
   overflow-wrap:anywhere!important;text-align:center!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag :is(.dBody,.dTests,.dTest,.dNote,.dDetail,.dLogLine) {
   min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-r1074-theme="berhet"] body #r455Diag .dTableWrap {
   min-width:0!important;max-width:100%!important;overflow-x:auto!important;
  }
  /* The same health panel can live in a dialog or in Diagnostics. */
  html[data-r1074-theme="berhet"] body #r940HealthDialog:has(#r940Health) {
   box-sizing:border-box!important;max-width:calc(100vw - 20px)!important;padding:12px!important;
  }
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 {
   box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
   overflow-wrap:anywhere!important;
  }
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 :is(button,select) {
   box-sizing:border-box!important;min-width:0!important;max-width:100%!important;min-height:46px!important;
   height:auto!important;max-height:none!important;padding:11px 20px!important;border-image-width:9px 16px!important;
   white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;line-height:1.35!important;
  }
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 :is(.hv-area,.hv-advanced)>summary,
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943>.hv-panel-summary {
   display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
   box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
   height:auto!important;min-height:58px!important;max-height:none!important;padding:13px 22px!important;
   border-image-width:9px 17px!important;white-space:normal!important;overflow-wrap:anywhere!important;
   text-align:center!important;line-height:1.35!important;
  }
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 :is(.hv-area,.hv-advanced)>summary>strong,
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943>.hv-panel-summary>strong {
   flex:1 1 auto!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
  }
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 :is(.hv-badge,.hv-check-head strong) {
   min-width:0!important;max-width:110px!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
  }
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 .hv-check-head strong {max-width:none!important;flex:1 1 auto!important}
  html[data-r1074-theme="berhet"] body #r940Health.hv-r943 :is(.hv-guides,.hv-action-list) {
   grid-template-columns:minmax(0,1fr)!important;min-width:0!important;
  }
 }
}

/* Berhetiyye ambience cards: equal rows, compact controls and the volume
   label beside its existing slider. Native audio controls are unchanged. */
@layer sukun-r1149-nav {
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .mixGrid {
  align-items:stretch!important;grid-auto-rows:1fr!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn {
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
  align-content:start!important;align-items:center!important;gap:2px 5px!important;
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:0!important;padding:8px 9px!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chTop {
  display:grid!important;grid-column:1/-1!important;min-width:0!important;width:100%!important;
  grid-template-columns:minmax(18px,1fr) 28px 28px 44px!important;
  grid-template-areas:"ic name name name" "eq . info sw"!important;
  align-items:center!important;gap:2px 3px!important;margin:0!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chTop:has(>.chPrev) {
  grid-template-columns:minmax(18px,1fr) 28px 28px 44px!important;
  grid-template-areas:"ic name name name" "eq prev info sw"!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chTop>.chName {
  min-width:0!important;max-width:100%!important;overflow:visible!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chTop>.chName :is(b,small,.r409AmbDiff) {
  display:block!important;min-width:0!important;max-width:100%!important;
  white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;
  text-overflow:clip!important;-webkit-line-clamp:unset!important;line-height:1.3!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chActions {
  grid-column:1/-1!important;min-width:0!important;margin:1px 0!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.r1030ChannelVolumeLabel {
  grid-column:1!important;align-self:center!important;min-width:0!important;width:auto!important;
  margin:0!important;padding:0!important;white-space:normal!important;overflow-wrap:normal!important;
  font:600 10px/1.2 system-ui,sans-serif!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>input[type="range"] {
  grid-column:2!important;align-self:center!important;box-sizing:border-box!important;
  min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;
 }
 @media(max-width:340px) {
  html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.r1030ChannelVolumeLabel {font-size:9px!important}
 }
}

/* Narrow ambience cards preserve a usable slider and avoid clipping the
   personal recording actions. Wider cards keep label and slider side by side. */
@layer sukun-r1149-nav {
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn {
  container-type:inline-size!important;container-name:sukun-ambient-card!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chActions {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;
  width:100%!important;max-width:100%!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.chActions>button {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;width:100%!important;
  min-height:44px!important;height:auto!important;padding:6px 8px!important;border-image-width:5px 7px!important;
  white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important;text-align:center!important;
 }
 html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>input[type="range"] {
  min-height:36px!important;
 }
 @container sukun-ambient-card (max-width: 140px) {
  html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.r1030ChannelVolumeLabel,
  html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>input[type="range"] {
   grid-column:1/-1!important;width:100%!important;
  }
 }
 @supports not (container-type:inline-size) {
  @media(max-width:400px) {
   html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>.r1030ChannelVolumeLabel,
   html[data-r1074-theme="berhet"] body #tab-amb #mixer .chn>input[type="range"] {
    grid-column:1/-1!important;width:100%!important;
   }
  }
 }
}