/* 我的伺服器：搜尋工具列、已安裝／尚未安裝兩區、伺服器卡片。
 * 硬規則（AGENTS.md §12）：卡片不得固定高度，伺服器名稱不得單行截斷。 */

.list-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.search {
  position: relative;
  flex: 1 1 220px;
  max-width: 320px;
}

.search .input {
  padding-left: var(--sp-8);
}

.search__icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

/* ── 分區 ─────────────────────────────────── */

.guild-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-height: 0;
  padding-bottom: var(--sp-6);
}

/* 兩區之間用一條虛線分隔：已安裝與尚未安裝不是同一種優先順序 */
.guild-group + .guild-group {
  padding-top: var(--sp-6);
  border-top: 1px dashed var(--line);
}

.guild-group__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.guild-group__title {
  font-size: var(--fs-xl);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.guild-group__hint {
  max-width: 62ch;
  margin-top: var(--sp-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* 欄數由可用寬度決定：手機 1 欄、平板 2–3 欄、桌機 4 欄、電視 5–6 欄，
   每一階的卡片寬度都由 --card-min 跟著放大，不會變成一排小方塊。 */
.guild-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  align-items: stretch;
  gap: var(--sp-4);
}

/* ── 伺服器卡片 ───────────────────────────── */

.guild-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.guild-card:hover,
.guild-card:focus-within {
  border-color: var(--focus-line);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.guild-card--installed {
  background:
    linear-gradient(160deg, var(--focus-soft), transparent 42%),
    var(--bg-elev);
}

/* 尚未安裝：虛線邊界代表「還不是你的工作區」 */
.guild-card--available {
  border-style: dashed;
  background: var(--bg-soft);
  box-shadow: none;
}

.guild-card--frequent {
  border-color: var(--focus-line);
}

.guild-card--frequent::before {
  content: '常用';
  position: absolute;
  top: 0;
  left: var(--sp-5);
  padding: 2px var(--sp-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--focus);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.guild-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.guild-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--avatar-plate);
  color: var(--text-on-plate);
  font-weight: 700;
}

.guild-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guild-card__state {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.guild-card--installed .guild-card__state {
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  color: var(--ok);
}

.guild-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: var(--sp-4) 0 var(--sp-5);
}

/* 伺服器名稱可換行，中文長名不截斷（§12） */
.guild-card__name {
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.35;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.guild-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.guild-card__hint {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.guild-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.guild-card__actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

.guild-card__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--focus);
}

/* ── 頭像與載入骨架 ───────────────────────── */

/* widgets.guildAvatar 的預設 class，工作區與骨架都會用到 */
.guild-row__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--avatar-plate);
  color: var(--text-on-plate);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.guild-row__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guild-skeleton {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* ── 邀請卡（空狀態與未安裝提示） ─────────────── */

.invite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  text-align: center;
}

/* 欄數一律交給 auto-fill 與 --card-min 決定，不在斷點硬寫欄數，
   否則平板會出現「一欄卡片 + 右邊一大片空白」。 */
@media (max-width: 900px) {
  .guild-list {
    gap: var(--sp-6);
  }

  .guild-group__head {
    align-items: flex-start;
  }

  .guild-card {
    padding: var(--sp-4);
  }
}

@media (max-width: 640px) {
  .list-tools,
  .search {
    width: 100%;
    max-width: none;
  }

  .list-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list-tools .search {
    grid-column: 1 / -1;
  }

  .list-tools .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .guild-card__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .guild-card__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guild-card:hover,
  .guild-card:focus-within {
    transform: none;
  }
}