/* Pages: home, Tonight and Tools. The buying guide lives in app.css. */

/* ---------- views ---------- */

body:not([data-view="guide"]) :is(#field, #status, #wizard) { display: none; }
body[data-view="guide"] #page { display: none; }
body:not([data-view="guide"]) .topbar::before {
  content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.78), rgba(4, 5, 10, 0.45) 70%, rgba(4, 5, 10, 0));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent);
}

.page {
  position: absolute; inset: 0; z-index: 3;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--top-h) + 14px) max(20px, env(safe-area-inset-right)) 36px max(20px, env(safe-area-inset-left));
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.page-wrap { width: min(1080px, 100%); margin: 0 auto; display: grid; gap: 18px; animation: rise 0.5s var(--ease); }
.page-card { padding: 26px 30px 28px; border-radius: 30px; min-width: 0; }
/* Cards after the first are laid out and drawn only once they come near the screen, so a page's
   first layout is just what you can see (not those holding a place box, whose suggestions would be
   clipped). The size they hold meanwhile is a guess until they've been seen once. */
.page-wrap > .page-card + .page-card:not(:has(.cb)), .tg-body > .page-card + .page-card, .ev-body > .page-card + .page-card { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.ev-month { content-visibility: auto; contain-intrinsic-size: auto 360px; }
.page-card:focus-within, .page-card > :focus-within { z-index: 5; }
.page h1 { margin: 0; font-size: var(--fs-9); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.page h2 { margin: 0; font-size: var(--fs-7); letter-spacing: -0.015em; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.page h2 .ico { width: 21px; height: 21px; color: var(--accent-ink); }

.kicker { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.kicker .ico { width: 15px; height: 15px; }
.kicker a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (hover: hover) { .kicker a:hover { color: var(--ink); } }
.sec-head { margin-bottom: 14px; }
.sec-head p:not(.kicker) { margin: 6px 0 0; color: var(--ink-3); font-size: var(--fs-4); }
.sec-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.sec-sub { margin: 0 0 8px; font-size: var(--fs-2); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.sec-more { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--fs-4); font-weight: 600; color: var(--accent-ink); text-decoration: none; }
@media (hover: hover) { .sec-more:hover { text-decoration: underline; } }
.sec-more .ico { width: 15px; height: 15px; }
.page .btn-primary, .page .btn-ghost { text-decoration: none; }
.page-fine { text-align: center; margin: 0 0 12px; }

.tn-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2); padding: 34px 0; }
.tn-loading .ico { width: 18px; height: 18px; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.35; transform: scale(0.85); } }
.tn-muted { color: var(--ink-3); margin: 0; font-size: var(--fs-4); }
.tn-error { color: var(--bad); }

/* ---------- home ---------- */

.home-hero { text-align: center; padding: 26px 0 8px; }
.home-hero .kicker { justify-content: center; }
.home-hero h1 {
  font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.035em; line-height: 1.22; padding-bottom: 0.06em;
  background: linear-gradient(180deg, #fff 30%, #b9cff5); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero p { max-width: 560px; margin: 12px auto 0; color: var(--ink-2); font-size: var(--fs-6); }
/* the headline in stars (herosky.js); the page title stays for screen readers */
.home-hero .hero-sky { position: relative; height: clamp(116px, 18vw, 200px); margin: 2px auto 0; max-width: 1040px; }
.home-hero .hero-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.home-hero.live h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-hero.live .hero-intro { display: none; }
/* every line in the one place, only the current one showing, so the page below keeps still */
.home-hero .hero-caption { display: grid; margin-top: 0; font-size: var(--fs-5); color: var(--ink-2); }
.home-hero:not(.live) .hero-caption { margin-top: 10px; }
.home-hero .hero-caption > span { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s; }
.home-hero .hero-caption > span.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hero-caption a { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: var(--accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-caption a .ico { width: 14px; height: 14px; }
@media (hover: hover) { .hero-caption a:hover { text-decoration: underline; } }

.ht-empty { display: flex; align-items: center; gap: 20px; }
.ht-empty > div { flex: 1; }
.ht-empty h2 { font-size: var(--fs-7); }
.ht-empty p { margin: 4px 0 0; color: var(--ink-2); }
.ht-empty .btn-primary, .ht-empty .btn-ghost { flex: none; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; }
.ht-empty .wx { flex: none; filter: drop-shadow(0 0 16px rgba(230, 235, 255, 0.3)); }
.ht-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.ht-main { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 22px; background: var(--tile); text-decoration: none; transition: background 0.2s; }
@media (hover: hover) { .ht-main:hover { background: var(--tile-hover); } }
.ht-main .kicker { margin-bottom: 2px; }
.ht-main b { display: block; font-size: var(--fs-8); letter-spacing: -0.02em; line-height: 1.15; }
.ht-main small { display: block; margin-top: 3px; color: var(--ink-2); font-size: var(--fs-4); }
.ht-main.good b { color: var(--good); }
.ht-main.fair b { color: var(--warn); }
.ht-art { flex: none; filter: drop-shadow(0 0 14px rgba(230, 235, 255, 0.3)); }
.ht-facts { display: grid; gap: 8px; min-width: 190px; }
.ht-facts > div { padding: 11px 14px; border-radius: 16px; background: var(--tile); }
.ht-facts span span, .ht-facts > div > span:first-child { display: block; font-size: var(--fs-2); color: var(--ink-3); }
.ht-facts b { display: block; font-size: var(--fs-5); font-variant-numeric: tabular-nums; }
.ht-moon { display: flex; align-items: center; gap: 10px; }
.ht-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ht-picks .sec-sub { margin: 0 6px 0 2px; }
.ht-picks .sec-more { margin-left: auto; }
.ht-pick { padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.14); }
.ht-pick b { display: block; font-size: var(--fs-4); font-weight: 600; }
.ht-pick small { display: block; font-size: var(--fs-2); color: var(--ink-3); }

.guide-rows { display: grid; gap: 16px; }
.guide-row .sec-sub { margin: 0 0 8px 2px; }
.guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.guide-grid.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guide-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 10px 12px; border-radius: 20px; background: var(--tile); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2); text-decoration: none; transition: background 0.2s, transform 0.35s var(--spring); min-width: 0; }
@media (hover: hover) { .guide-tile:hover { background: var(--tile-hover); transform: translateY(-2px); } }
.guide-art { position: relative; width: 100%; height: 86px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: radial-gradient(ellipse at 50% 60%, rgba(140, 170, 255, 0.1), transparent 70%); }
.guide-art img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); transition: transform 0.4s var(--spring); }
@media (hover: hover) { .guide-tile:hover .guide-art img { transform: scale(1.06); } }
.guide-art .ico { width: 34px; height: 34px; color: #dbe7ff; }
.guide-text { display: grid; gap: 1px; min-width: 0; }
.guide-tile b { font-size: var(--fs-5); font-weight: 600; }
.guide-tile small { font-size: var(--fs-2); color: var(--ink-3); }
.home-foot { text-align: center; font-size: var(--fs-3); color: var(--ink-4); padding: 4px 0 8px; }

/* a tour's caption (tour.js), over the sky map or the 3D universe */
.tour { position: absolute; z-index: 7; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 64px); transform: translateX(-50%); width: min(460px, calc(100% - 32px)); padding: 14px 16px 12px; border-radius: 22px; animation: rise 0.35s var(--ease); }
.tour-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); }
.tour-head span { display: inline-flex; align-items: center; gap: 6px; }
.tour-head .ico { width: 14px; height: 14px; }
.tour h3 { margin: 0 0 4px; font-size: 18px; }
.tour-text { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.tour-acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.tour-acts .icon-btn { width: 38px; height: 38px; }
.tour-acts .icon-btn[disabled] { opacity: 0.35; pointer-events: none; }
.tour-acts .btn-primary { height: 38px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.tour-acts .tour-close { margin-left: auto; }
@media (max-width: 640px) { .tour { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 56px); width: calc(100% - 16px); padding: 12px 14px 10px; } .tour-text { font-size: 14px; } }

/* share and add-to-calendar buttons (share.js), and the notice they show */
.share-btn { height: 36px; padding: 0 12px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-4); font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s; }
@media (hover: hover) { .share-btn:hover { background: rgba(255, 255, 255, 0.12); } }
.share-btn .ico { width: 16px; height: 16px; flex: none; }
.share-btn.round { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 11px; color: var(--ink-3); background: transparent; box-shadow: none; }
@media (hover: hover) { .share-btn.round:hover { color: var(--accent-ink); background: rgba(255, 255, 255, 0.07); } }
.share-btn.round .ico { width: 18px; height: 18px; }
.share-btn[data-flashing] { color: var(--good); }
.share-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.share-notice { position: fixed; left: 50%; bottom: calc(var(--bottom-h, 0px) + 22px); z-index: 90; max-width: min(420px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 14px; font-size: var(--fs-4); font-weight: 600; color: var(--ink); background: rgba(14, 19, 38, 0.96); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 0.2s, transform 0.25s var(--spring); }
.share-notice.on { opacity: 1; transform: translate(-50%, 0); }

/* the home page: start here (no place yet) */
.home-start .sec-head h2 { font-size: var(--fs-7); }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 18px; background: var(--tile); }
.home-step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #0b1226; background: linear-gradient(180deg, #fff, #d6e4ff); }
.home-steps b { display: block; font-size: var(--fs-5); }
.home-steps small { display: block; margin-top: 2px; font-size: var(--fs-3); color: var(--ink-3); }
.home-steps small a { color: var(--accent-ink); }
.home-steps .tn-place { margin-top: 10px; flex-wrap: wrap; }
.home-steps .tn-place .cb { flex: 1 1 220px; }

