/* Bedrock Pack Tools. #bpt-scoped — css/tool-theme.css loads after this file. See CLAUDE.md. */

#bpt { display: block; }

#bpt .bpt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
#bpt .bpt-tab { padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }

#bpt .bpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: start;
}
#bpt .bpt-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

#bpt .bpt-field { display: block; min-width: 0; }
#bpt .bpt-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 6px;
}
#bpt .bpt-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; opacity: .68; }
#bpt input[type="text"],
#bpt select { width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; }
#bpt .bpt-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
#bpt .bpt-checks { display: flex; flex-direction: column; gap: 6px; }

#bpt .bpt-segs { display: flex; flex-wrap: wrap; gap: 6px; }
#bpt .bpt-seg { padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }

#bpt .bpt-dep { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
#bpt .bpt-dep input { flex: 1 1 auto; min-width: 0; }
#bpt .bpt-drop-dep { width: 28px; height: 30px; border-radius: 6px; font-size: 15px; cursor: pointer; padding: 0; }

#bpt .bpt-texrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#bpt .bpt-texkey {
  flex: 0 0 68px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .72;
}

/* Generated JSON --------------------------------------------------------- */
#bpt .bpt-code {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(127, 127, 127, .10);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  /* JSON is the one thing here that is genuinely wider than the column, so it scrolls inside
   * its own box rather than pushing the page sideways. */
  overflow-x: auto;
  max-height: 460px;
  overflow-y: auto;
  white-space: pre;
}

/* Drop zone -------------------------------------------------------------- */
#bpt .bpt-drop {
  border: 2px dashed rgba(127, 127, 127, .45);
  border-radius: 14px;
  padding: 34px 20px;
  text-align: center;
  transition: border-color .15s, background-color .15s;
}
#bpt .bpt-drop.bpt-over { border-color: currentColor; background: rgba(127, 127, 127, .08); }
#bpt .bpt-droptitle { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
#bpt .bpt-dropsub { margin: 0 0 16px; font-size: 13.5px; opacity: .7; }
#bpt .bpt-file { display: inline-block; cursor: pointer; }

/* Report ----------------------------------------------------------------- */
#bpt .bpt-report { margin-top: 20px; }
#bpt .bpt-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
#bpt .bpt-sum { padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, .10); }
#bpt .bpt-sumlabel {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .68;
}
#bpt .bpt-sum strong { display: block; font-size: 19px; margin-top: 2px; word-break: break-all; }

#bpt .bpt-findings { display: flex; flex-direction: column; gap: 8px; }
#bpt .bpt-finding {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(127, 127, 127, .10);
  /* The bar is the only colour signal, and it reads in both themes because it is drawn from
   * the border rather than from a background the theme repaints. */
  border-left: 4px solid rgba(127, 127, 127, .5);
  font-size: 13.5px;
  line-height: 1.55;
}
#bpt .bpt-finding.bpt-error { border-left-color: #e0564f; }
#bpt .bpt-finding.bpt-warn { border-left-color: #d9a441; }
#bpt .bpt-finding.bpt-info { border-left-color: #5a9ec9; }
#bpt .bpt-flevel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  align-self: center;
}
#bpt .bpt-fid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  opacity: .75;
  align-self: center;
}
#bpt .bpt-fmsg { grid-column: 1 / -1; }
#bpt .bpt-fwhere {
  grid-column: 1 / -1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  opacity: .6;
  word-break: break-all;
}
#bpt .bpt-clean { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85; }
#bpt .bpt-callout {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(127, 127, 127, .10);
  font-size: 13.5px;
  line-height: 1.6;
}

#bpt .bpt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#bpt .bpt-btn { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; }
#bpt .bpt-note { margin: 14px 0 0; min-height: 1.2em; font-size: 13px; opacity: .85; }

#bpt .bpt-help { margin-top: 24px; font-size: 14.5px; line-height: 1.65; max-width: 72ch; }
#bpt .bpt-help p { margin: 0; }

/* A display rule beats the [hidden] attribute — see CLAUDE.md. */
#bpt [hidden] { display: none !important; }