/* om-design — signální vrstva.
   Detaily, které oživí Swiss základ: podsvícení, reveal, ořezové značky,
   měřítko, sparkline, pulsující tečka. Načti až PO tokens.css.

   Dvě pravidla, jinak podsvícení nefunguje:
   1) karta s [data-glow] nesmí mít overflow:hidden  — ořízne záři
   2) používej background-color, ne background       — shorthand přepíše gradient */

/* ============ PODSVÍCENÍ SLEDUJÍCÍ KURZOR ============ */
[data-glow] {
  position: relative;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  background-image: radial-gradient(
    200px 200px at var(--mx, -400px) var(--my, -400px),
    var(--glow-fill), transparent 70%);
}
/* svítící hrana — maskou se vykreslí jen obrys, ne plocha */
[data-glow]::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid transparent;
  background-image: radial-gradient(
    140px 140px at var(--mx, -400px) var(--my, -400px),
    var(--glow-edge), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
}
/* jemný bílý odlesk navrch */
[data-glow]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(
    100px 100px at var(--mx, -400px) var(--my, -400px),
    var(--glow-light), transparent 70%);
}
[data-glow]:hover { transform: translateY(-3px); }

/* na světlé ploše jemněji — bílá záři pohlcuje */
.paper [data-glow], [data-glow].on-paper {
  background-image: radial-gradient(
    200px 200px at var(--mx, -400px) var(--my, -400px),
    var(--glow-fill-lt), transparent 70%);
}
.paper [data-glow]::before, [data-glow].on-paper::before {
  background-image: radial-gradient(
    140px 140px at var(--mx, -400px) var(--my, -400px),
    var(--glow-edge-lt), transparent 70%);
}
.paper [data-glow]::after, [data-glow].on-paper::after { background-image: none; }

/* karta na tmavé ploše */
.card-void {
  background-color: var(--void-soft);
  border: 1px solid var(--void-rule);
  padding: var(--s-6);
}
.card-paper {
  background-color: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--s-6);
}

/* ============ VRSTVENÉ POZADÍ ============ */
/* tmavá plocha dostane dvě sotva viditelné červené záře + technický rastr */
.void-bg { position: relative; background: var(--void); overflow: hidden; isolation: isolate; }
.void-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 70% 50% at 12% 0%,   rgba(255,59,46,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 85%, rgba(255,59,46,.06) 0%, transparent 55%);
}
.void-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 75%);
}

/* ============ OŘEZOVÉ ZNAČKY ============ */
/* čtyři rohové značky — švýcarský tiskařský detail, přidá řemeslo bez šumu */
.crop { position: absolute; width: 16px; height: 16px; pointer-events: none;
        border-color: var(--rule); border-style: solid; border-width: 0; }
.crop.tl { top: 24px; left: 24px;  border-top-width: 1px; border-left-width: 1px; }
.crop.tr { top: 24px; right: 24px; border-top-width: 1px; border-right-width: 1px; }
.crop.bl { bottom: 24px; left: 24px;  border-bottom-width: 1px; border-left-width: 1px; }
.crop.br { bottom: 24px; right: 24px; border-bottom-width: 1px; border-right-width: 1px; }
.on-void .crop, .void-bg .crop { border-color: var(--void-rule); }

/* ============ MĚŘÍTKO ============ */
/* svislá stupnice u okraje — technický detail k číslování sekcí */
.ruler { display: flex; flex-direction: column; gap: 6px; }
.ruler i { display: block; width: 12px; height: 1px; background: var(--rule); }
.ruler i:nth-child(5n+1) { width: 24px; background: var(--ink-45); }
.on-void .ruler i { background: var(--void-rule); }
.on-void .ruler i:nth-child(5n+1) { background: var(--on-void-45); }

/* ============ DIVIDER S PROSVĚTLENÍM ============ */
.divider-fade { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .5; }
.on-void .divider-fade { background: linear-gradient(90deg, transparent, var(--red-lift), transparent); }

