@charset "UTF-8";
/* ============================================================================
 * views/search.css
 * COLAVIA v1.008.0000
 *
 *   横断検索（§5.10）と、ヘッダの検索の小窓。
 *
 *   ＜種別ごとに区切って並べる＞
 *   1本の並びに混ぜると、種類の違うものが日付順に入り乱れて読めない。
 *   見出しで区切り、その中は新しい順に並べる。
 *
 *   ＜当たった語を強調する＞
 *   なぜこの結果が出たのかが、読まなくても分かるようにする。
 *
 *   サイズの指定は px より rem / vh / vw を優先する（§2.2）。
 *   :has() は使わない（§2.2）。
 * ========================================================================== */

/* ==========================================================================
   ヘッダの小窓
   ========================================================================== */

/* ＜窓は常に広げておかない（§6.1）＞
   ヘッダには日常的に使う5メニューだけを置く方針で、
   入力欄を常時出すとメニューのラベルが早く縮む。
   位置は開くたびに JS が測って入れる */

.search-pop {
  position: fixed;
  z-index: 300;

  /* 狭い画面では画面幅に合わせる。
     左右に 1rem ずつ残すのは、縦スクロールバーの分（100vw は
     スクロールバーを含む）を差し引いても余白が消えないようにするため */
  width: min(24rem, calc(100vw - 2rem));
  padding: var(--sp-3);

  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-popup);

  animation: popover-in var(--dur-base) var(--ease-out);
}

.search--pop { width: 100%; }

.search-pop__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   種別のタブ
   ========================================================================== */

.s-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.s-tabs:empty { display: none; }

.s-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  height: 2rem;
  padding: 0 var(--sp-3);

  border: 1px solid var(--c-hairline);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.s-tab:hover { background: var(--c-fill); color: var(--c-text); }

.s-tab.is-on {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text-on-accent);
  font-weight: 700;
}

.s-tab__n {
  padding: 0 0.3rem;
  border-radius: var(--r-full);
  background: var(--c-fill);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.s-tab.is-on .s-tab__n { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* ==========================================================================
   結果
   ========================================================================== */

.s-results { margin-bottom: var(--sp-4); }

.s-group { margin-bottom: var(--sp-5); }

.s-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-secondary);
}

/* 上限に達したときの断り。
   「これで全部」と思われないようにする */

.s-group__more {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-tertiary);
}

.s-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.s-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;

  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  color: var(--c-text);
  text-decoration: none;

  transition: border-color var(--dur-fast) var(--ease);
}

a.s-item:hover { border-color: var(--c-accent); }

/* 移動先を持たないもの（ユーザーなど）。
   押せそうに見えて何も起きない、という状態を作らない */

.s-item.is-flat { cursor: default; }

.s-item__top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.s-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  word-break: break-word;
}

a.s-item:hover .s-item__title { color: var(--c-accent); }

.s-item__when {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
  white-space: nowrap;
}

.s-item__excerpt {
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  line-height: 1.7;
  word-break: break-word;
}

.s-item__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

/* 当たった語。地の色を変えるだけにして、
   文字色はそのまま（読みの流れを切らない） */

.s-item mark {
  padding: 0 0.1rem;
  border-radius: var(--r-xs);
  background: var(--c-yellow);
  color: #1d1d1f;
}

/* ==========================================================================
   狭い画面
   ========================================================================== */

@media (max-width: 48rem) {

  .s-item__top { flex-direction: column; gap: 0.15rem; }
  .s-item__when { align-self: flex-start; }
}