/*
 * posts-compose.css
 * Styles for the Compose Post page. Builder-style layout: paste a URL,
 * pick a display style, see a customer-style preview, then fill the
 * details below and save. All class names are prefixed `pc-` so they
 * don't collide with other admin styles.
 */

/* ============================================================
   Builder-style layout (URL fetch -> styles -> preview + edit)
   ============================================================ */
.pc-builder-fetch {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.pc-builder-fetch__input {
    flex: 1;
    height: 36px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-base);
    font-family: inherit;
}
.pc-builder-fetch__input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.pc-display-styles {
    margin-bottom: var(--sp-4);
}
.pc-display-styles__label {
    text-transform: uppercase;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.pc-display-styles__options {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.pc-style-btn {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: var(--radius);
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-family: inherit;
    transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.pc-style-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.pc-style-btn.is-active {
    background: var(--c-text);
    color: var(--c-surface);
    border-color: var(--c-text);
}

.pc-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--sp-5);
    align-items: start;
    margin-bottom: var(--sp-5);
}
@media (max-width: 1100px) {
    .pc-builder-grid {
        grid-template-columns: 1fr;
    }
}

.pc-preview-area {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.pc-preview-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    min-height: 240px;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
}
.pc-preview-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pc-preview-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
}
.pc-preview-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--fs-xs);
}
.pc-preview-card__author {
    font-weight: 600;
    color: var(--c-text);
    font-size: var(--fs-sm);
}
.pc-preview-card__handle {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}
.pc-preview-card__body {
    padding: 0 var(--sp-4) var(--sp-3);
    color: var(--c-text);
    font-size: var(--fs-sm);
}
.pc-preview-card__body img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-2);
}
.pc-preview-card__title {
    font-weight: 600;
    color: var(--c-text);
    margin: var(--sp-1) 0;
}
.pc-preview-card__desc {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}
.pc-preview-card__domain {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
}
.pc-preview-card__footer {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}
.pc-preview-card__actions {
    margin-left: auto;
    display: flex;
    gap: var(--sp-3);
}
.pc-preview-card__actions span {
    cursor: default;
}

/* Personality side rail (right column) */
.pc-personality-rail {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 480px;
}
.pc-personality-rail__head {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.pc-personality-rail__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}
.pc-personality-rail__count {
    color: var(--c-text-muted);
    font-weight: 500;
    font-size: var(--fs-sm);
    margin-left: 4px;
}
.pc-personality-rail__tabs {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}
.pc-personality-rail__tab {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: var(--fs-xs);
    cursor: pointer;
    font-family: inherit;
}
.pc-personality-rail__tab.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}
.pc-personality-rail__search {
    width: 100%;
    height: 30px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: inherit;
}
.pc-personality-rail__list {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2);
}
.pc-personality-rail__empty {
    padding: var(--sp-4);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-style: italic;
}

/* Honest save-state note above the save row */
.pc-save-note {
    margin: var(--sp-3) 0 0;
    padding: 8px 12px;
    background: var(--c-warning-light);
    border: 1px solid var(--c-warning-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: var(--fs-xs);
    line-height: var(--lh);
}

/* Personality picker rows */
.pc-personality-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--c-text);
    transition: background var(--ease-fast), border-color var(--ease-fast);
}
.pc-personality-item:hover {
    background: var(--c-hover);
}
.pc-personality-item.is-active {
    background: var(--c-primary-light);
    border-color: var(--c-primary);
}
.pc-personality-item__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--fs-xs);
}
.pc-personality-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pc-personality-item__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc-personality-item__handle {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Edit fields below preview */
.pc-edit-fields {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.pc-edit-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.pc-edit-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--c-text);
}
.pc-edit-input,
.pc-edit-textarea {
    width: 100%;
    padding: 8px var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: inherit;
}
.pc-edit-textarea {
    resize: vertical;
    min-height: 64px;
    line-height: var(--lh);
}
.pc-edit-input:focus,
.pc-edit-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.pc-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
}
.pc-edit-grid__cell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.pc-edit-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}

/* Segmented control */
.pc-seg {
    display: inline-flex;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    width: fit-content;
}
.pc-seg__btn {
    background: var(--c-surface);
    border: none;
    border-right: 1px solid var(--c-border);
    color: var(--c-text-muted);
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-family: inherit;
}
.pc-seg__btn:last-child { border-right: none; }
.pc-seg__btn:hover:not(.is-active) {
    background: var(--c-hover);
    color: var(--c-text);
}
.pc-seg__btn.is-active {
    background: var(--c-text);
    color: var(--c-surface);
}

/* Star rating */
.pc-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.pc-star {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate-300);
    font-size: 18px;
    line-height: 1;
    padding: 2px;
    font-family: inherit;
}
.pc-star.is-filled {
    color: var(--amber-500);
}
.pc-star:hover {
    color: var(--amber-400);
}
.pc-stars__label {
    margin-left: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/*
 * Legacy pc-* shapes below remain for any in-flight references and for
 * compatibility with the older compose preview JS. New layouts should
 * use the builder-pattern classes above.
 */

/* ============================================================
   Page shell scoping
   ============================================================ */
.page-shell--posts-compose {
    /* Inherits .page-shell from placeholder.css */
}

/* ============================================================
   Two-column compose grid
   ============================================================ */
.pc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: var(--sp-6);
    align-items: start;
}

@media (max-width: 1100px) {
    .pc-grid {
        grid-template-columns: 1fr;
    }
}

.pc-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-4);
}

.pc-section-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
}

.pc-section-blurb {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

.pc-section-blurb code {
    font-family: var(--ff-mono);
    font-size: 0.875em;
    background: var(--c-hover);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.pc-help {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.pc-help summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    width: fit-content;
    cursor: pointer;
    color: var(--c-text-muted);
    font-weight: 600;
    list-style: none;
}

.pc-help summary::-webkit-details-marker {
    display: none;
}

.pc-help summary::after {
    content: "⌄";
    font-size: 0.85em;
    transition: transform 0.15s ease;
}

.pc-help[open] summary::after {
    transform: rotate(180deg);
}

.pc-help p,
.pc-help ul {
    margin: var(--sp-2) 0 0;
    line-height: var(--lh);
}

.pc-help code {
    font-family: var(--ff-mono);
    font-size: 0.875em;
    background: var(--c-hover);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

.pc-help--inline {
    display: inline-flex;
    flex-direction: column;
}

.pc-help--top {
    margin-bottom: var(--sp-2);
}

/* ============================================================
   Compose form rows
   ============================================================ */
.pc-compose {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

.pc-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    align-items: start;
}

@media (max-width: 720px) {
    .pc-row {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }
}

.pc-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    margin-top: var(--sp-2);
}

.pc-row-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}

.pc-row-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    flex-wrap: wrap;
}

.pc-row-meta-sep {
    color: var(--c-border);
}

/* ============================================================
   Inputs / textarea / select
   ============================================================ */
.pc-input,
.pc-textarea,
.pc-select {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    font-size: var(--fs-sm);
    color: var(--c-text);
    box-sizing: border-box;
    font-family: inherit;
    line-height: var(--lh);
}

.pc-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--ff-base);
}

.pc-input--personality {
    width: 100px;
    text-align: center;
}

.pc-input--url {
    font-family: var(--ff-mono);
    font-size: 0.875rem;
}

.pc-link-input {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
}

.pc-link-input .pc-input {
    flex: 1;
    min-width: 0;
}

.pc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--c-text);
    cursor: pointer;
}

.pc-hint {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    line-height: var(--lh);
}

.pc-hint--top {
    margin-bottom: var(--sp-2);
}

