/*
 * Baton — a board read at 19:45 by people who are standing up, often on a
 * phone. Flags carry colour AND a word, because a colour alone is no use to
 * the third of a staff room that cannot reliably tell red from green.
 */

.bt-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-4);
    align-items: start;
}

.bt-card {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-2, 12px);
    padding: var(--sp-4, 16px);
    margin-bottom: var(--sp-4, 16px);
    display: grid;
    gap: var(--sp-3, 12px);
}

.bt-card__title { font-weight: 650; font-size: 0.95rem; }

.bt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3, 12px);
}

.bt-field--narrow { max-width: 180px; }

.bt-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); align-items: center; }

.bt-counts { font-size: 0.85rem; opacity: 0.8; }

/* Items -------------------------------------------------------------- */

.bt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3, 12px); }

.bt-item {
    border: 1px solid var(--border-1, #e2e8f0);
    border-left: 4px solid var(--border-2, #94a3b8);
    border-radius: var(--radius-2, 12px);
    padding: var(--sp-3, 12px);
    display: grid;
    gap: var(--sp-2, 8px);
}

.bt-item.is-critical { border-left-color: #b91c1c; }
.bt-item.is-watch { border-left-color: #b45309; }
.bt-item.is-note { border-left-color: #475569; }
.bt-item.is-acked { background: var(--surface-2, #f8fafc); }

.bt-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2, 8px); }
.bt-item__by { font-size: 0.78rem; opacity: 0.7; margin-left: auto; }
.bt-item p { margin: 0; line-height: 1.5; }

.bt-flag {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-2, #f1f5f9);
}

.is-critical .bt-flag { background: #fee2e2; color: #7f1d1d; }
.is-watch .bt-flag { background: #fef3c7; color: #78350f; }

.bt-acks { display: flex; flex-wrap: wrap; gap: 6px; }

.bt-ack {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #14532d;
}

.bt-ack.is-none { background: #fee2e2; color: #7f1d1d; }

.bt-item .btn { justify-self: start; min-height: 44px; }

/* Who is taking over -------------------------------------------------- */

.bt-staff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2, 8px); }

.bt-staff {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border-radius: var(--radius-1, 8px);
    background: var(--surface-2, #f1f5f9);
    font-size: 0.85rem;
}

.bt-staff.is-open { background: #fef2f2; }
.bt-staff__state { grid-column: 1 / -1; font-size: 0.75rem; opacity: 0.75; }

/* Receipt and toast --------------------------------------------------- */

.bt-receipt {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px var(--sp-3, 12px);
    margin: 0;
    font-size: 0.85rem;
}

.bt-receipt dt { opacity: 0.7; }
.bt-receipt dd { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }

.bt-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: var(--radius-2, 12px);
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.9rem;
    z-index: 60;
}

.bt-toast.is-ok { background: #14532d; }
.bt-toast.is-warn { background: #78350f; }
.bt-toast.is-error { background: #7f1d1d; }

@media (max-width: 900px) {
    .bt-board { grid-template-columns: minmax(0, 1fr); }
}