/* ============================================================================
   Film Backpack — Shared Design System
   One source of truth for tokens + components. Linked by every page alongside
   the Tailwind CDN. Tailwind handles layout utilities; this file owns the
   brand: colour, type, spacing, radius, shadow, motion, and the component set
   (buttons, inputs, cards, pills, nav, badges, toasts, skeletons, focus).

   Brand boundary: light base, navy (#0F1D3D) + brand red (#E63946) + forest
   green (#2D6B4F). No Synas branding (no black canvas, no teal).
   ============================================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --fb-navy:        #0F1D3D;
  --fb-navy-700:    #1a2d52;   /* hover/active for navy */
  --fb-navy-900:    #0a1429;   /* deepest */
  --fb-brand:       #E63946;   /* brand red — accent + THE key CTA only */
  --fb-brand-600:   #c62836;   /* brand red hover */
  --fb-forest:      #2D6B4F;   /* success / sustainability */
  --fb-forest-600:  #245a42;
  --fb-cream:       #F5F1EA;   /* warm light surface (marketing) */

  /* Neutrals (light base) */
  --fb-bg:          #F2F2F7;   /* app canvas */
  --fb-surface:     #FFFFFF;   /* cards, panels */
  --fb-surface-2:   #F7F7FB;   /* subtle inset */
  --fb-label:       #1D1D1F;   /* primary text */
  --fb-muted:       #6B6B70;   /* secondary text — darkened from #86868B for AA */
  --fb-faint:       #9A9AA0;   /* tertiary / placeholder */
  --fb-sep:         #E5E5EA;   /* borders, dividers */
  --fb-danger:      #C2261B;   /* destructive — distinct from brand red, AA on white */
  --fb-danger-600:  #a01d14;

  /* Spacing scale (4px base) */
  --fb-s1: 4px;  --fb-s2: 8px;  --fb-s3: 12px; --fb-s4: 16px;
  --fb-s5: 20px; --fb-s6: 24px; --fb-s8: 32px; --fb-s10: 40px;
  --fb-s12: 48px; --fb-s16: 64px; --fb-s20: 80px;

  /* Radius */
  --fb-r-sm: 8px; --fb-r-md: 12px; --fb-r-lg: 16px; --fb-r-xl: 20px; --fb-r-2xl: 28px; --fb-r-pill: 999px;

  /* Shadow (soft, premium, never harsh) */
  --fb-shadow-sm: 0 1px 2px rgba(15,29,61,.06), 0 1px 3px rgba(15,29,61,.04);
  --fb-shadow-md: 0 4px 16px rgba(15,29,61,.08);
  --fb-shadow-lg: 0 12px 32px rgba(15,29,61,.12);
  --fb-shadow-xl: 0 24px 60px rgba(15,29,61,.16);
  --fb-shadow-brand: 0 10px 30px rgba(230,57,70,.30);

  /* Type */
  --fb-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --fb-serif: Georgia, 'Times New Roman', serif;
  --fb-text-xs: 12px; --fb-text-sm: 14px; --fb-text-base: 16px; --fb-text-lg: 18px;
  --fb-text-xl: 22px; --fb-text-2xl: 28px; --fb-text-3xl: 36px; --fb-text-4xl: 48px;

  /* Motion — fast, calm, premium (150–250ms) */
  --fb-ease: cubic-bezier(.4, 0, .2, 1);
  --fb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fb-dur-fast: 150ms;
  --fb-dur: 200ms;
  --fb-dur-slow: 250ms;
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────── */
/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 3. BUTTONS ──────────────────────────────────────────────────────────── */
/* Strict hierarchy:
   accent   = filled red    (THE single key CTA — use once per screen)
   secondary= outline        (alternate action) */
.fb-btn {
  --_bg: var(--fb-navy); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fb-s2);
  padding: 12px 20px; border-radius: var(--fb-r-md);
  font: 600 var(--fb-text-sm)/1 var(--fb-font);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  cursor: pointer; text-decoration: none; transition: transform var(--fb-dur) var(--fb-ease), box-shadow var(--fb-dur) var(--fb-ease), background var(--fb-dur) var(--fb-ease), border-color var(--fb-dur) var(--fb-ease);
  min-height: 44px;  /* touch target */
}
.fb-btn:hover { transform: translateY(-1px); box-shadow: var(--fb-shadow-md); }
.fb-btn:active { transform: translateY(0) scale(.99); }
.fb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.fb-btn--accent    { --_bg: var(--fb-brand); --_fg:#fff; box-shadow: var(--fb-shadow-brand); }
.fb-btn--accent:hover    { background: var(--fb-brand-600); box-shadow: 0 14px 40px rgba(230,57,70,.42); }
.fb-btn--secondary { --_bg: transparent; --_fg: var(--fb-navy); --_bd: var(--fb-sep); }
.fb-btn--secondary:hover { background: var(--fb-surface); border-color: var(--fb-navy); box-shadow: var(--fb-shadow-sm); }
.fb-btn--lg { padding: 16px 30px; font-size: var(--fb-text-base); border-radius: var(--fb-r-lg); }

/* ── 4. PILLS / CHIPS / BADGES ───────────────────────────────────────────── */
.fb-pill {
  display: inline-flex; align-items: center; gap: var(--fb-s2);
  padding: 6px 12px; border-radius: var(--fb-r-pill);
  font: 500 var(--fb-text-xs)/1 var(--fb-font);
  background: var(--fb-surface); color: var(--fb-label); border: 1px solid var(--fb-sep);
  cursor: pointer; text-decoration: none; transition: all var(--fb-dur) var(--fb-ease); min-height: 32px;
}
.fb-pill:hover { border-color: var(--fb-navy); background: var(--fb-surface-2); }

/* ── 7. TOASTS ───────────────────────────────────────────────────────────── */
@keyframes fbToastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── 9. NAV BAR (shared top bar shell) ───────────────────────────────────── */
.fb-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15,29,61,.06);
}

/* ── 10. MOTION HELPERS ──────────────────────────────────────────────────── */
.fb-fade-in { animation: fbFadeIn var(--fb-dur-slow) var(--fb-ease-out); }
@keyframes fbFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── 12. RESPONSIVE HEADER DRAWER (<768px) ───────────────────────────────────
   Shared by every app-chrome page (app, browse, settings, organizer, profile).
   Below 768px the desktop nav ([data-fbp-desktop-nav]) is hidden. */
@media (max-width: 767px) {
  [data-fbp-desktop-nav] { display: none !important; }
}

/* ── 13. MOBILE BOTTOM ACTION BAR (<768px) ───────────────────────────────────
   filmbackpack_mobilebar.js pins #fbpBotbar to the bottom of every app-chrome
   page on phones: Create video + Archive (moved out of the top bar) and a new
   Record action. Icon-only, dark-red, with safe-area padding. The page padding
   that keeps content clear of the bar is gated on html.fbp-botbar-on so pages
   WITHOUT the bar (landing, login, …) are never given dead space. */
