/* Survey for accountants ("/dotaznik"). Tokens from base.css, chrome from site.css. One column, quiet;
   the progress line is the only thing that moves, and only because the person answered something. */

.dz { max-width: 760px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-8); }
.dz-intro h1 { font-size: var(--f-33); line-height: 40px; max-width: 22ch; }
.dz-intro p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--f-17); line-height: 28px; }
.dz-intro .dz-meta { font-size: var(--f-15); line-height: 24px; color: var(--ink-2); }

.dz-progress { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) calc(-1 * var(--s-3)) 0; padding: var(--s-3); background: var(--paper);
  border-bottom: 1px solid var(--rule); }
.dz-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.dz-bar > span { display: block; height: 100%; width: 0; background: var(--stamp); transition: width .2s ease; }
.dz-count { font-size: var(--f-13); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dz-block { padding-top: var(--s-6); }
.dz-block > h2 { font-size: var(--f-21); line-height: 28px; padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }

.dz-q { border: 0; margin: 0; padding: var(--s-5) 0 0; min-width: 0; }
.dz-q legend, .dz-label { display: block; padding: 0; margin-bottom: var(--s-3); font-weight: 600; font-size: var(--f-17);
  line-height: 26px; max-width: 64ch; }
.dz-num { color: var(--ink-2); font-weight: 500; margin-right: 6px; font-variant-numeric: tabular-nums; }
.dz-req { margin-left: 6px; font-size: var(--f-13); font-weight: 500; color: var(--stamp); }
.dz-opt-word { margin-left: 6px; font-size: var(--f-13); font-weight: 500; color: var(--ink-2); }
.dz-hint { display: block; font-size: var(--f-13); line-height: 20px; font-weight: 400; color: var(--ink-2); margin: 2px 0 0; }
.dz-q legend .dz-hint { margin-top: 2px; }

.dz-opts { display: grid; gap: var(--s-2); }
.dz-opts.dz-radio:has(> :nth-child(6)), .dz-opts.dz-check:has(> :nth-child(6)) { grid-template-columns: 1fr 1fr; }
.dz-opt { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: 10px var(--s-3);
  border: 1px solid var(--control, var(--rule)); border-radius: var(--r-ctl); background: var(--sheet); cursor: pointer;
  font-size: var(--f-15); line-height: 22px; }
.dz-opt:hover { border-color: var(--ink-2); }
.dz-opt input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--stamp); }
.dz-opt:has(input:checked) { border-color: var(--stamp); background: var(--stamp-wash); }
.dz-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.dz-consent { margin-top: var(--s-3); font-size: var(--f-13); line-height: 20px; }

.dz-q textarea, .dz-q input:not([type]) { max-width: 100%; }
.dz-bad legend, .dz-bad .dz-label { color: var(--bad); }
.dz-bad .dz-opt { border-color: color-mix(in srgb, var(--bad) 55%, var(--rule)); }

.dz-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.dz-rank li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); border: 1px solid var(--control, var(--rule));
  border-radius: var(--r-ctl); background: var(--sheet); }
.dz-pos { font-weight: 650; color: var(--stamp); font-variant-numeric: tabular-nums; }
.dz-move { display: flex; gap: var(--s-1); }
.dz-rank li.moved { border-color: var(--stamp); }
.dz-link { padding: 0; border: 0; background: none; color: var(--stamp); font: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.dz-rank-state { font-size: var(--f-13); color: var(--ok); margin: var(--s-1) 0 0; min-height: 20px; }

.dz-contact { margin-top: var(--s-4); padding: var(--s-4); border-left: 3px solid var(--stamp); background: var(--sheet);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }

.dz-errors { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-ctl); background: var(--bad-wash); color: var(--ink); }
.dz-errors h2 { font-size: var(--f-17); color: var(--bad); }
.dz-errors ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.dz-errors a { color: var(--ink); }

.dz-send { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.dz-send .dz-hint { margin-top: var(--s-3); }

/* honeypot: off-screen, out of the tab order and hidden from assistive tech */
.dz-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.dz-thanks { padding-top: var(--s-8); }
.dz-thanks-sheet { padding: var(--s-7); }
.dz-thanks-sheet h1 { font-size: var(--f-33); line-height: 40px; max-width: 16ch; margin-bottom: var(--s-4); }
.dz-thanks-sheet p { color: var(--ink-2); font-size: var(--f-17); line-height: 28px; }
.dz-thanks-sheet .stamp { top: var(--s-6); right: var(--s-6); bottom: auto; }
.dz-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

@media (max-width: 767px) {
  .dz { padding: var(--s-5) var(--s-4) var(--s-7); }
  .dz-progress { top: 56px; }   /* the site header is 56px high on phones */
  .dz-intro h1 { font-size: var(--f-26); line-height: 32px; }
  .dz-intro p { font-size: var(--f-15); line-height: 24px; }
  .dz-opts.dz-radio:has(> :nth-child(6)), .dz-opts.dz-check:has(> :nth-child(6)) { grid-template-columns: 1fr; }
  .dz-rank li { grid-template-columns: 24px 1fr; }
  .dz-move { grid-column: 2; }
  .dz-thanks-sheet { padding: var(--s-5) var(--s-4); }
  .dz-thanks-sheet .stamp { position: static; justify-self: start; margin-bottom: var(--s-4); display: inline-grid; }
  .dz-send .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dz-bar > span { transition: none; } }