/* Minimal base layer. Utility classes come from Tailwind (Play CDN, Phase 1).
   Tracked to be replaced by a compiled Tailwind build before launch. */

/* Work Sans (SIL OFL) — self-hosted, no CDN. Files in /assets/fonts. */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/work-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/work-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/work-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/work-sans-latin-700-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --font-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Light theme palette — these defaults are what an unclassed page uses.
     Page bg is a soft light grey so white magazine pages still stand out;
     the reader nav bar uses a slightly darker grey so it reads as a distinct
     surface against the page. */
  --fc-bg: #eeeeee;
  --fc-nav-bg: #e2e2e2;
  --fc-surface: #f5f5f5;
  --fc-surface-2: #ffffff;
  --fc-text: #171717;
  --fc-text-muted: #404040;
  --fc-text-dim: #525252;
  --fc-text-faint: #525252;
  --fc-text-ghost: #737373;
  --fc-text-divider: #d4d4d4;
  --fc-border-1: #d4d4d4;
  --fc-border-2: #e5e5e5;
  --fc-border-strong: #a3a3a3;

  /* Accent backgrounds for status chips and error boxes */
  --fc-amber-bg: #fffbeb;
  --fc-amber-border: #fcd34d;
  --fc-amber-text: #92400e;
  --fc-amber-dot: #d97706;
  --fc-emerald-bg: #ecfdf5;
  --fc-emerald-border: #6ee7b7;
  --fc-emerald-text: #065f46;
  --fc-emerald-dot: #059669;
  --fc-red-bg: #fef2f2;
  --fc-red-border: #fca5a5;
  --fc-red-text: #b91c1c;
  --fc-blue-bg: #eff6ff;
  --fc-blue-border: #60a5fa;
  --fc-blue-text: #1e40af;

  --fc-loader-shadow: rgba(0, 0, 0, 0.18);
}
html.dark {
  color-scheme: dark;
  /* Dark grey rather than near-black, so magazine pages (which render at their
     own paper colour in the flipbook) sit on a noticeably-distinct backdrop.
     Surface tiers are shifted up in lockstep so cards remain elevated
     (visually-lighter) than the page they sit on. */
  --fc-bg: #1a1a1a;
  --fc-nav-bg: #262626;
  --fc-surface: #262626;
  --fc-surface-2: #333333;
  --fc-text: #f5f5f5;
  --fc-text-muted: #e5e5e5;
  --fc-text-dim: #d4d4d4;
  --fc-text-faint: #a3a3a3;
  --fc-text-ghost: #737373;
  --fc-text-divider: #525252;
  --fc-border-1: #404040;
  --fc-border-2: #262626;
  --fc-border-strong: #525252;

  --fc-amber-bg: rgba(69, 26, 3, 0.4);
  --fc-amber-border: rgba(180, 83, 9, 0.6);
  --fc-amber-text: #fcd34d;
  --fc-amber-dot: #fbbf24;
  --fc-emerald-bg: rgba(2, 44, 34, 0.3);
  --fc-emerald-border: rgba(6, 95, 70, 0.6);
  --fc-emerald-text: #6ee7b7;
  --fc-emerald-dot: #34d399;
  --fc-red-bg: rgba(69, 10, 10, 0.4);
  --fc-red-border: #991b1b;
  --fc-red-text: #fca5a5;
  --fc-blue-bg: rgba(23, 37, 84, 0.3);
  --fc-blue-border: rgba(29, 78, 216, 0.6);
  --fc-blue-text: #93c5fd;

  --fc-loader-shadow: rgba(0, 0, 0, 0.8);
}

html, body { font-family: var(--font-sans); }

/* ── Global noise/grain texture overlay (ported from moodtuner.app) ──────────
   Inline SVG fractal noise tiled across the viewport at low opacity. Sits
   under all content via z-index, ignores pointer events, doesn't repaint on
   scroll (position: fixed). All page content gets position: relative so it
   stacks above. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
body > * { position: relative; }

/* ── Trusted-by marquee ──────────────────────────────────────────────────────
   Infinite horizontal scroll. The track contains the logo list duplicated so
   translateX(-50%) lands on a clone of the first logo — seamless loop.
   Edges fade via mask-image so logos appear and disappear smoothly. */
