/* =====================================================================
   workdu-ui.css — WorkDu candidate design system
   ---------------------------------------------------------------------
   THE ONE STYLESHEET. Every token, button, card, badge, form control and
   list row used by the candidate pages lives here. A page's job is to
   compose these classes, not to invent new ones in an inline <style>.

   LOAD ORDER (frontend/layouts/app.blade.php, in <head>):
       partials/styles.blade.php   ...ends with linkedin-theme.css
       naukri-candidate.css        (candidate pages only)
   ->  workdu-ui.css               THIS FILE
       @stack('page-css')          a page may still override

   WHY THERE IS ALMOST NO !important IN HERE
   -----------------------------------------
   Every class below is a NEW name (`wds-*`). linkedin-theme.css targets
   `.btn`, `.card`, `.badge` and bare elements — it has no rule that can
   match `.wds-btn`, so buttons, cards, badges and chips win on source
   order alone, with no specificity hacks.

   The ONE exception is form controls. The theme carries
       body.li-app input[type="text"] { border: ... !important }
   at specificity (0,2,1). A plain `.wds-input` is (0,1,0) and loses even
   with !important. So the five form rules below are written as
       body.li-app input.wds-input      -> (0,2,2)
   and carry !important on exactly the five properties the theme forces:
   background, border, border-radius, color, box-shadow. Nothing else.

   Every colour here clears WCAG AA on its intended background.
   Author: UI system pass, Sept 2026.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   Declared on body so they beat anything inherited from html, matching
   how linkedin-theme.css already works.
   ===================================================================== */
body.li-app {
    /* Brand — WorkDu blue, from the approved design sample. */
    --wds-blue:        #1875e5;
    --wds-blue-hover:  #1466cc;
    --wds-blue-active: #0f52a8;
    --wds-blue-tint:   #eef5fe;
    --wds-blue-100:    #dbe9fd;
    --wds-ring:        rgba(24, 117, 229, .30);

    /* Surfaces */
    --wds-bg:        #f3f6fb;
    --wds-surface:   #ffffff;
    --wds-surface-2: #f7f9fc;
    --wds-surface-3: #eef2f8;

    /* Ink. These were one black at three opacities; they are now three solid
       greys biased a few degrees toward the brand hue, so they never go muddy
       next to the blue and they stay stable over tinted surfaces instead of
       compositing differently on each one. */
    --wds-ink:   #0d1526;
    --wds-ink-2: #4c586e;
    --wds-ink-3: #8792a8;

    /* Lines */
    --wds-line:      #e4eaf3;
    --wds-line-soft: #eef2f8;
    --wds-line-mid:  #d3dcea;

    /* Semantic — separate from brand blue, never used decoratively. Each now
       carries a matching tint AND a line colour, so a status pill can be filled
       and outlined from the same family instead of borrowing the neutral line. */
    --wds-green:        #0b8058;
    --wds-green-hover:  #096a49;
    --wds-green-tint:   #e7f6ef;
    --wds-green-line:   #bfe6d5;
    --wds-amber:        #a76a06;
    --wds-amber-tint:   #fdf4e4;
    --wds-amber-line:   #f0dcae;
    --wds-red:          #bf3529;
    --wds-red-hover:    #9d2b21;
    --wds-red-tint:     #fdecea;
    --wds-red-line:     #f5c9c4;
    --wds-violet:       #5a3f9e;   /* AI / ATS features only */
    --wds-violet-tint:  #efeafb;
    --wds-violet-line:  #d6c9f2;

    /* Neutral fills */
    --wds-fill:       #eef2f8;
    --wds-fill-hover: #e2e9f4;

    /* Radius — three values, no others */
    --wds-r-sm: 8px;    /* inputs, small tiles */
    --wds-r:    14px;   /* every card */
    --wds-pill: 999px;  /* buttons, badges, chips, avatars */

    /* Elevation — cards get NONE. Shadow means "floats above the page". */
    /* Cards sit on the page rather than being drawn onto it: a hairline alone
       read as flat and washed out next to the rest of the product. Two layers —
       a tight contact shadow and a wide soft one — so the lift survives both the
       white surface and the warm canvas behind it. */
    --wds-shadow-brand: 0 2px 6px rgba(24, 117, 229, .26), 0 8px 18px rgba(24, 117, 229, .18);
    --wds-shadow-card:  0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
    --wds-shadow-lift:  0 2px 6px rgba(16, 24, 40, .06), 0 12px 24px rgba(16, 24, 40, .08);
    --wds-shadow-pop:   0 4px 12px rgba(0, 0, 0, .08);   /* dropdowns   */
    --wds-shadow-modal: 0 8px 28px rgba(0, 0, 0, .12);   /* modals      */

    /* Spacing — 4px base, 8px rhythm */
    --wds-s1: 4px;  --wds-s2: 8px;  --wds-s3: 12px;
    --wds-s4: 16px; --wds-s5: 24px; --wds-s6: 32px;

    --wds-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Display face. Headings, page titles and figures are set in it; body copy,
       labels and controls stay in Inter. Both are loaded by the layout. */
    --wds-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* =====================================================================
   2. BUTTONS
   Six variants, three sizes, five states. One primary per screen area.
   ===================================================================== */
body.li-app .wds-btn {
    --wds-btn-h: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--wds-btn-h);
    padding: 0 16px;
    margin: 0;
    font-family: var(--wds-font);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    /* The sample's buttons are 8px rounded rectangles, not pills. The pill
       survives as an opt-in modifier (.wds-btn--pill) for the few places that
       genuinely want one. */
    border-radius: var(--wds-r-sm);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .17s ease, color .17s ease,
                border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}
