/* Public job page (/{lang}/job/{uid}/{slug}): the dashboard theme (original/assets/css/ui-kit.css tokens) */

/* Source Sans Pro, the dashboard font (same files as original/assets/css/font.css, without the extra request);
   swap: the text shows at once in the fallback font */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('/assets/fonts/sourcesanspro/sourcesanspro.woff2') format('woff2'), url('/assets/fonts/sourcesanspro/sourcesanspro.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('/assets/fonts/sourcesanspro/sourcesanspro-bold.woff2') format('woff2'), url('/assets/fonts/sourcesanspro/sourcesanspro-bold.woff') format('woff');
}

:root {
    --ui-primary: #7547ce;
    --ui-primary-hover: #6438bd;
    --ui-primary-soft: #f0ebfb;
    --ui-primary-soft-hover: #e4dbf8;
    /* text colours at least 4.5:1 on their backgrounds (WCAG AA, accessibility audit): success and warning are
       only used for text, on their -soft backgrounds; muted on the page and card backgrounds */
    --ui-success: #13773a;
    --ui-success-soft: #e3f7ea;
    --ui-warning: #a14a07;
    --ui-warning-soft: #fdf0dc;
    --ui-text: #1f1d2b;
    --ui-text-body: #58666e;
    --ui-muted: #66647b;
    --ui-border: #ecebf3;
    --ui-border-strong: #dcdbe6;
    --ui-bg: #f6f6fa;
    --ui-surface: #ffffff;
    --ui-surface-alt: #f8f8fb;
    --ui-font: "Source Sans Pro", "Noto Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ui-radius: 10px;
    --ui-radius-lg: 16px;
    --ui-shadow-sm: 0 1px 2px rgba(31, 29, 43, .06);
    --ui-shadow: 0 4px 18px rgba(31, 29, 43, .06);
    --ui-shadow-lg: 0 12px 32px rgba(31, 29, 43, .12);
    --ui-focus-ring: 0 0 0 3px rgba(117, 71, 206, .18);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a {
    color: var(--ui-primary);
}

.jd-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.jd-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- buttons (ui-btn) ---------- */
.jd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    font: 600 14px/1.4 var(--ui-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.jd-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.jd-btn--primary {
    background: var(--ui-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(117, 71, 206, .25);
}

.jd-btn--primary:hover {
    background: var(--ui-primary-hover);
}

.jd-btn--outline {
    border-color: var(--ui-border-strong);
}

.jd-btn--outline:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.jd-btn--ghost {
    background: transparent;
    color: var(--ui-text-body);
}

.jd-btn--ghost:hover {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

.jd-btn--success {
    background: var(--ui-success-soft);
    color: var(--ui-success);
    cursor: default;
}

.jd-btn--muted {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
    cursor: default;
}

.jd-btn--lg {
    padding: 12px 26px;
    font-size: 16px;
}

.jd-btn--sm {
    padding: 7px 14px;
    font-size: 13px;
}

.jd-btn--block {
    display: flex;
    width: 100%;
}

.jd-link {
    color: var(--ui-primary);
    font-weight: 600;
    text-decoration: none;
}

.jd-link:hover {
    color: var(--ui-primary-hover);
}

/* ---------- top bar (dashboard header) ---------- */
.jd-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}

.jd-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.jd-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* the logo (home page) and "Jobs" (board) are two links; each fills the header height */
.jd-brand a {
    display: flex;
    align-items: center;
    align-self: stretch;
    text-decoration: none;
}

.jd-brand__label:hover {
    text-decoration: underline;
}

.jd-brand picture {
    display: flex;
}

.jd-brand img {
    height: 28px;
    width: auto;
}

/* phones: the square logo (picture source), 36x36 */
@media (max-width: 520px) {
    .jd-brand img {
        width: 36px;
        height: 36px;
    }
}

.jd-brand__label {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--ui-border-strong);
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.jd-topbar__nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jd-topbar__link {
    color: var(--ui-text-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.jd-topbar__link:hover {
    color: var(--ui-primary);
}

.jd-lang {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
}

.jd-lang a {
    min-width: 34px;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.jd-lang a.is-active {
    background: var(--ui-primary);
    color: #fff;
}

/* ---------- page ---------- */
.jd-main {
    padding-top: 20px;
    padding-bottom: 56px;
}

.jd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--ui-muted);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.jd-back:hover {
    color: var(--ui-primary);
}

[dir="rtl"] .jd-back .jd-icon {
    transform: scaleX(-1);
}

/* card (ui-card) */
.jd-card {
    margin-bottom: 20px;
    padding: 22px 24px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

/* section title (ui-section-title): small, uppercase, muted */
.jd-section-title {
    margin: 0 0 16px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jd-label {
    margin: 18px 0 8px;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 700;
}

.jd-label:first-of-type {
    margin-top: 0;
}

.jd-value {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--ui-text-body);
    font-size: 14px;
    word-break: break-word;
}

.jd-value .jd-icon {
    margin-top: 2px;
    color: var(--ui-primary);
}

/* company address: the street on one line, then postcode, city, country (each on the page's side) */
.jd-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jd-address > * {
    display: block;
    text-align: start;
}

html[dir="ltr"] .jd-address > * {
    text-align: left;
}

html[dir="rtl"] .jd-address > * {
    text-align: right;
}

/* ---------- header card ---------- */
.jd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(117, 71, 206, .07), transparent 55%),
        var(--ui-surface);
}

.jd-head__main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.jd-head__text {
    min-width: 0;
}

.jd-head__company {
    margin: 0 0 2px;
    max-width: 60ch;
    overflow: hidden;
    color: var(--ui-text-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jd-head__title {
    margin: 0 0 12px;
    color: var(--ui-text);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
}

/* the title keeps its own direction (dir="auto": a Latin title on /ar, an Arabic title on /fr) but lines up
   with the company name and the tags, on the page's side */
html[dir="ltr"] .jd-head__title {
    text-align: left;
}

html[dir="rtl"] .jd-head__title {
    text-align: right;
}

.jd-head__date {
    margin: 12px 0 0;
    color: var(--ui-muted);
    font-size: 13px;
}

.jd-head__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
    text-align: center;
}

/* share on LinkedIn, Facebook and X: round buttons, the network's colour on hover */
.jd-social {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.jd-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 50%;
    background: var(--ui-surface);
    color: var(--ui-text-body);
    transition: background .15s, border-color .15s, color .15s;
}

.jd-social__link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.jd-social__link:hover,
.jd-social__link:focus-visible {
    color: #fff;
}

.jd-social__link--linkedin:hover,
.jd-social__link--linkedin:focus-visible {
    background: #0a66c2;
    border-color: #0a66c2;
}

.jd-social__link--facebook:hover,
.jd-social__link--facebook:focus-visible {
    background: #1877f2;
    border-color: #1877f2;
}

.jd-social__link--x:hover,
.jd-social__link--x:focus-visible {
    background: #000;
    border-color: #000;
}

/* company logo, or initials when there is none */
.jd-logo {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface);
}

.jd-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.jd-logo span {
    display: none;
    color: var(--ui-primary);
    font-size: 26px;
    font-weight: 700;
}

.jd-logo.is-fallback {
    border-color: transparent;
    background: linear-gradient(135deg, #f3eefd 0%, #e2d6fa 100%);
}

.jd-logo.is-fallback span {
    display: block;
}

.jd-logo--sm {
    width: 48px;
    height: 48px;
    padding: 4px;
    border-radius: 10px;
}

.jd-logo--sm span {
    font-size: 17px;
}

/* pills (ui-pill) */
.jd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.jd-pill .jd-icon {
    width: 14px;
    height: 14px;
}

.jd-pill--primary {
    background: var(--ui-primary-soft);
    border-color: transparent;
    color: var(--ui-primary);
}

.jd-pill--success {
    background: var(--ui-success-soft);
    border-color: transparent;
    color: var(--ui-success);
}

/* ---------- two columns (ui-layout: main + 340px side) ---------- */
.jd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.jd-side__apply {
    margin-top: 18px;
}

/* job description (recruiter rich text) */
.jd-visual {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    margin-bottom: 18px;
    border-radius: 12px;
}

.jd-prose {
    color: var(--ui-text-body);
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.jd-prose > :first-child {
    margin-top: 0;
}

/* mixed languages: each block of the description gets dir="rtl|ltr" from its majority script (details.php) */
.jd-prose [dir] {
    text-align: start;
}

/* short values in a right-to-left page ("1800 - 2500 EUR", "Fixed-term", names): laid out in their own
   direction, so the numbers and the currency are not swapped */
.jd-pill,
.jd-facts dd,
.jd-chip,
.jd-value,
.jd-quote strong,
.jd-quote span {
    unicode-bidi: plaintext;
}

.jd-prose h1,
.jd-prose h2,
.jd-prose h3,
.jd-prose h4,
.jd-prose h5,
.jd-prose h6 {
    margin: 22px 0 8px;
    color: var(--ui-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.jd-prose p {
    margin: 0 0 12px;
}

.jd-prose ul,
.jd-prose ol {
    margin: 0 0 14px;
    padding-inline-start: 22px;
}

.jd-prose li {
    margin-bottom: 4px;
}

.jd-prose li::marker {
    color: var(--ui-primary);
}

.jd-prose strong,
.jd-prose b {
    color: var(--ui-text);
}

.jd-prose blockquote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-inline-start: 3px solid var(--ui-primary);
    background: var(--ui-surface-alt);
    border-radius: 8px;
}

.jd-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.jd-prose td,
.jd-prose th {
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
}

/* key facts (side card) */
.jd-facts {
    margin: 0;
}

.jd-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--ui-border);
}

.jd-facts > div:first-child {
    padding-top: 0;
}

.jd-facts > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.jd-facts dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 14px;
}

.jd-facts dt .jd-icon {
    color: var(--ui-primary);
}

.jd-facts dd {
    margin: 0;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 600;
    text-align: end;
}

/* skills, diplomas, languages */
.jd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-block: 5px;
    padding-inline: 6px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-text);
    font: 600 13px/1.4 var(--ui-font);
}

.jd-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.jd-chip--plain {
    padding-inline-start: 10px;
    background: var(--ui-primary-soft);
    border-color: transparent;
    color: var(--ui-primary);
}

.jd-chip--more {
    display: none;
}

.jd-chips.is-open .jd-chip--more {
    display: inline-flex;
}

.jd-chip--toggle {
    padding: 5px 12px;
    background: var(--ui-surface-alt);
    color: var(--ui-primary);
    cursor: pointer;
}

/* advantages */
.jd-perks {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jd-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    font-weight: 600;
    font-size: 14px;
}

.jd-perks img,
.jd-perks .jd-icon {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 8px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    object-fit: contain;
}

/* company card */
.jd-company__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.jd-company__head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.jd-company__about {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
    color: var(--ui-text-body);
    font-size: 14px;
}

/* workspace photos */
.jd-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.jd-gallery__item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ui-surface-alt);
}

