/*!
 * assist.css — Setlista 3 CONTROL 画面のダークUIに合わせた検索パネル
 *
 * 本体 control.css は CSS変数を持たないため、実値をここで変数化して踏襲する。
 *   背景 #333/#222 グラデ / 入力欄 #444 / 文字 #fff / radius 4px
 *   フォント "LINE Seed JP" / 見出し 'Josefin Sans' / アクセント #4cc
 */
.assist {
  --assist-bg: #3a3a3a;
  --assist-field: #444;
  --assist-fg: #fff;
  --assist-dim: #aaa;
  --assist-line: #555;
  --assist-accent: #4cc;
  --assist-radius: 4px;

  display: block;
  margin: 0 0 10px;
  font-family: inherit;   /* 埋め込み先のフォントを継承する */
  font-size: 14px;
  color: var(--assist-fg);
}

.assist * { box-sizing: border-box; }

.assist-row { display: block; }

.assist #assistQ {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--assist-line);
  background: var(--assist-field);
  color: var(--assist-fg);
  font-size: 14px;
  border-radius: var(--assist-radius);
  font-family: inherit;
}
.assist #assistQ::placeholder { color: var(--assist-dim); }
.assist #assistQ:focus {
  outline: none;
  border-color: var(--assist-accent);
}

/* ── 候補リスト ─────────────────────────────── */
.assist-list {
  margin: 4px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  list-style-type: none;
  background: var(--assist-bg);
  border: 1px solid var(--assist-line);
  border-radius: var(--assist-radius);
}
.assist-list[hidden] { display: none; }

.assist-hit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, .20);
  cursor: pointer;
  line-height: 1.3;
}
.assist-hit:last-child { border-bottom: none; }
.assist-hit:hover { background: rgba(127, 127, 127, .13); }
.assist-hit.is-cursor {
  background: rgba(68, 204, 204, .18);
  box-shadow: inset 3px 0 0 var(--assist-accent);
}

.assist-t {
  flex: 0 1 auto;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.assist-a {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--assist-dim);
  overflow-wrap: anywhere;
}
.assist-p {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--assist-dim);
  border: 1px solid var(--assist-line);
  border-radius: 8px;
  padding: 1px 6px;
}
.assist-badge {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--assist-accent);
  color: #222;
}

.assist-more {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--assist-dim);
  text-align: center;
}

/* ── フッタ（演者・形式・状態） ───────────────── */
.assist-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--assist-dim);
}
.assist-sel {
  padding: 3px 4px;
  background: var(--assist-field);
  color: var(--assist-fg);
  border: 1px solid var(--assist-line);
  border-radius: var(--assist-radius);
  font-size: 11px;
  font-family: inherit;
}
/* 演者固定版のラベル（セレクタの代わり） */
.assist-perf {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--assist-line);
  border-radius: var(--assist-radius);
  color: var(--assist-fg);
  font-size: 11px;
}

.assist-status {
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
}
.assist-status.is-flash { color: var(--assist-accent); }

/* ── スマホ・タブレット（2画面目としてVPSホスト版を開く用途） ───── */
/* 入力欄は 16px 未満だと iOS Safari がフォーカス時に自動ズームするため 16px 以上にする */
@media (max-width: 640px), (pointer: coarse) {
  .assist #assistQ { font-size: 16px; padding: 12px; }
  .assist-list { max-height: 55vh; }
  .assist-hit { padding: 11px 12px; gap: 10px; }
  .assist-t { font-size: 15px; }
  .assist-a { font-size: 12px; }
  .assist-foot { flex-wrap: wrap; font-size: 12px; }
  .assist-sel { font-size: 13px; padding: 6px 4px; }
}