/* ============================================================================
   Symphonic Labs - compiled stylesheet (design tokens + components).
   Generated file. Do not edit directly.
   ============================================================================ */

/* ============================================================================
   SYMPHONIC DESIGN TOKENS  —  framework-agnostic CSS custom properties
   Source of truth: OFFICIAL Symphonic Brand Identity Guidelines 2023
   (https://symphonic.com/symphonic-brand/ -> Symphonic_BrandingGuidelines_2023.pdf)
   Drop this in and use var(--sym-*) anywhere. Add class="dark" on <html>
   for the dark/charcoal brand surface.
   ============================================================================ */
:root {
  /* --- Brand (official 2023 palette) --- */
  --sym-green:        #35d850;   /* SECONDARY ACCENT — the brand green (r53 g216 b80). The pop color. */
  --sym-green-hover:  #2ab844;   /* hover/active (derived ~10% darker) */
  --sym-green-fg:     #000000;   /* black text/icons on green = max contrast & pop */

  /* primary palette */
  --sym-black:        #000000;   /* primary */
  --sym-offwhite:     #f4f4f4;   /* primary */
  /* secondary neutrals */
  --sym-grey:         #d1d3d4;   /* light grey */
  --sym-grey-dark:    #333333;   /* dark grey */

  /* --- Semantic (LIGHT, default) --- */
  --sym-bg:            #f4f4f4;   /* off-white page */
  --sym-surface:       #ffffff;
  --sym-surface-muted: #f4f4f4;
  --sym-text:           #000000;   /* primary copy */
  --sym-text-secondary: #333333;   /* supporting copy, labels, hints */
  /* Genuinely muted, for de-emphasised state (pending stage labels, disabled).
     ~6:1 on #fff and ~5.5:1 on #f4f4f4 - both AA.
     Added 2026-08-04. Previously --sym-text-muted was #333333, identical to
     secondary, so the generation-log module's pending vs active stage labels
     were the same colour. Canvas had patched this locally with #5f6368; Apple
     Motion and Social Mockups still shipped the collision. Fixed here so the
     apps can alias instead of each inventing a value. */
  --sym-text-muted:     #5f6368;
  --sym-border:        #d1d3d4;
  --sym-ring:          rgba(53,216,80,.40);

  /* --- Typography (official) --- */
  /* Primary typeface = RALEWAY (headings / short text, weights 400-900). */
  /* Secondary typeface = OPEN SANS (body copy). */
  --sym-font-heading: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sym-font-body:    "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sym-font:         var(--sym-font-body);   /* default body font */
  --sym-fw-regular:400; --sym-fw-semibold:600; --sym-fw-bold:700; --sym-fw-extrabold:800; --sym-fw-heavy:900;
  --sym-text-xs:.75rem; --sym-text-sm:.875rem; --sym-text-base:1rem; --sym-text-lg:1.125rem;
  --sym-text-xl:1.25rem; --sym-text-2xl:1.5rem; --sym-text-3xl:1.875rem; --sym-text-4xl:2.25rem;

  /* --- Radius --- */
  --sym-radius-sm:.375rem; --sym-radius:.5rem; --sym-radius-lg:.75rem; --sym-radius-full:9999px;

  /* --- Layout --- */
  --sym-content-max: 600px;   /* the Labs content spine: form, progress, result all cap here */

  /* --- Shadow --- */
  --sym-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --sym-shadow:    0 1px 3px rgba(0,0,0,.12), 0 1px 2px -1px rgba(0,0,0,.1);
  --sym-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.12), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* --- Semantic (DARK / charcoal brand surface)  —  <html class="dark"> --- */
.dark {
  --sym-bg:            #1a1a1a;
  --sym-surface:       #252525;
  --sym-surface-muted: #1f1f1f;
  --sym-text:           #f4f4f4;
  --sym-text-secondary: #d1d3d4;
  /* ~5.9:1 on #1a1a1a, AA. Mirrors the light-mode three-step scale. */
  --sym-text-muted:     #9aa0a6;
  --sym-border:        #333333;
  /* green stays #35d850 in both modes; on dark, white text on green also reads */
}


