/* Akciovník, the current look. Loaded after style.css, style-port.css and blocks.css and kept out of their cascade layers, so every rule here wins.
   What it changes: a 16 px root with middle sizes, one centred column of about 1200 px without the side rail, a header that scrolls away and
   carries the eight sections as words, the partner beside the title, hubs as small tables, the home page's lists by section.
   Colour: navy band, white panels on a tinted page, the brand's red only as the mark of where you are, the partner's green only on its button. */

:root {
  --t1: .84375rem; --t2: .9375rem; --t3: 1rem; --t4: 1.125rem; --t5: 1.375rem; --t6: 1.5rem;
  --t7: clamp(1.625rem, 1.2rem + 1.5vw, 2.125rem);
  --t-card: 1rem;
  --gut: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --bar: 0px; --tabs: 0px; --max: 78rem;
  --zone: 2.25rem; --beat: .75rem;
  --r: .625rem; --r-s: .5rem;
  --plate-z: 2.25rem; --ctl: 2.75rem; --btn-h: 3rem;
  --panel-shadow: 0 1px 2px rgb(16 35 60 / .06);
}
@media (min-width: 760px) {
  :root { --gut: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right)); --zone: 2.75rem; --beat: 1rem; --ctl: 2.5rem; --btn-h: 2.875rem; }
}
html { font-size: 100%; scroll-padding: .75rem 0; }
@media (min-width: 1800px) { html { font-size: 106.25%; } }
body { padding-bottom: 0; }

/* ---------------------------------------------------------------- header: two rows, never sticky */
.a-top { position: static; }
.a-top-row { gap: .5rem; min-height: 3.5rem; }
.a-logo { font-size: 1.25rem; }
.a-logo-m { width: 1.625rem; height: 1.625rem; fill: #fff; }
.a-logo-m rect:last-child { fill: var(--accent); }
.a-search { max-width: 30rem; }
.a-search-in { height: 2.75rem; }
.a-toplinks { display: flex; align-items: center; gap: .125rem; margin-left: auto; flex: none; }
.a-toplink { font-size: var(--t2); min-height: 2.75rem; }
.a-toplink-w, .a-toplinks [data-theme-toggle] { display: none; }
.a-toplink-m { border: 1px solid rgb(255 255 255 / .28); padding-inline: .75rem; font-weight: 600; }
.a-mainnav { display: none; border-top: 1px solid rgb(255 255 255 / .12); }
.a-mainnav ul { display: flex; gap: .125rem; max-width: var(--max); margin: 0 auto; padding: 0 calc(var(--gut) - .75rem); list-style: none; }
.a-mainnav a { position: relative; display: flex; align-items: center; height: 2.875rem; padding-inline: .75rem; color: var(--band-ink); font-size: var(--t2); font-weight: 600; white-space: nowrap; transition: background-color .12s; }
.a-mainnav a:hover { background: var(--band-2); }
.a-mainnav a.a-cur::after, .a-mainnav a[aria-current]::after { content: ""; position: absolute; inset: auto .75rem 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--accent); }
.a-mainnav a:focus-visible { outline-offset: -3px; }
@media (min-width: 760px) {
  .a-top-row { gap: 1rem; min-height: 4rem; }
  .a-logo { font-size: 1.375rem; margin-right: .5rem; }
  .a-toplinks [data-theme-toggle] { display: inline-flex; }
}
@media (min-width: 1000px) {
  .a-mainnav { display: block; }
  .a-toplink-w { display: inline-flex; }
  .a-toplink-m { display: none; }
}
.a-pop { inset: 4.25rem max(12px, calc((100vw - var(--max)) / 2 + var(--gut))) auto auto; max-height: calc(100dvh - 5rem); }

/* ---------------------------------------------------------------- page: one centred column */
.a-shell, .a-shell:not(.a-shell--read) { display: block; max-width: var(--max); padding: .75rem var(--gut) 0; }
.a-p-home .a-shell { padding-top: .75rem; }
@media (min-width: 760px) { .a-shell, .a-shell:not(.a-shell--read), .a-p-home .a-shell { padding-top: 1.25rem; } }
.a-toc, .a-p-text .a-toc { position: static; }

