.sn-theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  padding: var(--s-2);
  min-height: 36px;
  min-width: 36px;
}
.sn-theme-toggle:hover {
  background: var(--bg-muted);
  color: var(--fg-strong);
}

/* ============ Utility — sn-hide-mobile (≤767px) ============ */
@media (max-width: 767px) {
  .sn-hide-mobile { display: none !important; }
}

/* ============ D1.5/D2.6 — Tablet: username truncation in header ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .sn-user-pill span.sn-hide-mobile {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
  }
  /* #444/#453: ensure the user-pill itself doesn't overflow the header actions area */
  .sn-user-pill { max-width: 220px; min-width: 0; }
}

/* ============ D2.9 — Tablet sidebar: tooltip flyout for icon-only nav items ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .sn-nav-item { position: relative; }
  .sn-nav-label {
    display: block !important;
    position: absolute; left: 60px; top: 50%; transform: translateY(-50%);
    background: var(--fg-strong); color: var(--fg-on-dark);
    padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap;
    margin-left: 4px; z-index: 200; pointer-events: none;
    opacity: 0; transition: opacity .12s;
  }
  .sn-nav-item:hover .sn-nav-label,
  .sn-nav-item:focus-within .sn-nav-label { opacity: 1; }
  .sn-nav-section { display: none; }
}