/**
 * components.css — reusable UI pieces.
 */

/* ===================== buttons & pills ===================== */

/* the primary button, as on the website ("Start a conversation",
   "Explore capabilities"): an aqua pill with navy type and a soft glow */
.cta-btn {
  background: var(--steel); color: var(--steel-ink); border: none;
  font-size: 13px; font-weight: 800; padding: 11px 20px;
  box-shadow: 0 14px 34px rgba(var(--steel-rgb), .24);
  border-radius: var(--radius-pill); text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out-quart);
  display: inline-block;
}
.cta-btn:hover { opacity: 1; background: var(--steel-t20); box-shadow: 0 18px 42px rgba(var(--steel-rgb), .32); }

.theme-toggle {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 12px; font-weight: 600; padding: 7px 12px;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), background .25s var(--ease-out-quart);
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }

.lang-toggle {
  display: flex; gap: 2px; background: var(--tile);
  border-radius: var(--radius-pill); padding: 3px;
}
.lang-opt {
  background: none; border: none; color: var(--text-muted);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px;
  border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.lang-opt[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }

.back-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; padding: 8px 14px;
  border-radius: var(--radius-pill); cursor: pointer; margin-bottom: 22px;
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.back-btn:hover { border-color: var(--blue); color: var(--blue); }

.footer-nav-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--navy-deep);
  font-size: 13px; font-weight: 700; padding: 10px 18px;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.footer-nav-btn:hover { border-color: var(--blue); color: var(--blue); }
.footer-nav-btn:disabled { opacity: .35; cursor: default; }
.footer-nav-btn.primary { background: var(--steel); color: var(--steel-ink); border-color: var(--steel); font-weight: 800; }

/* ===================== lab hero ===================== */
/* the one place on the page that uses --display-size — deliberately once,
   so the scale contrast with the 12–17px UI text elsewhere still reads as
   a statement rather than just "another big heading" */
.lab-hero { max-width: 900px; margin: 4px 0 44px; }
.lab-hero-eyebrow {
  font-size: var(--fs-kicker); font-weight: 800; color: var(--blue);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px;
}
.lab-hero-title {
  font-size: var(--display-size); font-weight: 800; line-height: .98;
  letter-spacing: -.03em; color: var(--navy-deep); margin-bottom: 18px;
}
.lab-hero-sub { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.6; max-width: 520px; }

/* ===================== tiles & stats ===================== */

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.stat-tile { background: var(--tile); border-radius: var(--radius-md); padding: 14px; }
.stat-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; }
.stat-value { font-size: 14.5px; font-weight: 600; color: var(--navy-deep); font-family: var(--font-mono); letter-spacing: -.01em; }

/* ===================== badges ===================== */

.capability-strip { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 40px; }
.capability-badge {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: var(--radius-pill);
}

/* ===================== client objective selector ===================== */
/* Guided-presentation entry point: "what brings you here today" — each
   choice routes into existing content (a station or plant template) via
   the same router used everywhere else, and feeds the booking form's
   engagement source. No new pages, no new routes. */
.objective-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 40px;
  box-shadow: var(--shadow-sm), var(--surface-hi);   /* elevation level 1 */
}
.objective-card h2 { font-size: 16px; margin-bottom: 4px; }
.objective-card .objective-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }
.objective-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.objective-chip {
  text-align: left; background: var(--tile); border: 1px solid transparent;
  border-radius: var(--radius-md); padding: 12px 15px; cursor: pointer;
  max-width: 240px; flex: 1 1 200px;
  transition: border-color var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.objective-chip:hover { transform: translateY(-1px); }
.objective-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.objective-chip[aria-pressed="true"] { background: var(--blue-dim); border-color: var(--blue); }
.objective-chip-label { font-size: 13px; font-weight: 700; color: var(--navy-deep); margin-bottom: 3px; display: block; }
.objective-chip-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; display: block; }
.objective-followup {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.objective-followup p { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.objective-followup .objective-followup-cta { display: flex; gap: 8px; flex-wrap: wrap; }
/* recreated by main.js when index.html lacks it — an <a>, styled as the
   secondary pill it sits beside */
.objective-go { text-decoration: none; display: inline-flex; align-items: center; }
/* entrance (main.js adds .is-entering on each pick): the panel unfolds from
   its top edge, then its contents settle in a stagger step later */
.objective-followup.is-entering { animation: followup-unfold var(--dur-base) var(--ease-out-expo) both; }
.objective-followup.is-entering > * {
  animation: followup-item-in var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--stagger-step) * 2);
}
@keyframes followup-unfold { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes followup-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.compliance-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.compliance-badge {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px;
}
.compliance-badge svg { color: var(--blue); flex-shrink: 0; }
.compliance-badge span { font-size: 12px; font-weight: 700; color: var(--navy-deep); }

.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-dim); padding: 5px 10px; border-radius: var(--radius-pill);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: relative; }
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--accent); animation: live-pulse 1.8s var(--ease-out-quart) infinite;
}
@keyframes live-pulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { display: none; } }

