.attendance-grid{position:absolute;left:3.6%;right:3%;top:34.3%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:.65cqw;row-gap:2cqw}.attendance-cell{min-width:0;text-align:center}.attendance-card{position:relative;aspect-ratio:148/217;color:#091d50}.attendance-frame{position:absolute;inset:0;width:100%;height:100%}.attendance-card strong{position:absolute;top:7%;left:0;right:0;font:700 2.7cqw/1.1 Georgia,serif}.attendance-item{position:absolute;left:17%;top:28%;width:66%;height:47%;object-fit:contain}.attendance-card b{position:absolute;bottom:8%;left:0;right:0;font:700 2.3cqw/1 Arial,sans-serif}.attendance-status{height:3.4cqw;margin:.65cqw auto 0;display:flex;align-items:center;justify-content:center;color:#b5a396;font:700 2.1cqw/1 sans-serif;white-space:nowrap}.attendance-status.today{background:#dfa022;border-radius:99px;color:white;width:90%}.attendance-cell.is-claimed .attendance-item{filter:grayscale(.7);opacity:.45}.attendance-cell.is-claimed .attendance-card strong,.attendance-cell.is-claimed .attendance-card b{opacity:.45}
.attendance-card strong{top:6%;left:22%;right:22%;height:3.4cqw;display:flex;align-items:center;justify-content:center}
.attendance-cell.is-today .attendance-card strong{background:#dfa022;border-radius:99px;color:#fff}
.attendance-claimed-label{position:absolute;left:0;right:0;top:49%;transform:translateY(-50%);z-index:2;color:#fff;font:700 2.1cqw/1.2 'Malgun Gothic',sans-serif;text-shadow:0 1px 3px #172c46,0 0 4px #172c46;white-space:nowrap}

.attendance-cell.is-today .attendance-card strong{box-sizing:border-box;padding-bottom:.35cqw;line-height:1}

.attendance-cell.is-claimed .attendance-card strong{background:#29425d;border-radius:99px;color:#fff;opacity:1;font:700 2.1cqw/1 'Malgun Gothic',sans-serif;box-sizing:border-box;padding-bottom:.2cqw}

/* All day labels share the same typography and capsule geometry. */
.attendance-card strong,.attendance-cell.is-today .attendance-card strong,.attendance-cell.is-claimed .attendance-card strong{top:6%;left:18%;right:18%;height:3.4cqw;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 0 .2cqw;border-radius:99px;font:700 2.4cqw/1 'Malgun Gothic',sans-serif}

.attendance-cell.is-claimed .attendance-card strong{background:#69798b}

.attendance-cell.is-claimed .attendance-card strong{background:transparent;color:#a39486}

/* Reward-popup item slots replace the attendance frame artwork. */
.attendance-card.bag-slot{aspect-ratio:148/217;overflow:hidden;box-sizing:border-box;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9;border:2px solid #a99a79;border-radius:8px}
.attendance-card.bag-slot.attendance-highlight{border-color:#dba330;background:#f4e5b8}
.attendance-card.bag-slot .attendance-item{left:15.6%;top:23%;width:68.8%;height:50%}
.attendance-card.bag-slot>b{bottom:0;left:0;right:0;height:22%;display:flex;align-items:center;justify-content:center;background:#172c46e8;border-top:1px solid #bd9a58;color:#fff;font:700 2.3cqw/1 Arial,sans-serif;opacity:1}
.attendance-cell.is-claimed .attendance-card strong{background:transparent;color:#867d6e}
.attendance-check{position:absolute;right:5%;top:7%;color:#75816d;font:700 2.4cqw/1 sans-serif}

.attendance-cell:not(.is-claimed) .attendance-card.bag-slot{background:#fff}

.attendance-cell:nth-child(7n) .attendance-card.bag-slot{background:#fff0bd}

.attendance-cell.is-today .attendance-card strong{background:transparent;color:#091d50}
.attendance-cell.is-today .attendance-card.bag-slot{animation:portraitReadyBackground 1.8s ease-in-out .15s infinite;background:#cda850}
@media(prefers-reduced-motion:reduce){.attendance-cell.is-today .attendance-card.bag-slot{animation:none;background:#fff1b2}}

.attendance-card strong,.attendance-cell.is-today .attendance-card strong,.attendance-cell.is-claimed .attendance-card strong{left:10%;right:10%;justify-content:flex-start;text-align:left}

.attendance-card.bag-slot .attendance-item{left:15.6%;top:14%;width:68.8%;height:50%}

.attendance-card.bag-slot .attendance-item{top:calc(14% + .462963cqw)}

/* Distribute four rows between the heading and attendance progress. */
.attendance-grid{top:34.3%;bottom:14%;row-gap:0;align-content:space-between}

.attendance-grid{bottom:auto;row-gap:3cqw;align-content:start}

.attendance-card strong,.attendance-cell.is-today .attendance-card strong,.attendance-cell.is-claimed .attendance-card strong{font-size:2.7cqw;top:4%}

.attendance-card.bag-slot>b.attendance-claimed-amount{font-size:2.1cqw;white-space:nowrap;color:#fff}

.attendance-cell.is-today .attendance-card{cursor:pointer}.attendance-card[role="button"]:focus-visible{outline:2px solid #dba330;outline-offset:2px}