/* Staged content (issue #158).
   ════════════════════════════
   Two things: the strip an admin sees on a page that has unpublished changes behind it, and the
   list on /admin/staged-changes.

   Plain CSS, like admin-nav.css, admin-industrial.css and theme-surfaces.css, and for the same
   reason: the Dart Sass step needs Node, which not every dev machine has, and the compiled bundle
   is a committed artifact that never regenerates here.

   Every colour is a semantic token from theme-surfaces.css, so dark mode follows without a single
   rule of its own -- which is the whole point of that file. */

/* ── The on-page notice ─────────────────────────────────────────────────────── */

/* Chrome, not content: it is the application talking about the page, not part of the page. That
   is why it takes the chrome tokens and sits above the body rather than inside a card. */
.staged-notice {
    background: var(--chrome-fill);
    color: var(--chrome-ink);
    border-bottom: 1px solid var(--chrome-rule);
}

.staged-notice-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

.staged-notice-icon {
    font-size: 1.1rem;
    color: var(--chrome-link);
}

.staged-notice-text {
    flex: 1 1 320px;
    font-size: .92rem;
    line-height: 1.45;
}

.staged-notice-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bootstrap's grey outline is mud on navy; the chrome control tokens exist for exactly this. */
.staged-notice .btn-outline-secondary {
    color: var(--chrome-control-ink);
    border-color: var(--chrome-control-border);
}

.staged-notice .btn-outline-secondary:hover,
.staged-notice .btn-outline-secondary:focus {
    background: var(--chrome-control-hover-bg);
    border-color: var(--chrome-control-hover-border);
    color: var(--chrome-ink);
}

/* ── The staged-changes list ────────────────────────────────────────────────── */

.sc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* A row, not a card: these are a queue, and boxing each one made four staged pages look like
   four unrelated screens rather than one list to work through. */
.sc-item {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid var(--surface-rule);
}

.sc-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.sc-item-main {
    flex: 1 1 340px;
    min-width: 0;
}

.sc-item-kind {
    margin: 0;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--surface-muted);
}

.sc-item-title {
    margin: 2px 0 6px;
    font-size: 1.15rem;
}

.sc-item-detail {
    margin: 0 0 4px;
}

.sc-item-meta,
.sc-item-links {
    margin: 0;
    font-size: .86rem;
    color: var(--surface-muted);
}

.sc-item-links {
    margin-top: 6px;
}

.sc-item-booked {
    margin: 6px 0 0;
    font-size: .88rem;
    font-weight: 600;
}

.sc-item-actions {
    flex: 0 1 300px;
}

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.sc-publish {
    flex: 1 1 100%;
    border: 1px solid var(--surface-rule);
    border-radius: 4px;
    padding: 12px;
    background: var(--surface-2);
}

.sc-when {
    border: 0;
    margin: 0 0 10px;
    padding: 0;
}

.sc-when-legend {
    float: none;
    width: auto;
    margin: 0 0 4px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--surface-muted);
}

.sc-at {
    margin-top: 8px;
}

.sc-error {
    margin-top: 4px;
    font-size: .84rem;
    color: var(--status-danger-fill);
}