/* =============================================================
   FALMIS — FEEDBACK
   Requires falmis-tokens.css

   modal · confirm · toast · alert · tooltip

   All four overlays share one motion contract:
   enter with --fm-dur-slow and ease-out, leave with
   --fm-dur-base and ease-in. Arriving deserves attention.
   Leaving must never hold a person up.
   ============================================================= */

/* =============================================================
   SCRIM
   ============================================================= */

.fm-scrim{
  position:fixed;
  inset:0;
  z-index:var(--fm-z-modal);
  background:var(--fm-overlay-scrim);
  -webkit-backdrop-filter:blur(var(--fm-glass-blur-sm));
  backdrop-filter:blur(var(--fm-glass-blur-sm));
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fm-dur-base) var(--fm-ease-in);
}
.fm-scrim.is-open{
  opacity:1;
  pointer-events:auto;
  transition-duration:var(--fm-dur-slow);
  transition-timing-function:var(--fm-ease-out);
}

/* =============================================================
   MODAL
   ============================================================= */

.fm-modal{
  position:fixed;
  inset-block-start:50%;
  inset-inline-start:50%;
  z-index:calc(var(--fm-z-modal) + 1);
  width:min(520px,calc(100vw - var(--fm-space-8)));
  max-height:calc(100vh - var(--fm-space-16));
  display:flex;
  flex-direction:column;
  background:var(--fm-surface-3);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-xl);
  box-shadow:var(--fm-shadow-lg);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-46%) scale(.94);
  transition:opacity var(--fm-dur-base) var(--fm-ease-in),
             transform var(--fm-dur-base) var(--fm-ease-in);
}
[dir="rtl"] .fm-modal{ transform:translate(50%,-46%) scale(.94); }

.fm-modal.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
  transition-duration:var(--fm-dur-slow);
  transition-timing-function:var(--fm-ease-out);
}
[dir="rtl"] .fm-modal.is-open{ transform:translate(50%,-50%) scale(1); }

.fm-modal__head{
  display:flex;
  align-items:flex-start;
  gap:var(--fm-space-4);
  padding:var(--fm-space-6) var(--fm-space-6) var(--fm-space-4);
}
.fm-modal__title{
  flex:1;
  margin:0;
  font-size:var(--fm-text-xl);
  line-height:var(--fm-lh-xl);
  font-weight:var(--fm-weight-display);
  color:var(--fm-text-primary);
}
.fm-modal__body{
  padding-inline:var(--fm-space-6);
  padding-block-end:var(--fm-space-5);
  overflow-y:auto;
  font-size:var(--fm-text-base);
  line-height:var(--fm-lh-base);
  color:var(--fm-text-body);
}
.fm-modal__foot{
  display:flex;
  flex-wrap:wrap;
  gap:var(--fm-space-3);
  justify-content:flex-start;
  padding:var(--fm-space-5) var(--fm-space-6);
  border-block-start:1px solid var(--fm-border-subtle);
}
/* the confirming action sits at the reading edge, always first */

.fm-modal--sm{ width:min(400px,calc(100vw - var(--fm-space-8))); }
.fm-modal--lg{ width:min(760px,calc(100vw - var(--fm-space-8))); }

/* a destructive confirm carries the colour in the icon, not the
   whole dialog — a red panel reads as an error that happened */
.fm-modal__icon{
  flex:none;
  display:grid;
  place-content:center;
  width:44px; height:44px;
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border-accent);
  background:var(--fm-tint-violet);
  color:var(--fm-text-accent);
}
.fm-modal__icon--danger{ border-color:var(--fm-border-error); background:var(--fm-error-bg); color:var(--fm-error); }
.fm-modal__icon--success{ border-color:var(--fm-border-success); background:var(--fm-success-bg); color:var(--fm-success); }

/* on a phone the dialog becomes a sheet from the bottom */
@media (max-width:560px){
  .fm-modal{
    inset:auto 0 0 0;
    width:100%;
    max-height:88vh;
    border-radius:var(--fm-radius-xl) var(--fm-radius-xl) 0 0;
    transform:translateY(100%);
  }
  [dir="rtl"] .fm-modal{ transform:translateY(100%); }
  .fm-modal.is-open,
  [dir="rtl"] .fm-modal.is-open{ transform:translateY(0); }
  .fm-modal__foot .fm-btn{ flex:1 1 auto; }
}

/* =============================================================
   TOAST
   ============================================================= */

.fm-toasts{
  position:fixed;
  inset-block-end:var(--fm-space-5);
  inset-inline:var(--fm-space-5);
  z-index:var(--fm-z-toast);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--fm-space-2);
  pointer-events:none;
}
@media (min-width:641px){
  .fm-toasts{ align-items:flex-end; inset-inline-start:auto; max-width:420px; }
}

