/* Axxo Intel product window (.pw) and feature-card excerpts (.pw-mini).
   Faithful to the portal's own tokens (design-system/tokens.css, app/dashboard.css), scaled to ~0.78 so the
   whole Home screen reads at ~1100px wide. Everything is scoped under .pw / .pw-mini; nothing leaks into the site.
   Real rem values map 1:1 to em here (12.5px base = the portal's 16px x 0.78). No em or en dashes. */

@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens (light: portal design-system/tokens.css :root values) ---------- */
.pw, .pw-mini {
  --pw-canvas: #F8F8F8;
  --pw-plane: #EDEDF0;
  --pw-card: #FFFFFF;
  --pw-ink: #040404;
  --pw-ink2: #303036;
  --pw-ink3: #5C5C64;
  --pw-rule: #D4D4D8;
  --pw-rule-strong: #7C7C84;
  --pw-accent: #202CAD;
  --pw-accent-strong: #18218A;
  --pw-wash: #E9EAF8;
  --pw-line: #A3A8E0;
  --pw-on-accent: #FFFFFF;
  --pw-ok: #0F6B54;
  --pw-cmp: #84848C;
  --pw-c1: #2A78D6; --pw-c2: #D95926; --pw-c3: #178F67; --pw-c4: #A86F00; --pw-c5: #D55181; --pw-c6: #008300;
  --pw-shadow: 0 1px 2px rgb(4 4 4 / 8%), 0 6px 16px rgb(4 4 4 / 7%);
  --pw-shadow-win: 0 2px 4px rgb(4 4 4 / 10%), 0 14px 30px rgb(4 4 4 / 10%), 0 40px 80px -30px rgb(32 44 173 / 30%);
  --pw-ease: var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  --pw-ease-out: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ---------- tokens (dark: tokens.css [data-theme="dark"] values) ---------- */
:root[data-theme="dark"] .pw, :root[data-theme="dark"] .pw-mini {
  --pw-canvas: #040404;
  --pw-plane: #0B0B0E;
  --pw-card: #141418;
  --pw-ink: #F8F8F8;
  --pw-ink2: #D4D4D8;
  --pw-ink3: #ADADAD;
  --pw-rule: #44444E;
  --pw-rule-strong: #6E6E78;
  --pw-accent: #8C93F0;
  --pw-accent-strong: #B4B9F6;
  --pw-wash: #1C1F4A;
  --pw-line: #373D81;
  --pw-on-accent: #040404;
  --pw-ok: #62D3B5;
  --pw-cmp: #6E6E78;
  --pw-c1: #3987E5; --pw-c3: #199E70; --pw-c4: #C98500;
  --pw-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1px 2px rgb(0 0 0 / 60%), 0 10px 24px rgb(0 0 0 / 45%);
  --pw-shadow-win: inset 0 1px 0 rgb(255 255 255 / 7%), 0 2px 4px rgb(0 0 0 / 60%), 0 16px 34px rgb(0 0 0 / 50%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pw, :root:not([data-theme="light"]) .pw-mini {
    --pw-canvas: #040404;
    --pw-plane: #0B0B0E;
    --pw-card: #141418;
    --pw-ink: #F8F8F8;
    --pw-ink2: #D4D4D8;
    --pw-ink3: #ADADAD;
    --pw-rule: #44444E;
    --pw-rule-strong: #6E6E78;
    --pw-accent: #8C93F0;
    --pw-accent-strong: #B4B9F6;
    --pw-wash: #1C1F4A;
    --pw-line: #373D81;
    --pw-on-accent: #040404;
    --pw-ok: #62D3B5;
    --pw-cmp: #6E6E78;
    --pw-c1: #3987E5; --pw-c3: #199E70; --pw-c4: #C98500;
    --pw-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1px 2px rgb(0 0 0 / 60%), 0 10px 24px rgb(0 0 0 / 45%);
    --pw-shadow-win: inset 0 1px 0 rgb(255 255 255 / 7%), 0 2px 4px rgb(0 0 0 / 60%), 0 16px 34px rgb(0 0 0 / 50%);
  }
}

/* ---------- base ---------- */
.pw, .pw-mini {
  font-family: "Urbanist", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  color: var(--pw-ink);
  -webkit-font-smoothing: antialiased;
}
.pw-mini { font-size: 11px; }
.pw *, .pw *::before, .pw *::after, .pw-mini *, .pw-mini *::before, .pw-mini *::after { box-sizing: border-box; }
:is(.pw, .pw-mini) :is(p, ul, ol, figure, strong, small, b, i, span, div, table, th, td) { font-family: inherit; }
:is(.pw, .pw-mini) :is(p, ul, ol, figure) { margin: 0; padding: 0; text-wrap: wrap; }
:is(.pw, .pw-mini) :is(ul, ol) { list-style: none; }
:is(.pw, .pw-mini) svg { display: block; max-width: none; }
:is(.pw, .pw-mini) i { font-style: normal; }

.pw {
  container-type: inline-size;
  position: relative;
  background: var(--pw-canvas);
  border: 1px solid var(--pw-rule);
  border-radius: 1.5em;
  box-shadow: var(--pw-shadow-win);
  overflow: clip;
}

/* ---------- window chrome ---------- */
.pw__chrome { display: flex; align-items: center; gap: 0.55em; padding: 0.8em 1.2em; background: var(--pw-plane); border-bottom: 1px solid var(--pw-rule); }
.pw__chrome i { width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--pw-rule); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-rule-strong) 35%, transparent); }
.pw__url { margin-left: 1.1em; font-size: 0.92em; color: var(--pw-ink2); background: var(--pw-card); border: 1px solid var(--pw-rule); padding: 0.18em 1em; border-radius: 0.5em; }