.jd-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}

.jd-gallery__item:hover img {
    transform: scale(1.04);
}

/* team quotes */
.jd-team {
    display: grid;
    gap: 16px;
}

.jd-quote {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    background: var(--ui-surface-alt);
}

.jd-quote__photo {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 12px;
}

.jd-quote__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jd-quote figcaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.jd-quote blockquote {
    margin: 0 0 8px;
    color: var(--ui-text-body);
    font-style: italic;
}

.jd-quote strong {
    color: var(--ui-text);
}

.jd-quote span {
    color: var(--ui-muted);
    font-size: 13px;
}

/* videos */
.jd-videos {
    display: grid;
    gap: 12px;
}

.jd-videos video {
    width: 100%;
    border-radius: 12px;
    background: #000;
}

/* ---------- dialogs ---------- */
/* expired offer: open jobs to go to */
.jd-similar__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.jd-similar__list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-alt);
}

.jd-similar__title {
    color: var(--ui-text);
    font-weight: 700;
    text-decoration: none;
}

.jd-similar__title:hover {
    color: var(--ui-primary);
}

.jd-similar__meta {
    color: var(--ui-muted);
    font-size: 14px;
}

.jd-dialog {
    width: min(480px, calc(100% - 32px));
    padding: 26px;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    color: var(--ui-text);
    font-family: var(--ui-font);
}

