/*
 * ═══════════════════════════════════════════════════════════════
 *  mm-shared.css
 *  Messier Marathon Observer's Log — Shared Stylesheet
 *  Used by: index.html / faq.html / cheatsheet.html
 * ═══════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════
   DARK MODE  (night-vision red on deep black)
   ════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  --bg:               #030305;
  --bg2:              #07070d;
  --bg3:              #0c0b14;
  --bg-row-alt:       #0a0912;
  --dim:              #181625;
  --red-bright:       #ff4f38;
  --red-mid:          #c03328;
  --red-dim:          #8a2a1c;
  --red-faint:        #3c1210;
  --amber:            #d04030;
  --text-data:        #e87060;
  --text-head:        #ff4f38;
  --text-sub:         #c03830;
  --text-meta:        #904030;
  --text-dim:         #4a1e18;
  --con-color:        #ff6048;
  --m-color:          #ff5540;
  --border:           #251512;
  --border2:          #3e1f18;
  --border3:          #5a2820;
  --chk-border:       #aa3020;
  --chk-tick:         #ff5540;
  --note-border:      #3e1f18;
  --note-focus:       rgba(180,40,20,.08);
  --progress-bg:      #1a1020;
  --starfield:        rgba(255,90,60,.38);
  --filter-text:      #aa3828;
  --filter-active-bg: #3c1210;
  --search-bg:        #07070d;
  --thead-bg:         #0c0b14;
  --header-line:      #5a2820;
  --row-hover:        rgba(200,50,30,.09);
  --modal-bg:         #07070d;
  --modal-border:     #5a2820;
  --modal-overlay:    rgba(0,0,0,.88);
  --modal-meta:       #904030;
  --modal-close-hover:rgba(255,70,40,.15);
}

/* ════════════════════════════════════════════
   LIGHT MODE  (warm parchment atlas)
   ════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:               #f4ece0;
  --bg2:              #faf4ea;
  --bg3:              #efe5d2;
  --bg-row-alt:       #f6f0e2;
  --dim:              #e6dace;
  --red-bright:       #b82a16;
  --red-mid:          #921e0e;
  --red-dim:          #781808;
  --red-faint:        #f4dbd4;
  --amber:            #8a4a10;
  --text-data:        #180e04;
  --text-head:        #8b1a0a;
  --text-sub:         #7a3020;
  --text-meta:        #9a4030;
  --text-dim:         #b87060;
  --con-color:        #7a4010;
  --m-color:          #9b2012;
  --border:           #d6c4ae;
  --border2:          #c0aa90;
  --border3:          #a08870;
  --chk-border:       #9b2012;
  --chk-tick:         #9b2012;
  --note-border:      #c0aa90;
  --note-focus:       rgba(155,32,18,.06);
  --progress-bg:      #ddd0bc;
  --starfield:        rgba(80,30,10,.10);
  --filter-text:      #7a3020;
  --filter-active-bg: #f4dbd4;
  --search-bg:        #faf4ea;
  --thead-bg:         #ecdfc8;
  --header-line:      #b08868;
  --row-hover:        rgba(155,32,18,.07);
  --modal-bg:         #faf4ea;
  --modal-border:     #a08870;
  --modal-overlay:    rgba(20,10,5,.75);
  --modal-meta:       #9a4030;
  --modal-close-hover:rgba(155,32,18,.1);
}

/* ════════ RESET ════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-meta);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .35s, color .35s;
  position: relative;
}

/* ════════ STARFIELD TEXTURE ════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px   1px   at  7%  4%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 19% 11%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 34%  7%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 52%  3%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 68%  9%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 83%  5%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 93% 14%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at  4% 22%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 44% 19%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 76% 24%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 12% 38%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 88% 41%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 58% 47%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 28% 55%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 72% 62%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 16% 70%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 96% 75%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 38% 83%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1px   1px   at 62% 90%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 30%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 15%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 50%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(2px   2px   at 42% 60%,  var(--starfield) 0%, transparent 100%),
    radial-gradient(2px   2px   at  8% 85%,  var(--starfield) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  transition: all .35s;
}

/* ════════ LAYOUT ════════ */
.wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* Narrower wrapper for prose pages (FAQ, cheat sheet) */
.wrapper-prose {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ════════ THEME TOGGLE (full-page version) ════════ */
.theme-toggle-wrap {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-icon {
  font-size: 14px;
  line-height: 1;
  user-select: none;
  transition: opacity .3s;
}
.theme-icon.moon { opacity: .9; }
.theme-icon.sun  { opacity: .35; }
[data-theme="light"] .theme-icon.moon { opacity: .35; }
[data-theme="light"] .theme-icon.sun  { opacity: .9; }
.toggle-pill {
  width: 44px;
  height: 24px;
  background: var(--red-faint);
  border: 1.5px solid var(--border3);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
  outline: none;
}
.toggle-pill:focus-visible { box-shadow: 0 0 0 2px var(--red-mid); }
.toggle-pill::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red-bright);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .3s;
}
[data-theme="dark"]  .toggle-pill::after { box-shadow: 0 0 8px var(--red-bright); }
[data-theme="light"] .toggle-pill::after { transform: translateX(20px); box-shadow: none; }
.toggle-label {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--text-meta);
  text-transform: uppercase;
  min-width: 30px;
  transition: color .3s;
}

