@charset "UTF-8";
/* ============================================================================
 * components.css
 * COLAVIA v1.000.0000
 *
 *   ボタン・メニュー・カード・モーダル・フォーム部品・テーブル。
 *
 *   color-mix() にはフォールバックを併記する（§2.2）。
 *   先に単色を書き、対応環境だけが上書きする形にして、
 *   未対応の環境でも色が単調になるだけで判読できなくならないようにする。
 *
 *   ※ モック専用だった .mockrole（権限の切替）は取り除いてある。
 *      実装では権限がセッションから決まるため不要（§10）。
 *
 *   出所: mock/css/common.css（ワイヤーフレームモックの共通スタイル）から
 *         該当部分を切り出したもの。§3.4 のディレクトリ構成に合わせて
 *         reset / tokens / base / layout / components の5本に分けている。
 *
 *   読み込む順序に意味がある（app_shell.php を参照）
 *     reset → tokens → base → layout → components → css/views/*.css
 * ========================================================================== */

/* ---- ポップオーバー ------------------------------------------------------ */
.popover {
  position: absolute; top: calc(var(--h-header) - var(--sp-2)); right: var(--sp-4); z-index: 200;
  width: var(--w-menu); padding: var(--sp-1);
  border: 0.0625rem solid var(--c-hairline); border-radius: var(--r-lg);
  background-color: var(--c-popover-bg); box-shadow: var(--shadow-popup);
  -webkit-backdrop-filter: saturate(180%) blur(1.5rem);
  backdrop-filter: saturate(180%) blur(1.5rem);
  display: none;
}
.popover.is-open { display: block; animation: popover-in var(--dur-base) var(--ease-out); }

@keyframes popover-in {
  from { opacity: 0; transform: translateY(-0.375rem) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.popover__header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.popover__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }
.popover__meta { font-size: var(--fs-xs); color: var(--c-text-secondary); line-height: 1.4; }

.menu-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  height: 2.125rem; padding: 0 var(--sp-3); border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-text); text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-item:hover { background-color: var(--c-accent); color: var(--c-text-on-accent); }
.menu-item:hover .menu-item__icon { color: var(--c-text-on-accent); }
.menu-item__icon { width: 1rem; font-size: 0.8125rem; text-align: center; color: var(--c-text-secondary); }
.menu-item--danger { color: var(--c-red); }
.menu-item--danger .menu-item__icon { color: var(--c-red); }
.menu-item--danger:hover { background-color: var(--c-red); color: #fff; }
.menu-sep { height: 0.0625rem; margin: var(--sp-1) var(--sp-2); background-color: var(--c-separator); }

/* ---- ボタン -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-control); padding: 0 var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--plain { background-color: var(--c-fill); color: var(--c-text); }
.btn--plain:hover { background-color: var(--c-fill-hover); }
.btn--plain:active { background-color: var(--c-fill-active); }
.btn--primary { background-color: var(--c-accent); color: var(--c-text-on-accent); font-weight: 700; }
.btn--primary:hover { background-color: var(--c-accent-hover); }
.btn--primary:active { background-color: var(--c-accent-active); }
.btn--quiet { color: var(--c-accent); padding: 0 var(--sp-2); }
.btn--quiet:hover { background-color: var(--c-accent-soft); }

/* ---- セグメンテッドコントロール ------------------------------------------ */
.segmented { display: inline-flex; padding: 0.125rem; border-radius: var(--r-sm); background-color: var(--c-fill); }
.segmented__item {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 1.75rem; padding: 0 var(--sp-3); border-radius: 0.4375rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-secondary);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.segmented__item:hover { color: var(--c-text); }
.segmented__item.is-active {
  background-color: var(--c-surface); color: var(--c-text); font-weight: 700;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12);
}

/* ---- 検索 ---------------------------------------------------------------- */
.search {
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--h-control); padding: 0 var(--sp-3);
  border-radius: var(--r-full); background-color: var(--c-fill);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.search:focus-within { box-shadow: 0 0 0 0.1875rem var(--c-focus-ring); }

