/*
|--------------------------------------------------------------------------
| Wayfarer Builder
|--------------------------------------------------------------------------
| Master/detail authored-object workspace.
| This stylesheet is intentionally presentation-only.
*/

:root {
    --wf-border: #d8dbe2;
    --wf-border-strong: #b8bdc7;
    --wf-surface: #ffffff;
    --wf-surface-soft: #f6f7f9;
    --wf-text: #20242a;
    --wf-muted: #667085;
    --wf-accent: #2f5ea8;
    --wf-accent-soft: #edf3fc;
    --wf-danger: #a61b2b;
    --wf-danger-soft: #fff4f5;
    --wf-radius: 8px;
    --wf-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


.wayfarer-builder-page {
    margin: 0;
    padding: 24px;
    background: #f3f4f6;
    color: var(--wf-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    line-height: 1.45;
}


.wayfarer-builder-page > h1,
.wayfarer-builder-page > p,
.wayfarer-builder-page > nav,
.wayfarer-builder-page > .builder-workspace,
.wayfarer-builder-page > .builder-back-link {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


.wayfarer-builder-page > h1 {
    margin-bottom: 2px;
}


.wayfarer-builder-page > h1 + p {
    margin-top: 0;
    color: var(--wf-muted);
}


.wayfarer-builder-page > nav {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}


.wayfarer-builder-page > nav a,
.wayfarer-builder-page > nav strong {
    display: inline-block;
    margin-right: 18px;
}


.wayfarer-builder-page > hr {
    display: none;
}


/* ------------------------------------------------------------------
   MASTER / DETAIL
------------------------------------------------------------------ */

.builder-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}


.builder-collection-pane,
.builder-editor-pane {
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}


.builder-collection-pane {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow: hidden;
}


.builder-collection-toolbar {
    padding: 14px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-surface-soft);
}


.builder-new-object {
    display: inline-block;
    padding: 8px 11px;
    border: 1px solid var(--wf-border-strong);
    border-radius: 6px;
    background: var(--wf-surface);
    text-decoration: none;
    font-weight: 600;
}


.builder-collection-scroll {
    overflow: auto;
    max-height: calc(100vh - 92px);
    padding: 14px;
}


.builder-collection-scroll > h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.15rem;
}


.builder-collection-scroll ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.builder-collection-scroll li + li {
    margin-top: 4px;
}


.builder-collection-scroll li a {
    display: block;
    padding: 8px 9px;
    border-radius: 5px;
    text-decoration: none;
}


.builder-collection-scroll li a:hover {
    background: var(--wf-accent-soft);
}


.builder-collection-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}


.builder-collection-scroll th,
.builder-collection-scroll td {
    padding: 7px 6px;
    border: 1px solid var(--wf-border);
    text-align: left;
    vertical-align: top;
}


.builder-collection-scroll th button {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}


.builder-editor-pane {
    min-width: 0;
    padding: 20px 24px 24px;
}


.builder-editor-pane > h2 {
    margin-top: 0;
    margin-bottom: 14px;
}


/* WAYFARER_OBJECT_CONTEXT_HEADING_V34 */
.builder-object-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

.builder-object-context {
    color: var(--wf-muted);
    font-weight: 600;
}

.builder-object-context[hidden] {
    display: none;
}

.builder-object-context-separator {
    margin-right: 8px;
    color: var(--wf-border-strong);
}


/* ------------------------------------------------------------------
   TABBED OBJECT EDITOR
------------------------------------------------------------------ */

.builder-object-form {
    margin: 0;
}


.builder-editor-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid var(--wf-border);
}


.builder-editor-tab {
    position: relative;
    bottom: -1px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}


.builder-editor-tab:hover {
    color: var(--wf-text);
    background: var(--wf-surface-soft);
}


.builder-editor-tab.is-active {
    color: var(--wf-accent);
    background: var(--wf-surface);
    border-color:
        var(--wf-border)
        var(--wf-border)
        var(--wf-surface);
    border-radius: 6px 6px 0 0;
}


.builder-tab-panel[hidden] {
    display: none !important;
}


.builder-tab-panel > p:first-child {
    margin-top: 0;
}


/* ------------------------------------------------------------------
   EXISTING FIELD CONTROLS
------------------------------------------------------------------ */

.builder-editor-pane label {
    font-weight: 600;
}


