/* Toepassingen (src/pages/applications.mjs): /klantenservice/, /advertenties-maken/, /video-maken/ and /demo/.
   Loaded after pages.css. Colours come from tokens.css only. The live examples have their own sheets:
   assets/mobile-showcase.css (hero scenes and the /demo/ rail) and assets/support-calls.css (the phone call). */

/* ── Hero: the live example on the gradient ── */
.page-hero-visual .mobile-showcase { width: 100%; }

/* ── Small parts in the step screens ── */
.app-palette { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 4px; }
.app-swatches { display: flex; gap: 6px; }
.app-swatches i { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; }
.app-swatches .sw-ink { background: var(--ink); }
.app-swatches .sw-accent { background: var(--accent); }
.app-swatches .sw-sand { background: var(--grad-1); }
.app-swatches .sw-paper { background: var(--paper); }
.app-cut { position: relative; overflow: hidden; aspect-ratio: 16 / 8; border-radius: 12px; background: var(--ink); }
.app-cut img { width: 100%; height: 100%; object-fit: cover; }
.app-cut-cap, .app-cut-len { position: absolute; padding: 3px 10px; border-radius: 6px; background: var(--scrim); color: var(--on-ink); font-weight: 500; white-space: nowrap; }
.app-cut-cap { left: 50%; bottom: 10px; translate: -50% 0; font-size: 13px; }
.app-cut-len { top: 8px; right: 8px; padding-inline: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── Steps: the list beside one screen, without a second progress row ── */
.page-how .sim-steps .steps-stage { grid-template-rows: minmax(0, 1fr); align-items: center; }
/* Step lines end on a pair of words: Chrome's 'pretty' leaves a long last word alone, 'balance' does not. */
.page-how .flow-text span { text-wrap: balance; }

/* The header state of a screen follows the go-ahead in it. */
.app-state { display: inline-grid; justify-items: end; }
.app-state > * { grid-area: 1 / 1; }
.app-state > :last-child, .flow-screen:has(.crew-go.is-clicked) .app-state > :first-child { visibility: hidden; }
.flow-screen:has(.crew-go.is-clicked) .app-state > :last-child { visibility: visible; }

/* What you can do: the shared tiles (ui.mjs tiles(), pages.css), as on the platform pages. The phone call on
   /klantenservice/ is a regular section on the page background (assets/support-calls.css). */

/* ── One brand, different designs (brandWorkflow in src/integrations.mjs, played by sims.js) ── */
.brand-gallery { display: grid; gap: 20px; }
.bg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bg-tab {
  position: relative; display: grid; grid-template-columns: 36px auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px 10px 8px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); background: var(--panel); color: var(--ink); font: inherit; text-align: left;
  transition: background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.bg-tab:hover { border-color: var(--line); background: var(--canvas); }
.bg-tab[aria-selected="true"] { border-color: var(--line); background: var(--canvas); box-shadow: var(--shadow-tab); }
.bg-tab:focus-visible { outline: none; box-shadow: var(--focus); }
.bg-tab img { width: 36px; height: 36px; border-radius: 50%; background: var(--panel-solid); object-fit: cover; }
.bg-tab-text { display: grid; line-height: 1.25; }
.bg-tab-text b { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.bg-tab-text span { color: var(--ink-muted); font-size: 13px; }
.bg-tab .sim-tab-bar { left: 54px; right: 20px; bottom: 5px; }
.bg-panels { display: grid; container-type: inline-size; min-width: 0; padding: 32px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--orange-soft); }
.bg-panel { grid-area: 1 / 1; min-width: 0; }
.bg-panel[hidden] { display: block; visibility: hidden; }
/* --u is the width of a square ad; the four formats line up on their bottom edge and fill the row. */
.bg-ads { --u: min(232px, (100cqi - 48px) / 3.9); display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.bg-ad { display: grid; justify-items: center; gap: 10px; }
.bg-ad img { width: auto; border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow-sim); }
.bg-ad.is-square img { height: var(--u); aspect-ratio: 1; }
.bg-ad.is-feed img { height: calc(var(--u) * 1.25); aspect-ratio: 4 / 5; }
.bg-ad.is-story img { height: calc(var(--u) * 1.6); aspect-ratio: 9 / 16; }
.bg-format { padding: 3px 10px; border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }

/* ── Systems on /klantenservice/: the moving row of programs in the page's quiet style ── */
.app-systems .logo-strip--systems { margin: 0; }
.app-systems .logo-strip-heading { min-height: 44px; padding: 0 0 4px; }
.app-systems .logo-strip-toggle { border-radius: var(--r-pill); color: var(--ink-muted); }
.app-systems .logo-strip-toggle:hover { border-color: var(--line); background: var(--canvas); }
.app-systems .logo-strip-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.app-systems .system-logo a { border-color: var(--line); border-radius: var(--r-tile); background: var(--canvas); color: var(--ink-muted); transition: border-color var(--fast), color var(--fast), box-shadow var(--fast); }
.app-systems .system-logo img { opacity: .6; transition: opacity var(--fast); }
.app-systems .system-logo a:hover, .app-systems .system-logo a:focus-visible { border-color: var(--line-ink); background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-card-hover); outline: none; }
.app-systems .system-logo a:focus-visible { box-shadow: var(--focus); }
.app-systems .system-logo a:hover img, .app-systems .system-logo a:focus-visible img { opacity: 1; }
.app-systems .logo-strip-viewport { position: relative; }
.app-systems .is-ready .logo-strip-viewport::before, .app-systems .is-ready .logo-strip-viewport::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 56px; pointer-events: none; }
.app-systems .is-ready .logo-strip-viewport::before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); }
.app-systems .is-ready .logo-strip-viewport::after { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); }
.systems-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; margin-top: 20px; color: var(--ink-muted); font-size: 14px; text-align: center; }

/* ── /demo/ ── */
.page-demo .page-hero { padding-bottom: 24px; }
.page-showcase { padding-top: 40px; }

@media (max-width: 767px) {
  .bg-panels { padding: 16px; }
  .bg-ads { --u: min(232px, (100cqi - 16px) / 2.9); gap: 8px; }
  .bg-ad:nth-child(4) { display: none; }
  .bg-format { padding-inline: 8px; font-size: 12px; }
}
@media (max-width: 479px) {
  .bg-tab { grid-template-columns: 32px auto; gap: 8px; padding: 6px 14px 8px 6px; }
  .bg-tab img { width: 32px; height: 32px; }
  .bg-tab-text span { display: none; }
  .bg-tab .sim-tab-bar { left: 46px; right: 14px; }
  .bg-ad { gap: 8px; }
}
@media (max-width: 359px) {
  .bg-format { padding-inline: 6px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-tab, .app-systems .system-logo a, .app-systems .system-logo img { transition: none; }
  /* Without motion the steps show their finished scene, so the go-ahead in it is already given. */
  .sim .crew-go { background: var(--green); transition: none; }
  .sim .sim-crew .crew-ask { visibility: hidden; }
  .sim .sim-crew .crew-done { visibility: visible; }
  .sim .sim-crew .crew-you { color: var(--green); font-weight: 500; }
  .app-state > :first-child { visibility: hidden; }
  .app-state > :last-child { visibility: visible; }
}