/* Just the glyph: no box, no border, no padding. */
.hc-theme-tog{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:auto;height:auto;padding:0;margin:0;cursor:pointer;
  background:none;border:0;box-shadow:none;-webkit-appearance:none;appearance:none;
  color:var(--text-secondary,#475569);
  transition:color .18s var(--ease),transform .18s var(--ease)}
.hc-theme-tog:hover{background:none;color:var(--brand);transform:translateY(-1px)}
/* No ring when clicked. :focus-visible still rings for keyboard users, which is the
   whole point of that selector — a mouse click never triggers it. */
.hc-theme-tog:focus{outline:none}
.hc-theme-tog:focus-visible{outline:2px solid rgba(var(--br),.55);outline-offset:3px;border-radius:6px}
.hc-theme-tog::-moz-focus-inner{border:0;padding:0}
/* Show the glyph for the theme you would GET, not the one you are in: that is the
   convention every product uses and the one people actually read.
   These MUST out-specify `.hc-theme-tog svg` (0,1,1) or both glyphs render at
   once — a bare `.hc-tog-sun` (0,1,0) loses to it. */
.hc-theme-tog .hc-tog-moon{display:block}
.hc-theme-tog .hc-tog-sun{display:none}
html[data-theme="dark"] .hc-theme-tog .hc-tog-moon{display:none}
html[data-theme="dark"] .hc-theme-tog .hc-tog-sun{display:block}
html[data-theme="dark"] .hc-theme-tog{background:none;border:0;color:var(--hc-d-ink-2,#a9b4c4)}
html[data-theme="dark"] .hc-theme-tog:hover{background:none;color:#fff}
/* In the burger menu it is a full-width labelled row like every other item, so the
   padding comes back there and only there. */
@media(max-width:920px){
  .hc-hdr.hc-nav-open .hc-theme-tog{width:100%;justify-content:flex-start;gap:10px;padding:13px 12px;height:auto}
  .hc-hdr.hc-nav-open .hc-theme-tog:after{content:'Light / dark';font:600 14px/1 var(--font);color:inherit}
}