/* css/poster.css
 *
 * The Poster tab in AI Extras, and the poster screen it opens.
 *
 * Everything is .pst-. The picture grids and cards borrow the sketch picker's
 * .ai-sk- classes from css/ai-images.css, which loads on the same pages, so a
 * poster tile and a sketch tile look like the same kind of thing.
 */

/* ======================================================= the tab on the card */

.pst-tab .ai-tab-actions {
    margin-bottom: 12px;
}

.pst-need {
    margin: 0;
    font-size: 15px;
    color: var(--text-soft);
}

/* On the card there is no dialog to scroll inside, so the grid is not capped. */
.pst-tab .ai-sk-grid {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(185px, 210px));
}

/* "Use Poster" and "Script poster" on one line, beside the pen and the bin. */
.pst-tab .ai-sk-use,
.pst-tab .ai-sk-using {
    white-space: nowrap;
}

.pst-edit {
    flex: none;
    background: transparent;
    border: 0;
    padding: 6px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.pst-edit:hover {
    color: var(--primary);
}

/* The draft or concept clicked on the tab, found for the writer in the poster
   screen. The ring fades out when the class comes off (focusCard() in
   js/poster.js). */
.pst-draft,
.pst-concept {
    transition: box-shadow .6s ease, border-color .6s ease;
}

.pst-draft.is-focus,
.pst-concept.is-focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary), 0 6px 20px rgba(0, 0, 0, .25);
}

/* A finished version's caption: Use Poster, the pencil and the bin, in a tile
   that can be as narrow as 150px. Tighter than the sketch card's caption, and
   the button gives way (ellipsis) before the icons are pushed off the edge.
   On the poster in use there is no button, so the icons sit at the right. */
.pst-card figcaption {
    gap: 2px;
    padding: 6px;
}

/* A DRAFT'S CAPTION KEEPS THE SPACING IT HAD.
 *
 * .pst-draft is not .pst-card, so it takes .ai-sk-card figcaption straight
 * from css/ai-images.css -- and that rule went to gap:0 when the sketch dialog
 * gained a download icon and needed its three controls closer together. The
 * poster drafts tab has a button and one bin, asked for none of that, and
 * looked wrong with the bin pressed against "Finish this one".
 *
 * 8px is what the shared rule used to say. Pinned here rather than left to
 * inherit, so the next change to the sketch caption cannot move this one
 * either. */
.pst-drafts figcaption {
    gap: 8px;
}

.pst-card .ai-sk-use {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 8px;
    font-size: 13px;
}

.pst-card figcaption > .pst-edit:first-child {
    margin-left: auto;
}

.pst-sub {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--overline);
}

/* Unfinished one sheets: one card each, with its newest pictures. */
.pst-open {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pst-wip {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-white, #fff);
}

.pst-wip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pst-wip-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.35;
}

.pst-wip-text b {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dark);
}

.pst-wip-text span {
    color: var(--text-soft);
}

/* Up to four across at a size worth looking at; fewer and smaller only when
   the tab is too narrow for four. */
.pst-wip-shots {
    display: grid;
    /* 1fr, not a fixed maximum: with a maximum, auto-fill counts columns at
       the widest size and leaves the rest of the card empty. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.pst-wip-shot {
    position: relative;
    display: block;
    /* Its own height, not the row's: a finished version beside it is taller
       for its buttons, and a stretched draft shows an empty strip. */
    align-self: start;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    background: var(--bg-light);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.pst-wip-shot:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-dim);
}

.pst-wip-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* "Artwork" on a finished picture still waiting for its title. */
.pst-wip-shot > span {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary);
    border-radius: 3px;
}

/* A finished version sits in the same row as the drafts, a little wider for
   its buttons, and says what it is. */
.pst-wip-shots .pst-card {
    align-self: start;
}

/* A concept nothing has been drawn from yet: its name, tagline, art style and
   the characters on it. The same 2:3 as a drawn tile, so a card of concepts is
   the height a card of drafts will be.

   Its spans are not the "Artwork" badge. .pst-wip-shot > span above styles
   every direct span as one, and it outranked the palette's own rule -- which
   is what left these tiles blank: the palette became a badge-sized sliver in
   the corner and the tile below it was empty. */
