/* ui-marks.css — the marks' own look (P2 H3b; ui-marks.js). The engine tile (`.emark`, `.em-*`) and the shared square
   (`.v2-cmp-mark`, its `.mono` letter and its dark plate) keep console.css's look and are never copied here. This sheet
   holds the square's size ladder, a brand's initial on its brandIdentity colour, the product's empty-photo square, the
   Praised mark's fills and the lane shapes. */

/* Google Shopping's tile (H3b): the Google G, which carries its own four colours, on a light plate of its own, so
   Shopping is told from AI Overviews' and AI Mode's tiles by more than its dot. In dark every tile, those three
   included, sits on console.css's one neutral plate, and the name written beside the mark tells them apart (Codex's
   H3b NOTE). Every other tile is console.css's `.em-*`. */
.em-shp { background: color-mix(in oklab, var(--line) 55%, var(--surface)); }
/* A dot on the dark plate: Grok's near-black dot vanished on console.css's #232323 (chart-series.js names the same
   loss), so in dark every dot gets a hairline. Its colour stays the engine's. */
html[data-theme="dark"] .emark-dot > i { box-shadow: 0 0 0 1px var(--edge-hover); }

/* A product: the feed's photograph, cropped to the square; with none, the empty-photo square. Before the ladder, so
   a size on the ladder sets its side. */
.ui-mark-product {
  display: inline-flex;
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  box-sizing: border-box;
  border-radius: 3px;
  object-fit: cover;
  background: var(--surface);
}
.ui-mark-noimg { align-items: center; justify-content: center; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.ui-mark-noimg svg { width: 75%; height: 75%; }

/* The ladder: 16 px is the square's own side (console.css). A letter stays 12 px up to 20, then steps up the type
   ladder with the square. */
.ui-mk-14 { width: 14px; height: 14px; }
.ui-mk-20 { width: var(--space-5); height: var(--space-5); }
.ui-mk-24 { width: var(--space-6); height: var(--space-6); }
.ui-mk-32 { width: var(--space-8); height: var(--space-8); }
.v2-cmp-mark.mono.ui-mk-24,
span.ui-mark-id.ui-mk-24 { font-size: var(--type-figure-row-size); }
.v2-cmp-mark.mono.ui-mk-32,
span.ui-mark-id.ui-mk-32 { font-size: var(--type-field-lg-size); }

/* A brand's initial on its colour (brandIdentity): owned --heat with a halo, tracked --competitor-N filled, past four a
   --muted ring, untracked a dashed one. Several letters widen the shape rather than shrinking the type; the ink is
   chosen by contrast (`data-ink="auto"`, the page's wireInk). */
span.ui-mark-id {
  box-sizing: border-box;
  width: max-content;
  min-width: var(--space-4);
  padding-inline: 2px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--ink);
  background: color-mix(in oklab, var(--mk-c), var(--surface) calc(var(--ink-step, 0) * 100%));
  font: var(--type-figure-row-weight) var(--type-meta-size)/1 var(--type-body-family);
}
span.ui-mark-id.ui-mk-14 { width: max-content; min-width: 14px; }
span.ui-mark-id.ui-mk-20 { width: max-content; min-width: var(--space-5); }
span.ui-mark-id.ui-mk-24 { width: max-content; min-width: var(--space-6); }
span.ui-mark-id.ui-mk-32 { width: max-content; min-width: var(--space-8); }
span.ui-mark-own { box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px var(--mk-c); }
span.ui-mark-ring,
span.ui-mark-dash { border: 1px solid var(--mk-c); background: var(--surface); }
span.ui-mark-dash { border-style: dashed; }
.ui-mark-id[data-ink-pick="ink"] { color: var(--ink); }
.ui-mark-id[data-ink-pick="inverse"] { color: var(--btn-ink); }
/* Once favicons.js swaps the letter for the site's icon, the icon is the mark: the square's own look (console.css),
   since every rule above reads a span. */

/* The Praised mark: packages/brand/mark's fills, by token. */
.ui-mark-praised { display: inline-block; flex: none; vertical-align: middle; }
.ui-mark-praised .b { fill: var(--brand-ink); }
.ui-mark-praised .a { fill: var(--brand-clay); }

/* A lane: the shape, then the word (ds/LaneMark). */
.ui-lane { display: inline-flex; align-items: center; gap: 7px; color: var(--body); }
.ui-lane-shape { display: inline-block; flex: none; width: 9px; height: 9px; }
.ui-lane-site { border-radius: 2px; background: var(--lane-site); }
.ui-lane-owned { border-radius: 50%; background: var(--lane-owned); }
.ui-lane-earned { width: 8px; height: 8px; border-radius: 1px; background: var(--lane-earned); transform: rotate(45deg); }