body.li-app .wds-btn:hover { text-decoration: none; }
body.li-app .wds-btn:active { transform: translateY(1px); }
body.li-app .wds-btn--pill { border-radius: var(--wds-pill); }
body.li-app .wds-btn > svg,
body.li-app .wds-btn > i { width: 16px; height: 16px; flex: none; font-size: 16px; }

/* Focus — 2px ring with a 2px surface gap. The site currently has none. */
body.li-app .wds-btn:focus { outline: none; }
body.li-app .wds-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--wds-surface), 0 0 0 4px var(--wds-ring);
}

/* --- Variants ---
   The primary is the only one that carries a shadow, and the only one that
   lifts: that is what makes it read as THE action in a row of controls. --- */
body.li-app .wds-btn--primary {
    background: var(--wds-blue);
    border-color: var(--wds-blue);
    color: #fff;
    box-shadow: var(--wds-shadow-brand);
}
body.li-app .wds-btn--primary:hover {
    background: var(--wds-blue-hover);
    border-color: var(--wds-blue-hover);
    color: #fff;
    box-shadow: 0 4px 10px rgba(24, 117, 229, .30), 0 12px 26px rgba(24, 117, 229, .20);
    transform: translateY(-1px);
}
body.li-app .wds-btn--primary:active { background: var(--wds-blue-active); transform: translateY(1px); }

body.li-app .wds-btn--secondary {
    background: var(--wds-surface);
    color: var(--wds-blue);
    border-color: var(--wds-blue);
}
body.li-app .wds-btn--secondary:hover {
    background: var(--wds-blue-tint);
    border-color: var(--wds-blue-hover);
    color: var(--wds-blue-active);
}

/* Ghost — the everyday neutral action (View details, Cancel, icon buttons).
   --tertiary is the same thing under its old name; both are kept so existing
   markup keeps working and new markup can use the sample's name. */
body.li-app .wds-btn--ghost,
body.li-app .wds-btn--tertiary {
    background: var(--wds-surface);
    color: var(--wds-ink-2);
    border-color: var(--wds-line);
}
body.li-app .wds-btn--ghost:hover,
body.li-app .wds-btn--tertiary:hover {
    background: var(--wds-surface-2);
    border-color: var(--wds-ink-3);
    color: var(--wds-ink);
}

body.li-app .wds-btn--subtle { background: var(--wds-fill); color: var(--wds-ink-2); }
body.li-app .wds-btn--subtle:hover { background: var(--wds-fill-hover); color: var(--wds-ink); }

/* Text action — no chrome at all, for 'See all jobs ->' style links. */
body.li-app .wds-btn--link {
    background: transparent;
    border-color: transparent;
    color: var(--wds-blue);
    padding-inline: 6px;
    box-shadow: none;
}
body.li-app .wds-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Danger is tinted, not outlined: destructive actions should read as warm
   rather than as a second primary competing with the real one. */
body.li-app .wds-btn--danger {
    background: var(--wds-red-tint);
    color: var(--wds-red);
    border-color: var(--wds-red-line);
}
body.li-app .wds-btn--danger:hover { background: var(--wds-red); border-color: var(--wds-red); color: #fff; }

body.li-app .wds-btn--success { background: var(--wds-green); border-color: var(--wds-green); color: #fff; }
body.li-app .wds-btn--success:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }

/* On a coloured surface — the hero. A blue primary on blue is invisible, so
   there the roles invert: the primary goes white and the rest are outlines. */
body.li-app .wds-btn--white {
    background: #fff;
    border-color: #fff;
    color: var(--wds-blue-active);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
body.li-app .wds-btn--white:hover { background: #f2f7ff; color: var(--wds-blue-active); transform: translateY(-1px); }

body.li-app .wds-btn--outline-white {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.li-app .wds-btn--outline-white:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- States --- */
body.li-app .wds-btn:disabled,
body.li-app .wds-btn--disabled,
body.li-app .wds-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Loading keeps the button's exact width so the row never jumps. */
body.li-app .wds-btn--loading {
    position: relative;
    color: transparent !important;   /* hides the label, keeps its box */
    pointer-events: none;
}
body.li-app .wds-btn--loading::after {
    content: "";
    position: absolute;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: wd-spin .6s linear infinite;
}
body.li-app .wds-btn--secondary.wds-btn--loading::after,
body.li-app .wds-btn--tertiary.wds-btn--loading::after,
body.li-app .wds-btn--subtle.wds-btn--loading::after {
    border-color: var(--wds-ring);
    border-top-color: var(--wds-blue);
}
@keyframes wd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.li-app .wds-btn--loading::after { animation-duration: 2s; }
    body.li-app .wds-btn { transition: none; }
}

/* --- Sizes --- */
body.li-app .wds-btn--sm { --wds-btn-h: 30px; font-size: 12.5px; padding-inline: 13px; border-radius: 7px; }
body.li-app .wds-btn--sm > svg,
body.li-app .wds-btn--sm > i { width: 14px; height: 14px; font-size: 14px; }
body.li-app .wds-btn--lg { --wds-btn-h: 44px; font-size: 15px; padding-inline: 24px; border-radius: var(--wds-r-sm); }
body.li-app .wds-btn--block { display: flex; width: 100%; }

body.li-app .wds-btn--icon {
    --wds-btn-h: 34px;
    width: 34px;
    padding: 0;
    /* No border-radius here on purpose: an icon button is the same 8px rounded
       square as the text button beside it. Add --pill for a round one. */
}
body.li-app .wds-btn--icon.wds-btn--sm { --wds-btn-h: 30px; width: 30px; }
body.li-app .wds-btn--icon.wds-btn--lg { --wds-btn-h: 44px; width: 44px; }

/* Button groups keep an 8px gap and wrap rather than overflow. */
body.li-app .wds-btnrow { display: flex; flex-wrap: wrap; gap: var(--wds-s2); align-items: center; }

/* =====================================================================
   3. CARDS
   Flat white, 1px hairline, 8px radius, NO shadow. This single rule is
   the biggest visual change on the site.
   ===================================================================== */
body.li-app .wds-card {
    background: var(--wds-surface);
    border: 1px solid var(--wds-line);
    border-radius: var(--wds-r);
    box-shadow: var(--wds-shadow-card);
}
body.li-app .wds-card__head {
    display: flex;
    align-items: center;
    gap: var(--wds-s3);
    padding: 14px var(--wds-s4);
    border-bottom: 1px solid var(--wds-line);
}
body.li-app .wds-card__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--wds-font-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--wds-ink);
}
body.li-app .wds-card__body { padding: var(--wds-s4); }
body.li-app .wds-card__body--flush { padding: 4px var(--wds-s4); }
body.li-app .wds-card__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--wds-s2);
    padding: 10px var(--wds-s4);
    border-top: 1px solid var(--wds-line);
}
/* "See all" / "View all" link in a card header */
body.li-app .wds-card__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--wds-blue);
    text-decoration: none;
    white-space: nowrap;
}
body.li-app .wds-card__link:hover { color: var(--wds-blue-hover); text-decoration: underline; }

