/* ============================================================================
   Demo-only affordances.
   Everything else on this page is the app's own stylesheet (app.css), copied
   verbatim, so the screens match the product exactly.
   ========================================================================== */

/* No scrollbars: the app's fixed top bar and bottom nav span the full width of
   the window, so they stay flush with the edges like they do on a real screen. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* `hidden` must win over component display rules. */
[hidden] {
  display: none !important;
}

/* Sample-photo placeholder: the demo has no camera roll, so a chosen sample
   renders as a neutral tile instead of pretending to be a real photo. */
.demo-photo {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #eef4fb, #e2ecf7);
  color: #7a8699;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.demo-photo svg {
  color: #b9c6d8;
}

.demo-photo.scan-thumb {
  min-height: 130px;
  height: 130px;
  border-radius: 14px;
  margin-bottom: 10px;
}

/* "Try a sample" row on the scan screen. Only shown when no photo is picked. */
.demo-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.demo-samples__label {
  flex: 0 0 100%;
  text-align: center;
  font-size: 12.5px;
  color: #7a8699;
}

.demo-sample {
  border: 1px solid #e5eaf0;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #53657e;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.demo-sample:hover,
.demo-sample:focus-visible {
  border-color: var(--fi-yellow, #f5a623);
  background: #fffbea;
  color: #966c00;
}

/* The map preview on the Find Workers screen. */
.jobs-map {
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--fi-border, #edf1f5);
  background: #eef2f7;
}

/* Let scrolling chain up to the demo page once the app reaches its end. */
body {
  overscroll-behavior-y: auto;
}

/* The demo page owns the window scrollbar; the embedded app hides its own so
   the frame does not show a second bar beside the page's. Standalone app.html
   is unaffected. */
html.is-embedded,
html.is-embedded body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.is-embedded::-webkit-scrollbar {
  width: 0;
  height: 0;
}