/* ===========================================================================
   Site Creator (round 20c/21a/22b/23b/23d/26c) — one component in three modes (page |
   public | sidebar); the sidebar mode is the content of the left toggle 'site'
   (.sc-creator-host), a root of its own next to the one on the dashboard (r.53).
   Round 26c (r.67-80): a title or hint above one composer (x-sc.composer, styled by
   magic/composer.css); this file only adds what is specific to the Creator.
   =========================================================================== */

/* Steps: only the pane of the current step is visible. */
.sc-creator [data-sc-step-pane] {
    display: none;
}

.sc-creator[data-sc-step="compose"] [data-sc-step-pane="compose"],
.sc-creator[data-sc-step="auth"] [data-sc-step-pane="auth"] {
    display: block;
}

.sc-creator [hidden],
[data-sc-creator-sub] [hidden] {
    display: none !important;
}

/* ── Stage on the dashboard and the onboarding (r.70/71) ───────────────── */
/* The black stage runs full-bleed over the main area; the wrapper inside keeps the width. */
.sc-creator-stage {
    background: var(--sc-color-black);
    padding: 48px 0;
}

/* An organisation without sites: the Creator alone, centred in the viewport. */
.sc-creator-stage.is-empty {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-height: calc(100dvh - var(--sc-header-h, var(--sc-bar-h, 40px)));
}

.sc-creator-stage.is-empty > .siteclick-wrapper {
    width: 100%;
}

/* Dashboard stage (r.13): no page gutter between the bar and the stage. Same specificity as sc-pagehead.css:36 (0,6,1)
   with the [data-siteclick-header] attribute; it wins by the extra :has() classes. */
body.siteclick-container .siteclick-wrap[data-siteclick-header] .siteclick-content-in:has(> .siteclick-content-in-body > .sc-creator-stage) {
    padding-top: calc(var(--sc-top) + var(--sc-head-h) + var(--sc-subhead-h));
}

/* Onboarding (28b ORG-5): the stage is exactly the free area, so the Creator is centred without scroll;
   the foot link sits absolutely at the bottom and takes no part in the centring. Scoped like the gutter rule
   in sc-pagehead.css (0,5,1) so this override (0,6,1) wins: padding-top without the gutter (M1-28b). */
body.siteclick-container .siteclick-wrap .siteclick-content-in:has(> .siteclick-content-in-body > .sc-creator-stage.is-solo) {
    padding-top: calc(var(--sc-top) + var(--sc-head-h) + var(--sc-subhead-h));
    padding-bottom: 0;
}

.siteclick-content-in-body:has(> .sc-creator-stage.is-solo) {
    padding: 0;
}

.sc-creator-stage.is-solo {
    display: grid;
    place-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 64px 0;
    min-height: calc(100dvh - var(--sc-top) - var(--sc-head-h) - var(--sc-subhead-h) - var(--sc-bottom, 0px));
}

.sc-creator-stage.is-solo > .siteclick-wrapper {
    width: 100%;
}

.sc-creator-stage.is-solo .sc-creator-stage-foot {
    position: absolute;
    inset: auto 0 24px;
    margin: 0;
}

/* One muted text link under the composer (e.g. removing the organisation). */
.sc-creator-stage-foot {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--sc-color-text-subtle);
}

.sc-creator-stage-foot :is(a, button) {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.sc-creator-stage-foot :is(a, button):hover {
    color: var(--sc-color-text-strong);
}

/* 27a N1: in the light theme the stage and the foot follow the light tokens; the title already
   does. Dark keeps the black stage. The composer on the stage is glass (.sc-composer--stage, 28e). */
html[data-sc-theme="light"] .sc-creator-stage {
    background: var(--sc-color-bg-light);
}

/* Page and public: title and composer centred in one column (r.859). */
.sc-creator:not(.sc-creator--sidebar) .sc-creator-in {
    max-width: 40rem;
    margin: 0 auto;
}

/* ── Creator in the left toggle 'site' (round 23b, r.25/r.76) ───────────── */
/* The host (shared/sidebars/left/creator.blade.php) fills the left sidebar and
   scrolls; the hint fills the empty room and the composer stays at the bottom.
   The left sidebar itself is not selectable. */
.sc-creator-host {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem 1rem 0;
    background: var(--sc-color-panel-bg);
    -webkit-user-select: text;
    user-select: text;
}

.sc-creator-host-loader {
    margin: auto;
}

.sc-creator.sc-creator--sidebar {
    padding: 0;
}

.sc-creator.sc-creator--sidebar,
.sc-creator--sidebar .sc-creator-in {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* r.76-80: the empty pane above the composer is a start screen. */
.sc-creator-hint {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
    text-align: center;
}

.sc-creator:not([data-sc-step="compose"]) .sc-creator-hint {
    display: none;
}

.sc-creator-hint-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-color-text-strong);
}

.sc-creator-hint-text {
    margin: 8px 0 0;
    color: var(--sc-color-text-subtle);
}

.sc-creator--sidebar [data-sc-step-pane="compose"] {
    position: sticky;
    bottom: 0;
    padding-bottom: 1rem;
    background: var(--sc-color-panel-bg);
}

/* The side panels open next to it, between the docked left pane and the right
   rail (--sc-dock-l / --sc-dock-r from toggles.css), and slide in like every other
   sidebar. Both classes on purpose: visual-editor.css sizes the library (.sc-lib)
   with 0,3,0 + !important. */
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-left.sc-creator-sub-left {
    left: var(--sc-dock-l) !important;
    right: auto !important;
    width: calc(100vw - var(--sc-dock-l) - var(--sc-dock-r)) !important;
}

