/* =====================================================================
 * Stage submission section — shared by:
 *   - editor share dialog       (server/views/studio/editor.ejs)
 *   - main page sharing tab     (server/views/studio/main.modal.ejs)
 *
 * Both surfaces use identical [data-stage-*] markup and the shared
 * `window.SshowStage` controller, so styling lives in one place to
 * keep the design identity coherent.
 * ===================================================================== */
.share-section-stage.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.share-section-stage.is-disabled [data-stage-submit],
.share-section-stage.is-disabled [data-stage-withdraw] {
    pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Works surfacing toggle — "Show on profile". Sits between the play
 * access group and the Stage section in the sharing tab. Gated on public
 * play access (main.modal.js dims it + swaps in the gate hint otherwise).
 * ------------------------------------------------------------------- */
.share-section-works.is-disabled .share-works-toggle {
    opacity: 0.5;
    pointer-events: none;
}
.share-works-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.share-works-toggle input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.share-works-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.share-works-label {
    font-size: 12.5px;
    color: var(--global-text-color);
}
.share-works-hint {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.6));
}
.share-works-gate {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.6));
}

.share-stage-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-stage-hint {
    margin: 0 0 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.65));
}
.share-stage-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.share-stage-field-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.share-stage-field-check .share-stage-label {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--global-text-color);
}
.share-stage-label {
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.55));
    text-transform: uppercase;
}
.share-stage-select,
.share-stage-note {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--studio-hairline, rgba(var(--global-text-color-rgb), 0.1));
    background: var(--studio-surface-input, var(--global-card-background));
    color: var(--global-text-color);
    font-family: var(--studio-font-body, 'Pretendard Variable'), sans-serif;
    font-size: 13px;
    transition: border-color 180ms ease;
}
.share-stage-select:focus,
.share-stage-note:focus {
    outline: none;
    border-color: var(--global-primary-color);
}
/* Keyboard-only focus ring (mouse clicks keep just the border-color change
 * above). Matches the .share-stage-theme-chip pattern. */
.share-stage-select:focus-visible,
.share-stage-note:focus-visible {
    outline: 2px solid var(--focus-outline-color, var(--global-primary-color));
    outline-offset: 2px;
}
.share-stage-note {
    resize: vertical;
    min-height: 52px;
    line-height: 1.5;
}
.share-stage-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.share-stage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--studio-radius-pill, 999px);
    border: 1px solid transparent;
    font-family: var(--studio-font-body, 'Pretendard Variable'), sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}
/* `display: inline-flex` above wins over the UA `[hidden]` rule, so the
 * Submit/Withdraw toggle (stage-controller.js sets `.hidden`) would never
 * actually hide. Restore the expected behaviour — same fix as
 * `.share-stage-review[hidden]` below. */
.share-stage-btn[hidden] { display: none; }
.share-stage-btn-primary {
    background: var(--brand-iridescent-gradient,
        linear-gradient(135deg,
            rgb(var(--brand-violet-rgb,  124  92 255)) 0%,
            rgb(var(--brand-rose-rgb,    255  77 141)) 33%,
            rgb(var(--brand-cognac-rgb,  255 147  77)) 66%,
            rgb(var(--brand-teal-rgb,     45 212 191)) 100%));
    background-size: 220% 220%;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(243, 117, 231, 0.18);
    animation: brand-iridescent-shift 20s ease infinite;
}
.share-stage-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(243, 117, 231, 0.26);
}
.share-stage-btn-primary:disabled { opacity: 0.5; cursor: default; animation: none; }
@media (prefers-reduced-motion: reduce) {
    .share-stage-btn-primary { animation: none; }
}
.share-stage-btn-ghost {
    background: transparent;
    border-color: var(--studio-hairline, rgba(var(--global-text-color-rgb), 0.15));
    color: var(--global-text-muted);
}
.share-stage-btn-ghost:hover:not(:disabled) {
    color: var(--global-text-color);
    background: var(--studio-surface-hover, rgba(var(--global-text-color-rgb), 0.04));
}

