@analitikisler/ai-tag-debugger 0.18.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +5 -5
- package/README.tr.md +5 -5
- package/package.json +3 -3
- package/src/brand.js +17 -11
- package/src/browser.js +44 -8
- package/src/html/css.js +186 -165
- package/src/html/lib.js +15 -4
- package/src/html/shell.js +7 -7
- package/src/i18n.js +5 -5
- package/src/plan-html.js +9 -8
- package/src/report.js +1 -1
- package/src/whitelabel.js +48 -15
package/src/html/css.js
CHANGED
|
@@ -5,33 +5,45 @@
|
|
|
5
5
|
// mockup drew as a data URI in the filter bar is the sprite's ui-search, placed by the filter bar's markup.
|
|
6
6
|
import { brandCss } from "../whitelabel.js";
|
|
7
7
|
|
|
8
|
-
// ---------- tokens: colours (light, then dark under both selectors), spacing, radii, fonts ----------
|
|
9
|
-
const TOKENS = `/*
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
// ---------- tokens: colours (light, then dark under both selectors), spacing, radii, fonts, motion ----------
|
|
9
|
+
const TOKENS = `/* Tally design system tokens, under the names the builders already use. Light on :root; dark twice
|
|
10
|
+
(OS preference unless the page forces light, and the forced dark theme), so <html data-theme> beats the OS both ways.
|
|
11
|
+
Which Tally token each name follows: --page bg, --card surface, --card-2 surface-2, --well well, --fg text,
|
|
12
|
+
--fg-strong text-strong, --muted muted, --border border, --border-strong border-strong, --accent and --accent-fg accent,
|
|
13
|
+
--accent-bg accent-soft, --selection selection, --shadow-overlay the overlay shadow (popovers and tooltips only).
|
|
14
|
+
Severity: broken bad, warning warn, ok ok, info accent (its value, not var(--accent), so a white label never moves it).
|
|
15
|
+
Risk keeps a hue of its own, a plum (allowed by Tally when risk and broken sit side by side): the report puts them next
|
|
16
|
+
to each other in the score lines, the filter dots, the rail and the card rules, where a dot or a 3 px rule has no room
|
|
17
|
+
for the glyph. Risk still carries its diamond glyph and its word everywhere it has room.
|
|
18
|
+
Each status is one colour for text and marks (-fg = solid); its -bg tint is the colour mixed into --card, 10% light
|
|
19
|
+
and 16% dark. Categories (owners, platforms, viewports, consent) keep their hues, retuned for the navy grounds; GA4 is
|
|
20
|
+
Tally's orange (mark, mark-ink). Every -fg passes 4.5:1 on --page, --card, --card-2, --well and its own -bg, every
|
|
21
|
+
solid 3:1 on --page, --card and --well, in both modes (docs/design/visual-system.md has the table). Builders reference
|
|
22
|
+
these names only, never a hex. --brand-point is the logos' point: the brand's one red, the same as broken
|
|
23
|
+
(brand/ai/BRAND.md §4), so a page never shows two reds. */
|
|
12
24
|
:root{
|
|
13
25
|
color-scheme:light dark;
|
|
14
|
-
--page:#
|
|
15
|
-
--accent:#
|
|
16
|
-
--shadow-
|
|
17
|
-
--sev-broken:#
|
|
18
|
-
--sev-risk:#
|
|
19
|
-
--sev-warning:#
|
|
20
|
-
--sev-info:#
|
|
21
|
-
--sev-ok:#
|
|
22
|
-
--owner-developer:#
|
|
23
|
-
--owner-gtm:#
|
|
24
|
-
--owner-marketing:#
|
|
25
|
-
--plat-ga4:#
|
|
26
|
-
--plat-meta:#
|
|
27
|
-
--plat-google_ads:#
|
|
28
|
-
--vp-desktop:#
|
|
29
|
-
--vp-mobile:#
|
|
30
|
-
--consent-
|
|
31
|
-
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
|
|
26
|
+
--page:#f4f6fa;--card:#ffffff;--card-2:#ecf1f8;--well:#e9eef5;--fg:#142338;--fg-strong:#071529;--muted:#566479;--border:#d5dde8;--border-strong:#78869a;
|
|
27
|
+
--accent:#1161bb;--accent-fg:#1161bb;--accent-bg:#deedff;--selection:#c6defc;
|
|
28
|
+
--shadow-overlay:0 16px 48px rgb(7 21 41 / 14%);
|
|
29
|
+
--brand-point:#c12d30;--sev-broken:#c12d30;--sev-broken-fg:#c12d30;--sev-broken-bg:#f9eaea;
|
|
30
|
+
--sev-risk:#964799;--sev-risk-fg:#964799;--sev-risk-bg:#f5edf5;
|
|
31
|
+
--sev-warning:#8b6200;--sev-warning-fg:#8b6200;--sev-warning-bg:#f3efe6;
|
|
32
|
+
--sev-info:#1161bb;--sev-info-fg:#1161bb;--sev-info-bg:#e7eff8;
|
|
33
|
+
--sev-ok:#197746;--sev-ok-fg:#197746;--sev-ok-bg:#e8f1ed;
|
|
34
|
+
--owner-developer:#7b7ee4;--owner-developer-fg:#5b5bbd;--owner-developer-bg:#f2f2fc;
|
|
35
|
+
--owner-gtm:#2194b9;--owner-gtm-fg:#086f8d;--owner-gtm-bg:#e9f4f8;
|
|
36
|
+
--owner-marketing:#d85f92;--owner-marketing-fg:#af3a6f;--owner-marketing-bg:#fbeff4;
|
|
37
|
+
--plat-ga4:#d46700;--plat-ga4-fg:#b14c00;--plat-ga4-bg:#fbf0e6;
|
|
38
|
+
--plat-meta:#4b85f6;--plat-meta-fg:#2960ce;--plat-meta-bg:#edf3fe;
|
|
39
|
+
--plat-google_ads:#379b55;--plat-google_ads-fg:#027634;--plat-google_ads-bg:#ebf5ee;
|
|
40
|
+
--vp-desktop:#1e9895;--vp-desktop-fg:#08726f;--vp-desktop-bg:#e9f5f4;
|
|
41
|
+
--vp-mobile:#7a922c;--vp-mobile-fg:#596e01;--vp-mobile-bg:#f2f4ea;
|
|
42
|
+
--consent-denied:#a8162c;--consent-denied-fg:#a8162c;--consent-denied-bg:#f6e8ea;
|
|
43
|
+
/* Aliases: a semantic family that means the same as a status or a ground wears its colours, defined once so dark mode follows. */
|
|
44
|
+
--plat-tiktok:var(--fg);--plat-tiktok-fg:var(--fg);--plat-tiktok-bg:var(--card-2);
|
|
45
|
+
--consent-granted:var(--sev-ok);--consent-granted-fg:var(--sev-ok-fg);--consent-granted-bg:var(--sev-ok-bg);
|
|
46
|
+
--consent-none:var(--border-strong);--consent-none-fg:var(--muted);--consent-none-bg:var(--card-2);
|
|
35
47
|
--run-completed:var(--sev-ok);--run-completed-fg:var(--sev-ok-fg);--run-completed-bg:var(--sev-ok-bg);
|
|
36
48
|
--run-incomplete:var(--sev-warning);--run-incomplete-fg:var(--sev-warning-fg);--run-incomplete-bg:var(--sev-warning-bg);
|
|
37
49
|
--group-failed:var(--sev-broken);--group-failed-fg:var(--sev-broken-fg);--group-failed-bg:var(--sev-broken-bg);
|
|
@@ -41,53 +53,51 @@ color-scheme:light dark;
|
|
|
41
53
|
--score-mid:var(--sev-warning);--score-mid-fg:var(--sev-warning-fg);--score-mid-bg:var(--sev-warning-bg);
|
|
42
54
|
--score-pass:var(--sev-ok);--score-pass-fg:var(--sev-ok-fg);--score-pass-bg:var(--sev-ok-bg);
|
|
43
55
|
--score-track:var(--well);
|
|
56
|
+
/* 4 px base. Radii: cells 1, chips, badges and code 2, buttons and inputs 4, cards and panels 6; no pills. */
|
|
44
57
|
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
|
|
45
|
-
--r-
|
|
46
|
-
|
|
47
|
-
--font-
|
|
58
|
+
--r-cell:1px;--r-sm:2px;--r-ctl:4px;--r-md:6px;
|
|
59
|
+
/* The report is one file and ships no fonts: the families are named first and the system stands in where they are not installed. */
|
|
60
|
+
--font-sans:"Google Sans","Segoe UI Variable Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
|
|
61
|
+
--font-display:"Google Sans Flex","Google Sans","Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
|
|
62
|
+
--font-mono:"Google Sans Code",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
|
|
63
|
+
--t-fast:160ms;--t-base:220ms;--ease:cubic-bezier(.2,0,0,1);
|
|
48
64
|
--rail:200px;--top:48px}
|
|
49
65
|
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
|
|
50
|
-
--page:#
|
|
51
|
-
--accent:#
|
|
52
|
-
--shadow-
|
|
53
|
-
--sev-broken:#
|
|
54
|
-
--sev-risk:#
|
|
55
|
-
--sev-warning:#
|
|
56
|
-
--sev-info:#
|
|
57
|
-
--sev-ok:#
|
|
58
|
-
--owner-developer:#
|
|
59
|
-
--owner-gtm:#
|
|
60
|
-
--owner-marketing:#
|
|
61
|
-
--plat-ga4:#
|
|
62
|
-
--plat-meta:#
|
|
63
|
-
--plat-google_ads:#
|
|
64
|
-
--vp-desktop:#
|
|
65
|
-
--vp-mobile:#
|
|
66
|
-
--consent-
|
|
67
|
-
--consent-denied:#D01C29;--consent-denied-fg:#FF8A85;--consent-denied-bg:#4A1418;
|
|
68
|
-
--consent-none:#747982;--consent-none-fg:#ABB0B9;--consent-none-bg:#282B31;
|
|
69
|
-
--plat-tiktok:#E4E8F1;--plat-tiktok-fg:#E4E8F1;--plat-tiktok-bg:#272C3A;}}
|
|
66
|
+
--page:#071529;--card:#0e1e34;--card-2:#15263f;--well:#040e1f;--fg:#e1e8f3;--fg-strong:#f9fbff;--muted:#a2b1c6;--border:#22354e;--border-strong:#607695;
|
|
67
|
+
--accent:#69b1ff;--accent-fg:#69b1ff;--accent-bg:#0c325b;--selection:#123f6f;
|
|
68
|
+
--shadow-overlay:0 16px 48px rgb(2 8 18 / 55%);
|
|
69
|
+
--brand-point:#fa6b6d;--sev-broken:#fa6b6d;--sev-broken-fg:#fa6b6d;--sev-broken-bg:#342a3d;
|
|
70
|
+
--sev-risk:#dc86de;--sev-risk-fg:#dc86de;--sev-risk-bg:#2f2f4f;
|
|
71
|
+
--sev-warning:#f4cf5a;--sev-warning-fg:#f4cf5a;--sev-warning-bg:#333a3a;
|
|
72
|
+
--sev-info:#69b1ff;--sev-info-fg:#69b1ff;--sev-info-bg:#1d3654;
|
|
73
|
+
--sev-ok:#5ad093;--sev-ok-fg:#5ad093;--sev-ok-bg:#1a3a43;
|
|
74
|
+
--owner-developer:#7679de;--owner-developer-fg:#a5abff;--owner-developer-bg:#1f2d4f;
|
|
75
|
+
--owner-gtm:#148eb2;--owner-gtm-fg:#54bde3;--owner-gtm-bg:#0f3048;
|
|
76
|
+
--owner-marketing:#d1598d;--owner-marketing-fg:#ff88b7;--owner-marketing-bg:#2d2742;
|
|
77
|
+
--plat-ga4:#fa8c31;--plat-ga4-fg:#fa8c31;--plat-ga4-bg:#343034;
|
|
78
|
+
--plat-meta:#457fef;--plat-meta-fg:#88b1fe;--plat-meta-bg:#172e52;
|
|
79
|
+
--plat-google_ads:#2f954f;--plat-google_ads-fg:#63c47b;--plat-google_ads-bg:#133138;
|
|
80
|
+
--vp-desktop:#0f928f;--vp-desktop-fg:#53c1bd;--vp-desktop-bg:#0e3143;
|
|
81
|
+
--vp-mobile:#748d25;--vp-mobile-fg:#9fba56;--vp-mobile-bg:#1e3032;
|
|
82
|
+
--consent-denied:#ff5c69;--consent-denied-fg:#ff5c69;--consent-denied-bg:#35283c;}}
|
|
70
83
|
:root[data-theme="dark"]{
|
|
71
|
-
--page:#
|
|
72
|
-
--accent:#
|
|
73
|
-
--shadow-
|
|
74
|
-
--sev-broken:#
|
|
75
|
-
--sev-risk:#
|
|
76
|
-
--sev-warning:#
|
|
77
|
-
--sev-info:#
|
|
78
|
-
--sev-ok:#
|
|
79
|
-
--owner-developer:#
|
|
80
|
-
--owner-gtm:#
|
|
81
|
-
--owner-marketing:#
|
|
82
|
-
--plat-ga4:#
|
|
83
|
-
--plat-meta:#
|
|
84
|
-
--plat-google_ads:#
|
|
85
|
-
--vp-desktop:#
|
|
86
|
-
--vp-mobile:#
|
|
87
|
-
--consent-
|
|
88
|
-
--consent-denied:#D01C29;--consent-denied-fg:#FF8A85;--consent-denied-bg:#4A1418;
|
|
89
|
-
--consent-none:#747982;--consent-none-fg:#ABB0B9;--consent-none-bg:#282B31;
|
|
90
|
-
--plat-tiktok:#E4E8F1;--plat-tiktok-fg:#E4E8F1;--plat-tiktok-bg:#272C3A;}`;
|
|
84
|
+
--page:#071529;--card:#0e1e34;--card-2:#15263f;--well:#040e1f;--fg:#e1e8f3;--fg-strong:#f9fbff;--muted:#a2b1c6;--border:#22354e;--border-strong:#607695;
|
|
85
|
+
--accent:#69b1ff;--accent-fg:#69b1ff;--accent-bg:#0c325b;--selection:#123f6f;
|
|
86
|
+
--shadow-overlay:0 16px 48px rgb(2 8 18 / 55%);
|
|
87
|
+
--brand-point:#fa6b6d;--sev-broken:#fa6b6d;--sev-broken-fg:#fa6b6d;--sev-broken-bg:#342a3d;
|
|
88
|
+
--sev-risk:#dc86de;--sev-risk-fg:#dc86de;--sev-risk-bg:#2f2f4f;
|
|
89
|
+
--sev-warning:#f4cf5a;--sev-warning-fg:#f4cf5a;--sev-warning-bg:#333a3a;
|
|
90
|
+
--sev-info:#69b1ff;--sev-info-fg:#69b1ff;--sev-info-bg:#1d3654;
|
|
91
|
+
--sev-ok:#5ad093;--sev-ok-fg:#5ad093;--sev-ok-bg:#1a3a43;
|
|
92
|
+
--owner-developer:#7679de;--owner-developer-fg:#a5abff;--owner-developer-bg:#1f2d4f;
|
|
93
|
+
--owner-gtm:#148eb2;--owner-gtm-fg:#54bde3;--owner-gtm-bg:#0f3048;
|
|
94
|
+
--owner-marketing:#d1598d;--owner-marketing-fg:#ff88b7;--owner-marketing-bg:#2d2742;
|
|
95
|
+
--plat-ga4:#fa8c31;--plat-ga4-fg:#fa8c31;--plat-ga4-bg:#343034;
|
|
96
|
+
--plat-meta:#457fef;--plat-meta-fg:#88b1fe;--plat-meta-bg:#172e52;
|
|
97
|
+
--plat-google_ads:#2f954f;--plat-google_ads-fg:#63c47b;--plat-google_ads-bg:#133138;
|
|
98
|
+
--vp-desktop:#0f928f;--vp-desktop-fg:#53c1bd;--vp-desktop-bg:#0e3143;
|
|
99
|
+
--vp-mobile:#748d25;--vp-mobile-fg:#9fba56;--vp-mobile-bg:#1e3032;
|
|
100
|
+
--consent-denied:#ff5c69;--consent-denied-fg:#ff5c69;--consent-denied-bg:#35283c;}`;
|
|
91
101
|
// ---------- end of tokens ----------
|
|
92
102
|
|
|
93
103
|
// ---------- components: chips, badges, cards, tabs, filter bar, tables, scorecard ----------
|
|
@@ -101,10 +111,10 @@ html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
|
|
|
101
111
|
body{margin:0;background:var(--page);color:var(--fg);font:400 14px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
|
|
102
112
|
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
|
|
103
113
|
ul,ol{padding:0}
|
|
104
|
-
h1{font
|
|
105
|
-
h2{font-size:17px;line-height:1.3;font-weight:600}
|
|
106
|
-
h3,h4{font-size:14px;line-height:1.4;font-weight:600}
|
|
107
|
-
h5,h6{font-size:12px;line-height:1.4;font-weight:
|
|
114
|
+
h1{font:570 24px/1.2 var(--font-display);letter-spacing:-.012em;color:var(--fg-strong);overflow-wrap:anywhere}
|
|
115
|
+
h2{font-size:17px;line-height:1.3;font-weight:600;color:var(--fg-strong)}
|
|
116
|
+
h3,h4{font-size:14px;line-height:1.4;font-weight:600;color:var(--fg-strong)}
|
|
117
|
+
h5,h6{font-size:12px;line-height:1.4;font-weight:500;color:var(--muted)}
|
|
108
118
|
b,strong{font-weight:600}
|
|
109
119
|
a{color:var(--accent-fg);text-decoration:none}
|
|
110
120
|
a:hover{text-decoration:underline}
|
|
@@ -117,10 +127,11 @@ svg{flex:none}
|
|
|
117
127
|
.xs{font-size:12.5px}
|
|
118
128
|
.num,.tnum{font-variant-numeric:tabular-nums}
|
|
119
129
|
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
|
130
|
+
::selection{background:var(--selection);color:var(--fg)}
|
|
120
131
|
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
|
121
132
|
.n{display:inline-block;min-width:18px;padding:0 5px;border-radius:var(--r-sm);background:var(--well);color:var(--muted);font:500 11px/17px var(--font-mono);text-align:center;font-variant-numeric:tabular-nums}
|
|
122
|
-
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-
|
|
123
|
-
.btn:hover{background:var(--
|
|
133
|
+
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--card);color:var(--fg);font:500 12.5px var(--font-sans);cursor:pointer}
|
|
134
|
+
.btn:hover{background:var(--card-2)}
|
|
124
135
|
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
|
|
125
136
|
|
|
126
137
|
/* ---------- chips ----------
|
|
@@ -133,7 +144,7 @@ svg{flex:none}
|
|
|
133
144
|
.chip>svg{color:var(--k)}
|
|
134
145
|
.chip>svg{width:13px;height:13px}
|
|
135
146
|
.chip>svg:first-child{margin-left:-3px}
|
|
136
|
-
.chip b{font-weight:
|
|
147
|
+
.chip b{font-weight:600}
|
|
137
148
|
.chip .k{color:var(--fg);font-weight:400}
|
|
138
149
|
.chip.mono{font-family:var(--font-mono);font-size:11.5px}
|
|
139
150
|
.chip .dot,.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--k,var(--muted));flex:none}
|
|
@@ -169,9 +180,9 @@ a.chip:hover{text-decoration:none;border-color:var(--k)}
|
|
|
169
180
|
/* Denied shares broken's red on purpose; it is told apart by weight: a deeper red, an outline and a bold value,
|
|
170
181
|
in the mono key/value form, never with the octagon. Broken is a filled tint with the octagon glyph. */
|
|
171
182
|
.chip-consent{font-family:var(--font-mono);font-size:11.5px}
|
|
172
|
-
.chip-consent.denied{border-color:var(--k);font-weight:
|
|
173
|
-
.chip-consent.granted{font-weight:
|
|
174
|
-
.chip-consent.none{font-weight:
|
|
183
|
+
.chip-consent.denied{border-color:var(--k);font-weight:600}
|
|
184
|
+
.chip-consent.granted{font-weight:500}
|
|
185
|
+
.chip-consent.none{font-weight:400}
|
|
175
186
|
|
|
176
187
|
/* ---------- severity badge (C's, unchanged in shape) ---------- */
|
|
177
188
|
.sev-broken{--sev:var(--sev-broken);--sev-fg:var(--sev-broken-fg);--sev-bg:var(--sev-broken-bg)}
|
|
@@ -187,24 +198,22 @@ a.chip:hover{text-decoration:none;border-color:var(--k)}
|
|
|
187
198
|
/* ---------- cards ----------
|
|
188
199
|
<details class="card [sev-x]"><summary>…</summary><div class="body">…</div></details>, collapsed unless [open].
|
|
189
200
|
A plain <div class="card"> is the Summary's static card. */
|
|
190
|
-
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
|
|
201
|
+
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);min-width:0}
|
|
191
202
|
.card+.card{margin-top:var(--s2)}
|
|
192
203
|
.card[class*=sev-]{border-left:3px solid var(--sev)}
|
|
193
204
|
.card>.body{padding:var(--s3) var(--s4) var(--s4)}
|
|
194
205
|
div.card>.body{padding-top:var(--s4)}
|
|
195
206
|
details.card>summary{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;min-height:44px;padding:10px 40px 10px var(--s4);position:relative;cursor:pointer;list-style:none;border-radius:calc(var(--r-md) - 1px);user-select:none}
|
|
196
207
|
details.card>summary::-webkit-details-marker{display:none}
|
|
197
|
-
details.card>summary::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(-45deg);transition:transform
|
|
208
|
+
details.card>summary::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
|
|
198
209
|
details.card[open]>summary::after{transform:rotate(45deg);margin-top:-6px}
|
|
199
|
-
details.card>summary:hover{background:var(--
|
|
210
|
+
details.card>summary:hover{background:var(--card-2)}
|
|
200
211
|
details.card>summary:hover::after{border-color:var(--fg)}
|
|
201
212
|
details.card>summary:focus-visible{outline-offset:-2px}
|
|
202
213
|
.revealed:focus,.revealed:focus-visible{outline:none}
|
|
203
214
|
details.card[open]>summary{border-bottom:1px solid var(--border);border-bottom-left-radius:0;border-bottom-right-radius:0}
|
|
204
215
|
details.card>summary .t{font-weight:600;min-width:0;overflow-wrap:anywhere}
|
|
205
216
|
details.card>summary .end{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
|
|
206
|
-
/* nested cards sit inside a body: hairline only, no second shadow */
|
|
207
|
-
.card .card{box-shadow:none}
|
|
208
217
|
.card .card>summary{min-height:38px;padding-top:7px;padding-bottom:7px}
|
|
209
218
|
|
|
210
219
|
/* ---------- tabs ----------
|
|
@@ -213,9 +222,9 @@ details.card>summary .end{margin-left:auto;display:inline-flex;align-items:cente
|
|
|
213
222
|
.tabs{min-width:0}
|
|
214
223
|
.tabs [role=tablist]{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;position:relative}
|
|
215
224
|
.tabs [role=tablist]::-webkit-scrollbar{display:none}
|
|
216
|
-
.tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 12px;color:var(--muted);font:500 13px/1.3 var(--font-sans);white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color
|
|
225
|
+
.tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 12px;color:var(--muted);font:500 13px/1.3 var(--font-sans);white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
|
|
217
226
|
.tabs [role=tab]:hover{color:var(--fg)}
|
|
218
|
-
.tabs [role=tab][aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent)}
|
|
227
|
+
.tabs [role=tab][aria-selected=true]{color:var(--fg-strong);border-bottom-color:var(--accent)}
|
|
219
228
|
.tabs [role=tab][aria-selected=true] .n{background:var(--accent-bg);color:var(--accent-fg)}
|
|
220
229
|
.tabs [role=tab]:focus-visible{outline-offset:-2px}
|
|
221
230
|
.tabs [role=tabpanel]{padding-top:var(--s3);min-width:0}
|
|
@@ -224,24 +233,24 @@ details.card>summary .end{margin-left:auto;display:inline-flex;align-items:cente
|
|
|
224
233
|
.tabs:not(.js) [role=tablist]{display:none}
|
|
225
234
|
.tabs:not(.js) [role=tabpanel]{display:block}
|
|
226
235
|
.tabs:not(.js) [role=tabpanel]+[role=tabpanel]{margin-top:var(--s3);border-top:1px solid var(--border)}
|
|
227
|
-
.tabs:not(.js) [role=tabpanel][data-label]::before{content:attr(data-label);display:block;margin-bottom:var(--s2);font:
|
|
236
|
+
.tabs:not(.js) [role=tabpanel][data-label]::before{content:attr(data-label);display:block;margin-bottom:var(--s2);font:500 12px/1.4 var(--font-sans);color:var(--muted)}
|
|
228
237
|
|
|
229
238
|
/* ---------- filter bar ----------
|
|
230
239
|
<div class="filterbar" data-filterbar="#LIST"><span class="fl">Severity</span><button data-filter="sev=broken"
|
|
231
240
|
aria-pressed="false" class="chip-sev broken"><span class="dot"></span>Broken <span class="n">2</span></button>…
|
|
232
241
|
<input type="search" data-filter-search placeholder="Search"><p data-filter-count>4 of 4</p></div> */
|
|
233
|
-
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:var(--s2) var(--s3);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)
|
|
234
|
-
.filterbar .fl{font:
|
|
242
|
+
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:var(--s2) var(--s3);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}
|
|
243
|
+
.filterbar .fl{font:500 12px/1 var(--font-sans);color:var(--muted);margin:0 2px 0 6px}
|
|
235
244
|
.filterbar .fl:first-child{margin-left:0}
|
|
236
245
|
.filterbar .sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--border)}
|
|
237
246
|
.filterbar [data-filter]{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--fg);font:500 12.5px/1 var(--font-sans);white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
|
|
238
|
-
.filterbar [data-filter]:hover{border-color:var(--border-strong);background:var(--
|
|
247
|
+
.filterbar [data-filter]:hover{border-color:var(--border-strong);background:var(--card-2)}
|
|
239
248
|
.filterbar [data-filter][aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-fg)}
|
|
240
249
|
.filterbar [data-filter][aria-pressed=true]::before{content:"";width:8px;height:4px;margin:-3px 0 0 -1px;border-left:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(-45deg)}
|
|
241
250
|
.filterbar [data-filter] svg{width:14px;height:14px}
|
|
242
|
-
.filterbar [data-filter-search]{flex:1 1 180px;min-width:0;max-width:320px;height:30px;margin-left:auto;padding:0 12px 0 32px;border:1px solid var(--border);border-radius:var(--r-
|
|
251
|
+
.filterbar [data-filter-search]{flex:1 1 180px;min-width:0;max-width:320px;height:30px;margin-left:auto;padding:0 12px 0 32px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--card);color:var(--fg);font:400 13px var(--font-sans);}
|
|
243
252
|
.filterbar [data-filter-search]::placeholder{color:var(--muted)}
|
|
244
|
-
.filterbar [data-filter-search]:focus{outline:2px solid var(--accent);outline-offset:
|
|
253
|
+
.filterbar [data-filter-search]:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
|
|
245
254
|
.filterbar [data-filter-count]{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
|
|
246
255
|
.filterbar [data-filter-count]:empty{display:none}
|
|
247
256
|
html:not(.js) .filterbar{display:none}
|
|
@@ -250,12 +259,12 @@ html:not(.js) .filterbar{display:none}
|
|
|
250
259
|
.tscroll{overflow-x:auto;position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card)}
|
|
251
260
|
.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
|
|
252
261
|
.tbl th,.tbl td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere}
|
|
253
|
-
.tbl thead th{font-weight:500;font-size:12px;color:var(--muted);
|
|
262
|
+
.tbl thead th{font-weight:500;font-size:12px;color:var(--muted);border-bottom-color:var(--border-strong);white-space:nowrap}
|
|
254
263
|
.tbl tbody th{font-weight:500}
|
|
255
264
|
.tbl th:first-child,.tbl td:first-child{padding-left:var(--s4)}
|
|
256
265
|
.tbl th:last-child,.tbl td:last-child{padding-right:var(--s4)}
|
|
257
266
|
.tbl tbody tr:last-child>*{border-bottom:0}
|
|
258
|
-
.tbl tbody tr:hover>*{background:
|
|
267
|
+
.tbl tbody tr:hover>*{background:var(--card-2)}
|
|
259
268
|
.tbl .num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
|
|
260
269
|
.tbl .bad{color:var(--sev-broken-fg);font-weight:600}
|
|
261
270
|
.tbl .dim{color:var(--muted)}
|
|
@@ -264,11 +273,11 @@ html:not(.js) .filterbar{display:none}
|
|
|
264
273
|
<div class="grid"><div class="info"><span class="ic-plate"><svg/></span><span class="lbl">Vendors</span>
|
|
265
274
|
<span class="val">2 of 4</span><span class="sub">GA4 · Meta</span></div></div> */
|
|
266
275
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
|
|
267
|
-
.grid>.info{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic lbl" "val val" "sub sub";align-items:center;gap:6px var(--s2);padding:14px var(--s4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
|
|
276
|
+
.grid>.info{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic lbl" "val val" "sub sub";align-items:center;gap:6px var(--s2);padding:14px var(--s4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);min-width:0}
|
|
268
277
|
.info .ic-plate{grid-area:ic;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-sm);background:var(--well);color:var(--muted)}
|
|
269
278
|
.info .ic-plate svg{width:15px;height:15px}
|
|
270
279
|
.info .lbl{grid-area:lbl;font-size:12.5px;font-weight:500;color:var(--muted)}
|
|
271
|
-
.info .val{grid-area:val;margin-top:4px;font-size:20px;line-height:1.2;font-weight:
|
|
280
|
+
.info .val{grid-area:val;margin-top:4px;font-size:20px;line-height:1.2;font-weight:600;color:var(--fg-strong);letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
|
|
272
281
|
.info .val small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
|
|
273
282
|
.info .sub{grid-area:sub;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}
|
|
274
283
|
.grid>.info.wide{grid-column:span 2}
|
|
@@ -288,14 +297,14 @@ html:not(.js) .filterbar{display:none}
|
|
|
288
297
|
.band-fail{--band:var(--score-fail);--band-fg:var(--score-fail-fg);--band-bg:var(--score-fail-bg)}
|
|
289
298
|
.band-mid{--band:var(--score-mid);--band-fg:var(--score-mid-fg);--band-bg:var(--score-mid-bg)}
|
|
290
299
|
.band-pass{--band:var(--score-pass);--band-fg:var(--score-pass-fg);--band-bg:var(--score-pass-bg)}
|
|
291
|
-
.scorecard{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-areas:"ring verdict" "ring head" "ring costs" "chips chips";column-gap:var(--s6);align-items:start;padding:var(--s5) var(--s6);background:var(--card);border:1px solid var(--border);border-top:
|
|
300
|
+
.scorecard{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-areas:"ring verdict" "ring head" "ring costs" "chips chips";column-gap:var(--s6);align-items:start;padding:var(--s5) var(--s6);background:var(--card);border:1px solid var(--border);border-top:3px solid var(--band);border-radius:var(--r-md)}
|
|
292
301
|
.sc-ring{grid-area:ring;position:relative;width:120px;height:120px;display:grid;place-items:center;align-self:center}
|
|
293
302
|
.sc-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
|
|
294
303
|
.sc-ring .trk{fill:none;stroke:var(--score-track);stroke-width:10}
|
|
295
|
-
.sc-ring .arc{fill:none;stroke:var(--band);stroke-width:10;stroke-linecap:
|
|
296
|
-
.sc-num{position:relative;font:
|
|
304
|
+
.sc-ring .arc{fill:none;stroke:var(--band);stroke-width:10;stroke-linecap:butt;stroke-dasharray:var(--score) 100}
|
|
305
|
+
.sc-num{position:relative;font:570 44px/1 var(--font-display);letter-spacing:-.02em;color:var(--fg-strong);font-variant-numeric:tabular-nums;margin-top:-8px}
|
|
297
306
|
.sc-of{position:absolute;left:0;right:0;top:calc(50% + 18px);text-align:center;font:500 12px/1 var(--font-mono);color:var(--muted)}
|
|
298
|
-
.sc-verdict{grid-area:verdict;align-self:end;display:flex;align-items:center;gap:8px;font:
|
|
307
|
+
.sc-verdict{grid-area:verdict;align-self:end;display:flex;align-items:center;gap:8px;font:570 30px/1.1 var(--font-display);letter-spacing:-.012em;color:var(--sev,var(--band))}
|
|
299
308
|
/* the verdict is large text (24–30px bold), where 3:1 is the bar; the solid band colour clears it in both modes
|
|
300
309
|
and keeps the amber of "Needs attention" from turning brown, as the 4.5:1 text step would */
|
|
301
310
|
.sc-verdict .ic{width:26px;height:26px}
|
|
@@ -323,7 +332,6 @@ html:not(.js) .filterbar{display:none}
|
|
|
323
332
|
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
|
|
324
333
|
@media print{
|
|
325
334
|
body{background:#fff;font-size:12.5px}
|
|
326
|
-
.card,.grid>.info,.scorecard,.filterbar{box-shadow:none}
|
|
327
335
|
.chip,.badge,.n{background:none!important;border:1px solid currentColor}
|
|
328
336
|
.chip.zero{border-color:var(--border)}
|
|
329
337
|
.tbl thead th{background:none;border-bottom:1px solid #000}
|
|
@@ -331,12 +339,12 @@ html:not(.js) .filterbar{display:none}
|
|
|
331
339
|
details.card>summary:hover{background:none}
|
|
332
340
|
details.card>summary::after,.filterbar,.tabs [role=tablist]{display:none}
|
|
333
341
|
.tabs [role=tabpanel],.tabs [role=tabpanel][hidden]{display:block}
|
|
334
|
-
.tabs [role=tabpanel][data-label]::before{content:attr(data-label);display:block;margin:var(--s2) 0;font:
|
|
342
|
+
.tabs [role=tabpanel][data-label]::before{content:attr(data-label);display:block;margin:var(--s2) 0;font:500 12px/1.4 var(--font-sans)}
|
|
335
343
|
/* writePdf prints with JavaScript off, so a card marked data-print-open is opened by CSS alone */
|
|
336
344
|
details.card[data-print-open]::details-content{content-visibility:visible;display:block}
|
|
337
345
|
details.card[data-print-open]>summary{border-bottom:1px solid var(--border)}
|
|
338
346
|
.card,.grid>.info,.scorecard,.tbl tr{break-inside:avoid}
|
|
339
|
-
.scorecard{border-top-width:
|
|
347
|
+
.scorecard{border-top-width:3px}
|
|
340
348
|
}`;
|
|
341
349
|
// ---------- end of components ----------
|
|
342
350
|
|
|
@@ -353,15 +361,16 @@ const SHELL = `/* Page shell: skip link, top bar, rail (expanded 200 px, collaps
|
|
|
353
361
|
html.js .js-only{display:inline-flex!important}
|
|
354
362
|
html.js .sec-tools.js-only{display:flex!important}
|
|
355
363
|
.logo{display:inline-flex}
|
|
364
|
+
svg.logo{display:inline-block;flex:none;color:var(--fg-strong)}
|
|
356
365
|
.logo .l-dark{display:none}
|
|
357
366
|
html[data-theme="dark"] .logo .l-light{display:none}
|
|
358
367
|
html[data-theme="dark"] .logo .l-dark{display:inline}
|
|
359
368
|
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .logo .l-light{display:none}html:not([data-theme="light"]) .logo .l-dark{display:inline}}
|
|
360
|
-
.eyebrow{font:
|
|
369
|
+
.eyebrow{font:500 12px/1.4 var(--font-sans);color:var(--muted)}
|
|
361
370
|
.mock-note{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2) var(--s3);margin:var(--s3) 0 var(--s4);border:1px dashed var(--sev-info);border-radius:var(--r-sm);color:var(--sev-info-fg);font-size:12.5px}
|
|
362
371
|
.mock-note .ic{margin-top:2px}
|
|
363
372
|
|
|
364
|
-
.skip{position:absolute;left:var(--s4);top:-48px;z-index:50;padding:var(--s2) var(--s3);background:var(--card);border:1px solid var(--border);border-radius:var(--r-
|
|
373
|
+
.skip{position:absolute;left:var(--s4);top:-48px;z-index:50;padding:var(--s2) var(--s3);background:var(--card);border:1px solid var(--border);border-radius:var(--r-ctl);color:var(--fg)}
|
|
365
374
|
.skip:focus{top:var(--s2)}
|
|
366
375
|
|
|
367
376
|
/* ---------- top bar ---------- */
|
|
@@ -372,36 +381,36 @@ html[data-theme="dark"] .logo .l-dark{display:inline}
|
|
|
372
381
|
.top-site b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
|
|
373
382
|
.top-date{font-size:12.5px;font-variant-numeric:tabular-nums}
|
|
374
383
|
.top-verdict{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--border);border-color:color-mix(in srgb,var(--v) 45%,var(--border));border-radius:var(--r-sm);background:var(--card);color:var(--v-fg);font:500 12.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;flex:none}
|
|
375
|
-
.top-verdict b{font-weight:
|
|
384
|
+
.top-verdict b{font-weight:600;font-size:14px}
|
|
376
385
|
.top-verdict .sc-l{color:var(--muted)}
|
|
377
|
-
.top-verdict:hover{text-decoration:none;
|
|
386
|
+
.top-verdict:hover{text-decoration:none;background:var(--card-2)}
|
|
378
387
|
.top-verdict .sc{font-weight:500;color:var(--muted)}
|
|
379
388
|
.v-fail{--v:var(--score-fail);--v-fg:var(--score-fail-fg);--v-bg:var(--score-fail-bg)}
|
|
380
389
|
.v-mid{--v:var(--score-mid);--v-fg:var(--score-mid-fg);--v-bg:var(--score-mid-bg)}
|
|
381
390
|
.v-pass{--v:var(--score-pass);--v-fg:var(--score-pass-fg);--v-bg:var(--score-pass-bg)}
|
|
382
391
|
.top-end{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
|
|
383
392
|
.byline{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted);margin-right:var(--s2)}
|
|
384
|
-
.mock-switch{align-items:center;gap:.3em;height:28px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:var(--r-
|
|
393
|
+
.mock-switch{align-items:center;gap:.3em;height:28px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:var(--r-ctl);background:none;color:var(--muted);font:500 12px var(--font-sans);cursor:pointer}
|
|
385
394
|
.mock-switch:hover{color:var(--fg);border-color:var(--muted)}
|
|
386
395
|
.mock-switch[aria-pressed=true]{border-color:var(--sev-info);color:var(--sev-info-fg);background:var(--sev-info-bg)}
|
|
387
|
-
.icon-btn{align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-
|
|
388
|
-
.icon-btn:hover{background:var(--
|
|
396
|
+
.icon-btn{align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-ctl);background:none;color:var(--muted);cursor:pointer}
|
|
397
|
+
.icon-btn:hover{background:var(--card-2);color:var(--fg)}
|
|
389
398
|
|
|
390
399
|
/* ---------- shell and rail ---------- */
|
|
391
400
|
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
|
|
392
401
|
.rail{position:sticky;top:var(--top);z-index:20;width:var(--rail);height:calc(100vh - var(--top));overflow:hidden auto;padding:var(--s2) 4px;border-right:1px solid var(--border);background:var(--card)}
|
|
393
|
-
html.rail-anim .rail{transition:width
|
|
402
|
+
html.rail-anim .rail{transition:width var(--t-base) var(--ease)}
|
|
394
403
|
.rail ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
|
|
395
404
|
.r-head{display:flex;margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--border)}
|
|
396
|
-
.r-toggle,.rail a{position:relative;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 11px;border-radius:var(--r-
|
|
405
|
+
.r-toggle,.rail a{position:relative;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 11px;border-radius:var(--r-ctl);color:var(--fg);font-size:13.5px;white-space:nowrap}
|
|
397
406
|
.r-toggle{width:40px;border:0;background:none;color:var(--muted);cursor:pointer}
|
|
398
|
-
.r-toggle .ic{transform:rotate(180deg);transition:transform
|
|
399
|
-
.r-toggle:hover,.rail a[href]:hover{background:var(--
|
|
407
|
+
.r-toggle .ic{transform:rotate(180deg);transition:transform var(--t-base) var(--ease)}
|
|
408
|
+
.r-toggle:hover,.rail a[href]:hover{background:var(--card-2);text-decoration:none}
|
|
400
409
|
.rail a[aria-disabled]{color:var(--muted);opacity:.6}
|
|
401
|
-
.rail a[aria-current]{background:var(--accent-bg);color:var(--accent-fg);font-weight:600;box-shadow:inset
|
|
410
|
+
.rail a[aria-current]{background:var(--accent-bg);color:var(--accent-fg);font-weight:600;box-shadow:inset 2px 0 var(--accent)}
|
|
402
411
|
.rail .ic{width:18px;height:18px}
|
|
403
|
-
.r-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity
|
|
404
|
-
.r-t{display:inline-flex;align-items:center;min-width:20px;justify-content:center;padding:0 6px;border-radius:var(--r-
|
|
412
|
+
.r-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--t-fast) var(--ease)}
|
|
413
|
+
.r-t{display:inline-flex;align-items:center;min-width:20px;justify-content:center;padding:0 6px;border-radius:var(--r-sm);background:var(--t-bg);color:var(--t-fg);font:500 11.5px/18px var(--font-mono);font-variant-numeric:tabular-nums}
|
|
405
414
|
.r-t .ic{width:14px;height:14px;color:var(--t)}
|
|
406
415
|
.r-t:has(.ic){background:none;padding:0}
|
|
407
416
|
.r-d{display:none;position:absolute;left:26px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--t);box-shadow:0 0 0 2px var(--card)}
|
|
@@ -414,7 +423,7 @@ html.rail-anim .rail{transition:width .2s ease}
|
|
|
414
423
|
[data-tone=incomplete]{--t:var(--run-incomplete);--t-fg:var(--run-incomplete-fg);--t-bg:var(--run-incomplete-bg)}
|
|
415
424
|
[data-tone=neutral]{--t:var(--muted);--t-fg:var(--muted);--t-bg:var(--well)}
|
|
416
425
|
/* tooltip from data-tip: always on the toggle, on the links only when collapsed */
|
|
417
|
-
.rail [data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:4px 8px;border-radius:var(--r-
|
|
426
|
+
.rail [data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:4px 8px;border-radius:var(--r-ctl);background:var(--fg);color:var(--card);font:500 12px/1.4 var(--font-sans);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;z-index:40;box-shadow:var(--shadow-overlay)}
|
|
418
427
|
.r-toggle:is(:hover,:focus-visible)::after{opacity:1;visibility:visible}
|
|
419
428
|
@media (min-width:720px){
|
|
420
429
|
html[data-rail=collapsed] .rail{width:48px;overflow:visible}
|
|
@@ -444,7 +453,7 @@ html:not(.js) main>.sec[id^="failed-"]{display:none}
|
|
|
444
453
|
@keyframes aitd-flash{from{background-color:var(--accent-bg)}}
|
|
445
454
|
|
|
446
455
|
.footer{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-top:1px solid var(--border);background:var(--card)}
|
|
447
|
-
.footer img{vertical-align:-3px}
|
|
456
|
+
.footer img,.f-atd .logo{vertical-align:-3px}
|
|
448
457
|
|
|
449
458
|
/* ---------- under 720 px: the rail becomes a strip under the top bar ---------- */
|
|
450
459
|
@media (max-width:719.98px){
|
|
@@ -456,7 +465,7 @@ html:not(.js) main>.sec[id^="failed-"]{display:none}
|
|
|
456
465
|
.shell{display:block}
|
|
457
466
|
.rail{top:var(--top);width:auto;height:auto;padding:0;border-right:0;border-bottom:1px solid var(--border);overflow:visible}
|
|
458
467
|
.r-head{display:none}
|
|
459
|
-
.rail ul{display:flex;gap:0;padding:0 var(--s2);overflow-x:auto;scrollbar-width:none
|
|
468
|
+
.rail ul{display:flex;gap:0;padding:0 var(--s2);overflow-x:auto;scrollbar-width:none}
|
|
460
469
|
.rail ul::-webkit-scrollbar{display:none}
|
|
461
470
|
.rail a{height:40px;gap:6px;padding:0 10px;border-radius:0;font-size:13px;border-bottom:2px solid transparent}
|
|
462
471
|
.rail a>.ic{display:none}
|
|
@@ -514,19 +523,21 @@ const SUMMARY = `/* Summary (SPEC §2): scorecard with status chips, then six "a
|
|
|
514
523
|
a page holds it only when a finding was accepted. */
|
|
515
524
|
.sm .scorecard{grid-template-areas:"ring verdict" "ring head" "ring ai" "ring costs" "chips chips" "acc acc"}
|
|
516
525
|
.sm .sc-ai{grid-area:ai;margin-top:var(--s1);max-width:72ch;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
517
|
-
.sm .sc-ai .ai-l{margin-right:4px;font:600
|
|
526
|
+
.sm .sc-ai .ai-l{margin-right:4px;font:600 12px/1 var(--font-sans)}
|
|
518
527
|
.sm .scorecard>p.meta{grid-area:acc;margin-top:var(--s2);font-size:12.5px;color:var(--muted)}
|
|
519
528
|
.sm .info .val .sm-note{font-size:14px;font-weight:500;color:var(--muted)}
|
|
520
529
|
|
|
521
|
-
/* explanation lines: one subgrid so points, text, platform chips and the where chip line up across lines
|
|
530
|
+
/* explanation lines: one subgrid so points, text, platform chips and the where chip line up across lines. The points
|
|
531
|
+
sit on the text's first baseline and the chips at the top of the row, so a line that wraps (a wider system font, a
|
|
532
|
+
longer language) keeps them beside its first line instead of halfway down; a one-line row stays centred in its 32px. */
|
|
522
533
|
.sm .sc-costs{grid-template-columns:44px auto auto auto minmax(0,1fr);column-gap:var(--s3);row-gap:0;margin-top:var(--s3)}
|
|
523
534
|
.sm .sc-costs li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;font-size:14px}
|
|
524
|
-
.sm .sc-costs li>a{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:32px;padding:3px var(--s2);margin:0 calc(-1 * var(--s2));border-radius:var(--r-
|
|
525
|
-
.sm .sc-costs li>a:hover{background:var(--
|
|
535
|
+
.sm .sc-costs li>a{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;align-content:center;min-height:32px;padding:3px var(--s2);margin:0 calc(-1 * var(--s2));border-radius:var(--r-ctl);color:var(--fg)}
|
|
536
|
+
.sm .sc-costs li>a:hover{background:var(--card-2);text-decoration:none}
|
|
526
537
|
.sm .sc-costs .pts{grid-column:1;font-size:14px}
|
|
527
538
|
.sm .sc-costs .what{grid-column:2;min-width:0}
|
|
528
|
-
.sm .sc-costs .pl{grid-column:3;display:flex;gap:4px}
|
|
529
|
-
.sm .sc-costs .wh{grid-column:4;display:flex;gap:4px}
|
|
539
|
+
.sm .sc-costs .pl{grid-column:3;display:flex;gap:4px;align-self:start}
|
|
540
|
+
.sm .sc-costs .wh{grid-column:4;display:flex;gap:4px;align-self:start}
|
|
530
541
|
.sm .sc-costs.nopts{grid-template-columns:auto auto auto minmax(0,1fr)}
|
|
531
542
|
.sm .sc-costs.nopts .what{grid-column:1}
|
|
532
543
|
.sm .sc-costs.nopts .pl{grid-column:2}
|
|
@@ -554,9 +565,9 @@ const SUMMARY = `/* Summary (SPEC §2): scorecard with status chips, then six "a
|
|
|
554
565
|
.sm-matrix{border-collapse:collapse;font-size:13px;line-height:1}
|
|
555
566
|
.sm-matrix th,.sm-matrix td{padding:0}
|
|
556
567
|
.sm-matrix thead th{padding:0 0 4px 9px;text-align:left;color:var(--muted)}
|
|
557
|
-
.sm-matrix tbody th{padding-right:var(--s2);text-align:left;font-weight:500;color:var(--fg)}
|
|
558
|
-
.sm-matrix td a{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:var(--r-
|
|
559
|
-
.sm-matrix td a:hover{background:var(--
|
|
568
|
+
.sm-matrix tbody th{padding-right:var(--s2);text-align:left;font-weight:500;color:var(--fg);overflow-wrap:break-word}
|
|
569
|
+
.sm-matrix td a{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:var(--r-ctl);color:var(--fg)}
|
|
570
|
+
.sm-matrix td a:hover{background:var(--card-2);text-decoration:none}
|
|
560
571
|
.sm-matrix .chip{width:20px;height:20px;padding:0;justify-content:center}
|
|
561
572
|
.sm-matrix .chip>svg:first-child{margin:0}
|
|
562
573
|
.sm-logo{display:inline-flex}
|
|
@@ -564,10 +575,12 @@ const SUMMARY = `/* Summary (SPEC §2): scorecard with status chips, then six "a
|
|
|
564
575
|
/* four vendor chips wrap 3 + 1 in a third-width card; two by two reads as a set */
|
|
565
576
|
@media (min-width:1024px){.sm .sm-chipval .val .chips{display:grid;grid-template-columns:repeat(2,max-content)}}
|
|
566
577
|
@media (max-width:1023px){.sm .sm-about{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
567
|
-
|
|
578
|
+
/* The score lines stack below 1100px: between 900 and 1100 with the rail open, the three chip columns left the text
|
|
579
|
+
column too narrow to keep an event name on one line. */
|
|
580
|
+
@media (max-width:1099px){
|
|
568
581
|
.sm .sc-costs,.sm .sc-costs.nopts{display:grid;grid-template-columns:minmax(0,1fr)}
|
|
569
582
|
.sm .sc-costs li,.sm .sc-costs li>a{grid-column:auto;grid-template-columns:none}
|
|
570
|
-
.sm .sc-costs li>a{display:flex;flex-wrap:wrap;align-items:
|
|
583
|
+
.sm .sc-costs li>a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s2);padding:var(--s1) var(--s2)}
|
|
571
584
|
.sm .sc-costs .pts{flex:0 0 36px}
|
|
572
585
|
.sm .sc-costs .what{flex:1 1 calc(100% - 52px)}
|
|
573
586
|
.sm .sc-costs:not(.nopts) .pl{margin-left:44px}
|
|
@@ -580,6 +593,15 @@ const SUMMARY = `/* Summary (SPEC §2): scorecard with status chips, then six "a
|
|
|
580
593
|
.sm .sc-of{top:calc(50% + 13px)}
|
|
581
594
|
}
|
|
582
595
|
@media (max-width:599px){.sm .sm-about{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}
|
|
596
|
+
/* The score and "/100" as one group centred in the ring, whatever font the system lends: trimmed to the figures' cap
|
|
597
|
+
height and baseline, their boxes no longer carry the font's own ascent and descent, which left the group 2.4px below
|
|
598
|
+
the middle in Google Sans and 4.1px in SF. A browser without text-box keeps the margins above. */
|
|
599
|
+
@supports (text-box:trim-both cap alphabetic){
|
|
600
|
+
.sm .sc-ring:has(.sc-of){align-content:center;row-gap:10px}
|
|
601
|
+
.sm .sc-ring .sc-num:not(.sm-none),.sm .sc-ring .sc-of{text-box:trim-both cap alphabetic;margin-top:0}
|
|
602
|
+
.sm .sc-ring .sc-of{position:static}
|
|
603
|
+
@media (max-width:640px){.sm .sc-ring:has(.sc-of){row-gap:5px}}
|
|
604
|
+
}
|
|
583
605
|
@media print{
|
|
584
606
|
.sm .sc-ai{white-space:normal}
|
|
585
607
|
.sm .sc-costs li>a{padding-left:0;padding-right:0;margin:0}
|
|
@@ -602,7 +624,7 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
602
624
|
.fnd .fb-rest{order:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;min-width:0}
|
|
603
625
|
.fnd .fg{display:inline-flex;align-items:center;gap:4px;flex:none}
|
|
604
626
|
.fnd .fg+.fg,.fnd .fb-rest .fg+.fg{margin-left:8px;padding-left:8px;border-left:1px solid var(--border)}
|
|
605
|
-
.fnd .filterbar .fl{margin:0 4px 0 0;font-size:
|
|
627
|
+
.fnd .filterbar .fl{margin:0 4px 0 0;font-size:12px}
|
|
606
628
|
.fnd .filterbar [data-filter]{height:26px;padding:0 8px;gap:5px;font-size:12px}
|
|
607
629
|
.fnd .filterbar [data-filter] .n{min-width:0;padding:0;background:none;font-size:11px;line-height:1;color:var(--muted)}
|
|
608
630
|
.fnd .filterbar [data-filter][aria-pressed=true] .n{color:var(--accent-fg)}
|
|
@@ -615,7 +637,7 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
615
637
|
.fnd .fb-search{order:6;position:relative;display:flex;align-items:center;flex:1 1 120px;min-width:100px;max-width:260px;margin-left:auto}
|
|
616
638
|
.fnd .fb-search>svg{position:absolute;left:11px;width:14px;height:14px;color:var(--muted);pointer-events:none}
|
|
617
639
|
.fnd .filterbar [data-filter-search]{flex:1 1 auto;width:100%;max-width:none;margin-left:0;height:28px}
|
|
618
|
-
.fnd .fb-clear{order:2;margin-left:auto;height:28px;padding:0 10px;border:0;border-radius:var(--r-
|
|
640
|
+
.fnd .fb-clear{order:2;margin-left:auto;height:28px;padding:0 10px;border:0;border-radius:var(--r-ctl);background:none;color:var(--accent-fg);font:500 12.5px var(--font-sans);cursor:pointer}
|
|
619
641
|
.fnd .fb-clear:hover{background:var(--accent-bg)}
|
|
620
642
|
.fnd .fb-clear[hidden]~[data-filter-count]{margin-left:auto}
|
|
621
643
|
.fnd .filterbar [data-filter-count]{order:3;flex:none;margin:0 0 0 -4px;min-width:46px;text-align:right;font:500 12px var(--font-mono);color:var(--muted);white-space:nowrap}
|
|
@@ -624,7 +646,7 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
624
646
|
@media (max-width:719px){
|
|
625
647
|
.fnd .filterbar{padding:8px}
|
|
626
648
|
.fnd .fb-search{order:1;flex:1 1 100px;min-width:100px;max-width:none;margin-left:0}
|
|
627
|
-
.fnd .fb-fold{order:2;display:inline-block;appearance:none;-webkit-appearance:none;margin:0;height:28px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-
|
|
649
|
+
.fnd .fb-fold{order:2;display:inline-block;appearance:none;-webkit-appearance:none;margin:0;height:28px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--card);color:var(--fg);cursor:pointer;font:500 12.5px/26px var(--font-sans);white-space:nowrap}
|
|
628
650
|
.fnd .fb-fold::after{content:attr(data-label)}
|
|
629
651
|
.fnd .filterbar:has([aria-pressed=true]) .fb-fold{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-fg)}
|
|
630
652
|
.fnd .filterbar:has([aria-pressed=true]) .fb-fold::after{content:attr(data-label) " (" counter(fc) ")"}
|
|
@@ -652,11 +674,11 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
652
674
|
.fnd .group>h3{margin-bottom:var(--s2)}
|
|
653
675
|
.fnd details.group>summary{display:flex;align-items:center;position:relative;padding:2px 28px var(--s2) 0;cursor:pointer;list-style:none;user-select:none}
|
|
654
676
|
.fnd details.group>summary::-webkit-details-marker{display:none}
|
|
655
|
-
.fnd details.group>summary::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(-45deg);transition:transform
|
|
677
|
+
.fnd details.group>summary::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
|
|
656
678
|
.fnd details.group[open]>summary::after{transform:rotate(45deg);margin-top:-7px}
|
|
657
679
|
.fnd details.group>summary:hover::after{border-color:var(--fg)}
|
|
658
680
|
.fnd details.group>summary:focus-visible{outline-offset:2px;border-radius:var(--r-sm)}
|
|
659
|
-
.fnd .chip.lg b{font-weight:
|
|
681
|
+
.fnd .chip.lg b{font-weight:600}
|
|
660
682
|
.fnd .g-rows>.card+.card{margin-top:6px}
|
|
661
683
|
.fnd [hidden]{display:none!important}
|
|
662
684
|
|
|
@@ -680,8 +702,8 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
680
702
|
.fnd .run-multi .vp-mobile{color:var(--vp-mobile-fg)}
|
|
681
703
|
.fnd .run-multi{gap:3px}
|
|
682
704
|
.fnd .card .f-t code{font-size:12px}
|
|
683
|
-
.fnd .card.line .go{position:absolute;right:12px;top:50%;margin-top:-10px;display:grid;place-items:center;width:20px;height:20px;color:var(--muted);border-radius:var(--r-
|
|
684
|
-
.fnd .card.line .go:hover{color:var(--fg);background:var(--
|
|
705
|
+
.fnd .card.line .go{position:absolute;right:12px;top:50%;margin-top:-10px;display:grid;place-items:center;width:20px;height:20px;color:var(--muted);border-radius:var(--r-ctl)}
|
|
706
|
+
.fnd .card.line .go:hover{color:var(--fg);background:var(--card-2);text-decoration:none}
|
|
685
707
|
.fnd .card.line .go svg{width:14px;height:14px}
|
|
686
708
|
.fnd .card.line.flash,.fnd .card.flash{animation:aitd-flash 1.5s ease-out}
|
|
687
709
|
@media (max-width:719px){
|
|
@@ -712,7 +734,7 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
712
734
|
.fnd-raw{margin-top:var(--s2);font-size:12.5px}
|
|
713
735
|
.fnd-raw>summary{cursor:pointer;color:var(--accent-fg);list-style:none;display:inline-flex;align-items:center;gap:4px}
|
|
714
736
|
.fnd-raw>summary::-webkit-details-marker{display:none}
|
|
715
|
-
.fnd-raw>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform
|
|
737
|
+
.fnd-raw>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
|
|
716
738
|
.fnd-raw[open]>summary::before{transform:rotate(45deg)}
|
|
717
739
|
.fnd-raw pre{margin-top:var(--s2);max-height:240px;overflow:auto}
|
|
718
740
|
.fnd-fix{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px}
|
|
@@ -721,8 +743,7 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
721
743
|
.fnd-where{list-style:none;display:grid;gap:6px}
|
|
722
744
|
.fnd-where li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px}
|
|
723
745
|
.fnd-step{min-width:0}
|
|
724
|
-
.fnd .fnd-h{margin:var(--s4) 0 var(--s2);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)
|
|
725
|
-
.fnd .fnd-h .chip{text-transform:none;letter-spacing:0}
|
|
746
|
+
.fnd .fnd-h{margin:var(--s4) 0 var(--s2);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--muted)}
|
|
726
747
|
.fnd .fnd-h>svg{width:14px;height:14px}
|
|
727
748
|
.fnd-fix>span{min-width:0}
|
|
728
749
|
.fnd-recipe{list-style:none;counter-reset:rc;display:grid;gap:2px;margin:0;padding:var(--s2) var(--s3);background:var(--well);border-radius:var(--r-sm)}
|
|
@@ -736,7 +757,7 @@ const FINDINGS = `/* Findings (Direction D). Everything is scoped under .fnd so
|
|
|
736
757
|
.fnd .filterbar{display:none}
|
|
737
758
|
.fnd details.group[data-filter-group]::details-content{content-visibility:visible;display:block}
|
|
738
759
|
.fnd details.group>summary::after{display:none}
|
|
739
|
-
.fnd .card{break-inside:avoid
|
|
760
|
+
.fnd .card{break-inside:avoid}
|
|
740
761
|
.fnd-impact{background:none!important;border:1px solid currentColor}
|
|
741
762
|
.fnd-recipe{background:none;border:1px solid var(--border)}
|
|
742
763
|
}
|
|
@@ -782,10 +803,10 @@ const JOURNEYS = `/* Journeys (Direction D): journey tabs + viewport switch, ste
|
|
|
782
803
|
#journeys .jr-g{display:inline-flex;color:var(--sev-fg)}
|
|
783
804
|
#journeys .jr-g .ic{width:13px;height:13px;vertical-align:0}
|
|
784
805
|
/* the viewport switch ([data-vp-switch]): a two-segment control; the pressed segment takes its viewport hue (identity, not status) */
|
|
785
|
-
#journeys .jr-vp{display:inline-flex;gap:0;padding:2px;border:1px solid var(--border);border-radius:var(--r-
|
|
806
|
+
#journeys .jr-vp{display:inline-flex;gap:0;padding:2px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--well);margin:var(--s3) 0 var(--s2)}
|
|
786
807
|
#journeys .jr-pick.js .jr-vp{position:absolute;top:3px;right:0;margin:0}
|
|
787
808
|
html:not(.js) #journeys .jr-vp{display:none}
|
|
788
|
-
#journeys .jr-vpb{--k:var(--vp-desktop);--k-fg:var(--vp-desktop-fg);--k-bg:var(--vp-desktop-bg);appearance:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0;border-radius:var(--r-
|
|
809
|
+
#journeys .jr-vpb{--k:var(--vp-desktop);--k-fg:var(--vp-desktop-fg);--k-bg:var(--vp-desktop-bg);appearance:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font:500 12.5px/1 var(--font-sans);white-space:nowrap;cursor:pointer}
|
|
789
810
|
#journeys .jr-vpb.mobile{--k:var(--vp-mobile);--k-fg:var(--vp-mobile-fg);--k-bg:var(--vp-mobile-bg)}
|
|
790
811
|
#journeys .jr-vpb:hover{color:var(--fg)}
|
|
791
812
|
#journeys .jr-vpb .ic{width:14px;height:14px}
|
|
@@ -804,7 +825,7 @@ html.js #journeys .jr-runh{display:none}
|
|
|
804
825
|
#journeys .jr-insp{display:grid;grid-template-columns:clamp(296px,22vw,380px) minmax(0,1fr);gap:var(--s4);align-items:start}
|
|
805
826
|
html:not(.js) #journeys .jr-insp{grid-template-columns:minmax(0,1fr)}
|
|
806
827
|
html:not(.js) #journeys .jr-steps{display:none}
|
|
807
|
-
#journeys .jr-steps{position:sticky;top:calc(var(--top) + var(--s3));max-height:calc(100vh - var(--top) - var(--s5));overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
|
|
828
|
+
#journeys .jr-steps{position:sticky;top:calc(var(--top) + var(--s3));max-height:calc(100vh - var(--top) - var(--s5));overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s1) 0 var(--s2);scrollbar-width:thin}
|
|
808
829
|
#journeys .jr-steps ul{list-style:none;margin:0;padding:0}
|
|
809
830
|
/* the timeline: one 2px line through the number column, from the first page to the last step */
|
|
810
831
|
#journeys .jr-steps li{position:relative}
|
|
@@ -819,11 +840,11 @@ html:not(.js) #journeys .jr-steps{display:none}
|
|
|
819
840
|
#journeys .jr-pg-p{justify-self:start;background:none;padding:0;font-size:11.5px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
820
841
|
#journeys .jr-st>button{appearance:none;position:relative;width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) repeat(var(--jr-plats,2),30px) 14px;column-gap:6px;align-items:center;min-height:32px;padding:3px 12px 3px 13px;border:0;background:none;color:var(--fg);font:13px/1.3 var(--font-sans);text-align:left;cursor:pointer}
|
|
821
842
|
#journeys .jr-st>button>.jr-t{margin-left:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
822
|
-
#journeys .jr-st>button:hover{background:var(--
|
|
843
|
+
#journeys .jr-st>button:hover{background:var(--card-2)}
|
|
823
844
|
#journeys .jr-st>button:focus-visible{outline-offset:-2px}
|
|
824
|
-
#journeys .jr-st>button:is([aria-selected=true],[aria-current=true],[aria-current=step],[aria-pressed=true],.selected){background:var(--accent-bg);box-shadow:inset
|
|
845
|
+
#journeys .jr-st>button:is([aria-selected=true],[aria-current=true],[aria-current=step],[aria-pressed=true],.selected){background:var(--accent-bg);box-shadow:inset 2px 0 0 var(--accent)}
|
|
825
846
|
#journeys .jr-st>button:is([aria-selected=true],[aria-current=true],[aria-current=step],[aria-pressed=true],.selected)>.jr-t{font-weight:600}
|
|
826
|
-
#journeys .jr-n{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:
|
|
847
|
+
#journeys .jr-n{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-sm);background:var(--card);border:1.5px solid var(--border-strong);color:var(--fg);font:600 11px/1 var(--font-mono);font-variant-numeric:tabular-nums}
|
|
827
848
|
#journeys .jr-st.zero .jr-n{border-style:dashed;color:var(--muted)}
|
|
828
849
|
#journeys .jr-st.zero .jr-t{color:var(--muted)}
|
|
829
850
|
#journeys .jr-st[class*=sev-] .jr-n{background:var(--sev-bg);border-color:var(--sev);color:var(--sev-fg)}
|
|
@@ -893,7 +914,7 @@ html:not(.js) #journeys .jr-steps{display:none}
|
|
|
893
914
|
#journeys .jr-flag .ic{margin-top:2px}
|
|
894
915
|
#journeys .jr-flag>span{flex:1 1 200px;min-width:0}
|
|
895
916
|
#journeys .jr-hb{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s3) var(--s4)}
|
|
896
|
-
#journeys .jr-h{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;line-height:1.4;font-weight:
|
|
917
|
+
#journeys .jr-h{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;line-height:1.4;font-weight:500;color:var(--muted)}
|
|
897
918
|
#journeys .jr-hb .tbl{font-size:12.5px;border:1px solid var(--border);border-radius:var(--r-sm);border-collapse:separate;border-spacing:0}
|
|
898
919
|
#journeys .jr-hb .tbl th,#journeys .jr-hb .tbl td{padding:4px 8px}
|
|
899
920
|
#journeys .jr-kvt tbody th{width:38%;font:11.5px var(--font-mono);color:var(--muted);vertical-align:top}
|
|
@@ -927,7 +948,7 @@ html:not(.js) #journeys .jr-steps{display:none}
|
|
|
927
948
|
|
|
928
949
|
/* the plan line under the status: the funnel sentence, then a chip per planned event that failed */
|
|
929
950
|
#journeys .jr-plan{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s2);margin:calc(-1 * var(--s1)) 0 var(--s3);font-size:12.5px;min-width:0}
|
|
930
|
-
#journeys .jr-plan-h{font:
|
|
951
|
+
#journeys .jr-plan-h{font:500 12px/1.4 var(--font-sans);color:var(--muted);white-space:nowrap}
|
|
931
952
|
#journeys .jr-plan-t{display:inline-flex;align-items:center;gap:5px;min-width:0}
|
|
932
953
|
#journeys .jr-plan-t .jr-bad{color:var(--sev-broken)}
|
|
933
954
|
#journeys .jr-plan-t .jr-good{color:var(--sev-ok)}
|
|
@@ -946,9 +967,9 @@ html:not(.js) #journeys .jr-steps{display:none}
|
|
|
946
967
|
/* platform chips carry plat(): icon and name side by side; glossary tips on parameter names */
|
|
947
968
|
#journeys .chip .plat{display:inline-flex;align-items:center;gap:5px}
|
|
948
969
|
#journeys .chip .plat>svg{width:13px;height:13px}
|
|
949
|
-
#journeys .q{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;border:1px solid var(--muted);border-radius:
|
|
970
|
+
#journeys .q{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;border:1px solid var(--muted);border-radius:var(--r-sm);font:500 10px var(--font-sans);color:var(--muted);cursor:help;vertical-align:1px}
|
|
950
971
|
#journeys .q:hover{border-color:var(--accent);color:var(--accent-fg)}
|
|
951
|
-
#journeys .q:hover::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:260px;padding:8px 10px;background:var(--fg);color:var(--page);font:400 12px/1.45 var(--font-sans);border-radius:var(--r-
|
|
972
|
+
#journeys .q:hover::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:260px;padding:8px 10px;background:var(--fg);color:var(--page);font:400 12px/1.45 var(--font-sans);border-radius:var(--r-ctl);box-shadow:var(--shadow-overlay);white-space:normal;text-align:left}
|
|
952
973
|
#journeys .jr-kvt .pk{font-family:var(--font-mono)}
|
|
953
974
|
#journeys .jr-kvt tr.pr td{font-family:var(--font-sans)}
|
|
954
975
|
#journeys .jr-batch{margin-bottom:6px}
|
|
@@ -983,10 +1004,10 @@ html:not(.js) #journeys .jr-steps{display:none}
|
|
|
983
1004
|
#journeys .jr-pg{display:block;width:1px;align-self:stretch;margin:4px 4px!important;padding:0;background:var(--border)}
|
|
984
1005
|
#journeys .jr-pg:first-child{display:none}
|
|
985
1006
|
#journeys .jr-pg>*{display:none}
|
|
986
|
-
#journeys .jr-st>button{display:flex;gap:3px;width:auto;min-height:36px;padding:4px 6px;border-radius:var(--r-
|
|
1007
|
+
#journeys .jr-st>button{display:flex;gap:3px;width:auto;min-height:36px;padding:4px 6px;border-radius:var(--r-ctl)}
|
|
987
1008
|
#journeys .jr-st>button>.jr-t,#journeys .jr-hc{display:none}
|
|
988
1009
|
#journeys .jr-gs:empty{display:none}
|
|
989
|
-
#journeys .jr-st>button:is([aria-selected=true],[aria-current=true],[aria-current=step],[aria-pressed=true],.selected){box-shadow:inset 0 -
|
|
1010
|
+
#journeys .jr-st>button:is([aria-selected=true],[aria-current=true],[aria-current=step],[aria-pressed=true],.selected){box-shadow:inset 0 -2px 0 var(--accent)}
|
|
990
1011
|
#journeys .jr-ph{padding:var(--s3) var(--s3) 0}
|
|
991
1012
|
#journeys .jr-ph-m{padding-left:0}
|
|
992
1013
|
#journeys .jr-pane>.tabs{padding:0 var(--s3) var(--s3)}
|
|
@@ -1000,7 +1021,7 @@ html:not(.js) #journeys .jr-steps{display:none}
|
|
|
1000
1021
|
#journeys .jr-pane,#journeys .jr-pick [role=tabpanel]{display:block!important}
|
|
1001
1022
|
#journeys .jr-pane:not([data-flagged])>.tabs,#journeys .jr-pane:not([data-flagged])>p.jr-empty{display:none}
|
|
1002
1023
|
#journeys .jr-pane:not([data-flagged]) .jr-ph{padding-bottom:var(--s2)}
|
|
1003
|
-
#journeys .jr-pane{break-inside:avoid
|
|
1024
|
+
#journeys .jr-pane{break-inside:avoid}
|
|
1004
1025
|
/* on paper a step is its hits; the dataLayer and the requests stay in the HTML and capture.json */
|
|
1005
1026
|
#journeys .jr-pane [role=tabpanel][id$="-dl"],#journeys .jr-pane [role=tabpanel][id$="-req"]{display:none!important}
|
|
1006
1027
|
#journeys .jr-pane:not([data-flagged]){padding-bottom:0}
|
|
@@ -1050,7 +1071,7 @@ const CONSENT = `/* Consent: platform status lines, then the Consent Mode and Sc
|
|
|
1050
1071
|
#consent .cs-go{margin-left:0}
|
|
1051
1072
|
}
|
|
1052
1073
|
@media print{
|
|
1053
|
-
#consent .cs-row{
|
|
1074
|
+
#consent .cs-row{break-inside:avoid}
|
|
1054
1075
|
}
|
|
1055
1076
|
/* journeys.css still has a bare .t (mono time); keep the card title independent of it */
|
|
1056
1077
|
#consent details.card>summary>.t{font:600 14px/1.4 var(--font-sans);color:var(--fg);margin-left:0;white-space:normal}
|
|
@@ -1066,13 +1087,13 @@ const SCOPE = `/* Scope (Coverage, Inventory, Run). Selectors are scoped by sect
|
|
|
1066
1087
|
|
|
1067
1088
|
/* ----- Coverage ----- */
|
|
1068
1089
|
#coverage .cv-bar{display:inline-flex;gap:2px;align-items:center;height:14px;padding:0 2px}
|
|
1069
|
-
#coverage .cv-bar i{width:7px;height:14px;border-radius:
|
|
1090
|
+
#coverage .cv-bar i{width:7px;height:14px;border-radius:var(--r-cell);background:var(--sev-ok)}
|
|
1070
1091
|
#coverage .cv-bar i.params{background:var(--sev-broken)}
|
|
1071
1092
|
#coverage .cv-bar i.missing{background:var(--sev-warning)}
|
|
1072
1093
|
#coverage .cv-pcs{gap:6px}
|
|
1073
1094
|
#coverage .cv-pc .chip{gap:4px}
|
|
1074
1095
|
#coverage .cv-pc .chip b{font-family:var(--font-mono);font-size:11px}
|
|
1075
|
-
#coverage .filterbar{margin-bottom:var(--s3)
|
|
1096
|
+
#coverage .filterbar{margin-bottom:var(--s3)}
|
|
1076
1097
|
#coverage .cv-tbl .cv-c{text-align:center;white-space:nowrap}
|
|
1077
1098
|
#coverage .cv-tbl thead .cv-c{text-align:center}
|
|
1078
1099
|
#coverage .cv-tbl .cv-g{padding:0 5px;height:22px}
|
|
@@ -1086,7 +1107,7 @@ const SCOPE = `/* Scope (Coverage, Inventory, Run). Selectors are scoped by sect
|
|
|
1086
1107
|
#coverage .cv-key{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3)}
|
|
1087
1108
|
/* first column stays put while the run columns scroll at 390 */
|
|
1088
1109
|
#coverage .cv-scroll .cv-tbl th:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
|
|
1089
|
-
#coverage .cv-scroll .cv-tbl thead th:first-child{background:var(--
|
|
1110
|
+
#coverage .cv-scroll .cv-tbl thead th:first-child{background:var(--card)}
|
|
1090
1111
|
|
|
1091
1112
|
/* ----- Inventory ----- */
|
|
1092
1113
|
#inventory .inv-rows{list-style:none;display:grid;gap:var(--s2);margin-top:var(--s3)}
|
|
@@ -1106,17 +1127,17 @@ const SCOPE = `/* Scope (Coverage, Inventory, Run). Selectors are scoped by sect
|
|
|
1106
1127
|
#inventory .inv-list .chip.plain{height:20px;font-size:11.5px}
|
|
1107
1128
|
|
|
1108
1129
|
/* ----- Run ----- */
|
|
1109
|
-
#run .run-facts{margin:var(--s3) 0 var(--s2);padding:var(--s2) var(--s4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)
|
|
1130
|
+
#run .run-facts{margin:var(--s3) 0 var(--s2);padding:var(--s2) var(--s4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}
|
|
1110
1131
|
#run .run-facts>div{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:var(--s2);min-height:38px;padding:5px 0;border-bottom:1px solid var(--border)}
|
|
1111
1132
|
#run .run-facts>div.wide{grid-column:1/-1}
|
|
1112
1133
|
#run .run-facts>div:nth-last-child(-n+1){border-bottom:0}
|
|
1113
|
-
#run .run-facts dt{font:
|
|
1134
|
+
#run .run-facts dt{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
|
|
1114
1135
|
#run .run-facts dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
|
|
1115
1136
|
#run .run-facts code{margin:0}
|
|
1116
1137
|
#run>p.meta{margin:0 0 var(--s2);font-size:12.5px;color:var(--muted)}
|
|
1117
1138
|
#run .run-facts code.file{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
|
|
1118
|
-
#run .tm-tbl .tm-d{display:inline-block;width:80px;height:6px;margin-right:var(--s2);vertical-align:middle;border-radius:
|
|
1119
|
-
#run .tm-tbl .tm-bar{display:block;height:100%;border-radius:
|
|
1139
|
+
#run .tm-tbl .tm-d{display:inline-block;width:80px;height:6px;margin-right:var(--s2);vertical-align:middle;border-radius:var(--r-cell);background:var(--well);overflow:hidden;text-align:left}
|
|
1140
|
+
#run .tm-tbl .tm-bar{display:block;height:100%;border-radius:var(--r-cell);background:var(--muted)}
|
|
1120
1141
|
#run .tm-tbl .tm-bar.desktop{background:var(--vp-desktop)}
|
|
1121
1142
|
#run .tm-tbl .tm-bar.mobile{background:var(--vp-mobile)}
|
|
1122
1143
|
#run .tm-s{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
|
|
@@ -1127,8 +1148,8 @@ const SCOPE = `/* Scope (Coverage, Inventory, Run). Selectors are scoped by sect
|
|
|
1127
1148
|
#run .run-facts>div:nth-last-child(2).wide{border-bottom:1px solid var(--border)}
|
|
1128
1149
|
}
|
|
1129
1150
|
@media print{
|
|
1130
|
-
#run .run-facts{
|
|
1131
|
-
#inventory .inv-line{
|
|
1151
|
+
#run .run-facts{break-inside:avoid}
|
|
1152
|
+
#inventory .inv-line{break-inside:avoid}
|
|
1132
1153
|
}
|
|
1133
1154
|
/* tables keep their shape and scroll inside .tscroll on a phone */
|
|
1134
1155
|
#coverage .cv-tbl{min-width:640px}
|
|
@@ -1161,7 +1182,7 @@ const SCOPE = `/* Scope (Coverage, Inventory, Run). Selectors are scoped by sect
|
|
|
1161
1182
|
#run .spark circle{fill:var(--sev);stroke:var(--card);stroke-width:1}
|
|
1162
1183
|
#run .spark circle.hollow{fill:var(--card);stroke:var(--sev);stroke-width:1.5}
|
|
1163
1184
|
#run .spark-legend{display:flex;flex-wrap:wrap;gap:4px 12px}
|
|
1164
|
-
#run .spark-legend i{display:inline-block;width:10px;height:3px;background:var(--sev);margin-right:5px;vertical-align:middle;border-radius:
|
|
1185
|
+
#run .spark-legend i{display:inline-block;width:10px;height:3px;background:var(--sev);margin-right:5px;vertical-align:middle;border-radius:var(--r-cell)}
|
|
1165
1186
|
#run .tr-tbl{min-width:420px}
|
|
1166
1187
|
#run .tr-tbl th[scope=row]{white-space:nowrap}
|
|
1167
1188
|
#run .tr-h{margin-top:var(--s2)}
|