app/static/component.css

* { box-sizing: border-box; }
.mat-app { display: flex; height: calc(100vh - 2px); width: 100%; margin: 0; color: #222;
  font: 13px/1.4 system-ui, sans-serif; background: white; }
.sidebar { width: 360px; flex: none; border-right: 1px solid #ccc; display: flex;
  flex-direction: column; background: #fafafa; }
.sidebar > input { margin: 6px 8px 2px; padding: 5px 7px; }
.identity { display: flex; gap: 5px; padding: 8px; border-bottom: 1px solid #ddd; align-items: end; }
.identity label { flex: 1; font-size: 11px; color: #555; }
.identity input { width: 100%; display: block; padding: 4px 6px; }
.filters { display: flex; padding: 4px 8px; gap: 7px; align-items: center; font-size: 11px; }
.filters select { min-width: 0; flex: 1; font-size: 11px; }
.counts { color: #666; font-size: 11px; padding: 0 8px 5px; }
.badge-legend { display: flex; flex-wrap: wrap; gap: 3px 8px; padding: 0 8px 5px; color: #666;
  font-size: 9px; }
.repository { font-size: 11px; padding: 0 8px 6px; color: #2678d8; }
.figure-list { overflow-y: auto; flex: 1; }
.pdfgroup { font-weight: 650; background: #e9e9e9; padding: 4px 8px; position: sticky; top: 0; z-index: 2; }
.item { padding: 4px 7px 4px 12px; cursor: pointer; display: flex; gap: 5px; align-items: center;
  border-bottom: 1px solid #f0f0f0; min-width: 0; }
.item:hover { background: #eef4ff; }.item.sel { background: #d6e6ff; }
.item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-badges { flex: none; display: flex; gap: 3px; align-items: center; }
.item.draft { border-left: 3px solid #2a7ade; padding-left: 9px; }.item.stale { color: #a34200; }
.queue-badge { border-radius: 8px; padding: 1px 5px; font-size: 9px; line-height: 1.4;
  white-space: nowrap; border: 1px solid transparent; }
.queue-badge.ok { color: #176b2c; background: #e4f5e8; border-color: #b7ddc0; }
.queue-badge.need { color: #955300; background: #fff0d6; border-color: #edc985; }
.queue-badge.neutral { color: #555; background: #eee; border-color: #d5d5d5; }
.queue-badge.ai { color: #6c5100; background: #fff9d8; border: 1px dashed #c69a20; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.toolbar { border-bottom: 1px solid #bbb; background: #fafafa; }
.figure-summary { min-height: 31px; padding: 5px 9px; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid #ddd; }.figure-summary .spacer { flex: 1; }
.workflow { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; }
.step-panel { padding: 5px 8px 7px; border-right: 1px solid #d5d5d5; min-width: 0; }
.review-step { flex: 0 0 330px; }.type-step { flex: 1 1 430px; }.georef-step { flex: 1 1 650px; }
.step-title { display: flex; align-items: center; gap: 5px; min-height: 23px; font-size: 11px;
  font-weight: 700; color: #333; white-space: nowrap; }
.step-number { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  color: white; background: #374b67; font-size: 10px; }
.step-controls, .types { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.toolbar button { padding: 4px 8px; cursor: pointer; border: 1px solid #aaa; border-radius: 4px; background: #fff; }
.toolbar button:hover, .import:hover { background: #edf4ff; border-color: #6d91be; }
.toolbar input[type=range] { width: 68px; vertical-align: middle; }.meta { color: #666; }
.prediction { border-radius: 9px; padding: 1px 6px; background: #eee; font-weight: 500; }
.prediction.unverified { background: #fff6cf; color: #6f5300; border: 1px dashed #c69a20; }
.state-note { color: #777; font-weight: 500; font-size: 10px; }
.state-note.need { color: #a55a00; }.state-note.ok { color: #207638; }
.state-button.active { color: white; background: #287946; border-color: #287946; box-shadow: inset 0 0 0 1px #ffffff55; }
.state-button.suggested { color: #634900; background: #fff8d6; border: 2px dashed #c69a20; padding: 3px 7px; }
.primary { color: white !important; background: #2678d8 !important; border-color: #2678d8 !important; }
.primary.active { background: #287946 !important; border-color: #287946 !important; }
.primary:disabled { color: #f5f5f5 !important; background: #9db8d8 !important; border-color: #9db8d8 !important; cursor: default; }
.clicked { animation: click-flash .32s ease-out; }
@keyframes click-flash { 0% { transform: scale(.95); box-shadow: 0 0 0 3px #2a7ade66; } 100% { transform: scale(1); } }
.toolbar-actions { flex: 0 0 145px; padding: 5px 7px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; align-content: center; }.toolbar-actions button, .toolbar-actions .import { font-size: 10px; padding: 3px 5px; }
.status { font-size: 11px; color: #278227; }.status.warn { color: #b44800; }.muted { color: #666; }
.chip { font-size: 11px; padding: 3px 7px; border-radius: 10px;
  border: 1px solid #bbb; cursor: pointer; user-select: none; }.chip.on { color: white; font-weight: 650; border-color: transparent; }
.maps { display: flex; flex: 1; min-height: 0; }.maps > div:not(.splitbar) { flex: 1; position: relative; }
.map { height: 100%; background: #e8e8e8; }.splitbar { width: 5px; background: #ccc; }
.maplabel { position: absolute; z-index: 500; top: 6px; left: 46px; background: white; padding: 2px 8px;
  border-radius: 3px; box-shadow: 0 1px 3px #0004; }
.gcp-panel { height: 150px; flex: none; border-top: 1px solid #ccc; display: flex; }
.table-wrap { flex: 1; overflow-y: auto; }.hint { width: 310px; flex: none; padding: 8px 10px; color: #555; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12px; } th, td { border: 1px solid #e0e0e0; padding: 2px 6px; text-align: right; }
th { background: #f2f2f2; position: sticky; top: 0; }.del { text-align: center; color: #b00; cursor: pointer; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.gcp-icon div { width: 22px; height: 22px; border-radius: 50%; color: white; font: bold 12px/20px sans-serif;
  text-align: center; border: 2px solid white; box-shadow: 0 0 3px #000; }
.import { padding: 4px 9px; border: 1px solid #888; border-radius: 4px; background: #eee; cursor: pointer; text-align: center; }.import input { display: none; }
@media (max-width: 1100px) { .sidebar { width: 300px; }.workflow { flex-wrap: wrap; }.review-step { flex-basis: 38%; }
  .type-step { flex-basis: 62%; }.georef-step { flex-basis: calc(100% - 145px); }.gcp-panel { height: 125px; }.hint { width: 240px; } }