/* tool_seeds.css: /tools/seed-map, /tools/seed-map/<full seed>, /tools/seed-search and the "Seed maps" card of
   seed pages (SEEDS-PAGES lane). Tokens and atoms from theme.css only (docs/LOOK.md): cards, buttons, entity refs
   are the theme's atoms; the map frame and markers use the panel colours as tool_worldmap.css does. The map pixels
   are the game's map colours (images made by lane SEEDS-GEN). */

/* seed text + copy button */
.sm-seed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.sm-code { padding: var(--sp-1) var(--sp-2); background: var(--c-search-bg); border: 2px solid var(--c-search-border);
  overflow-wrap: anywhere; min-width: 0; }
.sm-seed .btn { min-height: var(--tap); }
.sm-how { margin: 0 0 var(--sp-3); }

/* facts */
.sm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-2); margin: 0; }
.sm-facts div { min-width: 0; }
.sm-facts dt { color: var(--fg-soft); font-size: var(--fs-s); }
.sm-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* list page */
.sm-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 900px) { .sm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-card { min-width: 0; }
.sm-thumb { display: block; margin: 0 0 var(--sp-2); border: 2px solid var(--c-panel-border); background: var(--c-bg); }
.sm-thumb img, .sm-seedmaps img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.sm-ct { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }

/* card on seed pages */
.sm-seedmaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.sm-seedmaps a img { border: 2px solid var(--c-panel-border); }
.sm-seedmaps p { margin: var(--sp-1) 0 0; overflow-wrap: anywhere; }

/* viewer */
.sm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.sm-find { flex: 1 1 14rem; min-width: 0; }
.sm-find input { width: 100%; box-sizing: border-box; min-height: var(--tap); }
.sm-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.sm-btns .btn { min-width: var(--tap); min-height: var(--tap); }
.sm-zoom { min-width: 4rem; color: var(--fg-soft); font-size: var(--fs-s); text-align: right; }
.sm-found { margin: 0 0 var(--sp-2); min-height: 1em; }
.sm-found:empty { display: none; }
.sm-stage { position: relative; height: 280px; overflow: hidden; touch-action: none;
  background: var(--c-bg); border: 2px solid var(--c-panel-border); cursor: grab; }
.sm-stage:active { cursor: grabbing; }
.sm-stage:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.sm-stage canvas { display: block; }
.sm-mini { position: absolute; right: var(--sp-2); bottom: var(--sp-2); border: 2px solid var(--c-panel-border);
  background: var(--c-panel-bg); cursor: pointer; }
.sm-hover { position: absolute; left: var(--sp-2); top: var(--sp-2); padding: 0 var(--sp-2); pointer-events: none;
  background: var(--c-panel-bg); color: var(--fg); font-size: var(--fs-s); white-space: pre; }
.sm-hover:empty { display: none; }
.sm-load { position: absolute; left: 0; right: 0; top: 45%; margin: 0; text-align: center; color: var(--fg-soft); pointer-events: none; }
.sm-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
@media (min-width: 760px) { .sm-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sm-note { margin: 0 0 var(--sp-2); color: var(--fg-soft); font-size: var(--fs-s); }
.sm-set { margin: 0 0 var(--sp-3); padding: var(--sp-2); border: 2px solid var(--c-line); min-width: 0; }
.sm-set legend { padding: 0 var(--sp-1); font-weight: 700; }
.sm-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-height: var(--tap); }
.sm-l input { width: 20px; height: 20px; margin: 0; }
.sm-lt { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.sm-l .count { color: var(--fg-soft); font-size: var(--fs-s); white-space: nowrap; }
.sm-detail h3 { margin: 0 0 var(--sp-2); }
.sm-detail:empty::before { content: attr(data-empty); color: var(--fg-soft); }
.sm-pos { margin: 0 0 var(--sp-2); color: var(--fg-soft); font-size: var(--fs-s); }
.sm-items, .sm-list-chests, .sm-detail .sm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.sm-items li, .sm-detail .sm-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; }
.sm-items li.is-hit { outline: 2px solid var(--c-accent); }
.sm-items .ent { min-width: 0; overflow-wrap: anywhere; }
.sm-n { color: var(--fg-soft); font-size: var(--fs-s); white-space: nowrap; }
.sm-help { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.sm-help li { margin: 0 0 var(--sp-1); }
.sm-ctitle { display: flex; align-items: center; gap: var(--sp-1); }

/* seed search */
.ss-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin: 0 0 var(--sp-2); }
@media (min-width: 560px) { .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-f { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ss-f span { font-weight: 700; }
.ss-f select, .ss-f input { width: 100%; box-sizing: border-box; min-height: var(--tap); }
.ss-check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); margin: 0 0 var(--sp-2); }
.ss-check input { width: 20px; height: 20px; margin: 0; }
.ss-item { margin: 0 0 var(--sp-2); }
.ss-chips { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ss-chips:empty { display: none; }
.ss-chip { display: flex; align-items: center; gap: var(--sp-1); padding: 0 0 0 var(--sp-2); border: 2px solid var(--c-filter-border);
  background: var(--c-filter-bg); min-width: 0; }
.ss-x { min-width: var(--tap); min-height: var(--tap); }
.ss-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ss-btns .btn, .ss-out > .btn { min-height: var(--tap); }
.ss-res { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.ss-row { padding: var(--sp-2); border: 2px solid var(--c-line); min-width: 0; }
.ss-row .sm-seed .btn { display: inline-flex; align-items: center; }
.ss-facts, .ss-has { margin: 0; overflow-wrap: anywhere; }
.ss-sep { color: var(--fg-soft); }
.ss-empty { color: var(--fg-soft); }
.sm-detail .sm-list { max-height: 22rem; overflow-y: auto; }
.sm-reason, .sm-sp, .sm-sizes { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.sm-sizes-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sm-sizes-l li { padding: var(--sp-2); border: 2px solid var(--c-line); min-width: 0; }
.sm-seedmaps { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sm-seedmaps a img { max-width: 480px; }

/* generate any seed (tool_seeds_gen.js) */
.sg-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.sg-form input[name="seed"] { width: 100%; box-sizing: border-box; min-height: var(--tap); }
.sg-sizes { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; padding: var(--sp-2); border: 2px solid var(--c-line); min-width: 0; }
.sg-sizes legend { padding: 0 var(--sp-1); font-weight: 700; }
.sg-size { display: flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); }
.sg-size input { width: 20px; height: 20px; margin: 0; }
.sg-form .btn { justify-self: start; min-height: var(--tap); }
.sg-bar { height: 12px; margin: 0 0 var(--sp-2); background: var(--c-progress-empty); border: 2px solid var(--c-panel-border); }
.sg-bar span { display: block; height: 100%; width: 0; background: var(--c-progress-fill); transition: width 1s linear; }
.sg-out { margin: 0 0 var(--sp-4); }
.sg-out .sm-about { margin-bottom: var(--sp-3); }