@charset "UTF-8";
/* ============================================================================
   Apply form, CV-first — the page sheet (handoff of 2026-10-03).
   Loaded by job-application-form-new.php, with new-ui/tokens.css
   and new-ui/base.css only; apply.css, dd.css and style.css are never loaded
   here. Markup: core.render of new-ui/apply-flow.js and the PHP shell.
   Sources: docs/design/apply-form-2026-10-03 (KJApply.markup.html = M) and its
   css-catalogue.md (entry numbers in the section heads).
   Doc: docs/pages/apply.md · Test: tests/kj-apply-flow.test.php (6. stylesheet)

   MEASURED — handoff of 2026-10-03, read at 1512 from the inline styles of
   KJApply.markup.html and the fingerprints in docs/design/apply-form-2026-10-03/fp
   — not eyeballed, not taken from token names:
     wrap 900 / 24 32 80; card radius 24; head 24 28; avatar 64 r14;
     title 22 / 700; body 6 28 28; section badge 28; controls 48 r10;
     chips min 42; primary button 46, 0 22, 15 / 700;
     pop-up 480, r24, title 24 / 800;
     drop zone 30 20, r18, dashed 2; reading card 18, r20, page 132 x 176;
     file card r16; fail card r18; kept card r16; file question r14, dashed 1.5;
     scan rows min 30, highlight r4; known box r16, row button min 46 r12;
     amber box r16, border 1.5, halo 4;
     pop-up steps (M:1663-1973): dashes 8 / 28 x 8, x 36 r10, pill 30,
     number 52 / 800, tiles 2 x 2 r14, how-box r16 dashed, outline button 46,
     build lines 16 / 700 with a 30 disc, hero 96, chips 32, card r18 with a
     60 disc and an 8 bar, mail box r14, badges 44 high.
   Declares no new palette: literal colours of the template are custom
   properties on .kj-af (and .kj-af__pop, which lives outside it); everything
   else is a site token of tokens.css. Phone (< 760 px): one media block. The
   date of birth has two queries of its own around it: two lines up to 799 px
   (before the phone block), three lines up to 379 px (after it, last).

   2026-10-09 design — the bundle "KosovaJob — publik + i kyçur", component
   KJUserApply (docs/design/design-2026-10-09/components/KJUserApply.html),
   measured on its render (#/apliko/j2: upload, reading, form; 1440 and 390).
   Geometry only; the CV-first behaviour above is untouched. Measured:
     wrap 880 / 24 32 48 (phone 16 gutters); crumb 13, 16 below, "›", hidden
     on phones; card r28 shadow-md; head 20 28 gap 16 (phone 18 / 12, a row);
     avatar 56 r14 (phone 46); title 24 / 800 -.02em (phone 28); time pill 32
     / 0 13 / 12.5 bordered; body 22 28 26 (phone 18), blocks 18 apart;
     section badge 26, title 19 / 800, sentence 13.5 / 1.55 at 7 / 37;
     drop zone 30 20 r20 dashed coral-300, column gap 10, icon 52 r16;
     reading card 18 r20 gap 18 (phone 13 / 12), skeleton 132 x 168 at 14 12
     (phone 72 x 96 at 8 7) with a 26 disc, nine lines and a 26 px beam, bar
     7, rows 9 apart, dot 19, label 136 / 13 700 (phone 92 / 12), value 13 /
     800, placeholder 9 x ≤150; file card 12 14 gap 12 r16, badge 40 r10,
     name 14 / 800, bar 4, "U lexua" 12.5, × 30 r9; green box r20 bordered,
     head 12 16, rows 11 16 (48), label 108 / 12.5, value 14 / 800, pencil 26
     r8, editor 13 16 15, cap 10.5, chips 40 / 0 17, "Ruaj" 38; gold box r20
     gold-50 / gold-300, 16 18 18, disc 24, items 16 apart; controls 46 r12
     14.5; consent 13.5 / 1.55. Not adopted (docs/pages/apply.md, "2026-10-09
     design"): the native selects, the three-column date on phones, the
     action row (C25), the pre-ticked consent, the quiz / extras blocks.
   2026-10-10 (after the verification): a one-field row editor spans its
     editor, the input / select capped 420 and the date as the gold box's;
     the drop zone's spans at line-height normal (171 high); the gold label
     1.5; "Anulo" 0 6px (the UA's); the fail, kept and file-question blocks
     keep the handoff's look through their modifiers (42 / 10, danger, 32 round).
   2026-10-10 — the signed-in additions (KJUserApply; ROADMAP P4-apply, entry 35 below; everything scoped to
     .kj-af--user / .kj-af__pop--user or to blocks only boot.ua draws, so a guest's page is unchanged):
     the "or" row 12 under the zone with the pill 36 / 0 14 / 13 800; extras head 14.5 / 800 + 12.5,
     items 9 11 9 12 r14 (59.25), badge 36 / 9.5, × 28 r8, the dashed add 42 / 0 17; the "Nga ku" panel
     r18 (head 10 14 = 47, device row 13 14 = 62, caption 10 14 4, document rows 11 14 = 59, mark 26);
     the quiz card 14 16 r18 on the 135deg #F4EBFF wash (icon 40 r12, "Plotëso" 38 / 0 16); the tail a
     column 16 apart under a rule (16 inside), the banner 13.5 / 700 without its icon, back 46 / 0 20 /
     14 800, send 46 / 0 26 / 15 800 on the 135deg gradient, dimmed at .5 until a CV is read; on phones
     the row static and stacked (back, then send, 10 apart); the sent dialog r26, 34 30 28, disc 74,
     title 25, line 14.5 ≤ 390, Vazhdo 52 across (phone: the sheet 24 20 20, disc 60, title 21).
   2026-10-17 — Batch 3 "as in the design" (plan wf-1016, package P-apply; one sheet, both audiences): the green title's 16 px tick no
     longer shrinks when the title wraps (apply-anim-job-01 / -14); a focused field draws the design's 3 px .30 ring at (0,3,0), above the
     chrome's 4 px .14 focus rule of base.css (-02); the row being read shimmers as in the 10-12 bundle — 140 x 10 r6, the #EEF2F6 → #FFE4E6
     wash, kjAfShimmer 1.1s (-03); the b3-apply-10 grid of cards serves a guest's green box too (-12) and a value longer than 44
     characters spans both columns (-13). Measured: tests/kj-b3-apply-2026.test.php (section 4), tests/apply-flow/phone.mjs, a11y.mjs.
     2026-10-18, the fix round after the two verifications: the row being read is opaque, as the design's "now" row (KJApply.html:1265),
     so the shimmer shows its own colours; the focus rule's four selectors are spelled out (no :is(); the same (0,3,0)).
   Doc: docs/pages/apply.md · Test: tests/kj-apply-2026.test.php, tests/kj-apply-ua.test.php
   ========================================================================== */

/* ---------- Custom properties (cat. 26, 34): the template's literal colours, once ---------- */
.kj-af, .kj-af__pop {
  --kjaf-amber-line: #FEDF89;
  --kjaf-amber-halo: #FFFAEB;
  --kjaf-amber-text: #B54708;
  --kjaf-amber-soft: #FEF0C7;
  --kjaf-amber-head: #FFFCF5;
  --kjaf-amber-edge: #FEC84B;
  --kjaf-err-line: #F04438;
  --kjaf-err-ring: rgba(240, 68, 56, .12);
  --kjaf-err-text: #B42318;
  --kjaf-err-wash: #FEF3F2;
  --kjaf-err-soft: #FEE4E2;
  --kjaf-err-banner: #B4282C;
  --kjaf-scrim: rgba(4, 30, 66, .55);
  --kjaf-bar-shadow: 0 -8px 24px rgba(4, 30, 66, .12);
  --kjaf-beam-0: rgba(254, 97, 108, 0);
  --kjaf-beam-1: rgba(254, 97, 108, .26);
  --kjaf-drop-0: #FFF6F4;
  --kjaf-drop-1: #FFFBFA;
  --kjaf-scan-0: #FFF4F1;
  --kjaf-scan-1: #FFF9F7;
  --kjaf-success-line: #B7E4C7;
  --kjaf-green-line: rgba(45, 135, 85, .14);
  --kjaf-green-hover: rgba(45, 135, 85, .06);
  --kjaf-gold-700: #96600F;
  --kjaf-cta-hover: 0 14px 30px -8px rgba(254, 97, 108, .55);
  --kjaf-focus: rgba(254, 97, 108, .30);
  --kjaf-empty-text: #919191;
  --kjaf-empty-ico: rgba(255, 80, 103, .07);
  --kjaf-num-glow-0: rgba(18, 183, 106, 0);
  --kjaf-num-glow: rgba(18, 183, 106, .45);
  --kjaf-spin-track: rgba(4, 30, 66, .15);
  --kjaf-bit-green: #12B76A;
  --kjaf-bit-peach: #FE8A6E;
  --kjaf-bit-violet: #7A5AF8;
  --kjaf-bit-amber: #F5A524;
  /* 2026-10-10 (entry 35): the quiz card's literal colours (KJUserApply.html:225-228), the sent dialog's lighter scrim and the two shadows */
  --kjaf-quiz-0: #F4EBFF;
  --kjaf-quiz-line: #E9D7FE;
  --kjaf-quiz-ink: #7F56D9;
  --kjaf-quiz-btn: #D6BBFB;
  --kjaf-quiz-text: #6941C6;
  --kjaf-scrim-user: rgba(4, 30, 66, .42);
  --kjaf-send-shadow: 0 10px 24px -12px rgba(254, 97, 108, .85);
  --kjaf-go-shadow: 0 10px 26px -12px rgba(254, 97, 108, .8);
  --kjaf-cta-135: linear-gradient(135deg, var(--kj-gold-400) 0%, var(--kj-coral-500) 100%);
  --kjaf-cell: rgba(255, 255, 255, .62);   /* b3-apply-10 */
  --kjaf-cell-ico: rgba(4, 30, 66, .05);   /* b3-apply-10 */
  /* 2026-10-17 (wf-1016 apply-anim-job-03): the two colours of the reading row's shimmer (KJApply.html:125 of the 10-12 bundle) */
  --kjaf-shimmer-0: #EEF2F6;
  --kjaf-shimmer-1: #FFE4E6;
}

/* ---------- Keyframes (cat. 0), renamed from the bundle; kjFadeUp, kjFade, kjScaleIn, kjSlideUp come from base.css ---------- */
@keyframes kjAfShake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /* M:14 kjShake */
@keyframes kjAfScan { from { top: -26px; } to { top: 100%; } } /* M:20 kjScan; by top since 2026-10-09, so the one keyframe fits the 168 and the 96 px thumbnail */
@keyframes kjAfShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* M:21 kjShimmer */
@keyframes kjAfPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .8; } } /* X:13 kjPulse */
/* the pop-up's steps (cat. 34); the spinner turns with kjSpin of base.css */
@keyframes kjAfRipple { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } } /* M:15 kjRipple */
@keyframes kjAfBurst { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; } } /* M:17 kjBurst */
@keyframes kjAfNumPop { 0% { transform: scale(.7); opacity: 0; } 55% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* M:18 kjNumPop */
@keyframes kjAfNumLand { 0% { transform: scale(1); text-shadow: 0 0 0 var(--kjaf-num-glow-0); } 35% { transform: scale(1.12); text-shadow: 0 0 28px var(--kjaf-num-glow); } 100% { transform: scale(1); text-shadow: 0 0 0 var(--kjaf-num-glow-0); } } /* M:19 kjNumLand */

/* ---------- 1. Page wrap and background (M:25-26) ---------- */
.kj-af { min-height: 100vh; background: var(--kj-b3-page); color: var(--kj-b3-body); font-family: var(--kj-font-mulish); font-size: 16px; line-height: 1.5; }
.kj-af__wrap { max-width: 880px; margin: 0 auto; padding: 24px 32px 48px; }   /* 2026-10-09: 880 and 48 below (was 900 / 80) */

/* ---------- 2. Breadcrumb (M:27-33; 2026-10-09: 13 px, 16 below, "›", the current item 700; hidden on phones) ---------- */
.kj-af__crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--kj-b3-muted); }
.kj-af__crumb a { color: var(--kj-b3-muted); }
.kj-af__crumb a:hover { color: var(--kj-coral-600); }
.kj-af__crumb-sep { color: var(--kj-b3-muted); }
.kj-af__crumb-cur { color: var(--kj-b3-title); font-weight: 700; }

