/* annotate-image: the picture being marked up, the mark controls and the list of marks.
   Loaded only on /tools/annotate-image/. The stage is exactly the painted picture, so a click on it
   maps straight back to the picture's own pixels; its width is capped so the picture fits the window's height. */
.option-group[hidden], .an-stage[hidden], .an-field[hidden] { display: none; }
.an-stage {
  position: relative; overflow: hidden; box-sizing: content-box;
  border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); touch-action: none; cursor: crosshair;
  /* as wide as fits while the picture stays short enough to share the window with the toolbar above it: the window's
     height less 300 px, never under 240 px, times the picture's aspect ratio (--an-aspect, set by the controller) */
  max-width: min(760px, calc(max(240px, 100vh - 300px) * var(--an-aspect, 1)));
}
.an-stage:focus-visible { outline: 2px solid var(--matrix-brand); outline-offset: 2px; }
.an-canvas { display: block; width: 100%; height: auto; background: repeating-conic-gradient(#e6e6e6 0 25%, #fafafa 0 50%) 0 0 / 16px 16px; }
.an-hint { margin: var(--matrix-space-8) 0 0; font-size: var(--matrix-type-control); }
.an-row { display: flex; flex-wrap: wrap; gap: var(--matrix-space-12); align-items: flex-end; margin-top: var(--matrix-space-12); }
.an-field { display: grid; gap: 4px; }
.an-field label { font-size: var(--matrix-type-control); }
.an-num { width: 7.5em; }
.an-actions { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8); }
.an-list { list-style: none; margin: var(--matrix-space-8) 0 0; padding: 0; display: grid; gap: 6px; }
.an-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8); padding: 6px var(--matrix-space-8); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); }
.an-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--matrix-border); flex: none; }
/* One class per colour of engine-annotate.js COLORS: the page sets no inline style, which the site's
   Content Security Policy forbids. Keep these six in step with that table. */
.an-swatch--red { background: rgb(217, 28, 23); }
.an-swatch--blue { background: rgb(0, 102, 204); }
.an-swatch--green { background: rgb(28, 153, 64); }
.an-swatch--yellow { background: rgb(255, 217, 0); }
.an-swatch--black { background: rgb(28, 28, 31); }
.an-swatch--white { background: rgb(255, 255, 255); }
.an-kind { font-size: var(--matrix-type-control); }
.an-caption { flex: 1 1 14em; min-width: 10em; }
.an-item .matrix-icon-button { margin-left: auto; }
@media (max-width: 600px) { .an-num { width: 6em; } .an-caption { flex-basis: 100%; } }
/* The typed geometry of each mark (its keyboard path), and the notes that hold the export while a value does not fit. */
.an-geo-row { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.an-geo-field { display: inline-flex; align-items: center; gap: 4px; font-size: var(--matrix-type-caption); }
.an-geo { width: 5.5em; padding: 2px 6px; font-size: var(--matrix-type-control); }
.an-item-note, .an-crop-error { margin: 0; flex-basis: 100%; font-size: var(--matrix-type-caption); }
.an-item-note[hidden], .an-crop-error[hidden] { display: none; }
.an-crop-error { margin-top: var(--matrix-space-8); }
.an-geo-label { font-size: var(--matrix-type-caption); }
.an-words { font-size: var(--matrix-type-control); max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The mark controls and the picture, which fit the window together (Jack's appendix 16): on a narrow screen the
   controls are compact rows in a toolbar right above the picture; on a wide one, once a picture is open, they are a
   column beside it (hub review Rd534363e), and the picture may then use the window's height less 48 px. */
.an-work { display: grid; gap: var(--matrix-space-12); scroll-margin-top: var(--matrix-space-8); } /* brought into view with a little room above */
.an-tools { display: grid; gap: var(--matrix-space-8); align-content: start; min-width: 0; }
.an-tools .option-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--matrix-space-16); padding: var(--matrix-space-8) var(--matrix-space-12); }
.an-tools .option-group .option-row { min-height: 28px; }
.an-tools .an-row, .an-tools .an-hint { margin-top: 0; }
@media (min-width: 900px) {
  .an-work--picture { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
  .an-work--picture .an-stage { max-width: calc(max(240px, 100vh - 48px) * var(--an-aspect, 1)); }
  .an-work--picture .an-tools .option-group { gap: 2px var(--matrix-space-12); }
}
/* Remove every mark asks first */
.an-confirm { margin-top: var(--matrix-space-8); padding: var(--matrix-space-8) var(--matrix-space-12); border: 1px solid var(--matrix-danger); border-radius: var(--matrix-radius-control); background: var(--matrix-danger-background); }
.an-confirm[hidden], .an-actions [hidden] { display: none; }
.an-confirm-text { margin: 0 0 var(--matrix-space-8); font-size: var(--matrix-type-control); }