/* r1197: use the horizontal 2170px gemstone masters at their intended
   nine-slice proportions. Keep native sizes, click owners and hidden states. */
@layer sukun-r1197-control-detail {
 /* A single centering method avoids the legacy transform/translate rules
    combining into a right-shifted hidden-player handle. Keep the visual
    viewport engine's inline top/bottom adjustments intact. */
 html[data-r1074-theme="berhet"] body.r431-dock-visible.r433-dock-hidden:not(.r441-peek-tab) #r433DockPeek {
  box-sizing:border-box!important;position:fixed!important;left:0!important;right:0!important;
  margin-left:auto!important;margin-right:auto!important;transform:none!important;translate:none!important;
  width:min(300px,calc(100vw - 24px))!important;min-width:0!important;max-width:calc(100vw - 24px)!important;
 }
 /* Leave enough scrolling room for controls above the fixed handle. */
 html[data-r1074-theme="berhet"] body.r920-practice-on.r431-dock-visible.r433-dock-hidden #r920Practice {
  padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important;
  scroll-margin-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important;
 }
 @media (forced-colors:none) {
  /* Selected target mode must remain distinguishable from the inactive gem. */
  html[data-r1074-theme="berhet"] body #tab-zkr :is(#ebBtn,#freeBtn).act {
   --r1133-gem:var(--sukun-gem-emerald)!important;
   border:1px solid transparent!important;
   border-image:var(--r1133-gem) 210 540 fill / 12px 24px / 0 stretch!important;
   background:none!important;color:#fff7d5!important;
   filter:drop-shadow(0 0 4px rgba(108,255,170,.8))!important;
   font-weight:750!important;
  }
  html[data-r1074-theme="berhet"] body #tab-zkr :is(#ebBtn,#freeBtn).act > span:last-child::after {
   content:' ✓'!important;color:#d7ffdf!important;font-weight:800!important;
  }
  html[data-r1074-theme="berhet"] body :is(#r920JourneyRestartAll,#bsRestartAll,#r1193Journey28restart,#r883JourneyRemote [data-act="restartAll"]) {
   --r1133-gem:var(--sukun-gem-emerald)!important;
   border:1px solid transparent!important;
   border-image:var(--r1133-gem) 210 540 fill / 14px 36px / 0 stretch!important;
   background:none!important;box-shadow:none!important;filter:none!important;
   padding:15px 38px!important;line-height:1.4!important;
   text-shadow:0 1px 1px #000!important;image-rendering:auto!important;
  }
  html[data-r1074-theme="berhet"] body :is(#r1056FocusControlsToggle,#r938PanelToggle,#r1064CurrentReadingOpen,#r1082SessionEntry,#r1056ReadingSource) {
   border-image-slice:210 540 fill!important;
   border-image-width:13px 33px!important;border-image-repeat:stretch!important;
   background:none!important;image-rendering:auto!important;
   text-shadow:0 1px 1px #000!important;font-weight:650!important;
  }
  /* The narrow +/- controls use square gems instead of squeezed end caps. */
  html[data-r1074-theme="berhet"] body #r932EasyPlus {
   border-image:var(--sukun-gem-sapphire-square) 330 fill / 10px / 0 stretch!important;
  }
  html[data-r1074-theme="berhet"] body #r932EasyMinus {
   border-image:var(--sukun-gem-silver-square) 330 fill / 10px / 0 stretch!important;
  }
  /* Notifications uses the same sapphire and emerald states as navigation. */
  html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button[data-t="ntf"] {
   --r1133-gem:var(--sukun-gem-sapphire)!important;
   --r1160-gem:var(--sukun-gem-sapphire)!important;
   --r1176-glow-rgb:113 184 255!important;
  }
  html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button[data-t="ntf"].act {
   --r1133-gem:var(--sukun-gem-emerald)!important;
   --r1160-gem:var(--sukun-gem-emerald)!important;
   --r1204-nav-gem:var(--sukun-gem-emerald-square)!important;
   --r1176-glow-rgb:141 242 174!important;
  }
  @media (hover:hover) {
   html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button[data-t="ntf"]:not(:disabled):hover {
    --r1133-gem:var(--sukun-gem-emerald)!important;
    --r1160-gem:var(--sukun-gem-emerald)!important;
    --r1204-nav-gem:var(--sukun-gem-emerald-square)!important;
    --r1176-glow-rgb:141 242 174!important;
   }
  }
  /* r1204: compact navigation needs square-cut masters. Compressing the
     horizontal carved ends into 7px erased the frame and facet detail. */
  @media (max-width:720px) {
   html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button {
    --r1204-nav-gem:var(--sukun-gem-sapphire-square);
    border:1px solid transparent!important;
    border-image:var(--r1204-nav-gem) 330 fill / clamp(9px,2.3vw,13px) / 0 stretch!important;
    /* Nine-slice borders paint inward without reserving layout space. Keep
       wrapped and enlarged labels inside the square frame, not over its gold. */
    padding:clamp(9px,2.3vw,13px)!important;
    background:none!important;image-rendering:auto!important;
    text-shadow:0 1px 1px #000!important;
   }
   html[data-r1074-theme="berhet"] body .wrap>nav.tabs>#tekkeTab {
    --r1204-nav-gem:var(--sukun-gem-amethyst-square);
   }
   html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button.act,
   html[data-r1074-theme="berhet"] body .wrap>nav.tabs>#tekkeTab.act {
    --r1204-nav-gem:var(--sukun-gem-emerald-square);
   }
  }
  @media (min-width:721px) {
   /* 540/210 source slices need the same horizontal/vertical scale.
      Previously the 540px carved ends were squeezed into only 7px. */
   html[data-r1074-theme="berhet"] body .wrap>nav.tabs>button {
    border-image-slice:210 540 fill!important;
    border-image-width:10px 26px!important;border-image-repeat:stretch!important;
    padding-inline:12px!important;text-shadow:0 1px 1px #000!important;
    image-rendering:auto!important;
   }
   html[data-r1074-theme="berhet"] body #r920Practice :is(#r920ModeEsma,#r920ModeBerhet,#r920AtlasOpen,#r920JourneyMode) {
    border-image-width:14px 36px!important;border-image-repeat:stretch!important;
    text-shadow:0 1px 1px #000!important;image-rendering:auto!important;
   }
   html[data-r1074-theme="berhet"] body #r938PanelBody summary {
    border-image-width:13px 33px!important;border-image-repeat:stretch!important;
    text-shadow:0 1px 1px #000!important;
   }
  }
 }
}