.builder-editor-pane small {
    color: var(--wf-muted);
    font-weight: 400;
}


.builder-editor-pane input[type="text"],
.builder-editor-pane input[type="number"],
.builder-editor-pane input[type="file"],
.builder-editor-pane select,
.builder-editor-pane textarea {
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    border: 1px solid var(--wf-border-strong);
    border-radius: 5px;
    background: var(--wf-surface);
    color: var(--wf-text);
    font: inherit;
}


.builder-editor-pane input[type="text"],
.builder-editor-pane textarea {
    width: min(100%, 720px);
}


.builder-editor-pane textarea {
    resize: vertical;
}


.builder-editor-pane fieldset {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--wf-border);
    border-radius: 7px;
}


.builder-editor-pane legend {
    padding: 0 6px;
}


.builder-editor-pane table {
    max-width: 100%;
    border-collapse: collapse;
}


.builder-editor-pane th,
.builder-editor-pane td {
    padding: 7px;
}


/* System settings stay visually inside Basics. */
.builder-editor-pane [data-system-trait-settings] {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--wf-border);
    border-radius: 7px;
    background: var(--wf-surface-soft);
}


.builder-editor-pane [data-system-trait-settings] h3 {
    margin-top: 0;
}


/* ------------------------------------------------------------------
   SAVE / DELETE
------------------------------------------------------------------ */

.builder-save-bar {
    display: flex;
    justify-content: flex-end;
    margin: 22px -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid var(--wf-border);
    background: var(--wf-surface-soft);
    border-radius: 0 0 var(--wf-radius) var(--wf-radius);
}


.builder-save-bar button {
    padding: 9px 16px;
    border: 1px solid #214b86;
    border-radius: 6px;
    background: var(--wf-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}


.builder-editor-pane [data-builder-delete-form] {
    margin-top: 28px;
    padding: 16px;
    border: 1px solid #e8b8be;
    border-radius: 7px;
    background: var(--wf-danger-soft);
}


.builder-editor-pane [data-builder-delete-form] h3 {
    margin-top: 0;
    color: var(--wf-danger);
}


.builder-editor-pane [data-builder-delete-form] button {
    padding: 8px 12px;
    border: 1px solid var(--wf-danger);
    border-radius: 5px;
    background: #fff;
    color: var(--wf-danger) !important;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}


.builder-back-link {
    margin-top: 18px;
}


/* ------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------ */

@media (max-width: 900px) {

    .wayfarer-builder-page {
        padding: 14px;
    }

    .builder-workspace {
        grid-template-columns: 1fr;
    }

    .builder-collection-pane {
        position: static;
        max-height: none;
    }

    .builder-collection-scroll {
        max-height: 300px;
    }

    .builder-editor-pane {
        padding: 18px;
    }

    .builder-save-bar {
        margin-left: -18px;
        margin-right: -18px;
        margin-bottom: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }

}


@media (max-width: 560px) {

    .builder-editor-tabs {
        overflow-x: auto;
    }

    .builder-editor-tab {
        white-space: nowrap;
    }

}


/*
|--------------------------------------------------------------------------
| REGION TICK EFFECTS v18
|--------------------------------------------------------------------------
*/

.builder-tick-effect-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(130px, 1fr)
        minmax(110px, 1fr)
        auto;
    gap: 12px;
    align-items: end;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--wf-border);
    border-radius: 7px;
    background: var(--wf-surface-soft);
}

.builder-tick-effect-row > p {
    margin: 0;
}

.builder-tick-effect-row select,
.builder-tick-effect-row input {
    width: 100%;
    box-sizing: border-box;
}

.builder-tick-effect-remove {
    align-self: end;
}

@media (max-width: 760px) {

    .builder-tick-effect-row {
        grid-template-columns: 1fr;
    }

}

/*
|--------------------------------------------------------------------------
| TICK EFFECT RESULT BRANCHES v28
|--------------------------------------------------------------------------
| WAYFARER_TICK_EFFECT_BRANCHES_V28
*/

.builder-tick-effect-row {
    display: block;
    margin: 0 0 16px;
    padding: 16px;
}

.builder-tick-effect-header {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 16px;
}

.builder-tick-effect-target select {
    display: block;
    width: 100%;
    margin-top: 6px;
}

.builder-tick-result-list {
    display: grid;
    gap: 12px;
}

