/* ============================================================
   TOP-10 SUBSTRINGS CARD
   Shares the square slot with #pieCard inside .charts-top and
   auto-scales its content to whatever size the card gets resized
   to, using CSS container queries.
   ============================================================ */

/* Override the generic .chart-card's container-type so cqh is meaningful.
   inline-size (the default for .chart-card) only tracks width; we also
   need to track height to scale the 10 rows to whatever vertical space
   the user's resize gives us. */
#topWordsCard {
  container-type: size;
  --tw-font-scale: 1;
  --tw-emote-size: 22px;
}

/* The wrap inside .chart-card.resizable has flex:1 and aspect-ratio:unset
   (see css/layout-mgr.css) so it fills whatever box the user drags the
   card to. We rely on that here. */
#topWordsCard .chart-wrap { overflow: hidden; }

/* Base unit = 3.6% of wrap height, then clamped so it stays readable on
   both very small and very large cards. Everything inside a row scales
   against this unit so 10 rows always fit end-to-end. */
.top-words-list {
  --tw-base: clamp(8px, calc(3.6cqh * var(--tw-font-scale)), 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: 'Share Tech Mono', monospace;
}

.top-words-row {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: grid;
  /* rank column is sized for "10"; count column is sized for 3-digit counts.
     Both are kept tight so the word column claims the most horizontal room. */
  grid-template-columns:
    calc(var(--tw-base) * 1.4)
    min(var(--tw-emote-size), calc(var(--tw-base) * 2.2))
    minmax(0, 1fr)
    calc(var(--tw-base) * 2.4);
  align-items: center;
  column-gap: calc(var(--tw-base) * 0.35);
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
  overflow: hidden;
}
.top-words-row:last-child { border-bottom: none; }

.top-words-row .tw-rank {
  grid-column: 1;
  font-family: 'Orbitron', sans-serif;
  font-size: calc(var(--tw-base) * 0.8);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: right;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.top-words-row .tw-emote {
  grid-column: 2;
  /* Slider value is a px ceiling; the cqh-based min() keeps the emote
     from ever exceeding ~2.2x the text base so it never crowds the row. */
  width:  min(var(--tw-emote-size), calc(var(--tw-base) * 2.2));
  height: min(var(--tw-emote-size), calc(var(--tw-base) * 2.2));
  object-fit: contain;
  image-rendering: pixelated;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 1;
}
/* display:none removes the img from layout; the explicit grid-column
   assignments on each sibling cell keep the rest of the row pinned to
   the right tracks so empty emote rows don't shift the word into the
   narrow emote track or push the count out of the right-hand column. */
.top-words-row .tw-emote[hidden] { display: none; }

.top-words-row .tw-word {
  grid-column: 3;
  font-size: calc(var(--tw-base) * 1.15);
  color: var(--text);
  white-space: nowrap;
  /* Allow long tokens to flow through the row without ellipsis. The row's
     own overflow:hidden still prevents spill past the card edge. */
  overflow: hidden;
  line-height: 1.1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.top-words-row .tw-count {
  grid-column: 4;
  font-size: calc(var(--tw-base) * 0.95);
  color: var(--accent);
  text-align: right;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding-left: calc(var(--tw-base) * 0.2);
  position: relative;
  z-index: 1;
}

/* Bar now fills the row behind the text content so row height is driven by
   the substring line-height, not the bar height. The gradient is softened
   with opacity so the text stays readable. */
.top-words-row .tw-bar-wrap {
  position: absolute;
  inset: 0;
  background: transparent;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.top-words-row .tw-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(0,255,229,.18),
    rgba(155,110,243,.18));
  transition: width .4s ease;
}

.top-words-row.tw-empty .tw-word { color: rgba(255,255,255,.15); }
.top-words-row.tw-empty .tw-count { color: transparent; }

/* ============================================================
   TOP-WORDS SETTINGS MODAL
   ============================================================ */
.stopwords-overlay[hidden] { display: none; }
.stopwords-modal { max-width: 560px; }
.stopwords-hint {
  font-size: .75em;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

.sw-slider-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  background: rgba(0,0,0,.18);
}
.sw-slider-row {
  display: grid;
  grid-template-columns: 110px 1fr 58px;
  align-items: center;
  gap: 10px;
}
.sw-slider-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .6em;
  letter-spacing: .14em;
  color: var(--muted);
}
.sw-slider-row input[type=range] { width: 100%; }
.sw-slider-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: .75em;
  color: var(--accent);
  text-align: right;
}

.stopwords-field { margin-bottom: 14px; }
.stopwords-field-label {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: .62em;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 6px;
}

.sw-defaults-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,.18);
}
.sw-default-chip {
  font-family: 'Share Tech Mono', monospace;
  font-size: .7em;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.sw-default-chip:hover {
  border-color: var(--accent2, #9b6ef3);
  color: var(--accent2, #9b6ef3);
}
.sw-default-chip-unblocked {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,255,229,.08);
  text-decoration: line-through;
  opacity: .8;
}
.sw-default-chip-unblocked:hover {
  color: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}

.sw-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sw-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  min-width: 38px;
  font-family: 'Orbitron', sans-serif;
  font-size: .68em;
  letter-spacing: .1em;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sw-toggle-btn:hover { color: var(--accent2); border-color: var(--accent2); }
.sw-toggle-btn.is-blocked {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,255,229,.08);
}
.sw-toggle-btn.is-all-blocked {
  background: rgba(0,255,229,.18);
}

/* ============================================================
   Title-bar cog button
   ============================================================ */
#topWordsEditStopwords { margin-left: 2px; }