/* ACARiS Annotation Workbench — box editor
   Box geometry is in NATURAL image pixels. The .aw-canvas wrapper is sized to
   the image's natural size and scaled with a CSS transform, so a box at
   left:1264px is correct at every zoom level without recalculating anything.
   --z carries the zoom so borders and handles can counter-scale and keep a
   constant size on screen. */

.aw-wrap {
  --z: 1;
  --aw-bg: #14161a;
  --aw-panel: #1d2026;
  --aw-line: #2f343d;
  --aw-text: #e8eaed;
  --aw-dim: #9aa0aa;
  --aw-accent: #4c9aff;
  display: flex; flex-direction: column;
  height: calc(100vh - 120px); min-height: 520px;
  background: var(--aw-bg); color: var(--aw-text);
  border: 1px solid var(--aw-line); border-radius: 8px; overflow: hidden;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

/* The hidden attribute must win over every display rule below. Without this,
   .aw-modal{display:flex} and .aw-stage-empty{display:flex} outrank the UA
   stylesheet and the dialogs are stuck open with no way to dismiss them. */
.aw-wrap [hidden] { display: none !important; }

/* ---- header / footer ---- */
.aw-head, .aw-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--aw-panel);
  border-bottom: 1px solid var(--aw-line); flex: 0 0 auto;
}
.aw-foot { border-bottom: 0; border-top: 1px solid var(--aw-line); }
.aw-head-left { display: flex; align-items: center; gap: 10px; }
.aw-head-mid { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--aw-dim); }
.aw-head-right { display: flex; align-items: center; gap: 8px; }
.aw-foot-left { flex: 1; display: flex; gap: 6px; }
.aw-task-title { font-weight: 600; }
.aw-sep { opacity: .4; }
.aw-count b { color: var(--aw-text); }
.aw-prefill-flag {
  background: #3b2f10; color: #ffd580; border: 1px solid #5c4a17;
  padding: 2px 8px; border-radius: 99px; font-size: 12px;
}
.aw-status {
  font-size: 12px; padding: 2px 8px; border-radius: 99px;
  background: #23272e; color: var(--aw-dim);
}
.aw-status[data-state="saving"] { background: #23303f; color: #8ec5ff; }
.aw-status[data-state="saved"]  { background: #1d3325; color: #7ee2a8; }
.aw-status[data-state="error"]  { background: #3a2020; color: #ff9b9b; }

/* ---- layout ---- */
.aw-main { flex: 1; display: flex; min-height: 0; }

.aw-keysrail {
  flex: 0 0 168px; background: var(--aw-panel);
  border-right: 1px solid var(--aw-line);
  padding: 10px 12px; overflow-y: auto;
}
.aw-keysrail h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--aw-dim); font-weight: 600;
}
.aw-keysrail .aw-keys { font-size: 12px; }
.aw-keysrail .aw-keys td { padding: 2px 0; color: var(--aw-dim); }
.aw-keysrail .aw-keys td:first-child {
  width: 78px; white-space: nowrap; color: var(--aw-text); padding-right: 6px;
}
.aw-keysrail .aw-kgap { height: 8px; padding: 0; }

.aw-stage {
  position: relative; flex: 1; overflow: hidden;
  background: #0d0f12 repeating-conic-gradient(#111419 0% 25%, #0d0f12 0% 50%) 50%/24px 24px;
  cursor: crosshair; outline: none;
}
.aw-stage.aw-panning { cursor: grab; }
.aw-stage.aw-panning-active { cursor: grabbing; }

.aw-canvas {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0; will-change: transform;
}
.aw-img { display: block; max-width: none; pointer-events: none; }
.aw-boxlayer { position: absolute; inset: 0; }

.aw-zoomhint {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px;
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
}
.aw-stage-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 4px;
}

/* ---- boxes ----
   Counter-scaled so the outline stays 2px on screen at any zoom. */
