.catalog-shell {
  min-height: 100vh;
  padding: 0 0 2rem;
  background: radial-gradient(circle at 30% 0, #143a55 0, #06111e 34rem, #020812 72rem);
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #31546a;
  background: rgba(7, 23, 37, 0.94);
}

.catalog-intro, .catalog-controls, .catalog-progress, .impactor-table-scroll, .catalog-shell footer {
  margin-left: 1rem;
  margin-right: 1rem;
}

body { overflow-x: auto; overflow-y: scroll; }

.catalog-intro { max-width: 78rem; }
.catalog-intro h2 { margin: 1.2rem 0 0.4rem; }
.catalog-intro p { margin: 0.35rem 0; color: #c5dce6; line-height: 1.5; }
.source-links a { color: #aee9ff; }
.jn4-explanation {
  max-width: 78rem;
  margin: 0.8rem 1rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid #8c6941;
  border-radius: 8px;
  background: rgba(71, 43, 20, 0.38);
}
.jn4-explanation summary { margin: 0; cursor: pointer; font-size: 1rem; font-weight: 700; color: #f6d48c; }
.jn4-explanation[open] summary { margin-bottom: 0.35rem; }
.jn4-explanation p { margin: 0.3rem 0; color: #eadbc0; line-height: 1.42; }

.catalog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-top: 1rem;
}
.catalog-controls label { display: grid; gap: 0.3rem; color: #bdd5e0; font-size: 0.82rem; }
#catalog-summary { padding-bottom: 0.55rem; color: #f7d77e; }
.column-controls { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; margin: 0.75rem 1rem 0; border: 1px solid #31546a; color: #c7dde7; font-size: 0.76rem; }
.column-controls label { display: inline-flex; align-items: center; gap: 0.2rem; }

.catalog-progress {
  display: grid;
  grid-template-columns: minmax(180px, 360px) minmax(240px, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.8rem;
  color: #bcd6e2;
  font-size: 0.78rem;
}
.catalog-progress[hidden] { display: none; }
.catalog-progress progress { width: 100%; }

.impactor-table {
  width: max-content;
  max-width: none;
  border-collapse: collapse;
  margin-top: 1rem;
  background: rgba(5, 18, 30, 0.94);
}
.impactor-table-scroll { margin-top: 1rem; overflow: visible; }
.table-optimal-width .impactor-table-scroll { min-height: 52vh; }
.impactor-table-scroll .impactor-table { margin: 0; }
.impactor-table th, .impactor-table td {
  max-width: 31rem;
  padding: 2px;
  border: 1px solid #31546a;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.impactor-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: pointer;
  padding-right: 10px;
  background: #12344c;
  color: #f2f8fb;
}
.impactor-table th:first-child {
  left: 0;
  z-index: 5;
}
.impactor-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #071725;
  box-shadow: 2px 0 0 #31546a;
  white-space: nowrap;
}
.impactor-table tr[data-available="false"] td:first-child { background: #2b1820; }
.impactor-table tbody tr:hover td:first-child { background: #14344a; }
.impactor-table a.mpc-object-link,
.impactor-table a.impact-location-link { color: #aee9ff; }
.impactor-table a.mpc-object-link { font-weight: 700; }
.column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 3;
  width: 9px;
  height: 100%;
  min-height: 28px;
  cursor: col-resize;
  touch-action: none;
  border-right: 2px solid transparent;
}
.column-resizer:hover,
.column-resizer:focus-visible {
  outline: none;
  border-right-color: #f2c35b;
  background: rgba(242, 195, 91, 0.18);
}
.impactor-table th[data-type="number"], .impactor-table td.numeric { text-align: right; }
.impactor-table tr[data-available="false"] { color: #b8c3c9; background: rgba(66, 31, 31, 0.35); }
.impactor-table a.open-impactor { display: inline-block; color: #072033; background: #f2c35b; border-radius: 5px; padding: 0.24rem 0.42rem; text-decoration: none; font-weight: 700; }
.status-ok { color: #a8efb3; }
.status-blocked { color: #ffb6aa; }
.catalog-shell footer { margin-top: 1.4rem; color: #8fb1c1; font-size: 0.76rem; }

@media (max-width: 700px) {
  .catalog-header { align-items: flex-start; flex-direction: column; }
  .catalog-intro, .catalog-controls, .catalog-progress, .impactor-table-scroll, .catalog-shell footer { margin-left: 0.55rem; margin-right: 0.55rem; }
  .catalog-progress { grid-template-columns: 1fr; }
  .jn4-explanation, .column-controls { margin-left: 0.55rem; margin-right: 0.55rem; }
}

body { min-width: 0; }
.impactor-table-scroll { overflow: visible; }