.builder-tick-result-branch {
    padding: 14px;
    border: 1px solid var(--wf-border);
    border-radius: 7px;
    background: var(--wf-surface);
}

.builder-tick-result-branch.is-otherwise {
    background: var(--wf-surface-soft);
}

.builder-tick-result-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.builder-tick-result-order {
    display: flex;
    gap: 6px;
    align-items: center;
}

.builder-tick-result-condition {
    margin-bottom: 10px;
}

.builder-tick-result-then {
    margin: 10px 0 8px;
}

.builder-tick-result-fields {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(120px, 0.7fr)
        minmax(120px, 0.7fr)
        minmax(180px, 1fr);
    gap: 12px;
    align-items: end;
}

.builder-tick-result-fields select,
.builder-tick-result-fields input {
    display: block;
    width: 100%;
    margin-top: 6px;
}

.builder-tick-result-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.builder-condition-group {
    padding: 10px;
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    background: var(--wf-surface-soft);
}

.builder-condition-group-header,
.builder-condition-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.builder-condition-children {
    display: grid;
    gap: 8px;
    margin: 10px 0;
}

.builder-condition-row {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(180px, 1fr)
        minmax(120px, 1fr)
        auto;
    gap: 8px;
    align-items: end;
}

.builder-condition-row select,
.builder-condition-row input,
.builder-condition-group-header select {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 760px) {

    .builder-tick-effect-header,
    .builder-tick-result-fields,
    .builder-condition-row {
        grid-template-columns: 1fr;
    }

    .builder-tick-result-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------
   STARTING CHOICES
   WAYFARER_STARTING_CHOICES_V36
------------------------------------------------------------------ */

.builder-starting-choices-editor { margin-top: 24px; }

.builder-starting-choices-heading,
.builder-starting-choice-header,
.builder-starting-option-header,
.builder-starting-effects-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.builder-starting-choices-heading h3 { margin: 0 0 4px; }
.builder-starting-choices-heading p { margin: 0; }

.builder-starting-choice {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    background: var(--wf-surface-soft);
}

.builder-starting-choice-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 12px;
    margin-top: 14px;
}

.builder-starting-choice-fields label,
.builder-starting-option-fields label,
.builder-starting-effect label {
    display: grid;
    gap: 5px;
    font-weight: 600;
}

.builder-starting-choice-fields input,
.builder-starting-choice-fields select,
.builder-starting-option-fields input,
.builder-starting-option-fields textarea,
.builder-starting-effect input,
.builder-starting-effect select {
    width: 100%;
    font: inherit;
}

.builder-starting-options {
    display: grid;
    gap: 12px;
    margin: 16px 0 12px;
}

.builder-starting-option {
    padding: 14px;
    border: 1px solid var(--wf-border);
    border-radius: 7px;
    background: var(--wf-surface);
}

.builder-starting-option-fields {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr);
    gap: 12px;
    margin-top: 12px;
}

.builder-starting-effects {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--wf-border);
}

.builder-starting-effects-heading { margin-bottom: 8px; }
.builder-starting-effects-heading small { color: var(--wf-muted); }

.builder-starting-effect {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(110px, 0.65fr)
        minmax(110px, 0.65fr)
        minmax(110px, 0.65fr)
        minmax(180px, 1fr)
        auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 8px;
}

@media (max-width: 800px) {
    .builder-starting-choice-fields,
    .builder-starting-option-fields,
    .builder-starting-effect {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------------------------
   ONE-TIME EFFECTS
   WAYFARER_ONE_TIME_EFFECTS_EDITOR_V42
------------------------------------------------------------------ */

.builder-effects-panel > hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--wf-border, #d8dbe2);
}

.builder-effects-list {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.builder-effect-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(130px, 0.7fr)
        minmax(110px, 0.6fr)
        auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--wf-border, #d8dbe2);
    border-radius: 8px;
    background: #ffffff;
}

.builder-effect-row label {
    display: grid;
    gap: 5px;
}

.builder-effect-row select,
.builder-effect-row input {
    width: 100%;
}

.builder-effect-remove {
    align-self: end;
}

@media (max-width: 850px) {

    .builder-effect-row {
        grid-template-columns: 1fr;
    }

    .builder-effect-remove {
        justify-self: start;
    }
}


/* ------------------------------------------------------------------
   GENERALIZED EFFECTS
   WAYFARER_GENERALIZED_EFFECT_EDITOR_V43
------------------------------------------------------------------ */

/*
 * v42 displayed an Effect as one horizontal operation row. v43 Effects own
 * ordered result branches, so use the same card language as Tick Effects.
 */
.builder-effect-row {
    display: block;
    grid-template-columns: none;
    padding: 14px;
}

.builder-effect-row .builder-tick-effect-header {
    margin-bottom: 12px;
}

.builder-effect-value-fields {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.75fr)
        minmax(120px, 0.75fr)
        minmax(120px, 0.75fr);
    gap: 10px;
    align-items: end;
}

