/* ── Don't panic callout ─────────────────────────── */

.dont-panic {
    padding: 0.85rem 1.05rem;
    margin: 0 0 1.25rem;
    background: #fef9e7;
    border-left: 3px solid #f59e0b;
    border-radius: 0 4px 4px 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #5a4a1a;
}
.dont-panic strong {
    letter-spacing: 0.05em;
    color: #b45309;
    margin-right: 0.15rem;
}

/* ── Status bar ───────────────────────────────────── */

.ribbon-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.65rem;
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #6c757d;
    min-height: 1.8em;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.6rem;
}
.ribbon-status b { color: #2d2d2d; font-weight: 600; }
.ribbon-status-sep { width: 1px; height: 1em; background: #d0d8e4; flex-shrink: 0; }
.ribbon-status-cell { color: #999; }

/* ── Phase indicator ─────────────────────────────── */

.ribbon-phase {
    font-size: 0.74rem;
    color: #4a6fa5;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    background: #eaeff7;
    border: 1px solid #d4dcec;
    border-radius: 999px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* ── Matrix ──────────────────────────────────────── */

.ribbon-matrix-wrap {
    display: flex;
    margin-bottom: 0.5rem;
}
#matrix-canvas {
    display: block;
    width: 100%;
    cursor: crosshair;
    image-rendering: pixelated;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 3px;
}

/* ── Bit array strip ─────────────────────────────── */

.ribbon-bits-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.ribbon-bits-label {
    font-size: 0.72rem;
    color: #6c757d;
    font-weight: 600;
    letter-spacing: 0.01em;
}
#bits-canvas {
    display: block;
    image-rendering: pixelated;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 3px;
}

/* ── Speed toggle ────────────────────────────────── */

.ribbon-speed.active { background: #4a6fa5 !important; border-color: #4a6fa5 !important; color: #fff !important; }

/* ── Legend ──────────────────────────────────────── */

.ribbon-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 0.4rem;
    padding: 0.45rem 0.65rem;
    background: #fafbfc;
    border: 1px solid #eceff3;
    border-radius: 4px;
}
.legend-item { display: flex; align-items: center; gap: 0.35rem; }
.legend-swatch {
    display: inline-block;
    width: 14px;
    height: 12px;
    border: 1px solid #d0d4dc;
}
.sw-set { background: #4a6fa5; border-color: #4a6fa5; }
.sw-band { background: #eef0f4; }
.sw-empty { background: #fafafa; }
.sw-fp { background: #a5825a; border-color: #a5825a; }
.legend-pivot {
    display: inline-block;
    width: 14px;
    height: 12px;
    background: linear-gradient(to right, transparent 5px, #ef4444 5px, #ef4444 8px, transparent 8px);
}
.legend-target {
    display: inline-block;
    width: 14px;
    height: 12px;
    border: 2px solid #f59e0b;
    box-sizing: border-box;
}

/* ── Step headers in "How it works" ──────────────── */

.ribbon-step-h {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2d2d2d;
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
}