.pw__body { display: grid; grid-template-columns: 14.9em minmax(0, 1fr); }

/* ---------- sidebar (AppShell) ---------- */
.pw__rail { background: var(--pw-card); border-right: 1px solid var(--pw-rule); }
.pw__side { position: sticky; top: 5.5em; display: flex; flex-direction: column; height: 57em; padding: 1.9em 1.1em 1.25em; }
.pw-brand { display: flex; align-items: center; gap: 0.6em; padding: 0 0.6em; }
.pw-brand__mark { display: flex; align-items: center; justify-content: center; flex: none; width: 1.43em; height: 1.43em; border-radius: 0.43em; background: var(--pw-accent); color: var(--pw-on-accent); font-size: 1.75em; font-weight: 650; letter-spacing: -3px; padding-right: 2px; line-height: 1; }
.pw-brand__mark span { font-size: 0.82em; font-weight: 450; }
.pw-brand__name { white-space: nowrap; font-size: 1.375em; font-weight: 700; letter-spacing: -0.045em; line-height: 1.2; }
.pw-brand__name span { display: block; font-size: 0.4em; letter-spacing: 0.11em; color: var(--pw-ink2); font-weight: 600; margin-top: 0.05em; }
.pw-nav { margin-top: 2.7em; }
.pw-nav__cap { padding: 0 1em; margin-bottom: 0.9em; font-size: 0.6875em; font-weight: 600; letter-spacing: 0.12em; color: var(--pw-ink2); }
.pw-nav ul { display: grid; gap: 0.375em; }
.pw-nav__a { display: flex; align-items: center; gap: 0.8em; min-height: 2.9em; padding: 0.7em 1em; border-radius: 0.65em; font-size: 0.9375em; font-weight: 550; color: var(--pw-ink2); }
.pw-nav__a.is-on { background: var(--pw-wash); color: var(--pw-accent); font-weight: 650; }
.pw-ico { flex: none; width: 1.25em; height: 1.25em; }
.pw-ico--sm { width: 1em; height: 1em; }
.pw-ico--btn { width: 1.05em; height: 1.05em; }
.pw-nav__last { margin-top: 1.3em; border-top: 1px solid var(--pw-rule); padding-top: 1.2em; }
.pw-note { margin: auto 0.6em 1.5em; padding-top: 1.5em; color: var(--pw-ink2); }
.pw-note .pw-ico { color: var(--pw-accent); margin-bottom: 0.55em; }
.pw-note p { font-size: 1em; line-height: 1.45; margin-bottom: 0.45em; }
.pw-note strong { font-weight: 600; color: var(--pw-ink); }
.pw-note > span { display: block; font-size: 0.75em; max-width: 13em; }
.pw-sfoot { display: flex; align-items: center; gap: 0.6em; border-top: 1px solid var(--pw-rule); padding: 1.25em 0.6em 0; font-size: 0.875em; font-weight: 600; }
.pw-sfoot span:not(.pw-sfoot__mark) { display: block; color: var(--pw-ink2); font-size: 0.857em; font-weight: 450; }
.pw-sfoot__mark { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 0.7em; background: var(--pw-plane); color: var(--pw-ink2); font-size: 0.786em; font-weight: 500; }

