/* Explorer-only styles. Tokens come from site.css. */

.section-tight { margin-top: 1rem; }

.lookup { margin-top: 2rem; max-width: 34rem; }
.lookup label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.lookup-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lookup input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--slate);
  border-radius: 0;
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
}
.lookup input::placeholder { color: var(--slate); opacity: 0.8; }
.lookup input:focus-visible { outline-offset: 0; border-color: var(--ink); }
.field-error { margin: 0.4rem 0 0; color: var(--bad); min-height: 1.4em; font-size: 0.95rem; }

.map-hint { margin: 0.5rem 0 0; font-size: 0.88rem; }
@media (hover: none) { .map-hint { display: none; } }

.board-facts { margin-top: 2.5rem; }
.board-status { margin: 1rem 0 0; font-size: 0.9rem; }

/* ---------- a block ---------- */

#block { scroll-margin-top: 1rem; }
.block-head { display: grid; gap: 0.35rem; margin-bottom: 1.5rem; }
.block-head h2 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; }
.block-state { margin: 0; font-size: 1.15rem; font-weight: 600; }
.block-head .muted { margin: 0; }

.mark.bad { border-color: var(--bad); background: var(--bad); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.split .table-wrap { margin-top: 0; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;

}
table.data caption { text-align: left; font-size: 0.9rem; padding-bottom: 0.5rem; }
table.data th {
  text-align: left;
  font-weight: 600;
  color: var(--slate);
  font-size: 0.9rem;
  padding: 0 1rem 0.55rem 0;
  border-bottom: 1px solid var(--ink);
}
table.data td {
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--haze);
  vertical-align: baseline;
}
table.data .r { text-align: right; }
table.data .mono { font-size: 0.84rem; }
table.data tr > :last-child { padding-right: 0; }
.row-actions { white-space: nowrap; }
.row-actions > * + * { margin-left: 1rem; }

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--slate);
  cursor: pointer;
}
.linkish:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.linkish[disabled] { opacity: 0.5; cursor: progress; }

/* ---------- verification results ---------- */

.verify-actions { margin-top: 1.5rem; }
.file-btn { position: relative; }
.file-btn:focus-within { outline: 2px solid var(--lamp); outline-offset: 3px; }

.verify-out { margin-top: 1.5rem; max-width: 52rem; }
.verify-out:empty { display: none; }
.verify-out > p { margin: 0; }

.result {
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--mist);
  border-left: 4px solid var(--ink);
}
.result.part { border-left-color: color-mix(in srgb, var(--ink) 55%, var(--haze)); }
.result.bad { border-left-color: var(--bad); }
.result p { margin: 0 0 0.75rem; max-width: 64ch; }
.result .result-head { font-weight: 650; font-size: 1.08rem; }
.result.bad .result-head { color: var(--bad); }
.result .src { margin-top: 0.75rem; }

.result-grid {
  display: grid;
  gap: 0.9rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 1rem 0 0;
}
.result-grid div { min-width: 0; }
.result-grid dt { color: var(--slate); font-size: 0.88rem; }
.result-grid dd { margin: 0.1rem 0 0; font-weight: 600; }
.result-grid dd.hash { font-weight: 400; }
.result-grid div:nth-child(2) { grid-column: 1 / -1; }

.tamper { margin-top: 0.5rem; font-size: 0.95rem; }

.bad-text { color: var(--bad); }

/* ---------- identifiers ---------- */

.ids { margin: 0; display: grid; gap: 1.6rem; max-width: 52rem; }
.ids dt { font-weight: 650; }
.ids dd { margin: 0.2rem 0 0; }
.ids dd.src { margin-top: 0.35rem; }

/* ---------- the block map ---------- */

/* Colours for the map, one set per palette and theme. Each set was checked with the data-viz palette
 * validator: every pair of statuses stays apart for normal vision (OKLab dE >= 15) and under simulated
 * protan/deutan (>= 8); open, proved, folded and spined form a one-hue ramp whose lightest step
 * clears 2:1 against the map surface. The legend counts and the tooltip carry every value too. */
