/* X Codec Pack - software page template styles (includes/software-template.php).
   Part 1 is the page CSS the HEIC, Image Codecs and JXL pages carried inline,
   moved here unchanged on 2026-10-25. Part 2 is the template shell: sidebar,
   "On this page", previous/next. */

/* ===== Part 1 - page components ===== */
.tool-breadcrumb{position:relative;z-index:1;padding:100px 32px 0}
.tool-breadcrumb-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.tool-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .2s}
.tool-breadcrumb a:hover{color:var(--accent-primary)}
.tool-breadcrumb span[aria-hidden]{opacity:.4}
.tool-hero{position:relative;z-index:1;padding:40px 32px 48px;text-align:center}
.tool-hero-inner{max-width:760px;margin:0 auto}
.tool-badge{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent-primary);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);padding:5px 14px;border-radius:99px;margin-bottom:20px}
.tool-hero h1{font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.tool-hero-desc{font-size:17px;color:var(--text-secondary);line-height:1.65;margin-bottom:24px}
.tool-hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tool-hero-tags span{font-family:'JetBrains Mono',monospace;font-size:11px;padding:4px 10px;border-radius:6px;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary)}
.tool-section{position:relative;z-index:1;padding:0 32px 64px}
.tool-section-inner{max-width:1100px;margin:0 auto}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.converter-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:28px}
.converter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.conv-logo{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600}
.conv-engine{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-primary)}
.engine-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-primary);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.tool-aside{display:flex;flex-direction:column;gap:14px}
.aside-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.aside-card h2{font-size:14px;font-weight:600;margin-bottom:10px}
.aside-card p{font-size:13px;color:var(--text-secondary);line-height:1.6}
.aside-card a{color:var(--accent-primary);text-decoration:none}
.aside-card a:hover{text-decoration:underline}
.aside-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.aside-list li{font-size:13px;color:var(--text-secondary);display:flex;align-items:flex-start;gap:7px}
.aside-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-primary);margin-top:7px;flex-shrink:0}
.aside-card-accent{background:rgba(52,211,153,.05);border-color:rgba(52,211,153,.2)}
.app-features{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.app-feature{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-secondary)}
.app-dl-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dl-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent-primary);color:var(--bg-dark);padding:12px 22px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,transform .15s}
.btn-primary:hover{background:#4ade80;transform:translateY(-1px)}
.info-section{position:relative;z-index:1;padding:80px 32px}
.info-section-alt{background:rgba(17,17,19,.5)}
.info-inner{max-width:1100px;margin:0 auto}
.info-inner-narrow{max-width:800px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-primary);margin-bottom:12px}
.section-title{font-size:clamp(22px,3vw,36px);font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px 24px}
.step-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-primary);margin-bottom:14px;letter-spacing:.1em}
.step-card h3{font-size:16px;font-weight:600;margin-bottom:10px}
.step-card p{font-size:14px;color:var(--text-secondary);line-height:1.65}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.compare-grid-3{grid-template-columns:repeat(3,1fr)}
.compare-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px 24px}
.compare-card-desktop{border-color:rgba(52,211,153,.3)}
.compare-badge{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);padding:3px 9px;border-radius:99px;display:inline-block;margin-bottom:12px}
.compare-badge-accent{color:var(--accent-primary);background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.2)}
.compare-card h3{font-size:16px;font-weight:600;margin-bottom:14px}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.compare-list li{font-size:13px;color:var(--text-secondary);display:flex;align-items:flex-start;gap:8px}
.compare-list li.pro::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-primary);margin-top:6px;flex-shrink:0}
.compare-list li.con::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--text-muted);margin-top:6px;flex-shrink:0}
.faq-list{display:flex;flex-direction:column;gap:8px;margin-top:40px}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:rgba(52,211,153,.3)}
.faq-item summary{padding:16px 20px;font-size:15px;font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:18px;color:var(--accent-primary);font-weight:300;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--accent-primary)}
.faq-answer{padding:0 20px 18px;font-size:14px;color:var(--text-secondary);line-height:1.7}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.related-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s}
.related-card:hover{border-color:var(--accent-primary);transform:translateY(-3px)}
.related-icon{width:44px;height:44px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.related-card h3{font-size:16px;font-weight:600}
.related-card p{font-size:13px;color:var(--text-secondary);line-height:1.6;flex:1}
.related-link{font-size:13px;color:var(--accent-primary);font-weight:500}
@media(max-width:1100px){.compare-grid-3{grid-template-columns:1fr 1fr}.compare-grid-3 .compare-card:last-child{grid-column:span 2}}
@media(max-width:1024px){.tool-layout{grid-template-columns:1fr}.tool-aside{flex-direction:row;flex-wrap:wrap}.tool-aside .aside-card{flex:1;min-width:240px}.steps-grid,.compare-grid{grid-template-columns:1fr}.compare-grid-3{grid-template-columns:1fr}.compare-grid-3 .compare-card:last-child{grid-column:span 1}.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.tool-hero,.tool-section,.info-section{padding-left:20px;padding-right:20px}.tool-hero{padding-top:32px;padding-bottom:40px}.tool-section{padding-bottom:48px}.related-grid{grid-template-columns:1fr}.tool-aside{flex-direction:column}.tool-breadcrumb{padding:80px 20px 0}.app-dl-btns{flex-direction:column;align-items:flex-start}}
/* ---- Page extras: prose, commands, tables, checksum ---- */
.dl-alt{margin-top:16px;font-size:13px;color:var(--text-secondary)}
.dl-alt a,.prose a,.spec-table a,.faq-answer a{color:var(--accent-primary);text-decoration:none}
.dl-alt a:hover,.prose a:hover,.spec-table a:hover,.faq-answer a:hover{text-decoration:underline}
.prose{font-size:15px;color:var(--text-secondary);line-height:1.7;margin:0 0 16px;max-width:760px}
.prose strong{color:var(--text-primary);font-weight:600}
.prose code,.spec-table code,.faq-answer code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--bg-elevated);border:1px solid var(--border);padding:1px 6px;border-radius:5px;color:var(--text-primary)}
.cmd-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:0 0 20px;overflow-x:auto}
.cmd-block code{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;color:var(--accent-primary);white-space:pre}
.table-wrap{overflow-x:auto;margin:8px 0 20px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:12px 16px;background:var(--bg-elevated);white-space:nowrap}
.spec-table td{padding:12px 16px;color:var(--text-secondary);border-top:1px solid var(--border);vertical-align:top}
.spec-table td:first-child{color:var(--text-primary);font-weight:500;white-space:nowrap}
.sum-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:8px 0 12px}
.sum-name{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.sum-hash{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent-primary);word-break:break-all}
.sum-how{font-size:13px}
.aside-card p+p{margin-top:8px}
@media(max-width:768px){.spec-table{font-size:13px}.spec-table th,.spec-table td{padding:10px 12px}.cmd-block code{font-size:12px}}

