@charset "utf-8";

/* Písma sú uložené lokálne, stránka nerobí požiadavky na cudzie servery.
   Sú to variabilné rezy, preto jeden súbor pokrýva celý rozsah váh. */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/archivo-latin.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/archivo-latin-ext.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: 'Public Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(../fonts/public-sans-latin.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(../fonts/public-sans-latin-ext.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: 'Roboto Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url(../fonts/roboto-mono-latin.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url(../fonts/roboto-mono-latin-ext.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;
}
/* ==========================================================================
   Backorder.sk — Návrh 3 „Modrá“
   Inštitucionálny švajčiarsky raster. Platónska modrá vedie, typografia nesie
   hierarchiu, sekcie sú zavesené na dvojstĺpcovom rastri.
   ========================================================================== */

:root {
	--platon:     #196eb4;
	--platon-dk:  #12558c;
	--deep:       #0f3a5f;
	--ink:        #16202b;
	--grey:       #5a6675;
	--grey-lt:    #636c78;  /* WCAG AA aj na podfarbených riadkoch: 5,32:1 na bielej, 4,61:1 na medzníku */
	--line:       #dde3ea;
	--line-dk:    #c3ccd7;
	--tint:       #eef4fa;
	--white:      #ffffff;

	/* Rodiny zmien v doménovom zázname. Tri odtiene sú strop — štvrtý sa už
	   pri farbosleposti nedá odlíšiť (overené validátorom na všetkých pároch),
	   preto preregistrácia nedostáva odtieň, ale tmavú výplň so šrafou. */
	/* Červená témy. Nie je to kategória histórie domény — nesie ju hviezdička
	   povinného poľa, neplatný vstup, úbytok v rebríčku aj chyba platby. Musí
	   byť oddelená od --cat-*, inak by zmena farby kategórie prefarbila chyby. */
	--red:        #c22a4e;
	/* Výstražná farba témy — ikona VIP, upozornenie pri platbe, oznam
	   v objednávke. Tiež nie je kategóriou histórie domény. */
	--amber:      #a37b00;

	/* Bežná údržba je drvivá väčšina zápisov, preto je sivá — má ustúpiť.
	   Modrá je značková farba a dostáva ju to najhodnotnejšie, čo sa s doménou
	   môže stať: zmena držiteľa. */
	--cat-routine: #8b96a3;  /* bežná údržba — predĺženie, stav, DNS */
	--cat-admin:   #196eb4;  /* zmena správcu — registrátor */
	--cat-owner:   #d97706;  /* zmena držiteľa — vlastník, IČO */
	--cat-system:  #16202b;  /* systémová udalosť — preregistrácia SK-NIC */
	--cat-new:     #1c7a4d;  /* vznik registrácie a najstarší známy stav */
	--cat-end:     var(--red); /* zánik registrácie */

	--maxw: 78rem;
	--label-col: 11rem;

	--display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font: 400 1.0625rem/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.025em;
	margin: 0;
	line-height: 1.1;
}
p { margin: 0 0 1em; }
a { color: var(--platon); text-underline-offset: 2px; }
a:hover { color: var(--platon-dk); }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--platon); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; background: var(--deep); color: #fff; padding: .75rem 1.25rem; z-index: 60; }
.skip:focus { left: 0; top: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 1.75rem; }
/* Obsah stránky stojí buď v sekciách .grid, alebo v obyčajnom .wrap. Sekcia má
   padding-block, teda vzduch hore aj dole; .wrap má výplň len vodorovnú, takže
   produktovým a textovým stránkam pod obsahom nezostalo nič a od pätičky ich
   delil len jej vlastný odstup — 67 px proti 114 až 121 na sekciových.
   Dopĺňa sa preto výplň aj dole, a len na tom .wrap, ktorý je priamym dieťaťom
   main. Overené na všetkých 49 adresách: taký obal je na stránke vždy najviac
   jeden a na sekciových stránkach žiadny, takže medzeru medzi bloky pridať
   nemôže.
   Hodnota je nižšia než tá sekciová (3,25 rem) — s ňou to bolo priveľa. */
main > .wrap:not(.grid) { padding-bottom: 2rem; }

/* Zavesený raster: menovka vľavo, obsah vpravo. */
.grid {
	display: grid;
	grid-template-columns: var(--label-col) minmax(0, 1fr);
	gap: 0 3rem;
	padding-block: 3.25rem;
}
/* Linka oddeľuje dve susedné sekcie, takže sa kreslí len medzi nimi. Prvá
   sekcia nemá nad sebou čo oddeľovať — hranicu tvorí modrý pás, ktorý je
   navyše cez celú šírku, takže užšia linka pod ním pôsobila ako výbežok. */
.grid + .grid { border-top: 1px solid var(--line); }
/* Menovka sekcie sa láme vyvážene — inak na nej zostávajú riadky typu
   „Počet domén od" alebo „since beginning of". */
.grid-label {
	text-wrap: balance;
	font: 600 .75rem/1.3 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--platon);
}
.grid-label small { display: block; color: var(--grey-lt); font-weight: 400; letter-spacing: .04em; text-transform: none; margin-top: .4rem; }
.grid-body { min-width: 0; }
.grid-body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ hlavička */
.masthead { border-bottom: 1px solid var(--line); }
/* Vývojárske upozornenie pod menu, len na teste. Nesie jantárovú linku zľava
   ako platobné oznamy typu „pozor", ale zvyšok je tichý — je to poznámka pre
   vývojára, nie hlásenie pre návštevníka. */
.dev-notice {
	background: #fdf8ec;
	border-bottom: 1px solid var(--line);
	border-left: 3px solid var(--amber);
	font: 400 .8125rem/1.4 var(--body);
	color: var(--deep);
	padding: .55rem 0;
}
.masthead-in { display: flex; align-items: center; gap: 2rem; min-height: 4.5rem; }

/* Samostatne stojace odkazy majú mať dotykový cieľ aspoň 24 px na výšku
   (WCAG 2.2, kritérium 2.5.8). Dopĺňa sa zvislým odsadením, nie väčším písmom. */
/* Slovo je jedno, bez medzery, v jednom reze a jednej veľkosti — deliť ho smie
   iba farba. Jediný odstup v značke patrí štítku a je to jeho okraj, nie medzera
   v slove. Rozmery štítka sú v em, takže značka znesie zmenu veľkosti bez druhej
   sady pravidiel. */
.wordmark { display: flex; align-items: center; text-decoration: none; color: var(--ink); padding: .2rem 0; font-size: 1.625rem; }
.wordmark .a, .wordmark .b { font: 700 1em/1 var(--display); letter-spacing: -0.04em; }
.wordmark .a { color: var(--deep); }
.wordmark .b { color: var(--platon); }
.wordmark .badge {
	background: #e6eaf0; color: var(--grey); border-radius: .18em;
	font: 600 .5em/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
	padding: .42em .5em .38em; margin-left: .38em;
}

/* ------------------------------------------------------- testovacie prostredie
   Tri vrstvy, každá chytá iný spôsob, akým si človek všimne, kde je.
   Na produkcii sa nevykreslí ani jedna — trieda env-test tam na <body> nie je. */

/* 1. Predel pod záhlavím sčervenie. Túto vrstvu ani nečítaš, chytí ju
   periférne videnie skôr, než zaostríš — a na rozdiel od pruhu navrchu
   nepridáva do stránky nič nové, len prefarbí linku, ktorá tam už je.
   Preto sa ani nič neposunie. */
.env-test .masthead { border-bottom-color: var(--red); }

/* 2. Menovka vedľa značky. Nie je to logo, je to stav stránky, preto červená,
   verzálky a vlastný rámček. Odstup jej dáva medzera záhlavia. */
.envmark {
	flex: none;
	font: 600 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
	color: var(--red); border: 1px solid currentColor; border-radius: .2rem;
	padding: .38rem .45rem;
}


/* Zalomenie je poistka: desktopové menu potrebuje asi 715 px a hranica
   mobilného menu je 704 px, takže v úzkom pásme medzi nimi pretekalo.
   Zalomenie navyše znesie aj dlhšiu položku, keby do menu nejaká pribudla. */
.nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 2rem; }
.nav a {
	font: 500 .9375rem/1 var(--body);
	color: var(--ink);
	text-decoration: none;
	padding: .5rem 0;
	border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--platon); }
.nav a[aria-current="page"] { color: var(--platon); border-bottom-color: var(--platon); }

/* Prepínač jazyka. Stojí za menu samostatne, aby sa nepletol s navigáciou
   stránok. Web je dvojjazyčný, produkcia to má v záhlaví ako odkaz „english“. */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-left: 1.75rem;
	font: 500 .8125rem/1 var(--body);
	color: var(--grey);
	text-decoration: none;
	padding: .5rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.lang-switch:hover { color: var(--platon); border-bottom-color: var(--platon); }
/* Vlajka má vlastnú tenkú linku, inak by sa biely pruh stratil na bielom
   podklade. Nie je to ikona rozhrania, preto sa jej ťah nemení pri prejdení. */
.lang-flag {
	width: 1.125rem;
	height: .75rem;
	flex: none;
	box-shadow: 0 0 0 1px rgba(22, 32, 43, .18);
}

.nav-toggle {
	margin-left: auto; display: none;
	background: var(--white); border: 1px solid var(--line-dk); color: var(--deep);
	font: 600 .8125rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
	padding: .7rem .9rem; cursor: pointer;
}

