/* Keep long documentation readable without widening the page. */
.zelc-home .main-content *,
.zelc-document main *,
.zelc-document .container *,
.zelc-document .wrap * {
  min-width: 0;
}
.zelc-home .table-scroll,
.zelc-document .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 8px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 2px solid #fabd2f; outline-offset: 4px; }
.zelc-home .table-scroll > table,
.zelc-document .table-scroll > table { margin: 0; min-width: 100%; }
.zelc-home .code-body,
.zelc-home .command-example {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.zelc-home .code-body pre {
  min-width: 100%;
  width: max-content;
  white-space: pre;
}
.zelc-home .main-content :not(pre) > code,
.zelc-document :not(pre) > code { overflow-wrap: anywhere; }
.zelc-home :where(section[id], div[id], h2[id], h3[id]) {
  scroll-margin-top: calc(var(--zelc-header-height, 84px) + 18px);
}
.zelc-home .sidebar-backdrop { display: none; }
.zelc-home .sidebar-toggle:focus-visible,
.zelc-home .nav-search input:focus-visible,
.zelc-home .sidebar-menu a:focus-visible {
  outline: 2px solid var(--gb-yellow);
  outline-offset: 3px;
}
.zelc-home .sidebar-toggle { touch-action: manipulation; }
.zelc-home .sidebar-toggle.collapsed span { opacity: 1; transform: none; }
.zelc-home .nav-results { max-height: min(65dvh, 540px); overflow-y: auto; }

@media (max-width: 1100px) {
  .zelc-home { --zelc-header-height: 68px; }
  .zelc-home .site-nav { padding: 0 18px; min-height: 68px; }
  .zelc-home .nav-container { min-height: 66px; gap: 14px; }
  .zelc-home .nav-links { display: none; }
  .zelc-home .logo { flex-shrink: 0; font-size: 1.65rem; }
  .zelc-home .nav-search { flex: 1; min-width: 0; justify-content: flex-end; }
  .zelc-home .nav-search input {
    width: min(100%, 380px);
    max-width: none;
    min-width: 0;
    min-height: 42px;
    font-size: 16px;
  }
  .zelc-home .nav-results {
    width: min(520px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    right: -58px;
    overflow-wrap: anywhere;
  }
  .zelc-home .sidebar-toggle,
  .zelc-home .sidebar-toggle.collapsed {
    position: static;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-left: 0;
  }
  .zelc-home .sidebar-toggle span { width: 19px; }
  .zelc-home.mobile-nav-open .sidebar-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .zelc-home.mobile-nav-open .sidebar-toggle span:nth-child(2) { opacity: 0; }
  .zelc-home.mobile-nav-open .sidebar-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .zelc-home .sidebar,
  .zelc-home .sidebar.collapsed {
    top: var(--zelc-header-height);
    width: min(340px, calc(100vw - 52px));
    height: calc(100dvh - var(--zelc-header-height));
    padding: 12px 0 max(20px, env(safe-area-inset-bottom));
    transform: translateX(-100%);
    visibility: hidden;
    overscroll-behavior: contain;
    transition: transform .2s, visibility .2s;
  }
  .zelc-home.mobile-nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
  }
  .zelc-home.mobile-nav-open { overflow: hidden !important; }
  .zelc-home.mobile-nav-open .scroll-to-top { visibility: hidden; pointer-events: none; }
  .zelc-home.mobile-nav-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: var(--zelc-header-height) 0 0;
    z-index: 850;
    background: rgba(0,0,0,.65);
    border: 0;
    padding: 0;
    cursor: pointer;
    touch-action: none;
  }
  .zelc-home .sidebar-menu a { padding: 13px 20px; min-height: 48px; gap: 12px; }
  .zelc-home.sidebar-open .main-content,
  .zelc-home.sidebar-open .hero { margin-left: 0; }
  .zelc-home .hero { margin-top: var(--zelc-header-height); padding-top: 3rem; }
  .zelc-home .main-content { max-width: 100%; padding: 3rem 24px; }
  .zelc-home .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .zelc-home .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}

@media (max-width: 900px) {
  .zelc-home .grid-2, .zelc-home .grid-3 { grid-template-columns: minmax(0,1fr); }
  .zelc-home .main-content .zfs-cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .zelc-home .zfs-cards .card { aspect-ratio: auto !important; min-height: 180px; overflow: visible !important; }
}

