/* Mac window themes. Colors come from variables set by assets/themes.js (one theme array for the whole site). */
.mac[data-themed],.mac[data-themed] *{transition:background-color .2s ease,color .2s ease,stroke .2s ease,box-shadow .2s ease,border-color .2s ease}
@media (prefers-reduced-motion:reduce){.mac[data-themed],.mac[data-themed] *{transition:none!important}}
.mac[data-themed]{background:var(--m-side)}
.mac[data-themed] .bar,.mac[data-themed] .side,.mac[data-themed] .mem,.mac[data-themed]>div[style*="#2f2f2f"],.mac[data-themed] .strip{background:var(--m-side)!important}
.mac[data-themed] .chat{background:var(--m-chat)}
.mac[data-themed] .ln{background:var(--m-div)}
.mac[data-themed] .title{color:color-mix(in srgb,var(--m-text) 65%,transparent)}
.mac[data-themed] .r,.mac[data-themed] .r.hi .t{color:var(--m-text)}
.mac[data-themed] .r .ic,.mac[data-themed] .r.n .ch,.mac[data-themed] .tb{stroke:color-mix(in srgb,var(--m-text) 60%,transparent)}
.mac[data-themed] .r.hi .ic{stroke:var(--m-text)}
.mac[data-themed] .r .ic.g{stroke:#34C759}
.mac[data-themed] .r.sel,.mac[data-themed] .m.on{background:color-mix(in srgb,var(--m-accent) 20%,transparent)}
.mac[data-themed] .topic,.mac[data-themed] .log{color:var(--m-text)}
.mac[data-themed] .l.ev{color:var(--m-event)}
.mac[data-themed] .l u{color:var(--m-link)}
.mac[data-themed] .l.hl{background:var(--m-hl);color:#1D1D1F;margin:0 -13px;padding:0 13px}
.mac[data-themed] .l.hl b{color:#1D1D1F}
.mac[data-themed] .nk-sheena{color:var(--m-n1)}.mac[data-themed] .nk-cedar{color:var(--m-n2)}.mac[data-themed] .nk-dune{color:var(--m-n3)}
.mac[data-themed] .nk-bram{color:var(--m-n4)}.mac[data-themed] .nk-ada{color:var(--m-n5)}.mac[data-themed] .nk-quill{color:var(--m-n6)}
.mac[data-themed] .aa{color:color-mix(in srgb,var(--m-text) 70%,transparent)}
.mac[data-themed] .inp{background:var(--m-inp);color:color-mix(in srgb,var(--m-text) 90%,var(--m-inp))}
.mac[data-themed] .inp i{background:var(--m-text)}
.mac[data-themed] .send{background:var(--m-send,var(--m-accent))}
.mac[data-themed] .send svg{stroke:var(--m-sendfg,var(--m-on))}
.mac[data-themed] .m{color:var(--m-text)}
.mac[data-themed] .m:before{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-text) 35%,transparent);color:color-mix(in srgb,var(--m-text) 65%,transparent)}
.mac[data-themed] .m.op:before{background:#2fd158;box-shadow:none;color:#fff}
.mac[data-themed] .m.vc:before{background:#3b82f6;box-shadow:none;color:#fff}
.mac[data-themed][data-mode="light"] .m.op:before{background:#34C759}
.mac[data-themed][data-mode="light"] .m.vc:before{background:#007AFF}
.mac[data-themed] .btn{border-radius:0;background:color-mix(in srgb,var(--m-accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-accent) 35%,transparent);color:var(--m-text)}
.mac[data-themed] .btn.ban{background:rgba(219,51,46,.12);box-shadow:inset 0 0 0 1px rgba(219,51,46,.35);color:var(--m-text)}
.mac[data-themed] .btn.kick{background:rgba(230,158,23,.12);box-shadow:inset 0 0 0 1px rgba(230,158,23,.35);color:var(--m-text)}
/* Theme picker */
.th-bar{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:1.6rem;padding:0 16px}
.th-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:560px}
.th-dot{position:relative;width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;-webkit-tap-highlight-color:transparent}
.th-sw{display:block;width:22px;height:22px;border-radius:50%;background:var(--sw-bg);box-shadow:inset 0 0 0 2px var(--sw-ac),0 0 0 1px rgba(0,0,0,.08);transition:transform .15s ease}
.th-dot:hover .th-sw{transform:scale(1.12)}
.th-dot[aria-checked="true"] .th-sw{transform:scale(1.3)}
.th-dot[aria-checked="true"]::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid #3a9a8e;pointer-events:none}
.th-dot:focus-visible{outline:2px solid #3a9a8e;outline-offset:2px}
.th-dot::before{content:attr(data-name);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#1d1d1f;color:#fff;font-size:12px;line-height:1;padding:6px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:5}
.th-dot:hover::before,.th-dot:focus-visible::before{opacity:1}
.th-name{margin:0;font-size:.95rem;color:#6e6e73;text-align:center;min-height:1.4em}
.th-name b{color:#1d1d1f;font-weight:650;margin-right:.55em}
@media (pointer:coarse),(max-width:767.98px){.th-dot{width:44px;height:44px}.th-dot[aria-checked="true"]::after{width:38px;height:38px}.th-dots{max-width:300px}}
@media (prefers-reduced-motion:reduce){.th-sw,.th-dot::before{transition:none}}