/* the home page: tonight */
.home-tn-head { display: flex; align-items: center; gap: 16px; }
.home-tn-head .kicker { margin-bottom: 2px; }
.home-tn-title { display: block; font-size: var(--fs-8); letter-spacing: -0.02em; line-height: 1.15; }
.home-tn-title.good { color: var(--good); }
.home-tn-title.fair { color: var(--warn); }
.home-tn-head small { display: block; margin-top: 3px; font-size: var(--fs-4); color: var(--ink-2); }
.home-tn-chance { color: var(--ink-3); }
.home-dark { margin: 18px 0 6px; }
.home-picks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-picks a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--tile); text-decoration: none; transition: background 0.2s; height: 100%; }
@media (hover: hover) { .home-picks a:hover { background: var(--tile-hover); } }
.home-pick-art svg { display: block; border-radius: 14px; }
.home-pick-main { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.home-pick-main b { font-size: var(--fs-5); font-weight: 600; }
.home-pick-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.home-pick-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pick-time { flex: none; font-size: var(--fs-7); font-weight: 700; line-height: 1.1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.home-pick-time.now { color: #ffd27a; }
.home-pick-main small { font-size: var(--fs-2); color: var(--ink-3); }
.home-tn-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.home-tn-acts :is(.btn-primary, .btn-ghost) { flex: none; height: 44px; padding: 0 18px; border-radius: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-4); text-decoration: none; }
.home-tn-acts .ico { width: 17px; height: 17px; }

/* the home page: live tiles */
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.home-tile { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 22px; text-decoration: none; transition: transform 0.35s var(--spring); }
@media (hover: hover) { .home-tile:hover { transform: translateY(-2px); } }
.home-tile-art { grid-row: span 2; display: grid; place-items: center; width: 72px; height: 72px; }
.home-tile-art svg { display: block; border-radius: 16px; }
.home-tile-ico { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(160deg, rgba(169, 203, 255, 0.28), rgba(120, 140, 255, 0.06)); color: #e4eeff; }
.home-tile-ico .ico { width: 28px; height: 28px; }
.home-tile .kicker { align-self: end; margin: 0; }
.home-tile-body { align-self: start; min-width: 0; }
.home-tile-body b { display: block; font-size: var(--fs-4); font-weight: 600; }
.home-tile-body small { display: block; font-size: var(--fs-2); color: var(--ink-3); line-height: 1.35; }
.aur-likely { color: var(--good); }
.aur-possible { color: var(--warn); }

/* the home page: coming up, tonight's story, and the ways in */
.home-coming-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.home-coming-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--tile); }
.home-coming-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(160, 200, 255, 0.1); color: var(--accent-ink); }
.home-coming-ico .ico { width: 18px; height: 18px; }
.home-coming-list b { display: block; font-size: var(--fs-4); font-weight: 600; }
.home-coming-list small { display: block; font-size: var(--fs-3); color: var(--ink-3); }
.home-coming-when { font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.home-story h2 { font-size: var(--fs-7); margin-top: 2px; }
.home-story-hook { margin: 8px 0 0; font-size: var(--fs-5); color: var(--ink-2); line-height: 1.5; }
.home-story-more { margin-top: 10px; }
.home-story-more summary { cursor: pointer; width: max-content; font-size: var(--fs-4); font-weight: 600; color: var(--accent-ink); }
.home-story-more p { margin: 10px 0 0; font-size: var(--fs-4); line-height: 1.6; color: var(--ink-2); }
.home-story-acts { margin-top: 14px; }
.home-story-acts .btn-ghost { height: 42px; padding: 0 16px; border-radius: 13px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-4); text-decoration: none; }
.home-story-acts .ico { width: 17px; height: 17px; }
.home-history { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-4); color: var(--ink-2); }
.home-explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-explore a { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 20px; text-decoration: none; background: var(--tint-strong); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); transition: transform 0.35s var(--spring); }
@media (hover: hover) { .home-explore a:hover { transform: translateY(-2px); } }
.home-explore-ico { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(160, 200, 255, 0.12); color: var(--accent-ink); }
.home-explore-ico .ico { width: 21px; height: 21px; }
.home-explore b { font-size: var(--fs-5); }
.home-explore small { font-size: var(--fs-2); color: var(--ink-3); line-height: 1.35; }
.home-foot a { color: var(--ink-3); }

