/* STATUS PILL
   Compact, uppercase state indicator. Sits next to a title (card headers,
   list rows) to say what state a record is in at a glance.

   Usage: <span class="tt-status-pill tt-status-pill--warning">Ending soon</span>
*/

.tt-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.1rem var(--space-2xs);
    border: var(--border-thin) solid transparent;
    border-radius: 0.5rem; /* ~8px — rounded like a pill, but not a full capsule */
    font-size: var(--step--2);
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    vertical-align: middle;
}

.tt-status-pill--muted {
    color: var(--text-muted);
    background-color: var(--bg-muted);
    border-color: var(--border-muted);
}

.tt-status-pill--info {
    color: var(--info-text-color);
    background-color: var(--info-color);
    border-color: var(--info-border-color);
}

.tt-status-pill--success {
    color: var(--success-text-color);
    background-color: var(--success-color);
    border-color: var(--success-border-color);
}

.tt-status-pill--warning {
    color: var(--warning-text-color);
    background-color: var(--warning-color);
    border-color: var(--warning-border-color);
}

.tt-status-pill--danger {
    color: var(--danger-text-color);
    background-color: var(--danger-color);
    border-color: var(--danger-border-color);
}

/* CLOSE CREW KEEPING
   One line of the "Crew keeping their data" table on the close screen: a
   production whose open jobs are why somebody's personal data has not been
   cleared, with the job count beside it.

   The pill inside is deliberately .tt-status-pill--muted and not --warning,
   unlike the one on the unsent-entries list above it. These jobs are somebody
   else's work in progress and hold nothing up - the crew-data step counts only
   crew whose work is over. A yellow badge here, at the foot of a close screen
   beside a disabled Finalize button, was read as a fault to be cleared.

   A row of the table holds one of these per production, since the same crew
   member commonly has open jobs on two or three at once. They stack rather than
   run on, because the pill beside each name is the number somebody quotes when
   they go and ask about it, and a wrapped sentence puts those numbers next to
   the wrong names.

   Inline-flex so the group keeps its own width and the pill sits against its
   production name rather than out at the column edge.

   Usage:
     <div class="tt-close-crew-keeping">
       <span>The Bridge S3</span>
       <span class="tt-status-pill tt-status-pill--muted">2 open jobs</span>
       <span class="tt-text-muted">on this production</span>
     </div>
*/
.tt-close-crew-keeping {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
}

/* Separates the stacked lines without a rule: a border between two lines of one
   table cell reads as a row division that is not there. */
.tt-close-crew-keeping + .tt-close-crew-keeping {
    margin-block-start: var(--space-3xs);
}