.jd-dialog::backdrop,
.jd-lightbox::backdrop {
    background: rgba(31, 29, 43, .55);
}

.jd-dialog h2 {
    margin: 0 0 4px;
    color: var(--ui-warning);
    font-size: 20px;
}

.jd-dialog__job {
    margin: 0 0 12px;
    font-weight: 700;
}

.jd-dialog p {
    color: var(--ui-text-body);
}

.jd-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.jd-lightbox {
    max-width: min(1100px, 94vw);
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    overflow: visible;
}

.jd-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
}

.jd-lightbox button {
    position: absolute;
    top: -14px;
    inset-inline-end: -14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ui-shadow-lg);
}

/* ---------- footer ---------- */
.jd-footer {
    padding: 24px 0;
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: 14px;
}

.jd-footer .jd-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.jd-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ui-primary);
    font-weight: 600;
    text-decoration: none;
}

.jd-footer__link:hover {
    text-decoration: underline;
}

/* the mobile apply bar is only for small screens */
.jd-mobilebar {
    display: none;
}

/* login button: short label on phones only */
.jd-login__short {
    display: none;
}

/* logged-in candidate (header): photo or initials + first name */
.account-chip {
    gap: 8px;
    padding-inline-start: 4px;
}

.account-chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 50%;
    background: #f0ebfb;
    color: #7547ce;
    font-size: 11px;
    font-weight: 700;
}

