/* 窓（dialog・#modal）と、ジョブ理論の説明の窓（.compact-guide .job-guide）。人物紹介の中身は person.css。 */
dialog {
  --pad-y: 40px;
  --pad-x: 40px;
  border: 1px solid var(--line);
  padding: var(--pad-y) var(--pad-x);
  /* 小窓の中を送っても、後ろのページへは伝えない */
  overscroll-behavior: contain;
  max-width: 860px;
  width: calc(100% - 32px);
  max-height: 90vh;
  color: var(--text);
  background: var(--surface);
}
dialog::backdrop {
  background: color-mix(in srgb, var(--fill) 38%, transparent);
  backdrop-filter: blur(3px);
}
/* 「×」は、長い小窓を下まで送っても、いつも上の右に見える（窓の中で上に貼り付く）。押せる大きさは44px。
   右上に浮かせて、中身の行の流れには場所を取らない（下の余白を同じだけ引く）。 */
dialog .close {
  position: sticky;
  /* 貼り付く位置は窓の余白の内側から測られるので、余白の分だけ上へ */
  top: calc(6px - var(--pad-y));
  float: right;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(6px - var(--pad-y)) calc(6px - var(--pad-x)) -2.75rem 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-face);
  background: var(--surface);
  font-size: 1.75rem;
  line-height: 1;
}
/* 小窓を開いているあいだは、後ろのページを動かさない */
html:has(dialog[open]:modal) {
  overflow: hidden;
}
dialog h2 {
  margin-bottom: var(--space-4);
}
dialog p {
  margin: var(--space-4) 0;
}
dialog .partner-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
dialog.compact-guide {
  --pad-y: 1.75rem;
  --pad-x: 2rem;
  width: min(52rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  border-radius: var(--radius-3);
}
.job-guide {
  font-size: var(--choice-small);
  line-height: 1.65;
}
.job-guide h2 {
  font-size: var(--choice-title);
  margin: var(--space-2) var(--space-4) var(--space-3) 0;
  line-height: 1.45;
}
.job-guide h3 {
  font-size: var(--choice-body);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}
.job-guide p {
  font-size: inherit;
  margin: var(--space-2) 0;
}
.job-guide .eyebrow {
  font-size: inherit;
}
.job-guide-intro {
  color: var(--text-muted);
}
.job-guide-focus {
  color: var(--fill);
  font-weight: 500;
}
.job-guide-poles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.job-theory-types {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.job-guide-poles section,
.job-theory-types section {
  padding: var(--space-4);
  background: var(--surface-quiet);
  border-radius: var(--radius-3);
}
.job-guide-example,
.job-guide-question {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}
.job-guide-footnote {
  color: var(--text-muted);
}
.job-guide-sources {
  display: flex;
  gap: var(--space-2) var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
}
.job-guide kbd {
  font: inherit;
  opacity: 0.65;
  margin-left: var(--space-2);
}
dialog details .btnrow > a,
dialog details .btnrow > button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
#modal {
  width: min(760px, calc(100vw - 2rem));
  max-height: 90dvh;
  border-radius: var(--radius-card);
}
/* 人物紹介だけは、紹介を読み込むあいだも高さを保つ（ほかの小窓は中身の高さだけ。下に空白を残さない） */
#modal:has(.modal-hero) {
  min-height: 24rem;
}
/* 小窓のボタンの並び（画面の点検 A12）：PC は右寄せの横並び（脇役・主役の順）、スマホは全幅の縦積みで主役が上 */
.modal-actions,
#modal .report-actions:not(.report-share-actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}
@media (max-width: 700px) {
  .modal-actions,
  #modal .report-actions:not(.report-share-actions) {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
/* 「選んだ相手との対話をまとめる」：知らせの文のあと、「もう一度まとめる」と「Googleでログイン」を同じ行に右寄せ */
.report-session {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
}
.report-session > h2,
.report-session > p,
.report-session .report-feedback > p {
  flex-basis: 100%;
  margin: 0;
}
.report-session > h2 {
  margin-bottom: var(--space-2);
}
.report-session #report-generation-feedback,
.report-session .report-feedback {
  display: contents;
}
.report-session > p:last-of-type {
  margin-bottom: var(--space-3);
}
.report-session button {
  order: 2;
  margin: 0;
}
.report-session .report-feedback .primary {
  order: 3;
}
.report-session > #report-session-retry {
  margin-top: var(--space-3);
}
.report-session .report-feedback ~ #report-session-retry,
.report-session #report-generation-feedback:not(:empty) ~ #report-session-retry {
  margin-top: 0;
}
@media (max-width: 700px) {
  .report-session button {
    flex-basis: 100%;
    order: 3;
  }
  .report-session .report-feedback .primary {
    order: 2;
  }
}
/* 小窓を開いて知らせを出しているあいだは、後ろのページの同じ知らせを出さない（ログインの案内が二重に見えた。画面の点検 A13） */
body:has(#modal[open] #report-generation-feedback:not(:empty)) main .report-feedback {
  display: none;
}
/* レポートの窓（確かめる・共有する・失敗を伝える・選ぶ）は、中身の高さだけ。短い窓が空白で伸びない
   （前の窓から移っても、その高さを引き継いだように見えない） */