/* ---------- words explained where they're used (terms.js) ---------- */

.term { display: inline; text-align: inherit; text-decoration: underline dotted rgba(200, 220, 255, 0.6); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
@media (hover: hover) { .term:hover { text-decoration-color: var(--accent-ink); } }
.term[aria-expanded="true"] { text-decoration-color: var(--accent-ink); }
.term-pop { position: fixed; z-index: 70; padding: 12px 14px 11px; border-radius: 16px; background: rgba(18, 22, 40, 0.98); box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.25), 0 18px 44px rgba(0, 0, 0, 0.55); font-size: var(--fs-4); line-height: 1.45; animation: cbDrop 0.18s var(--ease); }
.term-pop[hidden] { display: none; }
.term-pop b { display: block; margin-bottom: 2px; font-weight: 600; }
.term-pop p { margin: 0 0 8px; color: var(--ink-2); }
.term-pop a { font-size: var(--fs-3); font-weight: 600; color: var(--accent-ink); }

/* ---------- glass autocomplete ---------- */

.cb { position: relative; min-width: 0; }
.cb > input { width: 100%; }
.cb-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  min-width: 260px; max-height: 344px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34, 40, 66, 0.97), rgba(18, 22, 40, 0.97));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 22px 54px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.35);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  animation: cbDrop 0.2s var(--ease);
}
.cb-list[hidden] { display: none; }
@keyframes cbDrop { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
.cb-list li[role="option"] { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 12px; cursor: pointer; transition: background 0.12s; }
@media (hover: hover) { .cb-list li[role="option"]:hover { background: rgba(255, 255, 255, 0.1); } }
.cb-list li[aria-selected="true"] { background: rgba(255, 255, 255, 0.1); }
.cb-list li[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.4); }
.cb-thumb { width: 42px; height: 42px; flex: none; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); display: grid; place-items: center; }
.cb-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cb-icon { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); color: #dbe7ff; }
.cb-icon .ico { width: 16px; height: 16px; }
.cb-main { min-width: 0; }
.cb-main b { display: block; font-size: var(--fs-4); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-main small { display: block; font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-empty { padding: 10px 12px; font-size: var(--fs-3); color: var(--ink-3); }

.page input[type="search"], .page input:not([type]), .page input[type="text"], .page input[type="number"] {
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.28); color: var(--ink); outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.page input:focus { border-color: rgba(176, 210, 255, 0.6); background: rgba(0, 0, 0, 0.36); box-shadow: 0 0 0 3px rgba(120, 170, 255, 0.18); }
.page input::placeholder { color: var(--ink-4); }

/* ---------- tonight ---------- */

.tn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.tn-head h1 { overflow-wrap: anywhere; }
.tn-area { font-size: var(--fs-6); font-weight: 500; letter-spacing: -0.005em; color: var(--ink-3); margin-left: 4px; }
/* a place from a shared link can be kept (places.js saveButton) */
.save-place { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-top: 8px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-3); font-weight: 600; color: var(--accent-ink); background: rgba(160, 200, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.3); transition: background 0.2s; }
@media (hover: hover) { .save-place:hover:not(:disabled) { background: rgba(160, 200, 255, 0.2); } }
.save-place:disabled { color: var(--good); background: rgba(142, 240, 181, 0.1); box-shadow: none; cursor: default; }
.save-place .ico { width: 15px; height: 15px; }
.tg-place .save-place { margin: 0 0 0 8px; vertical-align: middle; height: 28px; }
.tn-place { display: flex; gap: 8px; align-items: center; }
.tn-place .cb { flex: 1 1 240px; }
.tn-place input { height: 44px; padding: 0 14px; border-radius: 14px; font-size: var(--fs-5); }
.tn-place .btn-ghost { height: 44px; padding: 0 14px; border-radius: 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--fs-4); }
.tn-place .btn-ghost .ico { width: 16px; height: 16px; }
.tn-place.compact { flex: 0 1 430px; }
.tn-place.compact input, .tn-place.compact .btn-ghost { height: 40px; }
.tn-ask { text-align: center; padding: 42px 30px 34px; }
.tn-ask-art { display: grid; place-items: center; margin-bottom: 8px; filter: drop-shadow(0 0 22px rgba(230, 235, 255, 0.35)); }
.tn-ask .tn-lead { max-width: 520px; margin: 10px auto 0; color: var(--ink-2); }
.tn-ask .tn-place { max-width: 540px; margin: 22px auto 0; text-align: left; }
.tn-ask .fineprint { max-width: 520px; margin: 16px auto 0; }