.pc-hint code {
    font-family: var(--ff-mono);
    background: var(--c-hover);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

/* ============================================================
   Author chooser toggle
   ============================================================ */
.pc-author-toggle {
    display: inline-flex;
    background: var(--c-hover);
    border-radius: var(--radius-sm);
    padding: 2px;
    border: 1px solid var(--c-border);
}

.pc-author-toggle__btn {
    border: none;
    background: transparent;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
}

.pc-author-toggle__btn--active {
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.pc-personality-slot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
}

.pc-personality-slot[hidden] {
    display: none;
}

/* ============================================================
   External link block
   ============================================================ */
.pc-link-status {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.pc-link-status__pill {
    font-size: var(--fs-xs);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-transform: lowercase;
}

.pc-link-status__pill--idle {
    background: var(--c-hover);
    color: var(--c-text-muted);
}

.pc-link-status__pill--ok {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.pc-link-status__pill--metadata-only {
    background: rgba(234, 179, 8, 0.12);
    color: #b45309;
}

.pc-link-status__pill--unreachable,
.pc-link-status__pill--blocked,
.pc-link-status__pill--oversized,
.pc-link-status__pill--unsupported-content-type {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.pc-link-preview {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-bg);
}

.pc-link-preview[hidden] {
    display: none;
}

.pc-link-preview__cover {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
    background: var(--c-hover);
}

.pc-link-preview__body {
    padding: var(--sp-3);
}

.pc-link-preview__domain {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-link-preview__title {
    font-size: var(--fs-base);
    font-weight: 600;
    margin: 4px 0;
    color: var(--c-text);
}

.pc-link-preview__desc {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh);
    margin: 0;
}

/* ============================================================
   Asset attachment list
   ============================================================ */
.pc-media-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}

.pc-media-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--sp-2);
}

.pc-media-empty {
    grid-column: 1 / -1;
    padding: var(--sp-4);
    text-align: center;
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    background: var(--c-hover);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
}

.pc-media-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--c-hover);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pc-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-media-item__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}

/* ============================================================
   Layout chooser tile strip
   ============================================================ */
.pc-layout-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.pc-layout-tile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pc-layout-tile:hover {
    border-color: var(--c-primary, #2563eb);
}

.pc-layout-tile[aria-checked="true"] {
    border-color: var(--c-primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.pc-layout-tile__sample {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    background: var(--c-hover);
    border: 1px solid var(--c-border);
    overflow: hidden;
    position: relative;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.04) 25%, transparent 25%);
    background-size: 8px 8px;
}

.pc-layout-tile__name {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--c-text-muted);
    text-align: center;
    word-break: break-all;
}

/* Per-layout sample rendering. These shapes mirror the
   `.fp-cg-*` / `.fp-link-*` / `.fp-text-*` engine in the legacy
   admin.css so the admin sees a visual representation of the layout
   they're picking. */

/* TEXT family */
.pc-layout-tile__sample--text-plain::after {
    content: "";
    position: absolute;
    inset: 25% 15%;
    background: var(--c-text-soft);
    opacity: 0.25;
    border-radius: 2px;
    box-shadow:
        0 8px 0 -1px var(--c-text-soft),
        0 -8px 0 -1px var(--c-text-soft);
}

.pc-layout-tile__sample--text-quote {
    background-image: none;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.08));
}

.pc-layout-tile__sample--text-quote::before {
    content: "“";
    position: absolute;
    top: 0;
    left: 6px;
    font-size: 32px;
    color: var(--c-text-soft);
    opacity: 0.35;
    line-height: 1;
}

.pc-layout-tile__sample--text-quote::after {
    content: "";
    position: absolute;
    inset: 35% 20% 25%;
    background: var(--c-text-soft);
    opacity: 0.2;
    border-radius: 2px;
    box-shadow: 0 8px 0 -1px var(--c-text-soft);
}

/* LINK family */
.pc-layout-tile__sample--link-large {
    background-image: none;
    background: var(--c-text-soft);
    opacity: 0.65;
}

.pc-layout-tile__sample--link-large::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
}

.pc-layout-tile__sample--link-medium {
    background-image: none;
}

.pc-layout-tile__sample--link-medium::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    background: var(--c-text-soft);
    opacity: 0.5;
    border-radius: 2px;
}

.pc-layout-tile__sample--link-medium::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 50px;
    right: 6px;
    height: 4px;
    background: var(--c-text-soft);
    opacity: 0.3;
    border-radius: 2px;
    box-shadow: 0 8px 0 var(--c-text-soft);
}

.pc-layout-tile__sample--link-small {
    background-image: none;
}

.pc-layout-tile__sample--link-small::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: var(--c-text-soft);
    opacity: 0.5;
    border-radius: 2px;
}

.pc-layout-tile__sample--link-small::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 38px;
    right: 8px;
    height: 3px;
    background: var(--c-text-soft);
    opacity: 0.3;
    border-radius: 2px;
}

.pc-layout-tile__sample--link-tile {
    background-image: none;
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary, #2563eb);
}

.pc-layout-tile__sample--link-tile::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 12px;
    right: 8px;
    height: 4px;
    background: var(--c-text-soft);
    opacity: 0.3;
    border-radius: 2px;
    box-shadow: 0 8px 0 var(--c-text-soft);
}

/* MEDIA family — preview tiles use grid-template patterns mirroring
   the legacy admin.css `.fp-cg-*` engine. */
.pc-layout-tile__sample--s1l,
.pc-layout-tile__sample--s1p,
.pc-layout-tile__sample--s1sq,
.pc-layout-tile__sample--s2h,
.pc-layout-tile__sample--s2v,
.pc-layout-tile__sample--s3v,
.pc-layout-tile__sample--s4grid,
.pc-layout-tile__sample--s5b,
.pc-layout-tile__sample--s6b {
    background-image: none;
    background: transparent;
    display: grid;
    gap: 2px;
    padding: 0;
    border: none;
}

.pc-layout-tile__sample--s1l > span,
.pc-layout-tile__sample--s1p > span,
.pc-layout-tile__sample--s1sq > span,
.pc-layout-tile__sample--s2h > span,
.pc-layout-tile__sample--s2v > span,
.pc-layout-tile__sample--s3v > span,
.pc-layout-tile__sample--s4grid > span,
.pc-layout-tile__sample--s5b > span,
.pc-layout-tile__sample--s6b > span {
    background: var(--c-text-soft);
    opacity: 0.55;
    border-radius: 1px;
}

/* These spans get rendered by the JS preview rebuilder; the empty
   default state simulates them with pseudo-elements. */
.pc-layout-tile__sample--s1l { grid-template: "a" 1fr / 1fr; }
.pc-layout-tile__sample--s1p { grid-template: "a" 1fr / 1fr; padding: 0 25%; }
.pc-layout-tile__sample--s1sq { grid-template: "a" 1fr / 1fr; padding: 0 12%; }
.pc-layout-tile__sample--s2h { grid-template: "a b" 1fr / 1fr 1fr; }
.pc-layout-tile__sample--s2v { grid-template: "a" 1fr "b" 1fr / 1fr; }
.pc-layout-tile__sample--s3v { grid-template: "a a" 1fr "b c" 1fr / 1fr 1fr; }
.pc-layout-tile__sample--s4grid { grid-template: "a b" 1fr "c d" 1fr / 1fr 1fr; }
.pc-layout-tile__sample--s5b { grid-template: "a a a a" 2fr "b c d e" 1fr / 1fr 1fr 1fr 1fr; }
.pc-layout-tile__sample--s6b { grid-template: "a b c" 2fr "d e f" 1fr / 1fr 1fr 1fr; }

.pc-layout-tile__sample--s1l::after,
.pc-layout-tile__sample--s1p::after,
.pc-layout-tile__sample--s1sq::after,
.pc-layout-tile__sample--s2h::after,
.pc-layout-tile__sample--s2v::after,
.pc-layout-tile__sample--s3v::after,
.pc-layout-tile__sample--s4grid::after,
.pc-layout-tile__sample--s5b::after,
.pc-layout-tile__sample--s6b::after {
    content: "";
    grid-area: 1 / 1 / -1 / -1;
    background: var(--c-text-soft);
    opacity: 0.55;
    border-radius: 1px;
}

/* ============================================================
   Layout fallback chain hint
   ============================================================ */
.pc-fallback-chain {
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-hover);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.pc-fallback-chain[hidden] {
    display: none;
}

.pc-fallback-chain code {
    font-family: var(--ff-mono);
    font-size: 0.875em;
}

/* ============================================================
   Window policy + privacy lock
   ============================================================ */
.pc-policy-lock {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-hover);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    color: var(--c-text);
}

.pc-policy-lock code {
    font-family: var(--ff-mono);
    background: var(--c-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   Action buttons row
   ============================================================ */
.pc-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-2);
}

/* ============================================================
   Right column: in-window preview + scope notes
   ============================================================ */
.pc-preview {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    position: sticky;
    top: var(--sp-4);
}

.pc-preview-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    min-height: 220px;
}

.pc-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
}

