/* App-specific styles for the Project Zomboid chunk cleaner.
   Shared tokens, fonts, components and flair load first, copied unedited
   from ketchup-site-design (see that repo's DESIGN.md for the full spec).
   This file only adds what's specific to this tool: page shell, the map
   and its controls, the option list, and the confirm dialog. */

[hidden] {
  display: none !important;
}

/* ══ page shell: a full-height column so header/footer stay pinned to the
   viewport edges as bars, with the content column between them. Wider than
   the other tools because the map needs the room. ══ */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-bar {
  width: 100%;
  max-width: calc(1040px + var(--host-rail-w, 0px));
  margin: 0 auto;
  padding-inline: var(--page-padding);
}
main.app-bar {
  padding-block: var(--sp-8) clamp(40px, 6vw, 64px);
  flex: 1;
}

footer.app-bar {
  margin-top: auto;
}

.header-dot {
  color: var(--brand);
}

.lede {
  margin-top: var(--sp-3);
}

.build-badge {
  margin-bottom: var(--sp-3);
}

/* A panel here holds a whole content section (heading, map, options)
   rather than the compact header/body pair .panel-body is sized for, so it
   sets its own padding instead of nesting one. */
.panel {
  padding: var(--sp-6);
}

.panel .h2 {
  margin: 0 0 var(--sp-3);
}

.panel p {
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}

.panel p:last-child {
  margin-bottom: 0;
}

code {
  background: var(--bg-inset);
  border-radius: var(--radius-xs);
  padding: 0.1rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.panel .hint {
  font-size: 0.9rem;
  line-height: 1.6;
}

.panel .status-error {
  margin: var(--sp-4) 0 0;
  color: var(--danger);
}

.open-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.open-actions .status-pill {
  color: var(--text-muted);
}

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-5);
  font-family: var(--font-mono);
  font-size: 13px;
}

.facts dt {
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ══ map: a recessed well inside the panel, not a second panel, so the
   Surface Rule's no-stacked-panels holds ══ */
.map-toolbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.map {
  display: block;
  width: 100%;
  height: min(68vh, 640px);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
}

.map[data-tool="pan"] {
  cursor: grab;
}

.map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-3) 0;
  min-height: 20px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.swatch-kept {
  opacity: 0.55;
  background: var(--org-mark);
}

.swatch-doomed {
  background: var(--brand);
}

.swatch-guard {
  border: 2px solid var(--info);
}

.swatch-keep {
  border: 2px solid var(--org-mark);
}

.swatch-player {
  border: 2px solid var(--warning);
}

.box-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.box-fields {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.box-fields label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.box-fields .field {
  width: 7.5rem;
}

.box-list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
}

.box-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
}

.options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  color: var(--text);
}

.options .mono-label:not(:first-child) {
  margin-top: var(--sp-3);
}

.options .hint {
  margin: 0;
  max-width: 44rem;
}

.box-list input.field {
  width: 14rem;
}

.box-list .box-what {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.trash {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.trash p {
  margin: var(--sp-2) 0 var(--sp-3);
}

.trash .open-actions {
  margin-bottom: 0;
}

.option-indent {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: var(--sp-3);
  margin-left: calc(24px + var(--sp-2));
  color: var(--text-muted);
}

.option-indent .field {
  width: 5rem;
}

.confirm {
  width: min(32rem, calc(100vw - 2 * var(--page-padding)));
  padding: var(--sp-6);
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: var(--shadow-deep);
}

.confirm::backdrop {
  background: rgb(5 14 23 / 0.7);
}

.confirm .h2 {
  margin: 0 0 var(--sp-3);
}

.confirm p {
  margin: 0 0 var(--sp-4);
  color: var(--text-muted);
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

.where-list {
  margin: 0;
}

.where-list dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-top: var(--sp-5);
}

.where-list dd {
  margin: var(--sp-1) 0 0;
  color: var(--text-muted);
  line-height: 1.6;
}