/* Say it — this feature's styles. Use the tokens from style.css
   (--bg --surface --text --muted --line --accent --on-accent --user --ja --danger
   --high --mid --low --poor --font --font-ja --mono); never redefine them. */

.rv { padding-top: 4px; }
.rv-ja { min-height: 112px; font-family: var(--font-ja); }
.rv-ja::placeholder { color: var(--muted); opacity: .75; }
.rv-ctx {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ja);
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.rv-ctx:focus { border-color: var(--accent); }
.rv-ctx::placeholder { color: var(--muted); opacity: .75; }
.rv-acts { display: flex; margin-top: 12px; }
.rv-go { flex: 1 1 auto; min-height: 52px; font-family: var(--font-ja); font-size: 16px; }
.rv-go[disabled] { border-color: var(--line); background: var(--line); color: var(--muted); cursor: default; }

/* ---------- the answer ---------- */
.rv-card {
  display: block;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.rv-en { margin: 8px 0 0; font-size: 21px; line-height: 1.45; overflow-wrap: anywhere; }
.rv-alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-alt-en { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.rv-why {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--ja);
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.7;
}

/* His own phrases turning up in his own sentence: the reason this screen exists. */
.rv-used { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.rv-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size: 15px;
}
.rv-chip b::before { content: "✓ "; color: var(--high); font-weight: 700; }
.rv-chip span { font-family: var(--font-ja); font-size: 12px; color: var(--muted); }
.rv-none { margin: 9px 0 0; font-family: var(--font-ja); font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- what he asked before ---------- */
.rv-log { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.rv-log-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-clear {
  flex: none;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font-ja);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rv-clear:active { background: var(--line); }
.rv-list { margin: 10px 0 0; padding: 0; list-style: none; }
.rv-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rv-open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rv-open:active { background: var(--ja); }
.rv-open:focus-visible, .rv-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-item-ja, .rv-item-en { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rv-item-ja { font-family: var(--font-ja); font-size: 13px; color: var(--muted); }
.rv-item-en { margin-top: 3px; font-size: 15px; }

@media (min-width: 560px) {
  .rv-en { font-size: 23px; }
}