/* shared light-switch + smooth theme transition + moonlight accent (loaded by order/content pages) */
.lightswitch{ width:50px; height:27px; border-radius:7px; border:none; cursor:pointer; position:relative; padding:0;
  background:#cfc9de; box-shadow:inset 0 2px 5px rgba(0,0,0,.22); transition:background .3s; flex:none; }
html[data-theme="dark"] .lightswitch{ background:#39334a; box-shadow:inset 0 2px 5px rgba(0,0,0,.32), 0 0 10px rgba(240,222,150,.16); }
.lightswitch .knob{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:5px; background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.35); display:grid; place-items:center; color:#c8851a;
  transition:transform .3s cubic-bezier(.5,1.75,.5,1), background .3s; }
html[data-theme="dark"] .lightswitch .knob{ transform:translateX(23px); background:#0e0b14; color:#f0de96; }
.lightswitch svg{ width:13px; height:13px; }
html[data-theme="dark"] .lightswitch .moon{ filter:drop-shadow(0 0 4px rgba(240,222,150,.75)); }
.lightswitch .moon{ display:none; } html[data-theme="dark"] .lightswitch .sun{ display:none; } html[data-theme="dark"] .lightswitch .moon{ display:block; }
html.theming, html.theming body, html.theming header, html.theming .card, html.theming .wrap,
html.theming .item, html.theming .copy, html.theming .faq, html.theming .callout, html.theming footer{
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}