/* Gap-review page: full-viewport two-panel app shell over ../index.css. */

html, body.app { height: 100%; }
body.app { margin: 0; display: flex; flex-direction: column; }

/* --- header bar --- */
.bar {
  flex: none;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.bar-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.bar h1 { font-size: 1.25rem; margin: 0; border: 0; }
.bar .back { font-size: .9rem; white-space: nowrap; }

.counts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}
.count {
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--code-bg);
  line-height: 1.15;
}
.count strong { font-size: 1.15rem; margin-right: .35rem; }
.count span { color: var(--muted); font-size: .82rem; }
.count.missing { border-left: 4px solid #7048e8; }
.count.mismatch { border-left: 4px solid #1c7ed6; }
.count.unnamed { border-left: 4px solid #e8590c; }
.count.trca { border-left: 4px solid #868e96; }
.count.meta-count {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: .82rem;
  background: none;
  border: 0;
  margin-left: auto;
}

/* --- two-panel body --- */
.layout { flex: 1; display: flex; min-height: 0; }
#gap-map { flex: 1 1 auto; min-width: 0; height: 100%; }

.panel {
  flex: 0 0 30rem;
  max-width: 45vw;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border);
}
.panel-head { flex: none; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.table-scroll { flex: 1; overflow: auto; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
}
.controls label { display: inline-flex; align-items: center; gap: .35rem; }
.controls #filter {
  flex: 1 1 9rem;
  padding: .35rem .55rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.hint { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }

.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; }
.swatch.missing { background: #7048e8; }
.swatch.mismatch { background: #1c7ed6; }
.swatch.unnamed { background: #e8590c; }
.swatch.trca { background: #868e96; }

/* --- data table --- */
#gap-table { font-size: .9rem; }
#gap-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  width: auto;
  background: var(--code-bg);
  border-top: 0;
}
#gap-table td { padding: .45rem .7rem; }
#gap-table tbody tr { cursor: pointer; }
#gap-table tbody tr:hover { background: #f0f8f3; }
#gap-table tbody tr.selected { background: #e6f4ec; }
#gap-table .status-missing { color: #5f3dc4; font-weight: 600; }
#gap-table .status-mismatch { color: #1864ab; font-weight: 600; }
#gap-table .status-unnamed { color: #c2410c; font-weight: 600; }
#gap-table .status-trca { color: #666; font-weight: 600; }
#gap-table .osm-blank { color: var(--muted); }
#gap-table .osm-name { display: block; color: var(--muted); font-size: .85em; }
#gap-table .osm-links { white-space: nowrap; }

.hint kbd {
  display: inline-block;
  padding: 0 .35em;
  font: 600 .9em/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink, #222);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

@media (max-width: 820px) {
  .layout { flex-direction: column; }
  #gap-map { height: 48vh; flex: none; }
  .panel { flex: 1; max-width: none; border-left: 0; border-top: 1px solid var(--border); }
  .count.meta-count { margin-left: 0; }
}