.status-pill {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--surface);
  padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.status-pill.ready { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.status-pill.ready i { background: var(--accent); }

/* ===================== 3D carousel ===================== */

.carousel-wrap { display: flex; align-items: center; gap: 8px; }
.carousel-viewport {
  flex: 1; position: relative; height: 400px; perspective: 1500px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.carousel-track {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; cursor: grab; touch-action: pan-y;
}
.carousel-track.dragging { cursor: grabbing; }
.carousel-track img { -webkit-user-drag: none; user-select: none; }
.carousel-card {
  position: absolute; top: 50%; left: 50%; width: 300px;
  transition: transform var(--dur-base) var(--ease-out-quart), opacity var(--dur-base) var(--ease-out-quart), filter var(--dur-base) var(--ease-out-quart);
}
.carousel-track.dragging .carousel-card { transition: opacity var(--dur-base) var(--ease-out-quart), filter var(--dur-base) var(--ease-out-quart); }

.carousel-arrow {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.carousel-arrow:hover { border-color: var(--blue); color: var(--blue); }
.carousel-arrow:disabled { opacity: .3; cursor: default; }

.carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; position: relative; }
.dot[aria-current="true"] { background: var(--blue); width: 18px; border-radius: 4px; }

/* ===================== station card ===================== */

.station-card {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden; cursor: pointer;
  text-align: left; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0;
  transition: box-shadow var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);
  transform-style: preserve-3d;
}
.carousel-card.center .station-card {
  box-shadow: var(--shadow-md), var(--shadow-glow);
  border-color: var(--fw-t70);
}

.card-thumb {
  aspect-ratio: 16/10; width: 100%; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--tile), var(--tile-2));
  display: flex; align-items: center; justify-content: center;
}
.card-thumb img, .card-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--text-faint); font-weight: 700; text-align: center; padding: 12px;
}
.thumb-empty svg { color: var(--blue); opacity: .55; }

.play-badge {
  position: absolute; bottom: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.card-live-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.card-cat-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  background: var(--chrome); color: #fff; padding: 4px 9px; border-radius: var(--radius-pill);
}
.card-soon-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 9.5px; font-weight: 800; background: var(--warn-dim);
  color: var(--warn); padding: 4px 9px; border-radius: var(--radius-pill);
}

.card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.card-tag { font-size: 11px; font-weight: 700; color: var(--blue); margin-bottom: 6px; }
.card-name { font-size: 15.5px; font-weight: 700; color: var(--navy-deep); margin-bottom: 6px; line-height: 1.3; }
.card-teaser { font-size: 12px; color: var(--text-muted); line-height: 1.5; flex: 1; }
.card-enter { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 5px; }

/* ===================== mini carousel (in detail view) ===================== */

.mini-carousel-viewport {
  position: relative; height: 96px; perspective: 900px; overflow: hidden; margin-bottom: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mini-carousel-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; }
