/* Reading meadow. Chrome only; every colour inside the canvas is set in
   static/js/reading-meadow.js so the two themes stay in one place. */

.rm .rm-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  margin: 0.9rem 0 1rem;
  font-size: 0.8rem;
  color: var(--rs-ink-2);
}

.rm-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.rm-ctl > span:first-child {
  color: var(--rs-muted);
  white-space: nowrap;
}

.rm-ctl select {
  font: inherit;
  color: var(--rs-ink);
  background: var(--rs-surface);
  border: 1px solid var(--rs-grid);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
}

.rm-ctl button {
  font: inherit;
  font-size: 0.76rem;
  color: var(--rs-ink-2);
  background: var(--rs-surface);
  border: 1px solid var(--rs-grid);
  border-radius: 5px;
  padding: 0.12rem 0.5rem;
  cursor: pointer;
  line-height: 1.5;
}

.rm-ctl button:hover {
  border-color: var(--rs-s1);
  color: var(--rs-s1);
}

/* ---------- stage ---------- */

.rm-stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rs-grid);
  line-height: 0;
}

.rm-canvas canvas { display: block; width: 100% !important; height: auto !important; }

.rm-tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 218px;
  pointer-events: none;
  background: var(--rs-surface);
  border: 1px solid var(--rs-grid);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1.35;
  z-index: 2;
}

.rm-tip strong { font-size: 0.82rem; color: var(--rs-ink); }
.rm-tip span { font-size: 0.72rem; color: var(--rs-muted); }

/* ---------- legend ---------- */

.rm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;
  font-size: 0.76rem;
  color: var(--rs-ink-2);
}

/* The legend is the filter control: each subject is a button that isolates
   its family in the meadow. Pressed state is carried by aria-pressed so the
   styling and the accessibility state cannot drift apart. */
.rm-filter {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.1rem 0.5rem 0.1rem 0.35rem;
  cursor: pointer;
  line-height: 1.5;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.rm-filter:hover { border-color: var(--rs-grid); }

.rm-filter[aria-pressed="true"] {
  border-color: var(--rs-s1);
  background: var(--rs-track);
  font-weight: 600;
}

/* Once something is isolated, the unpicked subjects recede to match the canvas. */
.rm-legend.is-filtered .rm-filter[aria-pressed="false"] { opacity: 0.45; }

.rm-legend-note { opacity: 0.75; padding-left: 0.35rem; }

.rm-key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: -1px;
}

/* Must track THEMES.bloom in reading-meadow.js. */
.rm-key[data-g="0"] { background: #E8A020; }
.rm-key[data-g="1"] { background: #D4568C; }
.rm-key[data-g="2"] { background: #E8621A; }
.rm-key[data-g="3"] { background: #4A8FD4; }
.rm-key[data-g="4"] { background: #8A6BBF; }
.rm-key[data-g="5"] { background: #D6402C; }
.rm-key[data-g="6"] { background: #EBD9AC; }
.rm-key-bud { background: #a9ba7e; border-radius: 40% 40% 50% 50%; }

@media (max-width: 575px) {
  .rm .rm-controls { gap: 0.5rem 0.9rem; font-size: 0.74rem; }
}