/* ---------- 3. Main card and header card (M:35-57, 59; 2026-10-09: r28 + shadow-md, head 20 28 gap 16, avatar 56, title 24 / 800, a bordered 32 px pill, body 22 28 26) ---------- */
.kj-af__card { background: var(--kj-surface); border: 1px solid var(--kj-b3-stroke); border-radius: 28px; box-shadow: var(--kj-shadow-md); }
.kj-af__head { display: flex; align-items: center; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--kj-b3-stroke); border-radius: 28px 28px 0 0; }
.kj-af__avatar { flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--kj-b3-gradient-navy); color: var(--kj-text-on-dark); font-family: var(--kj-font); font-weight: 700; font-size: 21.28px; letter-spacing: .01em; }   /* the initial at .38 of the tile, as the handoff's 24.32 / 64 */
.kj-af__avatar--logo { background: var(--kj-b3-page); }
.kj-af__avatar--logo img { width: 100%; height: 100%; object-fit: cover; }
.kj-af__head-main { flex: 1; min-width: 0; }
.kj-af__co { font-size: 13px; font-weight: 700; color: var(--kj-b3-muted); }
.kj-af__title { margin: 1px 0 3px; font-family: var(--kj-font); font-weight: 800; font-size: 24px; line-height: 1.08; letter-spacing: -.02em; color: var(--kj-b3-title); }
.kj-af__meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--kj-b3-muted); }   /* one 13 px line; the "·" spans sit a word-space apart */
.kj-af__time { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--kj-b3-page); border: 1px solid var(--kj-b3-stroke);
  font-size: 12.5px; font-weight: 700; color: var(--kj-b3-muted); }   /* the clock is drawn in the pill's colour (currentColor) */
.kj-af__body { padding: 22px 28px 26px; }

/* ---------- 4. Section and section header (M:61-66, 928, 1149-1154; 2026-10-09: the body is a column of blocks 18 apart — no section rule or padding; badge 26, title 19 / 800, the sentence 13.5 / 1.55 at 7 / 37; the CV area 14 under it) ---------- */
.kj-af__sec { padding: 0; }
.kj-af__sec + .kj-af__sec { margin-top: 18px; }
.kj-af__sec.is-in { animation: kjFadeUp .35s var(--kj-ease-out) both; }
.kj-af__sec-head { display: flex; align-items: center; gap: 11px; margin-bottom: 0; }
.kj-af__sec-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kj-b3-navy); color: var(--kj-text-on-dark); font-size: 13px; font-weight: 800; }
.kj-af__sec-title { margin: 0; font-family: var(--kj-font); font-weight: 800; font-size: 19px; line-height: 1.5; letter-spacing: -.01em; color: var(--kj-b3-title); }
.kj-af__sec-sub { margin: 7px 0 0 37px; font-size: 13.5px; line-height: 1.55; color: var(--kj-b3-muted); text-wrap: pretty; }
.kj-af__sec-head + :not(.kj-af__sec-sub), .kj-af__sec-sub + * { margin-top: 14px; }   /* the drop zone, the reading card, the file / fail / kept card or the personal grid */

/* ---------- 5. Drop zone (M:67-78; 2026-10-09: r20, 2 dashed coral-300, the 180deg wash, a column with gap 10, icon r16, text 15 muted, cta 800, hint 12.5); the error line under it — and under the fail card and the kept card, for a refused replacement — is the site's (spec 3.5); link = "Përdor CV-në e profilit" (M:1858, spec 4) ---------- */
.kj-af__drop { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 30px 20px; border: 2px dashed var(--kj-coral-300); border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, var(--kjaf-drop-0) 0%, var(--kjaf-drop-1) 100%); cursor: pointer; transition: border-color .2s; }
.kj-af__drop:hover, .kj-af__drop.is-on { border-color: var(--kj-coral-500); }
.kj-af__drop-ico { width: 52px; height: 52px; margin: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--kj-surface); border: 1px solid var(--kj-b3-stroke); color: var(--kj-coral-600); box-shadow: var(--kj-shadow-sm); }
.kj-af__drop-text { display: block; font-size: 15px; line-height: normal; color: var(--kj-b3-muted); }   /* line-height normal (2026-10-10): the design's spans sit in a <button> and compute normal (19 / 16 high) — the zone is 171 high, not 177 */
.kj-af__drop-cta { color: var(--kj-coral-600); font-weight: 800; }
.kj-af__drop-hint { display: block; margin-top: 0; font-size: 12.5px; line-height: normal; color: var(--kj-b3-faint); }
.kj-af__drop + .kj-af__err, .kj-af__fail + .kj-af__err, .kj-af__kept + .kj-af__err { margin-top: 8px; }
.kj-af__link { margin-top: 10px; padding: 4px; color: var(--kj-b3-muted); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 6. Reading card — the card, the bar, the upload phase, the rows in their four states, the list-less vision variant (M:80-149, S:108-120).
   2026-10-09: the 135deg wash with a coral-100 edge, gap 18; the thumbnail is a skeleton page (132 x 168, 14 12 inside: a 26 px disc, nine lines
   7 apart with two 9 px gaps, widths in % of the content) swept by a 26 px beam (the bar follows the read, the beam the clock — the design ties
   it to the percent, stage keeps the time-driven sweep); title 18, percent 15, note 13 (3 under), bar 7 on a gray-200 track with the gold → coral
   fill, rows 9 apart with no minimum, a 19 px dot (done: green; "–": gold-100 / gold-700; current: ringed coral-400; idle: ringed stroke-2),
   a 136 px label 13 / 700 (faint until done), the value 13 / 800, "Do ta plotësosh vetë" 13 / 700 coral-600, and a 9 px coral-100 placeholder
   (at most 150) on the current and the idle rows. The handoff's per-group highlight box is not drawn (its markup stays). ---------- */
.kj-af__scan { padding: 18px; border: 1px solid var(--kj-coral-100); border-radius: 20px; background: linear-gradient(135deg, var(--kjaf-scan-0) 0%, var(--kjaf-scan-1) 60%, var(--kj-surface) 100%); }
.kj-af__scan.is-in { animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__scan-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; }
.kj-af__scan-page { position: relative; width: 132px; height: 168px; padding: 14px 12px; border-radius: 10px; overflow: hidden; background: var(--kj-surface); border: 1px solid var(--kj-b3-stroke); box-shadow: var(--kj-shadow-sm); }
.kj-af__scan-ln { display: block; height: 5px; margin-top: 7px; border-radius: 4px; background: var(--kj-b3-stroke); }
.kj-af__scan-ln:nth-child(1) { width: 26px; height: 26px; margin-top: 0; border-radius: 50%; }
.kj-af__scan-ln:nth-child(2) { width: 84%; height: 7px; }
.kj-af__scan-ln:nth-child(3) { width: 64%; }
.kj-af__scan-ln:nth-child(4), .kj-af__scan-ln:nth-child(8) { height: 9px; margin-top: 0; background: transparent; }
.kj-af__scan-ln:nth-child(5) { width: 92%; }
.kj-af__scan-ln:nth-child(6) { width: 74%; }
.kj-af__scan-ln:nth-child(7) { width: 52%; }
.kj-af__scan-ln:nth-child(9) { width: 88%; }
.kj-af__scan-ln:nth-child(10) { width: 68%; }
.kj-af__scan-ln:nth-child(n+11) { display: none; }
.kj-af__scan-hi { display: none; }
.kj-af__scan-beam { position: absolute; left: 0; right: 0; top: -26px; height: 26px; border-bottom: 2px solid var(--kj-coral-400);
  background: linear-gradient(180deg, var(--kjaf-beam-0), var(--kjaf-beam-1)); animation: kjAfScan 2.2s ease-in-out infinite alternate; }
.kj-af__scan-main { min-width: 0; }
.kj-af__scan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kj-af__scan-title { font-family: var(--kj-font); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--kj-b3-title); }
.kj-af__scan-pct { font-weight: 800; font-size: 15px; color: var(--kj-coral-600); font-variant-numeric: tabular-nums; }
.kj-af__scan-status { margin: 3px 0 0; min-height: 19.5px; font-size: 13px; color: var(--kj-b3-muted);
  font-family: Mulish, system-ui, -apple-system, "Segoe UI", sans-serif; }   /* the design's own stack, measured in the bundle on the status span: Mulish has no U+2248 (the "≈" of "≈ 5 sek."), and the glyph must come from the fallback the design names first (system-ui), not from the site token's */
.kj-af__scan-track { height: 7px; margin: 11px 0 13px; border-radius: 7px; overflow: hidden; background: var(--kj-b3-stroke); }
.kj-af__scan-bar { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--kj-gold-400), var(--kj-coral-500)); transition: width .18s linear; }
.kj-af__scan-list { display: flex; flex-direction: column; gap: 9px; }
.kj-af__scan-row { display: flex; align-items: center; gap: 10px; opacity: .4; transition: opacity .3s; }
.kj-af__scan-row.is-done { opacity: 1; }
.kj-af__scan-row.is-on { opacity: 1; }   /* the row being read (2026-10-18, the fix round of wf-1016 P-apply, apply-anim-job-03): opaque as the 10-12 design's "now" row (KJApply.html:1265 `opacity: (done || now ? 1 : .45)`), so its shimmer shows #EEF2F6 → #FFE4E6; the rows not read yet keep the 10-09 .4 */
.kj-af__scan-dot { flex: none; width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; border: 2px solid var(--kj-b3-stroke-2); transition: all .25s; }
.kj-af__scan-row.is-on .kj-af__scan-dot { border-color: var(--kj-coral-400); animation: kjAfPulse 1s ease-in-out infinite; }
.kj-af__scan-row.is-done .kj-af__scan-dot { border: 0; background: var(--kj-b3-success); color: var(--kj-text-on-dark); }
.kj-af__scan-row--miss.is-done .kj-af__scan-dot { background: var(--kj-gold-100); color: var(--kjaf-gold-700); }
.kj-af__scan-label { flex: none; width: 136px; font-size: 13px; font-weight: 700; color: var(--kj-b3-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kj-af__scan-row.is-done .kj-af__scan-label { color: var(--kj-b3-body); }
.kj-af__scan-row::after { flex: 1; height: 9px; max-width: 150px; border-radius: 9px; background: var(--kj-coral-100); }   /* the placeholder of a row not yet read (the design draws nothing there: stage's 10-09 bar stays; the current row draws the shim) */
.kj-af__scan-row::after { content: ""; }
.kj-af__scan-shim { flex: 0 1 140px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--kjaf-shimmer-0) 0%, var(--kjaf-shimmer-1) 50%, var(--kjaf-shimmer-0) 100%);
  background-size: 200% 100%; animation: kjAfShimmer 1.1s linear infinite; }   /* the row being read (2026-10-17, wf-1016 apply-anim-job-03: KJApply.html:125 of the 10-12 bundle, kjShimmer; off under reduced motion) */
.kj-af__scan-row.is-done::after, .kj-af__scan-row.is-on::after { display: none; }
.kj-af__scan-val { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--kj-b3-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: kjFadeUp .35s var(--kj-ease-out) both; }
.kj-af__scan-row--miss .kj-af__scan-val { font-size: 13px; font-weight: 700; color: var(--kj-coral-600); white-space: normal; overflow: visible; }

