/* Moved from websites/templates/websites/_google_analytics_audit_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

.gaa-page {
    --gaa-ink: var(--color-text, var(--navy));
    --gaa-ink-2: #4a4644;
    --gaa-muted: var(--color-neutral-600, var(--color-neutral-600));
    --gaa-track: var(--color-neutral-200, var(--color-neutral-200));
    --gaa-line: var(--color-neutral-300, var(--color-neutral-300));
    --gaa-paper: var(--rs-paper, var(--row-tint));
    --gaa-bad: var(--coral-text);
    --gaa-warn: var(--amber-text);
    --gaa-good: var(--mint-text);
    --gaa-accent: var(--color-accent, var(--blue));
    font-variant-numeric: tabular-nums; }
.gaa-page .num { text-align: right; white-space: nowrap; }
.gaa-page h3.gaa-h { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 800; margin: var(--space-6) 0 var(--space-2); color: var(--gaa-ink); }
.gaa-page h3.gaa-h:first-child { margin-top: 0; }
.gaa-lead { font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-3); max-width: 72ch; }
.gaa-lead b { font-weight: 800; }
.gaa-muted { color: var(--gaa-muted); }
.gaa-small { font-size: 12px; color: var(--gaa-muted); margin: var(--space-2) 0 0; }
.gaa-pending { color: var(--ro-pending, #8a8481); font-size: 15px; margin: 0; }

/* ---- Tables: compact, numbers aligned, thin rows greyed -------------- */
.gaa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gaa-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gaa-muted); padding: 6px 8px;
    border-bottom: 2px solid var(--gaa-ink); white-space: nowrap; }
.gaa-table th.num { text-align: right; }
.gaa-table td { padding: 7px 8px; border-bottom: 1px solid var(--gaa-line); vertical-align: middle; }
.gaa-table tr.is-thin td { color: var(--gaa-muted); }
.gaa-table tr.is-total td { font-weight: 800; border-top: 2px solid var(--gaa-ink); border-bottom: 0; }
.gaa-table tr.is-checkout td:first-child { color: var(--gaa-bad); }
.gaa-table .gaa-label { font-weight: 600; overflow-wrap: anywhere; max-width: 34ch; }
.gaa-table .gaa-sub { display: block; font-size: 11px; font-weight: 400; color: var(--gaa-muted); }
.gaa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gaa-flag { display: inline-block; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; padding: 1px 5px; border: 1px solid currentColor; margin-left: 4px;
    vertical-align: 1px; }
.gaa-flag--bad { color: var(--gaa-bad); }
.gaa-flag--muted { color: var(--gaa-muted); }

/* ---- The value bar: the report's one unit, one scale ----------------- */
.gaa-vbar { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 92px; }
.gaa-vbar b { font-weight: 800; }
.gaa-vbar span { display: block; width: 92px; height: 3px; background: var(--gaa-track); margin-top: 3px; }
.gaa-vbar i { display: block; height: 100%; background: var(--gaa-ink); }
.gaa-vbar.is-thin b { font-weight: 600; color: var(--gaa-muted); }
.gaa-vbar.is-thin i { background: var(--gaa-muted); }
.gaa-vbar.is-none b { font-weight: 400; color: var(--gaa-muted); font-size: 12px; }
.gaa-vbar--raw i { background: var(--color-neutral-400, var(--color-neutral-400)); }

/* ---- In-cell bar: a share of the table's biggest row ----------------- */
.gaa-cellbar { position: relative; display: block; min-width: 110px; padding: 0 0 5px; text-align: right; }
.gaa-cellbar i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gaa-ink); }
.gaa-cellbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--gaa-track); z-index: -1; }

/* ---- Month strip: one column per month, one row high ----------------- */
.gaa-strip { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px;
    padding-bottom: 1px; border-bottom: 1px solid var(--gaa-line); vertical-align: middle; }
