/* GPX Cleaner page styles. Brand tokens come from shared/brand.css. */
* { box-sizing: border-box; margin: 0; }
/* Our id-selector display rules outrank the UA's [hidden] { display: none }; without
   this, hidden panels render anyway. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-base);
}

#top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
#mark { height: 22px; }
#brandWord {
  font-family: var(--brand-serif); letter-spacing: var(--ls-brand);
  color: var(--brand-gold); font-size: var(--fs-base);
}
#toolName {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  color: var(--ink-dim); border-left: 1px solid var(--line); padding-left: 10px;
}
#privacy { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-dim); }

main { flex: 1; display: flex; min-height: 0; }
#mapWrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }

#dropHint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 11, 0.55); z-index: 5;
}
#dropHint.drag { outline: 2px dashed var(--accent); outline-offset: -12px; }
#dropCard {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 36px; background: var(--surface); border: 1px solid var(--line);
}
#dropCard .hint { max-width: 260px; text-align: center; }

#legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 4;
  background: rgba(10, 13, 11, 0.85); border: 1px solid var(--line);
  padding: 8px 10px; font-size: var(--fs-body); display: grid; gap: 4px;
}
.sw { display: inline-block; width: 14px; height: 4px; margin-right: 6px; vertical-align: middle; }
.sw.ghost { background: #c8d0d6; }
.sw.shared { background: #38cfff; }
.sw.tail { background: #e9d5ff; }
.sw.routex { background: repeating-linear-gradient(90deg, #e5e7eb 0 4px, transparent 4px 8px); }
.sw.wpt { background: #facc15; width: 8px; height: 8px; border-radius: 50%; }
.sw.grp { background: #fb923c; width: 8px; height: 8px; border-radius: 50%; }
.sw.flag { background: #ef4444; width: 8px; height: 8px; border-radius: 50%; }

#panel {
  width: 340px; overflow-y: auto; border-left: 1px solid var(--line);
  padding: 12px; display: flex; flex-direction: column; gap: 16px;
}
#panel h2 {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.row output { color: var(--accent); float: right; margin-left: 8px; }
.row.check { flex-direction: row; align-items: flex-start; gap: 8px; }
.row.check small { display: block; color: var(--ink-dim); font-size: var(--fs-meta); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.hint { color: var(--ink-dim); font-size: var(--fs-body); }
.stats { color: var(--ink-dim); font-size: var(--fs-body); white-space: pre-line; }

button {
  font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--line); padding: 6px 12px; cursor: pointer;
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }
#downloadBtn { width: 100%; border-color: var(--accent); color: var(--accent); padding: 10px; }

#wptBulk { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
#wptBulk button { font-size: var(--fs-body); padding: 3px 8px; }

.groupCard, .flagCard, .routeRow {
  border: 1px solid var(--line); padding: 8px; margin-bottom: 6px; font-size: var(--fs-body);
}
.groupCard header, .flagCard header {
  display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink-dim);
}
.groupCard a, .flagCard a { color: var(--accent); cursor: pointer; }
.member { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; }
.member .when { color: var(--ink-dim); font-size: var(--fs-meta); margin-left: auto; }
.routeRow { display: flex; gap: 8px; align-items: center; }
.routeRow .meta { color: var(--ink-dim); margin-left: auto; font-size: var(--fs-meta); }

footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--ink-dim);
}

@media (max-width: 800px) {
  main { flex-direction: column; }
  #mapWrap { min-height: 45vh; }
  #panel { width: 100%; border-left: none; border-top: 1px solid var(--line); }
}