/* ════════ PAGE HEADER (prose pages) ════════ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--header-line);
  margin-bottom: 36px;
  transition: border-color .3s;
}
.site-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-head);
  transition: color .3s;
}
.site-title a {
  color: inherit;
  text-decoration: none;
}
.site-title a:hover { color: var(--text-data); }
.page-subtitle {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-meta);
  margin-top: 4px;
  letter-spacing: .04em;
  transition: color .3s;
}

/* ════════ MAIN HEADER (index page) ════════ */
.header {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border2);
  position: relative;
  transition: border-color .3s;
}
.header-rule {
  display: block;
  width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--header-line), transparent);
  margin: 22px auto 0;
  transition: background .3s;
}
.header-eyebrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .38em;
  color: var(--text-meta);
  text-transform: uppercase;
  margin-bottom: 14px;
  transition: color .3s;
}
h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 700;
  color: var(--text-head);
  letter-spacing: .08em;
  line-height: 1.1;
  margin-bottom: 8px;
  transition: color .3s, text-shadow .3s;
}
[data-theme="dark"] h1 {
  text-shadow: 0 0 50px rgba(255,70,40,.35), 0 0 100px rgba(255,70,40,.12);
}
.subtitle {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-sub);
  letter-spacing: .06em;
  margin-bottom: 18px;
  transition: color .3s;
}

/* ════════ FOOTER ════════ */
.footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  transition: border-color .3s;
}
.footer-note {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-meta);
  max-width: 500px;
  line-height: 1.65;
  transition: color .3s;
}
.footer-sig {
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  letter-spacing: .22em;
  color: var(--text-dim);
  text-align: right;
  text-transform: uppercase;
  transition: color .3s;
}
.footer-sig a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--border3);
}
.footer-sig a:hover { color: var(--text-meta); }

/* ════════ SECTION TITLE (prose pages) ════════ */
.section-title {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  transition: color .3s, border-color .3s;
}

/* ════════ TYPE BADGE COLOURS ════════ */
.badge-spiral     { background: #8040a0; }
.badge-ellip      { background: #3a5aaa; }
.badge-lenticular { background: #2a7090; }
.badge-irregular  { background: #6040a0; }
.badge-open       { background: #2a8a5a; }
.badge-globular   { background: #aa7820; }
.badge-nebula     { background: #aa3030; }
.badge-planetary  { background: #909020; }
.badge-snr        { background: #cc4020; }
.badge-starcloud  { background: #207878; }
.badge-double     { background: #606060; }

/* ════════ LEGEND ════════ */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding: 16px 22px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  transition: background .3s, border-color .3s;
}
.legend-title {
  width: 100%;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--text-meta);
  text-transform: uppercase;
  margin-bottom: 4px;
  transition: color .3s;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--text-sub);
  letter-spacing: .03em;
  transition: color .3s;
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ════════ SHARED NAV LINK ════════ */
.nav-link {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--border3);
  transition: color .2s;
}
.nav-link:hover { color: var(--text-meta); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 700px) {
  .footer { flex-direction: column; align-items: flex-start; }
  .theme-toggle-wrap { position: static; margin-bottom: 14px; }
  .page-header { flex-direction: column; gap: 14px; }
}