/* One file, tokens first. Dark mode follows the system; no JS, no external resources. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #16181d;
  --muted: #5a6270;
  --line: #d9dde4;
  --accent: #1f4fd8;
  --accent-text: #ffffff;
  --ok: #17663a;
  --warn-bg: #fff4d6;
  --warn-text: #5c4300;
  --alert-bg: #fde8e8;
  --alert-text: #7a1717;
  --urgent: #a31d1d;
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-1-ink: #1d5fb8;
  --chart-2-ink: #b34a1c;
  --radius: 10px;
  --tap: 2.75rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101216;
    --surface: #181b21;
    --text: #eceef2;
    --muted: #a3abb8;
    --line: #2e333c;
    --accent: #7ea2ff;
    --accent-text: #0b1220;
    --ok: #6fd69a;
    --warn-bg: #3a2f10;
    --warn-text: #ffe29a;
    --alert-bg: #3d1a1a;
    --alert-text: #ffb4b4;
    --urgent: #ff9a9a;
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-1-ink: #7db0f2;
    --chart-2-ink: #f2956a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-bottom: 3rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 10; }
a { color: var(--accent); }
.brand a { color: inherit; text-decoration: none; }
.brand a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; min-height: 3.5rem; }
.top-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.top-nav a, .link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .75rem; color: var(--text); text-decoration: none; border-radius: 6px; font: inherit; }
.top-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.link { background: none; border: 0; cursor: pointer; color: var(--muted); }
.inline { display: inline; margin: 0; }
h1 { font-size: 1.75rem; margin: 1.5rem 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.125rem; margin: 0 0 .5rem; }
.lead { margin: 0 0 1rem; }
.lead p { margin: .25rem 0; }
.lead-main { font-size: 1.25rem; font-weight: 600; }
.lead-ok { color: var(--ok); }
.lead-late { display: block; font-size: 1rem; font-weight: 400; color: var(--urgent); }
.lead-warn { color: var(--warn-text); background: var(--warn-bg); padding: .5rem .75rem; border-radius: 6px; }
.refresh { margin: 0 0 1.25rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card, .quick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.card-unconfigured { background: transparent; border-style: dashed; }
.quick { margin-top: 1rem; }
.count { font-weight: 600; margin: 0 0 .5rem; }
.items, .links { list-style: none; margin: 0; padding: 0; }
.items li { padding: .5rem 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.items li a { min-height: 1.5rem; }
.items time { color: var(--muted); font-size: .9rem; }
.urgent { color: var(--urgent); font-weight: 700; font-size: .9rem; }
.muted { color: var(--muted); margin: .25rem 0; }
.more { display: inline-flex; align-items: center; min-height: var(--tap); }
.warn { background: var(--warn-bg); color: var(--warn-text); padding: .5rem .75rem; border-radius: 6px; margin: .25rem 0 .5rem; }
.alert { background: var(--alert-bg); color: var(--alert-text); padding: .5rem .75rem; border-radius: 6px; margin: .25rem 0; }
.ok { color: var(--ok); font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: .5rem; }
.links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.form { display: grid; gap: .5rem; max-width: 30rem; }
.form label { font-weight: 600; margin-top: .5rem; }
.form label.check { display: flex; align-items: center; gap: .5rem; min-height: var(--tap); font-weight: 400; }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; min-height: var(--tap); padding: .5rem .75rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--muted); border-radius: 6px; }
.btn { min-height: var(--tap); padding: 0 1.25rem; font: inherit; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; margin-top: .75rem; }
.actions .inline { display: flex; }
.actions .inline .btn { flex: 1; }
.context { margin: 0 0 1rem; color: var(--muted); font-weight: 600; }
.actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; margin-top: 1rem; }
@media (min-width: 40rem) { .actions { flex-direction: row; align-items: center; } }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 0; }
.btn-secondary { margin-top: 0; color: var(--text); background: transparent; border: 1px solid var(--muted); }
.google-wrap { max-width: 30rem; margin: 1rem 0 .25rem; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--tap); padding: 0 1.25rem; font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--muted); border-radius: 6px; text-decoration: none; }
.btn-google:hover { border-color: var(--text); }
.google-g { flex: none; }
.divider { max-width: 30rem; text-align: center; margin: .75rem 0; }
.steps { padding-left: 1.25rem; margin: .5rem 0; }
.qr { width: 14rem; max-width: 100%; margin: 1rem 0; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.qr svg { display: block; width: 100%; height: auto; }
.secret code, .codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; }
.secret { margin: .25rem 0 1rem; overflow-wrap: anywhere; }
.codes { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .25rem .75rem; }
.codes li { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; }
input.code-input { width: 100%; min-height: var(--tap); padding: .5rem .75rem; font: inherit; font-size: 1.25rem; letter-spacing: .12em; color: var(--text); background: var(--surface); border: 1px solid var(--muted); border-radius: 6px; }
/* Enrolment key to copy: a readonly field (works without script) and a button that the script shows. */
.copy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 1rem; }
.copy label, .copy-status { flex-basis: 100%; }
.copy-status { min-height: 1.25rem; color: var(--ok); }
input.secret-input { flex: 1 1 14rem; min-width: 0; min-height: var(--tap); padding: .5rem .75rem; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--surface); border: 1px solid var(--muted); border-radius: 6px; overflow-wrap: anywhere; }
details.uri { margin: .5rem 0 1rem; }
details.uri summary { cursor: pointer; }

