/* Flow Player — TurnerSoft house style.
   Light, technical, mono-accented: tab pills, a real browser window with traffic
   lights and a LIVE badge, caption underneath. Zero dependencies.
   Re-brand per site by overriding the six surface/ink tokens below. */

.fp {
  --fp-canvas: #faf9f7;
  --fp-surface: #ffffff;
  --fp-surface-2: #f5f4f1;
  --fp-surface-3: #efece7;
  --fp-ink: #131210;
  --fp-ink-2: #57534e;
  --fp-ink-3: #8a8580;
  --fp-line: #e8e4de;
  --fp-line-2: #dcd7cf;
  --fp-amber: #f59e0b;
  --fp-orange: #ea580c;
  --fp-ok: #166534;
  --fp-ok-bright: #22c55e;
  --fp-font: 'Satoshi', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fp-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  --fp-ease: cubic-bezier(.22, 1, .36, 1);

  font-family: var(--fp-font);
  color: var(--fp-ink);
  max-width: 760px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---------- step tabs (TurnerSoft pill tabs) ---------- */
.fp-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 14px; align-items: center;
}
.fp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--fp-ink-2); background: #fff;
  border: 1px solid var(--fp-line-2); border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
  transition: background .22s var(--fp-ease), color .22s var(--fp-ease),
              border-color .22s var(--fp-ease), transform .22s var(--fp-ease);
}
.fp-chip:hover { border-color: var(--fp-amber); color: var(--fp-ink); transform: translateY(-1px); }
.fp-chip.on { background: var(--fp-ink); border-color: var(--fp-ink); color: #fff; }
.fp-chip .fp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fp-amber); opacity: .5; transition: opacity .2s, background .2s;
}
.fp-chip.done .fp-dot { background: var(--fp-ok-bright); opacity: 1; }
.fp-chip.on .fp-dot { background: #4ade80; opacity: 1; }
.fp-chip .fp-n { font-family: var(--fp-mono); font-size: .72rem; opacity: .65; }

.fp-pause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--fp-line-2); padding: 0;
  transition: border-color .2s, transform .2s;
}
.fp-pause:hover { border-color: var(--fp-amber); transform: translateY(-1px); }
.fp-pause svg { width: 11px; height: 11px; fill: var(--fp-ink-2); }
.fp-pause .fp-ic-play { display: none; }
.fp-pause.paused .fp-ic-play { display: block; }
.fp-pause.paused .fp-ic-pause { display: none; }

