/* ── View toggle — fixed bare-icon FAB, bottom-right ── */
#view-toggle {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--accent-readable);
  cursor: pointer;
  padding: 10px;
  transition: color var(--dur-fast) var(--ease-out);
}

.view-toggle__btn:hover,
.view-toggle__btn:focus-visible {
  color: var(--on-dark);
  outline: none;
}

.view-toggle__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.view-toggle__btn.is-active {
  color: var(--on-dark);
}


/* Material Symbols sizing — outlined at rest, filled when active */
.view-toggle__btn .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
  display: block;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  transition: font-variation-settings var(--dur-fast) var(--ease-out);
  /* Shadow lifts icons off the dark wood grain */
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.55);
}

.view-toggle__btn.is-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}