openvibers/openvibe.shared kit-data.css

kit-data.css

main 30.3 KB · 294 lines · css

Raw HistoryBlame Repository
1/* openvibe-shared/kit-data.css — Kit 2's look: steps, tables, charts, rankings, meters, drop zones and receipts
2 * (kit.steps/table/chart/rank/meter/drop/receipt; docs/kit.md "Kit 2"), and the tool frame (kit.tool and its pieces,
3 * 4.55.0; docs/kit.md "The tool frame"). Load it after kit.css, whose tokens it uses,
4 * on a page that draws any of them; kit-data-web.js adds their behaviour. Split from kit.css in 4.37.0 so a page that
5 * uses none of them does not carry them (kit.css weighed 25 KB before Kit 2, 44 KB with it). */
6
7:root {
8 --ovk-c1: var(--ovk-accent); --ovk-c2: #22d3ee; --ovk-c3: #f59e0b; --ovk-c4: #a78bfa; --ovk-c5: #34d399;
9}
10:root[data-theme-mode="light"] { --ovk-c2: #0e7490; --ovk-c3: #b45309; --ovk-c4: #6d28d9; --ovk-c5: #047857; }
11.ovk-chart-s1 { --ovk-c: var(--ovk-c1); } .ovk-chart-s2 { --ovk-c: var(--ovk-c2); } .ovk-chart-s3 { --ovk-c: var(--ovk-c3); }
12.ovk-chart-s4 { --ovk-c: var(--ovk-c4); } .ovk-chart-s5 { --ovk-c: var(--ovk-c5); }
13
14/* Steps: dots joined by a line; a phone says "Step 2 of 4 · Verify", wider screens name every step */
15.ovk-steps { margin: 0 0 16px; color: var(--ovk-text); }
16.ovk-steps-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 10px; font-size: .92rem; }
17.ovk-steps-now span { color: var(--ovk-muted); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
18.ovk-steps ol { display: flex; margin: 0; padding: 0; list-style: none; }
19.ovk-steps li { position: relative; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
20/* The line between two dots stops short of both, so it never crosses a dot (or shows through a see-through panel). */
21.ovk-steps li + li::before { content: ''; position: absolute; top: 21px; right: calc(50% + 20px); width: calc(100% - 40px); height: 2px; border-radius: 2px; background: var(--ovk-line); }
22.ovk-steps li.is-done + li::before { background: var(--ovk-fill); }
23.ovk-steps li > a, .ovk-steps-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: var(--ovk-tap); min-height: var(--ovk-tap); padding: 8px 4px 0; color: inherit; text-decoration: none; text-align: center; }
24.ovk-steps-n { display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ovk-line); background: var(--ovk-panel); color: var(--ovk-muted); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
25.ovk-steps-n .ovk-i { width: 15px; height: 15px; stroke-width: 3; }
26.ovk-steps .is-done .ovk-steps-n { border-color: var(--ovk-fill); background: var(--ovk-fill); color: var(--ovk-on-fill); }
27.ovk-steps .is-current .ovk-steps-n { border-color: var(--ovk-accent); background: color-mix(in srgb, var(--ovk-accent) 16%, var(--ovk-panel)); color: var(--ovk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ovk-accent) 14%, transparent); }
28.ovk-steps li > a:hover .ovk-steps-n { filter: brightness(1.1); }
29.ovk-steps li > a:focus-visible { outline: 2px solid var(--ovk-accent); outline-offset: 2px; border-radius: 12px; }
30.ovk-steps-l { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
31.ovk-steps-l small { display: block; color: var(--ovk-muted); font-size: .76rem; font-weight: 500; }
32@media (min-width: 600px) {
33 .ovk-steps-now { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
34 .ovk-steps-l { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: .86rem; font-weight: 600; line-height: 1.3; }
35 .ovk-steps .is-next .ovk-steps-l { color: var(--ovk-muted); }
36 .ovk-steps .is-current .ovk-steps-l { color: var(--ovk-text); font-weight: 800; }
37}
38
39/* Tables: a real table on wide screens; under 600 px each row is a card that names its cells */
40.ovk-table-wrap { margin: 0 0 14px; border: 1px solid var(--ovk-line); border-radius: var(--ovk-radius); background: var(--ovk-panel); overflow-x: auto; color: var(--ovk-text); }
41.ovk-table-wrap:focus-visible { outline: 2px solid var(--ovk-accent); outline-offset: 2px; }
42.ovk-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.4; }
43.ovk-table caption { padding: 12px 14px 6px; color: var(--ovk-muted); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
44.ovk-table thead th { padding: 10px 14px; color: var(--ovk-muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ovk-line); }
45.ovk-table td, .ovk-table tbody th { padding: 11px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--ovk-line); overflow-wrap: anywhere; }
46.ovk-table tbody tr:first-child > * { border-top: 0; }
47.ovk-table tbody th { font-weight: 700; }
48.ovk-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
49.ovk-table a { color: var(--ovk-accent); text-decoration: none; }
50.ovk-table a:hover { text-decoration: underline; }
51.ovk-table tbody tr:hover > * { background: color-mix(in srgb, var(--ovk-panel-2) 55%, transparent); }
52.ovk-table-empty { margin: 0 0 14px; padding: 18px 16px; border: 1px dashed var(--ovk-line); border-radius: var(--ovk-radius); color: var(--ovk-muted); text-align: center; }
53@media (max-width: 599px) {
54 .ovk-table--stack { overflow: visible; }
55 .ovk-table--stack .ovk-table, .ovk-table--stack tbody, .ovk-table--stack tr, .ovk-table--stack td, .ovk-table--stack tbody th { display: block; }
56 .ovk-table--stack caption { display: block; }
57 .ovk-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
58 .ovk-table--stack tbody tr { padding: 12px 14px; border-top: 1px solid var(--ovk-line); }
59 .ovk-table--stack tbody tr:first-child { border-top: 0; }
60 .ovk-table--stack tbody tr:hover > * { background: none; }
61 .ovk-table--stack td > *, .ovk-table--stack td { min-width: 0; }
62 .ovk-table--stack td, .ovk-table--stack tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: 0; text-align: right; }
63 .ovk-table--stack td::before { content: attr(data-label); flex: none; max-width: 50%; color: var(--ovk-muted); font-size: .8rem; text-align: left; }
64 .ovk-table--stack .is-primary { display: block; padding: 0 0 4px; font-size: 1rem; font-weight: 800; text-align: left; }
65 .ovk-table--stack .is-primary::before { content: none; }
66 .ovk-table--stack .is-hide-sm { display: none; }
67}
68
69/* Charts: the lines are an SVG stretched to the box; every label is real text at its real size */
70.ovk-chart { overflow: clip; margin: 0 0 14px; padding: 14px 14px 10px; border: 1px solid var(--ovk-line); border-radius: var(--ovk-radius); background: var(--ovk-panel); color: var(--ovk-text); font-family: var(--ovk-font); }
71.ovk-chart figcaption { display: grid; gap: 2px; margin: 0 0 8px; }
72.ovk-chart figcaption strong { font-size: 1rem; font-weight: 800; }
73.ovk-chart figcaption span { color: var(--ovk-muted); font-size: .84rem; }
74.ovk-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .84rem; color: var(--ovk-muted); }
75.ovk-chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
76.ovk-chart-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--ovk-c); }
77.ovk-chart-legend b { color: var(--ovk-text); font-weight: 800; font-variant-numeric: tabular-nums; }
78.ovk-chart-yname { display: block; margin: 0 0 6px; color: var(--ovk-muted); font-size: .74rem; font-weight: 700; }
79.ovk-chart-xname { margin: 2px 0 0; color: var(--ovk-muted); font-size: .74rem; font-weight: 700; text-align: right; }
80.ovk-chart-plot { position: relative; height: var(--ovk-chart-h, 220px); margin: 8px 6px 26px var(--ovk-chart-g, 44px); outline: none; touch-action: pan-y; }
81.ovk-chart-plot:focus-visible { box-shadow: 0 0 0 2px var(--ovk-accent); border-radius: 4px; }
82.ovk-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
83.ovk-chart-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--ovk-line) 70%, transparent); }
84.ovk-chart-yt { position: absolute; right: calc(100% + 8px); transform: translateY(50%); color: var(--ovk-muted); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
85.ovk-chart-xt { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); color: var(--ovk-muted); font-size: .72rem; white-space: nowrap; line-height: 1; }
86.ovk-chart-line { fill: none; stroke: var(--ovk-c, var(--ovk-c1)); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
87.ovk-chart-area { fill: color-mix(in srgb, var(--ovk-c, var(--ovk-c1)) 16%, transparent); stroke: none; }
88.ovk-chart-front { fill: none; stroke: var(--ovk-c3); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
89.ovk-chart-rule { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--ovk-text) 35%, transparent); pointer-events: none; }
90.ovk-chart-rule[hidden], .ovk-chart-tip[hidden] { display: none; }
91.ovk-chart-rule i { position: absolute; left: -5px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ovk-panel); background: var(--ovk-c); transform: translateY(50%); }
92.ovk-chart-tip, .ovk-chart-pop { position: absolute; z-index: 3; min-width: 96px; padding: 7px 10px; border: 1px solid var(--ovk-line); border-radius: 10px; background: var(--ovk-panel-2); color: var(--ovk-text); font-size: .8rem; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); pointer-events: none; }
93.ovk-chart-tip { top: 0; }
94.ovk-chart-tip b, .ovk-chart-pop b { display: block; color: var(--ovk-muted); font-size: .74rem; font-weight: 700; }
95.ovk-chart-tip span { display: flex; align-items: center; gap: 6px; }
96.ovk-chart-tip span i { width: 8px; height: 8px; border-radius: 50%; background: var(--ovk-c); }
97.ovk-chart-pop { display: none; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
98.ovk-chart-dot { position: absolute; z-index: 1; width: 12px; height: 12px; margin: 0 0 -6px -6px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ovk-panel); background: color-mix(in srgb, var(--ovk-c1) 60%, var(--ovk-muted)); color: var(--ovk-text); outline: none; text-decoration: none; }
99.ovk-chart-dot::after { content: ''; position: absolute; inset: -12px; }
100.ovk-chart-dot.is-best { background: var(--ovk-c1); width: 14px; height: 14px; margin: 0 0 -7px -7px; }
101.ovk-chart-dot:hover, .ovk-chart-dot:focus-visible { z-index: 4; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ovk-accent) 40%, transparent); }
102.ovk-chart-dot:hover .ovk-chart-pop, .ovk-chart-dot:focus-visible .ovk-chart-pop, .ovk-chart-bar:hover .ovk-chart-pop, .ovk-chart-bar:focus-visible .ovk-chart-pop { display: block; }
103.ovk-chart-dot.is-right .ovk-chart-pop { left: auto; right: -6px; transform: none; }
104.ovk-chart-name.is-hidden { visibility: hidden; }
105.ovk-chart-name { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ovk-text); font-size: .74rem; font-weight: 600; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--ovk-panel), 0 0 3px var(--ovk-panel); }
106.ovk-chart-dot.is-right .ovk-chart-name, .ovk-chart-dot.is-flip .ovk-chart-name { left: auto; right: 14px; }
107.ovk-chart-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: clamp(1px, calc(12% / var(--n, 10)), 6px); }
108.ovk-chart-bar { position: relative; flex: 1 1 0; min-width: 2px; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: var(--ovk-c1); outline: none; }
109.ovk-chart-bar:hover, .ovk-chart-bar:focus-visible { filter: brightness(1.15); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ovk-accent) 45%, transparent); }
110.ovk-chart-bar.is-none { background: transparent; }
111.ovk-chart-blab { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); color: var(--ovk-muted); font-size: .72rem; white-space: nowrap; line-height: 1; }
112.ovk-chart-bar .ovk-chart-pop { bottom: calc(100% + 6px); }
113
114/* Rankings: place, name, value ± interval, change, and a bar in proportion */
115.ovk-rank { margin: 0 0 14px; padding: 0; list-style: none; border: 1px solid var(--ovk-line); border-radius: var(--ovk-radius); background: var(--ovk-panel); overflow: hidden; color: var(--ovk-text); }
116.ovk-rank-row { position: relative; display: grid; grid-template-columns: 2.1em auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; row-gap: 6px; padding: 11px 14px 10px; border-top: 1px solid var(--ovk-line); }
117.ovk-rank-row:first-child { border-top: 0; }
118.ovk-rank-n { grid-column: 1; color: var(--ovk-muted); font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
119.ovk-rank-row.is-top .ovk-rank-n { color: var(--ovk-accent); }
120.ovk-rank-row > .ovk-mark { grid-column: 2; --ovk-mark: 34px; }
121.ovk-rank-main { grid-column: 3; min-width: 0; display: grid; gap: 1px; }
122.ovk-rank-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
123.ovk-rank-name > strong, .ovk-rank-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ovk-text); text-decoration: none; }
124.ovk-rank-link::after { content: ''; position: absolute; inset: 0; }
125.ovk-rank-row:has(.ovk-rank-link):hover { background: var(--ovk-panel-2); }
126.ovk-rank-link:focus-visible { outline: none; }
127.ovk-rank-row:has(.ovk-rank-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--ovk-accent); }
128.ovk-rank-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ovk-muted); font-size: .8rem; }
129.ovk-rank-val { grid-column: 4; display: grid; justify-items: end; line-height: 1.2; }
130.ovk-rank-val b { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
131.ovk-rank-val b small { color: var(--ovk-muted); font-size: .76rem; font-weight: 600; }
132.ovk-rank-val > small { color: var(--ovk-muted); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
133.ovk-rank-delta { grid-column: 5; display: inline-flex; align-items: center; gap: 1px; min-width: 2.6em; justify-content: flex-end; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
134.ovk-rank-delta .ovk-i { width: 13px; height: 13px; stroke-width: 3; }
135.ovk-rank-delta.is-up { color: var(--ovk-ok-text, var(--ovk-ok)); } .ovk-rank-delta.is-down { color: var(--ovk-bad-text, var(--ovk-bad)); } .ovk-rank-delta.is-new { color: var(--ovk-accent); text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; }
136.ovk-rank-bar { grid-column: 3 / -1; grid-row: 2; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ovk-line) 60%, transparent); overflow: hidden; }
137.ovk-rank-bar::after { content: ''; display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: color-mix(in srgb, var(--ovk-c1) 55%, transparent); }
138.ovk-rank-row.is-top .ovk-rank-bar::after { background: var(--ovk-c1); }
139
140/* Meters */
141.ovk-meter { display: block; height: 8px; min-width: 56px; border-radius: 999px; background: color-mix(in srgb, var(--ovk-line) 70%, transparent); overflow: hidden; }
142.ovk-meter > span { display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: var(--ovk-fill); }
143.ovk-meter--ok > span { background: var(--ovk-ok); } .ovk-meter--warn > span { background: var(--ovk-warn); } .ovk-meter--bad > span { background: var(--ovk-bad); }
144
145/* Drop zones: a real file input; drag, paste and the camera arrive with kit-web.js */
146.ovk-drop { margin: 0 0 14px; color: var(--ovk-text); }
147.ovk-drop-input { display: block; width: 100%; margin: 0 0 8px; color: var(--ovk-muted); font: inherit; }
148.ovk-drop.is-js .ovk-drop-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; }
149.ovk-drop-zone { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--ovk-line); border-radius: var(--ovk-radius); background: var(--ovk-panel); text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
150.ovk-drop-zone > .ovk-i { width: 30px; height: 30px; color: var(--ovk-accent); }
151.ovk-drop-zone strong { font-size: 1rem; font-weight: 800; }
152.ovk-drop-zone small { color: var(--ovk-muted); font-size: .84rem; }
153.ovk-drop-zone:hover, .ovk-drop.is-over .ovk-drop-zone { border-color: var(--ovk-accent); background: color-mix(in srgb, var(--ovk-accent) 8%, var(--ovk-panel)); }
154.ovk-drop-input:focus-visible + .ovk-drop-zone { outline: 2px solid var(--ovk-accent); outline-offset: 2px; }
155.ovk-drop-name:empty { display: none; }
156.ovk-drop-name { display: grid; justify-items: center; gap: 6px; margin-top: 4px; font-size: .86rem; font-weight: 600; word-break: break-all; }
157.ovk-drop-name img { max-width: 100%; max-height: 160px; border-radius: 10px; object-fit: contain; }
158.ovk-drop.has-file .ovk-drop-zone { border-style: solid; border-color: color-mix(in srgb, var(--ovk-accent) 55%, var(--ovk-line)); }
159.ovk-drop-cam { margin-top: 8px; }
160.ovk-drop-cam[hidden] { display: none; }
161
162/* Receipts: the result first, then one quiet line of what it took */
163.ovk-receipt { margin: 0 0 14px; border: 1px solid var(--ovk-line); border-radius: var(--ovk-radius); background: var(--ovk-panel); overflow: hidden; color: var(--ovk-text); }
164.ovk-receipt--ok { border-color: color-mix(in srgb, var(--ovk-ok) 45%, var(--ovk-line)); }
165.ovk-receipt--bad { border-color: color-mix(in srgb, var(--ovk-bad) 45%, var(--ovk-line)); }
166.ovk-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 0 14px; min-height: 44px; }
167.ovk-receipt-head.ovk-receipt-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
168.ovk-receipt-acts { display: inline-flex; gap: 2px; }
169.ovk-receipt-body { padding: 10px 14px 14px; line-height: 1.5; overflow-wrap: anywhere; }
170.ovk-receipt-body > :first-child { margin-top: 0; } .ovk-receipt-body > :last-child { margin-bottom: 0; }
171.ovk-receipt-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 14px; border-top: 1px solid var(--ovk-line); background: color-mix(in srgb, var(--ovk-panel-2) 45%, transparent); font-size: .8rem; }
172.ovk-receipt-facts > div { display: inline-flex; align-items: center; gap: 5px; }
173.ovk-receipt-facts dt { color: var(--ovk-muted); }
174.ovk-receipt-facts dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
175.ovk-receipt-facts .ovk-meter { width: 56px; height: 6px; }
176
177/* ── The tool frame (4.55.0): kit.tool and its pieces. One order on every tool page: the name and what it does, the
178 box, the answer and its next step, the family, the folds. The family's tint is only on the icon tile; buttons keep
179 the site's accent. From 1024 px the family is a column beside the tool. ── */
180.ovk-page { --ovk-gutter: 16px; } /* the page's side padding: a sideways row may run to the screen edge */
181.ovk-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 20px; color: var(--ovk-text); }
182.ovk-tool-head { --ovk-tint: color-mix(in srgb, hsl(var(--ovk-tint-h, 210) 80% 56%) 82%, var(--ovk-text)); display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; }
183.ovk-tool-tile { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ovk-tint); background: color-mix(in srgb, var(--ovk-tint) 14%, transparent); }
184.ovk-tool-tile > svg, .ovk-tool-tile > .ovk-i, .ovk-tool-tile > img { width: 22px; height: 22px; }
185.ovk-tool-head--solo .ovk-tool-tile { grid-row: auto; }
186.ovk-tool-crumb { justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 24px; color: var(--ovk-muted); font-size: .8rem; font-weight: 600; text-decoration: none; }
187.ovk-tool-crumb > .ovk-i { width: .95em; height: .95em; }
188a.ovk-tool-crumb:hover { color: var(--ovk-text); }
189.ovk-tool-head .ovk-tool-title.ovk-tool-title { margin: 0; font-family: inherit; font-size: 1.5rem; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ovk-text); text-wrap: balance; }
190.ovk-tool-head .ovk-tool-task.ovk-tool-task { grid-column: 1 / -1; margin: 8px 0 0; color: var(--text-secondary, var(--ovk-muted)); font-size: .95rem; line-height: 1.45; text-wrap: pretty; }
191/* Spaced, not dotted: a separator at the start of a wrapped line read as a list bullet (Tools, 2026-10-31). */
192.ovk-tool-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--ovk-muted); font-size: .8rem; line-height: 1.4; }
193.ovk-tool-facts > li { display: inline-flex; align-items: center; gap: 5px; }
194.ovk-tool-facts > li > .ovk-i { width: 1em; height: 1em; }
195
196.ovk-tool-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-panel); }
197.ovk-tool-card > .ovk-drop, .ovk-tool-card > form > .ovk-drop { margin: 0; }
198.ovk-tool-form { display: grid; gap: 10px; margin: 0; }
199.ovk-tool-label { font-size: .8rem; font-weight: 650; color: var(--text-secondary, var(--ovk-muted)); }
200.ovk-tool-row { display: grid; gap: 10px; }
201.ovk-tool-field { position: relative; display: flex; align-items: center; min-width: 0; }
202.ovk-tool-field > input { width: 100%; min-width: 0; height: 52px; box-sizing: border-box; padding: 0 48px 0 14px; border-radius: 12px; border: 1.5px solid var(--ovk-line); background: var(--ovk-input); color: var(--ovk-text); font: inherit; font-size: 17px; }
203.ovk-tool-field > input::placeholder { color: var(--ovk-muted); opacity: 1; }
204.ovk-tool-field > input:focus { outline: none; border-color: var(--ovk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ovk-accent) 22%, transparent); }
205.ovk-tool-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ovk-muted); cursor: pointer; }
206.ovk-tool-clear:hover { color: var(--ovk-text); }
207.ovk-tool-clear[hidden] { display: none; }
208.ovk-tool-go { width: 100%; min-height: 48px; font-size: 1rem; }
209.ovk-tool-card textarea.ovk-tool-editor { width: 100%; min-height: 160px; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1.5px solid var(--ovk-line); background: var(--ovk-input); color: var(--ovk-text); font: .86rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
210.ovk-tool-card textarea.ovk-tool-editor:focus { outline: none; border-color: var(--ovk-accent); }
211
212.ovk-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--ovk-muted); font-size: .82rem; }
213.ovk-try > span { margin-right: 2px; }
214.ovk-try > a { display: inline-flex; align-items: center; min-height: 32px; box-sizing: border-box; max-width: 100%; padding: 4px 11px; border-radius: 999px; background: var(--ovk-panel-2); color: var(--text-secondary, var(--ovk-text)); font: .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
215.ovk-try > a:hover { color: var(--ovk-text); box-shadow: inset 0 0 0 1px var(--ovk-accent); }
216
217.ovk-tool-out:empty { display: none; }
218.ovk-answer { border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-panel); overflow: hidden; }
219.ovk-answer-head { display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--ovk-line); }
220.ovk-answer-head.ovk-answer-head h2 { flex: 1; min-width: 0; margin: 0; font-family: inherit; font-size: 1rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ovk-text); }
221.ovk-answer-acts { display: inline-flex; gap: 2px; }
222.ovk-answer--bad { border-color: color-mix(in srgb, var(--ovk-bad) 45%, var(--ovk-line)); }
223.ovk-answer-rows { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); margin: 0; }
224.ovk-answer-rows > div { display: contents; }
225.ovk-answer-rows dt, .ovk-answer-rows dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ovk-line); font-size: .9rem; line-height: 1.45; }
226.ovk-answer-rows dt { padding-right: 6px; color: var(--ovk-muted); }
227.ovk-answer-rows dd { min-width: 0; overflow-wrap: anywhere; color: var(--ovk-text); }
228.ovk-answer-rows > div:last-child > dt, .ovk-answer-rows > div:last-child > dd { border-bottom: 0; }
229.ovk-answer-rows + .ovk-answer-body, .ovk-answer-rows + .ovk-answer-next { border-top: 1px solid var(--ovk-line); }
230.ovk-answer-body { padding: 12px 14px; }
231.ovk-answer-body > :first-child { margin-top: 0; }
232.ovk-answer-body > :last-child { margin-bottom: 0; }
233.ovk-answer-next { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
234.ovk-pill { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; vertical-align: 1px; white-space: nowrap; color: var(--ovk-accent); background: color-mix(in srgb, var(--ovk-accent) 13%, transparent); }
235.ovk-pill--ok { color: var(--ovk-ok-text, var(--ovk-ok)); background: color-mix(in srgb, var(--ovk-ok) 14%, transparent); }
236.ovk-pill--warn { color: var(--ovk-warn-text, var(--ovk-warn)); background: color-mix(in srgb, var(--ovk-warn) 15%, transparent); }
237.ovk-pill--bad { color: var(--ovk-bad-text, var(--ovk-bad)); background: color-mix(in srgb, var(--ovk-bad) 14%, transparent); }
238
239.ovk-family-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
240.ovk-family-head.ovk-family-head h2 { margin: 0; font-family: inherit; font-size: .95rem; font-weight: 750; color: var(--ovk-text); }
241.ovk-family-head a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ovk-accent); font-size: .84rem; font-weight: 700; text-decoration: none; }
242.ovk-family-items { display: flex; gap: 8px; margin: 0 calc(-1 * var(--ovk-gutter, 0px)); padding: 2px var(--ovk-gutter, 0px) 4px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--ovk-gutter, 0px); overscroll-behavior-x: contain; }
243.ovk-family-items::-webkit-scrollbar { display: none; }
244.ovk-family-items > a { flex: none; display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: var(--ovk-text); font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
245.ovk-family-items > a:hover { border-color: var(--ovk-accent); }
246.ovk-family-items > a[aria-current="page"] { border-color: var(--ovk-accent); color: var(--ovk-accent); }
247.ovk-family-full { display: none; }
248
249.ovk-tool-folds > .ovk-fold { margin: 0; border-radius: 0; border-top-width: 0; }
250.ovk-tool-folds > .ovk-fold:first-child { border-top-width: 1px; border-radius: 16px 16px 0 0; }
251.ovk-tool-folds > .ovk-fold:last-child { border-radius: 0 0 16px 16px; }
252.ovk-tool-folds > .ovk-fold:only-child { border-radius: 16px; }
253.ovk-tool-folds > .ovk-fold > summary { min-height: 52px; }
254.ovk-tool-related > .ovk-list-head:first-child { margin-top: 4px; }
255.ovk-tool-related > .ovk-list { margin-bottom: 0; }
256
257@media (min-width: 600px) {
258 .ovk-tool-row { grid-template-columns: minmax(0, 1fr) auto; }
259 .ovk-tool-go { width: auto; min-width: 150px; min-height: 52px; }
260 .ovk-tool-head .ovk-tool-title.ovk-tool-title { font-size: 1.85rem; }
261}
262@media (min-width: 1024px) {
263 .ovk-tool { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: repeat(4, auto) 1fr; column-gap: 32px; row-gap: 18px; }
264 .ovk-tool > * { grid-column: 1; }
265 .ovk-tool > .ovk-family { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: calc(var(--ovk-top) + 16px); }
266 .ovk-tool-head { grid-template-columns: 52px minmax(0, 1fr); }
267 .ovk-tool-tile { width: 52px; height: 52px; border-radius: 14px; }
268 .ovk-tool-head .ovk-tool-task.ovk-tool-task { font-size: 1rem; }
269 .ovk-family-items { flex-direction: column; gap: 0; margin: 0; padding: 0; overflow: visible; border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-panel); }
270 .ovk-family-items > a { min-height: 42px; padding: 0 14px; border: 0; border-top: 1px solid var(--ovk-line); border-radius: 0; background: none; white-space: normal; }
271 .ovk-family-items > a:first-child { border-top: 0; }
272 .ovk-family-items > a[aria-current="page"] { box-shadow: inset 3px 0 var(--ovk-accent); }
273 .ovk-family-short { display: none; }
274 .ovk-family-full { display: inline; }
275}
276@media (pointer: coarse) { .ovk-try > a { min-height: 36px; } }
277
278/* An offer (offer-card.js, Opus 11-09): title and shop left, the all-in price right with what it includes, one quiet
279 freshness line. Stale offers fade a little and say so. */
280.ov-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 14px 16px; border: 1px solid var(--ovk-line, var(--border, #1f2d47)); border-radius: 14px; background: var(--ovk-card, var(--bg-card, #101828)); min-width: 0; }
281.ov-offer-main { min-width: 0; }
282.ov-offer-title { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
283.ov-offer-title a { color: var(--ovk-text, var(--text-primary, #e6edf7)); text-decoration: none; }
284.ov-offer-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
285.ov-offer-facts { margin: 4px 0 0; color: var(--ovk-dim, var(--text-secondary, #96a7c2)); font-size: .88rem; overflow-wrap: anywhere; }
286.ov-offer-price { display: grid; justify-items: end; text-align: right; }
287.ov-offer-price b { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--ovk-text, var(--text-primary, #e6edf7)); }
288.ov-offer-price b.is-unknown { font-size: .95rem; color: var(--ovk-dim, var(--text-secondary, #96a7c2)); }
289.ov-offer-price small { color: var(--ovk-dim, var(--text-secondary, #96a7c2)); font-size: .8rem; }
290.ov-offer-fresh { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ovk-faint, var(--text-muted, #7386a3)); font-size: .78rem; }
291.ov-offer.is-stale { opacity: .85; }
292.ov-offer-stale { color: var(--warning, #f59f00); }
293@media (max-width: 420px) { .ov-offer { grid-template-columns: minmax(0, 1fr); } .ov-offer-price { justify-items: start; text-align: left; } }
294