/* Статья «Чемодан на работу в Дубай» — интерактивный список. */

.art-alarm.is-blue{background:#e8f2ff;color:#0a66d1}
.art-alarm.is-blue i{background:#1f7ff2;animation-name:art-pulse-blue}
@keyframes art-pulse-blue{0%{box-shadow:0 0 0 0 rgba(31,127,242,.45)}100%{box-shadow:0 0 0 10px rgba(31,127,242,0)}}

/* ---------- обложка ---------- */

.suit-hero{position:relative;display:grid;place-items:center;min-height:360px;padding:24px 12px;border-radius:34px;background:linear-gradient(160deg,#eaf3ff,#f7f8fa)}
.suit-stage{position:relative;width:min(260px,100%);height:300px}
.suit-case{position:absolute;left:50%;bottom:28px;display:grid;place-items:center;width:170px;height:170px;margin-left:-85px;border-radius:50%;background:#1f7ff2;color:#fff;font-size:96px;box-shadow:0 0 0 12px #fff,0 26px 50px rgba(31,127,242,.35);animation:suit-bump 4s ease-in-out infinite}
.suit-shadow{position:absolute;left:50%;bottom:6px;width:140px;height:14px;margin-left:-70px;border-radius:50%;background:rgba(20,40,80,.12);filter:blur(4px)}
.suit-item{position:absolute;left:50%;top:0;display:grid;place-items:center;width:58px;height:58px;margin-left:-29px;border-radius:50%;background:#fff;font-size:28px;box-shadow:0 10px 24px rgba(33,44,62,.14);opacity:0;animation:suit-drop 4s cubic-bezier(.5,0,.75,0) infinite}
.suit-item.is-a{color:#1782e8;--x:-70px}
.suit-item.is-b{color:#c78912;--x:62px;animation-delay:1s}
.suit-item.is-c{color:#ec4775;--x:-40px;animation-delay:2s}
.suit-item.is-d{color:#9b50df;--x:48px;animation-delay:3s}
@keyframes suit-drop{0%{opacity:0;transform:translate(var(--x),0) scale(.8) rotate(-12deg)}12%{opacity:1;transform:translate(calc(var(--x) * .9),10px) scale(1) rotate(0)}58%{opacity:1;transform:translate(0,150px) scale(.7)}66%,100%{opacity:0;transform:translate(0,170px) scale(.4)}}
@keyframes suit-bump{0%,14%,40%,64%,90%,100%{transform:scale(1)}20%,46%,70%,96%{transform:scale(1.05,.96)}}
.suit-meter{position:absolute;right:clamp(12px,3vw,32px);top:clamp(12px,3vw,32px);display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:#fff;box-shadow:0 18px 40px rgba(33,44,62,.14)}
.suit-meter svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);transform:rotate(-90deg)}
.suit-meter circle{fill:none;stroke:#e9ecf1;stroke-width:10}
.suit-meter .is-fill{stroke:#1f7ff2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0));transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1),stroke .3s ease}
.suit-meter.is-done .is-fill{stroke:#1f9b64}
.suit-meter div{position:relative;display:grid;text-align:center}
.suit-meter strong{font-size:28px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.suit-meter small{color:var(--muted);font-size:12px}

/* ---------- список ---------- */

.suit-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.suit-top .art-text-sm{margin-top:8px}
.suit-filter{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface)}
.suit-filter button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.suit-filter button[aria-pressed='true']{background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(33,44,62,.1)}

.suit-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px;align-items:start}
.suit-group{padding:clamp(16px,2.4vw,24px);border-radius:30px;background:var(--surface)}
.suit-group>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:12px}
.suit-group>header>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:23px}
.suit-group.tone-blue>header>span{background:#dceeff;color:#1782e8}
.suit-group.tone-green>header>span{background:#dff5e9;color:#1f9b64}
.suit-group.tone-pink>header>span{background:#ffdfe8;color:#ec4775}
.suit-group.tone-gold>header>span{background:#fff0c8;color:#c78912}
.suit-group.tone-violet>header>span{background:#eee1ff;color:#9b50df}
.suit-group h3{font-size:20px}
.suit-group header small{color:var(--muted);font-size:13px}
.suit-group header b{padding:5px 10px;border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.suit-group header b.is-full{background:#1f9b64;color:#fff}
.suit-group ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.suit-group li[hidden]{display:none}
.suit-group label{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:18px;background:#fff;cursor:pointer;transition:background .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.suit-group label:hover{transform:translateY(-1px)}
.suit-group input{position:absolute;opacity:0;pointer-events:none}
.suit-box{position:relative;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:9px;border:2px solid #c9ced6;transition:background .25s ease,border-color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.suit-box:after{content:'';width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.suit-group input:checked+.suit-box{background:#1f9b64;border-color:#1f9b64;transform:scale(1.08)}
.suit-group input:checked+.suit-box:after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.suit-group input:focus-visible+.suit-box{outline:2px solid #0071E3;outline-offset:3px}
.suit-group label strong{display:block;font-size:15px;line-height:1.3;transition:color .25s ease}
.suit-group label small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.45}
.suit-group input:checked~span strong{color:#6e6e73;text-decoration:line-through;text-decoration-color:rgba(29,29,31,.35)}
.suit-group li[data-where='cabin'] label strong:after{content:'ручная кладь';display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:#eaf3ff;color:#0a66d1;font-size:11px;font-weight:700;vertical-align:2px;text-decoration:none}

.suit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.suit-actions .art-text-sm{margin:0}

/* ---------- нельзя ---------- */

.suit-no__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
.suit-no__grid article{padding:20px;border-radius:24px;background:#fff0f0}
.suit-no__grid span{position:relative;display:grid;place-items:center;width:50px;height:50px;margin-bottom:14px;border-radius:50%;background:#fff;color:#e5484d;font-size:24px}
.suit-no__grid span:after{content:'';position:absolute;width:62%;height:3px;border-radius:9px;background:#e5484d;transform:rotate(-45deg)}
.suit-no__grid strong{display:block;font-size:17px;line-height:1.25;color:#7a1d20}
.suit-no__grid p{margin:6px 0 0;color:#8c3a3d;font-size:14px;line-height:1.45}

@media (max-width:900px){
  .suit-groups{grid-template-columns:1fr}
  .suit-no__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .suit-filter{width:100%}
  .suit-filter button{flex:1;justify-content:center;padding:0 8px;font-size:13px}
  .suit-no__grid{grid-template-columns:1fr}
  .suit-meter{width:104px;height:104px}
  .suit-meter strong{font-size:23px}
  .suit-hero{min-height:300px}
  .suit-stage{transform:scale(.85)}
}
@media (prefers-reduced-motion:reduce){
  .suit-case,.suit-item{animation:none}
  .suit-item{opacity:1;transform:translate(var(--x),20px)}
}

/* ---------- кружок сбора, который едет с человеком ---------- */

/* Белый кружок с чемоданчиком — как значки сайта. Чемоданчик наполняется
   синим снизу вверх, будто песок в нижней колбе песочных часов. Нажатие
   показывает проценты на пару секунд, потом чемоданчик возвращается. */
.suit-float{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 8px);z-index:40;display:grid;place-items:center;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 1px rgba(33,44,62,.06),0 14px 34px rgba(33,44,62,.2);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility .35s}
.suit-float.is-shown{opacity:1;visibility:visible;transform:none}
.suit-float>*{grid-area:1/1;transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.suit-float__disc{display:grid;place-items:center;width:46px;height:46px}
.suit-float__glyph{width:100%;height:100%;overflow:visible}
.suit-float__base{fill:#dbe7f7}
.suit-float__fill{fill:#1f7ff2;transform:translateY(calc((100 - var(--p,0)) * 1%));transition:transform .7s cubic-bezier(.16,1,.3,1),fill .4s ease}
.suit-float__percent{color:#1f7ff2;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;opacity:0;transform:scale(.8)}
.suit-float.is-telling .suit-float__disc{opacity:0;transform:scale(.8)}
.suit-float.is-telling .suit-float__percent{opacity:1;transform:none}
.suit-float.is-done .suit-float__fill{fill:#1f9b64}
.suit-float.is-done .suit-float__base{fill:#d8f0e3}
.suit-float.is-done .suit-float__percent{color:#15754b}
.suit-float:focus-visible{outline:2px solid #0071E3;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.suit-float,.suit-float>*,.suit-float__fill{transition:none}}
@media (min-width:1100px){.suit-float{width:88px;height:88px;right:max(24px,env(safe-area-inset-right));bottom:24px}.suit-float__disc{width:54px;height:54px}.suit-float__percent{font-size:22px}}