/* =========================================================================
   Text & Encoding tools — shared page layer
   -------------------------------------------------------------------------
   Loaded after editor-bench.css and bench-tools.css by the six text tools:
     /slug-generator  /duplicate-word-finder  /emoji-remover
     /find-and-replace  /unicode-converter  /html-encoder-decoder

   The bench already owns panels, editors, the splitter, buttons, the status
   line, notes and toasts. This file adds only the pieces those six tools
   need that the bench has no concept of - result tables, the live slug
   preview, match highlighting, and the token/inventory chips.

   Every colour here comes from a site.css custom property rather than a
   literal, so all of it follows the site theme and its dark mode with no
   per-page work. Selectors are all prefixed .tt-* and scoped under
   .qdt-bench, so nothing here can reach another tool family.
   ========================================================================= */

/* ------------------------------------------------------------- tables --- */
/* One table style serves the word-frequency list, the per-character Unicode
   inspector and the entity reference. Column widths are set per-instance with
   an inline --cols, the same pattern the DNS and network tool families use. */
.qdt-bench .tt-table{ border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.qdt-bench .tt-thead,
.qdt-bench .tt-row{ display: grid; grid-template-columns: var(--cols, 1fr); gap: 12px; align-items: center; }
.qdt-bench .tt-thead{
  padding: 9px 13px; background: var(--paper-2); border-bottom: 1px solid var(--rule-2);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .tt-body{ max-height: 420px; overflow-y: auto; }
.qdt-bench .tt-row{ padding: 10px 13px; border-bottom: 1px solid var(--rule-2); font-size: 13px; }
.qdt-bench .tt-row:last-child{ border-bottom: 0; }
.qdt-bench .tt-row:hover{ background: var(--paper-2); }
.qdt-bench .tt-row.is-flag{ background: var(--warn-soft); }
.qdt-bench .tt-row.is-bad{ background: var(--bad-soft); }
.qdt-bench .tt-strong{ font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.qdt-bench .tt-dim{ color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.qdt-bench .tt-mono{ font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.qdt-bench .tt-right{ text-align: right; }
.qdt-bench .tt-empty{ padding: 26px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* A count bar behind the number, so the shape of the distribution reads at a
   glance without needing a separate chart. */
.qdt-bench .tt-bar{ position: relative; display: flex; justify-content: flex-end; align-items: center; }
.qdt-bench .tt-bar::before{
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: calc(var(--pct, 0) * 1%); height: 17px;
  background: var(--mark-soft); border-radius: var(--r-sm);
}
.qdt-bench .tt-bar span{ position: relative; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

/* -------------------------------------------------------------- badges --- */
.qdt-bench .tt-badge{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.qdt-bench .tt-badge.ok{ background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.qdt-bench .tt-badge.warn{ background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.qdt-bench .tt-badge.bad{ background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.qdt-bench .tt-badge.mark{ background: var(--mark-soft); color: var(--mark-deep); border-color: transparent; }

/* --------------------------------------------------------- slug preview --- */
/* Shows the slug where it will actually live - in a URL - because that is the
   only place its length and readability can really be judged. */
.qdt-bench .tt-urlbar{
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2); font-family: var(--font-mono); font-size: 13px;
  overflow-wrap: anywhere;
}
.qdt-bench .tt-urlbar .tt-url-base{ color: var(--ink-3); }
.qdt-bench .tt-urlbar .tt-url-slug{ color: var(--mark-deep); font-weight: 600; }
.qdt-bench .tt-urlbar .tt-url-slug:empty::after{ content: "your-slug-here"; color: var(--ink-3); font-weight: 400; }

/* ------------------------------------------------------ inline chip list --- */
/* The emoji inventory and the Unicode token list: many small items, each with
   a count, that should wrap freely rather than force a scroll. */
.qdt-bench .tt-chips{ display: flex; flex-wrap: wrap; gap: 7px; }
.qdt-bench .tt-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); font-size: 13px;
}
.qdt-bench .tt-chip b{ font-size: 15px; line-height: 1; }
.qdt-bench .tt-chip i{
  font-style: normal; font-family: var(--font-mono);
  font-size: 10.5px; color: var(--ink-3);
}

/* ------------------------------------------------------- highlighting --- */
/* A read-only preview of the text with every match marked, shown before any
   replacement is committed - the thing that makes a regex feel safe to run. */
.qdt-bench .tt-preview{
  padding: 13px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2);
  font: var(--code); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 340px; overflow-y: auto;
}
.qdt-bench .tt-hl{
  background: var(--mark-soft); color: var(--mark-deep);
  border-radius: 3px; padding: 0 2px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--mark-line);
}
.qdt-bench .tt-hl.is-current{ background: var(--mark); color: var(--paper); }
.qdt-bench .tt-hl-del{ background: var(--bad-soft); color: var(--bad); border-radius: 3px; padding: 0 2px; text-decoration: line-through; }
.qdt-bench .tt-hl-ins{ background: var(--ok-soft); color: var(--ok); border-radius: 3px; padding: 0 2px; font-weight: 600; }

/* An invisible character has nothing to render, so it gets a visible stand-in
   rather than a blank cell that looks like a bug. */
.qdt-bench .tt-ghost{
  display: inline-block; min-width: 15px; padding: 0 4px;
  border: 1px dashed var(--bad); border-radius: 3px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--bad);
  background: var(--bad-soft); vertical-align: middle;
}

/* ------------------------------------------------------------ controls --- */
/* A labelled field that sits inside a panel body rather than a pane-bar -
   used by Find & Replace for its two text inputs. */
.qdt-bench .tt-field{ display: grid; gap: 5px; padding: 12px 14px 0; }
.qdt-bench .tt-field:last-of-type{ padding-bottom: 12px; }
.qdt-bench .tt-field > label{
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .tt-input{
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 12.5px;
}
.qdt-bench .tt-input:focus{ outline: 2px solid var(--mark); outline-offset: 1px; }
.qdt-bench .tt-input.is-bad{ border-color: var(--bad); background: var(--bad-soft); }

/* A number/select control small enough to live in a mode-strip beside the
   toggle buttons. */
.qdt-bench .tt-mini-field{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qdt-bench .tt-mini-field > span{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .tt-mini-input{
  width: 62px; padding: 4px 7px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 11.5px;
}
.qdt-bench select.tt-mini-input{ width: auto; }

/* --------------------------------------------------------- stat strip --- */
/* A compact row of figures shown under the output - lighter than the status
   bar's stats, for numbers that are the result rather than a verdict. */
.qdt-bench .tt-stats{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px; background: var(--rule-2);
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
}
.qdt-bench .tt-stat{ padding: 12px 14px; background: var(--paper); }
.qdt-bench .tt-stat b{
  display: block; font-family: var(--font-mono);
  font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.qdt-bench .tt-stat span{
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .tt-stat.is-flag b{ color: var(--warn); }
.qdt-bench .tt-stat.is-bad b{ color: var(--bad); }
.qdt-bench .tt-stat.is-ok b{ color: var(--ok); }

/* Stacked block inside a panel, below the pane bar. */
.qdt-bench .tt-pad{ padding: 14px; display: grid; gap: 14px; }

@media (max-width: 900px){
  .qdt-bench .tt-thead{ display: none; }
  .qdt-bench .tt-row{ grid-template-columns: 1fr !important; gap: 4px; }
  .qdt-bench .tt-right{ text-align: left; }
  .qdt-bench .tt-bar{ justify-content: flex-start; }
  .qdt-bench .tt-bar::before{ right: auto; left: 0; }
}