/* Shared visual foundation. Load after page styles and compact-ui.css.
   Keep application-specific layout and data visualisation rules in their pages. */
:root {
  --ipi-navy: #082c3d;
  --ipi-green: #087654;
  --ipi-green-hover: #065d42;
  --ipi-mint: #e9f5ef;
  --ipi-ink: #173746;
  --ipi-muted: #536976;
  --ipi-line: #d9e3e8;
  --ipi-background: #f1f5f7;
  --ipi-radius: 12px;
  --ipi-shadow: 0 3px 12px rgb(8 44 61 / 5%);
  --ipi-header-height: 64px;
}
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body[data-ipi-app] {
  --navy: var(--ipi-navy);
  --blue: var(--ipi-green);
  --blue-dark: var(--ipi-green-hover);
  --green: var(--ipi-green);
  --green-dark: var(--ipi-green-hover);
  --line: var(--ipi-line);
  --muted: var(--ipi-muted);
  --ink: var(--ipi-ink);
  --text: var(--ipi-ink);
  color: var(--ipi-ink);
  background: var(--ipi-background);
  font-size: 13px;
  line-height: 1.5;
}
.ipi-header {
  position: sticky;
  top: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: var(--ipi-header-height);
  margin: 0;
  padding: 0 24px;
  background: var(--ipi-navy);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  color: white;
  box-sizing: border-box;
}
.ipi-header .ipi-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  min-height: 40px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.ipi-brand-accent { color: #61dfb1; }
.ipi-brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--ipi-green);
  border-radius: 8px;
  color: white;
}
.ipi-header .ipi-primary-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ipi-header .ipi-primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #dce9ef;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}
.ipi-header .ipi-primary-nav a:hover { color: white; background: rgb(255 255 255 / 8%); }
.ipi-header .ipi-primary-nav a[aria-current="page"] { background: var(--ipi-green); color: white; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #b56c00;
  outline-offset: 3px;
}
.ipi-header :focus-visible { outline-color: #ffd17a; }
.ipi-skip {
  position: fixed;
  top: 8px;
  left: 12px;
  transform: translateY(-160%);
  z-index: 3000;
  padding: 10px 16px;
  background: white;
  color: var(--ipi-navy);
  border: 2px solid var(--ipi-green);
  border-radius: 8px;
}
.ipi-skip:focus { transform: translateY(0); }
main[id], section[id], article[id] { scroll-margin-top: calc(var(--ipi-header-height) + 20px); }
body[data-ipi-app] h1 { font-size: clamp(26px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -.035em; color: var(--ipi-navy); }
body[data-ipi-app] h2 { font-size: 17px; line-height: 1.35; }
body[data-ipi-app] h3 { font-size: 14px; line-height: 1.4; }
body[data-ipi-app] :is(.panel, .map-card, .admin-card, .metric, .metrics > article) {
  border-color: var(--ipi-line);
  border-radius: var(--ipi-radius);
  box-shadow: var(--ipi-shadow);
}
body[data-ipi-app] :is(.subtitle, .hint, .page-header p, .page-head p, .lede) { font-size: 13px; line-height: 1.55; }
body[data-ipi-app] :is(label, .filterBox label, .market-select, .filters label, .marketPicker span) {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
body[data-ipi-app] :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-family: inherit; }
body[data-ipi-app] :is(button:not(.sort-button):not(.routingKeyButton), select) { min-height: 36px; }
body[data-ipi-app] :is(.admin-nav a, .page-header nav a, .admin-session a) { font-size: 12px; min-height: 36px; display: inline-flex; align-items: center; }
body[data-ipi-app] table { font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; }
body[data-ipi-app] table th,
body[data-ipi-app] table .sort-header,
body[data-ipi-app] table .sort-button { font-size: 10px; line-height: 1.25; }
body[data-ipi-app] :is(.data-grid, .grid-table, .results-grid) { font-size: 11px; line-height: 1.3; }
body[data-ipi-app] :is(.metric strong, .metrics strong, .summary strong) { font-variant-numeric: tabular-nums; }
body[data-ipi-app] :is(.metric small, .metrics span, .metric em, .summary span, .cso-metrics span) { font-size: 12px; }
body[data-ipi-app] :is(.metric strong, .metrics strong) { font-size: 27px; }
body[data-ipi-app] .cso-metrics strong { font-size: 23px; }
body[data-ipi-app] .panel { padding: 20px; }
body.ipi-summary > main { margin-left: 0; max-width: 1440px; margin-right: auto; margin-left: auto; padding: 24px; }
body.ipi-trends .shell { max-width: 1600px; min-height: calc(100vh - var(--ipi-header-height)); }
body.ipi-trends .shell > aside { min-height: calc(100vh - var(--ipi-header-height)); }
body.ipi-trends .metric em.unavailable { color: var(--ipi-muted); font-weight: 400; }
body.ipi-trends .metric-icon { color: var(--ipi-green); background: var(--ipi-mint); }
body.ipi-trends .brand span span { color: var(--ipi-green); }
body.ipi-trends .panel-head h2 { font-size: 17px; }
/* Size the column as well as the select so the selected label stays readable. */
body.ipi-trends .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  border-radius: var(--ipi-radius);
  box-shadow: var(--ipi-shadow);
}
body.ipi-trends .filters label { flex: 0 1 180px; }
body.ipi-trends .filters label:last-child { flex-basis: 220px; }
body.ipi-trends .filters select { width: 100%; }
body.ipi-trends .metric-icon { flex: 0 0 32px; }
body.ipi-trends .metric > div:last-child { min-width: 0; }
body.ipi-trends .metric small {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}
body.ipi-trends .panel-head { flex-wrap: wrap; align-items: baseline; }
body.ipi-trends .panel-head > span { flex-shrink: 0; }
body.ipi-trends .data-state { flex-wrap: wrap; }
body.ipi-trends .status { flex: 1 1 240px; }
body:is(.ipi-summary, .ipi-trends) tbody tr:hover,
body:is(.ipi-summary, .ipi-trends) tbody tr:focus-within { background: #f0f7f4; }
body:is(.ipi-summary, .ipi-trends) th { font-weight: 600; }
body.ipi-summary .method summary,
body.ipi-summary .cso-notes summary { padding-block: 6px; }
body.ipi-summary .method summary::marker,
body.ipi-summary .cso-notes summary::marker { color: var(--ipi-green); }
body.ipi-location .intro { align-items: center; gap: 24px; }
body.ipi-location main { padding-top: 28px; }
body.ipi-location .intro > div:first-child { max-width: 720px; }
body.ipi-map #app { background: var(--ipi-background); min-height: calc(100vh - var(--ipi-header-height)); }
body.ipi-map .routingSidebar { top: var(--ipi-header-height); background: var(--ipi-navy); box-shadow: none; }
body.ipi-map .routingHome { display: none; }
body.ipi-map .routingSidebarTitle { font-size: 18px; }
body.ipi-map .routingKeyButton :is(strong, span) { font-size: 12px; }
body.ipi-map .routingKeyButton.active { background: var(--ipi-green); }
body.ipi-map .marketHeading .small { font-size: 12px; }
.ipi-map-fallback { color: var(--ipi-green); font-weight: 600; }
.ipi-map-fallback:not([hidden]) { display: inline-block; margin: 8px 0 16px; }
.ipi-map-fallback[hidden] { display: none; }
body.ipi-map .notice { max-width: 320px; overflow-wrap: anywhere; }
body.ipi-admin .hero-card h1 { color: white; }
body.ipi-admin .page-header { flex-wrap: wrap; }
body.ipi-admin .review-actions { padding: 12px 0; border-top: 1px solid var(--ipi-line); }
body.ipi-admin .admin-card p { font-size: 13px; }
body.ipi-admin .admin-card strong { font-size: 12px; }
.ipi-illustration { padding: 4px 8px; border-radius: 6px; background: #edf3f6; color: #536976; font-size: 12px; }
@media (max-width: 1000px) {
  :root { --ipi-header-height: 112px; }
  .ipi-header { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 16px; height: 112px; }
  .ipi-header .ipi-brand { min-height: 44px; }
  .ipi-header .ipi-primary-nav { overflow-x: auto; padding: 4px 0 8px; flex-shrink: 0; }
  .ipi-header .ipi-primary-nav a { flex-shrink: 0; }
  .ipi-header .ipi-primary-nav { scroll-padding-inline: 8px; }
}
@media (max-width: 800px) {
  body[data-ipi-app] :is(.panel, .map-heading) { padding: 16px; }
  body.ipi-summary > main { padding: 18px 14px; }
  body.ipi-map #app { padding-top: 72px; }
  body.ipi-map .routingSidebar { height: 72px; }
  body.ipi-location .intro { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .ipi-header .ipi-primary-nav a { min-height: 44px; padding: 8px 10px; }
  body[data-ipi-app] :is(button:not(.sort-button), select) { min-height: 44px; }
  body.ipi-map .routingKeyButton { min-height: 44px; }
  body.ipi-trends .filters label,
  body.ipi-trends .filters label:last-child { flex: 1 1 180px; }
  body.ipi-trends .pulse { flex-wrap: wrap; }
  body.ipi-trends .signals { width: 100%; }
  body.ipi-summary .filters { gap: 12px; }
  body.ipi-summary .filters label { max-width: 100%; }
  body[data-ipi-app] :is(.metric strong, .metrics strong) { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body *, body *::before, body *::after { scroll-behavior: auto !important; transition: none !important; }
}