/* ---------- 7. Shared parts: extension badge, remove button, pill buttons (M:153, 408, 668; M:164, 410; M:427-428, 679, 684, 697; 2026-10-09: badge 40 r10 coral-50 / coral-600 10.5, × 30 r9 bordered, "Ruaj" 38 / 0 20 / 13.5 and
   "Anulo" 13.5 / 700 bare with the UA's 6 px. The bundle draws neither the fail and kept cards nor a file question (2026-10-10): their modifiers keep the handoff's look there — the amber badge 42 / 10,
   the file question's badge 36 r9 on the danger pair and its × 32 round on the page colour with no edge — so the D/fp references of those blocks stand ---------- */
.kj-af__ext { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; background: var(--kj-coral-50); color: var(--kj-coral-600); }
.kj-af__ext--amber { width: 42px; height: 42px; font-size: 10px; background: var(--kjaf-amber-soft); color: var(--kjaf-amber-text); }
.kj-af__ext--sm { width: 36px; height: 36px; border-radius: 9px; font-size: 9.5px; background: var(--kj-b3-danger-bg); color: var(--kj-b3-danger); }
.kj-af__x { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kj-b3-stroke); background: var(--kj-surface); color: var(--kj-b3-muted); }
.kj-af__x:hover { background: var(--kj-coral-50); color: var(--kj-coral-600); }
.kj-af__x--sm { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--kj-b3-page); }
.kj-af__btn { gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 800; }   /* M:427-428, 684: plain buttons — the label's span stays inline (18 high in the fingerprints) */
.kj-af__btn:has(> svg) { display: inline-flex; align-items: center; justify-content: center; }   /* M:679, 697: icon and label */
.kj-af__btn--navy { background: var(--kj-b3-navy); color: var(--kj-text-on-dark); }
.kj-af__btn--navy:hover { background: var(--kj-b3-navy-800); }
.kj-af__btn--line { border: 1.5px solid var(--kj-b3-stroke-2); background: var(--kj-surface); color: var(--kj-b3-title); }
.kj-af__btn--line:hover { border-color: var(--kj-coral-300); color: var(--kj-coral-700); }
.kj-af__btn--ghost { padding: 0 14px; background: transparent; color: var(--kj-b3-muted); font-weight: 700; }
.kj-af__btn--ghost:hover { color: var(--kj-b3-title); }
.kj-af__btn--row { height: 38px; padding: 0 20px; font-size: 13.5px; }
.kj-af__btn--ghost.kj-af__btn--row { padding: 0 6px; font-weight: 700; }   /* 2026-10-10: the design's bare <button> keeps the UA's 6 px — "Anulo" starts 20 after "Ruaj" (14 + 6) */
.kj-af__btn--sm { flex: none; height: 36px; padding: 0 14px; gap: 6px; font-size: 13px; }

/* ---------- 8. File card "U lexua ✓" and its profile variant (M:150-171, S:158; 2026-10-09: 12 14, gap 12, r16; the name 14 / 800 over a 4 px gold → coral bar,
   "U lexua ✓" 12.5 / 700 centred beside them). The markup is the handoff's (name and badge on one line, the track under both); the main part is a grid
   whose line is display: contents, so the badge spans both rows and the bar runs under the name only. The profile variant has no track. ---------- */
.kj-af__file { padding: 12px 14px; border: 1px solid var(--kj-b3-stroke); border-radius: 16px; background: var(--kj-surface); }
.kj-af__file.is-in { animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__file-row { display: flex; align-items: center; gap: 12px; }
.kj-af__file-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.kj-af__file-line { display: contents; }
.kj-af__file-name { grid-column: 1; grid-row: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--kj-b3-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kj-af__file-badge { grid-column: 2; grid-row: 1 / 3; font-size: 12.5px; font-weight: 700; color: var(--kj-b3-muted); }
.kj-af__file-track { grid-column: 1; grid-row: 2; margin-top: 6px; height: 4px; border-radius: 4px; overflow: hidden; background: linear-gradient(90deg, var(--kj-gold-400), var(--kj-coral-500)); }
.kj-af__file-bar { width: 100%; height: 100%; }

/* ---------- 9. Fail card (M:664-688) ---------- */
.kj-af__fail { border-radius: 18px; overflow: hidden; background: var(--kj-surface); border: 1.5px solid var(--kjaf-amber-line); box-shadow: 0 0 0 4px var(--kjaf-amber-halo); }
.kj-af__fail.is-in { animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__fail-head { padding: 14px 16px; background: var(--kjaf-amber-head); border-bottom: 1px solid var(--kjaf-amber-soft); }
.kj-af__fail-row { display: flex; align-items: center; gap: 12px; }
.kj-af__fail-id { flex: 1; min-width: 0; }
.kj-af__fail-name { font-size: 14px; font-weight: 700; color: var(--kj-b3-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kj-af__fail-badge { margin-top: 1px; font-size: 12.5px; font-weight: 700; color: var(--kjaf-amber-text); }
.kj-af__fail-body { padding: 16px 16px 18px; }
.kj-af__fail-title { font-size: 15.5px; font-weight: 800; color: var(--kj-b3-title); }
.kj-af__fail-text { margin: 4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--kj-b3-muted); text-wrap: pretty; }
.kj-af__fail-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 10. Kept-file card and the manual form (M:689-708); the headings are entry 13, the grid entry 14 ---------- */
.kj-af__kept { padding: 12px 14px; border-radius: 16px; background: var(--kj-surface); border: 1px solid var(--kj-b3-stroke); }
.kj-af__kept.is-in { animation: kjFadeUp .25s var(--kj-ease-out) both; }
.kj-af__kept-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kj-b3-stroke); font-size: 13.5px; color: var(--kj-b3-muted); }
.kj-af__manual { margin-top: 16px; }
.kj-af__manual.is-in { animation: kjFadeUp .3s var(--kj-ease-out) both; }

/* ---------- 11. Known box (green), rows, row editor (M:172-437, S:126; 2026-10-09: a bordered r20 box with a header strip 12 16 and full-width rows 11 16 (48 high)
   divided by the green .14 rule — label 108 / 12.5, value 14 / 800, a bare 26 px pencil box; the editor 13 16 15 with a 10.5 cap, 14 between "Ruaj" and "Anulo").
   Not overflow: hidden — the row editor opens menus (the city row); the last row rounds its own hover instead. The missing-row and saved-row looks of the
   handoff (amber value and disc, green tick) stay. Since 2026-10-17 the rows' geometry below is the base the b3-apply-10 block overrides for BOTH
   audiences (a grid of cards; apply-anim-job-12) — the colours, the value's overflow-wrap and the saved disc still come from here. ---------- */
.kj-af__known { margin-top: 18px; padding: 0; border-radius: 20px; background: var(--kj-b3-success-bg); border: 1px solid var(--kjaf-success-line); }
.kj-af__known.is-in { animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__known-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--kjaf-green-line); }
.kj-af__known-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--kj-b3-success); }
.kj-af__known-title svg { flex: none; }   /* the 16 px tick keeps its width when the title wraps (phones) — as .kj-af__miss-title svg does */
.kj-af__known-hint { font-size: 12px; color: var(--kj-b3-muted); }
.kj-af__rows { margin-top: 0; display: flex; flex-direction: column; }
.kj-af__row + .kj-af__row { border-top: 1px solid var(--kjaf-green-line); }
.kj-af__row-btn { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 48px;
  margin: 0; padding: 11px 16px; border-radius: 0; background: transparent; text-align: left; transition: background .15s; }
.kj-af__row:last-child .kj-af__row-btn { border-radius: 0 0 19px 19px; }
.kj-af__row-btn:hover { background: var(--kjaf-green-hover); }
.kj-af__row-label { font-size: 12.5px; line-height: 1.3; color: var(--kj-b3-muted); }
.kj-af__row-val { min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; color: var(--kj-b3-title); }
.kj-af__row-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--kj-b3-faint); transition: all .2s; }
.kj-af__row--miss .kj-af__row-val { color: var(--kjaf-amber-text); }
.kj-af__row--miss .kj-af__row-ico { background: var(--kjaf-amber-soft); color: var(--kjaf-amber-text); }
.kj-af__row.is-done .kj-af__row-ico { background: var(--kj-b3-success); color: var(--kj-text-on-dark); }
.kj-af__row-edit { padding: 13px 16px 15px; }
.kj-af__row-edit { animation: kjFadeUp .25s var(--kj-ease-out) both; }
.kj-af__row-cap { margin-bottom: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--kj-b3-faint); }
.kj-af__row-err { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--kjaf-err-banner); }
.kj-af__row-acts { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
/* 2026-10-10: a one-field editor (e-mail, phone, city, date of birth) spans the editor instead of half of the handoff's two-column grid; its control takes the design's caps —
   a text input or a select 420 at most, the date the gold box's control (three equal columns 12 apart inside 560; two lines up to 799 and one at 379, through the same
   queries as entry 12). The name row keeps its pair (355 + 355 at 1440): the cap never binds on a half field */
.kj-af__row-edit .kj-af__grid > .kj-af__q:only-child { grid-column: 1 / -1; }
.kj-af__row-edit .kj-af__input, .kj-af__row-edit .kj-af__field > .kj-af__dd { max-width: 420px; }
.kj-af__row-edit .kj-af__date { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }

/* ---------- 12. Gold box (M:438-663, S:120; 2026-10-09: r20 on gold-50 with a gold-300 edge and no halo, the title 14 / 800 in the title colour beside a gold-600 icon,
   the sub 13 at 27, items 16 apart with a 24 px white disc (gold-300 edge, gold-700 number) and 14 / 800 labels, a select 420 at most, the date three equal
   columns 12 apart inside 560 — the content rule and the controls are stage's own: the gaps come from the form and the profile, the menus are the handoff's);
   the confirm line is not in the handoff: the subtitle's box with its amber emphasis ---------- */
.kj-af__miss { margin-top: 18px; padding: 16px 18px 18px; border-radius: 20px; background: var(--kj-gold-50); border: 1px solid var(--kj-gold-300); box-shadow: none; }
.kj-af__miss.is-in { animation: kjFadeUp .3s var(--kj-ease-out) .1s both; }
.kj-af__miss-title { display: flex; align-items: center; gap: 10px; /* 17px icon + 10 = the design's title x (verifier apply-13, 2026-10-10) */ font-size: 14px; font-weight: 800; color: var(--kj-b3-title); }
.kj-af__miss-title svg { flex: none; color: var(--kj-gold-600); }
.kj-af__miss-sub { margin: 2px 0 15px 27px; font-size: 13px; color: var(--kj-b3-muted); text-wrap: pretty; }
.kj-af__miss-sub:has(+ .kj-af__miss-note) { margin-bottom: 4px; }
.kj-af__miss-note { margin: 0 0 15px 27px; font-size: 13.5px; font-weight: 700; color: var(--kjaf-amber-text); text-wrap: pretty; }
.kj-af__miss .kj-af__q--num { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 0; border-top: 0; }
.kj-af__miss .kj-af__q + .kj-af__q { margin-top: 16px; }
.kj-af__miss .kj-af__q-num { width: 24px; height: 24px; margin-top: 2px; background: var(--kj-surface); border: 1px solid var(--kj-gold-300); color: var(--kjaf-gold-700); }
.kj-af__miss .kj-af__q.is-done .kj-af__q-num { background: var(--kj-b3-success); border-color: var(--kj-b3-success); color: var(--kj-text-on-dark); }
.kj-af__miss .kj-af__label { font-weight: 800; line-height: 1.5; }   /* 2026-10-10: the design's label line is 21 (the shared label's 1.4 gave 19.6) */
.kj-af__miss .kj-af__field { gap: 7px; }
.kj-af__miss .kj-af__input, .kj-af__miss .kj-af__field > .kj-af__dd { max-width: 420px; }
.kj-af__miss .kj-af__date { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }   /* below 800 px the two queries of entry 17 take over (two lines, then three) */

/* ---------- 13. Question item: wrapper, number badge, label, marks, hint, error, headings (M:209-237) ---------- */
.kj-af__q { grid-column: 1 / -1; min-width: 0; }
.kj-af__q--half { grid-column: span 1; }
.kj-af__q--num { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 0; border-top: 1px solid var(--kj-b3-stroke); }
.kj-af__q--first { padding-top: 4px; border-top: 0; }
.kj-af__q--last { padding-bottom: 0; }
.kj-af__q.is-err { background: var(--kjaf-err-wash); box-shadow: 0 0 0 10px var(--kjaf-err-wash); border-radius: 12px; animation: kjAfShake .45s ease both; }
.kj-af__q-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  background: var(--kj-b3-sunken); color: var(--kj-b3-muted); transition: all .25s; }
.kj-af__q.is-done .kj-af__q-num { background: var(--kj-b3-success); color: var(--kj-text-on-dark); }
.kj-af__q-body { min-width: 0; }
.kj-af__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kj-af__label { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--kj-b3-title); text-wrap: pretty; }
.kj-af__req { color: var(--kj-coral-500); }
.kj-af__optional { font-weight: 500; color: var(--kj-b3-muted); }
.kj-af__err { display: flex; align-items: center; gap: 6px; margin-top: -2px; font-size: 13px; font-weight: 700; color: var(--kjaf-err-text); }
.kj-af__err svg { flex: none; }
.kj-af__hint { font-size: 12.5px; color: var(--kj-b3-faint); }
.kj-af__q--head { margin-top: 4px; }
.kj-af__q-head { padding-top: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kj-b3-faint); }
.kj-af__q--break { padding: 18px 0 0; border-top: 1px solid var(--kj-b3-stroke); }
.kj-af__q--break.kj-af__q--first { padding-top: 4px; border-top: 0; }
.kj-af__q--break + .kj-af__q--num { padding-top: 10px; border-top: 0; }