:root { --fbp-botbar-h: 60px; }
.fbp-botbar { display: none; }
@media (max-width: 767px) {
  .fbp-botbar {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: #8B1A1F;                                   /* dark red */
    border-top: 1px solid rgba(0, 0, 0, .18);
    box-shadow: 0 -6px 24px rgba(15, 29, 61, .18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fbp-botbar-btn {
    position: relative; flex: 1 1 0; min-width: 0; height: var(--fbp-botbar-h);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: rgba(255, 255, 255, .92) !important; cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background .15s ease;
  }
  .fbp-botbar-btn svg { width: 26px; height: 26px; display: block; }
  .fbp-botbar-btn:hover, .fbp-botbar-btn:active { color: #fff !important; background: rgba(0, 0, 0, .12) !important; }
  .fbp-botbar-btn.is-active { color: #fff !important; }
  .fbp-botbar-btn.is-active::after {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: #fff;
  }
  /* Record — the distinct "new" action on the right: white chip, dark-red icon. */
  .fbp-botbar-rec svg {
    width: 26px; height: 26px; padding: 8px; box-sizing: content-box;
    border-radius: 50%; background: #fff; color: #8B1A1F !important;
  }
  .fbp-botbar-rec:hover, .fbp-botbar-rec:active { background: rgba(0, 0, 0, .12) !important; }

  /* Keep scrollable content clear of the fixed bar (only on bar pages). */
  html.fbp-botbar-on body { padding-bottom: calc(var(--fbp-botbar-h) + env(safe-area-inset-bottom)); }
  html.fbp-botbar-on #mainContent,
  html.fbp-botbar-on #main { padding-bottom: calc(var(--fbp-botbar-h) + env(safe-area-inset-bottom)); }
  /* Float the cookie consent banner above the bar instead of over its icons. */
  html.fbp-botbar-on #fbpCookieBanner { bottom: calc(var(--fbp-botbar-h) + 18px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 768px) {
  .fbp-botbar { display: none !important; }
}

/* Record sheet (camera → archive) — bottom sheet on phones, dialog on wider. */
.fbp-rec-ov {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 29, 61, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fbp-rec-card {
  background: #fff; width: 100%; max-width: 520px;
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); max-height: 92vh; overflow-y: auto;
  font-family: var(--fb-font); animation: fbpRecUp .25s cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 560px) {
  .fbp-rec-ov { align-items: center; }
  .fbp-rec-card { border-radius: 20px; }
}
@keyframes fbpRecUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.fbp-rec-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 800; color: var(--fb-navy); margin-bottom: 12px; }
/* 44px, not 36: a phone has no Escape, so this is the only visible way out of any
   sheet. Used by the bottom bar's record sheet on five pages as well. */
.fbp-rec-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--fb-muted); font-size: 18px; cursor: pointer; border-radius: 10px; }
.fbp-rec-x:hover { background: var(--fb-bg); }
.fbp-rec-preview { width: 100%; max-height: 38vh; background: #000; border-radius: 14px; margin-bottom: 4px; }
.fbp-rec-label { display: block; font: 700 11px/1.4 var(--fb-font); text-transform: uppercase; letter-spacing: .04em; color: var(--fb-muted); margin: 12px 0 5px; }
.fbp-rec-select, .fbp-rec-desc { width: 100%; border: 1px solid var(--fb-sep); border-radius: 12px; padding: 11px 12px; font: 400 15px/1.4 var(--fb-font); color: var(--fb-label); background: var(--fb-surface-2); }
.fbp-rec-select:focus, .fbp-rec-desc:focus { outline: none; border-color: var(--fb-navy); background: #fff; box-shadow: 0 0 0 4px rgba(15, 29, 61, .1); }
.fbp-rec-desc { resize: vertical; }
.fbp-rec-msg { font-size: 14px; color: var(--fb-muted); line-height: 1.5; margin: 8px 0 0; }
.fbp-rec-add { width: 100%; margin-top: 16px; min-height: 50px; border: 0; border-radius: 14px; background: #8B1A1F; color: #fff; font: 700 16px/1 var(--fb-font); cursor: pointer; transition: background .15s ease; }
.fbp-rec-add:hover { background: #73151a; }
.fbp-rec-add:disabled { opacity: .6; cursor: not-allowed; }
.fbp-rec-status { font-size: 13px; color: var(--fb-muted); min-height: 18px; margin-top: 10px; text-align: center; }
.fbp-rec-status.is-error { color: var(--fb-danger); }

/* ── Add-video sheets (film library) ────────────────────────────────────────
   .fbp-add-row is a settings row that is also a button: one per choice, 56px so
   a thumb cannot miss, and .is-primary carries a navy fill so the two rows of the
   choice sheet are visibly unequal. "One video" is a weekly act and "a whole
   folder" is a setup step done once; levelling them visually would make every
   press a guess. Note these classes are excluded in filmbackpack_luxury.css:134
   — without that they paint transparent. */
.fbp-add-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 56px; margin-top: 8px; padding: 10px 12px; box-sizing: border-box; text-align: left; cursor: pointer; background: var(--fb-surface); border: 1px solid var(--fb-sep); border-radius: 13px; font-family: var(--fb-font); color: var(--fb-label); transition: background .15s ease, border-color .15s ease; }
.fbp-add-row:hover { background: var(--fb-bg); }
.fbp-add-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--fb-bg); color: var(--fb-navy-ink); }
.fbp-add-txt { min-width: 0; flex: 1 1 auto; }
.fbp-add-txt > b { display: flex; align-items: center; gap: 7px; font: 700 14.5px/1.25 var(--fb-font); }
.fbp-add-txt > span { display: block; font: 400 11.5px/1.35 var(--fb-font); color: var(--fb-muted); margin-top: 2px; }
.fbp-add-chev { flex: none; color: #B8B8C2; display: flex; }
.fbp-add-row.is-primary { background: #0F1D3D; border-color: #0F1D3D; }
.fbp-add-row.is-primary:hover { background: #1a2d52; border-color: #1a2d52; }
.fbp-add-row.is-primary .fbp-add-txt > b { color: #fff; font-size: 15.5px; font-weight: 800; }
.fbp-add-row.is-primary .fbp-add-txt > span { color: rgba(255, 255, 255, .74); }
.fbp-add-row.is-primary .fbp-add-ic { background: rgba(255, 255, 255, .13); color: #fff; }
.fbp-add-row.is-primary .fbp-add-chev { color: rgba(255, 255, 255, .58); }

/* Review sheet — the clip, where it goes, what it says, one red confirm. */
.fbp-rev-media { height: 132px; margin-bottom: 6px; border-radius: 14px; overflow: hidden; background: #F5F1EA; display: flex; align-items: center; justify-content: center; }
.fbp-rev-media img, .fbp-rev-media video { width: 100%; height: 100%; object-fit: contain; }
.fbp-rev-noprev { color: var(--fb-navy); opacity: .4; display: flex; }
.fbp-rev-name { margin: 0; font: 400 12px/1.4 var(--fb-font); color: var(--fb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp-rev-note { margin: 10px 0 0; font: 400 12.5px/1.5 var(--fb-font); color: var(--fb-muted); }
/* The flow's single #E63946: the one button that writes to her disk or her Drive.
   19px, not 16: white on brand red is 4.17:1, which clears WCAG AA for large text
   (≥18.66px bold) but not for normal text. The brand pair is fixed by CLAUDE.md, so
   the type moves rather than the colour — and 19px is the right size for a
   full-width 52px primary button anyway. */
.fbp-rev-add { width: 100%; margin-top: 16px; min-height: 52px; border: 0; border-radius: 14px; background: #E63946; color: #fff; font: 700 19px/1 var(--fb-font); cursor: pointer; transition: background .15s ease; }
.fbp-rev-add:hover { background: #c62836; }
.fbp-rev-add:disabled { opacity: .6; cursor: not-allowed; }

/* AI offer — deliberately quiet. It sits between the two fields it fills so the
   source of both values reads without explanation, and it never carries red:
   it is an optional extra, not a rival to the confirm below it. */
.fbp-ai-card { margin-top: 14px; padding: 12px; border: 1px solid var(--fb-sep); border-radius: 13px; background: var(--fb-surface-2); }
.fbp-ai-title { margin: 0; display: flex; align-items: center; gap: 7px; font: 700 13.5px/1.3 var(--fb-font); color: var(--fb-navy-ink); }
.fbp-ai-sub { margin: 5px 0 10px; font: 400 12px/1.45 var(--fb-font); color: var(--fb-muted); }
.fbp-ai-up { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  margin-top: 10px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--fb-sep);
  border-radius: 11px; background: var(--fb-surface); color: var(--fb-navy-ink);
  font: 700 14px/1 var(--fb-font); text-decoration: none; }
.fbp-ai-up:hover { background: var(--fb-bg); }
.fbp-ai-btn { width: 100%; min-height: 44px; border: 1px solid var(--fb-sep); border-radius: 11px; background: var(--fb-surface); color: var(--fb-navy-ink); font: 700 14px/1 var(--fb-font); cursor: pointer; transition: background .15s ease; }
.fbp-ai-btn:hover:not(:disabled) { background: var(--fb-bg); }
.fbp-ai-btn:disabled { color: var(--fb-muted); cursor: not-allowed; }
/* Forest, not red: this marks a suggestion, and nothing has gone wrong. */
.fbp-ai-mark { flex: none; font: 800 9.5px/1 var(--fb-font); letter-spacing: .06em; color: #fff; background: #2D6B4F; border-radius: 5px; padding: 3px 5px; }
.fbp-ai-mark[hidden] { display: none; }
.fbp-add-row.is-primary .fbp-ai-mark { background: #2D6B4F; }

/* AI consent — the same legal text as the organizer, in an ordinary card. The
   organizer's dialog is a red-bordered warning box; opening a flow with one would
   make the first emotional signal on this screen a warning. */
.fbp-consent-body { margin: 4px 6px 8px; font: 400 13.5px/1.6 var(--fb-font); color: var(--fb-label); }
.fbp-consent-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--fb-sep); }
.fbp-consent-no, .fbp-consent-yes { flex: 1 1 0; min-height: 48px; border-radius: 12px; font: 700 14px/1 var(--fb-font); cursor: pointer; }
.fbp-consent-no { border: 1px solid var(--fb-sep); background: transparent; color: var(--fb-muted); }
.fbp-consent-yes { border: 0; background: #0F1D3D; color: #fff; }
.fbp-consent-yes:hover { background: #1a2d52; }
.fbp-toast {
  position: fixed; left: 50%; bottom: calc(var(--fbp-botbar-h) + 16px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 100003;
  background: var(--fb-navy); color: #fff; padding: 12px 18px; border-radius: 12px;
  font: 600 14px/1.3 var(--fb-font); box-shadow: 0 12px 32px rgba(15, 29, 61, .3);
  max-width: 88vw; text-align: center; animation: fbToastIn .25s ease;
}
.fbp-toast--ok { background: var(--fb-forest); }
.fbp-toast--error { background: var(--fb-danger); }
.fbp-toast.out { opacity: 0; transition: opacity .26s ease; }

/* ── 15. ARCHIVE CLIP MENU + CATEGORY PICKER (browse page) ──────────────────── */
.fbp-clipmenu {
  position: fixed; z-index: 100020; min-width: 184px;
  background: #fff; border: 1px solid var(--fb-sep); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 29, 61, .22); padding: 6px;
  animation: fbFadeIn .12s var(--fb-ease-out);
}
.fbp-clipmenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: transparent; border-radius: 8px;
  font: 600 13.5px/1 var(--fb-font); color: var(--fb-label); cursor: pointer; text-align: left;
}
.fbp-clipmenu-item:hover { background: var(--fb-bg); }
.fbp-clipmenu-item.is-danger { color: var(--fb-danger); }
.fbp-clipmenu-item.is-danger:hover { background: rgba(194, 38, 27, .08); }

.fbp-pick-ov {
  position: fixed; inset: 0; z-index: 100021; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(15, 29, 61, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fbp-pick-card {
  background: #fff; width: 100%; max-width: 440px; max-height: 80vh; display: flex; flex-direction: column;
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden;
  font-family: var(--fb-font); animation: fbpRecUp .22s var(--fb-ease-out);
}
.fbp-pick-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 15px 18px; border-bottom: 1px solid var(--fb-sep); font-size: 16px; font-weight: 800; color: var(--fb-navy);
}
/* 44px, not 34 — same reason as .fbp-rec-x above. */
.fbp-pick-x { width: 44px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--fb-muted); border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fbp-pick-x:hover { background: var(--fb-bg); }
.fbp-pick-body { overflow-y: auto; padding: 8px; }
/* Filter field. 54 destinations is four screens of scrolling on a phone; typing
   three letters is the difference between choosing and hunting. */
.fbp-pick-filter { padding: 10px 12px 4px; border-bottom: 1px solid var(--fb-sep); }
.fbp-pick-filter input { width: 100%; min-height: 44px; box-sizing: border-box; background: var(--fb-bg); border: 1px solid var(--fb-sep); border-radius: 10px; padding: 10px 12px; font: 400 15px/1.3 var(--fb-font); color: var(--fb-label); outline: none; }
.fbp-pick-filter input:focus { border-color: var(--fb-navy) !important; background: var(--fb-surface); box-shadow: 0 0 0 4px rgba(15, 29, 61, .08) !important; }
.fbp-pick-item[hidden], .fbp-pick-group[hidden] { display: none; }
.fbp-pick-nohits { padding: 16px 12px; margin: 0; font: 400 14px/1.5 var(--fb-font); color: var(--fb-muted); }
.fbp-pick-nohits[hidden] { display: none; }
.fbp-pick-group { display: flex; align-items: center; gap: 8px; padding: 11px 10px 4px; font: 700 11px/1.2 var(--fb-font); text-transform: uppercase; letter-spacing: .04em; color: var(--fb-muted); }
/* Destination rows in the "move / copy to" picker. These measured ~35 px, which is
   under the 44 px thumb minimum on the one control that decides where a clip goes. */
.fbp-pick-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 9px 10px; border: 0; background: transparent; border-radius: 9px; font: 600 14px/1.2 var(--fb-font); color: var(--fb-label); cursor: pointer; text-align: left; }
.fbp-pick-item:hover { background: var(--fb-bg); }
.fbp-pick-item[disabled] { opacity: .5; cursor: default; }
.fbp-pick-item > span:not(.fbp-pick-here) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp-pick-here { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--fb-muted); flex: 0 0 auto; }

.fbp-mini-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100030;
  background: var(--fb-navy); color: #fff; padding: 11px 18px; border-radius: 12px;
  font: 600 14px/1.3 var(--fb-font); box-shadow: 0 12px 32px rgba(15, 29, 61, .3);
  max-width: 88vw; text-align: center; transition: opacity .26s ease; animation: fbToastIn .25s ease;
}

/* ── 14. LEFT SIDEBAR (Microsoft-365 style) ──────────────────────────────────
   filmbackpack_sidebar.js injects #fbpSidebar and replaces the old top bar on
   every app-chrome page. Desktop: a fixed left rail that toggles between an
   expanded (icons + labels) and collapsed (icons only) state, remembered between
   visits. Phones: an off-canvas drawer opened from the .fbp-sb-open button, over
   a dimmed overlay. Logo top-left (no wordmark); Settings pinned at the bottom
   with a free-only Upgrade button beneath it. Light theme to match Office. */
:root { --fbp-sb-w: 264px; --fbp-sb-rail: 60px; }

.fbp-sidebar { display: none; }
.fbp-sb-overlay { display: none; }
.fbp-sb-open { display: none; }

/* Desktop / tablet: persistent rail, content shifted right. */
@media (min-width: 768px) {
  html.fbp-sb-on body { padding-left: var(--fbp-sb-w); }
  html.fbp-sb-on.fbp-sb-collapsed body { padding-left: var(--fbp-sb-rail); }
  html.fbp-sb-anim body { transition: padding-left .18s var(--fb-ease); }

  .fbp-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--fbp-sb-w); z-index: 45;
    /* Rail hue follows the page canvas (theme.css §6.1b). Kept a shade lighter
       and lower-chroma than the top stop so it still reads as chrome, not page.
       Literals are the var() fallback for the one sheet that loads design.css
       without theme.css. Dark mode overrides both at theme.css:170. */
    background: var(--fbp-rail, #FCF8F1); border-right: 1px solid var(--fbp-rail-bd, #EAE4DA);
  }
  html.fbp-sb-anim .fbp-sidebar { transition: width .18s var(--fb-ease); }
  html.fbp-sb-collapsed .fbp-sidebar { width: var(--fbp-sb-rail); }
}

/* Sidebar header: logo + collapse toggle. */
.fbp-sb-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; min-height: 56px; }
.fbp-sb-logo { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.fbp-sb-logo img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.fbp-sb-title { display: flex; align-items: center; min-height: 44px; font-family: 'Times New Roman', Times, serif; font-weight: 700; color: #6b7280; font-size: 18px; line-height: 1; white-space: nowrap; overflow: hidden; text-decoration: none; }
a.fbp-sb-title:hover { color: var(--fb-navy); }
.fbp-sb-toggle {
  margin-left: auto; width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--fb-muted); cursor: pointer; border-radius: 8px;
}
.fbp-sb-toggle:hover { background: #EFEFF2; color: var(--fb-navy); }
.fbp-sb-toggle svg { width: 20px; height: 20px; }

/* Nav lists. */
.fbp-sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; overflow-y: auto; }
.fbp-sb-nav--main { flex: 1 1 auto; min-height: 0; }
/* The main nav is read in three groups — where you are (Home), what you make
   (video, campaign, library), and what helps you (school, help, chat). Each
   break carries the same rule as the one above Settings; the negative inline
   margin pulls it out of the nav's 8px padding so the two line up edge to edge
   instead of one being inset from the other. */
.fbp-sb-group + .fbp-sb-group {
  margin: 10px -8px 0; padding: 10px 8px 0;
  border-top: 1px solid #ECECEF;
}
.fbp-sb-nav--foot { margin-top: auto; border-top: 1px solid #ECECEF; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

.fbp-sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 8px; min-height: 44px;
  font: 600 14px/1.2 var(--fb-font); color: #2B2B30; text-decoration: none;
  border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left;
  white-space: nowrap; transition: background .12s var(--fb-ease), color .12s var(--fb-ease);
}
.fbp-sb-item:hover { background: #EFEFF2; }
.fbp-sb-item.is-active { background: #E7E7EC; color: var(--fb-navy); }
.fbp-sb-item .fbp-sb-ic { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.fbp-sb-item .fbp-sb-ic svg { width: 21px; height: 21px; display: block; }
.fbp-sb-item .fbp-sb-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.fbp-sb-badge {
  flex: none; background: var(--fb-brand); color: #fff;
  font: 800 10px/1 var(--fb-font); letter-spacing: .06em;
  padding: 3px 7px; border-radius: 9px;
}

/* Upgrade — the prominent free-only subscription button under Settings. */
.fbp-sb-upgrade {
  margin: 8px 8px 2px; padding: 11px 12px; border-radius: 10px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--fb-brand); color: #fff !important; border: 0; cursor: pointer;
  font: 700 13.5px/1 var(--fb-font); text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(230,57,70,.28); transition: background .12s var(--fb-ease);
}
.fbp-sb-upgrade:hover { background: var(--fb-brand-600); }
/* One red per screen (CLAUDE.md). The rail is persistent chrome on 14 pages and
   every one of them owns a page-level primary — profile ships "Spara profil"
   (#E63946), home's own comment already claims "the screen's only #E63946".
   Navy keeps the upsell prominent in the rail without competing for the screen's
   single red. Scoped away from data-fbp-theme="dark" on purpose: --fb-navy does
   not flip in dark, so a navy fill would vanish into the #12151E rail — dark
   keeps today's red and stays pixel-identical. */
html:not([data-fbp-theme="dark"]) .fbp-sb-upgrade {
  background: var(--fb-navy);
  box-shadow: 0 6px 18px rgba(15, 29, 61, .24);
}
html:not([data-fbp-theme="dark"]) .fbp-sb-upgrade:hover { background: var(--fb-navy-700); }
.fbp-sb-upgrade .fbp-sb-ic svg { width: 18px; height: 18px; display: block; }

/* Collapsed rail: icons only, centered; logo, labels & upgrade text hidden. */
@media (min-width: 768px) {
  html.fbp-sb-collapsed .fbp-sb-head { justify-content: center; padding: 12px 0 8px; }
  html.fbp-sb-collapsed .fbp-sb-toggle { margin: 6px auto 0; }
  html.fbp-sb-collapsed .fbp-sb-head { flex-wrap: wrap; }
  html.fbp-sb-collapsed .fbp-sb-nav { padding: 6px 8px; align-items: center; }
  html.fbp-sb-collapsed .fbp-sb-item { justify-content: center; padding: 9px 0; width: 44px; gap: 0; }
  html.fbp-sb-collapsed .fbp-sb-item .fbp-sb-lbl { display: none; }
  html.fbp-sb-collapsed .fbp-sb-item .fbp-sb-badge { display: none; }
  html.fbp-sb-collapsed .fbp-sb-logo { display: none; }
  html.fbp-sb-collapsed .fbp-sb-title { display: none; }
  html.fbp-sb-collapsed .fbp-sb-upgrade { margin: 8px auto 2px; width: 44px; padding: 11px 0; }
  html.fbp-sb-collapsed .fbp-sb-upgrade .fbp-sb-lbl { display: none; }
}

/* Mobile: off-canvas drawer + overlay; opened from .fbp-sb-open. */
@media (max-width: 767px) {
  .fbp-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 300px); z-index: 100001;
    background: #FBFBFC; border-right: 1px solid #E8E8EC;
    transform: translateX(-100%); transition: transform .22s var(--fb-ease-out);
    box-shadow: 8px 0 40px rgba(0,0,0,.18);
  }
  html.fbp-sb-open-mobile .fbp-sidebar { transform: translateX(0); }
  .fbp-sb-overlay {
    display: block; position: fixed; inset: 0; z-index: 100000;   /* above the cookie banner (99999) so it dims too */
    background: rgba(15,29,61,.4); opacity: 0; pointer-events: none; transition: opacity .2s var(--fb-ease);
  }
  html.fbp-sb-open-mobile .fbp-sb-overlay { opacity: 1; pointer-events: auto; }
  .fbp-sb-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; margin-right: 4px;
    border: 1px solid rgba(0,0,0,.10); border-radius: 10px; background: #fff; color: var(--fb-navy);
    cursor: pointer; padding: 0;
  }
  .fbp-sb-open svg { width: 20px; height: 20px; }
}

/* Page head: bold title + top-right actions (replaces the old centred top bar). */
.fbp-topbar-min {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(15,29,61,.06);
}
.fbp-page-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; }
.fbp-page-title { margin: 0; font: 800 26px/1.15 var(--fb-font); color: var(--fb-navy); letter-spacing: -.01em; }
.fbp-page-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Title + one quiet line of context beside it (the film library's whole-library
   count). Muted and small on purpose: the H1 stays the only thing that reads as a
   heading, and the number is context for it rather than a section of the page.
   The box wraps, so on a phone the count drops under the title instead of
   squeezing it — see the flex-basis note in the mobile block, which is what keeps
   that wrap from costing a whole extra sticky row.
   Both live in the sticky bar, so the page below opens on content.
   .fbp-page-sub sets its own colour, which beats the colour inherited from
   luxury.css's `header { color:#fff !important }` — an inherited value always
   loses to a declaration on the element itself. */
.fbp-page-titlebox { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.fbp-page-sub { font: 600 13px/1.3 var(--fb-font); color: var(--fb-muted); }
.fbp-page-sub[hidden] { display: none; }
/* Editor top-bar title cluster (Back + template name), left of the step nav.
   Mirrors .fbp-page-actions on the right; collapses out of flow when not editing. */
.fbp-editor-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fbp-editor-title:empty { display: none; }
.fbp-editor-title-text { min-width: 0; }
.fbp-editor-title-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phone: the editor head stays ONE row whatever the template is called.
   flex-basis 0 (NOT auto) is the load-bearing part, same reason as
   .fbp-page-titlebox below: a wrapping flex container breaks lines on each
   item's hypothetical size BEFORE any shrinking, so an auto-basis title cluster
   ("← Tillbaka" + icon + "Investerarpresentation" + the format control ≈ 400px)
   does not fit beside the 44px menu button and jumps to a row of its own —
   leaving the button alone on a row it does not need. Measured at 390px that
   cost a 168px sticky header for a long name against 68px for a short one: a
   fifth of a phone screen spent on the fact that the name is long. At basis 0
   the cluster stays beside the button and the name ellipsises INSIDE it, so the
   head is 68px for every template. */
@media (max-width: 767px) {
  .fbp-editor-title { flex: 1 1 0; }
  /* The empty step-nav spacer is also flex:1 — it would split the row's free
     space 50/50 with the title cluster. It centres nothing here; drop it, and
     let the rule lapse by itself if the step nav ever renders again. */
  .fbp-page-head > #stepNav:empty { display: none; }
  /* Back keeps its arrow and its word on one line, and gives up the desktop
     button's side padding — that width belongs to the template name. */
  .fbp-editor-title > .ios-btn { flex: 0 0 auto; white-space: nowrap; padding: 12px 6px; }
  /* The name takes what is left and truncates; 17px fits ~4 more characters
     before the ellipsis than the desktop 20px, at the same weight. */
  .fbp-editor-title-text { flex: 1 1 auto; font-size: 17px; }
  .fbp-editor-title-text > span { flex: 1 1 auto; min-width: 0; }
}
.fbp-action-btn {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px;
  font: 600 13px/1 var(--fb-font); cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background .12s var(--fb-ease), border-color .12s var(--fb-ease);
}
/* Grey fill — higher-contrast so the Archive folder actions stand out.
   !important overrides luxury.css's `header a, header button { color:#fff !important }`
   (the Archive header renders on a dark bar), keeping the grey + dark text readable. */
.fbp-action-btn--grey { background: #D7D7DE !important; color: #1D1D1F !important; border-color: #C2C2CC !important; }
.fbp-action-btn--grey:hover { background: #C7C7D0 !important; border-color: #ADADB8 !important; }
.fbp-action-btn--grey svg { color: #1D1D1F !important; }
/* Navy fill — the film library's add entry. Navy and not red because the sidebar
   already spends this screen's one red on "Uppgradera", and the red in the add
   flow belongs to the confirm inside the sheet, which is the only button in it
   that writes bytes to her disk. Same !important reason as --grey above. */
.fbp-action-btn--navy { background: #0F1D3D !important; color: #fff !important; border-color: #0F1D3D !important; justify-content: center; }
.fbp-action-btn--navy:hover { background: #1a2d52 !important; border-color: #1a2d52 !important; }
.fbp-action-btn--navy svg { color: #fff !important; }
@media (max-width: 767px) {
  .fbp-page-head { padding: 12px 16px; flex-wrap: wrap; }
  .fbp-page-title { font-size: 21px; }
  /* Multiple header actions (e.g. the Archive page) drop to their own full-width
     row instead of cramming beside the title. */
  .fbp-page-actions { flex: 1 0 100%; justify-content: flex-start; margin-left: 0; }
  /* flex-basis 0, NOT auto — this line is load-bearing. A wrapping flex container
     breaks lines on each item's hypothetical size, before any shrinking, so an
     auto-basis titlebox (title 164 + gap + count 152 = 327px) does not fit beside the
     44px menu button and jumps to a row of its own. Measured at 375px that costs a
     third permanently-sticky row: 161px of header on an 812px screen, against 125px
     for the title alone. At basis 0 the box stays beside the button and the count
     wraps INSIDE it instead — 132px, i.e. +7px, not +36px. The count is reassurance,
     not navigation, and does not earn a row. */
  .fbp-page-titlebox { flex: 1 1 0; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   EDITOR REDESIGN (step 4) — clips are the hero. Center = clip sequence,
   right = contextual settings (desktop ≥ 900px), bottom sheets (mobile < 900px).
   Only Format + Preview + Create video are pinned in the top bar.
   Shared by filmbackpack_app.html and filmbackpack_app_en.html.
   ════════════════════════════════════════════════════════════════════════════ */
.fbp-ed { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px;
  max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; box-sizing: border-box; }
@media (min-width: 900px) { .fbp-ed { grid-template-columns: minmax(0,1fr) 372px; align-items: start; } }
@media (max-width: 899px) { .fbp-ed { padding-bottom: calc(var(--fbp-botbar-h, 0px) + 78px + env(safe-area-inset-bottom)); } }
.fbp-ed-main { min-width: 0; }

/* Section heading above the clip list */
.fbp-ed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
.fbp-ed-head h2 { font: 800 18px/1.2 var(--fb-font); color: var(--fb-label); letter-spacing: -.01em; }
.fbp-ed-head .fbp-ed-hint { font-size: 12.5px; color: var(--fb-muted); }

/* Clip list + rows */
.fbp-ed-list { display: flex; flex-direction: column; gap: 8px; }
.fbp-ed-row { display: grid; grid-template-columns: auto auto 92px minmax(0,1fr) auto; gap: 10px;
  align-items: center; padding: 8px 10px; background: var(--fb-surface);
  border: 1px solid var(--fb-sep); border-radius: 14px; cursor: pointer;
  transition: border-color .14s var(--fb-ease-out), box-shadow .14s var(--fb-ease-out), opacity .14s ease; }
.fbp-ed-row:hover { border-color: #cfd4de; }
.fbp-ed-row.is-selected { border-color: var(--fb-brand); box-shadow: 0 0 0 1px var(--fb-brand) inset, var(--fb-shadow-md); }
.fbp-ed-row.dragging { opacity: .45; }
.fbp-ed-row.drop-before { box-shadow: inset 0 3px 0 var(--fb-brand); }
.fbp-ed-row.drop-after  { box-shadow: inset 0 -3px 0 var(--fb-brand); }

.fbp-ed-grip { display: none; align-items: center; justify-content: center; width: 22px; height: 40px;
  color: #9aa3b2; cursor: grab; background: transparent; border: 0; padding: 0; }
.fbp-ed-grip:active { cursor: grabbing; }
@media (min-width: 900px) { .fbp-ed-grip { display: flex; } }

.fbp-ed-num { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; font: 700 11px/1 var(--fb-font); color: #fff; background: var(--fb-forest); }
.fbp-ed-num.miss { background: #E6A800; }

.fbp-ed-thumb { width: 92px; height: 54px; border-radius: 9px; background: #e7e8ee 50%/cover no-repeat;
  position: relative; overflow: hidden; flex-shrink: 0; }
.fbp-ed-thumb.has:hover { box-shadow: 0 0 0 2px var(--fb-brand); }
.fbp-ed-thumb .fbp-ed-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; color: var(--fb-faint); font-size: 18px; }
.fbp-ed-thumb .fbp-ed-thumb-badge { position: absolute; top: 3px; left: 3px; background: rgba(0,0,0,.55);
  color: #fff; border-radius: 5px; padding: 1px 3px; line-height: 0; }

.fbp-ed-body { min-width: 0; }
.fbp-ed-textin { width: 100%; border: 1px solid var(--fb-sep); border-radius: 9px; padding: 6px 9px;
  font-size: 13.5px; color: var(--fb-label); background: var(--fb-surface); }
.fbp-ed-textin:focus { outline: 0; border-color: var(--fb-navy); }
.fbp-ed-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11px; color: var(--fb-muted); }
.fbp-ed-labels .tag { color: var(--fb-navy); opacity: .7; }
.fbp-ed-labels .miss { color: #B77500; font-weight: 600; }

.fbp-ed-actions { display: flex; align-items: center; gap: 4px; }
.fbp-ed-iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--fb-muted); cursor: pointer; }
.fbp-ed-iconbtn:hover { background: var(--fb-bg); color: var(--fb-label); }
.fbp-ed-iconbtn.fbp-ed-del:hover { background: rgba(194,38,27,.08); color: var(--fb-danger); }
.fbp-ed-iconbtn.fbp-ed-add:hover { background: rgba(45,107,79,.10); color: var(--fb-forest); }
.fbp-ed-iconbtn.fbp-ed-dup:hover { background: rgba(15,29,61,.08); color: var(--fb-navy-ink); }
/* The shared icon set has no hue for `copy`, so it falls back to a fixed dark navy
   that all but disappears on the dark theme. Repaint tile + glyph from the token
   that is navy in light and near-white in dark; !important because fbpClr writes
   the colour inline on the <svg>. */
.fbp-ed-dup svg { color: var(--fb-navy-ink) !important; }
.fbp-ed-dup svg rect { fill: var(--fb-navy-ink); }
.fbp-ed-iconbtn:disabled { opacity: .3; cursor: default; }

/* Mobile reorder — stacked ↑/↓, each a ≥44px touch target (no touch-drag; scroll-safe) */
.fbp-ed-move { display: none; flex-direction: column; gap: 2px; }
.fbp-ed-move button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fb-sep); background: var(--fb-surface); border-radius: 9px; color: var(--fb-navy); cursor: pointer; }
.fbp-ed-move button:disabled { opacity: .3; cursor: default; }
@media (max-width: 899px) {
  .fbp-ed-move { display: flex; }
  .fbp-ed-grip, .fbp-ed-add, .fbp-ed-dup, .fbp-ed-edit, .fbp-ed-del { display: none !important; }
  .fbp-ed-row { grid-template-columns: auto 76px minmax(0,1fr) auto; }
}

/* Clip-panel footer actions (desktop panel + mobile clip sheet). Duplicate is
   defined here rather than in filmbackpack_ios.js so that shared file stays put;
   ios.js injects its styles after this sheet loads, and neither owns this class. */
.ios-ed-clipactions { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 14px 4px 2px; }
.ios-dup-action { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--fb-navy-ink); font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 2px; line-height: 1; }

/* Add-clip row + special (logo/outro) rows */
.fbp-ed-addrow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; border: 1.5px dashed var(--fb-sep); border-radius: 14px; background: transparent;
  color: var(--fb-navy); font: 600 14px/1 var(--fb-font); cursor: pointer; }
.fbp-ed-addrow:hover { border-color: var(--fb-forest); background: rgba(45,107,79,.04); }
.fbp-ed-special { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--fb-sep); background: linear-gradient(90deg, rgba(15,29,61,.03), rgba(230,57,70,.03)); }
.fbp-ed-special .grow { flex: 1; min-width: 0; }

/* Persistent secondary-action footer (Make default + Save-as-my-template) */
.fbp-ed-footer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--fb-sep); }

/* Right contextual panel (desktop) */
.fbp-ed-side { display: none; }
@media (min-width: 900px) { .fbp-ed-side { display: block; position: sticky; top: 14px; } }
.fbp-ed-panel { background: var(--fb-surface); border: 1px solid var(--fb-sep); border-radius: 16px; padding: 16px; }
.fbp-ed-panel h3 { font: 800 15px/1.2 var(--fb-font); color: var(--fb-label); }
.fbp-ed-panel .sub { font-size: 12px; color: var(--fb-muted); margin-top: 2px; }
.fbp-ed-field { margin-top: 14px; }
.fbp-ed-field > label, .fbp-ed-fieldlabel { display: block; font: 700 10.5px/1 var(--fb-font);
  text-transform: uppercase; letter-spacing: .06em; color: var(--fb-muted); margin-bottom: 6px; }
.fbp-ed-acc { margin-top: 12px; border-top: 1px solid var(--fb-sep); padding-top: 4px; }
.fbp-ed-acc > summary { list-style: none; cursor: pointer; padding: 10px 2px; font: 700 13px/1.2 var(--fb-font);
  color: var(--fb-navy); display: flex; align-items: center; gap: 8px; }
.fbp-ed-acc > summary::-webkit-details-marker { display: none; }
.fbp-ed-acc > summary .chev { transition: transform .15s ease; }
.fbp-ed-acc[open] > summary .chev { transform: rotate(90deg); }

/* Mobile bottom action bar (Preview + Settings) — sits above the global mobile nav */
.fbp-ed-botbar { display: none; }
@media (max-width: 899px) {
  .fbp-ed-botbar { display: flex; gap: 10px; position: fixed; left: 0; right: 0;
    bottom: calc(var(--fbp-botbar-h, 0px) + env(safe-area-inset-bottom)); z-index: 90;
    padding: 8px 14px; background: var(--fb-surface); border-top: 1px solid var(--fb-sep);
    box-shadow: 0 -6px 20px rgba(15,29,61,.07); box-sizing: border-box; }
  .fbp-ed-botbar > button { flex: 1; min-height: 46px; }
}

/* Bottom sheets (mobile clip / settings) */
.fbp-sheet-ov { position: fixed; inset: 0; z-index: 100040; background: rgba(15,29,61,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; }
.fbp-sheet { width: 100%; max-height: 88vh; overflow-y: auto; background: var(--fb-surface);
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 48px rgba(0,0,0,.28); animation: fbSheetUp .26s var(--fb-ease-out); }
@media (min-width: 640px) { .fbp-sheet-ov { align-items: center; justify-content: center; }
  .fbp-sheet { max-width: 460px; border-radius: 22px; } }
@keyframes fbSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.fbp-sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: #c9ced9; margin: 4px auto 12px; }
.fbp-sheet h3 { font: 800 16px/1.2 var(--fb-font); color: var(--fb-label); margin-bottom: 4px; }

/* Sequence preview player */
.fbp-pv-ov { position: fixed; inset: 0; z-index: 100045; background: rgba(6,10,20,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.fbp-pv-stage { position: relative; width: min(92vw, 900px); aspect-ratio: 16/9; background: #000;
  border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fbp-pv-stage.vert { aspect-ratio: 9/16; width: auto; height: min(70vh, 720px); }
.fbp-pv-stage video, .fbp-pv-stage img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.fbp-pv-caption { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; padding: 0 8%;
  color: #fff; font: 800 clamp(16px, 3.4vw, 34px)/1.2 var(--fb-font); text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none; }
.fbp-pv-empty { color: #aeb6c6; font: 600 15px/1.4 var(--fb-font); text-align: center; padding: 24px; }
.fbp-pv-bar { width: min(92vw, 900px); display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fbp-pv-track { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.fbp-pv-fill { height: 100%; width: 0; background: var(--fb-brand); transition: width .2s linear; }
.fbp-pv-count { color: #cbd3e0; font: 600 12px/1 var(--fb-font); white-space: nowrap; }
.fbp-pv-ctrls { display: flex; gap: 10px; margin-top: 14px; }

/* Editor top-bar additions: clip-count meta chip + compact Format control */
.fbp-ed-meta { font-size: 12.5px; color: var(--fb-muted); white-space: nowrap; }
.fbp-ed-format { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--fb-font);
  color: var(--fb-navy); background: var(--fb-surface-2); border: 1px solid var(--fb-sep);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.fbp-ed-format:hover { border-color: var(--fb-navy); }
/* Phone: neither chip earns width in the head. The clip count and the format are
   both already on screen in the bottom action bar's summary ("12 klipp · 66 sek ·
   stående (9:16)"), and Format is a labelled row one tap away behind the gear
   beside it. Here they only pushed the template name into an ellipsis — or, with
   the format control still in flow, the whole cluster onto a second sticky row. */
@media (max-width: 767px) { .fbp-ed-meta, .fbp-ed-format { display: none; } }

/* ── 15. CHAT GUIDE ENTRY (P1-CHATENTRY) ─────────────────────────────────────
   Floating "Fråga oss" pill + once-ever nudge, drawn on <body> by
   filmbackpack_sidebar.js on every app-chrome page. ONE GATE: sidebar.js sets
   html.fbp-chat-pill-on only where the pill may appear — it drops the class on
   filmbackpack_app pages ≤899px, where .fbp-ed-botbar (z-index 90, §above)
   owns the corner — and pill, nudge AND the bottom padding all key off that
   class, so the three can never disagree. z-index 95: above the bottom bar
   (45) and the editor bar (90), below the cookie banner (99999) and drawers. */
.fbp-chat-pill, .fbp-chat-nudge { display: none; }
html.fbp-chat-pill-on .fbp-chat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--fb-surface); color: var(--fb-navy-ink);
  border: 1px solid var(--fb-sep); box-shadow: 0 6px 24px rgba(74, 58, 40, .35);
  font: 600 14.5px/1 var(--fb-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Hover must stay OPAQUE. --fb-tint is rgba(...,.06) — assigning it to
   `background` replaced the solid surface and the hero image showed straight
   through the pill. The tint is layered as an image ON TOP of the opaque
   surface colour instead, which works in both themes with no new token.
   border-color is pinned because luxury.css's `button:hover` paints every
   button's border gold with !important, which read as the pill dissolving. */
html.fbp-chat-pill-on .fbp-chat-pill:hover {
  background-color: var(--fb-surface);
  background-image: linear-gradient(var(--fb-tint), var(--fb-tint));
  border-color: var(--fb-sep) !important;
}
html.fbp-chat-pill-on .fbp-chat-pill svg { width: 18px; height: 18px; display: block; }
/* The pill and nudge hide while the chat window is open (chat.js: html.fbpc-on). */
html.fbpc-on .fbp-chat-pill, html.fbpc-on .fbp-chat-nudge { display: none !important; }

/* Padding contract: the pill zone may never cover the last row of a scrolled
   page — same pattern as html.fbp-botbar-on in §13. Padding exists if and
   only if the pill is visible (same html class, same gate). 76 = 20 + 44 + 12. */
html.fbp-chat-pill-on body,
html.fbp-chat-pill-on #mainContent,
html.fbp-chat-pill-on #main { padding-bottom: 76px; }

@media (max-width: 767px) {
  /* Above the bottom action bar, in thumb reach, never touching the bar. */
  html.fbp-chat-pill-on.fbp-botbar-on .fbp-chat-pill {
    right: 16px; bottom: calc(var(--fbp-botbar-h) + 16px + env(safe-area-inset-bottom));
  }
  html.fbp-chat-pill-on.fbp-botbar-on body,
  html.fbp-chat-pill-on.fbp-botbar-on #mainContent,
  html.fbp-chat-pill-on.fbp-botbar-on #main {
    padding-bottom: calc(var(--fbp-botbar-h) + 72px + env(safe-area-inset-bottom));
  }
}

/* Once-ever nudge bubble, 12px above the pill (sidebar.js draws + gates it). */
html.fbp-chat-pill-on .fbp-chat-nudge {
  display: flex; align-items: center; gap: 2px;
  position: fixed; right: 20px; bottom: 76px; z-index: 95;
  max-width: 264px; padding: 6px 6px 6px 16px; border-radius: 14px;
  background: var(--fb-surface); color: var(--fb-navy-ink);
  border: 1px solid var(--fb-sep); box-shadow: 0 10px 32px rgba(74, 58, 40, .3);
}
@media (max-width: 767px) {
  html.fbp-chat-pill-on.fbp-botbar-on .fbp-chat-nudge {
    right: 16px; bottom: calc(var(--fbp-botbar-h) + 72px + env(safe-area-inset-bottom));
  }
}
.fbp-chat-nudge-txt { background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 14px/1.45 var(--fb-font); color: var(--fb-navy-ink); padding: 8px 0;
  min-height: 44px; }   /* ≥44px tap target even when the string fits one line */

/* Lift: pages with their own sticky bottom action bar (#fbpActionBar on the
   app editor step, #cpBar on campaign — both carry the page's red CTA at the
   right edge) would put the pill ON the CTA. sidebar.js measures the visible
   bar and sets --fbp-chat-lift (viewport-bottom → bar top) + this class, so
   the pill sits 12px ABOVE the bar and the padding contract follows. These
   rules are last in the cascade, so they win over the botbar offset above. */
html.fbp-chat-pill-on.fbp-chat-pill-lift .fbp-chat-pill {
  right: 20px; bottom: calc(var(--fbp-chat-lift, 0px) + 12px);
}
html.fbp-chat-pill-on.fbp-chat-pill-lift .fbp-chat-nudge {
  right: 20px; bottom: calc(var(--fbp-chat-lift, 0px) + 68px);
}
@media (max-width: 767px) {
  /* Campaign phones (the only lift page <900px — the app hides the pill
     there): dock the pill on the seam between the hero card and the action
     bar's own rows (founder call: "between Active campaigns and All
     campaigns") instead of floating 12px above the whole bar. */
  /* Dock depth = the bar's own 10px top padding, exactly — one px more and
     the pill's corner starts grazing the bar's first row (the centered
     Tidigare-kampanjer link), per the auditor's geometry check. */
  html.fbp-chat-pill-on.fbp-chat-pill-lift.fbp-botbar-on .fbp-chat-pill {
    bottom: calc(var(--fbp-chat-lift, 0px) - 10px);
  }
  html.fbp-chat-pill-on.fbp-chat-pill-lift.fbp-botbar-on .fbp-chat-nudge {
    bottom: calc(var(--fbp-chat-lift, 0px) + 46px);   /* 12px above the docked pill */
  }
}

/* !important on purpose: the lift pages (app editor, campaign) sync an INLINE
   padding-bottom of bar+16px onto #main — enough to clear the bar but not the
   pill zone above it. lift+68 is always ≥ that inline value, so overriding it
   while the class is on is safe; the inline value resumes when the class drops. */
html.fbp-chat-pill-on.fbp-chat-pill-lift body,
html.fbp-chat-pill-on.fbp-chat-pill-lift #mainContent,
html.fbp-chat-pill-on.fbp-chat-pill-lift #main {
  padding-bottom: calc(var(--fbp-chat-lift, 0px) + 68px) !important;   /* 12 + 44 + 12 */
}

/* …but the strip is reserved ONCE. Every rule above names body AND the inner
   scroll surface, because different pages use different ones — on a page that
   has #main / #mainContent the body copy reserves the same strip a second
   time, underneath the content, and it reads as a dead band you have to
   scroll past for nothing (reported on the campaign page: 140px of empty
   cream below the hero). The inner element is the one that actually keeps the
   pill off the last row, so the body copy is pure scroll height. Browsers
   without :has() keep the old, baggy-but-harmless behaviour. */
html.fbp-chat-pill-on body:has(#main, #mainContent) { padding-bottom: 0 !important; }

.fbp-chat-nudge-x { background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--fb-muted); }
.fbp-chat-nudge-x:hover { background: var(--fb-tint); color: var(--fb-navy-ink); }