/* Registry browser — layout only. Colour comes from css/tool-theme.css wherever it already
 * has an opinion, because that file loads AFTER this one and a plain class rule loses to its
 * #tool-root-scoped selectors anyway (CLAUDE.md, "Writing widget CSS").
 *
 * What is deliberately NOT restated here, and would be dead CSS if it were:
 *   - the table itself. `#tool-root table/th/td` already sets the hairline rules, the
 *     uppercase tracked header and the row hover, and it was measured off the competitor's
 *     own table to begin with.
 *   - the tabs. `[class*="tab"]` and `[class*="tab"][class*="active"]` pick up .regb-tab and
 *     .regb-tab-active without being told, which is why they are named that way.
 *   - the copy button. `button[class*="copy"]` is painted as a primary action there, and the
 *     light theme's token swap keeps that pair readable both ways round.
 *   - the search field and the version <select>, both covered by the form-control block.
 */

#tool-root .regb { display: flex; flex-direction: column; gap: 14px; }

/* ---------- version + search ---------- */
#tool-root .regb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#tool-root .regb-vlabel {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--fg-dim);
}
#tool-root .regb-version { min-width: 190px; }
/* Pushed to its own end of the bar: the version picks the data set, the search filters it,
 * and putting them at opposite ends stops them reading as one compound control. */
#tool-root .regb-search { margin-inline-start: auto; min-width: 260px; }

/* ---------- tabs ---------- */
#tool-root .regb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
#tool-root .regb-tab { padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer; }
#tool-root .regb-tab-n { margin-inline-start: 7px; font-weight: 600; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ---------- counts + pager ---------- */
#tool-root .regb-count {
  margin: 0; font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
#tool-root .regb-pager { display: flex; align-items: center; gap: 10px; }
#tool-root .regb-page-at {
  font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
#tool-root .regb-page-btn { padding: 4px 12px; font-size: 15px; line-height: 1.2; }
#tool-root .regb-page-btn[disabled] { opacity: 0.4; cursor: default; }
/* A `display` rule beats the [hidden] attribute, and .regb-pager sets one — without this the
 * pager stays visible on a single-page result. Same trap CLAUDE.md records. */
#tool-root .regb-pager[hidden] { display: none !important; }

/* ---------- table ---------- */
#tool-root .regb-wrap { overflow-x: auto; }
#tool-root .regb-table { table-layout: fixed; }
#tool-root .regb-th-ico, #tool-root .regb-ico-cell { width: 44px; padding-inline-end: 0; }
#tool-root .regb-th-copy, #tool-root .regb-copy-cell { width: 54px; text-align: end; }
#tool-root .regb-th-id, #tool-root .regb-id { width: 42%; }

/* The sprite is positioned by js at 16px cells; .mc-sprite in tool-theme.css already scales
 * it 1.5x and kills smoothing. The margins there assume it sits inline before a label, so
 * they are reset for a cell that holds nothing else. */
#tool-root .regb-ico-cell .mc-sprite { margin: 0; display: block; }
/* No sprite for this id — a 16px hole rather than a missing cell, so rows stay aligned.
 * minecraftmaps draws a grey square here for EVERY row; this is the exception, not the rule. */