.mini-carousel-track.dragging { cursor: grabbing; }
/* The mini-carousel track element actually carries the shared .carousel-track
   class (see index.html), so it's targeted here by id instead. pointer-events:
   none on the track itself, with `auto` restored per-card below, is deliberate:
   inside a preserve-3d scene, the track's own untransformed box sits at the
   z=0 plane and — even though invisible — wins native hit-testing over any
   child pushed behind it with a negative translateZ, making every off-centre
   card silently unclickable. Excluding the track from hit-testing lets the
   (still individually clickable) cards receive the pointer instead. Scoped to
   this id only — the main/plant carousels' tracks rely on receiving pointer
   events directly for their own drag handling. */
#mini-carousel-track { pointer-events: none; }
.mini-card {
  position: absolute; top: 50%; left: 50%; width: 170px; cursor: pointer; border: none;
  background: none; padding: 0; pointer-events: auto;
  transition: transform var(--dur-base) var(--ease-out-quart), opacity var(--dur-base) var(--ease-out-quart), filter var(--dur-base) var(--ease-out-quart);
}
.mini-card-inner {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 12px 8px 8px; box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.mini-card.center .mini-card-inner { border-color: var(--blue); box-shadow: var(--shadow-md); }
.mini-thumb { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--tile), var(--tile-2)); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-text { min-width: 0; text-align: left; }
.mini-tag { font-size: 9px; color: var(--text-faint); font-weight: 700; }
.mini-name { font-size: 12.5px; font-weight: 700; color: var(--navy-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===================== kiosk / media frame ===================== */

/* the kiosk is a device standing on the page, not a card lying on it —
   elevation level 2, same as the active carousel card beside it */
.kiosk { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.kiosk-screen {
  aspect-ratio: 4/3; width: 100%;
  background: linear-gradient(135deg, var(--tile), var(--tile-2));
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kiosk-screen video { width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.kiosk-placeholder { text-align: center; padding: 28px; max-width: 300px; }
.kiosk-placeholder .glyph { font-size: 12px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.kiosk-placeholder p { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

.kiosk-chrome {
  background: var(--chrome); color: var(--fw-t90);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 12px;
}
.chrome-left { display: flex; align-items: center; gap: 10px; }
.hamburger { display: flex; flex-direction: column; gap: 3px; }
.hamburger span { width: 14px; height: 2px; background: var(--fw-t90); border-radius: 1px; }
.app-name { font-weight: 600; opacity: .9; }
.chrome-right { display: flex; gap: 8px; }
.chrome-pill {
  border: 1px solid rgba(var(--fw-t90-rgb), .35); border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: 11.5px; font-weight: 600;
  background: none; color: var(--fw-t90); cursor: pointer; transition: background var(--dur-fast) var(--ease-out-quart);
}
.chrome-pill:hover { background: rgba(var(--fw-t90-rgb), .12); }
.chrome-pill:disabled { opacity: .35; cursor: default; }
.chrome-pill.go { background: var(--accent); border-color: var(--accent); color: #fff; }

.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.photo-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.photo-strip picture { display: block; border-radius: 8px; overflow: hidden; }
.photo-empty {
  aspect-ratio: 4/3; border: 1px dashed var(--border); border-radius: 8px;
  background: linear-gradient(135deg, var(--tile), var(--tile-2));   /* same resting surface as every other empty state */
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; color: var(--text-faint); font-weight: 600; text-align: center; padding: 6px;
}

/* ===================== annotated image + hotspots ===================== */

.image-wrap { position: relative; width: 100%; line-height: 0; background: var(--fw-s90); }
.image-wrap img { width: 100%; display: block; user-select: none; -webkit-user-drag: none; }

/* dark-mode photo grading — the lab photos, walkthrough screenshots and
   kiosk video are shot for a bright, light-background presentation; placed
   directly on the dark theme's #0C1220 background with no treatment they
   read as washed out and mismatched. A small brightness/contrast pull is
   the cheap version of what would otherwise be a per-theme photo re-edit. */
[data-theme="dark"] .image-wrap img,
[data-theme="dark"] .photo-strip img,
[data-theme="dark"] .kiosk-screen video {
  filter: brightness(.86) contrast(1.06) saturate(.9);
}

.hotspot {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--blue); color: var(--on-blue);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1.5px solid #fff; padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); z-index: 2;
  transition: transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.hotspot:hover, .hotspot:focus-visible { transform: scale(1.15); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.hotspot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--blue); opacity: .45;
  animation: hs-pulse 2.4s var(--ease-out-quart) infinite;
}
.hotspot.action { background: var(--accent); }
.hotspot.action::before { border-color: var(--accent); }
@keyframes hs-pulse { 0% { transform: scale(.75); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hotspot::before { display: none; } }

.hotspot-tip {
  position: absolute; z-index: 3; min-width: 170px; max-width: 230px;
  left: 50%; transform: translate(-50%, 8px); top: 34px;
  background: var(--fw-s80); color: var(--fw-t90); border-radius: 6px; padding: 10px 12px;
  font-size: 12px; line-height: 1.45; text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-instant) var(--ease-out-quart), transform var(--dur-instant) var(--ease-out-quart);
  pointer-events: none;
}
.hotspot-tip strong { display: block; font-size: 12.5px; margin-bottom: 3px; color: #fff; }
.hotspot[aria-expanded="true"] .hotspot-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
@media (hover: hover) {
  .hotspot:hover .hotspot-tip, .hotspot:focus-visible .hotspot-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}

/* ===================== walkthrough bar ===================== */

.wt-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wt-nav { display: flex; align-items: center; gap: 8px; }
.wt-step-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.wt-step-btn:hover { border-color: var(--blue); color: var(--blue); }
.wt-step-btn:disabled { opacity: .3; cursor: default; }
.wt-label { font-size: 12.5px; font-weight: 700; color: var(--navy-deep); }
.wt-label span { color: var(--text-faint); font-weight: 600; }
.wt-bar-actions { display: flex; gap: 8px; }
.wt-jump {
  font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-dim);
  border: 1px solid transparent; padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.wt-jump[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }
.wt-dots { display: flex; gap: 5px; padding: 8px 12px; background: var(--surface); }

/* named step rail — same visual language as .journey-rail, sized for the kiosk bar */
.wt-rail { display: flex; align-items: flex-start; gap: 1px; padding: 10px 12px 8px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }
.wt-rail-step { flex: 1; min-width: 54px; text-align: center; cursor: pointer; background: none; border: none; padding: 2px; }
.wt-rail-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tile); border: 1.5px solid var(--border); color: var(--text-faint);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 5px; font-size: 9.5px; font-weight: 700; transition: all var(--dur-fast) var(--ease-out-quart);
}
.wt-rail-step[aria-current="true"] .wt-rail-dot { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.wt-rail-step.done .wt-rail-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.wt-rail-line { height: 1.5px; background: var(--border); flex: .35; margin-top: 11px; }
.wt-rail-name {
  font-size: 8.5px; font-weight: 600; color: var(--text-faint); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.wt-rail-step[aria-current="true"] .wt-rail-name { color: var(--navy-deep); font-weight: 700; }

/* ===================== forms ===================== */

.field { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 14px; }
.field input, .field textarea {
  border-radius: var(--radius-sm);
  width: 100%; margin-top: 6px; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 13px; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }

.field-error { display: block; font-size: 11.5px; color: var(--red); font-weight: 600; margin-top: 5px; min-height: 0; }

.form-status {
  border-radius: var(--radius-md); padding: 14px; font-size: 13px;
  margin-top: 12px; line-height: 1.5;
}
.form-status.success { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--navy-deep); }
.form-status.error   { background: var(--red-dim);   border: 1px solid var(--red);   color: var(--navy-deep); }

/* ===================== FAQ accordion ===================== */

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 16px 18px; display: flex; justify-content: space-between; align-items: center;
  gap: 14px; font-size: 14.5px; font-weight: 700; color: var(--navy-deep);
}
.faq-plus { font-size: 18px; color: var(--blue); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out-quart); }
.faq-q[aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s var(--ease-out-quart); }
.faq-a p { padding: 0 18px 16px; font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }

/* ===================== info blocks ===================== */

.info-block + .info-block { margin-top: 22px; }
.info-block h3 { font-size: 11px; color: var(--text-faint); font-weight: 700; margin-bottom: 8px; letter-spacing: .02em; }
.info-block p { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.info-block ul { list-style: none; }
.info-block li { position: relative; padding-left: 16px; margin-bottom: 7px; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.info-block li::before { content: "–"; position: absolute; left: 0; color: var(--blue); }

/* ===================== crumb bar ===================== */

.crumb-bar {
  display: flex; gap: 28px; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 18px; margin-bottom: 22px;
}
.crumb { display: flex; align-items: center; gap: 10px; }
.crumb svg { flex-shrink: 0; color: var(--blue); }
.crumb-label { font-size: 10.5px; color: var(--text-faint); font-weight: 600; }
.crumb-value { font-size: 13px; color: var(--navy-deep); font-weight: 600; font-family: var(--font-mono); letter-spacing: -.01em; }

/* ===================== shared-element morph ghost (transitions.js) ===================== */
/* A ghost of the selected card flies First → Last on transform + clip-path
   only; the clip crop morphs the aspect ratio so media never stretches. */
.morph-ghost {
  position: fixed; z-index: 9000; overflow: hidden; pointer-events: none;
  transform-origin: 0 0; background: var(--tile);
  box-shadow: var(--shadow-lg);   /* in flight: level 3, above everything it crosses */
  will-change: transform, clip-path;
}
.morph-ghost.is-flying {
  transition:
    transform var(--dur-slow) var(--ease-out-expo),
    clip-path var(--dur-slow) var(--ease-out-expo),
    box-shadow var(--dur-slow) var(--ease-out-quart);
}
.morph-ghost.is-landed { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out-quart); }
.morph-ghost-media { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===================== skeleton shimmer ===================== */
/* The .lab-skeleton sheen, generalised into one reusable state. Any media
   frame (card thumbs, mini thumbs, photo strip, orbit spheres, kiosk video,
   walkthrough screenshots) carries .skeleton-shimmer while its image/video
   is actually loading — effects.js initMediaShimmer adds and removes it —
   and the media fades in over it instead of popping. Absent media ("coming
   soon") is a different state and keeps the same surface *without* the
   sheen: a sheen promises content is on its way, which would be untrue.
   Under reduced motion base.css stops the sweep; the surface remains. */
.skeleton-shimmer {
  background-color: var(--tile) !important;
  background-image:
    linear-gradient(100deg, transparent 25%, var(--shimmer-hi) 50%, transparent 75%),
    linear-gradient(135deg, var(--tile), var(--tile-2)) !important;
  background-size: 240% 100%, 100% 100% !important;
  animation: skeleton-sheen 1.5s var(--ease-in-out-smooth) infinite;
}
@keyframes skeleton-sheen { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
.skeleton-shimmer :is(img, video) { opacity: 0; transition: opacity var(--dur-base) var(--ease-out-quart); }
.skeleton-shimmer.is-loaded { animation: none; }
.skeleton-shimmer.is-loaded :is(img, video) { opacity: 1; }

/* ===================== micro-interactions ===================== */
/* One transform per control, composed from variables, so the magnetic
   pull (effects.js initMagnetic), the press and any hover lift never
   overwrite each other:
     --mag-x/--mag-y  magnetic offset (primary CTAs, pointer devices only)
     --press          1 at rest, .96 while pressed
   Press: fast in (--dur-instant), spring back out (--ease-spring) on release.
   While the magnet is tracking ([data-magnet]) the follow is quick and
   damped; on release the spring carries it home. */
.cta-btn, .footer-nav-btn, .carousel-arrow {
  --mag-x: 0px; --mag-y: 0px; --press: 1;
  transform: translate3d(var(--mag-x), var(--mag-y), 0) scale(var(--press));
}
.cta-btn {
  transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-base) var(--ease-spring);
}
.footer-nav-btn, .carousel-arrow {
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), transform var(--dur-base) var(--ease-spring);
}
.cta-btn[data-magnet] {
  transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.footer-nav-btn[data-magnet] {
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
/* press — declared after [data-magnet] so a click mid-pull still compresses fast */
.cta-btn:active { --press: .96; transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-instant) var(--ease-out-quart); }
.footer-nav-btn:not(:disabled):active,
.carousel-arrow:not(:disabled):active {
  --press: .96;
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), transform var(--dur-instant) var(--ease-out-quart);
}

/* directional glyph nudge: arrows (wrapped in .nudge-icon by effects.js, or
   built that way) travel 3px the way they point on hover, springing back */
.nudge-icon { display: inline-block; transition: transform var(--dur-fast) var(--ease-spring); }
:is(button, a):not(:disabled):hover .nudge-icon[data-dir="next"],
:is(button, a):not(:disabled):focus-visible .nudge-icon[data-dir="next"] { transform: translateX(3px); }
:is(button, a):not(:disabled):hover .nudge-icon[data-dir="prev"],
:is(button, a):not(:disabled):focus-visible .nudge-icon[data-dir="prev"] { transform: translateX(-3px); }

/* ── a template's own screens in the kiosk (js/screens.js) ─────────── */
.kiosk-screen.has-screens { aspect-ratio: auto; display: block; background: var(--surface); }
.kiosk-screens[hidden] { display: none; }
.screens-stage {
  position: relative; overflow: hidden; aspect-ratio: 1600 / 825;
  background: var(--fw-t90); border-bottom: 1px solid var(--border); touch-action: pan-y;
}
.screens-img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.screens-stage.is-stepping .screens-img { animation: screens-step .5s var(--ease-out-expo); }
.screens-stage.is-stepping[data-dir="prev"] .screens-img { animation-name: screens-step-back; }
@keyframes screens-step { from { opacity: 0; translate: 22px 0; } }
@keyframes screens-step-back { from { opacity: 0; translate: -22px 0; } }
.screens-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 600 16px/1 var(--font); color: var(--navy-deep);
  background: rgba(255, 255, 255, .9); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity .25s var(--ease-out-quart), scale .25s var(--ease-out-quart);
}
.screens-prev { left: 12px; }
.screens-next { right: 12px; }
.screens-stage:hover .screens-arrow, .screens-arrow:focus-visible { opacity: 1; }
.screens-arrow:hover { scale: 1.06; }
.screens-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.screens-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.screens-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.screens-count { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.screens-cap { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--text); }
.screens-steps { flex: none; display: flex; gap: 6px; }
.screens-step {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font: 600 12px/1 var(--font-mono); color: var(--text-muted);
  background: transparent; border: 1px solid var(--border);
  transition: background-color .2s var(--ease-out-quart), color .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart);
}
.screens-step:hover { border-color: var(--blue); color: var(--blue); }
.screens-step[aria-current="step"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.screens-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-theme="dark"] .screens-stage { background: var(--fw-s80); }
[data-theme="dark"] .screens-arrow { background: rgba(var(--fw-s80-rgb), .92); color: var(--text); }
@media (max-width: 720px) {
  .screens-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .screens-cap { font-size: 13px; }
  .screens-arrow { display: none; }     /* a swipe, or the numbered steps */
  .screens-step { width: 34px; height: 34px; }
}
@media (hover: none) { .screens-arrow { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .screens-stage.is-stepping .screens-img { animation: none; } }

/* ── the booking's hand-off to the website's contact page (js/booking.js) ── */
.bk-send-panel { display: grid; gap: 12px; outline: none; }
.bk-send-kicker { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-kicker); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.bk-send-step { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.bk-send-title { margin: 0; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--navy-deep); }
.bk-send-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.bk-send-summary { margin: 4px 0 0; padding: 12px 14px; display: grid; gap: 6px; border-radius: var(--radius-md); background: var(--tile); border: 1px solid var(--border); }
.bk-send-summary > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.bk-send-summary dt { color: var(--text-muted); }
.bk-send-summary dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.bk-send-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.bk-send-go { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.bk-send-copy, .bk-send-back {
  padding: 8px 2px; border: 0; background: none; cursor: pointer;
  font: 700 13px/1 var(--font); color: var(--blue); border-bottom: 1px solid transparent;
}
.bk-send-back { color: var(--text-muted); }
.bk-send-copy:hover, .bk-send-back:hover { border-bottom-color: currentColor; }
.bk-send-copy:focus-visible, .bk-send-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.bk-send-note { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* ── Company's next step: booking on the website (js/main.js initBookLinks) ── */
.company-next {
  margin-top: clamp(32px, 5vw, 56px); padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  display: grid; gap: 8px; justify-items: start;
}
.company-next-kicker { margin: 0; font-size: var(--fs-kicker); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.company-next-title { margin: 0; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; color: var(--navy-deep); }
.company-next-lead { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.company-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.company-next-actions .cta-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.company-next-note { font-size: 12.5px; color: var(--text-muted); }

/* ══ the FIDA PLANT templates, locked (main.js openLock, data.js plantLock; 2026-10-12) ══
   The preview is shown softly blurred under a lock; a click asks for a demo instead of opening the template. */
.station-card.is-locked .card-thumb > :is(img, picture, video, .app-mock, [class*="mock"]) { filter: blur(5px) saturate(.75); transform: scale(1.04); transition: filter .5s var(--ease-out-quart), transform .6s var(--ease-out-quart); }
.station-card.is-locked .card-thumb { position: relative; overflow: hidden; }
.station-card.is-locked .card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247, 248, 245, .2), rgba(6, 43, 63, .28)); pointer-events: none; }
.card-lock {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(6, 43, 63, .86); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(6, 43, 63, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 12px/1 var(--font); letter-spacing: .04em; transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}
.card-lock-icon { display: block; width: 16px; height: 16px; color: var(--steel, #68c7d4); }
.card-lock-icon svg { display: block; width: 100%; height: 100%; }
.station-card.is-locked:hover .card-lock, .station-card.is-locked:focus-visible .card-lock { transform: scale(1.06); background: var(--fw-navy, #062b3f); }
.station-card.is-locked:hover .card-thumb > :is(img, picture, video) { filter: blur(3.5px) saturate(.85); }
.station-card.is-locked .card-enter { color: var(--fw-s10, #28717e); }

/* the request: a small dialog over the page */
.tpl-lock {
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto;
  width: min(440px, calc(100vw - 32px)); padding: 30px 30px 26px; border: 0; border-radius: 20px; text-align: left;
  background: #fff; color: var(--fw-ink, #17202a); box-shadow: 0 40px 90px -30px rgba(6, 43, 63, .55);
}
.tpl-lock[open] { animation: tpl-lock-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.tpl-lock::backdrop { background: rgba(6, 43, 63, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: tpl-lock-fade .4s ease both; }
@keyframes tpl-lock-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes tpl-lock-fade { from { opacity: 0; } }
.tpl-lock-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--text-muted, #576574); }
.tpl-lock-close:hover { background: var(--tile, #eef3f2); color: var(--fw-ink, #17202a); }
.tpl-lock-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--fw-navy, #062b3f); color: var(--steel, #68c7d4); }
.tpl-lock-icon svg { width: 24px; height: 24px; }
.tpl-lock-tag { margin: 18px 0 6px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-s10, #28717e); }
.tpl-lock-name { margin: 0; font: 800 24px/1.2 var(--font-display); letter-spacing: -0.02em; }
.tpl-lock-tagline { margin: 6px 0 0; font: 600 11px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--text-faint, #8a97a3); }
.tpl-lock-title { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--fw-line, #dce3df); font: 700 15.5px/1.4 var(--font); }
.tpl-lock-text { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted, #576574); }
.tpl-lock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.tpl-lock-later { border: 0; background: none; cursor: pointer; padding: 8px 2px; font: 600 13px/1 var(--font); color: var(--text-muted, #576574); }
.tpl-lock-later:hover { color: var(--fw-ink, #17202a); }
@media (max-width: 560px) { .tpl-lock-actions .cta-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tpl-lock[open], .tpl-lock::backdrop { animation: none; } .card-lock { transition: none; } }