.pst-wip-concept {
    display: flex;
    flex-direction: column;
    aspect-ratio: 2 / 3;
    text-align: left;
    font-family: inherit;
    background: var(--bg-white, #fff);
}

.pst-wip-concept > span {
    position: static;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    background: none;
    border-radius: 0;
}

/* Scoped under .pst-wip-concept > so it outranks the reset just above, which
   would otherwise take its display and padding back off it. */
.pst-wip-concept > .pst-wip-concept-text {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 11px;
    overflow: hidden;
}

.pst-wip-concept-text b {
    font-size: 15px;
    line-height: 1.2;
    color: var(--text-dark);
}

/* The tagline, as it will be set on the poster. */
.pst-wip-concept-text q {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.3;
    color: var(--text-soft);
}

/* The pitch, above the characters, cut at five lines so a long one cannot
   push the faces out of the tile. */
.pst-wip-concept-text em {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    flex: none;
    font-style: normal;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-soft);
}

/* Concept tiles are words, not pictures, and want more width than a draft
   thumbnail: a name, a pitch and a row of faces in a 150px column wrapped
   every few words. Only on a card that has nothing drawn yet. */
.pst-wip-shots--concepts {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

/* Every concept on the script is in the one box, so it scrolls once there are
   more than fit -- the same height the sketches grid stops at
   (.ai-sk-grid in css/ai-images.css). */
.pst-wip--concepts .pst-wip-shots--concepts {
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Not held to 2:3 at this width -- that would make them taller than the words
   need. A floor keeps a sparse concept from looking like a strip. */
.pst-wip-shots--concepts .pst-wip-concept {
    aspect-ratio: auto;
    min-height: 240px;
}

.pst-wip-style {
    align-self: flex-start;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--btn-bg-light, #eef1f5);
    border-radius: 10px;
}

.pst-wip-style i {
    margin-right: 3px;
    color: var(--primary);
}

.pst-wip-cast {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.pst-wip-person {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pst-wip-person img,
.pst-wip-person i {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.pst-wip-person img {
    object-fit: cover;
    object-position: top;
}

.pst-wip-person i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-light, #f3f5f8);
}

.pst-done-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--success, #1ee0ac);
    border-radius: 3px;
}

.pst-wip-shots .ai-sk-use,
.pst-wip-shots .ai-sk-using {
    white-space: nowrap;
}

/* "+4 more": the way to everything else on the poster screen. */
.pst-wip-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 3;
    color: var(--primary);
}

.pst-wip-more b {
    font-size: 26px;
    line-height: 1;
}

/* Not the "Artwork" badge that other tiles' spans are. */
.pst-wip-shot.pst-wip-more > span {
    position: static;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    color: var(--primary);
    background: none;
}


/* ============================================================ the screen */

body.pst-locked {
    overflow: hidden;
}

/* Above the site's own modals (1000) and below SweetAlert (1060), whose busy
   and confirm dialogs open on top of this, and the poster lightbox (9000). */
.pst-studio {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(10, 10, 20, .72);
    padding: 24px;
}

.pst-studio.is-open {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.pst-shell {
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    max-height: 100%;
    background: var(--bg-white, #fff);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    font-family: var(--font-sans);
}

.pst-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}

.pst-head-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pst-head-title i {
    margin-right: 6px;
    color: var(--primary);
}

.pst-steps {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pst-steps li > span,
.pst-steps li > button {
    display: block;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    white-space: nowrap;
}

.pst-steps li > button {
    color: var(--text-dark);
    border-color: var(--border);
    cursor: pointer;
}

.pst-steps li > button:hover {
    border-color: var(--primary);
}

.pst-steps li.is-on > span {
    color: #fff;
    background: var(--primary);
}

.pst-close {
    flex: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
}

.pst-close:hover {
    color: var(--text-dark);
}

.pst-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 22px 26px;
}

/* Grids on the screen scroll with the screen, not inside themselves. */
.pst-body .ai-sk-grid {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.pst-wait {
    margin: 10px 0 0;
    font-size: 15px;
}

.pst-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pst-bar h3 {
    margin: 0 0 4px;
    font-size: 20px;
}

.pst-bar p {
    margin: 0;
    font-size: 15px;
    color: var(--text-soft);
    max-width: 640px;
}

.pst-bar-actions {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.pst-link {
    background: transparent;
    border: 0;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 14px;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
}

.pst-link:hover {
    text-decoration: underline;
}

.pst-empty {
    color: var(--text-soft);
    font-size: 15px;
}

.pst-notice {
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-soft);
}

.pst-notice i {
    margin-right: 5px;
}

/* The bench control, marked as one -- see .ai-sk-staff. */
.pst-staff {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--danger);
}

.pst-staff select {
    font-family: inherit;
    font-size: 13px;
    padding: 4px 6px;
    border: 1px dashed var(--danger-edge, var(--border));
    border-radius: 4px;
}

.pst-intro {
    max-width: 620px;
    margin: 30px auto;
    text-align: center;
}

.pst-intro h3 {
    font-size: 24px;
    margin: 0 0 12px;
}

/* Margins said outright: the popup's reset takes a paragraph's away, and the
   intro's two paragraphs ran together as one block. */
.pst-intro p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-soft);
}

/* Clear of the text above it, so the button reads as the next step rather
   than the end of the last paragraph. */
.pst-intro .btn,
.pst-intro .solid-btn {
    margin-top: 16px;
}

.pst-label {
    display: block;
    margin: 14px 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--overline);
}

