/* スクリーンショットの編集の画面（annotator.js が作る <dialog class="hk-annotator">）。道具・色・取り消しのボタンは部品のボタン（.hk-btn）。
   選んでいる道具・色は案件の色の淡い背景と枠。狭い幅（600px 以下）では画面いっぱいに開き、画像は拡大・縮小・スクロールできる。 */
.hk-annotator { --hk-annotator-max: 1400px;
  box-sizing: border-box; width: calc(100% - var(--hk-sp-6)); max-width: var(--hk-annotator-max); height: calc(100dvh - var(--hk-sp-6)); max-height: none;
  padding: var(--hk-sp-6); border: var(--hk-bw) solid var(--hk-line-ctl); border-radius: var(--hk-radius-md); background: var(--hk-surface); color: var(--hk-text);
  font: var(--hk-fs-md)/var(--hk-lh) var(--hk-font); box-shadow: var(--hk-shadow-2); overflow: hidden; }
.hk-annotator[open] { display: grid; grid-template-rows: auto auto minmax(80px, 1fr) auto; gap: var(--hk-sp-3); }
.hk-annotator::backdrop { background: var(--hk-backdrop); }
.hk-annotator-top { display: flex; justify-content: space-between; align-items: center; gap: var(--hk-sp-3); }
.hk-annotator-top .hk-head-title { margin: 0; font-size: var(--hk-fs-h2); line-height: var(--hk-lh-tight); }
.hk-annotator-controls { display: grid; gap: var(--hk-sp-2); }
.hk-annotator-row { display: flex; align-items: center; gap: var(--hk-sp-2); flex-wrap: wrap; }
.hk-annotator .hk-btn { min-width: var(--hk-ctl-h); }
.hk-annotator .hk-btn[aria-pressed="true"] { background: var(--hk-accent-soft); border-color: var(--hk-accent); box-shadow: inset 0 0 0 var(--hk-bw) var(--hk-accent); color: var(--hk-text); }
.hk-annotator-color { gap: var(--hk-sp-1); }
.hk-annotator-swatch { box-sizing: border-box; display: inline-block; width: calc(var(--hk-icon-size) * .75); height: calc(var(--hk-icon-size) * .75); border: var(--hk-bw) solid var(--hk-text); border-radius: var(--hk-radius-pill); }
.hk-annotator-swatch[data-ink="赤"] { background: var(--hk-danger-dot); }
.hk-annotator-swatch[data-ink="青"] { background: var(--hk-up); }
.hk-annotator-swatch[data-ink="緑"] { background: var(--hk-ok); }
.hk-annotator-swatch[data-ink="黒"] { background: var(--hk-text); }
.hk-annotator-swatch[data-ink="白"] { background: var(--hk-surface); }
.hk-annotator-zoom { display: inline-flex; gap: var(--hk-sp-2); margin-left: auto; }
.hk-annotator-viewport { overflow: auto; padding: var(--hk-sp-3); background: var(--hk-surface-3); border: var(--hk-bw) solid var(--hk-line-ctl); overscroll-behavior: contain; }
.hk-annotator-stage { position: relative; flex-shrink: 0; margin: auto; }
.hk-annotator canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.hk-annotator canvas:focus-visible { outline: var(--hk-focus); outline-offset: 2px; }
.hk-annotator .hk-annotator-text { position: absolute; box-sizing: border-box; max-width: none; min-height: var(--hk-ctl-h); margin: 0; padding: var(--hk-sp-1);
  background: var(--hk-surface); border: var(--hk-focus); font-family: var(--hk-font); font-weight: var(--hk-fw-bold); line-height: var(--hk-lh-tight); resize: none; }
.hk-annotator-footer p { margin: 0; font-size: var(--hk-fs-md); color: var(--hk-muted); }
.hk-annotator .hk-annotator-hint { margin-bottom: var(--hk-sp-1); color: var(--hk-text); }
.hk-annotator-footer summary { font-size: var(--hk-fs-md); color: var(--hk-text-2); cursor: pointer; }
.hk-annotator .hk-annotator-error { color: var(--hk-danger); font-weight: var(--hk-fw-md); }
.hk-annotator [hidden] { display: none !important; }
@media (max-width: 600px) {
  .hk-annotator { width: 100%; height: 100dvh; max-width: none; border-radius: 0; padding: var(--hk-sp-3); }
  .hk-annotator-top .hk-head-title { font-size: var(--hk-fs-h3); }
  .hk-annotator .hk-btn { padding: 0 var(--hk-sp-3); }
  .hk-annotator-row { gap: var(--hk-sp-1); }
  .hk-annotator-zoom { margin-left: 0; }
}
/* 指で操作する画面では、キーボードの操作の説明を出さない（2026-10-16 ZESTIA の点検 LENS-V 指摘17） */
@media (pointer: coarse) { .hk-annotator-footer details { display: none; } }