/* ============================================================
   Icon placement
   Every glyph in the app is now an <svg class="ic">. These rules
   settle them into the components that used to hold emoji.
   ============================================================ */

:root {
  --chevron-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m9.5 5.5 6 6.5-6 6.5'/></svg>");
}

/* headings: the leading icon carries the accent, the words stay in text colour */
h2 > .ic:first-child,
h3 > .ic:first-child,
h4 > .ic:first-child { color: var(--accent); margin-right: .5em; vertical-align: -0.17em; }
.page-head h2 > .ic:first-child { width: 1.05em; height: 1.05em; }

/* anything that holds an icon next to a word lays out as a row, so the gap —
   not a stray space in the markup — controls the spacing */
.rowbtn, .ptabs button, .cbtn, .x, .mflag, .sf-ico, .sb-ico, .mc-ico,
.pthumb.ph, .rcp-img.ph, .prod-img.ph, .pimg-preview.ph, .empty-ic {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.tool > .ic, .chip > .ic, .rowbtn > .ic, .iconbtn > .ic,
.cbtn > .ic, .sb-tab > .ic, #tray .go > .ic, .ptabs button > .ic { margin: 0; }

/* inline runs — a bold label, a chip, a helper line — where the icon leads the
   text but the container isn't a flex row */
b > .ic:first-child,
.lchip > .ic:first-child,
.hint2 > .ic:first-child,
.helper > .ic:first-child,
.li-name > .ic:first-child,
.li-warn > .ic:first-child,
.mgroup > .ic:first-child,
.pgroup > .ic:first-child,
.af-guess > .ic:first-child,
.ctxt > .ic:first-child,
.wiz-arrow > .ic,
.aw-status > .ic:first-child { margin-right: .4em; vertical-align: -0.18em; }

.lchip > .ic:first-child { color: var(--text-muted); }
.wiz-arrow > .ic { color: var(--accent); }
.stap-line { display: flex; align-items: center; gap: 9px; }
.stap-line > .ic { color: var(--text-muted); }

/* the meta strip under a product title, and the grocer table's action buttons */
.prod-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.gaction button { display: inline-flex; align-items: center; gap: 6px; }
.grocer-prod > .ic { margin-right: .35em; vertical-align: -0.18em; color: var(--blue); }
.grocer-price > .ic { margin-left: .25em; vertical-align: -0.15em; color: var(--gold); }
.pricechip > .ic:last-child { margin: 0 0 0 .25em; }
/* …except where the <b> is already a flex row with its own gap */
#cookBar .cb-txt b > .ic:first-child { margin-right: 0; }

/* icon-only buttons want the glyph a shade larger and optically centred */
.iconbtn > .ic, .cbtn > .ic { width: 1.15em; height: 1.15em; }

/* a button holding nothing but an icon should be square, not a wide pill —
   it keeps the recipe action row on one line */
.iconbtn:has(> .ic:only-child) { width: 40px; padding: 10px 0; }
.tool:has(> .ic:only-child), .rowbtn:has(> .ic:only-child) { padding-inline: 9px; }
.prow .rowbtn > .ic { width: 15px; height: 15px; vertical-align: -0.2em; }
.x > .ic { width: 16px; height: 16px; }

/* placeholders that used to be a big emoji */
.empty-ic { color: var(--text-muted); opacity: .55; margin-bottom: 6px; font-size: 20px; line-height: 1; }
.pthumb.ph > .ic, .rcp-img.ph > .ic, .prod-img.ph > .ic,
.pimg-preview.ph > .ic, .oimg-ph > .ic { color: var(--text-muted); opacity: .6; }
.oimg-ph {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 15px;
}

/* status glyphs inside banners and feeds */
.scan-banner .sb-ico { font-size: 17px; display: grid; place-items: center; }
.sf-item .sf-ico { font-size: 14px; display: grid; place-items: center; margin-top: 1px; }
.mc-ico { font-size: 17px; display: grid; place-items: center; color: var(--accent); }

/* small inline badges */
.bc-badge > .ic { width: 13px; height: 13px; vertical-align: -0.2em; }
.aislechip > .ic, .li-note > .ic, .pricechip > .ic { margin-right: .3em; vertical-align: -0.18em; }
.dash-card .dash-top > .ic { width: 14px; height: 14px; }
.shist-caret > .ic { width: 13px; height: 13px; vertical-align: -0.16em; }
.ptrail-diff > .ic { width: 12px; height: 12px; vertical-align: -0.1em; }
.prow .mflag > .ic { width: 14px; height: 14px; }
.rate > .ic, .ck > .ic { margin-right: .28em; vertical-align: -0.16em; }
.rate > .ic { color: var(--gold); }
.aunote { display: flex; align-items: flex-start; gap: 10px; }
.aunote > .ic { margin-top: 1px; }
.advanced > summary { display: flex; align-items: center; gap: 8px; }

/* the star rating strip: outline until earned, filled once it is */
.ratepick button > .ic { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease-spring); }
.ratepick button:hover > .ic { transform: scale(1.22); }