/* Keep the observatory quiet and the reading surface legible. Loaded last. */
:root{--text:#eee9df;--muted:#c4c7ce;--gold:#e0c284;color-scheme:dark}
body{color:var(--text);font-size:16px;line-height:1.6}
body :is(p,li,label,summary){overflow-wrap:break-word}
body :is(.muted,.field-help,.intro-fine,.chart-caption,.chart-primer){color:var(--muted);line-height:1.65}
body :is(.field-help,.section-kicker,.chip,small){font-size:max(.8125rem,13px);line-height:1.55}
body :is(input,select,textarea){font-size:16px;line-height:1.5;color:#eee9df;background-color:#151a22;border-color:#7d827f;max-width:100%}
body ::placeholder{color:#b6bac4;opacity:1}
body :is(button,.button,summary,select){min-height:44px}
body :is(.button,.text-button){font-size:15px;line-height:1.5}
body :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #f0d397;outline-offset:3px}
body :is(dialog,.home-menu-panel){background:#11161e;color:#eee9df}
dialog label{font-size:15px;color:#dddcd5}
dialog .inline-choice{display:flex;align-items:center;gap:12px;min-height:44px;line-height:1.5}
dialog .inline-choice input{width:22px;height:22px;flex:none;accent-color:#dfbd75}
#workspace{color:#eee9df}
#workspace :is(.card,.reading,.chart-essentials){background-color:#131820}
#workspace :is(.muted,.field-help,.chart-primer,.chart-caption,.birth-essentials p,.journey-link small){color:#c4c7ce;font-size:15px;line-height:1.65}
#workspace :is(.reading p,.report-fields p,.yoga-editorial-copy p){font-size:16px;line-height:1.8}
#workspace :is(.section-kicker,.chip,.sidebar-label){font-size:13px;color:#dcc691;letter-spacing:.07em}
#workspace .data-table :is(th,td){font-size:14px;line-height:1.6;padding:12px}
#workspace .data-table th{color:#d2d4d6}
#workspace .data-table td{color:#eee9df}
#workspace .nav-group summary{min-height:44px;font-size:12px;color:#bdc4d0;letter-spacing:.07em}
#workspace #workspace-nav button,#workspace #workspace-nav button span{font-size:14px;line-height:1.5;white-space:normal}
#workspace #workspace-nav button{min-height:44px;color:#e0e1e5}
#workspace .sidebar-bottom button{min-height:44px;font-size:16px}
#workspace #saved-count{font-size:13px;color:#e0c284}
#workspace .glass{background:#1c232c;color:#e4e2dd;border-color:#737575}
#workspace .primary{background:#d8be85;color:#171713}
#landing:not([data-exploring=true]) #sky-canvas{opacity:.08}
#sky-stage{background:linear-gradient(#05060ab3,#05060ab3),url('/assets/observatory-sky.webp?v=d9d91f19cc') center/cover}
#landing .hero-horizon{opacity:.6;box-shadow:none}
#landing #sky-depth-canvas{filter:brightness(.78) saturate(.8)}
#landing .marketing-line{color:#e0dcd2;line-height:1.4}
#landing :is(.orrery-controls,.orrery-inspector,.hero-heritage,.rashi-ribbon){background:#11151ef2}
#landing :is(.orrery-picker,.orrery-picker select,.orrery-note,.orrery-inspector span,.hero-heritage span){font-size:13px;color:#d4cbb9;line-height:1.55}
#landing .orrery-controls{flex-wrap:wrap;justify-content:center;max-width:100%}
#landing .orrery-controls button{width:44px;height:44px}
#landing .orrery-note{white-space:normal;text-align:center;bottom:0;margin:0}
#landing .rashi-ribbon small{font-size:13px;color:#e3ddcf}
#landing .observatory-header :is(a,button){color:#e5dccb}
#landing :is(.chapter-copy p,.feature-copy p,.section-intro p){color:#d0d1d4;font-size:16px;line-height:1.75}
#landing .glass-story{background:#11161eef}
#landing .story-copy>p:not(.observatory-kicker),#landing .sky-faq details p{color:#d0d1d4;font-size:16px;line-height:1.8}
#landing .ritual-steps strong,#landing .sky-faq summary{font-size:16px;color:#e5e2d9;line-height:1.6}
#landing .ritual-steps small,#landing .founder-credit span{font-size:14px;color:#c4c7ce;line-height:1.7}
#landing .story-copy .method-footnote{font-size:14px!important;color:#c4c7ce!important}
#landing .footer-baseline{font-size:12px;color:#c4c7ce;line-height:1.6}
/* Keep legal links in normal flow as their translated text wraps. */
#landing .observatory-footer{flex-direction:column;gap:64px;padding-bottom:80px}
#landing .footer-baseline{position:static;inset:auto;width:100%;flex-wrap:wrap;align-items:center;gap:16px 24px}
#landing .footer-baseline a{margin:0;min-height:44px;max-width:100%;overflow-wrap:anywhere}
#landing .footer-baseline>span{overflow-wrap:anywhere}
@media(max-width:700px){
 #landing .observatory-footer{min-height:0;padding:88px 24px 42px;gap:54px}
 #landing .footer-baseline{justify-content:center;gap:8px 24px}
 #landing .footer-baseline>span{flex-basis:100%}
 #landing .observatory-footer p{font-size:clamp(48px,16vw,66px)}
}
#workspace .yoga-editorial-row{background-color:#11161ef2}
.device-settings{display:grid;gap:12px}.device-settings .button{justify-self:start}
@media(max-width:700px){
 #workspace .data-table :is(th,td){padding:10px}
 #landing .hero-heritage{bottom:12px}
 #landing .hero-heritage span{font-size:12px}
 #landing .orrery-controls{width:max-content;max-width:calc(100% - 12px);bottom:12px}
 #landing .orrery-picker select{width:125px;font-size:16px}
 #landing .orrery-note{bottom:-24px;width:90%}
 #workspace .toolbar{gap:10px;flex-wrap:wrap}
 #workspace .toolbar .button{flex:1 1 auto}
}
@media(prefers-contrast:more){
 :root{--text:#fff;--muted:#e5e5e5}
 #workspace .card,dialog{border-color:#a6a6a6}
 #landing #sky-depth-canvas{filter:brightness(.55)}
 body :is(.muted,.field-help){color:#e5e5e5}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Member-entered names and tags must shrink inside saved-card flex rows. */
#workspace .saved-card>div:first-child{min-width:0;max-width:100%;overflow-wrap:anywhere}
#workspace .saved-card .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Workspace chrome floor (polish P2-7): no text under 12px and 44px targets.
   Specificity matches or beats the legacy journey.css / styles.css / navigation-shell.css sizes that load earlier. */
#workspace .workspace-header .section-kicker,#workspace .workspace-heading .section-kicker{font-size:12px;letter-spacing:.12em}
#workspace[data-view] .workspace-heading .section-kicker{font-size:12px}
#workspace .workspace-footer,#workspace .workspace-footer span{font-size:12px;letter-spacing:.08em}
#workspace .workspace-topbar .workspace-actions .button,#workspace .workspace-topbar .workspace-menu span{font-size:12px}
#workspace .sidebar-bottom #logout{font-size:12px}
#workspace .workspace-navigation li,#workspace .workspace-navigation button{font-size:12px}
#workspace .workspace-navigation ol button{min-width:44px;justify-content:center}

/* ---- Display system (perf-display-system P2) ----
   Type floor: labels never render under 12px, interactive text never under 14px.
   clamp() keeps the floors while letting larger screens breathe. */
:root{--fs-label-min:var(--type-min,12px);--fs-ui-min:14px;--fs-label:clamp(var(--fs-label-min),.7rem + .12vw,13px);--fs-ui:clamp(var(--fs-ui-min),.82rem + .12vw,15px)}
/* Pointer focus stays quiet; keyboard focus keeps the gold ring above. */
body :focus:not(:focus-visible){outline:none}

/* Landing labels that legacy sheets set at 6-11px. */
#landing :is(.observatory-kicker,.intro-fine,.opening-caption,.opening-caption span,.atlas-caption,.atlas-caption #atlas-context,.hero-marginal,.orrery-inspector span,.sky-target){font-size:var(--fs-label)}
#landing :is(.observatory-header nav a,.observatory-header nav button,.sky-controls .hud-button){font-size:var(--fs-ui)}

/* Hero layout reservations (CLS). The hero is vertically centred, so any late
   growth (webfont swap, deferred HI/GU text swap) moves every line. Heights are
   the measured maxima across EN/HI/GU at 360-1920px plus a small margin. */
#landing .sky-intro .sky-lead{min-height:58px}
#landing .sky-intro .intro-actions{min-height:64px;align-content:flex-start}
#landing .sky-intro .hero-trust{min-height:66px;align-content:flex-start}
@media(min-width:701px){#landing .sky-intro .sky-lead{min-height:66px}}
@media(min-width:1051px){#landing .sky-intro .sky-lead{min-height:90px}}
@media(min-width:1700px){#landing .sky-intro .sky-lead{min-height:98px}#landing .sky-intro .hero-trust{min-height:32px}}
@media(max-width:700px){#landing .sky-intro .intro-actions{min-height:126px}#landing .sky-intro .hero-trust{min-height:128px}}
/* Language control keeps its fixed width inside flexible headers. */
#home-language{flex:none}

/* Chart action bar: one row from 360px, 14px+ text, menus become a bottom sheet at 480px. */
#workspace .chart-actions{margin:22px 0 30px}
#workspace .toolbar.chart-toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;min-width:0}
#workspace .chart-toolbar .button{margin:0;min-height:44px;padding:10px 16px;gap:8px;flex:none;font-size:var(--fs-ui);line-height:1.3;white-space:nowrap;transform:none}
#workspace .chart-toolbar .button span{font-size:inherit;line-height:inherit}
#workspace .chart-toolbar>.chart-save{border-color:#c9a22766;color:#e2c677;background:#c9a2270e}
#workspace .chart-toolbar .label-short{display:none}
#workspace .chart-toolbar>select{flex:0 1 auto;min-width:0;max-width:13em;min-height:44px;margin:0;padding:8px 28px 8px 12px;font-size:var(--fs-ui)}
#workspace .chart-toolbar .split-button{position:relative;display:inline-flex;flex:none}
#workspace .chart-toolbar .split-main{border-radius:3px 0 0 3px}
#workspace .chart-toolbar .split-toggle{min-width:44px;padding:10px 12px;justify-content:center;border-radius:0 3px 3px 0;border-left:1px solid #14120c66}
#workspace .chart-toolbar .split-icon{font-size:1.05em}
#workspace .chart-toolbar .toolbar-overflow{position:relative;flex:none;margin-left:auto}
#workspace .chart-toolbar .overflow-dots{font-size:1.25em;line-height:1}
#workspace .chart-toolbar .toolbar-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:grid;gap:2px;min-width:230px;padding:6px;background:#111419;border:1px solid #c9a22755;border-radius:6px;box-shadow:0 18px 55px #0009}
#workspace .chart-toolbar .split-button .toolbar-menu{left:0;right:auto}
#workspace .chart-toolbar .toolbar-menu[hidden]{display:none}
#workspace .chart-toolbar .toolbar-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:10px 14px;border:0;border-radius:4px;background:transparent;color:#e4e2dd;font:inherit;font-size:var(--fs-ui);line-height:1.4;text-align:start;white-space:normal;cursor:pointer}
#workspace .chart-toolbar .toolbar-menu-item:is(:hover,:focus-visible){background:#c9a2271f;color:#f2e4bd}
#workspace .chart-toolbar .toolbar-menu-item[role=menuitemradio]::before{content:'';flex:none;width:16px;height:16px;box-sizing:border-box;border:1.5px solid #c9a227;border-radius:50%}
#workspace .chart-toolbar .toolbar-menu-item[aria-checked=true]::before{background:radial-gradient(circle,#c9a227 0 38%,transparent 42%)}
#workspace .chart-toolbar .toolbar-menu-item[aria-disabled=true]{opacity:.55;cursor:progress}
#workspace .chart-toolbar .toolbar-menu-group{display:none;margin:0 0 4px;padding:0 0 4px;border-bottom:1px solid #ffffff1a}
#workspace .chart-toolbar .toolbar-menu-heading{display:block;padding:8px 14px 2px;color:#c4c7ce;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase}
#workspace .calc-details-slot{margin-top:14px}
#workspace .calc-details-slot:empty{display:none}
@media(max-width:700px){
 #workspace .toolbar.chart-toolbar{flex-wrap:nowrap;gap:6px}
 #workspace .chart-toolbar .button{flex:none;padding:10px 12px}
}
@media(max-width:480px){
 #workspace .chart-toolbar>select{display:none}
 #workspace .chart-toolbar .label-full{display:none}
 #workspace .chart-toolbar .label-short{display:inline}
 #workspace .chart-toolbar .toolbar-menu-group{display:block}
 #workspace .chart-toolbar .toolbar-menu,#workspace .chart-toolbar .split-button .toolbar-menu{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1000;min-width:0;max-height:75vh;overflow:auto;padding:10px 10px calc(12px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:14px 14px 0 0;box-shadow:0 0 0 100vmax #000a}
 #workspace .chart-toolbar .toolbar-menu-item{min-height:48px}
}
@media(max-width:360px){#workspace .chart-toolbar .button{padding:10px 10px}#workspace .chart-toolbar .overflow-label{display:none}}

/* Chart display: the SVG's parchment <image> cannot load inside <img>, so the
   same shared texture is painted behind every chart image. */
img.chart-svg,img[src^="data:image/svg+xml"][src*="parchment.webp"]{background:url(/assets/chart/parchment.webp?v=a5b77a3ad2) center/100% 100% no-repeat;max-width:100%;height:auto;aspect-ratio:1}
#workspace .primary-kundli img.chart-svg{width:100%;max-width:560px}
#workspace .primary-kundli h3{font-size:var(--fs-label);letter-spacing:.14em}
#workspace .primary-kundli .chart-caption{font-size:max(var(--fs-label),13px);color:#5f5442}
#workspace .chart-essentials>.section-kicker{font-size:var(--fs-label)}
#workspace .chart-birth-line{font-size:var(--fs-ui)}
@media(max-width:768px){
 #workspace .kundli-overview{grid-template-columns:minmax(0,1fr);gap:22px}
 #workspace .primary-kundli{width:100%;max-width:560px;margin-inline:auto}
}
@media(max-width:560px){#workspace .primary-kundli{padding:14px 6px 12px}}
/* Wide analysis matrices: fade the clipped edge and shadow the sticky first
   column once scrolled (scroll-driven; no effect when nothing overflows). */
@property --matrix-fade{syntax:'<length>';inherits:false;initial-value:0px}
@supports (animation-timeline:scroll()){
 #workspace .analysis-matrix{mask-image:linear-gradient(90deg,#000 calc(100% - var(--matrix-fade)),#0000);animation:matrix-fade linear both;animation-timeline:scroll(self inline)}
 #workspace .analysis-matrix .data-table tbody th{animation:matrix-edge linear both;animation-timeline:scroll(nearest inline)}
 @keyframes matrix-fade{0%,94%{--matrix-fade:36px}100%{--matrix-fade:0px}}
 @keyframes matrix-edge{0%{box-shadow:none}4%,100%{box-shadow:8px 0 12px -6px #000d}}
}
/* Chart atlas and single charts: full width on phones, side panel stacks at 768px. */
#workspace .chart-card img[src^="data:image/svg+xml"]{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto}
@media(max-width:768px){#workspace .analysis-chart-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){#workspace :is(.analysis-atlas,.analysis-single-chart) .chart-card,#workspace .chart-grid .chart-card{padding:10px 6px}}
/* 12px type floor for decorative numerals, captions and form labels that older sheets set at 7-11px. */
body #landing .ritual-steps li>span,body #landing .chapter-coordinate{font-size:var(--fs-label)}
@media(max-width:700px){body #landing :is(.home-chapter,.constellation-sheet,.sky-chapter) .gold-button{font-size:var(--fs-label)}}
body .tour-top .section-kicker,body #workspace .workspace-header .section-kicker,body .chart-essentials>.section-kicker,body .next-chapter>.section-kicker{font-size:var(--fs-label)}
body :is(.notes-form,#workspace form) label{font-size:max(var(--fs-label),12px)}
/* Phones: the chart card bleeds into the 20px workspace gutter so a 390px screen shows a 340px+ kundli. */
@media(max-width:560px){body #workspace #analysis-chart-panel .chart-card,body #workspace .analysis-atlas .chart-card{margin-inline:-12px;padding-inline:4px}}