/* ui-affordances.css — extracted from ui-affordances.js (Design System Phase 6).
 *
 * Styles for the click-to-confirm pattern, toast notifications, and inline
 * prompt form rendered by ui-affordances.js. Sources its colors from the
 * design-system tokens so it tracks theme switches automatically.
 *
 * Loaded alongside the JS:
 *   <link rel="stylesheet" href="/js/lib/ui-affordances.css?v=X.Y.Z">
 *   <script src="/js/lib/ui-affordances.js?v=X.Y.Z"></script>
 */

/* ── Click-to-confirm button outline ─────────────────────────────── */
.ll-confirming {
  box-shadow: 0 0 0 2px rgba(var(--ll-error-rgb), 0.45);
}

[data-ll-cancel] {
  margin-left: var(--ll-space-1);
}

/* ── Toast notification ──────────────────────────────────────────── */
.ll-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.85rem 1.05rem;
  font-size: var(--ll-text-sm);
  line-height: var(--ll-line-normal);
  border-radius: var(--ll-radius-md);
  max-width: 380px;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  z-index: 99999;
  /* Slightly translucent + backdrop-blur so toasts read well even
     over busy pages (signal listings, calendars, etc.) without
     obscuring content beneath. */
  background: rgba(20, 26, 36, 0.92);
  color: var(--ll-text);
  border: 1px solid var(--ll-border-subtle);
  border-left: 3px solid var(--ll-accent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  font-family: var(--ll-font-family);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
[data-theme="app"] .ll-toast {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.18);
}

.ll-toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ll-toast--ok    { border-left-color: var(--ll-success); }
.ll-toast--err   { border-left-color: var(--ll-error); }
.ll-toast--info  { border-left-color: var(--ll-info); }
.ll-toast--warn  { border-left-color: var(--ll-warning); }

/* ── Inline prompt form ──────────────────────────────────────────── */
.ll-inline-prompt {
  margin: var(--ll-space-2) 0 var(--ll-space-1);
  padding: var(--ll-space-3) var(--ll-space-4);
  background: var(--ll-bg);
  border: 1px solid rgba(var(--ll-accent-rgb), 0.35);
  border-radius: var(--ll-radius-md);
  display: grid;
  gap: var(--ll-space-2);
  animation: ll-prompt-in 160ms ease-out;
  max-width: 480px;
  font-family: var(--ll-font-family);
  color: var(--ll-text);
}

.ll-inline-prompt__title {
  font-size: var(--ll-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ll-accent);
  margin-bottom: 0.1rem;
}

.ll-inline-prompt__body {
  font-size: var(--ll-text-sm);
  color: var(--ll-text);
  line-height: var(--ll-line-normal);
  opacity: 0.85;
}

.ll-inline-prompt__fields {
  display: grid;
  gap: var(--ll-space-2);
}

.ll-inline-prompt__field {
  display: grid;
  gap: var(--ll-space-1);
}

.ll-inline-prompt__label {
  font-size: var(--ll-text-xs);
  color: var(--ll-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ll-inline-prompt input,
.ll-inline-prompt select,
.ll-inline-prompt textarea {
  background: var(--ll-bg-soft);
  color: var(--ll-text);
  border: 1px solid var(--ll-border-subtle);
  border-radius: var(--ll-radius-sm);
  padding: var(--ll-space-2) var(--ll-space-3);
  font: inherit;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.ll-inline-prompt input:focus,
.ll-inline-prompt select:focus,
.ll-inline-prompt textarea:focus {
  outline: none;
  border-color: var(--ll-accent);
  box-shadow: var(--ll-focus-ring);
}

.ll-inline-prompt__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ll-space-1);
}

.ll-inline-prompt__choice {
  cursor: pointer;
  font: inherit;
  font-family: inherit;
  padding: var(--ll-space-1) var(--ll-space-3);
  border-radius: var(--ll-radius-sm);
  border: 1px solid var(--ll-border-subtle);
  background: var(--ll-bg-soft);
  color: var(--ll-text);
  font-size: var(--ll-text-sm);
  font-weight: 500;
  transition: background var(--ll-duration-fast), border-color var(--ll-duration-fast), color var(--ll-duration-fast);
}

.ll-inline-prompt__choice:hover {
  border-color: var(--ll-accent);
  color: var(--ll-accent);
}

.ll-inline-prompt__choice.selected {
  border-color: var(--ll-accent);
  color: var(--ll-accent);
  background: rgba(var(--ll-accent-rgb), 0.1);
}

.ll-inline-prompt__actions {
  display: flex;
  gap: var(--ll-space-1);
  justify-content: flex-end;
  margin-top: 0.15rem;
}

@keyframes ll-prompt-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light theme is already covered automatically by token resolution;
   no hardcoded overrides needed. */