.tool{
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.tool__toolbar{
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.tool__btn{
  font-family: var(--font-mono); font-size: 13px; font-weight: 450;
  padding: 0.4em 1em;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); cursor: pointer;
}
.tool__btn:hover{ background: var(--fg); color: var(--bg); }

.tool__contrast{
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 12px; color: var(--fg-muted);
}
/* Square handle, hairline track: inputs stay square in the house style. */
.tool__contrast input[type="range"]{
  width: 9rem; height: 0.9rem;
  appearance: none; -webkit-appearance: none;
  background: none; cursor: pointer;
}
.tool__contrast input[type="range"]::-webkit-slider-runnable-track{
  height: 1px; background: var(--border);
}
.tool__contrast input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 0.7rem; height: 0.7rem; margin-top: -0.35rem;
  background: var(--fg); border: 0; border-radius: 0;
}
.tool__contrast input[type="range"]::-moz-range-track{
  height: 1px; background: var(--border);
}
.tool__contrast input[type="range"]::-moz-range-thumb{
  width: 0.7rem; height: 0.7rem;
  background: var(--fg); border: 0; border-radius: 0;
}

/* Custom font: choose a local file. The native input is hidden and the label
   draws the control, so the text is ours ("local font") instead of the
   browser's "Choose File / No file selected". The loaded fonts are listed on
   their own row below (see .tool__fonts). */
