/* Shared mobile entry points keep the public sky and private workspace reachable. */
@media(max-width:900px){
 :root{--mobile-nav-space:0px}
 #workspace #workspace-nav button,#workspace .sidebar-bottom button{min-height:44px}
}
/* Phones keep page furniture and focused fields clear of the bottom edge. */
@media(max-width:720px){
 html{scroll-padding-bottom:calc(var(--mobile-nav-space) + 20px)}
 #landing .sky-controls{bottom:calc(var(--mobile-nav-space) + 12px)}
 #landing .constellation-sheet{max-height:calc(100dvh - var(--mobile-nav-space) - 200px);overflow-y:auto;overscroll-behavior:contain}
 #workspace .workspace-body{padding-bottom:20px}
 input,textarea,select{scroll-margin-bottom:calc(var(--mobile-nav-space) + 20px)}
}

/* Native language selection stays available on the home screen at every size. */
#landing .home-language-control{position:absolute;right:142px;top:7px;display:flex;align-items:center;gap:7px;margin:0;color:#d8c492;font:12px var(--sans,Arial,sans-serif)}
#landing .home-language-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#landing #home-language{width:108px;min-height:44px;padding:8px 9px;border:1px solid #b4995c77;border-radius:6px;background:#0b0e12;color:#efe5cc;font:13px var(--sans,Arial,sans-serif)}
#landing .observatory-header nav{right:280px}
#landing[lang=hi] .sky-intro h1,#landing[lang=gu] .sky-intro h1{white-space:normal;line-height:1.35;font-size:clamp(32px,3.8vw,60px)}
@media(max-width:1050px){
 #landing .observatory-header nav{gap:15px}
}
@media(max-width:900px){
 #landing .observatory-header{height:116px;padding:4px 18px 58px}
 #landing .home-language-control{top:62px;right:18px}
 #landing .observatory-header nav{left:18px;right:auto;top:61px;gap:10px}
 #landing .observatory-header nav a,#landing .observatory-header nav button{min-height:44px;font-size:12px;padding:8px 3px}
 #landing .sky-opening{padding-top:145px}
 #landing .sky-intro h1{white-space:normal}
}
@media(max-width:360px){
 #landing .observatory-header nav{gap:6px}
 #landing .observatory-header nav a,#landing .observatory-header nav button{font-size:var(--type-min)}
 #landing #home-language{width:94px}
}

/* Compact initial spacing keeps the header close to the viewport safe area. */
:root{--home-header-offset:16px}
#landing .observatory-header{position:absolute;inset:calc(var(--home-header-offset) + env(safe-area-inset-top,0px)) 0 auto;height:64px;padding:0 2.7vw;align-items:center;background:transparent}
#landing .reference-brand{position:absolute;left:2.7vw;top:0;height:64px}
#landing .reference-brand .brand-emblem{width:64px;height:64px}
#landing .home-language-control{top:10px}
#landing .observatory-header nav{top:10px;min-height:44px}
#landing .header-signin{margin-left:auto;min-height:44px}
#landing .sky-opening{padding-top:calc(var(--home-header-offset) + 100px + env(safe-area-inset-top,0px))}
#landing .hero-orrery{top:58px;height:calc(100% - 306px)}
#auth-code-label input{font-size:24px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:900px){
 #landing .observatory-header{height:110px;padding:0 18px}
 #landing .reference-brand{left:18px;height:52px;gap:9px}
 #landing .reference-brand .brand-emblem{width:52px;height:52px}
 #landing .reference-brand>span:last-child{font-size:23px}
 #landing .home-language-control{top:4px;right:18px}
 #landing .observatory-header nav{top:60px;left:18px;right:auto;gap:18px}
 #landing .sky-opening{height:auto;min-height:0;padding:calc(var(--home-header-offset) + 144px + env(safe-area-inset-top,0px)) 22px 200px;display:block}
 #landing .sky-intro{width:100%;max-width:620px;transform:none}
 #landing .sky-intro h1{max-width:100%;font-size:clamp(31px,6.8vw,54px)}
 #landing .hero-orrery{position:relative;inset:auto;width:100%;height:460px;margin-top:24px}
 #landing .rashi-ribbon{bottom:112px}
 #landing[data-exploring=true] .hero-orrery{display:none}
 #landing[data-exploring=true] .sky-opening{height:100svh;min-height:568px}
 #landing[data-exploring=true] .constellation-sheet{top:142px;bottom:auto;max-height:calc(100dvh - var(--mobile-nav-space) - 326px);min-height:100px;transform:none}
 #landing[data-exploring=true] .rashi-ribbon{bottom:calc(var(--mobile-nav-space) + 118px)}
}
@media(max-width:360px){
 #landing .reference-brand>span:last-child{font-size:19px;letter-spacing:0}
 #landing .reference-brand{gap:6px}
 #landing .home-language-control{right:14px}
 #landing #home-language{width:91px}
}

#landing .hero-marginal{top:110px}
@media(max-width:900px){#landing .hero-marginal{display:none}}

/* Stable rows prevent fallback-font metrics from moving the mobile illustration. */
@media(max-width:480px){
 #landing .intro-actions{flex-direction:column;align-items:flex-start;gap:16px}
 #landing .intro-actions .gold-button,#landing #explore-sky{min-height:54px}
}

/* Short screens use the constellation picker, leaving room to scroll the reading.
   The sheet starts at 142px and must end above the sky controls (12px gap + up to 148px tall when they wrap at 320px), plus 4px. */
@media(max-width:900px) and (max-height:700px){
 #landing[data-exploring=true] .rashi-ribbon{display:none}
 /* 330px: the sky controls grew by a line once their captions met the 12px type floor (QA-5). */
 #landing[data-exploring=true] .constellation-sheet{max-height:calc(100dvh - var(--mobile-nav-space) - 330px);min-height:0}
}

/* Mobile header disclosure: full-size links without a compressed desktop menu. */
#home-menu-toggle{display:none}
@media(max-width:900px){
 #landing .observatory-header.header-menu-ready{z-index:70}
 #landing .header-menu-ready #home-menu-toggle{position:absolute;top:4px;right:18px;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #b4995c77;border-radius:8px;background:#0b0e12;color:#efe5cc;cursor:pointer}
 #home-menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
 #home-menu-toggle .menu-close,#home-menu-toggle[aria-expanded=true] .menu-bars{display:none}
 #home-menu-toggle[aria-expanded=true] .menu-close{display:block}
 #landing .header-menu-ready .home-language-control{top:60px;left:18px;right:18px;flex-direction:row;justify-content:space-between}
 #landing .header-menu-ready .home-language-control>span{position:static;width:auto;height:auto;clip-path:none;font-size:13px}
 #landing .header-menu-ready #home-language{width:132px}
 #landing .header-menu-ready #home-menu{position:absolute;display:none;inset:112px 18px auto;transform:none;min-height:0;max-height:calc(100dvh - 146px - var(--mobile-nav-space));overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:4px;padding:8px;border:1px solid #b4995c77;border-radius:12px;background:#0b0e12;box-shadow:0 16px 36px #0009}
 #landing .header-menu-ready #home-menu-toggle[aria-expanded=true]+#home-menu{display:flex}
 #landing .header-menu-ready #home-menu a,#landing .header-menu-ready #home-menu button{width:100%;min-height:52px;padding:12px 16px;border-radius:6px;font:500 16px/1.5 var(--sans,Arial,sans-serif);white-space:normal;text-align:left;color:#efe5cc}
 #landing .header-menu-ready #home-menu a:hover,#landing .header-menu-ready #home-menu button:hover{background:#bc96511f}
 #landing .header-menu-ready #home-menu :focus-visible,#landing #home-menu-toggle:focus-visible{outline:2px solid #e5c77c;outline-offset:2px}
}

/* Retain navigation while scrolling without reserving an empty banner above it. */
html{scroll-padding-top:calc(124px + env(safe-area-inset-top,0px))}
#landing .observatory-header.is-sticky{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto;z-index:70;background:#090d12;pointer-events:auto;border-bottom:1px solid #b4995c55;box-shadow:0 6px 24px #0005}
@media(max-width:900px){
 #landing .header-menu-ready.is-sticky #home-menu{max-height:calc(100dvh - 130px - var(--mobile-nav-space))}
}

/* Landscape phones keep the language selector on the brand row and leave a
   readable, scrollable constellation panel above the controls. */
@media(min-width:601px) and (max-width:900px) and (max-height:500px){
 #landing .observatory-header{height:64px}
 #landing .header-menu-ready .home-language-control{top:4px;left:auto;right:78px;gap:10px}
 #landing .header-menu-ready #home-menu{top:66px;max-height:calc(100dvh - var(--mobile-nav-space) - 100px)}
 #landing .sky-opening{padding-top:calc(var(--home-header-offset) + 104px + env(safe-area-inset-top,0px))}
 #landing[data-exploring=true] .constellation-sheet{top:96px;max-height:calc(100dvh - var(--mobile-nav-space) - 200px);padding:12px 18px}
 #landing .constellation-sheet .sheet-topline{margin:-4px -8px 0 0}
 #landing .constellation-sheet .observatory-kicker{margin:0 0 4px}
 #landing .constellation-sheet h2{font-size:32px;margin-bottom:8px}
}

/* The installed workspace reserves status-bar space before its brand and controls.
   display:contents lets the mobile toolbar stick within the entire workspace. */
:root{--app-safe-top:env(safe-area-inset-top,0px);--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);--app-safe-right:env(safe-area-inset-right,0px)}
#workspace .workspace-mobile-brand{display:none}
#workspace .workspace-topbar,#workspace .workspace-actions{display:contents}
#workspace .workspace-heading{order:0}
#workspace #new-chart{order:1}
@media(max-width:900px){
 #workspace .workspace-body{padding-top:0;padding-left:max(20px,var(--app-safe-left));padding-right:max(20px,var(--app-safe-right))}
 #workspace .workspace-header{display:contents}
 #workspace .workspace-topbar{position:sticky;top:0;z-index:60;display:flex;flex-direction:column;gap:16px;margin:0 calc(-1 * max(20px,var(--app-safe-right))) 24px calc(-1 * max(20px,var(--app-safe-left)));padding:calc(12px + var(--app-safe-top)) max(20px,var(--app-safe-right)) 16px max(20px,var(--app-safe-left));background:#090d12;border-bottom:1px solid #b4995c55}
 #workspace .workspace-mobile-brand{display:flex;align-items:center;gap:10px;align-self:flex-start;min-height:48px;color:#e4bc65;text-decoration:none;font:23px/1.2 var(--serif,Georgia,serif)}
 #workspace .workspace-mobile-brand img{width:48px;height:48px;object-fit:contain;flex-shrink:0}
 #workspace .workspace-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
 #workspace .workspace-actions .button{min-height:44px;white-space:normal}
 #workspace .workspace-heading{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid #d3c29533}
 #workspace .workspace-heading h1{scroll-margin-top:calc(164px + var(--app-safe-top))}
 #workspace .sidebar{padding:calc(12px + var(--app-safe-top)) 13px calc(12px + var(--app-safe-bottom)) max(13px,var(--app-safe-left));max-width:calc(100vw - var(--app-safe-right));}
 #workspace .nav-group summary{min-height:44px}
 #workspace .workspace-mobile-brand:focus-visible{outline:2px solid #e5c77c;outline-offset:3px}
}
@media(min-width:600px) and (max-width:900px) and (max-height:500px){
 #workspace .workspace-topbar{flex-direction:row;align-items:center;gap:12px;padding-top:calc(8px + var(--app-safe-top));padding-bottom:8px}
 #workspace .workspace-mobile-brand{font-size:19px;gap:7px}
 #workspace .workspace-mobile-brand img{width:40px;height:40px}
 #workspace .workspace-actions{width:auto;margin-left:auto}
 #workspace .workspace-heading h1{scroll-margin-top:calc(80px + var(--app-safe-top))}
}