/* the verdict on a strip of tonight's sky (its colour now, or at the darkest hour) over the horizon */

/* the darkness timeline (night.js darkBand), on Tonight and, smaller, on Home */
.tn-band { position: relative; height: 56px; border-radius: 16px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.3); }
.tn-band.compact { height: 40px; border-radius: 13px; }
.tn-band-label { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0.03em; color: rgba(214, 226, 255, 0.82); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tn-band.compact .tn-band-label { font-size: var(--fs-2); gap: 6px; }
.tn-band-label::before, .tn-band-label::after { content: "✦"; font-size: 9px; color: rgba(255, 246, 216, 0.75); }
.tn-band-label.moonlit { color: rgba(225, 238, 255, 0.92); }
.tn-band-label.moonlit::before, .tn-band-label.moonlit::after { content: "☾"; font-size: var(--fs-1); color: rgba(240, 238, 225, 0.85); }
.tn-band-cap { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 7px; font-size: var(--fs-2); color: var(--ink-3); }
.tn-band-cap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 3px; }
/* the best clear window: a bracket under the band, with its times */
.tn-bestrow { position: relative; height: 26px; margin: 5px 0 0; }
.tn-best { position: absolute; top: 0; min-width: 18px; height: 7px; border: 1.5px solid var(--good); border-top: 0; border-radius: 0 0 6px 6px; }
.tn-best span { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: var(--fs-1); font-weight: 700; color: var(--good); white-space: nowrap; }

.tn-now { position: absolute; top: -3px; bottom: -3px; width: 0; }
.tn-now i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; border-radius: 2px; background: #ffd27a; box-shadow: 0 0 10px rgba(255, 210, 122, 0.8); }
.tn-now b { position: absolute; top: 6px; left: 7px; font-size: var(--fs-1); font-weight: 700; color: #ffd27a; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

.dew { color: #7cc4ff; font-size: var(--fs-1); }

/* the ways to the cloud map and the week ahead, under the hour strip */

.tn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.7fr); gap: 8px; margin: 18px 0 12px; }
.tn-seeing b { display: flex; align-items: center; gap: 8px; }
.tn-seeing.good b { color: var(--good); }
.tn-seeing.poor b { color: var(--bad); }

