/* ═══════════════════════════════════════════════════════════════════════════
   Hallo Arkkids v6.5 — Frontend CSS
   ═══════════════════════════════════════════════════════════════════════════

   CSS-variabelen worden inline geïnjecteerd vanuit class-frontend.php:
     --ark-tile-width        breedte van de tegel (px)
     --ark-tile-height       hoogte (px of auto)
     --ark-color-off         fallback niet-aanwezig kleur
     --ark-color-on          fallback aanwezig kleur
     --ark-frame-{level}-inset-x/y   frame-uitsteek per beloningsniveau
   Per groep worden .card[data-group="slug"] klassen gegenereerd.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auth scherm ─────────────────────────────────────────────────────────── */
#arkkids-auth-screen{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:20px;font-family:sans-serif;}
.arkkids-auth-box{background:#fff;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:36px 40px;max-width:460px;width:100%;text-align:center;}
.arkkids-auth-logo{font-size:28px;font-weight:800;margin-bottom:24px;color:#1d2327;}
.arkkids-auth-section{margin-bottom:20px;}
.arkkids-auth-section h3{margin:0 0 6px;font-size:16px;color:#333;}
.arkkids-auth-section p{margin:0 0 12px;font-size:14px;color:#666;}
.arkkids-auth-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.arkkids-auth-form input[type="password"]{padding:10px 14px;border:1.5px solid #ccc;border-radius:10px;font-size:15px;flex:1;min-width:160px;}
.arkkids-auth-form button{padding:10px 20px;background:#2563eb;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s;}
.arkkids-auth-form button:hover{background:#1d4ed8;}
.arkkids-auth-error{color:#b91c1c;font-size:13px;margin-top:6px;}
.arkkids-auth-divider{color:#aaa;margin:12px 0;font-size:13px;}
.arkkids-wp-login-btn{display:inline-block;padding:10px 22px;background:#f3f4f6;border:1.5px solid #ddd;border-radius:10px;text-decoration:none;color:#374151;font-weight:600;font-size:14px;transition:background .15s;}
.arkkids-wp-login-btn:hover{background:#e5e7eb;}
.arkkids-auth-robot{margin-top:16px;padding:12px 16px;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:10px;display:inline-block;font-size:14px;cursor:pointer;}
.arkkids-auth-robot input[type="checkbox"]{margin-right:8px;transform:scale(1.3);cursor:pointer;}

/* ── Header ──────────────────────────────────────────────────────────────── */
.arkkids-header{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;margin-bottom:4px;font-family:sans-serif;}
.arkkids-edit-toggle-btn{padding:8px 16px;background:#f0f4ff;color:#2563eb;border:2px solid #2563eb;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
.arkkids-edit-toggle-btn:hover{background:#dbeafe;}
.arkkids-edit-toggle-btn.active{background:#2563eb;color:#fff;}

/* ── Hoofdapp ────────────────────────────────────────────────────────────── */
#arkkids-app{text-align:center;min-height:50vh;font-family:sans-serif;}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.arkkids-toolbar{display:flex;justify-content:center;gap:12px;margin:8px 0;flex-wrap:wrap;align-items:center;}
.history-control,.view-control,.search-control{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(0,0,0,.05);border-radius:12px;}
.visits-filter-control{display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(0,0,0,.05);border-radius:12px;}
.ark-checkbtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:14px;user-select:none;padding:4px 10px;border:1.5px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;transition:background .12s,border-color .12s;}
.ark-checkbtn:hover{border-color:#2563eb;}
.ark-checkbtn input{width:18px;height:18px;cursor:pointer;accent-color:#2563eb;}
.ark-checkbtn:has(input:checked){background:#e8f0ff;border-color:#2563eb;}
.history-label{font-size:14px;font-weight:600;}
#history-date{padding:7px 10px;border:1.5px solid #ccc;border-radius:10px;font-size:14px;}
#arkkids-search{padding:8px 14px;border:1.5px solid #ccc;border-radius:10px;font-size:14px;width:200px;}

/* Schakelaar */
.switch{position:relative;display:inline-block;width:52px;height:28px;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.2s;border-radius:999px;}
.slider::before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:#fff;transition:.2s;border-radius:50%;}
.switch input:checked+.slider{background:#2563eb;}
.switch input:checked+.slider::before{transform:translateX(24px);}

/* ── Groepknoppen ────────────────────────────────────────────────────────── */
.group-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0;}
.group-btn{padding:10px 18px;cursor:pointer;font-size:18px;border:2px solid transparent;border-radius:10px;background:#eee;transition:background .15s,border-color .15s;}
.group-btn:hover,.group-btn[aria-selected="true"]{background:#ddd;border-color:#999;}

/* ── Laadindicator ───────────────────────────────────────────────────────── */
.arkkids-spinner{display:flex;justify-content:center;padding:30px;}
.arkkids-spinner-inner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:arkkids-spin .8s linear infinite;}
@keyframes arkkids-spin{to{transform:rotate(360deg);}}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:20px;}

/* ═══════════════════════════════════════════════════════════════════════════
   KAART — basis
   Grootte komt uit CSS-variabelen (gegenereerd door class-frontend.php).
   ═══════════════════════════════════════════════════════════════════════════ */
.card{
    width: var(--ark-tile-width, 150px);
    height: var(--ark-tile-height, auto);
    min-height: 140px;

    border-radius: 15px;
    padding: 0;                      /* foto vult de gehele tegel */
    background: var(--ark-color-off, #3B3B3B88);
    cursor: pointer;
    position: relative;
    overflow: visible;               /* frame-PNG mag buiten de kaart uitsteken */
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    transition: transform .15s, box-shadow .15s, opacity .15s;
    border: 3px solid transparent;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.card:focus-visible{outline:3px solid #2563eb;outline-offset:3px;}
.card:hover{transform:scale(1.04);box-shadow:0 8px 20px rgba(0,0,0,.25);}
.card.aanwezig{background:var(--ark-color-on, #8BC34A);border-color:rgba(255,255,255,.35);}
.card.toggling{opacity:.45;pointer-events:none;}

/* ── card-inner: masker-laag die de achtergrond afknipt ─────────────────────
   De kaart zelf is transparant voor kaarten MET een frame.
   .card-inner bevat de achtergrondkleur + foto en wordt via clip-path
   afgeknipt zodat de achtergrond niet buiten het frame-PNG uitsteekt.
   CSS-variabelen worden per beloningsniveau gegenereerd door class-frontend.php:
     --ark-mask-x-{level}   horizontale inset van elk kant (px)
     --ark-mask-y-{level}   verticale inset van elk kant (px)
     --ark-mask-r-{level}   hoekradius (px)
   ─────────────────────────────────────────────────────────────────────────── */
.card-inner{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--ark-color-off, #3B3B3B88);
    transition: background .2s;
    /* Standaard geen clip (wordt overschreven door reward-klassen) */
    clip-path: none;
    border-radius: inherit;
}
.card.aanwezig .card-inner{
    background: var(--ark-color-on, #8BC34A);
}

/* Per beloningsniveau: clip-path inset op .card-inner */
.card.reward-wood   .card-inner{
    clip-path: inset(
        var(--ark-mask-y-wood,   0px)
        var(--ark-mask-x-wood,   0px)
        var(--ark-mask-y-wood,   0px)
        var(--ark-mask-x-wood,   0px)
        round var(--ark-mask-r-wood,   4px)
    );
}
.card.reward-bronze .card-inner{
    clip-path: inset(
        var(--ark-mask-y-bronze, 0px)
        var(--ark-mask-x-bronze, 0px)
        var(--ark-mask-y-bronze, 0px)
        var(--ark-mask-x-bronze, 0px)
        round var(--ark-mask-r-bronze, 4px)
    );
}
.card.reward-silver .card-inner{
    clip-path: inset(
        var(--ark-mask-y-silver, 0px)
        var(--ark-mask-x-silver, 0px)
        var(--ark-mask-y-silver, 0px)
        var(--ark-mask-x-silver, 0px)
        round var(--ark-mask-r-silver, 4px)
    );
}
.card.reward-gold   .card-inner{
    clip-path: inset(
        var(--ark-mask-y-gold,   0px)
        var(--ark-mask-x-gold,   0px)
        var(--ark-mask-y-gold,   0px)
        var(--ark-mask-x-gold,   0px)
        round var(--ark-mask-r-gold,   4px)
    );
}

/* Kaarten met frame: kaart zelf transparant zodat alleen card-inner zichtbaar is */
.card.reward-wood,
.card.reward-bronze,
.card.reward-silver,
.card.reward-gold{
    background: transparent !important;
    border-color: transparent !important;
}

/* ── Volledige foto als achtergrond (binnen card-inner) ─────────────────────*/
.card-bg-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    z-index: 0;
    filter: brightness(.75) saturate(.85);
    transition: filter .2s;
}
.card.aanwezig .card-bg-photo{
    filter: brightness(1) saturate(1);
}

/* ── Kaart-inhoud over de foto ───────────────────────────────────────────── */
.card-content{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-height: inherit;
    padding: 10px 8px 8px;
}

/* Avatar (emoji / geen foto) */
.avatar{
    font-size: 40px;
    line-height: 1;
    margin-bottom: 6px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* ── Naam: witte tekst met zwarte omlijning ──────────────────────────────── */
.card-name{
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0    0   4px rgba(0,0,0,.6);
    text-align: center;
    line-height: 1.3;
    padding: 0 4px;
    word-break: break-word;
}

/* ── Status + teller balk onderaan ──────────────────────────────────────── */
.card-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    gap: 4px;
}
.statusline{
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.8);
}
.counter{
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,.35);
    color: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

/* ── Verjaardag badges ───────────────────────────────────────────────────── */
.card.birthday-today::after{content:"🎉";position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:var(--ark-birthday-size,24px);z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.card.birthday-soon::after{content:"🎂";position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:var(--ark-birthday-size,24px);z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}

/* ── Bewerkknop op kaart ─────────────────────────────────────────────────── */
.card-edit-btn{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,.9);
    border: 1.5px solid #ccc;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    color: #000;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    z-index: 10;
    transition: transform .1s;
}
.card-edit-btn:hover{transform:scale(1.15);background:#fff;border-color:#2563eb;}

/* ── Allergie-symbolen (linksboven op de tegel) ──────────────────────────── */
.card-allergies{
    position:absolute;
    top:6px;
    left:6px;
    display:flex;
    flex-direction:row;
    gap:3px;
    z-index:6;
    pointer-events:none;
    max-width:70%;
    flex-wrap:wrap;
}
.card-allergy{
    font-size:var(--ark-allergy-size,17px);
    line-height:1;
    background:rgba(255,255,255,.92);
    border-radius:50%;
    width:calc(var(--ark-allergy-size,17px) + 9px);
    height:calc(var(--ark-allergy-size,17px) + 9px);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    pointer-events:auto;
    cursor:help;
}

/* ── Bijzonderheden: oplet-symbool (rechtsonder) ─────────────────────────── */
.card-special-marker{
    position:absolute;
    bottom:6px;
    right:6px;
    font-size:20px;
    line-height:1;
    z-index:6;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
    pointer-events:none;
}

/* ── Bijzonderheden: inzien-knop (alleen in bewerkmodus) ─────────────────── */
.card-special-btn{
    position:absolute;
    top:6px;
    right:36px; /* links van de bewerkknop */
    width:26px;
    height:26px;
    background:rgba(255,255,255,.9);
    border:1.5px solid #ccc;
    border-radius:50%;
    font-size:12px;
    cursor:pointer;
    color:#000;
    display:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    z-index:10;
    transition:transform .1s;
}
.card-special-btn:hover{transform:scale(1.15);background:#fff;border-color:#b45309;}

/* Frames krijgen voorrang qua z-index: badges erboven houden */
.card[class*="reward-"] .card-allergies,
.card[class*="reward-"] .card-special-marker{ z-index:6; }
.card[class*="reward-"] .card-special-btn{ z-index:10; }

/* Lijstweergave: badges compacter en in-flow vriendelijk */
#children.list-view .card-allergies{position:static;flex-wrap:nowrap;margin-right:4px;}
#children.list-view .card-special-marker{position:static;margin-left:4px;}

/* ── Bijzonderheden-modal tekst ──────────────────────────────────────────── */
.ark-special-text{
    white-space:pre-wrap;
    word-break:break-word;
    background:#f7f7f9;
    border:1px solid #e0e0e6;
    border-radius:10px;
    padding:14px 16px;
    font-size:15px;
    line-height:1.6;
    color:#222;
    max-height:50vh;
    overflow:auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BELONINGSFRAMES — afmetingen via CSS-variabelen
   ═══════════════════════════════════════════════════════════════════════════ */
.card.reward-wood::before,
.card.reward-bronze::before,
.card.reward-silver::before,
.card.reward-gold::before{
    content:"";
    position: absolute;
    pointer-events: none;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.card.reward-wood::before{
    inset: var(--ark-frame-wood-inset-y,-10px) var(--ark-frame-wood-inset-x,-10px);
    background-image: url('../img/woodframe.png');
}
.card.reward-bronze::before{
    inset: var(--ark-frame-bronze-inset-y,-10px) var(--ark-frame-bronze-inset-x,-10px);
    background-image: url('../img/bronzeframe.png');
}
.card.reward-silver::before{
    inset: var(--ark-frame-silver-inset-y,-10px) var(--ark-frame-silver-inset-x,-10px);
    background-image: url('../img/silverframe.png');
}
.card.reward-gold::before{
    inset: var(--ark-frame-gold-inset-y,-10px) var(--ark-frame-gold-inset-x,-10px);
    background-image: url('../img/goldframe.png');
}
/* Zorg dat kaart-inhoud boven het frame staat */
.card[class*="reward-"] .card-content,
.card[class*="reward-"] .card-edit-btn{ z-index:4; }
/* Extra padding zodat naam niet achter frame valt */
.card[class*="reward-"] .card-content{ padding-bottom:14px; }

/* ── Lijstweergave ───────────────────────────────────────────────────────── */
#children.list-view{flex-direction:column;align-items:stretch;max-width:420px;margin-left:auto;margin-right:auto;}
#children.list-view .card{width:100%;height:auto !important;min-height:unset;display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;overflow:hidden;}
#children.list-view .card-bg-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;position:relative;flex-shrink:0;inset:auto;filter:none;}
#children.list-view .avatar{font-size:32px;min-height:unset;flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;margin:0;}
#children.list-view .card-content{flex:1;min-height:unset;padding:0;flex-direction:row;align-items:center;justify-content:space-between;height:auto;}
#children.list-view .card-name{font-size:14px;flex:1;text-align:left;}
#children.list-view .card-bottom{flex-direction:row;width:auto;margin-top:0;gap:6px;}

/* ── Portretmodus ────────────────────────────────────────────────────────── */
.arkkids-portrait-mode .card .card-content{display:none !important;}
.arkkids-portrait-mode .card{padding:0;aspect-ratio:1/1;min-height:unset;}
.arkkids-portrait-mode .card .card-bg-photo{filter:none;}
.arkkids-portrait-mode .card .avatar{font-size:64px;flex:1;width:100%;height:100%;}

/* ── Overlay + Bewerk-modal ──────────────────────────────────────────────── */
#modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.55);z-index:900;}
#arkkids-edit-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;display:none;align-items:stretch;width:min(480px,96vw);max-height:90vh;}
#arkkids-special-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;display:none;align-items:stretch;width:min(480px,96vw);max-height:90vh;}
.ark-modal-inner{background:#fff;border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.25);padding:24px 28px;overflow-y:auto;width:100%;font-family:sans-serif;}
.ark-modal-inner h3{margin:0 0 16px;font-size:18px;color:#1d2327;}
.ark-modal-section{margin-bottom:20px;}
.ark-photo-preview-wrap{display:flex;justify-content:center;margin-bottom:14px;}
.ark-photo-preview{width:90px;height:90px;border-radius:50%;border:3px solid #e5e7eb;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f9fafb;font-size:48px;}
.ark-photo-preview img{width:100%;height:100%;object-fit:cover;}
.ark-preview-emoji{font-size:52px;line-height:1;}
.ark-photo-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;}
.arkkids-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;}
.arkkids-btn-secondary{background:#f3f4f6;color:#374151;border:1.5px solid #ddd;}
.arkkids-btn-secondary:hover{background:#e5e7eb;}
.arkkids-btn-danger{background:#fee2e2;color:#b91c1c;border:1.5px solid #fca5a5;}
.arkkids-btn-danger:hover{background:#fca5a5;}
.ark-modal-hint{font-size:12px;color:#888;margin:6px 0 0;text-align:center;}
.ark-progress-bar{background:#e5e7eb;border-radius:999px;height:8px;margin:10px 0 4px;overflow:hidden;}
.ark-progress-fill{height:100%;background:#2563eb;border-radius:999px;transition:width .3s;width:0%;}
#ark-upload-status{font-size:13px;color:#555;}
#ark-emoji-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-height:180px;overflow-y:auto;padding:8px;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb;}
.ark-emoji-opt{font-size:28px;cursor:pointer;padding:4px;border-radius:8px;transition:transform .1s,background .1s;display:inline-block;line-height:1;}
.ark-emoji-opt:hover,.ark-emoji-opt:focus{transform:scale(1.25);background:#e0e7ff;outline:none;}

/* ── Invoer (nieuw kind) ─────────────────────────────────────────────────── */
.ark-input{max-width:420px;margin:auto;text-align:center;font-family:sans-serif;background:#f9f9f9;padding:20px;border-radius:15px;}
.ark-input input,.ark-input select{width:90%;margin:8px 0;padding:12px;border:1.5px solid #ccc;border-radius:8px;font-size:15px;}
.ark-input button{background:#2563eb;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:700;margin-top:10px;}

/* ── Leiding vandaag — knop + vaste sectie + tegel in hoofdoverzicht ─────── */

.arkkids-header-actions{
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.arkkids-leaders-btn{
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}
.arkkids-leaders-btn:hover{ background:#fde68a; }
.arkkids-leaders-btn.active{ background:#d97706; color:#fff; }

/* Leiding-tegel in het hoofdoverzicht — gemengd tussen de kindertegels,
   herkenbaar aan een oranje rand. */
.ark-leader-card{
    border: 3px solid #d97706 !important;
}
.ark-leader-card .card-name{
    font-weight: 700;
}
.ark-leader-card .statusline{
    font-weight: 700;
}
.ark-leader-card.toggling{
    opacity: .5;
    pointer-events: none;
}

/* Vaste sectie boven het grid — GEEN position:fixed, GEEN z-index, GEEN
   overlay. Staat gewoon in de normale paginaflow, dus geen enkel risico
   op een onzichtbaar/onklikbaar element zoals bij het eerdere modal-systeem. */
.ark-leaders-section{
    background: #fffbeb;
    border: 2px solid #fde68a;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 10px 0;
}
.ark-leaders-section-hint{
    margin: 0 0 12px;
    font-size: 13px;
    color: #92400e;
    text-align: center;
}
.ark-leaders-inline-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.ark-leader-inline-tile{
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.ark-leader-inline-tile:hover{
    border-color: #d97706;
    background: #fffbeb;
}
.ark-leader-inline-tile.selected{
    background: #fef3c7;
    border-color: #d97706;
    box-shadow: 0 0 0 2px rgba(217,119,6,.25);
}
.ark-leader-inline-tile:focus-visible{
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.ark-leader-inline-tile:disabled{
    opacity: .5;
    cursor: wait;
}
.ark-leader-inline-avatar{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 26px;
}
.ark-leader-inline-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ark-leader-inline-name{
    font-size: 12.5px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.25;
}
.ark-leader-inline-check{
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 480px){
    .ark-leaders-inline-grid{ grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}