/* ==========================================================================
   Guides — long-form reading layout. Loaded only on /blog pages.
   Same rack vocabulary as the rest of the site: label tape for kickers,
   hairline frames, hard offset shadow only on interactive things.
   ========================================================================== */

.article-head { padding: 22px 0 34px; max-width: 860px; }
.article-head .tape { margin-bottom: 18px; }
.article-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.6; margin-bottom: 14px; text-wrap: balance; }
.article-lede { color: var(--text-secondary); font-size: 1.05rem; line-height: 2; max-width: 760px; margin-bottom: 22px; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-hover);
    font-size: .82rem;
    color: var(--text-tertiary);
}
.article-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.article-meta a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.article-meta a:hover { color: var(--accent-1); }
.article-meta .led { box-shadow: none; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; padding-bottom: 70px; }
@media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr; gap: 28px; } .article-side { order: -1; } }

.article-side { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1000px) { .article-side { position: static; } }
.toc ol { list-style: none; margin: 0; padding: 6px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc li a { display: flex; gap: 10px; padding: 7px 10px; font-size: .84rem; line-height: 1.75; color: var(--text-secondary); border-radius: var(--radius-xs); transition: background .12s, color .12s; }
.toc li a::before { content: counter(t, decimal-leading-zero); font-family: var(--font-mono); font-size: .7rem; color: var(--text-tertiary); padding-top: 2px; flex-shrink: 0; }
.toc li a:hover { background: var(--surface-hover); color: var(--text-primary); }
.toc li a.is-current { color: var(--text-primary); background: var(--surface-hover); }
.toc li a.is-current::before { color: var(--accent-1); }
@media (max-width: 1000px) { .toc ol { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .toc ol { grid-template-columns: 1fr; } }

/* ---------- prose ---------- */
.prose { min-width: 0; font-size: 1.02rem; line-height: 2.15; color: var(--text-secondary); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; }
.prose strong { color: var(--text-primary); font-weight: 700; }
.prose a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent-1); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .12s; }
.prose a:hover { color: var(--accent-1); }

.prose h2 {
    position: relative;
    margin: 56px 0 18px;
    padding-top: 22px;
    border-top: 1px solid var(--border-hover);
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--text-primary);
    scroll-margin-top: calc(var(--header-h) + 20px);
    counter-increment: sec;
}
.prose { counter-reset: sec; }
.prose h2::before {
    content: counter(sec, decimal-leading-zero);
    display: inline-block;
    margin-inline-end: 12px;
    padding: 0 8px;
    background: var(--tape-bg);
    color: var(--tape-fg);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    vertical-align: .18em;
    border-radius: 2px;
}
.prose h2#faq::before { content: 'FAQ'; }
.prose h3 { margin: 34px 0 12px; font-size: 1.16rem; line-height: 1.7; color: var(--text-primary); scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h4 { margin: 24px 0 8px; font-size: 1rem; color: var(--text-primary); }

.prose ul, .prose ol { margin: 0 0 20px; padding-inline-start: 26px; }
.prose li { margin-bottom: 8px; padding-inline-start: 4px; }
.prose li::marker { color: var(--accent-1); font-family: var(--font-mono); font-weight: 700; }

.prose code {
    font-family: var(--font-mono);
    font-size: .84em;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
    direction: ltr;
    unicode-bidi: isolate;
}

/* code frame: a faceplate with a tape label and a copy key */
.prose pre {
    position: relative;
    margin: 6px 0 24px;
    padding: 34px 18px 16px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    font-family: var(--font-mono);
    font-size: .84rem;
    line-height: 1.85;
    color: var(--text-primary);
    tab-size: 4;
}
.prose pre::before {
    content: attr(data-lang);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 10px;
    background: var(--tape-bg);
    color: var(--tape-fg);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 20px;
    border-radius: 0 0 3px 0;
}
.prose pre:not([data-lang])::before { content: 'SHELL'; }
.prose pre code { padding: 0; border: none; background: none; font-size: inherit; color: inherit; display: block; white-space: pre; }
.prose pre .c { color: var(--text-tertiary); }
.prose pre .k { color: var(--syn-a); }
.prose pre .s { color: var(--ok); }
.prose pre .n { color: var(--accent-1); }
.prose pre .copy-key {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    padding: 0 10px;
    border: none;
    border-radius: 0 0 0 3px;
    background: var(--surface-hover);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.prose pre .copy-key:hover { background: var(--accent-1); color: var(--accent-1-ink); }

/* callouts */
.prose .note, .prose .warn, .prose .tip {
    display: block;
    margin: 6px 0 24px;
    padding: 14px 18px 14px 18px;
    border: 1px solid var(--border-hover);
    border-inline-start-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    font-size: .94rem;
    line-height: 2;
}
.prose .note { border-inline-start-color: var(--text-tertiary); }
.prose .tip  { border-inline-start-color: var(--ok); }
.prose .warn { border-inline-start-color: var(--warn); }
.prose .note > b:first-child, .prose .tip > b:first-child, .prose .warn > b:first-child { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-inline-end: 8px; color: var(--text-primary); }
.prose .callout p:last-child { margin-bottom: 0; }

/* tables */
.prose .table-wrap { margin: 6px 0 26px; overflow-x: auto; border: 1px solid var(--border-hover); border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.8; }
.prose th { background: var(--bg-sunken); color: var(--text-primary); font-size: .78rem; font-weight: 700; text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--border-hover); white-space: nowrap; }
.prose td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; }
.prose tr:first-child td { border-top: none; }
.prose td code { white-space: nowrap; }
.prose td.mono, .prose td.num { font-family: var(--font-mono); direction: ltr; text-align: left; white-space: nowrap; color: var(--text-primary); }

