/* 「？」ヘルプ（app/helptext.py・static/js/helpicon.js）。見出し・項目の右隣の小さな丸い薄灰のアイコン。文字は付けない。
   色・余白・影は AgentCSS のトークンだけを使う。印刷・PDF には出さない */
.sd-help { display: inline-flex; align-items: center; vertical-align: middle; margin-left: var(--ac-space-xs, .25rem); line-height: 1; font-weight: normal; }
/* 見出し（AgentCSS は h1 直下の span を「小さな補足」にして改行する）の中でも、見出しの文字の右隣に並べる */
.ac-page-header h1 .sd-help.sd-help.sd-help { display: inline-flex; font-size: inherit; color: inherit; line-height: 1; }
/* 項目名（ラベル）の右隣でも、ラベルの行の高さを増やさない（項目の入力欄の高さがそろう） */
.ac-field__label .sd-help, .ac-label .sd-help { margin-block: -.375rem; }
.sd-help__btn {
  position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--ac-subtle); cursor: pointer; flex: none;
}
.sd-help__btn::before {
  content: ""; position: absolute; inset: .1875rem; background: currentColor;
  -webkit-mask: var(--sd-help-glyph) center / contain no-repeat; mask: var(--sd-help-glyph) center / contain no-repeat;
  --sd-help-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.sd-help__btn:hover { color: var(--ac-muted); background: var(--ac-hover); }
.sd-help__btn[aria-expanded="true"] { color: var(--ac-brand); background: var(--ac-brand-soft); }
.sd-help__btn:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 1px; }
.sd-help.is-empty .sd-help__btn { opacity: .55; }
.sd-help.is-empty .sd-help__btn::after { content: ""; position: absolute; inset: .125rem; border: 1px dashed var(--ac-border-strong); border-radius: 50%; }

/* 吹き出し（幅 320px 程度。スマートフォンでは画面幅に収める）。body 直下に出すので、ポップアップ（窓）の中でも切れない */
.sd-help-pop {
  position: fixed; z-index: calc(var(--ac-z-tooltip) + 5); box-sizing: border-box; width: min(20rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto;
  padding: var(--ac-space-ms) var(--ac-space-md); background: var(--ac-surface); color: var(--ac-text);
  border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); box-shadow: var(--ac-shadow-2);
  font-size: var(--ac-font-size-sm); line-height: 1.6; text-align: left; font-weight: normal; white-space: normal;
}
.sd-help-pop:focus { outline: none; }
.sd-help-pop:focus-visible { outline: 2px solid var(--ac-focus); }
.sd-help-pop__row + .sd-help-pop__row { margin-top: var(--ac-space-xs); }
.sd-help-pop__label { margin: 0; font-size: .75rem; font-weight: var(--ac-weight-bold); color: var(--ac-muted); }
.sd-help-pop__text { margin: 0; overflow-wrap: anywhere; }
.sd-help-pop__hint { margin: 0; font-size: .75rem; color: var(--ac-muted); }
.sd-help-pop__foot { display: flex; align-items: center; gap: var(--ac-space-sm); flex-wrap: wrap; margin-top: var(--ac-space-sm); padding-top: var(--ac-space-xs); border-top: 1px solid var(--ac-border-soft); }
.sd-help-pop__link { padding: 0; border: 0; background: none; color: var(--ac-link, var(--ac-brand-text)); cursor: pointer; font: inherit; text-decoration: underline; }
.sd-help-pop__link:hover { color: var(--ac-link-hover); }
.sd-help-pop__meta { margin: var(--ac-space-xs) 0 0; font-size: .75rem; color: var(--ac-subtle); }
.sd-help-pop__empty { margin: 0; color: var(--ac-muted); }
.sd-help-pop__form { display: grid; gap: var(--ac-space-xs); }
.sd-help-pop__form label { font-size: .75rem; font-weight: var(--ac-weight-bold); color: var(--ac-muted); }
.sd-help-pop__form textarea { width: 100%; box-sizing: border-box; min-height: 3.5rem; resize: vertical; }
.sd-help-pop__error { margin: 0; color: var(--ac-danger-text); }

/* 右パネル（「詳細」） */
.sd-help-drawer { z-index: calc(var(--ac-z-tooltip) + 4); width: min(40rem, 100vw); }
.sd-help-drawer .ac-drawer__body { overflow-wrap: anywhere; line-height: 1.7; }
.sd-help-drawer:focus { outline: none; }

/* 文章の簡易な書き方（段落・箇条書き・小見出し・表。app/helptext.py の render_html が作る）。表は他の画面の表（ac-table）と同じ作り */
.sd-md > :first-child { margin-top: 0; }
.sd-md > :last-child { margin-bottom: 0; }
.sd-md__p { margin: 0 0 var(--ac-space-sm, .5rem); }
.sd-md__h { margin: var(--ac-space-md, 1rem) 0 var(--ac-space-xs, .25rem); font-weight: var(--ac-weight-bold); color: var(--ac-text); }
.sd-md__ul { margin: 0 0 var(--ac-space-sm, .5rem); padding-left: 1.25rem; list-style: disc; }
.sd-md__ul li + li { margin-top: .125rem; }
.sd-md__wrap { margin: 0 0 var(--ac-space-sm, .5rem); border: 1px solid var(--ac-border-soft); border-radius: var(--ac-radius-sm, .25rem); }
.sd-md__table { font-size: inherit; line-height: 1.5; }
.sd-md__table th, .sd-md__table td { height: auto; padding: var(--ac-space-xs, .25rem) var(--ac-space-sm, .5rem); vertical-align: top; overflow-wrap: anywhere; }
.sd-md__table thead th { white-space: nowrap; font-weight: var(--ac-weight-bold); background: var(--ac-surface-2); }
.sd-md__table tbody tr:hover > td { background: transparent; }
.sd-md__table tbody td:first-child { font-weight: var(--ac-weight-bold); min-width: 4em; }
.sd-help-pop .sd-md__table th, .sd-help-pop .sd-md__table td { padding: .125rem .375rem; }

@media print { .sd-help, .sd-help-pop, .sd-help-drawer { display: none !important; } }

/* 部分更新の領域（static/js/partial.js）。読み込み中はいまの表示を残して薄くする */
[data-sd-region] { transition: opacity var(--ac-motion-fast, .12s) var(--ac-motion-ease, ease-out); }
[data-sd-region].is-loading { opacity: .55; pointer-events: none; }