/* Shared controls and layout rules across home, chat, information and directory. */
:root{--control-height:44px;--panel-radius:24px;--muted:#647367;--soft:#f2f5ef}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}button:disabled{opacity:.5;cursor:wait}
.header-actions{display:flex;align-items:center;gap:12px}
.language-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px;padding:10px 14px;border-radius:24px;background:var(--soft);white-space:nowrap}
.language-button span:last-child{color:var(--muted)}
.field{width:100%;border:0;border-radius:14px;min-height:48px;padding:12px 15px;background:var(--soft);color:var(--ink);font:inherit;font-size:16px;outline-offset:3px}
.language-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:240px;overflow:auto;margin:18px 0 22px;padding:2px}
.language-option{border:0;border-radius:12px;padding:12px 10px;min-height:44px;background:var(--soft);font-size:13px;overflow-wrap:anywhere}.language-option[aria-pressed=true]{background:var(--green);color:white}
#custom-language-form>label,.voice-choice{font-size:13px;color:var(--muted)}.custom-language{display:flex;gap:8px;margin-top:8px}.custom-language .solid-button{margin:0;flex-shrink:0}.voice-choice{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin-top:18px}.language-note{font-size:12px!important;line-height:1.5!important;margin:15px 0 0!important}
dialog{max-height:calc(100dvh - 40px);overflow:auto}.modal-close{min-width:44px;min-height:44px;top:9px;right:10px}.solid-button{min-height:44px;line-height:1.3;font-size:14px}
.source-card{min-width:0}.source-card b,.source-card span,.health-source a{overflow-wrap:anywhere}.source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.information-page{max-width:810px}.information-page h1{overflow-wrap:anywhere}.information-page p,.information-page li{max-width:100%}
.ask-form{min-width:0}.ask-form input{min-width:0;flex:1;font-size:16px}.ask-actions{flex-shrink:0}.ask-actions .icon-button{min-width:36px;min-height:40px}.send{flex-shrink:0}
.answer-actions{align-items:center;flex-wrap:wrap}.answer-actions button{min-width:40px;min-height:40px}.answer-actions .listen-answer{width:auto;padding:8px 12px;gap:7px;display:inline-flex;align-items:center;min-height:36px;font-size:12px;background:var(--soft);border-radius:20px}.ai-voice-label{font-size:10px;color:var(--muted)}
.chat-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}.chat-active .conversation{padding-bottom:230px}.answer-content{overflow-wrap:anywhere}.answer-message code{overflow-wrap:anywhere}
.translated .hero{height:auto;min-height:930px;padding-bottom:32px}.translated .hero-copy h1{font-size:clamp(40px,6.5vw,90px);line-height:1.08;max-width:1000px;margin-inline:auto;padding-inline:15px}.translated .hero-copy p{max-width:720px;padding-inline:22px}.translated .hero-stage{margin-top:55px}.translated .preview-card{height:auto;min-height:445px}.translated .preview-card h3{overflow-wrap:anywhere}.translated .feature-copy h2{font-size:clamp(30px,3.5vw,48px)}.language-loading [data-language-button]{opacity:.65}
#nav-menu{min-height:0;max-height:calc(100dvh - 32px);overflow:auto;padding-top:70px}.menu-note{flex-shrink:0}.nav-close{min-height:44px}
.directory-filters{display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));gap:10px;margin:25px 0}.directory-count{font-size:13px!important;color:var(--muted)}.directory-results{display:grid;gap:10px}.directory-entry{padding:22px;background:var(--soft);border-radius:20px}.directory-entry h3{margin:0 0 7px;font-size:17px;line-height:1.4}.directory-entry p{font-size:12px;margin:7px 0;line-height:1.5}.directory-entry a{font-size:13px;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}.directory-entry .directory-status{font-size:11px;color:#856b18}.directory-entry .directory-meta{color:var(--muted)}.directory-more{display:block;margin:24px auto}.directory-summary{padding:20px 24px;background:#fbf7e9;border-radius:20px;margin:25px 0}.directory-summary p{font-size:13px;line-height:1.6;margin:0}
.directory-filters>label{min-width:0;font-size:12px}.directory-filters>label>span{display:block;margin:0 0 7px}
.directory-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.directory-filters>label:first-child{grid-column:1/-1}
@media(max-width:680px){
  #header{padding-inline:20px}.header-actions{gap:8px}.header-actions .language-button{max-width:110px;font-size:11px;padding:8px 11px;overflow:hidden;text-overflow:ellipsis}.header-actions .language-button span:first-child{overflow:hidden;text-overflow:ellipsis}
  body.chat-active #header{padding-inline:20px}.brand{font-size:21px}.brand .flag{width:21px}#menu-button{min-width:58px;padding-inline:14px;min-height:44px}
  #nav-menu{min-height:0;padding:65px 25px 24px;max-height:calc(100dvh - 24px)}#nav-menu>a,#nav-menu>button:not(.nav-close){font-size:24px;line-height:1.2;padding:13px 0}
  dialog{width:100%;max-width:none;margin:auto 0 0;max-height:calc(100dvh - 24px);border-radius:28px 28px 0 0;padding:38px 24px calc(25px + env(safe-area-inset-bottom,0px));animation:sheet-enter .22s ease-out}.modal-close{top:8px;right:10px}dialog h2{font-size:32px;padding-right:18px}
  .language-options{grid-template-columns:repeat(3,minmax(0,1fr));max-height:240px}.language-option{font-size:12px;padding:12px 5px}.voice-choice{grid-template-columns:75px 1fr}
  .source-grid{grid-template-columns:1fr}.source-card{border-radius:20px}.information-page{width:calc(100% - 40px);margin-top:145px}.information-page h1{font-size:46px}.information-page .lead{font-size:18px}
  .hero-ask .ask-actions,.chat-bottom .ask-actions,.floating-ask .ask-actions{gap:3px}.hero-ask,.chat-bottom .ask-form,.floating-ask .ask-form{padding-left:18px;padding-right:10px}.hero-ask input{font-size:16px}.ask-actions .icon-button{min-width:31px}.send{width:36px!important;height:40px!important}
  .translated .hero{min-height:0;padding-top:135px;padding-bottom:24px}.translated .hero-copy h1{font-size:clamp(37px,11vw,57px);letter-spacing:-2px}.translated .hero-copy p{font-size:18px;max-width:340px}.translated .hero-stage{margin-top:35px}.translated .feature-copy h2{font-size:33px}.translated .intro-copy{font-size:38px}.translated footer>nav{font-size:12px}
  .directory-filters{grid-template-columns:1fr 1fr}.directory-filters input{grid-column:1/-1}.directory-entry{padding:20px}.directory-entry h3{font-size:16px}.directory-summary{padding:18px 20px}
  .directory-filters>label:first-child{grid-column:1/-1}
  .directory-filters>label:last-child{grid-column:1/-1}
}
@keyframes sheet-enter{from{transform:translateY(25px);opacity:.5}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){dialog{animation:none}}
.community-entry{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:810px;width:calc(100% - 48px);margin:42px auto 0;padding:25px 30px;border-radius:24px;background:#f5f7f2;font-size:18px;line-height:1.45;color:var(--green);letter-spacing:-.3px}.community-entry svg{width:25px;height:25px;flex-shrink:0}.community-entry:hover{background:#eef3e9}@media(max-width:680px){.community-entry{font-size:16px;width:calc(100% - 40px);padding:23px 25px;margin-top:30px;gap:20px}}
/* Language changes use the native modal top layer. Its backdrop keeps the page in view. */
body.language-loading{overflow:hidden;overscroll-behavior:none}
dialog.language-transition{position:fixed;inset:0;width:100vw;height:100dvh;min-height:100dvh;max-width:none;max-height:none;margin:0;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--ink);overflow:auto;outline:none;animation:none;overscroll-behavior:contain}
dialog.language-transition[open]{display:grid;place-items:center}
dialog.language-transition::backdrop{background:#ffffffdf;backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);animation:language-backdrop-enter .28s ease both}
.language-transition-card{width:min(480px,100%);padding:20px 0 34px;text-align:center;opacity:1;transform:none;animation:language-card-enter .38s cubic-bezier(.2,.7,.2,1) both}
.language-transition-art{position:relative;isolation:isolate;width:182px;height:182px;margin:0 auto 30px}
.language-transition-art:before{content:'';position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle,#bdd6c381 0,#dfece466 45%,transparent 73%);filter:blur(17px);animation:language-glow 3.6s ease-in-out infinite}
.language-transition-art:after{content:'';position:absolute;inset:40px 2px;border-radius:50%;box-shadow:0 0 0 1px #bdd1c14d;transform:rotate(-30deg)}
.language-orbit{position:absolute;inset:12px 1px;border-radius:50%;background:conic-gradient(from 40deg,transparent 0deg,#d6e4d8 55deg,#74a387 90deg,transparent 150deg,#b8d1bf 240deg,transparent 310deg);mask:radial-gradient(ellipse,transparent 64%,#000 65%,#000 66.5%,transparent 67.5%);-webkit-mask:radial-gradient(ellipse,transparent 64%,#000 65%,#000 66.5%,transparent 67.5%);transform:rotate(-35deg);animation:language-orbit-turn 7.5s linear infinite}
.language-transition-art>i{position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:#689a7b;box-shadow:0 0 13px #9ebea77d;animation:language-dot-drift 3.6s ease-in-out infinite}
.language-transition-art>i:nth-of-type(1){top:35px;right:25px;width:6px;height:6px;animation-delay:-1.2s}.language-transition-art>i:nth-of-type(2){left:12px;top:103px;background:#b5cfbc;animation-delay:-2.4s}.language-transition-art>i:nth-of-type(3){bottom:18px;right:61px;width:4px;height:4px;background:#719f82}
.language-core{position:absolute;inset:54px;border-radius:50%;z-index:3;display:flex;align-items:center;justify-content:center;gap:4px;background:radial-gradient(circle at 31% 23%,#b8d4be 0,#5d9c79 35%,#216547 76%,#15533b 100%);box-shadow:inset 0 1px 4px #f3fff47a,inset -4px -5px 13px #153e3230,0 11px 27px #356f4e25;animation:language-core-breathe 3.6s ease-in-out infinite}
.language-core>b{display:block;width:3px;height:14px;background:#f4fff5a6;border-radius:3px;animation:language-core-bars 1.8s ease-in-out infinite}.language-core>b:nth-child(2){height:23px;animation-delay:-.3s}.language-core>b:nth-child(3){height:17px;animation-delay:-.6s}
.language-transition-eyebrow{font:400 11px/1.5 var(--sans);letter-spacing:.08em;color:#879482!important;margin:0 0 13px!important}
dialog.language-transition h2{font:400 clamp(35px,5vw,49px)/1.12 var(--serif);letter-spacing:-1.8px;padding:0;margin:0 0 18px;overflow-wrap:anywhere;color:#153e2c}
dialog.language-transition #language-transition-status{font:400 14px/1.65 var(--sans);color:#74836d;max-width:370px;margin:0 auto;white-space:pre-line;overflow-wrap:anywhere}
.language-transition-progress{font:400 11px/1.5 var(--sans)!important;font-variant-numeric:tabular-nums;color:#97a08f!important;min-height:17px;margin:12px 0 0!important}
.language-transition-actions:not([hidden]){display:flex;align-items:center;justify-content:center;gap:14px 20px;flex-wrap:wrap;margin-top:26px}
.language-transition:not([data-state=error]) .language-transition-actions{display:none!important}
.language-transition-actions button{min-height:44px;border-radius:24px;font-size:13px;padding:12px 20px;line-height:1.4}
.language-transition-actions .solid-button{margin:0!important;padding:12px 23px}
#language-transition-keep{color:#6d7e63;background:#edf2e8}
.language-transition[data-state=error] .language-orbit,.language-transition[data-state=error] .language-transition-art>i,.language-transition[data-state=error] .language-core,.language-transition[data-state=error] .language-core>b{animation-play-state:paused}
.language-transition[data-state=error] #language-transition-status{color:#87723f}
.language-transition[data-state=ready] .language-core{box-shadow:inset 0 1px 4px #f3fff47a,0 0 35px #7ba68d45}
.language-transition[data-state=leaving]{animation:language-overlay-leave .2s ease forwards;pointer-events:none}.language-transition[data-state=leaving] .language-transition-card{animation:language-card-leave .2s ease forwards}.language-transition[data-state=leaving]::backdrop{animation:language-backdrop-leave .2s ease forwards}
@keyframes language-card-enter{from{opacity:0;transform:translateY(12px) scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes language-backdrop-enter{from{background:#ffffff55;backdrop-filter:blur(0)}to{background:#ffffffdf;backdrop-filter:blur(12px)}}
@keyframes language-orbit-turn{from{transform:rotate(-35deg)}to{transform:rotate(325deg)}}
@keyframes language-core-breathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
@keyframes language-core-bars{0%,100%{transform:scaleY(.75);opacity:.65}50%{transform:scaleY(1.15);opacity:1}}
@keyframes language-dot-drift{0%,100%{transform:translateY(-4px);opacity:.55}50%{transform:translateY(4px);opacity:1}}
@keyframes language-glow{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes language-overlay-leave{to{opacity:0}}@keyframes language-card-leave{to{opacity:0;transform:translateY(-7px) scale(.985);filter:blur(2px)}}@keyframes language-backdrop-leave{to{background:#ffffff00;backdrop-filter:blur(0)}}
@media(max-width:680px){dialog.language-transition{height:100dvh;max-height:none;min-height:100dvh;margin:0;max-width:none;border-radius:0;padding:24px max(26px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));animation:none}.language-transition-card{padding-bottom:25px}.language-transition-art{width:166px;height:166px;margin-bottom:26px}.language-core{inset:49px}dialog.language-transition h2{font-size:38px;letter-spacing:-1.6px;padding:0}.language-transition-actions{gap:12px!important}.language-transition-actions button{font-size:13px}.language-transition-eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){dialog.language-transition,dialog.language-transition::backdrop,.language-transition-card,.language-transition-art:before,.language-orbit,.language-transition-art>i,.language-core,.language-core>b,.language-transition[data-state=leaving],.language-transition[data-state=leaving] .language-transition-card,.language-transition[data-state=leaving]::backdrop{animation:none!important;transition:none!important}.language-transition-art:before{opacity:.7}.language-transition[data-state=leaving]{opacity:0}}

.language-custom-use{display:block;margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--soft);font-size:13px;color:var(--green)}.language-details{margin-top:24px;padding-top:15px;border-top:1px solid #edf0e9}.language-details summary{font:13px/1.5 var(--sans);color:var(--muted);cursor:pointer}.language-details p{font:12px/1.65 var(--sans);color:var(--muted);margin:14px 0 0!important}.language-options{margin-top:16px}.voice-choice{margin-top:16px}
