/* ══════════════════════════════════════════════════════════════════════════
   Jobs — /jobs, /job?j=… (platform/jobs.php, job.php), and the parts of the
   apply sheet My account shares (platform/me.php)
   ══════════════════════════════════════════════════════════════════════════

   What these pages have that no other has. Everything shared — the scales,
   inputs, chips, notes, the tab bar, the lanes, and the app layer (the back
   row, buttons, pills, rows, the sheet, the bar at the foot: the `app-`
   block of ui.css, docs/ui.md) — is ui.css, loaded first; nothing here names
   a colour of its own beyond the white a logo is drawn on. `.jb-` is the
   seeker-facing Jobs pages.

   The violet panel is the directory's: .hero2 is in ui.css, one copy for
   the directory, /events and /jobs — the owner chose that panel twice.

   Owner, 15 Oct 2026: "compact, modern carded like a highend native app".
   So a job is the app layer's head of one thing (its employer's picture,
   never a banner), its facts a card of rows, Apply in the bar at the foot,
   applying in the app layer's sheet. */

/* ── the page ─────────────────────────────────────────────────────────────── */
.jb-main { padding-bottom: var(--s-8); }
/* The one button of a sheet or a card, the whole of its width (Sign in,
   Send application, More). */
.jb-wide { width: 100%; }
/* iOS enlarges the page under a box whose type is under 16px. */
@media (max-width: 599px) {
  .app-sheet :where(input, textarea, select), .me-main :where(input, textarea) { font-size: var(--t-16); }
}

/* ── the violet panel: ui.css's .hero2; what /jobs adds to it ────────────── */
/* the search box (home.php's .seek). Under it, Nearby | Everywhere and the
   answers as somebody types are ui.css's (.scope, .seek__out). */
.seek{position:relative;display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3);
  padding:5px 5px 5px var(--s-4);flex-wrap:nowrap;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--lift);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.seek:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.seek__i{width:18px;height:18px;flex:0 0 18px;color:var(--mute);stroke-width:1.75}
.seek__q{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:var(--t-15);
  color:var(--ink);padding:0;height:var(--h);outline:none;box-shadow:none;text-overflow:ellipsis}
.seek__q:focus{border:0;box-shadow:none}
.seek__go{flex:0 0 auto;height:var(--h);padding-inline:var(--s-5);border:0;border-radius:var(--r-pill);
  font:inherit;font-size:var(--t-14);font-weight:650;color:#fff;cursor:pointer;background:var(--brand-fill);
  transition:background var(--fast) var(--ease)}
.seek__go:hover{background:var(--brand-fill-hover)}
@media (max-width:520px){
  .seek{gap:var(--s-2);padding-left:var(--s-3)}
  .seek__go{padding-inline:var(--s-4);font-size:var(--t-13)}
}
.nearbar__note{font-size:var(--t-12);color:var(--mute)}
.nearbar__note:empty{display:none}

/* ── the filters ──────────────────────────────────────────────────────────── */
.jb-filters{margin:0 0 var(--s-4)}
/* One row that glides sideways on a phone, as the directory's categories do. */
.jb-chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) var(--s-1)}
.jb-chips::-webkit-scrollbar{display:none}
.jb-chips .chip{flex:0 0 auto;height:var(--h)}
.jb-cat{margin:var(--s-2) 0 0;display:flex;gap:var(--s-2)}
.jb-cat select{width:auto;max-width:100%;min-height:var(--h);height:var(--h);padding-left:var(--s-4);
  border-radius:var(--r-pill);font-size:var(--t-14);background-color:var(--surface);color:var(--ink)}
