/* ============================================================================
   new-ui/alert-pill.css — the weekly alert pill of a results header
   (2026-10-13, Batch 3 w1-alerts — docs/features/search-alerts.md;
   design of 2026-10-12: components/KJSearch.html:10 the wiggle, :85 the pill
   and the gear, :87 the confirmation line; INVENTORY b3-myjobs-18 / -19).

   Markup: kj-alerts.php kj_sa_weekly_pill_parts() — it prints the <link> to
   this sheet right before the pill. Runtime: kj_sa_assets_html() (#kjSaJs).
   Test: tests/kj-b3-alert-pill-2026.test.php (section F pins every rule).

   Only the partial's own classes (.kj-wk…) are styled here; the row that holds
   the count and the pill is the page's (index.php: flex, centred, gap 8px 12px,
   wraps). The colours are the house tokens with the design's values as
   fallbacks. kjFadeUp is base.css's.

   Not the design's: the group .kj-wk-ctl (the pill and the gear wrap TOGETHER —
   in the prototype the gear wraps alone at 1023–1024), the focus ring (the
   prototype has none), the reduced-motion block and the line's break rule
   (.kj-wk-note > span — the prototype's line widens a phone page).

   2026-10-16, home-lists-24: the gear is the design's BUTTON and opens the manage
   panel (.kj-wk-mg — KJSearch.html:85, :228-242; refs search-manage-open,
   search-manage-open-current, search-manage-empty). The panel is positioned against
   the count's row, which the page makes position: relative (index.php:673
   .kj-srch__hrow = the design's [data-alerts-dd]).
   ============================================================================ */

@keyframes kjBellOn {
  0%   { transform: rotate(0) scale(.8); }
  20%  { transform: rotate(16deg) scale(1.15); }
  40%  { transform: rotate(-12deg); }
  60%  { transform: rotate(8deg); }
  80%  { transform: rotate(-4deg); }
  100% { transform: rotate(0) scale(1); }
}

/* the pill + the gear: one item of the count's row (its gap of 12 minus the gear's 4 = the design's 8) */
.kj-wk-ctl { display: inline-flex; align-items: center; gap: 12px; flex: none; }

