/* ═══════════════════════════════════════════════════════════════
 * STORYBOOK — the site's look, laid over design-system.css (owner, Oct 2026).
 *
 * Warm, hand-lettered, a picture book at bedtime: plum-ink night, paper
 * grain, mustard main buttons that press, photo-frame cards set slightly
 * askew — and everything else in the brand's own blue and violet, the two
 * ends of the logo's gradient: icons, labels, tabs, selections, secondary
 * buttons (owner, Oct 2026). The mustard is the one warm colour left, so the
 * main action is the thing that stands out.
 * Surface only — no markup depends on it; take the <link> out of
 * layouts/main.php and the site is the design system as it was.
 *
 * Loaded last, after light-theme.css, so it wins on order where specificity
 * ties. Dark colours sit under html:not([data-theme="light"]); the light
 * theme has its own block at the end. Shapes, fonts and the label hold in
 * both. Headings: Balsamiq Sans (Latin + Cyrillic); other scripts fall back
 * to the system font, as they do today.
 * ═══════════════════════════════════════════════════════════════ */

:root {
    --sb-mustard:      #F6C453;
    --sb-mustard-deep: #B88A22;
    /* The logo's gradient, measured off the uploaded logo: sky blue to violet. */
    --sb-blue:         #5AAEF5;
    --sb-violet:       #8B5CF6;
    --sb-violet-deep:  #7C3AED;
    --sb-lilac:        #A78BFA;
    --sb-lavender:     #E4DAFF;
    --sb-lavender-ink: #3B1F86;
    --sb-cream:        #FFF6E6;
    --sb-peach:        #FFD9C2;
    --sb-peach-ink:    #5A2A14;
    --sb-ink:          #2B1B0E;
    --sb-heading:      "Balsamiq Sans", var(--font-sans);
}

/* ── Shapes, fonts and the label: both themes ──────────────────── */

.ds-hero__title,
.studio-body h2,
.studio-body h3 {
    font-family: var(--sb-heading) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}

/* The label: a dark pill with a violet outline and a sparkle (owner's pick
   of four, Oct 2026) — it sits on the hero's footage without competing
   with the mustard button under it. Dark in both themes: it is always over
   the footage.
     #D6C8FF over the darkest footage (#1A1427)   ~11.7:1
     #D6C8FF over white footage (#50495E)          5.5:1 */
.ds-eyebrow,
html[data-theme="light"] .ds-hero .ds-eyebrow {
    background: rgba(30, 22, 48, .78) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #D6C8FF !important;
    border: 1.5px solid rgba(139, 92, 246, .75) !important;
    border-radius: 999px;
    transform: none;
    box-shadow: 0 0 18px -6px rgba(139, 92, 246, .55);
}
.ds-eyebrow::before { content: "\2726"; margin-right: .45em; color: #C4B5FD; }

/* Mustard buttons that press: a darker edge underneath, gone on hover. */
.ds-btn-primary,
.ds-btn-solid,
html[data-theme="light"] .ds-btn-primary {
    background: var(--sb-mustard) !important;
    color: var(--sb-ink) !important;
    border: 0 !important;
    border-radius: 1rem !important;
    font-family: var(--sb-heading);
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 0 var(--sb-mustard-deep), 0 10px 24px -8px rgba(246, 196, 83, .5) !important;
    transition: transform .12s, box-shadow .12s;
}
.ds-btn-primary:hover,
.ds-btn-solid:hover {
    transform: translateY(1px);
    box-shadow: 0 3px 0 var(--sb-mustard-deep), 0 8px 18px -8px rgba(246, 196, 83, .5) !important;
}
.ds-btn-primary:active,
.ds-btn-solid:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--sb-mustard-deep) !important;
}

/* THE SAME MUSTARD FOR THE BUTTONS THAT SPEND OR BUY (owner, Oct 2026):
   Generate, its sign-in stand-in, and the packages' Get credits — yellow like
   the home page's. The blue Generate and the mustard-with-white-text package
   buttons lost their words, so the text is dark ink everywhere. The Generate
   pill's price half is the label's peach: one polarity on both halves.
     ink #2B1B0E on mustard #F6C453      10.3:1
     #5A2A14 on peach #FFD9C2 (price)     9.0:1
   `html body.studio-body` ties light-theme.css's price rule and wins on order. */