/* Card "Návštěvnost": the SVG is drawn on the server; colors, dashes and type come from classes (CSP allows no style attribute). */
.card-wide { grid-column: 1 / -1; }
.card-wide + .card-wide { margin-top: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; }
.card-head h2 { margin: 0; }
.range { display: flex; gap: .25rem; }
.range a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; }
.range a.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.legend { list-style: none; margin: 0 0 .25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend-periods { color: var(--muted); font-size: .9rem; }
.swatch { width: 1.75rem; height: .75rem; flex: none; overflow: visible; }
.chart-box { margin: .5rem 0; }
.chart { display: block; width: 100%; height: auto; }
.chart-view { position: relative; touch-action: pan-y; }
.chart-view:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.chart-view-wide { display: none; }
@media (min-width: 36rem) { .chart-view-wide { display: block; } .chart-view-narrow { display: none; } }
.panel[hidden] { display: none; }
.tc-grid line { stroke: var(--line); stroke-width: 1; }
.tc-grid .tc-base { stroke: var(--muted); }
.tc-xlab text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.tc-axis text { font-size: 12px; font-family: inherit; }
.tc-ink1, .tc-ink1 text { fill: var(--chart-1-ink); }
.tc-ink2, .tc-ink2 text { fill: var(--chart-2-ink); }
.tc-axis-title { font-weight: 600; font-size: 12.5px; }
.tc-axis-line { stroke-width: 1.5; }
.tc-hover, .tc-tip { display: none; }
.tc-hover.on, .tc-tip.on { display: inline; }
.tc-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tc-ghost { fill: var(--surface) !important; stroke-width: 2 !important; }
circle.tc-ghost { stroke: var(--chart-1) !important; }
rect.tc-ghost { stroke: var(--chart-2) !important; }
.tc-tip-bg { fill: var(--surface); stroke: var(--muted); stroke-width: 1; }
.tc-tip text { font-size: 12.5px; font-family: inherit; fill: var(--text); }
.tc-tip .tc-tip-title { font-weight: 700; }
.tc-tip .tc-tip-before { fill: var(--muted); }
.tc-tip .tc-ink1 { fill: var(--chart-1-ink); font-weight: 600; }
.tc-tip .tc-ink2 { fill: var(--chart-2-ink); font-weight: 600; }
.tc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-prev { stroke-dasharray: 5 4; stroke-opacity: .55; stroke-width: 1.75; }
.tc-s0 { stroke: var(--muted); }
path.tc-s1, line.tc-s1 { stroke: var(--chart-1); }
path.tc-s2, line.tc-s2 { stroke: var(--chart-2); }
circle.tc-s1, rect.tc-s1 { fill: var(--chart-1); stroke: var(--surface); stroke-width: 1.5; }
circle.tc-s2, rect.tc-s2 { fill: var(--chart-2); stroke: var(--surface); stroke-width: 1.5; }
.tc-hit { fill: transparent; }
.tc-hit:hover { fill: var(--line); fill-opacity: .35; }
.chart-data summary { cursor: pointer; display: flex; align-items: center; min-height: var(--tap); }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { padding: .3rem .5rem; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table-wrap thead th { color: var(--muted); font-weight: 600; }
.table-wrap .num { text-align: right; }
.note { font-size: .9rem; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }