/* Společná lišta webů Peekless (Peekless\Core\Shell): značka a přepínač nástrojů. Barvy z tokenů webu,
   s rozumnou zálohou. Třídy mají předponu pk-, aby se nepletly se styly nástrojů. */
.pk-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text, #0f172a); text-decoration: none; line-height: 1; }
.pk-brand:hover { color: var(--text, #0f172a); }
.pk-logo { width: 32px; height: 32px; flex: none; border-radius: 9px; }
.pk-word { font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.pk-product { font-family: var(--font-ui, system-ui, sans-serif); font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--accent-text, #1d4ed8);
  border: 2px solid currentColor; border-radius: 7px; padding: 3px 6px 2px; margin-left: 1px; }

.pk-tools { position: relative; }
.pk-tools > summary { list-style: none; }
.pk-tools > summary::-webkit-details-marker { display: none; }
.pk-tools-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; color: var(--text-2, #475569);
  font-weight: 600; font-size: 14px; padding: 8px 11px; border-radius: var(--r-md, 10px); }
.pk-tools-btn:hover, .pk-tools[open] > .pk-tools-btn { color: var(--text, #0f172a); background: var(--surface-3, #f1f5f9); }
.pk-tools-btn:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgb(37 99 235 / .35)); }
.pk-grid { width: 16px; height: 16px; fill: currentColor; }
.pk-tools-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; width: min(340px, calc(100vw - 32px)); padding: 8px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-lg, 16px); box-shadow: var(--shadow-lg, 0 20px 50px rgb(15 23 42 / .16)); }
.pk-tools-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pk-tool { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md, 10px); color: var(--text, #0f172a); text-decoration: none; }
a.pk-tool:hover { background: var(--surface-3, #f1f5f9); }
.pk-tool.is-current { background: var(--accent-soft, #eff6ff); }
.pk-tool.is-soon { opacity: .6; }
.pk-tool-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pk-accent, #2563eb); color: #fff;
  font: 800 11px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .03em; }
.pk-tool-tx { display: grid; gap: 2px; min-width: 0; }
.pk-tool-tx b { font-size: 14px; }
.pk-tool-tx small { font-size: 12.5px; color: var(--text-2, #475569); line-height: 1.35; }
.pk-tool em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3, #5b6a80); }
.pk-tools-all { display: block; margin-top: 6px; padding: 10px; border-top: 1px solid var(--border, #e2e8f0); color: var(--accent-text, #1d4ed8);
  font-weight: 600; font-size: 13.5px; text-decoration: none; border-radius: 0 0 var(--r-md, 10px) var(--r-md, 10px); }
.pk-tools-all:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .pk-tools-btn span { display: none; }
  .pk-word { font-size: 19px; }
  /* nabídka přes celou šířku lišty (lišta webu je position: sticky/relative) */
  .pk-tools { position: static; }
  .pk-tools-menu { left: 16px; right: 16px; width: auto; top: calc(100% - 4px); }
}

/* Nabídka jazyka (shell.js): nenápadná karta dole, v editoru skrytá. */
.pk-langbar { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: max-content; max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-lg, 16px); box-shadow: var(--shadow-lg, 0 20px 50px rgb(15 23 42 / .16));
  font-size: 14px; animation: pk-in .25s ease-out; }
.pk-langbar p { margin: 0; }
.pk-langbar .btn { flex: none; white-space: nowrap; }
.pk-langbar-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm, 8px); background: transparent; color: var(--text-2, #475569);
  font-size: 22px; line-height: 1; cursor: pointer; }
.pk-langbar-x:hover { background: var(--surface-3, #f1f5f9); color: var(--text, #0f172a); }
.pk-langbar-x:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgb(37 99 235 / .35)); }
body.has-app .pk-langbar { display: none; }
@keyframes pk-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pk-langbar { animation: none; } }
@media (max-width: 560px) {
  .pk-langbar { right: 16px; width: auto; max-width: none; }
  .pk-langbar p { flex: 1; }
}

/* Přepínač jazyka (Shell::languages): tlačítko s globem a názvem jazyka, seznam jazyků vpravo pod ním. */
.pk-langs { position: relative; }
.pk-langs > summary { list-style: none; }
.pk-langs > summary::-webkit-details-marker { display: none; }
.pk-langs-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; color: var(--text-2, #475569);
  font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: var(--r-md, 10px); white-space: nowrap; }
.pk-langs-btn:hover, .pk-langs[open] > .pk-langs-btn { color: var(--text, #0f172a); background: var(--surface-3, #f1f5f9); }
.pk-langs-btn:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgb(37 99 235 / .35)); }
.pk-globe { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pk-langs-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; min-width: 200px; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-lg, 16px); box-shadow: var(--shadow-lg, 0 20px 50px rgb(15 23 42 / .16)); }
.pk-langs-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.pk-lang { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: var(--r-md, 10px);
  color: var(--text, #0f172a); text-decoration: none; font-size: 14px; font-weight: 500; }
a.pk-lang:hover { background: var(--surface-3, #f1f5f9); color: var(--text, #0f172a); }
a.pk-lang:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgb(37 99 235 / .35)); }
.pk-lang.is-current { font-weight: 700; color: var(--accent-text, #1d4ed8); }
.pk-lang.is-current::after { content: ''; width: 9px; height: 5px; margin: -3px 2px 0 0; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (max-width: 560px) {
  .pk-langs-btn span { display: none; }
  .pk-langs-btn { padding: 8px; }
}

/* Jazyky v patičce (Shell::languageLinks): řádek přes celou šířku mřížky patičky. */
.pk-foot-langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13.5px; color: var(--text-2, #475569); }
.pk-foot-langs .pk-globe { width: 16px; height: 16px; margin-right: -8px; color: var(--text-3, #5b6a80); }
.pk-foot-langs a { color: var(--text-2, #475569); text-decoration: none; }
.pk-foot-langs a:hover { color: var(--accent-text, #1d4ed8); text-decoration: underline; }
.pk-foot-langs [aria-current] { color: var(--text, #0f172a); font-weight: 700; }