/* stellarium.com: the one stylesheet of the static pages.
   Sections: tokens and base, the bar and its menu, the page column,
   prose, the blog, the app page, the footer.  The look is the sky
   map's (the web app's App.vue and main.js): its colours, Roboto Flex,
   rounded surfaces set apart by their shade, not by lines, the accent
   blue for what is current or actionable, gold only for Plus. */

:root{
  --bg:#0b0e13; --surface:#12161c; --raised:#1c222b; --card:rgba(28,34,43,.6);
  --ink:#f4f6fa; --ink-2:#9aa3b2; --ink-3:#6b7382;
  --accent:#88b0f5; --on-accent:#10213a; --accent-fill:#1d2b44; --on-accent-fill:#cfe0ff;
  --link:#9dc1ff; --plus:#ffc32b; --plus-soft:rgba(255,195,43,.12);
  --radius:16px; --bar:68px; --column:1120px; --text:720px;
  --font:"Roboto Flex",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--link);text-underline-offset:3px;text-decoration-color:rgba(157,193,255,.35)}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font);font-weight:500;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(32px,4.6vw,48px);letter-spacing:-.015em}
h2{font-size:clamp(24px,3.2vw,32px);letter-spacing:-.01em;margin-bottom:12px}
h3{font-size:20px;margin-bottom:6px}
p{margin:0 0 14px}
hr{border:0;height:24px;margin:0}
.muted{color:var(--ink-2)}
.eyebrow{font-size:13px;font-weight:500;line-height:1.4;color:var(--ink-2);margin-bottom:12px}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--ink)}
/* The breadcrumb, in the place and size of the line above a title:
   the pages above as links, after an arrow back. */
.crumbs{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:500;line-height:1.4;margin-bottom:12px;white-space:nowrap}
.crumbs a{color:var(--link);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--ink-3)}
.crumbs .back{margin-right:6px}
.byline{font-size:14px;color:var(--ink-2);margin-top:12px}
.wrap{max-width:var(--column);margin:0 auto;padding-inline:16px}
.button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border-radius:22px;background:var(--accent);color:var(--on-accent);font-weight:500;font-size:15px;text-decoration:none}
.button:hover{filter:brightness(1.08)}
.button.ghost{background:var(--accent-fill);color:var(--on-accent-fill)}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badges img{height:52px;width:auto;border-radius:8px}
.ic{width:22px;height:22px;flex:none}

/* The bar (doc/TOPBAR.md): the way back to the sky map where the sky
   map has its menu button, 12 px from the window's top left corner;
   the sections as tabs, the current one filled, the first tab's label
   on the left edge of the text column of their pages (--text, centred;
   16 px is a tab's own padding), or after the Sky map button when the
   window is too narrow for that; the app button where the sky map has
   its own.  On a phone the tabs take a second row. */
