/* TPEE.app - the Model Selection Helper replica (session 0811).
   The styles for /models only. Loaded by pages/models.html with the standing
   asset cache token. Everything is namespaced msh- so it cannot collide with
   styles.css, and it is deliberately self-contained: the page must look right
   even if styles.css is mid-deploy. */

.msh-window {
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 10px;
  padding: 14px 16px 18px;
  margin: 1.1rem 0 1.4rem;
  background: rgba(127, 127, 127, .06);
}

.msh-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(128, 128, 128, .35);
  margin-bottom: .9rem;
}

.msh-titlebar h2 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: .01em;
}

.msh-hint {
  font-size: .84rem;
  opacity: .78;
}

.msh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  align-items: center;
  margin-bottom: .85rem;
}

.msh-field {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
}

.msh-field > span.msh-label { opacity: .85; }

.msh-window input[type="text"],
.msh-window input[type="search"],
.msh-window input[type="number"],
.msh-window select {
  font: inherit;
  font-size: .9rem;
  padding: .28rem .45rem;
  border: 1px solid rgba(128, 128, 128, .55);
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  max-width: 15rem;
}

.msh-window input[type="range"] { width: 8.5rem; }

.msh-radio {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .86rem;
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 999px;
  padding: .16rem .6rem;
  cursor: pointer;
}

.msh-radio input { margin: 0; }

.msh-radio--on {
  border-color: #b8860b;
  background: rgba(184, 134, 11, .16);
  font-weight: 600;
}

.msh-check { font-size: .88rem; display: inline-flex; align-items: center; gap: .35rem; }

.msh-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  font-size: .88rem;
  min-height: 2.1rem;
  margin-bottom: .35rem;
}

.msh-count { font-weight: 600; }
.msh-showing { opacity: .8; }
.msh-warn { color: #c0392b; font-weight: 600; }
.msh-note { color: #1a7f37; font-weight: 600; }

.msh-scroll { overflow-x: auto; }

.msh-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .86rem;
  min-width: 60rem;
}

.msh-table th,
.msh-table td {
  text-align: left;
  padding: .34rem .55rem;
  border-bottom: 1px solid rgba(128, 128, 128, .28);
  white-space: nowrap;
}

.msh-table thead th {
  position: sticky;
  top: 0;
  background: rgba(127, 127, 127, .14);
  font-weight: 700;
}

.msh-table tbody tr:nth-child(even) { background: rgba(127, 127, 127, .07); }

.msh-table td.msh-num { font-variant-numeric: tabular-nums; }

.msh-empty {
  padding: .9rem 0 .2rem;
  font-size: .9rem;
}

.msh-legend {
  font-size: .84rem;
  opacity: .82;
  margin-top: .7rem;
}

@media (prefers-color-scheme: dark) {
  .msh-window { background: rgba(255, 255, 255, .045); }
  .msh-window input[type="text"],
  .msh-window input[type="search"],
  .msh-window input[type="number"],
  .msh-window select { background: rgba(0, 0, 0, .25); }
}