/* dubd.in frontpage
 *
 * Ports the design handoff to plain CSS — this app has no React, so the
 * design-system components (Button, Badge, Card, Select, Tabs, Waveform,
 * UploadDropzone) are rebuilt here as classes. Token references are kept
 * rather than resolved to literals: tokens/ is the contract.
 *
 * Scoped to .fp-page so nothing here can leak into the Bootstrap pages
 * (account, video, admin, login) that still use partials/base.twig.
 */

/* ─────────────────────────── components ─────────────────────────── */

/* Button — 32px at size sm, per the header spec. Radius stays at --radius-sm:
   --radius-full is reserved for pills, never button-as-capsule. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.ds-btn--sm { height: 32px; padding: 0 var(--space-4); }
.ds-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.ds-btn--full { width: 100%; }
.ds-btn--primary { background: var(--brand-solid); color: var(--on-brand-solid); }
.ds-btn--primary:hover { color: var(--on-brand-solid); text-decoration: none; }
/* Secondary: canvas fill + hairline, for actions that should not carry the
   ice-blue primary weight. */
.ds-btn--secondary {
  background: var(--surface-canvas);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.ds-btn--secondary:hover { color: var(--text-primary); text-decoration: none; }
/* Ghost is transparent, so the shared brightness hover has nothing to act on —
   it gets a surface tint instead. Press still comes from .ds-interactive. */
.ds-btn--ghost { background: transparent; color: var(--text-secondary); }
.ds-btn--ghost:hover { background: var(--surface-raised); color: var(--text-primary); text-decoration: none; }

/* base.css colours every dark-theme anchor with var(--brand) via
   `[data-theme="dark"] a` (0,1,1), which outranks the .ds-btn--* variants
   (0,1,0). Buttons rendered as <a> have to reassert their own label colour —
   without this the primary button is ice-blue text on an ice-blue fill. */
[data-theme="dark"] a.ds-btn--primary { color: var(--on-brand-solid); }
[data-theme="dark"] a.ds-btn--secondary { color: var(--text-primary); }
[data-theme="dark"] a.ds-btn--ghost { color: var(--text-secondary); }
[data-theme="dark"] a.ds-btn--ghost:hover { color: var(--text-primary); }

/* Badge — pill is legitimate here (--radius-full is for pills/switches/avatars). */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.ds-badge--brand { background: var(--brand-subtle); color: var(--brand-text); }
.ds-badge--success { background: var(--success-subtle); color: var(--success); }
.ds-badge--neutral { background: var(--surface-sunken); color: var(--text-tertiary); }
.ds-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* Card — hairline border + raised surface; on dark, elevation is surface tone
   plus a border rather than a shadow. */
.ds-card {
  background: var(--surface-raised);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--ds-card-padding, var(--space-6));
}

/* Select */
.ds-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-10) 0 var(--space-4);
  background-color: var(--surface-canvas);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  /* chevron, stroke matches the 1.75 icon weight */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a0aec4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.ds-select:focus-visible { border-color: var(--focus-ring); }
.ds-select option { background: var(--surface-canvas); color: var(--text-primary); }

/* Tabs */
.ds-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1.5px solid var(--border-subtle);
  scrollbar-width: none;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  padding: 0 var(--space-4);
  height: 42px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.ds-tab:hover { color: var(--text-primary); }
.ds-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }

/* Waveform — the dual-track motif. Bars are injected by frontpage.js. */
.ds-waveform { display: flex; align-items: center; gap: 2px; width: 100%; }
.ds-waveform__bar { flex: 1 1 auto; min-width: 1px; border-radius: var(--radius-full); background: currentColor; }

/* ─────────────────────────── page shell ─────────────────────────── */

.fp-page {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
}
.fp-shell { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.fp-page :where(h1, h2, h3) { text-wrap: balance; }
.fp-page :where(p) { text-wrap: pretty; }

/* Header */
.fp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  background: var(--gray-1000);
  border-bottom: 1.5px solid var(--border-subtle);
}
.fp-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
.fp-wordmark { height: 21px; width: auto; display: block; filter: invert(1); }
.fp-nav { display: flex; align-items: center; gap: var(--space-6); margin-left: var(--space-4); }
.fp-nav a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.fp-nav a:hover { color: var(--text-primary); text-decoration: none; }
.fp-header__spacer { flex: 1; }
.fp-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.fp-balance {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Mobile menu — the design's header does not collapse; spec asks for one below 640px. */
.fp-burger {
  display: none;
  appearance: none;
  background: none;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 32px;
  cursor: pointer;
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
}
.fp-menu {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: 1.5px solid var(--border-subtle);
  background: var(--gray-1000);
}
.fp-menu a {
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-decoration: none;
}
.fp-menu[data-open="true"] { display: flex; }

/* Anchors clear the sticky header */
.fp-page [id] { scroll-margin-top: 88px; }

/* Hero */
.fp-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-24) 0 var(--space-20);
}
.fp-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); max-width: 560px; }
.fp-hero h1 {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
}
.fp-hero h1 b { color: var(--brand); font-weight: var(--weight-extrabold); }
.fp-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--text-secondary);
  max-width: 44ch;
}
.fp-body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text-secondary);
  max-width: 56ch;
}

/* Action panel */
.fp-panel {
  border: 1.5px solid var(--border-subtle);
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.fp-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fp-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

/* Plan cards */
.fp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-20);
}
.fp-plan { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.fp-plan h3 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); }
.fp-plan p { font-size: var(--text-base); line-height: var(--leading-base); color: var(--text-secondary); }
.fp-plan p.fp-plan__grow { flex: 1; }
.fp-plan a { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand); }