/* Section label — 11/700 caps, the only uppercase in the system */
body.li-app .wds-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wds-ink-3);
    margin: 0 0 var(--wds-s2);
}

/* Page title + subtitle */
body.li-app .wds-pagehead { margin-bottom: var(--wds-s4); }
body.li-app .wds-pagehead__title {
    margin: 0;
    font-family: var(--wds-font-display);
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--wds-ink);
}
body.li-app .wds-pagehead__sub { margin: 2px 0 0; font-size: 13px; color: var(--wds-ink-2); }

/* =====================================================================
   4. BADGES / STATUS PILLS
   The dot carries the state as well as the fill, so it still reads for
   colour-blind users and in a screenshot.
   ===================================================================== */
body.li-app .wds-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.45;
    border: 1px solid transparent;
    border-radius: var(--wds-pill);
    background: var(--wds-fill);
    color: var(--wds-ink-2);
    white-space: nowrap;
}
body.li-app .wds-badge--lg { padding: 5px 12px; font-size: 12.5px; }
/* Outline-only, for a neutral count or a plain tag. */
body.li-app .wds-badge--line { background: transparent; border-color: var(--wds-line); color: var(--wds-ink-2); }
body.li-app .wds-badge__dot {
    width: 6px; height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
body.li-app .wds-badge--neutral { background: var(--wds-fill);        color: var(--wds-ink-2); border-color: transparent; }
body.li-app .wds-badge--info    { background: var(--wds-blue-tint);   color: var(--wds-blue);   border-color: var(--wds-blue-100); }
body.li-app .wds-badge--success { background: var(--wds-green-tint);  color: var(--wds-green);  border-color: var(--wds-green-line); }
body.li-app .wds-badge--warn    { background: var(--wds-amber-tint);  color: var(--wds-amber);  border-color: var(--wds-amber-line); }
body.li-app .wds-badge--danger  { background: var(--wds-red-tint);    color: var(--wds-red);    border-color: var(--wds-red-line); }
body.li-app .wds-badge--violet  { background: var(--wds-violet-tint); color: var(--wds-violet); border-color: var(--wds-violet-line); }

/* =====================================================================
   5. CHIPS — tappable filters and multi-select values
   ===================================================================== */
body.li-app .wds-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
body.li-app .wds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    font-family: var(--wds-font);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--wds-ink-2);
    background: var(--wds-surface);
    border: 1px solid var(--wds-line-mid);
    border-radius: var(--wds-pill);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.li-app .wds-chip:hover { border-color: var(--wds-ink-3); color: var(--wds-ink); }
body.li-app .wds-chip--on,
body.li-app .wds-chip[aria-pressed="true"] {
    background: var(--wds-blue-tint);
    border-color: var(--wds-blue);
    color: var(--wds-blue);
    font-weight: 600;
}
body.li-app .wds-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--wds-surface), 0 0 0 4px var(--wds-ring);
}

/* =====================================================================
   6. FORM CONTROLS
   The five rules below carry !important ONLY because linkedin-theme.css
   forces bare input/select/textarea/label at (0,2,1) with !important.
   Written as element+class -> (0,2,2), so they win on specificity.
   See the file header.
   ===================================================================== */
body.li-app .wds-field { display: flex; flex-direction: column; gap: 6px; }
body.li-app .wds-field + .wds-field { margin-top: var(--wds-s4); }
body.li-app .wds-formgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--wds-s4) var(--wds-s4);
}
body.li-app .wds-formgrid .wds-field + .wds-field { margin-top: 0; }
body.li-app .wds-field--full { grid-column: 1 / -1; }

body.li-app label.wds-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 650 !important;
    color: var(--wds-ink) !important;
}
body.li-app .wds-label .wds-req,
body.li-app label.wds-label .wds-req { color: var(--wds-red); }

