/* =====================================================================
   Triconform – nástroj „Spadám pod NIS2?“ · nis2-nastroj.css v1.0.0
   ---------------------------------------------------------------------
   Barvy a písmo bere z tokenů webu (/assets/site.css + rebrand-web.css):
   --primary, --text, --surface, --focus, --signal… Pokud tokeny na stránce
   nejsou, použijí se záložní hodnoty směru „Týden“ (stav webu 4. 11. 2026).
   Tmavý režim tedy funguje automaticky přes tokeny webu.
   Vše je pod třídou .n2, nic globálního (kromě @media print).
   ===================================================================== */
.n2 {
  --n2-bg: var(--surface, #ffffff);
  --n2-bg-alt: var(--bg-alt, #efece3);
  --n2-text: var(--text, #163d33);
  --n2-muted: var(--text-muted, #3f5e54);
  --n2-border: var(--border, #cfdcd5);
  --n2-border-strong: var(--border-strong, #5e7a70);
  --n2-primary: var(--primary, #163d33);
  --n2-primary-hover: var(--primary-hover, #0e2a23);
  --n2-primary-contrast: var(--primary-contrast, #f7f5ef);
  --n2-focus: var(--focus, #e2622b);
  --n2-signal: var(--signal, #e2622b);
  --n2-signal-text: var(--signal-text, #a2441a);
  --n2-mata: var(--mata, #dcebe3);
  --n2-warn-bg: var(--warn-bg, #fcebdd);
  --n2-warn-border: var(--warn-border, #a2441a);
  --n2-error: var(--error, #b3261e);
  --n2-ok: var(--ok, #1f6b4a);
  --n2-radius: var(--radius, 6px);
  --n2-radius-sm: var(--radius-sm, 4px);
  --n2-font: var(--font, 'Public Sans', Arial, Helvetica, sans-serif);
  --n2-font-display: var(--font-display, 'Source Serif 4', Georgia, 'Times New Roman', serif);

  box-sizing: border-box;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem);
  background: var(--n2-bg);
  color: var(--n2-text);
  border: 1px solid var(--n2-border);
  border-top: 6px solid var(--n2-text);
  border-radius: var(--n2-radius);
  font-family: var(--n2-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.n2 *, .n2 *::before, .n2 *::after { box-sizing: inherit; }
.n2 [hidden] { display: none !important; }

.n2-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- postup ---------- */
.n2-head { margin-bottom: 1.25rem; }
.n2-progress { margin: 0 0 .4rem; font-size: .875rem; font-weight: 700; color: var(--n2-muted); letter-spacing: .02em; }
.n2-bar { height: 6px; background: var(--n2-bg-alt); border-radius: 999px; overflow: hidden; }
.n2-bar > span { display: block; height: 100%; background: var(--n2-signal); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .n2-bar > span { transition: none; } }

/* ---------- krok ---------- */
.n2-step { margin: 0; }
.n2-fieldset, .n2-subfieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.n2-legend { padding: 0; margin: 0 0 .75rem; float: left; width: 100%; }
.n2-legend + * { clear: both; }
.n2-legend:focus { outline: none; }
.n2-legend:focus-visible { outline: 3px solid var(--n2-focus); outline-offset: 4px; border-radius: var(--n2-radius-sm); }
.n2-qtext {
  margin: 0; font-family: var(--n2-font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem); line-height: 1.25; color: var(--n2-text);
}
.n2-subfieldset { margin-top: 1rem; }
.n2-sublegend { font-weight: 700; margin: 0 0 .5rem; padding: 0; }

.n2-help { margin: 0 0 1rem; clear: both; }
.n2-help > summary {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer;
  color: var(--n2-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  border-radius: var(--n2-radius-sm);
}
.n2-help > summary::marker, .n2-help > summary::-webkit-details-marker { color: var(--n2-signal-text); }
.n2-help-body {
  margin-top: .25rem; padding: .75rem 1rem; background: var(--n2-bg-alt);
  border-left: 4px solid var(--n2-border-strong); border-radius: var(--n2-radius-sm); font-size: .9375rem;
}
.n2-help-body p, .n2-help-body ul { margin: 0 0 .5rem; }
.n2-help-body > :last-child { margin-bottom: 0; }
.n2-help-body ul { padding-left: 1.2rem; }

.n2-options { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 0; }
.n2-option {
  display: flex; align-items: flex-start; gap: .75rem; min-height: 48px; padding: .7rem .9rem;
  background: var(--n2-bg); border: 1px solid var(--n2-border-strong); border-radius: var(--n2-radius-sm);
  cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.n2-option:hover { background: var(--n2-mata); }
.n2-option:has(input:checked) { border: 2px solid var(--n2-primary); padding: calc(.7rem - 1px) calc(.9rem - 1px); background: var(--n2-mata); }
.n2-option input {
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--n2-primary); cursor: pointer;
}
.n2-option input:focus-visible { outline: 3px solid var(--n2-focus); outline-offset: 2px; }
.n2-option:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--n2-focus); }
.n2-otext { display: flex; flex-direction: column; gap: .15rem; }
.n2-olabel { font-weight: 600; }
.n2-ohelp { font-size: .875rem; color: var(--n2-muted); }

.n2-error {
  margin: 1rem 0 0; padding: .6rem .9rem; border-left: 4px solid var(--n2-error);
  background: var(--n2-warn-bg); color: var(--n2-text); font-weight: 700;
}

/* ---------- tlačítka ---------- */
.n2-nav, .n2-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.n2-nav .n2-next { margin-left: auto; }
.n2-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .65rem 1.25rem; border: 2px solid var(--n2-primary); border-radius: var(--n2-radius-sm);
  font: inherit; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
}
.n2-btn-primary { background: var(--n2-primary); color: var(--n2-primary-contrast); }
.n2-btn-primary:hover { background: var(--n2-primary-hover); border-color: var(--n2-primary-hover); color: var(--n2-primary-contrast); box-shadow: inset 0 -4px 0 var(--n2-signal); }
.n2-btn-secondary { background: var(--n2-bg); color: var(--n2-text); border-color: var(--n2-text); }
.n2-btn-secondary:hover { background: var(--n2-mata); color: var(--n2-text); }
.n2-btn:focus-visible, .n2 a:focus-visible, .n2-link:focus-visible, .n2-help > summary:focus-visible {
  outline: 3px solid var(--n2-focus); outline-offset: 3px;
}
.n2 a { color: var(--n2-text); text-decoration: underline; text-underline-offset: 3px; }
.n2 a.n2-btn { text-decoration: none; }
.n2 a.n2-btn-primary { color: var(--n2-primary-contrast); }
.n2-link {
  background: none; border: 0; padding: .25rem 0; min-height: 44px; font: inherit; font-weight: 700;
  color: var(--n2-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- výsledek ---------- */
.n2-result { --n2-accent: var(--n2-text); border-left: 6px solid var(--n2-accent); padding-left: clamp(.75rem, 3vw, 1.25rem); }
.n2-result--vyssi { --n2-accent: var(--n2-signal); }
.n2-result--nizsi { --n2-accent: var(--n2-primary); }
.n2-result--dodavatel { --n2-accent: var(--n2-border-strong); }
.n2-result--mimo { --n2-accent: var(--n2-ok); }
.n2-result--nejasne { --n2-accent: var(--n2-warn-border); }
.n2-eyebrow { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n2-signal-text); }
.n2-rtitle {
  margin: 0 0 .75rem; font-family: var(--n2-font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.85rem); line-height: 1.2; color: var(--n2-text);
}
.n2-rtitle:focus { outline: none; }
.n2-rtitle:focus-visible { outline: 3px solid var(--n2-focus); outline-offset: 4px; }
.n2-rtext { margin: 0 0 1rem; font-size: 1.0625rem; }
.n2-result h3, .n2-result h4, .n2-result h5, .n2-result h6 { font-family: var(--n2-font); font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .4rem; }
.n2-notes { margin: 0; padding: .75rem 1rem .75rem 2rem; background: var(--n2-warn-bg); border-radius: var(--n2-radius-sm); }
.n2-notes li + li { margin-top: .4rem; }
.n2-sources { margin: 0; padding-left: 1.2rem; font-size: .9375rem; }
.n2-sources li + li { margin-top: .25rem; }
.n2-cta { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; margin: 1.5rem 0 0; }
@media (min-width: 36rem) { .n2-cta { align-items: flex-start; } }
.n2-disclaimer { margin: 1.25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--n2-border); font-size: .875rem; color: var(--n2-muted); }
.n2-summary { margin: 0; padding: 0; list-style: none; counter-reset: n2s; border-top: 1px solid var(--n2-border); }
.n2-summary li {
  counter-increment: n2s; display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--n2-border); font-size: .9375rem;
}
.n2-sq { grid-column: 1; color: var(--n2-muted); }
.n2-sq::before { content: counter(n2s) ". "; }
.n2-sa { grid-column: 1; font-weight: 700; }
.n2-summary .n2-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.n2-foot { margin: 1.5rem 0 0; font-size: .8125rem; color: var(--n2-muted); }

@media (max-width: 22rem) {
  .n2 { font-size: 1rem; }
  .n2-nav .n2-btn { flex: 1 1 auto; }
  .n2-summary li { grid-template-columns: 1fr; }
  .n2-summary .n2-link { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (forced-colors: active) {
  .n2-option, .n2-btn { border: 1px solid CanvasText; }
  .n2-bar > span { background: Highlight; }
}

/* ---------- tisk / PDF: bez CTA a ovládání, se zdroji a upozorněním ---------- */
@media print {
  .n2 { border: 0; padding: 0; max-width: none; color: #000; background: #fff; }
  .n2-noprint, .n2-nav, .n2-help { display: none !important; }
  .n2-result { border-left-width: 3px; }
  .n2-notes { background: none; border: 1px solid #999; }
  .n2-sources a::after { content: " (" attr(href) ")"; font-size: .8em; overflow-wrap: anywhere; }
}