/* Overview first, detailed guides one link away. Shared blocks stay independently scoped. */
.hx-hub{--hx-ink:#162d39;--hx-muted:#4c626d;--hx-line:#d8e3e8;--hx-link:#14657d;color:var(--hx-ink)}
.hx-hub .phe-crumbs{margin:0 0 1rem;font-size:.875rem}
.hx-reference-heading{padding:0 0 .5rem}
.hx-reference-heading h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;letter-spacing:-.03em;margin:.4rem 0 .85rem}
.hx-reference-heading p{max-width:65ch;font-size:1.125rem;line-height:1.6;margin:0}
.hx-reference-toc{display:flex;flex-wrap:wrap;gap:.65rem 1.25rem;border-block:1px solid var(--hx-line);padding:1rem 0;margin:1rem 0 1.75rem}
.hx-reference-toc a{font-size:.95rem;line-height:1.5;color:var(--hx-link);text-decoration:underline;text-underline-offset:.2em}
.hx-overview-group{scroll-margin-top:6rem;margin:0 0 2.5rem}
.hx-axis{font-size:.875rem!important;font-weight:650;color:var(--hx-muted);margin:0 0 .4rem!important;letter-spacing:.02em}
.hx-reference-section{display:grid;grid-template-columns:minmax(180px,22%) minmax(0,1fr);gap:1rem 2rem;align-items:start;padding:1.35rem 0;border-bottom:1px solid var(--hx-line);scroll-margin-top:6rem;min-width:0}
.hx-reference-section h2{font-size:1.4rem;line-height:1.3;letter-spacing:-.015em;margin:0;color:var(--hx-ink)}
.hx-section-copy{min-width:0;max-width:75ch}
.hx-section-copy>p{font-size:1rem;line-height:1.65;margin:0}
.hx-hub .hx-subtopic{margin:1.25rem 0 0;padding:0;border:0;scroll-margin-top:6rem}
.hx-subtopic h3{font-size:1.1rem;line-height:1.4;margin:0 0 .5rem;color:var(--hx-ink)}
.hx-subtopic p{font-size:1rem;line-height:1.65;margin:0 0 .65rem}
.hx-section-links{display:flex;flex-wrap:wrap;gap:.65rem 1.3rem;list-style:none;margin:.8rem 0 0;padding:0}
.hx-hub .hx-section-links li{font-size:1rem;line-height:1.55;margin:0;padding:0}
.hx-section-links a,.hx-manufacturer-grid a,.hx-contact a,.hx-sources a{color:var(--hx-link);text-decoration:underline;text-underline-offset:.2em}
.hx-has-image{grid-template-columns:minmax(180px,22%) minmax(0,1fr) minmax(200px,28%)}
.hx-reference-section figure{margin:0;min-width:0;align-self:center}
.hx-reference-section img{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;background:#f3f6f7;border-radius:4px}
.hx-reference-section figcaption{font-size:.8rem;line-height:1.5;color:var(--hx-muted);margin-top:.4rem}
.hx-reference-example{margin:0 0 2.5rem;padding:1rem 1.25rem;background:#edf4f6;border-left:3px solid #398899;max-width:85ch}
.hx-reference-example strong{font-size:1rem}.hx-reference-example p{font-size:1rem;line-height:1.6;margin:.4rem 0 0}
.hx-hub .phe-section{padding:1.5rem 0;border-top:1px solid var(--hx-line);margin:0}
.hx-hub .phe-section>h2{font-size:1.4rem;margin:0 0 1rem}
.hx-manufacturer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.hx-manufacturer-grid h3{font-size:1.05rem;margin:0 0 .5rem}.hx-manufacturer-grid p{font-size:1rem;line-height:1.6;margin:0}
.hx-sources{font-size:.875rem;color:var(--hx-muted);margin:0 0 1.5rem}.hx-sources summary{cursor:pointer;padding:.5rem 0}.hx-sources li{margin:.4rem 0;overflow-wrap:anywhere}
.hx-contact{display:flex;flex-wrap:wrap;gap:1rem 2rem;padding:1rem 0;font-size:1rem}
.hx-hub a:focus-visible,.hx-sources summary:focus-visible{outline:3px solid #b56725;outline-offset:3px}
.hx-reference-context{margin:1rem 0;color:#4c626d}.hx-reference-context p{font-size:1rem;line-height:1.6}.hx-reference-context a{color:#14657d;text-underline-offset:.2em}
.hx-direction-section{display:block;scroll-margin-top:6rem}.hx-direction-section>div{max-width:80ch}.hx-direction-section p,.hx-direction-section li{font-size:1rem;line-height:1.7}.hx-direction-section a{color:var(--cu-accent,#125476);text-decoration:underline;text-underline-offset:.18em}.hx-direction-section li+li{margin-top:.65rem}
@media(max-width:950px){.hx-has-image{grid-template-columns:minmax(150px,.7fr) minmax(0,2fr)}.hx-has-image figure{grid-column:2;max-width:340px}}
@media(max-width:600px){.hx-reference-heading h1{font-size:2rem}.hx-reference-heading p{font-size:1.0625rem}.hx-reference-toc{gap:.5rem 1rem;margin:1rem 0 1.5rem}.hx-reference-section,.hx-has-image{grid-template-columns:1fr;gap:.65rem;padding:1.1rem 0}.hx-reference-section h2{font-size:1.3rem}.hx-has-image figure{grid-column:auto;max-width:100%;width:100%}.hx-reference-section img{max-height:185px}.hx-overview-group{margin-bottom:2rem}.hx-manufacturer-grid{grid-template-columns:1fr}.hx-reference-example{padding:1rem;margin-bottom:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A complete topic index remains native, keyboard accessible and usable without JS. */
.hx-reference-toc{scroll-margin-top:6rem;margin-bottom:.75rem}
.hx-topic-index,.hx-principle{border-bottom:1px solid var(--hx-line);margin:0 0 1rem;padding:0 0 .75rem}
.hx-topic-index summary,.hx-principle summary{padding:.55rem 0;cursor:pointer;color:var(--hx-link);font-size:1rem;line-height:1.5}
.hx-topic-index summary:focus-visible,.hx-principle summary:focus-visible{outline:3px solid #b56725;outline-offset:3px}
.hx-index-columns{columns:3 220px;column-gap:2rem;padding:.65rem 0}
.hx-index-columns>div{break-inside:avoid;margin-bottom:1.5rem}
.hx-index-columns p{font-size:.875rem;font-weight:650;color:var(--hx-muted);margin:0 0 .35rem}
.hx-index-columns ul{list-style:none;margin:0;padding:0}
.hx-hub .hx-index-columns li{margin:0;font-size:.95rem;line-height:1.4}
.hx-index-columns a{display:inline-block;padding:.35rem 0;color:var(--hx-link);text-underline-offset:.2em}
.hx-principle p{max-width:80ch;font-size:1rem;line-height:1.65;margin:.6rem 0 .3rem}
.hx-group-label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:2px solid #9eb7c3}
.hx-group-label a{font-size:.8rem;color:var(--hx-link);white-space:nowrap;text-underline-offset:.2em}
.hx-hub .hx-section-links a{display:inline-block;padding:.2rem 0}
@media(max-width:600px){.hx-index-columns{columns:1}.hx-index-columns a{padding:.55rem 0}.hx-group-label{gap:.5rem}.hx-axis{max-width:70%}.hx-reference-toc a{padding:.25rem 0}.hx-group-label a{padding:.45rem 0}.hx-reference-section{padding:1.2rem 0}.hx-hub .hx-section-links a{padding:.4rem 0}}
.hx-hub [hidden]{display:none!important}
.hx-topic-search{max-width:42rem;padding:.75rem 0 .5rem}
.hx-topic-search label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.5rem}
.hx-search-controls{display:flex;gap:.6rem}
.hx-search-controls input{min-width:0;flex:1;border:1px solid #8ba4b1;border-radius:4px;padding:.65rem .8rem;font:inherit;color:var(--hx-ink);background:#fff}
.hx-search-controls button{border:1px solid #8ba4b1;border-radius:4px;padding:.6rem .8rem;color:var(--hx-link);background:#fff;font:inherit;cursor:pointer}
.hx-search-controls button:disabled{opacity:.45;cursor:default}
.hx-search-controls input:focus-visible,.hx-search-controls button:focus-visible,.hx-detail summary:focus-visible{outline:3px solid #b56725;outline-offset:3px}
.hx-search-status{font-size:.875rem!important;color:var(--hx-muted);margin:.5rem 0!important;line-height:1.5}
.hx-compare-jump{font-weight:650}
.hx-detail{border-top:1px solid var(--hx-line);margin-top:1rem;padding:.45rem 0}
.hx-detail summary{cursor:pointer;color:var(--hx-link);padding:.45rem 0;font-size:1rem;line-height:1.5}
.hx-detail dl{margin:.5rem 0 0}.hx-detail dl>div{margin:0 0 1rem}
.hx-detail dt{font-size:1rem;font-weight:650;margin-bottom:.2rem}.hx-detail dd{margin:0;font-size:1rem;line-height:1.65}
.hx-comparison{margin:1.5rem 0;scroll-margin-top:6rem}
.hx-comparison h3{font-size:1.2rem;line-height:1.4;margin:0 0 .6rem}.hx-comparison>p{font-size:1rem;line-height:1.6;margin:0 0 1rem}
.hx-comparison table{width:100%;border-collapse:collapse;font-size:.925rem;line-height:1.55}
.hx-comparison th,.hx-comparison td{text-align:left;vertical-align:top;padding:.75rem;border:1px solid var(--hx-line)}
.hx-comparison thead th{background:#edf4f6}.hx-comparison tbody th{width:25%;font-weight:600}
.hx-comparison a{color:var(--hx-link);text-underline-offset:.2em}
.hx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.hx-comparison thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.hx-comparison table,.hx-comparison tbody,.hx-comparison tr,.hx-comparison th,.hx-comparison td{display:block;width:100%;box-sizing:border-box}.hx-comparison tr{border-bottom:1px solid var(--hx-line);padding:.5rem 0}.hx-comparison tbody th{width:100%;font-size:1rem;border:0;background:#edf4f6}.hx-comparison td{border:0;padding:.55rem .75rem}.hx-comparison td:before{content:attr(data-label);display:block;color:var(--hx-muted);font-size:.8rem;font-weight:600;margin-bottom:.2rem}.hx-search-controls{flex-wrap:wrap}.hx-search-controls input{flex-basis:240px}}
/* One registry supplies the same semantic outlined symbol in contents and body. */
.hx-hub .hx-group-name{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
.hx-hub .hx-group-icon{flex:none;width:24px;font-size:24px;line-height:1;font-weight:200;font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24}
/* Selected text-led topics may carry a labelled symbol from the same family. */
.hx-hub .hx-topic-heading{display:flex;align-items:flex-start;gap:.5rem}
.hx-hub .hx-topic-heading>.hx-topic-icon{flex:none;width:24px;font-size:24px;line-height:1;font-weight:200;margin-top:.08em;font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24}
.hx-hub .hx-topic-heading>span:last-child{min-width:0}
.hx-hub .hx-reference-toc a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
.hx-hub .hx-group-label{align-items:center}
.hx-hub .hx-group-label .hx-axis{margin:0!important}
/* Closed product exteriors remain complete and readable beside their explanation. */
/* Owner 2026-10-01: pure white image fields with only local natural shadows. */
.hx-hub .hx-reference-section>figure,.hx-hub .hx-reference-section>figure>img{background:#fff}
.hx-hub :is(.hx-construction-section,.hx-context-section){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:.65rem 2rem;padding-block:1.75rem}
.hx-hub :is(.hx-construction-section,.hx-context-section)>h2{grid-column:1;grid-row:1}
.hx-hub :is(.hx-construction-section,.hx-context-section)>.hx-section-copy{grid-column:1;grid-row:2}
.hx-hub :is(.hx-construction-section,.hx-context-section)>figure{grid-column:2;grid-row:1 / span 2;align-self:start;max-width:none;width:100%}
.hx-hub :is(.hx-construction-section,.hx-context-section) img{width:100%;height:auto;max-height:none;object-fit:contain}
.hx-hub :is(.hx-construction-section,.hx-context-section) figcaption{font-size:1rem;line-height:1.5;margin-top:.65rem}
@media(max-width:760px){.hx-hub :is(.hx-construction-section,.hx-context-section){grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:.75rem}.hx-hub :is(.hx-construction-section,.hx-context-section)>h2,.hx-hub :is(.hx-construction-section,.hx-context-section)>.hx-section-copy,.hx-hub :is(.hx-construction-section,.hx-context-section)>figure{grid-column:1;grid-row:auto}.hx-hub :is(.hx-construction-section,.hx-context-section)>figure{max-width:520px}}
/* The mobile reading order is introduction, matching image, then detail.
   Desktop keeps both text blocks together on the left of the same figure. */
@media(min-width:761px){.hx-hub .hx-split-detail{grid-template-rows:auto auto 1fr}.hx-hub .hx-split-detail>.hx-section-details{grid-row:3}.hx-hub .hx-split-detail>figure{grid-row:1 / span 3}.hx-hub .hx-section-details>.hx-subtopic:first-child{margin-top:.6rem}}
@media(max-width:760px){.hx-hub .hx-section-details>.hx-subtopic:first-child{margin-top:0}}
/* Additional context examples stay contained; the original twelve figures keep their sizing. */
.hx-hub .hx-compact-image>figure>img{max-height:320px;object-fit:contain;background:#fff}
.hx-hub .hx-image-actions{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.35rem}
.hx-hub .hx-image-actions a{color:var(--hx-link);text-decoration:underline;text-underline-offset:.2em;padding:.35rem 0}
/* Supporting examples have one canonical figure and a clear adjacent explanation. */
.hx-hub .hx-visual-support{margin:1rem 0 0;padding:.75rem 0;border-top:1px solid var(--hx-line);max-width:75ch}
.hx-hub .hx-visual-support>p{font-size:.95rem;line-height:1.6;margin:0}
.hx-hub .hx-visual-support .hx-section-links{margin-top:.4rem}

/* The complete topic index repeats the same labelled group symbols. */
.hx-hub .hx-action-icon{flex:none;width:24px;font-size:24px;line-height:1;font-weight:200;vertical-align:middle;font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24}
.hx-hub .hx-compare-jump{gap:.5rem}
.hx-hub .hx-topic-index summary>.hx-action-icon{margin-inline:.15rem .5rem}
.hx-hub .hx-index-columns .hx-group-name{line-height:1.45}
/* On narrow screens the fixed action cluster used to shrink the128px logo to20px.
   Keep all shell actions visible on a second row only on these overview pages. */
@media(max-width:440px){
 body:has(.hx-hub){--header-height:112px}
 body:has(.hx-hub) .site-header .nav{flex-wrap:wrap;gap:4px 12px;padding:6px 16px}
 body:has(.hx-hub) .site-header .burger{flex:none;width:44px;min-height:44px;margin:0}
 body:has(.hx-hub) .site-header .brand{flex:none;max-width:none}
 body:has(.hx-hub) .site-header .grow{display:none}
 body:has(.hx-hub) .site-header .header-icons{flex-basis:100%;min-width:0;justify-content:flex-end;min-height:44px}
 body:has(.hx-hub) .site-header .header-icons :is(.icon-btn,.personal-entry){width:44px;min-width:44px;min-height:44px}
 .hx-hub :is(.hx-reference-toc,.hx-overview-group,.hx-reference-section,.hx-subtopic,.hx-comparison){scroll-margin-top:8rem}
}