/* Vizualni identita prevzata z DIG CONTEST.dc.html (Claude Design) */
:root {
  --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d;
  --color-accent: #c67139; --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-700: #645c50;
  --color-accent-100: #fff2eb; --color-accent-400: #f6a06b; --color-accent-700: #8c491a; --color-accent-800: #643312;
  --color-accent-2-100: #f0fae1; --color-accent-2-800: #3d472b;
  /* Fraunces nahradilo Caprasimo (jediny rez 400, faux bold rozbijel hacky) */
  --font-heading: "Fraunces", system-ui, serif;
  --font-heading-weight: 600;
  --font-body: "Figtree", system-ui, sans-serif;
  --radius-md: 16px; --radius-lg: 28px;
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-wrap: balance; }
/* Fraunces potrebuje explicitni rez vsude, kde Caprasimo stacilo v zakladnim */
.nav-title, .nav-tag, .btn, .btn-link, .eyebrow, .stat-num, td.call, td.mult,
td.run, td.fix, .summary .score, .nav-link, .foot { font-weight: var(--font-heading-weight); }
h1 { font-size: 46px; margin: 0 0 8px; }
h2 { font-size: 32px; margin: 0 0 4px; }
a { color: var(--color-accent); }

/* --- nav --- */
.nav {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 40px; border-bottom: 1px solid var(--color-divider);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nav-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(var(--color-accent) 0deg 250deg, var(--color-accent-2) 250deg 360deg);
  display: flex; align-items: center; justify-content: center;
}
.nav-mark::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg); }
.nav-title { font-family: var(--font-heading); font-size: 19px; }
.nav-link {
  font-family: var(--font-heading); font-size: 13px;
  color: inherit; text-decoration: none;
}
.nav-link:hover { color: var(--color-accent); }
.nav-tag {
  margin-left: auto; font-size: 12px; font-family: var(--font-heading);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* --- layout --- */
.container { max-width: 1180px; margin: 0 auto; padding: 40px; }
.container.narrow { max-width: 560px; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-700); font-family: var(--font-heading); margin-bottom: 6px;
}
.chip {
  display: inline-flex; align-items: center; font-size: 11px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--color-accent); color: var(--color-accent);
}
.muted { opacity: 0.7; }

/* --- buttons --- */
.btn {
  font-family: var(--font-heading); font-size: 14px; cursor: pointer;
  background: var(--color-accent); color: var(--color-bg); border: none;
  padding: 12px 22px; border-radius: 999px;
}
.btn:hover { background: var(--color-accent-700); }
.btn-block { width: 100%; }
.btn-link {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: 12px; color: var(--color-accent);
}

/* --- upload --- */
.dropzone {
  border: 1.5px dashed var(--color-accent-400); border-radius: var(--radius-lg);
  padding: 32px; text-align: center; color: var(--color-accent-700);
  font-family: monospace; font-size: 12.5px; background: var(--color-accent-100);
  margin-bottom: 20px;
}
textarea {
  font-family: monospace; width: 100%; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: 12px; background: var(--color-neutral-200);
  color: var(--color-text); margin-bottom: 16px;
}
input[type=file] { margin-bottom: 16px; }
.error { color: var(--color-accent-800); font-weight: 600; }

/* --- paticka --- */
.foot {
  padding: 24px 40px; margin-top: 24px;
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.foot a { color: inherit; text-decoration: underline; }

/* --- seznamy (zeme, clenove) --- */
.listbar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.filter {
  flex: 1; max-width: 340px; font: inherit; font-size: 14px;
  padding: 8px 16px; border: 1px solid var(--color-divider); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  caret-color: var(--color-accent);
}
.filter:focus { outline: none; border-color: var(--color-accent); }

/* --- result head + stats --- */
.result-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px; margin-bottom: 28px;
}
.stats { display: flex; gap: 24px; flex-wrap: wrap; }
.stat-num { font-family: var(--font-heading); font-size: 26px; }
.stat-num.accent { color: var(--color-accent-700); }
.stat-label { font-size: 11px; opacity: 0.65; }

/* --- QSO table --- */
.tablewrap { overflow-x: auto; }
table.qsos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.qsos th {
  text-align: right; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: 8px 10px; border-bottom: 1px solid var(--color-divider);
}
table.qsos td {
  padding: 8px 10px; text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-variant-numeric: tabular-nums;
}
table.qsos th.l, table.qsos td.l { text-align: left; }
td.call, td.mult, td.run { font-family: var(--font-heading); }
td.mono { font-family: monospace; opacity: 0.8; }
td.mult { color: var(--color-accent-700); }
tr.dupe { opacity: 0.7; }
td.warn { color: var(--color-accent-800); font-size: 12px; }
td.fix { color: var(--color-accent-800); font-family: var(--font-heading); }

/* status pilulky */
.pill { font-size: 11px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill-ok { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.pill-flag { background: var(--color-accent-100); color: var(--color-accent-800); }
.pill-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }

/* --- souhrn --- */
.summary {
  margin-top: 32px; background: var(--color-surface);
  border-radius: calc(var(--radius-lg) * 1.15); padding: 26px; box-shadow: var(--shadow-md);
  display: inline-block; min-width: 320px;
}
.summary .score-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.summary .score { font-family: var(--font-heading); font-size: 40px; color: var(--color-accent-700); }
.summary .formula { font-size: 13px; opacity: 0.65; }

/* --- tisk / PDF (cesta A: PDF vyrobi prohlizec pres window.print()) --- */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .nav, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  .container { max-width: none; padding: 0; }
  .tablewrap { overflow: visible; }                 /* nesmi orezavat sirokou tabulku */
  table.qsos { font-size: 9px; line-height: 1.15; }
  table.qsos th, table.qsos td { padding: 1.5px 4px; }
  .pill { padding: 0 5px; font-size: 9px; }         /* jinak drzi vysku radku */
  thead { display: table-header-group; }            /* hlavicka na kazde strance */
  tr, .summary { break-inside: avoid; }
  .summary { box-shadow: none; }
  /* accentni prvky si drzi barvu i v tisku */
  .summary, .pill, .stat-num.accent, td.mult, td.fix, td.warn {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}