.pc-preview-notes {
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-3);
}

.pc-preview-notes__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    margin: 0 0 var(--sp-2);
    color: var(--c-text);
}

summary.pc-preview-notes__title {
    margin-bottom: 0;
}

.pc-preview-notes p {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

.pc-preview-notes ul {
    margin: 0 0 var(--sp-2);
    padding-left: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

.pc-preview-notes code {
    font-family: var(--ff-mono);
    background: var(--c-hover);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

/* ============================================================
   PRESENTATION LAYOUTS — the actual rendered post layouts.
   These are the FE render-time classes used by the in-window preview
   AND will be reused by the public-feed renderer when the lane-snapshot
   rebuilder ships the resolved layout_code in the snapshot DTO.
   Ports the legacy `fp-cg-*` / `fp-link-*` / `fp-text-*` engine.
   ============================================================ */

/* The post card itself */
.pc-card {
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.pc-card__author {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.pc-card__author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.pc-card__author > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pc-card__author-name {
    font-weight: 600;
}

.pc-card__author-kind {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.pc-card__footer {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--c-border);
    background: var(--c-hover);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.pc-card__action {
    cursor: default;
    user-select: none;
}

.pc-card__action::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: var(--ic) center/contain no-repeat;
            mask: var(--ic) center/contain no-repeat;
    opacity: 0.7;
}

.pc-card__action:nth-child(1) { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M2 9h4v12H2zm17.5-3a3 3 0 00-3-3L13 7v3H8.5L7 11.5V21h11l3.5-9V9.5A3.5 3.5 0 0019.5 6'/></svg>"); }
.pc-card__action:nth-child(2) { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/></svg>"); }
.pc-card__action:nth-child(3) { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.5 3.5 0 000-1.4l7.05-4.11A3 3 0 1015 5a3 3 0 00.04.5L8 9.59A3.5 3.5 0 005.5 8.5a3.5 3.5 0 100 7c.94 0 1.78-.37 2.41-.97l7.13 4.16a3 3 0 102.96-3.61'/></svg>"); }

.pc-cg-cell__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: var(--sp-2);
    text-align: center;
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--c-text-soft);
    word-break: break-all;
}

.pc-card__body {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    font-size: var(--fs-base);
    line-height: var(--lh);
    color: var(--c-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* TEXT — quote variant */
.pc-layout-text-quote .pc-card__body {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    padding: var(--sp-6) var(--sp-5);
    color: var(--c-text);
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(168, 85, 247, 0.06));
}

.pc-layout-text-quote .pc-card__body::before {
    content: "“";
    display: block;
    font-size: 4rem;
    line-height: 0.6;
    color: var(--c-text-soft);
    opacity: 0.5;
    margin-bottom: var(--sp-2);
}

/* MEDIA collage engine — grid templates mirror legacy fp-cg-* */
.pc-collage {
    position: relative;
    display: grid;
    gap: 2px;
    overflow: hidden;
}

.pc-cg-cell {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    background: var(--c-hover);
}

.pc-cg-cell > img,
.pc-cg-cell > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.pc-layout-media-s1l { grid-template: "a" auto / 1fr; max-height: 500px; }
.pc-layout-media-s1l .pc-cg-cell > img { aspect-ratio: 16 / 10; }

.pc-layout-media-s1p { grid-template: "a" auto / 1fr; max-width: 65%; margin: 0 auto; max-height: 600px; }
.pc-layout-media-s1p .pc-cg-cell > img { aspect-ratio: 3 / 4; }

.pc-layout-media-s1sq { grid-template: "a" auto / 1fr; max-width: 80%; margin: 0 auto; max-height: 500px; }
.pc-layout-media-s1sq .pc-cg-cell > img { aspect-ratio: 1 / 1; }

.pc-layout-media-s2h { grid-template: "a b" 280px / 1fr 1fr; }
.pc-layout-media-s2v { grid-template: "a" 1fr "b" 1fr / 1fr; max-height: 560px; }
.pc-layout-media-s2v .pc-cg-cell > img { aspect-ratio: 4 / 5; }

.pc-layout-media-s3v { grid-template: "a a" 3fr "b c" 2fr / 1fr 1fr; max-height: 460px; }
.pc-layout-media-s4grid { grid-template: "a b" 1fr "c d" 1fr / 1fr 1fr; max-height: 420px; }
.pc-layout-media-s5b { grid-template: "a a a a" 2fr "b c d e" 1fr / 1fr 1fr 1fr 1fr; max-height: 440px; }
.pc-layout-media-s6b { grid-template: "a b c" 2fr "d e f" 1fr / 1fr 1fr 1fr; max-height: 440px; }

/* "+N more" overlay (mirrors legacy `.fp-cg-more`) */
.pc-cg-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    pointer-events: none;
}

/* Video play overlay (mirrors legacy `.fp-cg-play`) */
.pc-cg-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Hard-gate placeholder cell (per Phase 22a decision 275). The
   lane-snapshot rebuilder fills missing slots with these instead of
   regenerating the layout. */
.pc-cg-cell--placeholder {
    background:
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.04) 0,
            rgba(0, 0, 0, 0.04) 6px,
            rgba(0, 0, 0, 0.08) 6px,
            rgba(0, 0, 0, 0.08) 12px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-cg-cell--placeholder::after {
    content: attr(data-placeholder-reason);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-align: center;
    padding: var(--sp-2);
}

/* LINK card layouts (mirror legacy `.fp-link-preview`) */
.pc-layout-link-large-cover .pc-card__cover,
.pc-layout-link-medium-cover .pc-card__cover,
.pc-layout-link-small-cover .pc-card__cover {
    display: block;
    width: 100%;
    object-fit: cover;
    background: var(--c-hover);
}

.pc-layout-link-large-cover .pc-card__cover { aspect-ratio: 2 / 1; }
.pc-layout-link-medium-cover .pc-card__cover { aspect-ratio: 16 / 9; max-height: 220px; }
.pc-layout-link-small-cover .pc-card__cover { aspect-ratio: 4 / 3; max-height: 160px; }

.pc-layout-link-small-tile .pc-card__cover { display: none; }

.pc-layout-link-small-tile .pc-card__link-meta {
    border-left: 4px solid var(--c-primary, #2563eb);
    padding-left: var(--sp-3);
}

.pc-card__link-meta {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pc-card__link-domain {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-card__link-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

.pc-card__link-desc {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh);
    margin: 0;
}

/* ============================================================
   Responsive narrow-screen layout flips (mirror legacy admin.css
   line 3000+ media queries for `.fp-cg-*`).
   ============================================================ */
@media (max-width: 480px) {
    .pc-layout-media-s1p { max-width: 80%; }
    .pc-layout-media-s2h { grid-template: "a b" 200px / 1fr 1fr; }
    .pc-layout-media-s2v { max-height: 440px; }
    .pc-layout-media-s3v { grid-template: "a a" 2fr "b c" 1fr / 1fr 1fr; max-height: 360px; }
    .pc-layout-media-s4grid { max-height: 360px; }
    .pc-layout-media-s5b { grid-template: "a a" 2fr "b c" 1fr "d e" 1fr / 1fr 1fr; max-height: 400px; }
    .pc-layout-media-s6b { grid-template: "a a" 2fr "b c" 1fr "d e" 1fr "f f" 1fr / 1fr 1fr; max-height: 420px; }
    .pc-cg-more { font-size: 1.25rem; }
}

/* ============================================================
   Asset picker modal (rendered by posts-compose.js)
   ============================================================ */
.pc-asset-modal {
    border: none;
    padding: 0;
    border-radius: var(--radius-lg);
    max-width: 880px;
    width: 92vw;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    background: var(--c-surface);
    color: var(--c-text);
}

.pc-asset-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.pc-asset-modal__form {
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}

.pc-asset-modal__head {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pc-asset-modal__head h3 {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 600;
}

.pc-asset-modal__head small {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

.pc-asset-modal__filters {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    background: var(--c-bg);
}

.pc-asset-modal__filters input,
.pc-asset-modal__filters select {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    font-size: var(--fs-sm);
    color: var(--c-text);
    box-sizing: border-box;
    font-family: inherit;
}

.pc-asset-modal__filters input[type="search"] {
    flex: 1;
    min-width: 220px;
}

.pc-asset-modal__results {
    padding: var(--sp-4) var(--sp-5);
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}

.pc-asset-modal__msg {
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    padding: var(--sp-6) 0;
    margin: 0;
}

.pc-asset-modal__msg--err {
    color: #b91c1c;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    word-break: break-all;
}

.pc-asset-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-2);
}

.pc-asset-modal__cell {
    aspect-ratio: 1 / 1;
    background: var(--c-hover);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pc-asset-modal__cell:hover {
    border-color: var(--c-primary, #2563eb);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.pc-asset-modal__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-asset-modal__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: var(--sp-2);
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--c-text-muted);
    text-align: center;
    word-break: break-all;
}

.pc-asset-modal__actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--c-border);
    margin: 0;
    gap: var(--sp-2);
    background: var(--c-bg);
}

.pc-media-item__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: var(--sp-2);
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--c-text-muted);
    text-align: center;
    word-break: break-all;
}

/* ============================================================
   Preview meta pills (auto-suggested vs manual layout, etc.)
   ============================================================ */
.pc-preview-meta {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.pc-preview-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--c-hover);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.pc-preview-pill--auto {
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.3);
}

.pc-preview-pill--manual {
    background: rgba(34, 197, 94, 0.08);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.3);
}

.pc-preview-pill code {
    font-family: var(--ff-mono);
    font-size: 0.85em;
    background: var(--c-bg);
    padding: 0 4px;
    border-radius: 2px;
}

/* Clear-layout button */
.pc-layout-clear {
    margin-top: var(--sp-2);
    align-self: flex-start;
}

/* ============================================================
   Create Post unified composer (refined minimal layout)
   ============================================================ */
.page-shell.page-shell--posts-compose {
    max-width: none;
    width: 100%;
}

.pc-create-post .page-shell-body {
    width: 100%;
    max-width: none;
    margin: 0;
}

.pc-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: stretch;
    width: 100%;
    max-width: 767px;
    margin: 0 auto;
}

.pc-modal__panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.pc-compose-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 22px;
    padding: var(--sp-4) var(--sp-5);
    box-shadow: none;
    display: grid;
    gap: var(--sp-3);
}

.pc-compose-card[hidden] {
    display: none;
}

/* Author placeholder — looks like a slot you must fill */
.pc-author-chip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    border: 1px dashed var(--c-border);
    background: transparent;
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    color: var(--c-text);
    transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}

