/**
 * global-control-panel.css — Global Control Panel readout (modal-integrity-scan S8).
 *
 * Styles the admin Inbox card (#globalControlPanelBody) + the compact mobile header
 * context-strip (#gcpMobileStrip). OOM rule (§218.1/§218.2): any transition here is
 * compositor-only (opacity/transform) — never layout/paint-triggering properties.
 */

/* ---- Admin card: focus triplet ---- */
.gcp-body { display: flex; flex-direction: column; gap: 0.85rem; }

.gcp-triplet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

.gcp-focus-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 8px;
}

.gcp-focus-glyph { font-size: calc(1.4rem * var(--type-scale, 1)); line-height: 1; }

.gcp-focus-meta { display: flex; flex-direction: column; min-width: 0; }

.gcp-focus-label {
    font-size: calc(0.68rem * var(--type-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ffvr-ink-muted, var(--text-secondary, #667));
    font-weight: 600;
}

.gcp-focus-value {
    font-size: calc(0.95rem * var(--type-scale, 1));
    font-weight: 600;
    color: var(--ffvr-ink, var(--text-primary, #1a1a2e));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gcp-mode {
    font-size: calc(0.7rem * var(--type-scale, 1));
    font-weight: 500;
    color: var(--text-secondary, #667);
    padding: 0.05rem 0.4rem;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
}

.gcp-count { color: var(--text-secondary, #889); font-weight: 500; }

/* ---- Current-action row ---- */
.gcp-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(56, 132, 255, 0.06);
    border-radius: 8px;
}

.gcp-action-label { font-size: calc(0.8rem * var(--type-scale, 1)); color: var(--ffvr-ink-muted, var(--text-secondary, #667)); font-weight: 600; }
.gcp-action-value { font-size: calc(0.95rem * var(--type-scale, 1)); font-weight: 600; color: var(--ffvr-ink, var(--text-primary, #1a1a2e)); }
.gcp-updated { margin-left: auto; font-size: calc(0.72rem * var(--type-scale, 1)); color: var(--ffvr-ink-muted, var(--text-secondary, #889)); }

/* ---- Fergi-AI inheritance preview ---- */
.gcp-ai-preview {
    border: 1px dashed rgba(20, 160, 160, 0.4);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background: rgba(20, 160, 160, 0.04);
}

.gcp-ai-head {
    font-size: calc(0.78rem * var(--type-scale, 1));
    font-weight: 700;
    color: var(--ffvr-accent, #0f8a8a);
    margin-bottom: 0.4rem;
}

.gcp-ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }

.gcp-ai-list li {
    display: flex;
    gap: 0.6rem;
    font-size: calc(0.85rem * var(--type-scale, 1));
}

.gcp-ai-k {
    flex: 0 0 7.5rem;
    color: var(--ffvr-ink-muted, var(--text-secondary, #667));
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: calc(0.78rem * var(--type-scale, 1));
}

.gcp-ai-v {
    color: var(--ffvr-ink, var(--text-primary, #1a1a2e));
    font-weight: 600;
    word-break: break-word;
}

/* ---- Mobile header context-strip (O2) ---- */
.gcp-mobile-strip {
    display: none; /* desktop: the admin card is the surface */
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    opacity: 0;
    transition: opacity var(--modal-enter-duration, 200ms) var(--modal-ease, ease);
}

.gcp-mobile-strip::-webkit-scrollbar { display: none; }
.gcp-mobile-strip.has-context { opacity: 1; }

.gcp-ms-item,
.gcp-ms-action {
    font-size: calc(0.75rem * var(--type-scale, 1));
    white-space: nowrap;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
}

.gcp-ms-action { font-style: italic; opacity: 0.85; background: transparent; }

@media (max-width: 767px) {
    .gcp-mobile-strip.has-context { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .gcp-mobile-strip { transition: none; }
}