/* .search は枠側で box-shadow のフォーカスリングを出しているため、
   内側の input に :focus-visible の outline が重なると線が二重になる。
   枠が状態を示しているので、内側の outline はここで抑止する。 */
.search .search__input:focus-visible { outline: none; }

.search__icon { font-size: var(--fs-sm); color: var(--c-text-tertiary); }
.search__input { width: 10rem; font-size: var(--fs-sm); }
.search__input::placeholder { color: var(--c-text-tertiary); }

/* ---- ポップアップボタン（select）
 *      macOS のポップアップボタンに寄せ、薄い面＋シェブロンで表現する
 * ------------------------------------------------------------------------ */
.select {
  position: relative; display: inline-flex; align-items: center;
  height: var(--h-control); border-radius: var(--r-sm); background-color: var(--c-fill);
  transition: background-color var(--dur-fast) var(--ease);
}
.select:hover { background-color: var(--c-fill-hover); }
.select::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: var(--sp-2); font-size: 0.5625rem;
  color: var(--c-text-tertiary); pointer-events: none;
}
.select__control {
  appearance: none; -webkit-appearance: none;
  height: 100%; padding: 0 1.75rem 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); cursor: pointer;
}
/* 既定値以外が選ばれている絞り込みはアクセント色で示す */
.select.is-set { background-color: var(--c-accent-soft); }
.select.is-set .select__control { color: var(--c-accent); font-weight: 700; }
.select.is-set::after { color: var(--c-accent); }

/* ---- 絞り込みバー -------------------------------------------------------- */
.filters {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3);
  border: 0.0625rem solid var(--c-hairline); border-radius: var(--r-md);
  background-color: var(--c-surface); box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
}
.filters__label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-tertiary); padding-right: var(--sp-1); }
.filters__spacer { flex: 1 1 auto; }
.filters__count { font-size: var(--fs-sm); color: var(--c-text-secondary); white-space: nowrap; }

/* ---- カード -------------------------------------------------------------- */
.card {
  border: 0.0625rem solid var(--c-hairline); border-radius: var(--r-md);
  background-color: var(--c-surface); box-shadow: var(--shadow-card); overflow: hidden;
}

/* ---- アバター ------------------------------------------------------------ */
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1.625rem; height: 1.625rem; border-radius: var(--r-full);
  background-color: var(--c-fill-hover); color: var(--c-text);
  font-size: var(--fs-xs); font-weight: 700;
}
.avatar--lg { width: 2.375rem; height: 2.375rem; font-size: var(--fs-sm); }
.avatar--sm { width: 1.375rem; height: 1.375rem; font-size: 0.625rem; }
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .avatar + .avatar { margin-left: -0.4375rem; box-shadow: 0 0 0 0.125rem var(--c-surface); }

/* ---- バッジ・ピル・優先度 ------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 1.25rem; padding: 0 var(--sp-2); border-radius: var(--r-xs);
  background-color: color-mix(in srgb, var(--tone, var(--c-gray)) 14%, transparent);
  color: var(--tone, var(--c-gray));
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 1.375rem; padding: 0 var(--sp-2); border-radius: var(--r-full);
  background-color: color-mix(in srgb, var(--tone, var(--c-gray)) 15%, transparent);
  color: var(--tone, var(--c-gray));
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.pill::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: var(--r-full); background-color: currentColor; }

.priority { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 700; color: var(--tone, var(--c-gray)); }
.priority__bar { width: 0.1875rem; height: 0.875rem; border-radius: var(--r-full); background-color: currentColor; }

.is-overdue { color: var(--c-red); font-weight: 700; }

/* ---- 空状態 -------------------------------------------------------------- */
.empty { padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--c-text-secondary); font-size: var(--fs-sm); }
.empty__icon { font-size: 1.75rem; color: var(--c-text-tertiary); margin-bottom: var(--sp-3); }