/* Parked it lies over the docked pane and rail: hidden and click-through, with
   visibility switching only after the slide-out (visual-editor.css shows the
   library filter, which would otherwise still catch clicks on the rail).
   Fix31 (A91): every parked Creator side panel (page mode too) is hidden, so its
   off-canvas fields leave the tab order. 0,4,0 + !important beats the transform
   transition of shared.css (.siteclick-sidebar-rest, 0,1,0 !important). */
.siteclick-container .siteclick-sidebar-rest[data-sc-creator-sub]:not(.active),
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-left.sc-creator-sub-left:not(.active) {
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--sc-motion-pane), visibility 0s linear var(--sc-motion-pane-d) !important;
}

/* Phones: the pane leaves no room beside it, so the sub covers the screen
   (above pane and rail) with its own Annuleren/Opslaan. */
@media screen and (max-width: 767px) {
    .siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-left.sc-creator-sub-left {
        left: 0 !important;
        width: 100vw !important;
        z-index: var(--sc-z-tip) !important;
    }
}


.sc-creator-site-remove {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 0;
    border-radius: 50%;
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-strong);
    cursor: pointer;
}

.sc-creator-library-note {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 12px;
    color: var(--sc-color-text-subtle);
}

/* ── Sites side panel ────────────────────────────────────────────────────── */
.sc-creator-sites-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sc-color-text-subtle);
}

.sc-creator-site-url {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The remove button is a sibling of the form component (r.77): the shared input rule keeps
   min-width 100% inside it, so the component takes the flex room instead. */
.sc-creator-site-url > .siteclick-form-component {
    flex: 1 1 auto;
    min-width: 0;
}

/* One card per site (round 28e, r.555–557): preview, url, Soort pills, then the block of the role. */
.sc-creator-sites {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.sc-creator-site {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
}

.sc-creator-site-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-muted);
    font-size: 13px;
}

.sc-creator-site-preview > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.sc-creator-site-preview .sc-creator-site-favicon,
.sc-creator-site-url > .sc-creator-site-favicon {
    flex: none;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.sc-creator-site-error {
    font-size: 12px;
}

.sc-creator-site-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sc-creator-site-row > .sc-creator-site-label {
    margin: 0 6px 0 0;
}

.sc-creator-site-label {
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--sc-color-text-subtle);
}

/* Pills: Soort (radio) and the likes (checkbox) share one style. */
.sc-creator-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.sc-creator-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sc-creator-pill span {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: var(--sc-radius-full);
    font-size: 12px;
    cursor: pointer;
}

.sc-creator-pill input:checked + span {
    border-color: var(--sc-color-text-strong);
    background: var(--sc-color-text-strong);
    color: var(--sc-color-bg);
}

.sc-creator-pill input:focus-visible + span {
    box-shadow: var(--sc-ring);
}

/* ── Organisation side panel (round 28e, r.552–553): a pick list of compact rows with x-sc.avatar ── */
.sc-row[data-sc-org-pick],
a.sc-row[data-sc-new-organization] {
    cursor: pointer;
}

.sc-row[data-sc-org-pick]:hover,
a.sc-row[data-sc-new-organization]:hover,
.sc-row[data-sc-org-pick].is-active {
    background: var(--sc-color-surface-alt);
}

.sc-row[data-sc-org-pick]:focus-visible {
    outline: 0;
    box-shadow: var(--sc-ring);
}

/* ── Invalid fields and the inline message ───────────────────────────────── */
.sc-creator .is-invalid,
[data-sc-creator-sub] .is-invalid {
    box-shadow: inset 0 0 0 1px var(--sc-color-danger);
    border-radius: 5px;
}

.sc-creator-notice {
    max-width: 600px;
    margin: 10px auto 0;
    text-align: center;
}

/* ── Locked state (auth) ─────────────────────────────────────────────────── */
.sc-creator-locked {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    text-align: center;
}

.sc-creator-locked-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.sc-creator-locked-text {
    color: var(--sc-color-text-subtle);
    margin-bottom: 16px;
}

.sc-creator-locked-actions {
    justify-content: center;
}

/* ── Start-point library on /start: no toggle rail, so no 40px rail inset ─── */
@media screen and (min-width: 1225px) {
    .siteclick-container .siteclick-sidebar-rest.sc-lib.sc-lib-norail {
        right: 0 !important;
        max-width: 100vw !important;
    }

    .siteclick-container .siteclick-sidebar-rest.sc-lib.sc-lib-norail:not(.active) {
        transform: translateX(100%);
    }
}

/* Run 32 (CRE-1, r.4): the stage title is plain centred text, no plate. */
.sc-creator-title {
    text-align: center;
}

/* ── Title shimmer (r.866; 28e r.541; 35 r.46): a white band over the dimmed title ink (no blue);
   size, position and animation stay those of .siteclick-thinking-text. ─────────────────── */
.sc-creator-title .siteclick-thinking-text {
    background-image: linear-gradient(
            90deg,
            var(--sc-shine-text) 0%,
            var(--sc-shine-text) 42%,
            var(--sc-shine-text-band) 50%,
            var(--sc-shine-text) 58%,
            var(--sc-shine-text) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    .sc-creator-title .siteclick-thinking-text {
        animation: none;
        background-position: 100% center;
    }
}