/* css/pages/landing.css — Landing page specific styles */

.page-landing {
  background-color: var(--color-brand-soft);
  min-height: 100vh;
}

/* ── Greeting area — open text block, no card shell (PR9-T1) ── */
.landing-greeting-area {
  padding-block: var(--space-8) var(--space-3);
}

.landing-greeting {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.landing-tagline {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Upload Section ── */

.upload-section,
.account-settings-section {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-7);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.upload-section__title,
.account-settings-section__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.upload-section__sub,
.account-settings-section__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

/* ── Upload Section — Empty State (PR10-T1) ── */

.upload-section__empty-state {
  text-align: center;
  padding-block: var(--space-4) var(--space-5);
}

.upload-section__empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.upload-section__empty-heading {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.upload-section__empty-subtext {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* ── Upload Section — Empty-State CTA Group (PR10-T2) ──────────────────── */
/*
 * Layout for the dual Upload Video / Record Video CTAs shown in the
 * empty-state (0 videos). Both buttons live inside #upload-form-container
 * as siblings of .upload-section__empty-state.
 *
 * Desktop (>=768px): side-by-side flex row, centred.
 * Mobile (<=767px):  stacked full-width column.
 *
 * GOTCHA: Do NOT toggle .upload-section__cta-group directly with a [hidden]
 * attribute — display:flex overrides the UA display:none that [hidden] normally
 * provides (ENGINEERING_LESSONS.md 2026-03-18). The parent #upload-form-container
 * is the correct toggle target; its hidden state propagates to all children.
 */
.upload-section__cta-group {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

/* Unsupported-browser helper text sits below the button pair — centre it
   so it aligns with the centred button row and the centred empty-state above. */
.upload-section__cta-group + .record-unsupported-msg {
  text-align: center;
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .upload-section__cta-group {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Full-width buttons on mobile — ensures >=44px touch target height
     (min-height already provided by .btn base rule). */
  .upload-section__cta-group .btn {
    width: 100%;
  }
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.upload-file-input {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  cursor: pointer;
}

.upload-file-input:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Progress bar */
.upload-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.upload-progress__track {
  flex: 1;
  height: 8px;
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-progress__fill {
  height: 100%;
  background-color: var(--color-brand-primary);
  border-radius: var(--radius-full);
  transition: width 150ms ease;
}

.upload-progress__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  min-width: 3rem;
  text-align: right;
}

/* Success state */
.upload-success {
  text-align: center;
  padding: var(--space-6);
}

.upload-success__icon {
  display: block;
  margin: 0 auto var(--space-4);
}

.upload-success__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  margin-bottom: var(--space-3);
}

.upload-success__detail {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Already-done state */
.upload-already-done {
  text-align: center;
  padding: var(--space-6);
}

.upload-already-done__icon {
  display: block;
  margin: 0 auto var(--space-4);
}

.upload-already-done__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
}

/* ── Has-video state — action button group ──────────────────────────────── */
/*
 * Canonical mobile pattern: flex-direction:column + .btn { width:100% } at ≤767px.
 * Matches .account-settings-section__actions (PR9-T3) and the delete dialog
 * (.dialog-actions, PR7-T5) — see UX_DESIGN_GUIDELINES.md "Mobile Action Button
 * Groups — Canonical Pattern — 2026-03-22".
 *
 * GOTCHA: Do NOT use [hidden] on .upload-already-done__actions itself.
 * The parent #upload-already-done is the toggle target. display:flex on this
 * container would override the UA display:none that [hidden] provides.
 * (ENGINEERING_LESSONS.md: "modal-backdrop CSS display:flex overrides [hidden]")
 */
.upload-already-done__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* Hidden utility for upload section states */
.hidden {
  display: none !important;
}

/* ── Video Card ── */

.video-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface-raised, #f9fafb);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  margin-top: var(--space-4);
}

/* Info strip: always horizontal flex — icon, title, tags, badge in one line */
.video-card__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  min-width: 0;          /* required: prevents flex item from overflowing */
  gap: var(--space-3);
}

.video-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

/* Title column: truncate with ellipsis, never wraps */
.video-card__filename {
  flex: 2;
  min-width: 0;           /* required for text-overflow on a flex item */
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tags column: wrap up to 2 lines, overflow hidden */
.video-card__tags {
  flex: 1.5;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* Action buttons: horizontal row on desktop */
.video-card__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* MANDATORY: flex parent overrides UA default display:none for [hidden].
   This guard ensures the Watch button stays hidden in the removed state
   even when .video-card__actions has display:flex.
   Pattern established in PR Track 7 Task 4. Do not remove.
   QA note (ENGINEERING_LESSONS.md): without this rule the Watch button
   would remain visible after the parent becomes a flex container. */
.video-card__actions [hidden] {
  display: none !important;
}

@media (max-width: 639px) {
  /* Card becomes two-row: info strip on top, action buttons below */
  .video-card {
    flex-direction: column;
    align-items: stretch;
  }

  /* Info strip stays horizontal — no change to .video-card__info */

  /* Action buttons stack vertically, full width */
  .video-card__actions {
    flex-direction: column;
    width: 100%;
  }

  .video-card__actions .btn {
    width: 100%;
  }
}

/* ── Status Badge ── */

.video-badge {
  display: inline-block;
  flex-shrink: 0;           /* badge column: does not shrink below content width in flex layout */
  padding: 2px var(--space-2, 8px);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}

/* Scheduled — neutral grey */
.video-badge--scheduled {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* Sent — blue */
.video-badge--sent {
  background-color: #EBF4FF;
  color: #1D4ED8;
}

/* Watched — amber */
.video-badge--watched {
  background-color: #FEF3C7;
  color: #B45309;
}

/* Removed — muted grey */
.video-badge--removed {
  background-color: #F3F4F6;
  color: #9CA3AF;
}

/* ══════════════════════════════════════════════
   Account Settings Section — PR9-T3
   Card shell, __title, __sub shared with .upload-section above.
   ══════════════════════════════════════════════ */

.account-settings-section__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .account-settings-section__actions {
    flex-direction: column;
  }

  .account-settings-section__actions .btn {
    width: 100%;
  }

  /* Profile info rows: stack vertically on mobile */
  .profile-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .profile-info-row__label {
    min-width: unset;   /* label does not need fixed width when stacked */
  }

  /* Full-width Edit button on mobile — ≥44px touch target guaranteed by .btn--sm min-height */
  .profile-info-row .btn--sm {
    width: 100%;
  }
}

/* ── Small button modifier — profile row "Edit" button ──────────────────── */
/*
 * Reduces horizontal padding and font-size while preserving min-height:44px
 * for WCAG 2.5.5 touch target compliance (44×44 px minimum).
 * Defined in landing.css (not components.css): single-use modifier for the
 * profile "Edit" button. Promote to components.css if used on other pages.
 */
.btn--sm {
  padding: 0.375rem 0.875rem;
  font-size: var(--text-sm);
  min-height: 44px;
}

/* ══════════════════════════════════════════════
   Profile Information Subsection — PR12-T1
   ══════════════════════════════════════════════ */

.profile-info-subsection {
  margin-bottom: var(--space-5);
}

.profile-info-subsection__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* ── Profile row — label | value | action ────────────────────────────── */
/*
 * Desktop: single flex row. Label is fixed-width, value fills remaining
 * space, button is right-aligned at the end.
 * Mobile (≤767px): stacks vertically — label → value → full-width button.
 * Follows the canonical stacked-mobile pattern (delete dialog, record modal).
 *
 * GOTCHA: Do NOT use [hidden] directly on .profile-info-row — display:flex
 * overrides the UA display:none that [hidden] normally provides
 * (ENGINEERING_LESSONS.md: "modal-backdrop CSS display:flex overrides [hidden]").
 * Task 2 edit-mode toggling MUST target child elements; the [hidden] guard
 * below is MANDATORY.
 */
.profile-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

/* Remove bottom border on the last row — the <hr> divider below provides separation */
.profile-info-row:last-of-type {
  border-bottom: none;
}

.profile-info-row__label {
  flex-shrink: 0;
  min-width: 140px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.profile-info-row__value {
  flex: 1;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  min-width: 0;            /* allows text truncation in flex child */
  word-break: break-word;
}

/* Email row: value and "(cannot be changed)" annotation on the same line */
.profile-info-row__value-group {
  display: flex;
  flex: 1;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

/* "(cannot be changed)" — muted, non-actionable annotation */
.profile-info-row__annotation {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Divider between Profile Information subsection and account action buttons */
.profile-info-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 var(--space-5) 0;
}

/*
 * MANDATORY [hidden] guard inside profile rows.
 * display:flex on .profile-info-row overrides the UA display:none that
 * [hidden] provides. Without this, Task 2's edit-mode toggle (which hides
 * the value span and shows the input) would fail silently.
 * Follows the same pattern as:
 *   .video-card__actions [hidden] (PR7-T4)
 *   #delete-account-dialog [hidden] (PR7-T5)
 *   #record-video-modal [hidden] (PR8-T3)
 */
.profile-info-row [hidden] {
  display: none !important;
}

/* ══════════════════════════════════════════════
   Delete Account Dialog — PR7-T5
   ══════════════════════════════════════════════ */

#delete-account-dialog {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6);
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
}

#delete-account-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

#delete-account-dialog h2 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

#delete-account-dialog p {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

#delete-confirm-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--space-5);
  /* Inherits existing .form-input styles from components.css */
}

.dialog-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

#delete-account-error {
  margin-top: var(--space-3);
  margin-bottom: 0;
  color: var(--color-error);
  font-size: var(--text-sm);
}

/*
 * Engineering lesson (2026-03-18): CSS display:flex overrides [hidden] attribute.
 * Explicitly enforce display:none for any [hidden] element inside this dialog.
 * Without this, #delete-account-error remains visible even with the hidden attribute.
 */
#delete-account-dialog [hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .upload-section,
  .account-settings-section {
    padding: var(--space-5);
  }

  #delete-account-dialog {
    /* 100vw minus var(--space-5) horizontal margin on each side */
    width: calc(100vw - var(--space-5) * 2);
    max-width: none;
    padding: var(--space-6) var(--space-5);
  }

  /* PR13-T3: Delete Video dialog — same mobile sizing as delete-account-dialog */
  #delete-video-dialog {
    width: calc(100vw - var(--space-5) * 2);
    max-width: none;
    padding: var(--space-6) var(--space-5);
  }

  .dialog-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Full-width buttons on mobile; Cancel on top because it is first in DOM */
  .dialog-actions .btn {
    width: 100%;
  }

  .upload-already-done__actions {
    flex-direction: column;
  }

  /* Full-width buttons on mobile — ensures ≥44px touch target height.
     Applies to both the enabled (under-limit) and disabled (at-limit) states. */
  .upload-already-done__actions .btn {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════
   Record Video Modal — PR8-T3
   ══════════════════════════════════════════════ */

/* Modal size override: wider than standard 440px to better fit video preview */
.modal--record {
  max-width: 520px;
}

/* The record-video backdrop must NOT intercept pointer events so the language
   toggle in the nav remains clickable while the modal is open (TC-E11–E13).
   The inner .modal panel keeps pointer-events:auto via explicit override. */
#record-video-modal.modal-backdrop:not([hidden]) {
  pointer-events: none;
}
#record-video-modal .modal {
  pointer-events: auto;
}

/* TC-E-13-2-10: The create-video modal backdrop must NOT intercept pointer
   events so the language-toggle nav button (z-index:100, behind the backdrop
   at z-index:200) remains clickable while the modal is open.
   Backdrop-click-to-close is preserved by .modal-close-overlay: it starts at
   top:60px (below the fixed nav bar, height:60px) so the nav area is kept
   pointer-event-free, while clicks in the backdrop area below the nav are
   still captured and bubble up to close the modal.
   PR7-E-07 clicks at {x:5,y:200} (below nav, outside centered modal panel)
   to hit the overlay — see video-upload.spec.js. */
#create-video-modal.modal-backdrop:not([hidden]) {
  pointer-events: none;
}
#create-video-modal .modal-close-overlay {
  position: absolute;
  top: 60px;   /* start below the fixed nav bar (height:60px) */
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: 0;
}
#create-video-modal .modal {
  pointer-events: auto;
  z-index: 1;
}

