:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #65738a;
  --faint: #65738a;
  --panel: rgba(255, 255, 255, .92);
  --panel-strong: #ffffff;
  --line: #e6ebf2;
  --line-strong: #d8e0eb;
  --blue: #3b78ef;
  --blue-strong: #245fcf;
  --blue-pale: #edf4ff;
  --coral: #e85f7f;
  --aqua: #17a792;
  --violet: #7c6ee8;
  --background: #f6f8fc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html { background: var(--background); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% -10%, rgba(124, 110, 232, .11), transparent 32rem),
    radial-gradient(circle at 20% 72%, rgba(23, 167, 146, .08), transparent 27rem),
    var(--background);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image: radial-gradient(rgba(80, 103, 142, .08) .6px, transparent .6px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
}

button, input, select, textarea { font: inherit; }
button {
  color: #fff;
  border: 1px solid var(--blue-strong);
  border-radius: .7rem;
  padding: .72rem 1.05rem;
  font-weight: 720;
  background: linear-gradient(180deg, #2f6fe9, var(--blue-strong));
  box-shadow: 0 .4rem 1rem rgba(59, 120, 239, .18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 .55rem 1.25rem rgba(59, 120, 239, .22); }
button:active { transform: translateY(0); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(59, 120, 239, .22);
  outline-offset: 2px;
}
button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .5; transform: none; }
button.secondary {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 2px rgba(23, 32, 51, .05);
}
button.danger-button {
  color: #a62f4d;
  border-color: #efbfd0;
  background: #fff7f9;
  box-shadow: 0 1px 2px rgba(166, 47, 77, .06);
}
button.danger-button:hover { background: #ffedf2; box-shadow: 0 .45rem 1rem rgba(166, 47, 77, .12); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.sidebar {
  min-width: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.45rem 1rem 1.1rem;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .86);
  box-shadow: 8px 0 24px rgba(37, 54, 80, .025);
  backdrop-filter: blur(22px) saturate(150%);
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.brand { display: block; padding: .3rem .7rem 1.35rem; }
.brand::after {
  content: "";
  display: block;
  width: 3.9rem;
  height: 3px;
  margin-top: .7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6288, #7c6ee8, #6ca8ff, #62e2cd);
}
.brand strong, .brand small { display: block; }
.brand strong { color: #31425c; font-size: .77rem; font-weight: 760; letter-spacing: .16em; }
.brand small { margin-top: .28rem; color: var(--muted); font: italic .69rem/1.25 Georgia, "Times New Roman", serif; letter-spacing: .025em; }
#view-nav { display: grid; gap: .2rem; overflow: auto; padding-right: .2rem; }
.nav-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  color: #68768b;
  background: transparent;
  border: 0;
  border-radius: .72rem;
  padding: .64rem .8rem .64rem .9rem;
  box-shadow: none;
  font-size: .82rem;
  font-weight: 640;
  text-align: left;
}
.nav-button:hover, .nav-button[aria-current="page"] { color: #2457ad; background: #edf4ff; box-shadow: none; transform: none; }
.nav-button[aria-current="page"] { font-weight: 740; }
.nav-button::before {
  content: "";
  width: 3px;
  height: 1.15rem;
  margin-right: .7rem;
  border-radius: 999px;
  background: transparent;
  transition: background .2s;
}
.nav-button[aria-current="page"]::before { background: var(--blue); }
.sidebar footer {
  margin-top: auto;
  padding: .85rem;
  color: var(--muted);
  border: 1px solid #d9eee9;
  border-radius: .85rem;
  background: #f1faf8;
  font-size: .68rem;
  line-height: 1.5;
}
.sidebar footer p { margin-bottom: 0; }
.privacy-mark { color: #137c6d; font-weight: 820; text-transform: uppercase; letter-spacing: .09em; }

main { position: relative; min-width: 0; padding: clamp(1.35rem, 3vw, 3rem); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
.topbar-actions { display: flex; align-items: end; gap: .58rem; }
.window-control { min-width: 8.5rem; }
.window-control span { padding-left: .1rem; }
.window-control select { min-height: 2.7rem; background-color: rgba(255, 255, 255, .92); }
.traffic-control { min-width: 10.8rem; }
.traffic-toggle { min-height: 2.7rem; display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; color: var(--ink); border: 1px solid #8995a7; border-radius: .68rem; background: rgba(255, 255, 255, .94); white-space: nowrap; }
.traffic-toggle input { width: 1rem; min-height: 1rem; margin: 0; accent-color: var(--blue); }
.icon-button { width: 2.78rem; height: 2.7rem; padding: 0; font-size: 1.18rem; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: .32rem;
  color: #172033;
  font-size: clamp(2.15rem, 4vw, 3.4rem);
  font-weight: 720;
  letter-spacing: -.045em;
}
h2 { margin-bottom: .35rem; font-weight: 680; letter-spacing: -.02em; }
.eyebrow { margin-bottom: .5rem; color: var(--blue); font-size: .66rem; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
#view-subtitle, .analyst p { color: var(--muted); }
#view-subtitle { margin-bottom: 0; }

.connection-panel {
  display: none;
  margin: 1.3rem 0;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--panel-strong);
  box-shadow: 0 1.2rem 3.5rem rgba(57, 78, 112, .12);
}
.connection-panel.is-open { display: block; animation: reveal .22s ease both; }
.connection-panel form { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(12rem, 1fr) auto; align-items: end; gap: .8rem; }
label { display: grid; gap: .42rem; color: var(--muted); font-size: .69rem; font-weight: 620; }
input, select, textarea {
  width: 100%;
  min-height: 2.7rem;
  padding: .68rem .78rem;
  color: var(--ink);
  border: 1px solid #8995a7;
  border-radius: .68rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 1px 1px rgba(34, 52, 78, .03);
}
.connection-panel p { margin: .72rem 0 0; color: var(--muted); font-size: .69rem; }
.status {
  margin: 1.4rem 0;
  padding: .72rem .9rem;
  border: 1px solid #dde5f1;
  border-radius: .78rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 1px 2px rgba(37, 54, 80, .03);
  font-size: .74rem;
}
.status::before { content: ""; display: inline-block; width: .42rem; aspect-ratio: 1; margin-right: .5rem; border-radius: 50%; background: var(--faint); }
.status.is-ready { color: #127566; border-color: #cceae4; background: #f4fbf9; }
.status.is-ready::before { background: var(--aqua); box-shadow: 0 0 0 4px rgba(23, 167, 146, .1); }
.status.is-error { color: #b84260; border-color: #f3cfda; background: #fff7f9; }
.status.is-error::before { background: var(--coral); }

.reset-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.6rem 5rem rgba(23, 32, 51, .24);
}
.reset-dialog::backdrop { background: rgba(23, 32, 51, .42); backdrop-filter: blur(3px); }
.reset-dialog form { padding: 1.35rem; }
.reset-dialog h2 { margin-bottom: .55rem; }
.reset-dialog p:not(.eyebrow) { color: var(--muted); font-size: .8rem; line-height: 1.6; }
.reset-dialog label { margin-top: 1.1rem; }
.reset-dialog label strong { color: #a62f4d; letter-spacing: .04em; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

.audience-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.audience-intro p { max-width: 54rem; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.audience-intro .eyebrow { margin-bottom: .28rem; }
.privacy-pill { flex: none; padding: .48rem .72rem; color: #147969; border: 1px solid #cce9e3; border-radius: 999px; background: #f1faf8; font-size: .65rem; font-weight: 760; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .82rem; }
.metric-card, .panel, .analyst {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(31, 47, 71, .04), 0 .7rem 2.2rem rgba(54, 72, 103, .055);
}
.metric-card {
  position: relative;
  min-height: 128px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.metric-card-action {
  width: 100%;
  padding-bottom: 1.8rem;
  color: inherit;
  border-color: var(--line);
  border-radius: 1rem;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(31, 47, 71, .04), 0 .7rem 2.2rem rgba(54, 72, 103, .055);
  text-align: left;
}
.metric-card-action:hover { border-color: #b9cbed; background: #fbfdff; box-shadow: 0 1rem 2.5rem rgba(54, 72, 103, .11); transform: translateY(-2px); }
.metric-card-action.is-charted { border-color: rgba(59, 120, 239, .5); background: linear-gradient(145deg, #fff, #f2f7ff); box-shadow: 0 0 0 2px rgba(59, 120, 239, .1), 0 1rem 2.7rem rgba(59, 120, 239, .12); }
.metric-card-action.is-charted::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 92% 90%, rgba(59, 120, 239, .11), transparent 38%); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), #6ca8ff); }
.metric-card:nth-child(4n + 2)::before { background: linear-gradient(90deg, var(--aqua), #62e2cd); }
.metric-card:nth-child(4n + 3)::before { background: linear-gradient(90deg, var(--violet), #a99cf5); }
.metric-card:nth-child(4n + 4)::before { background: linear-gradient(90deg, var(--coral), #ff8fab); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .71rem; font-weight: 610; }
.metric-card > strong { color: #19243a; font-size: 2rem; font-weight: 690; letter-spacing: -.045em; }
.metric-card small { color: #587091; font-size: .67rem; }
.metric-chart-cue { position: absolute; z-index: 1; right: .85rem; bottom: .72rem; color: #3569bd; font-size: .57rem; font-weight: 760; letter-spacing: .02em; opacity: .66; }
.metric-card-action:hover .metric-chart-cue, .metric-card-action.is-charted .metric-chart-cue { opacity: 1; }
.metric-change { flex: none; padding: .18rem .4rem; border-radius: 999px; font-size: .58rem; font-weight: 820; }
.metric-change.is-up, .metric-change.is-new { color: #137a6b; background: #e9f7f4; }
.metric-change.is-down { color: #b84260; background: #fceef2; }
.metric-change.is-flat { color: var(--muted); background: #f0f3f8; }
.view-grid { min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .9rem; margin-top: .9rem; }
.panel { min-width: 0; grid-column: span 6; padding: 1.05rem; overflow: hidden; }
.panel.is-wide { grid-column: 1 / -1; }
.panel > h2 { color: #263651; font-size: 1rem; }
.chart-panel { padding: 0; }
.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.15rem .45rem; }
.chart-heading > div:first-child { display: grid; gap: .18rem; }
.chart-kicker { color: var(--muted); font-size: .62rem; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.chart-heading strong { color: #253550; font-size: 1.15rem; font-weight: 700; }
.chart-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .22rem; padding: .22rem; border: 1px solid var(--line); border-radius: 1rem; background: #f5f7fb; }
.chart-metric { display: flex; align-items: center; gap: .4rem; padding: .42rem .62rem; color: var(--muted); border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: .65rem; }
.chart-key { width: .42rem; aspect-ratio: 1; border-radius: 50%; background: var(--series); }
.is-visitors { --series: #3b78ef; }
.is-browsers { --series: #d07135; }
.is-world-views { --series: #17a792; }
.is-activations { --series: #7c6ee8; }
.is-activation-events { --series: #d3587a; }
.is-world-opens { --series: #2785b8; }
.is-average-time { --series: #087f85; }
.is-median-time { --series: #5968cf; }
.is-p90-time { --series: #9c5db7; }
.chart-metric:hover, .chart-metric.is-active { color: #31425e; background: #fff; box-shadow: 0 1px 3px rgba(36, 53, 80, .1); transform: none; }
.trend-chart { width: 100%; padding: 0 .7rem; overflow: hidden; }
.trend-chart svg { display: block; width: 100%; height: auto; min-height: 250px; }
.chart-grid { stroke: #e8edf4; stroke-width: 1; }
.chart-axis { fill: #65738a; font: 10px Inter, sans-serif; }
.chart-line { fill: none; stroke: var(--series); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--series); stroke: #fff; stroke-width: 1.5; }
.comparison-note { margin: 0; padding: 0 1.15rem 1rem; color: var(--faint); font-size: .66rem; }
.activation-definition { margin: .75rem 0 0; padding: .72rem .9rem; color: #53667f; border: 1px solid #dbe6f4; border-radius: .75rem; background: rgba(247, 250, 255, .82); font-size: .69rem; line-height: 1.55; }
.activation-definition strong { color: #314b6c; }
.audience-split { display: grid; grid-template-columns: minmax(120px, 1fr) 1fr; align-items: center; gap: 1rem; min-height: 210px; }
.donut { position: relative; display: grid; place-items: center; width: min(145px, 100%); aspect-ratio: 1; margin: auto; filter: drop-shadow(0 1rem 1.2rem rgba(23, 167, 146, .1)); }
.donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 14; }
.donut-returning { stroke: rgba(124, 110, 232, .72); }
.donut-new { stroke: var(--aqua); }
.donut > div { position: absolute; display: grid; text-align: center; }
.donut strong { color: #263651; font-size: 1.25rem; font-weight: 710; }
.donut span { color: var(--muted); font-size: .64rem; }
.audience-split dl { display: grid; gap: .65rem; margin: 0; }
.audience-split dl div { padding-left: .7rem; border-left: 2px solid var(--aqua); }
.audience-split dl div:last-child { border-color: var(--violet); }
.audience-split dt { color: var(--muted); font-size: .67rem; }
.audience-split dd { margin: .12rem 0 0; color: #263651; font-size: 1.08rem; font-weight: 690; }
.ranked-list { display: grid; gap: .25rem; }
.ranked-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .65rem; padding: .72rem 0 .82rem; border-bottom: 1px solid var(--line); }
.ranked-row:last-child { border-bottom: 0; }
.ranked-row > div:first-child { display: grid; gap: .2rem; }
.ranked-row strong { color: #2d3d58; font-size: .77rem; font-weight: 690; }
.ranked-row span { color: var(--muted); font-size: .64rem; }
.ranked-value { color: var(--blue); font-size: .71rem; font-weight: 710; }
.ranked-bar { appearance: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border: 0; background: transparent; }
.ranked-bar::-webkit-progress-bar { background: transparent; }
.ranked-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--aqua), rgba(23, 167, 146, .08)); }
.ranked-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--aqua), rgba(23, 167, 146, .08)); }
.share-flow { display: grid; gap: .82rem; min-height: 235px; align-content: center; }
.share-flow-step { display: grid; gap: .4rem; }
.share-flow-step > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.share-flow-step span { color: var(--muted); font-size: .7rem; }
.share-flow-step strong { color: #324564; font-size: 1.02rem; font-weight: 700; }
.share-flow-track { appearance: none; display: block; width: 100%; height: .45rem; overflow: hidden; border: 0; border-radius: 999px; background: #edf1f6; }
.share-flow-track::-webkit-progress-bar { border-radius: 999px; background: #edf1f6; }
.share-flow-track::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--violet), var(--coral)); }
.share-flow-track::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--violet), var(--coral)); }
.measurement-note { margin: .35rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.65; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .74rem; }
th, td { padding: .68rem .55rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th.is-left, td.is-left { text-align: left; }
th { color: #65738a; font-size: .61rem; font-weight: 760; text-transform: uppercase; letter-spacing: .07em; }
tbody tr:hover { background: #f7f9fd; }
.bar { display: flex; align-items: center; gap: .6rem; }
.bar::before { content: ""; width: var(--bar, 0%); min-width: 2px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--coral), var(--violet)); }
.empty { min-height: 180px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.welcome { min-height: min(57vh, 520px); display: grid; place-content: center; justify-items: center; padding: 3rem 1.5rem; text-align: center; border: 1px solid var(--line); border-radius: 1.2rem; background: radial-gradient(circle at 50% 40%, rgba(108, 168, 255, .13), transparent 36%), rgba(255, 255, 255, .78); box-shadow: 0 1rem 3rem rgba(48, 69, 103, .06); overflow: hidden; }
.welcome h2 { max-width: 17ch; margin-bottom: .7rem; color: #1d2d48; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.045em; }
.welcome p:not(.eyebrow) { max-width: 35rem; color: var(--muted); line-height: 1.6; }
.welcome-orbit { position: relative; width: 5rem; aspect-ratio: 1; margin-bottom: 1.2rem; border: 1px solid rgba(59, 120, 239, .28); border-radius: 50%; box-shadow: inset 0 0 2rem rgba(23, 167, 146, .09), 0 1rem 2rem rgba(59, 120, 239, .08); }
.welcome-orbit::before { content: ""; display: block; width: .48rem; aspect-ratio: 1; margin: .36rem auto 0; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(232, 95, 127, .12); }

.geography-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid #d7e7f8; border-radius: .9rem; background: linear-gradient(135deg, #f4f8ff, #f3fbf9); }
.geography-intro p { max-width: 780px; margin: .35rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.geography-intro .history-source { margin-top: .55rem; color: #53667f; }
.geography-intro .history-source a { color: #2268c7; font-weight: 720; text-underline-offset: .16em; }
.geography-grid { align-items: start; }
.activity-map { min-width: 0; max-width: 100%; display: grid; gap: .72rem; }
.activity-map-meta { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.activity-map-meta > div:first-child { display: grid; gap: .12rem; }
.activity-map-meta > div:first-child span { color: var(--blue); font-size: .6rem; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
.activity-map-meta > div:first-child strong { color: #253a58; font-size: .95rem; }
.activity-map-key { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem .48rem; color: #576981; font-size: .64rem; }
.activity-map-key > span { width: .5rem; height: .5rem; border-radius: 50%; box-shadow: 0 0 0 3px rgba(79, 143, 247, .1); }
.activity-map-key > span.is-city { background: #f69a86; box-shadow: 0 0 0 3px rgba(240, 111, 145, .12); }
.activity-map-key > span.is-region { margin-left: .3rem; background: #c7a2ff; box-shadow: 0 0 0 3px rgba(157, 119, 234, .1); }
.activity-map-key > span.is-country { margin-left: .3rem; background: #65d8d3; }
.activity-map-key small { margin-left: .35rem; color: var(--muted); font-size: .61rem; }
.activity-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.activity-map-toolbar > div:first-child { display: grid; gap: .1rem; }
.activity-map-detail { color: #314b6c; font-size: .7rem; font-weight: 790; }
.activity-map-toolbar small { color: var(--muted); font-size: .6rem; }
.activity-map-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
.activity-map-mode { display: flex; align-items: center; gap: .15rem; padding: .2rem; border: 1px solid #cbdceb; border-radius: 999px; background: #f7fbff; }
.activity-map-mode button { min-width: 3.15rem; min-height: 1.85rem; padding: .25rem .55rem; border: 0; border-radius: 999px; color: #668096; background: transparent; box-shadow: none; font-size: .61rem; }
.activity-map-mode button[aria-pressed="true"] { color: #082b39; background: linear-gradient(135deg, #b9fff4, #75e2ee); box-shadow: 0 0 .9rem rgba(89, 217, 219, .25); }
.activity-map-effects-button { min-height: 2.25rem; padding: .35rem .72rem; color: #315371; border-color: #cbdceb; background: #f7fbff; box-shadow: none; font-size: .62rem; }
.activity-map-controls { display: flex; align-items: center; gap: .3rem; }
.activity-map-controls button { min-width: 2.25rem; min-height: 2.25rem; padding: .35rem .62rem; color: #315371; border-color: #cbdceb; background: #f7fbff; box-shadow: none; }
.activity-map-controls button:last-child { min-width: 3.9rem; font-size: .65rem; }
.activity-map-frame { position: relative; overflow: hidden; border: 1px solid #173d5c; border-radius: 1rem; background: radial-gradient(circle at 21% 12%, #12304d, transparent 34%), radial-gradient(circle at 88% 84%, rgba(105, 68, 174, .18), transparent 34%), #061522; box-shadow: inset 0 0 5rem rgba(54, 145, 175, .12), 0 1.1rem 2.7rem rgba(17, 42, 71, .13); }
.activity-map-frame > svg { display: block; width: 100%; min-height: 390px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; outline: none; }
.activity-map-frame > svg.is-dragging { cursor: grabbing; }
.activity-map-frame > svg:focus-visible { box-shadow: inset 0 0 0 3px #8dc8ff; }
.activity-map-sphere { fill: url(#map-ocean); stroke: rgba(190, 231, 241, .38); stroke-width: .8; filter: url(#globe-depth); }
.activity-map-shadow { fill: rgba(0, 0, 0, .56); filter: blur(18px); pointer-events: none; }
.activity-map-graticule { fill: none; stroke: rgba(135, 197, 214, .13); stroke-width: 1; }
.activity-map-axis { fill: none; stroke: rgba(124, 239, 228, .27); stroke-width: 1.1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.activity-map-country { fill: url(#map-land); stroke: rgba(176, 219, 215, .3); stroke-width: .55; transition: fill .25s ease; }
.activity-map-coast { fill: none; stroke: rgba(206, 237, 230, .34); stroke-width: .5; pointer-events: none; }
.activity-map-limb { fill: url(#map-limb); pointer-events: none; }
.activity-map-night { fill: rgba(1, 5, 13, .67); stroke: rgba(126, 168, 197, .18); stroke-width: .8; pointer-events: none; transition: opacity .3s ease; }
.activity-map-sun { pointer-events: none; mix-blend-mode: screen; }
.activity-map-sun-bloom { fill: url(#map-sun-bloom); filter: url(#activity-glow); }
.activity-map-sun-core { fill: #fff8cf; filter: url(#activity-glow); }
.activity-map-atmosphere { fill: none; stroke: url(#map-atmosphere); stroke-width: 1.8; filter: url(#atmosphere-glow); pointer-events: none; transition: opacity .3s ease; }
.activity-map-cell-layer path { fill: rgba(118, 237, 224, .08); stroke: rgba(137, 255, 238, .75); stroke-width: 1.15; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.activity-light .activity-pulse,
.activity-light .activity-halo,
.activity-light .activity-dot,
.activity-light .activity-core { filter: url(#activity-glow); }
.activity-light.is-night-side .activity-dot { filter: url(#activity-glow) brightness(1.2); }
.activity-light.is-night-side .activity-halo { opacity: .92; }
.activity-light.is-day-side { opacity: .72; }
.activity-light.is-city .activity-dot { fill: url(#city-light); stroke: #fff3d0; stroke-width: 1.5; }
.activity-light.is-city .activity-halo { fill: #f58b97; }
.activity-light.is-city .activity-pulse { stroke: #ffc276; }
.activity-light.is-region .activity-dot { fill: url(#region-light); stroke: #f4eaff; stroke-width: 1.5; }
.activity-light.is-region .activity-halo { fill: #b989ee; }
.activity-light.is-region .activity-pulse { stroke: #d8b5ff; }
.activity-light.is-country .activity-dot { fill: url(#country-light); stroke: #dcffff; stroke-width: 1.5; }
.activity-light.is-country .activity-halo { fill: #5ae2d9; }
.activity-light.is-country .activity-pulse { stroke: #69dfe3; }
.activity-core { fill: #fff; }
.activity-pulse { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: activity-pulse 3.2s ease-out infinite; }
.activity-pulse.pulse-1 { animation-delay: .8s; }
.activity-pulse.pulse-2 { animation-delay: 1.6s; }
.activity-map[data-day-night="false"] .activity-map-night { opacity: 0; }
.activity-map[data-atmosphere="false"] .activity-map-atmosphere { opacity: 0; }
.activity-map[data-geometry="false"] .activity-map-graticule,
.activity-map[data-geometry="false"] .activity-map-axis,
.activity-map[data-geometry="false"] .activity-map-cell-layer { display: none; }
.activity-map[data-map-mode="atlas"] .activity-map-shadow,
.activity-map[data-map-mode="atlas"] .activity-map-atmosphere,
.activity-map[data-map-mode="atlas"] .activity-map-limb { opacity: 0; }
.activity-map[data-map-mode="atlas"] .activity-map-sphere { filter: none; }
.activity-map-label { filter: none; }
.activity-map-label-layer { pointer-events: none; }
.activity-map-label path { fill: none; stroke: rgba(198, 235, 235, .7); stroke-width: 1.2; }
.activity-map-label rect { fill: rgba(7, 25, 45, .92); stroke: rgba(151, 213, 208, .54); stroke-width: 1; }
.activity-map-label text { fill: #f4fbff; font-size: 12px; font-weight: 760; }
.activity-map-label text.activity-map-label-detail { fill: #a6ccd6; font-size: 10px; font-weight: 650; }
.activity-map-empty rect { fill: rgba(7, 25, 45, .88); stroke: rgba(151, 213, 208, .36); }
.activity-map-empty text { fill: #b8d7de; font-size: 14px; font-weight: 680; }
.activity-map-locations { display: flex; flex-wrap: wrap; gap: .45rem .85rem; }
.activity-map-locations > span { display: grid; grid-template-columns: auto auto; align-items: center; gap: .12rem .42rem; color: var(--muted); font-size: .63rem; }
.activity-map-locations i { grid-row: 1 / 3; width: .55rem; height: .55rem; border-radius: 50%; background: #65d8d3; box-shadow: 0 0 0 3px rgba(79, 143, 247, .09); }
.activity-map-locations i.is-city { background: #f69a86; box-shadow: 0 0 0 3px rgba(240, 111, 145, .1); }
.activity-map-locations i.is-region { background: #bd91ed; box-shadow: 0 0 0 3px rgba(157, 119, 234, .1); }
.activity-map .is-map-hidden { display: none; }
.activity-map-settings { position: absolute; z-index: 6; top: .8rem; right: .8rem; width: 12.7rem; padding: .75rem .82rem; color: #acc4d1; border: 1px solid rgba(169, 221, 255, .2); border-radius: .85rem; background: rgba(5, 16, 27, .88); box-shadow: 0 .9rem 2.7rem rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.activity-map-settings[hidden] { display: none; }
.activity-map-settings > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.activity-map-settings strong { color: #ecfaff; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.activity-map-settings > div span { color: #7895a7; font-size: .54rem; }
.activity-map-settings label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.65rem; font-size: .61rem; }
.activity-map-settings input { width: 1.75rem; height: 1rem; margin: 0; accent-color: #67e5db; cursor: pointer; }
.activity-map-locations strong { color: #2b405f; font-size: .68rem; }
.activity-map-caption { display: flex; justify-content: space-between; gap: .75rem 1.25rem; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.activity-map-caption span:last-child { max-width: 52rem; text-align: right; }
.activity-map-status { min-height: 390px; display: grid; place-items: center; color: #bdd6dd; border: 1px solid #173d5c; border-radius: 1rem; background: radial-gradient(circle at 50% 44%, #173d62, #07192c 70%); font-size: .76rem; font-weight: 680; }
.geo-empty { min-height: 165px; display: grid; place-content: center; gap: .45rem; padding: 1rem; text-align: center; }
.geo-empty strong { color: #2c405f; font-size: .84rem; }
.geo-empty span { max-width: 430px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.geo-privacy-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.geo-privacy-list > div { display: grid; gap: .2rem; padding: .75rem; border: 1px solid #e0e8f3; border-radius: .7rem; background: #f8fafd; }
.geo-privacy-list span { color: #53647c; font-size: .65rem; font-weight: 760; }
.geo-privacy-list strong { color: #273b58; font-size: 1.05rem; }
.geo-privacy-list small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.geo-privacy-note { margin: .85rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.6; }
.geo-privacy-note strong { color: #32506f; }
.analyst { margin-top: 1.2rem; padding: clamp(1rem, 2vw, 1.45rem); }
.analyst form { display: flex; gap: .6rem; }
.answer { margin-top: .9rem; padding: .92rem; border-left: 3px solid var(--violet); border-radius: 0 .65rem .65rem 0; background: #f5f2ff; line-height: 1.55; }
.answer.is-empty { color: var(--muted); }
.answer strong { color: var(--blue-strong); }
.answer ul { color: var(--muted); }
.authority { margin-bottom: .9rem; padding: .9rem 1rem; color: var(--muted); border: 1px solid #cce9e3; border-radius: .8rem; background: #f1faf8; }
.authority strong { color: #147969; }
.intelligence-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .8rem; }
.intelligence-form .is-wide, .intelligence-form > button { grid-column: 1 / -1; }
.proposal-list { display: grid; gap: .9rem; }
.proposal { padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: #fafbfe; }
.proposal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.proposal h3 { margin: .15rem 0 .5rem; color: #263651; font-weight: 680; }
.proposal h4 { margin: .3rem 0 .8rem; }
.proposal p, .proposal dd, .signal p { color: var(--muted); line-height: 1.5; }
.proposal-kind { color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.proposal-status { color: #137a6b; font-size: .71rem; white-space: nowrap; }
.proposal dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.proposal dl div { padding: .65rem; border-radius: .55rem; background: #f1f4f9; }
.proposal dt { color: var(--blue-strong); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.proposal dd { margin: .25rem 0 0; font-size: .73rem; overflow-wrap: anywhere; }
.candidate-form { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin: .7rem 0; }
.proposal-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.decision { padding-left: .8rem; border-left: 2px solid var(--aqua); }
.signal { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.signal:last-child { border-bottom: 0; }
.signal strong { color: #b84260; }
.signal small { color: var(--blue); }

@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes activity-pulse { 0% { opacity: .8; transform: scale(.65); } 72%, 100% { opacity: 0; transform: scale(2.15); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .sidebar { position: static; height: auto; padding-bottom: .8rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding-bottom: .85rem; }
  #view-nav { grid-template-columns: repeat(5, minmax(8rem, 1fr)); }
  .sidebar footer { display: none; }
  .connection-panel form { grid-template-columns: 1fr 1fr auto; }
  .intelligence-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  main { padding: 1rem; }
  .topbar { display: grid; align-items: flex-start; }
  .topbar-actions { width: 100%; }
  .topbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .window-control { min-width: 0; grid-column: 1 / -1; }
  .traffic-control { min-width: 0; grid-column: 1 / -1; }
  #reset-button { min-width: 0; }
  .topbar-actions #connection-button { grid-column: 1 / -1; }
  #view-nav { grid-template-columns: repeat(3, minmax(7rem, 1fr)); }
  .connection-panel form { grid-template-columns: 1fr; }
  .panel { grid-column: 1 / -1; }
  .chart-heading { align-items: flex-start; flex-direction: column; }
  .chart-controls { max-width: 100%; overflow-x: auto; }
  .chart-metric { white-space: nowrap; }
  .trend-chart { padding: 0; overflow-x: auto; }
  .trend-chart svg { width: 760px; max-width: none; }
  .audience-intro { align-items: flex-start; flex-direction: column; }
  .geography-intro { align-items: flex-start; flex-direction: column; }
  .activity-map-meta { align-items: flex-start; flex-direction: column; }
  .activity-map-key { justify-content: flex-start; }
  .activity-map-frame > svg { min-height: 0; }
  .activity-map-toolbar { align-items: flex-start; flex-direction: column; }
  .activity-map-tools { width: 100%; justify-content: flex-start; }
  .activity-map-settings { top: .55rem; right: .55rem; width: min(12.7rem, calc(100% - 1.1rem)); }
  .activity-map-label { display: none; }
  .activity-map-caption { flex-direction: column; }
  .activity-map-caption span:last-child { text-align: left; }
  .geo-privacy-list { grid-template-columns: 1fr 1fr; }
  .analyst form { flex-direction: column; }
  .intelligence-form { grid-template-columns: 1fr; }
  .proposal dl { grid-template-columns: 1fr; }
}

@media (max-width: 450px) {
  .review-banner { font-size: .56rem; }
  .topbar-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .window-control { min-width: 0; grid-column: 1 / -1; }
  .traffic-control { min-width: 0; grid-column: 1 / -1; }
  #reset-button { min-width: 0; }
  #view-nav { grid-template-columns: repeat(2, minmax(7rem, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 118px; }
  .metric-card > strong { font-size: 1.65rem; }
  .audience-split { grid-template-columns: 1fr; }
  .donut { width: 130px; }
  .activity-map-locations { display: grid; grid-template-columns: 1fr; }
  .geo-privacy-list { grid-template-columns: 1fr; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* The private Earth stage. Atlas retains its original presentation. */
.earth-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.earth-legend { display: none; }
.activity-map[data-map-mode="globe"] .activity-map-frame { border-color: #18202c; background: #020305; box-shadow: none; }
.activity-map[data-map-mode="globe"] .activity-map-frame > svg { position: relative; aspect-ratio: 1200 / 610; min-height: 0; }
.activity-map[data-map-mode="globe"][data-earth="ready"] .earth-canvas { display: block; }
.activity-map[data-map-mode="globe"][data-earth="ready"] .activity-map-viewport > :not(g),
.activity-map[data-map-mode="globe"][data-earth="ready"] .activity-map-viewport > g > :not(.activity-map-cell-layer) { visibility: hidden; }
.activity-map[data-map-mode="globe"] .earth-legend { position: absolute; bottom: 16px; left: 22px; right: 22px; display: flex; justify-content: space-between; gap: 1rem; color: #8c9098; font-size: .58rem; letter-spacing: .03em; pointer-events: none; }
.activity-map[data-map-mode="globe"] .earth-legend span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 7px; border-radius: 50%; background: #d7ad73; }
.activity-map[data-map-mode="globe"] .earth-legend span:last-child::before { background: #deeaff; }
.activity-map[data-map-mode="globe"] .activity-light { opacity: 1; }
.activity-map[data-map-mode="globe"] .activity-light .activity-dot { fill: #55e5ff; stroke: #031522; stroke-width: 3; paint-order: stroke; filter: none; transform: scale(.48); }
.activity-map[data-map-mode="globe"] .activity-light .activity-core { fill: #fff; filter: none; transform: scale(.5); }
.activity-map[data-map-mode="globe"] .activity-light .activity-halo { fill: #37cfee; filter: none; transform: scale(.48); }
.activity-map[data-map-mode="globe"] .activity-light .activity-pulse { stroke: #63e8ff; stroke-width: 1.8; filter: none; opacity: .7; animation: earth-activity-breathe 3.6s ease-in-out infinite; transform: scale(.65); }
.activity-map[data-map-mode="globe"] .activity-light.is-city .activity-dot { fill: #8bedff; }
.activity-map[data-map-mode="globe"] .activity-light.is-region .activity-dot { fill: #7caeff; }
.activity-map[data-map-mode="globe"] .activity-map-label path { stroke: #8290a2; stroke-width: .65; }
.activity-map[data-map-mode="globe"] .activity-map-label rect { fill: #080c13; fill-opacity: .92; stroke: #374151; stroke-width: .7; }
.activity-map[data-map-mode="globe"] .activity-map-label text { fill: #d5deeb; font-weight: 550; }
.activity-map[data-map-mode="globe"] .activity-map-label-detail { fill: #a3a9b4; }
.activity-map[data-map-mode="globe"] .activity-map-empty { display: none; }
.activity-map[data-map-mode="globe"] .activity-map-mode button[aria-pressed="true"] { color: #e0e9f9; background: #28364a; box-shadow: none; }
.activity-map[data-map-mode="globe"] .activity-map-settings { background: rgba(6, 9, 15, .95); border-color: #29313c; backdrop-filter: blur(12px); }
@media (max-width: 800px) {
  .activity-map[data-map-mode="globe"] .activity-map-frame > svg { aspect-ratio: 760 / 820; }
  .activity-map[data-map-mode="globe"] .earth-legend { bottom: 12px; left: 14px; right: 14px; flex-direction: column; gap: .3rem; font-size: .52rem; }
}
.panel:has(.activity-map[data-map-mode="globe"]) { background: #020305; border-color: #171e28; box-shadow: none; }
.panel:has(.activity-map[data-map-mode="globe"]) > h2 { color: #8e98a8; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.activity-map[data-map-mode="globe"] .activity-map-meta strong { color: #e1e5ed; font-weight: 550; font-size: 1.15rem; letter-spacing: -.025em; }
.activity-map[data-map-mode="globe"] .activity-map-meta > div:first-child span { color: #838d9d; }
.activity-map[data-map-mode="globe"] .activity-map-detail { color: #bac3d1; }
.activity-map[data-map-mode="globe"] .activity-map-mode,
.activity-map[data-map-mode="globe"] .activity-map-controls button,
.activity-map[data-map-mode="globe"] .activity-map-effects-button { background: #0b111b; border-color: #293343; color: #b8c3d5; }
.activity-map[data-map-mode="globe"] .activity-map-key,
.activity-map[data-map-mode="globe"] .activity-map-caption,
.activity-map[data-map-mode="globe"] .activity-map-locations > span { color: #909aa9; }
.activity-map[data-map-mode="globe"] .activity-map-locations strong { color: #c4cbd7; }
.activity-map[data-map-mode="globe"] .activity-map-key > span.is-city,
.activity-map[data-map-mode="globe"] .activity-map-locations i.is-city { background: #8bedff; box-shadow: none; }
.activity-map[data-map-mode="globe"] .activity-map-key > span.is-region,
.activity-map[data-map-mode="globe"] .activity-map-locations i.is-region { background: #7caeff; box-shadow: none; }
.activity-map[data-map-mode="globe"] .activity-map-key > span.is-country,
.activity-map[data-map-mode="globe"] .activity-map-locations i { background: #55e5ff; box-shadow: none; }
.activity-map[data-map-mode="atlas"] .earth-focus-button { display: none; }
.activity-map[data-map-mode="globe"].is-earth-compact .activity-map-frame > svg { aspect-ratio: 760 / 820; }
.activity-map[data-map-mode="globe"]:not(.is-earth-compact) .activity-map-frame > svg { aspect-ratio: 1200 / 610; }
.has-earth-focus { overflow: hidden; }
.activity-map.is-earth-focused { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: clamp(12px, 2vw, 30px); background: #020305; overflow: auto; }
.activity-map.is-earth-focused .activity-map-frame { flex: 1; min-height: 260px; border: 0; border-radius: 0; }
.activity-map.is-earth-focused .activity-map-frame > svg { width: 100%; height: 100%; position: absolute; }
.activity-map.is-earth-focused .activity-map-locations { max-height: 68px; overflow: auto; }
.activity-map.is-earth-focused .activity-map-caption { font-size: .56rem; }
@media(prefers-reduced-motion: reduce) { .activity-map-settings label:has([data-map-effect="rotation"]) { display:none; } }
.activity-hit { fill: transparent; stroke: none; pointer-events: all; }
.activity-map-locations [role="button"] { cursor: pointer; border-radius: 4px; padding: 3px; }
.activity-map-locations [role="button"]:focus-visible { outline: 1px solid #a5b4cc; outline-offset: 2px; }
.activity-map { min-width: 0; max-width: 100%; }
.activity-map-meta > div, .activity-map-toolbar > div { min-width: 0; }
.activity-map-meta > div:first-child span { overflow-wrap: anywhere; }
.activity-map:not([data-earth="ready"]) .earth-legend { display: none; }
.activity-map[data-map-mode="globe"] .activity-map-tools { gap: .3rem; }
.activity-map[data-map-mode="globe"] .activity-map-toolbar { flex-wrap: wrap; }
.activity-map-locations > span { grid-template-columns: max-content minmax(0, 1fr); }
.activity-map[data-map-mode="globe"] .activity-map-settings input { accent-color: #9baecb; }
.activity-map[data-map-mode="globe"] .activity-map-frame > svg:focus-visible { box-shadow: inset 0 0 0 1px #4a5668; }
/* Repeated pulse identifies recorded visitor markers; it is not an arrival signal. */
.activity-map[data-map-mode="globe"] .activity-pulse.pulse-1 { animation-delay: -1.2s; }
.activity-map[data-map-mode="globe"] .activity-pulse.pulse-2 { animation-delay: -2.4s; }
@keyframes earth-activity-breathe { 0%,100% { opacity:.35; transform:scale(.5); } 50% { opacity:.85; transform:scale(.85); } }
@media(prefers-reduced-motion:reduce) { .activity-map[data-map-mode="globe"] .activity-light .activity-pulse { animation:none; } }

/* Comments are volunteered private correspondence, separate from metrics. */
[hidden] { display: none !important; }
.comments-inbox { display: grid; gap: 18px; max-width: 1080px; }
.comments-note { margin: 0; color: var(--muted); font-size: 13px; }
.comment-card header { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.comment-card header h2 { margin: 4px 0 0; }
.comment-card time { color: var(--muted); font-size: 12px; }
.comment-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.65; margin: 22px 0; }
.comment-details { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.comment-details dt { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.comment-details dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.comment-details .comment-kind { grid-column: 1 / -1; }
.comment-kind dd { font-weight: 650; }
.comment-preferences { color: var(--muted); font-size: 12px; margin: 16px 0 0; }
.comment-preferences strong { font-weight: 500; }
@media (max-width: 640px) {
  .comment-card header { flex-direction: column; gap: 10px; }
  .comment-details { grid-template-columns: 1fr; gap: 12px; }
}

.atlas-location-details { padding: 12px 16px; border: 1px solid #d8e2ef; border-radius: 10px; background: #f5f8fc; color: #243750; }
.atlas-location-details[hidden] { display: none; }
.atlas-location-details p { margin: 5px 0 10px; font-size: 12px; }
.atlas-location-details > div { display: flex; flex-wrap: wrap; gap: 8px; max-height: 180px; overflow: auto; }
.atlas-location-details button { text-align: left; white-space: normal; padding: 8px 12px; }

/* Keep Atlas boundaries readable at city-level magnification. */
.activity-map[data-map-mode="atlas"] .activity-map-viewport path { vector-effect: non-scaling-stroke; }

/* Every recorded city stays reachable without zooming or rotating first. */
.activity-map-locations { max-height: 180px; overflow: auto; padding: 4px; }
.activity-map[data-map-mode="globe"] .atlas-location-details { background: #0b1520; border-color: #35465a; color: #dbeaf7; }
@media (prefers-reduced-motion: reduce) {
  .activity-map .activity-pulse { animation: none !important; opacity: .45; }
}

.activity-map[data-all-labels="true"] .activity-map-label { display: inline; }
.activity-map-tools { flex-wrap: wrap; }
.activity-map [data-map-labels][aria-pressed="true"] { background: #dcebe9; color: #174b4a; }

.activity-map-badge-caption { align-self: center; padding: 0 .35rem; font-size: .7rem; }

/* Compact location list below either map view. */
.unmapped-locations { padding: 12px 14px; }
.unmapped-locations .unmapped-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.unmapped-heading > strong { font-size: .8rem; }
.unmapped-heading > span { padding: 2px 7px; border-radius: 12px; background: #e1e9f2; font-size: .7rem; font-variant-numeric: tabular-nums; }
.unmapped-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 0 20px; list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 240px; overflow-y: auto; }
.unmapped-list > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #dce4ee; min-width: 0; }
.unmapped-place { display: grid; gap: 2px; min-width: 0; }
.unmapped-place > strong { font-size: .76rem; font-weight: 600; overflow-wrap: anywhere; }
.unmapped-place > span { font-size: .68rem; color: #53647a; overflow-wrap: anywhere; }
.unmapped-count { flex-shrink: 0; font-size: .68rem; color: #53647a; font-variant-numeric: tabular-nums; }
.unmapped-list:focus-visible { outline: 2px solid #3b929a; outline-offset: 3px; border-radius: 3px; }
.activity-map[data-map-mode="globe"] .unmapped-heading > span { background: #253649; }
.activity-map[data-map-mode="globe"] .unmapped-list > li { border-color: #293c50; }
.activity-map[data-map-mode="globe"] .unmapped-place > span,
.activity-map[data-map-mode="globe"] .unmapped-count { color: #a8b8ca; }

/* Approximate locations retain the existing pulse with a distinct rose tint. */
.activity-map .activity-light.is-approximate .activity-dot { fill: #e06ab1; }
.activity-map .activity-light.is-approximate .activity-halo { fill: #e06ab1; }
.activity-map .activity-light.is-approximate .activity-pulse { stroke: #e06ab1; }
.activity-map .activity-map-key > span.is-approximate,
.activity-map .activity-map-locations i.is-approximate { background: #e06ab1; box-shadow: 0 0 0 2px rgba(224, 106, 177, .12); }
.activity-map[data-map-mode="globe"] .activity-light.is-approximate .activity-dot { fill: #e06ab1; }
.activity-map[data-map-mode="globe"] .activity-light.is-approximate .activity-halo { fill: #e06ab1; }
.activity-map[data-map-mode="globe"] .activity-light.is-approximate .activity-pulse { stroke: #e06ab1; }
.activity-map[data-map-mode="globe"] .activity-map-locations i.is-approximate { background: #e06ab1; }

.learning-insights {max-width:1000px}
.learning-insights > p {max-width:76ch;line-height:1.6}
.learning-insights label {display:block;margin:18px 0 8px;color:var(--muted)}
.learning-insights select {max-width:100%;padding:10px;background:var(--panel);color:inherit;border:1px solid var(--line);border-radius:8px}
.learning-insights textarea {display:block;width:100%;box-sizing:border-box;margin-bottom:14px;padding:14px;background:transparent;color:inherit;border:1px solid var(--line);border-radius:10px;font:inherit;line-height:1.6;resize:vertical}
.learning-conversation article {border-top:1px solid var(--line);padding:20px 0}
.learning-conversation article p {white-space:pre-wrap;line-height:1.7;max-width:80ch}
#learning-evidence {line-height:1.7;margin:20px 0;color:var(--muted)}

/* Account/AdamAI ledgers share the dashboard's panel and table hierarchy. */
.account-report-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted,#65728b);margin-bottom:16px}
.account-report-heading button{margin-left:auto}
.report-period{border:1px solid #c9d5e8;border-radius:20px;padding:6px 12px;color:#34476a;font-weight:650}
.adoption-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.adoption-grid .metric-card{box-shadow:none;border:1px solid #e1e7ef;min-width:0}
@media(max-width:600px){.adoption-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-report-heading button{margin-left:0}.adoption-grid .metric-card{padding:12px}.adoption-grid .metric-card strong{font-size:25px}}

.panel.is-wide .adoption-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){.panel.is-wide .adoption-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
