/* First-visit helpers (xag-onboarding): Sign in label on phones, the How to start holder, and colours for all four looks. */

/* 1. The Sign in button was an icon only below 1100px. Keep the icon and show the word next to it (the text is the translated button text). */
@media (max-width: 1099px) {
  .site-header .header-actions #authBtn { font-size: .72rem !important; gap: .3rem; min-width: 44px; padding: 0 .55rem !important; white-space: nowrap; }
}

/* 2. How to start lives in #xagHowToHost (first thing in <main>) and is only visible on Home and Dashboard. */
#xagHowToHost { display: none; }
body:has(#page-home.active) #xagHowToHost, body:has(#page-dashboard.active) #xagHowToHost { display: block; padding: 0 1rem; }
#xagHowToHost .xag-ob-howto { margin: .75rem auto; }
#xagHowToHost .xag-ob-howto-link { margin: .25rem auto; }

/* 3. Colours for the How to start box and its link. Light is the default; Dark and Glassy (and Auto, which sets one of them) use the navy palette. */
:root { --xag-ob-brand: #1d6b8a; --xag-ob-soft: #ffffff; --xag-ob-ink: #0b1c2d; --xag-ob-link: #14566f; }
html[data-theme="dark"], html[data-theme="glass"] { --xag-ob-brand: #7fd0ff; --xag-ob-soft: #143270; --xag-ob-ink: #eaf1ff; --xag-ob-link: #bfe6ff; }
html[data-theme="glass"] #xagHowToHost .xag-ob-howto { background: rgba(20, 50, 112, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* 4. After "Got it" the module leaves a small "Show me where to start" link next to the button: keep it at the end of the header row, not at the start. */
.site-header .header-actions .xag-ob-again { order: 11; font-size: .72rem; min-height: 36px; padding: .2rem .4rem; white-space: nowrap; }