/* ============================================================================
   RUDQP theme toggle: the button, its five designs and their animations.
   Sits beside the hamburger, so it keeps the hamburger's size and shape and
   reads as part of the same control group at every breakpoint.
   ========================================================================== */

.thtog{
  position:relative;
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;
  background:none;color:var(--ink);
  cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease,cubic-bezier(.22,1,.36,1)),
             border-color .3s var(--ease,cubic-bezier(.22,1,.36,1)),
             transform .3s var(--ease,cubic-bezier(.22,1,.36,1));
}
.thtog:hover{background:rgba(var(--ink-rgb,29,29,31),.06)}
.thtog:active{transform:scale(.94)}
.thtog:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.thtog svg{display:block;overflow:visible}
.thtog svg circle,.thtog svg path{fill:currentColor}
.thtog svg line{stroke:currentColor;stroke-width:2}
@media(max-width:560px){ .thtog{width:44px;height:44px} }   /* full tap target */

/* The veil used where the View Transitions API is unavailable. */
.thveil{position:fixed;inset:0;z-index:9998;opacity:0;pointer-events:none;
  transition:opacity .34s ease}

/* Under the native transition, only the incoming layer is clipped, so the two
 * themes cross-wipe rather than cross-fade. */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:none;mix-blend-mode:normal}
  ::view-transition-new(root){animation:none;mix-blend-mode:normal}
}

/* ==========================================================================
   Design 1: MORPH. The sun's rays retract into the disc while a second disc
   the colour of the page slides across from the upper right and bites the
   circle into a crescent. Built from plain elements rather than an SVG mask,
   so it cannot be broken by a duplicated id or a geometry-property quirk.
   ======================================================================== */
.thtog--1 .thtog__m{position:relative;width:20px;height:20px;display:block}
.thtog--1 .thtog__disc{position:absolute;left:5px;top:5px;width:10px;height:10px;
  border-radius:50%;background:currentColor;
  transition:inset .5s cubic-bezier(.34,1.5,.64,1),width .5s cubic-bezier(.34,1.5,.64,1),height .5s cubic-bezier(.34,1.5,.64,1)}
.thtog--1 .thtog__bite{position:absolute;left:5px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--cream,#fff);
  transform:translate(-150%,-90%);
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.thtog--1 .thtog__rays{position:absolute;inset:0;transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.34,1.5,.64,1),opacity .34s ease}
.thtog--1 .thtog__rays i{position:absolute;left:50%;top:0;width:2px;height:4px;margin-left:-1px;
  border-radius:1px;background:currentColor;transform-origin:1px 10px}
.thtog--1 .thtog__rays i:nth-child(1){transform:rotate(0deg)}
.thtog--1 .thtog__rays i:nth-child(2){transform:rotate(45deg)}
.thtog--1 .thtog__rays i:nth-child(3){transform:rotate(90deg)}
.thtog--1 .thtog__rays i:nth-child(4){transform:rotate(135deg)}
.thtog--1 .thtog__rays i:nth-child(5){transform:rotate(180deg)}
.thtog--1 .thtog__rays i:nth-child(6){transform:rotate(225deg)}
.thtog--1 .thtog__rays i:nth-child(7){transform:rotate(270deg)}
.thtog--1 .thtog__rays i:nth-child(8){transform:rotate(315deg)}
[data-theme="dark"] .thtog--1 .thtog__disc{left:2px;top:2px;width:16px;height:16px}
[data-theme="dark"] .thtog--1 .thtog__bite{width:15px;height:15px;transform:translate(52%,-48%)}
[data-theme="dark"] .thtog--1 .thtog__rays{transform:rotate(45deg) scale(.3);opacity:0}

/* ==========================================================================
   Design 2: SWITCH. A capsule whose knob slides across and swaps its icon,
   the track filling as it goes. The most explicit of the five.
   ======================================================================== */
.thtog--2{width:66px;height:34px;border-radius:999px;padding:0 3px;place-items:center start}
@media(max-width:560px){ .thtog--2{width:68px;height:36px} }
.thtog--2 .thtog__track{position:absolute;inset:0;border-radius:999px;overflow:hidden;
  background:rgba(var(--ink-rgb,29,29,31),.08);transition:background .4s ease}
