/* Shared finishing layer for the four standalone product demos. */
.fd-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1000;
  max-width: calc(100vw - 32px); transform: translate(-50%, 12px);
  border-radius: 9px; padding: 10px 14px; background: #141b20; color: #fff;
  box-shadow: 0 12px 36px rgba(20,27,32,.22); font: 600 13px/1.4 system-ui, sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.fd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.fd-modal-backdrop {
  position: fixed; inset: 0; z-index: 998; display: grid; place-items: center;
  padding: 20px; background: rgba(20,27,32,.42); backdrop-filter: blur(3px);
}
.fd-modal {
  width: min(560px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto;
  border: 1px solid #dce1e4; border-radius: 14px; padding: 22px; background: #fff;
  box-shadow: 0 24px 80px rgba(20,27,32,.24); color: #141b20;
}
.fd-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.fd-modal h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.fd-modal p { margin: 0 0 12px; color: #58636a; line-height: 1.55; }
.fd-modal ul { margin: 12px 0 18px; padding-left: 20px; color: #303a40; }
.fd-modal li + li { margin-top: 8px; }
.fd-modal button { min-width: 44px; min-height: 44px; border: 1px solid #dce1e4; border-radius: 8px; padding: 8px 14px; background: #fff; color: inherit; font-weight: 650; }
.fd-modal .fd-primary { border-color: #c8383f; background: #c8383f; color: #fff; }
.fd-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.fd-filter-panel { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.fd-filter-chip { min-height: 36px !important; border: 1px solid #dce1e4 !important; border-radius: 999px !important; padding: 6px 12px !important; background: #fff !important; }
.fd-filter-chip[aria-pressed="true"] { border-color: #c8383f !important; background: #fceced !important; color: #a72a32 !important; }
.fd-hidden { display: none !important; }
.fd-action-done { opacity: .58; }
.fd-action-done strong { text-decoration: line-through; }
.fd-action-done > span:first-child { background: #267457 !important; color: #fff !important; }

@media (max-width: 680px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  button, select, input { min-height: 44px; }
  .table-scroll { width: 100%; max-width: calc(100vw - 28px); overflow-x: auto; overscroll-behavior-inline: contain; }
  .table-scroll::after { content: "Swipe to see all columns"; position: sticky; left: 0; display: block; width: max-content; padding-top: 8px; color: #66717a; font-size: 11px; }
  header nav, body > div > nav { max-width: 100vw; overflow-x: auto; scrollbar-width: none; }
  header nav::-webkit-scrollbar, body > div > nav::-webkit-scrollbar { display: none; }
  ol.flex.items-start { width: 100%; overflow-x: auto; padding: 4px 0 10px; }
  ol.flex.items-start > li { min-width: 68px; }
  .grid-cols-3, .grid-cols-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .fd-modal { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-toast { transition: none; }
}