/* AGS-000 — v5 layout (15.8.2026). Farby su NEZMENENE (kontrasty overene v4). Prestavana je STRUKTURA podla modelu medium.com: 1. jeden trvaly top bar (brand + globalne hladanie + akcia) — namiesto hlavicky, ktora sa na kazdej stranke skladala inak 2. jedna 728px citacia/feedova kolona + 340px rail — namiesto 5 blokov pod sebou v plnej sirke, kde nic nebolo primarne 3. story karta (kicker / titulok / perex / meta riadok) namiesto adresaroveho riadku: na homepage su ARTIKLE, nie priecinky. Priecinky su navigacia, nie obsah. 4. clanok ma pevnu mieru 680px a jeden meta riadok oddeleny linkami — ako Medium 5. typograficka stupnica ma 5 stupnov, nie 2: kicker 12 / meta 13 / perex 16 / titulok karty 21 / titulok clanku 40 */ :root{ --bg:#080a09; --bg-alt:#101413; --bg-hi:#161c19; /* muted sage — low saturation, every tone verified >=5.4:1 on --bg */ --g-hi:#dfeee3; /* 16.5:1 */ --g:#a7cdb2; /* 11.4:1 body */ --g-mid:#8cb598; /* 8.7:1 */ --g-dim:#79a085; /* 6.8:1 */ --g-faint:#6a8f76; /* 5.5:1 */ --line:#26332b; --glow:none; --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fs:16px; --lh:1.6; --pad:clamp(16px,4vw,32px); /* Medium grid: 728 kolona + 340 rail + 64 medzera = 1132 */ --max:1132px; --col:728px; --rail:340px; --gap:64px; --measure:680px; /* citacia miera clanku — Medium ma 680 */ --nav:64px; --t-xs:12px; --t-sm:13px; --t-md:14px; --t-base:16px; --t-lg:18px; --t-card:clamp(19px,2vw,21px); --t-h3:22px; --t-h2:clamp(22px,2.4vw,26px); --t-h1:clamp(30px,4.4vw,40px); --t-lead:clamp(18px,2.2vw,21px); --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; } html[data-theme="light"]{ --bg:#f4f6f4; --bg-alt:#e9edea; --bg-hi:#dfe5e0; --g-hi:#13261a; --g:#2b4534; --g-mid:#3d5a46; --g-dim:#4d6b56; --g-faint:#4f6e58; --line:#ccd6ce; --glow:none; } /* Kym navstevnik neprepol, temu urcuje OS. Predtym bola tmava natvrdo v a svetla verzia — hoci hotova — sa nikomu neukazala sama (nalez D4). html[data-theme] (obe hodnoty) tento blok prebije, cize volba vzdy vyhrava. */ @media (prefers-color-scheme: light){ html:not([data-theme]){ --bg:#f4f6f4; --bg-alt:#e9edea; --bg-hi:#dfe5e0; --g-hi:#13261a; --g:#2b4534; --g-mid:#3d5a46; --g-dim:#4d6b56; --g-faint:#4f6e58; --line:#ccd6ce; --glow:none; } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--g);font-family:var(--sans);font-size:var(--fs); line-height:var(--lh);-webkit-font-smoothing:antialiased;text-shadow:var(--glow);overflow-x:hidden} a{color:inherit;text-decoration:none} .dim{color:var(--g-faint)} .skip{position:absolute;left:-9999px} .skip:focus{left:10px;top:10px;background:var(--g);color:var(--bg);padding:8px 12px;z-index:99;text-shadow:none} :focus-visible{outline:2px solid var(--g-hi);outline-offset:3px;border-radius:2px} ::selection{background:var(--g);color:var(--bg);text-shadow:none} /* ============================================================ 1. TOP BAR Pevny, cez celu sirku, 1px spodna linka. Drzi tri veci a nic viac: kto to je · hladanie · odchod k strojovej vrstve. */ .topbar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)} .topbar .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);min-height:var(--nav); display:flex;align-items:center;gap:clamp(12px,2.5vw,28px)} .brand{color:var(--g-hi);font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.02em; white-space:nowrap;display:inline-flex;align-items:center;gap:9px} /* Znacka: SVG kosostvorec namiesto znaku '▚'. Glyf sa na kazdom OS kresli inak (a v niektorych mono fontoch chyba uplne) — SVG je vsade identicke. */ .brand svg{display:block;width:15px;height:15px;flex:none;color:var(--g-dim)} .ver{color:var(--g-faint);font-size:var(--t-xs);font-family:var(--mono);white-space:nowrap} /* motto — v bare tiche, na homepage nesie znacku hned pod nazvom */ .motto{color:var(--g-dim);font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em; text-transform:lowercase;white-space:nowrap;border-left:1px solid var(--line);padding-left:14px} .motto.big{border:0;padding:0;font-size:var(--t-md);letter-spacing:.2em;color:var(--g-dim); margin:0 0 var(--sp-3);white-space:normal} .tools{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none} .tools button,.tools a{all:unset;cursor:pointer;color:var(--g-faint);font-family:var(--mono); font-size:var(--t-sm);padding:8px 12px;border-radius:999px;min-height:36px; display:inline-flex;align-items:center;gap:6px} .tools button:hover,.tools a:hover{color:var(--g-hi);background:var(--bg-alt)} .tools .go{border:1px solid var(--line);color:var(--g-mid)} .tools .go:hover{border-color:var(--g-dim)} /* hladanie ako pilulka v bare (Medium ma presne toto miesto), nie ako blok na stranke */ .cmdbar{display:flex;align-items:center;gap:8px;flex:1 1 240px;max-width:340px;min-width:0; border:1px solid var(--line);border-radius:999px;background:var(--bg-alt);padding:7px 14px} .cmdbar:focus-within{border-color:var(--g-dim)} .ps1{color:var(--g-faint);white-space:nowrap;font-size:var(--t-sm);font-family:var(--mono)} .ps1 .u{color:var(--g-dim)} .ps1 .p{color:var(--g-mid)} #q{all:unset;flex:1;min-width:0;color:var(--g-hi);caret-color:var(--g-hi);font-family:var(--mono); font-size:var(--t-md);min-height:24px} #q::placeholder{color:var(--g-faint)} #q::-webkit-search-cancel-button{-webkit-appearance:none} .cursor{display:inline-block;width:7px;height:1em;background:var(--g-dim);translate:0 2px; animation:blink 1.15s steps(2,start) infinite;flex:none} @keyframes blink{to{visibility:hidden}} @media (prefers-reduced-motion:reduce){.cursor{animation:none;opacity:.55}} /* ============================================================ 2. LAYOUT */ .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 80px} .wrap.reading{max-width:calc(var(--measure) + 2*32px)} .shell{display:grid;grid-template-columns:minmax(0,var(--col)) var(--rail); gap:0 var(--gap);align-items:start;justify-content:center} .feed{min-width:0;padding:var(--sp-4) 0 var(--sp-5)} .rail{border-left:1px solid var(--line);padding:var(--sp-4) 0 var(--sp-5) var(--sp-3); min-width:0;font-size:var(--t-md)} /* ============================================================ 3. PUBLICATION HEADER Medium ma nad feedom hlavicku publikacie: nazov, jedna veta, akcie, tab riadok. Nahradila hero + 4 odseky prozy + samostatny search blok. */ .pubhead{padding:var(--sp-4) 0 0;max-width:var(--col)} .pubhead h1{font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.03em;color:var(--g-hi); margin:0 0 12px;font-family:var(--mono);font-weight:700} /* rubrika / uroven / signals: rovnaka hlavicka, ale titulok je nazov temy, nie znacka */ .pubhead.sec{padding-bottom:var(--sp-2)} .pubhead.sec h1{font-family:var(--sans);font-size:clamp(28px,4vw,36px);letter-spacing:-.025em; margin-bottom:8px} .pubhead.sec .tagline{margin:0} .pubhead .lead{color:var(--g);font-size:var(--t-lead);line-height:1.5;margin:0 0 var(--sp-3); max-width:58ch;text-wrap:balance} .pubhead .lead strong{color:var(--g-hi);font-weight:600} .acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--sp-2)} .act{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:var(--t-md); color:var(--g-mid);min-height:40px;display:inline-flex;align-items:center;gap:8px; transition:border-color .15s,color .15s} .act:hover,.act:focus-visible{border-color:var(--g-dim);color:var(--g-hi);background:var(--bg-alt)} .act.primary{background:var(--g);border-color:var(--g);color:var(--bg);text-shadow:none;font-weight:600} .act.primary:hover{background:var(--g-hi);border-color:var(--g-hi);color:var(--bg)} .act .fl{color:var(--g-faint);font-size:var(--t-sm);font-family:var(--mono)} .act.primary .fl{color:var(--bg);opacity:.7} .more{margin:0 0 var(--sp-2)} .more summary{cursor:pointer;color:var(--g-faint);font-size:var(--t-md);list-style:none;min-height:34px; display:inline-flex;align-items:center;font-family:var(--mono)} .more summary::-webkit-details-marker{display:none} .more summary::before{content:'+ ';color:var(--g-dim)} .more[open] summary::before{content:'- '} .more summary:hover{color:var(--g)} .more p{margin:12px 0 0;font-size:var(--t-base);color:var(--g-mid);max-width:62ch;line-height:1.65} .more .meta{color:var(--g-faint);font-size:var(--t-md)} /* tab riadok — vodorovny, scrollovatelny, aktivny ma 1px podciarknutie */ /* gap 26 -> 18: pri 9 rubrikach mal riadok 763px v 680px kolone, cize posledna rubrika (Patterns, najvacsia sekcia) bola mimo obrazu bez akehokolvek naznaku. Maska vpravo je poistka, ak rubrik pribudne. */ .tabs{display:flex;gap:18px;overflow-x:auto;border-bottom:1px solid var(--line); margin:0;padding:0;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tab{color:var(--g-faint);font-size:var(--t-md);white-space:nowrap;padding:14px 0 13px; border-bottom:1px solid transparent;margin-bottom:-1px;flex:none} .tab:hover{color:var(--g)} .tab.on{color:var(--g-hi);border-bottom-color:var(--g-hi)} .tab .n{color:var(--g-faint);font-size:var(--t-xs);font-family:var(--mono);margin-left:5px} /* ============================================================ 4. STORY KARTA Jedna vertikalna kolona: kicker → titulok → perex → meta. Ziadna mriezka, ktora sa na uzkom displeji rozpada, a ziadny nazov suboru namiesto titulku. */ ul.ls{list-style:none;margin:0;padding:0} ul.ls a.row{display:grid;gap:6px 0;grid-template-columns:1fr;padding:22px 0; border-bottom:1px solid var(--line);align-content:start} ul.ls li:first-child a.row{padding-top:6px} .kicker{color:var(--g-faint);font-size:var(--t-xs);font-family:var(--mono);letter-spacing:.08em; text-transform:uppercase;display:flex;gap:8px;align-items:center} .kicker .sq{color:var(--g-dim)} /* .name je h2 kvoli heading navigacii screen readerom — vizual musi zostat identicky s povodnym spanom, preto explicitny reset margin. */ .name{color:var(--g-hi);font-weight:700;font-size:var(--t-card);letter-spacing:-.02em; line-height:1.28;text-wrap:balance;margin:0} main:focus{outline:none} main:focus-visible{outline:2px solid var(--g-dim);outline-offset:4px} ul.ls a.row:hover .name,ul.ls a.row:focus-visible .name{text-decoration:underline; text-underline-offset:3px;text-decoration-color:var(--g-dim)} .desc{color:var(--g-mid);font-size:var(--t-base);line-height:1.55;max-width:62ch; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rowmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--g-faint); font-size:var(--t-sm);font-family:var(--mono);margin-top:2px;font-variant-numeric:tabular-nums} .rowmeta span+span::before{content:'·';padding-right:8px;color:var(--g-faint);opacity:.7} .rowmeta .file{color:var(--g-dim)} .st{color:var(--g)} .st.s{color:var(--g-dim)} .st.e{color:var(--g-faint)} /* sekcny riadok (priecinok) — v raile, kompaktny, nie ako artikel */ .seclist{list-style:none;margin:0;padding:0} .seclist a{display:flex;align-items:baseline;gap:8px;padding:7px 0;color:var(--g-mid); font-size:var(--t-md);border-bottom:1px solid transparent} .seclist a:hover{color:var(--g-hi)} .seclist .n{margin-left:auto;color:var(--g-faint);font-size:var(--t-xs);font-family:var(--mono);flex:none} .seclist .sd{color:var(--g-faint);font-size:var(--t-sm);display:block;line-height:1.4; padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:2px} .total{color:var(--g-faint);font-size:var(--t-sm);margin:0 0 var(--sp-2);font-family:var(--mono); letter-spacing:.04em} .prov{color:var(--g-faint);font-size:var(--t-sm);margin:-4px 0 var(--sp-3);max-width:70ch; line-height:1.55;padding-left:10px;border-left:2px solid var(--line)} .soon{color:var(--g-faint);font-size:var(--t-sm);margin:var(--sp-3) 0 0;padding-top:14px; border-top:1px solid var(--line);line-height:1.55} hr.sep{border:0;border-top:1px solid var(--line);margin:var(--sp-4) 0} .crumb{color:var(--g-faint);font-size:var(--t-sm);margin:var(--sp-3) 0 var(--sp-2);font-family:var(--mono)} .crumb a{color:var(--g-mid)} .crumb a:hover{color:var(--g-hi)} .tagline{color:var(--g-mid);font-size:var(--t-base);margin:8px 0 0;max-width:62ch;line-height:1.55} /* ============================================================ 5. RAIL */ .railbox{margin:0 0 var(--sp-4)} .railbox h2{font-size:var(--t-md);letter-spacing:0;color:var(--g-hi);margin:0 0 12px; font-weight:700;text-transform:none;font-family:var(--sans)} .railbox h2 .k{color:var(--g-faint);font-weight:400;font-size:var(--t-xs);font-family:var(--mono); margin-left:7px;letter-spacing:.06em} .pick{display:block;padding:9px 0;border-bottom:1px solid var(--line)} .pick:last-child{border-bottom:none} .pick .pt{color:var(--g-hi);font-size:var(--t-base);font-weight:600;line-height:1.35; letter-spacing:-.01em;display:block} .pick:hover .pt{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--g-dim)} .pick .pm{color:var(--g-faint);font-size:var(--t-xs);font-family:var(--mono);display:block;margin-top:3px} .pills{display:flex;flex-wrap:wrap;gap:8px} .pill{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:var(--t-sm); color:var(--g-mid);background:var(--bg-alt);display:inline-flex;align-items:center;gap:6px; min-height:32px;font-family:var(--mono)} .pill:hover{border-color:var(--g-dim);color:var(--g-hi)} .pill .fl{color:var(--g-faint);font-size:var(--t-xs)} .panel .line{display:flex;gap:10px;padding:5px 0;font-size:var(--t-sm);flex-wrap:wrap; border-bottom:1px solid var(--line)} .panel .line:last-child{border-bottom:none} .panel .line .k{color:var(--g-faint);flex:1 1 auto;font-family:var(--mono);font-size:var(--t-xs); letter-spacing:.05em;text-transform:uppercase} .panel .line .v{color:var(--g);font-family:var(--mono);font-size:var(--t-sm);text-align:right} .bar{letter-spacing:-1px;color:var(--g)} .bar .e{color:var(--g-faint)} .railfoot{color:var(--g-faint);font-size:var(--t-sm);line-height:1.7} .railfoot a{color:var(--g-faint);margin-right:14px;white-space:nowrap} .railfoot a:hover{color:var(--g-hi)} .railfoot .disclosure{margin:0 0 12px;line-height:1.6} /* ============================================================ 6. VYHLADAVANIE */ #results{padding-top:var(--sp-3)} #results a.hit{display:block;padding:16px 0;border-bottom:1px solid var(--line)} #results a.hit:hover .t{text-decoration:underline;text-underline-offset:3px} .hit .t{color:var(--g-hi);font-weight:700;font-size:var(--t-lg);letter-spacing:-.01em} .hit .m{color:var(--g-faint);font-size:var(--t-xs);font-family:var(--mono);display:block;margin-top:4px} .hit .s{color:var(--g-mid);font-size:var(--t-base);display:block;margin-top:5px;max-width:62ch} .hit .u{color:var(--g-dim);font-size:var(--t-xs);font-family:var(--mono);display:block;margin-top:5px} mark{background:var(--g);color:var(--bg);text-shadow:none;padding:0 2px;border-radius:2px} .none{color:var(--g-mid);font-size:var(--t-base);font-family:var(--mono);padding-top:var(--sp-3)} .none b{color:var(--g-hi)} /* ============================================================ 7. CO PRIBUDLO */ .whatsnew{border:1px solid var(--line);border-radius:8px;background:var(--bg-alt); padding:16px 18px;margin:0 0 var(--sp-3)} .whatsnew .k{color:var(--g-faint);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase; display:block;margin-bottom:8px;font-family:var(--mono)} .whatsnew ul.ls a.row{padding:10px 0;gap:4px 0} .whatsnew ul.ls li:last-child a.row{border-bottom:none;padding-bottom:0} .whatsnew .name{font-size:var(--t-base)} .whatsnew .desc{-webkit-line-clamp:1;font-size:var(--t-sm)} /* ============================================================ 8. CLANOK Pevna miera 680px, meta riadok medzi linkami, telo 18px/1.75. */ .article{max-width:var(--measure);margin:0 auto} .article h1{color:var(--g-hi);font-size:var(--t-h1);line-height:1.16;margin:var(--sp-3) 0 14px; letter-spacing:-.03em;text-wrap:balance;font-family:var(--sans);font-weight:700} .article .lede{color:var(--g-mid);font-size:var(--t-lead);line-height:1.45;margin:0 0 var(--sp-3); max-width:56ch} .artmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 var(--sp-3); color:var(--g-faint);font-size:var(--t-sm);font-family:var(--mono); font-variant-numeric:tabular-nums} .artmeta .who{color:var(--g-mid)} .artmeta span+span::before{content:'·';padding-right:10px;opacity:.7} .artmeta .acts2{margin-left:auto;display:flex;gap:8px} .artmeta .acts2::before{content:none} .article h2{color:var(--g-hi);font-size:var(--t-h2);margin:var(--sp-5) 0 var(--sp-2); font-family:var(--sans);letter-spacing:-.02em;line-height:1.25;scroll-margin-top:calc(var(--nav) + 16px); font-weight:700} .article h3{color:var(--g-hi);font-size:var(--t-h3);margin:var(--sp-4) 0 var(--sp-1); font-family:var(--sans);letter-spacing:-.01em;font-weight:700;line-height:1.3} .article h4{color:var(--g);font-size:var(--t-lg);margin:var(--sp-3) 0 6px;font-family:var(--mono); font-weight:600} .article p,.article li{font-size:var(--t-lg);line-height:1.75;color:var(--g)} .article p{margin:0 0 var(--sp-3)} .article ul,.article ol{margin:0 0 var(--sp-3);padding-left:26px} .article li{margin-bottom:10px} .article li::marker{color:var(--g-faint)} .article code{background:var(--bg-alt);border:1px solid var(--line);border-radius:3px; padding:1px 5px;font-size:.88em;color:var(--g-hi);font-family:var(--mono)} /* Krizovy odkaz v bloku "See also". `.article code` si nastavuje vlastnu farbu, takze bez tohto pravidla by kliknutelny slug vyzeral presne ako nekliknutelny inline kod — odkaz by existoval, ale citatel by nemal ako zistit, ze tam je. */ /* Specificita: `.article a.xref` (0,2,1) MUSI prebit `.article a` (0,1,1), ktore je definovane NIZSIE v subore. Prva verzia pouzivala `a.xref` — rovnaka specificita ako `.article a`, takze pri zhode vyhralo neskorsie pravidlo a `border-bottom:0` bol mrtvy kod: odkaz mal podtrhnutie z `.article a` A NAVYSE ramik z `code`, teda dvojitu ciaru. */ .article a.xref{border-bottom:0} .article a.xref code{border-color:var(--g-faint);border-bottom-style:solid} .article a.xref:hover code,.article a.xref:focus-visible code{color:var(--g-hi); border-color:var(--g-hi);background:var(--bg)} .article pre{background:var(--bg-alt);border:1px solid var(--line);border-radius:6px; padding:16px 18px;overflow-x:auto;margin:0 0 var(--sp-3);font-size:var(--t-md); font-family:var(--mono);line-height:1.6} .article pre code{background:none;border:0;padding:0;color:var(--g);font-size:1em} .article blockquote{border-left:3px solid var(--g-dim);margin:0 0 var(--sp-3); padding:2px 0 2px 20px;color:var(--g-mid);font-size:var(--t-lg);line-height:1.7;font-style:italic} .article blockquote p{margin:0} .article hr{border:0;border-top:1px solid var(--line);margin:var(--sp-4) 0} .article strong{color:var(--g-hi);font-weight:600} .article a{color:var(--g-hi);border-bottom:1px solid var(--g-faint)} .article a:hover{border-bottom-color:var(--g-hi)} .stalebar{border:1px solid var(--line);border-left:3px solid var(--g-dim);border-radius:0 6px 6px 0; background:var(--bg-alt);color:var(--g-mid);padding:12px 16px;font-size:var(--t-md); margin:0 0 var(--sp-3);max-width:var(--measure)} .tldr{border-left:3px solid var(--g-dim);padding:2px 0 2px 20px;margin:0 0 var(--sp-3)} .tldr .k{color:var(--g-faint);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase; display:block;margin-bottom:5px;font-family:var(--mono)} .tldr p{margin:0;color:var(--g-hi);font-size:var(--t-lg);line-height:1.6} .article .stamp{color:var(--g-faint);font-size:var(--t-xs);margin:0;font-family:var(--mono)} /* frontmatter — zabaleny, otvara sa na poziadanie */ .fmwrap{margin:0 0 var(--sp-3);max-width:var(--measure)} .fmwrap summary{cursor:pointer;color:var(--g-faint);font-size:var(--t-xs);list-style:none; min-height:32px;display:inline-flex;align-items:center;letter-spacing:.03em;font-family:var(--mono)} .fmwrap summary::-webkit-details-marker{display:none} .fmwrap summary::before{content:'+ ';color:var(--g-dim)} .fmwrap[open] summary::before{content:'- '} .fmwrap summary:hover{color:var(--g)} .fm{border:1px solid var(--line);background:var(--bg-alt);border-radius:6px; padding:14px 16px;margin-top:var(--sp-1);font-size:var(--t-sm);overflow-x:auto;font-family:var(--mono)} .fmline{color:var(--g-faint)} .fmrow{display:flex;gap:10px;padding:1px 0} .fk{color:var(--g-faint);min-width:14ch;flex:none} .fv{color:var(--g)} .fv a{color:var(--g-hi);border-bottom:1px solid var(--line)} .fv a:hover{border-bottom-color:var(--g)} /* TOC */ .toc{border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin:0 0 var(--sp-4); background:var(--bg-alt)} .toc .k{color:var(--g-faint);font-size:var(--t-xs);letter-spacing:.1em;display:block;margin-bottom:7px; text-transform:uppercase;font-family:var(--mono)} .toc ol{margin:0;padding-left:20px;color:var(--g-mid)} .toc li{margin-bottom:5px;font-size:var(--t-md)} .toc a{border-bottom:1px solid transparent} .toc a:hover{color:var(--g-hi);border-bottom-color:var(--g-dim)} /* tabulky */ .tblwrap{overflow-x:auto;margin:0 0 var(--sp-3);border:1px solid var(--line);border-radius:6px; -webkit-overflow-scrolling:touch} .article table{border-collapse:collapse;width:100%;font-size:var(--t-md); font-variant-numeric:tabular-nums} .article th{text-align:left;color:var(--g-faint);font-weight:400;font-size:var(--t-xs); letter-spacing:.09em;text-transform:uppercase;padding:10px 14px;white-space:nowrap; background:var(--bg-alt);border-bottom:1px solid var(--line);font-family:var(--mono)} .article td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top; color:var(--g);line-height:1.55} .article tbody tr:last-child td{border-bottom:none} .article td strong{color:var(--g-hi)} /* tagy pod clankom */ .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-4) 0 0;max-width:var(--measure)} /* prev / next + suvisiace */ .pnwrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:var(--sp-4) 0 0;max-width:var(--measure)} .pn{border:1px solid var(--line);border-radius:8px;padding:14px 16px;font-size:var(--t-md); color:var(--g-mid);min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:5px; line-height:1.35} .pn:hover{border-color:var(--g-dim);color:var(--g-hi);background:var(--bg-alt)} .pn .k{color:var(--g-faint);font-size:var(--t-xs);letter-spacing:.08em;font-family:var(--mono)} .pn.next{text-align:right;grid-column:2} .pn.prev{grid-column:1} .related{margin:var(--sp-5) 0 0;max-width:var(--measure);border-top:1px solid var(--line); padding-top:var(--sp-3)} .related h2{font-size:var(--t-md);color:var(--g-hi);margin:0 0 var(--sp-1);font-weight:700} .related h2 .k{color:var(--g-faint);font-weight:400;font-size:var(--t-xs);font-family:var(--mono); margin-left:7px} /* hlasovanie */ .fb{margin:var(--sp-5) 0 0;max-width:var(--measure);border:1px solid var(--line);border-radius:8px; background:var(--bg-alt);padding:18px 20px} .fb h2{font-size:var(--t-md);color:var(--g-hi);margin:0 0 14px;font-weight:700} .fbrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .fbrow .q{color:var(--g-mid);font-size:var(--t-md);min-width:19ch} .vt{border:1px solid var(--line);background:var(--bg);color:var(--g-mid);border-radius:999px; padding:7px 16px;font-size:var(--t-sm);cursor:pointer;font-family:var(--mono);min-height:38px} .vt:hover{border-color:var(--g-dim);color:var(--g-hi)} .vt.done{opacity:.45;cursor:default;pointer-events:none} .vt.picked{border-color:var(--g);color:var(--g-hi);opacity:1} .cnt{color:var(--g-faint);font-size:var(--t-sm);font-family:var(--mono)} .fbnote{color:var(--g-faint);font-size:var(--t-sm);margin:12px 0 0;line-height:1.6} /* ============================================================ 9. AGENT BOX / CMD */ .agentbox{border:1px solid var(--line);border-radius:8px;background:var(--bg-alt); padding:20px 22px;margin:var(--sp-4) 0 0} .agentbox h2{margin:0 0 10px;color:var(--g-hi);font-size:var(--t-lg);font-weight:700; letter-spacing:-.01em} .agentbox p{margin:0 0 14px;color:var(--g-mid);font-size:var(--t-base);max-width:64ch;line-height:1.6} .cmds{display:flex;flex-wrap:wrap;gap:9px} .cmd{border:1px solid var(--line);background:var(--bg);color:var(--g-mid);border-radius:999px; padding:8px 15px;font-size:var(--t-sm);cursor:pointer;font-family:var(--mono);min-height:38px; text-shadow:var(--glow);display:inline-flex;align-items:center;gap:6px} .cmd:hover{border-color:var(--g-dim);color:var(--g-hi)} .cmd .fl{color:var(--g-faint)} .cmd:hover .fl{color:var(--g)} .artcmds{margin:0} /* ============================================================ 10. SIGNALS */ .sigmini{color:var(--g-mid);font-size:var(--t-sm);margin:0 0 9px;padding-left:12px; border-left:1px solid var(--line);line-height:1.5} .sigmini .sh{color:var(--g-hi)} .boardform{border:1px solid var(--line);border-radius:8px;background:var(--bg-alt); padding:18px 20px;margin:var(--sp-3) 0 var(--sp-4);max-width:var(--measure)} .boardform textarea{width:100%;background:var(--bg);color:var(--g-hi);border:1px solid var(--line); border-radius:6px;padding:12px 14px;font-family:var(--mono);font-size:15px;line-height:1.55;resize:vertical} .boardform textarea:focus{outline:none;border-color:var(--g-dim)} .brow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px} .brow input[type=text]{background:var(--bg);color:var(--g-hi);border:1px solid var(--line);border-radius:999px; padding:9px 14px;font-family:var(--mono);font-size:var(--t-md);min-height:40px;flex:1 1 16ch;min-width:0} .brow input:focus{outline:none;border-color:var(--g-dim)} .brow .left{color:var(--g-faint);font-size:var(--t-xs);min-width:4ch;text-align:right;font-family:var(--mono)} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} ul.signals{list-style:none;margin:0;padding:0;max-width:var(--measure)} .sig{border-bottom:1px solid var(--line);padding:16px 0} .sig:last-child{border-bottom:none} .sig .sd{color:var(--g-faint);font-size:var(--t-xs);margin-right:10px;font-family:var(--mono)} .sig .sh{color:var(--g-hi);font-size:var(--t-md)} .sig p{margin:6px 0 0;color:var(--g);font-size:var(--t-base);line-height:1.6} .sig.none{color:var(--g-faint);font-size:var(--t-md)} .bandh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:var(--t-md); color:var(--g-hi);margin:var(--sp-4) 0 var(--sp-1);font-weight:700} .bandh .bd{color:var(--g-faint);font-size:var(--t-sm);font-weight:400} /* ============================================================ 11. FOOTER */ footer{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line); font-size:var(--t-sm);color:var(--g-faint)} footer .disclosure{color:var(--g-faint);font-size:var(--t-sm);line-height:1.65;margin:0 0 14px; max-width:70ch} /* Kontakt: mono ako zvysok chrome, aby to citatel precital ako adresu, nie ako vetu. Na uzkom displeji sa dve adresy zlomia pod seba — oddelovac `·` by inak visel na konci riadku. */ footer .contact{font-family:var(--mono);font-size:var(--t-sm);margin:0 0 14px; display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline} footer .contact a{min-height:0} footer .fl{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline} footer a{min-height:32px;display:inline-flex;align-items:center;font-family:var(--mono)} footer a:hover{color:var(--g-hi)} footer .end{margin-top:16px;font-family:var(--mono);color:var(--g-faint)} #toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));translate:-50% 0; background:var(--g);color:var(--bg);text-shadow:none;padding:10px 18px;border-radius:999px; font-size:var(--t-md);opacity:0;pointer-events:none;transition:opacity .18s;max-width:90vw;z-index:50} #toast.on{opacity:1} /* ============================================================ 12. RESPONZIVITA */ @media(max-width:1060px){ .shell{grid-template-columns:minmax(0,1fr)} .rail{border-left:none;border-top:1px solid var(--line);padding:var(--sp-3) 0 var(--sp-5); max-width:var(--col)} .railgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--sp-4)} } /* bar drzi 5 prvkov v jednom riadku; motto padne prve, aby sa hladanie nezmackalo */ @media(max-width:980px){.topbar .motto{display:none}} @media(max-width:760px){ :root{--fs:15.5px;--t-lg:17px} .topbar .in{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px 14px} .cmdbar{order:3;flex:1 1 100%;max-width:none} .ver,.topbar .motto{display:none} /* motto ostava na homepage vo velkej verzii */ #q{font-size:16px} .pnwrap{grid-template-columns:1fr} .pn.next,.pn.prev{grid-column:1;text-align:left} .fbrow .q{min-width:100%} .act{flex:1 1 auto;justify-content:center} .article p,.article li{font-size:17px} } @media(max-width:430px){ .fmrow{flex-direction:column;gap:0} .fk{min-width:0} .panel .line{flex-direction:column;gap:0} .panel .line .v{text-align:left} .desc{-webkit-line-clamp:3} } /* ============================================================ 13. OPRAVY z auditu 15.8.2026 Vsetko nizsie odstranuje nezrovnalost, nepridava dekoraciu. Poradie = poradie nalezov. */ /* --- B1: jedna lava hrana ------------------------------------------------- Cely web mal dve mriezky: bar bezal v 1132px, citacia stranka v 744px, cize znacka zacinala na 186px a nadpis clanku na 380px. Bar zostava cez celu sirku (jeho spodna linka drzi layout), ale jeho OBSAH sa zarovna s obsahom stranky. */ .topbar.reading .in{max-width:calc(var(--measure) + 2*32px)} /* Uzsi bar neuzivi pat prvkov: motto a verzia su sekundarne (na uzkych displejoch padaju uz teraz), znacka + hladanie + akcie musia zostat citatelne. */ .topbar.reading .motto,.topbar.reading .ver{display:none} .topbar.reading .cmdbar{flex:1 1 180px;max-width:none;min-width:150px} /* --- B2: tab bar nesmie ticho orezavat ------------------------------------ Maska signalizuje, ze riadok pokracuje; JS navyse doscrolluje aktivnu rubriku. */ .tabs{position:relative;scroll-padding-inline:24px} .tabwrap{position:relative} .tabwrap::after{content:'';position:absolute;right:0;top:0;bottom:1px;width:44px;pointer-events:none; background:linear-gradient(to right,transparent,var(--bg));opacity:0;transition:opacity .15s} .tabwrap.overflowing::after{opacity:1} /* --- B3: sekcna stranka ma rovnaku architekturu ako homepage -------------- Predtym: sekcie bezali v 744px stlpci bez railu, takze pri 1440px ostalo po oboch stranach ~380px prazdna a navigacia (ktore dalsie sekcie existuju) nebola nikde. Rail je tu uzsi — nesie len orientaciu, nie cely register. */ .rail .railbox:last-child{margin-bottom:0} .rail.slim{font-size:var(--t-sm)} .rail.slim .railbox h2{margin-bottom:9px} /* --- C2: pri hladani zhasne vsetko, co uz nie je otazkou ------------------ Vysledok zacinal ~680px pod ohybom, pod nedotknutym hero blokom a tabmi. */ body.searching .pubhead .lead, body.searching .pubhead .acts, body.searching .pubhead .more, body.searching .pubhead .motto.big, body.searching .tabwrap, body.searching #whatsnew, body.searching .rail{display:none} body.searching .pubhead{padding:var(--sp-3) 0 0} body.searching .pubhead h1{margin-bottom:0} body.searching .feed{padding-top:var(--sp-2)} body.searching #results{padding-top:0} body.searching .shell{grid-template-columns:minmax(0,1fr)} .searchnote{color:var(--g-faint);font-size:var(--t-sm);font-family:var(--mono);margin:0 0 var(--sp-2)} /* --- C1: mobil ------------------------------------------------------------ Domovska stranka mala na 390px 12 354px vysky (~33 obrazoviek) a rail bol vysypany az za 12 kartami, kde ho nikto nedosiahne. Na mobile ide navigacia NAD feed a bloky railu su zbalitelne. */ .showmore{display:none} @media(max-width:760px){ .showmore{display:flex;width:100%;justify-content:center;align-items:center;gap:8px; border:1px solid var(--line);background:var(--bg-alt);color:var(--g-mid);border-radius:999px; padding:11px 18px;font-family:var(--mono);font-size:var(--t-sm);cursor:pointer;min-height:44px; margin:var(--sp-2) 0 0} .showmore:hover{border-color:var(--g-dim);color:var(--g-hi)} ul.ls li.overflow{display:none} ul.ls.expanded li.overflow{display:list-item} /* zbalitelny rail: nadpis boxu sa stane prepinacom */ .railgrid{display:block} .railbox{margin-bottom:var(--sp-2);border-bottom:1px solid var(--line);padding-bottom:var(--sp-2)} .railbox.collapsible > h2{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;margin:0} .railbox.collapsible > h2::after{content:'+';margin-left:auto;color:var(--g-faint);font-family:var(--mono)} .railbox.collapsible.open > h2::after{content:'\2212'} .railbox.collapsible > .rbody{display:none;padding-top:10px} .railbox.collapsible.open > .rbody{display:block} } /* ============================================================ 14. RATING Kazdy artefakt nesie vlastne hodnotenie. Zamerne bez farebneho semaforu: zelena znamka pri dobrom a cervena pri slabom by z toho spravila recenznu znacku. Cislo staci a zvysok stranky ostava tichy. */ .rowmeta .rt{color:var(--g-dim)} .rating{border:1px solid var(--line);border-radius:8px;background:var(--bg-alt); padding:14px 16px;margin:0 0 var(--sp-3);max-width:var(--measure);font-size:var(--t-md)} .rating .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .rating .val{font-family:var(--mono);font-size:22px;color:var(--g-hi);letter-spacing:-.02em; font-variant-numeric:tabular-nums} .rating .val span{font-size:var(--t-sm);color:var(--g-faint)} .rating .k{color:var(--g-faint);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase; font-family:var(--mono)} .rating .meter{flex:1 1 120px;min-width:90px;height:4px;background:var(--bg);border-radius:2px; overflow:hidden;border:1px solid var(--line)} .rating .meter i{display:block;height:100%;background:var(--g-dim)} .rating .ax{margin:10px 0 0;color:var(--g-mid);font-family:var(--mono);font-size:var(--t-sm); line-height:1.7} .rating .ax b{color:var(--g-hi);font-weight:400} .rating .src{margin:9px 0 0;color:var(--g-faint);font-size:var(--t-sm);line-height:1.6} .rating .src a{color:var(--g-mid);border-bottom:1px solid var(--line)} .rating .src a:hover{color:var(--g-hi);border-bottom-color:var(--g-dim)} /* tabulka hodnoteni na /rating */ .rtab td.n,.rtab th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums; white-space:nowrap} .rtab td.tt{color:var(--g-hi)} .rtab td.tt .s{display:block;color:var(--g-faint);font-family:var(--mono);font-size:var(--t-xs); margin-top:2px} .rtab td.sc{font-family:var(--mono);color:var(--g-hi);text-align:right;white-space:nowrap} /* Stlpce osi su tlmene — hlavne cislo ostava celkove skore, osi su rozklad k nemu. Bez toho tabulka vyzera ako sest rovnocennych cisel a oko nema kam pristat. */ .rtab td.ax{color:var(--g-faint);font-size:var(--t-xs)} .rtab th[data-sort]{cursor:pointer;user-select:none} .rtab th[data-sort]:hover{color:var(--g-hi)} .rtab th[aria-sort]{color:var(--g-hi)} .rtab th[aria-sort]::after{content:" \2193";font-size:var(--t-xs)} .sortnote{color:var(--g-faint);font-size:var(--t-sm);max-width:var(--measure)} /* Rebricky podla osi: dva stlpce na sirokom, jeden na uzkom. */ .axgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--sp-3);margin:0 0 var(--sp-3)} .axtop{border:1px solid var(--line);border-radius:8px;background:var(--bg-alt);padding:14px 16px} .axtop h3{margin:0 0 10px;font-size:var(--t-md)} .axtop h3 .k{display:block;font-family:var(--mono);font-size:var(--t-xs); color:var(--g-faint);font-weight:400;margin-top:3px} .axlist{margin:0;padding-left:22px} .axlist li{margin-bottom:9px} .axlist .axv{font-family:var(--mono);color:var(--g-hi);margin-left:6px} .axlist .s{display:block;color:var(--g-faint);font-family:var(--mono);font-size:var(--t-xs); margin-top:1px} .rdist{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:9px; margin:0 0 var(--sp-3);max-width:var(--measure)} .rdist div{border:1px solid var(--line);border-radius:8px;background:var(--bg-alt);padding:11px 13px} .rdist .n{display:block;font-family:var(--mono);font-size:20px;color:var(--g-hi)} .rdist .l{display:block;font-size:var(--t-xs);color:var(--g-faint);font-family:var(--mono); letter-spacing:.06em;margin-top:2px} @media print{ body{text-shadow:none} .topbar,.agentbox,.tools,.artcmds,.fb,.boardform,.acts,.whatsnew,.rail,.tabs{display:none} .article{max-width:none} } /* ---------------------------------------------------------------- signature :: Znacka stanice (Palo 16.8.). Zije VYLUCNE v CSS — nikdy v texte nadpisu. Keby sla do markdownu, dostala by sa do `.md` zrkadiel, `llms.txt`, `all.md` aj `index.json`, cize presne do vrstvy, ktoru cita agent, a tam je to smeti. Vizualna vrstva pre cloveka, cista data pre stroj — to je cela teza stanice. Rozsah riadi `--sig-cards`: strukturalne nadpisy vzdy, nazvy kariet vo feede len ked to Palo zapne (35 h2.name na homepage = tapeta, nie podpis). Prístupnosť: `content: ":: " / ""` dava pseudo-elementu prazdny alt, takze citac obrazovky nehlasi "dvojbodka dvojbodka" pred kazdym nadpisom. Starsie prehliadace bez podpory alt syntaxe dostanu holy `":: "` z prveho pravidla. */ .pubhead h1::before, .article h1::before, .article h2::before, .article h3::before, .railbox h2::before, .agentbox h2::before, .related h2::before, .bandh::before, .none::before{ content:":: ";font-family:var(--mono);color:var(--g-dim);font-weight:400; letter-spacing:0;-webkit-user-select:none;user-select:none} @supports (content:"a" / "b"){ .pubhead h1::before, .article h1::before, .article h2::before, .article h3::before, .railbox h2::before, .agentbox h2::before, .related h2::before, .bandh::before, .none::before{content:":: " / ""} } /* h1 stanice je velky typograficky blok — znacka pri nom drzi optiku len zlahka */ .pubhead h1::before{color:var(--g-faint);font-size:.62em;vertical-align:.22em;margin-right:.12em} /* ============ v2 integracia 17.8.2026 — trate, citacia, status, freeze ============ Ziadne nove farby ani fonty: vsetko stoji na existujucich premennych, takze light aj dark rezim funguju bez druhej sady pravidiel a kontrasty ostavaju tie overene. */ /* --- read-only kill switch: musi byt vidno skor nez obsah, inak nema zmysel --- */ .frozenbar{margin:0;padding:10px var(--pad);background:var(--bg-hi);color:var(--g-hi); border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--t-sm); line-height:1.5;text-align:center} /* --- stabilne citacne ID v meta riadku clanku --- */ .artmeta .cid{font-family:var(--mono);color:var(--g-faint);letter-spacing:.02em} /* --- blok "cite this" --- */ .cite{margin:var(--sp-3) 0 0;border:1px solid var(--line);border-radius:8px; padding:12px 16px;background:var(--bg-alt)} .cite>summary{cursor:pointer;font-family:var(--mono);font-size:var(--t-sm); color:var(--g-mid);list-style:none} .cite>summary::-webkit-details-marker{display:none} .cite>summary::before{content:"+ ";color:var(--g-faint)} .cite[open]>summary::before{content:"− "} .cite>summary:hover{color:var(--g-hi)} .citenote{color:var(--g-faint);font-size:var(--t-sm);line-height:1.6;margin:12px 0} .citepre{margin:10px 0 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line); border-radius:6px;overflow-x:auto} .citepre code{font-family:var(--mono);font-size:var(--t-xs);color:var(--g-dim); white-space:pre-wrap;word-break:break-word} /* --- trat: cislovany zoznam krokov --- */ .track{list-style:none;padding:0;margin:var(--sp-3) 0 var(--sp-4);counter-reset:none} .tstep{border-bottom:1px solid var(--line)} .tstep:last-child{border-bottom:none} .tstep a{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline; padding:14px 0} .tstep .tn{font-family:var(--mono);font-size:var(--t-sm);color:var(--g-faint); grid-row:span 2;align-self:center} .tstep .tt{color:var(--g-hi);font-size:var(--t-base);font-weight:600;line-height:1.35} .tstep a:hover .tt{text-decoration:underline;text-underline-offset:3px} .tstep .tm{grid-column:2;color:var(--g-faint);font-family:var(--mono); font-size:var(--t-xs);margin-top:3px} /* --- status: pruh cisel; zdiela vzhlad s .rdist zo stranky rating --- */ .railbox .line .dim{color:var(--g-faint);font-size:var(--t-xs)} @media (max-width:640px){ .tstep a{column-gap:12px} .frozenbar{text-align:left} }