/* Focused Article A1 geometry. Shared Midnight Print presentation stays in visual-system.css. */

[data-article-schedule] input[type="date"],
[data-article-schedule] select {
    height: var(--bh-control-height, 44px);
    min-height: var(--bh-control-height, 44px);
}

.article-detail {
    --article-reading-width: 720px;
}

.article-detail .article-cover,
.article-detail > .article-body {
    max-width: var(--article-reading-width);
}

.article-detail .article-cover {
    width: 100%;
    margin-inline: auto;
}

.article-body a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.article-body pre {
    max-width: 100%;
    overflow-x: auto;
}

.article-continuity {
    display: grid;
    gap: 24px;
    max-width: 860px;
    margin: 34px auto;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--bh-line);
    border-radius: 10px;
    background: var(--bh-paper);
    box-shadow: var(--shadow);
}

.article-series-navigation,
.article-related-reading,
.article-continuity-heading,
.article-series-navigation > div,
.article-series-step-links,
.article-continuity-editor,
.article-continuity-editor-grid,
.article-continuity-editor-grid > div,
.article-continuity-editor fieldset,
.article-series-form,
.article-series-overview,
.article-series-parts {
    display: grid;
    gap: 14px;
}

.article-series-navigation {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bh-line);
}

.article-series-navigation h2,
.article-continuity-heading h2,
.article-continuity-heading h3 {
    margin: 0;
}

.article-series-navigation h2 a {
    color: var(--text);
}

.article-series-navigation h2 a:hover,
.article-series-navigation h2 a:focus-visible {
    color: var(--accent-strong);
}

.article-series-navigation p,
.article-continuity-heading p {
    margin: 0;
}

.article-series-step-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-series-step-links .ghost-link {
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 12px 14px;
    overflow-wrap: anywhere;
}

.article-series-step-links span {
    color: var(--muted);
    font-size: 0.82rem;
}

.article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.article-related-grid .article-card {
    grid-template-columns: 1fr;
    min-height: 0;
}

.article-related-grid .article-card-image {
    min-height: 0;
    aspect-ratio: 8 / 5;
}

.article-related-grid .article-card-copy h3,
.article-series-list .article-card-copy h2 {
    margin-bottom: 7px;
    font-size: 1.08rem;
    overflow-wrap: anywhere;
}

.article-related-grid .card-primary-link,
.article-series-list .card-primary-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.article-related-grid .article-card-copy > p:not(.eyebrow):not(.article-meta) {
    -webkit-line-clamp: 2;
}

.article-series-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-series-list > li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.article-series-order {
    width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--bh-line);
    border-radius: 50%;
    background: var(--accent-wash);
    color: var(--accent-strong);
    font-weight: 800;
}

.article-continuity-editor {
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.article-continuity-editor > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
}

.article-continuity-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 8px;
}

.article-continuity-editor fieldset {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.article-continuity-editor legend {
    padding: 0 6px;
    color: var(--text);
    font-weight: 700;
}

.article-series-admin-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 18px;
}

.article-series-admin-list,
.article-series-reorder-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-series-admin-row,
.article-series-reorder-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-bg);
}

