/*
 * momstory.app, home page: the "Watch kids react" video section (#videos).
 * Styles only; behaviour is in videos.js.
 *
 * Loaded after home.css and takes everything from it: fonts, both themes'
 * colors, .pill, .badge, .note, .free, .eyebrow, .h2, .amb, .wrap. The rules
 * below are the approved mockup's (docs/design_proposals/
 * 2026-09-29_site-video-reviews/video-reviews.css in the app repository) for
 * the home page, number for number: the section, the feed, the player and
 * "Sign in with Apple to vote" windows, and the "For MomStory parents" block.
 * Left out: the upload page, the delete dialog and the mockup's stand-in
 * frames. Added: the real cover and video, the dark frame behind them, the
 * in-app browser hint of the upload page, and the "No videos yet" line.
 *
 * A separate file, because the site's security policy (style-src 'self') does
 * not apply inline styles. Colors come only from the theme variables in
 * home.css, so the section follows the theme switch in the footer. The one
 * fixed color is the dark video frame (#0a0714, the site's night background
 * and the base of the mockup's stand-in frames): it shows a video, not the
 * site theme, and looks the same in both themes. Tap targets are 48 points or
 * more, text 12 or more.
 */

:root { --heart: var(--c-fears); }

/* ═══ Section ════════════════════════════════════════════════════════════ */

.reviews { padding: clamp(72px, 10vw, 136px) 0; border-top: 1px solid var(--hair); }
.reviews .amb {
  background:
    radial-gradient(55% 45% at 92% 16%, var(--amb-violet) 0%, transparent 60%),
    radial-gradient(50% 40% at 4% 86%, var(--amb-gold) 0%, transparent 60%);
}
.reviews__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.reviews__intro { display: flex; flex-direction: column; gap: 16px; }

/* Control row: sort switch, heart hint, arrows */
.reviews__bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 16px 24px; margin: 44px 0 18px;
}
.seg { justify-self: start; display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); border: 1px solid var(--hair); }
.seg button {
  min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap;
  font: 700 14px 'Nunito', sans-serif; color: var(--muted); background: transparent;
}
.seg button[aria-pressed="true"] { background: var(--tile); color: var(--text); box-shadow: 0 0 0 1px var(--hair); }
.vote-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.vote-hint .heart__i { color: var(--heart); flex: none; }
.signed { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.signed svg { color: var(--c-values); }
/* M18: "Remove my votes" is a button that looks like a link, tap target 48 */
.unvote {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; border: 0; cursor: pointer;
  font: 800 15px 'Nunito', sans-serif; color: var(--violet-link); background: transparent;
}
.unvote:hover { text-decoration: underline; text-underline-offset: 3px; }
.arrows { display: flex; gap: 8px; }
/* No videos, the feed did not load, or it has not answered yet (plan INC-101,
   R5): the sort switch, the heart hint and both arrows are hidden, and the
   empty box of the arrows goes too, so that the control row keeps no item at
   all. */
.arrows:not(:has(> :not([hidden]))) { display: none; }
.arrow {
  width: 48px; height: 48px; border-radius: 9999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tile); border: 1px solid var(--hair); color: var(--text);
  transition: border-color .2s, opacity .2s;
}
.arrow:hover:not([aria-disabled="true"]) { border-color: var(--gold); }
.arrow[aria-disabled="true"] { opacity: .35; cursor: default; }

/* ═══ Feed ═══════════════════════════════════════════════════════════════ */

/* 6 points of padding on each side keep the focus ring from being cut by the
   edge of the feed; the negative margin puts the feed back on the column edge. */
.track {
  display: flex; gap: 16px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scroll-behavior: smooth;
  padding: 6px; margin: -6px;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }

/* No videos yet (plan INC-101, R5): the look of the mockup's empty list in
   "My videos"; the margins of the control row above, empty with no videos,
   give the space on top. Balanced lines: at 360 and 390 the line wrapped
   with "yours." alone on the second line (measured 30.09.2026). */
.rv-empty {
  padding: 20px; border-radius: 18px; border: 1px dashed var(--hair);
  font-size: 16px; line-height: 1.5; color: var(--muted); text-align: center;
  text-wrap: balance;
}

.vid {
  flex: 0 0 clamp(236px, 64vw, 268px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  padding: 10px 10px 18px; border-radius: 22px;
  background: var(--soft); border: 1px solid var(--hair);
}

/* Thumbnail: a 3:4 frame, like the video grid of a TikTok profile */
.vid__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0;
  border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; color: #fff;
  background: #0a0714;
}
.vid__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vid__thumb::after, .player__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 7, 20, .35) 0%, transparent 22%, transparent 62%, rgba(10, 7, 20, .6) 100%);
}
.vid__src, .vid__dur {
  position: absolute; z-index: 1; padding: 3px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .3px;
  background: rgba(10, 7, 20, .6); color: #fff;
}
.vid__src { top: 10px; left: 10px; }
.vid__dur { bottom: 10px; right: 10px; font-variant-numeric: tabular-nums; }
.vid__play {
  position: absolute; left: 50%; top: 42%; z-index: 1; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .2s, background-color .2s;
}
.vid__play svg { margin-left: 3px; }
.vid__thumb:hover .vid__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, .32); }

