/* Display settings. Panel styles, then what each setting does. Restyle the panel with --dp-fg, --dp-bg,
   --dp-line, --dp-accent, --dp-accent-fg, --dp-muted, --dp-font, --dp-title-font, --dp-link.
   The same rules answer the visitor's operating-system settings (prefers-contrast, prefers-reduced-motion)
   without the panel. Source of truth: Projects/_templates/display-prefs/. */

.dp-panel[hidden]{display:none}
/* above the consent banner (z 99990), which otherwise covers the panel's bottom rows and its Done button */
.dp-panel:not([hidden]){position:fixed;left:16px;bottom:16px;z-index:100000;box-sizing:border-box;
  width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;
  padding:22px 22px 18px;background:var(--dp-bg,#fff);color:var(--dp-fg,#111);
  border:2px solid var(--dp-fg,#111);box-shadow:0 10px 30px rgba(0,0,0,.18);
  font:400 1rem/1.45 var(--dp-font,system-ui,sans-serif)}
.dp-panel .dp-title{margin:0 0 6px;font:700 1.25rem/1.2 var(--dp-title-font,inherit);color:inherit;letter-spacing:0}
.dp-panel .dp-intro{margin:0 0 16px;font-size:.875rem;color:var(--dp-muted,#444)}
.dp-panel fieldset{margin:0 0 14px;padding:0;border:0;min-width:0}
.dp-panel legend{padding:0;margin:0 0 8px;font-weight:700}
.dp-panel .dp-sizes{display:flex;flex-wrap:wrap;gap:8px}
.dp-panel .dp-sizes legend{width:100%}
.dp-panel .dp-size{position:relative}
.dp-panel .dp-size input{position:absolute;opacity:0;width:1px;height:1px}
.dp-panel .dp-size-label{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;
  border:2px solid var(--dp-line,#999);color:inherit;line-height:1}
.dp-panel .dp-size input:checked+label{border-color:var(--dp-accent,#111);background:var(--dp-accent,#111);color:var(--dp-accent-fg,#fff)}
.dp-panel .dp-size input:focus-visible+label{outline:3px solid var(--dp-accent,#111);outline-offset:2px}
.dp-panel .dp-toggles{display:grid;gap:4px;margin-bottom:16px}
.dp-panel .dp-toggle{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:6px 0}
.dp-panel .dp-toggle input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--dp-accent,#111)}
.dp-panel .dp-toggle label{cursor:pointer;font-weight:600}
.dp-panel .dp-hint{display:block;font-weight:400;font-size:.8125rem;color:var(--dp-muted,#444)}
.dp-panel .dp-actions{display:flex;gap:10px;justify-content:flex-end}
.dp-panel .dp-btn{font:600 .9375rem/1 inherit;min-height:44px;padding:0 18px;cursor:pointer;
  border:2px solid var(--dp-accent,#111);background:transparent;color:var(--dp-fg,#111)}
.dp-panel .dp-btn-on{background:var(--dp-accent,#111);color:var(--dp-accent-fg,#fff)}

/* Text size. rem-based sites scale from the root. */
html.dp-text-115{font-size:115%}
html.dp-text-130{font-size:130%}
html.dp-text-115 :is(h1,h2,h3,h4),html.dp-text-130 :is(h1,h2,h3,h4){overflow-wrap:break-word;hyphens:auto}

/* Underline links */
html.dp-underline a,html.dp-contrast a{text-decoration-line:underline!important}

/* High contrast: dark text on white, everywhere except pictures. Brand color survives in links only. */
html.dp-contrast body,
html.dp-contrast body *:not(svg):not(svg *):not(img):not(picture):not(video):not(iframe):not(canvas){
  background-color:#fff!important;background-image:none!important;color:#111!important;
  text-shadow:none!important;box-shadow:none!important}
html.dp-contrast body *:not(svg):not(svg *){border-color:#111!important}
/* inline boxes stay see-through: on tight line heights a painted span covers the line above it */
html.dp-contrast.dp-contrast body :is(span,a,strong,em,b,i,u,small,mark,code,abbr,cite,q,sub,sup,time,label){background-color:transparent!important}
html.dp-contrast a,html.dp-contrast a *{color:var(--dp-link,#0b3a66)!important}
html.dp-contrast :is(button:not([class*="submenu"]),.wp-block-button__link,input,select,textarea){border:2px solid #111!important}
html.dp-contrast :focus-visible{outline:3px solid #111!important;outline-offset:3px}
html.dp-contrast ::placeholder{color:#444!important}
@media (prefers-contrast:more){
  html body,
  html body *:not(svg):not(svg *):not(img):not(picture):not(video):not(iframe):not(canvas){
    background-color:#fff!important;background-image:none!important;color:#111!important;
    text-shadow:none!important;box-shadow:none!important}
  html body *:not(svg):not(svg *){border-color:#111!important}
  html:root body :is(span,a,strong,em,b,i,u,small,mark,code,abbr,cite,q,sub,sup,time,label){background-color:transparent!important}
  html a,html a *{color:var(--dp-link,#0b3a66)!important;text-decoration-line:underline!important}
  html :is(button:not([class*="submenu"]),.wp-block-button__link,input,select,textarea){border:2px solid #111!important}
  html :focus-visible{outline:3px solid #111!important;outline-offset:3px}
}

/* Reduce motion: animations jump to their end state, transitions are instant. */
html.dp-motion *,html.dp-motion *::before,html.dp-motion *::after{
  animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;
  transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.dp-motion{scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* High contrast must not flatten the panel's own selected state */
html.dp-contrast .dp-panel .dp-size input:checked+label{background-color:#111!important;color:#fff!important}
@media (prefers-contrast:more){html .dp-panel .dp-size input:checked+label{background-color:#111!important;color:#fff!important}}