/* The sales bell's card (theme/hud-sale.js), drawn as the HUD's own notice: the saver's .kmh-toast of moment-hud.css
   (glass surface, 64 px icon tile, Urbanist 20/13, the × in the corner), at the top right of the map card. Tokens come
   from html.kmh-on (moment-hud.css) with the same values as fallbacks, so the card also reads without the HUD view.
   Tones, as text on the glass (WCAG contrast against its lightest and darkest stops, #283648 and #122034): new sale
   green #34D399 (6.4:1 to 8.5:1), renewal cyan #22D3EE (6.8:1 to 9.1:1), manual bell gold #E0B341 (6.2:1 to 8.3:1),
   the HUD toast's own ink. */
.khs { position: fixed; inset: 0; z-index: 306; pointer-events: none; }
.khs-card {
  position: absolute; right: 18px; top: 26px; box-sizing: border-box; width: min(360px, calc(100vw - 36px));
  display: grid; grid-template-columns: 64px 1fr 28px; gap: 2px 12px; padding: 18px 19px 17px; pointer-events: auto;
  color: var(--kmh-fg, #f0f5fb); font: 500 14px/1.3 Urbanist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--kmh-glass, linear-gradient(180deg, rgba(40, 54, 72, .95), rgba(26, 40, 58, .95) 45%, rgba(18, 32, 52, .96)));
  border: 1px solid var(--kmh-glass-edge, rgba(190, 210, 230, .28)); border-radius: var(--k-radius-surface, 16px);
  box-shadow: var(--kmh-glass-depth, inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 32px rgba(0, 0, 0, .32));
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  transform-origin: top right; animation: khs-in 260ms var(--kmh-ease, cubic-bezier(.16, 1, .3, 1)) backwards;
  transition: top 180ms var(--kmh-ease, cubic-bezier(.16, 1, .3, 1));     /* under the notices above it (hud-sale.js) */
}
.khs-card[hidden] { display: none; }
.khs-card[data-tone="sale"] { --khs-tone: #34d399; }
.khs-card[data-tone="renewal"] { --khs-tone: #22d3ee; }
.khs-card[data-tone="bell"] { --khs-tone: #e0b341; }
.khs-icon {
  display: grid; place-items: center; width: 64px; height: 64px; box-sizing: border-box; color: var(--khs-tone);
  border: 1px solid rgba(190, 210, 230, .28); border-radius: var(--k-radius-menu, 12px);
  background: linear-gradient(160deg, #2a3646, #121a28);
}
.khs-icon svg {
  width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 15%; animation: khs-swing 1.2s cubic-bezier(.36, 0, .66, 1) .2s 2;
}
.khs-text { min-width: 0; }
.khs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.khs-tag { font: 800 11px/1.5 Urbanist, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--khs-tone); }
.khs-time { flex: none; font: 500 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2, #b4bdcc); }
.khs-title { display: block; margin-top: 1px; font: 700 22px/1.2 Urbanist, sans-serif; letter-spacing: -.01em; }
.khs-who, .khs-line { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khs-who { font: 600 14px/1.45 Urbanist, sans-serif; }
.khs-line { font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2, #b4bdcc); }
.khs-line b { font-weight: 650; color: var(--kmh-fg, #f0f5fb); }
.khs-line[hidden] { display: none; }
.khs-close {
  display: grid; place-items: center; align-self: start; width: 28px; height: 28px; margin-top: -6px; padding: 0; border: 0;
  border-radius: var(--k-radius-inner, 8px); background: transparent; color: var(--kmh-fg-2, #b4bdcc); cursor: pointer;
}
.khs-close:hover { background: var(--kmh-hover, #1f3349); color: var(--kmh-fg, #f0f5fb); }
.khs-close:active { scale: .97; }
.khs-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.khs-close:focus-visible { outline: 3px solid var(--kmh-accent, #53ffc8); outline-offset: 2px; }
/* the interface by moment keeps the people pill in this corner: the card sits under it */
html.kmh-on:not(.kmh-g) .khs-card { top: 72px; right: 16px; }
/* as the HUD's notices: a game or one of WA's modals takes the screen (the card would cover their close button), and
   WA's own screens (entry, Woka) show no HUD */
html:is([data-kmh-moment="jogo"], :has([data-testid="close-modal-button"])) .khs-card,
html.kmh-offstage .khs { display: none !important; }
@media (max-width: 767px) {
  .khs-card, html.kmh-on:not(.kmh-g) .khs-card { top: 72px; right: 8px; width: calc(100vw - 16px); }
  html.kmh-g.kmh-panel-open .khs-card { display: none !important; }
}
@keyframes khs-in { from { opacity: 0; transform: translateX(16px) scale(.97); } }
@keyframes khs-swing { 0%, 100% { rotate: 0deg; } 20% { rotate: 14deg; } 40% { rotate: -11deg; } 60% { rotate: 7deg; } 80% { rotate: -3deg; } }
@media (prefers-reduced-motion: reduce) { .khs-card, .khs-icon svg { animation: none; transition: none; } }