/* Keep the brand and the four primary controls in two compact mobile rows, with 16px between the brand and the controls.
   The wrappers retain their semantics while the actions share one grid row. */
@media(max-width:900px){
 #workspace[data-view] .workspace-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.12fr);align-items:center;gap:16px 6px;padding:calc(10px + var(--app-safe-top)) max(12px,var(--app-safe-right)) 10px max(12px,var(--app-safe-left))}
 #workspace .workspace-mobile-brand{grid-column:1/-1;grid-row:1;min-height:44px;margin:0;font-size:22px;gap:8px}
 #workspace .workspace-mobile-brand img{width:44px;height:44px}
 #workspace[data-view] .workspace-actions{display:contents}
 #workspace .account-bar{grid-column:2;grid-row:2;display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;align-items:center;margin:0;order:0}
 #workspace .account-bar[hidden]{display:none}
 #workspace #workspace-menu{grid-column:1;grid-row:2}
 #workspace #new-chart{grid-column:3;grid-row:2}
 #workspace .workspace-actions .button{min-width:0;min-height:44px;width:100%;height:100%;padding:8px 5px;gap:4px;line-height:1.35;justify-content:center;overflow-wrap:anywhere}
 #workspace .workspace-heading h1{scroll-margin-top:calc(144px + var(--app-safe-top))}
}

/* Accessibility floors (gap audit §19): footer links are real 44px targets. */
#landing .footer-baseline a,.workspace-footer a{display:inline-flex;align-items:center;min-height:44px}