/* Visual revision 4: presentation-only overlay; localized copy and IDs are unchanged. */
.environment-section {
  --env-warm: #dba66b; --env-cool: #8fbac5;
  --env-ease: cubic-bezier(.22,1,.36,1);
  padding: clamp(.8rem,2vw,2rem);
  border-inline: 0;
  background: radial-gradient(ellipse at 8% 25%,#32566c20,transparent 52%),linear-gradient(130deg,#0b0d0e,#100b07 72%);
  box-shadow: none;
  color: #f5eadb;
}
.environment-section[data-environment-tone="2"] { --env-warm:#ac9ed0; --env-cool:#9acdde; }
.environment-section[data-environment-tone="3"] { --env-warm:#b7c6b9; --env-cool:#5abecb; }
.environment-section[data-environment-tone="4"] { --env-warm:#beaa76; --env-cool:#88b5a4; }
.environment-section[data-environment-tone="5"] { --env-warm:#e5c297; --env-cool:#becfdf; }
.environment-section[data-environment-tone="6"] { --env-warm:#aaa0d0; --env-cool:#74d1c0; }
.environment-section[data-environment-tone="7"] { --env-warm:#eaaa6f; --env-cool:#b5bca9; }
.environment-section .subhead { max-inline-size:78rem; padding-inline-end:0; margin:0 0 clamp(1.4rem,3vw,2.5rem); }
.environment-section .subhead > span { display:block; font-size:.7rem; letter-spacing:.2em; color:var(--env-warm); }
.environment-section .subhead h2 { font-size:clamp(2rem,4vw,4rem); line-height:1.04; margin-block:.8rem 1rem; max-inline-size:24ch; color:#f7ead9; }
.environment-section .subhead p { max-inline-size:65ch; color:#cabbaa; }
.environment-console { display:flex; flex-direction:column; position:relative; }
.environment-stage { order:1; position:relative; min-inline-size:0; }
.environment-stage.is-height-transitioning { overflow:clip; }
.environment-panel { margin:0; border:0; background:transparent; isolation:isolate; }
.environment-panel:not([hidden]) { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); align-items:stretch; gap:0; }
.environment-panel > .cinematic-edge { display:none; }
.environment-scene { position:relative; margin:0; align-self:center; background:#090c0c; box-shadow:0 1.6rem 3rem #0007; }
.environment-photograph { position:relative; inline-size:100%; transform-origin:50% 50%; }
.environment-photograph > img { display:block; inline-size:100%; block-size:auto; aspect-ratio:3/2; object-fit:contain; }
.environment-scene::after { z-index:5; border:1px solid #d2b68a3d; box-shadow:inset 0 0 2.5rem #0003; background:linear-gradient(90deg,transparent 72%,#08070628); }
.environment-scene::before { content:""; position:absolute; z-index:6; inset:0; border-block-start:2px solid var(--env-cool); border-block-end:1px solid var(--env-warm); opacity:.65; pointer-events:none; }
.environment-light { position:absolute; z-index:4; inset:0; overflow:hidden; pointer-events:none; opacity:.55; }
.environment-light::before { content:""; position:absolute; inset:-15%; background:radial-gradient(ellipse at 15% 20%,#ffe3b51a,transparent 45%),linear-gradient(115deg,transparent 25%,#a4ddf510 45%,transparent 64%); transform:translateX(-4%); }
.environment-light::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,#fff1cc45 49.9%,transparent 70%); mask-image:linear-gradient(#000 0 2px,transparent 2px calc(100% - 2px),#000 calc(100% - 2px)); transform:translateX(-115%); }
.environment-scene > .environment-ghost { position:absolute; z-index:3; inset:0; inline-size:100%; block-size:100%; object-fit:contain; pointer-events:none; margin:0; }
.environment-copy { align-self:center; padding:clamp(1.2rem,2.6vw,2.8rem); padding-inline-end:.4rem; }
.environment-copy::before { display:none; }
.environment-identity { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:1rem; margin-block-end:1.4rem; }
.environment-marks { position:relative; display:grid; place-items:center; margin:0; inline-size:4.25rem; block-size:4.25rem; flex:none; }
.environment-marks::before { content:""; position:absolute; inset:0; border:1px solid var(--env-warm); opacity:.5; clip-path:polygon(0 0,30% 0,30% 4%,4% 4%,4% 30%,0 30%,0 0,100% 0,100% 30%,96% 30%,96% 4%,70% 4%,70% 0,100% 0,100% 100%,70% 100%,70% 96%,96% 96%,96% 70%,100% 70%,100% 100%,0 100%,0 70%,4% 70%,4% 96%,30% 96%,30% 100%,0 100%); }
.environment-marks .environment-glyph { inline-size:3.6rem; block-size:3.6rem; max-inline-size:100%; filter:drop-shadow(0 0 .6rem #eab57435); }
.environment-copy h3 { margin:0; color:#f5eadb; font-size:clamp(1.6rem,2.4vw,2.6rem); line-height:1.12; text-wrap:balance; }
.environment-copy p { color:#d0c0ad; font-size:clamp(.95rem,1.08vw,1.1rem); line-height:1.7; }
.environment-copy details { margin-block-start:1.3rem; border-color:#c1986a4a; }
.environment-copy summary { padding-block:.65rem; color:#f3d4af; }
.environment-copy summary:hover { color:#fff3dc; }
.environment-selector { order:2; position:relative; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.6rem; padding-block:1.1rem 0; margin:0; border-block-start:1px solid #b28d5540; }
.environment-tab { border:0; border-block-end:2px solid transparent; background:transparent; padding:.35rem; box-shadow:none; transition:background .55s var(--env-ease),border-color .55s var(--env-ease),translate .55s var(--env-ease); }
.environment-tab img { opacity:.57; filter:saturate(.62); clip-path:polygon(0 0,calc(100% - .65rem) 0,100% .65rem,100% 100%,0 100%); transition:opacity .65s var(--env-ease),filter .65s var(--env-ease); }
.environment-tab::before { inset-block-start:.6rem; inset-inline-start:.6rem; background:#080706d9; color:#ead6b9; }
.environment-tab::after { display:none; }
.environment-tab > span:not(.cinematic-edge):not(.input-response-layer) { color:#c8b59f; padding-block:.7rem .5rem; font-size:.86rem; }
.environment-tab:hover, .environment-tab[aria-selected="true"] { box-shadow:none; background:linear-gradient(0deg,#d2964c19,transparent 80%); border-color:var(--env-warm); }
.environment-tab:is(:hover,[aria-selected="true"]) img { opacity:1; filter:saturate(1); }
.environment-tab[aria-selected="true"] > span:not(.cinematic-edge):not(.input-response-layer) { color:#fff0db; }
.environment-tab > .cinematic-edge { opacity:.18; }
.environment-tab[aria-selected="true"] > .cinematic-edge { --cinematic-edge-opacity:.7; }
.environment-section :is(button,summary,[tabindex]):focus-visible { outline:2px solid var(--env-cool); outline-offset:-2px; }
/* Dedicated presentation controller owns entrance/crossfade; cancel old CSS arrivals. */
body[data-mode="full"][data-motion="full"] .environment-panel .environment-scene img,
body[data-mode="full"][data-motion="full"] .environment-panel .environment-copy,
body[data-mode="full"][data-motion="full"] .environment-copy details[open] p { animation:none!important; }
.environment-section[data-environment-motion="on"] .environment-panel:not([hidden]) .environment-photograph { transform:scale(1.025) translate3d(clamp(-3px,var(--fx-drift-x,0px),3px),clamp(-3px,var(--fx-drift-y,0px),3px),0); transition:transform 1.15s var(--env-ease); }
.environment-section[data-environment-motion="on"] .environment-panel:not([hidden]) .environment-light::before { animation:environment-light-drift 13s ease-in-out infinite alternate; }
.environment-section[data-environment-motion="on"] .environment-panel:not([hidden]) .environment-light::after { animation:environment-border-travel 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes environment-light-drift { from { transform:translate3d(-4%,1%,0); opacity:.35; } to { transform:translate3d(4%,-1%,0); opacity:.85; } }
@keyframes environment-border-travel { 0%,15% { transform:translateX(-115%); opacity:0; } 30% { opacity:.8; } 75%,100% { transform:translateX(115%); opacity:0; } }
/* Solar artwork additions share the same disclosure smoothing, without changing content. */
.sun-profile { border-block-start:1px solid #ad78494a; }
.sun-profile summary { padding-block:.75rem; transition:color .35s ease,background .35s ease; }
.sun-profile summary:hover { color:var(--paper); background:#d6903910; }
.sun-presentation { position:relative; background:#080706; border:1px solid #b9956140; }
.sun-presentation img { transition:opacity .6s ease; }
.sun-visuals { background:radial-gradient(ellipse at 50% 45%,#c37c3420,transparent 75%),#0c0b09; }
@media(max-width:1050px) { .environment-panel:not([hidden]) { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } .environment-selector { grid-template-columns:repeat(4,minmax(0,1fr)); } .environment-copy { padding:1.3rem; } }
@media(max-width:720px) { .environment-panel:not([hidden]) { grid-template-columns:minmax(0,1fr); } .environment-copy { padding:1.35rem .45rem; } .environment-selector { grid-template-columns:repeat(2,minmax(0,1fr)); } .environment-tab { flex-direction:row; align-items:center; gap:.35rem; } .environment-tab img { inline-size:4.2rem; flex:0 0 4.2rem; } .environment-tab::before { font-size:.5rem; padding:.1rem; } .environment-tab > span:not(.cinematic-edge):not(.input-response-layer) { padding:.3rem; } .environment-identity { margin-block-end:1rem; } .environment-section .subhead h2 { max-inline-size:none; } }
html[lang="x-binary"] .environment-panel:not([hidden]) { grid-template-columns:minmax(0,1fr); }
html[lang="x-binary"] .environment-identity { align-items:start; }
html[lang="x-binary"] .environment-copy h3 { font-size:var(--binary-heading-size); }
.environment-section:not([data-environment-motion="on"]) .environment-light { display:none; }
body[data-fx-suspended] .environment-section *,body[data-mode="low"] .environment-section *,body[data-motion="reduced"] .environment-section * { animation:none!important; transition:none!important; }
body[data-contrast="high"] .environment-section { --env-cool:#fff; --env-warm:#fff; background:#000; }
body[data-contrast="high"] .environment-section :is(p,h2,h3,summary,span) { color:#fff; }
@media(prefers-reduced-motion:reduce), (forced-colors:active) { .environment-section *, .environment-section *::before,.environment-section *::after { animation:none!important; transition:none!important; } .environment-light { display:none!important; } .environment-photograph { transform:none!important; } }
@media(forced-colors:active) { .environment-section,.environment-panel,.environment-tab { color:CanvasText; background:Canvas; border:1px solid CanvasText; box-shadow:none; } .environment-section :is(p,h2,h3,summary,span) { color:CanvasText; } .environment-tab[aria-selected=true] { outline:2px solid Highlight; } .environment-marks { background:#101010; forced-color-adjust:none; } .environment-tab img { opacity:1; filter:none; } }

/* Mobile layout hotfix for FX4. Append after environment-cinema.css.
   Content, tab order, desktop composition and motion ownership stay unchanged. */
@media (max-width: 720px) {
  /* Fit columns to usable section width, not just the viewport breakpoint.
     min(100%, ...) also lets a single card fit very narrow browser panes. */
  .environment-section .environment-selector {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .environment-section .environment-tab {
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    padding: .5rem;
    min-block-size: 44px;
  }

  .environment-section .environment-tab img {
    inline-size: 3.25rem;
    flex: 0 0 3.25rem;
  }

  .environment-section .environment-tab > span:not(.cinematic-edge):not(.input-response-layer) {
    flex: 1 1 0;
    min-inline-size: 0;
    padding: .25rem 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  /* Do not spend the narrow heading's line width on a fixed-size glyph. */
  .environment-section .environment-identity {
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }
}

@media (max-width: 360px) {
  /* The three translated cycle labels need complete rows in narrow panes. */
  .solar-cycle-selector .solar-cycle-buttons {
    grid-template-columns: minmax(0, 1fr);
  }
}