/* ============================================================================
 * モーダル・フォーム
 *   影の変数 --shadow-modal は tokens.css で定義している。
 * ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: var(--sp-4);
  background-color: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
}
.modal[hidden] { display: none; }

.modal__panel {
  width: 100%; max-width: 32rem; max-height: 85vh;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); background-color: var(--c-surface);
  box-shadow: var(--shadow-modal); overflow: hidden;
  animation: modal-in var(--dur-base) var(--ease-out);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 0.0625rem solid var(--c-separator);
}
.modal__title { font-size: var(--fs-md); font-weight: 700; }
.modal__body { padding: var(--sp-4); overflow-y: auto; }
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 0.0625rem solid var(--c-separator);
  background-color: var(--c-surface-sunken);
}

.form-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-4);
}
.form-row__label { padding-top: 0.4375rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-secondary); }
.form-row__req { color: var(--c-red); font-size: var(--fs-xs); margin-left: 0.25rem; }
.form-row__help { margin-top: 0.375rem; font-size: var(--fs-xs); color: var(--c-text-tertiary); line-height: 1.7; }

.form-inline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.form-inline__sep { color: var(--c-text-tertiary); font-size: var(--fs-sm); }

.input {
  width: 100%; height: var(--h-control); padding: 0 var(--sp-3);
  border-radius: var(--r-sm); background-color: var(--c-fill);
  font-size: var(--fs-sm);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.input:focus { box-shadow: 0 0 0 0.1875rem var(--c-focus-ring); }
.input:focus-visible { outline: none; }
.input::placeholder { color: var(--c-text-tertiary); }
.input--date { max-width: 10rem; }

.textarea {
  width: 100%; min-height: 4.5rem; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); background-color: var(--c-fill);
  font-size: var(--fs-sm); line-height: 1.6; resize: vertical;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.textarea:focus { box-shadow: 0 0 0 0.1875rem var(--c-focus-ring); }
.textarea:focus-visible { outline: none; }
.textarea::placeholder { color: var(--c-text-tertiary); }

.checkrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-sm); cursor: pointer;
}
.checkrow:hover { background-color: var(--c-fill); }
.checkrow input { width: 1rem; height: 1rem; accent-color: var(--c-accent); cursor: pointer; }
.checkrow__name { font-size: var(--fs-sm); font-weight: 500; }

.pick-list { max-height: 12rem; overflow-y: auto; padding-top: var(--sp-1); }

/* 選択済みを示すチップ（絞り込みで候補から消えても分かるように出す） */
.pick-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pick-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 1.75rem; padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-full);
  background-color: var(--c-accent-soft); color: var(--c-accent);
  font-size: var(--fs-xs); font-weight: 700;
}
.pick-chip button { color: inherit; font-size: 0.6875rem; padding: 0 0.125rem; }

.checkrow__sub { font-size: var(--fs-xs); color: var(--c-text-secondary); }
.m-empty { padding: var(--sp-5) var(--sp-2); text-align: center; font-size: var(--fs-sm); color: var(--c-text-secondary); }

.pick-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 0.0625rem solid var(--c-separator);
  font-size: var(--fs-xs); color: var(--c-text-secondary);
}
.pick-bar__spacer { flex: 1 1 auto; }

.sec__note { font-size: var(--fs-xs); color: var(--c-text-tertiary); line-height: 1.7; }

@media (max-width: 48rem) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .form-row__label { padding-top: 0; }
}


/* ============================================================================
 * 外観切替（設定メニュー内）
 * ========================================================================== */
/* ---------------------------------------------------------------------------
 * 外観切替（設定メニュー内）
 * ------------------------------------------------------------------------- */
.popover--settings { width: 17rem; }

.popover__section { padding: var(--sp-2) var(--sp-3) var(--sp-2); }
.popover__label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-tertiary);
}

/* メニュー内に収める小型のセグメンテッドコントロール */
.segmented--sm { width: 100%; }
.segmented--sm .segmented__item {
  flex: 1 1 0; justify-content: center;
  height: 1.625rem; padding: 0 var(--sp-1);
  font-size: var(--fs-xs); gap: 0.25rem;
  white-space: nowrap;
}
.segmented--sm .segmented__item i { font-size: 0.6875rem; }


/* ============================================================================
 * モーダル・フォームの補助部品
 *   1. モーダル  2. 選択リスト（チェック行）  3. フォームの行
 *   4. 戻るリンク・補足文  5. パネル  6. 絞り込み用のサジェスト選択
 * ========================================================================== */