/* ---------- 14. Grids (M:207, 446, 708, 933, 1159, 1382) ---------- */
.kj-af__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.kj-af__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

/* ---------- 15. Input and textarea (M:239, 242) ---------- */
.kj-af__input { width: 100%; height: 46px; padding: 0 12px; border: 1.5px solid var(--kj-b3-stroke-2); border-radius: 12px; background: var(--kj-surface); font-size: 14.5px;
  color: var(--kj-b3-title); transition: border-color .2s, box-shadow .2s; }   /* 2026-10-09: the design's control — 46 / r12 / 14.5 / 0 12 (was 48 / r10 / 15 / 0 14) */
.kj-af__area { width: 100%; padding: 12px; border: 1.5px solid var(--kj-b3-stroke-2); border-radius: 12px; background: var(--kj-surface); font-size: 14.5px; line-height: 1.55;
  color: var(--kj-b3-title); resize: vertical; transition: border-color .2s, box-shadow .2s; }
.kj-af .kj-af__input:focus, .kj-af__pop .kj-af__input:focus, .kj-af .kj-af__area:focus, .kj-af__pop .kj-af__area:focus { border-color: var(--kj-coral-400); box-shadow: var(--kj-ring); outline: none; }   /* (0,3,0) since 2026-10-17 (wf-1016 apply-anim-job-02): the design's ring (KJApply.html:155, --ring 3 px .30) above the chrome's (0,2,2) 4 px .14 focus rule of base.css, which won over the (0,2,0) rule before; the four selectors spelled out on 2026-10-18 (was `:is(.kj-af, .kj-af__pop) …`, the same weight): a browser without :is() would drop the whole rule */

/* ---------- 16. Select: trigger, panel, search, option rows, empty text (M:245-282) ---------- */
.kj-af__dd { position: relative; min-width: 0; }
.kj-af__trig { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 46px; padding: 0 12px; border: 1.5px solid var(--kj-b3-stroke-2);
  border-radius: 12px; background: var(--kj-surface); text-align: left; transition: border-color .2s, box-shadow .2s; }   /* 2026-10-09: as the input (46 / r12 / 0 12) */
.kj-af__trig.is-open { border-color: var(--kj-coral-400); box-shadow: var(--kj-ring); }
.kj-af__trig-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--kj-b3-faint); }
.kj-af__trig-txt.is-on { color: var(--kj-b3-title); font-weight: 600; }
.kj-af__chev { flex: none; color: var(--kj-b3-muted); transition: transform .2s; }
.kj-af__trig.is-open > .kj-af__chev { transform: rotate(180deg); }
.kj-af__panel { position: absolute; top: calc(100% + 6px); z-index: 40; padding: 8px; background: var(--kj-surface); border: 1px solid var(--kj-b3-stroke); border-radius: 16px; box-shadow: var(--kj-shadow-lg); }
.kj-af__panel { animation: kjFadeUp .18s var(--kj-ease-out) both; }
.kj-af__panel--sel { left: 0; right: 0; min-width: 220px; }
.kj-af__search { position: relative; margin-bottom: 6px; }
.kj-af__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kj-b3-faint); pointer-events: none; }
.kj-af__search-in { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1.5px solid var(--kj-b3-stroke-2); border-radius: 10px; background: var(--kj-surface); font-size: 14px; color: var(--kj-b3-title); }
.kj-af__search-in:focus { border-color: var(--kj-coral-400); outline: none; }
.kj-af__opts { max-height: 248px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.kj-af__opt { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px;
  background: transparent; color: var(--kj-b3-title); font-size: 14.5px; font-weight: 600; text-align: left; transition: background .15s; }
.kj-af__opt.is-on { background: var(--kj-b3-gradient); color: var(--kj-text-on-dark); font-weight: 800; }
.kj-af__opt:hover, .kj-af__opt.is-active, .kj-af__opt:focus-visible { background: var(--kj-coral-50); color: var(--kj-coral-700); outline: none; }
/* Measured in the bundle with a real pointer (M:266 style-hover): a chosen option under the pointer takes the hover look
   (coral-50, coral-700, no gradient, weight 800) — the rule above. At rest it keeps its gradient; the keyboard highlight
   starts on the chosen option when a menu opens, so that highlight alone must not repaint it. */
.kj-af__opt.is-on.is-active:not(:hover) { background: var(--kj-b3-gradient); color: var(--kj-text-on-dark); }
/* A menu driven by the keyboard ([data-kbd] on its panel: opened or moved in by a key, no pointer action since) shows where the
   highlight is on the chosen option too — the same values as the hover on a chosen option. A menu opened by the pointer has no
   [data-kbd] and looks as the design shows it. */
.kj-af__panel[data-kbd] .kj-af__opt.is-on.is-active { background: var(--kj-coral-50); color: var(--kj-coral-700); }
.kj-af__opt svg { flex: none; }
.kj-af__none { padding: 12px; font-size: 13.5px; color: var(--kj-b3-muted); text-align: center; }

/* ---------- 17. Date of birth: three triggers and panels (M:299-321) ---------- */
.kj-af__date { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.kj-af__panel--d, .kj-af__panel--m, .kj-af__panel--y { max-width: 86vw; }
.kj-af__panel--d { left: 0; width: 296px; }
.kj-af__panel--m { left: 50%; margin-left: -150px; width: 300px; }
.kj-af__panel--y { right: 0; width: 260px; max-height: 260px; overflow-y: auto; }
.kj-af__cal { display: grid; gap: 2px; }
.kj-af__cal--d { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kj-af__cal--m { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kj-af__cal--y { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kj-af__cell { height: 36px; padding: 0 6px; border-radius: 10px; background: transparent; color: var(--kj-b3-title); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s; }
.kj-af__cell.is-on { background: var(--kj-b3-gradient); color: var(--kj-text-on-dark); font-weight: 800; box-shadow: var(--kj-shadow-accent); }
.kj-af__cell:hover, .kj-af__cell.is-active, .kj-af__cell:focus-visible { background: var(--kj-coral-50); color: var(--kj-coral-700); outline: none; }
.kj-af__cell.is-on.is-active:not(:hover) { background: var(--kj-b3-gradient); color: var(--kj-text-on-dark); }   /* as for options (M:313): the shadow stays in both looks */
.kj-af__panel[data-kbd] .kj-af__cell.is-on.is-active { background: var(--kj-coral-50); color: var(--kj-coral-700); }   /* keyboard-driven menu: as for options */

/* ---------- 18. Radio chips and checkbox chips (M:283-298) ---------- */
.kj-af__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kj-af__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 17px; border-radius: 999px; border: 1.5px solid var(--kj-b3-stroke-2); background: var(--kj-surface);
  color: var(--kj-b3-body); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: left; transition: all .2s; }   /* 2026-10-09: 40 / 0 17 (a minimum, so a long label still wraps), the chosen one edged coral-400 */
.kj-af__chip.is-on { border-color: var(--kj-coral-400); background: var(--kj-coral-50); color: var(--kj-coral-700); }
.kj-af__chip--box { padding-left: 12px; }
.kj-af__box { flex: none; width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-surface);
  border: 1.5px solid var(--kj-b3-faint); transition: all .2s; }
.kj-af__chip.is-on .kj-af__box { background: var(--kj-coral-500); border-color: var(--kj-coral-500); color: var(--kj-text-on-dark); }   /* tick = currentColor; measured white (stroke #fff, M:290) on the chosen chip of the bundle */

/* ---------- 19. Languages, and skills (M:322-391) ---------- */
.kj-af__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* A chip is never wider than its line: its button and its texts give way and end in an ellipsis (a long language with the longest
   level in the amber box of a phone; a long skill). Where a chip fits — every desktop state — nothing changes. */
.kj-af__lang { display: inline-flex; align-items: center; max-width: 100%; height: 40px; border-radius: 999px; background: var(--kj-surface); border: 1.5px solid var(--kj-b3-stroke-2); transition: border-color .15s, background .15s; }
.kj-af__lang:hover { border-color: var(--kj-coral-300); }
.kj-af__lang--nolevel { border-color: var(--kjaf-amber-edge); }
.kj-af__lang.is-err { border-color: var(--kjaf-err-line); }
.kj-af__lang.is-open { border-color: var(--kj-coral-400); background: var(--kj-coral-50); }
.kj-af__lang.is-open .kj-af__chev { transform: rotate(180deg); }
.kj-af__lang-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 100%; padding: 0 8px 0 16px; border-radius: 999px 0 0 999px; white-space: nowrap; }
.kj-af__lang-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 800; color: var(--kj-b3-title); }
.kj-af__lang-lv { flex-shrink: 9999; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; color: var(--kj-b3-muted); }
.kj-af__lang-lv:not(:empty) { min-width: 30px; }      /* the level gives way first, down to its code ("B2…"); only then is the name cut */
.kj-af__lang--nolevel .kj-af__lang-lv { color: var(--kjaf-amber-text); }
.kj-af__lang-x { flex: none; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kj-b3-sunken); color: var(--kj-b3-muted); transition: background .15s, color .15s; }
.kj-af__lang-x:hover { background: var(--kjaf-err-soft); color: var(--kjaf-err-text); }
.kj-af__panel--lv, .kj-af__panel--add { left: 0; max-width: 86vw; padding: 6px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.kj-af__panel--lv { width: 240px; }
.kj-af__panel--add { width: 280px; }
.kj-af__panel--lv .kj-af__opt, .kj-af__panel--add .kj-af__opt { font-size: 14px; }
.kj-af__panel--add .kj-af__search { margin-bottom: 4px; }
.kj-af__panel--add .kj-af__opts { max-height: 232px; }
.kj-af__lv { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kj-af__lv strong { min-width: 22px; font-weight: 800; }
.kj-af__add { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed var(--kj-b3-stroke-2); background: var(--kj-surface);
  color: var(--kj-coral-600); font-size: 14px; font-weight: 800; transition: all .15s; }
.kj-af__add:hover { border-color: var(--kj-coral-300); background: var(--kj-coral-50); }
.kj-af__skills { display: flex; flex-direction: column; gap: 8px; }
.kj-af__skill .kj-af__lang-name { padding: 0 8px 0 16px; white-space: nowrap; }
.kj-af__skill-dd { width: 280px; max-width: 100%; }
.kj-af__skill-dd .kj-af__search { margin-bottom: 0; }

/* ---------- 20. File question: empty, uploading, attached, error (M:392-416) ---------- */
.kj-af__fileq { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px dashed var(--kj-coral-200); border-radius: 14px;
  background: linear-gradient(180deg, var(--kj-surface), var(--kj-coral-50)); text-align: left; transition: border-color .2s; }
.kj-af__fileq:hover { border-color: var(--kj-coral-400); }
.kj-af__fileq.is-busy { cursor: progress; border-color: var(--kj-coral-200); }
.kj-af__fileq-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-surface);
  border: 1px solid var(--kj-b3-stroke); color: var(--kj-coral-600); }
