/* The header uses the same native select and colour clock as the home page. */
.nf-head .nt-picker[hidden] {display:none}
.nf-head .nt-picker:not([hidden]) {
  display:inline-flex; align-items:center; gap:.23rem; margin-inline-start:auto;
  color:var(--frame-ink); white-space:nowrap; font-size:.76rem;
}
.nf-head .nt-picker svg {width:15px;height:15px;flex:none}
.nf-head .nt-picker select {
  background:transparent;color:inherit;font:inherit;font-size:.83rem;border:1px solid transparent;
  max-width:100%;padding:4px;min-height:44px;border-radius:5px;cursor:pointer;
}
.nf-head .nt-picker select:hover {border-color:currentColor}
.nf-head .nt-picker select:focus-visible {outline:2px solid currentColor}
@media(max-width:740px) {
  .nf-head .nf-head-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;align-items:center}
  .nf-head .nf-brand {grid-column:1;grid-row:1}
  .nf-head .nt-picker {grid-column:2;grid-row:1;justify-self:end}
  .nf-head .nf-nav {grid-column:1/-1;grid-row:2}
}

/* The shared header, breadcrumbs and footer read these tokens too. */
html[data-nlive-frame][data-nlive-tone="night"] {
  color-scheme:dark;--frame-paper:#112436;--frame-surface:#152b3d;--frame-ink:#f2f5fa;
  --frame-green:#b8e2fa;--frame-line:#526c80;background:var(--frame-paper);
}
html[data-nlive-tone="night"] .nf-brand span,
html[data-nlive-tone="night"] .nf-crumb .nf-divider,
html[data-nlive-tone="night"] .nf-crumb [aria-current],
html[data-nlive-tone="night"] body[data-frame-page] .nf-foot {color:#c6d7e5}
html[data-nlive-tone="night"] .nf-skip {background:#17374d;color:#fff}
html[data-nlive-tone="night"] .nt-picker option {background:#172b3e;color:#f2f5fa}
html[data-nlive-tone="night"] body :is(a,select,input,button,summary):focus-visible {
  outline:3px solid #ffd278;outline-offset:2px;
}
html[data-nlive-tone="night"] #main .pr-detail {
  --pr-ink:#f2f5fa;--pr-muted:#c6d7e5;--pr-link:#b8e2fa;--pr-line:#526c80;
  --pr-paper:#152b3d;--pr-panel:#1c3447;--pr-mist:#233d51;--pr-rule:#8fb6cc;
  --pr-action:#b8e2fa;--pr-action-ink:#132e42;
}
html[data-nlive-tone="night"] body[data-frame-page="areas"] #main .pi-directory {
  --pi-ink:#f2f5fa;--pi-soft:#c6d7e5;--pi-rule:#526c80;--pi-wash:#233d51;
  color:var(--pi-ink);background:#152b3d;
}
html[data-nlive-tone="night"] .pi-hero {background:linear-gradient(115deg,#1b3346,#28465b)}
html[data-nlive-tone="night"] body[data-frame-page="areas"] #main .pi-copy h1,
html[data-nlive-tone="night"] .pi-pref-name {color:var(--pi-ink)}
html[data-nlive-tone="night"] .pi-directory :is(.pi-copy p,.pi-consult p,.pi-region small,.pi-search label,.pi-search [role="status"],.pi-region-nav a span) {color:var(--pi-soft)}
html[data-nlive-tone="night"] .pi-directory .pi-choice {background:#b8e2fa;color:#132e42}
html[data-nlive-tone="night"] .pi-directory :is(.pi-consult,.pi-wide-list h3,.pi-narrow-list[open] summary) {background:#233e52}
html[data-nlive-tone="night"] .pi-directory .pi-form-row :is(input,button) {background:#233e52;color:var(--pi-ink);border-color:#81a0b3}
html[data-nlive-tone="night"] .pi-directory .pi-form-row input::placeholder {color:#bdcdd7;opacity:1}
html[data-nlive-tone="night"] .pi-directory .pi-form-row button:disabled {background:#1e3446;color:#bdcdd7}
html[data-nlive-tone="night"] .pi-directory :is(.pi-pref,.pi-narrow-list summary)::after {border-color:#a6c7d8}