/* Shortnshare video block: one player, two languages.
   Used on the landing page (full video) and on /help (tutorial).
   Tokens only; loaded after sns.css. */

.vd { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; }

.vd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.vd-lang { width: auto; flex: 0 0 auto; }
.vd-lang .sns-segment-btn { height: 36px; font-size: var(--fs-sm); padding: 0 var(--s-3); white-space: nowrap; }

.vd-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--sns-line);
  background: var(--sns-ink);
  box-shadow: var(--sh-md);
}

.vd-player { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--sns-ink); }

.vd-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vd-chapters[hidden] { display: none; }

.vd-chapter {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-sm);
  background: var(--sns-surface);
  color: var(--sns-ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.vd-chapter:hover { border-color: var(--sns-line-strong); background: var(--sns-surface-2); }
.vd-chapter:focus-visible { outline: none; box-shadow: var(--sns-focus-ring); }
.vd-chapter[aria-current="true"] { border-color: var(--sns-brand); background: var(--sns-brand-tint); color: var(--sns-brand-ink); }
.vd-chapter-time { font-variant-numeric: tabular-nums; color: var(--sns-ink-4); min-width: 2.6em; }
.vd-chapter[aria-current="true"] .vd-chapter-time { color: var(--sns-brand-ink); }

/* Landing page section */
.lp-video-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--s-8); }
.lp-video-head .lp-body { max-width: 560px; margin-top: var(--s-3); }
.lp-video-wrap { max-width: 880px; margin-inline: auto; }
.lp-video-more { display: flex; justify-content: center; margin-top: var(--s-6); }

/* Help page section */
.hp-video .sns-card { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-video-sub { margin: 0; color: var(--sns-ink-3); }