/* ARI Showcase R7 detect: language detection demo panel. base.css tokens only; the explain card is .r7-explain in r7.css. */
.r7t-open { margin-top: 4px; justify-content: center; white-space: normal; text-align: center; }
.r7t { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--stage-line); border-radius: 12px; background: var(--stage-2); color: var(--chrome-ink); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.r7t[hidden], .r7t [hidden] { display: none; }
.r7t-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.r7t-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 220px; }
.r7t-chip, .r7t-dc { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--stage-line); background: transparent; color: var(--chrome-dim); font: 600 12px/1.5 var(--chrome-font); }
button.r7t-chip { cursor: pointer; min-height: 32px; }
.r7t-chip[aria-checked="true"] { background: var(--chrome-accent); color: var(--stage); border-color: transparent; }
.r7t-chip:disabled { opacity: .55; cursor: default; }
.r7t-go { flex: 0 0 auto; }
.r7t-listen { margin: 0; display: flex; align-items: center; gap: 4px; font: 600 13px/1.4 var(--chrome-font); color: var(--chrome-dim); }
.r7t-listen i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: r7t-dot 1s infinite ease-in-out; }
.r7t-listen i:nth-child(2) { animation-delay: .15s; } .r7t-listen i:nth-child(3) { animation-delay: .3s; }
@keyframes r7t-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.r7t-card { padding: 8px 10px; border: 1px solid var(--stage-line); border-radius: 10px; background: var(--stage); }
.r7t-heard { margin: 0 0 6px; font: 600 13.5px/1.35 var(--chrome-font); overflow-wrap: anywhere; }
.r7t-det { display: flex; flex-wrap: wrap; gap: 5px; }
.r7t-dc { transition: background .3s, color .3s, box-shadow .3s; padding: 1px 8px; font-size: 11.5px; }
.r7t-dc.on { background: var(--chrome-accent); color: var(--stage); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chrome-accent) 25%, transparent); }
.r7t-tr { display: flex; flex-direction: column; gap: 6px; }
.r7t-tr:empty { display: none; }
.r7t-l { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.r7t-l b { font: 600 11px/1.4 var(--chrome-font); text-transform: uppercase; letter-spacing: .04em; color: var(--chrome-dim); }
.r7t-en { font-size: 12px; color: var(--chrome-dim); font-style: normal; }
.r7t-sum { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--stage-line); background: var(--stage); }
.r7t-sum b { font: 600 11px/1.4 var(--chrome-font); text-transform: uppercase; letter-spacing: .04em; color: var(--chrome-dim); }
.r7t-sum p { margin: 2px 0 0; font: 600 13.5px/1.35 var(--chrome-font); }
.r7t-after { display: flex; flex-direction: column; gap: 8px; }
.r7t-explain { padding: 10px 12px; }
.r7t-ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .r7t-listen i { animation: none; opacity: .7; } .r7t-dc { transition: none; } }
.r7t-l > * { margin: 0; padding: 0; display: block; }
.r7t-chip[aria-checked="true"] { color: var(--stage); }
.r7t-heard, .r7t-sum p { color: var(--chrome-ink); }