.publish-wizard {
    background: #111111;
    border: 1px solid rgba(255, 191, 0, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 191, 0, 0.1);
    color: #d4d4d4;
    font-family: 'Courier New', monospace;
    padding: 0;
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    border-radius: 0;
    overflow: hidden;
}

.publish-wizard::backdrop { background: rgba(0, 0, 0, 0.7); }

/* Cap the form to the dialog height and let only the middle pane scroll, so the
   header (steps) and footer (actions) stay pinned and never get clipped off a
   tall step. */
.publish-wizard form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }

.pw-header { padding: 20px 24px 0; }
.pw-title { color: #FFBF00; margin: 0 0 12px; font-size: 18px; letter-spacing: 0.08em; }

.pw-steps { display: flex; align-items: center; font-size: 11px; }
.pw-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid #2a2a2a;
    background: transparent;
    color: #8c8c8c;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pw-step:hover { color: #FFBF00; border-color: rgba(255, 191, 0, 0.6); }
.pw-step.done { color: #FFBF00; border-color: rgba(255, 191, 0, 0.45); }
.pw-step.active {
    color: #0a0a0a;
    background: #FFBF00;
    border-color: #FFBF00;
    font-weight: bold;
    cursor: default;
}
/* Per-step glyph drawn as a currentColor mask so it recolors with the step
   state (dim, amber when done/hover, dark on the filled active chip). */
.pw-step::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--pw-step-icon) center / contain no-repeat;
    mask: var(--pw-step-icon) center / contain no-repeat;
}
.pw-step[data-step="1"] { --pw-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h10M3 8h10M3 12h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pw-step[data-step="2"] { --pw-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='2' y='3' width='12' height='10'/%3E%3Cpath d='M2 11l3.5-3 2.5 2.2L11 7l3 3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='5.5' cy='6' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.pw-step[data-step="3"] { --pw-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pw-step-sep { flex: 0 0 14px; height: 1px; background: #2a2a2a; margin: 0 6px; transition: background 0.15s; }
.pw-step-sep.done { background: #FFBF00; }
/* .pw-step and .pw-field set an explicit display, which beats the UA
   [hidden]{display:none}. Without these the link path can't hide the Cover
   step or the genre/mood/length axes, and the steps collapse together. */
.pw-step[hidden], .pw-field[hidden] { display: none; }

.pw-pane { padding: 20px 24px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.pw-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.pw-ai-fill-row { display: flex; align-items: flex-start; margin: 0 0 18px; }
.pw-ai-fill-row[hidden] { display: none; }
.pw-status { color: #8c8c8c; font-size: 13px; margin: 0 0 18px; }

.pw-pending-changes {
    border: 1px solid #FFBF00;
    background: rgba(255, 191, 0, 0.06);
    padding: 16px 18px;
    margin: 0 0 18px;
}
.pw-pending-changes-msg { color: #d9d9d9; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.pw-pending-changes-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.pw-label { color: #8c8c8c; font-size: 12px; letter-spacing: 0.08em; }
.pw-field input, .pw-field select, .pw-field textarea {
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    color: #d4d4d4;
    font-family: inherit;
    padding: 6px 8px;
    border-radius: 0;
}
.pw-field textarea { line-height: 1.45; min-height: 76px; resize: vertical; }
.pw-counter { color: #8c8c8c; font-size: 11px; align-self: flex-end; }
.pw-counter-over { color: #ff5a5a; }
.pw-field textarea.pw-field-invalid { border-color: #ff5a5a; }

.pw-help { color: #8c8c8c; font-size: 13px; margin: 0 0 12px; }
.pw-field-help { font-size: 12px; margin: 0; }
.pw-label-hint { color: #6b6b6b; letter-spacing: 0; }

/* Tag-select: a bordered control wrapping selected chips and a flexible search
   input. Genre/mood allow up to 2 chips; length allows 1 (single-select). */
.pw-tagfield { position: relative; }
.pw-tagfield-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 6px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    cursor: text;
}
.pw-tagfield-control:focus-within { border-color: #FFBF00; }
.pw-tagfield.pw-invalid .pw-tagfield-control { border-color: #ff5a5a; }
.pw-tagfield-control .pw-tag-input {
    flex: 1;
    min-width: 120px;
    border: 0;
    background: transparent;
    padding: 2px;
    color: #d4d4d4;
    font-family: inherit;
}
/* Chip: a single subtle amber-tint fill (no border, to avoid a box-in-box look
   against the control's border). The remove × stays neutral until hovered. */
.pw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 9px;
    background: rgba(255, 191, 0, 0.12);
    color: #FFBF00;
    font-size: 12px;
}
.pw-chip-remove {
    border: 0;
    background: transparent;
    color: #8c8c8c;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.pw-chip-remove:hover { color: #ff5a5a; }

.pw-more-toggle {
    background: transparent;
    border: 0;
    color: #FFBF00;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 0;
    margin: 0 0 14px;
    cursor: pointer;
}
.pw-more-toggle:hover { text-decoration: underline; }
.pw-more-caret { display: inline-block; width: 12px; }
.pw-more { border-left: 1px solid #2a2a2a; padding-left: 14px; }
.pw-more[hidden] { display: none; }
.pw-picker-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 190px;
    overflow-y: auto;
    background: #0a0a0a;
    border: 1px solid #FFBF00;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.pw-picker-option {
    width: 100%;
    display: block;
    border: 0;
    border-bottom: 1px solid #1f1f1f;
    background: transparent;
    color: #d4d4d4;
    font: inherit;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
}
.pw-picker-option:hover,
.pw-picker-option.active {
    background: #1a1608;
    color: #FFBF00;
}
.pw-picker-empty {
    padding: 8px 10px;
    color: #8c8c8c;
}
.pw-field-error {
    color: #ff5a5a;
    font-size: 12px;
    margin: 0;
}
/* The cover step hosts the shared EntityImage tool (generate / upload /
   templates / edit / delete), which brings its own frame and square preview.
   The wrapper only adds spacing and caps the square so it doesn't dominate. */
.pw-cover-preview { margin-bottom: 12px; }
.pw-cover-preview .entity-image-section { margin: 0 auto; max-width: 280px; }
.pw-cover-empty { color: #8c8c8c; font-size: 12px; letter-spacing: 0.08em; }

/* Marketplace-only override block on the cover step. The opening-narration
   sub-block reuses the .share-opening-* classes (share-modal.css is loaded
   globally with the wizard); only the starting-location select needs styling. */
.pw-listing-extra { margin-top: 16px; padding-top: 16px; border-top: 1px solid #2a2a2a; }
.pw-listing-extra .pw-field { margin-top: 12px; }
.pw-select {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #2a2a28;
    color: #d4d4d4;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 0;
}
.pw-select:focus { border-color: #FFBF00; outline: none; }

.pw-link-review {
    border: 1px solid #2a2a2a;
    background: #0a0a0a;
    padding: 20px;
}
.pw-link-review-title {
    display: block;
    color: #FFBF00;
    font-size: 15px;
    letter-spacing: 0.04em;
}
.pw-link-review-row { margin-top: 16px; }
.pw-link-review-key {
    display: block;
    color: #8c8c8c;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pw-link-review-val {
    color: #d4d4d4;
    font-size: 13px;
    margin: 0;
    white-space: pre-wrap;
}

.pw-error { color: #ff5a5a; padding: 0 24px 12px; }
.pw-pane .pw-error { padding: 0; margin: 0 0 12px; }

.pw-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 24px 20px; border-top: 1px solid #2a2a2a;
}
.pw-btn { background: transparent; border: 1px solid #2a2a2a; color: #d4d4d4;
    font-family: inherit; padding: 6px 14px; cursor: pointer; border-radius: 0; }
.pw-btn-amber { color: #0a0a0a; background: #FFBF00; border-color: #FFBF00; }
.pw-btn-ghost { color: #8c8c8c; }
.pw-btn:hover { border-color: #FFBF00; }
.pw-btn:disabled { cursor: wait; opacity: 0.65; }

/* "Fill with AI" reads as a special assistive action: amber-tinted with a
   leading sparkle. The icon is a ::before mask so the JS textContent swap
   (FILL WITH AI / FILLING...) never wipes it. */
.pw-btn-ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #FFBF00;
    border-color: rgba(255, 191, 0, 0.4);
    background: rgba(255, 191, 0, 0.07);
    letter-spacing: 0.05em;
    transition: background 0.15s, border-color 0.15s;
}
.pw-btn-ai::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.7 6.3 16 8 9.7 9.7 8 16 6.3 9.7 0 8 6.3 6.3Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.7 6.3 16 8 9.7 9.7 8 16 6.3 9.7 0 8 6.3 6.3Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pw-btn-ai:hover { background: rgba(255, 191, 0, 0.15); border-color: #FFBF00; }