/* 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; }
/* Status colours: the same palette as the map's lines (COLORS in gaps.js). */
.count.headline { border-left: 4px solid #c2255c; }
.count.headline strong { font-size: 1.35rem; }
.count.missing { border-left: 4px solid #f08c00; }
.count.says_no { border-left: 4px solid #e03131; }
.count.nosep { border-left: 4px solid #1098ad; }
.count.nobike { border-left: 4px solid #7048e8; }
.count.unsigned_route { border-left: 4px solid #66a80f; }
.count.spot { border-left: 4px solid #adb5bd; }
.count.meta-count {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: .82rem;
  background: none;
  border: 0;
  margin-left: auto;
}

/* The caveat under the counts: what the headline figure does and does not
   mean. Kept short and in the header, since the figure is quoted alone. */
.note {
  margin: .5rem 0 0;
  max-width: 75rem;
  font-size: .85rem;
  line-height: 1.45;
}

/* The City licence notice. Publishing these tiles redistributes City data, and
   carrying this line is the licence condition attached to that -- so it sits in
   the gap page header in its own right, not only on the landing page, because
   the gap page is often the only page a mapper ever opens. */
.licence {
  margin: .6rem 0 0;
  font-size: .82rem;
  color: var(--muted);
}

/* Shown only when Overpass could not be reached and the diff ran on cached OSM;
   the header is otherwise all counts, so a warning needs its own row. */
.stale {
  margin: .5rem 0 0;
  padding: .45rem .7rem;
  border-left: 4px solid #e8590c;
  background: rgba(232, 89, 12, .09);
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.4;
}

/* --- 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 40rem;
  max-width: 55vw;
  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: .5rem .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; }

/* Line swatches: the map draws lines, so the key is a short bar, not a dot. */
.swatch { display: inline-block; width: 1rem; height: .3rem; border-radius: 2px; }
.swatch.new { background: #c2255c; }
.swatch.missing { background: #f08c00; }
.swatch.says_no { background: #e03131; }
.swatch.nosep { background: #1098ad; }
.swatch.nobike { background: #7048e8; }
.swatch.unsigned_route { background: #66a80f; }
.swatch.planned { background: #868e96; }
.swatch.spot { background: #adb5bd; }

/* --- 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; }
/* Status text, a shade darker than the line colour so it reads on white. */
.status-new { color: #a61e4d; font-weight: 600; }
.status-missing { color: #b35c00; font-weight: 600; }
.status-says_no { color: #c92a2a; font-weight: 600; }
.status-nosep { color: #0b7285; font-weight: 600; }
.status-nobike { color: #5f3dc4; font-weight: 600; }
.status-unsigned_route { color: #4c7a0b; font-weight: 600; }
.status-planned { color: #666; font-weight: 600; }
.status-spot { color: #868e96; font-weight: 600; }

#gap-table tr.seg td { vertical-align: top; }
#gap-table .len { color: var(--muted); font-weight: 400; font-size: .85em; }
/* The tag to add: copyable as is, so it wraps at its own "+" joins only. */
#gap-table code.tag { font-size: .8rem; background: var(--code-bg); padding: 0 .25em; }
#gap-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#gap-table .osm-blank { color: var(--muted); }
#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; }
}