/* Review UI is separate from both website schemes. */
body .reference-tools{display:block;position:sticky;top:0;z-index:150;padding:18px 28px 12px;background:#101e2b!important;color:#f3f8fc!important;border-bottom:3px solid #29abe2!important;font:13px/1.45 Arial,sans-serif;box-shadow:0 5px 18px #0002!important}
body .reference-tools *,body .reference-instructions *{color:inherit!important;background-color:transparent!important;border-color:#496071!important;text-shadow:none!important;box-shadow:none!important;font-family:Arial,sans-serif}
.reference-control-top,.reference-control-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.reference-control-bottom{margin-top:14px;padding-top:12px;border-top:1px solid #344655}.reference-workspace{display:flex;align-items:center;gap:12px}.reference-workspace strong{display:block;font-size:16px;letter-spacing:.01em}.reference-workspace small{display:block;font-size:11px;color:#b2c4d3!important;margin-top:2px}
body .reference-workspace-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #688398!important;border-radius:8px!important;color:#71d2ff!important;font-weight:700;font-size:12px}
.reference-views,.reference-jumps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
body .reference-tools a,body .reference-tools button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:8px 14px;border:1px solid #496071!important;border-radius:6px!important;font:600 13px/1.4 Arial,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;margin:0;outline:none!important}
body .reference-tools a[aria-current]{background:#e7f4fc!important;color:#122333!important;border-color:#e7f4fc!important}
body .reference-tools .reference-instructions-open{background:#29abe2!important;color:#082337!important;border-color:#29abe2!important}
body .reference-tools a:hover,body .reference-tools button:hover{outline:1px solid #9edfff!important;outline-offset:2px}
body .reference-tools :focus-visible,body .reference-instructions :focus-visible{outline:3px solid #48beff!important;outline-offset:3px}
.reference-phase{font-size:9px;letter-spacing:.1em;color:#9bb5c8!important}.reference-phase b{font-size:12px;letter-spacing:normal;display:inline-block;margin-left:10px;color:#e4eef5!important}.reference-jumps a{min-height:28px!important;padding:3px 9px!important;border-color:transparent!important;font-weight:400!important;font-size:12px!important}
body .reference-region-label{display:flex;align-items:center;gap:12px;margin:0;padding:12px 28px;background:#edf3f7!important;color:#273d4b!important;border-top:1px solid #bac9d3!important;border-bottom:1px solid #bac9d3!important;font:13px/1.4 Arial,sans-serif;letter-spacing:.04em}
body .reference-region-label span{color:#467085!important;font-size:11px;font-family:monospace}body .reference-region-label strong{color:#152d3d!important;font-size:13px}body .reference-region-label small{margin-left:auto;color:#537286!important;font-size:10px;letter-spacing:normal}
.reference-module-label{padding-top:22px;padding-bottom:16px;font:12px/1.5 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;border-top:1px dashed currentColor}
body .reference-fold{position:absolute;top:calc(100svh - 1px);left:0;right:0;z-index:100;pointer-events:none;border-top:2px dashed #007eb7!important;text-align:right;font:11px/1.4 Arial,sans-serif;scroll-margin-top:calc(var(--reference-panel-height,110px) + 24px)}
body .reference-fold>span{display:inline-block;transform:translateY(-100%);margin-right:24px;padding:5px 10px;background:#e6f5fc!important;color:#124666!important;border:1px solid #4da2c9!important;border-radius:4px!important;font-weight:700}body .reference-fold small{color:#225977!important;font-weight:400;margin-left:8px}
.reference-tools~.site-header-shell{position:relative;top:auto;z-index:3}body:has(.reference-tools) main{padding-top:0}.reference-hero-pin{position:sticky;top:var(--reference-hero-top,var(--reference-panel-height,110px));z-index:1;background:var(--bg,#fff)!important;padding-bottom:24px}
body:has(.reference-tools) .home-sections{position:relative;z-index:2;background:var(--bg,#fff)!important;padding-top:1px}body:has(.reference-tools) .site-footer{position:relative;z-index:3;background:var(--bg,#fff)!important}
#reference-header,#reference-footer,#reference-content,#reference-hero,#design-note{scroll-margin-top:calc(var(--reference-panel-height,110px) + 12px)}
/* Blue instruction dialog overrides the neutral theme's deliberate colour reset. */
html.reference-guide-open{overflow:hidden}
body .reference-instructions{width:min(920px,calc(100vw - 36px));max-height:calc(100dvh - 36px);margin:auto;padding:0;border:1px solid #658499!important;border-radius:14px!important;background:#f0f7fb!important;color:#183345!important;font:15px/1.65 Arial,sans-serif;overflow:auto;overscroll-behavior:contain}
.reference-instructions:not([open]){display:none}.reference-instructions::backdrop{background:#071726cf!important}
body .reference-instructions .reference-guide-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 30px;background:#102333!important;color:#e7f6ff!important}.reference-guide-top>span{font-size:11px;letter-spacing:.1em}
body .reference-instructions button{padding:9px 14px;border:1px solid #547891!important;border-radius:6px!important;background:#143751!important;color:#fff!important;font:600 13px/1.4 Arial,sans-serif;cursor:pointer}
body .reference-instructions .reference-guide-heading{padding:34px 40px;background:#29abe2!important;color:#092b40!important}.reference-guide-heading>p{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
body .reference-guide-heading h2{font:700 clamp(28px,4.3vw,44px)/1.08 Arial,sans-serif;letter-spacing:-.035em;text-transform:none;margin:0 0 20px;color:#092b40!important}.reference-guide-heading>div{max-width:72ch;font-size:15px;line-height:1.65}
.reference-guide-steps{list-style:none;padding:8px 40px 0;margin:0}.reference-guide-steps>li{display:grid;grid-template-columns:36px 1fr;gap:18px;padding:25px 0;margin:0;border-bottom:1px solid #c5dbe8!important}.reference-step-number{font:700 13px/1.4 Arial,sans-serif;padding-top:3px;color:#0072a7!important}
body .reference-instructions ul{list-style:disc;margin:0;padding-left:20px;font-size:14px;line-height:1.7}body .reference-instructions ul>li{display:list-item;margin:0 0 8px;padding:0}body .reference-instructions ul>li:last-child{margin-bottom:0}.reference-guide-heading ul{max-width:72ch}
body .reference-instructions h3{font:700 19px/1.3 Arial,sans-serif;letter-spacing:-.015em;text-transform:none;margin:0 0 9px;color:#153a52!important}.reference-instructions p{font-size:14px;line-height:1.7;margin:0}.reference-guide-notes{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:30px 40px}.reference-guide-notes h3{font-size:16px!important}
body .reference-instructions .reference-guide-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 40px;background:#dceef8!important;color:#234f68!important;font-size:12px}
@media(max-width:700px){body .reference-tools{padding:12px 14px 10px}.reference-control-top{align-items:flex-start;flex-direction:column;gap:12px}.reference-workspace-icon{width:30px!important;height:30px!important}.reference-workspace strong{font-size:14px}.reference-workspace small{font-size:10px}.reference-control-bottom{margin-top:10px;padding-top:8px;gap:8px;flex-direction:column;align-items:flex-start}.reference-phase{display:none}.reference-views{width:100%;gap:5px}.reference-tools a,.reference-tools button{min-height:34px!important;padding:7px 12px!important;font-size:12px!important}.reference-jumps{gap:0}.reference-jumps a{font-size:11px!important;padding:2px 7px!important;min-height:24px!important}.reference-region-label{padding:10px 14px!important}.reference-fold>span{margin-right:12px!important}.reference-fold small{font-size:9px}.reference-guide-top{padding:14px 18px!important}.reference-guide-top>span{font-size:9px}.reference-guide-heading{padding:28px 22px!important}.reference-guide-steps{padding:0 22px}.reference-guide-steps>li{grid-template-columns:24px 1fr;gap:12px;padding:22px 0}.reference-guide-notes{grid-template-columns:1fr;padding:24px 22px;gap:24px}.reference-guide-bottom{padding:18px 22px!important;flex-direction:column;align-items:stretch}.reference-guide-bottom button{width:100%}.reference-guide-heading h2{font-size:30px!important}body .reference-instructions{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}}

@media(max-width:700px){body .reference-tools .reference-control-top{align-items:flex-start}body .reference-tools .reference-control-bottom{gap:8px}}

/* Brief general guidance followed by two delivery steps. */
body .reference-guide-heading>ul{margin-top:20px}
body .reference-guide-steps>li{grid-template-columns:64px 1fr}
body .reference-step-number{white-space:nowrap}
body .reference-guide-steps h3+h3{margin-top:16px}
body .reference-guide-steps h3:last-child{margin-bottom:0}
@media(max-width:700px){body .reference-guide-steps>li{grid-template-columns:1fr;gap:10px}}

/* Review hierarchy: regions blue, subsections purple, modules green.
   Text labels identify each level independently of colour. */
body .reference-region-label.reference-level-region{background:#dcecfb!important;color:#123f66!important;border-color:#8eb7dc!important;border-left:5px solid #286ba4!important}
body .reference-region-label.reference-level-subsection{background:#eee5fa!important;color:#543076!important;border-color:#c8a9e3!important;border-left:5px solid #8051ab!important}
body .reference-region-label.reference-level-region :is(span,strong,small),body .reference-region-label.reference-level-subsection :is(span,strong,small){color:inherit!important}
body .reference-module-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;margin:0;padding:13px 28px;background:#e4f3e9!important;color:#24553c!important;border:0;border-top:1px solid #a9d0b8!important;border-bottom:1px solid #a9d0b8!important;border-left:5px solid #3e855e!important;font:13px/1.5 Arial,sans-serif;letter-spacing:0;text-transform:none}
body .reference-module-label span,body .reference-module-label strong{background:transparent!important;color:inherit!important;font:inherit}body .reference-module-label span{font-weight:700}
body #reference-content{position:sticky;top:var(--reference-panel-height,130px);z-index:130}
body #reference-hero,body #reference-page-content{position:sticky;top:calc(var(--reference-panel-height,130px) + var(--reference-region-height,45px));z-index:2}
body:has(.reference-tools) .home-sections{z-index:3;padding-top:0}
body #reference-content{scroll-margin-top:var(--reference-panel-height,130px)}
body #reference-hero,body #reference-page-content{scroll-margin-top:calc(var(--reference-panel-height,130px) + var(--reference-region-height,45px))}
.reference-module-label{scroll-margin-top:calc(var(--reference-panel-height,130px) + var(--reference-region-height,45px) + var(--reference-subsection-height,45px))}
@media(max-width:700px){body .reference-module-label{padding:10px 14px;font-size:12px}}

/* Keep review labels outside Blue's two-column hero composition. */
html[data-scheme=blue] body:has(.reference-tools) .structured-page{display:block;padding-top:0}
html[data-scheme=blue][data-hero=split] .reference-hero-pin .home-masthead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:4%;padding-top:40px}
@media(max-width:1100px){html[data-scheme=blue][data-hero=split] .reference-hero-pin .home-masthead{grid-template-columns:1fr;gap:0}}
@media(max-width:550px){html[data-scheme=blue][data-hero=split] .reference-hero-pin .home-masthead{padding-top:15px}}
/* Wireframe leaves the introduction's composition to the designer. */
html[data-scheme=wireframe] body:has(.reference-tools) .home-intro{display:block;text-align:left}
html[data-scheme=wireframe] body:has(.reference-tools) .home-intro :is(h2,.prose){max-width:none;margin-left:0;margin-right:0}

/* Temporarily simplify the designer workspace; retain the secondary controls for later. */
body .reference-tools .reference-control-bottom{display:none}
/* Keep the reference-only Demo available by URL, but simplify visible choices. */
body .reference-tools .reference-demo-view[hidden]{display:none}