.fm-toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:var(--fm-space-3);
  width:100%;
  max-width:420px;
  padding:var(--fm-space-4);
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border);
  background:var(--fm-surface-3);
  box-shadow:var(--fm-shadow-lg);
  font-size:var(--fm-text-sm);
  color:var(--fm-text-body);
  opacity:0;
  transform:translateY(130%);
  transition:opacity var(--fm-dur-fast) var(--fm-ease-in),
             transform var(--fm-dur-base) var(--fm-ease-in);
}
.fm-toast.is-open{
  opacity:1;
  transform:translateY(0);
  transition-duration:var(--fm-dur-slow);
  transition-timing-function:var(--fm-ease-out);
}
.fm-toast b{ display:block; color:var(--fm-text-primary); font-weight:var(--fm-weight-medium); margin-block-end:2px; }
.fm-toast__x{
  margin-inline-start:auto;
  flex:none;
  border:none;
  background:none;
  color:var(--fm-text-muted);
  cursor:pointer;
  padding:2px;
}
.fm-toast__x:hover{ color:var(--fm-text-primary); }

.fm-toast--success{ border-color:var(--fm-border-success); }
.fm-toast--success .fm-toast__ico{ color:var(--fm-success); }
.fm-toast--error{ border-color:var(--fm-border-error); }
.fm-toast--error .fm-toast__ico{ color:var(--fm-error); }
.fm-toast--warning{ border-color:rgba(232,184,75,.40); }
.fm-toast--warning .fm-toast__ico{ color:var(--fm-warning); }
.fm-toast--info .fm-toast__ico{ color:var(--fm-info); }
.fm-toast__ico{ flex:none; }

/* =============================================================
   ALERT — inline, stays on the page
   ============================================================= */

.fm-alert{
  display:flex;
  align-items:flex-start;
  gap:var(--fm-space-3);
  padding:var(--fm-space-4);
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border);
  background:var(--fm-surface-2);
  font-size:var(--fm-text-sm);
  line-height:var(--fm-lh-sm);
  color:var(--fm-text-body);
}
.fm-alert b{ display:block; color:var(--fm-text-primary); font-weight:var(--fm-weight-medium); margin-block-end:2px; }
.fm-alert__ico{ flex:none; margin-block-start:1px; }
.fm-alert--success{ background:var(--fm-success-bg); border-color:var(--fm-border-success); }
.fm-alert--success .fm-alert__ico,.fm-alert--success b{ color:var(--fm-success); }
.fm-alert--warning{ background:var(--fm-warning-bg); border-color:rgba(232,184,75,.40); }
.fm-alert--warning .fm-alert__ico,.fm-alert--warning b{ color:var(--fm-warning); }
.fm-alert--error{ background:var(--fm-error-bg); border-color:var(--fm-border-error); }
.fm-alert--error .fm-alert__ico,.fm-alert--error b{ color:var(--fm-error); }
.fm-alert--info{ background:var(--fm-info-bg); border-color:rgba(96,165,250,.40); }
.fm-alert--info .fm-alert__ico,.fm-alert--info b{ color:var(--fm-info); }

/* =============================================================
   TOOLTIP — a label, never content a person needs
   ============================================================= */

.fm-tip{ position:relative; display:inline-flex; }
.fm-tip__bubble{
  position:absolute;
  inset-block-end:calc(100% + 8px);
  inset-inline-start:50%;
  transform:translateX(-50%) translateY(4px);
  z-index:var(--fm-z-tooltip);
  padding:6px var(--fm-space-3);
  border-radius:var(--fm-radius-sm);
  background:var(--fm-surface-3);
  border:1px solid var(--fm-border-strong);
  box-shadow:var(--fm-shadow-md);
  color:var(--fm-text-primary);
  font-size:var(--fm-text-xs);
  line-height:1.5;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fm-dur-fast) var(--fm-ease-out),
             transform var(--fm-dur-fast) var(--fm-ease-out);
}
[dir="rtl"] .fm-tip__bubble{ transform:translateX(50%) translateY(4px); }

.fm-tip:hover .fm-tip__bubble,
.fm-tip:focus-within .fm-tip__bubble{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
[dir="rtl"] .fm-tip:hover .fm-tip__bubble,
[dir="rtl"] .fm-tip:focus-within .fm-tip__bubble{ transform:translateX(50%) translateY(0); }

.fm-tip__bubble::after{
  content:"";
  position:absolute;
  inset-block-start:100%;
  inset-inline-start:calc(50% - 4px);
  border:4px solid transparent;
  border-block-start-color:var(--fm-border-strong);
}

@media (prefers-reduced-motion:reduce){
  html:not(.fm-motion-force) .fm-modal,
  html:not(.fm-motion-force) .fm-toast,
  html:not(.fm-motion-force) .fm-scrim{ transition-duration:1ms; }
}

/* =============================================================
   RULES
   · Escape closes every overlay. Clicking the scrim closes a
     modal unless data would be lost.
   · Focus moves into the dialog on open and returns to the
     trigger on close.
   · A toast is for something that already happened. A modal is
     for something about to happen. Never a toast for an error a
     person must act on — that is an alert, inline, next to the
     thing that failed.
   · Toasts stack to three. Beyond that, replace the oldest.
   · A tooltip may never hold information a person needs to
     complete a task. It does not exist on touch.
   · A destructive dialog colours its icon, not its panel. A red
     panel reads as an error that already happened.
   ============================================================= */