/* Menus, toasts, the dialog and the sign-in gate. */

/* ── menus: HTML popovers on the popover tokens, one at a time ── */
.dr-menu {
  position: absolute;
  z-index: 40;
  min-width: calc(4 * var(--space-16));
  max-width: calc(6 * var(--space-16));
  padding: var(--popover-pad);
  background: var(--color-popover);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  font-size: var(--text-body);
}
.dr-menu-item {
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  text-align: left;
  color: var(--color-text);
  cursor: default;
}
.dr-menu-item:hover, .dr-menu-item:focus-visible { background: var(--color-popover-hover); outline: none; }
.dr-menu-item:disabled { color: var(--color-text-dimmer); background: none; }
.dr-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-menu-check { position: relative; width: var(--space-3); height: var(--space-3); }
/* A check drawn, not typed (the condensed face has no good one). */
.dr-menu-check[data-on='true']::after { content: ''; position: absolute; left: 2px; top: 1px; width: var(--space-1); height: var(--space-2); border: solid var(--color-accent); border-width: 0 2px 2px 0; rotate: 45deg; }
.dr-menu-detail { font-family: var(--font-num); font-size: var(--text-small); color: var(--color-text-dimmer); font-variant-numeric: tabular-nums; }
.dr-menu-note { padding: var(--space-1) var(--space-2); font-size: var(--text-small); color: var(--color-text-dim); }
.dr-menu-sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--color-popover-border); }
.dr-menu-heading { padding: var(--space-1) var(--space-2); font-size: var(--text-label); color: var(--color-text-dimmer); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── toast ── */
.dr-toast-host { position: fixed; left: 50%; bottom: calc(var(--status-h) + var(--space-4)); z-index: 50; translate: -50% 0; }
.dr-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(var(--toast-w), calc(100vw - 2 * var(--space-4)));
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  background: var(--color-popover);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  color: var(--color-text);
}
.dr-toast[data-kind='error'] { border-color: var(--color-danger); }
.dr-toast-text { flex: 1 1 auto; min-width: 0; }
.dr-toast-action { flex: none; padding: 0 var(--space-2); height: var(--control-h-small); border-radius: var(--radius-control); color: var(--color-accent); }
.dr-toast-action:hover { background: var(--color-popover-hover); }

/* ── dialog ── */
.dr-dialog-layer { position: fixed; inset: 0; z-index: 45; }
.dr-dialog {
  position: absolute;
  top: var(--palette-top);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(var(--toast-w), calc(100% - 2 * var(--space-4)));
  padding: var(--space-4);
  background: var(--color-popover);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
}
.dr-dialog-title { margin: 0; font-size: var(--text-name); font-weight: 400; }
.dr-dialog-field { display: flex; flex-direction: column; gap: var(--space-1); }
.dr-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ── the sign-in gate ── */
.dr-gate { display: grid; place-items: center; min-height: 100%; padding: var(--space-4); background: var(--color-page); }
.dr-gate-card { display: flex; flex-direction: column; gap: var(--space-3); width: min(var(--toast-w), 100%); }
.dr-gate-users { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.dr-gate-user { justify-content: flex-start; height: var(--palette-input-h); font-size: var(--text-name); }
.dr-gate-initial { pointer-events: none; }
.dr-gate-error { color: var(--color-danger); }
/* (a link, styled as the button it is: it starts the sign-in) */
.dr-gate-signin { justify-content: center; margin-top: var(--space-2); height: var(--palette-input-h); text-decoration: none; }

/* A view that isn't built yet. */
.dr-soon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }