/* ── 3. Sidebar toggles card ── */
#dsb-toggles-card #ddnFloat {
  position: static !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Day / Night — full-width pill, T2 */
#dsb-toggles-card .ddnToggle {
  width: 100% !important;
  height: 40px !important;
  box-sizing: border-box;
}

#dsb-toggles-card .ddnThumb {
  width: 30px !important;
  height: 30px !important;
  top: 4px !important;
  left: 4px !important;
}

#dsb-toggles-card .ddnToggle[aria-checked="true"] .ddnThumb {
  left: calc(100% - 34px) !important;
}

#dsb-toggles-card .ddnIconSun,
#dsb-toggles-card .ddnIconMoon {
  width: 14px !important;
  height: 14px !important;
}

#dsb-toggles-card .ddnToggle::after {
  content: 'Day';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: var(--fs-t2);
  font-weight: 600;
  color: rgba(30, 30, 40, .65);
  pointer-events: none;
  letter-spacing: .01em;
}

#dsb-toggles-card .ddnToggle[aria-checked="true"]::after {
  content: 'Night';
  color: rgba(245, 207, 107, .92);
  right: auto;
  left: 14px;
}

#dsb-toggles-card .linkToggle::after {
  content: 'Linkage Off';
  color: rgba(30, 30, 40, .5);
}

#dsb-toggles-card .linkToggle[aria-checked="true"]::after {
  content: 'Linkage On';
  color: #fff;
  right: auto;
  left: 14px;
}

#dsb-toggles-card .gridToggle::after {
  content: 'Grids Off';
  color: rgba(30, 30, 40, .5);
}

#dsb-toggles-card .gridToggle[aria-checked="true"]::after {
  content: 'Grids On';
  color: #fff;
  right: auto;
  left: 14px;
}

/* Typology buttons — full width, always visible pill, T2, no hover expand */
#dsb-toggles-card #typoToggles {
  margin-top: 0 !important;
  gap: 6px !important;
}

/* Always full-width pill — no hover shrink/expand */
#dsb-toggles-card .typo-btn,
#dsb-toggles-card .typo-btn:hover {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  background: #fff !important;
  border: 1.5px solid rgba(30, 30, 40, .14) !important;
  box-shadow: 0 2px 8px rgba(30, 30, 40, .18), 0 1px 3px rgba(30, 30, 40, .10) !important;
  transition: background 320ms, border-color 320ms !important;
}

/* ON state: dark pill, no glow */
#dsb-toggles-card .typo-btn.on,
#dsb-toggles-card .typo-btn.on:hover {
  background: #1a1a22 !important;
  border-color: rgba(30, 30, 40, .28) !important;
  box-shadow: none !important;
}

#dsb-toggles-card .typo-thumb {
  width: 28px !important;
  height: 28px !important;
  top: 5px !important;
  left: 5px !important;
  transition: left 360ms cubic-bezier(.4, 0, .2, 1), background 320ms, border-color 320ms, color 320ms !important;
}

/* Thumb slides to RIGHT when ON */
#dsb-toggles-card .typo-btn.on .typo-thumb {
  left: calc(100% - 33px) !important;
}

#dsb-toggles-card .typo-icon {
  width: 14px !important;
  height: 14px !important;
}

/* Label: mirrors day/night — OFF: thumb left → label fills right region; ON: thumb right → label fills left region */
#dsb-toggles-card .typo-label {
  position: absolute !important;
  left: 38px !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  opacity: 1 !important;
  transition: left 360ms cubic-bezier(.4, 0, .2, 1), right 360ms cubic-bezier(.4, 0, .2, 1) !important;
  font-size: var(--fs-t2) !important;
  font-weight: 600 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
  color: rgba(30, 30, 40, .72) !important;
}

/* ON: thumb moved to right — label flips to left region, turns light */
#dsb-toggles-card .typo-btn.on .typo-label {
  left: 14px !important;
  right: 38px !important;
  text-align: left !important;
  color: rgba(255, 255, 255, .85) !important;
}

/* ON thumb: white/light so it shows against dark pill background */
#dsb-toggles-card .typo-btn.on .typo-thumb {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Description line below each typology toggle */
.typo-desc {
  font-family: var(--font-ui);
  font-size: var(--fs-t3);
  color: rgba(30, 30, 40, .52);
  line-height: 1.5;
  padding: 4px 8px 6px 8px;
  margin-top: -2px;
  word-break: break-word;
}

/* Legend bar — match exact D_CLS_COLORS */
.dlgBar {
  background: linear-gradient(to right, #d7191c, #e85b3b, #f99d59, #fec980, #ffedaa, #ecf7b9, #c7e8ad, #9dd3a6, #64abb0, #2b83ba) !important;
}


/* ═══════════════════════════════════════════════════════════════
 *  DISEENI WEB DS v1  ·  FULL SYSTEM OVERRIDE
 *  Rules: pill buttons, fixed layout heights, sand-dark lines,
 *         navy text on cool, deep navy as standard button color.
 * ══════════════════════════════════════════════════════════════ */