.account-chip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-chip__name {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- small screens ---------- */
@media (max-width: 960px) {
    .jd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* "Hiring?" (recruiters, to the app): not on small screens, as on the job board */
    .jd-topbar__link {
        display: none;
    }
}

@media (max-width: 720px) {
    /* share buttons: ~44px tap targets */
    .jd-social__link {
        width: 44px;
        height: 44px;
    }

    .jd-container {
        padding: 0 16px;
    }

    .jd-head {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    .jd-head__main {
        gap: 14px;
    }

    .jd-logo {
        width: 56px;
        height: 56px;
    }

    .jd-logo span {
        font-size: 20px;
    }

    .jd-head__actions .jd-btn--lg,
    .jd-side__apply {
        display: none;
    }

    .jd-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .jd-card {
        padding: 18px;
    }

    /* header on phones: the account (avatar only) and the log in button stay, with ~44px tap targets */
    .jd-topbar__nav {
        gap: 8px;
    }

    .jd-lang a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        font-size: 13px;
    }

    .jd-topbar__nav .jd-btn {
        min-height: 44px;
    }

    /* 44px tap targets: "Copier le lien" and the company website link */
    .jd-share,
    .jd-value.jd-link {
        min-height: 44px;
    }

    .jd-value.jd-link {
        display: inline-flex;
        align-items: center;
    }

    .jd-topbar__nav .account-chip {
        justify-content: center;
        width: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .account-chip__name,
    .jd-login__full {
        display: none;
    }

    .jd-login__short {
        display: inline;
    }

    .account-chip__avatar {
        width: 32px;
        height: 32px;
    }

    .jd-back {
        min-height: 44px;
        margin-top: -10px;
        margin-bottom: 4px;
    }

    /* the apply button at the bottom of the screen: a full tap target */
    .jd-mobilebar .jd-btn {
        min-height: 48px;
    }

    .jd-brand {
        min-height: 44px;
    }

    .jd-mobilebar {
        position: sticky;
        bottom: 0;
        z-index: 10;
        display: block;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--ui-border);
        box-shadow: 0 -6px 18px rgba(31, 29, 43, .06);
    }

    .jd-footer {
        padding-bottom: 24px;
    }
}

/* narrowest phones: the "Jobs" label next to the logo goes ("All jobs" stays under the header) */
@media (max-width: 420px) {
    .jd-brand .jd-brand__label {
        display: none;
    }
}