/* OHSE.app theme layer. Dark is the original design of every page.
   Everything under html[data-theme="light"] is the light version.
   --pgl is the page's accent colour made dark enough to read on white. */

/* ---------- Toggle (both themes) ---------- */
.ohse-theme{position:fixed;top:18px;right:18px;z-index:120;display:inline-flex;gap:2px;padding:3px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.ohse-theme.in-slot{position:static;z-index:auto}
.ohse-theme button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:100px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#c7c7cc;cursor:pointer;transition:background .2s,color .2s;line-height:1}
.ohse-theme button svg{width:14px;height:14px;flex:0 0 auto}
.ohse-theme button:hover{color:#fff;background:rgba(255,255,255,.1)}
.ohse-theme button[aria-checked="true"]{background:#fff;color:#111}
.ohse-theme button:focus-visible{outline:2px solid #2997ff;outline-offset:2px}
@media(max-width:400px){.ohse-theme button{padding:8px 10px}.ohse-theme button .t{display:none}.ohse-theme button svg{width:16px;height:16px}}
html[data-theme="light"] .ohse-theme{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.14)}
html[data-theme="light"] .ohse-theme button{color:#515154}
html[data-theme="light"] .ohse-theme button:hover{color:#000;background:rgba(0,0,0,.06)}
html[data-theme="light"] .ohse-theme button[aria-checked="true"]{background:#1d1d1f;color:#fff}
html[data-theme="light"] .ohse-theme button:focus-visible{outline-color:#0071e3}
[data-theme-slot]{display:flex;align-items:center;justify-content:center}