/* Labs A: embeddings, attention, retrieval. Design tokens from styles.css only. */

/* embeddings */
@media (max-width: 600px) { .emb-canvas { aspect-ratio: 4 / 5; } }
.emb-controls select { max-width: 100%; }
.emb-search { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.emb-search h4 { margin: 0 0 6px; font-size: 1rem; }
.emb-search input[type="text"] { flex: 1 1 220px; }

/* attention */
.attn-word { background: transparent; color: var(--ink); font: inherit; line-height: 1.3; }
.attn-word:hover { border-color: var(--line-2); }
.attn-word.focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.attn-period { cursor: default; padding-left: 0; margin-left: -6px; }
.attn-explain { min-height: 2.6em; margin: 4px 0 0; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 600px) { .attn-words { font-size: 1.02rem; } .attn-wrap { padding-top: 56px; } }

/* retrieval */
.rag-ask input[type="text"] { flex: 1 1 240px; }
.chips .chip small { color: inherit; opacity: .7; font-size: .78em; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.rag-all { font-size: .86rem; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px 10px 34px; margin: 0 0 12px; }
.rag-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 640px) { .rag-cols { grid-template-columns: 1fr; } }
.rag-col { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; background: var(--bg); min-width: 0; }
.rag-col h4 { margin: 0 0 8px; font-size: .92rem; }
.rag-col h4 small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.rag-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rag-hits li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; font-size: .87rem; line-height: 1.45; margin: 0; }
.rag-hits li.zero { opacity: .45; }
.rag-hits li.rag-none { display: block; color: var(--muted); }
.rag-score { font-family: var(--mono); font-size: .75rem; font-weight: 600; text-align: center; padding: 3px 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-soft) var(--p), var(--sunken) var(--p)); }
.rag-hits mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--accent); }
.rag-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rag-tags span { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line); }
.rag-label { font-size: .9rem; }
.rag-prompt { white-space: pre-wrap; word-break: break-word; font-size: .8rem; margin: 8px 0 4px; }