.pc-author-chip:hover,
.pc-author-chip:focus-visible {
    border-color: var(--c-primary);
    background: rgba(53, 95, 150, 0.04);
    outline: none;
}

.pc-author-chip.is-placeholder {
    color: var(--c-text-muted);
}

.pc-author-chip.is-placeholder .pc-author-chip__avatar {
    background: transparent;
    color: var(--c-text-muted);
    border: 1px dashed var(--c-border);
}

.pc-author-chip:not(.is-placeholder) {
    border-style: solid;
    border-color: transparent;
    padding: 4px 0;
}

.pc-author-chip__avatar,
.pc-preview-avatar-fallback,
.pc-personality-item__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--c-primary);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
}

.pc-author-chip__avatar img,
.pc-personality-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-author-chip__body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.pc-author-chip__label {
    display: none;
}

.pc-author-chip__name {
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.pc-author-chip.is-placeholder .pc-author-chip__name {
    font-weight: 600;
    color: var(--c-text-muted);
}

.pc-author-chip__handle {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.pc-author-chip__chevron {
    margin-left: auto;
    color: var(--c-text-muted);
    display: inline-flex;
}

/* Body — smaller, calm, no inner scrollbar */
.pc-compose-body {
    width: 100%;
    min-height: 90px;
    resize: none;
    overflow: hidden;
    border: 0;
    padding: 4px 0 var(--sp-2);
    background: transparent;
    color: var(--c-text);
    font-family: inherit;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.35;
}

.pc-compose-body:focus {
    outline: none;
}

.pc-compose-body::placeholder {
    color: #9ca3af;
}

.pc-compose-card--quote .pc-compose-body,
.pc-compose-body--quote {
    padding-left: var(--sp-4);
    border-left: 4px solid var(--c-primary);
    font-family: Georgia, "Times New Roman", "DM Serif Display", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.45;
    color: var(--c-text);
}

.pc-compose-card--quote .pc-compose-body::placeholder,
.pc-compose-body--quote::placeholder {
    font-style: italic;
    color: var(--slate-400, #94a3b8);
}

.pc-live-preview {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
}

.pc-live-preview .fp-article,
.pc-live-preview .fp-article--domain-chip,
.pc-live-preview .pc-mediagrid,
.pc-live-preview .pc-poll-preview {
    margin: 0;
}

.pc-empty-state {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    padding: var(--sp-4);
}

.pc-quote-body blockquote {
    margin: 0;
    padding-left: var(--sp-4);
    border-left: 4px solid var(--c-primary);
    font-size: 1.12em;
    font-weight: 600;
}

/* Footer toolbar — bare icon buttons + a single Post pill */
.pc-compose-footer {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}

.pc-compose-toolbar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.pc-tool-btn {
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--slate-500, #64748b);
    cursor: pointer;
    transition: background var(--ease-fast), color var(--ease-fast), transform var(--ease-fast);
}

.pc-tool-btn svg {
    width: 22px;
    height: 22px;
}

.pc-tool-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--c-text);
    transform: translateY(-1px);
}

.pc-tool-btn:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.pc-tool-btn.is-active {
    background: rgba(53, 95, 150, 0.12);
    color: var(--c-primary);
}

.pc-tool-btn--media:hover { color: #16a34a; }
.pc-tool-btn--link:hover { color: #2563eb; }
.pc-tool-btn--quote:hover { color: #7c3aed; }
.pc-tool-btn--poll:hover { color: #dc2626; }

.pc-compose-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.pc-save-draft {
    appearance: none;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font-weight: 600;
    font-size: var(--fs-sm);
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}

.pc-save-draft:hover:not(:disabled) {
    background: rgba(15, 23, 42, 0.05);
    color: var(--c-text);
    border-color: var(--c-text-soft);
}

.pc-save-draft:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pc-post-button {
    min-width: 96px;
    height: 40px;
    border-radius: 12px;
    font-weight: 700;
}

.pc-post-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Inline status line under the composer */
.pc-save-status {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-align: center;
}

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

.pc-save-status.is-error {
    color: var(--c-error, #b91c1c);
}

/* Posted-confirmation panel — replaces the composer after a successful save */
.pc-posted-confirm {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 22px;
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

.pc-posted-confirm[hidden] {
    display: none;
}

.pc-posted-confirm__icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pc-posted-confirm__title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
}

.pc-posted-confirm__detail {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-base);
}

.pc-posted-confirm__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* ----- After-card panels (link / format / publish below the post) ----- */
.pc-after-card {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.pc-after-card[hidden] {
    display: none;
}

.pc-after-card__panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: grid;
    gap: var(--sp-2);
}

.pc-after-card__panel[hidden] {
    display: none;
}

.pc-after-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.pc-after-card__head h2 {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--c-text);
}

.pc-after-card__body {
    display: grid;
    gap: var(--sp-3);
}

.pc-after-card__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

@media (max-width: 720px) {
    .pc-after-card__row {
        grid-template-columns: 1fr;
    }
}

.pc-poll-builder[hidden],
.pc-grid-picker[hidden],
.pc-live-preview[hidden] {
    display: none !important;
}

.pc-panel-section__head,
.pc-poll-builder__head,
.pc-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.pc-panel-section__head h2,
.pc-modal__head h2 {
    margin: 0;
    font-size: var(--fs-md);
}

.pc-inline-fetch,
.pc-media-search {
    display: flex;
    gap: var(--sp-2);
}

.pc-inline-fetch .pc-edit-input,
.pc-media-search .pc-edit-input:first-child {
    flex: 1;
    min-width: 0;
}

.pc-media-search #pc-media-kind {
    flex: 0 0 126px;
    min-width: 126px;
}

.pc-media-search #pc-media-search-btn {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 40px;
    padding: 0 18px;
    font-size: var(--fs-sm);
}

.pc-edit-grid--compact {
    grid-template-columns: 1fr;
}

.pc-inline-link {
    border: 0;
    background: transparent;
    color: var(--c-primary);
    padding: 0;
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.pc-inline-link:hover {
    text-decoration: underline;
}

.pc-save-note.is-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* ----- FB-style multi-image grid ----- */
.pc-mediagrid {
    display: grid;
    gap: 3px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--c-border);
}

.pc-mediagrid__cell {
    position: relative;
    background: var(--c-bg);
    overflow: hidden;
    min-height: 140px;
}

.pc-mediagrid__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-mediagrid__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--ease-fast), background var(--ease-fast);
}

