/* styl.css — review stránka, vizuální jazyk podle R-033. * * Typografická stránka: bílý LIST na světle šedém PLÁTNĚ. Oddělovačem je * vlasová linka, ne plocha. VŠECHNO ovládání sedí ve svislé liště ikon MIMO * list — od 9. 9. včetně voleb sazby, které se sem přestěhovaly z typografické * lišty. Ta tím zanikla; zbylé tři položky přebrala horní navigace. Vodorovné * pásy jsou tedy dva (navigace, pruh starší verze), dolní lišta neexistuje. * * ── SUPERSEDE: co v hlavičce stálo do 9. 9. 2026 (CLAUDE.md §7) ───────────── * * Původní znění, obojí ODVOLANÉ — nechává se tu, aby bylo vidět, co se změnilo: * * | Tři vodorovné pásy podle R-008. Ovládání patří nad a pod obsah, nikdy do * | boků: svislé lišty by ukusovaly právě tu šířku, kterou potřebuje text. * * ⚠️ NEPLATÍ — ruší R-033 (2026-09-09). Levá svislá lišta stojí MIMO list, na * plátně vedle něj, takže šířku textu neukusuje: sazbu dál řídí --sirka-listu. * Ruší se pravidlo, ne důvod, který za ním stál. Zároveň R-033 ruší i „jediné * místo akcí je dolní lišta" — dolní lišta je pryč a odeslání dávky sedí * u panelu připomínek (O-R3-B). * * | Primární zařízení je iPad. Dotykové cíle 44×44 px, žádné hover-only * | prvky — co jde vyvolat jen najetím myší, na dotyku neexistuje. * * ⚠️ NEPLATÍ — obrátil to už R-025 (2026-08-30): pracovní zařízení je NOTEBOOK, * iPad brány neobsluhuje a jen čte hotovou knihu. V CSS to deset dní nikdo * nepřepsal; R-033 (O-R2-B) to narovnává tady. Rozjížděcí lišta je proto * v pořádku — ale žádná akce nesmí být dostupná POUZE najetím myší. * ──────────────────────────────────────────────────────────────────────────── */ /* ══ PÍSMA — self-hosted, žádná cizí doména (R-010) ═══════════════════════════ * * Dva subsety na řez: `latin` a `latin-ext`. NENÍ to nadbytečnost — česká * diakritika (ě š č ř ž ů ď ť ň) leží v U+0100-02BA, tedy v latin-ext. * Se samotným `latin` by se háčky vysázely náhradním systémovým písmem * a text by se rozpadl na dvě různé kresby uprostřed slova. * Rozsahy jsou převzaté z fontsource, ne odhadnuté. */ @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/eb-garamond-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/eb-garamond-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("pisma/eb-garamond-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("pisma/eb-garamond-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("pisma/eb-garamond-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("pisma/eb-garamond-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/bitter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/bitter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Bitter"; font-style: italic; font-weight: 400; font-display: swap; src: url("pisma/bitter-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Bitter"; font-style: italic; font-weight: 400; font-display: swap; src: url("pisma/bitter-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap; src: url("pisma/bitter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap; src: url("pisma/bitter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("pisma/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("pisma/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/jetbrains-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("pisma/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ══ TOKENY ═══════════════════════════════════════════════════════════════════ */ :root { --lista-navigace: 44px; --rail: 52px; /* zavřená levá lišta */ --rail-otevreny: 208px; --tazna-zona: 24px; --panel-min: 340px; --rezerva-tlacitek: 140px; /* Rodiny. --pismo-proza přepíná volba „Písmo“. */ --serif: "EB Garamond", Georgia, "Times New Roman", serif; --slab: "Bitter", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --pismo-proza: var(--slab); /* Sazba (návrh, sekce 3.2) */ --proza-velikost: 1.125rem; --proza-proklad: 1.75; --skala-prozy: 1; --sirka-listu: 46em; /* ★ Činitel, ne velikost. Do 9. 9. tu stálo `--pismo-komentare: 100%` a uplatňovalo se jako `font-size` na .panel — jenže VŠECHNY texty uvnitř byly v `rem`, a `rem` se vztahuje ke kořeni, ne k rodiči. Volba proto zvětšovala jen to, co vlastní font-size nemá a dědí (odkaz na PR v hlavičce panelu), a nic víc. Bezrozměrný činitel v calc() tuhle závislost na dědičnosti ruší — a nesčítá se při vnoření. */ --skala-poznamek: 1; /* Plochy — světlý režim */ --platno: #eceae6; --list: #ffffff; --text: #1b1a18; --text-tlumeny: #6d675f; --linka: #d9d5ce; --linka-silna: #b9b3aa; /* Tmavý panel je tmavý v OBOU režimech — má být jiná zóna, ne pokračování textu. */ --panel-pozadi: #1a191d; --panel-text: #e6e2dc; --panel-tlumeny: #9a938a; --panel-linka: #33313a; /* Výstraha. NEPATŘÍ do palety akcentů — je to výjimka z pravidla jedné akcentové barvy (R-008, dodatek): přehlédnutý FAIL je dražší než rušivost. */ --fail: #B3261E; --fail-pozadi: #fbe9e7; /* Výchozí stav je ČERNOBÍLÝ — akcent se rovná barvě textu (R-033, O-R8-A). */ --akcent: var(--text); --akcent-panel: var(--panel-text); } /* ── Paleta akcentů, zadaná napevno (O-R8-A) ─────────────────────────────────── * Dvě hodnoty na odstín, protože panel je tmavý i ve světlém režimu. Volí se * JEDEN akcent; druhou hodnotu z něj odvozuje stylopis, ne uživatelka. * Kontrast změřen 2026-09-09 vůči listu #ffffff, plátnu #141317 a panelu * #1a191d — všech osm ≥ 4,5:1 na všech třech podkladech. */ :root[data-akcent="inkoust"] { --akcent: #1c4f8f; --akcent-panel: #8fb6e8; } :root[data-akcent="les"] { --akcent: #2c6248; --akcent-panel: #7fc4a1; } :root[data-akcent="vino"] { --akcent: #8f2540; --akcent-panel: #f09ab0; } :root[data-akcent="ambra"] { --akcent: #8a5a12; --akcent-panel: #e0b25f; } :root[data-akcent="svestka"] { --akcent: #6a3f8f; --akcent-panel: #c3a3e8; } :root[data-akcent="med"] { --akcent: #9c4a22; --akcent-panel: #eda37a; } :root[data-akcent="bridlice"] { --akcent: #3c5568; --akcent-panel: #9dbdd4; } /* ── Tmavý režim ───────────────────────────────────────────────────────────── * V tmavém režimu je akcentem panelová (světlejší) hodnota — tmavá by na * tmavém plátně neprošla kontrastem. */ @media (prefers-color-scheme: dark) { :root[data-motiv="auto"] { color-scheme: dark; --platno: #100f13; --list: #17161a; --text: #e6e2dc; --text-tlumeny: #948d85; --linka: #2e2c34; --linka-silna: #46434e; --fail: #E0564A; --fail-pozadi: #38201e; --akcent: var(--text); } :root[data-motiv="auto"][data-akcent="inkoust"] { --akcent: #8fb6e8; } :root[data-motiv="auto"][data-akcent="les"] { --akcent: #7fc4a1; } :root[data-motiv="auto"][data-akcent="vino"] { --akcent: #f09ab0; } :root[data-motiv="auto"][data-akcent="ambra"] { --akcent: #e0b25f; } :root[data-motiv="auto"][data-akcent="svestka"] { --akcent: #c3a3e8; } :root[data-motiv="auto"][data-akcent="med"] { --akcent: #eda37a; } :root[data-motiv="auto"][data-akcent="bridlice"] { --akcent: #9dbdd4; } } :root[data-motiv="tmavy"] { color-scheme: dark; --platno: #100f13; --list: #17161a; --text: #e6e2dc; --text-tlumeny: #948d85; --linka: #2e2c34; --linka-silna: #46434e; --fail: #E0564A; --fail-pozadi: #38201e; --akcent: var(--text); } :root[data-motiv="tmavy"][data-akcent="inkoust"] { --akcent: #8fb6e8; } :root[data-motiv="tmavy"][data-akcent="les"] { --akcent: #7fc4a1; } :root[data-motiv="tmavy"][data-akcent="vino"] { --akcent: #f09ab0; } :root[data-motiv="tmavy"][data-akcent="ambra"] { --akcent: #e0b25f; } :root[data-motiv="tmavy"][data-akcent="svestka"] { --akcent: #c3a3e8; } :root[data-motiv="tmavy"][data-akcent="med"] { --akcent: #eda37a; } :root[data-motiv="tmavy"][data-akcent="bridlice"] { --akcent: #9dbdd4; } :root[data-motiv="svetly"] { color-scheme: light; } /* ══ ZÁKLAD ═══════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--platno); color: var(--text); font-family: var(--sans); font-size: 100%; -webkit-text-size-adjust: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; } .skryty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .drobne { font-size: .8125rem; color: var(--text-tlumeny); } .mono { font-family: var(--mono); font-size: .6875rem; } /* Prostrkané kapitálky — bez prostrkání se slévají (návrh 3.2). */ .kapitalky { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-tlumeny); } /* ══ ROZVRŽENÍ ════════════════════════════════════════════════════════════════ */ /* ── Skořápka aplikace ──────────────────────────────────────────────────────── * * ★ ŘÁDKOVÝ grid s PEVNOU výškou — přesně ten model, který tu fungoval před * redesignem. První verze redesignu použila `grid-template-areas` se sloupcem * pro levou lištu; při prokliku 9. 9. panel dvakrát spadl pod list přes celou * šířku a příčinu se nepodařilo doložit — DOM i kaskáda vycházely správně. * Místo dalšího dohadování je tu zpátky konstrukce, o které je doloženo, že * v tomhle prohlížeči drží: řádky, žádné pojmenované oblasti, žádný sloupec * pro lištu. Lišta stojí MIMO grid jako `position: fixed` vrstva nad plátnem — * což je i přesnější provedení zadání „lišta mimo list“ (R-033). * * Pevná výška je nutná, aby list i panel rolovaly každý zvlášť; s `min-height` * roste třetí řádek do obsahu a vnitřní `overflow` nikdy nezabere. */ body.ctecka { height: 100dvh; overflow: hidden; } #aplikace { display: grid; grid-template-rows: var(--lista-navigace) auto 1fr; height: 100dvh; padding-left: var(--rail); } /* ── Levá svislá lišta ikon — MIMO list (R-033) ───────────────────────────── */ .rail { /* MIMO grid — fixed vrstva na plátně vlevo. Šířku textu neukusuje: grid má o ni odsazení (`padding-left` na #aplikace). */ position: fixed; left: 0; top: 0; bottom: 0; z-index: 5; width: var(--rail); display: flex; flex-direction: column; padding: 8px 0; background: var(--platno); border-right: 1px solid var(--linka); transition: width .14s ease; overflow: hidden; } /* Rozjezd drží i focus-within — jinak by lišta zmizela pod otevřeným rozbalovacím seznamem a při ovládání klávesnicí. */ .rail:hover, .rail:focus-within { width: var(--rail-otevreny); overflow-y: auto; /* šest voleb se nemusí vejít na nízké okno */ box-shadow: 1px 0 0 var(--linka); } .rail-polozka { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; border: 0; background: none; color: var(--text-tlumeny); font-family: var(--sans); font-size: .8125rem; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; } .rail-polozka .ikona { flex: 0 0 20px; text-align: center; font-size: 1rem; line-height: 1; } /* Popisek se objeví až po rozjetí. Sám o sobě není JEDINOU cestou k akci — ikona je klikatelná i v zavřeném stavu a nese title/aria-label (R-025). */ .rail-polozka .popis { opacity: 0; transition: opacity .1s ease; } .rail:hover .rail-polozka .popis, .rail:focus-within .rail-polozka .popis { opacity: 1; } .rail-polozka:hover { color: var(--text); } .rail-polozka.aktivni { color: var(--akcent); } .rail-polozka.aktivni .ikona { position: relative; } .rail-dole { margin-top: auto; } /* Skupina voleb sazby. Zavřená lišta ukazuje jen ikonu „Aa“ v .rail-hlavicka; samotné volby se objeví až po rozjetí — v 52px proužku by se nevešly. */ .rail-hlavicka { cursor: default; } .rail-volby { display: none; padding: 4px 16px 10px; } .rail:hover .rail-volby, .rail:focus-within .rail-volby { display: block; } .rail-volby label { display: block; margin-bottom: 10px; font-family: var(--sans); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tlumeny); } .rail-volby .volba { display: block; margin-top: 3px; letter-spacing: 0; text-transform: none; font-size: .8125rem; color: var(--text); } .rail-oddel { border-top: 1px solid var(--linka); margin: 8px 12px; } .rail-cislo { font-family: var(--mono); font-size: .75rem; color: var(--text); min-width: 20px; text-align: center; } /* ── Horní navigace ──────────────────────────────────────────────────────────── */ .navigace { grid-row: 1; display: flex; align-items: center; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--linka); } .znacka { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--text); color: var(--platno); font-family: var(--sans); font-size: .5625rem; font-weight: 500; letter-spacing: .08em; text-decoration: none; border-radius: 0; /* ostré rohy — jediný „těžký“ prvek stránky */ } .navigace nav { display: flex; gap: 18px; } .navigace nav a { text-decoration: none; } .navigace nav a:hover { color: var(--text); } .navigace .odsazovac { margin-left: auto; } /* ── Zrušená typografická lišta ─────────────────────────────────────────────── * Volby sazby se přestěhovaly do levé lišty (dodatek k R-033). Pás jako celek * zanikl; `.volba`, `.odkaz` a `.draft-info` žijí dál — první dvě v liště, * druhé dvě v navigaci. */ .volba { font-family: var(--sans); font-size: .8125rem; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--linka-silna); padding: 2px 2px 1px; cursor: pointer; width: 100%; } .volba:hover { border-bottom-color: var(--akcent); } .odkaz { color: var(--text-tlumeny); text-decoration: none; border-bottom: 1px solid var(--linka-silna); background: none; border-top: 0; border-left: 0; border-right: 0; font-family: var(--sans); font-size: .8125rem; padding: 0 0 1px; cursor: pointer; white-space: nowrap; } .odkaz:hover { color: var(--text); border-bottom-color: var(--akcent); } /* Statický údaj o draftu — BEZ historie verzí (R-033, O-R4). */ .draft-info { font-family: var(--mono); font-size: .6875rem; white-space: nowrap; } /* ── Střed ───────────────────────────────────────────────────────────────────── */ /* ★ ŽÁDNÉ var() V TÉHLE DEKLARACI. ★ * * Chrome při prokliku 9. 9. hlásil `gridTemplateColumns: '1111px'` — jedna * dráha místo tří. Deklarace tedy byla neplatná a engine ji zahodil celou. * Příčina je v tom, jak vznikala hodnota `--delic-pomer`: skládá se ŘETĚZENÍM * (`hodnota + "%"`) v hlavičkovém skriptu i v pouzij(). Cokoli nečíselného * v localStorage — prázdný řetězec, "undefined", nebo hodnota, která už `%` * obsahuje — vyrobí token jako `%`, `undefined%` nebo `62%%`. Jediný neplatný * token zneplatní CELOU deklaraci a grid spadne na jeden implicitní sloupec, * takže panel skončí POD listem přes celou šířku. A protože hodnota leží * v localStorage, přežije to reload i každou další opravu CSS — proto to * vydrželo tři prokliky, zatímco ostatní pravidla se měnila. * * Deklarace je proto konstantní a nedosaditelná: dvě pevné dráhy plus tažná * zóna mezi nimi. Nastavitelná šířka děliče se vrátí jako samostatná * návaznost, a tehdy NE přes var() v téhle deklaraci. * * ★ Hodnota níž je VÝCHOZÍ. Tažný dělič ji přepisuje zápisem CELÉ deklarace do * inline stylu `.stred` a seed v týmž způsobem vloženým pravidlem — obojí * po číselné kontrole a oříznutí na 300–560 px. Nikdy se sem nevrací var(): * neplatná hodnota tak zneplatní nanejvýš jeden zápis, ne tohle pravidlo. */ .stred { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) 24px 380px; min-height: 0; } #aplikace[data-panel="slozeny"] .stred { grid-template-columns: minmax(0, 1fr) 0 0; } #aplikace[data-panel="slozeny"] .delic, #aplikace[data-panel="slozeny"] .panel { display: none; } .okno-textu { overflow-y: auto; min-height: 0; padding: 32px 0 96px; background: var(--platno); } /* LIST — bílá plocha na plátně. Bez stínu a bez zaoblení. */ .sloupec { /* position: relative je NUTNÉ — .akce-odstavce se vůči němu pozicuje a stranka.js počítá offsetTop právě k němu. */ position: relative; background: var(--list); border: 1px solid var(--linka); margin: 0 auto; padding: 56px clamp(24px, 5vw, 64px) 80px; max-width: min(var(--sirka-listu), 100% - var(--rezerva-tlacitek)); } /* ── Článek ──────────────────────────────────────────────────────────────────── */ .kicker { font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-tlumeny); margin: 0 0 14px; } .titulek { font-family: var(--serif); font-size: 2.5rem; line-height: 1.15; letter-spacing: -.01em; font-weight: 400; margin: 0 0 12px; } .meta { font-family: var(--sans); font-size: .8125rem; line-height: 1.5; letter-spacing: .02em; color: var(--text-tlumeny); margin: 0 0 34px; padding-bottom: 22px; border-bottom: 1px solid var(--linka); } .predel-sceny { margin: 34px 0 26px; text-align: center; } .predel-sceny .scene-id { font-family: var(--mono); font-size: .6875rem; color: var(--text-tlumeny); letter-spacing: .04em; } .odstavec { font-family: var(--pismo-proza); font-size: calc(var(--proza-velikost) * var(--skala-prozy)); line-height: var(--proza-proklad); margin: 0 0 1.15em; padding: 2px 0 2px 18px; border-left: 2px solid transparent; cursor: pointer; } .odstavec.replika { padding-left: 30px; } /* Vybraný odstavec = TENKÁ SVISLÁ LINKA, žádné podbarvení (R-033). Souvislý výběr splývá do jednoho svislého tahu: sousední vybrané odstavce mají zrušené mezery mezi linkami, takže rozsah je vidět jako jeden pruh, ne jako přerušovaná řada čárek (návrh 1.5). */ .odstavec.vybrany { border-left-color: var(--akcent); background: none; } .odstavec.vybrany + .odstavec.vybrany { margin-top: -1.15em; padding-top: 1.17em; } /* ★ Žádný rámeček kolem dokola. Obecné :focus-visible výš kreslí `outline` po celém obvodu — u odstavce to čtenářka vidí jako orámování a jde to proti „jen tenká svislá linka“ (návrh 1.5). Fokus se tu proto značí ZESÍLENOU TOUŽ LINKOU, ne obrysem. Viditelný pro klávesnici zůstává. */ .odstavec:focus { outline: none; } .odstavec:focus-visible { outline: none; border-left-color: var(--akcent); box-shadow: inset 3px 0 0 -1px var(--akcent); } .konec-textu { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linka); text-align: center; color: var(--text-tlumeny); font-family: var(--sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } /* ── Rozcestí u odstavce (R-008 — chování se NEMĚNÍ, jen vzhled) ───────────── */ /* Rozcestí u odstavce (R-008). JS ho přesouvá za vybraný odstavec a nastavuje `top` podle jeho offsetTop (stranka.js, ukazRozcesti) — musí tedy být ABSOLUTNĚ pozicované vůči .sloupec, jinak se `top` zahodí a blok se položí přes text. Geometrie je DOSLOVA ta předredesignová, o které je doloženo, že fungovala; mění se jen vzhled na podtržené odkazy. Šířka se nefixuje — shrink-to-fit se vejde do rezervy sám. */ .akce-odstavce { position: absolute; left: 100%; margin-left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 3; } /* ★ BEZ TOHOHLE ŘÁDKU JE ROZCESTÍ VIDĚT POŘÁD. Autorské `display: flex` výš přebíjí pravidlo prohlížeče [hidden]{display:none}, takže skrytí, které JS dělá přes `akce.hidden = true`, by neplatilo. V první verzi redesignu tenhle řádek chyběl. */ .akce-odstavce[hidden] { display: none; } /* Podtržené textové odkazy, ne tlačítka (proklik 9. 9., bod 3). */ .akce-odstavce .ovladac { border: 0; background: none; padding: 2px 0; font-size: .8125rem; color: var(--text-tlumeny); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; text-align: left; } .akce-odstavce .ovladac:hover { color: var(--akcent); } .akce-odstavce .ovladac[disabled] { text-decoration: none; opacity: .45; } /* ── Doladění (R-026 — chování se NEMĚNÍ) ─────────────────────────────────── */ .doladeni { border: 1px solid var(--linka-silna); padding: 16px; margin: 0 0 1.15em; background: var(--list); } .doladeni-hlava { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .doladeni textarea { width: 100%; font-family: var(--pismo-proza); font-size: calc(var(--proza-velikost) * var(--skala-prozy)); line-height: var(--proza-proklad); border: 1px solid var(--linka); background: var(--list); color: var(--text); padding: 10px; resize: vertical; } .doladeni-akce { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } /* ── Tlačítka ────────────────────────────────────────────────────────────────── */ .tlacitko, .ovladac { font-family: var(--sans); font-size: .8125rem; padding: 7px 14px; cursor: pointer; border: 1px solid var(--linka-silna); background: var(--list); color: var(--text); border-radius: 0; } .tlacitko { border-color: var(--akcent); } .tlacitko:hover, .ovladac:hover { border-color: var(--akcent); } .tlacitko[disabled], .ovladac[disabled] { opacity: .45; cursor: default; border-color: var(--linka); } /* ── Dělič ───────────────────────────────────────────────────────────────────── */ .delic { display: flex; align-items: center; justify-content: center; cursor: col-resize; background: var(--platno); } .delic .vlas { width: 1px; height: 100%; background: var(--linka); } .delic:hover .vlas { background: var(--akcent); } /* ══ PRAVÝ TMAVÝ PANEL ════════════════════════════════════════════════════════ */ .panel { background: var(--panel-pozadi); color: var(--panel-text); /* Šířku drží grid dráha, ne min-width položky — min-width na grid položce přebíjí minmax(0,…) a tlačí sousední dráhu. */ display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--panel-linka); } .panel a { color: var(--panel-text); } .panel-hlavicka { font-size: calc(.875rem * var(--skala-poznamek)); display: flex; justify-content: space-between; align-items: baseline; padding: 18px 20px 14px; border-bottom: 1px solid var(--panel-linka); } /* Přehledový stav panelu (R-033): anotace briefu, řádky odkazů, Schválit, metriky. */ .panel-prehled { border-bottom: 1px solid var(--panel-linka); } .panel-brief { padding: 16px 20px; border-bottom: 1px solid var(--panel-linka); } .panel-brief p { margin: 0 0 8px; color: var(--panel-tlumeny); font-size: calc(.875rem * var(--skala-poznamek)); line-height: 1.5; } .radek { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--panel-linka); color: var(--panel-text); text-decoration: none; font-size: calc(.9375rem * var(--skala-poznamek)); } .radek span:first-child { text-decoration: underline; text-underline-offset: 3px; } .radek:hover { color: #fff; } .radek--zvyrazneny { color: var(--akcent-panel); border-left: 3px solid var(--akcent-panel); padding-left: 17px; } /* ══ MERGE (brána 2, večer 3b) ═══════════════════════════════════════════════ * Tlačítko je `