/* ==========================================================================
   Mars Analog Finder — styles
   Two typefaces only: Narwal for headings, Noto Sans for everything else.
   ========================================================================== */

/* Noto Sans is self-hosted (SIL Open Font License, assets/fonts/NotoSans-OFL.txt).
   Narwal loads from assets/fonts/Narwal.woff2 or a locally installed copy;
   until either exists, headings fall back to bold Noto Sans. */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/NotoSans-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/NotoSans-500.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/NotoSans-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/NotoSans-700.woff2") format("woff2"); }
@font-face { font-family: "Narwal"; font-style: normal; font-weight: 400 900; font-display: swap; src: local("Narwal"), local("Narwal Bold"), url("../assets/fonts/Narwal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #03050a;
  --panel: rgba(10, 11, 14, 0.9);
  --panel-2: #0e1014;
  --line: #8b9098;          /* box outlines (2px), neutral grey */
  --line-2: #c4c8ce;        /* controls, hover */
  --rule: #44484f;          /* hairlines inside tables and lists */
  --text: #ffffff;          /* body text is pure white */
  --head: #6ea8ff;          /* headings are blue */
  --earth-h: 720px;         /* Earth globe height; the detail panel matches it */
  --gap: 56px;              /* space above every section */
  --nasa-blue: #0b3d91;
  --nasa-blue-2: #1450b5;
  --data: #4a8fe7;
  --err: #e5584f;
  --radius: 3px;
  --radius-sm: 2px;
  --bw: 2px;                /* border width */
  --font-head: "Narwal", "Noto Sans", sans-serif;
  --font-sans: "Noto Sans", sans-serif;
  /* Numbers use Noto Sans too, with tabular figures so columns line up. */
  --font-mono: var(--font-sans);
  /* Kept for the canvas globe, which reads these for its labels. */
  --font-display: var(--font-head);
  --font-body: var(--font-sans);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Legible text on top of the globes without a box behind it. */
  --halo: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000;
}

*, *::before, *::after { box-sizing: border-box; }
/* 17px base; the smallest text anywhere is .85rem ≈ 14.5px. */
html { font-size: 17px; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
::selection { background: rgba(74, 143, 231, .35); color: #fff; }
[hidden] { display: none !important; }
sub, sup { font-size: max(.8em, 14px); }
button, input, select { font-family: var(--font-sans); }

/* ---------------------------------------------------------------- background */
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 68px; padding: 0 clamp(16px, 4vw, 40px);
  background: #03050a;
  border-bottom: var(--bw) solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand-logo { display: block; width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; }
.brand strong { font: 700 1.15rem var(--font-head); letter-spacing: .01em; }
.steps { display: flex; align-self: stretch; }
.step { position: relative; display: flex; align-items: center; padding: 0 16px; color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 500; }
.step::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: calc(-1 * var(--bw)); height: 3px; background: transparent; transition: background .2s; }
.step.is-active::after { background: var(--data); }
.step.is-locked { display: none; }

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { margin: 0; color: var(--head); font-family: var(--font-head); font-weight: 700; line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
.muted { color: var(--text); }

/* ---------------------------------------------------------------- reveal */
/* Scroll-linked fade (js/app.js sets --reveal from 0 to 1): the top of each block
   appears first and the bottom follows, so text fades in line by line. */
.reveal {
  --reveal: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--reveal) * 160% - 60%), transparent calc(var(--reveal) * 160%));
  mask-image: linear-gradient(180deg, #000 calc(var(--reveal) * 160% - 60%), transparent calc(var(--reveal) * 160%));
}
.reveal.in { -webkit-mask-image: none; mask-image: none; }

/* ---------------------------------------------------------------- layout */
main { position: relative; }
/* Every section starts the same distance below the previous one. */
.section { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--gap) clamp(16px, 4vw, 40px) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: var(--bw) solid var(--line); }
.panel { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--radius); }