@media (min-width:900px){
  .jb-filters{display:flex;align-items:center;gap:var(--s-3)}
  .jb-chips{flex:1 1 auto;flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .jb-cat{margin:0}
}
/* One employer's list: who, and the one way back to everybody's. */
.jb-by{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.jb-by__n{flex:1 1 auto;min-width:0;font-size:var(--t-15);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-by__x{flex:none;margin-left:auto}
.jb-said{margin:0 0 var(--s-2);font-size:var(--t-13);color:var(--mute)}
.jb-said b{color:var(--ink)}
.jb-said a{display:inline-flex;align-items:center;min-height:var(--h);font-weight:650}
.jb-note{margin:0 0 var(--s-4)}
.jb-note[hidden]{display:none}
.app-main > .jb-note, .jb-job > .jb-note{margin:0}

/* ── a row: the employer's picture, the job, its pills, a heart ───────────── */
.jb-rows{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;gap:var(--s-2)}
@media (min-width:900px){.jb-rows{grid-template-columns:1fr 1fr;gap:var(--s-3)}}
.jb-row{position:relative;display:flex;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color var(--fast) var(--ease)}
.jb-row:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.jb-row__a{flex:1 1 auto;min-width:0;display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);color:inherit;text-decoration:none;border-radius:var(--r-lg);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.jb-row__a:hover{text-decoration:none}
.jb-row__a:active{background:var(--surface-2)}
.jb-row__a:focus-visible{outline-offset:-2px;border-radius:var(--r-lg)}
.jb-row__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.jb-row__t{font-size:var(--t-15);font-weight:650;line-height:1.35;letter-spacing:-.006em;color:var(--ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jb-row__w{display:flex;align-items:center;min-width:0;font-size:var(--t-13);color:var(--mute)}
.jb-row__h{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-row__w .vtick{margin-left:4px}
.jb-row__d{margin:0 6px;color:var(--faint)}
.jb-row__w>span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-row__p{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:6px}
.jb-row__p .app-pill{height:22px;padding:0 var(--s-2)}
.jb-row__c{margin-top:2px;font-size:var(--t-12);color:var(--mute)}
.jb-heart{flex:0 0 auto;margin:0}
/* On a row the heart sits in its corner. */
.jb-row .jb-heart{padding:var(--s-2) var(--s-2) 0 0}
.jb-row .jb-heart__b{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:none;color:var(--mute);cursor:pointer;transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.jb-row .jb-heart__b:hover{background:var(--surface-2);color:var(--ink)}
.jb-row .jb-heart__b svg{width:22px;height:22px}
.jb-row .jb-heart__b.on{color:var(--brand)}
.jb-heart__b.on svg path{fill:currentColor}
.jb-row .jb-heart__b[aria-busy="true"]{opacity:.6;cursor:progress}
/* Saved, in the dark design: the brand's light ink (the violet itself reads under 3:1 there). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .jb-row .jb-heart__b.on{color:var(--brand-ink)}
}

/* the picture: a logo whole on white, a face filling the square, or initials */
.jb-tile{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;
  font-weight:750;font-size:var(--t-15);color:var(--brand-ink);background:var(--brand-wash)}
.jb-tile img{width:100%;height:100%;object-fit:cover;display:block}
.jb-tile--logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.jb-tile--logo img{object-fit:contain;padding:4px}
.jb-tile--dark{background:#211247;box-shadow:none}
.jb-tile--sm{width:36px;height:36px;flex-basis:36px;border-radius:var(--r-sm);font-size:var(--t-13)}
.jb-tile--sm.jb-tile--logo img{padding:3px}

.jb-more{margin:var(--s-2) 0 var(--s-4)}
/* More, while the next page is on its way: taken, and not taken twice. */
#jbMore[aria-busy="true"]{opacity:.6;pointer-events:none}
.jb-main > .app-empty{margin:var(--s-2) 0 var(--s-4)}
.jb-foot{max-width:640px;margin:var(--s-8) 0 var(--s-4)}

/* ── one job ──────────────────────────────────────────────────────────────── */
/* The back row, the head, the facts, the words: 16px apart, one column on a
   phone; from 900px the facts are a column of their own beside the rest,
   in view as the words scroll. */
.jb-job{display:flex;flex-direction:column;gap:var(--s-4)}
.jb-job > .app-back{margin-bottom:calc(var(--s-2) * -1)}
.jb-grid{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.jb-body{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
@media (min-width:900px){
  .jb-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head aside" "body aside";
    gap:var(--s-4) var(--s-8);align-items:start}
  .jb-head{grid-area:head}
  .jb-aside{grid-area:aside;position:sticky;top:calc(60px + var(--s-4))}
  .jb-body{grid-area:body}
}
/* The head: the job's name is the page's own heading, larger than a card's. */
.jb-head .app-media__t{font-size:var(--t-20);line-height:1.25;letter-spacing:-.016em;text-wrap:balance}
@media (min-width:600px){ .jb-head .app-media__t{font-size:var(--t-24)} }
.jb-head__who{display:flex;align-items:center;min-width:0;color:var(--ink-2);font-weight:600}
.jb-head__who > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-head__who .vtick{margin-left:4px}
/* An employer's logo whole on white, as the directory draws it. */
.jb-pic--logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.app-media__pic.jb-pic--logo img{object-fit:contain;padding:8px}
.jb-pic--dark{background:#211247;box-shadow:none}
/* Save is a form of its own: it shares the row as the buttons do. */
.jb-head .app-media__do > form{display:flex;flex:1 1 auto;min-width:0;margin:0}
.jb-head .app-media__do > form > .app-btn{flex:1 1 auto;min-width:0}
@media (min-width:600px){ .jb-head .app-media__do > form{flex:0 0 auto} }
/* Saved: the heart filled, the word "Saved", the tonal button's own ink. */
.jb-heart--act .jb-heart__b.on{color:var(--brand-ink)}

/* The facts, a row each: the name of the fact, and the fact itself — which
   may run to two lines rather than be cut ("₦120,000–₦150,000 a month"). */
.jb-facts .app-row:has(.app-row__v) .app-row__b{flex:0 0 auto;max-width:46%}
.jb-facts .app-row__t{font-size:var(--t-14);color:var(--mute)}
.jb-facts .app-row__v{flex:1 1 auto;max-width:none;white-space:normal;overflow-wrap:anywhere;
  font-size:var(--t-15);font-weight:600;line-height:1.35;color:var(--ink)}
.jb-facts > a.app-row .app-row__t{font-size:var(--t-15);font-weight:600;color:var(--ink)}
.jb-facts .vtick{margin-left:4px}

/* The words: a card each. */
.jb-sec > h2{margin-bottom:var(--s-3)}
.jb-list{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.jb-list li{position:relative;padding-left:var(--s-5);font-size:var(--t-15);line-height:1.55;overflow-wrap:anywhere}
.jb-list li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.jb-text{font-size:var(--t-15);line-height:1.65;overflow-wrap:anywhere;max-width:72ch}

/* Applied, in the bar at the foot: the tick and "Applied" at every width;
   " · Shortlisted" (where it stands) read aloud always, and shown from
   600px, where it fits beside the pay. */
.jb-applied svg{color:var(--good)}
.jb-applied>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-applied__s{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:600px){
  .jb-applied__s{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
}

/* a vacancy that is no longer open */
.jb-shut{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);max-width:560px;width:100%;margin:var(--s-2) auto 0;
  padding:var(--s-8) var(--s-5);text-align:center}
.jb-shut h1{font-size:var(--t-24);line-height:1.2;overflow-wrap:anywhere}
.jb-shut__w{color:var(--mute);font-size:var(--t-14);overflow-wrap:anywhere}
.jb-shut__i{display:grid;place-items:center;color:var(--mute)}
.jb-shut__i svg{width:40px;height:40px}
.jb-shut__go{margin-top:var(--s-2)}

/* the word that comes and goes by itself (/jobs, where the app layer's toast
   is not on the page: home.php's .cats__say) */
.jb-say{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom, 0px));z-index:80;
  max-width:calc(100vw - 32px);padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);
  font-size:var(--t-13);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--lift-2);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.jb-say:empty{display:none}
.jb-say.is-on{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){ .jb-say{bottom:calc(20px + env(safe-area-inset-bottom, 0px))} }
.in-app .jb-say{bottom:calc(20px + env(safe-area-inset-bottom, 0px))}

/* A control the keyboard reaches is scrolled clear of the tab bar (the list,
   My account, a closed job; an open job's bar is the app layer's). */
@media (max-width:699px){html.jb-tabs:not(.in-app){scroll-padding-bottom:calc(68px + var(--s-4) + env(safe-area-inset-bottom, 0px))}}

/* ── inside the app layer's sheet (dialog.app-sheet): Apply, Report ─────── */
/* The sheet's own heading, then this: what scrolls, the Cancel under it. */
.jb-sheetbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0;padding:var(--s-1) var(--s-3) var(--s-3)}
.jb-sheetbody > form{margin:0}

/* words said inside a part, and the agreement line */
.jb-msg{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r);font-size:var(--t-13);line-height:1.5;
  background:var(--surface-2);color:var(--ink-2)}
.jb-msg[hidden]{display:none}
.jb-msg.is-bad{background:var(--bad-wash);color:var(--bad)}
.jb-msg.is-ok{background:var(--good-wash);color:var(--good)}
.jb-agree{margin:0 0 var(--s-3);text-align:center;font-size:var(--t-12);line-height:1.5;color:var(--mute)}
/* Inline, so the full stop stays with "Privacy" (an inline-block let it
   wrap alone onto a line of its own — plan walk F8); the padding still
   makes each link a taller target. */
.jb-agree a{padding:var(--s-2) 0}
.app-field small{font-weight:500;color:var(--mute)}

/* Sign in | Create: two halves of one switch */
.jb-seg{display:flex;gap:4px;padding:4px;margin:0 0 var(--s-4);border-radius:var(--r);background:var(--surface-2)}
.jb-seg button{flex:1 1 0;min-height:var(--h);border:0;border-radius:var(--r-sm);background:none;font:inherit;
  font-size:var(--t-14);font-weight:650;color:var(--mute);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.jb-seg button:hover{color:var(--ink)}
.jb-seg button[aria-selected="true"]{background:var(--surface);color:var(--brand-ink);box-shadow:var(--lift),0 0 0 1px var(--line)}
/* My account's card (24 Oct 2026, one sign-in): the same switch, its Sign in
   half a link — the platform's one sign-in, its sheet opened in place — and
   Create the half that is lit, the face under it. The link takes the track's
   edge too, so the whole 48 px is its tap. */
.jb-seg__a,.jb-seg__on{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:var(--h);border-radius:var(--r-sm);
  font-size:var(--t-14);font-weight:650;line-height:1.2;text-decoration:none}
.jb-seg__a{position:relative;color:var(--mute);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.jb-seg__a::after{content:"";position:absolute;inset:-4px}
.jb-seg__a:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 55%,transparent);text-decoration:none}
.jb-seg__a:focus-visible{outline-offset:-2px}
.jb-seg__on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--lift),0 0 0 1px var(--line)}
.jb-face[hidden]{display:none}
.jb-face .app-btn{margin-top:var(--s-1)}
.jb-forgot{display:flex;align-items:center;width:max-content;min-height:var(--h);margin:calc(var(--s-3) * -1) 0 var(--s-2) auto;
  padding:0 var(--s-1);font-size:var(--t-13);font-weight:650}

/* the email code */
.jb-step__h{margin:0 0 var(--s-1);font-size:var(--t-18)}
.jb-code__to{margin:0 0 var(--s-4);font-size:var(--t-14);color:var(--mute);overflow-wrap:anywhere}
.jb-code__in{text-align:center;font-size:var(--t-24);font-weight:700;letter-spacing:.3em}
.jb-code .app-btn + .app-btn{margin-top:var(--s-2)}

/* the form: who, the CV, the questions */
.jb-me{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-3);border-radius:var(--r);
  background:var(--surface-2)}
.jb-me__i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--brand-wash);color:var(--brand-ink);font-size:var(--t-14);font-weight:750}
.jb-me__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;font-size:var(--t-13);line-height:1.4;color:var(--mute)}
.jb-me__b > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-me__b b{font-size:var(--t-15);color:var(--ink)}
.jb-cv{min-width:0;margin:0 0 var(--s-4);padding:0;border:0}
.jb-cv legend{padding:0;margin:0 0 6px;font-size:var(--t-13);font-weight:600;color:var(--ink)}
.jb-cv legend small{font-weight:500;color:var(--mute)}
/* One column as wide as the sheet — never as wide as the longest file name:
   the name is cut with an ellipsis and the size stays in view. */
