/* =====================================================================
 * Share controls — segmented status pills + rich access option rows
 * ---------------------------------------------------------------------
 * Single source of truth for the visual recipe used by:
 *   • Editor → Share dialog            (server/views/studio/editor.ejs)
 *   • Dashboard → Project Settings     (server/views/studio/main.modal.ejs)
 *
 * Both surfaces ship the same `share-status-*` / `share-option-*`
 * markup so the project-settings dialog opened from the dashboard
 * (page='main') reads as the same control surface as the share
 * dialog inside the editor.
 *
 * Why this file exists separately:
 *   `editor.css` is only loaded on the editor page. main.css /
 *   main.modal.css are loaded on the dashboard. To avoid two copies
 *   of these recipes drifting apart, the styles live here and are
 *   linked from `studio/index.ejs` for BOTH pages.
 * ===================================================================== */

.share-section { padding: 18px 24px; }
.share-section + .share-section {
    border-top: 1px solid var(--studio-hairline, rgba(var(--global-text-color-rgb), 0.08));
}

/* When share-sections are dropped into the dashboard's project-settings
   modal (`.modal-tab-content` already pads 20×24 with `gap: 18px`),
   our own 18×24 padding would double the horizontal gutter (48px in
   total) AND fight the parent gap rhythm. Inside that container we
   strip horizontal padding so the section sits flush against the
   modal gutter, and zero the vertical so the parent's gap drives
   spacing. The hairline divider is still owned by the adjacent-section
   selector below, but we re-target its padding so it sits cleanly. */
.modal-tab-content > .share-section {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.modal-tab-content > .share-section + .share-section {
    padding-top: 18px;
}

/* Section title → first content row spacing. 16px gives a clear
   "this header belongs to the block below" cue without bloating
   the dialog. */
.share-section-head { margin-bottom: 16px; }

.share-section-title {
    font-family: var(--studio-font-body, 'Pretendard Variable'), sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.55));
}

.share-section-hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.5));
    letter-spacing: -0.005em;
}

/* ---------- Status (segmented pills) ---------- */
.share-status-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.share-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    background: transparent;
    border: 1px solid var(--studio-hairline, rgba(var(--global-text-color-rgb), 0.08));
    border-radius: var(--studio-radius-pill, 999px);
    cursor: pointer;
    font-family: var(--studio-font-body, 'Pretendard Variable'), sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.65));
    transition: background 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
                border-color 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
                color 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.share-status-pill:hover {
    background: var(--studio-surface-hover, rgba(var(--global-text-color-rgb), 0.04));
    color: var(--global-text-color);
}

.share-status-pill.is-selected {
    background: var(--studio-surface-active, rgba(var(--global-text-color-rgb), 0.08));
    border-color: transparent;
    color: var(--global-text-color);
    font-weight: 600;
}

.share-status-pill:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-border-color),
                0 0 0 3px var(--focus-ring-color);
}

.share-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    flex-shrink: 0;
}

/* Status-specific dot accents — subtle color cue for recognition.
   These are intentionally a categorical taxonomy (not solo brand
   stops on hover/focus), which is allowed under DI's "ambient or
   categorical only" rule for brand-adjacent color. */
.share-status-dot[data-status="draft"]        { color: var(--global-text-muted); opacity: 0.6; }
.share-status-dot[data-status="in_progress"]  { color: var(--brand-iris); }
.share-status-dot[data-status="review"]       { color: var(--brand-brass); }
.share-status-dot[data-status="published"]    { color: var(--brand-lichen); }

.share-status-pill.is-selected .share-status-dot { opacity: 1; }

/* ---------- Editor / Play access (rich rows) ---------- */
.share-option-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-option-rich {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--studio-radius-sm, 10px);
    cursor: pointer;
    font-family: var(--studio-font-body, 'Pretendard Variable'), sans-serif;
    color: var(--global-text-color);
    text-align: left;
    transition: background 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
                border-color 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.share-option-rich:hover {
    background: var(--studio-surface-hover, rgba(var(--global-text-color-rgb), 0.04));
}

.share-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--studio-radius-sm, 10px);
    background: var(--studio-surface, rgba(var(--global-text-color-rgb), 0.025));
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.7));
    flex-shrink: 0;
    transition: background 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
                color 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.share-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.share-option-title {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--global-text-color);
    line-height: 1.3;
}

.share-option-sub {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--global-text-muted, rgba(var(--global-text-color-rgb), 0.55));
    line-height: 1.35;
}

.share-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    flex-shrink: 0;
    transition: background 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
                color 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.share-option-check svg {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
                opacity 180ms var(--studio-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.share-option-rich.is-selected {
    background: var(--studio-surface-active, rgba(var(--global-text-color-rgb), 0.08));
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--global-text-color-rgb), 0.32);
}

.share-option-rich.is-selected .share-option-icon {
    background: var(--state-active-bg);
    color: var(--global-text-color);
}

.share-option-rich.is-selected .share-option-check {
    background: var(--global-text-color);
    color: var(--global-card-background);
}

.share-option-rich.is-selected .share-option-check svg {
    transform: scale(1);
    opacity: 1;
}

.share-option-rich:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-border-color),
                0 0 0 3px var(--focus-ring-color);
}

/* =====================================================================
 * Dark mode
 * ===================================================================== */
@media (prefers-color-scheme: dark) {
    .share-option-rich.is-selected {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    }

    .share-option-rich.is-selected .share-option-icon {
        background: rgba(255, 255, 255, 0.10);
        color: var(--global-text-color);
    }

    .share-option-icon {
        background: rgba(255, 255, 255, 0.04);
    }

    .share-status-pill.is-selected {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* =====================================================================
 * Mobile compaction
 * ===================================================================== */
@media (max-width: 640px) {
    .share-section { padding: 16px 18px; }
    .modal-tab-content > .share-section {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 520px) {
    .share-status-pill { height: 30px; padding: 0 11px; font-size: 12px; }
}

/* Reduced motion — the check mark appears without the scale pop. */
@media (prefers-reduced-motion: reduce) {
    .share-option-check svg { transition: none; transform: none; }
}