@import url("./final-audit-fixes.css");

/*
 * FINAL DESIGN GOVERNANCE LAYER — 2026-07-21
 * One surface system, one contrast contract, no legacy paper/light cards.
 * This file is intentionally loaded last and owns the final visual result.
 */
:root{
  --surface-green:#0b3023;
  --surface-green-deep:#041d15;
  --surface-green-soft:#10402f;
  --surface-green-hover:#164b38;
  --surface-text:#f7f0dd;
  --surface-muted:#ddd3bd;
  --surface-gold:#efc761;
  --surface-line:rgba(239,199,97,.46);
  --surface-shadow:0 18px 48px rgba(0,0,0,.32);
}

html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs){z-index:4998!important}

html body .yesno-page,
html body .yesno-shell,
html body .yesno-app-shell{
  background:transparent!important;
  color:var(--surface-text)!important;
}
html body .yesno-site-header{position:sticky!important;top:0!important;z-index:5000!important}

/* Every content container uses the same dark-green surface contract. */
html body :is(
  .gate-copy,.gate-intro,.gate-context,.gate-paths,
  .daily-gate,.moon-card,.daily-visitor-card,
  .panel,.card,.reading,.reading-card,.result-card,
  .ritual-gate,.ritual-ok,.ritual-card,
  .simple-path,.integration-panel,.experience-card,.experience-summary,
  .srt-wizard-card,.srt-protocol-card,.srt-identity,.srt-add-subject,.srt-clearing,.srt-closing-formula,
  .pendulum-stage,.pendulum-clearing-complete,.pendulum-key-item,
  .kids-card,.kids-result,.kids-feelings,
  .lexcard,.lex-card,.journal-card,.journal-paper,
  .mythology-guide,.mythology-card,.mythology-path,.mythology-paths,.mythology-note,
  .choice-card,.choice-panel,.choice-grid,
  .priestess,.dk-energy,.dark-panel,
  .result-ai-prompt,.ai-prompt-copy,.question-refiner,.shadow-incantation,
  .soft-detail,.cave-disclaimer,.ceridwen-reminder,.reco,
  .ck-light-card,.gate-light,.light-panel,.paper-panel,.cream-panel,.result-paper,
  .yesno-light,.yesno-note,.yesno-hero,.yesno-card,
  .menu-panel,.mobile-menu,
  [data-surface="light"],[data-surface="paper"],[data-panel]
){
  background-color:var(--surface-green)!important;
  background-image:linear-gradient(180deg,rgba(16,64,47,.98),rgba(4,29,21,.99))!important;
  color:var(--surface-text)!important;
  border-color:var(--surface-line)!important;
  box-shadow:var(--surface-shadow)!important;
}

html body :is(
  .gate-copy,.gate-intro,.gate-context,.gate-paths,
  .daily-gate,.moon-card,.daily-visitor-card,
  .panel,.card,.reading,.reading-card,.result-card,
  .ritual-gate,.ritual-ok,.ritual-card,
  .simple-path,.integration-panel,.experience-card,.experience-summary,
  .srt-wizard-card,.srt-protocol-card,.srt-identity,.srt-add-subject,.srt-clearing,.srt-closing-formula,
  .pendulum-stage,.pendulum-clearing-complete,.pendulum-key-item,
  .kids-card,.kids-result,.kids-feelings,
  .lexcard,.lex-card,.journal-card,.journal-paper,
  .mythology-guide,.mythology-card,.mythology-path,.mythology-paths,.mythology-note,
  .choice-card,.choice-panel,.priestess,.dk-energy,.dark-panel,
  .result-ai-prompt,.ai-prompt-copy,.question-refiner,.shadow-incantation,
  .soft-detail,.cave-disclaimer,.ceridwen-reminder,.reco,
  .ck-light-card,.gate-light,.light-panel,.paper-panel,.cream-panel,.result-paper,
  .yesno-light,.yesno-note,.yesno-hero,.yesno-card,
  [data-surface="light"],[data-surface="paper"],[data-panel]
) :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,b,i,label,legend,summary,dt,dd,.note,.hint,.muted,.meta,.description,.subtitle,.caption,.lead,.sub,.text,.copy,.helper,.disclaimer){
  color:var(--surface-text)!important;
  opacity:1!important;
  text-shadow:none!important;
}

html body :is(
  .panel,.card,.reading,.ritual-gate,.simple-path,.integration-panel,
  .srt-wizard-card,.srt-protocol-card,.pendulum-stage,.kids-card,.kids-result,
  .lexcard,.lex-card,.journal-card,.mythology-card,.experience-card,.soft-detail,
  .yesno-card,.yesno-note
) :is(.muted,.hint,.meta,.caption,.small-note,.description,.subtitle){color:var(--surface-muted)!important}

