/* Live app mockup component for freightscout.ai.
 *
 * One component, used in every product slot on the site. It draws a browser-style frame in the
 * site's own tokens and puts the redesign's real reference HTML inside it, in an iframe at the
 * native 1440 layout, scaled to the slot. Real DOM, so the text stays sharp at any size and at
 * any zoom. That is the whole point of it.
 *
 * Every selector here is prefixed fsm- so that nothing can collide with the site's own classes,
 * and in particular so that _build/check-nav.mjs never sees a .nav or .nlinks rule from this file.
 *
 * Colours come from the page's own :root. The fallbacks are the same token values, for the two
 * legacy pages whose stylesheets predate them.
 */

.fsm {
  margin: 0;
  position: relative;
}

.fsm-frame {
  border: 1px solid var(--line, #e8eaf0);
  border-radius: 14px;
  background: var(--paper, #fff);
  box-shadow: 0 1px 2px rgba(11, 15, 25, .04), 0 22px 50px -28px rgba(11, 15, 25, .22);
  overflow: hidden;
}

/* Browser chrome. Decoration, so it is hidden from assistive technology: the frame's own
   accessible name says which app page this is. */
.fsm-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  background: var(--mist, #f7f8fa);
  border-bottom: 1px solid var(--line, #e8eaf0);
}

.fsm-tl {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d9dde6;
  flex: 0 0 auto;
}

.fsm-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--s7, #6a7284);
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The stage. Its height is set by script from the measured region, so the poster and the live
   frame occupy exactly the same box and nothing reflows when one replaces the other. */
.fsm-stage {
  position: relative;
  overflow: hidden;
  background: var(--paper, #fff);
}

.fsm-poster {
  display: block;
  width: 100%;
  height: auto;
}

/* While the live frame is up the poster stays in the box underneath it, so a slow frame never
   shows a white hole and the box never changes height. */
.fsm.is-live .fsm-poster {
  visibility: hidden;
}

.fsm-iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  transform-origin: 0 0;
  background: #fff;
  /* No pointer reaches a document until the component has made it inert (live-mock.js, quiet). */
  pointer-events: none;
}

.fsm.is-quiet .fsm-iframe {
  pointer-events: auto;
}

/* The hotspot. A real button, positioned over the thing worth clicking: the keyboard's tab stop
   and the pulsing dot. The pointer passes through it to the live element underneath, which is the
   only thing in the document that hovers and takes a click. It stops after the first click and it
   never animates for a visitor who asked for less motion. */
.fsm-hot {
  position: absolute;
  z-index: 3;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  pointer-events: none;
  border-radius: 8px;
  outline-offset: 2px;
}

.fsm-hot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 14px;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 999px;
  background: var(--accent, #2f5fe6);
  box-shadow: 0 0 0 0 rgba(47, 95, 230, .55);
  animation: fsm-pulse 2.1s ease-out infinite;
}

.fsm-hot:focus-visible {
  outline: 2px solid var(--accent, #2f5fe6);
}

@keyframes fsm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 95, 230, .5); }
  70% { box-shadow: 0 0 0 16px rgba(47, 95, 230, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 95, 230, 0); }
}

/* The Back chip, shown only once a click state is open. */
.fsm-back {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #0b0f19);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line, #e8eaf0);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 15, 25, .1);
}

.fsm.is-open .fsm-back {
  display: inline-flex;
}

.fsm-back:hover {
  background: #fff;
  border-color: #d4d8e2;
}

.fsm-back:focus-visible {
  outline: 2px solid var(--accent, #2f5fe6);
  outline-offset: 2px;
}

/* Caption under a frame, when a slot wants one. */
.fsm-cap {
  font-size: 12.5px;
  color: var(--s7, #6a7284);
  margin-top: 9px;
  line-height: 1.5;
}

/* Under 768 a scaled 1440 layout is unreadable, so the phone gets the crop as an image and a tap
   opens the full mockup in a sheet it can pan. */
.fsm-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: transparent;
}

.fsm-openlabel {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0b0f19);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line, #e8eaf0);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 2px 10px rgba(11, 15, 25, .1);
}

@media (max-width: 767px) {
  .fsm-open {
    display: block;
  }
}

/* The full-screen sheet. One per page, created on demand. */
.fsm-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 15, 25, .55);
  display: none;
  flex-direction: column;
}

.fsm-sheet[open],
.fsm-sheet.is-on {
  display: flex;
}

.fsm-sheet-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper, #fff);
  border-bottom: 1px solid var(--line, #e8eaf0);
}

.fsm-sheet-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s7, #6a7284);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsm-sheet-close {
  flex: 0 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #0b0f19);
  background: var(--mist, #f7f8fa);
  border: 1px solid var(--line, #e8eaf0);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.fsm-sheet-body {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.fsm-sheet-body iframe {
  display: block;
  border: 0;
  width: 1440px;
  height: 900px;
  /* No pointer reaches the document until the component has made it inert (live-mock.js, quiet). */
  pointer-events: none;
}

.fsm-sheet.is-quiet .fsm-sheet-body iframe {
  pointer-events: auto;
}

.fsm-sheet-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--s7, #6a7284);
  padding: 8px 14px;
  background: var(--paper, #fff);
  border-top: 1px solid var(--line, #e8eaf0);
}

/* A visitor who asked for less motion gets the hotspot as a plain dot. */
@media (prefers-reduced-motion: reduce) {
  .fsm-hot::after {
    animation: none;
    box-shadow: 0 0 0 4px rgba(47, 95, 230, .18);
  }
}

/* Two mockups side by side, for a slot the map gives two screens to. */
.fsm-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 26px;
  align-items: start;
}

@media (max-width: 767px) {
  .fsm-two {
    grid-template-columns: 1fr;
  }
}

/* Inside a demorow the mockup takes the column the drawn panel used to hold. */
.demorow > .fsm {
  min-width: 0;
}

/* A slot the map calls half. A panel or a rail is a tall, narrow thing and reads best at the size
   the app draws it, so the frame is sized to the screen rather than the screen to the frame.
   The hard number is on each figure: half its poster's natural width, which keeps every PNG at
   two device pixels per CSS pixel and never upscaled. */
.fsm-half {
  max-width: 560px;
}

.fsm-center {
  margin-left: auto;
  margin-right: auto;
}

/* A thumbnail: the screen at card size, opened whole in a sheet on click. Used on the home page's
   leak cards and department cards, where four live frames side by side would each be too small to
   read and the point is to say "there is a real screen behind this", then show it. */
.fsm-thumb {
  max-width: 100%;
  margin-top: 16px;
  cursor: pointer;
}

.fsm-thumb .fsm-stage {
  max-height: 210px;
}

.fsm-thumb .fsm-open {
  display: block;
}

.fsm-thumb .fsm-frame {
  transition: box-shadow .16s ease, transform .16s ease;
}

.fsm-thumb:hover .fsm-frame {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(11, 15, 25, .04), 0 26px 56px -28px rgba(11, 15, 25, .3);
}