.jb-cvs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin:0 0 var(--s-3)}
.jb-cvs:empty{display:none}
.jb-cvchip{position:relative;display:block;min-width:0;margin:0;cursor:pointer}
.jb-cvchip[hidden]{display:none}
.jb-cvchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.jb-cvchip>span{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-lg);padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.jb-cvchip svg{width:20px;height:20px;flex:0 0 20px;color:var(--brand-ink)}
.jb-cvchip b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-14);color:var(--ink)}
.jb-cvchip i{flex:0 0 auto;font-style:normal;font-size:var(--t-12);color:var(--mute);white-space:nowrap}
.jb-cvchip:hover>span{border-color:var(--faint)}
.jb-cvchip input:checked+span{border-color:var(--brand);background:var(--brand-wash)}
.jb-cvchip input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
/* a file picker that looks like the button (or the row) it is */
.jb-up{position:relative;overflow:hidden;cursor:pointer}
.jb-up input.jb-up__f{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.jb-up:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.jb-up.is-busy{opacity:.6;pointer-events:none}
.jb-prog{height:6px;margin:var(--s-3) 0 0;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.jb-prog[hidden]{display:none}
.jb-prog i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--brand);
  transform:scaleX(0);transform-origin:left center;transition:transform .2s var(--ease)}