/* モーダル用の影 */
:root {
  --shadow-modal: 0 1.5rem 4rem rgba(0, 0, 0, 0.28), 0 0 0 0.0625rem rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-modal: 0 1.5rem 4rem rgba(0, 0, 0, 0.65), 0 0 0 0.0625rem rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="dark"] {
  --shadow-modal: 0 1.5rem 4rem rgba(0, 0, 0, 0.65), 0 0 0 0.0625rem rgba(255, 255, 255, 0.10);
}

/* ---------------------------------------------------------------------------
 * 1. モーダル
 * ------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: var(--sp-4);
  background-color: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
}
.modal[hidden] { display: none; }

.modal__panel {
  width: 100%; max-width: 32rem; max-height: 85vh;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  background-color: var(--c-surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: modal-in var(--dur-base) var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
}
.modal__title { font-size: var(--fs-md); font-weight: 700; }
.modal__body { padding: var(--sp-4); overflow-y: auto; }
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 0.0625rem solid var(--c-separator);
  background-color: var(--c-surface-sunken);
}
.modal__lead { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--sp-3); }

/* 項目が多いダイアログは2カラムにして縦の長さを抑える */
.modal__panel--wide { max-width: 46rem; }

.modal-cols {
  display: grid; gap: var(--sp-4) var(--sp-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.modal-col { min-width: 0; }

/* カラム内はラベルを上に置いて横幅を稼ぐ */
.modal-cols .form-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.modal-cols .form-row__label { padding-top: 0; }

/* 左右のカラムを区切る細い線 */
.modal-cols .modal-col + .modal-col {
  padding-left: var(--sp-6);
  border-left: 0.0625rem solid var(--c-separator);
  margin-left: calc(var(--sp-6) * -1 + var(--sp-6));
}

@media (max-width: 56rem) {
  .modal-cols { grid-template-columns: minmax(0, 1fr); }
  .modal-cols .modal-col + .modal-col {
    padding-left: 0; border-left: none;
    padding-top: var(--sp-4); border-top: 0.0625rem solid var(--c-separator);
  }
}

/* ---------------------------------------------------------------------------
 * 2. 選択リスト（チェック行）
 * ------------------------------------------------------------------------- */
.checkrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-sm);
  cursor: pointer;
}
.checkrow:hover { background-color: var(--c-fill); }
.checkrow input { width: 1rem; height: 1rem; accent-color: var(--c-accent); cursor: pointer; }
.checkrow__name { font-size: var(--fs-sm); font-weight: 500; }
.checkrow__org { font-size: var(--fs-xs); color: var(--c-text-secondary); }
.checkrow.is-member { opacity: 0.5; }

/* 一括選択の操作行 */
.m-listbar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 0.0625rem solid var(--c-separator);
  font-size: var(--fs-xs); color: var(--c-text-secondary);
}

/* 件数が増えても収まるよう高さを制限してスクロールさせる */
.m-users { max-height: 18rem; overflow-y: auto; padding-top: var(--sp-1); }

.m-empty { padding: var(--sp-6) var(--sp-2); text-align: center; font-size: var(--fs-sm); color: var(--c-text-secondary); }

/* ---------------------------------------------------------------------------
 * 3. フォームの行（モーダル内で使う簡易版）
 * ------------------------------------------------------------------------- */
.field { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.field__label { flex-shrink: 0; width: 5rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-secondary); }

/* ---------------------------------------------------------------------------
 * 3b. フォームの行（ラベルと入力の2列。狭い画面では縦積み）
 * ------------------------------------------------------------------------- */
.form-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-3); align-items: start;
  margin-bottom: var(--sp-4);
}
.form-row__label { padding-top: 0.4375rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-secondary); }
.form-row__req { color: var(--c-red); font-size: var(--fs-xs); margin-left: 0.25rem; }
.form-row__help { margin-top: 0.375rem; font-size: var(--fs-xs); color: var(--c-text-tertiary); line-height: 1.7; }

/* 横に並べる入力（期間の開始〜終了など） */
.form-inline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.form-inline__sep { color: var(--c-text-tertiary); font-size: var(--fs-sm); }

