/* フィードバックを送る画面（feedback.js が作る <dialog class="hk-feedback">）。欄は欄のまとまり（.hk-field）・文字の欄（.hk-input）・札（.hk-tag）、
   操作はボタン（.hk-btn）、写しを用意している間は読み込み中（.hk-loading）。開くボタンはふつうの .hk-btn に data-hk-feedback を付けるだけ。
   自動で一緒に送る情報は入力欄の形にせず、1行の要約を畳んで置く（開く欄 disclosure の .hk-disc。開くとただの文）。 */
.hk-feedback { box-sizing: border-box; width: calc(100% - var(--hk-sp-9)); max-width: var(--hk-feedback-max, 560px); max-height: calc(100dvh - var(--hk-sp-9));
  margin: auto; padding: var(--hk-sp-8); border: var(--hk-bw) solid var(--hk-line-ctl); border-radius: var(--hk-radius-lg);
  background: var(--hk-surface); color: var(--hk-text); box-shadow: var(--hk-shadow-2); overflow: auto;
  font-family: var(--hk-font); font-size: var(--hk-fs-md); line-height: var(--hk-lh); word-break: auto-phrase; }
.hk-feedback::backdrop { background: var(--hk-backdrop); }
.hk-feedback [hidden] { display: none !important; }
.hk-feedback-top { display: flex; align-items: center; justify-content: space-between; gap: var(--hk-sp-5); margin: 0 0 var(--hk-sp-6); }
.hk-feedback-top .hk-head-title { margin: 0; font-size: var(--hk-fs-h2); line-height: var(--hk-lh-tight); }
.hk-feedback-form { display: grid; gap: var(--hk-sp-6); margin: 0; }
.hk-feedback-note { margin: 0; color: var(--hk-muted); }
/* notice を配列で渡した時の箇条 */
ul.hk-feedback-note { display: grid; gap: var(--hk-sp-2); padding-left: 1.25em; }
.hk-feedback-preview { display: block; width: 100%; height: auto; max-height: var(--hk-feedback-shot-max, 250px); object-fit: contain;
  background: var(--hk-surface-3); border: var(--hk-bw) solid var(--hk-line); border-radius: var(--hk-radius); }
.hk-feedback-shot-actions { display: flex; flex-wrap: wrap; gap: var(--hk-sp-3); }
.hk-feedback-shot-actions:not(:has(> :not([hidden]))) { display: none; }
.hk-feedback-context { display: grid; gap: var(--hk-sp-5); min-width: 0; }
/* 自動で一緒に送る情報：開くとただの文で並べる（入力欄の形にしない）。名前は薄く、値は本文の色。直前の操作は1行ずつ */
.hk-feedback-auto { gap: var(--hk-sp-3); font-size: var(--hk-fs-sm); line-height: var(--hk-lh-snug); }
.hk-feedback-auto p { display: grid; gap: var(--hk-sp-1); margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--hk-text); }
.hk-feedback-auto p:first-child { color: var(--hk-muted); }
.hk-feedback-auto-k { color: var(--hk-muted); }
.hk-feedback-trail { white-space: pre-line; }
.hk-feedback-error { margin: 0; color: var(--hk-danger); font-weight: var(--hk-fw-md); }
.hk-feedback-saved { margin: 0; padding: var(--hk-sp-4) var(--hk-sp-5); background: var(--hk-ok-soft); color: var(--hk-ok); border-radius: var(--hk-radius); font-weight: var(--hk-fw-md); }
.hk-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--hk-sp-3); }
/* 開くボタンの印だけの形（狭い帯・ヘッダーの右など）：data-hk-feedback="icon" はいつも、"narrow" は幅 760px 以下の時だけ吹き出しの印にする。
   ボタンの文字「フィードバックを送る」は消さずに大きさ 0 にし、読み上げの名前に残す（ポインタを載せた時の名前は title） */