body.li-app input.wds-input,
body.li-app select.wds-select,
body.li-app textarea.wds-textarea {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-family: var(--wds-font);
    font-size: 14px;
    line-height: 1.4;
    background: var(--wds-surface) !important;
    border: 1px solid var(--wds-line-mid) !important;
    border-radius: var(--wds-r-sm) !important;
    color: var(--wds-ink) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.li-app textarea.wds-textarea {
    height: auto;
    min-height: 88px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
body.li-app input.wds-input::placeholder,
body.li-app textarea.wds-textarea::placeholder { color: var(--wds-ink-3); opacity: 1; }

body.li-app input.wds-input:hover,
body.li-app select.wds-select:hover,
body.li-app textarea.wds-textarea:hover { border-color: var(--wds-ink-3) !important; }

/* A 3px tinted ring rather than a 1px hard edge: it reads as focus at a
   glance and does not shift the field's box by a pixel. */
body.li-app input.wds-input:focus,
body.li-app select.wds-select:focus,
body.li-app textarea.wds-textarea:focus {
    outline: none !important;
    border-color: var(--wds-blue) !important;
    box-shadow: 0 0 0 3px var(--wds-ring) !important;
}

body.li-app select.wds-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='rgba(0,0,0,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

body.li-app .wds-hint { font-size: 12px; color: var(--wds-ink-3); }

/* Errors sit under the field and say how to fix it. */
body.li-app .wds-field--err input.wds-input,
body.li-app .wds-field--err select.wds-select,
body.li-app .wds-field--err textarea.wds-textarea,
body.li-app input.wds-input.wds-input--err,
body.li-app select.wds-select.wds-input--err,
body.li-app textarea.wds-textarea.wds-input--err {
    border-color: var(--wds-red) !important;
}
body.li-app .wds-field--err input.wds-input:focus,
body.li-app .wds-field--err select.wds-select:focus,
body.li-app .wds-field--err textarea.wds-textarea:focus,
body.li-app input.wds-input.wds-input--err:focus,
body.li-app select.wds-select.wds-input--err:focus,
body.li-app textarea.wds-textarea.wds-input--err:focus {
    box-shadow: 0 0 0 3px rgba(191, 53, 41, .22) !important;
}
body.li-app .wds-err {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--wds-red);
}
body.li-app .wds-err svg { width: 13px; height: 13px; flex: none; }

/* --- Toggle switch --- */
body.li-app .wds-switch { position: relative; width: 40px; height: 22px; flex: none; display: inline-block; }
body.li-app .wds-switch input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
body.li-app .wds-switch__track {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .22);
    border-radius: var(--wds-pill);
    transition: background-color .18s ease;
    pointer-events: none;
}
body.li-app .wds-switch__knob {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    transition: transform .18s ease;
    pointer-events: none;
}
body.li-app .wds-switch input:checked ~ .wds-switch__track { background: var(--wds-green); }
body.li-app .wds-switch input:checked ~ .wds-switch__knob  { transform: translateX(18px); }
body.li-app .wds-switch input:focus-visible ~ .wds-switch__track { box-shadow: 0 0 0 3px var(--wds-ring); }
body.li-app .wds-switchrow {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--wds-ink);
}

/* --- Range with a value bubble ABOVE the track ---
   The old markup put the value chip on the rail, where it sat on top of
   its own handle on Jobs and Job Preferences. */
body.li-app .wds-range { position: relative; padding-top: 26px; }
body.li-app .wds-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .14) !important;
    border: 0 !important;
    border-radius: var(--wds-pill) !important;
    box-shadow: none !important;
    outline: none;
}
body.li-app .wds-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--wds-blue);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--wds-blue);
    cursor: pointer;
}
body.li-app .wds-range input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--wds-blue);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--wds-blue);
    cursor: pointer;
}
body.li-app .wds-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--wds-blue), 0 0 0 5px var(--wds-ring);
}
body.li-app .wds-range__bubble {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: var(--wds-ink);
    border-radius: var(--wds-pill);
    white-space: nowrap;
    pointer-events: none;
}
body.li-app .wds-range__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--wds-ink-3);
}

/* =====================================================================
   7. AVATARS & COMPANY LOGOS
   ===================================================================== */
body.li-app .wds-avatar {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #dfe3e8;
}
body.li-app .wds-avatar--sm { width: 32px; height: 32px; }
body.li-app .wds-avatar--lg { width: 48px; height: 48px; }
body.li-app .wds-avatar--initial {
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
    color: #fff;
    background: var(--wds-blue);
}
body.li-app .wds-logo {
    width: 44px; height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--wds-surface);
    border: 1px solid var(--wds-line);
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}
body.li-app .wds-logo img { width: 100%; height: 100%; object-fit: contain; }
body.li-app .wds-logo--initial { background: var(--wds-blue); border-color: transparent; }
body.li-app .wds-logo--sm { width: 38px; height: 38px; font-size: 12px; }
/* Identity tiles are circles across the whole product — people and
   employers alike (see components/company-avatar.blade.php). Square is
   available for anything that is not an identity, e.g. a file type. */
body.li-app .wds-logo--circle { border-radius: 50%; }
/* Three tones, rotated by initial so a column of tiles is not one flat blue
   wall. Purely decorative — never used to mean anything. */
body.li-app .wds-logo--alt  { background: var(--wds-amber-tint); color: var(--wds-amber); }
body.li-app .wds-logo--alt2 { background: var(--wds-green-tint); color: var(--wds-green); }

/* =====================================================================
   8. STAT TILES
   Number at 26/700 with tabular figures, so 7 and 11 are the same width
   and a column of tiles stays straight.
   ===================================================================== */
body.li-app .wds-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--wds-s3);
}
body.li-app .wds-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 15px;
    background: var(--wds-surface);
    border: 1px solid var(--wds-line);
    border-radius: var(--wds-r);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--wds-shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.li-app a.wds-stat:hover {
    border-color: var(--wds-line-mid);
    box-shadow: var(--wds-shadow-lift);
    transform: translateY(-2px);
    text-decoration: none;
}
body.li-app .wds-stat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wds-s2);
}
body.li-app .wds-stat__icon {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--wds-blue-tint);
    color: var(--wds-blue);
}
/* A row of four identical blue chips gives the eye nothing to sort by. These
   let a tile carry its own colour so "applied" and "saved" are told apart at a
   glance. Blue stays the default, so a tile that says nothing still fits. */
