/* =====================================================================
 * Studio — Shell & Header
 * ---------------------------------------------------------------------
 * Brand carry-over from the marketing hero:
 *   • Paperlogy 900 wordmark, Pretendard Variable body
 *   • Iridescent mark (same gradient stops) reserved for brand moments
 *   • Monochrome surfaces for working contexts (list, editor, sidebar)
 *   • Ambient aura only in "at-rest" panels (empty states, access gates)
 *
 * This file owns:
 *   • Design tokens used by every studio stylesheet
 *   • The header shell on /studio (list) and /studio/:id (editor)
 *   • Base wrapper layout — main vs editor
 * ===================================================================== */

:root {
    /* Surface scale (monochrome wash over page background) */
    --studio-surface: rgba(var(--global-text-color-rgb), 0.025);
    --studio-surface-hover: rgba(var(--global-text-color-rgb), 0.05);
    --studio-surface-active: rgba(var(--global-text-color-rgb), 0.08);

    /* Hairlines — never a full 1px at full opacity, always a whisper */
    --studio-hairline: rgba(var(--global-text-color-rgb), 0.08);
    --studio-hairline-strong: rgba(var(--global-text-color-rgb), 0.14);

    /* Geometry */
    --studio-radius: 14px;
    --studio-radius-sm: 10px;
    --studio-radius-pill: 999px;
    --studio-gap: 16px;
    --studio-gap-lg: 24px;
    --studio-pad: 20px;
    --studio-pad-lg: 32px;
    --studio-touch: 44px;

    /* Motion */
    --studio-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --studio-dur: 180ms;

    /* Iridescent accent — reserved for active/CTA, never for large fills.
       v5 luminous 4-stop, canonical brand order per variables.css. */
    --studio-accent-stops:
        #FF3889 0%,
        #FC9254 33%,
        #F375E7 67%,
        #69B1FF 100%;
    --studio-accent-gradient: var(--brand-iridescent-gradient);
    --studio-accent-glow: 0 12px 32px rgba(var(--brand-iris-rgb), 0.12);

    /* Typography families.
       DESIGN.md §3: Pretendard exclusively across the entire UI.
       Paperlogy is reserved for the wordmark alone (#header-logo /
       .studio-wordmark) — use `--studio-font-wordmark` there. The
       `--studio-font-display` token is now Pretendard so any heading
       referencing it inherits the brand-correct family. */
    --studio-font-wordmark: 'Paperlogy', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    --studio-font-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    --studio-font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Base shell ---------- */
body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    font-family: var(--studio-font-body);
}

#wrapper-contents {
    width: 100%;
    position: fixed;
    /* When the global announcement banner renders, `body.has-announcement`
       bumps --announcement-h to a non-zero value (common.css) so the
       studio content area shifts down to clear the strip. */
    top: calc(var(--header-height) + var(--announcement-h, 0px));
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background: var(--global-body-background);
    overflow: hidden;
}

/* =====================================================================
 * Header — quiet, brand-present, scale-aware
 * ===================================================================== */

#wrapper-header {
    border-bottom: 1px solid var(--studio-hairline);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    /* Override common.css's `contain: layout paint style`. The site
       chrome version of the header has no popovers escaping its box,
       but the studio header opens a user-menu dropdown below the bar.
       `contain: paint` would clip that popover to the header's height
       (~55px) and the menu would render invisible. We keep `layout`
       containment off too, since the dropdown is absolutely positioned
       relative to its trigger and should escape the header bounds. */
    contain: none;
    overflow: visible;
}

/* On the list page with many thumbnails, backdrop-filter causes compositor
   thrash (every card paint re-samples the whole header region). Drop to an
   opaque surface there. See the old comment — the reasoning still holds. */
body.page-main #wrapper-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--global-body-background);
}

/* Reduced transparency — solid header on every studio page. */
@media (prefers-reduced-transparency: reduce) {
    #wrapper-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--global-body-background);
    }
}

#header-contents {
    max-width: 100%;
    padding: 0 clamp(16px, 2.4vw, 32px);
    gap: var(--studio-gap);
}

/* ---------- Logo / brand lockup ---------- */
#header-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* The 3-column header grid (1fr | auto | 1fr) sets `justify-self:
       start` on this column. Keeping margin-left at 0 means the lockup
       is flush with `#header-contents`'s clamped left padding — i.e.
       the same x-coordinate that the editor's outline back button
       starts at, so list and editor read as a single design. */
    margin-left: 0;
    font-family: var(--studio-font-wordmark);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: -0.045em;
    color: var(--global-text-color);
    cursor: pointer;
    user-select: none;
    /* Lockup is an <a>; suppress the default underline. */
    text-decoration: none;
}

/* =====================================================================
 * Editor back button — outline pill, Design Identity §Buttons (.di-btn-outline)
 * Replaces the brand mark on the editor page. Visually flush-left with
 * the studio-list lockup so the two pages share one optical x-anchor.
 * ===================================================================== */
