@media (max-width: 600px) {
  body {
    padding: 0.5rem 1rem;
  }

  .header-content h1 {
    font-size: 1em;
  }

  .divider-container {
    gap: 0.75rem; /* Reduces the gap between lines and buttons */
  }

  /* Shrink the Tab Controller Width & Padding */
  .toggle-wrapper {
    width: 210px; /* Reduced from 280px */
    padding: 2px; /* Thinner border padding */
  }

  /* Drop label font sizes so text fits the smaller tabs */
  .toggle-wrapper label {
    font-size: 0.75rem; /* Reduced from 0.85rem */
    padding: 4px 0; /* Thinner padding for a shorter pill height */
  }

  /* Correct the slider height for the new smaller container padding */
  .toggle-slider {
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
  }

  /* Shrink the Light/Dark Mode Button */
  .theme-toggle {
    width: 28px; /* Reduced from 34px */
    height: 28px; /* Reduced from 34px */
  }

  /* Scale down the SVGs inside the theme button to match */
  .theme-toggle svg {
    transform: scale(0.85);
  }
}

/* Base Utility State: Hide Mobile instance unless view limits are breached */
.theme-toggle.mobile-only {
  display: none;
}

@media (max-width: 480px) {
  /* 1. Remove the line dividers and the current time display */
  .header-divider,
  #current-time {
    display: none !important;
  }

  /* 2. Add structural breathing margin to bottom of header-content */
  .header-content {
    margin-bottom: 0.5rem;
  }

  /* 3. Hide the desktop toggle structure entirely */
  .theme-toggle.desktop-only {
    display: none !important;
  }

  /* 4. Display mobile theme-toggle cleanly inside the slider wrapper panel */
  .theme-toggle.mobile-only {
    display: flex !important;
    background-color: transparent; /* Seamless blend inside the main pill */
    z-index: 3;
    width: 26px;
    height: 26px;
    margin-right: 4px;
    box-shadow: none;
  }

  /* 5. Dynamically expand wrapper grid frame to cleanly accept 4 elements */
  .toggle-wrapper {
    width: 250px;
    justify-content: space-between;
  }

  /* 6. Adapt slider layout math percentage definitions to handle 4 elements */
  .toggle-slider {
    width: calc(
      (100% - 38px) / 3
    ); /* Locks slider tracking geometry cleanly away from the static button */
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
  }
}