/* Shared usability improvements for the two local presentation samples. */
:root{--text-soft:#555d64;--bronze:#795c3b;--line-soft:#ddd6cb;--prototype-accent:#795c3b}
html{scroll-behavior:auto}
body{min-width:0}
.hero__sub{color:var(--text-soft)}
.hero__eyebrow,.section__eyebrow{color:var(--bronze)}
.roadmap-band__sub,.roadmap-steps__item span,.roadmap-steps__item:hover span{color:#e5dfd4}
.roadmap-steps__dot{color:#fff5df;background:#514332;border-color:#c5ac80}
.roadmap-steps__item--done .roadmap-steps__dot{background:#dfc795;color:#382b20;border-color:#dfc795}
.roadmap-steps__item:hover .roadmap-steps__dot{color:#fff;background:#685338;box-shadow:none;transform:none}
.xpac-title-block .xpac-badge{color:#3c434b}
.xpac-icon[style*="#b86b10"]{background:#94530b!important}
.hero-search__field{border-color:#9d8a70}
.detail-layout__body .guide-table th{position:relative}
.detail-layout__body h3{font-family:var(--ff-body)}
.detail-layout__body :is(h2,h3){scroll-margin-top:92px}
.detail-layout__body>p,.body-section>p{max-width:720px}
.detail-layout__body>p,.body-section>p,.body-section>ul,.body-section>ol{font-size:17px;line-height:1.85}
.nav-logo__text{word-break:keep-all}
.guide-table-wrap{position:relative}
.table-scroll-hint{display:none;font-size:12px;color:var(--text-soft);margin:-12px 0 20px;text-align:right}
.table-scroll-hint[data-overflow="true"]{display:block}
.page-toc{position:sticky;top:8px;z-index:30;margin:0 0 32px;background:var(--bg-surface);border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 3px 12px #252b3008}
.page-toc summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 18px;color:var(--text-strong);font-size:14px;font-weight:700;list-style:none}
.page-toc summary::-webkit-details-marker{display:none}
.page-toc summary::after{content:'＋';font-size:20px;font-weight:400;color:var(--prototype-accent)}
.page-toc[open] summary::after{content:'−'}
.page-toc nav{max-height:min(60dvh,480px);overflow:auto;border-top:1px solid var(--line-soft);padding:12px 18px 18px}
.detail-layout__body .page-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;margin:0;padding:0;list-style:none}
.detail-layout__body .page-toc li{list-style:none;font-size:14px;line-height:1.5;margin:0;padding:0;min-width:0}
.detail-layout__body .page-toc li:not(.toc-sub){grid-column:1/-1}
.page-toc a{display:block;padding:9px 10px;color:var(--text-body);text-decoration:none;border-left:2px solid transparent;overflow-wrap:anywhere}
.page-toc a:hover{background:var(--bg-alt)}
.page-toc a[aria-current="location"]{color:var(--prototype-accent);border-left-color:var(--prototype-accent);background:var(--bg-alt);font-weight:700}
.page-toc .toc-sub a{font-size:13px;padding-left:22px}
.image-expand{display:block;border:0;background:transparent;padding:0;width:100%;cursor:zoom-in;text-align:left;border-radius:8px}
.image-expand img{display:block;width:100%;height:auto}
.image-expand__label{display:block;margin:8px 0;color:var(--prototype-accent);font-size:13px;font-family:var(--ff-body);font-weight:700;text-align:right}
.image-viewer{width:calc(100vw - 32px);max-width:1440px;height:calc(100dvh - 32px);max-height:none;padding:0;margin:auto;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg-surface);color:var(--text-strong)}
.image-viewer:not([open]){display:none}
.image-viewer[open]{display:flex;flex-direction:column}
.image-viewer::backdrop{background:#15191ddb}
.image-viewer__toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.image-viewer__toolbar button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--bg-surface);color:var(--text-strong);font:500 14px var(--ff-body);cursor:pointer}
.image-viewer__toolbar button:disabled{opacity:.45;cursor:default}
.image-viewer__toolbar output{font-size:12px;min-width:36px;text-align:center}
.image-viewer__close{margin-left:auto}
.image-viewer__stage{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#e9e4da}
.image-viewer__stage img{display:block;max-width:none;max-height:none;margin:16px auto;height:auto}
.image-viewer__caption{font-size:13px;line-height:1.6;padding:10px 16px;border-top:1px solid var(--line-soft);margin:0}
@media(max-width:960px){
 .nav-logo{flex:0 1 154px;min-width:0;gap:7px}
 .nav-logo__text{max-width:112px;font-size:13px;line-height:1.45;word-break:keep-all}
 .nav-actions{gap:5px}.nav-search-btn{width:40px;height:40px}
 .hero__sub{margin-bottom:28px}.hero__eyebrow{margin-bottom:16px}
 .detail-layout__body :is(p,li){font-size:16px;line-height:1.8}
 .detail-layout__body .page-toc ol{grid-template-columns:1fr}
 .page-toc{top:6px;margin-bottom:28px}.page-toc nav{padding:6px 12px 12px}
 .page-toc a{padding:10px}.page-toc .toc-sub a{padding-left:20px}
 .detail-layout__body .guide-table{table-layout:fixed;width:var(--table-mobile-width,560px);min-width:var(--table-mobile-width,560px);max-width:none}
 .guide-table tr>:first-child{width:var(--table-first-width,116px)}
 .guide-table tbody :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--bg-surface);box-shadow:1px 0 0 var(--line-soft)}
 .guide-table thead th:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line-soft)}
 .guide-table tbody tr:nth-child(even)>:first-child{background:#f8f5ef}
 .image-viewer{width:calc(100vw - 12px);height:calc(100dvh - 12px)}
 .image-viewer__toolbar{gap:4px;padding:8px}.image-viewer__toolbar button{padding:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