body.li-app .wds-stat__icon--amber  { background: rgba(217, 119,   6, .10); color: #b45309; }
body.li-app .wds-stat__icon--green  { background: rgba( 22, 163,  74, .10); color: #15803d; }
body.li-app .wds-stat__icon--violet { background: rgba(124,  58, 237, .10); color: #6d28d9; }
body.li-app .wds-stat__icon--rose   { background: rgba(219,  39, 119, .10); color: #be185d; }
body.li-app .wds-stat__icon--neutral { background: var(--wds-fill); color: var(--wds-ink-2); }
body.li-app .wds-stat__icon svg,
body.li-app .wds-stat__icon i { width: 19px; height: 19px; font-size: 19px; }
body.li-app .wds-stat__num {
    font-family: var(--wds-font-display);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--wds-ink);
}
body.li-app .wds-stat__lbl { font-size: 12.5px; color: var(--wds-ink-2); }
body.li-app .wds-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wds-green);
}
body.li-app .wds-stat__delta--down { color: var(--wds-red); }
body.li-app .wds-stat__delta svg { width: 11px; height: 11px; }

/* =====================================================================
   9. LIST ROWS
   One row component behind Recommended jobs, Recent applications,
   Applied jobs, Favourites, Network and Interviews.
   ===================================================================== */
body.li-app .wds-row {
    display: flex;
    align-items: center;
    gap: var(--wds-s3);
    padding: 11px 0;
    border-bottom: 1px solid var(--wds-line);
}
body.li-app .wds-row:last-child { border-bottom: 0; }
body.li-app .wds-row__main { flex: 1; min-width: 0; }
body.li-app .wds-row__title {
    margin: 0 0 2px;
    font-family: var(--wds-font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wds-ink);
}
body.li-app a.wds-row__title:hover { color: var(--wds-blue); text-decoration: none; }

/* A title that happens to be a link — job titles in a list, a company name,
   a candidate's name. Ink first, blue on hover, so a page of 24 of them does
   not read as a wall of blue.

   The class also carries a second job: linkedin-theme.css colours every plain
   <a> at specificity (0,6,2), which no component rule can outrank. That rule
   now skips anything matching [class*="wds-"], so wearing this class is what
   lets the colour below apply at all. */
body.li-app a.wds-linktext { color: var(--wds-ink); text-decoration: none; }
body.li-app a.wds-linktext:hover { color: var(--wds-blue); text-decoration: underline; }
body.li-app .wds-row__meta {
    font-size: 12.5px;
    color: var(--wds-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.li-app .wds-row__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex: none;
}
body.li-app .wds-row__actions { display: flex; align-items: center; gap: var(--wds-s2); flex: none; }
/* .wds-row__side is flex:none and the badge inside it is white-space:nowrap,
   so an employer-named ATS stage ("Waiting for hiring manager feedback")
   pushed the Recent Applications row wider than its card: the only
   shrinkable thing in the row was the title column, which collapsed to
   nothing first and then the row overflowed anyway. The side now has a
   ceiling and its badge truncates. */
body.li-app .wds-row__side { min-width: 0; max-width: 45%; }
body.li-app .wds-row__side .wds-badge {
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Standalone card-row (Applied jobs, Favourites) */
body.li-app .wds-listcard {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px var(--wds-s4);
    background: var(--wds-surface);
    border: 1px solid var(--wds-line);
    border-radius: var(--wds-r);
}
body.li-app .wds-listcard + .wds-listcard { margin-top: var(--wds-s3); }

/* Meta line — icon + text pairs, wraps cleanly */
body.li-app .wds-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--wds-ink-3);
}
body.li-app .wds-meta > span { display: inline-flex; align-items: center; gap: 5px; }
/* text-overflow: ellipsis applies to BLOCK containers only, so on the
   inline-flex span above it is inert: .wds-truncate's overflow:hidden still
   clipped, but mid-glyph and with no ellipsis to show for it. The company
   name on the dashboard's Recommended rows was cut in the middle of a letter
   while the job title one line above ellipsised properly -- that line is an
   anchor carrying an inline display:block, which is what made it work.
   Block here, with the icon's gap restored as a margin since flex gap does
   not apply to a block box. */
body.li-app .wds-meta > span.wds-truncate { display: block; }
body.li-app .wds-meta > span.wds-truncate > i,
body.li-app .wds-meta > span.wds-truncate > svg { margin-right: 5px; vertical-align: -2px; }
body.li-app .wds-meta svg,
body.li-app .wds-meta i { width: 14px; height: 14px; font-size: 14px; opacity: .65; flex: none; }
body.li-app .wds-meta--sm { font-size: 12.5px; }

/* =====================================================================
   10. PROGRESS & CHECKLIST
   ===================================================================== */
body.li-app .wds-progress {
    height: 6px;
    background: rgba(0, 0, 0, .08);
    border-radius: var(--wds-pill);
    overflow: hidden;
}
body.li-app .wds-progress__fill {
    height: 100%;
    background: var(--wds-blue);
    border-radius: var(--wds-pill);
    transition: width .4s ease;
}
body.li-app .wds-progress__fill--green { background: var(--wds-green); }
body.li-app .wds-progress__fill--amber { background: var(--wds-amber); }

/* Fixed 4 columns, not auto-fit: the profile checklist is 8 items, and
   auto-fit packed 6 onto the first row and left 2 orphaned on the second.
   Four columns fills 4x2 exactly at every desktop width. */
body.li-app .wds-checkgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
/* The content column is col-lg-9 (~870px at 1200px, full width below lg),
   so four 150px+ tracks still fit down to a 768px viewport. Below that the
   longest label ("Work Experience") no longer clears its track. */
@media (max-width: 767.98px) {
    body.li-app .wds-checkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.li-app .wds-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--wds-ink-2);
    border: 1px solid var(--wds-line);
    border-radius: var(--wds-r-sm);
    text-decoration: none;
}
body.li-app .wds-check svg,
body.li-app .wds-check i { width: 14px; height: 14px; font-size: 14px; flex: none; }
body.li-app .wds-check--done {
    color: var(--wds-ink);
    background: var(--wds-green-tint);
    border-color: rgba(1, 117, 79, .25);
}
body.li-app .wds-check--done svg,
body.li-app .wds-check--done i { color: var(--wds-green); }
body.li-app .wds-check--todo svg,
body.li-app .wds-check--todo i { color: var(--wds-ink-3); }
body.li-app a.wds-check--todo:hover { border-color: var(--wds-blue); color: var(--wds-blue); }