.ox-cta--mustard { border-color: rgba(184, 138, 34, .6); box-shadow: 0 4px 0 var(--sb-mustard-deep); }
.ox-cta--mustard:hover:not(:disabled) { box-shadow: 0 3px 0 var(--sb-mustard-deep), 0 10px 24px -8px rgba(246, 196, 83, .5); }
.ox-cta--mustard:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--sb-mustard-deep); }
.ox-cta--mustard:focus-visible { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px rgba(246, 196, 83, .6); }
html body.studio-body .ox-cta--mustard .ox-cta__do { background: #F6C453; color: #2B1B0E; font-weight: 700; }
html body.studio-body .ox-cta--mustard:hover:not(:disabled) .ox-cta__do { background: #FAD27A; }
html body.studio-body .ox-cta--mustard .ox-cta__price { background: #FFD9C2; color: #5A2A14; font-weight: 600; }

html body.studio-body .gen-submit,
html body.studio-body .studio-btn {
    background: var(--sb-mustard) !important;
    color: var(--sb-ink) !important;
    border: 0 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 0 var(--sb-mustard-deep), 0 10px 24px -10px rgba(246, 196, 83, .5) !important;
    transition: transform .12s, box-shadow .12s, background .12s;
}
html body.studio-body .gen-submit:hover,
html body.studio-body .studio-btn:hover {
    background: #FAD27A !important;
    transform: translateY(1px);
    box-shadow: 0 3px 0 var(--sb-mustard-deep), 0 8px 18px -10px rgba(246, 196, 83, .5) !important;
}
html body.studio-body .studio-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sb-mustard-deep) !important; }

/* Photo-frame cards set askew in turn; straight again under the pointer.
   The rail scrolls sideways, and overflow-x clips the top as well — so the
   track gets room above for the lift and the tilt, given back by its margin.
   THE FRAME IN THE LOGO'S BLUE (owner, Oct 2026): the 3px frame was violet;
   a glow alone was tried after it and melted into the page — and the rail,
   which scrolls sideways, clipped it into a pale box behind the cards. So
   the frame is back, blue, with the small glow it always had. */
.studio-body .rail-track { padding-top: .75rem; margin-top: -.75rem; }
.studio-body .rail-card-link {
    border-radius: 1.4rem;
    border: 3px solid var(--sb-blue) !important;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7), 0 0 22px -10px rgba(90, 174, 245, .6) !important;
}
/* The rails' heading icons in the logo's blue (owner, Oct 2026). */
html body.studio-body .rail h2.studio-gradient-text svg { color: var(--sb-blue); }
html[data-theme="light"] body.studio-body .rail h2.studio-gradient-text svg { color: #155FA8; }
.studio-body .rail-card-link:nth-child(odd)  { transform: rotate(-.6deg); }
.studio-body .rail-card-link:nth-child(even) { transform: rotate(.6deg); }
.studio-body .rail-card-link:hover { transform: rotate(0) translateY(-4px) !important; }
@media (prefers-reduced-motion: reduce) {
    .studio-body .rail-card-link:nth-child(n) { transform: none !important; }
}

/* ── The brand's colours: icons, labels, tabs, secondary buttons ── */

/* How it works: icons and numbers in the logo's blue (owner, Oct 2026). */
html body.studio-body .ds-hiw__step svg { color: var(--sb-blue); }
/* The hero's "start free" icon in the brand's violet — over the footage in
   both themes, so one colour for both. */
html body.studio-body .ds-hero__note svg { color: var(--sb-lilac); }
html body.studio-body .studio-gradient-text svg { color: var(--sb-lilac); }
html body.studio-body .ds-mini-num {
    background: rgba(90, 174, 245, .18);
    color: var(--sb-blue);
}

/* "Popular" on a package: a violet ribbon.   white on #7C3AED   5.7:1 */
html body.studio-body .studio-ribbon {
    background: var(--sb-violet-deep) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

/* A plan badge on a scene: the lavender of the site's labels. */
html body.studio-body .gen-plan-pill {
    background: rgba(228, 218, 255, .14);
    border-color: rgba(167, 139, 250, .45);
    color: #E4DAFF;
}
html[data-theme="light"] body.studio-body .gen-plan-pill { background: #F1ECFF; border-color: rgba(109, 63, 224, .3); color: #3B1F86; }

/* Tabs: the chosen one filled violet, as the result page's already are —
   one step deeper, for its small white text.   white on #7C3AED   5.7:1 */
html body.studio-body .gen-seg__opt.is-active {
    background: linear-gradient(180deg, var(--sb-violet-deep), #6D28D9) !important;
    color: #FFFFFF !important;
}

/* Secondary buttons: a violet outline, never a fill — the fill is the main
   button's. */
html body.studio-body .ds-btn-ghost,
html body.studio-body .studio-btn-ghost,
html body.studio-body .rail-see-all {
    border: 1.5px solid rgba(139, 92, 246, .55) !important;
    color: #C4B5FD !important;
    background: rgba(139, 92, 246, .06) !important;
}
html body.studio-body .ds-btn-ghost:hover,
html body.studio-body .studio-btn-ghost:hover,
html body.studio-body .rail-see-all:hover {
    border-color: var(--sb-lilac) !important;
    background: rgba(139, 92, 246, .16) !important;
    color: #FFFFFF !important;
}

/* The hand-drawn underline under section titles, in the logo's gradient. `html
   body` lifts it over light-theme.css, whose `background: none !important`
   on the same element is one element-selector stronger. */
html body h2.studio-gradient-text {
    padding-bottom: .35em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%235AAEF5'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3Cpath d='M2 6 Q 15 1 30 5 T 60 5 T 90 5 T 118 4' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 0 100% !important;
    background-size: 120px 10px !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}
/* A block heading is as wide as its column, so the underline sat under the
   column's left edge — under nothing, on a centred heading on a wide screen.
   Shrunk to its text, the line is under the words wherever they sit. */
html body h2.studio-gradient-text:not(.inline-flex) { display: inline-block; }

/* ── Dark: plum-ink night with paper grain ─────────────────────── */

/* --accent is every selection, chip dot, link and step number: the brand's
   violet, at the lighter end so small text on the night still reads.
     #A78BFA on #1B1420   6.6:1 */
html:not([data-theme="light"]) {
    --accent:       #A78BFA;
    --accent-hover: #C4B5FD;
    --accent-soft:  rgba(139, 92, 246, .16);
    --accent-ring:  rgba(139, 92, 246, .45);
    --glow:         rgba(139, 92, 246, .18);
    --primary:      #F6C453;
    --primary-fg:   #2B1B0E;
    --accent-fg:    #2B1B0E;
    --ink:          #FFF6E6;
    --ink-dim:      #F5EBDC;
    --muted:        #C7B8A6;
    --line:         rgba(255, 236, 200, .12);
}
html:not([data-theme="light"]) .studio-bg-layer {
    background-color: #1b1420 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(1000px 500px at 20% 0%, rgba(139, 92, 246, .14), transparent 60%),
        radial-gradient(900px 500px at 90% 30%, rgba(90, 174, 245, .09), transparent 60%) !important;
}
html:not([data-theme="light"]) .studio-header {
    background: rgba(27, 20, 32, .8) !important;
    border-bottom: 1px dashed rgba(255, 236, 200, .18);
}
/* The hero's footage fades into the page, not into black. */
html:not([data-theme="light"]) .ds-hero__scrim {
    background: linear-gradient(to top, rgba(27, 20, 32, 1) 0%, rgba(27, 20, 32, .55) 40%, rgba(27, 20, 32, .15) 100%) !important;
}
html:not([data-theme="light"]) .studio-gradient-text:not(.ds-hero__title) {
    color: var(--sb-cream) !important;
    -webkit-text-fill-color: var(--sb-cream);
}
html:not([data-theme="light"]) .studio-panel {
    background: rgba(255, 246, 230, .04) !important;
    border: 2px dashed rgba(255, 236, 200, .18) !important;
    border-radius: 1.5rem !important;
}

/* ── Light: a cream page ───────────────────────────────────────── */

/*   #6D3FE0 on the cream #FBF4E8   5.6:1 */
html[data-theme="light"] body.studio-body {
    --accent:       #6D3FE0;
    --accent-hover: #5B2FCC;
    --accent-soft:  rgba(109, 63, 224, .12);
    --accent-ring:  rgba(109, 63, 224, .38);
    --glow:         rgba(109, 63, 224, .16);
    --primary:      #F6C453;
    --primary-fg:   #2B1B0E;
}
html[data-theme="light"] .studio-bg-layer {
    background-color: #FBF4E8 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(1000px 500px at 20% 0%, rgba(139, 92, 246, .12), transparent 60%),
        radial-gradient(900px 500px at 90% 30%, rgba(90, 174, 245, .12), transparent 60%) !important;
}
html[data-theme="light"] .studio-header {
    background: rgba(251, 244, 232, .88) !important;
    border-bottom: 1px dashed rgba(43, 27, 14, .16);
}
html[data-theme="light"] .studio-gradient-text:not(.ds-hero__title) {
    color: var(--sb-ink) !important;
    -webkit-text-fill-color: var(--sb-ink) !important;
}
html[data-theme="light"] .studio-panel {
    background: #FFFDF8 !important;
    border: 2px dashed rgba(43, 27, 14, .14) !important;
    border-radius: 1.5rem !important;
}
html[data-theme="light"] .studio-body .rail-card-link {
    border-color: var(--sb-blue) !important;
    box-shadow: 0 12px 28px -12px rgba(43, 27, 14, .45) !important;
}
html[data-theme="light"] body.studio-body .ds-hiw__step svg { color: #155FA8; }
html[data-theme="light"] body.studio-body .ds-mini-num { background: rgba(21, 95, 168, .12); color: #155FA8; }
html[data-theme="light"] body.studio-body .studio-gradient-text svg { color: #6D3FE0; }
html[data-theme="light"] body.studio-body .ds-btn-ghost,
html[data-theme="light"] body.studio-body .studio-btn-ghost,
html[data-theme="light"] body.studio-body .rail-see-all {
    border-color: rgba(109, 63, 224, .45) !important;
    color: #5B2FCC !important;
    background: #FFFFFF !important;
}
html[data-theme="light"] body.studio-body .ds-btn-ghost:hover,
html[data-theme="light"] body.studio-body .studio-btn-ghost:hover,
html[data-theme="light"] body.studio-body .rail-see-all:hover {
    border-color: #6D3FE0 !important;
    background: rgba(109, 63, 224, .08) !important;
    color: #3B1F86 !important;
}