.pst-select,
.pst-input {
    width: 100%;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--bg-white, #fff);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.pst-hint {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-soft);
}


/* ---- concepts ------------------------------------------------------------ */

.pst-concepts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.pst-concept {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-white, #fff);
}

.pst-concept h4 {
    margin: 0 0 6px;
    font-size: 19px;
}

.pst-pitch {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-dark);
}

.pst-swatches {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.pst-swatches span {
    width: 26px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.pst-who {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.pst-who li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.pst-who img,
.pst-who-ph {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-light);
}

.pst-who-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-muted);
}

.pst-concept-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.pst-concept-head h4 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.pst-edited {
    flex: none;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-dim);
    border-radius: 3px;
}

.pst-edit-btn {
    flex: none;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.pst-edit-btn:hover {
    color: var(--primary);
}

/* The writer's own thoughts, on the card they belong to. */
.pst-notes {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-dark);
}

/* The art direction, for Staff: marked the way the model picker is, so it is
   never mistaken for part of what members see. */
.pst-staff-block {
    margin-top: 14px;
    padding: 2px 10px 10px;
    border: 1px dashed var(--danger-edge, var(--border));
    border-radius: 6px;
}

.pst-staff-block .pst-label,
.pst-art summary i {
    color: var(--danger);
}

/* "Art direction (staff)": the prompt, folded away until asked for. */
.pst-art {
    margin: 10px 0 0;
    font-size: 14px;
}

.pst-art summary {
    cursor: pointer;
    color: var(--primary);
}

.pst-art p {
    margin: 6px 0 0;
    line-height: 1.45;
    color: var(--text-soft);
}

/* The card being edited takes the whole row: the description wants room. */
.pst-concept.is-editing {
    grid-column: 1 / -1;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-dim);
}

.pst-editor textarea.pst-input {
    resize: vertical;
    line-height: 1.45;
}

.pst-art-text {
    min-height: 150px;
}

