/* V20: shared inner-page chrome; library index and Reset remain untouched. */
.inner-page{--inner-width:920px;background:var(--xq-paper);color:var(--xq-ink);font-family:var(--xq-font)}
.inner-page>.xq-header{padding-bottom:20px}
.inner-page .inner-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:12px;width:min(1000px,calc(100% - 48px));margin:16px auto 0;color:var(--xq-muted);font-size:13px;line-height:1.6}
.inner-breadcrumb a{display:inline-flex;align-items:center;min-height:36px;color:var(--xq-muted);text-decoration:none}
.inner-breadcrumb a:hover{color:var(--xq-deep);text-decoration:underline}
.inner-guide>.xq-header,.inner-guide>.inner-breadcrumb{width:min(888px,calc(100% - 48px))}
.inner-article .reading-layout{padding-top:20px}
.inner-page .xq-related-rail{width:min(888px,calc(100% - 48px));margin:0 auto 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.inner-page .xq-promo-card{display:flex;align-items:center;gap:10px;padding:16px 14px;border:1px solid var(--xq-line);border-radius:14px;background:var(--xq-surface);color:var(--xq-ink);box-shadow:0 5px 18px rgb(70 50 24 / 6%);text-decoration:none;min-width:0}
.xq-promo-card>img{width:36px;height:36px;flex:none;object-fit:contain;border-radius:50%}
.xq-promo-card>span{min-width:0}
.xq-promo-card strong{display:block;margin-bottom:4px;font-size:14px;line-height:1.6;font-weight:600}
.xq-promo-card small{display:block;color:var(--xq-muted);font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.xq-promo-card .xq-promo-external{font-size:11px;font-weight:400;color:var(--xq-muted)}
.inner-page .xq-promo-card:hover{border-color:#b7a78f;color:var(--xq-ink)}
.inner-page .xq-promo-card:focus-visible{outline:2px solid var(--xq-deep);outline-offset:4px}
/* Original tutorial body geometry and screenshots are intentionally unchanged. */
.inner-guide .hero>.badge{display:none}
.inner-page .visitor-widget{background:var(--xq-surface);border:1px solid var(--xq-line);border-radius:14px;box-shadow:0 5px 18px rgb(70 50 24 / 6%);backdrop-filter:none}
.inner-page .visitor-title,.inner-page .visitor-metric span{color:var(--xq-muted)}
.inner-page .visitor-metric strong{color:var(--xq-deep)}
.inner-page .visitor-line{background:var(--xq-line)}
@media(min-width:1380px) and (min-height:680px){
 .inner-page .xq-related-rail{--rail-width:min(224px,calc((100vw - var(--inner-width))/2 - 88px));position:fixed;left:calc((100vw - var(--inner-width))/2 - 24px - var(--rail-width));bottom:max(20px,env(safe-area-inset-bottom));width:var(--rail-width);margin:0;grid-template-columns:1fr;z-index:18}
 .inner-page .visitor-widget{right:max(24px,calc((100vw - var(--inner-width))/2 - 210px));width:186px;min-width:0;font-size:12px}
}
@media(max-width:1379px),(max-height:679px){.inner-page .visitor-widget{position:static;width:min(320px,calc(100% - 48px));min-width:0;margin:0 auto 28px}}
@media(max-width:760px){.inner-page>.xq-header,.inner-page .inner-breadcrumb{width:calc(100% - 36px)}.inner-page .xq-related-rail{width:calc(100% - 36px);grid-template-columns:1fr;max-width:440px}.inner-page .xq-brand span{font-size:20px}.inner-page .visitor-widget{display:none}}
/* Tool-specific skin: same form structure, IDs, CSP and cryptographic scripts. */
.inner-tool{--ink:var(--xq-ink);--muted:var(--xq-muted);--mint:var(--xq-orange);--mint-dark:var(--xq-deep);--mint-soft:#ffebc8;--paper:var(--xq-surface);--line:var(--xq-line);--shadow:none;line-height:1.7;overflow-x:visible}
.inner-tool .background-orb,.inner-tool .eyebrow,.inner-tool .section-kicker{display:none}
.inner-tool>.xq-header,.inner-tool>.inner-breadcrumb{width:min(920px,calc(100% - 48px))}
.inner-tool .page-shell{width:min(920px,calc(100% - 48px));padding:28px 0 32px}
.inner-tool .hero{gap:20px;margin-bottom:28px}
.inner-tool h1{font-size:36px;line-height:1.3;letter-spacing:0}
.inner-tool h2{font-size:21px;line-height:1.5;letter-spacing:0}
.inner-tool .privacy-badge{border:0;padding:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;color:var(--xq-muted)}
.inner-tool .privacy-badge span{background:#63b56c;box-shadow:none}
.inner-tool .panel{border:1px solid var(--xq-line);border-radius:6px;background:var(--xq-surface);box-shadow:none;backdrop-filter:none}
.inner-tool .generator-panel,.inner-tool .code-panel{padding:24px;min-height:480px;min-width:0}
.inner-tool .section-heading{gap:12px}
.inner-tool input[type="text"],.inner-tool input[type="password"]{background:var(--xq-paper);border-color:var(--xq-line);border-radius:4px;color:var(--xq-ink)}
.inner-tool input::placeholder{color:var(--xq-muted)}
.inner-tool input:focus{outline:2px solid var(--xq-ink);outline-offset:2px;box-shadow:none;border-color:var(--xq-ink)}
.inner-tool .icon-button{color:var(--xq-muted);border-radius:4px}
.inner-tool .checkmark{border-color:var(--xq-muted);border-radius:4px;background:var(--xq-paper)}
.inner-tool .save-option input:checked+.checkmark{background:var(--xq-orange);border-color:var(--xq-orange)}
.inner-tool .save-option input:checked+.checkmark::after{border-color:var(--xq-ink)}
.inner-tool .save-option input:focus-visible+.checkmark{outline:2px solid var(--xq-ink);outline-offset:3px}
.inner-tool .primary-button{background:var(--xq-orange);color:var(--xq-ink);box-shadow:none;border-radius:4px;transform:none}
.inner-tool .primary-button:hover{background:#ed7c00;box-shadow:none;transform:none}
.inner-tool .placeholder-icon{background:var(--xq-paper);color:var(--xq-muted);border-radius:6px}
.inner-tool .timer-block{background:transparent;border:0;border-top:1px solid var(--xq-line);border-radius:0;padding:20px 0 0}
.inner-tool .live-dot i{background:#63b56c;box-shadow:none;animation:none}
.inner-tool .progress-track{background:var(--xq-line)}
.inner-tool .progress-bar{background:var(--xq-orange)}
.inner-tool .progress-bar.warning{background:var(--xq-deep)}
.inner-tool .result-meta span{border-color:var(--xq-line);background:transparent;color:var(--xq-muted);border-radius:4px}
.inner-tool .code-button span{font-size:60px;letter-spacing:.08em}
.inner-tool .code-button small{border-radius:4px}
.inner-tool .history-panel{background:transparent;border:0;border-top:1px solid var(--xq-line);border-radius:0;padding:26px 0}
.inner-tool .history-item{background:var(--xq-surface);border-radius:4px;transform:none}
.inner-tool .history-item:hover{border-color:var(--xq-muted);transform:none}
.inner-tool .use-button{border-color:var(--xq-line);border-radius:4px;min-height:44px}
.inner-tool .delete-button{border-radius:4px;min-height:44px}
.inner-tool .text-button,.inner-tool .danger-text-button{min-height:44px}
.inner-tool .toast{background:var(--xq-ink);box-shadow:none;border-radius:4px}
.inner-tool footer{color:var(--xq-muted)}
.inner-tool .xq-follow-dialog h2{font-size:25px}
@media(max-width:820px){.inner-tool .generator-panel,.inner-tool .code-panel{min-height:auto}.inner-tool .code-panel{min-height:300px}}
@media(max-width:760px){.inner-tool>.xq-header,.inner-tool>.inner-breadcrumb,.inner-tool .page-shell{width:calc(100% - 36px)}.inner-tool h1{font-size:28px}.inner-tool h2{font-size:20px}.inner-tool .generator-panel,.inner-tool .code-panel{padding:20px}.inner-tool .code-button span{font-size:48px}.inner-tool .hero-copy{font-size:14px}.inner-tool .xq-brand-row{flex-wrap:wrap}}
@media print{.inner-page .inner-breadcrumb,.inner-page .xq-related-rail,.inner-page .visitor-widget{display:none!important}}
/* Explicit link ink also covers the standalone tool's browser visited-link default. */
.inner-page .xq-utilities a{color:var(--xq-ink)}
.inner-page .xq-utilities a:hover{color:var(--xq-deep)}

/* V21: stronger table hierarchy; scoped to HTML tables, never SVG chart palettes. */
.inner-page .original-prose{color:var(--xq-ink)}
.inner-page .original-prose table{border-collapse:collapse;color:var(--xq-ink);background:var(--xq-surface)}
.inner-page .original-prose th,.inner-page .original-prose td{border:1px solid var(--xq-table-line);color:var(--xq-ink);line-height:1.75}
.inner-page .original-prose th{background:#eee2ca;font-weight:700}
.inner-page .original-prose td{background:var(--xq-surface)}
.inner-page .original-prose tbody tr:nth-child(even)>td{background:#f5ecd9}
.inner-page .original-prose caption{color:var(--xq-muted)}
.inner-page .original-prose table a{color:var(--xq-deep);text-decoration:underline}
.inner-page .inner-breadcrumb a{color:var(--xq-muted)}
.inner-guide{--line:#b9ad98;--blue-line:#b9ad98}
.inner-guide .small,.inner-guide .caption,.inner-guide .hero p{color:var(--xq-muted)}
.inner-guide .totp-input,.inner-guide .related-links a{border-color:var(--xq-control-line)}
.inner-guide .totp-input::placeholder{color:var(--xq-muted);opacity:1}
.inner-tool input[type="text"],.inner-tool input[type="password"]{border-color:var(--xq-control-line)}
.inner-tool input::placeholder{color:var(--xq-muted);opacity:1}
.inner-tool .panel{border-color:var(--xq-line)}
.inner-tool .result-meta span{border-color:var(--xq-control-line)}
.inner-page .xq-promo-card{border-color:var(--xq-line)}

/* Maintenance r3: persistent field labels and overflow-only table hints. */
.inner-guide .xq-field-label{display:block;margin-bottom:8px;color:var(--xq-ink);font-size:14px;font-weight:600;line-height:1.6}
.inner-article .xq-scroll-hint{margin:6px 0 16px;color:var(--xq-muted);font-size:13px;line-height:1.6;font-family:var(--xq-font)}
.inner-article table:focus-visible{outline:var(--xq-focus);outline-offset:3px}
@media print{.inner-article .xq-scroll-hint{display:none!important}}

/* Three-or-more-column tables scroll instead of crushing words into narrow columns. */
@media(max-width:760px){
 .inner-article .original-prose .xq-wide-table :is(th,td){min-width:8rem}
 .inner-article .original-prose .xq-wide-table :is(th,td):last-child{min-width:12rem}
}