/* =====================================================================
   11. ALERTS
   A message the page needs to make about itself: what just happened, or
   what is about to stop working. Four tones, each pulling its fill, its
   border and its text from one semantic family so they can never drift
   apart. The title is set in the display face and the body in Inter, so
   the two read as heading + explanation rather than one long sentence.
   ===================================================================== */
body.li-app .wds-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--wds-r-sm);
}
body.li-app .wds-alert > svg,
body.li-app .wds-alert > i { width: 17px; height: 17px; font-size: 17px; flex: none; margin-top: 1px; }
body.li-app .wds-alert b,
body.li-app .wds-alert .wds-alert__title {
    display: block;
    font-family: var(--wds-font-display);
    font-weight: 700;
    margin-bottom: 1px;
}
body.li-app .wds-alert--success { background: var(--wds-green-tint); border-color: var(--wds-green-line); color: var(--wds-green); }
body.li-app .wds-alert--info    { background: var(--wds-blue-tint);  border-color: var(--wds-blue-100);  color: var(--wds-blue); }
body.li-app .wds-alert--warn    { background: var(--wds-amber-tint); border-color: var(--wds-amber-line); color: var(--wds-amber); }
body.li-app .wds-alert--danger  { background: var(--wds-red-tint);   border-color: var(--wds-red-line);   color: var(--wds-red); }

/* =====================================================================
   12. EMPTY STATES
   Same shape everywhere: muted icon in a tinted circle, one title, one
   line of explanation, one action. Never orange body text on white.
   ===================================================================== */
body.li-app .wds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 34px 20px;
    text-align: center;
}
body.li-app .wds-empty__icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--wds-fill);
    color: var(--wds-ink-3);
}
body.li-app .wds-empty__icon svg,
body.li-app .wds-empty__icon i { width: 20px; height: 20px; font-size: 20px; }
body.li-app .wds-empty__title { font-family: var(--wds-font-display); font-size: 15.5px; font-weight: 700; color: var(--wds-ink); }
/* Inside a card that already carries a heading, the full-height version wastes
   half a screen saying nothing. */
body.li-app .wds-empty--inline { padding: 18px 16px; gap: 2px; }
body.li-app .wds-empty--inline .wds-empty__icon { width: 34px; height: 34px; }
body.li-app .wds-empty--inline .wds-empty__title { font-size: 14px; }
body.li-app .wds-empty__body {
    max-width: 34ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wds-ink-2);
}
body.li-app .wds-empty .wds-btn { margin-top: var(--wds-s3); }

/* =====================================================================
   13. TABS
   A filter across one list. Underline, never a pill row: the tabs sit on
   the card's own top edge, so the active one has to join the surface
   below it rather than float over it. Scrolls sideways on a phone with
   the bar hidden, because five tabs do not fit at 360px.
   ===================================================================== */
body.li-app .wds-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    border-bottom: 1px solid var(--wds-line);
    overflow-x: auto;
    scrollbar-width: none;
}
body.li-app .wds-tabs::-webkit-scrollbar { display: none; }
body.li-app .wds-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wds-ink-3);
    background: transparent;
    border: 0;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
body.li-app .wds-tab:hover { color: var(--wds-ink); text-decoration: none; }
body.li-app .wds-tab[aria-selected="true"],
body.li-app .wds-tab.is-active { color: var(--wds-blue); border-bottom-color: var(--wds-blue); }
body.li-app .wds-tab__count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--wds-pill);
    background: var(--wds-fill);
    color: inherit;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
body.li-app .wds-tab[aria-selected="true"] .wds-tab__count,
body.li-app .wds-tab.is-active .wds-tab__count { background: var(--wds-blue-tint); }

/* =====================================================================
   14. TABLES
   Column headings are the quietest thing on the row — uppercase 11px on a
   tinted band — so the data reads first. Wrapped in an overflow box
   because a five-column table cannot honestly shrink to phone width.
   ===================================================================== */
body.li-app .wds-table-wrap { overflow-x: auto; }
body.li-app .wds-table { width: 100%; border-collapse: collapse; }
body.li-app .wds-table th {
    padding: 11px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    color: var(--wds-ink-3);
    background: var(--wds-surface-2);
    border-bottom: 1px solid var(--wds-line);
}
body.li-app .wds-table td {
    padding: 13px 18px;
    font-size: 13.5px;
    color: var(--wds-ink-2);
    border-bottom: 1px solid var(--wds-line-soft);
}
body.li-app .wds-table tbody tr:last-child td { border-bottom: 0; }
body.li-app .wds-table tbody tr:hover { background: var(--wds-surface-2); }
body.li-app .wds-table td strong { color: var(--wds-ink); font-weight: 650; }

