/* One visual language for every page, taken from the About us landing page:
   - content pages (Data Research, Theory, Guide): a picture banner of the team's NISAR radar image under the
     floating header, a large page title on its calm side, content on the same left/right lines as the landing page;
   - Map & Analysis: the same type, edges and entrance, on the working layout;
   - motion: every page enters once when it opens (title, lead, then the content, 60 ms apart); buttons, cards,
     tabs and links answer the pointer. Nothing fades in on scroll. All of it rests under reduced motion. */

/* ------------------------------------------------------------------ content pages: banner + title */
#page-research, #page-theory, #page-guide { position: relative; isolation: isolate; background: var(--bg); min-height: 100%; }
#page-research::before, #page-theory::before, #page-guide::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 440px; z-index: -1;
  background: linear-gradient(90deg, #040d1af5 0%, #040d1ad9 34%, #040d1a8c 62%, #040d1a40 100%), linear-gradient(0deg, #071426 0%, #07142600 55%),
    url("../assets/hero-nisar-hanoi.jpg") 70% 46% / cover no-repeat; }
#page-theory::before { background-position: 0 0, 0 0, 80% 62%; }
#page-guide::before { background-position: 0 0, 0 0, 60% 28%; }

.sectionPage { max-width: none; width: min(100% - 160px, 1280px); margin: 0 auto; padding: 168px 0 64px; }
.sectionPage > h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -.03em; font-weight: 800; color: #fff; margin: 0 0 18px; }
.sectionPage > h1 + p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: #f1f6fb; max-width: 720px; margin: 0 0 40px; }
.sectionPage h2 { font-size: 26px; letter-spacing: -.01em; color: var(--text); margin: 52px 0 14px; }
.sectionPage h3 { font-size: 16px; }
.sectionPage [id] { scroll-margin-top: 96px; }           /* deep links land below the floating header */