/* ---------- header ---------- */
.pw__main { display: flex; flex-direction: column; min-width: 0; }
.pw-top { display: flex; align-items: center; justify-content: space-between; gap: 1.2em; min-height: 4.6em; padding: 1.1em 2.1em; background: var(--pw-card); border-bottom: 1px solid var(--pw-rule); }
.pw-crumb { display: flex; align-items: baseline; gap: 0.7em; min-width: 0; font-size: 0.875em; color: var(--pw-ink2); white-space: nowrap; }
.pw-crumb i { opacity: 0.55; }
.pw-crumb strong { font-weight: 550; color: var(--pw-ink); }
.pw-acct { display: flex; align-items: center; gap: 0.7em; min-width: 0; font-size: 0.75em; color: var(--pw-ink2); }
.pw-acct__av { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 0.8em; background: var(--pw-wash); color: var(--pw-accent-strong); font-size: 0.95em; font-weight: 700; flex: none; }
.pw-acct__id { display: grid; line-height: 1.25; min-width: 0; }
.pw-acct__id b { font-size: 1.1em; font-weight: 600; color: var(--pw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.pw-acct__id small { font-size: 0.78em; letter-spacing: 0.06em; }

/* ---------- page ---------- */
.pw-page { padding: 1.9em 2.1em 2.2em; min-width: 0; }
.pw-pagehead { margin-bottom: 1.6em; }
.pw-title { font-size: 1.85em; line-height: 1.2; letter-spacing: -0.035em; font-weight: 650; }
.pw-desc { margin-top: 0.5em; color: var(--pw-ink2); font-size: 0.9375em; }
.pw-dash { display: grid; gap: 1.25em; }
.pw-scope { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1em; }
.pw-scope__who { display: grid; gap: 2px; }
.pw-scope__who strong { font-weight: 650; font-size: 1.05em; }
.pw-scope__who span, .pw-window { color: var(--pw-ink2); font-size: 0.82em; }
.pw-periods { display: flex; gap: 0.25em; padding: 0.25em; background: var(--pw-plane); border-radius: 0.75em; flex-wrap: wrap; }
.pw-periods span { padding: 0.56em 0.8em; border-radius: 0.56em; font-size: 0.82em; color: var(--pw-ink2); white-space: nowrap; }
.pw-periods .is-on { background: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75em; min-height: 2.6em; padding: 0.62em 0.94em; border: 1px solid var(--pw-rule); border-radius: 0.56em; background: var(--pw-card); color: var(--pw-ink); font-size: 0.8125em; font-weight: 600; white-space: nowrap; }
.pw-btn--primary { background: var(--pw-accent); border-color: var(--pw-accent); color: var(--pw-on-accent); align-self: flex-start; font-size: 0.8em; margin-top: 0.25em; }
.pw-link { color: var(--pw-accent); text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
.pw-window { margin-top: -0.4em; }

/* ---------- cards ---------- */
.pw-top4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.pw-mid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1em; }
.pw-card { display: flex; flex-direction: column; gap: 0.75em; min-width: 0; padding: 1.25em; background: var(--pw-card); border: 1px solid var(--pw-rule); border-radius: 0.75em; box-shadow: var(--pw-shadow); }
.pw-eyebrow { font-size: 0.65em; letter-spacing: 0.11em; font-weight: 700; color: var(--pw-accent-strong); }
.pw-h2 { font-size: 1.05em; line-height: 1.4; letter-spacing: -0.015em; font-weight: 650; }
.pw-sub { color: var(--pw-ink2); font-size: 0.82em; }
.pw-value { font-size: 2.25em; font-weight: 650; letter-spacing: -0.055em; line-height: 1.12; font-variant-numeric: tabular-nums; }
.pw-brief { position: relative; overflow: hidden; background: var(--pw-wash); border-color: var(--pw-line); }
.pw-brief .pw-value { color: var(--pw-accent-strong); }
.pw-pos { display: flex; justify-content: space-between; gap: 0.75em; margin-top: auto; padding-top: 0.875em; border-top: 1px solid var(--pw-rule); font-size: 0.84em; }
.pw-pos strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-cfoot { display: grid; gap: 0.375em; margin-top: auto; padding-top: 1em; border-top: 1px solid var(--pw-rule); }
.pw-cfoot > span { font-size: 0.74em; color: var(--pw-ink2); }
.pw-cfoot > strong { font-size: 1.5em; font-weight: 650; letter-spacing: -0.04em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pw-cfoot small { font-size: 0.82em; color: var(--pw-ink2); font-weight: 400; letter-spacing: 0; }
.pw-cat { display: flex; align-items: center; gap: 0.875em; margin: auto 0; }
.pw-donut { width: 7.8em; flex: none; }
.pw-catlist { display: grid; gap: 0.62em; flex: 1; min-width: 0; }
.pw-catlist li { display: flex; justify-content: space-between; gap: 0.75em; font-size: 0.73em; font-variant-numeric: tabular-nums; }
.pw-catlist li > span { display: flex; align-items: center; gap: 0.6em; }
.pw-catlist li > strong { font-weight: 650; }
.pw-catlist i { width: 0.6em; height: 0.6em; border-radius: 50%; flex: none; }
.pw-catlist .pw-other { flex-wrap: wrap; }
.pw-catlist .pw-other > ul { flex-basis: 100%; display: grid; gap: 0.5em; padding-left: 1.2em; }
.pw-catlist .pw-other > ul li { font-size: 0.96em; color: var(--pw-ink2); }
.pw-catlist .pw-other > ul li > strong { font-weight: 450; }

.pw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.pw-head .pw-sub { margin-top: 0.1em; }
.pw-toggle { display: flex; gap: 0.5em; }
.pw-toggle span { padding: 0.55em 0.9em; border: 1px solid var(--pw-rule); border-radius: 0.5em; background: var(--pw-card); color: var(--pw-ink2); font-size: 0.8125em; line-height: 1.2; }
.pw-toggle .is-on { color: var(--pw-accent-strong); border-color: var(--pw-accent); background: var(--pw-wash); }

/* ---------- chart ---------- */
.pw-chart { margin: 0.5em 0 0.2em; }
.pw-svg { width: 100%; height: auto; overflow: visible; }
.pw-svg text { fill: var(--pw-ink2); font-family: inherit; font-size: 8.6px; }
.pw-grid { stroke: var(--pw-rule); stroke-width: 1; }
.pw-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pw-line--you { stroke: var(--pw-accent); stroke-width: 2; }
.pw-line--mkt { stroke: var(--pw-cmp); stroke-width: 1.5; stroke-dasharray: 6 4; }
.pw-dot--you { fill: var(--pw-accent); }
.pw-dot--mkt { fill: var(--pw-cmp); }
.pw-chart figcaption { display: flex; flex-wrap: wrap; gap: 0.3em 1.1em; padding-top: 0.75em; color: var(--pw-ink2); font-size: 0.75em; }
.pw-leg-you { color: var(--pw-accent-strong); }
.pw-leg-mkt i { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.25em; vertical-align: -0.05em; background: var(--pw-cmp); }
.pw-changes { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1em; padding-top: 0.875em; border-top: 1px solid var(--pw-rule); font-size: 0.76em; }
.pw-changes span { display: grid; gap: 0.25em; color: var(--pw-ink2); }
.pw-changes strong { font-size: 1.32em; font-weight: 600; color: var(--pw-ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.pw-changes .pw-changes__a { margin-left: auto; font-size: 1.05em; }
.pw-note2 { color: var(--pw-ink2); font-size: 0.82em; line-height: 1.5; }

/* ---------- councils to investigate ---------- */
.pw-prio li { display: flex; align-items: center; gap: 0.75em; padding: 1.06em 0; border-bottom: 1px solid var(--pw-rule); font-size: 0.84em; }
.pw-prio { counter-reset: pwp; }
.pw-prio li::before { counter-increment: pwp; content: counter(pwp, decimal-leading-zero); color: var(--pw-ink2); font-size: 0.83em; }
.pw-prio li > div { display: grid; gap: 0.25em; flex: 1; min-width: 0; }
.pw-prio li > strong { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-prio small { color: var(--pw-ink2); font-size: 0.98em; }

/* ---------- council overview table ---------- */
.pw-filters { display: flex; gap: 0.75em; flex-wrap: wrap; }
.pw-field { display: grid; gap: 0.25em; }
.pw-field small { font-size: 0.7em; color: var(--pw-ink2); }
.pw-input { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; min-width: 11em; padding: 0.56em 0.7em; border: 1px solid var(--pw-rule); border-radius: 0.56em; background: var(--pw-plane); color: var(--pw-ink); font-size: 0.8em; }
.pw-input--ph { color: var(--pw-ink3); }
.pw-cap { color: var(--pw-ink2); font-size: 0.8em; padding: 0.4em 0 0; }
.pw-tablewrap { max-width: 100%; overflow: hidden; }
.pw-table { width: 100%; border-collapse: collapse; font-size: 0.8125em; }
.pw-table th { text-align: left; font-weight: 600; font-size: 0.846em; color: var(--pw-ink2); background: var(--pw-plane); padding: 0.95em 0.75em; white-space: nowrap; }
.pw-table td { padding: 0.94em 0.75em; border-bottom: 1px solid var(--pw-rule); vertical-align: top; font-variant-numeric: tabular-nums; }
.pw-table tbody th { font-size: 1em; font-weight: 400; white-space: normal; color: var(--pw-ink); vertical-align: top; padding: 0.94em 0.75em; }
.pw-table tbody th small { display: block; margin-top: 0.1em; color: var(--pw-ink2); font-size: 0.9em; }
.pw-table tbody tr:last-child td { border-bottom-color: var(--pw-plane); }

/* ---------- status bar ---------- */
.pw-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8em; padding: 0.95em 2.1em; border-top: 1px solid var(--pw-rule); color: var(--pw-ink2); font-size: 0.75em; margin-top: auto; }
.pw-status__ok { display: flex; align-items: center; gap: 0.5em; color: var(--pw-ok); }
.pw-status__ok i { width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }

/* ---------- feature-card excerpts ---------- */
.pw-mini { display: flex; flex-direction: column; gap: 0.7em; position: relative; width: 100%; min-height: 220px; padding: 1.2em 1.25em 1.1em; background: var(--pw-card); border: 1px solid var(--pw-rule); border-radius: 0.9em; box-shadow: var(--pw-shadow); overflow: hidden; text-align: left; }
.pw-mini__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8em; }
.pw-mini__meta { color: var(--pw-ink2); font-size: 0.8em; white-space: nowrap; padding-top: 0.2em; }
.pw-mini .pw-h2 { font-size: 1.1em; }
.pw-mini .pw-head { flex-wrap: nowrap; }
.pw-mini .pw-toggle span { padding: 0.4em 0.7em; font-size: 0.85em; }
.pw-mini .pw-chart { margin: 0.1em 0 0; }
.pw-mini .pw-svg text { font-size: 8px; }
.pw-mini .pw-chart figcaption { padding-top: 0.55em; font-size: 0.8em; }
.pw-table--mini { font-size: 0.9em; }
.pw-table--mini th { padding: 0.7em 0.5em; font-size: 0.82em; white-space: normal; }
.pw-table--mini td, .pw-table--mini tbody th { padding: 0.65em 0.5em; }
.pw-table--mini th:first-child, .pw-table--mini td:first-child { padding-left: 0.6em; }
.pw-table--rc td b, .pw-table--rc tbody th b { display: block; font-weight: 650; }
.pw-table--rc td small, .pw-table--rc tbody th small { display: block; color: var(--pw-ink2); font-size: 0.82em; line-height: 1.35; }
.pw-table--rc td { font-size: 0.92em; }
.pw-table--rc tbody th b { font-size: 0.86em; line-height: 1.3; }
.pw-table--rc td, .pw-table--rc tbody th { padding-top: 0.5em; padding-bottom: 0.5em; }

/* ---------- feature-panel excerpts: council detail, coverage confidence, notifications ----------
   Mirror the portal's Councils detail aside, Coverage table and Notifications rows. */
.pw-mini--detail { background: var(--pw-plane); border-color: color-mix(in srgb, var(--pw-accent) 38%, var(--pw-rule)); }
.pw-mini--detail .pw-mini__head .pw-sub { margin-top: 0.15em; }
.pw-act { display: inline-block; padding: 0.28em 0.7em; border-radius: 999px; font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.pw-act--grow { color: var(--pw-ok); background: color-mix(in srgb, var(--pw-ok) 14%, var(--pw-card)); }
.pw-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
.pw-metrics > div { display: grid; align-content: space-between; gap: 0.4em; padding: 0.75em 0.8em; border: 1px solid var(--pw-rule); border-radius: 0.75em; background: var(--pw-card); }
.pw-metrics span, .pw-dl dt, .pw-fig span { color: var(--pw-ink2); font-size: 0.82em; }
.pw-metrics strong { font-size: 1.2em; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pw-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; margin: 0; }
.pw-dl dd { margin: 0.15em 0 0; font-weight: 550; }
.pw-fig { display: grid; gap: 0.3em; padding: 1.1em 1.2em; border: 1px solid var(--pw-rule); border-radius: 0.75em; background: var(--pw-card); }
.pw-fig strong { font-size: 3.2em; font-weight: 650; letter-spacing: -0.055em; line-height: 1.05; color: var(--pw-accent-strong); font-variant-numeric: tabular-nums; }
.pw-fig small { color: var(--pw-ink2); font-size: 0.9em; }
.pw-links { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; font-weight: 600; }
.pw-legend { display: flex; flex-wrap: wrap; gap: 0.35em 1.1em; color: var(--pw-ink2); font-size: 0.82em; }
.pw-legend li { display: flex; align-items: center; gap: 0.45em; }
.pw-legend i { width: 0.7em; height: 0.7em; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-rule-strong) 30%, transparent); }
.fpane__viz .pw-mini { font-size: 12px; }
.pw-table--cov tbody th { background: transparent; border-bottom: 1px solid var(--pw-rule); white-space: nowrap; }
.pw-table--cov tbody tr:last-child th { border-bottom-color: var(--pw-plane); }
.pw-table--cov td, .pw-table--cov tbody th { padding-left: 0.4em; padding-right: 0.4em; }
.pw-table--cov tbody th b { font-size: 1em; }
.pw-table--cov td:nth-child(3), .pw-table--cov td:nth-child(4) { white-space: nowrap; }
.pw-ntf { display: grid; gap: 0.55em; }
.pw-ntf__i { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 0.7em 0.9em; border: 1px solid var(--pw-rule); border-radius: 0.75em; background: var(--pw-card); }
.pw-ntf__i.is-unread { border-left: 3px solid var(--pw-accent); background: var(--pw-wash); }
.pw-ntf__body { display: grid; gap: 0.2em; min-width: 0; }
.pw-ntf__body p { color: var(--pw-ink2); }
.pw-ntf__body .pw-ntf__t { color: var(--pw-ink); font-weight: 650; font-size: 1.05em; }
.pw-ntf__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 1em; font-size: 0.9em; }
.pw-ntf__m .pw-link { font-weight: 600; color: var(--pw-accent-strong); }
.pw-ntf__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.6em; align-self: stretch; flex: none; }
.pw-pill { padding: 0.12em 0.7em; border: 1px solid var(--pw-rule); border-radius: 999px; background: var(--pw-card); font-size: 0.8em; font-weight: 700; }
.pw-ntf .pw-btn { min-height: 0; padding: 0.4em 0.8em; font-size: 0.85em; }
@media (max-width: 560px) {
  .pw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-dl { grid-template-columns: minmax(0, 1fr); }
  .pw-table--cov th:nth-child(3), .pw-table--cov td:nth-child(3) { display: none; }
  .pw-ntf__i { flex-direction: column; }
  .pw-ntf__side { flex-direction: row-reverse; align-items: center; align-self: auto; width: 100%; justify-content: space-between; }
}

/* ---------- responsive (container queries: the window can be narrower than the viewport) ---------- */
@container (max-width: 1000px) {
  .pw-mid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 860px) {
  .pw__body { grid-template-columns: minmax(0, 1fr); }
  .pw__rail { display: none; }
  .pw-top { padding: 1em 1.4em; }
  .pw-page { padding: 1.4em 1.4em 1.6em; }
  .pw-top4 { grid-template-columns: minmax(0, 1fr); }
  .pw-periods { order: 3; width: 100%; }
  .pw-status { padding: 0.95em 1.4em; }
}
@container (max-width: 560px) {
  .pw-acct__id small, .pw-acct .pw-ico { display: none; }
  .pw-chart, .pw-mom .pw-toggle { display: none; }
  .pw-mom .pw-changes { margin-top: 0; }
  .pw-card { padding: 1.1em; }
  .pw-value { font-size: 2em; }
  .pw-cat { flex-wrap: wrap; }
  .pw-donut { width: 6.5em; }
  .pw-table th:nth-child(3), .pw-table td:nth-child(3),
  .pw-table th:nth-child(5), .pw-table td:nth-child(5) { display: none; }
  .pw-table { font-size: 0.78em; }
  .pw-table th, .pw-table td, .pw-table tbody th { padding-left: 0.5em; padding-right: 0.5em; }
  .pw-filters { width: 100%; }
  .pw-field { flex: 1; min-width: 0; }
  .pw-input { min-width: 0; }
  .pw-input .pw-ico { display: none; }
}
@container (max-width: 440px) {
  /* phone width: keep Council, Your spend, Observed whitespace and Coverage legible without sideways scroll */
  .pw-table th:nth-child(2), .pw-table td:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .pw { font-size: 11.5px; }
  .pw-mini { font-size: 10.5px; }
}

/* ---------- motion (enhancement only; nothing loops) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* frame, then the four tiles in sequence */
  .js .pw[data-app] { opacity: 0; transform: translateY(2.6em); transition: opacity 0.9s var(--pw-ease), transform 1.1s var(--pw-ease-out); }
  .js .pw[data-app].is-in { opacity: 1; transform: none; }
  .js .pw[data-app] .pw-t { opacity: 0; transform: translateY(1em); transition: opacity 0.7s var(--pw-ease), transform 0.8s var(--pw-ease-out); transition-delay: calc(var(--i, 0) * 120ms + 280ms); }
  .js .pw[data-app].is-in .pw-t { opacity: 1; transform: none; }

  /* donut segments draw in one after another */
  .js .pw[data-app] .pw-seg { stroke-dasharray: 0 100; transition: stroke-dasharray 0.9s var(--pw-ease-out); transition-delay: calc(var(--i, 0) * 130ms + 750ms); }
  .js .pw[data-app].is-in .pw-seg { stroke-dasharray: var(--s) var(--r); }

  /* momentum chart: the solid line uses the site's .draw convention (--len from site.js); the dashed market line reveals by clip so its dashes survive */
  .js .pw [data-draw] .pw-mk { clip-path: inset(-5px 100% -5px -5px); transition: clip-path 1.6s var(--pw-ease-out) 0.2s; }
  .js .pw [data-draw].is-in .pw-mk { clip-path: inset(-5px -5px -5px -5px); }
  .js .pw-mini [data-draw] .pw-mk { clip-path: inset(-5px 100% -5px -5px); transition: clip-path 1.6s var(--pw-ease-out) 0.2s; }
  .js .pw-mini [data-draw].is-in .pw-mk { clip-path: inset(-5px -5px -5px -5px); }
  .js :is(.pw, .pw-mini) [data-draw] .pw-dot { opacity: 0; transition: opacity 0.45s var(--pw-ease); transition-delay: calc(0.5s + var(--i, 0) * 85ms); }
  .js :is(.pw, .pw-mini) [data-draw].is-in .pw-dot { opacity: 1; }

  /* table rows stagger in when the table itself scrolls into view */
  .js :is(.pw, .pw-mini)[data-bars] .pw-row, .js :is(.pw, .pw-mini) [data-bars] .pw-row { opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s var(--pw-ease), transform 0.7s var(--pw-ease-out); transition-delay: calc(var(--i, 0) * 90ms + 300ms); }
  .js :is(.pw, .pw-mini)[data-bars].is-in .pw-row, .js :is(.pw, .pw-mini) [data-bars].is-in .pw-row { opacity: 1; transform: none; }
}

/* marketing crop: show the first screen of the workspace, fade the rest */
.pw-crop { position: relative; max-height: 720px; overflow: hidden; border-radius: inherit; }
.pw-crop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--pw-canvas, #F8F8F8)); }
@media (max-width: 860px) { .pw-crop { max-height: 560px; } }

.pw .pw-brand__mark--svg { background: none; border: 0; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pw .pw-brand__svg { width: 100%; height: 100%; display: block; color: var(--pw-ink); }