/* ==========================================================================
   الحساب: صفحتا الدخول والتسجيل، هيكل لوحة الباحث، النماذج والجداول.
   لا لون مكتوب هنا — كل شيء من tokens.css. سطح على خلفية، فصل بخطّ رفيع.
   ========================================================================== */

/* --------------------------------------------------------------------------
   بطاقة الدخول والتسجيل
   -------------------------------------------------------------------------- */

.jl-auth {
    max-width: var(--measure-card);
    margin-inline: auto;
    padding-block: var(--space-6) var(--space-8);
}

.jl-auth__card {
    padding: var(--space-7) var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-auth__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--ink);
}

/* الأيقونة أصغر من العنوان: تسبقه ولا تنافسه. */
.jl-auth__title .jl-icon {
    font-size: 20px;
    color: var(--accent-text);
    opacity: 1;
}

.jl-auth__lede {
    margin: 0 0 var(--space-6);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}

/*
 * خطأ النموذج كلّه — شريط مؤطَّر فوق الحقول. الأحمر هنا خطأ فعليّ،
 * وهو الموضع الوحيد الذي يُسمح له فيه بالظهور.
 */
.jl-auth__error {
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--accent-2);
    border-inline-start-width: 3px;
    border-radius: var(--radius);
    color: var(--accent-2);
    font-size: 14px;
    line-height: 1.6;
}

/* الأيقونة تحمل لون الشريط نفسه — أحمر الخطأ لا لون الهوية. */
.jl-auth__error .jl-icon {
    opacity: 1;
}

/* الأيقونة حلّت محلّ نقطة القائمة، فلا داعي لبادئة النقاط. */
ul.jl-auth__error {
    list-style: none;
    padding-inline-start: var(--space-4);
}

ul.jl-auth__error li + li {
    margin-block-start: var(--space-1);
}

.jl-auth__foot {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: var(--hairline);
}

.jl-auth__alt {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.jl-auth__alt + .jl-auth__alt {
    margin-block-start: var(--space-2);
}

.jl-auth__alt a {
    color: var(--accent-text);
    font-weight: 500;
}

.jl-auth__alt a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   النماذج
   -------------------------------------------------------------------------- */

.jl-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    max-width: none;
}

.jl-field--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.jl-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
}