/* A steady star glows a little brighter and back: a second glow fading in and out (an opacity
   animation, which the graphics chip does alone; animating the shadow itself repainted the page
   every frame) */
.see-star { position: relative; flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(200, 220, 255, 0.7); }
.see-star::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 7px 2px rgba(200, 220, 255, 0.5); opacity: 0; animation: shimmer 2.4s ease-in-out infinite; }
.see-star.avg { animation: shimmer-avg 0.9s steps(6) infinite; }
.see-star.poor { animation: shimmer-poor 0.42s steps(5) infinite; }
.see-star.avg::after, .see-star.poor::after { display: none; }
@keyframes shimmer { 50% { opacity: 1; } }
@keyframes shimmer-avg { 0%, 100% { transform: translate(0, 0); filter: blur(0.3px); } 33% { transform: translate(0.6px, -0.4px); filter: blur(0.7px); } 66% { transform: translate(-0.5px, 0.5px); filter: blur(0.4px); } }
@keyframes shimmer-poor { 0%, 100% { transform: translate(0, 0) scale(1); filter: blur(0.8px); opacity: 1; } 25% { transform: translate(1.6px, -1px) scale(1.3); filter: blur(1.6px); opacity: 0.7; } 50% { transform: translate(-1.4px, 1.2px) scale(0.85); filter: blur(1.1px); opacity: 0.95; } 75% { transform: translate(0.8px, 1.6px) scale(1.2); filter: blur(2px); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .see-star, .see-star::after { animation: none !important; } }
.tn-fact { padding: 12px 14px; border-radius: 16px; background: var(--tile); min-width: 0; }
.tn-fact span { display: block; font-size: var(--fs-2); color: var(--ink-3); }
.tn-fact b { display: block; font-size: var(--fs-6); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tn-fact small { display: block; font-size: var(--fs-2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tn-moon { display: flex; align-items: center; gap: 14px; }
.tn-moon .moonart { flex: none; filter: drop-shadow(0 0 10px rgba(236, 235, 228, 0.25)); }

/* your places, for switching (places.js placeChips) */
.place-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; }
.place-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16); transition: background 0.2s, color 0.2s; }
.place-chips button .ico { width: 14px; height: 14px; }
@media (hover: hover) { .place-chips button:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); } }
.place-chips button[aria-pressed="true"] { background: rgba(160, 200, 255, 0.18); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(176, 210, 255, 0.6); }
.place-chips-more { margin-left: 4px; font-size: var(--fs-3); font-weight: 600; color: var(--accent-ink); text-decoration: none; }
@media (hover: hover) { .place-chips-more:hover { text-decoration: underline; } }

/* the plan for the night */

.tn-clear { font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
.tn-clear.c3 { color: var(--st-1); }
.tn-clear.c2 { color: var(--st-2); }
.tn-clear.c1 { color: var(--st-3); }
.tn-clear.c0 { color: var(--cloudy); }
.tn-clear b { font-size: 1.3em; font-weight: 700; font-variant-numeric: tabular-nums; }

/* "I saw it" (log-ui.js), on cards across the site */
.saw-btn { height: 34px; padding: 0 12px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-4); font-weight: 600; color: var(--ink); background: rgba(142, 240, 181, 0.12); box-shadow: inset 0 0 0 0.5px rgba(142, 240, 181, 0.3); cursor: pointer; }
.saw-btn .ico { width: 16px; height: 16px; color: var(--good); }
.saw-btn.seen { color: var(--ink-2); background: rgba(255, 255, 255, 0.06); box-shadow: none; }

/* before you go out */

/* a meteor shower or the aurora, when there's one to see */