.pst-cast {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pst-cast-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pst-cast-item img,
.pst-cast-item .pst-who-ph {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.pst-nosketch {
    font-weight: normal;
    font-size: 12px;
    color: var(--text-muted);
}

.pst-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pst-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.pst-chip input[type="color"] {
    width: 38px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pst-chip button,
.pst-chip-add {
    width: 26px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted);
    background: var(--bg-white, #fff);
    border: 0;
    cursor: pointer;
}

.pst-chip-add {
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: 4px;
}

.pst-chip button:hover,
.pst-chip-add:hover {
    color: var(--primary);
}

.pst-chip-add[hidden] {
    display: none;
}

.pst-revise {
    margin-top: 16px;
    padding: 4px 12px 12px;
    background: var(--bg-light);
    border-radius: 6px;
}

.pst-revise .btn {
    margin-top: 8px;
    font-family: inherit;
    cursor: pointer;
}

.pst-edit-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.pst-edit-foot .solid-btn {
    font-family: inherit;
    font-size: 15px;
    border: 0;
    cursor: pointer;
}

.pst-revert {
    margin-left: auto;
    color: var(--text-soft);
}

.pst-concept-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}


/* Which take a draft is -- "Close on the faces". On the picture, top right,
   clear of the "In use" flag's corner. */
.pst-take {
    position: absolute;
    top: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 7px;
    font-size: 12px;
    color: #fff;
    background: rgba(10, 10, 20, .7);
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---- finals ------------------------------------------------------------- */

.pst-final-cap {
    flex-wrap: wrap;
}

.pst-final-meta {
    flex: 1 1 100%;
    font-size: 13px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---- title & credit ------------------------------------------------------ */

.pst-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
}

.pst-stage-col {
    display: flex;
    justify-content: center;
}

/* The Konva stage is built at the artwork's own size -- 1696x2528 -- and shown
   here at whatever fits. The canvas keeps every pixel for the export; only its
   CSS box shrinks. Height-led, so the whole poster is on screen at once. */
.pst-stage {
    position: relative;
    height: min(76vh, 900px);
    max-width: 100%;
    background: #111;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

.pst-stage .konvajs-content,
.pst-stage canvas {
    width: 100% !important;
    height: 100% !important;
}

.pst-stage-wait {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(255, 255, 255, .6);
}

.pst-fixed {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.pst-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pst-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .15);
    cursor: pointer;
}

.pst-swatch:hover {
    border-color: var(--primary);
}

/* The colour in use. */
.pst-swatch.is-on {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-dim);
}

/* Legible elsewhere, perhaps, but not where this layout puts the title. Faded
   and still clickable: the writer may be about to change the layout. */
.pst-swatch.is-weak {
    opacity: .4;
}

.pst-colors-name {
    margin: 6px 0 4px;
    font-size: 13px;
    color: var(--text-soft);
}

.pst-colors-any {
    margin-top: 8px;
}

/* "Use the script's title" -- shown only once the field says something else. */
.pst-reset {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

.pst-reset[hidden] {
    display: none;
}

.pst-tagline-opts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.pst-tagline-opts .pst-check {
    margin: 0;
}

/* Small / Medium / Large, as one control. */
.pst-seg {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.pst-seg button {
    padding: 5px 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-soft);
    background: var(--bg-white, #fff);
    border: 0;
    border-left: 1px solid var(--border);
    cursor: pointer;
}

.pst-seg button:first-child {
    border-left: 0;
}

.pst-seg button.is-on {
    color: #fff;
    background: var(--primary);
}

.pst-color {
    width: 36px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.pst-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: normal;
}

.pst-save {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 22px 0 12px;
}

/* Full width in the column, the filled Save and the outlined others alike. */
.pst-save .btn,
.pst-save .solid-btn {
    justify-content: center;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    border: 0;
    cursor: pointer;
}

.pst-save .btn-outline {
    border: 1px solid var(--border);
}

.pst-save [hidden] {
    display: none;
}

.pst-concept-foot .solid-btn,
.pst-intro .solid-btn {
    font-family: inherit;
    font-size: 15px;
    border: 0;
    cursor: pointer;
}

.pst-status {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--text-soft);
}


/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 860px) {

    .pst-studio {
        padding: 0;
    }

    .pst-shell {
        border-radius: 0;
    }

    .pst-head {
        flex-wrap: wrap;
    }

    .pst-steps {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .pst-bar {
        flex-direction: column;
    }

    .pst-bar-actions {
        justify-content: flex-start;
    }

    .pst-title {
        grid-template-columns: 1fr;
    }

    .pst-stage {
        height: auto;
        width: 100%;
    }
}