/* ============================================================
   Handshake Design System — shared parts

   Alert, dialog, empty state and toast. These live apart from
   hs-components.css for one reason: that file restyles class names v1 already
   uses (.hs-btn, .hs-card, .hs-field, .hs-table …), so it cannot be loaded on
   a bridged page without repainting the product. These four collide with
   nothing, use only semantic tokens, and are what hs-ui.js composes — so both
   the design-system pages and the live app can load exactly this file and
   share one definition instead of two that drift.

   Load after hs-tokens.css. Pairs with css/hs-ui.js.
   ============================================================ */

/* ============================================================
   Alert / banner
   ============================================================ */
.hs-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-3);
  padding: var(--hs-space-4);
  border: var(--hs-size-hairline) solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-md);
  background: var(--hs-bg-sunken);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-normal);
}

.hs-alert__icon {
  flex: none;
  margin-block-start: 1px;
}

.hs-alert__title {
  font-family: var(--hs-font-ui);
  font-weight: var(--hs-weight-semibold);
}

.hs-alert--success {
  background: var(--hs-success-bg);
  border-color: var(--hs-success-border);
  color: var(--hs-success-fg);
}

.hs-alert--warning {
  background: var(--hs-warning-bg);
  border-color: var(--hs-warning-border);
  color: var(--hs-warning-fg);
}

.hs-alert--danger {
  background: var(--hs-danger-bg);
  border-color: var(--hs-danger-border);
  color: var(--hs-danger-fg);
}

.hs-alert--info {
  background: var(--hs-info-bg);
  border-color: var(--hs-info-border);
  color: var(--hs-info-fg);
}

/* ============================================================
   Modal / dialog
   ============================================================ */
.hs-dialog {
  width: min(560px, calc(100vw - var(--hs-space-8)));
  max-height: calc(100vh - var(--hs-space-16));
  padding: 0;
  border: var(--hs-size-hairline) solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-xl);
  /* Control weight, not card weight. On a bridged page --hs-bg-raised is
     remapped to the 0.72 card glass, and a modal that translucent sits muddy
     over its own scrim. A dialog is the most foreground thing on screen. */
  background: var(--hs-glass-control);
  backdrop-filter: var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  color: var(--hs-fg-primary);
  box-shadow: var(--hs-elevation-modal);
  overflow: hidden;
}

.hs-dialog::backdrop {
  background: var(--hs-bg-scrim);
  backdrop-filter: blur(2px);
}

.hs-dialog__header {
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-5);
  border-bottom: var(--hs-size-hairline) solid var(--hs-border-subtle);
}

.hs-dialog__body {
  padding: var(--hs-space-5);
  overflow-y: auto;
}

.hs-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--hs-space-2);
  padding: var(--hs-space-5);
  border-top: var(--hs-size-hairline) solid var(--hs-glass-rim);
  background: var(--hs-glass-sunken);
}

/* ============================================================
   Empty state
   ============================================================ */
.hs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-16) var(--hs-space-6);
  text-align: center;
  color: var(--hs-fg-tertiary);
}

.hs-empty__title {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-fg-primary);
}

.hs-empty__body {
  max-width: 44ch;
  font-size: var(--hs-text-sm);
  text-wrap: pretty;
}

/* ============================================================
   Runtime helper surfaces — see css/hs-ui.js

   Alert, dialog and empty were already specified above but nothing rendered
   them, because the app had no shared render layer. These are the few extra
   parts hs-ui.js composes: alert content, dialog title, empty actions, and
   the undo toast that replaces "are you sure?" for reversible actions.
   ============================================================ */

.hs-alert__content {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-1);
  min-width: 0;
}

.hs-alert__body,
.hs-alert__title {
  margin: 0;
  text-wrap: pretty;
}

.hs-alert__actions {
  margin: var(--hs-space-2) 0 0;
}

/* Status text carries the tone colour; the action inside must not, or a
   warning-coloured button reads as a second warning. */
.hs-alert .hs-btn {
  color: var(--hs-fg-primary);
}

.hs-dialog__title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-weight-semibold);
  letter-spacing: var(--hs-tracking-tight);
}

.hs-dialog__body p {
  margin: 0;
  color: var(--hs-fg-secondary);
  text-wrap: pretty;
}

.hs-dialog__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--hs-size-control-sm);
  height: var(--hs-size-control-sm);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-bg-sunken);
  color: var(--hs-fg-secondary);
}

.hs-dialog__icon--danger {
  background: var(--hs-danger-bg);
  color: var(--hs-danger-fg);
}

.hs-dialog__icon--warning {
  background: var(--hs-warning-bg);
  color: var(--hs-warning-fg);
}

.hs-empty__icon {
  display: grid;
  place-items: center;
  width: var(--hs-space-12);
  height: var(--hs-space-12);
  margin-block-end: var(--hs-space-1);
  border-radius: var(--hs-radius-circle);
  background: var(--hs-glass-recessed);
  color: var(--hs-fg-tertiary);
}

.hs-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hs-space-2);
  margin-block-start: var(--hs-space-2);
}

/* ---- Undo toast ---------------------------------------------------------
   Reversibility beats confirmation. A modal asks the user to predict whether
   they will regret something; an undo lets them find out. */
.hs-toast-host {
  position: fixed;
  z-index: var(--hs-layer-toast);
  inset-inline: 0;
  bottom: calc(var(--hs-space-6) + var(--hs-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hs-space-2);
  pointer-events: none;
}

.hs-toast {
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  max-width: min(440px, calc(100vw - var(--hs-space-8)));
  padding: var(--hs-space-3) var(--hs-space-3) var(--hs-space-3) var(--hs-space-5);
  border: var(--hs-size-hairline) solid var(--hs-glass-rim);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-glass-control);
  backdrop-filter: var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  box-shadow: var(--hs-elevation-overlay);
  color: var(--hs-fg-primary);
  font-size: var(--hs-text-sm);
  pointer-events: auto;
  animation: hs-toast-in var(--hs-duration-slow) var(--hs-ease-spring) both;
}

.hs-toast__msg {
  min-width: 0;
}

.hs-toast.is-leaving {
  animation: hs-toast-out var(--hs-duration-base) var(--hs-ease-in) both;
}

@keyframes hs-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes hs-toast-out {
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

@media (max-width: 899px) {
  .hs-toast-host {
    top: calc(
      var(--ws-browser-chrome-top, 0px) +
        var(--ws-mobile-topbar-h, calc(52px + env(safe-area-inset-top, 0px))) +
        8px
    );
    bottom: auto;
    inset-inline: 12px;
    align-items: stretch;
  }

  .hs-toast {
    max-width: none;
    width: 100%;
    border-radius: var(--hs-radius-lg, 12px);
    animation-name: hs-toast-in-top;
  }

  .hs-toast.is-leaving {
    animation-name: hs-toast-out-top;
  }

  @keyframes hs-toast-in-top {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes hs-toast-out-top {
    to { opacity: 0; transform: translateY(-6px) scale(0.98); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-toast,
  .hs-toast.is-leaving {
    animation-duration: 1ms;
  }
}