/* [hidden] guard inside flex ancestors.
   MANDATORY: same pattern as .video-card__actions [hidden] (PR7-T4) and
   #delete-account-dialog [hidden] (PR7-T5). Without this, any [hidden] element
   inside a flex row stays visible because display:flex overrides UA display:none.
   See ENGINEERING_LESSONS.md: "modal-backdrop CSS display:flex overrides [hidden]" */
#record-video-modal [hidden] {
  display: none !important;
}

/* .form-error visibility pattern — ENGINEERING_LESSONS: toggle BOTH hidden attr AND .visible */
#record-video-modal .form-error {
  display: none;
}
#record-video-modal .form-error.visible {
  display: block;
}

/* ── Preview container ── */
.record-preview-container {
  position: relative;  /* anchor for the camera-switch overlay button */
  background: var(--color-surface-raised, #f5f5f7);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Loading placeholder ── */
.record-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-text-secondary);
}

/* ── CSS spinner (no external dependency) ── */
.record-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-brand-primary);
  border-radius: 50%;
  animation: record-spin 0.8s linear infinite;
}

@keyframes record-spin {
  to { transform: rotate(360deg); }
}

/* ── Live preview + recorded playback shared styles ── */
.record-preview-video {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
  background: #000;
}

/* ── Camera denied error ── */
.record-camera-error {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ── Camera-switch button: overlaid top-right of preview; mobile only ── */
.record-switch-camera-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;    /* WCAG touch target minimum */
  min-height: 44px;
  display: none;      /* hidden on desktop — shown via media query below */
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--duration-fast, 150ms);
}

