/* ==========================================================================
   Pruh měření času garantky (_garant/pruh.html.twig, stopky_controller.js)

   Vizuálně sourozenec pruhu právní osy (.dilna-pravni): 26px, zapuštěná
   plocha, meta písmo. Znak vlevo je tvar, ne barva: plný, když čas běží,
   tečkovaný, když stojí — stejná řeč jako „neposouzeno" v dílně.
   Samostatný soubor, aby se pilot nepletl s app.css ostatních obrazovek.
   ========================================================================== */

.garant-pruh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--sp-8);
    row-gap: var(--sp-2);
    margin: 0;
    min-height: 26px;
    padding: var(--sp-4) var(--sp-16);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-meta);
    color: var(--ink-muted);
}

.garant-pruh strong {
    font-weight: 500;
    color: var(--ink);
}

.garant-pruh__znak {
    flex: none;
    width: 9px;
    height: 12px;
    border: 1px dotted var(--mark-unassessed);
    border-radius: var(--r-1);
}

.garant-pruh__znak--bezi {
    background: var(--mark);
    border-style: solid;
    border-color: var(--mark);
}

/* Stav drží vpravo a čísla se při dopočtu po sekundách nehýbou do stran. */
.garant-pruh__stav {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* Upozornění na odpracovaný čas. Tón „čeká na člověka", ne červená:
   nic se nezastavuje a není to chyba ani konflikt. */
.garant-upozorneni {
    margin: 0;
    padding: var(--sp-8) var(--sp-16);
    background: var(--gate-soft-bg);
    color: var(--gate-soft-ink);
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--caution);
    font-size: var(--fs-meta);
}