.share-stage-status {
    margin: 2px 0 0;
    font-size: 12px;
    min-height: 16px;
    color: var(--global-text-muted);
}
.share-stage-status[data-tone="error"]   { color: var(--global-error-color, #E53935); }
.share-stage-status[data-tone="success"] { color: var(--global-success-color, #4CAF50); }

/* =====================================================================
 * Review feedback panel — surfaces moderator decisions inline so the
 * author sees pending/rejected/published state without opening another
 * surface. Injected by stage-controller.js when a status is loaded.
 *
 * Tone follows the DI rule: brand color = ambient. Pending uses a
 * violet-rose ambient bloom (queue energy without a solo brand stop);
 * rejected uses the danger token; published uses success. Everything
 * else flows from --global-* tokens so dark/light auto-flip.
 * ===================================================================== */
.share-stage-review {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--global-border-color);
    background: var(--global-card-background);
    position: relative;
    overflow: hidden;
}
.share-stage-review[hidden] { display: none; }
.share-stage-review[data-tone="pending"]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(var(--brand-violet-rgb), 0.10), transparent 60%),
        radial-gradient(120% 80% at 100% 100%, rgba(var(--brand-rose-rgb), 0.07), transparent 60%);
}
.share-stage-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}
.share-stage-review-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    flex-shrink: 0;
}
.share-stage-review-badge[data-tone="pending"] {
    background: rgba(var(--brand-violet-rgb), 0.12);
    color: var(--global-text-color);
}
.share-stage-review-badge[data-tone="rejected"] {
    background: var(--global-error-color, #E53935);
    color: #fff;
}
.share-stage-review-badge[data-tone="published"] {
    background: var(--global-success-color, #4CAF50);
    color: #fff;
}
.share-stage-review-body {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--global-text-muted);
    position: relative;
}
.share-stage-review-note {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--state-hover-bg);
    position: relative;
}
.share-stage-review-note-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--global-text-muted);
    margin-bottom: 4px;
}
.share-stage-review-note-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--global-text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

/* -------------------------------------------------------------------
 * Theme picker — chip row in the submit-to-Stage section
 * -------------------------------------------------------------------
 * Mirrors the Stage landing chip row (.stage-theme-chip) so the visual
 * language carries from browse → submit. Uses state tokens so the chip
 * shape stays consistent with the rest of the studio surfaces.
 * -------------------------------------------------------------------
 */
.share-stage-field-themes .share-stage-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-stage-themes-hint {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.5));
}
/* Live N/MAX counter — sits next to the hint, doubles as the ARIA
 * live region for screen readers when chips are toggled. Tints when
 * the selection hits the cap so sighted users see the limit too. */
.share-stage-themes-count {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.5));
    transition: color 0.18s ease;
}
.share-stage-themes-count.is-full {
    color: var(--global-text-color);
}
.share-stage-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.share-stage-themes:empty {
    display: none;
}
.share-stage-theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--studio-radius-pill, 999px);
    border: 1px solid var(--studio-hairline, rgba(var(--global-text-color-rgb), 0.1));
    background: var(--studio-surface-input, var(--global-card-background));
    color: var(--global-text-color);
    font-family: var(--studio-font-body, 'Pretendard Variable'), sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.share-stage-theme-chip:hover {
    background: var(--state-hover-bg);
}
.share-stage-theme-chip:focus-visible {
    outline: 2px solid var(--focus-outline-color, var(--global-primary-color));
    outline-offset: 2px;
}
.share-stage-theme-chip.is-active,
.share-stage-theme-chip[aria-pressed="true"] {
    background: var(--state-selected-bg, var(--global-primary-color));
    border-color: var(--state-selected-bg, var(--global-primary-color));
    color: var(--global-primary-text-color, #fff);
}
.share-stage-theme-chip-icon {
    font-size: 13px;
    line-height: 1;
}
/* `.share-stage-field` is `display:flex` (class specificity 0,1,0), which
 * overrides the UA `[hidden] { display:none }` rule. Without this
 * explicit override, toggling `themesFieldEl.hidden = true` in
 * stage-controller.js leaves the empty label visible. See
 * /memories/css-gotchas.md ("[hidden] overridden by display: flex/grid/block"). */
.share-stage-field[hidden] { display: none; }