/* ---------- browser window ---------- */
.fp-win {
  border: 1px solid var(--fp-line-2);
  border-radius: 12px;
  background: var(--fp-surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(19,18,16,.04), 0 18px 44px -26px rgba(19,18,16,.35);
}
.fp-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--fp-surface-2);
  border-bottom: 1px solid var(--fp-line);
}
.fp-dot-r, .fp-dot-y, .fp-dot-g { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fp-dot-r { background: #ff5f57; }
.fp-dot-y { background: #febc2e; }
.fp-dot-g { background: #28c840; }
.fp-url {
  flex: 1; margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fp-mono); font-size: .76rem; color: var(--fp-ink-2);
  background: #fff; border: 1px solid var(--fp-line); border-radius: 6px; padding: 4px 10px;
}
.fp-url b { color: var(--fp-ink); font-weight: 600; }
.fp-live {
  flex: none; font-family: var(--fp-mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  color: var(--fp-ok); background: #eaf6ef; border: 1px solid #cbe7d7;
  border-radius: 4px; padding: 3px 7px;
}
.fp-win--kiosk .fp-bar { background: var(--fp-ink); border-bottom-color: var(--fp-ink); }
.fp-win--kiosk .fp-url { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #d8d4cd; }
.fp-win--kiosk .fp-url b { color: #fff; }
.fp-win--phone { max-width: 330px; margin: 0 auto; border-radius: 24px; padding: 5px; }
.fp-win--phone .fp-bar { padding: 7px 10px 5px; background: transparent; border-bottom: 0; justify-content: center; }
.fp-win--phone .fp-notch { width: 70px; height: 5px; border-radius: 3px; background: var(--fp-line-2); }
.fp-win--phone .fp-url, .fp-win--phone .fp-live { display: none; }

/* ---------- scenes ---------- */
.fp-viewport { position: relative; height: 376px; background: var(--fp-canvas); overflow: hidden; }
.fp-scene {
  position: absolute; inset: 0; padding: 16px 18px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .34s ease, transform .38s var(--fp-ease);
  pointer-events: none; display: flex; flex-direction: column; gap: 12px;
}
.fp-scene.on { opacity: 1; transform: none; pointer-events: auto; }
.fp-scene.past { opacity: 0; transform: translateY(-8px); }

/* cursor */
.fp-cursor {
  position: absolute; top: 0; left: 0; width: 22px; height: 22px; margin: -3px 0 0 -3px;
  z-index: 40; pointer-events: none; opacity: 1;
  transition: transform .55s cubic-bezier(.3,.9,.25,1), opacity .25s ease;
  filter: drop-shadow(0 2px 3px rgba(19,18,16,.25));
}
.fp-cursor.off { opacity: 0; }
.fp-cursor svg { width: 100%; height: 100%; fill: var(--fp-ink); stroke: #fff; stroke-width: 1.4px; }
.fp-ripple { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 39; pointer-events: none;
  transition: transform .55s cubic-bezier(.3,.9,.25,1); }
.fp-ripple.go::after {
  content: ""; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px;
  border-radius: 50%; border: 2px solid var(--fp-orange); opacity: 0;
  animation: fp-tap .7s ease-out forwards;
}
@keyframes fp-tap { from { transform: scale(.25); opacity: .5; } to { transform: scale(1.15); opacity: 0; } }

/* ---------- caption below the window ---------- */
.fp-cap {
  margin-top: 14px; text-align: center; font-size: .9rem; line-height: 1.55;
  color: var(--fp-ink-3); min-height: 44px;
}
.fp-cap b { color: var(--fp-ink-2); font-weight: 700; }
.fp-cap .fp-step {
  font-family: var(--fp-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--fp-orange); text-transform: uppercase; display: block; margin-bottom: 3px;
}

/* progress hairline at the very bottom of the window */
.fp-prog { height: 2px; background: var(--fp-line); position: relative; }
.fp-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fp-amber); transition: width .4s var(--fp-ease); }

/* ============================================================
   Mock product UI — technical: hairlines, mono numbers, small caps
   ============================================================ */
.ui-app { flex: 1; display: flex; background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: 10px; overflow: hidden; }
.ui-side { width: 150px; flex: none; background: var(--fp-surface-3); border-right: 1px solid var(--fp-line); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.ui-side .ui-brand {
  font-family: var(--fp-mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fp-ink); margin-bottom: 10px;
}
.ui-nav { font-size: .76rem; padding: 6px 8px; border-radius: 6px; color: var(--fp-ink-2); }
.ui-nav.is-on { background: #fff; color: var(--fp-ink); font-weight: 650; border: 1px solid var(--fp-line-2); }
.ui-nav--dim { opacity: .55; }
.ui-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--fp-line); background: #fff; }
.ui-top h4 { margin: 0; font-size: .84rem; font-weight: 650; letter-spacing: -.01em; }
.ui-main { flex: 1; padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }

.ui-badge {
  font-family: var(--fp-mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; background: var(--fp-surface-2); color: var(--fp-ink-2);
  border: 1px solid var(--fp-line-2); white-space: nowrap;
}
.ui-badge--navy { background: var(--fp-ink); color: #fff; border-color: var(--fp-ink); }
.ui-badge--gold { background: #fef6e7; color: var(--fp-orange); border-color: #f6e3bd; }
.ui-badge--ok { background: #eaf6ef; color: var(--fp-ok); border-color: #cbe7d7; }
.ui-badge--warn { background: #fdf1e3; color: #8a5a14; border-color: #f0dcc0; }

.ui-card { border: 1px solid var(--fp-line); border-radius: 9px; background: #fff; padding: 12px; }
.ui-card--flush { padding: 0; overflow: hidden; }
.ui-card h5 {
  margin: 0 0 8px; font-family: var(--fp-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fp-ink-3);
}
.ui-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-rowline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; padding: 6px 0; }
.ui-rowline + .ui-rowline { border-top: 1px dashed var(--fp-line); }
.ui-k { color: var(--fp-ink-2); }
.ui-v { font-family: var(--fp-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

.ui-field { display: flex; flex-direction: column; gap: 4px; }
.ui-field label { font-family: var(--fp-mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-ink-3); }
.ui-input { border: 1px solid var(--fp-line-2); border-radius: 7px; background: #fff; padding: 8px 10px; font-size: .8rem; min-height: 34px; color: var(--fp-ink); }
.ui-input.is-live { border-color: var(--fp-amber); box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
.ui-input--mono { font-family: var(--fp-mono); font-size: .74rem; }
.ui-select { display: flex; align-items: center; justify-content: space-between; }
.ui-select::after { content: "▾"; color: var(--fp-ink-3); font-size: .62rem; }

.ui-btn {
  font-size: .8rem; font-weight: 650; border-radius: 7px; padding: 8px 14px;
  background: var(--fp-ink); color: #fff; border: 1px solid var(--fp-ink); white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease;
}
.ui-btn--ghost { background: #fff; color: var(--fp-ink); border-color: var(--fp-line-2); }
.ui-btn--gold { background: var(--fp-amber); border-color: var(--fp-amber); color: #1d1403; }
.ui-btn.is-hit { transform: scale(.96); box-shadow: 0 0 0 4px rgba(245,158,11,.22); }

.ui-drop { border: 1.5px dashed var(--fp-line-2); border-radius: 9px; background: var(--fp-surface-2); padding: 30px 18px; text-align: center; font-size: .8rem; color: var(--fp-ink-2); transition: border-color .2s, background .2s; }
.ui-drop.is-hit, .ui-drop.is-live { border-color: var(--fp-amber); background: #fffdf7; color: var(--fp-ink); }
.ui-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; background: #fff; border: 1px solid var(--fp-line-2); border-radius: 7px; padding: 7px 11px; font-family: var(--fp-mono); font-size: .74rem; }
.ui-file b { font-weight: 600; }
.ui-file i { font-style: normal; color: var(--fp-ok); font-weight: 700; }

.ui-ops { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ui-op { font-family: var(--fp-mono); font-size: .56rem; text-align: center; padding: 8px 2px; border-radius: 5px; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink-3); line-height: 1.3; letter-spacing: .02em; }
.ui-op.is-done { background: #eaf6ef; border-color: #cbe7d7; color: var(--fp-ok); font-weight: 700; }
.ui-op.is-now { background: var(--fp-ink); border-color: var(--fp-ink); color: #fff; font-weight: 700; }

.ui-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.ui-table th { text-align: left; font-family: var(--fp-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-ink-3); padding: 8px 10px; background: var(--fp-surface-2); border-bottom: 1px solid var(--fp-line); }
.ui-table td { padding: 9px 10px; border-bottom: 1px solid var(--fp-line); font-variant-numeric: tabular-nums; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table b { font-family: var(--fp-mono); }

.ui-price { font-family: var(--fp-mono); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ui-price small { font-size: .7rem; font-weight: 600; color: var(--fp-ink-3); margin-left: 4px; letter-spacing: .06em; }

.ui-ring { position: relative; width: 92px; height: 92px; margin: 0 auto; }
.ui-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-ring circle { fill: none; stroke-width: 5; }
.ui-ring .trk { stroke: var(--fp-line-2); }
.ui-ring .bar { stroke: var(--fp-amber); stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; }
.fp-scene.on .ui-ring .bar { animation: ui-ring 2.1s var(--fp-ease) forwards; }
@keyframes ui-ring { to { stroke-dashoffset: 18; } }
.ui-ring-cap { font-family: var(--fp-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fp-orange); text-align: center; }
.ui-face { position: absolute; inset: 28px; border-radius: 50%; background: var(--fp-surface-3); border: 1px solid var(--fp-line-2); }
.ui-face::after { content: "👤"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; opacity: .5; }

.ui-map {
  position: relative; height: 92px; border-radius: 9px; overflow: hidden; border: 1px solid var(--fp-line);
  background-color: #f2f4f2;
  background-image: linear-gradient(var(--fp-line) 1px, transparent 1px), linear-gradient(90deg, var(--fp-line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ui-map .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--fp-ink); box-shadow: 0 0 0 0 rgba(19,18,16,.3); animation: ui-pulse 2s ease-out infinite; }
@keyframes ui-pulse { 70% { box-shadow: 0 0 0 18px rgba(19,18,16,0); } 100% { box-shadow: 0 0 0 0 rgba(19,18,16,0); } }
.ui-map .fence { position: absolute; left: 22%; top: 16%; width: 56%; height: 68%; border: 1.5px dashed var(--fp-amber); border-radius: 40% 40% 42% 42%; }

.ui-note { font-size: .78rem; color: var(--fp-ink-2); background: var(--fp-surface-2); border-left: 3px solid var(--fp-amber); border-radius: 0 8px 8px 0; padding: 9px 12px; }
.ui-ok-line { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; color: var(--fp-ok); }
.ui-ok-line .tick { width: 22px; height: 22px; border-radius: 50%; background: #eaf6ef; border: 1px solid #cbe7d7; display: grid; place-items: center; font-size: .72rem; color: var(--fp-ok); }
.ui-shimmer { color: var(--fp-ink-2); font-size: .78rem; display: flex; align-items: center; gap: 8px; }
.ui-shimmer .bar { flex: 1; height: 6px; border-radius: 3px; overflow: hidden; background: linear-gradient(90deg, #ece8e1 0%, #faf9f7 40%, #ece8e1 80%); background-size: 220% 100%; animation: ui-shim 1.1s linear infinite; }
@keyframes ui-shim { to { background-position: -120% 0; } }
.ui-mt-auto { margin-top: auto; }
.ui-flex { display: flex; align-items: center; gap: 10px; }
.ui-spacer { flex: 1; }
.ui-sm { font-size: .78rem; color: var(--fp-ink-3); }
.ui-mono { font-family: var(--fp-mono); font-size: .74rem; }

@media (prefers-reduced-motion: reduce) {
  .fp-scene { transition: none; }
  .ui-ring .bar { animation: none; stroke-dashoffset: 18; }
  .ui-map .pin { animation: none; }
  .fp-ripple.go::after { animation: none; }
}
@media (max-width: 620px) {
  .fp-chip .fp-n { display: none; }
  .fp-tabs { gap: 6px; }
  .ui-side { display: none; }
  .ui-ops { grid-template-columns: repeat(4, 1fr); }
  .fp-viewport { height: 330px; }
  .fp-chip { font-size: .78rem; padding: 8px 12px; }
}