/* Enarge TECH WATCH sky viewer pages: design tokens, site header/footer, viewer UI */
/* Layout: Enarge technical-note page. One large sky stage (first-person view from the spacecraft) with HUD, view/time controls under it, a table of what is visible now, then method notes and sources. */
:root {
  --ink-900: #1c1815;
  --ink-800: #241f1b;
  --ink-700: #2e2823;
  --ink-600: #3a322c;
  --ink-500: #4a4039;
  --sky: #0a0908;
  --cream-50: #faf4e8;
  --cream-100: #f3ead7;
  --cream-200: #e7dac1;
  --cream-300: #cfc0a4;
  --text-strong: #f7efe1;
  --text: #ddd0bb;
  --text-muted: #9c8f7c;
  --text-faint: #6f6557;
  --red-600: #c43d2c;
  --red-500: #d8503e;
  --red-400: #e56a55;
  --amber: #e0a44b;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 18px 50px -20px rgba(0,0,0,0.6);
  --font-round: "Kosugi Maru", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --maxw: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink-900); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink-900); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red-500); color: #fff; }
:focus-visible { outline: 2px solid var(--red-400); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-400); }

.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(28,24,21,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ink-600); }
.hd .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; padding-block: 8px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-round); font-weight: 700; }
.logo .mark { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo .word { font-size: 27px; color: var(--text-strong); }
.logo .word b { color: var(--red-500); font-weight: 700; }
.logo .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-faint); margin-top: 5px; line-height: 1.45; white-space: nowrap; }
.hd-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--text-muted); }
.hd-note b { color: var(--red-400); font-weight: 500; }

.hero { padding-block: 48px 26px; }
.hero h1 { font-family: var(--font-round); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1.25; color: var(--text-strong); margin: 12px 0 16px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--red-400); }
.hero p { color: var(--text-muted); font-size: 16.5px; line-height: 1.95; max-width: 680px; margin: 0; }

.sec { padding-bottom: 64px; }
.cat { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.cat h2 { font-family: var(--font-round); font-weight: 700; font-size: 22px; color: var(--text-strong); margin: 0; }
.cat i { flex: 1; min-width: 12px; height: 1px; background: var(--ink-600); }
.cat em { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--red-400); font-style: normal; white-space: nowrap; }
@media (max-width: 640px) { .cat h2 { font-size: 19px; } }