@media (max-width: 640px) {
  .zelc-home { --zelc-header-height: 64px; }
  .zelc-home .site-nav { min-height: 64px; padding-inline: 16px; }
  .zelc-home .nav-container { min-height: 62px; gap: 10px; }
  .zelc-home .logo { font-size: 1.5rem; }
  .zelc-home .nav-results { width: calc(100vw - 32px); max-width: calc(100vw - 32px); right: -54px; }
  .zelc-home .hero { padding: 36px 16px; }
  .zelc-home .hero h1 { font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.25; margin-bottom: 20px; overflow-wrap: anywhere; }
  .zelc-home .hero .subtitle { font-size: 1.12rem; line-height: 1.5; margin-bottom: 15px; }
  .zelc-home .hero .tagline { font-size: 1rem; line-height: 1.75; margin-bottom: 24px; }
  .zelc-home .hero-badges { gap: 8px; margin-bottom: 24px; }
  .zelc-home .badge { padding: 7px 10px; font-size: .76rem; }
  .zelc-home .cta-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .zelc-home .cta-buttons .btn { justify-content: center; min-height: 48px; padding: 12px 16px !important; font-size: .94rem !important; text-align: center; }
  .zelc-home .main-content { padding: 32px 16px; }
  .zelc-home .main-content h2 { font-size: clamp(1.6rem, 6.5vw, 2rem) !important; line-height: 1.35; overflow-wrap: anywhere; }
  .zelc-home .main-content h3 { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; line-height: 1.4; overflow-wrap: anywhere; }
  .zelc-home .main-content h4 { font-size: 1.05rem !important; line-height: 1.5; overflow-wrap: anywhere; }
  .zelc-home .main-content p { font-size: 1rem !important; line-height: 1.75 !important; overflow-wrap: anywhere; }
  .zelc-home .section { margin-bottom: 48px; }
  .zelc-home .section-header { margin-bottom: 24px; }
  .zelc-home .section-label { font-size: .7rem; letter-spacing: .06em; }
  .zelc-home .section-desc { font-size: 1rem; }
  .zelc-home .main-content [style*="padding: 5rem"] { padding: 32px 16px !important; }
  .zelc-home .main-content > div[style*="padding: 0 2rem"] { padding-inline: 0 !important; margin-block: 32px !important; }
  .zelc-home .main-content .grid,
  .zelc-home .main-content [style*="grid-template-columns"],
  .zelc-home #colorful-code .benefit-grid,
  .zelc-home #strategic-impact .usecase,
  .zelc-home .kpi-badges { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
  .zelc-home .card,
  .zelc-home .meta-block { padding: 20px !important; }
  .zelc-home .card.card-flat { padding: 0 !important; }
  .zelc-home .card h3 { display: block; }
  .zelc-home .command-section { padding: 18px; }
  .zelc-home .command-item { padding: 16px; margin-bottom: 16px; }
  .zelc-home .command-name { font-size: 1.08rem; overflow-wrap: anywhere; }
  .zelc-home .command-desc { font-size: .94rem; line-height: 1.75; overflow-wrap: anywhere; }
  .zelc-home .command-example { padding: 12px; font-size: .76rem; }
  .zelc-home .code-body { padding: 14px; }
  .zelc-home .code-body pre,
  .zelc-home .main-content pre { font-size: .78rem !important; line-height: 1.8 !important; max-width: 100%; overflow-x: auto !important; }
  .zelc-home .code-body pre { max-width: none; }
  .zelc-home .code-header { flex-wrap: wrap; gap: 8px; padding: 11px 14px; }
  .zelc-home .main-content img { max-width: 100%; height: auto; }
  .zelc-home .main-content .zfs-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px; }
  .zelc-home .zfs-cards .card { aspect-ratio: auto !important; min-height: 165px; padding: 16px !important; overflow: visible !important; gap: 12px !important; }
  .zelc-home .main-content .zfs-cards p { font-size: .9rem !important; line-height: 1.6 !important; }
  .zelc-home .table-scroll { margin-block: 22px; }
  .zelc-home th,.zelc-home td { padding: 12px; min-width: 105px; font-size: .88rem; }
  .zelc-home .divider { margin-block: 32px; }
  .zelc-home .heavy-divider { max-width: 100%; overflow: hidden; white-space: nowrap; }
  .zelc-home #faq .faq-controls { flex-wrap: wrap; }
  .zelc-home #faq .faq-toggle { padding: 15px; font-size: 1rem; line-height: 1.5; }
  .zelc-home #faq .faq-content { padding: 16px; font-size: .94rem; }
  .zelc-home #faq .faq-q { overflow-wrap: anywhere; }
  .zelc-home footer { padding: 32px 18px; }
  .zelc-home .footer-links { flex-wrap: wrap; gap: 15px 22px; margin-top: 20px; }
  .zelc-home .scroll-to-top { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* The companion references use several independent layouts. */
@media (max-width: 768px) {
  .zelc-document, .zelc-document * { box-sizing: border-box; }
  .zelc-document { max-width: 100%; margin: 0; padding: 0; overflow-wrap: anywhere; }
  .zelc-document .container, .zelc-document .wrap { max-width: 100%; min-width: 0; padding-inline: 16px; }
  .zelc-document > .container { padding-block: 24px; }
  .zelc-document h1 { font-size: clamp(1.7rem, 6.5vw, 2.3rem) !important; line-height: 1.35; overflow-wrap: anywhere; }
  .zelc-document h2 { font-size: clamp(1.35rem, 5.2vw, 1.8rem) !important; line-height: 1.4; overflow-wrap: anywhere; }
  .zelc-document h3 { font-size: 1.15rem !important; line-height: 1.45; overflow-wrap: anywhere; }
  .zelc-document .grid-2, .zelc-document .usecase, .zelc-document .kpi-badges { grid-template-columns: minmax(0,1fr); }
  .zelc-document .card, .zelc-document .cmd, .zelc-document .meta-block { min-width: 0; max-width: 100%; }
  .zelc-document img { max-width: 100%; height: auto; }
  .zelc-document pre, .zelc-document .codeblock, .zelc-document .code-block, .zelc-document .cmd-code {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .zelc-document .table-scroll { margin-block: 20px; }
  .zelc-document th, .zelc-document td { padding: 12px; min-width: 100px; font-size: .88rem; }
  .zelc-document .search-box, .zelc-document input[type="search"] { min-width: 0; font-size: 16px; }
  .zelc-document .topbar, .zelc-document .top-actions, .zelc-document .top-links { flex-wrap: wrap; gap: 12px; }
  .zelc-document .toml-tabs { max-width: 100%; overscroll-behavior-x: contain; }
  .zelc-document .toml-tab { flex: 0 0 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .zelc-home { scroll-behavior: auto; }
  .zelc-home .sidebar, .zelc-home .sidebar-toggle, .zelc-home .sidebar-toggle span { transition: none; }
}
@media (hover: none) {
  .zelc-home .card:hover, .zelc-home .zelc-soft-keywords__card:hover { transform: none; }
}