.record-switch-camera-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.record-switch-camera-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .record-switch-camera-btn {
    display: flex;  /* show on mobile only */
  }
}

/* ── REC indicator ── */
.record-rec-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-error, #D70015);
  margin-bottom: var(--space-2);
}

.record-rec-dot {
  animation: record-pulse 1s ease-in-out infinite;
}

@keyframes record-pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.2; }
}

/* ── Elapsed timer ── */
.record-elapsed-timer {
  text-align: center;
  font-variant-numeric: tabular-nums;  /* fixed-width digits: prevents layout jitter */
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

/* ── Phase 2 action buttons ── */
.record-phase2-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* "Use this recording" expands to fill available space */
.record-phase2-actions .btn-primary {
  flex: 1;
}

/* Mobile: stack vertically full-width; top = primary ("Use this recording") */
@media (max-width: 767px) {
  .record-phase2-actions {
    flex-direction: column;
  }
  .record-phase2-actions .btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PR12-T2: Inline Display Name Edit — input, action buttons, feedback
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Edit-mode input ── */
/* Matches the style of other input fields in the codebase.
   Sits inside .profile-info-row and is hidden by the existing
   .profile-info-row [hidden] { display: none !important } guard from PR12-T1. */
.profile-name-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface);
  min-width: 0;                     /* prevent flex overflow */
}

