/* Fonty ładowane w index.html przez + —
@import w CSS był render-blocking i opóźniał odkrycie fontów o pełny round-trip. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
--bg: #ffffff;
--gray1: #f7f7f7;
--gray2: #f0f0f0;
--rule: #e2e2e2;
--muted: #767676; /* 4.5:1 na białym (AA); #999 miało 2.85:1 */
--text: #0a0a0a;
--sub: #2a2a2a;
--red: #cc0000;
--amber: #b45309;
--blue: #1d4ed8;
--violet: #6d28d9;
--top-h: 58px;
--tab-h: 44px;
/* 🔴 `color-scheme` MUSI być zadeklarowany, inaczej przeglądarka maluje elementy systemowe
(paski przewijania, pola formularzy, tło canvasa) w wariancie JASNYM niezależnie od naszych
zmiennych — w motywie ciemnym dawało to biały pasek przewijania przyklejony do czarnej treści
(zgłoszenie właściciela ze zrzutem, 2026-08-10). To nie jest kosmetyka CSS-a strony, tylko
informacja DLA przeglądarki; sam `background: var(--bg)` na kontenerze tego nie załatwia. */
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
--bg: #0f0f0f;
--gray1: #191919;
--gray2: #222222;
--rule: #2e2e2e;
--muted: #8a8a8a; /* 4.6:1 na #0f0f0f (AA); #606060 miało ~3:1 */
--text: #efefef;
--sub: #c0c0c0;
--red: #e03030;
--amber: #d97706;
--blue: #3b82f6;
--violet:#8b5cf6;
}
html, body {
height: 100%;
font-family: 'Space Mono', monospace;
background: var(--bg);
color: var(--text);
overscroll-behavior: none;
}
/* ══ TOPBAR ══ */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: var(--bg);
border-bottom: 3px solid var(--text);
height: var(--top-h);
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px;
}
.logo {
font-family: 'DM Serif Display', serif;
font-size: 22px; font-weight: 400; font-style: italic;
color: var(--text); letter-spacing: 0.5px; line-height: 1;
/* klikalne od 2026-08-01 — powrót na aktualną dawkę */
cursor: pointer; -webkit-user-select: none; user-select: none;
}
.logo:active { opacity: .6; }
.logo:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.logo-dot { color: var(--red); font-style: normal; }
.topbar-date {
font-size: 7.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--muted); margin-top: 2px;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.live-pill {
display: flex; align-items: center; gap: 5px;
border: 1px solid var(--red); padding: 3px 8px; border-radius: 2px;
}
.live-dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--red);
animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.live-text { font-size: 8px; font-weight: 700; letter-spacing: 2px; color: var(--red); }
.refresh-btn {
width: 28px; height: 28px; border: 1px solid var(--rule);
border-radius: 2px; background: transparent; color: var(--muted);
font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.refresh-btn:active { color: var(--text); border-color: var(--text); }
.refresh-btn.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ══ DOSE TABS ══ */
.dose-tabs {
position: fixed; top: var(--top-h); left: 0; right: 0; z-index: 59;
background: var(--bg);
height: var(--tab-h);
display: flex;
border-bottom: 1px solid var(--rule);
transform: translateY(0);
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.dose-tabs.hidden { transform: translateY(calc(-1 * var(--tab-h))); }
.dose-tab {
flex: 1; border: none; border-right: 1px solid var(--rule);
background: var(--bg); cursor: pointer;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px;
position: relative; transition: background 0.15s;
}
.dose-tab:last-child { border-right: none; }
.dose-tab:active { background: var(--gray1); }
.tab-emoji { font-size: 13px; line-height: 1; }
.tab-label {
font-family: 'Space Mono', monospace;
font-size: 7.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--muted); transition: color 0.15s;
}
.dose-tab.active { background: var(--bg); }
.dose-tab.active .tab-label { color: var(--text); }
.dose-tab.active::after {
content: ''; position: absolute;
bottom: 0; left: 0; right: 0; height: 3px;
}
.dose-tab.active.morning::after { background: var(--amber); }
.dose-tab.active.afternoon::after { background: var(--blue); }
.dose-tab.active.evening::after { background: var(--violet); }
/* ══ SCROLL AREA ══ */
.scroll-area {
margin-top: calc(var(--top-h) + var(--tab-h));
height: calc(100vh - var(--top-h) - var(--tab-h));
overflow-y: auto;
transition: margin-top 0.25s cubic-bezier(0.4,0,0.2,1),
height 0.25s cubic-bezier(0.4,0,0.2,1);
}
.scroll-area.tabs-hidden {
margin-top: var(--top-h);
height: calc(100vh - var(--top-h));
}
/* Deep-link „otwórz ten news": scrollIntoView({block:'start'}) inaczej wsuwa nagłówek POD stały pasek+zakładki
(viewport y=0). scroll-margin-top odsuwa cel tak, by nagłówek wylądował TUŻ POD zakładkami, a ekran zaczynał
się od udostępnionego artykułu (zgłoszenie 2026-07-16). */
#scrollArea [id^="item-"], #scrollArea [id^="group-"], #scrollArea .hero-card {
scroll-margin-top: calc(var(--top-h) + var(--tab-h) + 6px);
}
/* ══ EDITION BAR ══ */
.edition-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 16px; background: var(--gray1);
border-bottom: 1px solid var(--rule);
}
.edition-name {
font-size: 7.5px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.edition-time { font-size: 7.5px; color: var(--muted); letter-spacing: 1px; }
/* Chudy pasek „wczorajsze wydanie" — pokazywany tylko dla dawki, której dzisiejsze wydanie jeszcze nie wyszło */
.prevbar {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 5px 14px; background: #fbf6ee; border-bottom: 1px solid #ece1cf;
}
[data-theme="dark"] .prevbar { background: #241f17; border-bottom-color: #3a3020; }
.prevbar .pb-ico { font-size: 9px; color: var(--amber); line-height: 1; }
.prevbar .pb-txt { font-size: 7.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--amber); }
.prevbar .pb-dot { color: #d8c3a3; }
[data-theme="dark"] .prevbar .pb-dot { color: #5a4a2e; }
.prevbar .pb-meta { font-size: 7.5px; color: #a98a5c; letter-spacing: .6px; }
[data-theme="dark"] .prevbar .pb-meta { color: #b0966a; }
/* ══ HERO CARD ══ */
.hero-card {
padding: 20px 16px 16px; background: var(--bg);
border-bottom: 2px solid var(--text);
cursor: pointer; -webkit-user-select: none; user-select: none;
}
.hero-card:active { background: var(--gray1); }
.hero-card:focus-visible, .news-item:focus-visible, .sub-item:focus-visible {
outline: 2px solid var(--red); outline-offset: -2px;
}
.hero-kicker {
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.hero-flag { font-size: 15px; line-height: 1; }
.hero-kicker-label {
font-size: 7.5px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
}
.kicker-morning { color: var(--amber); }
.kicker-afternoon { color: var(--blue); }
.kicker-evening { color: var(--violet); }
.hero-topbadge {
display: inline-flex; align-items: center; gap: 4px;
background: var(--red); color: #fff;
font-family: 'Space Mono', monospace;
font-size: 7.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
padding: 3px 7px; border-radius: 2px;
}
.hero-kicker-dose {
font-family: 'Space Mono', monospace;
font-size: 7.5px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: var(--muted);
}
.hero-title {
font-family: 'DM Serif Display', serif;
font-size: 23px; font-weight: 400; line-height: 1.22;
letter-spacing: -0.2px; color: var(--text); margin-bottom: 14px;
}
.item-time {
font-size: 8px; color: var(--muted); letter-spacing: 0.3px;
margin-top: 3px;
}
.hero-card > .item-time { margin-bottom: 10px; margin-top: -6px; }
.hero-footer {
display: flex; align-items: center; justify-content: space-between;
}
.hero-source {
font-size: 7.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.hero-arrow {
font-size: 14px; color: var(--muted);
transition: transform 0.2s, color 0.2s;
}
.hero-card.open .hero-arrow { transform: rotate(90deg); color: var(--text); }
/* ══ DIVIDER ══ */
.section-rule {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px; background: var(--gray1);
border-bottom: 1px solid var(--rule);
}
.section-rule-line { flex: 1; height: 1px; background: var(--rule); }
.section-rule-label {
font-size: 7px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
/* ══ NEWS ITEM ══ */
.news-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; background: var(--bg);
border-bottom: 1px solid var(--rule);
cursor: pointer; -webkit-user-select: none; user-select: none;
}
.news-item:active { background: var(--gray1); }
.news-num {
font-size: 9px; font-weight: 700; color: var(--red);
flex-shrink: 0; margin-top: 2px; min-width: 18px; letter-spacing: 0.5px;
}
.news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-flag { font-size: 13px; line-height: 1; }
.news-title {
font-family: 'DM Serif Display', serif;
font-size: 15.5px; font-weight: 400; line-height: 1.3; color: var(--text);
}
.news-arrow {
font-size: 13px; color: var(--muted); flex-shrink: 0;
margin-top: 2px; transition: transform 0.2s, color 0.2s;
}
.news-item.open .news-arrow { transform: rotate(90deg); color: var(--text); }
/* ══ SUB-ITEMS CONTAINER ══ */
.sub-items-container {
display: none;
background: var(--gray1);
border-bottom: 1px solid var(--rule);
padding-left: 16px;
}
.hero-card.open + .sub-items-container,
.news-item.open + .sub-items-container {
display: block;
}
.sub-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px 14px 0;
border-bottom: 1px solid var(--rule);
cursor: pointer; -webkit-user-select: none; user-select: none;
}
.sub-item:last-child { border-bottom: none; }
.sub-item:active { opacity: 0.7; }
.sub-item-flag { font-size: 13px; line-height: 1.2; flex-shrink: 0; }
.sub-item-text {
flex: 1;
font-family: 'Space Mono', monospace;
font-size: 11px; color: var(--sub); line-height: 1.45;
}
.sub-item-arrow {
font-size: 12px; color: var(--muted); flex-shrink: 0;
margin-top: 1px; transition: transform 0.2s, color 0.2s;
}
.sub-item.open .sub-item-arrow { transform: rotate(90deg); color: var(--text); }
/* ══ EXPAND PANEL ══ */
.card-expand {
display: none;
background: var(--bg);
border-bottom: 1px solid var(--rule);
border-left: 3px solid var(--red);
padding: 18px 18px 20px 15px;
}
/* Bezpośrednie rozwinięcie dla samodzielnych postów */
.hero-card.open + .card-expand,
.news-item.open + .card-expand {
display: block;
}
/* Rozwinięcie wewnątrz grupy */
.sub-item.open + .card-expand {
display: block;
margin-left: -16px; /* Niweluje padding rodzica */
}
.expand-image {
width: calc(100% + 32px); margin: -16px -16px 14px -16px;
height: 180px; object-fit: cover; display: block;
border-radius: 0;
/* Placeholder na czas ładowania: bez tła obrazek pobierany przez wolne łącze
zostawia 180px gołej dziury (białej/czarnej zależnie od motywu). Po załadowaniu
zdjęcie zakrywa tło w całości (object-fit: cover). */
background: linear-gradient(100deg, var(--rule) 40%, rgba(255,255,255,.55) 50%, var(--rule) 60%) var(--rule);
background-size: 200% 100%;
animation: imgShimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .expand-image {
background: linear-gradient(100deg, var(--rule) 40%, rgba(255,255,255,.08) 50%, var(--rule) 60%) var(--rule);
background-size: 200% 100%;
}
@keyframes imgShimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }
.expand-article {
font-family: 'DM Serif Display', serif;
font-size: 15px; line-height: 1.78; color: var(--sub);
}
.expand-divider { height: 1px; background: var(--rule); margin: 14px 0; }
/* Wpływ na rynek — wyróżniona linijka z kolorowymi strzałkami */
.impact-box {
margin-top: 8px; padding: 6px 10px;
border-left: 2px solid var(--amber);
background: var(--gray1); border-radius: 0 4px 4px 0;
}
[data-theme="dark"] .impact-box { background: rgba(255,255,255,.04); }
.impact-label {
display: block; font-family: 'Space Mono', monospace;
font-size: 8px; letter-spacing: .10em; text-transform: uppercase;
color: var(--muted); margin-bottom: 2px;
}
.impact-text { font-size: 11.5px; line-height: 1.4; color: var(--sub); font-weight: 500; }
.imp-up { color: #16a34a; font-weight: 700; }
.imp-down { color: #dc2626; font-weight: 700; }
[data-theme="dark"] .imp-up { color: #22c55e; }
[data-theme="dark"] .imp-down { color: #ef4444; }
.expand-source-row {
display: flex; align-items: center; justify-content: space-between;
}
.expand-source-left { display: flex; align-items: center; gap: 6px; }
.expand-source-tag {
font-size: 7px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.expand-sep { color: var(--rule); }
.expand-source-name {
font-size: 7.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--text);
}
.expand-read-btn {
font-size: 7.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--red); text-decoration: none;
border: 1px solid var(--red); padding: 5px 10px; border-radius: 1px;
white-space: nowrap; /* „Czytaj →" łamało się na dwie linie w wąskiej stopce artykułu */
}
.expand-read-btn:active { background: var(--red); color: #fff; }
.expand-actions { display: flex; align-items: center; gap: 8px; }
.expand-share-row { margin-top: 12px; display: flex; justify-content: flex-end; }
.expand-share-btn {
background: none; cursor: pointer;
font-family: 'Space Mono', monospace;
font-size: 7.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--sub); padding: 5px 10px;
border: 1px solid var(--rule); border-radius: 1px;
display: flex; align-items: center; gap: 4px;
}
.expand-share-btn:active { background: var(--rule); }
.expand-share-icon { font-size: 10px; }
/* ══ ADMIN DELETE BUTTON ══ */
.admin-del-btn {
position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%;
background: #dc2626; border: none; cursor: pointer;
font-size: 16px; line-height: 1; color: #fff;
display: flex; align-items: center; justify-content: center;
z-index: 10; box-shadow: 0 1px 4px rgba(0,0,0,.25);
animation: adminDelPop .15s ease;
}
@keyframes adminDelPop { from { transform: translateY(-50%) scale(.6); opacity:0; } to { transform: translateY(-50%) scale(1); opacity:1; } }
.hero-card { position: relative; }
.news-item { position: relative; }
.admin-del-btn:active { background: #b91c1c; }
/* popup z powodem usunięcia */
.admin-reason-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
display: flex; align-items: flex-end; justify-content: center;
animation: reasonFadeIn .15s ease;
}
@keyframes reasonFadeIn { from { opacity:0; } to { opacity:1; } }
.admin-reason-box {
background: #fff; border-radius: 16px 16px 0 0;
padding: 20px 16px 32px; width: 100%; max-width: 480px;
}
[data-theme="dark"] .admin-reason-box { background: #1a1a1a; }
.admin-reason-title {
font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.admin-reason-input {
width: 100%; border: 1px solid var(--rule); border-radius: 8px;
padding: 10px 12px; font-size: 15px; font-family: inherit;
color: var(--text); background: var(--bg); outline: none;
box-sizing: border-box; margin-bottom: 12px;
}
.admin-reason-input:focus { border-color: #dc2626; }
.admin-reason-actions { display: flex; gap: 8px; }
.admin-reason-confirm {
flex: 1; background: #dc2626; color: #fff; border: none;
border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600;
cursor: pointer;
}
.admin-reason-cancel {
background: none; border: 1px solid var(--rule); border-radius: 8px;
padding: 12px 16px; font-size: 15px; color: var(--sub); cursor: pointer;
}
/* ══ DESKTOP LAYOUT (≥1024px) ══════════════════════════════════════════════ */
@media (max-width: 1023px) { .dt-app { display: none !important; } }
@media (min-width: 1024px) {
body { overflow: hidden; background: #ffffff; }
[data-theme="dark"] body { background: #0f0f0f; }
.topbar, .dose-tabs, .scroll-area, .install-banner { display: none !important; }
.dt-app { display: flex !important; }
}
.dt-app {
display: none;
flex-direction: column;
height: 100vh;
max-width: 1600px;
margin: 0 auto;
font-family: 'Inter', sans-serif;
background: #ffffff;
color: var(--text);
border-left: 1px solid #dbd8d2;
border-right: 1px solid #dbd8d2;
}
[data-theme="dark"] .dt-app { background: #0f0f0f; border-color: #2a2a2a; }
/* header */
.dt-header {
height: 56px; flex-shrink: 0;
background: #ffffff; border-bottom: 1px solid #dbd8d2;
display: flex; align-items: center; padding: 0 28px; gap: 18px;
}
[data-theme="dark"] .dt-header { background: #0f0f0f; border-bottom-color: #2a2a2a; }
.dt-logo { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 28px; color: var(--text); letter-spacing: -0.5px; line-height: 1; flex-shrink: 0;
/* klikalne od 2026-08-01 — powrót na aktualną dawkę */
cursor: pointer; user-select: none; transition: opacity .15s; }
.dt-logo:hover { opacity: .7; }
.dt-logo:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.dt-logo-dot { color: var(--red); font-style: normal; }
.dt-header-sep { width: 1px; height: 22px; background: #dbd8d2; flex-shrink: 0; }
[data-theme="dark"] .dt-header-sep { background: #2a2a2a; }
.dt-header-date { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: 1px; flex-shrink: 0; }
.dt-tabs { display: flex; gap: 3px; background: #e8e5df; padding: 3px; border-radius: 6px; margin-left: 8px; flex-shrink: 0; }
[data-theme="dark"] .dt-tabs { background: #1e1e1e; }
.dt-tab { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 4px; cursor: pointer; color: var(--muted); border: none; background: transparent; white-space: nowrap; }
.dt-tab:hover { color: var(--text); }
.dt-tab.active { background: var(--bg); color: var(--text); }
.dt-tab.active.morning { background: var(--amber); color: #fff; }
.dt-tab.active.afternoon { background: var(--text); color: var(--bg); }
.dt-tab.active.evening { background: var(--violet); color: #fff; }
.dt-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dt-live { display: flex; align-items: center; gap: 5px; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; color: var(--red); flex-shrink: 0; }
.dt-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: blink 1.4s ease-in-out infinite; }
/* 3-column body */
/* Panel artykułu poszerzony 380px -> 480px (2026-08-01, zgłoszenie właściciela: „prawa kolumna
z artykułem jest trochę za wąska"). Miejsce bierze środkowa lista, nie sidebar — lista to
nagłówki, które i tak łamią się na 2-3 linie, a artykuł czyta się w pełnych zdaniach.
Zwiększona też szerokość dla bardzo szerokich ekranów, gdzie kolumna 480px zaczyna być mała
w stosunku do reszty. */
/* Panel szczegółów zwężony 2026-08-01 (życzenie właściciela: „trochę mniejszy, nieznacznie")
z 480/560 na 440/510 — ok. 9%. Więcej miejsca dla listy newsów, panel dalej czytelny.
⚠️ Próg, poniżej którego NIE schodzić: kafle notowań (.q-row) mają sztywne .q-spark 110px
i .q-vals auto, a kurczy się wyłącznie .q-name. Przy 440px zostaje jej ~150px, czyli nazwa
instrumentu jest skrócona wielokropkiem, ale WIDOCZNA. Dalsze zwężanie ją wygasi.
(Uwaga: @media max-width:460px dotyczy VIEWPORTU, nie tego panelu — na desktopie nie działa.) */
.dt-body { display: grid; grid-template-columns: 210px 1fr 440px; flex: 1; overflow: hidden; }
@media (min-width: 1500px) { .dt-body { grid-template-columns: 230px 1fr 510px; } }
/* left index */
.dt-index { border-right: 1px solid #dbd8d2; overflow-y: auto; background: var(--bg); }
[data-theme="dark"] .dt-index { border-right-color: #2a2a2a; background: #0f0f0f; }
.dt-index-section { padding: 18px 0 4px; border-bottom: 1px solid #eae7e1; }
[data-theme="dark"] .dt-index-section { border-bottom-color: #222; }
.dt-index-section:last-child { border-bottom: none; }
.dt-index-title { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 0 18px 8px; }
.dt-index-item { padding: 7px 18px; display: flex; align-items: center; gap: 10px; cursor: pointer; border-left: 2px solid transparent; user-select: none; -webkit-user-select: none; }
.dt-index-item:hover { background: rgba(0,0,0,.03); }
[data-theme="dark"] .dt-index-item:hover { background: rgba(255,255,255,.04); }
.dt-index-item.active { border-left-color: var(--red); background: rgba(204,0,0,.05); }
.dt-index-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dt-index-label { font-size: 12px; color: var(--text); font-weight: 500; flex: 1; }
.dt-index-n { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--muted); }
.dt-index-item.dim .dt-index-label { color: var(--muted); font-weight: 400; }
/* Nagłówek grupy „KONFLIKTY" nad wojnami (na dole listy) — desktop */
.dt-index-group { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); padding: 12px 18px 5px; margin-top: 6px; border-top: 1px solid var(--rule); }
/* center feed */
.dt-feed { display: flex; flex-direction: column; border-right: 1px solid #dbd8d2; overflow: hidden; }
[data-theme="dark"] .dt-feed { border-right-color: #2a2a2a; }
.dt-feed-header { padding: 12px 22px; border-bottom: 1px solid #e2dfd9; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--bg); }
[data-theme="dark"] .dt-feed-header { background: #0f0f0f; border-bottom-color: #222; }
.dt-feed-title { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.dt-feed-count { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--muted); }
.dt-feed-list { overflow-y: auto; flex: 1; background: var(--bg); }
[data-theme="dark"] .dt-feed-list { background: #0f0f0f; }
/* feed items */
.dt-item { padding: 12px 22px; border-bottom: 1px solid #eae7e1; cursor: pointer; display: grid; grid-template-columns: 28px 20px 1fr; gap: 10px; align-items: flex-start; }
[data-theme="dark"] .dt-item { border-bottom-color: #1e1e1e; }
.dt-item:hover { background: rgba(0,0,0,.025); }
[data-theme="dark"] .dt-item:hover { background: rgba(255,255,255,.04); }
.dt-item.selected { background: rgba(204,0,0,.05); border-left: 2px solid var(--red); padding-left: 20px; }
/* Top story (wersja "gazeta"): kicker z czerwonym podkreśleniem + większy nagłówek */
.dt-item.top-item { border-left: 3px solid var(--red); padding-left: 19px; background: rgba(204,0,0,.04); }
[data-theme="dark"] .dt-item.top-item { background: rgba(204,0,0,.07); }
.dt-item.top-item .dt-item-headline { font-size: 17px; font-weight: 600; }
.dt-item.top-item .dt-item-badges { margin-bottom: 6px; }
.dt-item.group-header { background: var(--bg); }
[data-theme="dark"] .dt-item.group-header { background: #141414; }
.dt-item.group-header:hover { background: rgba(0,0,0,.025); }
.dt-item-num { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--muted); padding-top: 2px; text-align: right; }
.dt-item-flag { font-size: 14px; padding-top: 1px; }
.dt-item-body { min-width: 0; }
.dt-item-badges { display: flex; gap: 5px; margin-bottom: 3px; }
.dt-badge { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 2px; }
.dt-badge-brk { background: var(--red); color: #fff; }
.dt-badge-top { background: none; color: var(--red); padding: 0 0 3px 0; border-bottom: 2px solid var(--red); letter-spacing: 2px; font-weight: 700; }
.dt-item-headline { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 3px; }
.dt-item-meta { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--muted); display: flex; gap: 8px; }
/* group sub-items */
.dt-group-subs { padding-left: 18px; border-bottom: 1px solid #eae7e1; }
[data-theme="dark"] .dt-group-subs { border-bottom-color: #1e1e1e; }
.dt-sub-item { padding: 9px 22px 9px 0; border-bottom: 1px solid #f0ede8; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
[data-theme="dark"] .dt-sub-item { border-bottom-color: #1c1c1c; }
.dt-sub-item:last-child { border-bottom: none; }
.dt-sub-item:hover { background: rgba(0,0,0,.02); }
.dt-sub-item.selected { border-left: 2px solid var(--red); padding-left: 6px; }
.dt-sub-flag { font-size: 13px; flex-shrink: 0; }
.dt-sub-text { font-size: 12px; color: var(--sub); line-height: 1.4; }
/* right detail panel */
.dt-detail { background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; }
.dt-detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.dt-detail-empty-icon { font-size: 28px; opacity: .25; }
.dt-detail-empty-text { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.dt-detail-content { padding: 26px 26px 20px; }
.dt-detail-flag { font-size: 26px; margin-bottom: 10px; }
.dt-detail-badges { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dt-detail-badge { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 1px; padding: 3px 8px; border-radius: 3px; background: var(--gray1); color: var(--muted); border: 1px solid var(--rule); }
/* Znaczek wiarygodności: stonowany, gazetowy — szara wersalikowa etykieta z małym zielonym ✓ */
.src-badge { font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.src-check { color: #16a34a; font-weight: 700; }
[data-theme="dark"] .src-check { color: #22c55e; }
/* Wiersz meta pod nagłówkiem (mobile feed): mini-kategoria + sygnał źródeł */
.news-cat-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.news-cat-name { font-family: 'Space Mono', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.news-cat-sep { color: var(--rule); font-size: 9px; line-height: 1; }
.news-cat-src { font-family: 'Space Mono', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
/* Telefon: badge w prawym górnym rogu kafelka (naprzeciw flagi), poza układem tekstu */
.card-corner { position: absolute; top: 10px; right: 30px; }
.dt-detail-headline { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
/* Zdjęcie artykułu w panelu desktopowym (2026-08-10, zgłoszenie właściciela: „na wersji
desktopowej nie ma zdjęć z artykułów"). Na mobile istniało od dawna (`.expand-image`),
na desktopie NIGDY nie było renderowane — `image_url` występowało wyłącznie w expandBlock
i expandBlockArchive. Zmierzone: 99% dzisiejszych pozycji z artykułem ma zdjęcie, więc
brakowało go praktycznie przy każdym newsie.
Pełna szerokość panelu: padding .dt-detail-content to 26px, stąd calc(100% + 52px).
⚠️ Placeholder z shimmerem jak na mobile — bez niego wolne łącze zostawia gołą dziurę
(białą/czarną zależnie od motywu); to było osobne zgłoszenie z 07.08. */
.dt-detail-image {
width: calc(100% + 52px); margin: 4px -26px 16px -26px;
height: 180px; object-fit: cover; display: block;
background: linear-gradient(100deg, var(--rule) 40%, rgba(255,255,255,.55) 50%, var(--rule) 60%) var(--rule);
background-size: 200% 100%;
animation: imgShimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .dt-detail-image {
background: linear-gradient(100deg, var(--rule) 40%, rgba(255,255,255,.08) 50%, var(--rule) 60%) var(--rule);
background-size: 200% 100%;
}
.dt-detail-time { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.dt-detail-body { font-family: 'DM Serif Display', serif; font-size: 14px; color: var(--sub); line-height: 1.78; margin-bottom: 18px; }
.dt-detail-no-article { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.dt-source-row { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--rule); margin-bottom: 20px; }
.dt-source-label { font-family: 'Space Mono', monospace; font-size: 8px; color: var(--muted); letter-spacing: 2px; margin-bottom: 3px; }
.dt-source-name { font-size: 12px; color: var(--sub); }
.dt-read-btn { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 1.5px; color: var(--red); border: 1px solid var(--red); padding: 6px 12px; cursor: pointer; background: none; border-radius: 2px; text-decoration: none; display: inline-block; flex-shrink: 0; }
.dt-read-btn:hover { background: var(--red); color: #fff; }
.dt-detail-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dt-share-btn { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); padding: 6px 12px; cursor: pointer; background: none; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
.dt-share-btn:hover { border-color: var(--text); color: var(--text); }
.dt-share-icon { font-size: 10px; }
.dt-related { padding: 0 26px 20px; }
.dt-related-title { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.dt-related-item { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--muted); cursor: pointer; display: flex; gap: 7px; line-height: 1.4; }
.dt-related-item:hover { color: var(--text); }
.dt-related-item:last-child { border-bottom: none; }
@keyframes deepLinkFlash {
0%,100% { background: transparent; }
30% { background: rgba(204,0,0,0.08); }
}
.deep-link-highlight { animation: deepLinkFlash 1.8s ease; }
/* ══ SKELETON ══ */
.skel {
border-radius: 1px;
background: linear-gradient(90deg, var(--gray2) 25%, var(--gray1) 50%, var(--gray2) 75%);
background-size: 300% 100%; animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }
/* ══ TOAST ══ */
.toast {
position: fixed; bottom: 28px; left: 50%;
transform: translateX(-50%) translateY(80px);
background: var(--text); color: #fff;
font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
padding: 9px 18px; border-radius: 1px;
border-left: 3px solid var(--red);
transition: transform 0.25s; white-space: nowrap; z-index: 300;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.bell-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; }
.bell-btn.active { filter: grayscale(0); }
.bell-btn.inactive { filter: grayscale(1); opacity: 0.4; }
.theme-btn {
background: none; border: none; cursor: pointer;
font-size: 15px; padding: 4px 6px; line-height: 1;
}
.archive-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; line-height: 1; }
/* ══ ARCHIWUM ══ */
.archive-overlay {
position: fixed; inset: 0; z-index: 300; background: var(--bg);
display: flex; flex-direction: column;
transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.archive-overlay.show { transform: translateY(0); }
.archive-header {
display: flex; align-items: center; gap: 4px;
height: var(--top-h); padding: 0 10px 0 16px; flex-shrink: 0;
border-bottom: 3px solid var(--text);
}
.archive-back { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text); padding: 4px 10px 4px 0; }
.archive-title { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 18px; color: var(--text); flex: 1; }
.archive-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--muted); padding: 4px 8px; line-height: 1; }
.archive-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.archive-date-row {
display: flex; align-items: center; justify-content: space-between;
padding: 16px; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.archive-date-row:active { background: var(--gray1); }
.archive-date-main { font-family: 'DM Serif Display', serif; font-size: 16px; color: var(--text); }
.archive-date-sub { font-size: 8px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 3px; }
.archive-date-arrow { font-size: 14px; color: var(--muted); }
.archive-empty { padding: 60px 24px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }
.archive-day-section-title {
padding: 9px 16px; background: var(--gray1); border-bottom: 1px solid var(--rule);
font-size: 7.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
/* ══ PULL-TO-REFRESH ══ */
#ptr {
display: flex; align-items: center; justify-content: center;
height: 0; overflow: hidden;
transition: height 0.2s;
color: var(--muted); font-size: 8px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
}
#ptr.pulling { height: 48px; }
#ptr.refreshing { height: 48px; }
.ptr-spinner {
width: 18px; height: 18px; border: 2px solid var(--rule);
border-top-color: var(--red); border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* ══ INSTALL BANNER ══ */
.install-banner {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
background: var(--bg); border-top: 2px solid var(--text);
padding: 14px 16px;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.install-banner.show { transform: translateY(0); }
.install-text {
font-size: 10px; font-weight: 700;
letter-spacing: 1px; color: var(--text);
flex: 1;
}
.install-actions { display: flex; gap: 8px; }
.install-btn-add {
font-family: 'Space Mono', monospace;
font-size: 7.5px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; cursor: pointer;
background: var(--text); color: var(--bg);
border: none; padding: 7px 14px; border-radius: 1px;
}
.install-btn-dismiss {
font-family: 'Space Mono', monospace;
font-size: 7.5px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; cursor: pointer;
background: none; color: var(--muted);
border: 1px solid var(--rule); padding: 7px 12px; border-radius: 1px;
}
/* ═══ MOBILE SWIPE PANEL (F: Gest) ═══════════════════════════════════════= */
@media (max-width: 1023px) {
.mob-swp-ov {
position: fixed;
inset: 0;
background: rgba(0,0,0,0);
z-index: 110;
display: none;
transition: background .22s;
}
.mob-swp-ov.vis {
display: block;
background: rgba(0,0,0,.45);
}
.mob-swp-ov.peek {
display: block;
background: rgba(0,0,0,.2);
}
.mob-swp-panel {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 270px;
background: var(--bg);
border-right: 3px solid var(--text);
z-index: 120;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .22s cubic-bezier(.25,.46,.45,.94), width .22s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
.mob-swp-panel.open { transform: translateX(0); }
.mob-swp-panel.peek { width: min(60vw, 270px); transform: translateX(0); }
.mob-swp-panel.dragging { transition: none; }
.mob-swp-head {
padding: 54px 16px 14px;
border-bottom: 1px solid var(--rule);
flex-shrink: 0;
}
.mob-swp-meta {
font-size: 7px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.mob-swp-title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 22px;
font-style: italic;
color: var(--text);
}
.mob-swp-sec {
font-size: 7px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
padding: 14px 16px 5px;
flex-shrink: 0;
}
.mob-swp-cat {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
border: none;
border-bottom: 1px solid var(--rule);
background: transparent;
cursor: pointer;
text-align: left;
color: var(--text);
}
.mob-swp-cat:active { background: var(--gray1); }
/* Nagłówek grupy „KONFLIKTY" nad wojnami (na dole listy) — mobile */
.mob-swp-group { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); padding: 13px 16px 6px; border-top: 1px solid var(--rule); }
.mob-swp-cat.act {
padding-left: 13px;
border-left: 3px solid var(--red);
background: var(--gray1);
}
.mob-swp-cat-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.mob-swp-cat-nm {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 14px;
font-style: italic;
flex: 1;
}
.mob-swp-cat-cnt {
font-size: 9px;
color: var(--muted);
font-family: 'Space Mono', monospace;
}
.mob-swp-dose {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
border: none;
border-bottom: 1px solid var(--rule);
background: transparent;
cursor: pointer;
text-align: left;
font-family: 'DM Serif Display', Georgia, serif;
font-size: 14px;
font-style: italic;
color: var(--text);
}
.mob-swp-dose:active { background: var(--gray1); }
.mob-swp-dose.act {
padding-left: 13px;
border-left: 3px solid var(--text);
background: var(--gray1);
font-weight: 700;
}
.mob-edge-grip {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 32px;
background: var(--rule);
border-radius: 0 3px 3px 0;
z-index: 100;
cursor: pointer;
opacity: 0.5;
transition: opacity .15s, width .12s;
}
.mob-edge-grip:hover,
.mob-edge-grip:active { opacity: 1; width: 5px; }
@keyframes gripPulse {
0% { width: 3px; opacity: 0.5; border-radius: 0 3px 3px 0; }
18% { width: 22px; opacity: 1; border-radius: 0 6px 6px 0; background: var(--red); }
60% { width: 22px; opacity: 1; border-radius: 0 6px 6px 0; background: var(--red); }
100% { width: 3px; opacity: 0.5; border-radius: 0 3px 3px 0; background: var(--rule); }
}
.mob-edge-grip.pulsing {
animation: gripPulse 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.mob-hidden { display: none !important; }
} /* end @media mobile */
/* Flaga zamiast kolorowej kropki dla tematów Wojna Iran/Ukraina + Polityka lokalna */
.dt-index-flag { font-size: 12px; line-height: 1; flex-shrink: 0; width: 16px; text-align: center; }
.mob-swp-cat-flag { font-size: 16px; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; }
/* Flaga po PRAWEJ (Polityka lokalna) — tuż przed licznikiem */
.dt-index-rflag { font-size: 12px; line-height: 1; flex-shrink: 0; margin-left: auto; }
.mob-swp-cat-rflag { font-size: 16px; line-height: 1; flex-shrink: 0; margin-left: auto; }
/* Separator daty w mobilnym widoku kategorii (cross-day) */
.mob-cat-daysep {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px 6px; background: var(--gray1);
border-bottom: 1px solid var(--rule);
position: sticky; top: 0; z-index: 4;
}
.mob-cat-daysep span {
font-family: 'Space Mono', monospace;
font-size: 8px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--red);
}
/* Pasek jakości PER TEMAT — wariant B: cienka linia na DOLE wiersza (przeciąganie zmienia próg tematu) */
.cat-fill-bar {
position: sticky; top: 0; z-index: 15;
height: 50px;
background: var(--bg);
touch-action: pan-y;
cursor: ew-resize;
-webkit-user-select: none; user-select: none;
}
.cat-fill-bar::after { /* szary track na całej szerokości dolnej krawędzi */
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: rgba(0,0,0,.09);
}
.cat-fill-bar-fill { /* niebieskie wypełnienie do pct% — samo dno wiersza */
position: absolute; left: 0; bottom: 0; height: 3px;
background: rgba(29,78,216,.65); z-index: 1;
}
[data-theme="dark"] .cat-fill-bar::after { background: rgba(255,255,255,.12); }
[data-theme="dark"] .cat-fill-bar-fill { background: rgba(96,165,250,.8); }
.cat-fill-bar-row {
position: relative; z-index: 2; height: 100%;
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px;
}
.cat-fill-bar-name {
font-family: 'DM Serif Display', serif; font-style: italic; font-size: 18px; color: var(--text);
}
.cat-fill-bar-pct {
font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #1d4ed8;
}
[data-theme="dark"] .cat-fill-bar-pct { color: #60a5fa; }
/* READ-ONLY pasek poziomu progu pod nazwą tematu na LIŚCIE (wariant B, sam wskaźnik %) */
.dt-index-item, .mob-swp-cat { position: relative; }
.cat-level-bar {
position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: rgba(0,0,0,.04); pointer-events: none;
}
.cat-level-fill { height: 100%; background: rgba(29,78,216,.30); }
/* Przy domyślnych 100% pasek jest pełny pod KAŻDYM tematem i czyta się jak gruby niebieski
separator, nie wskaźnik — pokazujemy go dopiero, gdy suwak tematu realnie coś przycina. */
.cat-level-bar.is-full { display: none; }
[data-theme="dark"] .cat-level-bar { background: rgba(255,255,255,.05); }
[data-theme="dark"] .cat-level-fill { background: rgba(96,165,250,.42); }
/* Chwilowy BŁYSK nowych artykułów (od ostatniej wizyty) — bez napisów, nakładka ::after która gaśnie
(nie rusza tła elementu ani czytelności tekstu). Klasa .is-new zdejmowana po animacji przez JS. */
.news-item.is-new, .hero-card.is-new, .dt-item.is-new { position: relative; }
.news-item.is-new::after, .hero-card.is-new::after, .dt-item.is-new::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: rgba(29,78,216,.16); pointer-events: none;
animation: brifNewFade 2.6s ease-out forwards;
}
@keyframes brifNewFade { from { opacity: 1; } to { opacity: 0; } }
[data-theme="dark"] .news-item.is-new::after,
[data-theme="dark"] .hero-card.is-new::after,
[data-theme="dark"] .dt-item.is-new::after { background: rgba(96,165,250,.22); }
@media (min-width: 1024px) {
/* Ukryj mobilny panel/gest na desktopie — inaczej nieostylowany ląduje w rogu */
.mob-swp-ov, .mob-swp-panel, .mob-edge-grip { display: none !important; }
}
/* ══ Wątek tematyczny (timeline, wariant A — oś pionowa) ══ */
.watek-wrap { margin-top: 10px; }
.watek-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .5px; color: var(--red); background: none;
border: 1px solid var(--rule); border-radius: 2px; padding: 8px 12px; cursor: pointer; }
.watek-btn .watek-caret { font-size: 11px; transition: transform .2s ease; }
.watek-btn.open .watek-caret { transform: rotate(180deg); }
.watek-timeline { position: relative; margin-top: 12px; padding-left: 24px; }
.watek-spine { position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.watek-node { position: relative; margin-bottom: 16px; }
.watek-node:last-child { margin-bottom: 2px; }
.watek-dot { position: absolute; left: -23px; top: 4px; width: 7px; height: 7px; border-radius: 50%;
background: var(--bg); border: 1.5px solid var(--muted); box-sizing: border-box; }
.watek-cur .watek-dot { left: -25px; top: 2px; width: 11px; height: 11px; background: var(--bg); border: 2px solid var(--red); }
.watek-metaline { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .5px; color: var(--muted);
display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 3px; }
.watek-when { font-variant-numeric: tabular-nums; }
.watek-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.watek-rel { text-transform: uppercase; letter-spacing: .5px; }
.watek-cur .watek-metaline { color: var(--red); }
.watek-head { font-family: 'DM Serif Display', serif; font-size: 15px; line-height: 1.22; color: var(--text); margin-top: 1px; }
/* Badge wątku na kaflu (mobile catMetaRow + desktop dt-item-meta) — 2026-07-17 */
.watek-badge{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.5px;color:#b91c1c;
border:1px solid rgba(185,28,28,.35);border-radius:4px;padding:1px 5px;margin-left:6px;white-space:nowrap}
[data-theme="dark"] .watek-badge{color:#f87171;border-color:rgba(248,113,113,.4)}
/* Badge sagi w wierszu PODPOZYCJI klastra (2026-08-04). Wiersz jest ciasny (flaga + tekst + strzałka),
więc badge siada w linii czasu pod tekstem — a gdy podpozycja nie ma `added_at`, stoi tam sam.
`vertical-align` wyrównuje go do 8-pikselowej godziny obok, inaczej wisiał o 1px za wysoko. */
.sub-item-text .item-time .watek-badge{font-size:8.5px;padding:0 4px;margin-left:5px;vertical-align:1px}
.dt-sub-text .watek-badge{font-size:8.5px;padding:0 4px;margin-left:5px;vertical-align:1px}
/* Pasek ciągłości sagi na kaflu w feedzie (2026-08-02) — kropki = pozycja w wątku, tekst = tytuł wątku.
Powód: dwa kafle o tym samym temacie w jednym feedzie czytały się jak powtórka serwisu.
Świadomie STONOWANY (wariant B, wybór właściciela): przy dniu gęstym od sag mocny czerwony kicker
zamieniłby feed w ścianę czerwieni. Kolor niesie sama kropka bieżącego etapu. */
.watek-strip{display:flex;align-items:center;gap:7px;margin:3px 0 5px;
font-family:'Space Mono',monospace;font-size:10px;line-height:1.3;min-width:0}
.watek-strip .ws-dots{display:inline-flex;gap:3px;align-items:center;flex:0 0 auto}
.watek-strip .ws-dots i{width:5px;height:5px;border-radius:50%;background:#d4d4d4;display:block}
.watek-strip .ws-dots i.past{background:rgba(185,28,28,.42)}
.watek-strip .ws-dots i.on{background:#b91c1c;width:7px;height:7px}
/* Tytuł wątku musi się kurczyć PIERWSZY — kropki niosą sygnał i nigdy nie mogą zostać wypchnięte. */
.watek-strip .ws-txt{color:#8a8a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
[data-theme="dark"] .watek-strip .ws-dots i{background:#3f3f46}
[data-theme="dark"] .watek-strip .ws-dots i.past{background:rgba(248,113,113,.42)}
[data-theme="dark"] .watek-strip .ws-dots i.on{background:#f87171}
[data-theme="dark"] .watek-strip .ws-txt{color:#9a9a9a}
.hero-card .watek-strip{margin:5px 0 7px}
.dt-item .watek-strip{margin:0 0 3px;font-size:9.5px}
/* Widok „Wątki dnia" (overlay, 2026-07-17) */
.watki-saga{border-bottom:1px solid var(--rule);padding:14px 16px}
.watki-saga-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;
background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--text)}
.watki-saga-title{font-family:'DM Serif Display',serif;font-size:17px;line-height:1.3}
.watki-saga-n{font-family:'Space Mono',monospace;font-size:9.5px;color:#b91c1c;white-space:nowrap;flex:0 0 auto}
/* Na telefonie metka obok tytułu zabierała ponad połowę wiersza — tytuły sag łamały się
po jednym słowie na linię. Metka schodzi POD tytuł, tytuł dostaje pełną szerokość. */
@media (max-width: 700px) {
.watki-saga-head{flex-wrap:wrap;row-gap:4px}
.watki-saga-title{flex:1 1 100%}
}
[data-theme="dark"] .watki-saga-n{color:#f87171}
.watki-memo{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:5px;line-height:1.45}
.watki-saga .watek-timeline{margin-top:10px}
.watki-link{display:block;text-decoration:none;color:inherit}
.watki-link:active{opacity:.7}
.watki-pusto{padding:50px 20px;text-align:center;font-family:'Space Mono',monospace;font-size:12px;color:var(--muted)}
/* ══ Notowania — pasek wykresów pod „Wpływ na rynek" (wariant A, 2026-07-31) ══
Cichy, gazetowy: symbol + nazwa, sparkline, cena i zmiana. Dane z quotes.json (bot).
Brak danych = element w ogóle się nie renderuje.
⚠️ Szerokości: JEDYNYM elementem, który wolno ścisnąć, jest nazwa instrumentu (.q-name).
Panel szczegółów na desktopie ma ~440 px i przy sztywnych min-width procent zmiany był
wypychany poza `overflow:hidden` kontenera — złapane na renderze realnej strony. */
.q-box{
display:flex;flex-direction:column;gap:1px;
background:var(--rule,#e5e7eb);border:1px solid var(--rule,#e5e7eb);
border-radius:9px;overflow:hidden;margin:14px 0 6px;
}
.q-row{
display:flex;align-items:center;gap:10px;
background:var(--bg,#fff);padding:9px 12px;
}
.q-head{display:flex;align-items:baseline;gap:9px;flex:1 1 auto;min-width:0;overflow:hidden}
.q-sym{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;flex:0 0 auto}
.q-name{font-size:12.5px;color:var(--muted,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.q-spark{flex:0 0 110px;height:30px}
.q-vals{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.q-px{font-family:'Space Mono',monospace;font-size:13px;white-space:nowrap}
.q-cur{color:var(--muted,#6b7280);font-size:10px}
.q-chg{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;white-space:nowrap;text-align:right;min-width:58px}
/* Okres linii i okres procentu (2026-08-07) — patrz komentarz przy quotesHtml w index.html.
Chip nazywa to, co rysuje sparkline (~30 sesji); dopisek „dziś" to, co niesie procent (sesja).
Oba są DROBNE i nie mogą konkurować z liczbami — to etykiety skali, nie treść. */
.q-per{font-family:'Space Mono',monospace;font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted,#6b7280);border:1px solid var(--rule);border-radius:3px;padding:1px 4px;
flex:0 0 auto;white-space:nowrap;align-self:center}
.q-chg-per{font-family:'Space Mono',monospace;font-size:7.5px;font-weight:400;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted,#6b7280)}
/* Bardzo wąskie ekrany: nazwa ustępuje miejsca liczbom (to one niosą treść).
⚠️ Chip okresu ZOSTAJE — jest odpowiedzią na „nie wiadomo, z jakiego terminu jest wykres",
więc znika dopiero po nazwie instrumentu, nie przed nią. */
@media (max-width:460px){
.q-name{display:none}
.q-spark{flex:0 0 84px}
.q-row{gap:8px;padding:9px 10px}
.q-chg{min-width:0}
/* Symbol i chip jeden pod drugim — w linii chip był OBCINANY (zmierzone: head potrzebował 92px,
dostawał 68). Kolumna zwęża głowę do szerokości chipa i mieści oba w całości. */
.q-head{flex-direction:column;align-items:flex-start;gap:2px}
}
/* ── „Saga × rynek": etapy wątku na wykresie ceny (2026-08-09) ─────────
Wariant gazetowy, spójny z paskiem notowań wyżej (ta sama ramka i promień).
⚠️ SVG BEZ preserveAspectRatio="none" (inaczej niż `.q-spark`) — tam rozciąganie
jest nieszkodliwe, bo rysowana jest sama linia, a tutaj kropki etapów zrobiłyby
się elipsami. Stąd `height:auto` i skalowanie proporcjonalne. */
.sr-box{
border:1px solid var(--rule,#e5e7eb);border-radius:9px;
background:var(--bg,#fff);padding:10px 12px 8px;margin:10px 0 6px;
}
.sr-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.sr-tt{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--red,#e01f0f)}
.sr-sym{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sr-svg{display:block;width:100%;height:auto}
/* Wykres jest PRZYCISKIEM rozsuwającym legendę (2026-08-09) — stąd reset guzika, a nie własny
klikacz na divie: dzięki temu działa Enter/Spacja i czytnik ekranu mówi „rozwinięte/zwinięte". */
.sr-klik{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.sr-klik:focus-visible{outline:2px solid var(--red,#e01f0f);outline-offset:3px;border-radius:6px}
.sr-hint{display:flex;align-items:center;gap:5px;margin-top:2px;
font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted,#6b7280)}
.sr-hint i{font-style:normal;transition:transform .15s ease}
.sr-klik:hover .sr-hint{color:var(--red,#e01f0f)}
.sr-klik.open .sr-hint i{transform:rotate(180deg)}
.sr-hint-z,.sr-klik.open .sr-hint-w{display:none}
.sr-klik.open .sr-hint-z{display:inline}
.sr-dot{fill:var(--bg,#fff);stroke:var(--muted,#6b7280);stroke-width:1.6}
.sr-dot.on{fill:var(--red,#e01f0f);stroke:var(--red,#e01f0f)}
.sr-num{font-family:'Space Mono',monospace;font-size:7px;font-weight:700;text-anchor:middle;
fill:var(--muted,#6b7280)}
.sr-dot.on + .sr-num{fill:#fff}
/* Wybrany etap (2026-08-12): kropka podąża za klikniętym wierszem listy.
⚠️ Reguły odsuwające „ten news" działają WYŁĄCZNIE gdy coś jest wybrane (`.ma-wybor` na pudełku) —
bez tego zmieniłby się wygląd DOMYŚLNY, o który nikt nie prosił: pełna czerwona kropka bieżącego
newsa zostaje taka, jaka była. Przy wyborze bieżąca schodzi do obwódki, żeby nie było dwóch
czerwonych plam i było widać, która jest chwilowym zaznaczeniem. */
/* Podetapy jednej sesji: schowane, wysuwa je klik w numerowany wiersz grupy (2026-08-12).
⚠️ Własna reguła `display` bije wbudowane `[hidden]{display:none}` — stąd jawny `[hidden]`,
dokładnie jak przy `.sr-legenda` wyżej. */
.sr-podetapy{display:flex;flex-direction:column;gap:1px}
.sr-podetapy[hidden]{display:none}
/* „+N" przy numerze — bez tego schowane wiersze są nieodkrywalne. */
.sr-leg-plus{font-size:8.5px;font-weight:700;color:var(--red,#e01f0f);margin-left:2px;vertical-align:1px}
.sr-leg.exopen .sr-leg-plus{opacity:.45}
.sr-dot.sel{fill:var(--red,#e01f0f);stroke:var(--red,#e01f0f)}
.sr-dot.sel + .sr-num{fill:#fff}
.sr-box.ma-wybor .sr-dot.on:not(.sel){fill:var(--bg,#fff);stroke:var(--red,#e01f0f);stroke-width:2.4}
.sr-box.ma-wybor .sr-dot.on:not(.sel) + .sr-num{fill:var(--red,#e01f0f)}
.sr-legenda{display:flex;flex-direction:column;gap:1px;margin-top:6px}
/* 🔴 KONIECZNE: selektor klasy bije wbudowane `[hidden]{display:none}`, więc bez tej linii legenda
rysowała się mimo atrybutu (`el.hidden === true`, a lista na ekranie). Ta sama pułapka czeka
przy każdym `hidden` na elemencie, któremu nadajemy własny `display`. */
.sr-legenda[hidden]{display:none}
.sr-leg{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:inherit;
padding:3px 0;border-top:1px solid var(--rule,#e5e7eb)}
.sr-leg:first-child{border-top:0}
.sr-leg-nr{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;flex:0 0 14px;
color:var(--muted,#6b7280)}
.sr-leg-nr i{font-style:normal;opacity:.55}
.sr-leg.on .sr-leg-nr{color:var(--red,#e01f0f)}
.sr-leg-dt{font-family:'Space Mono',monospace;font-size:9px;flex:0 0 auto;color:var(--muted,#6b7280)}
/* ⚠️ Rodzina PODANA JAWNIE — bez tego legenda dziedziczyła font kontenera i ta sama sekcja wychodziła
szeryfowa w panelu desktopu, a monospace w rozwiniętym artykule na telefonie (złapane na zrzutach).
Jedyny element, który wolno ścisnąć — ta sama zasada co przy `.q-name` w pasku notowań, ale tu
nagłówek etapu jest TREŚCIĄ, więc dostaje dwie linie zamiast ucinania w połowie pierwszej. */
.sr-leg-tx{font-family:'DM Serif Display',Georgia,serif;font-size:12.5px;line-height:1.3;
flex:1 1 auto;min-width:0;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-leg.on .sr-leg-tx{font-weight:700}
.sr-foot{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.04em;
color:var(--muted,#6b7280);margin-top:5px}
/* ── PANEL WĄTKÓW nad feedem (2026-08-13) ──────────────────────────────
Zastąpił hairline-pasek z 07.08, który był tylko linkiem do /watki. Teraz pociągnięcie
w dół rozwija PEŁNE sagi tej dawki (markup i logika: index.html).
⚠️ Najnowsza saga stoi na DOLE panelu (tuż nad feedem), starsze wyżej — panel wysuwa się
NAD treścią, więc „im wyżej, tym starsze". Wewnątrz sagi oś zostaje jak wszędzie:
najnowszy etap na górze. Desktop panelu nie pokazuje (ma przycisk WĄTKI w nagłówku). */
#watkiPanel { background: var(--gray1); border-bottom: 2px solid var(--text); }
#watkiPanel[hidden] { display: none; }
/* 🔴 PRZEWIJANIE SKOKAMI PO WĄTKACH — STEPPER W JS, nie `scroll-snap` (2026-08-13, druga tura).
Pierwsze podejście dokładało `scroll-snap-type: y proximity` + `scroll-snap-stop: always`
i **na telefonie nie dawało tego, o co chodziło** (zgłoszenie właściciela: „nie przeskakuje tak
jak przy pierwszym"): snap tylko DOCIĄGA po zwykłym przewijaniu palcem, więc ruch jest płynny
i kończy się dopiero po wygaśnięciu inercji — a oczekiwany był ten sam natychmiastowy skok co
przy otwarciu panelu. Teraz przewijaniem W PANELU steruje `wpSkok` (patrz index.html), a snapowanie
jest usunięte, żeby dwa mechanizmy się nie biły.
⚠️ Nie przywracaj tu snapowania „w ramach pomocy" — przy sterowanym przewijaniu nie ma czego
dociągać, a przy dwóch mechanizmach naraz skok potrafi się rozjechać o kilka pikseli. */
.wp-gora {
font-family: 'Space Mono', monospace; font-size: 8.5px; letter-spacing: 2px;
text-transform: uppercase; color: var(--muted); text-align: center; padding: 12px 16px 0;
}
.wp-gora[hidden] { display: none; }
.wp-saga { padding: 15px 16px 16px; border-bottom: 1px solid var(--rule); }
.wp-saga-head { cursor: pointer; }
.wp-meta {
display: flex; align-items: center; gap: 6px;
font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .5px; color: #b91c1c;
}
.wp-title { font-family: 'DM Serif Display', serif; font-size: 19px; line-height: 1.25; margin-top: 3px; }
.wp-memo { font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.5; margin-top: 5px; }
.wp-saga .watek-timeline { margin-top: 12px; }
/* Zwinięty ŚRODEK osi — `display:contents`, żeby po rozsunięciu węzły wróciły na oś jak własne
dzieci timeline'u (opakowanie blokowe rozbiłoby odstępy i pozycjonowanie kropek). */
.wp-srodek { display: none; }
.wp-saga.open .wp-srodek { display: contents; }
.wp-saga.open .wp-gap { display: none; }
.wp-gap {
position: relative; margin-bottom: 16px; cursor: pointer;
font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--muted);
}
.wp-gap::before {
content: ''; position: absolute; left: -22px; top: 4px; width: 3px; height: 3px; border-radius: 50%;
background: var(--rule); box-shadow: 0 5px 0 var(--rule), 0 10px 0 var(--rule);
}
.wp-toggle {
margin-top: 10px; cursor: pointer;
font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--red); font-weight: 700;
}
.wp-saga.open .wp-more { display: none; }
.wp-saga:not(.open) .wp-less { display: none; }
.wp-pusto {
padding: 26px 16px; text-align: center; line-height: 1.8;
font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted);
}
.wp-pusto a { color: var(--red); text-decoration: none; font-weight: 700; }
/* Belka na DOLE panelu — to ona ląduje pod ręką po geście (nagłówek u góry byłby kilka ekranów stąd). */
.wp-belka {
display: flex; align-items: center; gap: 12px; padding: 11px 16px;
border-top: 1px solid var(--rule); background: var(--bg);
font-family: 'Space Mono', monospace; font-size: 10px;
letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; color: #b91c1c;
}
.wp-belka-l { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.wp-belka-all { margin-left: auto; color: #b91c1c; text-decoration: none; white-space: nowrap; }
.wp-belka-zwin {
background: none; border: 1px solid var(--rule); color: var(--muted); cursor: pointer;
font-family: inherit; font-size: 9px; letter-spacing: 1.5px; font-weight: 700;
text-transform: uppercase; padding: 5px 8px; white-space: nowrap;
}
[data-theme="dark"] #watkiPanel { background: #141414; }
[data-theme="dark"] .wp-meta,
[data-theme="dark"] .wp-belka,
[data-theme="dark"] .wp-belka-all { color: #f87171; }
@media (min-width: 1024px) { #watkiPanel { display: none; } }
/* Przycisk „WĄTKI" w desktopowym nagłówku (2026-08-07, wariant A wybrany przez właściciela).
Czerwony obrys odróżnia go od fioletowej zakładki aktywnej dawki. Licznik żywy (threads.json). */
.dt-watki-btn {
display: flex; align-items: center; gap: 5px;
margin-left: 14px; padding: 6px 12px;
border: 1px solid var(--red); border-radius: 2px;
color: var(--red); text-decoration: none;
font-family: 'Space Mono', monospace; font-size: 10px;
letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase;
white-space: nowrap;
}
.dt-watki-btn:hover { background: var(--red); color: #fff; }
.dt-watki-n { opacity: .65; font-weight: 400; }
[data-theme="dark"] .dt-watki-btn { border-color: #f87171; color: #f87171; }
[data-theme="dark"] .dt-watki-btn:hover { background: #f87171; color: #0f0f0f; }
/* Oś wątku pod postem = styl /watki (2026-08-07): kropki PEŁNE, najnowszy etap na górze
z dużą czerwoną kropką (.watek-last). „Ten news" zachowuje czerwony pierścień. */
.watek-dot { background: #c9c9c9; border: none; }
[data-theme="dark"] .watek-dot { background: #4a4a4a; }
.watek-last .watek-dot { left: -25px; top: 2px; width: 11px; height: 11px; background: var(--red); border: none; }
.watek-cur:not(.watek-last) .watek-dot { background: var(--bg); border: 2px solid var(--red); }
.watek-last .watek-metaline { color: #b91c1c; }
[data-theme="dark"] .watek-last .watek-metaline { color: #f87171; }
.watek-when { text-transform: uppercase; }
/* ── Paski przewijania (2026-08-10, zgłoszenie właściciela: „pasek na nocnym wygląda chujowo") ──
`color-scheme` wyżej naprawia SAM WARIANT (jasny/ciemny) i to jest naprawa właściwa — poniżej
tylko dopasowanie do gazetowej estetyki: cienki, bez strzałek, kciuk w kolorze linii (`--rule`),
czyli tego samego, którym rozdzielamy wpisy. Dzięki zmiennym motyw ciemny obsługuje się sam.
⚠️ Celowo TYLKO na kontenerach desktopowych i nakładkach — na telefonie pasek jest nakładkowy
(znika sam) i stylowanie go potrafi zrobić z niego stale widoczną kreskę. */
.dt-index, .dt-feed-list, .dt-detail, .archive-body {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--rule) transparent;
}
.dt-index::-webkit-scrollbar,
.dt-feed-list::-webkit-scrollbar,
.dt-detail::-webkit-scrollbar,
.archive-body::-webkit-scrollbar { width: 10px; }
.dt-index::-webkit-scrollbar-track,
.dt-feed-list::-webkit-scrollbar-track,
.dt-detail::-webkit-scrollbar-track,
.archive-body::-webkit-scrollbar-track { background: transparent; }
.dt-index::-webkit-scrollbar-thumb,
.dt-feed-list::-webkit-scrollbar-thumb,
.dt-detail::-webkit-scrollbar-thumb,
.archive-body::-webkit-scrollbar-thumb {
background: var(--rule);
border-radius: 6px;
border: 3px solid var(--bg); /* wcięcie: kciuk nie dotyka krawędzi treści */
}
.dt-index::-webkit-scrollbar-thumb:hover,
.dt-feed-list::-webkit-scrollbar-thumb:hover,
.dt-detail::-webkit-scrollbar-thumb:hover,
.archive-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* ── LIVE → PILNE (2026-08-10) — ⚠️ TYLKO DESKTOP od 2026-08-12 ──────────────────────────
Pastylka LIVE zamienia się w klikalny pasek breaking newsa, gdy w bieżącej dawce jest
ŚWIEŻY item z flagą 🚨. Bez klasy `.pilne` wygląda i zachowuje się dokładnie jak dotąd —
zero regresji, gdy nic pilnego nie ma (a to jest stan domyślny przez większość doby).
🔴 WARIANT MOBILNY USUNIĘTY (decyzja właściciela 12.08: „usuń to na mobilnej, zrób jak było
wcześniej, na PC zostaw"). `.live-pill` wróciła do statycznego „Live" i JS jej nie dotyka —
patrz `aktualizujPilne` w index.html. Reguł `.live-pill.pilne` nie ma tu już wcale, bo klasa
`.pilne` nie może na ten element trafić; martwy styl gorszy niż jego brak. */
/* 🔴 KURCZENIE FLEXBOXEM ZOSTAJE, mimo że dotyczyło głównie mobilnej pastylki. Dwie regresje
z rzędu, obie zmierzone na 375 px i obie niewidoczne w pomiarze samej pastylki („mieści się"
było prawdą i nie wystarczało): (1) 46vw = 173 px wypychało datę w topbarze na TRZECIĄ linię,
(2) 28vw = 105 px naprawiło datę, ale wypchnęło ostatni przycisk 9 px POZA ekran (384 vs 375).
⚠️ NIE USUWAM tych reguł razem z wariantem mobilnym: `.topbar-right { min-width: 0 }` i
`.topbar-date { white-space: nowrap }` opisują zachowanie CAŁEGO topbara przy ciasnocie, a nie
samej pastylki — ich skasowanie byłoby zmianą, której nikt nie prosił i której nie zmierzyłem. */
.dt-live.pilne {
cursor: pointer; max-width: 340px;
flex: 0 1 auto; min-width: 0; overflow: hidden;
}
/* 🔴 `.topbar-right` jest elementem flex, a te mają domyślnie `min-width: auto` — czyli NIE MOGĄ
zejść poniżej szerokości swojej treści. Presja kurczenia nie docierała do pastylki, więc
`flex-shrink` na niej był martwy i pasek wypychał ostatni przycisk poza ekran (zmierzone:
429 px przy ekranie 375). Zmierzone, nie wyczytane z kodu. */
.topbar-right { min-width: 0; }
/* Data nigdy się nie łamie — przy ciasnocie kurczy się to, co ma ellipsis, a data nie ma jak
się skrócić bez utraty sensu. */
.topbar-date { white-space: nowrap; }
.pilne-tag {
font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700;
letter-spacing: 1.5px; flex-shrink: 0;
}
.dt-live.pilne .pilne-tag { color: var(--red); }
/* ⚠️ Kurczy się WYŁĄCZNIE tekst nagłówka — etykieta „PILNE" i kropka niosą sygnał i nigdy
nie mogą zostać wypchnięte (ta sama zasada co w `.watek-strip` i `.q-row`). */
.pilne-txt {
font-family: 'Space Mono', monospace; font-size: 8.5px; letter-spacing: .3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dt-live.pilne .pilne-txt { color: var(--text); text-transform: none; letter-spacing: .2px; }
/* ── Stopka z linkami statycznymi (2026-08-12) ──────────────────────────────
Powstała pod INDEKSACJĘ: `d/` i `w/` nie miały wcześniej ani jednego linku
z serwisu (tylko sitemap). Stonowana, żeby nie konkurowała z treścią —
ma być drogą dla crawlera i dla czytelnika, który dojechał na koniec dawki. */
.brif-footer {
display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
padding: 22px 16px 34px; border-top: 1px solid var(--rule); background: var(--bg);
}
.brif-footer a {
font-family: 'Space Mono', ui-monospace, monospace; font-size: 10.5px;
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
text-decoration: none; border-bottom: 1px solid transparent;
}
.brif-footer a:hover { color: var(--red); border-bottom-color: var(--red); }
/* Na desktopie feed ma własny, przewijany panel — stopka wjeżdżałaby w środek układu.
⚠️ Zostaje w DOM (crawler ją widzi), znika tylko wizualnie w szerokim widoku. */
@media (min-width: 1024px) { .brif-footer { display: none; } }
/* ── Skrót etapu rozsuwany w miejscu: oś sagi + legenda wykresu (2026-08-12) ────────────────
Wiersz etapu przestał być linkiem do innego newsa — tap rozwija skrót tutaj, a wyjście do
pełnego artykułu siedzi w środku bloku. Ta sama mechanika co na /watki i stronach sag. */
.saga-ex {
margin: -2px 0 10px 0; padding: 10px 12px 11px;
border-left: 2px solid var(--red); background: rgba(0,0,0,.028);
}
[data-theme="dark"] .saga-ex { background: rgba(255,255,255,.05); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .saga-ex { background: rgba(255,255,255,.05); }
}
.saga-ex-art { font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.saga-ex-foot {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px;
font-family: 'Space Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.saga-ex-src { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saga-ex-open { color: var(--red); text-decoration: none; flex: 0 0 auto; }
/* Sygnał „to się klika" — bez tego wiersz wygląda jak zwykły tekst (tak było do 12.08). */
.watek-node, .sr-leg { cursor: pointer; }
.watek-node.exopen .watek-head, .sr-leg.exopen .sr-leg-tx { color: var(--red); }