/* ---------------------------------------------------------------
 * wordcloud.css — interactive cloud, stats card, details panel.
 * Form/modal layout comes from base.css + wordgraph.css.
 * --------------------------------------------------------------- */

/* (.select-input dropdown caret moved to wordgraph.css — wordgraph.css is
 * loaded by every tool template, so the chrome is now consistent on
 * /wordgraph too. Tool-specific .select-input wrappers stay here.) */

/* Palette select + custom color swatch stack vertically so the picker can
 * span the full row width when "custom" is chosen — matching the dropdown's
 * height and visual chrome instead of cramming a tiny chip beside it. */
.wc-palette-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wc-palette-row .select-input { width: 100%; }

/* Two-colour gradient pickers — interpolation runs in JS between A (top
 * word) and B (bottom word). User picks two and the rest is linear in HSL. */
.wc-color-pickers {
  display: flex;
  gap: 10px;
}
.wc-color-pickers.hidden { display: none; }
.wc-color-pair {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  cursor: pointer;
}
.wc-color-picker {
  width: 100%;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wc-color-picker:hover { border-color: var(--border-strong); }
.wc-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.wc-color-picker::-webkit-color-swatch { border: 0; border-radius: 8px; }
.wc-color-picker::-moz-color-swatch { border: 0; border-radius: 8px; }

/* ---------- stats strip ----------
 *
 * Two rows:
 *   Row 1 (.wc-stats-row): primary stats — words shown, top word —
 *                          on the same line as the action buttons.
 *   Row 2 (.wc-stats-secondary): lexical-quality metrics: vocabulary
 *                          density, readability, words per sentence.
 *
 * A thin divider separates the two so the user reads them as related
 * but distinct: row 1 = "how big is this analysis?", row 2 = "what's
 * the texture of the text itself?".
 */

.wc-stats-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wc-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px;
  flex: 1 1 auto;
}
.wc-stats-secondary {
  /* The hairline between row 1 and row 2 reads as "more detail below",
   * matching the visual rhythm the form sections use elsewhere. */
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  /* Stretch to fill the card edge-to-edge once the divider is in. */
  flex: 0 0 auto;
}

.wc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wc-stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  /* No negative letter-spacing: in bold 800 it pulls the first glyph past its
   * own left bearing, so on words starting with V/Y/W the leftmost stroke
   * gets visually clipped at the card's content edge. A tiny inline-start
   * padding gives the painted ink the breathing room it needs without
   * changing the visible distance between the stat cards (which is set by
   * .wc-stats > gap, not by the stat element's box). */
  color: var(--text);
  line-height: 1.1;
  padding-inline-start: 2px;
  /* overflow-wrap is the standard replacement for word-break: break-word;
   * it only breaks long unbreakable words to avoid overflow, which is the
   * behaviour we actually want for the top word. */
  overflow-wrap: anywhere;
}

/* The top-word stat is TEXT (vs. numeric). With only 2 stats in the row
 * the column is wide enough that most words fit; clamp() responsively
 * shrinks the font on narrow viewports so common cases stay on one line.
 * For pathological cases (very long word + very narrow column) we keep
 * the row height stable with a single line + "…" truncation — the cloud
 * itself shows the full word as the biggest glyph, and the JS-set
 * `title` reveals it on hover/long-press. */
.wc-stats > .wc-stat { min-width: 0; }
.wc-stat-num#stat-top {
  font-size: clamp(0.95rem, 4.2vw, 1.7rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
/* When the label uses the shared `.label-with-help` wrapper, the
 * global `.help-icon` style applies as-is — same 22 px circle, same
 * gradient, same hover bounce as every other "?" in the app. We only
 * neutralise its default 8 px bottom margin (designed for form labels
 * whose icon sits next to a baseline-aligned input) so the icon and
 * the label sit on the same line cleanly. */
.wc-stat-label.label-with-help .help-icon { margin-bottom: 0; }
/* Stats whose label needs an explanation read more naturally in normal
 * case ("Densidade vocabular ?") than in ALL-CAPS — the uppercase
 * treatment was designed for the short, self-explanatory labels
 * (MOSTRADAS / MAIS FREQUENTE). For the ones with a "?", we drop the
 * uppercase + tracking so the longer phrase doesn't shout. */
.wc-stat-label.label-with-help {
  text-transform: none;
  letter-spacing: 0;
}

.wc-actions {
  display: flex;
  gap: 10px;
}

/* ---------- cloud surface ---------- */

.wc-cloud-card {
  padding: 18px;
  position: relative; /* so the absolute-positioned tooltip is anchored here */
}

/* Hover/focus tooltip: positioned by JS relative to .wc-cloud-card.
 * Default state points DOWN at the word (tooltip is above);
 * .flipped variant points UP (tooltip is below the word, used near the
 * top edge of the cloud where the default position would be cut off). */
.wc-tooltip {
  position: absolute;
  z-index: 5;
  padding: 7px 11px;
  background: #0f172a;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
  /* fade in is implicit via .hidden toggle; keep a subtle transform for polish */
  animation: wc-tip-in 0.14s ease;
}

.wc-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
}
/* default: arrow underneath the pill, pointing down at the word */
.wc-tooltip::after {
  top: 100%;
  border-top-color: #0f172a;
}
/* flipped: arrow on top, pointing up at the word */
.wc-tooltip.flipped::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}