.jb-cv .jb-msg{margin-top:var(--s-3)}
.jb-form textarea{min-height:88px}
/* The field a refusal was about (job.php marks it, jb.js gives it the focus). */
.jb-form [aria-invalid="true"]{border-color:var(--bad)}
.jb-up:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1px var(--bad)}

/* sent, or applied before */
.jb-done{padding:var(--s-4) 0 var(--s-2);text-align:center}
.jb-done__i{display:inline-grid;place-items:center;width:56px;height:56px;margin:0 0 var(--s-3);border-radius:50%;
  background:var(--good-wash);color:var(--good)}
.jb-done__i svg{width:28px;height:28px}
.jb-done h2{margin:0 0 var(--s-3);font-size:var(--t-24)}
.jb-done p{margin:0 0 var(--s-5)}
.jb-done h2 + .app-btn{margin-top:var(--s-2)}
.jb-done .app-btn + .app-btn{margin-top:var(--s-2)}
/* Sent, or applied before: nothing is left to cancel — the step's own Done closes it. */
.app-sheet:has(.jb-done) .app-sheet__x{display:none}

/* the report's reasons: chips to tap */
.jb-reasons{display:flex;flex-wrap:wrap;gap:var(--s-2);min-width:0;margin:0 0 var(--s-4);padding:0;border:0}
.jb-reason{position:relative;display:inline-flex;margin:0;cursor:pointer}
.jb-reason input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.jb-reason span{display:inline-flex;align-items:center;min-height:var(--h);padding:0 var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--surface-2);font-size:var(--t-14);font-weight:620;color:var(--ink-2);
  transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.jb-reason:hover span{border-color:var(--faint)}
.jb-reason input:checked+span{border-color:var(--brand);background:var(--brand-wash);color:var(--brand-ink)}
.jb-reason input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}

/* ── nothing moves for somebody who has asked for less motion ─────────────── */
@media (prefers-reduced-motion:reduce){
  .jb-prog i,.jb-say{transition:none}
}