.input {
  width: 100%; height: var(--h-control);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm); background-color: var(--c-fill);
  font-size: var(--fs-sm);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.input:focus { box-shadow: 0 0 0 0.1875rem var(--c-focus-ring); }
.input:focus-visible { outline: none; }
.input::placeholder { color: var(--c-text-tertiary); }
.input--date { max-width: 10rem; }

.textarea {
  width: 100%; min-height: 4.5rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); background-color: var(--c-fill);
  font-size: var(--fs-sm); line-height: 1.6; resize: vertical;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.textarea:focus { box-shadow: 0 0 0 0.1875rem var(--c-focus-ring); }
.textarea:focus-visible { outline: none; }
.textarea::placeholder { color: var(--c-text-tertiary); }

/* 選択済みを示すチップ（絞り込みで隠れても分かるように出す） */
.pick-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pick-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 1.75rem; padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-full);
  background-color: var(--c-accent-soft); color: var(--c-accent);
  font-size: var(--fs-xs); font-weight: 700;
}
.pick-chip button { color: inherit; font-size: 0.6875rem; padding: 0 0.125rem; }

/* 候補が多いときのスクロール領域 */
.pick-list { max-height: 12rem; overflow-y: auto; padding-top: var(--sp-1); }

@media (max-width: 48rem) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .form-row__label { padding-top: 0; }
}

/* ---------------------------------------------------------------------------
 * 4. 戻るリンク・補足文
 * ------------------------------------------------------------------------- */
.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--h-control); padding: 0 var(--sp-2); margin-bottom: var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-accent);
}
.backlink:hover { background-color: var(--c-accent-soft); }

.sec__note { font-size: var(--fs-xs); color: var(--c-text-tertiary); line-height: 1.7; }

.attrs { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--c-text-secondary); }
.attrs__item { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* 空状態 */
.empty { padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--c-text-secondary); font-size: var(--fs-sm); }
.empty__icon { font-size: 1.75rem; color: var(--c-text-tertiary); margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------------------
 * パネル（詳細画面の情報の塊）
 * ------------------------------------------------------------------------- */
.panel {
  border: 0.0625rem solid var(--c-hairline); border-radius: var(--r-md);
  background-color: var(--c-surface); box-shadow: var(--shadow-card); overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
}
.panel__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; }
.panel__count { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-tertiary); }
.panel__body { padding: var(--sp-4); }
.panel__body--flush { padding: 0; }
.panel__note { padding: var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-tertiary); line-height: 1.7; }

/* パネル内の一覧行 */
.list-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background-color: var(--c-fill); }
.list-row__main { flex: 1 1 auto; min-width: 0; }
.list-row__title { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__meta { font-size: var(--fs-xs); color: var(--c-text-secondary); }

/* 定義リスト形式の情報表示 */
.dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
.dl > dt {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-secondary);
}
.dl > dd {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.dl > dt:last-of-type, .dl > dd:last-of-type { border-bottom: none; }

/* 詳細画面の2カラム */
.detail-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.detail-col { display: grid; gap: var(--sp-4); }

@media (max-width: 64rem) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * 絞り込み用のサジェスト選択（単一選択）
 * 候補が増えてもプルダウンから探さずに済むよう、検索欄つきの一覧から選ぶ
 * ------------------------------------------------------------------------- */
.picker { position: relative; display: inline-block; }

.picker__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--h-control); max-width: 14rem;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-sm);
  background-color: var(--c-fill);
  font-size: var(--fs-sm); color: var(--c-text);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.picker__btn:hover { background-color: var(--c-fill-hover); }
.picker__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__chev { font-size: 0.625rem; color: var(--c-text-tertiary); flex-shrink: 0; }

/* 絞り込みが効いていることを示す */
.picker.is-set .picker__btn {
  background-color: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 700;
}
.picker.is-set .picker__chev { color: var(--c-accent); }

.picker__pop {
  position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 200;
  width: 17rem; max-width: 80vw;
  padding: var(--sp-1);
  border: 0.0625rem solid var(--c-hairline); border-radius: var(--r-lg);
  background-color: var(--c-popover-bg); box-shadow: var(--shadow-popup);
  -webkit-backdrop-filter: saturate(180%) blur(1.5rem);
  backdrop-filter: saturate(180%) blur(1.5rem);
  animation: popover-in var(--dur-base) var(--ease-out);
}
.picker__pop[hidden] { display: none; }

