/* interactions.css — styling for the shared interaction library.
 * Copy this file VERBATIM into design/shared/ and link it after tokens.css and
 * components.css. It is token-driven (every value is a var(--token)), so it works
 * with any project palette without edits.
 *
 * Covers: icon sizing/alignment, input-with-icon, password affix, PIN cells,
 * and toasts. Pairs with interactions.js.
 */

/* ----------------------------------------------------------------- icons */
/* Every icon SVG carries .icon so it is always bounded and never overflows its
   container or stretches as a flex child. Size with .icon-sm / .icon-lg, never
   with ad-hoc width/height. */
.icon      { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block;
             vertical-align: -0.2em; }
.icon-sm   { width: 1rem;    height: 1rem; }
.icon-lg   { width: 1.5rem;  height: 1.5rem; }
.icon-xl   { width: 2rem;    height: 2rem; }
hero-icon  { display: inline-flex; }

/* ------------------------------------------------------- input with icon */
/* Wrap an input in .input-group to place a leading icon or a trailing control.
   The icon is centered on the field's vertical midline at any input height. */
.input-group { position: relative; display: block; }
.input-group .input { width: 100%; }

.input--with-icon { padding-left: 2.5rem; }
.input--has-affix { padding-right: 2.75rem; }

.input-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem; flex: none;
  color: var(--color-fg-muted); pointer-events: none;
}
.input-icon > svg { width: 100%; height: 100%; display: block; }

.input-affix {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-fg-muted); border-radius: var(--radius-sm);
}
.input-affix:hover { color: var(--color-fg); }
.input-affix:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }

/* --------------------------------------------------------------- PIN / OTP */
.pin { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pin-cell {
  width: 3rem; height: 3.5rem; padding: 0;
  text-align: center; font: 600 var(--text-xl)/1 var(--font-body);
  color: var(--color-fg); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.pin-cell:focus-visible {
  outline: 2px solid var(--color-ring); outline-offset: 1px;
  border-color: var(--color-ring);
}

/* ------------------------------------------------------------------ toast */
.toast-host {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  z-index: 1000; display: flex; flex-direction: column-reverse; gap: var(--space-2);
  width: max-content; max-width: calc(100vw - 2rem); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-width: 260px; max-width: 400px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); color: var(--color-fg);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast-icon  { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 1px; }
.toast-msg   { flex: 1; line-height: 1.5; }
.toast-close {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--color-fg-muted);
  padding: 0 2px; margin: -1px -4px 0 0;
}
.toast-close:hover { color: var(--color-fg); }

/* Type accents — a tinted surface plus a colored icon. No side-stripe border. */
.toast--success { background: color-mix(in oklch, var(--color-success) 12%, var(--color-surface)); }
.toast--success .toast-icon { color: var(--color-success); }
.toast--error   { background: color-mix(in oklch, var(--color-danger) 12%, var(--color-surface)); }
.toast--error   .toast-icon { color: var(--color-danger); }
.toast--warning { background: color-mix(in oklch, var(--color-warning) 18%, var(--color-surface)); }
.toast--warning .toast-icon { color: oklch(0.45 0.12 75); }
.toast--info    { background: color-mix(in oklch, var(--color-info) 12%, var(--color-surface)); }
.toast--info    .toast-icon { color: var(--color-info); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.01ms; transform: none; }
  .toast.is-in { transform: none; }
}

/* ------------------------------------------------------------------ modal */
/* A real dialog: backdrop + centered panel. Open/close is driven by
   interactions.js (data-modal-open / data-modal-close / openModal()). */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: oklch(0.2 0.03 260 / 0.45);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.modal-backdrop.is-open { opacity: 1; }
.modal-backdrop[hidden] { display: none; }

.modal {
  width: 100%; max-width: 480px; max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur) var(--ease-out);
}
.modal-backdrop.is-open .modal { transform: none; }
.modal--sm { max-width: 380px; }
.modal--lg { max-width: 720px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border); flex: none;
}
.modal-title { font-size: var(--text-lg); font-family: var(--font-display); }
.modal-text  { color: var(--color-fg-muted); font-size: var(--text-sm);
  margin: var(--space-2) 0 0; line-height: 1.5; }
.modal-x {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--color-fg-muted);
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
}
.modal-x:hover { background: var(--color-muted); color: var(--color-fg); }
.modal-x:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }

.modal-body { padding: var(--space-6); overflow-y: auto; }
.modal-body > .field:last-child { margin-bottom: 0; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--space-3); flex: none;
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { transition: opacity 0.01ms; }
  .modal { transform: none; }
}