.aw-box {
  position: absolute; box-sizing: border-box;
  border: calc(2px / var(--z)) solid var(--bc, #e8590c);
  background: color-mix(in srgb, var(--bc, #e8590c) 12%, transparent);
  cursor: move;
}
.aw-box.aw-sel {
  border-style: solid;
  box-shadow: 0 0 0 calc(1px / var(--z)) #fff, 0 0 0 calc(3px / var(--z)) rgba(76,154,255,.7);
}
.aw-box-tag {
  position: absolute; left: 0; top: 0;
  transform: translateY(-100%) scale(calc(1 / var(--z)));
  transform-origin: 0 100%;
  background: var(--bc, #e8590c); color: #fff;
  font-size: 11px; line-height: 1.4; padding: 1px 5px;
  white-space: nowrap; border-radius: 2px 2px 0 0;
}
.aw-h {
  position: absolute; width: calc(10px / var(--z)); height: calc(10px / var(--z));
  background: #fff; border: calc(1px / var(--z)) solid #333; border-radius: 1px;
}
.aw-h-nw { left: calc(-5px / var(--z)); top: calc(-5px / var(--z)); cursor: nwse-resize; }
.aw-h-n  { left: 50%; top: calc(-5px / var(--z)); margin-left: calc(-5px / var(--z)); cursor: ns-resize; }
.aw-h-ne { right: calc(-5px / var(--z)); top: calc(-5px / var(--z)); cursor: nesw-resize; }
.aw-h-e  { right: calc(-5px / var(--z)); top: 50%; margin-top: calc(-5px / var(--z)); cursor: ew-resize; }
.aw-h-se { right: calc(-5px / var(--z)); bottom: calc(-5px / var(--z)); cursor: nwse-resize; }
.aw-h-s  { left: 50%; bottom: calc(-5px / var(--z)); margin-left: calc(-5px / var(--z)); cursor: ns-resize; }
.aw-h-sw { left: calc(-5px / var(--z)); bottom: calc(-5px / var(--z)); cursor: nesw-resize; }
.aw-h-w  { left: calc(-5px / var(--z)); top: 50%; margin-top: calc(-5px / var(--z)); cursor: ew-resize; }

/* ---- panel ---- */
.aw-panel {
  flex: 0 0 240px; background: var(--aw-panel);
  border-left: 1px solid var(--aw-line);
  display: flex; flex-direction: column; overflow-y: auto;
}
.aw-panel-sec { padding: 10px 12px; border-bottom: 1px solid var(--aw-line); }
.aw-panel-sec.aw-grow { flex: 1; min-height: 90px; }
.aw-panel h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--aw-dim); font-weight: 600;
}
.aw-chip {
  background: #2a2f37; color: var(--aw-dim);
  border-radius: 99px; padding: 0 6px; font-size: 11px;
}

.aw-classes { display: flex; flex-direction: column; gap: 4px; }
.aw-class {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 1px solid var(--aw-line); border-radius: 5px;
  background: #23272e; color: var(--aw-text); cursor: pointer; text-align: left;
}
.aw-class:hover { border-color: #47505d; }
.aw-class.aw-on { border-color: var(--aw-accent); background: #223047; }
.aw-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.aw-class-label { flex: 1; }

.aw-boxlist { list-style: none; margin: 0; padding: 0; }
.aw-boxlist li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
}
.aw-boxlist li:hover { background: #262b33; }
.aw-boxlist li.aw-on { background: #223047; }
.aw-boxlist .aw-bl-name { flex: 1; }
.aw-boxlist .aw-bl-conf { color: var(--aw-dim); font-size: 11px; }
.aw-x {
  border: 0; background: transparent; color: var(--aw-dim);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.aw-x:hover { color: #ff8b8b; }

.aw-meta { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.aw-meta span:last-child { word-break: break-all; }

/* ---- buttons ---- */
.aw-btn {
  border: 1px solid var(--aw-line); background: #23272e; color: var(--aw-text);
  padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.aw-btn:hover:not(:disabled) { border-color: #47505d; }
.aw-btn:disabled { opacity: .45; cursor: default; }
.aw-btn-wide { width: 100%; justify-content: center; margin-bottom: 6px; }
.aw-btn-primary { background: var(--aw-accent); border-color: var(--aw-accent); color: #08111f; font-weight: 600; }
.aw-btn-warn { background: #4a2a1a; border-color: #6b3d24; color: #ffc9a3; }
.aw-btn-ghost { background: transparent; }
.aw-wrap kbd {
  background: rgba(255,255,255,.12); border-radius: 3px;
  padding: 0 4px; font-size: 11px; font-family: inherit;
}
.aw-task-pick {
  background: #23272e; color: var(--aw-text);
  border: 1px solid var(--aw-line); border-radius: 5px; padding: 4px 8px; font-size: 13px;
}
.aw-input {
  width: 100%; box-sizing: border-box; margin-top: 8px; padding: 7px 9px;
  background: #14161a; color: var(--aw-text);
  border: 1px solid var(--aw-line); border-radius: 5px; font-size: 13px;
}

/* ---- modals ---- */
.aw-modal {
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 30;
}
.aw-modal-card {
  background: var(--aw-panel); border: 1px solid var(--aw-line);
  border-radius: 8px; padding: 18px; max-width: 460px; width: 90%;
  max-height: 80%; overflow-y: auto;
}
.aw-modal-card { position: relative; }
.aw-modal-card h3 { margin: 0 0 10px; font-size: 16px; padding-right: 24px; }
.aw-modal-x {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent; color: var(--aw-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.aw-modal-x:hover { color: var(--aw-text); }
.aw-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.aw-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aw-reason {
  border: 1px solid var(--aw-line); background: #23272e; color: var(--aw-text);
  border-radius: 99px; padding: 4px 11px; cursor: pointer; font-size: 12px;
}
.aw-reason.aw-on { border-color: var(--aw-accent); background: #223047; }
.aw-keys { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.aw-keys td { padding: 3px 6px; vertical-align: top; }
.aw-keys td:first-child { width: 110px; white-space: nowrap; }
.aw-help-instructions { color: var(--aw-dim); margin-bottom: 6px; }

.aw-dim { color: var(--aw-dim); }
.aw-tiny { font-size: 11px; margin: 6px 0 0; }

.aw-notice {
  border: 1px solid #d9d2c4; background: #fdfbf5;
  border-radius: 8px; padding: 18px 20px; line-height: 1.6;
}
.aw-notice h3 { margin-top: 0; }
.aw-notice code { background: #efe9dc; padding: 1px 5px; border-radius: 3px; }

@media (max-width: 1100px) {
  .aw-keysrail { display: none; }
}

@media (max-width: 860px) {
  .aw-main { flex-direction: column; }
  .aw-panel { flex: 0 0 auto; max-height: 40%; border-left: 0; border-top: 1px solid var(--aw-line); }
  .aw-head-mid { display: none; }
}