.pc-mediagrid__cell:hover .pc-mediagrid__remove,
.pc-mediagrid__remove:focus-visible {
    opacity: 1;
}

.pc-mediagrid__remove:hover {
    background: rgba(15, 23, 42, 0.9);
}

.pc-mediagrid__mode-toggle {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ease-fast), background var(--ease-fast);
}

.pc-mediagrid__cell:hover .pc-mediagrid__mode-toggle,
.pc-mediagrid__mode-toggle:focus-visible {
    opacity: 1;
}

.pc-mediagrid__mode-toggle:hover {
    background: rgba(15, 23, 42, 0.92);
}

.pc-mediagrid__more {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-mediagrid__video-label,
.pc-mediagrid__label {
    position: absolute;
    inset: auto 8px 8px 8px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: var(--fs-xs);
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
}

/* 1 image */
.pc-mediagrid--1 { grid-template-columns: 1fr; }
.pc-mediagrid--1-full .pc-mediagrid__cell { aspect-ratio: 16 / 9; min-height: 0; }
.pc-mediagrid--1-portrait { max-width: 70%; margin: 0 auto; }
.pc-mediagrid--1-portrait .pc-mediagrid__cell { aspect-ratio: 4 / 5; min-height: 0; }

/* 2 images */
.pc-mediagrid--2-split { grid-template-columns: 1fr 1fr; }
.pc-mediagrid--2-split .pc-mediagrid__cell { aspect-ratio: 1 / 1; min-height: 0; }
.pc-mediagrid--2-stack { grid-template-columns: 1fr; }
.pc-mediagrid--2-stack .pc-mediagrid__cell { aspect-ratio: 16 / 9; min-height: 0; }

/* 3 images */
.pc-mediagrid--3-hero-left {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "a b" "a c";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--3-hero-left .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--3-hero-left .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--3-hero-left .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--3-hero-left .pc-mediagrid__cell--3 { grid-area: c; }

.pc-mediagrid--3-hero-top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a a" "b c";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--3-hero-top .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--3-hero-top .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--3-hero-top .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--3-hero-top .pc-mediagrid__cell--3 { grid-area: c; }

.pc-mediagrid--3-row { grid-template-columns: repeat(3, 1fr); }
.pc-mediagrid--3-row .pc-mediagrid__cell { aspect-ratio: 1 / 1; min-height: 0; }

/* 4 images */
.pc-mediagrid--4-hero-left {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--4-hero-left .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--4 { grid-area: d; }

.pc-mediagrid--4-hero-top {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "a a a" "b c d";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--4-hero-top .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--4-hero-top .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--4-hero-top .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--4-hero-top .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--4-hero-top .pc-mediagrid__cell--4 { grid-area: d; }

.pc-mediagrid--4-square { grid-template-columns: 1fr 1fr; }
.pc-mediagrid--4-square .pc-mediagrid__cell { aspect-ratio: 1 / 1; min-height: 0; }

/* 5 images */
.pc-mediagrid--5-mosaic {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: "a b c" "a d e";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--5-mosaic .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--5 { grid-area: e; }

.pc-mediagrid--5-two-top {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a a a b b b" "c c d d e e";
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 4 / 3;
}
/* Use a pragmatic alternate template that browsers handle without empty area. */
.pc-mediagrid--5-two-top {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a a a b b b" "c c d d e e";
}
.pc-mediagrid--5-two-top .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--5-two-top .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--5-two-top .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--5-two-top .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--5-two-top .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--5-two-top .pc-mediagrid__cell--5 { grid-area: e; }

/* 6+ images */
.pc-mediagrid--many-two-top {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a a a b b b" "c c d d e e";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--many-two-top .pc-mediagrid__cell { min-height: 0; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--5 { grid-area: e; }

.pc-mediagrid--many-grid {
    grid-template-columns: repeat(3, 1fr);
}
.pc-mediagrid--many-grid .pc-mediagrid__cell { aspect-ratio: 1 / 1; min-height: 0; }

/* =========================================================================
 * Phase 60 — ratio-aware Post Media Grid Layouts (decision 677).
 *
 * Each layout below mirrors a value in the closed `Post Media Grid Layouts`
 * registry (docs/CONTROLLED_VOCABULARIES.md). The matching JS catalog lives
 * in posts-compose.js (var GRID_CATALOG). Per-cell `aspect-ratio` is applied
 * inline via the renderer (one of the 5 `Cover Ratio Codes` values) so each
 * cell takes the ratio dictated by either the layout default OR the
 * authored `cell_ratio_code` override; this CSS only controls the grid
 * track / area assignments and intentionally does NOT set a fixed
 * aspect-ratio per cell.
 *
 * NEVER add a layout class here without (1) a locked decision, (2) the
 * registry entry in CONTROLLED_VOCABULARIES.md, (3) the matching JS
 * catalog entry in posts-compose.js, (4) the Fallback Chains entry,
 * (5) the High-Level Mapping entry. See the matching anti-pattern in
 * docs/DRIFT_PREVENTION.md.
 * ========================================================================= */

/* Common: Phase 60+ grids fill complete collage areas. The renderer still
 * chooses ratio-specific cover crops; each layout below sets track ratios so
 * the rendered cell boxes stay close to those cover ratios without leaving
 * empty grid tracks. */
.pc-mediagrid--g {
    aspect-ratio: 4 / 3;
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
}
.pc-mediagrid--g .pc-mediagrid__cell {
    min-height: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
}

/* Single-cell layouts ---------------------------------------------------- */
.pc-mediagrid--g1_full_landscape,
.pc-mediagrid--g1_full_video      { grid-template-columns: 1fr; aspect-ratio: 16 / 9; }
.pc-mediagrid--g1_full_portrait   { grid-template-columns: 1fr; aspect-ratio: 9 / 16; max-width: 60%; margin: 0 auto; }
.pc-mediagrid--g1_full_square     { grid-template-columns: 1fr; aspect-ratio: 1 / 1; max-width: 75%; margin: 0 auto; }

/* Two-cell layouts ------------------------------------------------------- */
.pc-mediagrid--g2_split_landscape { grid-template-columns: 1fr 1fr; aspect-ratio: 32 / 9; }
.pc-mediagrid--g2_split_portrait  { grid-template-columns: 1fr 1fr; aspect-ratio: 9 / 8; }
.pc-mediagrid--g2_hero_landscape_square { grid-template-columns: 16fr 9fr; aspect-ratio: 25 / 9; }
.pc-mediagrid--g2_hero_portrait_square  { grid-template-columns: 9fr 16fr; aspect-ratio: 25 / 16; }

/* Three-cell layouts ----------------------------------------------------- */
.pc-mediagrid--g3_row_squares { grid-template-columns: repeat(3, 1fr); aspect-ratio: 3 / 1; }

.pc-mediagrid--g3_hero_landscape_two_squares {
    grid-template-columns: 32fr 9fr;
    grid-template-areas: "a b" "a c";
    aspect-ratio: 41 / 18;
}
.pc-mediagrid--g3_hero_landscape_two_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g3_hero_landscape_two_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g3_hero_landscape_two_squares .pc-mediagrid__cell--3 { grid-area: c; }

.pc-mediagrid--g3_hero_portrait_two_landscapes {
    grid-template-columns: 81fr 128fr;
    grid-template-areas: "a b" "a c";
    aspect-ratio: 209 / 144;
}
.pc-mediagrid--g3_hero_portrait_two_landscapes .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g3_hero_portrait_two_landscapes .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g3_hero_portrait_two_landscapes .pc-mediagrid__cell--3 { grid-area: c; }

.pc-mediagrid--g3_left_portrait_right_squares {
    grid-template-columns: 9fr 8fr;
    grid-template-areas: "a b" "a c";
    aspect-ratio: 17 / 16;
}
.pc-mediagrid--g3_left_portrait_right_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g3_left_portrait_right_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g3_left_portrait_right_squares .pc-mediagrid__cell--3 { grid-area: c; }

/* Four-cell layouts ------------------------------------------------------ */
.pc-mediagrid--g4_grid_squares { grid-template-columns: 1fr 1fr; aspect-ratio: 1 / 1; }

.pc-mediagrid--g4_hero_landscape_three_squares {
    grid-template-columns: 16fr 3fr;
    grid-template-areas: "a b" "a c" "a d";
    aspect-ratio: 19 / 9;
}
.pc-mediagrid--g4_hero_landscape_three_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g4_hero_landscape_three_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g4_hero_landscape_three_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g4_hero_landscape_three_squares .pc-mediagrid__cell--4 { grid-area: d; }

.pc-mediagrid--g4_hero_portrait_three_squares {
    grid-template-columns: 27fr 16fr;
    grid-template-areas: "a b" "a c" "a d";
    aspect-ratio: 43 / 48;
}
.pc-mediagrid--g4_hero_portrait_three_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g4_hero_portrait_three_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g4_hero_portrait_three_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g4_hero_portrait_three_squares .pc-mediagrid__cell--4 { grid-area: d; }

.pc-mediagrid--g4_top_landscape_three_squares {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a a a" "b c d";
    grid-template-rows: 27fr 16fr;
    aspect-ratio: 48 / 43;
}
.pc-mediagrid--g4_top_landscape_three_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g4_top_landscape_three_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g4_top_landscape_three_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g4_top_landscape_three_squares .pc-mediagrid__cell--4 { grid-area: d; }

/* Five-cell layouts ------------------------------------------------------ */
.pc-mediagrid--g5_feature_square_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "a a d e";
    aspect-ratio: 2 / 1;
}
.pc-mediagrid--g5_feature_square_four_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g5_feature_square_four_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g5_feature_square_four_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g5_feature_square_four_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g5_feature_square_four_squares .pc-mediagrid__cell--5 { grid-area: e; }

.pc-mediagrid--g5_hero_landscape_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a a a" "b c d e";
    grid-template-rows: 9fr 4fr;
    aspect-ratio: 16 / 13;
}
.pc-mediagrid--g5_hero_landscape_four_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g5_hero_landscape_four_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g5_hero_landscape_four_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g5_hero_landscape_four_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g5_hero_landscape_four_squares .pc-mediagrid__cell--5 { grid-area: e; }

.pc-mediagrid--g5_hero_portrait_four_squares {
    grid-template-columns: 9fr 8fr 8fr;
    grid-template-areas: "a b c" "a d e";
    aspect-ratio: 25 / 16;
}
.pc-mediagrid--g5_hero_portrait_four_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g5_hero_portrait_four_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g5_hero_portrait_four_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g5_hero_portrait_four_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g5_hero_portrait_four_squares .pc-mediagrid__cell--5 { grid-area: e; }

.pc-mediagrid--g5_two_landscapes_three_squares {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "a a a b b b" "c c d d e e";
    grid-template-rows: 27fr 32fr;
    aspect-ratio: 96 / 59;
}
.pc-mediagrid--g5_two_landscapes_three_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g5_two_landscapes_three_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g5_two_landscapes_three_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g5_two_landscapes_three_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g5_two_landscapes_three_squares .pc-mediagrid__cell--5 { grid-area: e; }

/* Six-cell layouts ------------------------------------------------------- */
.pc-mediagrid--g6_grid_squares { grid-template-columns: repeat(3, 1fr); aspect-ratio: 3 / 2; }

.pc-mediagrid--g6_hero_landscape_five_squares {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "a a a a a" "b c d e f";
    grid-template-rows: 45fr 16fr;
    aspect-ratio: 80 / 61;
}
.pc-mediagrid--g6_hero_landscape_five_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g6_hero_landscape_five_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g6_hero_landscape_five_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g6_hero_landscape_five_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g6_hero_landscape_five_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g6_hero_landscape_five_squares .pc-mediagrid__cell--6 { grid-area: f; }

.pc-mediagrid--g6_two_portraits_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b b" "c d e f";
    grid-template-rows: 32fr 9fr;
    aspect-ratio: 36 / 41;
}
.pc-mediagrid--g6_two_portraits_four_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g6_two_portraits_four_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g6_two_portraits_four_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g6_two_portraits_four_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g6_two_portraits_four_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g6_two_portraits_four_squares .pc-mediagrid__cell--6 { grid-area: f; }

.pc-mediagrid--g6_two_landscapes_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b b" "c d e f";
    grid-template-rows: 9fr 8fr;
    aspect-ratio: 32 / 17;
}
.pc-mediagrid--g6_two_landscapes_four_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g6_two_landscapes_four_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g6_two_landscapes_four_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g6_two_landscapes_four_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g6_two_landscapes_four_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g6_two_landscapes_four_squares .pc-mediagrid__cell--6 { grid-area: f; }

/* Seven-cell layouts ----------------------------------------------------- */
.pc-mediagrid--g7_wall_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "a a d e" "f f g g";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g7_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }

.pc-mediagrid--g7_hero_landscape_six_squares {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a a a" "b c d" "e f g";
    grid-template-rows: 27fr 16fr 16fr;
    aspect-ratio: 48 / 59;
}
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g7_hero_landscape_six_squares .pc-mediagrid__cell--7 { grid-area: g; }

.pc-mediagrid--g7_two_landscapes_five_squares {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "a a a b b b" "c c d d e e" "f f f g g g";
    grid-template-rows: 27fr 32fr 48fr;
    aspect-ratio: 96 / 107;
}
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g7_two_landscapes_five_squares .pc-mediagrid__cell--7 { grid-area: g; }

.pc-mediagrid--g7_portrait_wall_squares {
    grid-template-columns: 9fr 8fr 8fr 8fr;
    grid-template-areas: "a b c d" "a e f g";
    aspect-ratio: 33 / 16;
}
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g7_portrait_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }

/* Eight-cell layouts ----------------------------------------------------- */
.pc-mediagrid--g8_grid_squares { grid-template-columns: repeat(4, 1fr); aspect-ratio: 2 / 1; }

.pc-mediagrid--g8_hero_landscape_seven_squares {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "a a a a a a a a a a a a" "b b b c c c d d d e e e" "f f f f g g g g h h h h";
    grid-template-rows: 27fr 12fr 16fr;
    aspect-ratio: 48 / 55;
}
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--g8_hero_landscape_seven_squares .pc-mediagrid__cell--8 { grid-area: h; }

.pc-mediagrid--g8_two_landscapes_six_squares {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "a a a b b b" "c d e f g h";
    grid-template-rows: 27fr 16fr;
    aspect-ratio: 96 / 43;
}
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--g8_two_landscapes_six_squares .pc-mediagrid__cell--8 { grid-area: h; }

.pc-mediagrid--g8_portrait_wall_squares {
    grid-template-columns: 9fr 8fr 8fr 8fr 8fr;
    grid-template-areas: "a b c d e" "a f g h h";
    aspect-ratio: 41 / 16;
}
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--g8_portrait_wall_squares .pc-mediagrid__cell--8 { grid-area: h; }

/* Nine-or-more (gn_*) layouts ------------------------------------------- */
.pc-mediagrid--gn_wall_squares { grid-template-columns: repeat(3, 1fr); aspect-ratio: 1 / 1; }

.pc-mediagrid--gn_hero_landscape_wall_squares {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: "a a a a a a a a" "b b c c d d e e" "f f g g h h i i";
    grid-template-rows: 9fr 4fr 4fr;
    aspect-ratio: 16 / 17;
}
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--8 { grid-area: h; }
.pc-mediagrid--gn_hero_landscape_wall_squares .pc-mediagrid__cell--9 { grid-area: i; }

.pc-mediagrid--gn_hero_portrait_wall_squares {
    grid-template-columns: 9fr 8fr 8fr 8fr 8fr;
    grid-template-areas: "a b c d e" "a f g h i";
    aspect-ratio: 41 / 16;
}
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--8 { grid-area: h; }
.pc-mediagrid--gn_hero_portrait_wall_squares .pc-mediagrid__cell--9 { grid-area: i; }

.pc-mediagrid--gn_two_hero_landscapes_wall_squares {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "a a a a a a b b b b b b" "c c c d d d e e e f f f" "g g g g h h h h i i i i";
    grid-template-rows: 27fr 24fr 32fr;
    aspect-ratio: 96 / 83;
}
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--8 { grid-area: h; }
.pc-mediagrid--gn_two_hero_landscapes_wall_squares .pc-mediagrid__cell--9 { grid-area: i; }