/* Under the thumbnail: the author's name and the heart with the number of
   votes. No child's name or age: that is public information about a child.
   No "Mom's voice / Dad's voice" line (M8). */
.vid__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 0 6px; }
.vid__who { display: contents; }
.vid__who h3 { grid-column: 1; grid-row: 1; min-width: 0; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--text); }
.vid__meta .heart { grid-column: 2; grid-row: 1; }

.heart {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--tile); color: var(--text);
  font: 800 15px 'Nunito', sans-serif; font-variant-numeric: tabular-nums;
  transition: border-color .2s, background-color .2s;
}
.heart:hover { border-color: color-mix(in srgb, var(--heart) 55%, transparent); }
.heart .heart__i { color: var(--heart); }
.heart[aria-pressed="true"] { border-color: color-mix(in srgb, var(--heart) 55%, transparent); background: color-mix(in srgb, var(--heart) 14%, transparent); }
.heart[aria-pressed="true"] .heart__i path { fill: currentColor; }
.heart.pop .heart__i { animation: heart-pop .45s ease; }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* The author's promo code */
.code { padding: 0 6px; }
.code__label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.4; color: var(--gold); }
.code__row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 4px 4px 4px 14px; border-radius: 14px;
  border: 1px dashed var(--chip-line); background: var(--chip);
}
.code__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 800; letter-spacing: 2px; color: var(--text); }
.code__copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 92px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 800 14px 'Nunito', sans-serif; color: var(--text);
  background: var(--tile); border: 1px solid var(--hair);
  transition: border-color .2s, color .2s;
}
.code__copy:hover { border-color: var(--gold); }
.code__copy .i-check { display: none; }
.code__copy.done { color: var(--gold); border-color: var(--chip-line); }
.code__copy.done .i-copy { display: none; }
.code__copy.done .i-check { display: block; }
.vid > .badge { padding: 0 6px; align-self: flex-start; }

/* ═══ Windows: the player and sign-in ════════════════════════════════════ */

/* Scroll lock on body, not on html: body has overflow-x: hidden in home.css,
   and overflow: hidden on html would make body the scroller and send the
   sticky header off screen. */
html.ms-lock body { overflow: hidden; }
.player, .signin {
  color: var(--text); background: var(--bg); border: 1px solid var(--hair);
  padding: 0; margin: auto; max-width: none; max-height: none;
}
.player::backdrop, .signin::backdrop { background: rgba(10, 7, 20, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 48px; height: 48px; border-radius: 9999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tile); border: 1px solid var(--hair); color: var(--text);
}
.x:hover { border-color: var(--gold); }

