/* -------------------------------------------------------------------------- */
/* Home — Viser embed strip (rounded viewers, no window chrome)               */
/* -------------------------------------------------------------------------- */

.osc-home-viser .osc-home-viser__code {
  font-size: 0.88em;
  padding: 0.08em 0.35em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--md-typeset-color) 8%, var(--md-default-bg-color));
}

[data-md-color-scheme="slate"] .osc-home-viser .osc-home-viser__code {
  background: color-mix(in srgb, var(--osc-palette-4) 8%, transparent);
}

.osc-home-viser .osc-home-dropin__inner {
  /* Default drop-in inner is 52rem; widen so two viewers can scale up. */
  max-width: min(94vw, 80rem);
}

.osc-home-viser__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2.5vw, 1.5rem);
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}

@media (max-width: 860px) {
  .osc-home-viser__grid {
    grid-template-columns: 1fr;
  }
}

/* Avoid Material ``.md-typeset figure`` centering / max-width so the link stays under its iframe. */
.osc-home-viser__cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.osc-home-viser__caption {
  margin: 0 0 0.45rem;
  font-size: clamp(0.78rem, 1vw + 0.55rem, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--md-typeset-color) 88%, transparent);
  text-align: center;
  text-wrap: balance;
}

/* Stack iframe + doc link as one column so the link sits directly under the rounded viewer. */
.osc-home-viser__plot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.osc-home-viser__example-link-row {
  margin: 0.5rem 0 0;
  margin-block-end: 0;
  padding: 0;
  font-size: clamp(0.8rem, 1vw + 0.52rem, 0.9rem);
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
}

.osc-home-viser__example-link {
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.osc-home-viser__iframe-shell {
  position: relative;
  border-radius: clamp(12px, 2vw, 16px);
  /* Clip embedded Viser’s top titlebar (playback client always mounts it when the recording includes
     titlebar theme data). Iframe is taller than the shell and shifted up so only the canvas fills
     the rounded viewport; bottom playback bar stays in view inside the iframe. */
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: clamp(220px, 28vw, 320px);
  max-height: min(68vh, 560px);
  background: color-mix(in srgb, var(--md-typeset-color) 6%, var(--md-default-bg-color));
  border: 1px solid color-mix(in srgb, var(--md-typeset-color) 12%, transparent);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--osc-palette-1) 5%, transparent),
    0 10px 28px color-mix(in srgb, var(--osc-palette-1) 8%, transparent);
}

[data-md-color-scheme="slate"] .osc-home-viser__iframe-shell {
  background: color-mix(in srgb, var(--osc-palette-4) 5%, var(--osc-palette-1));
  border-color: color-mix(in srgb, var(--md-typeset-color) 14%, transparent);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--osc-palette-1) 35%, transparent),
    0 12px 32px color-mix(in srgb, var(--osc-palette-1) 40%, transparent);
}

[data-md-color-scheme="default"][data-md-color-primary="custom"][data-md-color-accent="custom"]
  .osc-home-viser__iframe-shell {
  background: color-mix(in srgb, var(--osc-palette-4) 96%, var(--osc-palette-3) 4%);
  border-color: color-mix(in srgb, var(--osc-palette-1) 12%, transparent);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--osc-palette-1) 6%, transparent),
    0 10px 26px color-mix(in srgb, var(--osc-palette-1) 10%, transparent);
}

.osc-home-viser__iframe {
  position: absolute;
  left: 0;
  width: 100%;
  /* Match Viser titlebar stack height (~48px); tweak if client/theme updates leave a sliver. */
  --osc-viser-titlebar-offset: 3rem;
  top: calc(-1 * var(--osc-viser-titlebar-offset));
  height: calc(100% + var(--osc-viser-titlebar-offset));
  border: 0;
  display: block;
}

.osc-home-viser__hint {
  margin: clamp(1rem, 2.5vw, 1.35rem) auto 0;
  max-width: min(56rem, 100%);
  font-size: clamp(0.78rem, 1.1vw + 0.52rem, 0.88rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--md-typeset-color) 68%, transparent);
  text-wrap: pretty;
}

.osc-home-viser__hint .osc-home-viser__code {
  font-size: inherit;
}