.kj-af__fileq-txt { display: flex; flex-direction: column; min-width: 0; }
.kj-af__fileq-cta { font-size: 14px; font-weight: 700; color: var(--kj-coral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-af__fileq-hint { font-size: 12.5px; color: var(--kj-b3-faint); }
.kj-af__filed { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--kj-b3-stroke); border-radius: 14px; background: var(--kj-surface); }
.kj-af__filed-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--kj-b3-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 21. Reading-meanwhile note (M:929-932) ---------- */
.kj-af__meanwhile { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--kj-coral-600); }
.kj-af__meanwhile-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--kj-coral-500); animation: kjAfPulse 1.2s ease-in-out infinite; }

/* ---------- 22. Consent line, error banner, action row (M:1601-1615) ---------- */
.kj-af__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--kj-b3-body); cursor: pointer; }   /* 2026-10-09: 13.5 / 1.55, 18 under the last block; the box stays unticked (apply-4) */
.kj-af__check { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--kj-coral-500); }
.kj-af__consent-txt { min-width: 0; text-wrap: pretty; }
.kj-af__consent a { color: var(--kj-coral-600); font-weight: 700; text-decoration: underline; text-decoration-color: var(--kj-coral-200); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.kj-af__consent a:hover { color: var(--kj-coral-700); text-decoration-color: currentColor; }
.kj-af__banner { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--kj-b3-danger-bg); color: var(--kjaf-err-banner); font-size: 14px; font-weight: 600; }
.kj-af__banner.is-in { animation: kjFadeUp .25s both; }
.kj-af__banner svg { flex: none; }
.kj-af__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kj-b3-stroke); background: var(--kj-surface); }
.kj-af__back { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--kj-b3-stroke-2); background: var(--kj-surface); color: var(--kj-b3-title); font-size: 15px; font-weight: 700;
  line-height: normal; text-align: center; }   /* M:1613 is a <button>: the UA's line-height and alignment (label 19 high) */
.kj-af__back:hover { background: var(--kj-b3-page); }
.kj-af__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px;
  background: var(--kj-b3-gradient); color: var(--kj-text-on-dark); box-shadow: var(--kj-shadow-accent); font-family: var(--kj-font-mulish); font-size: 15px; font-weight: 700;
  line-height: 1; letter-spacing: .01em; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform var(--kj-dur-fast) var(--kj-ease-out), box-shadow var(--kj-dur-base) var(--kj-ease-out), background var(--kj-dur-base) var(--kj-ease-out), opacity var(--kj-dur-base); }
.kj-af__cta:hover { box-shadow: var(--kjaf-cta-hover); transform: translateY(-1px); }
.kj-af__cta:active { transform: translateY(0) scale(.98); }
.kj-af__cta:disabled, .kj-af__cta.is-busy { opacity: .5; cursor: not-allowed; box-shadow: var(--kj-shadow-accent); transform: none; }
.kj-af__cta.is-busy { cursor: progress; }
.kj-af__cta--block { display: flex; width: 100%; }

/* ---------- 23. Pop-up "Aplikimi u dërgua" (M:1663-1664, 1672-1679, 1681-1696) ---------- */
.kj-af__pop { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--kjaf-scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: kjFade .25s both; }
.kj-af__pop-card { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 22px 26px 24px; border-radius: 24px; background: var(--kj-surface);
  box-shadow: var(--kj-shadow-xl); animation: kjScaleIn .35s var(--kj-ease-out) both; }
.kj-af__pop-dots { display: flex; align-items: center; justify-content: center; gap: 6px; height: 8px; margin-bottom: 18px; }
.kj-af__pop-step { text-align: center; animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__pop-ico { width: 96px; height: 96px; margin: 2px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kj-b3-success-bg); color: var(--kj-b3-success); }
.kj-af__pop-title { margin: 0 0 10px; font-family: var(--kj-font); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--kj-b3-title); text-wrap: balance; }
.kj-af__pop-sub { margin: 0 auto; max-width: 400px; font-size: 16px; line-height: 1.55; color: var(--kj-b3-muted); text-wrap: pretty; }
.kj-af__pop-act { margin-top: 22px; }
.kj-af-lock, .kj-af-lock body { overflow: hidden; }

/* ---------- 27. The pop-up's frame for step 2: the dashes (S:97, M:1672-1679), the x (M:1665-1670), the text under a title, the
   outline and the text control (M:1774, 1780), the block of the offer's three buttons (M:1772) ---------- */
.kj-af__pop-dash { flex: none; width: 8px; height: 8px; border-radius: 8px; background: var(--kj-b3-stroke); transition: all .3s; }
.kj-af__pop-dash.is-on { width: 28px; background: var(--kj-b3-navy); }
.kj-af__pop-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kj-b3-sunken); color: var(--kj-b3-title); }
.kj-af__pop-x:hover { background: var(--kj-b3-stroke); }
.kj-af__pop-sub + .kj-af__pop-sub { margin-top: 6px; }
.kj-af__pop-foot { margin-top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.kj-af__pop-line { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 1px 6px; border: 1.5px solid var(--kj-b3-stroke-2); border-radius: 999px;
  background: var(--kj-surface); color: var(--kj-b3-title); font-size: 15px; font-weight: 800; line-height: normal; }   /* padding 1px 6px and line-height normal: a <button>'s own, kept by M:1774 (FP d_flow_2) */
.kj-af__pop-line:hover { background: var(--kj-b3-page); }
.kj-af__pop-text { align-self: center; padding: 4px; color: var(--kj-b3-muted); font-size: 14px; font-weight: 700; line-height: normal; text-decoration: underline; text-underline-offset: 3px; }
.kj-af__pop-act--tight { margin-top: 10px; }                                  /* M:1969 */
.kj-af__pop-act--col { display: flex; flex-direction: column; gap: 8px; }     /* two or three stacked controls: the gap of M:1772 */
/* The controller's ruling of 2026-10-06 (spec section 1.7): a title or the mail box that the script focuses when a step appears
   (tabindex -1; not a control) shows no ring — a ring on a heading tells a keyboard user nothing to act on; every link and button
   keeps the ring of the sheet's focus rule (cat. 0). */
.kj-af__pop [tabindex="-1"]:focus { outline: none; }

/* ---------- 28. The offer (M:1698-1788): pill, "+92%", headline, question, sentence and address line, tiles, "Si funksionon", footnote ---------- */
.kj-af__s2-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--kj-b3-navy); color: var(--kj-text-on-dark);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.kj-af__s2-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kj-gold-400); }
.kj-af__s2-num { margin: 12px 0 2px; font-family: var(--kj-font); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -.03em; color: var(--kj-b3-success); }
.kj-af__s2-num > span { display: inline-block; min-width: 3.6ch; text-align: center; font-variant-numeric: tabular-nums; animation: kjAfNumPop .5s var(--kj-ease-out) both; }   /* S:143: the count-up never moves the line */
.kj-af__s2-num.is-done > span { animation: kjAfNumLand .7s var(--kj-ease-out) both; }
.kj-af__s2-more { font-family: var(--kj-font); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--kj-b3-title); }
.kj-af__s2-q { margin: 14px auto 0; max-width: 420px; font-family: var(--kj-font); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--kj-b3-title); text-wrap: balance; }
.kj-af__s2-sub, .kj-af__s2-to { margin: 0 auto; max-width: 420px; font-size: 14.5px; line-height: 1.5; color: var(--kj-b3-muted); text-wrap: pretty; }
.kj-af__s2-sub { margin-top: 6px; }                                           /* M:1708; its 14 px below are the tiles' margin: the address line stands between */
.kj-af__s2-to b { font-weight: 700; color: var(--kj-b3-title); }
.kj-af__s2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.kj-af__s2-tile { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--kj-b3-stroke); border-radius: 14px; background: var(--kj-b3-page);
  text-align: left; font-size: 13.5px; line-height: 1.35; color: var(--kj-b3-body); }
.kj-af__s2-tile-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-gold-100); color: var(--kj-b3-title); }
.kj-af__s2-tile-txt, .kj-af__s2-how-txt, .kj-af__s2-line-txt { min-width: 0; }  /* a long word wraps inside its row */
.kj-af__s2-tile strong { color: var(--kj-b3-title); }
.kj-af__s2-how { margin-top: 12px; padding: 16px; border: 1px dashed var(--kj-b3-stroke-2); border-radius: 16px; text-align: left; animation: kjFadeUp .25s var(--kj-ease-out) both; }
.kj-af__s2-how-label { margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kj-b3-body); }   /* M: faint (2.43:1 at 12 px); the body colour by the ruling of 2026-10-06 (spec 1.3, WCAG 1.4.3) — a recorded difference */
.kj-af__s2-how-list { display: flex; flex-direction: column; gap: 10px; }
.kj-af__s2-how-row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--kj-b3-body); }
.kj-af__s2-how-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-b3-gradient); color: var(--kj-text-on-dark);
  font-size: 12px; font-weight: 800; }
.kj-af__s2-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--kj-b3-body); text-wrap: pretty; }   /* M: faint; the consent sentence in the body colour (the ruling of 2026-10-06, as the box label above) */
.kj-af__s2-note a { color: var(--kj-b3-title); text-decoration: underline; }   /* M: muted (4.45:1 at 12 px); the underline is kept */

/* ---------- 29. Building (M:1862-1884, S:165): the lines with spinner and check; the slow line and "Vazhdo pa pritur" are not in M (spec 1.4) ---------- */
.kj-af__pop-step--build { padding: 6px 0 8px; text-align: start; }   /* M:1863 sets none: the lines read start-aligned (FP d_flow_4 ta start) */
.kj-af__pop-title--build { margin: 0 0 20px; text-align: center; }
.kj-af__s2-lines { display: flex; flex-direction: column; gap: 14px; min-height: 150px; }
.kj-af__s2-line { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--kj-b3-title); animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__s2-line.is-done { color: var(--kj-b3-success); }
.kj-af__s2-line-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-gold-100); color: var(--kj-b3-success); }
.kj-af__s2-line.is-done .kj-af__s2-line-ico { background: var(--kj-b3-success-bg); }
.kj-af__s2-spin { display: inline-block; width: 16px; height: 16px; border: 2.5px solid var(--kjaf-spin-track); border-top-color: var(--kj-b3-navy); border-radius: 50%; animation: kjSpin .8s linear infinite; }
.kj-af__s2-slow.is-on { margin-top: 14px; }
.kj-af__s2-slow-txt { font-size: 14.5px; line-height: 1.5; color: var(--kj-b3-muted); text-align: center; }   /* the muted sentence of M:1708 */
.kj-af__s2-slow .kj-af__pop-line { margin-top: 10px; }

