/* 食在南得 — 自製圖示的長相
 * 圖示本身在 src/ui/icons.js（線條＋一塊 class="f" 的填色）
 * 這裡決定：多大、什麼顏色、填色用哪個顏色（--icon-fill）
 */

.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }
.ico .f { fill: var(--icon-fill, none); }

/* 按鈕、標籤裡的小圖示 */
.btn .ico { width: 18px; height: 18px; }
.chip .ico { width: 15px; height: 15px; }
.icon-btn .ico { width: 20px; height: 20px; }
.meta-ico { display: inline-flex; align-items: center; gap: 3px; }
.meta-ico .ico { width: 14px; height: 14px; }

/* 已收藏的愛心、已按下的按鈕：填滿 */
.save-btn[aria-pressed="true"], .btn.is-on { --icon-fill: currentColor; }
.btn-primary { --icon-fill: rgba(255, 255, 255, .25); }

/* 分類方塊：線條用墨色，填色用分類色 */
.cat-ico { display: block; color: var(--ink); --icon-fill: color-mix(in srgb, var(--cat) 45%, transparent); }
.cat-ico .ico { width: 40px; height: 40px; }

/* 地圖圖釘：白色線條，淡白填色 */
.pin span { display: grid; place-items: center; color: #fff; --icon-fill: rgba(255, 255, 255, .3); }
.pin .ico { width: 18px; height: 18px; }

/* 一日行程的時段圈圈 */
.plan-time span { display: grid; place-items: center; color: var(--ink-2); --icon-fill: var(--yolk-tint); }
.plan-time .ico { width: 18px; height: 18px; }

/* 店家小檔案 */
.fact-icon { display: block; color: var(--ink-2); --icon-fill: var(--yolk-tint); line-height: 0; margin-bottom: 4px; }
.fact-icon .ico { width: 20px; height: 20px; }

/* 空狀態：大大的、淡淡的 */
.empty .big { display: grid; place-items: center; margin: 0 auto 10px; color: var(--ink-3); --icon-fill: var(--yolk-tint); }
.empty .big .ico { width: 56px; height: 56px; }
.boot-error .big { display: grid; place-items: center; color: var(--ink-3); --icon-fill: var(--yolk-tint); }
.boot-error .big .ico { width: 64px; height: 64px; }

/* 提示（資料過時、位置是大概的） */
.hint { display: flex; align-items: flex-start; gap: 6px; }
.hint .ico { width: 16px; height: 16px; margin-top: .15em; --icon-fill: var(--yolk-tint); }
.info dt .ico { width: 20px; height: 20px; --icon-fill: var(--yolk-tint); }

/* 手帳頁 */
.pc span { display: grid; place-items: center; color: var(--ink-3); }
.pc span .ico { width: 30px; height: 30px; }
.pc.done span { color: var(--ink); --icon-fill: color-mix(in srgb, var(--cat) 45%, transparent); }
.tabs button { display: inline-flex; align-items: center; gap: 6px; }
.tabs .ico { width: 16px; height: 16px; }
.tabs button[aria-selected="true"] { --icon-fill: color-mix(in srgb, var(--red) 25%, transparent); }

/* 口袋清單 */
.guide-body b .ico { width: 20px; height: 20px; --icon-fill: var(--yolk-tint); }
.h-ico { width: .9em; height: .9em; vertical-align: -.1em; --icon-fill: rgba(255, 255, 255, .25); }
.list-banner .ico { width: 16px; height: 16px; }

/* 後台 */
.side-emoji { color: var(--ink-2); --icon-fill: var(--yolk-tint); }
.side-emoji .ico { width: 22px; height: 22px; }
.dropzone span .ico { width: 30px; height: 30px; color: var(--ink-2); --icon-fill: var(--yolk-tint); }
.col-list button { display: grid; place-items: center; }
.col-list .ico { width: 16px; height: 16px; }
.editor-head h1 .h-ico { --icon-fill: var(--yolk-tint); }
.icon-preview { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); color: var(--ink); --icon-fill: var(--yolk-tint); }
.icon-preview .ico { width: 24px; height: 24px; }
.field:has(.icon-preview) { grid-template-columns: 1fr auto; align-items: end; }
.field:has(.icon-preview) > span:first-child { grid-column: 1 / -1; }

/* 測試頁 */
.test-group li { display: flex; align-items: center; gap: 6px; }
.test-group li .ico { width: 16px; height: 16px; color: var(--scallion); }
.test-group li.bad .ico { color: var(--red-deep); }
.test-group li.bad { flex-wrap: wrap; }
.test-err { flex-basis: 100%; }