/* "try it" card inside an article */
.try-tool {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 28px;
    padding: 14px 16px;
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
    text-decoration: none !important;
}
.try-tool:hover { transform: translate(2px, -2px); box-shadow: -4px 4px 0 0 var(--accent-1); color: inherit !important; }
.try-tool .tt-mark { flex-shrink: 0; min-width: 54px; padding: 8px 10px; text-align: center; background: var(--tape-bg); color: var(--tape-fg); font-family: var(--font-mono); font-weight: 700; font-size: .8rem; border-radius: 2px; direction: ltr; }
.try-tool .tt-body { flex: 1; min-width: 0; }
.try-tool .tt-title { display: block; color: var(--text-primary); font-weight: 800; font-size: .98rem; line-height: 1.6; }
.try-tool .tt-desc { display: block; color: var(--text-secondary); font-size: .84rem; line-height: 1.8; }
.try-tool .tt-go { color: var(--accent-1); flex-shrink: 0; }
.try-tool .tt-go svg { width: 18px; height: 18px; }

.article-more { padding-top: 10px; }
.blog-head { max-width: 760px; }
.blog-list { padding-bottom: 80px; }

@media (max-width: 640px) {
    .prose { font-size: .98rem; }
    .prose h2 { font-size: 1.3rem; }
    .try-tool { align-items: flex-start; }
}

/* breadcrumb (shared look with the tool pages, which style it in tools.css) */
.tool-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 0 0; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; color: var(--text-tertiary); }
.tool-breadcrumb a { color: var(--text-tertiary); transition: color .15s; }
.tool-breadcrumb a:hover { color: var(--accent-1); }
.tool-breadcrumb .sep { opacity: .5; }
.tool-breadcrumb .current { color: var(--text-primary); }

/* ---------- summary box under the lede ---------- */
.takeaways {
    margin-top: 26px;
    padding: 16px 20px 14px;
    border: 1px solid var(--border-hover);
    border-inline-start: 4px solid var(--accent-1);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    max-width: 780px;
}
.takeaways-title { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; font-weight: 700; }
.takeaways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.takeaways li { position: relative; padding-inline-start: 22px; color: var(--text-secondary); font-size: .94rem; line-height: 1.95; }
.takeaways li::before { content: '▸'; position: absolute; inset-inline-start: 2px; color: var(--accent-1); }

.tape-link { transition: background .15s; }
.tape-link:hover { background: var(--accent-1); color: var(--accent-1-ink); }

/* ---------- previous / next inside a category ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px dashed var(--border-hover); }
.pager-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border-hover); border-radius: var(--radius-md); background: var(--bg-elevated); text-decoration: none !important; transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.pager-link:hover { transform: translate(2px, -2px); border-color: var(--text-primary); box-shadow: -4px 4px 0 0 var(--accent-1); color: inherit !important; }
.pager-link.is-next { grid-column: 2; text-align: start; }
.pager-link.is-prev:only-child { grid-column: 1; }
.pager-link.is-next:only-child { grid-column: 2; }
.pager-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.pager-title { color: var(--text-primary); font-weight: 700; font-size: .92rem; line-height: 1.75; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } .pager-link.is-next { grid-column: 1; } }

/* ---------- category chips, hub intro, hub tool list ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cat-chips .chip { text-decoration: none; }
.cat-block { padding-bottom: 54px; scroll-margin-top: calc(var(--header-h) + 16px); }
.section-head h2 a:hover { color: var(--accent-1); }
.cat-intro { max-width: 780px; }
.cat-intro p { color: var(--text-secondary); font-size: 1.02rem; line-height: 2.1; margin-bottom: 14px; }
.guide-card-foot { gap: 12px; }

.cat-tools { padding-bottom: 40px; }
.cat-tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cat-tool-list a { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border-hover); border-radius: var(--radius-md); background: var(--bg-elevated); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cat-tool-list a:hover { border-color: var(--text-primary); box-shadow: -3px 3px 0 0 var(--accent-1); transform: translate(2px, -2px); }
.cat-tool-list .badge { flex-shrink: 0; min-width: 44px; padding: 4px 8px; text-align: center; background: var(--tape-bg); color: var(--tape-fg); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; border-radius: 2px; direction: ltr; }
.cat-tool-list strong { display: block; font-size: .92rem; color: var(--text-primary); }
.cat-tool-list small { display: block; font-size: .8rem; color: var(--text-secondary); line-height: 1.8; }