.pc-mediagrid--gn_mosaic_mixed { grid-template-columns: repeat(3, 1fr); aspect-ratio: 1 / 1; }

/* Ten-cell layouts ------------------------------------------------------- */
.pc-mediagrid--g10_wall_squares {
    grid-template-columns: repeat(5, 1fr);
    aspect-ratio: 5 / 2;
}

.pc-mediagrid--g10_hero_landscape_wall_squares {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a a a" "b c d" "e f g" "h i j";
    grid-template-rows: 27fr 16fr 16fr 16fr;
    aspect-ratio: 48 / 75;
}
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--8 { grid-area: h; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--9 { grid-area: i; }
.pc-mediagrid--g10_hero_landscape_wall_squares .pc-mediagrid__cell--10 { grid-area: j; }

.pc-mediagrid--g10_two_hero_landscapes_wall_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b b" "c d e f" "g h i j";
    grid-template-rows: 9fr 8fr 8fr;
    aspect-ratio: 32 / 25;
}
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--8 { grid-area: h; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--9 { grid-area: i; }
.pc-mediagrid--g10_two_hero_landscapes_wall_squares .pc-mediagrid__cell--10 { grid-area: j; }

.pc-mediagrid--g10_mosaic_mixed {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "d e f g" "h i j j";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--5 { grid-area: e; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--6 { grid-area: f; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--7 { grid-area: g; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--8 { grid-area: h; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--9 { grid-area: i; }
.pc-mediagrid--g10_mosaic_mixed .pc-mediagrid__cell--10 { grid-area: j; }

/* ----- Photo grid picker (under the body, before the toolbar) ----- */
.pc-grid-picker {
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    background: rgba(15, 23, 42, 0.02);
    display: grid;
    gap: var(--sp-2);
}

.pc-grid-picker__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.pc-grid-picker__head strong {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.pc-grid-picker__hint {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.pc-grid-picker__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pc-grid-picker__tabs[hidden] {
    display: none;
}

.pc-grid-tab {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    border-radius: 999px;
    padding: 5px 10px;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--ease-fast), color var(--ease-fast), background var(--ease-fast);
}

.pc-grid-tab:hover,
.pc-grid-tab.is-active {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: rgba(53, 95, 150, 0.08);
}

.pc-grid-picker__options {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    align-items: flex-start;
}

.pc-grid-option-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

.pc-grid-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 6px 10px 8px;
    cursor: pointer;
    color: var(--c-text-muted);
    font-family: inherit;
    transition: border-color var(--ease-fast), color var(--ease-fast), background var(--ease-fast);
}

.pc-grid-option:hover {
    border-color: var(--c-primary);
    color: var(--c-text);
}

.pc-grid-option.is-active {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: rgba(53, 95, 150, 0.08);
}

.pc-grid-refresh {
    border: 1px solid rgba(53, 95, 150, 0.28);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 9px;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pc-grid-refresh:hover {
    background: rgba(53, 95, 150, 0.10);
    border-color: var(--c-primary);
}

.pc-grid-option__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pc-grid-option__slots {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.pc-grid-option__preview {
    width: 76px;
    height: 48px;
    display: grid;
    gap: 2px;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
}

.pc-grid-option__preview > * { background: currentColor; opacity: 0.45; border-radius: 1px; }
.pc-grid-option__preview::before,
.pc-grid-option__preview::after { content: none !important; }

/* Grid option preview shapes — minimalist visual hints */
.pc-grid-option__preview--grid_1_full { background: currentColor; opacity: 0.35; border-radius: 4px; }
.pc-grid-option__preview--grid_1_portrait {
    background: currentColor; opacity: 0.35; border-radius: 4px; width: 26px; margin: 0 auto;
}
.pc-grid-option__preview--grid_2_split { grid-template-columns: 1fr 1fr; }
.pc-grid-option__preview--grid_2_split::before,
.pc-grid-option__preview--grid_2_split::after { content: ""; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--grid_2_stack { grid-template-rows: 1fr 1fr; }
.pc-grid-option__preview--grid_2_stack::before,
.pc-grid-option__preview--grid_2_stack::after { content: ""; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--grid_3_hero_left {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b" "a c";
}
.pc-grid-option__preview--grid_3_hero_left::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--grid_3_hero_left::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--grid_3_hero_top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "a a" "b c";
}
.pc-grid-option__preview--grid_3_hero_top::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--grid_3_hero_top::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--grid_3_row { grid-template-columns: repeat(3, 1fr); }
.pc-grid-option__preview--grid_3_row::before,
.pc-grid-option__preview--grid_3_row::after { content: ""; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--grid_4_hero_left {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
}
.pc-grid-option__preview--grid_4_hero_left::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--grid_4_hero_left::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--grid_4_hero_top {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "a a a" "b c d";
}
.pc-grid-option__preview--grid_4_hero_top::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--grid_4_hero_top::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--grid_4_grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.pc-grid-option__preview--grid_5_mosaic {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b c" "a d e";
}
.pc-grid-option__preview--grid_5_mosaic::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--grid_5_mosaic::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--grid_5_two_top,
.pc-grid-option__preview--grid_many_two_top {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a a a b b b" "c c d d e e";
}
.pc-grid-option__preview--grid_5_two_top::before,
.pc-grid-option__preview--grid_many_two_top::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--grid_5_two_top::after,
.pc-grid-option__preview--grid_many_two_top::after { content: ""; grid-area: b; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--grid_many_grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }

/* =========================================================================
 * Phase 60 grid option preview shapes (mini-thumbnails in the picker).
 * Each preview uses tiny CSS-grid cells with a flat tinted background so the
 * admin can see the layout shape at a glance. Built from the same template
 * as the live grid above, scaled down via the picker's preview dimensions.
 * ========================================================================= */
.pc-grid-option__preview--g1_full_landscape  { background: currentColor; opacity: 0.35; border-radius: 4px; }
.pc-grid-option__preview--g1_full_portrait   { background: currentColor; opacity: 0.35; border-radius: 4px; width: 22px; margin: 0 auto; }
.pc-grid-option__preview--g1_full_square     { background: currentColor; opacity: 0.35; border-radius: 4px; width: 36px; height: 36px; margin: 0 auto; }

.pc-grid-option__preview--g2_split_landscape,
.pc-grid-option__preview--g2_split_portrait { grid-template-columns: 1fr 1fr; }
.pc-grid-option__preview--g2_split_landscape::before,
.pc-grid-option__preview--g2_split_landscape::after,
.pc-grid-option__preview--g2_split_portrait::before,
.pc-grid-option__preview--g2_split_portrait::after { content: ""; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--g2_hero_landscape_square,
.pc-grid-option__preview--g2_hero_portrait_square { grid-template-columns: 2fr 1fr; }
.pc-grid-option__preview--g2_hero_landscape_square::before,
.pc-grid-option__preview--g2_hero_portrait_square::before { content: ""; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g2_hero_landscape_square::after,
.pc-grid-option__preview--g2_hero_portrait_square::after { content: ""; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g3_row_squares { grid-template-columns: repeat(3, 1fr); }
.pc-grid-option__preview--g3_row_squares::before,
.pc-grid-option__preview--g3_row_squares::after { content: ""; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--g3_hero_landscape_two_squares,
.pc-grid-option__preview--g3_hero_portrait_two_landscapes,
.pc-grid-option__preview--g3_left_portrait_right_squares {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b" "a c";
}
.pc-grid-option__preview--g3_hero_landscape_two_squares::before,
.pc-grid-option__preview--g3_hero_portrait_two_landscapes::before,
.pc-grid-option__preview--g3_left_portrait_right_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g3_hero_landscape_two_squares::after,
.pc-grid-option__preview--g3_hero_portrait_two_landscapes::after,
.pc-grid-option__preview--g3_left_portrait_right_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g4_grid_squares { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pc-grid-option__preview--g4_hero_landscape_three_squares {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
}
.pc-grid-option__preview--g4_hero_landscape_three_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g4_hero_landscape_three_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g4_hero_portrait_three_squares {
    grid-template-columns: 27fr 16fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
}
.pc-grid-option__preview--g4_hero_portrait_three_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g4_hero_portrait_three_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g4_top_landscape_three_squares {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 27fr 16fr;
    grid-template-areas: "a a a" "b c d";
}

.pc-grid-option__preview--g5_feature_square_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "a a d e";
}

.pc-grid-option__preview--g5_hero_landscape_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "a a a a" "b c d e";
}
.pc-grid-option__preview--g5_hero_landscape_four_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g5_hero_landscape_four_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g5_hero_portrait_four_squares {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b c" "a d e";
}
.pc-grid-option__preview--g5_hero_portrait_four_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g5_hero_portrait_four_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g5_two_landscapes_three_squares {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a a a b b b" "c c d d e e";
}
.pc-grid-option__preview--g5_two_landscapes_three_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g5_two_landscapes_three_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g6_grid_squares { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.pc-grid-option__preview--g6_hero_landscape_five_squares {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "a a a a a" "b c d e f";
}
.pc-grid-option__preview--g6_hero_landscape_five_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g6_hero_landscape_five_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g6_two_portraits_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a a b b" "c d e f";
}
.pc-grid-option__preview--g6_two_portraits_four_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g6_two_portraits_four_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--g6_two_landscapes_four_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 9fr 8fr;
    grid-template-areas: "a a b b" "c d e f";
}

.pc-grid-option__preview--g7_wall_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "a a d e" "f f g g";
}

.pc-grid-option__preview--g7_hero_landscape_six_squares {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-areas: "a a a" "b c d" "e f g";
}
.pc-grid-option__preview--g7_hero_landscape_six_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g7_hero_landscape_six_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g7_two_landscapes_five_squares {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 27fr 32fr 48fr;
    grid-template-areas: "a a a b b b" "c c d d e e" "f f f g g g";
}
.pc-grid-option__preview--g7_two_landscapes_five_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g7_two_landscapes_five_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--g7_portrait_wall_squares {
    grid-template-columns: 9fr 8fr 8fr 8fr;
    grid-template-areas: "a b c d" "a e f g";
}

.pc-grid-option__preview--g8_grid_squares { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
.pc-grid-option__preview--g8_hero_landscape_seven_squares {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 27fr 12fr 16fr;
    grid-template-areas: "a a a a a a a a a a a a" "b b b c c c d d d e e e" "f f f f g g g g h h h h";
}
.pc-grid-option__preview--g8_hero_landscape_seven_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--g8_hero_landscape_seven_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--g8_two_landscapes_six_squares {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 27fr 16fr;
    grid-template-areas: "a a a b b b" "c d e f g h";
}

.pc-grid-option__preview--g8_portrait_wall_squares {
    grid-template-columns: 9fr 8fr 8fr 8fr 8fr;
    grid-template-areas: "a b c d e" "a f g h h";
}

.pc-grid-option__preview--gn_wall_squares { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.pc-grid-option__preview--gn_hero_landscape_wall_squares {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-areas: "a a a a a a a a" "b b c c d d e e" "f f g g h h i i";
}
.pc-grid-option__preview--gn_hero_landscape_wall_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--gn_hero_landscape_wall_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--gn_hero_portrait_wall_squares {
    grid-template-columns: 9fr 8fr 8fr 8fr 8fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b c d e" "a f g h i";
}
.pc-grid-option__preview--gn_hero_portrait_wall_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--gn_hero_portrait_wall_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.4; border-radius: 1px; }

.pc-grid-option__preview--gn_two_hero_landscapes_wall_squares {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 27fr 24fr 32fr;
    grid-template-areas: "a a a a a a b b b b b b" "c c c d d d e e e f f f" "g g g g h h h h i i i i";
}
.pc-grid-option__preview--gn_two_hero_landscapes_wall_squares::before { content: ""; grid-area: a; background: currentColor; opacity: 0.5; border-radius: 1px; }
.pc-grid-option__preview--gn_two_hero_landscapes_wall_squares::after { content: ""; grid-area: b; background: currentColor; opacity: 0.45; border-radius: 1px; }

.pc-grid-option__preview--gn_mosaic_mixed { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

.pc-grid-option__preview--g10_wall_squares { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; }
.pc-grid-option__preview--g10_hero_landscape_wall_squares {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 27fr 16fr 16fr 16fr;
    grid-template-areas: "a a a" "b c d" "e f g" "h i j";
}
.pc-grid-option__preview--g10_two_hero_landscapes_wall_squares {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 9fr 8fr 8fr;
    grid-template-areas: "a a b b" "c d e f" "g h i j";
}
.pc-grid-option__preview--g10_mosaic_mixed {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "d e f g" "h i j j";
}

/* Recommended badge on the picker option */
.pc-grid-option.is-recommended {
    box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.pc-grid-option__recommended-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-primary);
}

/* =========================================================================
 * Per-cell ratio override pill + dropdown menu (Phase 60).
 * The pill renders inside each grid cell that has >=2 available ratios;
 * clicking it opens a tiny menu listing ONLY the asset's available
 * ratios per the matching anti-pattern in DRIFT_PREVENTION.md.
 * ========================================================================= */
.pc-mediagrid__ratio-pill {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 2;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ease-fast), background var(--ease-fast);
}
.pc-mediagrid__cell:hover .pc-mediagrid__ratio-pill,
.pc-mediagrid__ratio-pill:focus-visible {
    opacity: 1;
}
.pc-mediagrid__ratio-pill:hover {
    background: rgba(15, 23, 42, 0.9);
}

.pc-cell-ratio-menu {
    position: absolute;
    bottom: 32px;
    left: 6px;
    z-index: 10;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 2px;
    min-width: 110px;
}
.pc-cell-ratio-menu__title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    padding: 4px 6px 2px;
}
.pc-cell-ratio-menu__option {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    color: var(--c-text);
    cursor: pointer;
}
.pc-cell-ratio-menu__option:hover {
    background: rgba(53, 95, 150, 0.08);
}
.pc-cell-ratio-menu__option.is-active {
    background: rgba(53, 95, 150, 0.14);
    color: var(--c-primary);
    font-weight: 600;
}

.pc-poll-builder {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
}

.pc-poll-options {
    display: grid;
    gap: var(--sp-2);
}

.pc-poll-preview {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
}

.pc-poll-preview__question {
    font-weight: 700;
}

.pc-poll-preview__option {
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
}

.pc-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: var(--sp-5);
}

.pc-modal[hidden] {
    display: none;
}

.pc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.pc-modal__panel {
    position: relative;
    z-index: 1;
    width: min(520px, 96vw);
    max-height: min(720px, 90vh);
    overflow: auto;
    padding: var(--sp-4);
    display: grid;
    gap: var(--sp-3);
}

.pc-modal__panel--wide {
    width: min(900px, 96vw);
}

.pc-modal__panel--media {
    width: min(1180px, 96vw);
    height: min(860px, 92vh);
    max-height: min(860px, 92vh);
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
}

.pc-modal__panel--media .pc-modal__head {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

.pc-modal__panel--media .pc-media-search {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

.pc-modal__panel--media .pc-media-results {
    overflow: auto;
    padding: var(--sp-4);
}

.pc-modal__panel--media.is-maximized {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
}

.pc-modal__head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.pc-modal__icon-button {
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pc-modal__icon-button:hover,
.pc-modal__close:hover {
    color: var(--c-primary);
}

.pc-modal__close {
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.pc-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

.pc-media-modal__selected {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.pc-personality-rail__list {
    max-height: 430px;
}

.pc-media-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-3);
}

.pc-media-result {
    display: grid;
    gap: var(--sp-2);
    text-align: left;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--sp-2);
    cursor: pointer;
}

.pc-media-result:hover,
.pc-media-result.is-selected {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(53, 95, 150, 0.18);
}

.pc-media-result__thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
}

.pc-media-result__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-media-result__body {
    display: grid;
    gap: 2px;
}

.pc-media-result__body strong,
.pc-media-result__body small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-media-result__body small {
    color: var(--c-text-muted);
}

@media (max-width: 760px) {
    .pc-modal {
        padding: var(--sp-2);
    }

    .pc-modal__panel--media,
    .pc-modal__panel--media.is-maximized {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }

    .pc-media-search {
        flex-wrap: wrap;
    }

    .pc-media-search #pc-media-search {
        flex: 1 1 100%;
    }

    .pc-media-search #pc-media-kind {
        flex-basis: 120px;
        min-width: 120px;
    }

    .pc-compose-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .pc-post-button {
        width: 100%;
    }
}