/* static/analytics/analytics.css · D-243 — Performance outside SEO wears the Concreet look, scoped.
 *
 * Two parts:
 *   1. The Concreet skin, scoped to `.pa-skin` — the same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15),
 *      Performance → SEO (static/performance-seo/seo.css, `.pf-seo`), Strategy
 *      and Setup. renderAnalytics() writes the wrapper UNDER the level-1 tray
 *      (`.analytics-sections`), around the AI section (its pivot row and every
 *      pivot) and around the Search Console states that render before the SEO
 *      section exists (not connected, no property, loading, no data). The tray
 *      itself keeps the app kit. The token block is the only place in this
 *      file a colour literal may appear.
 *   2. The AI section's existing components restyled on those tokens. No
 *      markup was rewritten: every rule below targets a class the surface
 *      already ships.
 *
 * OUT OF SCOPE, on purpose: Performance → SEO. `.pa-skin` never wraps `.pf-seo`
 * and no selector here names a `.pfo-*` / `.pf-seo` hook — that section has its
 * own skin and its own owner (ROADMAP 5.9). Charts are restyled through their
 * frames, legends and axis labels only. A mark that reads a token follows the
 * token, as in the other skins; ONE mark is named, the fourth line of the
 * Sources trend, because the skin's --ink-3 and --ink-4 sit too close to tell
 * two lines apart (judge J.1). Guarded by
 * tests/test_dashboard_analytics_concreet_skin.py.
 *
 * Board: docs/design/mocks/2026-10-10-dashboard-analytics-concreet-board.html
 * (built on Alex's request of 2026-10-10; he has not walked the board itself).
 */