.jl-field input[type='text'],
.jl-field input[type='email'],
.jl-field input[type='password'],
.jl-field input[type='tel'],
.jl-field input[type='number'],
.jl-field input[type='url'],
.jl-field input[type='date'],
.jl-field input[type='file'],
.jl-field select,
.jl-field textarea {
    inline-size: 100%;
    padding: var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jl-field input[type='number'] {
    font-variant-numeric: tabular-nums;
}

.jl-field input:focus,
.jl-field select:focus,
.jl-field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.jl-field input[aria-invalid='true'] {
    border-color: var(--accent-2);
}

.jl-field textarea {
    resize: vertical;
    min-block-size: 7em;
}

/* حقول قصيرة بطبعها لا تستحقّ عرض السطر كلّه. */
.jl-field--inline input[type='number'] {
    inline-size: 8em;
}

.jl-field--inline input[type='text'] {
    inline-size: auto;
    flex: 1 1 12em;
}

.jl-field__hint {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* التلميح رماديّ خافت — الأيقونة وحدها تأخذ لون الهوية لتُرى. */
.jl-field__hint .jl-icon {
    font-size: 14px;
    color: var(--accent-text);
    opacity: 1;
}

.jl-field__error {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent-2);
}

/*
 * مربّع الاختيار: عمود لا صفّ، كي ينزل التلميح تحت السطر لا بجانبه
 * فيضيق عليه. الصفّ الداخليّ وحده هو المصطفّ أفقيًّا.
 */
.jl-field--check {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.jl-field--check > label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 14.5px;
    font-weight: 400;
    color: var(--ink-soft);
    cursor: pointer;
}

.jl-field--check .jl-field__hint {
    padding-inline-start: calc(var(--space-4) + var(--space-3));
}

input[type='checkbox'] {
    accent-color: var(--accent);
    inline-size: var(--space-4);
    block-size: var(--space-4);
    margin: 0;
    flex: 0 0 auto;
    margin-block-start: 3px;
}

/* --- الأزرار --- */

.jl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.jl-button:hover {
    filter: brightness(1.08);
    box-shadow: var(--lift);
}

.jl-button--ghost {
    background: transparent;
    color: var(--accent-text);
}

.jl-button--ghost:hover {
    background: var(--accent-soft);
    filter: none;
}

.jl-button--block {
    inline-size: 100%;
}

.jl-form__actions {
    margin: 0;
    max-width: none;
}

/* --------------------------------------------------------------------------
   لوحات النموذج الطويل
   -------------------------------------------------------------------------- */

.jl-panel {
    margin: 0 0 var(--space-5);
    padding: var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-panel__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.jl-panel__title .jl-icon {
    font-size: 16px;
    color: var(--accent-text);
    opacity: 1;
}

.jl-panel__note {
    margin: 0 0 var(--space-5);
    padding-block-end: var(--space-4);
    border-block-end: var(--hairline);
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

/* اللوحة الأهمّ في الصفحة — الخطّ المميّز على حافّتها يقولها بلا صياح. */
.jl-panel--key {
    border-inline-start: 3px solid var(--accent);
}

/*
 * حقلان في السطر حيث يتّسع، وواحد حين يضيق. عمودان بالضبط لا
 * auto-fit: أربعة حقول توزَّع مربّعًا مرتّبًا لا ثلاثة وواحدًا.
 */
.jl-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-5);
}

@media (min-width: 560px) {
    .jl-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- الصفوف المتكرّرة: بطاقة صغيرة داخل اللوحة --- */

.jl-repeat {
    padding: var(--space-4) var(--space-5) var(--space-2);
    background: var(--surface-2);
    border: var(--hairline);
    border-radius: var(--radius);
}

.jl-repeat + .jl-repeat {
    margin-block-start: var(--space-3);
}

.jl-repeat__index {
    display: block;
    margin-block-end: var(--space-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --- الحقول المجمّعة القديمة (لوحة صاحب العمل) --- */

.jl-fieldset {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-fieldset legend {
    padding: 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* --- السيرة الذاتية --- */

.jl-cv-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius);
    max-width: none;
    font-size: 14.5px;
    color: var(--ink);
}

.jl-cv-current a {
    color: var(--accent-text);
    font-weight: 500;
}

.jl-cv-current a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   هيكل لوحة الحساب
   -------------------------------------------------------------------------- */

.jl-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 0 var(--space-8);
}

@media (min-width: 900px) {
    .jl-account {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--space-7);
        padding-block-start: var(--space-4);
    }
}

.jl-account__head {
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-4);
    border-block-end: var(--hairline);
}

.jl-account__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.jl-account__lede {
    margin: var(--space-2) 0 0;
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* --- التنقّل الجانبي --- */

/*
 * على الشاشة الضيّقة صفّ أفقيّ يُسحب — لا يختفي التنقّل ولا يبتلع الشاشة.
 * الهوامش السالبة تجعل الصفّ يلامس حافّتي الشاشة فيبدو السحب ممكنًا.
 */
.jl-account__nav {
    margin-inline: calc(var(--space-5) * -1);
    border-block-end: var(--hairline);
}

.jl-account__nav ul {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0 var(--space-5);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

.jl-account__nav li {
    flex: 0 0 auto;
}

.jl-account__nav a {
    display: block;
    padding: var(--space-3) var(--space-3);
    border-block-end: 2px solid transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 14.5px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.jl-account__nav a:hover {
    color: var(--ink);
}

/* أكبر قليلًا من نصّ البند كي تُقرأ رمزًا لا زخرفة. */
.jl-account__nav .jl-icon {
    font-size: 16px;
}

/* الصفحة الجارية: خطّ مميّز تحتها، كما في التنقّل الأعلى. */
.jl-account__nav a[aria-current='page'] {
    border-block-end-color: var(--accent);
    color: var(--accent-text);
    font-weight: 700;
}

/* البند الجاري: الأيقونة ترث لونه وتستعيد عتمتها كاملةً فتؤكّد الموضع. */
.jl-account__nav a[aria-current='page'] .jl-icon {
    opacity: 1;
}

.jl-account__nav .jl-account__logout {
    color: var(--muted);
}

.jl-account__nav .jl-account__logout:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 900px) {
    .jl-account__nav {
        position: sticky;
        inset-block-start: var(--space-5);
        margin-inline: 0;
        padding: var(--space-2);
        background: var(--surface);
        border: var(--hairline);
        border-radius: var(--radius-lg);
    }

    .jl-account__nav ul {
        display: block;
        padding: 0;
        overflow: visible;
    }

    .jl-account__nav a {
        padding: var(--space-3) var(--space-4);
        border-block-end: 0;
        border-inline-start: 2px solid transparent;
        border-radius: var(--radius);
    }

    .jl-account__nav a[aria-current='page'] {
        background: var(--accent-soft);
        border-inline-start-color: var(--accent);
    }

    /* الخروج ليس قسمًا من الأقسام — خطّ رفيع يفصله عنها. */
    .jl-account__nav li:last-child {
        margin-block-start: var(--space-2);
        padding-block-start: var(--space-2);
        border-block-start: var(--hairline);
    }
}

/* --------------------------------------------------------------------------
   لوحة القيادة: اكتمال الملف والعدّادات
   -------------------------------------------------------------------------- */

.jl-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    margin: 0 0 var(--space-5);
    padding: var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

@media (min-width: 700px) {
    .jl-progress {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--space-7);
    }
}

.jl-progress__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.jl-progress__title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.jl-progress__value {
    margin: 0;
    max-width: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(46px, 8vw, 66px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.jl-progress__value--sm {
    font-size: 26px;
    letter-spacing: -0.02em;
}

.jl-progress__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* شريط بصريّ يكرّر ما قاله الرقم — لذلك يُخفى عن قارئ الشاشة. */
.jl-meter {
    block-size: 6px;
    border-radius: 999px;
    background: var(--bg);
    border: var(--hairline);
    overflow: hidden;
}

.jl-meter__fill {
    display: block;
    block-size: 100%;
    background: var(--accent);
}

.jl-progress__next {
    margin: 0;
    max-width: 56ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.jl-progress__next a {
    color: var(--accent-text);
    font-weight: 700;
    white-space: nowrap;
}

.jl-progress__next a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-progress__done {
    margin: 0;
    font-size: 15.5px;
    color: var(--ink-soft);
}

/* علامة الحالة — مكتمل أو ناقص — تأخذ لون الهوية المقروء على السطح الفاتح. */
.jl-progress__next .jl-icon,
.jl-progress__done .jl-icon,
.jl-profile-score .jl-progress__title .jl-icon {
    color: var(--accent-text);
    opacity: 1;
}

.jl-profile-score .jl-progress__title .jl-icon {
    font-size: 15px;
}

/* شريط الاكتمال المختصر أعلى نموذج الملف — يذكّر بالرقم ولا يزاحم النموذج. */
.jl-profile-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-profile-score .jl-meter {
    flex: 1 1 160px;
}

/* --- بطاقات العدّ --- */

.jl-statcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jl-statcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    block-size: 100%;
    padding: var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.jl-statcard:hover {
    border-color: var(--accent);
    box-shadow: var(--lift);
    transform: translateY(-2px);
}

/*
 * قرص فوق الرقم بنفس مقاس أقراص بطاقات الرئيسية ونصف قطرها: بطاقة
 * اللوحة تُقرأ من العائلة ذاتها لا كعنصر غريب.
 */
.jl-statcard__icon {
    display: inline-flex;
    align-self: start;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    margin-block-end: var(--space-2);
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent-text);
    box-shadow: var(--sheen);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.jl-statcard__icon .jl-icon {
    inline-size: 20px;
    block-size: 20px;
    margin-inline-end: 0;
    opacity: 1;
}

/* البطاقة كلّها محفّز واحد، فالقرص يمتلئ بالهوية عند تمرير المؤشّر عليها. */
.jl-statcard:hover .jl-statcard__icon {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: var(--accent-ink);
}

.jl-statcard__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.jl-statcard:hover .jl-statcard__label {
    color: var(--accent-text);
}

.jl-statcard__label {
    font-size: 14px;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   الجداول والقوائم
   -------------------------------------------------------------------------- */

.jl-panel--flush {
    padding: 0;
    overflow: hidden;
}

/* الجدول أعرض من الشاشة أحيانًا — يُسحب داخل صندوقه لا تُسحب الصفحة. */
.jl-table-wrap {
    overflow-x: auto;
}

.jl-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.jl-table th,
.jl-table td {
    padding: var(--space-4) var(--space-5);
    border-block-end: var(--hairline);
    text-align: start;
    /* base.css يجعل خلايا الجداول أحاديّة المسافة، وهي لاتينيّة فيتشوّه العربيّ. */
    font-family: var(--font-ui);
    vertical-align: baseline;
}

.jl-table thead th {
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
}

.jl-table tbody tr:last-child td {
    border-block-end: 0;
}

.jl-table tbody tr:hover {
    background: var(--surface-2);
}

.jl-table__job {
    font-weight: 500;
    color: var(--ink);
}

.jl-table__job:hover {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-table__date {
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* حالة الطلب: قرص هادئ يُقرأ حالةً لا كلمة سائبة. */
.jl-pill {
    display: inline-block;
    padding: 2px var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
    white-space: nowrap;
}

/* --- الحالة الفارغة --- */

.jl-empty-panel {
    padding: var(--space-8) var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    text-align: center;
}

.jl-empty-panel .jl-empty__line {
    margin: 0 0 var(--space-2);
    max-width: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
}

.jl-empty-panel__note {
    margin: 0 auto var(--space-5);
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* --- المحفوظات --- */

/* الفجوة بين بندين أوسع من الفجوة بين البطاقة وزرّها، فيُقرأ الزرّ تابعًا لها. */
.jl-saved {
    display: grid;
    gap: var(--space-6);
}

.jl-saved__item {
    display: grid;
    gap: var(--space-2);
}

/* البطاقة تملأ العرض، وزرّ الإزالة تحتها بحجمه لا بحجمها. */
.jl-saved__item .jl-save {
    margin: 0;
    justify-self: start;
}

.jl-saved__item .jl-save__button {
    inline-size: auto;
}

/* --- التنبيهات --- */

.jl-alerts {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jl-alerts__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius);
}

.jl-alerts__label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.jl-alerts__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    max-width: none;
}

.jl-alerts__form select,
.jl-alerts__form button {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.jl-alerts__form button:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

/*
 * الحذف ليس خطأً — فلا أحمر له. يبقى هادئًا حتى يُقصد.
 */
.jl-alerts__form .jl-alerts__delete {
    border-color: transparent;
    color: var(--muted);
}

.jl-alerts__form .jl-alerts__delete:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   أجزاء مشتركة تعيش على صفحات أخرى
   -------------------------------------------------------------------------- */

.jl-save {
    margin: var(--space-3) 0 0;
}

.jl-save__button,
.jl-save-search button {
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.jl-save__button:hover,
.jl-save-search button:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.jl-save__button[aria-pressed='true'] {
    border-color: var(--accent);
    color: var(--accent-text);
}

.jl-save-search {
    margin: var(--space-4) 0 0;
}

.jl-apply-form {
    margin: 0 0 var(--space-3);
}

.jl-apply-form .jl-apply {
    inline-size: 100%;
}

.jl-apply__done {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent-text);
    font-size: 14px;
}

/* --- الإبلاغ وصفحة الحماية --- */

.jl-report {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--hairline);
    font-size: 14px;
}

.jl-report summary {
    cursor: pointer;
    color: var(--muted);
}

.jl-report summary:hover {
    color: var(--accent-text);
}

/*
 * غلاف الصفحة يعيش في pages.css مع سائر أغلفة الصفحات، لا هنا.
 * كان معرَّفًا في الملفّين بعرضين مختلفين، فيقرّر ترتيبُ التحميل أيّهما
 * يفوز — وفاز الأضيق، فبدأت الصفحة عند حافّة لا يبدأ منها شيء غيرها.
 * ما يبقى هنا داخلها لا غلافها.
 */

.jl-protect__title {
    margin: 0 0 var(--space-4);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.2;
}

.jl-protect__lede {
    margin: 0 0 var(--space-5);
    font-size: 17px;
    line-height: 1.7;
}

.jl-protect__section {
    margin-bottom: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--hairline);
}

.jl-protect__section h2 {
    margin: 0 0 var(--space-3);
    font-size: 18px;
    font-weight: 700;
}

.jl-protect__list {
    margin: 0;
    padding-inline-start: var(--space-5);
    line-height: 1.8;
}

.jl-protect__list li + li {
    margin-top: var(--space-3);
}

.jl-results__intro {
    margin: var(--space-2) 0 0;
    max-width: var(--measure);
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* --- المعاينة قبل الإرسال --- */

.jl-preview {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

.jl-preview__title {
    margin: 0 0 var(--space-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.jl-preview__note {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: var(--hairline);
    font-size: 14px;
    color: var(--muted);
}