/* FINAL POLISH V3 · mobile overlays, empty-state hygiene, information rhythm */

/* Empty generated targets must never become decorative blank cards. */
html body :is(.reading,.reading-card,.result-card,.panel,.card,.accordion-body,.soft-detail__body):empty,
html body :is(#pendulumFound,#pendulumClear,#dkResults,#dkBless,#pendulumOracleOut,#journalList):empty{
  display:none!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
}

/* Closed details contain only their summary; inherited panel rules may not expose the body. */
html body details:not([open]) > :not(summary){display:none!important}
html body details:not([open]){min-height:0!important}
html body details[open] > :is(.accordion-body,.soft-detail__body){display:block!important}
html body details + :is(.reading,.reading-card,.result-card):empty{display:none!important}

/* Important reflective and safety notes are calm, readable information surfaces. */
html body .view > :is(p.small-note,.small-note),
html body .pendulum-stage > p.small-note,
html body .kids-parent-note,
html body .yesno-note{
  width:min(100%,48rem)!important;
  max-width:48rem!important;
  margin:clamp(1rem,4vw,1.5rem) auto!important;
  padding:clamp(1rem,4vw,1.25rem)!important;
  border:1px solid rgba(239,199,97,.38)!important;
  border-radius:clamp(1rem,3vw,1.35rem)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.04)),rgba(8,43,31,.62)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 14px 36px rgba(0,0,0,.14)!important;
  color:#eee6d4!important;
  font-size:clamp(.96rem,3.8vw,1.05rem)!important;
  line-height:1.58!important;
  letter-spacing:-.008em!important;
  text-align:left!important;
  text-wrap:pretty!important;
}
html body .view > :is(p.small-note,.small-note) strong,
html body .pendulum-stage > p.small-note strong,
html body .kids-parent-note strong,
html body .yesno-note strong{color:#f7f0dd!important}

/* Accordion rhythm: no floating empty strip or excessive lower chamber. */
html body :is(.accordion,.soft-detail){margin-block:clamp(1rem,4vw,1.65rem)!important}
html body :is(.accordion,.soft-detail) > summary{margin:0!important}
html body :is(.accordion-body,.soft-detail__body){margin:0!important;min-height:0!important}
html body :is(.accordion-body,.soft-detail__body) > :last-child{margin-bottom:0!important}

@media(max-width:760px){
  /* The menu is a real modal navigation layer, not translucent content cards. */
  html body.menu-open{overflow:hidden!important;overscroll-behavior:none!important}
  html body .shell>header.site,
  html body .yesno-app-shell>header.site{z-index:7101!important;background:#031d15!important}
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs){
    position:fixed!important;
    inset:0!important;
    top:0!important;
    z-index:7100!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:none!important;
    padding:max(5.4rem,calc(env(safe-area-inset-top) + 4.5rem)) max(.85rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:linear-gradient(180deg,#031d15 0%,#02150f 100%)!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs).open,
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs)[aria-hidden="false"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start!important;
    gap:.625rem!important;
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button,a){
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:3.75rem!important;
    padding:.9rem 1rem!important;
    border:1px solid rgba(239,199,97,.28)!important;
    border-radius:1.05rem!important;
    background:rgba(8,43,31,.82)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
    font-size:clamp(1.05rem,4.8vw,1.28rem)!important;
    line-height:1.2!important;
    text-align:left!important;
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button,a)::before{
    display:none!important;
    content:none!important;
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button.on,a[aria-current="page"]){
    background:linear-gradient(135deg,rgba(36,92,68,.92),rgba(12,55,40,.94))!important;
    border-color:rgba(239,199,97,.72)!important;
  }

  /* Mobile text needs a stable readable measure and breathing room. */
  html body .view > :is(.lede,.kids-lede,.rune-sub){padding-inline:.35rem!important}
  html body .view > .lede{line-height:1.56!important}
  html body :is(.accordion,.soft-detail){width:100%!important;margin-block:1rem!important}
  html body :is(.accordion,.soft-detail) > summary{
    min-height:3.75rem!important;
    padding:.9rem 1rem!important;
    font-size:clamp(1.08rem,5vw,1.28rem)!important;
  }
  html body .view > :is(p.small-note,.small-note),
  html body .pendulum-stage > p.small-note,
  html body .kids-parent-note,
  html body .yesno-note{
    width:100%!important;
    max-width:none!important;
    margin:1rem 0!important;
    padding:1rem!important;
  }
}