/* --------------------------------------------------------------- modrý pás */
.band-blue { background: var(--deep); color: #fff; }
.band-blue a { color: #9dcdf2; }
/* Tlačidlá si v modrom páse držia vlastné farby — .band-blue a je špecifickejšie. */
.band-blue a.btn { color: #fff; }
.band-blue a.btn-light { color: var(--deep); }
.hero { padding-block: 5rem 4.5rem; }
.hero-eyebrow {
	font: 600 .75rem/1 var(--body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--platon);
	margin: 0 0 1.5rem;
}
.hero h1 {
	font-size: clamp(2.25rem, 6.2vw, 4.25rem);
	color: #fff;
	max-width: 22ch;
	text-wrap: balance;
	margin: 0 0 1.5rem;
}
/* Miera je 62ch, nie 48ch: slovenská veta je o pár slov dlhšia než anglická
   a pri 48ch sa lámala, hoci v páse je na ňu miesta dosť. Na jeden riadok sa
   tak zmestia obe mutácie a na úzkom displeji sa zalomí sama. */
.hero-sub { text-wrap: balance; color: #b9d4ea; font-size: 1.1875rem; max-width: 62ch; margin-bottom: 2.75rem; }

.search { max-width: 44rem; }
.search-row { display: flex; }
.search-row input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--line-dk);
	background: #fff;
	color: var(--ink);
	font: 400 1.1875rem/1 var(--body);
	padding: 1.1rem 1.25rem;
}
.search-row input::placeholder { color: var(--grey-lt); }
.search-row input:focus { outline: 3px solid var(--platon); outline-offset: -3px; }
.search-row button {
	flex: none;
	background: var(--platon);
	color: #fff;
	/* Rám je v základnej podobe kvôli výške: pole vedľa neho ho má tiež. */
	border: 1px solid var(--platon);
	font: 600 .9375rem/1 var(--body);
	letter-spacing: .04em;
	padding: 0 1.75rem;
	cursor: pointer;
}
.search-row button:hover { background: #2483cf; border-color: #2483cf; }
.search-hint { margin: 1rem 0 0; font-size: .9375rem; color: var(--grey-lt); }

/* Základná podoba týchto komponentov patrí bielemu podkladu — takých stránok
   je šesť, modrý pás je jeden. Keby pribudla siedma, dostane funkčnú podobu,
   nie tú, ktorá je čitateľná len v páse. Tu sa prepisuje len to, čo sa v páse
   naozaj líši: pole bez rámu a svetlé farby pre tmavé pozadie. */
.band-blue .hero-eyebrow { color: #78b6e8; }
.band-blue .search-row input { border: 0; }
.band-blue .search-row input:focus { outline-color: #78b6e8; }
.band-blue .search-row button { border: 0; }
.band-blue .search-hint { color: #9dbdd8; }

/* --------------------------------------------------------------- štatistika */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
/* Osamotený údaj nemá prečo stáť vo štvrtine šírky — menovka sa v takom
   stĺpci zlomí uprostred názvu služby. Týka sa /ziskane a výnosu SK-NIC. */
.figures:has(> :only-child) { grid-template-columns: 1fr; }
.figure-value {
	font: 600 clamp(1.75rem, 3.2vw, 2.75rem)/1 var(--display);
	letter-spacing: -0.035em;
	color: var(--deep);
}
.figure-label { font-size: .9375rem; color: var(--grey); margin-top: .6rem; line-height: 1.45; }

/* ------------------------------------------------------------------ oznamy */
.notices { display: grid; gap: 1.25rem; }
.notice { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.notices .notice:last-child { border-bottom: 0; padding-bottom: 0; }
.notice-date { font: 400 .8125rem/1.6 var(--mono); color: var(--grey-lt); }
.notice p { margin: 0; }
.notice b { font-weight: 600; }

/* ------------------------------------------------------------------ oznamy */
/* Položky pod sebou, oddelené linkou ako riadky inde v téme.

   Bez max-width. Bývalo tu 62ch, čo je pravidlo pre dlhé odstavce — tu je to
   škodilo: stĺpec má 968 px, strop ho zrezal na 645 a jednoriadkový oznam sa
   potom zalomil tak, že na druhom riadku ostali dve slová. Šírku už drží
   mriežka sekcie, druhý strop nad ňou netreba. */
.newslist { list-style: none; margin: 0; padding: 0; }
.newslist li { padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.newslist li + li { padding-top: 1rem; }
.newslist li:last-child { padding-bottom: 0; border-bottom: 0; }
.newslist b { font-weight: 600; }

/* Staršie oznamy pod rozbalením. Značka <summary> je pre prehliadač tlačidlo,
   takže si nesie prístupnosť aj klávesnicu sama a netreba k nej skript.
   Trojuholník necháme — je to zaužívaný znak, že sa tu dá rozkliknúť. */
.newsmore { margin-top: .85rem; }
/* Zvislé odsadenie je dotykový cieľ, nie ozdoba: samotný riadok má 23 px a to
   je pod hranicou 24 px. S ním má 36 px. Odstup nad blokom je o to menší,
   aby medzera medzi oznamom a menovkou opticky zostala rovnaká. */
.newsmore > summary { cursor: pointer; color: var(--platon);
	font: 500 .9375rem/1.5 var(--body); padding-block: .4rem; }
.newsmore > summary:hover { text-decoration: underline; }
/* Po otvorení potrebuje prvý starší oznam odstup od menovky, inak sa zlepia. */
.newsmore[open] > summary { margin-bottom: .85rem; }

/* ----------------------------------------------------------------- produkty */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { border: 1px solid var(--line); padding: 1.75rem; display: flex; flex-direction: column; position: relative; }
.card:hover { border-color: var(--platon); }
/* Klikateľná je celá karta. Odkaz ostáva jediným ovládacím prvkom, len sa
   cez ňu roztiahne — vnorený <a> v <a> by bol neplatný a čítačka by v karte
   našla dva ciele. Ohraničenie pri fokuse musí byť na karte, lebo samotný
   odkaz je len text v jej rohu. */
.card-link::after { content: ""; position: absolute; inset: 0; }
.card:focus-within { outline: 3px solid var(--platon); outline-offset: 2px; }
.card:focus-within .card-link { outline: none; }
.card-step { font: 400 .8125rem/1 var(--mono); color: var(--platon); margin-bottom: 1.25rem; }
.card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.card p { color: var(--grey); font-size: .9375rem; flex: 1 1 auto; }
.card-link { font: 600 .875rem/1.6 var(--body); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; align-self: flex-start; }

/* ------------------------------------------------------ graf štatistiky */
/* Počet domén v čase. Kreslí sa z dát, nie z PNG, takže je ostrý v každom
   rozlíšení a nepotrebuje ani knižnicu, ani cache obrázkov. Popisy osí sú
   HTML, nie text v SVG — inak by sa na mobile zmenšili na nečitateľné. */
.statchart { margin: 0; }
.sc-plot { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 .9rem; }
.sc-yaxis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	height: 13rem;
	font: 400 .75rem/1 var(--mono);
	color: var(--grey-lt);
}
.sc-area-box { height: 13rem; }
.sc-area-box svg { display: block; width: 100%; height: 100%; }
.sc-grid { stroke: var(--line); stroke-width: 1; }
.sc-area { fill: var(--tint); stroke: none; }
.sc-line { fill: none; stroke: var(--platon); stroke-width: 2; stroke-linejoin: round; }
.sc-xaxis {
	display: flex;
	justify-content: space-between;
	margin: .5rem 0 0 6.4rem;
	font: 400 .75rem/1 var(--mono);
	color: var(--grey-lt);
}
.statchart figcaption { margin-top: 1rem; }

@media (max-width: 34rem) {
	/* Os y ostáva zvislá aj na mobile — naležato by sa jej tri hodnoty čítali
	   ako popisy osi x. Zúži sa stĺpec a písmo, graf sa zníži. */
	.sc-plot { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0 .5rem; }
	.sc-yaxis, .sc-xaxis { font-size: .6875rem; }
	.sc-yaxis { height: 11rem; }
	.sc-area-box { height: 11rem; }
	.sc-xaxis { margin-left: 4.1rem; }
	/* Päť dátumov sa na úzky graf nezmestí, stačia krajné a stredný. */
	.sc-xaxis span:nth-child(2), .sc-xaxis span:nth-child(4) { display: none; }
}

/* -------------------------------------------------------------- abeceda */
.alpha { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Zvolená položka nie je odkaz, ale v pruhu stojí ako ostatné. */
.alpha a,
.alpha span[aria-current="page"] {
	display: grid; place-items: center;
	min-width: 2.75rem; height: 2.75rem; padding: 0 .5rem;
	border: 1px solid var(--line);
	font: 500 1rem/1 var(--body);
	color: var(--deep);
	text-decoration: none;
	text-transform: uppercase;
}
.alpha a:hover { background: var(--platon); border-color: var(--platon); color: #fff; }

/* ------------------------------------------------------------ zoznam domén */
.dlist { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 2rem; }
.dlist li { break-inside: avoid; margin-bottom: .5rem; }
.dlist a { font: 400 .9375rem/1.6 var(--mono); color: var(--ink); text-decoration: none; }
.dlist a:hover { color: var(--platon); text-decoration: underline; }

/* ========================================================== stránka domény */
.domain-hero { padding-block: 3.5rem 3rem; }
.domain-hero h1 { text-wrap: balance;
	font-size: clamp(2.25rem, 7vw, 3.75rem);
	color: #fff;
	margin: .75rem 0 1.75rem;
	word-break: break-word;
}
.domain-meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; margin-bottom: 2rem; }
.pill {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	font: 500 .875rem/1 var(--body);
	padding: .5rem .8rem;
}
.pill.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #58c07a; }
.domain-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
	display: inline-block;
	background: var(--platon); border: 2px solid var(--platon); color: #fff;
	text-decoration: none;
	font: 600 .9375rem/1 var(--body);
	padding: .9rem 1.5rem;
}
.btn:hover { background: #2483cf; border-color: #2483cf; color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--deep); }
.btn-light:hover { background: #e7f1f9; border-color: #e7f1f9; color: var(--deep); }
.btn-outline { background: transparent; border-color: var(--line-dk); color: var(--deep); }
.btn-outline:hover { background: var(--tint); border-color: var(--platon); color: var(--deep); }
.band-blue a.btn-onblue { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.band-blue a.btn-onblue:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Aktuálny záznam */
/* Záznam drží pohromade mriežka a verzálková menovka, nie linka pod každým
   poľom — tá v dvoch stĺpcoch vytvárala pruhy cez celú šírku. */
/* Dve súvislé skupiny vedľa seba: vľavo záznam v registri, vpravo menné
   servery. Riadok nesie menovku vľavo a hodnotu vpravo — vďaka tomu idú
   DNS 1 – 4 rovno pod sebou namiesto cikcaku cez dva stĺpce. */
.record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
.rec-group-title {
	font: 600 .75rem/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--platon);
	margin: 0 0 .9rem;
}
.rec-row {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: .35rem 1.5rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
}
.rec-group .rec-row:last-child { border-bottom: 0; }
.rec-key { font: 500 .75rem/1.5 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-lt); }
.rec-val { font: 400 1rem/1.5 var(--mono); word-break: break-word; }
/* Odkaz je celou hodnotou riadka, teda samostatný cieľ, a musí mať aspoň 24 px
   (WCAG 2.5.8). Zvislé odsadenie na vloženom prvku nemení výšku riadka. */
.rec-val a { padding-block: .1rem; }

/* --------------------------------------- signatúra: ročný záznam zmien */
.lifechart { margin: 0; }
/* Posúva sa len vodorovne. Bez zvislej hodnoty by ju prehliadač podľa
   špecifikácie odvodil ako auto a pri vodorovnom posuvníku by pribudol aj
   zvislý, hoci graf nikdy nepretečie nahor ani nadol. */
.lc-scroll { overflow-x: auto; overflow-y: hidden; }
.lc-inner { min-width: 0; }
.lc-plot {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	align-items: end;
	/* Podlaha pre doménu s jediným zápisom za rok, kde by inak graf klesol na
	   výšku jednej dlaždice. Nie rezerva nad bežnými dátami: mriežka
	   s align-items:end sa vyskladá podľa najvyššieho stĺpca sama a 9 rem
	   nechávalo nad šiestimi dlaždicami 56 px prázdna. */
	min-height: 3rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--line-dk);
}
.lc-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 1.5rem; }
/* Poradie v stĺpci musí sedieť so zoznamom pod grafom: najnovšie hore.
   column-reverse to otáčalo — najstaršia udalosť končila navrchu a stĺpec tak
   rástol proti smeru času. */
.lc-stack {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}
.lc-cell { display: block; height: 13px; background: var(--line-dk); }
.lc-cell.c1 { background: var(--cat-routine); }
.lc-cell.c2 { background: var(--cat-admin); }
.lc-cell.c3, .lc-key.c3 { background: var(--cat-owner); }
/* Systémová udalosť sa neodlišuje odtieňom, ale výplňou — čitateľná aj pri
   farbosleposti a v čiernobielej tlači. */
.lc-cell.c4 {
	background-color: var(--cat-system);
	background-image: repeating-linear-gradient(45deg,
		rgba(255, 255, 255, .5) 0 2px, transparent 2px 5px);
}
.lc-cell.c5, .lc-key.c5 { background: var(--cat-new); }
.lc-cell.c6, .lc-key.c6 { background: var(--cat-end); }
.lc-col:hover .lc-cell { outline: 2px solid var(--white); outline-offset: -2px; }
.lc-axis {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	margin-top: .55rem;
}
.lc-year { font: 400 .6875rem/1 var(--mono); color: var(--grey-lt); text-align: center; min-width: 1.5rem; }
.lc-year.mark { color: var(--ink); font-weight: 500; }

.lc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 1.5rem 0 0; padding: 0; }
.lc-legend li { display: flex; align-items: center; gap: .55rem; font-size: .875rem; color: var(--grey); }
.lc-key { width: 12px; height: 12px; flex: none; border-radius: 2px; }
.lc-key.c1 { background: var(--cat-routine); }
.lc-key.c2 { background: var(--cat-admin); }
.lc-key.c4 {
	background-color: var(--cat-system);
	background-image: repeating-linear-gradient(45deg,
		rgba(255, 255, 255, .5) 0 2px, transparent 2px 5px);
}

/* Tabuľkový výpis zmien.

   Bez linky navrchu a bez linky naspodku: sekcie oddeľuje .grid + .grid cez
   celú šírku, takže linka na kraji zoznamu ju len zdvojuje. Zoznam oznamov
   to má rovnako (.newslist li:last-child), rovnako aj .side-block a
   .summary-row — oddeľuje sa len to, čo je medzi položkami. */
/* Riadok dostáva podklad pri prejdení myšou, pri medzníku a pri najstaršom
   zázname. Vodorovný padding preto musí byť — inak sa podfarbenie končí na
   hrane textu. Záporný okraj vracia text do zákrytu s ostatným obsahom. */
/* Zvislá výplň sa ruší na zozname, nie na prvom zápise. Zmazať ju prvému
   zápisu by bolo jednoduchšie, ale jeho podfarbenie by potom sedelo na texte
   a od ostatných by sa líšil. Takto si každý zápis nechá rovnakú výplň aj
   rovnaké podfarbenie a text prvého z nich sedí s menovkou sekcie.
   Hodnota je premennou, aby sa nerozišla s výplňou nižšie. */
/* K výplni sa pripočítava 0,375 rem vzduchu, ktorý má dátum nad verzálkami.
   Cez text-box sa to spraviť nedá: .rev-kind je flexbox a .rev-changes drží
   mriežky, takže by vlastnosť zabrala len na dátume a ten by sedel 6 px nad
   druhom zmeny — teda horšie než pôvodný stav. Posúva sa preto celý zoznam,
   čím si tri stĺpce zápisu držia vzájomné zarovnanie. Hodnota je odmeraná
   na pixeloch; písmo dátumu má pevnú veľkosť, takže sa nemení. */
.revs {
	--rev-pad-y: 1.15rem;
	margin-top: calc(-1 * var(--rev-pad-y) - 0.375rem);
}
/* Zospodu to isté: výplň posledného zápisu sa ruší na zozname, nie na zápise,
   aby si aj on nechal rovnaké podfarbenie ako ostatné. Bez dorovnania na
   verzálky — tu nie je s čím zarovnávať, len sa odoberá priestor, ktorý mal
   oddeľovať dva zápisy.
   Selektor musí byť aspoň taký špecifický ako .grid-body > :last-child, inak
   ten okraj prebije na nulu. */
.grid-body > .revs { margin-bottom: calc(-1 * var(--rev-pad-y)); }
.rev {
	display: grid;
	grid-template-columns: 8rem 12rem minmax(0, 1fr);
	gap: 0 2rem;
	padding: var(--rev-pad-y, 1.15rem) 1rem;
	margin-inline: -1rem;
	align-items: start;
}
/* Linka patrí medzi dva zápisy, preto sedí na susedovi a nie na každom riadku.
   Tým odpadá aj linka nad prvým a pod posledným — a hlavne sa nekreslí tam,
   kde za zápisom nasleduje medzník: ten si linku nesie sám. */
.rev + .rev { border-top: 1px solid var(--line); }
.rev:hover { background: var(--tint); }

/* Veta namiesto zoznamu polí. Dátový stĺpec je v monospace, lebo vypisuje
   hodnoty; toto je text, preto si pýta bežné písmo — inak vyzerá ako údaj. */
.rev-plain { margin: 0; font: 400 .9375rem/1.55 var(--body); color: var(--grey); max-width: 52ch; }
.rev-date { font: 400 .9375rem/1.6 var(--mono); color: var(--ink); }
/* Štítok farby patrí k prvému riadku menovky, nie k jej zvislému stredu.
   Pri menovke na dva riadky by inak visel medzi nimi. Odsadenie zhora je
   polovica rozdielu výšky riadka (1,5 rem) a štítku (12 px). */
.rev-kind { display: flex; align-items: flex-start; gap: .55rem; font-size: .9375rem; color: var(--grey); }
.rev-kind .lc-key { border-radius: 2px; margin-top: .45rem; }
/* Spresnenie pod menovkou udalosti — drobnejšie, v zátvorke, vlastný riadok. */
.rev-sub { display: block; margin-top: .1rem; font-size: .8125rem; color: var(--grey-lt); }
.rev-changes { font: 400 .9375rem/1.7 var(--mono); }
.rev-change { display: grid; grid-template-columns: 9rem minmax(0, 1fr); overflow-wrap: anywhere; gap: .25rem 1rem; }
/* Názvy polí sú slová, nie údaje — zarovnáva ich mriežka, nie písmo. Monospace
   si pýtajú len hodnoty vedľa nich. Snímok záznamu to má rovnako: .rec-key
   bežným písmom, .rec-val monospace. */
.rev-field { font-family: var(--body); color: var(--grey-lt); }
.rev-old { color: #a03340; text-decoration: line-through; text-decoration-thickness: 1px; }
/* Šípka nesie smer zmeny, preto farbu textu, nie farbu linky. */
.rev-arrow { color: var(--grey-lt); padding: 0 .35rem; }
.rev-new { color: var(--ink); }
.rev.is-milestone { background: #eceff3; }
.rev.is-milestone:hover { background: #e3e8ee; }
.rev-note { margin-top: .5rem; font-family: var(--body); font-size: .875rem; color: var(--grey); }
.rev.is-origin { background: var(--tint); }


/* ======================================================== stránka produktu */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 0 4rem; align-items: start; }
.prod-main, .prod-side { min-width: 0; }
.table-scroll { overflow-x: auto; }
.prod-main { padding: 3rem 0 0; }
/* Posledný prvok nenesie koncový okraj — to isté už robí .grid-body aj
   .side-block. Bez toho končil text hlavného stĺpca o 14 px vyššie než text
   bočného: bočný blok to pravidlo má, hlavný stĺpec ho nemal, a spodky dvoch
   stĺpcov na produktovej stránke tak nesedeli. Výška stĺpca sa tým nemení. */
.prod-main > :last-child { margin-bottom: 0; }
.prod-main h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.5rem; }
/* Úvodný a bežný odsek majú rovnakú mieru. Zapísaná je v rem, nie v ch:
   ch je šírka nuly, takže rovnaká hodnota dá pri 20 px a pri 17 px inú
   šírku a odseky by sa opäť rozišli. 41,6 rem je presne tá šírka, akú mal
   bežný text doteraz — nehýbe sa, len sa naň zarovnal úvodný odsek. */
/* Miera textu platí pre všetko, čo je text: odsek aj zoznam. Bez zoznamov
   bežali odrážky cez celú šírku stĺpca, kým odseky vedľa nich boli užšie.
   Produkčné triedy .points a .letters sú v novej téme bez štýlu, sú to
   obyčajné zoznamy a miera sa ich týka tiež — preto sa nedá vyberať cez
   :not([class]). Vymenované sú naopak komponenty témy s vlastným rozložením. */
.prod-main .lead,
.prod-main > p,
.prod-main > ul,
.prod-main > ol { max-width: 41.6rem; }
/* Právna poznámka pod kontaktom: samostatné vety, každá na svojom riadku.
   Miera textového stĺpca ju lámala uprostred a druhý riadok zostával skoro
   prázdny. */
.prod-main > .legal p { max-width: none; margin-bottom: 0; }

.prod-main > .toc-list,
.prod-main > .qa-list,
.prod-main > .feat-plain,
.prod-main > .namelist,
.prod-main > .dlist { max-width: none; }
/* Zoznam vlastností. Položky sú celé vety, tak potrebujú medzi sebou vzduch. */
.feat-plain > li { margin-bottom: .6rem; }
.feat-plain > li:last-child { margin-bottom: 0; }
/* Podradený zoznam spresňuje položku nad sebou, nie je to samostatný výpočet.
   Nesie preto tlmenú pomlčku namiesto guľôčky a stojí v jednom zákryte
   s textom nadradenej položky, nie o úroveň hlbšie. */
.feat-sub { list-style: none; margin: .45rem 0 0; padding: 0; }
.feat-sub li { position: relative; padding-left: 1.1rem; margin-bottom: .2rem; }
.feat-sub li::before {
	content: "\2013";
	position: absolute; left: 0;
	color: var(--grey-lt);
}
.prod-main .lead { font-size: 1.25rem; line-height: 1.55; color: var(--deep); }
.prod-main p { color: var(--ink); }
/* Nadpisok si drží svoju farbu aj v textovom stĺpci: .prod-main p nastavuje
   farbu všetkým odsekom a je špecifickejšie než samotná trieda. Predtým to
   riešil vnútorný štýl v siedmich šablónach. */
.prod-main p.hero-eyebrow { color: var(--platon); }
.prod-main h2 {
	font-size: 1.5rem;
	margin: 3rem 0 1.5rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--ink);
}


/* Vlastnosti sú zoznam toho, čo je v cene zahrnuté, preto ich nesie
   odškrtnutie — nesie význam, nie dekoráciu. Popis má zavesené odsadenie,
   takže sa zarovná pod názov, nie pod háčik. */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3.5rem; }
.feat {
	display: grid;
	grid-template-columns: 1.3rem minmax(0, 1fr);
	gap: 0 .7rem;
	align-items: start;
}
/* Ikony objednávky v riadkoch zoznamov. Nahrádzajú basket.gif a basket-vip.png
   zo starého dizajnu. Rovnaký ťah ako .feat-icon, len menšie. VIP sa líši
   tvarom (iskra) aj farbou, nie len farbou. */

.feat-icon {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: .05rem;
	fill: none;
	stroke: var(--platon);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.feat h3 {
	grid-column: 2;
	font-family: var(--body);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0;
	color: var(--ink);
	margin: 0 0 .35rem;
}
.feat p { grid-column: 2; margin: 0; font-size: .9375rem; color: var(--grey); }

/* Zvislá medzera je malá zámerne: menovka nad sumou k nej patrí, nie je to
   ďalší blok. Vodorovná zostáva veľká, tá oddeľuje sumy od tlačidla. */
.pricehero { background: var(--tint); border-left: 4px solid var(--platon); padding: 1.75rem 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; }
.pricehero-net { font: 600 3rem/1 var(--display); letter-spacing: -0.04em; color: var(--deep); }
.pricehero-gross { font: 400 .875rem/1 var(--mono); color: var(--grey); margin-top: .5rem; }
/* Názov produktu menuje celý blok, nestojí v jednom rade so sumami. Kým bol
   štvrtou položkou riadka — za číslami a pred tlačidlom — čítal sa ako
   prívesok, nech mal akúkoľvek farbu. Vlastný riadok navrchu z neho robí
   menovku, čím vlastne je. */
.pricehero-desc { flex: 1 1 100%; margin: 0;
	color: var(--deep); font: 500 .9375rem/1.4 var(--body); }
/* Spojka medzi dvoma sumami na stránke VIP. Niesla tú istú triedu ako názov
   produktu, takže boli na nerozoznanie. Stačí jej, že sa neroztiahne. */
.pricehero-or { flex: 0 0 auto; margin: 0; color: var(--grey); font-size: .9375rem; }
/* Doteraz tlačidlo odtláčal doprava roztiahnutý názov produktu. Ten je už
   o riadok vyššie, tak si okraj musí vypýtať samo. */
.pricehero .btn { margin-left: auto; }

table.tbl { width: 100%; border-collapse: collapse; }
/* Hlavička tabuľky je podradená nadpisu sekcie. Kým mala jeho váhu
   (2px --ink), dve rovnaké linky nad sebou vytvárali pás, v ktorom menovky
   stĺpcov viseli pri spodnej hrane. Hierarchiu nesie hrúbka, nie výnimka. */
table.tbl th {
	text-align: left;
	font: 600 .75rem/1 var(--body);
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--grey-lt);
	padding: 0 1.5rem .8rem 0;
	border-bottom: 1px solid var(--line-dk);
}
table.tbl td { padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9375rem; }
table.tbl td:last-child, table.tbl th:last-child { padding-right: 0; }
table.tbl .num { text-align: right; white-space: nowrap; }
table.tbl .num b { font: 500 1rem/1.4 var(--mono); color: var(--deep); }
table.tbl .num small { display: block; font: 400 .75rem/1.5 var(--mono); color: var(--grey-lt); }
table.tbl .hint { color: var(--grey); }

.note { font-size: .875rem; color: var(--grey); max-width: 58ch; }
/* .note sa používa aj na <div>, keď reťazec nesie blokovú značku. */
div.note { margin-block: 1rem; }

.prod-side { padding: 3rem 0 0; position: sticky; top: 1.5rem; }

/* Obsah obchodných podmienok. Dvadsaťsedem sekcií sa scrollovaním nehľadá
   a vpravo pritom ostávalo prázdne miesto. Čísla sú súčasťou textu nadpisu,
   nie počítadla — preto tu nie je counter. */

/* Odstup zhora je margin, nie padding. .prod-side má padding-top 3rem, aby sa
   hore na stránke zarovnal s článkom — lenže padding je vnútri prilepeného
   rámu, takže po prilepení nad zoznamom ostával pás prázdna vysoký päť
   riadkov. Margin je mimo rámu: zarovnanie hore drží rovnako, na pixel
   s nadpisom článku, a po prilepení začína zoznam o 48 px vyššie. */
.toc-side { padding-top: 0; margin-top: 3rem;
	max-height: calc(100vh - 3rem); overflow-y: auto; }
.toc-side-title { font: 600 .75rem/1 var(--body); letter-spacing: .1em;
	text-transform: uppercase; color: var(--platon); margin-bottom: 1rem; }

/* Priestor pod poslednou položkou. Bez neho sa zoznam doscrolluje na koniec
   a posledné sekcie musia sedieť na spodnej hrane rámu — skript ich odtiaľ
   nemá kam posunúť. S ním si odstup udržia aj ony.

   Odsadenie zľava je miesto pre zvýrazňovač aktívnej položky. Musí byť
   vnútri rámu: overflow-y: auto nad ním robí orezávaciu oblasť, takže čokoľvek
   na zápornej pozícii sa nevykreslí. */
.toc-side ol { list-style: none; margin: 0; padding: 0 0 6rem .75rem; }
.toc-side li { position: relative; }
.toc-side li + li { margin-top: .2rem; }

/* Celý riadok je cieľ, nielen text — pri takomto úzkom stĺpci sa inak trafiť
   ťažko. */
.toc-side a { display: block; padding: .25rem .5rem .25rem 0;
	font-size: .8125rem; line-height: 1.4; color: var(--grey);
	text-decoration: none; }
.toc-side a:hover { color: var(--platon); }

/* Práve čítaná sekcia. Značí ju skript cez aria-current, takže to nie je len
   vzhľad — čítačka to oznámi rovnako. */
.toc-side a[aria-current] { color: var(--ink); font-weight: 600; }
.toc-side a[aria-current]::before {
	content: ''; position: absolute; left: -.75rem; top: .3rem; bottom: .3rem;
	width: 2px; background: var(--platon);
}

/* Cieľ kotvy. Bez odstupu doskočí nadpis presne na hranu okna a jeho
   podčiarknutie sa dotýka vrchu obrazovky. */
.prod-main h2[id] { scroll-margin-top: 2rem; }
/* Bočný stĺpec je podradený hlavnému; jeho predely nesmú mať rovnakú váhu
   ako 2px linky nadpisov sekcií, inak kričia rovnako nahlas. Linka sa navyše
   kreslí len medzi blokmi — nad prvým nie je čo oddeľovať a jej linka sa
   trafila tesne vedľa podčiarknutia v hlavnom stĺpci. */
.side-block { padding-top: 0; }
/* Spodný okraj posledného odseku by sa pripočítal k medzere pod blokom a linka
   by sa odsunula od textu, ku ktorému patrí. */
.side-block > :last-child { margin-bottom: 0; }
/* Nad linkou a pod ňou má byť rovnako; predtým bolo 2,5 rem nad a 1,25 pod,
   takže sa zdala prilepená k druhému bloku a medzera nad ňou zbytočne veľká. */
.side-block + .side-block { border-top: 1px solid var(--line); padding-top: 1.75rem; margin-top: 1.75rem; }
.side-block h2 { font: 600 .75rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--platon); margin-bottom: 1.25rem; }
.side-block p { font-size: .875rem; color: var(--grey); }
.side-block ul { list-style: none; margin: 0; padding: 0; }
.side-block li a { font: 400 .875rem/1.9 var(--mono); color: var(--ink); text-decoration: none; }
.side-block li a:hover { color: var(--platon); text-decoration: underline; }
/* Číslo a pruh mali rovnakú --platon, takže blok bol jednofarebná plocha
   a nebolo v ňom vidieť, čo je údaj a čo jeho znázornenie. Číslo preto ide
   do najtmavšej modrej: je to text, tma mu sadne (11,7:1 oproti 5,3:1) a
   prestane vyzerať ako odkaz. Pruh si značkovú modrú necháva — plocha farbu
   unesie a rozdiel dvoch odtieňov ten blok oživí. */
.bignum { font: 600 3rem/1 var(--display); letter-spacing: -0.04em; color: var(--deep); }
.meter { height: 10px; background: var(--line); margin: 1rem 0 .75rem; }
.meter span { display: block; height: 100%; background: var(--platon); }

/* ------------------------------------------------------------------- pätička */
.foot { background: var(--deep); color: #cfe0ee; margin-top: 4rem; padding: 3.5rem 0 3rem; }

/* Tieto pravidlá musia stáť AŽ ZA .hero-eyebrow. Heslo tú triedu zdieľa
   s nadpisokom na titulke, takže keby boli vyššie, .hero-eyebrow by ich
   prebilo dvakrát: farbou (--platon na tmavej pätke je kontrast 2,2 : 1,
   teda nečitateľné) aj spodným okrajom 1,5 rem, ktorý heslo v riadku
   vytlačí nahor a zarovnanie na stred prestane platiť. */
/* ---------------------------------------------------------- značka v pätke */
/* Značka vľavo, heslo vpravo. Riadok tak nekončí prázdnotou a heslo drží
   vlastný koniec, nie je prilepené na značku. Na úzkom sa zalomí pod ňu. */
.foot-brand {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem;
	padding-bottom: 1.75rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Heslo je tá istá vec ako nadpisok na titulke, tak je to tá istá trieda.
   Mení sa len to, čo sa líšiť musí: farba na tmavom a zarovnanie na koniec. */
.foot-tagline { margin: 0; color: #78b6e8; text-align: right; }
@media (max-width: 34rem) { .foot-tagline { text-align: left; } }
.foot .wordmark { color: #fff; }
.foot .wordmark .a { color: #fff; }
.foot .wordmark .b { color: #6fb3ea; }
.foot .wordmark .badge { background: rgba(255,255,255,.14); color: #d7e5f1; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.foot h3 { font: 600 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #78b6e8; margin: 0 0 1.1rem; font-family: var(--body); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .55rem; }
.foot li a { color: #cfe0ee; text-decoration: none; font-size: .9375rem; }
.foot li a:hover { color: #fff; text-decoration: underline; }
.foot-base {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
	margin-top: 3rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: .875rem; color: #9dbdd8;
}
/* Odkazy v spodnom riadku pätky dedia farbu textu. Platónska modrá na modrom
   podklade sa nedá prečítať a znížený kontrast by nesplnil ani AA; že ide
   o odkaz, nesie podčiarknutie. */
.foot-base a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.foot-base a:hover { color: #fff; }
.foot-base .powered { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
/* Logo je biele a priehľadné, takže na tmavej pätke stojí priamo — bez
   bielej podložky, ktorú potreboval starý GIF (modré písmo s okrajmi
   vyhladenými do bielej sa na tmavé pozadie položiť nedá). */
/* Biela pri plnej sile je jasnejšia než text pätky (#cfe0ee) aj než jej
   nadpisy (#78b6e8), takže kredit partnera kričí viac než vlastná značka.
   Priehľadnosť 0,78 dá bielej na podklade #0f3a5f zhruba svetlosť textu,
   a keďže je to odkaz, pri prejdení sa rozsvieti naplno. */
.foot-base .powered img { display: block; opacity: .78; transition: opacity .15s; }
.foot-base .powered a:hover img { opacity: 1; }

/* -------------------------------------------------------------- responzívne */
@media (max-width: 62rem) {
	.grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2.5rem; }
	.grid-label small { display: inline; margin-left: .5rem; }
	.prod { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.prod-side { position: static; padding-top: 0; margin-top: 3rem; }
	/* Obsah je pomôcka na orientáciu pri širokom okne; pod textom už nemá zmysel. */
	.toc-side { display: none; }
	.figures { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
	.cards { grid-template-columns: 1fr; }
	.dlist { columns: 3; }
	.foot-cols { grid-template-columns: repeat(2, 1fr); }
	.rev { grid-template-columns: 7rem 1fr; }
	.rev-changes { grid-column: 1 / -1; margin-top: .6rem; }
}

@media (max-width: 44rem) {
	body { font-size: 1rem; }
	.masthead-in { flex-wrap: wrap; }
	/* Pod touto hranicou spadne menu pod záhlavie a v prvom riadku ostanú
	   vedľa seba logo, prepínač jazyka a tlačidlo. Pri 360 px šírky je to
	   na hrane, preto sa značka vracia na pôvodných 21 px. Stačí jedno číslo,
	   zvyšok značky je v em a zmenší sa s ním. */
	.wordmark { font-size: 1.3125rem; }
	/* V prvom riadku stoja logo, menovka prostredia, prepínač a tlačidlo.
	   Menovka sa preto zmenší, inak sa trojica na 360 px nezmestí. */
	.envmark { font-size: .6875rem; padding: .3rem .35rem; }
	.nav { width: 100%; flex-direction: column; gap: 0; margin-bottom: 1rem; border-top: 1px solid var(--line); }
	.nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); }
	/* Zbaľovanie menu závisí od JavaScriptu, preto ho zapína až trieda js.
	   Bez skriptu by tlačidlo nič nerobilo a menu by sa nedalo otvoriť. */
	.nav-toggle { display: none; }
	.js .nav-toggle { display: block; }
	.js .nav { display: none; }
	.js .nav.open { display: flex; }
	/* Prepínač jazyka sa sťahuje do rozbaleného menu. Vedľa tlačidla stál
	   dovtedy, kým sa trojica zmestila na riadok — s menovkou prostredia sa
	   už nezmestí, záhlavie sa zalomí a prepínač ostane trčať sám v pravom
	   hornom rohu, odtrhnutý od tlačidla, ku ktorému patrí.
	   Bez skriptu sa menu nezbaľuje, tak tam prepínač ostáva viditeľný —
	   preto je skrytie viazané na triedu js. */
	.js .lang-switch { display: none; }
	.js .nav.open ~ .lang-switch {
		display: inline-flex;
		order: 4;
		width: 100%;
		margin: 0 0 1rem;
	}
	/* Vlajka sa pod 26 rem skrýva, lebo záhlavie tam bolo na hrane. V menu
	   je miesta dosť, tak sa vracia. */
	.js .nav.open ~ .lang-switch .lang-flag { display: block; }
	/* Poistka pre prípad, že sa záhlavie aj tak zalomí: min-height drží výšku
	   len dovtedy, kým je obsah na jednom riadku. Potom výška narastie a bez
	   tejto výplne sedelo tlačidlo priamo na deliacej linke.
	   Výplň sa do min-height počíta (box-sizing), takže nezalomené záhlavie
	   zostáva vysoké rovnako ako doteraz. */
	.masthead-in { gap: 1rem; padding-block: .85rem; }
	.wordmark    { order: 0; }
	.nav-toggle, .js .nav-toggle { order: 2; margin-left: auto; }
	.nav { order: 3; }
	.nav a[aria-current="page"] { border-bottom-color: var(--line); }

	.hero { padding-block: 3rem 2.5rem; }
	.search-row { flex-wrap: wrap; }
	.search-row input { flex: 1 1 100%; }
	.search-row button { width: 100%; padding: 1rem; }
	.figures { grid-template-columns: 1fr; gap: 1.5rem; }
	/* Bez liniek musí odstup medzi poľami zostať väčší než odstup menovky
	   od jej hodnoty, inak sa menovka opticky viaže na predchádzajúce pole. */
	.record { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.rec-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .6rem 0; }
	.feats { grid-template-columns: minmax(0, 1fr); }
	.notice { grid-template-columns: 1fr; gap: .25rem; }
	/* Dva stĺpce znesie zoznam len po istú šírku; pod ňou dlhé názvy typu
	   leteckaposta.sk pretlačia stĺpec a dotknú sa okraja obrazovky. */
	.dlist { columns: 2; }
}

/* Pravidlo pre šírky pod 360 px tu bolo kvôli prepínaču jazyka, ktorý stál
   v záhlaví vedľa tlačidla. Odkedy sa sťahuje do rozbaleného menu, zostáva
   v riadku len značka, menovka prostredia a tlačidlo — a to sa zmestí. */

@media (max-width: 26rem) {
	/* Vlajka je ozdoba a záhlavie je tu na hrane: wordmark, prepínač a tlačidlo
	   sa zmestia na riadok len tak-tak. Text prepínača nesie význam a ostáva. */
	.lang-flag { display: none; }
	.dlist { columns: 1; }
	.foot-cols { grid-template-columns: 1fr; }
	.rev { grid-template-columns: 1fr; gap: .4rem; }
	.rev-change { grid-template-columns: 1fr; gap: 0; }
	.rev-field { font-size: .8125rem; }
	.pricehero { padding: 1.5rem; }
	/* Graf sa na úzkom displeji posúva vodorovne, roky ostávajú čitateľné. */
	.lc-inner { min-width: 36rem; }
	.lc-year { font-size: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------- sadzba textu
   Nadpisy a krátke leady sa vyvažujú do rovnako dlhých riadkov,
   bežný text nenecháva osamotené slovo na poslednom riadku. */
h1, h2, h3, .lead { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Drobné písmo má vlastnú, užšiu mieru; musí prebiť pravidlo kontajnera,
   ktoré je špecifickejšie než samotná trieda .note. */

/* --------------------------------------------------- proklad pri zalomení */
.hero-eyebrow { line-height: 1.45; }
.btn, .grid-label { line-height: 1.3; }

@media (max-width: 26rem) {
	/* Značkový riadok radšej udržať na jednom riadku než rozbiť na dva. */
	.hero-eyebrow { letter-spacing: .09em; font-size: .6875rem; }
}

/* ------------------------------------------------- tabuľka na úzkom displeji
   Tri stĺpce sa do ~300 px nezmestia: názov služby sa láme na päť riadkov
   a poznámka sa oreže. Vodorovný posuv by nútil odsúvať kvôli čítaniu, preto
   sa riadok rozpadne na blok — názov, cena, poznámka pod sebou. */
@media (max-width: 34rem) {
	table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; }
	table.tbl { width: 100%; }
	/* Menovky stĺpcov sú v bloku zbytočné — obsah sa popisuje sám. */
	table.tbl thead { display: none; }

	table.tbl tr {
		padding: 1.15rem 0;
		border-bottom: 1px solid var(--line);
	}
	table.tbl tr:first-child { padding-top: 0; }
	table.tbl tr:last-child { border-bottom: 0; }

	table.tbl td { padding: 0; border: 0; }
	table.tbl td:first-child { font-weight: 600; margin-bottom: .45rem; }

	table.tbl .num { text-align: left; white-space: normal; margin-bottom: .45rem; }
	table.tbl .num small { display: inline; margin-left: .5rem; }

	table.tbl .hint { font-size: .875rem; }
}

.prod-main p.note { max-width: 50ch; }
/* Dvojica poznámok pod cenníkom. Stĺpce sú rovnako široké, takže miera textu
   vychádza z mriežky a nie z max-width — to by sa v užšom stĺpci neuplatnilo
   a len by bránilo druhému stĺpcu vyrovnať sa prvému. */
.notecols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.notecols .note, .prod-main .notecols p.note { max-width: none; margin: 0; }
/* Veta pod formulárom patrí k nemu a nie k textovému stĺpcu, takže sa drží
   šírky formulára a láme sa až vtedy, keď inak nejde. */
.note-wide, .prod-main p.note-wide { max-width: none; }

/* ==========================================================================
   Šablóny doplnené k pôvodným trom: objednávka, rebríček, textová stránka.
   Držia sa rovnakých pravidiel — linka oddeľuje sekcie, modrá patrí akcii,
   hierarchiu nesie váha a priestor.
   ========================================================================== */

/* Bloky v hlavnom stĺpci majú rovnakú mieru ako odseky, nech je pravý
   okraj jeden. Široká dátová tabuľka je výnimka, tá stojí vo vlastnej sekcii. */
.order, .toc, .qa-list { max-width: 41.6rem; }

/* ------------------------------------------------------------- formulár */
.fs { border: 0; padding: 0; margin: 2.5rem 0 0; }
.fs-title {
	font: 600 .75rem/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--platon);
	padding: 0 0 .75rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
	width: 100%;
}

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.5rem; }
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }

.field label {
	font: 600 .8125rem/1.4 var(--body);
	color: var(--ink);
	margin-bottom: .4rem;
}
.req { color: var(--red); text-decoration: none; margin-left: .2rem; font-weight: 600; }

.field input,
.field select,
.field textarea {
	font: 400 1rem/1.4 var(--body);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line-dk);
	padding: .7rem .8rem;
	width: 100%;
}
.field input::placeholder { color: var(--grey-lt); }
/* Pole predvyplnené prehliadačom si Chrome podfarbuje vlastnou farbou a bežnou
   deklaráciou background sa prebiť nedá. Tieň vo vnútri poľa ju prekryje. */
.field input:-webkit-autofill,
.field select:-webkit-autofill,
.field textarea:-webkit-autofill {
	box-shadow: inset 0 0 0 100px var(--white);
	-webkit-text-fill-color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: 3px solid var(--platon);
	outline-offset: -1px;
	border-color: var(--platon);
}
/* Chybový stav až po interakcii používateľa. Samotné :invalid by prázdne
   povinné pole označilo za chybné hneď po načítaní stránky. */
.field input:user-invalid,
.field select:user-invalid { border-color: var(--red); }
.input-short { max-width: 8rem; }
.field-hint { font-size: .8125rem; color: var(--grey); margin-top: .35rem; }

/* výber jednej možnosti — celý riadok je klikateľný */
.choices { display: grid; gap: .6rem; }
.choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0 .85rem;
	align-items: start;
	border: 1px solid var(--line);
	padding: .95rem 1.1rem;
	cursor: pointer;
}
.choice:hover { border-color: var(--platon); }
.choice:has(input:checked) { border-color: var(--platon); background: var(--tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--platon); outline-offset: 2px; }
.choice input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--platon); }
.choice-name { display: block; font-weight: 600; font-size: .9375rem; }
.choice-note { display: block; font-size: .8125rem; color: var(--grey); margin-top: .15rem; }
.choice-price { font: 500 .9375rem/1.4 var(--mono); color: var(--deep); white-space: nowrap; }
/* Značky platobných metód v treťom stĺpci voľby, na mieste ceny. Sú to cudzie
   obrázkové značky s rôznymi rozmermi, preto ich drží spoločná výška a nie
   šírka. Vypnutá voľba ich má do šeda — inak by farebné logo protirečilo
   prerušovanému rámu. */
.choice-logos { display: flex; align-items: center; gap: .4rem; }
.choice-logos img { display: block; height: 1.375rem; width: auto; }
.choice.is-off .choice-logos img { filter: grayscale(1); opacity: .5; }
/* Na úzkom displeji je voľba platby tesná: prepínač, názov a poznámka si berú
   celú šírku a značky by poznámku stlačili do troch riadkov. Blok musí stáť až
   za základným pravidlom — médiový dotaz nezvyšuje špecifickosť, takže skorší
   display:none by mu neskorší display:flex prebil. */
@media (max-width: 26rem) {
	.choice-logos { display: none; }
}

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .75rem; align-items: start; margin-top: 1.25rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--platon); }
.check span { font-size: .9375rem; color: var(--ink); }

.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--ink);
}
.form-actions .note { flex: 1 1 16rem; }

/* zhrnutie a kroky v bočnom stĺpci */
/* Linka patrí hranici medzi dvoma riadkami, nie riadku samotnému. Keď mal
   spodnú linku predchádzajúci riadok a hornú aj súčet, kreslili sa na jednej
   hranici dve linky pár pixelov od seba. Selektor + zabezpečí jednu. */
.summary { font-size: .9375rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.summary-row + .summary-row { border-top: 1px solid var(--line); }
.summary-price { font-family: var(--mono); white-space: nowrap; }
.summary-total { font-weight: 600; color: var(--deep); }
/* Súčet je iná úroveň než medzisúčty, preto silnejšia linka — a keďže je to
   ten istý prípad ako vyššie, musí mať rovnakú špecificitu a stáť nižšie. */
.summary-row + .summary-total { border-top: 1px solid var(--ink); padding-top: .7rem; }
.steps { margin: 0; padding-left: 1.1rem; font-size: .875rem; color: var(--grey); }
.steps li { margin-bottom: .45rem; }

/* --------------------------------------------------------- rebríček */
.page-title { font-size: clamp(1.9rem, 4.5vw, 2.75rem); margin: 0 0 1rem; }
/* Menovka sekcie a hlavný nadpis majú stáť na jednej linke. Ich boxy v mriežke
   začínajú na pixel rovnako, ale vykreslený text nie: nad verzálkami je vzduch
   úmerný veľkosti písma, takže menovka má nad nimi 2,9 px a nadpis 7,4 px
   a text nadpisu začínal o 5 px nižšie. Merané na pixeloch snímky.
   text-box posúva začiatok boxu na výšku verzálok, takže si ten vzduch
   dopočíta prehliadač sám pre každé písmo aj veľkosť — podstatné, lebo nadpis
   má clamp() a pevné posunutie by platilo len nad 1024 px. Kde vlastnosť
   chýba (Safari pod 18.2, Chrome pod 133), zostáva dnešný stav. */
.grid-label,
.page-title { text-box: trim-start cap; }
.page-lead { font-size: 1.0625rem; color: var(--grey); max-width: 62ch; }
/* Bez horného okraja: blok stojí ako prvý v tele sekcie a tie 2 rem ho
   odsúvali nižšie, než je menovka v ľavom stĺpci. */
.figures-3 { grid-template-columns: repeat(3, 1fr); }

.rank-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.rank-table th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--white);
	text-align: left;
	/* Bunky tabuľky sú predvolene zarovnané na stred, takže jednoriadkové
	   menovky plávali v strede vedľa dvojriadkovej. Spodok ich postaví na
	   jednu líniu nad linkou. */
	vertical-align: bottom;
	font: 600 .75rem/1.3 var(--body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grey-lt);
	padding: 0 1rem .7rem 0;
	border-bottom: 2px solid var(--ink);
	white-space: nowrap;
}
/* Odsadenie vpravo oddeľuje stĺpce, ale za posledným už nie je čo oddeliť —
   tam len odtláčalo obsah od konca linky, kým prvý stĺpec na ňu vľavo dosahoval.
   Tabuľka preto vyzerala posunutá. */
.rank-table th:last-child,
.rank-table td:last-child { padding-right: 0; }
.rank-table td { padding: .7rem 1rem .7rem 0; border-bottom: 1px solid var(--line); }
.rank-table tr:hover td { background: var(--tint); }
/* V monospace má medzera plnú šírku znaku, takže oddeľovač tisícov vyzeral
   ako zlom čísla na dve. Zúžim ho na optickú úzku medzeru. */
.rank-table th.num, .rank-table td.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.rank-table td.num { word-spacing: -.42ch; }
/* Zúženie platí len pre samotné číslo; menovka a prípona majú bežné medzery. */
.rank-table td.num::before,
.rank-table td.num::after { word-spacing: normal; }
/* Skóre má desatinnú čiarku a v Roboto Mono zaberá čiarka celú znakovú bunku
   ako číslica, takže „1,4" vyzerá ako „1 , 4". Tabulárne číslice v bežnom
   písme držia stĺpec v zákryte a čiarka je úzka. */
.rank-table td.score {
	font-family: var(--body);
	font-variant-numeric: tabular-nums;
	word-spacing: normal;
}
.rank-table th.rank, .rank-table td.rank { width: 3rem; color: var(--grey-lt); font-family: var(--mono); }
.rank-table td.name a { color: var(--ink); text-decoration: none; }
.rank-table td.name a:hover { color: var(--platon); text-decoration: underline; }
.rank-table td.total { color: var(--deep); font-weight: 500; }
/* prírastok a úbytok: farba aj znamienko, nie iba farba */
.rank-table td.up { color: #1d7a4c; }
.rank-table td.down { color: var(--red); }
.rank-table td.flat { color: var(--grey-lt); }
.rank-table td.none { color: var(--grey-lt); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }

/* --------------------------------------------------- textová stránka */
.toc { border: 1px solid var(--line); padding: 1.5rem 1.75rem; margin: 2.5rem 0 0; }
/* Nadpisy v obsahu a v otázkach sú vnorené, nie predely sekcií — preto
   nepreberajú 2px linku, ktorú má .prod-main h2. */
.toc-title { font: 600 .75rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
	color: var(--platon); margin: 0 0 1rem; padding: 0; border: 0; }
.toc-list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc-list li { counter-increment: toc; padding: .3rem 0 .3rem 2.25rem; position: relative; }
.toc-list li::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute; left: 0;
	font: 400 .8125rem/1.7 var(--mono);
	color: var(--grey-lt);
}
.toc-list a { color: var(--ink); text-decoration: none; }
.toc-list a:hover { color: var(--platon); text-decoration: underline; }

.qa-list { margin-top: 1rem; }
.qa { padding: 2rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.qa:last-child { border-bottom: 0; }
.prod-main .qa-q {
	border: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0 .5rem;
	font-size: 1.25rem;
	margin: 0 0 .85rem;
}
.qa-num { font: 400 .8125rem/1.9 var(--mono); color: var(--grey-lt); }
.qa-a { grid-column: 2; }
.qa-a p { margin: 0 0 .85rem; color: var(--ink); }
.qa-a p:last-child { margin-bottom: 0; }
.qa-top {
	display: inline-block;
	margin-top: 1rem;
	font: 600 .8125rem/1.7 var(--body);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 3px;
}

/* -------------------------------------------------------- responzívne */
@media (max-width: 62rem) {
	.figures-3 { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 44rem) {
	.fields { grid-template-columns: minmax(0, 1fr); }
	.field-full, .field-half { grid-column: 1 / -1; }
	.choice { grid-template-columns: auto minmax(0, 1fr); }
	.choice-price { grid-column: 2; margin-top: .35rem; }
	/* Tretí stĺpec tu neexistuje, značky preto patria pod text a nie pod
	   prepínač, kam by ich inak posunulo automatické umiestnenie. */
	.choice-logos { grid-column: 2; margin-top: .55rem; }
	.toc { padding: 1.25rem; }
	.qa-q { grid-template-columns: minmax(0, 1fr); gap: .2rem; font-size: 1.125rem; }
	.qa-num { line-height: 1.4; }
	.qa-a { grid-column: 1; }
	.table-count { margin-left: 0; }
	/* Sedem stĺpcov sa do 334 px nezmestí — 200 px tabuľky ostávalo mimo
	   obrazovky a dva stĺpce s prírastkami nebolo vidieť vôbec. Riadok sa
	   preto mení na kartu: poradie a názov navrchu, počet pod nimi
	   a štyri prírastky v mriežke 2 x 2 aj s menovkami. */
	.rank-table, .rank-table tbody, .rank-table tr, .rank-table td { display: block; }
	.rank-table thead { display: none; }
	.rank-table {
		font-size: .9375rem;
		display: grid;
		gap: 0;
	}
	.rank-table tr {
		display: grid;
		grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"rank name  name"
			"rank total total"
			".    d1    d2"
			".    d3    d4";
		column-gap: 1rem;
		row-gap: .1rem;
		padding: 1rem 0;
		border-bottom: 1px solid var(--line);
	}
	.rank-table tr:hover td { background: none; }
	/* .rank-table td.num zarovnáva doprava a je špecifickejšie než samotné
	   td — v karte musí byť všetko vľavo pod názvom. */
	.rank-table td,
	.rank-table td.num { padding: 0; border: 0; text-align: left; }

	.rank-table td.rank { grid-area: rank; font-size: .875rem; padding-top: .15rem; }
	.rank-table td.name { grid-area: name; font-weight: 600; }
	.rank-table td.total { grid-area: total; font-family: var(--mono); margin-bottom: .5rem; }
	.rank-table td.total::after { content: " domén"; font-family: var(--body); color: var(--grey); font-weight: 400; }

	.rank-table td:nth-of-type(4) { grid-area: d1; }
	.rank-table td:nth-of-type(5) { grid-area: d2; }
	.rank-table td:nth-of-type(6) { grid-area: d3; }
	.rank-table td:nth-of-type(7) { grid-area: d4; }
	.rank-table td.delta { padding-top: .45rem; }
	.rank-table td.delta::before {
		content: attr(data-label);
		display: block;
		font: 600 .625rem/1.7 var(--body);
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--grey-lt);
	}
}

/* Odkazy v bočnom stĺpci, ktoré nie sú doménami, idú bežným písmom. */
.side-links li a { font-family: var(--body); font-size: .9375rem; line-height: 1.7; }

/* Vypnutá voľba zostáva čitateľná — nestlmujem ju priehľadnosťou, ktorá by
   zhoršila kontrast, ale farbou textu a menovkou „Nedostupné“. */
.choice.is-off { cursor: not-allowed; background: var(--sheet, transparent); border-style: dashed; }
.choice.is-off:hover { border-color: var(--line); }
.choice.is-off .choice-name { color: var(--grey); font-weight: 600; }
.choice.is-off .choice-note { color: var(--grey); }
.choice.is-off input { cursor: not-allowed; }
.choice-badge {
	display: inline-block;
	margin-left: .55rem;
	padding: .1rem .45rem;
	border: 1px solid var(--line-dk);
	background: var(--white);
	font: 600 .625rem/1.6 var(--body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grey);
	vertical-align: 1px;
}

/* ------------------------------------------------------ abecedný register
   Mená sa sádžu do stĺpcov, ktorých počet si mriežka určí sama podľa šírky.
   Tok je po riadkoch, takže abecedné poradie sa číta zľava doprava. */
/* Záložky objednávkových formulárov. Tri rovnocenné voľby, text sa láme podľa
   šírky, vybraná nesie modrú linku aj podfarbenie — samotná farba textu by na
   rozlíšenie nestačila. Návrh ich nemá, kreslí len objednávkový formulár. */
.formtabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	margin: 1.75rem 0 2.25rem;
}
.formtabs a {
	display: block;
	padding: .85rem 1rem;
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	font: 500 .9375rem/1.45 var(--body);
	color: var(--grey);
	text-decoration: none;
}
.formtabs a:hover { border-color: var(--line-dk); color: var(--ink); }
/* Vybraná záložka nemení váhu písma. Tučné je širšie, takže menovka, ktorá
   sa vedľajším záložkám zmestí na riadok, by sa práve tej vybranej zalomila
   na dva — a text by pod kurzorom poskočil. Výber nesie podfarbenie, modrá
   linka a tmavšia farba, to sú tri signály aj bez štvrtého. */
.formtabs a[aria-current="page"] {
	background: var(--tint);
	border-color: var(--line);
	border-bottom-color: var(--platon);
	color: var(--deep);
}

/* Pruh filtrov. Abecedný pruh (.alpha) má pre každý znak rovnaký štvorček,
   čo je pri jednom písmene správne a pri „expirujúce do štyroch dní" nie —
   preto vlastný prvok. Výtvarne sa drží záložiek objednávky: rám, hrubšia
   spodná linka a modrá linka pri vybranej, len sa každý prvok šíri podľa
   svojho textu, nie do rovnakých stĺpcov. */
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.filterbar a,
.filterbar span[aria-current="page"] {
	display: block;
	padding: .6rem .9rem;
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	font: 500 .875rem/1.35 var(--body);
	color: var(--grey);
	text-decoration: none;
}
.filterbar a:hover { border-color: var(--line-dk); color: var(--ink); }
/* Vybraná voľba nie je odkaz, nesie ju span. Váhu písma nemení zámerne, viď
   poznámku pri .formtabs — text by pod kurzorom poskakoval. */
.filterbar [aria-current="page"] {
	background: var(--tint);
	border-bottom-color: var(--platon);
	color: var(--deep);
}

.alpha-nav { margin-top: 1.75rem; }
/* Menovka nad pruhom volieb. Sedí naň, nie na text nad sebou, tak si berie
   jeho horný odstup a pruhu ho uberá. */
.filter-label { font: 600 .75rem/1 var(--body); letter-spacing: .1em;
	text-transform: uppercase; color: var(--grey-lt);
	margin: 1.75rem 0 .7rem; }
.filter-label + .alpha-nav { margin-top: 0; }
/* Pruh filtrov si horný odstup neberie, drží ho menovka nad ním. */
.filterbar { margin-top: 0; }
.alpha [aria-current="page"] {
	background: var(--platon);
	border-color: var(--platon);
	color: #fff;
}

.namelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: .1rem 2rem;
}
.namelist a {
	display: block;
	padding: .2rem 0;
	font: 400 .9375rem/1.7 var(--mono);
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.namelist a:hover { color: var(--platon); text-decoration: underline; }
/* Poznámka za menom — na zadržaných deň výmazu. Je podradená menu, tak sedí
   pod ním a drobným písmom; v mriežke po 13 rem sa vedľa mena nezmestí. */
.namelist .nl-note {
	display: block;
	margin: -.2rem 0 .35rem;
	font: 400 .75rem/1 var(--body);
	color: var(--grey-lt);
}

@media (max-width: 44rem) {
	.namelist { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .1rem 1.25rem; }
	.formtabs { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
	.notecols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ---------------------------------------------------------------------------
   Tlač

   Prehliadače štandardne netlačia farebné pozadia, takže biely text v modrom
   páse a v pätke by na papieri zmizol. Preto sa tu pásy prevedú na biele
   s tmavým textom a ovládacie prvky, ktoré na papieri nemajú zmysel, sa skryjú.
   --------------------------------------------------------------------------- */
/* ==========================================================================
   Platba: rekapitulácia objednávky a oznamy o výsledku transakcie.
   Návrh tieto stránky nepokrýva, preto sa skladajú z dielov, ktoré téma už
   má — riadok záznamu, poznámka, tlačidlá. Vlastné je len stavové záhlavie.
   ========================================================================== */

/* Stav nesie ikona tvarom, farba ho len dopĺňa: oznam musí prečítať aj
   farboslepý čitateľ a čiernobiela tlačiareň. */
.payresult-head {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0 1.25rem;
	align-items: start;
	margin: 2rem 0 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--platon);
	background: var(--tint);
}
.payresult-head.warn { border-left-color: var(--amber); }
.payresult-head.err { border-left-color: var(--red); }
.pay-icon {
	width: 2.5rem;
	height: 2.5rem;
	fill: none;
	stroke: var(--platon);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pay-icon.warn { stroke: var(--amber); }
.pay-icon.err { stroke: var(--red); }
.payresult-title { margin: 0; font: 600 1.25rem/1.4 var(--display); color: var(--deep); }
.payresult-sub { margin: .35rem 0 0; color: var(--grey); }
.prod-main.payresult p.note { max-width: 58ch; }

/* Rekapitulácia je užšia než text stránky: sú to krátke dvojice, roztiahnuté
   cez celú mieru by sa menovka a hodnota od seba vzdialili. */
.payresult-rows { max-width: 36rem; margin: 0 0 2rem; }
.payresult-rows .bold { font-weight: 600; }
.payresult-rows .note { margin: .4rem 0 .6rem; font-family: var(--body); }
.payresult-rows .check { margin-top: .4rem; }
.incorrect { color: var(--red); font-size: .875rem; margin-left: .5rem; }
.order-message { border-left: 3px solid var(--amber); padding-left: 1rem; }

.pay-actions { margin: 2.5rem 0 .75rem; gap: 1rem; }
.pay-actions form { margin: 0; }

/* Logá platobných značiek. Sú to cudzie obrázkové značky s vlastnými
   rozmermi, preto ich drží mriežka a nie pevná výška. */
.paylogos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}
.paylogos img { display: block; max-width: 100%; height: auto; }

/* Oznam počas presmerovania na platobný portál. Prekrytie sa zjaví až po
   odoslaní formulára, bez skriptu sa neobjaví vôbec a stránka funguje. */
#waitbox {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	padding: 1.75rem;
	background: rgba(22, 32, 43, .75);
}
#waitbox[hidden] { display: none; }
.waitbox-in {
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--platon);
	padding: 2rem;
	max-width: 32rem;
}
.waitbox-in h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.waitbox-in p { margin: 0; color: var(--grey); }
.waitbox-dots { display: flex; gap: .4rem; margin-top: 1.25rem !important; }
.waitbox-dots span {
	width: .5rem;
	height: .5rem;
	background: var(--platon);
	animation: waitpulse 1.2s infinite ease-in-out;
}
.waitbox-dots span:nth-child(2) { animation-delay: .2s; }
.waitbox-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes waitpulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.waitbox-dots span { animation: none; opacity: .6; }
}

@media (max-width: 44rem) {
	.payresult-head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ==========================================================================
   Karty subjektu a registrátora, zoznamy domén, hľadanie.
   Rovnaké diely ako inde — riadok záznamu, mriežka mien, poznámka — plus
   dve drobnosti, ktoré tu vznikajú prvý raz.
   ========================================================================== */

/* Údaj, ktorý si subjekt neželá zverejniť, alebo ktorý odstránilo GDPR.
   Nie je to chýbajúca hodnota, je to hodnota zámerne zamlčaná, preto stojí
   v riadku a nie je vynechaná. */
.rec-muted { font-style: normal; color: var(--grey-lt); font-family: var(--body); font-size: .9375rem; }

/* Vysvetlivky pod tabuľkou údajov. Odrážky sú drobné, text je poznámka. */
.gdpr-note { margin: 2rem 0 0; padding-left: 1.1rem; max-width: 58ch; }
.gdpr-note li { margin-bottom: .4rem; }

/* Odkaz na úplný zoznam pod vzorkou domén. */
.list-all { margin-top: 1.25rem; }

@media print {
	body { font-size: 11pt; }
	/* Šírka A4 je pod hranicou 44rem, takže pri tlači platia mobilné pravidlá.
	   Preto sa tlačidlo menu skrýva rovnako špecificky ako .js .nav-toggle. */
	.skip, .nav, .search-row, .pager, .powered { display: none; }
	.nav-toggle, .js .nav-toggle { display: none; }

	.band-blue, .foot { background: #fff; color: #000; }
	.band-blue a, .foot a, .foot li a { color: #000; }
	.hero h1, .domain-hero h1 { color: #000; }
	.hero-sub, .foot li { color: #333; }
	.hero { padding-block: 0 2rem; }

	/* Štítky stavu stoja na priesvitnom bielom podklade, ktorý sa nevytlačí. */
	.pill { background: none; border-color: #666; color: #000; }
	.alpha [aria-current="page"] { background: none; border-color: #000; color: #000; }

	/* Tlačidlá sú na papieri mŕtve, ostáva z nich len text. */
	.btn, .btn-light, .btn-outline, .band-blue a.btn, .band-blue a.btn-light {
		background: none; border: 1px solid #000; color: #000;
	}

	/* Oznam o platbe je doklad, ktorý si zákazník tlačí. Podfarbenie sa
	   nevytlačí, stav preto na papieri nesie ikona a linka vľavo. */
	.payresult-head { background: none; }
	#waitbox { display: none; }

	/* Riadok tabuľky ani zápis histórie sa nemá roztrhnúť medzi dve strany. */
	tr, .rec-row, .qa, .field, .choice { break-inside: avoid; }
	h1, h2, h3 { break-after: avoid; }
	.grid { break-inside: auto; }
}