/* 我的守護圖鑑（js/collection.js）。class 用 col- 開頭。顏色、字體、元件都用 design-system 的 token 與 class。 */

.col-scroll > * { flex: none; }
.col-scroll .dsh-btn { text-decoration: none; box-sizing: border-box; }

.col-private { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.col-section { display: flex; flex-direction: column; gap: var(--space-3); }
.col-section .tp-p { margin: 0; }
.col-h { margin: 0; font-size: 18px; line-height: 26px; }
.col-h small { margin-left: var(--space-2); font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* 在地守護：手機版兩欄的小神獸卡 */
.col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.col-card { position: relative; width: auto; color: var(--text); text-decoration: none; }
.col-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.col-card .dsh-beast__art { height: 112px; }
.col-card .dsh-beast__art img { width: auto; height: 104px; }
.col-card.dsh-beast--rare .dsh-beast__art::before { width: 92px; height: 92px; top: 8px; }
.col-card--tree .dsh-beast__art { align-items: center; }
.col-card .dsh-beast__art .col-card__tree { width: 60px; height: 60px; }
.col-card .dsh-beast__seal { font-size: 11px; line-height: 16px; letter-spacing: 0.05em; }
.col-card .dsh-beast__body { gap: var(--space-1); padding: 0 var(--space-2) var(--space-3); }
.col-card .dsh-beast__name { font-size: 18px; line-height: 24px; padding: 2px var(--space-3); max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-card .dsh-beast__meta { font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.col-card .dsh-tag { font-size: 12px; }

/* 卡片左上角的緞帶：異動公告（橘）、新活動（紅） */
.col-ribbon {
  position: absolute; left: calc(var(--stroke-bold) * -1); top: var(--space-3);
  padding: 3px var(--space-2) 3px 10px; border: var(--stroke-ui) solid var(--outline);
  background: var(--red-500); color: var(--ink-50); font-size: 12px; line-height: 16px; font-weight: 900;
}
.col-ribbon--notice { background: var(--state-notice); color: var(--text); }

/* 遠端關注：一行一棵 */
.col-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--surface-raised); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md);
}
.col-list li + li { border-top: 1px solid var(--line); }
.col-row {
  display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3);
  box-sizing: border-box; color: var(--text); text-decoration: none;
}
.col-row:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.col-row__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--gold-200); border: var(--stroke-ui) solid var(--outline); box-sizing: border-box; }
.col-row__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-row__tree { flex: none; margin-inline: 2px; }
.col-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.col-row__name { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 22px; font-weight: 900; }
.col-row__meta { font-size: 12px; line-height: 18px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-row .dsh-tag { flex: none; font-size: 12px; }

/* 空白狀態 */
.col-scroll:has(.col-empty) { padding: 0; }
.col-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); }
.col-empty__art { position: relative; width: 200px; height: 220px; display: flex; align-items: flex-end; justify-content: center; }
.col-empty__art::before {
  content: ""; position: absolute; top: 10px; left: 10px; width: 180px; height: 180px; box-sizing: border-box;
  border-radius: 50%; background: var(--surface-raised); border: var(--stroke-bold) dashed var(--outline);
}
.col-empty__art img { position: relative; }
.col-empty__box {
  width: 100%; max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface-raised); border: var(--stroke-bold) solid var(--outline); border-radius: var(--radius-md);
}
.col-empty__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 30px; text-align: center; }
.col-empty__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--text-muted); text-align: center; }

/* 分頁：我守護的樹｜樹種圖鑑 */
.col-tabs { display: flex; gap: var(--space-2); }
.col-scroll:has(.col-empty) .col-tabs { padding: var(--space-4) var(--space-4) 0; }
.col-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box;
  background: var(--surface-raised); color: var(--text); border: var(--stroke-fine) solid var(--outline); border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.col-tab[aria-current="page"] { background: var(--brand-strong); color: var(--ink-50); }
.col-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* 樹種圖鑑：三欄格子，沒認識的是剪影 */
.col-dex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.col-dex__cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) var(--space-1);
  background: var(--surface-raised); color: var(--text); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md);
  text-align: center; text-decoration: none;
}
a.col-dex__cell:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.col-dex__cell img { width: 64px; height: 64px; object-fit: contain; }
.col-dex__name { font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 20px; }
.col-dex__meta { font-size: 11px; line-height: 16px; color: var(--text-muted); }
.col-dex__cell--rare { background: var(--green-700); color: var(--ink-50); box-shadow: inset 0 0 0 2px var(--green-700), inset 0 0 0 4px var(--honor); }
.col-dex__cell--rare .col-dex__meta { color: var(--green-100); }
.col-dex__cell--unknown { background: var(--surface-sunken); border-style: dashed; }
.col-dex__cell--unknown img { filter: brightness(0); opacity: 0.22; }
.col-dex__cell--unknown .col-dex__name { color: var(--text-muted); letter-spacing: 0.2em; }
.col-dex__hint {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--surface-raised); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md);
}
.col-dex__hint p { margin: 0; }
.col-dex__hint-title { font-size: 15px; line-height: 24px; font-weight: 700; }

/* ── 電腦版：神獸卡排成 dsh-dex 格狀、遠端關注排成兩三欄，沒有掃描 ── */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tree-page[data-page="collection"] { --page-max: var(--content-max); }
  .col-scroll { gap: var(--space-6); }
  .col-h { font-size: 24px; line-height: 32px; }
  .col-h small { font-size: 14px; }
  .col-grid.dsh-dex { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
  .col-card .dsh-beast__art { height: 196px; }
  .col-card .dsh-beast__art img { height: 175px; }
  .col-card.dsh-beast--rare .dsh-beast__art::before { width: 168px; height: 168px; top: 14px; }
  .col-card .dsh-beast__art .col-card__tree { width: 96px; height: 96px; }
  .col-card .dsh-beast__name { font-size: 22px; line-height: 30px; }
  .col-card .dsh-beast__meta { font-size: 14px; line-height: 20px; }
  .col-card:hover { background: var(--green-50); }
  .col-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); background: none; border: none; border-radius: 0; overflow: visible; }
  .col-list li + li { border-top: none; }
  .col-row { background: var(--surface-raised); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md); }
  .col-row:hover { background: var(--surface-sunken); }
  .col-empty__scan { display: none; }
  .col-tabs { max-width: 480px; }
  .col-dex { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
  .col-dex__cell { padding: var(--space-4) var(--space-2); }
  .col-dex__cell img { width: 96px; height: 96px; }
  .col-dex__name { font-size: 18px; line-height: 24px; }
  .col-dex__meta { font-size: 13px; line-height: 20px; }
  a.col-dex__cell:not(.col-dex__cell--rare):hover { background: var(--green-50); }
  .col-dex__hint { max-width: 480px; }
}