/* ==== features: static/features/link.css ==== */
/* link：連結卡（對應 LinkPreviewCard）與播放面板（對應 LinkPlayerView）。
 * 這組沒有自己的頁面，樣式給 compose／stash 用。只用 var(--…) token，深淺色都由 token 決定。
 *
 * 版面三種（LinkLayout）：.is-large 圖上文下、.is-compact 左小方圖右文字、.is-plain 不放圖。
 * 圓角走 --link-radius：放進分組清單（框裡有框）時由外層覆寫成更小的值，
 * 精簡版面的小方圖跟著縮（max(4px, radius − 4px)），否則縮圖比卡片還圓。 */

.link-card {
  --link-radius: var(--radius);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--link-radius);
  background: var(--sunk);              /* iOS 的 appTertiaryFill：卡自己站在灰底上 */
  color: var(--ink);
  text-align: left;
}
.link-card.is-compact {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
}
.link-card.is-compact:not(:has(.link-thumb)) { padding: 12px; }
.link-card.is-plain {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* ---------- 縮圖 ---------- */
/* 大圖：盒子的形狀由圖自己決定，高度不寫死——寬度由版面決定、高度照比例算（JS 寫 aspect-ratio）。
   精簡：固定 64 正方，文字才對得齊。 */
.link-thumb {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--sunk);
  color: inherit;
  font: inherit;
}
button.link-thumb { cursor: pointer; }
.link-card.is-large .link-thumb { aspect-ratio: 16 / 9; }
.link-card.is-compact .link-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: max(4px, calc(var(--link-radius) - 4px));
}
/* 兩條路都要 fill：盒子的比例已經夾過了，圖與盒子不一定同比例，差額用裁的而不是留白——
   留白會在卡片裡露出底色，看起來像沒載完。 */
.link-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 播放記號。疊在圖上，所以底要用材質（--bar-glass ＋ 模糊）——底下那張圖的亮度不可知。
   .is-live（真的按得動）才是實心的播放鍵。 */
.link-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bar-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
}
.link-badge .ms { --ms-size: 14px; --ms-opsz: 20; }
.link-card.is-compact .link-badge { left: 4px; bottom: 4px; width: 24px; height: 24px; }
.link-card.is-compact .link-badge .ms { --ms-size: 11px; --ms-opsz: 20; }

/* 純文字版面：代表來源的符號（按「那是什麼東西」給，不是按品牌給）。 */
.link-symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 12px 0 0 12px;
  color: var(--ink-3);
}
.link-symbol .ms { --ms-size: 22px; --ms-opsz: 24; }

/* ---------- 文字 ---------- */
.link-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 44px;                     /* 2.5.5：可點目標不得小於 44 */
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
}
.link-card.is-compact .link-info { min-height: 64px; padding: 0 4px 0 0; }
.link-card.is-compact:not(:has(.link-thumb)) .link-info { min-height: 44px; }
.link-card.is-plain .link-info { padding: 12px 12px 12px 0; }
.link-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--link-lines, 3);
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.link-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.4;
}
.link-byline {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
a.link-info:hover .link-title { text-decoration: underline; }

/* ---------- 播放面板 ---------- */
/* 底色寫死黑：那是**內容的底**，不是介面的底，不隨深淺色翻面（影片本來就在黑底上播）。
   所以它是這裡自己的 token，不掛在 :root 的主題色上。 */
.link-player {
  --link-player-bg: #000;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--link-player-bg);
}
.link-player.is-fill { height: 70vh; }
.link-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.link-sheet .ui-sheet-body { padding: 0; }
.link-sheet .link-player-body {
  --link-player-bg: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--link-player-bg);
}
.link-sheet .link-player-body:has(.link-empty) { background: transparent; }
.link-open { color: var(--ink); text-decoration: none; }

/* 走不到的空狀態（按鈕只在 playable 時出現）：面板單獨被用時不會是一片空白。 */
.link-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px var(--pad);
  color: var(--ink-2);
  font-size: 14px;
  text-align: center;
}
.link-empty strong { color: var(--ink); font-size: 16px; }
.link-empty-icon .ms { --ms-size: 36px; --ms-opsz: 40; color: var(--ink-3); }


/* ==== features: static/features/stash.css ==== */
/* stash：稍後再看。度量對齊 iOS 的 List（列高 48、主副字間距 2、副標 footnote 次要色），
 * 與 osuha.ui 的 .grouped-* 同一套數字。顏色只用 token。 */

