/* Tool directory hero */

.tools-directory-hero {
  position: relative;
  overflow: hidden;
  background: #05090b;
  border-bottom: 3px solid var(--mc-outline);
}

.tools-directory-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 6, 8, 0.98) 0%, rgba(3, 6, 8, 0.9) 34%, rgba(3, 6, 8, 0.56) 58%, rgba(3, 6, 8, 0.12) 84%),
    linear-gradient(0deg, rgba(2, 4, 5, 0.6), transparent 58%);
  content: "";
}

.tools-directory-hero__media,
.tools-directory-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tools-directory-hero__media img {
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.tools-directory-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 390px;
  padding-top: clamp(54px, 8vw, 90px);
  padding-bottom: clamp(54px, 8vw, 90px);
}

.tools-directory-hero__copy {
  max-width: 720px;
}

.tools-directory-hero__eyebrow {
  margin: 0 0 16px;
  color: #8fe35e;
  font-family: var(--font-pixel);
  font-size: clamp(0.78rem, 1.6vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.tools-directory-hero h1 {
  margin: 0 0 18px;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2.45rem, 5.5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
}

.tools-directory-hero__copy > p:last-child {
  max-width: 56ch;
  margin: 0;
  color: #d6dce1;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.tools-directory-content {
  padding-top: 44px;
  padding-bottom: 64px;
}

@media (max-width: 760px) {
  .tools-directory-hero::after {
    background:
      linear-gradient(90deg, rgba(3, 6, 8, 0.92), rgba(3, 6, 8, 0.58)),
      linear-gradient(0deg, rgba(2, 4, 5, 0.9) 0%, rgba(2, 4, 5, 0.4) 68%, rgba(2, 4, 5, 0.18));
  }

  .tools-directory-hero__media img {
    object-position: 67% center;
  }

  .tools-directory-hero__inner {
    align-items: flex-end;
    min-height: 440px;
    padding-top: 104px;
    padding-bottom: 44px;
  }

  .tools-directory-hero h1 {
    max-width: 10ch;
  }
}

@media (max-width: 520px) {
  .tools-directory-hero__media img {
    object-position: 70% center;
  }

  .tools-directory-hero__inner {
    min-height: 420px;
  }

  .tools-directory-content {
    padding-top: 30px;
  }
}

/*
 * padding-top/bottom only (not the shorthand) so this doesn't zero out the
 * left/right padding from the .container class it's combined with in markup.
 */
.tool-header {
  padding-top: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.tool-header h1 {
  margin: 0 0 8px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

.edition-version-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.edition-version-selector .field {
  margin-bottom: 0;
  min-width: 200px;
  flex: 1 1 200px;
}

/* The selectors sit on the dark page rather than inside a panel, so their
   labels and help text need the light-on-dark pair. */
.edition-version-selector .field label {
  color: var(--color-text);
}

.edition-version-selector .field-help {
  color: var(--color-text-muted);
}

/*
 * Mobile-first: one column. minmax(0, 1fr) rather than bare 1fr — a grid
 * track's implicit minimum is "auto" (the content's min-content size), so
 * without the explicit 0 floor a non-shrinking child can force the track
 * wider than the viewport.
 */
.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 48px;
}

.tool-layout > * {
  min-width: 0;
}

.tool-ad-slot {
  grid-column: 1 / -1;
}

/* Overrides the sticky default from components.css while stacked */
.command-output {
  position: static;
}

/* Tablet / small laptop: form beside the command preview, tool list as a
   collapsible strip across the top. */
@media (min-width: 961px) {
  .tool-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }

  .tool-sidebar {
    grid-column: 1 / -1;
  }

  .command-output {
    position: sticky;
    top: 100px;
  }
}

/* Wide: three columns. Sizes chosen so the form column stays inside the
   560-700px readable range from the spec (§15.4). */
@media (min-width: 1240px) {
  .tool-layout {
    grid-template-columns: 200px minmax(0, 1fr) minmax(320px, 360px);
    /* Stretches all three columns to the row's height (driven by the form
       and command-output — see .tool-sidebar below for why the sidebar
       itself doesn't push that height taller). The base layout leaves this
       at the grid default of "start", so each column sizes to its own
       content and the ~34-tool sidebar list ends up far taller than the
       form or the generated command, dragging the whole page down with it. */
    align-items: stretch;
  }

  .tool-sidebar {
    grid-column: auto;
    position: sticky;
    top: 100px;
    /*
     * An auto grid row sizes to the tallest item's own natural content
     * height — overflow/min-height on a descendant doesn't reduce what the
     * sidebar contributes to that calculation (tried it: the row stayed at
     * the sidebar's full ~34-tool height, ~1967px, regardless). max-height
     * is what actually bounds an item's contribution, so this is capped to
     * the same viewport-relative ceiling command-output effectively has as
     * a sticky, top: 100px element: the visible viewport below that offset,
     * minus a bit of breathing room. That's what makes the row size to the
     * form/command-output instead, with .tool-sidebar__panel below scrolling
     * its own overflow rather than the sidebar (and the row) growing to fit.
     */
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

/* Tool sidebar */

.tool-sidebar {
  padding: 14px 0 14px 10px;
}

.tool-sidebar__toggle {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #9d9d9d;
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-raised);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9rem;
  color: #1c1f22;
  cursor: pointer;
}

.tool-sidebar__toggle:hover {
  background: #adadad;
}

.tool-sidebar.is-open .tool-sidebar__toggle {
  box-shadow: var(--bevel-inset);
  margin-bottom: 12px;
}

.tool-sidebar.is-open .tool-sidebar__caret {
  transform: rotate(180deg);
}

.tool-sidebar__panel {
  display: none;
}

/*
 * On mobile/tablet (below the 1240px breakpoint further down, where the
 * sidebar becomes a fixed-height grid column instead) opening this strip
 * shows the full ~34-tool list inline, which can run several screens long
 * and forces a lot of extra scrolling just to get back to the form. Capped
 * to a fraction of the viewport with its own scroll instead.
 */
.tool-sidebar.is-open .tool-sidebar__panel {
  display: block;
  max-height: 60vh;
  overflow-y: auto;
}

.tool-sidebar__search {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-inset);
  background: var(--mc-slot);
  color: #23262a;
  font-size: 0.92rem;
  margin-bottom: 10px;
}

.tool-sidebar__group {
  margin-bottom: 12px;
}

.tool-sidebar__group[hidden] {
  display: none;
}

.tool-sidebar__group:last-child {
  margin-bottom: 0;
}

.tool-sidebar__group-title {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4d545b;
}

.tool-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tool-sidebar__item[hidden] {
  display: none;
}

.tool-sidebar__item a {
  display: block;
  padding: 8px 10px;
  border: 2px solid transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: #23262a;
  text-decoration: none;
}

.tool-sidebar__item a:hover {
  background: #b4b4b4;
  border-color: var(--mc-outline);
}

.tool-sidebar__item a[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--mc-outline);
  box-shadow: var(--bevel-raised);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.tool-sidebar__empty {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #4d545b;
}

.tool-sidebar__empty[hidden] {
  display: none;
}

/* Thinnest practical scrollbar for the panel's internal scroll (both the
   mobile/tablet capped-height version above and the desktop flex version
   below), styled to the theme instead of the OS default — square (no
   border-radius, per the rest of this design system) and muted so it
   doesn't compete with the tool list text. scrollbar-width: thin is
   Firefox's thinnest keyword (no numeric control there); the
   ::-webkit-scrollbar rules cover Chrome/Edge/Safari, where a width is
   settable directly. Unconditional (not inside a breakpoint) since it only
   has any visible effect where overflow-y: auto is actually scrolling. */
.tool-sidebar__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--mc-outline) transparent;
}