html body :is(
  .panel,.card,.reading,.ritual-gate,.simple-path,.integration-panel,
  .srt-wizard-card,.srt-protocol-card,.pendulum-stage,.kids-card,.kids-result,
  .lexcard,.lex-card,.journal-card,.mythology-card,.experience-card,.soft-detail,
  .yesno-card,.yesno-note
) :is(a,.eyebrow,.kicker,.gold,.accent){color:var(--surface-gold)!important}

html body :is(.soft-detail summary,.result-ai-prompt summary,.accordion summary,.choice-card:hover,.pendulum-key-item:hover){
  background:rgba(2,22,16,.46)!important;color:var(--surface-text)!important
}
html body :is(.choice-card,.pendulum-key-item,.soft-detail,.result-ai-prompt):hover{
  background-color:var(--surface-green-hover)!important;border-color:rgba(239,199,97,.68)!important
}

html body :is(input,textarea,select){background:#fffaf0!important;color:#172019!important;border-color:rgba(239,199,97,.55)!important}
html body :is(input,textarea)::placeholder{color:#59615a!important;opacity:1!important}

/* Homepage entrance is content, not a card or sheet. */
html body #v-gate,
html body #gateHero,
html body .gate-hero{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  outline:0!important;
}
html body #gateHero::before,
html body #gateHero::after,
html body .gate-hero::before,
html body .gate-hero::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* Final header contract: no legacy centering, floating width or double sticky offsets. */
html body .shell{width:min(100%,1080px)!important;max-width:1080px!important;margin:0 auto!important;padding:0 clamp(12px,3vw,22px) 90px!important}
html body .shell>header.site,
html body .yesno-app-shell>header.site{
  position:sticky!important;top:0!important;z-index:5000!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
  width:100%!important;max-width:none!important;height:64px!important;min-height:64px!important;
  margin:0!important;padding:8px 12px!important;gap:12px!important;
  border-radius:0 0 18px 18px!important;background:rgba(2,24,17,.985)!important;
  border:1px solid var(--surface-line)!important;border-top:0!important;box-shadow:0 12px 34px rgba(0,0,0,.30)!important
}
html body header.site .language-switch{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;flex:0 0 auto!important}
html body header.site .menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;flex:0 0 48px!important;width:48px!important;height:48px!important}
html body header.site::before,html body header.site::after{display:none!important;content:none!important}

/* No dark veil may sit above the menu. */
html body.menu-open::before,
html body.menu-open::after,
html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs)::before,
html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs)::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:760px){
  html body .shell{padding-inline:0!important}
  html body .shell>header.site,html body .yesno-app-shell>header.site{border-radius:0!important;padding-inline:max(14px,env(safe-area-inset-left))!important}
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs){
    display:none!important;position:fixed!important;top:64px!important;left:0!important;right:0!important;transform:none!important;
    z-index:6000!important;width:100%!important;max-width:none!important;height:auto!important;max-height:calc(100dvh - 64px)!important;margin:0!important;
    padding:12px 14px max(24px,env(safe-area-inset-bottom))!important;overflow-y:auto!important;
    background:#031d15!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--surface-line)!important;
    border-radius:0 0 24px 24px!important;box-shadow:0 24px 45px rgba(0,0,0,.45)!important;
    opacity:1!important;filter:none!important;backdrop-filter:none!important;-webkit-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;gap:8px!important
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button,a){
    display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    width:100%!important;min-height:76px!important;margin:0!important;padding:12px 14px!important;
    border:1px solid rgba(239,199,97,.20)!important;border-radius:18px!important;
    background:#082a1f!important;color:var(--surface-text)!important;
    opacity:1!important;filter:none!important;text-shadow:none!important;box-shadow:none!important
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button,a) *{
    color:inherit!important;opacity:1!important;filter:none!important;text-shadow:none!important
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button,a)::before{
    opacity:1!important;color:var(--surface-gold)!important;border-color:rgba(239,199,97,.55)!important
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) :is(button.on,a[aria-current="page"]){
    background:#10402f!important;border-color:var(--surface-gold)!important
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) .menu-title{
    color:var(--surface-text)!important;opacity:1!important;font-weight:750!important
  }
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs) .menu-description{
    color:var(--surface-muted)!important;opacity:1!important
  }
  html body .view,html body #v-gate{padding-inline:12px!important}
  html body .gate-hero{margin:16px 0!important;padding-inline:0!important}
}

@media(min-width:761px){
  html body :is(nav#mainTabs.tabs,nav#yesNoNav.tabs){position:sticky!important;top:64px!important;width:100%!important;margin:0 auto 24px!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:repeat(3,minmax(0,1fr))!important;padding:10px 12px!important;
    overflow-x:visible!important;background:rgba(2,24,17,.985)!important;border-bottom:1px solid var(--surface-line)!important
  }
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}