.gaa-strip i { display: block; width: 5px; min-height: 1px; background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-strip i.is-peak { background: var(--gaa-ink); }
.gaa-strip i.is-last { outline: 1px solid var(--gaa-ink); outline-offset: 1px; }
.gaa-strip-none { font-size: 11px; color: var(--gaa-muted); }

/* The big strip: the same cells, tall, labelled. */
.gaa-months { display: grid; grid-template-columns: repeat(var(--gaa-n, 12), minmax(0, 1fr));
    gap: 6px; align-items: end; height: 150px; margin: 22px 0 var(--space-1);
    border-bottom: 2px solid var(--gaa-ink); }
.gaa-months div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.gaa-months i { position: relative; display: block; flex-shrink: 0; min-height: 2px;
    background: var(--color-neutral-400, var(--color-neutral-400)); }
.gaa-months .is-peak i { background: var(--gaa-ink); }
.gaa-months .is-last i { background: var(--gaa-ink-2); }
.gaa-months em, .gaa-hist em { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
    font-style: normal; font-size: 11px; font-weight: 800; padding-bottom: 3px; white-space: nowrap;
    color: var(--gaa-ink); }
/* Only the best and the latest month are labelled on the chart, as on the
   one-row strips; the ledger under it carries every value. */
.gaa-months em { display: none; }
.gaa-months .is-peak em, .gaa-months .is-last em { display: block; }
.gaa-months-axis { display: grid; grid-template-columns: repeat(var(--gaa-n, 12), minmax(0, 1fr));
    gap: 6px; font-size: 11px; color: var(--gaa-muted); text-align: center; margin-bottom: var(--space-4); }

/* ---- The tare: one bar, the bots weighed off ------------------------- */
.gaa-tare { display: flex; height: 30px; margin: var(--space-2) 0 var(--space-1); background: var(--gaa-track); }
.gaa-tare > div { min-width: 3px; }
.gaa-tare .is-tare { background: repeating-linear-gradient(135deg, var(--color-neutral-400, var(--color-neutral-400)) 0 6px,
    var(--color-neutral-300, var(--color-neutral-300)) 6px 12px); }
.gaa-tare .is-idle { background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-tare .is-engaged { background: var(--gaa-ink); }
.gaa-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 12px;
    margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.gaa-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gaa-legend li::before { content: ""; width: 12px; height: 12px; background: var(--gaa-sw, var(--gaa-ink)); }
.gaa-legend .is-tare::before { background: repeating-linear-gradient(135deg, var(--color-neutral-400, var(--color-neutral-400)) 0 3px, var(--color-neutral-300, var(--color-neutral-300)) 3px 6px); }
.gaa-legend .is-idle::before { background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-legend b { font-weight: 800; }

/* ---- The ruler: median, mean and the biggest on one line ------------- */
.gaa-ruler { position: relative; height: 26px; margin: var(--space-3) 0 var(--space-2); }
.gaa-ruler-line { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--gaa-ink); }
.gaa-ruler-band { position: absolute; top: 8px; height: 9px; background: var(--color-neutral-300, var(--color-neutral-300)); }
.gaa-ruler-mark { position: absolute; top: 7px; width: 11px; height: 11px; margin-left: -5px;
    background: var(--gaa-ink); transform: rotate(45deg); }
.gaa-ruler-mark--mean { background: var(--gaa-paper); border: 2px solid var(--gaa-ink);
    border-radius: 50%; transform: none; }
.gaa-ruler-mark--max { width: 2px; height: 22px; top: 2px; margin-left: -2px; transform: none; }
.gaa-ruler-key li::before { width: 10px; height: 10px; }
.gaa-ruler-key .is-median::before { background: var(--gaa-ink); transform: rotate(45deg) scale(.8); }
.gaa-ruler-key .is-mean::before { background: var(--gaa-paper); border: 2px solid var(--gaa-ink);
    border-radius: 50%; width: 7px; height: 7px; }
.gaa-ruler-key .is-band::before { background: var(--color-neutral-300, var(--color-neutral-300)); }
.gaa-ruler-key .is-max::before { width: 2px; height: 14px; }

/* ---- The check ticks: one square per check --------------------------- */
.gaa-ticks { display: inline-flex; gap: 3px; vertical-align: middle; }
.gaa-ticks i { width: 12px; height: 12px; background: var(--rs-tick-good, #3fa566); }
.gaa-ticks i.is-warn { background: var(--rs-tick-warn, #d99a2b); }
.gaa-ticks i.is-bad { background: var(--rs-tick-bad, #f0684f); }
.gaa-ticks i.is-info { background: var(--color-neutral-300, var(--color-neutral-300)); }

/* ---- Checks list ------------------------------------------------------ */
/* Each tracking check is a UI kit check card (§21): Ground, rounded, its
   status as a stripe on the left. */
.gaa-checks { display: grid; gap: 10px; list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.gaa-check { display: grid; grid-template-columns: 136px 1fr; gap: var(--space-3);
    padding: 14px 18px 14px 22px; border-radius: var(--r-inner); background: var(--ground);
    box-shadow: inset 5px 0 0 var(--slate); }
.gaa-check--bad { box-shadow: inset 5px 0 0 var(--coral); }
.gaa-check--warn { box-shadow: inset 5px 0 0 var(--amber); }
.gaa-check--good { box-shadow: inset 5px 0 0 var(--mint); }
.gaa-check--info { box-shadow: inset 5px 0 0 var(--blue); }
.gaa-check h4 { margin: 0 0 2px; font-size: 14px; font-weight: 800; }
.gaa-check p { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.gaa-check .gaa-advice { color: var(--gaa-ink-2); margin-top: 4px; }
.gaa-check .gaa-advice::before { content: "→ "; font-weight: 800; }
/* The window a check judged ("last 30 days" / "12 months"), and the note
   of a fault fixed since — Phase 1b of the GA4 audit plan. */
.gaa-window { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px;
    font-weight: 600; color: var(--gaa-muted); border: 1px solid var(--gaa-line);
    border-radius: 999px; vertical-align: 1px; white-space: nowrap; }
.gaa-check .gaa-fixed { margin-top: 4px; color: var(--gaa-ink-2); }
.gaa-check .gaa-fixed-year { display: block; color: var(--gaa-muted); font-size: 12px; }
.gaa-table tr.is-muted td { color: var(--gaa-muted); }

/* ---- Histogram (order values) ---------------------------------------- */
.gaa-hist { display: grid; grid-template-columns: repeat(var(--gaa-n, 7), minmax(0, 1fr)); gap: 6px;
    align-items: end; height: 110px; margin-top: 20px; border-bottom: 2px solid var(--gaa-ink); }
.gaa-hist div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.gaa-hist i { position: relative; display: block; flex-shrink: 0; min-height: 1px;
    background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-hist-axis { display: grid; grid-template-columns: repeat(var(--gaa-n, 7), minmax(0, 1fr)); gap: 6px;
    font-size: 11px; color: var(--gaa-muted); text-align: center; margin-bottom: var(--space-2); }

/* ---- Ranked bars (small multiples) ----------------------------------- */
.gaa-multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.gaa-rank-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    margin: 0 0 var(--space-2); }
.gaa-rank-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 2px 8px; margin-bottom: 7px; font-size: 13px; }
.gaa-rank-row span { overflow-wrap: anywhere; }
.gaa-rank-row b { text-align: right; font-weight: 800; }
.gaa-rank-row u { grid-column: 1 / -1; display: block; height: 6px; background: var(--gaa-track); text-decoration: none; }
.gaa-rank-row u i { display: block; height: 100%; background: var(--gaa-ink); }
.gaa-rank-row:not(:first-of-type) u i { background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-rank-tail { font-size: 12px; color: var(--gaa-muted); margin: 0; }

/* ---- Paired bars: share of visits against share of revenue ---------- */
.gaa-pair { margin: var(--space-3) 0 var(--space-4); }
.gaa-pair-row { display: grid; grid-template-columns: 150px 1fr 56px; gap: 4px 10px; align-items: center;
    font-size: 13px; margin-bottom: var(--space-3); }
.gaa-pair-row > span:first-child { grid-row: span 2; font-weight: 800; }
.gaa-pair-bar { height: 10px; background: var(--gaa-track); }
.gaa-pair-bar i { display: block; height: 100%; background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-pair-bar.is-money i { background: var(--gaa-ink); }
.gaa-pair-row b { font-weight: 800; text-align: right; }
.gaa-pair-key { font-size: 12px; color: var(--gaa-muted); margin: 0 0 var(--space-2); }
.gaa-pair-key i { display: inline-block; width: 10px; height: 10px; margin: 0 4px -1px 0; background: var(--color-neutral-500, var(--color-neutral-500)); }
.gaa-pair-key i.is-money { background: var(--gaa-ink); }

/* ---- Scatter: pages per visit × value per visit ---------------------- */
.gaa-plot-wrap { display: grid; grid-template-columns: 22px 1fr; gap: 4px; margin: var(--space-3) 0; }
.gaa-plot-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: var(--gaa-muted);
    text-align: center; }
.gaa-plot { position: relative; height: 320px; border-left: 2px solid var(--gaa-ink);
    border-bottom: 2px solid var(--gaa-ink); background: var(--gaa-paper); }
.gaa-plot-q { position: absolute; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gaa-muted); padding: 6px; }
.gaa-plot-q--tl { left: 0; top: 0; } .gaa-plot-q--tr { right: 0; top: 0; text-align: right; }
.gaa-plot-q--bl { left: 0; bottom: 0; } .gaa-plot-q--br { right: 0; bottom: 0; text-align: right; }
.gaa-plot-q--tl { color: var(--gaa-ink); }
.gaa-plot-v { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--gaa-line); }
.gaa-plot-h { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--gaa-line); }
.gaa-plot-dot { position: absolute; transform: translate(-50%, 50%); border-radius: 50%;
    background: var(--gaa-ink); opacity: .78; width: 7px; height: 7px; }
.gaa-plot-dot.mid { width: 11px; height: 11px; }
.gaa-plot-dot.big { width: 16px; height: 16px; }
.gaa-plot-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--gaa-muted);
    margin-left: 26px; }
.gaa-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3);
    margin: var(--space-4) 0 0; font-size: 13px; }
.gaa-boxes h4 { margin: 0 0 2px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.gaa-boxes p { margin: 0; overflow-wrap: anywhere; color: var(--gaa-ink-2); }

/* ---- Funnel ----------------------------------------------------------- */
.gaa-funnel { margin: var(--space-3) 0 var(--space-2); }
/* Name and numbers on one line, the bar under them at full width: the
   bar keeps its length whatever the column's width. */
.gaa-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: end;
    margin-bottom: 12px; font-size: 13px; }
.gaa-step .gaa-step-bar { grid-column: 1 / -1; }
.gaa-step-name b { display: block; font-weight: 800; }
.gaa-step-name code { font-size: 11px; color: var(--gaa-muted); }
.gaa-step-bar { height: 22px; background: var(--gaa-track); }
.gaa-step-bar i { display: block; height: 100%; min-width: 2px; background: var(--gaa-ink); }
.gaa-step.is-inverted .gaa-step-bar i { background: var(--gaa-accent); }
.gaa-step.is-inverted .gaa-step-n { color: var(--gaa-bad); }
.gaa-step-n { text-align: right; font-weight: 800; }
.gaa-step-n small { display: block; font-weight: 400; font-size: 11px; color: var(--gaa-muted); }

/* ---- Conclusion and glossary ------------------------------------------ */
.gaa-letter-stamp { font-size: 12px; color: var(--gaa-muted); margin: 0 0 var(--space-3); }
.gaa-letter-stamp--stale { color: var(--gaa-warn); }
.gaa-glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4);
    margin: 0; }
.gaa-glossary dt { font-weight: 800; margin-bottom: 2px; }
.gaa-glossary dd { margin: 0; font-size: 13px; line-height: 1.5; }

@media (max-width: 640px) {
  .gaa-check { grid-template-columns: 1fr; gap: 4px; }
  .gaa-pair-row { grid-template-columns: 100px 1fr 48px; }
  .gaa-months { height: 120px; gap: 3px; }

  .gaa-plot { height: 240px; }
}
@media print {
  .gaa-page .gaa-vbar i, .gaa-page .gaa-cellbar i, .gaa-page .gaa-strip i, .gaa-page .gaa-months i,
  .gaa-page .gaa-tare > div, .gaa-page .gaa-ticks i, .gaa-page .gaa-hist i, .gaa-page .gaa-rank-row u i,
  .gaa-page .gaa-pair-bar i, .gaa-page .gaa-plot-dot, .gaa-page .gaa-step-bar i,
  .gaa-page .gaa-ruler-band, .gaa-page .gaa-ruler-mark::before {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}