/* The handbook shell overrides only guides; uploaded article layouts remain intact. */
body.classic-guides { overflow-x: clip; overflow-y: visible; }
.classic-guides .header-container--compact { height: 95px; }
.classic-guides .breadcrumbs { padding: 18px 42px; background: #13110fde; font-size: 13px; }
.classic-guides .content { padding: 38px 42px 52px; }
.classic-guides .guide-page { --guide-wine: #773843; --guide-ink: #463321; --guide-gold: #b58b49; position: relative; }
.classic-guides .guide-header { display: flex; align-items: center; gap: 20px; padding-bottom: 26px; margin-bottom: 28px; border-bottom: 1px solid #ab834745; }
.classic-guides .guide-book-mark { display: grid; place-items: center; flex: 0 0 64px; height: 72px; color: #edcf8f; background: linear-gradient(135deg, #7c4248, #542832); border: 1px solid #ad854d; box-shadow: inset 0 0 0 4px #ddbf7a20, 0 5px 12px #67411e24; border-radius: 3px 3px 15px 3px; }
.classic-guides .guide-book-mark svg { width: 39px; height: 39px; }
.classic-guides .content .guide-eyebrow { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0 0 7px; color: #825b2b; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; line-height: 1.6; }
.classic-guides .guide-eyebrow span { color: #b58b49; font-size: 8px; }
.classic-guides .guide-header h1 { color: #463321; font-size: clamp(27px, 3vw, 36px); font-weight: 700; line-height: 1.4; margin: 0; text-wrap: balance; }
.classic-guides .content .guide-intro { color: #826c4e; font-size: 14px; line-height: 1.6; margin: 6px 0 0; }
.classic-guides .guide-shell { display: grid; grid-template-columns: 234px minmax(0, 1fr); gap: 26px; align-items: start; }
.classic-guides .guide-rail { position: sticky; top: 85px; max-height: calc(100dvh - 105px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b79b65 transparent; background: linear-gradient(135deg, #dfcd9b77, #e6d5ad66); border: 1px solid #b79b655e; border-radius: 4px; }
.classic-guides summary { cursor: pointer; list-style: none; }
.classic-guides summary::-webkit-details-marker { display: none; }
.classic-guides .guide-rail-head { display: flex; align-items: center; gap: 10px; padding: 17px 17px 15px; color: #523d26; font-size: 15px; font-weight: 700; border-bottom: 1px solid transparent; }
.classic-guides .guide-directory[open] > summary { border-bottom-color: #aa83464d; }
.classic-guides .guide-count { display: grid; place-items: center; min-width: 25px; min-height: 25px; padding: 2px 5px; margin-left: auto; border: 1px solid #af8c514d; background: #fff5d847; color: #8b6835; border-radius: 50%; font-size: 11px; }
.classic-guides .guide-chevron { display: inline-block; font-size: 19px; color: #8b6835; line-height: 1; transition: transform .18s; }
.classic-guides details[open] > summary > .guide-chevron { transform: rotate(180deg); }
.classic-guides .guide-rail-body { padding: 18px 10px 12px; }
.classic-guides .content .guide-rail-group { color: #826438; font-size: 11px; font-weight: 700; letter-spacing: .5px; margin: 0 9px 8px; display: flex; align-items: center; gap: 10px; }
.classic-guides .guide-rail-group::after { content: ''; flex: 1; height: 1px; background: #aa834636; }
.classic-guides .guide-rail-section + .guide-rail-section { margin-top: 22px; }
.classic-guides .guide-rail-list { display: grid; gap: 3px; list-style: none; margin: 0; padding: 0; }
.classic-guides .guide-rail-link { position: relative; display: block; border: 1px solid transparent; border-radius: 3px; padding: 10px 12px; color: #604d34; font-size: 13px; font-weight: 500; line-height: 1.55; text-decoration: none; overflow-wrap: anywhere; transition: background .15s; }
.classic-guides .guide-rail-link:hover { background: #fff6dc80; color: #773843; }
.classic-guides .guide-rail-link[aria-current='page'] { padding-left: 23px; color: #fff0cd; font-weight: 600; border-color: #a57a48; background: linear-gradient(110deg, #81444c, #612f39); box-shadow: 0 3px 7px #67411e26; }
.classic-guides .guide-rail-link[aria-current='page']::before { content: '◆'; position: absolute; left: 9px; top: 14px; color: #ddba76; font-size: 7px; }
.classic-guides .guide-tools { padding-top: 15px; border-top: 1px solid #aa834633; }
.classic-guides .guide-tools a { display: flex; justify-content: space-between; }
.classic-guides .guide-main { min-width: 0; display: grid; gap: 20px; }
.classic-guides .guide-toc { min-width: 0; border: 1px solid #bd995769; border-top: 2px solid #b18a48; border-radius: 4px; background: #fffae8a8; box-shadow: 0 4px 13px #7355220a; }
.classic-guides .guide-toc > summary { display: flex; align-items: center; gap: 12px; padding: 15px 19px; }
.classic-guides .guide-toc-label { color: #63472c; font-size: 13px; font-weight: 700; }
.classic-guides .guide-toc-count { margin-left: auto; color: #93764a; font-size: 11px; }
.classic-guides .guide-toc nav { padding: 0 14px 13px; }
.classic-guides .guide-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; padding: 0; margin: 0; list-style: none; }
.classic-guides .guide-toc a { display: flex; align-items: baseline; gap: 10px; padding: 8px 6px; border-radius: 3px; color: #69533a; font-size: 12px; line-height: 1.65; text-decoration: none; }
.classic-guides .guide-toc-number { flex: 0 0 23px; color: #aa8040; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.classic-guides .guide-toc a:hover, .classic-guides .guide-toc a[aria-current] { color: #773843; background: #7838420b; }
.classic-guides .guide-main .patch-doc { min-width: 0; padding: 27px 30px 34px; color: #53412e; background: linear-gradient(115deg, #fffbee, #fbf4e0); border: 1px solid #baa16e5e; border-radius: 4px; box-shadow: 0 6px 18px #755b2910; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; counter-reset: guide-section; }
.classic-guides .patch-doc p { margin: 0 0 16px; }
.classic-guides .patch-doc .g-lead { padding: 15px 17px; margin: 0 0 25px; border: 0; border-left: 3px solid #a88449; background: #ead8a845; color: #755733; font-size: 14px; font-weight: 500; line-height: 1.8; }
.classic-guides .patch-doc h2 { display: flex; align-items: baseline; gap: 12px; counter-increment: guide-section; padding: 0 0 13px; margin: 36px 0 20px; border-bottom: 1px solid #b8965745; color: #613b2f; font-size: 21px; font-weight: 700; line-height: 1.65; scroll-margin-top: 95px; }
.classic-guides .patch-doc h2:first-of-type { margin-top: 6px; }
.classic-guides .patch-doc h2::before { content: counter(guide-section, decimal-leading-zero); flex: 0 0 32px; color: #ad8647; font-size: 23px; font-weight: 600; }
.classic-guides .patch-doc h3 { color: #684633; line-height: 1.65; scroll-margin-top: 95px; }
.classic-guides .patch-doc .g-steps { gap: 27px; margin: 0; }
.classic-guides .patch-doc .g-step { column-gap: 11px; }
.classic-guides .patch-doc .g-step::before { background: linear-gradient(135deg, #f5e2ae, #dfbf7d); border: 1px solid #c19b55; color: #765329; box-shadow: inset 0 0 0 2px #fff5d65e; font-size: 12px; font-weight: 700; }
.classic-guides .patch-doc .g-step-text { margin: 0; color: #503b28; font-weight: 600; line-height: 1.8; }
.classic-guides .patch-doc .g-notes { margin-top: 10px; gap: 5px; }
.classic-guides .patch-doc .g-notes li { font-size: 14px; line-height: 1.8; font-weight: 400; color: #66523b; }
.classic-guides .patch-doc .g-notes li::before { background: #b89353; }
.classic-guides .patch-doc .g-note { padding: 15px 17px; border-radius: 3px; border-color: #ccb07788; background: #f3e7c9; }
.classic-guides .patch-doc .g-note-title { color: #836029; font-size: 12px; margin: 0 0 5px; }
.classic-guides .patch-doc .g-note p:last-child { margin: 0; font-weight: 400; font-size: 14px; }
.classic-guides .patch-doc .g-warning, .classic-guides .patch-doc .g-note--warning { border-left-color: #773843; background: #f2e1d6; }
.classic-guides .patch-doc .g-figure { margin: 15px 0 0; padding: 6px; border: 1px solid #b8975959; border-radius: 3px; background: #eaddbd60; text-align: center; }
.classic-guides .patch-doc .g-figure img { border: 0; border-radius: 2px; max-width: 100%; height: auto; margin: 0 auto; }
.classic-guides button.guide-image-button { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; color: #876a3c; background: none; border: 0; border-radius: 0; box-shadow: none; text-shadow: none; cursor: zoom-in; transform: none; }
.classic-guides .guide-image-hint { display: block; padding: 7px 0 2px; color: #876a3c; font-size: 11px; line-height: 1.5; font-weight: 400; letter-spacing: .2px; }
.classic-guides .patch-doc .g-figure figcaption { margin: 8px 0 2px; font-size: 12px; font-weight: 400; }
.classic-guides .patch-doc .g-card { border-radius: 3px; background: #f8efda; font-size: 13px; }
.classic-guides .patch-doc .g-card-name { font-weight: 600; }
.classic-guides .patch-doc .g-cards-iconed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.classic-guides .guide-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.classic-guides .guide-pagination a { display: flex; flex-direction: column; gap: 6px; padding: 17px 20px; border: 1px solid #ba975c66; border-radius: 3px; background: #fff7df73; color: #664c30; font-size: 14px; line-height: 1.6; }
.classic-guides .guide-pagination a:hover { border-color: #986c45; }
.classic-guides .guide-page-direction { color: #957447; font-size: 11px; }
.classic-guides .guide-pagination .guide-next { grid-column: 2; background: linear-gradient(120deg, #7e424a, #622f39); border-color: #aa8550; color: #fff0cb; text-align: right; }
.classic-guides .guide-next .guide-page-direction { color: #e1c392; }
.classic-guides .guide-empty { padding: 35px; color: #826c4e; text-align: center; }
.classic-guides a:focus-visible, .classic-guides summary:focus-visible, .classic-guides button:focus-visible { outline: 2px solid #8b4350; outline-offset: 3px; }
.classic-guides .patch-doc h2:focus { outline: none; }
.classic-guides [data-patch-scope]:not([data-lang='en']) .en, .classic-guides [data-patch-scope][data-lang='en'] .th { display: none; }
.guide-lightbox-open { overflow: hidden; }
.classic-guides dialog.guide-lightbox { position: fixed; inset: 0; box-sizing: border-box; width: min(1120px, 94vw); max-width: 94vw; max-height: 92dvh; margin: auto; padding: 44px 18px 18px; border: 1px solid #b99a59; border-radius: 5px; background: #211a17; color: #efddbd; box-shadow: 0 20px 70px #0009; }
.classic-guides .guide-lightbox::backdrop { background: #100e0bd9; }
.classic-guides .guide-lightbox figure { margin: 0; text-align: center; }
.classic-guides .guide-lightbox img { display: block; max-width: 100%; max-height: 70dvh; width: auto; height: auto; margin: auto; object-fit: contain; }
.classic-guides .guide-lightbox figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; }
.classic-guides button.guide-lightbox-close { position: absolute; top: 4px; right: 7px; display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 0; background: none; color: #efddbd; font-size: 28px; box-shadow: none; cursor: pointer; }
@media (max-width: 1100px) {
    .classic-guides .content { padding: 32px 28px 40px; }
    .classic-guides .guide-shell { grid-template-columns: 215px minmax(0, 1fr); gap: 20px; }
    .classic-guides .guide-main .patch-doc { padding: 24px; }
    .classic-guides .guide-toc ol { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .classic-guides .guide-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .classic-guides .guide-rail { position: static; max-height: none; }
    .classic-guides .guide-directory[open] .guide-rail-body { max-height: 55dvh; overflow-y: auto; }
    .classic-guides .guide-rail-head { padding: 12px 17px; }
    .classic-guides .guide-rail-link { min-height: 44px; }
    .classic-guides .guide-toc a { padding: 10px 6px; }
}
@media (max-width: 560px) {
    .classic-guides .header-container--compact { height: 76px; }
    .classic-guides .breadcrumbs { padding: 14px 18px; }
    .classic-guides .breadcrumbs .back { display: none; }
    .classic-guides .content { padding: 28px 16px 32px; }
    .classic-guides .guide-header { align-items: flex-start; gap: 13px; padding-bottom: 21px; margin-bottom: 20px; }
    .classic-guides .guide-book-mark { flex-basis: 43px; height: 53px; }
    .classic-guides .guide-book-mark svg { width: 29px; height: 29px; }
    .classic-guides .content .guide-eyebrow { font-size: 8px; letter-spacing: 1px; gap: 5px; }
    .classic-guides .guide-header h1 { font-size: 27px; }
    .classic-guides .content .guide-intro { font-size: 12px; }
    .classic-guides .guide-main .patch-doc { padding: 20px 15px 26px; font-size: 14px; }
    .classic-guides .patch-doc .g-lead { padding: 12px; font-size: 13px; }
    .classic-guides .patch-doc h2 { font-size: 18px; gap: 8px; }
    .classic-guides .patch-doc h2::before { flex-basis: 27px; font-size: 21px; }
    .classic-guides .patch-doc .g-step { column-gap: 8px; }
    .classic-guides .patch-doc .g-step .g-figure, .classic-guides .patch-doc .g-step .g-table, .classic-guides .patch-doc .g-step .g-note { grid-column: 1 / -1; }
    .classic-guides .guide-pagination { grid-template-columns: 1fr; }
    .classic-guides .guide-pagination .guide-next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .classic-guides * { scroll-behavior: auto !important; transition: none !important; } }