/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-cspe-pr-stv-count
 */

.stv-container { font-family: 'Nunito', system-ui, sans-serif; }

/* ---- the quota, given its own weight on the board ---- */
.stv-quota {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: #f4f1ff;
    border: 2px solid #d8cffb;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    margin: 0.5rem 0 1rem;
}

.stv-quota-figure { display: flex; align-items: baseline; gap: 0.6rem; }
.stv-quota-label { font-weight: 800; color: #4a3f86; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }
.stv-quota-value { font-size: 2.1rem; font-weight: 800; color: #3a2f72; line-height: 1; }

.stv-quota-working { display: flex; flex-direction: column; gap: 0.2rem; }
.stv-quota-working code {
    background: #fff; border: 1px solid #ded6fa; border-radius: 8px;
    padding: 0.25rem 0.5rem; font-size: 0.92rem; color: #4a3f86;
}
.stv-quota-note { font-size: 0.85rem; color: #6a6395; }

/* ---- who has a seat ---- */
.stv-seats {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.stv-seats-label {
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 0.78rem; color: #1d7a4f;
}
.stv-seat {
    background: #e4f7ec; border: 2px solid #9adcbb; color: #14603c;
    border-radius: 999px; padding: 0.22rem 0.8rem; font-weight: 700;
}

/* ---- the count sheet ---- */
.stv-table-wrap { overflow-x: auto; }

.stv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 2px solid #e3e6f0;
    border-radius: 14px;
    overflow: hidden;
}

.stv-table th, .stv-table td {
    padding: 0.6rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid #eef0f6;
    font-size: 1rem;
    white-space: nowrap;
}

.stv-table thead th {
    background: #f7f8fc;
    font-weight: 800;
    color: #3d4460;
    font-size: 0.88rem;
}

.stv-name-col { text-align: left !important; font-weight: 700; color: #2c3350; }

.stv-table tbody tr.stv-elected .stv-name-col { color: #14603c; }
.stv-table tbody tr.stv-excluded { opacity: 0.55; }
.stv-table tbody tr.stv-excluded .stv-name-col { text-decoration: line-through; }

/* A cell at or over the quota is the moment the whole system turns, so it reads
   as an event rather than as a slightly larger number. */
td.stv-over { background: #e4f7ec; font-weight: 800; color: #14603c; }

.stv-delta { display: block; font-size: 0.78rem; font-weight: 700; margin-top: 0.1rem; }
.stv-delta.up { color: #1d7a4f; }
.stv-delta.down { color: #b03a4a; }

.stv-badge {
    display: inline-block; margin-left: 0.5rem; border-radius: 999px;
    padding: 0.05rem 0.55rem; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.stv-badge-in { background: #d7f2e3; color: #14603c; }
.stv-badge-out { background: #f6dde1; color: #8c2c3c; }

.stv-nt th, .stv-nt td { background: #fafbfe; color: #6b7290; font-style: italic; }

/* ---- what just happened, in words ---- */
.stv-narration {
    margin: 0.9rem 0;
    padding: 0.75rem 1rem;
    background: #fffbf0;
    border-left: 5px solid #f0b23c;
    border-radius: 0 10px 10px 0;
    font-size: 1.02rem;
    color: #4a4230;
    min-height: 1.2rem;
}

/* ---- the comparison ---- */
.stv-compare {
    margin-top: 1.25rem; padding: 1rem 1.15rem;
    background: #f7f8fc; border: 2px solid #e3e6f0; border-radius: 14px;
}
.stv-compare h3 { margin: 0 0 0.6rem; font-size: 1.05rem; color: #2c3350; }
.stv-compare-lead { margin: 0 0 0.75rem; color: #4a5070; }
.stv-compare-table { margin-bottom: 0.75rem; }
.stv-compare-verdict {
    margin: 0; padding: 0.7rem 0.9rem; background: #fff;
    border-left: 5px solid #7c5cff; border-radius: 0 10px 10px 0;
    font-weight: 600; color: #3a2f72;
}

.stv-prompts { margin-top: 1rem; padding-left: 1.2rem; color: #4a5070; }
.stv-prompts li { margin-bottom: 0.35rem; }

/* Never hidden, never small print: a class must not leave believing it watched
   the statutory procedure. */
.stv-method-note {
    margin-top: 1rem; font-size: 0.9rem; color: #5a6080;
    border-top: 1px dashed #d8dbe8; padding-top: 0.6rem;
}

.stv-empty {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.2rem; color: #6b7290; background: #f7f8fc;
    border: 2px dashed #d8dbe8; border-radius: 14px;
}

/* ---- display mode: the board, from the back of the room ---- */
body.display-mode .stv-table th,
body.display-mode .stv-table td { font-size: 1.35rem; padding: 0.8rem 1rem; }
body.display-mode .stv-name-col { font-size: 1.4rem; }
body.display-mode .stv-quota-value { font-size: 3rem; }
body.display-mode .stv-narration { font-size: 1.3rem; }
body.display-mode .stv-seat { font-size: 1.25rem; padding: 0.3rem 1rem; }
body.display-mode .controls-container { display: none; }

@media (max-width: 640px) {
    .stv-table th, .stv-table td { padding: 0.45rem 0.5rem; font-size: 0.9rem; }
    .stv-quota { gap: 0.75rem; padding: 0.7rem 0.85rem; }
    .stv-quota-value { font-size: 1.7rem; }
}