.hk-btn[data-hk-feedback="icon"] { width: var(--hk-ctl-h); padding: 0; gap: 0; font-size: 0; }
.hk-btn[data-hk-feedback="icon"]::before { content: ""; flex: none; width: var(--hk-icon-size); height: var(--hk-icon-size); background: currentColor;
  -webkit-mask: var(--hk-feedback-icon) center / contain no-repeat; mask: var(--hk-feedback-icon) center / contain no-repeat; }
[data-hk-feedback] { --hk-feedback-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5h12a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5H9l-4 3v-3H4A1.5 1.5 0 0 1 2.5 13V5A1.5 1.5 0 0 1 4 3.5Z'/%3E%3Cpath d='M6.5 7.5h7M6.5 10.5h4.5'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  .hk-btn[data-hk-feedback="narrow"] { width: var(--hk-ctl-h); padding: 0; gap: 0; font-size: 0; }
  .hk-btn[data-hk-feedback="narrow"]::before { content: ""; flex: none; width: var(--hk-icon-size); height: var(--hk-icon-size); background: currentColor;
    -webkit-mask: var(--hk-feedback-icon) center / contain no-repeat; mask: var(--hk-feedback-icon) center / contain no-repeat; }
}
@media (max-width: 600px) {
  .hk-feedback { width: calc(100% - var(--hk-sp-6)); max-height: calc(100dvh - var(--hk-sp-6)); padding: var(--hk-sp-6); }
  /* スマホで欄を押した時に画面が拡大されないよう、入れる文字は 16px */
  .hk-feedback .hk-input { font-size: var(--hk-fs-h3); }
}
/* ---- 使う時だけの欄（setup の値で出る。初めの値では出ない）---- */
/* 写しを付けない時は見本を薄くする */
.hk-feedback-preview.is-off { opacity: .35; }
/* 見本を押すと大きく開く（setup({ zoom: true })） */
.hk-feedback[data-zoom] .hk-feedback-preview:not(.is-off) { cursor: zoom-in; }
/* 撮り直す前の確認と、撮り直した後の知らせ */
.hk-feedback-confirm { display: grid; gap: var(--hk-sp-3); padding: var(--hk-sp-4) var(--hk-sp-5); background: var(--hk-warn-soft); border-radius: var(--hk-radius); }
.hk-feedback-confirm p { margin: 0; color: var(--hk-text); font-weight: var(--hk-fw-md); }
.hk-feedback-lost { color: var(--hk-warn); font-weight: var(--hk-fw-md); }
/* 送った後の画面（setup({ doneView: true })）：受付の文とボタンだけ */
.hk-feedback[data-done] .hk-feedback-form > :not(.hk-feedback-saved, [data-ctx="done"]) { display: none; }
/* 「閉じる」は下の1つだけ（上の「閉じる」は隠す。Esc でも閉じる） */
.hk-feedback[data-done] .hk-feedback-top [data-act="close"] { display: none; }
/* 大きく見る窓 */
.hk-feedback-zoom { box-sizing: border-box; width: calc(100% - var(--hk-sp-6)); max-width: none; height: calc(100dvh - var(--hk-sp-6)); max-height: none; margin: auto; padding: var(--hk-sp-6);
  display: grid; grid-template-rows: auto minmax(0, 1fr); border: var(--hk-bw) solid var(--hk-line-ctl); border-radius: var(--hk-radius-lg);
  background: var(--hk-surface); color: var(--hk-text); box-shadow: var(--hk-shadow-2); font-family: var(--hk-font); font-size: var(--hk-fs-md); line-height: var(--hk-lh); }
.hk-feedback-zoom:not([open]) { display: none; }
.hk-feedback-zoom::backdrop { background: var(--hk-backdrop); }
.hk-feedback-zoom .hk-head-title { font-size: var(--hk-fs-h2); line-height: var(--hk-lh-tight); font-weight: var(--hk-fw-bold); }
.hk-feedback-zoom-body { overflow: auto; background: var(--hk-surface-3); border-radius: var(--hk-radius); }
.hk-feedback-zoom-body img { display: block; max-width: none; }