/* =====================================================================
   dusktype — modals, command palette, settings rows, toasts
   ===================================================================== */
.modal-bg {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 1rem 1rem;
  background: rgba(20, 17, 26, .72);
  animation: fadeIn 120ms ease-out;
}
.modal {
  width: min(35rem, 100%);
  background: var(--panel);
  border: 1px solid var(--sub-alt);
  border-radius: 0.625rem;
  box-shadow: 0 1.375rem 3.75rem rgba(0, 0, 0, .45);
  overflow: hidden;
  animation: dropIn 150ms ease-out;
}

/* ---------- command palette ---------- */
.palette input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--sub-alt);
  padding: 0.9375rem 1.125rem; color: var(--text);
  font: inherit; font-size: .95rem;
}
.palette input::placeholder { color: var(--sub); }
.plist { max-height: min(25rem, 56vh); overflow: auto; padding: 0.375rem; }
.pitem {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  color: var(--sub); font-size: .85rem; cursor: pointer;
  transition: background-color 80ms, color 80ms;
}
.pitem mark { background: none; color: var(--text); }
.pitem.sel { background: var(--sub-alt); color: var(--text); }
.pitem.sel mark { color: var(--main); }
.pitem.danger.sel { color: var(--error); }
.pitem .h { font-size: .7rem; color: var(--sub); }
.pitem .h.on { color: var(--main); }
.pempty { padding: 0.75rem; color: var(--sub); font-size: .85rem; }

/* ---------- settings + shortcuts modals ---------- */
.mhead { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.875rem 0.75rem 1.125rem; border-bottom: 1px solid var(--sub-alt); color: var(--text); }
.mbody { padding: 0.375rem 1.125rem 0.875rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 0.875rem; padding: 0.6875rem 0; border-bottom: 1px solid var(--sub-alt); }
.row:last-child { border-bottom: 0; }
.row .t { color: var(--text); font-size: .85rem; }
.row .d { color: var(--sub); font-size: .7rem; }
.row .seg { background: var(--bg); }
.row .seg button.active { background: var(--panel); }
.toggle { flex: none; width: 2.5rem; height: 1.375rem; border-radius: 62.4375rem; background: var(--sub-alt); position: relative; transition: background-color var(--t); }
.toggle::after { content: ""; position: absolute; left: 0.1875rem; top: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sub); transition: transform var(--t), background-color var(--t); }
.toggle[aria-pressed="true"] { background: var(--main); }
.toggle[aria-pressed="true"]::after { transform: translateX(1.125rem); background: var(--text); }
/* scale slider */
.range { flex: none; display: flex; align-items: center; gap: 0.625rem; }
.range input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 9rem; height: 0.375rem; margin: 0;
  border-radius: 62.4375rem; background: var(--sub-alt);
  cursor: pointer;
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--main); border: 0;
  transition: transform var(--t);
}
.range input[type="range"]::-moz-range-thumb {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--main); border: 0;
  transition: transform var(--t);
}
.range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
.range-val { min-width: 3.2em; text-align: right; color: var(--text); font-size: .8rem; transition: color var(--t); }
.range-val:hover { color: var(--main); }

.krow { display: flex; justify-content: space-between; gap: 0.875rem; padding: 0.5rem 0; border-bottom: 1px solid var(--sub-alt); font-size: .8rem; }
.krow:last-child { border-bottom: 0; }
.krow span:last-child { text-align: right; }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 1.375rem; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--sub-alt); color: var(--text); padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-size: .8rem; animation: dropIn 150ms ease-out; transition: opacity 180ms; }
.toast.err { color: var(--error); }
.toast.out { opacity: 0; }