/* Návod Bezpečný deploy (/cloudflare/deploy, /cs/cloudflare/deploy).
 * Základ stránky: publication-guide.css (pg-*) + workers-cache.css (wc-*). Tady jen záložky Next.js × Workery (TechTabs.tsx),
 * převzaté ze záložek návodu Tailwind (.tw-tabs* v tailwind-css.css). */

.dp-tabs { margin-top: 28px !important; }
.dp-tabs-list {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 560px;
  padding: 4px;
  border: 1px solid var(--pg-line);
  border-radius: 14px;
  background: var(--pg-soft);
}
.dp-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--pg-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.dp-tab:hover { color: var(--pg-ink); }
.dp-tab:focus-visible { outline: 2px solid var(--pg-brand); outline-offset: 2px; }
.dp-tab[aria-selected="true"] {
  background: #fff;
  color: var(--pg-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 42, 29, 0.08);
}
.dp-tab-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.dp-tab-note { font-size: 12.5px; line-height: 1.4; color: var(--pg-muted); }
.dp-tab[aria-selected="true"] .dp-tab-note { color: var(--pg-brand-2); }
@media (prefers-reduced-motion: reduce) { .dp-tab { transition: none; } }

/* Obsah panelu navazuje na prózu kapitoly (stejné rozestupy jako .pg-prose > *) */
.dp-tabpanel-body { display: flow-root; }
.dp-tabpanel-body > * + * { margin-top: 16px; }
.dp-tabpanel-body > :first-child { margin-top: 24px !important; }
.dp-tabpanel-body > p,
.dp-tabpanel-body > h3,
.dp-tabpanel-body > ul:not([class]),
.dp-tabpanel-body > ol:not([class]) { max-width: 780px; }
.dp-tabpanel-body > .wc-code,
.dp-tabpanel-body > .pg-table-wrap { max-width: 860px; }
.dp-tabpanel-body > :first-child:is(h3) { margin-top: 32px !important; }
/* Tabulka uvnitř kroku nebo panelu nemá na úzkém displeji přetékat */
.dp-tabpanel-body .pg-table-wrap { overflow-x: auto; }