/*
 * momstory.app/share-video — the look of the video upload page (plan INC-101).
 *
 * Loaded after home.css and doc.css and takes everything from them: fonts,
 * both themes' colors, the header, the footer, the theme switch and the
 * page title block. 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 this page, number for number. Left out: the home
 * page video section, the player and the voting window (they belong to the
 * home page), the mockup's state picker and its stand-in frames.
 * Added: the preview canvas and the cover image in "My videos", which the
 * mockup drew as stand-in frames, and Apple's logo in the sign-in button.
 *
 * Colors are the theme variables of home.css only. Tap targets are 48 or
 * more, text 12 or more. A separate file, not a <style> block: the site's
 * Content Security Policy (style-src 'self') ignores inline styles.
 */

/* Scroll lock while the delete dialog is open. 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; }

.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; }

/* ═══ Buttons ═════════════════════════════════════════════════════════════ */

/* 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); }
/* A dimmed button keeps focus: pressing it says what is missing */
.cta[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.pill--wide { width: 100%; margin-top: 24px; }

/* Sign in with Apple: white on the dark theme, black on the light one, as Apple
   asks. The page draws the button itself (Apple's window opens from it), so it
   carries Apple's logo, as on the invite page /r/. */
.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; }
.apple[aria-busy="true"] { cursor: progress; }

.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); }

.signed { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.signed svg { color: var(--c-values); }

/* Short message at the bottom of the screen */
.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); }

/* ═══ Steps ═══════════════════════════════════════════════════════════════ */

.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; }

/* ═══ Page ════════════════════════════════════════════════════════════════ */

/* Steps on the left; sign-in, form and "My videos" on the right. Below 960 — one column. */
.sv { padding: clamp(32px, 5vw, 64px) 0 clamp(72px, 10vw, 120px); }
.sv__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 640px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sv .share__steps { grid-template-columns: minmax(0, 1fr); margin-top: 0; position: sticky; top: 100px; }
.sv__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.panel { padding: 28px; border-radius: 24px; background: var(--soft); border: 1px solid var(--hair); }
.panel__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.25; text-wrap: balance; }
.panel__title:focus { outline: none; }
.panel__sub { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.sv__signed { font-size: 15px; min-height: 24px; }

/* Sign in */
.sv__signin { text-align: center; }
.sv__signin .panel__title { margin-top: 16px; }
.signin__cam {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--gold);
}
.sv__signin .banner { margin-top: 20px; text-align: left; }
.sv__signin .apple { margin-top: 20px; }

/* Banners — as on the invite page (INC-95): grey "not completed", red for a failure */
.banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--tile); border: 1px solid var(--hair);
}
.banner__i { flex: none; margin-top: 2px; color: var(--muted); }
.banner__t { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--text); }
.banner__s { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.banner--red { background: color-mix(in srgb, var(--c-fears) 12%, transparent); border-color: color-mix(in srgb, var(--c-fears) 32%, transparent); }
.banner--red .banner__i, .banner--red .banner__t { color: var(--c-fears); }

/* Hint inside in-app browsers — words and look of the invite page's hint (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);
}

/* ═══ Form ════════════════════════════════════════════════════════════════ */

.up { display: flex; flex-direction: column; }
.up__fields { border: 0; min-width: 0; display: flex; flex-direction: column; }
.up__file { display: flex; flex-direction: column; gap: 12px; }
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 148px; padding: 20px; border-radius: 18px; cursor: pointer; text-align: center;
  border: 2px dashed var(--chip-line); background: var(--chip);
  transition: border-color .2s;
}
.drop:hover { border-color: var(--gold); }
.drop__ico { color: var(--gold); }
.drop__t { font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--text); }
.drop__s { font-size: 14px; line-height: 1.45; color: var(--muted); }
/* Once a file is chosen, the picker shrinks to one "Choose another video" button */
.drop.is-compact { flex-direction: row; min-height: 48px; padding: 0 16px; border-width: 1px; border-style: solid; border-color: var(--hair); background: var(--tile); }
.drop.is-compact .drop__ico svg { width: 20px; height: 20px; }
.drop.is-compact .drop__t { font-size: 15px; }
.drop.is-compact .drop__s { display: none; }
/* The file field itself is hidden; keyboard focus shows on its label */
#up-file:focus-visible ~ .drop { outline: 3px solid var(--violet); outline-offset: 3px; }
.up__fields:disabled .drop { cursor: default; opacity: .6; }