.thtog--2 .thtog__knob{position:absolute;top:50%;left:3px;translate:0 -50%;
  width:28px;height:28px;border-radius:50%;
  background:var(--paper,#fff);box-shadow:0 2px 8px rgba(0,0,0,.28);
  display:grid;place-items:center;
  transition:left .46s cubic-bezier(.34,1.4,.64,1),background .4s ease}
@media(max-width:560px){ .thtog--2 .thtog__knob{width:30px;height:30px} }
.thtog--2 .thtog__ks,.thtog--2 .thtog__km{position:absolute;transition:opacity .3s ease,transform .46s cubic-bezier(.34,1.4,.64,1)}
.thtog--2 .thtog__km{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="dark"] .thtog--2 .thtog__track{background:rgba(255,255,255,.16)}
[data-theme="dark"] .thtog--2 .thtog__knob{left:calc(100% - 31px)}
@media(max-width:560px){ [data-theme="dark"] .thtog--2 .thtog__knob{left:calc(100% - 33px)} }
[data-theme="dark"] .thtog--2 .thtog__ks{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme="dark"] .thtog--2 .thtog__km{opacity:1;transform:none}

/* ==========================================================================
   Design 3: DIAL. Both icons ride one wheel. Tapping spins the wheel a half
   turn, so the sun rolls up and out as the moon rolls in beneath it.
   ======================================================================== */
.thtog--3 .thtog__wheel{width:20px;height:20px;overflow:hidden;display:block}
.thtog--3 .thtog__w{display:flex;flex-direction:column;
  transition:transform .58s cubic-bezier(.22,1,.36,1)}
.thtog--3 .thtog__w svg{flex:0 0 20px;height:20px;transition:transform .58s cubic-bezier(.22,1,.36,1)}
.thtog--3 .thtog__w svg:first-child{transform:rotate(0)}
[data-theme="dark"] .thtog--3 .thtog__w{transform:translateY(-20px)}
[data-theme="dark"] .thtog--3 .thtog__w svg{transform:rotate(180deg)}

/* ==========================================================================
   Design 4: ECLIPSE. A solid sun with a soft halo; a second disc the colour
   of the page slides over it and the halo cools as it passes.
   ======================================================================== */
.thtog--4 .thtog__ec{position:relative;width:19px;height:19px;display:block}
.thtog--4 .thtog__sun{position:absolute;inset:2px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px rgba(var(--ink-rgb,29,29,31),.16);
  transition:box-shadow .5s ease,transform .5s cubic-bezier(.34,1.5,.64,1),inset .5s ease}
.thtog--4 .thtog__shade{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:var(--cream,#fff);
  transform:translate(-115%,-60%);
  transition:transform .58s cubic-bezier(.22,1,.36,1)}
.thtog--4:hover .thtog__sun{box-shadow:0 0 0 5px rgba(var(--ink-rgb,29,29,31),.22)}
[data-theme="dark"] .thtog--4 .thtog__sun{inset:0;box-shadow:0 0 0 0 rgba(var(--ink-rgb),0)}
[data-theme="dark"] .thtog--4 .thtog__shade{transform:translate(32%,-32%)}

/* ==========================================================================
   Design 5: FLIP. The key itself turns over in 3D: sun on the front face,
   moon on the back. The quietest of the five and the most physical.
   ======================================================================== */
.thtog--5{perspective:420px}
.thtog--5 .thtog__flip{position:relative;width:18px;height:18px;display:block;
  transform-style:preserve-3d;transition:transform .62s cubic-bezier(.22,1,.36,1)}
.thtog--5 .thtog__f{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden}
.thtog--5 .thtog__f--b{transform:rotateY(180deg)}
[data-theme="dark"] .thtog--5 .thtog__flip{transform:rotateY(180deg)}

/* A single shared press cue: a ring that expands once per tap. */
.thtog--go::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid currentColor;opacity:.5;animation:thtogRing .6s ease-out forwards;pointer-events:none}
@keyframes thtogRing{to{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .thtog,.thtog *{transition:none!important;animation:none!important}
  .thveil{transition:none}
}

/* Footer: "Add as a preferred source on Google" badge (18 Sep 2026).
   Dark badge on the light footer, light badge on the dark footer. */
.foot__gps{display:inline-flex;align-items:center;line-height:0;border-radius:8px;transition:opacity .2s ease}
.foot__gps:hover{opacity:.8}
.foot__gps:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.foot__gps img{display:block;height:40px;width:auto}
.foot__gps .foot__gps-d{display:none}
html[data-theme="dark"] .foot__gps .foot__gps-l{display:none}
html[data-theme="dark"] .foot__gps .foot__gps-d{display:block}
html .foot--v2 .foot__low{align-items:center}