/* 同じ役割の操作は、要素種別や色にかかわらず同じ寸法を使う。 */
:root {
  --ui-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.action-row, .ui-notification-actions) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, min(100%, var(--ui-action-width, 16rem))));
  grid-auto-rows: 1fr;
  align-items: stretch;
  justify-content: start;
  gap: var(--ui-space-3, 12px);
  width: 100%;
  min-width: 0;
}
:is(.action-row, .ui-notification-actions) > :is(.button, form, .book-detail-save) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  align-self: stretch;
}
:is(.action-row, .ui-notification-actions) > form:not(.action-row):has(> .button):not(:has(> :not(.button, input[type="hidden"]))),
.action-row > .book-detail-save, .action-row > .book-detail-save > form {
  display: flex;
  align-items: stretch;
}
:is(.action-row, .ui-notification-actions) > form > .button,
.action-row > .book-detail-save > .button,
.action-row > .book-detail-save > form > .button {
  width: 100%;
  margin: 0;
}
.action-row > .book-detail-save > form { width: 100%; margin: 0; }
/* 入力フォームと補足文はボタンの一枠に押し込まず、操作群の全幅を使う。 */
.action-row > form:has(> .action-row),
.action-row > :is(.dashboard-create-form, .home-assignment-form, .action-row, p, noscript) {
  grid-column: 1 / -1;
}
.action-row:has(> form > .action-row),
.action-row:has(> :is(.dashboard-create-form, .home-assignment-form, .action-row, p)) { grid-auto-rows: auto; }

/* 開いた詳細だけが本文を展開する。隣の操作の高さは広げない。 */
.action-row:has(> details) { display: flex; flex-wrap: wrap; align-items: flex-start; }
.action-row:has(> details) > :is(details, form, .button) { flex: 0 1 var(--ui-action-width, 16rem); }
.action-row:has(> details) > form:has(> .action-row) { flex-basis: 100%; }
.action-row > details { min-width: 0; max-width: 100%; }
.action-row > details > summary.button { width: 100%; }
.action-row > details[open] { flex-basis: 100%; }
.action-row > details[open] > summary.button { width: min(100%, var(--ui-action-width, 16rem)); }
/* 情報の見出し行は、閉じている間も操作ボタン一個分の幅へ縮めない。 */
.action-row > details:has(> summary:not(.button)) { flex-basis: 100%; width: 100%; }
/* 開閉ボタンの列を保ち、詳細本文だけをその下の全幅に展開する。 */
@supports selector(details::details-content) {
  .action-row.action-row--disclosures > details:has(> summary.button) { display: contents; }
  .action-row.action-row--disclosures > details:has(> summary.button) > summary.button {
    flex: 0 1 var(--ui-action-width, 16rem);
    width: min(100%, var(--ui-action-width, 16rem));
    margin: 0;
  }
  .action-row.action-row--disclosures > details:has(> summary.button)::details-content {
    order: 1;
    flex: 0 0 100%;
    min-width: 0;
  }
  .action-row.action-row--disclosures > details:has(> summary.button):not([open])::details-content { display: none; }
}
.disclosure-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; min-width: 0; white-space: normal; overflow-wrap: anywhere; cursor: pointer; list-style: none; }
.disclosure-toggle:not(.button) {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
}
.disclosure-toggle::-webkit-details-marker { display: none; }
.disclosure-toggle::after {
  content: "";
  display: inline-block;
  flex: none;
  align-self: center;
  width: 1rem;
  height: 1rem;
  margin-inline-start: auto;
  background-color: currentColor;
  mask: var(--ui-icon-chevron) center / contain no-repeat;
  pointer-events: none;
}
details[open] > summary.disclosure-toggle::after, .disclosure-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
/* 配置と余白は ui-buttons.css、開閉のマークと向きはここで管理する。 */
.button.disclosure-toggle {
  gap: var(--ui-space-2, 8px);
  min-height: var(--ui-control-height, 48px);
}

/* ページ送りは現在位置を挟むナビゲーションなので、3列を保つ。 */
.action-row.pagination { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); max-width: 36rem; align-items: center; }
.pagination > .button { --ui-action-icon-margin: 0; justify-content: center; text-align: center; }
.pagination > span { grid-column: 2; grid-row: 1; text-align: center; }
.pagination > a:has(+ span) { grid-column: 1; grid-row: 1; }
.pagination > span + a { grid-column: 3; grid-row: 1; }

@media (max-width: 480px) {
  :is(.action-row, .ui-notification-actions) { grid-template-columns: minmax(0, 1fr); }
  .button, .button.button-compact { width: 100%; }
  .action-row:has(> details) > :is(details, form, .button) { flex-basis: 100%; width: 100%; }
  .action-row > details[open] > summary.button { width: 100%; }
  .action-row.action-row--disclosures > details > summary.button { flex-basis: 100%; width: 100%; }
}

/* 行内の並べ替えは対象との距離を保つため短い共通幅にする。 */
.action-row.action-row--compact {
  --ui-action-width: var(--ui-compact-width, 7rem);
  width: min(100%, calc(2 * var(--ui-action-width) + var(--ui-space-3, 12px)));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

/* 排他選択は一つの容器でまとめ、選択中だけ実行ボタンの色を使う。 */
.ui-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-1, 4px);
  padding: var(--ui-space-1, 4px);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subtle);
}
.ui-segmented > .button {
  --ui-button-border: transparent;
  --ui-button-background: transparent;
  --ui-button-color: var(--ink);
  width: 100%;
  gap: var(--ui-space-1, 4px);
  padding-inline: var(--ui-space-2, 8px);
}
.ui-segmented > .button[aria-pressed="true"] {
  --ui-button-border: var(--green);
  --ui-button-background: var(--green);
  --ui-button-color: #fff;
  --ui-button-hover-background: var(--green-dark);
  --ui-button-hover-color: #fff;
}