.player { width: min(880px, calc(100% - 48px)); max-height: calc(100dvh - 48px); border-radius: 24px; overflow: auto; overscroll-behavior: contain; }
.player__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; padding: 24px; align-items: start; }
.player__media { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.player__frame { position: relative; height: min(76dvh, 620px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; color: #fff; background: #0a0714; }
/* The whole picture fits the 9:16 frame: an iPhone video fills it, any other
   shape keeps its edges. */
.player__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.player__play {
  position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 9999px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .25s;
}
.player__play .i-play { margin-left: 4px; }
.player__play .i-pause { display: none; }
.player__play.on { opacity: .55; }
.player__play.on:hover, .player__play.on:focus-visible { opacity: 1; }
.player__play.on .i-pause { display: block; }
.player__play.on .i-play { display: none; }
.player__time { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }
.player__bar { height: 4px; border-radius: 9999px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.player__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.player__times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Under the frame: "Watch on TikTok / Instagram" (when there is a post) and
   "Report this video" (M12). The gap of 16 keeps both on one line at a width
   of 360 (173 + 119 + 16 of 312, measured 29.09.2026). */
.player__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; }
.tt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px;
  font-size: 16px; font-weight: 800; color: var(--violet-link);
}
.tt:hover { text-decoration: underline; text-underline-offset: 3px; }
.report {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: 15px; font-weight: 700; color: var(--muted);
}
.report:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.player__info { display: flex; flex-direction: column; gap: 20px; padding-top: 44px; min-width: 0; }
.player__who { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.player__name { min-width: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 30px; line-height: 1.2; }
.player .code { padding: 0; }
.code__gain { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 10px; }
.code__gain b { color: var(--text); font-weight: 700; }
.player__info .badge { align-self: flex-start; }

.signin { width: min(400px, calc(100% - 48px)); border-radius: 24px; padding: 36px 28px 20px; text-align: center; }
.signin__heart {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--heart) 16%, transparent); color: var(--heart);
}
.signin__heart path { fill: currentColor; }
.signin__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.25; margin-top: 16px; text-wrap: balance; }
.signin__text { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
/* Sign in with Apple: white on the dark theme, black on the light one, as
   Apple's rules ask. Room for Apple's logo, as on the upload page. */
.apple {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; margin-top: 24px; border: 0; border-radius: 12px; cursor: pointer;
  font: 600 17px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background: #fff; color: #000;
}
.apple svg { flex: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .apple { background: #000; color: #fff; } }
:root[data-theme="light"] .apple { background: #000; color: #fff; }
.ghost {
  width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 12px; cursor: pointer;
  font: 700 15px 'Nunito', sans-serif; color: var(--muted); background: transparent;
}
.ghost:hover { color: var(--text); }

/* Inside Instagram and other in-app browsers, in place of the sign-in button:
   the words and look of the upload page's hint (M7, invite page INC-95) */
.hint {
  margin-top: 20px; padding: 18px 18px 8px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, var(--own-a) 0%, var(--own-b) 100%); border: 1px solid var(--own-line);
}
.hint__t { font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--text); }
.hint__s { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.hint ol { list-style: none; margin-top: 10px; }
.hint li { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.hint li b { color: var(--text); font-weight: 700; }
.key {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile); border: 1px solid var(--hair); color: var(--text);
}

/* A short message at the bottom of the screen: "Vote counted", "You already voted" */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 12px);
  width: max-content; max-width: calc(100vw - 48px); padding: 12px 18px; border-radius: 14px;
  font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center;
  background: var(--text); color: var(--bg);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══ For MomStory parents: links to the upload page and three steps ═════ */

/* Main button: gold, like "play" of the story sample; the second one is .pill of home.css */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 24px; border: 0; border-radius: 14px; cursor: pointer;
  font: 800 16px 'Nunito', sans-serif; color: var(--cta-text);
  background: linear-gradient(135deg, var(--cta-a) 0%, var(--cta-b) 100%);
  box-shadow: 0 6px 20px var(--cta-glow);
  transition: transform .2s, opacity .2s;
}
.cta:hover:not([aria-disabled="true"]) { transform: translateY(-1px); }
.cta--auto { width: auto; }

.share {
  margin-top: 44px; padding: 28px; border-radius: 24px;
  background: var(--soft); border: 1px solid var(--hair);
}
.share__tag { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.4; color: var(--gold); }
.share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; }
.share__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin-top: 24px; }
.share__steps li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.share__steps li::before {
  counter-increment: step; content: counter(step); flex: none;
  width: 32px; height: 32px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--gold);
  background: var(--chip); border: 1px solid var(--chip-line);
}
.share__steps li > span { padding-top: 3px; }
.share__steps b { color: var(--text); font-weight: 800; }
.share__steps a { color: var(--violet-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ═══ Narrow screens ═════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .reviews__head { grid-template-columns: 1fr; gap: 20px; }
  .reviews__bar { grid-template-columns: 1fr auto; margin-top: 36px; }
  .vote-hint { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 720px) {
  .player { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .player__in { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 64px 24px 32px; }
  /* A lower frame, so that the code and the App Store badge fit a 390x844
     screen without scrolling the window: under the frame stands the links row
     (M12), and the benefit line grew by "for new Gold subscribers" (M15);
     at 46 the badge ended at 849 of 844 (measured 29.09.2026). */
  .player__frame { height: min(44dvh, 440px); }
  .player__media { align-self: stretch; }
  /* The window takes the whole screen: the close button is pinned to the
     screen and stays put while the window scrolls; a solid background keeps
     it readable over the frame passing under it. */
  .x { position: fixed; background: var(--bg); }
  .player__info { padding-top: 0; }
  .share { padding: 22px; }
  .share__steps { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: the sort switch and the arrows on one line. At a width of 360 they
   get 312 points, so the sort buttons are a little tighter here. */
@media (max-width: 480px) {
  .reviews__bar { column-gap: 10px; }
  .seg button { padding: 0 10px; font-size: 13px; }
  .arrows { gap: 6px; }
  /* "Share your video" and "My videos" take the full width, one under the
     other. On one line they need 338 points; the block has 336 at 430 and 296
     at 390 (measured 29.09.2026), and "My videos" slid to a second line as a
     lone button at the left edge. */
  .share__actions .cta, .share__actions .pill { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .track { scroll-behavior: auto; }
  .heart.pop .heart__i { animation: none; }
  .toast { transition: none; }
  .cta { transition: none; }
  .cta:hover:not([aria-disabled="true"]) { transform: none; }
}