/* ---------- 30. Ready (M:1886-1973, S:162, 167): rings and confetti, title, chips, the card with its bar, the mail box, the badges ---------- */
.kj-af__s2-hero { position: relative; width: 96px; height: 96px; margin: 2px auto 14px; }
.kj-af__s2-ring { position: absolute; inset: 0; border: 2px solid var(--kj-b3-success); border-radius: 50%; animation: kjAfRipple 1.3s var(--kj-ease-out) .15s both; }
.kj-af__s2-ring--2 { animation-delay: .45s; }
.kj-af__s2-bit { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; animation: kjAfBurst 1s cubic-bezier(.2, .8, .3, 1) both; }
.kj-af__s2-bit:nth-of-type(2n) { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.kj-af__s2-bit:nth-of-type(3n+1) { border-radius: 2px; }
.kj-af__s2-bit:nth-of-type(6n+1) { background: var(--kj-coral-500); }
.kj-af__s2-bit:nth-of-type(6n+2) { background: var(--kj-gold-400); }
.kj-af__s2-bit:nth-of-type(6n+3) { background: var(--kjaf-bit-green); }
.kj-af__s2-bit:nth-of-type(6n+4) { background: var(--kjaf-bit-peach); }
.kj-af__s2-bit:nth-of-type(6n+5) { background: var(--kjaf-bit-violet); }
.kj-af__s2-bit:nth-of-type(6n) { background: var(--kjaf-bit-amber); }
.kj-af__s2-bit:nth-of-type(1) { --tx: 0px; --ty: -70px; animation-delay: .25s; }
.kj-af__s2-bit:nth-of-type(2) { --tx: 36px; --ty: -74px; animation-delay: .262s; }
.kj-af__s2-bit:nth-of-type(3) { --tx: 73px; --ty: -59px; animation-delay: .274s; }
.kj-af__s2-bit:nth-of-type(4) { --tx: 68px; --ty: -16px; animation-delay: .286s; }
.kj-af__s2-bit:nth-of-type(5) { --tx: 80px; --ty: 18px; animation-delay: .298s; }
.kj-af__s2-bit:nth-of-type(6) { --tx: 73px; --ty: 59px; animation-delay: .31s; }
.kj-af__s2-bit:nth-of-type(7) { --tx: 30px; --ty: 63px; animation-delay: .322s; }
.kj-af__s2-bit:nth-of-type(8) { --tx: 0px; --ty: 82px; animation-delay: .334s; }
.kj-af__s2-bit:nth-of-type(9) { --tx: -41px; --ty: 85px; animation-delay: .346s; }
.kj-af__s2-bit:nth-of-type(10) { --tx: -55px; --ty: 44px; animation-delay: .358s; }
.kj-af__s2-bit:nth-of-type(11) { --tx: -80px; --ty: 18px; animation-delay: .37s; }
.kj-af__s2-bit:nth-of-type(12) { --tx: -92px; --ty: -21px; animation-delay: .382s; }
.kj-af__s2-bit:nth-of-type(13) { --tx: -55px; --ty: -44px; animation-delay: .394s; }
.kj-af__s2-bit:nth-of-type(14) { --tx: -36px; --ty: -74px; animation-delay: .406s; }
.kj-af__pop-ico--hero { position: relative; margin: 0; animation: kjAfNumPop .5s var(--kj-ease-out) both; }
.kj-af__pop-title--ready { margin: 0; font-size: 26px; }
.kj-af__s2-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.kj-af__s2-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--kj-b3-success-bg); color: var(--kj-b3-success); font-size: 14px; font-weight: 800; }
.kj-af__s2-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--kj-b3-stroke); border-radius: 18px; box-shadow: var(--kj-b3-shadow-xs); text-align: left; }
.kj-af__s2-ava { flex: none; width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-coral-50); color: var(--kj-coral-600);
  font-family: var(--kj-font); font-size: 20px; font-weight: 800; }
.kj-af__s2-card-main { flex: 1; min-width: 0; }
.kj-af__s2-name { font-family: var(--kj-font); font-size: 17px; font-weight: 800; color: var(--kj-b3-title); }
.kj-af__s2-bar { height: 8px; margin-top: 10px; border-radius: 8px; background: var(--kj-b3-sunken); overflow: hidden; }
.kj-af__s2-bar-fill { height: 100%; border-radius: 8px; background: var(--kj-b3-success); transition: width .8s var(--kj-ease-out); }
.kj-af__s2-card-line { margin-top: 6px; font-size: 14px; color: var(--kj-b3-muted); }
.kj-af__s2-card-ok { color: var(--kj-b3-success); }
.kj-af__s2-card-ok svg { display: inline-block; margin-right: 4px; vertical-align: -1px; }   /* the check stands where the template has the character */
.kj-af__s2-mail { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--kj-b3-stroke); border-radius: 14px; background: var(--kj-b3-page); text-align: left; }
.kj-af__s2-mail-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-gold-100); color: var(--kj-b3-title); }
.kj-af__s2-mail-main { min-width: 0; font-size: 14px; line-height: 1.45; color: var(--kj-b3-body); }
.kj-af__s2-mail-main b { font-weight: 700; color: var(--kj-b3-title); }
.kj-af__s2-mail-sub, .kj-af__s2-mail-sent { margin-top: 2px; color: var(--kj-b3-muted); }
.kj-af__s2-mail-sent { font-weight: 700; color: var(--kj-b3-success); }
.kj-af__s2-mail .kj-af__btn { margin-top: 10px; }
.kj-af__s2-mail .kj-af__btn.is-busy { opacity: .5; cursor: progress; }
.kj-af__s2-mail--fail { border-color: var(--kjaf-err-soft); background: var(--kjaf-err-wash); }   /* not in M: the sheet's own error wash, edge and text */
.kj-af__s2-mail--fail .kj-af__s2-mail-ico { background: var(--kjaf-err-soft); color: var(--kjaf-err-text); }
.kj-af__s2-mail--fail .kj-af__s2-mail-main { color: var(--kjaf-err-text); }
.kj-af__s2-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kj-af__s2-store { display: block; justify-self: center; }                    /* D13: the official badge, 148.5 x 44, centred in its half; nothing is drawn around it */
.kj-af__s2-store img { height: 44px; width: auto; }

/* ---------- 31-33. Pending, exists, failed (spec 1.6; not in M): the frame, the check disc of entry 23, the controls of entry 27; failed has the amber disc ---------- */
.kj-af__pop-ico--amber { background: var(--kjaf-amber-soft); color: var(--kjaf-amber-text); }

/* ---------- 35. The signed-in additions (2026-10-10, component KJUserApply of the bundle "publik + i kyçur"; ROADMAP P4-apply). Measured on the
   design's own render (#/apliko/j2 at 1440 and 390, 2026-10-10: the upload stage, the own-CV read, the "Nga ku" panel, a picked document, the
   sent dialog). Drawn only for a signed-in candidate (boot.ua; the shell's .kj-af--user, the pop-up's .kj-af__pop--user). ---------- */
/* the frame: the signed-in start is the design's short upload stage, so no 100vh floor — the footer then starts 96 px under the card
   (the wrap's 48 bottom padding + the 48 under main), as in the design at 1440 and 390 (re-verify 2026-10-11: 400 px at 1440). A guest keeps it. */
.kj-af--user { min-height: 0; }
/* apply-1: under the drop zone, "ose përdor CV-në nga profili yt:" and the pill (KJUserApply.html:50-55) */
.kj-af__or { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kj-af__or-txt { font-size: 13px; line-height: 1.5; color: var(--kj-b3-faint); }
.kj-af__pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 36px; padding: 0 14px; border: 1.5px solid var(--kj-b3-stroke-2); border-radius: 999px;
  background: var(--kj-surface); color: var(--kj-b3-title); font-size: 13px; font-weight: 800; line-height: normal; }
.kj-af__pill svg { flex: none; color: var(--kj-coral-500); }
.kj-af__pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* apply-2: "Dokumente të tjera" (KJUserApply.html:174-221) — the head, the items, the dashed add button, the "Nga ku" panel */
.kj-af__sec + .kj-af__extras, .kj-af__sec + .kj-af__quiz, .kj-af__extras + .kj-af__quiz { margin-top: 18px; }
.kj-af__extras.is-in, .kj-af__quiz.is-in { animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-af__extras-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kj-af__extras-title { font-size: 14.5px; font-weight: 800; line-height: 1.5; color: var(--kj-b3-title); }
.kj-af__extras-opt { flex: none; font-size: 12.5px; line-height: 1.5; color: var(--kj-b3-faint); }
.kj-af__xlist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kj-af__xitem { display: flex; align-items: center; gap: 11px; padding: 9px 11px 9px 12px; border: 1px solid var(--kj-b3-stroke); border-radius: 14px; background: var(--kj-b3-page); }
.kj-af__xitem.is-in { animation: kjFadeUp .25s var(--kj-ease-out) both; }
.kj-af__ext--x { width: 36px; height: 36px; border-radius: 10px; font-size: 9.5px; }
.kj-af__xitem-main { display: block; flex: 1; min-width: 0; }
.kj-af__xitem-name { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.5; color: var(--kj-b3-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-af__xitem-meta { display: block; margin-top: 1px; font-size: 12px; line-height: 1.5; color: var(--kj-b3-muted); }
.kj-af__xitem.is-busy .kj-af__xitem-meta { color: var(--kj-coral-600); }
.kj-af__x--x { width: 28px; height: 28px; border-radius: 8px; }
.kj-af__xadd { display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-top: 10px; padding: 0 17px; border: 1.5px dashed var(--kj-b3-stroke-2); border-radius: 999px;
  background: var(--kj-surface); color: var(--kj-b3-title); font-size: 13.5px; font-weight: 800; line-height: normal; transition: border-color .2s, color .2s; }
.kj-af__xadd:hover { border-color: var(--kj-coral-400); color: var(--kj-coral-600); }
.kj-af__extras > .kj-af__err { margin-top: 8px; }
.kj-af__xpick { margin-top: 10px; border: 1px solid var(--kj-b3-stroke); border-radius: 18px; overflow: hidden; background: var(--kj-surface); animation: kjFadeUp .25s var(--kj-ease-out) both; }
.kj-af__xpick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--kj-b3-page); border-bottom: 1px solid var(--kj-b3-stroke); }
.kj-af__xpick-label, .kj-af__xpick-cap { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--kj-b3-faint); }
.kj-af__xpick-x { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--kj-b3-muted); }
.kj-af__xdev { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-bottom: 1px solid var(--kj-b3-stroke); background: var(--kj-surface); text-align: left; }
.kj-af__xdev:hover, .kj-af__xdoc:hover:not(:disabled) { background: var(--kj-b3-page); }
.kj-af__xdev-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-coral-50); color: var(--kj-coral-600); }
.kj-af__xdev-main { flex: 1; min-width: 0; }
.kj-af__xdev-title { display: block; font-size: 14px; font-weight: 800; line-height: normal; color: var(--kj-b3-title); }
.kj-af__xdev-sub { display: block; margin-top: 1px; font-size: 12.5px; line-height: normal; color: var(--kj-b3-muted); }
.kj-af__xpick-cap { padding: 10px 14px 4px; }
.kj-af__xnone { margin: 0; padding: 4px 14px 14px; font-size: 13px; color: var(--kj-b3-faint); }
.kj-af__xdoc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-top: 1px solid var(--kj-b3-stroke); background: var(--kj-surface); text-align: left; }
.kj-af__xdoc:disabled { opacity: .55; cursor: default; }
.kj-af__xdoc .kj-af__xitem-name, .kj-af__xdoc .kj-af__xitem-meta { line-height: normal; }   /* the design's rows sit in a <button>: line-height normal (17 / 15) */
.kj-af__xmark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-b3-page); color: var(--kj-b3-title); }
.kj-af__xdoc.is-on .kj-af__xmark { background: var(--kj-b3-success-bg); color: var(--kj-b3-success); }
/* apply-3: the quiz card (KJUserApply.html:223-230), the same card with the score attached */
.kj-af__quiz { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--kjaf-quiz-line); border-radius: 18px; background: linear-gradient(135deg, var(--kjaf-quiz-0) 0%, var(--kj-surface) 70%); }
.kj-af__quiz-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--kj-surface); border: 1px solid var(--kjaf-quiz-line); color: var(--kjaf-quiz-ink); }
.kj-af__quiz-main { display: block; flex: 1; min-width: 0; }
.kj-af__quiz-title { display: block; font-size: 14px; font-weight: 800; line-height: 1.5; color: var(--kj-b3-title); }
.kj-af__quiz-sub { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.5; color: var(--kj-b3-muted); }
.kj-af__quiz-go { flex: none; height: 38px; padding: 0 16px; border: 1.5px solid var(--kjaf-quiz-btn); border-radius: 999px; background: var(--kj-surface); color: var(--kjaf-quiz-text); font-size: 13px; font-weight: 800; line-height: normal; }
/* apply-14, apply-15: the tail — a column 16 apart under a 1 px rule with 16 inside (KJUserApply.html:233-240); the banner 13.5 / 700 without the handoff's
   icon; back 46 / 0 20 / 14 800; send 46 / 0 26 / 15 800 on the 135deg gradient with its shadow, dimmed (.5, not-allowed, no shadow) until a CV is read */