.article-series-admin-row.is-active {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.article-series-admin-row > div,
.article-series-reorder-list > li > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.article-series-admin-row strong,
.article-series-reorder-list strong {
    overflow-wrap: anywhere;
}

.article-series-admin-row span,
.article-series-admin-row small,
.article-series-reorder-list small {
    color: var(--muted);
}

.article-series-parts,
.article-series-delete {
    margin-top: 18px;
}

.article-series-reorder-list > li {
    grid-template-columns: 76px minmax(0, 1fr) auto;
}

.article-series-position-field input {
    width: 68px;
    min-height: 44px;
    text-align: center;
}

@media (max-width: 900px) {
    .article-related-grid,
    .article-series-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-series-admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .article-continuity {
        margin: 26px 0;
        padding: 16px;
    }

    .article-related-grid,
    .article-series-step-links,
    .article-continuity-editor-grid {
        grid-template-columns: 1fr;
    }

    .article-series-list > li {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px;
    }

    .article-series-reorder-list > li {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .article-series-reorder-list > li > a {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-continuity *,
    .article-continuity-editor *,
    .article-continuity-page * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Article A3 pre-publication advice. It stays compact and advisory inside the existing editor. */
.article-preflight {
    overflow: clip;
    border: 1px solid var(--bh-line, var(--border));
    border-radius: var(--bh-radius-small, 6px);
    background: var(--bh-paper, var(--surface));
}

.article-preflight > summary {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    cursor: pointer;
}

.article-preflight > summary > span:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.article-preflight > summary strong,
.article-preflight > summary small {
    overflow-wrap: anywhere;
}

.article-preflight > summary small {
    color: var(--muted);
    font-size: 0.82rem;
}

.article-preflight[open] > summary {
    border-bottom: 1px solid var(--bh-line, var(--border));
}

.article-preflight-pill[data-article-preflight-status="attention"] {
    background: var(--warning-bg, color-mix(in srgb, #f59e0b 18%, var(--surface-strong)));
    color: var(--warning-text, #fbbf24);
}

.article-preflight-pill[data-article-preflight-status="ready"] {
    background: var(--success-bg);
    color: var(--success-text);
}

.article-preflight-body,
.article-preflight-list,
.article-preflight-link-results {
    display: grid;
    gap: 12px;
}

.article-preflight-body {
    padding: 16px;
}

.article-preflight-body > .form-help,
.article-preflight-item p,
.article-preflight-link-check p,
.article-preflight-link-result p,
.article-preflight-human-note {
    margin: 0;
}

.article-preflight-list,
.article-preflight-link-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-preflight-item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--warning-text, #fbbf24) 34%, var(--bh-line, var(--border)));
    border-left: 3px solid var(--warning-text, #fbbf24);
    background: color-mix(in srgb, var(--warning-bg, #3b2b0c) 58%, transparent);
}

.article-preflight-item > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.article-preflight-item strong,
.article-preflight-item p {
    overflow-wrap: anywhere;
}

.article-preflight-item p,
.article-preflight-link-result p {
    color: var(--muted);
    line-height: 1.5;
}

.article-preflight-item .button-muted,
.article-preflight-link-check .button-muted {
    min-height: 44px;
}

.article-preflight-link-check {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bh-line, var(--border));
}

.article-preflight-link-check > div {
    display: grid;
    gap: 4px;
}

.article-preflight-link-state,
.article-preflight-link-results {
    grid-column: 1 / -1;
}

.article-preflight-link-state {
    min-height: 24px;
    margin: 0;
    color: var(--muted);
}

.article-preflight-link-result {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 11px 12px;
    border: 1px solid var(--bh-line, var(--border));
    background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.article-preflight-link-result > div {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.article-preflight-link-result code {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.article-preflight-link-result[data-state="ok"] .status-pill {
    background: var(--success-bg);
    color: var(--success-text);
}

.article-preflight-link-result[data-state="broken"] .status-pill,
.article-preflight-link-result[data-state="blocked"] .status-pill {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.article-preflight-link-result[data-state="redirect"] .status-pill,
.article-preflight-link-result[data-state="unverified"] .status-pill {
    background: var(--warning-bg, color-mix(in srgb, #f59e0b 18%, var(--surface-strong)));
    color: var(--warning-text, #fbbf24);
}

.article-preflight-human-note {
    padding: 12px 14px;
    border-left: 3px solid var(--bh-signal, var(--accent));
    background: var(--accent-wash);
    color: var(--text);
    line-height: 1.5;
}

@media (max-width: 620px) {
    .article-preflight > summary,
    .article-preflight-item,
    .article-preflight-link-check {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-preflight-pill {
        justify-self: start;
    }

    .article-preflight-item .button-muted,
    .article-preflight-link-check .button-muted {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-preflight * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Article A2: controlled social-publishing queue geometry. */

.article-social-publishing-page,
.article-social-connection,
.article-social-connection-heading,
.article-social-settings-form,
.article-social-message-editor form {
    display: grid;
    gap: 16px;
}

.article-social-connection-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.article-social-connection-heading h2,
.article-social-connection-heading p {
    margin: 0;
}

.article-social-connection-facts,
.article-social-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.article-social-connection-facts > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-bg);
}

.article-social-connection-facts span,
.article-social-table td > span,
.article-social-preview-copy > span,
.article-social-preview-copy > strong,
.article-social-preview-copy > a {
    display: block;
    overflow-wrap: anywhere;
}

.article-social-connection-facts span,
.article-social-table td > span {
    color: var(--muted);
}

.article-social-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-social-settings-form {
    width: 100%;
    max-width: none;
}

.article-social-settings-form .check-row {
    min-height: 44px;
}

.article-social-settings-form .check-row small {
    display: block;
    margin-top: 4px;
}

.article-social-publishing-page .button-link,
.article-social-publishing-page .ghost-link,
.article-social-publishing-page button,
.article-social-publishing-page input:not([type="checkbox"]),
.article-social-publishing-page select,
.article-social-publishing-page summary {
    min-height: 44px;
}

.article-social-table {
    min-width: 960px;
}

.article-social-table th:first-child,
.article-social-table td:first-child {
    width: 46%;
}

.article-social-table td {
    vertical-align: top;
}

.article-social-table td > * + * {
    margin-top: 7px;
}

.article-social-preview,
.article-social-preview-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.article-social-preview:has(img) {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: start;
}

.article-social-preview img {
    width: 160px;
    height: 84px;
    border: 1px solid var(--border);
    border-radius: 8px;
    object-fit: cover;
}

.article-social-preview-copy > a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.article-social-message-editor {
    margin-top: 12px;
}

.article-social-message-editor > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
}

.article-social-message-editor form {
    padding-top: 10px;
}

.article-social-message-editor textarea {
    width: 100%;
    resize: vertical;
}

.article-social-table .inline-warning {
    color: var(--warning-text, #f1c77a);
    font-weight: 700;
}

@media (max-width: 900px) {
    .article-social-connection-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .article-social-connection-heading,
    .article-social-connection-facts,
    .article-social-settings-grid {
        grid-template-columns: 1fr;
    }

    .article-social-connection-heading .status-pill {
        justify-self: start;
    }

    .article-social-publishing-page .table-wrap {
        overflow: visible;
    }

    .article-social-table {
        width: 100%;
        min-width: 0;
    }

    .article-social-table thead {
        display: none;
    }

    .article-social-table tbody,
    .article-social-table tr,
    .article-social-table td {
        display: block;
        width: 100%;
    }

    .article-social-table tr {
        border-bottom: 1px solid var(--border);
    }

    .article-social-table tr:last-child {
        border-bottom: 0;
    }

    .article-social-table td {
        padding: 14px;
        border: 0;
        overflow-wrap: anywhere;
    }

    .article-social-table td + td {
        border-top: 1px solid var(--border);
    }

    .article-social-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .article-social-table td:first-child {
        width: 100%;
    }

    .article-social-preview:has(img) {
        grid-template-columns: 1fr;
    }

    .article-social-preview img {
        width: min(160px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-social-publishing-page * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