/* Decorative waveform band */
.fp-band {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0.4;
  padding-bottom: var(--space-20);
}

/* Sections */
.fp-section { padding-bottom: var(--space-24); }
.fp-section h2 {
  font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl));
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-10);
}

/* Stage option cards */
.fp-stage { padding-top: var(--space-8); }
.fp-stage[hidden] { display: none; }
.fp-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.fp-option { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.fp-option__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.fp-option p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); flex: 1; }
.fp-option__price {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--brand);
}
.fp-option__price--free { color: var(--accent); }

/* How it works */
.fp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-10) var(--space-16);
}
.fp-step {
  display: flex;
  gap: var(--space-5);
  border-top: 1.5px solid var(--border-default);
  padding-top: var(--space-5);
}
.fp-step__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--brand); padding-top: 2px; }
.fp-step__body { display: flex; flex-direction: column; gap: var(--space-2); }
.fp-step h3 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); }
.fp-step p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }

/* FAQ */
.fp-faq { max-width: 900px; }
.fp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--brand);
}
.fp-faq h2 { margin: var(--space-3) 0 var(--space-10); }
.fp-faq__list { display: flex; flex-direction: column; }
.fp-faq__item { border-top: 1.5px solid var(--border-subtle); }
.fp-faq__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}
.fp-faq__trigger:hover { color: var(--brand); }
.fp-faq__q {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: inherit;
}
.fp-faq__mark { font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1; color: var(--brand); flex-shrink: 0; }
.fp-faq__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-10) var(--space-6) 0;
  max-width: 72ch;
}
.fp-faq__panel[hidden] { display: none; }
.fp-faq__panel p { font-size: var(--text-base); line-height: var(--leading-base); color: var(--text-secondary); }
.fp-faq__panel ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.fp-faq__panel li { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }

/* Footer */
.fp-footer { border-top: 1.5px solid var(--border-subtle); background: var(--gray-1000); }
.fp-footer__cols {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-10);
}
.fp-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.fp-footer__col--brand { gap: var(--space-4); }
.fp-footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  margin: 0;
}
.fp-footer__col a { font-size: var(--text-sm); color: var(--text-secondary); }
.fp-footer__col a.fp-footer__mail { color: var(--brand); }
.fp-footer__tagline { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-tertiary); max-width: 26ch; }
.fp-footer__bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-16);
  border-top: 1.5px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.fp-footer__bar p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.fp-footer__bar a { color: var(--text-secondary); }

/* ───────────────────── FilePond as the UploadDropzone ───────────────────── */
/* The design's dropzone is a stub; the real uploader is FilePond, restyled to
   match it. FilePond keeps the working POST to /upload and the progress and
   error states the design does not specify. */
/* FilePond's layout engine writes an inline `height` on the root (76px for the
   default one-line label). Our label is taller, and since the panel and the
   drop label are both inset inside the root, that left the content overflowing
   the dashed border. `min-height` clamps the used height regardless of the
   inline `height`, so it has to be set on the ROOT — sizing only the drop
   label grows the text area while the visible panel stays short. */
.fp-drop .filepond--root {
  margin: 0;
  font-family: var(--font-body);
  min-height: 180px;
}
.fp-drop .filepond--panel-root {
  background: var(--surface-canvas);
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.fp-drop .filepond--drop-label {
  min-height: 180px;
  color: var(--text-secondary);
}
.fp-drop .filepond--drop-label label { padding: var(--space-6); cursor: pointer; }
.fp-drop .filepond--label-action {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1.5px solid var(--brand);
}
.fp-drop__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.fp-drop__icon { color: var(--brand); margin-bottom: var(--space-1); }
.fp-drop__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.fp-drop__sub { font-size: var(--text-sm); color: var(--text-secondary); }
.fp-drop .filepond--item-panel { background: var(--gray-700); border-radius: var(--radius-sm); }
.fp-drop .filepond--drip-blob { background: var(--brand); }
.fp-drop .filepond--file { color: var(--gray-50); font-family: var(--font-mono); font-size: var(--text-xs); }
.fp-drop .filepond--credits { display: none; }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 640px) {
  .fp-nav { display: none; }
  .fp-header__actions .ds-btn { display: none; }
  .fp-burger { display: inline-flex; }
  .fp-hero { padding: var(--space-16) 0 var(--space-12); gap: var(--space-10); }
  .fp-section { padding-bottom: var(--space-16); }
  .fp-faq__panel { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-page *, .fp-page *::before, .fp-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
.ds-badge--danger { background: var(--danger-subtle); color: var(--danger); }

/* ── language switcher ───────────────────────────────────────────────────
   Replaces the three dead `/?lang=` footer links with a real picker over
   every locale that ships a catalogue. A native <select> on purpose: 74
   options need the platform's own scrolling and type-ahead, and it still
   works with JavaScript off (the form falls back to a plain navigation). */
.lang-switch { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.lang-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-switch__select {
  width: 100%;
  max-width: 220px;
  font-size: var(--text-sm);
}
/* The select inherits .ds-select, whose label colour is asserted against the
   `[data-theme="dark"] a` rule elsewhere; options are drawn by the platform
   and need their own colours or they render dark-on-dark on some engines. */
.lang-switch__select option { background: var(--surface-raised); color: var(--text-primary); }

/* Right-to-left locales: the design is built on logical properties almost
   everywhere, so this is the short list of places that still need mirroring. */
[dir="rtl"] .fp-nav,
[dir="rtl"] .fp-header__actions { flex-direction: row-reverse; }
[dir="rtl"] .fp-footer__cols { direction: rtl; }
[dir="rtl"] .fp-hero__copy { text-align: right; }
[dir="rtl"] .pr-arrow { transform: scaleX(-1); }