/* ============================================================
   Polish — depth, rhythm and numerals
   ============================================================ */

/* prices, counts and quantities line up in columns when the digits are fixed-width */
.pricechip, .grocer-price, .oprice, .dash-card strong, .sb-count,
.ptrail-diff, .li-qty, .order-qty input, .rate { font-variant-numeric: tabular-nums; }

/* the two fixed chrome surfaces get a hairline of depth rather than a hard border */
header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
          backdrop-filter: saturate(1.6) blur(12px);
}
.sidebar { box-shadow: 1px 0 0 var(--border), 12px 0 32px -28px rgba(16,20,38,.5); }
:root[data-theme="dark"] .sidebar { box-shadow: 1px 0 0 var(--border), 14px 0 40px -30px #000; }

/* active nav item gets a rail on the left that grows into place */
.sb-tab { position: relative; }
.sb-tab::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--accent); transform: translateY(-50%);
  transition: height var(--dur-2) var(--ease-spring);
}
.sb-tab.active::before { height: 20px; }
.sb-tab .nav-ic .ic { transition: transform var(--dur-2) var(--ease-spring); }
.sb-tab:hover .nav-ic .ic { transform: translateY(-1px) scale(1.06); }