/* ============ PULSUJÍCÍ TEČKA ============ */
.pulse { display: inline-block; width: 6px; height: 6px; background: var(--red);
         animation: omPulse 2s ease-in-out infinite; }
.on-void .pulse, .void-bg .pulse { background: var(--red-lift); }
@keyframes omPulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ============ SPARKLINE ============ */
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px;
         vertical-align: middle; }
.spark i { width: 3px; background: var(--ink-45); display: block; }
.spark i.hi { background: var(--ink); }            /* poslední sloupec, zvýrazněný */
.spark.signal i.hi { background: var(--red); }     /* jen řada, která nese signál */
.on-void .spark i { background: var(--on-void-45); }
.on-void .spark i.hi { background: var(--on-void); }
.on-void .spark.signal i.hi { background: var(--red-lift); }

/* ============ PULLQUOTE ============ */
.pullquote { border-left: 2px solid var(--red); padding: 4px 0 4px 20px;
             font-size: var(--t-small); color: var(--ink-70); max-width: 68ch; }
.on-void .pullquote { border-left-color: var(--red-lift); color: var(--on-void-45); }

/* ============ ZJIŠTĚNÍ ============ */
/* Patro 1 reportu: tvrzení + důkaz. Co do nich patří, určuje skill om-report.
   Bez karet a bez rámečků — sekce se oddělují linkou, ne plochou. */
.context { font-size: var(--t-body); color: var(--ink-70); max-width: 68ch;
           margin: 0 0 var(--s-8); }
.findings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.finding { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4);
           padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
.finding .n { font-size: var(--t-label); letter-spacing: .16em; color: var(--ink-45);
              font-variant-numeric: tabular-nums; padding-top: 6px; }
.finding .claim { font-size: var(--t-h3); line-height: 1.3; font-weight: 700;
                  letter-spacing: -.015em; margin: 0; max-width: 56ch; }
.finding .proof { font-size: var(--t-small); line-height: 1.5; color: var(--ink-70);
                  margin: var(--s-2) 0 0; max-width: 64ch;
                  font-variant-numeric: tabular-nums; }

/* „co s tím" — jediné červené v patře 1 */
.sowhat { margin: var(--s-8) 0 0; border-left: 2px solid var(--red); padding-left: 20px;
          font-weight: 500; max-width: 64ch; }
.on-void .findings, .on-void .finding { border-color: var(--void-rule); }
.on-void .finding .n, .on-void .finding .proof, .on-void .finding .src { color: var(--on-void-45); }
.on-void .sowhat { border-left-color: var(--red-lift); }
@media (max-width: 640px) {
  .finding { grid-template-columns: 1fr; gap: var(--s-2); }
  .finding .n { padding-top: 0; }
}

/* ============ BODY ============ */
/* Patro 3 reportu a metodika. Seznam bez odrážek, oddělený linkou —
   odrážka je dekorace, linka nese strukturu. */
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.points li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
             max-width: 68ch; font-size: 15px; line-height: 1.5; }
/* zdroj na konci věty — u důkazu, u bodu i v metodice stejně */
.src { font-size: var(--t-small); color: var(--ink-45); }
.on-void .points, .on-void .points li { border-color: var(--void-rule); }
.on-void .src { color: var(--on-void-45); }

/* ============ REVEAL PŘI SCROLLU ============ */
.reveal { opacity: 0; transform: translateY(20px);
          transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.seen { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .08s } .reveal-2 { transition-delay: .16s }
.reveal-3 { transition-delay: .24s } .reveal-4 { transition-delay: .32s }

/* ============ OHLEDUPLNOST K POHYBU A K TISKU ============ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
  [data-glow] { transition: none; }
  [data-glow]:hover { transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  [data-glow], [data-glow]::before, [data-glow]::after { background-image: none !important; }
  .pulse { animation: none; }
}