/* pa-skin-tokens:start */
.pa-skin {
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Archivo", "Arial Narrow", Arial, sans-serif;
  --paper-0: #FFFFFF; --paper-1: #F1F0EC; --paper-2: #E6E4DE; --paper-3: #C9C6BE; --paper-4: #B3B0A8;
  --ink-0: #0D0D0B; --ink-1: #2E2D2A; --ink-2: #3A3935; --ink-3: #65635D; --ink-4: #6E6C66; --ink-5: #8F8D86;
  --accent: #0D0D0B;
  --concreet: #17B26F; --concreet-deep: #0B7A4A; --concreet-ink: #0B7A4A; --concreet-soft: #DDF3E8;
  --good: #0B7A4A; --good-soft: #DDF3E8; --kpi-tint: #FFFFFF;
  /* aliases the app keeps beside the concreet family; the answer matrix reads them */
  --forest: #0B7A4A; --sage: #0B7A4A; --sage-soft: #DDF3E8;
  /* three app tokens the AI section reads that would otherwise stay warm inside the skin */
  --paper-5: #8F8D86; --accent-soft: #E6E4DE; --accent-hot: #2E2D2A;
  /* the Sources trend's four-step ink ramp is --ink-1 · --ink-3 · --paper-5 · --ink-4 (§7.13); in this
     skin --ink-4 is a text grey one step from --ink-3, so the fourth line takes its own, lighter step */
  --pa-trend-4: #B3B0A8;
  --pa-slab-shadow: 6px 6px 0 var(--paper-3);
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* pa-skin-tokens:end */

/* ── flat panels: white, a --paper-3 hairline, square, NO shadow. Nothing in
   the AI section is a clickable card, so nothing carries the offset slab
   (§7.15 rule 2: the shadow is the click affordance). */
.pa-skin .av-model-card, .pa-skin .kpi-card, .pa-skin .av-comp-panel, .pa-skin .av-cat-panel, .pa-skin .av-rec-panel,
.pa-skin .av-split-panel, .pa-skin .av-trend-panel, .pa-skin .av-usecase-panel, .pa-skin .av-matrix-wrap,
.pa-skin .av-judge-cell, .pa-skin .av-settings-bar, .pa-skin .analytics-empty, .pa-skin .account-empty-detail {
  border-radius: 0; box-shadow: none; border-color: var(--paper-3);
}
.pa-skin .av-settings-bar, .pa-skin .av-split-panel { background: var(--paper-0); }
/* rows inside a panel: square, on the page's own grey */
.pa-skin .av-fm-row, .pa-skin .av-losses-row, .pa-skin .av-fanout-row, .pa-skin .av-cell-miss, .pa-skin .av-cell-partial,
.pa-skin .av-cell-error, .pa-skin .av-cat-bx, .pa-skin .av-legend-swatch, .pa-skin .aot-col i,
.pa-skin .av-cite-badge, .pa-skin .av-rec-prio, .pa-skin .av-rec-type-badge, .pa-skin .av-reliability { border-radius: 0; }

/* ── headings: Archivo 800 uppercase (the §7.15 view heading and panel heading) */
.pa-skin .av-header-headline {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 30px; line-height: 1.1; color: var(--ink-0);
}
.pa-skin .av-rec-title, .pa-skin .analytics-empty h3 {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 20px; line-height: 1.15; color: var(--ink-0);
}
.pa-skin .av-header-sub, .pa-skin .av-rec-sub, .pa-skin .analytics-empty p { color: var(--ink-3); }

/* ── labels: uppercase, letter-spaced, Archivo 700 at --fs-meta (§7.15 rule 3):
   panel titles, figure keys, table heads */
.pa-skin .av-header-eyebrow, .pa-skin .av-model-name, .pa-skin .av-comp-title, .pa-skin .av-cat-title, .pa-skin .av-trend-title,
.pa-skin .av-usecase-title, .pa-skin .av-split-label, .pa-skin .av-judge-label, .pa-skin .av-band-k, .pa-skin .kpi-label,
.pa-skin .mk-head, .pa-skin .av-matrix thead th, .pa-skin .av-cat-table thead th, .pa-skin .av-rec-table th,
.pa-skin .src-head > b, .pa-skin .ar-cardhead > b, .pa-skin .av-band-t, .pa-skin .ar-cardhead .tsa-kicker, .pa-skin .av-stagecol, .pa-skin th {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
}
.pa-skin .av-header-eyebrow, .pa-skin .av-model-name, .pa-skin .av-comp-title, .pa-skin .av-cat-title, .pa-skin .av-trend-title,
.pa-skin .av-usecase-title, .pa-skin .av-split-label, .pa-skin .av-judge-label, .pa-skin .av-band-k, .pa-skin .kpi-label,
.pa-skin .mk-head, .pa-skin th { color: var(--ink-3); }
.pa-skin .src-head > b, .pa-skin .ar-cardhead > b, .pa-skin .av-band-t { color: var(--ink-0); }
.pa-skin .av-stagecol { font-size: var(--fs-micro); color: var(--ink-4); }

/* ── headline numbers: Archivo 800, -.02em, tabular */
.pa-skin .av-model-pct, .pa-skin .av-split-val, .pa-skin .av-judge-val, .pa-skin .kpi-value {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink-0);
}
.pa-skin .av-ci { font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ── buttons: shape and voice change, hierarchy does not (Setup's lesson,
   judge J.1 of D-241). Every button is square and uppercase; a filled one
   stays the fill it had, an outline stays an outline, a dashed one dashed. */
.pa-skin .btn, .pa-skin .account-btn, .pa-skin .av-rec-action {
  border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
  font-family: var(--sans); box-shadow: none;
}
.pa-skin .btn.btn-pill, .pa-skin .btn.btn-cta, .pa-skin .av-cat { border-radius: 0; }
.pa-skin .btn.btn-pill, .pa-skin .btn.btn-cta { font-size: var(--fs-meta); }
.pa-skin .btn:focus-visible, .pa-skin .account-btn:focus-visible, .pa-skin .av-rec-action:focus-visible,
.pa-skin .av-dial-chip:focus-visible, .pa-skin .av-rec-tab:focus-visible, .pa-skin .av-trend-tab:focus-visible,
.pa-skin .src-vt button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── in-content trays and chips: square; the active state keeps the meaning it
   had (a raised chip → the tray's own ink underline). Active is paint only —
   background, colour, an inset shadow — and every item carries one weight, so
   selecting a tab moves no box (§7.5; judge J.4). */
.pa-skin .av-rec-tabs { border-radius: 0; background: var(--paper-2); border-color: var(--paper-2); }
.pa-skin .av-rec-tab { border-radius: 0; font-family: var(--sans); font-weight: 500; }
.pa-skin .av-rec-tab.active { background: var(--paper-0); color: var(--ink-0); box-shadow: inset 0 -2px 0 var(--ink-0); }
.pa-skin .av-trend-tab { border-radius: 0; font-family: var(--sans); font-weight: 500; }
.pa-skin .av-trend-tab.active { background: var(--paper-2); color: var(--ink-0); box-shadow: inset 0 -2px 0 var(--ink-0); }
.pa-skin .av-dial-chip { border-color: var(--paper-4); }
.pa-skin .av-dial-chip-active { border-color: var(--ink-0); }
.pa-skin .src-vt { border-color: var(--paper-4); }
.pa-skin .src-vt button { border-right-color: var(--paper-4); }
.pa-skin .src-clk.on { background: var(--paper-2); border-color: var(--ink-0); }

/* ── fields: white, square, a --paper-4 border; ink border + ring on focus.
   Every selector carries the panel id on purpose: app.html's "Inputs
   everywhere — final sweep" rule (`input:not(…)×9, textarea, select`,
   specificity ≈ 0-9-1) outranks any class-only field rule (§7.15, form
   controls). */
#panel-analytics .pa-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
#panel-analytics .pa-skin textarea,
#panel-analytics .pa-skin select {
  background-color: var(--paper-0); border: 1px solid var(--paper-4); border-radius: 0; box-shadow: none;
}
#panel-analytics .pa-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
#panel-analytics .pa-skin textarea:focus,
#panel-analytics .pa-skin select:focus {
  border-color: var(--ink-2); box-shadow: var(--focus-ring); outline: none;
}
.pa-skin input::placeholder, .pa-skin textarea::placeholder { color: var(--ink-4); opacity: 1; }
.pa-skin input[type=checkbox], .pa-skin input[type=radio] { accent-color: var(--ink-0); }
.pa-skin .select-chev { color: var(--ink-3); }

