/* tool-theme.css — normalise ported widgets onto the site's tokens.
 *
 * The 75 tools came from mc-mod's WordPress theme, which is LIGHT. Their stylesheets
 * assume white panels, dark text, grey borders and browser-default form controls. Dropped
 * onto a near-black page that produces exactly what it sounds like: white inputs, dark
 * labels on dark ground, glaring tables.
 *
 * Editing 75 stylesheets by hand would be slow and would break on the next port. This
 * file is loaded AFTER each widget's own CSS and re-skins whatever it finds, scoped to
 * #tool-root so it can never touch the site chrome. Specificity comes from the id, so
 * plain class rules inside a widget lose without needing !important on everything.
 */

/* ---------- surfaces ---------- */
#tool-root, #tool-root * { border-color: var(--line); }

#tool-root :is(section, fieldset, .panel, .card, .box, [class*="-section"], [class*="-panel"], [class*="-card"], [class*="-box"]) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius);
  color: var(--fg);
}

#tool-root :is(h1, h2, h3, h4, legend, [class*="-h"], [class*="-title"]) { color: var(--fg); }
#tool-root :is(p, li, span, dd, dt, label, small) { color: inherit; }
#tool-root :is(.hint, .note, .desc, [class*="-hint"], [class*="-note"], [class*="-desc"], small) { color: var(--fg-muted); }
#tool-root a { color: var(--grass-bright); }

/* ---------- form controls: the loudest offenders ---------- */
#tool-root :is(input[type="text"], input[type="number"], input[type="search"], input[type="url"],
               input[type="email"], input[type="password"], select, textarea) {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#tool-root select {
  /* the native arrow disappears once appearance is stripped */
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
                    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
#tool-root :is(input, select, textarea):focus {
  border-color: var(--grass);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
#tool-root ::placeholder { color: var(--fg-dim); opacity: 1; }
#tool-root :is(input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"]) {
  accent-color: var(--grass);
  -webkit-appearance: auto;
  appearance: auto;
}
#tool-root input[type="color"] { background: var(--surface-2); border: 1px solid var(--line); padding: 2px; }

/* File inputs keep the browser's grey "Choose file / No file chosen" chrome unless the
 * button pseudo-element is styled too, which reads as a light-theme leftover on this
 * page. The field itself is styled by the rule above; this is the button inside it. */
#tool-root input[type="file"] {
  padding: 6px 8px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
}
#tool-root input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  margin-right: 10px;
  padding: 6px 11px;
  color: var(--fg);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
#tool-root input[type="file"]::file-selector-button:hover {
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

/* ---------- buttons ---------- */
#tool-root button:not(.btn):not([class*="tab"]) {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
#tool-root button:not(.btn):not([class*="tab"]):hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
}
/* whatever a widget calls its primary action */
#tool-root :is(button[class*="primary"], button[class*="copy"], button[class*="generate"], button[type="submit"]) {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

/* ---------- tabs, chips, pills ---------- */
#tool-root :is([class*="tab"]:not([class*="table"]), [class*="chip"], [class*="pill"]) {
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#tool-root :is([class*="tab"][class*="active"], [class*="chip"][class*="active"],
               [class*="tab"][aria-selected="true"], [class*="pill"][class*="active"]) {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

/* ---------- tables ---------- */
#tool-root table { border-collapse: collapse; width: 100%; font-size: 14px; color: var(--fg); }
#tool-root :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  background: transparent;
}
#tool-root th {
  background: var(--surface-2);
  color: var(--fg-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#tool-root tbody tr:hover td { background: var(--surface-2); }
/* zebra stripes from the light theme read as glare here */
#tool-root tbody tr:nth-child(even) td { background: transparent; }

/* ---------- code, output, pre ---------- */
#tool-root :is(pre, code, kbd, samp, [class*="-out"], [class*="output"], [class*="result"]) {
  font-family: var(--font-mono);
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#tool-root :is(pre, [class*="-out"], [class*="output"]) { padding: 12px 14px; overflow-x: auto; }
#tool-root code { padding: 1px 5px; font-size: 0.92em; }
#tool-root pre code { border: 0; padding: 0; background: none; }

/* ---------- imagery ---------- */
/* Minecraft sprites are 16px art; any widget scaling one must not smooth it. */
#tool-root img[src*="/textures/"], #tool-root img[src*="/icons/"],
#tool-root img[width="16"], #tool-root canvas { image-rendering: pixelated; }

/* ---------- hairline dividers ---------- */
#tool-root hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* Light theme: undo the assumptions above rather than fighting them twice. */
:root[data-theme="light"] #tool-root :is(input, select, textarea) { background: #fff; }
:root[data-theme="light"] #tool-root th { background: var(--surface-2); }

/* ---------- right-to-left pages ---------- */
/* Widget interiors are English technical UIs: file extensions, coordinates, seeds, block
 * counts, command names. Mirrored into an RTL page, the neutral characters in those runs
 * take the paragraph direction and land on the wrong side — the seed map printed -2,048 as
 * "2,048-" and the schematic viewer printed .schem as "schem.". It is the same failure as the
 * bidi mark on /give, one level up: there the fix was per-string, here it is per-widget.
 *
 * An LTR technical panel inside an RTL page is the normal arrangement — the same as a code
 * block or a terminal transcript. The page chrome around the widget (h1, description, nav,
 * footer, the cross-promo block) sits outside #tool-root and stays right-to-left. */
[dir="rtl"] #tool-root { direction: ltr; }