@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');

:root {
  --pspui-topbar-bg: #1a1d24;
  --pspui-topbar-fg: #e8eaed;
  --pspui-topbar-muted: #9aa0a6;
  --pspui-logo-color: #fff;
  --pspui-topbar-height: 52px;
}

html,
body {
  height: 100%;
  margin: 0;
}

body.pspui-portal {
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #f4f5f7;
}

#app {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pspui-shell,
.pspui-shell.fw-layout-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pspui-body,
.pspui-body.fw-layout-row {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

.pspui-sidebar {
  flex: 0 0 auto;
  width: max-content;
  max-width: 200px;
  min-height: 0;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #fff;
  border-right: 1px solid #e0e3e8;
  padding: 16px 12px;
  box-sizing: border-box;
}

.pspui-sidebar::-webkit-scrollbar {
  width: 8px;
}

.pspui-sidebar::-webkit-scrollbar-thumb {
  background: #c5cad3;
  border-radius: 4px;
}

/* fw-layout-col sets flex:1 on all columns — keep nav only as wide as its labels */
.pspui-sidebar .fw-nav-list {
  min-width: 0;
  width: auto;
  background: transparent;
  border-right: none;
}

.pspui-sidebar .fw-nav-item {
  white-space: nowrap;
}

.pspui-sidebar__group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 8px 8px 12px;
  text-transform: uppercase;
}

.pspui-main,
.pspui-main.fw-layout-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
 /* height: 0;*/
  padding: 24px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
}

/* framework.css gives every .fw-layout-col / .fw-layout-row `overflow: hidden`, which is
   right for a pane that owns its own scrollbar and wrong for everything under .pspui-main:
   .pspui-main is the scroller, so a layout inside it that clips just hides the bottom of
   the page with no way to reach it. Anything nested — a PortalTabPanel's content, a column
   inside a row — keeps the framework default unless it is named here, which is why the
   Gexp pages ran off the bottom of the screen.

   Only `overflow` is relaxed. `flex` is left alone: in a row container `flex: 0 0 auto`
   means "as wide as its content", so forcing it here would collapse every two-column page. */
.pspui-main .fw-layout-col,
.pspui-main .fw-layout-row {
  overflow: visible;
}

/* Module panels are content-sized — scroll happens on .pspui-main, not inside them */
.pspui-main > .fw-layout-col,
.pspui-main > .pspui-news-overview,
.pspui-main > .pspui-articles-view,
.pspui-main > .pspui-adtech-overview,
.pspui-main > .pspui-programmatic-overview,
.pspui-main > .pspui-adops-overview,
.pspui-main > .pspui-engagement-overview,
.pspui-main > .pspui-adtech-config-mgmt-page {
  flex: 0 0 auto;
  overflow: visible;
}

/* Engagement dashboard.
   .fw-layout-col defaults children to flex:1 (grow/shrink) with overflow:hidden,
   which lets the KPI row stretch (align-items:stretch → tall tiles) and squeezes
   the charts so their x-axis is clipped. Lock every direct child to its natural
   height — mirrors .pspui-news-overview / .pspui-articles-view. */
.pspui-engagement-overview {
  gap: 16px;
}

.pspui-engagement-overview > .pspui-page-title,
.pspui-engagement-overview > .pspui-kpi-row,
.pspui-engagement-overview > .pspui-engagement-dist-row,
.pspui-engagement-overview > .fw-chart,
.pspui-engagement-overview > .fw-data-grid,
.pspui-engagement-overview > .fw-layout-row,
.pspui-engagement-overview > .fw-layout-col {
  flex: 0 0 auto;
}

/* KPI tiles size to their content (no vertical stretch). */
.pspui-engagement-overview > .pspui-kpi-row {
  align-items: flex-start;
}

/* Two distribution charts share a row; keep full height so the x-axis shows. */
.pspui-engagement-dist-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.pspui-engagement-dist-row > .fw-chart {
  flex: 1 1 360px;
  min-width: 0;
  min-height: 320px;
}

/* Attention-map heatmap keeps its declared height. */
.pspui-engagement-overview > .fw-chart {
  width: 100%;
  min-height: 380px;
}

/* Author / article tables — same readable surface as the article grids. */
.pspui-main .pspui-engagement-grid.fw-data-grid {
  width: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
}

.pspui-main .pspui-engagement-grid.fw-data-grid thead {
  background: #f8f9fb;
  border-bottom: 1px solid #e0e3e8;
}

.pspui-main .pspui-engagement-grid.fw-data-grid th {
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
}

.pspui-main .pspui-engagement-grid.fw-data-grid td {
  color: #1a1d24;
  font-size: 13px;
  padding: 10px 12px;
  border-top: 1px solid #eef0f4;
  vertical-align: middle;
}

.pspui-main .pspui-engagement-grid.fw-data-grid tbody tr:hover {
  background: #f4f6f9;
  cursor: pointer;
}

/* Engagement filter bar — the standard .pspui-subtopbar classes carry the
   single-line look; just stop the fw-layout-row fields from stretching. */
.pspui-engagement-overview .pspui-subtopbar__field {
  flex: 0 0 auto;
}

/* Per-list heading with an inline search box: "By author   Search: [ ]". */
.pspui-engagement-listhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}

.pspui-engagement-listhead > .pspui-section-heading {
  flex: 0 0 auto;
  margin: 0;
}

.pspui-engagement-searchlabel {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.pspui-engagement-search-input {
  flex: 0 0 auto;
  min-width: 220px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: #1a1d24;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
}

/* Engagement article grid: leading ↗ opens the article (new tab); the title
   text itself is part of the row click (opens the drill-down modal). */
.pspui-main .pspui-article-link {
  display: inline-block;
  margin-right: 6px;
  color: #1a56b8;
  font-weight: 700;
  text-decoration: none;
}

.pspui-main .pspui-article-link:hover {
  color: #0d3d8c;
}

.pspui-main .pspui-article-title {
  cursor: pointer;
}

/* Drill-down content, hosted inside the standard modal shell (ModalHost). */
.fw-modal.pspui-drill-modal {
  width: min(960px, 94vw);
}

.pspui-drill-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  flex: 0 0 auto;
}

.pspui-drill-content > * {
  flex: 0 0 auto;
}

.pspui-drill-content .pspui-engagement-dist-row > .fw-chart {
  min-height: 280px;
}

/* Drill-down article dropdown (compact selector, one line). */
.pspui-drill-articlebar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pspui-drill-articlelabel {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.pspui-ds-select {
  padding: 7px 10px;
  font-size: 0.9rem;
  color: #1a1d24;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  max-width: 100%;
}

.pspui-drill-article-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

.pspui-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1d24;
  margin: 0 0 16px;
}

/* Programmatic sections — light toolbar row: title left, filters right */
.pspui-programmatic-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  background: #f8f9fa;
  box-shadow: none;
}

.pspui-programmatic-section-head .pspui-page-title {
  display: block;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5f6368;
}

/* The programmatic filter strip: a light card at the top of the widget panel. */
.pspui-programmatic-filters {
  flex: 0 0 auto;
  width: 100%;
}

.pspui-subtopbar--programmatic-overview {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid #e8eaed;
  border-bottom: 1px solid #e8eaed;
  border-radius: 10px;
  background: #f8f9fa;
}

.pspui-subtopbar--programmatic-overview .pspui-subtopbar__strip {
  justify-content: flex-start;
  gap: 12px;
}

.pspui-subtopbar--programmatic-overview .pspui-subtopbar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #9aa0a6;
}

.pspui-subtopbar--programmatic-overview .pspui-subtopbar__select,
.pspui-subtopbar--programmatic-overview .pspui-subtopbar__combobox {
  min-width: 128px;
  padding: 5px 8px;
  font-size: 12px;
  color: #3c4043;
  background: #fff;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  box-shadow: none;
}

.pspui-subtopbar--programmatic-overview .pspui-subtopbar__field--country .pspui-subtopbar__combobox,
.pspui-subtopbar--programmatic-overview .pspui-subtopbar__field--adunit .pspui-subtopbar__combobox,
.pspui-subtopbar--programmatic-overview .pspui-subtopbar__field--position .pspui-subtopbar__combobox {
  min-width: 148px;
}

