body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #f6f7f9; color: #222; }
header { background: #1f2937; color: #fff; padding: .7rem 1.2rem;
         display: flex; align-items: center; gap: 1rem; }
header a { color: #fff; text-decoration: none; }
header .nav a { margin-right: 1rem; }
header .osm-target { display: inline-block; padding: 2px 8px; border-radius: 10px;
                     font-size: .72rem; font-weight: 700; letter-spacing: .04em;
                     vertical-align: middle; margin-right: .8rem; }
header .osm-target-dev { background: #fbbf24; color: #78350f; }
header .osm-target-prod { background: #dc2626; color: #fff; }
header .osm-target-other { background: #6b7280; color: #fff; }
header .meta { margin-left: auto; font-size: .82rem; color: #cbd5e1; }
header .meta a { color: #cbd5e1; }
header .meta a:hover { color: #fff; text-decoration: underline; }
header .meta .sep { margin: 0 .4rem; color: #64748b; }
main { padding: 1.2rem; max-width: 1200px; margin: 0 auto; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #e5e7eb; padding: .4rem .6rem; text-align: left; font-size: .92rem; }
th { background: #f3f4f6; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .8rem; background: #eef; }
a.pill { text-decoration: none; color: #1d4ed8; }
a.pill:hover { background: #dbeafe; }
.pill.warn { background: #fde68a; }
.pill.bad { background: #fecaca; }
.pill.ok { background: #bbf7d0; }
button, .btn { background: #2563eb; color: #fff; border: 0; padding: .4rem .8rem; border-radius: 4px; cursor: pointer; font-size: .9rem; }
button.secondary { background: #6b7280; }
button.danger { background: #dc2626; }
button:disabled, button[disabled] { opacity: .55; cursor: wait; }
form.inline { display: inline; }
/* Pipeline stepper */
.pipeline-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.pipeline-header .run-all { background: #059669; font-weight: 600; }
.pipeline-header .run-all:hover:not(:disabled) { background: #047857; }
.pipeline-hint { font-size: .85rem; }
.pipeline-spinner { width: 14px; height: 14px; border: 2px solid #cbd5e1; border-top-color: #2563eb;
                    border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
#pipeline.htmx-request button { opacity: .55; pointer-events: none; cursor: wait; }
.stepper { list-style: none; padding: 0; margin: 0 0 .6rem 0; display: flex; flex-wrap: wrap;
           align-items: center; gap: .4rem; }
.stepper .step { display: inline-flex; align-items: center; gap: .4rem; }
.stepper .step + .step::before { content: "→"; color: #9ca3af; margin: 0 .2rem; }
.step-badge { display: inline-flex; align-items: center; justify-content: center;
              width: 22px; height: 22px; border-radius: 50%; font-size: .78rem; font-weight: 600;
              background: #e5e7eb; color: #374151; }
.step.done .step-badge { background: #059669; color: #fff; }
.step.done .stage-btn { background: #6b7280; }
.stage-msg { margin: .4rem 0 .2rem; }
.stage-msg.err { background: #fee2e2; color: #991b1b; padding: .4rem .6rem; border-radius: 4px; }
.stage-counts { margin: .2rem 0 0; }
.flash { background: #fef3c7; padding: .5rem .8rem; border-radius: 4px; margin-bottom: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.muted { color: #6b7280; }
code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }
#leaflet-map { height: 280px; border-radius: 4px; }
.kbd-bar { position: sticky; top: 0; z-index: 5; background: #fff;
           border-bottom: 1px solid #e5e7eb; padding: .5rem 0; margin: -1rem -1rem .6rem;
           padding-left: 1rem; padding-right: 1rem;
           display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.kbd { display: inline-block; min-width: 1em; padding: 0 .35em;
       border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 3px;
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em;
       background: #f8fafc; color: #111; line-height: 1.4; }
.kbd-bar button .kbd { background: rgba(255,255,255,.85); color: #111; border-color: #cbd5e1; }
body.static-export .kbd-bar { display: none; }
.row-decided-approve, .row-decided-reject {
  padding-left: .5rem; transition: opacity .15s;
}
.row-decided-approve { box-shadow: inset 4px 0 0 #16a34a; }
.row-decided-reject  { box-shadow: inset 4px 0 0 #dc2626; opacity: .55; text-decoration: line-through; }
.run-all-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
               margin: .4rem 0 .5rem; }
.run-all-bar .run-all-btn { background: #059669; font-weight: 600; }
.run-all-bar .run-all-btn:hover:not(:disabled) { background: #047857; }
.run-all-banner { font-size: .9rem; }
.run-all-legend { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
                  font-size: .82rem; margin: 0 0 .6rem; }
.run-all-legend .swatch { display: inline-block; width: .8rem; height: .8rem;
                          border-radius: 2px; margin-right: .25rem; vertical-align: middle; }
.run-all-legend .swatch-pending   { background: #94a3b8; opacity: .5; }
.run-all-legend .swatch-running   { background: #f59e0b; }
.run-all-legend .swatch-done      { background: #16a34a; }
.run-all-legend .swatch-skipped   { background: #16a34a; opacity: .35; }
.run-all-legend .swatch-cancelled { background: #6b7280; }
.run-all-legend .swatch-error     { background: #dc2626; }
.run-all-workers input { width: 3.5rem; margin-left: .25rem; padding: .2rem .35rem;
                         border: 1px solid #d1d5db; border-radius: 3px; }
[data-tip] { position: relative; cursor: help; }
a[data-tip], button[data-tip] { cursor: pointer; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: 5px 9px; border-radius: 4px;
  font-size: .78rem; line-height: 1.3; font-weight: normal;
  width: max-content; max-width: 280px; white-space: normal; text-align: left;
  z-index: 1000; pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}