.oo-appearance-control{display:inline-flex;align-items:center;flex-shrink:0;gap:8px;font:14px/1.4 system-ui,sans-serif;margin-left:auto}
.oo-appearance-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.oo-appearance-control select{font:inherit;color:var(--ink);background:var(--surface,#fffefb);border:1px solid var(--line);border-radius:7px;min-height:44px;padding:8px 28px 8px 12px;cursor:pointer;max-width:120px}
.oo-appearance-control select:focus-visible{outline:3px solid #98612c;outline-offset:3px}
:root[data-oo-surface=demo] body>header{flex-wrap:wrap}
:root[data-oo-surface=public][data-appearance=dark]{--paper:#16241d;--surface:#213027;--ink:#e6eddf;--green:#244c3f;--muted:#b3c2b1;--line:#405247;--gold:#d4bf82}
:root[data-oo-surface=public][data-appearance=dark] .reading-strip,
:root[data-oo-surface=public][data-appearance=dark] .product-legal-notice,
:root[data-oo-surface=public][data-appearance=dark] .end-note{background:#26392d}
:root[data-oo-surface=public][data-appearance=dark] :is(.hero h1 em,.learn-hero em,.number,.card-meta){color:#b5c9a5}
:root[data-oo-surface=public][data-appearance=dark] :is(.directory-heading p,.card-copy p,.lesson-heading p:not(.eyebrow),.source-note,.reading-area figcaption span,.learning-footer p){color:var(--muted)}
:root[data-oo-surface=public][data-appearance=dark] :is(.rule-card,.reading-area figure,.zoom-bar,input,button){background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-oo-surface=public][data-appearance=dark] :is(.card-art,dialog){background:#1c2c23;color:var(--ink)}
:root[data-oo-surface=public][data-appearance=dark] :is(.rule-directory,.lesson,.learning-footer,.source-note,.guide-card){border-color:var(--line)}
:root[data-oo-surface=public][data-appearance=dark] button{box-shadow:0 3px 0 #0c1912}
:root[data-oo-surface=public][data-appearance=dark] button:hover{background:#314a3b}
:root[data-oo-surface=public][data-appearance=dark] :is(button[aria-pressed=true],.step[aria-current=step]){background:#b5c9a5;color:#16241d;border-color:#b5c9a5}
:root[data-oo-surface=public][data-appearance=dark] :is(#image-error,#load-error){background:#493528;color:#fff0d3}
:root[data-oo-surface=public][data-appearance=dark] .skip{background:var(--surface)}
/* Educational artwork keeps its own approved palette in both modes. */
@media(max-width:1050px) and (min-width:621px){.masthead{flex-wrap:wrap;gap:16px}.masthead nav{order:2;width:100%;margin:0;justify-content:center}}
@media(max-width:620px){.masthead .oo-appearance-control{grid-column:2;grid-row:2;justify-self:end}.masthead nav{grid-row:3}.masthead .oo-appearance-control select{min-height:40px}.oo-appearance-control{font-size:13px}:root[data-oo-surface=demo] .oo-appearance-control{order:3;width:100%;justify-content:flex-end;margin-top:4px}}

/* Keep every public navigation action reachable on narrow phones. */
@media(max-width:620px){
 .masthead{grid-template-columns:minmax(0,1fr) auto}
 .masthead nav{min-width:0;flex-wrap:wrap;justify-content:flex-start;gap:4px 16px}
 .masthead nav a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
}
@media(max-width:380px){
 .masthead .brand{grid-column:1/-1;grid-row:1}
 .masthead .sign-in{grid-column:1;grid-row:2;justify-self:start}
 .masthead .oo-appearance-control{grid-column:2;grid-row:2}
}

/* Shared public-site round control, matching OurSCOTX and OurSCOTUS. */
:root[data-oo-surface] #public-appearance.oo-theme-toggle{
 display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;
 height:44px;min-height:44px;padding:0;gap:0;border:1px solid var(--line);
 border-radius:50%;background:transparent!important;color:var(--ink)!important;
 box-shadow:none!important;transform:none!important;cursor:pointer;
}
#public-appearance.oo-theme-toggle svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;pointer-events:none}
#public-appearance.oo-theme-toggle .sun{display:none}
:root[data-appearance=dark] #public-appearance.oo-theme-toggle .moon{display:none}
:root[data-appearance=dark] #public-appearance.oo-theme-toggle .sun{display:block}
:root[data-oo-surface] #public-appearance.oo-theme-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:5px}

/* Demo shares the same compact control; keep its existing header actions. */
:root[data-oo-surface=demo] #public-appearance.oo-theme-toggle{order:0;margin-top:0;justify-content:center}