.stash-heading { margin: 0; font-size: 22px; font-weight: 700; }
.stash-edit {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  border-radius: var(--radius);
}
.stash-edit.is-on { font-weight: 700; }   /* 「完成」那一態；不用 aria-pressed，見 stash.js 的 setEditing */

/* 貼上鈕：與 iOS 的 pasteBar 一樣放在清單上方，整寬 */
.stash-pastebar { margin: 0 0 12px; }
.stash-paste { width: 100%; }

/* ---------- 清單 ---------- */
.stash-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--line-soft);            /* 1px 的間隔露出來就是分隔線 */
}
.stash-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 4px 0 12px;
  background: var(--surface);
}
.stash-row + .stash-row { margin-top: 1px; }
.stash-row.is-selected { background: color-mix(in srgb, var(--surface) 86%, var(--accent)); }

/* [!important] iOS 的列用 .buttonStyle(.plain)——不然標題會被染成強調色。
   這一列要看起來像清單項目，不是像連結：文字用 --ink，不用 --accent、不畫底線。 */
.stash-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;                                 /* SubtitleRow spacing: 2 */
  padding: 8px 0;
  min-height: 48px;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
}
.stash-link:hover { color: var(--ink); }
.stash-row-title {
  font-size: 15px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                    /* adaptiveLineLimit(2) */
  overflow: hidden;
  overflow-wrap: anywhere;
}
.stash-row-host { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.stash-more { flex: 0 0 auto; color: var(--ink-2); }

/* 編輯模式的勾選框：原生 checkbox 22px，外面包一層 44×44 的 label 當可點目標（2.5.5）。
   點整列也能切換（stash.js 的 <a> click），這一層是給只點勾選框的人。 */
.stash-checkwrap {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -8px;                        /* 讓 22px 的框視覺上貼齊列的左內距 */
  cursor: pointer;
}
.stash-check {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.is-editing .stash-link { cursor: pointer; }

/* 三態容器裡的空狀態：字放大一點、留白多一點，別像一行錯誤訊息 */
.stash-list .state-panel.is-empty { padding-top: 72px; }
.stash-list .state-panel.is-empty .state-text { max-width: 30em; font-size: 14px; line-height: 1.6; }

/* ---------- 列選單面板裡的內容 ---------- */
.stash-menu-title { margin: 0 0 2px; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.stash-menu-host { margin: 0; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }

/* ---------- 手動貼上的欄位 ---------- */
.stash-paste-form { display: grid; gap: 10px; }
.stash-paste-note { margin: 0; color: var(--ink-3); font-size: 13px; }
.stash-paste-field {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

/* ---------- 底部「移除 N 項」（iOS 的 deleteBar，safeAreaInset bottom） ---------- */
.stash-deletebar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--capsule-inset) + var(--capsule-h) + 12px + env(safe-area-inset-bottom, 0px));
  width: min(460px - var(--pad) * 2, 100% - var(--pad) * 2);
  z-index: 40;
}
@media (display-mode: standalone) {
  .stash-deletebar { bottom: calc(var(--capsule-inset) + var(--capsule-h) + 12px); }
}
.stash-delete {
  width: 100%;
  border-color: transparent;
  background: var(--danger);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.stash-delete.is-danger { color: var(--bg); }   /* 蓋掉 .ui-btn.is-danger 的字色：底已經是 danger 了 */

/* 移除條在的時候，toast 要往上讓開，不然兩個疊在同一個位置（實測疊過）。
   只在這一頁、只在移除條露出時生效；不支援 :has 的舊瀏覽器退回原位，
   toast 兩秒後自己會消失，不算壞。 */
body:has(.stash-deletebar:not([hidden])) .ui-toast {
  bottom: calc(var(--capsule-inset) + var(--capsule-h) + 12px + 44px + 12px + env(safe-area-inset-bottom, 0px));
}
@media (display-mode: standalone) {
  body:has(.stash-deletebar:not([hidden])) .ui-toast {
    bottom: calc(var(--capsule-inset) + var(--capsule-h) + 12px + 44px + 12px);
  }
}

/* ---------- 整頁拖放的落點 ---------- */
/* pointer-events: none：它只是視覺，drop 事件仍然落在 document 上 */
.stash-dropzone {
  position: fixed;
  inset: 10px;
  z-index: 55;
  display: grid;
  place-items: center;
  border: 2px dashed var(--accent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 80%, var(--accent));
  pointer-events: none;
}
.stash-dropzone-text {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
}