/*
  Gener8 style kit — dialogs, messages and the saved view note.

  .dlg     centred dialog on the reach line (Save view)
  .toast   short message at the top ("Link copied")
  .vnote   a saved view's note, shown at the top while the view is open
*/

/* ---- Dialog ------------------------------------------------------------------- */
.dlg {
  position: absolute; left: 50%; top: var(--reach); transform: translate(-50%, -50%); z-index: 8;
  width: min(92vw, calc(var(--u) * 50)); max-height: 92vh; overflow: auto;
  padding: calc(var(--u) * 2.4); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.1);
}
.dlg .title { margin-bottom: calc(var(--u) * .4); }
.dlg label { display: flex; flex-direction: column; gap: calc(var(--u) * .4); font-size: calc(var(--tu) * 1.2); font-weight: 400; color: var(--muted); }
.dlg input[type=text], .dlg textarea, .dlg select {
  font: inherit; font-size: calc(var(--tu) * 1.5); color: var(--ink);
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  user-select: text; -webkit-user-select: text;
}
.dlg select option { color: #17150f; }
.dlg textarea { min-height: calc(var(--u) * 6); resize: vertical; }
.dlg .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); }
.dlg .checks { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * .6); }
.dlg .check { flex-direction: row; align-items: center; gap: calc(var(--u) * .8); color: var(--ink); font-size: calc(var(--tu) * 1.35); font-weight: 400; }
.dlg .check input { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); accent-color: var(--accent); }
.dlg .btns { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * .6); }
.dlg .btns .btn { flex: 1 1 auto; width: auto; justify-content: center; }
.dlg .err { color: var(--danger); font-size: calc(var(--tu) * 1.3); }

/* Saved link: QR code beside the link */
.result { display: flex; gap: calc(var(--u) * 1.6); align-items: center; }
.result .qr { background: #fff; padding: 8px; border-radius: var(--r-sm); flex: none; }
.result .qr img, .result .qr canvas { display: block; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.result .lnk { font-family: var(--font-mono); font-size: calc(var(--tu) * 1.4); word-break: break-all; user-select: text; -webkit-user-select: text; }
.result .hint { color: var(--muted); font-size: calc(var(--tu) * 1.25); margin-top: calc(var(--u) * .6); }

/* ---- Toast -------------------------------------------------------------------- */
.toast {
  position: absolute; left: 50%; top: calc(var(--u) * 4); transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.8); border-radius: 99px;
  font-size: calc(var(--tu) * 1.35); font-weight: 400;
  transition: opacity .3s;
}
/* Small accent dot in front of every message */
.toast::before { content: ''; width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; background: var(--accent); flex: none; }

/* ---- Saved view note ----------------------------------------------------------- */
.vnote {
  position: absolute; left: 50%; top: calc(var(--u) * 3); transform: translateX(-50%); z-index: 4;
  max-width: min(70vw, calc(var(--u) * 70));
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.2); border-radius: var(--r-lg);
  font-family: var(--font-display); font-size: calc(var(--tu) * 1.8); line-height: 1.4; text-align: center;
}