.fc-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.fc-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: fc-marquee 38s linear infinite;
}
@keyframes fc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Image-based customer logos for the trusted-by marquee. Fixed height
   so logos of different aspect ratios line up; opacity drop unifies the
   row visually so no single colourful logo dominates. */
.fc-logo-img {
  display: block;
  flex: 0 0 auto;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.85;
  /* Spacing lives on each logo (not flex `gap`) so every copy carries its own
     trailing gap. That makes the two rendered passes exactly equal width, so
     translateX(-50%) lands precisely on the first clone — no seam jump. */
  margin-right: 64px;
}
/* Per-logo size tweaks — these four read visually larger than the rest at
   the default height, so shrink them ~80% to balance the row. */
.fc-logo-img[src$="logo-brainfu.png"],
.fc-logo-img[src$="logo-hrpro.png"],
.fc-logo-img[src$="logo-interactives.png"],
.fc-logo-img[src$="logo-littlehelp.png"] { height: 35px; }

@media (prefers-reduced-motion: reduce) {
  .fc-marquee-track { animation: none; }
}

/* ── Load-in reveal ──────────────────────────────────────────────────────────
   Marketing elements tagged .fc-reveal start a touch lowered and transparent,
   then ease into place when they scroll into view — is-visible is added by the
   IntersectionObserver in app.js. Above-the-fold elements are already in view on
   load, so they animate in immediately for a gentle load-in.

   The hidden start state is set unconditionally (not JS-gated) so above-the-fold
   elements never flash in fully-visible before the observer runs. Fallbacks keep
   content readable when the reveal can't/shouldn't play:
     • JS off  → a <noscript> style override in the layout restores visibility.
     • reduced-motion → forced visible below (the global reset kills the
       transition, which would otherwise leave these stuck at opacity 0).
   Optional per-element stagger via an inline --fc-reveal-delay. */
.fc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--fc-reveal-delay, 0s);
  will-change: opacity, transform;
}
.fc-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fc-reveal { opacity: 1; transform: none; }
}

/* ── Bare / hero embed mode (reader loaded with ?chrome=0) ────────────────────
   Strips most chrome so the flipbook floats transparently over a host page
   (e.g. the marketing hero), but keeps the essentials for reading: the edge
   arrows (.fc-side-btn, deliberately NOT hidden) and the fullscreen button.
   Hidden elements stay in the DOM — reader.js still references them. Iframe
   transparency comes from the body's `bg-transparent`. */
.fc-bare #readerStatus,
.fc-bare .fc-prog,
.fc-bare .fc-nav-info,
.fc-bare .fc-nav-controls { display: none !important; }
/* Footer collapses to a transparent strip floated over the book, carrying only
   the fullscreen button. Absolute so it takes no layout height — reader.js also
   treats the footer height as 0 in bare mode when sizing the book. */
.fc-bare .fc-nav-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  background: transparent !important;
  border: 0 !important;
}
.fc-bare .fc-nav-bar > div { max-width: none; height: auto; padding: 10px; justify-content: flex-end; }
.fc-bare #fullscreenBtn { background: rgba(38, 38, 38, .85); color: #fff; }

/* ── Theme overrides for Tailwind neutral utilities ──────────────────────────
   Keeps all existing class names working while letting one toggle on <html>
   flip the entire UI. We prefix every selector with `html` so specificity is
   guaranteed to beat Tailwind's own atomic rule no matter the injection order
   of the Play CDN's runtime <style> tag. */
html .bg-neutral-950 { background-color: var(--fc-bg); }
html .bg-neutral-900 { background-color: var(--fc-surface); }
html .bg-neutral-800 { background-color: var(--fc-surface-2); }

html .text-neutral-100 { color: var(--fc-text); }
html .text-neutral-200 { color: var(--fc-text-muted); }
html .text-neutral-300 { color: var(--fc-text-dim); }
html .text-neutral-400 { color: var(--fc-text-faint); }
html .text-neutral-500 { color: var(--fc-text-ghost); }
html .text-neutral-600 { color: var(--fc-text-divider); }
html .text-neutral-700 { color: var(--fc-text-divider); }

html .border-neutral-700 { border-color: var(--fc-border-1); }
html .border-neutral-800 { border-color: var(--fc-border-2); }
html .border-neutral-600 { border-color: var(--fc-border-strong); }
html .divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fc-border-2); }

