/* The moving message strip (ticker.js). Hidden until a message is approved. */
.rb-ticker {
    display: flex; align-items: stretch;
    background: var(--ink, #241d1a); color: #f7f1e8;
    border-block: 2px solid var(--ember, #d4541c);
    font-size: 1.05rem; line-height: 1;
}
.rb-ticker[hidden] { display: none; }
.rbt-view {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.rbt-run {
    display: flex; width: max-content;
    animation: rbtSlide var(--rbt-dur, 40s) linear infinite;
}
.rb-ticker:hover .rbt-run, .rb-ticker:focus-within .rbt-run { animation-play-state: paused; }
@keyframes rbtSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rbt-list { display: flex; margin: 0; padding: 0; list-style: none; }
.rbt-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.6rem; white-space: nowrap; }
.rbt-item + .rbt-item { border-left: 1px dashed rgba(247, 241, 232, 0.25); }
.rbt-emo { font-size: 1.1em; }
.rbt-name { color: var(--amber, #f0a860); font-weight: 700; }
.rbt-add {
    flex: 0 0 auto; border: 0; cursor: pointer; padding: 0 1.1rem;
    background: var(--ember, #d4541c); color: #fff; font: inherit; font-weight: 700; white-space: nowrap;
}
.rbt-add:hover { background: var(--ember-deep, #b03d16); }
.rbt-add:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
@media (max-width: 600px) {
    .rb-ticker { font-size: 0.95rem; }
    .rbt-item { padding: 0.6rem 1.1rem; }
    .rbt-add { padding: 0 0.8rem; }
}
/* No sliding for people who asked for less motion: the strip scrolls by hand. */
@media (prefers-reduced-motion: reduce) {
    .rbt-run { animation: none; }
    .rbt-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .rbt-run > .rbt-list[aria-hidden] { display: none; }
}

/* The form reuses the booth wall's modal (booth-wall.css); only its own parts here. */
.rbt-kinds { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.rbt-kind {
    border: 1.5px solid rgba(36, 29, 26, 0.15); background: #fff; border-radius: 100px;
    padding: 0.35rem 0.75rem; cursor: pointer; font: inherit; font-size: 0.95rem;
}
.rbt-kind[aria-checked="true"] { border-color: var(--ember, #d4541c); background: rgba(212, 84, 28, 0.08); font-weight: 700; }
.rbt-modal textarea {
    width: 100%; box-sizing: border-box; resize: vertical; font: inherit;
    padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid rgba(36, 29, 26, 0.18);
}