/* ==== features: static/features/home.css ==== */
/* home／search：首頁的動態流、搜尋條、搜尋建議、卡片。
* 度量對照 iOS 的 PostCard／HomeView.Grid：卡片圓角 12、無邊線（圓角給夠就不需要那條線）、
* 文字區內距 10、主副字間距 5、分類標籤是照片上的材質膠囊。
* 顏色只用 var(--…) token，深淺色都由 core 的色票決定。 */
/* ---------- 頁首：分段 ---------- */
/* 「推薦／追蹤中」那一列。
> [!danger] 不要用負邊距把觸控區「藏」到上下的留白裡
> 我一度給 `.seg` 加 `margin-block: -4px`，讓 44 的觸控區在版面上只佔 36。
> 前提是「上下的留白裡沒有其他可點目標」——**那個前提是錯的**：
> 下面那 4px 直接壓在搜尋框上（本人回報「與搜索框重疊了」）；
> 上面那 4px 在瀏覽器模式會鑽到固定的 top app bar 底下，那裡有五個目標。
> 兩個都違反 WCAG 2.5.5 的「目標不得重疊」，而且會真的點錯。
>
> 現在不用負邊距：整列就是觸控目標的 44，上下內距 0。
> 48 → 44 是這個做法能拿到的全部。要再矮就得把觸控目標降到 44 以下，
> 那是 AAA（2.5.5）降到 AA（2.5.8，24×24）的取捨，該由本人決定。 */
.home-head { padding-bottom: 0; min-height: 0; }
/* > [!important] 這兩顆刻意只達到 WCAG 2.5.8（AA），不是 2.5.5（AAA）
> 這個檔案原本一律以 2.5.5 的 44×44 為準。本人要求再矮，並在說明過
> 「這是 AAA 降到 AA」之後說「試試吧」，所以是**明示的取捨**，不是疏漏。
>
> 2.5.5（AAA） 44×44 先前的值
> 2.5.8（AA） 24×24 現在的下限
>
> 取 28：padding 4 ＋ 行高 20 ＋ padding 4，**沒有餘量**。
>
> > [!note] 文字與底線的間隙是兩件事加起來的
> > `min-height` 比內容高出來的部分，塊級排版會留在**下面**——而指示器是
> > `bottom: 0`，所以那段餘量整段變成字與底線之間的距離。
> > 量到的變化：
> > min-height 36、padding-bottom 6 間隙 8.5
> > min-height 32、padding-bottom 6 間隙 6.5（餘量 6→2）
> > min-height 28、padding-bottom 4 間隙 2.5（餘量 0，內距再減 2）
> > 前兩步只差 2px，本人回報「跟沒縮沒區別」——因為只動了餘量，
> > 沒有動 padding。兩個都要砍才看得出來。
>
> > [!note] 文字與底線的間隙是**兩件事**加起來的
> > `min-height` 比內容高出來的部分，塊級排版會留在**下面**——而指示器是
> > `bottom: 0`，所以那段空隙全部變成字與底線之間的距離。
> > 36 的時候量到 8.5px（6 是 min-height 的餘量、6 是 padding-bottom、
> > 減掉 3 的指示器高）。收到 32 之後餘量只剩 2。
> **其餘目標不動**——搜尋框、導覽列的五格都還是 44。只有這一列降。
> 要改回 AAA 就把 36 換回 44，其他什麼都不用動。 */
/* > [!note] 拿掉 min-width：底線要跟文字一樣寬
> 指示器是 `left: 0; right: 0`，所以它的寬度就是格子的寬度。
> `min-width: 44px` 會把格子撐到 44，而「推薦」只有 28 寬——線就往右
> 多出一截。拿掉之後格子貼合文字，線也跟著貼合，那才是 M3 primary tab
> 的樣子。
> 觸控寬度因此變成文字寬（推薦 28、追蹤中 42），仍在 AA 的 24 之上。 */
.home-head .seg { min-height: 28px; padding-bottom: 4px; }
/* ---------- 常駐搜尋條（iOS 的 navigationBarDrawer(displayMode: .always)） ---------- */
.home-search {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin: 0 0 8px;
padding: 0 4px 0 12px;
border-radius: var(--radius);
background: var(--sunk);
color: var(--ink);
}
.home-search-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-3); }
.home-search-input {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 16px;
}
.home-search-input::placeholder { color: var(--ink-3); }
.home-search-cancel {
min-height: 44px;
padding: 0 10px;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-weight: 600;
cursor: pointer;
}
/* ---------- 搜尋建議：點了搜尋欄才出現，蓋在動態流上 ---------- */
.home-stage { position: relative; }
.home-suggest {
position: absolute;
left: 0; right: 0; top: 0;
z-index: 5;
min-height: 60vh;
padding-top: 2px;
background: var(--bg);
}
.home-suggest-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 7px;
}
.home-suggest-head .grouped-header { margin: 0 0 0 4px; }
.home-suggest-clear {
min-height: 44px;
padding: 0 8px;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.home-recent { padding: 0 2px 0 12px; }
.home-recent-term {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.home-recent-term .ms { --ms-size: 18px; --ms-opsz: 20; flex: 0 0 auto; color: var(--ink-3); }
.home-recent-term span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-recent-del {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: 0 0 auto;
border: 0;
padding: 0;
background: none;
color: var(--ink-3);
border-radius: 50%;
cursor: pointer;
}
.home-recent-del .ms { --ms-size: 16px; --ms-opsz: 20; }
.home-capsules { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.home-capsule {
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 14px;
cursor: pointer;
}
/* ---------- 動態流 ---------- */
.home-feed { position: relative; }
.home-nojs { margin: 0 0 12px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
/* 換一批內容時淡入 0.18s：讓眼睛知道剛才發生了替換，不是閃屏 */
.home-feed .falls.is-enter { animation: home-enter .18s ease; }
@keyframes home-enter { from { opacity: 0; } }
/* 視口掉到 320px 以下（頁面放大 200%、或很窄的裝置）退成單欄——
WCAG 1.4.4／1.4.10：放大不能掉內容。home.js 的 columns() 用同一個斷點。 */
@media (max-width: 320px) {
.home-feed .falls { grid-template-columns: 1fr; }
}
/* 桌面（側邊欄版式）內容欄放寬到 640，開三欄。斷點與 app.css 的側邊欄、
與 home.js 的 columns() 是同一個 900——三處對不上就會出現
「CSS 三欄、JS 塞兩欄」那種欄位空一半的畫面。 */
@media (min-width: 900px) {
.home-feed .falls { grid-template-columns: 1fr 1fr 1fr; }
}
/* ---------- 卡片（PostCard） ---------- */
.home-card { border: 0; border-radius: 12px; }
.home-media {
position: relative;
overflow: hidden;
box-sizing: border-box;
background: var(--sunk);
}
.home-media.is-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-media.is-text,
.home-media.is-featured { padding: 41px 12px 10px; } /* 上面讓開左上角的分類標籤 */
.home-media.is-featured { background: var(--accent); color: var(--accent-ink); }
.home-body {
margin: 0;
color: var(--ink);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
}
.home-featured { display: flex; flex-direction: column; gap: 4px; }
.home-lead, .home-due { font-size: 11px; }
.home-amount { font-size: 17px; font-weight: 700; line-height: 1.2; }
/* 分類標籤：疊在照片上、而照片的亮度不可知。iOS 用 .regularMaterial——取樣底下再模糊，
亮圖上偏白、暗圖上偏黑，字在兩種情況下都讀得到。這裡用半透明的 surface ＋ backdrop 模糊。 */
.home-chip {
position: absolute;
top: 8px; left: 8px;
max-width: calc(100% - 16px);
padding: 3px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 78%, transparent);
color: var(--ink);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
}
.home-card .body { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
.home-title {
margin: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.home-price { color: var(--accent); font-size: 12px; font-weight: 600; }
.home-card .meta { margin: 0; min-width: 0; }
.home-avatar { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; background: var(--sunk); }
.home-card .meta .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-time { flex: 0 0 auto; color: var(--ink-3); }
.home-likes { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.home-likes .ms { --ms-size: 12px; --ms-opsz: 20; }
/* ---------- 載入更多（content 態裡的局部指示） ---------- */
.home-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 0 8px;
}
.home-more-error { margin: 0; color: var(--danger); font-size: 13px; text-align: center; }
/* ---------- 空狀態／錯誤的補件（圖示、標題、動作） ---------- */
.home-state-icon { width: 46px; height: 46px; opacity: .55; }
.home-state-title { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.home-state-action { display: inline-flex; align-items: center; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
.home-feed .falls.is-enter { animation: none; }
}
/* ---------- 搜尋鍵（收起時的樣子） ---------- */
/* 靠右。`.head` 是 flex，前面是 .segs，所以 margin-left: auto 就把它推到底。
尺寸沿用 .iconbtn（44×44，WCAG 2.5.5）——這一顆是圖示，沒有文字可以幫忙
辨識，把它縮到 AA 的 24 會比分頁標籤更難按。 */
.home-search-open {
margin-left: auto;
flex: 0 0 auto;
color: var(--md-sys-color-on-surface-variant);
border-radius: var(--md-sys-shape-corner-full);
}
.home-search-open .ms { --ms-size: 24px; --ms-opsz: 24; }
/* ---------- 搜尋欄的焦點指示器 ---------- */
/* > [!danger] 不能直接 `outline: none`——那是 WCAG 2.4.7 的必要條件
* > 本人回報「輸入聚焦高亮框太醜」。醜的不是「有指示器」，是**畫法**：
* > 1. 框畫在 上、`outline-offset: 2px` 外擴，而 input 在容器
* > 裡面，所以看起來是一圈脫離欄位的懸空綠框
* > 2. 全域規則寫死 `border-radius: 4px`，搜尋欄卻是 --radius（12px）
* > ——方角的框套在圓角的欄位上
* >
* > 另外，`:focus-visible` 對**文字輸入欄是特例**：依規範只要聚焦就匹配，
* > 即使是用手指點的（因為接下來預期有鍵盤輸入）。所以在手機上點一下就會
* > 冒出來，不是設定沒生效。
* >
* > 改成 M3 的做法：指示器畫在**欄位本身**、不外擴、圓角跟著欄位走。
* > 顏色用 primary 對純黑約 11.3:1，遠高於 WCAG 1.4.11 非文字元素要的 3:1。 */
.home-search:has(.home-search-input:focus-visible) {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 0;
border-radius: var(--radius);
}
.home-search-input:focus-visible { outline: none; }
/* ---------- 搜尋頁（pages/search.py） ---------- */
/* > [!important] 搜尋是**完全獨立**的一頁：蓋住其他一切，沒有底部導覽
* > 本人指定。它不是第五個目的地，是一個「進去做一件事、做完就回來」的
* > 全螢幕視圖——原生 App 的搜尋也是這樣（推上來蓋住分頁列）。
* >
* > 所以三件事一起做：
* > 1. 分頁列 display: none（不是視覺隱藏——它在這一頁沒有任何角色）
* > 2. --tabbar-clear 歸零，內容不必為它讓位
* > 3. 原型的語言／外觀列也收起來，畫面上只留搜尋這件事
* > 回去的路是左上角那顆返回鍵，它是真的 。 */
:root[data-page="search"] {
--tabbar-clear: 0px;
}
:root[data-page="search"] .tabbar,
:root[data-page="search"] .protobar {
display: none;
}
/* 這一頁重用 home 的動態流機器，所以沿用它的 class；只有頁首不一樣：
返回鍵 ＋ 一條佔滿寬度的搜尋欄，沒有分段、沒有標題。 */
.search-head { gap: 4px; }
.search-back { flex: 0 0 auto; margin-left: -8px; color: var(--md-sys-color-on-surface); }
.search-back .ms { --ms-size: 24px; --ms-opsz: 24; }
.search-head .search-form { flex: 1 1 auto; margin: 0; }