/* the pill — off */
.kj-wk { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 14px 0 11px; box-sizing: border-box; border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); border-radius: 999px; background: #fff; color: var(--kj-b3-title, #041E42); font-family: var(--kj-font-mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 13.5px; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .2s, border-color .2s, color .2s; }
.kj-wk:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
/* on */
.kj-wk.is-on { border-color: var(--kj-coral-300, #FF9D96); background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-700, #CE3340); }
.kj-wk.is-on:hover { color: var(--kj-coral-600, #EE4753); }
.kj-wk[aria-busy="true"] { cursor: progress; }
.kj-wk__ico { flex: none; display: block; transform-origin: 50% 3px; }
/* switched on just now: the bell wiggles once (the runtime drops .is-pop after 800 ms) */
.kj-wk.is-pop .kj-wk__ico { animation: kjBellOn .7s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both; }
.kj-wk__l { display: block; float: none; }

/* the gear — the design's button: it opens the manage panel (.kj-wk-mg, below; home-lists-24). It was a
   link to /settings#kj-alerts until 2026-10-16; the FULL list still lives there. */
.kj-wk-gear { flex: none; width: 34px; height: 34px; margin: 0 0 0 -4px; padding: 0; box-sizing: border-box; border: 1px solid var(--kj-b3-stroke-2, #CBD3E0); border-radius: 50%; background: #fff; color: var(--kj-b3-title, #041E42); font: inherit; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.kj-wk-gear:hover { border-color: var(--kj-b3-faint, #9BA7BC); background: var(--kj-b3-page, #F6F8FB); color: var(--kj-b3-title, #041E42); text-decoration: none; }
.kj-wk-gear svg { display: block; flex: none; transition: transform .35s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)); }
.kj-wk-gear[aria-expanded="true"] svg { transform: rotate(90deg); }
.kj-wk-gear:active { transform: scale(.97); }
/* open: the design's surface-muted face stays while the panel is down (KJSearch.html:85 manageBg) */
.kj-wk-gear[aria-expanded="true"] { background: var(--kj-b3-page, #F6F8FB); }

/* base.css's motion layer gives every control of the new chrome ONE transition
   (body:has(.kj-nav-wrap) button / a[href] — specificity 0,1,2 / 0,2,2). The design's pill
   and gear carry their own, inline, and those win there; these two rules (0,3,0) win here. */
.kj-wk-ctl > .kj-wk.kj-wk { transition: background .2s, border-color .2s, color .2s; }
.kj-wk-ctl > .kj-wk-gear.kj-wk-gear { transition: background .15s, border-color .15s; }

.kj-wk:focus-visible, .kj-wk-gear:focus-visible { outline: 2px solid var(--kj-coral-500, #FE616C); outline-offset: 2px; }

/* the confirmation line under the sub-line */
.kj-wk-note { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 0; max-width: 560px; font-family: var(--kj-font-mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--kj-coral-700, #CE3340); animation: kjFadeUp .3s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both; }
.kj-wk-note__ico { flex: none; display: block; margin-top: 2px; }
/* the text may break INSIDE a long token — an address, a one-word phrase: without this the token is wider than a phone's
   column and the whole page scrolls sideways while the alert is on (the prototype's does: 429 / 587 px at 390). min-width 0
   lets the flex item shrink, overflow-wrap gives it the break; a line with no such token is laid out as before.
   word-break break-word, before it, says the same to a Safari older than 15.4, which does not know "anywhere"
   (a fallback: not measured in that browser; in Chrome the line is the same with and without it). */
.kj-wk-note > span { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }

.kj-wk-gear[hidden], .kj-wk-note[hidden], .kj-wk-mg[hidden], .kj-wk-mg [hidden] { display: none !important; }

/* ============================================================================
   the manage panel — the gear's dropdown (2026-10-16, home-lists-24;
   KJSearch.html:85 the markup, :228-242 mgVals; refs search-manage-open 380 x
   253.6 / rows 350 x 60.8 / list max-height 300, search-manage-empty 126.3).
   Every box here is the design's: a row is 60.8 high because 9 + 21 + 1 + 18.75
   + 9 + 2 is, so the type sizes and the 1.5 line box are load-bearing.
   The panel is absolute against the count's row (the page's .kj-srch__hrow is
   position: relative), so at 390 it is 350 wide and at 360 it is 320.
   ============================================================================ */
@keyframes kjMgIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.kj-wk-mg { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(380px, calc(100vw - 40px)); box-sizing: border-box; margin: 0; padding: 14px; border: 1px solid var(--kj-b3-stroke, #E2E7EF); border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -12px rgba(4, 30, 66, .28), 0 2px 6px rgba(4, 30, 66, .06); font-family: var(--kj-font-mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--kj-b3-text, #313C53); animation: kjMgIn .18s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both; transform-origin: top left; }
.kj-wk-mg__hd { display: flex; align-items: flex-start; gap: 10px; padding: 0 0 12px 2px; }
.kj-wk-mg__hdt { flex: 1; min-width: 0; }
.kj-wk-mg__t { font-size: 15.5px; font-weight: 800; color: var(--kj-b3-title, #041E42); }
.kj-wk-mg__s { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--kj-b3-muted, #6B7890); }
.kj-wk-mg__x { flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--kj-b3-muted, #6B7890); font: inherit; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kj-wk-mg__x:hover { background: var(--kj-b3-page, #F6F8FB); color: var(--kj-b3-title, #041E42); }
.kj-wk-mg__x svg { display: block; flex: none; }
.kj-wk-mg__list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.kj-wk-mg__row { display: flex; align-items: center; gap: 10px; padding: 9px 6px 9px 10px; border: 1px solid var(--kj-b3-stroke, #E2E7EF); border-radius: 12px; background: var(--kj-b3-page, #F6F8FB); }
.kj-wk-mg__row.is-cur { border-color: var(--kj-coral-200, #FFC2BC); background: var(--kj-coral-50, #FFF1EF); }
.kj-wk-mg__bell { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--kj-b3-stroke, #E2E7EF); color: var(--kj-coral-600, #EE4753); display: inline-flex; align-items: center; justify-content: center; }
.kj-wk-mg__bell svg, .kj-wk-mg__rm svg { display: block; flex: none; }
.kj-wk-mg__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kj-wk-mg__lrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kj-wk-mg__l { min-width: 0; font-size: 14px; font-weight: 700; color: var(--kj-b3-title, #041E42); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-wk-mg__cur { flex: none; height: 18px; padding: 0 7px; border-radius: 999px; background: #fff; border: 1px solid var(--kj-coral-200, #FFC2BC); color: var(--kj-coral-700, #CE3340); font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; }
.kj-wk-mg__m { font-size: 12.5px; color: var(--kj-b3-muted, #6B7890); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-wk-mg__rm { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--kj-b3-faint, #9BA7BC); font: inherit; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.kj-wk-mg__rm:hover { background: var(--kj-b3-danger-bg, #FDECEC); color: var(--kj-b3-danger, #E5484D); }
.kj-wk-mg__rm:disabled { cursor: progress; opacity: .6; }
.kj-wk-mg__all { display: flex; justify-content: flex-end; padding-top: 10px; }
.kj-wk-mg__allb { height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--kj-b3-danger, #E5484D); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; cursor: pointer; -webkit-appearance: none; appearance: none; }
.kj-wk-mg__allb:hover { background: var(--kj-b3-danger-bg, #FDECEC); }
.kj-wk-mg__allb:disabled { cursor: progress; opacity: .6; }
.kj-wk-mg__empty { padding: 14px 8px 6px; text-align: center; font-size: 13.5px; color: var(--kj-b3-muted, #6B7890); }
.kj-wk-mg__x:focus-visible, .kj-wk-mg__rm:focus-visible, .kj-wk-mg__allb:focus-visible { outline: 2px solid var(--kj-coral-500, #FE616C); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kj-wk.is-pop .kj-wk__ico, .kj-wk-note, .kj-wk-mg { animation: none; }
  .kj-wk-ctl > .kj-wk.kj-wk, .kj-wk-ctl > .kj-wk-gear.kj-wk-gear, .kj-wk-gear svg, .kj-wk-mg__rm { transition: none; }
}