/* file-picker button background (Tailwind's `file:bg-neutral-800`) */
html .file\:bg-neutral-800::file-selector-button { background-color: var(--fc-surface-2); }
html .file\:text-neutral-100::file-selector-button { color: var(--fc-text); }

/* Hover variants */
html .hover\:border-neutral-500:hover { border-color: var(--fc-border-strong); }
html .hover\:text-neutral-100:hover { color: var(--fc-text); }
html .hover\:text-neutral-300:hover { color: var(--fc-text-dim); }

/* Coloured chips & error boxes */
html .bg-amber-950\/40 { background-color: var(--fc-amber-bg); }
html .border-amber-700\/60 { border-color: var(--fc-amber-border); }
html .border-amber-800\/60 { border-color: var(--fc-amber-border); }
html .text-amber-300 { color: var(--fc-amber-text); }
html .text-amber-200 { color: var(--fc-amber-text); }
html .text-amber-300\/80 { color: var(--fc-amber-text); }
html .bg-amber-400 { background-color: var(--fc-amber-dot); }

html .bg-emerald-950\/30 { background-color: var(--fc-emerald-bg); }
html .border-emerald-800\/60 { border-color: var(--fc-emerald-border); }
html .text-emerald-300 { color: var(--fc-emerald-text); }
html .bg-emerald-400 { background-color: var(--fc-emerald-dot); }

html .bg-red-950\/40 { background-color: var(--fc-red-bg); }
html .border-red-800 { border-color: var(--fc-red-border); }
html .text-red-300 { color: var(--fc-red-text); }
html .text-red-400 { color: var(--fc-red-text); }
html .hover\:bg-red-950:hover { background-color: var(--fc-red-bg); }
html .hover\:border-red-800:hover { border-color: var(--fc-red-border); }
html .hover\:border-red-600:hover { border-color: var(--fc-red-text); }
html .hover\:text-red-300:hover { color: var(--fc-red-text); }

/* Primary blue buttons sit on a dark blue fill in both themes, so their label
   is white regardless of the inherited body text colour. Otherwise the page
   text colour (dark in light theme) would bleed through and tank contrast. */
html .bg-blue-600, html .hover\:bg-blue-500:hover { color: #ffffff; }
html .bg-blue-600 { font-weight: 700; }

/* Blue chips (Pro badge, upgrade callouts, etc.). Tailwind's dark-blue
   utilities render as pale-on-pale in light mode — these overrides give
   them a light-theme palette while keeping the original dark-theme look. */
html .bg-blue-950\/30 { background-color: var(--fc-blue-bg); }
html .border-blue-700\/60 { border-color: var(--fc-blue-border); }
html .text-blue-300 { color: var(--fc-blue-text); }

*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Instant, readable tooltip for icon-only controls. Browser native [title]
   tooltips have a ~500ms delay and render at OS body-text size, which is
   too easy to miss on a large monitor — this fires on hover/focus with no
   delay and uses our own typography so it reads at a glance. Apply with
   data-tip="…" instead of title="…" (keep aria-label for screen readers).
   ::after is the bubble; ::before is the downward tail — together they
   read as one speech-bubble shape. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 6px 10px;
  border-radius: 8px;
  background: #525252;
  color: #fafafa;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 80ms ease-out;
  /* Force grayscale antialiasing. translateX(-50%) lands the bubble on a
     half-pixel whenever the text width is odd, which makes macOS disable
     subpixel antialiasing for that one bubble and the text looks fuzzy
     relative to its neighbours. Forcing grayscale gives identical
     rendering across all four icon tooltips. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-tip]::before {
  content: '';
  position: absolute;
  /* Overlap 2px into the bubble so the triangle and bubble read as one
     speech-bubble shape with no visible seam between them. */
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #525252;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 80ms ease-out;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Tick checklist (pricing card feature lists). Inline ✓ at the start of an
   <li> causes wrapped lines to sit under the tick — this hangs the tick in
   its own column via ::before so wrapped text aligns with the first line. */
.fc-checklist { list-style: none; padding-left: 0; }
.fc-checklist li {
  position: relative;
  padding-left: 1.25em;
}
.fc-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
}

