/* Final UX hardening layer: calm hierarchy, reliable touch targets and predictable mobile behavior. */
:root{
  --uxh-header:64px;
  --uxh-page:760px;
  --uxh-reading:68ch;
  --uxh-touch:44px;
  --uxh-space:clamp(16px,3.5vw,28px);
  --uxh-radius:16px;
}
html{scroll-padding-top:calc(var(--uxh-header) + 16px)}
body{min-width:320px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden;touch-action:none}
.shell,.yesno-app-shell{width:min(100%,var(--uxh-page))!important}
.view{min-width:0}

/* Header and controls: one calm row, safe-area aware, 44px minimum targets. */
html body .shell>header.site,html body .yesno-app-shell>header.site{
  min-height:var(--uxh-header)!important;height:var(--uxh-header)!important;max-height:var(--uxh-header)!important;
  padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))!important;
}
html body header.site :is(.menu-toggle,.lang-link){min-width:var(--uxh-touch)!important;min-height:var(--uxh-touch)!important}
html body header.site .language-switch{gap:6px!important}
html body .menu-toggle{border-radius:12px!important}
html body .menu-toggle:active,html body .lang-link:active,html body .btn:active{transform:scale(.98)}

/* Mobile navigation behaves like a modal sheet, not a loose block in document flow. */
@media(max-width:760px){
  body.menu-open::before{
    content:"";position:fixed;inset:var(--uxh-header) 0 0;z-index:1097;
    background:rgba(0,8,5,.54);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  }
  html body nav#mainTabs.tabs.open,html body nav#mainTabs.tabs[aria-hidden="false"],
  html body header.site:has(.menu-toggle[aria-expanded="true"])+nav#mainTabs.tabs{
    position:fixed!important;top:var(--uxh-header)!important;left:0!important;right:0!important;z-index:1098!important;
    width:100%!important;max-height:calc(100dvh - var(--uxh-header))!important;
    margin:0!important;padding:12px max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;
  }
  html body nav.tabs :is(button,a){min-height:48px!important;display:flex!important;align-items:center!important}
  html body .view,html body .yesno-shell{padding-inline:max(12px,env(safe-area-inset-left))!important}
}

/* Reading rhythm and hierarchy. */
html body :is(p,li,dd,.lead,.description,.helper,.small-note,.note,.hint){max-width:var(--uxh-reading)}
html body p{margin-block:0 1em}
html body :is(h1,h2,h3,h4){text-wrap:balance}
html body :is(p,li,dd){text-wrap:pretty}
html body .view>:is(.panel,.card,.reading,.ritual-gate,.ritual-ok,.simple-path,.integration-panel){margin-block:16px!important}
html body :is(.panel,.card,.reading,.daily-gate,.moon-card,.soft-detail,.integration-panel,.srt-wizard-card,.srt-protocol-card){padding:clamp(16px,3vw,24px)!important}
html body :is(.btn,button,[role="button"]){min-height:44px}
html body :is(input,textarea,select){min-height:44px;font-size:16px!important;border-radius:12px!important}
html body textarea{min-height:120px;resize:vertical}
html body label{line-height:1.35}

/* Clear, consistent interaction states. */
html body :is(a,button,.btn,input,textarea,select,summary){-webkit-tap-highlight-color:rgba(244,201,95,.18)}
html body :is(button,.btn,a,input,textarea,select,summary):focus-visible{
  outline:3px solid #f4c95f!important;outline-offset:3px!important
}
html body :is(button,.btn)[disabled],html body [aria-disabled="true"]{opacity:.55!important;cursor:not-allowed!important}
html body summary{min-height:44px;display:flex;align-items:center;cursor:pointer}

/* Prevent accidental horizontal scrolling and cramped grids. */
html body :is(.panel,.card,.reading,.gate-nav,.mythology-paths,.choice-grid,.spread-grid){min-width:0;max-width:100%}
html body img,html body svg,html body canvas{max-width:100%}
@media(max-width:560px){
  html body :is(.grid,.choice-grid,.spread-grid,.mythology-paths){grid-template-columns:1fr!important}
  html body .gate-nav{gap:10px!important}
  html body :is(h1,.brand){font-size:clamp(34px,10vw,46px)!important}
  html body h2{font-size:clamp(27px,7.5vw,36px)!important}
}

/* Motion should support orientation, never compete with content. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(prefers-contrast:more){
  html body :is(button,.btn,a,input,textarea,select,summary):focus-visible{outline-width:4px!important}
}