.tool__local{
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-left: auto;
}
.tool__file{
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 12px; color: var(--fg-muted); cursor: pointer;
}
.tool__file input[type="file"]{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tool__file-btn{
  font-size: 12px; color: var(--fg);
  border: 1px solid var(--border); background: var(--bg);
  padding: 0.3em 0.7em;
}
.tool__file:hover .tool__file-btn{ color: var(--bg); background: var(--fg); }
.tool__file input:focus-visible + .tool__file-btn{ color: var(--bg); background: var(--fg); }

/* The local-font explainer: a square [ ? ] that reveals a tip on hover or
   focus. Its text is also the accessible name, so keyboard and screen-reader
   users get it without hovering. */
.tool__help{ position: relative; display: inline-flex; }
.tool__help-mark{
  font-size: 11px; color: var(--fg-muted); cursor: help;
  border: 1px solid var(--border); padding: 0 0.4em;
}
.tool__help:hover .tool__help-mark,
.tool__help:focus .tool__help-mark{ color: var(--fg); }
.tool__tip{
  position: absolute; right: 0; top: calc(100% + 0.4em); z-index: 5;
  width: 15rem; pointer-events: none;
  background: var(--bg); color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 0.5em 0.6em; font-size: 11px; line-height: 1.4;
  display: none;
}
.tool__help:hover .tool__tip,
.tool__help:focus .tool__tip{ display: block; }

/* Loaded local fonts, by their picker name, on their own row so a growing set
   wraps without crowding the toolbar. */
.tool__fonts{
  display: flex; flex-wrap: wrap; gap: 0.4em;
  margin-bottom: var(--space-3);
}
.tool__fonts:empty{ display: none; }
.tool__font{
  font-size: 11px; color: var(--fg-muted);
  border: 1px solid var(--border); padding: 0.15em 0.5em;
}

/* Slot chooser: after a file is chosen, where should it land. Floats over a
   dimmed backdrop like the font picker; three stacked square buttons. The
   first starts active; hover or focus moves the highlight. */
.slotpick{
  border: 1px solid var(--border); border-radius: 0;
  background: var(--bg); color: var(--fg);
  padding: 0; width: min(92vw, 18rem);
}
.slotpick::backdrop{ background: rgba(0,0,0,0.45); }
.slotpick__inner{ padding: var(--space-3); }
.slotpick__head{
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
}
.slotpick__opts{ display: flex; flex-direction: column; gap: var(--space-1); }
.slotpick__opt{
  font-family: var(--font-mono); font-size: 13px; font-weight: 450;
  text-align: left;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  padding: 0.5em 0.8em; cursor: pointer;
}
/* The active option (initially the first) carries the highlight, so focus does
   not pin a second one; keyboard focus moves it just like hover. */
.slotpick__opt:focus-visible{ background: var(--bg); color: var(--fg); }
.slotpick__opt:hover,
.slotpick__opt.is-active{ background: var(--fg); color: var(--bg); }

.tool__slots{
  display: flex; flex-direction: column; gap: var(--space-3);
}

.slot{
  border: 1px solid var(--border);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}

.slot__specimen{
  font-family: var(--font-mono);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.slot[data-slot="heading"] .slot__specimen{ font-size: clamp(28px, 4vw, 50px); }
.slot[data-slot="body"] .slot__specimen{ font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; }
.slot[data-slot="accent"] .slot__specimen{ font-size: clamp(16px, 1.8vw, 22px); }
/* A pass dims the specimens while its faces load (setPending in site/js/app.js),
   so the outgoing trio reads as updating instead of as the answer. */
.slot.is-pending .slot__specimen{ opacity: 0.3; }

.slot__meta{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}

.slot__name{
  font-family: var(--font-mono); font-size: 11px; font-weight: 450;
  color: var(--fg-muted); letter-spacing: 0.02em;
  background: none; border: 1px solid transparent;
  padding: 0.2em 0.5em; cursor: pointer;
}
.slot__name:hover{ color: var(--fg); border-color: var(--border); }

.slot__lock{
  font-family: var(--font-mono); font-size: 11px; font-weight: 450;
  padding: 0.2em 0.7em;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--fg-muted); cursor: pointer;
}
.slot__lock:hover{ color: var(--fg); }
.slot__lock[aria-pressed="true"]{
  background: var(--fg); color: var(--bg);
}

.tool__status{
  font-size: 12px; color: var(--fg-muted);
  margin-top: var(--space-2); min-height: 1.2em;
}

@media (max-width: 40rem){
  .tool__contrast input[type="range"]{ width: 6rem; }
}

.slot__recs{
  display: flex; flex-wrap: wrap; gap: 0.4em;
}
.slot__recs:empty{ display: none; }
.rec{
  font-family: var(--font-mono); font-size: 10px; font-weight: 450;
  color: var(--fg-muted); background: none;
  border: 1px solid var(--border);
  padding: 0.15em 0.5em; cursor: pointer;
}
.rec:hover{ color: var(--bg); background: var(--fg); }

/* Square panel: the house rule (panels stay square, radius is for chips). */
.picker{
  border: 1px solid var(--border); border-radius: 0;
  background: var(--bg); color: var(--fg);
  padding: 0; width: min(92vw, 30rem); max-height: 70vh;
}
.picker::backdrop{ background: rgba(0,0,0,0.45); }
.picker__head{
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-2); border-bottom: 1px solid var(--border);
}
.picker__search{
  flex: 1; font-family: var(--font-mono); font-size: 14px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.4em 0.6em;
}
.picker__close{
  font-family: var(--font-mono); font-size: 12px;
  background: none; border: 1px solid var(--border);
  color: var(--fg-muted); padding: 0.4em 0.7em; cursor: pointer;
}
.picker__list{
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; max-height: 48vh;
}
.picker__item{
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 0.35em var(--space-2); cursor: pointer; font-size: 13px;
}
.picker__item.is-active{ background: var(--fg); color: var(--bg); }
.picker__cat{ color: var(--fg-muted); font-size: 11px; }
.picker__item.is-active .picker__cat{ color: var(--bg); }
.picker__hint{
  margin: 0; padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--fg-muted);
}
.picker__hint kbd{ font-size: 10px; }

@media (max-width: 34rem){
  .tool__toolbar{ flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .tool__local{ margin-left: 0; }
  .picker{ width: 100%; max-width: 100%; }
  .slotpick{ width: 100%; max-width: 100%; }
}