.theme-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--border);padding:4px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.08);color:#111827}
.theme-toggle button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:.8;
  /* make room for a thicker ring without layout jump */
  box-sizing:border-box;
  border:2px solid transparent;
}
.theme-toggle button.active{
  opacity:1;
  /* KILL blue ring */
  outline:none !important;

  /* THICKER selected ring (orange) */
  border-color: #FF7043;        /* Traffic Orange */
  border-width: 1px;            /* thicker */
}

/* optional: better click feel */
.theme-toggle button:active{transform:translateY(1px)}

/* Accessibility-friendly: show focus ring only for keyboard */
.theme-toggle button:focus{outline:none !important}
.theme-toggle button:focus-visible{
  box-shadow: 0 0 0 3px rgba(30,136,229,.35);
}


/* v12 mobile gutter fix: keep same reduced gutter from 620px down */
@media (max-width: 620px){
  .ddtd-hero .container,
  .ddtd-section .container,
  .ddtd-page .container,
  .site-header .container,
  .site-header .container.header-inner{
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 560px){
  .ddtd-hero .container,
  .ddtd-section .container,
  .ddtd-page .container,
  .site-header .container,
  .site-header .container.header-inner{
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}