.panel { background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.stage { position: relative; aspect-ratio: 16 / 9.5; min-height: 360px; max-height: 78vh; background: var(--sky); touch-action: none; cursor: grab; }
.stage.drag { cursor: grabbing; }
@media (max-width: 640px) { .stage { aspect-ratio: 1 / 1.15; } }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; left: 16px; top: 12px; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hud .date { font-family: var(--font-mono); font-weight: 700; font-size: clamp(16px, 2.6vw, 24px); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.hud .sub.ev { color: var(--red-400); font-weight: 700; }
.hud .sub { font-family: var(--font-mono); font-size: 12px; color: var(--cream-300); font-variant-numeric: tabular-nums; }
.hud-r { position: absolute; right: 16px; top: 12px; text-align: right; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hud-r .look { font-size: 14px; color: var(--cream-100); }
.hud-r .look b { color: var(--red-400); font-weight: 700; }
.hud-r .fovr { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) { .hud { right: 16px; } .hud .sub { font-size: 11px; } .hud-r { top: auto; bottom: 30px; } .foot-note span:last-child { display: none; } }
.foot-note { position: absolute; left: 16px; right: 16px; bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--text-faint); pointer-events: none; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.ctl { display: grid; gap: 14px; padding: 16px 18px 18px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--text-faint); min-width: 52px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vbtn { font-family: var(--font-ui); font-size: 14px; font-weight: 500; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--ink-500); background: transparent; color: var(--text); transition: all .15s ease; }
@media (hover: hover) { .vbtn:hover { border-color: var(--cream-300); color: var(--cream-50); } }
.vbtn.on { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.vbtn.back { border-color: var(--red-500); color: var(--red-400); }
.vbtn.back.on { color: #fff; }
.chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ink-600); color: var(--text-muted); background: transparent; transition: all .15s ease; }
@media (hover: hover) { .chip:hover { border-color: var(--cream-300); color: var(--cream-100); } }
/* toggles: filled when on, outlined when off (no hover styling on touch screens, where hover sticks after a tap) */
.chip[aria-pressed="true"] { border-color: var(--cream-200); color: var(--ink-900); background: var(--cream-200); }
.chip[aria-pressed="true"]::before { content: "✓ "; }
@media (hover: hover) { .chip[aria-pressed="true"]:hover { color: var(--ink-900); background: var(--cream-100); } }
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 700; font-size: 14px; padding: 9px 20px; min-width: 104px; border-radius: 999px; border: 0; background: var(--red-500); color: #fff; box-shadow: 0 10px 24px -10px var(--red-500); transition: transform .16s ease, background .16s ease; }
@media (hover: hover) { .btn:hover { background: var(--red-400); transform: translateY(-2px); } }
.rng { flex: 1 1 220px; min-width: 0; accent-color: var(--red-500); height: 26px; }
.rd { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hint { font-size: 12.5px; color: var(--text-faint); }

.tbl-wrap { overflow-x: auto; }
table.vis { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
table.vis th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-faint); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-600); }
table.vis td { padding: 11px 12px; border-bottom: 1px solid var(--ink-700); color: var(--text); vertical-align: middle; }
table.vis td.num { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; }
table.vis td small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
table.vis tr.on td { background: rgba(216,80,62,0.08); }
.bname { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; color: var(--text-strong); font-size: 15px; font-weight: 700; padding: 0; }
.bname i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bname:hover { color: var(--red-400); }
.tbl-note { font-size: 12.5px; color: var(--text-faint); margin: 10px 2px 0; }

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.note { background: var(--ink-800); border: 1px solid var(--ink-600); border-left: 3px solid var(--red-500); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.note h4 { margin: 0 0 6px; font-family: var(--font-round); font-size: 16px; color: var(--text-strong); }
.note p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--text-muted); }
.src { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.src a { color: var(--text); border-bottom: 1px solid var(--ink-500); }
.src a:hover { color: var(--red-400); border-color: var(--red-400); }
.src span { color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; margin-left: 8px; }
footer { border-top: 1px solid var(--ink-600); padding-block: 32px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--text-faint); font-size: 12.5px; }
footer .en { font-family: var(--font-mono); }

.hd .wrap { gap: 20px; min-height: 74px; }
.lg-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.lg-nav a { font-size: 14px; color: var(--text-muted); font-weight: 500; white-space: nowrap; transition: color .15s ease; }
.lg-nav a:hover, .lg-nav a.cur { color: var(--cream-50); }
.lg-nav a.btn { color: #fff; min-width: 0; padding: 10px 18px; font-size: 14px; }
.crumb { padding-top: 26px; margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); line-height: 1.9; }
.crumb a:hover { color: var(--red-400); }
.crumb .sep { margin: 0 8px; color: var(--text-faint); }
.backnav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 48px; }
.backnav a { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--red-400); }
.backnav a:hover { text-decoration: underline; }
footer.lg-footer { background: var(--ink-900); border-top: 1px solid var(--ink-600); padding-block: 60px 36px; }
footer.lg-footer .wrap { display: grid; }
.lg-foot-grid { gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.lg-foot-lead { color: var(--text-muted); font-size: 14px; line-height: 1.8; max-width: 320px; margin-top: 18px; }
.lg-footer h4 { color: var(--text-strong); font-size: 13px; letter-spacing: .05em; margin: 0 0 14px; }
.lg-footer nav a { display: block; color: var(--text-muted); font-size: 14px; padding: 7px 0; }
.lg-footer nav a:hover { color: var(--cream-50); }
footer.lg-footer .lg-copy { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ink-700); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--text-faint); font-size: 12.5px; }
.lg-copy .en { font-family: var(--font-mono); }
/* phone: header shows only the logo and a link back to the top page */
.m-home { display: none; }
@media (max-width: 640px) {
  .hd .wrap { min-height: 56px; flex-wrap: nowrap; padding-block: 6px; }
  .lg-nav { display: none; }
  .logo .tag { display: none; }
  .logo .word { font-size: 23px; }
  .m-home { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; color: var(--cream-100); border: 1px solid var(--ink-500); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
  .m-home:hover { border-color: var(--red-500); color: var(--cream-50); }
}