.up-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 22px; }
.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.up-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--tile); }
.up-item.washed { opacity: 0.6; }
.up-art { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.up-dso .ico { width: 22px; height: 22px; color: #dbe7ff; }
.up-main b { display: block; font-size: var(--fs-5); font-weight: 600; }
.up-main small { display: block; font-size: var(--fs-3); color: var(--ink-3); line-height: 1.35; }
.up-when { text-align: right; }
.up-when b { display: block; font-size: var(--fs-5); font-variant-numeric: tabular-nums; }
.up-when small { display: block; font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap; }
.up-mag { font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap; }
.up-link { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(160, 200, 255, 0.12); color: var(--accent-ink); text-decoration: none; font-size: var(--fs-3); font-weight: 600; transition: background 0.2s; }
@media (hover: hover) { .up-link:hover { background: rgba(160, 200, 255, 0.22); } }
.up-link .ico { width: 15px; height: 15px; }

.moon-week, .moon-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.moon-week { margin-bottom: 6px; }
.moon-week span { text-align: center; font-size: var(--fs-2); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.moon-cal { list-style: none; margin: 0; padding: 0; }
.moon-cal li.blank { background: none; box-shadow: none; }
.moon-cal li { display: grid; justify-items: center; gap: 5px; padding: 10px 4px 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.moon-cal li.dark { background: rgba(160, 200, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.28); }
.moon-cal li.today { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.mc-day { font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap; }
.moon-cal li.today .mc-day { color: var(--ink); font-weight: 600; }
.mc-pc { font-size: var(--fs-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- tools ---------- */

.tool-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: var(--fs-4); font-weight: 600; color: var(--accent-ink); text-decoration: none; }
@media (hover: hover) { .tool-link:hover { text-decoration: underline; } }
.tool-link .ico { width: 16px; height: 16px; }

.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chips button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s, color 0.2s; }
@media (hover: hover) { .tl-chips button:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); } }
.tl-chips button[aria-pressed="true"] { background: rgba(160, 200, 255, 0.2); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(176, 210, 255, 0.7); }
.tl-chips .ico { width: 16px; height: 16px; }

.tl-chips button .see-star { margin-right: 2px; width: 6px; height: 6px; }

.tl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; padding: 0; background: transparent; border: 0 !important; box-shadow: none !important; cursor: pointer; }
.tl-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #0b1230, #3a4a7a 35%, #a07a5a 70%, #e0a060); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.tl-range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #0b1230, #3a4a7a 35%, #a07a5a 70%, #e0a060); }
.tl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: linear-gradient(180deg, #fff, #dce6ff); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(169, 203, 255, 0.18); }
.tl-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #fff, #dce6ff); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.tl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(170, 205, 255, 0.95); }

/* the verdict, the figures, what can be seen and the note: spaced like the rest of the card */

/* ---------- targets ---------- */

.tg-place { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.tg-place .ico { width: 16px; height: 16px; color: var(--accent-ink); }
.tg-place span { font-weight: 400; color: var(--ink-3); }
/* counting only what's clear of your skyline (horizon.js) */

.tg-link { display: inline-flex; align-items: center; gap: 3px; padding: 0; margin-left: 6px; font: inherit; font-weight: 600; color: var(--accent-ink); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .tg-link:hover { text-decoration: underline; } }
.tg-link .ico { width: 14px; height: 14px; }

/* pages whose sections come in one wrapper space them as the page spaces its cards */
.tg-body, .ev-body { display: grid; gap: inherit; }

/* What to see: the choices in one line, Edit unfolding them */

/* the best few, by when to look */

/* the best time this year (yearstrip.js) */

.yr-strip { padding: 10px 12px 8px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.yr-title { margin: 0 0 6px; font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.yr-strip svg { display: block; width: 100%; height: 36px; color: #a9cbff; }
.yr-months { position: relative; height: 16px; margin-top: 3px; font-size: var(--fs-1); color: var(--ink-3); }
.yr-months span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.yr-months .now { left: 0; transform: none; color: var(--accent-ink); font-weight: 600; }
.yr-words { margin: 4px 0 0; font-size: var(--fs-3); color: var(--ink-2); }

@media (max-width: 520px) { .yr-months span:nth-child(odd):not(.now) { display: none; } }

.tg-badge { flex: none; display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
.tg-badge.good { background: rgba(142, 240, 181, 0.16); color: var(--good); }
.tg-badge.fair { background: rgba(255, 213, 158, 0.14); color: var(--warn); }
.tg-badge.poor { background: rgba(200, 210, 235, 0.1); color: var(--ink-3); }

/* Tonight: best targets and your sky */
.tn-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-top a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--tile); text-decoration: none; transition: background 0.2s; }
@media (hover: hover) { .tn-top a:hover { background: var(--tile-hover); } }

.tn-top-main b { display: block; font-size: var(--fs-5); font-weight: 600; }
.tn-top-main small { display: block; font-size: var(--fs-2); color: var(--ink-3); }
.tn-top-when { text-align: right; }
.tn-top-when b { display: block; font-size: var(--fs-4); font-variant-numeric: tabular-nums; }
.tn-top-when small { display: block; font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap; }
.tn-top .tg-badge { grid-column: 2 / -1; justify-self: start; }

.tn-bortle, .lp-bortle i, .lp-darker i { flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px rgba(0, 0, 0, 0.35); }

.ht-pick { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.ht-pick .oart { border-radius: 9px; flex: none; }

/* ---------- light pollution map ---------- */

.lp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.lp-map-wrap { position: relative; min-width: 0; }
.lp-map { height: min(68vh, 680px); min-height: 380px; border-radius: 20px; overflow: hidden; background: #05070f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.lp-msg { padding: 30px; }
.lp-status { position: absolute; z-index: 500; left: 50%; top: 12px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 99px; font-size: var(--fs-3); font-weight: 600; color: var(--ink); background: rgba(12, 15, 30, 0.82); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); pointer-events: none; white-space: nowrap; }
.lp-status[hidden] { display: none; }
.lp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lp-side .tn-place input { height: 40px; }
.lp-side .tn-place .btn-ghost { height: 40px; }
.lp-readout { padding: 14px; border-radius: 18px; background: var(--tile); display: grid; gap: 10px; }
.lp-readout .tn-loading { padding: 10px 0; justify-content: flex-start; }
.lp-where { margin: 0; font-weight: 600; }
.lp-where span { font-weight: 400; color: var(--ink-3); }
.lp-bortle { display: flex; align-items: center; gap: 12px; }
.lp-bortle i { width: 48px; height: 48px; border-radius: 14px; font-size: var(--fs-7); }
.lp-bortle b { display: block; font-size: var(--fs-5); }
.lp-bortle small { display: block; font-size: var(--fs-2); color: var(--ink-3); }
.lp-text { margin: 0; font-size: var(--fs-3); color: var(--ink-2); }
.lp-readout .sec-sub { margin: 4px 0 0; }
.lp-darker { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-darker button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-align: left; transition: background 0.15s; }
@media (hover: hover) { .lp-darker button:hover { background: rgba(255, 255, 255, 0.07); } }
.lp-darker i { width: 30px; height: 30px; border-radius: 9px; font-size: var(--fs-4); }
.lp-darker b { display: block; font-size: var(--fs-4); }
.lp-darker small { display: block; font-size: var(--fs-2); color: var(--ink-3); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-actions .btn-ghost { height: 36px; padding: 0 12px; border-radius: 11px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); }
.lp-actions .ico { width: 15px; height: 15px; }
.lp-legend { padding: 0 2px; }
.lp-scale { display: flex; height: 12px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.lp-scale i { flex: 1; }
.lp-scale-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-2); color: var(--ink-3); }
.lp-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-3); color: var(--ink-2); cursor: pointer; }
.lp-toggle input { width: 16px; height: 16px; accent-color: #a9cbff; }
.lp-side .fineprint { margin: 0; }
.lp-overlay { image-rendering: auto; mix-blend-mode: screen; }
.lp-map .lp-base { filter: invert(1) hue-rotate(180deg) brightness(0.78) contrast(0.92) saturate(0.35); }
.lp-map .leaflet-control-zoom a { background: rgba(12, 15, 30, 0.88); color: var(--ink); border-color: rgba(255, 255, 255, 0.12); }
@media (hover: hover) { .lp-map .leaflet-control-zoom a:hover { background: rgba(30, 36, 60, 0.95); } }
.lp-map .leaflet-bar { border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); border-radius: 12px; overflow: hidden; }
.lp-map.leaflet-container .leaflet-control-attribution { background: rgba(5, 7, 15, 0.72); color: var(--ink-3); font-size: var(--fs-1); }
.lp-map.leaflet-container .leaflet-control-attribution a { color: var(--ink-2); }
.lp-map .leaflet-tooltip { background: rgba(12, 15, 30, 0.92); color: var(--ink); border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); border-radius: 8px; font: 600 12px var(--font); }
.lp-map .leaflet-tooltip-top::before { border-top-color: rgba(12, 15, 30, 0.92); }
.lp-map.leaflet-container { font: inherit; background: #05070f; }

/* ---------- responsive ---------- */

@media (max-width: 1060px) {
  
  .lp-layout { grid-template-columns: 1fr; }
  .lp-map { height: 58vh; }
}

@media (max-width: 900px) {
  
  
  .tn-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tn-moon { grid-column: 1 / -1; }
  .up-grid { grid-template-columns: 1fr; }
  .ht-grid { grid-template-columns: 1fr; }
  .ht-facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .page { padding: calc(var(--top-h) + 8px) 10px calc(var(--bottom-h) + 24px); }
  .page-wrap { gap: 12px; }
  .page-card { padding: 20px 16px 22px; border-radius: 24px; }
  .page h1 { font-size: var(--fs-8); }
  .page h2 { font-size: var(--fs-6); }
  .home-hero { padding: 14px 6px 4px; }
  .home-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-tile { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: start; row-gap: 6px; padding: 12px; }
  .home-tile-art { grid-row: auto; width: auto; height: auto; }
  .home-tile-art svg { width: 56px; height: 56px; }
  .home-tile-ico { width: 50px; height: 50px; }
  .home-picks { grid-template-columns: 1fr; }
  .home-picks a { grid-template-columns: 52px minmax(0, 1fr); }
  .home-pick-art svg { width: 52px; height: 52px; }
  .home-explore { grid-template-columns: 1fr; gap: 8px; }
  .home-tn-title { font-size: var(--fs-7); }
  .home-coming-list li { grid-template-columns: 32px minmax(0, 1fr); }
  .home-coming-when { grid-column: 2; font-size: var(--fs-2); }
  .home-hero p { font-size: var(--fs-5); }
  .ht-empty { flex-direction: column; text-align: center; gap: 12px; }
  .ht-main { padding: 14px; gap: 12px; }
  .ht-main b { font-size: var(--fs-7); }
  .ht-picks .sec-sub { flex-basis: 100%; }
  .ht-picks .sec-more { margin-left: 0; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .tn-top { grid-template-columns: 1fr; }
  
  
  
  .lp-map { height: 52vh; min-height: 300px; border-radius: 16px; }
  
  .guide-grid, .guide-grid.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guide-art { height: 74px; }
  .sec-head.row { flex-wrap: wrap; }
  .tn-head { align-items: stretch; flex-direction: column; }
  .tn-area { display: block; margin: 2px 0 0; font-size: var(--fs-5); }
  .tn-place.compact { flex: none; }
  .tn-place .btn-ghost { padding: 0 12px; }
  .tn-ask { padding: 28px 16px 24px; }
  .tn-ask .tn-place { flex-wrap: wrap; }
  .tn-ask .tn-place .btn-ghost { flex: 1 1 100%; justify-content: center; }
  
  
  
  
  
  .tn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tn-fact { padding: 10px; }
  .tn-fact b { font-size: var(--fs-4); }
  .up-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
  .up-art { width: 36px; height: 36px; }
  .up-item > .up-mag, .up-item > .up-link { grid-column: 2 / -1; justify-self: start; }
  .up-item > .up-mag { margin-top: -6px; }
  .moon-week, .moon-cal { gap: 3px; }
  .moon-cal li { padding: 7px 1px 6px; border-radius: 10px; gap: 3px; }
  .moon-cal .mc-day { font-size: 9.5px; }
  .moon-cal .moonart { width: 20px; height: 20px; }
  .moon-week span { font-size: var(--fs-1); }
  
  
  
  
  
  
  
  .cb-list { min-width: 0; }
}

@media (max-width: 430px) {
  .tn-facts { grid-template-columns: 1fr 1fr; }

  
  
}

/* home: sky map card */
.home-sky { display: grid; grid-template-columns: 168px 1fr auto; gap: 22px; align-items: center; padding: 18px 24px 18px 18px; color: inherit; text-decoration: none; transition: transform 0.35s var(--spring); }
@media (hover: hover) { .home-sky:hover { transform: translateY(-2px); } }
.home-sky-art svg { display: block; width: 168px; height: auto; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.home-sky-text { display: grid; gap: 4px; min-width: 0; }
.home-sky-text .kicker { margin: 0; }
.home-sky-text b { font-size: var(--fs-7); font-weight: 600; letter-spacing: -0.015em; }
.home-sky-text small { font-size: var(--fs-4); color: var(--ink-2); }
@media (max-width: 640px) {
  .home-sky { grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; }
  .home-sky-art svg { width: 96px; border-radius: 12px; }
  .home-sky .sec-more { display: none; }
  .home-sky-text b { font-size: var(--fs-6); }
  .home-sky-text small { font-size: var(--fs-3); }
}

/* home: links to the events, space weather and 3D universe pages, and the assistant */
.home-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 12px; }
.home-more-tile { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 0; border-radius: 18px; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; background: rgba(255, 255, 255, 0.035); transition: background 0.2s; }
@media (hover: hover) { .home-more-tile:hover { background: rgba(255, 255, 255, 0.075); } }
.home-more-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(160, 200, 255, 0.12); color: var(--accent-ink); }
.home-more-ico .ico { width: 21px; height: 21px; }
.home-more-tile b { display: block; font-size: var(--fs-6); font-weight: 600; }
.home-more-tile small { display: block; font-size: var(--fs-3); color: var(--ink-2); }
@media (max-width: 560px) {
  .home-more { grid-template-columns: 1fr; }
}

/* Tonight: space station passes, each a link to the sky map at that moment */

/* targets: the Ask link is a button styled like its neighbours */

/* My gear: a link-styled button on the tools and Targets pages */
:is(.tl-gear, .tg-gear) { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
:is(.tl-gear, .tg-gear) .ico { width: 15px; height: 15px; }

.home-tool-links { display: inline-flex; align-items: center; gap: 16px; }
.home-tool-links .ico { width: 16px; height: 16px; }

/* ---------- Ask buttons on the pages (the assistant's own panel is in ai.css) ---------- */

.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-chips[hidden] { display: none; }
.ai-chip {
  min-height: 34px; padding: 7px 13px; border-radius: 17px;
  text-align: left; font-size: var(--fs-3); font-weight: 600; line-height: 1.35;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.3s var(--spring);
}
@media (hover: hover) { .ai-chip:hover { background: rgba(160, 200, 255, 0.15); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.35); } }
.ai-chip:active { transform: scale(0.97); }

/* An "Ask" button for the pages: <button class="ai-ask">${icon("sparkle")} Ask about it</button> */
.ai-ask {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px 0 12px; border-radius: 999px;
  font-size: var(--fs-4); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(160, 200, 255, 0.3), rgba(160, 200, 255, 0.14));
  box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 20px rgba(120, 170, 255, 0.16);
  transition: background 0.2s, box-shadow 0.3s, transform 0.3s var(--spring);
}
@media (hover: hover) { .ai-ask:hover { background: linear-gradient(180deg, rgba(160, 200, 255, 0.4), rgba(160, 200, 255, 0.2)); box-shadow: inset 0 0 0 1px rgba(176, 210, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 26px rgba(120, 170, 255, 0.26); transform: translateY(-1px); } }
.ai-ask:active { transform: scale(0.97); }
.ai-ask .ico { width: 16px; height: 16px; color: var(--accent-ink); }
.home-stale { margin: 8px 2px 0; display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-3); color: #ffd28a; }
.home-stale .ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.home-credit { margin: 12px 0 0; }