/* 保存した対話（.work-*）。 */
.work-row {
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 2.75rem 5rem minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
}
.work-row > .portrait {
  width: 5rem;
  height: 6rem;
  object-fit: contain;
  border-radius: 0;
}
.work-row h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0;
  margin: var(--space-1) 0;
}
.work-row p {
  color: var(--text-muted);
  font-size: var(--fs-note);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.work-row .work-product {
  color: var(--text);
  font-size: var(--fs-body);
  margin: 0 0 var(--space-1);
}
/* 行の操作（続きを開く・削除）は、どれも小さい脇役のボタン。行ごとに主役は置かない（画面の点検 C3） */
.work-actions {
  justify-content: flex-end;
}
.work-row .work-plan {
  color: var(--text);
  margin: var(--space-1) 0 var(--space-2);
}
.work-plan span {
  display: block;
  font-size: var(--type-note);
  color: var(--text-muted);
}
/* チェックして、まとめて削除（斉藤さん 2026-10-23）。選んだ印は紺の塗りに白いレ点（画面の点検「選んだ印」）。押せる高さは44px */
.work-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
}
.work-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-control);
  cursor: pointer;
}
.work-check::before {
  content: '';
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  box-sizing: border-box;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: #fff center / 0.875rem no-repeat;
}
.work-check[aria-checked='true']::before {
  border-color: var(--brand-solid);
  background-color: var(--brand-solid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.work-row > .work-check {
  justify-content: flex-start;
}
.undo-notice {
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
@media (max-width: 1024px) {
  .work-row {
    grid-template-columns: 2.75rem 4rem minmax(0, 1fr);
  }
  .work-row .work-actions {
    grid-column: 3;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .work-row {
    gap: var(--space-3);
  }
}

/* 新しいトップの流れ（斉藤さん 2026-10-25「トンマナ」）：題と保存の場所の一言は紺の帯（tone.css）。
 * 帯の下の一行に、探す欄と「保存したレポートを見る」。行の題は明朝の太字に紺。 */
html[data-top='new'] .works-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
html[data-top='new'] .works-tools .field {
  flex: 0 1 24rem;
  margin: 0;
}
html[data-top='new'] .works-tools .field input {
  width: 100%;
  height: 2.75rem;
  padding-block: 0;
  border-radius: var(--radius-field);
  border-color: var(--line);
}
html[data-top='new'] .works-tools > .small-button:only-child {
  margin-left: auto;
}
html[data-top='new'] .work-row h2 {
  font-family: var(--font-mincho);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-12);
}
html[data-top='new'] .work-check[aria-checked='true']::before {
  border-color: var(--brand-12);
  background-color: var(--brand-12);
}
/* 何もないとき：一言と「相手を選ぶ」のあいだに間をとる */
html[data-top='new'] .empty p {
  margin: 0 0 var(--space-4);
}
@media (max-width: 700px) {
  html[data-top='new'] .works-tools {
    flex-direction: column;
    align-items: stretch;
  }
  html[data-top='new'] .works-tools .field {
    flex: none;
  }
  html[data-top='new'] .works-tools > .small-button {
    align-self: flex-end;
  }
}
/* 顔は流れの画面（第一印象・相手を選ぶ）と同じ、金の輪の丸 */
html[data-top='new'] .work-row {
  grid-template-columns: 2.75rem 4.5rem minmax(0, 1fr) auto;
}
html[data-top='new'] .work-row > .portrait,
html[data-top='new'] .work-row > .initial {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: #fff;
}
/* 相手の種類（とくに強く求める人 など）は日付のあとに続け、狭い画面では日付の下の1行にする */
html[data-top='new'] .work-role::before {
  content: ' · ';
}
@media (max-width: 1024px) {
  html[data-top='new'] .work-row {
    grid-template-columns: 2.75rem 4.5rem minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  html[data-top='new'] .work-row {
    grid-template-columns: 2.75rem 3.5rem minmax(0, 1fr);
  }
  html[data-top='new'] .work-row > .portrait,
  html[data-top='new'] .work-row > .initial {
    width: 3.5rem;
    height: 3.5rem;
  }
  html[data-top='new'] .work-role {
    display: block;
    white-space: nowrap;
  }
  html[data-top='new'] .work-role::before {
    content: none;
  }
}

/* 改善した企画の1枚（plan-sheet.js）：帯（企画の名前・改善した企画）→ 改善した企画の文 → はじめの企画 → 理由になった言葉。
   印刷（PDF）では1枚の外（ヘッダー・足元・ボタン）を出さず、帯は地の色なしの字で出す */
.plan-sheet section {
  margin: var(--space-5) 0 0;
}
.plan-sheet h2 {
  margin: 0 0 var(--space-1);
}
.plan-sheet-before p {
  color: var(--ink-10);
}
/* 本人が書いた改善した企画の文（1枚でいちばん大きな字） */
.plan-sheet .plan-sheet-plan {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--type-head);
  line-height: var(--leading-head);
  white-space: pre-wrap;
  word-break: auto-phrase;
}
.plan-sheet-words {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.plan-sheet-words li {
  margin: 0 0 var(--space-3);
}
.plan-sheet-words blockquote {
  margin: 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--line-soft);
  white-space: pre-wrap;
  word-break: auto-phrase;
}
.plan-sheet-words .vs-who {
  margin: var(--space-1) 0 0 var(--space-2);
}
.plan-sheet .plan-sheet-notice {
  margin-top: var(--space-3);
  font-size: var(--type-note);
}
.plan-sheet-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
/* 幅が足りないときは、1つだけ折り返して残さず、縦に並べる */
@media (max-width: 30rem) {
  .plan-sheet-tools {
    flex-direction: column;
    align-items: stretch;
  }
}
@media print {
  body:has(.plan-sheet) .header,
  body:has(.plan-sheet) footer,
  .plan-sheet .plan-sheet-tools {
    display: none !important;
  }
  body:has(.plan-sheet) .page-band,
  body:has(.plan-sheet) .page-band * {
    background: none !important;
    color: var(--text) !important;
  }
  .plan-sheet section {
    break-inside: avoid;
  }
}