/* =====================================================================
   15. SEARCH BAR & FILTER PANEL
   The pair that opens a results page. The filter group's count sits at
   the end of its own row so the eye can run down the numbers without
   reading the labels.
   ===================================================================== */
body.li-app .wds-searchbar {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 9px;
    background: var(--wds-surface);
    border: 1px solid var(--wds-line);
    border-radius: var(--wds-r);
    box-shadow: var(--wds-shadow-card);
}
body.li-app .wds-searchfield {
    flex: 1;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    background: var(--wds-surface-2);
    border: 1px solid transparent;
    border-radius: var(--wds-r-sm);
    color: var(--wds-ink-3);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.li-app .wds-searchfield:focus-within {
    border-color: var(--wds-blue);
    box-shadow: 0 0 0 3px var(--wds-ring);
    background: var(--wds-surface);
}
body.li-app .wds-searchfield input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 13.5px;
    color: var(--wds-ink) !important;
}
body.li-app .wds-searchfield > svg,
body.li-app .wds-searchfield > i { width: 15px; height: 15px; font-size: 15px; flex: none; }

body.li-app .wds-filtergroup { padding: 14px 16px; border-bottom: 1px solid var(--wds-line-soft); }
body.li-app .wds-filtergroup:last-child { border-bottom: 0; }
body.li-app .wds-filtergroup__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wds-ink-3);
}
body.li-app .wds-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--wds-ink-2);
    cursor: pointer;
}
body.li-app .wds-opt:hover { color: var(--wds-ink); }
body.li-app .wds-opt input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--wds-blue);
    cursor: pointer;
}
body.li-app .wds-opt__n { margin-left: auto; font-size: 11px; color: var(--wds-ink-3); font-variant-numeric: tabular-nums; }

/* =====================================================================
   16. HERO
   The blue gradient header EVERY candidate panel page opens with, not
   just the dashboard. It is the first thing on the page and carries the
   actions the page exists to push, so the button roles invert on it: the
   primary goes white, because a blue primary on blue is invisible.

   <x-website.candidate.page-header> is the only thing that should render
   it. Before that component the panel carried four different page-title
   patterns, one of them (.dashboard-right-header) hidden outright by the
   anti-flash CSS, so several pages showed no title at all.

   Composition:
     .wds-hero > [.wds-hero__icon | .wds-hero__avatar | <img class=wds-avatar>]
                 .wds-hero__body > __title + __sub [+ __meta]
                 [+ .wds-hero__actions]
   ===================================================================== */
body.li-app .wds-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    margin-bottom: var(--wds-s4);
    border-radius: var(--wds-r);
    background: linear-gradient(118deg, var(--wds-blue-active) 0%, var(--wds-blue) 55%, #3f9bff 100%);
    color: #fff;
    box-shadow: var(--wds-shadow-brand);
}
body.li-app .wds-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 200px at 88% -30%, rgba(255, 255, 255, .28), transparent 70%);
    pointer-events: none;
}
/* Icon tile for the pages that have no avatar to show — which is all of
   them except the dashboard and Account Settings. */