.picker__search {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 2rem; padding: 0 var(--sp-2); margin-bottom: var(--sp-1);
  border-radius: var(--r-sm); background-color: var(--c-fill);
  color: var(--c-text-tertiary); font-size: var(--fs-xs);
}
.picker__search input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none;
  font-size: var(--fs-sm); color: var(--c-text);
}
.picker__search input:focus { outline: none; }

.picker__list { max-height: 15rem; overflow-y: auto; }

.picker__item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  min-height: 2.125rem; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-text); text-align: left;
}
.picker__item:hover, .picker__item.is-active { background-color: var(--c-accent); color: var(--c-text-on-accent); }
.picker__item.is-current { font-weight: 700; }
.picker__item.is-current::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: auto; font-size: 0.625rem; color: var(--c-accent);
}
.picker__item.is-current:hover::after, .picker__item.is-active.is-current::after { color: currentColor; }

.picker__dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: var(--r-full); background-color: var(--tone, var(--c-gray)); }
.picker__item:hover .picker__dot, .picker__item.is-active .picker__dot { background-color: currentColor; }

.picker__main { min-width: 0; overflow: hidden; }
.picker__sub { display: block; font-size: var(--fs-xs); opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.picker__empty { padding: var(--sp-4) var(--sp-2); text-align: center; font-size: var(--fs-sm); color: var(--c-text-secondary); }


/* ============================================================================
 * ビューの切替とテーブル
 *   .view / .is-active はタブなど、1画面の中で表示を切り替える箇所で使う。
 *   .tbl は一覧のテーブル表示の共通スタイル。
 * ========================================================================== */
.view { display: none; }
.view.is-active { display: block; }

/* リスト表示（テーブル）の共通スタイル */
.tbl { width: 100%; font-size: var(--fs-sm); }
.tbl thead th {
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--c-surface-sunken);
  border-bottom: 0.0625rem solid var(--c-hairline);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-secondary);
  text-align: left; white-space: nowrap;
}
.tbl tbody tr { border-bottom: 0.0625rem solid var(--c-separator); transition: background-color var(--dur-fast) var(--ease); }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr:hover { background-color: var(--c-fill); cursor: pointer; }
.tbl td { padding: var(--sp-3); vertical-align: middle; }
.tbl__content { font-size: var(--fs-base); font-weight: 500; line-height: 1.4; }
.tbl__num { text-align: right; color: var(--c-text-secondary); white-space: nowrap; }


/* ============================================================================
 * 実装フェーズで追加した部品
 *
 *   ここから下はモックには無かったもの。
 *   モックは静的な HTML の集まりで、通信の結果を知らせる必要がなかったため。
 * ========================================================================== */

/* ---- トースト（操作が通ったことの短い合図） ------------------------------ */

#toast-root {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  z-index: 400;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;              /* 下の画面を操作できなくしない */
  width: max-content;
  max-width: calc(100vw - var(--sp-8));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 0.0625rem solid var(--c-hairline);
  background-color: var(--c-popover-bg);
  -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
  backdrop-filter: saturate(180%) blur(1.25rem);
  box-shadow: var(--shadow-popup);
  font-size: var(--fs-sm);
  /* 出るときに下から寄せる。prefers-reduced-motion は reset.css で無効化される */
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.toast__icon { font-size: var(--fs-base); }

.toast--ok   .toast__icon { color: var(--c-green); }
.toast--ng   .toast__icon { color: var(--c-red); }
.toast--info .toast__icon { color: var(--c-blue); }

/* ---- 横幅いっぱいのセグメンテッドコントロール ---------------------------- */
/*      モックではインライン style で書いていたものをクラスにした            */

.segmented--full { width: 100%; }

.segmented--full .segmented__item {
  flex: 1 1 0;
  justify-content: center;
}

/* ---- 空の状態に添える補足 ------------------------------------------------ */

.empty__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}