/* Analytics and admin routes. Mobile-first: the 390px and 430px iPhone widths are the design
   target and every wider viewport is a progressive enhancement of the same single column. */

.sooner-analytics-page {
  background: var(--brand-cream, #F5F4F0);
  bottom: 0;
  color: var(--brand-dark, #1C1B17);
  display: block;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  z-index: 60;
}
.sooner-analytics-page[hidden] { display: none; }
html.analytics-open, html.analytics-open body { overflow: hidden; }
.analytics-sr-status {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.analytics-shell {
  margin: 0 auto;
  max-width: 480px;
  padding: 16px 16px calc(120px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  width: 100%;
}

/* The App Kit reset removes focus outlines globally. Analytics restores a visible ring with a
   more specific selector so keyboard and switch-control users keep a focus indicator. */
.sooner-analytics-page :focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--brand-cream, #F5F4F0) !important;
  outline: 3px solid var(--brand-dark, #1C1B17) !important;
  outline-offset: 2px !important;
}

.analytics-header { align-items: center; display: flex; gap: 12px; }
.analytics-back {
  align-items: center;
  background: var(--brand-white, #FFFFFF);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 100px;
  color: var(--brand-dark, #1C1B17);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 18px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.analytics-kicker {
  color: var(--brand-muted, #6B6A66);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.analytics-title { font-size: 21px; font-weight: 750; letter-spacing: -0.35px; line-height: 1.2; }

.analytics-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.analytics-nav-link {
  align-items: center;
  background: var(--brand-white, #FFFFFF);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 100px;
  color: var(--brand-dark, #1C1B17);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}
.analytics-nav-link.is-active { background: var(--brand-yellow, #E9FE0F); border-color: var(--brand-yellow, #E9FE0F); }

.analytics-status {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 14px;
  min-height: 20px;
}
.analytics-status.tone-error { color: #8f2d21; }
.analytics-status.tone-attention { color: #7a5a12; }
.analytics-status.tone-positive { color: #3f6b39; }

.analytics-main { display: block; margin-top: 16px; }

.analytics-panel,
.analytics-overall,
.analytics-connection,
.analytics-section {
  background: var(--brand-white, #FFFFFF);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 16px;
}
.analytics-panel h2,
.analytics-overall h2,
.analytics-connection h2 { font-size: 17px; font-weight: 750; letter-spacing: -0.2px; }
.analytics-section h3 { font-size: 15px; font-weight: 700; }
.analytics-note { color: var(--brand-muted, #6B6A66); font-size: 13px; line-height: 1.55; margin-top: 8px; }
.analytics-unsupported {
  background: var(--brand-cream, #F5F4F0);
  border-radius: 8px;
  color: var(--brand-dark, #1C1B17);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
  padding: 12px;
}
.analytics-section-head,
.analytics-connection-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.analytics-badge {
  background: var(--brand-cream, #F5F4F0);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 100px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
}
.analytics-badge.tone-error { background: rgba(165, 72, 56, 0.12); }
.analytics-badge.tone-positive { background: rgba(76, 125, 69, 0.14); }
.analytics-badge.tone-unsupported { background: rgba(107, 106, 102, 0.14); }

.analytics-currency { margin-top: 12px; }
.analytics-currency-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-currency-code { font-size: 13px; font-weight: 750; }
.analytics-currency-note { color: var(--brand-muted, #6B6A66); font-size: 11px; }

.analytics-metrics { display: grid; gap: 8px; grid-template-columns: 1fr; list-style: none; margin-top: 10px; }
.analytics-metric {
  background: var(--brand-cream, #F5F4F0);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}
.analytics-metric-label { color: var(--brand-muted, #6B6A66); font-size: 12px; }
.analytics-metric-value { font-size: 16px; font-weight: 750; overflow-wrap: anywhere; }
.analytics-metric-note { color: var(--brand-muted, #6B6A66); font-size: 11px; }

.analytics-categories { list-style: none; margin-top: 10px; }
.analytics-categories li {
  align-items: baseline;
  border-top: 1px solid var(--brand-border, #E5E4E0);
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 0;
}
.analytics-categories em { color: var(--brand-muted, #6B6A66); font-size: 11px; font-style: normal; }

.analytics-action,
.analytics-subject-button,
.analytics-reveal {
  align-items: center;
  background: var(--brand-yellow, #E9FE0F);
  border: 1px solid var(--brand-yellow, #E9FE0F);
  border-radius: 100px;
  color: var(--brand-dark, #1C1B17);
  cursor: pointer;
  display: inline-flex;
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 750;
  justify-content: center;
  margin-top: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 11px 18px;
  text-decoration: none;
}
.analytics-action-quiet,
.analytics-reveal {
  background: transparent;
  border-color: var(--brand-dark, #1C1B17);
}
.analytics-scenarios,
.analytics-drilldowns { display: flex; flex-wrap: wrap; gap: 8px; }

.analytics-subjects { list-style: none; }
.analytics-subject { border-top: 1px solid var(--brand-border, #E5E4E0); }
.analytics-subject-button {
  align-items: flex-start;
  background: transparent;
  border-color: transparent;
  border-radius: 8px;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  width: 100%;
}
.analytics-subject.is-selected .analytics-subject-button { background: var(--brand-tint, rgba(233, 254, 15, 0.12)); }
.analytics-subject-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.analytics-subject-email,
.analytics-subject-meta { color: var(--brand-muted, #6B6A66); font-size: 12px; overflow-wrap: anywhere; }

.analytics-raw-rows { list-style: none; margin-top: 10px; }
.analytics-raw-row {
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 12px;
}
.analytics-raw-row-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.analytics-raw-row-index { font-size: 12px; font-weight: 700; }
.analytics-raw-fields { display: grid; gap: 6px; grid-template-columns: 1fr; margin-top: 10px; }
.analytics-raw-field { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.analytics-raw-field dt { color: var(--brand-muted, #6B6A66); font-size: 12px; overflow-wrap: anywhere; }
.analytics-raw-field dd { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.analytics-events { list-style: none; }
.analytics-event {
  border-top: 1px solid var(--brand-border, #E5E4E0);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
}
.analytics-event-at { color: var(--brand-muted, #6B6A66); font-size: 11px; }
.analytics-event-kind { font-size: 13px; font-weight: 700; }
.analytics-event-message { font-size: 12px; overflow-wrap: anywhere; }

.analytics-receipt {
  background: var(--brand-white, #FFFFFF);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 8px;
  margin-top: 18px;
}
.analytics-receipt-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
  padding: 11px 16px;
}
.analytics-receipt-grid { border-top: 1px solid var(--brand-border, #E5E4E0); padding: 6px 16px 14px; }
.analytics-receipt-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 7px 0; }
.analytics-receipt-row dt { color: var(--brand-muted, #6B6A66); font-size: 12px; }
.analytics-receipt-row dd { font-size: 12px; overflow-wrap: anywhere; }

/* Keep a focused control clear of the software keyboard. */
.sooner-analytics-page input,
.sooner-analytics-page select,
.sooner-analytics-page textarea,
.sooner-analytics-page button,
.sooner-analytics-page a {
  scroll-margin-bottom: 140px;
  scroll-margin-top: 80px;
}

@media (min-width: 414px) {
  .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .analytics-shell { max-width: 640px; padding-bottom: 96px; }
  .analytics-raw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sooner-analytics-page { scroll-behavior: auto; }
}

/* Spending insights: customer-only presentation. Operator evidence routes keep their layout. */
.analytics-shell-customer {
  font-family: var(--brand-font, 'Manrope', sans-serif);
  max-width: 1120px;
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
.analytics-shell-customer * { box-sizing: border-box; }
.analytics-shell-customer .analytics-header {
  background: var(--brand-cream, #F5F4F0);
  padding: 8px 0 14px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.analytics-shell-customer .analytics-header > div { min-width: 0; }
.analytics-shell-customer .analytics-title { font-size: 25px; letter-spacing: -0.7px; }
.analytics-shell-customer .analytics-kicker { margin-bottom: 4px; }
.analytics-shell-customer .analytics-main { margin-top: 0; }
.analytics-shell-customer .analytics-note,
.analytics-shell-customer .analytics-metric-note,
.analytics-shell-customer .analytics-kicker { color: var(--brand-grey-text, #6B6B6B); }
.analytics-shell-customer .analytics-badge {
  flex-shrink: 1;
  line-height: 1.4;
  max-width: 180px;
  text-align: center;
}
.spending-status { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 8px 0 16px; }
.spending-status > div { min-width: 0; }
.spending-status .analytics-action { flex-shrink: 0; margin: 0; }
.spending-status .analytics-note { max-width: 600px; }
.spending-overview { align-items: center; border-top: 1px solid var(--brand-border, #E5E4E0); display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 12px 0; }
.spending-overview > p { color: var(--brand-grey-text, #6B6B6B); font-size: 13px; margin: 0; }
.spending-check,
.spending-section-nav button {
  background: transparent;
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 100px;
  color: var(--brand-dark, #1C1B17);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 14px;
}
.spending-check { border-color: var(--brand-dark, #1C1B17); }
.spending-check:disabled { cursor: progress; opacity: 0.6; }
.spending-section-nav button:hover,
.spending-check:hover:not(:disabled) { background: var(--brand-yellow, #E9FE0F); border-color: var(--brand-yellow, #E9FE0F); }
.spending-currency-notice { margin: 0 0 16px; }
.spending-bank { margin: 10px 0 32px; min-width: 0; }
.spending-bank-header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; padding: 8px 0; }
.spending-bank-header > div { min-width: 0; }
.spending-bank-header h2 { font-size: 18px; font-weight: 750; letter-spacing: -0.3px; line-height: 1.4; overflow-wrap: anywhere; }
.spending-bank-header .analytics-note { font-size: 11px; margin-top: 4px; }
.spending-section-nav { display: flex; gap: 6px; flex-wrap: nowrap; margin: 8px 0 16px; max-width: 100%; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.spending-section-nav button { flex: 0 0 auto; }
.spending-section-grid { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.spending-section {
  background: var(--brand-white, #FFFFFF);
  border: 1px solid var(--brand-border, #E5E4E0);
  border-radius: 8px;
  min-width: 0;
  padding: 20px 16px;
  scroll-margin-top: 100px;
}
.spending-section .analytics-section-head { align-items: center; }
.spending-section h3 { font-size: 18px; font-weight: 750; letter-spacing: -0.3px; line-height: 1.3; }
.spending-section h4 { font-size: 12px; font-weight: 750; margin: 0 0 2px; }
.spending-section > .analytics-note { font-size: 12px; line-height: 1.5; }
.spending-section-unavailable { padding: 18px 16px; }
.spending-section-unavailable h3 { font-size: 15px; }
.spending-section-unavailable .analytics-badge { font-size: 10px; }
.spending-currency + .spending-currency { border-top: 1px solid var(--brand-border, #E5E4E0); margin-top: 24px; padding-top: 16px; }
.spending-currency-label { font-size: 12px; font-weight: 750; margin-top: 16px; }
.spending-metrics { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0 0; }
.spending-metric { min-width: 0; }
.spending-metric dt { color: var(--brand-grey-text, #6B6B6B); font-size: 12px; line-height: 1.45; margin-bottom: 5px; }
.spending-metric dd { font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: -0.4px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.spending-metric-primary { border-bottom: 1px solid var(--brand-border, #E5E4E0); grid-column: 1 / -1; padding-bottom: 18px; }
.spending-metric-primary dd { font-size: clamp(28px, 4vw, 36px); letter-spacing: -1px; }
.spending-amount-currency { font-size: 0.58em; font-weight: 600; letter-spacing: 0; }
.spending-metric .analytics-metric-note { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.5; margin-top: 6px; }
.spending-metric dd.spending-value-unavailable { color: var(--brand-grey-text, #6B6B6B); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.spending-breakdown { margin-top: 24px; }
.spending-category-list { list-style: none; margin: 0; padding: 0; }
.spending-category-list li { padding: 13px 0 3px; }
.spending-category-row { align-items: start; display: grid; font-size: 12px; gap: 6px 10px; grid-template-columns: minmax(0, 1fr) minmax(88px, auto) 42px; line-height: 1.4; }
.spending-category-label { min-width: 0; overflow-wrap: anywhere; }
.spending-category-row strong { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.spending-category-share { color: var(--brand-grey-text, #6B6B6B); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.spending-category-track { background: var(--brand-border, #E5E4E0); border-radius: 3px; height: 4px; margin-top: 8px; overflow: hidden; }
.spending-category-track span { background: var(--brand-dark, #1C1B17); border-radius: inherit; display: block; height: 100%; }
.spending-updated { border-top: 1px solid var(--brand-border, #E5E4E0); color: var(--brand-grey-text, #6B6B6B); font-size: 10px; line-height: 1.5; margin-top: 20px; padding-top: 12px; }
.spending-history { border-top: 1px solid var(--brand-border, #E5E4E0); margin-top: 24px; }
.spending-history summary { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 700; gap: 8px; justify-content: space-between; min-height: 48px; padding: 8px 0; }
.spending-history summary::before { content: '+'; font-size: 18px; }
.spending-history[open] summary::before { content: '−'; }
.spending-history summary > span { color: var(--brand-grey-text, #6B6B6B); font-size: 11px; font-weight: 400; margin-left: auto; white-space: nowrap; }
.spending-history-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.spending-history table { border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.5; width: 100%; }
.spending-history caption { color: var(--brand-grey-text, #6B6B6B); padding: 4px 0 10px; text-align: left; }
.spending-history th,
.spending-history td { border-bottom: 1px solid var(--brand-border, #E5E4E0); padding: 10px 6px; text-align: right; white-space: nowrap; }
.spending-history th:first-child { padding-left: 0; text-align: left; }
.spending-history thead th { background: var(--brand-cream, #F5F4F0); font-weight: 700; }
.spending-history tbody th { font-weight: 500; }
.spending-empty { background: var(--brand-white, #FFFFFF); border: 1px solid var(--brand-border, #E5E4E0); border-radius: 8px; margin: 12px 0; padding: 28px 20px; }
.spending-empty h2 { font-size: 19px; line-height: 1.4; }
.spending-skeleton { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.spending-skeleton span { background: var(--brand-cream, #F5F4F0); border-radius: 4px; height: 50px; }
.spending-skeleton span:first-child { grid-column: 1 / -1; height: 82px; }
.analytics-shell-customer .analytics-receipt { background: transparent; margin-top: 32px; }
.analytics-shell-customer .analytics-receipt-summary { color: var(--brand-grey-text, #6B6B6B); font-size: 12px; }
@media (min-width: 768px) {
  .analytics-shell-customer { padding: 28px 32px 64px; }
  .analytics-shell-customer .analytics-title { font-size: 30px; }
  .spending-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .spending-section { padding: 24px; }
  .spending-bank-header h2 { font-size: 21px; }
  .spending-category-row { font-size: 13px; }
  .spending-history table { font-size: 12px; }
}
@media (max-width: 360px) {
  .analytics-shell-customer .analytics-title { font-size: 22px; }
  .spending-status { align-items: flex-start; flex-direction: column; }
  .spending-section { padding: 18px 12px; }
  .spending-category-row { gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(82px, auto) 38px; }
}