#modal:has(.report-actions) {
  min-height: 0;
}
@media (max-width: 44rem) {
  dialog.compact-guide {
    --pad-y: 1.25rem;
    --pad-x: 1.25rem;
  }
  .job-theory-types {
    gap: var(--space-2);
  }
  .job-theory-types section {
    padding: var(--space-2);
  }
  .job-guide h3 {
    font-size: inherit;
  }
}
@media (max-width: 700px) {
  dialog {
    --pad-y: 35px;
    --pad-x: 22px;
  }
}
@media (max-width: 28rem) {
  .job-guide h2 {
    font-size: var(--fs-lead);
  }
  .job-guide-poles {
    gap: var(--space-2);
  }
  .job-guide-sources {
    gap: var(--space-2);
  }
  .job-guide p {
    margin: var(--space-2) 0;
  }
}
@media (max-height: 45rem) {
  dialog.compact-guide {
    --pad-y: 1.25rem;
    --pad-x: 1.5rem;
  }
}
@media (max-width: 28rem) {
  dialog.compact-guide {
    --pad-y: 1rem;
    --pad-x: 1rem;
  }
}
@media (max-height: 45rem) {
  .job-guide {
    font-size: var(--fs-note);
  }
}
@media (max-width: 28rem) {
  .job-guide {
    font-size: var(--fs-tag);
  }
}
@media (max-height: 45rem) {
  .job-guide {
    line-height: 1.5;
  }
}
@media (max-width: 28rem) {
  .job-guide {
    line-height: 1.45;
  }
}
@media (max-height: 45rem) {
  .job-guide h2 {
    margin: var(--space-1) 0 var(--space-2);
  }
  .job-guide-poles,
  .job-theory-types {
    margin: var(--space-2) 0;
  }
  .job-guide-poles section {
    padding: var(--space-3);
  }
}
@media (max-width: 28rem) {
  .job-guide-poles section {
    padding: var(--space-2);
  }
}
@media (max-height: 45rem) {
  .job-theory-types section {
    padding: var(--space-3);
  }
  .job-guide-example,
  .job-guide-question {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
  }
  .job-guide-sources {
    padding: var(--space-2) 0;
  }
}
/* The Studio bridge (studio.js): its own notes (login, not sent) and what a Commons asks it to make and send. */
.studio-note {
  max-width: 1040px;
  margin: var(--space-6) auto var(--space-9);
  padding: 0 var(--space-5);
}
.studio-ask {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0;
}
.studio-ask dt {
  color: var(--muted, #5b6472);
}
.studio-ask dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.studio-ask + p {
  word-break: auto-phrase;
}
.studio-again {
  margin: var(--space-2) 0 0;
  font-weight: 600;
  word-break: auto-phrase;
}
.studio-brief summary {
  cursor: pointer;
}
.studio-brief ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.2em;
  max-height: 40vh;
  overflow: auto;
}
/* お問い合わせのご用件（public/js/site.js openContact）：報告書の最後と同じ三つと、その他。一つずつ押しやすい高さで。 */
.contact-topics {
  border: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.contact-topics legend {
  padding: 0;
  margin-bottom: var(--space-2);
}
.contact-topic {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0 var(--space-1);
  cursor: pointer;
}
.contact-topic input {
  /* 押せる高さは行と同じ44px（見える丸は 1.125rem のまま） */
  width: 1.125rem;
  height: 2.75rem;
  margin: 0;
  flex: none;
  accent-color: var(--fill);
}
/* Webアンケートのご相談（public/js/site.js openWebSurvey。お問い合わせで用件に選んだときも同じ欄）。
   選ぶ欄は3つを1行に、狭い画面では1列に。選ぶ欄と入力欄は、押しやすい44px。 */
.web-survey-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.web-survey-fields[hidden] {
  display: none;
}
.web-survey-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-3);
}
.web-survey-picks .field {
  margin: var(--space-2) 0;
}
.web-survey-fields select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--text);
}
.web-survey-fields textarea {
  min-height: 0;
}
.web-survey-attach {
  margin: 0 0 var(--space-2);
}
.web-survey-lead {
  word-break: auto-phrase;
}
.web-survey-form .field input {
  min-height: 2.75rem;
}
@media (max-width: 640px) {
  .web-survey-picks {
    grid-template-columns: minmax(0, 1fr);
  }
}