@keyframes wc-tip-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wc-cloud {
  position: relative;
  width: 100%;
  min-height: 360px;
  border-radius: 12px;
  /* basic rectangle surface — no cloud-shape mask */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.wc-hint {
  text-align: center;
}

.wc-word {
  position: absolute;
  z-index: 2;
  margin: 0;
  /* Default: ZERO padding so the cloud (and the exported PNG) packs glyph-
   * tight with no visible gaps. The :hover and .selected rules below add a
   * bubble of padding for interaction feedback. Must stay in sync with
   * WORD_PAD_X / WORD_PAD_Y in wordcloud.js (both also 0). */
  padding: 0;
  line-height: 1.05;
  border: 0;
  background: transparent;
  /* --word-color is set inline by JS per word; color: defaults to it so the
   * normal state is filled glyphs in the word's colour. Hover/selected swap
   * fill ↔ stroke without changing the element's box at all. */
  color: var(--word-color, #0f172a);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  /* Positioned by its centre point. The -50% / -50% centres the button
   * geometrically on (left, top); the extra `- var(--ink-y)` shifts it
   * vertically so the painted INK centre — not the button's geometric
   * centre, which is offset by the font's baseline placement + leading —
   * coincides with (left, top). Without this, words with capitals + no
   * descenders ("ABC") sit visually below the placement point, leaving an
   * asymmetric gap above the centre word in the rendered cloud. The
   * transform-origin is adjusted by the SAME --ink-y so rotation pivots
   * around the painted ink centre too.
   *
   * --rot is the per-word rotation (deg) set inline in JS. */
  transform: translate(-50%, calc(-50% - var(--ink-y, 0px))) rotate(var(--rot, 0deg));
  transform-origin: 50% calc(50% + var(--ink-y, 0px));
  transition: color 0.18s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* Hover & selected: NO change to the element's box (no padding, no stroke,
 * no scale, no shadow) — only the FILL colour shifts to the word's
 * complementary tone (hue +180°, mid-dark lightness, fixed in JS so it can
 * never end up white/invisible on the light surface). Persistence is the
 * difference between hover and selected; both share the same colour rule. */
.wc-word:hover,
.wc-word:focus-visible,
.wc-word.selected {
  color: var(--word-color-opposite, #0f172a);
  outline: none;
}

/* Emoji words: keep their native glyph colours. The base .wc-word rule
 * applies the palette via `color: var(--word-color)`, which tints
 * monochrome (text-presentation) emoji like ☁️ ⭐ ❤️ and on some browsers
 * even leaks onto coloured ones. We unset `color` here so the emoji
 * font's own bitmap wins. The font stack lists every major OS emoji
 * font so emoji glyphs always render in colour, regardless of system. */
.wc-word--emoji,
.wc-word--emoji:hover,
.wc-word--emoji:focus-visible,
.wc-word--emoji.selected {
  color: unset;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               emoji, system-ui, sans-serif;
}
/* On browsers/OSes without native flag glyphs (Windows), prepend the
 * bundled flag font so 🇵🇹 renders as a flag instead of "PT". Gated by the
 * `no-flag-emoji` class (set in csv-utils.js) so platforms with native
 * flags keep them. The @font-face's unicode-range limits this to flag
 * codepoints, so all other emoji still use the system font. */
html.no-flag-emoji .wc-word--emoji,
html.no-flag-emoji .wc-word--emoji:hover,
html.no-flag-emoji .wc-word--emoji:focus-visible,
html.no-flag-emoji .wc-word--emoji.selected {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", emoji, system-ui, sans-serif;
}

/* ---------- details panel ---------- */

.wc-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.6rem;
}

.wc-details-header h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  word-break: break-word;
}

.wc-details-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 0.6rem;
}

.wc-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
}

.wc-metric-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.wc-metric strong {
  font-size: 1.3rem;
  color: var(--text);
}

.wc-examples {
  margin-top: 1rem;
}

.wc-examples-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.wc-examples-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.wc-examples-pager {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.wc-examples-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.wc-examples-btn {
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.wc-examples-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.wc-examples-nav.hidden { display: none !important; }

.wc-examples ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wc-examples li {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text);
}

.wc-examples li.wc-no-examples {
  color: var(--text-faint);
  text-align: center;
  font-style: italic;
}

@media (max-width: 600px) {
  .wc-cloud { min-height: 360px; }
  .wc-stats-card { flex-direction: column; align-items: stretch; }
  .wc-actions { justify-content: flex-end; }
}

/* ---------- word list card (below the cloud) ---------- */

.wc-list-card { padding: 18px; }
.wc-list-card[hidden] { display: none; }

.wc-list-title {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Grid header + each row share columns: word / count / percent-bar.
 * The bar grows from 0% to 100% width within its column. The count column
 * is `auto` (not a fixed 80 px) so the bold uppercase header "Ocorrências"
 * — wider than 80 px — doesn't overflow into the next column and shove the
 * "%" header on top of the count's last letter. */
.wc-list-head,
.wc-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(110px, auto) minmax(180px, 1.2fr);
  gap: 14px;
  align-items: center;
  padding: 8px 10px;
}
.wc-list-head {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  border-bottom: 1px solid #e2e8f0;
}
/* Align the header columns with the body cells: count is right-aligned (the
 * body's <span class="wc-list-count"> already is); the % header sits over
 * the right-aligned percent value at the end of each bar row. */
.wc-list-head > span:nth-child(2) { text-align: right; }
.wc-list-head > span:nth-child(3) { text-align: right; }
.wc-list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.wc-list > li {
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.92rem;
  color: var(--text);
}
.wc-list > li:last-child { border-bottom: none; }
.wc-list > li:nth-child(even) { background: #fafbfc; }
.wc-list-word {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-list-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 700;
  color: var(--text);
}
.wc-list-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-list-bar-track {
  flex: 1;
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.wc-list-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #334155, #64748b);
  border-radius: 999px;
}
.wc-list-bar-pct {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-faint);
  /* min-width has to fit "100.00%" comfortably at this font-size; 48 px was
   * too tight and the % glyph was visually crashing into the last digit. */
  min-width: 60px;
  text-align: right;
  white-space: nowrap;
}