#tool-root .regb-ico-none { background-image: none; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- every element that holds a LOCALISED string ----------
 *
 * css/tool-theme.css forces `direction: ltr` on all of #tool-root, because a ported widget's
 * interior is English technical text and neutral characters in those runs land on the wrong
 * side of an RTL page. This browser is the first widget that puts REAL localised prose
 * inside that panel — Mojang's own strings and 1,196 translated names — and the same rule
 * then works against it: in an LTR paragraph a trailing neutral goes to the paragraph's end,
 * which is the right-hand side, which for Arabic is the beginning of the line.
 *
 * Measured on /ar before this rule existed, by dumping the painted x of every character:
 *
 *   الإصدار:      the label ran 81 → 49 correctly and the colon painted at 84 — outside the
 *                 whole label, on its right. It read `:الإصدار`.
 *   ...هنا شيء    the empty state ran 589 → 414 correctly and its three dots painted at
 *                 597, 601, 605 — again past the right edge, so the ellipsis LED the line.
 *   بحث...        the search placeholder resolved `direction: ltr` and had the same shape.
 *
 * This is the `.schem` → `schem.` and `2,048-` failure from CLAUDE.md, third time in this
 * repo, and invisible in a screenshot at this size.
 *
 * `unicode-bidi: plaintext` rather than `direction: rtl`, because these elements have to be
 * right in fifteen languages, not two: it takes the direction from each line's own first
 * strong character, so Arabic goes RTL, everything else stays LTR, and the ids never move.
 * On the search field it does both jobs — an Arabic placeholder lays out RTL and a typed
 * `minecraft:` lays out LTR, in the same input.
 */
#tool-root :is(.regb-name, .regb-empty, .regb-page-at, .regb-vlabel, .regb-search) {
  unicode-bidi: plaintext;
}

#tool-root .regb-name { font-weight: 600; }
#tool-root .regb-id { font-family: var(--font-mono); }
#tool-root .regb-id code {
  background: none; border: 0; padding: 0; font-size: 13px; color: var(--grass-bright);
  overflow-wrap: anywhere;
}
#tool-root .regb-empty { color: var(--fg-muted); text-align: center; padding: 26px 12px; }

#tool-root .regb-copy { padding: 4px 9px; line-height: 1.2; }
#tool-root .regb-copy-ico { font-size: 14px; }
/* Confirmation without a string: there is no Mojang word for "Copied" that is not tied to a
 * specific thing ("Copied location to clipboard"), and inventing one for fifteen locales is
 * exactly what data/glossary.json exists to prevent. A tick says it in every language. */
#tool-root .regb-copy.regb-copied .regb-copy-ico { font-size: 0; }
#tool-root .regb-copy.regb-copied .regb-copy-ico::after { content: "✓"; font-size: 14px; }

#tool-root .regb-note { margin: 0; font-size: 12px; color: var(--fg-dim); }

/* ---------- narrow ---------- */
@media (max-width: 620px) {
  #tool-root .regb-search { margin-inline-start: 0; min-width: 0; width: 100%; }
  #tool-root .regb-th-id, #tool-root .regb-id { width: auto; }
  #tool-root .regb-table { table-layout: auto; }
  #tool-root .regb-id code { font-size: 12px; }
}

/* ---------- shared data-browser columns (js/data-browser.js) ----------
 *
 * The id browser above renders one fixed shape; these are the extra column TYPES the
 * generated datasets carry — booleans, colours, member lists and numbers. Same rule as the
 * rest of this file: layout only, because css/tool-theme.css loads after it and already owns
 * the table, the tabs and the copy button.
 */
#tool-root .mcdb-table { table-layout: auto; }
#tool-root .mcdb-bool { text-align: center; color: var(--grass-bright); }
#tool-root .mcdb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A colour column is the one place a value is worth SHOWING rather than printing. The swatch
 * carries a hairline because several biome colours are near-black and would otherwise be an
 * invisible square on the dark theme. */
#tool-root .mcdb-color { white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; }
#tool-root .mcdb-swatch {
  display: inline-block; width: 12px; height: 12px; margin-inline-end: 7px;
  vertical-align: -1px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Member lists run long — Sharpness applies to 21 items — so the row stays one line and the
 * full list is in the title attribute. Without the clamp a single row could be 400px tall. */
#tool-root .mcdb-list {
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-muted); font-size: 12.5px;
}
#tool-root .mcdb-n {
  display: inline-block; min-width: 1.6em; margin-inline-end: 6px; padding: 0 5px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--fg-dim); text-align: center;
}
#tool-root .mcdb-text { color: var(--fg-muted); font-size: 13px; }