.tool-sidebar__panel::-webkit-scrollbar {
  width: 6px;
}

.tool-sidebar__panel::-webkit-scrollbar-track {
  background: transparent;
}

.tool-sidebar__panel::-webkit-scrollbar-thumb {
  background: var(--mc-outline);
}

.tool-sidebar__panel::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

@media (min-width: 1240px) {
  .tool-sidebar__toggle {
    display: none;
  }

  .tool-sidebar__panel {
    display: block;
    /* min-height: 0 overrides the flex item's automatic minimum size, which
       would otherwise be its full content height and defeat overflow-y — the
       panel would just grow to fit instead of scrolling. The row itself is
       kept short via .tool-sidebar's max-height above; this is what actually
       scrolls the ~34-tool list within it. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

.tool-help {
  padding-top: 28px;
  padding-bottom: 56px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.tool-help h2 {
  font-size: 1.1rem;
}

.tool-help code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
}

.related-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.related-tools a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-raised);
  background: var(--mc-deep-raised);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  color: #eef1f3;
}

.related-tools a:hover {
  background: #3a3f45;
  color: #fff;
}

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

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-inset);
  background: #b6b6b6;
  font-size: 0.85rem;
}

.history-item code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-family: var(--font-pixel);
  color: #23262a;
}

.history-item__meta {
  flex: 1;
  min-width: 0;
}

.history-empty {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* Live chat/screen preview (Tellraw, Title)
 *
 * Both render straight from data.normalized_input on the same preview
 * response that already produced the command — never a second hand-rolled
 * formatter — so the preview can't drift from what actually gets sent.
 * Wrapped together with .command-output in .tool-output-column so the
 * 3-column .tool-layout grid still sees exactly one item per column; without
 * the wrapper, a sibling wedged in the DOM between the form and the output
 * would fall into a 4th grid position instead of stacking above the output.
 */
.tool-output-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* .card itself carries no padding — every other card variant in this
   project (.generator-card, .admin-card, .preset-card, .command-output …)
   sets its own, and these three were missing it, leaving content flush
   against the card edges. Matches .command-output's 18px, since these sit
   directly above it in the same .tool-output-column. */
.chat-preview-card,
.title-preview-card,
.item-preview-card {
  padding: 18px;
}

.chat-preview-card__head,
.title-preview-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.chat-preview-card__head h2,
.title-preview-card__head h2 {
  font-size: 1.05rem;
  margin: 0;
}

.chat-preview-card__sub,
.title-preview-card__sub {
  font-size: 0.85rem;
  color: #55595e;
  margin: 4px 0 16px;
}

/* Chat box: a translucent black strip over the block-grid page background,
   same silhouette as the game's chat log. */
.chat-preview {
  min-height: 64px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-inset);
  display: flex;
  align-items: center;
}

.chat-preview__empty {
  margin: 0;
  color: #9aa3ab;
  font-size: 0.88rem;
}

.chat-preview__line {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.chat-preview__line[hidden],
.chat-preview__empty[hidden] {
  display: none;
}

/* Segment spans get their color/bold/italic/underline set inline by
   tellraw.js from the same colors dataset (with hex) the form's color
   picker already uses — see chat-preview.html.php / tellraw.js. */

/* Screen: a dark 16:9-ish viewport standing in for the game screen, with a
   nine-slot hotbar strip purely as a position anchor so "title" vs
   "actionbar" placement reads at a glance without a real screenshot. */
.title-preview__screen {
  position: relative;
  min-height: 220px;
  background: radial-gradient(ellipse at center, #2c2f33 0%, #111315 100%);
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-inset);
  overflow: hidden;
}

.title-preview__text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 90%;
  text-align: center;
  font-family: var(--font-pixel);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
  word-break: break-word;
}

.title-preview__text[data-display-type="title"] {
  top: 40%;
  font-size: 1.6rem;
  font-weight: 700;
}

.title-preview__text[data-display-type="subtitle"] {
  top: 40%;
  font-size: 1rem;
}

.title-preview__text[data-display-type="actionbar"] {
  top: 82%;
  font-size: 0.85rem;
}

.title-preview__hotbar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
}

