/* _shared/annotate.css — слой пометок на фото-решении (v2, 2026-09-04, skin v3).
   Тулбар (перо / маркер / стрелка / текст / пин / ластик, два цвета, история, зум),
   сцена (фото + два canvas + слой пинов), правое поле с карточками комментариев.
   Токены: работает и в учительском крыле (--t-*), и в ученическом (--accent/--ink …). */

.anno {
  --an-accent: var(--t-accent, var(--accent, #2B4C8C));
  --an-accent-strong: var(--t-accent-2, var(--accent-strong, #16213A));
  --an-ink: var(--t-ink, var(--ink, #1B1A17));
  --an-mute: var(--t-ink-mute, var(--ink-mute, #6B675D));
  --an-faint: var(--t-ink-faint, var(--ink-faint, #7A7565));
  --an-paper: var(--t-canvas, var(--bg-canvas, #FBF9F4));
  --an-ground: var(--t-canvas-2, var(--bg-soft, #E7E3D8));
  --an-deep: var(--t-canvas-3, var(--bg-tint, #DED9CB));
  --an-hair: var(--t-hair, var(--hair, #D9D4C5));
  --an-hair-soft: var(--t-hair-soft, var(--hair-soft, #E2DECF));
  --an-wash: var(--t-accent-wash, var(--accent-wash, rgba(43, 76, 140, 0.07)));
  --an-on-dark: var(--t-ink-invert, var(--ink-on-dark, #FBF9F4));
  --an-ok: var(--t-ok, var(--moss, #2D7A4A));
  --an-bad: var(--t-bad, var(--garnet, #8A2E22));
  --an-font: var(--t-font-body, var(--font-body, 'Golos Text', -apple-system, system-ui, sans-serif));
  --an-radius: 14px;
  display: flex; gap: 16px; align-items: flex-start;
  font-family: var(--an-font);
  color: var(--an-ink);
}
@media (max-width: 760px) { .anno { flex-direction: column; gap: 12px; } }
/* хост слоя — контейнер: раскладка зависит от ширины колонки, а не окна */
.anno-host { container-type: inline-size; container-name: annohost; }
@container annohost (max-width: 720px) {
  .anno { flex-direction: column; gap: 12px; }
  .anno-margin { flex: 1 1 auto; max-width: none; width: 100%; }
}

.anno-main { flex: 1 1 auto; min-width: 0; }
.anno-sp { flex: 1 1 auto; }
.anno-error {
  padding: 12px 14px; border: 1px solid var(--an-hair); border-radius: 12px;
  background: var(--an-ground); color: var(--an-mute); font: 13px/1.45 var(--an-font);
}

/* ── тулбар ── */
.anno-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--an-paper); border: 1px solid var(--an-hair); border-radius: var(--an-radius);
}
.anno-toolbar--ro { padding: 6px 10px; }
.anno-group { display: inline-flex; align-items: center; gap: 2px; }
.anno-group + .anno-group { padding-left: 10px; border-left: 1px solid var(--an-hair-soft); }
.anno-tool {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  cursor: pointer; color: var(--an-ink); line-height: 1; padding: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.anno-tool svg { display: block; }
.anno-tool:hover { background: var(--an-wash); color: var(--an-accent); }
.anno-tool.is-on { background: var(--an-accent); color: var(--an-on-dark); border-color: var(--an-accent); }
.anno-tool:disabled { opacity: .35; cursor: default; background: transparent; color: var(--an-ink); }
.anno-tool:focus-visible, .anno-color:focus-visible, .anno-savebtn:focus-visible, .anno-margin__nav:focus-visible {
  outline: 2px solid var(--an-accent); outline-offset: 2px;
}
.anno-colors { gap: 6px; }
.anno-color {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--an-paper); box-shadow: 0 0 0 1px var(--an-hair);
  background: var(--anno-swatch, #2B4C8C); box-sizing: border-box; appearance: none; -webkit-appearance: none;
}
.anno-color.is-on { box-shadow: 0 0 0 2px var(--an-ink); }
.anno-zoom__val {
  min-width: 44px; text-align: center; font: 500 12px var(--an-font);
  color: var(--an-mute); font-variant-numeric: tabular-nums;
}
.anno-status { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anno-count { font: 500 12px var(--an-font); color: var(--an-mute); white-space: nowrap; }
.anno-save { font: 12px var(--an-font); color: var(--an-mute); white-space: nowrap; }
.anno-save[data-state="dirty"] { color: var(--an-ink); }
.anno-save[data-state="saved"] { color: var(--an-ok); }
.anno-save[data-state="error"] { color: var(--an-bad); }
.anno-save:empty { display: none; }
.anno-savebtn {
  height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--an-accent); background: var(--an-paper); color: var(--an-accent);
  font: 600 12.5px var(--an-font); white-space: nowrap;
}
.anno-savebtn:hover { background: var(--an-accent); color: var(--an-on-dark); }
.anno-savebtn:disabled { opacity: .5; cursor: progress; }
@media (max-width: 760px) {
  .anno-toolbar { gap: 4px 6px; padding: 6px 8px; }
  .anno-group + .anno-group { padding-left: 6px; }
  .anno-tool { width: 40px; height: 40px; }
  .anno-status { width: 100%; padding-top: 6px; border-top: 1px solid var(--an-hair-soft); justify-content: space-between; }
  .anno-savebtn { height: 40px; }
}

/* ── сцена (фото + слои) ── */
.anno-viewport {
  position: relative; border: 1px solid var(--an-hair); border-radius: var(--an-radius);
  background: var(--an-ground); overflow: auto; -webkit-overflow-scrolling: touch;
}
.anno-viewport.is-zoomed { max-height: min(80vh, 960px); }
.anno-stage { position: relative; line-height: 0; width: 100%; background: var(--an-paper); overflow: hidden; }
.anno-viewport:not(.is-zoomed) .anno-stage { border-radius: var(--an-radius); }
.anno-stage img.anno-photo { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.anno-stage--broken img.anno-photo { min-height: 120px; }
.anno-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.anno-canvas.anno-dry { pointer-events: none; }
.anno-canvas.anno-wet { pointer-events: none; }
.anno-stage.anno-drawing .anno-wet { pointer-events: auto; touch-action: none; cursor: crosshair; }
.anno-stage.anno-texting .anno-wet { cursor: text; }
.anno-stage.anno-erasing .anno-wet { cursor: cell; }
.anno-stage.anno-pinning { cursor: copy; }
.anno-pinlayer { position: absolute; inset: 0; }
.anno-pinlayer.anno-pass { pointer-events: none; }

/* пины */
.anno-pin {
  position: absolute; transform: translate(-50%, -100%);
  width: 28px; height: 28px; padding: 0; border: 0; cursor: pointer;
  background: none; line-height: 0; z-index: 3;
}
.anno-pin svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition: transform 120ms ease; }
.anno-pin .anno-pin__n {
  position: absolute; left: 0; top: 3px; width: 28px; text-align: center;
  font: 700 11px/1 var(--an-font); color: #fff;
}
.anno-pin.is-active svg { transform: scale(1.2); }
.anno-pin.is-resolved { opacity: .45; }
.anno-textinput {
  position: absolute; z-index: 5; min-width: 80px; max-width: 60%;
  border: 1px dashed var(--an-accent); border-radius: 6px; background: rgba(255,255,255,.92);
  font: 600 16px var(--an-font); padding: 3px 6px; resize: none; outline: none; color: var(--an-ink);
}

/* ── правое поле: карточки комментариев ── */
.anno-margin {
  flex: 0 0 292px; max-width: 292px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
@media (max-width: 760px) { .anno-margin { flex: 1 1 auto; max-width: none; width: 100%; } }
.anno-margin__head {
  display: flex; align-items: center; gap: 6px;
  font: 600 12.5px var(--an-font); color: var(--an-mute); padding: 4px 2px;
}
.anno-margin__nav {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--an-hair); background: var(--an-paper); border-radius: 9px;
  cursor: pointer; color: var(--an-ink);
}
.anno-margin__nav:hover { border-color: var(--an-accent); color: var(--an-accent); }
.anno-cards { display: flex; flex-direction: column; gap: 8px; }
.anno-card {
  --anno-card-color: var(--an-accent);
  border: 1px solid var(--an-hair); border-left: 4px solid var(--anno-card-color);
  border-radius: 12px; background: var(--an-paper); padding: 10px 12px;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.anno-card.is-active { box-shadow: 0 6px 20px rgba(22, 33, 58, .12); transform: translateX(-2px); }
.anno-card.is-resolved { opacity: .6; }
.anno-card__top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.anno-card__n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--anno-card-color); color: #fff; font: 700 11px/1 var(--an-font);
}
.anno-card__state { font: 500 11.5px var(--an-font); color: var(--an-ok); }
.anno-card__btn {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 0; background: transparent; cursor: pointer; color: var(--an-mute); border-radius: 8px;
}
.anno-card__btn svg { width: 16px; height: 16px; }
.anno-card__btn:hover { background: var(--an-wash); color: var(--an-ink); }
.anno-card textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; max-height: 180px; resize: vertical;
  border: 1px solid var(--an-hair); border-radius: 9px; padding: 8px 10px;
  font: 13px/1.45 var(--an-font); color: var(--an-ink); background: var(--an-paper);
}
.anno-card textarea:focus { outline: 2px solid var(--an-accent); outline-offset: -1px; border-color: transparent; }
.anno-card__ro { font: 13px/1.45 var(--an-font); color: var(--an-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.anno-card__none { color: var(--an-mute); }
.anno-card__bank { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.anno-chip {
  font: 11.5px var(--an-font); padding: 4px 9px; border: 1px solid var(--an-hair);
  border-radius: 999px; background: transparent; cursor: pointer; color: var(--an-mute);
}
.anno-chip:hover { border-color: var(--an-accent); color: var(--an-accent); }
.anno-margin__empty {
  font: 13px/1.5 var(--an-font); color: var(--an-mute); padding: 12px 14px;
  border: 1px dashed var(--an-hair); border-radius: 12px; background: var(--an-paper);
}