/* public/css/shoe-index.css — 鞋款目錄頁專屬樣式
   依賴：tokens.css + chrome.css + shoe.css（對開外殼、folio、footer 均由 shoe.css 提供）*/

/* ── 左頁：搜尋 ── */
.si-search-wrap { margin-bottom: 16px; }
.si-search {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: var(--u-0); line-height: var(--lh-u);
  background: none; border: none; border-bottom: 1px solid var(--paper-2);
  color: var(--ink); padding: 8px 0; outline: none;
  transition: border-color .2s;
}
.si-search::placeholder { color: var(--ink-3); }
.si-search:focus { border-bottom-color: var(--teal-ink); }

/* ── 左頁：面向列 ── */
.si-facets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.si-facet {
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em;
  background: none; border: 1px solid var(--paper-2); color: var(--ink-3);
  padding: 4px 10px; cursor: pointer; border-radius: var(--r-xs);
  transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.si-facet:hover { border-color: var(--ink-3); color: var(--ink); }
.si-facet.active {
  background: var(--teal-ink); border-color: var(--teal-ink); color: var(--paper);
}

/* ── 左頁：目錄表 ── */
.si-scroll { overflow-y: auto; }
.ctable {
  width: 100%; border-collapse: collapse;
}
.ctable thead th {
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--paper-2);
  padding: 8px 8px 8px 0; text-align: left; user-select: none;
  cursor: pointer; white-space: nowrap;
}
.ctable thead th:hover { color: var(--ink); }
.ctable thead th.sort-active { color: var(--teal-ink); }
.ctable thead th.sort-active::after { content: ' ↓'; }
.ctable thead th.sort-active.sort-asc::after { content: ' ↑'; }
.ctrow {
  border-bottom: 1px solid var(--paper-2); cursor: pointer;
  transition: background .15s;
}
.ctrow:hover { background: var(--paper-2); }
.ctrow td { padding: 10px 8px 10px 0; color: var(--ink); vertical-align: middle; }
.ctrow .col-name { font-family: var(--serif); font-weight: 900; font-size: var(--u-0); }
.ctrow .col-count { color: var(--teal-ink); font-family: var(--mono); font-weight: 700; font-size: var(--t--1); text-align: right; padding-right: 16px; white-space: nowrap; }
.ctrow .col-date { color: var(--ink-3); font-family: var(--mono); font-size: var(--t--2); white-space: nowrap; }

.si-loading { font-family: var(--mono); font-size: var(--t--1); color: var(--ink-3); letter-spacing: .06em; padding: 48px 0; display: block; }
.si-empty { font-family: var(--mono); font-size: var(--t--1); color: var(--ink-3); letter-spacing: .06em; padding: 24px 0; }

/* ── 右頁：最近卡片 ── */
.scard {
  display: block; text-decoration: none;
  background: var(--teal); border-radius: var(--r-sm);
  padding: 20px; margin-bottom: 12px;
  transition: background .2s;
}
.scard:hover { background: var(--teal-2); }
.scard-name {
  font-family: var(--serif); font-weight: 900; font-size: var(--k-1);
  line-height: var(--lh-1); color: var(--ink); margin-bottom: 8px;
}
.scard-quote {
  font-family: var(--serif); font-size: var(--u-0); line-height: var(--lh-u);
  color: var(--ink-2); font-style: italic; margin-bottom: 8px;
  text-wrap: pretty; max-width: 30ch;
}
.scard-meta {
  display: flex; gap: 12px;
  font-family: var(--mono); font-size: var(--t--2); color: var(--teal-ink); letter-spacing: .06em;
}

/* ── 桌機：左頁可捲表格（sticky thead）── */
@media (min-width: 1024px) {
  .si-scroll {
    max-height: calc(100dvh - var(--kq-header-h) - var(--kq-footer-h) - 200px);
    overflow-y: auto;
  }
  .ctable thead { position: sticky; top: 0; background: var(--paper); z-index: 1; }
}