.kj-af--user .kj-af__tail { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kj-b3-stroke); }
.kj-af--user .kj-af__consent { margin-top: 0; }
.kj-af--user .kj-af__banner { margin-top: 0; font-size: 13.5px; font-weight: 700; }
.kj-af--user .kj-af__banner svg { display: none; }
.kj-af--user .kj-af__actions { gap: 10px; margin-top: 0; padding-top: 0; border-top: 0; }
.kj-af--user .kj-af__back { padding: 0 20px; font-size: 14px; font-weight: 800; }
.kj-af--user .kj-af__actions .kj-af__cta { padding: 0 26px; border: 0; background: var(--kjaf-cta-135); box-shadow: var(--kjaf-send-shadow); font-size: 15px; font-weight: 800; letter-spacing: normal; line-height: normal; }
.kj-af__cta--dim { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.kj-af__cta--dim:hover, .kj-af--user .kj-af__actions .kj-af__cta--dim, .kj-af--user .kj-af__actions .kj-af__cta--dim:hover { box-shadow: none; transform: none; }
/* 2026-10-11 (fix round): no hover effect where the design defines none — "Kthehu te shpallja" and "Dërgo aplikimin" (KJUserApply.html:237-238),
   "Vazhdo" (:254) and an extra item's × (:190) look the same under the pointer (rest = hover, measured with a real mouse). A guest's page keeps the
   handoff's hovers; the press keeps the handoff's scale (.kj-af__cta:active wins while pressed: :not(:active)). */
.kj-af--user .kj-af__back:hover { background: var(--kj-surface); }
.kj-af--user .kj-af__actions .kj-af__cta:hover:not(:active), .kj-af__pop--user .kj-af__cta--block:hover:not(:active) { transform: none; }
.kj-af__xitem .kj-af__x--x:hover { background: var(--kj-surface); color: var(--kj-b3-muted); }
/* apply-5: the sent dialog (KJUserApply.html:247-257) — the lighter scrim with a 3 px blur, r26, 34 30 28, no dashes, the 74 px disc, the 25 px title,
   the 14.5 px line within 390, "Vazhdo" 52 high across on the 135deg gradient. z-index stays 130 (above the cookie banner). The attach note is stage's.
   The scrim does not fade in (the design's overlay has no animation; 2026-10-11) — the card's kjScaleIn, the phone sheet's kjSlideUp stay. */
.kj-af__pop--user { background: var(--kjaf-scrim-user); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: none; }
.kj-af__pop--user .kj-af__pop-card { padding: 34px 30px 28px; border-radius: 26px; }
.kj-af__pop--user .kj-af__pop-dots { display: none; }
.kj-af__pop--user .kj-af__pop-ico { width: 74px; height: 74px; margin: 0 auto 16px; }
.kj-af__pop--user .kj-af__pop-title { margin: 0 0 8px; font-size: 25px; line-height: 1.08; letter-spacing: -.02em; }
.kj-af__pop--user .kj-af__pop-sub { max-width: 390px; font-size: 14.5px; line-height: 1.55; }
.kj-af__pop--user .kj-af__pop-act { margin-top: 22px; }
.kj-af__pop--user .kj-af__cta--block { height: 52px; border: 0; background: var(--kjaf-cta-135); box-shadow: var(--kjaf-go-shadow); font-size: 16px; font-weight: 800; letter-spacing: normal; }
.kj-af__pop-note { margin: 12px auto 0; max-width: 390px; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--kjaf-amber-text); text-wrap: pretty; }

/* ---------- 36. Consent before the CV (2026-10-20, stage bug round, track consent; boot.cvConsent from kj-apply-consent.php): until the box is
   ticked the drop zone, the pill, the profile link and "upload another" are dimmed as the send is (--dim, apply-14: .5, not-allowed) — a press still
   answers: the line «Prano kushtet më poshtë që ta lexojmë CV-në.» right above the box (the error line's look, 18 under the last block and 8
   above the box; 0 and 8 in the signed-in column, whose gap is 16) and the focus on the box. A dimmed zone keeps its border on hover. ---------- */
.kj-af__drop--dim, .kj-af__pill--dim, .kj-af__link--dim, .kj-af__btn--dim { opacity: .5; cursor: not-allowed; }
.kj-af__drop--dim:hover { border-color: var(--kj-coral-300); }
.kj-af__cvask { margin-top: 18px; }
.kj-af__cvask.is-in { animation: kjFadeUp .25s both; }
.kj-af__cvask + .kj-af__consent { margin-top: 8px; }
.kj-af--user .kj-af__cvask { margin-top: 0; }
.kj-af--user .kj-af__cvask + .kj-af__consent { margin-top: -8px; }

/* ---------- 24. Empty state (the ad has no form); the <noscript> note is a .kj-af__banner (not in M: P:1503-1508, apply.css:857-895) ---------- */
.kj-af__empty { padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px); background: var(--kj-surface-warm); border: 1px solid var(--kj-stroke); border-radius: var(--kj-r-xl); box-shadow: var(--kj-shadow-xs); text-align: center; }
.kj-af__empty-ico { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--kjaf-empty-ico) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 3.5h5.5L19 9v11.5a1 1 0 01-1 1H8a1 1 0 01-1-1V4.5a1 1 0 011-1z' stroke='%23FF5067' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M13.5 3.5V9H19' stroke='%23FF5067' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; }
.kj-af__empty h2 { font-weight: 700; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.3; color: var(--kj-charcoal); }
.kj-af__empty p { max-width: 460px; margin: 10px auto 0; font-size: 15px; line-height: 1.6; color: var(--kjaf-empty-text); }
.kj-af__empty .kj-btn { margin-top: 22px; }

/* ---------- Rules of the sheet (cat. 0): invalid controls (M:13), keyboard focus, file inputs ---------- */
.kj-af__input[aria-invalid="true"], .kj-af__area[aria-invalid="true"], .kj-af__trig[aria-invalid="true"], .kj-af__check[aria-invalid="true"] { border-color: var(--kjaf-err-line) !important; box-shadow: 0 0 0 3px var(--kjaf-err-ring) !important; }
:where(.kj-af, .kj-af__pop) :where(a, button):focus-visible { outline: 3px solid var(--kjaf-focus); outline-offset: 2px; }
.kj-af input[type="file"] { display: none; }

/* ---------- Long unbroken strings (plan, Review Focus 5): a job or company name, a label, a choice, a message that names a label
   may break anywhere, so that a 120-character word neither widens the page at 390 nor leaves its card at 1512. File names, row
   values, trigger texts and reading-card values already clip or wrap (entries 6, 8-11, 16, 20). ---------- */
.kj-af__crumb, .kj-af__co, .kj-af__title, .kj-af__label, .kj-af__chip, .kj-af__opt, .kj-af__q-head, .kj-af__hint, .kj-af__err, .kj-af__row-err, .kj-af__banner,
.kj-af__pop-title, .kj-af__pop-sub, .kj-af__pop-body, .kj-af__pop-desc, .kj-af__s2-name, .kj-af__s2-mail-main { overflow-wrap: anywhere; }
.kj-af__chip { max-width: 100%; }

/* ---------- b3-apply-10 (w3-apply-signed) — Batch 3, 2026-10-14; both audiences since 2026-10-17: the green box lays its rows out as
   the 10-12 design's two-column grid of cards (KJApply.html exRows; measured on the design's render #/apliko/j2 at 1440 / 900 / 390 through
   cand-checks.mjs: cells 369 x 60 in a 746 grid, gap 8; padding 10 10 10 14, r12 on rgba(255,255,255,.62), hover #fff; the label
   12.5 / 1.35 muted above the value 14.5 / 700 / 1.4, 2 apart; the pencil a 30 px disc on rgba(4,30,66,.05), muted; the languages
   row and a value longer than 44 characters across both columns; an open row a white card 2 16 6 r12 across both, its editor 12 0 14).
   2026-10-17 (wf-1016, the operator's "Batch 3 -> as in the design"): the design's one component draws the same grid for a guest after a
   read (KJApply.html:138-143 cvOk; measured for the guest: 2 x 369 at 1440, one column at 390 / 360), so the block is scoped to the box
   itself, .kj-af__known — one class, the specificity of the .kj-af--user scope it replaces (apply-anim-job-12); and the client draws
   kj-af__row--wide on a row whose value is longer than 44 characters (KJApply.html:1273 rowStyle — a view class: the model and the payload
   are unchanged), spanned here with the languages row (apply-anim-job-13).
   The box keeps its 2026-10-09 frame — r20, the 1 px edge, the header strip; the 10-12 bundle drew the 10-03 frame there (D26) — and the
   editor its 2026-10-09 controls. One column in the phone block (the house 759 for the design's 767).
   The cell keeps the design's own transition, background .15s (its inline style; at 0,3,0 it outranks the chrome's button rule
   body:has(.kj-nav-wrap) button, 0,1,2). This block stays AFTER the base row rules of entry 11 (the 10-09 rows, which it overrides for both
   audiences): the last row's 0 0 19 19 corners and the discs have the same specificity, so the order decides (pinned).
   docs/features/apply-profile-cv.md, docs/pages/apply.md; tests/kj-b3-apply-2026.test.php, tests/kj-apply-2026.test.php; tests/apply-flow/b3-signed-grid.mjs,
   phone.mjs (live) ---------- */
.kj-af__known .kj-af__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 16px 14px; }
.kj-af__known .kj-af__row + .kj-af__row { border-top: 0; }
.kj-af__known .kj-af__row[data-k="row:languages"], .kj-af__known .kj-af__row--wide { grid-column: 1 / -1; }
.kj-af__known .kj-af__rows .kj-af__row-btn { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 10px; row-gap: 2px;
  height: 100%; min-height: 60px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--kjaf-cell); transition: background .15s; }
.kj-af__known .kj-af__rows .kj-af__row-btn:hover { background: var(--kj-surface); }
.kj-af__known .kj-af__row-label { grid-column: 1; grid-row: 1; font-size: 12.5px; line-height: 1.35; }
.kj-af__known .kj-af__row-val { grid-column: 1; grid-row: 2; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.kj-af__known .kj-af__row-ico { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--kjaf-cell-ico); color: var(--kj-b3-muted); }
.kj-af__known .kj-af__row--miss .kj-af__row-ico { background: var(--kjaf-amber-soft); color: var(--kjaf-amber-text); }
.kj-af__known .kj-af__row.is-open { grid-column: 1 / -1; padding: 2px 16px 6px; border-radius: 12px; background: var(--kj-surface); }
.kj-af__known .kj-af__row-edit { padding: 12px 0 14px; }
/* ---------- /b3-apply-10 ---------- */

/* ---------- Reduced motion (cat. 0) ---------- */
@media (prefers-reduced-motion: reduce) {
  .kj-af *, .kj-af__pop, .kj-af__pop * { animation: none !important; transition: none !important; }
  .kj-af__s2-ring, .kj-af__s2-bit { display: none; }   /* without their animation they would stand still around the check */
}

