/* Alignment is opt-in; legacy projects and block layouts retain their defaults. */
#project-overlay .po-hero-content[data-aligned-header] { max-width: none; width: 100%; }
:is(#project-overlay, #mobile-portfolio-root) [data-project-header][data-project-align] {
    text-align: var(--project-text-align);
}
#project-overlay #po-tag[data-project-align] {
    display: table; max-width: 100%; overflow-wrap: anywhere;
    margin-left: var(--project-align-start); margin-right: var(--project-align-end);
}
#project-overlay #po-subtitle[data-project-align] {
    margin-left: var(--project-align-start); margin-right: var(--project-align-end);
}
#project-overlay #po-meta[data-project-align] { justify-content: var(--project-align-flex); }
#project-overlay [data-project-header="tags"][data-project-align] {
    grid-template-columns: auto minmax(0, 1fr); justify-content: var(--project-align-flex);
}
#project-overlay [data-project-header="tags"][data-project-align]:not(:has(.po-meta-icon)) { grid-template-columns: minmax(0, 1fr); }
#mobile-portfolio-root .mp-project-details[data-project-align] {
    display: flex; flex-wrap: wrap; justify-content: var(--project-align-flex);
}
#mobile-portfolio-root [data-project-header="tags"][data-project-align] {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: var(--project-align-flex);
}
#mobile-portfolio-root [data-project-header="tags"][data-project-align]:not(:has(.mp-content-icon)) { grid-template-columns: minmax(0, 1fr); }

