/* Try Bento, the trybento panel (index.html, trybento.js; tokens: --trybento-* in tokens.css). Figma Bento-slides 40:2848
   is the layout: its still, the line and two buttons. Sizes, type and buttons are the site's own. The panel never
   scrolls. It is a size container, so the picture can know the card's height (100cqh) and shrink where the card is too
   short to hold it at full width and the words with it. */
.trybento {
  display: flex;
  flex-direction: column;
  padding: var(--trybento-inset) var(--trybento-inset) 0;
  overflow: hidden;
  container-type: size;
}

/* --trybento-order words (trybento.js sets data-order from it): the words over the picture, which stands near the card's
   foot. */
.trybento[data-order="words"] {
  flex-direction: column-reverse;
  padding-top: 0;
  /* Concentric with the card (Keyan, 2026-11-05: "ensure image is perfectly concentric corner radius"): flush on the foot,
     the card's curve cut the picture's corners off at a slant. Now it stands --trybento-inset off the foot as off the sides,
     and its corners take --trybento-demo-radius, the card's radius less that inset, all round. */
  padding-bottom: var(--trybento-inset);
}

.trybento[data-order="words"] .trybento-screen {
  border-radius: var(--trybento-demo-radius);
}

.trybento[data-order="words"] .trybento-text {
  padding-top: var(--trybento-text-edge);
  padding-bottom: var(--trybento-text-gap);
}

/* The page never scrolls while Try Bento shows (Keyan, 2026-11-05: "remove scrollability from this page"): not the
   panel, and not the page under the card (the goodbye, footer.js, which also leaves the wheel alone over a data-still
   panel). The scrollbar's room stays, so nothing moves sideways as the tab changes. */
html:has(.panel[data-still]:not([hidden])) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.trybento-demo {
  display: flex;
  flex: 9999 1 0; /* takes the room first; the words only get what is left once it reaches max-height */
  min-height: var(--trybento-demo-least);
  /* Never taller than the still at the card's full width, so the picture is never short of its width and never shows
     ground under it (3456 by 1182, the still's own shape). The room it leaves goes to the words. */
  max-height: calc(100cqw * 1182 / 3456);
}

/* The picture's window, the card's full width, as tall as the words and their spacing leave (Keyan, 2026-11-05): the
   still fills its width from its top and is cut at its foot. Cut straight across its foot, so only its top corners
   round. */
.trybento-screen {
  position: relative;
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--trybento-demo-radius) var(--trybento-demo-radius) 0 0;
  background: var(--trybento-demo-ground);
}

.trybento-screen:fullscreen {
  border-radius: 0;
}

/* Rachel's grain, the site's only grain (style.css, body::after; Keyan, 2026-11-04: "use rachel grain instead of the
   grain from the slides"). On the page it already lies over the demo; full screen shows the demo alone, without the
   page's layer, so the demo carries the same grain then, over the build and the toast as on the page. */
.trybento-screen:fullscreen::after {
  content: '';
  position: absolute;
  z-index: 9999;
  inset: 0;
  opacity: calc(var(--grain) * var(--grain-opacity));
  mix-blend-mode: var(--grain-blend);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / var(--grain-size) repeat;
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .trybento-screen:fullscreen::after {
    opacity: calc(var(--grain) * .025);
  }
}

/* Always the still's full width, at its own height from the window's top, so only its foot is ever cut (Keyan,
   2026-11-05: "always show the full image width and just crop the bottom"). A window taller than the still shows
   --trybento-demo-ground under it. */
.trybento-still {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* The live build shows only in full screen (trybento.js loads it then, or as the hand or the keys reach the picture).
   Hidden, it draws nothing (measured: 0 frames a second). */
.trybento-screen iframe {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--trybento-fade) ease;
}

.trybento-screen:fullscreen iframe {
  display: block;
}

.trybento-screen:fullscreen .trybento-still {
  visibility: hidden;
}

.trybento-screen.live iframe {
  opacity: 1;
}

/* The picture's link: full screen on a computer, a new tab on a phone (trybento.js). Out of the way in full screen, so
   the build takes the clicks. */
.trybento-open {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}

.trybento-open:focus-visible {
  outline: 2px solid var(--mute);
  outline-offset: -2px;
}

.trybento-screen:fullscreen .trybento-open {
  display: none;
}

.trybento-text {
  display: flex;
  flex: 1 0 auto; /* the room the picture leaves, the words in its middle */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--trybento-title-gap);
  padding: var(--trybento-text-gap) 16px var(--trybento-text-edge);
  text-align: center;
}

/* Lausanne 400 has its own family name (style.css), so a weight alone would not reach it. */
.trybento-text h2 {
  margin: 0;
  color: var(--ink);
  font-family: 'TWK Lausanne 400', 'TWK Lausanne', system-ui, sans-serif;
  font-size: var(--trybento-title-size);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--trybento-title-track);
  text-wrap: balance;
}

.trybento-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--trybento-button-gap);
  justify-content: center;
}

/* Reach out's button (case.css, .case-reach; reach.js leans it toward the mouse, squishes it on a press, copies and
   toasts) at the sizes of Keyan's picture of the two (2026-11-05). Codex plugin is Reach out's dark, with Codex's mark;
   Browser install is the nav's tray (case.css, --case-reach-look tray), set here so it stays so whatever a case study's
   button is, with the copy icon. Both carry a 1px edge so they stand the same height. */
.trybento .trybento-actions .case-reach {
  display: inline-flex;
  align-items: center;
  gap: var(--trybento-button-icon-gap);
  padding: calc(var(--trybento-button-pad-y) - 1px) calc(var(--trybento-button-pad-x) - 1px);
  border-radius: var(--trybento-button-radius);
  font-size: var(--trybento-button-size);
}

.trybento .trybento-actions .case-reach-icon {
  width: var(--trybento-button-icon);
  height: var(--trybento-button-icon);
}

.trybento .trybento-actions .trybento-codex {
  border: 1px solid var(--trybento-primary);
  background: var(--trybento-primary);
  box-shadow: none;
  color: #ffffff;
}

.trybento .trybento-actions .trybento-codex .case-reach-icon {
  background: currentColor;
  mask-image: url('projects/bento/icon-codex.svg');
}

.trybento .trybento-actions .trybento-install {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 var(--tabs-lift) 0 var(--line);
  color: var(--ink-nav);
}

.trybento .trybento-actions .trybento-install .case-reach-icon {
  background: var(--case-reach-icon);
}

@media (hover: hover) {
  .trybento .trybento-actions .trybento-codex:hover {
    border-color: var(--reach-hover);
    background: var(--reach-hover);
  }

  .trybento .trybento-actions .trybento-install:hover {
    background: var(--case-reach-tray-hover);
  }
}

/* A phone: the picture and the words together in the card's middle, in either order. A tap on the picture opens the
   build in a tab. */
@media (max-width: 699px) {
  .trybento,
  .trybento[data-order="words"] {
    justify-content: center;
    padding-top: var(--trybento-inset);
  }

  .trybento-demo {
    flex: none;
    min-height: 0;
  }

  .trybento-screen {
    flex: none;
    width: 100%;
    aspect-ratio: 3456 / calc(1182 * var(--trybento-still-crop));
  }
}