/* Školní radar — design proposal "Metro" (?design=metro)
Public-transport wayfinding: the site reads like a well-signed metro system. Near-white platform walls, a black
station-sign header closed by a five-colour "line stripe", school stages as metro lines (MŠ violet, ZŠ green A,
SŠ yellow B, gymnázium red C, DS blue D, VŠ teal), round white "stations" on thick route lines (school lists,
timeline, breadcrumbs, kickers), square pictogram tiles, and departure-board figures: black boards with amber
tabular digits for travel minutes, key figures and table heads.
Type: Inter Tight (display, 600–800) + Inter (text, 400–700), OFL, latin + latin-ext (fonts/metro,
licences OFL-Inter.txt, OFL-InterTight.txt). Logo: a radar roundel entered by a 45° route line that ends in a
centre station (templates/_brand_metro.html.twig).
Same class contract and section order as public/css/app.css:
1 Fonts 12 Cards, panels, KPI tiles, key–value
2 Tokens (light/dark) 13 School list
3 Base 14 Callouts, partner boxes, "málo dat"
4 Layout 15 Tables
5 Header, nav, menu 16 Meters and bars
6 Search and suggestions 17 Forms, "Kam se dostanu", chance groups
7 Hero, page heads 18 Timeline (Termíny)
8 Typography helpers 19 Charts
9 Buttons 20 Maps
10 Badges, bands, tags 21 FAQ, pagination, empty states, breadcrumbs
11 Chips, filters, tabs 22 Footer, consent, facts, print */
/* ==========================================================================
1 Fonts (fonts/metro, OFL)
========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/metro/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/metro/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/metro/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/metro/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/metro/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/metro/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/metro/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/metro/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/metro/inter-tight-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/metro/inter-tight-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/metro/inter-tight-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/metro/inter-tight-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/metro/inter-tight-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/metro/inter-tight-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+2197, U+2212, U+2215, U+2248, U+2260, U+FEFF, U+FFFD; }
/* ==========================================================================
2 Tokens
========================================================================== */
:root {
color-scheme: light dark;
--display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
--sans: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
--step--2: clamp(.78rem, .76rem + .08vw, .83rem);
--step--1: clamp(.88rem, .86rem + .10vw, .94rem);
--step-0: clamp(1.02rem, .99rem + .14vw, 1.1rem);
--step-1: clamp(1.2rem, 1.12rem + .40vw, 1.5rem);
--step-2: clamp(1.55rem, 1.36rem + .95vw, 2.2rem);
--step-3: clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem);
--step-4: clamp(2.4rem, 1.85rem + 2.75vw, 4.1rem);
--step-5: clamp(2.9rem, 2.0rem + 4.4vw, 5.6rem);
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 72px;
--gutter: clamp(16px, 4vw, 48px);
--section: clamp(40px, 6vw, 88px);
--wrap: 1200px;
--wrap-wide: 1400px;
--measure: 68ch;
--tracking-caps: .08em;
--r-1: 2px;
--r-2: 4px;
--r-3: 6px;
--r-4: 8px;
--r-pill: 999px;
--tap: 44px;
--ease: cubic-bezier(.2, .7, .2, 1);
/* Network lines (identical in both themes) – the brand colours. A/B/C = Prague metro, D = the planned blue line */
--line-a: #00a562; /* green – ZŠ, the brand line */
--line-b: #f8b322; /* yellow – SŠ */
--line-c: #e2231a; /* red – gymnázium */
--line-d: #0a6fc2; /* blue – dětské skupiny */
--line-e: #8b3fa0; /* violet – MŠ */
--line-f: #00838f; /* teal – VŠ and other */
--line-stripe: linear-gradient(90deg, var(--line-e) 0 16.66%, var(--line-a) 16.66% 33.33%, var(--line-b) 33.33% 50%, var(--line-c) 50% 66.66%, var(--line-d) 66.66% 83.33%, var(--line-f) 83.33%);
/* Departure board: black panel, amber LED digits */
--board: light-dark(#141518, #000000);
--board-line: light-dark(transparent, rgb(255 255 255 / .16));
--board-text: #d9dbe0;
--board-amber: #ffb81c;
--board-green: #6fe3a6;
--brand-black: #141518;
--brand-white: #ffffff;
/* aliases kept for markup that references the original brand tokens (logo fallbacks) */
--brand-navy: #141518;
--brand-yellow: #ffb81c;
--brand-snow: #ffffff;
/* Chrome: header and footer = station sign, black in both themes */
--chrome: light-dark(#141518, #050506);
--chrome-2: light-dark(#25272c, #17181b);
--chrome-line: rgb(255 255 255 / .16);
--chrome-ring: rgb(255 255 255 / .08);
--on-chrome: #ffffff;
--on-chrome-muted: #b4b7be;
/* Adaptive surfaces and text */
--bg: light-dark(#f4f4f1, #0e0f11);
--surface: light-dark(#ffffff, #17181b);
--surface-2: light-dark(#e9e9e5, #222327);
--ink: light-dark(#141518, #f3f3f0);
--ink-2: light-dark(#2e3036, #cfd1d5);
--muted: light-dark(#5c5f67, #9b9ea6);
--line: light-dark(rgb(20 21 24 / .13), rgb(255 255 255 / .12));
--line-strong: light-dark(rgb(20 21 24 / .32), rgb(255 255 255 / .30));
--shadow: light-dark(rgb(20 21 24 / .12), rgb(0 0 0 / .5));
--field-border: light-dark(#7a7d85, #6c7079);
--station: light-dark(#ffffff, #f3f3f0); /* white station discs on route lines */
--accent: light-dark(#00804a, #2fc77f); /* line A green: buttons and fills */
--on-accent: light-dark(#ffffff, #04130b);
--accent-hover: light-dark(#006b3e, #52d796);
--accent-soft: light-dark(#e2f3e9, rgb(47 199 127 / .14));
--accent-text: light-dark(#006b3e, #6fe3a6);
--highlight: light-dark(#c3ead3, rgb(47 199 127 / .30));
--link-line: light-dark(#00a562, #2fc77f);
--focus: light-dark(#0a5aa0, #ffb81c);
--good: light-dark(#0b6a57, #7ae6c9);
--bad: light-dark(#b23d0b, #ffa47d);
/* Difficulty of admission, 4 steps (signal colours; always with ascending bars) */
--d1-fill: light-dark(#138a72, #4fd6b4);
--d1-ink: light-dark(#0b6a57, #7ae6c9);
--d1-bg: light-dark(#dcf2ec, rgb(79 214 180 / .14));
--d2-fill: light-dark(#c98a00, #f5c451);
--d2-ink: light-dark(#7a5400, #f7cf6e);
--d2-bg: light-dark(#fbf0d2, rgb(245 196 81 / .14));
--d3-fill: light-dark(#e5571b, #ff8a57);
--d3-ink: light-dark(#b23d0b, #ffa47d);
--d3-bg: light-dark(#fde4d8, rgb(255 138 87 / .15));
--d4-fill: light-dark(#b8102e, #ff5f7e);
--d4-ink: light-dark(#a10d28, #ff8ea3);
--d4-bg: light-dark(#f9dbe0, rgb(255 95 126 / .16));
/* School stages = metro lines. Each also has its own station shape (colour is never the only cue):
MŠ circle · ZŠ square · SŠ diamond · gymnázium filled diamond · DS dashed ring · VŠ / other circle */
--ms-fill: light-dark(#8b3fa0, #c98ce0);
--ms-ink: light-dark(#6e2a84, #dcb0ee);
--ms-bg: light-dark(#f2e7f6, rgb(201 140 224 / .15));
--zs-fill: light-dark(#00a562, #3fd18a);
--zs-ink: light-dark(#006b3e, #6fe3a6);
--zs-bg: light-dark(#dff3e8, rgb(63 209 138 / .14));
--ss-fill: light-dark(#f2a900, #ffc94a);
--ss-ink: light-dark(#7a5300, #ffd677);
--ss-bg: light-dark(#fdf0d0, rgb(255 201 74 / .14));
--gym-fill: light-dark(#e2231a, #ff6b5f);
--gym-ink: light-dark(#b2140d, #ff958b);
--gym-bg: light-dark(#fce2e0, rgb(255 107 95 / .15));
--ds-fill: light-dark(#0a6fc2, #5aa9f0);
--ds-ink: light-dark(#0a5799, #93c8f7);
--ds-bg: light-dark(#e0ecf8, rgb(90 169 240 / .15));
--vs-fill: light-dark(#00838f, #3cc6cf);
--vs-ink: light-dark(#006670, #7fdde3);
--vs-bg: light-dark(#dcf0f1, rgb(60 198 207 / .14));
--oth-fill: light-dark(#6b6f78, #8e939c);
--oth-ink: light-dark(#33363c, #cfd1d5);
--oth-bg: light-dark(#ebebe7, #25272b);
/* Charts */
--viz-1: light-dark(#0a6fc2, #7ab9f5);
--viz-2: light-dark(#141518, #f3f3f0);
--viz-3: light-dark(#00a562, #3fd18a);
--viz-4: light-dark(#e2231a, #ff6b5f);
--viz-5: light-dark(#8e9199, #5f636b);
--viz-grid: light-dark(rgb(20 21 24 / .08), rgb(255 255 255 / .08));
--viz-axis: light-dark(rgb(20 21 24 / .40), rgb(255 255 255 / .40));
--viz-label: light-dark(#5c5f67, #9b9ea6);
/* Metro diagram used as decoration (hero, page heads, footer): fixed colours, reads on both grounds */
--diagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 440' fill='none'%3E%3Cg stroke='%238a8d94' stroke-opacity='.35' stroke-width='2'%3E%3Ccircle cx='440' cy='210' r='70'/%3E%3Ccircle cx='440' cy='210' r='135'/%3E%3Ccircle cx='440' cy='210' r='200'/%3E%3C/g%3E%3Cg stroke-width='14' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M-20 330H250L370 210H660' stroke='%2300a562'/%3E%3Cpath d='M440 -20V140L520 220V460' stroke='%23e2231a'/%3E%3Cpath d='M-20 120H250L340 210H440L560 90H660' stroke='%23f8b322'/%3E%3Cpath d='M180 460V400L300 280H400' stroke='%238b3fa0'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='%23141518' stroke-width='5'%3E%3Crect x='414' y='184' width='52' height='52' rx='26'/%3E%3Ccircle cx='250' cy='330' r='10'/%3E%3Ccircle cx='130' cy='330' r='10'/%3E%3Ccircle cx='250' cy='120' r='10'/%3E%3Ccircle cx='110' cy='120' r='10'/%3E%3Ccircle cx='560' cy='210' r='10'/%3E%3Ccircle cx='440' cy='60' r='10'/%3E%3Ccircle cx='520' cy='330' r='10'/%3E%3Ccircle cx='300' cy='280' r='10'/%3E%3Ccircle cx='600' cy='90' r='10'/%3E%3C/g%3E%3Ccircle cx='553' cy='118' r='7' fill='%23ffb81c'/%3E%3C/svg%3E");
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* ==========================================================================
3 Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 24px;
}
body {
margin: 0;
overflow-x: clip;
background: var(--bg);
color: var(--ink-2);
font-family: var(--sans);
font-size: var(--step-0);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4 {
margin: 0 0 var(--s-4);
color: var(--ink);
font-family: var(--display);
font-weight: 700;
letter-spacing: -.005em;
line-height: 1.04;
text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -.012em; line-height: .98; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.15; }
h4 { font-size: var(--step-0); font-weight: 700; letter-spacing: .01em; }
p { margin: 0 0 var(--s-4); }
ul, ol { padding-left: 1.25em; }
a {
color: var(--ink);
text-decoration-line: underline;
text-decoration-color: var(--link-line);
text-decoration-thickness: .13em;
text-underline-offset: .22em;
transition: color .15s, text-decoration-color .15s, background-color .15s;
}
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--board-amber); }
::selection { background: var(--highlight); color: var(--ink); }
code { font-size: .88em; }
hr { height: 2px; margin: var(--s-6) 0; border: 0; background: var(--line); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.skip {
position: fixed; top: -80px; left: var(--s-4); z-index: 200;
padding: 12px 18px;
border-radius: var(--r-2);
background: var(--board-amber); color: var(--brand-black);
font-weight: 700;
}
.skip:focus { top: var(--s-4); }
/* Every number in data UI uses tabular lining figures (columns and tiles line up, like a departure board) */
.num, .data-table, .kv dd, .stat__value, .hero__figure-value, .rank-mini strong, .meter, .school-item__metric,
.minutes, .timeline__date, .input--score, .pager, .chance__count, .partner-box__figures, .fact__value,
.living__index, .chart__label, .map__legend, .bar {
font-variant-numeric: tabular-nums lining-nums;
}
/* Sign labels: Inter Tight SemiBold, caps, tracked */
.kicker, .stat__label, .data-table thead th, .site-footer__title, .card__kicker, .menu__title,
.filters label, .origin, .pill, .hero__figure-label, .partner-box__kicker, .chance__desc-label {
font-family: var(--display);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: var(--tracking-caps);
line-height: 1.3;
text-transform: uppercase;
}
/* ==========================================================================
4 Layout
========================================================================== */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }
.wrap--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--tint { background: var(--surface-2); }
.section--tint + .section { padding-top: var(--section); }
.stack > * + * { margin-top: var(--s-6); }
.stack--sm > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } }
.site-main { min-height: 60vh; }
/* ==========================================================================
5 Demo notice, header (station sign), navigation, mobile menu
========================================================================== */
/* service notice = the amber disruption board */
.demo-notice {
padding: 8px 0;
background: var(--board-amber);
color: var(--brand-black);
font-size: var(--step--1);
font-weight: 600;
text-align: center;
}
.demo-notice a { color: inherit; text-decoration-color: currentColor; }
.site-header { position: relative; z-index: 50; padding-bottom: 6px; background: var(--chrome); color: var(--on-chrome); }
/* the network stripe under the sign: one segment per line */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--line-stripe); }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); min-height: 72px; padding-block: 12px; }
.site-header__bar .search { flex: 1 1 320px; max-width: 520px; }
.site-header__tools { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; color: var(--on-chrome); text-decoration: none; }
.brand:hover { color: var(--on-chrome); }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; color: currentColor; }
.brand__mark .brand__route { stroke-dasharray: 40; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease); }
.brand:hover .brand__route { animation: route-draw .8s var(--ease); }
@keyframes route-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.brand__name {
display: grid;
font-family: var(--display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: .005em;
line-height: .88;
white-space: nowrap;
}
.brand__name em { color: var(--line-a); font-style: normal; }
.brand__name small { display: none; }
/* wordmark on a light ground (documents, partner pages) */
.brand--light { color: var(--ink); --brand-station: var(--surface); }
.brand--light .brand__name em { color: var(--accent-text); }
.icon-btn {
display: inline-grid; place-items: center;
width: var(--tap); height: var(--tap); padding: 0;
border: 0; border-radius: var(--r-2);
background: transparent;
color: inherit; cursor: pointer;
transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--chrome-2); color: var(--board-amber); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
:root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}
/* Main navigation: second sign row; the current page is the lit platform sign */
.nav { display: flex; gap: 2px; margin-inline: -10px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__link {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
min-height: 46px;
padding: 0 12px;
color: var(--on-chrome-muted);
font-family: var(--display);
font-size: 1.08rem;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.nav__link::after {
content: "";
position: absolute; left: 12px; right: 12px; bottom: 0;
height: 5px;
background: var(--on-chrome);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--on-chrome); }
.nav__link:hover::after { transform: scaleX(.35); }
.nav__link[aria-current="page"] { color: var(--on-chrome); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* the tool gets a line bullet (green station) */
.nav__link--tool::before { content: ""; width: 12px; height: 12px; border: 3px solid var(--line-a); border-radius: 50%; background: var(--brand-white); }
.menu-btn { display: none; }
@media (max-width: 899px) {
.site-header .nav { display: none; }
.menu-btn { display: inline-grid; }
.site-header__bar .search { order: 3; flex-basis: 100%; max-width: none; }
}
/* Mobile menu popover: the line diagram of the site */
.menu {
inset: 0 0 auto auto;
width: min(380px, 100vw);
height: 100dvh;
max-height: none;
margin: 0;
padding: var(--s-6) var(--s-5);
overflow-y: auto;
border: 0;
border-left: 6px solid var(--ink);
background: var(--bg);
color: var(--ink);
box-shadow: -20px 0 60px var(--shadow);
}
.menu::backdrop { background: rgb(5 5 6 / .6); }
.menu__title { margin: 0 0 var(--s-3); color: var(--muted); }
.menu__list { position: relative; margin: 0 0 var(--s-6); padding: 0 0 0 30px; list-style: none; }
.menu__list::before { content: ""; position: absolute; left: 7px; top: 26px; bottom: 26px; width: 6px; background: var(--ink); }
.menu__link {
position: relative;
display: flex; align-items: center; justify-content: space-between;
min-height: 52px;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-family: var(--display);
font-size: var(--step-1);
font-weight: 700;
text-decoration: none;
}
.menu__link::before { content: ""; position: absolute; left: -30px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 4px solid var(--ink); border-radius: 50%; background: var(--station); }
.menu__link[aria-current="page"]::before { background: var(--line-a); }
.menu__link::after { content: "→"; color: var(--muted); font-family: var(--sans); transition: transform .15s; }
.menu__link:hover::after { transform: translateX(3px); color: var(--ink); }
.menu .field { margin-bottom: var(--s-5); }
/* ==========================================================================
6 Search and suggestions (public/js/app.js: [data-search], .suggest__item/__name/__meta)
========================================================================== */
.search { position: relative; }
.search__field {
display: flex; align-items: center; gap: 10px;
min-height: var(--tap);
padding: 0 6px 0 14px;
border: 2px solid var(--field-border);
border-radius: var(--r-2);
background: var(--surface);
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.search__field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--link-line); }
.search__icon { flex-shrink: 0; color: var(--muted); }
.search__input {
flex: 1;
width: 100%; min-width: 0; height: 40px;
border: 0; outline: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--step-0);
font-weight: 500;
}
.search__input::placeholder { color: var(--muted); font-weight: 400; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__kbd {
display: none;
min-width: 24px; padding: 1px 7px;
border: 1px solid var(--line-strong); border-radius: var(--r-1);
color: var(--muted);
font: 700 .75rem/1.4 var(--sans);
text-align: center;
}
@media (min-width: 900px) and (hover: hover) { .search__kbd { display: inline-block; } }
/* in the black header */
.site-header .search__field { border-color: rgb(255 255 255 / .34); background: var(--chrome-2); }
.site-header .search__field:focus-within { border-color: var(--board-amber); box-shadow: 0 0 0 3px rgb(255 184 28 / .25); }
.site-header .search__input { color: var(--on-chrome); }
.site-header .search__input::placeholder, .site-header .search__icon { color: var(--on-chrome-muted); }
.site-header .search__kbd { border-color: var(--chrome-line); color: var(--on-chrome-muted); }
.search--hero { max-width: 680px; }
.search--hero .search__field { min-height: 68px; padding: 0 8px 0 20px; border: 3px solid var(--ink); border-radius: var(--r-2); background: var(--surface); }
.search--hero .search__input { height: 58px; font-size: var(--step-1); }
.search__submit {
flex-shrink: 0;
min-height: 50px; padding: 0 22px;
border: 0; border-radius: var(--r-1);
background: var(--accent); color: var(--on-accent);
font: 700 1.1rem var(--display);
letter-spacing: .03em;
text-transform: uppercase;
cursor: pointer;
transition: background-color .15s;
}
.search__submit::after { content: "\2002\2192"; }
.search__submit:hover { background: var(--accent-hover); }
@media (max-width: 480px) { .search__submit { padding: 0 14px; } .search__submit::after { content: none; } }
.suggest {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
margin: 0; padding: 6px;
border: 2px solid var(--ink);
border-radius: var(--r-2);
background: var(--surface);
color: var(--ink);
box-shadow: 0 18px 40px -12px var(--shadow);
list-style: none;
}
.suggest[hidden] { display: none; }
.site-header .suggest { min-width: min(340px, calc(100vw - 32px)); }
.suggest__item a {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: var(--tap);
padding: 8px 12px;
border-radius: var(--r-1);
color: var(--ink); text-decoration: none;
transition: background-color .1s;
}
.suggest__item a:hover, .suggest__item[aria-selected="true"] a { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--link-line); }
.suggest__name { font-weight: 700; }
.suggest__meta { color: var(--muted); font-size: var(--step--2); white-space: nowrap; }
.suggest__empty { padding: 10px 12px; color: var(--muted); font-size: var(--step--1); }
/* ==========================================================================
7 Hero (home) and page heads
========================================================================== */
/* Home hero: the platform wall – light ground, a metro diagram with radar rings on the right, the key figure on a
departure board. "kolem vás" sits on a black station-name plate. */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(36px, 6vw, 96px) 0 clamp(44px, 6vw, 96px);
border-bottom: 1px solid var(--line);
background: var(--bg);
color: var(--ink-2);
}
.hero::before {
content: "";
position: absolute; z-index: -1;
top: 50%; right: -60px;
width: min(760px, 70vw); aspect-ratio: 640 / 440;
background: var(--diagram) center / contain no-repeat;
transform: translateY(-50%);
-webkit-mask-image: linear-gradient(to left, #000 55%, transparent 98%);
mask-image: linear-gradient(to left, #000 55%, transparent 98%);
pointer-events: none;
}
@media (max-width: 960px) {
.hero::before { top: -30px; right: -170px; width: 460px; opacity: .2; transform: none; }
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 960px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }
.hero .kicker { color: var(--ink-2); }
.hero h1 {
max-width: 14ch;
margin-bottom: var(--s-5);
color: var(--ink);
font-size: var(--step-5);
font-weight: 800;
line-height: .92;
letter-spacing: -.015em;
}
.hero h1 em {
display: inline;
padding: 0 .16em .02em;
background: var(--ink);
color: var(--bg);
font-style: normal;
line-height: 1.12;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: inset 0 -.12em 0 var(--line-a);
}
.hero .lead { max-width: 54ch; margin-bottom: var(--s-6); color: var(--ink-2); }
.hero .suggest { color: var(--ink); }
.hero__hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--step--1); }
.hero__hints a {
display: inline-flex; align-items: center; gap: 8px;
min-height: 38px; padding: 0 12px 0 10px;
border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
background: var(--surface);
color: var(--ink); font-weight: 600; text-decoration: none;
transition: border-color .15s, background-color .15s, color .15s;
}
.hero__hints a::before { content: ""; width: 10px; height: 10px; border: 2.5px solid var(--line-a); border-radius: 50%; background: var(--station); }
.hero__hints a:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
/* key figure: departure board */
.hero__figure {
position: relative;
margin: 0; padding: var(--s-5) var(--s-5) var(--s-4);
border: 1px solid var(--board-line);
border-radius: var(--r-3);
background: var(--board);
color: var(--board-text);
box-shadow: 0 24px 40px -28px rgb(0 0 0 / .6);
}
.hero__figure::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--line-stripe); }
.hero__figure-label { margin: 0 0 var(--s-2); color: var(--board-text); }
.hero__figure-value {
margin: 0;
color: var(--board-amber);
font-family: var(--display);
font-size: var(--step-5);
font-weight: 700;
line-height: .95;
letter-spacing: .02em;
overflow-wrap: anywhere;
text-shadow: 0 0 18px rgb(255 184 28 / .35);
}
.hero__figure-value span { display: block; margin-top: 6px; color: var(--brand-white); font-family: var(--display); font-size: var(--step-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-shadow: none; }
.hero__figure-note { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px dashed rgb(255 255 255 / .2); color: var(--board-text); font-size: var(--step--1); }
/* Page head of inner pages: route crumbs, kicker, h1, lead, meta, key figures; a faint diagram in the corner.
.page-hero is the documented name, .page-head the legacy alias (generic templates). */
.page-hero, .page-head {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(20px, 3vw, 36px) 0 clamp(28px, 4vw, 48px);
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.page-hero::before, .page-head::before {
content: "";
position: absolute; z-index: -1;
top: -40px; right: -140px;
width: 560px; aspect-ratio: 640 / 440;
background: var(--diagram) center / contain no-repeat;
opacity: .5;
-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 85%);
mask-image: linear-gradient(to left, #000 30%, transparent 85%);
pointer-events: none;
}
@media (max-width: 760px) { .page-hero::before, .page-head::before { width: 380px; right: -200px; top: -60px; opacity: .22; } }
.page-head { margin-bottom: var(--s-6); }
.page-hero h1, .page-head h1 { max-width: 22ch; margin-bottom: var(--s-4); }
.page-hero h1 em, .page-head h1 em { font-style: normal; background: linear-gradient(transparent 80%, var(--link-line) 80% 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-hero .lead, .page-head .lead { margin-bottom: 0; }
.page-hero__meta, .page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; }
.kpis.page-hero__figures, .page-hero__figures { margin-top: var(--s-6); }
.page-head__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.page-head .search__input { width: 100%; }
/* ==========================================================================
8 Typography helpers
========================================================================== */
/* Kicker: caps label opened by a line stub ending in a station */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s-3); color: var(--muted); }
.kicker::before {
content: ""; flex: none; width: 26px; height: 14px;
background:
radial-gradient(circle at 19px 7px, var(--station) 0 2.6px, var(--ink) 3.2px 6.5px, transparent 7px),
linear-gradient(var(--line-a) 0 0) 0 50% / 16px 5px no-repeat;
}
.lead { max-width: var(--measure); color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.6em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--muted); }
.note { color: var(--muted); font-size: var(--step--1); }
mark, .mark {
padding: 0 .12em;
border-radius: .1em;
background: linear-gradient(transparent 50%, var(--highlight) 50% 94%, transparent 94%);
color: inherit;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Source / attribution line under every number block */
.source {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
margin: var(--s-3) 0 0;
color: var(--muted);
font-size: var(--step--2);
line-height: 1.5;
}
.source a { color: inherit; text-decoration-color: var(--line-strong); }
.source a:hover { color: var(--ink); text-decoration-color: currentColor; }
.source time { white-space: nowrap; }
.source__sep { opacity: .6; }
/* Section heads: a short black sign bar above the title */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-3) var(--s-5);
margin-bottom: var(--s-5);
}
.section-head h2 { margin: 0; font-size: var(--step-3); }
.section-head .kicker { margin-bottom: var(--s-2); }
.section-head p { max-width: 62ch; margin: var(--s-2) 0 0; color: var(--ink-2); }
@media (max-width: 640px) { .section-head { flex-direction: column; align-items: flex-start; } }
.more-link {
display: inline-flex; align-items: center; gap: 8px;
flex-shrink: 0;
min-height: var(--tap);
color: var(--ink);
font-family: var(--display);
font-size: 1.08rem;
font-weight: 700;
letter-spacing: .03em;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.more-link span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: .9rem; transition: transform .15s var(--ease), background-color .15s; }
.more-link:hover { color: var(--ink); }
.more-link:hover span { transform: translateX(3px); background: var(--accent); color: var(--on-accent); }
.generated { max-width: var(--measure); }
.generated p { margin: 0 0 var(--s-4); color: var(--ink); font-size: var(--step-1); line-height: 1.55; }
.delta--up { color: var(--bad); font-weight: 700; }
.delta--down { color: var(--good); font-weight: 700; }
/* ==========================================================================
9 Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
border: 2px solid transparent;
border-radius: var(--r-2);
background: var(--accent);
color: var(--on-accent);
font: 700 1.12rem / 1.1 var(--display);
letter-spacing: .03em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .22); }
.btn:active { box-shadow: none; }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--ink-2); color: var(--bg); }
.btn--ghost { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); box-shadow: none; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn .btn__icon { width: 18px; height: 18px; }
/* ==========================================================================
10 Badges (lines), minutes (departure boards), difficulty bands, chance tags, origin
========================================================================== */
/* Category badge = a line: SŠ. A short route stub (::before) runs into the
station marker (::after, moved in front of the text); the station shape is the category's map shape. */
.badge {
--b-fill: var(--oth-fill); --b-ink: var(--oth-ink); --b-bg: var(--oth-bg);
display: inline-flex; align-items: center; gap: 0;
min-height: 26px; padding: 2px 9px 2px 7px;
border-radius: var(--r-2);
background: var(--b-bg);
color: var(--b-ink);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.badge::before { content: ""; order: -2; flex: none; width: 9px; height: 4px; margin-right: -2px; background: var(--b-fill); }
.badge::after { content: ""; order: -1; flex: none; width: 11px; height: 11px; margin-right: 6px; border: 2.5px solid var(--b-fill); border-radius: 50%; background: var(--station); }
.badge--ms { --b-fill: var(--ms-fill); --b-ink: var(--ms-ink); --b-bg: var(--ms-bg); }
.badge--zs { --b-fill: var(--zs-fill); --b-ink: var(--zs-ink); --b-bg: var(--zs-bg); }
.badge--ss { --b-fill: var(--ss-fill); --b-ink: var(--ss-ink); --b-bg: var(--ss-bg); }
.badge--gym { --b-fill: var(--gym-fill); --b-ink: var(--gym-ink); --b-bg: var(--gym-bg); }
.badge--ds { --b-fill: var(--ds-fill); --b-ink: var(--ds-ink); --b-bg: var(--ds-bg); }
.badge--vs { --b-fill: var(--vs-fill); --b-ink: var(--vs-ink); --b-bg: var(--vs-bg); }
.badge--zs::after { border-radius: 2px; }
.badge--ss::after, .badge--gym::after { width: 10px; height: 10px; margin-inline: 1px 7px; border-radius: 1px; transform: rotate(45deg); }
.badge--gym::after { background: var(--b-fill); box-shadow: inset 0 0 0 1.5px var(--station); }
.badge--ds::after { border-style: double; border-width: 3.5px; width: 12px; height: 12px; }
.badge--zus::after, .badge--vos::after, .badge--kons::after { width: 5px; border-radius: 1px; }
/* founder: plain outline, no line (soukromá, církevní, státní) */
.badge--founder { padding-inline: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font-weight: 600; }
.badge--founder::before, .badge--founder::after { content: none; }
/* paid highlight in listings – always visibly labelled */
.badge--promo { padding-inline: 8px; background: var(--board-amber); color: var(--brand-black); }
.badge--promo::before, .badge--promo::after { content: none; }
/* Minutes = departure-board label: 12 min autem. Black board, pictogram,
amber LED digits, condensed caps label. */
.minutes {
display: inline-flex; align-items: center; gap: 6px;
min-height: 26px; padding: 2px 9px 2px 6px;
border: 1px solid var(--board-line);
border-radius: var(--r-2);
background: var(--board);
color: var(--board-text);
font-family: var(--display);
font-size: .8rem;
font-weight: 600;
letter-spacing: .05em;
line-height: 1.1;
text-transform: uppercase;
white-space: nowrap;
}
.minutes::before {
content: ""; width: 16px; height: 16px; flex: none;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V11l2-5h10l2 5v5'/%3E%3Cpath d='M3 16h18v2H3z'/%3E%3Ccircle cx='7.5' cy='13' r='.6'/%3E%3Ccircle cx='16.5' cy='13' r='.6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V11l2-5h10l2 5v5'/%3E%3Cpath d='M3 16h18v2H3z'/%3E%3Ccircle cx='7.5' cy='13' r='.6'/%3E%3Ccircle cx='16.5' cy='13' r='.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.minutes b { color: var(--brand-white); font-size: 1.22em; font-weight: 700; letter-spacing: .02em; }
.minutes--here { color: var(--board-text); }
.minutes--here::before { -webkit-mask-image: none; mask-image: none; width: 12px; height: 12px; margin: 0 2px; border: 3px solid var(--line-a); border-radius: 50%; background: var(--brand-white); }
/* Difficulty band chip: těžké. Ascending signal bars = the step (1–4). */
.band {
--band-fill: var(--oth-fill); --band-ink: var(--oth-ink); --band-bg: var(--oth-bg);
--on: var(--band-fill);
--off: color-mix(in srgb, var(--band-fill) 24%, transparent);
--b1: var(--on); --b2: var(--off); --b3: var(--off); --b4: var(--off);
display: inline-flex; align-items: center; gap: 7px;
min-height: 26px; padding: 2px 10px 2px 8px;
border-radius: var(--r-2);
background: var(--band-bg);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-fill) 35%, transparent);
color: var(--band-ink);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.band::before {
content: ""; flex: none; width: 17px; height: 12px;
background:
linear-gradient(var(--b1) 0 0) 0 100% / 3px 40% no-repeat,
linear-gradient(var(--b2) 0 0) 4.6px 100% / 3px 60% no-repeat,
linear-gradient(var(--b3) 0 0) 9.2px 100% / 3px 80% no-repeat,
linear-gradient(var(--b4) 0 0) 13.8px 100% / 3px 100% no-repeat;
}
.band--1 { --band-fill: var(--d1-fill); --band-ink: var(--d1-ink); --band-bg: var(--d1-bg); }
.band--2 { --band-fill: var(--d2-fill); --band-ink: var(--d2-ink); --band-bg: var(--d2-bg); --b2: var(--on); }
.band--3 { --band-fill: var(--d3-fill); --band-ink: var(--d3-ink); --band-bg: var(--d3-bg); --b2: var(--on); --b3: var(--on); }
.band--4 { --band-fill: var(--d4-fill); --band-ink: var(--d4-ink); --band-bg: var(--d4-bg); --b2: var(--on); --b3: var(--on); --b4: var(--on); }
.band--lg { min-height: 34px; padding: 4px 14px 4px 12px; font-size: var(--step--1); }
.band-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-3) var(--s-5); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.band-legend li { display: grid; gap: 6px; align-content: start; justify-items: start; color: var(--ink-2); line-height: 1.45; }
/* Chance tag (Kam se dostanu): a station in the chance colour */
.chance-tag {
--c: var(--oth-fill); --c-ink: var(--oth-ink); --c-bg: var(--oth-bg);
display: inline-flex; align-items: center; gap: 7px;
min-height: 26px; padding: 2px 10px 2px 7px;
border-radius: var(--r-2);
background: var(--c-bg); color: var(--c-ink);
font-size: var(--step--2); font-weight: 700; white-space: nowrap;
}
.chance-tag::before { content: ""; width: 12px; height: 12px; border: 3px solid var(--c); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px var(--station); }
.chance-tag--safe { --c: var(--d1-fill); --c-ink: var(--d1-ink); --c-bg: var(--d1-bg); }
.chance-tag--real { --c: var(--d2-fill); --c-ink: var(--d2-ink); --c-bg: var(--d2-bg); }
.chance-tag--risky { --c: var(--d3-fill); --c-ink: var(--d3-ink); --c-bg: var(--d3-bg); }
.chance-tag--unlikely { --c: var(--oth-fill); }
.chance-tag--unlikely::before { background: var(--station); border-style: dashed; box-shadow: none; }
.pill { color: var(--muted); }
.pill--good { color: var(--good); }
.origin { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.origin::before { content: ""; width: 14px; height: 4px; background: currentColor; }
/* ==========================================================================
11 Chips, filter chips, segmented control, tabs
========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
display: inline-flex; align-items: center; gap: 6px;
min-height: 38px; padding: 0 14px;
border: 1.5px solid var(--line-strong);
border-radius: var(--r-2);
background: var(--surface);
color: var(--ink-2);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="page"], .chip[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.filter-chips legend { margin-bottom: var(--s-2); padding: 0; color: var(--muted); font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.fchip {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap); padding: 0 16px 0 12px;
border: 2px solid var(--field-border);
border-radius: var(--r-2);
background: var(--surface);
color: var(--ink);
font-size: var(--step--1);
font-weight: 700;
text-decoration: none;
cursor: pointer;
user-select: none;
transition: border-color .15s, background-color .15s, color .15s;
}
.fchip input { position: absolute; opacity: 0; pointer-events: none; }
.fchip::before {
content: ""; width: 18px; height: 18px; flex: none;
border: 2px solid var(--field-border); border-radius: 3px;
background: var(--surface);
transition: background-color .15s, border-color .15s;
}
.fchip:hover { border-color: var(--ink); }
.fchip:has(input:checked), .fchip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.fchip:has(input:checked)::before, .fchip[aria-pressed="true"]::before {
border-color: var(--line-a);
background: var(--line-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.fchip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fchip__count { color: inherit; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
.segmented {
display: inline-flex; flex-wrap: wrap; gap: 3px;
max-width: 100%;
padding: 3px;
border: 2px solid var(--ink);
border-radius: var(--r-2);
background: var(--surface);
}
.segmented__item {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; padding: 0 16px;
border-radius: var(--r-1);
color: var(--ink-2);
font-size: var(--step--1);
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background-color .15s, color .15s;
}
.segmented__item input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__item:hover { background: var(--surface-2); color: var(--ink); }
.segmented__item:has(input:checked), .segmented__item[aria-current="page"], .segmented__item[aria-current="true"], .segmented__item[aria-pressed="true"] {
background: var(--ink); color: var(--bg);
}
.segmented__item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.tabs { display: flex; gap: 4px; margin-bottom: var(--s-5); overflow-x: auto; border-bottom: 2px solid var(--line); scrollbar-width: thin; }
.tabs__link, .tabs__label {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
min-height: 48px; padding: 0 14px;
color: var(--muted);
font-family: var(--display);
font-size: 1.12rem;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.tabs__link::after, .tabs__label::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 5px;
background: var(--link-line);
transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.tabs__link:hover, .tabs__label:hover { color: var(--ink); }
.tabs__link[aria-current="page"], .tabs__link[aria-selected="true"] { color: var(--ink); }
.tabs__link[aria-current="page"]::after, .tabs__link[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__count { padding: 0 7px; border-radius: var(--r-1); background: var(--board); color: var(--board-amber); font-family: var(--display); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.tabs-css > .tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs-css .tabs__panel { display: none; }
.tabs-css > .tabs__radio:nth-of-type(1):checked ~ .tabs .tabs__label:nth-of-type(1),
.tabs-css > .tabs__radio:nth-of-type(2):checked ~ .tabs .tabs__label:nth-of-type(2),
.tabs-css > .tabs__radio:nth-of-type(3):checked ~ .tabs .tabs__label:nth-of-type(3),
.tabs-css > .tabs__radio:nth-of-type(4):checked ~ .tabs .tabs__label:nth-of-type(4) { color: var(--ink); }
.tabs-css > .tabs__radio:nth-of-type(1):checked ~ .tabs .tabs__label:nth-of-type(1)::after,
.tabs-css > .tabs__radio:nth-of-type(2):checked ~ .tabs .tabs__label:nth-of-type(2)::after,
.tabs-css > .tabs__radio:nth-of-type(3):checked ~ .tabs .tabs__label:nth-of-type(3)::after,
.tabs-css > .tabs__radio:nth-of-type(4):checked ~ .tabs .tabs__label:nth-of-type(4)::after { transform: scaleX(1); }
.tabs-css > .tabs__radio:nth-of-type(1):checked ~ .tabs__panels > .tabs__panel:nth-child(1),
.tabs-css > .tabs__radio:nth-of-type(2):checked ~ .tabs__panels > .tabs__panel:nth-child(2),
.tabs-css > .tabs__radio:nth-of-type(3):checked ~ .tabs__panels > .tabs__panel:nth-child(3),
.tabs-css > .tabs__radio:nth-of-type(4):checked ~ .tabs__panels > .tabs__panel:nth-child(4) { display: block; }
.tabs-css > .tabs__radio:focus-visible ~ .tabs { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
/* ==========================================================================
12 Panels, cards, KPI tiles, key–value
========================================================================== */
.panel { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.panel__title { margin: 0 0 var(--s-3); color: var(--ink); font-family: var(--display); font-size: var(--step-2); font-weight: 700; line-height: 1.08; }
figure.panel { margin-inline: 0; }
.panel__title a { color: var(--ink); text-decoration: none; }
.panel__title a:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.panel__sub { margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--step--1); }
.card {
position: relative;
display: flex; flex-direction: column; gap: 8px;
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-3);
background: var(--surface);
color: var(--ink);
text-decoration: none;
transition: border-color .15s, box-shadow .2s;
}
a.card:hover, .card--link:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.card--link .card__title a { color: inherit; text-decoration: none; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__kicker { color: var(--muted); }
.card__title { margin: 0; font-family: var(--display); font-size: var(--step-2); font-weight: 700; line-height: 1.05; }
.card__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--step--1); }
.card__value { margin: 4px 0 0; color: var(--ink); font-family: var(--display); font-size: var(--step-4); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.card__value small { color: var(--muted); font-family: var(--sans); font-size: var(--step--1); font-weight: 600; }
/* category cards: the line runs along the top edge and ends in a station */
.card--ms, .card--zs, .card--ss, .card--ds, .card--gym, .card--vs { padding-top: calc(var(--s-5) + 10px); }
.card--ms::before, .card--zs::before, .card--ss::before, .card--ds::before, .card--gym::before, .card--vs::before {
content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px;
border-radius: var(--r-3) var(--r-3) 0 0;
background: var(--cat-line);
}
.card--ms::after, .card--zs::after, .card--ss::after, .card--ds::after, .card--gym::after, .card--vs::after {
content: ""; position: absolute; right: 22px; top: -7px;
width: 22px; height: 22px;
border: 5px solid var(--cat-line); border-radius: 50%;
background: var(--station);
}
.card--ms { --cat-line: var(--ms-fill); }
.card--zs { --cat-line: var(--zs-fill); }
.card--ss { --cat-line: var(--ss-fill); }
.card--gym { --cat-line: var(--gym-fill); }
.card--ds { --cat-line: var(--ds-fill); }
.card--vs { --cat-line: var(--vs-fill); }
.card--zs::after { border-radius: 4px; }
.card--ss::after { border-radius: 3px; transform: rotate(45deg); }
.card--region { padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
a.card--region:hover { box-shadow: none; }
.card--region .card__title { font-size: var(--step-1); font-weight: 700; }
a.card--region:hover .card__title { text-decoration: underline; text-decoration-color: var(--link-line); }
/* KPI row: tiles like platform info signs; the key figure is a departure board */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-3); margin: 0; }
.kpis + .chips { margin-top: var(--s-4); }
.stat {
display: flex; flex-direction: column; gap: 4px;
margin: 0; padding: var(--s-4);
border: 1px solid var(--line);
border-top: 5px solid var(--ink);
border-radius: var(--r-2);
background: var(--surface);
}
.stat dd { margin: 0; }
.stat__label { order: -1; color: var(--muted); }
.stat__value {
color: var(--ink);
font-family: var(--display);
font-size: clamp(2rem, 1.5rem + 1.3vw, 2.9rem);
font-weight: 700;
line-height: 1;
}
.stat__unit { margin-left: 5px; color: var(--muted); font-family: var(--sans); font-size: var(--step--1); font-weight: 600; }
.stat__sub { color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; }
.stat__source { margin-top: auto; padding-top: 6px; color: var(--muted); font-size: var(--step--2); line-height: 1.35; }
.stat .band, .stat .nodata { align-self: flex-start; }
.stat--accent { border-color: var(--board-line); border-top: 5px solid var(--line-a); background: var(--board); }
.stat--accent .stat__label, .stat--accent .stat__unit, .stat--accent .stat__sub, .stat--accent .stat__source { color: var(--board-text); }
.stat--accent .stat__value { color: var(--board-amber); text-shadow: 0 0 16px rgb(255 184 28 / .3); }
.stat--accent .stat__source { opacity: .85; }
.stat--accent a { color: var(--brand-white); }
.stat--accent .nodata { border-color: rgb(255 255 255 / .4); color: var(--board-text); }
@media (max-width: 560px) {
.kpis { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.stat { padding: var(--s-3); }
}
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--s-5); margin: 0 0 var(--s-4); font-size: var(--step--1); }
.kv dt, .kv dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr; } .kv dt { padding-bottom: 0; border: 0; } }
.columns { margin: 0; padding: 0; list-style: none; columns: 4 200px; column-gap: var(--s-5); }
.columns li { margin: 0 0 6px; break-inside: avoid; font-size: var(--step--1); }
/* ==========================================================================
13 School list = a route. Every item is a station on a line in its stage colour; consecutive schools of different
stages read as interchanges. Station shapes: MŠ circle · ZŠ square · SŠ diamond · gymnázium filled diamond ·
DS dashed ring.
========================================================================== */
.school-list { --rail: 34px; --station-top: 22px; position: relative; display: grid; gap: 10px; margin: 0; padding: 0 0 0 var(--rail); list-style: none; }
.school-item {
--cat: var(--vs-fill);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s-3) var(--s-5);
align-items: center;
padding: var(--s-4) var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-3);
background: var(--surface);
transition: border-color .15s, box-shadow .2s;
}
/* the line segment (from the previous station down through this one) */
.school-item::after {
content: ""; position: absolute; z-index: 0;
left: calc(-1 * var(--rail) + 9px); top: -11px; bottom: -1px;
width: 7px;
background: var(--cat);
pointer-events: none;
}
.school-item:first-child::after { top: var(--station-top); }
.school-item:last-child::after { bottom: calc(100% - var(--station-top)); }
/* the station */
.school-item::before {
content: ""; position: absolute; z-index: 1;
left: calc(-1 * var(--rail) + 2px); top: calc(var(--station-top) - 10px);
width: 21px; height: 21px;
border: 5px solid var(--cat);
border-radius: 50%;
background: var(--station);
pointer-events: none;
}
.school-item:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px -20px var(--shadow); }
.school-item:has(.school-item__name a:hover) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.school-item--ms { --cat: var(--ms-fill); }
.school-item--zs { --cat: var(--zs-fill); }
.school-item--ss { --cat: var(--ss-fill); }
.school-item--gym { --cat: var(--gym-fill); }
.school-item--ds { --cat: var(--ds-fill); }
.school-item--zs::before { border-radius: 4px; }
.school-item--ss::before, .school-item--gym::before { width: 19px; height: 19px; left: calc(-1 * var(--rail) + 3px); border-radius: 3px; transform: rotate(45deg); }
.school-item--gym::before { background: var(--cat); box-shadow: inset 0 0 0 2.5px var(--station); }
.school-item--ds::before { border-style: double; border-width: 6px; }
.school-item__main { min-width: 0; }
.school-item__name { margin: 0 0 2px; font-family: var(--display); font-size: var(--step-2); font-weight: 700; line-height: 1.05; }
.school-item__name a { color: var(--ink); text-decoration: none; }
.school-item__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.school-item__name a:hover { text-decoration: underline; text-decoration-color: var(--cat); text-decoration-thickness: .1em; }
.school-item__meta { margin: 0 0 8px; color: var(--muted); font-size: var(--step--1); line-height: 1.4; }
.school-item__badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.school-item__aside { display: grid; justify-items: end; gap: 6px; text-align: right; }
.school-item__metric { display: grid; justify-items: end; margin: 0; line-height: 1; }
.school-item__metric-value { color: var(--ink); font-family: var(--display); font-size: var(--step-3); font-weight: 700; }
.school-item__metric-value small { margin-left: 2px; color: var(--muted); font-family: var(--sans); font-size: var(--step--1); font-weight: 600; }
.school-item__metric-label { margin-top: 4px; color: var(--muted); font-family: var(--display); font-size: var(--step--1); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.school-item--promo { border-color: var(--board-amber); box-shadow: inset 0 0 0 1px var(--board-amber); }
/* the school the visitor came from / is looking at: an interchange station */
.school-item.is-self { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.school-item.is-self::before { width: 25px; height: 25px; left: calc(-1 * var(--rail) + 0px); top: calc(var(--station-top) - 12px); border-color: var(--ink); border-radius: 50%; background: var(--station); box-shadow: inset 0 0 0 4px var(--station), inset 0 0 0 12px var(--cat); transform: none; }
@media (max-width: 600px) {
.school-list { --rail: 26px; --station-top: 20px; }
.school-item { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
.school-item__name { font-size: var(--step-1); }
.school-item::after { width: 6px; left: calc(-1 * var(--rail) + 7px); }
.school-item::before { width: 19px; height: 19px; left: calc(-1 * var(--rail) + 1px); border-width: 4px; }
.school-item--ds::before { border-width: 5px; }
.school-item--ss::before, .school-item--gym::before { width: 16px; height: 16px; left: calc(-1 * var(--rail) + 2px); top: calc(var(--station-top) - 8px); }
.school-item__aside { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); text-align: left; }
.school-item__metric { justify-items: start; }
}
/* ==========================================================================
14 Callouts, partner boxes ("Jak se tu žije", "Bydlení v okolí"), "málo dat"
========================================================================== */
/* Callout: an information sign with a square pictogram tile */
.callout {
--co: var(--ink); --co-bg: var(--surface-2); --co-on: var(--bg);
position: relative;
padding: var(--s-4) var(--s-5) var(--s-4) 60px;
border-left: 5px solid var(--co);
border-radius: 0 var(--r-3) var(--r-3) 0;
background: var(--co-bg);
color: var(--ink-2);
font-size: var(--step--1);
line-height: 1.55;
}
.callout::before {
content: "i";
position: absolute; left: var(--s-4); top: var(--s-4);
display: grid; place-items: center;
width: 28px; height: 28px;
border-radius: var(--r-1);
background: var(--co); color: var(--co-on);
font: 800 1.1rem/1 var(--display);
}
.callout > * { margin: 0; }
.callout > * + * { margin-top: 4px; }
.callout__title { color: var(--ink); font-family: var(--display); font-size: var(--step-1); font-weight: 700; }
.callout a { color: var(--ink); }
.callout--method { --co: var(--ds-fill); --co-bg: var(--ds-bg); --co-on: #fff; }
.callout--warn { --co: var(--d3-fill); --co-bg: var(--d3-bg); --co-on: var(--brand-black); }
.callout--warn::before { content: "!"; }
.callout--tip { --co: var(--accent); --co-bg: var(--accent-soft); --co-on: var(--on-accent); }
.callout--tip::before { content: "→"; font-family: var(--sans); font-size: 1rem; }
/* Partner / info box: outside data with an attribution and a link out. Dashed edge = "from elsewhere". */
.partner-box, .living {
display: grid; gap: var(--s-3);
padding: var(--s-5);
border: 2px dashed var(--line-strong);
border-radius: var(--r-3);
background: var(--surface);
}
.partner-box__kicker { margin: 0; color: var(--muted); }
.partner-box__title, .living .panel__title { margin: 0; font-size: var(--step-2); }
.partner-box__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.partner-box__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--s-3); margin: 0; }
.partner-box__figures > div { padding: var(--s-3); border-radius: var(--r-2); background: var(--surface-2); }
.partner-box__figures dt { color: var(--muted); font-size: var(--step--2); }
.partner-box__figures dd { margin: 2px 0 0; color: var(--ink); font-family: var(--display); font-size: var(--step-3); font-weight: 700; line-height: 1.05; }
.partner-box__figures dd small { color: var(--muted); font-family: var(--sans); font-size: var(--step--2); font-weight: 600; }
.partner-box__link {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: var(--tap); padding: 0 16px;
border: 2px solid var(--ink);
border-radius: var(--r-2);
background: transparent;
color: var(--ink);
font-weight: 700;
text-decoration: none;
transition: background-color .15s, color .15s;
}
.partner-box__link::after { content: "↗"; font-weight: 400; }
.partner-box__link:hover { background: var(--ink); color: var(--bg); }
.partner-box .source, .living .source { margin-top: 0; }
.living .kicker { margin: 0; }
.living__head { display: flex; align-items: center; gap: var(--s-4); }
.living__index { margin: 0; padding: 4px 12px; border-radius: var(--r-2); background: var(--board); color: var(--board-amber); font-family: var(--display); font-size: var(--step-5); font-weight: 700; line-height: .95; }
.living__index small { color: var(--board-text); font-family: var(--sans); font-size: .22em; font-weight: 600; }
.living__head .note { margin: 0; line-height: 1.45; }
.living__cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.living__cats p { margin: 0; color: var(--muted); font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.living__cats ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.living__cats li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.living__cats strong { color: var(--ink); font-weight: 700; }
.living .btn { justify-self: start; }
@media (max-width: 520px) { .living__cats { grid-template-columns: 1fr; } }
/* "Málo dat": below the publication thresholds – a closed station (dashed ring) */
.nodata {
display: inline-flex; align-items: center; gap: 6px;
min-height: 24px; padding: 1px 9px;
border: 1px dashed var(--line-strong);
border-radius: var(--r-2);
color: var(--muted);
font-size: var(--step--2);
font-weight: 700;
white-space: nowrap;
cursor: help;
}
.nodata::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px dashed currentColor; }
.stat__value .nodata { font-family: var(--sans); font-size: var(--step--1); vertical-align: middle; }
.nodata-box {
display: grid; place-content: center; justify-items: center; gap: 4px;
min-height: 160px; padding: var(--s-5);
border: 2px dashed var(--line-strong);
border-radius: var(--r-3);
background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--line) 9px 11px);
color: var(--muted);
font-size: var(--step--1);
text-align: center;
}
.nodata-box > * { max-width: 46ch; margin: 0; padding: 0 6px; background: var(--bg); }
.nodata-box__title { color: var(--ink); font-family: var(--display); font-size: var(--step-2); font-weight: 700; }
/* ==========================================================================
15 Tables: the head row is a departure board
========================================================================== */
.table-wrap {
position: relative;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--line);
border-radius: var(--r-3);
background: var(--surface);
}
.table-wrap:focus-visible { outline: 3px solid var(--focus); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step--1); }
.data-table caption { padding: var(--s-3) var(--s-4); color: var(--muted); font-size: var(--step--1); text-align: left; caption-side: bottom; }
.data-table th, .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th {
position: sticky; top: 0; z-index: 2;
padding-block: 11px;
border-bottom: 0;
background: var(--board);
color: var(--board-text);
font-size: .86rem;
white-space: nowrap;
}
.data-table .num { text-align: right; white-space: nowrap; }
.data-table td.num { color: var(--ink); font-family: var(--display); font-size: 1.12rem; font-weight: 700; }
.data-table tbody tr { transition: background-color .1s; }
.data-table tbody tr:hover > * { background: var(--accent-soft); }
.data-table tr.is-self > * { background: var(--accent-soft); font-weight: 700; }
.data-table tr.is-self > :first-child { box-shadow: inset 6px 0 0 var(--line-a); }
.data-table a { color: var(--ink); font-weight: 700; text-decoration: none; }
.data-table a:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.data-table__sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--2); font-weight: 400; }
.data-table .band, .data-table .badge, .data-table .nodata { vertical-align: middle; }
.sort { display: inline-flex; align-items: center; gap: 4px; color: inherit !important; font-weight: 700 !important; text-decoration: none; cursor: pointer; }
.sort::after { content: "↕"; opacity: .5; font-size: .95em; letter-spacing: 0; }
th[aria-sort="ascending"] .sort::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .sort::after { content: "↓"; opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--board-amber) !important; }
.sort:hover { color: var(--brand-white) !important; }
.data-table--sticky th:first-child, .data-table--sticky td:first-child {
position: sticky; left: 0; z-index: 1;
min-width: 150px; max-width: 46vw;
background: var(--surface);
box-shadow: 1px 0 0 var(--line);
}
.data-table--sticky thead th:first-child { z-index: 3; background: var(--board); box-shadow: none; }
.data-table--sticky tbody tr:hover > :first-child,
.data-table--sticky tr.is-self > :first-child { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.data-table--sticky tr.is-self > :first-child { box-shadow: inset 6px 0 0 var(--line-a), 1px 0 0 var(--line); }
.data-table--compact th, .data-table--compact td { padding: 7px 10px; }
.rank-pos { color: var(--muted); font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
/* top 3 = line bullets */
.rank-pos--top { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 1rem; }
tr:nth-child(1) .rank-pos--top { background: var(--line-a); color: #fff; }
tr:nth-child(2) .rank-pos--top { background: var(--line-b); color: var(--brand-black); }
tr:nth-child(3) .rank-pos--top { background: var(--line-c); color: #fff; }
.rank-mini { margin: var(--s-2) 0 var(--s-4); padding: 0; list-style: none; counter-reset: rank; font-size: var(--step--1); }
.rank-mini li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); counter-increment: rank; }
.rank-mini li::before { content: counter(rank); min-width: 18px; color: var(--muted); font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
.rank-mini a { color: var(--ink); text-decoration: none; }
.rank-mini a:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.rank-mini strong { margin-left: auto; color: var(--ink); font-family: var(--display); font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
/* ==========================================================================
16 Meters and bars: the score scale is a line with stations every 10 points
========================================================================== */
.meter { --min: 0; --median: 0; --from: var(--min); --to: var(--median); --you: -100; --max: 100; padding: 32px 26px 0; overflow-x: clip; }
.meter__track {
position: relative;
height: 10px;
background:
repeating-linear-gradient(90deg, var(--line-strong) 0 2px, transparent 2px 10%) 0 0 / 100% 100%,
var(--surface-2);
}
.meter__range {
position: absolute; top: -2px; bottom: -2px;
left: calc(var(--from) / var(--max) * 100%);
width: calc((var(--to) - var(--from)) / var(--max) * 100%);
background: var(--meter-range, var(--ds-fill));
}
.meter__tick {
position: absolute; top: -9px; bottom: -9px;
left: calc(var(--min) / var(--max) * 100%);
width: 4px; margin-left: -2px;
background: var(--ink);
}
.meter__tick-label, .meter__you-label {
position: absolute; bottom: calc(100% + 4px); left: 50%;
padding: 1px 7px;
border-radius: var(--r-1);
font-family: var(--display);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: .03em;
white-space: nowrap;
transform: translateX(-50%);
}
.meter__tick-label { color: var(--ink); }
.meter__you {
position: absolute; top: 50%;
left: calc(var(--you) / var(--max) * 100%);
width: 24px; height: 24px; margin: -12px 0 0 -12px;
border: 5px solid var(--ink);
border-radius: 50%;
background: var(--station);
}
.meter__you-label { bottom: auto; top: calc(100% + 6px); background: var(--board); color: var(--board-amber); text-transform: uppercase; }
.meter__scale { display: flex; justify-content: space-between; margin-top: 32px; color: var(--muted); font-size: var(--step--2); }
.meter--band-1 { --meter-range: var(--d1-fill); }
.meter--band-2 { --meter-range: var(--d2-fill); }
.meter--band-3 { --meter-range: var(--d3-fill); }
.meter--band-4 { --meter-range: var(--d4-fill); }
.meter__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: var(--s-2) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--step--2); }
.meter__legend li { display: inline-flex; align-items: center; gap: 6px; }
.meter__legend i { width: 16px; height: 8px; background: var(--meter-range, var(--ds-fill)); }
.meter__legend i.is-tick { width: 4px; height: 14px; background: var(--ink); }
.meter__legend i.is-you { width: 14px; height: 14px; border: 3.5px solid var(--ink); border-radius: 50%; background: var(--station); }
.bar { --v: 0; position: relative; height: 8px; overflow: hidden; border-radius: 0; background: var(--surface-2); }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(min(var(--v), 100) * 1%); background: var(--ink); }
.bar--over .bar__fill { background: var(--d3-fill); }
.bar--accent .bar__fill { background: var(--line-a); }
.bar-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: var(--s-3); padding: 6px 0; font-size: var(--step--1); }
.bar-row__value { color: var(--ink); font-family: var(--display); font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* ==========================================================================
17 Forms, filters, "Kam se dostanu" form, chance groups
========================================================================== */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field label, .field__label { color: var(--ink); font-size: var(--step--1); font-weight: 700; }
.field__hint { margin: 0; color: var(--muted); font-size: var(--step--2); line-height: 1.4; }
.field__error { margin: 0; color: var(--d4-ink); font-size: var(--step--2); font-weight: 700; }
.input, .select {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 2px solid var(--field-border);
border-radius: var(--r-2);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--step-0);
font-weight: 500;
transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--muted); font-weight: 400; }
.select {
padding-right: 40px;
appearance: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23808389' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat,
var(--surface);
cursor: pointer;
}
.select option { background: var(--surface); color: var(--ink); }
.input:hover, .select:hover { border-color: var(--ink-2); }
.input:focus, .select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--link-line); }
.input[aria-invalid="true"] { border-color: var(--d4-fill); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-right: 64px; }
.input-group__suffix { position: absolute; right: 14px; color: var(--muted); font-size: var(--step--1); font-weight: 700; pointer-events: none; }
.input--score { min-height: 64px; font-family: var(--display); font-size: var(--step-3); font-weight: 700; }
.input--score::-webkit-outer-spin-button, .input--score::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.input--score[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; font-size: var(--step--1); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-5); padding: var(--s-4); border-top: 5px solid var(--ink); border-radius: var(--r-2); background: var(--surface-2); }
.filters .field { min-width: min(100%, 190px); flex: 1 1 190px; }
.filters label { color: var(--muted); }
/* "Kam se dostanu": the journey planner. Black sign head strip, white form below. */
.reach-form {
position: relative;
padding: clamp(18px, 3vw, 32px);
padding-top: calc(clamp(18px, 3vw, 32px) + 8px);
border: 3px solid var(--ink);
border-radius: var(--r-3);
background: var(--surface);
}
.reach-form::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 9px; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--line-stripe); }
.reach-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.reach-form__title { margin: 0; font-size: var(--step-3); }
.reach-form__grid { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.4fr) minmax(150px, .8fr) auto; gap: var(--s-4); align-items: end; }
.reach-form .input, .reach-form .select, .reach-form .search__field { min-height: 64px; font-size: var(--step-1); }
.reach-form .search__field { border-radius: var(--r-2); }
.reach-form .search__input { height: 58px; font-size: var(--step-1); }
.reach-form__submit { min-height: 64px; padding-inline: 28px; font-size: var(--step-1); }
.reach-form__note { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--step--2); }
@media (max-width: 960px) {
.reach-form__grid { grid-template-columns: 1fr 1fr; }
.reach-form__grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
.reach-form__submit { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .reach-form__grid { grid-template-columns: 1fr; } }
/* Result group = a line of its own colour: header sign + the list stations in the chance colour */
.chance { --c: var(--oth-fill); --c-ink: var(--oth-ink); --c-bg: var(--oth-bg); margin-top: var(--s-6); }
.chance--safe { --c: var(--d1-fill); --c-ink: var(--d1-ink); --c-bg: var(--d1-bg); }
.chance--real { --c: var(--d2-fill); --c-ink: var(--d2-ink); --c-bg: var(--d2-bg); }
.chance--risky { --c: var(--d3-fill); --c-ink: var(--d3-ink); --c-bg: var(--d3-bg); }
.chance--unlikely { --c: var(--oth-fill); }
.chance__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 4px var(--s-3);
margin-bottom: var(--s-3);
padding: var(--s-3) var(--s-4);
border-left: 8px solid var(--c);
border-radius: 0 var(--r-3) var(--r-3) 0;
background: var(--c-bg);
}
.chance__head::before {
content: ""; grid-row: 1 / span 2;
width: 30px; height: 30px; border-radius: 50%;
border: 6px solid var(--c);
background: var(--station);
}
.chance--unlikely .chance__head::before { border-style: dashed; border-width: 4px; }
.chance__title { margin: 0; color: var(--c-ink); font-size: var(--step-2); }
.chance__count { padding: 2px 10px; border-radius: var(--r-1); background: var(--board); color: var(--board-amber); font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.chance__desc { grid-column: 2 / -1; margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; }
.chance .school-item { --cat: var(--c); }
.chance--unlikely .school-list { opacity: .85; }
/* ==========================================================================
18 Timeline (Termíny) = the route to admission: one thick line, a station per date, the current step an
interchange with a pulse, key deadlines red stations, past stations hollow grey.
========================================================================== */
.timeline { --tl-x: 168px; --tl-line: var(--ink); position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: calc(var(--tl-x) - 4px); width: 8px; background: var(--tl-line); }
.timeline__month {
position: relative;
margin: var(--s-5) 0 var(--s-2);
padding-left: calc(var(--tl-x) + 30px);
color: var(--muted);
font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.timeline__month:first-child { margin-top: 0; }
.timeline__item { position: relative; display: grid; grid-template-columns: var(--tl-x) minmax(0, 1fr); gap: 0 30px; padding: 10px 0; }
.timeline__item::before {
content: "";
position: absolute; z-index: 1; left: calc(var(--tl-x) - 12px); top: 20px;
width: 24px; height: 24px;
border: 5px solid var(--ink);
border-radius: 50%;
background: var(--station);
}
.timeline__date { padding-top: 10px; padding-right: 28px; color: var(--ink); font-family: var(--display); font-size: var(--step-0); font-weight: 700; letter-spacing: .02em; text-align: right; }
.timeline__body { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.timeline__title { margin: 0 0 4px; font-family: var(--display); font-size: var(--step-1); font-weight: 700; }
.timeline__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.timeline__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.timeline__item--past { opacity: .62; }
.timeline__item--past::before { border-color: var(--muted); background: var(--surface-2); }
.timeline__item--key .timeline__body { border-color: var(--ink); }
.timeline__item--key::before { border-color: var(--line-c); background: var(--station); box-shadow: inset 0 0 0 4px var(--station), inset 0 0 0 9px var(--line-c); }
.timeline__item--now .timeline__body { border: 2px solid var(--ink); box-shadow: inset 6px 0 0 var(--line-a); background: var(--surface); }
.timeline__item--now::before { width: 30px; height: 40px; left: calc(var(--tl-x) - 15px); top: 14px; border-radius: 15px; border-color: var(--ink); background: var(--station); animation: blip 2.4s var(--ease) infinite; }
.timeline__now { display: inline-flex; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-1); background: var(--board); color: var(--board-amber); font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: 3px; }
@keyframes blip {
0% { box-shadow: 0 0 0 0 rgb(0 165 98 / .6); }
70% { box-shadow: 0 0 0 14px rgb(0 165 98 / 0); }
100% { box-shadow: 0 0 0 14px rgb(0 165 98 / 0); }
}
@media (max-width: 640px) {
.timeline { --tl-x: 0px; padding-left: 34px; }
.timeline::before { left: 9px; width: 7px; }
.timeline__month { padding-left: 0; }
.timeline__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.timeline__item::before { left: -35px; top: 12px; width: 22px; height: 22px; }
.timeline__item--now::before { left: -38px; top: 8px; width: 28px; height: 36px; }
.timeline__date { padding: 0; text-align: left; }
}
/* ==========================================================================
19 Charts (templates/chart/_line.html.twig)
========================================================================== */
.chart { margin: 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.chart__title { margin: 0 0 var(--s-3); color: var(--ink); font-family: var(--display); font-size: var(--step-2); font-weight: 700; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: var(--viz-grid); stroke-width: 1; }
.chart__axis { stroke: var(--viz-axis); stroke-width: 1; }
.chart__label { fill: var(--viz-label); font: 600 12px var(--sans); }
.chart__line { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: var(--station); stroke-width: 3; }
.chart__dot.slot-1 { stroke: var(--viz-1); } .chart__dot.slot-2 { stroke: var(--viz-2); } .chart__dot.slot-3 { stroke: var(--viz-3); } .chart__dot.slot-4 { stroke: var(--viz-4); } .chart__dot.slot-5 { stroke: var(--viz-5); }
.chart__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--step--1); }
.chart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart__swatch { width: 22px; height: 5px; }
.chart details { margin-top: var(--s-3); font-size: var(--step--1); }
.chart summary { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 700; cursor: pointer; }
.chart .table-wrap { border-radius: var(--r-2); }
.slot-1 { stroke: var(--viz-1); background: var(--viz-1); fill: var(--viz-1); }
.slot-2 { stroke: var(--viz-2); background: var(--viz-2); fill: var(--viz-2); }
.slot-3 { stroke: var(--viz-3); background: var(--viz-3); fill: var(--viz-3); }
.slot-4 { stroke: var(--viz-4); background: var(--viz-4); fill: var(--viz-4); }
.slot-5 { stroke: var(--viz-5); background: var(--viz-5); fill: var(--viz-5); }
/* ==========================================================================
20 Maps: choropleth sequential pale mint → deep line-A green (light), dark → bright green (dark).
School maps: stations in line colours, the municipality = interchange (white disc, black ring).
========================================================================== */
:root {
--map-1: light-dark(#eaf3ec, #16211b);
--map-2: light-dark(#c4e3cf, #1d3a2a);
--map-3: light-dark(#8ec9a5, #2a5c41);
--map-4: light-dark(#4ea676, #3c8a5f);
--map-5: light-dark(#1d7a4b, #64bf8c);
--map-6: light-dark(#0a4a2c, #b0eec8);
--map-nodata: light-dark(#e6e6e2, #1b1c1f);
--map-land: light-dark(#ecece8, #1c1d21);
}
.map { margin: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.map__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-3); }
.map__title { margin: 0; color: var(--ink); font-family: var(--display); font-size: var(--step-2); font-weight: 700; }
.map__svg { display: block; width: 100%; height: auto; max-height: min(76vh, 720px); }
.map__area { fill-rule: evenodd; stroke: var(--surface); stroke-width: .6; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill-opacity .12s; }
.map__svg a { cursor: pointer; }
.map__svg a:hover .map__area { fill-opacity: .7; }
.map__svg a:focus-visible { outline: none; }
.map__svg a:focus-visible .map__area, .map__svg a:focus-visible .map__point { stroke: var(--focus); stroke-width: 3; }
.map__border { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map__outline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map__point { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.map__svg a:hover .map__point { transform: scale(1.35); }
.map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--step--1); }
.map__legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map__legend .map__unit { color: var(--muted); }
.map__swatch { display: inline-block; width: 22px; height: 12px; border-radius: 0; }
.map__note { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step--1); }
.map-q1 { fill: var(--map-1); background: var(--map-1); }
.map-q2 { fill: var(--map-2); background: var(--map-2); }
.map-q3 { fill: var(--map-3); background: var(--map-3); }
.map-q4 { fill: var(--map-4); background: var(--map-4); }
.map-q5 { fill: var(--map-5); background: var(--map-5); }
.map-q6 { fill: var(--map-6); background: var(--map-6); }
.map-nodata { fill: var(--map-nodata); background: var(--map-nodata); }
.map__switch .chip { min-height: 32px; }
.map--schools .map__area, .map__area--land { fill: var(--map-land); stroke: var(--line-strong); }
.map__point--ms { fill: var(--ms-fill); }
.map__point--zs { fill: var(--zs-fill); }
.map__point--ss { fill: var(--ss-fill); stroke: var(--brand-black); stroke-width: 1; }
.map__point--gym { fill: var(--gym-fill); stroke: var(--station); stroke-width: 2; }
.map__point--ds { fill: var(--surface); stroke: var(--ds-fill); stroke-width: 2.5; }
.map__point--other { fill: var(--oth-fill); }
.map__point--auction { fill: var(--board-amber); stroke: var(--brand-black); stroke-width: 1.5; }
.map__point.is-dim { opacity: .35; }
.map__home { fill: var(--brand-white); stroke: var(--brand-black); stroke-width: 4; vector-effect: non-scaling-stroke; }
.map__ring { fill: none; stroke: var(--ink); stroke-opacity: .32; stroke-width: 1.2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.map__ring-label { fill: var(--ink-2); font: 700 12px var(--display); letter-spacing: .04em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.map__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--step--1); }
.map__key li { display: inline-flex; align-items: center; gap: 7px; }
.map__key span { width: 12px; height: 12px; border-radius: 50%; background: var(--oth-fill); }
.map__key .map__key--ms { background: var(--ms-fill); }
.map__key .map__key--zs { border-radius: 2px; background: var(--zs-fill); }
.map__key .map__key--ss { width: 10px; height: 10px; margin: 1px; border-radius: 1px; background: var(--ss-fill); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--brand-black); }
.map__key .map__key--gym { width: 10px; height: 10px; margin: 1px; border-radius: 1px; background: var(--gym-fill); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--station), 0 0 0 3px var(--gym-fill); }
.map__key .map__key--ds { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ds-fill); }
.map__key .map__key--home { width: 15px; height: 15px; background: var(--brand-white); box-shadow: inset 0 0 0 3.5px var(--brand-black); }
/* ==========================================================================
21 FAQ, pagination, empty states, breadcrumbs (route)
========================================================================== */
.faq { max-width: var(--measure); }
.faq__title { margin: 0 0 var(--s-4); font-size: var(--step-3); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-of-type { border-top: 3px solid var(--ink); }
.faq__item summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
min-height: 58px; padding: var(--s-3) 0;
color: var(--ink);
font-family: var(--display);
font-size: var(--step-1);
font-weight: 700;
list-style: none;
cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+";
display: grid; place-items: center; flex: none;
width: 30px; height: 30px;
border: 3px solid var(--ink);
border-radius: 50%;
background: var(--station);
color: var(--brand-black);
font: 700 1.1rem/1 var(--sans);
transition: background-color .15s, color .15s;
}
.faq__item summary:hover::after { background: var(--line-a); border-color: var(--line-a); color: #fff; }
.faq__item[open] summary::after { content: "−"; background: var(--ink); color: var(--bg); }
.faq__item > :not(summary) { margin: 0 0 var(--s-4); color: var(--ink-2); line-height: 1.6; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.pager__link {
display: inline-grid; place-items: center;
min-width: var(--tap); min-height: var(--tap); padding: 0 12px;
border: 2px solid var(--line-strong);
border-radius: var(--r-2);
background: var(--surface);
color: var(--ink);
font-family: var(--display);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: border-color .15s, background-color .15s;
}
a.pager__link:hover { border-color: var(--ink); }
.pager__link[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.pager__link[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pager__gap { padding: 0 4px; color: var(--muted); }
/* Empty state: the end of the line (a terminus with nothing after it) */
.empty {
display: grid; justify-items: center; align-content: center; gap: var(--s-2);
padding: var(--s-7) var(--s-5);
border: 2px dashed var(--line-strong);
border-radius: var(--r-3);
background: var(--surface);
color: var(--muted);
text-align: center;
}
.empty::before {
content: "";
width: 132px; height: 32px; margin-bottom: var(--s-3);
background:
radial-gradient(circle at 116px 16px, var(--station) 0 6px, var(--ink) 6.5px 13px, transparent 13.5px),
linear-gradient(90deg, var(--line-a) 0 0) 0 50% / 110px 8px no-repeat,
linear-gradient(var(--ink) 0 0) 128px 50% / 4px 30px no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.empty > * { max-width: 52ch; margin: 0; }
.empty__title { color: var(--ink); font-family: var(--display); font-size: var(--step-3); font-weight: 700; }
.empty .btn { margin-top: var(--s-3); }
/* Breadcrumbs = the route travelled so far: stations joined by a line, the current one filled */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 var(--s-4); padding: 0; list-style: none; color: var(--muted); font-size: var(--step--1); font-weight: 500; }
.crumbs li { display: inline-flex; align-items: center; gap: 7px; margin-right: 7px; }
.crumbs li::before {
content: ""; flex: none; width: 26px; height: 14px;
background:
radial-gradient(circle at 19px 7px, var(--bg) 0 2.2px, var(--muted) 2.8px 5.5px, transparent 6px),
linear-gradient(var(--line-strong) 0 0) 0 50% / 14px 3px no-repeat;
}
.crumbs li:first-child::before { width: 12px; background: radial-gradient(circle at 6px 7px, var(--muted) 0 5.5px, transparent 6px); }
.crumbs li:has([aria-current="page"])::before { background: radial-gradient(circle at 19px 7px, var(--ink) 0 6.2px, transparent 6.7px), linear-gradient(var(--ink) 0 0) 0 50% / 14px 3px no-repeat; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }
/* ==========================================================================
22 Footer, cookie consent, facts carousel, print, reduced motion
========================================================================== */
.site-footer {
position: relative;
overflow: hidden;
margin-top: var(--section);
padding: calc(var(--s-8) + 6px) 0 var(--s-5);
background: var(--chrome);
color: var(--on-chrome-muted);
font-size: var(--step--1);
}
.site-footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--line-stripe); }
.site-footer::before {
content: "";
position: absolute; right: -120px; bottom: -80px;
width: 640px; aspect-ratio: 640 / 440;
background: var(--diagram) center / contain no-repeat;
opacity: .16;
pointer-events: none;
}
.site-footer > .wrap { position: relative; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.site-footer .brand { margin-bottom: var(--s-4); }
.site-footer__title { margin: 0 0 var(--s-3); padding-bottom: 8px; border-bottom: 3px solid var(--on-chrome); color: var(--on-chrome); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 34px; }
.site-footer a { color: var(--on-chrome); text-decoration: none; }
.site-footer a:hover { color: var(--on-chrome); text-decoration: underline; text-decoration-color: var(--line-a); text-decoration-thickness: 3px; }
.site-footer__about p { max-width: 40ch; }
.site-footer__bottom {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5);
margin-top: var(--s-7); padding-top: var(--s-4);
border-top: 1px solid var(--chrome-line);
font-size: var(--step--2);
}
@media (max-width: 960px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; }
.site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.consent {
position: fixed; inset: auto 12px 12px; z-index: 100;
max-width: 980px; margin-inline: auto;
border: 2px solid var(--ink);
border-radius: var(--r-3);
background: var(--surface);
box-shadow: 0 20px 50px -16px var(--shadow);
}
.consent[hidden] { display: none; }
.consent__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: 18px 20px; }
.consent__inner > div:first-child { flex: 1 1 420px; }
.consent__title { margin: 0 0 4px; color: var(--ink); font-family: var(--display); font-size: var(--step-1); font-weight: 700; }
.consent__text { margin: 0; max-width: 80ch; color: var(--ink-2); font-size: var(--step--1); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__actions .btn { min-height: var(--tap); padding: 0 22px; }
.consent__actions .btn + .btn { background: var(--ink); color: var(--bg); }
@media (max-width: 560px) {
.consent__actions { width: 100%; }
.consent__actions .btn { flex: 1 1 0; padding: 0 12px; }
}
/* Facts carousel: big board figures; progress = a line filling station by station */
.facts__track { display: grid; grid-auto-columns: 100%; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.facts__track::-webkit-scrollbar { display: none; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-6); align-content: start; padding: var(--s-5) 0; scroll-snap-align: start; }
.fact__kicker { margin: 0; color: var(--muted); font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.fact__value { margin: 0; color: var(--ink); font-family: var(--display); font-size: var(--step-5); font-weight: 800; line-height: .92; white-space: nowrap; }
.fact__body { max-width: 56ch; }
.fact__text { margin: 0; color: var(--ink); font-size: var(--step-1); line-height: 1.35; }
.fact__source { margin: var(--s-2) 0 var(--s-3); color: var(--muted); font-size: var(--step--1); }
@media (min-width: 860px) { .fact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .fact__kicker { grid-column: 1 / -1; } .fact__body { align-self: end; } }
.facts__controls { display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.facts__controls[hidden] { display: none; }
.facts__dots { display: flex; flex: 1; gap: 4px; min-width: 0; }
.facts__dot { flex: 1; max-width: 72px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.facts__dot span { position: relative; display: block; height: 6px; overflow: hidden; background: var(--line-strong); }
.facts__dot span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.facts__dot.is-done span::after { transform: scaleX(1); }
.facts__dot[aria-current="true"] span::after { transform: scaleX(1); background: var(--line-a); }
.facts.is-playing .facts__dot[aria-current="true"] span::after { animation: fact-progress var(--fact-delay, 7s) linear forwards; }
.facts.is-paused .facts__dot[aria-current="true"] span::after { animation-play-state: paused; }
.facts__btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 2px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font: 700 var(--step-0) / 1 var(--sans); cursor: pointer; }
.facts__btn:hover { border-color: var(--ink); }
.facts__btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
@keyframes fact-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Style guide page only (templates/styleguide.html.twig) */
.sg-section { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.sg-section > h2 { font-size: var(--step-3); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.sg-swatch { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); font-size: var(--step--2); }
.sg-swatch span { display: block; height: 56px; }
.sg-swatch code, .sg-swatch b { display: block; padding: 2px 10px; }
.sg-swatch b { padding-top: 8px; color: var(--ink); }
.sg-swatch code { padding-bottom: 8px; color: var(--muted); }
.sg-type > * { margin: 0 0 var(--s-3); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.brand:hover .brand__route { animation: none; }
.timeline__item--now::before { animation: none; }
.facts.is-playing .facts__dot[aria-current="true"] span::after { animation: none; }
}
@media (forced-colors: active) {
.band::before, .chance-tag::before, .badge::before, .badge::after, .school-item::before, .school-item::after, .kicker::before { forced-color-adjust: none; }
.btn, .chip, .fchip, .segmented__item, .pager__link, .minutes { border: 1px solid ButtonText; }
}
@media print {
.site-header, .site-footer, .menu, .search, .theme-toggle, .demo-notice, .consent, .hero::before, .page-hero::before, .page-head::before { display: none !important; }
body { background: #fff; color: #000; }
.hero { background: none; color: #000; }
.hero h1 { color: #000; }
.hero__figure, .stat--accent, .minutes, .data-table thead th { background: #fff !important; color: #000 !important; border: 1px solid #000; }
.hero__figure-value, .stat--accent .stat__value, .minutes b { color: #000 !important; text-shadow: none; }
.card, .stat, .school-item, .table-wrap, .chart, .map { break-inside: avoid; box-shadow: none; }
}
/* --- transit (added) --- */
/* Travel-time boards next to the car one (.minutes): public transport arriving by 7:55 (the main one – amber LED
digits, bus/tram pictogram) and walking from the centre of the locality (green digits, walker pictogram). */
.minutes--pt { border-color: var(--board-line); background: var(--board); color: var(--board-text); }
.minutes--pt::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='14' rx='3'/%3E%3Cpath d='M5 11h14'/%3E%3Ccircle cx='8.5' cy='14' r='.6'/%3E%3Ccircle cx='15.5' cy='14' r='.6'/%3E%3Cpath d='M8 17l-1.5 3M16 17l1.5 3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='14' rx='3'/%3E%3Cpath d='M5 11h14'/%3E%3Ccircle cx='8.5' cy='14' r='.6'/%3E%3Ccircle cx='15.5' cy='14' r='.6'/%3E%3Cpath d='M8 17l-1.5 3M16 17l1.5 3'/%3E%3C/svg%3E");
background: var(--board-amber);
}
.minutes--walk::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4' r='1.6'/%3E%3Cpath d='M9 21l2.5-6 2.5 2.5V21'/%3E%3Cpath d='M7 12.5l2-4 3.5-1 2 3.5 2.5 1'/%3E%3Cpath d='M11.5 15l1-6.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4' r='1.6'/%3E%3Cpath d='M9 21l2.5-6 2.5 2.5V21'/%3E%3Cpath d='M7 12.5l2-4 3.5-1 2 3.5 2.5 1'/%3E%3Cpath d='M11.5 15l1-6.5'/%3E%3C/svg%3E");
}
.minutes--pt b { color: var(--board-amber); text-shadow: 0 0 10px rgb(255 184 28 / .35); }
.minutes--walk b { color: var(--board-green); }
@media (forced-colors: active) {
.minutes--pt::before, .minutes--walk::before { forced-color-adjust: none; background: CanvasText; }
}
/* --- compare (added) --- */
/* Saved schools and the comparison /porovnani (templates/compare/index.html.twig, public/js/compare.js). The save
toggles and the header link are hidden without JS ([hidden]); the comparison table is a .data-table--sticky with
group rows and the best value of a row marked .is-best. */
.save-btn {
position: relative; z-index: 2;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 40px; padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink);
font: 700 var(--step--1) / 1.2 var(--sans);
white-space: nowrap;
cursor: pointer;
transition: border-color .15s, background-color .15s, color .15s;
}
.save-btn:hover { border-color: var(--ink); }
.save-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.save-btn.is-saved { border-color: transparent; background: var(--brand-yellow); color: var(--brand-navy); }
.save-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.save-btn[hidden] { display: none; }
.save-btn--sm { min-height: 30px; margin-top: 8px; padding: 0 10px; font-size: var(--step--2); }
.save-btn--icon { order: 9; width: 30px; min-height: 30px; padding: 0; font-size: 1.1rem; line-height: 1; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; font-size: var(--step--1); }
.compare-actions__link { font-weight: 700; }
.saved-link { position: relative; }
.saved-link[hidden] { display: none; }
.saved-link__count {
position: absolute; top: 3px; right: 1px;
display: inline-grid; place-items: center;
min-width: 18px; height: 18px; padding: 0 4px;
border-radius: var(--r-pill);
background: var(--brand-yellow);
color: var(--brand-navy);
font: 800 11px / 1 var(--sans);
}
.compare-picked { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.compare-picked__item {
display: inline-flex; align-items: center; gap: 4px;
min-height: 36px; padding: 0 4px 0 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
font-size: var(--step--1);
font-weight: 600;
}
.compare-picked__item > a:first-child { color: var(--ink); text-decoration: none; }
.compare-picked__item > a:first-child:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.compare-picked__remove {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
border-radius: 50%;
color: var(--muted);
font-size: 1.1rem; line-height: 1;
text-decoration: none;
}
.compare-picked__remove:hover { background: var(--surface-2); color: var(--ink); }
.compare-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-3) var(--s-4); margin: var(--s-5) 0; }
.compare-forms .compare-form { margin: 0; }
.compare-form__reset { align-self: center; font-size: var(--step--1); }
.compare-wrap { margin-bottom: var(--s-3); }
.compare-table { table-layout: fixed; min-width: calc(190px + var(--compare-cols, 4) * 170px); }
.compare-table:has(thead th:nth-child(3):last-child) { --compare-cols: 2; }
.compare-table:has(thead th:nth-child(4):last-child) { --compare-cols: 3; }
.compare-table thead th { font-size: var(--step--1); letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: top; }
.compare-table thead th:first-child { width: 190px; }
.compare-table__school a { display: block; color: inherit; line-height: 1.25; }
.compare-table__school .data-table__sub { color: inherit; opacity: .75; }
.compare-table tbody th[scope="row"] { color: var(--ink-2); font-weight: 600; vertical-align: top; }
.compare-table td { vertical-align: top; overflow-wrap: anywhere; }
.compare-table__value { color: var(--ink); font-weight: 700; }
.compare-table__none { color: var(--muted); }
.compare-table .compare-table__group > th {
position: static;
padding-top: var(--s-4);
background: var(--surface-2);
box-shadow: none;
color: var(--ink);
font-family: var(--display);
font-size: var(--step-0);
font-weight: 700;
}
.compare-table__group-title { position: sticky; left: 14px; display: inline-block; max-width: min(100%, 80vw); }
.compare-table td.is-best { background: var(--d1-bg); }
.compare-table td.is-best .compare-table__value { color: var(--d1-ink); }
.compare-table td.is-best .compare-table__value::after { content: "\2009\2713"; }
@media (max-width: 600px) {
.compare-table { min-width: calc(120px + var(--compare-cols, 4) * 150px); }
.compare-table thead th:first-child { width: 120px; }
.data-table--sticky.compare-table th:first-child, .data-table--sticky.compare-table td:first-child { min-width: 0; }
}
.compare-steps { display: grid; gap: var(--s-3); max-width: var(--measure); margin: 0 0 var(--s-4); padding-left: 1.4em; }
.compare-saved { max-width: var(--measure); font-weight: 700; }
.compare-saved[hidden] { display: none; }
/* --- osm map (added) --- */
/* Interactive school maps on OpenStreetMap tiles (templates/map/_points.html.twig, public/js/schoolmap.js). The tiles
are toned down so the coloured school markers stand out; in dark mode they are inverted. */
.map--osm .map__osm { height: clamp(320px, 52vh, 520px); border-radius: 10px; overflow: hidden; z-index: 0; background: #e8e6df; }
.map--osm .leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.04); }
.map--osm .leaflet-container { font: inherit; }
.map--osm .leaflet-popup-content { margin: 10px 14px; font-size: .95rem; line-height: 1.4; }
.map--osm .leaflet-popup-content a { font-weight: 700; }
.map--osm .map__home-label { font-weight: 700; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .map--osm .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.9) contrast(.9); }
}
:root[data-theme="dark"] .map--osm .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.9) contrast(.9); }
/* --- route links (added) --- */
/* Travel-time badges that open the route on a map (templates/_travel.html.twig): car badge icon, link affordance. */
a.minutes--link { text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
a.minutes--link:hover, a.minutes--link:focus-visible { box-shadow: 0 0 0 2px currentColor; }
a.minutes--link::after { content: "↗"; font-size: .8em; margin-left: .25em; opacity: .7; }
.minutes--car::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V11l2-5h10l2 5v5'/%3E%3Cpath d='M3 16h18v3H3z'/%3E%3Ccircle cx='7.5' cy='16' r='1.2'/%3E%3Ccircle cx='16.5' cy='16' r='1.2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V11l2-5h10l2 5v5'/%3E%3Cpath d='M3 16h18v3H3z'/%3E%3Ccircle cx='7.5' cy='16' r='1.2'/%3E%3Ccircle cx='16.5' cy='16' r='1.2'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { a.minutes--link { transition: none; } }
.map--osm .leaflet-popup-content .map__routes { display: block; margin-top: .35em; font-size: .85rem; }
.map--osm .leaflet-popup-content .map__routes a { font-weight: 400; margin-right: .5em; }
/* --- travel-time limit (added) --- */
/* Free travel-time limit 5–120 minutes on listings (templates/_minutes_field.html.twig): a number input that works
without JavaScript, public/js/app.js shows the range slider next to it; "Zobrazit další" under long lists
(templates/_list_more.html.twig). */
.minutes-field { min-width: 0; }
.filters .minutes-field { flex: 2 1 300px; }
.minutes-field__controls { display: flex; align-items: center; gap: var(--s-3); }
.minutes-field__range { flex: 1 1 auto; width: 100%; min-width: 0; height: 40px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.minutes-field__range[hidden] { display: none; }
.minutes-field__number { flex: 0 0 auto; width: 118px; }
.minutes-field__range[hidden] + .minutes-field__number { flex: 1 1 auto; width: auto; }
.minutes-field__number .input { width: 100%; padding-right: 48px; font-variant-numeric: tabular-nums; }
.minutes-field__number .input-group__suffix { right: 12px; }
.minutes-field__number .input::-webkit-outer-spin-button, .minutes-field__number .input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.minutes-field__number .input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.reach-form__grid .minutes-field { grid-column: span 2; }
.list-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; }
.list-more__note { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 480px) {
.reach-form__grid .minutes-field { grid-column: auto; }
.minutes-field__number { width: 100px; }
}
/* --- quality (added) --- */
/* Index kvality (secondary schools) and skóre podmínek (MŠ, ZŠ): templates/quality/*.html.twig, the badge in
_school_item, ranking rows and the methodology /metodika/index-kvality. Band chip .qband--1…5 (1 slabší … 5 špička):
five ascending bars fill up to the level, so the band reads without colour too; the score is a percentile within
the peer group, never a rating. "orientační" = dashed tag, "nedostatek dat" = muted card. */
.qband {
--q-fill: var(--oth-fill); --q-ink: var(--oth-ink); --q-bg: var(--oth-bg);
--on: var(--q-fill);
--off: color-mix(in srgb, var(--q-fill) 24%, transparent);
--q1: var(--on); --q2: var(--off); --q3: var(--off); --q4: var(--off); --q5: var(--off);
display: inline-flex; align-items: center; gap: 7px;
min-height: 26px; padding: 2px 11px 2px 9px;
border-radius: var(--r-pill);
background: var(--q-bg);
color: var(--q-ink);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.qband::before {
content: ""; flex: none; width: 21px; height: 12px;
background:
linear-gradient(var(--q1) 0 0) 0 100% / 3px 30% no-repeat,
linear-gradient(var(--q2) 0 0) 4.5px 100% / 3px 47% no-repeat,
linear-gradient(var(--q3) 0 0) 9px 100% / 3px 65% no-repeat,
linear-gradient(var(--q4) 0 0) 13.5px 100% / 3px 82% no-repeat,
linear-gradient(var(--q5) 0 0) 18px 100% / 3px 100% no-repeat;
}
.qband--1 { --q-fill: var(--bad); --q-ink: var(--bad); --q-bg: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.qband--2 { --q-fill: color-mix(in srgb, var(--bad) 70%, var(--oth-fill)); --q-ink: var(--bad); --q-bg: color-mix(in srgb, var(--bad) 8%, var(--surface)); --q2: var(--on); }
.qband--3 { --q2: var(--on); --q3: var(--on); }
.qband--4 { --q-fill: color-mix(in srgb, var(--good) 75%, var(--oth-fill)); --q-ink: var(--good); --q-bg: color-mix(in srgb, var(--good) 9%, var(--surface)); --q2: var(--on); --q3: var(--on); --q4: var(--on); }
.qband--5 { --q-fill: var(--good); --q-ink: var(--good); --q-bg: color-mix(in srgb, var(--good) 15%, var(--surface)); --q2: var(--on); --q3: var(--on); --q4: var(--on); --q5: var(--on); }
.qband--lg { min-height: 34px; padding: 4px 14px 4px 12px; font-size: var(--step--1); }
/* listing badge: Index 78 */
.qbadge {
display: inline-flex; align-items: center; gap: 5px;
min-height: 24px; padding: 2px 8px;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink-2);
font-size: var(--step--2);
font-weight: 600;
white-space: nowrap;
}
.qbadge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--oth-fill); }
.qbadge b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.qbadge--1::before { background: var(--bad); }
.qbadge--2::before { background: color-mix(in srgb, var(--bad) 60%, var(--oth-fill)); }
.qbadge--4::before { background: color-mix(in srgb, var(--good) 70%, var(--oth-fill)); }
.qbadge--5::before { background: var(--good); }
.qbadge--approx { border-style: dashed; }
/* the card */
.quality {
display: grid; gap: var(--s-5);
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-3);
background: var(--surface);
}
.quality--empty { background: var(--surface-2); }
.quality__title { margin: 0; font-size: var(--step-1); }
.quality__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.quality__score { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.quality__value { color: var(--ink); font-family: var(--display); font-size: var(--step-5); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.quality__max { color: var(--muted); font-size: var(--step-0); font-weight: 700; }
.quality__score--none { color: var(--ink-2); font-family: var(--display); font-size: var(--step-2); font-weight: 800; }
.quality__verdict { display: grid; flex: 1 1 260px; gap: var(--s-2); justify-items: start; }
.quality__meaning { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; }
.quality__tag {
display: inline-flex; align-items: center;
min-height: 26px; padding: 2px 10px;
border: 1.5px dashed var(--line-strong);
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.quality__pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-4) var(--s-5); margin: 0; padding: 0; list-style: none; }
.pillar { display: grid; gap: 6px; align-content: start; }
.pillar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.pillar__name { color: var(--ink); font-weight: 700; }
.pillar__weight { display: block; color: var(--muted); font-size: var(--step--2); font-weight: 600; }
.pillar__value { color: var(--ink); font-family: var(--display); font-size: var(--step-1); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pillar__value small { color: var(--muted); font-family: var(--sans); font-size: var(--step--2); font-weight: 600; }
.pillar__bar { height: 10px; }
.pillar__bar .bar__fill { background: var(--ss-fill); }
.pillar__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; }
.pillar--missing .pillar__value { color: var(--muted); font-family: var(--sans); font-size: var(--step--1); font-weight: 600; }
.pillar--missing .pillar__bar { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--line) 6px 8px); }
/* value added not measurable at very selective schools: no bar, the explanation in its place */
.pillar--ceiling .pillar__value { color: var(--ink-2); font-family: var(--sans); font-size: var(--step--1); font-weight: 700; cursor: help; }
.pillar--ceiling .pillar__text { padding-left: var(--s-3); border-left: 3px solid var(--line-strong); }
.quality__ranks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--step--1); }
.quality__ranks div { display: grid; gap: 2px; }
.quality__ranks dt { color: var(--muted); }
.quality__ranks dd { margin: 0; color: var(--ink); }
.quality__others { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--step--1); }
.quality__link { margin: 0; font-size: var(--step--1); font-weight: 700; }
.quality__other { white-space: nowrap; }
.quality__table th[scope="row"] { font-weight: 700; }
.quality__mini { width: 110px; max-width: 100%; margin: 4px 0 2px; }
.quality__mini .bar__fill { background: var(--ss-fill); }
.quality--conditions .quality__value { font-size: var(--step-4); }
@media (max-width: 560px) {
.quality { padding: var(--s-4); gap: var(--s-4); }
.quality__value { font-size: var(--step-4); }
}
/* metro: chips with the line radius */
.qband { border-radius: var(--r-2); }
/* ==========================================================================
Labelled filter chips (added): kraj / okres switches in ranking heroes
========================================================================== */
.chips--filter { align-items: center; margin-top: var(--s-4); }
.chips--filter + .chips--filter { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.chips__label {
flex: 0 0 100%;
color: var(--muted);
font-size: var(--step--2);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ==========================================================================
Share buttons (added): templates/_share.html.twig, strip at the end of every page
========================================================================== */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.share__label { margin: 0; color: var(--muted); font-size: var(--step--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.share__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.share__btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-width: 42px; height: 42px; padding: 0 10px;
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink-2); font: inherit; font-size: .9rem; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.share__btn:hover, .share__btn:focus-visible { transform: translateY(-2px); color: #fff; border-color: transparent; background: var(--brand, var(--ink)); }
.share__btn--facebook { --brand: #1877f2; }
.share__btn--x, .share__btn--threads { --brand: #111; }
.share__btn--linkedin { --brand: #0a66c2; }
.share__btn--whatsapp { --brand: #1fa855; }
.share__btn--telegram { --brand: #229ed9; }
.share__btn--bluesky { --brand: #1185fe; }
.share__btn--pinterest { --brand: #e60023; }
.share__btn--reddit { --brand: #ff4500; }
.share__btn--email:hover, .share__btn--copy:hover, .share__btn--native:hover,
.share__btn--email:focus-visible, .share__btn--copy:focus-visible, .share__btn--native:focus-visible { color: var(--bg); }
.share__btn--native { padding: 0 16px; }
.share__btn.is-copied { background: var(--accent); color: #0f1d3a; border-color: transparent; }
.share__toast:not(:empty) {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap;
padding: 4px 10px; border-radius: var(--r-1, 6px); background: var(--ink); color: var(--bg); font-size: .78rem; font-weight: 500;
}
.share-strip { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.share-strip .share { flex-direction: column; justify-content: center; }
.share-strip .share__list { justify-content: center; }
@media print { .share, .share-strip { display: none; } }
/* Share row in the page hero (added): templates/_share_top.html.twig */
.share--top { margin-top: var(--s-4); gap: var(--s-2); }
.share--top .share__label { font-size: var(--step--2); }
.share--top .share__list { gap: 6px; }
.share--top .share__btn { min-width: 34px; height: 34px; padding: 0 8px; }
.share--top .share__btn svg { width: 17px; height: 17px; }
.share--top .share__btn--native { padding: 0 12px; font-size: .82rem; }
.hero .share--top .share__label { color: var(--muted); } /* the Metro hero is light (was the chrome grey: too pale) */
/* ==========================================================================
Home guide "Co hledáte?" (added): templates/home/index.html.twig
========================================================================== */
.guide__grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.guide__stage {
--stage: var(--oth-fill, var(--ink));
display: flex; flex-direction: column;
padding: var(--s-4); border: 1px solid var(--line); border-top: 4px solid var(--stage);
border-radius: var(--r-3); background: var(--surface);
}
.guide__stage--ms { --stage: var(--ms-fill); }
.guide__stage--zs { --stage: var(--zs-fill); }
.guide__stage--ss { --stage: var(--ss-fill); }
.guide__stage--vs { --stage: var(--gym-fill, var(--ink)); }
.guide__title { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--s-3); font-size: var(--step-1); }
.guide__title span { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.guide__list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.guide__item {
position: relative; display: flex; flex-direction: column; gap: 2px;
padding: var(--s-2) var(--s-3) var(--s-2) var(--s-3); border-radius: var(--r-2);
color: var(--ink); text-decoration: none;
transition: background .15s var(--ease), transform .15s var(--ease);
}
.guide__item:hover, .guide__item:focus-visible { background: var(--bg); transform: translateX(2px); }
.guide__item-title { font-weight: 700; }
.guide__item-title::after { content: "\00a0→"; color: var(--muted); }
.guide__item-text { color: var(--muted); font-size: var(--step--1); line-height: 1.4; }
.guide__item--featured { background: var(--accent-soft); }
.guide__item--featured:hover, .guide__item--featured:focus-visible { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.guide__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; }
/* Secondary-school filters with focus and founder (added): two even rows on desktop */
.filters--many .field { flex: 1 1 160px; min-width: min(100%, 160px); }
.filters--many .minutes-field { flex: 2 1 340px; }
.filters--many .field:first-child { flex-basis: 200px; }
.filters--many .field--sort { flex: 0 1 330px; }
/* ==========================================================================
Secondary-school detailed filters (added): templates/locality/secondary.html.twig – "Rychlý výběr" presets,
the "Další filtry" panel ( inside .filters), active filter chips with removal links
========================================================================== */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); }
.presets__label, .active-filters__label {
margin: 0; color: var(--muted); font-size: var(--step--2); font-weight: 700;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.presets__list, .active-filters__list { margin: 0; padding: 0; list-style: none; }
.presets .chip[aria-current="true"]::after { content: "×"; margin-left: 2px; font-weight: 700; opacity: .8; }
.filters-more { flex: 1 1 100%; min-width: 0; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.filters-more__summary {
display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
color: var(--ink); font-weight: 700; cursor: pointer; list-style: none;
}
.filters-more__summary::-webkit-details-marker { display: none; }
.filters-more__summary::before {
content: ""; width: 8px; height: 8px; margin: 0 4px 0 2px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); transition: transform .15s;
}
.filters-more[open] > .filters-more__summary::before { transform: rotate(45deg); }
.filters-more__summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-2); }
.filters-more__count {
display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-size: var(--step--2); font-weight: 700;
}
.filters-more__groups { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: var(--s-3); }
.filters-more__group {
display: grid; gap: var(--s-3); align-content: start; min-width: 0; margin: 0;
padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface);
}
.filters-more__group legend {
float: left; width: 100%; margin: 0 0 var(--s-1); padding: 0; color: var(--ink);
font-size: var(--step--1); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.filters .filters-more .field { flex: none; min-width: 0; }
.filters-more__checks { display: grid; gap: 0; }
.filters-more__checks .check { color: var(--ink); font-size: var(--step--1); font-weight: 600; letter-spacing: normal; text-transform: none; }
.filters-more__note { margin-top: calc(-1 * var(--s-1)); }
.filters-more__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; }
.chip--remove { gap: 8px; padding-right: 10px; border-color: var(--ink); color: var(--ink); }
.chip__x {
display: inline-grid; place-items: center; width: 20px; height: 20px;
border-radius: var(--r-pill); background: var(--surface-2); font-size: 1rem; line-height: 1;
}
.chip--remove:hover .chip__x, .chip--remove:focus-visible .chip__x { background: var(--ink); color: var(--bg); }
.active-filters__clear { color: var(--ink); font-size: var(--step--1); font-weight: 700; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.empty__actions .btn { margin-top: 0; }
@media (max-width: 640px) {
.filters-more__group { padding: var(--s-3); }
.filters-more__actions .btn { flex: 1 1 100%; }
}
/* "Další filtry" veil (added): the panel is always open, a translucent layer covers it until clicked (JS only) */
.filters-more__summary { cursor: default; }
.filters-more__summary::before { display: none; }
.filters-more__body { position: relative; }
.filters-more__veil { display: none; }
.js .filters-more--veiled .filters-more__body { max-height: 260px; overflow: hidden; border-radius: var(--r-3); }
.js .filters-more--veiled .filters-more__veil {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
width: 100%; padding: var(--s-4); border: 2px dashed var(--line-strong); border-radius: var(--r-3);
background: color-mix(in srgb, var(--surface-2) 72%, transparent);
-webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
color: var(--ink); font: inherit; text-align: center; cursor: pointer;
transition: background .15s, border-color .15s;
}
.js .filters-more--veiled .filters-more__veil:hover,
.js .filters-more--veiled .filters-more__veil:focus-visible { background: color-mix(in srgb, var(--surface-2) 55%, transparent); border-color: var(--ink); }
.filters-more__veil-title {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-pill);
background: var(--ink); color: var(--bg); font-weight: 700;
}
.filters-more__veil-title::after { content: "↓"; }
.filters-more__veil-text { max-width: 46ch; color: var(--ink-2); font-size: var(--step--1); font-weight: 600; }
/* --- accessibility and conveniences (added) --- */
/* WCAG 2.2 fixes and the small conveniences of public/js/qol.js: "Moje obec", recently viewed, "Zpět na výsledky",
back to top, the sticky results bar, glossary popovers (ui.term), private notes, print. Controls that need JS are
[hidden] in the HTML. */
/* the controls below need JS: [hidden] wins over their display */
.print-btn[hidden], .from-home[hidden], .home-set[hidden], .back-results[hidden], .mine[hidden],
.mine__grid > [hidden], .term__pop[hidden] { display: none; }
/* links in the footer line are underlined (not distinguished by colour alone) */
.site-footer__bottom a { text-decoration: underline; text-underline-offset: .2em; }
/* the faded "unlikely" band of /kam-se-dostanu kept its texts below 4.5:1 */
.chance--unlikely .school-list { opacity: 1; }
/* target size ≥ 24 px for links in the meta line of listings */
.school-item__meta a { display: inline-block; padding-block: 3px; }
/* "Přeskočit mapu": visible only when focused */
.skip.skip--inline { position: absolute; top: auto; left: -10000px; }
.skip.skip--inline:focus { position: relative; left: 0; top: 0; display: inline-block; margin: 0 0 var(--s-2); }
.map__osm .leaflet-container:focus-visible, .map__osm:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[id$="-za"][tabindex="-1"]:focus { outline: none; }
/* text buttons */
.btn-link, .print-btn {
display: inline-flex; align-items: center; gap: 6px;
min-height: 32px; padding: 0;
border: 0; background: none;
color: var(--ink);
font: 700 var(--step--1) / 1.3 var(--sans);
text-decoration: underline; text-decoration-color: var(--link-line, currentColor); text-underline-offset: .22em;
cursor: pointer;
}
.btn-link:hover, .print-btn:hover { text-decoration-color: currentColor; }
.print-btn::before {
content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 18H4v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7h-3'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 18H4v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7h-3'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-hero__actions { margin: var(--s-3) 0 0; }
/* "Moje obec" (municipality pages) */
.home-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; }
.home-set__btn.is-on, .home-set__btn.is-on:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.home-set__note { color: var(--muted); font-size: var(--step--2); }
.page-hero .home-set__note { color: inherit; opacity: .85; }
/* "Z vaší obce" on profiles */
.from-home { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--step--1); }
.from-home__label { font-weight: 700; }
.from-home__row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.from-home__name { font-weight: 700; }
.from-home__row + .from-home__row::before { content: "·"; margin-right: 4px; opacity: .6; }
.from-home__none, .from-home__more { opacity: .85; }
/* "← Zpět na výsledky" */
.back-results { margin: 0 0 var(--s-2); font-size: var(--step--1); font-weight: 700; }
.back-results a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
/* home page: my municipality and recently viewed */
.mine { padding-bottom: 0; }
.mine__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); }
.mine__title { margin: 0 0 var(--s-3); }
.mine__links { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.mine__recent-list { display: grid; gap: 2px; margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.mine__recent-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-height: 32px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mine__recent-list a { font-weight: 700; }
.mine__meta { color: var(--muted); font-size: var(--step--2); }
/* search suggestions: heading and "Vymazat historii" */
.suggest__head { padding: 8px 14px 4px; color: var(--muted); font-size: var(--step--2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.suggest__item { cursor: pointer; }
.suggest__clear { display: block; min-height: 40px; padding: 10px 14px 8px; border-top: 1px solid var(--line); color: var(--ink); font: 700 var(--step--1) / 1.3 var(--sans); text-decoration: underline; }
.suggest__clear:hover, .suggest__item[aria-selected="true"] .suggest__clear { background: var(--accent-soft); }
/* the results bar of /stredni-skoly/{slug}: sticks to the top while the list scrolls */
.results-bar {
position: sticky; top: 0; z-index: 20;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-4);
margin: 0 0 var(--s-4); padding: 6px var(--s-4);
border: 1px solid var(--line); border-radius: var(--r-2);
background: var(--surface);
box-shadow: 0 6px 16px -12px rgb(0 0 0 / .35);
font-size: var(--step--1);
}
.results-bar__count { margin: 0; }
.results-bar__meta { color: var(--muted); }
.results-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); margin: 0; padding: 0; list-style: none; }
.results-bar__actions a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; }
@media (max-width: 560px) {
/* one line on phones: the count, filters and the CSV (printing from a phone is rare) */
.results-bar { gap: 0 var(--s-3); padding: 2px var(--s-3); font-size: var(--step--2); }
.results-bar__meta, .results-bar__print { display: none; }
.results-bar__actions { gap: 0 var(--s-3); }
.results-bar__actions a { white-space: nowrap; }
}
#filtry { scroll-margin-top: var(--s-4); }
/* focused links in the list are never hidden under the sticky bar (WCAG 2.4.11) */
html:has(.results-bar) { scroll-padding-top: 72px; }
/* back to top */
.to-top {
position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60;
display: inline-flex; align-items: center; gap: 6px;
min-width: 44px; min-height: 44px; padding: 0 14px;
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink);
box-shadow: 0 6px 18px -8px rgb(0 0 0 / .4);
font: 700 var(--step--1) / 1 var(--sans); text-decoration: none;
}
.to-top:hover { border-color: var(--ink); }
.to-top[hidden] { display: none; }
@media (max-width: 560px) { .to-top { padding: 0; justify-content: center; font-size: 0; } .to-top span { font-size: 20px; } }
/* glossary: "?" buttons and the popover (ui.term, public/js/qol.js); without JS a link to /slovnicek */
.term-wrap { position: relative; display: inline-block; vertical-align: baseline; }
.term {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
min-width: 24px; min-height: 24px; margin: 0 2px; padding: 0;
border: 0; background: none; color: var(--ink);
font: 700 var(--step--1) / 1.2 var(--sans); text-decoration: none; vertical-align: middle;
cursor: help;
}
.term__q {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; flex: none;
border: 1.5px solid currentColor; border-radius: 50%;
font-size: 12px; line-height: 1;
}
.term:hover .term__q, .term[aria-expanded="true"] .term__q { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.term--text { padding: 0 2px; text-decoration: underline dotted; text-underline-offset: .2em; }
.terms { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step--1); }
.terms__label { font-weight: 700; }
.field__head { display: flex; align-items: center; gap: 4px; }
.term__pop {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
display: block; width: max-content; max-width: min(320px, calc(100vw - 16px));
padding: var(--s-3) var(--s-4);
border: 1px solid var(--line-strong); border-radius: var(--r-2);
background: var(--surface); color: var(--ink-2);
box-shadow: 0 12px 28px -12px rgb(0 0 0 / .45);
font: 400 var(--step--1) / 1.45 var(--sans); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
}
.term__pop[hidden] { display: none; }
.term__title { display: block; margin-bottom: 4px; color: var(--ink); }
.term__text { display: block; }
.term__more { display: inline-block; margin-top: 6px; padding-block: 3px; font-weight: 700; }
.glossary__term { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); scroll-margin-top: var(--s-4); }
.glossary__term h2 { margin-bottom: var(--s-2); }
.glossary__term:target { background: var(--accent-soft); box-shadow: 0 0 0 var(--s-3) var(--accent-soft); }
.glossary__more { margin: 0; font-size: var(--step--1); }
.glossary__more a, .glossary .source a { display: inline-block; padding-block: 3px; }
/* private notes */
@media print { .compare-picked { display: none; } }
@media (prefers-reduced-motion: reduce) {
.share__btn:hover, .share__btn:focus-visible, .guide__item:hover, .guide__item:focus-visible { transform: none; }
}
@media (forced-colors: active) {
.term__q, .results-bar, .to-top, .term__pop { border-color: CanvasText; }
}
/* print: school profiles, the secondary listing and the comparison */
@media print {
.skip, .menu, .share, .share-strip, .to-top, .print-btn, .save-btn, .home-set, .back-results, .presets, .filters,
.active-filters, .map, .results-bar__actions, .compare-forms, .compare-picked__remove, .term, .term__pop,
.terms, .page-hero__actions, .compare-actions, .from-home, .site-footer, .consent { display: none !important; }
.page-hero::before, .page-hero::after, .page-head::before, .page-head::after, .page-hero .chips,
.section:has(> .map:only-child) { display: none !important; }
.results-bar { position: static; box-shadow: none; border: 0; padding: 0; }
.page-hero, .page-head { padding-block: 0 8px; background: none !important; color: #000; }
.page-hero *, .page-head * { color: #000 !important; }
.crumbs { display: none; }
a { color: #000; text-decoration: none; }
.school-item, .panel, .callout, .stat, tr, .data-table thead { break-inside: avoid; }
.school-item { box-shadow: none; border-color: #999; }
.school-item__name a::after, .kv a[href^="http"]::after, .compare-table__school a::after {
content: " – skolniradar.cz" attr(href); position: static; inset: auto; display: block;
font-weight: 400; font-size: 9pt; word-break: break-all;
}
.kv a[href^="http"]::after { content: " – " attr(href); display: inline; }
.table-wrap { overflow: visible; }
.data-table--sticky thead th, .data-table--sticky th:first-child, .data-table--sticky td:first-child { position: static; }
h2, h3 { break-after: avoid; }
}
/* "Kam se dostanu" with the filters of the listing (added): the big form, then "Rychlý výběr" and the filters */
.tool-form > .reach-form + * { margin-top: var(--s-5); }
/* --- application planner and points history (added) ---
"Sestav přihlášku" /sestav-prihlasku (templates/planner/index.html.twig, public/js/planner.js), the "Přidat do
přihlášky" links (templates/_plan_add.html.twig) and "Vývoj bodů v čase" (templates/chart/_years.html.twig,
templates/school/_points_history.html.twig, _points_profile.html.twig). */
.plan-form .reach-form__grid { grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.6fr) auto; }
@media (max-width: 960px) { .plan-form .reach-form__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .plan-form .reach-form__grid { grid-template-columns: 1fr; } }
.plan-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); }
.plan-resume[hidden] { display: none; }
.plan-resume p { flex: 1 1 280px; margin: 0; color: var(--ink); font-size: var(--step--1); }
.plan-search { padding-block: var(--s-6) 0; }
.plan-search__title, .plan-assess__title { margin: 0 0 var(--s-3); color: var(--ink); font-size: var(--step-2); }
.plan-search__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; max-width: 760px; }
.plan-search__form .field { margin: 0; }
.plan-search__form > .btn { min-height: 48px; }
.plan-search .field__hint { max-width: 760px; margin: var(--s-2) 0 0; }
.plan { margin-top: var(--s-6); scroll-margin-top: 90px; }
.plan[aria-busy="true"] { opacity: .6; transition: opacity .2s; }
.plan-notice { margin-bottom: var(--s-4); }
.plan-item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; scroll-margin-top: 90px; }
.plan-item__rank { min-width: 2ch; color: var(--ink); font-family: var(--display); font-size: var(--step-3); font-weight: 800; line-height: 1; }
.plan-item__actions { position: relative; z-index: 1; grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.plan-item__actions .btn { min-height: 40px; }
@media (max-width: 640px) {
.plan-item { grid-template-columns: auto minmax(0, 1fr); }
.plan-item .school-item__aside { grid-column: 2; justify-items: start; text-align: left; }
.plan-item .school-item__metric { justify-items: start; }
.plan-item__actions { grid-column: 1 / -1; }
}
.plan-assess { padding-block: var(--s-6) 0; }
.plan-assess__list { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
.callout--ok { --co: var(--d1-fill); --co-bg: var(--d1-bg); }
.callout--ok::before { content: "✓"; }
.plan-rules__list { display: grid; gap: var(--s-2); margin: 0; padding-left: 1.2em; color: var(--ink-2); line-height: 1.55; }
.plan-sources { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.plan-sources a { display: inline-flex; align-items: center; min-height: 24px; }
.plan-add-row { margin: 0 0 var(--s-3); }
.plan-add { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px 2px 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--step--1); font-weight: 700; line-height: 1.2; text-decoration: none; }
.plan-add:hover { border-color: var(--ink); color: var(--ink); }
.plan-add__icon { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 14px; line-height: 1; }
.plan-add.is-added { border-color: var(--d1-fill); background: var(--d1-bg); color: var(--d1-ink); }
.plan-add.is-added .plan-add__icon { background: var(--d1-ink); color: var(--d1-bg); }
.school-item__aside .plan-add { margin-top: 2px; }
.data-table .plan-add { display: flex; width: max-content; min-height: 28px; margin-top: 6px; font-size: var(--step--2); }
.ychart-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); min-width: 0; margin: var(--s-4) 0; }
.ychart-box .chart__svg { max-width: 680px; }
.ychart__subtitle { margin: var(--s-2) 0 0; color: var(--ink); font-size: var(--step--1); font-weight: 700; }
.ychart__subtitle span { color: var(--muted); font-weight: 400; }
.ychart .chart__label { font-size: 12px; }
.ychart__line--dashed { stroke-width: 2.5; stroke-dasharray: 7 5; }
.ychart__divider { stroke: var(--viz-axis); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ychart__value { fill: var(--ink); font: 700 12px var(--sans); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ychart__bar { fill: var(--viz-5); }
.ychart__bars-title { font-weight: 700; }
.ychart__swatch--dashed { -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px); }
.ychart__swatch--bar { width: 12px; height: 12px; border-radius: 2px; background: var(--viz-5); }
.ychart__note { margin: 0; }
.ychart__old th, .ychart__old td { color: var(--ink-2); }
@media (max-width: 600px) {
.ychart .chart__label { font-size: 21px; }
.ychart .ychart__value { font-size: 20px; }
.ychart .is-minor { display: none; }
}
@media print {
.plan-form, .plan-search, .plan-item__actions, .plan-bar .results-bar__actions, .plan-resume, .plan-add, .plan + .share, .plan-rules .terms { display: none !important; }
.plan-item { break-inside: avoid; }
.ychart__table[open] summary { display: none; }
}
.callout--ok { --co-on: var(--brand-black); }
/* --- open days and big map (added) --- */
/* Dny otevřených dveří (templates/open_days/*.html.twig, the profile panel) and the big map /mapa
(templates/map/index.html.twig, public/js/bigmap.js): the map fills the width with the filters in a side sheet; on
phones the map takes the screen and the filters are a collapsible sheet over its bottom (only with JS – without it
the sheet stays above the map). */
.dod-days { margin: 0; padding: 0; list-style: none; }
.dod-day + .dod-day { margin-top: var(--s-5); }
.dod-day__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); font-size: var(--step-1); }
.dod-day__date time::first-letter { text-transform: uppercase; }
.dod-day__list { margin: 0; }
.dod-item__note { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step--1); }
.dod-item .school-item__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.dod-item__text { font-size: var(--step--1); }
.dod-texts { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.dod-text { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.dod-text:target, .dod-text:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.dod-text__school { margin: 0 0 var(--s-2); font-weight: 700; }
.dod-text__quote { margin: 0; color: var(--muted); font-size: var(--step--1); overflow-wrap: anywhere; }
.dod-regions { align-items: start; }
.dod-region .note { margin: 0 0 var(--s-2); }
.dod-mini { margin: 0; padding: 0; list-style: none; }
.dod-mini li { padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--step--1); }
.dod-mini time { display: inline-block; min-width: 5.5em; font-weight: 700; }
.dod-profile { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.dod-profile li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.dod-profile time { font-weight: 700; }
.dod-profile time::first-letter { text-transform: uppercase; }
.dod-profile__ics { margin-left: var(--s-2); font-size: var(--step--1); white-space: nowrap; }
.map-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; }
.page-hero--compact { padding-block: var(--s-4) var(--s-3); }
.page-hero--compact .lead { margin-bottom: 0; }
.bigmap { position: relative; display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: var(--s-3); margin: var(--s-4) 0 var(--s-4); padding: 0; border: 0; background: none; }
.bigmap > .skip--inline { grid-column: 1 / -1; }
.bigmap__sheet { align-self: start; max-height: min(78vh, 760px); overflow: auto; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.bigmap__summary { cursor: pointer; font-weight: 700; font-family: var(--display); font-size: var(--step-1); }
.bigmap__count { color: var(--muted); font-family: var(--sans); font-size: var(--step--1); font-weight: 400; }
.bigmap__form { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.bigmap__form .field { margin: 0; }
.bigmap__form .field__hint { margin: 0; }
.bigmap__kinds { gap: var(--s-2); }
.bigmap__group { margin: var(--s-2) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.bigmap__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bigmap__map { min-height: 420px; height: min(78vh, 760px); border-radius: 10px; overflow: hidden; z-index: 0; background: #e8e6df; }
.bigmap__map:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bigmap .leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.04); }
.bigmap .bigmap-cluster { display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--ink); color: var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .35); font: 700 .8rem/1 var(--sans); cursor: pointer; }
.bigmap-popup { display: grid; gap: 2px; }
.bigmap-popup__name { font-weight: 700; }
.bigmap-popup__kind, .bigmap-popup__address { color: var(--muted); font-size: .85rem; }
.bigmap .bigmap-popup p { margin: 0; }
.bigmap .bigmap-popup .bigmap-popup__facts { margin-top: 4px; font-size: .9rem; }
.bigmap .bigmap-popup .bigmap-popup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.bigmap-list__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-1) var(--s-5); margin: 0; padding-left: 1.4em; }
.bigmap-list__item { padding: 4px 0; break-inside: avoid; }
.bigmap-list__item a { font-weight: 700; }
.bigmap-list__item .note { display: block; font-size: var(--step--1); }
.bigmap-list__item--ms::marker { color: var(--ms-fill, #c43d86); }
.bigmap-list__item--zs::marker { color: var(--zs-fill, #d07400); }
.bigmap-list__item--ss::marker, .bigmap-list__item--gym::marker { color: var(--ss-fill, #1f62d0); }
.bigmap-list__item--vs::marker { color: var(--vs-fill, #13908f); }
.bigmap-list__status { margin: 0 0 var(--s-3); font-weight: 700; }
#mapa-seznam:focus { outline: none; }
@media (max-width: 720px) {
.bigmap { grid-template-columns: 1fr; margin-inline: calc(-1 * var(--gutter)); }
.bigmap__map { height: calc(100svh - 120px); min-height: 360px; border-radius: 0; }
.js .bigmap__sheet { position: absolute; z-index: 500; inset: auto var(--s-2) var(--s-2); max-height: 62svh; box-shadow: 0 4px 18px rgb(0 0 0 / .25); }
.js .bigmap > .skip--inline { position: absolute; }
.bigmap__sheet:not([open]) { padding-block: var(--s-2); }
.page-hero--compact .lead { display: none; }
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bigmap .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.9) contrast(.9); }
}
:root[data-theme="dark"] .bigmap .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.9) contrast(.9); }
@media print { .bigmap, .dod-item__ics, .dod-profile__ics { display: none !important; } }
/* Planner: "Kterou školu dát na první místo?" (added) */
.table-scroll { overflow-x: auto; }
.priority-explainer__lead { max-width: 72ch; margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 4px solid var(--accent); border-radius: var(--r-2); background: var(--surface); }
.priority-explainer__lead p { margin: 0; }
.priority-explainer h3 { margin: var(--s-4) 0 var(--s-2); }
.priority-explainer__table caption { margin-bottom: var(--s-2); color: var(--muted); font-size: var(--step--1); text-align: left; caption-side: top; }
.priority-explainer__facts { margin: var(--s-4) 0 var(--s-3); }
/* --- planner field picker (added) ---
"Přidat obor" on /sestav-prihlasku (templates/planner/_picker.html.twig, public/js/planner.js): the found offers
grouped by school – a card per school, its offers as rows with the points, the chance and "Přidat". */
.plan-search__form .input { width: 100%; min-height: 48px; }
.pick { max-width: 860px; margin: var(--s-4) 0 0; }
.pick[aria-busy="true"] { opacity: .6; transition: opacity .2s; }
.pick__summary { margin: 0 0 var(--s-3); color: var(--ink); }
.pick__context, .pick__far { color: var(--muted); font-size: var(--step--1); }
.pick__context a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink); font-weight: 700; }
.pick__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.pick-school { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); scroll-margin-top: 90px; }
.pick-school__head { display: grid; gap: 4px; padding-bottom: var(--s-2); }
.pick-school__name { margin: 0; color: var(--ink); font-size: var(--step-1); line-height: 1.25; }
.pick-school__name a { color: inherit; }
.pick-school__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-2); }
.pick-school__town { color: var(--ink-2); font-size: var(--step--1); font-weight: 700; }
.pick-school__others { margin: var(--s-2) 0 0; font-size: var(--step--1); }
.pick-school__others a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); }
.pick-offers { margin: 0; padding: 0; list-style: none; }
.pick-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.pick-offer__main { min-width: 0; }
.pick-offer__field { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.3; }
.pick-offer__focus { margin: 2px 0 0; color: var(--muted); font-size: var(--step--1); line-height: 1.35; overflow-wrap: anywhere; }
.pick-offer__focus summary { cursor: pointer; }
.pick-offer__focus[open] summary { margin-bottom: 2px; }
.pick-offer__focus p { margin: 0; }
.pick-offer__tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; }
.pick-offer__tags:empty { display: none; }
.pick-offer__other { color: var(--muted); font-size: var(--step--1); font-style: italic; }
.pick-offer--other .pick-offer__field { color: var(--ink-2); }
.pick-offer__score { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px var(--s-2); text-align: right; }
.pick-offer__points { color: var(--ink-2); font-size: var(--step--1); white-space: nowrap; }
.pick-offer__points b { color: var(--ink); font-size: var(--step-0); }
.pick-offer__action { display: flex; justify-content: flex-end; }
.pick-offer__add { min-width: 92px; min-height: 44px; }
.pick-offer__in { display: inline-flex; align-items: center; min-height: 44px; color: var(--d1-ink, var(--ink)); font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.pick-offer__add[hidden], .pick-offer__in[hidden] { display: none; }
.pick__more { margin: var(--s-4) 0 0; }
.pick__more .btn { min-height: 44px; }
.pick__more-count { color: var(--muted); font-weight: 400; }
.pick-hint { padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); }
.pick-hint p { margin: 0; color: var(--ink-2); }
.pick-hint__links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.pick-hint__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--step--1); font-weight: 700; text-decoration: none; }
.pick-hint__links a:hover { border-color: var(--ink); }
.pick-hint__tool { margin-top: var(--s-3) !important; font-size: var(--step--1); }
.pick-hint__tool a { font-weight: 700; }
.pick-hint + .pick__list { margin-top: var(--s-3); }
@media (max-width: 600px) {
.pick-school { padding: var(--s-3); }
.pick-offer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main action" "score action"; }
.pick-offer__main { grid-area: main; }
.pick-offer__score { grid-area: score; justify-content: flex-start; text-align: left; }
.pick-offer__action { grid-area: action; align-self: start; }
}
@media print { .pick { display: none !important; } }
/* --- favourites (added) --- */
/* "Oblíbené školy" (public/js/favorites.js): the star toggles reuse .save-btn; the header link "★ Oblíbené (N)",
the line under the profile actions, the box "Vaše oblíbené školy" of the planner (planner.js) and /oblibene. */
.saved-link { width: auto; min-width: var(--tap); padding: 0 10px; grid-auto-flow: column; gap: 6px; }
.saved-link__label { font: 700 var(--step--1) / 1 var(--sans); }
.saved-link .saved-link__count { position: static; }
@media (max-width: 720px) { .saved-link__label { display: none; } }
.fav-note { max-width: var(--measure); margin: var(--s-2) 0 0; font-size: var(--step--1); opacity: .9; }
.fav-note[hidden], .plan-favs[hidden], .plan-favs__empty[hidden], .pick-school__unfav[hidden], .fav-page [hidden] { display: none; }
.plan-favs { margin: 0 0 var(--s-5); padding: var(--s-4); border: 2px solid var(--brand-yellow); border-radius: var(--r-3); background: var(--surface-2); }
.plan-favs__title { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--step-1); }
.plan-favs__title:focus { outline: none; }
.plan-favs__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan-favs__empty { max-width: var(--measure); margin: 0; color: var(--ink-2); }
.pick--favs .pick__summary { margin: 0 0 var(--s-3); }
.pick-school__head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.pick-school__head > * { grid-column: 1 / -1; }
.pick-school__head > .pick-school__name { grid-column: 1; }
.pick-school__head > .save-btn, .pick-school__head > .pick-school__unfav { grid-column: 2; grid-row: 1; margin: 0; }
.pick-school__unfav { min-height: 36px; white-space: nowrap; }
.fav-page { margin: var(--s-5) 0 var(--s-6); }
.fav-bar { gap: var(--s-2) var(--s-4); scroll-margin-top: 90px; }
.fav-bar .btn[aria-disabled="true"] { opacity: .6; }
.fav-list { margin-top: var(--s-3); }
.fav-item .school-item__name { font-size: var(--step-1); }
.fav-item__links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-2) 0 0; font-size: var(--step--1); }
.fav-item__links a { font-weight: 700; }
.fav-item__pick { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; }
.fav-item__pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.fav-item__pick:has(input:checked) { border-color: var(--ink); background: var(--accent-soft); }
.fav-item__pick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.fav-page__notes { margin-bottom: var(--s-6); }
@media print { .plan-favs, .fav-note, .fav-bar, .fav-item__pick { display: none !important; } }
/* Theme switch in the footer (added) */
.theme-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.theme-switch__label { font-weight: 700; }
.theme-switch__select { width: auto; min-width: 220px; max-width: 100%; }
.theme-switch__note { font-size: var(--step--1); opacity: .8; }
.theme-switch__submit[hidden] { display: none; }
@media print { .theme-switch { display: none; } }
/* --- motion (added) --- */
/* Light, purposeful motion (public/js/motion.js): a short cross-fade between pages, sections and list items fading in
the first time they scroll into view, figures counting up once, bars, meters and charts growing when visible, and
small feedback. Only opacity, transform and stroke are animated. base.html.twig sets html.motion before the first
paint (never with reduced motion; a safety timeout drops it when motion.js does not start) and only motion.js adds
the hidden state, to items still below the fold: without JavaScript everything is shown at once. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; animation-timing-function: ease-out; }
/* the header stays put while the page under it cross-fades */
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header), ::view-transition-new(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
/* scroll reveal: 10 px rise and fade, list items of one batch staggered by 50 ms (motion.js sets --mo-delay) */
html.motion .mo-hide { opacity: 0; transform: translateY(10px); }
html.motion .mo-hide.mo-fade { transform: none; }
html .mo-show { transition: opacity .35s ease-out, transform .35s var(--ease); transition-delay: var(--mo-delay, 0s); }
/* counting figures: the real text keeps its place (transparent), the aria-hidden copy counts over it */
mo-num { position: relative; display: inline-block; white-space: nowrap; }
mo-final { opacity: 0; }
mo-run { position: absolute; inset: 0; display: flex; white-space: pre; pointer-events: none; }
mo-run > mo-cell { display: block; height: var(--mo-h); line-height: var(--mo-h); overflow: hidden; text-shadow: none; }
mo-strip, mo-strip > mo-cell { display: block; height: auto; }
mo-strip > mo-cell { height: var(--mo-h); }
/* bars grow from the left, chart bars from the baseline (motion.js animates `scale`) */
.bar__fill, .meter__range { transform-origin: 0 50%; }
.ychart__bar { transform-box: fill-box; transform-origin: 50% 100%; }
/* micro-interactions: arrows nudge, the favourite star pops with a ring, the planner confirms an added field */
.mo-arrow { display: inline-block; transition: translate .15s var(--ease); }
a:is(:hover, :focus-visible) > .mo-arrow { translate: 3px 0; }
.more-link:focus-visible span { translate: 3px 0; }
/* cards and list stations: see "motion: Metro" below */
.save-btn.mo-pop { position: relative; animation: mo-pop .4s var(--ease); }
.save-btn.mo-pop::after { content: ""; position: absolute; inset: -5px; border: 2px solid currentColor; border-radius: inherit; opacity: 0; pointer-events: none; animation: mo-burst .5s ease-out; }
@keyframes mo-pop { 40% { scale: 1.18; } }
@keyframes mo-burst { from { opacity: .6; scale: .8; } to { opacity: 0; scale: 1.4; } }
.pick-offer__in.is-added > [aria-hidden="true"] { display: inline-block; animation: mo-check .45s var(--ease) both; }
@keyframes mo-check { from { opacity: 0; scale: .2; rotate: -30deg; } 60% { scale: 1.25; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.plan-item.is-added { outline: 3px solid var(--accent); outline-offset: 2px; animation: mo-rise .45s var(--ease) both; }
@keyframes mo-rise { from { opacity: .3; translate: 0 8px; } }
/* loading: a thin bar sweeps under the search field and over the planner while results load (after .15 s) */
.search.is-loading .search__field, :is(.plan, .pick)[aria-busy="true"] { position: relative; }
.search.is-loading .search__field::after, :is(.plan, .pick)[aria-busy="true"]::after {
content: ""; position: absolute; left: 0; right: 0; height: 3px;
background: var(--accent); transform-origin: 0 50%; pointer-events: none;
animation: mo-load 1.1s var(--ease) .15s infinite backwards;
}
.search.is-loading .search__field::after { bottom: -1px; }
:is(.plan, .pick)[aria-busy="true"]::after { top: 0; }
@keyframes mo-load { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* the copy-link toast slides in; the theme switch fades the page out while the new theme loads */
.share__toast:not(:empty) { animation: mo-toast .25s var(--ease); }
@keyframes mo-toast { from { opacity: 0; translate: 0 6px; } }
html.mo-leaving body { opacity: .4; transition: opacity .15s ease-out; }
/* maps: markers and clusters fade in */
.leaflet-overlay-pane canvas, .bigmap-cluster { animation: mo-fade .3s ease-out; }
@keyframes mo-fade { from { opacity: 0; } }
/* motion: reduced motion (added) – everything in its final state at once */
@media (prefers-reduced-motion: reduce) {
.mo-hide { opacity: 1 !important; transform: none !important; }
mo-final { opacity: 1 !important; }
mo-run { display: none !important; }
.save-btn.mo-pop, .save-btn.mo-pop::after, .pick-offer__in.is-added > *, .plan-item.is-added, .share__toast,
.search__field::after, .plan::after, .pick::after, .leaflet-overlay-pane canvas, .bigmap-cluster { animation: none !important; }
.mo-arrow, a.card, .card--link { translate: none !important; transition: none !important; }
html.mo-leaving body { opacity: 1; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
.mo-hide { opacity: 1 !important; transform: none !important; }
mo-final { opacity: 1 !important; }
mo-run { display: none !important; }
}
/* --- motion: Metro (added) --- */
/* The hero diagram (inline copy from public/js/motion.js) draws its lines, the stations pop in one by one and a faint
radar sweep turns in the rings (16 s a turn). While html.motion is set the static --diagram background is left
out, so it never shows twice. */
html.motion :is(.hero, .page-hero, .page-head)::before { content: none; }
.metro-diagram { position: absolute; z-index: -1; aspect-ratio: 640 / 440; pointer-events: none; }
.metro-diagram svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hero > .metro-diagram {
top: 50%; right: -60px;
width: min(760px, 70vw);
transform: translateY(-50%);
-webkit-mask-image: linear-gradient(to left, #000 55%, transparent 98%);
mask-image: linear-gradient(to left, #000 55%, transparent 98%);
}
@media (max-width: 960px) {
.hero > .metro-diagram { top: -30px; right: -170px; width: 460px; opacity: .2; transform: none; }
}
:is(.page-hero, .page-head) > .metro-diagram {
top: -40px; right: -140px;
width: 560px;
opacity: .5;
-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 85%);
mask-image: linear-gradient(to left, #000 30%, transparent 85%);
}
@media (max-width: 760px) { :is(.page-hero, .page-head) > .metro-diagram { width: 380px; right: -200px; top: -60px; opacity: .22; } }
.metro-diagram__line { stroke-dasharray: 1; animation: mo-draw 1s var(--ease) calc(var(--i) * 140ms) backwards; }
@keyframes mo-draw { from { stroke-dashoffset: 1; } }
.metro-diagram__station { transform-box: fill-box; transform-origin: center; animation: mo-station-pop .35s var(--ease) calc(500ms + var(--i) * 60ms) backwards; }
@keyframes mo-station-pop { from { opacity: 0; transform: scale(.2); } }
/* the sweep: a faint green wedge over the rings (ring centre 440,210 and radius 200 of the 640 × 440 diagram) */
.metro-diagram__sweep {
position: absolute; left: 37.5%; top: 2.27%; width: 62.5%; height: 90.91%;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 290deg, rgb(0 165 98 / .14) 360deg);
opacity: 0;
animation: mo-fade-in .8s ease-out 1.2s forwards, mo-sweep 16s linear 1.2s infinite;
}
@keyframes mo-fade-in { to { opacity: 1; } }
@keyframes mo-sweep { to { transform: rotate(1turn); } }
/* the colour stripe under the header passes by like a train on the first page of a visit */
html.motion-first .site-header::after { transform-origin: 0 50%; animation: mo-train 1.1s var(--ease) .15s backwards; }
@keyframes mo-train { from { transform: scaleX(0); } }
/* breadcrumbs: the stations of the route fill in one after another */
html.motion .crumbs li::before { transform-origin: 0 50%; animation: mo-crumb .35s var(--ease) backwards; }
html.motion .crumbs li:nth-child(2)::before { animation-delay: .07s; }
html.motion .crumbs li:nth-child(3)::before { animation-delay: .14s; }
html.motion .crumbs li:nth-child(4)::before { animation-delay: .21s; }
html.motion .crumbs li:nth-child(5)::before { animation-delay: .28s; }
html.motion .crumbs li:nth-child(n+6)::before { animation-delay: .35s; }
@keyframes mo-crumb { from { opacity: 0; transform: scaleX(.3); } }
/* cards lift a little; on the line of school stations the station grows instead (lifting would break the rail) */
a.card, .card--link { transition: border-color .15s, box-shadow .2s, translate .2s var(--ease); }
a.card:is(:hover, :focus-visible), .card--link:is(:hover, :has(.card__title a:focus-visible)) { translate: 0 -2px; }
.school-item::before { transition: scale .2s var(--ease); }
.school-item:is(:hover, :has(.school-item__name a:focus-visible))::before { scale: 1.2; }
@media (prefers-reduced-motion: reduce) {
.metro-diagram { display: none; }
html.motion :is(.hero, .page-hero, .page-head)::before { content: ""; }
html.motion-first .site-header::after, html.motion .crumbs li::before { animation: none; }
a.card, .card--link, .school-item::before { translate: none !important; scale: none !important; }
}
@media print { .metro-diagram { display: none; } }