.bar{position:sticky;top:0;z-index:20;min-height:var(--bar);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:12px;background:rgba(11,14,19,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bar .home{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 8px;border-radius:22px;background:rgba(255,255,255,.06);color:var(--ink);font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap}
.bar .home:hover{background:rgba(255,255,255,.1)}
.bar .home .ic{width:20px;height:20px;color:var(--ink-2)}
.bar .home img{width:24px;height:24px;border-radius:6px}
.bar .tabs{position:absolute;top:12px;left:max(calc(50% - var(--text)/2 - 16px),180px);height:44px;display:flex;align-items:center;gap:2px}
.bar .tab{color:var(--ink-2);text-decoration:none;font:500 15px/1 var(--font);height:40px;display:flex;align-items:center;gap:4px;padding:0 16px;border:0;border-radius:20px;background:none;white-space:nowrap;cursor:pointer}
.bar .tab:hover,.bar .tab[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.06)}
.bar .tab.current{color:var(--on-accent-fill);background:var(--accent-fill)}
.bar .tab .chev{width:16px;height:16px;margin-right:-6px;transition:transform .15s}
.bar .tab[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* The menu of a section's pages, under its tab, as the sky map's
   menus: one raised surface, rounded, with a shadow.  Fixed, so that
   the scrolling row of tabs on a phone does not clip it. */
.bar .pop{position:fixed;z-index:40;min-width:220px;padding:6px;border-radius:12px;background:var(--raised);box-shadow:0 8px 24px rgba(0,0,0,.45);display:grid}
.bar .pop[hidden]{display:none}
.bar .pop a{display:flex;align-items:center;height:40px;padding:0 14px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap}
.bar .pop a:hover{background:rgba(255,255,255,.06)}
.bar .pop a.current{background:var(--accent-fill);color:var(--on-accent-fill)}
.bar .get{display:inline-flex;align-items:center;gap:8px;height:44px;margin-left:auto;padding:0 18px 0 14px;border-radius:22px;background:var(--accent-fill);color:var(--on-accent-fill);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.bar .get .ic{width:20px;height:20px}
.bar .get:hover{filter:brightness(1.12)}
.bar .get .short{display:none}
@media (max-width:599.98px){
  html{scroll-padding-top:calc(var(--bar) + 58px)}
  .bar{padding-bottom:6px}
  .bar .tabs{position:static;height:auto;order:3;flex-basis:100%;margin:0 -12px;padding:0 2px;overflow-x:auto;scrollbar-width:none}
  .bar .tabs::-webkit-scrollbar{display:none}
  .bar .tab{height:36px;padding:0 14px}
  .bar .get .long{display:none}
  .bar .get .short{display:inline}
}

/* A wider text column, and larger text to keep the lines short, on a
   wide screen. */
@media (min-width:1400px){:root{--text:800px}body{font-size:17px}}

/* Text pages: a title band, then the prose in a centred reading
   column, the same on every text page; the wide pages use the wide
   column.  The title is at the same height on every page, with or
   without the line above it (.eyebrow: 18 px and 12 px). */
.band{padding-block:48px 32px}
.band h1{font-size:clamp(30px,4.4vw,44px)}
.band > h1:first-child{margin-top:30px}
.prose{max-width:var(--text);margin-inline:auto;padding-bottom:64px}
.prose h2{font-size:clamp(22px,2.8vw,28px);margin:40px 0 12px}
.prose h3{margin:28px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:0;list-style:none}
.prose ul li{padding-left:24px;position:relative;margin-bottom:8px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prose ol{padding-left:22px}
.prose ol li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose img,.prose video{border-radius:16px;margin:24px 0}
.prose .lead{font-size:1.15em;color:var(--ink-2)}
.prose .notice{padding:14px 18px;border-radius:12px;background:var(--card);color:var(--ink-2)}
.prose .side{width:25%;float:left;margin:4px 20px 8px 0;border-radius:12px}
.prose img.portrait{width:160px;height:160px;border-radius:50%;object-fit:cover;float:right;margin:0 0 16px 28px}
.prose h2{clear:both}
.prose table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;margin:24px 0;background:var(--card);border-radius:12px;overflow:hidden}
.prose th,.prose td{padding:10px 14px;text-align:left}
.prose iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:16px;margin:24px 0}
.prose pre{overflow-x:auto;padding:14px 16px;border-radius:12px;background:var(--card);font-size:14px;line-height:1.5}
@media (max-width:599.98px){.prose table{display:block;overflow-x:auto}}
.prose tr+tr td,.prose tbody tr:first-child td{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.prose th{color:var(--ink-2);font-weight:500;font-size:13px}
.prose blockquote{margin:24px 0;padding:14px 18px;border-radius:12px;background:var(--card);color:var(--ink-2)}
.prose .button{margin-top:8px}
.post > p:first-of-type{font-size:19px;color:var(--ink)}
.prose.list-head{padding-bottom:24px}
.list-head .band{padding-bottom:8px}
.posts{list-style:none;padding:0;margin:0 auto 64px;display:grid;gap:16px;max-width:var(--text)}
.posts a{display:block;padding:22px 24px 24px;border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none}
.posts a:hover{background:var(--raised)}
.posts time{font-size:13px;color:var(--ink-2)}
.posts h2{font-size:20px;font-weight:500;margin:8px 0 8px}
.posts p{margin:0;color:var(--ink-2);font-size:15px}

/* The pages of a section, as cards: the Support hub. */
.hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 8px}
.prose .hub-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none}
.prose .hub-card:hover{background:var(--raised)}
.hub-card b{font-size:17px;font-weight:500}
.hub-card span{font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:520px){.hub{grid-template-columns:1fr}}

/* A screenshot opens full size in a dialog (assets/js/site.js). */
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:96vh}
dialog.lightbox::backdrop{background:rgba(0,0,0,.85)}
dialog.lightbox img{max-height:92vh;width:auto;border-radius:12px;cursor:zoom-out}

/* Products: one short section per product, the same for each: its
   head (icon tile, name, where it runs), one paragraph, its action,
   one visual. */
.products .band .lead{margin:12px 0 0}
.products section{padding-block:0 72px}
.product-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.product-head .tile{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--accent-fill);color:var(--accent)}
.product-head .tile .ic{width:26px;height:26px}
.prose .product-head h2{margin:0;font-size:clamp(22px,2.6vw,26px)}
.product-head .where{font-size:14px;color:var(--ink-2);margin-top:2px}
.products .badges{margin:20px 0 24px}
.products .badges img{margin:0;border-radius:8px;height:48px}
.products .fine{font-size:14px;color:var(--ink-3);margin-top:12px}
.prose .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}
.prose figure{margin:0}
.prose .trio img{margin:0;width:100%;aspect-ratio:720/1318;object-fit:cover;border-radius:14px;cursor:zoom-in}
.prose .trio figcaption{font-size:14px;line-height:1.4;color:var(--ink-2);margin-top:10px}
.prose .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 0}
.prose .duo img,.prose .shot img{margin:0;width:100%;border-radius:14px;cursor:zoom-in}
.prose .shot{margin-top:20px}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.compare > div{padding:18px 20px;border-radius:var(--radius);background:var(--card)}
.compare > .plus{background:linear-gradient(180deg,var(--plus-soft),transparent 60%),var(--card)}
.prose .compare h3{margin:0 0 10px;font-size:16px;font-weight:500;color:var(--ink-2)}
.prose .compare .plus h3{color:var(--plus)}
.prose .compare ul{margin:0;display:grid;gap:8px}
.prose .compare li{margin:0;font-size:15px;line-height:1.5}
.prose .compare .plus li::before{background:var(--plus)}
@media (max-width:520px){.prose .trio{gap:8px}.prose .trio figcaption{font-size:12px}.compare{grid-template-columns:1fr}}

/* The footer. */
footer{padding-block:28px 40px;font-size:14px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;background:linear-gradient(rgba(255,255,255,.015),transparent)}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}
footer nav{display:flex;flex-wrap:wrap;gap:16px}