/* 神婆個仔 —— 圖示卡片。
搬自 pkg 草稿(.items / .it)同首頁草稿流程(.hd-flow → .flowline)。
要喺 styles.css 之後載入;只用 styles.css 嘅 token,冇新色。 */
/* ── 清單卡:圖示 + 粗體名 + 一句解釋 ── */
.items{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
@media (min-width:600px){.items{grid-template-columns:1fr 1fr}}
.it{display:grid;grid-template-columns:64px 1fr;gap:var(--space-3);align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}
.it__svg{display:block;width:64px;height:64px;border-radius:var(--radius-sm);background:var(--color-bg)}
.it__svg--missing{display:grid;place-items:center;font-size:12px;line-height:1.3;color:var(--color-text-muted);border:1px dashed var(--color-text-muted);background:transparent;text-align:center}
.it__name{display:block;font-weight:600;font-size:17px;line-height:1.5}
.it__desc{display:block;font-size:15px;line-height:1.7;color:var(--color-text-muted)}
.it__opt{display:inline-block;margin-left:var(--space-2);padding:0 var(--space-2);font-size:13px;font-weight:400;line-height:1.6;color:var(--color-text-muted);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);vertical-align:2px}
/* ── 流程時間軸:圓形圖示 + 直線串連 ──
⚠️ 唔好叫 .flow —— styles.css 已經有 ol.flow(live 首頁用緊)。 */
.flowline{list-style:none;margin:0;padding:0;position:relative}
.flowline::before{content:"";position:absolute;left:31px;top:40px;bottom:40px;border-left:2px solid var(--color-border-strong)}
.flowline > li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:var(--space-4);align-items:center}
.flowline > li + li{margin-top:var(--space-4)}
.flowline__ic{display:block;width:64px;height:64px;background:var(--color-bg);border-radius:var(--radius-full)}
.flowline__ic svg{display:block;width:64px;height:64px}
.flowline p{margin:0}
/* ── 文章版(.prose 入面)──
article.css 嘅 `.prose ul/ol{padding-left}` 同 `.prose li + li{margin-top}` specificity 高過 .items,
所以喺 .prose 入面要再講一次(F206 批 1,2026-09-26)。 */
.prose .items, .prose .flowline{padding-left:0}
.prose .items > li + li{margin-top:0}
/* 名同解釋之間原文嘅分隔符(例:「 — 」)—— 保留喺 DOM 畀讀屏 / 複製,視覺上由卡片版式代替 */
.it__sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 流程時間軸(多段內容版):每步下面有 H3 + 幾段,圖示對齊頂,線逐段畫 */
.flowline--rich::before{display:none}
.flowline--rich > li{align-items:start}
.flowline--rich > li + li{margin-top:var(--space-8)}
.flowline--rich > li:not(:last-child)::before{content:"";position:absolute;left:31px;top:64px;bottom:calc(-1 * var(--space-8));border-left:2px solid var(--color-border-strong)}
.flowline--rich > li > div{min-width:0;padding-top:18px}
.flowline--rich > li > div > * + *{margin-top:var(--space-6)}
.prose .flowline--rich h3{margin-top:0}
.flowline--rich ul{list-style:disc} /* 唔係咁,ol 入面嘅 ul 會變空心圈,同原文唔同 */
/* 標題前圖示(H2 / H3):40px,唔變卡 */
.h-ic{display:flex;align-items:center;gap:var(--space-3)}
.h-ic__svg{flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--color-surface)}
/* 連結卡(.related a)前面加圖示 —— 404「想去邊?」(F206 批 4)。
唔可以喺 入面加包層 span:article.css 嘅 `.related span` 會將成個包層變 14px muted。
所以 自己做 grid:圖示佔兩行, / 原位唔郁。 */
.related a.rel-it{display:grid;grid-template-columns:64px 1fr;column-gap:var(--space-3);align-items:center}
.related a.rel-it > .it__svg{grid-row:1 / span 2;align-self:center}
.related a.rel-it > strong{align-self:end}
.related a.rel-it > span{align-self:start}
/* 知識庫目錄:文章連結卡前面加封面縮圖(tools/cover.py --index)。同 .rel-it 一樣 自己做 grid;
冇縮圖嘅卡(觀察頁 / 新文)保持原本 block,唔會爛版。縮圖本身係正方,contain 唔裁 */
.related a.rel-cov{display:grid;grid-template-columns:72px 1fr;column-gap:var(--space-3);align-items:center}
.related a.rel-cov > .rel-cov__img{grid-row:1 / span 2;align-self:center;width:72px;height:72px;object-fit:contain;
border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg)}
.related a.rel-cov > strong{align-self:end}
.related a.rel-cov > span{align-self:start}
/* 追蹤頁「化寶(冇相)」嗰行(order.css .proof--note 用 baseline 對齊):
標題加咗 40px 圖示之後 baseline 會跌去圖示底,「未到呢一步」會對唔正,改返置中(F206 批 4) */
.proofs .proof--note{align-items:center}
.proofs .proof--note > .step__state{margin-block:0}