.bmap {
  /* One set of colours: cyan, magenta, hi-viz yellow, orange and light grey on black, the same in both
   * themes. Checked with the data-viz palette validator: worst pair OKLab dE 9.7 under simulated
   * red-green colour blindness and 19.0 for normal vision against the light theme's grey. In dark mode
   * that grey is the theme's darker one, which sits close to the black ground (1.8:1) — the same
   * quietness the strip above the map has in dark mode.
   * The black is the map's ground, so it is also the lines between the blocks and the space after the
   * last mined block. */
  --map-surface: #000000;
  /* the same grey as "Not yet proven" in the strip above the map, so it follows the theme */
  --map-open: var(--haze);
  --map-claimed: #00b0ff;
  --map-proved: #f038c0;
  --map-folded: #e8ff00;
  --map-spined: #ff8a1f;
  /* Shown only once the coordinator reports heartbeats, so not yet validated against the rest. */
  --map-proving: #00ff9c;
  --map-ring: #ffffff;
}

.bmap-wrap { margin-top: 2.5rem; }
.bmap-title { font-size: 1.05rem; margin-bottom: 0.75rem; }
.bmap [hidden] { display: none !important; }

.bmap-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
.bmap-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bmap-find { display: flex; align-items: center; gap: 0.35rem; }
.bmap-find input {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.8rem;
  width: 12rem;
  max-width: 45vw;
  border: 1px solid var(--haze);
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
}
.bmap-find input::placeholder { color: var(--slate); }
.bmap .chip {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--haze);
  border-radius: 999px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}
.bmap .chip:hover { color: var(--ink); border-color: var(--slate); }
.bmap .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--fog); }
.bmap .chip.icon { width: 2.1rem; padding-inline: 0; font-size: 1.1rem; }

.bmap-frame {
  position: relative;
  height: clamp(18rem, 72vw, 38rem);
  background: var(--map-surface);
  border: 2px solid var(--map-surface);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
/* The canvas only draws; a transparent layer over it does the scrolling, with a sizer the size of the
 * whole map, so the map scrolls natively instead of being dragged. */
.bmap-canvas { position: absolute; inset: 0; display: block; }
.bmap-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.bmap-scroll:focus-visible { outline: 2px solid var(--lamp); outline-offset: -2px; }
.bmap-sizer { width: 100%; height: 100%; }

.bmap-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.15rem;
  max-width: 17rem;
  padding: 0.55rem 0.75rem;
  background: var(--mist);
  color: var(--slate);
  border: 1px solid var(--haze);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.14);
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
}
.bmap-tip strong { color: var(--ink); font-size: 0.98rem; }
.bmap-tip-status { display: flex; align-items: center; gap: 0.45rem; color: var(--ink); }
.bmap-tip-status i { width: 0.9rem; height: 3px; flex: none; }

.bmap-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.85rem;
  background: rgb(0 0 0 / 0.75);
  color: #fff;
  font-size: 0.9rem;
  pointer-events: none;
}
.bmap-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; text-align: center; pointer-events: none; }
/* the key: one entry per status, in the order a block moves through them, each with what it means */
.bmap-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.9rem 1.4rem;
  margin-top: 1rem;
}
.bmap-legend li { display: flex; align-items: flex-start; gap: 0.55rem; }
.bmap-legend .swatch { margin-top: 0.22rem; }
.bmap-key { display: grid; gap: 0.15rem; min-width: 0; }
.bmap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.bmap-name { color: var(--ink); font-weight: 650; }
.bmap-legend .bmap-count { color: var(--ink); font-variant-numeric: tabular-nums; }
.bmap-desc { font-size: 0.82rem; line-height: 1.4; color: var(--slate); }

table.data.api td:first-child { white-space: nowrap; }