.builder-effect-random-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.builder-effect-random-range > label {
    display: grid;
    gap: 5px;
}

[data-effect-fixed-wrap][hidden],
[data-effect-random-wrap][hidden],
[data-effect-value-mode-wrap][hidden] {
    display: none !important;
}

/* WAYFARER_DATATYPE_TARGET_UI_V58 */
[data-condition-value-input][hidden],
[data-condition-value-select][hidden],
[data-starting-value-mode-wrap][hidden],
[data-starting-fixed-wrap][hidden],
[data-starting-random-wrap][hidden],
[data-starting-fixed-input][hidden],
[data-starting-fixed-choice][hidden],
[data-tick-value-mode-wrap][hidden],
[data-tick-branch-value-wrap][hidden],
[data-tick-random-wrap][hidden],
[data-tick-fixed-choice][hidden],
[data-effect-fixed-choice][hidden] {
    display: none !important;
}

@media (max-width: 850px) {

    .builder-effect-value-fields {
        grid-template-columns: 1fr;
    }

    .builder-effect-random-range {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------------------------
   STORYLET BRANCHES
   WAYFARER_STORYLET_BUILDER_V56
------------------------------------------------------------------ */

.builder-storylet-branches {
    max-width: 100%;
    overflow-x: auto;
}

.builder-storylet-branches table {
    width: 100%;
    border-collapse: collapse;
}

.builder-storylet-branches th,
.builder-storylet-branches td {
    padding: 9px 10px;
    border: 1px solid var(--wf-border);
    text-align: left;
    vertical-align: top;
}

.builder-storylet-branches th {
    background: var(--wf-surface-soft);
}

/* ------------------------------------------------------------------
   STATUS LIFECYCLE
   WAYFARER_STATUS_LIFECYCLE_UI_V88
------------------------------------------------------------------ */
.wayfarer-status-lifecycle-heading,
.wayfarer-status-stage-heading,
.wayfarer-status-outcomes-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wayfarer-status-lifecycle-heading h4,
.wayfarer-status-outcomes-heading strong {
    margin: 0;
}

.wayfarer-status-stage {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    background: var(--wf-surface-soft);
}

.wayfarer-status-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wayfarer-status-stage-fields,
.wayfarer-status-outcome-fields {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.wayfarer-status-stage-fields {
    grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(130px, 0.7fr));
}

.wayfarer-status-outcome-fields {
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(90px, 0.45fr)
        minmax(210px, 1fr)
        minmax(150px, 0.7fr)
        minmax(220px, 1fr);
}

.wayfarer-status-stage-fields label,
.wayfarer-status-outcome-fields label {
    display: grid;
    gap: 5px;
}

.wayfarer-status-stage-fields input,
.wayfarer-status-stage-fields select,
.wayfarer-status-outcome-fields input,
.wayfarer-status-outcome-fields select {
    width: 100%;
}

.wayfarer-status-outcomes-heading {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--wf-border);
}

.wayfarer-status-outcomes-heading small {
    display: block;
    margin-top: 2px;
}

.wayfarer-status-outcome {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--wf-border);
    border-radius: 7px;
    background: var(--wf-surface);
}

.wayfarer-status-outcome > button {
    margin-top: 10px;
}

.wayfarer-status-lifecycle-note {
    margin-top: 18px;
}

@media (max-width: 1050px) {
    .wayfarer-status-stage-fields,
    .wayfarer-status-outcome-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .wayfarer-status-lifecycle-heading,
    .wayfarer-status-stage-heading,
    .wayfarer-status-outcomes-heading {
        flex-direction: column;
    }

    .wayfarer-status-stage-fields,
    .wayfarer-status-outcome-fields {
        grid-template-columns: 1fr;
    }
}