/* ── Page-flip loader ────────────────────────────────────────────────────────
   Used by the reader loading overlay and the upload progress overlay.
   Both layouts load app.css, so the keyframe lives here once.             */
@keyframes fc-flip {
  0%       { transform: rotateY(0deg);   opacity: 1; }
  30%      { transform: rotateY(-90deg); opacity: 0; }
  31%, 99% { transform: rotateY(0deg);   opacity: 0; }
  100%     { transform: rotateY(0deg);   opacity: 1; }
}
.fc-loader { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fc-spread {
  position: relative; width: 80px; height: 56px;
  perspective: 200px;
  filter: drop-shadow(0 6px 18px var(--fc-loader-shadow));
}
.fc-left { position: absolute; left: 0; top: 0; width: 40px; height: 56px; background: #ccc8bc; border-radius: 2px 0 0 2px; }
.fc-left::after {
  content: ''; position: absolute; left: 5px; top: 9px; right: 4px; height: 1px;
  background: rgba(0,0,0,.15);
  box-shadow: 0 7px 0 rgba(0,0,0,.12), 0 14px 0 rgba(0,0,0,.12),
              0 21px 0 rgba(0,0,0,.12), 0 28px 0 rgba(0,0,0,.10),
              0 35px 0 rgba(0,0,0,.07);
}
.fc-right-bg { position: absolute; right: 0; top: 0; width: 40px; height: 56px; background: #161616; border-radius: 0 2px 2px 0; }
.fc-spine    { position: absolute; left: 39px; top: 0; width: 2px; height: 56px; background: linear-gradient(to bottom, #444, #222, #444); z-index: 10; }
.fc-page {
  position: absolute; right: 0; top: 0; width: 40px; height: 56px;
  background: #c8c3b5; transform-origin: left center; border-radius: 0 2px 2px 0;
  animation: fc-flip 2.1s ease-in-out infinite;
}
.fc-page:nth-child(5) { background: #c2bdb0; animation-delay: -.7s; }
.fc-page:nth-child(6) { background: #bcb8ab; animation-delay: -1.4s; }
.fc-page::after {
  content: ''; position: absolute; left: 5px; top: 9px; right: 4px; height: 1px;
  background: rgba(0,0,0,.12);
  box-shadow: 0 7px 0 rgba(0,0,0,.10), 0 14px 0 rgba(0,0,0,.10),
              0 21px 0 rgba(0,0,0,.10), 0 28px 0 rgba(0,0,0,.08),
              0 35px 0 rgba(0,0,0,.06);
}
.fc-prog { color: #737373; font-size: 11px; letter-spacing: .05em; }

/* Scaled-up loader used as a decorative hero on the landing page. The flipbook
   animation already lives in app.css for the upload/reader spinners, so we
   reuse it instead of inventing a new asset. */
.fc-loader-hero .fc-spread { transform: scale(2.6); transform-origin: center; margin: 28px 0; }

/* ── Reader nav bar ─────────────────────────────────────────────────────────
   The bottom bar uses --fc-nav-bg so it reads as a distinct surface against
   the page — slightly darker than the page in light theme, slightly lighter
   in dark theme. Tokenised via a CSS variable rather than a Tailwind class
   so both themes get the right hierarchy from one definition. */
html .fc-nav-bar { background-color: var(--fc-nav-bg); }

/* ── Reader side nav buttons (Issuu-style edge chevrons) ─────────────────── */
.fc-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 88px;
  color: #fff;
  background: rgba(38, 38, 38, .85);
  border: 1px solid rgba(82, 82, 82, .6);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s ease, background-color .15s ease;
}
.fc-side-btn:hover { opacity: 1; background: rgba(64, 64, 64, .95); }
.fc-side-btn:focus-visible { opacity: 1; }
.fc-side-btn:disabled { opacity: 0; pointer-events: none; }
.fc-side-btn svg { width: 22px; height: 22px; }
.fc-side-btn-left {
  left: 0;
  border-left: 0;
  border-radius: 0 10px 10px 0;
}
.fc-side-btn-right {
  right: 0;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}
@media (max-width: 640px) {
  .fc-side-btn { width: 36px; height: 64px; }
  .fc-side-btn svg { width: 18px; height: 18px; }
}