/* ---------- 17. Date of birth below 800 px: two lines — day and month, then the year — in reading order. A query of its own, BEFORE the
   phone block (which lays the panels out from the row below 760). Measured at 390 (phone.mjs, "date of birth at 390"): a trigger has
   49 px of border, padding, gap and chevron; its texts need up to 29 (Dita), 77 (September) and 36 (2000), so one line needs 305 px
   and the numbered question inside the amber box has 231 (the forms 308): no proportions fit, smaller padding does not either.
   Wrapped, the triggers themselves stay as they are. Up to 799 px, because a half-width date of birth on a 768 px tablet (a form
   without a CV: 316 px for the control) gave the day 27 px for "Dita" (29). From 760 to 799 the panels still hang from their own
   trigger: the month panel is then aligned to the right edge of its trigger, which is the right edge of the control — centred it
   would reach 28 px out of the card. ---------- */
@media (max-width: 799px) {
  .kj-af__date { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .kj-af__miss .kj-af__date, .kj-af__row-edit .kj-af__date { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; max-width: none; }   /* the three equal columns of the gold box (entry 12) and of the date row's editor (entry 11, 2026-10-10) are for 800 px and up */
  .kj-af__date > .kj-af__dd:nth-child(3) { grid-column: 1 / -1; }
  .kj-af__panel--m { left: auto; right: 0; margin-left: 0; }
}

/* ---------- Phone (cat. 0: one block, 759 px) ---------- */
@media (max-width: 759px) {
  /* 1. Page wrap and background (2026-10-09: 16 px gutters — the design's [data-wrap] rule at ≤767; 48 below) */
  .kj-af__wrap { padding: 24px 16px 48px; }
  /* the room of the fixed row (C25) — a guest's page only since 2026-10-10: a signed-in candidate's row is static (entry 35, .kj-af--user) */
  body:has(.kj-af:not(.kj-af--user) .kj-af__actions) { padding-bottom: 72px; }
  html:has(.kj-af:not(.kj-af--user) .kj-af__actions) { scroll-padding-bottom: 72px; }   /* a field reached with Tab, or scrolled into view, is not left behind the fixed row */
  body:has(.kj-af:not(.kj-af--user) .kj-af__actions) .kj-epifab { bottom: 84px; }
  /* Since the one chrome of 2026-10-09 a signed-in phone has the fixed 61 px tab bar (docs/features/site-chrome.md; z-index 70, above this row's 40):
     the action row (C25) sits on top of it, the page keeps room for both (61 + 71 + 4) and the EPI button rises above the row (its panel keeps the chrome's place) */
  body:has(.kj-tabbar) .kj-af__actions { bottom: calc(61px + env(safe-area-inset-bottom, 0px)); }
  body:has(.kj-tabbar):has(.kj-af:not(.kj-af--user) .kj-af__actions) { padding-bottom: 136px; }
  html:has(.kj-tabbar):has(.kj-af:not(.kj-af--user) .kj-af__actions) { scroll-padding-bottom: 136px; }
  body:has(.kj-tabbar):has(.kj-af:not(.kj-af--user) .kj-af__actions) .kj-epifab { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
  /* 2. Breadcrumb: hidden on phones (the design's data-hide-m) */
  .kj-af__crumb { display: none; }
  /* 3. Main card and header card (2026-10-09: a row aligned to the top, 18 / gap 12, avatar 46, the title 28 as the shell's [data-h1] rule) */
  .kj-af__head { align-items: flex-start; gap: 12px; padding: 18px; }
  .kj-af__head-main { max-width: 100%; }
  .kj-af__avatar { width: 46px; height: 46px; font-size: 17.48px; }
  .kj-af__title { font-size: 28px; }
  .kj-af__time { display: none; }
  .kj-af__body { padding: 18px; }
  /* 6. Reading card (2026-10-09: 13 / gap 12 with the 72 x 96 thumbnail at 8 7, title 15.5, labels 92 / 12 — the handoff hid the thumbnail, M:22) */
  .kj-af__scan { padding: 13px; }
  .kj-af__scan-grid { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .kj-af__scan-page { width: 72px; height: 96px; padding: 8px 7px; }
  .kj-af__scan-title { font-size: 15.5px; }
  .kj-af__scan-label { width: 92px; font-size: 12px; }
  /* 10. Kept-file card: the row wraps — "Ngarko një tjetër" (about 157 px) on a line of its own, so the file name and its badge have
     the full width (beside the button the name had 55 px at 390 and 25 at 360) */
  .kj-af__kept .kj-af__fail-row { flex-wrap: wrap; }
  .kj-af__kept .kj-af__btn--sm { flex: 0 0 100%; }
  /* 11. The green box: the hint leaves (2026-10-09); its rows are one column of cells, a guest's too since 2026-10-17 (b3-apply-10, apply-anim-job-12 —
     the 10-09 rows' 108 px label column, which gave the value 124 at 390 and 94 at 360, is gone) */
  .kj-af__known-hint { display: none; }
  .kj-af__known .kj-af__rows { grid-template-columns: minmax(0, 1fr); }   /* b3-apply-10 */
  /* 14. Grids */
  .kj-af__grid, .kj-af__list { grid-template-columns: minmax(0, 1fr); }
  /* 17, 19. Date of birth and languages: a panel is laid out from its row, not from its own trigger — a 296 px day panel under a
     trigger that starts 98 px from the edge (the amber box) ended at 394 of 390 */
  .kj-af__date, .kj-af__langs { position: relative; }
  .kj-af__date > .kj-af__dd, .kj-af__langs > .kj-af__dd { position: static; }
  .kj-af__panel--d, .kj-af__panel--m, .kj-af__panel--y { left: 0; right: 0; width: auto; max-width: none; margin-left: 0; }
  /* 17. Date of birth (two lines: the query above): the day and month panels open under their line, the first (46 + 6 since 2026-10-09); the year panel under the control */
  .kj-af__panel--d, .kj-af__panel--m { top: 52px; }
  .kj-af__panel--lv, .kj-af__panel--add { max-width: 100%; }
  /* 22. Consent line, error banner, action row */
  .kj-af__actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: column; align-items: stretch; margin: 0; padding: 12px 16px; border-radius: 0; background: var(--kj-surface); box-shadow: var(--kjaf-bar-shadow); }
  .kj-af__back { display: none; }
  .kj-af__cta { width: 100%; }
  /* 35 (2026-10-10, apply-14): a signed-in candidate's row stands at the end of the card, stacked — "Kthehu te shpallja", then "Dërgo aplikimin",
     both across, 10 apart (KJUserApply.html:236 [data-stack]); the chrome's tab bar keeps its own room (base.css), the EPI button its own place */
  .kj-af--user .kj-af__actions { position: static; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 0; border-top: 0; background: transparent; box-shadow: none; }
  .kj-af--user .kj-af__back { display: inline-flex; justify-content: center; width: 100%; }
  /* 35 (apply-5): the sent dialog as the design's sheet — 24 20 20, the 60 px disc 12 above the 21 px title, the line 16 above "Vazhdo" */
  .kj-af__pop--user .kj-af__pop-card { padding: 24px 0 0; border-radius: 24px 24px 0 0; }
  .kj-af__pop--user .kj-af__pop-step { padding: 0 20px; }
  .kj-af__pop--user .kj-af__pop-ico { width: 60px; height: 60px; margin: 0 auto 12px; }
  .kj-af__pop--user .kj-af__pop-title { font-size: 21px; }
  .kj-af__pop--user .kj-af__pop-act { margin-top: 16px; padding-bottom: 20px; }
  /* 23, 27-30. The pop-up as a bottom sheet (spec 1.8 of 2026-10-05): a column at most 92dvh high (92vh on the line before it, for a
     browser without dvh). The dashes and the x stay at the card's top; the step is the part that scrolls, under them, and carries the
     card's side and bottom padding (the card keeps the 22 px above the dashes). On the offer the block of the three buttons sticks to the
     bottom of the step on the sheet's own background while the body scrolls beneath it: "Po …" across the width, its label on two
     centred lines (the label is about 304 px wide, the button's inside 292 at 390 and 262 at 360), "Shiko si funksionon" and "Jo tani"
     side by side under it, each at least 44 high, their labels free to wrap; the footnote follows the block and is reached at the end of
     the scroll. A sticky box is confined to the scroller's content box, so the step keeps no bottom padding (the 24 px below the content
     belong to the last element of each step instead) and the block reaches the sheet's edge: its own padding — 14 above, where the
     body's margin was, so that the block paints over what scrolls under it; 16 below, keeping "Jo tani" off the edge. Every control is at least 44 px
     high on a phone: the x grows from 36 to 44 (its centre stays at 32 / 32), "Dërgo përsëri" from 36 to 44, "Jo tani" from 26 to 44.
     The tiles become one column; the badges stay side by side, each at most half the row and shrinking with it below 360 (the height
     follows the artwork's 135 x 40); the chips wrap (entry 30), the name and the addresses break anywhere (the long-strings rule).
     Measured at 390 x 664 and 360 x 600 in both languages (tests/apply-flow/phone.mjs, part 7). */
  .kj-af__pop { align-items: flex-end; padding: 0; }
  .kj-af__pop-card { display: flex; flex-direction: column; width: 100%; max-height: 92vh; max-height: 92dvh; overflow: hidden; padding: 22px 0 0; border-radius: 24px 24px 0 0; animation: kjSlideUp .35s var(--kj-ease-out) both; }
  .kj-af__pop-dots { flex: none; }
  .kj-af__pop-x { top: 10px; right: 10px; width: 44px; height: 44px; }
  .kj-af__pop-step { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 26px; }
  .kj-af__pop-step--build { padding: 6px 26px 8px; }
  .kj-af__pop-act, .kj-af__s2-slow, .kj-af__s2-note { padding-bottom: 24px; }   /* the card's 24 px below the content, on the last element of each step */
  .kj-af__pop-title { font-size: 22px; }
  .kj-af__pop-foot { position: sticky; bottom: 0; z-index: 1; flex-direction: row; flex-wrap: wrap; margin-top: 0; padding: 14px 0 16px; background: var(--kj-surface); }
  .kj-af__pop-foot > .kj-af__cta { flex: 1 0 100%; height: auto; min-height: 46px; padding: 8px 22px; line-height: 1.2; white-space: normal; }
  .kj-af__pop-foot > .kj-af__pop-line { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; height: auto; min-height: 46px; padding: 6px 10px; }
  .kj-af__pop-foot > .kj-af__pop-line > svg { flex: none; }
  .kj-af__pop-foot > .kj-af__pop-text { flex: 1 1 calc(50% - 4px); align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .kj-af__s2-tiles { grid-template-columns: minmax(0, 1fr); }
  .kj-af__s2-stores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kj-af__s2-store { max-width: 100%; }
  .kj-af__s2-store img { width: 148.5px; max-width: 100%; height: auto; }
  .kj-af__s2-mail .kj-af__btn--sm { height: 44px; }
}

/* ---------- 17. Date of birth at 379 px and below: each of the three triggers on a line of its own, wherever the control is drawn. At
   360 two lines left the day 29.6 px for "Dita" (29.0) inside the amber box and cut three English month names; at 320 a chosen
   day was cut. Last in the sheet: it changes what the two queries above set. The month panel opens under the second line
   (46 + 8 + 46 + 6 since 2026-10-09), the year panel under the control as before. ---------- */
@media (max-width: 379px) {
  .kj-af__date { grid-template-columns: minmax(0, 1fr); }
  .kj-af__miss .kj-af__date, .kj-af__row-edit .kj-af__date { grid-template-columns: minmax(0, 1fr); }
  .kj-af__date > .kj-af__dd:nth-child(3) { grid-column: auto; }
  .kj-af__panel--m { top: 106px; }
}