/* title, then the partner across the width of the table, then the neighbours. Owner, 2026-11-13: not beside the title, which left a big empty space under it. */
.a-head { display: block; }
.a-crumbs a { min-height: 2.25rem; }
@media (min-width: 760px) { .a-crumbs a { min-height: 1.75rem; } }
.a-crumbs li[aria-current] { font-weight: 400; }
.a-title h1 { margin-top: .25rem; }
.a-here { min-height: 0; margin-bottom: .25rem; font-size: var(--t2); line-height: 1.45; }
.a-answer { max-width: 44rem; margin-top: .625rem; font-size: 1.0625rem; line-height: 1.5; }
.a-near { max-width: 44rem; margin-top: .5rem; color: var(--ink-2); font-size: var(--t2); line-height: 1.5; text-wrap: pretty; }
.a-near a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--post); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.a-near a:hover { text-decoration-color: currentColor; }
/* the partner: one low row of the table box, between its bar and the column heads (owner, 2026-11-13: the panel was too big).
   Logo, the button with the offer, a small "Reklama", eToro's risk line with the way to the bonus conditions.
   In a narrow box: logo and "Reklama" on one line, the button, the line. On a hub without a table it is the same row as its own panel. */
.a-ad { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo tag" "btn btn" "t t"; align-items: center; gap: .5rem .75rem; margin: 0; padding: .75rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--card-2); box-shadow: none; }
:where(.a-ad) :where(p) { margin: 0; }
.a-ad-logo { grid-area: logo; display: block; width: 5.25rem; height: 1rem; color: #075434; color: light-dark(#075434, #6DFF8A); }
.a-ad-r { grid-area: tag; justify-self: end; padding: .125rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: .75rem; line-height: 1.4; }
.a-ad .a-btn { grid-area: btn; width: 100%; min-height: 3rem; justify-content: space-between; font-size: var(--t2); }
.a-ad .a-partner-t { grid-area: t; color: var(--ink-2); font-size: var(--t1); line-height: 1.35; }
.a-ad .a-partner-t a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* rotation (theme-init.js sets data-ad on the root before the first paint): the page carries the eToro and the XTB row, one shows; without a script eToro */
.a-ad[data-ad="xtb"], :root[data-ad="xtb"] .a-ad[data-ad="etoro"] { display: none; }
:root[data-ad="xtb"] .a-ad[data-ad="xtb"] { display: grid; }
.a-ad-logo--xtb { display: inline-flex; align-items: center; gap: .375rem; width: auto; height: auto; color: var(--ink); font-size: 1.125rem; font-weight: 800; line-height: 1; }
.a-ad-logo--xtb img { width: 1.5rem; height: 1.5rem; border-radius: .25rem; }
/* a tablet: logo, button and "Reklama" in one line, the risk line under them; a computer: all four in one row */
@container tbox (min-width: 40rem) {
  .a-tbox .a-ad { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo btn tag" "t t t"; gap: .5rem 1rem; padding: .625rem 1rem; }
  .a-tbox .a-ad .a-btn { justify-self: start; width: auto; min-height: 2.75rem; }
}
@container tbox (min-width: 62rem) {
  .a-tbox .a-ad { grid-template-columns: auto auto auto minmax(16rem, 1fr); grid-template-areas: "logo btn tag t"; gap: 1rem; }
}
/* outside a table: under the title's sentence on a hub, and in the phone menu, as its own small panel */
.a-head > .a-ad, .a-partner--menu { border: 1px solid var(--line); border-radius: var(--r); }
.a-head > .a-ad { margin-top: 1rem; }
@media (min-width: 680px) {
  .a-head > .a-ad { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo btn tag" "t t t"; gap: .5rem 1rem; margin-top: 1.25rem; padding: .625rem 1rem; }
  .a-head > .a-ad .a-btn { justify-self: start; width: auto; min-height: 2.75rem; }
}
@media (min-width: 1100px) {
  .a-head > .a-ad { grid-template-columns: auto auto auto minmax(16rem, 1fr); grid-template-areas: "logo btn tag t"; gap: 1rem; }
}
@media (max-width: 619px) {
  .a-answer { font-size: 1rem; }
  .a-tbox { margin-top: .875rem; }
}
.a-lead { margin-block: 1rem 0; }

/* ---------------------------------------------------------------- the table: a white panel, middle rows, name and value strong */
.a-tbox { margin-top: 1.25rem; box-shadow: var(--panel-shadow); overflow-anchor: none; }
.a-tbar { padding: .5rem; }
.a-seg input:checked + span { background: var(--seg, #10233C); color: #fff; }
@supports (color: light-dark(#000, #fff)) { :root { --seg: light-dark(#10233C, #2F5486); } }
/* ETF on a phone: fund names are long, so the overview keeps the name and the day; the price has its own view */
@container tbox (max-width: 33rem) {
  .a-tbox:has(input[value="prehled"]:checked) .atl-etf:has(thead th.atl-c-price:nth-child(2)) { --h2: none; }
  .a-tbox .atl-etf tbody th { font-size: .875rem; }
}
.atl thead th { height: 2.5rem; background: var(--card-2); }
.a-tbox .atl thead th:first-child { background: var(--card-2); }
.atl td { height: 3rem; }
.a-sort { min-height: 2.5rem; }
/* "Dividendový výnos" and "Tržní kapitalizace (Kč)" may take two lines in a narrow box rather than widen it */
.atl thead th:is(.atl-c-yield, .atl-c-value) { white-space: normal; line-height: 1.15; }
@container tbox (min-width: 44rem) { .atl .atl-c-value { width: 9.25rem; } }
@container tbox (min-width: 44rem) {
  .atl thead th { height: 2.5rem; }
  .atl td { height: 2.625rem; }
  .atl tbody th { padding-block: .3125rem; }
}
.atl:has(thead th.atl-c-value:nth-child(2)) td:nth-child(2),
.atl:has(thead th.atl-c-value:nth-child(3)) td:nth-child(3),
.atl:has(thead th.atl-c-value:nth-child(4)) td:nth-child(4),
.atl:has(thead th.atl-c-value:nth-child(5)) td:nth-child(5),
.atl:has(thead th.atl-c-value:nth-child(6)) td:nth-child(6),
.atl:has(thead th.atl-c-value:nth-child(7)) td:nth-child(7) { font-weight: 600; }
.a-more { min-height: 2.75rem; }

/* ---------------------------------------------------------------- hub: each group a white panel with a small table */
.a-hgs { margin-top: 1.5rem; }
@media (min-width: 1000px) { .a-hgs { columns: 2; column-gap: 1.5rem; } }
.a-hg { break-inside: avoid; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--panel-shadow); overflow: clip; }
.a-hg > h2 { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem .625rem; font-size: var(--t4); line-height: 1.25; letter-spacing: 0; }
.a-hg > h2 .a-plate { width: 2rem; height: 2rem; }
.a-hg > h2 .a-plate > .a-i { width: 1.125rem; height: 1.125rem; }
.a-ht { width: 100%; border-collapse: collapse; font-size: var(--t2); line-height: 1.25; }
.a-ht thead th { padding: .3125rem .5rem; border-block: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); font-size: var(--t1); font-weight: 400; text-align: end; white-space: nowrap; }
.a-ht thead th:first-child { padding-left: 1rem; text-align: start; }
.a-ht thead th:last-child:not(:first-child) { white-space: normal; line-height: 1.15; }
@media (min-width: 760px) { .a-ht thead th:last-child:not(:first-child) { min-width: 8.5rem; } }
.a-ht :is(th, td):last-child { padding-right: 1rem; }
.a-ht tbody tr + tr { border-top: 1px solid var(--line); }
.a-ht tbody tr:hover { background: var(--hover); }
.a-ht tbody th { padding: 0; text-align: start; font-weight: 600; }
.a-ht tbody th a { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .375rem .5rem .375rem 1rem; }
.a-ht tbody th a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.a-ht tbody th .a-i { width: 1.125rem; height: 1.125rem; color: var(--ink-2); }
.a-ht tbody th .a-flag { width: 1.25rem; height: .9375rem; }
.a-ht tbody th small { display: block; margin-top: .125rem; color: var(--ink-2); font-weight: 400; line-height: 1.3; }
.a-ht td { width: 1%; padding: 0 .5rem; text-align: end; white-space: nowrap; }
.a-ht-v { font-weight: 600; }
@media (min-width: 760px) { .a-ht tbody th a { min-height: 2.625rem; } }
@media (max-width: 619px) {
  .a-hg > h2 { padding-inline: .75rem; }
  .a-ht thead th:first-child, .a-ht tbody th a { padding-left: .75rem; }
  .a-ht :is(th, td):last-child { padding-right: .75rem; }
  .a-ht td, .a-ht thead th { padding-inline: .375rem; }
  .a-ht tbody th a { gap: .5rem; }
}
@media (max-width: 419px) { .a-ht :is(th, td):nth-child(2) { display: none; } }
.a-hl { padding: 0 0 .25rem; }
.a-hl li + li { border-top: 1px solid var(--line); }
.a-hl a { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .375rem 1rem; font-size: var(--t2); font-weight: 600; }
.a-hl a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.a-hl .a-i { width: 1.125rem; height: 1.125rem; color: var(--ink-2); }
.a-hg > .a-hl:first-child { padding-top: .25rem; }

/* ---------------------------------------------------------------- home: the biggest lists of each section */
.a-doors { margin-top: var(--zone); }
.a-doors-n { margin: .25rem 0 1rem; color: var(--ink-2); font-size: var(--t2); }
.a-doors-g { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.a-door { display: flex; flex-direction: column; padding: .875rem 1rem .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--panel-shadow); }
.a-door h3 { font-size: var(--t4); }
.a-door h3 a { display: flex; align-items: center; gap: .625rem; }
.a-door h3 a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.a-door h3 .a-plate { width: 2rem; height: 2rem; }
.a-door h3 .a-plate > .a-i { width: 1.125rem; height: 1.125rem; }
.a-door-d { margin: .5rem 0 .5rem; color: var(--ink-2); font-size: var(--t1); line-height: 1.4; }
@media (min-width: 620px) { .a-door-d { min-height: 2.8em; } }
.a-door ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.a-door li a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; border-bottom: 1px solid var(--line); font-size: var(--t2); line-height: 1.25; }
@media (min-width: 760px) { .a-door li a { min-height: 2.375rem; } }
.a-door li a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.a-door-c { color: var(--ink-2); font-size: var(--t1); }
.a-door-all { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; margin-top: auto; padding-top: .375rem; color: var(--link); font-size: var(--t1); font-weight: 600; }
.a-door-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.a-door-all .a-i { width: 1rem; height: 1rem; }
/* phone: the header shows no sections there, so each section is one short panel with its name, its sentence and the way in */
@media (max-width: 619px) {
  .a-doors-n, .a-door ul { display: none; }
  .a-doors h2 { margin-bottom: .75rem; }
  .a-doors-g { gap: .625rem; }
  .a-door { padding: .75rem .875rem .25rem; }
  .a-door-d { margin-bottom: 0; }
}
.a-col > .a-map { margin-top: var(--zone); }

/* ---------------------------------------------------------------- under the table */
.a-sec--flat h3 { margin-block: 1.25rem .375rem; font-size: var(--t3); }
.a-rel { min-height: 3rem; }
.a-rel .a-plate { width: 2rem; height: 2rem; }
.a-rel .a-plate > .a-i { width: 1.125rem; height: 1.125rem; }
@media (min-width: 760px) { .a-rel { min-height: 2.75rem; } }
.a-info { gap: 1.5rem 2.5rem; }

/* touch: every link and control at least 44 px high on a phone and on any touch screen (owner's list, 2026-11-13) */
@media (max-width: 759px), (pointer: coarse) {
  .a-crumbs a { min-height: 2.75rem; }
  .a-foot-nav li a, .a-foot-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .a-door h3 a, .a-door-all { min-height: 2.75rem; }
  .a-copyable { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .a-sec-tt h2 a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* the old text's own partner block right under a short table: the block at the title is the page's one (a_head_partner) */
.atl-cta.a-cta-dup { display: none; }

/* the partner label behind a partner link written as plain words */
.a-aff { color: var(--ink-2); font-size: var(--t1); font-weight: 400; }
.a-aff--line { display: block; margin-top: .25rem; line-height: 1.4; }
/* the find field in a table: focus in ink, red is the colour of a fall */
.a-find input:focus-visible { outline-color: var(--ink); }