/* The slot dialog. Every label is a question, so .dlg-q is the only
   label style in here. */

.dlg {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.dlg-scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.32); }

.dlg-box {
  position: relative;
  width: min(420px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.dlg-field { display: flex; flex-direction: column; gap: 0.4rem; border: none; padding: 0; margin: 0; }
.dlg-q { font-size: 0.85rem; font-weight: 500; letter-spacing: -0.01em; }

.dlg-input {
  font: inherit;
  font-weight: 300;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.dlg-input:focus-visible { outline: 2px solid var(--text); outline-offset: -1px; }

.dlg-lengths { display: flex; flex-direction: column; gap: 0.25rem; }
.dlg-radio { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 300; }
.dlg-times { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.dlg-time { flex: 1; }

.dlg-colours { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.dlg-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--c);
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: transform 0.12s;
}
.dlg-swatch:hover { transform: scale(1.12); }
.dlg-swatch.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.dlg-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.dlg-check { display: flex; align-items: center; gap: 0.5rem; }

.dlg-ask { font-size: 1rem; margin: 0 0 0.2rem; }
.dlg-error { font-size: 0.8rem; color: var(--c-dept); margin: 0; }
.dlg-switch { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.linkish {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.linkish:hover { color: var(--text); }

.dlg-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.2rem; }
.dlg-actions .btn-danger { margin-right: auto; }