/* Reactions and companion noises (reactions.py, reactions.js). Brand pill family: white, ink outline, round.
   A playing chip turns sun-yellow and hops; with reduced motion it only changes color. */
.rx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The header toggle */
.sound-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px 6px 10px;border:1.5px solid var(--r-ink,#142b46);border-radius:999px;background:#fff;color:var(--r-ink,#142b46);font:650 .88rem/1.1 var(--r-body,'Satoshi',system-ui,sans-serif);cursor:pointer;white-space:nowrap;flex:none}
.sound-toggle:hover{background:var(--r-tint-sun,#fff3c4)}
.sound-toggle:focus-visible{outline:3px solid var(--r-blue,#124dec);outline-offset:3px}
.sound-toggle .npw-icon{width:1.2em;height:1.2em}
.sound-toggle .sound-off-icon,.sound-toggle.is-off .sound-on-icon{display:none}
.sound-toggle.is-off .sound-off-icon{display:inline-block}
.sound-toggle.is-off{background:var(--r-tint-quiet,#f4f7ff)}
.sound-toggle[hidden]{display:none}
/* Wide screens: after the navigation, at the far right. Narrower: beside the sticker star and the Menu button.
   Phones: the icon alone; its words stay as the accessible name. */
@media (min-width:1081px){.site-header .sound-toggle{order:5;margin-left:4px}}
@media (max-width:1080px){
  .site-header .sound-toggle{order:1;margin-left:8px}
  .site-header .brand + .sound-toggle{margin-left:auto}
  .site-header .sound-toggle + .nav-toggle{margin-left:8px!important}
}
@media (max-width:430px){
  /* brand, sticker star, sounds and Menu share one row: a little less space between them */
  .site-header.school-header{column-gap:6px!important}
  .site-header .sound-toggle + .nav-toggle{margin-left:2px!important}
  .site-header .sound-toggle{min-width:44px;min-height:44px;padding:8px;justify-content:center;margin-left:0}
  .site-header .sound-toggle [data-sound-state]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header .sound-toggle .npw-icon{width:24px;height:24px}
}
@media (max-width:380px){
  .site-header.school-header .brand{flex-basis:104px!important}
  .site-header.school-header .restored-wordmark{width:104px!important;height:auto!important}
  .site-header.school-header .nav-toggle{gap:8px!important;padding-inline:14px!important}
}

/* Chips */
#main .rx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
#main .rx-chips li{margin:0;padding:0;max-width:none}
#main .rx-chips li::before,#main .rx-chips li::marker{content:none}
.rx-chip,.rx-react{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:4px 14px 4px 4px;box-sizing:border-box;background:#fff;color:var(--r-ink,#142b46);border:1.5px solid var(--r-ink,#142b46);border-radius:999px;font:650 .92rem/1.2 var(--r-body,'Satoshi',system-ui,sans-serif);text-align:left;cursor:pointer;box-shadow:none;transition:background-color .15s}
.rx-chip:hover,.rx-react:hover{background:var(--r-tint-sun,#fff3c4)}
.rx-chip:focus-visible,.rx-react:focus-visible,.rx-noise:focus-visible{outline:3px solid var(--r-blue,#124dec);outline-offset:3px}
.rx-chip .rx-face{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:var(--r-tint-quiet,#f4f7ff)}
.rx-chip--noise .rx-face{border-radius:0;object-fit:contain;background:none}
.rx-chip.is-playing,.rx-react.is-playing,.rx-noise.is-playing .rx-label{background:var(--r-gold,#ffdc52)}
.rx-chip.is-playing,.rx-react.is-playing{animation:rx-hop .45s cubic-bezier(.3,1.6,.5,1)}
.rx-noise.is-playing img{animation:rx-wiggle .5s ease-in-out}
@keyframes rx-hop{0%{transform:none}40%{transform:translateY(-4px) scale(1.04)}100%{transform:none}}
@keyframes rx-wiggle{0%,100%{rotate:0deg}30%{rotate:-7deg}65%{rotate:6deg}}
@media (prefers-reduced-motion:reduce){.rx-chip.is-playing,.rx-react.is-playing,.rx-noise.is-playing img{animation:none}}
[data-motion=off] .rx-chip.is-playing,[data-motion=off] .rx-react.is-playing,[data-motion=off] .rx-noise.is-playing img{animation:none}

/* A person's reactions */
#main .rx-card{display:grid;gap:12px;padding:16px 18px 18px;background:#fff;border:1.5px solid var(--r-ink,#142b46);border-radius:var(--r-radius,20px);box-shadow:6px 6px 0 var(--card-shadow,var(--r-blue,#124dec));color:var(--r-ink,#142b46)}
#main .rx-who{display:flex;align-items:center;gap:12px;margin:0!important}
#main .rx-who .rx-face{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--r-ink,#142b46)}
#main .rx-who b{display:block;font:700 1.15rem/1.15 var(--r-display,'Clash Display',system-ui,sans-serif)}
#main .rx-who .rx-note{display:block;font-size:.92rem;line-height:1.3;margin-top:2px}
#main .hm-voice-cards .rx-card:nth-child(2){--card-shadow:var(--r-pink,#c2185b)}

/* /world/: everyone's reactions */
#main .rx-board header{max-width:60ch;margin-bottom:var(--r-s5,24px)}
#main .rx-board header p{margin-top:8px!important}
#main .rx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#main .rx-grid .rx-card:nth-child(3n+2){--card-shadow:var(--r-gold,#ffdc52)}
#main .rx-grid .rx-card:nth-child(3n){--card-shadow:var(--r-pink,#c2185b)}
@media (max-width:1000px){#main .rx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#main .rx-grid{grid-template-columns:1fr}}

/* Companion noises: stickers that play (home, /stickers/, the case companion card) */
.rx-noise{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;color:var(--r-ink,#142b46);font:750 .95rem/1.2 var(--r-body,'Satoshi',system-ui,sans-serif);cursor:pointer;text-align:center}
.rx-noise .rx-label{display:inline-block;padding:3px 10px;border-radius:999px;transition:background-color .15s}
.rx-noise [data-rx-caption]{font-weight:600}
.rx-noise:hover .rx-label{background:var(--r-tint-sun,#fff3c4)}
#main#main .hm-companions .rx-noise{width:100%}
#main#main .hm-companions .rx-noise img{width:100%;max-width:120px;height:auto;aspect-ratio:1;object-fit:contain;transition:transform .15s}
#main#main .hm-companions li:nth-child(odd) .rx-noise img{transform:rotate(-5deg)}
#main#main .hm-companions li:nth-child(even) .rx-noise img{transform:rotate(4deg)}
#main#main .hm-companions .rx-noise:hover img{transform:rotate(0) scale(1.06)}
#main#main .hm-companions .rx-label{font-size:.9rem;line-height:1.25}
#main#main .hm-companions [data-rx-caption]{display:block}
@media (max-width:760px){#main#main .hm-companions .rx-noise img{max-width:96px}#main#main .hm-companions .rx-label{font-size:.82rem;padding:2px 6px}}
.rx-noise.sb-noise,.rx-noise.cs-buddy-noise,.rx-noise.cf-noise{flex-direction:row;gap:6px;min-height:36px;padding:3px 12px 3px 8px;border:1.5px solid var(--r-ink,#142b46);border-radius:999px;background:#fff;font-size:.85rem}
.rx-noise.sb-noise .rx-label,.rx-noise.cs-buddy-noise .rx-label,.rx-noise.cf-noise .rx-label{padding:0;background:none!important}
.rx-noise.sb-noise.is-playing,.rx-noise.cs-buddy-noise.is-playing,.rx-noise.cf-noise.is-playing{background:var(--r-gold,#ffdc52)}
#main .sb-slot .sb-noise{margin:6px 0 2px}
#main .cmp-card .rx-chips{margin-top:10px}
#main .cmp-card .rx-chip{min-height:36px;font-size:.85rem;padding-right:12px}
#main .cmp-card .rx-chip .rx-face{width:26px;height:26px}

/* Case pages: a small reaction button on a chat bubble and in the two-person panel */
#main .cs-page .rx-react{min-height:32px;margin-top:8px;padding:3px 12px 3px 8px;gap:6px;font-size:.84rem}
#main .cs-page .rx-react .npw-icon{width:1.1em;height:1.1em}
#main .cs-page .cs-msg--me .rx-react{margin-left:auto}
#main .cs-page .cs-bubble{display:flow-root}
#main .cs-page .cs-person .rx-react{margin-top:12px}
.rx-react[hidden]{display:none!important}

/* Printing: no sound controls */
@media print{.sound-toggle,.rx-chip,.rx-react,.rx-noise .rx-label{display:none!important}}