/* Shared interaction surfaces · 2026-10-04.
   Deliberately scoped: no dashboard layout, metric, source or filter-contract changes. */
:root { --analytics-surface-polish: 20261004; }

/* The header, scrolling content and pagination occupy exactly three rows.
   A scope added to a records dialog must not create a fourth implicit row. */
.analytics-records-dialog.analytics-modal-surface:has(> .analytics-records-content) {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
.analytics-records-content {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 18px;
}
.analytics-records-content > .ad-detail-scope { margin: 16px; }
.analytics-records-content > .analytics-records-list {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.analytics-records-content .analytics-records-table-wrap {
  height: auto !important;
  max-height: none !important;
  overflow-x: auto;
}

/* A clear hierarchy without glowing every edge. Existing theme tokens remain authoritative. */
:is(.analytics-modal-surface,.op-v2 dialog,.report-section-dialog) {
  --ap-surface: var(--analytics-modal-surface-0, #071820);
  --ap-raised: var(--analytics-modal-surface-1, #0a202a);
  --ap-border: var(--analytics-theme-border, #31505c);
  --ap-focus: var(--analytics-theme-focus, #19d0d4);
  isolation: isolate;
  text-rendering: optimizeLegibility;
}
:is(.analytics-modal-surface,.op-v2 dialog,.report-section-dialog) :is(h2,h3,h4,p,dt,dd) {
  overflow-wrap: anywhere;
}
:is(.analytics-drilldown-head,.analytics-records-head,.op-v2 .op-detail-head,.op-v2 .pv-dialog-head) {
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px) !important;
  gap: 14px !important;
  min-height: 76px !important;
  margin-bottom: 0 !important;
  background: var(--analytics-modal-surface-1, #0a202a) !important;
}
:is(.analytics-drilldown-title,.analytics-records-head > span,.op-v2 .op-detail-head h2,.op-v2 .pv-dialog-head h2) {
  font-size: clamp(18px, 1.55vw, 22px) !important;
  font-weight: 680 !important;
  letter-spacing: -.025em;
  line-height: 1.3 !important;
}
:is(.analytics-drilldown-close,.analytics-records-close,.analytics-filter-close,.analytics-help-close) {
  flex-shrink: 0;
  border-radius: 12px !important;
  touch-action: manipulation;
}
:is(.analytics-modal-surface,.op-v2 dialog,.report-section-dialog) :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible,
.analytics-filter-popover :is(button,input,select):focus-visible,
.ad-detail-scope :is(button,input,select,summary):focus-visible {
  outline: 2px solid var(--analytics-theme-focus, #19d0d4) !important;
  outline-offset: 3px !important;
}
:is(.analytics-drilldown-body,.analytics-records-list,.analytics-records-table-wrap,.op-v2 dialog,.report-section-dialog) {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--analytics-theme-border-strong, #456575) transparent;
  scroll-padding-block: 18px;
}
:is(.analytics-records-table-wrap,.analytics-drilldown-body,#opDetailContent,#opSectionContent,#opFilterContent,#opSourceContent) {
  scrollbar-gutter: stable;
}
:is(.analytics-modal-surface,.op-v2 dialog,.report-section-dialog) :is(.analytics-records-pagination,.analytics-drilldown-client-pager,.op-pagination,.op-dialog-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-variant-numeric: tabular-nums;
}
:is(.analytics-records-pagination,.analytics-drilldown-client-pager,.op-pagination,.op-dialog-actions) button {
  min-height: 38px;
  border-radius: 10px;
  touch-action: manipulation;
}
:is(.analytics-modal-surface,.op-v2 dialog,.report-section-dialog) button:disabled {
  cursor: not-allowed !important;
  transform: none !important;
}
:is(.analytics-modal-surface,.op-v2 dialog) :is(.analytics-records-empty,.ad-empty) {
  padding: 26px 20px !important;
  line-height: 1.65;
  border-style: dashed;
  text-align: start;
}

/* Global filter popover: bounded scrolling and an always-reachable action row. */
.analytics-filter-popover {
  width: min(390px, calc(100% - 24px)) !important;
  max-height: calc(100dvh - 104px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 20px !important;
  border-color: var(--analytics-theme-border, #31505c) !important;
  border-radius: 18px !important;
  background: var(--analytics-modal-surface-0, #071820) !important;
}
.analytics-filter-title {
  gap: 16px;
  margin: 0 0 6px !important;
  font-size: 18px !important;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.analytics-filter-intro {
  margin: 0 0 16px;
  color: var(--analytics-modal-muted, #9cb1b8);
  font-size: 12px;
  line-height: 1.5;
  max-width: 38ch;
}
.analytics-filter-row { gap: 7px !important; margin: 13px 0 !important; }
.analytics-filter-row label { font-weight: 600; letter-spacing: 0; }
.analytics-filter-row select {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}
.analytics-filter-reason { font-size: 11px; line-height: 1.5; padding-top: 2px; }
.analytics-filter-popover input[type="checkbox"] {
  width: 17px; height: 17px; flex: 0 0 17px;
  accent-color: var(--analytics-theme-accent, #19d0d4);
}
.analytics-filter-compare { min-height: 36px; line-height: 1.5; align-items: center; }
.analytics-filter-actions {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  margin: 16px -2px -2px;
  padding: 13px 2px 2px;
  border-top: 1px solid var(--analytics-theme-border, #31505c);
  background: var(--analytics-modal-surface-0, #071820);
  justify-content: space-between;
  gap: 12px;
}
.analytics-filter-actions button { min-height: 40px !important; border-radius: 10px !important; padding: 9px 16px !important; font-size: 12px !important; }
.analytics-filter-actions .apply { min-width: 116px; }
.analytics-filter-actions button:disabled { cursor: not-allowed; transform: none; }

/* Base scope, committed refinements and unsubmitted search text are different states. */
.ad-detail-scope {
  padding: clamp(14px, 1.8vw, 20px);
  border-radius: 16px;
  gap: 12px;
  background: var(--analytics-modal-surface-1, var(--ad-surface));
}
.ad-scope-heading { align-items: baseline; gap: 6px 12px; }
.ad-scope-heading strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.ad-scope-heading > span:not(.ad-scope-count) { flex-basis: 100%; max-width: 76ch; line-height: 1.55; }
.ad-scope-heading .ad-scope-count {
  margin-inline-start: auto;
  padding: 3px 8px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ad-text);
}
.ad-base-tags { gap: 7px; }
.ad-base-tag { border-style: solid; border-radius: 8px; background: var(--ad-surface); padding: 5px 9px; font-size: 11px; line-height: 1.5; }
.ad-detail-scope .ad-filter-controls { gap: 12px 14px; }
.ad-detail-scope .ad-filter-control > span { font-size: 11.5px; line-height: 1.45; }
.ad-detail-scope :is(input,select) { min-height: 40px; height: 40px; border-radius: 10px; background: var(--ad-surface); font-size: 13px; }
.ad-detail-scope .ad-search-apply { min-height: 40px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.ad-detail-scope .ad-filter-control[data-draft-pending="true"] input {
  border-color: var(--ad-accent);
  box-shadow: inset 3px 0 0 var(--ad-accent);
}
.ad-filter-draft-hint { grid-column: 1 / -1; color: var(--ad-muted); font-size: 11px; line-height: 1.4; }
.ad-detail-scope .ad-filter-tag {
  min-height: 36px;
  padding: 6px 9px 6px 11px !important;
  gap: 8px;
  font-size: 12px;
  border-radius: 10px !important;
}
.ad-filter-tag > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--ad-accent) 10%, transparent); }
.ad-detail-scope > .ad-filter-disclosure { border-top: 1px solid var(--ad-border) !important; padding-top: 8px !important; }
.ad-filter-disclosure > summary { min-height: 36px; width: fit-content; padding: 4px 8px !important; margin-left: -8px; border-radius: 8px; font-size: 12px; gap: 8px; }
.ad-filter-disclosure > summary::after { content: "⌄"; display: inline-block; font-size: 15px; }
.ad-filter-disclosure[open] > summary::after { transform: rotate(180deg); }
.ad-detail-count { padding-top: 2px; font-variant-numeric: tabular-nums; }
.ad-scope-updating { color: var(--ad-muted); font-size: 11px; line-height: 1.5; }
.ad-detail-scope [hidden], .analytics-filter-popover [hidden] { display: none !important; }

@media (hover: hover) {
  .ad-detail-scope :is(.ad-filter-tag,.ad-search-apply):not(:disabled):hover { filter: none; border-color: var(--ad-accent) !important; background: color-mix(in srgb, var(--ad-accent) 12%, var(--ad-surface)) !important; }
  .ad-filter-disclosure > summary:hover { background: var(--ad-raised); }
  :is(.analytics-records-close,.analytics-drilldown-close,.analytics-filter-close):not(:disabled):hover { border-color: var(--analytics-theme-accent, #19d0d4) !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .ad-detail-scope :is(input,select,button), .analytics-filter-popover :is(select,button) { transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-detail-scope *, .analytics-filter-popover * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 640px) {
  .analytics-filter-popover { padding: 16px !important; max-height: calc(100dvh - 84px) !important; border-radius: 14px !important; }
  .analytics-filter-actions { bottom: -16px; }
  :is(.analytics-drilldown-head,.analytics-records-head,.op-v2 .op-detail-head,.op-v2 .pv-dialog-head) { padding: 16px !important; gap: 10px !important; min-height: 68px !important; }
  .ad-detail-scope { padding: 12px; }
  .ad-detail-scope .ad-filter-controls { grid-template-columns: minmax(0, 1fr); }
  .ad-detail-scope .ad-filter-control { grid-column: 1 / -1; }
  .ad-detail-scope .ad-scope-count { margin-inline-start: 0; }
}
@media (pointer: coarse) {
  .analytics-filter-popover :is(select,button), .ad-detail-scope :is(input,select,button,summary),
  :is(.analytics-modal-surface,.op-v2 dialog) :is(.analytics-records-close,.analytics-drilldown-close) { min-height: 44px !important; }
}
html[data-analytics-theme="alto-contraste"] :is(.analytics-filter-popover,.ad-detail-scope) { border-width: 2px !important; box-shadow: none !important; }
@media (forced-colors: active) {
  .analytics-filter-popover, .analytics-filter-actions, .ad-detail-scope, .ad-base-tag,
  .ad-detail-scope :is(input,select,button), .ad-filter-disclosure > summary { background: Canvas !important; color: CanvasText !important; border-color: ButtonText !important; box-shadow: none !important; }
  .analytics-filter-intro,.ad-filter-draft-hint,.ad-scope-updating { color: CanvasText !important; }
  .ad-detail-scope :is(input,select,button,summary):focus-visible,.analytics-filter-popover :is(select,button):focus-visible { outline-color: Highlight !important; }
  .ad-detail-scope [data-draft-pending="true"] input { border: 2px solid Highlight !important; }
  .ad-detail-scope button:disabled,.analytics-filter-popover button:disabled { color: GrayText !important; }
}