.header-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px 0 12px;
    /* Match #header-logo's left edge: zero margin so the grid's
       `justify-self: start` aligns the pill at the same x as the
       brand mark on /studio. */
    margin: 0;
    background: transparent;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.16);
    border-radius: var(--studio-radius-pill);
    color: var(--global-text-color);
    font-family: var(--studio-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    /* Header grid has `1fr auto 1fr`; without `width: max-content` the
       pill would stretch across the entire 1fr track. */
    justify-self: start;
    width: max-content;
    max-width: max-content;
    transition:
        background var(--studio-dur) var(--studio-ease),
        border-color var(--studio-dur) var(--studio-ease),
        color var(--studio-dur) var(--studio-ease),
        transform var(--studio-dur) var(--studio-ease);
}

.header-back-btn:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.32);
    background: rgba(var(--global-text-color-rgb), 0.04);
}

.header-back-btn:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.header-back-btn svg {
    color: var(--global-text-muted);
    flex-shrink: 0;
    transition: color var(--studio-dur) var(--studio-ease);
}

/* No directional slide on hover: the glyph is a dashboard grid (destination),
   not a back chevron, so a leftward nudge would re-read as "back". */
.header-back-btn:hover svg {
    color: var(--global-text-color);
}

/* The original `fill: var(--global-text-color)` flat logo is replaced by an
   iridescent mark when the brand mark class is present. Fall back cleanly if
   the SVG path is used without the iridescent wrapper. */
#header-logo svg {
    width: 24px;
    height: 24px;
    fill: var(--global-text-color);
    transition: transform var(--studio-dur) var(--studio-ease);
}
#header-logo:hover svg { transform: scale(1.04); }

/* Iridescent brand mark — same gradient as the hero on the main page,
   but tiny, continuous, and free of drop shadow so it reads as chrome. */
.studio-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.studio-mark svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    fill: none;
}
.studio-mark-base {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: studio-mark-spin 28s linear infinite, studio-mark-hue 14s linear infinite;
}
.studio-mark-sheen {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: rotate(20deg) translateX(-40%);
    mix-blend-mode: overlay;
    animation: studio-mark-sheen 9s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes studio-mark-spin { to { transform: rotate(360deg); } }
@keyframes studio-mark-hue {
    0%   { filter: hue-rotate(0deg)   saturate(1.05); }
    50%  { filter: hue-rotate(180deg) saturate(1.15); }
    100% { filter: hue-rotate(360deg) saturate(1.05); }
}
@keyframes studio-mark-sheen {
    0%   { transform: rotate(20deg) translateX(-60%); opacity: 0; }
    25%  { opacity: 0.9; }
    60%  { opacity: 0.9; }
    100% { transform: rotate(20deg) translateX( 60%); opacity: 0; }
}

/* Wordmark / context label next to the mark */
.studio-wordmark {
    font-family: var(--studio-font-wordmark);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -0.045em;
    color: var(--global-text-color);
    line-height: 1;
    white-space: nowrap;
}

/* A thin, pill-shaped meta tag (e.g. current user or workspace).
   Currently not used in either header (editor uses the outline
   back button alone, list uses the brand lockup). Kept in case
   any downstream view re-uses the class. */
.studio-context {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    margin-left: 4px;
    font-family: var(--studio-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--global-text-muted);
    border: 1px solid var(--studio-hairline);
    border-radius: var(--studio-radius-pill);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Carry the marketing header's BETA pill into the studio shell so the
   left lockup matches the homepage exactly. common.css owns the base
   `.header-logo-badge` rule; we only nudge spacing here. */
.header-logo-badge { margin-left: 4px; }

/* ---------- Header account cluster ---------- */
#header-account {
    margin-right: 0;
    gap: 8px;
}

/* The unified user-menu (.header-user-*) is defined in common.css so
   the marketing header on / and the studio header share one component.
   Studio inherits the base styles unchanged. */

/* =====================================================================
 * Editor header — project-scoped, back arrow replaces logo
 * (Consistent with the existing editor.ejs markup. We just retune the
 *  shell chrome so the editor's own in-header buttons keep working.)
 * ===================================================================== */

body.page-editor #wrapper-header {
    background: var(--global-body-background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* =====================================================================
 * Reduced motion
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .studio-mark-base,
    .studio-mark-sheen {
        animation: none;
    }
}

/* =====================================================================
 * Mobile — header shrinks, context label hides on narrow viewports
 * ===================================================================== */
@media (max-width: 640px) {
    #header-contents {
        padding: 0 14px;
        gap: 10px;
    }
    .studio-wordmark { font-size: 15px; }
    .studio-context { display: none; }
    .header-logo-badge { display: none; }
    #header-account { gap: 6px; }
    /* Avatar-only trigger on phones — caret + name collapse so the
       header never wraps under the logo. */
    .header-user-name,
    .header-user-caret { display: none; }
    .header-user-trigger { padding: 3px; }
    .header-user-dropdown { min-width: 180px; }
}

/* =====================================================================
 * Dark mode — lighten hairlines slightly, soften header border
 * ===================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --studio-surface: rgba(var(--global-text-color-rgb), 0.04);
        --studio-surface-hover: rgba(var(--global-background-color-rgb), 1);
        --studio-surface-active: rgba(var(--global-text-color-rgb), 0.11);
        --studio-hairline: rgba(var(--global-text-color-rgb), 0.1);
        --studio-hairline-strong: rgba(var(--global-text-color-rgb), 0.18);
    }
}