.webla-bar, .webla-chip {
--_bg: var(--wb-bg, #161615);
--_fg: var(--wb-fg, #f2f1ec);
--_muted: var(--wb-muted, #a9a8a1);
--_accent: var(--wb-accent, #f2f1ec);
}
.webla-bar {
position: relative;
z-index: 60;
display: flex;
align-items: center;
gap: 1rem;
min-height: 2.5rem;
padding: 0.35rem clamp(1rem, 3vw, 2rem);
background: var(--_bg);
color: var(--_fg);
font-family: var(--wb-font, system-ui, sans-serif);
font-size: 0.8125rem;
line-height: 1.3;
letter-spacing: 0.01em;
}
.webla-bar a { color: inherit; text-decoration: none; }
.webla-bar a:focus-visible,
.webla-bar button:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; border-radius: 2px; }
.webla-bar__who { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.webla-bar__who b { font-weight: 600; }
.webla-bar__who span { color: var(--_muted); }
.webla-bar__nav { display: flex; gap: 0.25rem; margin-left: auto; }
.webla-bar__nav a {
padding: 0.3rem 0.55rem;
border-radius: 999px;
color: var(--_muted);
white-space: nowrap;
transition: color 0.2s ease, background-color 0.2s ease;
}
.webla-bar__nav a:hover { color: var(--_fg); }
.webla-bar__nav a[aria-current="page"] { color: var(--_bg); background: var(--_fg); }
.webla-notes {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.3rem 0.2rem 0.3rem 0.6rem;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
white-space: nowrap;
}
.webla-notes__track {
position: relative;
width: 2rem;
height: 1.1rem;
border-radius: 999px;
background: color-mix(in srgb, var(--_fg) 25%, transparent);
transition: background-color 0.25s ease;
}
.webla-notes__track::after {
content: "";
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: var(--_fg);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.webla-notes[aria-pressed="true"] .webla-notes__track { background: var(--_accent); }
.webla-notes[aria-pressed="true"] .webla-notes__track::after { transform: translateX(0.9rem); background: var(--_bg); }
.webla-notes__count { color: var(--_muted); font-variant-numeric: tabular-nums; }
.webla-chip {
position: fixed;
left: max(0.75rem, env(safe-area-inset-left));
bottom: max(0.75rem, env(safe-area-inset-bottom));
z-index: 60;
padding: 0.2rem 0.3rem;
border-radius: 999px;
background: var(--_bg);
color: var(--_fg);
font-family: var(--wb-font, system-ui, sans-serif);
font-size: 0.75rem;
box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
opacity: 0;
transform: translateY(0.75rem);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.webla-chip.is-on { opacity: 1; transform: none; pointer-events: auto; }
.webla-chip .webla-notes { padding: 0.25rem 0.3rem 0.25rem 0.55rem; min-height: 2.25rem; }
.webla-chip .webla-notes:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; border-radius: 999px; }
@media (max-width: 980px) {
.webla-bar { flex-wrap: wrap; gap: 0 0.5rem; padding-block: 0; font-size: 0.75rem; }
.webla-bar__who span { display: none; }
.webla-bar__nav { margin: 0 -0.5rem; order: 3; width: calc(100% + 1rem); overflow-x: auto; scrollbar-width: none; }
.webla-bar__nav::-webkit-scrollbar { display: none; }
.webla-bar__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.webla-bar { padding-inline: 0.75rem; }
.webla-notes { margin-left: auto; min-height: 2.75rem; padding-left: 0.3rem; gap: 0.4rem; }
.webla-notes__stav { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.webla-chip { display: none; }
}
.pozn {
position: relative;
display: inline-block;
margin: 0 0.15em;
padding: 0.05em 0.4em 0.08em;
border-radius: 3px;
background: var(--pozn-bg, #ffe36e);
color: var(--pozn-fg, #2b2400);
font-family: var(--wb-font, system-ui, sans-serif);
font-size: 0.72rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.5;
text-transform: uppercase;
vertical-align: 0.15em;
white-space: nowrap;
cursor: help;
}
.pozn[data-typ="doplnit"] { background: var(--pozn-bg-2, #ffc9a8); color: var(--pozn-fg-2, #3a1500); }
.pozn__text {
position: absolute;
right: -0.4rem;
left: auto;
bottom: calc(100% + 0.5rem);
z-index: 70;
display: none;
width: max-content;
max-width: min(18rem, 76vw);
padding: 0.55rem 0.7rem;
border-radius: 6px;
background: #1c1b18;
color: #f4f2ea;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.4;
text-transform: none;
white-space: normal;
box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
pointer-events: none;
}
.pozn[data-strana~="dole"] .pozn__text { bottom: auto; top: calc(100% + 0.5rem); }
.pozn:hover .pozn__text,
.pozn:focus .pozn__text,
.pozn.is-open .pozn__text { display: block; }
.pozn:focus { outline: none; }
.pozn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html.bez-poznamek .pozn { display: none; }
.webla-notes[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.webla-chip, .webla-notes__track, .webla-notes__track::after { transition: none; }
}
@media (max-width: 380px) {
.webla-notes__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}