/* ============================================================================
   SYMPHONIC LABS — shared COMPONENT layer
   Source of truth for every Symphonic Labs app (Cover Art, Canvas, Music, ...).
   Built entirely on the tokens in symphonic-tokens.css — load that FIRST.

   Rules of the standard (see AGENTS.md):
   - ONE accent: green is for the PRIMARY action, links, focus, active. Not decoration.
   - The primary button is GREEN with BLACK text (brand book: black on green = max pop).
   - Borders over shadows. Surfaces are 1px zinc borders, shadows are subtle.
   - Hierarchy from weight/size, not a second font. Raleway = headings/buttons, Open Sans = body.

   USAGE: class your elements with .sym-* below. Do not re-style buttons/chips/
   inputs per-app — that is exactly what causes drift between apps.
   ============================================================================ */

/* ---- Buttons ------------------------------------------------------------- */
/* The appearance variants below are SELF-SUFFICIENT: .sym-btn-primary alone is a
   complete button, and .sym-btn is optional on it.

   They used to require composing with .sym-btn, and writing
   class="sym-btn-secondary" on its own produced an unstyled native button - a
   bare rectangle with sharp corners. That fails silently: nothing errors, the
   page just looks slightly cheap, and it is easy to miss in review. Listing the
   variants on the base rule makes the mistake impossible instead of documented.

   Composing still works, so every existing class="sym-btn sym-btn-primary" is
   untouched.

   Size and layout modifiers (.sym-btn-lg, -sm, -block) are deliberately NOT in
   this list. They only adjust an existing button and are meaningless alone. */
.sym-btn,
.sym-btn-primary,
.sym-btn-secondary,
.sym-btn-ghost,
.sym-btn-danger,
.sym-btn-generate,
.sym-btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sym-font-heading);
  font-weight: var(--sym-fw-bold);
  font-size: .95rem; line-height: 1;
  padding: .6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--sym-radius);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  text-decoration: none;
}
.sym-btn:disabled,
.sym-btn-primary:disabled,
.sym-btn-secondary:disabled,
.sym-btn-ghost:disabled,
.sym-btn-danger:disabled,
.sym-btn-accent:disabled { opacity: .6; cursor: not-allowed; }
.sym-btn svg,
.sym-btn-primary svg,
.sym-btn-secondary svg,
.sym-btn-ghost svg,
.sym-btn-danger svg,
.sym-btn-accent svg { width: 1.1em; height: 1.1em; }

/* PRIMARY — the one main action per view. Green, black text. */
.sym-btn-primary { background: var(--sym-green); color: var(--sym-green-fg); border-color: var(--sym-green); }
.sym-btn-primary:hover:not(:disabled) { background: var(--sym-green-hover); border-color: var(--sym-green-hover); }

/* SECONDARY — supporting actions (e.g. "Expand with AI"). Outline. */
.sym-btn-secondary { background: var(--sym-surface); color: var(--sym-text); border-color: var(--sym-border); }
.sym-btn-secondary:hover:not(:disabled) { background: var(--sym-surface-muted); border-color: var(--sym-text-muted); }

/* GHOST — quiet, for back/cancel. */
.sym-btn-ghost { background: transparent; color: var(--sym-text); border-color: var(--sym-border); }
.sym-btn-ghost:hover:not(:disabled) { background: var(--sym-surface-muted); }

