/* The bell, and the grown-up's send box. SC-15.
 *
 * 52px tall, which is over Apple's 44 floor and over this site's own 48
 * token, because qa/touch.js measures both and because the thumb pressing
 * this one belongs to whoever is holding the iPad.
 *
 * The four states are colours a child can read without reading: yellow
 * means tap me, green means it is on, grey means it is not available and
 * is not your fault.
 */

.sc-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  min-width: 52px;
  padding: 12px 24px;
  font-family: "Comic Neue", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  color: #10141b;
  background: #ffd21f;
  border: 3px solid #10141b;
  border-radius: 28px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sc-bell:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .4); }

.sc-bell[data-state="on"] { background: #6ee7a8; }
.sc-bell[data-state="working"] { background: #cfd6e4; cursor: default; }

/* Blocked and needs-install are not failures a child caused, so they are
 * quiet rather than red, and they do not pretend to be buttons. */
.sc-bell[data-state="blocked"],
.sc-bell[data-state="needs-install"] {
  background: #cfd6e4;
  box-shadow: none;
  cursor: default;
  font-weight: 400;
}

.sc-bell-note {
  margin: 10px auto 0;
  max-width: 34em;
  font-family: "Comic Neue", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #aebbd6;
}

.sc-bell-note[data-bad="1"] { color: #ffd21f; }

/* The block the bell sits in on the library page. */
.sc-bell-block {
  margin: 34px auto 0;
  padding: 0 16px;
  text-align: center;
}

.sc-bell-block h2 {
  margin: 0 0 4px;
  font-family: "Bangers", Impact, sans-serif;
  letter-spacing: 2px;
  font-size: clamp(22px, 5vw, 30px);
  color: #fff;
  text-shadow: 3px 3px 0 #ef3b32;
}

.sc-bell-block p.why {
  margin: 0 0 16px;
  font-family: "Patrick Hand", cursive;
  font-size: 16px;
  color: #aebbd6;
}