/* KeyHub key-status tick strip.

   Global rather than component-scoped on purpose. Two components render this
   markup: KeyStatusTicks (Seam, five ticks) and GokiKeyStatusTicks (Goki,
   three ticks plus the pin). Blazor CSS isolation rewrites a scoped rule to
   .ks-tick[b-abc123] and matches only the one component it belongs to, so
   while these rules lived in KeyStatusTicks.razor.css the Goki tile rendered
   completely unstyled. Keeping one global copy is what stops the two tiles
   drifting apart. */

.ks-wrap {
    font-size: .75rem;
}

.ks-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ks-tick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    background: #fafafa;
    padding: 2px 8px;
    cursor: pointer;
    font-size: .72rem;
    line-height: 1;
    color: #333;
}

.ks-tick .ks-dot {
    font-size: .8rem;
    font-weight: 700;
}

.ks-green .ks-dot { color: #2e7d32; }
.ks-amber .ks-dot { color: #f9a825; }
.ks-red   .ks-dot { color: #c62828; }
.ks-pending .ks-dot { color: #bdbdbd; }

.ks-red   { border-color: #ef9a9a; background: #fff5f5; }
.ks-amber { border-color: #ffe082; background: #fffdf5; }
.ks-pending { color: #9e9e9e; }

.ks-open { outline: 2px solid #90caf9; outline-offset: 1px; }

.ks-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #c62828;
    color: #fff;
    font-style: italic;
    font-size: .62rem;
    font-weight: 700;
}

.ks-amber .ks-i { background: #f9a825; }

.ks-check {
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    background: #fff;
    cursor: pointer;
    line-height: 1;
    color: #555;
}

.ks-check-wide {
    width: auto;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: .72rem;
}

.ks-check:disabled { opacity: .5; cursor: default; }

/* Card indicator: the encoded physical cards a Seam guest also holds, and on
   the Goki tile the door code itself. */
.ks-card {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid #cfd8dc;
    border-radius: 14px;
    background: #eceff1;
    padding: 2px 8px;
    color: #37474f;
    font-size: .72rem;
    line-height: 1;
}

.ks-card-ico { flex: 0 0 auto; }
.ks-card-n { font-weight: 700; }

/* Device breakdown next to "On phone": Apple + Android icons with per-platform counts. */
.ks-devices {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 2px;
    color: #455a64;
}

.ks-dev {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.ks-dev-ico { flex: 0 0 auto; }
.ks-dev-android { color: #3ddc84; }

.ks-info {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff5f5;
    border: 1px solid #ef9a9a;
    max-width: 360px;
}

.ks-info-amber   { background: #fffdf5; border-color: #ffe082; }
.ks-info-green   { background: #f1f8f1; border-color: #a5d6a7; }
.ks-info-pending { background: #f5f5f5; border-color: #e0e0e0; }

.ks-info-title { font-weight: 700; margin-bottom: 2px; }
.ks-info-reason { color: #444; }
.ks-info-action { margin-top: 3px; font-weight: 600; color: #1565c0; }

.ks-foot {
    margin-top: 6px;
    color: #777;
    font-size: .68rem;
}

.ks-foot-warn { color: #c62828; }