/* ── tables: hairlines on the skin's greys */
.pa-skin .av-matrix thead th, .pa-skin .av-matrix .av-col-prompt { background: var(--paper-1); }
.pa-skin .av-matrix thead th, .pa-skin .av-cat-table thead th, .pa-skin .av-rec-table th { border-bottom-color: var(--paper-3); }

/* ── states. Text never sits on a border grey (§7.15 contrast): a neutral mark
   moves from --paper-3 to --paper-2, and --ink-5 / --ink-4 on a tint give way
   to --ink-3. */
.pa-skin .av-fm-unknown, .pa-skin .pill.pending { background: var(--paper-2); color: var(--ink-3); }
.pa-skin .av-badge, .pa-skin .av-rec-count, .pa-skin .mk-st.sched { background: var(--paper-2); color: var(--ink-3); }
.pa-skin .av-rec-tab.active .av-rec-count { background: var(--paper-2); color: var(--ink-0); }
.pa-skin .src-nc, .pa-skin .av-cell-dash { color: var(--ink-4); }
.pa-skin .av-cell-miss { background: var(--paper-2); color: var(--ink-3); }
.pa-skin .av-cell-hit { background: var(--good-soft); color: var(--good); }
.pa-skin .pill.done { background: var(--good-soft); color: var(--good); }

/* ── chart frames, legends, axes — never the marks */
.pa-skin .atl-keys, .pa-skin .av-matrix-legend, .pa-skin .av-legend-hint, .pa-skin .av-trend-hint, .pa-skin .av-basis { color: var(--ink-3); }
.pa-skin .atl-x, .pa-skin .atl-y, .pa-skin .aot-axis { font-family: var(--mono); color: var(--ink-4); }

/* the one named mark (see the head of this file): the fourth trend line, its dot and its legend key */
.pa-skin .atl .atl-l3 { stroke: var(--pa-trend-4); }
.pa-skin .atl .atl-l3.atl-dot { fill: var(--pa-trend-4); }
.pa-skin .atl-key u.atl-l3 { background: var(--pa-trend-4); }

/* ── the answer drill-down. A click on a matrix cell re-renders the section with
   the dialog INSIDE the wrapper, so it wears the skin whole: the §7.17 dialog
   shape (square, 1px ink, the slab), a square close button (judge J.2). */
.pa-skin .av-dd-panel { border-radius: 0; border: 1px solid var(--ink-0); box-shadow: var(--pa-slab-shadow); }
.pa-skin .av-dd-title { font-family: var(--sans); font-weight: 700; }
.pa-skin .av-dd-close { border-radius: 0; }
.pa-skin .av-dd-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pa-skin .av-dd-header, .pa-skin .av-dd-footer { border-color: var(--paper-3); }

/* ── legacy inline-styled corners (a few AI panels carry `style="border-radius:…"`);
   round marks (50 % / 999px dots and pills) are left alone */
.pa-skin [style*="border-radius"]:not([style*="50%"]):not([style*="999"]):not([style*="99px"]):not([style*="--r-pill"]) { border-radius: 0 !important; }

/* ── the Search Console states (not connected · no property · no data) */
.pa-skin .analytics-empty { background: var(--paper-0); border: 1px solid var(--paper-3); }

@media (max-width: 767px) {
  .pa-skin .av-header-headline { font-size: 24px; }
  /* a table wider than a phone scrolls inside its own box, not the page (§7.18) */
  /* the control row and a panel head with actions wrap on a phone instead of
     pushing the page sideways (the uppercase labels are wider than before) */
  .pa-skin .aip-ctl, .pa-skin .aip-grp, .pa-skin .src-head, .pa-skin .av-sources-grid .src-head { flex-wrap: wrap; row-gap: var(--sp-2); }
  .pa-skin .aip-grp.aip-end { margin-left: 0; }
  .pa-skin .src-head > .av-model-sub { flex: 1 1 100%; white-space: normal; }
  .pa-skin .src-head button, .pa-skin .src-head .src-search { margin-left: 0; }
}