@media (max-width: 960px) {
  .pspui-programmatic-section-head {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
  }
}

.pspui-adtech-overview {
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.pspui-adtech-overview > .fw-chart,
.pspui-adtech-overview > .pspui-kpi-row,
.pspui-adtech-overview > .fw-layout-row,
.pspui-adtech-overview > .fw-layout-col {
  flex: 0 0 auto;
}

/* Overview telemetry charts — light card chrome (same as News overview).
 * Use descendants under charts-row so ServiceUiSlot package children match
 * peer charts (they are not direct children of the row). */
.pspui-news-overview > .fw-chart,
.pspui-adtech-overview > .fw-chart,
.pspui-programmatic-overview .fw-chart,
.pspui-adtech-charts-row .fw-chart,
.pspui-programmatic-charts-row .fw-chart {
  --bg1: #fff;
  --bg2: #f8f9fb;
  --border: #e0e3e8;
  --text: #1a1d24;
  --text-dim: #5f6368;
  --accent: #4e79a7;
  background: #fff;
  border-color: #e0e3e8;
}

.pspui-news-overview > .fw-chart .fw-chart-breakdown,
.pspui-news-overview > .fw-chart .fw-chart-value-mode,
.pspui-news-overview > .fw-chart .fw-chart-auto-refresh,
.pspui-adtech-overview > .fw-chart .fw-chart-breakdown,
.pspui-adtech-overview > .fw-chart .fw-chart-value-mode,
.pspui-adtech-overview > .fw-chart .fw-chart-auto-refresh,
.pspui-programmatic-overview .fw-chart .fw-chart-breakdown,
.pspui-programmatic-overview .fw-chart .fw-chart-value-mode,
.pspui-programmatic-overview .fw-chart .fw-chart-auto-refresh,
.pspui-adtech-charts-row .fw-chart .fw-chart-breakdown,
.pspui-adtech-charts-row .fw-chart .fw-chart-value-mode,
.pspui-adtech-charts-row .fw-chart .fw-chart-auto-refresh,
.pspui-programmatic-charts-row .fw-chart .fw-chart-breakdown,
.pspui-programmatic-charts-row .fw-chart .fw-chart-value-mode,
.pspui-programmatic-charts-row .fw-chart .fw-chart-auto-refresh {
  background: color-mix(in srgb, #fff 92%, transparent);
  border-color: #e0e3e8;
  color: #5f6368;
}

.pspui-news-overview > .fw-chart .fw-chart-breakdown-select,
.pspui-news-overview > .fw-chart .fw-chart-auto-refresh-select,
.pspui-adtech-overview > .fw-chart .fw-chart-breakdown-select,
.pspui-adtech-overview > .fw-chart .fw-chart-auto-refresh-select,
.pspui-programmatic-overview .fw-chart .fw-chart-breakdown-select,
.pspui-programmatic-overview .fw-chart .fw-chart-auto-refresh-select,
.pspui-adtech-charts-row .fw-chart .fw-chart-breakdown-select,
.pspui-adtech-charts-row .fw-chart .fw-chart-auto-refresh-select,
.pspui-programmatic-charts-row .fw-chart .fw-chart-breakdown-select,
.pspui-programmatic-charts-row .fw-chart .fw-chart-auto-refresh-select {
  background: #fff;
  border-color: #e0e3e8;
  color: #1a1d24;
}

.pspui-news-overview > .fw-chart .fw-chart-value-mode-btn.is-active,
.pspui-adtech-overview > .fw-chart .fw-chart-value-mode-btn.is-active,
.pspui-programmatic-overview .fw-chart .fw-chart-value-mode-btn.is-active,
.pspui-adtech-charts-row .fw-chart .fw-chart-value-mode-btn.is-active,
.pspui-programmatic-charts-row .fw-chart .fw-chart-value-mode-btn.is-active {
  background: #fff;
  color: #1a1d24;
  box-shadow: 0 0 0 1px #e0e3e8;
}

.pspui-programmatic-overview .fw-chart .chart-axis text,
.pspui-programmatic-overview .fw-chart .chart-axis-label,
.pspui-programmatic-overview .fw-chart .chart-legend-text,
.pspui-programmatic-charts-row .fw-chart .chart-axis text,
.pspui-programmatic-charts-row .fw-chart .chart-axis-label,
.pspui-programmatic-charts-row .fw-chart .chart-legend-text,
.pspui-adtech-charts-row .fw-chart .chart-axis text,
.pspui-adtech-charts-row .fw-chart .chart-axis-label,
.pspui-adtech-charts-row .fw-chart .chart-legend-text {
  fill: #5f6368;
}

.pspui-programmatic-overview .fw-chart .chart-axis .domain,
.pspui-programmatic-overview .fw-chart .chart-axis line,
.pspui-programmatic-overview .fw-chart .chart-grid line,
.pspui-programmatic-charts-row .fw-chart .chart-axis .domain,
.pspui-programmatic-charts-row .fw-chart .chart-axis line,
.pspui-programmatic-charts-row .fw-chart .chart-grid line,
.pspui-adtech-charts-row .fw-chart .chart-axis .domain,
.pspui-adtech-charts-row .fw-chart .chart-axis line,
.pspui-adtech-charts-row .fw-chart .chart-grid line {
  stroke: #c5cad3;
}

.pspui-adtech-overview > .pspui-subtopbar {
  margin: -24px -24px 4px;
  padding: 0 24px;
  flex: 0 0 auto;
}

.pspui-adtech-overview > .fw-layout-col,
.pspui-adtech-overview > .pspui-adtech-config {
  flex: 0 0 auto;
}

.pspui-adtech-hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: #6b7280;
}

.pspui-adtech-hint--base {
  color: #4b5563;
}

/* Shared PSPConfig editor chrome (dark forms, inputs, charts).
 * Palette aligned with private Floor/competition explorer. */
.pspui-adtech-surface {
  --bg: #0f1419;
  --bg1: #121a24;
  --bg2: #1a2332;
  --bg3: #243044;
  --panel: #1a2332;
  --panel2: #243044;
  --border: #2d3a4f;
  --text: #e7ecf3;
  --text-dim: #8b9bb4;
  --accent: #3d9cf0;
  --accent2: #5eead4;
  --danger: #f87171;
  --ok: #4ade80;
  --warn: #fbbf24;
  --muted: #8b9bb4;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a3050 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #132a28 0%, transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  box-sizing: border-box;
  gap: 12px;
}

/* Full module pages — fill the main content column */
.pspui-main > .pspui-adtech-surface {
  margin: -24px;
  padding: 24px;
  border-radius: 0;
  min-height: 100%;
}

/* Nested editor island inside Adtech overview */
.pspui-adtech-overview > .pspui-adtech-surface {
  border-radius: 8px;
  padding: 16px;
}

.pspui-adtech-config {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.pspui-adtech-breadcrumb.psp-service-breadcrumb {
  flex: 0 0 auto;
}

.pspui-adtech-subservices-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pspui-adtech-subservices.psp-service-tab-bar {
  flex: 0 0 auto;
}

.pspui-portal-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.pspui-portal-tab-panel .fw-tab-strip,
.pspui-portal-tab-panel__strip {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  background: transparent;
  border: none;
  padding: 0;
}

.pspui-portal-tab-panel .fw-tab-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pspui-portal-tab-panel .fw-tab-btn,
.pspui-portal-tab-panel__tab {
  appearance: none;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 999px;
  background: var(--surface-2, #f4f6f8);
  color: var(--text-dim, #5c6773);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 14px;
  margin: 0;
}

.pspui-portal-tab-panel .fw-tab-btn:hover,
.pspui-portal-tab-panel__tab:hover {
  color: var(--text, #1f2933);
  border-color: var(--border-strong, #b8c2cc);
}

.pspui-portal-tab-panel .fw-tab-btn--active,
.pspui-portal-tab-panel__tab--active {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.pspui-portal-tab-panel__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}


/* Charts + line-item hosts live under PortalTabPanel, not as direct
 * children of .pspui-adtech-overview — so the overview > .fw-layout-* rule
 * does not apply. fw-layout-row/col default to flex:1 which stretches the
 * charts row when the lists below grow (blank space under the graphs). */
.pspui-adops-overview .pspui-adtech-charts-row,
.pspui-adops-overview .pspui-adops-lineitems-host,
.pspui-adtech-charts-row.fw-layout-row,
.pspui-adops-lineitems-host.fw-layout-col {
  flex: 0 0 auto;
  overflow: visible;
  min-height: 0;
  height: auto;
  width: 100%;
  align-self: stretch;
}

.pspui-adops-overview .pspui-adtech-charts-row,
.pspui-adtech-charts-row.fw-layout-row {
  align-items: flex-start;
}

/* Flight calendar sits full-width under graphs (first child of lineitems host) */
.pspui-adops-flight-calendar-slot,
.pspui-adops-lineitems-host > .pspui-adops-flight-calendar-slot {
  flex: 0 0 auto;
  width: 100%;
  align-self: stretch;
}

.pspui-adops-flight-calendar-slot {
  margin-bottom: 8px;
}

.pspui-adops-chain-loader {
  display: none !important;
}

/* ListOf sort controls (framework): "Sort" + field + direction */
.fw-listof-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #f8f9fb;
}

.fw-listof-sort--inline {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
}

.fw-listof-sort__group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  min-width: 0;
}

.fw-listof-sort__caption {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c6773;
  white-space: nowrap;
}

.fw-listof-sort__field,
.fw-listof-sort__dir {
  min-width: 0;
  padding: 5px 8px;
  font-size: 0.8125rem;
  border-radius: 6px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #1a1d24;
}

.fw-listof-sort__field {
  min-width: 7.5rem;
  max-width: 11rem;
}

.fw-listof-sort__dir {
  min-width: 4.25rem;
}

.pspui-adtech-surface .fw-listof-sort:not(.fw-listof-sort--inline) {
  background: var(--bg2, #1a1d26);
  border-color: var(--border, #2e3240);
}

.pspui-adtech-surface .fw-listof-sort__caption {
  color: var(--text-dim, #7a84a0);
}

.pspui-adtech-surface .fw-listof-sort__field,
.pspui-adtech-surface .fw-listof-sort__dir {
  background: var(--bg3, #222630);
  border-color: var(--border, #2e3240);
  color: var(--text, #cdd6e8);
}

/* Detail modal — portal root is dark; never hardcode light-only body text */
.pspui-lineitem-detail-modal.fw-modal {
  width: min(960px, 96vw);
  color: var(--text, #cdd6e8);
  background: var(--bg, #13161c);
}

/* Footer uses display:flex; ensure showFooter:false (hidden attr) actually hides it */
.pspui-lineitem-detail-modal .fw-modal-footer[hidden] {
  display: none !important;
}

.pspui-lineitem-detail-modal .fw-modal-body {
  color: var(--text, #cdd6e8);
  min-height: 0;
}

.pspui-lineitem-detail__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--text, #cdd6e8);
}

.pspui-lineitem-detail__head-name {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}

.pspui-lineitem-detail__am-link {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent, #4a8fe8);
  text-decoration: none;
  white-space: nowrap;
}

.pspui-lineitem-detail__am-link:hover {
  text-decoration: underline;
}

.pspui-lineitem-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text, #cdd6e8);
  max-height: min(70vh, 720px);
  overflow: auto;
  padding: 2px 0;
}

.pspui-lineitem-detail__warn {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(251, 146, 60, 0.12);
  color: #fdba74;
  font-size: 0.8125rem;
}

/* Order summary card */
.pspui-lineitem-detail__order {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
}

.pspui-lineitem-detail__order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pspui-lineitem-detail__order-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__order-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}

@media (max-width: 560px) {
  .pspui-lineitem-detail__order-grid {
    grid-template-columns: 1fr;
  }
}

.pspui-lineitem-detail__order-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pspui-lineitem-detail__order-field-label {
  font-size: 0.7rem;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__order-field-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text, #cdd6e8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metric tiles */
.pspui-lineitem-detail__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .pspui-lineitem-detail__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pspui-lineitem-detail__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
  min-width: 0;
}

.pspui-lineitem-detail__tile-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__tile-value {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #cdd6e8);
  line-height: 1.2;
  word-break: break-word;
}

.pspui-lineitem-detail__tile-hint {
  font-size: 0.7rem;
  color: var(--text-dim, #7a84a0);
  line-height: 1.25;
}

/* Pacing tile reuses list color coding (dark-readable) */
.pspui-lineitem-detail__tile--pacing-under {
  background: rgba(180, 35, 24, 0.15);
  border-color: rgba(180, 35, 24, 0.35);
}

.pspui-lineitem-detail__tile--pacing-under .pspui-lineitem-detail__tile-value {
  color: #f97066;
}

.pspui-lineitem-detail__tile--pacing-on-track {
  background: rgba(6, 118, 71, 0.15);
  border-color: rgba(6, 118, 71, 0.35);
}

.pspui-lineitem-detail__tile--pacing-on-track .pspui-lineitem-detail__tile-value {
  color: #6ce9a6;
}

.pspui-lineitem-detail__tile--pacing-over {
  background: rgba(29, 78, 216, 0.15);
  border-color: rgba(29, 78, 216, 0.35);
}

.pspui-lineitem-detail__tile--pacing-over .pspui-lineitem-detail__tile-value {
  color: #84adff;
}

.pspui-lineitem-detail__tile--pacing-unknown .pspui-lineitem-detail__tile-value {
  color: var(--text-dim, #7a84a0);
}

/* Lifetime bar: start —[fill]— end */
.pspui-lineitem-detail__lifetime {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
}

.pspui-lineitem-detail__lifetime-head {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__lifetime-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) minmax(5.5rem, auto);
  align-items: center;
  gap: 10px;
}

.pspui-lineitem-detail__lifetime-date {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text, #cdd6e8);
  white-space: nowrap;
}

.pspui-lineitem-detail__lifetime-date:last-child {
  text-align: right;
}

.pspui-lineitem-detail__lifetime-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--bg3, #222630);
  border: 1px solid var(--border, #2e3240);
  overflow: hidden;
}

.pspui-lineitem-detail__lifetime-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4a8fe8, #6ea8f0);
  min-width: 0;
  transition: width 0.2s ease;
}

.pspui-lineitem-detail__lifetime-fill--unlimited {
  background: repeating-linear-gradient(
    -45deg,
    #4a8fe8,
    #4a8fe8 6px,
    #6ea8f0 6px,
    #6ea8f0 12px
  );
  opacity: 0.55;
}

.pspui-lineitem-detail__lifetime-pacing {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__lifetime-pacing--under {
  color: #f97066;
}

.pspui-lineitem-detail__lifetime-pacing--on-track {
  color: #6ce9a6;
}

.pspui-lineitem-detail__lifetime-pacing--over {
  color: #84adff;
}

.pspui-lineitem-detail__lifetime-pacing--unknown {
  color: var(--text-dim, #7a84a0);
}

/* Detail tabs: Overview | Creatives (order + metrics stay fixed above) */
.pspui-lineitem-detail__tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pspui-lineitem-detail__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
  width: fit-content;
  max-width: 100%;
}

.pspui-lineitem-detail__tab {
  appearance: none;
  margin: 0;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-dim, #7a84a0);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.pspui-lineitem-detail__tab:hover {
  color: var(--text, #cdd6e8);
  background: rgba(255, 255, 255, 0.04);
}

.pspui-lineitem-detail__tab.is-active {
  color: var(--text, #cdd6e8);
  background: var(--bg3, #222630);
  box-shadow: inset 0 0 0 1px var(--border, #2e3240);
}

.pspui-lineitem-detail__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pspui-lineitem-detail__panel[hidden] {
  display: none !important;
}

/* Creatives tab — lazy-loaded previews */
.pspui-lineitem-detail__creatives {
  min-width: 0;
}

.pspui-lineitem-detail__creatives-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
  color: var(--text-dim, #7a84a0);
  font-size: 0.8125rem;
}

.pspui-lineitem-detail__creatives-status--error {
  color: #f97066;
  border-color: rgba(180, 35, 24, 0.35);
  background: rgba(180, 35, 24, 0.12);
}

.pspui-lineitem-detail__creatives-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Left: info + graph · Right: scaled preview (no scrollbars) */
.pspui-lineitem-detail__creative-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(160px, 0.85fr);
  gap: 12px 14px;
  align-items: stretch;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
  min-width: 0;
}

@media (max-width: 720px) {
  .pspui-lineitem-detail__creative-card {
    grid-template-columns: 1fr;
  }
}

.pspui-lineitem-detail__creative-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.pspui-lineitem-detail__creative-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 160px;
  /* Stretch with left column so the iframe has a stable fit box. */
  align-self: stretch;
}

.pspui-lineitem-detail__creative-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pspui-lineitem-detail__creative-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.pspui-lineitem-detail__creative-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text, #cdd6e8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.pspui-lineitem-detail__creative-type {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #84adff;
  background: rgba(29, 78, 216, 0.18);
  border: 1px solid rgba(29, 78, 216, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pspui-lineitem-detail__creative-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  font-size: 0.7rem;
  color: var(--text-dim, #7a84a0);
  font-variant-numeric: tabular-nums;
}

.pspui-lineitem-detail__creative-am-link {
  font-size: 0.7rem;
}

.pspui-lineitem-detail__creative-meta-sep {
  opacity: 0.7;
}

/* Targeting tab — temporary raw dump */
.pspui-lineitem-detail__targeting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pspui-lineitem-detail__targeting-head {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__targeting-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__targeting-dump {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg3, #222630);
  border: 1px solid var(--border, #2e3240);
  color: var(--text, #cdd6e8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(55vh, 520px);
  overflow: auto;
}

.pspui-lineitem-detail__creative-fields {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg3, #222630);
  border: 1px solid var(--border, #2e3240);
  font-size: 0.75rem;
}

.pspui-lineitem-detail__creative-field-label {
  margin: 0;
  color: var(--text-dim, #7a84a0);
  font-weight: 600;
  line-height: 1.35;
}

.pspui-lineitem-detail__creative-field-value {
  margin: 0;
  color: var(--text, #cdd6e8);
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pspui-lineitem-detail__creative-field-link {
  color: #84adff;
  text-decoration: none;
}

.pspui-lineitem-detail__creative-field-link:hover {
  text-decoration: underline;
}

.pspui-lineitem-detail__creative-field-code {
  display: block;
  max-height: 4.5rem;
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--text-dim, #a8b0c4);
}

.pspui-lineitem-detail__creative-frame-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
  min-width: 0;
  /* No scrollbars — iframe is zoomed via transform to fit. */
  overflow: hidden;
  border-radius: 6px;
  background: #0d0f14;
  border: 1px solid var(--border, #2e3240);
  padding: 8px;
}

.pspui-lineitem-detail__creative-frame-scale {
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
}

.pspui-lineitem-detail__creative-frame {
  display: block;
  border: 0;
  background: #fff;
  /* Natural size set in JS; visual size via transform: scale(). */
  max-width: none;
  transform-origin: top left;
}

.pspui-lineitem-detail__creative-preview-link {
  font-size: 0.75rem;
  color: #84adff;
  text-decoration: none;
  align-self: flex-start;
  flex: 0 0 auto;
}

.pspui-lineitem-detail__creative-preview-link:hover {
  text-decoration: underline;
}

.pspui-lineitem-detail__creative-chart-host {
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid var(--border, #2e3240);
  background: var(--bg3, #222630);
  padding: 6px 8px 4px;
  overflow: hidden;
}

.pspui-lineitem-detail__creative-chart-host .pspui-lineitem-detail__creative-chart,
.pspui-lineitem-detail__creative-chart-host .fw-chart {
  min-height: 0;
}

.pspui-lineitem-detail__creative-chart-host .pspui-lineitem-detail__chart-error {
  margin: 8px;
  font-size: 0.78rem;
  color: #f97066;
}

/* Comments form (schema from updateLineItemNotes endpoint) */
.pspui-lineitem-detail__comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
}

.pspui-lineitem-detail__comments-head {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__comments-form-host {
  min-width: 0;
}

.pspui-lineitem-detail__notes-form,
.pspui-lineitem-detail__comments-form-host .fw-form {
  color: var(--text, #cdd6e8);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}

.pspui-lineitem-detail__comments-form-host .fw-form-label,
.pspui-lineitem-detail__comments-form-host .fw-form-section-title {
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__comments-form-host .fw-field-row {
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
}

.pspui-lineitem-detail__comments-form-host .fw-field-widget {
  width: 100%;
  min-width: 0;
  display: block;
}

.pspui-lineitem-detail__comments-form-host textarea,
.pspui-lineitem-detail__comments-form-host .fw-html-input,
.pspui-lineitem-detail__comments-form-host .fw-json-textarea,
.pspui-lineitem-detail__comments-form-host .fw-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: min(100%, 18rem);
  min-height: 8rem;
  box-sizing: border-box;
  color: var(--text, #cdd6e8);
  background: var(--bg3, #222630);
  border: 1px solid var(--border, #2e3240);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  resize: both;
}

.pspui-lineitem-detail__comments-form-host input.fw-text-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: var(--text, #cdd6e8);
  background: var(--bg3, #222630);
  border: 1px solid var(--border, #2e3240);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
}

.pspui-lineitem-detail__form-error {
  margin: 0;
  padding: 8px 0;
  font-size: 0.8125rem;
  color: #f97066;
}

/* Detail impressions charts (telemetry count + Directo sum) */
.pspui-lineitem-detail__charts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pspui-lineitem-detail__charts-head {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.pspui-lineitem-detail__charts-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .pspui-lineitem-detail__charts-row {
    grid-template-columns: 1fr;
  }
}

.pspui-lineitem-detail__chart-host {
  min-width: 0;
  min-height: 240px;
  border-radius: 8px;
  border: 1px solid var(--border, #2e3240);
  background: var(--bg2, #1a1d25);
  overflow: hidden;
}

.pspui-lineitem-detail__chart-host > .fw-chart,
.pspui-lineitem-detail__chart {
  width: 100%;
  min-height: 240px;
  flex: 0 0 auto;
  --bg: var(--bg2, #1a1d25);
  --bg1: var(--bg2, #1a1d25);
  --bg2: #1a1d25;
  --bg3: #222630;
  --border: #2e3240;
  --text: #cdd6e8;
  --text-dim: #7a84a0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.pspui-lineitem-detail__chart-error {
  margin: 0;
  padding: 16px;
  font-size: 0.8125rem;
  color: #f97066;
}

.pspui-adtech-editor {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Roles/Sizes picker — scroll inside the list, not the whole editor pane */
.pspui-adtech-editor {
  overflow: visible;
}

/* Header bidding orders — one row per GAM order, its adapter edited in place. */
.pspui-hb-orders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pspui-hb-orders__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--psp-border, #2a2a2a);
}

.pspui-hb-orders__order {
  flex: 1 1 40%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pspui-hb-orders__advertiser {
  flex: 0 1 25%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .75;
}

.pspui-hb-orders__adapter {
  flex: 0 0 auto;
  margin-left: auto;
}

.pspui-adtech-config .psp-classmap-editor__sidebar {
  max-height: min(72vh, calc(100vh - 260px));
}

.pspui-adtech-surface .fw-form,
.pspui-adtech-surface .fw-layered-form {
  max-width: 100%;
}

.pspui-adtech-surface .fw-form-section-title,
.pspui-adtech-surface .fw-form-label,
.pspui-adtech-surface .fw-layered-form__label {
  color: var(--text);
}

.pspui-adtech-surface .fw-form-section,
.pspui-adtech-surface .fw-layered-form__section {
  border-color: var(--border);
}

.pspui-adtech-surface input,
.pspui-adtech-surface select,
.pspui-adtech-surface textarea,
.pspui-adtech-surface .fw-input,
.pspui-adtech-surface .fw-select,
.pspui-adtech-surface .fw-text-input,
.pspui-adtech-surface .fw-html-input,
.pspui-adtech-surface .fw-json-textarea,
.pspui-adtech-surface .fw-select-input {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
  color-scheme: dark;
}

/* Multi-line fields in adtech surfaces: full cell width, newlines, free resize */
.pspui-adtech-surface textarea,
.pspui-adtech-surface .fw-html-input,
.pspui-adtech-surface .fw-json-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: min(100%, 16rem);
  min-height: 6.5rem;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  resize: both;
  line-height: 1.45;
}

.pspui-adtech-surface .fw-field-widget > textarea,
.pspui-adtech-surface .fw-field-widget > .fw-html-input,
.pspui-adtech-surface .fw-field-widget > .fw-json-textarea {
  flex: 1 1 100%;
  min-width: 0;
}

.pspui-adtech-surface .fw-btn {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
}

.pspui-adtech-surface .fw-btn:hover {
  border-color: var(--accent);
}

.pspui-adtech-surface .fw-btn--primary,
.pspui-adtech-surface .fw-btn-primary {
  background: linear-gradient(180deg, #3d9cf0, #2b7fc9);
  border: none;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.pspui-adtech-surface .fw-btn--primary:hover,
.pspui-adtech-surface .fw-btn-primary:hover {
  filter: brightness(1.08);
}

/* Portal tabs on the adtech surface — dark explorer chrome */
.pspui-adtech-surface .pspui-portal-tab-panel .fw-tab-btn,
.pspui-adtech-surface .pspui-portal-tab-panel__tab {
  background: var(--panel2, #243044);
  border-color: var(--border, #2d3a4f);
  color: var(--muted, #8b9bb4);
}
.pspui-adtech-surface .pspui-portal-tab-panel .fw-tab-btn:hover,
.pspui-adtech-surface .pspui-portal-tab-panel__tab:hover {
  color: var(--text, #e7ecf3);
  border-color: var(--accent, #3d9cf0);
}
.pspui-adtech-surface .pspui-portal-tab-panel .fw-tab-btn--active,
.pspui-adtech-surface .pspui-portal-tab-panel__tab--active {
  background: linear-gradient(180deg, #3d9cf0, #2b7fc9);
  border-color: transparent;
  color: #fff;
}

/* Charts on adtech surface: explorer panel look */
.pspui-adtech-surface .fw-chart {
  background: var(--panel, #1a2332);
  border-color: var(--border, #2d3a4f);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.pspui-adtech-surface .fw-chart-title {
  color: var(--text, #e7ecf3);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}
.pspui-adtech-surface .fw-chart-header {
  border-bottom-color: var(--border, #2d3a4f);
}
.pspui-adtech-surface .fw-chart-breakdown-select,
.pspui-adtech-surface .fw-chart-auto-refresh-select,
.pspui-adtech-surface .fw-chart-action-btn {
  background: var(--panel2, #243044);
  border-color: var(--border, #2d3a4f);
  color: var(--text, #e7ecf3);
}

.pspui-adtech-surface .psp-section-banner {
  background: rgba(74, 143, 232, 0.1);
  border-color: var(--border);
  color: var(--text-dim);
}

.pspui-adtech-surface .pspui-page-title {
  color: var(--text);
}

.pspui-adtech-surface .pspui-section-heading {
  color: var(--text);
}

.pspui-adtech-surface .pspui-adtech-hint {
  color: var(--text-dim);
}

.pspui-adtech-surface code {
  background: var(--bg3);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.pspui-adtech-surface > .pspui-subtopbar,
.pspui-adtech-surface .pspui-subtopbar {
  background: var(--bg2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.pspui-adtech-surface .pspui-subtopbar__label {
  color: var(--text-dim);
}

.pspui-adtech-surface .pspui-subtopbar__select {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
  color-scheme: dark;
}

.pspui-adtech-surface .pspui-subtopbar__value {
  color: var(--text-dim);
}

.pspui-adtech-surface .fw-chart .chart-axis text,
.pspui-adtech-surface .fw-chart .chart-axis-label,
.pspui-adtech-surface .fw-chart .chart-legend-text {
  fill: var(--text-dim);
}

.pspui-adtech-surface .fw-chart .chart-axis .domain,
.pspui-adtech-surface .fw-chart .chart-axis line,
.pspui-adtech-surface .fw-chart .chart-grid line {
  stroke: var(--border);
}

.pspui-adtech-surface .fw-chart-tooltip {
  color: var(--text);
}

.pspui-adtech-surface .fw-chart-tooltip strong {
  color: var(--text);
}

.pspui-adtech-surface .fw-data-grid {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pspui-adtech-overview .pspui-adtech-hint {
  color: var(--text-dim);
}

.pspui-adtech-overview .pspui-adtech-hint--base {
  color: var(--text);
}

.pspui-ssp-provider {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.pspui-ssp-provider-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pspui-ssp-provider-panel__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pspui-adtech-config-mgmt-page {
  gap: 16px;
  max-width: 100%;
  width: 100%;
}

.pspui-management-publishers-page,
.pspui-management-update-page,
.pspui-management-deployment-page {
  gap: 16px;
  max-width: 100%;
  width: 100%;
}

.pspui-main .psp-section-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #f0d78c;
  color: #5c4a1a;
  font-size: 13px;
}

.pspui-news-overview {
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

/* fw-layout-col children default to flex:1 — keep overview blocks content-sized */
.pspui-news-overview > .fw-chart,
.pspui-news-overview > .pspui-kpi-row,
.pspui-news-overview > .fw-layout-row,
.pspui-news-overview > .fw-layout-col {
  flex: 0 0 auto;
}

.pspui-kpi-row,
.pspui-kpi-row.fw-layout-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 8px;
  width: 100%;
  align-self: stretch;
  overflow: visible;
}

.pspui-main .fw-metric {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
  max-width: 220px;
  background: #fff;
  border-color: #e0e3e8;
}

.pspui-main .pspui-kpi-row > .fw-metric {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: auto;
}

.pspui-main .fw-metric-label {
  color: #5f6368;
}

.pspui-main .fw-metric-value {
  color: #1a1d24;
}

.pspui-main .fw-metric-subtitle {
  color: #80868b;
}

/* Charts sit on a light page — soften axis ticks and darken tooltip text */
.pspui-main .fw-chart .chart-axis text,
.pspui-main .fw-chart .chart-axis-label {
  fill: #9aa0a6;
}

.pspui-main .fw-chart .chart-axis .domain,
.pspui-main .fw-chart .chart-axis line,
.pspui-main .fw-chart .chart-grid line {
  stroke: #d8dce3;
}

.pspui-main .fw-chart-tooltip {
  color: #3c4043;
}

.pspui-main .fw-chart-tooltip strong {
  color: #1a1d24;
  font-weight: 600;
}

/* ── Articles section ─────────────────────────────────────────────────────── */

.pspui-articles-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
}

.pspui-articles-view > .fw-chart,
.pspui-articles-view > .fw-layout-row,
.pspui-articles-view > .fw-layout-col,
.pspui-articles-view > .fw-data-grid {
  flex: 0 0 auto;
}

.pspui-articles-view > .fw-chart {
  width: 100%;
  min-height: 360px;
}

.pspui-section-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1d24;
  margin: 8px 0 0;
}

.pspui-articles-chart.fw-chart {
  background: #fff;
  border-color: #e0e3e8;
}

.pspui-main .pspui-article-grid.fw-data-grid {
  width: 100%;
  background: #fff;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pspui-main .pspui-article-grid.fw-data-grid thead {
  background: #f8f9fb;
  border-bottom: 1px solid #e0e3e8;
}

.pspui-main .pspui-article-grid.fw-data-grid th {
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px;
}

.pspui-main .pspui-article-grid.fw-data-grid td {
  color: #1a1d24;
  font-size: 13px;
  padding: 10px 12px;
  border-top: 1px solid #eef0f4;
  vertical-align: middle;
}

.pspui-main .pspui-article-grid.fw-data-grid tbody tr:hover {
  background: #f4f6f9;
}

.pspui-main .pspui-article-grid.fw-data-grid td[data-key="thumb"] {
  width: 56px;
  padding: 8px;
}

.pspui-main .pspui-article-grid.fw-data-grid td[data-key="title"] {
  width: 42%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pspui-main .pspui-article-grid--by-section td[data-key="section"] {
  width: 14%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5f6368;
  font-weight: 500;
}

.pspui-main .pspui-article-grid.fw-data-grid td[data-key="author"] {
  width: 16%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pspui-main .pspui-article-grid.fw-data-grid td[data-key="publishedAt"] {
  width: 140px;
  white-space: nowrap;
  color: #5f6368;
}

.pspui-main .pspui-article-grid.fw-data-grid td[data-key="avgVisitTime"] {
  width: 88px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pspui-main .pspui-article-grid.fw-data-grid td[data-key="pageViews"] {
  width: 72px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pspui-main .pspui-article-grid.fw-data-grid th:last-child,
.pspui-main .pspui-article-grid.fw-data-grid td[data-key="pageViews"] {
  padding-right: 16px;
}

.pspui-article-thumb {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #eef0f4;
  border: 1px dashed #c5cad3;
}

/* ── Section context bar (embedded in module panels) ─────────────────────── */

.pspui-subtopbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding: 0 20px;
  background: #fff;
  color: #1a1d24;
  border-bottom: 1px solid #e0e3e8;
}

.pspui-subtopbar__strip {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pspui-subtopbar__field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.pspui-subtopbar__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.pspui-subtopbar__select {
  min-width: 160px;
  padding: 6px 10px;
  font-size: 13px;
  color: #1a1d24;
  background: #f4f5f7;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.pspui-subtopbar__combobox {
  min-width: 200px;
}

.pspui-subtopbar__field--country,
.pspui-subtopbar__field--adunit,
.pspui-subtopbar__field--position {
  position: relative;
}

.pspui-subtopbar__value {
  font-size: 14px;
  font-weight: 500;
  color: #1a1d24;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.pspui-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--pspui-topbar-height);
  padding: 0 20px;
  background: var(--pspui-topbar-bg);
  color: var(--pspui-topbar-fg);
  border-bottom: 1px solid #2a2f3a;
  overflow: visible;
  position: relative;
  z-index: 50;
}

.pspui-logo {
  flex: 0 0 auto;
  font-family: 'Zen Dots', cursive;
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--pspui-logo-color);
  user-select: none;
}

.pspui-topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.pspui-topbar__optional {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: visible;
}

.pspui-topbar__core {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.pspui-topbar__field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pspui-topbar__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pspui-topbar-muted);
  white-space: nowrap;
}

.pspui-topbar__select {
  min-width: 120px;
  max-width: 200px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--pspui-topbar-fg);
  background: #2a2f3a;
  border: 1px solid #3d4450;
  border-radius: 6px;
}

.pspui-topbar__site-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--pspui-topbar-fg);
  white-space: nowrap;
}

.pspui-topbar__user {
  font-size: 14px;
  font-weight: 500;
  color: var(--pspui-topbar-fg);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0 6px 12px;
  border-left: 1px solid #3d4450;
}

.pspui-topbar__user:hover {
  color: #fff;
  text-decoration: underline;
}

.pspui-topbar__btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pspui-topbar-fg);
  background: #2a2f3a;
  border: 1px solid #3d4450;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.pspui-topbar__btn:hover {
  background: #343b48;
}

.pspui-topbar__btn--apply {
  background: #3d5afe;
  border-color: #3d5afe;
  color: #fff;
}

.pspui-topbar__btn--apply:hover {
  background: #536dfe;
}

.pspui-topbar__date-range {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pspui-topbar__range-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #4a5160;
  border-radius: 6px;
  background: #2a2f3a;
  overflow: visible;
}

.pspui-topbar__range-display {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--pspui-topbar-fg);
  white-space: nowrap;
  max-width: min(36vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-right: 1px solid #4a5160;
}

.pspui-topbar__range-display:hover {
  color: #fff;
  background: #343b48;
}

.pspui-topbar__range-picker {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  overflow: visible;
}

.pspui-topbar__btn--set-dates {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
  border: none;
  border-radius: 0 5px 5px 0;
  background: transparent;
}

.pspui-topbar__btn--set-dates:hover {
  background: #343b48;
}

.pspui-topbar__range-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  width: min(92vw, 420px);
  padding: 12px;
  background: #2a2f3a;
  border: 1px solid #3d4450;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  overflow: visible;
  box-sizing: border-box;
}

.pspui-topbar__range-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #3d4450;
}

.pspui-topbar__range-quick-btn {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid #3d4450;
  border-radius: 4px;
  background: #1a1d24;
  color: var(--pspui-topbar-fg);
  cursor: pointer;
}

.pspui-topbar__range-quick-btn:hover {
  border-color: #536dfe;
  background: #343b48;
}

.pspui-topbar__range-custom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.pspui-topbar__range-inputs {
  width: 100%;
}

.pspui-topbar__range-inputs .fw-datetime-interval {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.pspui-topbar__range-inputs .fw-datetime-interval__quick {
  display: none;
}

.pspui-topbar__range-inputs .fw-datetime-interval__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pspui-topbar__range-inputs .fw-datetime-interval__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pspui-topbar-muted);
}

.pspui-topbar__range-inputs input[type="datetime-local"] {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  background: #1a1d24;
  border: 1px solid #3d4450;
  border-radius: 4px;
  color: var(--pspui-topbar-fg);
  color-scheme: dark;
  cursor: pointer;
}

.pspui-topbar__range-inputs input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: invert(0.85);
}

.pspui-topbar__range-actions {
  display: flex;
  justify-content: flex-end;
}

.pspui-topbar__auto-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pspui-topbar__select--refresh {
  min-width: 4.5rem;
}

.pspui-topbar__section-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  padding: 4px 6px 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  line-height: 1.2;
}

/* Author display:inline-flex beats the UA [hidden] { display:none } rule, so the
   badge would stay visible after _syncSectionBadge sets badge.hidden = true.
   Force hide when the attribute is present (same pattern as the loading/status
   columns above). */
.pspui-topbar__section-badge[hidden] {
  display: none !important;
}

.pspui-topbar__section-badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pspui-topbar-fg);
}

.pspui-topbar__section-badge-clear {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--pspui-topbar-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}

.pspui-topbar__section-badge-clear:hover {
  color: var(--pspui-topbar-fg);
}

/* Site map modal — graph should fill the dialog, not sit in a short strip */
.pspui-sitemap-modal {
  width: min(96vw, 1100px);
  height: min(88vh, 860px);
  max-height: 88vh;
}

.pspui-sitemap-modal .fw-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px;
}

.pspui-sitemap-modal__graph {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pspui-sitemap-modal__graph > .fw-tgraph-container {
  flex: 1 1 auto;
  min-height: 0;
}

/* Login page */
body.pspui-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--text, #cdd6e8);
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(74, 143, 232, 0.18), transparent 60%),
    var(--bg, #13161c);
}

body.pspui-login #app {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 64px;
}

.pspui-auth-shell {
  gap: 16px;
  max-width: 480px;
}

.user-login-widget {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  margin: 40px auto;
  padding: 32px 28px;
  border: 1px solid var(--border, #2e3240);
  border-radius: 12px;
  background: var(--bg2, #1a1d25);
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.user-login-title {
  margin: 0;
  font-family: var(--font, 'Segoe UI', system-ui, sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text, #e8eaed);
}

.user-login-subtitle {
  margin: -6px 0 6px;
  font-size: 0.85rem;
  color: var(--text-dim, #7a84a0);
}

.user-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
}

.user-login-field input {
  padding: 10px 12px;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text, #cdd6e8);
  background: var(--bg3, #222630);
  border: 1px solid var(--border, #2e3240);
  border-radius: var(--radius, 6px);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-login-field input::placeholder {
  color: var(--text-dim, #7a84a0);
  opacity: 0.6;
}

.user-login-field input:focus {
  border-color: var(--accent, #4a8fe8);
  box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.25);
}

.user-login-submit {
  margin-top: 6px;
  padding: 11px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent, #4a8fe8);
  border: none;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.user-login-submit:hover {
  background: var(--accent2, #6ab6ff);
}

.user-login-submit:active {
  transform: translateY(1px);
}

.user-login-submit:focus-visible {
  outline: 2px solid var(--accent2, #6ab6ff);
  outline-offset: 2px;
}

.user-login-error {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--danger, #e85555);
  background: rgba(232, 85, 85, 0.1);
  border: 1px solid rgba(232, 85, 85, 0.35);
  border-radius: var(--radius, 6px);
}

.pspui-subtopbar--programmatic .pspui-subtopbar__strip {
  flex-wrap: wrap;
  row-gap: 8px;
}

.pspui-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.pspui-panel .pspui-programmatic-charts-row > .fw-chart {
  flex: 1;
  min-width: 320px;
}

/* A chart row: chart hosts stretched beside a column of KPI tiles. */
.pspui-chart-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.pspui-chart-host {
  flex: 1 1 0;
  min-width: 280px;
}

.pspui-chart-host > .fw-chart {
  width: 100%;
}

.pspui-kpi-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 200px;
  width: 200px;
}

.pspui-kpi.fw-metric {
  min-height: 96px;
}

.pspui-subtopbar--programmatic-overview .pspui-subtopbar__strip {
  flex-wrap: wrap;
  row-gap: 8px;
}

.pspui-programmatic-charts-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  flex: 0 0 auto;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.pspui-programmatic-charts-row > * {
  flex: 1;
  min-width: 320px;
}

.pspui-programmatic-charts-row > .fw-chart {
  flex: 1;
  min-width: 320px;
}

.pspui-adtech-charts-row {
  gap: 16px;
  align-items: stretch;
}

/* Row gap owns spacing — fw-chart's default margin-bottom piles under packages. */
.pspui-adtech-charts-row .fw-chart {
  margin-bottom: 0;
}

.pspui-adtech-charts-row > * {
  flex: 1 1 0;
  min-width: 320px;
  min-height: 0;
  align-self: stretch;
}

.pspui-adtech-charts-row > .fw-chart,
.pspui-adtech-charts-row > .pspui-service-slot-host,
.pspui-adtech-charts-row > .pspui-service-slot-shell,
.pspui-adtech-charts-row > .pspui-gpt-gam-chart {
  flex: 1 1 0;
  min-width: 320px;
  margin-bottom: 0;
}

/* After package mount: layout-only (no second card). */
.pspui-service-slot-host {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  border: none !important;
  background: transparent !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Loading shell keeps fw-chart chrome; only kill outer margin so heights match peers. */
.pspui-adtech-charts-row > .pspui-service-slot-shell.fw-chart {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.pspui-service-slot-host > .pspui-gpt-gam-chart,
.pspui-service-slot-host > .fw-chart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Package shell: transparent host for data-host children — no min-height
 * (that stacked with the child chart and made the slot taller than peers). */
.pspui-gpt-gam-chart {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

.pspui-gpt-gam-chart > .fw-chart {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

/* GAM unfilled impressions table on Adtech overview */
.pspui-adtech-unfilled-section {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.pspui-adtech-unfilled-section .pspui-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1a1d24);
  margin: 0 0 4px;
}

.pspui-adtech-unfilled-grid {
  width: 100%;
  overflow: auto;
  max-height: 420px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e2e5eb);
  border-radius: 8px;
}

/* ── Publisher → Alerts (AlertContactGroups) ─────────────────────────────── */
.pspui-publisher-alerts-page { display: flex; flex-direction: column; gap: 18px; }

.pspui-alerts__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border, #2a3550);
  border-radius: 8px;
  background: var(--surface-2, rgba(255, 255, 255, 0.02));
}

.pspui-alerts__section-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text, #cdd6e8); }
.pspui-alerts__hint { margin: 0; font-size: 12px; color: var(--text-dim); }

.pspui-alerts__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* One topic per horizontal line; its two levels (Notice/Alert) side by side. */
.pspui-alerts__channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pspui-alerts__topic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border, #2a3550);
  border-radius: 6px;
}

.pspui-alerts__topic-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--text, #cdd6e8); }

/* The ListOf direction:"row" makes its rows host a flex row; add gap + alignment.
   flex-wrap (set by the widget) drops the boxes to a new line on narrow screens. */
.pspui-alerts__levels .fw-listof-rows {
  gap: 12px;
  align-items: flex-start;
}

/* Each level is a titled box holding its plain form. */
.pspui-alerts__channel {
  flex: 1 1 260px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border, #2a3550);
  border-radius: 6px;
  background: var(--surface-2, rgba(255, 255, 255, 0.02));
}

.pspui-alerts__channel-title {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Flat form-control styling for this section — the portal has no global .fw-input
   base rule, so text inputs otherwise fall back to the browser's embossed default.
   Recipe intended to be promoted to a single global base during the CSS pass. */
.pspui-publisher-alerts-page .fw-input,
.pspui-publisher-alerts-page textarea.fw-input,
.pspui-publisher-alerts-page .fw-select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  color: var(--text, #cdd6e8);
  background: var(--bg3, #12151c);
  border: 1px solid var(--border, #2a3550);
  border-radius: 6px;
  padding: 6px 9px;
}

.pspui-publisher-alerts-page .fw-select {
  /* keep a native disclosure affordance since appearance is reset */
  appearance: auto;
  -webkit-appearance: auto;
}

.pspui-publisher-alerts-page .fw-input:focus,
.pspui-publisher-alerts-page textarea.fw-input:focus,
.pspui-publisher-alerts-page .fw-select:focus {
  outline: none;
  border-color: var(--accent, #4a90d9);
}

.pspui-publisher-alerts-page textarea.fw-input { min-height: 5rem; resize: vertical; }

.pspui-alerts__channel-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

.pspui-alerts__field { display: flex; flex-direction: column; gap: 4px; }
.pspui-alerts__field-label { font-size: 12px; font-weight: 600; color: var(--text, #cdd6e8); }

.pspui-alerts__actions { display: flex; gap: 8px; margin-top: 4px; }

.pspui-alerts__status { font-size: 13px; min-height: 1em; }
.pspui-alerts__status--ok { color: var(--success, #4acc7a); }
.pspui-alerts__status--error { color: var(--danger, #e85555); }
.pspui-alerts__status--saving { color: var(--text-dim); }

/* ── Chart annotations (DateHistogram base widget) ───────────────────────── */
.fw-chart-annotations-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 2px 2px;
  font-size: 12px;
}
.fw-chart-annotations-current { color: var(--text-dim); min-width: 10rem; }
.fw-chart-annotations-input { min-width: 12rem; }
.fw-chart-annotation__line { stroke: var(--accent, #4a90d9); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.85; pointer-events: none; }
.fw-chart-annotation__dot { fill: var(--accent, #4a90d9); }
.fw-chart-annotation--pending .fw-chart-annotation__line { stroke: var(--warning, #e0a030); }
.fw-chart-annotation--pending .fw-chart-annotation__dot { fill: var(--warning, #e0a030); }

/* Chart annotations — list modal */
.fw-annotations-search { width: 100%; margin-bottom: 8px; }
.fw-annotations-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.fw-annotations-list__row {
  display: grid;
  grid-template-columns: 11rem 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border, #2a3550);
  border-radius: 6px;
}
.fw-annotations-list__time { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 12px; }
.fw-annotations-list__text { color: var(--text, #cdd6e8); }
.fw-annotations-list__user { color: var(--text-dim); font-size: 12px; }
.fw-annotations-list__empty { color: var(--text-dim); font-size: 13px; margin: 8px 0; }

/* DictionaryView / DictionaryKeyList — mirrors the classmap-editor sidebar look. */
.fw-dictlist { display: flex; flex-direction: column; gap: 8px; width: 220px; min-width: 180px; align-self: start; }
.fw-dictlist-search, .fw-dictlist-newkey {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--border, #2e3240); border-radius: 6px;
    background: var(--surface-2, rgba(255,255,255,0.03)); color: var(--text, #cdd6e8); font: inherit;
}
.fw-dictlist-search::placeholder, .fw-dictlist-newkey::placeholder { color: var(--text-dim, #7a84a0); }
.fw-dictlist-search:focus, .fw-dictlist-newkey:focus { outline: none; border-color: var(--accent, #4a8fe8); }
.fw-dictlist-addrow { display: flex; gap: 6px; }
.fw-dictlist-add {
    flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--border, #2e3240); border-radius: 6px;
    background: transparent; color: var(--text, #cdd6e8); cursor: pointer; font: inherit;
}
.fw-dictlist-add:hover { border-color: var(--accent, #4a8fe8); color: var(--accent, #4a8fe8); }
.fw-dictlist-list {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 420px;
    overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border, #2e3240); border-radius: 6px;
    list-style: none; margin: 0; padding: 0;
}
.fw-dictlist-item { display: flex; align-items: center; border-bottom: 1px solid var(--border, #2e3240); }
.fw-dictlist-item:last-child { border-bottom: none; }
.fw-dictlist-item:hover { background: rgba(255,255,255,0.04); }
.fw-dictlist-item.active { background: rgba(74,143,232,0.14); box-shadow: inset 3px 0 0 var(--accent, #4a8fe8); }
.fw-dictlist-label {
    flex: 1 1 auto; display: block; padding: 10px 12px; border: none; background: transparent;
    color: var(--text, #cdd6e8); text-align: left; cursor: pointer; font: inherit; font-size: 13px;
    font-weight: 600; word-break: break-word;
}
.fw-dictlist-del {
    flex: 0 0 auto; margin-right: 6px; width: 22px; height: 22px; border: none; border-radius: 4px;
    background: transparent; color: var(--text-dim, #7a84a0); cursor: pointer; font-size: 16px; line-height: 1;
}
.fw-dictlist-del:hover { color: #e06c75; background: rgba(224,108,117,0.12); }
.fw-dictlist-empty { margin: 0; padding: 14px 12px; font-size: 13px; color: var(--text-dim, #7a84a0); text-align: center; list-style: none; }
/* "selector" visualization of a DictionaryView — a compact horizontal chip row
   (e.g. the config picker). Same widget/data as the sidebar list, different layout. */
.fw-dictlist--selector { width: auto; min-width: 0; flex-direction: row; align-items: center; gap: 0; }
.fw-dictlist--selector .fw-dictlist-list {
    flex-direction: row; flex-wrap: wrap; gap: 6px; max-height: none; overflow: visible;
    border: none; border-radius: 0;
}
.fw-dictlist--selector .fw-dictlist-item { border: 1px solid var(--border, #2e3240); border-radius: 6px; }
.fw-dictlist--selector .fw-dictlist-item:hover { background: transparent; border-color: var(--accent, #4a8fe8); }
.fw-dictlist--selector .fw-dictlist-item.active { background: rgba(74,143,232,0.14); border-color: var(--accent, #4a8fe8); box-shadow: none; }
.fw-dictlist--selector .fw-dictlist-label { padding: 6px 12px; font-weight: 600; }
.fw-dictlist--selector .fw-dictlist-item.active .fw-dictlist-label { color: var(--accent, #4a8fe8); }

/* Section config-selector bar (Gexp, etc.) — label + inline DictionaryView selector. */
.pspui-config-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.pspui-config-bar-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim, #7a84a0); }



/* ---------------------------------------------------------------------------
 * Listing chrome: a table with a header row, and the dialog that edits a row.
 *
 * Lives here because six widgets across three models draw one — the four Publisher
 * management widgets and the two GPT adunit ones.
 *
 * WidgetPackageLoader fetches a widget's `<Name>Widget.css` sibling and injects it when
 * that widget mounts, so a rule in a package stylesheet exists only while its own widget
 * is on the page. GptAdunitAssignmentsWidget has no stylesheet and was drawing itself
 * with `pspui-gexp-config-mgmt__*` and `pspui-gexp-versions__*`, which are in
 * GexpConfigManagementWidget.css — a widget that is never mounted on the SSP page. So
 * `fw-table__row` had no `display: grid` there and every cell fell back to a block.
 * Anything a second widget draws belongs here, where it is loaded once for the portal.
 *
 * The names say what the thing is rather than which page first drew one: a GPT adunit
 * table is not a publishers table.
 * --------------------------------------------------------------------------- */
.pspui-listing {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pspui-listing__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pspui-listing__status--ok { color: #2d8a4e; }
.pspui-listing__status--error { color: #c0392b; }
.pspui-listing__status--saving { color: var(--text-dim); }

.fw-table__empty {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

/* The content types a site declares, listed beside its name in the site dialog.
   The rows are a DataGrid and the add row is a Form, so what is styled here is the
   arrangement -- the table and the controls are the framework's. */
.pspui-content-types__title {
  margin: 18px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e0e3e8);
  font-size: 0.95rem;
  font-weight: 600;
}

.pspui-content-types__hint {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 12px;
}

/* The table draws itself; this is the room it is given. `display` is deliberately not
   set: the element carrying this class is the grid's own <table>, and a flex or block
   display on it would take the cells out of the table's formatting context and leave the
   columns unaligned. */
.pspui-content-types__list {
  width: 100%;
  margin-bottom: 14px;
  font-size: 12px;
}

/* Explanatory paragraph under a listing's heading. */
.pspui-listing__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* A labelled control inside a toolbar — the label and its input on one line. */
.pspui-listing__field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pspui-listing__field > .pspui-listing__field-label {
  color: var(--text-dim);
  white-space: nowrap;
}

.pspui-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: auto;
}

/* Structure — `display: grid`, the gaps, the ellipsis — is the framework's, in
 * `uiFramework/public/framework.css`. What follows is the portal's skin over it. */
.fw-table__row:not(.fw-table__row--head) {
  padding: 8px 10px;
  background: var(--bg2, #1a1d25);
  border: 1px solid var(--border, #2e3240);
  border-radius: 6px;
}

.fw-table__row--head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim, #7a84a0);
  padding: 0 10px 4px;
}

.fw-table__cell {
  font-size: 13px;
  color: var(--text, #cdd6e8);
}

.pspui-adtech-surface .pspui-listing__status--ok { color: var(--success, #4acc7a); }
.pspui-adtech-surface .pspui-listing__status--error { color: var(--danger, #e85555); }
.pspui-adtech-surface .pspui-listing__status--saving { color: var(--text-dim); }

.pspui-field__bulk-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pspui-field__bulk-actions .fw-btn--compact {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 0;
}

.pspui-field__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border, #2e3240);
  border-radius: 6px;
  background: var(--bg3, #222630);
}

.pspui-field__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #cdd6e8);
  cursor: pointer;
}

.pspui-field__checkbox-row input[type="checkbox"] {
  flex: 0 0 auto;
}

.pspui-field__checkbox-group--readonly {
  opacity: 0.92;
}

.pspui-field__checkbox-group--readonly .pspui-field__checkbox-row {
  cursor: default;
}

.pspui-dialog {
  margin: auto;
  border: 1px solid var(--border, #2e3240);
  border-radius: 8px;
  padding: 0;
  background: var(--bg2, #1a1d25);
  color: var(--text, #cdd6e8);
  max-width: 520px;
  width: calc(100% - 32px);
  top: 0;
  bottom: 0;
}

.pspui-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.pspui-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.pspui-dialog__title {
  margin: 0;
  font-size: 16px;
}

.pspui-dialog__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pspui-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pspui-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.pspui-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #cdd6e8);
}

.pspui-field__label-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Legacy inline help under fields — kept for any remaining call sites.
   New field help uses .fw-field-help icons (framework.css). */
.pspui-field__help {
  color: var(--text-dim, #7a84a0);
  font-size: 11px;
}

.pspui-form-help {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, var(--bg2, #1e222b) 85%, transparent);
  color: var(--text-dim, #9aa0a6);
  font-size: 12px;
  line-height: 1.45;
}

.pspui-form-help[hidden] {
  display: none !important;
}

.pspui-dialog__id {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim, #7a84a0);
}

.pspui-dialog__id code {
  color: var(--text, #cdd6e8);
}

/* AdTech → Categories.
   The section is three blocks — the category list, the values of the selected one, and
   its assignments — and they used to run together because the Layout set no gap. The
   gap is on the section in app.json; this separates the two blocks that start with a
   heading, so a heading belongs to what follows it rather than floating between. */
.pspui-catalog-section-head {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #2d3a4f);
  font-weight: 600;
}

/* Three DataGrids stacked in one column, and `.fw-data-grid thead` is
   `position: sticky; top: 0`. A sticky element sticks to its nearest scrolling
   ancestor, and none of these grids is in a scroll box of its own — so all three
   header rows stick to the page scroller at the same offset and pile up on each
   other, hiding whatever is under them. The grid is the <table> itself, with no
   wrapper to make scrollable, so the header simply does not float here. */
.pspui-catalog-categories .fw-data-grid thead {
  position: static;
}

/* Each grid keeps its own visible edge now that the header scrolls with it. */
.pspui-catalog-categories .fw-data-grid {
  border: 1px solid var(--border, #2d3a4f);
  border-radius: 6px;
}