/* ═══ CAT ICONS (Ian 2026-09-29) ══════════════════════════════════════════════════════════
   The drawings that replace the iPhone emoji. js/ui/phone/04-catIconize.js wraps each emoji in
   <span class="ce" data-ci="…"> and sets --ci-<name> on :root; this sheet hides the glyph and
   paints the drawing in the text's own colour. Nothing here matches on desktop: the spans and
   html.ci-on only exist once the phone module ran. Pseudo-element icons switch over only under
   html.ci-on, so a failed script leaves the old emoji, never a blank square. */
.ce{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;line-height:1;overflow:hidden;white-space:nowrap;
  text-indent:2.4em;font-style:normal;background:currentColor;
  -webkit-mask:var(--ci) center/contain no-repeat;mask:var(--ci) center/contain no-repeat}
.ce-dot{width:.62em;height:.62em;vertical-align:.04em;margin:0 .12em;border-radius:50%;background:var(--dc);-webkit-mask:none;mask:none}
.ce[data-ci="warn"]{color:#f5b301}
.ce[data-ci="check"]{color:var(--green)}

/* ---- icons drawn by CSS: the page column, the eye, the Labels row, the error marks ---- */
.ci-on nav.tabs button::before{width:26px;height:26px;background:currentColor;
  -webkit-mask:var(--pdi) center/contain no-repeat;mask:var(--pdi) center/contain no-repeat}
.ci-on nav.tabs button[data-tab="inventory"]::before{content:'';--pdi:var(--ci-card)}
.ci-on nav.tabs button[data-tab="pos"]::before{content:'';--pdi:var(--ci-cart)}
.ci-on nav.tabs button[data-tab="metrics"]::before{content:'';--pdi:var(--ci-bars)}
.ci-on nav.tabs button[data-tab="expenses"]::before{content:'';--pdi:var(--ci-receipt)}
.ci-on nav.tabs button[data-tab="funds"]::before{content:'';--pdi:var(--ci-case)}
.ci-on nav.tabs button[data-tab="admin"]::before{content:'';--pdi:var(--ci-cat)}
.ci-on nav.tabs #pdGoSettings::before{content:'';--pdi:var(--ci-gear)}
.ci-on nav.tabs #pdGoShop::before{content:'';--pdi:var(--ci-shop)}
.ci-on nav.tabs #pdGoOffline::before{content:'';--pdi:var(--ci-offline)}

.ci-on header #btnViewer.hdr-viewer::after{content:'';display:block;width:22px;height:22px;margin:auto;background:currentColor;
  -webkit-mask:var(--ci-eye) center/contain no-repeat;mask:var(--ci-eye) center/contain no-repeat}
.ci-on body.viewer-on header #btnViewer.hdr-viewer::after{content:'Exit viewer';width:auto;height:auto;background:none;-webkit-mask:none;mask:none}

.ci-on .context-menu button[data-a="label"]::before{content:'';display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;margin-right:0!important;
  background:currentColor;-webkit-mask:var(--ci-tag) center/contain no-repeat;mask:var(--ci-tag) center/contain no-repeat}
/* ---- text marks used as buttons (+, ☰, ✕, ⋮) come from whichever iPhone font has them and sit
     off centre; drawn icons centre exactly (Ian 2026-09-30) ---- */
.ci-on #btnManual::after{content:'';display:block;width:22px;height:22px;margin:auto;background:currentColor;
  -webkit-mask:var(--ci-plusb) center/contain no-repeat;mask:var(--ci-plusb) center/contain no-repeat}
.ci-on body.cat-on #btnManual::after{content:'';-webkit-mask-image:var(--ci-back);mask-image:var(--ci-back)}
.ci-on #pdNavBtn::after{content:'';width:24px;height:24px;background:currentColor;
  -webkit-mask:var(--ci-menu) center/contain no-repeat;mask:var(--ci-menu) center/contain no-repeat}
.ci-on body.pd-nav-open #pdNavBtn::after{content:'';width:22px;height:22px;-webkit-mask-image:var(--ci-x);mask-image:var(--ci-x)}
.ci-on button.dots{font-size:0!important}
.ci-on button.dots::after{content:'';width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--ci-vdots) center/contain no-repeat;mask:var(--ci-vdots) center/contain no-repeat}
.ci-on :is(.f-err,.modal-err)::before{content:'';width:1.15em;height:1.15em;align-self:center;background:currentColor;
  -webkit-mask:var(--ci-warn) center/contain no-repeat;mask:var(--ci-warn) center/contain no-repeat}