/* ------------------------------------------------------------------ entrance: once, when a page opens */
@media (prefers-reduced-motion: no-preference) {
  .page:not([hidden]) .sectionPage > * { animation: ab-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .page:not([hidden]) .sectionPage > :nth-child(2) { animation-delay: .06s; }
  .page:not([hidden]) .sectionPage > :nth-child(3) { animation-delay: .12s; }
  .page:not([hidden]) .sectionPage > :nth-child(4) { animation-delay: .18s; }
  .page:not([hidden]) .sectionPage > :nth-child(n+5) { animation-delay: .24s; }
  #page-research:not([hidden])::before, #page-theory:not([hidden])::before, #page-guide:not([hidden])::before { animation: un-banner 1.2s ease-out both; }
  .page:not([hidden]) .ab-body .ab-wrap > * { animation: ab-in .6s cubic-bezier(.2, .7, .2, 1) .2s both; }

  /* Map & Analysis: the tool settles into place (bar, map, panel, status), then stays still */
  #page-analysis:not([hidden]) > .workbar { animation: un-drop .45s cubic-bezier(.2, .7, .2, 1) both; }
  #page-analysis:not([hidden]) .stage { animation: un-rise .6s cubic-bezier(.2, .7, .2, 1) .06s both; }
  #page-analysis:not([hidden]) .rightpanel { animation: un-side .6s cubic-bezier(.2, .7, .2, 1) .14s both; }
  #page-analysis:not([hidden]) .statusbar > * { animation: ab-in .5s cubic-bezier(.2, .7, .2, 1) .22s both; }
  #page-analysis:not([hidden]) .statusbar > :nth-child(2) { animation-delay: .27s; }
  #page-analysis:not([hidden]) .statusbar > :nth-child(3) { animation-delay: .32s; }
  #page-analysis:not([hidden]) .statusbar > :nth-child(4) { animation-delay: .37s; }
  .topbar .brand, .topbar .navbtn { animation: un-drop .5s cubic-bezier(.2, .7, .2, 1) both; }
  .topbar .navbtn:nth-child(2) { animation-delay: .04s; } .topbar .navbtn:nth-child(3) { animation-delay: .08s; }
  .topbar .navbtn:nth-child(4) { animation-delay: .12s; } .topbar .navbtn:nth-child(5) { animation-delay: .16s; }
}
@keyframes un-banner { from { opacity: .3; } }
@keyframes un-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes un-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes un-side { from { opacity: 0; transform: translateX(16px); } }

/* ------------------------------------------------------------------ hover and press, everywhere */
.btn, .smallbtn, .wtab, .ex-chip, .ex-synth, .ptab, .seg button, .an-tool, .rp-cta, .ex-hotrow { transition: background-color .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; }
.btn:hover:not(:disabled), .smallbtn:hover, .ex-synth:hover, .rp-cta:hover { transform: translateY(-1px); }
.btn:active:not(:disabled), .smallbtn:active, .wtab:active, .ex-chip:active, .ex-synth:active, .seg button:active, .an-tool:active, .rp-cta:active { transform: translateY(1px); }
.featurecard, .rp-method, .card, .metric, .gp-steps > *, .gp-three > * { transition: transform .16s, border-color .16s, background-color .16s; }
.featurecard:hover, .rp-method:hover, .sectionPage .card:hover, .gp-three > *:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.sectionPage a, .ex-link, .pl-link { text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.sectionPage table.data tbody tr { transition: background-color .12s; }
.sectionPage table.data tbody tr:hover { background: var(--panel-2); }
@media (prefers-reduced-motion: reduce) { .btn, .smallbtn, .wtab, .ex-chip, .ex-synth, .featurecard, .rp-method, .card { transition: none; } }

/* ------------------------------------------------------------------ Map & Analysis: same type and edges */
#page-analysis { padding: 14px 32px 14px; }
.work-title { font-size: 20px; letter-spacing: -.01em; }
.workbar { border-radius: 10px; padding: 10px 14px; }

@media (max-width: 1023px) { .sectionPage { width: min(100% - 96px, 1280px); padding-top: 150px; } }
@media (max-width: 900px) { #page-analysis { padding: 10px 16px; } }
@media (max-width: 640px) {
  .sectionPage { width: calc(100% - 48px); padding-top: 132px; }
  #page-research::before, #page-theory::before, #page-guide::before { height: 360px; background-image: linear-gradient(180deg, #040d1ad9 0%, #040d1ab3 50%, #071426 100%), linear-gradient(#0000, #0000), url("../assets/hero-nisar-hanoi.jpg"); }
}

/* ------------------------------------------------------------------ Map & Analysis in the landing page's language
   A page title row like the other pages (no boxed bar), the radar picture faint behind it, squarer panels, the
   Synthesis action drawn like the landing page's "Open the map" button, and facts under the map set as plain
   label + value like the landing page's fact row. */
#page-analysis { position: relative; isolation: isolate; gap: 12px; padding: 18px 32px 16px; }
#page-analysis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #071426f2 0%, #071426d9 40%, #071426b3 100%), linear-gradient(0deg, #071426 0%, #07142600 70%),
    url("../assets/hero-nisar-hanoi.jpg") 70% 30% / cover no-repeat; }
#page-analysis > .workbar { border: 0; background: none; padding: 0 0 2px; border-radius: 0; }
.work-title { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; color: #fff; }
.ws-research .work-title { color: #fff; }
.stage, .rightpanel { border-radius: 8px; }
.rightpanel { background: #0d2036e6; }
.panel-title { letter-spacing: -.01em; }

/* control bar: labels on one line, controls on one line, the reason text under the phase buttons */
.ex-bar { align-items: flex-start; gap: 18px; padding: 12px 14px 12px; background: #0d2036; }
.ex-field-l { font-size: 12px; line-height: 16px; color: var(--text-2); }
.ex-field-phase { max-width: 100%; }
.ex-phases { width: fit-content; max-width: 100%; }
.ex-field-phase { flex: 0 1 auto; min-width: 0; }
.ex-phase-why { flex-basis: auto; margin: 4px 0 0; max-width: 380px; font-size: 12px; line-height: 1.35; color: var(--text-2); }
.ex-bar { flex-wrap: nowrap; }
@media (max-width: 1100px) { .ex-bar { flex-wrap: wrap; } }
.ex-synth { flex: none; }
/* the on-map legend stays small so the result is the subject */
.ex-legend { max-width: min(250px, calc(100% - 20px)); padding: 7px 9px; font-size: 11.5px; }
.ex-legend .legend-items { gap: 2px; }
.ex-synth { margin-top: 19px; min-height: 40px; border-radius: 0; padding: 0 22px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.ex-synth[aria-pressed="true"] { background: var(--accent); box-shadow: none; }
.ex-select, .ex-phases { border-radius: 4px; }

/* status row: plain facts, like the landing page */
.statusbar { gap: 24px; padding: 2px 2px 0; }
.metric { background: none; border: 0; border-radius: 0; padding: 0; }
.metric small { font-size: 12.5px; color: var(--text-2); margin-bottom: 2px; }
.metric strong { font-size: 17px; font-weight: 700; color: #fff; }
@media (max-width: 900px) { #page-analysis { padding: 12px 16px; } .ex-synth { margin-top: 0; } }

/* area analysis tables: the label column wraps, the value column never breaks inside a number
   (a nowrap label + flex header cell squeezed the values to one character per line) */
.ex-kv { table-layout: auto; }
.ex-kv th { white-space: normal; padding-right: 12px; }
.ex-kv td { white-space: normal; overflow-wrap: normal; word-break: normal; vertical-align: top; min-width: 96px; }
.ex-cls-table td { white-space: nowrap; }
.ex-cls-table th { display: table-cell; }
.ex-cls-table th .swatch { vertical-align: -1px; margin-right: 4px; }
.ex-cls-table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ compare slider: the A / B labels sit right beside
   the divider, one on each side, and travel with it (--cmp = divider position, set by the view) */
.cmp-left { left: auto; right: calc(100% - var(--cmp, 50%) + 16px); max-width: min(300px, calc(var(--cmp, 50%) - 32px)); }
.cmp-right { right: auto; left: calc(var(--cmp, 50%) + 16px); max-width: min(300px, calc(100% - var(--cmp, 50%) - 32px)); }
.cmp-label { z-index: 700; border-radius: 4px; background: #0d2036f2; font-weight: 600; }

/* research map: the area tools stack in one column on the left, so they never cover the epoch labels */
#view-results .an-tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: max-content; max-width: 190px; top: 12px; left: 12px; }
#view-results .an-tool { justify-content: flex-start; }
#view-results .cmp-label { top: 12px; }
#view-results .cmp-left { max-width: min(300px, calc(var(--cmp, 50%) - 232px)); }
@media (max-width: 640px) {
  #view-results .an-tools { max-width: 52px; } #view-results .an-tool > span:last-child { display: none; }
  #view-results .cmp-left { max-width: min(300px, calc(var(--cmp, 50%) - 92px)); }
}
/* research workspace: the tab strip needs the room, so its title is smaller */
.ws-research .work-title { font-size: 22px; }

/* header badges: hidden while real processed data are shown; the DEMO / synthetic-sample badge (.pill-sim) stays */
.topmeta:has(#modeBadge:not(.pill-sim)) { display: none; }