/* kolik.cz — styl 2026. Systémová písma (žádné externí zdroje), světlý i tmavý režim,
   breakpointy 480 / 720 / 1024 px, tabulky se pod 720 px mění na karty. */

:root {
  --c-brand: #e8890c;          /* "kolik" — oranžová z původního loga */
  --c-brand-ink: #a85a00;      /* oranžová pro text na světlém pozadí (kontrast) */
  --c-blue: #1f5f9a;           /* ".cz" a nadpisy — modrá z původního webu */
  --c-blue-2: #2f8fd0;
  --c-blue-ink: #145586;
  --hdr-1: #f4fbff;            /* záhlaví: světle modrá jako na starém webu */
  --hdr-2: #bfe2f6;
  --c-good: #12804a;
  --c-good-bg: #e6f5ec;
  --c-warn: #8a5300;
  --c-warn-bg: #fff4e0;
  --bg: #f2f0d9;                /* krémové pozadí stránky jako dřív */
  --surface: #ffffff;
  --surface-2: #f7fafc;
  --text: #13283a;
  --muted: #5a6b7b;
  --line: #dde6ee;
  --focus: #2f8fd0;
  --radius: 16px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(19, 40, 58, .06), 0 8px 24px rgba(19, 40, 58, .08);
  --wrap: 1120px;
  --gutter: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-brand: #f5a33a;
    --c-brand-ink: #f5a33a;
    --c-blue: #4fa6e3;
    --c-blue-2: #1e5f91;
    --c-blue-ink: #8cc7f2;
    --hdr-1: #10273a;
    --hdr-2: #183c59;
    --c-good: #5fd39a;
    --c-good-bg: #12352a;
    --c-warn: #f3c27a;
    --c-warn-bg: #3a2a10;
    --bg: #0c151e;
    --surface: #132130;
    --surface-2: #172839;
    --text: #e6edf3;
    --muted: #9db0c1;
    --line: #243a4e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
a { color: var(--c-blue-ink); text-underline-offset: 2px; }
a:hover { color: var(--c-brand-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
h2 { font-size: 1.15rem; }
p { margin: 0 0 .75em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-s); }

/* ---------------------------------------------------------------- záhlaví (inspirované starým webem: světle modrá hlavička
   s počítadlem, silný oranžovo-žlutý pruh se třemi záložkami) */
.site-header { background: linear-gradient(180deg, var(--hdr-1) 0%, var(--hdr-2) 100%); color: var(--c-blue-ink); }
.header-row { display: flex; align-items: center; gap: 12px 28px; padding-top: 14px; padding-bottom: 6px; min-height: 120px; position: relative; overflow: hidden; }
.brand { text-decoration: none; flex: none; }
.brand-word { font-size: clamp(2.6rem, 1.9rem + 3vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 4px 10px rgba(80,60,0,.25); }
.bw-kolik { color: var(--c-brand); -webkit-text-stroke: 1px var(--c-brand-ink); }
.bw-cz { color: var(--c-blue); }
.tagline { margin: 0; flex: 1; font-size: clamp(1.15rem, .9rem + 1.6vw, 2.3rem); line-height: 1.05; color: var(--c-blue); font-weight: 500; }
.tagline .tl-1 { display: block; font-size: 1.25em; }
.tagline .tl-2 { display: block; padding-left: 2.2em; }
.abacus { width: clamp(150px, 18vw, 220px); height: auto; flex: none; margin-right: -8px; filter: drop-shadow(0 6px 8px rgba(0,40,80,.25)); }
@media (max-width: 719px) {
  .header-row { min-height: 0; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 10px; }
  .abacus { position: absolute; right: -30px; top: 6px; width: 130px; opacity: .35; pointer-events: none; }
  .tagline { flex: 1 1 100%; font-size: 1.1rem; position: relative; }
  .tagline .tl-1, .tagline .tl-2 { display: inline; font-size: 1em; padding-left: 0; }
}

.stripe { background: linear-gradient(180deg, #ffd65a 0%, #f6a816 55%, #e9920b 100%); border-top: 2px solid #fff3c4; box-shadow: inset 0 -3px 0 rgba(150,80,0,.25); }
@media (prefers-color-scheme: dark) { .stripe { background: linear-gradient(180deg, #a8730f 0%, #8a5a07 100%); border-top-color: #c9922a; } }
.tabs { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; flex-direction: column; align-items: center; flex: 0 1 190px; min-width: 120px; text-align: center;
  padding: 8px 14px; border-radius: 12px; text-decoration: none; line-height: 1.15;
  color: #6a4a00; background: linear-gradient(180deg, #fffbe9 0%, #fbe5a6 100%);
  border: 1px solid #e8b44a; box-shadow: 0 2px 0 rgba(140,80,0,.25);
}
.tab:hover { color: #4a3300; background: linear-gradient(180deg, #ffffff 0%, #fde9b4 100%); }
.tab-label { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.tab-sub { font-size: .82rem; }
.tab.is-active { color: #3d2a00; background: linear-gradient(180deg, #ffe08a 0%, #f2b02a 100%); border-color: #c98a12;
  box-shadow: inset 0 2px 4px rgba(120,70,0,.35); }
@media (prefers-color-scheme: dark) {
  .tab { color: #ffe9b0; background: rgba(0,0,0,.18); border-color: rgba(255,220,140,.35); box-shadow: none; }
  .tab:hover { color: #fff; background: rgba(0,0,0,.28); }
  .tab.is-active { color: #2a1c00; background: linear-gradient(180deg, #ffd770 0%, #f0a925 100%); border-color: #ffd770; }
}
@media (max-width: 479px) { .tab { min-width: 0; flex: 1 1 0; padding: 7px 6px; } .tab-label { font-size: .82rem; } .tab-sub { font-size: .68rem; } }

/* ---------------------------------------------------------------- karty */
main { padding-top: 22px; padding-bottom: 32px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}
@media (min-width: 720px) { .card { padding: 24px 28px; } }

/* ---------------------------------------------------------------- kalkulačka */
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nameday { margin: 0; color: var(--muted); font-size: .9rem; text-align: right; }
.nameday span { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 719px) { .nameday { text-align: left; } .nameday span { display: inline; } .nameday span::after { content: " · "; color: var(--muted); font-weight: 400; } }

.calc {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .calc { grid-template-columns: auto minmax(140px, 1fr) minmax(200px, 1.4fr) auto; align-items: end; }
  .field-hint { grid-column: 1 / -1; }
}
.seg { display: inline-flex; border: 0; margin: 0; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; min-width: 0; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 16px; border-radius: 999px; text-align: center; font-weight: 600; white-space: nowrap; color: var(--muted); }
.seg input:checked + span { background: var(--c-blue); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select {
  font: inherit; font-size: 1.1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 11px 12px; width: 100%; max-width: 100%; min-height: 48px;
}
.field input { font-weight: 700; font-family: var(--font); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.field-hint { margin: 0; font-size: .85rem; color: var(--muted); }

.btn { font: inherit; font-weight: 700; border: 0; border-radius: var(--radius-s); padding: 12px 20px; min-height: 48px; cursor: pointer; }
.btn-primary { background: var(--c-brand); color: #1c1200; }
.btn-primary:hover { filter: brightness(1.05); }
.js .calc .btn-primary { display: none; }            /* s JavaScriptem se přepočítává hned */

/* ---------------------------------------------------------------- výsledek */
.summary { text-align: center; }
.summary-lead { color: var(--muted); margin-bottom: 4px; }
.summary-lead strong { color: var(--text); }
.summary-big { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); font-weight: 800; color: var(--c-blue-ink); margin: 0; letter-spacing: -.02em; }
.summary-who { margin-bottom: 12px; }
.summary-save { display: inline-block; background: var(--c-good-bg); color: var(--c-good); padding: 8px 14px; border-radius: 999px; margin: 0 0 8px; }
.note { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-s); font-size: .92rem; text-align: left; }
.note-tip { background: var(--c-good-bg); color: var(--c-good); }
.note-tip a { color: inherit; font-weight: 700; }
.note-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.note-muted { background: var(--surface-2); color: var(--muted); }
.meta { color: var(--muted); font-size: .85rem; margin: 12px 0 0; }

/* ---------------------------------------------------------------- tabulky */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; background: var(--surface-2); }
thead tr:first-child th:first-child { border-top-left-radius: var(--radius-s); }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius-s); }
.c-name, .c-cur, th.c-name { text-align: left; white-space: normal; }
th[scope=colgroup] { text-align: center; border-bottom: 1px solid var(--line); }
.cur-mul { display: none; color: var(--muted); font-size: .85rem; }
.c-rank { width: 2.5em; text-align: center; color: var(--muted); }
.c-czk { font-weight: 700; }
.cmp tbody tr:hover { background: var(--surface-2); }
.cmp .is-best { background: color-mix(in srgb, var(--c-good-bg) 70%, transparent); }
.cmp .is-best .c-czk { color: var(--c-good); }
.cmp .is-own .c-name a { font-weight: 700; }
.cmp .is-stale td { color: var(--muted); }
.cmp .is-stale .c-name a { color: var(--muted); }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--c-good); color: #fff; }
.cur { font-family: var(--mono); font-weight: 700; }
.cur-name { color: var(--muted); font-size: .88rem; }
.up { color: var(--c-good); }
.down { color: #c0392b; }
@media (prefers-color-scheme: dark) { .down { color: #ff8a7a; } }

/* tabulka -> karty pod 720 px */
@media (max-width: 719px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody tr { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  tbody th, tbody td { border: 0; padding: 2px 0; text-align: left; white-space: normal; }
  tbody td::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .cmp .c-rank { display: none; }
  .cmp .c-name { grid-column: 1 / -1; font-size: 1.05rem; }
  .cmp .c-name::before, .rl .c-cur::before { display: none; }
  .cmp .c-czk { font-size: 1.15rem; }
  .rl .c-cur { grid-column: 1 / -1; }
  .rl td.c-mul { display: none; }
  .cur-mul { display: inline; }
}

/* ---------------------------------------------------------------- kurzovní lístky */
.lists { display: grid; gap: 16px; }
.lists .card { margin-bottom: 0; }
.lists > * { min-width: 0; }             /* jinak vodorovný seznam institucí roztáhne mřížku na mobilu */
@media (min-width: 1024px) {
  .lists { grid-template-columns: 260px 1fr; align-items: start; }
  .lists #cnb { grid-column: 2; }
  .inst-list { grid-row: span 2; position: sticky; top: 16px; }
}
.inst-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.inst-list a { display: block; padding: 8px 12px; border-radius: var(--radius-s); text-decoration: none; color: var(--text); }
.inst-list a:hover { background: var(--surface-2); }
.inst-list a.is-active { background: var(--c-blue); color: #fff; font-weight: 700; }
@media (max-width: 1023px) {
  .inst-list ul { flex-direction: row; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .inst-list a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
}
.ext { font-size: .85rem; font-weight: 600; margin-left: 8px; }
.rl td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- vysvětlivky */
.explain { display: grid; gap: 16px; }
@media (min-width: 720px) { .explain { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.explain .card { margin: 0; }
.explain p, .prose p { color: var(--muted); }
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.2em; }

/* ---------------------------------------------------------------- patička */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); font-size: .88rem; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; }
.footer-links a { color: var(--muted); }

@media print {
  .site-header { background: none; color: #000; padding-bottom: 0; }
  .tabs, .calc, .site-footer .footer-links { display: none; }
  main { margin-top: 0; }
  .card { box-shadow: none; border: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .summary-big { transition: color .2s; }
}

/* ---------------------------------------------------------------- barvy převzaté ze starého webu (panely zůstávají) */
h1 { color: var(--c-blue); text-transform: uppercase; letter-spacing: .01em; }
h1 em, h1 .hl { color: var(--c-brand-ink); font-style: normal; }
.hero { background: linear-gradient(180deg, var(--surface) 0%, var(--calc-bg) 100%); border-color: var(--calc-line); }
.calc { background: var(--calc-bg); border: 1px solid var(--calc-line); border-radius: var(--radius-s); padding: 12px; }
.summary-big { color: var(--c-brand-ink); }
.summary-lead strong { color: var(--c-brand-ink); }
thead th { background: var(--surface); color: var(--c-blue-ink); border-bottom: 2px solid var(--c-blue-2); }
.cmp tbody tr:nth-child(even), .rl tbody tr:nth-child(even) { background: var(--row-alt); }
.cmp .c-name a, .rl .c-cur { color: var(--c-blue-ink); font-weight: 700; }
.cmp .is-own { background: var(--own-bg) !important; }
.cmp .is-own .c-name a { color: var(--own-ink); }
.card { border-color: var(--card-line); }
:root { --calc-bg: #dcf0fb; --calc-line: #b9dcf0; --row-alt: #eef8fd; --own-bg: #fbf1d6; --own-ink: #c0261b; --card-line: #c9e2f1; }
@media (prefers-color-scheme: dark) { :root { --calc-bg: #15324a; --calc-line: #24506f; --row-alt: #162a3c; --own-bg: #3a2e12; --own-ink: #ffb0a6; --card-line: #243a4e; } }

.hero-head h1 { flex: 1 1 520px; min-width: 0; }
.hero-head .nameday { flex: 0 0 auto; }

/* zkratky v záhlaví tabulek (Nás. = násobek) — bez tečkovaného podtržení, vysvětlení v title */
th abbr[title] { text-decoration: none; cursor: help; }