/* DANGER — destructive, used sparingly. */
.sym-btn-danger { background: #e7000b; color: #fff; border-color: #e7000b; }
.sym-btn-danger:hover:not(:disabled) { filter: brightness(1.05); }

/* Sizes */
.sym-btn-lg { font-size: 1.05rem; font-weight: var(--sym-fw-extrabold); padding: .8rem 1.5rem; }
.sym-btn-sm { font-size: .8rem; padding: .45rem .8rem; }
.sym-btn-block { width: 100%; }

/* ---- Generate button (the primary "create" action) ---------------------- */
/* Green, content-width, with the lightning bolt drawn by CSS so it can never
   be dropped from markup. Used by both apps' generate buttons. */
.sym-btn-generate {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--sym-green); color: var(--sym-green-fg);
  border: none; border-radius: var(--sym-radius);
  font-family: var(--sym-font-heading); font-size: 1.05rem; font-weight: var(--sym-fw-extrabold);
  padding: .8rem 1.5rem; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.sym-btn-generate::before {
  content: ""; width: 1.15em; height: 1.15em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sym-btn-generate:hover:not(:disabled) { background: var(--sym-green-hover); transform: translateY(-1px); }
.sym-btn-generate:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---- Chips & tags -------------------------------------------------------- */
/* Pill chip (multi-select moods, presets). */
.sym-chip {
  display: inline-flex; align-items: center;
  padding: .4rem .875rem;
  background: var(--sym-surface);
  border: 1px solid var(--sym-border);
  border-radius: var(--sym-radius-full);
  font-family: var(--sym-font-body); font-size: .85rem;
  color: var(--sym-text-muted);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sym-chip:hover { border-color: var(--sym-green); color: var(--sym-text); }
.sym-chip.active { background: var(--sym-green); border-color: var(--sym-green); color: var(--sym-green-fg); font-weight: var(--sym-fw-semibold); }

/* Square-cornered tag (single-select styles). Same chip, just a tighter radius. */
.sym-tag { border-radius: var(--sym-radius); }

/* ---- Inputs -------------------------------------------------------------- */
.sym-input, .sym-select, .sym-textarea {
  width: 100%;
  padding: .6rem .8rem;
  background: var(--sym-surface);
  border: 1px solid var(--sym-border);
  border-radius: var(--sym-radius);
  color: var(--sym-text);
  font-family: var(--sym-font-body); font-size: .95rem;
}
.sym-textarea { resize: vertical; min-height: 120px; }
.sym-input:focus, .sym-select:focus, .sym-textarea:focus {
  outline: none; border-color: var(--sym-green); box-shadow: 0 0 0 3px var(--sym-ring);
}
.sym-input::placeholder, .sym-textarea::placeholder { color: var(--sym-text-muted); }

/* Field label */
.sym-label { display: block; font-family: var(--sym-font-heading); font-size: .875rem; font-weight: var(--sym-fw-bold); color: var(--sym-text); margin-bottom: .5rem; }

/* ---- Cards / panels ------------------------------------------------------ */
.sym-card {
  background: var(--sym-surface);
  border: 1px solid var(--sym-border);
  border-radius: var(--sym-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--sym-shadow-sm);
}

/* ---- Badge / pill label (e.g. the "Labs" / "Beta" tag) ------------------- */
.sym-badge {
  display: inline-block;
  font-family: var(--sym-font-heading); font-size: .62rem; font-weight: var(--sym-fw-extrabold);
  padding: .28rem .65rem; border-radius: var(--sym-radius-full);
  background: var(--sym-green); color: var(--sym-green-fg);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Neutral/ink variant. For a status pill sitting beside the green brand
   badge, so the green reads as the brand rather than competing with a
   second status. Inverts correctly in dark mode. */
.sym-badge--ink { background: var(--sym-text); color: var(--sym-bg); }

/* ---- Labs shared header --------------------------------------------------
   Two lines: a centred theme toggle, then back-nav at the edges with the brand
   lockup centred between them. Spec and live demo:
   SYMPHONIC-LABS-MODULES/header/TREE.html

   Layout only - it composes .sym-back and .sym-badge, and must not restyle
   them. Lives here rather than per-app: four apps share this header, and four
   private copies of it is exactly the drift this sheet exists to prevent. */
.sym-hd { display: block; padding: 0 0 2.5rem; }
.sym-hd__mode { display: flex; justify-content: center; padding: 1rem 0 0; }

/* Equal-width side columns keep the lockup on TRUE centre. Giving flex:1 to
   the middle alone centres it in the LEFTOVER space, which drifts because the
   two button labels are different widths.
 */
.sym-hd__nav { display: flex; align-items: center; gap: 1rem; padding: 2.5rem 0 0; }
.sym-hd__side { flex: 1 1 0; display: flex; min-width: 0; }
.sym-hd__side--right { justify-content: flex-end; }
.sym-hd__nav .sym-back { white-space: nowrap; }

.sym-hd__brand { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: .6rem; }
/* Inline SVG, not the shipped symphonic-logo.png: that asset carries 5%
   transparent padding each side, which renders as a stray ~5px gap. The master
   SVG ships with no viewBox, so add viewBox="0 0 1500 220" when embedding or
   CSS sizing crops instead of scaling. */
.sym-hd__brand .sym-logo { height: 26px; width: auto; display: block; flex: none; }
.sym-hd__brand .sym-logo path { fill: var(--sym-text); }

@media (max-width: 640px) {
  .sym-hd__nav { flex-wrap: wrap; justify-content: center; }
  .sym-hd__brand { order: -1; flex: 0 0 100%; padding-bottom: .75rem; }
}

/* ---- Link ---------------------------------------------------------------- */
.sym-link { color: var(--sym-green); font-weight: var(--sym-fw-semibold); text-decoration: none; }
.sym-link:hover { text-decoration: underline; }

/* ---- Toggle / segmented control (Guided | Advanced, etc.) ---------------- */
.sym-toggle { display: inline-flex; gap: .4rem; padding: .25rem; background: var(--sym-surface-muted); border: 1px solid var(--sym-border); border-radius: var(--sym-radius-full); }
.sym-toggle__btn { padding: .45rem 1.4rem; border: 0; background: transparent; border-radius: var(--sym-radius-full); font-family: var(--sym-font-heading); font-weight: var(--sym-fw-bold); font-size: .85rem; color: var(--sym-text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.sym-toggle__btn.active { background: var(--sym-green); color: var(--sym-green-fg); }

/* ============================================================================
   LABS PATTERNS — the shared layouts the gen tools (Cover v9 + Canvas v12)
   converged on, 2026-06-23. Values match the apps' canonical rendering.
   ============================================================================ */

/* ---- Content spine: one width for the whole vertical stack ---------------- */
.sym-content { max-width: var(--sym-content-max); margin-inline: auto; }

/* ---- Accent-outline button (the "Expand with AI" helper) ------------------ */
/* Secondary button with a green outline; fills green on hover. */
.sym-btn-accent { border-color: var(--sym-green); }
.sym-btn-accent:hover:not(:disabled) { background: var(--sym-green); color: var(--sym-green-fg); border-color: var(--sym-green); }

/* ---- Back button (quiet nav) ---------------------------------------------- */
.sym-back {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem;
  background: var(--sym-surface); color: var(--sym-text);
  border: 1px solid var(--sym-border); border-radius: var(--sym-radius);
  font-family: var(--sym-font-heading); font-weight: var(--sym-fw-semibold); font-size: .85rem;
  cursor: pointer;
  /* .sym-btn already sets this; .sym-back did not, so an <a class="sym-back">
     rendered underlined. It had only ever been used on <button>, which is why
     it went unnoticed. */
  text-decoration: none;
}
.sym-back:hover { background: var(--sym-surface-muted); }
.sym-back svg { width: 16px; height: 16px; }

/* ---- Toggle row (a checkbox dressed as a setting card) --------------------- */
/* e.g. "Loop the video", "Add artist + title text to the cover". */
.sym-toggle-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .9rem 1rem; margin-bottom: 1.25rem;
  background: var(--sym-surface-muted);
  border: 1px solid var(--sym-border); border-radius: var(--sym-radius);
  cursor: pointer;
}
.sym-toggle-row input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--sym-green); cursor: pointer; }
.sym-toggle-row strong { display: block; font-family: var(--sym-font-heading); font-size: .875rem; font-weight: var(--sym-fw-bold); color: var(--sym-text); }

/* ---- Section label + inline hint ("Mood / Vibe   optional · multi-select") - */
.sym-section-label { font-family: var(--sym-font-heading); font-weight: var(--sym-fw-bold); font-size: .9rem; color: var(--sym-text); }
.sym-section-label .hint { font-family: var(--sym-font-body); font-weight: var(--sym-fw-regular); font-size: .8rem; color: var(--sym-text-muted); margin-left: .4rem; }

/* ---- Expand row (AI helper button + its description, stacked) -------------- */
.sym-expand-row { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: .75rem; }
.sym-expand-row .sym-hint { font-size: .8rem; color: var(--sym-text-muted); }

/* ---- Generate ------------------------------------------------------------- */
/* The control that starts the work.
   THE RULES (decided 18 Aug 2026):
     1. Centred.
     2. The label is "Generate" in every app - not "Rip Stems", not "Generate
        Motion Art". The app's name is already on the page; the button says what
        it does.
   Scope is the BUTTON. The price and budget lines some apps show underneath are
   Adrian's code and are not governed here. */
.sym-gen-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 1rem; }
.sym-gen-wrap > .sym-btn,
.sym-gen-wrap > .sym-btn-primary { align-self: center; width: auto; }

/* ---- Result / delivery ("Your x is ready") -------------------------------- */
/* On completion the form collapses to this: centered headline + optional
   subtitle + a card holding the asset + a centered stack of actions.
   THE RULES (decided 18 Aug 2026, and they are rules, not defaults):
     1. No full-width buttons. Every button sizes to its own label.
     2. Everything centered.
     3. Title Case on every BUTTON label - "Download All Stems", not "Download all stems".
     4. Every app has a headline, and it reads "Your x is ready" - sentence case,
        only the first word capitalised.
     5. Every app offers "Start Over" as the last action. "Generate Another"
        keeps the current inputs; Start Over goes back to an empty form. Two of
        five apps had it and three did not, so people learned it was optional -
        which is exactly how a fleet stops feeling like one product.
   Rule 1 replaces the previous `width: 100%` on the secondary. Apps that reached
   the old look with `sym-btn-block` must drop it - the block modifier is for
   forms, not for result screens. */
.sym-result-head { text-align: center; margin-bottom: 1.5rem; }
.sym-result-head h1 { font-family: var(--sym-font-heading); font-size: 2rem; font-weight: var(--sym-fw-extrabold); line-height: 1.1; color: var(--sym-text); }
.sym-result-sub { font-size: .9rem; color: var(--sym-text-muted); margin-top: .4rem; }
.sym-result-actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 1.5rem; }
/* Belt and braces: a button that arrives carrying sym-btn-block, or a stray
   local width, still comes out label-sized here. A rule nobody can accidentally
   opt out of is worth more than one everybody has to remember. */
.sym-result-actions .sym-btn,
.sym-result-actions .sym-btn-primary,
.sym-result-actions .sym-btn-secondary,
.sym-result-actions .sym-btn-ghost { width: auto; align-self: center; }
/* Start Over sits last and reads lighter than the other two - smaller type, a
   plain surface - but it is still a button. Styled as bare text it looked like
   a disabled label and nobody would click it; an action people cannot see is
   the same as one that is not there. Every app
   had its own version of this: a bordered button with a chevron in one, a bare
   link in another, and in one case sitting outside the actions block entirely. */
.sym-startover {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--sym-font-heading); font-weight: var(--sym-fw-bold);
  font-size: .875rem; line-height: 1;
  padding: .55rem 1.1rem; margin-top: .15rem;
  background: var(--sym-surface); color: var(--sym-text-secondary);
  border: 1px solid var(--sym-border); border-radius: var(--sym-radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.sym-startover:hover { color: var(--sym-text); border-color: var(--sym-text); }
.sym-startover svg { width: 1em; height: 1em; }