/* rf-mask.css — the curtain over a dashboard figure, and the eye that draws it.

   Paired with rf-mask.js. Two states and nothing else: a covered figure reads
   as flat grey dots that take no attention, and the eye sits quietly beside it
   at the size of the small round hint mark the dashboards already use, so a row
   of tiles is not a row of buttons.

   Every dashboard here paints its one leading figure white on navy, and marks
   that tile .is-lead. The second half of this file is that tile, in reverse. */

.rf-mask.is-hidden {
    color: #98a1b6;
    letter-spacing: .1em;
}

.rf-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(16, 42, 131, .07);
    color: #6b7288;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.rf-eye:hover {
    background: rgba(16, 42, 131, .14);
    color: #102a83;
}

.rf-eye:focus-visible {
    outline: 2px solid #102a83;
    outline-offset: 1px;
}

/* ---------- the navy tile ---------- */
.is-lead .rf-mask.is-hidden { color: rgba(255, 255, 255, .5); }
.is-lead .rf-eye            { background: rgba(255, 255, 255, .18); color: #fff; }
.is-lead .rf-eye:hover      { background: rgba(255, 255, 255, .30); color: #fff; }
.is-lead .rf-eye:focus-visible { outline-color: #fff; }