/* Estilos locais da demo de tokenização: chips de token, tabelas e entrada de texto.
   Reusa as variáveis de tema de ../style.css. */

.tok-chip {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  line-height: 1.3;
  padding: .06rem .38rem;
  margin: .1rem .12rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  color: var(--fg);
  white-space: pre;
}
.tok-chip.tok-cyan   { border-color: var(--cyan);   background: color-mix(in srgb, var(--cyan) 18%, var(--bg)); }
.tok-chip.tok-green  { border-color: var(--green);  background: color-mix(in srgb, var(--green) 18%, var(--bg)); }
.tok-chip.tok-orange { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 18%, var(--bg)); }
.tok-chip.tok-purple { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 18%, var(--bg)); }
.tok-chip.tok-pink   { border-color: var(--pink);   background: color-mix(in srgb, var(--pink) 18%, var(--bg)); }
.tok-chip.tok-red    { border-color: var(--red);    background: color-mix(in srgb, var(--red) 20%, var(--bg)); }
.tok-chip.tok-new {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 26%, var(--bg));
  font-weight: 700;
}

.tok-row { margin: .15rem 0 .6rem; }

.tok-label {
  color: var(--comment);
  font-size: .8rem;
  font-weight: 600;
  margin: .7rem 0 .1rem;
}
.tok-label:first-child { margin-top: 0; }

.tok-info { color: var(--comment); font-size: .82rem; margin-left: .4rem; font-weight: 400; }

.tok-table {
  border-collapse: collapse;
  font-size: .84rem;
  margin: .2rem 0 .6rem;
}
.tok-table th, .tok-table td {
  border-bottom: 1px solid var(--line);
  padding: .22rem .65rem;
  text-align: left;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tok-table th { color: var(--comment); font-weight: 600; }
.tok-table td.mono, .tok-table th.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tok-table tr.best td { background: color-mix(in srgb, var(--yellow) 16%, transparent); }
.tok-table tr.pick-bpe td { background: color-mix(in srgb, var(--cyan) 14%, transparent); }

.text-input {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .4rem .6rem;
  font-size: .9rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
}
.text-input:focus { outline: none; border-color: var(--purple); }

.word-group {
  display: inline-block;
  margin: .1rem .3rem .1rem 0;
  padding: .08rem .12rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px dashed transparent;
}
.word-group:hover { border-color: var(--comment); }
.word-group.sel { border-color: var(--purple); }

.deriv-line {
  font-size: .84rem;
  color: var(--fg);
  margin: .15rem 0;
}
.deriv-line .deriv-step {
  display: inline-block;
  min-width: 11rem;
  color: var(--comment);
}

.tok-grid { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; }
.tok-pane { flex: 1 1 320px; min-width: 280px; }

/* Seção 5 (Unigram): chips de vocabulário podáveis */
.tok-chip.clickable { cursor: pointer; user-select: none; }
.tok-chip.clickable:hover { filter: brightness(1.15); }
.tok-chip.tok-removed {
  opacity: .45;
  text-decoration: line-through;
  border-color: var(--red);
  background: transparent;
}
.tok-chip.tok-locked { cursor: default; }
.tok-chip.tok-locked:hover { filter: none; }