/* Liquid glass for order status chips (owner 29.10.2026: «сделай liquid glass как на сайте иконки мессенджеров»).
   Recipe ported from the storefront messenger buttons (web/components/contact-button/contact-button.css, class g3): a pill with a
   white-to-tint gradient, a coloured glow under the icon, a thin tinted rim, a white specular highlight on the top half, a soft tinted
   drop shadow. No backdrop-filter (there is nothing behind the chip to blur on the flat grey page), so the tint + highlight make it read
   as glass. The status colour comes from --c (set by status-icons.js); text stays dark (--fg) on a light tint, the icon is a darker mix
   of the status colour so pale yellows and greens stay visible.
   Loaded AFTER styles.css (replaces the old flat .schip look) on every page that shows a status: index (kanban), prepay, statuses.
   Shared classes: .schip (status chip), .st-ic (icon picker button, takes --c from the editor). */
.st-icons { --c: #9a8f86; } /* the editor sets --c to the colour being edited */
.schip, .st-ic {
  --ic: #6f655d;
  --glow: rgba(154, 143, 134, .20);
  --rim: rgba(154, 143, 134, .34);
  --drop: rgba(154, 143, 134, .50);
  --top: rgba(255, 255, 255, .97);
  --bot: rgba(246, 243, 240, .88);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
  .schip, .st-ic {
    --ic: color-mix(in srgb, var(--c) 78%, #000);
    --glow: color-mix(in srgb, var(--c) 26%, transparent);
    --rim: color-mix(in srgb, var(--c) 40%, transparent);
    --drop: color-mix(in srgb, var(--c) 55%, transparent);
    --bot: color-mix(in srgb, var(--c) 15%, #fff);
  }
}
.schip {
  --c: #9a8f86;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 2px 11px 2px 8px; border: 0; border-radius: 9999px;
  background: linear-gradient(180deg, var(--top), var(--bot));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px var(--rim), 0 1px 2px rgba(0, 0, 0, .06), 0 6px 12px -9px var(--drop);
  letter-spacing: .01em;
}
/* coloured glow under the icon */
.schip::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 120% at 14% 60%, var(--glow), transparent 72%); }
/* specular highlight on the top half */
.schip::after { content: ""; position: absolute; left: 7%; right: 7%; top: 1px; height: 45%; z-index: 0; border-radius: 9999px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)); }
.schip > * { position: relative; z-index: 1; }
.schip svg { color: var(--ic); }
.schip.none { --c: #c9ccd0; --ic: #8a8f96; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(154, 143, 134, .25); }
.schip.none::before, .schip.none::after { display: none; }

/* kanban column header: the name wraps on a narrow column, so a rounded rectangle instead of a full pill; a pill again on the phone list */
.kh .schip { border-radius: 12px; padding: 2px 6px 2px 5px; }
.kh .schip::after { border-radius: 10px; }
.kc-st .schip { padding: 0 6px 0 4px; }
@media (max-width: 800px) { .kh .schip { border-radius: 9999px; padding: 2px 11px 2px 8px; } .kh .schip::after { border-radius: 9999px; } }

/* icon picker in the status editor: same glass, tinted with the colour being edited; the chosen one gets the full colour ring */
.st-ic { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 14px; color: var(--ic);
  background: linear-gradient(180deg, var(--top), var(--bot));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px var(--rim), 0 1px 2px rgba(0, 0, 0, .06), 0 6px 12px -9px var(--drop);
  transition: transform .2s ease-out, box-shadow .2s ease-out; }
.st-ic::after { content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 45%; border-radius: 12px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)); }
.st-ic > * { position: relative; z-index: 1; }
.st-ic.on { color: var(--ic); background: linear-gradient(180deg, var(--top), var(--bot)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 2px var(--c), 0 8px 14px -8px var(--drop); }
@media (hover: hover) { .st-ic:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px var(--c), 0 10px 16px -8px var(--drop); } }
.st-ic:active { transform: scale(.96); }
.st-ic:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

@media (prefers-reduced-transparency: reduce) { .schip, .st-ic { background: #fff; } .schip::after, .st-ic::after { display: none; } }
@media (forced-colors: active) { .schip, .st-ic { border: 1px solid ButtonText; box-shadow: none; } .schip::before, .schip::after, .st-ic::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-ic, .st-ic:hover, .st-ic:active { transform: none; transition: none; } }