/* ---------------------------------------------------------------- hero */
.hero { min-height: 82vh; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 6vw, 72px); max-width: 1280px; margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.hero-logo { display: block; width: clamp(170px, 22vw, 270px); height: auto; border-radius: var(--radius); }
.hero-copy { min-width: 0; }
/* Title on at most two lines, subtitle on one (narrow phones wrap as needed). */
.hero-title { font-size: clamp(2rem, 3.3vw, 3.2rem); line-height: 1.08; margin-bottom: 18px; text-wrap: balance; }
.hero-sub { font-size: clamp(1.05rem, 1.45vw, 1.25rem); margin: 0 0 30px; white-space: nowrap; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.no-logo .hero-logo, .no-logo .brand-logo, .no-logo .footer-brand img { display: none; }

/* ---------------------------------------------------------------- buttons */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; height: var(--h); padding: 0 24px; border: var(--bw) solid transparent; border-radius: var(--radius-sm); font: 600 1rem var(--font-sans); color: var(--text); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn-primary { background: var(--nasa-blue); border-color: #2a62c4; }
.btn-primary:hover { background: var(--nasa-blue-2); }
.btn-white { background: #fff; border-color: #fff; color: #03050a; }
.btn-white:hover { background: #dfe7f2; border-color: #dfe7f2; }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { border-color: #fff; }
.btn-lg { --h: 54px; padding: 0 30px; font-size: 1.05rem; }
.btn-sm { --h: 44px; padding: 0 18px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn:disabled { background: transparent; border-color: var(--line); cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--data); outline-offset: 3px; }

/* Option buttons (presets, quick picks, map layers, Bars/Color): bordered
   buttons; the selected one is filled NASA blue. */
.chip-row, .segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .segmented button {
  min-height: 40px; padding: 7px 16px; border: var(--bw) solid var(--line-2); border-radius: var(--radius-sm);
  background: rgba(3, 5, 10, .7); color: var(--text); font: 600 .95rem var(--font-sans); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.chip:hover, .segmented button:hover { border-color: #fff; }
.chip.is-active, .segmented button.is-active { background: var(--nasa-blue); border-color: #2a62c4; }

/* ---------------------------------------------------------------- priorities */
/* Above the next section, so an open info dropdown is never covered by it. */
#priorities { z-index: 2; }

/* Progress: four labelled segments; done ones blue, the current one white. */
.progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
/* Fixed height (two lines) so a bold or wrapping label never moves the form below. */
.progress button { display: flex; align-items: flex-end; width: 100%; height: calc(2 * 1.35em + 12px); line-height: 1.35; padding: 0 0 12px; border: 0; border-bottom: 4px solid var(--rule); background: none; color: var(--text); font: 500 .95rem var(--font-sans); text-align: left; cursor: pointer; transition: border-color .2s; }
.progress button.is-done { border-bottom-color: var(--nasa-blue-2); }
.progress button[aria-current="step"] { border-bottom-color: #fff; font-weight: 700; }
.progress button:disabled { cursor: default; }
.progress button:hover:not(:disabled):not([aria-current]) { border-bottom-color: var(--line); }

/* Paged form: every page sits in the same grid cell, so the box keeps the
   tallest page's height and the Back/Next row never jumps. */
.criteria-grid { display: grid; overflow-x: clip; }   /* off-page slides must not widen the page; dropdowns still overflow downwards */
/* Pages cross-fade in place. Every page has the same number of rows (short
   pages get empty spacer rows) and every row the same height, so the lines
   stay put and only the text changes. */
.category-block { grid-area: 1 / 1; align-content: start; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.category-block:not(.is-current) { opacity: 0; visibility: hidden; pointer-events: none; }
.category-block.is-current { transition: opacity .3s var(--ease); }
.category-title { height: 1.25em; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.25; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* One row per criterion: name and what it measures, then the slider and value. */
.category-cards { display: grid; }
.crit-card { --row-h: 118px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 4.2rem 34px; align-items: center; gap: 8px 28px; height: var(--row-h); padding: 0; border-bottom: 1px solid var(--rule); }
.crit-card.is-open { z-index: 30; }
.crit-text label { display: block; font: 700 1.15rem var(--font-sans); }
.crit-measures { margin: 4px 0 0; font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.crit-value { font: 600 1.6rem var(--font-sans); text-align: right; font-variant-numeric: tabular-nums; }
/* Every slider is the same size and shape in every browser; only the color differs. */
.slider { --pct: 50%; display: block; width: 100%; height: 6px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; border: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cat) 0 var(--pct), var(--rule) var(--pct) 100%); outline-offset: 8px; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--cat); }
.slider::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--cat); }
.slider::-moz-range-track { height: 6px; background: transparent; border: 0; }
/* Details open as a dropdown below the row: it scrolls internally and never changes the row height. */
.info-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: var(--bw) solid var(--line-2); border-radius: 50%; background: transparent; color: var(--text); font: italic 700 1.1rem Georgia, "Times New Roman", serif; cursor: pointer; transition: border-color .15s, background .15s; }
.info-btn:hover { border-color: #fff; }
.info-btn[aria-expanded="true"] { background: var(--nasa-blue); border-color: #2a62c4; }
.crit-info {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 20;
  max-height: 300px; overflow-y: auto; padding: 16px 20px; font-size: .95rem;
  background: #0e1014; border: var(--bw) solid var(--line-2); border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.crit-card.is-open .crit-info { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.crit-info p { margin: 0 0 10px; }
.crit-info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.crit-info dt { font-weight: 700; }
.crit-info dd { margin: 0; }
.crit-info .crit-note { margin: 12px 0 0; }

.form-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 30px; }
.form-nav #pagePrev { justify-self: start; }
.form-nav #pageNext { justify-self: end; }
#pagePrev:disabled { visibility: hidden; }
.form-count { font-size: 1rem; }

/* ---------------------------------------------------------------- viewers */
.viewer-shell { position: relative; border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 520px; background: rgba(1, 2, 6, .55); }
.viewer { position: absolute; inset: 0; }
.viewer .cesium-viewer, .viewer .cesium-widget, .viewer canvas { width: 100%; height: 100%; }
/* Cesium's credit line sits in the same kind of box as the other map controls. */
.viewer .cesium-viewer-bottom { left: 12px; bottom: 12px; right: auto; width: max-content; max-width: calc(100% - 330px); padding: 6px 10px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: rgba(3, 5, 10, .9); }
.viewer .cesium-widget-credits { position: static !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 !important; font-size: 14px; line-height: 1.3; color: var(--text); text-shadow: none; }
.viewer .cesium-widget-credits a, .viewer .cesium-credit-text { color: var(--text) !important; }
/* Only the Cesium ion logo stays on the globe; the full credit list opens from "Data attribution" in the footer. */
.viewer .cesium-credit-expand-link, .viewer .credit-hidden { display: none !important; }
.viewer .cesium-credit-lightbox-overlay { z-index: 20; visibility: visible; }
.mars-shell .viewer canvas { cursor: crosshair !important; }
.mars-shell .viewer canvas:active { cursor: grabbing !important; }
.viewer-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; transition: opacity .4s; z-index: 3; }
.viewer-loading.done { opacity: 0; pointer-events: none; }
.viewer-loading.error p { max-width: 340px; text-align: center; }
.spinner { width: 140px; height: 3px; background: var(--line); position: relative; overflow: hidden; }
.spinner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: var(--data); animation: scan 1.1s linear infinite; }
@keyframes scan { from { left: -30%; } to { left: 100%; } }
.viewer-badge { position: absolute; z-index: 4; top: 14px; left: 16px; font: 600 .95rem var(--font-sans); text-shadow: var(--halo); pointer-events: none; }
.cursor-readout { position: absolute; z-index: 5; pointer-events: none; font: 600 .95rem var(--font-sans); white-space: pre; text-shadow: var(--halo); transform: translate(16px, 14px); }
.viewer-tooltip { position: absolute; z-index: 6; pointer-events: none; min-width: 180px; padding: 10px 14px; border: var(--bw) solid var(--line-2); border-radius: var(--radius-sm); background: rgba(5, 8, 15, .97); transform: translate(14px, -50%); }
.viewer-tooltip b { display: block; font: 700 1rem var(--font-sans); }
.viewer-tooltip span { display: block; font-size: .9rem; margin-top: 2px; }
.viewer-tooltip strong { display: block; font: 600 1.2rem var(--font-sans); }

/* ---------------------------------------------------------------- target */
.target-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 16px; }
.mars-shell { min-height: 640px; }
.target-panel { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.coord-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.coord-form label, .select-wrap { display: grid; gap: 6px; font: 600 .95rem var(--font-sans); }
input[type="number"], select { width: 100%; height: 46px; padding: 0 12px; border: var(--bw) solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); font: 400 1rem var(--font-sans); transition: border-color .15s; }
input[type="number"]:focus, select:focus { border-color: var(--data); outline: none; }
/* No dropdown arrow icon: the select reads as a plain field. */
select { -webkit-appearance: none; appearance: none; cursor: pointer; }
select option { background: #0b111d; }
.form-error { margin: -6px 0 0; padding-left: 10px; border-left: 3px solid var(--err); font-size: .95rem; }
.form-error:empty { display: none; }
#quickPicks { gap: 4px 18px; }
.target-readout { flex: 1; padding-top: 14px; border-top: 1px solid var(--rule); }
.target-readout .coord-big { font: 600 1.4rem var(--font-sans); }
.target-readout .near { margin: 2px 0 14px; font: 700 1.1rem var(--font-head); }
.profile-list { display: grid; gap: 10px; }
.profile-row { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 12px; font-size: .95rem; }
.profile-row .bar { height: 12px; background: var(--rule); }
.profile-row .bar i { display: block; height: 100%; width: 0; background: var(--cat); transition: width .6s var(--ease); }
.profile-row .v { text-align: right; }

/* ---------------------------------------------------------------- results */
.results.is-hidden { display: none; }
.demo-badge { font-size: .95rem; }
.top-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.top-card { display: flex; flex-direction: column; overflow: hidden; padding: 16px; text-align: left; cursor: pointer; color: var(--text); font: inherit; transition: border-color .15s, background .15s; }
.top-card:hover { border-color: var(--line-2); }
.top-card.is-selected { border-color: var(--data); background: rgba(16, 32, 60, .92); }
.top-head { display: flex; align-items: baseline; justify-content: space-between; }
.rank { font: 700 1.7rem var(--font-head); line-height: 1; }
.top-score { font: 600 1.8rem var(--font-sans); font-variant-numeric: tabular-nums; line-height: 1; }
.score-bar { height: 6px; background: var(--rule); margin: 12px 0 14px; }
.score-bar i { display: block; height: 100%; width: 0; background: var(--data); transition: width .8s var(--ease); }
.top-card h4 { font-size: 1.1rem; }
.top-card .where { margin: 2px 0 14px; font-size: .95rem; }
.mini-bars { margin-top: auto; display: grid; grid-template-columns: repeat(10, 1fr); align-items: end; gap: 3px; height: 68px; border-bottom: var(--bw) solid var(--line-2); }
.mini-bars i { display: block; background: var(--cat); height: 0; transition: height .7s var(--ease); }

/* Location images: pictures only, no captions. */
.card-photo { margin: -16px -16px 14px; }
.card-photo .view-img { border: 0; border-bottom: var(--bw) solid var(--line); border-radius: 0; }
.view-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: #0b0d12; }
.view-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.is-loaded .view-img img[src] { opacity: 1; }
.view-img .pano { position: absolute; inset: 0; }
.pano-inner { position: absolute; inset: 0; }

.earth-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); gap: 16px; margin-bottom: 16px; }
.earth-shell { height: var(--earth-h); min-height: 0; }
/* Map controls: a boxed bar of layer buttons along the top, and a boxed
   key (Bars/Color buttons and the legend) in the bottom-right corner. */
.layer-picker { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: rgba(3, 5, 10, .88); }
.layer-picker .chip { min-height: 34px; padding: 4px 12px; font-size: .88rem; }
/* Bottom-right corner: the map-style buttons on their own, the boxed legend below them. */
.map-key { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.view-toggle { justify-content: flex-end; }
.view-toggle button { min-height: 36px; padding: 5px 14px; }
.legend { width: 290px; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: rgba(3, 5, 10, .9); }
.legend:empty { display: none; }

/* Chart view: the same scores as a ranked bar chart, in the globe's frame. */
.earth-shell.is-chart .viewer, .earth-shell.is-chart .viewer-loading { visibility: hidden; }
.earth-shell.is-chart .legend { display: none; }   /* bars carry their values and ramp colors */
.rank-view { position: absolute; z-index: 4; left: 12px; right: 12px; top: calc(var(--layers-h, 60px) + 22px); bottom: 60px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: rgba(3, 5, 10, .94); }
.rank-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.rank-controls .segmented button, .rank-pager .chip { min-height: 36px; padding: 5px 14px; }
.rank-pager { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rank-pager .chip:disabled { opacity: .4; cursor: default; }
#rankRange { min-width: 9.5em; text-align: center; font-weight: 600; }
.rank-box { position: relative; flex: 1; min-height: 0; }
.rank-box > canvas { width: 100% !important; height: 100% !important; }
.legend h5 { margin: 0 0 8px; font: 700 1rem var(--font-head); }
.legend .ramp { height: 14px; background: linear-gradient(90deg, #123a82, #2a63c4, #7fa6d9, #e8c9a0, #f39a42, #ff7a00); }
.legend .ticks { display: flex; justify-content: space-between; margin-top: 4px; font-size: .9rem; }

/* Same height as the globe beside it; longer content scrolls inside the panel. */
.detail-panel { height: var(--earth-h); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.detail-panel > * { flex: none; }
.detail-panel .detail-title { font-size: 1.5rem; }
.detail-panel .where { margin: 0; font-size: .95rem; }
.detail-total { padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.detail-total strong { font: 600 2.4rem var(--font-sans); font-variant-numeric: tabular-nums; }
.detail-panel .chart-box { height: 400px; }
.detail-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.view { margin: 0; display: grid; gap: 6px; align-content: start; }
.score-table, .rules-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.score-table th, .rules-table th { padding: 8px 0; text-align: left; font: 700 .95rem var(--font-sans); border-bottom: var(--bw) solid var(--line); }
.score-table td, .rules-table td { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.score-table th:not(:first-child), .score-table td:not(:first-child) { text-align: right; }
.score-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.score-table .dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--cat); }
.table-wrap { overflow-x: auto; }

.charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-card { padding: 20px 22px 18px; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.chart-card header > select { width: auto; min-width: 210px; max-width: 100%; }
.select-row { display: flex; gap: 14px; }
.select-wrap { min-width: 190px; grid-template-columns: auto 1fr; align-items: center; }
.chart-box { position: relative; width: 100%; height: 400px; }
.chart-box.tall { height: 440px; }
.chart-box > canvas { width: 100% !important; height: 100% !important; }
.chart-fallback { display: grid; place-items: center; height: 100%; font-size: .95rem; }

/* ---------------------------------------------------------------- method */
.method-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px 32px; align-items: start; }
.method-main { display: grid; gap: 22px; }
.how-steps { margin: 0; padding-left: 1.4em; font: 700 1.15rem var(--font-head); display: grid; gap: 6px; }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; padding: 4px 0 18px; border-bottom: 1px solid var(--rule); }
.formula code { font: 500 1.15rem var(--font-sans); }
.symbols { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 0; font-size: .95rem; }
.symbols div { display: flex; gap: 8px; }
.symbols dt { font-weight: 700; }
.symbols dd { margin: 0; }
.rules-table th, .rules-table td { padding-right: 16px; }
.rules-table code { font: .95rem var(--font-sans); }
.spec { margin: 0; }
.spec div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.spec div:last-child { border-bottom: 0; }
.spec dt { font-size: .95rem; }
.spec dd { margin: 0; font: 600 1rem var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------------------- footer / toast */
.footer { max-width: 1280px; margin: var(--gap) auto 0; padding: 24px clamp(16px, 4vw, 40px) 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: .95rem; border-top: var(--bw) solid var(--line); }
.footer p { margin: 0; }
.link-btn { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-brand { display: flex; align-items: center; gap: 10px; font: 700 1rem var(--font-head); }
.footer-brand img { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 16px); opacity: 0; padding: 12px 18px; border: var(--bw) solid var(--line-2); border-radius: var(--radius-sm); background: #0b111d; font-size: .95rem; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .top-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .crit-card { --row-h: 150px; grid-template-columns: minmax(0, 1fr) 4.2rem 34px; }
  .crit-card .slider { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 960px) {
  .hero { flex-direction: column; align-items: flex-start; min-height: 0; padding-top: 116px; }
  .hero-title { font-size: clamp(1.9rem, 5.4vw, 3rem); }
  .hero-sub { white-space: normal; }
  .target-layout, .earth-layout, .method-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-panel { height: auto; overflow: visible; }
  .charts-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .brand strong { display: none; }
  .step { padding: 0 9px; font-size: .85rem; }
  .step::after { left: 9px; right: 9px; }
  .step[data-step="how"] { display: none; }
  .mars-shell { min-height: 460px; }
  :root { --earth-h: 520px; --gap: 44px; }
  .coord-form { grid-template-columns: 1fr 1fr; }
  .coord-form .btn { grid-column: 1 / -1; }
  .legend { width: 170px; }
  .layer-picker { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rank-view { padding: 10px; }
  .rank-pager { margin-left: 0; }
  .viewer .cesium-viewer-bottom { max-width: calc(100% - 220px); }
  .layer-picker .chip { flex: none; }
  .progress { gap: 6px; }
  .progress button { font-size: .85rem; }
  .progress button:not([aria-current]) span { display: none; }
  .crit-card { --row-h: 168px; gap: 8px 16px; }
  .select-row { width: 100%; }
  .select-wrap { min-width: 0; flex: 1; }
  .chart-box, .chart-box.tall { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}