.picked { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: 18px; background: var(--soft); border: 1px solid var(--hair); }
/* The chosen video's own frame, drawn on a canvas; the same canvas becomes the cover */
.picked__th { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--tile); }
.picked__cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.picked__info { min-width: 0; }
.picked__name { font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.picked__meta { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 2px; }

.field { margin-top: 22px; }
.field__l { display: block; font-size: 15px; font-weight: 800; line-height: 1.45; color: var(--text); }
/* The gap before "Optional" is a space, not a margin: on a phone a wrapped
   word would otherwise start off the label's edge. */
.field__l span { font-weight: 700; color: var(--muted); white-space: nowrap; }
.field__i {
  width: 100%; min-height: 50px; margin-top: 8px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--hair); background: var(--tile); color: var(--text);
  font: 500 16px 'Nunito', sans-serif;
}
.field__i::placeholder { color: var(--muted); opacity: .75; }
.field__i[aria-invalid="true"], .field__i.miss { border-color: var(--c-fears); }
.field__h { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 6px; text-wrap: pretty; }
.field__h a { color: var(--violet-link); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.err { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--c-fears); }
.field .err { margin-top: 6px; }

.checks { border: 0; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.checks__l { font-size: 15px; font-weight: 800; line-height: 1.45; color: var(--text); margin-bottom: 2px; padding: 0; }
.check {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start;
  min-height: 48px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--soft);
  font-size: 15px; line-height: 1.5; color: var(--text);
  transition: border-color .2s, background-color .2s;
}
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold); cursor: pointer; }
.check:has(input:checked) { border-color: var(--chip-line); background: var(--chip); }
/* What is missing lights up after a press on the dimmed button */
.drop.miss, .check.miss { border-color: var(--c-fears); }

.up > .banner { margin-top: 24px; }
.up .cta { margin-top: 24px; }
.up__need { font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; margin-top: 10px; }
.up__need.miss { color: var(--c-fears); font-weight: 700; }
/* Terms and Privacy Policy under "Send video". The links are inline: 14 above and
   below grow the tap area to 47 without spreading the lines (as on the invite
   page). The line sits 16 below the button, not 6: the tap area starts 13 above
   the line, and at 6 it covered the button's lower 7 points. */
.up__legal { font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; margin-top: 16px; }
.up__legal a { padding: 14px 0; color: var(--violet-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* "Preparing your video…" and "Sending…" with a share of progress */
.prog { margin-top: 24px; padding: 16px 18px 18px; border-radius: 16px; background: var(--chip); border: 1px solid var(--chip-line); }
.prog__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prog__t { font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--text); }
.prog__n { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--gold); font-variant-numeric: tabular-nums; }
.prog__bar { height: 8px; margin-top: 12px; border-radius: 9999px; background: var(--tile); overflow: hidden; }
.prog__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cta-a) 0%, var(--cta-b) 100%); }

.up__done { text-align: center; padding-top: 8px; }
.up__done .panel__title { margin-top: 16px; }
.done__ico {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-values) 16%, transparent); color: var(--c-values);
}

/* ═══ My videos ═══════════════════════════════════════════════════════════ */

.mine__list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.mine__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: 18px; background: var(--soft); border: 1px solid var(--hair); }
/* The video's cover; a plain tile when there is none (a video that was not published) */
.mine__th { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--tile); }
.mine__th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mine__info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.mine__date { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--text); }
.mine__note { font-size: 14px; line-height: 1.45; color: var(--muted); }
.mine__empty { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 22px; padding: 20px; text-align: center; border-radius: 18px; border: 1px dashed var(--hair); }
#mine .cta { margin-top: 22px; }

.status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 9999px; font-size: 13px; font-weight: 800; line-height: 1.3; }
.status--review { color: var(--gold); background: var(--chip); border: 1px solid var(--chip-line); }
.status--published { color: var(--c-values); background: color-mix(in srgb, var(--c-values) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-values) 32%, transparent); }
.status--rejected { color: var(--muted); background: var(--tile); border: 1px solid var(--hair); }

.del {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 0 14px; margin-top: 2px; 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;
}
.del:hover { border-color: var(--c-fears); color: var(--c-fears); }
.del[aria-busy="true"] { cursor: progress; }

/* ═══ Delete dialog ═══════════════════════════════════════════════════════ */

.confirm {
  color: var(--text); background: var(--bg); border: 1px solid var(--hair);
  margin: auto; max-width: none; max-height: none;
  width: min(400px, calc(100% - 48px)); border-radius: 24px; padding: 32px 28px 20px; text-align: center;
}
.confirm::backdrop { background: rgba(10, 7, 20, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.signin__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.25; margin-top: 16px; text-wrap: balance; }
.confirm .signin__title { margin-top: 0; }
.signin__text { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.danger {
  width: 100%; min-height: 50px; margin-top: 24px; border: 0; border-radius: 12px; cursor: pointer;
  font: 800 16px 'Nunito', sans-serif; color: var(--bg); background: var(--c-fears);
}

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

@media (max-width: 960px) {
  .sv__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sv .share__steps { position: static; }
}
@media (max-width: 720px) {
  .panel { padding: 22px; }
  .panel__title { font-size: 26px; }
  .share__steps { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .cta, .drop, .check, .del { transition: none; }
  .cta:hover:not([aria-disabled="true"]) { transform: none; }
}