/* Shared visual rules for the submission and admin story forms.
   Each page keeps its own shell and actions; the field system stays in sync here. */
.addStoryForm,
#story-edit-form {
    --story-form-unit: 6px;
    --story-form-gap: calc(3 * var(--story-form-unit));
    --story-form-section-gap: calc(4 * var(--story-form-unit));
    --story-form-field: #e5e5e5;
    --story-form-ink: #000;
}

:is(.addStoryFields, .admin-story-form-fields),
:is(.addStoryTopFields, .admin-story-top-fields),
:is(.addStoryLocationFields, .admin-location-fields),
:is(.addStoryExtraLocations, .admin-extra-locations) {
    display: flex;
    flex-direction: column;
}

:is(.addStoryFields, .admin-story-form-fields) { gap: var(--story-form-section-gap); }
:is(.addStoryTopFields, .admin-story-top-fields) { gap: var(--story-form-section-gap); }
:is(.addStoryLocationFields, .admin-location-fields) { gap: var(--story-form-section-gap); }
:is(.addStoryExtraLocations, .admin-extra-locations) { gap: var(--story-form-gap); }
:is(.addStoryExtraLocations, .admin-extra-locations):empty { display: none; }

.admin-story-form-fields { margin-top: 0; }
.addStoryHeaderActions,
.story-viewer.is-editing .admin-actions { gap: var(--story-form-gap); }
.story-viewer.is-editing .story-viewer-header {
    min-height: 72px;
    flex-basis: 72px;
    align-items: center;
    padding: 0 23px 0 29px;
    background: var(--admin-surface);
}
.story-viewer.is-editing .story-viewer-header h2 {
    margin: 0 45px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}
.story-viewer.is-editing .story-viewer-header .admin-close-button { top: 19px; right: 23px; }
.story-viewer.is-editing .story-viewer-body { padding: 24px 21px 30px 22px; }
.story-viewer.is-editing .edit-heading-row { display: none; }

:is(.addStoryPrimaryFields, .admin-story-primary-fields),
:is(.addStoryLocationSearchRow, .admin-location-lookup-row) {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    column-gap: var(--story-form-gap);
}
:is(.addStoryLocationSearchRow, .admin-location-lookup-row) {
    row-gap: var(--story-form-gap);
    align-items: center;
    min-height: 68px;
}
/* Two stacked submission icons make this row 16px taller than its field.
   Centering adds 8px above Localizing, so offset the row to keep its visible gap at 24px. */
.addStoryCoordinateRow + .addStoryLocationSearchRow { margin-top: -8px; }
/* Coordinates lead each location block; the Localizing and custom name stay together. */
:is(.addStoryPrimaryFields, .admin-story-primary-fields) + :is(.addStoryLocationFields, .admin-location-fields) { margin-top: 0; }
:is(.addStoryCoordinateRow, .admin-story-coordinate-fields) {
    display: grid;
    grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr) 68px;
    gap: var(--story-form-gap);
    align-items: center;
}

:is(.addStoryExtraLocation, .admin-extra-location) {
    gap: var(--story-form-section-gap);
    padding: var(--story-form-gap) 0 0;
    border-top: 1px solid rgb(0 0 0 / 35%);
}
:is(.addStoryExtraLocation, .admin-extra-location) :is(.addStoryCoordinateRow, .admin-story-coordinate-fields) {
    margin-top: 0;
}
:is(.addStoryExtraLocationHeader, .admin-extra-location-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
:is(.addStoryExtraLocationHeader, .admin-extra-location-header) :is(strong, button) {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
:is(.addStoryAddLocation, .admin-add-location) {
    align-self: flex-start;
    margin: 0 0 0 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
:is(.addStoryAddLocation, .admin-add-location)::before { content: "+ "; text-decoration: none; }

:is(.addStoryCustomPlace, .admin-custom-place) { grid-column: 1; grid-row: 2; margin: 0 0 0 20px; }
:is(.addStoryCustomPlace, .admin-custom-place) > summary {
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    list-style: none;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}
:is(.addStoryCustomPlace, .admin-custom-place) > summary::-webkit-details-marker { display: none; }
:is(.addStoryCustomPlace, .admin-custom-place) > summary::before { content: "+ "; text-decoration: none; }
:is(.addStoryCustomPlace, .admin-custom-place)[open] > summary::before { content: "− "; }
:is(.addStoryCustomPlaceContent, .admin-custom-place-content) { margin-top: var(--story-form-gap); }
:is(.addStoryLocationHint, .admin-location-hint) {
    margin: var(--story-form-gap) 0 0 20px;
    font-size: 13px;
    line-height: 18px;
}

:is(.addStoryInputDiv, .admin-story-field) {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid var(--story-form-ink);
    border-radius: 30px;
    background: var(--story-form-field);
}
:is(.addStoryInputDiv--multiline, .admin-story-field--multiline),
:is(.addStoryHashtags, .admin-story-field--tags) { height: auto; }
:is(.addStoryFieldLabel, .admin-story-field > span) {
    color: #666;
    font-style: italic;
}
:is(.addStoryInput, .addStoryTextarea, .admin-story-field input, .admin-story-field textarea) {
    color: var(--story-form-ink);
    font: inherit;
}
#story-edit-form .admin-story-field input {
    height: 100%;
    box-sizing: border-box;
}
#story-edit-form .admin-story-field input::placeholder,
#story-edit-form .admin-story-field textarea::placeholder { color: transparent; }

:is(.addStoryHashtags, .admin-story-field--tags) {
    align-items: flex-start;
    padding: 0 14px 0 20px;
    overflow: visible;
}
:is(.addStoryHashtags, .admin-story-field--tags) > :is(.addStoryFieldLabel, span) { left: 20px; }
:is(.addStoryHashtags, .admin-story-field--tags) > .tagify {
    --tags-border-color: transparent;
    --tags-hover-border-color: transparent;
    --tags-focus-border-color: transparent;
    --tag-bg: #bfbfbf;
    --tag-hover: #b3b3b3;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-left: 50px;
    border: 0 !important;
    background: transparent;
    font-family: inherit;
}
:is(.addStoryHashtags, .admin-story-field--tags) .tagify__input {
    margin: 0;
    padding: 16px 2px 10px;
    line-height: 20px;
}
:is(.addStoryHashtags, .admin-story-field--tags) .tagify__tag {
    margin-top: 10px;
    margin-bottom: 4px;
    border-radius: 999px !important;
}
:is(.addStoryHashtags, .admin-story-field--tags) .tagify__tag > div,
:is(.addStoryHashtags, .admin-story-field--tags) .tagify__tag > div::before { border-radius: 999px !important; }

:is(#addStory, #story-edit-form) .story-image-upload { margin: 0; }

@media (max-width: 860px) {
    :is(.addStoryPrimaryFields, .admin-story-primary-fields),
    :is(.addStoryLocationSearchRow, .admin-location-lookup-row) {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }
}
@media (max-width: 800px) {
    :is(.addStoryPrimaryFields, .admin-story-primary-fields) { grid-template-columns: 1fr; }
    :is(.addStoryLocationSearchRow, .admin-location-lookup-row) { grid-template-columns: minmax(0, 1fr) 34px; }
    :is(.addStoryCustomPlace, .admin-custom-place) { grid-column: 1 / -1; }
    .admin-location-lookup-message { grid-row: 3; }
    :is(.addStoryCoordinateRow, .admin-story-coordinate-fields) { grid-template-columns: 1fr; }
    .admin-story-coordinate-fields > * { grid-column: 1 / -1; }
}