.title-preview__hotbar span {
  width: 20px;
  height: 20px;
  background: rgba(139, 139, 139, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.6);
}

/* Live item preview (Give) — same data-not-formatter contract as the
   chat/title previews above: give.js reads data.normalized_input, plus the
   item/enchantment names already embedded in this page for the asset
   picker and datalist, so nothing here is invented server-side. */
.item-preview-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.item-preview-card__head h2 {
  font-size: 1.05rem;
  margin: 0;
}

.item-preview-card__sub {
  font-size: 0.85rem;
  color: #55595e;
  margin: 4px 0 18px;
}

.item-preview-card__note {
  margin: 14px 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: #6b7278;
}

.item-slot-stage {
  display: flex;
  justify-content: center;
  padding-bottom: 18px;
}

.item-slot {
  position: relative;
  width: 56px;
  height: 56px;
  background: #8b8b8b;
  border: 2px solid var(--mc-outline);
  box-shadow: var(--bevel-inset);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item-slot img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

/* Enchant glint — shown only while the item actually has an enchantment
   (item-preview.js toggles this class), matching the real game: the
   shimmer is tied to having an enchantment, not to item rarity or name. */
.item-slot.has-glint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(216, 140, 255, 0.55) 35%, rgba(255, 255, 255, 0.75) 42%, rgba(216, 140, 255, 0.55) 49%, transparent 65%);
  background-size: 250% 250%;
  animation: item-glint 2.6s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes item-glint {
  0% { background-position: 120% -20%; }
  100% { background-position: -20% 120%; }
}

.item-slot__amount {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

/* Tooltip colours are the ones the real client always uses regardless of
   item — italic name on a custom name, dark-gray italic lore, gray
   enchantment lines — never a guessed rarity tint. See the note in
   item-preview.html.php for why the name itself stays white. */
.item-tooltip {
  position: relative;
  margin: 0 auto 4px;
  max-width: 300px;
  background: #100017;
  padding: 10px 12px 11px;
  border-top: 2px solid #5000c8;
  border-bottom: 2px solid #14001f;
  border-left: 2px solid #14001f;
  border-right: 2px solid #14001f;
  box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.4);
}

.item-tooltip__name {
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  color: #fff;
  margin: 0 0 6px;
  word-break: break-word;
}

.item-tooltip__name.is-custom {
  font-style: italic;
}

.item-tooltip__lore {
  font-family: var(--font-pixel);
  font-style: italic;
  font-size: 0.82rem;
  color: #a9a9c0;
  line-height: 1.55;
  margin: 0;
}

.item-tooltip__lines {
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  color: #9494b8;
  line-height: 1.55;
  margin: 6px 0 0;
}

.item-tooltip__id {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  color: #4f4f66;
}

.item-tooltip__lore[hidden],
.item-tooltip__lines[hidden] {
  display: none;
}