:is(#project-overlay .po-block, #mobile-portfolio-root .mp-block)[data-project-align] {
    text-align: var(--project-text-align);
}
:is(#project-overlay .po-block, #mobile-portfolio-root .mp-block)[data-project-align]
:is(h2, h3, h4, p, blockquote, cite, figcaption, .caption, .mp-caption, .uxb-caption, .po-structured-caption, .po-stat, .mp-stat, .po-card-grid article, .mp-principle-card, .po-timeline-phase, .mp-timeline-phase, .uxb-node, th, td) {
    text-align: var(--project-text-align);
}
:is(#project-overlay .po-block, #mobile-portfolio-root .mp-block)[data-project-align]
:is(.po-embed-frame, .mp-embed-frame) {
    margin-left: var(--project-align-start); margin-right: var(--project-align-end);
}
/* Do not cascade text alignment into editor controls or re-position chart geometry. */
#project-overlay :is(.po-edit-form, .po-meta-editor, .po-block-toolbar, .po-block-alignment) { text-align: left; }
#project-overlay .po-block[data-project-align] .po-edit-form :is(p, h2, h3, h4) { text-align: left; }
#project-overlay .po-block[data-project-align] .uxe-preview :is(p, h2, h3, h4) { text-align: var(--project-text-align); }
:is(#project-overlay .po-block--code, #mobile-portfolio-root .mp-block--code)[data-project-align] pre { text-align: left; }
#project-overlay .po-block-alignment {
    grid-column: 1 / -1; column-span: all; flex: 0 0 100%; order: 100; min-width: 0; width: 100%; box-sizing: border-box;
    display: grid; gap: 12px; margin-top: 12px; padding: 16px;
    border: 1px solid var(--game-ui-border); border-radius: 6px; background: #fff;
    color: #30352f; font: 400 13px/1.4 'Space Grotesk', sans-serif;
}
#project-overlay .po-layout-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
#project-overlay .po-layout-field > span { flex: 1; min-width: 0; }
#project-overlay .po-layout-field :is(select, input[type="text"], input[type="number"]) {
    width: min(55%, 230px); min-width: 0; min-height: 36px; padding: 6px 8px;
    border: 1px solid #d8d8d3; border-radius: 4px; background: #fafaf8; color: #30352f; font: inherit;
}
#project-overlay .po-layout-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: #225f3e; }
#project-overlay .po-layout-field :disabled { opacity: 0.5; }
#project-overlay .po-block--divider:has(.po-block-alignment) { flex-wrap: wrap; }
#project-overlay .po-link-card:has(> .po-block-alignment) { flex-wrap: wrap; }
#project-overlay.admin-mode #po-blocks > .po-editable { overflow: visible; }
#project-overlay.admin-mode .po-editable:focus-within > .po-block-toolbar { display: flex; }
/* Allow an editor footer to expand beyond fixed-height gallery tracks. */
#project-overlay .po-block--gallery:has(> .po-block-alignment) { grid-auto-rows: minmax(160px, auto); }
.po-alignment-control { display: inline-flex; flex-shrink: 0; gap: 3px; padding: 3px; border: 1px solid var(--game-ui-border, #ddd); border-radius: 6px; background: #fff; }
.po-alignment-control button {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 4px; background: transparent; color: #565650; cursor: pointer;
}
.po-alignment-control button[aria-pressed="true"] { background: #e8eee9; color: #215b3a; }
.po-alignment-control button:hover { background: #f0f0ec; }
.po-alignment-control button:focus-visible { outline: 2px solid #176b87; outline-offset: 1px; }
.po-alignment-control .po-content-icon { font-size: 18px; width: 18px; height: 18px; }
#project-overlay .po-block-toolbar :is([data-act="align"], [data-act="duplicate"]) { display: grid; place-items: center; }
#project-overlay .po-block-toolbar :is([data-act="align"], [data-act="duplicate"]) .po-content-icon { width: 16px; height: 16px; font-size: 16px; }
@media (max-width: 800px) {
    #project-overlay.admin-mode .po-inserter { padding-bottom: 36px; }
}
.po-alignment-dialog {
    width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box;
    padding: 20px; margin: auto; border: 1px solid #d8d8d3; border-radius: 8px;
    background: #fff; color: #222; font: 400 14px/1.4 'Space Grotesk', sans-serif;
}
.po-alignment-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.po-alignment-dialog header, .po-alignment-dialog footer, .po-alignment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.po-alignment-dialog h2 { margin: 0; font-size: 18px; }
.po-alignment-dialog [data-close] { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.po-alignment-scope { display: grid; gap: 6px; margin: 20px 0 12px; }
.po-alignment-scope select { width: 100%; padding: 8px; border: 1px solid #d8d8d3; border-radius: 4px; background: #fafaf8; color: inherit; font: inherit; }
.po-alignment-row { padding: 8px 0; }
.po-alignment-row:first-child { border-bottom: 1px solid #e8e8e3; margin-bottom: 8px; }
.po-alignment-row > span { min-width: 0; overflow-wrap: anywhere; }
.po-alignment-dialog footer { justify-content: flex-end; margin-top: 16px; }
.po-alignment-dialog footer button { padding: 8px 12px; border: 1px solid #d8d8d3; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }
.po-alignment-dialog [data-apply] { background: #225f3e; border-color: #225f3e; color: #fff; }
@media (max-width: 400px) {
    .po-alignment-dialog { padding: 14px; }
    .po-alignment-row { gap: 6px; }
    .po-alignment-control button { width: 30px; }
}

/* Compact outside spacing; preserve card padding, chart coordinates and explicit spacers. */
#project-overlay .po-content { padding-block: 16px; }
#project-overlay .po-block:not(.po-block--spacer):not(.po-block--image-full),
#mobile-portfolio-root .mp-block:not(.mp-block--spacer):not(.mp-block--image-full) { margin-top: 0; margin-bottom: 16px; }
#project-overlay :is(.po-block--section, .po-block--process, .po-block--findings, .po-block--cards, .po-block--stats, .po-block--timeline, .po-block--grid-spec) { padding-block: 12px; }
#project-overlay .po-block--section.is-centered { padding-block: 20px; }
#project-overlay .po-block--quote { padding-block: 20px; }
#project-overlay .po-block--insight { padding-block: 20px; }
#project-overlay .po-block--caption { padding-block: 4px; }
#project-overlay :is(.po-block--text, .po-twocol-text) > :last-child:not(.po-block-toolbar):not(.po-edit-form):not(.po-block-alignment) { margin-bottom: 0; }
#mobile-portfolio-root .mp-project-blocks { padding-block: 16px; }
#mobile-portfolio-root :is(.mp-block--section, .mp-block--text, .mp-block--process, .mp-block--findings, .mp-block--cards, .mp-block--divider) { padding-block: 12px; }
#mobile-portfolio-root .mp-block--section.is-centered { padding-block: 20px; }
#mobile-portfolio-root .mp-block--caption { padding-block: 4px; }
#mobile-portfolio-root .mp-block--text > :last-child { margin-bottom: 0; }

/* Width and text alignment are independent. Narrow media remains proportional. */
:is(#project-overlay .po-block, #mobile-portfolio-root .mp-block)[data-content-width] {
    box-sizing: border-box; width: calc(100% - 32px); min-width: 0;
    margin-inline: auto; max-width: var(--project-content-width);
}
[data-content-width="wide"] { --project-content-width: 1180px; }
[data-content-width="centered"] { --project-content-width: 900px; }
[data-content-width="narrow"] { --project-content-width: 680px; }
#project-overlay .po-block[data-content-width="narrow"].is-editorial,
#project-overlay .po-block[data-content-width="narrow"].is-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#project-overlay .po-block[data-project-align] :is(.po-stat-icon, .po-card-grid article > .po-content-icon),
#mobile-portfolio-root .mp-block[data-project-align] .mp-stat-icon {
    margin-left: var(--project-align-start); margin-right: var(--project-align-end);
}
#project-overlay .po-block--section[data-project-align] p { margin-left: var(--project-align-start); margin-right: var(--project-align-end); }

/* Equal-width items use flex wrapping so incomplete rows can be centred as a group. */
:is(#project-overlay, #mobile-portfolio-root) :is([data-card-columns], [data-row-align]) { --project-row-justify: flex-start; --project-default-columns: 1; }
:is(#project-overlay, #mobile-portfolio-root) [data-row-align="center"] { --project-row-justify: center; }
#project-overlay .po-block--cards:is([data-card-columns], [data-row-align]),
#mobile-portfolio-root .mp-block--cards:is([data-card-columns], [data-row-align]) { --project-default-columns: 2; }
#project-overlay .po-block--stats:is([data-card-columns], [data-row-align]) { --project-default-columns: 3; }
#mobile-portfolio-root .mp-block--stats:is([data-card-columns], [data-row-align]) { --project-default-columns: 2; }
:is(#project-overlay, #mobile-portfolio-root) :is([data-card-columns], [data-row-align]) > :is(.po-card-grid, .mp-card-grid, ul, ol),
:is(#project-overlay .po-block--stats, #mobile-portfolio-root .mp-block--stats):is([data-card-columns], [data-row-align]) {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: var(--project-row-justify);
}
:is(#project-overlay, #mobile-portfolio-root) :is([data-card-columns], [data-row-align]) > :is(.po-card-grid, .mp-card-grid, ul, ol) > :is(article, li),
:is(#project-overlay .po-block--stats, #mobile-portfolio-root .mp-block--stats):is([data-card-columns], [data-row-align]) > :is(.po-stat, .mp-stat) {
    box-sizing: border-box; min-width: 0; max-width: 100%;
    flex: 0 0 max(min(100%, 180px), calc((100% - (var(--project-card-columns, var(--project-default-columns)) - 1) * 12px) / var(--project-card-columns, var(--project-default-columns))));
}
@media (max-width: 600px) {
    :is(#project-overlay, #mobile-portfolio-root) :is([data-card-columns], [data-row-align]) > :is(.po-card-grid, .mp-card-grid, ul, ol) > :is(article, li) { flex-basis: 100%; }
}