/* Who's playing, the grown-up page, and the check.
   Loaded last, so equal-specificity rules win without editing index.html. */

/* ==================================================== who's playing ==== */
#scWho{justify-content:center;gap:18px;
  background:radial-gradient(120% 80% at 50% 22%,#FFF8EC,#FFEFD6 62%,#FFE3BE)}
.who-title{font-size:clamp(26px,7.4vw,40px);margin:0 0 4px;color:var(--ink)}
.who-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  align-items:flex-start;max-width:560px;width:100%}
.who{border:0;background:linear-gradient(180deg,#fff,#FFF6E9);cursor:pointer;
  border-radius:26px;padding:12px 12px 13px;width:clamp(112px,31vw,150px);
  display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;
  position:relative;isolation:isolate;box-shadow:var(--lift-2),var(--gloss);
  transition:transform .16s var(--spring);-webkit-tap-highlight-color:transparent}
.who::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;
  background:linear-gradient(140deg,var(--sun),var(--berry));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.who.is-on::before{background:linear-gradient(140deg,var(--leaf),var(--teal))}
.who:active{transform:translateY(4px) scale(.97)}
.who-face{width:100%;display:block;line-height:0}
.who-face svg{width:100%;height:auto;display:block}
.who b{font-weight:800;font-size:clamp(15px,4.2vw,19px);color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who i{font-style:normal;font-size:clamp(11px,3vw,13px);color:var(--ink-soft)}
.who-add{border:0;background:rgba(255,255,255,.72);cursor:pointer;font:inherit;
  font-size:clamp(14px,3.8vw,17px);color:var(--ink-soft);padding:12px 22px;
  border-radius:22px;box-shadow:var(--lift-1);display:inline-flex;align-items:center;gap:8px}
.who-add span{font-size:1.3em;line-height:.7;color:var(--honey);font-weight:800}
.who-add:active{transform:translateY(2px)}

/* ====================================================== grown-ups ====== */
#scSetup{justify-content:flex-start;gap:0;background:linear-gradient(180deg,#FFF8EC,#FBF0DE)}
.set-wrap{width:100%;max-width:560px;flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px;padding-top:4px}
/* .back is absolutely positioned top-left and was sitting on the title */
.set-h{margin:34px 0 2px;font-size:clamp(20px,5.4vw,26px);color:var(--ink);text-align:center}
.set-card{background:#fff;border-radius:22px;padding:13px 15px 15px;
  box-shadow:var(--lift-1),var(--gloss);text-align:left}
.set-card h3{margin:0 0 7px;font-size:clamp(14px,3.9vw,17px);color:var(--ink)}
.set-note{margin:0 0 9px;font:600 clamp(11.5px,3.2vw,13.5px)/1.42 var(--font);color:var(--ink-soft)}

.set-modes{display:flex;flex-direction:column;gap:8px}
.set-mode{border:0;cursor:pointer;font:inherit;text-align:left;border-radius:17px;
  padding:11px 13px;background:#FBF5EA;box-shadow:inset 0 0 0 2.5px rgba(160,140,110,.22);
  display:flex;flex-direction:column;gap:3px;transition:box-shadow .15s,background .15s}
.set-mode b{font-weight:800;font-size:clamp(14px,3.9vw,16px);color:var(--ink)}
.set-mode i{font-style:normal;font-size:clamp(11.5px,3.2vw,13px);color:var(--ink-soft);line-height:1.4}
.set-mode.on{background:#F2FBF0;box-shadow:inset 0 0 0 3px var(--leaf)}
.set-mode.on b::after{content:' ✓';color:var(--leaf)}

.set-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.set-l{position:relative;aspect-ratio:1;border:0;border-radius:13px;cursor:pointer;
  font:inherit;font-weight:800;font-size:clamp(15px,4.2vw,19px);color:var(--ink-soft);
  background:#FBF5EA;box-shadow:inset 0 0 0 2.5px rgba(160,140,110,.2);
  transition:transform .18s var(--spring)}
.set-l:active{transform:scale(.9)}
.set-l.pick{background:#FFF3D6;color:var(--ink);box-shadow:inset 0 0 0 3px var(--sun)}
.set-l.done{color:var(--ink)}
.set-tick{position:absolute;right:2px;bottom:0;font-size:10px;color:var(--leaf);font-weight:800}
.set-clear{margin-top:10px;border:0;cursor:pointer;font:inherit;
  font-size:clamp(12.5px,3.4vw,14.5px);color:var(--deep);background:#EDF6FB;
  padding:10px 15px;border-radius:15px;box-shadow:inset 0 0 0 2px rgba(31,94,138,.16)}
.set-clear:active{transform:translateY(2px)}

.set-people{display:flex;flex-direction:column;gap:8px}
.set-person{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:16px;
  background:#FBF5EA;box-shadow:inset 0 0 0 2.5px rgba(160,140,110,.2)}
.set-person.on{background:#F2FBF0;box-shadow:inset 0 0 0 3px var(--leaf)}
.sp-face{width:38px;flex:none;line-height:0}
.sp-face svg{width:100%;height:auto;display:block}
.set-person b{flex:1;font-weight:800;font-size:clamp(13.5px,3.7vw,16px);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-btn{border:0;cursor:pointer;font:inherit;font-size:11.5px;padding:7px 11px;
  border-radius:12px;background:#fff;color:var(--deep);box-shadow:var(--lift-1);flex:none}
.sp-btn:disabled{opacity:.5;box-shadow:none;background:transparent;color:var(--ink-soft)}
.sp-del{color:#C2564A;background:#FFF1EE}

/* ================================================== can you find it ==== */
/* Deliberately not a game. No header letter, no pinned tag, no story to lean
   on — every one of those is scaffolding, and scaffolding is exactly what
   invalidates the measurement. */
#scCheck{justify-content:center;gap:16px;
  background:radial-gradient(120% 78% at 50% 26%,#F4FBFF,#E4F3FC 58%,#D6EBF7)}
.ck-top{display:flex;flex-direction:column;align-items:center;gap:9px}
.ck-ask{margin:0;font:800 clamp(18px,5vw,26px)/1.15 var(--font);color:var(--ink);text-align:center}
.ck-stars{display:flex;gap:9px}
.ck-star{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 3px rgba(120,150,170,.32);transition:transform .3s var(--spring)}
.ck-star.lit{background:var(--leaf);box-shadow:inset 0 0 0 3px #4E9E4C;transform:scale(1.14)}
.ck-star.miss{background:#E9DED0;box-shadow:inset 0 0 0 3px rgba(160,140,110,.3)}

.ck-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  align-items:center;width:100%;max-width:min(340px,84vw)}
.ck-t{width:clamp(76px,23vw,100px);aspect-ratio:1;border:0;border-radius:24px;cursor:pointer;
  font:inherit;font-weight:800;font-size:clamp(38px,12vw,54px);color:var(--ink);
  background:linear-gradient(180deg,#fff,#F3F9FD);
  box-shadow:var(--lift-2),var(--gloss);
  transition:transform .16s var(--spring),box-shadow .16s;-webkit-tap-highlight-color:transparent}
.ck-t:active{transform:translateY(4px) scale(.96)}
.ck-t.yes{background:linear-gradient(180deg,#E6FAE2,#C7F0BE);
  box-shadow:inset 0 0 0 4px var(--leaf),var(--lift-1);animation:ckYes .6s var(--spring)}
@keyframes ckYes{0%{transform:scale(1)}45%{transform:scale(1.22) rotate(-4deg)}100%{transform:scale(1)}}
.ck-t.no{background:linear-gradient(180deg,#FFF0EE,#FBDDD8);color:#B0705F;
  animation:ckNo .5s ease-out}
@keyframes ckNo{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}
                45%{transform:translateX(7px)}70%{transform:translateX(-4px)}}
.ck-t.show{box-shadow:inset 0 0 0 4px var(--sun),var(--lift-1);animation:ckShow 1.1s var(--spring)}
@keyframes ckShow{0%,100%{transform:scale(1)}40%{transform:scale(1.16)}}
.ck-again{border:0;background:rgba(255,255,255,.8);cursor:pointer;font:inherit;
  font-size:clamp(12.5px,3.4vw,15px);color:var(--deep);padding:10px 20px;border-radius:18px;
  box-shadow:var(--lift-1)}
.ck-again:active{transform:translateY(2px)}

.ck-grid:has(.ck-win){max-width:520px}
.ck-win{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  animation:gcRise .5s var(--spring) both}
.ck-cup{width:min(38vw,150px)}
.ck-cup svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 10px rgba(120,86,50,.28))}
.ck-win h2{margin:8px 0 0;font:800 clamp(24px,7vw,36px)/1.1 var(--font);color:var(--ink)}
.ck-win p{margin:4px 0 0;font:600 clamp(13px,3.7vw,16px)/1.35 var(--font);color:#7A6353}
.ck-go{margin-top:15px;font:inherit;font-size:clamp(18px,5vw,23px);color:var(--ink);
  padding:13px 38px;--a1:var(--sun);--a2:var(--berry);cursor:pointer}
.ck-win.soon h2{color:#8A6A44}

/* a gold ring in the manual picker on the letters that were genuinely checked,
   so a grown-up can see at a glance what is real and what is still assumed */
.pk.checked{box-shadow:inset 0 0 0 3px var(--sun),var(--lift-1)}
.pk.checked .pk-l{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .ck-t,.ck-star,.who{transition:none}
  .ck-t.yes,.ck-t.no,.ck-t.show,.ck-win{animation:none}
}

/* ================================================= the grown-up gate ==== */
/* index.html declares #gateBtn TWICE. The second rule re-declares `position`,
   which threw away `position:fixed` AND `z-index:22` from the first — so the
   button was laid out in normal flow and rendered at y:-8, off the top of the
   screen. It has been unreachable, which is the whole reason the mode toggle
   could not be found. Restated here rather than fixed there, because
   index.html is shared with another session.
   It also now sits ABOVE the cast band, so it is not lying on Mo's feet. */
#gateBtn{
  position:fixed; z-index:22;
  /* bottom CENTRE: Mo stands bottom-left and Pip bottom-right, and the
     dressing-up box ends wherever its contents end, so the only strip that is
     reliably free at every screen height is between the two of them */
  left:50%; transform:translateX(-50%);
  bottom:calc(var(--pad-bot) + 12px);
  overflow:hidden; isolation:isolate;
  opacity:1; font-size:12px; padding:9px 14px 9px 31px;
  border-radius:18px; background:rgba(255,255,255,.94); color:var(--ink-soft);
  box-shadow:var(--lift-1),var(--gloss);
}
/* a padlock, drawn in a ::before so app.js resetting textContent cannot wipe it */
#gateBtn::before{
  content:''; position:absolute; left:10px; top:50%; width:14px; height:14px;
  transform:translateY(-50%); pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A6353'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* index.html's own .holding and .nudge rules set `transform`, which would drop
   the centring translate — both are restated with it kept */
#gateBtn.holding{transform:translateX(-50%) scale(1.1)}
#gateBtn.nudge{animation:gateNudgeMid .5s var(--spring)}
@keyframes gateNudgeMid{0%,100%{transform:translateX(-50%) scale(1)}
                        40%{transform:translateX(-50%) scale(1.14)}}
#gateBtn.holding::before{filter:brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(900%) hue-rotate(347deg)}

/* ==================================================== the way out ======= */
.wayout-btn{
  position:fixed; top:calc(var(--pad-top) + 10px); left:10px; z-index:24;
  width:52px; height:52px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(180deg,#fff,#FFF4E3); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--lift-1),var(--gloss);
  transition:transform .16s var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.wayout-btn .wo-home{width:25px;height:25px;position:relative;z-index:2;display:block}
.wayout-btn .wo-ring{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);pointer-events:none;overflow:visible}
.wayout-btn .wo-ring circle{
  fill:none;stroke:var(--sun);stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:148;stroke-dashoffset:148}
/* 750ms — long enough that a stray tap does nothing, short enough that a
   three-year-old who means it still gets out */
.wayout-btn.holding .wo-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset .75s linear}
.wayout-btn.holding{transform:scale(1.07)}
.wayout-btn .wo-tip{
  position:absolute;left:58px;top:50%;transform:translateY(-50%) scale(.82);
  white-space:nowrap;font:700 12px/1 var(--font);color:var(--ink-soft);
  background:rgba(255,255,255,.96);padding:8px 12px;border-radius:13px;
  box-shadow:var(--lift-1);opacity:0;pointer-events:none;
  transition:opacity .18s ease-out,transform .18s var(--spring)}
.wayout-btn.nudge .wo-tip{opacity:1;transform:translateY(-50%) scale(1)}
.wayout-btn.nudge{animation:woNudge .5s var(--spring)}
@keyframes woNudge{0%,100%{transform:scale(1)}45%{transform:scale(1.13)}}

/* the meet screen already has "skip" top-right; the way out is top-left, so
   they never collide */
#scMeet .wayout-btn,#scWorld .wayout-btn,#scCheck .wayout-btn{z-index:24}

@media (prefers-reduced-motion:reduce){
  .wayout-btn,.wayout-btn .wo-tip{transition:none}
  .wayout-btn.nudge{animation:none}
}

/* .back is a 46px CIRCLE, but five of these buttons still carry the old wording
   — "← Home", "← Letters", "← Back" — and the words spilled straight out of the
   circle and sat on top of the page title. They size to their text now. The
   game's own exit is not affected: it is a .wayout-btn and takes its size from
   the rule above. */
.back{width:auto;min-width:46px;padding:0 15px;border-radius:24px;
  font-size:clamp(13px,3.6vw,15px);font-weight:800;white-space:nowrap}

/* the one a grown-up keeps hunting for — full width, and it reads as the
   primary action of its card rather than a footnote */
.set-big{width:100%;margin-top:2px;font-weight:800;
  font-size:clamp(14px,3.9vw,16.5px);padding:13px 16px;
  background:#FFF3D6;color:#7A5A12;box-shadow:inset 0 0 0 2.5px var(--sun)}

/* ================================================ the convention ======= */
/* A house at the top RIGHT on every screen that is not home. Back at the top
   LEFT wherever there is a step to go back to. Nothing else lives in either
   corner, because a position that sometimes means "back" and sometimes means
   "switch rooms" is worse than no button at all — which is what the barn had:
   a pill at the top right labelled "back" that went to Mo's room. */
.wayout-btn{left:auto;right:10px}
.wayout-btn .wo-tip{left:auto;right:58px}
.wayout-btn.is-tap .wo-ring{display:none}

.nav-back{position:fixed;top:calc(var(--pad-top) + 10px);left:10px;z-index:24;
  width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#fff,#FFF4E3);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--lift-1),var(--gloss);
  transition:transform .16s var(--spring);-webkit-tap-highlight-color:transparent}
.nav-back svg{width:27px;height:27px;display:block}
.nav-back:active{transform:translateY(3px) scale(.96)}

/* the playroom's two shortcuts are destinations, not navigation, so they move
   out of both corners and sit between them */
.waysout{left:70px;right:70px;justify-content:center;gap:9px}

/* skip is a story control; it was squatting in the top right */
#meetSkip{top:auto;right:auto;left:50%;bottom:calc(var(--pad-bot) + 12px);
  transform:translateX(-50%)}
#meetSkip:active{transform:translateX(-50%) scale(.94)}

/* ---------------------------------------------- the barn and the house */
/* One corner toggle that named the room you were NOT in is a riddle. Two
   buttons, both visible, the one you are in lit — and each with its building
   drawn on it, so it works with the words covered up. */
.room-tabs{position:absolute;left:0;right:0;bottom:calc(var(--pad-bot) + 9px);
  z-index:23;display:flex;justify-content:center;gap:10px;padding:0 10px}
.room-tab{border:0;cursor:pointer;font:inherit;display:flex;align-items:center;gap:7px;
  padding:8px 15px 8px 11px;border-radius:20px;
  background:rgba(255,248,236,.7);color:rgba(122,90,58,.8);
  font-weight:800;font-size:clamp(12px,3.3vw,14px);
  box-shadow:0 3px 8px rgba(40,20,10,.22);
  transition:transform .16s var(--spring),background .2s,color .2s}
.room-tab svg{width:26px;height:auto;display:block;flex:none;opacity:.55}
.room-tab.on{background:#FFF8EC;color:var(--ink);
  box-shadow:0 4px 0 rgba(120,72,18,.35),0 8px 16px rgba(40,20,10,.28)}
.room-tab.on svg{opacity:1}
.room-tab:active{transform:translateY(2px) scale(.97)}
/* the barn's own hint line lives at the bottom, so the tabs go above it */
.room-tabs{bottom:calc(var(--pad-bot) + 40px)}
#barnHint{z-index:1}

/* see one without playing four games to get to it */
.set-breathers{display:flex;flex-direction:column;gap:8px}
.set-breath{border:0;cursor:pointer;font:inherit;text-align:left;border-radius:16px;
  padding:11px 13px;background:#FFF3D6;box-shadow:inset 0 0 0 2.5px rgba(255,206,61,.6);
  display:flex;flex-direction:column;gap:2px;
  transition:transform .16s var(--spring)}
.set-breath b{font-weight:800;font-size:clamp(13.5px,3.8vw,16px);color:var(--ink)}
.set-breath i{font-style:normal;font-size:clamp(11.5px,3.2vw,13px);color:var(--ink-soft)}
.set-breath:active{transform:translateY(2px) scale(.99)}

/* ------------------------------------------------------------ sound mode
   The header shows a speaker instead of the letter once a letter is being
   asked for by its sound. The letter is still in the DOM underneath — it
   fades in after two wrong taps running (.peek), then hides again. */
#gameBig.ear{display:flex;align-items:center;justify-content:center;position:relative;
  height:1em;width:1.2em;margin:0 auto}
/* AND IT LOOKS LIKE SOMETHING YOU CAN PRESS. Tapping the speaker plays the
   sound again — that is what it is for — but a picture sitting still in a
   header does not read as a button, and the first thing a child does when the
   letter vanishes is nothing. A slow breath, so it invites the tap. */
#gameBig.ear .ear-svg{animation:earBreathe 2.6s ease-in-out infinite}
@keyframes earBreathe{50%{transform:scale(1.09)}}
#gameBig.ear.peek .ear-svg{animation:none}
#gameBig.ear .ear-svg{width:.92em;height:.92em;display:block;
  filter:drop-shadow(0 5px 0 rgba(255,255,255,.9))}
#gameBig.ear .peek-letter{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;opacity:0;transform:scale(.55);pointer-events:none;
  transition:opacity .35s,transform .5s var(--spring)}
#gameBig.ear.peek .peek-letter{opacity:1;transform:scale(1)}
#gameBig.ear.peek .ear-svg{opacity:.1;transition:opacity .35s}
#gameBig.ear.calling .ear-svg .wave{animation:earWave 1.5s ease-out}
#gameBig.ear.calling .ear-svg .w2{animation-delay:.12s}
@keyframes earWave{0%,100%{opacity:1;transform:translateX(0)}
  25%{opacity:.15;transform:translateX(-3px)}55%{opacity:1;transform:translateX(3px)}}
.wanted-tag.ear-tag{padding:4px 7px}
.wanted-tag.ear-tag .ear-tag-svg{width:1.05em;height:1.05em;display:block;margin:0 auto}
#scCheck.by-sound .ck-ask{color:var(--deep)}
.ck-win.sound .ck-cup svg{filter:drop-shadow(0 8px 10px rgba(120,86,50,.28))
  drop-shadow(0 0 16px rgba(110,198,240,.75))}
/* the second ring in the grown-up picker — sky inside the gold — once the
   sound has been checked too */
.pk.checked.sounded{box-shadow:inset 0 0 0 3px var(--sun),inset 0 0 0 6px var(--sky),var(--lift-1)}

/* the clock on Pip's check — it empties, and the question closes on its own */
.ck-clock{position:relative;z-index:2;width:min(60vw,240px);height:8px;border-radius:999px;
  background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 2px rgba(160,140,110,.25);
  overflow:hidden;margin:2px auto 0;opacity:0;transition:opacity .3s}
.ck-clock.run{opacity:1}
.ck-clock i{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#8AD37F,#FFCE3D 70%,#FF9A5C)}
.ck-clock.run i{animation:ckTick var(--t,12s) linear forwards}
@keyframes ckTick{from{width:100%}to{width:0}}
.ck-win ~ .ck-clock,.ck-grid:has(.ck-win) ~ .ck-clock{display:none}
@media (prefers-reduced-motion:reduce){ .ck-clock.run i{animation-duration:var(--t,12s)} }

/* IT WAS THIS ONE — the others step back, the right one comes forward.
   `animation:none` matters: the tiles drop in with `ckDrop ... both`, and a
   filled animation pins transform and opacity for ever, so plain declarations
   here were being ignored and nothing appeared to happen. */
.ck-grid.telling .ck-t.faded{animation:none !important;opacity:.28;transform:scale(.86);filter:saturate(.4)}
.ck-t.faded{transition:opacity .35s,transform .35s var(--spring),filter .35s}
.ck-grid.telling .ck-t.show{transform:scale(1.28) !important;z-index:3;
  box-shadow:inset 0 0 0 5px var(--sun),0 0 0 8px rgba(255,206,61,.4),0 14px 26px rgba(120,86,50,.3);
  animation:ckTell 1.9s var(--spring)}
@keyframes ckTell{0%{transform:scale(1)}25%{transform:scale(1.42) rotate(-3deg)}
  45%{transform:scale(1.22) rotate(2deg)}70%{transform:scale(1.34)}100%{transform:scale(1.28)}}

/* new games to try */
.set-pend{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid rgba(59,42,30,.08)}
.set-pend:first-child{border-top:0}
.set-pend b{flex:1;font-size:clamp(13px,3.7vw,16px);color:var(--ink)}
.set-pend button{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:800;padding:7px 12px;border-radius:14px;background:#FFF3D6;color:var(--ink)}
.set-pend .pend-ok{background:#EEF1F4;color:var(--ink-soft)}
.set-pend.ok .pend-ok{background:#DFF5DB;color:#2E7D32}