/* /css/space.css — the Space page (/space/), 2026-09-30. The three.js stage fills the viewport under the
   sticky nav; everything else is thin glass panels in the brand palette laid over it. Desktop keeps the panels
   in view; on phones (Michael 9/30: "too many things blocking the view") everything sits behind a dock of round
   icons along the bottom, one panel open at a time, and the title fades after a few seconds. */
.space-page { background: #050208; margin: 0; }   /* no styles.css on this page, so reset the 8px body margin ourselves (Michael 9/30: "black border around the whole browser") */
.space-page main.space { position: relative; height: calc(100dvh - var(--nav-h, 0px)); min-height: 480px; overflow: hidden; color: #FBF3DC; font-family: 'EB Garamond', Georgia, serif; }
.space-page [hidden] { display: none !important; }
.sp-stage { position: absolute; inset: 0; }
.sp-stage canvas { display: block; width: 100%; height: 100%; }

/* words, top left */
.sp-words { position: absolute; left: clamp(14px, 3vw, 36px); top: clamp(14px, 3vh, 30px); pointer-events: none; max-width: min(480px, 60vw); transition: opacity .8s; }
.sp-eyebrow { font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: #B89150; margin: 0 0 .3rem; }
.sp-script { font-family: 'Italianno', cursive; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: #F0D9A1; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.sp-focused .sp-words { opacity: .28; }
.sp-line { font-style: italic; font-size: clamp(.95rem, 1.6vw, 1.1rem); color: rgba(251,243,220,.85); margin: .35rem 0 0; text-shadow: 0 1px 10px rgba(0,0,0,.8); }

/* glass panels */
.sp-glass { background: rgba(27,15,34,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(212,172,104,.28); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.45); }

/* mode switch, top right */
.sp-modes { position: absolute; right: clamp(14px, 3vw, 36px); top: clamp(14px, 3vh, 30px); display: flex; padding: 4px; gap: 4px; }
.sp-modes button { font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #E8CB86; background: transparent; border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: background .2s, color .2s; }
.sp-modes button[aria-pressed="true"] { background: rgba(184,145,80,.28); color: #FBF3DC; }
.sp-modes button:hover { color: #FBF3DC; }

/* compass strip under the mode switch (from-Earth only) */
.sp-compass { position: absolute; right: clamp(14px, 3vw, 36px); top: calc(clamp(14px, 3vh, 30px) + 48px); display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: .84rem; }
.sp-compass .locate { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #E8CB86; background: transparent; border: 1px solid rgba(212,172,104,.45); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.sp-compass .locate:hover { background: rgba(184,145,80,.2); }
.sp-compass .place { font-style: italic; color: rgba(251,243,220,.8); }
.sp-compass .dirs { display: none; gap: 2px; }
.sp-compass.has-place .dirs { display: flex; }
.sp-compass .dirs button { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .06em; color: #F0D9A1; background: transparent; border: 1px solid rgba(212,172,104,.3); border-radius: 6px; min-width: 28px; padding: 5px 6px; cursor: pointer; }
.sp-compass .dirs button:hover { background: rgba(184,145,80,.2); }

/* the list + info, right side */
.sp-panel { position: absolute; right: clamp(14px, 3vw, 36px); top: calc(clamp(14px, 3vh, 30px) + 96px); width: min(340px, 42vw); max-height: calc(100% - 200px); display: flex; flex-direction: column; overflow: hidden; }
.sp-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; border-bottom: 1px solid rgba(212,172,104,.18); }
.sp-panel-head h2 { font-family: 'Cinzel', serif; font-weight: 500; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #E8CB86; margin: 0; }
#spPanelToggle { display: none; }
.sp-panel-head button { background: transparent; border: 0; color: #B89150; font-family: 'EB Garamond', serif; font-style: italic; font-size: .95rem; cursor: pointer; padding: 2px 4px; }
.sp-list { list-style: none; margin: 0; padding: 6px 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(184,145,80,.4) transparent; }
.sp-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 0 10px; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; color: #FBF3DC; cursor: pointer; font-family: inherit; transition: background .15s; }
.sp-row:hover, .sp-row[aria-current="true"] { background: rgba(184,145,80,.16); }
.sp-row .g { font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', serif; font-size: 1.1rem; color: #E8CB86; text-align: center; }
.sp-row .n { font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .08em; }
.sp-row .rx { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .1em; color: #D4AC68; border: 1px solid rgba(212,172,104,.5); border-radius: 4px; padding: 1px 5px; }
.sp-row .s { grid-column: 2 / 4; font-size: .93rem; color: rgba(251,243,220,.82); }
.sp-row .s em { font-style: normal; color: #F0D9A1; }
.sp-row .s span { color: rgba(251,243,220,.6); font-style: italic; }

/* info card for a chosen body */
.sp-info { padding: 14px 16px 12px; border-top: 1px solid rgba(212,172,104,.18); display: none; }
.sp-info.on { display: block; }
.sp-info h3 { font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.05rem; letter-spacing: .1em; color: #F0D9A1; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.sp-info h3 .g { font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', serif; font-size: 1.4rem; color: #E8CB86; }
.sp-info p { margin: 0 0 6px; font-size: .95rem; line-height: 1.45; color: rgba(251,243,220,.88); }
.sp-info p b { font-weight: 600; color: #F0D9A1; }
.sp-info .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0 10px; font-size: .86rem; }
.sp-info .facts span { color: rgba(251,243,220,.6); font-style: italic; }
.sp-info .facts b { display: block; font-weight: 500; color: #FBF3DC; font-style: normal; }
.sp-info .back { font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #E8CB86; background: transparent; border: 1px solid rgba(212,172,104,.45); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.sp-info .back:hover { background: rgba(184,145,80,.2); }

/* Michael's note */
.sp-note { padding: 12px 16px 14px; border-top: 1px solid rgba(212,172,104,.18); font-size: .9rem; line-height: 1.5; color: rgba(251,243,220,.8); font-style: italic; }
.sp-note b { font-style: normal; font-weight: 500; color: #F0D9A1; }

/* time bar, bottom centre */
.sp-time { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 28px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 8px; max-width: calc(100% - 28px); flex-wrap: wrap; justify-content: center; }
.sp-time button, .sp-time select { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #E8CB86; background: transparent; border: 1px solid rgba(212,172,104,.3); border-radius: 6px; padding: 7px 10px; cursor: pointer; transition: background .15s; }
.sp-time button:hover { background: rgba(184,145,80,.2); }
.sp-time button.now[aria-pressed="true"] { background: rgba(184,145,80,.32); color: #FBF3DC; }
.sp-time select { -webkit-appearance: none; appearance: none; padding-right: 22px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23D4AC68' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; }
.sp-time select option { background: #1B0F22; color: #FBF3DC; }
.sp-date { font-family: 'EB Garamond', serif; font-size: 1rem; color: #FBF3DC; padding: 0 10px; min-width: 210px; text-align: center; cursor: pointer; }
.sp-date small { display: block; font-size: .72rem; font-style: italic; color: rgba(251,243,220,.6); }
.sp-date input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* view options, bottom left */
.sp-options { position: absolute; left: clamp(14px, 3vw, 36px); bottom: clamp(14px, 3vh, 28px); display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.sp-options label { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: rgba(251,243,220,.85); cursor: pointer; padding: 2px 0; white-space: nowrap; }
.sp-options input { accent-color: #B89150; width: 14px; height: 14px; margin: 0; }
.sp-credit { position: absolute; left: clamp(14px, 3vw, 36px); bottom: 4px; font-size: .62rem; color: rgba(251,243,220,.4); pointer-events: none; }
.sp-credit a { color: inherit; pointer-events: auto; }

/* the phone dock (hidden on desktop) */
.sp-dock { display: none; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); align-items: center; gap: 4px; padding: 4px; z-index: 6; border-radius: 999px; max-width: calc(100% - 16px); }
.sp-dock button { height: 40px; min-width: 40px; border-radius: 999px; border: 1px solid rgba(212,172,104,.32); background: transparent; color: #E8CB86; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; cursor: pointer; transition: background .2s, color .2s; font-family: 'EB Garamond', serif; font-size: .86rem; white-space: nowrap; }
.sp-dock button svg { width: 19px; height: 19px; flex: none; }
.sp-dock button[aria-pressed="true"] { background: rgba(184,145,80,.32); color: #FBF3DC; border-color: rgba(212,172,104,.6); }
.sp-dock .date-txt { color: #FBF3DC; }

/* no WebGL */
.sp-fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 24px; }
.space-page.no-3d .sp-fallback { display: grid; }
.space-page.no-3d .sp-modes, .space-page.no-3d .sp-time, .space-page.no-3d .sp-options, .space-page.no-3d .sp-dock { display: none !important; }
.space-page.no-3d .sp-panel { display: flex !important; }
.sp-fallback p { max-width: 460px; font-size: 1.05rem; line-height: 1.5; }

/* phones: the sky is the page — everything else waits behind the dock */
@media (max-width: 760px) {
  .sp-words { max-width: 62vw; }
  .sp-words.gone { opacity: 0; }
  .sp-line { display: none; }
  .sp-modes { right: 10px; top: 10px; z-index: 3; }
  .sp-modes button { padding: 8px 9px; font-size: .58rem; letter-spacing: .1em; }
  .sp-dock { display: flex; }
  .sp-time, .sp-options, .sp-compass, .sp-panel { display: none; }
  .sp-time.open, .sp-options.open, .sp-compass.open, .sp-panel.open { display: flex; }
  .sp-time, .sp-options, .sp-compass { top: auto; right: auto; left: 50%; bottom: 64px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); z-index: 5; }
  .sp-time { gap: 4px; padding: 6px; justify-content: center; }
  .sp-date { min-width: 0; flex: 1 1 100%; order: -1; font-size: .92rem; padding: 4px 0; }
  .sp-time button, .sp-time select { padding: 6px 8px; font-size: .58rem; }
  .sp-options { flex-direction: column; padding: 8px 14px; }
  .sp-compass { flex-wrap: wrap; justify-content: center; }
  .sp-panel { left: 8px; right: 8px; top: auto; bottom: 64px; width: auto; max-height: 60vh; z-index: 5; }
  .sp-panel-head { cursor: pointer; }
  #spPanelToggle { display: inline; }
  .sp-note { display: none; }
  .sp-credit { display: none; }
}