.dl-more{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.dl-more-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elevated);text-decoration:none;color:inherit;transition:border-color .2s}
.dl-more-item:hover{border-color:var(--accent-primary)}
.dl-more-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.dl-more-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
@media(max-width:768px){.dl-more{grid-template-columns:1fr}}

/* ===== Part 2 - template shell ===== */
.sw-shell {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.sw-main { min-width: 0; }
.sw-main .tool-section,
.sw-main .info-section { padding-left: 0; padding-right: 0; }
.sw-main .tool-section-inner,
.sw-main .info-inner { max-width: none; }
.sw-main .info-inner-narrow { max-width: 820px; }
.sw-section { padding-top: 64px; padding-bottom: 64px; scroll-margin-top: 150px; }
.sw-section + .sw-section { border-top: 1px solid var(--border); }
#download { scroll-margin-top: 150px; }

/* sidebar - sticks under the fixed nav */
.sw-sidebar {
    position: sticky;
    top: 150px;
    max-height: calc(100vh - 166px);
    overflow-y: auto;
    padding: 4px 0 24px;
    scrollbar-width: thin;
}
.sw-side-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 18px 0 6px;
    padding: 0 10px;
}
.sw-sidebar-inner > .sw-side-title:first-child { margin-top: 0; }
.sw-side-list,
.sw-toc ul { list-style: none; margin: 0; padding: 0; }
.sw-side-list a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.sw-side-list a:hover,
.sw-side-list a:focus-visible { color: var(--text-primary); background: var(--bg-elevated); }
.sw-side-list a.active {
    color: var(--accent-primary);
    background: rgba(52, 211, 153, 0.1);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25);
    font-weight: 600;
}
.sw-toc {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.sw-toc a {
    display: block;
    padding: 5px 10px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}
.sw-toc a:hover,
.sw-toc a:focus-visible { color: var(--accent-primary); }

/* previous / next */
.sw-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 8px 0 24px;
}
.sw-pager a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13px;
    transition: border-color 0.2s ease;
}
.sw-pager a strong { color: var(--text-primary); font-size: 15px; }
.sw-pager a:hover,
.sw-pager a:focus-visible { border-color: var(--accent-primary); }
.sw-pager-next { text-align: right; }

/* localhost-only SEO check output */
.sw-dev-errors {
    position: relative;
    z-index: 5;
    max-width: 1100px;
    margin: 150px auto 0;
    padding: 14px 18px;
    border: 1px solid #f87171;
    border-radius: 12px;
    background: rgba(248, 113, 113, 0.1);
    color: #ef4444;
    font-size: 14px;
}
.sw-dev-errors ul { margin: 6px 0 0 18px; }

/* below 1180px the sidebar folds into an "On this page" chip row */
@media (max-width: 1180px) {
    .sw-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sw-sidebar { position: static; max-height: none; overflow: visible; padding: 0 0 8px; }
    .sw-sidebar-inner > .sw-side-title,
    .sw-side-list { display: none; }
    .sw-toc { margin: 0; padding: 0; border: 0; }
    .sw-toc .sw-side-title { display: none; }
    .sw-toc ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .sw-toc a {
        white-space: nowrap;
        padding: 7px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-card);
        color: var(--text-secondary);
    }
}
@media (max-width: 768px) {
    .sw-shell { padding: 0 20px; }
    .sw-section { padding-top: 48px; padding-bottom: 48px; }
    .sw-pager { grid-template-columns: 1fr; }
}

/* site.css styles every <nav> as the fixed top bar - undo that for the
   template's own nav landmarks (On this page, previous/next). */
nav.sw-toc,
nav.sw-pager {
    position: static;
    inset: auto;
    z-index: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
}
nav.sw-toc { padding: 16px 0 0; }
nav.sw-pager { padding: 8px 0 24px; }
@media (max-width: 1180px) {
    nav.sw-toc { padding: 0; border-top: 0; }
}
@media (max-width: 768px) {
    nav.sw-toc, nav.sw-pager { padding-left: 0; padding-right: 0; }
    nav.sw-pager { padding-top: 8px; }
}

/* narrow text sections line up with the column, not centred in it */
.sw-main .info-inner-narrow { margin-left: 0; }