/* V4.14: give the mobile brand, weather and actions their own space. */
.appHeader .accountButton{color:var(--header-ink)}
.headerInner>.brand,.headerInner>.headerActions{min-width:0}
@media(max-width:1000px){
 .appHeader .headerInner{grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;padding:10px 16px}
 .appHeader .brand{grid-column:1;grid-row:1;min-width:0;max-width:100%}
 .appHeader .brand>span:last-child{min-width:0}
 .appHeader .brand strong{font-size:22px;white-space:nowrap}
 .appHeader .weatherToggle{grid-column:2;grid-row:1;justify-self:end;min-width:0;max-width:175px;padding:2px 0;gap:7px}
 .appHeader .weatherToggle>span{display:block;min-width:0}
 .appHeader .weatherToggle .weatherIcon{width:36px;height:36px}
 .appHeader .weatherToggle strong{font-size:18px}
 .appHeader .weatherToggle small{font-size:12px;max-width:115px;margin:2px 0 0}
 .appHeader .headerActions{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:flex-end;gap:8px;width:100%;padding-top:6px;border-top:1px solid var(--header-line);flex-wrap:nowrap}
 .appHeader .accountControl{margin-right:auto}
 .appHeader .accountButton{min-height:40px;box-sizing:border-box}
 .appHeader .accountMenu{left:0;right:auto;max-width:calc(100vw - 32px)}
 .appHeader .headerActions #personalNav{gap:8px;margin:0}
 .appHeader .headerActions #personalNav a,.appHeader .languageToggle,.appHeader .appearanceToggle{width:40px;height:40px;flex:0 0 40px;padding:8px;box-sizing:border-box}
 .appHeader .headerActions #personalNav svg{width:22px;height:22px}
 .appHeader .headerActions>.btn.primary{font-size:14px;padding:9px 12px}
 .appHeader .headerActions>.btn.primary:after{content:none}
}
@media(max-width:600px){
 .appHeader .headerInner{padding:9px 12px;gap:7px 8px}
 .appHeader .brand{gap:6px}
 .appHeader .brand strong{font-size:19px;letter-spacing:-.025em;white-space:normal;line-height:1.1}
 .appHeader .brand small{display:none}
 .appHeader .brandMark{width:31px;height:31px;flex:0 0 31px}
 .appHeader .weatherToggle{max-width:123px;gap:5px}
 .appHeader .weatherToggle .weatherIcon{width:29px;height:29px}
 .appHeader .weatherToggle strong{font-size:16px;letter-spacing:-.03em}
 .appHeader .weatherToggle small{max-width:87px;font-size:11px}
 .appHeader .headerActions>.btn.primary{display:none}
 .appHeader .headerActions{gap:9px}
 .appHeader .accountButton{width:40px;justify-content:center;padding:6px}
 .appHeader .accountButton span{display:none}
 .guideIndex a{min-height:40px;box-sizing:border-box}
 .knowledgeCard{scroll-margin-top:130px}
}
@media(max-width:350px){
 .appHeader .brand strong{font-size:17px}
 .appHeader .brandMark{width:27px;height:27px;flex-basis:27px}
 .appHeader .weatherToggle{max-width:110px}
 .appHeader .weatherToggle small{max-width:75px}
}

.contentScope{font-size:.86rem;line-height:1.6;opacity:.8;margin:24px 0;max-width:85ch}
.companionEmpty{font-size:.9rem;line-height:1.6}