/* Knihovna prvků, brand verze 2 (skandinávský styl). Stav: návrh z 1. 10. 2026, závazný pro každý NOVÝ vizuální výstup
   (web MajAI, HTML artefakt, checklist, dashboard, tahák), dokud ho Martin s Terezkou neupraví.
   JEDINÝ ZDROJ. Změna prvku se dělá jen tady. Stránky na webu MajAI soubor odkazují
   (<link rel="stylesheet" href="./prvky-v2.css">, web-deploy ho nasazuje vedle nich), takže se změna po nasazení
   propíše do všech najednou, včetně srovnávací stránky. Do stránky se styly n-* nekopírují; web-deploy --check to hlásí.
   Výjimka: artefakt na claude.ai cizí soubor načíst neumí, tam se obsah vloží do <style> při publikaci.
   K souboru patří řádek FONTS z brand-tokens.css. Ukázka každého prvku s HTML k okopírování:
   wiki/identity/vizualni-prvky-srovnani.html (pravý sloupec), na webu https://majai.pavlicek.ai/vizualni-prvky-srovnani.html.
   Pravidla zacházení: wiki/identity/vizualni-styl.md, sekce „Verze 2“. Nový druh prvku se přidává sem, ne do stránky.

   Prvky (číslo odpovídá srovnávací stránce):
    1. Hlavička stránky
    2. Nadpis sekce
    3. Karta
    4. Panel, box se vzorcem
    5. Tabulka
    6. Upozornění a poznámka
    7. Odznak a stav
    8. Filtr a záložky
    9. Semafor
   10. Legenda
   11. Postup a zaškrtávací položka
   12. Kroky s číslem
   13. Časová osa dne a týdenní mřížka
   14. Žebřík oprávnění a stupňů
   15. Řádek popisek a hodnota
   16. Kód, klávesa, ukázka textu
   17. Odkaz a tlačítko zpět
   18. Číslo jako dlaždice
   19. Graf a heatmapa
   20. Časová osa termínů
   21. Rozvrh
   22. Schéma
   23. Zóny dokumentu
   24. Princip ve třech sloupcích
   25. Patička a dělicí čáry
   26. Prázdný stav a vyřazené položky

   Doplňky pro generované dashboardy (finance, projekty; 11. 10. 2026) jsou na konci souboru a nesou číslo prvku,
   ke kterému patří: 5b posuvný obal, 8b filtr jako tlačítko, 9b barvy semaforu, 15b strojové písmo, 19b části
   grafu, 19c heatmapa jako tabulka, 19d bublina grafu, 20b časová osa z HTML.

   Doplňky pro přehledy projektů (22. 10. 2026, přehled zahrady) jsou úplně na konci: 2b rozbalovací sekce se souhrnem,
   5c tabulka, která se na telefonu složí do karet.
*/
:root{--ink:#1b1a22;--soft:#55526a;--faint:#85829a;--line:#e6e4ec;--acc:#6b4fb8;
--d:"Figtree",-apple-system,"Helvetica Neue",Arial,sans-serif;--b:"IBM Plex Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;--m:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 var(--b);-webkit-font-smoothing:antialiased}
/* ---- nový styl (pravý sloupec) ---- */
.n-eyebrow{font:600 12.5px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.n-h1{font:700 36px/1.08 var(--d);letter-spacing:-.025em;margin:12px 0 12px}
.n-lead{font-size:16.5px;color:var(--soft);margin:0 0 14px;max-width:46ch}
.n-meta{font-size:13px;color:var(--faint);margin-top:8px}
.n-sec{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px}
.n-sec h2{font:600 13px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;margin:0}
.n-sec span{font-size:13.5px;color:var(--faint)}
.n-h3{font:600 21px/1.2 var(--d);letter-spacing:-.01em;margin:22px 0 6px}
.n-p{margin:0 0 6px;font-size:15.5px}
.n-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.n-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px}
.n-card{border:1px solid var(--line);border-radius:8px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.n-card p{margin:0;font-size:14.5px;color:var(--soft)}
.n-ct{font:600 18px/1.25 var(--d);letter-spacing:-.01em}
.n-role{font-size:12.5px;color:var(--soft);display:flex;align-items:center;gap:7px}
.n-foot{font-size:12.5px;color:var(--faint);margin-top:auto;padding-top:8px}
.n-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;flex:none}
.n-role .n-dot,.n-tag .n-dot{margin-right:0}
.n-mark{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none}
.n-me{background:var(--acc)}.n-ag{border:1.5px solid var(--ink)}
.n-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.n-label{font:600 12px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.n-formula{font:500 17px/1.4 var(--m)}
.n-table{width:100%;border-collapse:collapse;font-size:14.5px}
.n-table th{font:600 12px/1 var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:0 10px 10px 0;border-bottom:1px solid var(--ink)}
.n-table td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.n-table b{font-weight:600}
.n-num{text-align:right!important;font-family:var(--m);font-size:13.5px;font-variant-numeric:tabular-nums;padding-right:0!important}
th.n-num{font-family:var(--d)!important;font-size:12px!important}
.n-table td.n-wrap{white-space:normal;min-width:17em}
.n-table td small{display:block;font:400 12.5px/1.4 var(--b);color:var(--faint)}
.n-table tr.n-off td{color:var(--faint)}
.n-call{border-left:2px solid var(--acc);padding:2px 0 2px 16px;margin-bottom:16px;font-size:15px}
.n-call b{display:block;font:600 13px/1.3 var(--d);margin-bottom:3px;color:var(--acc)}
.n-warn{border-left-color:#b3261e}.n-warn b{color:#b3261e}
.n-rule{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;font:500 19px/1.35 var(--d)}
.n-rule b{font-weight:700;color:var(--acc)}
.n-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.n-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:12.5px;line-height:1.3;vertical-align:middle}
.n-quiet{color:var(--faint)}
.n-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);font:600 15px/1 var(--d);color:var(--faint)}
.n-tabs span{padding:0 0 12px;margin-bottom:-1px}
.n-tabs .n-on{color:var(--ink);border-bottom:2px solid var(--acc)}
.n-chip{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13.5px;color:var(--soft)}
.n-chip.n-on{border-color:var(--ink);color:var(--ink);font-weight:600}
.n-gap{width:14px}
.n-sem{gap:22px;font-size:14.5px}
.n-legend{display:flex;flex-wrap:wrap;gap:8px 20px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;font-size:13px;color:var(--soft)}
.n-legend span{display:inline-flex;align-items:center;gap:7px}
.n-line{display:inline-block;width:18px;height:2px}
.n-dash{background:repeating-linear-gradient(90deg,#85829a 0 4px,transparent 4px 8px)}
.n-bar{display:inline-block;width:3px;height:14px}
.n-dashb{background:repeating-linear-gradient(0deg,#6b4fb8 0 3px,transparent 3px 6px)}
.n-prog{height:2px;background:var(--line)}.n-prog i{display:block;height:2px;background:var(--acc)}
.n-check{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.n-check b,.n-step b,.n-time b{font:600 15.5px/1.3 var(--d)}
.n-check small,.n-step small,.n-time small{display:block;font-size:13.5px;color:var(--soft);margin-top:2px}
.n-box{width:20px;height:20px;border:1.5px solid #c9c6d6;border-radius:4px;flex:none;margin-top:1px;display:grid;place-items:center}
.n-box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n-done .n-box{background:var(--acc);border-color:var(--acc)}
.n-done b,.n-done small{color:var(--faint)}
/* 11b. Zaškrtávací položka s živým políčkem (web se sdíleným stavem, od 2. 10. 2026): <label class="n-check"><input type="checkbox" id="k1"><div><b>…</b><small>…</small></div></label> */
.n-check input[type=checkbox]{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--acc)}
label.n-check{cursor:pointer}
.n-check:has(input:checked) b,.n-check:has(input:checked) small{color:var(--faint)}
.n-btn{display:inline-block;border:1px solid #d9d6e2;border-radius:8px;padding:9px 14px;font:500 14px/1 var(--b);margin-top:16px}
.n-row .n-btn{margin-top:0}
.n-step{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.n-step>i{font:700 17px/1.3 var(--d);font-style:normal;color:var(--acc);width:1.2em}
.n-step.n-done>i{color:var(--faint)}
.n-time{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.n-time>span{font:500 13.5px/1.6 var(--m);color:var(--faint);width:3.4em;flex:none}
.n-time small{display:flex;align-items:center;gap:7px}
.n-week{display:grid;grid-template-columns:repeat(7,1fr);margin-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--soft)}
.n-week div{padding:10px 6px 0;border-top:2px solid transparent;margin-top:-1px}
.n-week b{display:block;font:600 12px/1.2 var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.n-week .n-on{border-top-color:var(--acc)}
.n-ladder{display:grid;grid-template-columns:1.4em 8.5em 1fr auto;gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.n-ladder>i:first-child{font:700 17px/1 var(--d);font-style:normal;color:var(--faint)}
.n-ladder b{font:600 15.5px/1.3 var(--d)}.n-ladder span{color:var(--soft)}
.n-kv{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.n-kv>span{font:600 12px/1.9 var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.n-code{font:13.5px var(--m);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.n-kbd{font:12.5px var(--m);border:1px solid #c9c6d6;border-bottom-width:2px;border-radius:4px;padding:1px 6px}
.n-sample{font:13.5px/1.6 var(--m);border-left:1px solid var(--ink);padding-left:14px;margin-top:14px;color:var(--soft)}
.n-link{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.n-kpi{border-top:1px solid var(--ink);padding-top:12px}
.n-kpi span{font:600 12px/1.3 var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:block}
.n-kpi b{font:700 32px/1.15 var(--d);letter-spacing:-.02em;display:block;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.n-kpi small{font-size:13px;color:var(--soft)}
.n-chart{width:100%;height:auto;display:block}
.n-heat{display:grid;grid-template-columns:7em repeat(4,1fr);gap:4px;margin-top:4px;font-size:13.5px;align-items:center}
.n-heat:first-of-type{margin-top:22px}
.n-heat i{font:500 12.5px/2.3 var(--m);font-style:normal;text-align:center;border-radius:3px}
.n-sched{display:grid;grid-template-columns:2.6em repeat(3,1fr);font-size:13.5px}
.n-sched>div{border-bottom:1px solid var(--line);padding:8px 6px;min-height:20px}
.n-sh{font:500 12px var(--m);color:var(--faint)}
.n-sd{font:600 12px/2.2 var(--d);letter-spacing:.06em;text-transform:uppercase}
.n-ev{display:block;border-left:3px solid var(--line);padding:1px 0 1px 8px;font-weight:500}
.n-ev small{display:block;font:12px var(--m);color:var(--faint);font-weight:400}
.n-ev1{border-left-color:var(--acc)}.n-ev2{border-left-color:var(--ink)}
.n-ev3{border-left:3px dashed var(--acc)}.n-evq{color:var(--faint);font-weight:400}
.n-zone{border-left:2px solid var(--line);padding:2px 0 2px 16px;margin-bottom:14px}
.n-zone.n-on{border-left-color:var(--acc)}
.n-zone b{font:600 15.5px/1.3 var(--d);margin-right:10px}
.n-zone p{margin:4px 0 0;font-size:14.5px;color:var(--soft)}
.n-princ{display:grid;grid-template-columns:.9fr 1.3fr 1fr;gap:20px;border-top:1px solid var(--ink);padding-top:16px;font-size:14.5px}
.n-princ p{margin:0 0 6px}.n-princ small{color:var(--faint);font-size:12.5px}
.n-code2{font:700 13px/1 var(--d);color:var(--acc);letter-spacing:.06em;display:block;margin-bottom:6px}
.n-ev3d{display:flex;gap:4px;align-items:center;margin-top:8px}
.n-ev3d i{width:10px;height:10px;border:1.5px solid var(--ink);border-radius:2px}
.n-ev3d i.n-on{background:var(--ink)}.n-ev3d small{margin-left:6px}
.n-footer{border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--faint)}
.n-empty{color:var(--faint);font-size:15px;padding:14px 0;border-bottom:1px solid var(--line)}
.n-old{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px;font-size:15px;padding-top:12px}
@media(max-width:520px){.n-princ{grid-template-columns:1fr}.n-ladder{grid-template-columns:1.4em 1fr auto}.n-ladder span{grid-column:2}}
/* ---- Doplňky pro generované dashboardy (11. 10. 2026). Žádná nová barva: tři barvy semaforu a fialová škála heatmapy
   jsou ze srovnávací stránky (prvky 9 a 19), všechno ostatní z proměnných nahoře. ---- */
/* 5b. Široká tabulka nebo graf v obalu, který se na telefonu posouvá do strany: <div class="n-scroll"><table class="n-table">… */
.n-scroll{overflow-x:auto}
/* 8b. Filtr jako tlačítko: <button class="n-chip" aria-pressed="true">2026</button> */
button.n-chip{font:inherit;font-size:13.5px;background:#fff;cursor:pointer}
.n-chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
/* 9b. Barva semaforu jako třída tečky nebo značky: <i class="n-dot n-red"></i>. Text u ní zůstává černý. */
.n-red{background:#b3261e}.n-amber{background:#9a6700}.n-green{background:#1f7a4d}
.n-legend .n-dot{margin-right:0}
/* 15b. Číslo nebo datum strojovým písmem mimo sloupec n-num */
.n-mono{font-family:var(--m);font-size:.92em;font-variant-numeric:tabular-nums}
/* 19b. Části generovaného grafu <svg class="n-chart">: n-gl mřížka (n-gl0 nulová linka), n-ax popisek osy, n-ln čára
   (barvu řady nese style="stroke:var(--ink)", druhá řada --acc, třetí --faint a navíc n-dsh), n-pt koncový bod
   (style="--c:var(--ink)", n-hollow prázdný), n-b sloupec (n-acc druhá řada, n-neg záporný), n-part neúplné období
   je bledší, n-hatch šrafa neúplného roku, n-xh a n-xb zaměřovač pod ukazatelem. */
.n-chart{touch-action:pan-y}
.n-gl{stroke:var(--line);stroke-width:1}.n-gl0{stroke:var(--ink)}
.n-ax{fill:var(--faint);font:10.5px var(--m)}
.n-ln{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.n-dsh{stroke-width:1.4;stroke-dasharray:4 4}
.n-pt{fill:var(--c);stroke:#fff;stroke-width:2}.n-pt.n-hollow{fill:#fff;stroke:var(--c);stroke-width:1.5}
.n-b{fill:var(--ink)}.n-b.n-acc{fill:var(--acc)}.n-b.n-neg{fill:#b3261e}
.n-part{opacity:.45}
.n-hatch{stroke:#fff;stroke-width:2.2}
.n-xh{stroke:var(--faint);stroke-width:1}.n-xb{fill:var(--ink);opacity:.06}
/* 19c. Heatmapa jako tabulka: <table class="n-table n-heatmap">, buňka <td class="n-c3" tabindex="0">. Pět stupňů jedné
   fialové škály, vybraná buňka n-on, řádek podkategorie <th scope="row" class="n-sub">, první sloupec drží při posunu. */
.n-heatmap th,.n-heatmap td{padding:6px 8px}
.n-heatmap thead th{text-align:right;border-bottom:0}.n-heatmap thead th:first-child{text-align:left}
.n-heatmap td{text-align:right;font:13px var(--m);font-variant-numeric:tabular-nums;border:2px solid #fff;border-radius:4px}
.n-heatmap tbody th{font:600 13.5px/1.3 var(--b);letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;border-bottom:0;padding-left:0}
.n-heatmap tbody th.n-sub{font-weight:400;color:var(--soft);padding-left:20px}
.n-heatmap th:first-child{position:sticky;left:0;background:#fff;z-index:1}
.n-c1{background:#f0ecfa}.n-c2{background:#d9cff4}.n-c3{background:#b9a6ea}.n-c4{background:#8f73d6;color:#fff}.n-c5{background:var(--acc);color:#fff}
.n-heatmap td[tabindex]{cursor:pointer}
.n-heatmap td[tabindex]:hover,.n-heatmap td[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.n-heatmap td.n-on{outline:2px solid var(--ink);outline-offset:-2px}
/* 19d. Bublina s hodnotami pod ukazatelem v grafu: <div class="n-tip"><b>srpen 2026</b><div><i class="n-mark"></i>Příjmy<span class="n-num">…</span></div></div> */
.n-tip{position:fixed;z-index:20;pointer-events:none;background:#fff;border:1px solid var(--ink);border-radius:8px;padding:8px 11px;font-size:13px;min-width:170px}
.n-tip b{display:block;font:600 13px/1.3 var(--d);margin-bottom:4px}
.n-tip div{display:flex;gap:8px;align-items:center}
.n-tip .n-num{margin-left:auto;padding-left:14px}
/* 20b. Časová osa termínů z HTML: <div class="n-tl"><div class="n-tl-ax"></div><div class="n-tl-tick" style="left:50%"><span>+30 dní</span></div>
   <div class="n-tl-it n-tl-l0" style="left:32%"><i class="n-dot n-red"></i><div class="n-tl-lb">30. 10.<br>Projekt</div></div></div>.
   Popisky se střídají ve čtyřech výškách (n-tl-l0 až n-tl-l3) a u krajů se zarovnají dovnitř (n-tl-el, n-tl-er). */
.n-tl{position:relative;height:148px;margin:4px 10px}
.n-tl-ax{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink)}
.n-tl-tick{position:absolute;top:50%;width:1px;height:10px;margin-top:-5px;background:var(--faint)}
.n-tl-tick span{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:600 10.5px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.n-tl-it{position:absolute;top:50%;transform:translate(-50%,-50%)}
.n-tl-it .n-dot{display:block;width:10px;height:10px;margin:0;outline:2px solid #fff}
.n-tl-lb{position:absolute;left:50%;transform:translateX(-50%);font-size:12.5px;line-height:1.3;white-space:nowrap;text-align:center}
.n-tl-l0 .n-tl-lb{bottom:20px}.n-tl-l1 .n-tl-lb{top:20px}.n-tl-l2 .n-tl-lb{bottom:52px}.n-tl-l3 .n-tl-lb{top:52px}
.n-tl-el .n-tl-lb{left:0;transform:none;text-align:left}.n-tl-er .n-tl-lb{left:auto;right:0;transform:none;text-align:right}
/* ---- Doplňky pro přehledy projektů (22. 10. 2026, přehled zahrady). Žádná nová barva ani písmo. ---- */
/* 2b. Rozbalovací sekce se souhrnem v hlavičce; na telefonu ji stránka může nechat sbalenou:
   <details class="n-fold" open><summary><b>1 Zemní práce</b><span>nabídka 45 750 Kč · vyúčtováno 106 518 Kč</span></summary>…</details> */
.n-fold{border-top:1px solid var(--line)}
.n-fold>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;padding:14px 0}
.n-fold>summary::-webkit-details-marker{display:none}
.n-fold>summary::before{content:"+";font:600 16px/1 var(--d);color:var(--acc);width:12px}
.n-fold[open]>summary::before{content:"−"}
.n-fold>summary b{font:600 17px/1.3 var(--d)}
.n-fold>summary span{font-size:13.5px;color:var(--soft)}
/* 5c. Tabulka, která se na obrazovce do 760 px složí do karet; popisek nese buňka: <table class="n-table n-cards">,
   <td data-l="Nabídka">. Prázdná buňka se na telefonu schová, tisk zůstává tabulkou. */
@media screen and (max-width:760px){
.n-cards{min-width:0!important}.n-cards thead{display:none}
.n-cards tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.n-cards td{display:block;border-bottom:0;padding:3px 0!important;white-space:normal;text-align:left!important;min-width:0!important}
.n-cards td[data-l]{display:grid;grid-template-columns:7.5em 1fr;gap:10px}
.n-cards td[data-l]::before{content:attr(data-l);font:600 11.5px/1.9 var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.n-cards td:empty{display:none}
}