body.li-app .wds-hero__icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: var(--wds-r-sm);
    border: 1px solid rgba(255, 255, 255, .30);
    background: rgba(255, 255, 255, .18);
    font-size: 25px;
    line-height: 1;
    color: #fff;
}
body.li-app .wds-hero__avatar {
    width: 60px; height: 60px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 2.5px solid rgba(255, 255, 255, .55);
    font-family: var(--wds-font-display);
    font-weight: 800;
    font-size: 23px;
    color: #fff;
}
body.li-app .wds-hero__body { flex: 1; min-width: 210px; position: relative; }
body.li-app .wds-hero .wds-hero__title {
    margin: 0;
    font-family: var(--wds-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    /* The selector is class-chained and the colour is !important for one
       reason each. naukri-candidate.css carries
       `body.naukri-candidate .dashboard-right h1 { color: var(--nk-ink) !important }`
       at (0,3,1) — a plain `body.li-app .wds-hero__title` is (0,2,1) and loses
       to it, which rendered the title near-black on the blue. Chaining .wds-hero
       matches that specificity and this file loads after naukri-candidate.css.
       The !important is for dashboard-v3-dark.css, which forces every h1-h6 and
       every p inside .dashboard-wrapper to its dark ink and is linked from the
       sidebar component in the BODY, i.e. after this file. */
    color: #fff !important;
}
body.li-app .wds-hero .wds-hero__sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .88) !important; }
body.li-app .wds-hero__meta,
body.li-app .wds-hero__actions {
    display: flex;
    gap: var(--wds-s2);
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
body.li-app .wds-hero__meta { margin-top: 10px; }
body.li-app .wds-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 4px 11px;
    border-radius: var(--wds-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 11.5px;
    font-weight: 650;
    color: #fff;
    text-decoration: none;
}

/* Anything dropped into the hero has to survive on blue. A badge goes
   translucent-white whatever tone it carries elsewhere — a green
   wds-badge--success on this gradient is a sticker — and an avatar passed
   through the media slot gets the same white ring as .wds-hero__avatar. */
body.li-app .wds-hero .wds-badge {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
    color: #fff !important;
}
body.li-app .wds-hero .wds-badge__dot { background: #fff; }
body.li-app .wds-hero .wds-avatar { position: relative; border: 3px solid rgba(255, 255, 255, .55); }
body.li-app .wds-hero .wds-avatar--initial { background: rgba(255, 255, 255, .2); color: #fff; }
body.li-app .wds-hero a:not(.wds-btn):not(.wds-badge) { color: #fff !important; text-decoration: underline; }

@media (max-width: 575.98px) {
    body.li-app .wds-hero { gap: 12px; padding: 18px; }
    body.li-app .wds-hero .wds-hero__title { font-size: 19px; }
    body.li-app .wds-hero__icon { width: 44px; height: 44px; font-size: 21px; }
    body.li-app .wds-hero__actions { width: 100%; }
    body.li-app .wds-hero__actions .wds-btn { flex: 1; }
}

/* =====================================================================
   17. LAYOUT HELPERS
   Deliberately few. Anything more belongs in the page.
   ===================================================================== */
/* A candidate whose display name is one unbroken token -- a pasted email, a
   run-on word -- had nothing to break on, so the hero title ran under its own
   action buttons and was hard-cut. Wrapping just makes the hero taller. */
body.li-app .wds-hero__title { overflow-wrap: anywhere; }

body.li-app .wds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* A grid item defaults to min-width: auto -- a content-based minimum -- so it
   refuses to shrink below its longest unbreakable line and grows straight past
   its track. On the candidate dashboard a job titled "3D Technical Artist
   [ Intern | Freelancer | Contractor ] - Blender ( Remote )" pushed its card
   from 609px to 657px, over the gutter and under the card beside it, with the
   Apply button stranded on the border. The .wds-truncate on the title could
   never fire, because nothing upstream was constraining the width for it to
   truncate to. .wds-checkgrid already had minmax(0, 1fr) for the same reason.

   Both halves are needed: minmax(0, ...) lets the TRACK be narrower than its
   content, min-width: 0 lets the ITEM be. */
body.li-app .wds-grid-2 > *,
body.li-app .wds-stats > *,
body.li-app .wds-formgrid > * { min-width: 0; }
body.li-app .wds-stack { display: flex; flex-direction: column; }
body.li-app .wds-stack--2 { gap: var(--wds-s2); }
body.li-app .wds-stack--3 { gap: var(--wds-s3); }
body.li-app .wds-stack--4 { gap: var(--wds-s4); }
body.li-app .wds-stack--5 { gap: var(--wds-s5); }
body.li-app .wds-between { display: flex; align-items: center; justify-content: space-between; gap: var(--wds-s3); }
body.li-app .wds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.li-app .wds-nums { font-variant-numeric: tabular-nums; }

/* Screen-reader only — for icon buttons that have no visible label */
body.li-app .wds-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   18. RESPONSIVE
   ===================================================================== */
/* auto-fit with a 148px floor needs 628px of content width to hold four
   tracks, so from ~656px down the stat row rendered three tiles and dropped
   the fourth onto a line of its own. Pinned to two-up below the md breakpoint
   this file already uses, rather than to the pixel where auto-fit gives out:
   2x2 is the honest layout there and no arithmetic can orphan a tile. */
@media (max-width: 767.98px) {
    body.li-app .wds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    body.li-app .wds-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    body.li-app .wds-stat__num { font-size: 22px; }
    body.li-app .wds-listcard { padding: 12px; gap: var(--wds-s3); }
    body.li-app .wds-row__meta { white-space: normal; }
    body.li-app .wds-card__body { padding: var(--wds-s3); }
    body.li-app .wds-card__head { padding: 12px var(--wds-s3); }
    /* A sole primary action goes full-width on a phone, nothing else does. */
    body.li-app .wds-btn--block-sm { display: flex; width: 100%; }
}

/* =====================================================================
   19. PRINT — resumes and offer letters are printed from these pages
   ===================================================================== */
@media print {
    body.li-app .wds-btn,
    body.li-app .wds-card__link { display: none !important; }
    body.li-app .wds-card { border-color: #ccc; break-inside: avoid; }
}

/* =====================================================================
   20. OVERFLOW MENU
   The answer to "this row has four buttons". One visible action stays;
   everything used less than ~20% of the time moves in here.
   Behaviour lives in public/frontend/js/workdu-ui.js.
   ===================================================================== */
body.li-app .wds-menu { position: relative; display: inline-flex; }
body.li-app .wds-menu__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1020;
    min-width: 176px;
    padding: 5px;
    background: var(--wds-surface);
    border: 1px solid var(--wds-line);
    border-radius: var(--wds-r);
    box-shadow: var(--wds-shadow-pop);   /* it floats, so it gets the shadow */
}
/* Opens leftward when the trigger sits near the left edge (mobile). */
body.li-app .wds-menu__list--left { right: auto; left: 0; }
body.li-app .wds-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    font-family: var(--wds-font);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: var(--wds-ink);
    background: transparent;
    border: 0;
    border-radius: var(--wds-r-sm);
    cursor: pointer;
    text-decoration: none;
}
body.li-app .wds-menu__item:hover { background: var(--wds-fill); color: var(--wds-ink); text-decoration: none; }
body.li-app .wds-menu__item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--wds-ring);
}
body.li-app .wds-menu__item i,
body.li-app .wds-menu__item svg { width: 15px; height: 15px; font-size: 15px; flex: none; color: var(--wds-ink-3); }
body.li-app .wds-menu__item--danger { color: var(--wds-red); }
body.li-app .wds-menu__item--danger:hover { background: var(--wds-red-tint); color: var(--wds-red); }
body.li-app .wds-menu__item--danger i { color: var(--wds-red); }
body.li-app .wds-menu__sep { height: 1px; margin: 5px 0; background: var(--wds-line); }
body.li-app .wds-menu form { margin: 0; }

/* ── Submit button loading state (frontend/js/form-submit-loading.js) ──
   The spinner borrows the button's own colour, so it reads on a filled
   button and on an outlined one without a second rule. */
.wd-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.125em;
    animation: wd-btn-spin .7s linear infinite;
}
@keyframes wd-btn-spin { to { transform: rotate(360deg); } }
.is-loading { cursor: progress; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
    .wd-btn-spinner { animation-duration: 2s; }
}