.profile-name-input:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 1px;
  border-color: var(--color-brand-primary);
}

/* ── Save + Cancel button group (desktop: inline flex row) ── */
/* Toggling [hidden] directly on this element IS safe because the parent-row rule
   .profile-info-row [hidden] { display: none !important } (PR12-T1) covers child
   elements and overrides display:flex when hidden is set.
   (ENGINEERING_LESSONS.md 2026-03-18 — confirmed working via TC-E01 and TC-E13) */
.profile-name-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ── Save + Cancel — mobile stacking (≤767px) ── */
/* Save is first in DOM → natural column order places it on top. No CSS order override needed. */
@media (max-width: 767px) {
  .profile-name-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .profile-name-actions .btn {
    width: 100%;
  }
}

/* ── Feedback paragraph ── */
/* Adjacent sibling OUTSIDE .profile-info-row — no flex ancestor, so plain [hidden] is sufficient.
   (ARCHITECTURE_DECISIONS.md PR Track 12 T2 + ENGINEERING_LESSONS.md 2026-03-18)
   Colour (success: var(--color-success) / error: var(--color-error)) is set by JS inline style. */
.profile-name-feedback {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════
   Delete Video Dialog — PR Track 13 Task 3
   (CSS guard added proactively in Task 1 so
   Task 3 requires no separate CSS-only change)
   ══════════════════════════════════════════════ */

#delete-video-dialog {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6);
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
}

#delete-video-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/*
 * MANDATORY [hidden] guard.
 * display:flex on child elements overrides UA display:none for [hidden].
 * Same pattern as #delete-account-dialog [hidden] (PR7-T5),
 * .video-card__actions [hidden] (PR7-T4).
 */
#delete-video-dialog [hidden] {
  display: none !important;
}

/* ── Edit-mode inline error (Task 13-2) ── */
/* #upload-edit-error is a sibling of #upload-submit, not inside a flex container.
   Explicit show/hide rules prevent future regressions if flex layout changes.
   Per ENGINEERING_LESSONS.md 2026-03-19: always toggle BOTH hidden attr AND .visible class. */
#upload-edit-error.form-error { display: none; }
#upload-edit-error.form-error.visible { display: block; }